/* ============================================================
   Compass — Component Library
   Built on compass-tokens.css (load tokens first).

   Naming: BEM-ish, all prefixed `c-`.
   Block: .c-card  ·  Element: .c-card__title  ·  Modifier: .c-btn--primary

   Compose screens from these classes; never hard-code a colour or
   size in a view — use a class or a token. Changes are additive:
   add a modifier, don't mutate an existing class.
   ============================================================ */

/* ---------- App shell ---------- */
.c-app {
  background: var(--canvas);
  color: var(--ink-900);
  font-family: var(--font-body);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
.c-page { max-width: 1320px; margin: 0 auto; padding: var(--space-6) var(--space-8) var(--space-12); }

/* ---------- App bar ---------- */
.c-appbar {
  position: sticky; top: 0; z-index: 20;
  height: var(--appbar-h);
  background: var(--surface);
  border-bottom: 1px solid var(--line-soft);
  display: flex; align-items: center;
  padding: 0 var(--space-8); gap: var(--space-5);
}
.c-appbar__logo { height: 30px; width: auto; }
.c-appbar__divider { width: 1px; height: 26px; background: var(--line-soft); }
.c-appbar__spacer { flex: 1; }
.c-client { font-size: var(--text-body); color: var(--ink-700); }
.c-client__label { color: var(--ink-500); }

/* ---------- User identity (truncates gracefully) ---------- */
.c-user { display: flex; align-items: center; gap: var(--space-3); max-width: 220px; cursor: pointer; }
.c-user__meta { line-height: 1.2; min-width: 0; }          /* min-width:0 enables ellipsis in flex */
.c-user__name { font-size: 13px; font-weight: var(--weight-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-user__role { font-size: 11px; color: var(--ink-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-user__caret { color: var(--ink-300); font-size: 11px; flex-shrink: 0; }
.c-avatar {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  background: var(--brand-gradient); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: var(--weight-bold); font-size: 14px;
}
.c-avatar--sm { width: 34px; height: 34px; font-size: 13px; }

/* ---------- Tabs ---------- */
.c-tabs {
  position: sticky; top: var(--appbar-h); z-index: 19;
  height: var(--tabbar-h);
  background: var(--surface); border-bottom: 1px solid var(--line-soft);
  display: flex; align-items: center; padding: 0 var(--space-8); gap: var(--space-8);
}
.c-tab { font-size: var(--text-body); font-weight: var(--weight-medium); color: var(--ink-500); height: var(--tabbar-h); display: flex; align-items: center; cursor: pointer; border-bottom: 2.5px solid transparent; box-sizing: border-box; text-decoration: none; }
.c-tab--active { font-weight: var(--weight-bold); color: var(--ink-900); border-bottom-color: var(--brand-violet); }
.c-tab--disabled { color: var(--ink-300); cursor: default; }

/* ---------- Filter bar + chips ---------- */
.c-filterbar { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); padding: 13px 18px; display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.c-filterbar--sticky { position: sticky; top: 112px; z-index: 18; border-radius: 0; border-width: 0 0 1px; }
.c-filterbar__label { font-size: 12px; color: var(--ink-300); padding: 0 4px; }
.c-filterbar__spacer { flex: 1; }
.c-filter { display: flex; align-items: center; gap: 6px; background: var(--fill-muted); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 11px; font-size: 12.5px; color: var(--ink-700); cursor: pointer; }
.c-filter__caret { color: var(--ink-300); }
.c-filter--applied { background: var(--brand-violet-50); border-color: var(--brand-violet-100); color: var(--brand-violet-700); font-weight: var(--weight-semibold); }
.c-workarea { display: flex; align-items: center; gap: 8px; background: var(--brand-gradient); color: #fff; border-radius: var(--radius-sm); padding: 9px 14px; font-size: 13px; font-weight: var(--weight-semibold); cursor: pointer; }
.c-link { color: var(--brand-violet-text); font-weight: var(--weight-semibold); font-size: 13px; cursor: pointer; text-decoration: none; }

/* ---------- Buttons ---------- */
.c-btn { height: var(--control-h); padding: 0 22px; border: none; border-radius: var(--radius-md); font-family: var(--font-display); font-weight: var(--weight-bold); font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; transition: filter var(--t), border-color var(--t), color var(--t); }
.c-btn--primary { background: var(--brand-gradient); color: #fff; box-shadow: 0 10px 20px -8px rgba(123,53,206,.55); }
.c-btn--primary:hover { filter: brightness(1.06); }
.c-btn--secondary { background: var(--surface); color: var(--ink-900); border: 1.5px solid var(--control-border); }
.c-btn--secondary:hover { border-color: var(--focus-border); color: var(--brand-violet-700); }
.c-btn--ghost { background: transparent; color: var(--brand-violet-text); }
.c-btn--ghost:hover { background: var(--brand-violet-50); }
.c-btn--lg { height: var(--control-h-lg); border-radius: var(--radius-md); font-size: 16px; }
.c-btn--sm { height: var(--control-h-sm); padding: 0 16px; border-radius: var(--radius-sm); font-size: 13px; }
.c-btn--block { width: 100%; }
.c-btn:disabled { background: var(--track); color: var(--ink-300); box-shadow: none; cursor: not-allowed; }

/* ---------- Forms ---------- */
.c-field { margin-bottom: var(--space-5); }
.c-field__label { font-size: var(--text-label); font-weight: var(--weight-semibold); color: var(--ink-700); display: block; margin-bottom: 7px; }
.c-input { display: flex; align-items: center; border: 1.5px solid var(--line); border-radius: 10px; padding: 0 14px; height: 48px; background: var(--surface-2); }
.c-input > input { border: none; outline: none; background: transparent; font-family: inherit; font-size: 14px; color: var(--ink-900); width: 100%; }
.c-input:focus-within { border-color: var(--focus-border); box-shadow: var(--focus-ring); background: var(--surface); }
.c-input--error { border-color: var(--state-negative); box-shadow: 0 0 0 4px rgba(226,87,75,.12); background: var(--surface); }
.c-input__action { font-size: 13px; font-weight: var(--weight-semibold); color: var(--brand-violet-text); cursor: pointer; }
.c-field__error { font-size: 12px; color: var(--state-negative); margin-top: 6px; }
.c-check, .c-radio { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-700); cursor: pointer; }
.c-check__box { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--check-border); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.c-check__box--on { background: var(--brand-gradient); border: none; color: #fff; font-size: 11px; }
/* Implicit coverage (access editor): a unit reached by an ancestor grant whose sub-units are on.
   Ticked so it reads as included, but soft-violet + read-only so it's distinct from a direct grant. */
.c-check__box--implied { background: var(--brand-violet-50); border: 1.5px solid var(--check-border); color: var(--brand-violet-700); }
.c-check__box--implied .c-icon { color: var(--brand-violet-700); }
.c-tree__covered { color: var(--brand-violet-700); font-weight: var(--weight-semibold); }
/* Indeterminate parent (access editor): some but not all children granted — explicit units, no
   future. Rendered together with c-check__box--on (border:none), so this only tints the fill and
   colours the dash. */
.c-check__box--indeterminate { background: var(--brand-violet-100); }
.c-check__box--indeterminate .c-icon { color: var(--brand-violet-700); }
/* Read-only data-scope summary — shared by the membership card (Data scope panel) and the access
   editor's right column. Plain layout over existing tokens; folded in from the examples' vx-sum-*. */
.c-sum__group { font-size: 11px; font-weight: var(--weight-bold); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-500); padding: 12px 0 4px; }
.c-sum__kids { padding-left: 15px; border-left: 2px solid var(--line-soft); margin-left: 5px; display: flex; flex-direction: column; }
.c-sum__row { display: flex; align-items: center; gap: 9px; padding: 5px 0; font-size: 13.5px; color: var(--ink-700); }
.c-sum__branch { display: flex; align-items: center; gap: 9px; padding: 8px 0; font-size: 14px; font-weight: var(--weight-semibold); color: var(--ink-900); }
.c-sum__ico { width: 15px; height: 15px; flex-shrink: 0; color: var(--brand-violet-700); }
.c-sum__chip { margin-left: auto; font-size: 11px; font-weight: var(--weight-semibold); color: var(--brand-violet-700); background: var(--brand-violet-50); border-radius: var(--radius-pill); padding: 3px 10px; white-space: nowrap; }

/* Password strength meter (segments + label; logic set by build) */
.c-strength { display: flex; align-items: center; gap: 10px; }
.c-strength__bars { display: flex; gap: 5px; flex: 1; }
.c-strength__seg { height: 5px; flex: 1; border-radius: 3px; background: var(--track); }
.c-strength__seg--on { background: var(--state-positive); }
.c-strength__seg--good { background: var(--score-good); }
.c-strength__label { font-size: 12px; font-weight: var(--weight-bold); }

/* ---------- Auth shell (split) ---------- */
.c-authshell { display: flex; background: var(--surface); border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); }
.c-authshell__brand { position: relative; overflow: hidden; width: 45%; background: var(--brand-gradient-deep); padding: 46px 44px; display: flex; flex-direction: column; justify-content: space-between; color: #fff; }
.c-authshell__brand-logo { height: 50px; width: auto; align-self: flex-start; position: relative; }
.c-authshell__brand-deco { position: absolute; opacity: .55; }
.c-authshell__headline { font-family: var(--font-display); font-weight: var(--weight-extra); font-size: 31px; line-height: 1.12; letter-spacing: -.02em; position: relative; }
.c-authshell__sub { font-size: 15px; color: rgba(255,255,255,.8); margin-top: 13px; line-height: 1.55; max-width: 320px; position: relative; }
.c-authshell__footer { font-size: 12px; color: rgba(255,255,255,.6); position: relative; }
.c-authshell__body { flex: 1; padding: 56px 64px; display: flex; flex-direction: column; justify-content: center; }
.c-authshell__title { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: 26px; margin-bottom: 6px; }
.c-authshell__lead { color: var(--ink-500); font-size: 14px; margin-bottom: 28px; }

/* ---------- Card + KPI ---------- */
.c-card { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); }
.c-card--pad { padding: 18px 20px; }
.c-kpi { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); padding: 18px 20px; }
.c-kpi__label { font-size: 12px; color: var(--ink-500); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: .05em; }
.c-kpi__value { font-family: var(--font-display); font-size: var(--text-metric-lg); font-weight: var(--weight-bold); margin-top: 8px; font-variant-numeric: tabular-nums; }
.c-kpi__value--positive { color: var(--state-positive); }

/* ---------- Section heading ---------- */
.c-section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.c-section-head__title { font-family: var(--font-display); font-size: var(--text-title); font-weight: var(--weight-bold); }
.c-section-head__meta { font-size: 12px; color: var(--ink-500); }

/* ---------- Score gauge ----------
   Set the arc length per score:  style="--deg: 230deg"  (deg = score/10*360) */
.c-gauge { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); padding: 22px; text-align: center; }
.c-gauge__ring { width: 124px; height: 124px; border-radius: 50%; margin: 0 auto 14px; display: flex; align-items: center; justify-content: center;
  background: conic-gradient(from -90deg, var(--brand-indigo), var(--brand-violet), var(--brand-magenta) var(--deg, 230deg), #ECEAF6 var(--deg, 230deg) 360deg); }
.c-gauge__center { width: 92px; height: 92px; border-radius: 50%; background: var(--surface); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.c-gauge__value { font-family: var(--font-display); font-size: 26px; font-weight: var(--weight-extra); font-variant-numeric: tabular-nums; }
.c-gauge__unit { font-size: 10px; color: var(--ink-500); }
.c-gauge__label { font-size: 14px; font-weight: var(--weight-bold); }
.c-gauge__sub { font-size: 12px; color: var(--ink-500); margin-top: 2px; }

/* ---------- Dimension card ---------- */
.c-dimension { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); overflow: hidden; }
.c-dimension__head { padding: 18px 20px; color: #fff; }
.c-dimension__head--cause { background: var(--grad-cause); }
.c-dimension__head--capability { background: var(--grad-capability); }
.c-dimension__head--culture { background: var(--grad-culture); }
.c-dimension__head-row { display: flex; justify-content: space-between; align-items: baseline; }
.c-dimension__name { font-family: var(--font-display); font-weight: var(--weight-extra); font-size: 18px; letter-spacing: .02em; }
.c-dimension__score { font-family: var(--font-display); font-weight: var(--weight-extra); font-size: 24px; font-variant-numeric: tabular-nums; }
.c-dimension__aspiration { font-size: 12px; color: rgba(255,255,255,.82); margin-top: 4px; }
.c-dimension__body { padding: 16px 20px 20px; }

/* ---------- Score bar ----------
   Width set per score: style="--val: 71%".  Colour by threshold modifier. */
.c-bar { margin-bottom: 13px; }
.c-bar:last-child { margin-bottom: 0; }
.c-bar__head { display: flex; justify-content: space-between; gap: 8px; white-space: nowrap; font-size: 13px; margin-bottom: 6px; }
.c-bar__name { font-weight: var(--weight-semibold); }
.c-bar__value { font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }
.c-bar__track { height: 7px; border-radius: 5px; background: var(--track); position: relative; }
.c-bar__fill { width: var(--val, 0%); height: 100%; border-radius: 5px; background: var(--ink-400); }
.c-bar__fill--low { background: var(--score-low); }
.c-bar__fill--watch { background: var(--score-watch); }
.c-bar__fill--good { background: var(--score-good); }
.c-bar__fill--strong { background: var(--score-strong); }
.c-bar__tick { position: absolute; top: -3px; width: 2px; height: 13px; background: var(--ink-900); border-radius: 1px; left: var(--bench, 62%); }  /* industry benchmark */

/* ---------- Badges ---------- */
.c-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: var(--weight-bold); padding: 5px 11px; border-radius: var(--radius-pill); }
.c-badge--positive { background: var(--state-positive-soft); color: var(--state-positive); }
.c-badge--negative { background: var(--state-negative-soft); color: var(--state-negative); }
.c-badge--info { background: var(--state-info-soft); color: var(--state-info); }

/* ---------- Suppressed / masked cell (< 5 responses) ---------- */
.c-masked { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-300); font-weight: var(--weight-bold); }
.c-masked__dots { font-size: 15px; letter-spacing: 1px; }

/* ---------- System states ---------- */
.c-empty { border: 1px dashed var(--empty-border); border-radius: var(--radius-lg); padding: 30px 20px; text-align: center; background: var(--surface-2); }
.c-empty__title, .c-noaccess__title { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: 16px; }
.c-empty__text, .c-noaccess__text { font-size: 13px; color: var(--ink-500); margin-top: 6px; line-height: 1.5; }
.c-noaccess { border: 1px solid var(--noaccess-border); border-radius: var(--radius-lg); padding: 30px 20px; text-align: center; background: var(--noaccess-bg); }
.c-noaccess__icon { width: 52px; height: 52px; border-radius: 50%; background: var(--state-negative-soft); display: flex; align-items: center; justify-content: center; font-size: 22px; margin: 0 auto 14px; }
.c-skeleton { border-radius: 6px; background: linear-gradient(90deg, var(--track) 25%, var(--skeleton-hl) 37%, var(--track) 63%); background-size: 840px 100%; animation: c-shimmer 1.4s infinite linear; }
@keyframes c-shimmer { 0% { background-position: -420px 0; } 100% { background-position: 420px 0; } }

/* ---------- Welcome hero (home) ---------- */
.c-hero { position: relative; overflow: hidden; border-radius: var(--radius-xl); background: var(--brand-gradient-deep); padding: 30px 34px; color: #fff; display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); }
.c-hero__title { font-family: var(--font-display); font-weight: var(--weight-extra); font-size: 28px; letter-spacing: -.02em; position: relative; }
.c-hero__sub { font-size: 15px; color: rgba(255,255,255,.82); margin-top: 7px; max-width: 560px; line-height: 1.5; position: relative; }
.c-hero__deco { position: absolute; opacity: .45; }

/* ---------- Auth-specific bits ---------- */
/* Inline alert (e.g. invalid credentials) */
.c-alert { display: flex; align-items: flex-start; gap: 10px; border-radius: 10px; padding: 12px 14px; }
.c-alert--error { background: var(--state-negative-soft); border: 1px solid var(--state-negative-border); color: var(--state-negative); }
.c-alert--success { background: var(--state-positive-soft); border: 1px solid #B6E2D2; color: var(--state-positive); }
.c-alert--success .c-alert__text { color: var(--state-positive); }
/* Neutral/info inline note (reuses --state-info-soft). */
.c-alert--info { background: var(--state-info-soft); border: 1px solid #CFE0F5; color: var(--ink-700); }
.c-alert--info .c-alert__text { color: var(--ink-700); }
.c-alert--info .c-icon { width: 17px; height: 17px; color: var(--state-info); flex-shrink: 0; margin-top: 1px; }
.c-alert__text { font-size: 13px; line-height: 1.45; color: var(--state-negative-text); }
/* Large status icon for confirmation / terminal screens */
.c-status-icon { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 26px; margin-bottom: 22px; }
.c-status-icon--success { background: var(--state-positive-soft); color: var(--state-positive); }
.c-status-icon--info { background: var(--state-info-soft); color: var(--state-info); }
.c-status-icon--warn { background: var(--state-negative-soft); color: var(--state-negative); }
/* Password requirement checklist */
.c-reqs { display: flex; gap: 18px; flex-wrap: wrap; }
.c-req { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-500); }
.c-req__tick { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--line-strong); display: inline-flex; align-items: center; justify-content: center; font-size: 10px; }
.c-req--met { color: var(--state-positive); }
.c-req--met .c-req__tick { background: var(--state-positive-soft); border: none; }


/* ============================================================
   Modifiers, focus, responsive, a11y
   ============================================================ */

/* Accessibility primitive (canonicalised from the build's app-scoped helper) */
.c-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* Token-based spacing utilities — SANCTIONED escape hatch.
   Values come from --space-* tokens, never raw px, so views stay token-driven. */
.c-mt-0{margin-top:0}.c-mt-2{margin-top:var(--space-2)}.c-mt-3{margin-top:var(--space-3)}.c-mt-4{margin-top:var(--space-4)}.c-mt-5{margin-top:var(--space-5)}.c-mt-6{margin-top:var(--space-6)}
.c-mb-0{margin-bottom:0}.c-mb-2{margin-bottom:var(--space-2)}.c-mb-3{margin-bottom:var(--space-3)}.c-mb-4{margin-bottom:var(--space-4)}.c-mb-5{margin-bottom:var(--space-5)}.c-mb-6{margin-bottom:var(--space-6)}

/* Auth-shell layout modifiers (de-inlined from the worked examples) */
.c-authshell__body--centered { align-items: flex-start; }        /* status-icon screens */
.c-authshell__lead--lg { font-size: 15px; line-height: 1.55; }
.c-authshell__lead--narrow { max-width: 400px; }
.c-btn--wide { padding: 0 30px; }

/* Icons — inline SVG, currentColor, NO emoji */
.c-icon { width: 18px; height: 18px; display: inline-block; vertical-align: middle; stroke: currentColor; fill: none; }
.c-status-icon .c-icon { width: 26px; height: 26px; }

/* Password strength — segment + label colours tied to the score buckets */
.c-strength__seg--low    { background: var(--score-low); }
.c-strength__seg--watch  { background: var(--score-watch); }
.c-strength__seg--good   { background: var(--score-good); }
.c-strength__seg--strong { background: var(--score-strong); }
.c-strength__label--low{color:var(--score-low)}.c-strength__label--watch{color:var(--score-watch)}.c-strength__label--good{color:var(--score-good)}.c-strength__label--strong{color:var(--score-strong)}
/* Empty / initial state (no input yet): all segments grey (default --track), muted label. */
.c-strength--empty .c-strength__seg { background: var(--track); }
.c-strength__label--empty { color: var(--ink-500); }

/* Password toggle is a real <button> */
.c-input__action { background: none; border: none; cursor: pointer; font: inherit; font-size: 13px; font-weight: var(--weight-semibold); color: var(--brand-violet-text); padding: 0; }

/* Focus-visible — WCAG 2.1 AA (incl. the hidden checkbox) */
.c-btn:focus-visible, .c-link:focus-visible, .c-tab:focus-visible, .c-filter:focus-visible,
.c-workarea:focus-visible, .c-input__action:focus-visible, .c-user:focus-visible {
  outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm);
}
.c-check:focus-within .c-check__box { box-shadow: var(--focus-ring); }

/* Auth-shell responsive collapse */
@media (max-width: 720px) {
  .c-authshell { flex-direction: column; }
  .c-authshell__brand { display: none; }
  .c-authshell__body { padding: 40px 28px; }
}

/* Auth-shell brand decorations + form rows (de-inlined from examples) */
.c-authshell__brand-deco--donut { width: 280px; right: -60px; top: -30px; }
.c-authshell__brand-deco--orb   { width: 140px; left: -30px; bottom: 70px; }
.c-authshell__row  { display: flex; justify-content: space-between; align-items: center; }
.c-authshell__help { text-align: center; font-size: 13px; color: var(--ink-500); }
.c-check__box .c-icon { width: 12px; height: 12px; }

/* Auth-shell text helpers + icon sizing in small contexts */
.c-authshell__note { font-size: 13.5px; color: var(--ink-500); }
.c-authshell__badge { align-self: flex-start; }
.c-authshell__fineprint { font-size: 12.5px; color: var(--ink-500); line-height: 1.5; }
.c-req__tick .c-icon { width: 11px; height: 11px; }
.c-badge .c-icon { width: 14px; height: 14px; }

/* Home hero — window context + decorations (de-inlined) */
.c-hero__content { position: relative; }
.c-hero__deco--donut { width: 230px; right: 130px; top: -66px; }
.c-hero__deco--orb   { width: 92px; right: 34px; bottom: -26px; opacity: .5; }
.c-hero__windows { position: relative; display: flex; gap: var(--space-3); flex-shrink: 0; }
.c-hero__window { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); border-radius: var(--radius-md); padding: 13px 18px; text-align: center; }
.c-hero__window--prior { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.14); }
.c-hero__window-label { font-size: 11px; color: rgba(255,255,255,.74); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: .05em; }
.c-hero__window-year { font-family: var(--font-display); font-size: 22px; font-weight: var(--weight-extra); color: #fff; margin-top: 3px; font-variant-numeric: tabular-nums; }
.c-hero__window--prior .c-hero__window-year { font-weight: var(--weight-bold); color: rgba(255,255,255,.82); }
.c-hero__window-meta { font-size: 11px; color: rgba(255,255,255,.66); margin-top: 2px; }
.c-section-head__sub { color: var(--ink-500); font-weight: var(--weight-medium); font-size: 14px; }

/* Button-reset for interactive components promoted to <button> */
.c-workarea, .c-filter, .c-user { font: inherit; cursor: pointer; }
.c-user { background: none; border: none; padding: 0; color: inherit; text-align: left; }
.c-workarea { color: #fff; }

/* ---------- Admin chrome (distinct from the portal: dark ink app bar + mode lockup) ---------- */
.c-appbar--admin { background: var(--ink-900); border-bottom-color: rgba(255,255,255,.10); }
.c-appbar--admin .c-appbar__divider { background: rgba(255,255,255,.16); }
.c-appbar__mode { font-family: var(--font-display); font-size: 15px; font-weight: var(--weight-bold); color: #fff; letter-spacing: .01em; }
.c-appbar__mode b { color: rgba(255,255,255,.55); font-weight: var(--weight-semibold); }
.c-appbar--admin .c-user__name { color: #fff; }
.c-appbar--admin .c-user__role { color: rgba(255,255,255,.55); }
.c-appbar__scope { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: rgba(255,255,255,.8); background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius-pill); padding: 6px 12px; }

/* ============================================================
   Platform admin module (/admin/)
   ============================================================ */

/* ---------- Console shell (sidebar nav) ---------- */
.c-adminshell { display: flex; min-height: 100vh; }
.c-adminnav { width: 248px; flex-shrink: 0; background: var(--ink-900); color: #fff; display: flex; flex-direction: column; }
.c-adminnav__brand { display: flex; align-items: center; gap: 10px; padding: 18px 20px; border-bottom: 1px solid rgba(255,255,255,.08); }
.c-adminnav__logo { height: 28px; width: auto; }
.c-adminnav__tag { font-size: 10px; font-weight: var(--weight-bold); letter-spacing: .1em; text-transform: uppercase; color: #fff; background: rgba(255,255,255,.14); padding: 3px 8px; border-radius: var(--radius-pill); }
.c-adminnav__group { padding: 14px 12px 4px; }
.c-adminnav__grouplabel { font-size: 10px; font-weight: var(--weight-bold); letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.4); padding: 0 10px 8px; }
.c-adminnav__item { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 9px; font-size: 14px; color: rgba(255,255,255,.7); text-decoration: none; cursor: pointer; margin-bottom: 2px; }
.c-adminnav__item:hover { background: rgba(255,255,255,.06); color: #fff; }
.c-adminnav__item--active { background: var(--brand-gradient); color: #fff; font-weight: var(--weight-semibold); }
.c-adminnav__item .c-icon { width: 18px; height: 18px; flex-shrink: 0; }
.c-adminnav__count { margin-left: auto; font-size: 11px; background: rgba(255,255,255,.16); padding: 1px 8px; border-radius: var(--radius-pill); font-variant-numeric: tabular-nums; }
.c-adminnav__spacer { flex: 1; }
.c-adminnav__foot { padding: 14px; border-top: 1px solid rgba(255,255,255,.08); display: flex; align-items: center; gap: 10px; }
.c-adminmain { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--canvas); }
.c-admintop { height: 60px; background: var(--surface); border-bottom: 1px solid var(--line-soft); display: flex; align-items: center; padding: 0 24px; gap: 14px; }
.c-admintop__spacer { flex: 1; }
.c-adminbody { padding: 24px; }

/* ---------- Page head + breadcrumb ---------- */
.c-pagehead { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.c-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-500); margin-bottom: 6px; }
.c-breadcrumb a { color: var(--ink-500); text-decoration: none; }
.c-breadcrumb__sep { color: var(--ink-300); }
.c-pagehead__title { font-family: var(--font-display); font-size: 24px; font-weight: var(--weight-extra); letter-spacing: -.01em; }
.c-pagehead__sub { color: var(--ink-500); font-size: 14px; margin-top: 4px; }
.c-pagehead__actions { display: flex; gap: 10px; flex-shrink: 0; }

/* ---------- Stat card (dashboard) ---------- */
.c-stat { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); padding: 18px 20px; display: flex; align-items: flex-start; gap: 14px; }
.c-stat__icon { width: 42px; height: 42px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--brand-violet-50); color: var(--brand-violet); }
.c-stat__icon .c-icon { width: 22px; height: 22px; }
.c-stat__label { font-size: 12px; color: var(--ink-500); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: .05em; }
.c-stat__value { font-family: var(--font-display); font-size: 28px; font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; line-height: 1.1; margin-top: 2px; }
.c-stat__meta { font-size: 12px; color: var(--ink-500); margin-top: 2px; }

/* ---------- Toolbar + search ---------- */
.c-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.c-toolbar__spacer { flex: 1; }
.c-search { display: flex; align-items: center; gap: 8px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 0 12px; height: var(--control-h-sm); background: var(--surface); min-width: 260px; }
.c-search input { border: none; outline: none; background: transparent; font: inherit; font-size: 13px; color: var(--ink-900); width: 100%; }
.c-search .c-icon { color: var(--ink-500); width: 16px; height: 16px; flex-shrink: 0; }
.c-search:focus-within { border-color: var(--focus-border); box-shadow: var(--focus-ring); }
.c-select { display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 0 12px; height: var(--control-h-sm); background: var(--surface); font-size: 13px; color: var(--ink-700); cursor: pointer; }
.c-select .c-icon { color: var(--ink-300); width: 14px; height: 14px; }

/* ---------- Data table (semantic; server-driven sort/paginate via htmx) ---------- */
.c-tablecard { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); overflow: hidden; }
.c-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.c-table th { text-align: left; font-size: 11px; font-weight: var(--weight-bold); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-500); padding: 12px 16px; border-bottom: 1px solid var(--line-soft); background: var(--surface-2); white-space: nowrap; }
.c-table td { padding: 13px 16px; border-bottom: 1px solid var(--line-soft); color: var(--ink-700); vertical-align: middle; }
.c-table tr:last-child td { border-bottom: none; }
.c-table tbody tr:hover { background: var(--surface-2); }
.c-table__sort { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; color: inherit; background: none; border: none; font: inherit; font-size: inherit; letter-spacing: inherit; text-transform: inherit; font-weight: inherit; color: var(--ink-500); padding: 0; }
.c-table__sort .c-icon { width: 13px; height: 13px; }
.c-table__sort--active { color: var(--brand-violet-700); }
.c-table__num { text-align: right; font-variant-numeric: tabular-nums; }
.c-table th.c-table__num { text-align: right; }
.c-table th.c-table__num .c-table__sort { justify-content: flex-end; width: 100%; }
.c-table__primary { font-weight: var(--weight-semibold); color: var(--ink-900); }
.c-table__sub { font-size: 12px; color: var(--ink-500); }
.c-table__actions { display: flex; gap: 6px; justify-content: flex-end; }
.c-table--compact td { padding: 9px 16px; }
.c-iconbtn { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ink-500); }
.c-iconbtn:hover { border-color: var(--focus-border); color: var(--brand-violet-700); background: var(--brand-violet-50); }
.c-iconbtn .c-icon { width: 16px; height: 16px; }
.c-iconbtn:focus-visible, .c-tree__row:focus-visible, .c-switch:focus-visible, .c-subtab:focus-visible, .c-pagination__page:focus-visible, .c-adminnav__item:focus-visible, .c-search:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

/* ---------- Pagination ---------- */
.c-pagination { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-top: 1px solid var(--line-soft); font-size: 13px; color: var(--ink-500); }
.c-pagination__pages { display: flex; gap: 4px; }
.c-pagination__page { min-width: 32px; height: 32px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 13px; color: var(--ink-700); font-variant-numeric: tabular-nums; }
.c-pagination__page--active { background: var(--brand-gradient); color: #fff; border: none; font-weight: var(--weight-bold); }

/* ---------- Role / status pills (extends c-badge) ---------- */
.c-badge--neutral { background: var(--fill-muted); color: var(--ink-500); }
.c-badge--warning { background: var(--state-warning-soft); color: var(--state-warning-text); }
.c-badge--brand { background: var(--brand-violet-50); color: var(--brand-violet-700); }
.c-badge--sm { font-size: 11px; padding: 3px 9px; }
.c-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.c-dot--positive { background: var(--state-positive); }
.c-dot--neutral { background: var(--ink-300); }
.c-dot--warning { background: var(--score-watch); }

/* ---------- Definition list (detail key/value) ---------- */
.c-deflist { display: grid; grid-template-columns: 170px 1fr; gap: 12px 18px; font-size: 13.5px; }
.c-deflist__key { color: var(--ink-500); }
.c-deflist__val { color: var(--ink-900); }

/* ---------- Sub-tabs (within a detail page) ---------- */
.c-subtabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line-soft); margin-bottom: 20px; }
.c-subtab { padding: 10px 16px; font-size: 13.5px; font-weight: var(--weight-semibold); color: var(--ink-500); cursor: pointer; border-bottom: 2.5px solid transparent; margin-bottom: -1px; text-decoration: none; }
.c-subtab--active { color: var(--ink-900); border-bottom-color: var(--brand-violet); }

