/* The @recurz/ui faces for product pages on other recurz.ai hosts: the same Latin subsets recurz.ai serves
   (apps/recurz-site/public/fonts, SIL Open Font License), loaded from there so every product shares one cached
   copy and no page loads third-party fonts. A page using this needs `font-src https://recurz.ai` in its CSP. */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://recurz.ai/fonts/ibm-plex-sans.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: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://recurz.ai/fonts/ibm-plex-sans.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: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://recurz.ai/fonts/ibm-plex-sans.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://recurz.ai/fonts/jetbrains-mono.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://recurz.ai/fonts/jetbrains-mono.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://recurz.ai/fonts/jetbrains-mono.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: 'Source Serif 4';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://recurz.ai/fonts/source-serif-4.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: 'Source Serif 4';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://recurz.ai/fonts/source-serif-4.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: 'Source Serif 4';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://recurz.ai/fonts/source-serif-4.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;
}
/* Saira (Omnibus-Type, SIL Open Font License), variable weight: the display face, the squared shapes the recurz.ai wordmark is drawn from. */
@font-face {
  font-family: 'Saira';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://recurz.ai/fonts/saira.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;
}

/* Generated by packages/recurz-ui-ts/scripts/build-tokens.mjs from tokens/tokens.json. Do not edit by hand. */

/* Theme-independent tokens: brand, type, space, radius, control, motion, evidence line styles. */
:root {
  --rz-brand-paper: #fefdf4;
  --rz-brand-ink: #0e3a4a;
  --rz-brand-petrol: #0f3f53;
  --rz-brand-teal: #28a0a2;
  --rz-brand-aqua: #77c0b7;
  --rz-brand-mustard: #e7ab27;
  --rz-brand-orange: #f05d2e;
  --rz-font-display: "Saira", "Eurostile", system-ui, -apple-system, "Segoe UI", sans-serif;
  --rz-font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --rz-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Menlo", monospace;
  --rz-text-display-size: 2.5rem; /* 40px */
  --rz-text-display-leading: 1.1;
  --rz-text-display-weight: 600;
  --rz-text-display-tracking: -0.02em;
  --rz-text-display: 600 2.5rem/1.1 var(--rz-font-display);
  --rz-text-title-size: 1.5rem; /* 24px */
  --rz-text-title-leading: 1.2;
  --rz-text-title-weight: 600;
  --rz-text-title-tracking: -0.02em;
  --rz-text-title: 600 1.5rem/1.2 var(--rz-font-display);
  --rz-text-heading-size: 1.125rem; /* 18px */
  --rz-text-heading-leading: 1.3;
  --rz-text-heading-weight: 600;
  --rz-text-heading-tracking: 0;
  --rz-text-heading: 600 1.125rem/1.3 var(--rz-font-display);
  --rz-text-body-size: 1rem; /* 16px */
  --rz-text-body-leading: 1.6;
  --rz-text-body-weight: 400;
  --rz-text-body-tracking: 0;
  --rz-text-body: 400 1rem/1.6 var(--rz-font-body);
  --rz-text-small-size: 0.875rem; /* 14px */
  --rz-text-small-leading: 1.5;
  --rz-text-small-weight: 400;
  --rz-text-small-tracking: 0;
  --rz-text-small: 400 0.875rem/1.5 var(--rz-font-body);
  --rz-text-data-size: 0.8125rem; /* 13px */
  --rz-text-data-leading: 1.5;
  --rz-text-data-weight: 400;
  --rz-text-data-tracking: 0;
  --rz-text-data: 400 0.8125rem/1.5 var(--rz-font-mono);
  --rz-text-label-size: 0.75rem; /* 12px */
  --rz-text-label-leading: 1.3;
  --rz-text-label-weight: 600;
  --rz-text-label-tracking: 0.14em;
  --rz-text-label: 600 0.75rem/1.3 var(--rz-font-display);
  --rz-text-floor: 0.75rem;
  --rz-space-2: 2px;
  --rz-space-4: 4px;
  --rz-space-6: 6px;
  --rz-space-8: 8px;
  --rz-space-10: 10px;
  --rz-space-12: 12px;
  --rz-space-14: 14px;
  --rz-space-16: 16px;
  --rz-space-20: 20px;
  --rz-space-24: 24px;
  --rz-space-28: 28px;
  --rz-space-32: 32px;
  --rz-space-40: 40px;
  --rz-space-48: 48px;
  --rz-space-64: 64px;
  --rz-space-96: 96px;
  --rz-radius-xs: 2px;
  --rz-radius-sm: 3px;
  --rz-radius-md: 4px;
  --rz-radius-lg: 4px;
  --rz-radius-xl: 6px;
  --rz-radius-pill: 999px;
  --rz-control-sm: 28px;
  --rz-control-md: 32px;
  --rz-control-lg: 36px;
  --rz-motion-fast: 120ms;
  --rz-motion-base: 160ms;
  --rz-motion-ease: cubic-bezier(0.2, 0, 0, 1);
  --rz-ev-observed-style: solid;
  --rz-ev-exploratory-style: dashed;
  --rz-ev-kept-style: solid;
  --rz-ev-harmful-style: solid;
  --rz-ev-inconclusive-style: solid;
}

/* Light: the default, and any subtree pinned with data-theme="light". */
:root,
[data-theme="light"] {
  color-scheme: light;
  --rz-ground: #f3f4f5;
  --rz-surface: #ffffff;
  --rz-sunken: #eaecee;
  --rz-raised: #ffffff;
  --rz-ink: #0f1317;
  --rz-muted: #5b6570;
  --rz-faint: #8a939c;
  --rz-line: #dde1e5;
  --rz-line-strong: #c3c9cf;
  --rz-selected: #eaecee;
  --rz-selection: #f25c2d33;
  --rz-on-ink: #ffffff;
  --rz-accent: #0f1317;
  --rz-on-accent: #ffffff;
  --rz-link: #0f1317;
  --rz-link-underline: #c3c9cf;
  --rz-focus: #f25c2d;
  --rz-header: #ffffff;
  --rz-header-mid: #ffffff;
  --rz-header-end: #ffffff;
  --rz-header-line: #dde1e5;
  --rz-glow: #f3f4f500;
  --rz-seg-on: #0f1317;
  --rz-on-seg-on: #ffffff;
  --rz-toggle-on: #eaecee;
  --rz-on-toggle-on: #0f1317;
  --rz-panel-top: #dde1e5;
  --rz-table-head: #eaecee;
  --rz-table-head-text: #5b6570;
  --rz-tag-line: #c3c9cf;
  --rz-tag-text: #5b6570;
  --rz-check-line: #dde1e5;
  --rz-check-text: #0f1317;
  --rz-check-wash: #ffffff;
  --rz-passed: #16735b;
  --rz-passed-wash: #e6f4ef;
  --rz-failed-wash: #fbe9e6;
  --rz-kept: #e7ab2a;
  --rz-kept-text: #8a5f00;
  --rz-kept-wash: #fbefd2;
  --rz-harm: #b42e1c;
  --rz-harm-wash: #fbe4e0;
  --rz-observed: #7d8a96;
  --rz-lane: #2b6f8f;
  --rz-lane-track: #eaecee;
  --rz-lane-wash: #eaecee;
  --rz-diff-add: #1f8a6e29;
  --rz-diff-add-text: #0f1317;
  --rz-diff-del: #d03a261a;
  --rz-diff-del-text: #5b6570;
  --rz-diff-hunk: #1f9a981a;
  --rz-diff-hunk-text: #126b69;
  --rz-product: #f25c2d;
  --rz-signal: #f25c2d;
  --rz-signal-text: #c2410c;
  --rz-waiting: #a86a0a;
  --rz-stripe-1: #27a09e;
  --rz-stripe-2: #77bfb6;
  --rz-stripe-3: #e7ab2a;
  --rz-stripe-4: #f25c2d;
  --rz-panel-top-width: 1px;
  --rz-action-pill-tint: 0%;
  --rz-action-pill-text: 0%;
  --rz-action-pill-pad: 0px;
  --rz-action-reason: #1f9a98;
  --rz-action-read: #5fb3a9;
  --rz-action-search: #2b6f8f;
  --rz-action-edit: #d99a12;
  --rz-action-test: #f25c2d;
  --rz-action-delegate: #8a5fbf;
  --rz-action-communicate: #7d8a96;
  --rz-action-other: #c3c9cf;
  --rz-ev-observed-text: #5b6570;
  --rz-ev-observed-border: #7d8a96;
  --rz-ev-observed-fill: transparent;
  --rz-ev-exploratory-text: #0f1317;
  --rz-ev-exploratory-border: #0f1317;
  --rz-ev-exploratory-fill: transparent;
  --rz-ev-kept-text: #8a5f00;
  --rz-ev-kept-border: #e7ab2a;
  --rz-ev-kept-fill: #fbefd2;
  --rz-ev-harmful-text: #b42e1c;
  --rz-ev-harmful-border: #b42e1c;
  --rz-ev-harmful-fill: #fbe4e0;
  --rz-ev-inconclusive-text: #5b6570;
  --rz-ev-inconclusive-border: #5b6570;
  --rz-ev-inconclusive-fill: transparent;
}

