/* 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); }

/* Observerz page: the Recurz app shell, the landing, mission control (M1) and the zoom (M2).
   Reads Recurz tokens only; tokens.css, base.css and components.css come first. */
[hidden] { display: none !important; }
body { background: var(--rz-ground); color: var(--rz-ink); font: var(--rz-text-body); }
a.plain { color: inherit; text-decoration: none; }
a.plain:hover { text-decoration: underline; }
:root { --st-work: color-mix(in srgb, var(--rz-passed) 70%, var(--rz-surface)); --st-your: var(--rz-kept); --st-loop: var(--rz-harm); --st-quiet: color-mix(in srgb, var(--rz-line-strong) 85%, var(--rz-sunken)); --st-none: var(--rz-sunken); --st-ok: var(--rz-passed); }

.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 .rz-nav__link { padding: 12px 0; }
.app-sub__right { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 6px 0; color: var(--rz-muted); font: var(--rz-text-data); min-width: 0; }
.mc-minutes { width: auto; min-height: 32px; }
.mc-when { display: inline-flex; align-items: center; gap: 6px; }
.mc-end { width: auto; min-height: 32px; padding-block: 2px; }
.app-main { margin: 0 auto; display: grid; gap: 14px; }
.mc-main { max-width: 1440px; padding: 16px 24px 24px; }
.mc-view { display: grid; gap: 14px; min-width: 0; }
.status { white-space: pre-wrap; color: var(--rz-harm); font: var(--rz-text-small); }
.status:empty { display: none; }
.empty { color: var(--rz-muted); font: var(--rz-text-small); margin: 0; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--rz-faint); flex: none; }
.dot--live { background: var(--rz-passed); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rz-passed) 25%, transparent); }
.dot--bad { background: var(--rz-harm); box-shadow: none; }

/* Landing */
.landing { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 32px; align-items: center; padding: 24px 0; }
.landing__copy { display: grid; gap: 16px; align-content: start; }
.landing__title { font: var(--rz-text-display); letter-spacing: var(--rz-text-display-tracking); }
.landing__points { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; font: var(--rz-text-small); }
.landing__preview { margin: 0; }
.landing__preview figcaption { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: baseline; }
.login { display: grid; gap: 8px; max-width: 560px; }
.login__row { display: flex; flex-wrap: wrap; gap: 8px; }
.login__row .rz-input { flex: 1 1 240px; width: auto; }

/* Headline */
.mc-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 28px; }
.mc-big { display: flex; align-items: baseline; gap: 8px; }
.mc-big b { font: 500 1.75rem/1 var(--rz-font-display); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: var(--rz-ink); }
.mc-big span { font: var(--rz-text-small); color: var(--rz-muted); }
.mc-big--hot b { color: var(--st-loop); }
.mc-big--your b { color: var(--rz-waiting); }
.mc-top__note { margin-left: auto; font: var(--rz-text-data); color: var(--rz-muted); }

.mc-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.mc-side { display: grid; gap: 14px; min-width: 0; }
.mc-panel { display: grid; gap: 10px; align-content: start; min-width: 0; padding: 12px 14px 14px; 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); }
.mc-panel--hot { border-color: var(--st-loop); box-shadow: 0 0 0 1px var(--st-loop); }
.mc-panel__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.mc-panel__title { font: var(--rz-text-label); letter-spacing: var(--rz-text-label-tracking); text-transform: uppercase; color: var(--rz-muted); margin: 0; }

