/* ============================================================
   skyPerformance: project extensions on top of app.css, which
   already carries the Radix-Design System bug fixes and the
   shared helpers. Every value below is a token.
   ============================================================ */

/* ---- header: hierarchy path next to the wordmark ---- */
.hier-switch { display: inline-flex; align-items: center; gap: var(--space-1); margin-left: var(--space-3); padding: 3px var(--space-2); border: 0; border-radius: var(--radius-2); background: var(--gray-3); color: var(--fg-low); font: inherit; font-size: var(--fs-1); font-weight: var(--weight-medium); white-space: nowrap; max-width: 330px; overflow: hidden; cursor: pointer; }
.hier-switch:hover { background: var(--gray-4); color: var(--fg-high); }
.hier-switch .hs-text { overflow: hidden; text-overflow: ellipsis; }
.hier-switch svg { flex: 0 0 auto; }
.brand-mark { display: inline-flex; }
.role-switch .rs-label { color: var(--fg-subtle); font-size: var(--fs-1); margin-right: var(--space-1); }
.role-switch .rs-value { font-weight: var(--weight-medium); color: var(--fg-high); }
.role-menu { min-width: 340px; }
.role-foot { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-3); margin-top: var(--space-1); border-top: var(--stroke-thin) solid var(--border-subtle); color: var(--fg-low); font-size: var(--fs-1); }
.role-foot svg { flex: 0 0 auto; margin-top: 1px; }
.np-empty { padding: var(--space-5); text-align: center; color: var(--fg-low); font-size: var(--fs-2); }
.pm-scope { padding: var(--space-3); display: flex; flex-direction: column; gap: 2px; }
.pm-scope-path { font-size: var(--fs-2); font-weight: var(--weight-medium); color: var(--fg-high); }
.pm-scope-note { font-size: var(--fs-1); color: var(--fg-low); line-height: 1.45; }

/* ---- sidebar footer ---- */
.nav-foot { margin-top: auto; padding-top: var(--space-3); border-top: var(--stroke-thin) solid var(--border-subtle); }
.nav-help { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 36px; padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--radius-3); background: none; color: var(--fg-low); font: inherit; font-size: var(--fs-2); font-weight: var(--weight-medium); cursor: pointer; text-align: left; }
.nav-help:hover { background: var(--gray-3); color: var(--fg-high); }
.nav-help .nav-icon { color: var(--fg-subtle); flex: 0 0 auto; }


/* ---- hierarchy tree dialog ---- */
.tree-wrap { margin-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.tree-region > summary { display: flex; align-items: center; gap: var(--space-2); }
.tree-region > summary .tr-meta { margin-left: auto; color: var(--fg-low); font-size: var(--fs-1); font-weight: var(--weight-regular); }
.tree-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-2); }
.tree-row + .tree-row { margin-top: var(--space-1); }
.tree-row.is-on { background: var(--accent-2); }
.tree-row > svg { color: var(--fg-subtle); flex: 0 0 auto; }
.tw-name { display: flex; flex-direction: column; font-size: var(--fs-2); color: var(--fg-high); flex: 1 1 auto; min-width: 0; }
.tw-sub { font-size: var(--fs-1); color: var(--fg-low); }

/* ---- about dialog ---- */
.epic-list { display: flex; flex-direction: column; gap: var(--space-1); margin-top: var(--space-4); }
.epic-row { display: flex; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-2); }
.epic-row:nth-child(odd) { background: var(--gray-2); }
.epic-id { flex: 0 0 34px; font-size: var(--fs-1); font-weight: var(--weight-bold); color: var(--accent-11); padding-top: 2px; }
.epic-name { font-size: var(--fs-2); font-weight: var(--weight-medium); color: var(--fg-high); }
.epic-where { font-size: var(--fs-1); color: var(--fg-low); line-height: 1.5; }
.about-note { margin-top: var(--space-4); }

/* ---- sparkline ---- */
.spark { width: 100%; height: 30px; color: var(--chart-1); display: block; margin-top: var(--space-3); }
.spark.is-bad { color: var(--danger-solid); }

/* ---- signal cards (E2) ---- */
.sig-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4); }
.sig-card { display: flex; flex-direction: column; gap: var(--space-1); text-align: left; font: inherit; color: inherit; cursor: pointer; }
.sig-card:hover { border-color: var(--border-strong); }
.sig-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); }
.sig-name { font-size: var(--fs-1); color: var(--fg-low); font-weight: var(--weight-medium); }
.sig-val { font-size: var(--fs-6); font-weight: var(--weight-bold); color: var(--fg-high); font-variant-numeric: tabular-nums; line-height: 1.2; }
.sig-target { font-size: var(--fs-1); color: var(--fg-low); }
.sig-id { font-family: var(--font-mono); font-size: var(--fs-1); color: var(--fg-subtle); margin-top: var(--space-1); }
.sig-delta { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--fs-1); font-weight: var(--weight-medium); }
.sig-delta.is-good { color: var(--success-text); }
.sig-delta.is-bad { color: var(--danger-text); }

/* ---- the chain card on the dashboard ---- */
.chain { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chain-step { display: flex; align-items: center; gap: var(--space-2); flex: 1 1 150px; min-width: 0; padding: var(--space-3); border-radius: var(--radius-3); background: var(--gray-2); box-shadow: inset 0 0 0 1px var(--border-subtle); text-align: left; font: inherit; color: inherit; cursor: pointer; }
.chain-step:hover { background: var(--accent-2); box-shadow: inset 0 0 0 1px var(--accent-7); }
.chain-ic { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-2); background: var(--accent-3); color: var(--accent-11); flex: 0 0 auto; }
.chain-text { display: flex; flex-direction: column; min-width: 0; }
.chain-t { font-size: var(--fs-2); font-weight: var(--weight-medium); color: var(--fg-high); }
.chain-s { font-size: var(--fs-1); color: var(--fg-low); overflow: hidden; text-overflow: ellipsis; }
.chain-arrow { display: flex; align-items: center; color: var(--fg-subtle); flex: 0 0 auto; }
@media (max-width: 900px) { .chain-arrow { display: none; } }