/* Dark by system preference, unless the page is pinned light. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --rz-ground: #090b0e;
    --rz-surface: #101318;
    --rz-sunken: #0c0f13;
    --rz-raised: #161a20;
    --rz-ink: #e9edf1;
    --rz-muted: #8d97a2;
    --rz-faint: #5f6873;
    --rz-line: #20262e;
    --rz-line-strong: #2e3640;
    --rz-selected: #161a20;
    --rz-selection: #ff6a3a4d;
    --rz-on-ink: #090b0e;
    --rz-accent: #e9edf1;
    --rz-on-accent: #090b0e;
    --rz-link: #e9edf1;
    --rz-link-underline: #3a434e;
    --rz-focus: #ff6a3a;
    --rz-header: #0c0f13;
    --rz-header-mid: #0c0f13;
    --rz-header-end: #0c0f13;
    --rz-header-line: #20262e;
    --rz-glow: #090b0e00;
    --rz-seg-on: #e9edf1;
    --rz-on-seg-on: #090b0e;
    --rz-toggle-on: #161a20;
    --rz-on-toggle-on: #e9edf1;
    --rz-panel-top: #20262e;
    --rz-table-head: #0c0f13;
    --rz-table-head-text: #8d97a2;
    --rz-tag-line: #3a434e;
    --rz-tag-text: #8d97a2;
    --rz-check-line: #20262e;
    --rz-check-text: #e9edf1;
    --rz-check-wash: #101318;
    --rz-passed: #3fc6a0;
    --rz-passed-wash: #0f2a24;
    --rz-failed-wash: #2e1512;
    --rz-kept: #f0b93a;
    --rz-kept-text: #f0c14e;
    --rz-kept-wash: #2e2410;
    --rz-harm: #ff6450;
    --rz-harm-wash: #36150f;
    --rz-observed: #6f7a86;
    --rz-lane: #5ea3c9;
    --rz-lane-track: #161a20;
    --rz-lane-wash: #5ea3c917;
    --rz-diff-add: #3fc6a03d;
    --rz-diff-add-text: #d6f5ea;
    --rz-diff-del: #ff64502e;
    --rz-diff-del-text: #f0b5ab;
    --rz-diff-hunk: #3fc6c21a;
    --rz-diff-hunk-text: #3fc6c2;
    --rz-product: #ff6a3a;
    --rz-signal: #ff6a3a;
    --rz-signal-text: #ff8a5c;
    --rz-waiting: #f0b93a;
    --rz-stripe-1: #2fb8b5;
    --rz-stripe-2: #86d0c6;
    --rz-stripe-3: #f0b93a;
    --rz-stripe-4: #ff6a3a;
    --rz-panel-top-width: 1px;
    --rz-action-pill-tint: 16%;
    --rz-action-pill-text: 70%;
    --rz-action-pill-pad: 6px;
    --rz-action-reason: #2fb8b5;
    --rz-action-read: #86d0c6;
    --rz-action-search: #5ea3c9;
    --rz-action-edit: #f0b93a;
    --rz-action-test: #ff6a3a;
    --rz-action-delegate: #b394e8;
    --rz-action-communicate: #8d97a2;
    --rz-action-other: #3a434e;
    --rz-ev-observed-text: #8d97a2;
    --rz-ev-observed-border: #6f7a86;
    --rz-ev-observed-fill: transparent;
    --rz-ev-exploratory-text: #e9edf1;
    --rz-ev-exploratory-border: #e9edf1;
    --rz-ev-exploratory-fill: transparent;
    --rz-ev-kept-text: #f0c14e;
    --rz-ev-kept-border: #f0b93a;
    --rz-ev-kept-fill: #2e2410;
    --rz-ev-harmful-text: #ff6450;
    --rz-ev-harmful-border: #ff6450;
    --rz-ev-harmful-fill: #36150f;
    --rz-ev-inconclusive-text: #8d97a2;
    --rz-ev-inconclusive-border: #8d97a2;
    --rz-ev-inconclusive-fill: transparent;
  }
}

/* Dark by choice: the page (ThemeToggle sets it on <html>) or any pinned subtree. */
:root[data-theme="dark"],
[data-theme="dark"] {
  color-scheme: dark;
  --rz-ground: #090b0e;
  --rz-surface: #101318;
  --rz-sunken: #0c0f13;
  --rz-raised: #161a20;
  --rz-ink: #e9edf1;
  --rz-muted: #8d97a2;
  --rz-faint: #5f6873;
  --rz-line: #20262e;
  --rz-line-strong: #2e3640;
  --rz-selected: #161a20;
  --rz-selection: #ff6a3a4d;
  --rz-on-ink: #090b0e;
  --rz-accent: #e9edf1;
  --rz-on-accent: #090b0e;
  --rz-link: #e9edf1;
  --rz-link-underline: #3a434e;
  --rz-focus: #ff6a3a;
  --rz-header: #0c0f13;
  --rz-header-mid: #0c0f13;
  --rz-header-end: #0c0f13;
  --rz-header-line: #20262e;
  --rz-glow: #090b0e00;
  --rz-seg-on: #e9edf1;
  --rz-on-seg-on: #090b0e;
  --rz-toggle-on: #161a20;
  --rz-on-toggle-on: #e9edf1;
  --rz-panel-top: #20262e;
  --rz-table-head: #0c0f13;
  --rz-table-head-text: #8d97a2;
  --rz-tag-line: #3a434e;
  --rz-tag-text: #8d97a2;
  --rz-check-line: #20262e;
  --rz-check-text: #e9edf1;
  --rz-check-wash: #101318;
  --rz-passed: #3fc6a0;
  --rz-passed-wash: #0f2a24;
  --rz-failed-wash: #2e1512;
  --rz-kept: #f0b93a;
  --rz-kept-text: #f0c14e;
  --rz-kept-wash: #2e2410;
  --rz-harm: #ff6450;
  --rz-harm-wash: #36150f;
  --rz-observed: #6f7a86;
  --rz-lane: #5ea3c9;
  --rz-lane-track: #161a20;
  --rz-lane-wash: #5ea3c917;
  --rz-diff-add: #3fc6a03d;
  --rz-diff-add-text: #d6f5ea;
  --rz-diff-del: #ff64502e;
  --rz-diff-del-text: #f0b5ab;
  --rz-diff-hunk: #3fc6c21a;
  --rz-diff-hunk-text: #3fc6c2;
  --rz-product: #ff6a3a;
  --rz-signal: #ff6a3a;
  --rz-signal-text: #ff8a5c;
  --rz-waiting: #f0b93a;
  --rz-stripe-1: #2fb8b5;
  --rz-stripe-2: #86d0c6;
  --rz-stripe-3: #f0b93a;
  --rz-stripe-4: #ff6a3a;
  --rz-panel-top-width: 1px;
  --rz-action-pill-tint: 16%;
  --rz-action-pill-text: 70%;
  --rz-action-pill-pad: 6px;
  --rz-action-reason: #2fb8b5;
  --rz-action-read: #86d0c6;
  --rz-action-search: #5ea3c9;
  --rz-action-edit: #f0b93a;
  --rz-action-test: #ff6a3a;
  --rz-action-delegate: #b394e8;
  --rz-action-communicate: #8d97a2;
  --rz-action-other: #3a434e;
  --rz-ev-observed-text: #8d97a2;
  --rz-ev-observed-border: #6f7a86;
  --rz-ev-observed-fill: transparent;
  --rz-ev-exploratory-text: #e9edf1;
  --rz-ev-exploratory-border: #e9edf1;
  --rz-ev-exploratory-fill: transparent;
  --rz-ev-kept-text: #f0c14e;
  --rz-ev-kept-border: #f0b93a;
  --rz-ev-kept-fill: #2e2410;
  --rz-ev-harmful-text: #ff6450;
  --rz-ev-harmful-border: #ff6450;
  --rz-ev-harmful-fill: #36150f;
  --rz-ev-inconclusive-text: #8d97a2;
  --rz-ev-inconclusive-border: #8d97a2;
  --rz-ev-inconclusive-fill: transparent;
}

/* Recurz base: element defaults and the type scale. Needs tokens.css first.
   Fonts are loaded by the app; see the README for the exact <link>. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--rz-ground);
  color: var(--rz-ink);
  font: var(--rz-text-body);
  font-feature-settings: "kern";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings: sentence case, serif, balanced. Never all-caps condensed. */
h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--rz-font-display);
  font-weight: 600;
  text-wrap: balance;
  color: var(--rz-ink);
}
h1 { font: var(--rz-text-display); letter-spacing: var(--rz-text-display-tracking); }
h2 { font: var(--rz-text-title); letter-spacing: var(--rz-text-title-tracking); }
h3,
h4 { font: var(--rz-text-heading); }

p { margin: 0; }

/* The seven sizes as classes, for markup that can't use the element defaults. */
.rz-display { font: var(--rz-text-display); letter-spacing: var(--rz-text-display-tracking); text-wrap: balance; }
.rz-title { font: var(--rz-text-title); letter-spacing: var(--rz-text-title-tracking); text-wrap: balance; }
.rz-heading { font: var(--rz-text-heading); }
.rz-body { font: var(--rz-text-body); }
.rz-small { font: var(--rz-text-small); }
.rz-data { font: var(--rz-text-data); font-variant-numeric: tabular-nums; }
.rz-label {
  font: var(--rz-text-label);
  letter-spacing: var(--rz-text-label-tracking);
  text-transform: uppercase;
  color: var(--rz-muted);
}
.rz-muted { color: var(--rz-muted); }
.rz-mono { font-family: var(--rz-font-mono); }