/* Strips: one row per session, one cell per minute, now on the right */
.strips { display: grid; gap: 2px; }
.strip { display: grid; grid-template-columns: 200px minmax(0, 1fr) 96px; gap: 10px; align-items: center; padding: 2px 4px; border: 0; border-radius: 4px; background: transparent; color: var(--rz-ink); font: inherit; text-align: left; width: 100%; }
button.strip { cursor: pointer; }
button.strip:hover { background: var(--rz-sunken); }
.strip.is-sel { background: var(--rz-selected); box-shadow: inset 2px 0 0 var(--rz-accent); }
.strip.is-hot .strip__name, .strip.is-hot .strip__state { color: var(--st-loop); font-weight: 600; }
.strip.is-your .strip__state { color: var(--rz-waiting); }
.strip__name { font: 500 11px/1.3 var(--rz-font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.strip__cells { display: flex; gap: 1px; height: 10px; overflow: hidden; }
.strips--dense .strip__cells { gap: 0; }
.strip__state { font: 400 10.5px/1.2 var(--rz-font-mono); color: var(--rz-muted); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cell { flex: 1 1 0; min-width: 0; border-radius: 1.5px; background: var(--st-none); }
.strips--dense .cell { border-radius: 0; }
.cell--work { background: var(--st-work); }
/* History shades: more model calls in a bucket is darker. */
.cell--work.l1 { background: color-mix(in srgb, var(--rz-passed) 30%, var(--rz-surface)); }
.cell--work.l2 { background: color-mix(in srgb, var(--rz-passed) 60%, var(--rz-surface)); }
.cell--work.l3 { background: var(--rz-passed); }
.strip--axis { padding-block: 0; }
.strip--axis .axis { display: flex; justify-content: space-between; font: 400 10.5px/1.2 var(--rz-font-mono); color: var(--rz-muted); white-space: nowrap; }
.cell--loop { background: var(--st-loop); }
.cell--your_turn { background: var(--st-your); }
.cell--quiet { background: var(--st-quiet); }
.cell--none { background: var(--st-none); }
.cell.is-now { box-shadow: inset 0 0 0 1px var(--rz-line-strong); }
.st-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font: 400 11px/1.4 var(--rz-font-mono); color: var(--rz-muted); }
.st-legend span { display: inline-flex; align-items: center; gap: 6px; }
.st-legend i { display: inline-block; width: 10px; height: 8px; border-radius: 2px; }
.st-legend i + i { margin-left: -5px; }
.st-legend i.cell--none { box-shadow: inset 0 0 0 1px var(--rz-line); }

/* Findings rollup */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fchip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 2px 8px; border: 1px solid var(--rz-line-strong); border-radius: var(--rz-radius-sm); font: 500 11px/1.5 var(--rz-font-mono); color: var(--rz-muted); background: var(--rz-raised); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fchip:hover { border-color: var(--rz-ink); }
.fchip--loop { border-color: var(--st-loop); color: var(--st-loop); background: color-mix(in srgb, var(--st-loop) 12%, var(--rz-raised)); }
.fchip--your { border-color: var(--rz-kept); color: var(--rz-waiting); background: var(--rz-kept-wash); }

/* Event log */
.log { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; font: 400 11.5px/1.55 var(--rz-font-mono); max-height: 320px; overflow-y: auto; }
.log li { display: grid; grid-template-columns: 62px 10px minmax(0, 1fr) minmax(0, 32%); gap: 8px; align-items: center; padding: 1px 4px; border-radius: 3px; color: var(--rz-muted); }
.log li:first-child { color: var(--rz-ink); background: var(--rz-sunken); }
.log li.is-fail { color: var(--st-loop); }
.log .ev, .log .who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log .who { text-align: right; }

/* Spend */
.spark { width: 100%; height: 86px; display: block; }
.spark .area { fill: color-mix(in srgb, var(--rz-signal) 14%, transparent); }
.spark .ln { fill: none; stroke: var(--rz-signal); stroke-width: 2; vector-effect: non-scaling-stroke; }
.spark .hot { fill: none; stroke: var(--st-loop); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.spark-axis { display: flex; justify-content: space-between; font: var(--rz-text-data); color: var(--rz-muted); }
.spenders { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font: var(--rz-text-data); }
.spenders li { display: grid; grid-template-columns: minmax(0, 1fr) 70px minmax(0, max-content); gap: 8px; align-items: center; }
.spenders a, .spenders span.plain { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spenders .bar { height: 4px; border-radius: 1px; background: var(--rz-sunken); overflow: hidden; }
.spenders .bar span { display: block; height: 100%; background: var(--rz-kept); }
.spenders li.hot, .spenders li.hot a { color: var(--st-loop); }
.spenders li.hot .bar span { background: var(--st-loop); }
.spenders .amt { text-align: right; white-space: nowrap; }
.today { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding-top: 8px; border-top: 1px solid var(--rz-line); font: var(--rz-text-data); }

/* Alert bar */
.alert-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 10px 16px; border: 1px solid var(--rz-line); border-left: 3px solid var(--st-loop); border-radius: var(--rz-radius-lg); background: color-mix(in srgb, var(--st-loop) 8%, var(--rz-surface)); }
.alert-bar p { flex: 1 1 24rem; min-width: 0; font: var(--rz-text-small); margin: 0; overflow-wrap: anywhere; }
.pulse { width: 10px; height: 10px; border-radius: 50%; background: var(--st-loop); animation: mc-pulse 1.2s infinite; flex: none; }
@keyframes mc-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--st-loop) 60%, transparent); } 100% { box-shadow: 0 0 0 10px transparent; } }
@media (prefers-reduced-motion: reduce) { .pulse { animation: none; } }