/* ---------- Switch / toggle ---------- */
.c-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13px; color: var(--ink-700); background: none; border: none; padding: 0; font-family: inherit; }
.c-switch__track { width: 38px; height: 22px; border-radius: var(--radius-pill); background: var(--check-border); position: relative; transition: background var(--t); flex-shrink: 0; }
.c-switch__thumb { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: left var(--t); }
.c-switch--on .c-switch__track { background: var(--state-positive); }
.c-switch--on .c-switch__thumb { left: 18px; }

/* ---------- Org-unit tree ---------- */
.c-tree { font-size: 13.5px; }
.c-tree__row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; background: none; border: none; width: 100%; font: inherit; text-align: left; }
.c-tree__row:hover { background: var(--surface-2); }
/* Covered by a granted ancestor: included, but not grantable on its own. These MUST sit after the
   base rules above — they are the same specificity, so declared earlier (as they were) the base wins
   and the modifier silently does nothing. `--small` below is the same pattern, placed correctly. */
.c-tree__row--covered { cursor: not-allowed; }
.c-tree__row--covered:hover { background: none; }
.c-tree__toggle { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink-500); flex-shrink: 0; }
.c-tree__toggle .c-icon { width: 14px; height: 14px; }
.c-tree__label { font-weight: var(--weight-semibold); color: var(--ink-900); }
.c-tree__meta { color: var(--ink-500); font-size: 12px; }
.c-tree__children { margin-left: 22px; border-left: 1px solid var(--line); padding-left: 8px; }
.c-tree__spacer { margin-left: auto; }

