/* ======================================================================
   Prism theme: HCT dark lean, v2 (docs/design/prism-hct-theme.md; bead prism-7wh).
   The one place for colour, type and the masthead. Every page loads /open/theme.css first: the SPA (public/index.html,
   then style.css + workspace.css) and the script-free sign-in pages (public-open/{login,pending}.html, then auth.css).
     1. Fonts: Inter + Fraunces, self-hosted (SIL OFL 1.1, fonts/OFL.txt); CSP unchanged (default-src 'self').
     2. Primitives: HCT names and hexes. [P] Portal app/globals.css · [F] FreeWIS tokens / brand.css ·
        [S] sampled from the HCT brand images · [D] derived for Prism · [M] Matt-direct 2026-10-11.
     3. Semantic tokens, dark: the names the stylesheets use. Navy is the back-most layer (and the masthead square);
        cards, the chat pane, tables, modals and menus sit one step up on charcoal [M: "B: charcoal grey"].
        The status scale — good · maybe · no, green · yellow · crimson [M] — is the one way progress and state show.
        Highlights and card identity are an ochre + bone family [M: "steer away from pastels … ochre and bone"];
        gold stays the interactive accent.
     4. The light rollback block (:root[data-theme="light"]): the pre-theme light values, kept one release as a QA
        lever. Nothing in the UI sets it; the sign-in pages never do. Delete it once the dark theme is signed off.
     5. Base: focus, selection, forced colours, print.
     6. The masthead (SPA + sign-in pages): the HCT signature block over the grey burst.
   Ratios in the comments are WCAG 2.x contrast against the surface named (panel = charcoal #1f2029,
   panel-2 #2a2b34, inset #16171e, ground = navy #020317); the full table is the spec's §1.
   ====================================================================== */