/* Zoom */
.page-head { display: grid; gap: 6px; min-width: 0; }
.page-head h1 { font: var(--rz-text-title); overflow-wrap: anywhere; }
.zoom-path { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font: var(--rz-text-small); color: var(--rz-muted); }
.zstrips .strip { padding: 1px 4px; }
.zstrips .strip__cells { height: 8px; }
.cols { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }
.col-main { flex: 999 1 560px; min-width: 0; display: grid; gap: 14px; }
.col-side { flex: 1 1 280px; min-width: 0; display: grid; gap: 14px; }
.rz-facts a { color: var(--rz-link); }
.steps-scroll { overflow-x: auto; padding: 2px 2px 6px; }
.steps { display: grid; grid-auto-flow: column; grid-auto-columns: 30px; grid-template-rows: auto 48px; column-gap: 5px; row-gap: 6px; width: max-content; }
.block { grid-row: 2; width: 30px; height: 48px; border: 0; border-radius: var(--rz-radius-sm); cursor: pointer; background: var(--rz-a, var(--rz-action-other)); display: grid; place-items: end center; padding: 0 0 4px; color: var(--rz-surface); font: 600 11px/1 var(--rz-font-mono); }
.block:hover { filter: brightness(1.1); }
.block:focus-visible { outline: 2px solid var(--rz-focus, var(--rz-ink)); outline-offset: 2px; }
.block.is-fail { background: var(--st-loop); }
.block.is-sel { box-shadow: 0 0 0 2px var(--rz-surface), 0 0 0 4px var(--rz-ink); }
.block--text { height: 28px; align-self: end; opacity: 0.75; }
.bracket { grid-row: 1; display: flex; flex-direction: column-reverse; align-items: center; gap: 3px; min-width: 0; color: var(--st-loop); font: 600 11.5px/1.2 var(--rz-font-mono); white-space: nowrap; }
.bracket::after { content: ""; align-self: stretch; height: 7px; border: 2px solid var(--st-loop); border-bottom: 0; border-radius: var(--rz-radius-xs) var(--rz-radius-xs) 0 0; }
.bracket--ok { color: var(--st-ok); }
.bracket--ok::after { border-color: var(--st-ok); }
.step-detail { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--rz-line); border-radius: var(--rz-radius-md); background: var(--rz-raised); font: var(--rz-text-small); min-width: 0; }
.step-detail__head { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.step-detail pre, .finding-card pre { margin: 0; max-height: 260px; overflow: auto; padding: 8px 10px; border-radius: var(--rz-radius-sm); background: var(--rz-sunken); white-space: pre-wrap; overflow-wrap: anywhere; font: 400 11.5px/1.5 var(--rz-font-mono); color: var(--rz-ink); }
.finding-card { display: grid; gap: 10px; padding: 16px 18px; border: 1px solid var(--st-loop); box-shadow: inset 3px 0 0 var(--st-loop); border-radius: var(--rz-radius-xl); background: var(--rz-surface); min-width: 0; }
.finding-card--ok { border-color: var(--st-ok); box-shadow: inset 3px 0 0 var(--st-ok); }
.finding-card p { margin: 0; }
.stepin { display: grid; gap: 10px; }
.stepin p { margin: 0; }
.stepin__form { display: grid; gap: 8px; }
.stepin__buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.stepin__confirm { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid var(--rz-line-strong); border-radius: var(--rz-radius-md); background: var(--rz-raised); }
.stepin__confirm[hidden] { display: none; }
.stepin .rz-btn:disabled, .stepin textarea:disabled { opacity: 0.55; cursor: not-allowed; }
.stepin__note:empty { display: none; }
.stepin__log { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.stepin__log:empty { display: none; }
.stepin__item { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 8px 0; border-top: 1px solid var(--rz-line); font: var(--rz-text-small); }
.stepin__what { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.stepin__item--cancelled .stepin__what > span:first-child { text-decoration: line-through; color: var(--rz-muted); }
.suggest { display: grid; gap: 8px; margin: 4px 0 10px; padding: 10px 12px; border: 1px solid var(--rz-line-strong); border-radius: var(--rz-radius-md); background: var(--rz-raised); }
.suggest[hidden], .suggest [hidden] { display: none; }
.suggest p { margin: 0; }
.suggest__text { overflow-wrap: anywhere; }
.suggest .rz-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.suggest p:empty { display: none; }
.tree { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.tree li { display: grid; gap: 2px; }
.tree li .rz-lane--sub + span { padding-left: 18px; }
.tree .rz-lane { min-width: 0; overflow-wrap: anywhere; }

@media (max-width: 1100px) {
  .mc-grid, .landing { grid-template-columns: minmax(0, 1fr); }
  /* One column: the side columns dissolve so findings come right after the fleet. */
  .mc-grid .mc-side { display: contents; }
  .mc-o1 { order: 1; } .mc-o2 { order: 2; } .mc-o3 { order: 3; } .mc-o4 { order: 4; }
}
@media (max-width: 720px) {
  .app-sub { padding: 0 16px; }
  .app-sub__right { margin-left: 0; }
  .mc-main { padding: 12px 16px 16px; }
  .landing { padding: 8px 0; gap: 20px; }
  .landing__title { font: var(--rz-text-title); font-size: 1.75rem; }
  /* Name and state on one line, the minutes full width under them. */
  .strip { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name state" "cells cells"; gap: 2px 8px; padding: 3px 4px; }
  .strip__name { grid-area: name; } .strip__state { grid-area: state; } .strip__cells, .strip--axis .axis { grid-area: cells; }
  .strip__cells { gap: 0; }
  .cell { border-radius: 0; }
  .mc-top { gap: 8px 18px; }
  .mc-big b { font-size: 1.35rem; }
  .mc-top__note { margin-left: 0; flex-basis: 100%; }
  .log li { grid-template-columns: 56px 10px minmax(0, 1fr); }
  .log .who { grid-column: 3; text-align: left; }
  .stepin__item { grid-template-columns: 56px minmax(0, 1fr); }
  .stepin__item .rz-btn { grid-column: 2; justify-self: start; }
}
/* Recurz sign-in: the button first, the pasted token behind a secondary button. */
.landing__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.login[hidden] { display: none; }
/* Signed in, while Recurz sign-in loads: the shape of mission control instead of the landing. */
.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; } }

/* Sub-nav tabs: Mission control, Usage, Rhythm, Fixes, Machines, Guards; each tab's controls on the right. */
.app-sub__tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 0 22px; min-width: 0; }
.app-sub__tabs .rz-nav__link { display: inline-flex; align-items: center; gap: 6px; }
.nav-count { padding: 0 6px; font-size: 10.5px; line-height: 1.5; background: var(--rz-kept-wash); color: var(--rz-waiting); border-color: var(--rz-kept); }
.seg { display: inline-flex; border: 1px solid var(--rz-line-strong); border-radius: var(--rz-radius-md); overflow: hidden; max-width: 100%; }
.seg button { min-height: 32px; padding: 0 12px; border: 0; border-right: 1px solid var(--rz-line); background: var(--rz-surface); color: var(--rz-muted); font: var(--rz-text-label); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; white-space: nowrap; }
.seg button:last-child { border-right: 0; }
.seg button:hover { color: var(--rz-ink); }
.seg button[aria-pressed="true"] { background: var(--rz-ink); color: var(--rz-on-ink); }
.seg button:focus-visible { outline: 2px solid var(--rz-ink); outline-offset: -2px; }
.tab-note { margin: 0; }

/* Series colours, in rank order; k5 is "other". */
.k1 { background: var(--rz-stripe-1); }
.k2 { background: var(--rz-kept); }
.k3 { background: var(--rz-action-edit); }
.k4 { background: color-mix(in srgb, var(--rz-signal) 80%, var(--rz-surface)); }
.k5 { background: var(--rz-line-strong); }
.kpeak { background: var(--rz-ink); }
.spenders .bar span.k1 { background: var(--rz-stripe-1); }
.spenders .bar span.k2 { background: var(--rz-kept); }
.spenders .bar span.k3 { background: var(--rz-action-edit); }
.spenders .bar span.k4 { background: color-mix(in srgb, var(--rz-signal) 80%, var(--rz-surface)); }
.spenders .bar span.k5 { background: var(--rz-line-strong); }
.keys { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font: 400 11px/1.4 var(--rz-font-mono); color: var(--rz-muted); }
.keys > span { display: inline-flex; align-items: center; gap: 6px; }
.keys i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; flex: none; }
.keys > span.keys__ramp { gap: 2px; }
.kind { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font: 500 11px/1.5 var(--rz-font-mono); }
.kind i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; flex: none; }
.share { height: 4px; border-radius: 1px; background: var(--rz-sunken); overflow: hidden; min-width: 60px; }
.share span { display: block; height: 100%; }
.mix .kind { white-space: nowrap; }
.mix td:last-child { width: 22%; }