/* ---------- Modal / dialog ---------- */
.c-overlay { position: absolute; inset: 0; background: rgba(26,34,56,.45); display: flex; align-items: center; justify-content: center; padding: 40px; z-index: 50; }
.c-modal { background: var(--surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); width: 520px; max-width: 100%; overflow: hidden; }
.c-modal__head { padding: 24px 26px 0; }
.c-modal__title { font-family: var(--font-display); font-size: 20px; font-weight: var(--weight-bold); }
.c-modal__sub { color: var(--ink-500); font-size: 13.5px; margin-top: 4px; }
.c-modal__body { padding: 20px 26px; }
.c-modal__foot { padding: 16px 26px; border-top: 1px solid var(--line-soft); display: flex; justify-content: flex-end; gap: 10px; background: var(--surface-2); }
.c-modal__icon { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--brand-violet-50); color: var(--brand-violet); margin: 24px 26px 0; }
.c-modal__icon .c-icon { width: 24px; height: 24px; }
.c-modal--danger .c-modal__icon { background: var(--state-negative-soft); color: var(--state-negative); }

/* ---------- Toast ---------- */
.c-toast { display: inline-flex; align-items: center; gap: 11px; background: var(--ink-900); color: #fff; border-radius: var(--radius-md); padding: 13px 18px; font-size: 13.5px; box-shadow: var(--shadow-md); }
.c-toast__icon { color: var(--state-positive); display: inline-flex; }
.c-toast__icon .c-icon { width: 18px; height: 18px; }

/* ---------- Impersonation banner ---------- */
.c-impersonate { display: flex; align-items: center; gap: 12px; background: var(--state-warning-text); color: #fff; padding: 10px 24px; font-size: 13.5px; }
.c-impersonate__label { font-weight: var(--weight-bold); display: inline-flex; align-items: center; gap: 7px; }
.c-impersonate__label .c-icon { width: 16px; height: 16px; }
.c-impersonate__spacer { flex: 1; }
.c-impersonate__exit { color: #fff; text-decoration: underline; font-weight: var(--weight-semibold); cursor: pointer; background: none; border: none; font-size: inherit; font-family: inherit; }

/* ---------- Admin form row (inline label + control) ---------- */
.c-formrow { display: grid; grid-template-columns: 200px 1fr; gap: 16px; align-items: start; padding: 16px 0; border-bottom: 1px solid var(--line-soft); }
.c-formrow:last-child { border-bottom: none; }
.c-formrow__label { font-size: 13.5px; font-weight: var(--weight-semibold); color: var(--ink-700); }
.c-formrow__hint { font-size: 12px; color: var(--ink-500); margin-top: 3px; }

/* ---------- Admin grids (app-level layout helpers live in the view, but these recur) ---------- */
.c-cardpad { padding: 20px 22px; }
.c-card__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--line-soft); }
.c-card__title { font-family: var(--font-display); font-size: 15px; font-weight: var(--weight-bold); }
.c-card__foot { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 20px; border-top: 1px solid var(--line-soft); background: var(--surface-2); }

/* ---------- Form action bar ----------
   The commit row for a form that is NOT inside a single card — c-card__foot is the same row when it
   is. `__lead` holds status (a dirty badge, a count) at the left; buttons stay right. `--sticky` pins
   it to the bottom of the viewport so the primary action stays reachable on a long form instead of
   sitting at the top where the user is not. z-index sits under c-filterbar--sticky (18). */
.c-actionbar { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 12px 16px; border-radius: var(--radius-md); border: 1px solid var(--line-soft); background: var(--surface); }
.c-actionbar__lead { margin-right: auto; display: flex; align-items: center; gap: 10px; }
.c-actionbar--sticky { position: sticky; bottom: 12px; z-index: 17; box-shadow: var(--shadow-md); }

/* ---------- Dropdown menu (account menu, row actions) ---------- */
.c-menu { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: 6px; min-width: 200px; }
.c-menu__item { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 8px; font-size: 13.5px; color: var(--ink-700); cursor: pointer; text-decoration: none; background: none; border: none; width: 100%; font-family: inherit; text-align: left; }
.c-menu__item:hover { background: var(--surface-2); color: var(--ink-900); }
.c-menu__item .c-icon { width: 16px; height: 16px; color: var(--ink-500); }
.c-menu__item--danger { color: var(--state-negative); }
.c-menu__item--danger .c-icon { color: var(--state-negative); }
.c-menu__sep { height: 1px; background: var(--line-soft); margin: 6px 4px; }
.c-menu__head { padding: 9px 11px 7px; }
.c-menu__name { font-size: 13.5px; font-weight: var(--weight-semibold); color: var(--ink-900); }
.c-menu__meta { font-size: 12px; color: var(--ink-500); }

/* ---------- Bulk-action bar (appears when rows are selected) ---------- */
.c-bulkbar { display: flex; align-items: center; gap: 14px; background: var(--ink-900); color: #fff; border-radius: var(--radius-md); padding: 10px 16px; font-size: 13.5px; }
.c-bulkbar__count { font-weight: var(--weight-bold); }
.c-bulkbar__spacer { flex: 1; }
.c-bulkbar__btn { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); color: #fff; border-radius: var(--radius-sm); padding: 6px 12px; font-size: 13px; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 7px; }
.c-bulkbar__btn .c-icon { width: 15px; height: 15px; }


/* ============================================================
   Admin form + list controls
   Native <select>, row action-menu positioning, pagination states,
   in-card search, status-dot --info, caution modal.
   ============================================================ */

/* ---------- Native <select> — FORM control (inside .c-input) ----------
   Mirrors `.c-input > input` so a native dropdown sits in the same bordered
   shell as text inputs (full keyboard + AT support, zero JS). The chevron is a
   baked data-URI (a background-image can't read currentColor) tuned to --ink-400. */
.c-input > select {
  appearance: none; -webkit-appearance: none;
  border: none; outline: none; background-color: transparent;
  font-family: inherit; font-size: 14px; color: var(--ink-900);
  width: 100%; height: 100%; cursor: pointer; padding-right: 22px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237E8497' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right center; background-size: 13px;
}
.c-input > select:disabled { color: var(--ink-300); cursor: not-allowed; }
.c-input > select option { color: var(--ink-900); }   /* normalise option colour (some UAs inherit transparent) */

/* ---------- Native <select> — FILTER chip (toolbar + in-card) ----------
   `select.c-select` upgrades the chip-style control to a REAL native select with
   the chevron baked in — used for the Client / Role / Status list filters and the
   in-card "Role: All". The `.c-select` *button* (caret as a child .c-icon) stays a
   display/trigger control.
   `--applied` mirrors `.c-filter--applied` so an active filter reads as set. */
select.c-select {
  display: inline-block;                     /* native selects vertically-centre their own value text by height */
  appearance: none; -webkit-appearance: none;
  font-family: inherit; line-height: 1.1; padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237E8497' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 13px;
}
select.c-select:disabled { color: var(--ink-300); cursor: not-allowed; background-color: var(--fill-muted); }
.c-select--applied { background-color: var(--brand-violet-50); border-color: var(--brand-violet-100); color: var(--brand-violet-700); font-weight: var(--weight-semibold); }
.c-select--block { width: 100%; justify-content: space-between; }   /* full-width select in a form row */
.c-select:focus-visible { outline: none; border-color: var(--focus-border); box-shadow: var(--focus-ring); }

/* ---------- In-card search variants ----------
   Base `.c-search` is the 260px toolbar search. `--sm` = compact (access-editor
   "Find unit"); `--block` = full-width inside a card header. */
.c-search--sm { min-width: 160px; height: 32px; }
.c-search--block { min-width: 0; width: 100%; }

/* ---------- Row action-menu (⋮) — BLESSED positioning ----------
   Trigger = a `.c-iconbtn` (the ⋮); wrap trigger + menu in `.c-menu-anchor`.
   Two positionings (the `.c-menu` panel itself is unchanged):
   • `.c-menu--pop`   absolute, drops below-right of the trigger. Use when the anchor
       is NOT inside an overflow-clipped box — e.g. the app-bar account menu.
   • `.c-menu--fixed` position:fixed; top/left set inline by Alpine `x-anchor`
       (Floating UI). Use for IN-TABLE ⋮ menus so they ESCAPE the results card's
       `overflow:hidden` — keep `.c-tablecard{overflow:hidden}` for the rounded
       corners and let the menu float above it.
   Action set: View · Edit · Link to a client · Send password reset · (sep) · danger.
   Danger items use the existing `.c-menu__item--danger`. */
.c-menu-anchor { position: relative; display: inline-flex; }
.c-menu--pop { position: absolute; top: calc(100% + 6px); right: 0; z-index: 60; }
.c-menu--fixed { position: fixed; z-index: 60; }
.c-iconbtn[aria-expanded="true"] { border-color: var(--focus-border); color: var(--brand-violet-700); background: var(--brand-violet-50); }

/* ---------- Pagination states ----------
   The `.c-pagination__summary` (left, "1–20 of 137") is ALWAYS rendered; the
   `.c-pagination__pages` cluster is OMITTED when there is a single page. Prev/Next
   are `.c-pagination__page` with a chevron icon — disable them at the ends
   (`:disabled` if a <button>, or `--disabled` if an <a>/<span>). Use
   `.c-pagination__gap` ("…") for windowed page overflow. */
.c-pagination__summary { font-variant-numeric: tabular-nums; }
.c-pagination__page .c-icon { width: 15px; height: 15px; }
.c-pagination__page:hover:not(.c-pagination__page--active):not(:disabled):not(.c-pagination__page--disabled) {
  border-color: var(--focus-border); color: var(--brand-violet-700);
}
.c-pagination__page:disabled, .c-pagination__page--disabled {
  color: var(--ink-300); border-color: var(--line-soft); background: var(--surface); cursor: not-allowed;
}
.c-pagination__gap { min-width: 24px; height: 32px; display: inline-flex; align-items: flex-end; justify-content: center; color: var(--ink-300); padding-bottom: 5px; }

/* ---------- Status-dot — info (completes the status set) ----------
   Account-status → pill (text + dot; NEVER colour-only):
     Active      → c-badge--positive + c-dot--positive  (green)
     Invited     → c-badge--info     + c-dot--info       (blue · awaiting acceptance)
     Not invited → c-badge--warning  + c-dot--warning    (amber · added, action needed)
     Inactive    → c-badge--neutral  + c-dot--neutral    (grey · deactivated) */
.c-dot--info { background: var(--state-info); }

/* ---------- Modal — caution variant ----------
   Amber icon for non-destructive-but-sensitive confirms (e.g. "View as this user").
   Sits between the default (brand) and `--danger` (negative) modal icons. */
.c-modal--warn .c-modal__icon { background: var(--state-warning-soft); color: var(--state-warning-text); }

/* ============================================================
   Reporting filter unit
   Work-area hierarchy selector + demographic multi-select + the global
   "group too small to report" treatment.
   ============================================================ */

/* --- Applied-count badge on a filter chip (extends .c-filter--applied) --- */
.c-filter__count { display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px; border-radius:var(--radius-pill); background:var(--brand-violet); color:#fff; font-size:11px; font-weight:var(--weight-bold); font-variant-numeric:tabular-nums; }

/* --- Scope-health count: the proactive small-group signal on the bar --- */
.c-scope { display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:var(--weight-semibold); color:var(--ink-700); white-space:nowrap; }
.c-scope__n { font-variant-numeric:tabular-nums; color:var(--ink-900); }
.c-scope__ico { display:inline-flex; color:var(--ink-300); }
.c-scope__ico .c-icon { width:15px; height:15px; }
.c-scope--warn { color:var(--state-warning-text); }
.c-scope--warn .c-scope__n, .c-scope--warn .c-scope__ico { color:var(--state-warning-text); }
.c-scope--under { color:var(--ink-500); }
.c-scope--under .c-scope__n { color:var(--ink-500); }

/* --- Removable applied-filter token (summary strip) --- */
.c-token { display:inline-flex; align-items:center; gap:7px; background:var(--brand-violet-50); border:1px solid var(--brand-violet-100); color:var(--brand-violet-700); border-radius:var(--radius-pill); padding:5px 6px 5px 12px; font-size:12.5px; font-weight:var(--weight-semibold); }
.c-token__cat { color:var(--brand-violet-700); opacity:.72; }
.c-token__x { width:18px; height:18px; border-radius:50%; border:none; background:rgba(139,67,224,.12); color:var(--brand-violet-700); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; padding:0; flex-shrink:0; }
.c-token__x .c-icon { width:11px; height:11px; stroke-width:3; }
.c-token__x:hover { background:rgba(139,67,224,.22); }

/* --- Shared multi-select / picker popover --- */
.c-pop { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); box-shadow:var(--shadow-md); width:300px; overflow:hidden; }
/* The work-area picker. 460px squeezed the tree: the "All org units" row wrapped to two lines and
   Georges River's longest unit names needed 515px. 520px is the no-wrap threshold on real client data;
   560px leaves headroom for longer names. Its list is taller too — 288px showed 5 of 28 rows in a bar
   that has room for far more. Both cap against the viewport so a short window still fits. The taller
   list is scoped to --wide so the demographic chip popovers keep their compact 288px. */
.c-pop--wide { width:min(560px, calc(100vw - 32px)); }
.c-pop--wide .c-pop__list { max-height:min(420px, 52vh); }
.c-pop__head { padding:13px 15px 11px; border-bottom:1px solid var(--line-soft); }
.c-pop__title { display:flex; align-items:center; justify-content:space-between; gap:10px; font-family:var(--font-display); font-size:13.5px; font-weight:var(--weight-bold); color:var(--ink-900); }
.c-pop__title-n { font-size:11.5px; font-weight:var(--weight-semibold); color:var(--ink-500); font-variant-numeric:tabular-nums; }
.c-pop__hint { font-size:11.5px; color:var(--ink-500); margin-top:4px; line-height:1.45; }
.c-pop__list { max-height:288px; overflow-y:auto; padding:6px; }
.c-pop__sep { display:flex; align-items:center; gap:9px; padding:9px 9px 5px; font-size:10.5px; font-weight:var(--weight-bold); letter-spacing:.05em; text-transform:uppercase; color:var(--ink-300); }
.c-pop__sep::after { content:""; flex:1; height:1px; background:var(--line-soft); }
.c-pop__foot { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 14px; border-top:1px solid var(--line-soft); background:var(--surface-2); }

/* --- Option row (checkbox + label + group size) --- */
.c-opt { display:flex; align-items:center; gap:11px; padding:8px 9px; border-radius:8px; cursor:pointer; width:100%; background:none; border:none; font:inherit; text-align:left; }
.c-opt:hover { background:var(--surface-2); }
.c-opt__label { flex:1; font-size:13px; color:var(--ink-700); min-width:0; }
.c-opt__n { font-size:12px; color:var(--ink-500); font-variant-numeric:tabular-nums; flex-shrink:0; }
.c-opt--on .c-opt__label { color:var(--ink-900); font-weight:var(--weight-semibold); }
.c-opt--small { cursor:not-allowed; }
.c-opt--small:hover { background:none; }
.c-opt--small .c-opt__label, .c-opt--small .c-opt__n { color:var(--ink-300); }
.c-opt__lock { width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; color:var(--ink-300); flex-shrink:0; }
.c-opt__lock .c-icon { width:13px; height:13px; }

/* --- Level-label chip (Directorate / Business unit) --- */
.c-level { display:inline-flex; align-items:center; font-size:10px; font-weight:var(--weight-bold); letter-spacing:.05em; text-transform:uppercase; padding:2px 7px; border-radius:var(--radius-pill); background:var(--fill-muted); color:var(--ink-500); white-space:nowrap; }
.c-level--rollup { background:var(--brand-violet-50); color:var(--brand-violet-700); }

/* --- Single-select tree (work-area picker) — extends .c-tree --- */
.c-tree--pick .c-tree__row { align-items:flex-start; gap:11px; }
.c-tree__row--selected, .c-tree__row--selected:hover { background:var(--brand-violet-50); }
.c-tree__main { display:flex; flex-direction:column; gap:3px; min-width:0; flex:1; }
.c-tree__top { display:flex; align-items:center; gap:9px; }
.c-tree__row--small { cursor:not-allowed; }
.c-tree__row--small:hover { background:none; }
.c-tree__row--small .c-tree__label, .c-tree__row--small .c-tree__meta { color:var(--ink-300); }
.c-pick { width:18px; height:18px; border-radius:50%; border:1.5px solid var(--control-border); flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; margin-top:1px; }
.c-pick--on { border-color:var(--brand-violet); }
.c-pick--on::after { content:""; width:10px; height:10px; border-radius:50%; background:var(--brand-gradient); }
.c-tree__lockbox { width:18px; height:18px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; color:var(--ink-300); margin-top:1px; }
.c-tree__lockbox .c-icon { width:13px; height:13px; }

/* --- Global small-group: scope/panel-level state (pairs with .c-masked cell) --- */
.c-suppress { display:flex; align-items:flex-start; gap:15px; background:var(--surface-2); border:1px dashed var(--empty-border); border-radius:var(--radius-lg); padding:20px 22px; }
.c-suppress__icon { width:44px; height:44px; border-radius:12px; background:var(--track); color:var(--ink-500); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.c-suppress__icon .c-icon { width:22px; height:22px; }
.c-suppress__body { min-width:0; }
.c-suppress__title { font-family:var(--font-display); font-weight:var(--weight-bold); font-size:15px; color:var(--ink-900); }
.c-suppress__text { font-size:13px; color:var(--ink-500); margin-top:4px; line-height:1.55; max-width:560px; }
.c-suppress__actions { display:flex; gap:10px; margin-top:13px; flex-wrap:wrap; }

/* ============================================================
   Survey Questions view
   c-suppress / c-masked / c-skeleton / c-empty / c-table* /
   c-dimension__head--* / c-kpi are reused from earlier passes (above / tokens).
   ============================================================ */

/* --- Heatmap score cell ----------
   The Q-score "heatmap" chip. Bucket class is chosen by the ONE unified score
   scale: <5.0 low · 5.0-6.9 watch · 7.0-8.4 good · ≥8.5 strong.
   Same four --score-* tokens as the score bars elsewhere. */
.c-heat { display: inline-flex; align-items: center; justify-content: center; min-width: 50px; padding: 7px 12px; border-radius: 9px; font-family: var(--font-display); font-weight: var(--weight-extra); font-size: 15px; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.c-heat--low    { background: var(--score-low); }
.c-heat--watch  { background: var(--score-watch); }
.c-heat--good   { background: var(--score-good); }
.c-heat--strong { background: var(--score-strong); }
.c-heat--lg { min-width: 64px; padding: 11px 14px; font-size: 20px; border-radius: 11px; }
.c-heat--sm { min-width: 42px; padding: 5px 9px;  font-size: 13px; border-radius: 7px; }
/* A11Y NOTE (pending decision): white text on the amber/olive fills is below
   WCAG AA. Switching to dark text (color: var(--ink-900)) on ALL four tiers
   passes AA uniformly and still reads as a heatmap. */

/* --- Sentiment cell (%positive / %negative) ----------
   Coloured number + slim proportional bar. --val is the data-driven inline
   custom prop (the only inline style allowed). NOTE: .c-sent__fill MUST be
   display:block — an inline span ignores width and the bar collapses. */
.c-sent { display: inline-flex; flex-direction: column; gap: 5px; align-items: flex-end; min-width: 74px; }
.c-sent__val { font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; font-size: 13.5px; }
.c-sent__val--pos   { color: var(--state-positive); }
.c-sent__val--neg   { color: var(--state-negative); }
.c-sent__bar  { width: 84px; height: 7px; border-radius: 4px; background: #EDEFF5; overflow: hidden; }
.c-sent__fill { display: block; height: 100%; border-radius: 4px; width: var(--val, 0%); min-width: 2px; }
.c-sent__fill--pos { background: var(--state-positive); }
.c-sent__fill--neg { background: var(--state-negative); }

/* --- Diverging sentiment bar (Option C — optional) ----------
   One bar: negative hugs left, positive hugs right, neutral shows through.
   Only ship if the "sentiment-forward" body treatment is chosen. */
.c-split { display: flex; align-items: center; height: 9px; border-radius: 5px; background: var(--track); overflow: hidden; width: 100%; min-width: 150px; }
.c-split__neg { height: 100%; background: var(--score-low); width: var(--neg, 0%); }
.c-split__gap { flex: 1; }
.c-split__pos { height: 100%; background: var(--score-strong); width: var(--pos, 0%); }
.c-split-key { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--ink-500); font-variant-numeric: tabular-nums; }
.c-split-key b { font-weight: var(--weight-bold); }

/* --- Question table (grouping + question cells; extends .c-table) ---------- */
.c-qnum  { font-variant-numeric: tabular-nums; color: var(--ink-500); font-weight: var(--weight-semibold); font-size: 12.5px; white-space: nowrap; }
.c-qtext { color: var(--ink-700); line-height: 1.45; max-width: 560px; }
.c-qdriver { color: var(--ink-500); font-size: 12px; }  /* per-question driver tag (Option A / faithful table only) */
/* Driver roll-up row — the "master" row above its questions */
.c-qgroup td { background: var(--surface-2); border-top: 1px solid var(--line); padding-top: 12px; padding-bottom: 12px; }
.c-qgroup:hover td { background: var(--surface-2); }
.c-qgroup__label { display: inline-flex; align-items: stretch; gap: 11px; }
.c-qgroup__text { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.c-qgroup__name { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: 14.5px; color: var(--ink-900); }
.c-qgroup__tick { width: 6px; border-radius: 3px; background: var(--brand-gradient); flex-shrink: 0; align-self: stretch; }  /* spans the driver title + meta rows */
.c-qgroup__meta { display: block; margin-top: 3px; font-size: 11.5px; color: var(--ink-500); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: .04em; }
.c-qtable-head th { position: relative; }

/* --- Dimension panel head (reuses .c-dimension__head--cause/-capability/-culture gradients) ---------- */
.c-dimhead { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 20px; color: #fff; }
.c-dimhead__id  { font-family: var(--font-display); font-weight: var(--weight-extra); font-size: 16px; letter-spacing: .03em; }
.c-dimhead__asp { font-size: 12.5px; color: rgba(255,255,255,.86); font-weight: var(--weight-medium); line-height: 1.4; max-width: 820px; margin-top: 3px; }
.c-dimhead__score { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; }
.c-dimhead__score-n { font-family: var(--font-display); font-weight: var(--weight-extra); font-size: 26px; line-height: 1; font-variant-numeric: tabular-nums; }
.c-dimhead__score-l { font-size: 10.5px; color: rgba(255,255,255,.78); text-transform: uppercase; letter-spacing: .06em; margin-top: 3px; }

/* --- Score-scale legend ---------- */
.c-heatkey { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.c-heatkey__item { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ink-500); }
.c-heatkey__sw { width: 16px; height: 16px; border-radius: 5px; }

/* --- Column-definition tooltip trigger ----------
   Content is intended to be DB-editable at wire-up (definitions table). */
.c-help { display: inline-flex; align-items: center; justify-content: center; color: var(--ink-300); background: none; border: none; padding: 0; margin-left: 5px; cursor: help; vertical-align: middle; }
.c-help .c-icon { width: 14px; height: 14px; }
.c-help:hover { color: var(--brand-violet-text); }

/* --- X-Factor "Employee outcomes" context band (Key Driver Results) ----------
   A quiet benchmark band, not a fourth driver panel — the outcomes the key drivers move, framed above
   them. One labelled rail + a row of score/delta figures; no heat chips (those are the driver heatmap's). */
.c-outcome { display: flex; align-items: stretch; border: 1px solid var(--brand-violet-100); border-radius: var(--radius-lg); overflow: hidden; background: var(--brand-violet-50); }
.c-outcome__rail { flex: 0 0 172px; background: var(--brand-gradient); color: #fff; padding: 14px 16px; display: flex; flex-direction: column; justify-content: center; gap: 3px; }
.c-outcome__rail-t { font-family: var(--font-display); font-weight: var(--weight-extra); font-size: 13px; color: #fff; line-height: 1.3; }
.c-outcome__rail-s { font-size: 11px; color: rgba(255,255,255,.82); line-height: 1.4; }
.c-outcome__items { display: flex; flex: 1; min-width: 0; background: var(--surface); }
.c-outcome__item { flex: 1; padding: 13px 16px; border-left: 1px solid var(--brand-violet-100); display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.c-outcome__item:first-child { border-left: none; }
.c-outcome__name { font-size: 12.5px; font-weight: var(--weight-bold); color: var(--ink-700); }
.c-outcome__code { display: block; font-weight: var(--weight-semibold); color: var(--ink-300); font-size: 10.5px; letter-spacing: .03em; margin-top: 1px; }
.c-outcome__fig { display: flex; align-items: baseline; gap: 9px; }
.c-outcome__score { font-family: var(--font-display); font-weight: var(--weight-extra); font-size: 22px; color: var(--ink-900); font-variant-numeric: tabular-nums; line-height: 1; }
.c-outcome__delta { font-size: 11.5px; font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.c-outcome__delta--up { color: var(--state-positive); }
.c-outcome__delta--down { color: var(--state-negative); }
.c-outcome__delta span { color: var(--ink-300); font-weight: var(--weight-medium); }

/* --- "All org units" pinned roll-up row (work-area picker) ----------
   The user-contextual whole-access roll-up pinned at the TOP of the work-area picker — the pool of every
   unit the SIGNED-IN USER can see, never a fixed "All Council". Its own soft band so it reads as pinned
   even when unselected; brand-violet tint + border when selected. The layers icon (.c-tree__allico)
   signals "everything you can access"; the .c-level--all chip (solid violet) sits one step above the
   directorate --rollup chip so the aggregate hierarchy reads top-down. The multi-select tri-state reuses
   the c-check__box and c-tree__row--covered modifiers unchanged. */
.c-tree__row--all { background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: 10px; margin: 2px 0 4px; }
.c-tree__row--all:hover { background: var(--brand-violet-50); }
.c-tree__row--all.c-tree__row--selected { background: var(--brand-violet-50); border-color: var(--brand-violet-100); }

.c-tree__allico { width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--brand-gradient); color: #fff; }
.c-tree__allico .c-icon { width: 16px; height: 16px; }

.c-level--all { background: var(--brand-violet); color: #fff; }

/* ============================================================
   Demographics / variance view
   ------------------------------------------------------------
   The variance matrix + its parts.

   Reused by this block (already exist; not re-declared here): c-appbar / c-tabs /
   c-ctx / c-avatar · c-workarea / c-filterbar / c-scope ·
   c-masked / c-suppress / c-empty / c-skeleton / c-alert--info / c-btn*.
   This screen does NOT reuse c-heat — the variance chip (c-var) is a distinct
   DIVERGING scale (below/above), see the chip note. */

/* ---------- Reporting-view segmented control ----------
   The Demographics view switcher (Variance by Work Area / Age / Gender / Tenure).
   A single segmented pill; the active segment carries the brand gradient. */
.c-seg { display: inline-flex; background: var(--fill-muted); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 3px; gap: 2px; }
/* text-decoration:none — the segments render as <a> so the switcher works without JS and each segment
   carries the whole scope in its href. Anchors inherit site.css's underline, so it is reset here for
   both states. */
.c-seg__btn { display: inline-flex; align-items: center; gap: 7px; border: none; background: none; font: inherit; font-size: 12.5px; font-weight: var(--weight-semibold); color: var(--ink-500); padding: 7px 14px; border-radius: var(--radius-pill); cursor: pointer; white-space: nowrap; text-decoration: none; }
.c-seg__btn:hover { color: var(--ink-900); text-decoration: none; }
.c-seg__btn--active { background: var(--brand-gradient); color: #fff; box-shadow: var(--shadow-sm); }
.c-seg__btn .c-icon { width: 14px; height: 14px; }

/* ---------- Variance matrix — card + scroll frame ---------- */
.c-vmatrix { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); overflow: hidden; }
.c-vmatrix__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 18px; border-bottom: 1px solid var(--line-soft); background: var(--surface); }
.c-vmatrix__title { display: flex; align-items: center; gap: 11px; }
.c-vmatrix__tick { width: 6px; height: 32px; border-radius: 3px; background: var(--brand-gradient); flex-shrink: 0; }
.c-vmatrix__name { font-family: var(--font-display); font-weight: var(--weight-extra); font-size: 15px; color: var(--ink-900); }
.c-vmatrix__sub { font-size: 12px; color: var(--ink-500); margin-top: 2px; }
.c-vmatrix__scroll { overflow-x: auto; overflow-y: hidden; }

/* ---------- Variance table ----------
   table-layout:fixed is REQUIRED — it makes the frozen (sticky) Key-driver +
   Overall-score columns line up exactly with their `left` offsets (216px / 80px).
   Default: width:max-content (Work Area / Level 2 scrolls). Add --fill for the
   fixed-column views (Age / Gender / Tenure) and Level 1 directorates: the segment
   columns then share the remaining width and the headers grow. */
.c-vtable { border-collapse: separate; border-spacing: 0; width: max-content; table-layout: fixed; font-size: 13px; }
.c-vtable th, .c-vtable td { border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.c-vc { padding: 8px 10px; }
.c-vc--cell { text-align: center; }
/* Frozen columns */
.c-vc--driver { position: sticky; left: 0; z-index: 2; background: var(--surface); text-align: left; width: 216px; min-width: 216px; max-width: 216px; white-space: normal; }
.c-vc--base { position: sticky; left: 216px; z-index: 2; background: var(--surface); text-align: center; width: 80px; min-width: 80px; max-width: 80px; box-shadow: 3px 0 0 -1px var(--line); }
.c-vtable thead .c-vc { background: var(--surface-2); font-size: 11px; font-weight: var(--weight-bold); color: var(--ink-500); vertical-align: bottom; border-bottom: 1px solid var(--line); padding-top: 11px; padding-bottom: 11px; }
.c-vtable thead .c-vc--driver, .c-vtable thead .c-vc--base { z-index: 4; }
/* Segment (column) header */
.c-vc--seg { width: 90px; min-width: 90px; max-width: 90px; text-align: center; white-space: normal; line-height: 1.2; }
.c-seghead__name { display: block; font-weight: var(--weight-bold); color: var(--ink-700); }
.c-seghead__n { display: block; font-size: 10px; font-weight: var(--weight-semibold); color: var(--ink-300); margin-top: 4px; font-variant-numeric: tabular-nums; }
.c-seghead__lock { display: inline-flex; vertical-align: -2px; margin-right: 3px; color: var(--ink-300); }
.c-seghead__lock .c-icon { width: 11px; height: 11px; }
/* Locked (<5 responses) column */
.c-vc--seg-masked .c-seghead__name { color: var(--ink-500); }
/* Muted non-response column (Prefer not to answer / Did not answer) */
.c-vc--seg-muted .c-seghead__name { color: var(--ink-300); font-weight: var(--weight-semibold); }
.c-vc--cell-muted { background: var(--surface-2); }
.c-vc--cell-muted .c-var { opacity: .5; }
.c-vtable tbody tr:hover .c-vc--cell-muted { background: var(--surface-2); }
/* Body cells */
.c-vd { font-weight: var(--weight-semibold); color: var(--ink-900); white-space: normal; display: block; line-height: 1.3; }
.c-vbase { font-family: var(--font-display); font-weight: var(--weight-extra); font-size: 14px; color: var(--ink-900); font-variant-numeric: tabular-nums; }
.c-vtable tbody tr:hover td { background: var(--surface-2); }
.c-vtable tbody tr:hover .c-vc--driver, .c-vtable tbody tr:hover .c-vc--base { background: var(--surface-2); }
/* Fixed-column views (Age / Gender / Tenure) + Level 1 directorates — fill width, larger headers */
.c-vtable--fill { width: 100%; }
.c-vtable--fill .c-vc--seg { width: auto; min-width: 120px; max-width: none; }
.c-vtable--fill .c-seghead__name { font-size: 14px; }
.c-vtable--fill .c-var { font-size: 14px; min-width: 66px; padding: 7px 10px; }

/* ---------- Dimension group band (row) ----------
   Key drivers are grouped Cause / Capability / Culture + a separated Outcomes
   group (the X-Factors). Reuses the --grad-* header gradients. The label is
   position:sticky left so it stays visible while the matrix scrolls sideways. */
.c-vgroup td { padding: 0; border-bottom: none; }
.c-vgroup__label { position: sticky; left: 0; display: flex; flex-direction: column; gap: 1px; padding: 9px 16px; max-width: 820px; }
.c-vgroup__id { font-family: var(--font-display); font-weight: var(--weight-extra); font-size: 11.5px; letter-spacing: .05em; color: #fff; }
.c-vgroup__asp { font-size: 11px; color: rgba(255,255,255,.85); line-height: 1.35; }
.c-vg--cause td { background: var(--grad-cause); }
.c-vg--capability td { background: var(--grad-capability); }
.c-vg--culture td { background: var(--grad-culture); }
.c-vg--outcomes td { background: var(--brand-gradient); }

/* ---------- Parent-directorate grouping band (Level 2 org units) ----------
   A second header row above the business-unit columns, grouping them under
   their Level 1 directorate. Only used on the Work Area / Level 2 matrix. */
.c-vorg { background: var(--canvas-2); font-family: var(--font-body); font-weight: var(--weight-bold); font-size: 12px; color: var(--ink-900); text-align: center; padding: 9px 10px; border-bottom: 1px solid var(--line-strong); border-left: 2px solid var(--surface); white-space: normal; line-height: 1.2; vertical-align: middle; }

/* ---------- Diverging variance chip ----------
   The cell value = (segment score − whole-of-organisation score). DIVERGING scale
   (distinct from the absolute c-heat): buckets by signed magnitude. Reuses the
   score and state token ends; the mid bucket is neutral so "no real difference"
   does NOT read as a result. Thresholds ±0.5 (on-par) / ±1.5 (strong).
   NB: never write the two token names as a glob pair here — the slash-star
   sequence closes this comment early, and the parser then swallows .c-var below.
     sn ≤ −1.5 · n −1.5..−0.5 · z ±0.5 · p 0.5..1.5 · sp ≥ 1.5 */
.c-var { display: inline-flex; align-items: center; justify-content: center; min-width: 52px; padding: 5px 6px; border-radius: 6px; font-family: var(--font-display); font-weight: var(--weight-bold); font-size: 12.5px; font-variant-numeric: tabular-nums; line-height: 1; }
.c-var--sn { background: var(--score-low); color: #fff; }
.c-var--n  { background: var(--state-negative-soft); color: var(--state-negative-text); }
.c-var--z  { background: var(--surface-2); color: var(--ink-500); box-shadow: inset 0 0 0 1px var(--line); }
.c-var--p  { background: var(--state-positive-soft); color: #15795A; }
.c-var--sp { background: var(--score-strong); color: #fff; }

/* ---------- Overall summary row ----------
   The foot of each matrix: all driver rows pooled (the report carries this
   row). Reads as a total, not another driver — heavier type, a rule above it, and it
   keeps its tint on hover. The frozen columns re-tint too, or they would flash white
   against the row. */
.c-vtotal td { background: var(--surface-2); border-top: 2px solid var(--line-strong); }
.c-vtotal .c-vc--driver, .c-vtotal .c-vc--base { background: var(--surface-2); }
.c-vtotal .c-vd { font-family: var(--font-display); font-weight: var(--weight-extra); color: var(--ink-900); }
.c-vtable tbody tr.c-vtotal:hover td { background: var(--surface-2); }

/* ---------- Variance legend ---------- */
.c-varkey { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.c-varkey__scale { display: flex; align-items: center; border-radius: 5px; overflow: hidden; }
.c-varkey__sw { width: 30px; height: 15px; }
.c-varkey__cap { font-size: 11px; color: var(--ink-500); font-weight: var(--weight-semibold); }

/* ============================================================
   Survey Guide (read-only documentation view)
   Uses the --state-warning-border token (compass-tokens.css).
   ============================================================ */

/* ---------- Guide layout shell ---------- */
/* Sits inside .c-page, below the app bar + service-view tabs. Three columns:
   nav (fixed) · main (fluid) · on-this-page (fixed, optional). */
.c-guide { display: flex; gap: var(--space-6); align-items: flex-start; max-width: 1520px; margin: 0 auto; }
.c-guide__nav  { width: 274px; flex-shrink: 0; position: sticky; top: calc(var(--appbar-h) + var(--tabbar-h) + 8px); max-height: calc(100vh - var(--appbar-h) - var(--tabbar-h) - var(--space-6)); overflow-y: auto; }
.c-guide__main { flex: 1; min-width: 0; display: flex; gap: 30px; align-items: flex-start; }
.c-guide__doc  { flex: 1; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 34px 44px 44px; box-shadow: var(--shadow-xs); }
.c-guide__toc  { width: 196px; flex-shrink: 0; position: sticky; top: calc(var(--appbar-h) + var(--tabbar-h) + 8px); }

/* Doc title block (a guide page is not a dashboard — its own lighter head, not c-pagehead) */
.c-guide__title { font-family: var(--font-display); font-size: 28px; font-weight: var(--weight-extra); letter-spacing: -.02em; color: var(--ink-900); margin: 0 0 8px; }
.c-guide__title--home { font-size: 31px; }
.c-guide__meta  { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin-bottom: 6px; font-size: 11.5px; color: var(--ink-500); }
.c-guide__rule  { height: 1px; background: var(--line-soft); margin: 14px 0 22px; }

/* ---------- Auto-generated section nav (left) ---------- */
.c-gnav { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 14px 12px; box-shadow: var(--shadow-xs); }
.c-gnav__brand { display: flex; align-items: center; gap: 9px; padding: 2px 8px 12px; text-decoration: none; }
.c-gnav__brand-mark { width: 28px; height: 28px; border-radius: var(--radius-sm); background: var(--brand-gradient); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #fff; }
.c-gnav__brand-name { font-family: var(--font-display); font-weight: var(--weight-extra); font-size: 15px; color: var(--ink-900); line-height: 1.15; }
.c-gnav__brand-sub  { font-size: 11px; color: var(--ink-500); }

/* Guide search — client-side page + heading-title filter (MVP scope) */
.c-gsearch { display: flex; align-items: center; gap: 8px; height: var(--control-h-sm); padding: 0 11px; margin: 0 2px 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 9px; color: var(--ink-500); }
.c-gsearch:focus-within { border-color: var(--focus-border); box-shadow: var(--focus-ring); background: var(--surface); }
.c-gsearch__icon  { flex-shrink: 0; display: flex; color: var(--ink-500); }
.c-gsearch__input { flex: 1; min-width: 0; border: none; background: transparent; font: inherit; font-size: 13px; color: var(--ink-900); outline: none; padding: 0; }
.c-gsearch__input::placeholder { color: var(--ink-300); }
.c-gsearch__kbd   { font-size: 10px; font-weight: var(--weight-semibold); color: var(--ink-500); background: var(--track); border-radius: 5px; padding: 2px 6px; flex-shrink: 0; }
/* Results dropdown (matches page titles + H2/H3 headings) */
.c-gsearch__results { margin: -6px 2px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-md); overflow: hidden; }
.c-gsearch__result  { display: flex; flex-direction: column; gap: 1px; padding: 8px 12px; text-decoration: none; cursor: pointer; }
.c-gsearch__result:hover, .c-gsearch__result--active { background: var(--brand-violet-50); }
.c-gsearch__result-title { font-size: 13px; font-weight: var(--weight-semibold); color: var(--ink-900); }
.c-gsearch__result-crumb { font-size: 11px; color: var(--ink-500); }
.c-gsearch__result mark  { background: transparent; color: var(--brand-violet-700); font-weight: var(--weight-bold); }
.c-gsearch__empty { padding: 12px; font-size: 12.5px; color: var(--ink-500); text-align: center; }

/* Section header row — a GROUP HEADER, never a filled pill. Only colour + caret
   signal the open/active section, so it never competes with the selected page. */
.c-gnav__sec { width: 100%; display: flex; align-items: center; gap: 9px; border: none; background: transparent; color: #2A3142; padding: 9px 9px; border-radius: 8px; cursor: pointer; font: inherit; text-align: left; text-decoration: none; }
.c-gnav__sec:hover { background: var(--surface-2); }
.c-gnav__sec--active { background: transparent; color: #4A2FB0; }          /* NO fill — colour only */
.c-gnav__caret { width: 10px; font-size: 9px; color: #B7BCCC; flex-shrink: 0; transition: transform .15s; }
.c-gnav__sec--active .c-gnav__caret { color: var(--brand-violet); }
.c-gnav__sec[aria-expanded="true"] .c-gnav__caret, .c-gnav__caret--open { transform: rotate(90deg); }
.c-gnav__num   { font-size: 10.5px; color: #AEB4C6; font-variant-numeric: tabular-nums; font-weight: var(--weight-bold); letter-spacing: .03em; flex-shrink: 0; }
.c-gnav__sec--active .c-gnav__num { color: var(--brand-violet); }
.c-gnav__sec-label { font-weight: var(--weight-bold); font-size: 13px; line-height: 1.3; letter-spacing: .01em; }

/* Page rows within an expanded section — grouped under a connecting rail so the
   parent/child hierarchy is unmistakable. Rail lives on the wrapper; the SELECTED
   page paints a solid violet segment of it + a tinted fill (the only fill in the nav). */
.c-gnav__pages { margin: 3px 0 8px 17px; border-left: 1.5px solid #E7E3F3; display: flex; flex-direction: column; gap: 1px; }
.c-gnav__page  { display: flex; gap: 9px; align-items: baseline; padding: 7px 10px 7px 13px; margin-left: -1.5px; border-left: 2px solid transparent; border-radius: 0 7px 7px 0; cursor: pointer; font-size: 12.8px; line-height: 1.38; text-decoration: none; color: var(--ink-500); font-weight: var(--weight-medium); }
.c-gnav__page:hover { background: var(--surface-2); }
.c-gnav__page--active { background: #F1ECFC; color: #3F2BA8; font-weight: var(--weight-bold); border-left-color: var(--brand-violet); }
.c-gnav__page-num { color: var(--ink-300); font-variant-numeric: tabular-nums; font-size: 10.5px; font-weight: var(--weight-medium); flex-shrink: 0; }
.c-gnav__page--active .c-gnav__page-num { color: var(--brand-violet); font-weight: var(--weight-bold); }

/* ---------- Rendered-markdown prose ---------- */
/* Wrap the HTML rendered from a page's Markdown in .c-prose. Element-level rules
   only — this is the ONE place in the system where tag selectors are sanctioned,
   because the content is authored Markdown, not composed components. */
.c-prose { color: var(--ink-700); font-family: var(--font-body); font-size: 15.5px; line-height: 1.68; }
.c-prose > *:first-child { margin-top: 0; }
.c-prose h2 { font-family: var(--font-display); font-size: 20px; font-weight: var(--weight-extra); color: var(--ink-900); letter-spacing: -.01em; margin: 36px 0 13px; scroll-margin-top: calc(var(--appbar-h) + var(--tabbar-h) + 20px); }
.c-prose h3 { font-family: var(--font-display); font-size: 15px; font-weight: var(--weight-extra); color: #4A2FB0; text-transform: uppercase; letter-spacing: .04em; margin: 22px 0 10px; }
.c-prose p  { margin: 0 0 15px; }
.c-prose strong { color: var(--ink-900); font-weight: var(--weight-bold); }
.c-prose ul, .c-prose ol { margin: 0 0 17px; padding-left: 20px; }
.c-prose li { margin: 0 0 8px; padding-left: 4px; }
.c-prose li::marker { color: #B0A3DC; }
.c-prose a { color: var(--brand-violet-text); font-weight: var(--weight-semibold); text-decoration: none; border-bottom: 1px solid rgba(138,82,224,.30); cursor: pointer; }
.c-prose a:hover { border-bottom-color: var(--brand-violet-text); }
/* Broken / draft wikilink target: rendered as plain text, no affordance (never a dead link). */
.c-prose a.is-unresolved, .c-prose .c-prose__unresolved { color: inherit; font-weight: inherit; border-bottom: none; cursor: text; }
.c-prose table { width: 100%; border-collapse: collapse; margin: 6px 0 22px; font-size: 14px; }
.c-prose thead th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-500); font-weight: var(--weight-bold); padding: 0 15px 9px; border-bottom: 2px solid var(--line); }
.c-prose tbody td { padding: 12px 15px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.c-prose tbody tr:hover { background: var(--surface-2); }
.c-prose tbody td:first-child { font-weight: var(--weight-semibold); color: var(--ink-900); }
.c-prose .c-num { font-variant-numeric: tabular-nums; }
/* Inline formula / definition block */
.c-prose__formula { background: var(--canvas); border: 1px solid var(--line); border-left: 3px solid var(--brand-violet); border-radius: 0 10px 10px 0; padding: 14px 18px; margin: 0 0 18px; font-weight: var(--weight-semibold); color: var(--ink-900); font-size: 14.5px; }

/* ---------- Content callouts (distinct from the system c-alert) ----------
   c-alert = transient SYSTEM state (invalid credentials, saved). c-callout =
   authored CONTENT guidance embedded in a page. Three types map 1:1 to the
   Obsidian admonitions in use: [!important] · [!tip] · [!warning]. */
.c-callout { display: flex; gap: 13px; padding: 15px 18px 15px 16px; border-radius: var(--radius-md); margin: 20px 0 24px; border: 1px solid; }
.c-callout__icon  { flex-shrink: 0; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.c-callout__icon svg { width: 20px; height: 20px; }
.c-callout__label { font-family: var(--font-display); font-weight: var(--weight-extra); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; margin: 2px 0 6px; }
.c-callout__body  { font-size: 14px; line-height: 1.62; color: var(--ink-700); }
.c-callout__body p { margin: 0 0 9px; } .c-callout__body p:last-child { margin: 0; }
.c-callout__body a { color: var(--brand-violet-text); font-weight: var(--weight-semibold); text-decoration: none; border-bottom: 1px solid rgba(138,82,224,.30); cursor: pointer; }
.c-callout--important { background: var(--brand-violet-50); border-color: var(--brand-violet-100); }
.c-callout--important .c-callout__icon, .c-callout--important .c-callout__label { color: var(--brand-violet-700); }
.c-callout--tip { background: var(--state-positive-soft); border-color: #B6E2D2; }
.c-callout--tip .c-callout__icon, .c-callout--tip .c-callout__label { color: var(--state-positive); }
.c-callout--warning { background: var(--state-warning-soft); border-color: var(--state-warning-border); }
.c-callout--warning .c-callout__icon, .c-callout--warning .c-callout__label { color: var(--state-warning-text); }

/* ---------- Guide home: browse-by-section cards ---------- */
.c-gcards { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); margin-top: 4px; }
.c-gcard  { display: block; text-decoration: none; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 16px 17px; cursor: pointer; background: var(--surface); transition: box-shadow var(--t), border-color var(--t), transform var(--t); }
.c-gcard:hover { border-color: var(--focus-border); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.c-gcard__head { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
.c-gcard__num  { font-family: var(--font-display); font-size: 11px; font-weight: var(--weight-extra); color: #fff; background: var(--brand-gradient); border-radius: 6px; padding: 3px 7px; font-variant-numeric: tabular-nums; }
.c-gcard__title { font-family: var(--font-display); font-size: 15px; font-weight: var(--weight-extra); color: var(--ink-900); line-height: 1.25; }
.c-gcard__desc  { font-size: 13px; color: var(--ink-500); line-height: 1.5; }
.c-gcard__meta  { font-size: 11.5px; color: var(--ink-500); margin-top: 10px; font-weight: var(--weight-semibold); }

/* ---------- Section-index list (Toolkit / Stakeholder Guides landing) ---------- */
.c-glist { display: flex; flex-direction: column; gap: 9px; margin-top: 6px; }
.c-glist__row { display: flex; align-items: center; gap: 13px; border: 1px solid var(--line); border-radius: 11px; padding: 14px 16px; text-decoration: none; cursor: pointer; background: var(--surface); }
.c-glist__row:hover { border-color: var(--focus-border); background: var(--surface-2); }
.c-glist__num { font-family: var(--font-display); font-size: 12px; font-weight: var(--weight-extra); color: var(--brand-violet-700); background: var(--brand-violet-50); border-radius: 7px; padding: 5px 9px; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.c-glist__label { font-size: 14.5px; font-weight: var(--weight-semibold); color: var(--ink-900); flex: 1; }
.c-glist__arrow { color: var(--ink-300); font-size: 15px; }
/* Draft / unresolved page — shown but not navigable (broken-link policy) */
.c-glist__row--unresolved { border-style: dashed; background: var(--surface-2); cursor: default; }
.c-glist__row--unresolved:hover { border-color: var(--line); background: var(--surface-2); }
.c-glist__row--unresolved .c-glist__num { color: var(--ink-300); background: var(--fill-muted); }
.c-glist__row--unresolved .c-glist__label { color: var(--ink-500); font-weight: var(--weight-regular); }
.c-glist__hint { font-size: 11px; color: var(--ink-300); }

/* ---------- Key Driver Library index (grouped by dimension) ---------- */
.c-kdgroups { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin: 4px 0 6px; align-items: start; }
.c-kdgroup  { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); }
.c-kdgroup__head { padding: 14px 16px; }
.c-kdgroup__head--cause      { background: var(--grad-cause); }
.c-kdgroup__head--capability { background: var(--grad-capability); }
.c-kdgroup__head--culture    { background: var(--grad-culture); }
.c-kdgroup__name { font-family: var(--font-display); font-weight: var(--weight-extra); font-size: 15px; color: #fff; letter-spacing: .03em; }
.c-kdgroup__aspiration { font-size: 12px; color: rgba(255,255,255,.82); margin-top: 2px; }
.c-kdgroup__body { padding: 6px; }
.c-kdgroup__driver { display: flex; align-items: baseline; gap: 9px; padding: 9px 10px; border-radius: 8px; text-decoration: none; cursor: pointer; color: var(--ink-700); }
.c-kdgroup__driver:hover { background: var(--brand-violet-50); color: #4A2FB0; }
.c-kdgroup__driver-num { font-family: var(--font-display); font-size: 11.5px; font-weight: var(--weight-extra); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.c-kdgroup--cause      .c-kdgroup__driver-num { color: #7440D6; }
.c-kdgroup--capability .c-kdgroup__driver-num { color: #A93BC8; }
.c-kdgroup--culture    .c-kdgroup__driver-num { color: var(--brand-magenta); }
.c-kdgroup__driver-name { font-size: 13.5px; font-weight: var(--weight-semibold); line-height: 1.35; }

/* ---------- Driver page header (dimension chip + aspiration) ---------- */
.c-driver__tags { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.c-driver__dim  { font-family: var(--font-display); font-size: 11px; font-weight: var(--weight-extra); text-transform: uppercase; letter-spacing: .06em; color: #fff; border-radius: var(--radius-pill); padding: 5px 13px; }
.c-driver__dim--cause      { background: var(--grad-cause); }
.c-driver__dim--capability { background: var(--grad-capability); }
.c-driver__dim--culture    { background: var(--grad-culture); }
.c-driver__ref  { font-size: 12.5px; color: var(--ink-500); font-variant-numeric: tabular-nums; }
.c-driver__aspiration { background: var(--brand-violet-50); border: 1px solid var(--brand-violet-100); border-radius: 10px; padding: 13px 16px; margin-bottom: 8px; }
.c-driver__aspiration-label { font-size: 11px; font-weight: var(--weight-extra); text-transform: uppercase; letter-spacing: .05em; color: var(--brand-violet-700); }
.c-driver__aspiration p { margin: 5px 0 0; color: var(--ink-700); font-size: 14.5px; }
.c-driver__links { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.c-driver__link  { font-size: 12.5px; font-weight: var(--weight-semibold); color: var(--brand-violet-700); background: var(--brand-violet-50); border: 1px solid var(--brand-violet-100); border-radius: var(--radius-pill); padding: 6px 13px; text-decoration: none; cursor: pointer; }
.c-driver__link:hover { border-color: var(--focus-border); }

/* ---------- On-this-page (right rail) ---------- */
.c-toc__label { font-size: 10.5px; font-weight: var(--weight-extra); text-transform: uppercase; letter-spacing: .07em; color: var(--ink-500); margin: 6px 0 12px; }
.c-toc__list  { display: flex; flex-direction: column; gap: 2px; border-left: 1px solid var(--line); padding-left: 2px; }
.c-toc__link  { font-size: 12.5px; color: var(--ink-500); text-decoration: none; padding: 5px 12px; border-left: 2px solid transparent; margin-left: -1px; }
.c-toc__link:hover { color: #4A2FB0; }
.c-toc__link--active { color: #4A2FB0; font-weight: var(--weight-semibold); border-left-color: var(--brand-violet); }

/* ---------- Focus-visible additions (a11y) ---------- */
.c-gnav__sec:focus-visible, .c-gnav__page:focus-visible, .c-gcard:focus-visible,
.c-glist__row:focus-visible, .c-kdgroup__driver:focus-visible, .c-toc__link:focus-visible {
  outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm);
}

/* ============================================================
   Guides admin — content ingestion
   The platform-admin "Guides" module: an in-browser zip upload that replaces a
   guide's published content, non-blocking validation, a structural preview, and
   version history with restore/delete. A 3-step wizard (Upload -> Review -> Publish).

   Reuses UNCHANGED: c-appbar--admin, c-tabs, c-pagehead, c-breadcrumb,
   c-tablecard/c-table(+__primary/__sub/__num/__actions), c-badge(+--positive/--neutral/
   --warning/--brand/--sm)+c-dot, c-stat, c-btn, c-iconbtn, c-overlay/c-modal(+--warn/
   --danger), c-toast, c-empty, c-tree (structure preview), c-field/c-select/c-check,
   c-toolbar, c-alert. The guides INDEX is a plain c-table.
   ============================================================ */

/* ---------- Progress bar (reusable primitive) ----------
   Used by the upload/parse step; general enough for any determinate progress. */
.c-progress { height: 8px; border-radius: var(--radius-pill); background: var(--track); overflow: hidden; }
.c-progress__fill { height: 100%; border-radius: var(--radius-pill); background: var(--brand-gradient); transition: width var(--t); }
.c-progress--sm { height: 6px; }

/* ---------- Upload drop-zone ----------
   The upload target in wizard step 1. `--over` = drag-hover state (JS toggles it on
   dragenter/dragover, off on dragleave/drop). Wraps a hidden <input type="file"> +
   the whole zone is the click/drop target, and the hidden input is the keyboard path. */
.c-dropzone { border: 2px dashed var(--focus-border); border-radius: var(--radius-lg); background: var(--brand-violet-50); padding: 34px 24px; text-align: center; transition: border-color var(--t), background var(--t); }
.c-dropzone--over { border-color: var(--brand-violet); background: #F1E9FE; }
.c-dropzone__icon { width: 52px; height: 52px; border-radius: var(--radius-lg); background: var(--brand-gradient); color: #fff; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
.c-dropzone__icon svg { width: 26px; height: 26px; }
.c-dropzone__title { font-family: var(--font-display); font-weight: var(--weight-extra); font-size: 16px; color: var(--ink-900); }
.c-dropzone__sub { font-size: 13px; color: var(--ink-500); margin: 5px 0 0; }
.c-dropzone__hint { font-size: 11.5px; color: var(--ink-500); margin-top: 12px; }

/* ---------- Wizard step indicator ----------
   Three states per step: --done (green tick), --current (gradient), --todo (muted).
   Renders as a horizontal row: marker, label, connector bar, ... */
.c-steps { display: flex; align-items: center; gap: 0; margin-bottom: 22px; }
.c-step { display: flex; align-items: center; gap: 9px; }
.c-step__marker { width: 26px; height: 26px; border-radius: var(--radius-pill); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 12px; font-weight: var(--weight-bold); flex-shrink: 0; }
.c-step__marker svg { width: 14px; height: 14px; }
.c-step__label { font-size: 13px; font-weight: var(--weight-semibold); color: var(--ink-900); }
.c-step__bar { width: 52px; height: 2px; background: var(--line); margin: 0 12px; }
.c-step--done .c-step__marker { background: var(--state-positive); color: #fff; }
.c-step--current .c-step__marker { background: var(--brand-gradient); color: #fff; }
.c-step--todo .c-step__marker { background: var(--track); color: var(--ink-500); }
.c-step--todo .c-step__label { color: var(--ink-500); }

/* ---------- Validation summary (non-blocking warnings) ----------
   Distinct from c-callout (authored CONTENT) and c-alert (transient SYSTEM state):
   c-vwarn is a REVIEW panel listing what the parser found but did NOT block on
   (unresolved links, missing titles, duplicate sort-numbers, unknown callouts).
   `--error` flips the whole panel to the negative set for a HARD STOP (unreadable
   zip / unexpected contents) — same structure, publish is blocked. */
.c-vwarn { display: flex; gap: 12px; padding: 13px 16px; border-radius: var(--radius-md); background: var(--state-warning-soft); border: 1px solid var(--state-warning-border); }
.c-vwarn__icon { color: var(--state-warning-text); flex-shrink: 0; margin-top: 1px; }
.c-vwarn__icon svg { width: 18px; height: 18px; }
.c-vwarn__body { flex: 1; min-width: 0; }
.c-vwarn__label { font-family: var(--font-display); font-size: 11px; font-weight: var(--weight-extra); letter-spacing: .05em; text-transform: uppercase; color: var(--state-warning-text); margin-bottom: 6px; }
.c-vwarn__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.c-vwarn__item { display: flex; gap: 9px; font-size: 12.5px; color: var(--ink-500); line-height: 1.45; }
.c-vwarn__item b { color: var(--ink-900); font-weight: var(--weight-semibold); }
.c-vwarn__tag { flex-shrink: 0; font-size: 10px; font-weight: var(--weight-bold); letter-spacing: .03em; text-transform: uppercase; color: var(--state-warning-text); background: rgba(154,107,22,.14); border-radius: 5px; padding: 2px 6px; height: 18px; line-height: 14px; }
/* Hard-stop variant — publish blocked */
.c-vwarn--error { background: var(--state-negative-soft); border-color: var(--state-negative-border); }
.c-vwarn--error .c-vwarn__icon, .c-vwarn--error .c-vwarn__label { color: var(--state-negative-text); }
.c-vwarn--error .c-vwarn__item { color: var(--state-negative-text); }
.c-vwarn--error .c-vwarn__tag { color: var(--state-negative-text); background: rgba(178,58,46,.12); }

/* ---------- Multi-line text field ----------
   Companion to c-input (single-line) for the optional publish note. Same border/focus
   language, taller, top-aligned. */
.c-textarea { width: 100%; border: 1.5px solid var(--line); border-radius: 10px; padding: 10px 13px; background: var(--surface-2); font-family: var(--font-body); font-size: 14px; line-height: 1.5; color: var(--ink-900); resize: vertical; min-height: 62px; }
.c-textarea::placeholder { color: var(--ink-300); }
.c-textarea:focus { outline: none; border-color: var(--focus-border); box-shadow: var(--focus-ring); background: var(--surface); }

/* ---------- Focus-visible (a11y) ----------
   The drop-zone's file input is visually hidden, so the zone itself carries the indicator: without
   this the input took focus with nothing on screen to show it. */
.c-textarea:focus-visible { outline: none; }
.c-dropzone:focus-within { outline: none; border-color: var(--brand-violet); box-shadow: var(--focus-ring); }

/* Submitted: the zone is inert while the server parses the upload. */
.c-dropzone--busy { opacity: .6; pointer-events: none; }

/* ---------- Inline spinner ----------
   Indeterminate activity on a control that has started work and is waiting on the server. Sized to sit
   inline with button text and inherits currentColor, so it works on any button variant. */
.c-spinner { width: 13px; height: 13px; border-radius: var(--radius-pill); border: 2px solid currentColor; border-top-color: transparent; animation: c-spin .6s linear infinite; flex-shrink: 0; }
@keyframes c-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .c-spinner { animation-duration: 2.4s; } }


/* ============================================================
   Reporting refinements
   Uses --score-mid (5-band score scale) and --brand-magenta-50 from
   compass-tokens.css.
   ============================================================ */

/* --- (1) FIVE-BAND SCORE SCALE ----------
   The reporting score scale gains a 5th band (Band 3 · 6.0–6.9 · --score-mid).
   Adds the --mid modifier to the two score-bucket families; the ramp + tokens live in
   compass-tokens.css. The password-strength meter is deliberately NOT extended — it stays a
   4-tier meter (low/watch/good/strong), unrelated to the reporting score bands.
   Canonical c-heatkey legend order + labels (five .c-heatkey__item swatches, left→right):
     low "< 5.0" · watch "5.0–5.9" · mid "6.0–6.9" · good "7.0–7.9" · strong "8.0+". */
.c-heat--mid { background: var(--score-mid); }
.c-bar__fill--mid { background: var(--score-mid); }

/* --- (2) CENTRE-ALIGNED OUTCOME BOXES (change to existing c-outcome) ----------
   The Employee-outcome / X-Factor boxes read centred, not left-aligned. Overrides the two
   earlier rules (appended so it wins without mutating the originals above). Markup unchanged. */
.c-outcome__item { align-items: center; text-align: center; }
.c-outcome__fig  { justify-content: center; }

/* --- (3) CLICKABLE KEY-DRIVER ROW — expand-in-place (Key Driver Results ONLY) ----------
   The driver roll-up row (c-qgroup) becomes clickable to reveal its question rows inline.
   Scoped to a --toggle modifier so Survey Questions (question rows always shown) keeps the plain,
   non-interactive c-qgroup. The build owns the Alpine toggle; these are the visual states:
     default → hover (row highlight + pointer) → open (caret rotates 90°, row tint holds).
   The caret is an inline chevron-right c-icon placed first inside c-qgroup__label (build renders it). */
.c-qgroup--toggle td { cursor: pointer; }
.c-qgroup--toggle:hover td { background: var(--brand-violet-50); }
.c-qgroup__caret { width: 16px; height: 16px; flex-shrink: 0; align-self: center; color: var(--ink-500); transition: transform var(--t); }
.c-qgroup--toggle:hover .c-qgroup__caret { color: var(--brand-violet-700); }
.c-qgroup--open td { background: var(--brand-violet-50); }
.c-qgroup--open .c-qgroup__caret { transform: rotate(90deg); color: var(--brand-violet-700); }
/* Nested question rows, revealed under an expanded driver. A distinct indented "child" treatment:
   white surface (a step lighter than the driver's surface-2), an indent, and a violet nesting rail
   down the first cell so the group reads as owned by the driver above. The question cells reuse
   c-qnum / c-qtext / c-heat / c-sent verbatim (the Survey-Questions row look, indented). */
.c-qchild td { background: var(--surface); }
/* The cell selector is `.c-qchild td.c-qchild__cell` and the indent 58px. A plain `.c-qchild__cell`
   (0,1,0) loses to `.c-table--compact td` (0,1,1), so a 42px indent never applies — the rail cuts
   through the text and the children read outdented. The raised selector wins, and 58px aligns the
   question text under the driver name in the compact table. */
.c-qchild td.c-qchild__cell { position: relative; padding-left: 58px; }
.c-qchild td.c-qchild__cell::before { content: ""; position: absolute; left: 34px; top: 0; bottom: 0; width: 2px; background: var(--brand-violet-100); }
.c-qchild--last td { border-bottom: 1px solid var(--line); }

/* --- (4) PARTICIPATION STAT CARDS ----------
   The Overview participation band moves from plain c-kpi cards to the richer stat card —
   REUSING the existing c-stat (icon tile + label + value + meta/sub-caption) rather than adding a
   near-duplicate block. The only new CSS is three icon-tile tint modifiers so the trio reads as the
   brand family (people / message / target). The "Participation" section header reuses c-section-head
   unchanged. Slots: c-stat > c-stat__icon(--indigo|--violet|--magenta) + c-stat__label + c-stat__value
   + c-stat__meta (the sub-caption). */
.c-stat__icon--indigo  { background: var(--state-info-soft);  color: var(--brand-indigo); }
.c-stat__icon--violet  { background: var(--brand-violet-50);  color: var(--brand-violet); }   /* = default, explicit */
.c-stat__icon--magenta { background: var(--brand-magenta-50); color: var(--brand-magenta); }


/* ============================================================
   Participation placement
   The participation figures sit INLINE on the work-area (scope) row so they read as a
   property of the selected work area; the filter-dependent "responses in scope" count
   sits in a dedicated status-line row that renders only when scope is narrower than the
   whole org.

   TWO TIERS, KEPT DISTINCT
     A · Participation (.c-partstrip) — invited / completed / response rate. Reflect the
         SELECTED WORK AREA only; demographic filters never move them.
     B · Responses in scope (.c-scopeline) — the live population after work area + filters.
         Renders ONLY when ≥1 demographic filter is applied. Narrowing the work area alone
         does NOT show it (the participation strip already reflects the selected work area).

   Applies to: Overview · Survey Questions · Demographics (org-top only; no filter row).
   Not used on: Key Driver Results.
   ============================================================ */

/* --- (A) INLINE PARTICIPATION FIGURE STRIP ----------
   Sits on the work-area row (right of the c-workarea pill, after a c-filterbar__spacer).
   A compact right-aligned run of figures with hairline separators. Response rate reuses the
   positive tint (matches the KPI band it replaces). */
.c-partstrip { display: inline-flex; align-items: center; gap: 20px; }
.c-partstat { display: flex; flex-direction: column; gap: 1px; text-align: right; }
.c-partstat__value { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: 19px; line-height: 1.05; color: var(--ink-900); font-variant-numeric: tabular-nums; }
.c-partstat__value--positive { color: var(--state-positive); }
.c-partstat__label { font-size: 10.5px; font-weight: var(--weight-bold); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-500); }
.c-partstrip__sep { width: 1px; height: 30px; background: var(--line); flex-shrink: 0; }
/* Narrow viewport: strip wraps under the pill and left-aligns rather than crowding it. */
@media (max-width: 720px) {
  .c-partstrip { gap: 14px; }
  .c-partstat { text-align: left; }
}

/* --- (B) RESPONSES-IN-SCOPE STATUS LINE ----------
   A full-width band appended as the LAST child of the c-filterbar column (below the filter
   row). Renders ONLY when ≥1 demographic filter is applied (NOT on work-area drill-in alone).
   Reuses the violet fill/border/text of the applied-filter
   family so it reads as "the current cut". Applied-filter c-token chips sit on the right. */
.c-scopeline { display: flex; align-items: center; gap: 10px; padding: 11px 18px; flex-wrap: wrap;
  background: var(--brand-violet-50); border-top: 1px solid var(--brand-violet-100);
  font-size: 12.5px; font-weight: var(--weight-semibold); color: var(--brand-violet-700); }
.c-scopeline__ico { display: inline-flex; color: var(--brand-violet); }
.c-scopeline__ico .c-icon { width: 15px; height: 15px; }
.c-scopeline__n { font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }
.c-scopeline__desc { color: var(--ink-500); font-weight: var(--weight-medium); }
.c-scopeline__spacer { flex: 1; }
/* When the status line is the last row of the rounded filterbar column, round its bottom
   corners to match the container. (c-filterbar already clips overflow in these views.) */
.c-filterbar > .c-scopeline:last-child { border-bottom-left-radius: var(--radius-lg); border-bottom-right-radius: var(--radius-lg); }


/* ============================================================
   Demographics updates
   (1) Fix: coloured dimension bands flash grey on hover.
   (2) Add: a wide-canvas page modifier for the "Variance by Business Unit" screen.
   ============================================================ */

/* --- (1) DIMENSION-BAND HOVER FIX ----------
   Root cause: the data-row hover rule `.c-vtable tbody tr:hover td { background: var(--surface-2) }`
   (specificity 0,2,3) repaints EVERY td in the hovered row — including the gradient band rows
   (`tr.c-vgroup.c-vg--*`, whose `.c-vg--cause td { background: var(--grad-cause) }` is only 0,1,1),
   so on hover the gradient is overwritten by --surface-2 and the band "goes grey / white".

   The bands are section headers, not data rows — hovering one should do nothing. These rules
   re-assert each band's gradient on hover at a higher specificity (0,3,3 > the 0,2,3 data-row
   rule AND the 0,3,2 sticky-first-column hover rule), so the band is a visual no-op on hover.
   The genuine data-row hover (--surface-2) is left untouched. Works against the two-line band
   restructure (CAUSE · WHY ARE WE HERE? + statement) — background only. */
.c-vtable tbody tr.c-vg--cause:hover td      { background: var(--grad-cause); }
.c-vtable tbody tr.c-vg--capability:hover td { background: var(--grad-capability); }
.c-vtable tbody tr.c-vg--culture:hover td    { background: var(--grad-culture); }
.c-vtable tbody tr.c-vg--outcomes:hover td   { background: var(--brand-gradient); }
/* Bands are not interactive rows — no pointer affordance. */
.c-vtable tbody tr.c-vgroup:hover td { cursor: default; }

/* --- (2) WIDE-CANVAS PAGE MODIFIER ----------
   The "Variance by Business Unit" matrix has one column per business unit (15–30+), grouped by
   directorate. On the standard 1320px page it shows ~5 columns and hides the rest behind the
   internal `.c-vmatrix__scroll` scrollbar, which reads as broken. This modifier lets a single
   screen opt into a wider content column so more columns are visible before scrolling — a wider
   cap with viewport gutters, NOT literal edge-to-edge 100vw. Opt-in per screen (add alongside
   `c-page`); every other view keeps the standard 1320px `.c-page`. The app bar + tabs are already
   full-bleed, so only the content column widens. `.c-vmatrix__scroll` stays the graceful fallback
   for councils that exceed even this cap.

   Responsive: below ~1440px the wide cap yields to the viewport (fills available width, gutters
   from the existing side padding), so it collapses gracefully back toward the standard page on
   laptops / tablets — nothing overflows the viewport. */
.c-page--wide { max-width: min(96vw, 1920px); }
@media (max-width: 1440px) { .c-page--wide { max-width: 100%; } }


/* ============================================================
   Dimension-head wrap
   Fix: the dimension-head aspiration statement (.c-dimhead__asp) wraps to three lines
   while horizontal space is clearly available before the right-hand score block.

   Root cause: the statement was capped at max-width:820px, but .c-dimhead is
   display:flex; justify-content:space-between and far wider — on a 1320px page the left
   text block has ~1000px+ before the score, so the 820px cap forces an early wrap and a gap.

   Fix: raise the cap to 1040px. Still a cap (keeps a comfortable gutter to the score column
   and stops the longest statement from crowding it) but lets the widest aspiration line use
   the available width and wrap only near the score. .c-dimhead__id is full-width and
   unaffected. Same head is used by every Survey Questions dimension panel incl. the X-Factor
   panel — verified on the widest statement (Advocacy / X-Factors). Re-declares the existing
   rule later in the cascade (same specificity, later wins); no existing rule edited. */
.c-dimhead__asp { max-width: 1040px; }


/* ============================================================
   Locked work-area selector (add-on gate)
   When the org-unit / work-area selector is gated, the viewer is locked to the
   "All org units" aggregate. `.c-workarea--locked` gives the pill an inert,
   clearly-gated look — the access gate itself is enforced server-side.

   DESIGN CALL — KEEP THE BRAND GRADIENT (present-and-vivid), NOT a muted/greyed pill.
   The gradient is retained so the locked pill reads as an unlockable feature rather
   than a dead disabled control. The lock state is carried by a white padlock, an amber
   "Add-on" chip (popped against the violet), an inert cursor, and the tooltip.

   Composes existing tokens only: --brand-gradient (kept from the base pill),
   --state-warning-soft / --state-warning-text (the amber "Add-on" chip — the same
   warning-amber pair as .c-badge--warning), --radius-pill (chip). The white padlock
   inherits the pill's #fff.

   Accessibility — NOT colour-dependent; the padlock carries the meaning. The pill stays
   a FOCUSABLE <button aria-disabled> (NOT the `disabled` attribute) so keyboard users
   can reach it and read the tooltip; aria-disabled exposes the state and title /
   aria-label carry the reason. */

/* Locked / add-on-gated work-area pill — keeps the base .c-workarea brand gradient; the
   modifier only makes it inert. Declared after the base rules (same specificity, later
   wins) so `cursor` overrides the base pointer without editing the base rule. */
.c-workarea--locked { cursor: not-allowed; }
.c-workarea--locked:hover { filter: none; }   /* no hover / press affordance */

/* Padlock cue — sits on the gradient, so it inherits the pill's #fff (13px glyph, same
   sizing as .c-tree__lockbox). */
.c-workarea__lock { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.c-workarea__lock .c-icon { width: 13px; height: 13px; }

/* Amber "Add-on" upsell chip — the .c-level recipe (uppercase 10px bold, --radius-pill)
   in the warning-amber tokens so it pops against the violet gradient as an unlock cue. */
.c-workarea__addon { display: inline-flex; align-items: center; font-size: 10px; font-weight: var(--weight-bold); letter-spacing: .05em; text-transform: uppercase; padding: 2px 7px; border-radius: var(--radius-pill); background: var(--state-warning-soft); color: var(--state-warning-text); white-space: nowrap; }

/* ============================================================
   Activity / audit timeline
   The timeline renders in TWO places:
     1. Full paginated history — roomier, NON-linked rows, category-glyph-led
        (the row is about WHAT happened).
     2. Compact "Recent activity" feed — tight, LINKED rows, actor-avatar-led
        (a who's-been-active feed). `--compact`.

   DESIGN CALLS:
   • Leading marker — the full tab leads with a category-tinted glyph tile
     (.c-timeline__icon, actor on the meta line); the compact feed leads with the
     actor avatar (.c-avatar--sm). One component, marker swapped per variant.
   • Summary is rendered VERBATIM (render-as-is), no name bolding.
   • Pagination — the tab uses a full-width "Show older activity" button
     (.c-timeline__more) rather than numbered .c-pagination: cleaner for a
     reverse-chron feed with no meaningful page targets.
   • Category tint set — Authentication = info blue, Account = brand violet,
     Entitlement = positive green, Impersonation = amber. A failure outcome
     OVERRIDES the category tint with danger red. Never colour-only: the glyph +
     the Summary words always carry the meaning.

   Composes existing tokens only. Empty state = the existing .c-empty; loading =
   the existing .c-skeleton shimmer.

   Accessibility: semantic <ol>/<li>; <time datetime> + absolute-time title; the
   __icon svg is aria-hidden (meaning is in the Summary + meta words, never colour);
   compact rows are <a> with a discernible name (the Summary) and focus-visible. */

/* Container + row -------------------------------------------------------------- */
.c-timeline { list-style: none; margin: 0; padding: 0; }
.c-timeline__item { position: relative; }
/* Connector rail — a hairline dropping from each marker to the next (full variant only;
   the marker's opaque tile caps its top, so it reads as a continuous spine). 17px = the
   34px marker's horizontal centre. Suppressed on the last row and in the compact feed. */
.c-timeline:not(.c-timeline--compact) .c-timeline__item:not(:last-child)::before {
  content: ""; position: absolute; left: 17px; top: 34px; bottom: -2px; width: 2px;
  transform: translateX(-1px); background: var(--line);
}
.c-timeline__row { display: flex; align-items: flex-start; gap: 13px; padding: 12px 0; }

/* Leading marker — category glyph tile (full) or actor avatar (compact, via .c-avatar--sm) */
.c-timeline__icon {
  width: 34px; height: 34px; border-radius: var(--radius-sm); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-violet-50); color: var(--brand-violet-700);
}
.c-timeline__icon .c-icon { width: 17px; height: 17px; }
.c-timeline__icon--auth         { background: var(--state-info-soft);     color: var(--state-info); }
.c-timeline__icon--account      { background: var(--brand-violet-50);     color: var(--brand-violet-700); }
.c-timeline__icon--entitlement  { background: var(--state-positive-soft); color: var(--state-positive); }
.c-timeline__icon--impersonation{ background: var(--state-warning-soft);  color: var(--state-warning-text); }
/* Outcome=Failure — danger override, applied ON TOP of the category modifier. Restrained
   (a log, not an alert): only the tile tint shifts; the row layout is unchanged. */
.c-timeline__icon--failure      { background: var(--state-negative-soft); color: var(--state-negative); }

/* Body — verbatim Summary + a muted actor · context meta line */
.c-timeline__body { min-width: 0; flex: 1; }
.c-timeline__summary { font-size: 13.5px; line-height: 1.45; color: var(--ink-900); text-wrap: pretty; }
.c-timeline__meta { margin-top: 2px; font-size: 12.5px; line-height: 1.4; color: var(--ink-500); }
.c-timeline__meta .c-timeline__actor { color: var(--ink-500); font-weight: var(--weight-semibold); }

/* Time — right-aligned relative string; absolute time in the <time title> */
.c-timeline__time { flex-shrink: 0; font-size: 12px; color: var(--ink-500); white-space: nowrap; font-variant-numeric: tabular-nums; padding-top: 1px; }

/* Compact modifier — dashboard feed: avatar-led, tight, whole row is a link ---------- */
.c-timeline--compact .c-timeline__row {
  gap: 11px; padding: 8px 10px; border-radius: var(--radius-sm);
  text-decoration: none; color: inherit; transition: background .12s ease;
}
a.c-timeline__row:hover { background: var(--surface-2); }
a.c-timeline__row:focus-visible { outline: 2px solid var(--focus-border); outline-offset: 1px; }
.c-timeline--compact .c-timeline__summary { font-size: 13px; }
.c-timeline--compact .c-timeline__meta { font-size: 12px; }
.c-timeline--compact .c-timeline__item + .c-timeline__item { border-top: 1px solid var(--line-soft); }

/* "Show older activity" — full-width secondary; htmx swaps in the next page (full tab) */
.c-timeline__more { width: 100%; margin-top: 4px; justify-content: center; }

/* ============================================================
   Viewport-fit popover + toolbar head + dense picker rows
   A dropdown must never exceed the viewport. `.c-pop--fit` turns the popover into
   a flex column capped to the viewport, so the head (and footer, if any) are pinned
   and ONLY `.c-pop__list` scrolls — the primary action can't be pushed below the
   fold. Opt-in: added to the work-area picker only for now (the demographic chip
   popovers keep their footers; add `--fit` there too if they ever overrun likewise).

   `.c-pop__bar` / `.c-pop__lead` give a one-row toolbar head — a bold label + search
   + primary action on a single line, so the popover opens with the action already
   visible and needs no footer. `.c-tree--dense` trims picker-row padding so more
   units fit before scrolling.

   Composes existing tokens only (--font-display / --weight-bold / --ink-900).
   ============================================================ */

/* Viewport-fit popover — head (and footer, if present) pinned; list scrolls
   internally. Declared after the `.c-pop--wide .c-pop__list` rule (equal
   specificity) so max-height:none wins for a --fit popover. */
.c-pop--fit { display: flex; flex-direction: column; max-height: min(560px, calc(100vh - 140px)); }
.c-pop--fit .c-pop__head { flex: 0 0 auto; }
.c-pop--fit .c-pop__list { flex: 1 1 auto; min-height: 0; max-height: none; }
.c-pop--fit .c-pop__foot { flex: 0 0 auto; }

/* One-row toolbar head — bold label + search + primary action on a single line. */
.c-pop__bar  { display: flex; align-items: center; gap: 12px; }
.c-pop__lead { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: 14px; color: var(--ink-900); flex-shrink: 0; }

/* Dense picker rows — opt-in on the tree; tightens row padding + label/meta + section gap. */
.c-tree--dense.c-tree--pick .c-tree__row { padding-top: 5px; padding-bottom: 5px; }
.c-tree--dense .c-tree__main { gap: 1px; }
.c-tree--dense .c-pop__sep { padding-top: 7px; padding-bottom: 4px; }

/* Button text optical centring — the display face seats the cap-height low in a
   fixed-height flex button; line-height:1 re-centres it. Re-declared later in the
   cascade (same specificity, later wins); the base .c-btn rule is not edited. */
.c-btn { line-height: 1; }

/* ---------- Variance table: fit width ----------
   A third width mode for .c-vtable, for a matrix (Business Unit) that has one column
   per segment and sits on the wide canvas (.c-page--wide). The base table is fixed-
   width and cannot fill that canvas, so at a middling column count it leaves a gutter
   on the right. --fit makes the table track the available width instead:
     - fills the canvas (width:100%), segment columns growing past their 90px floor up
       to a 160px cap;
     - beyond the cap the table stops growing and margin-inline:auto centres it, so any
       leftover space reads as symmetric margin, not a one-sided gap;
     - below the min-width it overflows and .c-vmatrix__scroll takes over, columns pinned
       at the 90px floor — the same scroll fallback as the base table.
   --vcols is the rendered column count, set inline by the view; it is REQUIRED with
   --fit (the bounds are computed from it). The 999 fallback is defensive: if --fit ever
   ships without --vcols the table degrades to scroll rather than collapsing to the frozen
   columns. Base type sizes are kept (no --fill header bump) so the columns read the same
   at the floor and at the cap. Declared after .c-vtable / .c-vtable--fill so it wins at
   equal specificity; no existing rule is edited. */
.c-vtable--fit {
  width: 100%;
  min-width: calc(216px + 80px + var(--vcols, 999) * 90px);   /* 296px frozen cols + 90px floor/seg → scroll past this */
  max-width: calc(216px + 80px + var(--vcols, 999) * 160px);  /* segments stop growing at 160px → table centres beyond this */
  margin-inline: auto;                                        /* symmetric gutters when capped; 0 once it scrolls */
}
.c-vtable--fit .c-vc--seg { width: auto; min-width: 90px; max-width: none; }

/* Popover opened above its trigger (used when the space below the trigger is tight; the
   top/bottom anchor swap is set inline on the trigger wrapper). Mirrors --shadow-md upward
   so the panel reads as floating above the trigger — same blur/spread/colour, y-offset
   negated. Additive: the base .c-pop and .c-pop--fit are unchanged. */
.c-pop--up { box-shadow: 0 -8px 24px -10px rgba(40, 30, 90, .18); }

/* ---------- Segmented single-select: option counts ----------
   Extends .c-seg. The set reads as ONE control, so the count sits inside its segment
   rather than beside it: a neutral outlined pill at rest, translucent white against the
   gradient of the active segment. A zero reads quietly without a separate state. */
.c-seg__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink-500);
  font-size: 10.5px;
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}
.c-seg__btn--active .c-seg__n {
  background: rgba(255, 255, 255, .22);
  border-color: transparent;
  color: #fff;
}

/* ---------- Scope cell: chips stay on one line ----------
   A nowrap flex row, so a cell holding several chips cannot stack them and drive the row
   height. Chips clamp at 280px and ellipsise — a 35-char unit name plus its level and a
   sub-units suffix exceeds that — so every chip needs a title carrying the full string.
   The count of chips shown is a view-model decision, not a CSS one. */
.c-scopecell {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex-wrap: nowrap;
}
.c-scopecell .c-token {
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.c-scopecell__more {
  font-size: 12px;
  color: var(--ink-500);
  white-space: nowrap;
}

/* ---------- Inherited entitlement: a statement, not a control ----------
   Sits in the ON position with a dashed neutral track and a muted label, and is rendered
   as a non-interactive element: it describes what the default currently gives, not
   something a person chose. Once the set is made explicit these become ordinary
   .c-switch--on. The thumb offset matches .c-switch--on so the two align. */
.c-switch--inherited {
  cursor: default;
  color: var(--ink-500);
}
.c-switch--inherited .c-switch__track {
  background: var(--track);
  border: 1.5px dashed var(--check-border);
}
.c-switch--inherited .c-switch__thumb {
  left: 18px;
  background: var(--surface);
  box-shadow: none;
}

/* ---------- Scope chip: a block box, so the clamp above can ellipsise ----------
   text-overflow has no effect on a flex container and .c-token is inline-flex, so the
   max-width/overflow/ellipsis rule cut long chips mid-word with no ellipsis, and the
   token's gap pushed the chip's own text nodes apart. Safe here: scope chips carry no
   icon and no remove button, so nothing needs the flex layout. */
.c-scopecell .c-token {
  display: block;
}

/* ---------- Card head that LEADS a group of rows ----------
   For a head that owns the rows beneath it (rather than labelling a panel): tinted,
   taller, display-face title, so it reads one level up from an ordinary card title. */
.c-card__head--lead {
  background: var(--surface-2);
  border-bottom-color: var(--line);
  padding-top: 18px;
  padding-bottom: 18px;
}
.c-card__head--lead .c-card__title {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--weight-bold);
}

/* ============================================================
   Context path — "where am I", at the left of the portal app bar
   ------------------------------------------------------------
   One nested address, read broad to narrow:

       organisation  /  program  /  ● round

   A segment is a CONTROL when it has somewhere to go and STATIC TEXT when it
   does not; the caret is the only difference. The path never changes shape
   between cardinalities, so a segment reads as a label first and a control
   second. A single option is a plain label, never a disabled button.

   The middle segment is static text while there is one service; it is the
   reserved slot for a service launcher.

   --leaf, not --round: the modifier marks the END of the path, whatever the
   last segment happens to be. Labels are free text up to 50 characters, so
   __label caps its width, ellipsises and carries a `title`; nothing here is
   named after a year, and ordering is a caller concern (date fields, never
   label text).

   Markup (wrap any switching segment in .c-menu-anchor):

     <nav class="c-ctx" aria-label="Where you are">
       <span class="c-ctx__seg c-ctx__seg--static"><span class="c-ctx__label">Org</span></span>
       <span class="c-ctx__sep" aria-hidden="true">/</span>
       <div class="c-menu-anchor">
         <button type="button" class="c-ctx__seg c-ctx__seg--leaf" aria-haspopup="menu">
           <span class="c-ctx__dot"></span>
           <span class="c-ctx__label" title="…">…</span>
           <svg class="c-icon c-ctx__caret" …></svg>
         </button>
         <div class="c-menu c-menu--pop c-menu--left c-menu--wide" role="menu">…</div>
       </div>
     </nav>
   ============================================================ */
.c-ctx { display: flex; align-items: center; gap: 1px; min-width: 0; }
.c-ctx__seg {
  display: flex; align-items: center; gap: 7px; min-width: 0;
  height: 34px; padding: 0 10px; border-radius: 9px;
  background: none; border: none; font: inherit;
  font-size: 13.5px; font-weight: var(--weight-semibold);
  color: var(--ink-900); text-decoration: none; cursor: pointer;
}
.c-ctx__seg:hover { background: var(--fill-muted); }
.c-ctx__seg[aria-expanded="true"] { background: var(--brand-violet-50); color: var(--brand-violet-700); }
.c-ctx__seg--static, .c-ctx__seg--static:hover { cursor: default; background: none; }
.c-ctx__seg--leaf .c-ctx__label { font-weight: var(--weight-bold); color: var(--brand-violet-700); }
.c-ctx__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.c-ctx__sep { color: var(--ink-300); flex-shrink: 0; font-size: 13px; }
.c-ctx__caret { color: var(--ink-300); width: 14px; height: 14px; flex-shrink: 0; }
.c-ctx__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--state-positive); flex-shrink: 0; }
.c-ctx__seg:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ---------- Menu additions (general, not portal-specific) ----------
   --left     left-anchored drop, for a trigger at the LEFT of its container
              (--pop is right-anchored, which pushes a wide panel off the left
              edge under an app-bar-left trigger).
   --wide     wider panel — free-text labels WRAP inside the menu; only the
              trigger truncates.
   __lines    a two-line item: __name over __meta.
   __item--current + __tick
              a SELECTED item, not merely a ticked one; the tick sits at the
              far right of a two-line item.
   __note     a muted, non-clickable line at the foot of a menu. */
.c-menu--left { left: 0; right: auto; }
.c-menu--wide { min-width: 320px; }
.c-menu__lines { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.c-menu__item--current { background: var(--brand-violet-50); }
.c-menu__item--current:hover { background: var(--brand-violet-100); }
.c-menu__tick { margin-left: auto; color: var(--brand-violet); flex-shrink: 0; }
.c-menu__note { padding: 7px 11px 9px; font-size: 12px; line-height: 1.45; color: var(--ink-500); }

/* ---------- Card as a single destination ----------
   The whole card is one link; the hover state is the card's own border/shadow. */
.c-card--link { display: block; text-decoration: none; color: inherit; transition: border-color var(--t), box-shadow var(--t); }
.c-card--link:hover { border-color: var(--focus-border); box-shadow: var(--shadow-md); }

/* .c-user__name / .c-user__role carry nowrap + ellipsis but are inline spans
   inside a __meta that is only blockified as a flex item, so without this they
   share one line and text-overflow has no block box to resolve against — which
   also stopped the max-width truncation on .c-user from ever firing. */
.c-user__name, .c-user__role { display: block; }

/* ---------- WCAG AA — non-text muted ink re-asserted after the --ink-500 sweep
   These are marks, not copy: they need 3:1, not 4.5:1, and stay quieter than
   the copy beside them. --ink-400 is the non-text tier only.
   .c-bar__fill is NOT re-asserted here — it carries score-band modifiers at
   equal specificity, so a late base rule would beat all five. Its value is set
   on the base rule itself, above the modifiers. */
.c-search .c-icon { color: var(--ink-400); }
.c-gsearch__icon  { color: var(--ink-400); }
.c-tree__toggle   { color: var(--ink-400); }
.c-qgroup__caret  { color: var(--ink-400); }
.c-menu__item .c-icon { color: var(--ink-400); }
.c-suppress__icon { color: var(--ink-400); }

/* ---------- Interactive perimeters — --line is a surface hairline, not a
   control edge. --control-border passes 3:1 for UI on every light surface.
   .c-pick is NOT listed here — its --on modifier sets border-color at equal
   specificity, so a late base rule would beat it. Set on its base rule above. */
.c-check__box,
.c-check__box--implied { border-color: var(--control-border); }
.c-step__bar      { background: var(--control-border); }

/* Off-state switch: an INSET ring, not a border, so the 38x22 track and the
   2px/18px thumb offsets are untouched. Reads "empty" but has a visible edge. */
.c-switch__track          { background: var(--fill-muted); box-shadow: inset 0 0 0 1.5px var(--control-border); }
.c-switch--on .c-switch__track { background: var(--state-positive); box-shadow: none; }

/* ---------- Wizard step-todo — numeral was 2.55:1 on --track. */
.c-step--todo .c-step__marker { color: var(--ink-700); }

/* ---------- Copy on --ink-300 that carries meaning — moved to --ink-500.
   --ink-300 stays for disabled text and inert separators; further de-emphasis
   is size / weight / case, never a lighter grey. */
.c-textarea::placeholder,
.c-gsearch__input::placeholder { color: var(--ink-500); }
.c-masked            { color: var(--ink-500); }
.c-filterbar__label  { color: var(--ink-500); }

/* ---------- "— optional" qualifier beside a field label. Token-clean class
   so the value is owned here, not inline in the view. */
.c-field__optional { color: var(--ink-500); font-weight: var(--weight-regular); }

/* ---------- One focusable element with its own ring (was 1.83:1). Folds into
   the shared --focus-ring so there is exactly one focus indicator in the system. */
a.c-timeline__row:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }


/* ============================================================
   §7ac — the muted-data tier · the disabled affordance
   Appended AFTER the §7ab block on purpose: two of the promoted
   selectors below are (0,2,0) descendants that win only by
   coming later, and this block re-asserts over §7ab's sweep.
   ============================================================ */

/* ---------- §7ac.1 — Copy on --ink-300 that carries meaning.
   The muted tier is retired as a VALUE and kept as a RELATIONSHIP:
   --ink-500 one legal step under the --ink-700 / --ink-900 beside
   it, plus the size / weight / case tell each already carries
   (10-11.5px, semibold, tabular, letter-spaced, uppercase).
   Measured on each selector's REAL surface — the variance thead is
   --surface-2, not white: 5.26:1. Lowest in the group is 4.99:1
   (.c-glist__row--unresolved .c-glist__num on --fill-muted).
   .c-gnav__page-num is promoted on ONE surface only: the variant
   .c-gnav__page--active .c-gnav__page-num is (0,2,0) and later in
   the file, so the active nav row keeps --brand-violet by design.
   .c-opt--small and .c-tree__row--small are disabled controls and
   so 1.4.3-exempt; promoted anyway, because the count in the row
   IS the reason the row is unavailable, and an exemption that
   hides the reason for a refusal is the same comprehension bug the
   disabled affordance is about. Exempt never means illegible.
   Weights, sizes and every other declaration are untouched. */
.c-seghead__n,
.c-vc--seg-muted .c-seghead__name,
.c-opt--small .c-opt__label,
.c-opt--small .c-opt__n,
.c-tree__row--small .c-tree__label,
.c-tree__row--small .c-tree__meta,
.c-outcome__code,
.c-outcome__delta span,
.c-glist__hint,
.c-glist__row--unresolved .c-glist__num,
.c-gnav__page-num,
.c-pop__sep { color: var(--ink-500); }

/* ---------- §7ac.2 — The three locks are now CARRIERS.
   §7ab allowed these on --ink-300 as inert marks beside a readable
   label. With §7ac.1 the label is readable and the glyph is what
   says "unavailable" — non-text meaning, 1.4.11, >= 3:1. Not a
   reversal of §7ab: it is §7ab's own rule applied to what the glyph
   now does. Masked and muted segment heads now agree on colour and
   differ only in the tell each needs. */
.c-opt__lock,
.c-tree__lockbox,
.c-seghead__lock { color: var(--ink-400); }

/* ---------- §7ac.3 — Marks the §7ab sweep did not reach.
   All non-text; all were 1.90:1; all state or affordance.
   .c-dot--neutral is the status dot on every "No access" row (the
   neutral state was the one you could not see); .c-ctx__caret is
   the only tell that a context-path segment is a control; the rest
   say "this opens". The separators beside them (.c-breadcrumb__sep,
   .c-ctx__sep, .c-pagination__gap) stay on --ink-300 — inert,
   between two readable labels.

   .c-gnav__caret was a RAW #B7BCCC literal, not var(--ink-300) —
   the last hardcoded ink value in the file, which is why no token
   sweep could ever have found it (same root cause as the baked
   select chevrons). It is a caret, so it was always inside the
   category this section defines. */
.c-dot--neutral { background: var(--ink-400); }
.c-user__caret,
.c-filter__caret,
.c-ctx__caret,
.c-gnav__caret,
.c-select .c-icon,
.c-glist__arrow,
.c-scope__ico { color: var(--ink-400); }

/* ---------- §7ac.4 — .c-help is a <button>, so it is 1.4.11
   (>= 3:1), not 1.4.3 — --ink-400 is right here and wrong
   everywhere else in this pass. It also failed 2.1.1 (in no
   :focus-visible list, border:none — no keyboard tell) and 1.4.13
   (its definition existed only under a mouse pointer).
   cursor: help -> pointer, because it opens something. */
.c-help { color: var(--ink-400); cursor: pointer; }
.c-help:hover,
.c-help:focus-visible { color: var(--brand-violet-text); }
.c-help:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 50%; }

/* ---------- §7ac.5 — the disabled affordance.
   The fill stays, the PERIMETER BREAKS, and the label becomes
   readable. §7ab made a solid --control-border mean "interactive";
   a broken edge is its negation, and a dashed edge already means
   "present but not an ordinary interactive thing" in three places
   (.c-glist__row--unresolved, .c-switch--inherited, .c-dropzone /
   .c-suppress). Label --ink-500 = 4.76:1 on --track, 5.43:1 on
   --surface. Dash --ink-400 = 3.27:1 on --track: it is a mark, so
   it sits in the non-text tier.
   NOT an absent perimeter: --track on --canvas is 1.06:1, so a
   borderless disabled button has no shape at all.
   Geometry: 1.5px matches .c-btn--secondary and box-sizing is
   border-box on a fixed height, so the outer box is identical in
   both states.
   :hover is in the same list because a disabled button still
   matches .c-btn--secondary:hover / --primary:hover at equal
   specificity; filter:none stops the primary's brightness firing.
   cursor:not-allowed stays, subordinate — a hover-only tell can
   confirm a state but never carry it. */
.c-btn:disabled,
.c-btn:disabled:hover,
.c-btn[aria-disabled="true"],
.c-btn[aria-disabled="true"]:hover {
  background: var(--track);
  color: var(--ink-500);
  border: 1.5px dashed var(--ink-400);
  box-shadow: none;
  filter: none;
  cursor: not-allowed;
}
/* A disabled secondary keeps its own surface. The white -> --track
   fill change is 1.06:1 — imperceptible, so it cannot be a carrier
   — while the label on --surface instead of --track buys 0.67 of
   contrast for nothing. One rule, two ranks. */
.c-btn--secondary:disabled,
.c-btn--secondary:disabled:hover,
.c-btn--secondary[aria-disabled="true"],
.c-btn--secondary[aria-disabled="true"]:hover { background: var(--surface); }
/* [aria-disabled] stays focusable — the accessible pattern for a
   GATE, where a keyboard user needs to reach the control to hear
   what would satisfy it. Re-assert the ring the rule above cleared
   with box-shadow:none. (:disabled itself is not focusable, so this
   only ever applies to the aria form; the build must no-op the
   action.) */
.c-btn[aria-disabled="true"]:focus-visible { outline: none; box-shadow: var(--focus-ring); }