/* ---- work queue rows ---- */
.wq { display: flex; flex-direction: column; }
.wq-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-top: var(--stroke-thin) solid var(--border-subtle); text-align: left; }
.wq-row:first-child { border-top: 0; }
.wq-ic { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-2); background: var(--gray-3); color: var(--fg-low); flex: 0 0 auto; }
.wq-ic.is-late { background: var(--danger-bg); color: var(--danger-text); }
.wq-ic.is-good { background: var(--success-bg); color: var(--success-text); }
.wq-main { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wq-t { font-size: var(--fs-2); font-weight: var(--weight-medium); color: var(--fg-high); }
.wq-s { font-size: var(--fs-1); color: var(--fg-low); }
.wq-right { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); flex: 0 1 auto; flex-wrap: wrap; }
@media (max-width: 720px) { .wq-row { flex-wrap: wrap; } .wq-right { width: 100%; padding-left: 44px; } }

/* ---- form runner (E4) ---- */
.runner { display: grid; grid-template-columns: 236px 1fr; gap: var(--space-5); align-items: start; }
@media (max-width: 1080px) { .runner { grid-template-columns: 1fr; } }
.runner-rail { position: sticky; top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-1); }
.rr-step { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-3); border: 0; background: none; font: inherit; text-align: left; cursor: pointer; color: var(--fg-low); }
.rr-step:hover { background: var(--gray-3); }
.rr-step.is-active { background: var(--accent-9); color: var(--accent-contrast); }
.rr-step.is-active .rr-sub, .rr-step.is-active .rr-num { color: var(--accent-contrast); opacity: .85; }
.rr-num { flex: 0 0 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-full); background: var(--gray-4); color: var(--fg-low); font-size: var(--fs-1); font-weight: var(--weight-bold); }
.rr-step.is-done .rr-num { background: var(--success-solid); color: #fff; }
.rr-step.is-active .rr-num { background: var(--accent-contrast); color: var(--accent-9); opacity: 1; }
.rr-text { display: flex; flex-direction: column; min-width: 0; }
.rr-t { font-size: var(--fs-2); font-weight: var(--weight-medium); }
.rr-sub { font-size: var(--fs-1); color: var(--fg-subtle); }
.runner-head { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-3) var(--space-4); border-radius: var(--radius-3); background: var(--gray-2); box-shadow: inset 0 0 0 1px var(--border-subtle); margin-bottom: var(--space-4); }
.rh-timer { display: inline-flex; align-items: center; gap: var(--space-1); font-variant-numeric: tabular-nums; font-size: var(--fs-2); font-weight: var(--weight-medium); color: var(--fg-high); }
.rh-geo { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--fs-1); color: var(--fg-low); }
.rh-spacer { flex: 1 1 auto; }
.runner-foot { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-4); padding-top: var(--space-4); border-top: var(--stroke-thin) solid var(--border-subtle); }
.rf-spacer { flex: 1 1 auto; }
.rf-note { font-size: var(--fs-1); color: var(--fg-low); }

/* ---- scored question rows ---- */
.q-section { margin-bottom: var(--space-5); }
.q-section:last-child { margin-bottom: 0; }
.q-sec-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-2); }
.q-sec-name { font-size: var(--fs-1); font-weight: var(--weight-medium); letter-spacing: .04em; text-transform: uppercase; color: var(--fg-low); }
.q-row { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) 0; border-top: var(--stroke-thin) solid var(--border-subtle); }
.q-text { flex: 1 1 auto; font-size: var(--fs-2); color: var(--fg-high); line-height: 1.5; }
.q-score { display: flex; gap: var(--space-1); flex: 0 0 auto; }
.q-btn { min-width: 52px; height: 32px; padding: 0 var(--space-2); border: 0; border-radius: var(--radius-2); background: var(--gray-3); color: var(--fg-low); font: inherit; font-size: var(--fs-1); font-weight: var(--weight-medium); cursor: pointer; transition: background-color .12s ease-out; }
.q-btn:hover { background: var(--gray-4); }
/* Selected score states are tinted with a solid ring rather than a solid fill:
   white on green-9 is 3.16:1 and white on gray-9 is 3.32:1, both under AA at 12px. */
.q-btn.is-yes.is-on { background: var(--green-4); color: var(--green-12); box-shadow: inset 0 0 0 1px var(--green-8); font-weight: var(--weight-bold); }
.q-btn.is-no.is-on { background: var(--red-4); color: var(--red-12); box-shadow: inset 0 0 0 1px var(--red-8); font-weight: var(--weight-bold); }
.q-btn.is-na.is-on { background: var(--gray-5); color: var(--gray-12); box-shadow: inset 0 0 0 1px var(--gray-8); font-weight: var(--weight-bold); }
@media (max-width: 720px) { .q-row { flex-direction: column; align-items: stretch; gap: var(--space-2); } .q-score { justify-content: flex-start; } }

/* ---- snapshot rows inside a form ---- */
.snap { display: flex; flex-direction: column; }
.snap-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-top: var(--stroke-thin) solid var(--border-subtle); }
.snap-row:first-child { border-top: 0; }
.snap-name { flex: 1 1 auto; font-size: var(--fs-2); color: var(--fg-high); }
.snap-id { display: block; font-family: var(--font-mono); font-size: var(--fs-1); color: var(--fg-subtle); }
.snap-val { font-size: var(--fs-3); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; color: var(--fg-high); flex: 0 0 auto; }
.snap-tgt { font-size: var(--fs-1); color: var(--fg-low); flex: 0 0 96px; text-align: right; }