/* A big number: display face, title size, tabular. */
.rz-figure {
  font: 500 var(--rz-text-title-size)/1.1 var(--rz-font-display);
  font-variant-numeric: tabular-nums;
}

/* Tabular numbers wherever data lines up. */
.rz-data,
.rz-num,
table,
time,
kbd,
code,
samp,
pre {
  font-variant-numeric: tabular-nums;
}

code,
kbd,
samp,
pre,
.rz-data,
.rz-mono {
  font-family: var(--rz-font-mono);
  font-variant-ligatures: none;
}
code {
  font-size: 0.86em;
  background: var(--rz-sunken);
  padding: 0.08em 0.38em;
  border-radius: var(--rz-radius-sm);
  overflow-wrap: anywhere;
}
pre code {
  background: none;
  padding: 0;
  font-size: inherit;
}

/* Links: chrome colour, quiet underline that firms up on hover. */
a {
  color: var(--rz-link);
  text-decoration-line: underline;
  text-decoration-color: var(--rz-link-underline);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover {
  text-decoration-color: currentColor;
}

/* One focus ring everywhere: 2px in the chrome colour. */
:focus-visible {
  outline: 2px solid var(--rz-focus);
  outline-offset: 2px;
}
:focus:not(:focus-visible) {
  outline: none;
}

::selection {
  background: var(--rz-selection);
  color: inherit;
}

hr {
  border: 0;
  border-top: 1px solid var(--rz-line);
  margin: var(--rz-space-24) 0;
}

img,
svg {
  max-width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Recurz components: framework-free classes, prefixed rz-. Needs tokens.css (and base.css for type).
   Every rule reads tokens only, so each component follows the theme of its nearest
   [data-theme] ancestor or the system preference. Colour is a claim: mustard (kept) and
   red (harm) appear only where a verdict or a failure is being stated. */

/* ---------- Utilities ---------- */
/* Visually hidden, still read aloud. */
.rz-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Mono text is data: no programming ligatures (=> stays two characters). */
.rz-diff,
.rz-facts,
.rz-chip,
.rz-tag,
.rz-check,
.rz-kbd,
.rz-lane,
.rz-legend,
.rz-action,
.rz-interval__label,
.rz-input--mono {
  font-variant-ligatures: none;
}

/* Layout helpers. */
.rz-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rz-space-8); }
.rz-stack { display: grid; gap: var(--rz-space-12); align-content: start; min-width: 0; }
.rz-spacer { flex: 1 1 auto; }

/* A page body: the ground colour, with room for an ambient wash (transparent in both themes today). */
.rz-page {
  background: radial-gradient(1100px 280px at 0 0, var(--rz-glow), transparent 70%), var(--rz-ground);
  color: var(--rz-ink);
}

/* ---------- Button ---------- */
.rz-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rz-space-6);
  min-height: var(--rz-control-md);
  padding: 0 var(--rz-space-12);
  border: 1px solid var(--rz-line-strong);
  border-radius: var(--rz-radius-md);
  background: transparent;
  color: var(--rz-ink);
  font: 600 var(--rz-text-small-size)/1.2 var(--rz-font-display);
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--rz-motion-fast) var(--rz-motion-ease), border-color var(--rz-motion-fast) var(--rz-motion-ease);
}
.rz-btn:hover { background: var(--rz-sunken); }
.rz-btn--primary { background: var(--rz-accent); border-color: var(--rz-accent); color: var(--rz-on-accent); }
.rz-btn--primary:hover { background: color-mix(in srgb, var(--rz-accent) 86%, var(--rz-ground)); }
.rz-btn--secondary { /* the default look, named for clarity */ }
.rz-btn--quiet { border-color: transparent; color: var(--rz-muted); padding: 0 var(--rz-space-6); }
.rz-btn--quiet:hover { color: var(--rz-ink); background: var(--rz-sunken); }
.rz-btn--sm { min-height: var(--rz-control-sm); padding: 0 var(--rz-space-10); font-size: var(--rz-text-data-size); }
.rz-btn--lg { min-height: var(--rz-control-lg); padding: 0 var(--rz-space-14); }
/* Planned or unavailable: dashed, never filled, says why in its label. */
.rz-btn--planned,
.rz-btn:disabled,
.rz-btn[aria-disabled="true"] {
  background: transparent;
  color: var(--rz-muted);
  border-color: var(--rz-line-strong);
  border-style: dashed;
  cursor: not-allowed;
}

/* ---------- Chip, tag, kbd ---------- */
.rz-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--rz-space-4);
  padding: 1px var(--rz-space-8);
  border: 1px solid var(--rz-line);
  border-radius: var(--rz-radius-sm);
  background: var(--rz-sunken);
  color: var(--rz-muted);
  font: 500 var(--rz-text-label-size)/1.5 var(--rz-font-mono);
  white-space: nowrap;
}
/* A private run carries this chip everywhere it appears. */
.rz-chip--private { background: transparent; color: var(--rz-ink); border-color: var(--rz-line-strong); }

/* Dashed tag: says a value is inferred, written by a model, or example data. */
.rz-tag {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--rz-space-6);
  border: 1px dashed var(--rz-tag-line);
  border-radius: var(--rz-radius-sm);
  color: var(--rz-tag-text);
  font: 400 var(--rz-text-label-size)/1.5 var(--rz-font-mono);
  white-space: nowrap;
}

/* A value the reader should know is inferred: dotted underline, no colour. */
.rz-inferred { border-bottom: 1px dotted var(--rz-muted); }

.rz-kbd {
  display: inline-block;
  min-width: 1.6em;
  padding: 0 var(--rz-space-4);
  border: 1px solid var(--rz-line-strong);
  border-bottom-width: 2px;
  border-radius: var(--rz-radius-sm);
  background: var(--rz-raised);
  color: var(--rz-muted);
  font: 400 var(--rz-text-label-size)/1.4 var(--rz-font-mono);
  text-align: center;
}

/* ---------- Check chip and verdict ---------- */
.rz-check {
  display: inline-flex;
  align-items: center;
  gap: var(--rz-space-6);
  padding: 1px var(--rz-space-8);
  border: 1px solid var(--rz-check-line);
  border-radius: var(--rz-radius-sm);
  background: var(--rz-check-wash);
  color: var(--rz-check-text);
  font: 500 var(--rz-text-label-size)/1.5 var(--rz-font-mono);
  white-space: nowrap;
}
.rz-check__mark { font-weight: 600; }
.rz-check--fail { color: var(--rz-harm); border-color: var(--rz-harm); background: var(--rz-harm-wash); }

.rz-verdict {
  display: grid;
  gap: var(--rz-space-6);
  padding: var(--rz-space-10) var(--rz-space-14);
  border: 1px solid var(--rz-line);
  border-left: 4px solid var(--rz-harm);
  border-radius: 0 var(--rz-radius-lg) var(--rz-radius-lg) 0;
  background: linear-gradient(90deg, var(--rz-failed-wash), var(--rz-surface) 50%);
}
.rz-verdict--passed {
  border-left-color: var(--rz-passed);
  background: linear-gradient(90deg, var(--rz-passed-wash), var(--rz-surface) 50%);
}
.rz-verdict__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--rz-space-8) var(--rz-space-16); }
.rz-verdict__checks { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rz-space-8); }
.rz-verdict__word {
  font: var(--rz-text-label);
  letter-spacing: var(--rz-text-label-tracking);
  text-transform: uppercase;
  color: var(--rz-harm);
}
.rz-verdict--passed .rz-verdict__word { color: var(--rz-passed); }
.rz-verdict__aside,
.rz-verdict__detail { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rz-space-8); font: var(--rz-text-data); color: var(--rz-muted); }

/* ---------- Facts line ---------- */
.rz-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rz-space-2) var(--rz-space-14);
  margin: 0;
  padding: 0;
  list-style: none;
  font: var(--rz-text-data);
  font-variant-numeric: tabular-nums;
  color: var(--rz-muted);
}
.rz-facts b,
.rz-facts strong { color: var(--rz-ink); font-weight: 500; }
.rz-facts .rz-facts__fail,
.rz-facts .rz-facts__fail b { color: var(--rz-harm); }