/* ---- 1. fonts (@fontsource-variable/inter 5.2.8, @fontsource-variable/fraunces 5.2.9; latin subset) ---- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/open/fonts/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/open/fonts/fraunces-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ---- 2. primitives ---- */
  /* HCT navy [P]: the ground, the masthead square, the lit accents */
  --hct-navy-950: #020317;      /* [P S F] brand ground: the exact pixel of the navy square in every HCT header */
  --hct-navy-800: #1a1e40;      /* [P] the masthead's second ink (on the grey burst) */
  --hct-navy-600: #3c4a86;      /* [P] lit navy: the user's chat bubble, selection. Never text on dark */
  /* charcoal [D, M "B: charcoal grey"]: a neutral cool grey ladder, one step per layer */
  --hct-char-950: #16171e;      /* wells: inputs, th, quick links, activity forms, pipeline columns, metric tiles */
  --hct-char-900: #1f2029;      /* raised: cards, the chat pane, tables, modals */
  --hct-char-800: #2a2b34;      /* nested on a raised surface; popovers; hover on a raised surface; subtle rules */
  --hct-char-700: #30313a;      /* hover on panel-2; pressed; hairlines */
  --hct-char-600: #44454f;      /* strong decorative edge; scrollbar thumb */
  /* text */
  --hct-bone: #edebe4;          /* [F] primary text on dark */
  --hct-mist: #b9bccd;          /* [P] secondary text on dark */
  --hct-slate: #8a929e;         /* [F] tertiary text, control borders (fails on panel-2: 4.48) */
  /* gold [P F]: the interactive accent only */
  --hct-gold: #b3863a;          /* [P] brand gold: primary-button hover */
  --hct-gold-on-navy: #c2a24a;  /* [F] the interactive gold: primary fill, focus ring, active marker, link underline */
  /* ochre + bone [D, M]: highlights and card identity, told apart by shade, a shape glyph and the label (no pastels) */
  --hct-ochre: #c98a35;         /* rail: 5.53 panel, 4.80 panel-2 */
  --hct-ochre-light: #d69b4a;   /* ink: 6.67 panel, 5.79 panel-2, 5.42 on its wash */
  --hct-umber: #a86f2c;         /* rail: 3.84 panel, 3.33 panel-2 (graphic) */
  --hct-sand: #bfa77a;          /* rail: 6.96 panel */
  --hct-sand-light: #d4c29a;    /* ink: 9.24 panel, 8.02 panel-2, 7.13 on its wash */
  --hct-parchment: #ddd2b8;     /* rail: 10.78 panel */
  --hct-parchment-light: #e6dcc6; /* ink: 11.89 panel, 10.32 panel-2 */
  --hct-stone: #8f877a;         /* rail: 4.56 panel, 3.96 panel-2 */
  --hct-stone-light: #a8a091;   /* ink: 6.25 panel, 5.42 panel-2 */
  --hct-stone-dim: #7d766a;     /* the default rail: 3.60 panel, 3.13 panel-2 (graphic) */
  /* the status scale [D, M]: good · maybe · no. Rail = bars, edges, dots, rings; light = text; deep = on bone/white */
  --hct-green: #38a95c;         /* good rail: 5.40 panel, 4.69 panel-2, 6.81 ground */
  --hct-green-light: #4cbb6f;   /* good text: 6.67 panel, 5.79 panel-2, 5.43 on its wash, 7.35 inset, 8.41 ground */
  --hct-green-deep: #1d6f3a;    /* good on bone 5.20, on white 6.20 (the toast bar, print) */
  --hct-yellow: #f2c418;        /* maybe rail and text: 9.78 panel, 8.49 panel-2, 7.51 on its wash, 12.34 ground */
  --hct-yellow-deep: #7a5a00;   /* maybe on bone 5.35, on white 6.38 (print) */
  --hct-crimson: #e23a52;       /* no rail: 3.83 panel, 3.32 panel-2, 4.22 inset, 4.83 ground (graphic) */
  --hct-crimson-light: #ff6b78; /* no text: 5.88 panel, 5.11 panel-2, 4.94 on its wash, 6.49 inset, 7.42 ground */
  --hct-crimson-deep: #a3132c;  /* no on bone 6.55, on white 7.82 (the toast bar, print) */
  /* the masthead */
  --hct-burst-light: #dededc;   /* [S] the burst's light end, just clockwise of the crease */
  --hct-burst-dark: #afb3b3;    /* [S] the burst's dark end, just counter-clockwise of the crease */
  --hct-mark-grey: #dcdce4;     /* Prism mark ink on dark (docs/brand): 11.88 panel */

  --font-ui: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Fraunces", "Hoefler Text", Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  /* ---- 3. semantic tokens (dark) ---- */
  color-scheme: dark;
  accent-color: #c2a24a;
  scrollbar-color: #44454f transparent;

  --bg: var(--hct-navy-950);              /* page ground, the back-most layer */
  --panel: var(--hct-char-900);           /* cards, chat pane, tables, modals, sign-in card */
  --panel-2: var(--hct-char-800);         /* nested on a panel: reply bubble, cards in the chat pane, .btn, row hover,
                                             the views menu (a popover over the chat pane) */
  --surface-inset: var(--hct-char-950);   /* wells: inputs, th, quick links, activity forms, metric tiles */
  --surface-hover: var(--hct-char-800);   /* hover on a panel */
  --surface-hover-2: var(--hct-char-700); /* hover on panel-2 */
  --surface-pressed: var(--hct-char-700); /* pressed tool, selected row */
  --border: var(--hct-char-700);          /* hairline around panels (decorative) */
  --border-subtle: var(--hct-char-800);   /* row dividers, dashed lines */
  --border-strong: var(--hct-char-600);   /* .btn edge, dashed empty and pinned groups, nested-card edge, popover edge */
  --control-border: var(--hct-slate);     /* inputs, selects, textareas: 5.16 panel, 5.69 inset (≥ 3:1) */
  --text: var(--hct-bone);                /* 17.13 ground · 13.57 panel · 11.79 panel-2 · 10.83 hover-2 */
  --muted: var(--hct-mist);               /* 10.83 · 8.59 · 7.46 · 6.85 */
  --text-3: var(--hct-slate);             /* 6.50 · 5.16; fails on panel-2 (4.48): every panel-2 context lifts it to
                                             mist (.act, hovered rows, the chat pane's cards, highlight rows, menus) */
  --accent: var(--hct-gold-on-navy);      /* primary fill, active markers: 6.60 panel */
  --accent-hover: var(--hct-gold);
  --on-accent: var(--hct-navy-950);       /* 8.33 on gold, 6.21 on the hover gold */
  --link-ink: var(--text);                /* links: bone text with a gold underline, gold on hover */
  --link-line: var(--hct-gold-on-navy);
  --link-hover: var(--hct-gold-on-navy);
  --focus-ring: var(--hct-gold-on-navy);
  --focus: var(--focus-ring);             /* the masthead scopes it to navy (gold is 1.2–1.8:1 on the burst) */

  /* the status scale: GOOD · MAYBE · NO (green · yellow · crimson). Every progress or state cue uses these three and
     nothing else: stage health, chase urgency, due / overdue, verification, eligibility, success / warn / danger. */
  --status-good: var(--hct-green);
  --status-good-text: var(--hct-green-light);
  --status-maybe: var(--hct-yellow);
  --status-maybe-text: var(--hct-yellow);
  --status-no: var(--hct-crimson);
  --status-no-text: var(--hct-crimson-light);
  /* the older names, now the scale */
  --success: var(--status-good-text);
  --success-line: var(--status-good);
  --warn: var(--status-maybe-text);
  --warn-line: var(--status-maybe);
  --danger: var(--status-no-text);
  --danger-line: var(--status-no);
  --toast-ok: var(--hct-green-deep);      /* the toast's 4px state bar, on bone */
  --toast-err: var(--hct-crimson-deep);
  /* info is a highlight, not a status: agent action notices, pinned, role chips, ask / help buttons */
  --info: var(--hct-sand-light);

  --brand-ink: var(--hct-mark-grey);      /* the Prism mark's ink (currentColor) on dark surfaces */
  --bubble-user: var(--hct-navy-600);     /* bone on it: 7.00 */
  --bubble-user-ink: var(--hct-bone);
  --shadow: 0 1px 2px rgb(0 0 0 / 0.35);
  --shadow-pop: 0 12px 28px rgb(0 0 0 / 0.5);
  --shadow-modal: 0 20px 40px -12px rgb(0 0 0 / 0.6);
  --overlay: rgb(0 2 16 / 0.72);
  --toast-bg: var(--hct-bone);            /* inverted so it stands out on dark: navy on bone 17.13 */
  --toast-ink: var(--hct-navy-950);
  --dock-bg: rgb(31 32 41 / 0.96);        /* the charcoal panel, nearly opaque, over the narrow chat log */
  --masthead-h: 60px;
  --chip-wash: 12%;                       /* 0% on panel-2 (the ring and the text stay) */

  /* card identity: rail (graphic) + ink (the type label, identity chips). Ochre and bone shades, plus a glyph per type
     (workspace.css): lead ◆ ochre, tasks □ umber, contact ● sand, company ■ parchment, records ▬ stone. */
  --ws-lead: var(--hct-ochre);              --ws-lead-ink: var(--hct-ochre-light);
  --ws-tasks: var(--hct-umber);             --ws-tasks-ink: var(--hct-ochre-light);
  --ws-contact: var(--hct-sand);            --ws-contact-ink: var(--hct-sand-light);
  --ws-company: var(--hct-parchment);       --ws-company-ink: var(--hct-parchment-light);
  --ws-neutral-2: var(--hct-stone);         --ws-neutral-2-ink: var(--hct-stone-light);  /* activity / project / table / metrics */
  --ws-neutral: var(--hct-stone-dim);       /* the default rail; its label is mist */
  --ws-hl: #36322e;                         /* the gold wash a just-added row sits on: gold 14% over panel (bone 10.65) */
  /* activity types (badges): the identity of what they touch */
  --t-note: var(--ws-neutral-2);            --t-note-ink: var(--muted);
  --t-email: var(--ws-contact);             --t-email-ink: var(--ws-contact-ink);
  --t-call: var(--ws-lead);                 --t-call-ink: var(--ws-lead-ink);
  --t-meeting: var(--ws-company);           --t-meeting-ink: var(--ws-company-ink);
  --t-task: var(--ws-tasks);                --t-task-ink: var(--ws-tasks-ink);

  --ws-pane: clamp(360px, 38%, 560px);
}

