/* ============================================================================
   THE COMMUNICATIONS CENTER — DESIGN TOKENS
   The organization's official portal. Offline: machine fonts only, no CDN.

   ONE RULE: nothing in chart.css or app.css carries a raw value.

   TWO VOCABULARIES, deliberately kept apart:

     · APP   — the portal chrome. Enterprise proportions (Fluent family, native
               to this machine): 16px root, 14px body, sentence case, weight
               for hierarchy, 32px controls, 4px radius, themeable.

     · CHART — the board face. Belongs to source: printed matter, fixed pixel
               sizes scaled by the viewer, square corners, hairlines, flat,
               source's own colours, always on paper. Its reading standard is
               the viewer's zoom, not the app's type size.
   ============================================================================ */

:root {
  color-scheme: light;

  /* ==== APP =============================================================== */

  /* --- Typefaces. Segoe UI Variable is Windows' own enterprise face. ------ */
  --ui-font: "Segoe UI Variable Text", "Segoe UI Variable", "Segoe UI",
             system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --ui-font-display: "Segoe UI Variable Display", "Segoe UI Variable",
                     "Segoe UI", system-ui, sans-serif;
  --ui-mono: "Cascadia Mono", "Cascadia Code", Consolas, ui-monospace, monospace;

  /* --- Type ramp (Fluent 2). Size / line-height pairs. -------------------- */
  --ui-caption:      0.75rem;   /* 12px */
  --ui-caption-lh:   1rem;      /* 16px */
  --ui-body:         0.875rem;  /* 14px — the app's reading size */
  --ui-body-lh:      1.25rem;   /* 20px */
  --ui-subtitle:     1rem;      /* 16px */
  --ui-subtitle-lh:  1.375rem;  /* 22px */
  --ui-title:        1.25rem;   /* 20px */
  --ui-title-lh:     1.75rem;   /* 28px */
  --ui-display:      1.75rem;   /* 28px */
  --ui-display-lh:   2.25rem;   /* 36px */

  --w-regular:  400;
  --w-medium:   500;
  --w-semibold: 600;

  /* --- Neutrals (Fluent light) ------------------------------------------- */
  --fg-1:      #242424;   /* primary text            */
  --fg-2:      #424242;   /* secondary text          */
  --fg-3:      #616161;   /* tertiary, labels        */
  --fg-4:      #909090;   /* disabled, faint         */
  --bg-1:      #ffffff;   /* cards, sidebar, panel   */
  --bg-2:      #fafafa;   /* subtle fill             */
  --bg-3:      #f0f0f0;   /* canvas / page           */
  --bg-hover:  #f5f5f5;
  --stroke-1:  #d1d1d1;   /* borders                 */
  --stroke-2:  #e6e6e6;   /* dividers                */

  /* --- Brand accent ------------------------------------------------------- */
  --brand:        #2f5496;
  --brand-hover:  #24427a;
  --brand-wash:   #eef2f9;
  --brand-fg:     #ffffff;
  /* interaction accent — focus rings and find-highlights, on chart and app
     alike. (Was referenced but undefined until 2026-07-24: every focus
     outline using it was silently invalid.) */
  --accent:       var(--brand);

  /* --- Status ------------------------------------------------------------- */
  --status-open-fg: #8a5a00;
  --status-open-bg: #fdf6e3;

  /* validation state only — a form field in error, never a second brand
     accent. Fluent's own semantic red; not sampled from anything, not brand. */
  --danger:    #c42b1c;
  --danger-bg: #fdf3f2;

  --scrim: rgba(0, 0, 0, .35);

  /* --- Spacing: 4px rhythm ------------------------------------------------ */
  --s0:  0;
  --sh:  2px;
  --s1:  4px;
  --s2:  8px;
  --s3:  12px;
  --s4:  16px;
  --s5:  20px;
  --s6:  24px;
  --s7:  36px;
  --s8:  32px;
  --s10: 40px;

  /* --- Shape and controls ------------------------------------------------- */
  --radius:      4px;
  --radius-lg:   6px;
  --bw:          1px;
  --bw-accent:   3px;
  --ctrl-h:      32px;
  --ctrl-px:     12px;

  /* --- Elevation: two only ------------------------------------------------ */
  --shadow-panel: -8px 0 24px rgba(0, 0, 0, .12);
  --shadow-pop:   0 2px 8px rgba(0, 0, 0, .10);

  /* --- Measures ----------------------------------------------------------- */
  --root-size:  16px;   /* enterprise root — the board carries its own
                           reading standard in the viewer's zoom */
  --w-sidebar: 260px;
  --w-panel:   420px;
  --w-zlevel:  48px;
  --bp-stack:  900px;
  /* a textarea's starting height, derived from the control height rather than
     a standalone literal (gate cleanup, 2026-07-25): 2.5 * --ctrl-h = 80px/5rem */
  --textarea-min-h: calc(var(--ctrl-h) * 2.5);
  /* a small color-swatch bar's corner radius (Hats' disc-sum indicator) —
     smaller than --radius, its own step rather than a raw literal */
  --radius-sm: 2px;

  /* ==== CHART — source's own vocabulary, untouched by the app ============= */

  --face-display: "Bahnschrift", "DIN Alternate", "Franklin Gothic Medium",
                  "Arial Narrow", "Segoe UI", system-ui, sans-serif;
  --face-text:    "Segoe UI", system-ui, -apple-system,
                  "Helvetica Neue", Arial, sans-serif;
  --face-italic:  "Palatino Linotype", Palatino, "Iowan Old Style",
                  Georgia, serif;
  --face-mono:    "Cascadia Code", "SF Mono", ui-monospace, Consolas, monospace;

  /* Modular: base 13px (FLOOR), ratio 1.125, whole pixels. The floor binds at
     100% zoom and above — reading size. Fit-width is the overview. */
  --ft-0: 13px;
  --ft-1: 15px;
  --ft-2: 16px;
  --ft-3: 18px;
  --ft-4: 21px;
  --ft-5: 23px;
  --ft-6: 26px;
  --ft-7: 30px;

  --lh-flush:   1;
  --lh-tight:   1.15;
  --lh-snug:    1.25;
  --lh-normal:  1.4;
  --lh-relaxed: 1.55;
  --lh-loose:   1.8;

  --ls-slight: .01em;
  --ls-normal: .02em;
  --ls-wide:   .05em;
  --ls-wider:  .08em;
  --ls-widest: .14em;
  --ls-banner: .55em;

  /* ---- THE PRINTED SHEET -------------------------------------------------
     ONE declaration of the ink and paper every printed surface uses. Two
     surfaces are printed matter — the board (.board) and the despatch sheet
     (.despatch-sheet) — and each re-locks these values on itself so it prints
     the same page in every theme. Until 2026-07-25 each ALSO repeated the
     literals, so the same six colours were written out in three places and a
     change to source's ink had to be made three times (Marlowe's maintenance
     finding 7). Now both surfaces reference these; the literals live here and
     nowhere else. The `-print` pair is the dark-theme sheet: the page dims as
     a whole, the ink lifts, and no printed relationship changes. */
  --sheet-ink:       #1a222d;
  --sheet-ink-soft:  #46505c;
  --sheet-ink-faint: #7e8894;
  --sheet-ink-hair:  #d5dae1;
  --sheet-rule:      #1a1a1a;
  --sheet-hair-c:    rgba(26, 26, 26, .28);
  --sheet-hover:     rgba(26, 26, 26, .07);

  --sheet-surface-dark:   #202327;
  --sheet-ink-dark:       #e8eaed;
  --sheet-ink-soft-dark:  #b6bcc4;
  --sheet-ink-faint-dark: #858c95;
  --sheet-rule-dark:      #c9ced6;
  --sheet-hair-c-dark:    rgba(201, 206, 214, .35);
  --sheet-hover-dark:     rgba(232, 234, 237, .08);

  /* the chart's own ink and paper (re-declared on .board so every theme prints
     the same page) */
  --ink:       var(--sheet-ink);
  --ink-soft:  var(--sheet-ink-soft);
  --ink-faint: var(--sheet-ink-faint);
  --ink-hair:  var(--sheet-ink-hair);
  --rule:      var(--sheet-rule);
  --hair-c:    var(--sheet-hair-c);

  /* the sheet the board is printed on. In dark theme it dims to cut glare —
     a property of the paper, not of source's colours or form. */
  --paper:     #ffffff;
  --paper-dim: #e9ebee;
  /* dark theme: the page dims as a whole — uniform brightness on the sheet,
     preserving every printed relationship. ~2/3 light reads as paper under a
     dim lamp, not a different document. */
  --paper-dim-level: 0.72;
  --surface:   var(--paper);

  /* hover on the chart is a darkening of the sheet, never the app's accent —
     the two vocabularies stay apart even in interaction */
  --chart-hover: var(--sheet-hover);

  --bw-hair: 1px;
  --bw-rule: 2px;
  --bw-mark: 3px;
  --r-chart: 0;
  --r-app:   4px;
  --r-pill:  999px;

  --board-w:       2494px;
  --col-w:         338px;
  --col-gap:       10px;
  --board-padl:    44px;
  --board-padr:    24px;
  --h-apex:        330px;
  --inset-apexdiv: 26px;
}