/* Stacked day columns */
.bars { display: flex; align-items: flex-end; gap: 3px; height: 220px; padding-top: 8px; border-bottom: 1px solid var(--rz-line); }
.bars__day { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column-reverse; border: 0; padding: 0; margin: 0; background: var(--rz-line); cursor: pointer; border-radius: 2px 2px 0 0; overflow: hidden; }
.bars__day:hover { filter: brightness(1.08); box-shadow: 0 0 0 1px var(--rz-line-strong); }
.bars__day.is-sel { box-shadow: 0 0 0 2px var(--rz-ink); }
.bars__day:focus-visible { outline: 2px solid var(--rz-ink); outline-offset: 1px; }
.bars__seg { display: block; width: 100%; flex: none; }
.bars-axis { display: flex; justify-content: space-between; gap: 6px; font: var(--rz-text-data); color: var(--rz-muted); white-space: nowrap; }

/* Week heatmap: weekdays down, local hours across */
.heat { display: grid; grid-template-columns: 34px repeat(24, minmax(0, 1fr)); gap: 2px; align-items: center; font: 400 10.5px/1 var(--rz-font-mono); color: var(--rz-muted); }
.heat__c { aspect-ratio: 1.6; min-width: 0; border-radius: 2px; background: var(--rz-sunken); border: 0; padding: 0; cursor: pointer; }
.heat__c.h1, .keys i.h1 { background: color-mix(in srgb, var(--rz-stripe-1) 22%, var(--rz-surface)); }
.heat__c.h2, .keys i.h2 { background: color-mix(in srgb, var(--rz-stripe-1) 45%, var(--rz-surface)); }
.heat__c.h3, .keys i.h3 { background: color-mix(in srgb, var(--rz-stripe-1) 70%, var(--rz-surface)); }
.heat__c.h4, .keys i.h4 { background: var(--rz-stripe-1); }
.heat__c.is-sel { box-shadow: 0 0 0 2px var(--rz-ink); }
.heat__c:focus-visible { outline: 2px solid var(--rz-ink); outline-offset: 1px; }

