/* ============================================================================
   ORSACU Budget — design system
   Brand: CFCU violet (#6d28d9). Self-contained (no external fonts/CSS). Theme-aware:
   light + dark via prefers-color-scheme, with a data-theme override hook. One scale each
   for colour, space, radius, type (§13.1).
   ============================================================================ */

:root {
  color-scheme: light dark;

  /* Brand ramp (violet) */
  --brand-50: #f5f3ff;
  --brand-100: #ede9fe;
  --brand-200: #ddd6fe;
  --brand-400: #a78bfa;
  --brand-500: #7c3aed;
  --brand-600: #6d28d9;
  --brand-700: #5b21b6;
  --brand-800: #4c1d95;

  /* Semantic (light) */
  --bg: #f7f7fb;
  --surface: #ffffff;
  --surface-2: #f2f2f7;
  --text: #1a1721;
  --text-muted: #5b5670;
  --border: #e4e2ec;
  --brand: var(--brand-600);
  --brand-contrast: #ffffff;
  --success: #15803d;
  --danger: #b91c1c;
  --warning: #b45309;
  --focus: var(--brand-500);

  /* Space scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;

  /* Radius / elevation / type */
  --radius: 0.5rem;
  --radius-lg: 0.9rem;
  --shadow-1: 0 1px 2px rgba(20, 16, 30, 0.06), 0 1px 3px rgba(20, 16, 30, 0.1);
  --shadow-2: 0 10px 30px rgba(76, 29, 149, 0.12);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-num: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f0d15;
    --surface: #17141f;
    --surface-2: #201b2c;
    --text: #ece9f4;
    --text-muted: #a9a2bd;
    --border: #2c2738;
    --brand: var(--brand-400);
    --brand-contrast: #16121f;
    --success: #4ade80;
    --danger: #f87171;
    --warning: #fbbf24;
    --focus: var(--brand-400);
  }
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f7f7fb; --surface: #fff; --surface-2: #f2f2f7; --text: #1a1721; --text-muted: #5b5670;
  --border: #e4e2ec; --brand: var(--brand-600); --brand-contrast: #fff; --focus: var(--brand-500);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f0d15; --surface: #17141f; --surface-2: #201b2c; --text: #ece9f4; --text-muted: #a9a2bd;
  --border: #2c2738; --brand: var(--brand-400); --brand-contrast: #16121f; --focus: var(--brand-400);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1 { font-size: 1.6rem; line-height: 1.2; margin: 0 0 var(--space-4); }
h2 { font-size: 1.25rem; margin: 0 0 var(--space-3); }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 3px;
}

.app-main {
  max-width: 80rem;
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
  padding: var(--space-5) var(--space-6) var(--space-6);
}

/* ---- Brand mark ---- */
.brandmark { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--brand); }
.brandmark__glyph { height: 1.9rem; width: auto; display: block; flex: none; }
.brandmark--compact .brandmark__glyph { height: 1.6rem; }
.brandmark__word { font-size: 1.1rem; font-weight: 500; letter-spacing: 0.02em; color: var(--text); }
.brandmark__word strong { color: var(--brand); font-weight: 700; }
/* Sidebar: a bigger bear sitting level with a deliberate two-line wordmark. */
.sidebar .brandmark__glyph { height: 2.3rem; }
.sidebar .brandmark__word { line-height: 1.15; font-size: 1rem; }
.sidebar .brandmark__word strong { display: block; }

/* ---- App shell ----
   Banners sit above a viewport-high frame; inside it the content column scrolls while the sidebar
   stays put — so the sidebar footer can never be pushed below the fold, and the dev-bypass /
   impersonation banners stay permanently visible (§11.4 persistent indicator). */
.app-frame { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
.app-shell { flex: 1; min-height: 0; display: grid; grid-template-columns: 14.5rem minmax(0, 1fr); }
.app-scroll { min-width: 0; overflow-y: auto; }
.sidebar {
  box-sizing: border-box; min-height: 0;
  display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-4);
  background: var(--surface);
  border-right: 1px solid var(--border);
}
.sidebar__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-1); }
.sidebar .brand { text-decoration: none; padding: 0 var(--space-2); min-width: 0; }

.nav-toggle { flex: none; }
.nav-toggle button {
  display: inline-flex; background: none; border: 0;
  padding: 0.4rem; border-radius: var(--radius); color: var(--text-muted);
}
.nav-toggle button:hover { background: var(--surface-2); color: var(--text); filter: none; }
.nav-toggle svg { width: 1.15rem; height: 1.15rem; }

/* The nav list is the sidebar's one scrollable region; brand and footer stay pinned. */
.side-nav { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.side-nav a {
  display: flex; align-items: center; gap: var(--space-2); flex: none;
  padding: 0.5rem 0.6rem; border-radius: var(--radius);
  color: var(--text-muted); font-weight: 500; font-size: 0.93rem;
}
/* A fixed 1.6rem leading slot (icon or monogram) keeps labels aligned across sections. */
.side-nav a > svg:first-child { width: 1.1rem; height: 1.1rem; flex: none; margin: 0 0.25rem; }
.side-nav a > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-nav a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.side-nav a.active { background: color-mix(in srgb, var(--brand) 12%, transparent); color: var(--brand); font-weight: 600; }
.side-nav__monogram {
  flex: none; width: 1.6rem; height: 1.6rem; border-radius: 0.45rem;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--brand) 9%, transparent);
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.02em;
}
.side-nav a.active .side-nav__monogram { background: color-mix(in srgb, var(--brand) 16%, transparent); }
.side-nav__group {
  margin: var(--space-4) 0 var(--space-1); padding: 0 0.6rem;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted);
}
.side-nav__rule { border: 0; border-top: 1px solid var(--border); margin: var(--space-4) 0.6rem var(--space-2); }

.sidebar__foot { margin-top: auto; display: grid; gap: var(--space-3); font-size: 0.9rem; }

/* Collapsed rail: icons and monograms only, labels on hover via title. Toggled by /nav + nav.js. */
.app-shell--rail { grid-template-columns: 4.25rem minmax(0, 1fr); }
.app-shell--rail .sidebar { padding: var(--space-4) var(--space-2); }
.app-shell--rail .sidebar__top { flex-direction: column; align-items: center; gap: var(--space-2); }
.app-shell--rail .sidebar .brand { padding: 0; }
.app-shell--rail .brandmark { gap: 0; }
.app-shell--rail .brandmark__word { display: none; }
.app-shell--rail .sidebar .brandmark__glyph { height: 2rem; }
.app-shell--rail .side-nav a { justify-content: center; padding: 0.5rem 0; }
.app-shell--rail .side-nav a > svg:first-child { margin: 0; }
.app-shell--rail .side-nav a > span:last-child { display: none; }
.app-shell--rail .side-nav__group,
.app-shell--rail .side-nav__rule {
  width: 1.75rem; margin: var(--space-3) auto var(--space-2); padding: 0;
  border-top: 1px solid var(--border); font-size: 0; line-height: 0; color: transparent;
}
.app-shell--rail .theme-switch { display: none; }
.app-shell--rail .user-chip { flex-direction: column; gap: var(--space-2); }
.app-shell--rail .user-chip__name { display: none; }

