/* Scorecard board (design handoff 2026-07-15, high fidelity — geometry and
   treatments are specified to the pixel; do not eyeball-adjust).
   Chrome (page head, buttons' canon cousins) comes from app canon; these
   are the board's novel classes. */

.sc-asof{font-family:var(--font-mono);font-size:11.5px;color:var(--fg-faint);}

/* board toolbar — lens switch sits on the table, right-aligned */
.sc-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:30px;margin:2px auto 10px;}
.sc-seg{display:inline-flex;border:1px solid var(--border-strong);border-radius:var(--r-input);overflow:hidden;background:var(--paper);}
.sc-seg button{border:none;background:none;font-family:var(--font-sans);font-size:12px;font-weight:500;color:var(--fg-muted);padding:5px 12px;cursor:pointer;border-right:1px solid var(--border);}
.sc-seg button:last-child{border-right:none;}
.sc-seg button[aria-pressed="true"]{background:var(--surface-2);color:var(--fg);font-weight:600;}
.sc-seg button:not([aria-pressed="true"]):hover{background:var(--color-slate-50);color:var(--fg);}
.sc-btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border-strong);background:var(--surface);border-radius:var(--r-input);padding:6px 12px;font-family:var(--font-sans);font-size:12.5px;font-weight:500;color:var(--fg);cursor:pointer;}
.sc-btn:hover{background:var(--surface-2);}
a.sc-btn,a.sc-btn:hover,a.sc-btn:visited{color:var(--fg);text-decoration:none;}
.sc-btn-form{display:inline;}
.sc-month-label{font-size:13px;font-weight:600;color:var(--fg);padding:0 4px;white-space:nowrap;}
.sc-btn .cv{font-size:10px;color:var(--fg-faint);transition:transform var(--t-fast);}

/* legend */
.sc-legend{display:flex;align-items:center;gap:18px;font-size:11px;color:var(--fg-muted);flex-wrap:wrap;}
.sc-legend .li{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;}
.lg-goal{width:2px;height:12px;background:var(--fg);}
.lg-time{width:0;height:12px;border-left:2px dashed var(--fg-muted);}

/* table — board block pinned to the open-state footprint (sum of the five
   fixed columns) and centered against the page head; the closed state lives
   in the left of the same box, so opening benchmarks still moves nothing */
table.scb{width:var(--scb-w);border-collapse:collapse;table-layout:fixed;border-top:1px solid var(--border);margin-inline:auto;}
.sc-board{--scb-w:min(824px,100%);}
.sc-toolbar{width:var(--scb-w);}
table.scb th{padding:8px 10px 8px 0;font-family:var(--font-mono);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--fg-faint);white-space:nowrap;text-align:right;border-bottom:1px solid var(--border);vertical-align:bottom;}
table.scb th.l,table.scb th.viz{text-align:left;}
table.scb td{padding:9px 10px 9px 0;border-bottom:1px solid var(--border);vertical-align:baseline;overflow:hidden;text-overflow:ellipsis;}
td.metric{font-size:13.5px;font-weight:500;color:var(--fg);white-space:normal;line-height:1.3;}
/* font-size:0 zeroes the ERB whitespace text nodes — at the exact-fit 180px
   zone width they overflowed the cell and drew a text ellipsis. */
td.viz{vertical-align:middle;font-size:0;}
.band-row td.band-main{background:var(--surface-2);padding:10px 0 !important;border-top:1px solid var(--border-strong);border-bottom:1px solid var(--border);box-shadow:-8px 0 0 0 var(--surface-2),8px 0 0 0 var(--surface-2);overflow:visible;}
.band-row td.band-sp{background:none;border-top:none;border-bottom:none;}
.band-row td.band-bench{background:var(--surface-2);border-top:1px solid var(--border-strong);border-bottom:1px solid var(--border);box-shadow:8px 0 0 0 var(--surface-2);overflow:visible;}
.band{font-family:var(--font-mono);font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--fg);}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;}
.num{text-align:right;white-space:nowrap;}
.now{font-size:14px;font-weight:700;color:var(--fg);}
.prev{font-size:14px;font-weight:500;color:var(--fg-muted);}
.pct{font-size:14px;font-weight:500;color:var(--fg-muted);}
.goalv{font-size:14px;font-weight:500;color:var(--fg-muted);}
.tgt{font-size:11.5px;color:var(--fg-faint);font-weight:500;}

/* column widths (fixed → nothing moves; both lenses share the same 3 benchmark slots) */
.c-metric{width:320px;}
.c-now{width:104px;}
.c-bval{width:104px;}.c-bpct{width:96px;}.c-bbar{width:200px;}
.c-sp{width:auto;}
/* content within a benchmark cell swaps by lens, cell geometry is constant */
.as-goal{display:none;}
.sc-board.mode-goal .as-prior{display:none;}
.sc-board.mode-goal .as-goal{display:inline;}

tr.child .metric{padding-left:20px;font-weight:400;color:var(--fg-muted);font-size:13px;}
tr.child .now{font-weight:600;color:var(--fg-muted);}
tr.parent td{border-bottom-color:transparent;}
.flag{display:inline-flex;align-items:center;gap:3px;font-size:10.5px;color:#b45309;font-weight:500;white-space:nowrap;margin-left:8px;}
.tbi{font-style:italic;color:var(--fg-faint);font-size:12px;font-family:var(--font-sans);font-weight:400;}

/* pace bar: reference normalized to 100% (fixed), pace tick at time-elapsed (fixed) */
.pace{position:relative;display:inline-block;width:180px;height:12px;vertical-align:middle;background:var(--surface-2);border-radius:3px;}
.pace .mfill{position:absolute;left:0;top:0;bottom:0;background:var(--color-slate-900);border-radius:3px 0 0 3px;}
.pace .ptick{position:absolute;top:-3px;bottom:-3px;width:0;border-left:2px dashed var(--fg-muted);z-index:2;}
.pace .mgoal{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--fg);z-index:2;}
/* burndown line (burndown pairs): the actual level day by day, the dashed
   path from month-open to the landing, today as the dot — ink only. */
