/* ==========================================================================
   Rentiqa Design Language "Meridian" (wave 2) - TOKENS, re-themed to the "The handover" identity (graphite / mineral / orange / chalk, f23)
   The ONLY stylesheet allowed to contain hard-coded colour values.
   Light is :root; dark is [data-theme="dark"] (set on <html> and <body>).
   Brand theme is [data-brand] on <html> and <body> (handover | precision | motion | navy | forest, f24/f26/f34; default handover). RTL is [dir="rtl"].
   Every token name from the previous design system is preserved so existing pages restyle automatically.
   ========================================================================== */

/* ---- Self-hosted fonts (OFL; see Docs/design/fonts-licences.md). No CDN. -------------- */
/* Latin: Geist (variable 100-900). Arabic: see "RQ Arabic" below (variable 100-900 / 400-700 range). */
@font-face {
  font-family: "RQ Sans"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../../fonts/geist-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: "RQ Sans"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../../fonts/geist-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Arabic glyphs only: Latin text and digits always render in RQ Sans so numerals stay consistent. */
@font-face { font-family: "RQ Arabic"; font-style: normal; font-weight: 400; font-display: swap; src: url("../../fonts/zain-arabic-400-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "RQ Arabic"; font-style: normal; font-weight: 500; font-display: swap; src: url("../../fonts/zain-arabic-400-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "RQ Arabic"; font-style: normal; font-weight: 600; font-display: swap; src: url("../../fonts/zain-arabic-700-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "RQ Arabic"; font-style: normal; font-weight: 700; font-display: swap; src: url("../../fonts/zain-arabic-700-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
/* Alias: the Syncfusion "tailwind" theme and a few legacy rules hard-code `font-family: Inter`. Mapping that name onto the
   product faces makes every Syncfusion control (inputs, dropdowns, grid, dialogs) inherit Geist + Zain without per-control overrides. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../../fonts/geist-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: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../../fonts/geist-latin-ext-wght-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../../fonts/zain-arabic-400-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../../fonts/zain-arabic-400-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../../fonts/zain-arabic-700-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("../../fonts/zain-arabic-700-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
/* f18: the "Inter" alias must also carry Latin faces at the SAME weights as its Arabic faces (400/500/600/700). Browsers pick the face set by weight first and then
   compose by unicode-range, so a weight-400 Arabic face used to shadow the 100-900 Latin face and every Syncfusion control (font-family: Inter) painted Latin text in the
   browser serif fallback. Same woff2 files, no extra download. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../../fonts/geist-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: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../../fonts/geist-latin-ext-wght-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../../fonts/geist-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: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../../fonts/geist-latin-ext-wght-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../../fonts/geist-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: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../../fonts/geist-latin-ext-wght-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("../../fonts/geist-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: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("../../fonts/geist-latin-ext-wght-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
:root {
  color-scheme: light;

  /* ---- Typography ------------------------------------------------------------ */
  --rq-font: "RQ Sans", "RQ Arabic", "Segoe UI", system-ui, -apple-system, Tahoma, sans-serif;
  --rq-font-mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
  --rq-fs-2xs: 12px;   /* w9_pwa: was 11px (Impeccable tiny-text floor is 12px) */
  --rq-fs-xs: 12px;
  --rq-fs-sm: 13px;
  --rq-fs-base: 14px;
  --rq-fs-md: 15px;
  --rq-fs-lg: 18px;
  --rq-fs-xl: 24px;
  --rq-fs-2xl: 30px;
  --rq-fs-3xl: 40px;
  --rq-lh-tight: 1.2;
  --rq-lh-base: 1.5;
  --rq-lh-ar: 1.7;
  --rq-fw-regular: 400;
  --rq-fw-medium: 500;
  --rq-fw-semibold: 600;
  --rq-fw-bold: 700;
  --rq-tracking-caps: 0.07em;
  --rq-tracking-tight: -0.022em;

  /* ---- Spacing (4px base), radius, control density ----------------------------- */
  --rq-s-1: 4px;
  --rq-s-2: 8px;
  --rq-s-3: 12px;
  --rq-s-4: 16px;
  --rq-s-5: 20px;
  --rq-s-6: 24px;
  --rq-s-8: 32px;
  --rq-s-10: 40px;
  --rq-r-xs: 4px;
  --rq-r-sm: 6px;
  --rq-r-md: 8px;
  --rq-r-lg: 12px;
  --rq-r-xl: 16px;
  --rq-r-2xl: 20px;
  --rq-r-pill: 999px;
  --rq-h-sm: 32px;
  --rq-h: 38px;
  --rq-h-lg: 44px;
  --rq-h-touch: 44px;
  --rq-row-h: 44px;
  --rq-row-h-compact: 36px;
  --rq-row-h-comfort: 52px;
  --rq-icon: 16px;
  --rq-h-grid-btn: 30px;      /* f18: compact in-row action buttons (grids, lists); becomes --rq-h-touch on coarse pointers */
  --rq-focus-ring-w: 2px;

  /* ---- Layout -------------------------------------------------------------------- */
  --rq-nav-w: 268px;
  --rq-nav-w-rail: 76px;
  --rq-topbar-h: 60px;
  --rq-gutter: 28px;
  --rq-content-max: 1760px;

  /* ---- Dialog contract (wide, multi-column edit dialogs) ------------------------------ */
  --rq-dlg-w: min(1280px, calc(85 * var(--rq-vw, 1vw)));
  --rq-dlg-w-narrow: min(520px, calc(94 * var(--rq-vw, 1vw)));
  --rq-dlg-w-medium: min(760px, calc(92 * var(--rq-vw, 1vw)));
  --rq-dlg-col: 260px;
  --rq-dlg-max-h: calc(92 * var(--rq-dvh, 1dvh));

  /* ---- Motion -------------------------------------------------------------------------- */
  --rq-dur-fast: 120ms;
  --rq-dur: 200ms;
  --rq-dur-slow: 340ms;
  --rq-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* ---- Brand primitives: "The handover" identity (Docs/Brand). Components use the semantic tokens below, never these directly. ---- */
  --rq-brand-graphite: #302B27;   /* warm graphite: primary ink and navigation */
  --rq-brand-mineral: #D7C9B8;    /* mineral: secondary, quiet panels */
  --rq-brand-orange: #EE5A24;     /* handover orange: logo dash, indicators, large graphics (3.0:1 on chalk, so never small text) */
  --rq-brand-chalk: #F5F0E8;      /* warm chalk: canvas */

  /* ---- Surfaces and text (light): warm neutrals derived from chalk and graphite ---------------- */
  --rq-bg: #F5F0E8;
  --rq-surface: #FFFDFA;
  --rq-surface-2: #FAF6EF;
  --rq-sunken: #EDE6DA;
  --rq-hover: #F2ECE1;
  --rq-overlay: rgba(38, 33, 29, 0.45);
  --rq-text: #26211D;
  --rq-text-2: #473F37;
  --rq-muted: #675E53;
  --rq-placeholder: #6E6458;
  --rq-on-accent: #FFFFFF;
  --rq-on-ink: #FFFFFF;   /* text on always-dark surfaces (hero tiles, auth hero, toasts); --rq-on-accent is only for accent FILLS */
  --rq-border: #E3DBCD;
  --rq-border-strong: #CDC2B0;
  --rq-border-control: #8C8071;

  /* ---- Accent: action orange. Brand orange #EE5A24 is only 3.4:1 under white text, so fills use this deeper step (white text 4.8:1). ---- */
  --rq-accent: #C8481B;
  --rq-accent-hover: #AD3E16;
  --rq-accent-press: #943410;
  --rq-accent-text: #B0400F;
  --rq-accent-bright: #FF8A5C;
  --rq-brand-2: #AD3E16;
  --rq-ink-deep: #1F1B18;
  --rq-accent-soft: color-mix(in srgb, var(--rq-accent) 8%, var(--rq-surface));
  --rq-accent-soft-2: color-mix(in srgb, var(--rq-accent) 15%, var(--rq-surface));
  --rq-accent-line: color-mix(in srgb, var(--rq-accent) 32%, var(--rq-surface));
  --rq-focus: #B0400F;
  --rq-brand-grad: linear-gradient(135deg, var(--rq-accent) 0%, var(--rq-brand-2) 100%);
  --rq-glow: 0 1px 0 rgba(255, 255, 255, 0.16) inset, 0 6px 18px -8px color-mix(in srgb, var(--rq-accent) 55%, transparent);
  --rq-hero-a: #3D3731; --rq-hero-b: var(--rq-brand-graphite); --rq-hero-grad: linear-gradient(150deg, var(--rq-hero-a) 0%, var(--rq-hero-b) 70%);   /* featured KPI tiles: graphite, so orange stays reserved for actions */

  /* ---- Navigation: graphite sidebar with chalk text and an orange active indicator (light and dark) ---- */
  --rq-nav-bg: #302B27;
  --rq-nav-bg-2: #302B27;
  --rq-nav-text: #E6DED1;
  --rq-nav-group: #BDB3A4;
  --rq-nav-text-active: #FFFFFF;
  --rq-nav-tint: rgba(245, 240, 232, 0.08);
  --rq-nav-tint-2: rgba(245, 240, 232, 0.13);
  --rq-nav-hover: rgba(245, 240, 232, 0.08);
  --rq-nav-active-bg: rgba(238, 90, 36, 0.18);
  --rq-nav-line: rgba(245, 240, 232, 0.14);
  --rq-nav-accent: #FF8A5C;
  --rq-nav-glow: transparent;
  --rq-nav-field-focus: #3B3530;
  --rq-nav-cta-bg: #C8481B; --rq-nav-cta-fg: #FFFFFF; --rq-nav-cta-hover: #AD3E16;   /* sidebar 'New reservation': brand action fill, per brand where the action fill equals the sidebar colour */

  /* ---- Status: distinct hues (green / gold / crimson / steel blue / plum / warm grey), text on tint; always pair with an icon or label ---- */
  --rq-ok: #1B6B45;       --rq-ok-bg: #E4F2EA;   --rq-ok-line: #A6D3BB;   --rq-ok-dot: #1E8E5A;
  --rq-warn: #7D5200;     --rq-warn-bg: #FBF0CC; --rq-warn-line: #E8CB7A; --rq-warn-dot: #B07C00;
  --rq-danger: #A61B3A;   --rq-danger-bg: #FBE9EC; --rq-danger-line: #EDB5BF; --rq-danger-dot: #C8243F;
  --rq-info: #1F5C93;     --rq-info-bg: #E6EFF8; --rq-info-line: #A9C6E3; --rq-info-dot: #2F77B8;
  --rq-neutral: #4A423A;  --rq-neutral-bg: #EDE6DA; --rq-neutral-line: #D5CBBB; --rq-neutral-dot: #8A7F70;
  --rq-violet: #6A3C8C;   --rq-violet-bg: #F0E8F6; --rq-violet-line: #CDB6E0; --rq-violet-dot: #8E5CB5;
  --rq-danger-solid: #B3202F; --rq-on-danger: #FFFFFF;

  /* ---- Row states (c1_f32: Cars grid insurance colours): the soft status surfaces, so every brand and dark mode follows; row text keeps --rq-text / --rq-text-2 / --rq-muted (gate: contrast-check.mjs); always paired with an icon + text badge ---- */
  --rq-row-warn-bg: var(--rq-warn-bg);     --rq-row-warn-line: var(--rq-warn-line);     --rq-row-warn-hover: color-mix(in srgb, var(--rq-warn-dot) 6%, var(--rq-warn-bg));
  --rq-row-danger-bg: var(--rq-danger-bg); --rq-row-danger-line: var(--rq-danger-line); --rq-row-danger-hover: color-mix(in srgb, var(--rq-danger-dot) 5%, var(--rq-danger-bg));

  /* legacy aliases read by the platform console and older pages (never raw framework blue) */
  --rq-primary: var(--rq-accent);
  --rq-success: var(--rq-ok);
  --rq-warning: var(--rq-warn);

  /* accent swatches (picker preview only) */
  --rq-sw-emerald: #0B8A6E; --rq-sw-ocean-blue: #1D6FE0; --rq-sw-indigo: #C8481B; --rq-sw-royal-purple: #7A35DB; --rq-sw-amber: #B26200; --rq-sw-slate: #3B4658; --rq-sw-rose: #D02A57;

  /* ---- Chart series: colour-blind safe (Tools/Brand/contrast-check.mjs), each >= 3:1 on surface; orange is one series, never "danger" ---- */
  --rq-chart-1: #D4501A;
  --rq-chart-2: #2F46B8;
  --rq-chart-3: #3F8F7E;
  --rq-chart-4: #9C64B4;
  --rq-chart-5: #7A3A48;
  --rq-chart-6: #302B27;
  --rq-chart-grid: #E8E1D4;

  /* ---- Elevation: hairline + soft layered warm shadow; heavier shadow only for floating layers ------------- */
  --rq-shadow-1: 0 1px 2px rgba(48, 43, 39, 0.05), 0 1px 1px rgba(48, 43, 39, 0.03);
  --rq-shadow-2: 0 4px 12px -2px rgba(48, 43, 39, 0.09), 0 2px 4px -2px rgba(48, 43, 39, 0.05);
  --rq-shadow-pop: 0 18px 40px -10px rgba(48, 43, 39, 0.26), 0 6px 14px -6px rgba(48, 43, 39, 0.11), 0 0 0 1px rgba(48, 43, 39, 0.06);
  --rq-shadow-drawer: -12px 0 48px -12px rgba(48, 43, 39, 0.3);
  --rq-scrim: rgba(38, 33, 29, 0.5);
  --rq-ring: 0 0 0 3px color-mix(in srgb, var(--rq-focus) 26%, transparent);
}

/* Arabic: +1px optical size, taller line-height, Arabic-tuned tracking. */
:root:lang(ar), [dir="rtl"] {
  --rq-fs-xs: 13px;
  --rq-fs-sm: 14px;
  --rq-fs-base: 15px;
  --rq-fs-md: 16px;
  --rq-lh-base: var(--rq-lh-ar);
  --rq-tracking-caps: 0;
  --rq-tracking-tight: 0;
}

/* ==========================================================================
   BRAND THEMES (f24). One system: <html> and <body> carry data-brand="handover|precision|motion" (server-rendered from user choice -> company default -> app default).
   "handover" is the :root default above (no override block is needed). Each other brand redeclares the COMPLETE colour layer for light here and for dark further below
   (after the generic dark block, with higher specificity). Primitives keep their legacy names: --rq-brand-graphite = primary ink, --rq-brand-mineral = secondary,
   --rq-brand-orange = signal accent, --rq-brand-chalk = neutral canvas; --rq-signal is the same signal colour under its role name (graphics and indicators, never small text).
   Action fills carry --rq-on-accent: white where the fill is dark, ink where the fill is a light signal colour (aqua / lime in dark mode).
   Source: Tools/Brand/identity-handover/figma-brand-exploration.pdf (concept palettes); contrast table: Docs/Design/brand-contrast-table.md.
   ========================================================================== */
:root {
  --rq-signal: var(--rq-brand-orange);
  --rq-accent-rgb: 200, 72, 27;
  --rq-accent-text-rgb: 176, 64, 15;
  /* swatches for the brand picker (primary / secondary / accent) */
  --rq-sw-handover-1: #302B27; --rq-sw-handover-2: #D7C9B8; --rq-sw-handover-3: #EE5A24;
  --rq-sw-precision-1: #083E48; --rq-sw-precision-2: #DCE9EB; --rq-sw-precision-3: #40C5CE;
  --rq-sw-motion-1: #141916; --rq-sw-motion-2: #CED5CE; --rq-sw-motion-3: #B2F24B;
  --rq-sw-navy-1: #0B1B2E; --rq-sw-navy-2: #D4E4FA; --rq-sw-navy-3: #FF9F1C;
  --rq-sw-forest-1: #1E3828; --rq-sw-forest-2: #CFDFD2; --rq-sw-forest-3: #B58A3A;
}

/* Sculpted precision: deep petrol primary, glacier secondary, signal aqua accent, cool porcelain canvas */
[data-brand="precision"] {
  --rq-brand-graphite: #083E48; --rq-brand-mineral: #DCE9EB; --rq-brand-orange: #40C5CE; --rq-brand-chalk: #F1F5F6;
  --rq-signal: #40C5CE;
  --rq-bg: #F1F5F6; --rq-surface: #FFFFFF; --rq-surface-2: #F7FAFA; --rq-sunken: #E4ECEE; --rq-hover: #E9F1F2;
  --rq-overlay: rgba(8, 30, 35, 0.45);
  --rq-text: #18201F; --rq-text-2: #34484B; --rq-muted: #52666A; --rq-placeholder: #536A6E;
  --rq-on-accent: #FFFFFF;
  --rq-border: #D5E1E4; --rq-border-strong: #BCCDD1; --rq-border-control: #71878B;
  --rq-accent: #083E48; --rq-accent-hover: #0C5160; --rq-accent-press: #052F37; --rq-accent-text: #0A6272; --rq-accent-bright: #40C5CE; --rq-brand-2: #0C5160; --rq-ink-deep: #06303A;
  --rq-accent-rgb: 8, 62, 72; --rq-accent-text-rgb: 10, 98, 114;
  --rq-accent-soft: color-mix(in srgb, var(--rq-signal) 12%, var(--rq-surface));
  --rq-accent-soft-2: color-mix(in srgb, var(--rq-signal) 22%, var(--rq-surface));
  --rq-accent-line: color-mix(in srgb, var(--rq-signal) 55%, var(--rq-surface));
  --rq-focus: #0A6272;
  --rq-brand-grad: linear-gradient(135deg, var(--rq-accent) 0%, var(--rq-brand-2) 100%);
  --rq-glow: 0 1px 0 rgba(255, 255, 255, 0.14) inset, 0 6px 18px -8px color-mix(in srgb, var(--rq-accent) 55%, transparent);
  --rq-hero-a: #0E5663; --rq-hero-b: #083E48; --rq-hero-grad: linear-gradient(150deg, var(--rq-hero-a) 0%, var(--rq-hero-b) 70%);
  --rq-nav-bg: #083E48; --rq-nav-bg-2: #083E48; --rq-nav-text: #D4E5E8; --rq-nav-group: #A3C3C9; --rq-nav-text-active: #FFFFFF;
  --rq-nav-tint: rgba(220, 233, 235, 0.08); --rq-nav-tint-2: rgba(220, 233, 235, 0.13); --rq-nav-hover: rgba(220, 233, 235, 0.08);
  --rq-nav-active-bg: rgba(64, 197, 206, 0.10); --rq-nav-line: rgba(220, 233, 235, 0.16); --rq-nav-accent: #40C5CE; --rq-nav-field-focus: #0C4D59;
  --rq-nav-cta-bg: #40C5CE; --rq-nav-cta-fg: #04252B; --rq-nav-cta-hover: #5FD3DB;
  --rq-ok: #2B6A1F; --rq-ok-bg: #E7F2E1; --rq-ok-line: #B1D3A3; --rq-ok-dot: #3C8A2A;
  --rq-warn: #7D5200; --rq-warn-bg: #FBF0CC; --rq-warn-line: #E8CB7A; --rq-warn-dot: #B07C00;
  --rq-danger: #A61B3A; --rq-danger-bg: #FBE9EC; --rq-danger-line: #EDB5BF; --rq-danger-dot: #C8243F;
  --rq-info: #2A4FA8; --rq-info-bg: #E8EDF9; --rq-info-line: #AFBFE6; --rq-info-dot: #3F63C4;
  --rq-neutral: #3F4E50; --rq-neutral-bg: #E4ECEE; --rq-neutral-line: #C9D6D9; --rq-neutral-dot: #6D8184;
  --rq-violet: #6A3C8C; --rq-violet-bg: #F0E8F6; --rq-violet-line: #CDB6E0; --rq-violet-dot: #8E5CB5;
  --rq-danger-solid: #B3202F; --rq-on-danger: #FFFFFF;
  --rq-chart-1: #0A7C8C; --rq-chart-2: #968E25; --rq-chart-3: #3A18C8; --rq-chart-4: #6B369F; --rq-chart-5: #802910; --rq-chart-6: #18201F; --rq-chart-grid: #DDE7E9;
  --rq-shadow-1: 0 1px 2px rgba(8, 40, 46, 0.06), 0 1px 1px rgba(8, 40, 46, 0.04);
  --rq-shadow-2: 0 4px 12px -2px rgba(8, 40, 46, 0.1), 0 2px 4px -2px rgba(8, 40, 46, 0.06);
  --rq-shadow-pop: 0 18px 40px -10px rgba(8, 40, 46, 0.28), 0 6px 14px -6px rgba(8, 40, 46, 0.12), 0 0 0 1px rgba(8, 40, 46, 0.07);
  --rq-shadow-drawer: -12px 0 48px -12px rgba(8, 40, 46, 0.32);
  --rq-scrim: rgba(8, 30, 35, 0.5);
}

/* Roads in motion: road black primary, silver secondary, go-green accent, road mist canvas (monochrome-first: lime is the signal, the light-mode action fill is road black) */
[data-brand="motion"] {
  --rq-brand-graphite: #141916; --rq-brand-mineral: #CED5CE; --rq-brand-orange: #B2F24B; --rq-brand-chalk: #F0F3EE;
  --rq-signal: #B2F24B;
  --rq-bg: #F0F3EE; --rq-surface: #FBFCFA; --rq-surface-2: #F6F8F4; --rq-sunken: #E3E8E0; --rq-hover: #E9EEE5;
  --rq-overlay: rgba(14, 18, 15, 0.45);
  --rq-text: #141916; --rq-text-2: #38403A; --rq-muted: #566058; --rq-placeholder: #5E685F;
  --rq-on-accent: #FFFFFF;
  --rq-border: #DCE1D9; --rq-border-strong: #C4CCC2; --rq-border-control: #7C877E;
  --rq-accent: #141916; --rq-accent-hover: #2A322C; --rq-accent-press: #000000; --rq-accent-text: #2D5E00; --rq-accent-bright: #B2F24B; --rq-brand-2: #2A322C; --rq-ink-deep: #0B0E0C;
  --rq-accent-rgb: 20, 25, 22; --rq-accent-text-rgb: 45, 94, 0;
  --rq-accent-soft: color-mix(in srgb, var(--rq-signal) 16%, var(--rq-surface));
  --rq-accent-soft-2: color-mix(in srgb, var(--rq-signal) 28%, var(--rq-surface));
  --rq-accent-line: color-mix(in srgb, var(--rq-signal) 62%, var(--rq-surface));
  --rq-focus: #141916;
  --rq-brand-grad: linear-gradient(135deg, var(--rq-accent) 0%, var(--rq-brand-2) 100%);
  --rq-glow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 6px 18px -8px color-mix(in srgb, var(--rq-accent) 55%, transparent);
  --rq-hero-a: #242C26; --rq-hero-b: #141916; --rq-hero-grad: linear-gradient(150deg, var(--rq-hero-a) 0%, var(--rq-hero-b) 70%);
  --rq-nav-bg: #141916; --rq-nav-bg-2: #141916; --rq-nav-text: #DDE3DB; --rq-nav-group: #A6B0A7; --rq-nav-text-active: #FFFFFF;
  --rq-nav-tint: rgba(240, 243, 238, 0.07); --rq-nav-tint-2: rgba(240, 243, 238, 0.12); --rq-nav-hover: rgba(240, 243, 238, 0.07);
  --rq-nav-active-bg: rgba(178, 242, 75, 0.15); --rq-nav-line: rgba(240, 243, 238, 0.14); --rq-nav-accent: #B2F24B; --rq-nav-field-focus: #1F2621;
  --rq-nav-cta-bg: #B2F24B; --rq-nav-cta-fg: #141916; --rq-nav-cta-hover: #C6F76D;
  --rq-ok: #0F6A52; --rq-ok-bg: #E0F1EC; --rq-ok-line: #9ED0C3; --rq-ok-dot: #18866A;
  --rq-warn: #7D5200; --rq-warn-bg: #FBF0CC; --rq-warn-line: #E8CB7A; --rq-warn-dot: #B07C00;
  --rq-danger: #A61B3A; --rq-danger-bg: #FBE9EC; --rq-danger-line: #EDB5BF; --rq-danger-dot: #C8243F;
  --rq-info: #1F5C93; --rq-info-bg: #E6EFF8; --rq-info-line: #A9C6E3; --rq-info-dot: #2F77B8;
  --rq-neutral: #444C46; --rq-neutral-bg: #E3E8E0; --rq-neutral-line: #CBD2C8; --rq-neutral-dot: #737D75;
  --rq-violet: #6A3C8C; --rq-violet-bg: #F0E8F6; --rq-violet-line: #CDB6E0; --rq-violet-dot: #8E5CB5;
  --rq-danger-solid: #B3202F; --rq-on-danger: #FFFFFF;
  --rq-chart-1: #4F8200; --rq-chart-2: #883269; --rq-chart-3: #BD294D; --rq-chart-4: #5F2CCF; --rq-chart-5: #6C3690; --rq-chart-6: #141916; --rq-chart-grid: #E0E5DC;
  --rq-shadow-1: 0 1px 2px rgba(20, 25, 22, 0.06), 0 1px 1px rgba(20, 25, 22, 0.04);
  --rq-shadow-2: 0 4px 12px -2px rgba(20, 25, 22, 0.1), 0 2px 4px -2px rgba(20, 25, 22, 0.06);
  --rq-shadow-pop: 0 18px 40px -10px rgba(20, 25, 22, 0.3), 0 6px 14px -6px rgba(20, 25, 22, 0.12), 0 0 0 1px rgba(20, 25, 22, 0.07);
  --rq-shadow-drawer: -12px 0 48px -12px rgba(20, 25, 22, 0.34);
  --rq-scrim: rgba(14, 18, 15, 0.5);
}

/* Executive precision (navy, f26): midnight navy primary, ice-blue secondary, kinetic amber signal, cool porcelain canvas. Dark-first identity.
   Light mode: the action fill is navy (white label), amber is the signal (sidebar CTA/indicator, soft tints, charts' lead series) and its deeper step (#9A5200) is used for text and focus,
   because amber on white never reaches 4.5:1. Warning is a lemon-gold, deliberately away from the amber accent; state is always carried by icon or text as well. */
[data-brand="navy"] {
  --rq-brand-graphite: #0B1B2E; --rq-brand-mineral: #D4E4FA; --rq-brand-orange: #FF9F1C; --rq-brand-chalk: #F2F5F9;
  --rq-signal: #FF9F1C;
  --rq-bg: #F2F5F9; --rq-surface: #FFFFFF; --rq-surface-2: #F7F9FC; --rq-sunken: #E6ECF3; --rq-hover: #EAF0F7;
  --rq-overlay: rgba(5, 20, 36, 0.5);
  --rq-text: #0B1B2E; --rq-text-2: #33465E; --rq-muted: #4F6179; --rq-placeholder: #566982;
  --rq-on-accent: #FFFFFF;
  --rq-border: #D5DEE9; --rq-border-strong: #BAC7D8; --rq-border-control: #6F8199;
  --rq-accent: #12315A; --rq-accent-hover: #1B4278; --rq-accent-press: #0A2142; --rq-accent-text: #9A5200; --rq-accent-bright: #FF9F1C; --rq-brand-2: #1B4278; --rq-ink-deep: #071426;
  --rq-accent-rgb: 18, 49, 90; --rq-accent-text-rgb: 154, 82, 0;
  --rq-accent-soft: color-mix(in srgb, var(--rq-signal) 12%, var(--rq-surface));
  --rq-accent-soft-2: color-mix(in srgb, var(--rq-signal) 22%, var(--rq-surface));
  --rq-accent-line: color-mix(in srgb, var(--rq-signal) 55%, var(--rq-surface));
  --rq-focus: #9A5200;
  --rq-brand-grad: linear-gradient(135deg, var(--rq-accent) 0%, var(--rq-brand-2) 100%);
  --rq-glow: 0 1px 0 rgba(255, 255, 255, 0.14) inset, 0 6px 18px -8px color-mix(in srgb, var(--rq-accent) 55%, transparent);
  --rq-hero-a: #17325A; --rq-hero-b: #0B1B2E; --rq-hero-grad: linear-gradient(150deg, var(--rq-hero-a) 0%, var(--rq-hero-b) 70%);
  --rq-nav-bg: #0B1B2E; --rq-nav-bg-2: #0B1B2E; --rq-nav-text: #D4E4FA; --rq-nav-group: #8FA6C3; --rq-nav-text-active: #FFFFFF;
  --rq-nav-tint: rgba(212, 228, 250, 0.07); --rq-nav-tint-2: rgba(212, 228, 250, 0.12); --rq-nav-hover: rgba(212, 228, 250, 0.07);
  --rq-nav-active-bg: rgba(255, 159, 28, 0.13); --rq-nav-line: rgba(212, 228, 250, 0.14); --rq-nav-accent: #FFB02E; --rq-nav-field-focus: #12263F;
  --rq-nav-cta-bg: #FF9F1C; --rq-nav-cta-fg: #0B1B2E; --rq-nav-cta-hover: #FFB13D;
  --rq-ok: #1F6B3A; --rq-ok-bg: #E3F2E8; --rq-ok-line: #A5D0B3; --rq-ok-dot: #2E8A52;
  --rq-warn: #6B5200; --rq-warn-bg: #FAF1C4; --rq-warn-line: #E2D077; --rq-warn-dot: #977B00;
  --rq-danger: #A61B3A; --rq-danger-bg: #FBE9EC; --rq-danger-line: #EDB5BF; --rq-danger-dot: #C8243F;
  --rq-info: #1D4ED8; --rq-info-bg: #E8EEFC; --rq-info-line: #B2C4F2; --rq-info-dot: #2F63E0;
  --rq-neutral: #43546B; --rq-neutral-bg: #E6ECF3; --rq-neutral-line: #CBD5E2; --rq-neutral-dot: #6F8199;
  --rq-violet: #6A3C8C; --rq-violet-bg: #F0E8F6; --rq-violet-line: #CDB6E0; --rq-violet-dot: #8E5CB5;
  --rq-danger-solid: #B3202F; --rq-on-danger: #FFFFFF;
  --rq-chart-1: #B86B00; --rq-chart-2: #2563EB; --rq-chart-3: #0E8F6E; --rq-chart-4: #8B3FB8; --rq-chart-5: #C23B5C; --rq-chart-6: #0B1B2E; --rq-chart-grid: #DDE5EF;
  --rq-shadow-1: 0 1px 2px rgba(11, 27, 46, 0.06), 0 1px 1px rgba(11, 27, 46, 0.04);
  --rq-shadow-2: 0 4px 12px -2px rgba(11, 27, 46, 0.1), 0 2px 4px -2px rgba(11, 27, 46, 0.06);
  --rq-shadow-pop: 0 18px 40px -10px rgba(11, 27, 46, 0.3), 0 6px 14px -6px rgba(11, 27, 46, 0.12), 0 0 0 1px rgba(11, 27, 46, 0.07);
  --rq-shadow-drawer: -12px 0 48px -12px rgba(11, 27, 46, 0.34);
  --rq-scrim: rgba(5, 20, 36, 0.55);
}

/* Forest (f34, replaces Amethyst): deep forest green action (hue ~134, desaturated), warm stone canvas, a LIGHT sage sidebar in light mode (the owner prefers a soft tinted sidebar; ink wordmark) and a restrained brass secondary used only for the picker chip, accent-bright and chart series 2.
   Chosen to sit far from the other four themes (orange / teal / lime / navy-amber): corporate and calm, no purple, no pastel. Status hues stay clear of the green accent:
   danger is a brick red, warning a bronze gold, info a steel blue; state is always carried by icon or text as well (ok green is the same family as the brand, so it never stands alone). */
[data-brand="forest"] {
  --rq-brand-graphite: #1E3828; --rq-brand-mineral: #CFDFD2; --rq-brand-orange: #285833; --rq-brand-chalk: #ECEBE4;
  --rq-signal: #285833;
  --rq-bg: #ECEBE4; --rq-surface: #FBFAF6; --rq-surface-2: #F5F4EE; --rq-sunken: #E2E0D6; --rq-hover: #E6E4DA;
  --rq-overlay: rgba(14, 26, 19, 0.5);
  --rq-text: #17211B; --rq-text-2: #3A4940; --rq-muted: #56645A; --rq-placeholder: #536158;
  --rq-on-accent: #FFFFFF;
  --rq-border: #D8D5C8; --rq-border-strong: #C1BDAC; --rq-border-control: #7C7A68;
  --rq-accent: #285833; --rq-accent-hover: #326A41; --rq-accent-press: #1E4528; --rq-accent-text: #24502F; --rq-accent-bright: #B58A3A; --rq-brand-2: #326A41; --rq-ink-deep: #0E1A13;
  --rq-accent-rgb: 40, 88, 51; --rq-accent-text-rgb: 36, 80, 47;
  --rq-accent-soft: color-mix(in srgb, var(--rq-signal) 13%, var(--rq-surface));
  --rq-accent-soft-2: color-mix(in srgb, var(--rq-signal) 24%, var(--rq-surface));
  --rq-accent-line: color-mix(in srgb, var(--rq-signal) 55%, var(--rq-surface));
  --rq-focus: #24502F;
  --rq-brand-grad: linear-gradient(135deg, var(--rq-accent) 0%, var(--rq-brand-2) 100%);
  --rq-glow: 0 1px 0 rgba(255, 255, 255, 0.14) inset, 0 6px 18px -8px color-mix(in srgb, var(--rq-accent) 55%, transparent);
  --rq-hero-a: #234D2F; --rq-hero-b: #0F1F15; --rq-hero-grad: linear-gradient(150deg, var(--rq-hero-a) 0%, var(--rq-hero-b) 70%);
  --rq-nav-bg: #CFDFD2; --rq-nav-bg-2: #CFDFD2; --rq-nav-text: #1F3326; --rq-nav-group: #455C4B; --rq-nav-text-active: #0E1A13;
  --rq-nav-tint: rgba(30, 56, 40, 0.06); --rq-nav-tint-2: rgba(30, 56, 40, 0.10); --rq-nav-hover: rgba(40, 88, 51, 0.10);
  --rq-nav-active-bg: rgba(40, 88, 51, 0.18); --rq-nav-line: rgba(30, 56, 40, 0.18); --rq-nav-accent: #1E4A2A; --rq-nav-field-focus: #FFFFFF;
  --rq-nav-cta-bg: #285833; --rq-nav-cta-fg: #FFFFFF; --rq-nav-cta-hover: #1E4528;
  --rq-ok: #1F6B3A; --rq-ok-bg: #EDF7F0; --rq-ok-line: #A5CBB1; --rq-ok-dot: #0F8F66;
  --rq-warn: #6B5200; --rq-warn-bg: #FAF0C8; --rq-warn-line: #E2D077; --rq-warn-dot: #977B00;
  --rq-danger: #A8261D; --rq-danger-bg: #FBE9E5; --rq-danger-line: #EDB9B0; --rq-danger-dot: #D03A22;
  --rq-info: #1D4F8C; --rq-info-bg: #E6EEF7; --rq-info-line: #B0C6E0; --rq-info-dot: #3567A8;
  --rq-neutral: #4A5249; --rq-neutral-bg: #E2E0D6; --rq-neutral-line: #CBC8B9; --rq-neutral-dot: #7C7A68;
  --rq-violet: #7A4F2B; --rq-violet-bg: #F3EADF; --rq-violet-line: #DAC4A8; --rq-violet-dot: #9C6B3C;
  --rq-danger-solid: #A8261D; --rq-on-danger: #FFFFFF;
  --rq-chart-1: #1F5233; --rq-chart-2: #9C7220; --rq-chart-3: #4C7FB8; --rq-chart-4: #C9644E; --rq-chart-5: #7A7E86; --rq-chart-6: #17211B; --rq-chart-grid: #DAD7CB;
  --rq-shadow-1: 0 1px 2px rgba(23, 33, 27, 0.07), 0 1px 1px rgba(23, 33, 27, 0.04);
  --rq-shadow-2: 0 4px 12px -2px rgba(23, 33, 27, 0.1), 0 2px 4px -2px rgba(23, 33, 27, 0.06);
  --rq-shadow-pop: 0 18px 40px -10px rgba(23, 33, 27, 0.3), 0 6px 14px -6px rgba(23, 33, 27, 0.12), 0 0 0 1px rgba(23, 33, 27, 0.07);
  --rq-shadow-drawer: -12px 0 48px -12px rgba(23, 33, 27, 0.34);
  --rq-scrim: rgba(14, 26, 19, 0.55);
}

/* ==========================================================================
   DARK THEME
   ========================================================================== */
[data-theme="dark"] {
  color-scheme: dark;
  --rq-bg: #1A1714;
  --rq-surface: #24201C;
  --rq-surface-2: #2C2723;
  --rq-sunken: #151210;
  --rq-hover: #332D28;
  --rq-overlay: rgba(10, 8, 6, 0.68);
  --rq-text: #F5F0E8;
  --rq-text-2: #D6CDBF;
  --rq-muted: #AFA597;
  --rq-placeholder: #A3998B;
  --rq-border: #3B352E;
  --rq-border-strong: #4D463D;
  --rq-border-control: #80756A;

  /* orange: the fill keeps white text at 4.8:1; text and focus use the luminous step */
  --rq-accent: #C8481B;
  --rq-accent-text: #FF8A5C;
  --rq-accent-hover: #AD3E16;
  --rq-accent-press: #943410;
  --rq-brand-2: #AD3E16;
  --rq-accent-soft: color-mix(in srgb, var(--rq-accent-text) 12%, var(--rq-surface));
  --rq-accent-soft-2: color-mix(in srgb, var(--rq-accent-text) 22%, var(--rq-surface));
  --rq-accent-line: color-mix(in srgb, var(--rq-accent-text) 42%, var(--rq-surface));
  --rq-focus: #FFA27A;
  --rq-glow: 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 8px 24px -8px color-mix(in srgb, var(--rq-accent) 60%, transparent);

  --rq-ok: #6FD3A0;       --rq-ok-bg: #12281E;   --rq-ok-line: #25583F;   --rq-ok-dot: #3FC585;
  --rq-warn: #F0C25A;     --rq-warn-bg: #2B2209; --rq-warn-line: #66491A; --rq-warn-dot: #E0A82A;
  --rq-danger: #FF8DA0;   --rq-danger-bg: #341218; --rq-danger-line: #7A2E3B; --rq-danger-dot: #F0607A;
  --rq-info: #8DBDF0;     --rq-info-bg: #122234; --rq-info-line: #2D4F7A; --rq-info-dot: #5A9BE0;
  --rq-neutral: #D6CDBF;  --rq-neutral-bg: #2C2723; --rq-neutral-line: #4D463D; --rq-neutral-dot: #8F8576;
  --rq-violet: #D2B2EE;   --rq-violet-bg: #271A33; --rq-violet-line: #55397A; --rq-violet-dot: #B188DC;
  --rq-danger-solid: #B3202F; --rq-on-danger: #FFFFFF;

  --rq-chart-1: #FF8A5C;
  --rq-chart-2: #5C7CFA;
  --rq-chart-3: #3DD1A0;
  --rq-chart-4: #D6A8F0;
  --rq-chart-5: #F0E0A0;
  --rq-chart-6: #8A93A0;
  --rq-chart-grid: #342E28;

  --rq-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --rq-shadow-2: 0 6px 16px -4px rgba(0, 0, 0, 0.55);
  --rq-shadow-pop: 0 20px 48px -10px rgba(0, 0, 0, 0.75), 0 0 0 1px #3B352E;
  --rq-shadow-drawer: -12px 0 56px -8px rgba(0, 0, 0, 0.7);
  --rq-scrim: rgba(10, 8, 6, 0.7);

  /* the graphite sidebar sits one step darker than the page surface so it keeps reading as the brand anchor */
  --rq-nav-bg: #211D1A;
  --rq-nav-bg-2: #211D1A;
  --rq-nav-field-focus: #2C2723;
}

/* ==========================================================================
   BRAND THEMES, DARK (f24). Specificity (0,2,0) beats the generic dark block above; every colour token is redeclared so nothing leaks from the handover dark palette.
   ========================================================================== */
[data-theme="dark"][data-brand="precision"], [data-theme="dark"] [data-brand="precision"] {
  --rq-bg: #0A1A1E; --rq-surface: #10272C; --rq-surface-2: #153239; --rq-sunken: #071317; --rq-hover: #1B3B43;
  --rq-overlay: rgba(2, 10, 12, 0.7);
  --rq-text: #EEF5F6; --rq-text-2: #C5D6D9; --rq-muted: #93ABAF; --rq-placeholder: #93ABB0;
  --rq-on-accent: #04252B;
  --rq-border: #21424A; --rq-border-strong: #2F5961; --rq-border-control: #6C8E94;
  --rq-accent: #40C5CE; --rq-accent-hover: #5FD3DB; --rq-accent-press: #2FB0B9; --rq-accent-text: #5FD3DB; --rq-brand-2: #2FB0B9;
  --rq-accent-rgb: 64, 197, 206; --rq-accent-text-rgb: 95, 211, 219;
  --rq-accent-soft: color-mix(in srgb, var(--rq-signal) 13%, var(--rq-surface));
  --rq-accent-soft-2: color-mix(in srgb, var(--rq-signal) 24%, var(--rq-surface));
  --rq-accent-line: color-mix(in srgb, var(--rq-signal) 46%, var(--rq-surface));
  --rq-focus: #7FDDE3;
  --rq-glow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 8px 24px -8px color-mix(in srgb, var(--rq-accent) 50%, transparent);
  --rq-ok: #8CD97A; --rq-ok-bg: #14260F; --rq-ok-line: #2F5A24; --rq-ok-dot: #6CC656;
  --rq-warn: #F0C25A; --rq-warn-bg: #2B2209; --rq-warn-line: #66491A; --rq-warn-dot: #E0A82A;
  --rq-danger: #FF8DA0; --rq-danger-bg: #341218; --rq-danger-line: #7A2E3B; --rq-danger-dot: #F0607A;
  --rq-info: #9DB4FF; --rq-info-bg: #151D38; --rq-info-line: #34498F; --rq-info-dot: #6F8CF0;
  --rq-neutral: #C5D6D9; --rq-neutral-bg: #153239; --rq-neutral-line: #2F5961; --rq-neutral-dot: #7F979B;
  --rq-violet: #D2B2EE; --rq-violet-bg: #271A33; --rq-violet-line: #55397A; --rq-violet-dot: #B188DC;
  --rq-danger-solid: #B3202F; --rq-on-danger: #FFFFFF;
  --rq-chart-1: #40C5CE; --rq-chart-2: #E85E33; --rq-chart-3: #D86E7D; --rq-chart-4: #B2DC75; --rq-chart-5: #8974CE; --rq-chart-6: #E6D7B4; --rq-chart-grid: #1D3A41;
  --rq-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --rq-shadow-2: 0 6px 16px -4px rgba(0, 0, 0, 0.55);
  --rq-shadow-pop: 0 20px 48px -10px rgba(0, 0, 0, 0.75), 0 0 0 1px #21424A;
  --rq-shadow-drawer: -12px 0 56px -8px rgba(0, 0, 0, 0.7);
  --rq-scrim: rgba(2, 10, 12, 0.72);
  --rq-nav-bg: #061C21; --rq-nav-bg-2: #061C21; --rq-nav-field-focus: #0E2C33;
}

[data-theme="dark"][data-brand="motion"], [data-theme="dark"] [data-brand="motion"] {
  --rq-bg: #0D110E; --rq-surface: #161B17; --rq-surface-2: #1D231E; --rq-sunken: #090C0A; --rq-hover: #242B25;
  --rq-overlay: rgba(4, 6, 5, 0.72);
  --rq-text: #F0F3EE; --rq-text-2: #CDD4CC; --rq-muted: #9EA99F; --rq-placeholder: #96A197;
  --rq-on-accent: #141916;
  --rq-border: #2B332C; --rq-border-strong: #3A453C; --rq-border-control: #7A867C;
  --rq-accent: #B2F24B; --rq-accent-hover: #C6F76D; --rq-accent-press: #9BDB35; --rq-accent-text: #B2F24B; --rq-brand-2: #9BDB35;
  --rq-accent-rgb: 178, 242, 75; --rq-accent-text-rgb: 178, 242, 75;
  --rq-accent-soft: color-mix(in srgb, var(--rq-signal) 11%, var(--rq-surface));
  --rq-accent-soft-2: color-mix(in srgb, var(--rq-signal) 20%, var(--rq-surface));
  --rq-accent-line: color-mix(in srgb, var(--rq-signal) 42%, var(--rq-surface));
  --rq-focus: #C9FF6A;
  --rq-glow: 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 8px 24px -8px color-mix(in srgb, var(--rq-accent) 38%, transparent);
  --rq-ok: #5FD3B0; --rq-ok-bg: #0F2A23; --rq-ok-line: #1F5A49; --rq-ok-dot: #2FBF99;
  --rq-warn: #F0C25A; --rq-warn-bg: #2B2209; --rq-warn-line: #66491A; --rq-warn-dot: #E0A82A;
  --rq-danger: #FF8DA0; --rq-danger-bg: #341218; --rq-danger-line: #7A2E3B; --rq-danger-dot: #F0607A;
  --rq-info: #8DBDF0; --rq-info-bg: #122234; --rq-info-line: #2D4F7A; --rq-info-dot: #5A9BE0;
  --rq-neutral: #CDD4CC; --rq-neutral-bg: #1D231E; --rq-neutral-line: #3A453C; --rq-neutral-dot: #889489;
  --rq-violet: #D2B2EE; --rq-violet-bg: #271A33; --rq-violet-line: #55397A; --rq-violet-dot: #B188DC;
  --rq-danger-solid: #B3202F; --rq-on-danger: #FFFFFF;
  --rq-chart-1: #B2F24B; --rq-chart-2: #8C76DB; --rq-chart-3: #7AB0CC; --rq-chart-4: #D3C071; --rq-chart-5: #E03E81; --rq-chart-6: #C9CFC8; --rq-chart-grid: #232A24;
  --rq-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.45);
  --rq-shadow-2: 0 6px 16px -4px rgba(0, 0, 0, 0.6);
  --rq-shadow-pop: 0 20px 48px -10px rgba(0, 0, 0, 0.8), 0 0 0 1px #2B332C;
  --rq-shadow-drawer: -12px 0 56px -8px rgba(0, 0, 0, 0.75);
  --rq-scrim: rgba(4, 6, 5, 0.74);
  --rq-nav-bg: #0A0D0B; --rq-nav-bg-2: #0A0D0B; --rq-nav-field-focus: #151A16;
}

/* Navy dark = the native identity: Stitch "Executive Precision" petrol-night surfaces, amber action fill with a navy label */
[data-theme="dark"][data-brand="navy"], [data-theme="dark"] [data-brand="navy"] {
  --rq-bg: #051424; --rq-surface: #0F1D31; --rq-surface-2: #17263D; --rq-sunken: #030D1A; --rq-hover: #1F3150;
  --rq-overlay: rgba(2, 8, 16, 0.72);
  --rq-text: #D4E4FA; --rq-text-2: #B4C4DA; --rq-muted: #94A3B8; --rq-placeholder: #8E9DB4;
  --rq-on-accent: #051424;
  --rq-border: #223452; --rq-border-strong: #33476A; --rq-border-control: #7089AB;
  --rq-accent: #FF9F1C; --rq-accent-hover: #FFB13D; --rq-accent-press: #ED9000; --rq-accent-text: #FFB547; --rq-brand-2: #ED9000;
  --rq-accent-rgb: 255, 159, 28; --rq-accent-text-rgb: 255, 181, 71;
  --rq-accent-soft: color-mix(in srgb, var(--rq-signal) 11%, var(--rq-surface));
  --rq-accent-soft-2: color-mix(in srgb, var(--rq-signal) 20%, var(--rq-surface));
  --rq-accent-line: color-mix(in srgb, var(--rq-signal) 42%, var(--rq-surface));
  --rq-focus: #FFC25C;
  --rq-glow: 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 8px 24px -8px color-mix(in srgb, var(--rq-accent) 38%, transparent);
  --rq-ok: #6FD3A0; --rq-ok-bg: #0E2A22; --rq-ok-line: #1F5A49; --rq-ok-dot: #3FC585;
  --rq-warn: #EBD36B; --rq-warn-bg: #2A2508; --rq-warn-line: #5C5018; --rq-warn-dot: #D9BE3F;
  --rq-danger: #FFB4AB; --rq-danger-bg: #3A1512; --rq-danger-line: #7A2E2A; --rq-danger-dot: #F0605A;
  --rq-info: #86B6FF; --rq-info-bg: #0F2342; --rq-info-line: #2D4F8A; --rq-info-dot: #4F8BF0;
  --rq-neutral: #B4C4DA; --rq-neutral-bg: #17263D; --rq-neutral-line: #33476A; --rq-neutral-dot: #7F93B0;
  --rq-violet: #D2B2EE; --rq-violet-bg: #271A33; --rq-violet-line: #55397A; --rq-violet-dot: #B188DC;
  --rq-danger-solid: #B3202F; --rq-on-danger: #FFFFFF;
  --rq-chart-1: #FF9F1C; --rq-chart-2: #5B8CFF; --rq-chart-3: #3DD6B0; --rq-chart-4: #D86E9A; --rq-chart-5: #B79CFF; --rq-chart-6: #E4ECF8; --rq-chart-grid: #1B2C46;
  --rq-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.45);
  --rq-shadow-2: 0 6px 16px -4px rgba(0, 0, 0, 0.6);
  --rq-shadow-pop: 0 20px 48px -10px rgba(0, 0, 0, 0.8), 0 0 0 1px #223452;
  --rq-shadow-drawer: -12px 0 56px -8px rgba(0, 0, 0, 0.75);
  --rq-scrim: rgba(2, 8, 16, 0.76);
  --rq-nav-bg: #040F1D; --rq-nav-bg-2: #040F1D; --rq-nav-field-focus: #0F1D31;
}

/* Forest dark: deep forest-green ground, soft ivory text, sage action fill with a near-black label, a darker green sidebar with brass indicator */
[data-theme="dark"][data-brand="forest"], [data-theme="dark"] [data-brand="forest"] {
  --rq-signal: #64B276; --rq-bg: #15231A; --rq-surface: #1D2E23; --rq-surface-2: #263A2D; --rq-sunken: #101B14; --rq-hover: #2B4033;
  --rq-overlay: rgba(6, 12, 8, 0.72);
  --rq-text: #E9EEE6; --rq-text-2: #C5D0C5; --rq-muted: #A3B4A6; --rq-placeholder: #A0B1A3;
  --rq-on-accent: #0A1A10;
  --rq-border: #31463A; --rq-border-strong: #43594A; --rq-border-control: #7E9786;
  --rq-accent: #64B276; --rq-accent-hover: #7BC28B; --rq-accent-press: #52A065; --rq-accent-text: #86C894; --rq-brand-2: #52A065;
  --rq-accent-rgb: 100, 178, 118; --rq-accent-text-rgb: 134, 200, 148;
  --rq-accent-soft: color-mix(in srgb, var(--rq-signal) 12%, var(--rq-surface));
  --rq-accent-soft-2: color-mix(in srgb, var(--rq-signal) 22%, var(--rq-surface));
  --rq-accent-line: color-mix(in srgb, var(--rq-signal) 42%, var(--rq-surface));
  --rq-focus: #A3D6AE;
  --rq-glow: 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 8px 24px -8px color-mix(in srgb, var(--rq-accent) 38%, transparent);
  --rq-nav-bg: #26382C; --rq-nav-bg-2: #26382C; --rq-nav-text: #DCE6DC; --rq-nav-group: #9AAE9E; --rq-nav-text-active: #FFFFFF;
  --rq-nav-tint: rgba(220, 230, 220, 0.07); --rq-nav-tint-2: rgba(220, 230, 220, 0.12); --rq-nav-hover: rgba(220, 230, 220, 0.07);
  --rq-nav-active-bg: rgba(214, 184, 114, 0.15); --rq-nav-line: rgba(220, 230, 220, 0.14); --rq-nav-accent: #D6B872; --rq-nav-field-focus: #1D2E23;
  --rq-nav-cta-bg: #E6DFC8; --rq-nav-cta-fg: #102016; --rq-nav-cta-hover: #F0EAD7;
  --rq-ok: #7BD6A0; --rq-ok-bg: #11291C; --rq-ok-line: #25583F; --rq-ok-dot: #5EEAC0;
  --rq-warn: #EBD36B; --rq-warn-bg: #2A2508; --rq-warn-line: #5C5018; --rq-warn-dot: #D9BE3F;
  --rq-danger: #FFB4A6; --rq-danger-bg: #3A1512; --rq-danger-line: #7A2E2A; --rq-danger-dot: #F26B4F;
  --rq-info: #8DB7F0; --rq-info-bg: #12233A; --rq-info-line: #2D4F7A; --rq-info-dot: #5A93D6;
  --rq-neutral: #C5D0C5; --rq-neutral-bg: #263A2D; --rq-neutral-line: #43594A; --rq-neutral-dot: #7E9786;
  --rq-violet: #DDB68A; --rq-violet-bg: #2D2116; --rq-violet-line: #5E4630; --rq-violet-dot: #C08F57;
  --rq-danger-solid: #A8261D; --rq-on-danger: #FFFFFF;
  --rq-chart-1: #86C894; --rq-chart-2: #D6B872; --rq-chart-3: #4F83D6; --rq-chart-4: #E08A75; --rq-chart-5: #A9B4C0; --rq-chart-6: #E9EEE6; --rq-chart-grid: #2A3D31;
  --rq-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.45);
  --rq-shadow-2: 0 6px 16px -4px rgba(0, 0, 0, 0.6);
  --rq-shadow-pop: 0 20px 48px -10px rgba(0, 0, 0, 0.8), 0 0 0 1px #31463A;
  --rq-shadow-drawer: -12px 0 56px -8px rgba(0, 0, 0, 0.75);
  --rq-scrim: rgba(6, 12, 8, 0.76);
}

