/* Hol a Bubi? – analysis page (on top of app.css; same tokens) */
.an-top { grid-template-columns: 1fr; }
.an-top .back { margin: 0 0 6px; font: 13px var(--mono); }
.an-top .back a { text-decoration: none; }
.an-top h1 { font-size: 28px; }
.an .lede p { margin: 0 0 10px; }
.an .lede ul { margin: 0 0 10px; padding-left: 20px; }
.an .lede li { margin-bottom: 6px; }

.chart { width: 100%; overflow: hidden; }
.ch { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--mono); }
.ch .grid { stroke: var(--line); stroke-width: 1; }
.ch .ax { fill: var(--muted); font-size: 12px; }
.ch .val { fill: var(--text); font-size: 12px; }
.ch .bar.w { fill: var(--teal); opacity: .85; }
.ch .bar.r { fill: var(--amber); opacity: .85; }
.ch .bar.van { fill: var(--purple); opacity: .85; }
.ch .bar.part { opacity: .4; }
.ch .bar:hover, .ch .dot:hover, .ch .st:hover { opacity: 1; stroke: #fff; stroke-width: 1.5; }
.ch .gap { fill: rgba(255, 93, 108, .12); stroke: rgba(255, 93, 108, .5); stroke-dasharray: 3 3; }
.ch .avg { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linejoin: round; opacity: .9; pointer-events: none; }
.ch .drop { font-size: 12px; pointer-events: none; }
.ch .mk line { stroke-width: 1.5; stroke-dasharray: 4 4; }
.ch .mk circle { stroke: var(--bg); stroke-width: 2; }
.ch .mk.change line { stroke: var(--amber); } .ch .mk.change circle { fill: var(--amber); }
.ch .mk.event line { stroke: var(--purple); } .ch .mk.event circle { fill: var(--purple); }
.ch .mk { cursor: help; }
.ch .seg.old { fill: var(--blue); opacity: .8; }
.ch .seg.new { fill: var(--teal); opacity: .9; }
.ch .switch { stroke: var(--amber); stroke-width: 2; stroke-dasharray: 5 4; }
.ch .dot { stroke-width: 2; }
.ch .dot.w { fill: var(--teal); stroke: var(--teal); fill-opacity: .55; }
.ch .dot.r { fill: var(--amber); stroke: var(--amber); fill-opacity: .55; }
.ch .dot.before { fill-opacity: 0; }
.ch .dot.after { fill-opacity: 1; }
.ch .rain { fill: none; stroke: var(--blue); stroke-width: 2; pointer-events: none; }
.legend i.rain { width: 15px; height: 15px; border-radius: 50%; background: none; border: 2px solid var(--blue); }
.ch .temp { fill: none; stroke: var(--orange); stroke-width: 2.5; stroke-linejoin: round; pointer-events: none; }
.ch .ax.tmp { fill: var(--orange); }
.ch .ln { fill: none; stroke-width: 2.2; stroke-linejoin: round; pointer-events: none; }
.ch .ln.outside { stroke: var(--teal); } .ch .ln.broken { stroke: var(--red); } .ch .ln.van { stroke: var(--purple); }
.ch .hit { fill: transparent; }
.ch .hit:hover { fill: rgba(255, 255, 255, .05); }

.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 4px 0 8px; font: 12px var(--mono); color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.legend i.w, .legend i.new, .legend i.outside { background: var(--teal); }
.legend i.r { background: var(--amber); }
.legend i.old { background: var(--blue); }
.legend i.broken { background: var(--red); }
.legend i.van { background: var(--purple); }
.legend i.part { background: var(--teal); opacity: .4; }
.legend i.avg { height: 3px; background: #fff; }
.legend i.temp { height: 3px; background: var(--orange); }
.legend i.mk-change, .legend i.mk-event { width: 10px; height: 10px; border-radius: 50%; background: var(--amber); }
.legend i.mk-event { background: var(--purple); }
.legend i.dot-w, .legend i.dot-r, .legend i.dot-before { width: 11px; height: 11px; border-radius: 50%; background: rgba(62, 230, 193, .55); border: 2px solid var(--teal); }
.legend i.dot-r { background: rgba(255, 201, 77, .55); border-color: var(--amber); }
.legend i.dot-before { background: none; border-color: var(--muted); }

.tbl-wrap { overflow-x: auto; margin-bottom: 14px; }
table.cmp { border-collapse: collapse; width: 100%; max-width: 900px; font: 14px var(--mono); }
table.cmp th, table.cmp td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.cmp th[scope="row"] { text-align: left; font-weight: 400; color: var(--text); white-space: normal; }
table.cmp thead th { color: var(--muted); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 400; }
table.cmp td.up { color: var(--teal); }
table.cmp td.down { color: var(--red); }

.map-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr); gap: 16px; align-items: start; }
.map-host { background: #0a131a; border: 1px solid var(--line); border-radius: 6px; }
.ch.map .districts { fill: none; stroke: #1a2f3d; stroke-width: 2; stroke-dasharray: 8 7; }
.ch.map .water { fill: #123a5c; stroke: rgba(79, 163, 255, .5); stroke-width: 2; }
.ch.map .st { stroke: rgba(0, 0, 0, .5); stroke-width: 1.5; }
.ch.map .st.sink { fill: var(--teal); fill-opacity: .75; }
.ch.map .st.src { fill: var(--red); fill-opacity: .75; }
.ch.map .st.flat { fill: var(--muted); fill-opacity: .35; }
.k { padding: 0 4px; border-radius: 3px; font-weight: 700; }
.k.sink { color: var(--teal); } .k.src { color: var(--red); }
.lists h3:first-child { margin-top: 0; }
.rank { margin: 0; padding: 0; list-style: none; counter-reset: r; font-size: 14px; }
.rank li { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--line); counter-increment: r; }
.rank li span::before { content: counter(r) ". "; color: var(--muted); font-family: var(--mono); }
.rank b { font: 700 13px var(--mono); white-space: nowrap; }
.rank b.sink { color: var(--teal); } .rank b.src { color: var(--red); } .rank b.warn { color: var(--amber); }
.rank small.muted { color: var(--muted); font: 11px var(--mono); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }

.recs { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin-bottom: 14px; }
.rec { background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; padding: 12px 14px; font-family: var(--mono); }
.rec .ic { font-size: 22px; line-height: 1; margin-bottom: 6px; }
.rec .l { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.rec .w { font-size: 13px; color: var(--text); margin-top: 4px; }
.rec .v { font-size: 20px; color: #fff; margin-top: 2px; }
.rec .s { font-size: 12px; color: var(--muted); }

.flow-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 6px 0 10px; font: 13px var(--mono); }
.flow-ctl input[type=range] { flex: 1 1 200px; accent-color: var(--teal); }
.btn-play { padding: 6px 12px; border: 1px solid var(--line-2); border-radius: 4px; background: var(--panel-2); color: var(--text); font: 13px var(--mono); cursor: pointer; }
.btn-play[aria-pressed="true"] { border-color: var(--teal); color: var(--teal); }
.btn-play:focus-visible, .flow-ctl input:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.fl-label { color: var(--muted); min-width: 0; }
.ch.flow .vol { stroke: none; }
.ch.flow .vol.sink { fill: var(--teal); fill-opacity: .22; }
.ch.flow .vol.src { fill: var(--red); fill-opacity: .22; }
.ch.flow .vol.flat { fill: var(--muted); fill-opacity: .15; }
.ch.flow .arrow { stroke: var(--amber); stroke-linecap: round; opacity: .9; }
.ch.flow .arrow:hover { stroke: #fff; }
.ch.flow .ahead { fill: var(--amber); }
.legend i.flow-arrow { width: 18px; height: 4px; background: var(--amber); }
.legend i.dot-sink, .legend i.dot-src { border-radius: 50%; background: rgba(62, 230, 193, .45); }
.legend i.dot-src { background: rgba(255, 93, 108, .45); }

@media (max-width: 760px) {
	.map-grid, .two { grid-template-columns: 1fr; }
	.an-top h1 { font-size: 21px; }
	.ch .ax, .ch .val { font-size: 11px; }
	table.cmp { font-size: 12px; }
	table.cmp th, table.cmp td { padding: 6px 4px; }
	table.cmp thead th { white-space: normal; font-size: 10px; letter-spacing: .04em; }
	table.cmp th[scope="row"] { min-width: 120px; }
}