/* Agents at once: one column per hour */
.conc { display: flex; align-items: flex-end; gap: 1px; height: 120px; border-bottom: 1px solid var(--rz-line); }
.conc i { flex: 1 1 0; min-width: 0; background: color-mix(in srgb, var(--rz-stripe-1) 70%, var(--rz-surface)); border-radius: 1px 1px 0 0; }
.conc i.night { background: color-mix(in srgb, var(--rz-action-edit) 75%, var(--rz-surface)); }
.conc i.peak { background: var(--rz-ink); }

/* Lists */
.list { display: grid; margin: 0; padding: 0; list-style: none; }
.list > li { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--rz-line); }
.list > li:last-child { border-bottom: 0; }
.list__main { flex: 1 1 220px; min-width: 0; display: grid; gap: 2px; }
.list__main a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.loopcards { display: grid; gap: 6px; }
.loopcard { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 10px 12px; border: 1px solid var(--rz-line); border-radius: var(--rz-radius-md); background: var(--rz-raised); color: var(--rz-ink); text-decoration: none; }
.loopcard:hover { border-color: var(--rz-ink); }
.loopcard code { font: var(--rz-text-data); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.loopcard .amt { font: var(--rz-text-data); color: var(--rz-muted); text-align: right; white-space: nowrap; }
.status-cell { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.dot--warn { background: var(--rz-kept); }
.ftable td:nth-child(4) { min-width: 200px; overflow-wrap: anywhere; }
.ftable td:first-child, .ftable .kind { white-space: nowrap; }

/* Machines */
.banner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 16px; border: 1px solid var(--rz-line); border-left: 3px solid var(--rz-kept); border-radius: var(--rz-radius-lg); background: color-mix(in srgb, var(--rz-kept) 9%, var(--rz-surface)); }
.banner__text { flex: 1 1 24rem; min-width: 0; margin: 0; font: var(--rz-text-small); overflow-wrap: anywhere; }
.mini { display: inline-flex; align-items: flex-end; gap: 2px; height: 22px; }
.mini i { width: 7px; background: color-mix(in srgb, var(--rz-stripe-1) 70%, var(--rz-surface)); border-radius: 1px; }
.mini i.zero { background: var(--rz-line); height: 2px; }
.chiprow { display: flex; flex-wrap: wrap; gap: 4px; }
.m-sub { display: block; }
.mtable td { vertical-align: middle; }
.uploads { display: flex; align-items: stretch; gap: 2px; height: 70px; border-bottom: 1px solid var(--rz-line); }
.uploads__h { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column-reverse; }
.uploads__h i { display: block; flex: none; }
.u-mac { background: var(--rz-stripe-1); }
.u-cloud { background: var(--rz-kept); }
.u-none { background: var(--rz-line); height: 2px; }

@media (max-width: 720px) {
  .app-sub__tabs { gap: 0 14px; }
  .bars { height: 160px; gap: 1px; }
  .heat { grid-template-columns: 28px repeat(24, minmax(0, 1fr)); gap: 1px; }
  .heat__hr { font-size: 9px; }
  .conc { gap: 0; }
  .uploads { gap: 1px; }
  /* Tables become one card per row: each cell under its column's name. */
  .rz-table.stack thead { display: none; }
  .rz-table.stack, .rz-table.stack tbody { display: block; }
  .rz-table.stack tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 12px; padding: 10px 12px; border-bottom: 1px solid var(--rz-line); }
  .rz-table.stack tr:last-child { border-bottom: 0; }
  .rz-table.stack td { display: grid; align-content: start; gap: 2px; padding: 0; border: 0; text-align: left; min-width: 0; }
  .rz-table.stack td::before { content: attr(data-label); font: var(--rz-text-label); letter-spacing: var(--rz-text-label-tracking); text-transform: uppercase; color: var(--rz-muted); }
  .rz-table.stack td:first-child { grid-column: 1 / -1; }
  .ftable.stack td:nth-child(4) { grid-column: 1 / -1; min-width: 0; }
  .rz-table.stack td.rz-num { text-align: left; }
  .loopcard { grid-template-columns: minmax(0, 1fr); }
  .loopcard .amt { text-align: left; }
}
/* Phone width: the six tabs stay on one row and scroll sideways, and the header keeps the switcher and
   Sign out on one row. */
