/* Procurement board rules are scoped under .xwerp-proc (public/theme/xwerp/procurement.css). Imported here because this worker cannot edit vite.config.ts. */
@import url("/theme/xwerp/procurement.css");
/* public/theme/xwerp/cortex.css - the Cortex palette (prototype/tokens.json) as XWUI theme tokens, then the family
   --xwerp-* names. Loaded last of the theme layer (vite.config.ts), so these values sit over XWUI's and flow.css's.
   ============================================
   WHY a token layer and not page CSS: every page, kit chrome and module web reads XWUI tokens first (--bg-*, --text-*,
   --accent-*, --border-*, --radius-*, --shadow-*) and the family names second (src/kit/styles/tokens.css). Setting the
   prototype's values HERE, once per theme, re-skins all of them at the root; no page holds a colour or a length.

   Source map (prototype name -> XWUI token -> family token), dark is the default as in the pack (:root), light is
   html[data-theme="light"]:
     bg      -> --bg-app, --bg-primary            bg2   -> --bg-secondary      bg3 -> --bg-tertiary
     solid   -> --bg-card, --bg-menu               solid2 -> --bg-elevated
     panel2  -> --bg-hover, --control-bg           panel3 -> --bg-active, --bg-muted
     line    -> --border-subtle, --border-color    line2 -> --border-medium     line3 -> --border-strong
     tx      -> --text-primary                     tx2   -> --text-secondary    tx3 -> --text-tertiary
     acc     -> --accent-primary                   acc-tx -> --xwerp-accent-text  acc-soft -> --xwerp-accent-tint
     ok/warn/bad/info and their -bg              -> --xwerp-ok/warn/bad/info and --xwerp-*-tint
     brand, pearl, pearl-soft gradients          -> --xwerp-grad-accent, --xwerp-grad-pearl, --xwerp-grad-pearl-soft
     glass                                       -> --xwerp-kit-glass       e1/e2/e3 -> --shadow-sm/--shadow-md/--shadow-lg
     r/r2/r3                                     -> --radius-container, --radius-button and --radius-input, --radius-full
     f-d/f-u/f-m                                 -> --xwerp-font-display-latin, --xwerp-font-latin, --xwerp-font-mono
   The board's fonts are Sora (display), Geist (text), Geist Mono (codes), IBM Plex Sans Arabic (Arabic text); index.html
   loads exactly these faces. The gate frame's lengths derive from --spacing-unit in src/kit/ui/chrome/gate/gate.css.
   ============================================ */