/* ---- case wizard (E7) ---- */
.wiz-steps { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-5); }
.wiz-step { display: flex; align-items: center; gap: var(--space-2); flex: 1 1 160px; padding: var(--space-3); border-radius: var(--radius-3); background: var(--gray-2); box-shadow: inset 0 0 0 1px var(--border-subtle); border: 0; font: inherit; text-align: left; cursor: pointer; color: var(--fg-low); }
.wiz-step.is-active { background: var(--accent-3); box-shadow: inset 0 0 0 1px var(--accent-8); color: var(--accent-11); }
.wiz-step.is-done { color: var(--success-text); }
.wiz-num { flex: 0 0 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-full); background: var(--gray-4); color: var(--fg-low); font-size: var(--fs-1); font-weight: var(--weight-bold); }
.wiz-step.is-active .wiz-num { background: var(--accent-9); color: var(--accent-contrast); }
.wiz-step.is-done .wiz-num { background: var(--success-solid); color: #fff; }
.wiz-t { font-size: var(--fs-2); font-weight: var(--weight-medium); }

/* ---- approval chain + audit trail ---- */
.chain-list { display: flex; flex-direction: column; }
.ch-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-top: var(--stroke-thin) solid var(--border-subtle); }
.ch-row:first-child { border-top: 0; }
.ch-state { flex: 0 0 auto; }
.ch-main { flex: 1 1 auto; min-width: 0; }
.ch-who { font-size: var(--fs-2); font-weight: var(--weight-medium); color: var(--fg-high); display: block; }
.ch-role { font-size: var(--fs-1); color: var(--fg-low); display: block; }
.ch-when { font-size: var(--fs-1); color: var(--fg-subtle); flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.audit { display: flex; flex-direction: column; gap: 0; }
.audit-row { display: grid; grid-template-columns: 150px 1fr; gap: var(--space-3); padding: var(--space-2) 0; border-top: var(--stroke-thin) solid var(--border-subtle); font-size: var(--fs-2); }
.audit-row:first-child { border-top: 0; }
.audit-when { color: var(--fg-subtle); font-size: var(--fs-1); font-variant-numeric: tabular-nums; padding-top: 2px; }
.audit-what { color: var(--fg-high); }
.audit-who { color: var(--fg-low); font-size: var(--fs-1); display: block; }
@media (max-width: 720px) { .audit-row { grid-template-columns: 1fr; gap: 2px; } }

/* ---- rendered form / letter, styled as a printable page ---- */
.paper { background: var(--color-surface); border-radius: var(--radius-3); box-shadow: inset 0 0 0 1px var(--border-subtle); padding: var(--space-6); max-width: 760px; }
.paper-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); padding-bottom: var(--space-4); border-bottom: var(--stroke-thin) solid var(--border-strong); margin-bottom: var(--space-5); }
.paper-title { font-size: var(--fs-5); font-weight: var(--weight-bold); color: var(--fg-high); }
.paper-sub { font-size: var(--fs-1); color: var(--fg-low); margin-top: 2px; }
.paper-id { font-family: var(--font-mono); font-size: var(--fs-1); color: var(--fg-low); text-align: right; }
.paper h3 { font-size: var(--fs-1); font-weight: var(--weight-medium); letter-spacing: .04em; text-transform: uppercase; color: var(--fg-low); margin: var(--space-5) 0 var(--space-2); }
.paper p { font-size: var(--fs-2); color: var(--fg-high); line-height: 1.6; margin: 0 0 var(--space-3); }
.paper-sign { margin-top: var(--space-6); padding-top: var(--space-4); border-top: var(--stroke-thin) solid var(--border-subtle); display: flex; gap: var(--space-6); flex-wrap: wrap; }
.sign-block { flex: 1 1 200px; }
.sign-line { height: 32px; border-bottom: var(--stroke-thin) solid var(--border-strong); margin-bottom: var(--space-1); }
.sign-label { font-size: var(--fs-1); color: var(--fg-low); }
.qa-list { display: flex; flex-direction: column; }
.qa-row { display: flex; gap: var(--space-3); padding: var(--space-2) 0; border-top: var(--stroke-thin) solid var(--border-subtle); font-size: var(--fs-2); }
.qa-row:first-child { border-top: 0; }
.qa-q { flex: 1 1 auto; color: var(--fg-high); }
.qa-a { flex: 0 0 auto; }

/* ---- site visit sections (E5) ---- */
.visit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-4); }
.vs-card { display: flex; flex-direction: column; gap: var(--space-3); text-align: left; font: inherit; color: inherit; cursor: pointer; }
.vs-card:hover { border-color: var(--border-strong); }
.vs-head { display: flex; align-items: center; gap: var(--space-3); }
.vs-ic { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-2); background: var(--accent-3); color: var(--accent-11); flex: 0 0 auto; }
.vs-name { flex: 1 1 auto; font-size: var(--fs-3); font-weight: var(--weight-medium); color: var(--fg-high); }
.vs-items { display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--fs-1); color: var(--fg-low); }
.vs-item { display: flex; gap: var(--space-2); }
.vs-item svg { flex: 0 0 auto; color: var(--fg-subtle); margin-top: 2px; }
.photo-row { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-2); }
.photo-tile { width: 72px; height: 56px; border-radius: var(--radius-2); background: var(--gray-3); display: inline-flex; align-items: center; justify-content: center; color: var(--fg-subtle); box-shadow: inset 0 0 0 1px var(--border-subtle); }
.photo-add { border: 0; cursor: pointer; font: inherit; }
.photo-add:hover { background: var(--accent-3); color: var(--accent-11); }

/* ---- people / org tree ---- */
.org-grid { display: grid; grid-template-columns: 300px 1fr; gap: var(--space-5); align-items: start; }
@media (max-width: 1000px) { .org-grid { grid-template-columns: 1fr; } }
.org-tree { display: flex; flex-direction: column; gap: var(--space-1); }
.ot-row { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-2); border: 0; background: none; font: inherit; text-align: left; cursor: pointer; color: var(--fg-low); font-size: var(--fs-2); width: 100%; }
.ot-row:hover { background: var(--gray-3); color: var(--fg-high); }
.ot-row.is-on { background: var(--accent-3); color: var(--accent-11); font-weight: var(--weight-medium); }
.ot-row.is-l2 { padding-left: var(--space-5); }
.ot-row.is-l3 { padding-left: var(--space-7); }
.ot-count { margin-left: auto; font-size: var(--fs-1); color: var(--fg-subtle); }

/* ---- profile header ---- */
.profile-head { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.ph-id { flex: 1 1 auto; min-width: 0; }
.ph-name { font-size: var(--fs-6); font-weight: var(--weight-bold); color: var(--fg-high); }
.ph-meta { font-size: var(--fs-2); color: var(--fg-low); }
.ph-path { font-family: var(--font-mono); font-size: var(--fs-1); color: var(--fg-subtle); margin-top: var(--space-1); }
.ph-stats { display: flex; gap: var(--space-5); flex-wrap: wrap; }
.ph-stat { display: flex; flex-direction: column; }
.ph-stat-v { font-size: var(--fs-5); font-weight: var(--weight-bold); color: var(--fg-high); font-variant-numeric: tabular-nums; }
.ph-stat-l { font-size: var(--fs-1); color: var(--fg-low); }

/* ---- ladder (track / subtrack / step) ---- */
.ladder { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.ladder-step { flex: 1 1 140px; padding: var(--space-3); border-radius: var(--radius-3); background: var(--gray-2); box-shadow: inset 0 0 0 1px var(--border-subtle); }
.ladder-step.is-at { background: var(--warning-bg); box-shadow: inset 0 0 0 1px var(--orange-7); }
.ladder-step.is-past { background: var(--gray-3); }
.ls-name { font-size: var(--fs-2); font-weight: var(--weight-medium); color: var(--fg-high); }
.ls-sub { font-size: var(--fs-1); color: var(--fg-low); }

/* ---- verbatim cards ---- */
.verb { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); border-radius: var(--radius-3); background: var(--gray-2); box-shadow: inset 0 0 0 1px var(--border-subtle); }
.verb-q { font-size: var(--fs-2); color: var(--fg-high); line-height: 1.6; }
.verb-meta { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; font-size: var(--fs-1); color: var(--fg-low); }

/* ---- misc ---- */
.kv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4); }
.stack-3 { display: flex; flex-direction: column; gap: var(--space-3); }
.stack-5 { display: flex; flex-direction: column; gap: var(--space-5); }
.split-rail { display: grid; grid-template-columns: 1fr 320px; gap: var(--space-5); align-items: start; }
@media (max-width: 1080px) { .split-rail { grid-template-columns: 1fr; } }
.mini-note { font-size: var(--fs-1); color: var(--fg-low); line-height: 1.5; }
.cell-id { font-family: var(--font-mono); font-size: var(--fs-1); color: var(--fg-low); }
.rowlink { background: none; border: 0; padding: 0; font: inherit; color: var(--accent-11); font-weight: var(--weight-medium); cursor: pointer; text-align: left; }
.rowlink:hover { text-decoration: underline; }
.tag-row { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.count-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-full); background: var(--gray-4); color: var(--fg-low); font-size: var(--fs-1); font-weight: var(--weight-bold); }