@media (max-width: 480px) {
  #account { display: none; }
  .app-sub__tabs { flex-wrap: nowrap; flex-basis: 100%; overflow-x: auto; scrollbar-width: none; }
  .app-sub__tabs::-webkit-scrollbar { display: none; }
  .app-sub__tabs .rz-nav__link { flex: none; }
}

/* Memoryz page (memoryz.recurz.ai): Know, Proposed edits, Facts, Diary, Ideas, Library, Artifacts and one artifact. Reads Recurz tokens only; tokens.css,
   base.css, components.css and Observerz's shell (../ui.css: the sub-nav, landing, panels, headline) come first. */
.mz-main { max-width: 1200px; }
.mz-halves { display: flex; flex-wrap: wrap; gap: 4px 0; }
.mz-half { display: inline-flex; gap: 22px; }
.mz-half + .mz-half { margin-left: 22px; padding-left: 22px; border-left: 1px solid var(--rz-line); }
.mz-report { white-space: nowrap; }
.mz-landing { grid-template-columns: minmax(0, 1fr); max-width: 760px; }

.mz-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.mz-head h1 { font: var(--rz-text-title); letter-spacing: var(--rz-text-title-tracking); margin: 0; }
.mz-head p { margin: 0; }
.mz-sub { font: var(--rz-text-small); color: var(--rz-muted); }
.mz-more { justify-self: start; }