/* Segmented theme switch: three icon buttons in a pill, active mode in brand. */
.theme-switch {
  display: flex; gap: 2px; width: max-content;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 999px; padding: 3px;
}
.theme-switch button {
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: 999px;
  padding: 0.35rem 0.7rem; color: var(--text-muted);
}
.theme-switch button svg { width: 1rem; height: 1rem; }
.theme-switch button:hover { background: var(--surface); color: var(--text); filter: none; }
.theme-switch button[aria-pressed="true"] { background: var(--brand); color: var(--brand-contrast); }

/* Identity chip: initials avatar, truncated name, sign-out icon. */
.user-chip {
  display: flex; align-items: center; gap: var(--space-2);
  border-top: 1px solid var(--border); padding-top: var(--space-3);
}
.user-chip__avatar {
  flex: none; width: 2.1rem; height: 2.1rem; border-radius: 50%;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--brand) 16%, transparent);
  color: var(--brand); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.03em;
}
.user-chip__name {
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--text); font-weight: 500; font-size: 0.88rem;
}
.user-chip__signout {
  flex: none; display: inline-flex; background: none; border: 0;
  padding: 0.4rem; border-radius: var(--radius); color: var(--text-muted);
}
.user-chip__signout svg { width: 1.05rem; height: 1.05rem; }
.user-chip__signout:hover { background: var(--surface-2); color: var(--danger); filter: none; }

.impersonation-banner {
  display: flex; justify-content: center; align-items: baseline; gap: var(--space-3);
  background: color-mix(in srgb, var(--warning) 18%, var(--surface));
  color: var(--text);
  border-bottom: 1px solid color-mix(in srgb, var(--warning) 40%, transparent);
  padding: var(--space-2) var(--space-4);
  font-size: 0.92rem;
}
.impersonation-banner .linklike { font-weight: 600; }

.dev-banner {
  background: var(--danger);
  color: #fff;
  text-align: center;
  padding: var(--space-2) var(--space-4);
  font-weight: 600;
  font-size: 0.9rem;
}

/* ---- Buttons ---- */
button, .button {
  font: inherit;
  font-weight: 600;
  padding: 0.6rem 1.1rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  background: var(--brand);
  color: var(--brand-contrast);
  cursor: pointer;
  transition: filter 0.15s ease, background 0.15s ease;
}
button:hover, .button:hover { filter: brightness(1.06); text-decoration: none; }
button:active { filter: brightness(0.96); }
button.secondary, .button.secondary {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--border);
}
a.button { display: inline-block; }
a.button:hover { text-decoration: none; }
.button--icon { display: inline-flex; align-items: center; gap: 0.45rem; }
.button--icon svg { width: 1rem; height: 1rem; flex: none; }
.linklike {
  background: none; border: none; color: var(--brand); text-decoration: underline;
  cursor: pointer; padding: 0; font: inherit;
}
form.inline { display: inline; }

/* ---- Forms ---- */
label { display: flex; flex-direction: column; gap: var(--space-1); font-size: 0.92rem; color: var(--text-muted); }
input, select, textarea {
  font: inherit;
  color: var(--text);
  background: var(--surface);
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  width: 100%;
  box-sizing: border-box;
}
input:focus, select:focus, textarea:focus { border-color: var(--brand); outline-offset: 1px; }
fieldset { border: 1px solid var(--border); border-radius: var(--radius); margin: 0 0 var(--space-4); padding: var(--space-4); }
legend { padding: 0 var(--space-2); font-weight: 600; color: var(--text); }

.notice { color: var(--success); }
.error { color: var(--danger); }
.warn { color: var(--warning); }

/* Status paragraphs render as real banners: the moment of feedback should be unmissable. */
p.notice, p.error, p.warn {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  border: 1px solid;
  margin: var(--space-3) 0 var(--space-4);
}
p.warn {
  background: color-mix(in srgb, var(--warning) 9%, var(--surface));
  border-color: color-mix(in srgb, var(--warning) 35%, transparent);
  color: var(--text);
}
p.warn::before { content: "!  "; color: var(--warning); font-weight: 700; }
p.warn a { margin-left: var(--space-2); font-weight: 600; }
p.notice {
  background: color-mix(in srgb, var(--success) 9%, var(--surface));
  border-color: color-mix(in srgb, var(--success) 35%, transparent);
  color: var(--text);
}
p.notice::before { content: "✓  "; color: var(--success); font-weight: 700; }
p.error {
  background: color-mix(in srgb, var(--danger) 9%, var(--surface));
  border-color: color-mix(in srgb, var(--danger) 35%, transparent);
  color: var(--text);
}
p.error::before { content: "!  "; color: var(--danger); font-weight: 700; }

/* ---- Auth screens ---- */
.auth-shell {
  min-height: 100vh;
  max-width: none;
  margin: 0;
  display: grid;
  place-items: center;
  padding: var(--space-6) var(--space-4);
  background:
    radial-gradient(1200px 600px at 50% -10%, color-mix(in srgb, var(--brand) 22%, transparent), transparent),
    var(--bg);
}
.auth-card {
  width: min(26rem, 100%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.auth-card__brand { display: flex; justify-content: center; margin-bottom: var(--space-2); }
.auth-card__alt { display: block; text-align: center; padding: 0.7rem; font-size: 1rem; }
.auth-card h1 { text-align: center; font-size: 1.4rem; margin: 0; }
.auth-card .subtitle { text-align: center; color: var(--text-muted); margin: 0; }
.auth-card form { display: flex; flex-direction: column; gap: var(--space-3); }
.auth-card button { padding: 0.7rem; font-size: 1rem; }

/* Debug stacks only: the one-click local sign-in panel on /login (§11.4). */
.dev-signin {
  border-top: 1px dashed var(--border);
  padding-top: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.dev-signin h2 { font-size: 0.95rem; margin: 0; }
.dev-signin p { margin: 0; color: var(--text-muted); font-size: 0.88rem; }
.dev-signin form { gap: 0; }
.auth-card .dev-signin button {
  width: 100%;
  text-align: left;
  font-weight: 400;
  font-size: 0.92rem;
  padding: 0.45rem 0.7rem;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
}
.auth-card .dev-signin button:hover { border-color: var(--brand); }
.dev-signin button strong { font-weight: 600; }

.home-section { margin-bottom: var(--space-6); }
.home-section h2 { margin-bottom: var(--space-3); }

/* ---- Department cards ---- */
.department-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.department-list a {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: inherit;
  box-shadow: var(--shadow-1);
  transition: border-color 0.15s ease, transform 0.05s ease;
}
.department-list a:hover { border-color: var(--brand); text-decoration: none; }
.department-list a:active { transform: translateY(1px); }
.dept-name { font-weight: 600; }
.dept-branch { color: var(--text-muted); font-size: 0.85rem; }

/* ---- Budget grid ---- */
.sheet-toolbar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-4); }
.filter-form { display: flex; gap: var(--space-2); align-items: center; flex: 1 1 20rem; max-width: 28rem; }
.filter-form input[type="search"] { flex: 1; }
.year-nav { display: flex; gap: var(--space-3); align-items: baseline; font-variant-numeric: tabular-nums; }
.year-nav__current { font-weight: 700; font-size: 1.05rem; }

.grid-scroll { overflow: auto; max-height: 75vh; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.budget-grid { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 60rem; }
.budget-grid th, .budget-grid td { padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--border); text-align: left; background: var(--surface); }
.budget-grid thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--surface-2); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted);
}
.budget-grid tbody tr:hover td, .budget-grid tbody tr:hover th { background: color-mix(in srgb, var(--brand) 6%, var(--surface)); }

