/* ============================================================
   charts.css — the app's chart system (ui/charts.js, ui/networkGraph.js).
   Quiet chrome, loud data: hairline solid grid, 2px line, ~10% area wash,
   ≥8px end-dot with a surface ring, text in text tokens, hover layer +
   table view on every chart. Status colours carry a shape too.
   ============================================================ */
.chart { position: relative; min-width: 0; }
.chart-stage { position: relative; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart-grid { stroke: var(--hairline); stroke-width: 1; }
.chart-tick { font-family: var(--font-mono); font-size: 10px; fill: var(--text-3); }
.chart-area { opacity: 0.12; }
.chart-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart-dot-ring { fill: var(--card-solid); }
.chart-cross { stroke: var(--hairline-strong); stroke-width: 1; }
.chart-hit { cursor: crosshair; outline: none; }
.chart-hit:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 6px; }
.chart-tip { position: absolute; pointer-events: none; padding: 6px 9px; border-radius: 8px; background: var(--card-2); border: 1px solid var(--hairline-strong); box-shadow: 0 10px 24px -12px rgba(0,0,0,0.8); display: flex; flex-direction: column; gap: 1px; min-width: 72px; z-index: 2; }
.chart-tip b { font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; color: var(--text); line-height: 1.1; }
.chart-tip span { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }

/* table view — the non-hover path to every value */
.chart-table { margin-top: 8px; }
.chart-table summary { cursor: pointer; font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-4); list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.chart-table summary::-webkit-details-marker { display: none; }
.chart-table summary::before { content: "▸"; font-size: 0.7rem; transition: transform .15s var(--ease); }
.chart-table[open] summary::before { transform: rotate(90deg); }
.chart-table summary:hover { color: var(--text-2); }
.chart-table__scroll { max-height: 220px; overflow: auto; margin-top: 8px; border: 1px solid var(--hairline); border-radius: var(--r-md); }
.chart-table table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.chart-table th { position: sticky; top: 0; background: var(--card-2); font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); text-align: left; padding: 6px 10px; }
.chart-table td { padding: 5px 10px; border-top: 1px solid var(--hairline); color: var(--text-2); }
.chart-table td.num { text-align: right; font-variant-numeric: tabular-nums; color: var(--text); }

/* bars */
.bars { display: flex; flex-direction: column; gap: 6px; }
.bar-row { display: grid; grid-template-columns: minmax(90px, 132px) 1fr 44px; align-items: center; gap: 10px; padding: 2px 0; border-radius: 6px; transition: background .15s var(--ease); }
.bar-row:hover { background: var(--fill-subtle); }
.bar-label { font-size: 0.8rem; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-track { position: relative; height: 14px; border-radius: 0 4px 4px 0; overflow: hidden; }
.bar-fill { position: absolute; inset: 0; transform-origin: left center; border-radius: 0 4px 4px 0; transition: transform .45s var(--ease), filter .15s var(--ease); }
.bar-row:hover .bar-fill { filter: brightness(1.18); }
.bar-value { font-family: var(--font-display); font-weight: 600; font-size: 0.82rem; color: var(--text); font-variant-numeric: tabular-nums; text-align: right; }

/* sparkline + stat tile */
.spark { display: inline-flex; align-items: center; margin-left: auto; }
.spark-line { fill: none; stroke: var(--text-4); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.spark-dot { stroke: var(--card-solid); stroke-width: 2; }
.stat { padding: 16px 18px; border: 1px solid var(--hairline); border-radius: var(--r-2xl); background: var(--card-solid); min-width: 0; display: flex; flex-direction: column; }
.stat__v { font-family: var(--font-display); font-weight: 600; font-size: 1.9rem; line-height: 1; color: var(--text); letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat--hero .stat__v { font-size: 3rem; }
.stat__l { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); margin-top: 8px; }
.stat__foot { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin-top: 8px; min-height: 22px; }
.stat__d { font-size: 0.78rem; color: var(--text-2); white-space: nowrap; }
.stat__d i { font-style: normal; font-size: 0.6rem; margin-right: 1px; }
.stat__d small { color: var(--text-4); font-size: 0.7rem; }
.stat__d--good { color: var(--band-high); }
.stat__d--bad { color: var(--danger); }
.stat__d--flat { color: var(--text-3); }
@media (max-width: 480px) { .stat__v { font-size: 1.5rem; } }

/* ---- network graph ---- */
.netgraph { position: relative; }
.netgraph svg { display: block; width: 100%; height: auto; }
.ng-link { stroke: var(--hairline-strong); stroke-width: 1.5; transition: opacity .15s var(--ease); }
.ng-link--active { stroke: color-mix(in oklab, var(--accent) 55%, transparent); }
.ng-link--converted { stroke: color-mix(in oklab, var(--gold) 65%, transparent); }
.ng-link.is-dim { opacity: 0.18; }
.ng-node { cursor: pointer; outline: none; transition: opacity .15s var(--ease); }
.ng-node.is-dim { opacity: 0.28; }
.ng-hit { fill: transparent; }
.ng-mark { stroke: var(--card-solid); stroke-width: 2; transition: filter .15s var(--ease); }
.ng-node:hover .ng-mark, .ng-node:focus-visible .ng-mark { filter: brightness(1.25); }
.ng-node:focus-visible .ng-hit { stroke: var(--text); stroke-width: 1.5; }
.ng-node--self .ng-mark { fill: var(--text); }
.ng-node--pending .ng-mark { fill: var(--card-solid); stroke: var(--text-3); stroke-width: 2; }
.ng-node--active .ng-mark { fill: var(--accent); }
.ng-node--converted .ng-mark { fill: var(--gold); }
.ng-ring { fill: none; stroke: var(--gold); stroke-width: 1.5; opacity: 0.7; }
.ng-label { font-family: var(--font); font-size: 11px; fill: var(--text-2); pointer-events: none; }
.ng-node--self .ng-label { fill: var(--text); font-weight: 600; }
.ng-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 10px; list-style: none; padding: 0; font-size: 0.76rem; color: var(--text-2); }
.ng-legend li { display: inline-flex; align-items: center; gap: 7px; }
.ng-legend__note { color: var(--text-4); font-size: 0.7rem; margin-left: auto; }
.ng-key { width: 12px; height: 12px; border-radius: 50%; display: inline-block; box-sizing: border-box; }
.ng-key--self { background: var(--text); }
.ng-key--pending { border: 2px solid var(--text-3); }
.ng-key--active { background: var(--accent); }
.ng-key--converted { background: var(--gold); box-shadow: 0 0 0 2px var(--card-solid), 0 0 0 3.5px color-mix(in oklab, var(--gold) 70%, transparent); }