/* ============================================================================
     VISUAL IDENTITY — "Drawing Set" (docs/specs/drawing-set-identity.md, binding).
     Blueline on drafting film: a navy shell, a cool white drafting sheet with a fine
     measured grid, graphite ink, 1px ink hairlines instead of shadows, crisp 4px control
     corners and 6px cards. Semantic tokens; components reference these, not raw hex.
     Legacy var names (--panel, --muted, …) are kept as aliases so every existing rule
     picks up the identity without a rename sweep.
     ============================================================================ */
  :root{
  --demo-bar-h:30px; /* the demo bar's height — every offset under it reads this (17-backend.css) */
    /* type (spec §1) — Archivo (width axis 75–100) + Chivo Mono, same foundry */
    --font-sans: Archivo, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: "Chivo Mono", ui-monospace, Consolas, monospace;
    --stretch-label: 75%;
    /* neutrals */
    --surface-canvas:#F4F7FA; --surface-default:#FFFFFF; --surface-subtle:#F8FAFC; --surface-sunken:#EBF0F5;
    --border-default:#D5DDE6;  /* static dividers, inner lines */
    --border-strong:#B9C4D0;   /* card and popover edges */
    --border-control:#7B889A;  /* the ink hairline on every interactive boundary — 3.60 on white, 3.35 on the sheet */
    --text-primary:#151C28; --text-secondary:#424E62; --text-muted:#5B677B;
    --text-faint:#A3ACB9;      /* not text: disabled, decoration */
    --text-on-accent:#FFFFFF;
    --grid-minor:#EBEFF4; --grid-major:#DCE3EB;
    /* shell (sidebar + workspace top bars) */
    --shell-bg:#0D1B36; --shell-bg-clear:rgba(13,27,54,0); /* the same ink at zero alpha: photo scrims (spec landing-redesign §2.2) */
    --shell-raised:#172A4E; --shell-active:#1D3563; --shell-line:#24395F;
    --shell-text:#C5D1E6; --shell-text-strong:#FFFFFF; --shell-text-muted:#9AAAC6; --shell-icon:#A9B8D2;
    --shell-marker:#60A5FA; --shell-focus:#93C5FD; --shell-scroll:#5A709A;
    /* brand blue scale — brand-600 is the action colour */
    --brand-50:#EFF6FF; --brand-100:#DBEAFE; --brand-200:#BFDBFE; --brand-300:#93C5FD; --brand-400:#60A5FA;
    --brand-500:#3B82F6; --brand-600:#2563EB; --brand-700:#1D4ED8; --brand-800:#1E40AF; --brand-900:#1E3A8A;
    --orange-500:#F97316; --orange-700:#C2410C;   /* orange is the logo only — a violation anywhere in app chrome or data marks */
    /* semantic */
    --success-fg:#33775A; --success-bg:#EAF6EF; --success-line:#BFE3CF;
    --warning-fg:#8C5F1F; --warning-bg:#FFF4DE; --warning-line:#E8D5AC;
    --error-fg:#C0303C; --error-bg:#FCEBED; --error-line:#E9B7BC;
    --redline:var(--error-fg); --redline-bg:var(--error-bg);   /* errors and "new" marks only */
    --toast-err-icon:#F59AA1; --toast-ok-icon:#7FD1A8;           /* status icons on the navy toast (8.16 / 9.44) */
    --conduct-meta:#DBE6FB;                                      /* conduct bar meta on brand-700 (5.34) */
    --logic-fg:#7569B0; --logic-bg:#F0EEFA; --logic-fg-strong:#5B4F94;
    --split-fg:#3A888F; --split-bg:#E9F5F5; --split-fg-strong:#2C6E74; /* canvas spec §2 — split header/pct TEXT only (5.25:1 on --split-bg); --split-fg stays for marks */
    --repeat-fg:#A24680; --repeat-bg:#FAEDF6;  /* repeat gates — same path, multiplied. Not split-teal (random assignment), not logic-violet (answer routing). */
    --viz-cat-1:#2563EB; --viz-cat-2:#0D9488; --viz-cat-3:#8B5CF6; --viz-cat-4:#DB2777; --viz-cat-5:#92400E; /* variant series palette — fixed by variant position, never re-assigned */
    --compare-fg:#0E7490; --compare-bg:#E0F2F7;  /* compare wire = MEANING edge. Not logic-violet (routing), not split-teal, not plum. No wire is cyan except this one. */
    --wire:#7D8B9B;  /* flow wires, in-ports and default ports — 3.23:1 on the sheet */
    /* tints and overlays */
    --scrim: rgba(13,27,54,.45);
    --section-fill: rgba(255,255,255,.45); --repeat-fill: rgba(250,237,246,.35); --on-tint-hover: rgba(255,255,255,.6);
    /* shape (spec §3) */
    --r-control:4px; --r-card:6px; --r-chip:3px; --r-stamp:2px; --r-round:999px;
    --r-mark:4px;   /* dataviz data-end rounding — chart rules unchanged */
    /* depth (spec §3) — hairlines replace --shadow-1; only floating things cast a shadow */
    --shadow-1:none;
    --shadow-2:0 8px 24px rgba(13,27,54,.16);   /* menus, popovers, toasts, a dragged node */
    --shadow-3:0 16px 48px rgba(13,27,54,.22);  /* modals only */
    /* motion (spec §6) */
    --dur-1:90ms; --dur-2:120ms; --ease-step:cubic-bezier(.2,0,0,1);
    /* legacy aliases (existing rules read these) */
    --bg:var(--surface-canvas); --panel:var(--surface-default); --panel2:var(--surface-subtle);
    --panel3:var(--surface-sunken); --border:var(--border-default);
    --text:var(--text-primary); --muted:var(--text-muted);
    --accent:var(--brand-600); --accent2:var(--success-fg);
    --warn:var(--warning-fg); --danger:var(--error-fg);
    --port:var(--brand-600); --portDefault:var(--wire);
    --q:var(--brand-100); --c:var(--logic-bg); --e:var(--success-bg); --sp:var(--split-bg);
  }
  *{box-sizing:border-box;}
  html,body{height:100%;margin:0;}
  /* Browser surfaces (spec §5) — the parts nobody draws still carry the identity. */
  html{caret-color:var(--brand-600); accent-color:var(--brand-600); scrollbar-color:var(--border-control) transparent; scrollbar-width:thin;}
  ::selection{background:var(--brand-200); color:var(--text-primary);}
  a{text-underline-offset:2px; text-decoration-thickness:1px;}
  input[type=checkbox], input[type=radio], input[type=range]{accent-color:var(--brand-600);}
  body{
    font-family:var(--font-sans);
    background:var(--bg); color:var(--text); overflow:hidden;
  }
  #app{display:flex; flex-direction:column; height:100vh;}
  /* A3 §10 fix #2 — .panel-hint had no global rule, only scoped ones (#panel h3 .panel-hint,
     .home-hd .panel-hint); everywhere else it fell back to plain body text (16px,
     --text-primary) and printed louder than its own heading. Scoped overrides above still
     win by specificity. */
  .panel-hint{font-size:11.5px; color:var(--text-muted); line-height:1.45;}
  /* Narrow uppercase label (spec §1) — system words only, never user-authored text. */
  .nf-label-style{font-size:11px; line-height:13px; font-weight:600; font-stretch:var(--stretch-label); letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted);}
  .nf-mono{font-family:var(--font-mono);}
  /* Motion (spec §6) — nothing exceeds 120ms; reduced motion removes even that. */
  @media (prefers-reduced-motion: reduce){*,*::before,*::after{transition-duration:0s!important;animation-duration:0s!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}