/* The account column stays put while the twelve months scroll under it. */
.budget-grid th[scope="row"], .budget-grid thead th:first-child {
  position: sticky; left: 0; z-index: 2;
  background: var(--surface);
}
/* Category bands span the whole table; the inner label sticks so the name stays readable. */
.budget-grid .cat-row .cat-label { position: sticky; left: 0.75rem; display: inline-block; }
.budget-grid tbody tr:hover th[scope="row"] { background: color-mix(in srgb, var(--brand) 6%, var(--surface)); }

.budget-grid tr.filter-hidden { display: none; }

/* A quiet dot on cells whose account/month carries a discussion note. */
.budget-grid td.has-note { position: relative; }
.budget-grid td.has-note::after {
  content: ""; position: absolute; top: 4px; right: 4px;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--brand); opacity: 0.6;
}

/* "Start the year" callout on an empty sheet. */
.start-year { max-width: 44rem; margin-bottom: var(--space-5); }
.start-year h2 { margin-bottom: var(--space-2); }
.start-year form { display: flex; align-items: end; gap: var(--space-3); flex-wrap: wrap; }
.start-year label { max-width: 14rem; }
.budget-grid .num { text-align: right; font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.budget-grid .total { font-weight: 700; }
.budget-grid tfoot td, .budget-grid tfoot th { border-top: 2px solid var(--border); background: var(--surface-2); }

/* First column pinned so account names stay visible while months scroll. */
.budget-grid th:first-child, .budget-grid td:first-child { position: sticky; left: 0; z-index: 1; min-width: 14rem; }
.budget-grid thead th:first-child { z-index: 3; }
.budget-grid .q-start { border-left: 1px solid var(--border); }
.budget-grid .total-col { border-left: 2px solid var(--border); }

.budget-grid .cat-row th {
  background: color-mix(in srgb, var(--brand) 8%, var(--surface));
  color: var(--brand); font-weight: 700; font-size: 0.85rem;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.budget-grid .cat-subtotal th, .budget-grid .cat-subtotal td {
  background: var(--surface-2); font-weight: 600; color: var(--text-muted); font-size: 0.9rem;
}
.budget-grid .cat-subtotal .total { color: var(--text); }

/* ---- Editor ---- */
.editor-columns { display: grid; grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr); gap: var(--space-4); align-items: start; }
@media (max-width: 900px) { .editor-columns { grid-template-columns: 1fr; } }
.editor-columns .card { padding: var(--space-4); }
.editor-columns fieldset { border: 0; padding: 0; margin: 0; }
.month-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); }
.fill-form fieldset { display: grid; gap: var(--space-3); }
.fill-form .fill-hint { margin: 0; font-size: 0.85rem; }

/* Fill flow (editor.js): amber dashes mark what a fill WOULD write; solid amber marks what it
   DID write — unsaved either way until "Save amounts". */
.month-grid label.fill-target input:not(:disabled) {
  border-color: color-mix(in srgb, var(--warning) 55%, var(--border));
  border-style: dashed;
}
.month-grid label.fill-applied input:not(:disabled) {
  border-color: var(--warning); border-style: solid;
  background: color-mix(in srgb, var(--warning) 10%, var(--surface));
}
.fill-status {
  margin: 0 0 var(--space-3);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius);
  background: color-mix(in srgb, var(--warning) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--warning) 35%, transparent);
  font-size: 0.9rem;
}
.editor-save-row { display: flex; gap: var(--space-2); }

.sheet-nav { display: flex; gap: var(--space-4); flex-wrap: wrap; }

/* ---- Scenario management ---- */
.scenario-table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.scenario-table thead th:first-child { border-top-left-radius: calc(var(--radius) - 1px); }
.scenario-table thead th:last-child { border-top-right-radius: calc(var(--radius) - 1px); }
.scenario-table th, .scenario-table td { padding: var(--space-3); border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.scenario-table thead th { background: var(--surface-2); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); }
.scenario-table tbody tr:last-child td { border-bottom: 0; }
.inline-form { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; margin: 0; }
.inline-form input { margin: 0; }
/* Inputs must share the row with their button instead of grabbing 100% width and wrapping it. */
.inline-form > input:not([type="radio"]):not([type="checkbox"]),
.inline-form > select { width: auto; flex: 1 1 9rem; min-width: 7rem; max-width: 22rem; }
.inline-form > input[type="number"] { flex: 0 1 7.5rem; min-width: 5.5rem; }
.inline-form > input[type="date"] { flex: 0 1 11rem; min-width: 9rem; }
.inline-form > button, .inline-form > .button { flex: 0 0 auto; }
.inline-form > label:not(.visually-hidden) { flex: 0 0 auto; }
.inline-form > label:has(input) { flex: 1 1 14rem; }
.actions-cell { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }

/* Toggle rows: the control sits beside its text, never above it, and never stretches. */
label:has(> input[type="radio"]), label:has(> input[type="checkbox"]) {
  flex-direction: row; align-items: center; gap: var(--space-2); color: var(--text);
}
input[type="radio"], input[type="checkbox"] { width: auto; accent-color: var(--brand); }

/* Dense controls inside management tables: row height follows the text, not the button. */
.scenario-table button, .scenario-table .button { padding: 0.4rem 0.85rem; font-size: 0.88rem; }
.scenario-table input:not([type="radio"]):not([type="checkbox"]),
.scenario-table select { padding: 0.42rem 0.6rem; font-size: 0.92rem; }
.scenario-table .inline-form { row-gap: var(--space-1); }
.scenario-table .inline-form > input:not([type="radio"]):not([type="checkbox"]) { flex: 1 1 7rem; min-width: 6rem; max-width: 13rem; }
.scenario-table .inline-form > select { flex: 0 1 8.5rem; min-width: 6.5rem; }
.new-scenario { margin-top: var(--space-6); max-width: 40rem; }
.new-scenario h2 { margin-bottom: var(--space-3); }
.badge { display: inline-block; padding: 0.15rem var(--space-2); border-radius: var(--radius); background: color-mix(in srgb, var(--brand) 15%, transparent); color: var(--brand); font-size: 0.8rem; font-weight: 600; }
button.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
button.link-button { background: none; border: 0; color: var(--danger); padding: 0; font-size: 0.85rem; text-decoration: underline; cursor: pointer; }

