/* ======================================================================
   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, to the window's top edge.
   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: 3.75rem;
  /* The band at the top of the window that the masthead runs up into but keeps its content out of (bead prism-sbp,
     build 3). In the iOS / Mac app, native writes --app-inset-top on <html>: the status bar and the Dynamic Island, or
     a windowed iPad's / the Mac app's window controls. Elsewhere env(safe-area-inset-top) decides: 0 in a desktop
     browser and in Safari's own frame, so nothing moves there. The page never sets --app-inset-top itself. */
  --masthead-top: var(--app-inset-top, env(safe-area-inset-top, 0px));
  --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;
    --masthead-top: 0px;
  }
  .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).
   The top band (build 3, bead prism-sbp; Matt 2026-10-12: "i'd just as prefer that it were just the masthead extended
   to the top"): the masthead runs to the window's top edge and pads its bar down by --masthead-top (§3), so in the app
   the burst fills the band under the status bar / Dynamic Island / window controls and the bar's content sits below
   it. The apex stays where it was in the bar, so the bar looks exactly as before and the burst simply continues up.
   The navy square stays in the bar and does not run up into the band: the status bar's text is dark over the
   masthead, and where it sits over the square (an iPad's clock spans about x 27–79 pt, the square x 12–60; a notched
   iPhone's left ear is similar) it would be lost on navy. In a browser the band is 0 and nothing moves.
   ====================================================================== */
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);
  box-sizing: content-box;                /* the height is the bar; the band above it is padding */
  height: var(--masthead-h);
  padding-top: var(--masthead-top);
  color: var(--masthead-ink);
  background-color: #c8cac9;              /* fallback: the burst's mid */
  /* the apex at 38% of the bar (below the band), whatever the band */
  background-image: conic-gradient(from 144.5deg at var(--burst-x) calc(var(--masthead-top) + var(--masthead-h) * 0.38),
    var(--hct-burst-light), var(--hct-burst-dark));
  border: 0;
  box-shadow: none;                       /* grey against navy already separates */
}
/* The band, held (build-3 review). The masthead scrolls away with the page on every view but the narrow workspace, and a
   modal's scrim or the session bar would otherwise reach the top edge: the dark status-bar text would land on navy and
   rows would pass under the Dynamic Island / the window controls. This strip is the same burst, fixed over the band and
   above everything (the modals are 100, the session bar 1100). At rest it lies exactly on the masthead's own band (the
   same background, inherited, from the same origin), so there is nothing extra to see; once the page scrolls, the bar
   slides up under it. In a browser the band is 0, and so is the strip. On the narrow workspace the sticky masthead keeps
   its own band at the top, and its stacking context caps the strip there, so the modals and the session bar start below
   the band (style.css). */
header.masthead::before {
  content: ''; position: fixed; top: 0; left: 0; right: 0; height: var(--masthead-top); z-index: 100;   /* the layer scale's topBand: over everything, the session bar included */
  background: inherit;
}
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); }
/* the glass cube (docs/brand): the large drawing at 28 px, the 16-unit small drawing on the 48px bar (24 px) */
header.masthead .header-mark .mark-sm { display: none; }
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: 1.25rem; line-height: 1; font-weight: 560;
  letter-spacing: -0.01em; color: var(--masthead-ink);
}
header.masthead .brand-sub {
  font: 600 0.65625rem/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 0.8125rem/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: 3rem; }
  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-mark .mark-lg { display: none; }
  header.masthead .header-mark .mark-sm { display: inline; }
  header.masthead .header-brand h1 { font-size: 1.125rem; }
  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; }
}

/* prism-h88: coherent masthead geometry at every text size; keep native's reserved top band clear. */
header.masthead .header-inner { box-sizing: border-box; }
.masthead-app .hct-sig { align-self: stretch; height: 100%; }
.masthead-app .hct-mark { max-height: 78%; object-fit: contain; }
header.masthead .settings-toggle { display: inline-flex; align-items: center; gap: 0.35rem; flex: none; margin-left: 0.65rem; }
/* Translated header controls create stacking contexts: lift the contexts themselves,
   so their menus cannot be covered by the workspace cards' positioned controls. */
