/* rd_tokens.css - the Stage-1 redesign's tokens (direction A, "Ledger"). OPT-IN.
 *
 * Every value lives on `html.rd`, and `rd` is set ONLY on the four Stage-1 pages: the super-admin
 * console (superadmin.html), KB Documents (kb_documents.html, which also carries the Ask state at
 * /kb/#ask) and KB Observability (kb_observability.html). No other page links this file, and the
 * names are NEW (`--rd-*`), so nothing here can reach a page or a component that does not ask for it.
 *
 * 🔴 Why new names and not the proposal's `--bg` / `--fs-body` / `--accent`: kb.css, bb_tokens.css
 * and kb_panel.css already own those names at :root, and `html.rd` outranks :root. Redefining one
 * would silently restyle the legacy bodies AND the Ask panel, whose isolated shots are asserted by
 * the visual parity check. A new name can only be read by a rule that was written for it.
 *
 * 🔴 This is the ONLY file in the rd scope allowed to hold a literal size, weight, leading, tracking,
 * family or colour. tests/test_rd_tokens.py fails on a literal anywhere else (rd_*.css, _rd_*.html)
 * and checks the scale below still has exactly SIX steps.
 *
 * IF YOU NEED A SIZE THAT IS NOT HERE, YOU NEED A WEIGHT.
 */

/* @primitives --------------------------------------------------------------------------------- */
html.rd{
  /* ---- type: six steps, one job each ---------------------------------------------------------
     step      size  leading  tracking  the ONE job                                                */
  --rd-fs-caption:12px;  --rd-lh-caption:16px;  --rd-tr-caption:.01em;  /* table heads, timestamps, badges, key-caps, counts, the context bar */
  --rd-fs-body-sm:14px;  --rd-lh-body-sm:20px;  --rd-tr-body-sm:0em;    /* DENSE TOOLS: nav, table rows, tree, toolbars, menus, buttons */
  --rd-fs-body:16px;     --rd-lh-body:24px;     --rd-tr-body:-.003em;   /* READING: chat answers, dialogs, page subtitles, prose; EVERY text entry */
  --rd-fs-title:20px;    --rd-lh-title:28px;    --rd-tr-title:-.012em;  /* a panel's, a section's or a dialog's title */
  --rd-fs-heading:28px;  --rd-lh-heading:34px;  --rd-tr-heading:-.02em; /* the page H1; a KPI figure */
  --rd-fs-display:40px;  --rd-lh-display:44px;  --rd-tr-display:-.03em; /* once per page at most: a hero figure */
  /* uppercase eyebrows / tags only (caps read too tight at 0) */
  --rd-tr-caps:.06em;

  /* three weights; 700 is gone - past 600 Geist adds noise, not authority */
  --rd-fw-regular:400; --rd-fw-medium:500; --rd-fw-semi:600;

  /* families. Geist + Geist Mono (SIL OFL). Loaded by _rd_head.html; until they arrive (or where
     the network is fenced, as in e2e) the system UI face stands in at the same sizes. */
  --rd-font-sans:"Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --rd-font-mono:"Geist Mono", ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;

  /* ---- space: the 4px grid, eight stops ------------------------------------------------------ */
  --rd-sp-1:4px; --rd-sp-2:8px; --rd-sp-3:12px; --rd-sp-4:16px;
  --rd-sp-6:24px; --rd-sp-8:32px; --rd-sp-12:48px; --rd-sp-16:64px;

  /* ---- control heights: every clickable thing lands on one of three -------------------------- */
  --rd-h-sm:28px;   /* toolbar buttons, row actions, segmented controls, subnav tabs */
  --rd-h-md:36px;   /* default button, input, select, nav item */
  --rd-h-lg:44px;   /* touch: every control at phone width, the composer send */
  --rd-bar-h:56px;  /* the top bar */
  --rd-ctx-h:40px;  /* the context bar under it */
  --rd-side-w:248px; /* the sidebar on every staff page (_rd_shell.html) */
  --rd-side-rail-w:64px; /* ...folded to an icon rail on a laptop */
  --rd-hero-h:300px; /* the Home hero's least height: room for the animated lockup behind it */
  --rd-icon:16px; --rd-icon-sm:14px; --rd-icon-lg:20px;

  /* ---- radius (Ledger: small and consistent; nested surfaces step DOWN, never up) ----------- */
  --rd-r-chip:4px; --rd-r-control:6px; --rd-r-surface:8px; --rd-r-overlay:12px; --rd-r-full:999px;

  /* ---- borders ------------------------------------------------------------------------------ */
  --rd-bw:1px;
  --rd-border:var(--rd-bw) solid var(--rd-line);
  --rd-border-strong:var(--rd-bw) solid var(--rd-line-strong);

  /* ---- z: named layers. The bar sits where the legacy .topbar/.kb-top sat (20-30): BELOW every
     legacy overlay these pages still carry (console scrim 50, KB menus 200, modals 250, toasts 300,
     the Ask bubble 90). SA-31 and KB-DOC-73 click a scrim at (5,5) - the bar must never win that. */
  --rd-z-raised:1; --rd-z-sticky:10; --rd-z-bar:30; --rd-z-dropdown:40;
  --rd-z-scrim:50; --rd-z-modal:60; --rd-z-toast:70;

  /* ---- motion -------------------------------------------------------------------------------- */
  --rd-dur-1:120ms;  /* press, hover, colour: feedback that must feel instant */
  --rd-dur-2:200ms;  /* menus, tabs, tree expand, toasts */
  --rd-dur-3:320ms;  /* drawers, dialogs, the once-per-load reveal */
  --rd-ease-out:cubic-bezier(.23,1,.32,1);
  --rd-ease-in-out:cubic-bezier(.77,0,.175,1);
  --rd-ease-drawer:cubic-bezier(.32,.72,0,1);
  /* the spring (--rd-ease-spring / --rd-dur-spring) is defined ONCE, in the agentic layer below (main's,
     2026-10-11): a menu growing out of its trigger reads the same token as the Ask panels. Tune it there;
     never re-implement it. (Its scripted twin, rd_spring.js, went with the Home page on 2026-10-14.) */
  --rd-m:1;          /* motion distance multiplier: every translate is calc(var(--rd-m) * Npx) */
}

/* ONE type scale on every page and at every width (Stage 6, D8): the 14/16 base above holds for every
   page, the sign-in included: there is no per-page type switch and no phone-only 16px body override.
   Text entry (rd-input / rd-select / rd-textarea / rd-field, the composers) reads the BODY step, so no
   field is ever under 16px: iOS Safari zooms the page when one under 16px takes focus and does not
   zoom back (AGENTS.md -> "The mobile kit"). */

/* The context bar is drawn only on the knowledge base's pages since the 2026-10-14 shell (_rd_shell.html), and the
   amber "Viewing as" bar takes its height on any page while a super admin views as someone. Pages that offset a
   sticky band by --rd-ctx-h (rd_feedback.css, rd_superadmin.css) read 0 where neither is on the page. */
html.rd:not(:has(.rd-ctx)):not(:has(.rd-viewas-bar)){ --rd-ctx-h:0px; }

@media (prefers-reduced-motion:reduce){
  /* Fewer and gentler, not zero: opacity and colour still transition, every DISTANCE goes to 0. */
  html.rd{ --rd-m:0; --rd-dur-3:200ms; }
}