/* ---- Requests ---- */
.my-work { margin-bottom: var(--space-6); }
.assignment-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
.assignment-list a {
  display: grid; gap: var(--space-1); padding: var(--space-4);
  background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--brand);
  border-radius: var(--radius); color: inherit; box-shadow: var(--shadow-1);
}
.assignment-list a:hover { border-color: var(--brand); text-decoration: none; }
.assignment-ref { font-family: var(--font-num); font-size: 0.8rem; color: var(--text-muted); }
.assignment-name { font-weight: 600; }
.assignment-meta { font-size: 0.85rem; color: var(--text-muted); }

.request-form { display: grid; gap: var(--space-4); max-width: 44rem; }
.period-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: var(--space-3); }
.part-slot { border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-3); display: grid; gap: var(--space-2); }
.part-slot h3 { margin: 0; font-size: 0.95rem; color: var(--text-muted); }
.request-actions { margin-top: var(--space-6); display: grid; gap: var(--space-4); max-width: 40rem; }
.submit-form { display: flex; gap: var(--space-3); align-items: flex-end; flex-wrap: wrap; margin: var(--space-4) 0; max-width: 40rem; }
.submit-form label { flex: 1 1 18rem; }
.decisions { margin-top: var(--space-6); max-width: 42rem; }

/* ---- Documents ---- */
.documents { margin-top: var(--space-6); border-top: 1px solid var(--border); padding-top: var(--space-5); max-width: 46rem; }
.attachment-list { list-style: none; padding: 0; margin: 0 0 var(--space-4); display: grid; gap: var(--space-2); }
.attachment-list li { display: flex; gap: var(--space-3); align-items: baseline; flex-wrap: wrap; }

/* ---- Import ---- */
.import-form { display: grid; gap: var(--space-3); max-width: 30rem; }
.import-actions { display: flex; gap: var(--space-3); margin: var(--space-4) 0; }
.import-issues { margin-top: var(--space-5); max-width: 46rem; }
.issue-list { margin: 0; padding-left: var(--space-5); color: var(--text-muted); font-size: 0.92rem; }
.issue-list.error { color: var(--danger); }

/* ---- Financial statements ---- */
.statement .statement-section th { background: var(--surface-2); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--brand); }
.statement .statement-category th { font-weight: 700; }
.statement .statement-account { font-weight: 400; padding-left: var(--space-5); color: var(--text-muted); }
.statement .statement-subtotal th, .statement .statement-subtotal td { border-top: 2px solid var(--border); font-weight: 700; }
.changes-form fieldset { display: grid; gap: var(--space-2); }
.checkbox { flex-direction: row; align-items: center; gap: var(--space-2); color: var(--text); }
.checkbox input { width: auto; }
.account-links { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); font-size: 0.9rem; }
.account-links li:not(:last-child)::after { content: "·"; margin-left: var(--space-2); color: var(--text-muted); }

/* ---- Discussion ---- */
.discussion { margin-top: var(--space-8); border-top: 1px solid var(--border); padding-top: var(--space-5); max-width: 42rem; }
.muted { color: var(--text-muted); }
.comment-list { list-style: none; padding: 0; margin: 0 0 var(--space-5); display: grid; gap: var(--space-3); }
.comment-list li { padding: var(--space-3) var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.comment-meta { display: flex; gap: var(--space-3); align-items: baseline; flex-wrap: wrap; font-size: 0.85rem; color: var(--text-muted); }
.comment-month { font-weight: 600; color: var(--text); }
.comment-body { margin: var(--space-2) 0 0; white-space: pre-wrap; }
.comment-form fieldset { display: grid; gap: var(--space-3); max-width: 32rem; }
.comment-form textarea { font: inherit; padding: var(--space-2) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); resize: vertical; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---- Shared page vocabulary (used across screens) ---- */
.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-5); }
.page-header h1 { margin: 0; }
.page-header .crumbs { font-size: 0.88rem; color: var(--text-muted); margin: 0 0 var(--space-1); }
.page-header .crumbs a { color: var(--text-muted); }
.page-header .crumbs a:hover { color: var(--brand); }
.page-actions { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }

.tab-nav { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--border); margin-bottom: var(--space-5); overflow-x: auto; }
.tab-nav a {
  padding: var(--space-2) var(--space-4); color: var(--text-muted); font-weight: 500; white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab-nav a:hover { color: var(--text); text-decoration: none; }
.tab-nav a.active { color: var(--brand); border-bottom-color: var(--brand); font-weight: 600; }

.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--space-3); margin-bottom: var(--space-5); }
.stat-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--space-4); box-shadow: var(--shadow-1); display: grid; gap: var(--space-1);
}
.stat-card__label { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); }
.stat-card__value { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat-card__hint { font-size: 0.85rem; color: var(--text-muted); }
.stat-card--attention .stat-card__value { color: var(--warning); }
a.stat-card { color: inherit; }
a.stat-card:hover { text-decoration: none; }

.chip { display: inline-block; padding: 0.15rem var(--space-2); border-radius: 999px; font-size: 0.8rem; font-weight: 600; }
.chip--brand { background: color-mix(in srgb, var(--brand) 15%, transparent); color: var(--brand); }
.chip--ok { background: color-mix(in srgb, var(--success) 15%, transparent); color: var(--success); }
.chip--warn { background: color-mix(in srgb, var(--warning) 15%, transparent); color: var(--warning); }
.chip--danger { background: color-mix(in srgb, var(--danger) 15%, transparent); color: var(--danger); }
.chip--muted { background: var(--surface-2); color: var(--text-muted); }
.chip--forecast { background: color-mix(in srgb, var(--brand) 12%, transparent); color: var(--brand); border: 1px dashed color-mix(in srgb, var(--brand) 45%, transparent); }
/* Variance worklist: the "needs note" call to action and the has-a-note check. */
.chip--warn {
  background: color-mix(in srgb, var(--warning) 14%, transparent); color: var(--warning);
  border: 1px solid color-mix(in srgb, var(--warning) 40%, transparent);
  margin-left: var(--space-2); font-size: 0.72rem; white-space: nowrap;
}
a.chip--warn:hover { text-decoration: none; background: color-mix(in srgb, var(--warning) 24%, transparent); }
.explained-mark { color: var(--text-muted); margin-left: var(--space-2); }
.explained-mark svg { width: 0.9rem; height: 0.9rem; vertical-align: -0.1em; }
.budget-grid .account-link { color: inherit; }
.budget-grid .account-link:hover { color: var(--brand); text-decoration: none; }

/* Forecast blend: columns mirroring closed actuals — tinted over each row's own surface. */
.budget-grid td.actual-src { background: color-mix(in srgb, var(--brand) 8%, var(--surface)); }
.budget-grid thead th.actual-src { background: color-mix(in srgb, var(--brand) 14%, var(--surface-2)); color: var(--brand); }
.budget-grid tr.cat-subtotal td.actual-src { background: color-mix(in srgb, var(--brand) 12%, var(--surface-2)); }
.month-grid label.actual-src input:disabled { background: color-mix(in srgb, var(--brand) 8%, var(--surface)); color: var(--text-muted); }

.progress-cell { display: flex; align-items: center; gap: var(--space-2); }
.overdue { color: var(--danger); font-weight: 600; }
.pager { display: flex; gap: var(--space-4); align-items: baseline; margin: var(--space-4) 0; }

.add-account { margin-top: var(--space-4); }
.add-account summary { cursor: pointer; color: var(--brand); font-weight: 600; }
.add-account__list { margin-top: var(--space-3); display: grid; gap: var(--space-1); }

.cell-diff summary { cursor: pointer; }
.cell-diff__list { list-style: none; margin: var(--space-2) 0 0; padding: 0 0 0 var(--space-4); display: grid; gap: 2px; font-size: 0.85rem; font-variant-numeric: tabular-nums; }

.prior-hint { font-size: 0.75rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }

.view-switch { display: flex; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.view-switch a { padding: 0.45rem var(--space-4); color: var(--text-muted); font-weight: 500; }
.view-switch a + a { border-left: 1px solid var(--border); }
.view-switch a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.view-switch a.active { background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand); font-weight: 600; }

.budget-grid .favorable { color: var(--success); }
.budget-grid .unfavorable { color: var(--danger); }

.scenario-table .cat-row th {
  background: color-mix(in srgb, var(--brand) 8%, var(--surface));
  color: var(--brand); font-weight: 700; font-size: 0.85rem;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.decision-card { display: grid; gap: var(--space-3); align-content: start; }
.decision-card h3 { margin: 0; }
.decision-card p { margin: 0; }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); padding: var(--space-5); overflow-x: auto; }
.card > h2:first-child { margin-top: 0; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: var(--space-4); align-items: start; }

.progress { background: var(--surface-2); border-radius: 999px; height: 0.45rem; overflow: hidden; min-width: 6rem; }
.progress > span { display: block; height: 100%; background: var(--brand); border-radius: 999px; }

.empty-state {
  padding: var(--space-6); text-align: center; color: var(--text-muted);
  background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius-lg);
}
.empty-state a { font-weight: 600; }

/* ---- Responsive shell ---- */
@media (max-width: 900px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar {
    position: static; height: auto; flex-direction: row; align-items: center;
    padding: var(--space-3) var(--space-4); border-right: 0; border-bottom: 1px solid var(--border);
  }
  .side-nav { flex-direction: row; overflow-x: auto; flex: 1; }
  .side-nav a { white-space: nowrap; }
  .side-nav__group { display: none; }
  .sidebar__foot { margin: 0; grid-auto-flow: column; align-items: center; }
  .sidebar__user { display: none; }
  .app-main { padding: var(--space-4) var(--space-3); }
}

/* ================================================================================
   UX overhaul: native-control restyle, consolidated menus, brand watermark,
   empty states, dashboard hero, print. (Phase 32)
   ================================================================================ */

/* ---- Native controls, made ours ---- */
select:not([multiple]) {
  appearance: none;
  padding-right: 2.3rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6.2l4 4 4-4' fill='none' stroke='%237c7691' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 0.8rem;
}
select[multiple] { padding: 0.35rem; }
select[multiple] option { padding: 0.28rem 0.45rem; border-radius: 4px; }

input[type="file"] { padding: 0.3rem; }
input[type="file"]::file-selector-button {
  font: inherit; font-weight: 600; font-size: 0.88rem;
  margin-right: 0.7rem; padding: 0.42rem 0.9rem;
  border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text); cursor: pointer;
}
input[type="date"] { min-height: 2.6rem; }

/* ---- Consolidated action menus (no-JS details dropdown) ---- */
.menu { position: relative; display: inline-block; }
.menu > summary {
  list-style: none; cursor: pointer; user-select: none;
  font-weight: 600; font-size: 0.88rem;
  padding: 0.4rem 0.85rem; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary::after { content: " ▾"; opacity: 0.6; font-size: 0.8em; }
.menu[open] > summary { border-color: var(--brand); }
.menu__panel {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40;
  min-width: 16rem; padding: var(--space-3);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-2);
  display: grid; gap: var(--space-2); justify-items: start;
}
.menu__panel .inline-form { width: 100%; }
.menu__panel hr { width: 100%; border: 0; border-top: 1px solid var(--border); margin: var(--space-1) 0; }

/* ---- Brand watermark: the bear, barely there ---- */
:root {
  --bearmark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 65 45'%3E%3Cpath d='M56.2522 9.84086V9.84429L54.4697 7.73098H48.9242L50.7701 5.62109H43.5946V7.73098H13.117L5.62012 16.6161V39.3767H15.5722L11.1451 34.1294L15.8507 28.5522L24.9836 39.3767H33.1532L26.0334 30.938H36.851L43.9708 39.3767H52.1404L45.0009 30.9157V24.8663L50.5576 18.2804H57.7219L60.472 15.0213V9.84172H56.2531L56.2522 9.84086ZM59.0648 11.2472V13.1779L57.4357 11.2472H59.0648ZM45.0001 7.02825H47.6696L45.0001 10.0791V7.02825ZM43.5938 36.7492L37.9677 30.0819V9.13814H43.5938V36.75V36.7492ZM26.0137 9.13814H36.5622V28.415L26.0137 15.9134V9.13814ZM13.77 9.13814H24.6074V36.75L7.54061 16.5219L13.7709 9.13814H13.77ZM12.5454 37.9704H7.90397L10.2247 35.2203L12.5454 37.9704ZM7.02642 36.8297V18.0944L14.9304 27.4621L7.02642 36.8297ZM26.0137 37.9704V33.0967L30.1263 37.9704H26.0137ZM26.0137 29.5317V18.0944L35.6641 29.5317H26.0137ZM49.1127 37.9704H45.0001V33.0967L49.1127 37.9704ZM45.0001 12.2156L47.6927 9.13814H53.815L55.1227 10.6876L45.0001 22.6853V12.2156ZM57.0681 16.8741H51.7445L56.044 11.7785L58.7058 14.933L57.0689 16.8732L57.0681 16.8741Z' fill='black'/%3E%3C/svg%3E");
}
.app-main { position: relative; }
.app-main::after {
  content: ""; position: fixed; right: -3rem; bottom: -2rem;
  width: 24rem; height: 16.6rem;
  background: var(--text); opacity: 0.028; pointer-events: none; z-index: -1;
  -webkit-mask: var(--bearmark) no-repeat center / contain;
  mask: var(--bearmark) no-repeat center / contain;
}