/* ---------- Segmented control and layer toggle ---------- */
.rz-seg,
.rz-layers {
  display: inline-flex;
  max-width: 100%;
  border: 1px solid var(--rz-line-strong);
  border-radius: var(--rz-radius-md);
  overflow: hidden;
  background: var(--rz-surface);
  vertical-align: middle;
}
.rz-seg__item,
.rz-layers__item {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: var(--rz-space-6);
  margin: 0;
  border: 0;
  background: transparent;
  color: var(--rz-muted);
  font: 400 var(--rz-text-data-size)/1.2 var(--rz-font-body);
  white-space: nowrap;
  cursor: pointer;
}
.rz-seg__item { min-height: var(--rz-control-sm); padding: 0 var(--rz-space-10); font: 600 var(--rz-text-label-size)/1.2 var(--rz-font-display); letter-spacing: 0.1em; text-transform: uppercase; }
.rz-layers__item { min-height: 26px; padding: 0 var(--rz-space-10); font-size: var(--rz-text-label-size); }
.rz-seg__item + .rz-seg__item,
.rz-layers__item + .rz-layers__item { border-left: 1px solid var(--rz-line-strong); }
.rz-seg__item:hover,
.rz-layers__item:hover { color: var(--rz-ink); }
.rz-seg__item:focus-visible,
.rz-layers__item:focus-visible { outline-offset: -2px; }
.rz-seg__item[aria-pressed="true"],
.rz-seg__item[aria-checked="true"],
.rz-seg__item.is-on { background: var(--rz-seg-on); color: var(--rz-on-seg-on); font-weight: 500; }
.rz-seg__count { font: 400 var(--rz-text-label-size)/1 var(--rz-font-mono); color: var(--rz-muted); }
.rz-seg__count--fail { color: var(--rz-harm); }
.rz-seg__item[aria-pressed="true"] .rz-seg__count,
.rz-seg__item[aria-checked="true"] .rz-seg__count,
.rz-seg__item.is-on .rz-seg__count { color: inherit; }
/* Layers are independent switches: a square that fills when the layer is shown. */
.rz-layers__item::before {
  content: "";
  width: 8px;
  height: 8px;
  border: 1.5px solid currentColor;
  border-radius: 2px;
}
.rz-layers__item[aria-pressed="true"],
.rz-layers__item.is-on { background: var(--rz-toggle-on); color: var(--rz-on-toggle-on); font-weight: 500; }
.rz-layers__item[aria-pressed="true"]::before,
.rz-layers__item.is-on::before { background: currentColor; }

/* ---------- Card, panel, callout, empty state ---------- */
.rz-card {
  display: grid;
  gap: var(--rz-space-10);
  align-content: start;
  min-width: 0;
  padding: var(--rz-space-14) var(--rz-space-16);
  border: 1px solid var(--rz-line);
  border-radius: var(--rz-radius-xl);
  background: var(--rz-surface);
}
.rz-card--sunken { background: var(--rz-sunken); }
/* A card that states a kept verdict (a recommendation). */
.rz-card--kept { border-color: var(--rz-kept); box-shadow: inset 4px 0 0 var(--rz-kept); }
.rz-card__title { font: var(--rz-text-heading); margin: 0; }

.rz-panel {
  display: grid;
  gap: var(--rz-space-8);
  min-width: 0;
  padding: var(--rz-space-12) var(--rz-space-14);
  border: 1px solid var(--rz-line);
  border-top: var(--rz-panel-top-width) solid var(--rz-panel-top);
  border-radius: var(--rz-radius-xl);
  background: var(--rz-surface);
}
.rz-panel__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--rz-space-8) var(--rz-space-12); }

/* Next step: one sentence, one action. */
.rz-callout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--rz-space-10) var(--rz-space-16);
  padding: var(--rz-space-12) var(--rz-space-16);
  border: 1px solid var(--rz-line-strong);
  border-radius: var(--rz-radius-xl);
  background: var(--rz-surface);
}
.rz-callout__text { display: grid; gap: var(--rz-space-2); flex: 1 1 20rem; min-width: 0; }
.rz-callout__title { font: var(--rz-text-heading); margin: 0; }
.rz-callout__body { margin: 0; color: var(--rz-muted); font: var(--rz-text-small); }
.rz-callout__actions { display: flex; flex-wrap: wrap; gap: var(--rz-space-8); }

.rz-empty {
  display: grid;
  justify-items: start;
  gap: var(--rz-space-8);
  padding: var(--rz-space-24);
  border: 1px dashed var(--rz-line-strong);
  border-radius: var(--rz-radius-xl);
  color: var(--rz-muted);
  font: var(--rz-text-small);
}
.rz-empty__title { font: var(--rz-text-heading); color: var(--rz-ink); margin: 0; }
.rz-empty__body { margin: 0; max-width: 60ch; }

/* ---------- Table ---------- */
.rz-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--rz-line);
  border-radius: var(--rz-radius-xl);
  background: var(--rz-surface);
}
.rz-table { width: 100%; border-collapse: collapse; font: var(--rz-text-small); font-variant-numeric: tabular-nums; }
.rz-table th,
.rz-table td { padding: var(--rz-space-8) var(--rz-space-12); border-bottom: 1px solid var(--rz-line); text-align: left; vertical-align: top; }
.rz-table th {
  background: var(--rz-table-head);
  color: var(--rz-table-head-text);
  font: var(--rz-text-label);
  letter-spacing: var(--rz-text-label-tracking);
  text-transform: uppercase;
  white-space: nowrap;
}
.rz-table tbody tr:last-child td { border-bottom: 0; }
.rz-table td.rz-num { font: var(--rz-text-data); text-align: right; white-space: nowrap; }
.rz-table th.rz-num { text-align: right; }
.rz-table td.rz-mono { font: var(--rz-text-data); }
.rz-table tr[aria-selected="true"] td,
.rz-table tr.is-selected td { background: var(--rz-selected); }
.rz-table tr[aria-selected="true"] td:first-child,
.rz-table tr.is-selected td:first-child { box-shadow: inset 2px 0 0 var(--rz-signal); }