header.masthead .views-menu, header.masthead .user-chip { position: relative; z-index: 50; }
:root[data-native-mac="1"][data-settings-menu="1"] #settings-toggle { display: none; }
@media (max-width: 1100px) {
  header.masthead .settings-label { display: none; }
  header.masthead .settings-toggle { min-width: 2.5rem; justify-content: center; }
}
:root[data-text-size="130"] .masthead-app .brand-sub,
:root[data-text-size="150"] .masthead-app .brand-sub,
:root[data-text-size="130"] .masthead-app .hct-tagline,
:root[data-text-size="150"] .masthead-app .hct-tagline { display: none; }
:root[data-text-size="150"] .masthead-app .hct-hudson { display: none; }
@media (min-width: 900px) {
  :root[data-layout="wide"] .masthead-app { --masthead-lift: min(calc(var(--masthead-top) / 2), max(0px, calc(var(--masthead-h) / 2 - 1.1rem))); }
  :root[data-layout="wide"] .masthead-app .hct-sig { height: calc(var(--masthead-h) + var(--masthead-top)); margin-top: calc(-1 * var(--masthead-top)); }
  /* Mac has window controls, not an iPad status clock. Keep its full-height signature
     above the held gray band; it scrolls away with the masthead, leaving that band gray. */
  :root[data-native-mac="1"][data-layout="wide"] .masthead-app .hct-sig { position: relative; z-index: 100; }
  :root[data-layout="wide"] .masthead-app .hct-hudson, :root[data-layout="wide"] .masthead-app .hct-tagline,
  :root[data-layout="wide"] .masthead-app .header-brand, :root[data-layout="wide"] .masthead-app .views-menu,
  :root[data-layout="wide"] .masthead-app .settings-toggle, :root[data-layout="wide"] .masthead-app .user-chip { transform: translateY(calc(-1 * var(--masthead-lift))); }
}

/* Gray surfaces use dark ink, deep status tones and consistent HCT neutrals. */
:root { --masthead-gray: #c8cac9; --gray-edge: rgb(2 3 23 / 0.2); }
#ws-cards > .ws-card:nth-child(even), #ws-pinned > .ws-card:nth-child(even) {
  --card-bg: #c8cac9; --panel: #c8cac9; --panel-2: #dededc; --inset: #afb3b3;
  --text: #020317; --muted: #303445; --text-3: #3c4250;
  --link-ink: #020317; --link-line: #3c4a86; --control-border: #5a6068; --border: #8a929e;
  --ws-label: #3c4250; --status-good-text: #1d6f3a; --status-maybe-text: #7a5a00; --status-no-text: #a3132c;
  --ws-contact-ink: #5c4a1e; --ws-company-ink: #3c4250; --ws-tasks-ink: #6b4a14; --ws-lead-ink: #6b4a14;
  --ws-neutral-2-ink: #3c4250; --ws-hl: #ddd2b8; --surface-hover: #dededc;
  color: var(--text);
}
#ws-cards > .ws-card:nth-child(even), #ws-pinned > .ws-card:nth-child(even) {
  --surface-inset: #bfc3c4; --surface-hover-2: #dededc; --surface-pressed: #afb3b3;
  --border-subtle: #afb3b3; --border-strong: #8a929e;
  --focus: #020317; --focus-ring: #020317; --link-hover: #6b4a14; --info: #5c4a1e;
  --status-good: #1d6f3a; --status-maybe: #7a5a00; --status-no: #a3132c;
  --t-note-ink: #3c4250; --t-email-ink: #5c4a1e; --t-call-ink: #6b4a14; --t-meeting-ink: #3c4250; --t-task-ink: #6b4a14;
  accent-color: #6b4a14;
}

@media (max-width: 480px) {
  :root[data-text-size="130"] .header-brand h1, :root[data-text-size="150"] .header-brand h1,
  :root[data-text-size="130"] .user-chip .user-name, :root[data-text-size="150"] .user-chip .user-name { display: none; }
}
#ws-cards > .ws-card:nth-child(even), #ws-pinned > .ws-card:nth-child(even) {
  --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);
  --accent: #6b4a14; --accent-hover: #5c4a1e; --on-accent: var(--hct-bone);
  --ws-contact: #5c4a1e; --ws-company: #3c4250; --ws-lead: #a86f2c; --ws-tasks: #6b4a14;
  --ws-neutral: #5a6068; --ws-neutral-2: #3c4250;
}