/* ---- Empty states: guidance instead of a bare sentence ---- */
.empty-state {
  display: grid; gap: var(--space-2); justify-items: center; text-align: center;
  padding: var(--space-6) var(--space-5); margin: var(--space-4) 0;
  color: var(--text-muted);
  border: 1px dashed var(--border); border-radius: var(--radius-lg);
}
.empty-state::before {
  content: ""; width: 5.4rem; height: 3.75rem;
  background: currentColor; opacity: 0.35;
  -webkit-mask: var(--bearmark) no-repeat center / contain;
  mask: var(--bearmark) no-repeat center / contain;
}
.empty-state strong { color: var(--text); font-size: 1.02rem; }
.empty-state p { margin: 0; max-width: 34rem; }

/* ---- Admin dashboard hero ---- */
.dash-callout {
  display: flex; gap: var(--space-3); align-items: baseline; flex-wrap: wrap;
  padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4);
  background: color-mix(in srgb, var(--brand) 7%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--brand) 25%, var(--border));
  border-radius: var(--radius-lg);
}
.dash-callout p { margin: 0; }
.budget-grid--plain tbody tr:nth-child(even) th,
.budget-grid--plain tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--surface-2) 55%, var(--surface)); }

/* ---- Print: statements and sheets on paper, nothing else ---- */
@media print {
  .sidebar, .dev-banner, .impersonation-banner, .page-actions, .view-switch, .year-nav,
  .filter-form, .submit-form, .sheet-actions, .add-account, .theme-menu, .skip-link,
  .tab-nav, .menu, .empty-state::before, .app-main::after { display: none !important; }
  .app-frame { display: block !important; height: auto !important; }
  .app-shell { display: block !important; }
  .app-scroll { overflow: visible !important; }
  .app-main { padding: 0 !important; }
  body { background: #fff !important; color: #000 !important; }
  .grid-scroll { overflow: visible !important; }
  table { font-size: 9.5pt; }
  th, td { background: #fff !important; }
  a { color: inherit !important; text-decoration: none !important; }
}

/* ---- Skip link (first tab stop) ---- */
.skip-link {
  position: absolute; left: -100vw; top: 0; z-index: 100;
  padding: var(--space-2) var(--space-4); background: var(--brand); color: var(--brand-contrast);
  border-radius: 0 0 var(--radius) 0; font-weight: 600;
}
.skip-link:focus-visible { left: 0; text-decoration: none; }

.sheet-actions {
  margin-top: var(--space-6); padding-top: var(--space-5);
  border-top: 1px solid var(--border); max-width: 40rem;
}
.sheet-actions h2 { margin-bottom: var(--space-1); }
.create-grid { margin-top: var(--space-6); }

/* ---- Final polish: hover states and micro-alignment (Phase 33) ---- */
.scenario-table tbody tr:hover th, .scenario-table tbody tr:hover td {
  background: color-mix(in srgb, var(--brand) 4%, transparent);
}
.chip { vertical-align: middle; }
h1 .chip { font-size: 0.72rem; position: relative; top: -0.15em; }
.menu > summary:hover { background: color-mix(in srgb, var(--brand) 10%, var(--surface-2)); }
.stat-card { transition: border-color 0.15s ease; }
.stat-card:hover { border-color: color-mix(in srgb, var(--brand) 35%, var(--border)); }
.department-list a, .card { transition: border-color 0.15s ease, box-shadow 0.15s ease; }

/* ---- Chart of accounts: tree, drag, GL chips (Phase 34) ---- */
.coa-tree { list-style: none; margin: 0 0 var(--space-5); padding: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.coa-tree li {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  padding-left: calc(var(--space-4) + var(--tree-depth, 0) * 1.4rem);
  border-bottom: 1px solid var(--border);
}
.coa-tree li:last-child { border-bottom: 0; }
.coa-tree li:hover { background: color-mix(in srgb, var(--brand) 4%, transparent); }
.coa-tree__name { display: flex; align-items: center; gap: var(--space-2); flex: 1 1 auto; min-width: 0; flex-wrap: wrap; }
.coa-row__actions { display: flex; align-items: center; gap: var(--space-2); flex: none; }

.drag-handle {
  cursor: grab; color: var(--text-muted); opacity: 0.6; letter-spacing: -0.12em; user-select: none;
  margin-right: var(--space-3); /* clear air between the grabber and the row label */
  padding: var(--space-1) var(--space-1); /* a touch more grab surface */
}
[draggable="true"]:active .drag-handle { cursor: grabbing; }
[draggable="true"]:hover .drag-handle { opacity: 1; }
.dragging { opacity: 0.45; }
.drag-over { box-shadow: inset 0 2px 0 0 var(--brand); }
tr.drag-over th, tr.drag-over td { border-top: 2px solid var(--brand); }

/* Stacked cards never touch: any card directly following another gets breathing room.
   Grid containers manage their own gaps — the stack rule must not fight them. */
.card + .card { margin-top: var(--space-5); }
.card-grid > .card + .card { margin-top: 0; }

/* Admin dashboard: two-column analysis row + diverging monthly-net bars + ranked h-bars. */
.dash-columns { margin-bottom: var(--space-5); }
.dash-table-head h2 { margin: 0 0 var(--space-2); }
.dash-table-head { margin-bottom: var(--space-3); }
.mini-bars { display: flex; gap: 4px; align-items: stretch; height: 9.5rem; margin-top: var(--space-3); }
.mini-bars__col { flex: 1 1 0; display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.mini-bars__track { position: relative; flex: 1 1 auto; background: var(--surface-2); border-radius: 4px; overflow: hidden; }
.mini-bars__bar {
  position: absolute; left: 15%; right: 15%;
  background: var(--brand); border-radius: 4px 4px 0 0;
}
.mini-bars__bar--neg { background: var(--danger); border-radius: 0 0 4px 4px; }
.mini-bars__zero { position: absolute; left: 0; right: 0; height: 1px; background: var(--border); }
.mini-bars__month { text-align: center; font-size: 0.72rem; color: var(--text-muted); }
.mini-bars__caption { margin-top: var(--space-2); font-size: 0.85rem; }
.h-rank { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); }
.h-rank__row { display: grid; grid-template-columns: minmax(9rem, 1.4fr) 1fr auto; gap: var(--space-3); align-items: center; }
.h-rank__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h-rank__track { background: var(--surface-2); border-radius: 4px; height: 0.6rem; }
.h-rank__bar { display: block; height: 100%; background: var(--brand); border-radius: 4px; }
.h-rank__value { font-variant-numeric: tabular-nums; font-weight: 600; }
.h-rank__more { margin-top: var(--space-4); }
.h-rank__more summary { cursor: pointer; }

/* Symitar sync: the diff table color-codes change kinds; controls stay off each other's toes. */
.symitar-toolbar { display: flex; gap: var(--space-4); flex-wrap: wrap; align-items: center; }
.symitar-probe { display: flex; gap: var(--space-2); align-items: center; }
.symitar-probe input { width: 12rem; }
.symitar-batch-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.symitar-gl { font-variant-numeric: tabular-nums; }
.symitar-diff .symitar-row--add { background: color-mix(in srgb, var(--success) 6%, transparent); }
.symitar-diff .symitar-row--remove { background: color-mix(in srgb, var(--danger) 6%, transparent); }
.symitar-diff .symitar-row--change { background: color-mix(in srgb, var(--brand) 5%, transparent); }
.symitar-actions { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; margin-top: var(--space-4); }
.symitar-actions__discard { margin-left: auto; }

/* Administration landing: grouped destinations with purpose-built tiles, then settings cards. */
.admin-nav { display: flex; flex-direction: column; gap: var(--space-6); margin-bottom: var(--space-6); }
.admin-group__label, .admin-settings__label {
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-muted); margin: 0 0 var(--space-2);
}
.admin-settings__label { margin-top: var(--space-6); margin-bottom: var(--space-3); }
.admin-tiles {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}
.admin-tiles a {
  display: flex; flex-direction: column; gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  color: inherit; height: 100%;
  position: relative; overflow: hidden;
  transition: border-color 0.15s ease;
}
/* Faded destination icon, tucked into the bottom-right corner. The SVG (self-hosted Lucide,
   wwwroot/icons/lucide) arrives via a CSS mask so the tint is a theme token, not baked black. */
.admin-tiles a::after {
  content: ""; position: absolute; right: -0.55rem; bottom: -0.8rem;
  width: 4.75rem; height: 4.75rem;
  background-color: var(--brand); opacity: 0.08;
  -webkit-mask: var(--tile-icon) no-repeat center / contain;
  mask: var(--tile-icon) no-repeat center / contain;
  pointer-events: none;
}
.admin-tiles a:hover::after { opacity: 0.14; }
.admin-tiles a:hover { border-color: var(--brand); text-decoration: none; }
.admin-tiles a:active { transform: translateY(1px); }
.admin-tile__name { font-weight: 600; }
.admin-tile__hint { color: var(--text-muted); font-size: 0.85rem; }
.admin-settings .card h2 { font-size: 1.05rem; }
.admin-settings .inline-form { margin-top: var(--space-3); }

.gl-chip-form { display: inline-block; margin: 0 var(--space-1) var(--space-1) 0; }
.gl-chip { display: inline-flex; align-items: center; gap: 0.3rem; font-variant-numeric: tabular-nums; }
.gl-chip__remove {
  background: none; border: none; color: inherit; cursor: pointer;
  font-size: 1em; font-weight: 700; padding: 0 0.1rem; line-height: 1; opacity: 0.65;
}
.gl-chip__remove:hover { opacity: 1; filter: none; }

/* ---- Approver drill-down: snapshot months under each account (Phase 37) ---- */
.line-months > summary { cursor: pointer; list-style: none; }
.line-months > summary::-webkit-details-marker { display: none; }
.line-months > summary::after { content: " ▸"; color: var(--text-muted); font-size: 0.8em; }
.line-months[open] > summary::after { content: " ▾"; }
.line-months__list { display: flex; flex-wrap: wrap; gap: var(--space-1); padding-top: var(--space-2); }
.month-pill {
  display: inline-flex; gap: 0.35rem; align-items: baseline;
  font-size: 0.78rem; color: var(--text-muted);
  padding: 0.14rem 0.5rem; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface-2); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.month-pill strong { color: var(--text); font-weight: 600; }

/* ---- Horizontal scroll, made unmissable: chunky branded scrollbars ---- */
.grid-scroll { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--brand) 55%, var(--border)) var(--surface-2); }
.grid-scroll::-webkit-scrollbar { height: 11px; width: 11px; }
.grid-scroll::-webkit-scrollbar-track { background: var(--surface-2); border-radius: 999px; }
.grid-scroll::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--brand) 55%, var(--border));
  border-radius: 999px; border: 2px solid var(--surface-2);
}
.grid-scroll::-webkit-scrollbar-thumb:hover { background: var(--brand); }
.card::-webkit-scrollbar { height: 9px; }
.card::-webkit-scrollbar-track { background: var(--surface-2); border-radius: 999px; }
.card::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--brand) 45%, var(--border)); border-radius: 999px; }
.card { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--brand) 45%, var(--border)) var(--surface-2); }