/* ---- filter bar used as a standalone toolbar ---- */
.filter-bar { padding: 0; margin-bottom: var(--space-4); }
.fb-spacer { flex: 1 1 auto; }

/* ---- summary strip as a set of filter buttons ---- */
.summary-strip { margin-bottom: var(--space-4); }
.ss-item { display: flex; flex-direction: column; gap: 2px; padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--radius-3); background: none; font: inherit; text-align: left; cursor: pointer; color: inherit; }
.ss-item:hover { background: var(--gray-3); }
.ss-item.is-on { background: var(--accent-3); box-shadow: inset 0 0 0 1px var(--accent-8); }
.ss-item.is-on .ss-label { color: var(--accent-11); }
.ss-num { font-size: var(--fs-5); font-weight: var(--weight-bold); color: var(--fg-high); font-variant-numeric: tabular-nums; line-height: 1.1; }
.co-list { margin: var(--space-2) 0 0; padding-left: var(--space-5); display: flex; flex-direction: column; gap: 2px; }
.co-list li { font-size: var(--fs-2); }

/* ---- brand wordmark ----
   The logo sets skyPerformance in a serif. The DS type ramp stays Inter for
   everything else; this is the one artwork exception, and it loads no new font. */
.brand-link > span:last-child { font-family: Georgia, "Times New Roman", "Source Serif 4", serif; font-size: var(--fs-4); font-weight: var(--weight-medium); letter-spacing: -0.01em; }
.brand-link .brand-tm { font-size: 9px; vertical-align: super; letter-spacing: 0; color: var(--fg-subtle); }

/* Keep dates and short status cells on one line in wide tables. */
.table td[data-label="Due"], .table td[data-label="Date"] { white-space: nowrap; }
.data-list dd { margin: 0; min-width: 0; }
.data-list .dl-label { white-space: nowrap; }
@media (max-width: 640px) { .data-list { grid-template-columns: 1fr; gap: var(--space-1); } .data-list .dl-value { margin-bottom: var(--space-2); } }
.ch-row { flex-wrap: wrap; }
.ch-when { margin-left: auto; }
.ch-main { flex: 1 1 140px; }

/* The hierarchy path is long and monospaced, so it gets its own full width row
   rather than the narrow value column of a data list. */
.path-block { display: flex; flex-direction: column; gap: 2px; margin-top: var(--space-4); padding-top: var(--space-3); border-top: var(--stroke-thin) solid var(--border-subtle); }
.path-label { font-size: var(--fs-2); color: var(--fg-low); }
.path-block .cell-id { word-break: break-word; }

/* Below 1200px the header path competes with the search field, and the scope
   strip under every page header already carries it. */
@media (max-width: 1199px) { .hier-switch { display: none; } }

/* ============================================================
   Org chart. A real chart: centred nodes, connector lines drawn
   with pseudo elements, expand and collapse per node.
   ============================================================ */
/* Connector lines carry meaning in an org chart, so they are held to the 3:1
   non-text contrast floor. gray-7 measures 1.57:1 on the panel and disappears. */
:root, :root[data-theme="light"] { --oc-line: var(--gray-9); }
:root[data-theme="dark"] { --oc-line: var(--gray-9); }
.org-layout { display: grid; grid-template-columns: 1fr 320px; gap: var(--space-5); align-items: start; }
@media (max-width: 1280px) { .org-layout { grid-template-columns: 1fr; } }
.oc-wrap { padding: 0; overflow: hidden; }
.oc-scroll { overflow: auto; padding: var(--space-6) var(--space-5); max-height: 620px; }
.oc-tree, .oc-children { display: flex; list-style: none; margin: 0; padding: 0; justify-content: center; }
.oc-tree { padding-top: 0; }
.oc-li { position: relative; padding: var(--space-5) var(--space-2) 0; display: flex; flex-direction: column; align-items: center; }
.oc-tree > .oc-li { padding-top: 0; }
/* the two half lines that join siblings, and the drop into each child */
.oc-li::before, .oc-li::after { content: ""; position: absolute; top: 0; width: 50%; height: var(--space-5); border-top: var(--stroke-thin) solid var(--oc-line); }
.oc-li::before { right: 50%; }
.oc-li::after { left: 50%; }
.oc-li:only-child::before, .oc-li:only-child::after { display: none; }
.oc-li:first-child::before, .oc-li:last-child::after { border-top: 0; }
.oc-li:first-child::after { border-radius: 6px 0 0 0; }
.oc-li:last-child::before { border-radius: 0 6px 0 0; }
.oc-li > .oc-node::before { content: ""; position: absolute; top: calc(var(--space-5) * -1); left: 50%; width: 0; height: var(--space-5); border-left: var(--stroke-thin) solid var(--oc-line); }
.oc-tree > .oc-li > .oc-node::before { display: none; }
/* the stem that drops from a node to its children */
.oc-children { position: relative; padding-top: var(--space-5); }
.oc-children::before { content: ""; position: absolute; top: 0; left: 50%; width: 0; height: var(--space-5); border-left: var(--stroke-thin) solid var(--oc-line); }