/* ---- 4. light rollback (one release; not exposed in the UI; the sign-in pages never set it) ---- */
:root[data-theme="light"] {
  color-scheme: light;
  accent-color: #0a5bba;
  scrollbar-color: auto;
  --bg: #f6f7f9;
  --panel: #ffffff;
  --panel-2: #f2f4f7;
  --surface-inset: #f9fafb;
  --surface-hover: #f1f3f6;
  --surface-hover-2: #eaecf0;
  --surface-pressed: #eaf2fd;
  --border: #d9dce1;
  --border-subtle: #eaecf0;
  --border-strong: #d9dce1;
  --control-border: #d9dce1;
  --text: #1a1f2b;
  --muted: #6b7280;
  --text-3: #6b7280;
  --accent: #0a5bba;
  --accent-hover: #084c9c;
  --on-accent: #ffffff;
  --link-ink: #0a5bba;
  --link-line: transparent;
  --link-hover: #084c9c;
  --focus-ring: #0a5bba;
  --status-good: #1a7f37;
  --status-good-text: #1a7f37;
  --status-maybe: #b54708;
  --status-maybe-text: #b54708;
  --status-no: #b42318;
  --status-no-text: #b42318;
  --toast-ok: #1a7f37;
  --toast-err: #b42318;
  --info: #0a5bba;
  --brand-ink: #020317;
  --bubble-user: #0a5bba;
  --bubble-user-ink: #ffffff;
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-pop: 0 12px 28px rgba(16, 24, 40, 0.16);
  --shadow-modal: 0 20px 40px rgba(16, 24, 40, 0.2);
  --overlay: rgba(16, 24, 40, 0.5);
  --toast-bg: #1a1f2b;
  --toast-ink: #ffffff;
  --dock-bg: rgba(246, 247, 249, 0.96);
  --ws-contact: #0a5bba;   --ws-contact-ink: #0a5bba;
  --ws-company: #0e7a6e;   --ws-company-ink: #0e7a6e;
  --ws-lead: #6941c6;      --ws-lead-ink: #6941c6;
  --ws-tasks: #b54708;     --ws-tasks-ink: #b54708;
  --ws-neutral-2: #475467; --ws-neutral-2-ink: #475467;
  --ws-neutral: #98a2b3;
  --ws-hl: #fff6d6;
}