/* ---- Wave A: rollup view, heatmap, inline editing, GL context (Phase 38) ---- */
.rollup-branch th {
  padding-left: calc(0.7rem + var(--tree-depth, 0) * 1.3rem) !important;
  font-weight: 700; cursor: pointer; user-select: none;
}
.rollup-branch { background: color-mix(in srgb, var(--brand) 5%, var(--surface)); }
.rollup-branch th, .rollup-branch td { background: color-mix(in srgb, var(--brand) 5%, var(--surface)); }
.rollup-branch:hover th, .rollup-branch:hover td { background: color-mix(in srgb, var(--brand) 9%, var(--surface)); }
.rollup-chevron { display: inline-block; margin-right: 0.35rem; color: var(--brand); transition: transform 0.12s ease; }
.rollup-collapsed .rollup-chevron { transform: rotate(-90deg); }
.rollup-account th { padding-left: calc(0.7rem + var(--tree-depth, 0) * 1.3rem) !important; font-weight: 400; }
.rollup-hidden { display: none; }

.gl-hint { display: block; font-size: 0.72rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }

.heat-toggle--on { border-color: var(--brand); color: var(--brand); }
td.heat-0 { background: color-mix(in srgb, var(--brand) 4%, var(--surface)); }
td.heat-1 { background: color-mix(in srgb, var(--brand) 10%, var(--surface)); }
td.heat-2 { background: color-mix(in srgb, var(--brand) 18%, var(--surface)); }
td.heat-3 { background: color-mix(in srgb, var(--warning) 22%, var(--surface)); }
td.heat-4 { background: color-mix(in srgb, var(--danger) 26%, var(--surface)); }

td.cell-editable { cursor: cell; }
td.cell-editable:hover { box-shadow: inset 0 0 0 1px var(--brand); }
td.cell-editing { padding: 0.15rem !important; }
td.cell-editing input {
  width: 6.5rem; padding: 0.3rem 0.4rem; text-align: right;
  font-family: var(--font-num); font-size: 0.92rem;
  border-color: var(--brand);
}