/* @colour ------------------------------------------------------------------------------------
   Roles, never literals in a rule. SIX themes: Liquid Glass (the DEFAULT since Stage 6 - "@theme: Liquid
   Glass" below), Midnight Glass (the same palette in frosted glass - "@theme: Midnight Glass"), Bidbrain
   Light (the brand: navy on white - "@theme: Bidbrain"), Bidbrain Dark (the white lockup on its ink-navy
   ground - "@theme: Bidbrain Dark"), and the classic Light and Dark (graphite, the house gold). Dark is the
   base block here; light follows the OS when <html> carries no theme at all (only without script now).
   `data-rd-theme` on <html> = "glass-dark" | "midnight-dark" | "brand" | "brand-dark" | "light" | "dark".
   The viewer's theme control sets it (templates/_rd_theme.html), _rd_head.html applies the stored choice -
   or the default, Liquid Glass - before the first paint; "System" sets "brand" or "glass-dark" from the OS
   (and data-rd-theme-system, so the control knows it is following), and a page that pins its own theme
   carries data-rd-theme-lock so none of that ever overrides it. 🔴 NOT `data-theme`: kb_panel.css
   restyles the Ask panel on html[data-theme="light"].
   🔴 MATERIAL ROLES (--rd-glow, --rd-surface, --rd-glass-*, --rd-rim, --rd-spec-*, ...) are defined ONLY in
   the two glass themes' blocks below. A component reads one as var(--rd-<role>, <today's value>), so in
   the four other themes the role is undefined and today's value computes. Never add one to a plain
   html.rd{} block (specs/18_material_parity.spec.js fails on any drift in the four).
   🔴 EVERY DARK THEME'S VALUE ENDS IN "dark" ("dark", "brand-dark", "glass-dark", "midnight-dark"), so one `:not([data-rd-theme$="dark"])`
   keeps a light-OS rule off all of them at the specificity the old `="dark"` had.
   🔴 A rule that answers the light GROUND outside this file must be written THREE times, like the
   blocks below: `@media (prefers-color-scheme:light){ .rd:not([data-rd-theme$="dark"]) ... }`,
   `.rd[data-rd-theme="light"] ...` AND `.rd[data-rd-theme="brand"] ...` (Bidbrain Light is a light
   ground), or the control will reach the tokens and miss that rule. A rule that answers the DARK ground
   (an unscoped default, light twins overriding it) reaches Bidbrain Dark with nothing added.
   Values: docs/redesign/directions/src/palettes.mjs (ledger), contrast-checked there. */
html.rd{
  --rd-bg:#0B0C0E; --rd-s1:#111317; --rd-s2:#181B20; --rd-sunk:#08090B;
  --rd-line:#22262C; --rd-line-strong:#343A42;
  --rd-ink-1:#ECEDEF; --rd-ink-2:#A6ACB5; --rd-ink-3:#848B95;
  --rd-ok:#5BD18E; --rd-warn:#F29257; --rd-danger:#F7837C; --rd-info:#86B6FF;
  /* the house gold: staff surfaces wear it. Five places only - primary action, focus ring, the
     selected row's tint, citation numbers, send - plus the context bar's mark. */
  --rd-accent:#E9B44C; --rd-accent-ink:#1B1304; --rd-accent-text:#E9B44C; --rd-accent-ring:#E9B44C;
  /* an ink that is DARK in every theme: print ink, and the ground mixed under the always-dark overdue
     chip (rd_feedback.css). Was read off --rd-accent-ink, which is white on the navy accent. */
  --rd-ink-fixed:#1B1304;
  /* the house gold of the supplied ART (the illustrations behind the Ask and Approvals empty states): it is painted
     into the pictures, so a light around them is gold in every theme, blue-accent ones included. (The Home orb
     that wore it was replaced by the drawn lockup on 2026-10-15; rd_home.css lights that in the theme accent.) */
  --rd-art-glow:#F2B648; --rd-art-spark:#FFF3D1; --rd-art-home:url("/static/art/art_home_brain.webp?v=1");
  --rd-art-knowledge:url("/static/art/art_knowledge.webp?v=1");   /* the Ask empty state */
  --rd-art-approvals:url("/static/art/art_approvals.webp?v=1");   /* the Approvals empty states */
  --rd-hover:rgba(255,255,255,.045); --rd-press:rgba(255,255,255,.07);
  --rd-bar-bg:rgba(11,12,14,.86);
  --rd-scrim:rgba(4,5,6,.64);
  /* THE SAME IN EVERY THEME (no theme block below redefines them, on purpose): what sits on a photo or a
     saturated fill reads the same whatever the ground. --rd-scrim-media darkens a face to carry a white glyph
     (rd_settings.css' change-photo veil); --rd-ink-on-fill is that glyph, and the tick on a done task's
     --rd-ok disc (rd_tasks.css); --rd-shadow-0 is the faintest lift, a resting task card on its column. */
  --rd-scrim-media:rgba(0,0,0,.55); --rd-ink-on-fill:#FFFFFF; --rd-shadow-0:0 1px 2px rgb(0 0 0 / .04);
  --rd-shadow-1:0 1px 2px rgba(0,0,0,.4), 0 4px 12px -6px rgba(0,0,0,.5);
  --rd-shadow-2:0 8px 24px -6px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.35);
  --rd-shadow-3:0 24px 64px -12px rgba(0,0,0,.72), 0 4px 12px rgba(0,0,0,.4);
  --rd-scheme:dark;
}
@media (prefers-color-scheme:light){
  html.rd:not([data-rd-theme$="dark"]){
    --rd-bg:#F5F6F7; --rd-s1:#FFFFFF; --rd-s2:#EEF0F2; --rd-sunk:#ECEEF1;
    --rd-line:#E1E4E8; --rd-line-strong:#C3C9D0;
    --rd-ink-1:#0F1114; --rd-ink-2:#454B54; --rd-ink-3:#5F6670;
    --rd-ok:#146B3B; --rd-warn:#A9480F; --rd-danger:#BE2F28; --rd-info:#1E5BBF;
    --rd-accent:#E5AC3A; --rd-accent-ink:#1B1304; --rd-accent-text:#7F5300; --rd-accent-ring:#A87310;
    --rd-hover:rgba(15,17,20,.04); --rd-press:rgba(15,17,20,.07);
    --rd-bar-bg:rgba(245,246,247,.86);
    --rd-scrim:rgba(15,17,20,.32);
    --rd-shadow-1:0 1px 2px rgba(16,20,28,.06), 0 4px 12px -6px rgba(16,20,28,.12);
    --rd-shadow-2:0 8px 24px -8px rgba(16,20,28,.16), 0 2px 6px rgba(16,20,28,.06);
    --rd-shadow-3:0 24px 64px -16px rgba(16,20,28,.24), 0 4px 12px rgba(16,20,28,.08);
    --rd-scheme:light;
  }
}
html.rd[data-rd-theme="light"]{
  --rd-bg:#F5F6F7; --rd-s1:#FFFFFF; --rd-s2:#EEF0F2; --rd-sunk:#ECEEF1;
  --rd-line:#E1E4E8; --rd-line-strong:#C3C9D0;
  --rd-ink-1:#0F1114; --rd-ink-2:#454B54; --rd-ink-3:#5F6670;
  --rd-ok:#146B3B; --rd-warn:#A9480F; --rd-danger:#BE2F28; --rd-info:#1E5BBF;
  --rd-accent:#E5AC3A; --rd-accent-ink:#1B1304; --rd-accent-text:#7F5300; --rd-accent-ring:#A87310;
  --rd-hover:rgba(15,17,20,.04); --rd-press:rgba(15,17,20,.07);
  --rd-bar-bg:rgba(245,246,247,.86);
  --rd-scrim:rgba(15,17,20,.32);
  --rd-shadow-1:0 1px 2px rgba(16,20,28,.06), 0 4px 12px -6px rgba(16,20,28,.12);
  --rd-shadow-2:0 8px 24px -8px rgba(16,20,28,.16), 0 2px 6px rgba(16,20,28,.06);
  --rd-shadow-3:0 24px 64px -16px rgba(16,20,28,.24), 0 4px 12px rgba(16,20,28,.08);
  --rd-scheme:light;
}

