:root {
  --accent: #1f6e55;
  --accent-strong: #175a45;
  --accent-light: #2e8364;
  --accent-hover: #175a45;
  --accent-active: #114232;
  --accent-text: #17604a;
  --accent-readout: #134a38;
  --accent-tint: rgba(31, 110, 85, 0.12);
  --accent-subtle: rgba(31, 110, 85, 0.07);
  --accent-line: rgba(31, 110, 85, 0.30);
  --accent-active-tint: #e5efe7;
  --accent-contrast: #ffffff;
  --accent-shadow: 31, 110, 85;
  --color-primary: var(--accent);
  --color-primary-hover: var(--accent-hover);
  --color-primary-light: var(--accent-subtle);
  --color-primary-subtle: var(--accent-subtle);
  --color-primary-50: rgba(31, 110, 85, 0.04);
  --color-primary-100: rgba(31, 110, 85, 0.08);
  --color-primary-200: rgba(31, 110, 85, 0.12);
  --color-primary-500: var(--accent);
  --color-primary-600: var(--accent);
  --color-primary-700: var(--accent-hover);
  --theme-accent: var(--accent);
  --theme-accent-strong-hover: var(--accent-strong);
  --theme-accent-hover: var(--accent-hover);
  --theme-accent-subtle: var(--accent-subtle);
  --theme-accent-border: var(--accent-line);
  --theme-accent-contrast: var(--accent-contrast);
  --sb-gold: var(--accent);
  --sb-gold-hover: var(--accent-strong);
  --sb-gold-light: var(--accent-light);
  --sb-gold-subtle: var(--accent-subtle);
  --sb-gold-border: var(--accent-line);
  --accent-fill: initial;
  --accent-select-line: #c5d8ca;
  --dot-done: var(--accent);
  --color-button-primary-bg: var(--accent);
  --color-button-primary-strong-hover: var(--accent-strong);
  --color-button-primary-hover: var(--accent-hover);
  --color-button-ghost-hover: var(--accent-subtle);
  --color-border-focus: var(--accent);
  --color-sidebar-active: var(--accent);
  --color-input-focus-ring: rgba(31, 110, 85, 0.18);
  --theme-surface-selected: rgba(31, 110, 85, 0.1);
  --color-scheme: light;
  --surface-page: #f9f8f4;
  --surface-rail: #f9f8f4;
  --surface-panel: #f6f5f0;
  --surface-inner: #f6f5f0;
  --surface-elevated: #fbfaf7;
  --surface-zebra: #f9f8f4;
  --surface-hover: #f2f1eb;
  --surface-sunken: #eeede7;
  --sb-navy-900: #f9f8f4;
  --sb-navy-800: #e5efe7;
  --sb-navy-700: #eff0eb;
  --sb-navy-600: #e6e5df;
  --theme-page-bg: var(--surface-page);
  --theme-panel-bg: var(--surface-panel);
  --theme-card-bg: var(--surface-panel);
  --theme-card-inner-bg: var(--surface-zebra);
  --theme-elevated-bg: #fbfaf7;
  --theme-bg-elevated: var(--theme-elevated-bg);
  --theme-surface: var(--surface-panel);
  --color-surface: var(--surface-panel);
  --color-bg-page: var(--surface-page);
  --color-bg-container: var(--surface-panel);
  --color-bg-surface: var(--surface-zebra);
  --color-bg-elevated: #fbfaf7;
  --color-bg-primary: var(--surface-panel);
  --color-bg-secondary: var(--surface-page);
  --color-bg-tertiary: var(--surface-zebra);
  --color-bg-inverse: #0c1220;
  --color-card-bg: var(--surface-panel);
  --color-card-inner-bg: var(--surface-zebra);
  --color-card-inner-border: rgba(12, 18, 32, 0.08);
  --color-card-shadow: var(--elev-card);
  --color-modal-bg: #fbfaf7;
  --color-code-bg: #fbfaf7;
  --color-code-text: #0c1220;
  --rail-bg: #f9f8f4;
  --rail-fg: #1d2421;
  --rail-fg-strong: #0c1220;
  --rail-muted: #56635c;
  --rail-line: #e6e5df;
  --rail-hover-bg: #eff0eb;
  --rail-active-bg: #e5efe7;
  --field-bg: #fbfaf7;
  --field-border: #d5d3ca;
  --field-border-hv: #c9c7bf;
  --field-text: #0c1220;
  --field-placeholder: #6e706c;
  --color-input-bg: #fbfaf7;
  --color-input-border: #d5d3ca;
  --color-input-border-hover: #c9c7bf;
  --color-input-border-focus: var(--accent);
  --color-input-text: #0c1220;
  --color-input-placeholder: #5c615e;
  --color-input-disabled-bg: #f6f5f0;
  --color-input-disabled-text: #9a9c97;
  --color-input-error-border: #a8321f;
  --color-button-secondary-bg: #fbfaf7;
  --color-button-secondary-hover: #fbfaf7;
  --color-table-header-bg: var(--surface-panel);
  --color-table-row-hover: var(--surface-hover);
  --theme-chat-user-bubble-bg: rgba(12, 18, 32, 0.07);
  --theme-chat-user-bubble-text: #0c1220;
  --rail-active-fg: #134a38;
  --rail-active-bar-width: 0px;
  --rail-active-ink: var(--rail-active-fg);
  --rail-active-weight: var(--sb-weight-label);
  --rail-active-icon: var(--accent);
  --rail-group-rule-width: 0px;
  --rail-signout-hover-ink: var(--rail-fg-strong);
  --text-heading: #0c1220;
  --text-body: #3b3f48;
  --text-muted: #5c615e;
  --text-faint: #6e706c;
  --text-invert: #f9f8f4;
  --ink-shadow: 12, 18, 32;
  --theme-text-heading: #0c1220;
  --theme-text-body: #3b3f48;
  --theme-text-secondary: #4b5050;
  --theme-text-muted: #5c615e;
  --theme-text-disabled: #9a9c97;
  --theme-text-inverse: #fbfaf7;
  --color-heading: #0c1220;
  --color-text: #3b3f48;
  --color-text-heading: #0c1220;
  --color-text-body: #3b3f48;
  --color-text-secondary: #4b5050;
  --color-text-muted: #5c615e;
  --color-text-tertiary: #5c615e;
  --color-text-disabled: #9a9c97;
  --color-text-inverse: #fbfaf7;
  --color-text-primary: #0c1220;
  --color-text-link: var(--accent-text);
  --color-text-link-hover: var(--accent-strong);
  --sb-text-primary: #0c1220;
  --sb-text-secondary: #4b5050;
  --sb-slate-100: #fbfaf7;
  --sb-slate-200: #d9d7cf;
  --sb-slate-300: #3b3f48;
  --sb-slate-400: #4b5050;
  --sb-slate-500: #5c615e;
  --action-text: var(--accent-text);
  --action-hover-text: var(--accent-text);
  --action-active-text: var(--accent-text);
  --action-tint-text: var(--accent-text);
  --rail-danger-fg: #a8321f;
  --danger-text: var(--color-error-icon);
  --border: #e6e5df;
  --border-strong: #d9d7cf;
  --border-soft: #edece6;
  --border-hc: #86888b;
  --border-strong-hc: #6a6d71;
  --skeleton-sheen: rgba(12, 18, 32, 0.06);
  --theme-border: #e6e5df;
  --theme-border-subtle: rgba(12, 18, 32, 0.08);
  --theme-border-strong: #d9d7cf;
  --theme-line-soft: rgba(12, 18, 32, 0.08);
  --theme-line-subtle: rgba(12, 18, 32, 0.1);
  --theme-line-strong: rgba(12, 18, 32, 0.16);
  --color-border: #e6e5df;
  --color-border-default: #e6e5df;
  --color-border-light: rgba(12, 18, 32, 0.08);
  --color-border-subtle: rgba(12, 18, 32, 0.08);
  --color-border-strong: #d9d7cf;
  --color-border-nav: rgba(12, 18, 32, 0.12);
  --color-card-border: #e6e5df;
  --color-table-border: #e6e5df;
  --color-modal-border: #e6e5df;
  --shadow-none: 0 0 0 0 transparent;
  --elev-0: none;
  --elev-1: 0 0 0 0 transparent;
  --elev-2: 0 0 0 0 transparent;
  --elev-3: 0 1px 2px rgba(12, 18, 32, 0.04), 0 12px 32px -12px rgba(12, 18, 32, 0.16);
  --elev-4: 0 2px 6px rgba(12, 18, 32, 0.05), 0 32px 64px -24px rgba(12, 18, 32, 0.28);
  --elev-card: var(--elev-1);
  --elev-tile: var(--elev-1);
  --elev-raised: var(--elev-3);
  --elev-modal: var(--elev-4);
  --elev-popover: var(--elev-3);
  --elev-hover: var(--elev-1);
  --shadow-sm: var(--elev-card);
  --shadow: var(--elev-card);
  --shadow-md: var(--elev-tile);
  --shadow-lg: var(--elev-modal);
  --shadow-card: var(--elev-card);
  --shadow-button: none;
  --shadow-button-hover: none;
  --sb-shadow-card: var(--elev-card);
  --sb-shadow-modal: var(--elev-modal);
  --theme-shadow-card: var(--elev-card);
  --theme-shadow-modal: var(--elev-modal);
  --theme-tooltip-shadow: var(--elev-popover);
  --scrim-modal: rgba(12, 18, 32, 0.22);
  --theme-overlay-bg: var(--scrim-modal);
  --color-modal-overlay: var(--scrim-modal);
  --theme-overlay-heavy: rgba(12, 18, 32, 0.72);
  --backdrop-blur: 12px;
  --theme-preview-overlay-start: rgba(251, 250, 247, 0.24);
  --theme-preview-overlay-mid: rgba(249, 248, 244, 0.66);
  --theme-preview-overlay-end: rgba(249, 248, 244, 0.95);
  --theme-surface-strong: rgba(251, 250, 247, 0.98);
  --theme-input-shell-bg: rgba(251, 250, 247, 0.98);
  --theme-input-shell-shadow: 0 12px 32px rgba(12, 18, 32, 0.08), 0 0 0 0.5px rgba(12, 18, 32, 0.08);
  --theme-input-shell-shadow-focus: 0 12px 32px rgba(12, 18, 32, 0.1), 0 0 0 0.5px rgba(31, 110, 85, 0.24);
  --theme-surface-emphasis: rgba(12, 18, 32, 0.03);
  --theme-surface-hover: rgba(12, 18, 32, 0.05);
  --theme-table-stripe: rgba(12, 18, 32, 0.03);
  --theme-code-inline-bg: rgba(12, 18, 32, 0.06);
  --theme-code-inline-border: rgba(12, 18, 32, 0.1);
  --theme-code-block-bg: #fbfaf7;
  --theme-code-block-border: rgba(12, 18, 32, 0.1);
  --theme-tooltip-bg: #fbfaf7;
  --theme-tooltip-border: rgba(12, 18, 32, 0.12);
  --theme-scrollbar-thumb: #8c8d88;
  --theme-scrollbar-thumb-hover: #6e706c;
  --theme-scrollbar-track: #f9f8f4;
  --theme-scrollbar-width: 6px;
  --color-code-inline-bg: rgba(12, 18, 32, 0.06);
  --color-success: #2f7a5c;
  --color-success-strong: #1f6e55;
  --color-success-bg: #e1f4f0;
  --color-success-tint: #e1f4f0;
  --color-success-text: #134a38;
  --color-success-contrast: #ffffff;
  --color-status-success-bg: #e1f4f0;
  --color-status-success-text: #134a38;
  --color-success-line: #a8d1ca;
  --color-status-success-border: #a8d1ca;
  --color-status-success-contrast: #ffffff;
  --color-success-icon: #2f7a5c;
  --color-status-success-icon: #2f7a5c;
  --success: #2f7a5c;
  --success-strong: #1f6e55;
  --success-tint: #e1f4f0;
  --success-deep: #134a38;
  --color-warning: #b7791f;
  --color-warning-strong: #8f5c12;
  --color-warning-bg: #f8f0df;
  --color-warning-tint: #f8f0df;
  --color-warning-text: #6b4608;
  --color-warning-contrast: #ffffff;
  --color-status-warning-bg: #f8f0df;
  --color-status-warning-text: #6b4608;
  --color-warning-line: #e8d3a6;
  --color-status-warning-border: #e8d3a6;
  --color-status-warning-contrast: #ffffff;
  --color-warning-icon: #a26a12;
  --color-status-warning-icon: #a26a12;
  --warning: #b7791f;
  --warning-strong: #8f5c12;
  --warning-tint: #f8f0df;
  --warning-deep: #6b4608;
  --color-error: #a8321f;
  --color-error-strong: #872617;
  --color-error-bg: #f8ece8;
  --color-error-tint: #f8ece8;
  --color-error-text: #7c2314;
  --color-error-contrast: #ffffff;
  --color-status-error-bg: #f8ece8;
  --color-status-error-text: #7c2314;
  --color-error-line: #e9c6bd;
  --color-status-error-border: #e9c6bd;
  --color-status-error-contrast: #ffffff;
  --color-error-icon: #a8321f;
  --color-status-error-icon: #a8321f;
  --error: #a8321f;
  --error-strong: #872617;
  --error-tint: #f8ece8;
  --error-deep: #7c2314;
  --color-info: #56635c;
  --color-info-strong: #45514b;
  --color-info-bg: #eef1ef;
  --color-info-tint: #eef1ef;
  --color-info-text: #2f3a35;
  --color-info-contrast: #ffffff;
  --color-status-info-bg: #eef1ef;
  --color-status-info-text: #2f3a35;
  --color-info-line: #d3dad6;
  --color-status-info-border: #d3dad6;
  --color-status-info-contrast: #ffffff;
  --color-info-icon: #56635c;
  --color-status-info-icon: #56635c;
  --info: #56635c;
  --info-strong: #45514b;
  --info-tint: #eef1ef;
  --info-deep: #2f3a35;
  --sb-success: #2f7a5c;
  --sb-error: #a8321f;
  --theme-success-subtle: rgba(47, 122, 92, 0.12);
  --theme-success-border: rgba(47, 122, 92, 0.22);
  --signal-working-contrast: #ffffff;
  --signal-working-icon: #1f6e55;
  --signal-working: #1f6e55;
  --signal-working-hover: #175a45;
  --signal-working-light: #e5efe7;
  --signal-working-deep: #134a38;
  --signal-working-subtle: rgba(31, 110, 85, 0.08);
  --signal-working-border: rgba(31, 110, 85, 0.15);
  --signal-working-tint: rgba(31, 110, 85, 0.16);
  --signal-gold: #1f6e55;
  --signal-gold-hover: #175a45;
  --signal-gold-light: #e5efe7;
  --signal-gold-subtle: rgba(31, 110, 85, 0.08);
  --signal-gold-border: rgba(31, 110, 85, 0.15);
  --signal-gold-tint: rgba(31, 110, 85, 0.16);
  --signal-bronze-deep: #134a38;
  --gold-tint: rgba(31, 110, 85, 0.16);
  --bronze-deep: #134a38;
  --color-selection-solid: #6bb597;
  --color-selection-bg: rgba(107, 181, 151, 0.38);
  --color-selection-text: #0c1220;
  --color-ai-badge: #3B82F6;
  --color-human-badge: #10B981;
  --gradient-ai: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%);
  --gradient-human: linear-gradient(135deg, #10B981 0%, #047857 100%);
  --color-white: #ffffff;
  --color-gray-50: #f9f8f4;
  --color-gray-100: #f2f1eb;
  --color-gray-200: #e6e5df;
  --color-gray-300: #d9d7cf;
  --color-gray-400: #9a9c97;
  --color-gray-500: #6e706c;
  --color-gray-600: #4b5050;
  --color-gray-700: #3b3f48;
  --color-gray-800: #262a28;
  --color-gray-900: #0c1220;
  --sb-white: #fbfaf7;
  --sb-navy-500: #d9d7cf;
  --sb-cream-page: #f9f8f4;
  --sb-cream-card-outer: #f6f5f0;
  --sb-cream-card-inner: #fbfaf7;
  --sb-cream-border: #d9d7cf;
  --radius-sm: 0;
  --radius: 0;
  --radius-control: 0;
  --radius-md: 0;
  --radius-card: 0;
  --radius-lg: 0;
  --radius-modal: 0;
  --radius-xl: 0;
  --radius-pill: 999px;
  --radius-circle: 50%;
  --radius-badge: 999px;
  --radius-avatar: 0;
  --radius-toggle: 999px;
  --radius-chip: 999px;
  --radius-full: var(--radius-badge);
  --radius-chat-shell: 8px;
  --radius-chat-card: 0;
  --radius-chat-control: 8px;
  --radius-select: 8px;
  --radius-float: 12px;
  --rule-accent-display: none;
  --rule-card-width: 1px;
  --rule-card-color: var(--border);
  --rule-callout-width: 0px;
  --font-family: 'Source Serif 4', "Source Serif 4 Fallback", ui-serif, 'Iowan Old Style', Charter, Georgia, serif;
  --font-sans: 'Source Serif 4', "Source Serif 4 Fallback", ui-serif, 'Iowan Old Style', Charter, Georgia, serif;
  --font-heading: 'Source Serif 4', "Source Serif 4 Fallback", ui-serif, 'Iowan Old Style', Charter, Georgia, serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --sb-font-serif: 'Source Serif 4', "Source Serif 4 Fallback", ui-serif, 'Iowan Old Style', Charter, Georgia, serif;
  --sb-font-sans: 'Source Serif 4', "Source Serif 4 Fallback", ui-serif, 'Iowan Old Style', Charter, Georgia, serif;
  --sb-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --sb-text-xs: 0.75rem;
  --sb-text-sm: 0.8125rem;
  --sb-text-base: 0.9375rem;
  --sb-text-md: 1rem;
  --sb-text-lg: 1.125rem;
  --sb-text-xl: 1.25rem;
  --sb-text-2xl: 1.75rem;
  --sb-text-3xl: 2.25rem;
  --sb-text-display: clamp(2.5rem, 1.55rem + 2.2vw, 3.75rem);
  --sb-text-4xl: 2.5rem;
  --sb-text-5xl: var(--sb-text-display);
  --sb-text-6xl: var(--sb-text-display);
  --sb-body-size: 16px;
  --sb-leading-tight: 1.2;
  --sb-leading-snug: 1.375;
  --sb-leading-body: 1.6;
  --sb-leading-relaxed: 1.75;
  --sb-tracking-tight: -0.012em;
  --sb-tracking-display: -0.022em;
  --sb-tracking-body: 0;
  --sb-tracking-eyebrow: 0.12em;
  --sb-weight-heading: 500;
  --sb-weight-body: 400;
  --sb-weight-label: 500;
  --eyebrow-size: 0.75rem;
  --eyebrow-weight: 500;
  --eyebrow-tracking: var(--sb-tracking-eyebrow);
  --eyebrow-transform: uppercase;
  --sb-h1: 2.25rem;
  --sb-h1-leading: 1.12;
  --sb-h1-weight: 500;
  --sb-h1-tracking: -0.018em;
  --sb-h2: 1.75rem;
  --sb-h2-leading: 1.18;
  --sb-h2-weight: 450;
  --sb-h2-tracking: -0.012em;
  --sb-h3: 1.375rem;
  --sb-h3-leading: 1.25;
  --sb-h3-weight: 450;
  --sb-h3-tracking: -0.006em;
  --sb-h4: 1.125rem;
  --sb-h4-leading: 1.3;
  --sb-h4-weight: 500;
  --sb-h4-tracking: 0;
  --sb-h5: 1rem;
  --sb-h5-leading: 1.35;
  --sb-h5-weight: 500;
  --sb-h5-tracking: 0;
  --sb-h6: 0.875rem;
  --sb-h6-leading: 1.4;
  --sb-h6-weight: 500;
  --sb-h6-tracking: 0;
  --page-title-size: clamp(1.75rem, 1.2rem + 1.2vw, 2.25rem);
  --page-title-weight: 500;
  --page-title-leading: 1.12;
  --page-title-tracking: -0.018em;
  --page-display-leading: 1.05;
  --page-lede-size: var(--sb-text-lg);
  --page-display-lede-size: var(--sb-text-xl);
  --page-lede-ink: var(--text-body);
  --page-lede-measure: 60ch;
  --font-numeric: lining-nums tabular-nums;
  --font-figure: var(--font-family);
  --font-figure-numeric: lining-nums tabular-nums;
  --text-label: #56635c;
  --eyebrow-ink: var(--text-label);
  --code-size: 0.92em;
  --code-pad-x: 0.2em;
  --control-font-size-sm: var(--control-font-size);
  --control-font-size-lg: var(--control-font-size);
  --spacing-1: var(--sb-space-1);
  --spacing-2: var(--sb-space-2);
  --spacing-3: var(--sb-space-3);
  --spacing-4: var(--sb-space-4);
  --spacing-5: var(--sb-space-5);
  --spacing-6: var(--sb-space-6);
  --spacing-8: var(--sb-space-8);
  --sb-space-1: 0.25rem;
  --sb-space-2: 0.5rem;
  --sb-space-3: 0.75rem;
  --sb-space-4: 1rem;
  --sb-space-5: 1.25rem;
  --sb-space-6: 1.5rem;
  --sb-space-8: 2rem;
  --sb-space-10: 2.5rem;
  --sb-space-12: 3rem;
  --sb-space-16: 4rem;
  --sb-space-20: 5rem;
  --sb-space-24: 6rem;
  --sb-space-28: 7rem;
  --page-gutter: 24px;
  --page-gutter-mobile: 16px;
  --density: 1;
  --stack-xs: calc(var(--sb-space-2) * var(--density));
  --stack-sm: calc(var(--sb-space-3) * var(--density));
  --stack-md: calc(var(--sb-space-4) * var(--density));
  --stack-lg: calc(var(--sb-space-6) * var(--density));
  --section-gap: calc(var(--sb-space-8) * var(--density));
  --card-pad: calc(var(--sb-space-5) * var(--density));
  --control-pad-y: calc(var(--sb-space-2) * var(--density));
  --field-gap: calc(var(--sb-space-4) * var(--density));
  --control-pad-x: calc(var(--control-padding-x) * var(--density));
  --sb-rail-w: 264px;
  --sb-topbar-h: 56px;
  --sb-appbar-h: 56px;
  --sb-stage-pad-x: clamp(20px, 3.4vw, 72px);
  --sb-stage-pad-top: clamp(24px, 3vw, 56px);
  --sb-stage-pad-bottom: clamp(48px, 5vw, 96px);
  --sb-block-gap: clamp(24px, 2.4vw, 44px);
  --sb-section-space: clamp(40px, 4vw, 72px);
  --sb-grid-gap: clamp(16px, 1.25vw, 24px);
  --sb-surface-pad: clamp(20px, 2vw, 32px);
  --sb-row-pad-y: clamp(14px, 1.4vw, 22px);
  --sb-row-pad-x: clamp(16px, 1.6vw, 24px);
  --sb-measure: 68ch;
  --sb-measure-wide: 88ch;
  --sb-measure-lede: 60ch;
  --sb-split-main: minmax(0, 1fr);
  --sb-split-aside: minmax(18rem, clamp(20rem, 24vw, 28rem));
  --sb-split-gap: clamp(32px, 3.2vw, 64px);
  --sb-sticky-top: 0px;
  --motion-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --motion-ease-emphasized: cubic-bezier(0.4, 0, 0.2, 1);
  --motion-ease-enter: cubic-bezier(0, 0, 0.2, 1);
  --motion-duration-micro: 150ms;
  --motion-duration-move: 220ms;
  --motion-duration-enter: 220ms;
  --sb-transition-micro: var(--motion-duration-micro) var(--motion-ease-standard);
  --sb-transition-move: var(--motion-duration-move) var(--motion-ease-standard);
  --transition-fast: var(--sb-transition-micro);
  --motion-lift: 0px;
  --motion-press: 0px;
  --focus-color: #1f6e55;
  --focus-halo: #fbfaf7;
  --focus-width: 2px;
  --focus-offset: 2px;
  --focus-ring: 0 0 0 2px #fbfaf7, 0 0 0 4px #1f6e55;
  --focus-ring-inset: inset 0 0 0 2px #fbfaf7, inset 0 0 0 4px #1f6e55;
  --focus-color-on-accent: #1f6e55;
  --focus-ring-on-accent: 0 0 0 2px #fbfaf7, 0 0 0 4px #1f6e55;
  --focus-outline: 2px solid #1f6e55;
  --focus-outline-forced: 2px solid transparent;
  --focus-offset-inset: -2px;
  --control-height-sm: 32px;
  --control-height-md: 40px;
  --control-height-lg: 48px;
  --control-padding-x: 0.875rem;
  --control-font-size: var(--sb-body-size);
  --control-min-target: 44px;
  --opacity-disabled: 0.55;
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235c615e' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  --interactive-hover-border: var(--border-strong);
  --button-secondary-hover-bg: var(--accent-active-tint);
  --button-secondary-hover-border: var(--accent-select-line);
  --button-secondary-hover-ink: var(--accent-readout);
  --button-ghost-hover-bg: var(--accent-active-tint);
  --button-ghost-hover-ink: var(--accent-readout);
  --button-disabled-bg: var(--surface-sunken);
  --button-disabled-border: var(--border);
  --button-disabled-ink: var(--text-muted);
  --button-disabled-opacity: 1;
  --viz-series-1: #1f6e55;
  --viz-series-2: #4d6f8f;
  --viz-series-3: #a8741f;
  --viz-series-4: #a8321f;
  --viz-series-5: #5c615e;
  --viz-series-6: #6bb597;
  --viz-seq-from: #e5efe7;
  --viz-seq-to: #175a45;
  --viz-div-neg: #a8321f;
  --viz-div-pos: #1f6e55;
  --viz-grid: var(--border);
  --viz-axis: var(--text-muted);
  --z-raise: 1;
  --z-chrome: 10;
  --z-sticky: 20;
  --z-drawer: 30;
  --z-dropdown: 40;
  --z-popover: 45;
  --z-modal: 50;
  --z-confirm: 60;
  --z-tooltip: 70;
  --z-toast: 80;
  --z-demo-banner: 2147483000;
  --chrome-transform: none;
  --chrome-tracking: 0.005em;
  --table-head-size: 0.75rem;
  --table-head-weight: 500;
  --table-head-tracking: 0.12em;
  --table-head-transform: uppercase;
  --table-head-ink: #56635c;
  --table-head-rule: 1px solid var(--border);
  --icon-stroke: 1.5;
  --stage-texture: linear-gradient(to bottom, #f9f8f4 0, rgba(249, 248, 244, 0) min(48px, clamp(0px, (100vw - 600px) * 0.6, 420px) * 0.25), rgba(249, 248, 244, 0) calc(clamp(0px, (100vw - 600px) * 0.6, 420px) * 0.3), rgba(249, 248, 244, 0.45) calc(clamp(0px, (100vw - 600px) * 0.6, 420px) * 0.6), rgba(249, 248, 244, 0.82) calc(clamp(0px, (100vw - 600px) * 0.6, 420px) * 0.82), #f9f8f4 clamp(0px, (100vw - 600px) * 0.6, 420px)), radial-gradient(rgba(12, 18, 32, 0.035) 0.8px, transparent 1px);
  --stage-texture-size: 100% 100%, 14px 14px;
  --stage-texture-repeat: no-repeat, repeat;
}

body.sb-brand-evergreen,
.sb-brand-evergreen.sb-brand-evergreen {
  --accent: #1f6e55;
  --accent-strong: #175a45;
  --accent-light: #2e8364;
  --accent-hover: #175a45;
  --accent-active: #114232;
  --accent-text: #17604a;
  --accent-readout: #134a38;
  --accent-tint: rgba(31, 110, 85, 0.12);
  --accent-subtle: rgba(31, 110, 85, 0.07);
  --accent-line: rgba(31, 110, 85, 0.30);
  --accent-active-tint: #e5efe7;
  --accent-contrast: #ffffff;
  --accent-shadow: 31, 110, 85;
  --color-primary: var(--accent);
  --color-primary-hover: var(--accent-hover);
  --color-primary-light: var(--accent-subtle);
  --color-primary-subtle: var(--accent-subtle);
  --color-primary-50: rgba(31, 110, 85, 0.04);
  --color-primary-100: rgba(31, 110, 85, 0.08);
  --color-primary-200: rgba(31, 110, 85, 0.12);
  --color-primary-500: var(--accent);
  --color-primary-600: var(--accent);
  --color-primary-700: var(--accent-hover);
  --theme-accent: var(--accent);
  --theme-accent-strong-hover: var(--accent-strong);
  --theme-accent-hover: var(--accent-hover);
  --theme-accent-subtle: var(--accent-subtle);
  --theme-accent-border: var(--accent-line);
  --theme-accent-contrast: var(--accent-contrast);
  --sb-gold: var(--accent);
  --sb-gold-hover: var(--accent-strong);
  --sb-gold-light: var(--accent-light);
  --sb-gold-subtle: var(--accent-subtle);
  --sb-gold-border: var(--accent-line);
  --accent-fill: initial;
  --accent-select-line: #c5d8ca;
  --dot-done: var(--accent);
  --color-button-primary-bg: var(--accent);
  --color-button-primary-strong-hover: var(--accent-strong);
  --color-button-primary-hover: var(--accent-hover);
  --color-button-ghost-hover: var(--accent-subtle);
  --color-border-focus: var(--accent);
  --color-sidebar-active: var(--accent);
  --color-input-focus-ring: rgba(31, 110, 85, 0.18);
  --theme-surface-selected: rgba(31, 110, 85, 0.1);
  --color-scheme: light;
  --surface-page: #f9f8f4;
  --surface-rail: #f9f8f4;
  --surface-panel: #f6f5f0;
  --surface-inner: #f6f5f0;
  --surface-elevated: #fbfaf7;
  --surface-zebra: #f9f8f4;
  --surface-hover: #f2f1eb;
  --surface-sunken: #eeede7;
  --sb-navy-900: #f9f8f4;
  --sb-navy-800: #e5efe7;
  --sb-navy-700: #eff0eb;
  --sb-navy-600: #e6e5df;
  --theme-page-bg: var(--surface-page);
  --theme-panel-bg: var(--surface-panel);
  --theme-card-bg: var(--surface-panel);
  --theme-card-inner-bg: var(--surface-zebra);
  --theme-elevated-bg: #fbfaf7;
  --theme-bg-elevated: var(--theme-elevated-bg);
  --theme-surface: var(--surface-panel);
  --color-surface: var(--surface-panel);
  --color-bg-page: var(--surface-page);
  --color-bg-container: var(--surface-panel);
  --color-bg-surface: var(--surface-zebra);
  --color-bg-elevated: #fbfaf7;
  --color-bg-primary: var(--surface-panel);
  --color-bg-secondary: var(--surface-page);
  --color-bg-tertiary: var(--surface-zebra);
  --color-bg-inverse: #0c1220;
  --color-card-bg: var(--surface-panel);
  --color-card-inner-bg: var(--surface-zebra);
  --color-card-inner-border: rgba(12, 18, 32, 0.08);
  --color-card-shadow: var(--elev-card);
  --color-modal-bg: #fbfaf7;
  --color-code-bg: #fbfaf7;
  --color-code-text: #0c1220;
  --rail-bg: #f9f8f4;
  --rail-fg: #1d2421;
  --rail-fg-strong: #0c1220;
  --rail-muted: #56635c;
  --rail-line: #e6e5df;
  --rail-hover-bg: #eff0eb;
  --rail-active-bg: #e5efe7;
  --field-bg: #fbfaf7;
  --field-border: #d5d3ca;
  --field-border-hv: #c9c7bf;
  --field-text: #0c1220;
  --field-placeholder: #6e706c;
  --color-input-bg: #fbfaf7;
  --color-input-border: #d5d3ca;
  --color-input-border-hover: #c9c7bf;
  --color-input-border-focus: var(--accent);
  --color-input-text: #0c1220;
  --color-input-placeholder: #5c615e;
  --color-input-disabled-bg: #f6f5f0;
  --color-input-disabled-text: #9a9c97;
  --color-input-error-border: #a8321f;
  --color-button-secondary-bg: #fbfaf7;
  --color-button-secondary-hover: #fbfaf7;
  --color-table-header-bg: var(--surface-panel);
  --color-table-row-hover: var(--surface-hover);
  --theme-chat-user-bubble-bg: rgba(12, 18, 32, 0.07);
  --theme-chat-user-bubble-text: #0c1220;
  --rail-active-fg: #134a38;
  --rail-active-bar-width: 0px;
  --rail-active-ink: var(--rail-active-fg);
  --rail-active-weight: var(--sb-weight-label);
  --rail-active-icon: var(--accent);
  --rail-group-rule-width: 0px;
  --rail-signout-hover-ink: var(--rail-fg-strong);
  --text-heading: #0c1220;
  --text-body: #3b3f48;
  --text-muted: #5c615e;
  --text-faint: #6e706c;
  --text-invert: #f9f8f4;
  --ink-shadow: 12, 18, 32;
  --theme-text-heading: #0c1220;
  --theme-text-body: #3b3f48;
  --theme-text-secondary: #4b5050;
  --theme-text-muted: #5c615e;
  --theme-text-disabled: #9a9c97;
  --theme-text-inverse: #fbfaf7;
  --color-heading: #0c1220;
  --color-text: #3b3f48;
  --color-text-heading: #0c1220;
  --color-text-body: #3b3f48;
  --color-text-secondary: #4b5050;
  --color-text-muted: #5c615e;
  --color-text-tertiary: #5c615e;
  --color-text-disabled: #9a9c97;
  --color-text-inverse: #fbfaf7;
  --color-text-primary: #0c1220;
  --color-text-link: var(--accent-text);
  --color-text-link-hover: var(--accent-strong);
  --sb-text-primary: #0c1220;
  --sb-text-secondary: #4b5050;
  --sb-slate-100: #fbfaf7;
  --sb-slate-200: #d9d7cf;
  --sb-slate-300: #3b3f48;
  --sb-slate-400: #4b5050;
  --sb-slate-500: #5c615e;
  --action-text: var(--accent-text);
  --action-hover-text: var(--accent-text);
  --action-active-text: var(--accent-text);
  --action-tint-text: var(--accent-text);
  --rail-danger-fg: #a8321f;
  --danger-text: var(--color-error-icon);
  --border: #e6e5df;
  --border-strong: #d9d7cf;
  --border-soft: #edece6;
  --border-hc: #86888b;
  --border-strong-hc: #6a6d71;
  --skeleton-sheen: rgba(12, 18, 32, 0.06);
  --theme-border: #e6e5df;
  --theme-border-subtle: rgba(12, 18, 32, 0.08);
  --theme-border-strong: #d9d7cf;
  --theme-line-soft: rgba(12, 18, 32, 0.08);
  --theme-line-subtle: rgba(12, 18, 32, 0.1);
  --theme-line-strong: rgba(12, 18, 32, 0.16);
  --color-border: #e6e5df;
  --color-border-default: #e6e5df;
  --color-border-light: rgba(12, 18, 32, 0.08);
  --color-border-subtle: rgba(12, 18, 32, 0.08);
  --color-border-strong: #d9d7cf;
  --color-border-nav: rgba(12, 18, 32, 0.12);
  --color-card-border: #e6e5df;
  --color-table-border: #e6e5df;
  --color-modal-border: #e6e5df;
  --shadow-none: 0 0 0 0 transparent;
  --elev-0: none;
  --elev-1: 0 0 0 0 transparent;
  --elev-2: 0 0 0 0 transparent;
  --elev-3: 0 1px 2px rgba(12, 18, 32, 0.04), 0 12px 32px -12px rgba(12, 18, 32, 0.16);
  --elev-4: 0 2px 6px rgba(12, 18, 32, 0.05), 0 32px 64px -24px rgba(12, 18, 32, 0.28);
  --elev-card: var(--elev-1);
  --elev-tile: var(--elev-1);
  --elev-raised: var(--elev-3);
  --elev-modal: var(--elev-4);
  --elev-popover: var(--elev-3);
  --elev-hover: var(--elev-1);
  --shadow-sm: var(--elev-card);
  --shadow: var(--elev-card);
  --shadow-md: var(--elev-tile);
  --shadow-lg: var(--elev-modal);
  --shadow-card: var(--elev-card);
  --shadow-button: none;
  --shadow-button-hover: none;
  --sb-shadow-card: var(--elev-card);
  --sb-shadow-modal: var(--elev-modal);
  --theme-shadow-card: var(--elev-card);
  --theme-shadow-modal: var(--elev-modal);
  --theme-tooltip-shadow: var(--elev-popover);
  --scrim-modal: rgba(12, 18, 32, 0.22);
  --theme-overlay-bg: var(--scrim-modal);
  --color-modal-overlay: var(--scrim-modal);
  --theme-overlay-heavy: rgba(12, 18, 32, 0.72);
  --backdrop-blur: 12px;
  --theme-preview-overlay-start: rgba(251, 250, 247, 0.24);
  --theme-preview-overlay-mid: rgba(249, 248, 244, 0.66);
  --theme-preview-overlay-end: rgba(249, 248, 244, 0.95);
  --theme-surface-strong: rgba(251, 250, 247, 0.98);
  --theme-input-shell-bg: rgba(251, 250, 247, 0.98);
  --theme-input-shell-shadow: 0 12px 32px rgba(12, 18, 32, 0.08), 0 0 0 0.5px rgba(12, 18, 32, 0.08);
  --theme-input-shell-shadow-focus: 0 12px 32px rgba(12, 18, 32, 0.1), 0 0 0 0.5px rgba(31, 110, 85, 0.24);
  --theme-surface-emphasis: rgba(12, 18, 32, 0.03);
  --theme-surface-hover: rgba(12, 18, 32, 0.05);
  --theme-table-stripe: rgba(12, 18, 32, 0.03);
  --theme-code-inline-bg: rgba(12, 18, 32, 0.06);
  --theme-code-inline-border: rgba(12, 18, 32, 0.1);
  --theme-code-block-bg: #fbfaf7;
  --theme-code-block-border: rgba(12, 18, 32, 0.1);
  --theme-tooltip-bg: #fbfaf7;
  --theme-tooltip-border: rgba(12, 18, 32, 0.12);
  --theme-scrollbar-thumb: #8c8d88;
  --theme-scrollbar-thumb-hover: #6e706c;
  --theme-scrollbar-track: #f9f8f4;
  --theme-scrollbar-width: 6px;
  --color-code-inline-bg: rgba(12, 18, 32, 0.06);
  --color-success: #2f7a5c;
  --color-success-strong: #1f6e55;
  --color-success-bg: #e1f4f0;
  --color-success-tint: #e1f4f0;
  --color-success-text: #134a38;
  --color-success-contrast: #ffffff;
  --color-status-success-bg: #e1f4f0;
  --color-status-success-text: #134a38;
  --color-success-line: #a8d1ca;
  --color-status-success-border: #a8d1ca;
  --color-status-success-contrast: #ffffff;
  --color-success-icon: #2f7a5c;
  --color-status-success-icon: #2f7a5c;
  --success: #2f7a5c;
  --success-strong: #1f6e55;
  --success-tint: #e1f4f0;
  --success-deep: #134a38;
  --color-warning: #b7791f;
  --color-warning-strong: #8f5c12;
  --color-warning-bg: #f8f0df;
  --color-warning-tint: #f8f0df;
  --color-warning-text: #6b4608;
  --color-warning-contrast: #ffffff;
  --color-status-warning-bg: #f8f0df;
  --color-status-warning-text: #6b4608;
  --color-warning-line: #e8d3a6;
  --color-status-warning-border: #e8d3a6;
  --color-status-warning-contrast: #ffffff;
  --color-warning-icon: #a26a12;
  --color-status-warning-icon: #a26a12;
  --warning: #b7791f;
  --warning-strong: #8f5c12;
  --warning-tint: #f8f0df;
  --warning-deep: #6b4608;
  --color-error: #a8321f;
  --color-error-strong: #872617;
  --color-error-bg: #f8ece8;
  --color-error-tint: #f8ece8;
  --color-error-text: #7c2314;
  --color-error-contrast: #ffffff;
  --color-status-error-bg: #f8ece8;
  --color-status-error-text: #7c2314;
  --color-error-line: #e9c6bd;
  --color-status-error-border: #e9c6bd;
  --color-status-error-contrast: #ffffff;
  --color-error-icon: #a8321f;
  --color-status-error-icon: #a8321f;
  --error: #a8321f;
  --error-strong: #872617;
  --error-tint: #f8ece8;
  --error-deep: #7c2314;
  --color-info: #56635c;
  --color-info-strong: #45514b;
  --color-info-bg: #eef1ef;
  --color-info-tint: #eef1ef;
  --color-info-text: #2f3a35;
  --color-info-contrast: #ffffff;
  --color-status-info-bg: #eef1ef;
  --color-status-info-text: #2f3a35;
  --color-info-line: #d3dad6;
  --color-status-info-border: #d3dad6;
  --color-status-info-contrast: #ffffff;
  --color-info-icon: #56635c;
  --color-status-info-icon: #56635c;
  --info: #56635c;
  --info-strong: #45514b;
  --info-tint: #eef1ef;
  --info-deep: #2f3a35;
  --sb-success: #2f7a5c;
  --sb-error: #a8321f;
  --theme-success-subtle: rgba(47, 122, 92, 0.12);
  --theme-success-border: rgba(47, 122, 92, 0.22);
  --signal-working-contrast: #ffffff;
  --signal-working-icon: #1f6e55;
  --signal-working: #1f6e55;
  --signal-working-hover: #175a45;
  --signal-working-light: #e5efe7;
  --signal-working-deep: #134a38;
  --signal-working-subtle: rgba(31, 110, 85, 0.08);
  --signal-working-border: rgba(31, 110, 85, 0.15);
  --signal-working-tint: rgba(31, 110, 85, 0.16);
  --signal-gold: #1f6e55;
  --signal-gold-hover: #175a45;
  --signal-gold-light: #e5efe7;
  --signal-gold-subtle: rgba(31, 110, 85, 0.08);
  --signal-gold-border: rgba(31, 110, 85, 0.15);
  --signal-gold-tint: rgba(31, 110, 85, 0.16);
  --signal-bronze-deep: #134a38;
  --gold-tint: rgba(31, 110, 85, 0.16);
  --bronze-deep: #134a38;
  --color-selection-solid: #6bb597;
  --color-selection-bg: rgba(107, 181, 151, 0.38);
  --color-selection-text: #0c1220;
  --color-ai-badge: #3B82F6;
  --color-human-badge: #10B981;
  --gradient-ai: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%);
  --gradient-human: linear-gradient(135deg, #10B981 0%, #047857 100%);
  --color-white: #ffffff;
  --color-gray-50: #f9f8f4;
  --color-gray-100: #f2f1eb;
  --color-gray-200: #e6e5df;
  --color-gray-300: #d9d7cf;
  --color-gray-400: #9a9c97;
  --color-gray-500: #6e706c;
  --color-gray-600: #4b5050;
  --color-gray-700: #3b3f48;
  --color-gray-800: #262a28;
  --color-gray-900: #0c1220;
  --sb-white: #fbfaf7;
  --sb-navy-500: #d9d7cf;
  --sb-cream-page: #f9f8f4;
  --sb-cream-card-outer: #f6f5f0;
  --sb-cream-card-inner: #fbfaf7;
  --sb-cream-border: #d9d7cf;
  --radius-sm: 0;
  --radius: 0;
  --radius-control: 0;
  --radius-md: 0;
  --radius-card: 0;
  --radius-lg: 0;
  --radius-modal: 0;
  --radius-xl: 0;
  --radius-pill: 999px;
  --radius-circle: 50%;
  --radius-badge: 999px;
  --radius-avatar: 0;
  --radius-toggle: 999px;
  --radius-chip: 999px;
  --radius-full: var(--radius-badge);
  --radius-chat-shell: 8px;
  --radius-chat-card: 0;
  --radius-chat-control: 8px;
  --radius-select: 8px;
  --radius-float: 12px;
  --rule-accent-display: none;
  --rule-card-width: 1px;
  --rule-card-color: var(--border);
  --rule-callout-width: 0px;
  --font-family: 'Source Serif 4', "Source Serif 4 Fallback", ui-serif, 'Iowan Old Style', Charter, Georgia, serif;
  --font-sans: 'Source Serif 4', "Source Serif 4 Fallback", ui-serif, 'Iowan Old Style', Charter, Georgia, serif;
  --font-heading: 'Source Serif 4', "Source Serif 4 Fallback", ui-serif, 'Iowan Old Style', Charter, Georgia, serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --sb-font-serif: 'Source Serif 4', "Source Serif 4 Fallback", ui-serif, 'Iowan Old Style', Charter, Georgia, serif;
  --sb-font-sans: 'Source Serif 4', "Source Serif 4 Fallback", ui-serif, 'Iowan Old Style', Charter, Georgia, serif;
  --sb-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --sb-text-xs: 0.75rem;
  --sb-text-sm: 0.8125rem;
  --sb-text-base: 0.9375rem;
  --sb-text-md: 1rem;
  --sb-text-lg: 1.125rem;
  --sb-text-xl: 1.25rem;
  --sb-text-2xl: 1.75rem;
  --sb-text-3xl: 2.25rem;
  --sb-text-display: clamp(2.5rem, 1.55rem + 2.2vw, 3.75rem);
  --sb-text-4xl: 2.5rem;
  --sb-text-5xl: var(--sb-text-display);
  --sb-text-6xl: var(--sb-text-display);
  --sb-body-size: 16px;
  --sb-leading-tight: 1.2;
  --sb-leading-snug: 1.375;
  --sb-leading-body: 1.6;
  --sb-leading-relaxed: 1.75;
  --sb-tracking-tight: -0.012em;
  --sb-tracking-display: -0.022em;
  --sb-tracking-body: 0;
  --sb-tracking-eyebrow: 0.12em;
  --sb-weight-heading: 500;
  --sb-weight-body: 400;
  --sb-weight-label: 500;
  --eyebrow-size: 0.75rem;
  --eyebrow-weight: 500;
  --eyebrow-tracking: var(--sb-tracking-eyebrow);
  --eyebrow-transform: uppercase;
  --sb-h1: 2.25rem;
  --sb-h1-leading: 1.12;
  --sb-h1-weight: 500;
  --sb-h1-tracking: -0.018em;
  --sb-h2: 1.75rem;
  --sb-h2-leading: 1.18;
  --sb-h2-weight: 450;
  --sb-h2-tracking: -0.012em;
  --sb-h3: 1.375rem;
  --sb-h3-leading: 1.25;
  --sb-h3-weight: 450;
  --sb-h3-tracking: -0.006em;
  --sb-h4: 1.125rem;
  --sb-h4-leading: 1.3;
  --sb-h4-weight: 500;
  --sb-h4-tracking: 0;
  --sb-h5: 1rem;
  --sb-h5-leading: 1.35;
  --sb-h5-weight: 500;
  --sb-h5-tracking: 0;
  --sb-h6: 0.875rem;
  --sb-h6-leading: 1.4;
  --sb-h6-weight: 500;
  --sb-h6-tracking: 0;
  --page-title-size: clamp(1.75rem, 1.2rem + 1.2vw, 2.25rem);
  --page-title-weight: 500;
  --page-title-leading: 1.12;
  --page-title-tracking: -0.018em;
  --page-display-leading: 1.05;
  --page-lede-size: var(--sb-text-lg);
  --page-display-lede-size: var(--sb-text-xl);
  --page-lede-ink: var(--text-body);
  --page-lede-measure: 60ch;
  --font-numeric: lining-nums tabular-nums;
  --font-figure: var(--font-family);
  --font-figure-numeric: lining-nums tabular-nums;
  --text-label: #56635c;
  --eyebrow-ink: var(--text-label);
  --code-size: 0.92em;
  --code-pad-x: 0.2em;
  --control-font-size-sm: var(--control-font-size);
  --control-font-size-lg: var(--control-font-size);
  --spacing-1: var(--sb-space-1);
  --spacing-2: var(--sb-space-2);
  --spacing-3: var(--sb-space-3);
  --spacing-4: var(--sb-space-4);
  --spacing-5: var(--sb-space-5);
  --spacing-6: var(--sb-space-6);
  --spacing-8: var(--sb-space-8);
  --sb-space-1: 0.25rem;
  --sb-space-2: 0.5rem;
  --sb-space-3: 0.75rem;
  --sb-space-4: 1rem;
  --sb-space-5: 1.25rem;
  --sb-space-6: 1.5rem;
  --sb-space-8: 2rem;
  --sb-space-10: 2.5rem;
  --sb-space-12: 3rem;
  --sb-space-16: 4rem;
  --sb-space-20: 5rem;
  --sb-space-24: 6rem;
  --sb-space-28: 7rem;
  --page-gutter: 24px;
  --page-gutter-mobile: 16px;
  --density: 1;
  --stack-xs: calc(var(--sb-space-2) * var(--density));
  --stack-sm: calc(var(--sb-space-3) * var(--density));
  --stack-md: calc(var(--sb-space-4) * var(--density));
  --stack-lg: calc(var(--sb-space-6) * var(--density));
  --section-gap: calc(var(--sb-space-8) * var(--density));
  --card-pad: calc(var(--sb-space-5) * var(--density));
  --control-pad-y: calc(var(--sb-space-2) * var(--density));
  --field-gap: calc(var(--sb-space-4) * var(--density));
  --control-pad-x: calc(var(--control-padding-x) * var(--density));
  --sb-rail-w: 264px;
  --sb-topbar-h: 56px;
  --sb-appbar-h: 56px;
  --sb-stage-pad-x: clamp(20px, 3.4vw, 72px);
  --sb-stage-pad-top: clamp(24px, 3vw, 56px);
  --sb-stage-pad-bottom: clamp(48px, 5vw, 96px);
  --sb-block-gap: clamp(24px, 2.4vw, 44px);
  --sb-section-space: clamp(40px, 4vw, 72px);
  --sb-grid-gap: clamp(16px, 1.25vw, 24px);
  --sb-surface-pad: clamp(20px, 2vw, 32px);
  --sb-row-pad-y: clamp(14px, 1.4vw, 22px);
  --sb-row-pad-x: clamp(16px, 1.6vw, 24px);
  --sb-measure: 68ch;
  --sb-measure-wide: 88ch;
  --sb-measure-lede: 60ch;
  --sb-split-main: minmax(0, 1fr);
  --sb-split-aside: minmax(18rem, clamp(20rem, 24vw, 28rem));
  --sb-split-gap: clamp(32px, 3.2vw, 64px);
  --sb-sticky-top: 0px;
  --motion-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --motion-ease-emphasized: cubic-bezier(0.4, 0, 0.2, 1);
  --motion-ease-enter: cubic-bezier(0, 0, 0.2, 1);
  --motion-duration-micro: 150ms;
  --motion-duration-move: 220ms;
  --motion-duration-enter: 220ms;
  --sb-transition-micro: var(--motion-duration-micro) var(--motion-ease-standard);
  --sb-transition-move: var(--motion-duration-move) var(--motion-ease-standard);
  --transition-fast: var(--sb-transition-micro);
  --motion-lift: 0px;
  --motion-press: 0px;
  --focus-color: #1f6e55;
  --focus-halo: #fbfaf7;
  --focus-width: 2px;
  --focus-offset: 2px;
  --focus-ring: 0 0 0 2px #fbfaf7, 0 0 0 4px #1f6e55;
  --focus-ring-inset: inset 0 0 0 2px #fbfaf7, inset 0 0 0 4px #1f6e55;
  --focus-color-on-accent: #1f6e55;
  --focus-ring-on-accent: 0 0 0 2px #fbfaf7, 0 0 0 4px #1f6e55;
  --focus-outline: 2px solid #1f6e55;
  --focus-outline-forced: 2px solid transparent;
  --focus-offset-inset: -2px;
  --control-height-sm: 32px;
  --control-height-md: 40px;
  --control-height-lg: 48px;
  --control-padding-x: 0.875rem;
  --control-font-size: var(--sb-body-size);
  --control-min-target: 44px;
  --opacity-disabled: 0.55;
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235c615e' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  --interactive-hover-border: var(--border-strong);
  --button-secondary-hover-bg: var(--accent-active-tint);
  --button-secondary-hover-border: var(--accent-select-line);
  --button-secondary-hover-ink: var(--accent-readout);
  --button-ghost-hover-bg: var(--accent-active-tint);
  --button-ghost-hover-ink: var(--accent-readout);
  --button-disabled-bg: var(--surface-sunken);
  --button-disabled-border: var(--border);
  --button-disabled-ink: var(--text-muted);
  --button-disabled-opacity: 1;
  --viz-series-1: #1f6e55;
  --viz-series-2: #4d6f8f;
  --viz-series-3: #a8741f;
  --viz-series-4: #a8321f;
  --viz-series-5: #5c615e;
  --viz-series-6: #6bb597;
  --viz-seq-from: #e5efe7;
  --viz-seq-to: #175a45;
  --viz-div-neg: #a8321f;
  --viz-div-pos: #1f6e55;
  --viz-grid: var(--border);
  --viz-axis: var(--text-muted);
  --z-raise: 1;
  --z-chrome: 10;
  --z-sticky: 20;
  --z-drawer: 30;
  --z-dropdown: 40;
  --z-popover: 45;
  --z-modal: 50;
  --z-confirm: 60;
  --z-tooltip: 70;
  --z-toast: 80;
  --z-demo-banner: 2147483000;
  --chrome-transform: none;
  --chrome-tracking: 0.005em;
  --table-head-size: 0.75rem;
  --table-head-weight: 500;
  --table-head-tracking: 0.12em;
  --table-head-transform: uppercase;
  --table-head-ink: #56635c;
  --table-head-rule: 1px solid var(--border);
  --icon-stroke: 1.5;
  --stage-texture: linear-gradient(to bottom, #f9f8f4 0, rgba(249, 248, 244, 0) min(48px, clamp(0px, (100vw - 600px) * 0.6, 420px) * 0.25), rgba(249, 248, 244, 0) calc(clamp(0px, (100vw - 600px) * 0.6, 420px) * 0.3), rgba(249, 248, 244, 0.45) calc(clamp(0px, (100vw - 600px) * 0.6, 420px) * 0.6), rgba(249, 248, 244, 0.82) calc(clamp(0px, (100vw - 600px) * 0.6, 420px) * 0.82), #f9f8f4 clamp(0px, (100vw - 600px) * 0.6, 420px)), radial-gradient(rgba(12, 18, 32, 0.035) 0.8px, transparent 1px);
  --stage-texture-size: 100% 100%, 14px 14px;
  --stage-texture-repeat: no-repeat, repeat;
}


/* Shared scrollbar chrome — colors resolve from the active BrandSkin block. */
:root {
  --sb-root-scrimmed: #c5c5c5;
  --sb-root-scrimmed-stacked: #9c9ea1;
  --sb-root-scrimmed-heavy: #4e525b;
}

html:has(body.sb-brand-evergreen) {
  --sb-root-scrimmed: #c5c5c5;
  --sb-root-scrimmed-stacked: #9c9ea1;
  --sb-root-scrimmed-heavy: #4e525b;
  --theme-scrollbar-thumb: #8c8d88;
  --theme-scrollbar-thumb-hover: #6e706c;
  --theme-scrollbar-track: #f9f8f4;
  --theme-scrollbar-width: 6px;
  --theme-scrollbar-size: thin;
}

html:has(body.sb-brand-evergreen)::-webkit-scrollbar-track {
  background: #f9f8f4;
}

html:has(body.sb-brand-evergreen)::-webkit-scrollbar-thumb {
  background: #8c8d88;
}

html:has(body.sb-brand-evergreen)::-webkit-scrollbar-thumb:hover {
  background: #6e706c;
}

html:has(body.sb-brand-evergreen),
body.sb-brand-evergreen,
.sb-brand-evergreen.sb-brand-evergreen {
  --theme-scrollbar-track: transparent;
}

html:has(body.sb-brand-evergreen)::-webkit-scrollbar-track {
  background: transparent;
}

html:has(body.sb-brand-evergreen)::-webkit-scrollbar-thumb {
  background: var(--theme-scrollbar-thumb);
}

@media (hover: hover) {
  html:has(body.sb-brand-evergreen):not(:hover),
  body.sb-brand-evergreen:not(:hover),
  body.sb-brand-evergreen :not(:hover):not(:focus-visible) {
    --theme-scrollbar-thumb: transparent;
  }
}

@media (hover: none) {
  html:has(body.sb-brand-evergreen) {
    --theme-scrollbar-thumb: #bdbcb6;
  }

  body.sb-brand-evergreen,
  .sb-brand-evergreen.sb-brand-evergreen {
    --theme-scrollbar-thumb: transparent;
  }
}

html,
body,
.main-content,
.page-content {
  scrollbar-color: var(--theme-scrollbar-thumb) var(--theme-scrollbar-track);
}

@supports (scrollbar-color: red blue) {
  html,
  body,
  .main-content,
  .page-content {
    scrollbar-width: var(--theme-scrollbar-size, auto);
  }
}

::-webkit-scrollbar {
  width: var(--theme-scrollbar-width, 10px);
  height: var(--theme-scrollbar-width, 10px);
}

::-webkit-scrollbar-track {
  background: var(--theme-scrollbar-track);
}

::-webkit-scrollbar-thumb {
  background: var(--theme-scrollbar-thumb);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--theme-scrollbar-thumb-hover);
}
        /* Focus visible for accessibility */
    /* ===== Focus contract (OP55-007) =====
       One rule set for every skin. The ring is the skin's --focus-ring (a
       box-shadow stack: halo gap + ring [+ outer]); the transparent outline
       (--focus-outline-forced: the ring's width, 3px on Xerox) is invisible
       until forced-colors mode drops every shadow and the system repaints it.
       Fallbacks are the contract's Evergreen defaults so the sheet never
       depends on emit order. */
    :focus-visible {
      outline: var(--focus-outline-forced, 2px solid transparent);
      outline-offset: var(--focus-offset, 2px);
      box-shadow: var(--focus-ring, 0 0 0 2px var(--surface-elevated), 0 0 0 4px var(--accent));
    }

    /* Rows, cells and rail items live inside clipping containers: inset ring. */
    .sb-focus-inset:focus-visible,
    td:focus-visible,
    th:focus-visible,
    li:focus-visible,
    .nav-item:focus-visible {
      outline-offset: var(--focus-offset-inset, -2px);
      box-shadow: var(--focus-ring-inset, inset 0 0 0 2px var(--accent));
    }

    /* Text fields draw their own edge: the border takes the accent and the
       ring sits outside it. Beats the form sheet's outline reset. */
    input:not([type="checkbox"]):not([type="radio"]):focus-visible,
    textarea:focus-visible,
    select:focus-visible {
      outline: var(--focus-outline-forced, 2px solid transparent);
      border-color: var(--color-input-border-focus);
      box-shadow: var(--focus-ring, 0 0 0 2px var(--surface-elevated), 0 0 0 4px var(--accent));
    }

    /* On an accent FILL the plain ring can vanish into the fill: the on-accent
       stack always keeps a contrasting gap between control and ring. */
    .btn-primary:focus-visible,
    .btn.primary:focus-visible,
    [data-on-accent]:focus-visible {
      box-shadow: var(--focus-ring-on-accent, 0 0 0 2px var(--surface-elevated), 0 0 0 4px var(--accent));
    }

    /* A skip-link target (a <main> with tabindex="-1") is a landmark, not a
       control: after "Skip to main content" the page moves there and the next
       Tab continues inside it, so it takes no ring (one would frame the whole
       content column). The transparent outline stays, inset so the column
       does not clip it, for forced colours to repaint. The selector out-ranks
       the skins' global body-scoped :focus-visible rules (0,2,1). */
    body :is(main, [role="main"])[tabindex="-1"]:focus-visible {
      outline-color: transparent;
      outline-offset: var(--focus-offset-inset, -2px);
      box-shadow: none;
    }

    /* Card-style radios and checkboxes: the card shows the ring while its
       input has keyboard focus. */
    .sb-choice-card:has(:focus-visible) {
      box-shadow: var(--focus-ring, 0 0 0 2px var(--surface-elevated), 0 0 0 4px var(--accent));
    }

    /* Selection: the skin's translucent highlight under the text's own ink.
       No colour override: --color-selection-text over a 38% highlight is
       1.5-2.1:1 on seven skins, while each ink keeps >= 6.4:1 (body) on it.
       Unprefixed only: a list holding ::-moz-selection is invalid in Chromium
       and WebKit, which dropped the whole rule. */
    ::selection {
      background-color: var(--color-selection-bg);
    }

    /* Reduced motion (OP55-016) — one universal rule for every skin and every
       surface. It has to be !important to beat animation shorthands declared
       on components and skin sheets. Motion that carries meaning opts back in
       with .sb-motion-essential (and the skin loaders, which would otherwise
       freeze into something that reads as a hang): a calm, slow loop instead
       of a stop. The opt-in has higher specificity inside the same block, so
       it wins over the universal !important. */
    @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;
      }

      /* SVG content never transitions under reduced motion (hand-off PU-8).
         The universal rule sets only the duration, so an SVG node with no
         declared transition keeps transition-property: all, and every style
         Mermaid writes while measuring became a 0.01ms transition: the
         diagram measured mid-flight and drew empty. No !important: a
         component that declares its own SVG transition keeps it. */
      svg,
      svg * {
        transition-property: none;
      }

      .sb-motion-essential,
      .sb-motion-essential::before,
      .sb-motion-essential::after,
      .sb-skin-loading,
      .sb-skin-loading::before {
        animation-duration: var(--sb-loading-period, 1.6s) !important;
        animation-iteration-count: infinite !important;
      }
    }

    /* Links in running text: an underline, not colour alone (OP55-110). */
    :where(p, dd, blockquote, figcaption) a:not([class]) {
      text-decoration-line: underline;
      text-decoration-thickness: max(1px, 0.0625em);
      text-underline-offset: 0.2em;
      text-decoration-color: color-mix(in srgb, currentColor 65%, transparent);
      -webkit-box-decoration-break: clone;
      box-decoration-break: clone;
      transition: color var(--sb-transition-micro), text-decoration-color var(--sb-transition-micro);
    }

    @media (hover: hover) {
      :where(p, dd, blockquote, figcaption) a:not([class]):hover {
        text-decoration-color: currentColor;
      }
    }

    /* More contrast: the underline at full ink and a step heavier. */
    @media (prefers-contrast: more) {
      :where(p, dd, blockquote, figcaption) a:not([class]) {
        text-decoration-color: currentColor;
        text-decoration-thickness: max(2px, 0.1em);
      }
    }

    /* ===== Colour scheme (OP55-110) ===== */
    body {
      color-scheme: var(--color-scheme, light);
    }

    /* ===== More contrast (OP55-110) ===== */
    @media (prefers-contrast: more) {
      :root,
      body.sb-brand-evergreen, .sb-brand-evergreen.sb-brand-evergreen,
      body.sb-brand-dell, .sb-brand-dell.sb-brand-dell,
      body.sb-brand-braintrust, .sb-brand-braintrust.sb-brand-braintrust,
      body.sb-brand-deloitte, .sb-brand-deloitte.sb-brand-deloitte,
      body.sb-brand-jnj, .sb-brand-jnj.sb-brand-jnj,
      body.sb-brand-accenture, .sb-brand-accenture.sb-brand-accenture,
      body.sb-brand-intel, .sb-brand-intel.sb-brand-intel,
      body.sb-brand-xerox, .sb-brand-xerox.sb-brand-xerox {
        --border: var(--border-hc, var(--text-muted));
        --theme-border: var(--border-hc, var(--text-muted));
        --color-border: var(--border-hc, var(--text-muted));
        --color-border-default: var(--border-hc, var(--text-muted));
        --color-card-border: var(--border-hc, var(--text-muted));
        --color-table-border: var(--border-hc, var(--text-muted));
        --color-input-border: var(--border-hc, var(--text-muted));
        --border-strong: var(--border-strong-hc, var(--text-body));
        --theme-border-strong: var(--border-strong-hc, var(--text-body));
        --color-border-strong: var(--border-strong-hc, var(--text-body));
      }
    }

    /* ===== Forced colours (OP55-110) ===== */
    @media (forced-colors: active) {
      :focus-visible,
      .btn-primary:focus-visible,
      .btn.primary:focus-visible,
      [data-on-accent]:focus-visible,
      input:not([type="checkbox"]):not([type="radio"]):focus-visible,
      textarea:focus-visible,
      select:focus-visible,
      .sb-choice-card:has(:focus-visible) {
        outline: 3px solid CanvasText;
        outline-offset: 2px;
        box-shadow: none;
      }

      .sb-focus-inset:focus-visible,
      td:focus-visible,
      th:focus-visible,
      li:focus-visible,
      .nav-item:focus-visible {
        outline: 3px solid CanvasText;
        outline-offset: -3px;
        box-shadow: none;
      }

      .sb-progress-fill,
      .progress-fill,
      .sb-dashboard-progress-fill,
      .sb-mobile-progress-fill,
      .milestone-progress-fill,
      .dz-progress-fill,
      .sb-status-dot,
      .sb-phase-status-dot {
        forced-color-adjust: none;
        border: 1px solid CanvasText;
      }

      .badge,
      .sb-status-badge,
      .nav-badge,
      .progress-bar,
      .sb-progress-bar,
      .sb-preview-progress-bar,
      .milestone-progress-bar {
        border: 1px solid CanvasText;
      }

      .sb-skin-loading--ring {
        border-color: GrayText;
        border-top-color: Highlight;
      }
    }
        /* Rendering affordances (OP55-062): no grey tap flash on touch, no
       font inflation on rotate. */
    html {
      -webkit-tap-highlight-color: transparent;
      -webkit-text-size-adjust: 100%;
      text-size-adjust: 100%;
    }

    /* Eyebrow (OP55-015): the one overline style — size, weight and tracking
       come from the type contract, so the nine hand-tuned trackings collapse
       into each skin's seed. */
    .sb-eyebrow {
      display: inline-block;
      font-family: var(--font-sans);
      font-size: var(--eyebrow-size, var(--sb-text-xs));
      font-weight: var(--eyebrow-weight, 600);
      letter-spacing: var(--eyebrow-tracking, 0.08em);
      line-height: 1.4;
      text-transform: var(--eyebrow-transform, uppercase);
      /* Evergreen V6 field 4: the section-label ink (override token). */
      color: var(--eyebrow-ink, var(--text-muted));
    }

    /* Micro-text floor (OP55-015): fine print never renders below 11px. */
    small {
      font-size: max(0.6875rem, 0.85em);
    }

    /* The numeral voice (Evergreen V6 field 3; unseeded: normal). Evergreen's
       is one voice, the text face lining and tabular (owner item #11): a
       typed price or quota sits in the same figures as the page around it.
       Controls read the token, not inherit, so a partner's field inside a
       tabular cell keeps the UA figures it has today. */
    body,
    input,
    textarea,
    select,
    button {
      font-variant-numeric: var(--font-numeric, normal);
    }

    /* Controls speak the document's face (P2, deck-viewer-R11-01). The UA
       sheet sets a control's own family; shell pages reset it in the button
       and form bases, which the reader foundation does not ship, so a
       control whose kit names no face printed in the system sans (the deck
       lightbox's Download). Zero specificity: a class that names a face,
       and every partner sheet, still wins. A checkbox or radio has no text,
       and its baseline is left where the page was drawn. */
    :where(button, input:not([type="checkbox"], [type="radio"]), select, textarea) {
      font-family: inherit;
    }

    /* Figures line up in columns and do not jitter as they update. */
    .sb-tabular,
    td,
    time,
    [data-numeric],
    .stat-value,
    .sb-metric-value {
      font-variant-numeric: tabular-nums lining-nums;
    }

        /* ===== Interactive surface (OP55-063) =====
       One recipe for clickable cards, tiles and rows: property-scoped
       transitions from the motion contract, a hover lift to the skin's hover
       elevation and accent hairline (pointer devices only, so touch never
       keeps a sticky hover), a press that settles, and one disabled look.
       The rise per skin is the skin block's --motion-lift. */
    .sb-interactive {
      cursor: pointer;
      transition:
        transform var(--sb-transition-micro),
        box-shadow var(--sb-transition-micro),
        border-color var(--sb-transition-micro),
        background-color var(--sb-transition-micro);
    }

    @media (hover: hover) {
      .sb-interactive:hover:not(:disabled, [aria-disabled="true"], .is-disabled) {
        transform: translateY(var(--motion-lift, -1px));
        box-shadow: var(--elev-hover, var(--elev-tile));
        /* Evergreen V6 field 12: paper treatment edges with the strong hairline. */
        border-color: var(--interactive-hover-border, var(--accent-line));
      }
    }

    .sb-interactive:active:not(:disabled, [aria-disabled="true"], .is-disabled) {
      transform: translateY(var(--motion-press, 0px));
      box-shadow: var(--elev-card);
    }

    .sb-interactive:is(:disabled, [aria-disabled="true"], .is-disabled) {
      opacity: var(--opacity-disabled, 0.55);
      cursor: not-allowed;
    }

    @media (prefers-reduced-motion: reduce) {
      .sb-interactive:hover,
      .sb-interactive:active {
        transform: none;
      }
    }

    /* ===== Entrance (OP55-047) =====
       Opacity plus a short rise on the motion contract's enter tier, capped
       at 200ms (a skin seeding durationEnter 0ms opts out). Stagger by
       putting items in .sb-enter-group (the first eight children step) or by
       setting --sb-enter-index. Knobs a caller may set: --enter-rise (6px)
       and --enter-stagger (40ms); they sit outside the skin token namespaces
       on purpose (a --sb- name would read as a token a skin should emit).
       Pure CSS; never on a page's largest content.
       Fill is backwards only: it holds the first frame through the stagger
       delay, and once the entrance ends nothing keeps animating transform, so
       an .sb-interactive card still lifts on hover. */
    @media (prefers-reduced-motion: no-preference) {
      .sb-enter {
        animation: sb-enter min(var(--motion-duration-enter, 200ms), 200ms) var(--motion-ease-enter, ease-out) backwards;
        animation-delay: calc(var(--sb-enter-index, 0) * var(--enter-stagger, 40ms));
      }

      .sb-enter-group > .sb-enter:nth-child(2) { --sb-enter-index: 1; }
      .sb-enter-group > .sb-enter:nth-child(3) { --sb-enter-index: 2; }
      .sb-enter-group > .sb-enter:nth-child(4) { --sb-enter-index: 3; }
      .sb-enter-group > .sb-enter:nth-child(5) { --sb-enter-index: 4; }
      .sb-enter-group > .sb-enter:nth-child(6) { --sb-enter-index: 5; }
      .sb-enter-group > .sb-enter:nth-child(7) { --sb-enter-index: 6; }
      .sb-enter-group > .sb-enter:nth-child(n + 8) { --sb-enter-index: 7; }

      @keyframes sb-enter {
        from {
          opacity: 0;
          transform: translateY(var(--enter-rise, 6px));
        }
      }
    }
    
    /* Status Badge Styles */
    /* Badge primitive (OP55-122) */
    .sb-badge,
    .page-content .role-badge,
    .page-content .status-badge {
      --badge-dot: var(--text-body);
      display: inline-flex;
      align-items: center;
      gap: var(--sb-space-1, 0.25rem);
      min-height: 1.375rem;
      padding: 0 var(--sb-space-2, 0.5rem);
      border: 1px solid var(--border);
      border-radius: var(--radius-badge);
      background: var(--surface-sunken);
      color: var(--text-body);
      font-family: var(--font-sans);
      font-size: var(--sb-text-sm);
      font-weight: var(--sb-weight-label);
      line-height: 1.25;
      letter-spacing: var(--chrome-tracking, 0.01em);
      text-transform: var(--chrome-transform, none);
      white-space: nowrap;
      vertical-align: middle;
    }

    .sb-badge--neutral,
    .page-content .sb-status-badge.role-badge,
    .page-content .status-badge.pending,
    .page-content .status-badge.draft {
      background: var(--surface-sunken);
      color: var(--text-body);
      border-color: var(--border);
      --badge-dot: var(--text-body);
    }

    .sb-badge--accent {
      background: var(--accent-active-tint);
      color: var(--accent-readout);
      border-color: var(--accent-select-line);
      --badge-dot: var(--accent-text);
    }

    .sb-badge--info {
      background: var(--color-status-info-bg);
      color: var(--color-status-info-text);
      border-color: var(--color-status-info-border);
      --badge-dot: var(--color-status-info-icon);
    }

    .sb-badge--success {
      background: var(--color-status-success-bg);
      color: var(--color-status-success-text);
      border-color: var(--color-status-success-border);
      --badge-dot: var(--color-status-success-icon);
    }

    .sb-badge--warning {
      background: var(--color-status-warning-bg);
      color: var(--color-status-warning-text);
      border-color: var(--color-status-warning-border);
      --badge-dot: var(--color-status-warning-icon);
    }

    .sb-badge--error {
      background: var(--color-status-error-bg);
      color: var(--color-status-error-text);
      border-color: var(--color-status-error-border);
      --badge-dot: var(--color-status-error-icon);
    }

    .page-content .status-badge.active,
    .page-content .status-badge.completed,
    .page-content .status-badge.success {
      background: var(--color-status-success-bg);
      color: var(--color-status-success-text);
      border-color: var(--color-status-success-border);
      --badge-dot: var(--color-status-success-icon);
    }

    .page-content .status-badge.inactive,
    .page-content .status-badge.error {
      background: var(--color-status-error-bg);
      color: var(--color-status-error-text);
      border-color: var(--color-status-error-border);
      --badge-dot: var(--color-status-error-icon);
    }

    .sb-badge--dot::before {
      content: '';
      flex: none;
      width: 0.375rem;
      height: 0.375rem;
      border-radius: var(--radius-circle, 50%);
      background: var(--badge-dot);
    }

    .sb-badge--sm {
      min-height: 1.125rem;
      padding: 0 var(--sb-space-1, 0.25rem);
      font-size: var(--sb-text-xs);
    }

    /* Forced colours drop every fill: the dot keeps the system ink. */
    @media (forced-colors: active) {
      .sb-badge--dot::before {
        forced-color-adjust: none;
        background: CanvasText;
      }
    }

    /* Primitive actions: the .btn recipe inside .sb-dialog, .sb-empty-state */
    :where(.sb-dialog, .sb-empty-state) .btn {
      color: inherit;
      background: transparent;
    }

    :where(.sb-dialog, .sb-empty-state) .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: var(--sb-space-2, 0.5rem);
      min-height: var(--control-height-md, 40px);
      padding: 0.375rem var(--control-padding-x, 0.875rem);
      font-size: var(--control-font-size, var(--sb-text-base, 0.875rem));
      font-weight: var(--sb-weight-label, 600);
      line-height: 1.25;
      white-space: nowrap;
      text-decoration: none;
      border-radius: var(--radius-control, var(--radius));
      cursor: pointer;
      transition:
        background-color var(--sb-transition-micro),
        border-color var(--sb-transition-micro),
        color var(--sb-transition-micro),
        box-shadow var(--sb-transition-micro),
        transform var(--sb-transition-micro);
      border: 1px solid transparent;
      font-family: var(--font-sans);
      text-transform: var(--chrome-transform, revert);
      letter-spacing: var(--chrome-tracking, revert);
    }

    :where(.sb-dialog, .sb-empty-state) .btn-primary.btn-primary,
    :where(.sb-dialog, .sb-empty-state) .btn.primary.primary {
      background: var(--accent-fill, var(--color-button-primary-bg));
      color: var(--accent-contrast);
      border: 1px solid var(--color-button-primary-bg);
    }

    :where(.sb-dialog, .sb-empty-state) .btn-primary:hover:not(:disabled),
    :where(.sb-dialog, .sb-empty-state) .btn.primary:hover:not(:disabled) {
      background: var(--color-button-primary-hover);
      border-color: var(--color-button-primary-hover);
      color: var(--accent-contrast);
    }

    :where(.sb-dialog, .sb-empty-state) .btn-primary:active:not(:disabled),
    :where(.sb-dialog, .sb-empty-state) .btn.primary:active:not(:disabled) {
      background: var(--accent-active);
      border-color: var(--accent-active);
      color: var(--accent-contrast);
      transform: translateY(var(--motion-press, 0px));
    }

    :where(.sb-dialog, .sb-empty-state) .btn-secondary.btn-secondary,
    :where(.sb-dialog, .sb-empty-state) .btn.secondary.secondary,
    :where(.sb-dialog, .sb-empty-state) .btn-outline.btn-outline {
      background: var(--color-button-secondary-bg);
      color: var(--text-heading);
      border: 1px solid var(--border-strong);
    }

    :where(.sb-dialog, .sb-empty-state) .btn-secondary:hover:not(:disabled),
    :where(.sb-dialog, .sb-empty-state) .btn.secondary:hover:not(:disabled),
    :where(.sb-dialog, .sb-empty-state) .btn-outline:hover:not(:disabled) {
      background: var(--button-secondary-hover-bg, var(--surface-hover));
      border-color: var(--button-secondary-hover-border, var(--accent));
      color: var(--button-secondary-hover-ink, var(--accent-text));
    }

    :where(.sb-dialog, .sb-empty-state) .btn-secondary:active:not(:disabled),
    :where(.sb-dialog, .sb-empty-state) .btn.secondary:active:not(:disabled),
    :where(.sb-dialog, .sb-empty-state) .btn-outline:active:not(:disabled) {
      background: var(--button-secondary-hover-bg, var(--surface-hover));
      border-color: var(--accent-active);
      color: var(--button-secondary-hover-ink, var(--accent-text));
      transform: translateY(var(--motion-press, 0px));
    }

    :where(.sb-dialog, .sb-empty-state) .btn-ghost.btn-ghost,
    :where(.sb-dialog, .sb-empty-state) .btn.ghost.ghost {
      background: transparent;
      color: var(--color-text-secondary);
      border: 1px solid transparent;
    }

    :where(.sb-dialog, .sb-empty-state) .btn-ghost:hover:not(:disabled),
    :where(.sb-dialog, .sb-empty-state) .btn.ghost:hover:not(:disabled) {
      background: var(--button-ghost-hover-bg, var(--color-button-ghost-hover));
      color: var(--button-ghost-hover-ink, var(--accent-text));
    }

    :where(.sb-dialog, .sb-empty-state) .btn-ghost:active:not(:disabled),
    :where(.sb-dialog, .sb-empty-state) .btn.ghost:active:not(:disabled) {
      background: var(--button-ghost-hover-bg, var(--color-button-ghost-hover));
      color: var(--button-ghost-hover-ink, var(--accent-text));
      transform: translateY(var(--motion-press, 0px));
    }

    :where(.sb-dialog, .sb-empty-state) .btn-danger-quiet.btn-danger-quiet {
      background: transparent;
      color: var(--danger-text);
      border: 1px solid transparent;
    }

    :where(.sb-dialog, .sb-empty-state) .btn-danger-quiet:hover:not(:disabled) {
      background: var(--color-error-bg);
      border-color: var(--color-error-line);
      color: var(--danger-text);
    }

    :where(.sb-dialog, .sb-empty-state) .btn-danger-quiet:active:not(:disabled) {
      background: var(--color-error-bg);
      border-color: var(--color-error-line);
      color: var(--danger-text);
      transform: translateY(var(--motion-press, 0px));
    }

    :where(.sb-dialog, .sb-empty-state) .btn-danger.btn-danger,
    :where(.sb-dialog, .sb-empty-state) .btn.danger.danger,
    :where(.sb-dialog, .sb-empty-state) .btn.error.error {
      background: var(--color-error-strong);
      color: var(--color-error-contrast);
      border: 1px solid var(--color-error-strong);
    }

    :where(.sb-dialog, .sb-empty-state) .btn-danger:hover:not(:disabled),
    :where(.sb-dialog, .sb-empty-state) .btn.danger:hover:not(:disabled),
    :where(.sb-dialog, .sb-empty-state) .btn.error:hover:not(:disabled) {
      background: var(--color-error-strong);
      border-color: var(--color-error-strong);
      color: var(--color-error-contrast);
    }

    :where(.sb-dialog, .sb-empty-state) .btn-danger:active:not(:disabled),
    :where(.sb-dialog, .sb-empty-state) .btn.danger:active:not(:disabled),
    :where(.sb-dialog, .sb-empty-state) .btn.error:active:not(:disabled) {
      transform: translateY(var(--motion-press, 0px));
    }

    :where(.sb-dialog, .sb-empty-state) .btn-success.btn-success,
    :where(.sb-dialog, .sb-empty-state) .btn.success.success {
      background: var(--color-success-strong);
      color: var(--color-success-contrast);
      border: 1px solid var(--color-success-strong);
    }

    :where(.sb-dialog, .sb-empty-state) .btn-success:hover:not(:disabled),
    :where(.sb-dialog, .sb-empty-state) .btn.success:hover:not(:disabled) {
      background: var(--color-success-strong);
      border-color: var(--color-success-strong);
      color: var(--color-success-contrast);
    }

    :where(.sb-dialog, .sb-empty-state) .btn-success:active:not(:disabled),
    :where(.sb-dialog, .sb-empty-state) .btn.success:active:not(:disabled) {
      transform: translateY(var(--motion-press, 0px));
    }

    :where(.sb-dialog, .sb-empty-state) .btn-primary:is(:disabled, [aria-disabled="true"], .is-disabled):where(:not(.is-pending)),
    :where(.sb-dialog, .sb-empty-state) .btn.primary:is(:disabled, [aria-disabled="true"], .is-disabled):where(:not(.is-pending)) {
      background: var(--button-disabled-bg, var(--color-button-primary-bg));
      border-color: var(--button-disabled-border, var(--color-button-primary-bg));
      color: var(--button-disabled-ink, var(--accent-contrast));
    }

    :where(.sb-dialog, .sb-empty-state) .btn-secondary:is(:disabled, [aria-disabled="true"], .is-disabled):where(:not(.is-pending)),
    :where(.sb-dialog, .sb-empty-state) .btn.secondary:is(:disabled, [aria-disabled="true"], .is-disabled):where(:not(.is-pending)),
    :where(.sb-dialog, .sb-empty-state) .btn-outline:is(:disabled, [aria-disabled="true"], .is-disabled):where(:not(.is-pending)) {
      background: var(--button-disabled-bg, var(--color-button-secondary-bg));
      border-color: var(--button-disabled-border, var(--border-strong));
      color: var(--button-disabled-ink, var(--text-heading));
    }

    :where(.sb-dialog, .sb-empty-state) .btn-ghost:is(:disabled, [aria-disabled="true"], .is-disabled):where(:not(.is-pending)),
    :where(.sb-dialog, .sb-empty-state) .btn.ghost:is(:disabled, [aria-disabled="true"], .is-disabled):where(:not(.is-pending)) {
      background: var(--button-disabled-bg, transparent);
      border-color: var(--button-disabled-border, transparent);
      color: var(--button-disabled-ink, var(--color-text-secondary));
    }

    :where(.sb-dialog, .sb-empty-state) .btn-danger-quiet:is(:disabled, [aria-disabled="true"], .is-disabled):where(:not(.is-pending)) {
      background: var(--button-disabled-bg, transparent);
      border-color: var(--button-disabled-border, transparent);
      color: var(--button-disabled-ink, var(--danger-text));
    }

    :where(.sb-dialog, .sb-empty-state) .btn-danger:is(:disabled, [aria-disabled="true"], .is-disabled):where(:not(.is-pending)),
    :where(.sb-dialog, .sb-empty-state) .btn.danger:is(:disabled, [aria-disabled="true"], .is-disabled):where(:not(.is-pending)),
    :where(.sb-dialog, .sb-empty-state) .btn.error:is(:disabled, [aria-disabled="true"], .is-disabled):where(:not(.is-pending)) {
      background: var(--button-disabled-bg, var(--color-error-strong));
      border-color: var(--button-disabled-border, var(--color-error-strong));
      color: var(--button-disabled-ink, var(--color-error-contrast));
    }

    :where(.sb-dialog, .sb-empty-state) .btn-success:is(:disabled, [aria-disabled="true"], .is-disabled):where(:not(.is-pending)),
    :where(.sb-dialog, .sb-empty-state) .btn.success:is(:disabled, [aria-disabled="true"], .is-disabled):where(:not(.is-pending)) {
      background: var(--button-disabled-bg, var(--color-success-strong));
      border-color: var(--button-disabled-border, var(--color-success-strong));
      color: var(--button-disabled-ink, var(--color-success-contrast));
    }

    :where(.sb-dialog, .sb-empty-state) .btn-sm,
    :where(.sb-dialog, .sb-empty-state) .btn.sm {
      min-height: var(--control-height-sm, 32px);
      padding: 0.25rem 0.75rem;
      font-size: var(--control-font-size-sm, max(var(--sb-text-sm, 0.75rem), calc(var(--control-font-size, 0.875rem) - 1px)));
    }

    :where(.sb-dialog, .sb-empty-state) .btn-lg,
    :where(.sb-dialog, .sb-empty-state) .btn.lg {
      min-height: var(--control-height-lg, 48px);
      padding: 0.5rem 1.5rem;
      font-size: var(--control-font-size-lg, calc(var(--control-font-size, 0.875rem) + 1px));
    }

    :where(.sb-dialog, .sb-empty-state) .btn:disabled,
    :where(.sb-dialog, .sb-empty-state) .btn[aria-disabled="true"],
    :where(.sb-dialog, .sb-empty-state) .btn.is-disabled {
      cursor: not-allowed;
      opacity: var(--button-disabled-opacity, var(--opacity-disabled, 0.55));
    }

    @supports (background: color-mix(in srgb, red 88%, rgb(from red calc(255 - r) calc(255 - g) calc(255 - b)))) {
      :where(.sb-dialog, .sb-empty-state) .btn-danger:hover:not(:disabled),
      :where(.sb-dialog, .sb-empty-state) .btn.danger:hover:not(:disabled),
      :where(.sb-dialog, .sb-empty-state) .btn.error:hover:not(:disabled) {
        background: color-mix(in srgb, var(--color-error-strong) 88%, rgb(from var(--color-error-contrast) calc(255 - r) calc(255 - g) calc(255 - b)));
        border-color: color-mix(in srgb, var(--color-error-strong) 88%, rgb(from var(--color-error-contrast) calc(255 - r) calc(255 - g) calc(255 - b)));
      }
      :where(.sb-dialog, .sb-empty-state) .btn-danger:active:not(:disabled),
      :where(.sb-dialog, .sb-empty-state) .btn.danger:active:not(:disabled),
      :where(.sb-dialog, .sb-empty-state) .btn.error:active:not(:disabled) {
        background: color-mix(in srgb, var(--color-error-strong) 80%, rgb(from var(--color-error-contrast) calc(255 - r) calc(255 - g) calc(255 - b)));
        border-color: color-mix(in srgb, var(--color-error-strong) 80%, rgb(from var(--color-error-contrast) calc(255 - r) calc(255 - g) calc(255 - b)));
      }
      :where(.sb-dialog, .sb-empty-state) .btn-success:hover:not(:disabled),
      :where(.sb-dialog, .sb-empty-state) .btn.success:hover:not(:disabled) {
        background: color-mix(in srgb, var(--color-success-strong) 88%, rgb(from var(--color-success-contrast) calc(255 - r) calc(255 - g) calc(255 - b)));
        border-color: color-mix(in srgb, var(--color-success-strong) 88%, rgb(from var(--color-success-contrast) calc(255 - r) calc(255 - g) calc(255 - b)));
      }
      :where(.sb-dialog, .sb-empty-state) .btn-success:active:not(:disabled),
      :where(.sb-dialog, .sb-empty-state) .btn.success:active:not(:disabled) {
        background: color-mix(in srgb, var(--color-success-strong) 80%, rgb(from var(--color-success-contrast) calc(255 - r) calc(255 - g) calc(255 - b)));
        border-color: color-mix(in srgb, var(--color-success-strong) 80%, rgb(from var(--color-success-contrast) calc(255 - r) calc(255 - g) calc(255 - b)));
      }
    }

    /* ===== Skin loading primitive ===== */
    :root {
      /* One loop period for every loader; a skin may override it scoped. */
      --sb-loading-period: 1.2s;
    }

    .sb-skin-loading {
      --loading-size: 1.25em;
      --loading-period: var(--sb-loading-period);
      --loading-ink: var(--signal-working-icon, var(--signal-working));
      display: inline-flex;
      align-items: center;
      justify-content: center;
      inline-size: var(--loading-size);
      block-size: var(--loading-size);
      color: var(--loading-ink);
      flex: 0 0 auto;
      vertical-align: middle;
    }
    .sb-skin-loading--sm { --loading-size: 16px; }
    .sb-skin-loading--md { --loading-size: 24px; }
    .sb-skin-loading--lg { --loading-size: 48px; }

    .sb-skin-loading-icon {
      inline-size: 68%;
      block-size: 68%;
      display: block;
    }

    .sb-skin-loading--ring {
      border: max(2px, calc(var(--loading-size) / 12)) solid var(--border);
      border-top-color: var(--loading-ink);
      border-radius: var(--radius-circle);
      animation: sb-spin var(--loading-period) linear infinite;
    }
    .sb-skin-loading--ring .sb-skin-loading-icon { display: none; }

    .sb-skin-loading--dots {
      inline-size: auto;
      animation: sb-dot-pulse calc(var(--loading-period) * 1.25) var(--motion-ease-standard, ease-in-out) infinite;
    }
    .sb-skin-loading--dots::before {
      content: '\2022\2022\2022';
      font-size: calc(var(--loading-size) * 0.6);
      letter-spacing: calc(var(--loading-size) * 0.1);
      line-height: 1;
    }
    .sb-skin-loading--dots .sb-skin-loading-icon { display: none; }

    .sb-skin-loading--pulse {
      border: max(2px, calc(var(--loading-size) / 12)) solid var(--loading-ink);
      border-radius: var(--radius-circle);
      animation: sb-loading-pulse calc(var(--loading-period) * 1.15) var(--motion-ease-standard, ease-in-out) infinite;
    }

    .sb-skin-loading--bar {
      inline-size: calc(var(--loading-size) * 2);
      block-size: max(3px, calc(var(--loading-size) / 8));
      border-radius: var(--radius-pill);
      background: linear-gradient(90deg, var(--loading-ink) 0 35%, var(--border) 35% 100%);
      background-size: 200% 100%;
      animation: sb-loading-bar var(--loading-period) var(--motion-ease-standard, ease-in-out) infinite;
    }
    .sb-skin-loading--bar .sb-skin-loading-icon { display: none; }

    @keyframes sb-spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    @keyframes sb-dot-pulse {
      0%, 100% { opacity: 0.3; }
      50% { opacity: 1; }
    }

    @keyframes sb-loading-pulse {
      0%, 100% { transform: scale(0.82); opacity: 0.55; }
      50% { transform: scale(1); opacity: 1; }
    }

    @keyframes sb-loading-bar {
      0%, 100% { background-position: 0 0; opacity: 0.7; }
      50% { background-position: 100% 0; opacity: 1; }
    }

    @keyframes sb-loading-breathe {
      0%, 100% { opacity: 0.45; }
      50% { opacity: 1; }
    }

    /* ===== Pending control (OP55-100, window.sbPending) =====
       A submitting button keeps its fill and label colour (it is busy, not
       unavailable), shows a progress cursor, and draws the skin's loading
       glyph in the label colour so it reads on any fill. The script also
       marks the control disabled (aria-disabled, then disabled on a button),
       so the third selector (0,3,0) outranks every kit's (0,2,0) disabled
       fade (.btn[aria-disabled], .sb-admin-link-btn[aria-disabled], …):
       opacity never means busy (V6 round 3, admin-reports-R3-01). The
       button recipe keeps a pending variant on its rest paint as well. */
    .btn.is-pending,
    .is-pending[aria-busy="true"],
    .is-pending[aria-busy="true"]:is(:disabled, [aria-disabled="true"]) {
      cursor: progress;
      opacity: 1;
    }
    .sb-pending-indicator {
      display: inline-flex;
      align-items: center;
      margin-inline-end: var(--sb-space-2, 0.5rem);
    }
    .sb-pending-indicator .sb-skin-loading {
      --loading-size: 1em;
      color: currentColor;
    }
    .sb-pending-indicator .sb-skin-loading--ring {
      border-color: color-mix(in srgb, currentColor 30%, transparent);
      border-top-color: currentColor;
    }
    .sb-pending-indicator .sb-skin-loading--pulse { border-color: currentColor; }
    .sb-pending-indicator .sb-skin-loading--bar {
      background-image: linear-gradient(90deg, currentColor 0 35%, color-mix(in srgb, currentColor 30%, transparent) 35% 100%);
    }

    /* ===== Success mark (renderSkinSuccessMark) =====
       Geometry from BrandVisuals.icons.success (circle, hexagon, faceted…);
       the fill is the success icon ink (3:1 on the page; the vivid base is
       not on Evergreen) and the stroke the success contrast pair. */
    .sb-success-check {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      inline-size: 22px;
      block-size: 22px;
      flex-shrink: 0;
      transform-origin: center;
      animation: sb-check-pop var(--motion-duration-enter, 220ms) var(--motion-ease-enter, ease-out) both;
    }
    .sb-success-check--md { inline-size: 32px; block-size: 32px; }
    .sb-success-check--lg { inline-size: 40px; block-size: 40px; }
    .sb-success-check--xl { inline-size: 64px; block-size: 64px; }

    .sb-success-check svg {
      display: block;
      inline-size: 100%;
      block-size: 100%;
    }

    .sb-success-check-ring {
      fill: var(--color-status-success-icon, var(--sb-success));
    }

    .sb-success-check-mark {
      fill: none;
      stroke: var(--color-status-success-contrast);
      stroke-width: 2.5;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-dasharray: 24;
      stroke-dashoffset: 24;
      animation: sb-check-draw calc(var(--motion-duration-move, 300ms) * 1.5) var(--motion-ease-standard, ease) forwards;
      animation-delay: calc(var(--motion-duration-micro, 150ms) * 0.8);
    }

    @keyframes sb-check-pop {
      0% { transform: scale(0.85); }
      60% { transform: scale(1.06); }
      100% { transform: scale(1); }
    }

    @keyframes sb-check-draw {
      from { stroke-dashoffset: 24; }
      to { stroke-dashoffset: 0; }
    }

    @keyframes sb-success-fade {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    /* Reduced motion: the ring slows (the universal rule keeps loaders alive,
       see accessibilityStyles), moving variants breathe instead of travelling,
       and the success mark arrives fully drawn with a short fade. */
    @media (prefers-reduced-motion: reduce) {
      :root { --sb-loading-period: 1.6s; }
      .sb-skin-loading--pulse,
      .sb-skin-loading--bar,
      .sb-skin-loading--dots {
        animation-name: sb-loading-breathe;
        transform: none;
      }
      .sb-success-check {
        animation-name: sb-success-fade;
      }
      .sb-success-check-mark {
        animation: none;
        stroke-dashoffset: 0;
      }
    }

    /* ===== Skeleton primitive (renderSkeleton) ===== */
    .sb-skeleton,
    .sb-skeleton-tr {
      --skeleton-period: calc(var(--motion-duration-move, 300ms) * 5);
      --skeleton-tone: var(--surface-sunken);
      --skeleton-band: var(--skeleton-sheen, rgba(var(--ink-shadow), 0.06));
      cursor: progress;
    }

    @supports (color: color-mix(in srgb, currentColor 10%, transparent)) {
      .sb-skeleton,
      .sb-skeleton-tr {
        --skeleton-tone: color-mix(in srgb, currentColor 10%, transparent);
      }
    }

    .sb-skeleton {
      display: flex;
      flex-direction: column;
      gap: 0.55em;
      inline-size: 100%;
      min-inline-size: 0;
    }

    .sb-skeleton__label {
      position: absolute;
      inline-size: 1px;
      block-size: 1px;
      margin: -1px;
      padding: 0;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
      border: 0;
    }

    .sb-skeleton__row {
      display: block;
      inline-size: 100%;
      block-size: 0.75em;
      border-radius: var(--radius-control);
      background-color: var(--skeleton-tone);
      background-image: linear-gradient(90deg, transparent 0, var(--skeleton-band) 50%, transparent 100%);
      background-size: 200% 100%;
      background-repeat: no-repeat;
      background-position: 150% 0;
      animation: sb-skeleton-sweep var(--skeleton-period) var(--motion-ease-standard, ease-in-out) infinite;
    }

    /* text: paragraph lines, the last one short */
    .sb-skeleton--text .sb-skeleton__row:last-of-type:not(:first-of-type) { inline-size: 62%; }

    /* title: one taller, shorter bar */
    .sb-skeleton--title .sb-skeleton__row {
      block-size: 1.35em;
      inline-size: 45%;
    }

    /* avatar: the skin's avatar geometry beside two short lines */
    .sb-skeleton--avatar {
      flex-direction: row;
      align-items: center;
      gap: var(--sb-space-3);
    }
    .sb-skeleton__avatar {
      flex: 0 0 auto;
      inline-size: 2.5rem;
      block-size: 2.5rem;
      border-radius: var(--radius-avatar, var(--radius-circle));
    }
    .sb-skeleton__stack {
      display: flex;
      flex: 1 1 auto;
      flex-direction: column;
      gap: 0.5em;
      min-inline-size: 0;
    }
    .sb-skeleton__stack .sb-skeleton__row:first-of-type { inline-size: 40%; }
    .sb-skeleton__stack .sb-skeleton__row:last-of-type:not(:first-of-type) { inline-size: 64%; }

    /* card: the elevated surface a real card will occupy */
    .sb-skeleton--card {
      gap: 0.7em;
      padding: var(--card-pad, var(--sb-space-5));
      background: var(--surface-elevated);
      border: 1px solid var(--border);
      border-radius: var(--radius-card);
    }
    .sb-skeleton--card .sb-skeleton__row:first-of-type {
      block-size: 1.2em;
      inline-size: 48%;
      margin-block-end: 0.25em;
    }
    .sb-skeleton--card .sb-skeleton__row:last-of-type:not(:first-of-type) { inline-size: 70%; }

    /* table-row: one cell per column on the row's hairline; the first
       (label) cell is twice as wide as the value cells */
    .sb-skeleton--table-row {
      flex-direction: row;
      align-items: center;
      gap: var(--sb-space-4);
      padding-block: var(--sb-space-3);
      border-block-end: 1px solid var(--border-soft);
    }
    .sb-skeleton--table-row .sb-skeleton__row { flex: 1 1 0; }
    .sb-skeleton--table-row .sb-skeleton__row:first-of-type { flex-grow: 2; }

    /* Rows inside a real table (renderSkeletonTableRows): the table's own
       cells give the padding and hairlines; the bar fills part of each cell,
       the first (label) column more than the value columns. */
    .sb-skeleton-td { vertical-align: middle; }
    .sb-skeleton-td .sb-skeleton__row { inline-size: 56%; }
    .sb-skeleton-td:first-child .sb-skeleton__row { inline-size: 78%; }

    .sb-skeleton--pulse .sb-skeleton__row {
      background-image: none;
      animation-name: sb-skeleton-pulse;
    }
    .sb-skeleton--static .sb-skeleton__row {
      background-image: none;
      animation: none;
    }
    body.sb-brand-evergreen .sb-skeleton__row { background-image: none; animation-name: sb-skeleton-pulse; }

    @keyframes sb-skeleton-sweep {
      from { background-position: 150% 0; }
      to { background-position: -50% 0; }
    }

    @keyframes sb-skeleton-pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.55; }
    }

    /* Matches the per-skin and per-region motion selectors at equal
       specificity, later in the sheet, so no skin keeps its sweep or pulse. */
    @media (prefers-reduced-motion: reduce) {
      .sb-skeleton__row,
      .sb-skeleton--pulse .sb-skeleton__row,
      body[class*="sb-brand-"] .sb-skeleton__row {
        animation: none;
        background-image: none;
      }
    }

    @media (forced-colors: active) {
      .sb-skeleton__row { border: 1px solid CanvasText; }
    }


    /* ===== Vocabulary: type (01-SPEC §6.1) ===== */
    .sb-display {
      margin: 0;
      max-inline-size: 22ch;
      font-family: var(--font-heading);
      font-size: var(--sb-text-display);
      font-weight: var(--sb-h1-weight);
      line-height: 1.05;
      letter-spacing: var(--sb-tracking-display);
      color: var(--text-heading);
      text-wrap: balance;
    }
    /* A section H2 is never the page H1's size on a phone: 20.7px at 390,
       28px from 1280 (CD-11). */
    .sb-title {
      margin: 0;
      font-family: var(--font-heading);
      font-size: clamp(var(--sb-text-xl), 1.1rem + 0.8vw, var(--sb-text-2xl));
      font-weight: var(--sb-h2-weight);
      line-height: 1.18;
      letter-spacing: var(--sb-h2-tracking);
      color: var(--text-heading);
      text-wrap: balance;
    }
    .sb-subtitle {
      margin: 0;
      font-family: var(--font-heading);
      font-size: var(--sb-text-xl);
      font-weight: var(--sb-h3-weight);
      line-height: 1.25;
      letter-spacing: var(--sb-h3-tracking);
      color: var(--text-heading);
    }
    .sb-lede {
      margin: 0;
      max-inline-size: var(--sb-measure-lede);
      font-size: clamp(var(--sb-text-md), 0.95rem + 0.35vw, var(--sb-text-xl));
      line-height: 1.5;
      color: var(--text-body);
      text-wrap: pretty;
    }
    /* Display numerals in the text face. */
    .sb-num {
      font-variant-numeric: lining-nums tabular-nums;
      letter-spacing: 0;
    }
    /* Every price and hero numeral (CD-11). */
    .sb-figure {
      font-family: var(--font-heading);
      font-size: var(--sb-text-4xl);
      font-weight: var(--sb-weight-body);
      line-height: 1;
      letter-spacing: -0.02em;
      font-variant-numeric: lining-nums tabular-nums;
      color: var(--text-heading);
    }
    /* Identifiers: ids, hashes, slugs, keys (AE-010). Sized so a mono run
       sits on the surrounding text's cap and figure height: the skin's
       --code-size (Evergreen 0.92em, JetBrains Mono on Source Serif 4),
       else a step smaller (H-10, TK-R2-2). */
    .sb-code {
      font-family: var(--font-mono);
      font-size: var(--code-size, smaller);
      letter-spacing: 0;
      font-variant-numeric: tabular-nums;
    }
    .sb-measure { max-inline-size: var(--sb-measure); }
    .sb-measure-wide { max-inline-size: var(--sb-measure-wide); }
  

    /* ===== Vocabulary: layout (01-SPEC §6.1) ===== */
    .sb-stack {
      display: flex;
      flex-direction: column;
      gap: var(--sb-block-gap);
      min-inline-size: 0;
    }
    .sb-stack--tight { gap: var(--sb-space-4); }
    .sb-stack--loose { gap: var(--sb-section-space); }
    .sb-actions-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--sb-space-3) var(--sb-space-4);
    }
    .sb-divider {
      block-size: 0;
      margin: var(--sb-block-gap) 0;
      border: 0;
      border-block-start: 1px solid var(--border);
    }
    .sb-section + .sb-section { margin-block-start: var(--sb-section-space); }
    .sb-section-head {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      justify-content: space-between;
      gap: var(--sb-space-2) var(--sb-space-6);
      margin-block-end: var(--sb-space-5);
    }
    /* Opt-in; only above unframed content (P15). */
    .sb-section-head--ruled {
      padding-block-end: var(--sb-space-4);
      border-block-end: 1px solid var(--border);
    }
    .sb-section-head-text {
      display: flex;
      flex-direction: column;
      gap: var(--sb-space-2);
      min-inline-size: 0;
    }
    /* renderSectionHead({ label }) writes the label as a paragraph: the text
       gap is its one space, not a paragraph margin on top (PU-R11-12). */
    .sb-section-head-text > .sb-eyebrow { margin: 0; }
    .sb-section-head-meta {
      margin: 0;
      font-size: var(--sb-text-sm);
      color: var(--text-muted);
    }

    /* Container roots (§5.10). Only on boxes whose inline size their parent
       sets; never on a shrink-to-fit box. */
    .sb-stage,
    .sb-split-main,
    .sb-split-aside,
    .sb-pair > *,
    .sb-cq {
      container-type: inline-size;
    }

    /* C2 primary + context: stacked in DOM order, side by side from cq.split. */
    .sb-split {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: var(--sb-block-gap);
      align-items: start;
    }
    .sb-split-main,
    .sb-split-aside { min-inline-size: 0; }
    @container (min-width: 60rem) {
      .sb-split {
        grid-template-columns: var(--sb-split-main) var(--sb-split-aside);
        column-gap: var(--sb-split-gap);
      }
      /* DOM order only sets the phone order. */
      .sb-split > .sb-split-main { grid-column: 1; grid-row: 1; }
      .sb-split > .sb-split-aside { grid-column: 2; grid-row: 1; }
      .sb-split--lead { grid-template-columns: var(--sb-split-aside) var(--sb-split-main); }
      .sb-split--lead > .sb-split-aside { grid-column: 1; }
      .sb-split--lead > .sb-split-main { grid-column: 2; }
      /* Sticky only while it fits; the 4px keeps edge focus rings unclipped (CD-01). */
      .sb-split--sticky > .sb-split-aside {
        position: sticky;
        top: calc(var(--sb-sticky-top) + var(--sb-space-6));
        max-block-size: calc(100dvh - var(--sb-sticky-top) - 2 * var(--sb-space-6));
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        padding: 4px;
        margin: -4px;
      }
    }

    /* C5 peers: equal halves from cq.pair. */
    .sb-pair {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: var(--sb-block-gap);
      align-items: start;
    }
    @container (min-width: 56rem) {
      .sb-pair {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: var(--sb-split-gap);
      }
    }

    /* Auto-fit grid; --max2 never leaves a 3 + 1 orphan. */
    .sb-grid {
      --sb-grid-min: 17rem;
      --sb-grid-gutter: var(--sb-grid-gap);
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--sb-grid-min)), 1fr));
      gap: var(--sb-grid-gutter);
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .sb-grid--wide { --sb-grid-min: 22rem; }
    .sb-grid--narrow { --sb-grid-min: 13rem; }
    .sb-grid--max2 {
      grid-template-columns: repeat(auto-fit, minmax(min(100%, max(var(--sb-grid-min), calc((100% - var(--sb-grid-gutter)) / 2 - 1px))), 1fr));
    }
    /* Joined bento: cells share one hairline (the 1px pad and -1px margins
       overlap neighbouring edges). */
    .sb-grid--joined {
      --sb-grid-gutter: 0px;
      padding: 1px 0 0 1px;
    }
    .sb-grid--joined > * {
      margin: -1px 0 0 -1px;
      border: 1px solid var(--border);
      /* Square cells: a rounded cell notches every shared seam on a skin with
         a card radius (SHR-R1-G06). */
      border-radius: 0;
      background: var(--surface-elevated);
    }
    /* AE-011, E22: a focused cell's inset ring paints over its neighbours'
       shared edges, below the sticky app bar. */
    .sb-grid--joined > :focus-within {
      position: relative;
      z-index: var(--z-raise);
    }
    /* Only a real current item (D19). */
    .sb-grid--joined > .is-current { background: var(--accent-active-tint); }
  

    /* ===== Vocabulary: surfaces (01-SPEC §6.2) ===== */
    .sb-surface {
      min-inline-size: 0;
      background: var(--surface-elevated);
      border: 1px solid var(--border);
      border-radius: var(--radius-card);
    }
    .sb-surface--recessed { background: var(--surface-panel); }
    .sb-surface--pad { padding: var(--sb-surface-pad); }

    .sb-note {
      display: flex;
      gap: var(--sb-space-3);
      padding: var(--sb-space-4) var(--sb-space-5);
      background: var(--surface-panel);
      border: 1px solid var(--border);
      border-radius: var(--radius-card);
      font-size: var(--sb-text-base);
      color: var(--text-body);
    }
    .sb-note-icon {
      flex: 0 0 18px;
      inline-size: 18px;
      block-size: 18px;
      margin-block-start: 2px;
      color: var(--color-info-icon);
    }
    .sb-note-icon svg { display: block; inline-size: 100%; block-size: 100%; }
    .sb-note-body { min-inline-size: 0; }
    .sb-note-body > :last-child { margin-block-end: 0; }
    .sb-note-title {
      margin: 0 0 var(--sb-space-1);
      font-weight: var(--sb-weight-label);
      color: var(--text-heading);
    }
    .sb-note--accent { background: var(--accent-active-tint); border-color: var(--accent-select-line); }
    .sb-note--accent .sb-note-icon { color: var(--accent-text); }
    .sb-note--success { background: var(--color-success-bg); border-color: var(--color-success-line); }
    .sb-note--success .sb-note-icon { color: var(--color-success-icon); }
    .sb-note--warning { background: var(--color-warning-bg); border-color: var(--color-warning-line); }
    .sb-note--warning .sb-note-icon { color: var(--color-warning-icon); }
    .sb-note--error { background: var(--color-error-bg); border-color: var(--color-error-line); }
    .sb-note--error .sb-note-icon { color: var(--color-error-icon); }

    @media (forced-colors: active) {
      .sb-note { border-color: CanvasText; }
    }
  

    /* ===== Vocabulary: grouped lists (01-SPEC §6.2) ===== */
    .sb-list {
      margin: 0;
      padding: 0;
      list-style: none;
      background: var(--surface-elevated);
      border: 1px solid var(--border);
      border-radius: var(--radius-card);
    }
    /* A joined row owns no margin (D-3): the document's li margin opened a
       paper gap under every row, beside the hairline and under a tinted or
       hovered row, and a deeper foot under the last. */
    .sb-list > li,
    .sb-grid > li { margin-block: 0; }
    .sb-list > li + li,
    .sb-list > .sb-list-row + .sb-list-row { border-block-start: 1px solid var(--border); }
    .sb-list-row {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: center;
      gap: var(--sb-space-4) var(--sb-space-5);
      padding: var(--sb-row-pad-y) var(--sb-row-pad-x);
      color: var(--text-heading);
      text-decoration: none;
      transition: background-color var(--sb-transition-micro);
    }
    .sb-list-row:not(:has(> .sb-icon-tile, > .sb-list-lead)) { grid-template-columns: minmax(0, 1fr) auto; }
    /* A row whose body carries a description hangs its tile or lead from the
       title's first line, never centred on a wrapped block (round 1). */
    .sb-list-row:has(> .sb-list-body > .sb-list-desc) > :is(.sb-icon-tile, .sb-list-lead) { align-self: start; }
    /* A narrow container stacks an action row: the tile and the title on
       the first line, the description at the full inner width, then the
       action at full width within thumb reach. One left edge. */
    @container (width < 40rem) {
      .sb-list-row:has(> .sb-icon-tile):has(> div.sb-list-body > .sb-list-desc):has(> .sb-list-trail :is(a, button)) { grid-template-columns: auto minmax(0, 1fr); row-gap: var(--sb-space-3); }
      .sb-list-row:has(> .sb-icon-tile):has(> div.sb-list-body > .sb-list-desc):has(> .sb-list-trail :is(a, button)) > .sb-icon-tile { align-self: center; }
      .sb-list-row:has(> .sb-icon-tile):has(> div.sb-list-body > .sb-list-desc):has(> .sb-list-trail :is(a, button)) > div.sb-list-body { display: contents; }
      .sb-list-row:has(> .sb-icon-tile):has(> div.sb-list-body > .sb-list-desc):has(> .sb-list-trail :is(a, button)) > div.sb-list-body > .sb-list-title { grid-column: 2; align-self: center; }
      .sb-list-row:has(> .sb-icon-tile):has(> div.sb-list-body > .sb-list-desc):has(> .sb-list-trail :is(a, button)) > div.sb-list-body > :not(.sb-list-title) { grid-column: 1 / -1; }
      .sb-list-row:has(> .sb-icon-tile):has(> div.sb-list-body > .sb-list-desc):has(> .sb-list-trail :is(a, button)) > .sb-list-trail { grid-column: 1 / -1; margin-block-start: var(--sb-space-1); }
      .sb-list-row:has(> .sb-icon-tile):has(> div.sb-list-body > .sb-list-desc):has(> .sb-list-trail :is(a, button)) > .sb-list-trail > :is(a, button) {
        flex: 1 1 auto;
        justify-content: center;
        min-block-size: var(--control-height-lg, 48px);
      }
    }
    /* The 'dot' lead slot: a dot, a 14px state glyph, or empty. */
    .sb-list-lead {
      display: grid;
      place-items: center;
      inline-size: 16px;
      color: var(--text-muted);
    }
    .sb-list-lead svg { inline-size: 14px; block-size: 14px; }
    @media (hover: hover) {
      :is(a, button).sb-list-row:hover { background: var(--surface-panel); }
    }
    :is(a, button).sb-list-row:focus-visible {
      outline: 2px solid var(--focus-color);
      outline-offset: -2px;
      box-shadow: var(--shadow-none, 0 0 0 0 transparent);
      position: relative;
      z-index: var(--z-raise);
    }
    button.sb-list-row {
      inline-size: 100%;
      border: 0;
      background: transparent;
      font: inherit;
      text-align: start;
      cursor: pointer;
    }
    .sb-list-row.is-current,
    .sb-list-row[aria-current] { background: var(--accent-active-tint); }
    .sb-list-body {
      display: flex;
      flex-direction: column;
      gap: var(--sb-space-1);
      min-inline-size: 0;
    }
    /* 16px by default (CD-11). */
    .sb-list-title {
      margin: 0;
      font-family: var(--font-heading);
      font-size: var(--sb-text-md);
      font-weight: var(--sb-weight-label);
      line-height: 1.3;
      color: var(--text-heading);
    }
    .sb-list-desc {
      margin: 0;
      font-size: var(--sb-text-base);
      line-height: 1.55;
      color: var(--text-body);
    }
    .sb-list-meta {
      font-size: var(--sb-text-sm);
      color: var(--text-muted);
      white-space: nowrap;
    }
    .sb-list-trail {
      display: inline-flex;
      align-items: center;
      gap: var(--sb-space-3);
    }
    .sb-list-arrow {
      display: inline-flex;
      inline-size: 18px;
      block-size: 18px;
      color: var(--accent-text);
    }
    .sb-list-arrow svg { inline-size: 100%; block-size: 100%; }
    /* Display-ramp pages only: dashboard journey, intake, status documents, empty states. */
    .sb-list--hero .sb-list-title {
      font-size: var(--sb-text-xl);
      font-weight: var(--sb-h3-weight);
      line-height: 1.25;
    }
    .sb-list--hero .sb-list-desc { font-size: var(--sb-text-md); }
    .sb-list--compact .sb-list-row {
      padding: var(--sb-space-3) var(--sb-space-4);
      gap: var(--sb-space-3) var(--sb-space-4);
    }
    .sb-list--compact .sb-list-title { font-size: var(--sb-text-base); }
    /* Two-column hairline list from cq.pair. */
    @container (min-width: 56rem) {
      .sb-list--2up {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      }
      .sb-list--2up > li + li { border-block-start: 0; }
      .sb-list--2up > li:nth-child(n + 3) { border-block-start: 1px solid var(--border); }
      .sb-list--2up > li:nth-child(even) { border-inline-start: 1px solid var(--border); }
    }

    /* ===== Vocabulary: icon tile ===== */
    .sb-icon-tile {
      display: grid;
      place-items: center;
      flex: 0 0 44px;
      inline-size: 44px;
      block-size: 44px;
      background: var(--accent-active-tint);
      color: var(--accent-text);
      border: 1px solid var(--accent-select-line);
      border-radius: var(--radius-card);
    }
    .sb-icon-tile svg { inline-size: 20px; block-size: 20px; }
    .sb-icon-tile--sm,
    .sb-list--compact .sb-icon-tile {
      flex-basis: 32px;
      inline-size: 32px;
      block-size: 32px;
    }
    .sb-icon-tile--sm svg,
    .sb-list--compact .sb-icon-tile svg { inline-size: 16px; block-size: 16px; }
    .sb-icon-tile--neutral { background: var(--surface-panel); color: var(--text-muted); border-color: var(--border); }
    .sb-icon-tile--warning { background: var(--color-warning-bg); color: var(--color-warning-icon); border-color: var(--color-warning-line); }
    .sb-icon-tile--error { background: var(--color-error-bg); color: var(--color-error-icon); border-color: var(--color-error-line); }

    @media (forced-colors: active) {
      .sb-list-row.is-current,
      .sb-list-row[aria-current] { outline: 2px solid Highlight; outline-offset: -2px; }
    }
  

    /* ===== Vocabulary: stat row (01-SPEC §6.2) ===== */
    .sb-statrow {
      --sb-statrow-cols: 4;
      --sb-statrow-min: 11rem;
      --sb-statrow-gap: 0px;
      display: grid;
      column-gap: var(--sb-statrow-gap);
      grid-template-columns: repeat(auto-fit, minmax(max(var(--sb-statrow-min), calc((100% - (var(--sb-statrow-cols) - 1) * var(--sb-statrow-gap)) / var(--sb-statrow-cols) - 1px)), 1fr));
      margin: 0;
      padding: 1px 0 0 1px;
      list-style: none;
    }
    .sb-statrow[data-cols="1"] { --sb-statrow-cols: 1; }
    .sb-statrow[data-cols="2"] { --sb-statrow-cols: 2; }
    .sb-statrow[data-cols="3"] { --sb-statrow-cols: 3; }
    .sb-statrow[data-cols="4"] { --sb-statrow-cols: 4; }
    .sb-statrow[data-cols="5"] { --sb-statrow-cols: 5; }
    .sb-statrow[data-cols="6"] { --sb-statrow-cols: 6; }
    .sb-statrow[data-cols="7"] { --sb-statrow-cols: 7; }
    /* Phones in grid mode (a data-cols="1" stack): the cell floor drops. */
    @media (max-width: 639px) {
      .sb-statrow { --sb-statrow-min: 9rem; }
    }
    /* Rule 1: the cell rides the row's tracks (label / value / foot / extra). */
    .sb-statrow-cell {
      display: grid;
      grid-row: span 4;
      grid-template-rows: subgrid;
      grid-template-columns: minmax(0, 1fr);
      align-content: start;
      row-gap: 0;
      min-inline-size: 0;
      margin: -1px 0 0 -1px;
      padding: var(--sb-row-pad-y) var(--sb-row-pad-x);
      background: var(--surface-elevated);
      border: 1px solid var(--border);
      color: var(--text-heading);
      text-decoration: none;
    }
    .sb-statrow--hero > .sb-statrow-cell { padding: var(--sb-surface-pad); }
    a.sb-statrow-cell { transition: background-color var(--sb-transition-micro); }
    @media (hover: hover) {
      a.sb-statrow-cell:hover { background: var(--surface-panel); }
    }
    a.sb-statrow-cell:focus-visible {
      outline: 2px solid var(--focus-color);
      outline-offset: -2px;
      box-shadow: var(--shadow-none, 0 0 0 0 transparent);
      position: relative;
      z-index: var(--z-raise);
    }
    /* The label's block is shared across the line (rule 1), so a one-line
       label sits at the top of a two-line neighbour's block: the row's top
       edge stays straight. A word too long for its cell breaks inside the
       cell rather than running past its hairline: `anywhere` (not
       `break-word`) because the label's text is an anonymous flex item,
       whose minimum size only `anywhere` lowers (admin-ai-usage R1-01). */
    .sb-statrow-label {
      grid-row: 1;
      align-self: start;
      display: flex;
      align-items: center;
      gap: var(--sb-space-2);
      min-inline-size: 0;
      margin-block-end: var(--sb-space-2);
      font-size: var(--eyebrow-size);
      font-weight: var(--eyebrow-weight);
      line-height: 1.4;
      letter-spacing: var(--eyebrow-tracking);
      text-transform: var(--eyebrow-transform);
      color: var(--eyebrow-ink, var(--text-muted));
      overflow-wrap: anywhere;
      hyphens: auto;
      text-wrap: balance;
    }
    /* Evergreen V6 (P11, round 2): a figure's label is a sentence-case
       caption in muted ink at 13px, the same grammar on every page (only a
       section label is tracked caps). Read through the chrome-case override
       token: a skin that seeds sentence-case chrome (Evergreen) matches; every
       other skin leaves the token unset and keeps its tracked label. */
    @container style(--chrome-transform: none) {
      .sb-statrow-label {
        font-size: var(--sb-text-sm);
        font-weight: var(--sb-weight-body);
        letter-spacing: 0;
        text-transform: none;
        color: var(--text-muted);
      }
    }
    /* A tone dot sits on the label's first line (a wrapped label hangs from
       it), never centred between two lines in a column of its own. */
    .sb-statrow-label > .sb-dot {
      align-self: flex-start;
      margin-block-start: calc(0.7em - 3.5px);
    }
    /* The figure never breaks (nowrap); the unit is its own flex item, so in
       a narrow cell it drops under the figure instead of clipping. Working
       rows read 28-32px, the hero row 36-40px, open rows 28px. */
    .sb-statrow-value {
      grid-row: 2;
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: var(--sb-space-1);
      min-inline-size: 0;
      font-family: var(--font-heading);
      font-size: clamp(var(--sb-text-2xl), calc(10cqi / var(--sb-statrow-cols)), calc((var(--sb-text-2xl) + var(--sb-text-3xl)) / 2));
      font-weight: var(--sb-weight-body);
      line-height: 1;
      letter-spacing: -0.02em;
      white-space: nowrap;
      font-variant-numeric: lining-nums tabular-nums;
      color: var(--text-heading);
    }
    .sb-statrow--hero .sb-statrow-value { font-size: clamp(var(--sb-text-3xl), calc(13cqi / var(--sb-statrow-cols)), var(--sb-text-4xl)); }
    .sb-statrow-foot {
      grid-row: 3;
      margin-block-start: var(--sb-space-2);
      font-size: var(--sb-text-sm);
      line-height: 1.4;
      color: var(--text-muted);
      text-wrap: pretty;
    }
    /* A second foot stacks under the first (the extra's row), never beside
       it in a column of its own (round 2, deliverable-viewer-locked). */
    .sb-statrow-foot ~ .sb-statrow-foot { grid-row: 4; margin-block-start: var(--sb-space-1); }
    .sb-statrow-unit {
      font-size: var(--sb-text-base);
      letter-spacing: 0;
      color: var(--text-muted);
    }
    /* Secondary figures: no cells, air only (CD-16). */
    .sb-statrow--open {
      --sb-statrow-gap: var(--sb-split-gap);
      padding: 0;
      row-gap: var(--sb-space-6);
    }
    .sb-statrow--open > .sb-statrow-cell {
      margin: 0;
      padding: 0;
      background: transparent;
      border: 0;
    }
    .sb-statrow--open .sb-statrow-value { font-size: var(--sb-text-2xl); }

    /* Rule 2: no orphan cell between the list threshold and a full line. */
    @container (40rem <= width < 44rem) {
      .sb-statrow:has(> .sb-statrow-cell:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @container (40rem <= width < 55rem) {
      .sb-statrow:has(> .sb-statrow-cell:nth-child(5):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
      .sb-statrow:has(> .sb-statrow-cell:nth-child(5):last-child) > .sb-statrow-cell { grid-column: span 2; }
      .sb-statrow:has(> .sb-statrow-cell:nth-child(5):last-child) > .sb-statrow-cell:nth-child(n + 4) { grid-column: span 3; }
    }

    /* Rule 3: a narrow container (or, with no container above the row, a
       phone viewport) reads the figures as ledger rows; a phone sets a
       joined row of three or more plain figures as pairs. */
    @container (width < 40rem) {
      .sb-statrow:not([data-cols="1"]) { grid-template-columns: fit-content(50%) minmax(0, 1fr); }
      .sb-statrow:not([data-cols="1"]):has(> .sb-statrow-cell > :not(.sb-statrow-label, .sb-statrow-value, .sb-statrow-foot)) { grid-template-columns: fit-content(50%) minmax(0, 1fr) auto; }
      .sb-statrow:not([data-cols="1"]) > .sb-statrow-cell {
        grid-column: 1 / -1;
        grid-row: auto;
        grid-template-columns: subgrid;
        grid-template-rows: auto auto;
        align-items: center;
        column-gap: var(--sb-space-5);
        padding: var(--sb-space-3) var(--sb-space-4);
      }
      .sb-statrow:not([data-cols="1"]).sb-statrow--open > .sb-statrow-cell { padding: 0; }
      .sb-statrow:not([data-cols="1"]) > .sb-statrow-cell > .sb-statrow-value {
        grid-column: 1;
        grid-row: 1 / span 2;
        font-size: var(--sb-text-2xl);
      }
      .sb-statrow:not([data-cols="1"]) > .sb-statrow-cell > .sb-statrow-label {
        grid-column: 2;
        grid-row: 1;
        align-self: end;
        margin: 0;
      }
      .sb-statrow:not([data-cols="1"]) > .sb-statrow-cell > .sb-statrow-foot {
        grid-column: 2;
        grid-row: 2;
        align-self: start;
        margin-block-start: var(--sb-space-1);
      }
      .sb-statrow:not([data-cols="1"]) > .sb-statrow-cell > .sb-statrow-foot ~ .sb-statrow-foot { grid-row: 3; margin-block-start: 0; }
      /* A cell without a caption centres its label on the figure. */
      .sb-statrow:not([data-cols="1"]) > .sb-statrow-cell:not(:has(> .sb-statrow-foot)) > .sb-statrow-label { grid-row: 1 / span 2; align-self: center; }
      /* A cell with a caption: the figure on the label's baseline (round 2). */
      .sb-statrow:not([data-cols="1"]) > .sb-statrow-cell:has(> .sb-statrow-foot) { align-items: baseline; }
      .sb-statrow:not([data-cols="1"]) > .sb-statrow-cell:has(> .sb-statrow-foot) > .sb-statrow-value { grid-row: 1; }
      .sb-statrow:not([data-cols="1"]) > .sb-statrow-cell:has(> .sb-statrow-foot) > .sb-statrow-label { align-self: baseline; }
      .sb-statrow:not([data-cols="1"]) > .sb-statrow-cell > :not(.sb-statrow-label, .sb-statrow-value, .sb-statrow-foot) {
        grid-column: 3;
        grid-row: 1 / span 2;
        align-self: center;
        justify-self: end;
      }
    }
    @media (max-width: 639px) {
      .sb-statrow:not([data-cols="1"]) { grid-template-columns: fit-content(50%) minmax(0, 1fr); }
      .sb-statrow:not([data-cols="1"]):has(> .sb-statrow-cell > :not(.sb-statrow-label, .sb-statrow-value, .sb-statrow-foot)) { grid-template-columns: fit-content(50%) minmax(0, 1fr) auto; }
      .sb-statrow:not([data-cols="1"]) > .sb-statrow-cell {
        grid-column: 1 / -1;
        grid-row: auto;
        grid-template-columns: subgrid;
        grid-template-rows: auto auto;
        align-items: center;
        column-gap: var(--sb-space-5);
        padding: var(--sb-space-3) var(--sb-space-4);
      }
      .sb-statrow:not([data-cols="1"]).sb-statrow--open > .sb-statrow-cell { padding: 0; }
      .sb-statrow:not([data-cols="1"]) > .sb-statrow-cell > .sb-statrow-value {
        grid-column: 1;
        grid-row: 1 / span 2;
        font-size: var(--sb-text-2xl);
      }
      .sb-statrow:not([data-cols="1"]) > .sb-statrow-cell > .sb-statrow-label {
        grid-column: 2;
        grid-row: 1;
        align-self: end;
        margin: 0;
      }
      .sb-statrow:not([data-cols="1"]) > .sb-statrow-cell > .sb-statrow-foot {
        grid-column: 2;
        grid-row: 2;
        align-self: start;
        margin-block-start: var(--sb-space-1);
      }
      .sb-statrow:not([data-cols="1"]) > .sb-statrow-cell > .sb-statrow-foot ~ .sb-statrow-foot { grid-row: 3; margin-block-start: 0; }
      /* A cell without a caption centres its label on the figure. */
      .sb-statrow:not([data-cols="1"]) > .sb-statrow-cell:not(:has(> .sb-statrow-foot)) > .sb-statrow-label { grid-row: 1 / span 2; align-self: center; }
      /* A cell with a caption: the figure on the label's baseline (round 2). */
      .sb-statrow:not([data-cols="1"]) > .sb-statrow-cell:has(> .sb-statrow-foot) { align-items: baseline; }
      .sb-statrow:not([data-cols="1"]) > .sb-statrow-cell:has(> .sb-statrow-foot) > .sb-statrow-value { grid-row: 1; }
      .sb-statrow:not([data-cols="1"]) > .sb-statrow-cell:has(> .sb-statrow-foot) > .sb-statrow-label { align-self: baseline; }
      .sb-statrow:not([data-cols="1"]) > .sb-statrow-cell > :not(.sb-statrow-label, .sb-statrow-value, .sb-statrow-foot) {
        grid-column: 3;
        grid-row: 1 / span 2;
        align-self: center;
        justify-self: end;
      }
    
      .sb-statrow:not([data-cols="1"]):not(.sb-statrow--open):has(> .sb-statrow-cell:nth-child(3)):not(:has(> .sb-statrow-cell > :is(.sb-statrow-foot, :not(.sb-statrow-label, .sb-statrow-value, .sb-statrow-foot)))) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .sb-statrow:not([data-cols="1"]):not(.sb-statrow--open):has(> .sb-statrow-cell:nth-child(3)):not(:has(> .sb-statrow-cell > :is(.sb-statrow-foot, :not(.sb-statrow-label, .sb-statrow-value, .sb-statrow-foot)))) > .sb-statrow-cell {
        grid-column: auto;
        grid-row: span 4;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: subgrid;
        align-items: start;
        column-gap: 0;
        padding: var(--sb-space-3) var(--sb-space-4);
      }
      .sb-statrow:not([data-cols="1"]):not(.sb-statrow--open):has(> .sb-statrow-cell:nth-child(3)):not(:has(> .sb-statrow-cell > :is(.sb-statrow-foot, :not(.sb-statrow-label, .sb-statrow-value, .sb-statrow-foot)))) > .sb-statrow-cell:last-child:nth-child(odd) { grid-column: 1 / -1; }
      .sb-statrow:not([data-cols="1"]):not(.sb-statrow--open):has(> .sb-statrow-cell:nth-child(3)):not(:has(> .sb-statrow-cell > :is(.sb-statrow-foot, :not(.sb-statrow-label, .sb-statrow-value, .sb-statrow-foot)))) > .sb-statrow-cell > .sb-statrow-label {
        grid-column: 1;
        grid-row: 1;
        align-self: start;
        margin: 0 0 var(--sb-space-1);
      }
      .sb-statrow:not([data-cols="1"]):not(.sb-statrow--open):has(> .sb-statrow-cell:nth-child(3)):not(:has(> .sb-statrow-cell > :is(.sb-statrow-foot, :not(.sb-statrow-label, .sb-statrow-value, .sb-statrow-foot)))) > .sb-statrow-cell > .sb-statrow-value {
        grid-column: 1;
        grid-row: 2;
        font-size: clamp(var(--sb-text-xl), 6.2cqi, var(--sb-text-2xl));
        white-space: normal;
        text-wrap: balance;
      }
    }
  
    /* ===== Vocabulary: joined strip frame (SHR-R2-G03) ===== */
    body:not(.sb-brand-evergreen) :is(.sb-statrow:not(.sb-statrow--open), .sb-grid--joined) {
      position: relative;
      border-radius: var(--radius-card, 0px);
      overflow: clip;
    }
    body:not(.sb-brand-evergreen) :is(.sb-statrow:not(.sb-statrow--open), .sb-grid--joined)::after {
      content: '';
      position: absolute;
      inset: 0;
      border: clamp(0px, calc(var(--radius-card, 0px) * 1000), 1px) solid var(--border);
      border-radius: inherit;
      pointer-events: none;
    }
  
    /* ===== Vocabulary: key/value ===== */
    .sb-kv {
      display: grid;
      grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
      margin: 0;
      border-block-start: 1px solid var(--border);
    }
    /* No double hairline inside a frame (CD-16). */
    :is(.sb-surface, .sb-list, .sb-grid--joined > *, .sb-statrow-cell) > .sb-kv:first-child { border-block-start: 0; }
    .sb-kv > :is(dt, dd) {
      margin: 0;
      padding: var(--sb-space-3) 0;
      border-block-end: 1px solid var(--border);
      font-size: var(--sb-text-base);
    }
    .sb-kv > dt {
      padding-inline-end: var(--sb-space-4);
      color: var(--text-muted);
    }
    .sb-kv > dd {
      min-inline-size: 0;
      color: var(--text-heading);
      overflow-wrap: anywhere;
    }
    .sb-surface > .sb-kv:last-child > :is(dt, dd):nth-last-child(-n + 2) { border-block-end: 0; }
    @container (width < 40rem) {
      .sb-kv { grid-template-columns: minmax(0, 1fr); }
      .sb-kv > dt { padding-block-end: 0; border-block-end: 0; }
    }
    /* A kv of short figures (counts, sizes) keeps each label and its value
       on one line at every width, one full-width hairline under each row
       (round 2, admin-workflow-versions-R2-02: no rule under the value
       alone). A figure is set end-aligned in the text face's tabular
       numerals (one numeral voice; mono only for identifiers). */
    .sb-kv.sb-kv--inline { grid-template-columns: minmax(0, 1fr) auto; }
    .sb-kv.sb-kv--inline > dt { padding-block-end: var(--sb-space-3); border-block-end: 1px solid var(--border); }
    .sb-surface > .sb-kv.sb-kv--inline:last-child > :is(dt, dd):nth-last-child(-n + 2) { border-block-end: 0; }
    .sb-kv > dd.is-num {
      text-align: end;
      font-variant-numeric: lining-nums tabular-nums;
      letter-spacing: 0;
    }

    /* ===== Vocabulary: table frame =====
       Wraps the existing scroller:
       <div class="sb-table-frame"><div class="sb-table-wrap" role="region" tabindex="0"><table>… */
    .sb-table-frame {
      min-inline-size: 0;
      background: var(--surface-elevated);
      border: 1px solid var(--border);
      border-radius: var(--radius-card);
    }
  

    /* ===== Vocabulary: dots (01-SPEC §6.3) ===== */
    .sb-dot {
      display: inline-block;
      flex: 0 0 7px;
      inline-size: 7px;
      block-size: 7px;
      border-radius: var(--radius-pill);
      border: 1.5px solid var(--text-faint);
      background: transparent;
    }
    .sb-dot--live { border-color: var(--accent); background: var(--accent); }
    /* Done is the success mark; it is the accent only where the accent is the
       skin's success hue (accent.done, SHR-R1-G13). */
    .sb-dot--done { border-color: var(--dot-done, var(--accent)); background: var(--dot-done, var(--accent)); }
    .sb-dot--warn { border-color: var(--color-warning-icon); background: var(--color-warning-icon); }
    .sb-dot--error { border-color: var(--color-error-icon); background: var(--color-error-icon); }
    @media (prefers-reduced-motion: no-preference) {
      .sb-dot--live.is-pulsing { animation: sb-dot-fade calc(var(--motion-duration-move) * 6) var(--motion-ease-standard) infinite; }
    }
    @keyframes sb-dot-fade { 50% { opacity: 0.45; } }

    /* ===== Vocabulary: meters ===== */
    .sb-meter {
      position: relative;
      block-size: 4px;
      overflow: hidden;
      background: var(--surface-sunken);
      border-radius: var(--radius-pill);
    }
    /* Default: a data meter (D20). */
    .sb-meter > span {
      display: block;
      block-size: 100%;
      inline-size: var(--sb-meter-value, 0%);
      background: var(--text-muted);
      border-radius: inherit;
      transition: inline-size var(--sb-transition-move);
    }
    .sb-meter--live > span { background: var(--signal-working, var(--accent)); }
    .sb-meter--md { block-size: 6px; }
    .sb-meter--warning > span { background: var(--color-warning-icon); }
    .sb-meter--error > span { background: var(--color-error-icon); }
    @media (prefers-reduced-motion: reduce) {
      .sb-meter > span { transition: none; }
    }

    /* ===== Success mark: tile (renderSkinSuccessMark size 'tile') ===== */
    .sb-success-check--tile {
      inline-size: 44px;
      block-size: 44px;
      background: var(--color-success-bg);
      color: var(--color-success-icon);
      border: 1px solid var(--color-success-line);
      border-radius: var(--radius-card);
    }
    .sb-success-check--tile svg {
      inline-size: 20px;
      block-size: 20px;
    }

    @media (forced-colors: active) {
      .sb-dot { forced-color-adjust: none; border-color: CanvasText; }
      .sb-dot--live,
      .sb-dot--done,
      .sb-dot--warn,
      .sb-dot--error { background: CanvasText; }
      .sb-meter { border: 1px solid CanvasText; }
      .sb-meter > span { forced-color-adjust: none; background: Highlight; }
    }
  

    /* ===== Vocabulary: row actions (round 1) =====
       One recipe for every table and list row's inline actions (View, Chat,
       Credits, Edit, Versions, Preview, Export): quiet text in heading ink at
       the label weight and the table text size, an optional 16px outline
       glyph, a 32px hit area, 16px apart. Evergreen only on hover and focus,
       so the view's one primary keeps the colour (P3). */
    .sb-row-actions {
      display: inline-flex;
      align-items: center;
      flex-wrap: nowrap;
      gap: var(--sb-space-4);
    }
    .sb-row-action {
      display: inline-flex;
      align-items: center;
      gap: var(--sb-space-1);
      min-block-size: 32px;
      padding: 0;
      border: 0;
      background: transparent;
      color: var(--text-heading);
      font: inherit;
      font-size: var(--sb-text-base);
      font-weight: var(--sb-weight-label);
      text-transform: var(--chrome-transform, none);
      letter-spacing: var(--chrome-tracking, normal);
      white-space: nowrap;
      text-decoration: none;
      cursor: pointer;
      transition: color var(--sb-transition-micro);
    }
    .sb-row-action svg {
      flex: none;
      inline-size: 16px;
      block-size: 16px;
    }
    @media (hover: hover) {
      .sb-row-action:hover { color: var(--accent-text); }
    }
    .sb-row-action:focus-visible { color: var(--accent-text); }
    @media (max-width: 1023px), (pointer: coarse) {
      .sb-row-action { min-block-size: 44px; }
    }

    /* ===== Text link: a quiet action (no blanket a:hover underline, AE-008) ===== */
    .sb-text-link {
      color: var(--accent-text);
      font-weight: var(--sb-weight-label);
      text-decoration: none;
    }
    @media (hover: hover) {
      .sb-text-link:hover {
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 3px;
      }
    }
    /* A secondary text link beside the view's primary (round 1, dashboard
       H-4): heading ink at rest, the accent only on hover and focus, so
       evergreen keeps meaning "the one thing to do". */
    .sb-text-link--quiet {
      color: var(--text-heading);
      transition: color var(--sb-transition-micro);
    }
    .sb-text-link--quiet:focus-visible { color: var(--accent-text); }
    @media (hover: hover) {
      .sb-text-link--quiet:hover { color: var(--accent-text); }
    }
    /* ===== Busy is never faded (round 3, admin-reports-R3-01) =====
       A pending control (window.sbPending: .is-pending, aria-busy, then
       disabled) is working, not unavailable: it keeps its rest paint at
       full strength, so its label holds its contrast and the skin's loading
       glyph (drawn in the label colour) reads on the fill. The doubled class
       outranks a kit's [disabled] / [aria-disabled] opacity rule (the admin
       kit's link buttons faded a busy primary to about 2.4:1). */
    .is-pending.is-pending[aria-busy="true"] {
      opacity: 1;
      cursor: progress;
    }

    /* Rendered only by renderActionLabel({ trailing }): never a CSS ::after. */
    .sb-btn-arrow {
      flex: none;
      inline-size: 16px;
      block-size: 16px;
      margin-inline-start: var(--sb-space-2);
    }
    /* Inside a button the button's own gap (--sb-space-2, 8px) is the one
       word-space between the label and its arrow; the arrow adds no margin
       of its own (R2-11, dashboard-customer-R11-03, dashboard-partner-R11-04:
       the two stacked to about 20px on the dashboard, the detail CTA and the
       action-needed banner, while every other button sat at 8px). */
    :is(.btn, [class*="sb-btn-"]) > .sb-btn-arrow {
      margin-inline-start: 0;
    }
    /* In running text the arrow is part of the word (round 1): the drawn
       glyph about 0.75em, its stroke at the label's weight, 6px from the last
       letter (the glyph's own side bearing included) and centred on the
       x-height. Hover fades the colour; the arrow never moves. */
    .sb-text-link > .sb-btn-arrow {
      display: inline-block;
      inline-size: 1.25em;
      block-size: 1.25em;
      margin-inline-start: 2px;
      vertical-align: middle;
      stroke-width: 2;
    }

  

    /* ===== Vocabulary: chips (01-SPEC §6.3) ===== */
    .sb-chip {
      display: inline-flex;
      align-items: center;
      gap: var(--sb-space-2);
      min-block-size: 32px;
      padding: 0 var(--sb-space-3);
      border: 1px solid var(--border);
      border-radius: var(--radius-pill);
      background: var(--surface-elevated);
      color: var(--text-heading);
      font: inherit;
      font-size: var(--sb-text-sm);
      font-weight: var(--sb-weight-label);
      text-transform: var(--chrome-transform, none);
      letter-spacing: var(--chrome-tracking, normal);
      white-space: nowrap;
      text-decoration: none;
      cursor: pointer;
      transition: background-color var(--sb-transition-micro), border-color var(--sb-transition-micro);
    }
    @media (hover: hover) {
      .sb-chip:hover { background: var(--surface-panel); border-color: var(--border-strong); }
    }
    .sb-chip:is([aria-pressed="true"], [aria-current], .is-active) {
      background: var(--accent-active-tint);
      border-color: var(--accent-select-line);
      color: var(--accent-readout);
    }
    @media (max-width: 1023px), (pointer: coarse) {
      .sb-chip { min-block-size: 44px; }
    }

    /* ===== Multi-select glyph: 4px on Evergreen, square on partners (CD-06).
       The rest edge is --text-muted: --border-strong fails WCAG 1.4.11. ===== */
    .sb-check {
      display: inline-grid;
      place-items: center;
      flex: 0 0 18px;
      inline-size: 18px;
      block-size: 18px;
      border: 1.5px solid var(--text-muted);
      border-radius: calc(var(--radius-select, 0px) / 2);
      background: var(--surface-elevated);
      color: transparent;
    }
    .sb-check svg { inline-size: 12px; block-size: 12px; }
    [aria-pressed="true"] > .sb-check,
    [aria-checked="true"] > .sb-check,
    [aria-selected="true"] > .sb-check,
    :checked + .sb-check {
      background: var(--accent);
      border-color: var(--accent);
      color: var(--accent-contrast);
    }

    /* ===== Field anatomy (the controls themselves: base/form-styles.ts) ===== */
    .sb-field {
      display: flex;
      flex-direction: column;
      gap: var(--sb-space-2);
      min-inline-size: 0;
    }
    .sb-field-label {
      font-size: var(--sb-text-base);
      font-weight: var(--sb-weight-label);
      color: var(--text-heading);
      text-transform: var(--chrome-transform, none);
      letter-spacing: var(--chrome-tracking, normal);
    }
    .sb-field-help {
      font-size: var(--sb-text-sm);
      color: var(--text-muted);
    }
    .sb-field-error {
      font-size: var(--sb-text-sm);
      color: var(--color-error-text);
    }
    .sb-field-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: var(--sb-space-5) var(--sb-space-6);
    }
    @container (min-width: 40rem) {
      .sb-field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

    @media (forced-colors: active) {
      .sb-chip:is([aria-pressed="true"], [aria-current], .is-active) {
        outline: 2px solid Highlight;
        outline-offset: -2px;
      }
      .sb-check { border-color: CanvasText; }
    }
  

    /* ===== Page-ground navs (step rail, TOC, settings nav, outlines) ===== */
    .sb-navlist {
      display: flex;
      flex-direction: column;
      gap: 2px;
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .sb-navrow {
      display: flex;
      align-items: center;
      gap: var(--sb-space-3);
      min-block-size: 40px;
      padding: 0 var(--sb-space-3);
      border-radius: var(--radius-select, var(--radius-control));
      color: var(--text-heading);
      font-size: var(--sb-text-base);
      text-decoration: none;
      transition: background-color var(--sb-transition-micro), color var(--sb-transition-micro);
    }
    @media (hover: hover) {
      .sb-navrow:hover { background: var(--surface-hover); }
    }
    .sb-navrow:is([aria-current], .is-active) {
      background: var(--accent-active-tint);
      color: var(--accent-readout);
      font-weight: var(--sb-weight-label);
    }
    .sb-navrow svg { flex: none; inline-size: 18px; block-size: 18px; }
    .sb-navrow:is([aria-current], .is-active) svg { color: var(--accent-text); }
    @media (max-width: 1023px), (pointer: coarse) {
      .sb-navrow { min-block-size: 44px; }
    }

    /* ===== Tab bar: sage pill for the selected tab, no underline =====
       A strip wider than its box scrolls sideways (round 1): no scrollbar at
       rest (it read as a selected-tab underline; `scrollbar-width` alone,
       so the document keeps one global scrollbar rule), proximity snap to tab
       starts, and a 24px fade on each edge only while tabs hide beyond it,
       so a cut label reads as "more this way", never as a broken glyph. The
       fade is a mask on the strip itself (any ground, any skin). */
    .sb-tabbar {
      display: flex;
      flex-wrap: nowrap;
      gap: var(--sb-space-1);
      border: 0;
    }
    .sb-tabbar {
      --sb-tabbar-fade: 24px;
      overflow-x: auto;
      overscroll-behavior-x: contain;
      scroll-snap-type: x proximity;
      scroll-padding-inline: 0;
      scrollbar-width: none;
    }
    .sb-tabbar > * { flex: 0 0 auto; scroll-snap-align: start; }
    @supports (animation-timeline: scroll()) {
      .sb-tabbar {
        -webkit-mask-image: linear-gradient(to right, transparent 0, black var(--sb-tabbar-start), black calc(100% - var(--sb-tabbar-end)), transparent 100%);
        mask-image: linear-gradient(to right, transparent 0, black var(--sb-tabbar-start), black calc(100% - var(--sb-tabbar-end)), transparent 100%);
        animation: sb-tabbar-edges linear both;
        animation-timeline: scroll(self inline);
      }
    }
    @property --sb-tabbar-start { syntax: '<length>'; inherits: false; initial-value: 0px; }
    @property --sb-tabbar-end { syntax: '<length>'; inherits: false; initial-value: 0px; }
    @keyframes sb-tabbar-edges {
      0% { --sb-tabbar-start: 0px; --sb-tabbar-end: var(--sb-tabbar-fade); }
      4% { --sb-tabbar-start: var(--sb-tabbar-fade); }
      96% { --sb-tabbar-end: var(--sb-tabbar-fade); }
      100% { --sb-tabbar-start: var(--sb-tabbar-fade); --sb-tabbar-end: 0px; }
    }
    .sb-tabbar-tab {
      display: inline-flex;
      align-items: center;
      gap: var(--sb-space-2);
      min-block-size: 36px;
      padding: 0 var(--sb-space-3);
      border: 0;
      border-radius: var(--radius-select, var(--radius-control));
      background: transparent;
      color: var(--text-heading);
      font: inherit;
      font-size: var(--sb-text-base);
      text-transform: var(--chrome-transform, none);
      letter-spacing: var(--chrome-tracking, normal);
      white-space: nowrap;
      text-decoration: none;
      cursor: pointer;
      transition: background-color var(--sb-transition-micro), color var(--sb-transition-micro);
    }
    @media (hover: hover) {
      .sb-tabbar-tab:hover { background: var(--surface-hover); }
    }
    .sb-tabbar-tab:is([aria-selected="true"], [aria-current], .is-active) {
      background: var(--accent-active-tint);
      color: var(--accent-readout);
      font-weight: var(--sb-weight-label);
    }
    /* The bar scrolls sideways, so an outer ring would be clipped. */
    .sb-tabbar-tab:focus-visible {
      outline-offset: var(--focus-offset-inset, -2px);
      box-shadow: var(--focus-ring-inset);
    }
    .sb-tabbar-count {
      font-size: var(--sb-text-sm);
      color: var(--text-muted);
      font-variant-numeric: tabular-nums;
    }
    @media (max-width: 1023px), (pointer: coarse) {
      .sb-tabbar-tab { min-block-size: 44px; }
    }
    /* A phone column holds three tabs with their counts whole: the pill
       tightens its inline padding before the strip has to scroll. */
    @container (max-width: 30rem) {
      .sb-tabbar-tab { gap: calc(var(--sb-space-1) * 1.5); padding-inline: var(--sb-space-2); }
    }
    /* At rest the first pill's edge sits on the content edge at every width,
       the phone included (round 3, consultation-detail-collaborators-R3-03,
       consultation-detail-progress-R3-01): no bleed into the gutter, so the
       selected pill lines up with the title, the rule and the buttons, as
       it does at 1920 and 1440, and no label starts outside the column
       (admin-workflow-journey-R3-03, admin-pricing-R3-05). The strip's own
       edge fades mark the tabs past either end. */

    /* A strip that ends in "More" (data-sb-strip="more", round 4,
       admin-workflow-editor-R4-01; the tab-strip client builds it): the tabs
       that do not fit whole leave the strip for the menu, so no tab is ever
       cut or ghosted. The button wears the strip's own tab look (it copies
       the first tab's classes), a skin chevron after the label, and the
       selected look while the current section is in its menu. */
    :is(.sb-tabbar, [data-sb-strip]) > [data-sb-overflow],
    :is(.sb-tabbar, [data-sb-strip]) > [data-sb-more-slot][hidden] {
      display: none;
    }
    .sb-strip-more { display: flex; flex: none; }
    .sb-strip-more-trigger {
      display: inline-flex;
      align-items: center;
      gap: var(--sb-space-2);
      border: 0;
      background: transparent;
      font-family: inherit;
      line-height: inherit;
      letter-spacing: inherit;
      white-space: nowrap;
      cursor: pointer;
    }
    .sb-strip-more-trigger::after {
      content: "";
      flex: none;
      inline-size: 0.875rem;
      block-size: 0.875rem;
      background: var(--select-chevron) center / 0.875rem 0.875rem no-repeat;
    }
    .sb-strip-menu a[aria-current]:not([aria-current="false"]) {
      background: var(--accent-active-tint);
      color: var(--accent-readout);
      font-weight: var(--sb-weight-label);
    }

    /* A sticky bar around a tab bar, once stuck (round 3,
       admin-consultation-detail-R3-02): the tab-strip client marks the bar
       data-sb-stuck; one hairline under it and a 16px fade to the page
       ground, so content passes under the bar instead of being sliced by
       it. One layer below the bar (its top edge is the hairline), drawn
       outside the strip, whose own edge mask would clip it; only the stuck
       state draws it. */
    [data-sb-stuck]::after {
      content: "";
      position: absolute;
      inset-inline: 0;
      inset-block-start: 100%;
      box-sizing: content-box;
      block-size: 16px;
      border-block-start: 1px solid var(--border);
      background: linear-gradient(var(--surface-page), transparent) padding-box;
      pointer-events: none;
    }

    /* ===== Segmented control: a recessed track, the sage segment ===== */
    .sb-segmented {
      display: inline-flex;
      gap: 2px;
      padding: 3px;
      background: var(--surface-sunken);
      border-radius: var(--radius-select, var(--radius-control));
    }
    .sb-segmented > :is(button, a, label) {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: var(--sb-space-2);
      min-block-size: 32px;
      padding: 0 var(--sb-space-3);
      border: 1px solid transparent;
      border-radius: var(--radius-select, var(--radius-control));
      background: transparent;
      color: var(--text-heading);
      font: inherit;
      font-weight: var(--sb-weight-label);
      text-decoration: none;
      cursor: pointer;
      transition: background-color var(--sb-transition-micro), border-color var(--sb-transition-micro);
    }
    /* Edge by border, so the focus ring survives (E7). */
    .sb-segmented > :is([aria-pressed="true"], [aria-current], .is-active, :has(input:checked)) {
      background: var(--accent-active-tint);
      border-color: var(--accent-select-line);
      color: var(--accent-readout);
    }
    .sb-segmented > label > input {
      position: absolute;
      opacity: 0;
      inline-size: 1px;
      block-size: 1px;
      pointer-events: none;
    }
    /* Radio segments: the input is hidden, the label shows focus. */
    .sb-segmented > label:has(:focus-visible) { box-shadow: var(--focus-ring); }
    @media (max-width: 1023px), (pointer: coarse) {
      .sb-segmented > :is(button, a, label) { min-block-size: 44px; }
    }

    @media (forced-colors: active) {
      .sb-navrow:is([aria-current], .is-active),
      .sb-tabbar-tab:is([aria-selected="true"], [aria-current], .is-active),
      .sb-segmented > :is([aria-pressed="true"], [aria-current], .is-active, :has(input:checked)) {
        outline: 2px solid Highlight;
        outline-offset: -2px;
      }
    }
  

    /* ===== A table that fits (round 3, admin-users-R3-01) =====
       The scroll-fit client (window.sbScrollFit) marks a table scroller whose
       content is at most 8px wider than its box: the sum of its tracks, not
       hidden data. It shows no edge fade and does not scroll sideways, so a
       row's last control (the row menu) is never masked with nothing beyond
       it; the box cuts only the last cell's end padding. */
    .sb-table-wrap[data-sb-fits] {
      overflow-x: hidden;
      -webkit-mask-image: none;
      mask-image: none;
      animation: none;
    }

    /* ===== A pinned table column (dev E2E D1) =====
       tableRecipe() pins .is-actions to a table wrap that scrolls sideways
       and runs this on the wrap's inline scroll timeline: --sb-table-pin is
       1 while the timeline is active (the table overflows) and its initial
       0 otherwise, so the pinned cell's ground and start rule exist only
       then. A state, not motion: both keyframes hold the same value. */
    @property --sb-table-pin { syntax: '<number>'; inherits: false; initial-value: 0; }
    @keyframes sb-table-pin {
      from, to { --sb-table-pin: 1; }
    }

    /* ===== Scroll edges: the keyframes scrollFadeRecipe() drives ===== */
    @property --sb-scroll-fade-start { syntax: '<length>'; inherits: false; initial-value: 0px; }
    @property --sb-scroll-fade-end { syntax: '<length>'; inherits: false; initial-value: 0px; }
    @keyframes sb-scroll-fade-start {
      from { --sb-scroll-fade-start: 0px; }
      to { --sb-scroll-fade-start: var(--sb-scroll-fade); }
    }
    @keyframes sb-scroll-fade-end {
      from { --sb-scroll-fade-end: var(--sb-scroll-fade); }
      to { --sb-scroll-fade-end: 0px; }
    }
  

    /* ===== Vocabulary: app bar (01-SPEC §6.3) ===== */
    .sb-appbar {
      display: flex;
      align-items: center;
      gap: var(--sb-space-4);
      min-block-size: var(--sb-appbar-h);
      padding-inline: var(--sb-stage-pad-x);
      background: var(--surface-page);
      border-block-end: 1px solid var(--border);
    }
    .sb-appbar--sticky {
      position: sticky;
      top: 0;
      z-index: var(--z-chrome);
    }
    .sb-appbar-start {
      display: flex;
      align-items: center;
      gap: var(--sb-space-3);
      min-inline-size: 0;
    }
    .sb-appbar-title {
      margin: 0;
      overflow: hidden;
      font-family: var(--font-heading);
      font-size: var(--sb-text-lg);
      font-weight: var(--sb-weight-label);
      text-overflow: ellipsis;
      white-space: nowrap;
      color: var(--text-heading);
    }
    .sb-appbar-end {
      display: flex;
      align-items: center;
      gap: var(--sb-space-2);
      margin-inline-start: auto;
    }

    /* ===== Vocabulary: sticky bottom action bar ===== */
    .sb-actionbar {
      position: sticky;
      bottom: 0;
      z-index: var(--z-sticky);
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: var(--sb-space-3);
      padding: var(--sb-space-3) var(--sb-stage-pad-x) max(var(--sb-space-3), env(safe-area-inset-bottom));
      margin-inline: calc(-1 * var(--sb-stage-pad-x));
      background: var(--surface-page);
      border-block-start: 1px solid var(--border);
    }
    /* Inside a column that is not the stage (the interview main). */
    .sb-actionbar--flush {
      margin-inline: 0;
      padding-inline: var(--sb-space-4);
    }
    @media (max-width: 639px) {
      .sb-actionbar > :is(.btn, button, a) { flex: 1 1 auto; }
    }
  

    /* ===== Vocabulary: row menu (01-SPEC §6.3) ===== */
    .sb-row-menu-trigger {
      inline-size: 32px;
      block-size: 32px;
      min-inline-size: 32px;
      min-block-size: 32px;
      padding: 0;
      justify-content: center;
    }
    .sb-row-menu-trigger svg { inline-size: 18px; block-size: 18px; }
    @media (max-width: 1023px), (pointer: coarse) {
      .sb-row-menu-trigger {
        inline-size: 44px;
        block-size: 44px;
        min-inline-size: 44px;
        min-block-size: 44px;
      }
    }
    .sb-row-menu[popover] {
      position: fixed;
      inset: auto;
      margin: 0;
      min-inline-size: 12rem;
      max-inline-size: calc(100vw - 2 * var(--sb-space-3));
      padding: var(--sb-space-1);
      background: var(--surface-elevated);
      border: 1px solid var(--border);
      border-radius: var(--radius-float, var(--radius-modal));
      box-shadow: var(--elev-popover);
      color: var(--text-heading);
    }
    .sb-row-menu[popover]:popover-open {
      display: flex;
      flex-direction: column;
    }
    /* Items inside a form (a destructive POST) still lay out as rows. */
    .sb-row-menu > form { display: contents; }
    .sb-row-menu :is(a, button) {
      display: flex;
      align-items: center;
      gap: var(--sb-space-3);
      inline-size: 100%;
      min-block-size: 40px;
      padding: 0 var(--sb-space-3);
      border: 0;
      border-radius: var(--radius-select, 0);
      background: transparent;
      color: inherit;
      font: inherit;
      font-size: var(--sb-text-base);
      text-align: start;
      text-decoration: none;
      white-space: nowrap;
      cursor: pointer;
      transition: background-color var(--sb-transition-micro);
    }
    @media (hover: hover) {
      .sb-row-menu :is(a, button):hover { background: var(--surface-hover); }
    }
    /* Inset ring: the menu's padding is narrower than an outer ring. */
    .sb-row-menu :is(a, button):focus-visible {
      outline-offset: var(--focus-offset-inset, -2px);
      box-shadow: var(--focus-ring-inset);
    }
    .sb-row-menu-sep {
      block-size: 0;
      margin: var(--sb-space-1) 0;
      border: 0;
      border-block-start: 1px solid var(--border);
    }
    .sb-row-menu .is-destructive { color: var(--danger-text); }
    @media (pointer: coarse) {
      .sb-row-menu :is(a, button) { min-block-size: 44px; }
    }
    /* Calm entrance (P10): a fade only, since the menu may open above or
       below its trigger. The universal reduced-motion rule removes it. */
    .sb-row-menu[popover] {
      transition: opacity var(--sb-transition-move), overlay var(--sb-transition-move) allow-discrete, display var(--sb-transition-move) allow-discrete;
      opacity: 0;
    }
    .sb-row-menu[popover]:popover-open { opacity: 1; }
    @starting-style {
      .sb-row-menu[popover]:popover-open { opacity: 0; }
    }
  

    /* ===== Empty state (renderEmptyState) ===== */
    .sb-empty-state {
      --empty-plate: 4rem;
      display: block;
      text-align: center;
      padding: var(--sb-space-10) var(--sb-space-6);
      background: var(--surface-elevated);
      border: 1px solid var(--border);
      border-radius: var(--radius-card);
      color: var(--text-muted);
    }
    .sb-empty-state--sm {
      --empty-plate: 3rem;
      padding: var(--sb-space-6) var(--sb-space-4);
    }
    .sb-empty-state--lg {
      --empty-plate: 5rem;
      padding: var(--sb-space-16) var(--sb-space-8);
    }
    .sb-empty-state--bare,
    :is(.sb-table-frame, .sb-surface, .sb-list) > .sb-empty-state {
      background: transparent;
      border: 0;
      border-radius: 0;
    }

    /* The plate: square, in the selection tint with its line (V6). */
    .sb-empty-state__visual {
      display: flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      inline-size: var(--empty-plate);
      block-size: var(--empty-plate);
      margin: 0 auto var(--sb-space-5);
      background: var(--accent-active-tint);
      color: var(--accent-text);
      border: 1px solid var(--accent-select-line);
      border-radius: var(--radius-card);
    }
    .sb-empty-state__glyph {
      display: block;
      flex: 0 0 auto;
    }
    .sb-empty-state--error .sb-empty-state__visual {
      background: var(--color-status-error-bg);
      border-color: var(--color-error-line);
      color: var(--color-status-error-icon, var(--color-status-error-text));
    }
    /* Skin artwork (Evergreen, Dell) fills its plate and draws its lines in
       the muted ink on every tone, so its one accent or error detail is the
       coloured mark: on the accent-text ink Evergreen's accent detail sat at
       1.37:1. */
    .sb-empty-state__visual:has(> .sb-illustration--art) {
      border-radius: var(--radius-card);
      color: var(--text-muted);
    }

    /* Family and weight at class specificity, so the skin's heading rules
       (body.sb-brand-<slug> h2) win them: Deloitte and Accenture set their
       headings in the sans, and the title read their display serif instead.
       Size, leading and spacing stay on the empty state's step below. */
    :where(.sb-empty-state) .sb-empty-state__title {
      font-family: var(--font-heading);
      font-weight: var(--sb-weight-heading, 400);
    }
    .sb-empty-state .sb-empty-state__title {
      margin: 0 auto var(--sb-space-2);
      max-inline-size: 40ch;
      font-size: var(--sb-text-lg);
      line-height: 1.3;
      letter-spacing: normal;
      text-transform: none;
      text-wrap: balance;
      color: var(--text-heading);
    }
    .sb-empty-state--sm .sb-empty-state__title { font-size: var(--sb-text-base); }

    .sb-empty-state__query {
      color: var(--text-heading);
      overflow-wrap: anywhere;
    }

    .sb-empty-state .sb-empty-state__body {
      margin: 0 auto;
      max-inline-size: 52ch;
      font-family: var(--font-sans);
      font-size: var(--sb-text-sm);
      line-height: 1.55;
      text-wrap: pretty;
      color: var(--text-muted);
    }

    .sb-empty-state__action {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: var(--sb-space-3);
      margin-block-start: var(--sb-space-6);
    }

    /* Row: an empty inside a section or table (36px plate with the
       illustration's icon, the title at the row-name size and the body
       beside it, the action directly under the body on the text's left
       edge: one anatomy for every table no-match, round 1). */
    .sb-empty-state--row {
      --empty-plate: 2.25rem;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      grid-template-areas: "visual title" "visual body" "visual action";
      align-items: center;
      column-gap: var(--sb-space-4);
      row-gap: var(--sb-space-1);
      padding: var(--sb-space-6) var(--sb-space-5);
      text-align: start;
    }
    .sb-empty-state--row .sb-empty-state__visual {
      grid-area: visual;
      align-self: start;
      margin: 0;
    }

    /* A row without an action or body keeps its title centred on the plate. */
    .sb-empty-state--row:not(:has(.sb-empty-state__action)) {
      grid-template-areas: "visual title" "visual body";
    }
    .sb-empty-state--row .sb-empty-state__title {
      grid-area: title;
      margin: 0;
      max-inline-size: none;
      font-size: var(--sb-text-md);
      font-weight: var(--sb-weight-label);
    }
    .sb-empty-state--row:not(:has(.sb-empty-state__body)) .sb-empty-state__title { grid-row: 1 / span 2; }
    .sb-empty-state--row .sb-empty-state__body {
      grid-area: body;
      margin: 0;
      max-inline-size: none;
    }
    .sb-empty-state--row .sb-empty-state__action {
      grid-area: action;
      margin: var(--sb-space-3) 0 0;
      justify-content: flex-start;
    }

    @media (max-width: 639px) {
      .sb-empty-state {
        padding: var(--sb-space-8) var(--sb-space-4);
      }
      .sb-empty-state__action { flex-direction: column; align-items: stretch; }
      /* A bare empty (no frame) sits on the page's content column, so it
         takes no inset of its own: its action runs that column's full
         width, as the search field above it does, instead of stopping 16px
         short on each side (deliverables-library-R11-03). A framed state
         keeps its inset inside its frame; a bare one without an action
         keeps its text measure. */
      .sb-empty-state--bare:not(.sb-empty-state--row):has(> .sb-empty-state__action) {
        padding-inline: 0;
      }
      .sb-empty-state--row {
        padding: var(--sb-space-5) var(--sb-space-4);
      }
      .sb-empty-state--row .sb-empty-state__action { align-items: flex-start; }
      /* A phone row stacks (round 2, admin-storage-documents-R2-04): the
         plate over the title, the text on the frame's full width instead of
         a 225px column beside a hanging tile. The doubled class matches the
         no-action and no-body variants above. */
      .sb-empty-state.sb-empty-state--row {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "visual" "title" "body" "action";
      }
      .sb-empty-state.sb-empty-state--row:not(:has(.sb-empty-state__action)) {
        grid-template-areas: "visual" "title" "body";
      }
      .sb-empty-state.sb-empty-state--row .sb-empty-state__visual {
        margin-block-end: var(--sb-space-3);
      }
      .sb-empty-state.sb-empty-state--row .sb-empty-state__title { grid-row: auto; }
    }

    @media (forced-colors: active) {
      .sb-empty-state__visual { border: 1px solid CanvasText; }
    }

    /* ===== Horizontal scroller + table wrap ===== */
    .sb-hscroll,
    .sb-table-wrap {
      --hscroll-fade-size: 32px;
      max-inline-size: 100%;
      overflow-x: auto;
      overscroll-behavior-x: contain;
      scrollbar-width: thin;
      -webkit-overflow-scrolling: touch;
    }

    .sb-hscroll {
      display: flex;
      gap: var(--hscroll-gap, 12px);
      scroll-snap-type: x proximity;
      scroll-padding-inline: var(--hscroll-padding, 16px);
      padding-block-end: 4px;
    }

    .sb-hscroll > * {
      flex: 0 0 auto;
      scroll-snap-align: start;
    }

    .sb-table-wrap > table {
      min-inline-size: 100%;
    }

    .sb-table-wrap--bounded {
      max-block-size: var(--table-wrap-max, min(70vh, 45rem));
      overflow-y: auto;
      overscroll-behavior-y: contain;
    }

    /* The edge fade is a mask, and a mask clips everything painted outside
       the box, the base outer focus ring included: a focused scroller would
       show no ring at all. It takes the inset ring, and drops the fade while
       focused (below), so the ring is whole on every edge. */
    .sb-hscroll:focus-visible,
    .sb-table-wrap:focus-visible {
      outline-offset: var(--focus-offset-inset, -2px);
      box-shadow: var(--focus-ring-inset, inset 0 0 0 2px var(--accent));
    }

    @property --sb-hscroll-start {
      syntax: '<length>';
      inherits: false;
      initial-value: 0px;
    }

    @property --sb-hscroll-end {
      syntax: '<length>';
      inherits: false;
      initial-value: 0px;
    }

    @keyframes sb-hscroll-edges {
      0% { --sb-hscroll-start: 0px; --sb-hscroll-end: var(--hscroll-fade-size); }
      4% { --sb-hscroll-start: var(--hscroll-fade-size); }
      96% { --sb-hscroll-end: var(--hscroll-fade-size); }
      100% { --sb-hscroll-start: var(--hscroll-fade-size); --sb-hscroll-end: 0px; }
    }

    @supports (animation-timeline: scroll()) {
      .sb-hscroll,
      .sb-table-wrap {
        -webkit-mask-image: linear-gradient(to right, transparent 0, black var(--sb-hscroll-start), black calc(100% - var(--sb-hscroll-end)), transparent 100%);
        mask-image: linear-gradient(to right, transparent 0, black var(--sb-hscroll-start), black calc(100% - var(--sb-hscroll-end)), transparent 100%);
        animation: sb-hscroll-edges linear both;
        animation-timeline: scroll(self inline);
      }

      .sb-hscroll:focus-visible,
      .sb-table-wrap:focus-visible {
        -webkit-mask-image: none;
        mask-image: none;
      }

      /* Scroll-linked, not time-based: the reduced-motion rule must not
         collapse it into a finished frame. */
      @media (prefers-reduced-motion: reduce) {
        .sb-hscroll,
        .sb-table-wrap {
          animation-duration: auto !important;
        }
      }
    }

    @media print {
      .sb-hscroll,
      .sb-table-wrap {
        overflow: visible;
        -webkit-mask-image: none;
        mask-image: none;
      }
      .sb-hscroll { flex-wrap: wrap; }
      .sb-table-wrap--bounded { max-block-size: none; }
    }

    /* ===== Icon button (OP55-074) ===== */
    .sb-icon-btn {
      display: inline-flex;
      flex: 0 0 auto;
      align-items: center;
      justify-content: center;
      min-inline-size: var(--control-min-target, 44px);
      min-block-size: var(--control-min-target, 44px);
      padding: 0;
      border: 1px solid transparent;
      border-radius: var(--radius-control, var(--radius));
      background: transparent;
      color: var(--text-muted);
      line-height: 1;
      cursor: pointer;
      transition:
        background-color var(--sb-transition-micro),
        border-color var(--sb-transition-micro),
        color var(--sb-transition-micro);
    }
    .sb-icon-btn svg,
    .sb-icon-btn .sb-icon {
      inline-size: 1.125rem;
      block-size: 1.125rem;
      flex: 0 0 auto;
    }
    .sb-icon-btn--sm svg,
    .sb-icon-btn--sm .sb-icon {
      inline-size: 1rem;
      block-size: 1rem;
    }
    /* Hover on pointer devices only, so a tapped icon does not keep a sticky tint. */
    @media (hover: hover) {
      .sb-icon-btn:hover:not(:disabled, [aria-disabled="true"]) {
        background: var(--surface-hover);
        color: var(--text-heading);
      }
    }
    .sb-icon-btn:active:not(:disabled, [aria-disabled="true"]) {
      background: var(--surface-sunken);
    }
    /* A toggle icon (aria-pressed) reads as on in the skin's accent. */
    .sb-icon-btn[aria-pressed="true"] {
      background: var(--accent-subtle);
      color: var(--accent-text);
    }
    .sb-icon-btn:disabled,
    .sb-icon-btn[aria-disabled="true"] {
      cursor: not-allowed;
      opacity: var(--opacity-disabled, 0.55);
    }

    /* ===== Coarse-pointer floor (OP55-074) ===== */
    @media (pointer: coarse) {
      .btn,
      .btn-sm,
      .btn.sm,
      .nav-item,
      .sb-viewer-btn,
      .sb-option-chip,
      input:not([type]),
      input:is([type="text"], [type="email"], [type="password"], [type="search"], [type="tel"],
        [type="url"], [type="number"], [type="date"], [type="datetime-local"], [type="time"],
        [type="month"], [type="week"]),
      select:not([multiple]):not([size]) {
        min-height: max(var(--control-height-md, 40px), var(--control-min-target, 44px));
      }

      .sb-icon-btn {
        min-inline-size: max(var(--control-height-md, 40px), var(--control-min-target, 44px));
        min-block-size: max(var(--control-height-md, 40px), var(--control-min-target, 44px));
      }
    }


    /* ===== Dialog primitive (components/feedback/dialog) ===== */
    .sb-dialog-backdrop {
      position: fixed;
      inset: 0;
      z-index: var(--z-modal, 50);
      display: flex;
      align-items: center;
      justify-content: center;
      /* Clear the device's safe area where the page draws under it
         (viewport-fit=cover: the interview and chat pages). */
      padding:
        max(var(--sb-space-6), env(safe-area-inset-top, 0px))
        max(var(--sb-space-6), env(safe-area-inset-right, 0px))
        max(var(--sb-space-6), env(safe-area-inset-bottom, 0px))
        max(var(--sb-space-6), env(safe-area-inset-left, 0px));
      background: var(--scrim-modal, var(--color-modal-overlay));
      opacity: 0;
      transition: opacity var(--sb-transition-move);
    }
    .sb-dialog-backdrop[hidden] { display: none; }
    .sb-dialog-backdrop.is-open { opacity: 1; }
    .sb-dialog-backdrop[data-dialog-layer="confirm"] { z-index: var(--z-confirm, 60); }

    .sb-dialog {
      position: relative;
      display: flex;
      flex-direction: column;
      inline-size: 100%;
      max-inline-size: 520px;
      max-block-size: min(90vh, 90dvh);
      overflow: hidden;
      background: var(--surface-elevated);
      color: var(--text-body);
      border: 1px solid var(--border);
      /* A floating layer (01-SPEC §6.5, D12): the float radius, else the modal's. */
      border-radius: var(--radius-float, var(--radius-modal));
      box-shadow: var(--elev-4, var(--elev-modal));
      /* Calm motion (P10): a fade and an 8px rise, no scale. */
      transform: translateY(8px);
      transition: transform var(--sb-transition-move);
    }
    /* The panel takes programmatic focus only when it holds nothing
       focusable; the base ring would replace its elevation, so it keeps the
       elevation (forced-colors still paints the transparent outline). */
    .sb-dialog:focus-visible { box-shadow: var(--elev-4, var(--elev-modal)); }
    .sb-dialog-backdrop.is-open .sb-dialog { transform: none; }

    .sb-dialog--sm { max-inline-size: 420px; }
    .sb-dialog--lg { max-inline-size: 720px; }
    .sb-dialog--xl { max-inline-size: 960px; }
    .sb-dialog--full { max-inline-size: calc(100vw - 48px); max-block-size: calc(100dvh - 48px); }

    .sb-dialog__header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      padding: 20px 20px 12px 24px;
    }

    .sb-dialog__title {
      font-family: var(--font-heading);
      font-weight: var(--sb-weight-heading, 400);
      color: var(--text-heading);
      text-wrap: balance;
    }
    /* A dialog title is a component heading, not the page's h2. The skin's
       heading rules (body.sb-brand-<slug> h2) keep its family, weight,
       tracking and colour above; its size, leading and spacing stay on the
       dialog's step here. Without this a partner confirm title rendered at the
       page h2 size (Dell and Deloitte 2.5rem, Xerox 2.25rem) in a 420px panel. */
    .sb-dialog .sb-dialog__title {
      margin: 0;
      padding-block-start: 10px;
      font-size: var(--sb-text-xl);
      line-height: 1.3;
    }

    /* The close is the shared .sb-icon-btn (44px, touch floor, hover/press);
       the dialog only sizes its glyph up to 20px. */
    .sb-dialog__close { margin: 0; }
    .sb-dialog__close svg { inline-size: 1.25rem; block-size: 1.25rem; }

    .sb-dialog__body {
      flex: 1 1 auto;
      min-block-size: 0;
      overflow-y: auto;
      overscroll-behavior: contain;
      padding: 4px 24px 20px;
      color: var(--text-body);
      line-height: 1.6;
      /* QPW7-UI-082: a dialog body scrolls on a thin, trackless bar, so a
         classic skin bar (Dell's 12px slate) never sits against the panel's
         rounded edge. Chromium and Firefox read the standard pair; Safari the
         pseudo-elements, inset from the frame's corners. */
      scrollbar-width: thin;
      scrollbar-color: var(--theme-scrollbar-thumb) transparent;
    }
    .sb-dialog__body::-webkit-scrollbar { inline-size: 6px; block-size: 6px; }
    .sb-dialog__body::-webkit-scrollbar-track { background: transparent; margin-block: var(--sb-space-2); }
    .sb-dialog__body::-webkit-scrollbar-thumb { border-radius: var(--radius-pill, 999px); }
    .sb-dialog__body > :last-child { margin-bottom: 0; }

    .sb-dialog__message {
      margin: 0;
      color: var(--text-body);
      text-wrap: pretty;
    }

    .sb-dialog__icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      inline-size: 44px;
      block-size: 44px;
      margin-block-end: 12px;
      border-radius: var(--radius-control);
      background: var(--accent-subtle);
      color: var(--accent-text);
    }
    /* Status icon ink: the vivid tone at 3:1 on its own band (A1). */
    .sb-dialog__icon--warning { background: var(--color-status-warning-bg); color: var(--color-status-warning-icon, var(--color-status-warning-text)); }
    .sb-dialog__icon--danger { background: var(--color-status-error-bg); color: var(--color-status-error-icon, var(--color-status-error-text)); }

    .sb-dialog__footer {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: flex-end;
      gap: 12px;
      padding: 16px 24px;
      border-top: 1px solid var(--border);
      background: var(--surface-panel);
    }
    .sb-dialog__footer[hidden] { display: none; }

    /* Scroll lock while any dialog is open; a page that was scrolling keeps
       its scrollbar gutter so nothing behind the scrim shifts sideways (the
       client pins a scripted scroll too, QPW7-UI-023). A fixed scrim cannot
       cover the root gutter, which paints the root's background: it takes the
       page ground already composited under the skin's scrim
       (--sb-root-scrimmed, declared per skin by the scrollbar chrome), so no
       bright strip stays at the window edge (QPW7-UI-023/079). The body paints
       its own ground at full height, so nothing else reads the root colour.
       :root lifts the rule over a partner's html:has(body.sb-brand-*) ground. */
    html.sb-dialog-open { overflow: hidden; }
    html.sb-dialog-open--gutter { scrollbar-gutter: stable; }
    html.sb-dialog-open:root { background-color: var(--sb-root-scrimmed, Canvas); }
    /* QPW7-UI-023: a dialog stacked on a dialog puts the page under two scrims; the gutter follows. */
    html.sb-dialog-open.sb-dialog-open--stacked:root { background-color: var(--sb-root-scrimmed-stacked, var(--sb-root-scrimmed, Canvas)); }
    
    /* An opaque full-screen takeover owns the scroll: no root scrollbar and no
       reserved gutter beside its own (QAP-405). */
    html.sb-takeover-open:root { overflow: hidden; scrollbar-gutter: auto; }
  

    /* Phones: a bottom sheet anchored to the bottom edge at full width
       (QPW7-UI-075; it floated with side margins and a gap under it). Only
       the top corners round; the last row pads past the home indicator, so
       the sheet's own surface fills the safe area. Every size step is a sheet. */
    @media (max-width: 640px) {
      .sb-dialog-backdrop {
        align-items: flex-end;
        padding: max(var(--sb-space-6), env(safe-area-inset-top, 0px)) 0 0;
      }
      .sb-dialog,
      .sb-dialog.sb-dialog--sm,
      .sb-dialog.sb-dialog--lg,
      .sb-dialog.sb-dialog--xl,
      .sb-dialog.sb-dialog--full {
        inline-size: 100%;
        max-inline-size: none;
        max-block-size: calc(100dvh - max(var(--sb-space-6), env(safe-area-inset-top, 0px)));
        border-inline: 0;
        border-block-end: 0;
        border-end-start-radius: 0;
        border-end-end-radius: 0;
      }
      .sb-dialog__header { padding: 16px max(12px, env(safe-area-inset-right, 0px)) 8px max(20px, env(safe-area-inset-left, 0px)); }
      .sb-dialog__body { padding: 4px max(20px, env(safe-area-inset-right, 0px)) 16px max(20px, env(safe-area-inset-left, 0px)); }
      .sb-dialog__body:last-child { padding-block-end: calc(16px + env(safe-area-inset-bottom, 0px)); }
      .sb-dialog__footer { padding: 12px max(20px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px)); }
      .sb-dialog__footer > .btn { flex: 1 1 auto; }
    }
  

    /* ===== Toast primitive (window.showToast) ===== */
    /* Offsets clear the device's safe area where the page draws under it
       (viewport-fit=cover: the interview and chat pages; a phone on its side
       is wide enough for the top-right stack). */
    .sb-toast-region {
      position: fixed;
      inset-block-end: calc(var(--sb-space-6) + max(env(safe-area-inset-bottom, 0px), var(--toast-dock-offset, 0px)));
      inset-inline-end: calc(var(--sb-space-6) + env(safe-area-inset-right, 0px));
      z-index: var(--z-toast, 80);
      display: flex;
      flex-direction: column;
      inline-size: min(26rem, calc(100vw - 2 * var(--sb-space-4)));
      pointer-events: none;
    }

    .sb-toast-stack {
      display: flex;
      flex-direction: column-reverse;
      gap: var(--sb-space-3);
    }

    /* The announcements: pre-existing polite (status) and assertive (alert)
       live regions the script writes each message into. */
    .sb-toast-live {
      position: absolute;
      inline-size: 1px;
      block-size: 1px;
      margin: -1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }

    /* --toast-tone paints the rail (decorative); --toast-ink paints the icon,
       which must clear 3:1 on the elevated surface on every skin. The status
       border colours do not (Evergreen success/warning, Deloitte and Xerox
       warning sit near 2:1), so the icon reads the status icon ink (A1: the
       vivid tone moved only as far as 3:1 needs), falling back to the deep
       status text colour, which also clears it. */
    .sb-toast.toast {
      --toast-tone: var(--color-status-info-border);
      --toast-ink: var(--color-status-info-icon, var(--color-status-info-text));
      pointer-events: auto;
      position: relative;
      display: flex;
      align-items: flex-start;
      gap: var(--sb-space-3);
      padding: var(--sb-space-3) var(--sb-space-1) var(--sb-space-3) var(--sb-space-4);
      background: var(--surface-elevated);
      color: var(--text-heading);
      border: 1px solid var(--border);
      /* The status rail (field 9, --rule-callout-width): 3px in the tone on
         skins that keep accent rules; a skin that seeds hairline rules
         (Evergreen V6) keeps the one hairline all round (--rule-card-color),
         and the tone rides on the glyph. */
      /* QPW7-UI-143: the rail is a straight stripe inside the rounded frame
         (::before, clipped by the frame), never a wider border that the radius
         bends into a crescent at the card's edge. */
      box-shadow: var(--elev-raised);
      /* A floating layer: the float radius (field 8), else today's card radius. */
      border-radius: var(--radius-float, var(--radius-card));
      overflow: hidden;
      font-family: var(--font-sans);
      animation: sb-toast-in var(--motion-duration-enter, 220ms) var(--motion-ease-enter, ease-out) both;
    }
    .sb-toast.toast::before {
      content: '';
      position: absolute;
      inset-block: 0;
      inset-inline-start: 0;
      inline-size: calc(max(1px, var(--rule-callout-width, 3px)) - 1px);
      background: var(--rule-card-color, var(--toast-tone));
      pointer-events: none;
    }
    .sb-toast.toast-success { --toast-tone: var(--color-status-success-border); --toast-ink: var(--color-status-success-icon, var(--color-status-success-text)); }
    .sb-toast.toast-error { --toast-tone: var(--color-status-error-border); --toast-ink: var(--color-status-error-icon, var(--color-status-error-text)); }
    .sb-toast.toast-warning { --toast-tone: var(--color-status-warning-border); --toast-ink: var(--color-status-warning-icon, var(--color-status-warning-text)); }
    .sb-toast.toast-info { --toast-tone: var(--color-status-info-border); --toast-ink: var(--color-status-info-icon, var(--color-status-info-text)); }

    .sb-toast.hiding {
      animation: sb-toast-out var(--motion-duration-micro, 150ms) var(--motion-ease-standard, ease-in) forwards;
    }

    /* QPW7-UI-143: a toast that is one message (no title) centres its glyph, text and
       close on one axis, so a single line never sits above the glyph and the X. */
    .sb-toast.toast:not(:has(.toast-title)) { align-items: center; }
    .sb-toast.toast:not(:has(.toast-title)) .toast-icon { margin-block-start: 0; }
    .sb-toast.toast:not(:has(.toast-title)) .toast-close { margin-block: 0; }

    .sb-toast .toast-icon {
      display: flex;
      flex: 0 0 auto;
      inline-size: 1.25rem;
      block-size: 1.25rem;
      margin-block-start: 0.125rem;
      color: var(--toast-ink);
    }
    .sb-toast .toast-icon svg { inline-size: 100%; block-size: 100%; }

    .sb-toast .toast-content {
      flex: 1 1 auto;
      min-inline-size: 0;
      padding-block: 0.125rem;
    }

    .sb-toast .toast-title {
      margin: 0 0 var(--sb-space-1);
      font-size: var(--sb-text-sm);
      font-weight: 600;
      line-height: 1.35;
      color: inherit;
    }

    .sb-toast .toast-message {
      margin: 0;
      font-size: var(--sb-text-sm);
      line-height: 1.45;
      color: inherit;
      overflow-wrap: anywhere;
    }
    /* Under a title the message steps back from the card's own ink, never to a
       page text role: a skin that inverts its toast (Accenture's light
       snackbar) would put --text-body on the card at 1:1. Engines without
       color-mix keep the full ink. */
    .sb-toast .toast-title + .toast-message {
      color: inherit;
      color: color-mix(in srgb, currentColor 82%, transparent);
    }

    /* The action is the card's ink (readable on any card), marked as an
       action by weight and an underline in the skin's accent. */
    .sb-toast .toast-action {
      margin-block-start: var(--sb-space-2);
      padding: 0;
      background: none;
      border: 0;
      font: inherit;
      font-size: var(--sb-text-sm);
      font-weight: 600;
      color: inherit;
      text-decoration: underline;
      text-decoration-color: var(--accent);
      text-decoration-thickness: 1px;
      text-underline-offset: 0.2em;
      cursor: pointer;
      transition: text-decoration-thickness var(--sb-transition-micro);
    }
    @media (hover: hover) {
      .sb-toast .toast-action:hover { text-decoration-thickness: 2px; }
    }

    /* The close is the shared .sb-icon-btn (44px hit area, touch floor);
       its ink follows the card so a light snackbar keeps a visible glyph. */
    .sb-toast .toast-close {
      margin-block: calc(var(--sb-space-2) * -1);
      color: inherit;
      opacity: 0.72;
      transition:
        opacity var(--sb-transition-micro),
        background-color var(--sb-transition-micro);
    }
    .sb-toast .toast-close:hover:not(:disabled) {
      color: inherit;
      opacity: 1;
      background: color-mix(in srgb, currentColor 8%, transparent);
    }

    /* The remaining time; pauses with the timer (.is-held: hover, keyboard
       focus, a hidden page). Working-signal icon ink, so the 2px bar still
       reads on a light card. */
    .sb-toast .toast-timer {
      position: absolute;
      inset-inline: 0;
      inset-block-end: 0;
      block-size: 2px;
      background: var(--signal-working-icon, var(--signal-working));
      transform-origin: left center;
      animation: sb-toast-timer var(--toast-duration, 5s) linear forwards;
    }
    .sb-toast.is-held .toast-timer,
    .sb-toast:hover .toast-timer,
    .sb-toast:focus-within .toast-timer {
      animation-play-state: paused;
    }

    @keyframes sb-toast-in {
      from { opacity: 0; transform: translateY(0.5rem); }
    }
    @keyframes sb-toast-out {
      to { opacity: 0; transform: translateY(0.25rem); }
    }
    @keyframes sb-toast-timer {
      from { transform: scaleX(1); }
      to { transform: scaleX(0); }
    }

    @media (max-width: 767px) {
      .sb-toast-region {
        /* Above the home indicator, or above a bottom-docked composer
           (--toast-dock-offset, measured by the toast script) if taller. */
        inset-block-end: calc(var(--sb-space-4) + max(env(safe-area-inset-bottom, 0px), var(--toast-dock-offset, 0px)));
        inset-inline-start: calc(var(--sb-space-4) + env(safe-area-inset-left, 0px));
        inset-inline-end: calc(var(--sb-space-4) + env(safe-area-inset-right, 0px));
        inline-size: auto;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .sb-toast .toast-timer { display: none; }
    }

    @media (forced-colors: active) {
      .sb-toast.toast { border: 1px solid CanvasText; border-inline-start-width: 3px; }
      .sb-toast.toast::before { display: none; }
    }

    /* ===== Feedback banner (renderFeedbackBanner) ===== */
    .sb-feedback-banner {
      --banner-tone: var(--color-status-info-border);
      --banner-ink: var(--color-status-info-icon, var(--color-status-info-text));
      display: flex;
      align-items: flex-start;
      gap: var(--sb-space-3);
      margin-block: var(--sb-space-3);
      padding: var(--sb-space-3) var(--sb-space-4);
      background: var(--color-status-info-bg);
      color: var(--color-status-info-text);
      border: 1px solid var(--banner-tone);
      /* The status rail (field 9): 3px on skins that keep accent rules, the
         tone hairline alone where a skin seeds hairline rules. */
      border-inline-start-width: max(1px, var(--rule-callout-width, 3px));
      border-radius: var(--radius-card);
      font-family: var(--font-sans);
    }
    .sb-feedback-banner--success {
      --banner-tone: var(--color-status-success-border);
      --banner-ink: var(--color-status-success-icon, var(--color-status-success-text));
      background: var(--color-status-success-bg);
      color: var(--color-status-success-text);
    }
    .sb-feedback-banner--error {
      --banner-tone: var(--color-status-error-border);
      --banner-ink: var(--color-status-error-icon, var(--color-status-error-text));
      background: var(--color-status-error-bg);
      color: var(--color-status-error-text);
    }
    .sb-feedback-banner--warning {
      --banner-tone: var(--color-status-warning-border);
      --banner-ink: var(--color-status-warning-icon, var(--color-status-warning-text));
      background: var(--color-status-warning-bg);
      color: var(--color-status-warning-text);
    }
    /* The rail is the status border colour; the icon is the status icon ink,
       3:1 on the tinted band on every skin (the border colours are not:
       Evergreen warning is 1.9:1 on its band), falling back to the band's
       text colour, which also clears it. */
    .sb-feedback-banner__icon {
      display: flex;
      flex: 0 0 auto;
      margin-block-start: 0.1rem;
      color: var(--banner-ink);
    }
    .sb-feedback-banner .sb-feedback-banner__message {
      margin: 0;
      font-size: var(--sb-text-sm);
      line-height: 1.5;
      color: inherit;
      overflow-wrap: anywhere;
    }
    .sb-feedback-banner__title { font-weight: 600; }

    @media (forced-colors: active) {
      .sb-feedback-banner { border-color: CanvasText; }
    }


    /* Status document (Evergreen V6, 01-SPEC §7.6) */
    .sb-status-page {
      /* The stage is the column's container (the column itself hugs its content). */
      container-type: inline-size;
      display: flex;
      flex-direction: column;
      align-items: center;
      min-block-size: calc(100dvh - var(--sb-appbar-h, 56px));
      padding: 0 var(--sb-stage-pad-x, 24px);
      background-color: var(--surface-page);
      background-image: var(--stage-texture, none);
      background-size: var(--stage-texture-size, auto);
      background-repeat: var(--stage-texture-repeat, repeat);
      color: var(--text-body);
      font-family: var(--font-sans);
      --sb-status-top: clamp(40px, 8vh, 144px);
      --sb-status-above: 3;
      --sb-status-below: 5;
    }

    /* Optical centre: the free height splits 3 : 5 above and below the
       column, so a short document's centre lands at ~42% of the stage, never
       closer to the bar than the top offset; a document taller than the stage
       starts at the offset and scrolls. */
    .sb-status-page::before,
    .sb-status-page::after {
      content: '';
      flex: var(--sb-status-above) 1 0;
      min-block-size: var(--sb-status-top);
    }

    .sb-status-page::after {
      flex-grow: var(--sb-status-below);
      min-block-size: var(--sb-space-8, 32px);
    }

    /* The column hugs its content up to the measure, so a short document's
       mass sits on the stage's centre line; text stays left-aligned inside. */
    .sb-status-doc {
      flex: none;
      inline-size: fit-content;
      max-inline-size: min(100%, var(--sb-status-measure, 35rem));
      min-inline-size: min(100%, 20rem);
    }

    .sb-status-bar .sb-appbar-end { font-size: var(--sb-text-base); }

    .sb-status-eyebrow {
      display: block;
      margin: 0 0 var(--sb-space-2, 8px);
    }

    .sb-status-doc .sb-status-title {
      margin: 0;
      font-family: var(--font-heading);
      font-size: var(--page-title-size, var(--sb-text-2xl));
      font-weight: var(--page-title-weight, var(--sb-weight-heading, 400));
      line-height: var(--page-title-leading, var(--sb-leading-tight, 1.2));
      letter-spacing: var(--page-title-tracking, var(--sb-tracking-tight, 0));
      color: var(--text-heading);
      text-wrap: balance;
      overflow-wrap: anywhere;
    }

    .sb-status-lede {
      margin: var(--sb-space-3, 12px) 0 0;
      font-size: var(--page-lede-size, var(--sb-text-base));
      line-height: 1.55;
      color: var(--page-lede-ink, var(--text-muted));
      /* The lede fills the column's measure; no line ends on a lone word. */
      text-wrap: pretty;
      overflow-wrap: anywhere;
    }

    /* A one-sentence lede balances its two lines (no "is saved." widow on a phone). */
    .sb-status-lede--short { text-wrap: balance; }

    /* Sentence-set ledes (renderLedeSentences): each sentence starts its own
       line when the next will not fit beside it. */
    .sb-status-sentence { display: inline-block; }

    /* A phone column is narrow: it takes the full width between the gutters,
       and sentences run on as plain text. */
    @container (max-width: 29.99rem) {
      .sb-status-doc { inline-size: 100%; }
      .sb-status-lede { text-wrap: pretty; }
      .sb-status-lede.sb-status-lede--short { text-wrap: balance; }
      .sb-status-sentence { display: inline; }
    }

    .sb-status-copy {
      margin: var(--sb-space-4, 16px) 0 0;
      font-size: var(--sb-text-md);
      line-height: 1.6;
      color: var(--text-body);
      text-wrap: pretty;
      overflow-wrap: anywhere;
    }

    /* A quiet one-line instruction or fact under the lede or above the actions. */
    .sb-status-meta {
      margin: var(--sb-space-3, 12px) 0 0;
      font-size: var(--sb-text-base);
      line-height: 1.5;
      color: var(--text-muted);
      text-wrap: pretty;
    }

    .sb-status-nowrap { white-space: nowrap; }

    .sb-status-lede strong,
    .sb-status-copy strong,
    .sb-status-meta strong {
      font-weight: var(--sb-weight-label, 600);
      color: var(--text-heading);
    }

    .sb-status-doc .sb-code {
      font-size: var(--sb-text-base);
      color: var(--text-heading);
      overflow-wrap: anywhere;
    }
    /* A masked address: the masking characters recede so the visible letters lead. */
    .sb-code .sb-mask { color: var(--text-faint, var(--text-muted)); }
  
    .sb-status-mark {
      display: flex;
      margin-block-end: var(--sb-space-6, 24px);
    }

    .sb-status-mark :is(.sb-icon-tile, .sb-success-check--tile) {
      flex: 0 0 var(--sb-status-tile, 44px);
      inline-size: var(--sb-status-tile, 44px);
      block-size: var(--sb-status-tile, 44px);
    }

    .sb-status-mark :is(.sb-icon-tile, .sb-success-check--tile) svg {
      inline-size: var(--sb-status-glyph, 28px);
      block-size: var(--sb-status-glyph, 28px);
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    /* The open check spans less of its box than the lock or the clock: one
       step larger carries the same optical weight. */
    .sb-status-mark .sb-success-check--tile svg {
      inline-size: calc(var(--sb-status-glyph, 28px) + 4px);
      block-size: calc(var(--sb-status-glyph, 28px) + 4px);
    }

    /* Paid, verified: the check draws itself in once (a stroke fade, no scale
       or bounce: the base mark's pop is for inline confirmations). */
    .sb-status-mark .sb-success-check--tile { animation: none; }

    @media (prefers-reduced-motion: no-preference) {
      .sb-status-mark .sb-success-check--tile path {
        stroke-dasharray: 24;
        stroke-dashoffset: 24;
        animation: sb-check-draw var(--motion-duration-move) var(--motion-ease-standard) forwards;
      }
    }

    /* The loader in the tile slot: a 20px ring whose track is the tile's own
       hairline and whose quarter arc is the working ink at the glyph's weight. */
    .sb-status-mark .sb-skin-loading { --loading-size: 20px; }

    .sb-status-mark .sb-skin-loading--ring {
      border-width: 2px;
      border-color: var(--accent-select-line, var(--border));
      border-top-color: var(--loading-ink);
    }

    /* Reduced motion: a still three-quarter arc says "working" without moving. */
    @media (prefers-reduced-motion: reduce) {
      .sb-status-mark .sb-skin-loading--ring {
        animation: none;
        border-right-color: var(--loading-ink);
        border-bottom-color: var(--loading-ink);
      }
    }
  
    /* The one group between the lede and the actions: facts, a form, a note. */
    .sb-status-section { margin-block-start: var(--sb-space-8, 32px); }
    .sb-status-section > * + * { margin-block-start: var(--sb-space-4, 16px); }

    .sb-status-doc .sb-note { font-size: var(--sb-text-base); line-height: 1.5; }

    /* A confirmation ("We sent a new verification link.") is the lightest
       surface in the column: compact, deep success ink, a 16px outlined check. */
    .sb-status-doc .sb-note--success {
      align-items: center;
      padding: var(--sb-space-3, 12px) var(--sb-space-4, 16px);
      background: var(--color-success-tint, var(--color-success-bg));
      color: var(--color-success-text, var(--text-body));
    }

    .sb-status-doc .sb-note--success .sb-note-icon {
      flex-basis: 16px;
      inline-size: 16px;
      block-size: 16px;
      margin-block-start: 0;
    }
    .sb-status-doc .sb-note-body { min-inline-size: 0; overflow-wrap: anywhere; }

    /* Facts stay two columns in the 35rem column (the vocabulary stacks a kv
       below 40rem, which suits an aside, not a receipt). */
    @container (min-width: 26rem) {
      .sb-status-doc .sb-kv { grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); }
      .sb-status-doc .sb-kv > dt {
        padding-block-end: var(--sb-space-3, 12px);
        border-block-end: 1px solid var(--border);
      }
    }

    /* Stacked facts (phones): the value sits close under its label. */
    @container (max-width: 25.99rem) {
      .sb-status-doc .sb-kv > dt { padding-block-start: var(--sb-space-3, 12px); font-size: var(--sb-text-sm); }
      .sb-status-doc .sb-kv > dd { padding-block: 2px var(--sb-space-3, 12px); }

      /* A short group of short values (a receipt) keeps label and value on
         one line: narrower labels, the value wraps in its own column. */
      .sb-status-doc .sb-kv.sb-status-kv--inline { grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr); }
      .sb-status-doc .sb-kv.sb-status-kv--inline > :is(dt, dd) { padding-block: var(--sb-space-3, 12px); border-block-end: 1px solid var(--border); }
      .sb-status-doc .sb-kv.sb-status-kv--inline > dt { padding-inline-end: var(--sb-space-3, 12px); }
    }

    .sb-status-kv-sub,
    .sb-status-kv-help {
      display: block;
      font-size: var(--sb-text-sm);
      line-height: 1.5;
      color: var(--text-muted);
      text-wrap: pretty;
      overflow-wrap: anywhere;
    }

    .sb-status-kv-sub { margin-block-start: 2px; }
    .sb-status-doc .sb-status-kv-sub.sb-code { font-size: var(--sb-text-sm); color: var(--text-muted); }

    /* An identifier in running copy or the foot reads at the copy's own size. */
    .sb-status-doc :is(.sb-status-foot, .sb-status-copy) .sb-code { font-size: inherit; }
    .sb-status-kv-help { margin-block-start: var(--sb-space-2, 8px); }

    .sb-status-form {
      display: flex;
      flex-direction: column;
      gap: var(--sb-space-5, 20px);
    }

    .sb-status-form .form-group { margin-block-end: 0; }

    /* Inside a form the gap spaces the parts; after a field or a notice the
       actions keep the 32px step (gap + 12px), with nothing above them none. */
    .sb-status-form > * + * { margin-block-start: 0; }
    .sb-status-form > .sb-status-actions { margin-block-start: 0; }
    .sb-status-form > :not(input[type="hidden"]) ~ .sb-status-actions { margin-block-start: var(--sb-space-3, 12px); }
  
    .sb-status-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--sb-space-3, 12px) var(--sb-space-6, 24px);
      margin-block-start: var(--sb-space-8, 32px);
    }

    .sb-status-actions > .btn { text-decoration: none; }

    /* The button's own gap spaces a drawn arrow; the glyph's inline margin
       (for text links) would double it. */
    .sb-status-doc .btn .sb-btn-arrow { margin-inline-start: 0; }

    /* A text-link action (the secondary route); a <button> one resets to a
       link. One step under the button's label, so the two greens do not
       compete. */
    .sb-status-link {
      display: inline-flex;
      align-items: center;
      gap: var(--sb-space-2, 8px);
      min-block-size: var(--control-height-md, 40px);
      padding: 0;
      border: 0;
      background: none;
      font: inherit;
      font-size: var(--sb-text-base);
      font-weight: var(--sb-weight-label, 600);
      color: var(--accent-text);
      text-decoration: none;
      cursor: pointer;
    }

    .sb-status-link .sb-btn-arrow { margin-inline-start: 0; }

    /* A muted lead-in that carries its text link ("Already have an account? Sign in"). */
    .sb-status-link-lead {
      display: inline-flex;
      flex-wrap: wrap;
      align-items: center;
      column-gap: var(--sb-space-2, 8px);
      margin: 0;
      font-size: var(--sb-text-base);
      color: var(--text-muted);
    }

    .sb-status-link--danger { color: var(--danger-text, var(--color-error-text)); }

    .sb-status-foot {
      margin: var(--sb-space-8, 32px) 0 0;
      font-size: var(--sb-text-sm);
      line-height: 1.5;
      color: var(--text-muted);
      text-wrap: pretty;
      overflow-wrap: anywhere;
    }

    .sb-status-foot + .sb-status-foot { margin-block-start: var(--sb-space-2, 8px); }

    .sb-status-foot strong {
      font-weight: var(--sb-weight-label, 600);
      color: var(--text-heading);
    }

    /* A foot link is fine print that routes somewhere ("Back to sign in", "Use
       a different account"): muted ink on a quiet underline, the accent ink on
       hover. It never splits. */
    .sb-status-foot a {
      white-space: nowrap;
      color: inherit;
      font-weight: var(--sb-weight-body, 400);
      text-decoration: underline;
      text-decoration-color: var(--border-strong, var(--border));
      text-decoration-thickness: 1px;
      text-underline-offset: 3px;
    }

    /* A foot action (a button: "Withdraw request") reads as the foot's link. */
    .sb-status-foot-action {
      padding: 0;
      border: 0;
      background: none;
      font: inherit;
      color: inherit;
      text-decoration: underline;
      text-decoration-color: var(--border-strong, var(--border));
      text-decoration-thickness: 1px;
      text-underline-offset: 3px;
      cursor: pointer;
    }

    .sb-status-foot-action.sb-status-link--danger { color: var(--danger-text, var(--color-error-text)); text-decoration-color: currentColor; }

    /* A narrow column puts the foot's route on its own line, without the separator. */
    @container (max-width: 29.99rem) {
      .sb-status-foot .sb-status-sep { display: none; }
      .sb-status-foot .sb-status-sep + a { display: table; margin-block-start: var(--sb-space-1, 4px); }
    }

    @media (hover: hover) {
      .sb-status-foot a:hover {
        color: var(--accent-text);
        text-decoration-color: currentColor;
      }

      .sb-status-link:hover {
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 3px;
      }
    }

    /* Phones: the primary spans the column; a text link hangs on the column's
       left edge under it, a full-width 44px target. */
    @container (max-width: 29.99rem) {
      .sb-status-actions {
        flex-direction: column;
        align-items: stretch;
        gap: var(--sb-space-2, 8px);
      }

      .sb-status-actions > .btn { inline-size: 100%; justify-content: center; }
      .sb-status-actions > :is(.sb-status-link, .sb-status-link-lead) { align-self: stretch; justify-content: flex-start; min-block-size: 44px; }

      /* Stacked text routes sit one 44px target apart, no gap between them. */
      .sb-status-actions > .sb-status-link + .sb-status-link { margin-block-start: calc(-1 * var(--sb-space-2, 8px)); }

      /* Two text routes and no primary ("Go back", "Withdraw request") stay one row. */
      .sb-status-actions:not(:has(> .btn)) { flex-direction: row; align-items: center; gap: 0 var(--sb-space-6, 24px); }
      .sb-status-actions:not(:has(> .btn)) > .sb-status-link { align-self: auto; }

      /* The link's 44px box already carries air under the button; the foot
         keeps the 32px step from the link's text, not its box. */
      .sb-status-actions:has(> :is(.sb-status-link, .sb-status-link-lead):last-child) + .sb-status-foot { margin-block-start: var(--sb-space-6, 24px); }
    }
  
    @media (min-width: 1280px) {
      /* The step also reads the height, so the richest document (a payment
         receipt) still fits a 1440x800 screen. */
      .sb-status-doc .sb-status-title {
        font-size: clamp(var(--sb-text-4xl), min(1.75rem + 1.25vw, 5.5vh), var(--sb-text-display, var(--sb-text-4xl)));
        line-height: var(--page-display-leading, 1.08);
        letter-spacing: var(--sb-tracking-display, var(--page-title-tracking, 0));
      }

      .sb-status-lede {
        font-size: clamp(var(--page-lede-size, var(--sb-text-base)), 0.75rem + 0.4167vw, var(--page-display-lede-size, var(--sb-text-xl)));
      }

      .sb-status-page {
        --sb-status-measure: clamp(35rem, 20rem + 16.67vw, 40rem);
        --sb-status-tile: clamp(44px, 20px + 1.667vw, 52px);
        --sb-status-glyph: clamp(28px, 16px + 0.833vw, 32px);
      }

    }

    /* A tall desktop screen gives the display step its air. */
    @media (min-width: 1280px) and (min-height: 900px) {
      .sb-status-mark { margin-block-end: var(--sb-space-8, 32px); }
      .sb-status-lede { margin-block-start: var(--sb-space-4, 16px); }
    }

    @media (max-width: 639px) {
      .sb-status-page {
        --sb-status-top: var(--sb-space-10, 40px);
        --sb-status-above: 1;
        --sb-status-below: 3;
      }
    }
  
    .page-error .page-error-title { color: var(--text-heading); }
    .page-error .page-error-message { color: var(--page-lede-ink, var(--text-muted)); }

    .page-error-details {
      inline-size: 100%;
      margin: var(--sb-space-6, 24px) 0 0;
      padding: var(--sb-space-3, 12px) var(--sb-space-4, 16px);
      overflow-x: auto;
      text-align: start;
      font-family: var(--font-mono);
      font-size: var(--sb-text-xs);
      color: var(--text-body);
      background: var(--surface-inner);
      border: 1px solid var(--border);
      border-radius: var(--radius-card);
    }

    .page-error-id {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--sb-space-2, 8px);
      margin: var(--sb-space-6, 24px) 0 0;
    }

    .page-error-id__code {
      padding: var(--sb-space-1, 4px) var(--sb-space-3, 12px);
      font-family: var(--font-mono);
      font-size: var(--sb-text-xs);
      color: var(--text-body);
      background: var(--surface-inner);
      border: 1px solid var(--border);
      border-radius: var(--radius-select, var(--radius-control));
      user-select: all;
    }

    .page-error-id__copy svg { inline-size: 14px; block-size: 14px; }