/* ================================================================
       The Table Church — Metrics Dashboard · "Glass over Paper"
       ----------------------------------------------------------------
       Frosted glass panels floating over a soft Paper color field,
       Metro-style flat color tiles for the accent KPIs and a pivot-style
       group nav, iOS-7 hairlines (1px, low contrast) for every rule.
       Brand palette (Periwinkle / Mint / Lavender / Ink / Paper / Coral /
       Sunshine / Grape / Sage), Bebas Neue Pro for display + labels +
       numbers, system sans for data-dense body text.

       Accent ramps keep their historical names (purple / teal / coral /
       pink / blue / green / amber) because the HTML data-accent attributes
       and the JS reference them; the VALUES now map onto the brand:
         purple → Periwinkle   teal → Mint      coral → Coral
         pink   → Grape        blue → Slate     green → Sage
         amber  → Sunshine
       Each ramp: -50 tint · -mid (dark-mode lines, glows) · -600 core
       fill / light-mode text · -800 ink · -chart (light-mode chart line)
       · -glow (translucent mid, dark-mode tints).
       Contrast rules (all verified ≥ 4.5:1): -800 ink on -50 tints; white
       only on -600 or darker; small text on Paper uses -600 or darker; in
       dark mode -50 text on -glow pills and -mid text on the dark ground.

       Dark scheme follows prefers-color-scheme. Charts read their palette
       from the --chart-* custom properties at runtime (see applyChartTheme
       in the script) so they re-tint with the page.
       ================================================================ */

    @font-face {
      font-family: 'Bebas Neue Pro';
      src: url('/fonts/BebasNeuePro-Bold.woff2') format('woff2'),
           url('/fonts/BebasNeuePro-Bold.otf') format('opentype');
      font-weight: 700;
      font-display: swap;
    }
    @font-face {
      font-family: 'Bebas Neue Pro';
      src: url('/fonts/BebasNeuePro-Regular.woff2') format('woff2'),
           url('/fonts/BebasNeuePro-Regular.otf') format('opentype');
      font-weight: 500;
      font-display: swap;
    }
    @font-face {
      font-family: 'Bebas Neue Pro';
      src: url('/fonts/BebasNeuePro-Book.woff2') format('woff2'),
           url('/fonts/BebasNeuePro-Book.otf') format('opentype');
      font-weight: 400;
      font-display: swap;
    }

    :root {
      color-scheme: light;

      /* Accent ramps — see header comment for the brand mapping. */
      --purple-50: #E9EBF7; --purple-mid: #7F86CF; --purple-600: #6068B2; --purple-800: #343579; --purple-chart: #6068B2; --purple-glow: rgba(127, 134, 207, 0.20);
      --teal-50:   #E1F4EF; --teal-mid:   #5FC4AE; --teal-600:   #1A7A66; --teal-800:   #0F4A3D; --teal-chart:   #279274; --teal-glow:   rgba(95, 196, 174, 0.20);
      --coral-50:  #FFEBE6; --coral-mid:  #FF8674; --coral-600:  #C0482F; --coral-800:  #6B2314; --coral-chart:  #DC5C3C; --coral-glow:  rgba(255, 134, 116, 0.20);
      --pink-50:   #F0E9F6; --pink-mid:   #A97FCF; --pink-600:   #7A3FA0; --pink-800:   #39207C; --pink-chart:   #8F55BB; --pink-glow:   rgba(169, 127, 207, 0.20);
      --blue-50:   #E4EDF6; --blue-mid:   #5B8FCB; --blue-600:   #2F66A6; --blue-800:   #163A66; --blue-chart:   #3670B5; --blue-glow:   rgba(91, 143, 203, 0.20);
      --green-50:  #E8F1EC; --green-mid:  #8FB9A2; --green-600:  #3F7A5D; --green-800:  #23452F; --green-chart:  #4E8466; --green-glow:  rgba(143, 185, 162, 0.22);
      --amber-50:  #FFF3D6; --amber-mid:  #FFBF3F; --amber-600:  #8F6200; --amber-800:  #4A3200; --amber-chart:  #B87F00; --amber-glow:  rgba(255, 191, 63, 0.22);

      /* Brand — Periwinkle. --brand is the text/link/outline use; --brand-fill
         is the solid fill behind white type (stays -600 in both schemes). */
      --brand:           var(--purple-600);
      --brand-deep:      var(--purple-800);
      --brand-tint:      var(--purple-50);
      --brand-fill:      var(--purple-600);
      --brand-fill-hover:var(--purple-800);

      /* Page accent — each .page / nav link overrides via data-accent. */
      --accent:          var(--purple-600);   /* lines, outlines, small text */
      --accent-mid:      var(--purple-mid);
      --accent-tint:     var(--purple-50);    /* soft surface behind -ink text */
      --accent-ink:      var(--purple-800);   /* text on tint */
      --accent-fill:     var(--purple-600);   /* solid Metro tile, white type */
      --accent-glow:     var(--purple-glow);
      --accent-soft:     var(--green-50);

      /* Ground + glass */
      --bg:              #FAF9F6;                       /* Paper */
      --bg-solid:        #FAF9F6;
      --blob-a:          rgba(165, 223, 211, 0.72);     /* Mint */
      --blob-b:          rgba(96, 104, 178, 0.26);      /* Periwinkle */
      --blob-c:          rgba(221, 229, 237, 1.00);     /* Lavender Mist */
      --card:            rgba(255, 255, 255, 0.58);     /* glass pane */
      --card-strong:     rgba(255, 255, 255, 0.86);     /* modal glass */
      --card-solid:      #FFFFFF;
      --card-sticky:     rgba(255, 255, 255, 0.35);     /* sticky table cells (frosted) */
      --chip:            rgba(255, 255, 255, 0.55);     /* secondary buttons, inputs */
      --glass-border:    rgba(255, 255, 255, 0.70);
      --glass-edge:      rgba(37, 42, 54, 0.08);        /* outer hairline on glass */
      --glass-blur:      22px;
      --glass-shadow:    0 10px 30px rgba(37, 42, 54, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.80);
      --glass-shadow-lift: 0 16px 40px rgba(37, 42, 54, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.85);

      /* Hairlines */
      --line:            rgba(37, 42, 54, 0.11);
      --line-strong:     rgba(37, 42, 54, 0.24);
      --hair:            1px solid var(--line);

      /* Ink */
      --ink:             #252A36;   /* Ink */
      --ink-soft:        #3B3F4A;
      --muted:           #6A6F7C;
      --muted-ink:       #4B4F54;   /* Charcoal */
      --on-fill:         #FFFFFF;
      --on-fill-soft:    rgba(255, 255, 255, 0.82);

      /* Semantic */
      --pos:             var(--green-600);
      --neg:             var(--coral-600);
      --pos-tint:        var(--green-50);
      --neg-tint:        var(--coral-50);
      --pos-ink:         var(--green-800);
      --neg-ink:         var(--coral-800);
      --warn-tint:       var(--amber-50);
      --warn-ink:        var(--amber-800);

      /* Charts — read at runtime by applyChartTheme(). */
      --chart-purple:    var(--purple-chart);
      --chart-teal:      var(--teal-chart);
      --chart-coral:     var(--coral-chart);
      --chart-pink:      var(--pink-chart);
      --chart-blue:      var(--blue-chart);
      --chart-green:     var(--green-chart);
      --chart-amber:     var(--amber-chart);
      --chart-pos:       var(--green-600);
      --chart-neg:       var(--coral-600);
      --chart-anchor:    var(--purple-800);
      --chart-gray:      #8A8E99;
      --chart-gray-soft: #B9BCC6;
      --chart-ink:       #4B4F54;
      --chart-grid:      rgba(37, 42, 54, 0.08);
      --chart-fill-purple: rgba(96, 104, 178, 0.14);
      --chart-fill-teal:   rgba(39, 146, 116, 0.12);
      --chart-fill-blue:   rgba(54, 112, 181, 0.12);
      --chart-fill-pink:   rgba(143, 85, 187, 0.12);
      --chart-hist-1:    #A3A8E0;
      --chart-hist-2:    #7FD0BC;
      --chart-hist-3:    #F0A896;
      --chart-hist-4:    #C4A6DE;
      --chart-hist-5:    #B3CDBE;
      --chart-second-teal:   #7FD0BC;
      --chart-second-purple: #A3A8E0;
      --chart-second-green:  #B3CDBE;

      /* Type. The system font in five sizes; Bebas only for numbers and
         page titles (sizes set where they're used). */
      --font-display: 'Bebas Neue Pro', 'Bebas Neue', Impact, sans-serif;
      --font-body:    ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
      --text-xs:  12px;   /* sources, footnotes, table headers, chips */
      --text-sm:  13px;   /* labels, captions, small buttons */
      --text-md:  15px;   /* body, buttons */
      --text-lg:  17px;   /* card titles, emphasis */
      --text-xl:  22px;   /* section headings */
      --text-2xl: clamp(28px, 3.2vw, 34px);   /* verdicts, sheet titles */

      /* Space: 4 8 12 16 20 24 32 40 64. */
      --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
      --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-16: 64px;

      /* Shape */
      --radius-field:   8px;     /* inputs, selects */
      --radius-sm:      var(--radius-field);
      --radius-control: 12px;    /* small controls, menu items, icon buttons */
      --radius:         20px;    /* cards, lists, popovers */
      --radius-sheet:   28px;    /* sheets */
      --radius-pill:    999px;   /* chips, buttons */

      /* Depth */
      --shadow-card:  0 1px 2px rgba(37, 42, 54, 0.04), 0 10px 30px rgba(37, 42, 54, 0.06);
      --shadow-lift:  0 2px 4px rgba(37, 42, 54, 0.05), 0 16px 40px rgba(37, 42, 54, 0.11);
      --shadow-pop:   0 2px 6px rgba(22, 25, 34, 0.06), 0 24px 60px rgba(22, 25, 34, 0.22);
      --shadow-sheet: 0 30px 80px rgba(0, 0, 0, 0.28);

      /* Motion: one easing, four durations. */
      --ease:       cubic-bezier(0.2, 0, 0, 1);
      --dur:        160ms;   /* press, hover */
      --dur-reveal: 240ms;   /* sheets, toasts, reveals */
      --dur-fill:   400ms;   /* bars and meters filling */
      --dur-count:  800ms;   /* numbers counting up, charts drawing in */
    }

    /* Per-page accent. Applies to .page containers and to each nav link. */
    [data-accent="purple"] { --accent: var(--purple-600); --accent-mid: var(--purple-mid); --accent-tint: var(--purple-50); --accent-ink: var(--purple-800); --accent-fill: var(--purple-600); --accent-glow: var(--purple-glow); }
    [data-accent="teal"]   { --accent: var(--teal-600);   --accent-mid: var(--teal-mid);   --accent-tint: var(--teal-50);   --accent-ink: var(--teal-800);   --accent-fill: var(--teal-600);   --accent-glow: var(--teal-glow); }
    [data-accent="coral"]  { --accent: var(--coral-600);  --accent-mid: var(--coral-mid);  --accent-tint: var(--coral-50);  --accent-ink: var(--coral-800);  --accent-fill: var(--coral-600);  --accent-glow: var(--coral-glow); }
    [data-accent="pink"]   { --accent: var(--pink-600);   --accent-mid: var(--pink-mid);   --accent-tint: var(--pink-50);   --accent-ink: var(--pink-800);   --accent-fill: var(--pink-600);   --accent-glow: var(--pink-glow); }
    [data-accent="blue"]   { --accent: var(--blue-600);   --accent-mid: var(--blue-mid);   --accent-tint: var(--blue-50);   --accent-ink: var(--blue-800);   --accent-fill: var(--blue-600);   --accent-glow: var(--blue-glow); }
    [data-accent="green"]  { --accent: var(--green-600);  --accent-mid: var(--green-mid);  --accent-tint: var(--green-50);  --accent-ink: var(--green-800);  --accent-fill: var(--green-600);  --accent-glow: var(--green-glow); }
    [data-accent="amber"]  { --accent: var(--amber-600);  --accent-mid: var(--amber-mid);  --accent-tint: var(--amber-50);  --accent-ink: var(--amber-800);  --accent-fill: var(--amber-600);  --accent-glow: var(--amber-glow); }

    /* ---------------------------------------------------------------
       Dark scheme. Same ramps; text-use accents move to the mids, tints
       become translucent glows, the ground becomes deep Ink.
       --------------------------------------------------------------- */
    @media (prefers-color-scheme: dark) {
      :root {
        color-scheme: dark;

        --brand:            var(--purple-mid);
        --brand-deep:       #A3A8E0;
        --brand-tint:       var(--purple-glow);

        --accent:           var(--purple-mid);
        --accent-tint:      var(--purple-glow);
        --accent-ink:       var(--purple-50);

        --bg:               #161922;
        --bg-solid:         #161922;
        --blob-a:           rgba(96, 104, 178, 0.38);     /* Periwinkle */
        --blob-b:           rgba(122, 225, 191, 0.14);    /* Spring Mint */
        --blob-c:           rgba(57, 32, 124, 0.50);      /* Grape */
        --card:             rgba(255, 255, 255, 0.065);
        --card-strong:      rgba(34, 37, 46, 0.88);
        --card-solid:       #22252E;
        --card-sticky:      rgba(34, 37, 46, 0.40);
        --chip:             rgba(255, 255, 255, 0.07);
        --glass-border:     rgba(255, 255, 255, 0.14);
        --glass-edge:       rgba(0, 0, 0, 0.35);
        --glass-shadow:     0 12px 34px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.10);
        --glass-shadow-lift:0 18px 44px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12);
        --shadow-card:      var(--shadow-card);
        --shadow-lift:      0 2px 4px rgba(0, 0, 0, 0.35), 0 18px 44px rgba(0, 0, 0, 0.42);

        --line:             rgba(255, 255, 255, 0.10);
        --line-strong:      rgba(255, 255, 255, 0.22);

        --ink:              #F1F1EC;
        --ink-soft:         #D6D7DD;
        --muted:            #A6AAB6;
        --muted-ink:        #C3C6CF;

        --pos:              var(--green-mid);
        --neg:              var(--coral-mid);
        --pos-tint:         var(--green-glow);
        --neg-tint:         var(--coral-glow);
        --pos-ink:          var(--green-50);
        --neg-ink:          var(--coral-50);
        --warn-tint:        var(--amber-glow);
        --warn-ink:         var(--amber-50);

        --chart-purple:     var(--purple-mid);
        --chart-teal:       var(--teal-mid);
        --chart-coral:      var(--coral-mid);
        --chart-pink:       var(--pink-mid);
        --chart-blue:       var(--blue-mid);
        --chart-green:      var(--green-mid);
        --chart-amber:      var(--amber-mid);
        --chart-pos:        var(--green-mid);
        --chart-neg:        var(--coral-mid);
        --chart-anchor:     #A3A8E0;
        --chart-gray:       #7B7F8B;
        --chart-gray-soft:  #55596A;
        --chart-ink:        #A6AAB6;
        --chart-grid:       rgba(255, 255, 255, 0.08);
        --chart-fill-purple: rgba(127, 134, 207, 0.18);
        --chart-fill-teal:   rgba(95, 196, 174, 0.16);
        --chart-fill-blue:   rgba(91, 143, 203, 0.16);
        --chart-fill-pink:   rgba(169, 127, 207, 0.16);
        --chart-hist-1:     #8A90D6;
        --chart-hist-2:     #62C2AB;
        --chart-hist-3:     #E48E7A;
        --chart-hist-4:     #A98BCF;
        --chart-hist-5:     #8FB9A2;
        --chart-second-teal:   #3F9C86;
        --chart-second-purple: #6A72BE;
        --chart-second-green:  #6E9A82;
      }
      [data-accent="purple"] { --accent: var(--purple-mid); --accent-tint: var(--purple-glow); --accent-ink: var(--purple-50); }
      [data-accent="teal"]   { --accent: var(--teal-mid);   --accent-tint: var(--teal-glow);   --accent-ink: var(--teal-50); }
      [data-accent="coral"]  { --accent: var(--coral-mid);  --accent-tint: var(--coral-glow);  --accent-ink: var(--coral-50); }
      [data-accent="pink"]   { --accent: var(--pink-mid);   --accent-tint: var(--pink-glow);   --accent-ink: var(--pink-50); }
      [data-accent="blue"]   { --accent: var(--blue-mid);   --accent-tint: var(--blue-glow);   --accent-ink: var(--blue-50); }
      [data-accent="green"]  { --accent: var(--green-mid);  --accent-tint: var(--green-glow);  --accent-ink: var(--green-50); }
      [data-accent="amber"]  { --accent: var(--amber-mid);  --accent-tint: var(--amber-glow);  --accent-ink: var(--amber-50); }
    }

    /* ---------------------------------------------------------------
       Ground
       --------------------------------------------------------------- */
    * { box-sizing: border-box; }
    html { background: var(--bg-solid); }
    html, body { margin: 0; padding: 0; color: var(--ink); font-family: var(--font-body); }
    body {
      background: var(--bg);
      padding: 24px 24px 64px; max-width: 1280px; margin: 0 auto;
      /* z-index: 0 makes body a stacking context, so the z-index: -1 color
         field below paints above body's own background instead of under it. */
      position: relative; z-index: 0;
      -webkit-font-smoothing: antialiased;
    }
    /* The color field the glass refracts: three large soft blobs, fixed so
       they sit still while content scrolls under the frosted panes. */
    body::before {
      content: "";
      position: fixed; inset: 0; z-index: -1; pointer-events: none;
      background:
        radial-gradient(ellipse 42% 48% at 10% 6%,  var(--blob-a) 0%, transparent 72%),
        radial-gradient(ellipse 46% 52% at 92% 14%, var(--blob-b) 0%, transparent 72%),
        radial-gradient(ellipse 52% 46% at 50% 100%, var(--blob-c) 0%, transparent 74%);
    }

    /* Glass pane — every container shares this recipe. */
    .card, .chart-wrap, .section, .login-shell, .cr-doc {
      background: var(--card);
      border: 1px solid var(--glass-border);
      border-radius: var(--radius);
      box-shadow: var(--glass-shadow), 0 0 0 1px var(--glass-edge);
      -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
      backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
    }
    /* No backdrop-filter, or the reader asked for less transparency: fall
       back to solid panes so nothing reads through. */
    @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
      .card, .chart-wrap, .section, .login-shell, .cr-doc { background: var(--card-solid); }
    }
    @media (prefers-reduced-transparency: reduce) {
      .card, .chart-wrap, .section, .login-shell, .cr-doc { background: var(--card-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
      body::before { display: none; }
    }

    /* Flat accent line at the very top — Metro's single stripe of color. */
    .brand-bar {
      height: 3px;
      background: var(--brand-fill);
      margin: -24px -24px 24px;
    }

    /* ---------------------------------------------------------------
       Header
       --------------------------------------------------------------- */
    header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 20px; gap: 16px; flex-wrap: wrap; }

    h1 {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 52px;
      letter-spacing: 0.01em;
      margin: 0;
      line-height: 0.94;
      color: var(--ink);
    }
    .h1-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
    /* The wordmark is the one place letters are set in capitals. */
    .org-mark {
      font-family: var(--font-display);
      font-weight: 500;
      font-size: var(--text-xs);
      letter-spacing: 0.22em;
      color: var(--muted);
      text-transform: uppercase;
      margin-bottom: 8px;
    }
    .subtitle { color: var(--muted); font-size: var(--text-sm); margin-top: 8px; line-height: 1.5; }

    /* ---------------------------------------------------------------
       Buttons — five kinds, two sizes.
         secondary  plain <button>: hairline pill (most actions)
         primary    .primary: solid brand fill (the one main action)
         plain      .plain (.linkish): text only, reads as a link
         destructive .danger: coral outline (remove, end, disconnect)
         icon       .icon-btn, .explain-btn: a glyph, 44px to touch
       .small is for buttons inside rows and lists.
       --------------------------------------------------------------- */
    button {
      font: inherit; font-size: var(--text-md); cursor: pointer;
      border: 1px solid var(--line-strong); background: var(--chip);
      padding: 8px 16px; border-radius: var(--radius-pill); color: var(--ink);
      min-height: 40px;
      transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
    }
    button:hover { background: var(--accent-tint); border-color: var(--accent); color: var(--accent-ink); }
    button:active { transform: translateY(1px); }
    button:disabled { opacity: 0.55; cursor: default; transform: none; }
    button.primary {
      background: var(--brand-fill); color: var(--on-fill); border-color: transparent;
      font-weight: 600; padding: 8px 20px; font-size: var(--text-md);
      box-shadow: 0 6px 18px rgba(96, 104, 178, 0.28);
    }
    button.primary:hover { background: var(--brand-fill-hover); border-color: transparent; color: var(--on-fill); }
    /* Danger-ish actions (End / Delete / Remove). */
    button.danger { border-color: var(--neg); color: var(--neg); background: transparent; }
    button.danger:hover { background: var(--neg-tint); color: var(--neg-ink); border-color: var(--neg); }
    button.small, .row-actions button { font-size: var(--text-sm); min-height: 32px; padding: 4px 12px; }

    /* ---------------------------------------------------------------
       Login
       --------------------------------------------------------------- */
    .login-shell {
      max-width: 520px; margin: 64px auto; padding: 40px 40px;
      text-align: center;
    }
    .login-shell h1 { font-size: 48px; margin-bottom: 4px; }

    /* ---------------------------------------------------------------
       Grid + KPI tiles
       --------------------------------------------------------------- */
    .grid { display: grid; gap: 16px; }
    .kpis { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-bottom: 24px; }

    .card {
      padding: 20px 20px;
      transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
    }

    .kpi .label { font-size: var(--text-sm); font-weight: 600; line-height: 1.35; color: var(--muted-ink); }
    /* The number is the thin weight — big, light, tabular. */
    .kpi .value {
      font-family: var(--font-display); font-weight: 400;
      font-size: clamp(34px, 5vw, 54px); margin-top: 8px; line-height: 0.95; color: var(--ink);
      font-variant-numeric: tabular-nums;
      letter-spacing: 0.005em;
      animation: kpi-in var(--dur-reveal) var(--ease);
    }
    @keyframes kpi-in {
      from { opacity: 0; transform: translateY(4px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .kpi .value.pos { color: var(--pos); }
    .kpi .value.neg { color: var(--neg); }

    /* Full-width subhead between KPI groups. */
    .kpi-subhead {
      grid-column: 1 / -1; margin: 20px 0 0; font-size: var(--text-md); font-weight: 650; color: var(--ink-soft);
      padding-bottom: 8px; border-bottom: var(--hair);
    }
    .kpi .delta { font-size: var(--text-xs); margin-top: 12px; font-variant-numeric: tabular-nums; }
    /* Signed changes read as chips: up is good, down is worth a look. */
    .delta.pos, .delta.neg, .delta.warn {
      display: inline-block; padding: 3px 12px; border-radius: var(--radius-pill);
      font-weight: 650; line-height: 1.4;
    }
    .delta.pos { background: var(--pos-tint); color: var(--pos-ink); }
    .delta.neg { background: var(--warn-tint); color: var(--warn-ink); }
    .delta.warn { background: var(--warn-tint); color: var(--warn-ink); }
    .delta.zero { color: var(--muted-ink); }
    .delta .explain-btn { color: inherit; width: 16px; height: 16px; margin: -2px -2px -2px 2px; }
    .delta .explain-btn svg { width: 13px; height: 13px; }
    /* A pill inside a table cell must not break table layout. */
    td .delta.pos, td .delta.neg { font-size: var(--text-xs); }

    /* ---------------------------------------------------------------
       Chart + section panes
       --------------------------------------------------------------- */
    .chart-wrap { padding: 20px 24px; margin-bottom: 24px; }
    /* Chart.js container sizing (per Chart.js docs): a relatively-positioned
       box with a fixed height. Sizing the canvas itself with !important set
       up a resize-observer feedback loop that froze the renderer. */
    .chart-box { position: relative; height: 280px; }
    .chart-box--short { height: 220px; }
    .chart-box--tall { height: 320px; }
    .defs { margin: 0; }
    .defs dt { font-weight: 600; color: var(--ink); margin-top: 12px; }
    .defs dd { margin: 2px 0 0; color: var(--ink-soft); font-size: var(--text-sm); line-height: 1.5; }
    canvas { max-width: 100%; }

    .muted { color: var(--muted-ink); }

    .two-col { grid-template-columns: 1fr 1fr; }
    @media (max-width: 720px) { .two-col { grid-template-columns: 1fr; } }

    .section { padding: 20px 24px; margin-bottom: 16px; }

    /* Headings: sentence case in the system font. An h2 inside a card titles
       the card; an h2 in a band heading titles a section of the page. */
    h2 { font-size: var(--text-lg); font-weight: 700; line-height: 1.3; margin: 0 0 16px; color: var(--ink); }
    h3 { color: var(--ink-soft); }

    /* ---------------------------------------------------------------
       Tables — hairline rows, no zebra.
       --------------------------------------------------------------- */
    table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
    th, td { text-align: left; padding: 12px 8px; border-bottom: var(--hair); }
    th {
      color: var(--muted); font-weight: 600; font-size: var(--text-xs);
      border-bottom: 1px solid var(--line-strong);
    }
    td { color: var(--ink-soft); }
    tr:last-child td { border-bottom: none; }
    td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
    .empty { color: var(--muted); font-size: var(--text-sm); font-style: italic; padding: 8px 0; }

    /* Wide tables scroll horizontally inside their pane instead of overflowing
       the page. The first column (Week) stays pinned while scrolling. */
    .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    table.compact { font-size: var(--text-xs); }
    table.compact th, table.compact td { padding: 8px 12px; }
    table.compact td.num, table.compact th.num { white-space: nowrap; }
    table.compact th:first-child, table.compact td:first-child {
      position: sticky; left: 0; background: var(--card-sticky); z-index: 2; white-space: nowrap;
      -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    }

    .card-subhead { font-size: var(--text-md); font-weight: 700; color: var(--ink); margin: 20px 0 8px; }
    .subhead { font-size: var(--text-sm); font-weight: 650; color: var(--muted-ink); margin: 20px 0 12px; }
    .stale-warn { font-size: var(--text-xs); color: var(--neg); margin-top: 4px; }

    /* ---------------------------------------------------------------
       The ⓘ: the one way to explain a number. A quiet circle-i after the
       label; tap opens the explanation sheet. 24px drawn, 44px to touch.
       --------------------------------------------------------------- */
    .explain-btn {
      position: relative; display: inline-grid; place-items: center; vertical-align: middle;
      width: 24px; height: 24px; min-height: 0; margin: -4px 0 -4px 2px; padding: 0;
      border: 0; border-radius: var(--radius-pill); background: transparent; box-shadow: none;
      color: var(--muted); cursor: pointer; flex: none;
    }
    .explain-btn::before { content: ""; position: absolute; inset: -10px; }
    .explain-btn svg { display: block; }
    .explain-btn:hover, .explain-btn:focus-visible { color: var(--accent); background: var(--accent-tint); border-color: transparent; }
    .explain-btn:active { transform: none; }
    .explain-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
    .explain-btn--warn { color: var(--warn-ink); }
    .label .explain-btn, th .explain-btn { width: 20px; height: 20px; margin: -3px 0 -3px 2px; }
    .label .explain-btn svg { width: 16px; height: 16px; }

    .controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
    .inline-label { font-size: var(--text-sm); font-weight: 500; color: var(--muted); }

    /* ---------------------------------------------------------------
       Band headings — heading + controls above one hairline rule.
       --------------------------------------------------------------- */
    .band-heading {
      display: flex; align-items: flex-end; justify-content: space-between;
      margin: 40px 0 16px; padding-bottom: 12px;
      gap: 12px; flex-wrap: wrap;
      border-bottom: var(--hair);
    }
    .band-heading h2 { margin: 0; font-size: var(--text-xl); line-height: 1.2; letter-spacing: -0.01em; }
    .band-heading:first-of-type { margin-top: 0; }

    /* ---------------------------------------------------------------
       Progress + form controls
       --------------------------------------------------------------- */
    .progress {
      height: 4px; background: var(--line); border-radius: var(--radius-pill); overflow: hidden;
      margin-top: 12px;
    }
    .progress > .fill {
      height: 100%; background: var(--accent); border-radius: var(--radius-pill);
      transition: width var(--dur-fill) var(--ease);
    }
    .progress > .fill.over { background: var(--pos); }
    .progress > .fill.under { background: var(--accent); }
    .toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 560px; margin: -4px 0 20px; cursor: pointer; }
    .toggle-row[hidden] { display: none; }
    .toggle-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .toggle-title { font-size: var(--text-md); font-weight: 600; color: var(--ink); }
    .toggle-sub { font-size: var(--text-sm); line-height: 1.4; color: var(--muted); }
    input.switch {
      appearance: none; -webkit-appearance: none; flex: 0 0 auto; position: relative; cursor: pointer;
      width: 48px; height: 30px; padding: 0; margin: 0; border: 0; border-radius: var(--radius-pill);
      background: var(--line-strong); transition: background var(--dur) var(--ease);
    }
    input.switch::after {
      content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%;
      background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: transform var(--dur) var(--ease);
    }
    input.switch:checked { background: var(--accent-fill); }
    input.switch:checked::after { transform: translateX(18px); }
    input.switch:focus { border-color: transparent; }
    input.switch:disabled { opacity: 0.45; cursor: default; }
    .toggle-row.is-disabled { cursor: default; }
    .forecast-toggle { margin: 0 0 16px; }
    .kpi.wide { grid-column: span 2; }
    @media (max-width: 720px) { .kpi.wide { grid-column: span 1; } }

    select, input, textarea {
      font: inherit; padding: 8px 12px; border: 1px solid var(--line-strong);
      border-radius: var(--radius-sm); background: var(--chip); color: var(--ink);
    }
    /* Fields stand as tall as the buttons beside them. */
    select, input[type="text"], input[type="date"], input[type="number"], input[type="email"],
    input[type="password"], input[type="search"], input:not([type]) { min-height: 40px; box-sizing: border-box; }
    select {
      padding-right: 32px;
      appearance: none; -webkit-appearance: none;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%236A6F7C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
      background-repeat: no-repeat; background-position: right 10px center;
    }
    select:focus, input:focus, textarea:focus, button:focus-visible, a:focus-visible {
      outline: 2px solid var(--brand); outline-offset: 2px; border-color: var(--brand);
    }
    button:focus:not(:focus-visible) { outline: none; }

    /* The old two-row nav stays in the DOM, hidden, as the page-permission
       registry the drawer is built from. */
    .nav-shell { display: none; }

    /* Pages — only the active one displays */
    .page { display: none; }
    .page.active { display: block; }

    /* Inline loading spinner used while AI is generating a draft, etc. */
    .spinner {
      display: inline-block;
      width: 12px; height: 12px;
      border: 1.5px solid var(--line-strong);
      border-top-color: var(--brand);
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
      vertical-align: middle;
      margin-right: 8px;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* Collapsible details (e.g. Email Draft) */
    details > summary {
      cursor: pointer;
      list-style: none;
      display: flex; align-items: center; justify-content: space-between;
      padding: 8px 0;
      font-size: var(--text-md); font-weight: 600; color: var(--ink-soft);
    }
    details > summary::-webkit-details-marker { display: none; }
    details > summary::after {
      content: "›"; color: var(--muted); font-size: var(--text-lg); line-height: 1;
      transition: transform var(--dur) var(--ease);
    }
    details[open] > summary::after { transform: rotate(90deg); }

    /* ---------------------------------------------------------------
       Forms inside sheets (external gifts, imports, uploads, annotations).
       The sheet is the <dialog>; .form-card only lays out its fields.
       --------------------------------------------------------------- */
    .form-card form { display: flex; flex-direction: column; gap: 12px; }
    .form-card label { display: flex; flex-direction: column; gap: 4px; font-size: var(--text-sm); color: var(--ink-soft); }
    .form-card input, .form-card select, .form-card textarea {
      width: 100%; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
      background: var(--chip); color: var(--ink); font: inherit;
    }
    .form-card textarea { resize: vertical; }
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    @media (max-width: 480px) { .form-row { grid-template-columns: 1fr; } }
    .form-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }
    .form-actions > .plain:first-child { margin-right: auto; }
    .form-status { font-size: var(--text-xs); color: var(--muted); min-height: 16px; }

    .ended-row td, .care-row.ended-row .care-name, .care-row.ended-row .care-line { color: var(--muted); }
    .row-actions { display: flex; gap: 8px; justify-content: flex-end; }

    /* ---------------------------------------------------------------
       The chip: one shape, four tones (see chip() in core/components.js).
       good = going the right way · watch = worth a look · alert = act on
       it · neutral = a plain fact. Coral is only ever "act on it".
       --------------------------------------------------------------- */
    .chip {
      display: inline-block; padding: 3px 12px; border-radius: var(--radius-pill);
      font-size: var(--text-xs); font-weight: 650; line-height: 1.4; white-space: nowrap; vertical-align: middle;
    }
    .chip--good { background: var(--pos-tint); color: var(--pos-ink); }
    .chip--watch { background: var(--warn-tint); color: var(--warn-ink); }
    .chip--alert { background: var(--neg-tint); color: var(--neg-ink); }
    .chip--neutral { background: var(--line); color: var(--ink-soft); }
    /* In a card's title row the chip sits at the right. */
    .fact-top .chip, .answer-top .chip { margin-left: auto; }

    /* Anomaly feed rows ("This week" band on Operating). */
    .anomaly-row {
      display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
      padding: 12px 0; border-bottom: var(--hair); font-size: var(--text-sm);
    }
    .anomaly-row:last-child { border-bottom: none; }
    .anomaly-row .msg { color: var(--ink-soft); flex: 1; min-width: 200px; }
    .anomaly-row a, .anomaly-row .plain { color: var(--brand); white-space: nowrap; }
    .anomaly-row .plain { font-size: inherit; text-decoration: underline; }
    /* Retention heatmap cells — backgrounds/colors are inline (computed
       per-cell), this just handles shape and alignment. */
    table.heatmap td.hm, table.heatmap th.hm {
      text-align: center; font-variant-numeric: tabular-nums;
      min-width: 46px; white-space: nowrap;
    }
    table.heatmap td.hm { border-radius: 4px; }

    /* Links inside engagement rows (person names) read as links. */
    .eng-row a, .eng-row a:visited { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }
    a { color: var(--brand); }

    /* Clickable KPI tiles (participation) get a visible affordance. */
    .kpi--clickable { cursor: pointer; }
    .kpi--clickable:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-lift); }
    .kpi--clickable .label::after { content: " ›"; color: var(--brand); font-size: var(--text-sm); }


    /* ================================================================
       Progressive disclosure layer (Oct 2026). Summary home, page titles,
       verdict + facts, disclosure rows, account menu, Options popover,
       explanation sheet. Same Glass-over-Paper tokens as everything above.
       Labels move to the system font in sentence case: easier to read
       than 11px letter-spaced capitals, and they carry the plain names.
       ================================================================ */
    .pco-name { display: block; font-size: var(--text-xs); font-weight: 400; color: var(--muted); margin-top: 2px; }

    header.app-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: nowrap; }
    .app-header .org-mark { margin: 0; font-size: var(--text-md); letter-spacing: 0.12em; color: var(--ink-soft); white-space: nowrap; }
    .header-right { display: flex; align-items: center; gap: 12px; position: relative; min-width: 0; }
    .header-right .subtitle { margin: 0; text-align: right; }
    .avatar-btn {
      width: 40px; height: 40px; min-height: 40px; padding: 0; flex: 0 0 40px;
      border-radius: var(--radius-pill); border: 0; background: var(--brand-tint); color: var(--brand-deep);
      font-weight: 650; font-size: var(--text-md); letter-spacing: 0.02em;
    }
    .avatar-btn:hover { background: var(--brand-fill); color: var(--on-fill); border-color: transparent; }
    @media (prefers-color-scheme: dark) { .avatar-btn { color: var(--purple-50); } }

    .popover {
      position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; min-width: 250px; padding: 8px;
      border-radius: var(--radius); background: var(--card-strong); border: 1px solid var(--glass-border);
      box-shadow: var(--shadow-pop);
      -webkit-backdrop-filter: blur(30px) saturate(1.6); backdrop-filter: blur(30px) saturate(1.6);
    }
    .popover[hidden] { display: none; }
    .menu-who { padding: 8px 12px 12px; font-size: var(--text-sm); color: var(--muted); border-bottom: var(--hair); margin-bottom: 8px; overflow-wrap: anywhere; }
    .menu-who strong { display: block; color: var(--ink); font-size: var(--text-md); }
    .menu-item {
      display: flex; width: 100%; align-items: center; gap: 12px; text-align: left; border: 0;
      background: transparent; border-radius: var(--radius-control); padding: 12px 12px; min-height: 44px;
      font-size: var(--text-md); color: var(--ink); text-decoration: none; box-sizing: border-box;
    }
    .menu-item:hover { background: var(--accent-tint); color: var(--accent-ink); border-color: transparent; }
    .menu-sep { height: 1px; background: var(--line); margin: 8px 4px; }
    .pop-field { display: flex; flex-direction: column; gap: 8px; padding: 8px 12px 12px; font-size: var(--text-sm); font-weight: 600; color: var(--muted-ink); }
    .pop-field select { width: 100%; font-weight: 400; }
    .pop-hint { font-weight: 400; font-size: var(--text-xs); line-height: 1.45; color: var(--muted); }

    .page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 8px 0 20px; position: relative; }
    .page-date { font-size: var(--text-md); font-weight: 600; color: var(--muted); }
    .page-title {
      font-family: var(--font-display); font-weight: 700; font-size: 64px; line-height: 0.95;
      margin: 0; color: var(--ink); text-transform: none; letter-spacing: 0.01em;
    }
    .page-head .popover { width: 330px; max-width: calc(100vw - 32px); }
    /* The first heading on every other page reads as that page's title. */
    .page > .band-heading:first-child h2,
    .page > div:first-child > .band-heading:first-child h2 {
      font-family: var(--font-display); font-weight: 700;
      font-size: clamp(40px, 6vw, 64px); line-height: 0.95; letter-spacing: 0.01em;
    }
    .pco-name { margin-top: 1px; }

    .verdict {
      font-size: clamp(24px, 3.2vw, 34px); line-height: 1.2; font-weight: 650; letter-spacing: -0.015em;
      margin: 0; max-width: 30ch; color: var(--ink);
    }
    .verdict-sub { font-size: var(--text-lg); line-height: 1.5; color: var(--ink-soft); margin: 12px 0 0; max-width: 62ch; }
    .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 24px 0 20px; }
    .facts--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    /* A fact that picks what the chart below shows: the whole card is one
       toggle (a button laid over it); the ⓘ sits above that button. The
       picked card carries the page's accent ring. */
    .fact--selectable { position: relative; cursor: pointer; }
    .fact--selectable .fact-top, .fact--selectable .value, .fact--selectable .fact-line, .fact--selectable .fact-sub, .fact--selectable .fact-foot { pointer-events: none; }
    .fact--selectable .explain-btn { pointer-events: auto; z-index: 1; }
    .fact-select {
      position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; min-height: 0;
      margin: 0; padding: 0; border: 0; border-radius: inherit; background: transparent; box-shadow: none;
    }
    .fact-select:hover { background: transparent; border-color: transparent; }
    .fact-select:active { transform: none; }
    .fact-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
    .fact--selectable:hover { border-color: var(--accent); }
    .fact--selectable.is-selected { border-color: var(--accent); box-shadow: var(--glass-shadow), 0 0 0 1px var(--accent); }
    @media (max-width: 1100px) { .facts--four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    .fact { padding: 20px 24px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
    .fact-top { display: flex; align-items: center; gap: 8px; }
    .fact-title { font-size: var(--text-md); font-weight: 600; color: var(--ink-soft); }
    .fact .value {
      font-family: var(--font-display); font-weight: 400; font-size: clamp(44px, 5vw, 60px); line-height: 0.95;
      margin-top: 8px; font-variant-numeric: tabular-nums; color: var(--ink);
    }
    .fact-line { font-size: var(--text-md); color: var(--ink-soft); }
    .fact-sub { font-size: var(--text-md); color: var(--muted); }
    .fact-foot { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 12px; flex-wrap: wrap; }
    .fact-top .explain-btn { margin-left: -2px; }
    .fact .progress { margin-top: 8px; }
    .plain, .linkish { border: 0; background: transparent; padding: 0; min-height: 0; color: var(--brand); font-size: var(--text-md); font-weight: 500; border-radius: 4px; }
    .plain:hover, .linkish:hover { background: transparent; color: var(--brand-deep); text-decoration: underline; border-color: transparent; }
    .src-tag { font-size: var(--text-xs); color: var(--muted); }
    .chart-title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
    .chart-title-row > select, .chart-title-row .controls select { max-width: 100%; min-width: 0; }
    .chart-title { margin: 0; font-family: var(--font-body); font-size: var(--text-lg); font-weight: 700; color: var(--ink); text-transform: none; letter-spacing: 0; }

    .list-heading {
      font-family: var(--font-body); font-size: var(--text-xl); font-weight: 700; letter-spacing: -0.01em;
      text-transform: none; margin: 40px 0 12px 4px; color: var(--ink);
    }
    .disclosure-list, .disclosure.solo, .row-list {
      background: var(--card); border: 1px solid var(--glass-border); border-radius: var(--radius); overflow: hidden;
      box-shadow: var(--glass-shadow), 0 0 0 1px var(--glass-edge);
      -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.6); backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
    }
    .disclosure + .disclosure:not([hidden]) { border-top: var(--hair); }
    .disclosure > summary {
      display: flex; align-items: center; gap: 16px; padding: 16px 20px; min-height: 60px; box-sizing: border-box;
      font-family: var(--font-body); font-size: var(--text-lg); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink);
    }
    .disclosure > summary:hover { background: var(--accent-tint); }
    .disclosure > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
    .dd-title { flex: 1 1 auto; }
    .dd-value { font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
    .disclosure.solo .dd-value { white-space: normal; }

    /* Drifting regulars */
    .care-list .care-row { display: flex; align-items: flex-start; gap: 16px; padding: 16px 20px; }
    .care-list .care-row + .care-row { border-top: var(--hair); }
    .care-main { flex: 1 1 auto; min-width: 0; }
    .care-name { font-weight: 650; font-size: var(--text-lg); color: var(--ink); text-decoration: none; }
    .care-name:hover { text-decoration: underline; }
    .care-line { font-size: var(--text-md); color: var(--ink-soft); margin-top: 2px; }
    .care-line.muted { color: var(--muted); }
    .care-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: 0 0 auto; }
    .care-nocard { font-size: var(--text-xs); color: var(--muted); white-space: nowrap; }
    .list-heading .count { font-weight: 500; color: var(--muted); margin-left: 8px; }
    @media (max-width: 560px) { .care-list .care-row { flex-direction: column; gap: 8px; } .care-side { align-items: flex-start; flex-direction: row; flex-wrap: wrap; } }
    .disclosure > summary::after { content: "›"; font-size: var(--text-xl); color: var(--muted); }
    .dd-body { padding: 4px 20px 20px; }
    .dd-body .care-list .care-row { padding: 12px 0; }
    .dd-body > div > p.subtitle:first-child { margin-top: 0; }
    .dd-body .band-heading { margin: 0 0 12px; padding: 0; border: 0; justify-content: flex-end; }
    .dd-body .band-heading h2 { display: none; }
    .dd-body .chart-wrap, .dd-body .section {
      box-shadow: none; background: transparent; border: 0; padding: 0; margin-bottom: 16px;
      -webkit-backdrop-filter: none; backdrop-filter: none;
    }
    .dd-body .kpis { margin-bottom: 16px; }
    .disclosure.solo { margin: 20px 0 24px; }

    .attention { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-radius: var(--radius); margin-bottom: 20px; font-size: var(--text-md); }
    .attention[hidden] { display: none; }
    .attention svg { flex: 0 0 auto; }
    .attention.quiet { background: var(--pos-tint); color: var(--pos-ink); font-weight: 600; }
    .attention.quiet .attention-sub { font-weight: 400; opacity: 0.85; }
    .attention.busy { display: block; padding: 4px 20px; background: var(--card); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow), 0 0 0 1px var(--glass-edge); }
    .summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
    .summary-grid .span2 { grid-column: span 2; }
    .answer { display: flex; flex-direction: column; padding: 24px 24px 20px; text-decoration: none; color: inherit; min-width: 0; }
    a.answer:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); color: inherit; }
    a.answer:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
    .answer-top { display: flex; align-items: center; gap: 12px; }
    .answer-dot { width: 10px; height: 10px; border-radius: var(--radius-pill); background: var(--accent); flex: 0 0 10px; }
    .answer-name { font-size: var(--text-md); font-weight: 650; color: var(--accent-ink); }
    .answer .chev { margin-left: 4px; }
    .answer-top .chip + .chev { margin-left: 4px; }
    .answer-top .answer-name + .chev { margin-left: auto; }
    .answer-value {
      font-family: var(--font-display); font-weight: 400; font-size: clamp(56px, 7vw, 88px); line-height: 0.9;
      margin-top: 12px; font-variant-numeric: tabular-nums; color: var(--ink);
    }
    .answer-caption { font-size: var(--text-md); color: var(--muted); margin-top: 4px; }
    .answer-text { font-size: var(--text-lg); line-height: 1.45; color: var(--ink-soft); margin: 12px 0 16px; }
    .answer-text .plain { font-size: inherit; }
    .answer-body { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
    .answer-split { display: flex; gap: 32px; align-items: flex-end; flex-wrap: wrap; flex: 0 1 auto; }
    .answer-split > div { flex: 1 1 280px; min-width: 0; }
    .answer-split .answer-text { margin-bottom: 0; max-width: 36ch; }
    .minibars { margin-top: auto; display: flex; align-items: flex-end; gap: 4px; height: 70px; }
    .minibars span { flex: 1 1 0; height: 100%; position: relative; }
    .minibars b { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 3px 3px 1px 1px; background: var(--accent-mid); opacity: 0.45; }
    .minibars span.hit b { opacity: 1; background: var(--accent); }
    .minibars i { position: absolute; left: -2px; right: -2px; height: 2px; background: var(--ink); border-radius: 2px; }
    .minibar-axis { display: flex; justify-content: space-between; font-size: var(--text-xs); color: var(--muted); margin-top: 8px; }
    .minibar-key { display: flex; gap: 16px; flex-wrap: wrap; font-size: var(--text-xs); color: var(--muted); margin-top: 8px; }
    .minibar-key span { display: inline-flex; align-items: center; gap: 8px; }
    .minibar-key em { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--accent); }
    .minibar-key em.miss { background: var(--accent-mid); opacity: 0.45; }
    .minibar-key em.goal { width: 12px; height: 2px; background: var(--ink); }
    .meter { margin-top: auto; height: 12px; border-radius: var(--radius-pill); background: var(--accent-tint); overflow: hidden; }
    .meter > span { display: block; height: 100%; background: var(--accent); border-radius: var(--radius-pill); }
    .row-lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
    .row-group-label { font-size: var(--text-sm); font-weight: 600; color: var(--muted); margin: 0 0 8px 20px; }
    .row-link { display: flex; align-items: center; gap: 16px; padding: 16px 20px; min-height: 64px; box-sizing: border-box; text-decoration: none; color: var(--ink); }
    .row-link + .row-link { border-top: var(--hair); }
    .row-link:hover { background: var(--accent-tint); color: var(--ink); }
    .rl-title { font-size: var(--text-lg); font-weight: 600; }
    .rl-sub { font-size: var(--text-md); color: var(--muted); margin-top: 2px; }
    .chev { color: var(--muted); font-size: var(--text-xl); line-height: 1; margin-left: auto; }
    .summary-foot { text-align: center; margin-top: 32px; font-size: var(--text-xs); }

    .part-hero { padding: 24px 24px; margin-bottom: 20px; }
    .part-hero-top { display: flex; gap: 24px; align-items: flex-end; flex-wrap: wrap; }
    .part-hero-top > div { flex: 0 0 auto; }
    .part-hero-text { flex: 1 1 280px; margin: 0; font-size: var(--text-lg); line-height: 1.5; color: var(--ink-soft); max-width: 52ch; }
    .comp-bar { display: flex; height: 44px; gap: 3px; border-radius: var(--radius-control); overflow: hidden; margin-top: 20px; }
    .comp-legend { display: flex; gap: 3px; margin-top: 12px; flex-wrap: wrap; }
    .comp-legend div { min-width: 110px; }
    .comp-legend b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 44px; line-height: 1; color: var(--ink); }
    .comp-legend span { font-size: var(--text-md); color: var(--ink-soft); }
    .part-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 8px; }

    dialog.sheet {
      border: 0; border-radius: var(--radius-sheet); padding: 32px 32px 24px; width: calc(100% - 32px); max-width: 540px;
      background: var(--card-strong); color: var(--ink); box-shadow: var(--shadow-sheet);
      -webkit-backdrop-filter: blur(30px) saturate(1.6); backdrop-filter: blur(30px) saturate(1.6);
    }
    dialog.sheet::backdrop { background: rgba(22, 25, 34, 0.42); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
    .sheet-kicker { font-size: var(--text-md); font-weight: 600; color: var(--accent); }
    dialog.sheet h2 { font-family: var(--font-body); text-transform: none; letter-spacing: -0.01em; font-size: var(--text-2xl); line-height: 1.2; color: var(--ink); margin: 8px 0 0; }
    dialog.sheet h3 { font-family: var(--font-body); font-size: var(--text-md); font-weight: 700; margin: 20px 0 4px; color: var(--ink); text-transform: none; letter-spacing: 0; }
    dialog.sheet:not(.form-sheet) p { margin: 0; font-size: var(--text-lg); line-height: 1.55; color: var(--ink-soft); white-space: pre-line; }
    #confirm-sheet p { margin-top: 12px; }
    #confirm-sheet .form-actions { margin-top: 24px; }
    dialog.form-sheet { max-width: 560px; max-height: calc(100vh - 32px); }
    dialog.form-sheet h2 { margin: 0 0 16px; }
    dialog.wide-sheet { max-width: 820px; }
    .show-all { margin-top: 12px; font-size: var(--text-sm); }
    .page-actions { display: flex; align-items: center; gap: 8px; }
    /* Small numbers inside a detail row: no cards of their own. */
    .mini-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px 24px; margin: 4px 0 20px; }
    .mini-stats:empty { display: none; }
    .mini-stat .label { font-size: var(--text-sm); font-weight: 600; color: var(--muted-ink); }
    .mini-stat .value { font-family: var(--font-display); font-size: 40px; line-height: 1; margin-top: 4px; color: var(--ink); font-variant-numeric: tabular-nums; }
    .mini-stat .delta { font-size: var(--text-xs); margin-top: 6px; }

    /* Notes under charts and pages; a sentence at the top of a row's body. */
    .chart-note { margin-top: 8px; font-size: var(--text-xs); }
    .footnote { font-size: var(--text-xs); margin: 16px 0 0; }
    .footnote + .footnote { margin-top: 4px; }
    .footnote:empty { display: none; }
    .footnote .plain { font-size: inherit; }
    .body-note { font-size: var(--text-sm); margin: 0 0 16px; }

    /* Monthly statements (Cash & statements) and Monthly close: one row per
       month; the figures line up in columns. */
    .stmt-head, .stmt-month > summary {
      display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)) 16px;
      align-items: center; gap: 12px;
    }
    .stmt-head { padding: 0 0 8px; font-size: var(--text-xs); font-weight: 600; color: var(--muted); border-bottom: var(--hair); }
    .stmt-head span:not(:first-child) { text-align: right; }
    .stmt-month > summary { padding: 12px 0; font-size: var(--text-md); font-weight: 500; color: var(--ink); }
    .stmt-month + .stmt-month:not([hidden]) { border-top: var(--hair); }
    .stmt-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 600; }
    .stmt-fig { text-align: right; font-variant-numeric: tabular-nums; }
    .stmt-fig .k { display: none; }
    .stmt-body { padding: 0 0 16px; font-size: var(--text-sm); color: var(--ink-soft); }
    .stmt-body p { margin: 0 0 10px; line-height: 1.5; }
    .stmt-body table { margin-top: 4px; }
    .stmt-body .more-list { margin-bottom: 8px; }
    .close-month > summary { justify-content: flex-start; gap: 10px; padding: 12px 0; color: var(--ink); }
    .close-month > summary::after { margin-left: auto; }
    .close-month + .close-month:not([hidden]) { border-top: var(--hair); }
    .close-files { font-size: var(--text-xs); font-weight: 500; color: var(--muted); }
    .close-body { padding: 0 0 16px; }
    .close-body textarea { width: 100%; min-height: 220px; padding: 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-field); font: inherit; font-size: var(--text-sm); line-height: 1.5; resize: vertical; box-sizing: border-box; }
    .close-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0; }
    .close-row .form-status { flex: 1 1 100%; }
    .close-remove { font-size: var(--text-xs); color: var(--muted); }
    .close-remove .plain { font-size: var(--text-xs); }
    .close-json pre { margin-top: 8px; padding: 12px; background: var(--bg); border: var(--hair); border-radius: var(--radius-field); font-size: var(--text-xs); overflow-x: auto; max-height: 400px; }
    .close-json > summary { font-size: var(--text-xs); font-weight: 500; color: var(--muted); justify-content: flex-start; gap: 6px; }
    .close-qbo { margin: 20px 0 4px; }
    /* Data updates: one row per source. */
    .update-list { margin-top: 16px; }
    .update-row { display: flex; align-items: center; gap: 16px; padding: 12px 0; }
    .update-row + .update-row { border-top: var(--hair); }
    .update-main { flex: 1 1 auto; min-width: 0; }
    .update-name { font-weight: 600; color: var(--ink); }
    .update-name a { color: inherit; text-decoration: none; }
    .update-name a:hover { text-decoration: underline; }
    .update-line { font-size: var(--text-xs); color: var(--muted); margin-top: 2px; line-height: 1.45; }
    .update-line--alert { color: var(--neg-ink); }
    .update-name .chip { margin-left: 8px; vertical-align: 1px; }
    .update-row > button { flex: none; }
    /* Controls at the top of a row's body (sort), and the load list. */
    .row-controls { margin: 0 0 4px; }
    .measures td:first-child { min-width: 200px; }
    .measures .measure-pick { font-size: inherit; font-weight: 600; text-align: left; }
    .measures .pco-name { display: block; }
    .comp-note { margin-top: 16px; }
    .load-num { font-family: var(--font-display); font-size: var(--text-xl); line-height: 1; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
    .care-actions { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; }
    .care-actions .plain { font-size: var(--text-xs); }
    .close-qbo-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    dialog.sheet .close-qbo-head h3 { margin: 0; line-height: 1.3; }
    .close-qbo .subtitle { margin: 6px 0 10px; font-size: var(--text-xs); }
    @media (max-width: 600px) {
      .stmt-head { display: none; }
      .stmt-month > summary { grid-template-columns: repeat(3, minmax(0, 1fr)) 16px; row-gap: 6px; }
      .stmt-name { grid-column: 1 / span 3; }
      .stmt-month > summary::after { grid-column: 4; grid-row: 1 / span 2; }
      .stmt-fig { text-align: left; }
      .stmt-fig .k { display: block; font-size: var(--text-xs); color: var(--muted); font-weight: 500; }
      .close-month > summary { flex-wrap: wrap; row-gap: 4px; }
      .close-month > summary::after { order: 2; }
      .close-files { order: 3; flex-basis: 100%; }
    }
    .notes-cell { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-soft); }
    [hidden] { display: none !important; }
    dialog.form-sheet > p { margin: 0; font-size: var(--text-md); line-height: 1.5; color: var(--ink-soft); }
    /* The campaign report inside its row: no card of its own; its title
       prints but doesn't repeat the row's on screen. */
    .dd-body .cr-doc { background: none; border: 0; padding: 0; box-shadow: none; }
    .dd-body .cr-doc > h2 { display: none; }
    @media print { .dd-body .cr-doc > h2 { display: block; } }

    /* ---------------------------------------------------------------
       Toasts: news that fades on its own (see core/feedback.js). Ink on
       paper, inverted in dark mode; an alert stays longer, in coral.
       --------------------------------------------------------------- */
    .toasts {
      position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); transform: translateX(-50%);
      z-index: 200; width: min(560px, calc(100% - 32px));
      display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none;
    }
    .toast {
      pointer-events: auto; display: flex; align-items: center; gap: 12px;
      padding: 12px 20px; border-radius: var(--radius); max-width: 100%;
      background: var(--ink); color: var(--bg-solid); font-size: var(--text-md); line-height: 1.4;
      box-shadow: var(--shadow-pop);
      opacity: 0; transform: translateY(12px) scale(0.98);
      transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease);
    }
    .toast.in { opacity: 1; transform: none; }
    .toast--good::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--green-mid); }
    .toast--alert { background: var(--neg-tint); color: var(--neg-ink); box-shadow: 0 0 0 1px var(--neg), var(--shadow-pop); }
    .toast-close {
      flex: none; width: 32px; height: 32px; min-height: 32px; padding: 0; margin: -6px -10px -6px auto;
      border: 0; background: transparent; color: inherit; font-size: var(--text-xl); line-height: 1;
    }
    .toast-close:hover { background: rgba(0, 0, 0, 0.06); color: inherit; border-color: transparent; }
    @media (prefers-reduced-motion: reduce) { .toast { transform: none; transition: opacity 120ms linear; } }
    dialog.sheet .explain-link { display: inline-block; margin-top: 8px; font-size: var(--text-md); font-weight: 600; color: var(--accent); text-decoration: none; }
    dialog.sheet .explain-link:hover { text-decoration: underline; }
    dialog.sheet .explain-link::after { content: " ↗"; }
    dialog.sheet .explain-link[hidden] { display: none; }
    .methods-intro { margin-top: 12px !important; }
    .method-list { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
    .method-row {
      display: block; width: 100%; text-align: left; padding: 16px 16px; min-height: 0;
      border: 1px solid var(--line); border-radius: var(--radius); background: transparent; color: var(--ink);
    }
    .method-row:hover { background: var(--chip); border-color: var(--line-strong); color: var(--ink); }
    .method-row[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-tint); }
    .method-head { display: flex; align-items: baseline; gap: 12px; }
    .method-name { font-size: var(--text-lg); font-weight: 650; }
    .method-row[aria-pressed="true"] .method-name::after { content: "\00a0\2713"; color: var(--brand); }
    .method-net { margin-left: auto; font-size: var(--text-lg); font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
    .method-net.pos { color: var(--pos); }
    .method-net.neg { color: var(--neg); }
    .method-how, .method-note { display: block; font-size: var(--text-md); line-height: 1.5; margin-top: 8px; color: var(--ink-soft); }
    .method-note { color: var(--muted); }

    @media (max-width: 900px) {
      .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 860px) {
      .facts, .part-tiles { grid-template-columns: minmax(0, 1fr); }
    }
    @media (max-width: 760px) {
      .row-lists { grid-template-columns: minmax(0, 1fr); }
    }
    @media (max-width: 600px) {
      .summary-grid { grid-template-columns: minmax(0, 1fr); }
      .summary-grid .span2 { grid-column: auto; }
      .page-title, .page > .band-heading:first-child h2, .page > div:first-child > .band-heading:first-child h2 { font-size: 44px; }
      .answer-value { font-size: 64px; }
      .header-right .subtitle { font-size: var(--text-xs); }
      /* Detail rows stack on a phone: the title, then its value, with the
         chevron centered at the right. */
      .disclosure > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 2px; }
      .disclosure > summary::after { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
      .dd-title { grid-column: 1; }
      .dd-value { grid-column: 1; font-size: var(--text-sm); text-align: left; white-space: normal; }
    }


    /* ================================================================
       Flat Paper + drawer navigation (Oct 2026)
       ----------------------------------------------------------------
       The color field and frosted glass give way to plain Paper with
       solid white cards and a soft shadow. The two-row nav bar is gone:
       Summary is level 1, every other page is level 2 with a
       "‹ Summary" back link, and the menu button opens a drawer for
       going straight anywhere. The hidden #nav stays in the DOM as the
       page-permission registry the drawer is built from.
       ================================================================ */
    body::before { display: none; }
    .card, .chart-wrap, .section, .login-shell, .cr-doc,
    .disclosure-list, .disclosure.solo, .row-list, .attention.busy {
      background: var(--card-solid);
      border: 1px solid var(--line);
      box-shadow: var(--shadow-card);
      -webkit-backdrop-filter: none; backdrop-filter: none;
    }
    .card, .chart-wrap, .section, .disclosure-list, .disclosure.solo, .row-list { border-radius: var(--radius); }
    @media (prefers-color-scheme: dark) {
      .card, .chart-wrap, .section, .login-shell, .cr-doc,
      .disclosure-list, .disclosure.solo, .row-list, .attention.busy {
        box-shadow: var(--shadow-card);
      }
    }
    .header-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
    .icon-btn {
      width: 44px; height: 44px; min-height: 44px; padding: 0; flex: 0 0 44px;
      display: inline-flex; align-items: center; justify-content: center;
      border: 0; border-radius: var(--radius-control); background: transparent; color: var(--ink);
    }
    .icon-btn:hover { background: var(--line); color: var(--ink); border-color: transparent; }
    .icon-btn[hidden] { display: none; }
    header.app-header { margin: 4px 0 20px -10px; }
    /* The header sits 10px left so the menu button's icon lines up with the
       page; without the button, the name moves back onto the page edge. */
    #nav-menu-btn[hidden] + .org-mark { margin-left: 10px; }

    .back-link {
      display: inline-flex; align-items: center; gap: 2px; min-height: 44px; margin: -8px 0 0 -6px;
      font-size: var(--text-lg); font-weight: 500; color: var(--brand); text-decoration: none;
    }
    .back-link:hover { color: var(--brand-deep); }
    .back-link[hidden] { display: none; }

    dialog.drawer {
      margin: 0; height: 100%; max-height: 100%; width: min(380px, 90vw); box-sizing: border-box;
      padding: 16px 16px 32px; border: 0; border-radius: 0 22px 22px 0; overflow-y: auto;
      background: var(--bg-solid); color: var(--ink);
      box-shadow: var(--shadow-sheet);
    }
    dialog.drawer[open] { animation: drawer-in var(--dur-reveal) var(--ease); }
    dialog.drawer:focus, dialog.sheet:focus { outline: none; }
    @keyframes drawer-in { from { transform: translateX(-24px); opacity: 0; } to { transform: none; opacity: 1; } }
    dialog.drawer::backdrop { background: rgba(22, 25, 34, 0.38); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
    .drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 -6px 16px 4px; }
    .drawer-head .org-mark { margin: 0; font-size: var(--text-md); letter-spacing: 0.12em; color: var(--ink-soft); }
    .drawer .row-group-label { margin-top: 20px; }
    .row-link[aria-current="page"] { background: var(--brand-tint); }
    .row-link[aria-current="page"] .rl-title { color: var(--brand-deep); }
    @media (prefers-color-scheme: dark) { .row-link[aria-current="page"] .rl-title { color: var(--purple-50); } }

    /* ================================================================
       Loading (Oct 2026)
       ----------------------------------------------------------------
       The first frame is the real page: chrome, titles and card frames
       are real, and only what depends on data shimmers, in the shape of
       what's coming. Each piece paints once, when everything it depends
       on has landed, and fades in. Nothing provisional ever shows.
       ================================================================ */
    html:not([data-session="in"]) #app,
    html[data-session="in"] #login-shell { display: none; }

    :root { --sk: rgba(37, 42, 54, 0.06); --sk-hi: rgba(37, 42, 54, 0.11); }
    @media (prefers-color-scheme: dark) { :root { --sk: rgba(255, 255, 255, 0.06); --sk-hi: rgba(255, 255, 255, 0.11); } }
    .sk, .sk-line, .sk-block, .sk-text,
    .page[aria-busy="true"] .chart-box:has(> canvas:not([style]))::before,
    .page[aria-busy="true"] .dd-value:empty::before {
      background: linear-gradient(100deg, var(--sk) 35%, var(--sk-hi) 50%, var(--sk) 65%) 0 50% / 300% 100% no-repeat;
      animation: sk-shimmer 1.8s ease-in-out infinite;
      border-radius: var(--radius-field);
    }
    @keyframes sk-shimmer { from { background-position: 100% 50%; } to { background-position: 0 50%; } }
    /* Text-shaped: placeholder glyphs set the size, transparent ink hides them. */
    .sk { display: inline-block; vertical-align: top; line-height: inherit; color: transparent !important; user-select: none; }
    /* Wraps like the text it stands in for, one bar per line. */
    .sk-text {
      color: transparent !important; user-select: none; border-radius: 4px; background-size: 300% 70%;
      -webkit-box-decoration-break: clone; box-decoration-break: clone;
    }
    /* One line of whatever text it stands in for. */
    .sk-line { display: block; height: 0.72em; margin-block: calc((1lh - 0.72em) / 2); }
    .sk-line:last-child:not(:first-child) { width: 64%; }
    .sk-block { display: block; }
    /* Verdict and the line under it: two lines on wide screens, three on
       phones, the last one short, at the verdict's own type size. */
    .verdict .sk-line, .verdict-sub .sk-line { width: 100%; }
    .verdict .sk-line:nth-child(2), .verdict-sub .sk-line:nth-child(2) { width: 68%; }
    .verdict .sk-line:nth-child(3), .verdict-sub .sk-line:nth-child(3) { display: none; }
    @media (max-width: 720px) {
      .verdict .sk-line:nth-child(2), .verdict-sub .sk-line:nth-child(2) { width: 100%; }
      .verdict .sk-line:nth-child(3), .verdict-sub .sk-line:nth-child(3) { display: block; width: 56%; }
    }
    .sk-card { pointer-events: none; }
    .sk-card .answer-dot { opacity: 0.35; }
    .sk-rows { padding: 8px 0; }
    .sk-rows .sk-line { height: 14px; margin: 13px 0; }
    .sk-rows .sk-line:nth-child(3n+2) { width: 86%; }
    .sk-rows .sk-line:nth-child(3n) { width: 72%; }
    .attention.pending { background: var(--card-solid); box-shadow: inset 0 0 0 1px var(--line); font-weight: 600; }
    .attention.pending svg { opacity: 0.25; }
    .attention.pending .attention-sub { font-weight: 400; }
    /* Charts not drawn yet while their page waits on data (Chart.js styles
       a canvas once it draws into it), and More-detail values not in yet. */
    .page[aria-busy="true"] .chart-box:has(> canvas:not([style]))::before {
      content: ""; position: absolute; inset: 0; border-radius: var(--radius-control);
    }
    .page[aria-busy="true"] .dd-value:empty::before { content: "\2003\2003\2003\2003"; display: inline-block; }
    /* Skeletons painted into static containers lay out as the container's
       own children, and retire with their page even if a section ends up
       with nothing to show. */
    .sk-auto { display: contents; }
    /* Lines standing in for a paragraph: a column, so each keeps its full
       line height (block margins would collapse between them). */
    .sk-lines { display: flex; flex-direction: column; }
    .page:not([aria-busy="true"]) .sk-auto { display: none; }

    .summary-slot { display: flex; min-width: 0; }
    .summary-slot > .card { flex: 1 1 auto; }
    .summary-slot[hidden] { display: none; }
    .reveal { animation: reveal-in var(--dur-reveal) var(--ease) backwards; }
    @keyframes reveal-in { from { opacity: 0; transform: translateY(6px); } }
    /* A CSS animation plays again whenever its page goes from hidden to
       shown. After a page's first look in a visit, motion.js sets data-seen
       and its fade-ins stay still, like its numbers and charts. */
    .page[data-seen] .reveal, .page[data-seen] .kpi .value { animation: none; }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important; /* skeletons hold still instead of strobing */
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
    }

    @media (max-width: 480px) {
      body { padding: 12px 12px 48px; }
      .brand-bar { margin: -12px -12px 16px; }
      h1 { font-size: 36px; }
      .login-shell { margin: 32px auto; padding: 32px 24px; }
      .band-heading h2 { font-size: var(--text-xl); }
      .kpi .value { font-size: 36px; }
    }

    /* Print: show only the campaign report body (for Save as PDF). */
    @media print {
      body::before { display: none; }
      body * { visibility: hidden; }
      #cr-body, #cr-body * { visibility: visible; }
      #cr-body { position: absolute; left: 0; top: 0; width: 100%; }
      [data-noprint] { display: none !important; }
      .cr-doc, .card, .section, .chart-wrap { box-shadow: none; background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
    }

    /* ---- Moved from inline styles in index.html ---------------------------
       Utilities carry !important so they keep the precedence the inline
       styles had over component rules. */
    .m-0 { margin: 0 !important; }
    .mt-0 { margin-top: 0 !important; }
    .mt-1 { margin-top: 4px !important; }
    .mt-2 { margin-top: 8px !important; }
    .mt-3 { margin-top: 12px !important; }
    .mt-4 { margin-top: 16px !important; }
    .mt-5 { margin-top: 20px !important; }
    .mt-6 { margin-top: 24px !important; }
    .mb-3 { margin-bottom: 12px !important; }
    .text-xs { font-size: var(--text-xs) !important; }
    .text-sm { font-size: var(--text-sm) !important; }
    .ink-muted { color: var(--muted-ink) !important; }
    .ta-left { text-align: left !important; }
    .ta-right { text-align: right !important; }

    .login-form { margin-top: 20px; text-align: left; }
    .login-field { display: block; margin-bottom: 12px; font-size: var(--text-sm); }
    .login-field.login-field-end { margin-bottom: 16px; }
    .login-label { color: var(--ink-soft); display: block; margin-bottom: 4px; }
    .login-input { width: 100%; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: 6px; font: inherit; }
    .login-submit { width: 100%; }
    .login-error { margin-top: 10px; min-height: 16px; }
    .login-links { margin-top: 14px; font-size: var(--text-xs); text-align: center; }
    .login-link { color: var(--brand); text-decoration: none; }
    .login-help { margin-top: 16px; }
    .no-access { padding: 48px 8px; text-align: center; }
    .no-access-title { margin-bottom: 8px; }
    .no-access-text { max-width: 460px; margin: 0 auto 16px; }
    .no-access-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
    .load-error { display: flex; margin-bottom: 16px; padding: 12px 16px; background: var(--neg-tint); border: 1px solid var(--neg); border-radius: var(--radius-sm); color: var(--neg-ink); font-size: var(--text-sm); align-items: center; gap: 12px; justify-content: space-between; flex-wrap: wrap; }
    .load-error-actions { display: inline-flex; gap: 8px; }
    .takeaway { font-size: var(--text-md); line-height: 1.5; margin: 4px 0 16px; color: var(--ink-soft); }
    .forecast-sources { font-size: var(--text-xs); margin: -6px 0 14px; }
    .report-controls { margin: 16px 0 4px; }
    .history-summary { cursor: pointer; padding: 6px 0; font-size: var(--text-sm); font-weight: 600; }
    .history-box { margin-top: 8px; padding: 12px; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; }
    .history-hint { font-size: var(--text-xs); color: var(--muted-ink); margin-bottom: 8px; }
    .history-table { width: 100%; font-size: var(--text-sm); }
    .annotations-list { margin-bottom: 14px; }

    /* ---------------------------------------------------------------
       What if (#/whatif): the changes list, saved scenarios, and the
       change sheet's segmented controls.
       --------------------------------------------------------------- */
    .whatif-changes-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 32px 0 12px 4px; }
    .whatif-changes-head .list-heading { margin: 0; }
    .change-list { margin-bottom: 4px; }
    .change-list .row-link, .saved-open {
      width: 100%; border: 0; border-radius: 0; background: transparent; text-align: left;
      font: inherit; color: var(--ink); box-shadow: none; cursor: pointer;
    }
    .change-list .row-link:hover, .saved-open:hover { background: var(--accent-tint); color: var(--ink); }
    .change-list .row-link:focus-visible, .saved-open:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
    .change-list .row-link:active, .saved-open:active { transform: none; }
    .change-list .row-link:disabled { opacity: 0.55; cursor: default; }
    .change-main { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
    .change-effect {
      display: flex; flex-direction: column; align-items: flex-end; flex: 0 0 auto;
      font-size: var(--text-lg); font-weight: 650; font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap;
    }
    .change-effect.pos { color: var(--pos); }
    .change-effect.neg { color: var(--neg); }
    .change-effect-when { font-size: var(--text-xs); font-weight: 500; color: var(--muted); }
    .change-add-icon {
      display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px; border-radius: var(--radius-pill);
      background: var(--accent-tint); color: var(--accent-ink); font-size: var(--text-xl); font-weight: 500; line-height: 1;
    }
    .change-add .rl-title { color: var(--accent); }

    .saved-row { display: flex; align-items: center; gap: 8px; padding-right: 12px; }
    .saved-row + .saved-row { border-top: var(--hair); }
    .saved-open { display: flex; flex-direction: column; align-items: flex-start; flex: 1 1 auto; min-width: 0; min-height: 64px; padding: 12px 20px; justify-content: center; }
    .saved-delete { color: var(--muted); flex: 0 0 auto; }
    .saved-delete:hover { color: var(--neg); background: var(--neg-tint); border-color: transparent; }
    .change-list > .sk-auto, .saved-list > .sk-auto { padding: 16px 20px; }
    .saved-empty { padding: 20px; font-size: var(--text-md); color: var(--muted); }

    .wc-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
    .wc-presets-label { font-size: var(--text-sm); color: var(--muted); margin-right: 4px; }
    .seg { border: 0; padding: 0; margin: 0; min-width: 0; }
    .seg legend { padding: 0; margin-bottom: 4px; font-size: var(--text-sm); color: var(--ink-soft); }
    .seg-options { display: flex; gap: 2px; padding: 3px; border-radius: var(--radius-control); background: var(--line); }
    .form-card .seg-options label { position: relative; display: block; flex: 1 1 0; min-width: 0; font-size: var(--text-md); color: var(--ink-soft); }
    .form-card .seg-options input { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; opacity: 0; }
    .seg-options span {
      display: block; padding: 7px 10px; border-radius: 9px; text-align: center; white-space: nowrap; cursor: pointer;
      transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
    }
    .seg-options input:checked + span { background: var(--card-solid); color: var(--ink); font-weight: 600; box-shadow: 0 1px 3px rgba(22, 25, 34, 0.14); }
    .seg-options input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }
    @media (prefers-reduced-motion: reduce) { .seg-options span { transition: none; } }
    @media (prefers-color-scheme: dark) { .seg-options input:checked + span { background: rgba(255, 255, 255, 0.16); box-shadow: none; } }
    .wc-preview { margin: 4px 0 0; min-height: 1.5em; font-size: var(--text-md); line-height: 1.5; color: var(--ink-soft); }

    /* ---------------------------------------------------------------
       Giving forecast (#/forecast): the growth-target picker and what
       the picked target would take.
       --------------------------------------------------------------- */
    .gf-target-card { padding: 20px; }
    .gf-target-card .seg { margin-bottom: 16px; }
    .gf-target-card .seg-options { max-width: 420px; }
    .gf-target-card .seg-options label { position: relative; display: block; flex: 1 1 0; min-width: 0; font-size: var(--text-md); color: var(--ink-soft); }
    .gf-target-card .seg-options input { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; opacity: 0; }
    .gf-target-head { margin: 0 0 4px; font-size: var(--text-lg); color: var(--ink); }
    .gf-target-head strong { font-variant-numeric: tabular-nums; }
    .gf-target-line { margin: 0 0 8px; font-size: var(--text-md); line-height: 1.5; color: var(--ink-soft); }
    .gf-levers { margin: 4px 0 0; padding-left: 20px; font-size: var(--text-md); line-height: 1.5; color: var(--ink-soft); }
    .gf-levers li + li { margin-top: 4px; }
    .gf-levers strong, .gf-target-line strong { color: var(--ink); font-weight: 600; }
    .gf-target-intro { margin: 0 0 14px; font-size: var(--text-md); line-height: 1.5; color: var(--ink-soft); }
    .gf-target-note { margin: 12px 0 0; font-size: var(--text-sm); line-height: 1.5; color: var(--muted); }
    #gf-every th .th-sub { display: block; font-weight: 400; color: var(--muted); }
    #gf-every .table-scroll + .body-note { margin-top: 12px; }
    .wc-preview:empty, #wc-error:empty, #ws-error:empty { display: none; }
    .form-actions > .wc-remove { color: var(--neg); }
    .form-card label.ws-copy { flex-direction: row; align-items: center; gap: 8px; font-size: var(--text-md); }
    .form-card .ws-copy input { width: auto; }
    #whatif-clear-btn { white-space: nowrap; }
    @media (max-width: 560px) {
      #whatif-open-name { display: block; margin: 4px 0 0; font-size: var(--text-md); }
      .change-list .row-link { gap: 12px; padding: 14px 16px; }
      .saved-open { padding: 12px 16px; }
    }

    /* ---- Sunday teams ---------------------------------------------------- */
    .st-director { margin: 0 0 4px; font-size: var(--text-md); color: var(--ink-soft); }
    .st-director.muted { color: var(--muted); }
    .st-pos { padding: 16px 0; }
    .st-pos + .st-pos { border-top: var(--hair); }
    .st-pos-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
    .st-pos-name { font-size: var(--text-lg); font-weight: 650; color: var(--ink); }
    .st-pos-count { font-size: var(--text-md); font-weight: 600; color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
    .st-meter { height: 8px; margin: 8px 0; }
    .st-meter--ready > span { background: var(--pos); }
    .st-pos-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: var(--text-sm); color: var(--muted); }
    .st-short { font-weight: 600; color: var(--warn-ink); white-space: nowrap; }
    .st-people { margin: 8px 0 0; font-size: var(--text-md); line-height: 1.6; color: var(--ink-soft); }
    .st-people.muted { font-size: var(--text-sm); color: var(--muted); }
    .st-person { white-space: nowrap; }
    .st-person a { color: inherit; text-decoration: none; }
    .st-person a:hover { text-decoration: underline; }
    .st-share { font-size: var(--text-sm); color: var(--muted); }
    .st-sep { color: var(--muted); }
    .st-flex { padding-top: 12px; border-top: var(--hair); }
    .st-dir-list { border-top: var(--hair); }
    .st-dir-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: var(--hair); font-size: var(--text-md); }
    .st-dir-team { font-weight: 600; color: var(--ink); }
    .st-dir-who { text-align: right; color: var(--ink-soft); }
    .st-dir-actions { margin: 16px 0 8px; }
    .st-dir-row { padding: 12px 0; border-top: var(--hair); }
    .st-dir-seats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
    .st-dir-seat { width: 100%; min-width: 0; }
    .st-dir-open { color: var(--muted); }
    #st-directors-error:empty { display: none; }
    @media (max-width: 560px) {
      .st-dir-item { flex-direction: column; align-items: flex-start; gap: 4px; }
      .st-dir-who { text-align: left; }
      .st-dir-seats { grid-template-columns: 1fr; }
    }

    /* People & access (account menu, admins) */
    .avatar-btn { position: relative; }
    .avatar-btn[data-badge]::after {
      content: attr(data-badge); position: absolute; top: -4px; right: -4px;
      min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
      background: var(--neg); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
      box-shadow: 0 0 0 2px var(--bg);
    }
    .menu-count {
      display: inline-block; margin-left: 8px; min-width: 18px; padding: 0 6px; border-radius: 9px;
      background: var(--neg); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
    }
    .people-key-row { margin-top: 12px; border-top: var(--hair); border-bottom: var(--hair); }
    .people-key-list { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; font-size: var(--text-sm); }
    .people-key-list dt { font-weight: 600; color: var(--ink); }
    .people-key-list dd { margin: 0; color: var(--muted); }
    .people-head { font-size: var(--text-sm); font-weight: 600; color: var(--ink); margin: 24px 0 4px; }
    .people-head .count { font-weight: 500; color: var(--muted); margin-left: 6px; }
    .people-empty { font-size: var(--text-sm); margin: 4px 0 0; }
    .people-row { display: flex; align-items: center; gap: 16px; padding: 12px 0; }
    .people-row + .people-row { border-top: var(--hair); }
    .people-main { flex: 1 1 auto; min-width: 0; }
    .people-name { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
    .people-name .chip { margin-left: 8px; vertical-align: 1px; }
    .people-line { font-size: var(--text-xs); color: var(--muted); margin-top: 2px; line-height: 1.45; overflow-wrap: anywhere; }
    .people-controls { flex: none; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
    .people-tier { min-width: 140px; }
    .people-pastor { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); color: var(--ink); white-space: nowrap; }
    .people-remove { color: var(--muted); font-size: var(--text-sm); }
    .people-remove:hover { color: var(--neg-ink); }
    @media (max-width: 640px) {
      .people-row { flex-direction: column; align-items: stretch; gap: 8px; }
      .people-controls { justify-content: flex-start; }
      .people-tier { flex: 1 1 140px; }
    }

    /* Households on Giving & budget: the definition under the heading. */
    .hh-def { margin: -4px 0 16px 4px; }
/* A header's sub-line: what the column counts. */
th .th-sub { display: block; font-weight: 400; color: var(--muted); }