/* ── gcchart.css — the charts in the house style (banking/js/gcchart.js).
   One legend component, Plex Mono labels, the same margins everywhere.
   Colours come from the tokens in desk.css; nothing here names a hex. */

.gcc{ display:block; width:100%; margin:var(--sp-1) 0 var(--sp-0); }
.gcc canvas{ display:block; width:100%; }
.gcc.spark{ display:inline-block; width:calc(72 * var(--u)); margin:0; vertical-align:middle; }
.gcc.spark canvas{ width:calc(72 * var(--u)); height:calc(16 * var(--u)); }
.gcc-head{ display:flex; align-items:baseline; gap:var(--sp-3); flex-wrap:wrap; font:var(--fs-1) var(--mono); letter-spacing:.04em; color:var(--muted); margin:0 0 var(--sp-1); min-height:calc(14 * var(--u)); }
.gcc-title{ letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.gcc-legend{ display:flex; gap:var(--sp-3); flex-wrap:wrap; flex:1; }
.gcc-key{ display:inline-flex; align-items:center; gap:var(--sp-1h); white-space:nowrap; color:var(--muted); }
.gcc-key .sw{ display:inline-block; width:calc(14 * var(--u)); height:0; border-top:1px solid var(--accent); }
.gcc-key .sw.dashed{ border-top-style:dashed; } .gcc-key .sw.dotted{ border-top-style:dotted; }
.gcc-key .sw.outline{ height:var(--sp-1h); border:1px solid var(--text); border-top-width:1px; width:var(--sp-2h); }
.gcc-key .gcc-val{ color:var(--text); font-weight:500; margin-left:var(--sp-0); }
.gcc-at{ margin-left:auto; color:var(--dim); white-space:nowrap; }
.gcc-head.hover .gcc-at{ color:var(--accent); }

/* a pair of charts side by side (the ladder and the gap, the stress test) */
.gcc-pair{ display:flex; gap:var(--sp-3); margin-top:var(--sp-2); }
.gcc-pair .gcc{ flex:1; min-width:0; }
@media (max-width:900px){ .gcc-pair{ flex-direction:column; } }

/* CHART: the cards, one per series, with a sparkline and the last value */
.gcc-bar{ margin:0 0 var(--sp-2); }
.gcc-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(calc(150 * var(--u)), 1fr)); gap:1px; background:var(--line); border:1px solid var(--line); margin:0 0 var(--sp-3); }
.gcc-card{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-0) var(--sp-1h); text-align:left; background:var(--panel); color:var(--text); border:0; padding:var(--sp-1h) var(--sp-2h) var(--sp-1); cursor:pointer; font:inherit; }
.gcc-card:hover{ background:var(--panel-2); }
.gcc-card.on{ box-shadow:inset 0 0 0 1px var(--accent); }
.gcc-card .k{ flex:1 1 100%; font:var(--fs-1) var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gcc-card .v{ font:500 var(--fs-4) var(--mono); flex:1; }
.gcc-card.on .v{ color:var(--accent); }
.gcc-fs .gcc{ margin-top:var(--sp-0); }
td.gcc-cell{ width:calc(80 * var(--u)); cursor:pointer; }
td.gcc-cell .gcc.spark{ display:block; }