:root[data-theme] {
    --xwerp-font-latin: "Geist", "IBM Plex Sans Arabic", system-ui, "Segoe UI", sans-serif;
    --xwerp-font-arabic: "IBM Plex Sans Arabic", "Geist", system-ui, sans-serif;
    --xwerp-font-display-latin: "Sora", "Noto Naskh Arabic", system-ui, sans-serif;
    --xwerp-font-display-arabic: "IBM Plex Sans Arabic", "Sora", system-ui, sans-serif;
    --xwerp-font-mono: "Geist Mono", ui-monospace, Consolas, monospace;

    /* the board's type scale: 14 px body (.xw), 12.5 px small (.s), 11.5 px extra small (.xs) */
    --font-size-base: 14px;
    --font-size-sm: 12.5px;
    --font-size-xs: 11.5px;

    --radius-container: 16px;
    --radius-card: 16px;
    --radius-button: 11px;
    --radius-input: 11px;
    --radius-full: 999px;
    --xwerp-r-card: 16px;
    --xwerp-r-md: 11px;


    --xwerp-grad-accent: linear-gradient(135deg, #6d7cff 0%, #9a7bff 55%, #c27bff 100%);
    --xwerp-grad-pearl: linear-gradient(115deg, #7b8cff 0%, #c08bff 40%, #ff8fb1 75%, #ffc27a 100%);
    --xwerp-grad-pearl-soft: linear-gradient(115deg, rgba(123, 140, 255, 0.16), rgba(192, 139, 255, 0.12) 40%, rgba(255, 143, 177, 0.1) 75%, rgba(255, 194, 122, 0.08));
    --xwerp-mark-glow: 0 6px 20px -6px rgba(123, 140, 255, 0.8);
    --xwerp-gate-ground: radial-gradient(60rem 30rem at 85% -10%, rgba(123, 140, 255, 0.1), transparent 60%), var(--bg-app);
    --xwerp-glow: 0 8px 24px -8px rgba(123, 140, 255, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    --xwerp-nafath: #14805a;
    --xwerp-on-brand: #ffffff;
    --xwerp-tracking-eyebrow: 0.12em;
    --xwerp-vault-ok: #5fe0b0;
    --xwerp-vault-warn: #ffbe5c;
    --xwerp-vault-bad: #ff6b8a;
    --xwerp-vault-white: #ffffff;
    --xwerp-vault-black: #000000;
    --xwerp-vault-hole-mid: #c9b8ff;
    --xwerp-vault-hole-edge: #6d7cff;
}

/* -- dark, the default ------------------------------------------------------ */

:root[data-theme="dark"],
:root[data-theme="dark"][data-accent] {
    --bg-app: #07080d;
    --bg-primary: #07080d;
    --bg-secondary: #0c0e16;
    --bg-tertiary: #0a0c13;
    --bg-card: #12151f;
    --bg-menu: #12151f;
    --bg-elevated: #171b27;
    --bg-hover: rgba(255, 255, 255, 0.06);
    --bg-active: rgba(255, 255, 255, 0.1);
    --bg-muted: rgba(255, 255, 255, 0.1);
    --bg-input: rgba(0, 0, 0, 0.25);
    --control-bg: rgba(255, 255, 255, 0.06);
    --border-subtle: rgba(255, 255, 255, 0.075);
    --border-color: rgba(255, 255, 255, 0.13);
    --border-light: rgba(255, 255, 255, 0.075);
    --border-medium: rgba(255, 255, 255, 0.13);
    --border-strong: rgba(255, 255, 255, 0.22);
    --text-primary: #eef0f7;
    --text-secondary: #a6acc2;
    --text-tertiary: #757c93;
    --text-inverse: #0b0d14;
    /* WHY ink and not white on the dark accent: white on #7b8cff is 2.9:1 (axe serious on every primary button); the
       board's own ink-tx (#0b0d14) reads 7:1. A measured, recorded delta from the board's white label. */
    --text-on-accent: #0b0d14;
    --role-primary-fg: #0b0d14;
    --accent-primary: #7b8cff;
    --accent-secondary: #a97bff;
    --accent-warning: #ffbe5c;
    --shadow-sm: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 28px -12px rgba(0, 0, 0, 0.7);
    --shadow-lg: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 30px 70px -24px rgba(0, 0, 0, 0.85);

    --xwerp-accent-text: #a9b4ff;
    --xwerp-accent-tint: rgba(123, 140, 255, 0.14);
    --xwerp-kit-glass: rgba(14, 17, 26, 0.82);
    --xwerp-panel: rgba(255, 255, 255, 0.035);
    --xwerp-ok: #5fe0b0;
    --xwerp-warn: #ffbe5c;
    --xwerp-bad: #ff6b8a;
    --xwerp-info: #5cc8ff;
    --xwerp-ok-tint: rgba(95, 224, 176, 0.12);
    --xwerp-warn-tint: rgba(255, 190, 92, 0.13);
    --xwerp-bad-tint: rgba(255, 107, 138, 0.13);
    --xwerp-info-tint: rgba(92, 200, 255, 0.12);
    --xwerp-ai-tint: rgba(192, 139, 255, 0.14);
    --xwerp-iris: #c08bff;
    --xwerp-stage-wash: radial-gradient(700px 420px at 45% 40%, rgba(109, 124, 255, 0.13), transparent 70%), linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.005));

    /* the sign-in vault (src/pages/signin/vault.ts reads these and shades them) */
    --xwerp-vault-steel: #4a5390;
    --xwerp-vault-steel2: #2c335a;
    --xwerp-vault-wall: #121729;
    --xwerp-vault-wall-side: #141a30;
    --xwerp-vault-wall-top: #1b2240;
    --xwerp-vault-frame: #2b3256;
    --xwerp-vault-lug: #9aa4d8;
    --xwerp-vault-lamp-off: #151a2e;
    --xwerp-vault-wheel: #c9cfee;
    --xwerp-vault-ground: #2b3478;
    --xwerp-vault-beam: #c9d0ff;
    --xwerp-vault-pill: #131726;
    --xwerp-vault-ink: #eef0f7;
    --xwerp-vault-idle: #8f9bff;
    --xwerp-vault-edge: rgba(255, 255, 255, 0.12);
    --xwerp-vault-lead: rgba(255, 255, 255, 0.3);
    --xwerp-vault-line: rgba(10, 12, 24, 0.55);
    --xwerp-vault-hi: rgba(255, 255, 255, 0.14);
}

/* -- light ("Daylight") ------------------------------------------------------ */

:root[data-theme="light"],
:root[data-theme="light"][data-accent] {
    --bg-app: #f3f4f8;
    --bg-primary: #f3f4f8;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f8f9fc;
    --bg-card: #ffffff;
    --bg-menu: #ffffff;
    --bg-elevated: #f5f6fa;
    --bg-hover: #f5f6fa;
    --bg-active: #eceef5;
    --bg-muted: #eceef5;
    --bg-input: #ffffff;
    --control-bg: #f5f6fa;
    --border-subtle: rgba(16, 20, 40, 0.08);
    --border-color: rgba(16, 20, 40, 0.14);
    --border-light: rgba(16, 20, 40, 0.08);
    --border-medium: rgba(16, 20, 40, 0.14);
    --border-strong: rgba(16, 20, 40, 0.24);
    --text-primary: #121524;
    --text-secondary: #545a70;
    --text-tertiary: #80869a;
    --text-inverse: #ffffff;
    --text-on-accent: #ffffff;
    --accent-primary: #4f5df0;
    --accent-secondary: #7a4ff0;
    --accent-warning: #a96200;
    --shadow-sm: 0 1px 2px rgba(16, 20, 40, 0.06);
    --shadow-md: 0 8px 22px -10px rgba(16, 20, 40, 0.18);
    --shadow-lg: 0 26px 60px -22px rgba(16, 20, 40, 0.3);

    --xwerp-accent-text: #3c49d6;
    --xwerp-accent-tint: rgba(79, 93, 240, 0.1);
    --xwerp-kit-glass: rgba(255, 255, 255, 0.86);
    --xwerp-panel: #ffffff;
    --xwerp-ok: #14805a;
    --xwerp-warn: #a96200;
    --xwerp-bad: #d0304f;
    --xwerp-info: #1d7fc0;
    --xwerp-ok-tint: color-mix(in srgb, #14805a 12%, transparent);
    --xwerp-warn-tint: color-mix(in srgb, #a96200 12%, transparent);
    --xwerp-bad-tint: color-mix(in srgb, #d0304f 10%, transparent);
    --xwerp-info-tint: color-mix(in srgb, #1d7fc0 10%, transparent);
    --xwerp-ai-tint: color-mix(in srgb, #7a4ff0 10%, transparent);
    --xwerp-iris: #7a4ff0;
    --xwerp-stage-wash: radial-gradient(700px 420px at 45% 40%, rgba(79, 93, 240, 0.1), transparent 70%), #ffffff;

    --xwerp-vault-steel: #c3c9e4;
    --xwerp-vault-steel2: #a3abcb;
    --xwerp-vault-wall: #e7eaf5;
    --xwerp-vault-wall-side: #dfe3f1;
    --xwerp-vault-wall-top: #f2f4fa;
    --xwerp-vault-frame: #cfd5ea;
    --xwerp-vault-lug: #e8ebf7;
    --xwerp-vault-lamp-off: #8e96b8;
    --xwerp-vault-wheel: #5a6390;
    --xwerp-vault-ground: #d9def2;
    --xwerp-vault-beam: #ffffff;
    --xwerp-vault-pill: #ffffff;
    --xwerp-vault-ink: #121524;
    --xwerp-vault-idle: #4f5df0;
    --xwerp-vault-edge: rgba(20, 22, 28, 0.12);
    --xwerp-vault-lead: rgba(20, 22, 28, 0.3);
    --xwerp-vault-line: rgba(60, 70, 110, 0.35);
    --xwerp-vault-hi: rgba(255, 255, 255, 0.7);
}

html[lang="ar"] {
    --xwerp-font-ui: var(--xwerp-font-arabic);
    --xwerp-font-display: var(--xwerp-font-display-arabic);
}

html,
body {
    background: var(--bg-app);
    color: var(--text-primary);
    font-family: var(--xwerp-font-ui);
}

/* -- the sign-in page (src/pages/signin, /pages/xwerp/auth/platform/iam/sign-in) ------------------------------------
 * The sign-in page's own look over the shared gate frame (src/kit/ui/chrome/gate), measured from
 * prototype/screens/auth.html at 1440 x 900 and checked pixel by pixel against prototype/screens/auth.png. Every rule is
 * scoped to .xwerp-auth (the class signin.ts puts on the frame root) so the onboarding gate keeps the kit's look.
 * Lengths are multiples of --spacing-unit (4 px); colours, radii, shadows and type read XWUI tokens and the --xwerp-*
 * family set above. No selector names an XWUI class: a component is themed through the
 * custom properties it reads (sizes, radii, inks, surfaces), and the paint a CDN button cannot take as a prop today
 * sits on an owned wrapper (GAP comments in signin.ts name the one-line preset call that replaces each wrapper).
 *
 * WHY the display: block / flex lines on text: XWUITypography mounts its element inside a block wrapper, so an inline
 * label sits on its parent's 16 px line strut and every row grew 4 to 5 px over the board (the card 30 px, the facts
 * strip 11 px, each step pill 1 px). A block text element sizes its wrapper to its own line box, as on the board.
 */

.xwerp-auth {
  /* the board's text stack in both languages (--f-u: Geist, then IBM Plex Sans Arabic) for every XWUI component */
  --font-family-international: var(--xwerp-font-latin);
  --font-family: var(--xwerp-font-latin);
  --font-family-base: var(--xwerp-font-latin);
  --font-button-family: var(--xwerp-font-latin);
  --font-input-family: var(--xwerp-font-latin);
  --font-caption-family: var(--xwerp-font-latin);
  --radius-button: var(--xwerp-r-md);
  --radius-input: var(--xwerp-r-md);
}

/* -- top bar (the board's .au-top: 10 px gaps, Sora wordmark, .btn.sm neutral buttons) ----------------------------- */
.xwerp-auth .xwerp-gate-top,
.xwerp-auth .xwerp-gate-logo { gap: calc(var(--spacing-unit) * 2.5); }
.xwerp-auth .xwerp-gate-top {
  /* the board's .btn.sm pads 11 px inside a 1 px border; these buttons draw no border, so the label sits 12 px in */
  --radius-button: calc(var(--spacing-unit) * 2.25);
  --xwui-size-pad-x-sm: calc(var(--spacing-unit) * 3);
  --xwui-size-font-sm: var(--font-size-sm);
  --font-weight-semibold: var(--font-weight-medium, 500);
}
.xwerp-auth .xwerp-gate-mark { border-radius: calc(var(--spacing-unit) * 2.5); }
.xwerp-auth .xwerp-gate-brand {
  font-family: var(--xwerp-font-display-latin);
  font-size: calc(var(--spacing-unit) * 4.5);
  font-weight: var(--font-weight-bold, 700);
  line-height: normal;
}
.xwerp-auth .xwerp-gate-logo {
  --xwui-tag-small-font-size: calc(var(--spacing-unit) * 2.75);
  --xwui-tag-small-pad-y: calc(var(--spacing-unit) * 0.825);
  --radius-tag: calc(var(--spacing-unit) * 1.75);
}
/* the language and theme buttons are outline buttons: their border goes, the ink is the text colour, and the slot
   they mount into carries the board's panel surface and hairline (the board's .btn.sm) */
.xwerp-auth .xwerp-gate-top > :nth-last-child(-n + 2) {
  --border-button-width: 0;
  --role-primary-ink: var(--text-primary);
  border-radius: calc(var(--spacing-unit) * 2.25);
  background: var(--bg-hover);
  outline: var(--xwerp-line-width) solid var(--border-medium, var(--border-color));
  outline-offset: calc(var(--xwerp-line-width) * -1);
}

/* -- body grid ------------------------------------------------------------------------------------------------------ */
.xwerp-auth .xwerp-gate-main { gap: calc(var(--spacing-unit) * 5); }

/* -- facts strip (eyebrow with its brand rule, 11.5 px cards at 1.5 line height, glowing dots) ---------------------- */
.xwerp-auth .xwerp-gate-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-family: var(--xwerp-font-mono);
  font-size: calc(var(--spacing-unit) * 2.75);
  font-weight: var(--font-weight-semibold, 600);
  line-height: normal;
  letter-spacing: var(--xwerp-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.xwerp-auth .xwerp-gate-eyebrow::before {
  content: "";
  flex: none;
  inline-size: calc(var(--spacing-unit) * 3.5);
  block-size: calc(var(--spacing-unit) * 0.5);
  border-radius: calc(var(--spacing-unit) * 0.5);
  background: var(--xwerp-grad-accent);
}
.xwerp-auth[dir="rtl"] .xwerp-gate-eyebrow { font-family: var(--xwerp-font-ui); letter-spacing: 0; text-transform: none; }
/* (0,3,0): gate.css sets .xwerp-gate .xwerp-gate-xs at 1.45, and in dev its style tag lands after this sheet */
.xwerp-auth .xwerp-gate-fact .xwerp-gate-xs { display: block; line-height: 1.5; }
.xwerp-auth .xwerp-gate-fact b.xwerp-gate-xs { font-weight: var(--font-weight-bold, 700); }
.xwerp-auth .xwerp-gate-dot { box-shadow: 0 0 calc(var(--spacing-unit) * 2) color-mix(in oklab, var(--xwerp-gate-tone) 70%, transparent); }

/* -- steps (the board's .au-steps li: 500 12 px, a 10.5 px mono number) --------------------------------------------- */
.xwerp-auth .xwerp-gate-step {
  --font-size-sm: calc(var(--spacing-unit) * 3);
  --font-weight-normal: var(--font-weight-medium, 500);
  font-size: calc(var(--spacing-unit) * 3);
  line-height: normal;
}
.xwerp-auth .xwerp-gate-step-n .xwerp-gate-mono {
  display: block;
  font-size: calc(var(--spacing-unit) * 2.625);
  font-weight: var(--font-weight-semibold, 600);
  line-height: normal;
}

/* -- the card: the board's glass (.glass: kit glass surface, hairline, large shadow, backdrop blur) ----------------- */
.xwerp-auth .xwerp-gate-panel {
  --bg-card: var(--xwerp-kit-glass);
  --border-container-width: var(--xwerp-line-width);
  border-radius: var(--radius-container);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(var(--xwerp-blur-glass)) saturate(1.4);
}

/* -- the sign-in card's rhythm (the board's form: 6 / 16 / 6 / 12 / 6 / 16 / 14 / 10 / 10 px) ---------------------- */
.xwerp-auth .xwerp-auth-form { gap: 0; }
.xwerp-auth .xwerp-auth-form .xwerp-gate-lead { margin-block: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 4); }
.xwerp-auth .xwerp-auth-label {
  display: block;
  margin-block-end: calc(var(--spacing-unit) * 1.5);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium, 500);
  line-height: normal;
  color: var(--text-secondary);
}
.xwerp-auth .xwerp-auth-email,
.xwerp-auth .xwerp-auth-pw {
  --xwui-size-pad-x-md: calc(var(--spacing-unit) * 3);
  --border-input-width: var(--xwerp-line-width);
  --border-input-color: var(--border-medium, var(--border-color));
}
.xwerp-auth .xwerp-auth-pwhead { flex-wrap: nowrap; align-items: flex-start; gap: 0; margin-block-start: calc(var(--spacing-unit) * 3); }
.xwerp-auth .xwerp-auth-pwhead > :first-child { flex: 1 1 auto; }
/* the board's links (.au-link): text-only, 500 12.5 px, no padding, the line's own height */
.xwerp-auth .xwerp-auth-pwhead,
.xwerp-auth .xwerp-auth-demo {
  --xwui-button-height-sm: auto;
  --xwui-size-pad-y-sm: 0;
  --xwui-size-font-sm: var(--font-size-sm);
  --xwui-control-line-height: normal;
  --spacing-xs: 0;
  --font-weight-semibold: var(--font-weight-medium, 500);
  --xwui-button-link-ink: var(--xwerp-accent-text);
  font-size: var(--font-size-sm);
  line-height: normal;
}
.xwerp-auth .xwerp-auth-form > [role="alert"],
.xwerp-auth .xwerp-auth-form > .xwerp-gate-fails { margin-block-start: calc(var(--spacing-unit) * 3); }

/* the accent button: the board's .btn.p (the brand gradient, its glow and inner top light, brighter on hover) */
.xwerp-auth .xwerp-auth-cta {
  --xwui-button-ghost-fg: var(--role-primary-fg, var(--text-on-accent));
  --xwui-button-ghost-fg-hover: var(--role-primary-fg, var(--text-on-accent));
  --xwui-size-font-lg: calc(var(--spacing-unit) * 3.75);
  --xwui-size-pad-x-lg: calc(var(--spacing-unit) * 5.5);
  --bg-hover: transparent;
  --bg-active: transparent;
  --font-weight-semibold: var(--font-weight-medium, 500);
  margin-block-start: calc(var(--spacing-unit) * 4);
  border-radius: var(--radius-button);
  background: var(--xwerp-grad-accent);
  box-shadow: var(--xwerp-glow);
  transition: filter var(--motion-duration-fast, 150ms) var(--motion-easing-standard, ease);
}
.xwerp-auth .xwerp-auth-cta:hover { filter: brightness(1.08); }
/* WHY ink and not the board's white label: white on the gradient's lilac stop is 2.77:1 (WCAG 1.4.3 needs 4.5:1); the
   dark theme's on-accent ink reads 5.5:1 to 6.9:1 across the gradient, the light theme's text colour about the same. */
:root[data-theme="light"] .xwerp-auth .xwerp-auth-cta {
  --xwui-button-ghost-fg: var(--text-primary);
  --xwui-button-ghost-fg-hover: var(--text-primary);
}

.xwerp-auth .xwerp-auth-or { margin-block: calc(var(--spacing-unit) * 3.5) calc(var(--spacing-unit) * 2.5); }
.xwerp-auth .xwerp-auth-or-word { display: block; font-size: calc(var(--spacing-unit) * 3); line-height: 1.5; }

/* the partner buttons: the board's neutral .btn (panel surface, hairline, 13 px label, 10 px side padding) */
.xwerp-auth .xwerp-auth-partner {
  --bg-secondary: var(--bg-hover);
  --xwui-size-pad-x-md: calc(var(--spacing-unit) * 2.5);
  --xwui-size-font-md: calc(var(--spacing-unit) * 3.25);
  --spacing-xs: var(--spacing-sm);
  --font-weight-semibold: var(--font-weight-medium, 500);
  min-width: 0;
  border-radius: var(--radius-button);
  outline: var(--xwerp-line-width) solid var(--border-medium, var(--border-color));
  outline-offset: calc(var(--xwerp-line-width) * -1);
}
.xwerp-auth .xwerp-auth-partner:hover { --bg-hover: var(--bg-active); outline-color: var(--border-strong, var(--border-color)); }
.xwerp-auth .xwerp-auth-naf { display: block; inline-size: calc(var(--spacing-unit) * 5); block-size: calc(var(--spacing-unit) * 5); }
.xwerp-auth .xwerp-auth-ico {
  display: block;
  inline-size: calc(var(--spacing-unit) * 3.5);
  block-size: calc(var(--spacing-unit) * 3.5);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.xwerp-auth .xwerp-auth-naf-tile { fill: var(--xwerp-nafath); }
.xwerp-auth .xwerp-auth-naf-n {
  fill: var(--xwerp-on-brand);
  font-family: var(--xwerp-font-ui);
  font-size: calc(var(--spacing-unit) * 2.75);
  font-weight: var(--font-weight-bold, 700);
}

.xwerp-auth .xwerp-auth-demo { --xwui-button-link-ink: var(--text-tertiary); margin-block-start: calc(var(--spacing-unit) * 2.5); }

/* -- foot (the board's .au-foot: 500 12 px mono; the Preview switch 34 px tall on the input surface) --------------- */
.xwerp-auth .xwerp-gate-mono { font-family: var(--xwerp-font-mono); }
.xwerp-auth .xwerp-gate-foot .xwerp-gate-mono {
  display: block;
  font-size: calc(var(--spacing-unit) * 3);
  font-weight: var(--font-weight-medium, 500);
  line-height: normal;
}
.xwerp-auth .xwerp-gate-preview {
  --bg-secondary: var(--bg-input);
  --bg-primary: var(--bg-active);
  --role-primary-ink: var(--text-primary);
  --accent-primary: var(--text-primary);
  --radius-md: calc(var(--spacing-unit) * 2.5);
  --radius-sm: calc(var(--spacing-unit) * 2);
  font-weight: var(--font-weight-medium, 500);
}
/* the switch's mount root is a flex box of the board's 34 px with the hairline, so the control inside stretches to it
   and its buttons to the board's 28 px (the CDN control has no height token) */
.xwerp-auth .xwerp-gate-preview > :last-child {
  display: flex;
  box-sizing: border-box;
  block-size: calc(var(--spacing-unit) * 8.5);
  border: var(--xwerp-line-width) solid var(--border-subtle, var(--border-color));
  border-radius: var(--xwerp-r-md);
}