/* Lists of memories, facts and artifacts */
.mz-table td { overflow-wrap: anywhere; }
.mz-when { white-space: nowrap; color: var(--rz-muted); font: var(--rz-text-data); }
.mz-what b { display: block; font-weight: 600; }
.mz-what span { display: block; color: var(--rz-muted); }
.mz-where { color: var(--rz-muted); }
.mz-title-btn { padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.mz-title-btn:hover { text-decoration: underline; }
.mz-detail td { background: var(--rz-sunken); }
.mz-text { margin: 0; max-height: 360px; overflow: auto; white-space: pre-wrap; font: var(--rz-text-data); }
.mz-change--new, .mz-change--current { color: var(--rz-passed); border-color: var(--rz-passed); }
.mz-change--conflicts, .mz-change--conflicting, .mz-change--stale, .mz-change--removed { color: var(--rz-harm); border-color: var(--rz-harm); }
.mz-change--duplicate, .mz-change--superseded { color: var(--rz-kept-text); border-color: var(--rz-kept); }

/* Findings */
.mz-findings { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.mz-finding { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--rz-line); border-radius: var(--rz-radius-lg); background: var(--rz-raised); }
.mz-finding--warn { box-shadow: inset 3px 0 0 var(--rz-kept); }
.mz-finding__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-weight: 600; }
.mz-finding p { margin: 0; font: var(--rz-text-small); color: var(--rz-muted); }
.mz-finding details { font: var(--rz-text-small); }
.mz-finding ul { margin: 6px 0 0; padding-left: 18px; }
.mz-finding li { white-space: pre-wrap; }

/* By category */
.mz-bars { display: grid; gap: 6px; }
.mz-bar { display: grid; grid-template-columns: 120px minmax(0, 1fr) 56px; gap: 10px; align-items: center; font: var(--rz-text-small); }
.mz-bar__track { height: 8px; border-radius: 4px; background: var(--rz-sunken); overflow: hidden; }
.mz-bar__fill { display: block; height: 100%; background: var(--rz-brand-teal); }
.mz-bar b { font: var(--rz-text-data); text-align: right; }
.mz-grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }

/* Coverage */
.mz-cell--low { color: var(--rz-harm); }
.mz-cell--na { color: var(--rz-faint); }

/* Artifacts: browse */
.mz-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mz-filters .rz-input { flex: 1 1 200px; width: auto; min-width: 0; }
.mz-chip { cursor: pointer; }
.mz-chip[aria-pressed="true"] { background: var(--rz-selected); color: var(--rz-ink); border-color: var(--rz-accent); }
.mz-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.mz-card { display: grid; gap: 6px; align-content: start; padding: 12px 14px; border: 1px solid var(--rz-line); border-radius: var(--rz-radius-lg); background: var(--rz-raised); color: inherit; text-decoration: none; }
.mz-card:hover { border-color: var(--rz-line-strong); }
.mz-card h3 { margin: 0; font: var(--rz-text-heading); }
.mz-card p { margin: 0; font: var(--rz-text-small); color: var(--rz-muted); }
.mz-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* One artifact */
.mz-back { font: var(--rz-text-small); }
.mz-lineage { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.mz-lineage li { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--rz-line); }
.mz-lineage li:last-child { border-bottom: 0; }
.mz-lineage li.is-this { background: var(--rz-selected); }
.mz-lineage b { font: var(--rz-text-data); }
.mz-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 14px; margin: 0; font: var(--rz-text-small); }
.mz-dl dt { color: var(--rz-muted); }
.mz-dl dd { margin: 0; }
.mz-quote { margin: 0; padding: 8px 12px; border-left: 3px solid var(--rz-line-strong); background: var(--rz-sunken); white-space: pre-wrap; font: var(--rz-text-small); }