/* --- DARK — app chrome only. The board stays printed. --------------------- */
:root[data-theme="dark"] {
  color-scheme: dark;

  --fg-1:      #ffffff;
  --fg-2:      #d6d6d6;
  --fg-3:      #adadad;
  --fg-4:      #7a7a7a;
  --bg-1:      #292929;
  --bg-2:      #1f1f1f;
  --bg-3:      #141414;
  --bg-hover:  #333333;
  --stroke-1:  #4a4a4a;
  --stroke-2:  #383838;

  --brand:        #7ea1de;
  --brand-hover:  #9db8e8;
  --brand-wash:   #24314a;
  --brand-fg:     #14203a;

  --status-open-fg: #e0c07a;
  --status-open-bg: #33291a;

  --danger:    #ff99a4;
  --danger-bg: #442726;

  --scrim: rgba(0, 0, 0, .6);

  --shadow-panel: -8px 0 24px rgba(0, 0, 0, .5);
  --shadow-pop:   0 2px 8px rgba(0, 0, 0, .45);
}

/* --- Base ----------------------------------------------------------------- */
html { font-size: var(--root-size); }

*, *::before, *::after { box-sizing: border-box; }

/* `hidden` must win over any display rule a component sets */
[hidden] { display: none !important; }

body {
  margin: var(--s0);
  background: var(--bg-3);
  color: var(--fg-1);
  font-family: var(--ui-font);
  font-size: var(--ui-body);
  line-height: var(--ui-body-lh);
  -webkit-font-smoothing: antialiased;
}

/* Display-layer capitalisation. Source prints definitions, functions and VFPs
   as clause continuations, so they begin lowercase. The STORED data stays
   verbatim; only the first rendered letter is lifted. */
.cap { display: block; }
li.cap { display: list-item; }
.cap::first-letter { text-transform: uppercase; }