.oc-node { position: relative; display: flex; flex-direction: column; align-items: stretch; }
.oc-card { display: flex; align-items: center; gap: var(--space-3); width: 228px; padding: var(--space-3); border: 0; border-radius: var(--radius-4); background: var(--color-panel-solid); box-shadow: inset 0 0 0 1px var(--border-subtle); font: inherit; text-align: left; cursor: pointer; transition: box-shadow .12s ease-out, background-color .12s ease-out; }
.oc-card:hover { box-shadow: inset 0 0 0 1px var(--border-strong); background: var(--gray-2); }
.oc-node.is-sel .oc-card { box-shadow: inset 0 0 0 2px var(--accent-9); background: var(--accent-2); }
.oc-node.is-me .oc-card { box-shadow: inset 0 0 0 1px var(--accent-8); }
.oc-node.is-me.is-sel .oc-card { box-shadow: inset 0 0 0 2px var(--accent-9); }
.oc-node.is-out .oc-card { opacity: .62; }
.oc-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.oc-name { font-size: var(--fs-2); font-weight: var(--weight-medium); color: var(--fg-high); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oc-you { font-size: var(--fs-1); font-weight: var(--weight-regular); color: var(--accent-11); }
.oc-title { font-size: var(--fs-1); color: var(--fg-low); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oc-where { font-size: var(--fs-1); color: var(--fg-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oc-flag { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--radius-full); font-size: var(--fs-1); font-weight: var(--weight-bold); flex: 0 0 auto; }
.oc-flag.is-danger { background: var(--red-4); color: var(--red-12); }
.oc-flag.is-warn { background: var(--orange-4); color: var(--orange-12); }
.oc-toggle { position: absolute; left: 50%; bottom: -13px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 2px; height: 22px; padding: 0 var(--space-2); border: 0; border-radius: var(--radius-full); background: var(--gray-3); box-shadow: inset 0 0 0 1px var(--border-ui); color: var(--fg-low); font: inherit; font-size: var(--fs-1); font-weight: var(--weight-medium); cursor: pointer; z-index: 1; }
.oc-toggle:hover { background: var(--accent-3); color: var(--accent-11); box-shadow: inset 0 0 0 1px var(--accent-8); }
.oc-rail-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.oc-line { display: flex; flex-direction: column; gap: 2px; }
.oc-line-row { display: flex; align-items: center; gap: var(--space-2); border: 0; background: none; font: inherit; text-align: left; cursor: pointer; padding: var(--space-1) var(--space-2); border-radius: var(--radius-2); color: inherit; }
.oc-line-row:hover { background: var(--gray-3); }
.oc-line-row.is-on { background: var(--accent-3); }
.oc-line-tick { color: var(--fg-subtle); display: inline-flex; flex: 0 0 auto; }
.oc-line-name { display: flex; flex-direction: column; font-size: var(--fs-2); color: var(--fg-high); min-width: 0; }
.oc-line-title { font-size: var(--fs-1); color: var(--fg-low); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- start a form dialog ---- */
.sf-block { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.sf-radios { display: flex; flex-direction: column; gap: var(--space-2); }
.sf-radio { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3); border: 0; border-radius: var(--radius-3); background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--border-ui); font: inherit; text-align: left; cursor: pointer; }
.sf-radio:hover { background: var(--gray-2); }
.sf-radio.is-on { background: var(--accent-2); box-shadow: inset 0 0 0 1px var(--accent-8); }
.sf-dot { width: 18px; height: 18px; border-radius: var(--radius-full); box-shadow: inset 0 0 0 1px var(--border-ui); flex: 0 0 auto; margin-top: 1px; background: var(--color-surface); }
.sf-radio.is-on .sf-dot { background: var(--accent-9); box-shadow: inset 0 0 0 1px var(--accent-9), inset 0 0 0 4px var(--color-surface); }
.sf-rt { display: flex; flex-direction: column; }
.sf-rn { font-size: var(--fs-2); font-weight: var(--weight-medium); color: var(--fg-high); }
.sf-rs { font-size: var(--fs-1); color: var(--fg-low); }

/* ---- runner rail timer, matching the reference ---- */
.rr-timer { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-3); background: var(--accent-3); color: var(--accent-11); font-size: var(--fs-1); font-weight: var(--weight-medium); margin-bottom: var(--space-3); }
.rr-timer span:last-child { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--fg-high); }
.rr-label { font-size: var(--fs-1); font-weight: var(--weight-medium); letter-spacing: .04em; text-transform: uppercase; color: var(--fg-low); padding: 0 var(--space-3) var(--space-1); }
.q-collapse > summary { gap: var(--space-2); }
.q-collapse .q-row:first-of-type { border-top: 0; }

/* ---- case groups, matching the reference's Pending / Open / Closed ---- */
.case-group { margin-bottom: var(--space-4); }
.cg-head { padding: var(--space-3) var(--space-4); font-size: var(--fs-1); font-weight: var(--weight-medium); letter-spacing: .04em; text-transform: uppercase; color: var(--fg-low); background: var(--gray-2); border-bottom: var(--stroke-thin) solid var(--border-subtle); }
.dropdown.is-sm { height: 26px; font-size: var(--fs-1); padding: 0 var(--space-2); }

/* ---- wizard step chips ---- */
.wiz-text { display: flex; flex-direction: column; min-width: 0; }
.wiz-s { font-size: var(--fs-1); color: var(--fg-low); }
.wiz-step.is-active .wiz-s { color: var(--accent-11); }

/* The DS .panel-head is a flex row, but its title column has no flex basis, so a
   long title collapses to a sliver whenever the right slot holds a button. */
.panel-head > div:first-child { flex: 1 1 auto; min-width: 0; }
.panel-head .ph-right { flex: 0 0 auto; }
@media (max-width: 720px) { .panel-head { flex-wrap: wrap; } .panel-head .ph-right { width: 100%; } }
.oc-scroll > .oc-tree { min-width: max-content; margin: 0 auto; }

/* Inside a table cell an icon plus a long label must shrink the label, not wrap
   the whole label onto its own line under the icon. */
.table .row-gap { flex-wrap: nowrap; align-items: flex-start; }
.table .row-gap > svg { margin-top: 2px; }
.table .row-gap > span { min-width: 0; }
/* gray-2 alone is too close to the card behind it, so the strip gets a ring. */
.summary-strip { box-shadow: inset 0 0 0 1px var(--border-subtle); }

/* ============================================================
   Skimmability. A screen should answer "how much" and "what is
   wrong" before anyone reads a sentence.
   ============================================================ */
.page-hint { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0 0 var(--space-4); font-size: var(--fs-1); color: var(--fg-low); line-height: 1.5; }
.page-hint svg { flex: 0 0 auto; margin-top: 2px; color: var(--fg-subtle); }
.page-hint b { color: var(--fg-high); font-weight: var(--weight-medium); }

.collapse.is-quiet { border: 0; background: none; padding: 0; margin: var(--space-4) 0 0; }
.collapse.is-quiet > summary { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) 0; font-size: var(--fs-1); font-weight: var(--weight-medium); color: var(--fg-low); cursor: pointer; }
.collapse.is-quiet > summary:hover { color: var(--fg-high); }
.collapse.is-quiet .why-body { padding: var(--space-2) 0 0 var(--space-5); font-size: var(--fs-1); color: var(--fg-low); line-height: 1.6; max-width: 70ch; }
.collapse.is-quiet .why-body p { margin: 0 0 var(--space-2); }