/* Proposed edits */
.mz-props { display: grid; gap: 12px; }
.mz-prop { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--rz-line); border-radius: var(--rz-radius-lg); background: var(--rz-raised); }
.mz-prop__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; }
.mz-prop__title { font-weight: 600; }
.mz-prop p { margin: 0; }
.mz-instruction { white-space: pre-wrap; }
.mz-why { font: var(--rz-text-small); }
.mz-diffs { display: grid; gap: 8px; }
.mz-diff { border: 1px solid var(--rz-line); border-radius: var(--rz-radius); overflow: hidden; }
.mz-diff__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 6px 10px; background: var(--rz-sunken); font: var(--rz-text-small); }
.mz-diff__path { flex: 1 1 240px; min-width: 0; overflow-wrap: anywhere; font: var(--rz-text-data); color: var(--rz-muted); }
.mz-diff__body { margin: 0; padding: 8px 10px; max-height: 320px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font: var(--rz-text-data); }
.mz-da { color: var(--rz-passed); }
.mz-dd { color: var(--rz-harm); text-decoration: line-through; text-decoration-thickness: 1px; }
.mz-dc, .mz-dg { color: var(--rz-muted); }
.mz-write--on { color: var(--rz-passed); border-color: var(--rz-passed); }
.mz-write--off { color: var(--rz-muted); }
.mz-write--copy { color: var(--rz-kept-text); border-color: var(--rz-kept); }
.mz-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mz-actions--edit { display: grid; gap: 8px; }
.mz-edit { width: 100%; resize: vertical; font: inherit; }
.mz-outcome { display: grid; gap: 4px; margin: 0; padding: 8px 12px; border-left: 3px solid var(--rz-passed); background: var(--rz-sunken); font: var(--rz-text-small); }
.mz-outcome ul { margin: 0; padding-left: 18px; }
.mz-outcome--bad { border-left-color: var(--rz-harm); }
.mz-compose { display: grid; gap: 10px; }
.mz-inline { flex: 0 1 200px; width: auto; min-width: 0; }
.mz-select { flex: 0 1 200px; width: auto; min-width: 0; }
.mz-change--accepted { color: var(--rz-passed); border-color: var(--rz-passed); }
.mz-change--dismissed, .mz-change--draft { color: var(--rz-muted); }

/* Diary */
.mz-lead { margin: 0; font: var(--rz-text-heading); }
.mz-list { margin: 4px 0 0; padding-left: 18px; font: var(--rz-text-small); }
.mz-list li + li { margin-top: 2px; }
.mz-focus { display: grid; gap: 8px; margin: 0; padding-left: 20px; }
.mz-focus li { display: grid; gap: 2px; }
.mz-days { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.mz-day { display: grid; gap: 4px; padding: 8px 0; border-bottom: 1px solid var(--rz-line); }
.mz-day:last-child { border-bottom: 0; }
.mz-day p { margin: 0; }
.mz-day__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.mz-day__body { display: grid; gap: 10px; margin-top: 6px; padding: 10px 12px; border-radius: var(--rz-radius); background: var(--rz-sunken); }
.mz-entry { display: grid; gap: 4px; }
.mz-entry p { margin: 0; }

@media (max-width: 760px) {
 .mz-grid2 { grid-template-columns: minmax(0, 1fr); }
 .mz-half + .mz-half { margin-left: 0; padding-left: 0; border-left: 0; }
 .mz-bar { grid-template-columns: 90px minmax(0, 1fr) 44px; }
 .mz-table .mz-hide-sm { display: none; }
}