/* more contrast: the hairlines must be SEEN and the tertiary ink steps up */
@media (prefers-contrast:more){
  html.rd{ --rd-line:#3D434B; --rd-line-strong:#5A626C; --rd-ink-2:#C4C9D0; --rd-ink-3:#A6ACB5; }
}
@media (prefers-contrast:more) and (prefers-color-scheme:light){
  html.rd:not([data-rd-theme$="dark"]){ --rd-line:#A9B0B9; --rd-line-strong:#7E8691; --rd-ink-2:#33383F; --rd-ink-3:#454B54; }
}

/* @theme: Bidbrain ----------------------------------------------------------------------------------
   The brand theme, the default until Stage 6 made it Liquid Glass (Christian, 2026-10-10: "a theme that is the logo"). The Bidbrain.ai
   lockup is ONE colour - deep navy #0F3D5E (measured off the PNG: #0C3C60 / #103C5C / #0C3C5C) on pure
   white - so the whole set is that navy and white: every neutral is a tint or shade of it (OKLCH hue
   245), nothing else is invented. A crisp white canvas whose surfaces separate by navy-tinted hairlines
   and the faintest navy panels; ink a navy-black; the navy itself is THE accent - the primary action
   (white on navy), the focus ring (one step brighter, so it reads apart from a navy button it rings),
   links, citations, the selected row's tint, the logo. Status colours keep their meaning and stay
   clear of the navy: green, amber, red, and a VIOLET info (a blue or teal info would read as the brand).
   Contrast on white (WCAG 2.x; every text role is >= 4.5:1 on every ground it sits on - white, s2,
   sunk, hover, press, the accent tint - and on its own soft tint):
     ink-1 17.9  ink-2 8.6  ink-3 6.0 (5.0 on the accent tint)  accent / accent-text 11.4  white on
     accent 11.4  focus ring 7.1  ok 6.4  warn 6.2  danger 6.4  info 7.2 (each on its own tint >= 4.7).
   Must follow the light blocks above: their selectors match this page too on a light OS, at the same
   specificity, so ORDER decides. */
html.rd[data-rd-theme="brand"]{
  /* the supplied art follows this theme's blue: the Home orb's blue twin and its light */
  --rd-art-glow:#3F86C4; --rd-art-spark:#E4F2FF; --rd-art-home:url("/static/art/art_home_brain_blue.webp?v=1");
  --rd-art-knowledge:url("/static/art/art_knowledge_blue.webp?v=1"); --rd-art-approvals:url("/static/art/art_approvals_blue.webp?v=1");
  --rd-bg:#FFFFFF; --rd-s1:#FFFFFF; --rd-s2:#F1F6FA; --rd-sunk:#F6F9FC;
  --rd-line:#E0E7ED; --rd-line-strong:#C4CFDA;
  --rd-ink-1:#041929; --rd-ink-2:#3C4E5E; --rd-ink-3:#556574;
  --rd-ok:#076E3E; --rd-warn:#905100; --rd-danger:#B32926; --rd-info:#6A3FAB;
  --rd-accent:#0F3D5E; --rd-accent-ink:#FFFFFF; --rd-accent-text:#0F3D5E; --rd-accent-ring:#1A5C8F;
  --rd-accent-hover:#184D74;               /* a navy lifted one step: darker-on-hover is invisible this deep */
  /* the accent's tint (selected rows, the Ask buttons, citations, text selection): an ice blue mixed
     from the glow sky - the navy itself, at any alpha, thins to a dead grey on white (measured: it read
     as a disabled button on the Home's Ask) */
  --rd-accent-soft:color-mix(in oklab, var(--rd-accent-glow) 20%, transparent);
  --rd-hover:rgba(15,61,94,.045); --rd-press:rgba(15,61,94,.08);
  --rd-bar-bg:rgba(255,255,255,.82);
  --rd-scrim:rgba(4,25,41,.36);
  --rd-shadow-1:0 1px 2px rgba(4,25,41,.06), 0 3px 10px -4px rgba(4,25,41,.10);
  --rd-shadow-2:0 12px 32px -12px rgba(4,25,41,.20), 0 2px 6px rgba(4,25,41,.06);
  --rd-shadow-3:0 32px 80px -20px rgba(4,25,41,.28), 0 8px 20px -6px rgba(4,25,41,.10);
  --rd-accent-glow:#67A5D9;                /* a light sky of the navy's own hue: GLOWS ONLY, never text or fill */
  --rd-logo:#0F3D5E;                       /* the lockup in its own colour, exactly */
  --rd-canvas:#EFF4F8;                     /* the sign-in's ground: the white card needs something to sit ON */
  --rd-ink-fixed:#041929;
  --rd-scheme:light;
}
/* more contrast: every hairline over 2:1, the strong rule and the tertiary ink well past their minimums */
@media (prefers-contrast:more){
  html.rd[data-rd-theme="brand"]{ --rd-line:#A0ADB8; --rd-line-strong:#738290; --rd-ink-2:#243848; --rd-ink-3:#3C4E5E;
    --rd-accent-soft:color-mix(in oklab, var(--rd-accent-glow) 30%, transparent); }
}

/* @theme: Bidbrain Dark ------------------------------------------------------------------------------
   The brand's other face (Christian, 2026-10-11: "a Bidbrain dark, like the image"). The Bidbrain.ai lockup
   reversed out: WHITE on a deep ink-navy, measured off that image at #0F1426 (OKLCH .20 / .037 / 271). So
   the ground IS #0F1426, exactly, and every neutral is a step of that same ink-navy (hue 267-271, never a
   grey, never black): the surfaces lift a step or two (s1, s2), the well sinks one (sunk), the hairlines
   are the ground lightened, the ink a cool near-white. The logo is pure white, as in the image.
   The accent is the brand's own blue lifted for a dark ground: the sky the light theme already glows with
   (#67A5D9, hue 245) taken one OKLCH step lighter (.70 -> .73, same hue and chroma) so a filled primary
   has light in it on #0F1426. The primary action is that sky with the GROUND's ink-navy as its text - the
   lockup's own two colours, the navy and the blue - 7.7:1. Not white-on-navy: the accent is one role, read
   by switches, sends, selected tints and citations too, and white there would erase the brand's only hue
   and read every selected state as grey. Hover goes LIGHTER (darker is invisible this deep); the focus
   ring is the palest of the family, so it reads apart from the button it rings. Status colours keep their
   meaning and stay clear of the blue: green, amber, coral red, and a VIOLET info, as on Bidbrain Light.
   Contrast (WCAG 2.x; every text role >= 4.5:1 on every ground it sits on - bg, s1, s2, sunk, hover and
   press over s1/s2, the accent tint over s1/s2 - and each status on its own soft tint):
     ink-1 16.3 on bg (min 10.4)  ink-2 10.3 (min 6.6)  ink-3 7.1 (min 4.7, on the accent tint over s2)
     accent-text 9.9 (min 6.3)  accent as text 7.7 (min 4.9)  navy ink on the accent 7.7, on its hover 9.4
     focus ring 11.3 on bg  ok 10.4  warn 10.7  danger 7.3  info 8.8 (each on its own tint >= 4.8)
     the logo, white, 18.3.
   Must follow the light blocks above: on a light OS `:not([data-rd-theme$="dark"])` already keeps them off
   this theme, and ORDER is the second guard (same specificity). */
html.rd[data-rd-theme="brand-dark"]{
  /* the supplied art follows this theme's blue: the Home orb's blue twin and its light */
  --rd-art-glow:#6FAEE3; --rd-art-spark:#E4F2FF; --rd-art-home:url("/static/art/art_home_brain_blue.webp?v=1");
  --rd-art-knowledge:url("/static/art/art_knowledge_blue.webp?v=1"); --rd-art-approvals:url("/static/art/art_approvals_blue.webp?v=1");
  --rd-bg:#0F1426; --rd-s1:#151B2E; --rd-s2:#1B2337; --rd-sunk:#0A0E1D;
  --rd-line:#272E42; --rd-line-strong:#3E475E;
  --rd-ink-1:#EEF2F9; --rd-ink-2:#BAC3D3; --rd-ink-3:#9BA5B8;
  --rd-ok:#63D99B; --rd-warn:#FABA59; --rd-danger:#F97F7A; --rd-info:#C3A6F6;
  --rd-accent:#6FAEE3; --rd-accent-ink:#0F1426; --rd-accent-text:#8AC5F3; --rd-accent-ring:#9ED2F7;
  --rd-accent-hover:#83C0F2;               /* the sky lifted a step: lighter under the pointer, never darker */
  --rd-accent-soft:color-mix(in oklab, var(--rd-accent) 16%, transparent);
  --rd-accent-line:color-mix(in oklab, var(--rd-accent-ring) 45%, transparent);
  --rd-ok-soft:color-mix(in oklab, var(--rd-ok) 16%, transparent);
  --rd-warn-soft:color-mix(in oklab, var(--rd-warn) 16%, transparent);
  --rd-danger-soft:color-mix(in oklab, var(--rd-danger) 16%, transparent);
  --rd-info-soft:color-mix(in oklab, var(--rd-info) 16%, transparent);
  --rd-hatch:color-mix(in oklab, var(--rd-ink-1) 3%, transparent);
  --rd-hover:rgba(196,214,240,.055); --rd-press:rgba(196,214,240,.09);
  --rd-bar-bg:rgba(15,20,38,.82);
  --rd-scrim:rgba(5,8,18,.64);
  --rd-shadow-1:0 1px 2px rgba(3,6,16,.5), 0 4px 12px -6px rgba(3,6,16,.6);
  --rd-shadow-2:0 12px 32px -10px rgba(3,6,16,.72), 0 2px 6px rgba(3,6,16,.4);
  --rd-shadow-3:0 32px 80px -16px rgba(3,6,16,.82), 0 8px 20px -6px rgba(3,6,16,.45);
  --rd-accent-glow:#67A5D9;                /* the brand sky, exactly: GLOWS ONLY, never text or fill */
  --rd-logo:#FFFFFF;                       /* the lockup white, as on the image */
  --rd-canvas:#0F1426;                     /* the sign-in's ground: the image's own ink-navy */
  --rd-ink-fixed:#0A0E1D;
  --rd-scheme:dark;
}
/* more contrast: hairlines past 2:1, the strong rule past 4:1, the quiet inks well past their minimums */
@media (prefers-contrast:more){
  html.rd[data-rd-theme="brand-dark"]{ --rd-line:#515A72; --rd-line-strong:#758099; --rd-ink-2:#CDD5E2; --rd-ink-3:#B6BECE;
    --rd-accent-soft:color-mix(in oklab, var(--rd-accent) 26%, transparent); }
}

/* @theme: Liquid Glass ----------------------------------------------------------------------------------
   Stage 6 (Christian, 2026-10-11), the DEFAULT (docs/redesign/BRIEF-STAGE-6.md). A deep-night palette with
   the brand sky as its light, shared with Midnight Glass - the two differ only in MATERIAL. Here the
   material is Apple's liquid glass: a lens that bends what passes behind the bars and composers (the lens
   block below, Chromium only), a lit rim (four per-side border colours, brightest top-left), a lip of light
   in the shadows, a highlight that follows the pointer (--rd-spec-*, rd_ui.css + rd_glass.js), and a top
   bar that floats over the page (--rd-bar-float / -radius / -border). The glow: three static radial lights
   of the brand sky (#67A5D9) and a cobalt, ONE fixed layer (html.rd::before), never animated. Content
   (cards, tables, panels) is a quiet translucent fill with no blur (--rd-surface); --rd-s1 stays OPAQUE for
   what must never be see-through (<select>, sticky table heads, menus inside a blurred bar).
   Contrast is checked ON GLASS (docs/redesign/directions/src/contrast.mjs, which also fails if a value here
   and in palettes.mjs disagree), against what each fill actually carries (controller ruling R16):
     NORMAL backdrops - the ground, the surfaces s1 and s2, the surface over the ground, and the glow's
       brightest point (#67A5D9 at .42 over #05080F): EVERY text role (ink-1/2/3, accent-text, ok, warn,
       danger, info) reaches 4.5, on the content grounds and on each control fill composited over them,
       through the fill's own backdrop-filter (saturate and brightness add light) and, on data-rd-spec
       elements, under the highlight at its peak.
     the SKY accent #7DB8EA - a filled primary button momentarily scrolled under a bar or a menu: only the
       full-size roles a bar or menu row shows, ink-1, ink-2 and accent-text, reach 4.5 on the fills. ink-3
       and the statuses over the sky are reported, not counted (a 12-14px muted label on a button that is
       passing under the bar for a moment). Not #FFFFFF: neither glass theme has a large white surface, and
       a backdrop blur averages white text toward its dark ground (ruling R12).
     the composers are checked over the sky too: the /ask page's composer floats over the conversation as it
       scrolls (main's Ask page, merged 2026-10-11), so a sky chip or button can pass under it.
     the focus ring reaches 3 on every ground and every fill composite, sky included.
   Lowest ratio per role - on a normal backdrop / over the sky (fills only):
     ink-1 10.7 / 7.6   ink-2 6.3 / 4.5   accent-text 6.7 / 4.8   ink-3 4.56 / (3.3)   ok 6.5 / (4.6)
     warn 6.7 / (4.8)   danger 4.55 / (3.3)   info 5.5 / (3.9)   (on the content grounds alone ink-3 is
     4.7, on the accent tint over s2, and danger 5.0, on its own badge tint over s2)
     text on bar-bg 4.95 / 4.50, ctx-bg 5.8 / 4.6, glass-bg 4.9 / 4.6, composer-bg 4.88 / 4.55, glass-solid 7.2 / 9.5,
       toast-bg 6.5 / 6.2   focus ring 7.8 normal, 5.6 over the sky   navy ink on the primary button 8.4
   LIQUID GLASS IS THE CLEAR ONE (a lens, a light tint); Midnight Glass is the frosted, more opaque one, so
   no fill here is ever more opaque than Midnight's. The fills sit at the lowest alpha each pair allows.
   MOVED from the plan's starting values to pass that check (nothing else moved):
     ink-3        #8E99AE -> #99A4B9   the same OKLCH hue and chroma, lighter (L .681 -> .716). It failed
                                       on the surface over the glow peak (4.45) and on the accent tint over
                                       s2 (4.14). Lifted to the point where danger becomes the weakest text
                                       role: past it a lighter ink-3 buys the fills nothing.
     spec-color   rgba(255,255,255,.14) -> .10   the highlight adds light over the text it sits on; at .14
                                       bar-bg would need .79, glass-bg .82 and composer-bg .82 (at .08:
                                       .72, .72 and .61)
     bar-bg       .62 -> .74, ctx-bg .70 -> .67, glass-bg .66 -> .75 (toast-bg follows it)
                                       each binds on ink-2 over the sky, through the lens (bar, ctx) or the
                                       frosted blur (glass). The bar and the glass-bg carry the highlight on
                                       top and the context bar does not, which is why they sit ~.07 above it
     composer-bg  rgba(255,255,255,.07) -> rgba(10,15,28,.68) -> .75
                                       no alpha of a white tint passes over the glow peak (the light and
                                       the lens already take ink-3 and danger under 4.5); it takes
                                       glass-bg's navy at the lowest alpha that passes. .68 passed while
                                       every composer sat in the page flow; the /ask composer floats over
                                       the conversation, so it now binds on ink-2 and accent-text over the
                                       sky through the lens (under the highlight) like the bar: .75, still
                                       under Midnight's .76
   `node docs/redesign/directions/src/contrast.mjs --fit` prints the lowest passing alpha of each fill and
   the pair that sets it; `--summary` prints the table above. */
html.rd[data-rd-theme="glass-dark"]{
  /* the supplied art follows this theme's blue: the Home orb's blue twin and its light */
  --rd-art-glow:#7DB8EA; --rd-art-spark:#E4F2FF; --rd-art-home:url("/static/art/art_home_brain_blue.webp?v=1");
  --rd-art-knowledge:url("/static/art/art_knowledge_blue.webp?v=1"); --rd-art-approvals:url("/static/art/art_approvals_blue.webp?v=1");
  --rd-bg:#05080F; --rd-s1:#101828; --rd-s2:#162034; --rd-sunk:#03060C;
  --rd-line:rgba(255,255,255,.09); --rd-line-strong:rgba(255,255,255,.18);
  --rd-ink-1:#F4F7FC; --rd-ink-2:#B7C1D3; --rd-ink-3:#99A4B9;
  --rd-ok:#63D99B; --rd-warn:#FABA59; --rd-danger:#F97F7A; --rd-info:#C3A6F6;
  --rd-accent:#7DB8EA; --rd-accent-ink:#05080F; --rd-accent-text:#9CCBF2; --rd-accent-ring:#B5DAF7;
  --rd-accent-hover:#93C6F0;               /* the sky lifted a step: lighter under the pointer, never darker */
  --rd-accent-glow:#67A5D9;                /* the brand sky, exactly: GLOWS ONLY, never text or fill */
  --rd-accent-soft:color-mix(in oklab, var(--rd-accent) 16%, transparent);
  --rd-accent-line:color-mix(in oklab, var(--rd-accent-ring) 45%, transparent);
  --rd-ok-soft:color-mix(in oklab, var(--rd-ok) 16%, transparent);
  --rd-warn-soft:color-mix(in oklab, var(--rd-warn) 16%, transparent);
  --rd-danger-soft:color-mix(in oklab, var(--rd-danger) 16%, transparent);
  --rd-info-soft:color-mix(in oklab, var(--rd-info) 16%, transparent);
  --rd-hatch:color-mix(in oklab, var(--rd-ink-1) 3%, transparent);
  --rd-logo:#FFFFFF;
  --rd-canvas:transparent;                 /* the sign-in's ground: the glow shows through */
  --rd-ink-fixed:#03060C;
  --rd-hover:rgba(196,214,240,.06); --rd-press:rgba(196,214,240,.10);
  --rd-bar-bg:rgba(8,12,24,.74);
  --rd-scrim:rgba(2,4,10,.60);
  /* the shadows carry the lip: a hairline of light on the top edge, then the drop */
  --rd-shadow-1:inset 0 1px 0 rgba(255,255,255,.06), 0 1px 2px rgba(0,0,0,.5), 0 6px 16px -8px rgba(0,0,0,.6);
  --rd-shadow-2:inset 0 1px 0 rgba(255,255,255,.08), 0 14px 36px -12px rgba(0,0,0,.7), 0 2px 6px rgba(0,0,0,.35);
  --rd-shadow-3:inset 0 1px 0 rgba(255,255,255,.10), 0 32px 80px -16px rgba(0,0,0,.8), 0 8px 20px -6px rgba(0,0,0,.45);
  --rd-scheme:dark;
  /* ---- material roles (undefined in every other theme: components fall back to today's value) ---- */
  --rd-ground:transparent;                 /* the page ground, so the glow behind it shows */
  --rd-glow:radial-gradient(50% 42% at 12% -4%, rgba(103,165,217,.42), transparent 72%), radial-gradient(38% 38% at 92% 6%, rgba(80,110,235,.28), transparent 72%), radial-gradient(45% 38% at 62% 96%, rgba(103,165,217,.18), transparent 72%);
  --rd-surface:rgba(22,32,58,.55);         /* content: translucent, never blurred */
  /* a content surface under the pointer: the hover tint LAYERED over the surface, never in place of it (a .06
     tint replacing a .55 fill made a card fade on hover). A background shorthand, read as var(--rd-surface-hover,
     <today's hover>); it follows --rd-surface into the solid tier and the preferences on its own. */
  --rd-surface-hover:linear-gradient(var(--rd-hover),var(--rd-hover)),var(--rd-surface);
  --rd-ctx-bg:rgba(8,12,24,.67);           /* the context bar, under its hatch */
  --rd-toast-bg:var(--rd-glass-bg); --rd-toast-ink:var(--rd-ink-1);
  --rd-bar-blur:blur(24px) saturate(180%); /* frosted; the lens block below swaps in the lens */
  --rd-glass-bg:rgba(10,15,28,.75);        /* floating controls that blur: Tools menu, dialogs, sheets, side panel */
  --rd-float-blur:blur(20px) saturate(190%) brightness(1.06);
  --rd-glass-solid:rgba(14,20,36,.96);     /* menus INSIDE a blurred bar: no backdrop of their own */
  --rd-composer-bg:rgba(10,15,28,.75);
  --rd-composer-blur:blur(16px) saturate(190%);
  /* the rim: top, right, bottom, left - lit from the top left */
  --rd-rim:rgba(255,255,255,.26) rgba(255,255,255,.11) rgba(255,255,255,.07) rgba(255,255,255,.15);
  --rd-rim-strong:rgba(255,255,255,.34) rgba(255,255,255,.16) rgba(255,255,255,.10) rgba(255,255,255,.20);
  --rd-bar-border:var(--rd-bw) solid;      /* floating bars: a border on all four sides */
  --rd-composer-ring:transparent;          /* the Ask page composer: its lit rim replaces the hairline ring */
  /* main's agentic material (the base block's --rd-glass / -strong / -blur, defined for every theme) MAPPED onto
     the roles here, so no surface stacks two systems: its fill is the bar's contrast-checked --rd-bar-bg, its
     strong fill the near-opaque --rd-glass-solid, its blur the floating-control --rd-float-blur. The tiers and
     the preferences follow on their own (they move the roles these point at). */
  --rd-glass:var(--rd-bar-bg); --rd-glass-strong:var(--rd-glass-solid); --rd-glass-blur:var(--rd-float-blur);
  --rd-bar-float:12px;                     /* the bar's inset from the viewport edges (8px on a phone, below) */
  --rd-bar-radius:var(--rd-r-full);        /* single-row bars (Home, portal) */
  --rd-chrome-radius:var(--rd-r-overlay);  /* the staff chrome (bar + context bar) */
  --rd-bar-h-min:48px;                     /* the Home bar once content scrolls under it */
  --rd-btn-rim:rgba(255,255,255,.18) rgba(255,255,255,.09) rgba(255,255,255,.06) rgba(255,255,255,.11);
  --rd-btn-shadow:inset 0 1px 0 rgba(255,255,255,.10);
  --rd-btn-primary-bg:linear-gradient(180deg,#9DCBF2,#6FAEE3);
  --rd-btn-primary-shadow:inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 4px rgba(4,16,31,.18), 0 6px 18px -8px rgba(103,165,217,.6);
  /* the pointer highlight (rd_ui.css, on data-rd-spec): its colour, its size, and where it sits
     (rd_glass.js writes --rd-mx / --rd-my on the element under the pointer) */
  --rd-spec-color:rgba(255,255,255,.10); --rd-spec-size:180px 110px; --rd-mx:50%; --rd-my:0%;
}
/* the LENS: html.rd-lens is set before paint where the engine can draw an SVG filter inside
   backdrop-filter (Chromium). The frame guard's step-downs (rd-tier-frosted, rd-tier-solid) take it away. */
html.rd.rd-lens[data-rd-theme="glass-dark"]:not(.rd-tier-frosted):not(.rd-tier-solid){
  --rd-bar-blur:url(#rdLens) blur(5px) saturate(190%) brightness(1.1);
  --rd-composer-blur:url(#rdLens) blur(4px) saturate(190%) brightness(1.08);
}
/* a phone keeps a smaller inset */
@media (max-width:720px){
  html.rd[data-rd-theme="glass-dark"]{ --rd-bar-float:8px; }
}
/* the highlight's position, REGISTERED so it does not inherit: rd_glass.js writes it on the [data-rd-spec] element
   under the pointer, and unregistered it flowed into every descendant - a Tools menu open inside the bar drew the
   bar's light, and each write restyled the whole bar subtree. An element nobody has written takes the initial
   value, the light's rest spot (the 50% / 0% the glass-dark block states for the page). Undefined anywhere else
   in effect: only the Liquid Glass highlight rule (rd_ui.css) reads them. */
@property --rd-mx{syntax:'<length-percentage>';inherits:false;initial-value:50%}
@property --rd-my{syntax:'<length-percentage>';inherits:false;initial-value:0%}

/* @theme: Midnight Glass --------------------------------------------------------------------------------
   Stage 6: Liquid Glass's palette (above; every colour the same) in FROSTED glass: heavy blur, a faint flat
   rim, no lens, no highlight, no floating bar (those roles stay undefined here, so the bars keep today's
   shape). The same contrast check (the same R16 floors) and the same lowest ratios for the content roles;
   on the fills, lowest on a normal backdrop / over the sky:
     text on bar-bg 6.9 / 7.5, ctx-bg 6.2 / 6.3, glass-bg 6.8 / 7.5, toast-bg 6.8 / 7.5, composer-bg 6.5 / 6.4,
     glass-solid 7.2 / 9.7   focus ring 10.7 / 7.8   navy ink on the primary button 9.5
   THE FROSTED ONE: every fill is a step more opaque than Liquid Glass's (the heavier blur has the whole
   backdrop to hide), so the floors are cleared with room to spare - the lowest alphas that would pass are
   bar-bg .62, ctx-bg .65, glass-bg .63, composer-bg .63 (checked over the sky since the /ask composer floats).
   MOVED from the plan's starting values (nothing else moved): ink-3 #8E99AE -> #99A4B9 (shared, see Liquid
   Glass); bar-bg .72 -> .82, glass-bg .78 -> .83, composer-bg .62 -> .76 (Liquid Glass sits at .74 / .75 /
   .75, and the frosted theme stays a step above it). ctx-bg .78 stays (Liquid Glass .67). */
html.rd[data-rd-theme="midnight-dark"]{
  /* the supplied art follows this theme's blue: the Home orb's blue twin and its light */
  --rd-art-glow:#7DB8EA; --rd-art-spark:#E4F2FF; --rd-art-home:url("/static/art/art_home_brain_blue.webp?v=1");
  --rd-art-knowledge:url("/static/art/art_knowledge_blue.webp?v=1"); --rd-art-approvals:url("/static/art/art_approvals_blue.webp?v=1");
  --rd-bg:#05080F; --rd-s1:#101828; --rd-s2:#162034; --rd-sunk:#03060C;
  --rd-line:rgba(255,255,255,.09); --rd-line-strong:rgba(255,255,255,.18);
  --rd-ink-1:#F4F7FC; --rd-ink-2:#B7C1D3; --rd-ink-3:#99A4B9;
  --rd-ok:#63D99B; --rd-warn:#FABA59; --rd-danger:#F97F7A; --rd-info:#C3A6F6;
  --rd-accent:#7DB8EA; --rd-accent-ink:#05080F; --rd-accent-text:#9CCBF2; --rd-accent-ring:#B5DAF7;
  --rd-accent-hover:#93C6F0;
  --rd-accent-glow:#67A5D9;
  --rd-accent-soft:color-mix(in oklab, var(--rd-accent) 16%, transparent);
  --rd-accent-line:color-mix(in oklab, var(--rd-accent-ring) 45%, transparent);
  --rd-ok-soft:color-mix(in oklab, var(--rd-ok) 16%, transparent);
  --rd-warn-soft:color-mix(in oklab, var(--rd-warn) 16%, transparent);
  --rd-danger-soft:color-mix(in oklab, var(--rd-danger) 16%, transparent);
  --rd-info-soft:color-mix(in oklab, var(--rd-info) 16%, transparent);
  --rd-hatch:color-mix(in oklab, var(--rd-ink-1) 3%, transparent);
  --rd-logo:#FFFFFF;
  --rd-canvas:transparent;
  --rd-ink-fixed:#03060C;
  --rd-hover:rgba(196,214,240,.06); --rd-press:rgba(196,214,240,.10);
  --rd-bar-bg:rgba(10,16,30,.82);
  --rd-scrim:rgba(2,4,10,.60);
  --rd-shadow-1:inset 0 1px 0 rgba(255,255,255,.06), 0 1px 2px rgba(0,0,0,.5), 0 6px 16px -8px rgba(0,0,0,.6);
  --rd-shadow-2:inset 0 1px 0 rgba(255,255,255,.08), 0 14px 36px -12px rgba(0,0,0,.7), 0 2px 6px rgba(0,0,0,.35);
  --rd-shadow-3:inset 0 1px 0 rgba(255,255,255,.10), 0 32px 80px -16px rgba(0,0,0,.8), 0 8px 20px -6px rgba(0,0,0,.45);
  --rd-scheme:dark;
  /* ---- material roles ---- */
  --rd-ground:transparent;
  --rd-glow:radial-gradient(50% 42% at 12% -4%, rgba(103,165,217,.42), transparent 72%), radial-gradient(38% 38% at 92% 6%, rgba(80,110,235,.28), transparent 72%), radial-gradient(45% 38% at 62% 96%, rgba(103,165,217,.18), transparent 72%);
  --rd-surface:rgba(22,32,58,.62);
  --rd-surface-hover:linear-gradient(var(--rd-hover),var(--rd-hover)),var(--rd-surface);
  --rd-ctx-bg:rgba(10,16,30,.78);
  --rd-toast-bg:var(--rd-glass-bg); --rd-toast-ink:var(--rd-ink-1);
  --rd-bar-blur:blur(24px) saturate(170%);
  --rd-glass-bg:rgba(12,18,32,.83);
  --rd-float-blur:blur(28px) saturate(170%);
  --rd-glass-solid:rgba(14,20,36,.97);
  --rd-composer-bg:rgba(12,18,32,.76);
  --rd-composer-blur:blur(24px) saturate(170%);
  /* main's agentic material (the base block's --rd-glass / -strong / -blur, defined for every theme) MAPPED onto
     the roles here, so no surface stacks two systems: its fill is the bar's contrast-checked --rd-bar-bg, its
     strong fill the near-opaque --rd-glass-solid, its blur the floating-control --rd-float-blur. The tiers and
     the preferences follow on their own (they move the roles these point at). */
  --rd-glass:var(--rd-bar-bg); --rd-glass-strong:var(--rd-glass-solid); --rd-glass-blur:var(--rd-float-blur);
  --rd-rim:rgba(255,255,255,.10);
  --rd-rim-strong:rgba(255,255,255,.16);
  --rd-btn-primary-shadow:inset 0 1px 0 rgba(255,255,255,.30);
}

/* the SOLID tier, for both glass themes: the frame guard's second step-down (rd-tier-solid), reduced
   transparency and more contrast. Every blur goes, every fill is opaque, no highlight. The preference
   blocks also list the lens selector, so on a Chromium page they outrank the lens block (same specificity,
   later in the file). */
html.rd.rd-tier-solid[data-rd-theme="glass-dark"],html.rd.rd-tier-solid[data-rd-theme="midnight-dark"]{
  --rd-bar-blur:none; --rd-float-blur:none; --rd-composer-blur:none;
  --rd-bar-bg:var(--rd-bg); --rd-ctx-bg:var(--rd-bg);
  --rd-glass-bg:var(--rd-s1); --rd-composer-bg:var(--rd-s1); --rd-surface:var(--rd-s1); --rd-glass-solid:var(--rd-s1);
  --rd-spec-color:transparent;
}
@media (prefers-reduced-transparency:reduce){
  html.rd[data-rd-theme="glass-dark"],html.rd.rd-lens[data-rd-theme="glass-dark"]:not(.rd-tier-frosted):not(.rd-tier-solid),
  html.rd[data-rd-theme="midnight-dark"]{
    --rd-bar-blur:none; --rd-float-blur:none; --rd-composer-blur:none;
    --rd-bar-bg:var(--rd-bg); --rd-ctx-bg:var(--rd-bg);
    --rd-glass-bg:var(--rd-s1); --rd-composer-bg:var(--rd-s1); --rd-surface:var(--rd-s1); --rd-glass-solid:var(--rd-s1);
    --rd-spec-color:transparent;
  }
}
/* more contrast: solid as above, no glow, every rim a strong line, hairlines past 2:1 and the quiet inks
   stepped up (the base block's more-contrast values never reach a theme block, so a theme sets its own;
   the two inks are Bidbrain Dark's more-contrast inks) */
@media (prefers-contrast:more){
  html.rd[data-rd-theme="glass-dark"],html.rd.rd-lens[data-rd-theme="glass-dark"]:not(.rd-tier-frosted):not(.rd-tier-solid),
  html.rd[data-rd-theme="midnight-dark"]{
    --rd-bar-blur:none; --rd-float-blur:none; --rd-composer-blur:none;
    --rd-bar-bg:var(--rd-bg); --rd-ctx-bg:var(--rd-bg);
    --rd-glass-bg:var(--rd-s1); --rd-composer-bg:var(--rd-s1); --rd-surface:var(--rd-s1); --rd-glass-solid:var(--rd-s1);
    --rd-spec-color:transparent;
    --rd-glow:none;
    --rd-line:rgba(255,255,255,.28); --rd-line-strong:rgba(255,255,255,.44);
    --rd-rim:var(--rd-line-strong); --rd-rim-strong:var(--rd-line-strong); --rd-btn-rim:var(--rd-line-strong);
    --rd-ink-2:#CDD5E2; --rd-ink-3:#B6BECE;
    --rd-accent-soft:color-mix(in oklab, var(--rd-accent) 26%, transparent);
  }
}

/* derived - DECORATION ONLY, never text (a theme block above may refine one; it outranks this block) */
html.rd{
  --rd-accent-soft:color-mix(in oklab, var(--rd-accent) 14%, transparent);
  --rd-accent-line:color-mix(in oklab, var(--rd-accent-ring) 45%, transparent);
  --rd-ok-soft:color-mix(in oklab, var(--rd-ok) 14%, transparent);
  --rd-warn-soft:color-mix(in oklab, var(--rd-warn) 14%, transparent);
  --rd-danger-soft:color-mix(in oklab, var(--rd-danger) 14%, transparent);
  --rd-info-soft:color-mix(in oklab, var(--rd-info) 14%, transparent);
  --rd-hatch:color-mix(in oklab, var(--rd-ink-1) 3%, transparent);
  /* the primary action under the pointer, the colour every decorative accent GLOW is mixed from (the
     Home hero, the page-head and cursor lights), and the logo's ink. Light and Dark keep exactly what
     the rules used to compute inline; Bidbrain sets its own (above). */
  --rd-accent-hover:color-mix(in oklab, var(--rd-accent) 88%, var(--rd-ink-1));
  --rd-accent-glow:var(--rd-accent);
  --rd-logo:var(--rd-ink-1);
  /* the ground under a page's ONE floating surface (the sign-in card): the page ground on Light and Dark */
  --rd-canvas:var(--rd-bg);

  /* ---- the agentic layer (Ask + Assistant, 2026-10-11) ---------------------------------------
     A translucent MATERIAL for the surfaces that float over content (the composer, the run card),
     the one colour that means "the agent did this" (its mark, a running step, citations, skills),
     and a critically damped spring curve (damping 1.0, response ~0.4s) for panels and arrivals.
     All derived, so every theme gets them for free. */
  --rd-glass:color-mix(in oklab, var(--rd-s1) 80%, transparent);
  --rd-glass-strong:color-mix(in oklab, var(--rd-s1) 92%, transparent);
  --rd-glass-edge:color-mix(in oklab, var(--rd-ink-1) 9%, transparent);
  --rd-glass-blur:blur(20px) saturate(160%);
  --rd-agent:var(--rd-accent-text);
  --rd-agent-soft:var(--rd-accent-soft);
  --rd-agent-line:var(--rd-accent-line);
  --rd-agent-glow:color-mix(in oklab, var(--rd-accent-glow) 10%, transparent);
  --rd-ease-spring:linear(0, .2178 2.1%, .6122 6.6%, .8384 11.3%, .9304 15.6%, .9724 20.4%, .9906 26.3%, .9978 33.6%, 1);
  --rd-dur-spring:420ms;
}
@media (prefers-reduced-transparency:reduce){
  html.rd{ --rd-glass:var(--rd-s1); --rd-glass-strong:var(--rd-s1); --rd-glass-blur:none; }
}

/* @brand: Extrablack ---------------------------------------------------------------------------
   Stage 5 (2026-10-10). The EXTERNAL tenant's own sign-in, templates/extrablack_login.html, which
   carries data-rd-brand="extrablack" (and data-rd-theme="dark": it is always dark). Their brand, not
   ours: black field, warm-white grotesque type, a cream primary, amber focus and glow, halftone dots,
   tracked mono words. Grounds, ink, cream and amber are the same values as main.AGENCY_THEMES
   ["extrablack"] (the portal maps those onto the roles too); the field colours are the approved
   concept mock's. Read only by static/rd_login_extrablack.css. No other page sets the attribute.
   Status colours (ok / warn / danger) are deliberately not re-pointed: they carry meaning. */
html.rd[data-rd-brand="extrablack"]{
  --rd-bg:#060606; --rd-sunk:#0a0908; --rd-s1:#0e0d0c; --rd-s2:#131110;
  --rd-line:rgba(255,255,255,.08); --rd-line-strong:rgba(255,255,255,.16);
  --rd-ink-1:#f5f2ec; --rd-ink-2:rgba(245,242,236,.62); --rd-ink-3:rgba(245,242,236,.46);
  /* the primary action is cream (dark ink on it); focus, caret and glow are amber */
  --rd-accent:#fff6ea; --rd-accent-ink:#0a0a0a; --rd-accent-text:#ffa02e; --rd-accent-ring:#ffa02e;
  --rd-hover:rgba(255,255,255,.05); --rd-press:rgba(255,255,255,.08);
  --rd-scheme:dark;
  /* their grotesque, and no web fonts: this page makes zero external requests */
  --rd-font-sans:"Helvetica Neue", Helvetica, -apple-system, "Segoe UI", Arial, sans-serif;
  --rd-font-mono:ui-monospace, "SF Mono", "Cascadia Code", Consolas, "Liberation Mono", monospace;
  /* the brand's wide-tracked mono words (the services rail, "Powered by Bidbrain"). Brand-only:
     the house rule (--rd-tr-caps) stays for everything we own */
  --rd-tr-xb-wide:.32em;
  /* the field */
  --rd-xb-amber:#ffa02e;
  --rd-xb-glow-1:rgba(255,150,40,.30); --rd-xb-glow-2:rgba(200,70,10,.20); --rd-xb-glow-3:rgba(120,35,5,.14);
  --rd-xb-dot:rgba(255,180,80,.55);
  --rd-xb-word:rgba(245,242,236,.14);       /* the services rail: present, never read first */
  /* "Powered by Bidbrain": .36 -> .56 (Christian, 2026-10-10): 4.5:1 or better on the ground behind
     it (measured ~5.4:1 over the glow, 5.9:1 on --rd-bg), still a step under --rd-ink-2 */
  --rd-xb-sign:rgba(245,242,236,.56);
  --rd-xb-mask:#000;                        /* alpha only, for mask-image */
  /* the card: a dark material over the glow, a hairline of light on its top edge */
  --rd-xb-card:rgba(14,13,12,.80);
  --rd-xb-edge:rgba(255,255,255,.06);
  --rd-xb-shadow-card:0 30px 80px rgba(0,0,0,.55), 0 0 60px rgba(255,120,20,.06);
  --rd-xb-glow-btn:0 10px 30px -12px rgba(255,140,30,.55), 0 0 24px rgba(255,140,30,.22);
}
@media (prefers-contrast:more){
  html.rd[data-rd-brand="extrablack"]{
    --rd-line:rgba(255,255,255,.24); --rd-line-strong:rgba(255,255,255,.44);
    --rd-ink-2:rgba(245,242,236,.82); --rd-ink-3:rgba(245,242,236,.68);
    --rd-xb-card:#0e0d0c; --rd-xb-sign:rgba(245,242,236,.68);
  }
}

/* @brand: Microsoft sign-in ----------------------------------------------------------------------
   Stage 5 (Christian, 2026-10-10): the "Sign in with Microsoft" button on templates/login.html is
   Microsoft's LIGHT button on both themes, so it sits beside Google's (always light) as a matching
   pair. Values from Microsoft's sign-in branding guidance; hover/press are a step darker. */
html.rd{
  --rd-ms-bg:#FFFFFF; --rd-ms-line:#8C8C8C; --rd-ms-ink:#5E5E5E;
  --rd-ms-hover:#F3F3F3; --rd-ms-press:#E6E6E6;
}

/* @print: the two glass themes -----------------------------------------------------------------------------
   Printing drops backgrounds (Chrome's default), so the glass themes' near-white ink would land on white paper.
   On paper both glass themes take Bidbrain Light's palette (the values below are that block's, verbatim): navy ink
   on white, solid fills, no glow, no blur, no highlight, no floating bar - the material roles that fall back to
   today's shape are reset to `initial` (undefined), so every var(--rd-<role>, <today>) computes today's value.
   Scoped to the two glass themes only: the four other themes print exactly as they did (D4). Every selector the
   glass blocks above use is listed, so this outranks the lens, tier and preference blocks by order. */
@media print{
  html.rd[data-rd-theme="glass-dark"],html.rd[data-rd-theme="midnight-dark"],
  html.rd.rd-lens[data-rd-theme="glass-dark"]:not(.rd-tier-frosted):not(.rd-tier-solid),
  html.rd.rd-tier-solid[data-rd-theme="glass-dark"],html.rd.rd-tier-solid[data-rd-theme="midnight-dark"]{
    --rd-bg:#FFFFFF; --rd-s1:#FFFFFF; --rd-s2:#F1F6FA; --rd-sunk:#F6F9FC;
    --rd-line:#E0E7ED; --rd-line-strong:#C4CFDA;
    --rd-ink-1:#041929; --rd-ink-2:#3C4E5E; --rd-ink-3:#556574;
    --rd-ok:#076E3E; --rd-warn:#905100; --rd-danger:#B32926; --rd-info:#6A3FAB;
    --rd-accent:#0F3D5E; --rd-accent-ink:#FFFFFF; --rd-accent-text:#0F3D5E; --rd-accent-ring:#1A5C8F;
    --rd-accent-hover:#184D74; --rd-accent-glow:#67A5D9;
    --rd-accent-soft:color-mix(in oklab, var(--rd-accent-glow) 20%, transparent);
    --rd-hover:rgba(15,61,94,.045); --rd-press:rgba(15,61,94,.08);
    --rd-bar-bg:rgba(255,255,255,.82);
    --rd-scrim:rgba(4,25,41,.36);
    --rd-shadow-1:0 1px 2px rgba(4,25,41,.06), 0 3px 10px -4px rgba(4,25,41,.10);
    --rd-shadow-2:0 12px 32px -12px rgba(4,25,41,.20), 0 2px 6px rgba(4,25,41,.06);
    --rd-shadow-3:0 32px 80px -20px rgba(4,25,41,.28), 0 8px 20px -6px rgba(4,25,41,.10);
    --rd-logo:#0F3D5E; --rd-canvas:#FFFFFF; --rd-ink-fixed:#041929;
    --rd-scheme:light;
    /* the material: no light, no blur, solid fills */
    --rd-glow:none; --rd-ground:var(--rd-bg);
    --rd-bar-blur:none; --rd-float-blur:none; --rd-composer-blur:none;
    --rd-surface:var(--rd-s1); --rd-surface-hover:var(--rd-s1); --rd-ctx-bg:var(--rd-bg);
    --rd-glass-bg:var(--rd-s1); --rd-glass-solid:var(--rd-s1); --rd-composer-bg:var(--rd-s1);
    --rd-toast-bg:var(--rd-s1); --rd-toast-ink:var(--rd-ink-1);
    --rd-spec-color:transparent;
    /* the shape: today's, by undefining the roles (rims to the hairlines, the bar back to full width and square) */
    --rd-rim:initial; --rd-rim-strong:initial; --rd-btn-rim:initial; --rd-btn-shadow:initial;
    --rd-btn-primary-bg:initial; --rd-btn-primary-shadow:initial;
    --rd-bar-border:initial; --rd-bar-float:initial; --rd-bar-radius:initial; --rd-chrome-radius:initial; --rd-bar-h-min:initial;
    --rd-composer-ring:initial;
  }
}

/* @brand: 100% Digital ------------------------------------------------------------------------
   2026-10-19 (Ian: "rebrand this as 100% Digital powered by Bidbrain - use 100% Digital logo and colors"). Every
   page a 100% Digital session sees - its agency login, its BidBrain users, and staff viewing as one - carries
   data-rd-brand="x100-digital" on <html> (templates/_rd_head.html, from main.rd_brand). Their green (#4ABD73, the
   logo's own colour) replaces our accent in every theme; the sidebar lockup is their logo over "Powered by
   Bidbrain" (_rd_shell.html). Grounds, ink and the status colours stay the theme's: only the brand moves.
   Dark themes: the logo green, lifted for text. Light themes: a deeper green so text and white-on-fill pass AA. */
html.rd[data-rd-brand="x100-digital"]{
  --rd-accent:#4ABD73; --rd-accent-ink:#04140A; --rd-accent-text:#6FD394; --rd-accent-ring:#8BE0A9;
  --rd-accent-hover:#5ECB86; --rd-accent-glow:#4ABD73;
  --rd-accent-soft:color-mix(in oklab, #4ABD73 16%, transparent);
  --rd-accent-line:color-mix(in oklab, #8BE0A9 45%, transparent);
  --rd-btn-primary-bg:linear-gradient(180deg,#6FD394,#4ABD73);
  --rd-agent:#6FD394; --rd-agent-soft:color-mix(in oklab, #4ABD73 16%, transparent);
}
html.rd[data-rd-brand="x100-digital"]:is([data-rd-theme="light"],[data-rd-theme="brand"]){
  --rd-accent:#1F8A4C; --rd-accent-ink:#FFFFFF; --rd-accent-text:#136B38; --rd-accent-ring:#1F8A4C;
  --rd-accent-hover:#18753F; --rd-accent-glow:#4ABD73;
  --rd-accent-soft:color-mix(in oklab, #4ABD73 18%, transparent);
  --rd-accent-line:color-mix(in oklab, #1F8A4C 40%, transparent);
  --rd-btn-primary-bg:#1F8A4C;
  --rd-agent:#136B38; --rd-agent-soft:color-mix(in oklab, #4ABD73 18%, transparent);
}
/* 100% Digital in the glass themes: the page's light is their green, not our sky (none where transparency is reduced) */
@media (prefers-reduced-transparency:no-preference){
  html.rd[data-rd-brand="x100-digital"]:is([data-rd-theme="glass-dark"],[data-rd-theme="midnight-dark"]){
    --rd-glow:radial-gradient(50% 42% at 12% -4%, rgba(74,189,115,.36), transparent 72%), radial-gradient(38% 38% at 92% 6%, rgba(31,138,76,.26), transparent 72%), radial-gradient(45% 38% at 62% 96%, rgba(74,189,115,.16), transparent 72%);
  }
}
/* 100% Digital's animated Home lockup (templates/_home_art.html): its green tile, white words, the same in every theme */
html.rd[data-rd-brand="x100-digital"]{
  --rd-x100-green:#4ABD73; --rd-x100-deep:#1F8A4C; --rd-x100-white:#FFFFFF; --rd-x100-mist:rgba(255,255,255,.78);
  --rd-x100-shine:rgba(255,255,255,.34); --rd-x100-clear:rgba(255,255,255,0); --rd-x100-shadow:rgba(10,60,30,.45);
}