/* ---- 5. base ---- */
html { background: var(--bg); }
body {
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--hct-navy-600); color: var(--hct-bone); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Windows High Contrast / forced colours: the browser drops the navy square's fill, and the white H on a transparent
   ground would vanish on a light canvas. The square keeps its own colours there (the H's fallback is its square). */
@media (forced-colors: active) {
  .hct-sig { forced-color-adjust: none; background: var(--hct-navy-950); }
}

@media print {
  :root, :root[data-theme] {
    color-scheme: light;
    --bg: #ffffff; --panel: #ffffff; --panel-2: #ffffff; --surface-inset: #ffffff; --surface-hover: #ffffff;
    --surface-hover-2: #ffffff; --surface-pressed: #ffffff; --border: #b8bcc4; --border-subtle: #d9dce1;
    --border-strong: #b8bcc4; --control-border: #8a929e; --text: #000000; --muted: #3c4250; --text-3: #3c4250;
    --link-ink: #000000; --link-line: #000000; --brand-ink: #020317; --bubble-user: #ffffff; --bubble-user-ink: #000000;
    --status-good: #1d6f3a; --status-good-text: #1d6f3a; --status-maybe: #7a5a00; --status-maybe-text: #7a5a00;
    --status-no: #a3132c; --status-no-text: #a3132c; --info: #5c4a1e; --ws-hl: #ffffff;
    --ws-lead-ink: #6b4a14; --ws-tasks-ink: #6b4a14; --ws-contact-ink: #5c4a1e; --ws-company-ink: #3c4250;
    --ws-neutral-2-ink: #3c4250;
    --chip-wash: 0%; --shadow: none; --shadow-pop: none; --shadow-modal: none;
  }
  .ws-chat, .ws-dock, .views-nav, .toast { display: none !important; }
}

/* ======================================================================
   6. The masthead: the HCT signature block (navy square + the handwritten H, HUDSON, "Consulting & Training") over the
   grey burst, then (in the app) the Prism lockup and the controls. Geometry: the HCT Doc Header v3.4 master (2100×300)
   at --masthead-h / 300 per master px (0.2 at 60px). The wordmark SVGs span the master's full height, so their ink sits
   exactly where the master puts it. The burst: a conic gradient fitted to the brand headers (RMS 2/255 on v3.4).
   ====================================================================== */
header.masthead {
  --masthead-ink: #020317;
  --masthead-ink-2: var(--hct-navy-800);
  --brand-ink: var(--masthead-ink);
  --focus: var(--masthead-ink);           /* gold is 1.2–1.8:1 on the burst — never gold here */
  --burst-x: 287px;                       /* the apex sits under the end of HUDSON, as in the master */
  --mu: calc(var(--masthead-h) / 300);    /* one master px */
  --inset: calc(var(--mu) * 132);
  height: var(--masthead-h);
  color: var(--masthead-ink);
  background-color: #c8cac9;              /* fallback: the burst's mid */
  background-image: conic-gradient(from 144.5deg at var(--burst-x) 38%, var(--hct-burst-light), var(--hct-burst-dark));
  border: 0;
  box-shadow: none;                       /* grey against navy already separates */
}
header.masthead .header-inner {
  height: 100%;
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 0 max(var(--inset), env(safe-area-inset-right)) 0 max(var(--inset), env(safe-area-inset-left));
}
.hct-lockup { display: flex; align-items: center; height: 100%; flex: none; }
.hct-sig {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: var(--masthead-h); height: var(--masthead-h);
  background: var(--hct-navy-950); border-radius: 0;
}
.hct-mark { display: block; height: calc(var(--masthead-h) * 0.78); width: auto; }   /* the H: 78% tall, ~59% wide */
.hct-hudson, .hct-tagline { display: block; flex: none; height: var(--masthead-h); }
.hct-hudson { width: calc(var(--mu) * 961); margin-left: calc(var(--mu) * 133); }
.hct-tagline { width: calc(var(--mu) * 336); margin-left: calc(var(--mu) * 106); }

/* the app: a hairline, then the Prism lockup; the controls sit to the right on the darkest field */
.masthead-app .hct-lockup::after {
  content: ''; flex: none; width: 1px; height: 28px; margin-left: 20px; background: rgb(2 3 23 / 0.25);
}
header.masthead a.header-brand {
  display: flex; align-items: center; gap: 6px; flex: none; margin-left: 20px; min-width: 0;
  color: inherit; text-decoration: none; border-radius: 6px;
}
header.masthead a.header-brand:hover { text-decoration: none; }
header.masthead .header-mark { width: 28px; height: 28px; flex: none; color: var(--brand-ink); }
header.masthead .brand-text { display: flex; align-items: baseline; gap: 8px; }
header.masthead .header-brand h1 {
  margin: 0; font-family: var(--font-display); font-size: 20px; line-height: 1; font-weight: 560;
  letter-spacing: -0.01em; color: var(--masthead-ink);
}
header.masthead .brand-sub {
  font: 600 10.5px/1 var(--font-ui); text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--masthead-ink-2); white-space: nowrap;
}
header.masthead .views-menu { margin-left: auto; padding-left: 12px; }
/* the signed-in name gives way first at every width (a long name truncates; the page never scrolls sideways) */
header.masthead .user-chip { flex: 0 1 auto; min-width: 0; margin-left: 12px; gap: 10px; }
header.masthead .user-chip > :not(.user-name) { flex: none; }
header.masthead .user-name { min-width: 0; font: 500 13px/1.3 var(--font-ui); color: var(--masthead-ink); }
header.masthead .btn {
  background: transparent; border: 1px solid rgb(2 3 23 / 0.6); color: var(--masthead-ink);
}
header.masthead .btn:hover { background: rgb(2 3 23 / 0.08); }
header.masthead .badge {                  /* the role: a navy pill, bone for a member, gold for an admin (not a status) */
  background: var(--hct-navy-950); color: var(--hct-bone); box-shadow: none;
}
header.masthead .badge::before { content: none; }
header.masthead .badge.active { color: var(--hct-gold-on-navy); }
header.masthead .views-current { color: var(--masthead-ink-2); }
header.masthead .views-current:not(:empty)::before { color: var(--masthead-ink-2); }   /* 7.61+ on the burst */
header.masthead .views-nav { color: var(--text); --focus: var(--focus-ring); --brand-ink: var(--hct-mark-grey); }

