.ba-hist { max-width: 820px; margin: 0 auto; }
.ba-hist h2 { margin: 28px 0 10px; font-size: 1.1rem; }
.ba-hist__lead { margin: 0 0 14px; }
.ba-hist__tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.ba-hist__tab { padding: 8px 14px; border: 1px solid rgba(128, 128, 128, .4); border-radius: 999px; background: transparent; color: inherit; font: inherit; font-size: .9rem; cursor: pointer; }
.ba-hist__tab.is-active { background: #1a73e8; border-color: #1a73e8; color: #fff; }
.ba-hist__tab:focus-visible { outline: 3px solid #8ab4f8; outline-offset: 2px; }
.ba-hist__lock { margin-left: 4px; padding: 1px 6px; border-radius: 999px; background: rgba(240, 138, 36, .3); font-size: .7rem; font-weight: 700; }
.ba-hist__tab.is-active .ba-hist__lock { background: rgba(255, 255, 255, .3); }
.ba-hist__chart { border: 1px solid rgba(128, 128, 128, .3); border-radius: 14px; padding: 10px; background: rgba(128, 128, 128, .06); transition: opacity .15s; }
.ba-hist__chart.is-loading { opacity: .5; }
.ba-hist__svg { display: block; width: 100%; height: auto; }
.ba-hist__facts { list-style: none; padding: 0; margin: 14px 0; display: grid; gap: 6px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.ba-hist__facts li { padding: 10px 14px; border-radius: 10px; background: rgba(128, 128, 128, .1); }
.ba-hist__scroll { overflow-x: auto; }
.ba-hist__table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.ba-hist__table th, .ba-hist__table td { padding: 8px 10px; text-align: right; border-bottom: 1px solid rgba(128, 128, 128, .25); }
.ba-hist__table th:first-child, .ba-hist__table thead th:first-child { text-align: left; }
.ba-hist__note { opacity: .75; font-size: .88rem; }
.ba-hist__locked { padding: 28px 16px; text-align: center; }
.ba-hist__btn { display: inline-block; padding: 11px 20px; border-radius: 10px; background: #1a73e8; color: #fff; font-weight: 600; text-decoration: none; }
.ba-hist__cities { list-style: none; padding: 0; columns: 3 160px; column-gap: 20px; }
.ba-hist__cities li { padding: 4px 0; break-inside: avoid; }
.ba-hist__cities span { opacity: .6; font-size: .8rem; }

/* chart */
.ba-hist__chart { padding: 14px 10px 6px; }
.ba-hist__bar { transition: opacity .12s; }
.ba-hist__bar--0 { fill: #7cc4ff; background: #7cc4ff; }
.ba-hist__bar--1 { fill: #2f8cf0; background: #2f8cf0; }
.ba-hist__bar--2 { fill: #1b4fd1; background: #1b4fd1; }
.ba-hist__bar--3 { fill: #7a1fc4; background: #7a1fc4; }
.ba-hist__svg .ba-hist__bar:hover { opacity: .75; }
.ba-hist__dry { fill: rgba(128, 160, 128, .55); background: rgba(128, 160, 128, .55); }
.ba-hist__gap { fill: rgba(128, 128, 128, .28); background: rgba(128, 128, 128, .28); }
.ba-hist__grid { stroke: rgba(128, 128, 128, .25); stroke-width: 1; stroke-dasharray: 2 5; }
.ba-hist__grid--base { stroke-dasharray: none; stroke: rgba(128, 128, 128, .5); }
.ba-hist__axis { fill: currentColor; opacity: .8; font-size: 15px; }
.ba-hist__axis--x { font-size: 14px; }
.ba-hist__unit { fill: currentColor; opacity: .65; font-size: 13px; }
.ba-hist__legend { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 8px 2px 4px; padding: 0; font-size: .82rem; opacity: .85; }
.ba-hist__legend li { display: inline-flex; align-items: center; gap: 6px; }
.ba-hist__legend i { display: inline-block; width: 14px; height: 14px; border-radius: 4px; }
.ba-hist__facts li { border: 1px solid rgba(128, 128, 128, .2); }

/* the chart is drawn by the script in the same way as the forecast chart; the svg above is the fallback */
.ba-hist__chart.is-drawn { height: 150px; padding: 0; background: none; border: 0; border-radius: 0; touch-action: pan-y; user-select: none; cursor: ew-resize; position: relative; }
@media (min-width: 768px) { .ba-hist__chart.is-drawn { height: 200px; } }
.ba-hist__chart.is-drawn svg { display: block; width: 100%; height: 100%; }
.ba-hist__chart.is-drawn text { fill: var(--muted, #6b7a8c); font-size: 10px; opacity: 1; }
.ba-hist__chart.is-drawn .ba-hist__ygrid { stroke: var(--line, rgba(128, 128, 128, .3)); stroke-width: 1; }
.ba-hist__chart.is-drawn .ba-hist__cursor { stroke: var(--now, #e5484d); stroke-width: 2; }
.ba-hist__pick { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0; }
.ba-hist__pick label { display: grid; gap: 4px; font-size: .85rem; }
.ba-hist__pick select { min-height: 40px; padding: 6px 10px; font: inherit; color: inherit; background: transparent; border: 1px solid rgba(128, 128, 128, .5); border-radius: 8px; }
.ba-hist__line { display: inline-block; width: 18px !important; height: 0 !important; border-top: 3px solid #f08a24; border-radius: 0 !important; background: none !important; }
.ba-hist__read { min-height: 1.5em; margin: 4px 0 4px; font-size: 1.05rem; font-variant-numeric: tabular-nums; }