/* Roles: visual cues and the Insights panel. Only the tokens app.css defines, so both schemes read through them; one series hue per chart (--accent2), text in the ink tokens, hairline grid in --line. */

/* chips: a fact each. scale (Unicorn, Centaur) wears the tag tokens; a named list is outlined in the accent; a plain fact (trend, posture, headcount band) sits on the second ground. None is a status colour. */
.viz-chips{display:inline-flex;flex-wrap:wrap;gap:4px;vertical-align:top;margin-left:8px}
.viz-chip{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:4px;border:1px solid var(--line2);background:var(--bg2);color:var(--ink2);font-family:var(--sans);font-style:normal;font-size:11px;font-weight:600;line-height:1;letter-spacing:.01em;white-space:nowrap;cursor:default}
.viz-chip.viz-scale{border-color:var(--tag-line);background:var(--tag-bg);color:var(--tag-fg)}
.viz-chip.viz-list{border-color:var(--accent2);background:transparent;color:var(--ink)}
.viz-chips.viz-small{margin-left:0;gap:3px}
.viz-chips.viz-small .viz-chip{height:16px;padding:0 5px;font-size:10px}

/* the panel sits between the filter summary and the grid; the work column gets a fourth row only while it is open */
.work.viz-work{grid-template-rows:auto auto auto minmax(0,1fr)}
.viz-panel{margin:0 24px 14px;padding:12px 14px 10px;background:var(--card);border:1px solid var(--line);border-radius:10px;container-type:inline-size;min-height:0;min-width:0}
.viz-panel:focus-visible{outline:none}   /* focus lands here only when the clear link hides under it; the panel is not a tab stop */
@media(min-width:721px){.viz-panel{max-height:min(54vh,620px);overflow:auto;scrollbar-width:thin}}

/* stat tiles: the value in the sans, semibold, proportional figures; the small line under it in tabular figures */
.viz-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.viz-tile{padding:8px 10px 7px;border:1px solid var(--line);border-radius:8px;background:var(--bg);min-width:0}
.viz-k{font-size:12px;line-height:16px;color:var(--ink3)}
.viz-v{font-family:var(--sans);font-size:24px;font-weight:600;line-height:30px;color:var(--ink);overflow-wrap:anywhere}
.viz-s{font-size:11px;line-height:14px;color:var(--ink3);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}

