@layer legacy, tokens, base, components, pages;

@layer tokens {
  :root {
    --color-bg: #FFFFFF;
    --color-surface: #F7F7F8;
    --color-border: #D8D8DC;
    --color-text: #14161A;
    --color-text-muted: #6B7280;
    --color-accent: #3730A9;
    --color-accent-contrast: #FFFFFF;
    --color-danger: #C0392B;
    --color-danger-surface: #FBEAE8;
    --color-success: #1B7F4C;
    --color-success-surface: #EAF6EF;
    --color-success-border: #B7E0C8;
    --color-accent-soft: #E9E8F7;
    --color-warning: #B45309;
    --color-warning-surface: #FEF3E2;
    --color-info: #2563EB;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --radius-sm: 4px;
    --radius-md: 8px;
    --font-sans: 'IBM Plex Sans', system-ui, sans-serif;
    --font-mono: 'IBM Plex Mono', monospace;
    --text-sm: 12px;
    --text-md: 14px;
    --text-lg: 18px;
  }

  /* No automatic `prefers-color-scheme: dark` switch yet: most of the legacy layer (the gate
     screens, ledger, code view) hardcodes light-mode colors and doesn't read these tokens, so
     flipping the tokens alone would make that majority of the app unreadable (light text on
     light backgrounds) while only the new settings UI adopted the dark palette correctly. This
     stays inert - opt-in only via :root[data-theme="dark"] below - until the legacy layer is
     migrated to the tokens and a manual theme toggle sets the attribute explicitly. See the
     Chunk 6 code review, 2026-09-28. */

  :root[data-theme="dark"] {
    --color-bg: #14161A;
    --color-surface: #1D1F24;
    --color-border: #33363C;
    --color-text: #F2F2F4;
    --color-text-muted: #9CA3AF;
    --color-accent: #8B85D6;
    --color-accent-contrast: #14161A;
    --color-danger: #E57368;
    --color-danger-surface: #3A1F1C;
    --color-success: #4FBE83;
    --color-success-surface: #16301F;
    --color-success-border: #2C5A3E;
    --color-accent-soft: #2A2950;
    --color-warning: #F2B35B;
    --color-warning-surface: #3A2C17;
    --color-info: #7FA8F8;
  }
}

@layer base {
  /* Component rules that set display (.sidebar-nav, #staff-shell, ...) would otherwise override [hidden]. */
  [hidden] { display: none !important; }
  body {
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
  }
}

