/* Comparison charts (owner console and guest pages). Palette validated on #faf7f3; see src/views/charts.tsx. */
.viz,.viz-legend,.viz-table{--v1:#a8325e;--v2:#2a78d6;--v3:#eb6834;--band-fill:#ebe4db;--grid:#e6dfd8;--ax:#7a6f74;--txt:#160b10;--muted-mark:#a79c96}
.viz{margin:8px 0 4px;max-width:620px}
.viz svg{width:100%;height:auto;display:block;overflow:visible}
.viz figcaption,.viz-note{font-size:var(--fs-caption,12px);color:var(--ax);margin-top:4px}
.viz .grid{stroke:var(--grid);stroke-width:1}
.viz .ax{font:12px Inter,system-ui,sans-serif;fill:var(--ax)}
.viz .end{font:600 12.5px Inter,system-ui,sans-serif;fill:var(--txt);paint-order:stroke;stroke:var(--bg,#faf8f4);stroke-width:3px;stroke-linejoin:round}
.viz .line{fill:none;stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.viz .band{fill:var(--band-fill);stroke:none}
.viz .median{fill:none;stroke:var(--muted-mark);stroke-width:1.5;stroke-dasharray:4 4}
.viz .normal{stroke:#6f6660;stroke-width:2;stroke-linecap:round}
.viz-legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:var(--fs-small,13px);color:var(--txt);margin:6px 0}
.viz-legend span{display:inline-flex;align-items:center;gap:6px}
.viz-legend i{width:12px;height:12px;border-radius:50%;display:inline-block}
.viz-legend i.band{border-radius:3px;background:var(--band-fill);border:1px solid #d9d0c6}
/* percentile strip */
.strip-axis,.strip-row{display:grid;grid-template-columns:minmax(120px,38%) 1fr;gap:12px;align-items:center}
.strip-axis .ends{display:flex;justify-content:space-between;font-size:var(--fs-caption,12px);color:var(--ax)}
.strip-axis .ends em{font-style:normal}
.strip-row{padding:7px 0;border-top:1px solid var(--grid)}
.strip-row .s-lbl{font-size:var(--fs-small,13px);color:var(--txt);line-height:1.25}
.strip-row .s-lbl small{color:var(--ax)}
.strip-row .s-lbl{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0 8px}.strip-row .s-val{font-size:inherit;color:var(--ax);margin-left:auto;font-variant-numeric:tabular-nums;white-space:nowrap}
.strip-row.weak .dot{opacity:.55}
.strip .track{position:relative;height:18px;background:linear-gradient(90deg,#f1ebe4,#faf7f3 50%,#f1ebe4);border-radius:var(--r-chip,999px)}
.strip .track .mid{position:absolute;left:50%;top:3px;bottom:3px;width:1px;background:#d9d0c6}
.strip .dot{position:absolute;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;border:2px solid #faf7f3;box-sizing:content-box}
@media (max-width:520px){.strip-axis,.strip-row{grid-template-columns:1fr;gap:4px}.strip-axis>span:first-child{display:none}}
/* SVG text scales with the 440-unit viewBox: larger units on phones (drawn at ~354px, so 15px renders at 12px). */
@media (max-width:520px){.viz .ax{font-size:15px}.viz .end{font-size:15.5px}.viz .line{stroke-width:2.8}}
/* Wide screens: the chart stops at 520px so its 12px labels render at about 14px, one step above the caption. */
@media (min-width:600px){.viz .line{stroke-width:1.8}.viz svg{max-width:520px}}
/* phenology timeline */
.timeline .tl-axis{position:relative;height:16px;margin-left:64px;font-size:var(--fs-caption,12px);color:var(--ax)}
.timeline .tl-axis span{position:absolute;transform:translateX(-2px)}
.timeline .tl-row{display:grid;grid-template-columns:56px 1fr;gap:8px;align-items:center;padding:6px 0;border-top:1px solid var(--grid)}
.timeline .t-lbl{font:600 var(--fs-small,13px) Inter,system-ui,sans-serif;color:var(--txt)}
.timeline .track{position:relative;height:22px;background:#f1ebe4;border-radius:var(--r-chip,999px)}
.timeline .st{position:absolute;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;color:#fff;font:700 var(--fs-caption,12px)/20px Inter,system-ui,sans-serif;text-align:center;font-style:normal;border:2px solid #faf7f3;box-sizing:content-box}
/* table view */
.viz-table{margin:6px 0 14px;font-size:var(--fs-small,13px)}
.viz-table summary{cursor:pointer;color:var(--ax);padding:12px 0;margin:-4px 0}
.viz-table table{border-collapse:collapse;margin-top:6px;width:100%;max-width:620px}
.viz-table th,.viz-table td{text-align:left;padding:4px 8px;border-bottom:1px solid var(--grid)}
@media (max-width:520px){.viz-table th,.viz-table td{padding:6px 6px 6px 0}.viz-table td:nth-child(2){white-space:nowrap}}
/* ranked bars */
.rank .rk{display:grid;grid-template-columns:minmax(110px,34%) 1fr auto;gap:10px;align-items:center;padding:4px 0;font-size:var(--fs-small,13px)}
.rank .rk-bar{height:12px;background:#f1ebe4;border-radius:var(--r-chip,999px);overflow:hidden}
.rank .rk-bar i{display:block;height:100%;background:var(--muted-2,#b9ada4);border-radius:0 4px 4px 0}
.rank .rk.on .rk-bar i{background:var(--v1)}
.rank .rk.on .rk-name{font-weight:700}
.rank .rk-val{font-variant-numeric:tabular-nums;color:var(--txt);white-space:nowrap}