/* Brand picker swatch (topbar menu, My settings, company default page): three chips primary / secondary / accent */
.rq-brand-swatch { display: inline-flex; inline-size: 44px; block-size: 28px; border-radius: var(--rq-r-sm); overflow: hidden; box-shadow: 0 0 0 1px var(--rq-border-strong); flex: 0 0 auto; }
.rq-brand-swatch > i { flex: 1 1 0; display: block; }
[data-brand-swatch="handover"] > i:nth-child(1) { background: var(--rq-sw-handover-1); }
[data-brand-swatch="handover"] > i:nth-child(2) { background: var(--rq-sw-handover-2); }
[data-brand-swatch="handover"] > i:nth-child(3) { background: var(--rq-sw-handover-3); }
[data-brand-swatch="precision"] > i:nth-child(1) { background: var(--rq-sw-precision-1); }
[data-brand-swatch="precision"] > i:nth-child(2) { background: var(--rq-sw-precision-2); }
[data-brand-swatch="precision"] > i:nth-child(3) { background: var(--rq-sw-precision-3); }
[data-brand-swatch="motion"] > i:nth-child(1) { background: var(--rq-sw-motion-1); }
[data-brand-swatch="motion"] > i:nth-child(2) { background: var(--rq-sw-motion-2); }
[data-brand-swatch="motion"] > i:nth-child(3) { background: var(--rq-sw-motion-3); }
[data-brand-swatch="navy"] > i:nth-child(1) { background: var(--rq-sw-navy-1); }
[data-brand-swatch="navy"] > i:nth-child(2) { background: var(--rq-sw-navy-2); }
[data-brand-swatch="navy"] > i:nth-child(3) { background: var(--rq-sw-navy-3); }
[data-brand-swatch="forest"] > i:nth-child(1) { background: var(--rq-sw-forest-1); }
[data-brand-swatch="forest"] > i:nth-child(2) { background: var(--rq-sw-forest-2); }
[data-brand-swatch="forest"] > i:nth-child(3) { background: var(--rq-sw-forest-3); }