/* chart cells: vertical padding dropped so the row keeps standard height;
   horizontal geometry comes from the shared bar-zone rule above. */
table.scb td.bd-cell{padding-top:0;padding-bottom:0;vertical-align:middle;}
svg.bd{display:block;}
svg.bd .actual{fill:none;stroke:var(--fg);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
svg.bd .plan{fill:none;stroke:var(--fg-faint);stroke-width:1.4;stroke-dasharray:3 3;}
svg.bd .today{fill:var(--fg);}
svg.bd .base{stroke:var(--border);stroke-width:1;}
/* incident strip (zero-goal incident lines): the month as a thin line, today
   as a dashed tick, one dot per miss on the day it happened — ink only. */
svg.strip{display:block;}
svg.strip .axis{stroke:var(--border);stroke-width:1;}
svg.strip .todaytick{stroke:var(--fg-muted);stroke-width:1;stroke-dasharray:2 2;}
svg.strip .hit{fill:var(--fg);}
svg.bd text{font-family:var(--font-mono);font-size:8.5px;fill:var(--fg-muted);}
svg.bd text.landing{fill:var(--fg-faint);}
/* bar is its own visual zone, divided from the number group; no underline so nothing hangs in empty space */
/* one scale for every chart (Nick, 2026-08-17): bars, burndown lines, and
   strips all span 180px from a slim 10px inset — the old 56px inset left the
   zone mostly whitespace and squeezed the charts illegible. */
th.c-bbar, td.bbar{border-left:1px solid var(--border);padding-left:10px !important;}
table.scb td.bbar, table.scb td.c-sp{border-bottom:none;}

/* goals entry (bare-bones by design — a real design pass comes later) */
.sc-goals-tbl{border-collapse:collapse;margin-top:14px;}
.sc-goals-tbl td,.sc-goals-tbl th{padding:6px 14px 6px 0;border-bottom:1px solid var(--border);font-size:13px;text-align:left;}
.sc-goals-tbl input{width:130px;font-family:var(--font-mono);font-size:12.5px;padding:4px 8px;border:1px solid var(--border-strong);border-radius:var(--r-input);text-align:right;}
/* plain typing only — no spinner arrows */
.sc-goals-tbl input::-webkit-outer-spin-button,.sc-goals-tbl input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.sc-goals-tbl input[type=number]{-moz-appearance:textfield;appearance:textfield;}
.sc-goals-band td{background:var(--surface-2);font-family:var(--font-mono);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;}
/* year grid — 12 compact month columns; inputs sized for 7-digit values
   (a clipped leading digit reads as a different number) */
.sc-goals-tbl--year td,.sc-goals-tbl--year th{padding:5px 5px 5px 0;}
.sc-goals-tbl--year th{font-family:var(--font-mono);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--fg-faint);}
.sc-goals-tbl--year input{width:80px;padding:4px 5px;font-size:12px;}

/* definition affordance + custom tooltip (canon P0.12 — replaces the raw
   browser title=). Dotted label; hover or keyboard focus opens the overlay
   with the approved definition + the line's "See the data" click-through. */
.metric .def{position:relative;display:inline-block;border-bottom:1px dotted var(--border-strong);cursor:help;}
.metric .def:hover{border-bottom-color:var(--fg-muted);}
.metric .def .def-tip{position:absolute;left:0;top:calc(100% + 5px);z-index:60;width:270px;background:var(--paper);border:1px solid var(--border);border-radius:var(--r-card);box-shadow:0 6px 20px rgba(15,23,42,.16);padding:9px 11px;font-size:12px;line-height:1.5;font-weight:400;color:var(--fg);white-space:normal;visibility:hidden;opacity:0;transition:visibility 0s linear .25s,opacity .12s linear .13s;}
/* invisible bridge over the 5px gap so the pointer never leaves the hover
   area on its way down into the tooltip */
.metric .def .def-tip::before{content:"";position:absolute;left:0;right:0;top:-6px;height:6px;}
.metric .def .def-tip .tip-meth{display:block;margin-top:8px;padding-top:7px;border-top:1px solid var(--border);font-family:var(--font-mono);font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--fg-muted);text-decoration:none;}
.metric .def .def-tip .tip-meth:hover{color:var(--fg);}
/* open instantly; close on a ~250ms delay — the persistence that lets the
   cursor travel down and reach "See the data" */
.metric .def:hover .def-tip, .metric .def:focus-within .def-tip{visibility:visible;opacity:1;transition-delay:0s;}
/* the table clips cells (table.scb td wins on specificity) — the metric
   cell must stay visible or the tooltip is cut off at the cell edge */
table.scb td.metric{overflow:visible;}

/* burndown child row: signed direction delta (canon status colors —
   see foundations/status-colors.md; ▲▼ from the scorecard handoff's
   glyph vocabulary). ▼ = improvement on a lower-is-better line. */

/* context tier: informative lines — indented, faint, no progress claims */
table.scb tr.ctx td{color:var(--fg-faint);}
table.scb tr.ctx td.metric{padding-left:20px;font-weight:400;font-size:13px;}
table.scb tr.ctx .now{font-weight:500;font-size:13px;}