@layer components {
  .btn {
    font-family: var(--font-sans);
    font-size: var(--text-md);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
  }
  .btn:disabled { opacity: 0.5; cursor: not-allowed; }
  .btn-primary { background: var(--color-accent); color: var(--color-accent-contrast); border-color: var(--color-accent); }
  .btn-danger { background: var(--color-danger); color: #fff; border-color: var(--color-danger); }

  .card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
    background: var(--color-bg);
  }
  .card-danger { border-color: var(--color-danger); background: var(--color-danger-surface); }
  /* A card that answers the Admin in prose (a refusal, a failure): a title like the Discovery cards' and the server's
     sentences at body size; the blank lines in the server's text (T-340's one paragraph per refused part) stay. */
  .card > .card-title { margin: 0 0 var(--space-3); font-size: var(--text-lg); font-weight: 600; }
  .card-text { margin: 0; font-size: var(--text-md); line-height: 1.5; white-space: pre-line; }

  /* T-054: a conflict select that doesn't currently apply (e.g. cross_object_write_if_requested
     when the mechanism override isn't set to "as requested") - visually marked non-required. */
  .optional-conflict { opacity: 0.5; }

  .field { margin-bottom: var(--space-3); }
  .field label, .field .field-label { display: block; font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-1); }
  .field input { font-family: var(--font-sans); font-size: var(--text-md); padding: var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-sm); width: 100%; box-sizing: border-box; background: var(--color-bg); color: var(--color-text); }
  .field .hint { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-1); }
  .hint { font-size: var(--text-sm); color: var(--color-text-muted); }
  .field .error { font-size: var(--text-sm); color: var(--color-danger); margin-top: var(--space-1); }
  .field textarea { font-family: var(--font-sans); font-size: var(--text-md); padding: var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-sm); width: 100%; box-sizing: border-box; background: var(--color-bg); color: var(--color-text); min-height: 6rem; resize: vertical; }
  /* A checkbox or radio with its label on one row. More specific than `.field label` / `.field input`, so the
     block label and the full-width input rules do not apply to it. */
  .field .field-check { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-md); color: var(--color-text); margin-bottom: var(--space-1); }
  .field .field-check input { width: auto; padding: 0; margin: 0; }
  .field-options { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
  /* Honeypots: off-screen, not display:none (some bots skip hidden fields). The wrapper is aria-hidden and the
     inputs have tabindex="-1", so neither screen readers nor keyboard users meet them. */
  .visually-removed { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
  .feedback-card { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); padding: var(--space-3); margin-top: var(--space-2); }

  /* .settings-tabs, not .tabs: the legacy layer already has an unrelated .tabs rule (the Review
     gate's code-view tab strip) - cascade layers ignore selector specificity, so a same-named
     rule here would win over it everywhere, not just in settings. */
  .settings-tabs { display: flex; gap: var(--space-4); border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-4); }
  .settings-tabs a { padding: var(--space-2) 0; color: var(--color-text-muted); text-decoration: none; border-bottom: 2px solid transparent; }
  .settings-tabs a[aria-current="page"] { color: var(--color-accent); border-bottom-color: var(--color-accent); font-weight: 600; }

  /* Staff Settings panel: one row per setting inside a foldable group card. Two columns: the text on the left wraps,
     the value is as wide as it needs, aligned to the right, and never wraps. */
  .setting-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-4); align-items: start; padding: var(--space-3) 0; border-top: 1px solid var(--color-border); }
  .setting-group > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: var(--space-2); }
  .setting-group > summary::-webkit-details-marker { display: none; }
  .setting-group > summary::before { content: "\25B8"; color: var(--color-text-muted); }
  .setting-group[open] > summary::before { content: "\25BE"; }
  .setting-group > summary h3 { margin: 0; }
  .setting-group-note { margin: 0 0 var(--space-2); }
  .setting-group-note + .setting-row { border-top: none; }
  .setting-group[open] > summary { margin-bottom: var(--space-2); }
  .setting-group > summary + .setting-row { border-top: none; }
  .search-hit { background: var(--color-warning-surface); color: var(--color-text); border-radius: 2px; }
  .setting-name { font-weight: 600; }
  .setting-desc { margin: var(--space-1) 0 0; }
  .setting-key { font-size: var(--text-sm); color: var(--color-text-muted); margin: var(--space-1) 0 0; }
  .setting-value { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-2); }
  .setting-input { white-space: nowrap; }
  .setting-number { width: 6rem; }
  @media (max-width: 560px) { .setting-row { grid-template-columns: 1fr; } .setting-value { align-items: flex-start; } }

  .menu { position: relative; }
  .menu-panel { position: absolute; right: 0; top: 100%; min-width: 200px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg); box-shadow: 0 4px 14px rgba(0,0,0,.18); padding: var(--space-2) 0; z-index: 10; }
  .menu-panel .menu-header { padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-1); font-size: var(--text-sm); color: var(--color-text-muted); }
  .menu-panel button { display: block; width: 100%; text-align: left; background: none; border: none; padding: var(--space-2) var(--space-4); font-family: var(--font-sans); font-size: var(--text-md); color: var(--color-text); cursor: pointer; }
  .menu-panel button:hover { background: var(--color-surface); }
  .menu-panel .menu-sep { border-top: 1px solid var(--color-border); margin: var(--space-1) 0; }

  /* .pill, not .badge: the legacy layer already has an unrelated .badge rule (the ledger's
     "Archived" marker) that this would otherwise silently restyle everywhere it appears. */
  .option-adds { margin: var(--space-1) 0 0; font-size: var(--text-sm); color: var(--color-text-muted); }   /* T-003 */
  .pill { display: inline-block; font-size: var(--text-sm); padding: 1px var(--space-2); border-radius: 9px; background: var(--color-surface); color: var(--color-text-muted); }
  /* Turn-downs: the decline panel on every gate (declinePanelHtml in app.js). */
  .decline-panel { margin-top: var(--space-3); }
  .decline-panel[open] { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); }
  .decline-summary { list-style: none; display: inline-block; cursor: pointer; border: 1px solid var(--color-danger); color: var(--color-danger); border-radius: var(--radius-sm); padding: var(--space-1) var(--space-3); }
  .decline-panel .field { margin-top: var(--space-2); }
  /* T-175: Review's check-only test run (precheckHtml in app.js). */
  .test-run { border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); margin: var(--space-2) 0; font-size: var(--text-md); }
  .test-run p { margin: var(--space-1) 0 0; }
  .test-run-passed { background: var(--color-success-surface); border: 1px solid var(--color-success-border); color: var(--color-success); }
  .test-run-failed { background: var(--color-danger-surface); color: var(--color-danger); }
  .test-run-not-run { background: var(--color-warning-surface); color: var(--color-warning); }
  /* T-328: the proof check's block on the Review screen (client/proof.js). */
  .proof-block { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); margin: var(--space-2) 0; font-size: var(--text-md); }
  .proof-block.proof-has-failures { border-color: var(--color-danger); }
  .proof-not-run { background: var(--color-warning-surface); color: var(--color-warning); }
  .proof-skipped { color: var(--color-text-muted); }
  .proof-part h4 { margin: var(--space-2) 0 var(--space-1); }
  .proof-part ul { list-style: none; padding: 0; margin: 0; }
  .proof-line { margin: var(--space-1) 0; }
  .proof-line-not-as-needed { color: var(--color-danger); }
  .proof-line-not-checked { color: var(--color-warning); }
  .proof-mark { display: inline-block; width: 1.2em; }
  /* The Deployed screen (founder, 2026-10-03): a little colour, the same green as a passed test run. */
  .deployed-check { color: var(--color-success); }
  .deployed-banner { background: var(--color-success-surface); border: 1px solid var(--color-success-border); color: var(--color-success); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); margin: var(--space-2) 0; font-size: var(--text-md); }
  .notice { font-size: var(--text-sm); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); margin-top: var(--space-2); }
  .notice-error { background: var(--color-danger-surface); color: var(--color-danger); }
  .notice-success { background: var(--color-surface); color: var(--color-success); }
  /* T-002: what the Admin still does by hand in Setup, on the Deployment screen before and after a deploy. */
  .setup-steps { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); padding: var(--space-3) var(--space-4); margin: var(--space-3) 0; font-family: var(--font-sans); font-size: var(--text-md); color: var(--color-text); }
  .setup-steps h3 { margin: 0 0 var(--space-1); font-size: var(--text-md); font-weight: 600; }
  .setup-steps p { margin: 0 0 var(--space-2); color: var(--color-text-muted); }
  .setup-steps ul { margin: 0; padding-left: var(--space-5); }
  .setup-steps li { margin: var(--space-1) 0; }
  /* Confirmation box on the login screen (password reset done, account deleted) - green, so a
     success never reads like the red .auth-error box beside it. */
  .auth-notice { background: var(--color-success-surface); border: 1px solid var(--color-success-border); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); font-size: var(--text-md); color: var(--color-success); }

  .avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--color-accent); color: var(--color-accent-contrast); display: flex; align-items: center; justify-content: center; font-weight: 600; border: none; cursor: pointer; font-family: var(--font-sans); }

  /* Staff dashboard. Names checked against the legacy layer (tests/api/test_staff_client_static.py). */
  .sidebar-nav { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4) var(--space-2); border-right: 1px solid var(--color-border); background: var(--color-surface); min-width: 180px; }
  .sidebar-nav a { padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); color: var(--color-text); text-decoration: none; font-size: var(--text-md); }
  .sidebar-nav a:hover { background: var(--color-bg); }
  .sidebar-nav a[aria-current="page"] { background: var(--color-bg); color: var(--color-accent); font-weight: 600; }
  .stat-card { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); background: var(--color-bg); }
  .stat-card .stat-value, .stat-value { font-size: var(--text-lg); font-weight: 600; }
  .stat-card .stat-label { font-size: var(--text-sm); color: var(--color-text-muted); }
  .stat-card-link { display: block; color: inherit; text-decoration: none; }
  .stat-card-link:hover, .stat-card-link:focus-visible { border-color: var(--color-accent); }
  .stat-card-attention { border-color: var(--color-warning); background: var(--color-warning-surface); }
  .stat-card-attention .stat-value { color: var(--color-warning); }
  .data-table { width: 100%; border-collapse: collapse; font-size: var(--text-md); }
  .data-table th { text-align: left; font-size: var(--text-sm); color: var(--color-text-muted); font-weight: 600; padding: var(--space-2); border-bottom: 1px solid var(--color-border); }
  .data-table td { padding: var(--space-2); border-bottom: 1px solid var(--color-border); vertical-align: top; }
  .data-table tr[data-href] { cursor: pointer; }
  .data-table tr[data-href]:hover td { background: var(--color-surface); }
  .toolbar { display: flex; align-items: flex-end; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-3); }
  .toolbar .field { margin-bottom: 0; }
  .field select { font-family: var(--font-sans); font-size: var(--text-md); padding: var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg); color: var(--color-text); }
  .secret-box { border: 1px solid var(--color-success-border); background: var(--color-success-surface); border-radius: var(--radius-md); padding: var(--space-3); margin-bottom: var(--space-3); }
  .secret-box code { font-family: var(--font-mono); word-break: break-all; }
  .cli-command { font-family: var(--font-mono); font-size: var(--text-sm); word-break: break-all; }
  .pill-ok { background: var(--color-success-surface); color: var(--color-success); }
  .pill-warn { background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); }
  .pill-bad { background: var(--color-danger-surface); color: var(--color-danger); }

  /* Workspace request sidebar. Names checked against the legacy layer (tests/api/test_client_static.py). */
  .request-new-btn { width: 100%; font-weight: 600; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); }
  .view-switch { display: flex; margin-top: var(--space-3); padding: 2px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
  .view-switch button { flex: 1; padding: var(--space-1) var(--space-2); border: none; border-radius: 6px; background: none; font-family: var(--font-sans); font-size: var(--text-md); color: var(--color-text-muted); cursor: pointer; }
  .view-switch button[aria-pressed="true"] { background: var(--color-bg); color: var(--color-text); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.12); }
  /* Account Usage tab (client/usage.js). Names checked against the legacy layer (tests/api/test_client_static.py). */
  .card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-3); }
  .card-head h3 { margin: 0; font-size: var(--text-md); font-weight: 600; }
  .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .data-table th.num { text-align: right; }
  .spend-card { display: grid; gap: var(--space-3); }
  .spend-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-1) var(--space-4); }
  .spend-amount { font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; }
  .spend-amount small { font-size: var(--text-md); font-weight: 400; color: var(--color-text-muted); }
  .spend-countdown { font-variant-numeric: tabular-nums; }
  .spend-meter { position: relative; height: 10px; border-radius: 5px; background: var(--color-surface); border: 1px solid var(--color-border); overflow: visible; }
  .spend-meter-fill { height: 100%; border-radius: 5px; background: var(--color-success); }
  .spend-meter-warn .spend-meter-fill { background: var(--color-warning); }
  .spend-meter-bad .spend-meter-fill { background: var(--color-danger); }
  .spend-meter-allow { height: 6px; }
  .spend-meter-allow .spend-meter-fill { background: var(--color-accent); }
  .spend-meter-allow.spend-meter-bad .spend-meter-fill { background: var(--color-danger); }   /* a reached daily or monthly limit */
  .spend-pace { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--color-text-muted); }
  .spend-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); }
  .spend-chip { display: inline-block; padding: 2px var(--space-2); border-radius: 999px; font-size: var(--text-sm); font-weight: 600; }
  .spend-chip-ok { background: var(--color-success-surface); color: var(--color-success); }
  .spend-chip-warn { background: var(--color-warning-surface); color: var(--color-warning); }
  .spend-chip-bad { background: var(--color-danger-surface); color: var(--color-danger); }
  .spend-allow { display: grid; gap: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--color-border); }
  .spend-allow-row { display: grid; grid-template-columns: 1fr auto; gap: var(--space-1) var(--space-3); align-items: center; font-size: var(--text-md); }
  .spend-allow-row .spend-meter { grid-column: 1 / -1; }
  .spend-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-3); }
  .spend-stat { font-size: var(--text-lg); font-weight: 600; font-variant-numeric: tabular-nums; }
  .spend-steps { display: flex; gap: 2px; height: 8px; border-radius: 4px; overflow: hidden; }
  .spend-step { display: block; height: 100%; flex-basis: 0; }
  .spend-step-planning { background: var(--color-accent); }
  .spend-step-building { background: var(--color-success); }
  .spend-step-revisions { background: var(--color-warning); }
  .spend-step-other { background: var(--color-text-muted); }
  .spend-legend { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin-top: var(--space-2); font-size: var(--text-md); }
  .spend-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: var(--space-1); }
  .spend-legend b { font-weight: 600; font-variant-numeric: tabular-nums; }
  .spend-details { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--color-border); font-size: var(--text-md); }
  .spend-details summary { cursor: pointer; color: var(--color-text-muted); }
  .spend-details dl { display: grid; grid-template-columns: auto 1fr; gap: var(--space-1) var(--space-4); margin: var(--space-2) 0 0; }
  .spend-details dt { color: var(--color-text-muted); }
  .spend-details dd { margin: 0; font-variant-numeric: tabular-nums; }
  .spend-sub { display: block; font-size: var(--text-sm); color: var(--color-text-muted); }
  .spend-switch { margin: 0; }
  .spend-switch button { flex: none; white-space: nowrap; padding: var(--space-1) var(--space-3); }
  .spend-month-row { cursor: pointer; }
  .spend-month-row:hover td { background: var(--color-surface); }
  .spend-month-row td:first-child::before { content: "▸"; display: inline-block; width: 14px; color: var(--color-text-muted); }
  .spend-month-row[aria-expanded="true"] td:first-child::before { content: "▾"; }
  .spend-month-row:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
  .spend-month-detail td { background: var(--color-surface); font-size: var(--text-sm); color: var(--color-text-muted); }
  .spend-csv { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--text-md); }
  .spend-csv select { font-family: var(--font-sans); font-size: var(--text-md); padding: 2px var(--space-1); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg); color: var(--color-text); }
  .spend-csv .btn { padding: var(--space-1) var(--space-3); }
  .request-filters { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); }
  .request-search { width: 100%; padding: var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg); color: var(--color-text); font-family: var(--font-sans); font-size: var(--text-md); }
  .request-filter-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); }
  .request-filter-row label { display: flex; align-items: center; gap: var(--space-1); cursor: pointer; }
  .request-filter-row select { padding: 1px var(--space-1); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg); color: var(--color-text); font-family: var(--font-sans); font-size: var(--text-sm); }
  .request-group-header { display: flex; justify-content: space-between; padding: var(--space-4) var(--space-2) var(--space-1); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); }
  .request-group-toggle { width: 100%; border: none; background: none; font-family: var(--font-sans); cursor: pointer; text-align: left; }
  .request-group-toggle:hover { color: var(--color-text); }
  .request-group-count { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
  .request-row { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-2); border-radius: var(--radius-md); cursor: pointer; }
  .request-row:hover { background: var(--color-surface); }
  .request-row.selected { background: var(--color-accent-soft); }
  .request-row:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
  .request-row-main { flex: 1; min-width: 0; }
  .request-row-title { font-size: var(--text-md); font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .request-row-built { margin-top: 2px; font-size: var(--text-sm); color: var(--color-text); overflow-wrap: anywhere; }
  .request-row-meta { margin-top: 2px; font-size: var(--text-sm); color: var(--color-text-muted); }
  .request-row-snippet { margin-top: var(--space-1); padding: 2px var(--space-1); border-radius: var(--radius-sm); background: var(--color-surface); font-size: var(--text-sm); line-height: 1.4; color: var(--color-text-muted); overflow-wrap: anywhere; }
  .request-row-snippet mark { background: var(--color-warning-surface); color: var(--color-text); border-radius: 2px; }
  /* Row actions show on hover or keyboard focus only; on a touch screen (no hover) they always show. */
  .request-row-action { flex: 0 0 auto; padding: 1px var(--space-2); border: 1px solid transparent; border-radius: var(--radius-sm); background: none; font-family: var(--font-sans); font-size: var(--text-sm); color: var(--color-text-muted); cursor: pointer; opacity: 0; }
  .request-row:hover .request-row-action, .request-row:focus-within .request-row-action, .request-row-action:focus-visible { opacity: 1; }
  @media (hover: none) { .request-row-action { opacity: 1; } }
  .request-row-action:hover { border-color: var(--color-border); color: var(--color-text); }
  .request-row-delete { font-size: var(--text-md); line-height: 1; }
  .request-row-delete:hover { background: var(--color-danger-surface); border-color: var(--color-danger); color: var(--color-danger); }
  .status-dot { flex: 0 0 auto; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; }
  .status-dot-needs { background: var(--color-warning); }
  .status-dot-failed { background: var(--color-danger); }
  .status-dot-working { background: var(--color-info); animation: status-dot-pulse 1.4s ease-in-out infinite; }
  .status-dot-done { background: var(--color-success); }
  .status-dot-declined { background: transparent; border: 1.5px solid var(--color-text-muted); box-sizing: border-box; }
  .status-dot-stale { background: var(--color-text-muted); opacity: 0.6; }
  @keyframes status-dot-pulse { 50% { opacity: 0.3; } }
  @media (prefers-reduced-motion: reduce) { .status-dot-working { animation: none; } }
  .request-list-note { padding: var(--space-4) var(--space-2); }
  .request-list-footer { display: flex; flex-wrap: wrap; gap: var(--space-3); padding: var(--space-3) var(--space-2) 0; margin-top: var(--space-2); border-top: 1px solid var(--color-border); }
  .link-btn { padding: 0; border: none; background: none; font-family: var(--font-sans); font-size: var(--text-sm); color: var(--color-accent); cursor: pointer; }
  .link-btn:hover { text-decoration: underline; }
  /* T-207: whether the connected user holds SFAA_Admin_All_Access (client/access_panel.js) */
  .access-panel { margin: var(--space-3) 0; padding: var(--space-3) var(--space-4); border: 1px solid var(--color-warning);
    border-radius: var(--radius-md); background: var(--color-warning-surface); color: var(--color-text); }
  .access-panel p { margin: 0 0 var(--space-2); }
  .access-panel-stop { border: 2px solid var(--color-danger); background: var(--color-danger-surface); }
  .access-panel-title { font-weight: 600; font-size: var(--text-md); }
  .access-panel-stop .access-panel-title { color: var(--color-danger); }
  .access-panel-ok { border-color: var(--color-success-border); background: var(--color-success-surface); }
  .access-panel-ok .access-panel-title { color: var(--color-success); }
  .access-steps { margin: 0 0 var(--space-3); padding-left: var(--space-5); }
  .access-marker { display: inline-block; padding: 0 var(--space-2); border: 1px solid var(--color-warning);
    border-radius: var(--radius-sm); background: var(--color-warning-surface); color: var(--color-warning);
    font-size: var(--text-sm); text-decoration: none; }
  a.access-marker:hover { text-decoration: underline; }
  /* T-242: the Review screen's "After the deploy" and "From the plan" blocks (client/review_notes.js) */
  .after-deploy { margin: var(--space-3) 0; padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-accent); border-radius: var(--radius-md); font-size: var(--text-md); }
  .after-deploy p { margin: 0 0 var(--space-2); }
  .after-deploy p:last-child { margin-bottom: 0; }
  .after-deploy ul { margin: 0 0 var(--space-2); padding-left: var(--space-5); }
  .after-deploy li { margin-bottom: var(--space-1); }
  .after-deploy-title { font-weight: 600; }
  .from-plan { margin: var(--space-3) 0; font-size: var(--text-md); }
  .from-plan > summary { cursor: pointer; color: var(--color-text-muted); }
  .from-plan ul { margin: var(--space-2) 0 0; padding-left: var(--space-5); color: var(--color-text-muted); }
  .from-plan li { margin-bottom: var(--space-2); }
  /* Founder, 2026-10-04: a list of names is a list, never comma-separated (client/name_list.js) */
  .name-list { margin: var(--space-1) 0; padding-left: var(--space-5); }
  .name-list li { margin-bottom: var(--space-1); }
  /* Founder, 2026-10-04: the one code box, with its Copy button (client/code_box.js) */
  .code-block { display: flex; flex-direction: column; }
  .code-block > pre { margin-top: 0; }
  .copy-code-btn { align-self: flex-end; margin-bottom: var(--space-1); padding: var(--space-1) var(--space-2);
    font-family: var(--font-sans); font-size: var(--text-sm); color: var(--color-text-muted); cursor: pointer;
    background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
  .copy-code-ok { color: var(--color-success); font-weight: 700; }
  .copy-code-btn:hover { color: var(--color-text); border-color: var(--color-text-muted); }
  .copy-code-scratch { position: fixed; top: -1000px; left: -1000px; }
  /* T-233 phase 2: the Discovery need layout (client/discovery_need.js) */
  .need-strip { margin: var(--space-3) 0; font-size: var(--text-md); color: var(--color-text-muted); }
  .need-strip:empty { display: none; }
  .need-card > h3 { margin: 0 0 var(--space-3); font-size: var(--text-lg); }
  .need-facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-4); margin: 0 0 var(--space-3); }
  .need-facts dt { font-weight: 600; color: var(--color-text-muted); }
  .need-facts dd { margin: 0; }
  .need-facts dd.need-question { grid-column: 2; }
  .need-mark-stated, .need-mark-assumed, .need-mark-corrected { margin-left: var(--space-2); padding: 0 var(--space-2);
    border-radius: var(--radius-sm); font-size: var(--text-sm); white-space: nowrap; }
  .need-mark-stated { background: var(--color-success-surface); color: var(--color-success); }
  .need-mark-assumed { background: var(--color-warning-surface); color: var(--color-warning); }
  .need-mark-corrected { background: var(--color-accent-soft); color: var(--color-accent); }
  .need-admin-text { display: block; margin-top: var(--space-1); font-size: var(--text-sm); color: var(--color-text-muted); }
  .need-built { margin: var(--space-3) 0; font-weight: 600; }
  .need-note { margin: var(--space-2) 0; font-size: var(--text-md); color: var(--color-text-muted); }
  .need-question { margin: var(--space-3) 0; }
  .need-question-line { margin: 0 0 var(--space-2); }
  .need-card select, .need-question select { max-width: 100%; box-sizing: border-box; }
  .need-selected { margin: var(--space-2) 0; }
  .need-why, .need-inventory, .need-review, .need-details { margin: var(--space-3) 0; font-size: var(--text-md); }
  .need-why > summary, .need-inventory > summary, .need-review > summary, .need-details > summary {
    cursor: pointer; color: var(--color-text-muted); }
  .need-why ul { margin: var(--space-2) 0 0; padding-left: var(--space-5); }
  .need-why li { margin-bottom: var(--space-2); }
  .need-about > h3 { margin: 0 0 var(--space-2); font-size: var(--text-md); }
  .need-review h4 { margin: var(--space-3) 0 var(--space-2); }
  /* T-233 phase 3: Change and Plan again */
  .need-change, .need-undo { margin-left: var(--space-2); padding: 0 var(--space-2); border: 1px solid var(--color-border);
    border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-accent);
    font-size: var(--text-sm); cursor: pointer; }
  .need-change-box { display: flex; gap: var(--space-2); align-items: flex-start; margin-top: var(--space-1); }
  .need-change-box textarea { flex: 1; max-width: 100%; box-sizing: border-box; font: inherit; padding: var(--space-1) var(--space-2);
    border: 1px solid var(--color-accent); border-radius: var(--radius-sm); }
  .need-unplaced ul { margin: 0; padding-left: var(--space-5); }
  .need-error { margin: var(--space-2) 0; color: var(--color-danger); }
  /* T-343: the request as asks, above the part cards */
  .ask-list { margin: 0; }
  .ask-list dt { margin-top: var(--space-2); font-weight: 600; }
  .ask-list dd { margin: var(--space-1) 0 0 var(--space-3); }
  .ask-fate { margin-left: var(--space-2); font-weight: 400; font-size: var(--text-sm); color: var(--color-text-muted); }
  .ask-second-reading { display: block; margin-top: var(--space-1); font-size: var(--text-sm); color: var(--color-warning); }
  .need-error:empty { display: none; }
  /* T-340: a refusal names each refused part in its own paragraph (blank lines in the server's text, set as textContent) */
  .need-error { white-space: pre-line; }
  /* T-241: About this org */
  .need-about-group { margin: var(--space-2) 0 var(--space-3); }
  .need-about-group > p { margin: 0 0 var(--space-1); }
  .need-about-unseen { margin: var(--space-3) 0 0; font-size: var(--text-sm); color: var(--color-text-muted); }
}