/* Windows high-contrast / forced colours: let the system palette win. */
@media (forced-colors: active) {
  :root { --rq-border: CanvasText; --rq-border-control: CanvasText; --rq-focus: Highlight; }
}

/* Light-on-ink overlays (used on brand hero tiles, the auth hero and other always-dark surfaces) */
:root {
  --rq-on-ink-06: rgba(255, 255, 255, 0.06);
  --rq-on-ink-09: rgba(255, 255, 255, 0.09);
  --rq-on-ink-10: rgba(255, 255, 255, 0.1);
  --rq-on-ink-12: rgba(255, 255, 255, 0.12);
  --rq-on-ink-14: rgba(255, 255, 255, 0.14);
  --rq-on-ink-18: rgba(255, 255, 255, 0.18);
  --rq-on-ink-22: rgba(255, 255, 255, 0.22);
  --rq-on-ink-25: rgba(255, 255, 255, 0.25);
  --rq-on-ink-28: rgba(255, 255, 255, 0.28);
  --rq-on-ink-30: rgba(255, 255, 255, 0.3);
  --rq-on-ink-92: rgba(255, 255, 255, 0.92);
  --rq-mask: #000;
}

/* brand badge: the "ri" monogram (white r and i, vermilion lane dash) on the ink tile; wordmark images swap with the theme */
.rq-logo-glyph { display: block; inline-size: 100%; block-size: 100%; object-fit: contain; pointer-events: none; }
.rq-brand-mark:has(> .rq-logo-glyph) { background: var(--rq-brand-graphite) !important; background-image: none !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rq-brand-mineral) 30%, transparent); }
.rq-wordmark { display: block; block-size: 26px; inline-size: auto; max-inline-size: 100%; }
.rq-wordmark--light { display: none; }
[data-theme="dark"] .rq-wordmark--ink, :root[data-theme="dark"] .rq-wordmark--ink { display: none; }
[data-theme="dark"] .rq-wordmark--light, :root[data-theme="dark"] .rq-wordmark--light { display: block; }