.toast {
  position: fixed; bottom: 1.2rem; left: 50%; transform: translateX(-50%);
  z-index: 200; padding: var(--space-3) var(--space-5);
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-left: 4px solid var(--success);
  border-radius: var(--radius); box-shadow: var(--shadow-2);
  transition: opacity 0.5s ease;
}
.toast--error { border-left-color: var(--danger); }
.toast--gone { opacity: 0; }

/* ---- Account chart (Wave B1): inline SVG, series palette, legend chips ---- */
.chart-card { padding: var(--space-4); margin-bottom: var(--space-5); }
.account-chart { width: 100%; height: auto; display: block; }
.chart-grid { stroke: var(--border); stroke-width: 1; }
.chart-tick { fill: var(--text-muted); font-size: 12px; font-family: var(--font-num); }
.chart-line { stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.chart-line--actuals { stroke: var(--text-muted); stroke-width: 1.75; stroke-dasharray: 5 4; }
.series-0 { stroke: var(--brand); }
.series-1 { stroke: var(--success); }
.series-2 { stroke: var(--warning); }
.series-3 { stroke: var(--danger); }
.series-4 { stroke: var(--brand-400); }
.series-5 { stroke: #0ea5e9; }
.chart-dot { fill: var(--surface); stroke-width: 2; }
.chart-dot.series-0 { stroke: var(--brand); } .chart-dot.series-1 { stroke: var(--success); }
.chart-dot.series-2 { stroke: var(--warning); } .chart-dot.series-3 { stroke: var(--danger); }
.chart-dot.series-4 { stroke: var(--brand-400); } .chart-dot.series-5 { stroke: #0ea5e9; }
.chart-legend { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-3); }
.series-chip { display: inline-flex; align-items: center; gap: 0.4rem; border: 1px solid var(--border); background: var(--surface); color: var(--text); }
.series-chip::before { content: ""; width: 0.65rem; height: 0.65rem; border-radius: 999px; }
.series-chip-0::before { background: var(--brand); } .series-chip-1::before { background: var(--success); }
.series-chip-2::before { background: var(--warning); } .series-chip-3::before { background: var(--danger); }
.series-chip-4::before { background: var(--brand-400); } .series-chip-5::before { background: #0ea5e9; }
.series-chip__remove { font-weight: 700; opacity: 0.6; padding: 0 0.15rem; }
.series-chip__remove:hover { opacity: 1; text-decoration: none; }
.chart-link { display: inline-block; vertical-align: middle; margin-left: 0.35rem; color: var(--text-muted); }
.chart-link svg { width: 0.95rem; height: 0.95rem; display: block; }
.chart-link:hover { color: var(--brand); }

/* ---- Compare-year overlay (Wave B2) ---- */
.cmp-form { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); flex-wrap: nowrap; }
.cmp-form label { color: var(--text-muted); font-size: 0.85rem; white-space: nowrap; }
.cmp-form select { width: auto; }
.cmp-hint { display: block; font-size: 0.72rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
/* Active-comparison chip: one click removes the overlay (the select's "none" still works too). */
.cmp-clear {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.25rem 0.6rem; border-radius: 999px; font-size: 0.82rem; font-weight: 600;
  background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand);
  white-space: nowrap;
}
.cmp-clear:hover { background: color-mix(in srgb, var(--brand) 24%, transparent); text-decoration: none; }
.cmp-hint--warn { color: var(--warning); font-weight: 600; }

/* ---- Dashboard analytics (Wave B3) ---- */
.rank-grid { margin-bottom: var(--space-5); }
.rank-list { list-style: none; margin: 0; padding: 0; counter-reset: rank; }
.rank-list li {
  display: flex; justify-content: space-between; gap: var(--space-3); align-items: baseline;
  padding: var(--space-2) 0; border-bottom: 1px solid var(--border);
}
.rank-list li:last-child { border-bottom: 0; }
.rank-list li::before {
  counter-increment: rank; content: "#" counter(rank);
  flex: none; font-size: 0.75rem; font-weight: 700; color: var(--brand);
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  border-radius: 6px; padding: 0.05rem 0.4rem;
}
.rank-list li > span { flex: 1 1 auto; min-width: 0; }
.rank-list strong { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---- Report builder + library (Wave C) ---- */
.builder-grid { display: grid; gap: var(--space-4); max-width: 60rem; }
.builder-card h2 { margin-bottom: var(--space-3); }
.builder-hint { margin-top: var(--space-2); font-size: 0.85rem; }
.builder-period { display: flex; align-items: end; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-3); }
.builder-period label { display: flex; flex-direction: column; gap: var(--space-1); font-size: 0.85rem; color: var(--text-muted); }
.builder-period select { width: auto; }
.builder-rows { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: grid; gap: var(--space-2); }
.builder-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.builder-row select { flex: 1 1 14rem; min-width: 12rem; }
.builder-remove { color: var(--danger, #c0392b); font-size: 0.85rem; white-space: nowrap; }
.builder-allinone { margin-top: var(--space-3); display: flex; align-items: center; gap: var(--space-3); }
.check-label { display: flex; align-items: center; gap: var(--space-2); }
.builder-final { display: grid; gap: var(--space-3); max-width: 28rem; }
.delivery-options { border: 1px solid var(--border); border-radius: 10px; padding: var(--space-3); display: grid; gap: var(--space-2); }
.delivery-options legend { padding: 0 var(--space-2); color: var(--text-muted); font-size: 0.85rem; }
.delivery-options input[type="date"] { width: auto; }
.row-actions { display: flex; align-items: center; gap: var(--space-2); white-space: nowrap; }
.confirm summary { color: var(--danger); cursor: pointer; list-style: none; display: inline-block; }
.confirm summary::-webkit-details-marker, .confirm summary::marker { display: none; content: ""; }
/* Inline reveal, not a popover: row confirms live inside scroll containers that would clip
   an absolutely positioned panel. The row simply grows while the question is open. */
.menu__panel.confirm__panel {
  position: static; min-width: 14rem; max-width: 19rem; padding: var(--space-3);
  margin-top: var(--space-2); white-space: normal; box-shadow: none;
  border: 1px solid color-mix(in srgb, var(--danger) 35%, var(--border));
}
.confirm__panel p { margin: 0 0 var(--space-3); font-size: 0.9rem; font-weight: 400; }

/* ---- Scenario compare (Wave D) ---- */
.compare-picker { margin-bottom: var(--space-4); }

/* ---- Spreadsheet-feel grid (Wave E) ---- */
td[data-month]:focus {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
  border-radius: 2px;
}
td[data-month].cell-selected {
  box-shadow: inset 0 0 0 99px color-mix(in srgb, var(--brand) 16%, transparent);
}

/* Per-row micro-forms (role pickers etc.): control and button share one line, quietly. */
.role-form { flex-wrap: nowrap; }
.role-form > select { flex: 0 1 auto; min-width: 6.5rem; }