@layer legacy {
@font-face {
  font-family: 'IBM Plex Sans';
  font-weight: 400;
  font-display: swap;
  src: url('fonts/plex-sans-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-weight: 500;
  font-display: swap;
  src: url('fonts/plex-sans-500.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-weight: 600;
  font-display: swap;
  src: url('fonts/plex-sans-600.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-weight: 500;
  font-display: swap;
  src: url('fonts/plex-mono-500.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-weight: 600;
  font-display: swap;
  src: url('fonts/plex-mono-600.woff2') format('woff2');
}

* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, sans-serif; }
/* Horizontal split: the org bar spans the top; the sidebar and the main panel share the row below. */
#app { display: grid; grid-template-columns: 260px 1fr; grid-template-rows: auto 1fr; height: 100vh; }
#org-bar { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid #ccc; background: #f7f7f7; }
#connect-help-text { flex-basis: 100%; font-size: 12px; color: #666; }
#sidebar { grid-row: 2; grid-column: 1; min-height: 0; border-right: 1px solid #ccc; padding: 12px; overflow-y: auto; }
#main-panel { grid-row: 2; grid-column: 2; min-height: 0; padding: 20px; overflow-y: auto; }
#error-banner { background: #fdd; border: 1px solid #c33; padding: 10px; margin-bottom: 12px; border-radius: 4px; }
#status-banner { background: #eef; border: 1px solid #88a; padding: 10px; margin-bottom: 12px; border-radius: 4px; }
.staff-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.tabs { display: flex; gap: 8px; margin-bottom: 8px; }
.tab-btn { padding: 6px 12px; cursor: pointer; border: 1px solid #ccc; background: #f5f5f5; }
.tab-btn.active { background: #fff; font-weight: bold; }
pre.code-view { background: #f5f5f5; padding: 12px; overflow-x: auto; white-space: pre-wrap; border-radius: 4px; }
textarea.feedback { width: 100%; height: 70px; margin: 8px 0; font-family: inherit; }
button { padding: 8px 14px; cursor: pointer; }
button:disabled { opacity: 0.5; cursor: not-allowed; }
button.deploy-btn { background: #c33; color: white; border: none; }
button.decline-btn { background: none; border: 1px solid #c33; color: #c33; margin-left: 8px; }
button.busy::after { content: " ..."; }
.coverage-row.under-threshold { color: #c33; font-weight: bold; }
.conflict { margin: 10px 0; }
.conflict select { margin-left: 8px; }
.deployment-error-note { font-size: 12px; color: #a55; font-weight: bold; margin-bottom: 4px; }
.components-header { font-size: 13px; color: #444; margin: 4px 0 10px; }
.component { margin-bottom: 16px; }
.component h3 { font-size: 13px; margin: 0 0 4px; font-weight: 600; }
.warnings { border-left: 3px solid #e0a800; padding: 4px 10px; margin-bottom: 10px; font-size: 13px; }
.component-summary { margin: 4px 0 10px; font-size: 13px; }
.component-summary dt { font-weight: 600; color: #444; }
.component-summary dd { margin: 0 0 6px 12px; white-space: pre-wrap; }
.org-failures-note { font-size: 12px; color: #666; margin: 2px 0 6px; }
.admin-permission-set-note { font-size: 12px; color: #666; margin: 2px 0 6px; }
.org-coverage { font-size: 12px; color: #666; }
.pending-note { font-size: 12px; color: #666; font-style: italic; margin-bottom: 4px; }
.history-panel { margin-top: 24px; border-top: 1px solid #ccc; padding-top: 8px; }
.history-panel > summary { cursor: pointer; font-weight: bold; }
.history-event { margin: 6px 0; padding: 4px 8px; border: 1px solid #ddd; border-radius: 4px; }
.history-event > summary { cursor: pointer; }
.history-detail { padding: 6px 0; font-size: 13px; }
.history-block { margin: 8px 0; padding: 8px 10px; border-left: 4px solid #999; border-radius: 3px; }
.history-block-label { font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
.history-block-text { white-space: pre-wrap; }
.history-block.original-request { background: #eef4ff; border-left-color: #2b6cb0; }
.history-block.original-request .history-block-label { color: #2b6cb0; }
.history-block.plan-summary { background: #f5f5f5; border-left-color: #999; color: #444; }
.history-block.plan-summary .history-block-label { color: #666; }
.ledger-table { border-collapse: collapse; width: 100%; }
.ledger-table th, .ledger-table td { border-bottom: 1px solid #ddd; padding: 6px 8px; text-align: left; }
.ledger-row { cursor: pointer; }
.ledger-row:hover { background: #eee; }
.badge { font-size: 11px; background: #eee; border: 1px solid #ccc; border-radius: 3px; padding: 1px 5px; margin-left: 6px; }

.auth-screen { grid-column: 1 / -1; grid-row: 1 / -1; min-height: 100vh; box-sizing: border-box; padding: 24px 0; display: flex; align-items: center; justify-content: center; background: #F3F4F6; font-family: 'IBM Plex Sans', sans-serif; color: #14161A; }
.auth-card { max-width: 420px; width: 100%; box-sizing: border-box; background: #FFFFFF; border: 1px solid #E5E7EB; border-radius: 16px; box-shadow: 0 1px 2px rgba(16,24,40,0.04); padding: 48px 44px; display: flex; flex-direction: column; gap: 28px; }
.auth-card.auth-card-register { padding: 40px 44px 36px; gap: 22px; }
.auth-brand { display: flex; flex-direction: column; gap: 6px; }
/* .auth-logo/.auth-tagline are also reused verbatim by beta.html's brand block - check that page
   before changing either rule for an auth-screen-only reason. The .auth-card overrides below are
   the auth screens' own, larger brand; beta.html keeps the base size under its headline. */
.auth-logo { font-family: 'IBM Plex Mono', monospace; font-weight: 600; font-size: 20px; letter-spacing: -0.02em; }
.auth-tagline { font-size: 12px; color: #6B7280; margin-top: -2px; }
.auth-card .auth-logo { font-size: 28px; }
.auth-card .auth-tagline { font-size: 14px; }
.auth-subtitle { font-size: 15px; color: #6B7280; }
.auth-error { background: #FEF2F2; border: 1px solid #FECACA; border-radius: 10px; padding: 10px 12px; font-size: 14px; color: #B42318; }
.auth-fields { display: flex; flex-direction: column; gap: 16px; }
.auth-card-register .auth-fields { gap: 14px; }
.auth-field { display: flex; flex-direction: column; gap: 6px; }
.auth-field span { font-size: 14px; font-weight: 500; color: #374151; }
.auth-field input { height: 46px; box-sizing: border-box; border: 1px solid #D1D5DB; border-radius: 10px; padding: 0 14px; font-size: 16px; font-family: inherit; color: #14161A; background: #FFFFFF; }
.auth-field input::placeholder { color: #9CA3AF; }
.auth-field input:focus { outline: none; border-color: #3730A9; }
/* .auth-field prefix: both sit inside a label, where the bare class loses to `.auth-field span`. */
.auth-field .auth-hint { font-size: 13px; font-weight: 400; color: #9CA3AF; }
.auth-field .auth-optional { color: #9CA3AF; font-weight: 400; }
.auth-checkbox { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; color: #374151; line-height: 1.4; }
.auth-checkbox input { margin-top: 2px; width: 16px; height: 16px; accent-color: #3730A9; }
.auth-checkbox a { color: #3730A9; font-weight: 600; }
.auth-submit { height: 46px; border: none; border-radius: 10px; background: #3730A9; color: #FFFFFF; font-size: 16px; font-weight: 600; font-family: inherit; cursor: pointer; }
.auth-divider { height: 1px; background: #E5E7EB; }
.auth-switch { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; color: #6B7280; }
.auth-switch-center { justify-content: center; }
.auth-switch a { font-size: 14px; font-weight: 600; color: #3730A9; }

.terms-page { max-width: 600px; margin: 0 auto; padding: 44px 48px; box-sizing: border-box; font-family: 'IBM Plex Sans', sans-serif; color: #14161A; background: #FFFFFF; display: flex; flex-direction: column; gap: 20px; }
.terms-back { font-size: 13px; color: #6B7280; font-weight: 500; text-decoration: none; }
.terms-back:hover { opacity: 0.8; }
.terms-header { display: flex; align-items: baseline; justify-content: space-between; }
.terms-title { margin: 0; font-size: 24px; font-family: 'IBM Plex Mono', monospace; font-weight: 600; }
.terms-version-pill { font-size: 12px; color: #6B7280; background: #F3F4F6; padding: 4px 10px; border-radius: 999px; }
.terms-banner { background: #FFF7ED; border: 1px solid #FED7AA; border-radius: 10px; padding: 12px 16px; font-size: 13px; color: #9A3412; line-height: 1.5; }
.terms-sections { display: flex; flex-direction: column; gap: 16px; font-size: 14px; line-height: 1.6; color: #374151; }
.terms-section-heading { font-size: 14px; margin: 0 0 6px; color: #14161A; }
.terms-page-embedded { margin: 0; max-width: 480px; max-height: 90vh; overflow-y: auto; border: 1px solid #E5E7EB; border-radius: 16px; box-shadow: 0 1px 2px rgba(16,24,40,0.04); }
.terms-actions { display: flex; justify-content: flex-end; }

#feedback-link-bar { font-size: 12px; color: #666; margin-bottom: 8px; }
#feedback-link-bar a { color: #2b6cb0; }

/* beta landing */
.beta-page { max-width: 480px; margin: 0 auto; padding: 40px 16px 56px; box-sizing: border-box; font-family: 'IBM Plex Sans', sans-serif; color: #14161A; display: flex; flex-direction: column; gap: 20px; }
.beta-brand { display: flex; flex-direction: column; gap: 4px; }
.beta-headline { margin: 0; font-size: 22px; font-weight: 600; }
.beta-values { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: #374151; }
.beta-section-heading { font-size: 15px; font-weight: 600; margin: 0 0 6px; }
.beta-how ol { margin: 0; padding-left: 20px; font-size: 14px; color: #374151; display: flex; flex-direction: column; gap: 4px; }
.beta-rules { margin: 0; padding-left: 20px; font-size: 13px; color: #6B7280; display: flex; flex-direction: column; gap: 4px; }
.beta-cta { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; padding: 0 20px; }
}

@layer pages {
  .beta-lead { margin: 0; font-size: 16px; line-height: 1.5; color: var(--color-text); }
  .form-page { max-width: 640px; margin: var(--space-6) auto; padding: 0 var(--space-4); }
  /* T-091 accept screen: fills #app like the auth screen, one centred card. */
  .terms-gate { grid-column: 1 / -1; grid-row: 1 / -1; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--space-4); background: var(--color-surface); }
  .terms-gate-card { max-width: 560px; width: 100%; }
  .terms-gate-actions { display: flex; gap: var(--space-2); }
  .terms-gate-leave { margin-top: var(--space-4); font-size: var(--text-sm); }
  .terms-gate-new { padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-accent-soft); }
  /* The published Terms of Use and Privacy Policy (/terms, /privacy), built by sfaa/legal_pages.py. */
  .legal-page { max-width: 820px; margin: 0 auto; padding: var(--space-6) var(--space-4); box-sizing: border-box; }
  .legal-back { font-size: var(--text-md); color: var(--color-text-muted); text-decoration: none; }
  .legal-back:hover { color: var(--color-text); }
  .legal-title { margin: var(--space-4) 0 var(--space-2); font-size: 28px; }
  .legal-doc { font-size: 15px; line-height: 1.6; overflow-wrap: break-word; }
  .legal-doc h2 { margin: var(--space-6) 0 var(--space-2); font-size: 22px; }
  .legal-doc h3 { margin: var(--space-5) 0 var(--space-2); font-size: var(--text-lg); }
  .legal-doc p, .legal-doc ul, .legal-doc ol { margin: 0 0 var(--space-3); }
  .legal-doc li { margin-bottom: var(--space-1); }
  .legal-doc a { color: var(--color-accent); }
  .legal-doc hr { border: none; border-top: 1px solid var(--color-border); margin: var(--space-5) 0; }
  .legal-table { overflow-x: auto; margin: 0 0 var(--space-4); }
  .legal-table table { border-collapse: collapse; width: 100%; min-width: 600px; font-size: var(--text-md); } /* narrower screens scroll the table sideways */
  .legal-table th, .legal-table td { border: 1px solid var(--color-border); padding: var(--space-2); text-align: left; vertical-align: top; }
  .legal-table th { background: var(--color-surface); }
  #staff-shell { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr; height: 100vh; } /* only #staff-panel scrolls; the sidebar stays put */
  #staff-top { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--color-border); background: var(--color-surface); }
  #staff-panel { padding: var(--space-5); overflow-y: auto; min-height: 0; }
  #panel-body { max-width: 1200px; }
  #staff-panel .stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); }
  #app {
    grid-template-rows: auto auto 1fr;
  }
  #banners {
    grid-column: 1 / -1;
  }
  /* minmax(0, 1fr), not 1fr: a bare 1fr never shrinks below its widest content (a long API name, a code
     line), so a wide sidebar pushed the main panel off the right edge instead of wrapping it. */
  #app { grid-template-columns: var(--sidebar-width, 260px) minmax(0, 1fr); } /* width set by the sidebar resizer */
  /* Shares the sidebar's grid cell, pinned to its right edge and pushed just past it, so it never covers
     the sidebar's scrollbar. Invisible until hovered, focused or dragged. */
  .sidebar-resizer {
    grid-row: 3;
    grid-column: 1;
    justify-self: end;
    width: 6px;
    transform: translateX(100%);
    z-index: 2;
    cursor: col-resize;
    touch-action: none;
  }
  .sidebar-resizer:hover, .sidebar-resizer:focus-visible, .sidebar-resizer.dragging {
    background: var(--color-accent);
    opacity: 0.5;
    outline: none;
  }
  #sidebar,
  #main-panel {
    grid-row: 3; /* legacy pins these to row 2; this layer wins per the cascade-layer order above */
  }
  #settings-page {
    grid-row: 3;
    grid-column: 1 / -1;
    overflow-y: auto;
    padding: 24px;
  }

  #top-bar {
    grid-row: 1;
    grid-column: 1 / -1;
    display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-4);
    border-bottom: 1px solid var(--color-border); background: var(--color-surface);
  }
  #top-bar .sp { flex: 1; }
  #banners { grid-row: 2; }

  .settings-column { max-width: 720px; margin: 0 auto; }
  .settings-column .back-link { display: inline-block; margin-bottom: var(--space-4); color: var(--color-accent); text-decoration: none; font-size: var(--text-sm); }
}