/* the sidebar is graphite in both themes, so it always shows the light wordmark (the ink wordmark is for light panels such as the sign-in card) */
.rq-sidebar .rq-wordmark--ink { display: none; }
.rq-sidebar .rq-wordmark--light { display: block; }

/* ==========================================================================
   Text size (c1_f25): xsmall | small | default | large | xlarge, a per-user display zoom like the phone "Display zoom".
   The server renders data-text-size on <html> and <body>. CSS `zoom` on the root scales the WHOLE interface (text, controls, spacing, grid rows, icons, popups, charts)
   in one step; the app is built in px, so rem/token scaling would leave most of it unscaled. Under zoom a viewport unit is scaled too (100vh would become 112vh of
   the screen), so every vh / dvh / vw in the stylesheets is written as `calc(N * var(--rq-vh, 1vh))` etc. and these three tokens cancel the zoom out.
   Print is never scaled (the rule at the end resets the factor).
   ========================================================================== */
:root { --rq-zoom: 1; --rq-vh: 1vh; --rq-dvh: 1dvh; --rq-vw: 1vw; }
/* c1_qa_valpopup4: the shared layer scale (the stack manager in site.js writes the same numbers): full-screen viewers < every modal / dialog layer (+20 per open layer) < the shared app dialog.
   Page CSS / JS never hard-codes a z-index at or above --rq-z-modal-base (guard: QaValPopup.No_page_hard_codes_a_modal_level_z_index). */