/* Breakpoints (spec §2.4). The --burst-x overrides carry the masthead's own specificity (header.masthead.masthead-*),
   so they win over the 287px default above. */
@media (max-width: 1279.98px) {
  header.masthead .brand-sub { display: none; }
}
@media (max-width: 1099.98px) {
  .masthead-app .hct-tagline, header.masthead .views-current { display: none; }
}
/* tablets (641–899) and phones: the 48px bar. Tablets keep HUDSON (the HCT lockup reads at every width but a phone's);
   Views is an icon, the role badge gives way, the name truncates. */
@media (max-width: 899.98px) {
  :root { --masthead-h: 48px; }
  header.masthead { --inset: 12px; }
  header.masthead.masthead-app, header.masthead.masthead-open { --burst-x: 221px; }   /* under the end of HUDSON at 48px */
  .masthead-app .hct-lockup::after { margin-left: 12px; }
  header.masthead a.header-brand { margin-left: 12px; }
  header.masthead .header-mark { width: 24px; height: 24px; }
  header.masthead .header-brand h1 { font-size: 18px; }
  header.masthead .views-menu { padding-left: 8px; }
  header.masthead .user-chip { margin-left: 8px; gap: 8px; }
}
/* phones: HUDSON gives way; the crease starts just past "Prism" (its text ends at 154px) and the Views button keeps
   22px clear of it, so the crease falls between the Prism lockup (light field) and the controls (dark field) */
@media (max-width: 640px) {
  header.masthead.masthead-app { --burst-x: 156px; }
  header.masthead.masthead-app .views-menu { padding-left: 22px; }
  .masthead-app .hct-hudson { display: none; }
  .masthead-app .hct-lockup::after { display: none; }
}