.glance { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-4); }
.glance-item { display: flex; flex-direction: column; gap: 0; flex: 1 1 116px; min-width: 100px; padding: var(--space-3); border: 0; border-radius: var(--radius-3); background: var(--gray-2); box-shadow: inset 0 0 0 1px var(--border-subtle); font: inherit; text-align: left; color: inherit; }
button.glance-item { cursor: pointer; }
button.glance-item:hover { background: var(--gray-3); }
.glance-num { font-size: var(--fs-6); font-weight: var(--weight-bold); color: var(--fg-high); font-variant-numeric: tabular-nums; line-height: 1.15; }
.glance-label { font-size: var(--fs-1); color: var(--fg-low); }
.glance-item.is-bad { background: var(--danger-bg); box-shadow: inset 0 0 0 1px var(--red-6); }
.glance-item.is-bad .glance-num, .glance-item.is-bad .glance-label { color: var(--danger-text); }
.glance-item.is-warn { background: var(--warning-bg); box-shadow: inset 0 0 0 1px var(--orange-6); }
.glance-item.is-warn .glance-num, .glance-item.is-warn .glance-label { color: var(--warning-text); }
.glance-item.is-good { background: var(--success-bg); box-shadow: inset 0 0 0 1px var(--green-6); }
.glance-item.is-good .glance-num, .glance-item.is-good .glance-label { color: var(--success-text); }

.sec-label { display: flex; align-items: center; gap: var(--space-3); font-size: var(--fs-1); font-weight: var(--weight-medium); letter-spacing: .04em; text-transform: uppercase; color: var(--fg-low); margin: var(--space-5) 0 var(--space-3); }
.sec-label::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--border-subtle); }
.sec-label .sec-right { flex: 0 0 auto; text-transform: none; letter-spacing: 0; font-weight: var(--weight-regular); }
.page-main > .sec-label:first-child { margin-top: 0; }

/* ---- goal and objective rows ---- */
.goal { display: flex; gap: var(--space-3); padding: var(--space-4) 0; border-top: var(--stroke-thin) solid var(--border-subtle); }
.goal:first-of-type { border-top: 0; padding-top: 0; }
.goal-ic { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-2); background: var(--accent-3); color: var(--accent-11); flex: 0 0 auto; }
.goal-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.goal-top { display: flex; align-items: flex-start; gap: var(--space-3); flex-wrap: wrap; }
.goal-t { font-size: var(--fs-3); font-weight: var(--weight-medium); color: var(--fg-high); flex: 1 1 220px; }
.goal-meta { display: flex; gap: var(--space-3); flex-wrap: wrap; font-size: var(--fs-1); color: var(--fg-low); }
.goal-how { font-size: var(--fs-2); color: var(--fg-low); line-height: 1.55; }
.goal-bar { display: flex; align-items: center; gap: var(--space-3); }
.goal-bar .progress { flex: 1 1 auto; }
.goal-pct { font-size: var(--fs-1); font-weight: var(--weight-medium); color: var(--fg-high); font-variant-numeric: tabular-nums; flex: 0 0 34px; text-align: right; }

/* ---- competency ladder ---- */
.skill-row { display: grid; grid-template-columns: minmax(150px, 1.4fr) 1fr 108px; gap: var(--space-4); align-items: center; padding: var(--space-3) 0; border-top: var(--stroke-thin) solid var(--border-subtle); }
.skill-row:first-of-type { border-top: 0; }
.skill-name { font-size: var(--fs-2); color: var(--fg-high); }
.skill-area { display: block; font-size: var(--fs-1); color: var(--fg-subtle); }
.skill-steps { display: flex; gap: 4px; }
.skill-step { flex: 1 1 0; height: 22px; border-radius: var(--radius-2); background: var(--gray-3); display: flex; align-items: center; justify-content: center; font-size: var(--fs-1); color: var(--fg-subtle); }
.skill-step.is-have { background: var(--accent-9); color: var(--accent-contrast); font-weight: var(--weight-bold); }
.skill-step.is-gap { background: var(--gray-4); box-shadow: inset 0 0 0 1px var(--border-ui); color: var(--fg-low); }
.skill-note { font-size: var(--fs-1); color: var(--fg-low); text-align: right; }
@media (max-width: 720px) { .skill-row { grid-template-columns: 1fr; gap: var(--space-2); } .skill-note { text-align: left; } }

/* ---- checkpoint timeline ---- */
.timeline { display: flex; flex-direction: column; }
.tl-row { display: grid; grid-template-columns: 26px 1fr; gap: var(--space-3); position: relative; padding-bottom: var(--space-4); }
.tl-row:last-child { padding-bottom: 0; }
.tl-row::before { content: ""; position: absolute; left: 12px; top: 24px; bottom: 0; width: 1px; background: var(--border-ui); }
.tl-row:last-child::before { display: none; }
.tl-dot { width: 26px; height: 26px; border-radius: var(--radius-full); display: inline-flex; align-items: center; justify-content: center; background: var(--gray-3); color: var(--fg-subtle); box-shadow: inset 0 0 0 1px var(--border-ui); z-index: 1; }
.tl-row.is-done .tl-dot { background: var(--success-solid); color: #fff; box-shadow: none; }
.tl-row.is-next .tl-dot { background: var(--accent-9); color: var(--accent-contrast); box-shadow: none; }
.tl-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tl-top { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.tl-when { font-size: var(--fs-2); font-weight: var(--weight-medium); color: var(--fg-high); }
.tl-note { font-size: var(--fs-2); color: var(--fg-low); line-height: 1.55; }

/* ---- feedback cards ---- */
.fb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--space-4); }
.fb-card { display: flex; flex-direction: column; gap: var(--space-3); }
.fb-top { display: flex; align-items: center; gap: var(--space-2); }
.fb-text { font-size: var(--fs-3); color: var(--fg-high); line-height: 1.55; }
.fb-meta { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; font-size: var(--fs-1); color: var(--fg-low); margin-top: auto; }
.lvl-chip { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: var(--radius-2); background: var(--gray-4); color: var(--fg-high); font-size: var(--fs-1); font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; }
.lvl-chip.is-gap { background: var(--orange-4); color: var(--orange-12); }
.tick-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.tick-list li { display: flex; gap: var(--space-2); font-size: var(--fs-2); color: var(--fg-high); line-height: 1.5; }
.tick-list li svg { flex: 0 0 auto; margin-top: 3px; color: var(--success-solid); }
.why-tip { display: inline-flex; vertical-align: -2px; color: var(--fg-subtle); cursor: help; }
.glance-item.is-picked { box-shadow: inset 0 0 0 2px var(--accent-9); }