/* charts: one column at phone width, two at a readable width, four with the companies card down the right */
.viz-charts{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin-top:10px}
.viz-card{margin:0;padding:8px 10px 6px;border:1px solid var(--line);border-radius:8px;background:var(--bg);min-width:0}
.viz-card figcaption{font-size:12px;font-weight:600;line-height:16px;color:var(--ink2);margin-bottom:6px}
.viz-body{min-width:0}
@container (max-width:479px){.viz-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container (min-width:560px){.viz-charts{grid-template-columns:repeat(2,minmax(0,1fr))}.viz-card.viz-wide{grid-column:span 2}}
@container (min-width:960px){.viz-charts{grid-template-columns:repeat(4,minmax(0,1fr))}.viz-card.viz-tall{grid-row:span 3}}

/* marks: the accent hue, a lift on hover and focus; grid and axis hairlines; text in ink tokens, never the series colour */
.viz-body svg{display:block;width:100%;height:auto;overflow:visible}
.viz-fill{fill:var(--accent2)}
.viz-col:hover .viz-fill,.viz-col:focus-visible .viz-fill,.viz-row:hover .viz-fill,.viz-row:focus-visible .viz-fill{filter:brightness(1.18)}
.viz-col{outline:none;cursor:default}
.viz-col:focus-visible .viz-hit{stroke:var(--focus);stroke-width:2}
/* selection: every mark is a button. A selected mark keeps the full fill and wears a ring of the same hue a 2px surface gap outside it;
   in a chart with a selection the other marks step back to a tint of that hue. The row and table twins take the grid's selected ground. Never a second hue. */
.viz-col[data-key],.viz-row[data-key]{cursor:pointer}
.viz-ring{fill:none;stroke:var(--accent2);stroke-width:1.5}
.viz-has-sel .viz-col:not(.viz-on) .viz-fill,.viz-has-sel .viz-row:not(.viz-on) .viz-fill{fill-opacity:.45}
.viz-row.viz-on,.viz-row.viz-on:hover{background:var(--row-selected)}
.viz-table tr.viz-on td{background:var(--row-selected)}
.viz-tbtn{border:0;background:transparent;padding:0 2px;margin:0 -2px;border-radius:3px;font:inherit;color:var(--ink);text-align:left;cursor:pointer}
.viz-tbtn:hover{color:var(--accent2);text-decoration:underline}
.viz-tbtn[aria-pressed="true"]{font-weight:600}
.viz-clear{border:0;background:transparent;padding:0;margin:0;font:inherit;font-weight:500;color:var(--accent2);cursor:pointer;white-space:nowrap}
.viz-clear:hover{text-decoration:underline}
.viz-grid{stroke:var(--line);stroke-width:1;shape-rendering:crispEdges}
.viz-axis{stroke:var(--line2);stroke-width:1;shape-rendering:crispEdges}
.viz-tick{fill:var(--ink3);font-family:var(--sans);font-size:10px}
.viz-val{fill:var(--ink2);font-family:var(--sans);font-size:11px;font-weight:600;font-variant-numeric:tabular-nums}

/* horizontal bars: a label cell, then the bar with its value at the tip; the whole row is the hover and focus target */
.viz-rows{display:grid;gap:2px}
.viz-row{display:grid;grid-template-columns:minmax(0,42%) minmax(0,1fr);gap:8px;align-items:center;min-height:24px;padding:1px 4px;border-radius:4px;cursor:default}
.viz-row:hover{background:var(--row-hover)}
.viz-rows.viz-cos .viz-row{grid-template-columns:minmax(0,52%) minmax(0,1fr)}
.viz-lab{display:flex;flex-wrap:wrap;gap:2px 6px;align-items:center;min-width:0;font-size:12px;line-height:16px;color:var(--ink)}
.viz-name{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.viz-hbar{display:block;width:100%;height:20px;overflow:visible}
.viz-empty{font-size:12px;line-height:16px;color:var(--ink3);padding:6px 0}

/* the table twin of each column chart, folded */
.viz-table{margin-top:6px;font-size:12px;color:var(--ink2)}
.viz-table summary{cursor:pointer;color:var(--ink3);font-size:11px}
.viz-table table{border-collapse:collapse;margin-top:4px;width:100%;max-width:360px}
.viz-table th{text-align:left;font-weight:600;color:var(--ink3);font-size:11px;padding:2px 8px 2px 0;border-bottom:1px solid var(--line)}
.viz-table td{padding:2px 8px 2px 0;border-bottom:1px solid var(--line);color:var(--ink)}
.viz-table td.num{text-align:right;font-variant-numeric:tabular-nums}

.viz-foot{margin:10px 0 0;font-size:12px;line-height:16px;color:var(--ink3)}
.viz-tip{position:fixed;z-index:35;pointer-events:none;max-width:280px;padding:5px 9px;border-radius:6px;background:var(--ink);color:var(--bg);font-size:12px;line-height:16px;box-shadow:0 6px 18px var(--shade)}
.viz-tip b{font-weight:700;font-size:13px}
.viz-tip span{margin-left:5px;opacity:.85}

@media(max-width:720px){
  .viz-panel{margin:0 16px 12px;padding:10px 12px 8px}
  .viz-v{font-size:22px;line-height:28px}
  .viz-row{min-height:30px}
  .drawer .co .viz-chips{margin-left:0;margin-top:4px;display:flex}
}
@media(prefers-reduced-motion:no-preference){.viz-fill,.viz-row{transition:filter .12s,fill-opacity .12s,background .12s}}