/* ── Design Tokens ────────────────────────────────────────── */
    :root {
      --bg:           #F1EFED;
      --text:         #0A1916;
      --text-muted:   #4A6360;
      --surface:      #FFFFFF;
      --surface-dim:  #EAE8E5;
      --border:       rgba(10, 25, 22, 0.10);
      --shadow-sm:    0 1px 3px rgba(10,25,22,.06), 0 1px 2px rgba(10,25,22,.04);
      --shadow-md:    0 4px 16px rgba(10,25,22,.08), 0 2px 6px rgba(10,25,22,.05);
      --shadow-lg:    0 12px 40px rgba(10,25,22,.12), 0 4px 12px rgba(10,25,22,.06);
      --accent:       #0d9488;

      --ok-dot:       #16A34A;
      --ok-tint:      #DCFCE7;
      --ok-text:      #14532D;
      --watch-dot:    #D97706;
      --watch-tint:   #FEF3C7;
      --watch-text:   #78350F;
      --danger-dot:   #DC2626;
      --danger-tint:  #FEE2E2;
      --danger-text:  #7F1D1D;
      --neutral-dot:  #6B7F7D;
      --neutral-tint: #F1EFED;

      --pad:          24px;
      --radius:       16px;
      --radius-sm:    10px;
      --gap:          14px;
      --transition:   200ms cubic-bezier(.4,0,.2,1);

      --card-bg:      #FFFFFF;
      --input-bg:     #F1EFED;
      --hover-bg:     rgba(10,25,22,.05);
    }

    [data-theme="dark"] {
      --bg:           #141416;
      --text:         #F0F0F1;
      --text-muted:   #96969E;
      --surface:      #222225;
      --surface-dim:  #303035;
      --border:       rgba(240,240,241,0.10);
      --shadow-sm:    0 1px 3px rgba(0,0,0,.30), 0 1px 2px rgba(0,0,0,.22);
      --shadow-md:    0 4px 16px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.28);
      --shadow-lg:    0 12px 40px rgba(0,0,0,.55), 0 4px 12px rgba(0,0,0,.35);

      --ok-dot:       #22C55E;
      --ok-tint:      rgba(34,197,94,.15);
      --ok-text:      #86EFAC;
      --watch-dot:    #F59E0B;
      --watch-tint:   rgba(245,158,11,.15);
      --watch-text:   #FCD34D;
      --danger-dot:   #FF3030;
      --danger-tint:  rgba(255,48,48,.22);
      --danger-text:  #FCA5A5;
      --danger-glow:  0 0 16px rgba(255,40,40,.50), 0 0 40px rgba(255,30,30,.20);
      --danger-inset: inset 0 0 24px rgba(255,30,30,.06);
      --danger-dot-glow: 0 0 0 3px rgba(255,53,53,.30), 0 0 10px rgba(255,40,40,.80), 0 0 20px rgba(255,30,30,.40);
      --neutral-dot:  #6B7280;
      --neutral-tint: rgba(107,114,128,.15);
      --accent:       #3B82F6;

      color-scheme: dark;

      --card-bg:      #222225;
      --input-bg:     #303035;
      --hover-bg:     rgba(240,240,241,.07);
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html, body { height: 100%; overflow-x: hidden; } /* prevent horizontal scroll on narrow viewports */
    body {
      font-family: "Aptos", "Segoe UI", system-ui, sans-serif;
      background: var(--bg);
      color: var(--text);
      font-size: 14px;
      line-height: 1.5;
    }
    button { cursor: pointer; border: none; background: none; font: inherit; }
    select { font: inherit; }

    /* #90: visually-hidden labels for screen readers (WCAG SC 3.3.2) */
    .sr-only {
      position: absolute; width: 1px; height: 1px;
      padding: 0; margin: -1px; overflow: hidden;
      clip: rect(0,0,0,0); white-space: nowrap; border: 0;
    }

    /* #89: keyboard focus visibility (WCAG 2.4.7) */
    :focus-visible {
      outline: 2px solid var(--accent, #3b82f6);
      outline-offset: 2px;
    }
    button:focus-visible,
    select:focus-visible,
    input:focus-visible,
    textarea:focus-visible,
    [tabindex]:focus-visible {
      outline: 2px solid var(--accent, #3b82f6);
      outline-offset: 2px;
      border-radius: 3px;
    }

    /* ── Shell ───────────────────────────────────────────────── */
    .shell { display: flex; flex-direction: column; min-height: 100vh; }

    /* ── Control Bar ─────────────────────────────────────────── */
    .control-bar {
      background: var(--surface);
      border-bottom: 1px solid var(--border);
      padding: 0 var(--pad);
      height: 56px;
      display: flex;
      align-items: center;
      gap: 14px;
      box-shadow: var(--shadow-sm);
      position: sticky;
      top: 0;
      z-index: 100;
      flex-shrink: 0;
    }
    .logo {
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--text);
      opacity: .5;
      margin-right: 4px;
      white-space: nowrap;
    }
    .divider { width: 1px; height: 24px; background: var(--border); flex-shrink: 0; }

    /* Period select */
    .cb-select {
      height: 36px;
      padding: 0 10px;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      background: var(--bg);
      color: var(--text);
      font-size: 16px; /* 16px prevents iOS auto-zoom */
      touch-action: manipulation;
    }
    .search-wrap {
      position: relative;
      display: flex;
      align-items: center;
      flex-shrink: 0;
    }
    .search-input {
      height: 36px;
      padding: 0 26px 0 10px;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      background: var(--bg);
      color: var(--text);
      font: inherit;
      font-size: 16px; /* 16px prevents iOS auto-zoom */
      width: 160px;
      outline: none;
      transition: border-color var(--transition);
      touch-action: manipulation; /* prevent 300ms tap delay on iOS */
    }
    .search-input:focus { border-color: var(--text-muted); }
    .search-input::placeholder { color: var(--text-muted); opacity: .55; }
    .search-clear {
      position: absolute;
      right: 6px;
      background: none;
      border: none;
      color: var(--text-muted);
      font-size: 16px;
      cursor: pointer;
      padding: 0 2px;
      display: none;
      line-height: 1;
      min-height: 32px;
      touch-action: manipulation;
    }
    .search-clear.visible { display: block; }
    [data-theme="dark"] .search-input {
      background: var(--surface-dim); border-color: var(--border);
    }
    @media (max-width: 900px) { .search-input { width: 120px; } }
    /* search-wrap, sort, compare, and action buttons are hidden at ≤1280px via .overflow-menu-btn media query (#53/#54) */
    .sort-label-hide { /* used below in responsive */ }
    .cb-label {
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: .06em;
      color: var(--text-muted);
      white-space: nowrap;
    }

    /* Metric toggle */
    .metric-toggle {
      display: flex;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      overflow: hidden;
      flex-shrink: 0;
    }
    .metric-toggle button {
      padding: 0 14px;
      min-height: 44px;
      font-size: 12px;
      font-weight: 600;
      color: var(--text-muted);
      background: var(--bg);
      transition: background var(--transition), color var(--transition);
      border-right: 1px solid var(--border);
      touch-action: manipulation;
    }
    .metric-toggle button:last-child { border-right: none; }
    .metric-toggle button.active {
      background: var(--text);
      color: #F1EFED;
    }

    .compare-toggle {
      display: flex;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      overflow: hidden;
      flex-shrink: 0;
    }
    .compare-toggle button {
      padding: 0 12px;
      height: 44px; /* #78: HIG 44px touch target at all viewports */
      min-height: 44px;
      font-size: 12px;
      font-weight: 600;
      color: var(--text-muted);
      background: var(--bg);
      transition: background var(--transition), color var(--transition);
      border-right: 1px solid var(--border);
      white-space: nowrap;
      touch-action: manipulation;
    }
    .compare-toggle button:last-child { border-right: none; }
    .compare-toggle button.active {
      background: var(--text);
      color: #F1EFED;
    }

    /* Summary badges */
    .badge-bar { margin-left: auto; display: flex; gap: 8px; align-items: center; }
    .badge {
      display: inline-flex; align-items: center; gap: 5px;
      padding: 4px 10px; border-radius: 99px;
      font-size: 12px; font-weight: 600;
    }
    .badge { cursor: pointer; transition: opacity var(--transition), box-shadow var(--transition); min-height: 44px; touch-action: manipulation; } /* #88: 44px HIG touch target */
    .badge:hover { opacity: .82; }
    .badge:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } /* #88: keyboard focus ring */
    .badge.badge-active { box-shadow: 0 0 0 2px currentColor; }
    .badge.badge-inactive { opacity: .32; }
    .badge-danger  { background: var(--danger-tint); color: var(--danger-text); }
    .badge-watch   { background: var(--watch-tint);  color: var(--watch-text);  }
    .badge-ok      { background: var(--ok-tint);     color: var(--ok-text);     }
    /* #60: missing expected income */
    .badge-missing { background: var(--neutral-tint, rgba(120,120,120,.12)); color: var(--text-muted); }
    .missing-pill  { display:inline-flex; align-items:center; gap:4px; padding:6px 10px; min-height:32px; border-radius:99px; font-size:10px; font-weight:700; background:rgba(120,120,120,.15); color:var(--text-muted); border:1px solid rgba(120,120,120,.25); cursor:pointer; white-space:nowrap; touch-action:manipulation; }
    .missing-pill:hover { background:rgba(120,120,120,.25); }
    /* trend chips */
    .trend-chip { display:inline-flex; align-items:center; gap:2px; padding:1px 6px; border-radius:999px; font-size:0.7rem; font-weight:600; line-height:1.4; }
    .trend-chip.declining { background: rgba(239,68,68,0.15); color: #f87171; }
    .trend-chip.improving { background: rgba(34,197,94,0.15); color: #4ade80; }
    .badge::before {
      content: ""; width: 7px; height: 7px;
      border-radius: 50%; background: currentColor;
    }

    /* ── Breadcrumb ───────────────────────────────────────────── */
    .breadcrumb-bar {
      background: var(--surface);
      border-bottom: 1px solid var(--border);
      padding: 0 var(--pad);
      height: 40px;
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      flex-shrink: 0;
      position: sticky;
      top: var(--header-h, 56px);
      z-index: 99;
      box-shadow: var(--shadow-sm);
    }
    .breadcrumb-bar.hidden { display: none; }
    @media (max-width: 480px) {
      .breadcrumb-bar {
        /* top: 0 was wrong — control bar is now 3 rows tall at this width.
           ResizeObserver in bento.js measures the real height and sets --header-h,
           so let the dynamic variable do its job. */
        top: var(--header-h, 130px);
        position: sticky;
      }
    }
    /* Escape hint shown in breadcrumb bar */
    .esc-hint {
      margin-left: auto;
      font-size: 11px;
      color: var(--text-muted);
      display: flex;
      align-items: center;
      gap: 5px;
    }
    .esc-key {
      border: 1px solid var(--border);
      border-radius: 4px;
      padding: 1px 5px;
      font-size: 10px;
      font-family: monospace;
      background: var(--bg);
      color: var(--text-muted);
    }
    .crumb {
      color: var(--text-muted);
      cursor: pointer;
      padding: 3px 6px;
      border-radius: 6px;
      transition: background var(--transition), color var(--transition);
      font-weight: 500;
      min-height: 44px; /* ≥44px HIG touch target — matches mobile card tap targets */
      display: inline-flex;
      align-items: center;
      touch-action: manipulation;
    }
    .crumb:hover { background: var(--surface-dim); color: var(--text); }
    .crumb.active { color: var(--text); font-weight: 600; cursor: default; }
    .crumb.active:hover { background: none; }
    .crumb-sep { color: var(--border); font-size: 14px; }
    .crumb-dot {
      width: 8px; height: 8px; border-radius: 50%;
      display: inline-block; margin-right: 4px; vertical-align: middle;
    }

    /* ── Canvas ──────────────────────────────────────────────── */
    .canvas {
      padding: var(--pad);
      display: flex;
      flex-direction: column;
      gap: var(--gap);
      max-width: 1440px;
      margin: 0 auto;
      width: 100%;
      flex: 1;
    }

    /* ── Bento base ──────────────────────────────────────────── */
    .bento {
      background: var(--surface);
      border-radius: var(--radius);
      border: 1px solid var(--border);
      box-shadow: var(--shadow-sm);
      padding: var(--pad);
    }

    /* ── Narrative ───────────────────────────────────────────── */
    .narrative {
      display: grid;
      grid-template-columns: 40px 1fr;
      gap: 20px;
      align-items: start;
    }
    .narrative-icon {
      width: 40px; height: 40px;
      border-radius: var(--radius-sm);
      background: var(--text);
      color: var(--bg);
      display: flex; align-items: center; justify-content: center;
      font-size: 18px; flex-shrink: 0;
    }
    .narrative-label {
      font-size: 10px; font-weight: 700;
      text-transform: uppercase; letter-spacing: .08em;
      color: var(--text-muted); margin-bottom: 10px;
    }

    /* ── AI Narrative ──────────────────────────────────────────── */
    .ai-narrative-divider {
      margin: 14px 0 10px;
      border: none;
      border-top: 1px solid var(--border);
    }
    .ai-narrative-btn {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 5px 12px; min-height: 36px; border-radius: 6px; border: 1px solid var(--border);
      background: var(--surface-dim); color: var(--text); font-size: 14px;
      font-weight: 600; cursor: pointer; transition: background var(--transition);
      touch-action: manipulation;
    }
    .ai-narrative-btn:hover { background: var(--hover-bg); }
    .ai-narrative-btn:disabled { opacity: .45; cursor: not-allowed; }
    .ai-narrative-btn .ai-spin {
      display: inline-block; width: 10px; height: 10px;
      border: 2px solid var(--border); border-top-color: var(--accent);
      border-radius: 50%; animation: spin .7s linear infinite;
    }
    .ai-narrative-prose {
      margin-top: 10px; font-size: 13px; line-height: 1.65;
      color: var(--text);
    }
    .ai-narrative-meta {
      margin-top: 8px; font-size: 10px; color: var(--text-muted);
      display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
    }
    .ai-narrative-regen {
      background: none; border: none; color: var(--accent); font-size: 14px;
      cursor: pointer; padding: 6px 4px; min-height: 32px; text-decoration: underline;
      font-weight: 600; touch-action: manipulation;
    }
    [data-theme="dark"] .ai-narrative-btn { background: var(--surface-dim); }

    /* Variance list */
    .variance-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .variance-row {
      display: flex;
      align-items: baseline;
      gap: 8px;
      font-size: 13px;
      line-height: 1.5;
    }
    .variance-row[data-jump] { min-height: 32px; align-items: center; touch-action: manipulation; }
    .vr-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; }
    .vr-text { color: var(--text); }
    .vr-text strong { font-weight: 600; }
    .vr-text .vr-up   { color: var(--ok-dot);     font-weight: 600; }  /* GREEN = favorable (income up) */
    .vr-text .vr-down { color: var(--danger-dot); font-weight: 600; }  /* RED = unfavorable (income down) */
    .vr-text .vr-muted { color: var(--text-muted); font-size: 12px; }

    /* ── Section heading ─────────────────────────────────────── */
    .section-heading {
      font-size: 13px; font-weight: 700; color: var(--text);
      margin-bottom: 0;
      display: flex; align-items: center; gap: 8px;
    }
    .section-count {
      font-size: 11px; font-weight: 500;
      color: var(--text-muted); font-weight: 400;
    }

    /* ── Card Grid ───────────────────────────────────────────── */
    .card-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: var(--gap);
    }
    @media (max-width: 1200px) { .card-grid { grid-template-columns: repeat(4, 1fr); } }
    @media (max-width: 900px)  { .card-grid { grid-template-columns: repeat(3, 1fr); } }
    @media (max-width: 600px)  { .card-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 430px)  { .card-grid { grid-template-columns: 1fr !important; } }

    /* ── Activity / CC Card ──────────────────────────────────── */
    .scope-card {
      background: var(--surface);
      border-radius: var(--radius);
      border: 1.5px solid var(--border);
      box-shadow: var(--shadow-sm);
      padding: var(--pad);
      cursor: pointer;
      display: flex; flex-direction: column; gap: 12px;
      position: relative;
      transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
      user-select: none;
      touch-action: manipulation;
    }
    .scope-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
    .scope-card.sev-danger { border-color: rgba(220,38,38,.75); }
    .scope-card.sev-watch  { border-color: rgba(217,119,6,.65);  }
    .scope-card.active.sev-danger { border-color: var(--danger-dot); }
    .scope-card.active.sev-watch  { border-color: var(--watch-dot);  }
    .scope-card.sev-ok     { border-color: rgba(22,163,74,.18);  }
    .scope-card.sev-neutral { border-color: var(--border); }
    .scope-card::after {
      content: ""; position: absolute; inset: 0;
      border-radius: calc(var(--radius) - 1.5px); pointer-events: none;
    }
    .scope-card.sev-danger::after { background: rgba(220,38,38,.025); }
    .scope-card.sev-watch::after  { background: rgba(217,119,6,.025);  }
    [data-theme="dark"] .scope-card.sev-danger {
      border-color: #FF3030;
      box-shadow: var(--danger-glow), var(--danger-inset);
    }
    .scope-card.sev-danger::before { content: none; }
    [data-theme="dark"] .scope-card.sev-danger::after { background: rgba(255,30,30,.04); }
    [data-theme="dark"] .scope-card:hover.sev-danger {
      box-shadow: var(--danger-glow), var(--danger-inset), var(--shadow-md);
    }

    /* ── Pinned activities (#57) ──────────────────────────────── */
    .pin-btn {
      position: absolute; top: 6px; right: 6px;
      background: none; border: none; padding: 8px; min-height: 44px; min-width: 44px; cursor: pointer;
      font-size: 13px; color: var(--text-muted); opacity: 0;
      transition: opacity .15s, color .15s; z-index: 3; line-height: 1;
      touch-action: manipulation;
    }
    .scope-card:hover .pin-btn { opacity: 0.6; }
    .scope-card.pinned .pin-btn { opacity: 1; color: var(--accent); }
    @media (pointer: coarse) { .pin-btn { opacity: 0.5; } } /* always-visible on touch */
    .scope-card.pinned { border-color: var(--accent) !important; }
    [data-theme="dark"] .scope-card.pinned { box-shadow: 0 0 0 1px var(--accent), var(--shadow-sm); }
    .pins-section-label {
      grid-column: 1 / -1;
      font-size: 10px; font-weight: 700; text-transform: uppercase;
      letter-spacing: .07em; color: var(--text-muted);
      padding-bottom: 4px; margin-top: 4px;
    }
    .pins-section-divider {
      grid-column: 1 / -1;
      height: 1px; background: var(--border); margin: 8px 0 4px;
    }

    .card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; padding-right: 24px; }
    .card-name { font-size: 13px; font-weight: 700; color: var(--text); line-height: 1.3; flex: 1; }
    .traffic-light {
      width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-top: 3px;
    }
    .tl-ok     { background: var(--ok-dot);     box-shadow: 0 0 0 3px var(--ok-tint);     }
    .tl-watch  { background: var(--watch-dot);  box-shadow: 0 0 0 3px var(--watch-tint);  }
    .tl-danger { background: var(--danger-dot); box-shadow: 0 0 0 3px var(--danger-tint); }
    [data-theme="dark"] .tl-danger { box-shadow: var(--danger-dot-glow); }
    .tl-neutral { background: var(--neutral-dot); box-shadow: 0 0 0 3px var(--neutral-tint); }

    .card-metric { display: flex; flex-direction: column; gap: 1px; }
    .card-value { font-size: 18px; font-weight: 500; letter-spacing: -.02em; color: var(--text); line-height: 1; }
    .card-metric-label {
      font-size: 10px; font-weight: 600;
      text-transform: uppercase; letter-spacing: .06em;
      color: var(--text-muted); margin-top: 3px;
    }
    .card-delta { font-size: 12px; font-weight: 500; margin-top: 3px; }
    .card-delta-ctx { font-size: 10px; color: var(--text-muted); font-weight: 400; }
    .delta-pos { color: var(--ok-dot);     }
    .delta-neg { color: var(--danger-dot); }
    .delta-neu { color: var(--text-muted); }
    .card-ytd {
      font-size: 10px;
      font-weight: 600;
      margin-top: 2px;
      letter-spacing: .01em;
    }

    .card-reason {
      font-size: 11px; color: var(--text-muted); line-height: 1.4;
      border-top: 1px solid var(--border); padding-top: 10px;
    }
    .card-overhead-note {
      font-size: 10px; color: var(--watch-dot); font-weight: 600;
      border-top: 1px solid var(--border); padding-top: 8px; cursor: help;
    }
    .card-manager { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
    .card-manager a { color: var(--text-muted); text-decoration: underline; }
    .card-drill {
      position: absolute; bottom: var(--pad); right: var(--pad);
      font-size: 10px; opacity: .28;
      transition: opacity var(--transition);
    }
    .scope-card:hover .card-drill { opacity: .65; }

    /* ── Section cards (level 2) ─────────────────────────────── */
    .section-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--gap);
    }
    @media (max-width: 900px)  { .section-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 480px)  { .section-grid { grid-template-columns: 1fr; } }

    .section-card {
      background: var(--surface);
      border-radius: var(--radius);
      border: 1.5px solid var(--border);
      box-shadow: var(--shadow-sm);
      padding: var(--pad);
      cursor: pointer;
      display: flex; flex-direction: column; gap: 8px;
      transition: box-shadow var(--transition), transform var(--transition);
      touch-action: manipulation;
    }
    .section-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
    .section-card.sev-danger { border-color: rgba(220,38,38,.75); }
    .section-card.sev-watch  { border-color: rgba(217,119,6,.65);  }
    .section-card.sev-ok     { border-color: rgba(22,163,74,.18);  }
    [data-theme="dark"] .section-card.sev-danger {
      border-color: #FF3030;
      box-shadow: var(--danger-glow), var(--danger-inset);
      position: relative;
    }
    .section-card.sev-danger::before { content: none; }
    .section-label { font-size: 12px; font-weight: 600; color: var(--text); }
    .section-value { font-size: 24px; font-weight: 700; letter-spacing: -.02em; color: var(--text); }
    .section-sub { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }

    /* ── GL Lines table (level 3) ────────────────────────────── */
    .lines-table {
      background: var(--surface);
      border-radius: var(--radius);
      border: 1px solid var(--border);
      overflow: hidden;
      box-shadow: var(--shadow-sm);
    }
    .lines-table table {
      width: 100%; border-collapse: collapse;
      font-size: 13px;
    }
    .lines-table thead th {
      background: var(--bg);
      padding: 10px 16px;
      text-align: left;
      font-size: 10px; font-weight: 700;
      text-transform: uppercase; letter-spacing: .06em;
      color: var(--text-muted);
      border-bottom: 1px solid var(--border);
    }
    .lines-table thead th:not(:first-child) { text-align: right; }
    .lines-table tbody tr { border-bottom: 1px solid var(--border); transition: background var(--transition); }
    .lines-table tbody tr:last-child { border-bottom: none; }
    .lines-table tbody tr:hover { background: var(--bg); }
    .lines-table td { padding: 10px 16px; color: var(--text); }
    .lines-table td:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
    .lines-table .td-code { font-size: 11px; color: var(--text-muted); font-family: monospace; }
    .lines-table .td-name { font-weight: 500; }
    .lines-table .td-value { font-weight: 600; }
    .lines-table .td-muted { color: var(--text-muted); font-size: 12px; }
    .lines-table .td-budget { color: var(--text-muted); font-size: 12px; }
    .lines-table .td-var-pos { color: var(--ok-dot); font-size: 12px; font-weight: 600; }
    .lines-table .td-var-neg { color: var(--danger-dot); font-size: 12px; font-weight: 600; }
    .lines-table .is-summary { background: rgba(10,25,22,.03); font-weight: 700; }

    /* ── Budget comparison row on CC cards ───────────────────── */
    /* ── Budget inline row — compact single-line pill ─────────── */
    .card-budget-row {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-top: 6px;
      padding-top: 6px;
      border-top: 1px solid var(--border);
      flex-wrap: wrap;
      font-size: 11px;
      color: var(--text-muted);
      line-height: 1;
    }
    .card-budget-row .bdr-label {
      font-size: 9px; font-weight: 700;
      text-transform: uppercase; letter-spacing: .06em;
      color: var(--text-muted); white-space: nowrap;
    }
    .card-budget-row .bdr-val {
      font-size: 11px; font-weight: 600; color: var(--text); white-space: nowrap;
    }
    .card-budget-row .bdr-sep {
      color: var(--border); font-size: 10px;
    }
    /* Variance pill */
    .var-pill {
      display: inline-flex; align-items: center;
      padding: 1px 7px; border-radius: 99px;
      font-size: 10px; font-weight: 700; white-space: nowrap;
      line-height: 18px;
    }
    .var-pill-pos { background: rgba(74,197,130,.15); color: #27a05a; }
    .var-pill-neg { background: rgba(239,83,80,.14);  color: #d03030; }
    .var-pill-warn { background: rgba(255,183,77,.17); color: #c07a00; }
    [data-theme="dark"] .var-pill-pos { background: rgba(74,197,130,.2); color: #4cc080; }
    [data-theme="dark"] .var-pill-neg { background: rgba(239,83,80,.2);  color: #f06060; }
    [data-theme="dark"] .var-pill-warn { background: rgba(255,183,77,.22); color: #f0a030; }
    /* legacy classes still used by L0 activity cards until refactored */
    .card-budget-cell { display: flex; flex-direction: column; gap: 1px; }
    .card-budget-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
    .card-budget-value { font-size: 11px; font-weight: 600; color: var(--text); }
    .card-budget-var   { font-size: 10px; font-weight: 600; }
    .budget-toggle-btn {
      font-size: 10px; font-weight: 600;
      padding: 2px 8px; border-radius: 4px;
      border: 1px solid var(--border);
      background: var(--surface); color: var(--text-muted);
      cursor: pointer; margin-left: 6px;
      transition: background var(--transition), color var(--transition);
      min-height: 32px; touch-action: manipulation;
    }
    .budget-toggle-btn.active { background: var(--surface-dim); color: var(--text); }

    /* ── YTD budget progress bar on CC cards ─────────────────── */
    .ytd-budget-bar-wrap {
      margin-top: 5px;
      display: flex; align-items: center; gap: 5px;
    }
    .ytd-budget-bar-label {
      font-size: 9px; font-weight: 700; text-transform: uppercase;
      letter-spacing: .06em; color: var(--text-muted); white-space: nowrap; flex-shrink: 0;
    }
    .ytd-budget-bar-track {
      flex: 1; height: 4px; background: var(--border);
      border-radius: 99px; overflow: hidden; min-width: 0;
    }
    .ytd-budget-bar-fill {
      height: 100%; border-radius: 99px;
      background: var(--accent); max-width: 100%;
      transition: width .3s ease;
    }
    .ytd-budget-bar-fill.ytd-bar-warn  { background: #c07a00; }
    .ytd-budget-bar-fill.ytd-bar-over  { background: #27a05a; }
    .ytd-budget-bar-fill.ytd-bar-under { background: var(--danger-dot); }
    [data-theme="dark"] .ytd-budget-bar-fill.ytd-bar-warn  { background: #f0a030; }
    [data-theme="dark"] .ytd-budget-bar-fill.ytd-bar-over  { background: #4cc080; }
    .ytd-budget-bar-pct {
      font-size: 9px; font-weight: 600; color: var(--text-muted);
      white-space: nowrap; flex-shrink: 0;
    }

    /* #35: load-more button for paginated line/journal tables */
    .load-more-btn {
      display: block; width: 100%; margin-top: 8px; padding: 8px 16px;
      background: none; border: 1px solid var(--border); border-radius: 6px;
      color: var(--text-muted); font-size: 13px; cursor: pointer; text-align: center;
      transition: background var(--transition), color var(--transition);
      min-height: 36px; touch-action: manipulation;
    }
    .load-more-btn:hover { background: var(--surface-dim); color: var(--text); }

    /* ── Skeleton ────────────────────────────────────────────── */
    .skeleton-card {
      background: var(--surface);
      border-radius: var(--radius);
      border: 1px solid var(--border);
      padding: var(--pad);
      animation: pulse 1.3s ease-in-out infinite;
    }
    @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.45} }
    .skel { height: 14px; border-radius: 6px; background: var(--surface-dim); margin-bottom: 8px; }

    /* ── Back ghost card ─────────────────────────────────────── */
    .back-card {
      background: transparent;
      border-radius: var(--radius);
      border: 1.5px dashed var(--border);
      padding: var(--pad);
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: background var(--transition), border-color var(--transition);
      min-height: 120px;
      color: var(--text-muted);
      user-select: none;
      touch-action: manipulation;
    }
    .back-card:hover {
      background: var(--surface);
      border-color: rgba(10,25,22,.22);
      color: var(--text);
    }
    .back-card:hover .back-arrow { transform: translateX(-3px); }
    .back-arrow {
      font-size: 22px;
      transition: transform var(--transition);
    }
    .back-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
    .back-dest  { font-size: 12px; font-weight: 500; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    /* ── Multi-period summary strip ──────────────────────────── */
    .period-strip {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      margin-bottom: 4px;
    }
    @media (max-width: 700px) { .period-strip { grid-template-columns: 1fr; } }
    .ps-cell {
      border-radius: var(--radius-sm);
      border: 1px solid var(--border);
      padding: 12px 14px;
      background: var(--bg);
      display: flex; flex-direction: column; gap: 3px;
    }
    .ps-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
    .ps-value { font-size: 18px; font-weight: 700; letter-spacing: -.02em; color: var(--text); }
    .ps-delta { font-size: 11px; font-weight: 600; }

    /* ── Portfolio KPI Strip ─────────────────────────────────── */
    .portfolio-strip {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: var(--gap);
      margin-bottom: 2px;
    }
    @media (max-width: 1100px) { .portfolio-strip { grid-template-columns: repeat(3, 1fr); } }
    @media (max-width: 600px)  { .portfolio-strip { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 380px)  { .portfolio-strip { grid-template-columns: 1fr; } }

    .kpi-tile {
      background: var(--surface);
      border-radius: var(--radius);
      border: 1px solid var(--border);
      box-shadow: var(--shadow-sm);
      padding: 16px 20px;
      display: flex;
      flex-direction: column;
      gap: 3px;
    }
    .kpi-tile-label {
      font-size: 10px; font-weight: 700;
      text-transform: uppercase; letter-spacing: .07em;
      color: var(--text-muted);
    }
    .kpi-tile-value {
      font-size: 22px; font-weight: 700;
      letter-spacing: -.02em; color: var(--text);
      line-height: 1;
    }
    .kpi-tile-delta { font-size: 11px; font-weight: 600; margin-top: 2px; }
    .kpi-tile-basis {
      font-size: 10px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: .06em;
      color: var(--text-muted);
      margin-top: 4px;
      opacity: .7;
    }

    /* ── Sparkline ───────────────────────────────────────────── */
    .sparkline-wrap { margin-top: 4px; opacity: 0.8; }
    .sparkline-row { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
    .sparkline-toggle {
      font-size: 14px; font-weight: 700; letter-spacing: .04em;
      padding: 6px 8px; min-height: 44px; border-radius: 99px; border: 1px solid var(--border); /* #99: was 32px */
      background: transparent; color: var(--text-muted); cursor: pointer;
      flex-shrink: 0; transition: background .15s, color .15s; touch-action: manipulation;
    }
    .sparkline-toggle.active {
      background: var(--accent); color: #fff; border-color: var(--accent);
    }

    /* ── KPI Pills ───────────────────────────────────────────── */
    .pill-row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
    .kpi-pill {
      font-size: 10px; font-weight: 700;
      padding: 2px 7px; border-radius: 99px;
      letter-spacing: .03em;
    }
    .pill-danger  { background: var(--danger-tint); color: var(--danger-text); }
    .pill-ok      { background: var(--ok-tint);     color: var(--ok-text);     }
    .pill-neutral { background: var(--surface-dim); color: var(--text-muted);  }
    .pill-warn    { background: #fef3c7; color: #92400e; }

    /* ── NIAD info icon + tooltip ─────────────────────────── */
    .niad-info { display: inline-flex; align-items: center; gap: 3px; }
    .niad-tip {
      display: inline-block; cursor: help;
      width: 13px; height: 13px; line-height: 13px;
      border-radius: 50%; background: var(--surface-dim);
      color: var(--text-muted); font-size: 9px; font-weight: 700;
      text-align: center; position: relative; flex-shrink: 0;
      touch-action: manipulation;
    }
    /* Expand .niad-tip tap target to 32px without changing visual circle */
    .niad-tip::after {
      content: ''; position: absolute;
      top: 50%; left: 50%; transform: translate(-50%, -50%);
      width: 32px; height: 32px;
    }
    /* Real DOM tooltip — replaces the old ::after pseudo-element */
    .niad-tip-popup {
      display: none; position: fixed;
      width: 220px; padding: 8px 10px; border-radius: 8px;
      background: var(--surface); border: 1px solid var(--border);
      color: var(--text); font-size: 11px; font-weight: 400;
      line-height: 1.4; white-space: normal; z-index: 9999;
      box-shadow: 0 4px 16px rgba(0,0,0,.15); pointer-events: none;
    }
    .niad-tip-popup.visible { display: block; }
    /* Elevate the card above its siblings so the tooltip isn't clipped */
    .scope-card:has(.niad-tip.is-open) { z-index: 10; }
    /* Suppress the generic [data-tip] CSS tooltip for .niad-tip — these use the
       JS-driven .niad-tip-popup singleton instead, which has correct positioning */
    .niad-tip[data-tip]:hover::after,
    .niad-tip[data-tip]:hover::before { content: none; }

    /* ── CSS tooltip for [data-tip] elements ─────────────────── */
    [data-tip] {
      position: relative;
      cursor: help;
    }
    [data-tip]:hover::after {
      content: attr(data-tip);
      position: absolute;
      bottom: calc(100% + 6px);
      left: 50%;
      transform: translateX(-50%);
      background: var(--surface-dim, #1e2a28);
      color: var(--text, #e8e6e3);
      border: 1px solid var(--border, #2a3a38);
      border-radius: 6px;
      padding: 6px 10px;
      font-size: 11px;
      line-height: 1.4;
      white-space: normal;
      width: max-content;
      max-width: 260px;
      text-transform: none;
      z-index: 9999;
      pointer-events: none;
      box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,.3));
    }
    [data-tip]:hover::before {
      content: '';
      position: absolute;
      bottom: calc(100% + 1px);
      left: 50%;
      transform: translateX(-50%);
      border: 5px solid transparent;
      border-top-color: var(--border, #2a3a38);
      z-index: 9999;
      pointer-events: none;
    }

    /* Severity legend toggle button — same circle appearance as .niad-tip */
    .sev-tip {
      display: inline-block; cursor: pointer;
      width: 13px; height: 13px; line-height: 13px;
      border-radius: 50%; background: var(--surface-dim);
      color: var(--text-muted); font-size: 9px; font-weight: 700;
      text-align: center; position: relative; flex-shrink: 0;
      touch-action: manipulation;
    }
    /* Expand .sev-tip tap target to 44px without changing visual circle */
    .sev-tip::after {
      content: ''; position: absolute;
      top: 50%; left: 50%; transform: translate(-50%, -50%);
      width: 44px; height: 44px;
    }

    /* ── Severity legend ─────────────────────────────────── */
    .sev-legend {
      display: flex; gap: 10px; flex-wrap: wrap;
      font-size: 11px; color: var(--text-muted);
      margin-top: 6px; padding: 6px 10px;
      background: var(--surface-dim); border-radius: 8px;
    }
    .sev-legend span { display: flex; align-items: center; gap: 4px; }

    .card-margin {
      font-size: 11px; color: var(--text-muted);
      margin-top: 1px;
    }
    .card-margin strong { color: var(--text); font-weight: 700; }
    .rank-badge {
      font-size: 10px; color: var(--text-muted);
      font-weight: 500; padding: 2px 0;
    }

    /* ── Empty ───────────────────────────────────────────────── */
    .empty-state {
      grid-column: 1 / -1; text-align: center;
      padding: 48px; color: var(--text-muted); font-size: 13px;
    }

    /* ── Load-error retry surface (#105) ────────────────────── */
    .empty-state.grid-load-error {
      display: flex; flex-direction: column; align-items: center;
      justify-content: center; gap: 12px; padding: 32px 16px;
    }
    .empty-state.grid-load-error p { margin: 0; font-size: 15px; }
    .load-retry-btn {
      min-height: 44px; padding: 0 20px; font-size: 15px; font-weight: 500;
      color: var(--text); background: transparent;
      border: 1px solid var(--border); border-radius: 6px;
      cursor: pointer; touch-action: manipulation;
      transition: background var(--transition), border-color var(--transition);
    }
    .load-retry-btn:hover { background: var(--surface-dim); border-color: var(--text-muted); }
    .load-retry-btn:focus-visible {
      outline: 2px solid var(--accent); outline-offset: 2px;
    }

    /* ── API error toast (#33) ───────────────────────────────── */
    .api-toast {
      /* bottom: 72px clears the feedback FAB (40px tall + 20px gap + 12px buffer) */
      position: fixed; bottom: 72px; left: 50%; transform: translateX(-50%);
      background: #1e1e1e; color: #fff; padding: 10px 18px; border-radius: 8px;
      font-size: 13px; z-index: 9998; opacity: 0;
      transition: opacity .25s; pointer-events: none; white-space: nowrap;
      max-width: calc(100vw - 96px); text-align: center; display: flex; align-items: center; gap: 10px;
    }
    .api-toast.visible { opacity: 1; pointer-events: auto; }
    .toast-retry-btn {
      background: none; border: 1px solid rgba(255,255,255,0.45); color: #fff;
      border-radius: 4px; padding: 2px 8px; font-size: 12px; cursor: pointer;
      white-space: nowrap; flex-shrink: 0;
      min-height: 32px; touch-action: manipulation;
    }
    .toast-retry-btn:hover { background: rgba(255,255,255,0.15); }

    /* ── Loading spinner (#36) ───────────────────────────────── */
    .grid-loading {
      display: flex; align-items: center; justify-content: center;
      min-height: 200px; color: var(--text-muted); font-size: 14px;
      gap: 10px;
    }
    .grid-loading::before {
      content: ''; width: 18px; height: 18px; border-radius: 50%;
      border: 2px solid var(--border); border-top-color: var(--accent);
      animation: spin .7s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* ── Scrollbar ───────────────────────────────────────────── */
    ::-webkit-scrollbar { width: 6px; height: 6px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; }

    /* ── #95: Control-bar cluster groups ───────────────────────── */
    .cb-sep { width: 1px; height: 20px; background: var(--border,#333); margin: 0 8px; align-self: center; flex-shrink: 0; }
    .cb-left { display: flex; align-items: center; gap: 6px; }
    .cb-right { display: flex; align-items: center; gap: 6px; margin-left: auto; }
    @media (max-width: 600px) { .cb-basis-label { display: none; } }

    /* ── #97: Help panel ─────────────────────────────────────── */
    .cb-btn {
      height: 44px;
      padding: 0 12px;
      border-radius: var(--radius-sm);
      border: 1px solid var(--border);
      background: var(--bg);
      color: var(--text-muted);
      font-size: 13px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      cursor: pointer;
      transition: background var(--transition), color var(--transition);
    }
    .cb-btn:hover { background: var(--surface-dim); color: var(--text); }
    [data-theme="dark"] .cb-btn { background: var(--surface-dim); color: var(--text-muted); border-color: var(--border); }

    /* #79: replace undefined var(--surface2) fallback #1a1a2e (dark hardcode) with --surface-dim */
    .help-panel { background: var(--surface-dim); border: 1px solid var(--border); border-radius: 8px; padding: 16px 20px; margin: 8px 16px; }
    [data-theme="dark"] .help-panel { background: var(--surface-dim); }
    .help-panel dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
    .help-panel dt { font-weight: 700; color: var(--accent,#4fc3f7); }
    .help-panel dd { margin: 0; color: var(--text2,#aaa); font-size: 0.9em; }

    /* ── CHANGE 4: Freshness indicator ──────────────────────── */
    .freshness {
      font-size: 14px;
      color: var(--text-muted);
      white-space: nowrap;
      margin-left: 8px;
    }
    .freshness.stale { color: var(--watch-dot); font-weight: 600; }

    /* Theme toggle */
    .theme-btn {
      min-width: 44px;
      min-height: 44px;
      border-radius: var(--radius-sm);
      border: 1px solid var(--border);
      background: var(--bg);
      color: var(--text-muted);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      flex-shrink: 0;
      transition: background var(--transition), color var(--transition);
      margin-left: 4px;
      touch-action: manipulation;
    }
    .theme-btn:hover { background: var(--surface-dim); color: var(--text); }
    .theme-icon { font-style: normal; line-height: 1; }

    .export-btn {
      min-height: 44px;
      padding: 0 14px;
      border-radius: var(--radius-sm);
      border: 1px solid var(--border);
      background: var(--bg);
      color: var(--text-muted);
      font-size: 14px;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 5px;
      flex-shrink: 0;
      transition: background var(--transition), color var(--transition);
      white-space: nowrap;
      touch-action: manipulation;
    }
    .export-btn:hover { background: var(--surface-dim); color: var(--text); }
    [data-theme="dark"] .export-btn {
      background: var(--surface-dim);
      color: var(--text-muted);
      border-color: var(--border);
    }
    @media (max-width: 600px) { .export-btn { display: none; } }

    .export-pdf-btn {
      height: 34px;
      padding: 0 14px;
      border-radius: var(--radius-sm);
      border: 1px solid var(--accent, #2563eb);
      background: var(--bg);
      color: var(--accent, #2563eb);
      font-size: 12px;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 5px;
      flex-shrink: 0;
      cursor: pointer;
      transition: background var(--transition), color var(--transition);
      white-space: nowrap;
      touch-action: manipulation;
    }
    .export-pdf-btn:hover { background: var(--accent, #2563eb); color: #fff; }
    [data-theme="dark"] .export-pdf-btn {
      background: var(--surface-dim);
      border-color: var(--accent, #3b82f6);
      color: var(--accent, #3b82f6);
    }
    [data-theme="dark"] .export-pdf-btn:hover { background: var(--accent, #2563eb); color: #fff; }
    @media (max-width: 600px) { .export-pdf-btn { display: none; } }

    .print-btn {
      height: 34px;
      padding: 0 14px;
      border-radius: var(--radius-sm);
      border: 1px solid var(--border);
      background: var(--bg);
      color: var(--text-muted);
      font-size: 12px;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 5px;
      flex-shrink: 0;
      transition: background var(--transition), color var(--transition);
      white-space: nowrap;
      touch-action: manipulation;
    }
    .print-btn:hover { background: var(--surface-dim); color: var(--text); }
    [data-theme="dark"] .print-btn {
      background: var(--surface-dim); color: var(--text-muted); border-color: var(--border);
    }
    @media (max-width: 600px) { .print-btn { display: none; } }

    .thresholds-btn {
      height: 34px;
      padding: 0 14px;
      border-radius: var(--radius-sm);
      border: 1px solid var(--border);
      background: var(--bg);
      color: var(--text-muted);
      font-size: 12px;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 5px;
      flex-shrink: 0;
      transition: background var(--transition), color var(--transition);
      white-space: nowrap;
      cursor: pointer;
      touch-action: manipulation;
    }
    .thresholds-btn:hover { background: var(--surface-dim); color: var(--text); }
    [data-theme="dark"] .thresholds-btn {
      background: var(--surface-dim); color: var(--text-muted); border-color: var(--border);
    }
    @media (max-width: 600px) { .thresholds-btn { display: none; } }

    /* Thresholds modal */
    .thr-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1100; display: flex; align-items: center; justify-content: center; }
    .thr-modal { background: var(--card-bg); border-radius: 12px; padding: 24px; width: 460px; max-width: 95vw; max-height: 80vh; overflow-y: auto; box-shadow: 0 8px 32px rgba(0,0,0,.3); }
    .thr-modal h3 { margin: 0 0 16px; font-size: 16px; }
    .thr-section-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin: 16px 0 8px; }
    .thr-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
    .thr-row label { font-size: 13px; color: var(--text-muted); min-width: 80px; }
    .thr-row input[type="number"] { width: 80px; background: var(--input-bg,var(--bg)); border: 1px solid var(--border); color: var(--text); border-radius: 6px; padding: 5px 8px; font-size: 16px; } /* 16px prevents iOS auto-zoom */
    .thr-row .thr-act-id { width: 90px; background: var(--input-bg,var(--bg)); border: 1px solid var(--border); color: var(--text); border-radius: 6px; padding: 5px 8px; font-size: 16px; } /* 16px prevents iOS auto-zoom */
    .thr-row .thr-remove { background: none; border: none; cursor: pointer; color: var(--danger-dot,#ef4444); font-size: 14px; padding: 8px 10px; min-height: 36px; min-width: 36px; border-radius: 4px; touch-action: manipulation; }
    .thr-add-row { background: none; border: 1px dashed var(--border); border-radius: 6px; color: var(--text-muted); font-size: 12px; font-weight: 600; padding: 8px 12px; min-height: 36px; cursor: pointer; margin-top: 4px; width: 100%; box-sizing: border-box; touch-action: manipulation; }
    .thr-add-row:hover { background: var(--hover-bg); color: var(--text); }
    .thr-footer { display: flex; gap: 8px; margin-top: 20px; align-items: center; }
    .thr-footer button { flex: 1; padding: 9px; border-radius: 6px; border: none; cursor: pointer; font-size: 13px; font-weight: 600; min-height: 36px; touch-action: manipulation; }
    .thr-btn-save { background: var(--accent); color: #fff; }
    .thr-btn-cancel { background: var(--border); color: var(--text); }
    .thr-toast { font-size: 12px; font-weight: 600; color: #22c55e; opacity: 0; transition: opacity .3s; }
    .thr-toast.visible { opacity: 1; }

    /* ── Feedback FAB & Modal ────────────────────────────────── */
    .feedback-fab {
      position: fixed; bottom: 20px; right: 20px; z-index: 900;
      width: 44px; height: 44px; border-radius: 50%;
      background: var(--accent); color: #fff;
      border: none; cursor: pointer; font-size: 18px;
      box-shadow: 0 2px 8px rgba(0,0,0,.25);
      display: flex; align-items: center; justify-content: center;
      transition: transform .15s, box-shadow .15s;
      touch-action: manipulation;
    }
    .feedback-fab:hover { transform: scale(1.1); box-shadow: 0 4px 16px rgba(0,0,0,.3); }
    .fb-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1100; display: flex; align-items: center; justify-content: center; }
    .fb-modal { background: var(--card-bg); border-radius: 12px; padding: 24px; width: 440px; max-width: 95vw; box-shadow: 0 8px 32px rgba(0,0,0,.3); }
    .fb-modal h3 { margin: 0 0 16px; font-size: 16px; }
    .fb-tabs { display: flex; gap: 8px; margin-bottom: 16px; }
    .fb-tab { flex: 1; padding: 7px; border-radius: 6px; border: 1px solid var(--border); background: none; color: var(--text-muted); cursor: pointer; font-size: 13px; font-weight: 600; transition: background .15s, color .15s; min-height: 36px; touch-action: manipulation; }
    .fb-tab.active { background: var(--accent); color: #fff; border-color: transparent; }
    .fb-field { margin-bottom: 14px; }
    .fb-field label { display: block; font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 5px; text-transform: uppercase; letter-spacing: .05em; }
    .fb-field textarea, .fb-field input[type="text"] { width: 100%; box-sizing: border-box; background: var(--input-bg, var(--bg)); border: 1px solid var(--border); color: var(--text); border-radius: 6px; padding: 8px 10px; font-size: 16px; font-family: inherit; resize: vertical; } /* 16px prevents iOS auto-zoom */
    .fb-field textarea { min-height: 90px; }
    .fb-charcount { font-size: 11px; color: var(--text-muted); text-align: right; margin-top: 3px; }
    .fb-charcount.over { color: #ef4444; }
    .fb-footer { display: flex; gap: 8px; margin-top: 18px; align-items: center; }
    .fb-footer button { flex: 1; padding: 9px; border-radius: 6px; border: none; cursor: pointer; font-size: 13px; font-weight: 600; min-height: 36px; touch-action: manipulation; }
    .fb-btn-submit { background: var(--accent); color: #fff; }
    .fb-btn-submit:disabled { opacity: .55; cursor: not-allowed; }
    .fb-btn-cancel { background: var(--border); color: var(--text); }
    .fb-error { font-size: 12px; color: #ef4444; margin-top: 8px; min-height: 16px; }
    .fb-success { text-align: center; padding: 28px 0; font-size: 15px; font-weight: 600; color: #22c55e; }

    [data-theme="dark"] .scope-card,
    [data-theme="dark"] .section-card,
    [data-theme="dark"] .back-card,
    [data-theme="dark"] .kpi-tile,
    [data-theme="dark"] .bento,
    [data-theme="dark"] .lines-table {
      background: var(--surface);
      border-color: var(--border);
    }

    [data-theme="dark"] .back-card {
      border-color: rgba(232,240,238,.18);
    }
    [data-theme="dark"] .back-card:hover {
      background: var(--surface-dim);
      border-color: rgba(232,240,238,.35);
    }

    [data-theme="dark"] .cb-select,
    [data-theme="dark"] .metric-toggle button,
    [data-theme="dark"] .compare-toggle button,
    [data-theme="dark"] .theme-btn {
      background: var(--surface-dim);
      color: var(--text-muted);
      border-color: var(--border);
    }

    [data-theme="dark"] .metric-toggle button.active,
    [data-theme="dark"] .compare-toggle button.active {
      background: var(--text);
      color: var(--bg);
    }

    [data-theme="dark"] .lines-table thead th {
      background: var(--surface-dim);
    }
    [data-theme="dark"] .lines-table tbody tr:hover {
      background: var(--surface-dim);
    }

    [data-theme="dark"] .pill-neutral {
      background: rgba(232,240,238,.10);
      color: var(--text-muted);
    }

    [data-theme="dark"] .narrative-icon {
      background: var(--text);
      color: var(--bg);
    }

    [data-theme="dark"] .breadcrumb-bar,
    [data-theme="dark"] .control-bar {
      background: var(--surface);
      border-color: var(--border);
    }

    [data-theme="dark"] .crumb:hover {
      background: var(--surface-dim);
    }

    [data-theme="dark"] .esc-key {
      background: var(--surface-dim);
      border-color: var(--border);
      color: var(--text-muted);
    }

    [data-theme="dark"] .skeleton-card {
      background: var(--surface);
      border-color: var(--border);
    }
    [data-theme="dark"] .skel {
      background: var(--surface-dim);
    }

    /* ── Narrow-desktop: hide freshness bar to keep ⋮ button on-screen ── */
    /* At ~1280px (1264px viewport), all cb-right items total ~1307px and   */
    /* push the overflow button off-screen. Hiding freshnessBar (137px)     */
    /* recovers enough room while keeping all actionable controls visible.  */
    @media (max-width: 1400px) {
      #freshnessBar { display: none; }
    }

    /* ── CHANGE 7: Mobile control bar breakpoints ────────────── */
    @media (max-width: 900px) {
      .control-bar {
        height: auto;
        min-height: 56px;
        flex-wrap: wrap;
        padding: 10px var(--pad);
        gap: 8px;
        row-gap: 8px;
      }
      .logo { flex: 1; }
      .divider { display: none; }
      .badge-bar { margin-left: auto; }
      .freshness { order: 10; width: 100%; margin-left: 0; font-size: 14px; } /* #59: min 14px for legibility */
      .theme-btn { margin-left: 0; }
      .breadcrumb-bar { position: sticky; /* top: dynamically set via --header-h */ }
    }

    @media (max-width: 600px) {
      .canvas { padding: 12px; gap: 10px; }
      .metric-toggle button { padding: 0 10px; font-size: 11px; }
      .compare-toggle button { padding: 0 8px; font-size: 11px; }
      .badge { font-size: 11px; padding: 3px 8px; }
      .badge-bar { gap: 5px; }

      /* Narrative collapses icon on small screens */
      .narrative { grid-template-columns: 1fr; }
      .narrative-icon { display: none; }
    }

    @media (max-width: 480px) {
      /* ── Control bar: clean 3-row stack at phone width ───────── */
      .control-bar {
        flex-direction: column;
        align-items: stretch;
        padding: 8px 10px;
        gap: 7px;
        row-gap: 0;
      }
      /* Row 1: FY select + Period select + metric toggle — all stretch to fill */
      .cb-left {
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: nowrap;
        gap: 4px;
        width: 100%;
      }
      /* Selects flex-grow to share available space evenly */
      .cb-left .cb-select { flex: 1; max-width: none; }
      /* Kill the cluster separator */
      .cb-sep { display: none; }
      /* cb-right wraps internally so badge-bar gets its own row */
      .cb-right {
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        gap: 4px;
        row-gap: 6px;
        width: 100%;
      }
      /* Row 2: badge pills — full width, spread evenly */
      .badge-bar {
        width: 100%;
        display: flex;
        justify-content: space-evenly;
        margin-left: 0 !important;
      }
      /* Row 3: freshness (bigger text, flex-grows) + sev-tip + theme + overflow */
      .freshness { order: 0 !important; width: auto !important; flex: 1; font-size: 14px; }
      /* Severity ? — larger tap target on mobile */
      #sevLegendToggle {
        width: 26px; height: 26px; line-height: 26px;
        font-size: 14px; text-align: center; font-weight: 700;
      }
      /* Sort, search, helpBtn in overflow panel — hide from main bar */
      #sortSelect, .search-wrap, #helpBtn { display: none; }
      /* Metric toggle: compact (#90: ≥14px readability floor; #99: ≥44px tap target) */
      .metric-toggle button { padding: 0 6px; font-size: 14px; min-height: 44px; }
      .metric-toggle { min-height: 44px; flex-shrink: 0; } /* #99: was height:32px */
      /* Hide cruft */
      .compare-toggle { display: none; }
      .cb-label { display: none; }
      .logo { display: none; }
    }

    @media (max-width: 900px) {
      .breadcrumb-bar {
        flex-wrap: wrap;
        height: auto;
        min-height: 40px;
        padding: 6px var(--pad);
      }
      .esc-hint { display: none; }
    }

    /* ── CHANGE 8: GL table horizontal scroll on mobile ──────── */
    .lines-table { overflow-x: auto; -webkit-overflow-scrolling: touch; position: relative; }
    .lines-table::after {
      content: "";
      position: absolute;
      top: 0; right: 0; bottom: 0;
      width: 32px;
      background: linear-gradient(to right, transparent, var(--surface));
      pointer-events: none;
    }
    @media (max-width: 560px) {
      .lines-table table,
      .lines-table thead,
      .lines-table tbody,
      .lines-table tr,
      .lines-table td,
      .lines-table th { display: block; width: 100%; }

      .lines-table thead { display: none; }

      .lines-table tbody tr {
        padding: 12px 16px;
        border-bottom: 1px solid var(--border);
        display: flex;
        flex-direction: column;
        gap: 4px;
      }

      .lines-table td { padding: 0; text-align: left !important; border: none; }
      .lines-table .td-code { font-size: 10px; opacity: .6; }
      .lines-table .td-name { font-size: 13px; font-weight: 600; }
      .lines-table .td-value { font-size: 15px; font-weight: 700; }
      .lines-table .td-muted { font-size: 11px; }

      /* Hide all but code, name, and metric value on very small screens */
      .lines-table td:nth-child(n+4) { display: none; }
      /* Override: re-show the drill arrow column */
      .lines-table td:last-child { display: block; font-size: 12px; color: var(--text-muted); }
    }

    /* ── CHANGE 10: Null value display ───────────────────────── */
    .null-val { color: var(--text-muted); font-style: italic; font-size: 11px; }

    @media (max-width: 600px) {
      .scope-card,
      .section-card,
      .kpi-tile { padding: 16px; }

      .card-value { font-size: 18px; }
      .kpi-tile-value { font-size: 18px; }
      .card-reason { font-size: 12px; }
      .card-name { font-size: 12px; }

      .back-card { min-height: 80px; }
      .back-arrow { font-size: 18px; }
    }

    @media (max-width: 400px) {
      .scope-card,
      .section-card { padding: 14px; }
      .card-value { font-size: 16px; }
    }

    /* #92: single @media print block below (search "Branded PDF export print stylesheet") */
    /* Summary view button */
    .summary-btn { padding:6px 11px; min-height:36px; border-radius:7px; border:1px solid var(--border); background:transparent; color:var(--text-muted); cursor:pointer; font-size:12px; font-weight:600; transition:background .15s, color .15s; touch-action:manipulation; }
    .summary-btn:hover { background:var(--hover-bg); color:var(--text); }
    .summary-btn.active { background:var(--accent); color:#fff; border-color:var(--accent); }
    /* Summary table */
    .summary-table-wrap { overflow-x:auto; }
    .summary-table { width:100%; border-collapse:collapse; font-size:13px; }
    .summary-table th { text-align:left; padding:8px 10px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); border-bottom:2px solid var(--border); white-space:nowrap; }
    .summary-table td { padding:9px 10px; border-bottom:1px solid var(--border); vertical-align:middle; }
    .summary-table tr:last-child td { border-bottom:none; }
    .summary-table tr:hover td { background:var(--hover-bg); }
    .sum-sev { display:inline-block; width:9px; height:9px; border-radius:50%; flex-shrink:0; }
    .sum-name { font-weight:600; max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .sum-value { font-variant-numeric:tabular-nums; text-align:right; font-weight:600; }
    .sum-pct { font-variant-numeric:tabular-nums; text-align:right; color:var(--text-muted); }
    /* #92: summary-view print rules merged into the single @media print block below */
    /* Card actions row — holds trend chip + note button below the card header */
    .card-actions-row { display:flex; align-items:center; gap:4px; margin: 2px 0 4px; min-height:20px; }
    /* Annotations */
    .note-btn { display:inline-flex; align-items:center; justify-content:center; background:none; border:none; cursor:pointer; font-size:14px; opacity:0.5; transition:opacity .15s; padding:6px; min-height:44px; min-width:44px; border-radius:4px; touch-action:manipulation; }
    .note-btn:hover, .note-btn.has-notes { opacity:1; }
    .note-btn.flagged { color: #F59E0B; opacity:1; }
    .ann-badge { position:absolute; top:0; right:0; width:7px; height:7px; border-radius:50%; background:var(--danger-dot,#ef4444); pointer-events:none; display:none; box-shadow:0 0 0 1.5px var(--card-bg,#fff); }
    .note-btn.has-unread { opacity:1; }
    .note-btn.has-unread .ann-badge { display:block; }
    .ann-modal-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:1000; display:flex; align-items:center; justify-content:center; }
    .ann-modal { background:var(--card-bg); border-radius:12px; padding:20px; width:420px; max-width:95vw; box-shadow:0 8px 32px rgba(0,0,0,.3); }
    .ann-modal h3 { margin:0 0 12px; font-size:15px; }
    .ann-modal input, .ann-modal textarea { width:100%; box-sizing:border-box; background:var(--input-bg); border:1px solid var(--border); color:var(--text); border-radius:6px; padding:7px 10px; font-size:16px; margin-bottom:8px; } /* 16px prevents iOS auto-zoom */
    .ann-modal textarea { resize:vertical; min-height:80px; }
    .ann-modal .modal-row { display:flex; gap:8px; margin-top:4px; }
    .ann-modal .modal-row button { flex:1; padding:8px; border-radius:6px; border:none; cursor:pointer; font-size:13px; font-weight:600; min-height:36px; touch-action:manipulation; }
    .ann-modal .btn-save { background:var(--accent); color:#fff; }
    .ann-modal .btn-cancel { background:var(--border); color:var(--text); }
    .ann-modal .btn-flag { background:transparent; border:1px solid var(--border) !important; color:var(--text); }
    .ann-list { margin:0 0 12px; max-height:320px; overflow-y:auto; -webkit-overflow-scrolling:touch; }
    .ann-item { background:var(--hover-bg); border-radius:6px; padding:8px 10px; margin-bottom:6px; font-size:12px; position:relative; }
    .ann-item-title { font-weight:700; margin-bottom:2px; }
    .ann-item-body { color:var(--text-muted); }
    .ann-item-meta { color:var(--text-muted); font-size:10px; margin-top:3px; }
    .ann-item.is-flagged .ann-item-title::before { content:'🚩 '; }
    .ann-actions { position:absolute; top:6px; right:6px; display:flex; gap:4px; opacity:0; transition:opacity .15s; }
    .ann-item:hover .ann-actions { opacity:1; }
    .ann-action-btn { width:36px; height:36px; border:none; border-radius:4px; cursor:pointer; background:transparent; font-size:13px; display:flex; align-items:center; justify-content:center; padding:0; color:var(--text-muted); touch-action:manipulation; }
    .ann-action-btn.delete { color:var(--danger-dot,#ef4444); }
    .ann-edit-area { margin-top:6px; }
    .ann-edit-area textarea { width:100%; box-sizing:border-box; background:var(--input-bg); border:1px solid var(--border); color:var(--text); border-radius:6px; padding:6px 8px; font-size:16px; resize:vertical; min-height:60px; margin-bottom:4px; }
    .ann-edit-area .ann-edit-row { display:flex; gap:6px; }
    .ann-edit-area .ann-edit-row button { flex:1; padding:5px; border-radius:5px; border:none; cursor:pointer; font-size:12px; font-weight:600; min-height:36px; touch-action:manipulation; }
    .ann-edit-area .btn-save { background:var(--accent); color:#fff; }

    /* ── Manage Uploads Modal ────────────────────────────────── */
    .mgmt-btn {
      min-height: 44px; /* #97: was height:34px — raised to 44px WCAG tap target */
      padding: 0 14px;
      border-radius: var(--radius-sm);
      border: 1px solid var(--border);
      background: var(--bg);
      color: var(--text-muted);
      font-size: 14px; /* #97: was 12px — raised to 14px readability floor */
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 5px;
      flex-shrink: 0;
      transition: background var(--transition), color var(--transition);
      white-space: nowrap;
      touch-action: manipulation;
    }
    .mgmt-btn:hover { background: var(--surface-dim); color: var(--text); }
    [data-theme="dark"] .mgmt-btn { background: var(--surface-dim); color: var(--text-muted); border-color: var(--border); }
    @media (max-width: 600px) { .mgmt-btn { display: none; } }

    .mgmt-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:1100; display:flex; align-items:center; justify-content:center; }
    .mgmt-modal { background:var(--card-bg); border-radius:12px; padding:20px; width:680px; max-width:96vw; max-height:80vh; overflow-y:auto; box-shadow:0 8px 32px rgba(0,0,0,.3); display:flex; flex-direction:column; gap:14px; }
    .mgmt-modal h3 { margin:0; font-size:15px; }
    .mgmt-modal .mgmt-close { float:right; background:none; border:none; cursor:pointer; font-size:18px; color:var(--text-muted); line-height:1; min-height:36px; min-width:36px; touch-action:manipulation; }
    .budget-plan-modal .mgmt-close { background:none; border:none; cursor:pointer; font-size:18px; color:var(--text-muted); line-height:1; min-height:36px; min-width:36px; touch-action:manipulation; padding:0 4px; display:flex; align-items:center; justify-content:center; }
    .mgmt-section-title { font-size:12px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.04em; margin-top:6px; }
    .mgmt-table { width:100%; border-collapse:collapse; font-size:12px; }
    .mgmt-table th { text-align:left; color:var(--text-muted); font-weight:600; padding:4px 6px; border-bottom:1px solid var(--border); }
    .mgmt-table td { padding:6px 6px; border-bottom:1px solid var(--border); vertical-align:middle; }
    .mgmt-table tr:last-child td { border-bottom:none; }
    .mgmt-active-pill { display:inline-block; padding:2px 8px; border-radius:99px; font-size:11px; font-weight:700; background:var(--ok-tint); color:var(--ok-text); }
    .mgmt-inactive-pill { display:inline-block; padding:2px 8px; border-radius:99px; font-size:11px; font-weight:600; background:var(--neutral-tint); color:var(--text-muted); }
    .mgmt-actions { display:flex; gap:5px; flex-wrap:nowrap; }
    .mgmt-action { padding:6px 10px; min-height:36px; border-radius:99px; border:1px solid var(--border); font-size:11px; font-weight:600; cursor:pointer; transition: background .15s; background:var(--bg); color:var(--text); touch-action:manipulation; }
    .mgmt-action:hover:not(:disabled) { background:var(--surface-dim); }
    .mgmt-action:disabled { opacity:.4; cursor:default; }
    .mgmt-action.danger { color: var(--danger-dot); border-color: var(--danger-dot); }
    .mgmt-action.danger:hover:not(:disabled) { background: var(--danger-tint); }
    .mgmt-empty { color:var(--text-muted); font-size:12px; font-style:italic; padding:8px 0; }
    .ann-edit-area .btn-cancel { background:var(--border); color:var(--text); }
    /* ── Custom Report Builder Modal (#51) ───────────────────── */
    .cr-modal { background:var(--card-bg); border-radius:12px; padding:22px; width:860px; max-width:96vw; max-height:88vh; overflow-y:auto; box-shadow:0 8px 32px rgba(0,0,0,.3); display:flex; flex-direction:column; gap:16px; }
    .cr-modal h3 { margin:0; font-size:15px; }
    .cr-step-label { font-size:11px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.06em; margin:0 0 8px; }
    .cr-step { border:1px solid var(--border); border-radius:8px; padding:14px 16px; display:flex; flex-direction:column; gap:10px; }
    .cr-row { display:flex; gap:10px; flex-wrap:wrap; align-items:flex-start; }
    .cr-group { display:flex; flex-direction:column; gap:6px; min-width:140px; }
    .cr-group-label { font-size:11px; font-weight:700; color:var(--text-muted); }
    .cr-activity-grid { display:flex; flex-wrap:wrap; gap:6px; }
    .cr-check-pill { display:flex; align-items:center; gap:5px; padding:8px 10px; min-height:36px; border-radius:99px; border:1px solid var(--border); font-size:12px; cursor:pointer; background:var(--bg); color:var(--text-muted); transition:background .12s, color .12s; user-select:none; touch-action:manipulation; }
    .cr-check-pill input[type=checkbox] { display:none; }
    .cr-check-pill.selected { background:var(--accent); color:#fff; border-color:var(--accent); }
    .cr-check-pill:hover:not(.selected) { background:var(--surface-dim); color:var(--text); }
    .cr-col-grid { display:flex; flex-wrap:wrap; gap:6px; }
    .cr-select { height:36px; padding:0 10px; border-radius:6px; border:1px solid var(--border); background:var(--input-bg,var(--bg)); color:var(--text); font-size:16px; cursor:pointer; touch-action:manipulation; } /* 16px prevents iOS auto-zoom */
    .cr-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
    .cr-generate-btn { padding:7px 20px; border-radius:6px; border:none; background:var(--accent); color:#fff; font-size:12px; font-weight:700; cursor:pointer; transition:opacity .15s; min-height:36px; touch-action:manipulation; }
    .cr-generate-btn:disabled { opacity:.45; cursor:default; }
    .cr-export-btn { padding:7px 16px; border-radius:6px; border:1px solid var(--border); background:var(--bg); color:var(--text); font-size:12px; font-weight:600; cursor:pointer; transition:background .12s; display:none; min-height:36px; touch-action:manipulation; }
    .cr-export-btn:hover { background:var(--surface-dim); }
    .cr-export-btn.visible { display:inline-flex; }
    .cr-status { font-size:12px; color:var(--text-muted); min-height:16px; }
    .cr-result-wrap { overflow-x:auto; }
    .custom-report-table { width:100%; border-collapse:collapse; font-size:12px; }
    .custom-report-table th { text-align:right; color:var(--text-muted); font-weight:600; padding:5px 8px; border-bottom:2px solid var(--border); white-space:nowrap; }
    .custom-report-table th:first-child, .custom-report-table th:nth-child(2) { text-align:left; }
    .custom-report-table td { padding:5px 8px; border-bottom:1px solid var(--border); text-align:right; vertical-align:middle; white-space:nowrap; }
    .custom-report-table td:first-child, .custom-report-table td:nth-child(2) { text-align:left; max-width:180px; overflow:hidden; text-overflow:ellipsis; }
    .custom-report-table tr:last-child td { border-bottom:none; }
    .custom-report-table tr:hover td { background:var(--hover-bg,rgba(0,0,0,.04)); }
    .custom-report-table .cr-activity-row td { font-weight:700; background:var(--surface-dim); color:var(--text); }
    .custom-report-table .cr-subtotal-row td { font-weight:700; color:var(--text-muted); border-top:1px solid var(--border); }
    /* #104: drill-through rows are clickable */
    .custom-report-table tr.cr-drillable { cursor:pointer; }
    .custom-report-table tr.cr-drillable:hover td { background:rgba(13,148,136,.10); }
    .cr-neg { color:var(--danger-dot,#ef4444); }
    .cr-pos { color:var(--ok-text,#16a34a); }

    /* My Scope toggle */
    .scope-filter-btn { background: transparent; border: 1px solid var(--border); border-radius: 12px; cursor: pointer; font-size: 11px; font-weight: 600; color: var(--text-muted); padding: 6px 10px; min-height: 32px; white-space: nowrap; transition: background .12s, color .12s, border-color .12s; touch-action: manipulation; }
    .scope-filter-btn:hover { background: var(--hover-bg); color: var(--text); }
    .scope-filter-btn[aria-checked="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }

    /* #48: annotation threading */
    .ann-reply-btn { background:transparent; border:1px solid var(--border); border-radius:4px; cursor:pointer; font-size:11px; color:var(--text-muted); padding:6px 10px; min-height:36px; margin-right:4px; transition:background .12s; touch-action:manipulation; }
    .ann-reply-btn:hover { background:var(--hover-bg); color:var(--text); }
    .ann-resolve-btn { background:transparent; border:1px solid var(--border); border-radius:4px; cursor:pointer; font-size:11px; color:var(--text-muted); padding:6px 10px; min-height:36px; transition:background .12s; touch-action:manipulation; }
    .ann-resolve-btn:hover { background:var(--hover-bg); color:var(--text); }
    .ann-resolve-btn.is-resolved { border-color:var(--ok-text,#16a34a); color:var(--ok-text,#16a34a); }
    .ann-thread-toggle { background:transparent; border:none; cursor:pointer; font-size:11px; color:var(--accent); padding:6px 0; min-height:32px; margin-top:3px; display:block; text-decoration:underline; text-underline-offset:2px; touch-action:manipulation; }
    .ann-thread { margin-top:6px; margin-left:20px; border-left:2px solid var(--border); padding-left:10px; display:none; }
    .ann-thread.open { display:block; }
    .ann-reply-form { margin-top:6px; margin-left:20px; display:none; }
    .ann-reply-form.open { display:block; }
    .ann-reply-form textarea { width:100%; box-sizing:border-box; background:var(--input-bg); border:1px solid var(--border); color:var(--text); border-radius:6px; padding:6px 8px; font-size:16px; resize:vertical; min-height:52px; margin-bottom:4px; }
    .ann-reply-form-row { display:flex; gap:6px; }
    .ann-reply-form-row button { flex:1; padding:4px; border-radius:5px; border:none; cursor:pointer; font-size:12px; font-weight:600; min-height:36px; touch-action:manipulation; }
    .ann-reply-form-row .btn-save { background:var(--accent); color:#fff; }
    .ann-reply-form-row .btn-cancel { background:var(--border); color:var(--text); }
    .ann-item.ann-resolved .ann-item-title { text-decoration:line-through; opacity:.55; }
    .ann-item.ann-resolved .ann-item-body { opacity:.45; }
    .ann-resolved-by { font-size:10px; color:var(--ok-text,#16a34a); margin-top:2px; }
    .ann-item-footer { display:flex; align-items:center; gap:4px; margin-top:4px; flex-wrap:wrap; }
    /* #40: upload form + progress bar */
    .mgmt-upload-form { border:1px dashed var(--border); border-radius:8px; padding:14px; display:flex; flex-direction:column; gap:10px; }
    .mgmt-upload-row { display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; }
    .mgmt-upload-row label { font-size:11px; font-weight:600; color:var(--text-muted); display:flex; flex-direction:column; gap:4px; }
    .mgmt-upload-row input[type="file"], .mgmt-upload-row select, .mgmt-upload-row input[type="month"] {
      padding:5px 8px; border-radius:6px; border:1px solid var(--border);
      background:var(--input-bg, var(--bg)); color:var(--text); font-size:16px; /* 16px prevents iOS auto-zoom */
    }
    .mgmt-upload-actions { display:flex; gap:8px; align-items:center; }
    .mgmt-upload-btn { padding:6px 16px; border-radius:6px; border:none; background:var(--accent); color:#fff; font-size:12px; font-weight:700; cursor:pointer; min-height:36px; touch-action:manipulation; }
    .mgmt-upload-btn:disabled { opacity:.45; cursor:not-allowed; }
    .mgmt-cancel-btn { padding:6px 12px; border-radius:6px; border:1px solid var(--border); background:none; color:var(--text-muted); font-size:12px; cursor:pointer; min-height:36px; touch-action:manipulation; }
    .upload-progress-wrap { display:none; flex-direction:column; gap:4px; }
    .upload-progress-wrap.visible { display:flex; }
    .upload-progress-bar-track { height:6px; background:var(--border); border-radius:99px; overflow:hidden; }
    .upload-progress-bar-fill { height:100%; background:var(--accent); border-radius:99px; width:0%; transition:width .15s; }
    .upload-progress-label { font-size:11px; color:var(--text-muted); }

    /* ── Budget Import Modal ─────────────────────────────────── */
    .budget-modal { background:var(--card-bg); border-radius:12px; padding:20px; width:420px; max-width:96vw; box-shadow:0 8px 32px rgba(0,0,0,.3); display:flex; flex-direction:column; gap:14px; }
    .budget-modal h3 { margin:0; font-size:15px; display:flex; align-items:center; justify-content:space-between; }
    .budget-modal label { font-size:12px; font-weight:600; color:var(--text-muted); display:flex; flex-direction:column; gap:5px; }
    .budget-modal input[type="file"] { padding:7px 10px; border-radius:6px; border:1px solid var(--border); background:var(--input-bg); color:var(--text); font-size:16px; width:100%; box-sizing:border-box; } /* 16px prevents iOS auto-zoom */
    .budget-modal .budget-submit { padding:8px 18px; border-radius:6px; border:none; background:var(--accent); color:#fff; font-size:13px; font-weight:700; cursor:pointer; align-self:flex-end; transition:opacity .15s; min-height:44px; touch-action:manipulation; } /* #60: ≥44px HIG touch target */
    .budget-modal .budget-submit:disabled { opacity:.4; cursor:default; }
    .budget-modal .budget-result { font-size:12px; border-radius:6px; padding:8px 12px; background:var(--ok-tint); color:var(--ok-text); display:none; }
    .budget-modal .budget-result.error { background:var(--danger-tint); color:var(--danger-dot); }
    .budget-modal .mgmt-close { background:none; border:none; cursor:pointer; font-size:18px; color:var(--text-muted); line-height:1; min-height:44px; min-width:44px; touch-action:manipulation; padding:0 4px; display:flex; align-items:center; justify-content:center; } /* #60: ≥44px HIG touch target */
    /* ── Budget suggest panel ─────────────────────────────────── */
    .budget-suggest-panel { border-top:1px solid var(--border); padding-top:12px; display:flex; flex-direction:column; gap:10px; }
    .budget-suggest-form { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; align-items:end; }
    .budget-suggest-form label { font-size:11px; font-weight:600; color:var(--text-muted); display:flex; flex-direction:column; gap:4px; }
    .budget-suggest-form input[type="number"], .budget-suggest-form input[type="text"] { padding:5px 8px; border-radius:5px; border:1px solid var(--border); background:var(--input-bg); color:var(--text); font-size:16px; width:100%; box-sizing:border-box; } /* 16px prevents iOS auto-zoom */
    .budget-suggest-preview { overflow-x:auto; max-height:220px; border:1px solid var(--border); border-radius:6px; }
    .budget-suggest-preview table { width:100%; border-collapse:collapse; font-size:11px; }
    .budget-suggest-preview th { position:sticky; top:0; background:var(--surface-dim); padding:5px 8px; text-align:left; font-weight:600; color:var(--text-muted); }
    .budget-suggest-preview td { padding:4px 8px; border-top:1px solid var(--border); color:var(--text); }
    .budget-suggest-actions { display:flex; gap:8px; justify-content:flex-end; }
    .budget-suggest-btn { padding:6px 14px; border-radius:5px; border:none; font-size:12px; font-weight:700; cursor:pointer; transition:opacity .15s; min-height:36px; touch-action:manipulation; }
    .budget-suggest-btn:disabled { opacity:.4; cursor:default; }
    .budget-suggest-btn.primary { background:var(--accent); color:#fff; }
    .budget-suggest-btn.secondary { background:var(--surface-dim); color:var(--text); }

    /* ── Budget Plan Modal (annual FY planning) ──────────────── */
    .budget-plan-modal { background:var(--card-bg); border-radius:12px; padding:0; width:880px; max-width:96vw; max-height:90vh; overflow:hidden; box-shadow:0 8px 32px rgba(0,0,0,.35); display:flex; flex-direction:column; }
    .budget-plan-header { padding:16px 20px 12px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; flex-shrink:0; }
    .budget-plan-header h3 { margin:0; font-size:15px; }
    .budget-plan-steps { display:flex; gap:6px; align-items:center; font-size:11px; font-weight:600; color:var(--text-muted); }
    .budget-plan-step { padding:3px 10px; border-radius:99px; background:var(--surface-dim); }
    .budget-plan-step.active { background:var(--accent); color:#fff; }
    .budget-plan-body { padding:16px 20px; overflow-y:auto; flex:1; display:flex; flex-direction:column; gap:14px; }
    .budget-plan-footer { padding:12px 20px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:8px; flex-shrink:0; }
    .budget-plan-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
    .budget-plan-row label { font-size:12px; font-weight:600; color:var(--text-muted); display:flex; flex-direction:column; gap:4px; }
    .budget-plan-select { padding:6px 10px; border-radius:6px; border:1px solid var(--border); background:var(--input-bg); color:var(--text); font-size:16px; }
    .budget-plan-btn { padding:7px 16px; border-radius:6px; border:none; font-size:13px; font-weight:700; cursor:pointer; transition:opacity .15s; min-height:36px; touch-action:manipulation; }
    .budget-plan-btn:disabled { opacity:.4; cursor:default; }
    .budget-plan-btn.primary { background:var(--accent); color:#fff; }
    .budget-plan-btn.secondary { background:var(--surface-dim); color:var(--text); border:1px solid var(--border); }
    .budget-plan-status { font-size:12px; color:var(--text-muted); }
    .budget-plan-status.error { color:var(--danger-dot); }
    .budget-plan-status.ok { color:var(--ok-text); }
    .budget-plan-table { width:100%; border-collapse:collapse; font-size:12px; }
    .budget-plan-table th { position:sticky; top:0; background:var(--surface-dim); padding:6px 10px; text-align:left; font-weight:600; color:var(--text-muted); font-size:11px; text-transform:uppercase; letter-spacing:.04em; border-bottom:1px solid var(--border); z-index:1; }
    .budget-plan-table td { padding:5px 10px; border-top:1px solid var(--border); vertical-align:middle; }
    .budget-plan-table .num { text-align:right; font-variant-numeric:tabular-nums; }
    .budget-plan-table input.override { width:110px; padding:4px 8px; border-radius:5px; border:1px solid var(--border); background:var(--input-bg); color:var(--text); font-size:16px; text-align:right; } /* 16px prevents iOS auto-zoom */
    .budget-plan-table input.override:focus { outline:2px solid var(--accent); border-color:transparent; }
    .budget-plan-table .row-check { width:16px; height:16px; cursor:pointer; }
    .budget-plan-wrap { overflow-x:auto; border:1px solid var(--border); border-radius:6px; max-height:380px; overflow-y:auto; }
    /* Budget plan — GL grid (Step 2) */
    .budget-plan-modal--gl { width:700px; }
    .bp-grid-body { padding:0 !important; gap:0 !important; }
    .bp-grid-toolbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; padding:10px 16px; border-bottom:1px solid var(--border); flex-shrink:0; background:var(--surface-dim); }
    .bp-month-nav { display:flex; align-items:center; gap:10px; }
    .bp-month-title { font-size:13px; font-weight:700; min-width:100px; text-align:center; }
    .bp-nav-btn { padding:4px 10px; min-height:32px; border-radius:5px; border:1px solid var(--border); background:var(--input-bg); color:var(--text); cursor:pointer; font-size:14px; touch-action:manipulation; }
    .bp-nav-btn:disabled { opacity:.35; cursor:default; }
    .bp-nav-btn:hover:not(:disabled) { background:var(--accent); color:#fff; border-color:var(--accent); }
    .bp-footer-grid { justify-content:space-between !important; }
    .bp-gl-table-wrap { overflow-y:auto; max-height:340px; border:none; border-radius:0; border-top:1px solid var(--border); }
    .bp-gl-table { width:100%; border-collapse:collapse; font-size:12px; }
    .bp-gl-table th { position:sticky; top:0; background:var(--surface-dim); padding:5px 10px; text-align:left; font-weight:600; color:var(--text-muted); font-size:11px; text-transform:uppercase; letter-spacing:.04em; border-bottom:1px solid var(--border); z-index:1; }
    .bp-gl-table td { padding:4px 8px; border-top:1px solid var(--border); vertical-align:top; }
    .bp-scope-row td { background:var(--bg); font-weight:700; font-size:11px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em; padding:8px 10px 4px; border-top:2px solid var(--border); }
    .bp-acct-cell { min-width:160px; }
    .bp-acct-code { display:block; font-size:11px; color:var(--text-muted); font-variant-numeric:tabular-nums; }
    .bp-acct-name { display:block; font-size:12px; color:var(--text); }
    .bp-section-tag { display:inline-block; font-size:10px; background:var(--accent); color:#fff; border-radius:3px; padding:0 4px; margin-left:4px; vertical-align:middle; opacity:.8; }
    .bp-input-cell { vertical-align:top !important; }
    .bp-input-cell.bp-cell-saved { background:color-mix(in srgb, var(--ok-bg, #1a2e1a) 30%, transparent); }
    .bp-input-cell.bp-cell-edited { background:color-mix(in srgb, var(--accent) 12%, transparent); }
    .bp-amount-input { width:100%; min-width:90px; padding:4px 6px; border-radius:5px; border:1px solid var(--border); background:var(--input-bg); color:var(--text); font-size:16px; text-align:right; box-sizing:border-box; } /* 16px prevents iOS zoom */
    .bp-amount-input:focus { outline:2px solid var(--accent); border-color:transparent; }
    .bp-cell-hint { display:block; font-size:10px; color:var(--text-muted); margin-top:2px; white-space:nowrap; }
    .bp-no-history { opacity:.55; }
    .bp-bias-pill { display:inline-block; font-size:9px; font-weight:700; border-radius:3px; padding:0 3px; margin-left:3px; background:var(--surface-dim); color:var(--text-muted); }
    .bp-bias-pill.bp-bias-up { background:#1a3a1a; color:#6cdb6c; }
    .bp-bias-pill.bp-bias-down { background:#3a1a1a; color:#e07070; }
    .bp-cell-audit { display:block; font-size:10px; color:var(--text-muted); margin-top:1px; opacity:.7; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:140px; }
    .bp-saved-col { width:56px; text-align:center; vertical-align:middle !important; }
    .bp-saved-badge { display:inline-block; font-size:10px; font-weight:700; background:var(--ok-bg, #1e3a1e); color:var(--ok-text, #7ee07e); border-radius:4px; padding:1px 6px; }
    .bp-empty-msg { text-align:center; color:var(--text-muted); padding:24px !important; font-size:13px; }
    @media (max-width: 600px) {
      .budget-plan-modal--gl { width:100%; max-width:100vw; border-radius:0; max-height:100dvh; }
      .bp-month-title { font-size:12px; min-width:80px; }
      .bp-grid-toolbar { padding:8px 12px; }
      .bp-amount-input { min-width:70px; min-height:44px; padding:12px 6px; } /* HIG 44px touch target */
      .bp-nav-btn { min-width:44px; min-height:44px; }
      .budget-plan-btn { min-height:44px; }
      .budget-plan-modal .mgmt-close { min-width:44px; min-height:44px; }
    }

    /* L2 budget comparison section */
    .l2-budget-section { margin-top:16px; }
    .l2-budget-section h4 { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); margin:0 0 6px; }
    .l2-budget-table { width:100%; border-collapse:collapse; font-size:12px; table-layout:fixed; }
    /* Fixed column widths: Line Type wide enough to read, numeric cols even */
    .l2-budget-table th:nth-child(1), .l2-budget-table td:nth-child(1) { width:22%; }
    .l2-budget-table th:nth-child(2), .l2-budget-table td:nth-child(2) { width:20%; }
    .l2-budget-table th:nth-child(3), .l2-budget-table td:nth-child(3) { width:18%; }
    .l2-budget-table th:nth-child(4), .l2-budget-table td:nth-child(4) { width:23%; }
    .l2-budget-table th:nth-child(5), .l2-budget-table td:nth-child(5) { width:17%; }
    .l2-budget-table th { background:var(--surface-dim); padding:5px 10px; text-align:left; font-weight:600; color:var(--text-muted); font-size:11px; border-bottom:1px solid var(--border); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .l2-budget-table td { padding:4px 10px; border-top:1px solid var(--border); }
    .l2-budget-table .num { text-align:right; font-variant-numeric:tabular-nums; }
    @media (max-width: 480px) {
      .l2-budget-table th { padding:4px 5px; font-size:10px; }
      .l2-budget-table td { padding:4px 5px; font-size:11px; }
    }

    /* ── Period status badge (adjacent to period select) ───── */
    /* Visible on all screen sizes so draft status is obvious   */
    /* without opening the native select or scrolling down.     */
    .period-status-badge {
      display: inline-flex; align-items: center;
      padding: 2px 7px; border-radius: 99px;
      font-size: 10px; font-weight: 700; letter-spacing: .05em;
      text-transform: uppercase; white-space: nowrap;
      background: #fef3c7; color: #92400e;
      border: 1px solid #f59e0b;
    }
    .period-status-badge[hidden] { display: none !important; }
    [data-theme="dark"] .period-status-badge {
      background: rgba(245,158,11,.15); color: #fcd34d;
      border-color: rgba(245,158,11,.4);
    }

    /* ── Draft period warning banner ────────────────────────── */
    .draft-banner {
      display: none; align-items: center; gap: 8px;
      background: #fef3c7; color: #92400e;
      border: 1px solid #f59e0b; border-radius: var(--radius-sm);
      padding: 8px 14px; font-size: 12px; font-weight: 600;
      margin-bottom: var(--gap);
    }
    .draft-banner.visible { display: flex; }
    [data-theme="dark"] .draft-banner {
      background: rgba(245,158,11,.12); color: #fcd34d;
      border-color: rgba(245,158,11,.35);
    }
    /* #43: anomaly alert banner */
    .anomaly-banner {
      display: none; align-items: flex-start; gap: 10px;
      background: var(--danger-tint); color: var(--danger-text);
      border: 1px solid var(--danger-dot); border-radius: var(--radius-sm);
      padding: 10px 14px; font-size: 12px;
      margin-bottom: var(--gap);
    }
    .anomaly-banner.visible { display: flex; }
    .anomaly-banner .anomaly-body { flex: 1; }
    .anomaly-banner .anomaly-title { font-weight: 700; margin-bottom: 4px; }
    .anomaly-banner .anomaly-list { margin: 0; padding: 0 0 0 16px; }
    .anomaly-banner .anomaly-list li { margin: 2px 0; }
    .anomaly-banner .anomaly-dismiss {
      background: none; border: 1px solid currentColor; border-radius: 4px;
      color: inherit; font-size: 11px; font-weight: 700; padding: 3px 10px;
      cursor: pointer; flex-shrink: 0; align-self: flex-start;
      min-height: 32px; touch-action: manipulation;
    }
    [data-theme="dark"] .anomaly-banner {
      background: rgba(220,38,38,.12); color: #fca5a5; border-color: rgba(220,38,38,.4);
    }
    .anomaly-view-btn {
      background: none; border: 1px solid currentColor; border-radius: 4px;
      color: inherit; font-size: 11px; font-weight: 700; padding: 3px 10px;
      cursor: pointer; flex-shrink: 0; align-self: flex-start; margin-right: 6px;
      min-height: 32px; touch-action: manipulation;
    }
    .anomaly-view-btn:hover { opacity: .8; }

    /* ── Manager avatar & popup ──────────────────────────────── */
    .mgr-avatar {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      border-radius: 50%;
      width: 36px; height: 36px;
      background: var(--accent);
      color: #fff;
      font-size: 9px; font-weight: 700; letter-spacing: .02em;
      user-select: none;
      flex-shrink: 0;
      touch-action: manipulation;
      transition: opacity var(--transition), transform var(--transition);
    }
    .mgr-avatar:hover { opacity: .85; transform: scale(1.1); }

    /* The floating popup — appended to body, positioned by JS */
    .mgr-popup {
      position: fixed;
      z-index: 9999;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 10px 13px;
      box-shadow: 0 6px 24px rgba(0,0,0,.18);
      font-size: 12px;
      line-height: 1.5;
      pointer-events: none;
      min-width: 180px;
      max-width: 260px;
      display: none;
    }
    .mgr-popup.visible { display: block; }
    .mgr-popup-name  { font-weight: 700; color: var(--text); margin-bottom: 1px; }
    .mgr-popup-title { color: var(--text-muted); font-size: 11px; margin-bottom: 4px; }
    .mgr-popup-line  { color: var(--text-muted); font-size: 11px; display: flex; gap: 5px; align-items: center; }
    .mgr-popup-line a { color: var(--text-muted); text-decoration: underline; pointer-events: auto; }

    /* Touch / coarse-pointer overrides for manager avatar & popup */
    @media (pointer: coarse) {
      .mgr-avatar { width: 32px; height: 32px; font-size: 11px; }
      .mgr-popup  { pointer-events: auto; }
    }

    /* card-manager container — just holds the avatar, aligned bottom-left */
    .card-manager { margin-top: 6px; display: flex; align-items: center; gap: 6px; }

    /* ── Managers button (top bar) ──────────────────────────── */
    .managers-btn {
      height: 34px;
      padding: 0 14px;
      border-radius: var(--radius-sm);
      border: 1px solid var(--border);
      background: var(--bg);
      color: var(--text-muted);
      font-size: 12px;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 5px;
      flex-shrink: 0;
      transition: background var(--transition), color var(--transition);
      white-space: nowrap;
      cursor: pointer;
      touch-action: manipulation;
    }
    .managers-btn:hover { background: var(--surface-dim); color: var(--text); }
    [data-theme="dark"] .managers-btn {
      background: var(--surface-dim); color: var(--text-muted); border-color: var(--border);
    }
    @media (max-width: 600px) { .managers-btn { display: none; } }

    /* ── Managers modal ─────────────────────────────────────── */
    .mgr-modal-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:1100; display:flex; align-items:center; justify-content:center; }
    .mgr-modal {
      background: var(--card-bg);
      border-radius: 12px;
      padding: 24px;
      width: 680px;
      max-width: 96vw;
      max-height: 85vh;
      overflow-y: auto;
      box-shadow: 0 8px 32px rgba(0,0,0,.3);
      display: flex;
      flex-direction: column;
      gap: 14px;
    }
    .mgr-modal h3 { margin: 0; font-size: 16px; }
    .mgr-modal .mgr-modal-close { float:right; background:none; border:none; cursor:pointer; font-size:18px; color:var(--text-muted); line-height:1; min-height:36px; min-width:36px; touch-action:manipulation; }
    .mgr-section-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); margin:12px 0 6px; border-bottom:1px solid var(--border); padding-bottom:4px; }
    .mgr-entry {
      display: grid;
      grid-template-columns: 80px 1fr 1fr 1fr 1fr auto auto;
      gap: 6px;
      align-items: center;
      margin-bottom: 6px;
    }
    @media (max-width: 600px) {
      .mgr-entry { grid-template-columns: 1fr 1fr; }
    }
    .mgr-entry input {
      background: var(--input-bg, var(--bg));
      border: 1px solid var(--border);
      color: var(--text);
      border-radius: 6px;
      padding: 5px 8px;
      font-size: 12px;
      font: inherit;
      font-size: 12px;
      width: 100%;
    }
    .mgr-entry input::placeholder { color: var(--text-muted); opacity:.6; }
    .mgr-entry .mgr-code-label {
      font-size: 11px;
      font-weight: 600;
      color: var(--text);
      background: var(--surface-dim);
      border-radius: 4px;
      padding: 5px 7px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .mgr-btn-save {
      padding: 5px 11px; border-radius: 6px; border: none; cursor: pointer;
      font-size: 12px; font-weight: 600;
      background: var(--ok-tint); color: var(--ok-text);
      white-space: nowrap; min-height: 36px; touch-action: manipulation;
    }
    .mgr-btn-save:hover { opacity: .85; }
    .mgr-btn-del {
      padding: 5px 9px; border-radius: 6px; border: 1px solid var(--danger-dot); cursor: pointer;
      font-size: 12px; font-weight: 600;
      background: transparent; color: var(--danger-dot);
      white-space: nowrap; min-height: 36px; touch-action: manipulation;
    }
    .mgr-btn-del:hover { background: var(--danger-tint); }
    .mgr-add-row {
      background: none; border: 1px dashed var(--border); border-radius: 6px;
      color: var(--text-muted); font-size: 12px; font-weight: 600;
      padding: 6px 12px; cursor: pointer; width: 100%; margin-top: 4px;
      min-height: 36px; touch-action: manipulation;
    }
    .mgr-add-row:hover { background: var(--hover-bg); color: var(--text); }
    .mgr-status { font-size: 11px; font-weight: 600; color: var(--ok-dot); min-height: 16px; }
    .mgr-status.error { color: var(--danger-dot); }
    .mgr-col-headers {
      display: grid;
      grid-template-columns: 80px 1fr 1fr 1fr 1fr auto auto;
      gap: 6px;
      font-size: 10px; font-weight: 700; text-transform: uppercase;
      letter-spacing: .05em; color: var(--text-muted);
      padding-bottom: 4px;
    }

    /* ── Task F: Mobile overflow ⋮ menu ─────────────────────── */
    .overflow-menu-btn {
      display: none; /* shown via media query */
      min-height: 44px; min-width: 44px; padding: 0 10px; border-radius: 6px;
      background: var(--surface-dim); border: 1px solid var(--border);
      color: var(--text); font-size: 18px; cursor: pointer;
      align-items: center; justify-content: center;
      flex-shrink: 0; touch-action: manipulation;
    }
    [data-theme="dark"] .overflow-menu-btn {
      background: var(--surface-dim);
      border-color: var(--border);
      color: var(--text);
    }

    /* ── Decluttered control bar: all utility controls live only in the ⋯ overflow panel.
       The bar always shows: Logo | FY | Period | Basis | [sep] | Search | Export | Badges | Theme | ⋯
       Sort, Compare, Help, Uploads, Thresholds, Managers, Expected, Report,
       Budget Import, Budget Plan, Summary, Print, Export PDF — all overflow-only. */
    .overflow-menu-btn { display: flex !important; }
    /* Always hide utility controls from the bar — they live in the overflow panel */
    .compare-toggle,
    #sortLabel, #sortSelect,
    .mgmt-btn,
    .thresholds-btn,
    .managers-btn,
    .export-pdf-btn,
    .summary-btn,
    .print-btn,
    #helpBtn { display: none !important; }
    /* Keep search and primary export visible on desktop; hide on small screens */
    @media (max-width: 1280px) {
      .search-wrap,
      .export-btn { display: none !important; }
    }

    .overflow-panel {
      position: fixed; top: var(--header-h, 56px); right: 8px; z-index: 2000;
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 10px; box-shadow: 0 8px 32px rgba(0,0,0,.18);
      padding: 8px 0; min-width: 220px;
      max-width: calc(100vw - 16px); /* #100: clamp to viewport on narrow mobile */
      /* Mobile: cap height so panel never extends off-screen and is touch-scrollable */
      max-height: calc(100vh - var(--header-h, 56px) - 16px);
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      display: none;
    }
    .overflow-panel.visible { display: block; }

    .overflow-item {
      display: flex; align-items: center; gap: 10px;
      padding: 10px 16px; min-height: 44px; font-size: 14px; cursor: pointer;
      color: var(--text); border: none; background: none;
      width: 100%; text-align: left; touch-action: manipulation;
    }
    .overflow-item:hover,
    .overflow-item:active { background: var(--hover-bg); }

    .overflow-divider {
      height: 1px; background: var(--border);
      margin: 4px 0;
    }
    .overflow-group-label {
      font-size: 14px; font-weight: 700;
      text-transform: uppercase; letter-spacing: .07em;
      color: var(--text-muted);
      padding: 6px 16px 2px;
    }

    /* Inline compare-toggle inside overflow panel */
    .overflow-compare {
      display: flex; gap: 0;
      border: 1px solid var(--border); border-radius: 6px;
      overflow: hidden; margin: 4px 16px 4px;
    }
    .overflow-compare button {
      flex: 1; padding: 7px 8px;
      font-size: 12px; font-weight: 600;
      color: var(--text-muted); background: var(--bg);
      border: none; border-right: 1px solid var(--border);
      cursor: pointer; white-space: nowrap;
      min-height: 44px; touch-action: manipulation; /* #89: 44px HIG target */
    }
    .overflow-compare button:last-child { border-right: none; }
    .overflow-compare button.active { background: var(--text); color: #F1EFED; }
    [data-theme="dark"] .overflow-compare button { background: var(--surface-dim); }
    [data-theme="dark"] .overflow-compare button.active { background: var(--text); color: var(--bg); }

    /* Inline sort select inside overflow panel */
    .overflow-sort-row {
      display: flex; align-items: center; gap: 8px;
      padding: 6px 16px;
    }
    .overflow-sort-row label {
      font-size: 12px; font-weight: 600;
      color: var(--text-muted); white-space: nowrap;
    }
    .overflow-sort-row select {
      flex: 1; height: 44px; padding: 0 8px; /* #89: 44px HIG target */
      border: 1px solid var(--border); border-radius: 6px;
      background: var(--bg); color: var(--text); font-size: 16px;
    }
    [data-theme="dark"] .overflow-sort-row select { background: var(--surface-dim); }

    /* Inline search inside overflow panel */
    .overflow-search-row {
      display: flex; align-items: center; gap: 6px;
      padding: 6px 16px;
    }
    .overflow-search-row input {
      flex: 1; height: 44px; padding: 0 8px; /* #89: 44px HIG target */
      border: 1px solid var(--border); border-radius: 6px;
      background: var(--bg); color: var(--text);
      font: inherit; font-size: 16px; outline: none;
    }
    .overflow-search-row input:focus { border-color: var(--text-muted); }
    .overflow-search-row input::placeholder { color: var(--text-muted); opacity: .55; }
    [data-theme="dark"] .overflow-search-row input { background: var(--surface-dim); }

    /* Summary item disabled/active states inside overflow */
    .overflow-item.summary-disabled { opacity: .4; cursor: not-allowed; }
    .overflow-item.summary-active   { color: var(--ok-dot); }

    /* ── #49: Mobile-responsive layout (768px tablet breakpoint) ── */
    @media (max-width: 768px) {
      /* Control bar: allow wrapping, full-width selects */
      .control-bar {
        height: auto;
        min-height: 56px;
        flex-wrap: wrap;
        padding: 8px 12px;
        gap: 6px;
        row-gap: 6px;
      }
      .cb-select {
        min-width: 90px;
        flex: 1;
        font-size: 16px; /* ≥16px required to prevent iOS viewport zoom on tap */
      }
      .logo { font-size: 11px; }

      /* Activity / CC grids → 2-column on tablet */
      .card-grid        { grid-template-columns: repeat(2, 1fr); }
      .portfolio-strip  { grid-template-columns: repeat(2, 1fr); }

      /* Cards: readable font sizes, no overflow on kpi values */
      .scope-card,
      .section-card,
      .kpi-tile { padding: 16px; }

      .card-value { font-size: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
      .kpi-tile-value { font-size: 20px; }
      .card-name { font-size: 12px; }
      .card-reason { font-size: 11px; }

      /* Touch targets: 44 px minimum for all interactive controls */
      .scope-card,
      .section-card,
      .kpi-tile,
      .ann-modal,
      .ann-modal-backdrop { touch-action: manipulation; }

      .cb-select,
      .metric-toggle button,
      .compare-toggle button,
      .overflow-menu-btn,
      .theme-btn,
      .export-btn,
      .print-btn,
      .export-pdf-btn,
      .thresholds-btn,
      .managers-btn,
      .mgmt-btn,
      .overflow-item { min-height: 44px; }

      /* Sparkline SVG: never overflow its container */
      .sparkline-wrap svg { max-width: 100%; height: auto; }

      /* Lines table: horizontal scroll wrapper already on .lines-table */
      .lines-table table { min-width: 480px; }

      /* Modals: nearly full-screen on tablet */
      .thr-modal,
      .fb-modal,
      .ann-modal,
      .mgmt-modal,
      .budget-modal,
      .mgr-modal {
        width: 95vw;
        max-height: 90vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch; /* momentum scroll on iOS */
        padding: 18px;
      }

      /* Badge bar: allow wrap on narrow screens */
      .badge-bar { flex-wrap: wrap; }

      /* Breadcrumb: tighter */
      .breadcrumb-bar { padding: 6px 12px; }
    }

    /* ── #49: Phone-specific refinements (480px) ─────────────── */
    @media (max-width: 480px) {
      /* Control bar padding handled in the earlier 480px block */
      .cb-select { font-size: 16px; min-width: 70px; } /* ≥16px required to prevent iOS viewport zoom on focus */

      /* Grids → single column on phone */
      .card-grid        { grid-template-columns: 1fr; }
      .portfolio-strip  { grid-template-columns: 1fr; }
      .section-grid     { grid-template-columns: 1fr; }
      .period-strip     { grid-template-columns: 1fr; }

      /* Cards: tighter padding, smaller text */
      .scope-card,
      .section-card,
      .kpi-tile { padding: 14px; }

      .card-value       { font-size: 18px; }
      .kpi-tile-value   { font-size: 18px; }
      .section-value    { font-size: 20px; }
      .card-name        { font-size: 11px; }
      .card-delta       { font-size: 11px; }
      .card-reason      { font-size: 11px; }
      .card-metric-label,
      .kpi-tile-label   { font-size: 9px; }

      /* Canvas padding — extra bottom clearance so fixed FAB doesn't overlap sparkline buttons */
      .canvas { padding: 10px 10px 80px; gap: 8px; }

      /* Modals: full-width on phone */
      .thr-modal,
      .fb-modal,
      .ann-modal,
      .mgmt-modal,
      .budget-modal,
      .mgr-modal {
        width: 98vw;
        max-height: 92vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch; /* momentum scroll on iOS */
        border-radius: 10px;
        padding: 14px;
      }

      /* Feedback FAB: move up so it doesn't overlap page content */
      .feedback-fab { bottom: 14px; right: 14px; }

      /* GL table card-view threshold already fires at 560px, fine */
    }

    /* ── Print header (hidden on screen, shown in print) ──────── */
    .print-header { display: none; }

    /* ── Single @media print block — #46 branded export + #92 merge ──── */
    @media print {
      /* Color accuracy */
      * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

      /* Force light-mode tokens regardless of current theme */
      :root, [data-theme="dark"] {
        --bg:          #F1EFED;
        --text:        #0A1916;
        --text-muted:  #4A6360;
        --surface:     #FFFFFF;
        --surface-dim: #EAE8E5;
        --border:      rgba(10,25,22,.12);
        --shadow-sm: none; --shadow-md: none; --shadow-lg: none;
        --ok-dot:      #16A34A; --ok-tint:  #DCFCE7; --ok-text:  #14532D;
        --watch-dot:   #D97706; --watch-tint:#FEF3C7; --watch-text:#78350F;
        --danger-dot:  #DC2626; --danger-tint:#FEE2E2;--danger-text:#7F1D1D;
      }

      /* Hide interactive chrome */
      .control-bar, .breadcrumb-bar, .anomaly-banner, #anomalyBanner,
      .mgmt-btn, .export-pdf-btn, .modal, .modal-backdrop,
      .load-more-btn, .card-drill, .back-card, .esc-hint,
      .sparkline-toggle, .missing-pill, #expectedItemsBtn,
      button:not(.print-keep) { display: none !important; }

      /* Page setup */
      @page { size: A4 landscape; margin: 15mm 12mm; }
      body { background: white !important; color: black !important; font-size: 10pt; }

      /* Remove all shadows */
      * { box-shadow: none !important; }

      /* Canvas */
      .canvas { padding: 10px; gap: 10px; max-width: 100%; }

      /* Narrative */
      .narrative { grid-template-columns: 1fr; }
      .narrative-icon { display: none; }

      /* Grids */
      .portfolio-strip { grid-template-columns: repeat(3, 1fr); }
      .card-grid, .cc-grid { grid-template-columns: repeat(3, 1fr) !important; }
      .section-grid { grid-template-columns: repeat(2, 1fr); }

      /* Cards — remove dark bg, tighten padding, avoid page splits */
      .card, .scope-card, .section-card {
        background: white !important;
        border: 1px solid #ccc !important;
        box-shadow: none !important;
        break-inside: avoid;
      }
      .kpi-tile { padding: 12px; page-break-inside: avoid; }

      /* KPI values — ensure readable in print */
      .card-kpi-value, .card-title, .card-name { color: black !important; }
      .delta-pos { color: #1a7a3c !important; }
      .delta-neg { color: #b91c1c !important; }

      /* Lines / GL table — full width */
      .lines-table { overflow-x: visible !important; }
      .lines-table table { width: 100% !important; font-size: 8pt; }

      /* Sparklines — keep but size down */
      .sparkline-row svg { max-width: 120px !important; }

      /* Summary view */
      .summary-btn { display: none; }
      .summary-table { font-size: 11px; }
      .summary-table th, .summary-table td { padding: 5px 7px; }

      /* Report header — show period/FY */
      .print-header { display: block !important; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 2px solid #ccc; }

      /* Annotations panel — show if open */
      .ann-modal { display: block !important; position: relative !important;
        width: 100% !important; box-shadow: none !important; }

      /* Leadership print view — when active, show only it */
      body.lp-printing > *:not(#leadershipPrintView) { display: none !important; }
      body.lp-printing #leadershipPrintView { display: block !important; position: static !important; }
      .lp-no-print { display: none !important; }
    }

    /* ── Leadership Summary print view ─────────────────────────── */
    #leadershipPrintView {
      display: none;
      position: fixed; inset: 0; z-index: 9999;
      background: #fff; color: #111;
      padding: 32px 40px;
      overflow-y: auto;
      font-family: system-ui, sans-serif;
      box-sizing: border-box;
    }
    /* #33: reduce lateral padding on narrow viewports so content isn't cramped */
    @media (max-width: 600px) {
      #leadershipPrintView { padding: 20px 16px; }
    }
    @media (max-width: 375px) {
      #leadershipPrintView { padding: 16px 12px; }
    }
    #leadershipPrintView h1 { font-size: 22px; font-weight: 700; margin: 0 0 4px; color: #111; }
    #leadershipPrintView .lp-generated { font-size: 11px; color: #666; margin: 0 0 20px; }
    #leadershipPrintView .lp-headline { display: flex; gap: 24px; flex-wrap: wrap; margin-bottom: 24px; }
    #leadershipPrintView .lp-big-num { flex: 1; min-width: 140px; background: #f7f7f7; border-radius: 8px; padding: 14px 18px; }
    #leadershipPrintView .lp-big-num .lp-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: #666; margin-bottom: 4px; }
    #leadershipPrintView .lp-big-num .lp-value { font-size: 22px; font-weight: 700; color: #111; }
    #leadershipPrintView .lp-big-num .lp-sub { font-size: 12px; color: #555; margin-top: 2px; }
    #leadershipPrintView table.lp-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 24px; }
    #leadershipPrintView table.lp-table th { text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: #666; border-bottom: 2px solid #ddd; padding: 6px 8px; }
    #leadershipPrintView table.lp-table td { padding: 7px 8px; border-bottom: 1px solid #eee; color: #111; vertical-align: middle; }
    #leadershipPrintView table.lp-table tr:last-child td { border-bottom: none; }
    #leadershipPrintView .lp-pill { display: inline-block; border-radius: 99px; padding: 2px 8px; font-size: 11px; font-weight: 600; }
    #leadershipPrintView .lp-pill.danger { background: #fee2e2; color: #991b1b; }
    #leadershipPrintView .lp-pill.watch  { background: #fef9c3; color: #92400e; }
    #leadershipPrintView .lp-pill.ok     { background: #dcfce7; color: #166534; }
    #leadershipPrintView .lp-trend-chip { font-size: 11px; color: #555; white-space: nowrap; }
    #leadershipPrintView .lp-trend-chip.declining { color: #991b1b; }
    #leadershipPrintView .lp-trend-chip.improving  { color: #166534; }
    #leadershipPrintView .lp-section { margin-bottom: 20px; }
    #leadershipPrintView .lp-section h2 { font-size: 14px; font-weight: 700; color: #111; margin: 0 0 10px; border-bottom: 1px solid #ddd; padding-bottom: 6px; }
    #leadershipPrintView .lp-notable { margin: 0; padding: 0 0 0 18px; }
    #leadershipPrintView .lp-notable li { padding: 3px 0; font-size: 13px; color: #111; }
    #leadershipPrintView .lp-subsection { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: #555; margin: 12px 0 6px; }
    #leadershipPrintView .lp-footer { font-size: 11px; color: #888; text-align: center; border-top: 1px solid #ddd; padding-top: 12px; margin-top: 24px; }
    #leadershipPrintView .lp-actions { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; align-items: center; }
    #leadershipPrintView .lp-close { margin-left: auto; background: none; border: none; font-size: 20px; cursor: pointer; color: #666; line-height: 1; padding: 4px 8px; min-height: 36px; min-width: 36px; touch-action: manipulation; }
    #leadershipPrintView .lp-btn { background: #111; color: #fff; border: none; border-radius: 6px; padding: 8px 16px; font-size: 13px; font-weight: 600; cursor: pointer; min-height: 36px; touch-action: manipulation; }
    #leadershipPrintView .lp-btn.secondary { background: #f3f4f6; color: #111; border: 1px solid #ddd; }

    /* ── Users modal (#46) ──────────────────────────────────────────────────── */
    .users-modal-backdrop { position: fixed; inset: 0; z-index: 1100; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; }
    .users-modal { background: var(--card-bg); border-radius: 12px; padding: 24px; width: 780px; max-width: 96vw; max-height: 88vh; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 8px 32px rgba(0,0,0,.3); }
    .users-modal h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--text); }
    .users-modal-header { display: flex; align-items: center; justify-content: space-between; }
    .users-modal-close { background: none; border: none; font-size: 18px; cursor: pointer; color: var(--text-muted); padding: 4px 8px; border-radius: 4px; min-height: 36px; min-width: 36px; touch-action: manipulation; }
    .users-modal-close:hover { background: var(--surface-dim); color: var(--text); }
    .users-section-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); border-bottom: 1px solid var(--border); padding-bottom: 4px; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
    .users-pending-badge { background: var(--watch-tint,#fef9c3); color: var(--watch-text,#92400e); border: 1px solid var(--watch-dot,#f59e0b); font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 99px; }
    .users-pending-section { border: 1px solid var(--watch-dot,#f59e0b); border-radius: 8px; padding: 12px; background: rgba(245,158,11,.07); }
    .users-table { width: 100%; border-collapse: collapse; font-size: 12px; }
    .users-table th { text-align: left; padding: 4px 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); border-bottom: 1px solid var(--border); white-space: nowrap; }
    .users-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); vertical-align: middle; color: var(--text); }
    .users-table tr:last-child td { border-bottom: none; }
    .users-table tr:hover td { background: var(--surface-dim); }
    .users-status-badge { display: inline-block; padding: 2px 8px; border-radius: 99px; font-size: 11px; font-weight: 700; white-space: nowrap; }
    .users-status-badge.active { background: var(--ok-tint,#dcfce7); color: var(--ok-text,#166534); }
    .users-status-badge.pending-invite { background: var(--surface-dim); color: var(--text-muted); }
    .users-status-badge.needs-approval { background: var(--watch-tint,#fef9c3); color: var(--watch-text,#92400e); }
    .users-status-badge.deactivated { background: var(--danger-tint,#fee2e2); color: var(--danger-text,#991b1b); }
    .users-role-select { font-size: 12px; border: 1px solid var(--border); border-radius: 4px; background: var(--input-bg,var(--bg)); color: var(--text); padding: 3px 6px; cursor: pointer; max-width: 120px; }
    .users-actions { display: flex; gap: 4px; flex-wrap: wrap; }
    .users-btn { font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 5px; border: 1px solid var(--border); background: var(--surface-dim); color: var(--text); cursor: pointer; min-height: 28px; touch-action: manipulation; white-space: nowrap; }
    .users-btn:hover { background: var(--bg); }
    .users-btn.primary { background: var(--accent,#2563eb); color: #fff; border-color: transparent; }
    .users-btn.primary:hover { opacity: .88; }
    .users-btn.danger { background: var(--danger-tint,#fee2e2); color: var(--danger-text,#991b1b); border-color: transparent; }
    .users-btn.danger:hover { opacity: .85; }
    .users-create-form { border: 1px dashed var(--border); border-radius: 8px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
    .users-form-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
    .users-form-label { font-size: 11px; font-weight: 600; color: var(--text-muted); display: flex; flex-direction: column; gap: 4px; }
    .users-form-input, .users-form-select { font-size: 16px; padding: 6px 10px; border-radius: 6px; border: 1px solid var(--border); background: var(--input-bg,var(--bg)); color: var(--text); min-width: 140px; }
    .users-form-select { font-size: 13px; min-width: 120px; }
    .users-token-box { background: var(--surface-dim); border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; font-size: 11px; font-family: monospace; word-break: break-all; display: flex; align-items: center; gap: 8px; color: var(--text-muted); }
    .users-token-box a { color: var(--accent,#2563eb); text-decoration: none; flex: 1; word-break: break-all; }
    .users-token-box a:hover { text-decoration: underline; }
    .users-invites-section { margin-top: 4px; }
    .users-invites-section summary { list-style: none; cursor: pointer; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); padding: 4px 0; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 6px; }
    .users-invites-section summary::-webkit-details-marker { display: none; }
    .users-invites-section summary::before { content: '▶'; font-size: 9px; transition: transform .15s; }
    .users-invites-section[open] summary::before { transform: rotate(90deg); }
    .users-invites-body { padding-top: 10px; display: flex; flex-direction: column; gap: 10px; }
    .users-status-msg { font-size: 12px; color: var(--text-muted); font-style: italic; }
    .users-error { font-size: 12px; color: var(--danger-text,#991b1b); font-weight: 600; }
    [data-theme="dark"] .users-pending-section { background: rgba(245,158,11,.10); }
    [data-theme="dark"] .users-modal { box-shadow: 0 8px 32px rgba(0,0,0,.6); }

    /* ── #61: Mobile touch-target fixes (≥44px HIG) ───────────── */
    @media (max-width: 600px) {
      /* Annotation reply + edit/delete action buttons */
      .ann-reply-btn { min-height: 44px; }
      .ann-action-btn { min-width: 44px; min-height: 44px; }
      /* Annotation modal + edit-area + reply-form save/cancel */
      .ann-modal .modal-row button { min-height: 44px; }
      .ann-edit-area .ann-edit-row button { min-height: 44px; }
      .ann-reply-form-row button { min-height: 44px; }
      /* AI narrative generate + regenerate buttons */
      .ai-narrative-btn { min-height: 44px; }
      .ai-narrative-regen { min-height: 44px; }
      /* AI consent Disable/Enable toggle */
      #aiConsentToggle { min-height: 44px; }
      /* Sparkline range toggles (6M / 2Y) */
      .sparkline-toggle { min-height: 44px; min-width: 44px; }
      /* Budget plan FY dropdown */
      .budget-plan-select { min-height: 44px; }
    }