/* ---------- Field, input, select ---------- */
.rz-field { display: grid; gap: var(--rz-space-4); min-width: 0; }
.rz-field__label {
  font: var(--rz-text-label);
  letter-spacing: var(--rz-text-label-tracking);
  text-transform: uppercase;
  color: var(--rz-muted);
}
.rz-field__hint { font: var(--rz-text-data); color: var(--rz-muted); margin: 0; }
.rz-field__error { font: var(--rz-text-data); color: var(--rz-harm); margin: 0; }
.rz-input,
.rz-select {
  width: 100%;
  min-height: var(--rz-control-md);
  padding: 0 var(--rz-space-10);
  border: 1px solid var(--rz-line-strong);
  border-radius: var(--rz-radius-md);
  background: var(--rz-raised);
  color: var(--rz-ink);
  font: 400 var(--rz-text-small-size)/1.4 var(--rz-font-body);
}
textarea.rz-input { padding: var(--rz-space-8) var(--rz-space-10); min-height: 5rem; resize: vertical; }
.rz-input::placeholder { color: var(--rz-muted); opacity: 1; }
.rz-input:hover,
.rz-select:hover { border-color: var(--rz-muted); }
.rz-input--mono { font-family: var(--rz-font-mono); font-size: var(--rz-text-data-size); }
.rz-input[aria-invalid="true"],
.rz-select[aria-invalid="true"] { border-color: var(--rz-harm); }
.rz-input:disabled,
.rz-select:disabled { border-style: dashed; color: var(--rz-muted); background: transparent; cursor: not-allowed; }
.rz-select {
  appearance: none;
  padding-right: 30px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--rz-muted) 50%),
    linear-gradient(135deg, var(--rz-muted) 50%, transparent 50%);
  background-position: calc(100% - 16px) 52%, calc(100% - 11px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

/* ---------- App header and nav ---------- */
.rz-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rz-space-8) var(--rz-space-24);
  min-height: 52px;
  padding: var(--rz-space-8) var(--rz-space-24) calc(var(--rz-space-8) + 4px);
  /* The four logo stripes, 1px each, as a band along the bottom edge. */
  background: linear-gradient(to bottom,
    var(--rz-header) calc(100% - 4px),
    var(--rz-stripe-1) calc(100% - 4px) calc(100% - 3px),
    var(--rz-stripe-2) calc(100% - 3px) calc(100% - 2px),
    var(--rz-stripe-3) calc(100% - 2px) calc(100% - 1px),
    var(--rz-stripe-4) calc(100% - 1px));
  color: var(--rz-ink);
}
/* The band on its own, for headers a product draws itself. */
.rz-stripe {
  display: block;
  height: 4px;
  background: linear-gradient(to bottom, var(--rz-stripe-1) 0 25%, var(--rz-stripe-2) 25% 50%, var(--rz-stripe-3) 50% 75%, var(--rz-stripe-4) 75%);
}
.rz-header__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--rz-space-10);
  color: var(--rz-ink);
  text-decoration: none;
  white-space: nowrap;
}
.rz-brandmark { font: 700 15px/1 var(--rz-font-body); letter-spacing: 0.02em; }
.rz-brandmark i { font-style: normal; color: var(--rz-product); }
.rz-header__product {
  padding-left: var(--rz-space-10);
  border-left: 1px solid var(--rz-line-strong);
  font: 600 var(--rz-text-label-size)/1.2 var(--rz-font-display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.rz-nav { display: flex; align-items: center; gap: var(--rz-space-20); min-width: 0; overflow-x: auto; scrollbar-width: none; }
.rz-nav::-webkit-scrollbar { display: none; }
.rz-nav__link {
  padding: var(--rz-space-6) 0;
  color: var(--rz-muted);
  font: 600 var(--rz-text-label-size)/1.2 var(--rz-font-display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.rz-nav__link:hover { color: var(--rz-ink); }
.rz-nav__link:focus-visible { outline-offset: -2px; }
.rz-nav__link[aria-current="page"] { color: var(--rz-ink); box-shadow: inset 0 -2px 0 var(--rz-signal); }
.rz-header__right { display: flex; align-items: center; gap: var(--rz-space-10); margin-left: auto; color: var(--rz-muted); font: var(--rz-text-data); font-family: var(--rz-font-body); }
.rz-avatar {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--rz-accent);
  color: var(--rz-on-accent);
  font: 600 var(--rz-text-label-size)/1 var(--rz-font-body);
}
@media (max-width: 640px) {
  .rz-header { padding: var(--rz-space-8) var(--rz-space-16); }
  .rz-header .rz-nav { order: 3; flex-basis: 100%; }
}

/* ---------- Cross-product switcher ---------- */
/* "Recurz / Tracez ⌄" at the left of every product header; opens every product grouped by pillar.
   A <details>, so it works with no script. Product dots are placeholders until the palette is picked. */
.rz-switch { position: relative; flex: none; }
/* Product dots take the logo's colours, one per question column (see PILLARS in products.ts). */
.rz-switch {
  --rz-logo-petrol: #0e3c50;
  --rz-logo-teal: #27a09e;
  --rz-logo-orange: #f25c2d;
  --rz-logo-mustard: #e7ab2a;
  --rz-logo-aqua: #77bfb6;
}
:root[data-theme="dark"] .rz-switch, [data-theme="dark"] .rz-switch { --rz-logo-petrol: var(--rz-ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rz-switch { --rz-logo-petrol: var(--rz-ink); } }
.rz-switch :is([data-product="tracez"], [data-product="tapez"], [data-product="dreamz"], [data-product="memoryz"], [data-product="artifactz"], [data-product="blamez"], [data-product="replayz"]) { --rz-switch-dot: var(--rz-logo-teal); }
.rz-switch :is([data-product="observerz"], [data-product="proofz"], [data-product="keyz"], [data-product="runz"]) { --rz-switch-dot: var(--rz-logo-orange); }
.rz-switch :is([data-product="verdictz"], [data-product="skillz"], [data-product="acceleratez"], [data-product="megaswarmz"]) { --rz-switch-dot: var(--rz-logo-mustard); }
.rz-switch :is([data-product="steerz"], [data-product="hotpathz"], [data-product="graduatez"]) { --rz-switch-dot: var(--rz-logo-aqua); }
.rz-logo { display: inline-flex; align-items: center; gap: var(--rz-space-6); color: var(--rz-ink); }
.rz-logo svg { display: block; width: auto; }
.rz-logo__mark { height: 20px; }
.rz-logo__word { height: 15px; }
.rz-logo__petrol { fill: var(--rz-logo-petrol); }
.rz-logo__teal { fill: var(--rz-logo-teal); }
.rz-logo__aqua { fill: var(--rz-logo-aqua); }
.rz-logo__mustard { fill: var(--rz-logo-mustard); }
.rz-logo__orange { fill: var(--rz-logo-orange); }
.rz-switch [data-product="home"] { --rz-switch-dot: var(--rz-ink); }
.rz-switch__button {
  display: inline-flex;
  align-items: center;
  gap: var(--rz-space-8);
  min-height: var(--rz-control-md);
  padding: 0 var(--rz-space-8) 0 var(--rz-space-10);
  border: 1px solid var(--rz-line-strong);
  border-radius: var(--rz-radius-md);
  background: var(--rz-raised);
  color: var(--rz-ink);
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
  user-select: none;
}
.rz-switch__button::-webkit-details-marker { display: none; }
.rz-switch__button:hover { border-color: var(--rz-muted); }
.rz-switch[open] > .rz-switch__button { background: var(--rz-sunken); }
.rz-switch__slash { color: var(--rz-line-strong); font: 400 16px/1 var(--rz-font-body); }
.rz-switch__current { display: inline-flex; align-items: center; gap: var(--rz-space-6); font: 600 var(--rz-text-label-size)/1 var(--rz-font-display); letter-spacing: 0.12em; text-transform: uppercase; }
.rz-switch__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rz-switch-dot, var(--rz-muted)); flex: none; }
.rz-switch__chevron { width: 14px; height: 14px; fill: none; stroke: var(--rz-muted); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--rz-motion-fast) var(--rz-motion-ease); }
.rz-switch[open] .rz-switch__chevron { transform: rotate(180deg); }
.rz-switch__count {
  display: inline-grid;
  place-items: center;
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  border-radius: var(--rz-radius-pill);
  background: var(--rz-accent);
  color: var(--rz-on-accent);
  font: 600 10.5px/1 var(--rz-font-body);
}
.rz-switch__panel {
  position: absolute;
  z-index: 50;
  top: calc(100% + var(--rz-space-6));
  left: 0;
  width: min(960px, calc(100vw - 2 * var(--rz-space-16)));
  max-height: calc(100vh - 96px);
  overflow-y: auto;
  padding: var(--rz-space-12);
  border: 1px solid var(--rz-line-strong);
  border-radius: var(--rz-radius-lg);
  background: var(--rz-raised);
  box-shadow: 0 2px 4px rgb(0 0 0 / 0.08), 0 12px 32px rgb(0 0 0 / 0.16);
}
/* Four columns; each column's heading, flagship tile and list share rows (subgrid) so the rule under the
   tiles lines up, and no column gap so the four rule segments read as one line. */
.rz-switch__groups { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto auto auto; row-gap: var(--rz-space-12); }
.rz-switch__group { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start; padding-inline: var(--rz-space-6); }
/* The flagship is where to start: a raised card with a small "Start here" label and a larger name. The
   products under the rule keep full names and roles, so they still read as real products. */
.rz-switch__list--flagship .rz-switch__item {
  height: 100%;
  align-content: start;
  padding: var(--rz-space-10) var(--rz-space-12) var(--rz-space-12);
  border: 1px solid var(--rz-line);
  background: var(--rz-raised);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.06), 0 4px 12px rgb(0 0 0 / 0.06);
}
.rz-switch__list--flagship .rz-switch__item:hover { background: var(--rz-sunken); }
.rz-switch__list--flagship .rz-switch__item[aria-current="page"] { background: var(--rz-selected); }
.rz-switch__list--flagship .rz-switch__item .rz-switch__dot { grid-row: 2; }
.rz-switch__list--flagship .rz-switch__name { grid-column: 2; grid-row: 2; font: 600 var(--rz-text-heading-size)/1.2 var(--rz-font-body); }
.rz-switch__list--flagship .rz-switch__role { grid-column: 2; grid-row: 3; color: var(--rz-ink); }
.rz-switch__tag { grid-column: 1 / -1; grid-row: 1; margin-bottom: var(--rz-space-2); color: var(--rz-faint); font: 600 10px/1.2 var(--rz-font-body); letter-spacing: 0.1em; text-transform: uppercase; }
.rz-switch__list--flagship + .rz-switch__list { align-content: start; margin-inline: calc(-1 * var(--rz-space-6)); padding: var(--rz-space-10) var(--rz-space-6) 0; border-top: 1px solid var(--rz-line); }
.rz-switch__pillar { margin: 0; padding: var(--rz-space-2) var(--rz-space-8) var(--rz-space-6); color: var(--rz-faint); font: 600 var(--rz-text-label-size)/1 var(--rz-font-body); letter-spacing: 0.08em; text-transform: uppercase; }
.rz-switch__groups .rz-switch__pillar { align-self: end; padding-bottom: var(--rz-space-8); color: var(--rz-ink); font: 600 var(--rz-text-small-size)/1.25 var(--rz-font-display); letter-spacing: 0; text-transform: none; }
.rz-switch__list { display: grid; gap: var(--rz-space-2); margin: 0; padding: 0; list-style: none; }
.rz-switch__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--rz-space-2) var(--rz-space-10);
  padding: var(--rz-space-8);
  border-radius: var(--rz-radius-md);
  color: var(--rz-ink);
  text-decoration: none;
}
.rz-switch__item:hover { background: var(--rz-sunken); }
.rz-switch__item[aria-current="page"] { background: var(--rz-selected); }
.rz-switch__item:focus-visible { outline-offset: -2px; }
.rz-switch__item .rz-switch__dot { grid-row: span 2; }
.rz-switch__name { display: inline-flex; align-items: center; gap: var(--rz-space-6); font: 600 var(--rz-text-small-size)/1.25 var(--rz-font-body); }
.rz-switch__role { grid-column: 2; color: var(--rz-muted); font: 400 var(--rz-text-label-size)/1.35 var(--rz-font-body); }
/* The way back to the home feed, first in the panel on every product so it is never hunted for. */
.rz-switch__home {
  display: flex;
  align-items: center;
  gap: var(--rz-space-10);
  margin-bottom: var(--rz-space-12);
  padding: var(--rz-space-10) var(--rz-space-12);
  border: 1px solid var(--rz-line);
  border-radius: var(--rz-radius-md);
  background: var(--rz-sunken);
  color: var(--rz-ink);
  font: 600 var(--rz-text-body-size)/1.25 var(--rz-font-body);
  text-decoration: none;
}
.rz-switch__home:hover { background: var(--rz-selected); }
.rz-switch__home:focus-visible { outline-offset: -2px; }
.rz-switch__back { color: var(--rz-accent); font-size: 1.15em; line-height: 1; }
@media (max-width: 640px) {
  .rz-switch__groups { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: var(--rz-space-16); }
  .rz-switch__group { grid-row: auto; grid-template-rows: none; row-gap: var(--rz-space-6); padding-inline: 0; }
  .rz-switch__list--flagship + .rz-switch__list { margin-inline: 0; padding: var(--rz-space-6) 0 0; border-top: 0; }
  .rz-switch__panel { position: fixed; top: 56px; left: var(--rz-space-16); right: var(--rz-space-16); width: auto; max-height: calc(100vh - 72px); }
  .rz-header--switch .rz-switch .rz-logo__word,
  .rz-header--switch .rz-switch__slash { display: none; }
}
@media (prefers-reduced-motion: reduce) { .rz-switch__chevron { transition: none; } }