/* The DS draws the ring on the summary itself with a (0,1,2) selector, so the
   quiet variant has to match that specificity to remove it. */
details.collapse.is-quiet > summary { box-shadow: none; min-height: 0; padding: var(--space-1) 0; font-size: var(--fs-1); color: var(--fg-low); }
details.collapse.is-quiet > summary:hover { color: var(--fg-high); }
/* In a 320px rail the three column ladder overflows, so it stacks. */
.skill-compact .skill-row { grid-template-columns: 1fr auto; grid-template-areas: "name note" "steps steps"; gap: var(--space-2) var(--space-3); }
.skill-compact .skill-name { grid-area: name; }
.skill-compact .skill-steps { grid-area: steps; }
.skill-compact .skill-note { grid-area: note; white-space: nowrap; }
.skill-compact .skill-note br, .skill-compact .skill-note br + * { display: none; }

/* ---- coaching type picker ---- */
.type-grid { display: flex; flex-direction: column; gap: var(--space-2); }
.type-card { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border: 0; border-radius: var(--radius-3); background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--border-ui); font: inherit; text-align: left; cursor: pointer; color: inherit; }
.type-card:hover { background: var(--accent-2); box-shadow: inset 0 0 0 1px var(--accent-8); }
.type-ic { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--radius-3); background: var(--gray-3); color: var(--fg-low); flex: 0 0 auto; }
.type-ic.is-good { background: var(--green-4); color: var(--green-12); }
.type-text { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.type-name { font-size: var(--fs-3); font-weight: var(--weight-medium); color: var(--fg-high); }
.type-desc { font-size: var(--fs-1); color: var(--fg-low); }
.type-card > svg:last-child { color: var(--fg-subtle); flex: 0 0 auto; }

/* ---- multi select list ---- */
.pick-list { display: flex; flex-direction: column; gap: 2px; max-height: 240px; overflow: auto; padding: var(--space-1); border-radius: var(--radius-3); box-shadow: inset 0 0 0 1px var(--border-ui); }
.pick-row { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2); border: 0; border-radius: var(--radius-2); background: none; font: inherit; text-align: left; cursor: pointer; color: inherit; }
.pick-row:hover { background: var(--gray-3); }
.pick-row.is-on { background: var(--accent-3); }
.pick-box { width: 18px; height: 18px; border-radius: var(--radius-2); box-shadow: inset 0 0 0 1px var(--border-ui); display: inline-flex; align-items: center; justify-content: center; background: var(--color-surface); flex: 0 0 auto; }
.pick-row.is-on .pick-box { background: var(--accent-9); color: var(--accent-contrast); box-shadow: none; }
.pick-text { display: flex; flex-direction: column; min-width: 0; }
.pick-name { font-size: var(--fs-2); color: var(--fg-high); }
.pick-sub { font-size: var(--fs-1); color: var(--fg-low); }
.textarea.is-tall { min-height: 120px; }
.tick { width: 22px; height: 22px; border-radius: var(--radius-2); border: 0; background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--border-ui); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--accent-contrast); }
.tick.is-on { background: var(--success-solid); box-shadow: none; color: #fff; }
.sign-list { display: flex; flex-direction: column; }
.sign-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) 0; border-top: var(--stroke-thin) solid var(--border-subtle); }
.sign-row:first-child { border-top: 0; }
.sign-role { font-size: var(--fs-2); color: var(--fg-high); font-weight: var(--weight-medium); }
.sign-mark { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--fg-low); }
/* ---- evaluation scoring ---- */
.q-btn.ev-btn { min-width: 34px; }
.q-btn.is-on.lvl1 { background: var(--red-4); color: var(--red-12); box-shadow: inset 0 0 0 1px var(--red-8); }
.q-btn.is-on.lvl2 { background: var(--orange-4); color: var(--orange-12); box-shadow: inset 0 0 0 1px var(--orange-8); }
.q-btn.is-on.lvl3 { background: var(--green-4); color: var(--green-12); box-shadow: inset 0 0 0 1px var(--green-8); }
.q-btn.is-on.lvl4 { background: var(--accent-4); color: var(--accent-12); box-shadow: inset 0 0 0 1px var(--accent-8); }
.q-btn[disabled] { opacity: .75; cursor: default; }
.scale-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); }
.scale-item { display: flex; align-items: flex-start; gap: var(--space-2); }
.scale-n { width: 26px; height: 26px; border-radius: var(--radius-2); display: inline-flex; align-items: center; justify-content: center; font-weight: var(--weight-bold); font-size: var(--fs-2); flex: 0 0 auto; background: var(--gray-4); color: var(--fg-high); }
.scale-n.lvl1 { background: var(--red-4); color: var(--red-12); }
.scale-n.lvl2 { background: var(--orange-4); color: var(--orange-12); }
.scale-n.lvl3 { background: var(--green-4); color: var(--green-12); }
.scale-n.lvl4 { background: var(--accent-4); color: var(--accent-12); }
.scale-t { display: flex; flex-direction: column; font-size: var(--fs-1); color: var(--fg-low); line-height: 1.4; }
.scale-t b { color: var(--fg-high); font-weight: var(--weight-medium); font-size: var(--fs-2); }
.q-btn.vs-btn { min-width: 32px; }
.q-btn.is-on.v2 { background: var(--green-4); color: var(--green-12); box-shadow: inset 0 0 0 1px var(--green-8); }
.q-btn.is-on.v1 { background: var(--orange-4); color: var(--orange-12); box-shadow: inset 0 0 0 1px var(--orange-8); }
.q-btn.is-on.v0 { background: var(--red-4); color: var(--red-12); box-shadow: inset 0 0 0 1px var(--red-8); }
.q-icon { width: 30px; height: 32px; border: 0; border-radius: var(--radius-2); background: var(--gray-3); color: var(--fg-low); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.q-icon:hover { background: var(--accent-3); color: var(--accent-11); }
/* ---- settings: label editing ---- */
.cfg-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(140px, 200px); gap: var(--space-3); align-items: center; padding: var(--space-2) 0; border-top: var(--stroke-thin) solid var(--border-subtle); }
.cfg-row:first-of-type { border-top: 0; }
.cfg-label { display: flex; flex-direction: column; font-size: var(--fs-2); color: var(--fg-high); }
.cfg-hint { font-size: var(--fs-1); color: var(--fg-low); }
.cfg-input { font-weight: var(--weight-medium); }
@media (max-width: 720px) { .cfg-row { grid-template-columns: 1fr; gap: var(--space-1); } }
.nav-preview { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.np-chip { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-3); background: var(--accent-3); color: var(--accent-11); font-size: var(--fs-2); font-weight: var(--weight-medium); }