:root { --rq-z-grid-popup: 3700; --rq-z-viewer: 11000; --rq-z-modal-base: 12000; --rq-z-above-modal: 12100; --rq-z-doc-viewer: 13000; --rq-z-lock: 30000; --rq-z-dialog-top: 2147483647; }
html[data-text-size="xsmall"] { --rq-zoom: 0.88; }
html[data-text-size="small"] { --rq-zoom: 0.92; }
html[data-text-size="large"] { --rq-zoom: 1.12; }
html[data-text-size="xlarge"] { --rq-zoom: 1.28; }
/* Phones (<= 575px): the CSS viewport shrinks by the zoom (390 / 1.28 = 305px), so Very small and Extra large are capped to the Small / Large factors (silent cap) */
@media (max-width: 575px) {
  html[data-text-size="xsmall"] { --rq-zoom: 0.92; }
  html[data-text-size="xlarge"] { --rq-zoom: 1.12; }
}
/* Desktop layout (>= 1024px wide) is built for a >= 1024px CSS viewport: zoom shrinks it by the factor, so the steps step down on narrow desktops (xlarge needs 1311px, large 1147px) */
@media (min-width: 1024px) and (max-width: 1310.98px) { html[data-text-size="xlarge"] { --rq-zoom: 1.12; } }
@media (min-width: 1024px) and (max-width: 1146.98px) { html[data-text-size="xlarge"], html[data-text-size="large"] { --rq-zoom: 1; } }
html[data-text-size="xsmall"], html[data-text-size="small"], html[data-text-size="large"], html[data-text-size="xlarge"] {
  zoom: var(--rq-zoom);
  --rq-vh: calc(1vh / var(--rq-zoom)); --rq-dvh: calc(1dvh / var(--rq-zoom)); --rq-vw: calc(1vw / var(--rq-zoom));
}
@media print {
  html[data-text-size] { zoom: 1; --rq-zoom: 1; --rq-vh: 1vh; --rq-dvh: 1dvh; --rq-vw: 1vw; }
}

/* Forest (f34): the sidebar is a light sage panel in light mode, so it shows the ink wordmark (the dark sidebars of the other themes show the light one) */
[data-brand="forest"]:not([data-theme="dark"]) .rq-sidebar .rq-wordmark--ink { display: block; }
[data-brand="forest"]:not([data-theme="dark"]) .rq-sidebar .rq-wordmark--light { display: none; }