/* ---------- Evidence badge ---------- */
.rz-evidence {
  display: inline-flex;
  align-items: center;
  gap: var(--rz-space-6);
  padding: 4px 9px;
  border: 1.5px solid var(--ev-border);
  border-style: var(--ev-style, solid);
  border-radius: var(--rz-radius-pill);
  background: var(--ev-fill);
  color: var(--ev-text);
  font: 600 var(--rz-text-label-size)/1.2 var(--rz-font-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.rz-evidence::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.rz-evidence--observed { --ev-text: var(--rz-ev-observed-text); --ev-border: var(--rz-ev-observed-border); --ev-fill: var(--rz-ev-observed-fill); --ev-style: var(--rz-ev-observed-style); }
.rz-evidence--exploratory { --ev-text: var(--rz-ev-exploratory-text); --ev-border: var(--rz-ev-exploratory-border); --ev-fill: var(--rz-ev-exploratory-fill); --ev-style: var(--rz-ev-exploratory-style); }
.rz-evidence--kept { --ev-text: var(--rz-ev-kept-text); --ev-border: var(--rz-ev-kept-border); --ev-fill: var(--rz-ev-kept-fill); --ev-style: var(--rz-ev-kept-style); }
.rz-evidence--harmful { --ev-text: var(--rz-ev-harmful-text); --ev-border: var(--rz-ev-harmful-border); --ev-fill: var(--rz-ev-harmful-fill); --ev-style: var(--rz-ev-harmful-style); }
.rz-evidence--inconclusive { --ev-text: var(--rz-ev-inconclusive-text); --ev-border: var(--rz-ev-inconclusive-border); --ev-fill: var(--rz-ev-inconclusive-fill); --ev-style: var(--rz-ev-inconclusive-style); }
/* Hollow dot: no tested interval (observed) or one that crosses zero (inconclusive). */
.rz-evidence--observed::before,
.rz-evidence--inconclusive::before { width: 5px; height: 5px; background: transparent; border: 1.5px solid var(--ev-border); }

/* ---------- Interval strip ---------- */
/* The one chart for every difference. Point estimate in ink, interval in the rung's colour,
   reference (zero) line always drawn. Coordinates are percentages, so text stays at real size. */
.rz-interval { display: block; padding-inline: 14px; min-width: 0; }
.rz-interval svg { display: block; width: 100%; overflow: visible; }
.rz-interval__axis { stroke: var(--rz-line); stroke-width: 1; }
.rz-interval__zero { stroke: var(--rz-line-strong); stroke-width: 1; stroke-dasharray: 3 4; }
/* A bar the interval is judged against (a plan's minimum useful effect): link colour, never an evidence colour. */
.rz-interval__bar { stroke: var(--rz-link); stroke-width: 1.5; stroke-dasharray: 5 3; }
.rz-interval__tick { stroke: var(--rz-line-strong); stroke-width: 1; }
.rz-interval__label { fill: var(--rz-muted); font: 400 var(--rz-text-label-size) var(--rz-font-mono); font-variant-numeric: tabular-nums; }
.rz-interval__range { fill: none; stroke-linecap: round; }
.rz-interval__range--clipped { stroke-linecap: butt; }
.rz-interval__range--kept { stroke: var(--rz-kept); stroke-width: 7; }
.rz-interval__range--harmful { stroke: var(--rz-harm); stroke-width: 7; }
.rz-interval__range--inconclusive { stroke: var(--rz-observed); stroke-width: 2.5; }
.rz-interval__range--exploratory { stroke: var(--rz-ink); stroke-width: 1.5; fill: none; }
.rz-interval__range--neutral { stroke: var(--rz-ink); stroke-width: 5; }
.rz-interval__arrow { stroke: var(--rz-ink); stroke-width: 1.5; }
.rz-interval__arrowhead { fill: var(--rz-ink); }
.rz-interval__point { fill: var(--rz-ink); }
.rz-interval__point--hollow { fill: var(--rz-surface); stroke: var(--rz-observed); stroke-width: 2; }

/* ---------- Actions: swatch, label, legend, mix bar ---------- */
.rz-action--reason { --rz-a: var(--rz-action-reason); }
.rz-action--read { --rz-a: var(--rz-action-read); }
.rz-action--search { --rz-a: var(--rz-action-search); }
.rz-action--edit { --rz-a: var(--rz-action-edit); }
.rz-action--test { --rz-a: var(--rz-action-test); }
.rz-action--delegate { --rz-a: var(--rz-action-delegate); }
.rz-action--communicate { --rz-a: var(--rz-action-communicate); }
.rz-action--other { --rz-a: var(--rz-action-other); }

.rz-swatch {
  display: inline-block;
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: var(--rz-radius-xs);
  background: var(--rz-a, var(--rz-action-other));
}
/* An action label: swatch and word in light; a tinted pill in dark (from tokens). */
.rz-action {
  display: inline-flex;
  align-items: center;
  gap: var(--rz-space-6);
  padding: 0 var(--rz-action-pill-pad);
  border-radius: var(--rz-radius-sm);
  background: color-mix(in srgb, var(--rz-a) var(--rz-action-pill-tint), transparent);
  color: color-mix(in srgb, var(--rz-a) var(--rz-action-pill-text), var(--rz-ink));
  font: 400 var(--rz-text-label-size)/1.6 var(--rz-font-mono);
  white-space: nowrap;
}
.rz-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rz-space-6) var(--rz-space-14);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--rz-muted);
  font: 400 var(--rz-text-label-size)/1.5 var(--rz-font-mono);
}
.rz-legend__item { display: inline-flex; align-items: center; gap: var(--rz-space-6); }
.rz-legend__note { color: var(--rz-muted); }

.rz-mix {
  display: flex;
  gap: 1px;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--rz-sunken);
}
.rz-mix--thin { height: 4px; border-radius: 2px; }
.rz-mix--thick { height: 8px; border-radius: 4px; }
.rz-mix__seg { display: block; height: 100%; min-width: 1px; background: var(--rz-a); }

/* ---------- Agents: lane name and rail ---------- */
/* A subagent is "↳ name" in the delegate tone. No shapes: they read as radio buttons. */
.rz-lane {
  display: inline-flex;
  align-items: baseline;
  gap: var(--rz-space-4);
  color: var(--rz-ink);
  font: 500 var(--rz-text-data-size)/1.4 var(--rz-font-mono);
  white-space: nowrap;
}
.rz-lane--sub { color: var(--rz-lane); }
.rz-lane--nested { padding-left: 1.4em; }
.rz-lane__count { color: var(--rz-muted); font-weight: 400; }
.rz-lane__note { color: var(--rz-muted); font: 400 var(--rz-text-label-size)/1.4 var(--rz-font-mono); }
/* A subagent's passage: a rail in the delegate colour, solid when its return was recorded,
   dashed when inferred. */
.rz-rail { padding-left: var(--rz-space-12); border-left: 2px solid var(--rz-action-delegate); }
.rz-rail--inferred { border-left-style: dashed; }
.rz-rail--open { background: var(--rz-lane-wash); }

/* ---------- Diff ---------- */
.rz-diff {
  margin: 0;
  padding: var(--rz-space-6) 0;
  overflow-x: auto;
  border: 1px solid var(--rz-line);
  border-radius: var(--rz-radius-md);
  background: var(--rz-raised);
  color: var(--rz-ink);
  font: 400 var(--rz-text-label-size)/1.6 var(--rz-font-mono);
  white-space: pre;
  tab-size: 4;
}
.rz-diff__body { display: inline-block; min-width: 100%; }
.rz-diff__line { display: block; padding: 0 var(--rz-space-10); }
.rz-diff__marker { display: inline-block; width: 2ch; color: var(--rz-faint); font-weight: 600; user-select: none; }
.rz-diff__line--add { background: var(--rz-diff-add); color: var(--rz-diff-add-text); }
.rz-diff__line--add .rz-diff__marker { color: var(--rz-action-edit); }
.rz-diff__line--del { background: var(--rz-diff-del); color: var(--rz-diff-del-text); }
.rz-diff__line--del .rz-diff__marker { color: var(--rz-harm); }
.rz-diff__line--del .rz-diff__text {
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--rz-harm) 55%, transparent);
}
.rz-diff__line--hunk { background: var(--rz-diff-hunk); color: var(--rz-diff-hunk-text); }
.rz-diff__line--file { color: var(--rz-muted); font-weight: 500; }
.rz-diff__line--meta { color: var(--rz-muted); font-style: italic; }

/* ---------- From the CLI ---------- */
/* The terminal command that does what the screen does. Docked under the content on a screen you read once;
   a bubble in the corner on a screen that scrolls on. Each command is a comment, the command, then a blank
   line. A command we have not built yet carries a dashed "proposed" tag. */