/* Work-queue rows sit in both the wide column and the 320px rail. In the rail
   they run out of room, so let the right-hand side drop to its own line. */
.wq { container-type: inline-size; }
@container (max-width: 400px) {
  .wq-row { flex-wrap: wrap; }
  .wq-main { flex: 1 1 100%; }
  .wq-right { width: 100%; padding-left: 40px; justify-content: flex-start; }
}

/* ---- Contrast floors -------------------------------------------------
   Step 11 clears 4.5:1 against steps 1-2, but these chips sit on a step-3
   tint, where it lands around 4.2. Step 12 on the same tint clears it.
   Avatars carry real text, so the initials have to clear it too: the
   categorical ramp is tuned for fills, not for white type. */
.badge.is-success { color: var(--green-12); }
.badge.is-warning { color: var(--orange-12); }
.badge.is-danger  { color: var(--red-12); }
.badge.is-info    { color: var(--blue-12); }
.callout .co-text, .callout .co-text b { color: var(--fg-high); }
.glance-item.is-bad .glance-num, .glance-item.is-bad .glance-label { color: var(--red-12); }
.glance-item.is-warn .glance-num, .glance-item.is-warn .glance-label { color: var(--orange-12); }
.glance-item.is-good .glance-num, .glance-item.is-good .glance-label { color: var(--green-12); }
.avatar.c1, .avatar.c2, .avatar.c3, .avatar.c4,
.avatar.c5, .avatar.c6, .avatar.c7, .avatar.c8 {
  background-image: linear-gradient(rgba(0, 0, 0, .34), rgba(0, 0, 0, .34));
  color: #fff;
}
:root[data-theme="dark"] .avatar.c1, :root[data-theme="dark"] .avatar.c2,
:root[data-theme="dark"] .avatar.c3, :root[data-theme="dark"] .avatar.c4,
:root[data-theme="dark"] .avatar.c5, :root[data-theme="dark"] .avatar.c6,
:root[data-theme="dark"] .avatar.c7, :root[data-theme="dark"] .avatar.c8 {
  background-image: none;
  color: var(--gray-1);
}

/* The SMART framework block, lifted from the paper improvement plan. */
.smart-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-2); margin-bottom: var(--space-4); }
.smart-item { display: flex; gap: var(--space-2); align-items: flex-start; padding: var(--space-2); border-radius: var(--radius-2); background: var(--gray-2); }
.smart-letter { flex: none; width: 20px; height: 20px; border-radius: var(--radius-1); background: var(--accent-9); color: var(--accent-contrast);
  font-size: var(--fs-1); font-weight: var(--weight-bold); display: grid; place-items: center; }
.smart-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.smart-name { font-size: var(--fs-1); font-weight: var(--weight-medium); color: var(--fg-high); }
.smart-def { font-size: 11px; line-height: 1.35; color: var(--fg-low); }
@media (max-width: 900px) { .smart-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .smart-row { grid-template-columns: 1fr; } }

/* Section 11 of the form: the employee's own words, kept with the plan. */
.emp-comment { padding: var(--space-3); border-radius: var(--radius-3); background: var(--gray-2);
  border-left: 3px solid var(--accent-9); font-size: var(--fs-2); color: var(--fg-high); }
.emp-comment-meta { display: block; margin-top: var(--space-2); font-size: var(--fs-1); color: var(--fg-low); }

/* The row number on the action plan is a paper-form artefact. In the stacked
   mobile table it reads as data, so drop it there. */
@media (max-width: 860px) { .table td[data-label="#"], .table th:nth-child(2):empty { display: none; } }
@media (max-width: 860px) { .table th.num-col { display: none; } }

/* A zero on the walk-through has to carry a reason, so the row says so. */
.q-row.needs-note { background: var(--warning-bg); border-radius: var(--radius-2); }
.q-note { display: flex; align-items: flex-start; gap: 6px; margin-top: 4px; font-size: var(--fs-1); color: var(--fg-low); }
.q-note svg { flex: none; margin-top: 2px; }
.q-icon.is-on { background: var(--accent-3); color: var(--accent-11); box-shadow: inset 0 0 0 1px var(--accent-7); }
.q-icon.is-required { background: var(--danger-bg); color: var(--red-12); box-shadow: inset 0 0 0 1px var(--red-7); }

/* The reminder line that sits above the review timeline. */
.remind-row { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3); margin-bottom: var(--space-3);
  border-radius: var(--radius-3); background: var(--info-bg); box-shadow: inset 0 0 0 1px var(--blue-6); color: var(--blue-12); }
.remind-row svg { flex: none; }
.remind-text { flex: 1 1 auto; min-width: 0; font-size: var(--fs-2); }

/* The Document Centre: file names are the content, so they are set in mono. */
.doc-name { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: var(--fs-1); color: var(--fg-high); overflow-wrap: anywhere; line-height: 1.45; }
.doc-name svg { flex: none; color: var(--fg-low); }
.naming { display: flex; flex-direction: column; gap: var(--space-2); }
.naming-row { display: flex; flex-direction: column; gap: 2px; padding: var(--space-2) 0; border-top: var(--stroke-thin) solid var(--border-subtle); }
.naming-row:first-child { border-top: 0; }
.naming-code { font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: var(--fs-1);
  color: var(--accent-12); background: var(--accent-2); padding: 3px 6px; border-radius: var(--radius-1); word-break: break-all; }
.naming-why { font-size: var(--fs-1); color: var(--fg-low); }