/* Calm Surface migration 12 -- the app shell (persistent chrome). Scoped to the
   three shell ids only: #app-header, #kpi-strip, #nav-rail. The header's saturated
   teal->cyan gradient is replaced with a solid DEEP low-chroma accent
   (accent.primary-deep; existing white header text = 11.5:1 light / 12.4:1 dark,
   AA-verified). KPI card frames are
   calmed; the meaningful coloured KPI numbers (triage amber, citation green) are
   left intact -- data, not chrome. */

/* Header: solid calm accent instead of the marketing gradient */
#app-header {
  background: var(--color-accent-primary-deep);
  border-color: var(--color-accent-primary);
  box-shadow: var(--elevation-1);
}

/* KPI strip: calm card frames + muted labels; numbers untouched */
#kpi-strip .bg-white {
  background: var(--color-surface-1);
  border-color: var(--color-border-subtle);
  box-shadow: var(--elevation-1);
}
#kpi-strip .text-slate-500 { color: var(--color-text-muted); }

/* Nav rail: humanist type; interactive tab states left to app.js (delicate) */
#nav-rail { font-family: var(--font-family-sans); }
#nav-rail :focus-visible {
  outline: var(--focus-ring-width) solid var(--color-border-focus);
  outline-offset: var(--focus-ring-offset);
}

/* Nav-rail interactive states (Calm Surface migration 13 -- the "delicate" tab
   states shell.css previously deferred to app.js). Scoped to #nav-rail + the
   existing role/aria hooks so the calm tokens OVERRIDE the Tailwind teal/slate
   utilities by specificity -- zero app.js change, single-file revert. The
   DATA-signal states (attention dots, triage/tasks status colours) keep their
   semantic colour via their own coloured <span> (wins by element specificity):
   chrome is calmed, meaningful data colour is left intact. */
#nav-rail { font-feature-settings: var(--font-feature-tabular); }

/* default tabs / actions / group headers */
#nav-rail [role="tab"]:not([aria-selected="true"]),
#nav-rail [role="menuitem"],
#nav-rail [aria-expanded] {
  color: var(--color-text-muted);
  border-color: transparent;
}
/* hover: quiet neutral fill (replaces the teal-50 / emerald-50 / slate-50 washes) */
#nav-rail [role="tab"]:hover,
#nav-rail [role="menuitem"]:hover,
#nav-rail [aria-expanded]:hover {
  background: var(--color-surface-2);
  color: var(--color-text-default);
}
/* active panel / client tab: calm primary tint + logical inline-start accent rule
   (declared last so it wins over :hover at equal specificity -- stays tinted on hover) */
#nav-rail [role="tab"][aria-selected="true"] {
  background: var(--color-accent-primary-tint);
  color: var(--color-text-strong);
  border-color: var(--color-accent-primary);
}

/* Migration 14 (S3 completion): the rail's DATA-signal colours -- attention dots,
   triage/tasks status -- are kept (they ARE data) but recoloured from the raw
   saturated Tailwind palette to the calm, AA-verified SEMANTIC tokens (lower chroma,
   C<=0.12). Scoped to #nav-rail so the rest of the app is untouched; class-targeted
   so it overrides the Tailwind utilities by specificity. */
#nav-rail .text-rose-600, #nav-rail .text-rose-500  { color: var(--color-semantic-error); }
#nav-rail .text-orange-600, #nav-rail .text-amber-600 { color: var(--color-semantic-warning); }
#nav-rail .text-emerald-600, #nav-rail .text-green-600 { color: var(--color-semantic-success); }
#nav-rail .bg-rose-500   { background: var(--color-semantic-error); }
#nav-rail .bg-orange-500 { background: var(--color-semantic-warning); }
/* Group-header chevron + icon: quiet subtle ink (were slate-400/500) */
#nav-rail [aria-expanded] svg { color: var(--color-text-subtle); }