.rz-cli { color: var(--rz-ink); font: var(--rz-text-small); }
.rz-cli[hidden] { display: none; }
.rz-cli__title {
  margin: 0;
  font: var(--rz-text-label);
  letter-spacing: var(--rz-text-label-tracking);
  text-transform: uppercase;
  color: var(--rz-muted);
}
.rz-cli__lines {
  display: grid;
  gap: 1.6em;
  margin: 0;
  padding: var(--rz-space-10) var(--rz-space-12);
  overflow-x: auto;
  list-style: none;
  border: 1px solid var(--rz-line);
  border-radius: var(--rz-radius-md);
  background: var(--rz-raised);
  font: 400 var(--rz-text-data-size)/1.6 var(--rz-font-mono);
  font-variant-ligatures: none;
}
.rz-cli__line { display: grid; min-width: 0; }
.rz-cli__note { color: var(--rz-muted); }
.rz-cli__row { display: flex; align-items: baseline; gap: var(--rz-space-8); min-width: 0; }
.rz-cli__prompt { flex: none; color: var(--rz-faint); user-select: none; }
.rz-cli .rz-cli__cmd {
  min-width: 0;
  padding: 0;
  background: none;
  color: var(--rz-ink);
  font: inherit;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}
.rz-cli__row .rz-tag { flex: none; }
.rz-cli__copy,
.rz-cli__close {
  flex: none;
  margin-left: auto;
  padding: 0 var(--rz-space-6);
  border: 1px solid transparent;
  border-radius: var(--rz-radius-sm);
  background: transparent;
  color: var(--rz-muted);
  font: 500 var(--rz-text-label-size)/1.6 var(--rz-font-body);
  cursor: pointer;
}
.rz-cli__copy:hover,
.rz-cli__close:hover { border-color: var(--rz-line-strong); color: var(--rz-ink); }

.rz-cli--dock {
  display: grid;
  grid-column: 1 / -1;
  gap: var(--rz-space-8);
  margin-top: var(--rz-space-32);
  min-width: 0;
}

.rz-cli--bubble {
  position: fixed;
  z-index: 40;
  right: var(--rz-space-16);
  bottom: calc(var(--rz-space-16) + env(safe-area-inset-bottom, 0px));
  display: grid;
  justify-items: end;
  gap: var(--rz-space-8);
  max-width: calc(100vw - 2 * var(--rz-space-16));
}
.rz-cli__pill {
  display: inline-flex;
  align-items: center;
  gap: var(--rz-space-8);
  max-width: min(420px, 100%);
  min-height: var(--rz-control-lg);
  padding: 0 var(--rz-space-14);
  border: 1px solid var(--rz-line-strong);
  border-radius: var(--rz-radius-pill);
  background: var(--rz-raised);
  color: var(--rz-ink);
  font: 400 var(--rz-text-data-size)/1.2 var(--rz-font-mono);
  font-variant-ligatures: none;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.08), 0 6px 20px rgb(0 0 0 / 0.14);
  cursor: pointer;
}
.rz-cli__pill:hover { border-color: var(--rz-muted); }
.rz-cli__pill .rz-cli__cmd { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rz-cli__more { flex: none; color: var(--rz-muted); font: 500 var(--rz-text-label-size)/1 var(--rz-font-body); }
.rz-cli__card {
  display: none;
  gap: var(--rz-space-8);
  width: min(560px, calc(100vw - 2 * var(--rz-space-16)));
  max-height: min(60vh, 520px);
  overflow-y: auto;
  padding: var(--rz-space-12) var(--rz-space-14);
  border: 1px solid var(--rz-line-strong);
  border-radius: var(--rz-radius-xl);
  background: var(--rz-surface);
  box-shadow: 0 2px 4px rgb(0 0 0 / 0.08), 0 12px 32px rgb(0 0 0 / 0.16);
}
.rz-cli[data-open] .rz-cli__card { display: grid; }
.rz-cli__head { display: flex; align-items: center; gap: var(--rz-space-8); }

/* Dreamz's page: the shell around the Recurz components (packages/recurz-ui-ts/css). The layout follows Observerz's;
   every colour is a token, so the page follows the theme. */
body { background: var(--rz-ground); color: var(--rz-ink); font: var(--rz-text-body); }

.dz-skip { position: absolute; left: 8px; top: -48px; z-index: 10; padding: 8px 12px; border-radius: var(--rz-radius-md); background: var(--rz-surface); color: var(--rz-ink); }
.dz-skip:focus { top: 8px; }
.app-main:focus { outline: none; }

/* Sub-nav: one link per tab. */
.app-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px; padding: 0 24px; border-bottom: 1px solid var(--rz-line); background: var(--rz-surface); }
.app-sub[hidden] { display: none; }
.app-sub__tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 0 22px; min-width: 0; }
.app-sub .rz-nav__link { padding: 12px 0; }

.app-main { margin: 0 auto; display: grid; gap: 14px; max-width: 1180px; padding: 20px 24px 48px; min-width: 0; }
.dz-view { display: grid; gap: 20px; min-width: 0; }
.dz-view[hidden] { display: none; }
.status { white-space: pre-wrap; color: var(--rz-harm); font: var(--rz-text-small); }
.status:empty { display: none; }

/* Signed out. */
.landing { display: grid; gap: 16px; max-width: 720px; padding: 24px 0; }
.landing[hidden] { display: none; }
.landing__title { font: var(--rz-text-display); letter-spacing: var(--rz-text-display-tracking); margin: 0; }
.landing__points { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; font: var(--rz-text-small); }
.landing__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.login { display: grid; gap: 8px; max-width: 560px; }
.login[hidden] { display: none; }
.login__row { display: flex; flex-wrap: wrap; gap: 8px; }
.login__row .rz-input { flex: 1 1 240px; width: auto; }

/* Loading. */
.pending { display: grid; gap: 10px; }
.pending[hidden] { display: none; }
.pending__bar, .pending__row { border-radius: var(--rz-radius-lg); background: var(--rz-sunken); animation: pending 1.2s ease-in-out infinite alternate; }
.pending__bar { height: 36px; }
.pending__row { height: 44px; }
@keyframes pending { from { opacity: 0.55; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pending__bar, .pending__row { animation: none; } }

/* Type and shared parts. */
.dz-title { font: var(--rz-text-title); letter-spacing: var(--rz-text-title-tracking); margin: 0; }
.dz-headline { font: var(--rz-text-display); letter-spacing: var(--rz-text-display-tracking); margin: 0; overflow-wrap: anywhere; }
.dz-headline--sm { font: var(--rz-text-title); letter-spacing: var(--rz-text-title-tracking); }
.dz-title:focus, .dz-headline:focus { outline: none; }
.dz-title:focus-visible, .dz-headline:focus-visible { outline: 2px solid var(--rz-focus); outline-offset: 2px; }
.dz-meta { margin: 0; color: var(--rz-muted); font: var(--rz-text-small); }
.dz-lede { display: grid; gap: 10px; }
.dz-lede__text { margin: 0; color: var(--rz-muted); max-width: 70ch; }
.dz-note { margin: 0; padding: 8px 12px; border-left: 3px solid var(--rz-line-strong); background: var(--rz-sunken); border-radius: var(--rz-radius-sm); font: var(--rz-text-small); }
.dz-callout-line { margin: 0; font: var(--rz-text-small); }
.dz-none { margin: 0; color: var(--rz-muted); font: var(--rz-text-small); }
.dz-more { justify-self: start; font: var(--rz-text-small); color: var(--rz-link); }
.dz-section { display: grid; gap: 12px; min-width: 0; }
.dz-section__title { margin: 0; font: var(--rz-text-label); letter-spacing: var(--rz-text-label-tracking); text-transform: uppercase; color: var(--rz-muted); }
.dz-list { display: grid; gap: 12px; }

/* Two columns on a wide screen, one on a narrow one. */
.dz-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start; }
.dz-main { display: grid; gap: 26px; min-width: 0; }
.dz-aside { display: grid; gap: 14px; min-width: 0; }
.dz-aside__note { margin: 0; color: var(--rz-muted); font: var(--rz-text-small); }
.dz-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }

/* The night picker. */
.dz-day { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dz-day__label { color: var(--rz-muted); font: var(--rz-text-small); }
.dz-day__input { width: auto; max-width: 11rem; }

/* Morning items. */
.dz-item { gap: 10px; }
.dz-item--correction { border-color: var(--rz-kept); box-shadow: inset 4px 0 0 var(--rz-kept); }
.dz-item__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; }
.dz-item__title { margin: 0; font: var(--rz-text-heading); overflow-wrap: anywhere; min-width: 0; flex: 1 1 16rem; }
.dz-item__text { margin: 0; overflow-wrap: anywhere; }
.dz-item__state { margin: 0; font: var(--rz-text-small); color: var(--rz-ink); }
.dz-item__state:empty { display: none; }
.dz-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.dz-proposal { display: grid; gap: 8px; min-width: 0; }
.dz-proposal__head { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.dz-proposal__text { margin: 0; font: var(--rz-text-small); overflow-wrap: anywhere; }
.dz-proposal .rz-diff { max-width: 100%; }

/* Cited sessions and their quotes. */
.dz-cites { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 0; font: var(--rz-text-small); color: var(--rz-muted); }
.dz-cites__lead { margin-right: 2px; }
.dz-cite { padding: 0 6px; border: 1px solid var(--rz-line); border-radius: var(--rz-radius-sm); background: var(--rz-sunken); color: var(--rz-ink); font: 500 var(--rz-text-label-size)/1.6 var(--rz-font-mono); text-decoration: none; }
.dz-cite:hover { border-color: var(--rz-line-strong); }
.dz-evidence { font: var(--rz-text-small); }
.dz-evidence > summary { cursor: pointer; color: var(--rz-muted); width: fit-content; }
.dz-quotes { display: grid; gap: 10px; margin: 8px 0 0; padding: 0; list-style: none; }
.dz-quote { margin: 0; padding-left: 10px; border-left: 3px solid var(--rz-kept); overflow-wrap: anywhere; }
.dz-quote__from { margin: 2px 0 0 13px; color: var(--rz-muted); }

/* Ratings. */
.dz-rate { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.dz-rate__btn[aria-pressed="true"] { color: var(--rz-ink); background: var(--rz-selected); border-color: var(--rz-line-strong); }
.dz-rate__btn:disabled { border-style: solid; border-color: transparent; cursor: default; }
.dz-rate__btn[aria-pressed="true"]:disabled { border-color: var(--rz-line-strong); color: var(--rz-ink); }
.dz-rate__done { color: var(--rz-muted); font: var(--rz-text-small); }
.dz-rate__done:empty { display: none; }
.dz-rate__form, .dz-why { display: grid; gap: 6px; flex: 1 1 100%; }
.dz-rate__form[hidden], .dz-why[hidden] { display: none; }
.dz-rate__label { font: var(--rz-text-small); color: var(--rz-muted); }
.dz-rate__row { display: flex; flex-wrap: wrap; gap: 6px; }
.dz-rate__row .rz-input { flex: 1 1 14rem; width: auto; min-width: 0; }
.dz-close { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding-top: 12px; border-top: 1px solid var(--rz-line); }
.dz-close__q { margin: 0; font: var(--rz-text-small); color: var(--rz-muted); }

/* Stats. */
.dz-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: 12px; margin: 0; }
.dz-stats div { display: flex; flex-direction: column-reverse; gap: 2px; min-width: 0; }
.dz-stats dt { color: var(--rz-muted); font: var(--rz-text-small); }
.dz-stats dd { margin: 0; font: var(--rz-text-data); font-size: 1.25rem; overflow-wrap: anywhere; }
.dz-zoom { display: block; overflow-wrap: anywhere; }

/* Summaries. */
.dz-crumbs ol { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; font: var(--rz-text-small); color: var(--rz-muted); }
.dz-crumbs li { display: flex; gap: 4px; min-width: 0; overflow-wrap: anywhere; }
.dz-crumbs li + li::before { content: "›"; color: var(--rz-faint); }
.dz-crumbs [aria-current="page"] { color: var(--rz-ink); font-weight: 600; }
.dz-source { margin: 0; }
.dz-summary { gap: 14px; }
.dz-lines { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.dz-line { display: grid; gap: 6px; padding-bottom: 12px; border-bottom: 1px solid var(--rz-line); min-width: 0; }
.dz-line:last-child { border-bottom: 0; padding-bottom: 0; }
.dz-line__body { display: flex; gap: 10px; align-items: baseline; min-width: 0; }
.dz-line__kind { flex: 0 0 auto; }
.dz-line__text { margin: 0; overflow-wrap: anywhere; min-width: 0; }
.dz-rail__list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.dz-rail__item { display: grid; gap: 1px; padding: 6px 10px; border-radius: var(--rz-radius-md); color: var(--rz-ink); text-decoration: none; }
a.dz-rail__item:hover { background: var(--rz-sunken); }
.dz-rail__item[aria-current="page"] { background: var(--rz-selected); box-shadow: inset 3px 0 0 var(--rz-accent); }
.dz-rail__item--off { color: var(--rz-muted); }
.dz-rail__name { font-weight: 500; }
.dz-rail__note { color: var(--rz-muted); font: var(--rz-text-small); overflow-wrap: anywhere; }
.dz-zoomlist { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.dz-zoomitem { display: grid; gap: 2px; min-width: 0; }
.dz-zoomitem__link { font-weight: 500; overflow-wrap: anywhere; }
.dz-zoomitem__text { font: var(--rz-text-small); overflow-wrap: anywhere; }
.dz-zoomitem__meta { font: var(--rz-text-small); color: var(--rz-muted); }
.dz-days { display: grid; margin: 0; padding: 0; list-style: none; border: 1px solid var(--rz-line); border-radius: var(--rz-radius-xl); background: var(--rz-surface); }
.dz-dayrow { display: grid; grid-template-columns: 9rem minmax(0, 1fr) auto; gap: 4px 16px; padding: 10px 16px; border-bottom: 1px solid var(--rz-line); align-items: baseline; }
.dz-dayrow:last-child { border-bottom: 0; }
.dz-dayrow__day { font-weight: 500; }
.dz-dayrow__text { overflow-wrap: anywhere; }
.dz-dayrow__meta { color: var(--rz-muted); font: var(--rz-text-small); white-space: nowrap; }

/* Nights. */
.dz-run { align-items: flex-start; }
.dz-run__confirm { display: grid; gap: 10px; flex: 1 1 100%; padding: 12px; border: 1px solid var(--rz-line-strong); border-radius: var(--rz-radius-lg); background: var(--rz-sunken); }
.dz-run__confirm[hidden] { display: none; }
.dz-run__warn { margin: 0; font: var(--rz-text-small); }
.dz-run__field { max-width: 14rem; }
.dz-run__said { margin: 0; flex: 1 1 100%; font: var(--rz-text-small); }
.dz-run__said:empty { display: none; }
.dz-nights { display: grid; margin: 0; padding: 0; list-style: none; border: 1px solid var(--rz-line); border-radius: var(--rz-radius-xl); background: var(--rz-surface); }
.dz-nightrow { display: grid; gap: 4px; padding: 12px 16px; border-bottom: 1px solid var(--rz-line); min-width: 0; }
.dz-nightrow:last-child { border-bottom: 0; }
.dz-nightrow__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.dz-nightrow__link { font-weight: 600; }
.dz-nightrow__text { margin: 0; overflow-wrap: anywhere; }
.dz-nightrow__meta { margin: 0; color: var(--rz-muted); font: var(--rz-text-small); overflow-wrap: anywhere; }
.dz-status { display: inline-flex; align-items: center; padding: 0 8px; border: 1px solid var(--rz-line-strong); border-radius: var(--rz-radius-pill); font: 500 var(--rz-text-label-size)/1.6 var(--rz-font-body); color: var(--rz-muted); white-space: nowrap; }
.dz-status--succeeded { border-color: var(--rz-passed); color: var(--rz-ink); background: var(--rz-passed-wash); }
.dz-status--failed, .dz-status--cancelled { border-color: var(--rz-harm); color: var(--rz-harm); background: var(--rz-harm-wash); }
.dz-status--planned, .dz-status--submitted { border-style: dashed; color: var(--rz-ink); }
.dz-readlist { display: grid; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.dz-readlist li { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.dz-readlist__meta { color: var(--rz-muted); }
.dz-props { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.dz-proprow { display: grid; gap: 4px; padding: 10px 14px; border: 1px solid var(--rz-line); border-radius: var(--rz-radius-lg); background: var(--rz-surface); min-width: 0; }
.dz-proprow__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; }
.dz-proprow__title { font-weight: 500; overflow-wrap: anywhere; }
.dz-proprow__state { margin: 0; font: var(--rz-text-small); color: var(--rz-muted); overflow-wrap: anywhere; }
.dz-feedback { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font: var(--rz-text-small); }
.dz-feedback li { overflow-wrap: anywhere; }
.dz-feedback__rating { font-weight: 600; }
.dz-feedback__rating--down { color: var(--rz-harm); }
.dz-feedback__when { display: block; color: var(--rz-muted); }
.dz-main--narrow { max-width: 880px; }
.rz-table tbody th { background: transparent; color: var(--rz-ink); font: var(--rz-text-small); text-transform: none; letter-spacing: normal; }

/* Settings. */
.dz-settings { display: grid; gap: 16px; max-width: 820px; }
.dz-group { margin: 0; gap: 14px; }
.dz-group__title { padding: 0 4px; font: var(--rz-text-heading); }
.dz-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.dz-settings .rz-field__hint, .dz-checks .rz-field__hint { font: var(--rz-text-small); }
.dz-checks { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.dz-checks legend { padding: 0; margin-bottom: 6px; }
.dz-checks__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 4px 12px; }
.dz-checks__grid--days { grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); }
.dz-check { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-height: 32px; cursor: pointer; overflow-wrap: anywhere; min-width: 0; }
.dz-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--rz-accent); }
.dz-check__hint { color: var(--rz-muted); font: var(--rz-text-small); }
.dz-check--wide { font-weight: 500; }
.dz-save { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.dz-save__said { margin: 0; font: var(--rz-text-small); }
.dz-off { border-style: dashed; }

@media (max-width: 960px) {
  .dz-layout { grid-template-columns: minmax(0, 1fr); }
  .dz-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .app-sub, .app-main { padding-left: 16px; padding-right: 16px; }
  .app-sub__tabs { gap: 0 16px; }
  .dz-pair { grid-template-columns: minmax(0, 1fr); }
  .dz-dayrow { grid-template-columns: minmax(0, 1fr); }
  .dz-dayrow__meta { white-space: normal; }
  .dz-headline { font: var(--rz-text-title); }
  .dz-actions .rz-btn { min-height: 44px; flex: 1 1 auto; }
  .dz-day__input { max-width: none; flex: 1 1 10rem; }
}