/* ═══ TOKENS ═══ */
:root {
  --component-clareye-margin-top: 52px;

  /* ---------- consolidate_shadows.py: send-glow merge + individual mints ---------- */
  --component-send-glow: 0 6px 16px rgba(128,43,78,.34);
  --component-axcomp-shadow: 0 10px 26px rgba(128,43,78,.26);
  --component-fab-shadow: 0 10px 24px rgba(128,43,78,.36), 0 2px 6px rgba(128,43,78,.24);
  --component-vlabel-pulse-shadow: 0 0 0 0 rgba(128,43,78,.5);

  /* ---------- mint_paint.py: paint & constant mints ---------- */
  --app-shell-radius: 34px;
  --app-shell-shadow: 0 34px 70px -26px rgba(0,0,0,.62);
  --app-radius-comp: 30px;
  --component-done-padding-top: 220px;
  --component-acct-id-padding-right: 132px;
  --component-atmenu-shadow: 0 16px 38px rgba(3,46,66,.18), 0 2px 6px rgba(3,46,66,.08);
  --component-menu-shadow: 0 14px 34px rgba(3,46,66,.16), 0 2px 6px rgba(3,46,66,.08);
  --component-sheet-shadow: 0 -12px 40px -12px rgba(3,46,66,.4);
  --component-ioscancel-shadow: 0 -6px 30px -10px rgba(3,46,66,.35);
  --component-evitem-shadow: 0 1px 2px rgba(3,46,66,.04);
  --component-kbkey-shadow: 0 1px 0 rgba(0,0,0,.28);
  --component-switch-shadow: 0 1px 3px rgba(3,46,66,.3);
  --component-acctdoor-shadow: 0 1px 3px rgba(3,46,66,.14);
  --component-switchknob-shadow: 0 1px 3px rgba(3,46,66,.28);
  --component-lock-gradient: linear-gradient(168deg,#03181F 0%,#06333A 46%,#0A4A46 100%);
  --component-attach-thumb-gradient: linear-gradient(135deg,#0A494B,#0A7A7C);
  --component-hpill-background: rgba(3,46,66,.30);
  --component-placeholder-text: #8A9899;
  --component-greet-padding-top: 36px;

  --primitive-color-brand-primary-50: #E0FCFC;
  --primitive-color-brand-primary-100: #D1F4F4;
  --primitive-color-brand-primary-200: #BAE7E8;
  --primitive-color-brand-primary-300: #9ED8D9;
  --primitive-color-brand-primary-400: #78C4C5;
  --primitive-color-brand-primary-500: #009598;
  --primitive-color-brand-primary-600: #007072;
  --primitive-color-brand-primary-700: #004C4E;
  --primitive-color-brand-primary-800: #003233;
  --primitive-color-brand-primary-900: #001D1E;
  --primitive-color-brand-gold-ink: #866200;
  --primitive-color-brand-gold-subtle: #F7F2E9;
  --primitive-color-brand-primary-25: #E9F6F6;
  --primitive-color-brand-navy-50: #EFF7F9;
  --primitive-color-brand-navy-100: #E5EEF0;
  --primitive-color-brand-navy-200: #D1E0E4;
  --primitive-color-brand-navy-300: #BBD0D6;
  --primitive-color-brand-navy-400: #A1BAC3;
  --primitive-color-brand-navy-500: #6B8894;
  --primitive-color-brand-navy-600: #476775;
  --primitive-color-brand-navy-700: #234758;
  --primitive-color-brand-navy-800: #032E42;
  --primitive-color-brand-navy-900: #021B28;
  --primitive-color-brand-navy-950: #020D14;
  --primitive-color-brand-primary-950: #000E0F;
  --primitive-color-brand-secondary-50: #FFF3E5;
  --primitive-color-brand-secondary-100: #FFEED9;
  --primitive-color-brand-secondary-200: #FFE6C8;
  --primitive-color-brand-secondary-300: #FFDCB2;
  --primitive-color-brand-secondary-400: #FFCF92;
  --primitive-color-brand-secondary-500: #FBB044;
  --primitive-color-brand-secondary-600: #BF7E11;
  --primitive-color-brand-secondary-700: #815300;
  --primitive-color-brand-secondary-800: #513300;
  --primitive-color-brand-secondary-900: #2D1A00;
  --primitive-color-brand-secondary-950: #140800;
  --primitive-color-brand-accent-50: #EBF7FF;
  --primitive-color-brand-accent-100: #D9F0FF;
  --primitive-color-brand-accent-200: #BEE6FF;
  --primitive-color-brand-accent-300: #99D8FF;
  --primitive-color-brand-accent-400: #76C4F3;
  --primitive-color-brand-accent-500: #1A97D1;
  --primitive-color-brand-accent-600: #00719F;
  --primitive-color-brand-accent-700: #004C6E;
  --primitive-color-brand-accent-800: #003149;
  --primitive-color-brand-accent-900: #001C2C;
  --primitive-color-brand-accent-950: #000D17;
  --primitive-color-neutral-gray-50: #F2F6F7;
  --primitive-color-neutral-gray-100: #E4E9EA;
  --primitive-color-neutral-gray-200: #D1D5D6;
  --primitive-color-neutral-gray-300: #B1B5B6;
  --primitive-color-neutral-gray-400: #8C9091;
  --primitive-color-neutral-gray-500: #6E7273;
  --primitive-color-neutral-gray-600: #525657;
  --primitive-color-neutral-gray-700: #3D4042;
  --primitive-color-neutral-gray-800: #242728;
  --primitive-color-neutral-gray-900: #0F1213;
  --primitive-color-neutral-gray-950: #040607;
  --primitive-color-neutral-gray-white: #FFFFFF;
  --primitive-color-neutral-gray-black: #000000;
  --primitive-color-feedback-warning-50: #FFF5D6;
  --primitive-color-feedback-warning-100: #FFF1C7;
  --primitive-color-feedback-warning-200: #FFECB1;
  --primitive-color-feedback-warning-300: #FFE493;
  --primitive-color-feedback-warning-400: #FFDA64;
  --primitive-color-feedback-warning-500: #F2C511;
  --primitive-color-feedback-warning-600: #B29000;
  --primitive-color-feedback-warning-700: #765F00;
  --primitive-color-feedback-warning-800: #4A3A00;
  --primitive-color-feedback-warning-900: #281E00;
  --primitive-color-feedback-warning-950: #100A00;
  --primitive-color-feedback-error-50: #FFF1F0;
  --primitive-color-feedback-error-100: #FFE3E0;
  --primitive-color-feedback-error-200: #FFCDC8;
  --primitive-color-feedback-error-300: #FFB0A9;
  --primitive-color-feedback-error-400: #FF867E;
  --primitive-color-feedback-error-500: #DF1529;
  --primitive-color-feedback-error-600: #AC0019;
  --primitive-color-feedback-error-700: #79000E;
  --primitive-color-feedback-error-800: #530007;
  --primitive-color-feedback-error-900: #340003;
  --primitive-color-feedback-error-950: #1E0102;
  --primitive-color-feedback-success-50: #EDF9F4;
  --primitive-color-feedback-success-100: #E7F5F0;
  --primitive-color-feedback-success-200: #C7E5DA;
  --primitive-color-feedback-success-300: #ABD7C5;
  --primitive-color-feedback-success-400: #88C4AB;
  --primitive-color-feedback-success-500: #499474;
  --primitive-color-feedback-success-600: #0F7A54;
  --primitive-color-feedback-success-700: #005032;
  --primitive-color-feedback-success-800: #00361E;
  --primitive-color-feedback-success-900: #00200F;
  --primitive-color-feedback-success-950: #001105;
  --primitive-color-feedback-info-50: #EFF6FF;
  --primitive-color-feedback-info-100: #E1EDFF;
  --primitive-color-feedback-info-200: #CCE0FF;
  --primitive-color-feedback-info-300: #B1CFFF;
  --primitive-color-feedback-info-400: #8CB8FF;
  --primitive-color-feedback-info-500: #3B82F6;
  --primitive-color-feedback-info-600: #205FC4;
  --primitive-color-feedback-info-700: #0E3F8C;
  --primitive-color-feedback-info-800: #06285F;
  --primitive-color-feedback-info-900: #03163A;
  --primitive-color-feedback-info-950: #020A1F;
  --primitive-typography-family-display: Newsreader;
  --primitive-typography-family-heading: 'Atkinson Hyperlegible Next';
  --primitive-typography-family-body: 'Atkinson Hyperlegible Next';
  --primitive-typography-family-mono: 'DM Mono';
  --primitive-typography-size-xs: clamp(0.691375rem, 0.6519rem + 0.1975vw, 0.888875rem);
  --primitive-typography-size-sm: clamp(0.77775rem, 0.7333rem + 0.2222vw, 1rem);
  --primitive-typography-size-base: clamp(0.875rem, 0.8250rem + 0.2500vw, 1.125rem);
  --primitive-typography-size-lg: clamp(0.984375rem, 0.9281rem + 0.2813vw, 1.265625rem);
  --primitive-typography-size-xl: clamp(1.1074375rem, 1.0442rem + 0.3164vw, 1.4238125rem);
  --primitive-typography-size-2xl: clamp(1.245875rem, 1.1747rem + 0.3559vw, 1.6018125rem);
  --primitive-typography-size-3xl: clamp(1.4015625rem, 1.3215rem + 0.4005vw, 1.8020625rem);
  --primitive-typography-size-4xl: clamp(1.57675rem, 1.4866rem + 0.4506vw, 2.0273125rem);
  --primitive-typography-size-5xl: clamp(1.773875rem, 1.6725rem + 0.5068vw, 2.2806875rem);
  --primitive-typography-size-6xl: clamp(1.995625rem, 1.8816rem + 0.5702vw, 2.5658125rem);
  --primitive-typography-size-7xl: clamp(2.2450625rem, 2.1168rem + 0.6414vw, 2.8865rem);
  --primitive-typography-size-8xl: clamp(2.5256875rem, 2.3814rem + 0.7216vw, 3.2473125rem);
  --primitive-typography-size-9xl: clamp(2.841375rem, 2.6790rem + 0.8119vw, 3.65325rem);
  --primitive-typography-weight-thin: 100;
  --primitive-typography-weight-extralight: 200;
  --primitive-typography-weight-light: 300;
  --primitive-typography-weight-normal: 400;
  --primitive-typography-weight-medium: 500;
  --primitive-typography-weight-semibold: 600;
  --primitive-typography-weight-bold: 700;
  --primitive-typography-weight-extrabold: 800;
  --primitive-typography-weight-black: 900;
  --primitive-typography-line-height-none: 1;
  --primitive-typography-line-height-tight: 1.25;
  --primitive-typography-line-height-snug: 1.375;
  --primitive-typography-line-height-normal: 1.5;
  --primitive-typography-line-height-relaxed: 1.625;
  --primitive-typography-line-height-loose: 2;
  --primitive-typography-letter-spacing-tighter: -0.05em;
  --primitive-typography-letter-spacing-tight: -0.025em;
  --primitive-typography-letter-spacing-normal: 0em;
  --primitive-typography-letter-spacing-wide: 0.025em;
  --primitive-typography-letter-spacing-wider: 0.05em;
  --primitive-typography-letter-spacing-widest: 0.1em;
  --primitive-typography-text-transform-none: none;
  --primitive-typography-text-transform-uppercase: uppercase;
  --primitive-typography-text-transform-lowercase: lowercase;
  --primitive-typography-text-transform-capitalize: capitalize;
  --primitive-typography-defaults-display-weight: 400;
  --primitive-typography-defaults-display-line-height: var(--primitive-typography-line-height-tight);
  --primitive-typography-defaults-display-letter-spacing: var(--primitive-typography-letter-spacing-normal);
  --primitive-typography-defaults-display-text-transform: var(--primitive-typography-text-transform-none);
  --primitive-typography-defaults-heading-weight: 600;
  --primitive-typography-defaults-heading-line-height: var(--primitive-typography-line-height-tight);
  --primitive-typography-defaults-heading-letter-spacing: var(--primitive-typography-letter-spacing-normal);
  --primitive-typography-defaults-heading-text-transform: var(--primitive-typography-text-transform-none);
  --primitive-typography-defaults-body-weight: 400;
  --primitive-typography-defaults-body-line-height: var(--primitive-typography-line-height-snug);
  --primitive-typography-defaults-body-letter-spacing: var(--primitive-typography-letter-spacing-normal);
  --primitive-typography-defaults-body-text-transform: var(--primitive-typography-text-transform-none);
  --primitive-typography-defaults-mono-weight: 400;
  --primitive-typography-defaults-mono-line-height: var(--primitive-typography-line-height-snug);
  --primitive-typography-defaults-mono-letter-spacing: var(--primitive-typography-letter-spacing-normal);
  --primitive-typography-defaults-mono-text-transform: var(--primitive-typography-text-transform-none);
  --primitive-typography-config-fluid-enabled: true;
  --primitive-typography-config-base-size: 16;
  --primitive-typography-config-min-base-size: 14;
  --primitive-typography-config-max-base-size: 18;
  --primitive-typography-config-ratio: Major Second;
  --primitive-typography-config-min-viewport: 320;
  --primitive-typography-config-max-viewport: 1920;
  --primitive-typography-customfonts-0-name: Atkinson Hyperlegible Next;
  --primitive-typography-customfonts-0-fontfamily: Atkinson Hyperlegible Next;
  --primitive-typography-customfonts-0-category: sans-serif;
  --primitive-typography-customfonts-0-source: google;
  --primitive-spacing-zero: 0rem;
  --primitive-spacing-xs: 0.125rem;
  --primitive-spacing-sm: 0.25rem;
  --primitive-spacing-md: 0.5rem;
  --primitive-spacing-lg: 0.75rem;
  --primitive-spacing-xl: 1rem;
  --primitive-spacing-2xl: 1.5rem;
  --primitive-spacing-3xl: 2rem;
  --primitive-spacing-4xl: 3rem;
  --primitive-spacing-5xl: 4rem;
  --primitive-spacing-6xl: 5.5rem;
  --primitive-radius-zero: 0rem;
  --primitive-radius-xs: 0.25rem;
  --primitive-radius-sm: 0.5rem;
  --primitive-radius-md: 0.75rem;
  --primitive-radius-lg: 1rem;
  --primitive-radius-xl: 1.125rem;
  --primitive-radius-2xl: 1.25rem;
  --primitive-radius-full: 62.5rem;
  --primitive-radius-2xs: 0.125rem;
      /* The 2px step. The radius ramp went 0 straight to 4, and eleven declarations were sitting in the gap at 1.5, 2 and 3px. */
  --primitive-radius-circle: 50%;
      /* A circle, not a large pill: 50% tracks the box and stays elliptical when the box is not square, which is what fifteen avatars and dots want. */

  --primitive-border-width-none: 0px;
  --primitive-border-width-thin: 1px;
  --primitive-border-width-regular: 1.5px;
  --primitive-border-width-medium: 2px;
  --primitive-border-width-bold: 3px;
  --primitive-border-width-heavy: 4px;
  --primitive-breakpoint-xs: 320px;
  --primitive-breakpoint-sm: 640px;
  --primitive-breakpoint-md: 768px;
  --primitive-breakpoint-lg: 1024px;
  --primitive-breakpoint-xl: 1280px;
  --primitive-breakpoint-2xl: 1536px;
  --primitive-layout-xs: 640px;
  --primitive-layout-sm: 768px;
  --primitive-layout-md: 1024px;
  --primitive-layout-lg: 1280px;
  --primitive-layout-xl: 1536px;
  --primitive-layout-cols: 12;
  --primitive-layout-gutter: 16px;
  --primitive-shadow-elevation-1: 0 1px 2px rgba(4,58,70,.10), 0 2px 6px rgba(8,120,130,.12);
  --primitive-shadow-elevation-2: 0 2px 4px rgba(4,58,70,.12), 0 6px 14px rgba(8,120,130,.14);
  --primitive-shadow-elevation-3: 0 6px 14px rgba(4,58,70,.14), 0 14px 32px rgba(8,120,130,.16);
  --primitive-shadow-elevation-4: 0 10px 22px rgba(4,58,70,.16), 0 22px 48px rgba(8,120,130,.18);
  --primitive-shadow-elevation-5: 0 4px 11px rgba(128,43,78,.36), 0 9px 23px rgba(0,149,152,.16);
  --primitive-shadow-elevation-6: 0 8px 24px rgba(128,43,78,.38), 0 20px 50px rgba(0,149,152,.17);
  --primitive-opacity-alpha-0: 0;
  --primitive-opacity-alpha-5: 0.05;
  --primitive-opacity-alpha-10: 0.1;
  --primitive-opacity-alpha-20: 0.2;
  --primitive-opacity-alpha-25: 0.25;
  --primitive-opacity-alpha-30: 0.3;
  --primitive-opacity-alpha-40: 0.4;
  --primitive-opacity-alpha-50: 0.5;
  --primitive-opacity-alpha-60: 0.6;
  --primitive-opacity-alpha-70: 0.7;
  --primitive-opacity-alpha-75: 0.75;
  --primitive-opacity-alpha-80: 0.8;
  --primitive-opacity-alpha-90: 0.9;
  --primitive-opacity-alpha-95: 0.95;
  --primitive-opacity-alpha-100: 1;
  --primitive-z-index-layer-10: 10;
  --primitive-z-index-layer-20: 20;
  --primitive-z-index-layer-30: 30;
  --primitive-z-index-layer-40: 40;
  --primitive-z-index-layer-50: 50;
  --primitive-z-index-layer-60: 60;
  --primitive-z-index-layer-70: 70;
  --primitive-z-index-layer-max: 9999;
  --primitive-z-index-layer-base: 0;
  --primitive-duration-instant: 0ms;
  --primitive-duration-fast: 150ms;
  --primitive-duration-base: 300ms;
  --primitive-duration-moderate: 500ms;
  --primitive-duration-slow: 700ms;
  --primitive-duration-slower: 1000ms;
  --primitive-easing-linear: linear;
  --primitive-easing-ease: ease;
  --primitive-easing-ease-in: ease-in;
  --primitive-easing-ease-out: ease-out;
  --primitive-easing-ease-in-out: ease-in-out;
  --primitive-easing-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
  --primitive-easing-decelerate: cubic-bezier(0.0, 0.0, 0.2, 1);
  --primitive-easing-accelerate: cubic-bezier(0.4, 0.0, 1, 1);
  --primitive-easing-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --primitive-icon-size-xs: 12px;
  --primitive-icon-size-sm: 16px;
  --primitive-icon-size-md: 20px;
  --primitive-icon-size-lg: 24px;
  --primitive-icon-size-xl: 32px;
  --primitive-icon-size-2xl: 40px;
  --primitive-icon-size-3xl: 48px;
  --primitive-icon-size-4xl: 64px;
  --primitive-icon-stroke-thin: 1px;
  --primitive-icon-stroke-regular: 1.5px;
  --primitive-icon-stroke-medium: 2px;
  --primitive-icon-stroke-bold: 2.5px;
  --primitive-icon-stroke-heavy: 3px;
  --semantic-color-text-neutral-subtle: var(--primitive-color-neutral-gray-500);
  --semantic-color-text-neutral-default: var(--primitive-color-neutral-gray-800);
  --semantic-color-text-neutral-bold: var(--primitive-color-brand-primary-950);
  --semantic-color-text-neutral-contrast: var(--primitive-color-neutral-gray-white);
  --semantic-color-text-primary-subtle: var(--primitive-color-brand-primary-400);
  --semantic-color-text-primary-default: var(--primitive-color-brand-primary-600);
  --semantic-color-text-primary-bold: var(--primitive-color-brand-primary-800);
  --semantic-color-text-primary-contrast: var(--primitive-color-neutral-gray-50);
  --semantic-color-text-secondary-subtle: var(--primitive-color-brand-secondary-800);
  --semantic-color-text-secondary-default: var(--primitive-color-brand-secondary-900);
  --semantic-color-text-secondary-bold: var(--primitive-color-brand-secondary-950);
  --semantic-color-text-secondary-contrast: var(--primitive-color-brand-secondary-50);
  --semantic-color-text-accent-subtle: var(--primitive-color-brand-accent-600);
  --semantic-color-text-accent-default: var(--primitive-color-brand-accent-600);
  --semantic-color-text-accent-bold: var(--primitive-color-brand-accent-700);
  --semantic-color-text-accent-contrast: var(--primitive-color-brand-accent-50);
  --semantic-color-text-success-subtle: var(--primitive-color-feedback-success-400);
  --semantic-color-text-success-default: var(--primitive-color-feedback-success-600);
  --semantic-color-text-success-bold: var(--primitive-color-feedback-success-700);
  --semantic-color-text-success-contrast: var(--primitive-color-feedback-success-50);
  --semantic-color-text-warning-subtle: var(--primitive-color-feedback-warning-400);
  --semantic-color-text-warning-default: var(--primitive-color-feedback-warning-700);
  --semantic-color-text-warning-bold: var(--primitive-color-feedback-warning-800);
  --semantic-color-text-warning-contrast: var(--primitive-color-feedback-warning-50);
  --semantic-color-text-error-subtle: var(--primitive-color-feedback-error-400);
  --semantic-color-text-error-default: var(--primitive-color-feedback-error-600);
  --semantic-color-text-error-bold: var(--primitive-color-feedback-error-700);
  --semantic-color-text-error-contrast: var(--primitive-color-feedback-error-50);
  --semantic-color-text-info-subtle: var(--primitive-color-feedback-info-300);
  --semantic-color-text-info-default: var(--primitive-color-feedback-info-600);
  --semantic-color-text-info-bold: var(--primitive-color-feedback-info-800);
  --semantic-color-text-info-contrast: var(--primitive-color-feedback-info-50);
  --semantic-color-text-disabled: var(--primitive-color-neutral-gray-400);
  --semantic-color-surface-neutral-subtle: var(--primitive-color-neutral-gray-50);
  --semantic-color-surface-neutral-default: var(--primitive-color-neutral-gray-100);
  --semantic-color-surface-neutral-bold: var(--primitive-color-neutral-gray-700);
  --semantic-color-accent-primary: var(--primitive-color-brand-primary-500);
  --semantic-color-surface-primary-wash: var(--primitive-color-brand-primary-25);
  --semantic-color-text-gold-bold: var(--primitive-color-brand-gold-ink);
  --semantic-color-surface-gold-subtle: var(--primitive-color-brand-gold-subtle);
  --semantic-color-badge-settled-surface: var(--primitive-color-feedback-success-100);
  --semantic-color-badge-settled-text: var(--primitive-color-feedback-success-600);
  --semantic-color-badge-attention-surface: var(--primitive-color-feedback-error-100);
  --semantic-color-badge-attention-text: var(--primitive-color-feedback-error-600);
  --semantic-color-badge-progress-surface: var(--primitive-color-brand-navy-100);
  --semantic-color-badge-progress-text: var(--primitive-color-brand-navy-800);
  --semantic-color-surface-primary-subtle: var(--primitive-color-brand-primary-200);
  --semantic-color-surface-primary-default: var(--primitive-color-brand-primary-700);
  --semantic-color-surface-primary-bold: var(--primitive-color-brand-primary-600);
  --semantic-color-surface-secondary-subtle: var(--primitive-color-brand-secondary-50);
  --semantic-color-surface-secondary-default: var(--primitive-color-brand-secondary-500);
  --semantic-color-surface-secondary-bold: var(--primitive-color-brand-secondary-600);
  --semantic-color-surface-accent-subtle: var(--primitive-color-brand-accent-50);
  --semantic-color-surface-accent-default: var(--primitive-color-brand-accent-100);
  --semantic-color-surface-accent-bold: var(--primitive-color-brand-accent-700);
  --semantic-color-surface-success-subtle: var(--primitive-color-feedback-success-50);
  --semantic-color-surface-success-default: var(--primitive-color-feedback-success-100);
  --semantic-color-surface-success-bold: var(--primitive-color-feedback-success-600);
  --semantic-color-surface-warning-subtle: var(--primitive-color-feedback-warning-50);
  --semantic-color-surface-warning-default: var(--primitive-color-feedback-warning-100);
  --semantic-color-surface-warning-bold: var(--primitive-color-feedback-warning-600);
  --semantic-color-surface-error-subtle: var(--primitive-color-feedback-error-50);
  --semantic-color-surface-error-default: var(--primitive-color-feedback-error-500);
  --semantic-color-surface-error-bold: var(--primitive-color-feedback-error-600);
  --semantic-color-surface-info-subtle: var(--primitive-color-feedback-info-50);
  --semantic-color-surface-info-default: var(--primitive-color-feedback-info-100);
  --semantic-color-surface-info-bold: var(--primitive-color-feedback-info-600);
  --semantic-color-surface-disabled: var(--primitive-color-neutral-gray-100);
  --semantic-color-border-neutral-subtle: var(--primitive-color-neutral-gray-200);
  --semantic-color-border-neutral-default: var(--primitive-color-neutral-gray-300);
  --semantic-color-border-neutral-bold: var(--primitive-color-neutral-gray-500);
  --semantic-color-border-primary-subtle: var(--primitive-color-brand-primary-200);
  --semantic-color-border-primary-default: var(--primitive-color-brand-primary-500);
  --semantic-color-border-primary-bold: var(--primitive-color-brand-primary-700);
  --semantic-color-border-secondary-subtle: var(--primitive-color-brand-secondary-200);
  --semantic-color-border-secondary-default: var(--primitive-color-brand-secondary-500);
  --semantic-color-border-secondary-bold: var(--primitive-color-brand-secondary-700);
  --semantic-color-border-accent-subtle: var(--primitive-color-brand-accent-200);
  --semantic-color-border-accent-default: var(--primitive-color-brand-accent-500);
  --semantic-color-border-accent-bold: var(--primitive-color-brand-accent-700);
  --semantic-color-border-success-subtle: var(--primitive-color-feedback-success-200);
  --semantic-color-border-success-default: var(--primitive-color-feedback-success-500);
  --semantic-color-border-success-bold: var(--primitive-color-feedback-success-700);
  --semantic-color-border-warning-subtle: var(--primitive-color-feedback-warning-200);
  --semantic-color-border-warning-default: var(--primitive-color-feedback-warning-500);
  --semantic-color-border-warning-bold: var(--primitive-color-feedback-warning-700);
  --semantic-color-border-error-subtle: var(--primitive-color-feedback-error-200);
  --semantic-color-border-error-default: var(--primitive-color-feedback-error-500);
  --semantic-color-border-error-bold: var(--primitive-color-feedback-error-700);
  --semantic-color-border-info-subtle: var(--primitive-color-feedback-info-200);
  --semantic-color-border-info-default: var(--primitive-color-feedback-info-500);
  --semantic-color-border-info-bold: var(--primitive-color-feedback-info-700);
  --semantic-color-border-disabled: var(--primitive-color-neutral-gray-200);
  --semantic-color-contrast-light: var(--primitive-color-neutral-gray-white);
  --semantic-color-contrast-dark: var(--primitive-color-neutral-gray-black);
  --semantic-color-interactive-primary-default: var(--primitive-color-brand-primary-600);
  --semantic-color-interactive-primary-hover: var(--primitive-color-brand-primary-700);
  --semantic-color-interactive-primary-active: var(--primitive-color-brand-primary-500);
  --semantic-color-interactive-primary-disabled: var(--primitive-color-neutral-gray-200);
  --semantic-color-interactive-primary-text: var(--primitive-color-brand-primary-50);
  --semantic-color-interactive-primary-text-disabled: var(--primitive-color-neutral-gray-400);
  --semantic-color-interactive-secondary-default: var(--primitive-color-brand-secondary-500);
  --semantic-color-interactive-secondary-hover: var(--primitive-color-brand-secondary-400);
  --semantic-color-interactive-secondary-active: var(--primitive-color-brand-secondary-600);
  --semantic-color-interactive-secondary-disabled: var(--primitive-color-neutral-gray-200);
  --semantic-color-interactive-secondary-text: var(--primitive-color-neutral-gray-800);
  --semantic-color-interactive-secondary-text-disabled: var(--primitive-color-neutral-gray-400);
  --semantic-color-interactive-tertiary-default: var(--primitive-color-neutral-gray-500);
  --semantic-color-interactive-tertiary-hover: var(--primitive-color-neutral-gray-600);
  --semantic-color-interactive-tertiary-active: var(--primitive-color-neutral-gray-700);
  --semantic-color-interactive-tertiary-disabled: var(--primitive-color-neutral-gray-200);
  --semantic-color-interactive-tertiary-text: var(--primitive-color-neutral-gray-50);
  --semantic-color-interactive-tertiary-text-disabled: var(--primitive-color-neutral-gray-400);
  --semantic-color-interactive-destructive-default: var(--primitive-color-feedback-error-500);
  --semantic-color-interactive-destructive-hover: var(--primitive-color-feedback-error-600);
  --semantic-color-interactive-destructive-active: var(--primitive-color-feedback-error-700);
  --semantic-color-interactive-destructive-disabled: var(--primitive-color-neutral-gray-200);
  --semantic-color-interactive-destructive-text: var(--primitive-color-feedback-error-50);
  --semantic-color-interactive-destructive-text-disabled: var(--primitive-color-neutral-gray-400);
  --semantic-color-interactive-link-default: var(--primitive-color-brand-primary-600);
  --semantic-color-interactive-link-hover: var(--primitive-color-brand-primary-500);
  --semantic-color-interactive-link-active: var(--primitive-color-brand-primary-700);
  --semantic-color-interactive-link-disabled: var(--primitive-color-neutral-gray-400);
  --semantic-typography-display-lg-font-family: var(--primitive-typography-family-display);
  --semantic-typography-display-lg-font-size: var(--primitive-typography-size-9xl);
  --semantic-typography-display-lg-font-weight: var(--primitive-typography-weight-light);
  --semantic-typography-display-lg-line-height: var(--primitive-typography-line-height-none);
  --semantic-typography-display-lg-letter-spacing: var(--primitive-typography-letter-spacing-tight);
  --semantic-typography-display-lg-text-transform: var(--primitive-typography-text-transform-none);
  --semantic-typography-display-md-font-family: var(--primitive-typography-family-display);
  --semantic-typography-display-md-font-size: var(--primitive-typography-size-7xl);
  --semantic-typography-display-md-font-weight: var(--primitive-typography-weight-normal);
  --semantic-typography-display-md-line-height: var(--primitive-typography-line-height-none);
  --semantic-typography-display-md-letter-spacing: var(--primitive-typography-letter-spacing-tight);
  --semantic-typography-display-md-text-transform: var(--primitive-typography-text-transform-none);
  --semantic-typography-display-sm-font-family: var(--primitive-typography-family-display);
  --semantic-typography-display-sm-font-size: var(--primitive-typography-size-5xl);
  --semantic-typography-display-sm-font-weight: var(--primitive-typography-weight-semibold);
  --semantic-typography-display-sm-line-height: var(--primitive-typography-line-height-none);
  --semantic-typography-display-sm-letter-spacing: var(--primitive-typography-letter-spacing-normal);
  --semantic-typography-display-sm-text-transform: var(--primitive-typography-text-transform-none);
  --semantic-typography-heading-h1-font-family: var(--primitive-typography-family-heading);
  --semantic-typography-heading-h1-font-size: var(--primitive-typography-size-8xl);
  --semantic-typography-heading-h1-font-weight: var(--primitive-typography-weight-bold);
  --semantic-typography-heading-h1-line-height: var(--primitive-typography-line-height-tight);
  --semantic-typography-heading-h1-letter-spacing: var(--primitive-typography-letter-spacing-normal);
  --semantic-typography-heading-h1-text-transform: var(--primitive-typography-text-transform-none);
  --semantic-typography-heading-h2-font-family: var(--primitive-typography-family-heading);
  --semantic-typography-heading-h2-font-size: var(--primitive-typography-size-6xl);
  --semantic-typography-heading-h2-font-weight: var(--primitive-typography-weight-bold);
  --semantic-typography-heading-h2-line-height: var(--primitive-typography-line-height-none);
  --semantic-typography-heading-h2-letter-spacing: var(--primitive-typography-letter-spacing-normal);
  --semantic-typography-heading-h2-text-transform: var(--primitive-typography-text-transform-none);
  --semantic-typography-heading-h3-font-family: var(--primitive-typography-family-heading);
  --semantic-typography-heading-h3-font-size: var(--primitive-typography-size-4xl);
  --semantic-typography-heading-h3-font-weight: var(--primitive-typography-weight-semibold);
  --semantic-typography-heading-h3-line-height: var(--primitive-typography-line-height-tight);
  --semantic-typography-heading-h3-letter-spacing: var(--primitive-typography-letter-spacing-normal);
  --semantic-typography-heading-h3-text-transform: var(--primitive-typography-text-transform-none);
  --semantic-typography-heading-h4-font-family: var(--primitive-typography-family-heading);
  --semantic-typography-heading-h4-font-size: var(--primitive-typography-size-2xl);
  --semantic-typography-heading-h4-font-weight: var(--primitive-typography-weight-semibold);
  --semantic-typography-heading-h4-line-height: var(--primitive-typography-line-height-tight);
  --semantic-typography-heading-h4-letter-spacing: var(--primitive-typography-letter-spacing-normal);
  --semantic-typography-heading-h4-text-transform: var(--primitive-typography-text-transform-none);
  --semantic-typography-heading-h5-font-family: var(--primitive-typography-family-heading);
  --semantic-typography-heading-h5-font-size: var(--primitive-typography-size-xl);
  --semantic-typography-heading-h5-font-weight: var(--primitive-typography-weight-semibold);
  --semantic-typography-heading-h5-line-height: var(--primitive-typography-line-height-snug);
  --semantic-typography-heading-h5-letter-spacing: var(--primitive-typography-letter-spacing-normal);
  --semantic-typography-heading-h5-text-transform: var(--primitive-typography-text-transform-none);
  --semantic-typography-heading-h6-font-family: var(--primitive-typography-family-heading);
  --semantic-typography-heading-h6-font-size: var(--primitive-typography-size-base);
  --semantic-typography-heading-h6-font-weight: var(--primitive-typography-weight-semibold);
  --semantic-typography-heading-h6-line-height: var(--primitive-typography-line-height-snug);
  --semantic-typography-heading-h6-letter-spacing: var(--primitive-typography-letter-spacing-normal);
  --semantic-typography-heading-h6-text-transform: var(--primitive-typography-text-transform-uppercase);
  --semantic-typography-body-lg-font-family: var(--primitive-typography-family-body);
  --semantic-typography-body-lg-font-size: var(--primitive-typography-size-lg);
  --semantic-typography-body-lg-font-weight: var(--primitive-typography-weight-medium);
  --semantic-typography-body-lg-line-height: var(--primitive-typography-line-height-normal);
  --semantic-typography-body-lg-letter-spacing: var(--primitive-typography-letter-spacing-normal);
  --semantic-typography-body-lg-text-transform: var(--primitive-typography-text-transform-none);
  --semantic-typography-body-md-font-family: var(--primitive-typography-family-body);
  --semantic-typography-body-md-font-size: var(--primitive-typography-size-base);
  --semantic-typography-body-md-font-weight: var(--primitive-typography-weight-normal);
  --semantic-typography-body-md-line-height: var(--primitive-typography-line-height-normal);
  --semantic-typography-body-md-letter-spacing: var(--primitive-typography-letter-spacing-normal);
  --semantic-typography-body-md-text-transform: var(--primitive-typography-text-transform-none);
  --semantic-typography-body-sm-font-family: var(--primitive-typography-family-body);
  --semantic-typography-body-sm-font-size: var(--primitive-typography-size-sm);
  --semantic-typography-body-sm-font-weight: var(--primitive-typography-weight-normal);
  --semantic-typography-body-sm-line-height: var(--primitive-typography-line-height-normal);
  --semantic-typography-body-sm-letter-spacing: var(--primitive-typography-letter-spacing-normal);
  --semantic-typography-body-sm-text-transform: var(--primitive-typography-text-transform-none);
  --semantic-typography-body-xs-font-family: var(--primitive-typography-family-body);
  --semantic-typography-body-xs-font-size: var(--primitive-typography-size-xs);
  --semantic-typography-body-xs-font-weight: var(--primitive-typography-weight-normal);
  --semantic-typography-body-xs-line-height: var(--primitive-typography-line-height-normal);
  --semantic-typography-body-xs-letter-spacing: var(--primitive-typography-letter-spacing-normal);
  --semantic-typography-body-xs-text-transform: var(--primitive-typography-text-transform-none);
  --semantic-typography-body-lg-bold-font-family: var(--primitive-typography-family-body);
  --semantic-typography-body-lg-bold-font-size: var(--primitive-typography-size-lg);
  --semantic-typography-body-lg-bold-font-weight: var(--primitive-typography-weight-bold);
  --semantic-typography-body-lg-bold-line-height: var(--primitive-typography-line-height-normal);
  --semantic-typography-body-lg-bold-letter-spacing: var(--primitive-typography-letter-spacing-normal);
  --semantic-typography-body-lg-bold-text-transform: var(--primitive-typography-text-transform-none);
  --semantic-typography-body-md-bold-font-family: var(--primitive-typography-family-body);
  --semantic-typography-body-md-bold-font-size: var(--primitive-typography-size-base);
  --semantic-typography-body-md-bold-font-weight: var(--primitive-typography-weight-bold);
  --semantic-typography-body-md-bold-line-height: var(--primitive-typography-line-height-normal);
  --semantic-typography-body-md-bold-letter-spacing: var(--primitive-typography-letter-spacing-normal);
  --semantic-typography-body-md-bold-text-transform: var(--primitive-typography-text-transform-none);
  --semantic-typography-body-sm-bold-font-family: var(--primitive-typography-family-body);
  --semantic-typography-body-sm-bold-font-size: var(--primitive-typography-size-sm);
  --semantic-typography-body-sm-bold-font-weight: var(--primitive-typography-weight-bold);
  --semantic-typography-body-sm-bold-line-height: var(--primitive-typography-line-height-normal);
  --semantic-typography-body-sm-bold-letter-spacing: var(--primitive-typography-letter-spacing-normal);
  --semantic-typography-body-sm-bold-text-transform: var(--primitive-typography-text-transform-none);
  --semantic-typography-label-lg-font-family: var(--primitive-typography-family-body);
  --semantic-typography-label-lg-font-size: var(--primitive-typography-size-lg);
  --semantic-typography-label-lg-font-weight: var(--primitive-typography-weight-normal);
  --semantic-typography-label-lg-line-height: var(--primitive-typography-line-height-normal);
  --semantic-typography-label-lg-letter-spacing: var(--primitive-typography-letter-spacing-normal);
  --semantic-typography-label-lg-text-transform: var(--primitive-typography-text-transform-none);
  --semantic-typography-label-md-font-family: var(--primitive-typography-family-body);
  --semantic-typography-label-md-font-size: var(--primitive-typography-size-base);
  --semantic-typography-label-md-font-weight: var(--primitive-typography-weight-normal);
  --semantic-typography-label-md-line-height: var(--primitive-typography-line-height-normal);
  --semantic-typography-label-md-letter-spacing: var(--primitive-typography-letter-spacing-normal);
  --semantic-typography-label-md-text-transform: var(--primitive-typography-text-transform-none);
  --semantic-typography-label-sm-font-family: var(--primitive-typography-family-body);
  --semantic-typography-label-sm-font-size: var(--primitive-typography-size-sm);
  --semantic-typography-label-sm-font-weight: var(--primitive-typography-weight-normal);
  --semantic-typography-label-sm-line-height: var(--primitive-typography-line-height-normal);
  --semantic-typography-label-sm-letter-spacing: var(--primitive-typography-letter-spacing-normal);
  --semantic-typography-label-sm-text-transform: var(--primitive-typography-text-transform-none);
  --semantic-typography-label-xs-font-family: var(--primitive-typography-family-body);
  --semantic-typography-label-xs-font-size: var(--primitive-typography-size-xs);
  --semantic-typography-label-xs-font-weight: var(--primitive-typography-weight-medium);
  --semantic-typography-label-xs-line-height: var(--primitive-typography-line-height-tight);
  --semantic-typography-label-xs-letter-spacing: var(--primitive-typography-letter-spacing-normal);
  --semantic-typography-label-xs-text-transform: var(--primitive-typography-text-transform-none);
  --semantic-typography-label-uppercase-font-family: var(--primitive-typography-family-body);
  --semantic-typography-label-uppercase-font-size: var(--primitive-typography-size-sm);
  --semantic-typography-label-uppercase-font-weight: var(--primitive-typography-weight-normal);
  --semantic-typography-label-uppercase-line-height: var(--primitive-typography-line-height-normal);
  --semantic-typography-label-uppercase-letter-spacing: var(--primitive-typography-letter-spacing-normal);
  --semantic-typography-label-uppercase-text-transform: var(--primitive-typography-text-transform-uppercase);
  --semantic-typography-caption-md-font-family: var(--primitive-typography-family-body);
  --semantic-typography-caption-md-font-size: var(--primitive-typography-size-sm);
  --semantic-typography-caption-md-font-weight: var(--primitive-typography-weight-normal);
  --semantic-typography-caption-md-line-height: var(--primitive-typography-line-height-snug);
  --semantic-typography-caption-md-letter-spacing: var(--primitive-typography-letter-spacing-normal);
  --semantic-typography-caption-md-text-transform: var(--primitive-typography-text-transform-none);
  --semantic-typography-caption-sm-font-family: var(--primitive-typography-family-body);
  --semantic-typography-caption-sm-font-size: var(--primitive-typography-size-xs);
  --semantic-typography-caption-sm-font-weight: var(--primitive-typography-weight-normal);
  --semantic-typography-caption-sm-line-height: var(--primitive-typography-line-height-snug);
  --semantic-typography-caption-sm-letter-spacing: var(--primitive-typography-letter-spacing-normal);
  --semantic-typography-caption-sm-text-transform: var(--primitive-typography-text-transform-none);
  --semantic-typography-code-inline-font-family: var(--primitive-typography-family-mono);
  --semantic-typography-code-inline-font-size: var(--primitive-typography-size-sm);
  --semantic-typography-code-inline-font-weight: var(--primitive-typography-weight-normal);
  --semantic-typography-code-inline-line-height: var(--primitive-typography-line-height-normal);
  --semantic-typography-code-inline-letter-spacing: var(--primitive-typography-letter-spacing-normal);
  --semantic-typography-code-inline-text-transform: var(--primitive-typography-text-transform-none);
  --semantic-typography-code-block-font-family: var(--primitive-typography-family-mono);
  --semantic-typography-code-block-font-size: var(--primitive-typography-size-sm);
  --semantic-typography-code-block-font-weight: var(--primitive-typography-weight-medium);
  --semantic-typography-code-block-line-height: var(--primitive-typography-line-height-normal);
  --semantic-typography-code-block-letter-spacing: var(--primitive-typography-letter-spacing-normal);
  --semantic-typography-code-block-text-transform: var(--primitive-typography-text-transform-none);
  --semantic-typography-overline-md-font-family: var(--primitive-typography-family-body);
  --semantic-typography-overline-md-font-size: var(--primitive-typography-size-sm);
  --semantic-typography-overline-md-font-weight: var(--primitive-typography-weight-medium);
  --semantic-typography-overline-md-line-height: var(--primitive-typography-line-height-normal);
  --semantic-typography-overline-md-letter-spacing: var(--primitive-typography-letter-spacing-normal);
  --semantic-typography-overline-md-text-transform: var(--primitive-typography-text-transform-uppercase);
  --semantic-typography-overline-sm-font-family: var(--primitive-typography-family-body);
  --semantic-typography-overline-sm-font-size: var(--primitive-typography-size-xs);
  --semantic-typography-overline-sm-font-weight: var(--primitive-typography-weight-normal);
  --semantic-typography-overline-sm-line-height: var(--primitive-typography-line-height-normal);
  --semantic-typography-overline-sm-letter-spacing: var(--primitive-typography-letter-spacing-normal);
  --semantic-typography-overline-sm-text-transform: var(--primitive-typography-text-transform-uppercase);
  --semantic-spacing-stack-lg: var(--primitive-spacing-2xl);
  --semantic-spacing-stack-lg-value: var(--primitive-spacing-2xl);
  --semantic-spacing-stack-md: var(--primitive-spacing-xl);
  --semantic-spacing-stack-md-value: var(--primitive-spacing-xl);
  --semantic-spacing-stack-sm: var(--primitive-spacing-md);
  --semantic-spacing-stack-sm-value: var(--primitive-spacing-md);
  --semantic-spacing-stack-xl: var(--primitive-spacing-3xl);
  --semantic-spacing-stack-xl-value: var(--primitive-spacing-3xl);
  --semantic-spacing-stack-xs: var(--primitive-spacing-sm);
  --semantic-spacing-stack-xs-value: var(--primitive-spacing-sm);
  --semantic-spacing-inset-lg: var(--primitive-spacing-lg);
  --semantic-spacing-inset-lg-value: var(--primitive-spacing-lg);
  --semantic-spacing-inset-md: var(--primitive-spacing-md);
  --semantic-spacing-inset-md-value: var(--primitive-spacing-md);
  --semantic-spacing-inset-sm: var(--primitive-spacing-sm);
  --semantic-spacing-inset-sm-value: var(--primitive-spacing-sm);
  --semantic-spacing-inset-xl: var(--primitive-spacing-xl);
  --semantic-spacing-inset-xl-value: var(--primitive-spacing-xl);
  --semantic-spacing-inset-xs: var(--primitive-spacing-xs);
  --semantic-spacing-inset-xs-value: var(--primitive-spacing-xs);
  --semantic-spacing-inline-lg: var(--primitive-spacing-2xl);
  --semantic-spacing-inline-lg-value: var(--primitive-spacing-2xl);
  --semantic-spacing-inline-md: var(--primitive-spacing-lg);
  --semantic-spacing-inline-md-value: var(--primitive-spacing-lg);
  --semantic-spacing-inline-sm: var(--primitive-spacing-md);
  --semantic-spacing-inline-sm-value: var(--primitive-spacing-md);
  --semantic-spacing-inline-xl: var(--primitive-spacing-3xl);
  --semantic-spacing-inline-xl-value: var(--primitive-spacing-3xl);
  --semantic-spacing-inline-xs: var(--primitive-spacing-sm);
  --semantic-spacing-inline-xs-value: var(--primitive-spacing-sm);
  --semantic-transition-base: var(--primitive-duration-base) var(--primitive-easing-standard);
  --semantic-transition-base-easing: var(--primitive-easing-standard);
  --semantic-transition-base-duration: var(--primitive-duration-base);
  --semantic-transition-fast: var(--primitive-duration-fast) var(--primitive-easing-standard);
  --semantic-transition-fast-easing: var(--primitive-easing-standard);
  --semantic-transition-fast-duration: var(--primitive-duration-fast);
  --semantic-transition-slow: var(--primitive-duration-slow) var(--primitive-easing-standard);
  --semantic-transition-slow-easing: var(--primitive-easing-standard);
  --semantic-transition-slow-duration: var(--primitive-duration-slow);
  --semantic-transition-color: var(--primitive-duration-base) var(--primitive-easing-ease);
  --semantic-transition-color-easing: var(--primitive-easing-ease);
  --semantic-transition-color-duration: var(--primitive-duration-base);
  --semantic-focus-outlinewidth: var(--primitive-border-width-heavy);
  --semantic-focus-outlineoffset: var(--primitive-spacing-sm);
  --semantic-focus-outlinecolor: var(--semantic-color-border-primary-default);
  --semantic-focus-ringwidth: var(--primitive-border-width-thin);
  --semantic-focus-ringcolor: var(--semantic-color-border-primary-default);
  --semantic-focus-ringopacity: var(--primitive-opacity-alpha-100);
  --pattern-button-base-tokens-padding-x: var(--semantic-spacing-inset-lg);
  --pattern-button-base-tokens-padding-y: var(--semantic-spacing-inset-sm);
  --pattern-button-base-tokens-border-radius: var(--primitive-radius-sm);
  --pattern-button-base-tokens-border-width: var(--primitive-border-width-thin);
  --pattern-button-base-tokens-icon-size: var(--primitive-icon-size-sm);
  --pattern-button-base-tokens-icon-stroke: var(--primitive-icon-stroke-medium);
  --pattern-button-base-tokens-gap: var(--semantic-spacing-inline-sm);
  --pattern-button-base-tokens-min-height: 37px;
  --pattern-button-base-tokens-font-family: var(--semantic-typography-label-md-font-family);
  --pattern-button-base-tokens-font-size: var(--semantic-typography-label-md-font-size);
  --pattern-button-base-tokens-font-weight: var(--semantic-typography-label-md-font-weight);
  --pattern-button-base-tokens-line-height: var(--semantic-typography-label-md-line-height);
  --pattern-button-base-tokens-letter-spacing: var(--semantic-typography-label-md-letter-spacing);
  --pattern-button-base-tokens-text-transform: var(--semantic-typography-label-md-text-transform);
  --pattern-button-base-tokens-transition: var(--semantic-transition-fast);
  --pattern-button-properties-display: inline-flex;
  --pattern-button-properties-align-items: center;
  --pattern-button-properties-justify-content: center;
  --pattern-button-properties-cursor: pointer;
  --pattern-button-properties-border-style: solid;
  --pattern-button-properties-user-select: none;
  --pattern-button-properties-white-space: nowrap;
  --pattern-button-properties-overflow: hidden;
  --pattern-button-properties-text-overflow: ellipsis;
  --pattern-button-properties-min-width: none;
  --pattern-button-properties-max-width: none;
  --pattern-button-layout-modes-0: label-only;
  --pattern-button-layout-modes-1: icon-only;
  --pattern-button-layout-modes-2: icon-left;
  --pattern-button-layout-modes-3: icon-right;
  --pattern-button-layout-mode-definitions-icon-only-justify-content: center;
  --pattern-button-layout-mode-definitions-icon-left-icon-position: before;
  --pattern-button-layout-mode-definitions-icon-right-icon-position: after;
  --pattern-button-variants-0: primary;
  --pattern-button-variants-1: secondary;
  --pattern-button-variants-2: ghost;
  --pattern-button-variants-3: destructive;
  --pattern-button-sizes-0: sm;
  --pattern-button-sizes-1: md;
  --pattern-button-sizes-2: lg;
  --pattern-badge-base-tokens-padding-x: var(--semantic-spacing-inset-lg);
  --pattern-badge-base-tokens-padding-y: var(--semantic-spacing-inset-xs);
  --pattern-badge-base-tokens-border-radius: var(--primitive-radius-2xl);
  --pattern-badge-base-tokens-border-width: var(--primitive-border-width-thin);
  --pattern-badge-base-tokens-icon-size: var(--primitive-icon-size-sm);
  --pattern-badge-base-tokens-icon-stroke: var(--primitive-icon-stroke-regular);
  --pattern-badge-base-tokens-gap: var(--semantic-spacing-inline-xs);
  --pattern-badge-base-tokens-min-height: 30px;
  --pattern-badge-base-tokens-font-family: var(--semantic-typography-label-sm-font-family);
  --pattern-badge-base-tokens-font-size: var(--semantic-typography-label-sm-font-size);
  --pattern-badge-base-tokens-font-weight: var(--semantic-typography-label-sm-font-weight);
  --pattern-badge-base-tokens-line-height: var(--semantic-typography-label-sm-line-height);
  --pattern-badge-base-tokens-letter-spacing: var(--semantic-typography-label-sm-letter-spacing);
  --pattern-badge-base-tokens-text-transform: var(--semantic-typography-label-sm-text-transform);
  --pattern-badge-properties-display: inline-flex;
  --pattern-badge-properties-align-items: center;
  --pattern-badge-properties-user-select: none;
  --pattern-badge-properties-white-space: nowrap;
  --pattern-badge-properties-min-width: none;
  --pattern-badge-properties-max-width: none;
  --pattern-badge-properties-overflow: hidden;
  --pattern-badge-properties-border-style: solid;
  --pattern-badge-properties-text-overflow: ellipsis;
  --pattern-badge-properties-justify-content: center;
  --pattern-badge-layout-modes-0: label-only;
  --pattern-badge-layout-modes-1: icon-left;
  --pattern-badge-layout-modes-2: icon-right;
  --pattern-badge-layout-modes-3: icon-only;
  --pattern-badge-layout-mode-definitions-icon-only-justify-content: center;
  --pattern-badge-layout-mode-definitions-icon-left-icon-position: before;
  --pattern-badge-layout-mode-definitions-icon-right-icon-position: after;
  --pattern-badge-variants-0: neutral;
  --pattern-badge-variants-1: primary;
  --pattern-badge-variants-2: secondary;
  --pattern-badge-variants-3: tertiary;
  --pattern-badge-variants-4: success;
  --pattern-badge-variants-5: warning;
  --pattern-badge-variants-6: error;
  --pattern-badge-variants-7: info;
  --pattern-badge-sizes-0: sm;
  --pattern-badge-sizes-1: md;
  --pattern-text-input-base-tokens-padding-x: var(--semantic-spacing-inset-lg);
  --pattern-text-input-base-tokens-padding-y: var(--semantic-spacing-inset-sm);
  --pattern-text-input-base-tokens-border-radius: var(--primitive-radius-md);
  --pattern-text-input-base-tokens-border-width: var(--primitive-border-width-thin);
  --pattern-text-input-base-tokens-min-height: 37px;
  --pattern-text-input-base-tokens-font-family: var(--semantic-typography-body-md-font-family);
  --pattern-text-input-base-tokens-font-size: var(--semantic-typography-body-md-font-size);
  --pattern-text-input-base-tokens-font-weight: var(--semantic-typography-body-md-font-weight);
  --pattern-text-input-base-tokens-line-height: var(--semantic-typography-body-md-line-height);
  --pattern-text-input-base-tokens-letter-spacing: var(--semantic-typography-body-md-letter-spacing);
  --pattern-text-input-base-tokens-text-transform: var(--semantic-typography-body-md-text-transform);
  --pattern-text-input-base-tokens-transition: var(--semantic-transition-fast);
  --pattern-text-input-base-tokens-icon-size: var(--primitive-icon-size-sm);
  --pattern-text-input-base-tokens-icon-stroke: var(--primitive-icon-stroke-medium);
  --pattern-text-input-base-tokens-gap: var(--semantic-spacing-inline-sm);
  --pattern-text-input-properties-display: flex;
  --pattern-text-input-properties-align-items: center;
  --pattern-text-input-properties-width: 100%;
  --pattern-text-input-properties-border-style: solid;
  --pattern-text-input-properties-outline: none;
  --pattern-text-input-properties-min-width: none;
  --pattern-text-input-properties-max-width: 100%;
  --pattern-text-input-layout-modes-0: label-only;
  --pattern-text-input-layout-modes-1: icon-left;
  --pattern-text-input-layout-modes-2: icon-right;
  --pattern-text-input-layout-mode-definitions-icon-left-icon-position: before;
  --pattern-text-input-layout-mode-definitions-icon-left-justify-content: flex-start;
  --pattern-text-input-layout-mode-definitions-icon-right-icon-position: after;
  --pattern-text-input-layout-mode-definitions-icon-right-justify-content: space-between;
  --pattern-text-input-layout-mode-definitions-label-only-justify-content: flex-start;
  --pattern-text-input-sizes-0: sm;
  --pattern-text-input-sizes-1: md;
  --pattern-card-base-tokens-padding: var(--semantic-spacing-inset-lg);
  --pattern-card-base-tokens-border-radius: var(--primitive-radius-md);
  --pattern-card-base-tokens-border-width: var(--primitive-border-width-thin);
  --pattern-card-base-tokens-shadow: var(--primitive-shadow-elevation-1);
  --pattern-card-base-tokens-header-text-style: var(--semantic-typography-heading-h3);
  --pattern-card-base-tokens-body-text-style: var(--semantic-typography-body-md);
  --pattern-card-base-tokens-section-gap: var(--semantic-spacing-stack-sm);
  --pattern-card-properties-display: flex;
  --pattern-card-properties-flex-direction: column;
  --pattern-card-properties-border-style: solid;
  --pattern-card-properties-overflow: hidden;
  --pattern-card-properties-min-width: none;
  --pattern-card-properties-max-width: 100%;
  --pattern-card-variants-0: default;
  --pattern-card-variants-1: elevated;
  --pattern-card-variants-2: interactive;
  --pattern-card-sizes-0: sm;
  --pattern-card-sizes-1: md;
  --pattern-card-sizes-2: lg;
  --pattern-checkbox-base-tokens-container-size: 24px;
  --pattern-checkbox-base-tokens-container-radius: var(--primitive-radius-xs);
  --pattern-checkbox-base-tokens-container-border-width: var(--primitive-border-width-thin);
  --pattern-checkbox-base-tokens-indicator-size: var(--primitive-icon-size-sm);
  --pattern-checkbox-base-tokens-gap: var(--semantic-spacing-inline-md);
  --pattern-checkbox-base-tokens-font-family: var(--semantic-typography-body-md-font-family);
  --pattern-checkbox-base-tokens-font-size: var(--semantic-typography-body-md-font-size);
  --pattern-checkbox-base-tokens-font-weight: var(--semantic-typography-body-md-font-weight);
  --pattern-checkbox-base-tokens-line-height: var(--semantic-typography-body-md-line-height);
  --pattern-checkbox-base-tokens-letter-spacing: var(--semantic-typography-body-md-letter-spacing);
  --pattern-checkbox-base-tokens-text-transform: var(--semantic-typography-body-md-text-transform);
  --pattern-checkbox-properties-display: inline-flex;
  --pattern-checkbox-properties-align-items: center;
  --pattern-checkbox-properties-cursor: pointer;
  --pattern-checkbox-properties-user-select: none;
  --pattern-checkbox-layout-modes-0: control-only;
  --pattern-checkbox-layout-modes-1: label-left;
  --pattern-checkbox-layout-modes-2: label-right;
  --pattern-checkbox-sizes-0: sm;
  --pattern-checkbox-sizes-1: md;
  --pattern-radio-base-tokens-container-size: 20px;
  --pattern-radio-base-tokens-container-border-width: var(--primitive-border-width-thin);
  --pattern-radio-base-tokens-indicator-size: 8px;
  --pattern-radio-base-tokens-gap: var(--semantic-spacing-inline-sm);
  --pattern-radio-base-tokens-font-family: var(--semantic-typography-body-md-font-family);
  --pattern-radio-base-tokens-font-size: var(--semantic-typography-body-md-font-size);
  --pattern-radio-base-tokens-font-weight: var(--semantic-typography-body-md-font-weight);
  --pattern-radio-base-tokens-line-height: var(--semantic-typography-body-md-line-height);
  --pattern-radio-base-tokens-letter-spacing: var(--semantic-typography-body-md-letter-spacing);
  --pattern-radio-base-tokens-text-transform: var(--semantic-typography-body-md-text-transform);
  --pattern-radio-properties-display: inline-flex;
  --pattern-radio-properties-align-items: center;
  --pattern-radio-properties-cursor: pointer;
  --pattern-radio-properties-user-select: none;
  --pattern-radio-properties-border-radius: 50%;
  --pattern-radio-layout-modes-0: control-only;
  --pattern-radio-layout-modes-1: label-left;
  --pattern-radio-layout-modes-2: label-right;
  --pattern-radio-sizes-0: sm;
  --pattern-radio-sizes-1: md;
  --pattern-switch-base-tokens-track-width: 48px;
  --pattern-switch-base-tokens-track-height: 24px;
  --pattern-switch-base-tokens-track-radius: var(--primitive-radius-md);
  --pattern-switch-base-tokens-track-border-width: var(--primitive-border-width-regular);
  --pattern-switch-base-tokens-thumb-size: 16px;
  --pattern-switch-base-tokens-thumb-radius: var(--primitive-radius-md);
  --pattern-switch-base-tokens-gap: var(--semantic-spacing-inline-md);
  --pattern-switch-base-tokens-font-family: var(--semantic-typography-body-md-font-family);
  --pattern-switch-base-tokens-font-size: var(--semantic-typography-body-md-font-size);
  --pattern-switch-base-tokens-font-weight: var(--semantic-typography-body-md-font-weight);
  --pattern-switch-base-tokens-line-height: var(--semantic-typography-body-md-line-height);
  --pattern-switch-base-tokens-letter-spacing: var(--semantic-typography-body-md-letter-spacing);
  --pattern-switch-base-tokens-text-transform: var(--semantic-typography-body-md-text-transform);
  --pattern-switch-properties-display: inline-flex;
  --pattern-switch-properties-align-items: center;
  --pattern-switch-properties-cursor: pointer;
  --pattern-switch-properties-user-select: none;
  --pattern-switch-layout-modes-0: control-only;
  --pattern-switch-layout-modes-1: label-left;
  --pattern-switch-layout-modes-2: label-right;
  --pattern-switch-sizes-0: sm;
  --pattern-switch-sizes-1: md;
  --pattern-slider-base-tokens-track-height: 28px;
  --pattern-slider-base-tokens-track-radius: var(--primitive-radius-full);
  --pattern-slider-base-tokens-track-border-width: var(--primitive-border-width-regular);
  --pattern-slider-base-tokens-thumb-size: 18px;
  --pattern-slider-base-tokens-thumb-radius: var(--primitive-radius-full);
  --pattern-slider-properties-display: inline-flex;
  --pattern-slider-properties-align-items: center;
  --pattern-slider-properties-cursor: pointer;
  --pattern-slider-properties-user-select: none;
  --pattern-slider-properties-min-width: none;
  --pattern-slider-properties-max-width: 100%;
  --pattern-tooltip-base-tokens-padding-x: var(--semantic-spacing-inset-md);
  --pattern-tooltip-base-tokens-padding-y: var(--semantic-spacing-inset-sm);
  --pattern-tooltip-base-tokens-border-radius: var(--primitive-radius-xs);
  --pattern-tooltip-base-tokens-arrow-size: 12px;
  --pattern-tooltip-base-tokens-offset: 12px;
  --pattern-tooltip-base-tokens-font-family: var(--semantic-typography-label-xs-font-family);
  --pattern-tooltip-base-tokens-font-size: var(--semantic-typography-label-xs-font-size);
  --pattern-tooltip-base-tokens-font-weight: var(--semantic-typography-label-xs-font-weight);
  --pattern-tooltip-base-tokens-line-height: var(--semantic-typography-label-xs-line-height);
  --pattern-tooltip-base-tokens-letter-spacing: var(--semantic-typography-label-xs-letter-spacing);
  --pattern-tooltip-base-tokens-text-transform: var(--semantic-typography-label-xs-text-transform);
  --pattern-tooltip-properties-white-space: nowrap;
  --pattern-tooltip-properties-pointer-events: none;
  --pattern-tooltip-properties-z-index: 9999;
  --pattern-tooltip-properties-min-width: none;
  --pattern-tooltip-properties-max-width: none;
  --pattern-tooltip-properties-min-height: none;
  --pattern-text-area-base-tokens-padding-x: var(--semantic-spacing-inset-lg);
  --pattern-text-area-base-tokens-padding-y: var(--semantic-spacing-inset-sm);
  --pattern-text-area-base-tokens-border-radius: var(--primitive-radius-md);
  --pattern-text-area-base-tokens-border-width: var(--primitive-border-width-thin);
  --pattern-text-area-base-tokens-min-height: 37px;
  --pattern-text-area-base-tokens-font-family: var(--semantic-typography-body-md-font-family);
  --pattern-text-area-base-tokens-font-size: var(--semantic-typography-body-md-font-size);
  --pattern-text-area-base-tokens-font-weight: var(--semantic-typography-body-md-font-weight);
  --pattern-text-area-base-tokens-line-height: var(--semantic-typography-body-md-line-height);
  --pattern-text-area-base-tokens-letter-spacing: var(--semantic-typography-body-md-letter-spacing);
  --pattern-text-area-base-tokens-text-transform: var(--semantic-typography-body-md-text-transform);
  --pattern-text-area-base-tokens-transition: var(--semantic-transition-fast);
  --pattern-text-area-properties-display: block;
  --pattern-text-area-properties-width: 100%;
  --pattern-text-area-properties-border-style: solid;
  --pattern-text-area-properties-outline: none;
  --pattern-text-area-properties-resize: vertical;
  --pattern-text-area-properties-min-width: none;
  --pattern-text-area-properties-max-width: 100%;
  --pattern-text-area-sizes-0: sm;
  --pattern-text-area-sizes-1: md;
  --pattern-avatar-base-tokens-size: 40px;
  --pattern-avatar-base-tokens-border-radius: var(--primitive-radius-full);
  --pattern-avatar-base-tokens-border-width: var(--primitive-border-width-thin);
  --pattern-avatar-base-tokens-font-family: var(--semantic-typography-label-md-font-family);
  --pattern-avatar-base-tokens-font-size: var(--semantic-typography-label-md-font-size);
  --pattern-avatar-base-tokens-font-weight: var(--semantic-typography-label-md-font-weight);
  --pattern-avatar-base-tokens-line-height: var(--semantic-typography-label-md-line-height);
  --pattern-avatar-base-tokens-letter-spacing: var(--semantic-typography-label-md-letter-spacing);
  --pattern-avatar-base-tokens-text-transform: var(--semantic-typography-label-md-text-transform);
  --pattern-avatar-properties-display: inline-flex;
  --pattern-avatar-properties-align-items: center;
  --pattern-avatar-properties-justify-content: center;
  --pattern-avatar-properties-flex-shrink: 0;
  --pattern-avatar-properties-overflow: hidden;
  --pattern-avatar-variants-0: primary;
  --pattern-avatar-variants-1: neutral;
  --pattern-avatar-variants-2: secondary;
  --pattern-avatar-sizes-0: sm;
  --pattern-avatar-sizes-1: md;
  --pattern-avatar-sizes-2: lg;
  --pattern-avatar-sizes-3: xl;
  --pattern-divider-base-tokens-spacing-top: var(--semantic-spacing-stack-md);
  --pattern-divider-base-tokens-spacing-bottom: var(--semantic-spacing-stack-md);
  --pattern-divider-properties-border: none;
  --pattern-divider-properties-padding: 0;
  --pattern-divider-properties-background: transparent;
  --pattern-divider-variants-0: subtle;
  --pattern-divider-variants-1: strong;
  --pattern-tab-bar-container-base-tokens-padding: var(--semantic-spacing-inset-lg);
  --pattern-tab-bar-container-base-tokens-border-radius: var(--primitive-radius-md);
  --pattern-tab-bar-container-base-tokens-gap: var(--semantic-spacing-inline-xs);
  --pattern-tab-bar-container-properties-display: inline-flex;
  --pattern-tab-bar-container-properties-align-items: center;
  --pattern-tab-bar-container-properties-flex-wrap: nowrap;
  --pattern-tab-bar-tab-base-tokens-padding-x: var(--semantic-spacing-inset-lg);
  --pattern-tab-bar-tab-base-tokens-padding-y: var(--semantic-spacing-inset-sm);
  --pattern-tab-bar-tab-base-tokens-border-radius: var(--primitive-radius-sm);
  --pattern-tab-bar-tab-base-tokens-font-family: var(--semantic-typography-label-md-font-family);
  --pattern-tab-bar-tab-base-tokens-font-size: var(--semantic-typography-label-md-font-size);
  --pattern-tab-bar-tab-base-tokens-font-weight: var(--semantic-typography-label-md-font-weight);
  --pattern-tab-bar-tab-base-tokens-line-height: var(--semantic-typography-label-md-line-height);
  --pattern-tab-bar-tab-base-tokens-letter-spacing: var(--semantic-typography-label-md-letter-spacing);
  --pattern-tab-bar-tab-base-tokens-text-transform: var(--semantic-typography-label-md-text-transform);
  --pattern-tab-bar-tab-properties-display: inline-flex;
  --pattern-tab-bar-tab-properties-align-items: center;
  --pattern-tab-bar-tab-properties-justify-content: center;
  --pattern-tab-bar-tab-properties-cursor: pointer;
  --pattern-tab-bar-tab-properties-user-select: none;
  --pattern-tab-bar-tab-properties-white-space: nowrap;
  --pattern-tab-bar-sizes-0: sm;
  --pattern-tab-bar-sizes-1: md;
  --pattern-select-trigger-base-tokens-padding-x: var(--semantic-spacing-inset-lg);
  --pattern-select-trigger-base-tokens-padding-y: var(--semantic-spacing-inset-sm);
  --pattern-select-trigger-base-tokens-border-radius: var(--primitive-radius-sm);
  --pattern-select-trigger-base-tokens-border-width: var(--primitive-border-width-thin);
  --pattern-select-trigger-base-tokens-icon-size: var(--primitive-icon-size-sm);
  --pattern-select-trigger-base-tokens-font-family: var(--semantic-typography-body-md-font-family);
  --pattern-select-trigger-base-tokens-font-size: var(--semantic-typography-body-md-font-size);
  --pattern-select-trigger-base-tokens-font-weight: var(--semantic-typography-body-md-font-weight);
  --pattern-select-trigger-base-tokens-line-height: var(--semantic-typography-body-md-line-height);
  --pattern-select-trigger-base-tokens-letter-spacing: var(--semantic-typography-body-md-letter-spacing);
  --pattern-select-trigger-base-tokens-text-transform: var(--semantic-typography-body-md-text-transform);
  --pattern-select-trigger-properties-display: inline-flex;
  --pattern-select-trigger-properties-align-items: center;
  --pattern-select-trigger-properties-cursor: pointer;
  --pattern-select-trigger-properties-border-style: solid;
  --pattern-select-trigger-properties-user-select: none;
  --pattern-select-trigger-properties-min-width: none;
  --pattern-select-trigger-properties-max-width: 100%;
  --pattern-select-trigger-properties-panel-offset: 4px;
  --pattern-select-panel-base-tokens-padding: var(--semantic-spacing-inset-md);
  --pattern-select-panel-base-tokens-border-radius: var(--primitive-radius-sm);
  --pattern-select-panel-base-tokens-border-width: var(--primitive-border-width-thin);
  --pattern-select-panel-base-tokens-max-height: 300px;
  --pattern-select-panel-base-tokens-gap: var(--semantic-spacing-stack-xs);
  --pattern-select-panel-base-tokens-shadow: var(--primitive-shadow-elevation-2);
  --pattern-select-panel-properties-display: flex;
  --pattern-select-panel-properties-flex-direction: column;
  --pattern-select-panel-properties-overflow-y: auto;
  --pattern-select-panel-properties-border-style: solid;
  --pattern-select-panel-properties-position: absolute;
  --pattern-select-panel-properties-z-index: 50;
  --pattern-select-option-base-tokens-padding-x: var(--semantic-spacing-inset-md);
  --pattern-select-option-base-tokens-padding-y: var(--semantic-spacing-inset-sm);
  --pattern-select-option-base-tokens-border-radius: var(--primitive-radius-sm);
  --pattern-select-option-base-tokens-font-family: var(--semantic-typography-body-md-font-family);
  --pattern-select-option-base-tokens-font-size: var(--semantic-typography-body-md-font-size);
  --pattern-select-option-base-tokens-font-weight: var(--semantic-typography-body-md-font-weight);
  --pattern-select-option-base-tokens-line-height: var(--semantic-typography-body-md-line-height);
  --pattern-select-option-base-tokens-letter-spacing: var(--semantic-typography-body-md-letter-spacing);
  --pattern-select-option-base-tokens-text-transform: var(--semantic-typography-body-md-text-transform);
  --pattern-select-option-properties-display: flex;
  --pattern-select-option-properties-align-items: center;
  --pattern-select-option-properties-cursor: pointer;
  --pattern-select-option-properties-user-select: none;
  --pattern-select-sizes-0: sm;
  --pattern-select-sizes-1: md;
  --pattern-tabs-sizes-0: sm;
  --pattern-tabs-sizes-1: md;
  --pattern-tabs-tab-properties-cursor: pointer;
  --pattern-tabs-tab-properties-display: inline-flex;
  --pattern-tabs-tab-properties-align-items: center;
  --pattern-tabs-tab-properties-user-select: none;
  --pattern-tabs-tab-properties-white-space: nowrap;
  --pattern-tabs-tab-properties-justify-content: center;
  --pattern-tabs-tab-base-tokens-padding-x: var(--semantic-spacing-inset-md);
  --pattern-tabs-tab-base-tokens-padding-y: var(--semantic-spacing-inset-sm);
  --pattern-tabs-tab-base-tokens-font-family: var(--semantic-typography-label-md-font-family);
  --pattern-tabs-tab-base-tokens-font-size: var(--semantic-typography-label-md-font-size);
  --pattern-tabs-tab-base-tokens-font-weight: var(--semantic-typography-label-md-font-weight);
  --pattern-tabs-tab-base-tokens-line-height: var(--semantic-typography-label-md-line-height);
  --pattern-tabs-tab-base-tokens-letter-spacing: var(--semantic-typography-label-md-letter-spacing);
  --pattern-tabs-tab-base-tokens-text-transform: var(--semantic-typography-label-md-text-transform);
  --pattern-tabs-tab-base-tokens-border-radius: var(--primitive-radius-md);
  --pattern-tabs-container-properties-display: inline-flex;
  --pattern-tabs-container-properties-flex-wrap: nowrap;
  --pattern-tabs-container-properties-align-items: center;
  --pattern-tabs-container-base-tokens-gap: var(--semantic-spacing-inline-xs);
  --pattern-tabs-container-base-tokens-padding: var(--semantic-spacing-inset-xs);
  --pattern-tabs-container-base-tokens-border-radius: var(--primitive-radius-lg);
  --component-button-ghost-background: transparent;
  --component-button-ghost-background-hover: var(--semantic-color-surface-neutral-default);
  --component-button-ghost-background-active: var(--semantic-color-surface-neutral-default);
  --component-button-ghost-background-disabled: transparent;
  --component-button-ghost-text-color: var(--semantic-color-text-neutral-bold);
  --component-button-ghost-text-color-hover: var(--semantic-color-text-neutral-bold);
  --component-button-ghost-text-color-active: var(--semantic-color-text-neutral-bold);
  --component-button-ghost-text-color-disabled: var(--semantic-color-text-disabled);
  --component-button-ghost-border-color: transparent;
  --component-button-ghost-border-color-hover: transparent;
  --component-button-ghost-border-color-active: transparent;
  --component-button-ghost-border-color-disabled: transparent;
  --component-button-ghost-background-opacity: var(--primitive-opacity-alpha-0);
  --component-button-ghost-background-hover-opacity: var(--primitive-opacity-alpha-25);
  --component-button-ghost-background-active-opacity: var(--primitive-opacity-alpha-50);
  --component-button-ghost-background-disabled-opacity: var(--primitive-opacity-alpha-25);
  --component-button-primary-background: var(--semantic-color-interactive-primary-default);
  --component-button-primary-background-hover: var(--semantic-color-interactive-primary-hover);
  --component-button-primary-background-active: var(--semantic-color-interactive-primary-active);
  --component-button-primary-background-disabled: var(--semantic-color-interactive-primary-disabled);
  --component-button-primary-text-color: var(--semantic-color-text-neutral-contrast);
  --component-button-primary-text-color-hover: var(--semantic-color-text-neutral-contrast);
  --component-button-primary-text-color-active: var(--semantic-color-text-neutral-contrast);
  --component-button-primary-text-color-disabled: var(--semantic-color-text-disabled);
  --component-button-primary-border-color: transparent;
  --component-button-primary-border-color-hover: transparent;
  --component-button-primary-border-color-active: transparent;
  --component-button-primary-border-color-disabled: transparent;
  --component-button-primary-background-opacity: var(--primitive-opacity-alpha-100);
  --component-button-primary-background-hover-opacity: var(--primitive-opacity-alpha-100);
  --component-button-primary-background-active-opacity: var(--primitive-opacity-alpha-100);
  --component-button-primary-background-disabled-opacity: var(--primitive-opacity-alpha-100);
  --component-button-secondary-background: var(--semantic-color-surface-neutral-subtle);
  --component-button-secondary-background-hover: var(--semantic-color-surface-neutral-default);
  --component-button-secondary-background-active: var(--semantic-color-surface-neutral-default);
  --component-button-secondary-background-disabled: var(--semantic-color-surface-disabled);
  --component-button-secondary-text-color: var(--semantic-color-text-neutral-bold);
  --component-button-secondary-text-color-hover: var(--semantic-color-text-neutral-bold);
  --component-button-secondary-text-color-active: var(--semantic-color-text-neutral-bold);
  --component-button-secondary-text-color-disabled: var(--semantic-color-text-disabled);
  --component-button-secondary-border-color: var(--semantic-color-border-neutral-default);
  --component-button-secondary-border-color-hover: var(--semantic-color-border-neutral-bold);
  --component-button-secondary-border-color-active: var(--semantic-color-border-neutral-bold);
  --component-button-secondary-border-color-disabled: transparent;
  --component-button-secondary-background-opacity: var(--primitive-opacity-alpha-100);
  --component-button-secondary-background-hover-opacity: var(--primitive-opacity-alpha-100);
  --component-button-secondary-background-active-opacity: var(--primitive-opacity-alpha-100);
  --component-button-secondary-background-disabled-opacity: var(--primitive-opacity-alpha-100);
  --component-button-destructive-background: var(--semantic-color-interactive-destructive-default);
  --component-button-destructive-background-hover: var(--semantic-color-interactive-destructive-hover);
  --component-button-destructive-background-active: var(--semantic-color-interactive-destructive-active);
  --component-button-destructive-background-disabled: var(--semantic-color-interactive-destructive-disabled);
  --component-button-destructive-text-color: var(--semantic-color-text-neutral-contrast);
  --component-button-destructive-text-color-hover: var(--semantic-color-text-neutral-contrast);
  --component-button-destructive-text-color-active: var(--semantic-color-text-neutral-contrast);
  --component-button-destructive-text-color-disabled: var(--semantic-color-text-disabled);
  --component-button-destructive-border-color: transparent;
  --component-button-destructive-border-color-hover: transparent;
  --component-button-destructive-border-color-active: transparent;
  --component-button-destructive-border-color-disabled: transparent;
  --component-button-destructive-background-opacity: var(--primitive-opacity-alpha-100);
  --component-button-destructive-background-hover-opacity: var(--primitive-opacity-alpha-100);
  --component-button-destructive-background-active-opacity: var(--primitive-opacity-alpha-100);
  --component-button-destructive-background-disabled-opacity: var(--primitive-opacity-alpha-100);
  --component-button-lg-padding-x: var(--semantic-spacing-inset-lg);
  --component-button-lg-padding-y: var(--semantic-spacing-inset-sm);
  --component-button-lg-border-radius: var(--primitive-radius-sm);
  --component-button-lg-icon-size: var(--primitive-icon-size-md);
  --component-button-lg-icon-stroke: var(--primitive-icon-stroke-medium);
  --component-button-lg-gap: var(--semantic-spacing-inline-sm);
  --component-button-lg-min-width: none;
  --component-button-lg-max-width: none;
  --component-button-lg-min-height: 40px;
  --component-button-lg-font-family: var(--semantic-typography-label-lg-font-family);
  --component-button-lg-font-size: var(--semantic-typography-label-lg-font-size);
  --component-button-lg-font-weight: var(--semantic-typography-label-lg-font-weight);
  --component-button-lg-line-height: var(--semantic-typography-label-lg-line-height);
  --component-button-lg-letter-spacing: var(--semantic-typography-label-lg-letter-spacing);
  --component-button-lg-text-transform: var(--semantic-typography-label-lg-text-transform);
  --component-button-md-min-width: none;
  --component-button-md-max-width: none;
  --component-button-md-min-height: 37px;
  --component-button-sm-padding-x: var(--semantic-spacing-inset-md);
  --component-button-sm-padding-y: var(--semantic-spacing-inset-sm);
  --component-button-sm-border-radius: var(--primitive-radius-sm);
  --component-button-sm-icon-size: var(--primitive-icon-size-xs);
  --component-button-sm-icon-stroke: var(--primitive-icon-stroke-regular);
  --component-button-sm-gap: var(--semantic-spacing-inline-xs);
  --component-button-sm-min-width: none;
  --component-button-sm-max-width: none;
  --component-button-sm-min-height: 34px;
  --component-button-sm-font-family: var(--semantic-typography-label-sm-font-family);
  --component-button-sm-font-size: var(--semantic-typography-label-sm-font-size);
  --component-button-sm-font-weight: var(--semantic-typography-label-sm-font-weight);
  --component-button-sm-line-height: var(--semantic-typography-label-sm-line-height);
  --component-button-sm-letter-spacing: var(--semantic-typography-label-sm-letter-spacing);
  --component-button-sm-text-transform: var(--semantic-typography-label-sm-text-transform);
  --component-badge-info-subtle-background: var(--semantic-color-surface-info-subtle);
  --component-badge-info-subtle-text-color: var(--semantic-color-text-info-bold);
  --component-badge-info-subtle-border-color: transparent;
  --component-badge-info-bold-background: var(--semantic-color-surface-info-bold);
  --component-badge-info-bold-text-color: var(--semantic-color-text-info-contrast);
  --component-badge-info-bold-border-color: transparent;
  --component-badge-info-outline-background: transparent;
  --component-badge-info-outline-text-color: var(--semantic-color-text-info-default);
  --component-badge-info-outline-border-color: var(--semantic-color-border-info-default);
  --component-badge-error-subtle-background: var(--semantic-color-surface-error-subtle);
  --component-badge-error-subtle-text-color: var(--semantic-color-text-error-bold);
  --component-badge-error-subtle-border-color: transparent;
  --component-badge-error-bold-background: var(--semantic-color-surface-error-default);
  --component-badge-error-bold-text-color: var(--semantic-color-text-error-contrast);
  --component-badge-error-bold-border-color: transparent;
  --component-badge-error-outline-background: transparent;
  --component-badge-error-outline-text-color: var(--semantic-color-text-error-default);
  --component-badge-error-outline-border-color: var(--semantic-color-border-error-default);
  --component-badge-neutral-subtle-background: var(--semantic-color-surface-neutral-subtle);
  --component-badge-neutral-subtle-text-color: var(--semantic-color-text-neutral-subtle);
  --component-badge-neutral-subtle-border-color: transparent;
  --component-badge-neutral-bold-background: var(--semantic-color-surface-neutral-bold);
  --component-badge-neutral-bold-text-color: var(--semantic-color-text-neutral-contrast);
  --component-badge-neutral-bold-border-color: transparent;
  --component-badge-neutral-outline-background: transparent;
  --component-badge-neutral-outline-text-color: var(--semantic-color-text-neutral-default);
  --component-badge-neutral-outline-border-color: var(--semantic-color-border-neutral-bold);
  --component-badge-primary-subtle-background: var(--semantic-color-surface-accent-subtle);
  --component-badge-primary-subtle-text-color: var(--semantic-color-text-primary-default);
  --component-badge-primary-subtle-border-color: transparent;
  --component-badge-primary-bold-background: var(--semantic-color-surface-primary-bold);
  --component-badge-primary-bold-text-color: var(--semantic-color-text-neutral-contrast);
  --component-badge-primary-bold-border-color: transparent;
  --component-badge-primary-outline-background: transparent;
  --component-badge-primary-outline-text-color: var(--semantic-color-text-primary-default);
  --component-badge-primary-outline-border-color: var(--semantic-color-border-primary-default);
  --component-badge-success-subtle-background: var(--semantic-color-surface-success-subtle);
  --component-badge-success-subtle-text-color: var(--semantic-color-text-success-bold);
  --component-badge-success-subtle-border-color: transparent;
  --component-badge-success-bold-background: var(--semantic-color-surface-success-bold);
  --component-badge-success-bold-text-color: var(--semantic-color-text-success-contrast);
  --component-badge-success-bold-border-color: transparent;
  --component-badge-success-outline-background: transparent;
  --component-badge-success-outline-text-color: var(--semantic-color-text-success-default);
  --component-badge-success-outline-border-color: var(--semantic-color-border-success-default);
  --component-badge-warning-subtle-background: var(--semantic-color-surface-warning-subtle);
  --component-badge-warning-subtle-text-color: var(--semantic-color-text-warning-bold);
  --component-badge-warning-subtle-border-color: transparent;
  --component-badge-warning-bold-background: var(--semantic-color-surface-warning-bold);
  --component-badge-warning-bold-text-color: var(--semantic-color-text-warning-contrast);
  --component-badge-warning-bold-border-color: transparent;
  --component-badge-warning-outline-background: transparent;
  --component-badge-warning-outline-text-color: var(--semantic-color-text-warning-default);
  --component-badge-warning-outline-border-color: var(--semantic-color-border-warning-bold);
  --component-badge-tertiary-subtle-background: var(--semantic-color-surface-accent-subtle);
  --component-badge-tertiary-subtle-text-color: var(--semantic-color-text-accent-bold);
  --component-badge-tertiary-subtle-border-color: transparent;
  --component-badge-tertiary-bold-background: var(--semantic-color-surface-accent-default);
  --component-badge-tertiary-bold-text-color: var(--semantic-color-text-accent-bold);
  --component-badge-tertiary-bold-border-color: transparent;
  --component-badge-tertiary-outline-background: transparent;
  --component-badge-tertiary-outline-text-color: var(--semantic-color-text-accent-bold);
  --component-badge-tertiary-outline-border-color: var(--semantic-color-border-accent-default);
  --component-badge-secondary-subtle-background: var(--semantic-color-surface-secondary-subtle);
  --component-badge-secondary-subtle-text-color: var(--semantic-color-text-secondary-bold);
  --component-badge-secondary-subtle-border-color: transparent;
  --component-badge-secondary-bold-background: var(--semantic-color-surface-secondary-default);
  --component-badge-secondary-bold-text-color: var(--semantic-color-text-secondary-bold);
  --component-badge-secondary-bold-border-color: transparent;
  --component-badge-secondary-outline-background: transparent;
  --component-badge-secondary-outline-text-color: var(--semantic-color-text-secondary-default);
  --component-badge-secondary-outline-border-color: var(--semantic-color-border-secondary-bold);
  --component-badge-md-min-width: none;
  --component-badge-md-max-width: none;
  --component-badge-md-min-height: 30px;
  --component-badge-sm-padding-x: var(--semantic-spacing-inset-md);
  --component-badge-sm-padding-y: var(--semantic-spacing-inset-xs);
  --component-badge-sm-border-radius: var(--primitive-radius-2xl);
  --component-badge-sm-icon-size: var(--primitive-icon-size-xs);
  --component-badge-sm-icon-stroke: var(--primitive-icon-stroke-regular);
  --component-badge-sm-gap: var(--semantic-spacing-inline-xs);
  --component-badge-sm-min-width: none;
  --component-badge-sm-max-width: none;
  --component-badge-sm-min-height: 26px;
  --component-badge-sm-font-family: var(--semantic-typography-label-xs-font-family);
  --component-badge-sm-font-size: var(--semantic-typography-label-xs-font-size);
  --component-badge-sm-font-weight: var(--semantic-typography-label-xs-font-weight);
  --component-badge-sm-line-height: var(--semantic-typography-label-xs-line-height);
  --component-badge-sm-letter-spacing: var(--semantic-typography-label-xs-letter-spacing);
  --component-badge-sm-text-transform: var(--semantic-typography-label-xs-text-transform);
  --component-text-input-default-background: var(--semantic-color-surface-neutral-subtle);
  --component-text-input-default-background-focus: var(--semantic-color-surface-neutral-subtle);
  --component-text-input-default-background-error: var(--semantic-color-surface-neutral-subtle);
  --component-text-input-default-background-disabled: var(--semantic-color-surface-neutral-subtle);
  --component-text-input-default-text-color: var(--semantic-color-text-neutral-default);
  --component-text-input-default-text-color-focus: var(--semantic-color-text-neutral-default);
  --component-text-input-default-text-color-error: var(--semantic-color-text-error-default);
  --component-text-input-default-text-color-disabled: var(--semantic-color-text-disabled);
  --component-text-input-default-placeholder-color: var(--semantic-color-text-neutral-subtle);
  --component-text-input-default-placeholder-color-focus: var(--semantic-color-text-neutral-subtle);
  --component-text-input-default-placeholder-color-error: var(--semantic-color-text-neutral-subtle);
  --component-text-input-default-placeholder-color-disabled: var(--semantic-color-text-disabled);
  --component-text-input-default-border-color: var(--semantic-color-border-neutral-bold);
  --component-text-input-default-border-color-focus: var(--semantic-color-border-primary-default);
  --component-text-input-default-border-color-error: var(--semantic-color-border-error-default);
  --component-text-input-default-border-color-disabled: var(--semantic-color-border-disabled);
  --component-text-input-md-min-width: none;
  --component-text-input-md-max-width: 100%;
  --component-text-input-md-min-height: 37px;
  --component-text-input-sm-padding-x: var(--semantic-spacing-inset-md);
  --component-text-input-sm-padding-y: var(--semantic-spacing-inset-xs);
  --component-text-input-sm-border-radius: var(--primitive-radius-sm);
  --component-text-input-sm-icon-size: var(--primitive-icon-size-xs);
  --component-text-input-sm-icon-stroke: var(--primitive-icon-stroke-regular);
  --component-text-input-sm-gap: var(--semantic-spacing-inline-xs);
  --component-text-input-sm-min-width: none;
  --component-text-input-sm-max-width: 100%;
  --component-text-input-sm-min-height: 30px;
  --component-text-input-sm-font-family: var(--semantic-typography-body-sm-font-family);
  --component-text-input-sm-font-size: var(--semantic-typography-body-sm-font-size);
  --component-text-input-sm-font-weight: var(--semantic-typography-body-sm-font-weight);
  --component-text-input-sm-line-height: var(--semantic-typography-body-sm-line-height);
  --component-text-input-sm-letter-spacing: var(--semantic-typography-body-sm-letter-spacing);
  --component-text-input-sm-text-transform: var(--semantic-typography-body-sm-text-transform);
  --component-card-default-background: var(--semantic-color-contrast-light);
  --component-card-default-border-color: var(--semantic-color-border-hairline);
  --component-card-default-header-text-color: var(--semantic-color-text-accent-bold);
  --component-card-default-body-text-color: var(--semantic-color-text-neutral-default);
  --component-card-elevated-background: var(--semantic-color-contrast-light);
  --component-card-elevated-border-color: transparent;
  --component-card-elevated-header-text-color: var(--semantic-color-text-neutral-bold);
  --component-card-elevated-body-text-color: var(--semantic-color-text-neutral-default);
  --component-card-elevated-shadow: var(--primitive-shadow-elevation-3);
  --component-card-interactive-background: var(--semantic-color-surface-neutral-subtle);
  --component-card-interactive-background-hover: var(--semantic-color-contrast-light);
  --component-card-interactive-background-active: var(--semantic-color-surface-primary-default);
  --component-card-interactive-background-disabled: var(--semantic-color-surface-disabled);
  --component-card-interactive-border-color: var(--semantic-color-border-neutral-default);
  --component-card-interactive-border-color-hover: var(--semantic-color-border-primary-default);
  --component-card-interactive-border-color-active: var(--semantic-color-border-primary-bold);
  --component-card-interactive-border-color-disabled: var(--semantic-color-border-disabled);
  --component-card-interactive-header-text-color: var(--semantic-color-text-accent-bold);
  --component-card-interactive-header-text-color-hover: var(--semantic-color-text-primary-default);
  --component-card-interactive-header-text-color-active: var(--semantic-color-text-neutral-contrast);
  --component-card-interactive-header-text-color-disabled: var(--semantic-color-text-disabled);
  --component-card-interactive-body-text-color: var(--semantic-color-text-accent-bold);
  --component-card-interactive-body-text-color-hover: var(--semantic-color-text-primary-default);
  --component-card-interactive-body-text-color-active: var(--semantic-color-text-neutral-contrast);
  --component-card-interactive-body-text-color-disabled: var(--semantic-color-text-disabled);
  --component-card-interactive-shadow: var(--primitive-shadow-elevation-1);
  --component-card-interactive-shadow-hover: var(--primitive-shadow-elevation-2);
  --component-card-interactive-shadow-active: var(--primitive-shadow-elevation-1);
  --component-card-interactive-shadow-disabled: none;
  --component-card-lg-padding: var(--semantic-spacing-inset-xl);
  --component-card-lg-border-radius: var(--primitive-radius-md);
  --component-card-lg-section-gap: var(--semantic-spacing-stack-lg);
  --component-card-lg-body-text-style: var(--semantic-typography-body-lg);
  --component-card-sm-padding: var(--semantic-spacing-inset-lg);
  --component-card-sm-border-radius: var(--primitive-radius-md);
  --component-card-sm-section-gap: var(--semantic-spacing-stack-sm);
  --component-card-sm-header-text-style: var(--semantic-typography-heading-h5);
  --component-card-sm-body-text-style: var(--semantic-typography-body-sm);
  --component-checkbox-default-container-background: var(--semantic-color-surface-neutral-default);
  --component-checkbox-default-container-border-color: var(--semantic-color-border-neutral-default);
  --component-checkbox-default-indicator-color: var(--semantic-color-contrast-light);
  --component-checkbox-default-label-color: var(--semantic-color-text-neutral-bold);
  --component-checkbox-default-container-background-hover: var(--semantic-color-surface-neutral-default);
  --component-checkbox-default-container-border-color-hover: var(--semantic-color-border-primary-default);
  --component-checkbox-default-indicator-color-hover: var(--semantic-color-contrast-light);
  --component-checkbox-default-container-background-checked: var(--semantic-color-interactive-primary-default);
  --component-checkbox-default-container-border-color-checked: var(--semantic-color-interactive-primary-default);
  --component-checkbox-default-indicator-color-checked: var(--semantic-color-contrast-light);
  --component-checkbox-default-container-background-disabled: var(--semantic-color-surface-disabled);
  --component-checkbox-default-container-border-color-disabled: var(--semantic-color-border-disabled);
  --component-checkbox-default-indicator-color-disabled: var(--semantic-color-text-disabled);
  --component-checkbox-default-label-color-disabled: var(--semantic-color-text-disabled);
  --component-checkbox-md-container-size: 24px;
  --component-checkbox-md-indicator-size: var(--primitive-icon-size-sm);
  --component-checkbox-md-gap: var(--semantic-spacing-inline-md);
  --component-checkbox-md-font-family: var(--semantic-typography-body-md-font-family);
  --component-checkbox-md-font-size: var(--semantic-typography-body-md-font-size);
  --component-checkbox-md-font-weight: var(--semantic-typography-body-md-font-weight);
  --component-checkbox-md-line-height: var(--semantic-typography-body-md-line-height);
  --component-checkbox-md-letter-spacing: var(--semantic-typography-body-md-letter-spacing);
  --component-checkbox-md-text-transform: var(--semantic-typography-body-md-text-transform);
  --component-checkbox-sm-container-size: 18px;
  --component-checkbox-sm-indicator-size: var(--primitive-icon-size-xs);
  --component-checkbox-sm-gap: var(--semantic-spacing-inline-sm);
  --component-checkbox-sm-font-family: var(--semantic-typography-body-sm-font-family);
  --component-checkbox-sm-font-size: var(--semantic-typography-body-sm-font-size);
  --component-checkbox-sm-font-weight: var(--semantic-typography-body-sm-font-weight);
  --component-checkbox-sm-line-height: var(--semantic-typography-body-sm-line-height);
  --component-checkbox-sm-letter-spacing: var(--semantic-typography-body-sm-letter-spacing);
  --component-checkbox-sm-text-transform: var(--semantic-typography-body-sm-text-transform);
  --component-radio-default-container-background: var(--semantic-color-surface-neutral-default);
  --component-radio-default-container-border-color: var(--semantic-color-border-neutral-default);
  --component-radio-default-indicator-color: var(--semantic-color-contrast-light);
  --component-radio-default-label-color: var(--semantic-color-text-neutral-bold);
  --component-radio-default-container-background-hover: var(--semantic-color-surface-neutral-default);
  --component-radio-default-container-border-color-hover: var(--semantic-color-border-primary-default);
  --component-radio-default-indicator-color-hover: var(--semantic-color-contrast-light);
  --component-radio-default-container-background-checked: var(--semantic-color-interactive-primary-default);
  --component-radio-default-container-border-color-checked: var(--semantic-color-interactive-primary-default);
  --component-radio-default-indicator-color-checked: var(--semantic-color-contrast-light);
  --component-radio-default-container-background-disabled: var(--semantic-color-surface-disabled);
  --component-radio-default-container-border-color-disabled: var(--semantic-color-border-disabled);
  --component-radio-default-indicator-color-disabled: var(--semantic-color-text-disabled);
  --component-radio-default-label-color-disabled: var(--semantic-color-text-disabled);
  --component-radio-md-container-size: 20px;
  --component-radio-md-indicator-size: 8px;
  --component-radio-md-gap: var(--semantic-spacing-inline-sm);
  --component-radio-md-font-family: var(--semantic-typography-body-md-font-family);
  --component-radio-md-font-size: var(--semantic-typography-body-md-font-size);
  --component-radio-md-font-weight: var(--semantic-typography-body-md-font-weight);
  --component-radio-md-line-height: var(--semantic-typography-body-md-line-height);
  --component-radio-md-letter-spacing: var(--semantic-typography-body-md-letter-spacing);
  --component-radio-md-text-transform: var(--semantic-typography-body-md-text-transform);
  --component-radio-sm-container-size: 16px;
  --component-radio-sm-indicator-size: 6px;
  --component-radio-sm-gap: var(--semantic-spacing-inline-sm);
  --component-radio-sm-font-family: var(--semantic-typography-body-sm-font-family);
  --component-radio-sm-font-size: var(--semantic-typography-body-sm-font-size);
  --component-radio-sm-font-weight: var(--semantic-typography-body-sm-font-weight);
  --component-radio-sm-line-height: var(--semantic-typography-body-sm-line-height);
  --component-radio-sm-letter-spacing: var(--semantic-typography-body-sm-letter-spacing);
  --component-radio-sm-text-transform: var(--semantic-typography-body-sm-text-transform);
  --component-switch-default-track-background: var(--semantic-color-surface-neutral-default);
  --component-switch-default-thumb-color: var(--semantic-color-interactive-primary-hover);
  --component-switch-default-label-color: var(--semantic-color-text-neutral-bold);
  --component-switch-default-track-border-color: var(--semantic-color-border-neutral-default);
  --component-switch-default-track-background-hover: var(--semantic-color-surface-neutral-default);
  --component-switch-default-track-border-color-hover: var(--semantic-color-border-primary-default);
  --component-switch-default-track-background-checked: var(--semantic-color-interactive-primary-active);
  --component-switch-default-track-border-color-checked: var(--semantic-color-border-primary-bold);
  --component-switch-default-track-background-disabled: var(--semantic-color-surface-disabled);
  --component-switch-default-track-border-color-disabled: var(--semantic-color-border-disabled);
  --component-switch-default-thumb-color-disabled: var(--semantic-color-text-disabled);
  --component-switch-default-label-color-disabled: var(--semantic-color-text-disabled);
  --component-switch-default-track-background-checked-success: var(--semantic-color-surface-success-subtle);
  --component-switch-default-track-background-checked-destructive: var(--semantic-color-surface-error-subtle);
  --component-switch-md-track-width: 48px;
  --component-switch-md-track-height: 24px;
  --component-switch-md-thumb-size: 16px;
  --component-switch-md-gap: var(--semantic-spacing-inline-md);
  --component-switch-md-font-family: var(--semantic-typography-body-md-font-family);
  --component-switch-md-font-size: var(--semantic-typography-body-md-font-size);
  --component-switch-md-font-weight: var(--semantic-typography-body-md-font-weight);
  --component-switch-md-line-height: var(--semantic-typography-body-md-line-height);
  --component-switch-md-letter-spacing: var(--semantic-typography-body-md-letter-spacing);
  --component-switch-md-text-transform: var(--semantic-typography-body-md-text-transform);
  --component-switch-sm-track-width: 36px;
  --component-switch-sm-track-height: 18px;
  --component-switch-sm-thumb-size: 12px;
  --component-switch-sm-gap: var(--semantic-spacing-inline-sm);
  --component-switch-sm-font-family: var(--semantic-typography-body-sm-font-family);
  --component-switch-sm-font-size: var(--semantic-typography-body-sm-font-size);
  --component-switch-sm-font-weight: var(--semantic-typography-body-sm-font-weight);
  --component-switch-sm-line-height: var(--semantic-typography-body-sm-line-height);
  --component-switch-sm-letter-spacing: var(--semantic-typography-body-sm-letter-spacing);
  --component-switch-sm-text-transform: var(--semantic-typography-body-sm-text-transform);
  --component-slider-default-track-background: var(--semantic-color-surface-neutral-subtle);
  --component-slider-default-track-background-hover: var(--semantic-color-surface-neutral-subtle);
  --component-slider-default-track-background-active: var(--semantic-color-surface-neutral-subtle);
  --component-slider-default-track-background-disabled: var(--semantic-color-surface-disabled);
  --component-slider-default-track-fill-color: var(--semantic-color-interactive-primary-default);
  --component-slider-default-track-fill-color-hover: var(--semantic-color-interactive-primary-hover);
  --component-slider-default-track-fill-color-active: var(--semantic-color-interactive-primary-active);
  --component-slider-default-track-fill-color-disabled: var(--semantic-color-surface-disabled);
  --component-slider-default-track-border-color: transparent;
  --component-slider-default-track-border-color-disabled: var(--semantic-color-border-disabled);
  --component-slider-default-thumb-color: var(--semantic-color-contrast-light);
  --component-slider-default-thumb-color-disabled: var(--semantic-color-text-disabled);
  --component-slider-md-track-height: 28px;
  --component-slider-md-thumb-size: 18px;
  --component-slider-sm-track-height: 20px;
  --component-slider-sm-thumb-size: 12px;
  --component-tooltip-default-background: var(--semantic-color-surface-neutral-bold);
  --component-tooltip-default-text-color: var(--semantic-color-text-neutral-contrast);
  --component-tooltip-default-shadow: var(--primitive-shadow-elevation-3);
  --component-text-area-default-background: var(--semantic-color-surface-neutral-subtle);
  --component-text-area-default-background-focus: var(--semantic-color-surface-neutral-subtle);
  --component-text-area-default-background-error: var(--semantic-color-surface-neutral-subtle);
  --component-text-area-default-background-disabled: var(--semantic-color-surface-disabled);
  --component-text-area-default-text-color: var(--semantic-color-text-neutral-bold);
  --component-text-area-default-text-color-focus: var(--semantic-color-text-neutral-bold);
  --component-text-area-default-text-color-error: var(--semantic-color-text-error-default);
  --component-text-area-default-text-color-disabled: var(--semantic-color-text-disabled);
  --component-text-area-default-placeholder-color: var(--semantic-color-text-neutral-subtle);
  --component-text-area-default-placeholder-color-focus: var(--semantic-color-text-neutral-default);
  --component-text-area-default-placeholder-color-error: var(--semantic-color-text-neutral-subtle);
  --component-text-area-default-placeholder-color-disabled: var(--semantic-color-text-disabled);
  --component-text-area-default-border-color: var(--semantic-color-border-neutral-bold);
  --component-text-area-default-border-color-focus: var(--semantic-color-border-primary-default);
  --component-text-area-default-border-color-error: var(--semantic-color-border-error-default);
  --component-text-area-default-border-color-disabled: var(--semantic-color-border-disabled);
  --component-text-area-sm-padding-x: var(--semantic-spacing-inset-lg);
  --component-text-area-sm-padding-y: var(--semantic-spacing-inset-xs);
  --component-text-area-sm-border-radius: var(--primitive-radius-md);
  --component-text-area-sm-min-width: none;
  --component-text-area-sm-max-width: 100%;
  --component-text-area-sm-min-height: 30px;
  --component-text-area-sm-font-family: var(--semantic-typography-body-sm-font-family);
  --component-text-area-sm-font-size: var(--semantic-typography-body-sm-font-size);
  --component-text-area-sm-font-weight: var(--semantic-typography-body-sm-font-weight);
  --component-text-area-sm-line-height: var(--semantic-typography-body-sm-line-height);
  --component-text-area-sm-letter-spacing: var(--semantic-typography-body-sm-letter-spacing);
  --component-text-area-sm-text-transform: var(--semantic-typography-body-sm-text-transform);
  --component-text-area-md-min-width: none;
  --component-text-area-md-max-width: 100%;
  --component-text-area-md-min-height: 37px;
  --component-avatar-neutral-background: var(--semantic-color-surface-neutral-default);
  --component-avatar-neutral-text-color: var(--semantic-color-text-neutral-bold);
  --component-avatar-neutral-border-color: transparent;
  --component-avatar-primary-background: var(--semantic-color-interactive-primary-default);
  --component-avatar-primary-text-color: var(--semantic-color-text-neutral-contrast);
  --component-avatar-primary-border-color: transparent;
  --component-avatar-secondary-background: var(--semantic-color-surface-accent-bold);
  --component-avatar-secondary-text-color: var(--semantic-color-text-neutral-default);
  --component-avatar-secondary-border-color: transparent;
  --component-avatar-lg-size: 48px;
  --component-avatar-lg-font-family: var(--semantic-typography-label-lg-font-family);
  --component-avatar-lg-font-size: var(--semantic-typography-label-lg-font-size);
  --component-avatar-lg-font-weight: var(--semantic-typography-label-lg-font-weight);
  --component-avatar-lg-line-height: var(--semantic-typography-label-lg-line-height);
  --component-avatar-lg-letter-spacing: var(--semantic-typography-label-lg-letter-spacing);
  --component-avatar-lg-text-transform: var(--semantic-typography-label-lg-text-transform);
  --component-avatar-md-size: 40px;
  --component-avatar-md-font-family: var(--semantic-typography-label-md-font-family);
  --component-avatar-md-font-size: var(--semantic-typography-label-md-font-size);
  --component-avatar-md-font-weight: var(--semantic-typography-label-md-font-weight);
  --component-avatar-md-line-height: var(--semantic-typography-label-md-line-height);
  --component-avatar-md-letter-spacing: var(--semantic-typography-label-md-letter-spacing);
  --component-avatar-md-text-transform: var(--semantic-typography-label-md-text-transform);
  --component-avatar-sm-size: 28px;
  --component-avatar-sm-font-family: var(--semantic-typography-label-xs-font-family);
  --component-avatar-sm-font-size: var(--semantic-typography-label-xs-font-size);
  --component-avatar-sm-font-weight: var(--semantic-typography-label-xs-font-weight);
  --component-avatar-sm-line-height: var(--semantic-typography-label-xs-line-height);
  --component-avatar-sm-letter-spacing: var(--semantic-typography-label-xs-letter-spacing);
  --component-avatar-sm-text-transform: var(--semantic-typography-label-xs-text-transform);
  --component-avatar-xl-size: 64px;
  --component-avatar-xl-font-family: var(--semantic-typography-label-lg-font-family);
  --component-avatar-xl-font-size: var(--semantic-typography-label-lg-font-size);
  --component-avatar-xl-font-weight: var(--semantic-typography-label-lg-font-weight);
  --component-avatar-xl-line-height: var(--semantic-typography-label-lg-line-height);
  --component-avatar-xl-letter-spacing: var(--semantic-typography-label-lg-letter-spacing);
  --component-avatar-xl-text-transform: var(--semantic-typography-label-lg-text-transform);
  --component-divider-strong-border-color: var(--semantic-color-border-primary-default);
  --component-divider-strong-border-width: var(--primitive-border-width-medium);
  --component-divider-subtle-border-color: var(--semantic-color-border-neutral-default);
  --component-divider-subtle-border-width: var(--primitive-border-width-thin);
  --component-tab-bar-container-background: var(--semantic-color-surface-neutral-subtle);
  --component-tab-bar-tab-background: transparent;
  --component-tab-bar-tab-background-hover: var(--semantic-color-surface-neutral-default);
  --component-tab-bar-tab-background-active: var(--semantic-color-surface-neutral-bold);
  --component-tab-bar-tab-text-color: var(--semantic-color-text-neutral-default);
  --component-tab-bar-tab-text-color-hover: var(--semantic-color-text-neutral-bold);
  --component-tab-bar-tab-text-color-active: var(--semantic-color-text-neutral-contrast);
  --component-tab-bar-sm-container-padding: var(--semantic-spacing-inset-md);
  --component-tab-bar-sm-container-border-radius: var(--primitive-radius-md);
  --component-tab-bar-sm-container-gap: var(--semantic-spacing-inline-sm);
  --component-tab-bar-sm-tab-padding-x: var(--semantic-spacing-inset-md);
  --component-tab-bar-sm-tab-padding-y: var(--semantic-spacing-inset-sm);
  --component-tab-bar-sm-tab-border-radius: var(--primitive-radius-sm);
  --component-tab-bar-sm-font-family: var(--semantic-typography-label-sm-font-family);
  --component-tab-bar-sm-font-size: var(--semantic-typography-label-sm-font-size);
  --component-tab-bar-sm-font-weight: var(--semantic-typography-label-sm-font-weight);
  --component-tab-bar-sm-line-height: var(--semantic-typography-label-sm-line-height);
  --component-tab-bar-sm-letter-spacing: var(--semantic-typography-label-sm-letter-spacing);
  --component-tab-bar-sm-text-transform: var(--semantic-typography-label-sm-text-transform);
  --component-tab-bar-md-container-padding: var(--semantic-spacing-inset-lg);
  --component-tab-bar-md-container-border-radius: var(--primitive-radius-md);
  --component-tab-bar-md-container-gap: var(--semantic-spacing-inline-xs);
  --component-tab-bar-md-tab-padding-x: var(--semantic-spacing-inset-lg);
  --component-tab-bar-md-tab-padding-y: var(--semantic-spacing-inset-sm);
  --component-tab-bar-md-tab-border-radius: var(--primitive-radius-sm);
  --component-tab-bar-md-font-family: var(--semantic-typography-label-md-font-family);
  --component-tab-bar-md-font-size: var(--semantic-typography-label-md-font-size);
  --component-tab-bar-md-font-weight: var(--semantic-typography-label-md-font-weight);
  --component-tab-bar-md-line-height: var(--semantic-typography-label-md-line-height);
  --component-tab-bar-md-letter-spacing: var(--semantic-typography-label-md-letter-spacing);
  --component-tab-bar-md-text-transform: var(--semantic-typography-label-md-text-transform);
  --component-select-trigger-background: var(--semantic-color-surface-neutral-subtle);
  --component-select-trigger-background-hover: var(--semantic-color-surface-neutral-subtle);
  --component-select-trigger-background-open: var(--semantic-color-surface-neutral-subtle);
  --component-select-trigger-background-disabled: var(--semantic-color-surface-disabled);
  --component-select-trigger-text-color: var(--semantic-color-text-neutral-bold);
  --component-select-trigger-text-color-hover: var(--semantic-color-text-neutral-bold);
  --component-select-trigger-text-color-open: var(--semantic-color-text-neutral-bold);
  --component-select-trigger-text-color-disabled: var(--semantic-color-text-disabled);
  --component-select-trigger-placeholder-color: var(--semantic-color-text-neutral-subtle);
  --component-select-trigger-placeholder-color-hover: var(--semantic-color-text-neutral-subtle);
  --component-select-trigger-placeholder-color-open: var(--semantic-color-text-neutral-default);
  --component-select-trigger-placeholder-color-disabled: var(--semantic-color-text-disabled);
  --component-select-trigger-border-color: var(--semantic-color-border-neutral-default);
  --component-select-trigger-border-color-hover: var(--semantic-color-border-neutral-bold);
  --component-select-trigger-border-color-open: var(--semantic-color-border-primary-default);
  --component-select-trigger-border-color-disabled: var(--semantic-color-border-disabled);
  --component-select-trigger-icon-color: var(--semantic-color-text-neutral-subtle);
  --component-select-trigger-icon-color-hover: var(--semantic-color-text-neutral-default);
  --component-select-trigger-icon-color-open: var(--semantic-color-text-neutral-bold);
  --component-select-trigger-icon-color-disabled: var(--semantic-color-text-disabled);
  --component-select-panel-background: var(--semantic-color-surface-neutral-subtle);
  --component-select-panel-border-color: var(--semantic-color-border-neutral-default);
  --component-select-option-background: transparent;
  --component-select-option-background-hover: var(--semantic-color-surface-neutral-default);
  --component-select-option-background-selected: var(--semantic-color-interactive-primary-default);
  --component-select-option-background-disabled: transparent;
  --component-select-option-text-color: var(--semantic-color-text-neutral-default);
  --component-select-option-text-color-hover: var(--semantic-color-text-primary-bold);
  --component-select-option-text-color-selected: var(--semantic-color-text-neutral-contrast);
  --component-select-option-text-color-disabled: var(--semantic-color-text-disabled);
  --component-select-sm-trigger-padding-x: var(--semantic-spacing-inset-lg);
  --component-select-sm-trigger-padding-y: var(--semantic-spacing-inset-xs);
  --component-select-sm-trigger-icon-size: var(--primitive-icon-size-xs);
  --component-select-sm-font-family: var(--semantic-typography-body-sm-font-family);
  --component-select-sm-font-size: var(--semantic-typography-body-sm-font-size);
  --component-select-sm-font-weight: var(--semantic-typography-body-sm-font-weight);
  --component-select-sm-line-height: var(--semantic-typography-body-sm-line-height);
  --component-select-sm-letter-spacing: var(--semantic-typography-body-sm-letter-spacing);
  --component-select-sm-text-transform: var(--semantic-typography-body-sm-text-transform);
  --component-select-sm-option-padding-x: var(--semantic-spacing-inset-md);
  --component-select-sm-option-padding-y: var(--semantic-spacing-inset-xs);
  --component-select-md-trigger-padding-x: var(--semantic-spacing-inset-lg);
  --component-select-md-trigger-padding-y: var(--semantic-spacing-inset-sm);
  --component-select-md-trigger-icon-size: var(--primitive-icon-size-sm);
  --component-select-md-font-family: var(--semantic-typography-body-md-font-family);
  --component-select-md-font-size: var(--semantic-typography-body-md-font-size);
  --component-select-md-font-weight: var(--semantic-typography-body-md-font-weight);
  --component-select-md-line-height: var(--semantic-typography-body-md-line-height);
  --component-select-md-letter-spacing: var(--semantic-typography-body-md-letter-spacing);
  --component-select-md-text-transform: var(--semantic-typography-body-md-text-transform);
  --component-select-md-option-padding-x: var(--semantic-spacing-inset-md);
  --component-select-md-option-padding-y: var(--semantic-spacing-inset-sm);
  --component-tabs-sm-font-family: var(--semantic-typography-label-sm-font-family);
  --component-tabs-sm-font-size: var(--semantic-typography-label-sm-font-size);
  --component-tabs-sm-font-weight: var(--semantic-typography-label-sm-font-weight);
  --component-tabs-sm-line-height: var(--semantic-typography-label-sm-line-height);
  --component-tabs-sm-letter-spacing: var(--semantic-typography-label-sm-letter-spacing);
  --component-tabs-sm-text-transform: var(--semantic-typography-label-sm-text-transform);
  --component-tabs-sm-tab-padding-x: var(--semantic-spacing-inset-sm);
  --component-tabs-sm-tab-padding-y: var(--semantic-spacing-inset-xs);
  --component-tabs-sm-container-padding: var(--semantic-spacing-inset-xs);
  --component-tabs-sm-container-border-radius: var(--primitive-radius-md);
  --component-tabs-tab-background: transparent;
  --component-tabs-tab-text-color: var(--semantic-color-text-neutral-default);
  --component-tabs-tab-background-hover: var(--semantic-color-surface-neutral-default);
  --component-tabs-tab-text-color-hover: var(--semantic-color-text-neutral-bold);
  --component-tabs-tab-background-active: var(--semantic-color-surface-neutral-bold);
  --component-tabs-tab-text-color-active: var(--semantic-color-text-neutral-contrast);
  --component-tabs-container-background: var(--semantic-color-surface-neutral-subtle);
  --primitive-color-brand-gold: #A8863F;
  --primitive-color-ai-50: #FEF2F6;
  --primitive-color-ai-100: #FFE4ED;
  --primitive-color-ai-200: #FECCDB;
  --primitive-color-ai-300: #F3AAC2;
  --primitive-color-ai-400: #C7678A;
  --primitive-color-ai-500: #A24368;
  --primitive-color-ai-600: #802B4E;
  --primitive-color-ai-700: #6A213F;
  --primitive-color-ai-800: #531A31;
  --primitive-color-ai-900: #3C1424;
  --primitive-color-ai-950: #260C16;
  --primitive-shadow-ai-overlay: var(--primitive-shadow-elevation-5);
  --primitive-shadow-ai-peak: var(--primitive-shadow-elevation-6);
  --primitive-shadow-glow-teal: 0 6px 22px rgba(0,149,152,.32);
  --primitive-shadow-glow-gold: 0 6px 22px rgba(251,176,69,.38);
  --primitive-shadow-glow-navy: 0 8px 26px rgba(26,151,209,.30);
  --primitive-spacing-7xl: 96px;
  --primitive-spacing-8xl: 128px;
  --primitive-spacing-xs-sm: 0.1875rem;
  --primitive-spacing-sm-md: 0.375rem;
  --primitive-spacing-md-lg: 0.625rem;
  --primitive-spacing-lg-xl: 0.875rem;
  --primitive-spacing-xl-2xl: 1.25rem;
  --primitive-spacing-2xl-3xl: 1.75rem;
  --primitive-spacing-3xl-4xl: 2.5rem;
  --brand-gold: var(--primitive-color-brand-gold);
  --ai-50: var(--primitive-color-ai-50);
  --ai-100: var(--primitive-color-ai-100);
  --ai-200: var(--primitive-color-ai-200);
  --ai-300: var(--primitive-color-ai-300);
  --ai-400: var(--primitive-color-ai-400);
  --ai-500: var(--primitive-color-ai-500);
  --ai-600: var(--primitive-color-ai-600);
  --ai-700: var(--primitive-color-ai-700);
  --ai-800: var(--primitive-color-ai-800);
  --ai-900: var(--primitive-color-ai-900);
  --ai-950: var(--primitive-color-ai-950);
  --shadow-e0: none;
  --shadow-e1: var(--primitive-shadow-elevation-1);
  --shadow-e2: var(--primitive-shadow-elevation-2);
  --shadow-e3: var(--primitive-shadow-elevation-3);
  --shadow-e4: var(--primitive-shadow-elevation-4);
  --shadow-ai-overlay: var(--primitive-shadow-ai-overlay);
  --shadow-ai-peak: var(--primitive-shadow-ai-peak);
  --glow-teal: var(--primitive-shadow-glow-teal);
  --glow-gold: var(--primitive-shadow-glow-gold);
  --glow-navy: var(--primitive-shadow-glow-navy);
  --space-7xl: var(--primitive-spacing-7xl);
  --space-8xl: var(--primitive-spacing-8xl);
  --font-display: 'Newsreader', Georgia, serif;
  --font-sans: 'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', system-ui, sans-serif;
  --font-mono: 'DM Mono', ui-monospace, Menlo, monospace;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --text-display-l-size: clamp(45.46px, 39.77px + 1.459vw, 58.45px);
  --text-display-size: clamp(40.41px, 35.35px + 1.297vw, 51.96px);
  --text-display-s-size: clamp(35.92px, 31.42px + 1.153vw, 46.18px);
  --text-h1-size: clamp(31.93px, 27.93px + 1.025vw, 41.05px);
  --text-h2-size: clamp(28.38px, 24.83px + 0.911vw, 36.49px);
  --text-h3-size: clamp(25.23px, 22.07px + 0.810vw, 32.44px);
  --text-h4-size: clamp(22.43px, 19.62px + 0.720vw, 28.83px);
  --text-h5-size: clamp(19.93px, 17.44px + 0.640vw, 25.63px);
  --text-eyebrow-size: clamp(12.44px, 10.89px + 0.400vw, 16.00px);
  --text-body-l-size: clamp(15.75px, 13.78px + 0.506vw, 20.25px);
  --text-body-size: clamp(14.00px, 12.25px + 0.449vw, 18.00px);
  --text-body-medium-size: clamp(14.00px, 12.25px + 0.449vw, 18.00px);
  --text-body-semibold-size: clamp(14.00px, 12.25px + 0.449vw, 18.00px);
  --text-caption-size: clamp(12.44px, 10.89px + 0.400vw, 16.00px);
  --text-mono-size: clamp(14.00px, 12.25px + 0.449vw, 18.00px);
  --text-mono-medium-size: clamp(12.44px, 10.89px + 0.400vw, 16.00px);
  --lh-display-l: 1.02;
  --lh-display: 1.05;
  --lh-display-s: 1.08;
  --lh-h1: 1.12;
  --lh-h2: 1.15;
  --lh-h3: 1.2;
  --lh-h4: 1.25;
  --lh-h5: 1.3;
  --lh-eyebrow: 1.3;
  --lh-body-l: 1.55;
  --lh-body: 1.55;
  --lh-body-medium: 1.4;
  --lh-body-semibold: 1.4;
  --lh-caption: 1.4;
  --lh-mono: 1.5;
  --lh-mono-medium: 1.5;
  --ls-display-l: -0.02em;
  --ls-display: -0.015em;
  --ls-display-s: -0.01em;
  --ls-h1: -0.01em;
  --ls-h2: -0.005em;
  --ls-h3: 0;
  --ls-h4: 0;
  --ls-h5: 0;
  --ls-eyebrow: 0.12em;
  --ls-body-l: 0;
  --ls-body: 0;
  --ls-body-medium: 0;
  --ls-body-semibold: 0;
  --ls-caption: 0;
  --ls-mono: 0;
  --ls-mono-medium: 0.02em;
  --shadow-gold-subtle: 0 1px 3px rgba(168,134,63,.28);
  --gradient-brand: linear-gradient(135deg, #007173 0%, #009598 55%, #9ED9D9 100%);
  --gradient-deep: linear-gradient(160deg, #032E42 0%, #004D4E 55%, #007173 100%);
  --gradient-warm: linear-gradient(135deg, #FBB044 0%, #A8863F 100%);
  --gradient-ai: linear-gradient(135deg, #802B4E 0%, #A24368 50%, #009598 125%);
  --gradient-flow-mesh: radial-gradient(120% 120% at 0% 0%, #9ED9D9 0%, rgba(158,217,217,0) 45%), radial-gradient(120% 120% at 100% 0%, #78C5C6 0%, rgba(120,197,198,0) 50%), radial-gradient(140% 140% at 100% 100%, #032E42 0%, rgba(3,46,66,0) 55%), linear-gradient(135deg, #007173, #009598);
  --gradient-scrim: linear-gradient(180deg, rgba(3,46,66,0) 0%, rgba(3,46,66,.72) 100%);
  --touch-target-min: 44px;

  /* ---------- App type scale (fixed, mobile) ----------
     The DS type ramps are fluid: every --text-*-size and
     --primitive-typography-size-* is a clamp() that grows with the
     viewport. On a fixed 393px phone that is the wrong instrument —
     borrowing it is what makes .dp-stepper__eyebrow render at 14.96px.
     These ten steps are fixed, and are the sizes the App already used,
     measured across 2,228 rendered text elements. Minted 2026-08-13. */
  --app-text-10: 10px;      /* badge counts, bottom-nav labels, pills */
  --app-text-12: 12px;      /* metadata, captions, chips — the workhorse */
  --app-text-14: 14px;      /* secondary body and most labels */
  --app-text-15: 15px; /* RETIRED 2026-08-13 — merged to 14 and 16 on review. Kept only so the deprecated --s-15 alias cannot dangle. */      /* long-form body, serif pull-quote — MERGE CANDIDATE */
  --app-text-16: 16px;
  --app-tracking-caps: 0.075em;
  --primitive-typography-line-height-tighter: 1.1;
  --app-z-raised: var(--primitive-z-index-layer-10);
  --app-z-chrome: var(--primitive-z-index-layer-20);
  --app-z-scrim: var(--primitive-z-index-layer-30);
  --app-z-scrim-menu: var(--primitive-z-index-layer-40);
  --app-z-menu: var(--primitive-z-index-layer-50);
  --app-z-nav: var(--primitive-z-index-layer-60);
  --app-z-overlay: var(--primitive-z-index-layer-70);
  --app-z-ghost: var(--primitive-z-index-layer-max);
  --app-nav-height: 141px;
  --app-shell-width: 393px;
      /* The phone's width. iPhone 15/16 logical width, and the frame every App screen is drawn against. */
  --app-shell-height: 852px;
      /* The phone's height, the other half of the 393x852 shell. Screens size against it rather than restating it. */
  --app-radius-group: 14px;
  --app-shadow-sheet-lift: 0 -6px 30px -10px rgba(3,46,66,.35);
      /* primary body, list rows, CTAs */
  --app-text-18: 18px;      /* sheet titles, iOS option rows */
  --app-text-20: 20px; /* RETIRED 2026-08-13 — its only user was .chev, an icon dimension wearing a type token; moved to 22. Kept so --s-20 cannot dangle. */      /* MERGE CANDIDATE — 9 uses against 28 at 22px */
  --app-text-22: 22px;      /* small display: Ask greeting, OTP cells */
  --app-text-28: 28px;      /* display: thread titles, space names */
  --app-text-34: 34px;      /* hero numerals, lock screen */

  --touch-target-android: 48px;
  --touch-target-comfortable: 48px;
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-right: env(safe-area-inset-right, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-left: env(safe-area-inset-left, 0px);
  --nav-w: 248px;
  --semantic-spacing-rhythm-label: var(--primitive-spacing-md);
  --semantic-spacing-rhythm-field: var(--primitive-spacing-lg);
  --semantic-spacing-rhythm-block: var(--primitive-spacing-xl);
  --semantic-spacing-rhythm-title-body: var(--primitive-spacing-xl);
  --semantic-spacing-rhythm-title-body-hero: var(--primitive-spacing-2xl);
  --semantic-spacing-rhythm-inset: var(--primitive-spacing-2xl);
  --semantic-spacing-rhythm-group: var(--primitive-spacing-3xl);
  --component-app-bar-height: 56px;
  --component-tab-bar-height: 88px;
  --primitive-shadow-glow-gold-soft: 0 5px 20px rgba(168,134,63,.20);
  --glow-gold-soft: var(--primitive-shadow-glow-gold-soft);
  --primitive-color-brand-navy: #032E42;
  --semantic-color-text-heading: var(--primitive-color-brand-accent-800);
  --primitive-color-border-hairline: #E2E9EA;
  --semantic-color-border-hairline: var(--primitive-color-border-hairline);
  --semantic-color-surface-wash: #F0F7F7;
  --component-card-default-shadow: var(--primitive-shadow-elevation-1);
  --tm-gold: var(--primitive-color-brand-gold, #A8863F);
  --tm-gold-subtle: #F7F2E9;
  --tm-gold-ink: var(--primitive-color-brand-gold-ink);
  --component-status-available-bg: var(--semantic-color-surface-neutral-subtle);
  --component-status-available-text: var(--semantic-color-text-neutral-subtle);
  --component-status-oncall-bg: var(--semantic-color-surface-primary-subtle);
  --component-status-oncall-text: var(--semantic-color-text-primary-default);
  --component-status-theatre-bg: #FBEFE1;
  --component-status-theatre-text: var(--tm-gold-ink, #866200);
  --component-status-off-bg: #EDF0F0;
  --component-status-off-text: var(--semantic-color-text-neutral-subtle);
  --component-status-dot-online: var(--semantic-color-interactive-primary-default);
  --component-status-dot-syncing: var(--tm-gold, #A8863F);
  --component-status-dot-offline: var(--semantic-color-border-neutral-bold);
  --component-provenance-track: var(--semantic-color-border-hairline, #E2E9EA);
  --component-provenance-new: #8FA3A1;
  --component-provenance-emerging: #8FCFCD;
  --component-provenance-tested: #089799;
  --component-provenance-reviewed: var(--primitive-color-brand-primary-700, #004C4E);
  --component-provenance-canon: var(--tm-gold, #A8863F);
  --component-provenance-new-ink: var(--semantic-color-text-neutral-subtle);
  --component-provenance-emerging-ink: #077B7D;
  --component-provenance-canon-ink: var(--tm-gold-ink, #866200);
  --fade-top: 0px;
  --fade-bottom: 0px;
  --tm-ai: #802B4E;
  --tm-ai-subtle: #FEF2F6;
  --tm-ai-300: #F3AAC2;
  --tm-ai-ink: #7A2B49;
  --tm-navy: var(--semantic-color-text-heading, #032E42);
  --tm-teal: #009598;
  --tm-teal-700: var(--semantic-color-interactive-primary-hover, #004C4E);
  --tm-teal-bg: #E9F6F6;
  --tm-teal-300: #9ED9D9;
  --tm-muted: var(--semantic-color-text-neutral-default, #242728);
  --tm-faint: var(--semantic-color-text-neutral-subtle, #6E7273);
  --tm-line: var(--semantic-color-border-neutral-default, #B1B5B6);
  /* the pressed state of a tappable row or card. An alpha tint, not a
     solid: the same token is used on white cards and on the #F0F7F7
     wash, and only a tint darkens both. Declared 2026-08-13 — it was
     referenced and never defined, so it rendered from a fallback. */
  --tm-press: rgba(3,46,66,.035);
  /* a quiet raised surface. Held deliberately, currently unused.
     It began life as a press state and was the wrong instrument for that:
     solid, so on the #F0F7F7 wash it rendered LIGHTER than the surface and
     the press read as a release. Those two uses moved to --tm-press on
     2026-08-13. The value is still the right one for a genuine subtle
     surface, so it stays declared and pointed at the primitive it matches.
     Do not use it for a pressed or active state. */
  --tm-surface-subtle: var(--primitive-color-neutral-gray-50, #F2F6F7);
  
  --tm-line-soft: var(--semantic-color-border-hairline, #E2E9EA);
  --tm-err: var(--semantic-color-text-error-default, #AC0019);
  --tm-err-subtle: #FBEEEC;
  --tm-err-bold: #AC0019;
  --tm-e1: var(--primitive-shadow-elevation-1, 0 1px 2px rgba(4,58,70,.10), 0 2px 6px rgba(8,120,130,.10));
  --tm-e2: var(--primitive-shadow-elevation-2, 0 2px 4px rgba(4,58,70,.10), 0 6px 14px rgba(8,120,130,.12));
  --tm-e3: var(--primitive-shadow-elevation-3, 0 6px 14px rgba(4,58,70,.14), 0 14px 32px rgba(8,120,130,.16));
  --tm-glow-gold: var(--primitive-shadow-glow-gold-soft, 0 5px 20px rgba(168,134,63,.20));
  --s-34: var(--app-text-34);
  --s-32: 32px;
  --s-28: var(--app-text-28);
  --s-22: var(--app-text-22);
  --s-20: var(--app-text-20);
  --s-18: var(--app-text-18);
  --s-16: var(--app-text-16);
  --s-15: var(--app-text-15);
  --s-14: var(--app-text-14);
  --s-12: var(--app-text-12);
  --s-10: var(--app-text-10);
  --tm-mid: #525657;
  --tm-ask: #802B4E;
  --tm-ask-glow: 0 6px 22px rgba(128,43,78,.30);
  --tm-gutter: 20px;
  --tm-dock-inset: 34px;
  --tm-caution-bg: #FFF5D6;
  --tm-caution-line: #FFECB1;
  --tm-caution-ink: #242728;
  --tm-state: var(--primitive-color-brand-accent-500,#1A97D1);
}











@keyframes tm-slowflash {
  0%,100%{opacity:1} 50%{opacity:.22}
}

@keyframes axblink {
  50%{opacity:0}
}

@keyframes axrec {
  0%{box-shadow:0 0 0 0 rgba(128,43,78,.45)}100%{box-shadow:0 0 0 12px rgba(128,43,78,0)}
}

@keyframes axspulse {
  0%,100%{opacity:.3;transform:scale(.7)}50%{opacity:1;transform:scale(1)}
}

@keyframes axeq {
  0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}
}

@keyframes axsheetup {
  from{transform:translateY(100%)}to{transform:none}
}

@keyframes axspin {
  to{transform:rotate(360deg)}
}

@keyframes tm-drift {
  0%,100%{transform:translateY(.35px);opacity:.5}50%{transform:translateY(-.9px);opacity:1}
}

@keyframes tm-drift {
  0%,100%{transform:translateY(.35px);opacity:.5}50%{transform:translateY(-.9px);opacity:1}
}

@keyframes ax-landed {
  from{transform:scale(.82); opacity:0} to{transform:none; opacity:1}
}

/* ═══ COMPONENTS ═══ */

/* ── base ─────────────────────────────────────────────── */
[data-theme="light"] {
  --semantic-color-text-neutral-subtle: var(--primitive-color-neutral-gray-500);
  --semantic-color-text-neutral-default: var(--primitive-color-neutral-gray-800);
  --semantic-color-text-neutral-bold: var(--primitive-color-brand-primary-950);
  --semantic-color-text-neutral-contrast: var(--primitive-color-neutral-gray-white);
  --semantic-color-text-primary-subtle: var(--primitive-color-brand-primary-400);
  --semantic-color-text-primary-default: var(--primitive-color-brand-primary-600);
  --semantic-color-text-primary-bold: var(--primitive-color-brand-primary-800);
  --semantic-color-text-primary-contrast: var(--primitive-color-neutral-gray-50);
  --semantic-color-text-secondary-subtle: var(--primitive-color-brand-secondary-800);
  --semantic-color-text-secondary-default: var(--primitive-color-brand-secondary-900);
  --semantic-color-text-secondary-bold: var(--primitive-color-brand-secondary-950);
  --semantic-color-text-secondary-contrast: var(--primitive-color-brand-secondary-50);
  --semantic-color-text-accent-subtle: var(--primitive-color-brand-accent-600);
  --semantic-color-text-accent-default: var(--primitive-color-brand-accent-600);
  --semantic-color-text-accent-bold: var(--primitive-color-brand-accent-700);
  --semantic-color-text-accent-contrast: var(--primitive-color-brand-accent-50);
  --semantic-color-text-success-subtle: var(--primitive-color-feedback-success-400);
  --semantic-color-text-success-default: var(--primitive-color-feedback-success-600);
  --semantic-color-text-success-bold: var(--primitive-color-feedback-success-700);
  --semantic-color-text-success-contrast: var(--primitive-color-feedback-success-50);
  --semantic-color-text-warning-subtle: var(--primitive-color-feedback-warning-400);
  --semantic-color-text-warning-default: var(--primitive-color-feedback-warning-700);
  --semantic-color-text-warning-bold: var(--primitive-color-feedback-warning-800);
  --semantic-color-text-warning-contrast: var(--primitive-color-feedback-warning-50);
  --semantic-color-text-error-subtle: var(--primitive-color-feedback-error-400);
  --semantic-color-text-error-default: var(--primitive-color-feedback-error-600);
  --semantic-color-text-error-bold: var(--primitive-color-feedback-error-700);
  --semantic-color-text-error-contrast: var(--primitive-color-feedback-error-50);
  --semantic-color-text-info-subtle: var(--primitive-color-feedback-info-300);
  --semantic-color-text-info-default: var(--primitive-color-feedback-info-600);
  --semantic-color-text-info-bold: var(--primitive-color-feedback-info-800);
  --semantic-color-text-info-contrast: var(--primitive-color-feedback-info-50);
  --semantic-color-text-disabled: var(--primitive-color-neutral-gray-400);
  --semantic-color-surface-neutral-subtle: var(--primitive-color-neutral-gray-50);
  --semantic-color-surface-neutral-default: var(--primitive-color-neutral-gray-100);
  --semantic-color-surface-neutral-bold: var(--primitive-color-neutral-gray-700);
  --semantic-color-accent-primary: var(--primitive-color-brand-primary-500);
  --semantic-color-surface-primary-wash: var(--primitive-color-brand-primary-25);
  --semantic-color-text-gold-bold: var(--primitive-color-brand-gold-ink);
  --semantic-color-surface-gold-subtle: var(--primitive-color-brand-gold-subtle);
  --semantic-color-badge-settled-surface: var(--primitive-color-feedback-success-100);
  --semantic-color-badge-settled-text: var(--primitive-color-feedback-success-600);
  --semantic-color-badge-attention-surface: var(--primitive-color-feedback-error-100);
  --semantic-color-badge-attention-text: var(--primitive-color-feedback-error-600);
  --semantic-color-badge-progress-surface: var(--primitive-color-brand-navy-100);
  --semantic-color-badge-progress-text: var(--primitive-color-brand-navy-800);
  --semantic-color-surface-primary-subtle: var(--primitive-color-brand-primary-200);
  --semantic-color-surface-primary-default: var(--primitive-color-brand-primary-700);
  --semantic-color-surface-primary-bold: var(--primitive-color-brand-primary-600);
  --semantic-color-surface-secondary-subtle: var(--primitive-color-brand-secondary-50);
  --semantic-color-surface-secondary-default: var(--primitive-color-brand-secondary-500);
  --semantic-color-surface-secondary-bold: var(--primitive-color-brand-secondary-600);
  --semantic-color-surface-accent-subtle: var(--primitive-color-brand-accent-50);
  --semantic-color-surface-accent-default: var(--primitive-color-brand-accent-100);
  --semantic-color-surface-accent-bold: var(--primitive-color-brand-accent-700);
  --semantic-color-surface-success-subtle: var(--primitive-color-feedback-success-50);
  --semantic-color-surface-success-default: var(--primitive-color-feedback-success-100);
  --semantic-color-surface-success-bold: var(--primitive-color-feedback-success-600);
  --semantic-color-surface-warning-subtle: var(--primitive-color-feedback-warning-50);
  --semantic-color-surface-warning-default: var(--primitive-color-feedback-warning-100);
  --semantic-color-surface-warning-bold: var(--primitive-color-feedback-warning-600);
  --semantic-color-surface-error-subtle: var(--primitive-color-feedback-error-50);
  --semantic-color-surface-error-default: var(--primitive-color-feedback-error-500);
  --semantic-color-surface-error-bold: var(--primitive-color-feedback-error-600);
  --semantic-color-surface-info-subtle: var(--primitive-color-feedback-info-50);
  --semantic-color-surface-info-default: var(--primitive-color-feedback-info-100);
  --semantic-color-surface-info-bold: var(--primitive-color-feedback-info-600);
  --semantic-color-surface-disabled: var(--primitive-color-neutral-gray-100);
  --semantic-color-border-neutral-subtle: var(--primitive-color-neutral-gray-200);
  --semantic-color-border-neutral-default: var(--primitive-color-neutral-gray-300);
  --semantic-color-border-neutral-bold: var(--primitive-color-neutral-gray-500);
  --semantic-color-border-primary-subtle: var(--primitive-color-brand-primary-200);
  --semantic-color-border-primary-default: var(--primitive-color-brand-primary-500);
  --semantic-color-border-primary-bold: var(--primitive-color-brand-primary-700);
  --semantic-color-border-secondary-subtle: var(--primitive-color-brand-secondary-200);
  --semantic-color-border-secondary-default: var(--primitive-color-brand-secondary-500);
  --semantic-color-border-secondary-bold: var(--primitive-color-brand-secondary-700);
  --semantic-color-border-accent-subtle: var(--primitive-color-brand-accent-200);
  --semantic-color-border-accent-default: var(--primitive-color-brand-accent-500);
  --semantic-color-border-accent-bold: var(--primitive-color-brand-accent-700);
  --semantic-color-border-success-subtle: var(--primitive-color-feedback-success-200);
  --semantic-color-border-success-default: var(--primitive-color-feedback-success-500);
  --semantic-color-border-success-bold: var(--primitive-color-feedback-success-700);
  --semantic-color-border-warning-subtle: var(--primitive-color-feedback-warning-200);
  --semantic-color-border-warning-default: var(--primitive-color-feedback-warning-500);
  --semantic-color-border-warning-bold: var(--primitive-color-feedback-warning-700);
  --semantic-color-border-error-subtle: var(--primitive-color-feedback-error-200);
  --semantic-color-border-error-default: var(--primitive-color-feedback-error-500);
  --semantic-color-border-error-bold: var(--primitive-color-feedback-error-700);
  --semantic-color-border-info-subtle: var(--primitive-color-feedback-info-200);
  --semantic-color-border-info-default: var(--primitive-color-feedback-info-500);
  --semantic-color-border-info-bold: var(--primitive-color-feedback-info-700);
  --semantic-color-border-disabled: var(--primitive-color-neutral-gray-200);
  --semantic-color-contrast-light: var(--primitive-color-neutral-gray-white);
  --semantic-color-contrast-dark: var(--primitive-color-neutral-gray-black);
  --semantic-color-interactive-primary-default: var(--primitive-color-brand-primary-600);
  --semantic-color-interactive-primary-hover: var(--primitive-color-brand-primary-700);
  --semantic-color-interactive-primary-active: var(--primitive-color-brand-primary-500);
  --semantic-color-interactive-primary-disabled: var(--primitive-color-neutral-gray-200);
  --semantic-color-interactive-primary-text: var(--primitive-color-brand-primary-50);
  --semantic-color-interactive-primary-text-disabled: var(--primitive-color-neutral-gray-400);
  --semantic-color-interactive-secondary-default: var(--primitive-color-brand-secondary-500);
  --semantic-color-interactive-secondary-hover: var(--primitive-color-brand-secondary-400);
  --semantic-color-interactive-secondary-active: var(--primitive-color-brand-secondary-600);
  --semantic-color-interactive-secondary-disabled: var(--primitive-color-neutral-gray-200);
  --semantic-color-interactive-secondary-text: var(--primitive-color-neutral-gray-800);
  --semantic-color-interactive-secondary-text-disabled: var(--primitive-color-neutral-gray-400);
  --semantic-color-interactive-tertiary-default: var(--primitive-color-neutral-gray-500);
  --semantic-color-interactive-tertiary-hover: var(--primitive-color-neutral-gray-600);
  --semantic-color-interactive-tertiary-active: var(--primitive-color-neutral-gray-700);
  --semantic-color-interactive-tertiary-disabled: var(--primitive-color-neutral-gray-200);
  --semantic-color-interactive-tertiary-text: var(--primitive-color-neutral-gray-50);
  --semantic-color-interactive-tertiary-text-disabled: var(--primitive-color-neutral-gray-400);
  --semantic-color-interactive-destructive-default: var(--primitive-color-feedback-error-500);
  --semantic-color-interactive-destructive-hover: var(--primitive-color-feedback-error-600);
  --semantic-color-interactive-destructive-active: var(--primitive-color-feedback-error-700);
  --semantic-color-interactive-destructive-disabled: var(--primitive-color-neutral-gray-200);
  --semantic-color-interactive-destructive-text: var(--primitive-color-feedback-error-50);
  --semantic-color-interactive-destructive-text-disabled: var(--primitive-color-neutral-gray-400);
  --semantic-color-interactive-link-default: var(--primitive-color-brand-primary-600);
  --semantic-color-interactive-link-hover: var(--primitive-color-brand-primary-500);
  --semantic-color-interactive-link-active: var(--primitive-color-brand-primary-700);
  --semantic-color-interactive-link-disabled: var(--primitive-color-neutral-gray-400);
  --semantic-typography-display-lg-font-family: var(--primitive-typography-family-display);
  --semantic-typography-display-lg-font-size: var(--primitive-typography-size-9xl);
  --semantic-typography-display-lg-font-weight: var(--primitive-typography-weight-light);
  --semantic-typography-display-lg-line-height: var(--primitive-typography-line-height-none);
  --semantic-typography-display-lg-letter-spacing: var(--primitive-typography-letter-spacing-tight);
  --semantic-typography-display-lg-text-transform: var(--primitive-typography-text-transform-none);
  --semantic-typography-display-md-font-family: var(--primitive-typography-family-display);
  --semantic-typography-display-md-font-size: var(--primitive-typography-size-7xl);
  --semantic-typography-display-md-font-weight: var(--primitive-typography-weight-normal);
  --semantic-typography-display-md-line-height: var(--primitive-typography-line-height-none);
  --semantic-typography-display-md-letter-spacing: var(--primitive-typography-letter-spacing-tight);
  --semantic-typography-display-md-text-transform: var(--primitive-typography-text-transform-none);
  --semantic-typography-display-sm-font-family: var(--primitive-typography-family-display);
  --semantic-typography-display-sm-font-size: var(--primitive-typography-size-5xl);
  --semantic-typography-display-sm-font-weight: var(--primitive-typography-weight-semibold);
  --semantic-typography-display-sm-line-height: var(--primitive-typography-line-height-none);
  --semantic-typography-display-sm-letter-spacing: var(--primitive-typography-letter-spacing-normal);
  --semantic-typography-display-sm-text-transform: var(--primitive-typography-text-transform-none);
  --semantic-typography-heading-h1-font-family: var(--primitive-typography-family-heading);
  --semantic-typography-heading-h1-font-size: var(--primitive-typography-size-8xl);
  --semantic-typography-heading-h1-font-weight: var(--primitive-typography-weight-bold);
  --semantic-typography-heading-h1-line-height: var(--primitive-typography-line-height-tight);
  --semantic-typography-heading-h1-letter-spacing: var(--primitive-typography-letter-spacing-normal);
  --semantic-typography-heading-h1-text-transform: var(--primitive-typography-text-transform-none);
  --semantic-typography-heading-h2-font-family: var(--primitive-typography-family-heading);
  --semantic-typography-heading-h2-font-size: var(--primitive-typography-size-6xl);
  --semantic-typography-heading-h2-font-weight: var(--primitive-typography-weight-bold);
  --semantic-typography-heading-h2-line-height: var(--primitive-typography-line-height-none);
  --semantic-typography-heading-h2-letter-spacing: var(--primitive-typography-letter-spacing-normal);
  --semantic-typography-heading-h2-text-transform: var(--primitive-typography-text-transform-none);
  --semantic-typography-heading-h3-font-family: var(--primitive-typography-family-heading);
  --semantic-typography-heading-h3-font-size: var(--primitive-typography-size-4xl);
  --semantic-typography-heading-h3-font-weight: var(--primitive-typography-weight-semibold);
  --semantic-typography-heading-h3-line-height: var(--primitive-typography-line-height-tight);
  --semantic-typography-heading-h3-letter-spacing: var(--primitive-typography-letter-spacing-normal);
  --semantic-typography-heading-h3-text-transform: var(--primitive-typography-text-transform-none);
  --semantic-typography-heading-h4-font-family: var(--primitive-typography-family-heading);
  --semantic-typography-heading-h4-font-size: var(--primitive-typography-size-2xl);
  --semantic-typography-heading-h4-font-weight: var(--primitive-typography-weight-semibold);
  --semantic-typography-heading-h4-line-height: var(--primitive-typography-line-height-tight);
  --semantic-typography-heading-h4-letter-spacing: var(--primitive-typography-letter-spacing-normal);
  --semantic-typography-heading-h4-text-transform: var(--primitive-typography-text-transform-none);
  --semantic-typography-heading-h5-font-family: var(--primitive-typography-family-heading);
  --semantic-typography-heading-h5-font-size: var(--primitive-typography-size-xl);
  --semantic-typography-heading-h5-font-weight: var(--primitive-typography-weight-semibold);
  --semantic-typography-heading-h5-line-height: var(--primitive-typography-line-height-snug);
  --semantic-typography-heading-h5-letter-spacing: var(--primitive-typography-letter-spacing-normal);
  --semantic-typography-heading-h5-text-transform: var(--primitive-typography-text-transform-none);
  --semantic-typography-heading-h6-font-family: var(--primitive-typography-family-heading);
  --semantic-typography-heading-h6-font-size: var(--primitive-typography-size-base);
  --semantic-typography-heading-h6-font-weight: var(--primitive-typography-weight-semibold);
  --semantic-typography-heading-h6-line-height: var(--primitive-typography-line-height-snug);
  --semantic-typography-heading-h6-letter-spacing: var(--primitive-typography-letter-spacing-normal);
  --semantic-typography-heading-h6-text-transform: var(--primitive-typography-text-transform-uppercase);
  --semantic-typography-body-lg-font-family: var(--primitive-typography-family-body);
  --semantic-typography-body-lg-font-size: var(--primitive-typography-size-lg);
  --semantic-typography-body-lg-font-weight: var(--primitive-typography-weight-medium);
  --semantic-typography-body-lg-line-height: var(--primitive-typography-line-height-normal);
  --semantic-typography-body-lg-letter-spacing: var(--primitive-typography-letter-spacing-normal);
  --semantic-typography-body-lg-text-transform: var(--primitive-typography-text-transform-none);
  --semantic-typography-body-md-font-family: var(--primitive-typography-family-body);
  --semantic-typography-body-md-font-size: var(--primitive-typography-size-base);
  --semantic-typography-body-md-font-weight: var(--primitive-typography-weight-normal);
  --semantic-typography-body-md-line-height: var(--primitive-typography-line-height-normal);
  --semantic-typography-body-md-letter-spacing: var(--primitive-typography-letter-spacing-normal);
  --semantic-typography-body-md-text-transform: var(--primitive-typography-text-transform-none);
  --semantic-typography-body-sm-font-family: var(--primitive-typography-family-body);
  --semantic-typography-body-sm-font-size: var(--primitive-typography-size-sm);
  --semantic-typography-body-sm-font-weight: var(--primitive-typography-weight-normal);
  --semantic-typography-body-sm-line-height: var(--primitive-typography-line-height-normal);
  --semantic-typography-body-sm-letter-spacing: var(--primitive-typography-letter-spacing-normal);
  --semantic-typography-body-sm-text-transform: var(--primitive-typography-text-transform-none);
  --semantic-typography-body-xs-font-family: var(--primitive-typography-family-body);
  --semantic-typography-body-xs-font-size: var(--primitive-typography-size-xs);
  --semantic-typography-body-xs-font-weight: var(--primitive-typography-weight-normal);
  --semantic-typography-body-xs-line-height: var(--primitive-typography-line-height-normal);
  --semantic-typography-body-xs-letter-spacing: var(--primitive-typography-letter-spacing-normal);
  --semantic-typography-body-xs-text-transform: var(--primitive-typography-text-transform-none);
  --semantic-typography-body-lg-bold-font-family: var(--primitive-typography-family-body);
  --semantic-typography-body-lg-bold-font-size: var(--primitive-typography-size-lg);
  --semantic-typography-body-lg-bold-font-weight: var(--primitive-typography-weight-bold);
  --semantic-typography-body-lg-bold-line-height: var(--primitive-typography-line-height-normal);
  --semantic-typography-body-lg-bold-letter-spacing: var(--primitive-typography-letter-spacing-normal);
  --semantic-typography-body-lg-bold-text-transform: var(--primitive-typography-text-transform-none);
  --semantic-typography-body-md-bold-font-family: var(--primitive-typography-family-body);
  --semantic-typography-body-md-bold-font-size: var(--primitive-typography-size-base);
  --semantic-typography-body-md-bold-font-weight: var(--primitive-typography-weight-bold);
  --semantic-typography-body-md-bold-line-height: var(--primitive-typography-line-height-normal);
  --semantic-typography-body-md-bold-letter-spacing: var(--primitive-typography-letter-spacing-normal);
  --semantic-typography-body-md-bold-text-transform: var(--primitive-typography-text-transform-none);
  --semantic-typography-body-sm-bold-font-family: var(--primitive-typography-family-body);
  --semantic-typography-body-sm-bold-font-size: var(--primitive-typography-size-sm);
  --semantic-typography-body-sm-bold-font-weight: var(--primitive-typography-weight-bold);
  --semantic-typography-body-sm-bold-line-height: var(--primitive-typography-line-height-normal);
  --semantic-typography-body-sm-bold-letter-spacing: var(--primitive-typography-letter-spacing-normal);
  --semantic-typography-body-sm-bold-text-transform: var(--primitive-typography-text-transform-none);
  --semantic-typography-label-lg-font-family: var(--primitive-typography-family-body);
  --semantic-typography-label-lg-font-size: var(--primitive-typography-size-lg);
  --semantic-typography-label-lg-font-weight: var(--primitive-typography-weight-normal);
  --semantic-typography-label-lg-line-height: var(--primitive-typography-line-height-normal);
  --semantic-typography-label-lg-letter-spacing: var(--primitive-typography-letter-spacing-normal);
  --semantic-typography-label-lg-text-transform: var(--primitive-typography-text-transform-none);
  --semantic-typography-label-md-font-family: var(--primitive-typography-family-body);
  --semantic-typography-label-md-font-size: var(--primitive-typography-size-base);
  --semantic-typography-label-md-font-weight: var(--primitive-typography-weight-normal);
  --semantic-typography-label-md-line-height: var(--primitive-typography-line-height-normal);
  --semantic-typography-label-md-letter-spacing: var(--primitive-typography-letter-spacing-normal);
  --semantic-typography-label-md-text-transform: var(--primitive-typography-text-transform-none);
  --semantic-typography-label-sm-font-family: var(--primitive-typography-family-body);
  --semantic-typography-label-sm-font-size: var(--primitive-typography-size-sm);
  --semantic-typography-label-sm-font-weight: var(--primitive-typography-weight-normal);
  --semantic-typography-label-sm-line-height: var(--primitive-typography-line-height-normal);
  --semantic-typography-label-sm-letter-spacing: var(--primitive-typography-letter-spacing-normal);
  --semantic-typography-label-sm-text-transform: var(--primitive-typography-text-transform-none);
  --semantic-typography-label-xs-font-family: var(--primitive-typography-family-body);
  --semantic-typography-label-xs-font-size: var(--primitive-typography-size-xs);
  --semantic-typography-label-xs-font-weight: var(--primitive-typography-weight-medium);
  --semantic-typography-label-xs-line-height: var(--primitive-typography-line-height-tight);
  --semantic-typography-label-xs-letter-spacing: var(--primitive-typography-letter-spacing-normal);
  --semantic-typography-label-xs-text-transform: var(--primitive-typography-text-transform-none);
  --semantic-typography-label-uppercase-font-family: var(--primitive-typography-family-body);
  --semantic-typography-label-uppercase-font-size: var(--primitive-typography-size-sm);
  --semantic-typography-label-uppercase-font-weight: var(--primitive-typography-weight-normal);
  --semantic-typography-label-uppercase-line-height: var(--primitive-typography-line-height-normal);
  --semantic-typography-label-uppercase-letter-spacing: var(--primitive-typography-letter-spacing-normal);
  --semantic-typography-label-uppercase-text-transform: var(--primitive-typography-text-transform-uppercase);
  --semantic-typography-caption-md-font-family: var(--primitive-typography-family-body);
  --semantic-typography-caption-md-font-size: var(--primitive-typography-size-sm);
  --semantic-typography-caption-md-font-weight: var(--primitive-typography-weight-normal);
  --semantic-typography-caption-md-line-height: var(--primitive-typography-line-height-snug);
  --semantic-typography-caption-md-letter-spacing: var(--primitive-typography-letter-spacing-normal);
  --semantic-typography-caption-md-text-transform: var(--primitive-typography-text-transform-none);
  --semantic-typography-caption-sm-font-family: var(--primitive-typography-family-body);
  --semantic-typography-caption-sm-font-size: var(--primitive-typography-size-xs);
  --semantic-typography-caption-sm-font-weight: var(--primitive-typography-weight-normal);
  --semantic-typography-caption-sm-line-height: var(--primitive-typography-line-height-snug);
  --semantic-typography-caption-sm-letter-spacing: var(--primitive-typography-letter-spacing-normal);
  --semantic-typography-caption-sm-text-transform: var(--primitive-typography-text-transform-none);
  --semantic-typography-code-inline-font-family: var(--primitive-typography-family-mono);
  --semantic-typography-code-inline-font-size: var(--primitive-typography-size-sm);
  --semantic-typography-code-inline-font-weight: var(--primitive-typography-weight-normal);
  --semantic-typography-code-inline-line-height: var(--primitive-typography-line-height-normal);
  --semantic-typography-code-inline-letter-spacing: var(--primitive-typography-letter-spacing-normal);
  --semantic-typography-code-inline-text-transform: var(--primitive-typography-text-transform-none);
  --semantic-typography-code-block-font-family: var(--primitive-typography-family-mono);
  --semantic-typography-code-block-font-size: var(--primitive-typography-size-sm);
  --semantic-typography-code-block-font-weight: var(--primitive-typography-weight-medium);
  --semantic-typography-code-block-line-height: var(--primitive-typography-line-height-normal);
  --semantic-typography-code-block-letter-spacing: var(--primitive-typography-letter-spacing-normal);
  --semantic-typography-code-block-text-transform: var(--primitive-typography-text-transform-none);
  --semantic-typography-overline-md-font-family: var(--primitive-typography-family-body);
  --semantic-typography-overline-md-font-size: var(--primitive-typography-size-sm);
  --semantic-typography-overline-md-font-weight: var(--primitive-typography-weight-medium);
  --semantic-typography-overline-md-line-height: var(--primitive-typography-line-height-normal);
  --semantic-typography-overline-md-letter-spacing: var(--primitive-typography-letter-spacing-normal);
  --semantic-typography-overline-md-text-transform: var(--primitive-typography-text-transform-uppercase);
  --semantic-typography-overline-sm-font-family: var(--primitive-typography-family-body);
  --semantic-typography-overline-sm-font-size: var(--primitive-typography-size-xs);
  --semantic-typography-overline-sm-font-weight: var(--primitive-typography-weight-normal);
  --semantic-typography-overline-sm-line-height: var(--primitive-typography-line-height-normal);
  --semantic-typography-overline-sm-letter-spacing: var(--primitive-typography-letter-spacing-normal);
  --semantic-typography-overline-sm-text-transform: var(--primitive-typography-text-transform-uppercase);
  --semantic-spacing-stack-lg: var(--primitive-spacing-2xl);
  --semantic-spacing-stack-lg-value: var(--primitive-spacing-2xl);
  --semantic-spacing-stack-md: var(--primitive-spacing-xl);
  --semantic-spacing-stack-md-value: var(--primitive-spacing-xl);
  --semantic-spacing-stack-sm: var(--primitive-spacing-md);
  --semantic-spacing-stack-sm-value: var(--primitive-spacing-md);
  --semantic-spacing-stack-xl: var(--primitive-spacing-3xl);
  --semantic-spacing-stack-xl-value: var(--primitive-spacing-3xl);
  --semantic-spacing-stack-xs: var(--primitive-spacing-sm);
  --semantic-spacing-stack-xs-value: var(--primitive-spacing-sm);
  --semantic-spacing-inset-lg: var(--primitive-spacing-lg);
  --semantic-spacing-inset-lg-value: var(--primitive-spacing-lg);
  --semantic-spacing-inset-md: var(--primitive-spacing-md);
  --semantic-spacing-inset-md-value: var(--primitive-spacing-md);
  --semantic-spacing-inset-sm: var(--primitive-spacing-sm);
  --semantic-spacing-inset-sm-value: var(--primitive-spacing-sm);
  --semantic-spacing-inset-xl: var(--primitive-spacing-xl);
  --semantic-spacing-inset-xl-value: var(--primitive-spacing-xl);
  --semantic-spacing-inset-xs: var(--primitive-spacing-xs);
  --semantic-spacing-inset-xs-value: var(--primitive-spacing-xs);
  --semantic-spacing-inline-lg: var(--primitive-spacing-2xl);
  --semantic-spacing-inline-lg-value: var(--primitive-spacing-2xl);
  --semantic-spacing-inline-md: var(--primitive-spacing-lg);
  --semantic-spacing-inline-md-value: var(--primitive-spacing-lg);
  --semantic-spacing-inline-sm: var(--primitive-spacing-md);
  --semantic-spacing-inline-sm-value: var(--primitive-spacing-md);
  --semantic-spacing-inline-xl: var(--primitive-spacing-3xl);
  --semantic-spacing-inline-xl-value: var(--primitive-spacing-3xl);
  --semantic-spacing-inline-xs: var(--primitive-spacing-sm);
  --semantic-spacing-inline-xs-value: var(--primitive-spacing-sm);
  --semantic-transition-base: var(--primitive-duration-base) var(--primitive-easing-standard);
  --semantic-transition-base-easing: var(--primitive-easing-standard);
  --semantic-transition-base-duration: var(--primitive-duration-base);
  --semantic-transition-fast: var(--primitive-duration-fast) var(--primitive-easing-standard);
  --semantic-transition-fast-easing: var(--primitive-easing-standard);
  --semantic-transition-fast-duration: var(--primitive-duration-fast);
  --semantic-transition-slow: var(--primitive-duration-slow) var(--primitive-easing-standard);
  --semantic-transition-slow-easing: var(--primitive-easing-standard);
  --semantic-transition-slow-duration: var(--primitive-duration-slow);
  --semantic-transition-color: var(--primitive-duration-base) var(--primitive-easing-ease);
  --semantic-transition-color-easing: var(--primitive-easing-ease);
  --semantic-transition-color-duration: var(--primitive-duration-base);
  --semantic-focus-outlinewidth: var(--primitive-border-width-heavy);
  --semantic-focus-outlineoffset: var(--primitive-spacing-sm);
  --semantic-focus-outlinecolor: var(--semantic-color-border-primary-default);
  --semantic-focus-ringwidth: var(--primitive-border-width-thin);
  --semantic-focus-ringcolor: var(--semantic-color-border-primary-default);
  --semantic-focus-ringopacity: var(--primitive-opacity-alpha-100);
}

/* ── base ─────────────────────────────────────────────── */
[data-density="touch"] {
  --component-button-lg-min-height: var(--touch-target-comfortable);
  --component-button-md-min-height: var(--touch-target-min);
  --component-button-sm-min-height: var(--touch-target-min);
  --component-text-input-md-min-height: var(--touch-target-comfortable);
  --component-text-area-md-min-height: var(--touch-target-comfortable);
  --component-badge-md-min-height: var(--touch-target-min);
}

/* ── tm-c2 ─────────────────────────────────────────────── */
.tm-c2 > :first-child {
  margin-top: var(--primitive-spacing-zero);
}

/* ── tm-draft ─────────────────────────────────────────────── */
.tm-draft {
  margin: var(--primitive-spacing-zero);
  padding: var(--primitive-spacing-lg-xl) var(--primitive-spacing-xl);
  border-radius: var(--app-radius-group);
  background: var(--semantic-color-surface-neutral-subtle, #F2F6F7);
  font-size: var(--app-text-14);
  line-height: var(--primitive-typography-line-height-normal);
  color: var(--semantic-color-text-heading, #032E42);
}

.tm-draft__e {
  display: block;
  font-family: var(--font-mono,monospace);
  font-size: var(--app-text-12);
  letter-spacing: var(--app-tracking-caps);
  text-transform: uppercase;
  color: var(--tm-teal-700, #004C4E);
  margin-bottom: var(--primitive-spacing-md);
}

/* ── mstory ─────────────────────────────────────────────── */
.mstory {
  margin: 18px 0 var(--primitive-spacing-sm-md);
  border: 1px solid #1B3A44;
  border-radius: 12px;
  background: #0C1D24;
  overflow: hidden;
}

.mstory__who {
  padding: 9px 13px var(--primitive-spacing-xs-sm);
  color: #6E8C93;
  font-size: 12px;
  letter-spacing: .09em;
  text-transform: uppercase;
  font-family: var(--font-mono,monospace);
}

.mstory > summary {
  list-style: none;
  cursor: pointer;
  padding: 11px 13px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: #CFE3E6;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-family: var(--font-mono,monospace);
}

.mstory > summary::-webkit-details-marker {
  display: none;
}

.mstory .mbtn {
  display: flex;
  gap: 9px;
  align-items: baseline;
  font-size: 12px;
  padding: var(--primitive-spacing-md) 13px;
  width: 100%;
  text-align: left;
  border: 0;
  background: none;
  color: #9FB6BB;
  cursor: pointer;
  min-height: 0;
  margin: 0;
  border-radius: 0;
}

.mstory > summary .cv {
  transition: transform .18s ease;
  display: flex;
}

.mstory > summary .n {
  margin-left: auto;
  color: #6E8C93;
  letter-spacing: 0;
}

.mstory .mbtn .no {
  flex: none;
  width: 17px;
  color: #4E6D75;
  font-family: var(--font-mono,monospace);
  font-size: 12px;
}

.mstory .mbtn.on {
  background: #0F7A7C;
  color: var(--semantic-color-text-neutral-contrast);
  font-weight: var(--primitive-typography-weight-bold);
}

.mstory[open] > summary .cv {
  transform: rotate(90deg);
}

.mstory .mbtn.on .no {
  color: #BFE6E4;
}

/* ── stostrip ─────────────────────────────────────────────── */
.stostrip {
  display: none;
  margin: var(--primitive-spacing-lg-xl) auto 0;
  max-width: 393px;
  align-items: center;
  gap: var(--primitive-spacing-md-lg);
  color: #8AA3A8;
  font-size: 12px;
}

.stostrip b {
  color: #CFE3E6;
  font-weight: var(--primitive-typography-weight-bold);
}

.stostrip button {
  border: 1px solid #1B3A44;
  background: #0C1D24;
  color: #CFE3E6;
  border-radius: 999px;
  padding: 5px 13px;
  font-size: 12px;
  cursor: pointer;
}

.stostrip.on {
  display: flex;
}

.stostrip .sp {
  flex: 1;
}

.stostrip button[disabled] {
  opacity: .35;
  cursor: default;
}

/* ── tm-ty ─────────────────────────────────────────────── */
.tm-ty {
  margin: var(--primitive-spacing-xl-2xl) var(--primitive-spacing-zero) var(--primitive-spacing-zero);
  padding: var(--primitive-spacing-lg-xl) var(--primitive-spacing-lg-xl);
  border-radius: var(--app-radius-group);
  border: var(--primitive-border-width-thin) solid var(--semantic-color-border-neutral-default, #B1B5B6);
  background: var(--semantic-color-contrast-light);
  font-size: var(--app-text-14);
  line-height: var(--primitive-typography-line-height-normal);
  color: var(--semantic-color-text-heading, #032E42);
}

.tm-ty__k {
  display: block;
  font-family: var(--font-mono,monospace);
  font-size: var(--app-text-12);
  letter-spacing: var(--app-tracking-caps);
  text-transform: uppercase;
  color: var(--tm-teal-700, #004C4E);
  margin-bottom: var(--primitive-spacing-md);
}

/* ── lock ─────────────────────────────────────────────── */
.lock {
  flex: 1;
  display: flex;
  flex-direction: column;
  color: var(--semantic-color-text-neutral-contrast);
  background: var(--component-lock-gradient);
}

.lock__sb {
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: var(--primitive-spacing-zero) var(--primitive-spacing-xl-2xl);
  color: rgba(255,255,255,.86);
}

.lock__hd {
  padding: var(--primitive-spacing-lg-xl) var(--primitive-spacing-2xl) var(--primitive-spacing-zero);
  display: flex;
  align-items: baseline;
  gap: var(--primitive-spacing-lg);
}

.lock__t {
  font-size: var(--app-text-34);
  line-height: var(--primitive-typography-line-height-none);
  font-weight: var(--primitive-typography-weight-light);
  letter-spacing: var(--primitive-typography-letter-spacing-normal);
}

.lock__d {
  font-size: var(--app-text-14);
  color: rgba(255,255,255,.62);
}

.lock__notes {
  flex: 1;
  padding: var(--primitive-spacing-2xl) var(--primitive-spacing-lg) var(--primitive-spacing-zero);
  display: flex;
  flex-direction: column;
  gap: var(--primitive-spacing-md-lg);
  overflow: hidden;
}

.lock__ft {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--primitive-spacing-zero) var(--primitive-spacing-3xl) var(--primitive-spacing-2xl-3xl);
}

.lock__k {
  width: 46px;
  height: 46px;
  border-radius: var(--primitive-radius-full);
  background: rgba(255,255,255,.16);
  display: grid;
  place-items: center;
  color: var(--semantic-color-text-neutral-contrast);
}

.lock__sw {
  width: 108px;
  height: 4px;
  border-radius: var(--primitive-radius-full);
  background: rgba(255,255,255,.38);
}

/* ── ds-heading ─────────────────────────────────────────────── */
.ds-heading {
  color: var(--semantic-color-text-heading);
}

/* ── tm ─────────────────────────────────────────────── */
h1.tm {
  color: var(--semantic-color-text-heading);
}

h2.tm {
  color: var(--semantic-color-text-heading);
}

h3.tm {
  color: var(--semantic-color-text-heading);
}

/* ── base ─────────────────────────────────────────────── */
[class*="typography-display"] {
  color: var(--semantic-color-text-heading);
}

/* ── base ─────────────────────────────────────────────── */
[class*="typography-heading"] {
  color: var(--semantic-color-text-heading);
}

/* ── base ─────────────────────────────────────────────── */
* {
  box-sizing: border-box;
}

/* ── masthead ─────────────────────────────────────────────── */
.masthead {
  padding: 36px var(--primitive-spacing-3xl-4xl) 0;
}

.masthead h1 {
  font-family: var(--primitive-typography-family-display);
  font-weight: var(--primitive-typography-weight-semibold);
  font-size: 34px;
  color: var(--tm-navy);
  margin: 0 0 var(--primitive-spacing-sm-md);
}

.masthead p {
  font-size: 14px;
  color: var(--tm-muted);
  max-width: 720px;
  margin: 0;
}

.masthead .eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tm-teal-700);
  margin: 0 0 var(--primitive-spacing-md);
}

/* ── gallery ─────────────────────────────────────────────── */
.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: var(--primitive-spacing-3xl-4xl);
  padding: var(--primitive-spacing-3xl) var(--primitive-spacing-3xl-4xl) 60px;
  align-items: flex-start;
}

/* ── dp-stepper ─────────────────────────────────────────────── */
.dp-stepper {
  padding: var(--primitive-spacing-md) var(--semantic-spacing-rhythm-inset) var(--primitive-spacing-zero);
}

.dp-stepper__eyebrow {
  font-size: var(--app-text-12);
  font-weight: var(--primitive-typography-weight-bold);
  letter-spacing: var(--app-tracking-caps);
  text-transform: uppercase;
  color: var(--semantic-color-text-primary-default,var(--semantic-color-interactive-primary-default));
  margin: var(--primitive-spacing-zero) var(--primitive-spacing-zero) var(--semantic-spacing-rhythm-label);
}

.dp-stepper__track {
  height: 4px;
  border-radius: var(--primitive-radius-full);
  background: var(--semantic-color-border-neutral-subtle);
  overflow: hidden;
}

.dp-stepper__fill {
  height: 100%;
  border-radius: var(--primitive-radius-full);
  background: var(--semantic-color-interactive-primary-default);
}

/* ── dp-list-row ─────────────────────────────────────────────── */
.dp-list-row {
  display: flex;
  align-items: center;
  gap: var(--primitive-spacing-lg);
  min-height: 56px;
  padding: var(--primitive-spacing-md) var(--primitive-spacing-zero);
  border-bottom: var(--primitive-border-width-thin) solid var(--semantic-color-border-neutral-subtle);
}

.dp-list-row__icon {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: var(--primitive-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--semantic-color-surface-primary-subtle);
  color: var(--semantic-color-interactive-primary-default);
}

.dp-list-row__text {
  flex: 1;
}

/* ── dp-reveal ─────────────────────────────────────────────── */
.dp-reveal {
  background: var(--semantic-color-surface-primary-subtle);
  border-radius: var(--primitive-radius-md);
  padding: var(--primitive-spacing-xl);
}

/* ── dp-form-foot ─────────────────────────────────────────────── */
.dp-form-foot {
  display: flex;
  flex-direction: column;
  gap: var(--primitive-spacing-lg);
  padding: var(--primitive-spacing-lg) var(--semantic-spacing-rhythm-inset);
  padding-bottom: calc(var(--primitive-spacing-lg) + var(--safe-area-bottom, 0px));
  background: var(--semantic-color-contrast-light);
}

.dp-form-foot--elevated {
  box-shadow: 0 -1px 0 var(--semantic-color-border-neutral-subtle),
             0 -8px 18px -14px rgba(3,46,66,.18);
}

.dp-form-foot__hint {
  text-align: center;
  font-size: var(--app-text-12);
  color: var(--semantic-color-text-neutral-subtle);
}

/* ── dp-input-accessory ─────────────────────────────────────────────── */
.dp-input-accessory {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--touch-target-min);
  padding: var(--primitive-spacing-zero) var(--primitive-spacing-sm);
  background: var(--semantic-color-surface-neutral-subtle);
  border-top: var(--primitive-border-width-thin) solid var(--semantic-color-border-neutral-default);
}

.dp-input-accessory__nav {
  display: flex;
  gap: var(--primitive-spacing-xs);
}

.dp-input-accessory__btn {
  min-width: var(--touch-target-min);
  height: var(--touch-target-min);
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  border-radius: var(--primitive-radius-sm);
  color: var(--semantic-color-text-neutral-bold);
  cursor: pointer;
}

.dp-input-accessory__done {
  min-width: var(--touch-target-min);
  height: var(--touch-target-min);
  padding: var(--primitive-spacing-zero) var(--primitive-spacing-md);
  border: none;
  background: none;
  font-weight: var(--primitive-typography-weight-bold);
  font-size: var(--app-text-16);
  color: var(--semantic-color-text-primary-default);
  cursor: pointer;
}

.dp-input-accessory__btn:disabled {
  color: var(--semantic-color-border-neutral-bold);
}

/* ── dp-otp ─────────────────────────────────────────────── */
.dp-otp {
  display: flex;
  gap: var(--primitive-spacing-md);
}

.dp-otp__cell {
  flex: 1;
  min-width: 0;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--primitive-typography-family-mono);
  font-size: var(--app-text-22);
  font-weight: var(--primitive-typography-weight-medium);
  color: var(--semantic-color-text-neutral-bold);
  background: var(--semantic-color-contrast-light);
  border: var(--primitive-border-width-regular) solid var(--semantic-color-border-neutral-default);
  border-radius: var(--primitive-radius-md);
}

.dp-otp__cell--active {
  border-color: var(--semantic-color-border-primary-default);
  box-shadow: 0 0 0 3px var(--semantic-color-surface-primary-subtle);
}

.dp-otp--error .dp-otp__cell {
  border-color: var(--semantic-color-border-error-default);
}

.dp-otp--error .dp-otp__cell--active {
  box-shadow: 0 0 0 3px var(--semantic-color-surface-error-subtle);
}

/* ── dp-sheet-scrim ─────────────────────────────────────────────── */
.dp-sheet-scrim {
  position: absolute;
  inset: var(--primitive-spacing-zero);
  background: rgba(3,46,66,.45);
}

/* ── dp-sheet-item ─────────────────────────────────────────────── */
.dp-sheet-item {
  padding: var(--primitive-spacing-lg) var(--primitive-spacing-zero);
  border-bottom: var(--primitive-border-width-thin) solid var(--semantic-color-border-neutral-subtle);
}

.dp-sheet-item__top {
  display: flex;
  align-items: center;
  gap: var(--primitive-spacing-lg);
  min-height: 32px;
}

.dp-sheet-item__name {
  flex: 1;
  font-size: var(--app-text-16);
  font-weight: var(--primitive-typography-weight-semibold);
  color: var(--semantic-color-text-neutral-default);
}

.dp-sheet-item__add {
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: var(--primitive-radius-circle);
  border: var(--primitive-border-width-regular) solid var(--semantic-color-border-neutral-default);
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--semantic-color-text-neutral-subtle);
}

.dp-sheet-item__grade {
  margin-top: var(--primitive-spacing-md-lg);
}

.dp-sheet-item--on .dp-sheet-item__name {
  color: var(--semantic-color-text-neutral-bold);
}

.dp-sheet-item--on .dp-sheet-item__add {
  border-color: var(--semantic-color-interactive-primary-default);
  background: var(--semantic-color-interactive-primary-default);
  color: var(--semantic-color-text-neutral-contrast);
}

/* ── dp-dot ─────────────────────────────────────────────── */
.dp-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--primitive-radius-circle);
  flex: none;
}

.dp-dot--usually {
  background: var(--semantic-color-text-success-default);
}

.dp-dot--sometimes {
  background: var(--semantic-color-text-warning-default);
}

.dp-dot--referral {
  background: var(--semantic-color-border-neutral-bold);
}

/* ── dp-chip ─────────────────────────────────────────────── */
.dp-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--primitive-spacing-md);
  min-height: var(--touch-target-min);
  padding: var(--primitive-spacing-zero) var(--primitive-spacing-xl);
  border: var(--primitive-border-width-regular) solid var(--semantic-color-border-neutral-default);
  border-radius: var(--primitive-radius-full);
  background: var(--semantic-color-contrast-light);
  font-size: var(--app-text-16);
  font-weight: var(--primitive-typography-weight-bold);
  color: var(--semantic-color-text-neutral-default);
  cursor: pointer;
}

.dp-chip--selected {
  border-color: var(--semantic-color-interactive-primary-default);
  background: var(--semantic-color-surface-primary-subtle);
  color: var(--semantic-color-interactive-primary-default);
}

.dp-chip__grade {
  display: inline-flex;
  align-items: center;
  gap: var(--primitive-spacing-sm-md);
  margin-left: var(--primitive-spacing-md);
  padding-left: var(--primitive-spacing-md);
  border-left: var(--primitive-border-width-thin) solid var(--semantic-color-border-neutral-subtle);
  font-size: var(--app-text-12);
  font-weight: var(--primitive-typography-weight-semibold);
  color: var(--semantic-color-text-neutral-subtle);
}

/* ── dp-upload-file ─────────────────────────────────────────────── */
.dp-upload-file {
  display: flex;
  align-items: center;
  gap: var(--primitive-spacing-lg);
  padding: var(--primitive-spacing-lg);
  border: var(--primitive-border-width-thin) solid var(--semantic-color-border-neutral-subtle);
  border-radius: var(--primitive-radius-md);
  background: var(--semantic-color-contrast-light);
}

.dp-upload-file__thumb {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: var(--primitive-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--semantic-color-surface-primary-subtle);
  color: var(--semantic-color-interactive-primary-default);
}

.dp-upload-file__meta {
  flex: 1;
  min-width: 0;
}

.dp-upload-file__name {
  font-weight: var(--primitive-typography-weight-semibold);
  font-size: var(--app-text-14);
  color: var(--semantic-color-text-neutral-bold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dp-upload-file__sub {
  font-size: var(--app-text-12);
  color: var(--semantic-color-text-neutral-subtle);
  margin-top: 1px;
}

.dp-upload-file__remove {
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: var(--semantic-color-text-neutral-subtle);
  cursor: pointer;
}

/* ── dp-upload ─────────────────────────────────────────────── */
.dp-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--primitive-spacing-md-lg);
  text-align: center;
  padding: var(--primitive-spacing-2xl-3xl) var(--primitive-spacing-xl-2xl);
  border: var(--primitive-border-width-regular) dashed var(--semantic-color-border-neutral-default);
  border-radius: var(--primitive-radius-lg);
  background: var(--semantic-color-surface-neutral-subtle);
}

.dp-upload__icon {
  width: 52px;
  height: 52px;
  border-radius: var(--primitive-radius-circle);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--semantic-color-surface-primary-subtle);
  color: var(--semantic-color-interactive-primary-default);
}

.dp-upload__title {
  font-weight: var(--primitive-typography-weight-bold);
  font-size: var(--app-text-16);
  color: var(--semantic-color-text-neutral-bold);
}

.dp-upload__hint {
  font-size: var(--app-text-12);
  color: var(--semantic-color-text-neutral-subtle);
  line-height: var(--primitive-typography-line-height-normal);
}

.dp-upload__bar {
  height: 5px;
  border-radius: var(--primitive-radius-xs);
  overflow: hidden;
  margin-top: var(--primitive-spacing-md);
  background: var(--semantic-color-border-neutral-subtle);
}

.dp-upload__bar > i {
  display: block;
  height: 100%;
  border-radius: var(--primitive-radius-xs);
  background: var(--semantic-color-interactive-primary-default);
}

/* ── dp-resume ─────────────────────────────────────────────── */
.dp-resume {
  padding: var(--primitive-spacing-xl);
  border: var(--primitive-border-width-thin) solid var(--semantic-color-border-neutral-subtle);
  border-radius: var(--primitive-radius-lg);
  background: var(--semantic-color-contrast-light);
}

.dp-resume__label {
  font-family: var(--font-mono, monospace);
  font-size: var(--app-text-12);
  letter-spacing: var(--app-tracking-caps);
  text-transform: uppercase;
  color: var(--semantic-color-text-primary-default);
  margin: var(--primitive-spacing-zero) var(--primitive-spacing-zero) var(--primitive-spacing-md);
}

.dp-resume__where {
  font-weight: var(--primitive-typography-weight-bold);
  font-size: var(--app-text-16);
  color: var(--semantic-color-text-neutral-bold);
  margin: var(--primitive-spacing-zero) var(--primitive-spacing-zero) var(--primitive-spacing-lg);
}

/* ── brandmark ─────────────────────────────────────────────── */
.brandmark {
  width: 28px;
  height: 28px;
  flex: none;
  display: block;
}

/* ── conn ─────────────────────────────────────────────── */
.conn {
  display: inline-flex;
  align-items: center;
  gap: var(--primitive-spacing-sm-md);
  background: var(--tm-teal-bg);
  color: var(--tm-teal-700);
  border-radius: var(--primitive-radius-full);
  padding: var(--primitive-spacing-xs-sm) var(--primitive-spacing-md-lg) var(--primitive-spacing-xs-sm) var(--primitive-spacing-md);
  font-size: var(--app-text-10);
  font-weight: var(--primitive-typography-weight-semibold);
  white-space: nowrap;
}

.conn .cd {
  width: 6px;
  height: 6px;
  border-radius: var(--primitive-radius-full);
  background: var(--tm-teal);
  flex: none;
}

.conn.sync {
  background: var(--tm-gold-subtle);
  color: var(--tm-gold-ink);
}

.conn.off {
  background: #FBF3E2;
  color: var(--tm-gold-ink);
}

.conn.sync .cd {
  background: var(--tm-gold);
}

.conn.off .cd {
  background: var(--tm-gold);
}

/* ── aicon ─────────────────────────────────────────────── */
.aicon {
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  border-radius: var(--primitive-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tm-navy);
  position: relative;
  flex: none;
}

.aicon .cnt {
  position: absolute;
  top: 5px;
  right: 5px;
  min-width: 16px;
  height: 16px;
  padding: var(--primitive-spacing-zero) var(--primitive-spacing-sm);
  border-radius: var(--primitive-radius-full);
  background: var(--tm-err-bold);
  color: var(--semantic-color-text-neutral-contrast);
  font-family: var(--font-mono);
  font-size: var(--app-text-10);
  font-weight: var(--primitive-typography-weight-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  border: var(--primitive-border-width-regular) solid var(--semantic-color-contrast-light);
}

/* ── anav ─────────────────────────────────────────────── */
.anav {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: var(--primitive-spacing-md) var(--primitive-spacing-md) var(--primitive-spacing-sm);
}

/* ── anav-item ─────────────────────────────────────────────── */
.anav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--primitive-spacing-sm);
  color: var(--tm-faint);
  min-height: var(--touch-target-min);
  justify-content: flex-end;
  padding-bottom: var(--primitive-spacing-xs);
}

.anav-item svg {
  display: block;
}

.anav-item .lb {
  font-size: var(--app-text-10);
  font-weight: var(--primitive-typography-weight-medium);
  letter-spacing: var(--primitive-typography-letter-spacing-normal);
  line-height: var(--primitive-typography-line-height-none);
}

.anav-item.on {
  color: var(--tm-teal);
}

.anav-item .ni {
  position: relative;
  display: block;
}

.anav-item.on .lb {
  font-weight: var(--primitive-typography-weight-bold);
}

.anav-item .ni .cnt {
  position: absolute;
  top: -4px;
  right: -8px;
  min-width: 15px;
  height: 15px;
  padding: var(--primitive-spacing-zero) var(--primitive-spacing-xs-sm);
  border-radius: var(--primitive-radius-full);
  background: var(--tm-err-bold);
  color: var(--semantic-color-text-neutral-contrast);
  font-family: var(--font-mono);
  font-size: var(--app-text-10);
  font-weight: var(--primitive-typography-weight-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  border: var(--primitive-border-width-regular) solid var(--semantic-color-contrast-light);
}

/* ── aacct ─────────────────────────────────────────────── */
.aacct {
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: none;
}

/* ── v3-gap-eyebrow ─────────────────────────────────────────────── */
.dp-seclabel.v3-gap-eyebrow {
  margin-top: var(--primitive-spacing-2xl);
}

/* ── dp-ledger ─────────────────────────────────────────────── */
.dp-ledger {
  display: grid;
  gap: var(--primitive-spacing-lg);
  grid-template-columns: repeat(3,1fr);
  align-items: start;
}

/* ── astatus ─────────────────────────────────────────────── */
.astatus {
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--primitive-spacing-zero) var(--primitive-spacing-xl-2xl) var(--primitive-spacing-zero) var(--primitive-spacing-xl-2xl);
  background: var(--semantic-color-contrast-light);
  font-family: var(--font-mono);
}

.astatus .time {
  font-size: var(--app-text-12);
  font-weight: var(--primitive-typography-weight-medium);
  color: var(--tm-navy);
}

.astatus .sys {
  display: flex;
  align-items: center;
  gap: var(--primitive-spacing-md);
  color: var(--tm-navy);
}

/* ── dp-tg ─────────────────────────────────────────────── */
.dp-tg {
  font-size: var(--app-text-10);
  font-weight: var(--primitive-typography-weight-bold);
  letter-spacing: var(--primitive-typography-letter-spacing-wider);
  padding: var(--primitive-spacing-zero) var(--primitive-spacing-lg);
  border-radius: var(--primitive-radius-full);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  line-height: var(--primitive-typography-line-height-none);
}

.dp-tg--match {
  background: var(--tm-teal-bg);
  color: var(--tm-teal-700);
}

.dp-tg--elev {
  background: var(--tm-gold-subtle);
  color: var(--tm-gold-ink);
}

.dp-tg--join {
  background: var(--semantic-color-badge-progress-surface);
  color: var(--tm-navy);
}

/* ── ni2 ─────────────────────────────────────────────── */
.ni2 {
  position: relative;
  display: inline-flex;
}

.ni2 .cnt {
  position: absolute;
  top: -6px;
  right: -10px;
  min-width: 18px;
  height: 18px;
  padding: var(--primitive-spacing-zero) var(--primitive-spacing-sm);
  border-radius: var(--primitive-radius-full);
  background: var(--tm-err-bold,#AC0019);
  color: var(--semantic-color-text-neutral-contrast);
  font-family: var(--font-mono);
  font-size: var(--app-text-10);
  font-weight: var(--primitive-typography-weight-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  border: var(--primitive-border-width-regular) solid var(--semantic-color-contrast-light);
}

/* ── cnt ─────────────────────────────────────────────── */
.cnt {
  font-size: var(--app-text-10);
  min-width: 18px;
  height: 18px;
  padding: var(--primitive-spacing-zero) var(--primitive-spacing-sm);
  top: -6px;
  right: -10px;
}

/* ── band ─────────────────────────────────────────────── */
.band {
  margin-top: var(--primitive-spacing-2xl-3xl);
}

.band:first-child {
  margin-top: var(--primitive-spacing-xl);
}

/* ── dp-seclabel ─────────────────────────────────────────────── */
.dp-seclabel {
  font-family: var(--font-mono,monospace);
  font-size: var(--app-text-12);
  letter-spacing: var(--app-tracking-caps);
  text-transform: uppercase;
  color: var(--tm-navy);
  margin: var(--primitive-spacing-zero) var(--tm-gutter) var(--primitive-spacing-lg-xl);
  display: flex;
  align-items: center;
  gap: var(--primitive-spacing-sm-md);
  font-weight: var(--primitive-typography-weight-medium);
  opacity: 1;
}

.dp-seclabel--spread {
  justify-content: space-between;
}

.dp-seclabel .reddot {
  width: 7px;
  height: 7px;
  border-radius: var(--primitive-radius-full);
  background: var(--tm-err);
  flex: none;
  animation: tm-slowflash 2.4s ease-in-out infinite;
}

/* ── dp-dots ─────────────────────────────────────────────── */
.dp-dots {
  display: flex;
  gap: var(--primitive-spacing-sm-md);
  justify-content: center;
  margin-top: var(--primitive-spacing-lg-xl);
}

.dp-dots i {
  width: 6px;
  height: 6px;
  border-radius: var(--primitive-radius-full);
  background: var(--tm-line);
}

.dp-dots i.dp-dots__i--on {
  background: var(--tm-teal);
  width: 16px;
  border-radius: var(--primitive-radius-full);
}

/* ── aavatar ─────────────────────────────────────────────── */
.aavatar {
  width: 34px;
  height: 34px;
  border-radius: var(--primitive-radius-full);
  background: linear-gradient(150deg,var(--component-provenance-emerging-ink),var(--tm-teal-700));
  color: var(--semantic-color-text-neutral-contrast);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--app-text-12);
  font-weight: var(--primitive-typography-weight-bold);
  flex: none;
  letter-spacing: var(--primitive-typography-letter-spacing-normal);
}

/* ── v3-tail ─────────────────────────────────────────────── */
.v3-tail {
  height: var(--primitive-spacing-md);
}

/* ── ahome ─────────────────────────────────────────────── */
.ahome {
  display: flex;
  justify-content: center;
  padding: var(--primitive-spacing-sm-md) var(--primitive-spacing-zero) var(--primitive-spacing-md-lg);
  background: none;
  height: 22px;
  align-items: center;
  position: absolute;
  left: var(--primitive-spacing-zero);
  right: var(--primitive-spacing-zero);
  bottom: var(--primitive-spacing-zero);
  pointer-events: none;
}

.ahome .hpill {
  width: 134px;
  height: 5px;
  border-radius: var(--primitive-radius-xs);
  background: var(--component-hpill-background);
  opacity: .72;
  display: block;
}

/* ── tm-badges ─────────────────────────────────────────────── */
.tm-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--primitive-spacing-sm-md);
  margin-bottom: var(--primitive-spacing-md-lg);
}

/* ── tm-chip ─────────────────────────────────────────────── */
.tm-chip {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: var(--primitive-spacing-zero) var(--primitive-spacing-lg);
  border-radius: var(--primitive-radius-full);
  background: var(--semantic-color-surface-neutral-subtle,#F2F6F7);
  color: var(--tm-muted);
  font-size: var(--app-text-12);
  font-weight: var(--primitive-typography-weight-semibold);
  letter-spacing: var(--primitive-typography-letter-spacing-normal);
}

/* ── tm-ans ─────────────────────────────────────────────── */
.tm-ans {
  margin-top: var(--primitive-spacing-lg);
  background: var(--semantic-color-surface-neutral-subtle,#F2F6F7);
  border-radius: var(--primitive-radius-md);
  padding: var(--primitive-spacing-lg-xl) var(--primitive-spacing-lg-xl);
}

.tm-ans__k {
  font-family: var(--font-mono,monospace);
  font-size: var(--app-text-12);
  letter-spacing: var(--app-tracking-caps);
  text-transform: uppercase;
  color: var(--tm-teal-700);
  margin-bottom: var(--primitive-spacing-md);
}

.tm-ans__t {
  font-size: var(--app-text-14);
  line-height: var(--primitive-typography-line-height-normal);
  color: var(--tm-muted);
}

.tm-ans__flag {
  display: block;
  margin-top: var(--primitive-spacing-lg);
  padding-top: var(--primitive-spacing-md-lg);
  border-top: var(--primitive-border-width-thin) solid var(--tm-line-soft);
  font-size: var(--app-text-12);
  line-height: var(--primitive-typography-line-height-normal);
  color: var(--tm-navy, #032E42);
}

.tm-ans__flag b {
  font-weight: var(--primitive-typography-weight-bold);
  white-space: nowrap;
}

/* ── tm-ack ─────────────────────────────────────────────── */
.tm-ack {
  display: inline-flex;
  align-items: center;
  gap: var(--primitive-spacing-sm-md);
  margin-top: var(--primitive-spacing-md);
  font-size: var(--app-text-12);
  font-weight: var(--primitive-typography-weight-bold);
  color: var(--tm-err, #AC0019);
}

.tm-ack .dot {
  width: 7px;
  height: 7px;
  border-radius: var(--primitive-radius-full);
  background: var(--tm-err, #AC0019);
  animation: tm-slowflash 2.4s ease-in-out infinite;
}

/* ── tm-follow ─────────────────────────────────────────────── */
.tm-follow {
  display: inline-flex;
  align-items: center;
  gap: var(--primitive-spacing-md);
  height: 36px;
  padding: var(--primitive-spacing-zero) var(--primitive-spacing-xl);
  border-radius: var(--primitive-radius-full);
  border: var(--primitive-border-width-thin) solid var(--tm-teal);
  background: var(--tm-teal-bg);
  color: var(--tm-teal-700);
  font-size: var(--app-text-12);
  font-weight: var(--primitive-typography-weight-bold);
  margin-top: var(--primitive-spacing-lg-xl);
}

/* ── tm-askeract ─────────────────────────────────────────────── */
.tm-askeract {
  border-top: var(--primitive-border-width-thin) solid var(--tm-line-soft);
  margin-top: var(--primitive-spacing-lg-xl);
  padding-top: var(--primitive-spacing-lg-xl);
}

.tm-askeract__q {
  font-size: var(--app-text-14);
  font-weight: var(--primitive-typography-weight-bold);
  color: var(--tm-navy);
  margin-bottom: var(--primitive-spacing-lg);
}

.tm-askeract__r {
  display: flex;
  gap: var(--primitive-spacing-md-lg);
}

/* ── tm-askhd ─────────────────────────────────────────────── */
.tm-askhd {
  padding: var(--primitive-spacing-2xl) var(--primitive-spacing-xl-2xl) var(--primitive-spacing-zero);
}

.tm-askhd__k {
  font-family: var(--font-mono,monospace);
  font-size: var(--app-text-12);
  letter-spacing: var(--app-tracking-caps);
  text-transform: uppercase;
  color: var(--tm-ai,#802B4E);
  margin-bottom: var(--primitive-spacing-lg);
}

.tm-askhd__t {
  font-family: var(--primitive-typography-family-display,'Newsreader',serif);
  font-weight: var(--primitive-typography-weight-semibold);
  font-size: var(--app-text-28);
  line-height: var(--primitive-typography-line-height-tighter);
  letter-spacing: var(--primitive-typography-letter-spacing-normal);
  color: var(--tm-navy);
}

/* ── tm-ctx ─────────────────────────────────────────────── */
.tm-ctx {
  display: inline-flex;
  align-items: center;
  gap: var(--primitive-spacing-md);
  margin-top: var(--primitive-spacing-xl);
  max-width: 100%;
  height: 32px;
  padding: var(--primitive-spacing-zero) var(--primitive-spacing-lg);
  border-radius: var(--primitive-radius-full);
  background: var(--tm-teal-bg);
  color: var(--tm-teal-700);
  font-size: var(--app-text-12);
  font-weight: var(--primitive-typography-weight-semibold);
}

.tm-ctx .dot {
  width: 7px;
  height: 7px;
  border-radius: var(--primitive-radius-full);
  background: var(--tm-teal);
  flex: none;
}

.tm-ctx .nm {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tm-ctx .ed {
  font-family: var(--font-mono,monospace);
  font-size: var(--app-text-12);
  opacity: .75;
}

/* ── tm-askgrow ─────────────────────────────────────────────── */
.tm-askgrow {
  flex: 1;
  min-height: 14px;
}

/* ── tm-mic ─────────────────────────────────────────────── */
.tm-mic {
  width: 54px;
  height: 54px;
  flex: none;
  border-radius: var(--primitive-radius-full);
  border: var(--primitive-border-width-none);
  background: linear-gradient(152deg,#A33A63 0%,var(--tm-ai,#802B4E) 62%,#6B2342 100%);
  color: var(--semantic-color-text-neutral-contrast);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--component-send-glow);
}

/* ── mgrp ─────────────────────────────────────────────── */
.mgrp {
  font-family: 'DM Mono',monospace;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #5E7681;
  margin: var(--primitive-spacing-xl-2xl) 0 var(--primitive-spacing-md);
}

/* ── hint ─────────────────────────────────────────────── */
.hint {
  font-size: var(--app-text-12);
  color: #5E7681;
  margin-top: var(--primitive-spacing-2xl-3xl);
  padding-top: var(--primitive-spacing-xl);
  border-top: var(--primitive-border-width-thin) solid #1B2E37;
}

/* ── ax-scroll ─────────────────────────────────────────────── */
.ax-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--primitive-spacing-2xl) var(--primitive-spacing-xl-2xl) var(--primitive-spacing-2xl);
}

.ax-scroll::-webkit-scrollbar {
  width: 0;
}

/* ── ax-serif ─────────────────────────────────────────────── */
.ax-serif {
  font-family: var(--axserif);
  font-weight: var(--primitive-typography-weight-normal);
  letter-spacing: var(--primitive-typography-letter-spacing-normal);
}

/* ── ax-forming ─────────────────────────────────────────────── */
.ax-forming {
  font-family: var(--axsans);
  font-size: var(--app-text-22);
  line-height: var(--primitive-typography-line-height-snug);
  color: var(--axink);
  margin-top: var(--primitive-spacing-xl);
  word-break: break-word;
}

.ax-forming .ph {
  color: var(--semantic-color-border-neutral-default);
}

.ax-forming .cur {
  display: inline-block;
  width: 2px;
  height: 23px;
  background: var(--axteal);
  vertical-align: -4px;
  margin-left: var(--primitive-spacing-xs);
  animation: axblink 1s steps(1) infinite;
}

/* ── ax-vq ─────────────────────────────────────────────── */
.ax-vq {
  font-family: var(--axsans);
  font-size: var(--app-text-22);
  line-height: var(--primitive-typography-line-height-snug);
  color: var(--axink);
  margin-top: var(--primitive-spacing-xl);
}

.ax-vq .mut {
  color: var(--axink2);
}

/* ── ax-clarq ─────────────────────────────────────────────── */
.ax-clarq {
  font-family: var(--axserif);
  font-weight: var(--primitive-typography-weight-normal);
  font-size: var(--app-text-22);
  line-height: var(--primitive-typography-line-height-tight);
  color: var(--axink);
  margin-top: var(--primitive-spacing-lg);
}

/* ── ax-choices ─────────────────────────────────────────────── */
.ax-choices {
  display: flex;
  flex-direction: column;
  gap: var(--primitive-spacing-md-lg);
  margin-top: var(--primitive-spacing-2xl);
}

/* ── ax-choice ─────────────────────────────────────────────── */
.ax-choice {
  appearance: none;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: var(--primitive-spacing-xs-sm);
  cursor: pointer;
  border: var(--primitive-border-width-thin) solid var(--axtealsoft);
  background: rgba(143,207,205,.10);
  border-radius: var(--primitive-radius-lg);
  padding: var(--primitive-spacing-xl) var(--primitive-spacing-xl);
}

.ax-choice:hover {
  background: rgba(143,207,205,.20);
}

.ax-choice .l {
  font-family: var(--axsans);
  font-weight: var(--primitive-typography-weight-bold);
  font-size: var(--app-text-16);
  color: var(--axink);
}

.ax-choice .s {
  font-family: var(--axsans);
  font-size: var(--app-text-12);
  color: var(--axink2);
}

/* ── ax-list ─────────────────────────────────────────────── */
.ax-list {
  display: flex;
  flex-direction: column;
  margin-top: var(--primitive-spacing-xl-2xl);
}

/* ── ax-qstatic ─────────────────────────────────────────────── */
.ax-qstatic {
  font-family: var(--axsans);
  font-size: var(--app-text-22);
  line-height: var(--primitive-typography-line-height-snug);
  color: var(--axink);
  margin-top: var(--primitive-spacing-xl);
}

/* ── ax-pulse ─────────────────────────────────────────────── */
.ax-pulse {
  width: 9px;
  height: 9px;
  border-radius: var(--primitive-radius-circle);
  background: var(--axteal);
  flex: none;
  animation: axspulse 1.1s ease-in-out infinite;
}

/* ── ax-searchlog ─────────────────────────────────────────────── */
.ax-searchlog {
  margin-top: var(--primitive-spacing-2xl);
  display: flex;
  flex-direction: column;
}

/* ── ax-stick ─────────────────────────────────────────────── */
.ax-stick {
  width: 18px;
  height: 18px;
  flex: none;
  display: grid;
  place-items: center;
}

.ax-stick .dot {
  width: 8px;
  height: 8px;
  border-radius: var(--primitive-radius-circle);
  background: var(--axtealsoft);
}

.ax-stick .ck {
  display: none;
  color: var(--axtealdeep);
}

/* ── ax-sline ─────────────────────────────────────────────── */
.ax-sline {
  display: flex;
  align-items: center;
  gap: var(--primitive-spacing-lg);
  padding: var(--primitive-spacing-lg) var(--primitive-spacing-zero);
  border-bottom: var(--primitive-border-width-thin) solid var(--axhair);
  font-family: var(--axsans);
  font-size: var(--app-text-14);
  color: var(--axink2);
  opacity: 0;
  transform: translateY(5px);
  transition: opacity .45s,transform .45s,color .3s;
}

.ax-sline:last-child {
  border-bottom: var(--primitive-border-width-none);
}

.ax-sline.on {
  opacity: 1;
  transform: none;
}

.ax-sline.done {
  color: var(--axink);
}

.ax-sline.on:not(.done) .dot {
  animation: axspulse 1.1s ease-in-out infinite;
}

.ax-sline.done .dot {
  display: none;
}

.ax-sline.done .ck {
  display: block;
}

/* ── ax-lead ─────────────────────────────────────────────── */
.ax-lead {
  font-family: var(--axserif);
  font-weight: var(--primitive-typography-weight-normal);
  font-size: var(--app-text-28);
  line-height: var(--primitive-typography-line-height-tight);
  color: var(--axink);
  margin-top: var(--primitive-spacing-xl);
}

/* ── ax-metric ─────────────────────────────────────────────── */
.ax-metric {
  display: flex;
  align-items: flex-start;
  gap: var(--primitive-spacing-xl);
  margin-top: var(--primitive-spacing-2xl-3xl);
}

.ax-metric .num {
  font-family: var(--axserif);
  font-weight: var(--primitive-typography-weight-normal);
  font-size: var(--app-text-34);
  line-height: var(--primitive-typography-line-height-none);
  color: var(--axtealdeep);
  white-space: nowrap;
  flex: none;
  min-width: 100px;
}

.ax-metric .exp {
  font-size: var(--app-text-14);
  line-height: var(--primitive-typography-line-height-normal);
  color: var(--axink);
  margin-top: -2px;
}

.ax-metric + .ax-metric {
  margin-top: var(--primitive-spacing-xl-2xl);
  padding-top: var(--primitive-spacing-xl-2xl);
  border-top: var(--primitive-border-width-thin) solid var(--axhair);
}

.ax-metric .num small {
  font-family: var(--axserif);
  font-size: var(--app-text-18);
}

/* ── ax-meter ─────────────────────────────────────────────── */
.ax-meter {
  display: inline-flex;
  gap: var(--primitive-spacing-xs);
  flex: none;
}

.ax-meter i {
  width: 6px;
  height: 15px;
  border-radius: var(--primitive-radius-2xs);
  background: var(--axhair);
}

/* ── ev ─────────────────────────────────────────────── */
.ev--1 .ax-gr {
  color: var(--component-provenance-new-ink);
}

.ev--2 .ax-gr {
  color: var(--component-provenance-tested);
}

.ev--3 .ax-gr {
  color: var(--component-provenance-tested);
}

.ev--4 .ax-gr {
  color: var(--axtealdeep);
}

.ev--5 .ax-gr {
  color: var(--component-provenance-canon-ink);
}

.ev--1 .ax-meter i:nth-child(-n+1) {
  background: var(--component-provenance-new);
}

.ev--2 .ax-meter i:nth-child(-n+2) {
  background: var(--component-provenance-emerging);
}

.ev--3 .ax-meter i:nth-child(-n+3) {
  background: var(--component-provenance-tested);
}

.ev--4 .ax-meter i:nth-child(-n+4) {
  background: var(--tm-teal-700);
}

.ev--5 .ax-meter i:nth-child(-n+5) {
  background: var(--axgoldstamp);
}

/* ── ax-cols ─────────────────────────────────────────────── */
.ax-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: var(--primitive-spacing-3xl-4xl);
}

.ax-cols p {
  font-size: var(--app-text-12);
  line-height: var(--primitive-typography-line-height-normal);
  color: var(--axink2);
  margin: var(--primitive-spacing-md) var(--primitive-spacing-zero) var(--primitive-spacing-zero);
}

.ax-cols .c {
  padding: var(--primitive-spacing-zero) var(--primitive-spacing-xl);
}

.ax-cols .dose {
  font-family: var(--axserif);
  font-size: var(--app-text-18);
  color: var(--axink);
}

.ax-cols .c:first-child {
  padding-left: var(--primitive-spacing-zero);
  border-right: var(--primitive-border-width-thin) solid var(--axhair);
}

.ax-cols .c:last-child {
  padding-right: var(--primitive-spacing-zero);
  padding-left: var(--primitive-spacing-xl);
}

/* ── ax-tension ─────────────────────────────────────────────── */
.ax-tension {
  font-family: var(--axserif);
  font-size: var(--app-text-22);
  line-height: var(--primitive-typography-line-height-tight);
  color: var(--axink);
  margin-top: var(--primitive-spacing-xl);
}

/* ── ax-gapsub ─────────────────────────────────────────────── */
.ax-gapsub {
  font-family: var(--axsans);
  font-size: var(--app-text-14);
  line-height: var(--primitive-typography-line-height-normal);
  color: var(--axink2);
  margin-top: var(--primitive-spacing-lg);
  max-width: 36ch;
}

/* ── ax-cmopts ─────────────────────────────────────────────── */
.ax-cmopts {
  margin-top: var(--primitive-spacing-lg-xl);
  display: flex;
  flex-direction: column;
}

/* ── ax-dock ─────────────────────────────────────────────── */
.ax-dock {
  position: relative;
  z-index: var(--app-z-raised);
  background: var(--semantic-color-contrast-light);
}

/* ── ax-cta ─────────────────────────────────────────────── */
.ax-cta {
  width: 100%;
  min-height: 54px;
  border: var(--primitive-border-width-none);
  border-radius: var(--app-radius-comp);
  background: var(--axtealdeep);
  color: var(--semantic-color-text-neutral-contrast);
  font: 700 var(--app-text-16) var(--axsans);
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(0,73,75,.28);
}

.ax-cta:active {
  transform: translateY(1px);
}

/* ── ax-comp ─────────────────────────────────────────────── */
.ax-comp {
  border-top: var(--primitive-border-width-thin) solid var(--tm-line-soft);
  padding: var(--primitive-spacing-lg) var(--primitive-spacing-lg-xl);
  background: var(--semantic-color-contrast-light);
  display: flex;
  align-items: center;
  gap: var(--primitive-spacing-md);
}

/* ── ax-plus ─────────────────────────────────────────────── */
.ax-plus {
  width: 40px;
  height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  color: var(--axink2);
}

/* ── ax-input ─────────────────────────────────────────────── */
.ax-input {
  flex: 1;
  min-width: 0;
  border: var(--primitive-border-width-none);
  background: transparent;
  outline: none;
  font-family: var(--axsans);
  font-size: var(--app-text-16);
  color: var(--axink);
  height: var(--touch-target-min);
}

.ax-input::placeholder {
  color: var(--component-placeholder-text);
}

/* ── ax-mic ─────────────────────────────────────────────── */
.ax-mic {
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: var(--primitive-radius-full);
  border: var(--primitive-border-width-none);
  background: none;
  color: var(--axink2);
  display: grid;
  place-items: center;
  cursor: pointer;
}

/* ── ax-stop ─────────────────────────────────────────────── */
.ax-stop {
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: var(--primitive-radius-full);
  border: var(--primitive-border-width-none);
  background: rgba(255,255,255,.16);
  color: var(--semantic-color-text-neutral-contrast);
  display: none;
  place-items: center;
  cursor: pointer;
}

/* ── ax-home ─────────────────────────────────────────────── */
.ax-home {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 22px;
  background: var(--semantic-color-contrast-light);
}

.ax-home .hpill {
  width: 134px;
  height: 5px;
  border-radius: var(--primitive-radius-xs);
  background: var(--component-hpill-background);
}

/* ── ax-kb ─────────────────────────────────────────────── */
.ax-kb {
  display: none;
}

/* ── ax-attachlayer ─────────────────────────────────────────────── */
.ax-attachlayer {
  display: none;
  position: absolute;
  inset: var(--primitive-spacing-zero);
  z-index: var(--app-z-overlay);
}

/* ── ax-ioslayer ─────────────────────────────────────────────── */
.ax-ioslayer {
  display: none;
  position: absolute;
  inset: var(--primitive-spacing-zero);
  z-index: var(--app-z-overlay);
}

/* ── ax-attach-sheet ─────────────────────────────────────────────── */
.ax-attach-sheet {
  max-height: 82%;
}

/* ── ax-iossheet ─────────────────────────────────────────────── */
.ax-iossheet {
  position: absolute;
  left: var(--primitive-spacing-md);
  right: var(--primitive-spacing-md);
  bottom: var(--primitive-spacing-zero);
  padding-bottom: calc(10px + var(--safe-area-bottom,8px));
  display: flex;
  flex-direction: column;
  gap: var(--primitive-spacing-md);
}

/* ── ax-iosgroup ─────────────────────────────────────────────── */
.ax-iosgroup {
  background: rgba(250,251,251,.97);
  border-radius: var(--app-radius-group);
  overflow: hidden;
  box-shadow: var(--app-shadow-sheet-lift);
}

/* ── ax-iosopt ─────────────────────────────────────────────── */
.ax-iosopt {
  appearance: none;
  display: block;
  width: 100%;
  text-align: center;
  padding: var(--primitive-spacing-xl);
  border: var(--primitive-border-width-none);
  background: none;
  font-family: var(--axsans);
  font-size: var(--app-text-18);
  color: var(--axtealdeep);
  cursor: pointer;
}

.ax-iosopt+.ax-iosopt {
  border-top: var(--primitive-border-width-thin) solid rgba(3,46,66,.10);
}

/* ── ax-ioscancel ─────────────────────────────────────────────── */
.ax-ioscancel {
  appearance: none;
  width: 100%;
  text-align: center;
  padding: var(--primitive-spacing-xl);
  border: var(--primitive-border-width-none);
  background: rgba(250,251,251,.98);
  border-radius: var(--app-radius-group);
  font-family: var(--axsans);
  font-size: var(--app-text-18);
  font-weight: var(--primitive-typography-weight-bold);
  color: var(--axtealdeep);
  cursor: pointer;
  box-shadow: var(--component-ioscancel-shadow);
}

/* ── tm-ackd ─────────────────────────────────────────────── */
.tm-ackd {
  display: flex;
  align-items: center;
  gap: var(--primitive-spacing-md-lg);
  flex: 1;
  height: var(--touch-target-min);
  padding: var(--primitive-spacing-zero) var(--primitive-spacing-lg-xl);
  border-radius: var(--primitive-radius-md);
  background: var(--primitive-color-feedback-success-100);
  color: var(--primitive-color-feedback-success-600);
  font-size: var(--app-text-14);
  font-weight: var(--primitive-typography-weight-bold);
}

.tm-ackd .t {
  font-family: var(--font-mono,monospace);
  font-size: var(--app-text-12);
  font-weight: var(--primitive-typography-weight-normal);
  opacity: .85;
  margin-left: auto;
  white-space: nowrap;
}

/* ── tm-cmts ─────────────────────────────────────────────── */
.tm-cmts {
  margin-top: var(--primitive-spacing-zero);
}

/* ── tm-cmt ─────────────────────────────────────────────── */
.tm-cmt {
  padding: var(--primitive-spacing-xl) var(--primitive-spacing-xl-2xl);
  border-top: var(--primitive-border-width-thin) solid var(--tm-line-soft);
}

.tm-cmt__h {
  display: flex;
  align-items: center;
  gap: var(--primitive-spacing-md-lg);
}

.tm-cmt__who {
  font-size: var(--app-text-14);
  font-weight: var(--primitive-typography-weight-semibold);
  color: var(--tm-navy);
}

.tm-cmt__when {
  font-size: var(--app-text-12);
  color: var(--tm-muted);
  margin-left: auto;
}

.tm-cmt__flag {
  appearance: none;
  background: none;
  border: var(--primitive-border-width-none);
  color: var(--semantic-color-border-neutral-default);
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: -10px var(--primitive-spacing-zero);
}

.tm-cmt__t {
  font-size: var(--app-text-14);
  line-height: var(--primitive-typography-line-height-normal);
  color: var(--tm-muted);
  margin-top: var(--primitive-spacing-md);
}

.tm-cmt__role {
  font-size: var(--app-text-12);
  color: var(--tm-muted);
  margin-top: var(--primitive-spacing-xs-sm);
}

/* ── cx ─────────────────────────────────────────────── */
.cx {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.cx--sending svg {
  animation: none;
}

.cx--sending .cx__mk {
  animation: tm-drift 2.2s ease-in-out infinite;
}

/* ── tm-stale ─────────────────────────────────────────────── */
.tm-stale {
  margin: var(--primitive-spacing-zero) var(--primitive-spacing-xl-2xl) var(--primitive-spacing-sm);
  padding: var(--primitive-spacing-lg) var(--primitive-spacing-lg-xl);
  border-radius: var(--primitive-radius-md);
  background: var(--semantic-color-surface-neutral-subtle,#F2F6F7);
  font-size: var(--app-text-12);
  line-height: var(--primitive-typography-line-height-normal);
  color: var(--tm-muted);
}

.tm-stale b {
  color: var(--tm-navy);
  font-weight: var(--primitive-typography-weight-semibold);
}

/* ── ax-gr ─────────────────────────────────────────────── */
.ax-gr {
  font-family: var(--axmono);
  font-size: var(--app-text-10);
  letter-spacing: var(--app-tracking-caps);
  text-transform: uppercase;
  font-weight: var(--primitive-typography-weight-medium);
}

/* ── ax-evnote ─────────────────────────────────────────────── */
.ax-evnote {
  margin-top: var(--primitive-spacing-2xl);
  font-size: var(--app-text-12);
  color: var(--axink2);
  line-height: var(--primitive-typography-line-height-normal);
}

/* ── ax-label ─────────────────────────────────────────────── */
.ax-label {
  display: none;
  flex: 1;
  color: var(--primitive-color-ai-100);
  font-size: var(--app-text-16);
  font-weight: var(--primitive-typography-weight-semibold);
  line-height: var(--primitive-typography-line-height-tighter);
}

.ax-label small {
  display: block;
  font-weight: var(--primitive-typography-weight-normal);
  font-size: var(--app-text-12);
  opacity: .72;
  margin-top: 1px;
}

/* ── ax-vlabel ─────────────────────────────────────────────── */
.ax-vlabel {
  font-family: var(--axmono);
  font-size: var(--app-text-12);
  letter-spacing: var(--app-tracking-caps);
  text-transform: uppercase;
  color: var(--axmag);
  margin-top: var(--primitive-spacing-md);
  display: flex;
  align-items: center;
  gap: var(--primitive-spacing-md);
}

.ax-vlabel i {
  width: 7px;
  height: 7px;
  border-radius: var(--primitive-radius-circle);
  background: var(--axmag);
  box-shadow: var(--component-vlabel-pulse-shadow);
  animation: axrec 1.6s ease-out infinite;
}

/* ── ax-clareye ─────────────────────────────────────────────── */
.ax-clareye {
  font-family: var(--axmono);
  font-size: var(--app-text-12);
  letter-spacing: var(--app-tracking-caps);
  text-transform: uppercase;
  color: var(--axtealdeep);
  margin-top: var(--component-clareye-margin-top);
  display: flex;
  align-items: center;
  gap: var(--primitive-spacing-md);
}

.ax-clareye i {
  width: 7px;
  height: 7px;
  border-radius: var(--primitive-radius-circle);
  background: var(--axteal);
  flex: none;
}

/* ── ax-searching ─────────────────────────────────────────────── */
.ax-searching {
  margin-top: var(--primitive-spacing-3xl);
  display: flex;
  align-items: center;
  gap: var(--primitive-spacing-lg);
  font-family: var(--axmono);
  font-size: var(--app-text-12);
  letter-spacing: var(--app-tracking-caps);
  text-transform: uppercase;
  color: var(--axtealdeep);
}

/* ── base ─────────────────────────────────────────────── */
#axcommunitylink::after {
  content: "";
  position: absolute;
  left: var(--primitive-spacing-zero);
  right: var(--primitive-spacing-zero);
  top: 50%;
  transform: translateY(-50%);
  height: var(--touch-target-min);
}

/* ── ax-narrowinput ─────────────────────────────────────────────── */
.ax-narrowinput {
  flex: 1;
  min-width: 0;
  border: var(--primitive-border-width-none);
  background: transparent;
  outline: none;
  font-family: var(--axsans);
  font-size: var(--app-text-14);
  color: var(--axink);
  caret-color: var(--axteal);
  padding: var(--primitive-spacing-zero);
  align-self: stretch;
  min-height: var(--touch-target-min);
}

.ax-narrowinput::placeholder {
  color: #93a09b;
}

/* ── ax-cmbody ─────────────────────────────────────────────── */
.ax-cmbody {
  width: 100%;
  min-height: 150px;
  border: var(--primitive-border-width-thin) solid var(--axhair);
  border-radius: var(--app-radius-group);
  background: var(--semantic-color-contrast-light);
  padding: var(--primitive-spacing-lg-xl) var(--primitive-spacing-xl);
  font-family: var(--axsans);
  font-size: var(--app-text-16);
  line-height: var(--primitive-typography-line-height-normal);
  color: var(--axink);
  resize: none;
  outline: none;
  caret-color: var(--axteal);
}

.ax-cmbody:focus {
  border-color: var(--axteal);
  box-shadow: 0 0 0 3px rgba(0,149,152,.14);
}

/* ── tm-trailwrap ─────────────────────────────────────────────── */
.tm-trailwrap {
  margin-top: var(--primitive-spacing-2xl-3xl);
}

.tm-trailwrap summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--primitive-spacing-md-lg);
  padding: var(--primitive-spacing-xl) var(--primitive-spacing-xl-2xl);
  border-top: var(--primitive-border-width-thin) solid var(--tm-line-soft);
  border-bottom: var(--primitive-border-width-thin) solid var(--tm-line-soft);
  min-height: var(--touch-target-min);
}

.tm-trailwrap summary::-webkit-details-marker {
  display: none;
}

.tm-trailwrap summary .lbl {
  font-family: var(--font-mono,monospace);
  font-size: var(--app-text-12);
  letter-spacing: var(--app-tracking-caps);
  text-transform: uppercase;
  color: var(--tm-navy);
  font-weight: var(--primitive-typography-weight-medium);
}

.tm-trailwrap summary .cv {
  color: var(--tm-teal-700);
  transition: transform .18s ease;
  order: 3;
  display: flex;
  align-items: center;
}

.tm-trailwrap[open] summary {
  border-bottom-color: transparent;
}

.tm-trailwrap summary .tm-trail__n {
  font-size: var(--app-text-12);
  color: var(--tm-muted);
  margin-left: auto;
}

.tm-trailwrap[open] summary .cv {
  transform: rotate(180deg);
}

/* ── aphone ─────────────────────────────────────────────── */
.aphone {
  width: var(--app-shell-width);
  height: var(--app-shell-height);
  display: flex;
  flex-direction: column;
  background: var(--semantic-color-contrast-light);
  border-radius: var(--app-shell-radius);
  overflow: hidden;
  box-shadow: var(--app-shell-shadow);
  position: relative;
}

.aphone:has(.ax[data-ax="rest"]) {
  background: var(--tm-wash-ask);
}

.aphone:has(.ax[data-ax="rest"]) .astatus {
  background: transparent;
}

.aphone:has(.ax[data-ax="rest"]) .aappbar {
  background: transparent;
}

.aphone:has(.ax[data-ax="rest"]) .tm-ask.ax {
  background: transparent;
}

/* ── ax-wave ─────────────────────────────────────────────── */
.ax-wave {
  display: none;
  flex: 1;
  align-items: center;
  gap: var(--primitive-spacing-xs-sm);
  height: 24px;
  overflow: hidden;
  justify-content: center;
}

.ax-wave i {
  width: 3px;
  border-radius: var(--primitive-radius-xs);
  background: rgba(246,228,236,.92);
  animation: axeq 1s ease-in-out infinite;
}

.ax-wave i:nth-child(2n) {
  animation-delay: .12s;
}

.ax-wave i:nth-child(3n) {
  animation-delay: .24s;
}

/* ── base ─────────────────────────────────────────────── */
#axioscancel {
  position: relative;
}

/* ── ax-back ─────────────────────────────────────────────── */
.ax-back {
  display: inline-flex;
  align-items: center;
  gap: var(--primitive-spacing-md);
  min-height: var(--touch-target-min);
  margin-left: -4px;
  font-family: var(--axsans);
  font-weight: var(--primitive-typography-weight-bold);
  font-size: var(--app-text-14);
  color: var(--axink);
  text-decoration: none;
  cursor: pointer;
  position: relative;
}

.ax-back::after {
  content: "";
  position: absolute;
  left: var(--primitive-spacing-zero);
  right: var(--primitive-spacing-zero);
  top: 50%;
  transform: translateY(-50%);
  height: var(--touch-target-min);
}

.ax-back:hover {
  color: var(--axtealdeep);
}

/* ── tm-comp ─────────────────────────────────────────────── */
.tm-comp {
  border-top: var(--primitive-border-width-thin) solid var(--tm-line-soft);
  padding: var(--primitive-spacing-lg) var(--primitive-spacing-lg-xl);
  background: var(--semantic-color-contrast-light);
  display: flex;
  align-items: center;
  gap: var(--primitive-spacing-md);
}

.tm-comp__f {
  flex: 1;
  min-height: var(--touch-target-min);
  border: var(--primitive-border-width-none);
  border-radius: var(--primitive-radius-zero);
  padding: var(--primitive-spacing-zero);
  font-size: var(--app-text-16);
  line-height: var(--primitive-typography-line-height-snug);
  color: var(--tm-navy,#12302E);
  background: none;
  min-width: 0;
  display: flex;
  align-items: center;
}

.tm-comp__plus {
  width: 40px;
  height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  color: var(--tm-mid);
}

.tm-comp__mic {
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: var(--primitive-radius-full);
  border: var(--primitive-border-width-none);
  background: none;
  color: var(--tm-mid);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.tm-comp__send {
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: var(--primitive-radius-full);
  border: var(--primitive-border-width-none);
  background: var(--tm-ai,#802B4E);
  color: var(--semantic-color-text-neutral-contrast);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: var(--component-send-glow);
}

.tm-comp__f .ph {
  color: var(--component-placeholder-text);
}

.tm-comp__f .cur {
  display: inline-block;
  width: 2px;
  height: 19px;
  background: var(--tm-teal,#009598);
  vertical-align: -4px;
  margin-left: var(--primitive-spacing-xs);
}

/* ── ax-cmnote ─────────────────────────────────────────────── */
.ax-cmnote {
  display: flex;
  align-items: flex-start;
  gap: var(--primitive-spacing-lg);
  margin-top: var(--primitive-spacing-lg);
  font-family: var(--axsans);
  font-size: var(--app-text-12);
  line-height: var(--primitive-typography-line-height-snug);
  color: var(--axink2);
  padding-left: var(--primitive-spacing-xs);
}

.ax-cmnote svg {
  color: var(--axtealdeep);
  flex: none;
  margin: 1px var(--primitive-spacing-sm) var(--primitive-spacing-zero);
}

/* ── ax-evitem ─────────────────────────────────────────────── */
.ax-evitem {
  display: grid;
  grid-template-columns: 1fr 84px;
  align-items: start;
  gap: var(--primitive-spacing-xl);
  padding: var(--primitive-spacing-lg-xl) var(--primitive-spacing-xl);
  border-bottom: var(--primitive-border-width-thin) solid var(--axhair);
  text-decoration: none;
  background: var(--semantic-color-contrast-light);
  border: var(--primitive-border-width-thin) solid var(--axhair);
  border-radius: var(--app-radius-group);
  margin-bottom: var(--primitive-spacing-md-lg);
  box-shadow: var(--component-evitem-shadow);
}

.ax-evitem:last-of-type {
  border-bottom: var(--primitive-border-width-thin) solid var(--axhair);
  margin-bottom: var(--primitive-spacing-zero);
}

.ax-evitem .m {
  margin-top: var(--primitive-spacing-xs-sm);
  font-family: var(--axsans);
  font-size: var(--app-text-12);
  line-height: var(--primitive-typography-line-height-snug);
  color: var(--axink2);
}

.ax-evitem .t {
  font-family: var(--axsans);
  font-weight: var(--primitive-typography-weight-bold);
  font-size: var(--app-text-16);
  line-height: var(--primitive-typography-line-height-tight);
  color: var(--axink);
}

.ax-evitem:active {
  background: var(--semantic-color-surface-neutral-subtle,#F2F6F7);
}

.ax-evitem>span:first-child {
  display: flex;
  flex-direction: column;
  gap: var(--primitive-spacing-xs-sm);
  min-width: 0;
}

/* ── ax-evsec ─────────────────────────────────────────────── */
.ax-evsec {
  font-family: var(--axmono);
  font-size: var(--app-text-12);
  letter-spacing: var(--app-tracking-caps);
  text-transform: uppercase;
  color: var(--axink2);
  margin-top: var(--primitive-spacing-2xl-3xl);
  margin-bottom: var(--primitive-spacing-md-lg);
}

/* ── ax-foot ─────────────────────────────────────────────── */
.ax-foot {
  margin-top: var(--primitive-spacing-3xl);
  padding-top: var(--primitive-spacing-xl-2xl);
  border-top: var(--primitive-border-width-thin) solid var(--axhair);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--primitive-spacing-lg);
}

.ax-foot > .ax-grade {
  align-self: flex-start;
}

/* ── ax-actions ─────────────────────────────────────────────── */
.ax-actions {
  display: flex;
  gap: var(--primitive-spacing-md-lg);
  flex: none;
  width: 100%;
  align-items: center;
  justify-content: flex-start;
  margin-top: var(--primitive-spacing-zero);
}

.ax-actions--r {
  margin-top: var(--primitive-spacing-zero);
  justify-content: flex-start;
  width: 100%;
  align-items: center;
  gap: var(--primitive-spacing-md-lg);
}

/* ── tm-row ─────────────────────────────────────────────── */
.tm-row {
  display: flex;
  align-items: center;
  gap: var(--primitive-spacing-lg-xl);
  background: var(--semantic-color-contrast-light);
  border: var(--primitive-border-width-thin) solid var(--tm-line-soft);
  border-radius: var(--app-radius-group);
  padding: var(--primitive-spacing-lg-xl) var(--primitive-spacing-xl);
  margin-bottom: var(--primitive-spacing-lg);
  box-shadow: var(--tm-e1);
  min-height: var(--touch-target-min);
}

.tm-row__b {
  flex: 1;
  min-width: 0;
}

.tm-row__n {
  font-size: var(--app-text-14);
  font-weight: var(--primitive-typography-weight-semibold);
  color: var(--tm-navy);
  line-height: var(--primitive-typography-line-height-tight);
}

.tm-row__m {
  font-size: var(--app-text-12);
  color: var(--tm-muted);
  margin-top: var(--primitive-spacing-xs-sm);
  line-height: var(--primitive-typography-line-height-snug);
}

.tm-row__c {
  font-family: var(--font-mono,monospace);
  font-size: var(--app-text-12);
  font-weight: var(--primitive-typography-weight-medium);
  color: var(--tm-teal-700);
  background: var(--tm-teal-bg);
  border-radius: var(--primitive-radius-full);
  height: 24px;
  min-width: 30px;
  padding: var(--primitive-spacing-zero) var(--primitive-spacing-md-lg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.tm-row__chev {
  color: var(--semantic-color-border-neutral-default);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tm-row--wp {
  background: var(--tm-teal-bg);
  border-color: var(--semantic-color-surface-primary-subtle);
}

.tm-row--must {
  background: var(--primitive-color-neutral-gray-white,var(--semantic-color-contrast-light));
}

.tm-row__c--must {
  background: var(--semantic-color-contrast-light);
  color: var(--semantic-color-text-warning-bold);
}

.tm-row--wp .tm-row__c {
  background: var(--semantic-color-contrast-light);
}

.tm-row--must .tm-row__n {
  color: var(--semantic-color-text-warning-bold);
}

/* ── tm-ask ─────────────────────────────────────────────── */
.tm-ask.ax {
  min-height: 0;
}

.tm-ask.ax ~ * .aappbar__lead {
  cursor: pointer;
}

/* ── ax-grade ─────────────────────────────────────────────── */
.ax-grade {
  display: inline-flex;
  align-items: center;
  gap: var(--primitive-spacing-md-lg);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.ax-grade--col {
  margin-top: var(--primitive-spacing-lg-xl);
  gap: var(--primitive-spacing-md);
}

.ax-grade--ev {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--primitive-spacing-sm-md);
  margin-top: var(--primitive-spacing-xs);
}

a.ax-grade {
  position: relative;
}

a.ax-grade::after {
  content: "";
  position: absolute;
  left: var(--primitive-spacing-zero);
  right: var(--primitive-spacing-zero);
  top: 50%;
  transform: translateY(-50%);
  height: var(--touch-target-min);
}

.ax-grade .arw {
  display: inline-flex;
  opacity: .85;
}

.ax-grade.ev--1 {
  color: var(--component-provenance-new-ink);
}

.ax-grade.ev--2 {
  color: var(--component-provenance-tested);
}

.ax-grade.ev--3 {
  color: var(--component-provenance-tested);
}

.ax-grade.ev--4 {
  color: var(--axtealdeep);
}

.ax-grade.ev--5 {
  color: var(--component-provenance-canon-ink);
}

.ax-grade--col .ax-gr {
  font-size: var(--app-text-10);
  letter-spacing: var(--app-tracking-caps);
}

.ax-grade--ev .ax-gr {
  font-size: var(--app-text-10);
  letter-spacing: var(--app-tracking-caps);
}

.ax-grade--col .arw {
  margin-left: 1px;
}

.ax-grade--col .ax-meter i {
  height: 13px;
  width: 5px;
}

.ax-grade--ev .ax-meter i {
  width: 5px;
  height: 12px;
}

/* ── ax-anseye ─────────────────────────────────────────────── */
.ax-anseye {
  margin-top: var(--primitive-spacing-zero);
  font-family: var(--axmono);
  font-size: var(--app-text-12);
  letter-spacing: var(--app-tracking-caps);
  text-transform: uppercase;
  color: var(--axtealdeep);
}

.ax-anseye.gold {
  color: var(--tm-navy, #032E42);
}

/* ── ax-anshd ─────────────────────────────────────────────── */
.ax-anshd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--primitive-spacing-lg);
  margin-top: var(--primitive-spacing-zero);
}

.ax-anshd .ax-anseye {
  margin-top: var(--primitive-spacing-zero);
}

.ax-anshd .ax-grade {
  flex: none;
}

/* ── ax-evlead ─────────────────────────────────────────────── */
.ax-evlead {
  font-family: var(--axserif);
  font-weight: var(--primitive-typography-weight-normal);
  font-size: var(--app-text-22);
  line-height: var(--primitive-typography-line-height-tight);
  color: var(--axink);
  margin-top: var(--primitive-spacing-xl);
}

/* ── tm-aldate ─────────────────────────────────────────────── */
.tm-aldate {
  font-family: var(--font-mono,monospace);
  font-size: var(--app-text-12);
  letter-spacing: var(--app-tracking-caps);
  text-transform: uppercase;
  color: var(--tm-faint);
  padding: var(--primitive-spacing-xl-2xl) var(--primitive-spacing-xl-2xl) var(--primitive-spacing-md);
}

/* ── tm-alnote ─────────────────────────────────────────────── */
.tm-alnote {
  margin: var(--primitive-spacing-zero) var(--primitive-spacing-xl-2xl);
  padding: var(--primitive-spacing-lg-xl) var(--primitive-spacing-zero) var(--primitive-spacing-xs);
  font-size: var(--app-text-12);
  line-height: var(--primitive-typography-line-height-normal);
  color: var(--tm-muted);
}

.tm-alnote b {
  color: var(--tm-navy);
  font-weight: var(--primitive-typography-weight-semibold);
}

/* ── base ─────────────────────────────────────────────── */
#axcommunitylink {
  position: relative;
  font-size: var(--app-text-14);
  font-weight: var(--primitive-typography-weight-bold);
  text-decoration: none;
  color: var(--semantic-color-text-primary-default, #007072);
}

/* ── ax-followup ─────────────────────────────────────────────── */
.ax-followup {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--primitive-spacing-sm-md);
  min-height: var(--touch-target-min);
  font-family: var(--axsans);
  font-size: var(--app-text-14);
  font-weight: var(--primitive-typography-weight-bold);
  color: var(--semantic-color-text-primary-default, #007072);
  text-decoration: none;
  white-space: nowrap;
}

.ax-followup svg {
  flex: none;
}

/* ── base ─────────────────────────────────────────────── */
#axreask {
  font-size: var(--app-text-14);
  text-decoration: underline;
}

/* ── tm-reveal ─────────────────────────────────────────────── */
.tm-reveal {
  margin: var(--primitive-spacing-xl-2xl) var(--tm-gutter) var(--primitive-spacing-zero);
  padding: var(--primitive-spacing-xl) var(--primitive-spacing-xl);
  border-radius: var(--app-radius-group);
  background: var(--tm-gold-subtle);
  border: var(--primitive-border-width-thin) solid #EFE4CE;
}

.tm-reveal__k {
  font-family: var(--font-mono,monospace);
  font-size: var(--app-text-12);
  letter-spacing: var(--app-tracking-caps);
  text-transform: uppercase;
  color: var(--tm-gold-ink);
  margin-bottom: var(--primitive-spacing-md-lg);
}

.tm-reveal__r {
  display: flex;
  align-items: baseline;
  gap: var(--primitive-spacing-md-lg);
  padding: var(--primitive-spacing-sm) var(--primitive-spacing-zero);
  flex-wrap: wrap;
}

.tm-reveal__n {
  font-size: var(--app-text-14);
  font-weight: var(--primitive-typography-weight-bold);
  color: var(--tm-navy);
}

.tm-reveal__s {
  font-size: var(--app-text-12);
  color: var(--tm-muted);
}

.tm-reveal__m {
  font-size: var(--app-text-12);
  line-height: var(--primitive-typography-line-height-normal);
  color: var(--tm-gold-ink);
  margin-top: var(--primitive-spacing-md-lg);
  padding-top: var(--primitive-spacing-md-lg);
  border-top: var(--primitive-border-width-thin) solid var(--primitive-color-brand-secondary-100);
}

/* ── tm-flabel ─────────────────────────────────────────────── */
.tm-flabel {
  font-family: var(--font-mono,monospace);
  font-size: var(--app-text-12);
  letter-spacing: var(--app-tracking-caps);
  text-transform: uppercase;
  color: var(--tm-muted);
  margin: var(--primitive-spacing-2xl) var(--primitive-spacing-zero) var(--primitive-spacing-md-lg);
}

.tm-flabel--first {
  margin-top: var(--primitive-spacing-xl-2xl);
}

/* ── tm-aud ─────────────────────────────────────────────── */
.tm-aud {
  display: flex;
  align-items: center;
  gap: var(--primitive-spacing-lg);
  padding: var(--primitive-spacing-lg-xl) var(--primitive-spacing-xl);
  border-radius: var(--app-radius-group);
  background: var(--semantic-color-surface-neutral-subtle,#F2F6F7);
}

.tm-aud__b {
  flex: 1;
  min-width: 0;
}

.tm-aud__n {
  font-size: var(--app-text-16);
  font-weight: var(--primitive-typography-weight-bold);
  color: var(--tm-navy);
}

.tm-aud__m {
  font-size: var(--app-text-12);
  color: var(--tm-muted);
  margin-top: var(--primitive-spacing-xs);
  line-height: var(--primitive-typography-line-height-snug);
}

.tm-aud__lock {
  color: var(--tm-muted);
  flex: none;
  display: flex;
  align-items: center;
}

/* ── tm-input ─────────────────────────────────────────────── */
.tm-input {
  width: 100%;
  border: var(--primitive-border-width-thin) solid var(--tm-line);
  border-radius: var(--app-radius-group);
  background: var(--semantic-color-contrast-light);
  padding: var(--primitive-spacing-lg-xl) var(--primitive-spacing-xl);
  font-family: inherit;
  color: var(--tm-navy);
  outline: none;
  resize: none;
  min-height: 52px;
  font-size: var(--app-text-16);
  font-weight: var(--primitive-typography-weight-bold);
}

.tm-input::placeholder {
  color: var(--component-placeholder-text);
  font-weight: var(--primitive-typography-weight-normal);
}

/* ── tm-body ─────────────────────────────────────────────── */
.tm-body {
  width: 100%;
  border: var(--primitive-border-width-thin) solid var(--tm-line);
  border-radius: var(--app-radius-group);
  background: var(--semantic-color-contrast-light);
  padding: var(--primitive-spacing-lg-xl) var(--primitive-spacing-xl);
  font-family: inherit;
  color: var(--tm-navy);
  outline: none;
  resize: none;
  min-height: 132px;
  font-size: var(--app-text-14);
  line-height: var(--primitive-typography-line-height-normal);
  font-weight: var(--primitive-typography-weight-normal);
}

.tm-body::placeholder {
  color: var(--component-placeholder-text);
  font-weight: var(--primitive-typography-weight-normal);
}

/* ── ax-mentnote ─────────────────────────────────────────────── */
.ax-mentnote {
  margin-top: var(--primitive-spacing-lg);
  font-family: var(--axsans);
  font-size: var(--app-text-12);
  line-height: var(--primitive-typography-line-height-normal);
  color: var(--axink2);
}

.ax-mentnote b {
  color: var(--axink);
  font-weight: var(--primitive-typography-weight-bold);
}

/* ── ax-cmwrap ─────────────────────────────────────────────── */
.ax-cmwrap {
  position: relative;
}

/* ── ax-at ─────────────────────────────────────────────── */
.ax-at {
  appearance: none;
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  gap: var(--primitive-spacing-lg);
  background: none;
  border: var(--primitive-border-width-none);
  cursor: pointer;
  padding: var(--primitive-spacing-md) var(--primitive-spacing-md);
  border-radius: var(--primitive-radius-sm);
  font-family: var(--axsans);
  min-height: var(--touch-target-min);
}

.ax-at__a {
  width: 28px;
  height: 28px;
  border-radius: var(--primitive-radius-full);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--app-text-12);
  font-weight: var(--primitive-typography-weight-bold);
  color: var(--semantic-color-text-neutral-contrast);
  background: linear-gradient(150deg,var(--component-provenance-emerging-ink),var(--tm-teal-700));
}

.ax-at__b {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.ax-at__n {
  font-size: var(--app-text-14);
  font-weight: var(--primitive-typography-weight-bold);
  color: var(--axink);
}

.ax-at__m {
  font-size: var(--app-text-12);
  color: var(--axink2);
}

.ax-at__on {
  font-family: var(--axmono);
  font-size: var(--app-text-12);
  color: var(--axtealdeep);
  flex: none;
}

.ax-at--has {
  opacity: .5;
  cursor: default;
}

.ax-at:hover {
  background: var(--semantic-color-surface-neutral-subtle,#F2F6F7);
}

/* ── ax-atmenu ─────────────────────────────────────────────── */
.ax-atmenu {
  display: none;
  position: absolute;
  left: var(--primitive-spacing-zero);
  right: var(--primitive-spacing-zero);
  bottom: 100%;
  z-index: var(--app-z-overlay);
  margin-bottom: var(--primitive-spacing-md);
  padding: var(--primitive-spacing-sm-md);
  border-radius: var(--app-radius-group);
  background: var(--semantic-color-contrast-light);
  border: var(--primitive-border-width-thin) solid var(--axhair);
  box-shadow: var(--component-atmenu-shadow);
}

.ax-atmenu__l {
  display: flex;
  flex-direction: column;
}

.ax-atmenu__f {
  font-family: var(--axsans);
  font-size: var(--app-text-12);
  line-height: var(--primitive-typography-line-height-normal);
  color: var(--axink2);
  padding: var(--primitive-spacing-md-lg) var(--primitive-spacing-md) var(--primitive-spacing-sm);
  margin-top: var(--primitive-spacing-sm);
  border-top: var(--primitive-border-width-thin) solid var(--axhair);
}

.ax-atmenu__f b {
  color: var(--axink);
  font-weight: var(--primitive-typography-weight-bold);
}

.ax-atmenu.on {
  display: block;
}

/* ── ax-ghost ─────────────────────────────────────────────── */
.ax-ghost {
  position: fixed;
  z-index: var(--app-z-ghost);
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  gap: var(--primitive-spacing-md);
  height: var(--touch-target-min);
  padding: var(--primitive-spacing-zero) var(--primitive-spacing-sm-md);
  border-radius: var(--primitive-radius-full);
  background: var(--semantic-color-contrast-light);
  box-shadow: 0 8px 22px rgba(3,46,66,.20), inset 0 0 0 1px var(--axhair);
  font-family: var(--axsans);
  font-size: var(--app-text-14);
  font-weight: var(--primitive-typography-weight-bold);
  color: var(--axink);
}

/* ── tm-evid ─────────────────────────────────────────────── */
.tm-evid {
  margin-top: var(--primitive-spacing-lg-xl);
  padding: var(--primitive-spacing-lg) var(--primitive-spacing-lg-xl);
  border-radius: var(--primitive-radius-md);
  background: var(--semantic-color-surface-neutral-subtle,#F2F6F7);
}

.tm-evid .tm-prov {
  margin-top: var(--primitive-spacing-zero);
  padding-top: var(--primitive-spacing-zero);
  border-top: var(--primitive-border-width-none);
}

/* ── tm-meter ─────────────────────────────────────────────── */
.tm-meter {
  display: flex;
  gap: var(--primitive-spacing-xs-sm);
}

.tm-meter i {
  width: 5px;
  height: 13px;
  border-radius: var(--primitive-radius-2xs);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--tm-line);
}

.tm-meter--canon i:nth-child(-n+5) {
  background: var(--tm-gold);
  box-shadow: none;
}

.tm-meter--emerging i:nth-child(-n+3) {
  background: var(--component-provenance-tested);
  box-shadow: none;
}

.tm-meter--new i:nth-child(-n+1) {
  background: var(--component-provenance-new);
  box-shadow: none;
}

/* ── tm-obsnote ─────────────────────────────────────────────── */
.tm-obsnote {
  margin-top: var(--primitive-spacing-lg);
  font-size: var(--app-text-12);
  line-height: var(--primitive-typography-line-height-normal);
  color: var(--tm-muted);
}

.tm-obsnote b {
  color: var(--tm-navy);
  font-weight: var(--primitive-typography-weight-semibold);
}

/* ── tm-reach ─────────────────────────────────────────────── */
.tm-reach {
  margin-top: var(--primitive-spacing-md-lg);
  font-size: var(--app-text-12);
  line-height: var(--primitive-typography-line-height-normal);
  color: var(--tm-muted);
}

.tm-reach b {
  color: var(--tm-navy);
  font-weight: var(--primitive-typography-weight-semibold);
}

/* ── tm-createrow ─────────────────────────────────────────────── */
.tm-createrow {
  margin-top: var(--primitive-spacing-xl);
}

/* ── tm-topic ─────────────────────────────────────────────── */
.tm-topic {
  padding: var(--primitive-spacing-3xl) var(--primitive-spacing-xl-2xl) var(--primitive-spacing-sm-md);
}

.tm-topic__eyebrow {
  font-family: var(--font-mono,monospace);
  font-size: var(--app-text-12);
  letter-spacing: var(--app-tracking-caps);
  text-transform: uppercase;
  color: var(--tm-teal-700);
  margin-bottom: var(--primitive-spacing-md-lg);
}

.tm-topic__name {
  font-family: var(--primitive-typography-family-display,'Newsreader',serif);
  font-weight: var(--primitive-typography-weight-semibold);
  font-size: var(--app-text-28);
  line-height: var(--primitive-typography-line-height-tighter);
  letter-spacing: var(--primitive-typography-letter-spacing-normal);
  color: var(--tm-navy);
}

.tm-topic__meta {
  font-family: var(--font-mono,monospace);
  font-size: var(--app-text-12);
  color: var(--tm-muted);
  margin-top: var(--primitive-spacing-md-lg);
  line-height: var(--primitive-typography-line-height-normal);
}

.tm-topic__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--primitive-spacing-xl);
  min-height: 30px;
  margin-bottom: var(--primitive-spacing-md-lg);
}

.tm-topic .tm-follow {
  vertical-align: middle;
}

.tm-topic .tm-create {
  margin-left: var(--primitive-spacing-md);
  vertical-align: middle;
}

.tm-topic__top .tm-topic__eyebrow {
  margin-bottom: var(--primitive-spacing-zero);
}

/* ── tm-post-ann ─────────────────────────────────────────────── */
.tm-post-ann {
  display: inline-flex;
  align-items: center;
  gap: var(--primitive-spacing-md);
  height: auto;
  padding: var(--primitive-spacing-zero) var(--primitive-spacing-xl);
  margin-top: var(--primitive-spacing-xl-2xl);
  border-radius: var(--primitive-radius-md);
  border: var(--primitive-border-width-thin) solid var(--tm-line);
  background: var(--semantic-color-contrast-light);
  color: var(--tm-navy);
  font-size: var(--app-text-14);
  font-weight: var(--primitive-typography-weight-bold);
  min-height: var(--touch-target-min);
}

/* ── tm-createnote ─────────────────────────────────────────────── */
.tm-createnote {
  margin-top: var(--primitive-spacing-lg);
  font-size: var(--app-text-12);
  line-height: var(--primitive-typography-line-height-normal);
  color: var(--tm-muted);
  max-width: 40ch;
}

.tm-createnote b {
  color: var(--tm-navy);
  font-weight: var(--primitive-typography-weight-semibold);
}

/* ── tm-powers ─────────────────────────────────────────────── */
.tm-powers {
  margin-top: var(--primitive-spacing-2xl);
  border-top: var(--primitive-border-width-thin) solid var(--tm-line-soft);
  padding-top: var(--primitive-spacing-xl);
}

.tm-powers__h {
  font-family: var(--font-mono,monospace);
  font-size: var(--app-text-12);
  letter-spacing: var(--app-tracking-caps);
  text-transform: uppercase;
  color: var(--tm-muted);
  margin-bottom: var(--primitive-spacing-lg);
}

.tm-powers__r {
  display: flex;
  gap: var(--primitive-spacing-lg);
  padding: var(--primitive-spacing-md-lg) var(--primitive-spacing-zero);
  align-items: baseline;
}

.tm-powers__r .y {
  width: 96px;
  flex: none;
  font-size: var(--app-text-14);
  font-weight: var(--primitive-typography-weight-bold);
  color: var(--tm-navy);
}

.tm-powers__r .m {
  flex: 1;
  font-size: var(--app-text-12);
  line-height: var(--primitive-typography-line-height-normal);
  color: var(--tm-mid);
}

.tm-powers__r + .tm-powers__r {
  border-top: var(--primitive-border-width-thin) solid var(--tm-line-soft);
}

.tm-powers__r--no .y {
  color: var(--tm-muted);
}

.tm-powers__r--no .m {
  color: var(--tm-muted);
}

.tm-powers__r .m b {
  color: var(--tm-navy);
  font-weight: var(--primitive-typography-weight-bold);
}

/* ── ax-routing ─────────────────────────────────────────────── */
.ax-routing {
  display: none;
  margin-top: var(--primitive-spacing-md-lg);
  padding-left: var(--primitive-spacing-xs);
  font-family: var(--axsans);
  font-size: var(--app-text-12);
  line-height: var(--primitive-typography-line-height-normal);
  color: var(--axtealdeep);
}

.ax-routing.on {
  display: block;
}

/* ── base ─────────────────────────────────────────────── */
body {
  margin: var(--primitive-spacing-zero);
  font-family: 'Atkinson Hyperlegible Next',-apple-system,system-ui,sans-serif;
  background: #0E1B22;
  -webkit-font-smoothing: antialiased;
  color: #E7EFEF;
  line-height: var(--primitive-typography-line-height-normal);
  height: 100%;
}

/* ── base ─────────────────────────────────────────────── */
html {
  height: 100%;
}

/* ── wrap ─────────────────────────────────────────────── */
.wrap {
  display: flex;
  min-height: 100vh;
  height: 100vh;
  overflow: hidden;
}

/* ── stage ─────────────────────────────────────────────── */
.stage {
  flex: 1;
  display: flex;
  gap: var(--primitive-spacing-3xl-4xl);
  padding: var(--primitive-spacing-zero) 44px;
  align-items: stretch;
  height: 100vh;
  overflow: hidden;
}

/* ── rail ─────────────────────────────────────────────── */
.rail {
  width: 280px;
  flex: none;
  padding: 30px 22px;
  border-right: 1px solid #1B2E37;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.rail::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.rail h1 {
  font-size: 16px;
  margin: var(--primitive-spacing-md) 0 var(--primitive-spacing-sm);
  color: var(--semantic-color-text-neutral-contrast);
}

.rail .eyebrow {
  font-family: 'DM Mono',monospace;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #57C7C4;
  margin: 0;
}

.rail p.sub {
  font-size: 12px;
  color: #8AA3A8;
  line-height: 1.5;
  margin: var(--primitive-spacing-md) 0 22px;
}

/* ── phonewrap ─────────────────────────────────────────────── */
.phonewrap {
  flex: none;
  height: 100%;
  overflow-y: auto;
  padding: 44px 44px 60px;
  margin: var(--primitive-spacing-zero) -44px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.phonewrap::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

/* ── nh ─────────────────────────────────────────────── */
.nh {
  font-family: 'DM Mono',monospace;
  font-size: 10px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #5E7681;
  margin: 0 0 var(--primitive-spacing-md);
}

/* ── notes ─────────────────────────────────────────────── */
.notes {
  max-width: 430px;
  height: 100%;
  overflow-y: auto;
  padding: 44px 0 60px;
  flex: 1;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.notes::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.notes h2 {
  font-size: 20px;
  margin: 0 0 18px;
  color: var(--semantic-color-text-neutral-contrast);
  font-weight: var(--primitive-typography-weight-semibold);
}

.notes p {
  font-size: 14px;
  line-height: 1.6;
  color: #9FB6BA;
  margin: 0 0 var(--primitive-spacing-xl);
}

.notes ul {
  margin: 0;
  padding-left: 17px;
  color: #9FB6BA;
  font-size: 14px;
  line-height: 1.65;
}

.notes li {
  margin-bottom: 7px;
}

.notes b {
  color: #D7E5E7;
  font-weight: var(--primitive-typography-weight-semibold);
}

.notes .k {
  font-family: 'DM Mono',monospace;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #57C7C4;
  margin: 0 0 var(--primitive-spacing-md);
}

.notes .nsec ul {
  margin: 0;
  padding-left: var(--primitive-spacing-xl);
}

.notes .nsec li {
  margin-bottom: var(--primitive-spacing-md);
}

.notes .nsec li:last-child {
  margin-bottom: 0;
}

/* ── nsec ─────────────────────────────────────────────── */
.nsec {
  margin-bottom: var(--primitive-spacing-xl-2xl);
}

.nsec--open {
  padding-left: var(--primitive-spacing-lg-xl);
  border-left: var(--primitive-border-width-medium) solid #55462A;
}

.nsec:last-child {
  margin-bottom: var(--primitive-spacing-zero);
}

.nsec--open .nh {
  color: #D9A441;
}

/* ── ax-coldband ─────────────────────────────────────────────── */
.ax-coldband {
  margin-top: var(--primitive-spacing-xl-2xl);
  padding: var(--primitive-spacing-lg-xl) var(--primitive-spacing-xl);
  border-radius: var(--app-radius-group);
  background: var(--primitive-color-neutral-gray-50);
  box-shadow: inset 0 0 0 1px var(--axhair);
  font-family: var(--axsans);
  font-size: var(--app-text-14);
  line-height: var(--primitive-typography-line-height-normal);
  color: var(--axink2);
}

.ax-coldband b {
  color: var(--axink);
  font-weight: var(--primitive-typography-weight-bold);
}

/* ── ax-suggested ─────────────────────────────────────────────── */
.ax-suggested {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: var(--primitive-spacing-zero) var(--primitive-spacing-md);
  border-radius: var(--primitive-radius-full);
  background: #E7F2F2;
  color: var(--axtealdeep);
  font-family: var(--axmono);
  font-size: var(--app-text-10);
  letter-spacing: var(--app-tracking-caps);
  text-transform: uppercase;
}

/* ── ax-srcs ─────────────────────────────────────────────── */
.ax-srcs {
  display: flex;
  flex-direction: column;
  gap: var(--primitive-spacing-md);
  margin-top: var(--primitive-spacing-zero);
}

/* ── ax-srcrow ─────────────────────────────────────────────── */
.ax-srcrow {
  display: flex;
  align-items: center;
  gap: var(--primitive-spacing-lg);
  padding: var(--primitive-spacing-lg) var(--primitive-spacing-lg-xl);
  background: var(--semantic-color-contrast-light);
  border: var(--primitive-border-width-thin) solid var(--axhair);
  border-radius: var(--app-radius-group);
}

.ax-srcrow__i {
  width: 22px;
  height: 22px;
  flex: none;
  display: grid;
  place-items: center;
  color: var(--axtealdeep);
}

.ax-srcrow__b {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--primitive-spacing-xs);
}

.ax-srcrow__t {
  font-family: var(--axsans);
  font-weight: var(--primitive-typography-weight-bold);
  font-size: var(--app-text-14);
  color: var(--axink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ax-srcrow__m {
  font-family: var(--axsans);
  font-size: var(--app-text-12);
  color: var(--axink2);
}

.ax-srcrow__x {
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  margin: -11px -13px -11px var(--primitive-spacing-zero);
  flex: none;
  display: grid;
  place-items: center;
  background: none;
  border: var(--primitive-border-width-none);
  cursor: pointer;
  color: var(--component-provenance-new);
}

/* ── ax-srcadd ─────────────────────────────────────────────── */
.ax-srcadd {
  appearance: none;
  width: 100%;
  min-height: 48px;
  margin-top: var(--primitive-spacing-md);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--primitive-spacing-md-lg);
  background: var(--semantic-color-contrast-light);
  border: var(--primitive-border-width-thin) dashed var(--primitive-color-brand-navy-200);
  border-radius: var(--app-radius-group);
  font-family: var(--axsans);
  font-weight: var(--primitive-typography-weight-bold);
  font-size: var(--app-text-14);
  color: var(--axtealdeep);
}

.ax-srcadd:hover {
  border-color: var(--axtealsoft);
}

/* ── ax-coldock ─────────────────────────────────────────────── */
.ax-coldock {
  display: none;
}

/* ── ax-urgkeep ─────────────────────────────────────────────── */
.ax-urgkeep {
  appearance: none;
  flex: 1;
  min-height: var(--touch-target-min);
  cursor: pointer;
  border-radius: var(--primitive-radius-md);
  font-family: var(--axsans);
  font-weight: var(--primitive-typography-weight-bold);
  font-size: var(--app-text-14);
  background: var(--semantic-color-contrast-light);
  border: var(--primitive-border-width-thin) solid var(--axtealsoft);
  color: var(--axtealdeep);
}

/* ── ax-urgdrop ─────────────────────────────────────────────── */
.ax-urgdrop {
  appearance: none;
  flex: 1;
  min-height: var(--touch-target-min);
  cursor: pointer;
  border-radius: var(--primitive-radius-md);
  font-family: var(--axsans);
  font-weight: var(--primitive-typography-weight-bold);
  font-size: var(--app-text-14);
  background: var(--semantic-color-contrast-light);
  border: var(--primitive-border-width-thin) solid var(--axtealsoft);
  color: var(--axtealdeep);
}

/* ── ax-urgcheck ─────────────────────────────────────────────── */
.ax-urgcheck {
  display: none;
  margin-top: var(--primitive-spacing-lg);
  padding: var(--primitive-spacing-lg-xl) var(--primitive-spacing-xl);
  border-radius: var(--app-radius-group);
  background: var(--primitive-color-neutral-gray-50);
  box-shadow: inset 0 0 0 1px var(--axhair);
  flex-direction: column;
  gap: var(--primitive-spacing-lg);
}

.ax-urgcheck__t {
  font-family: var(--axsans);
  font-size: var(--app-text-14);
  line-height: var(--primitive-typography-line-height-normal);
  color: var(--axink2);
}

.ax-urgcheck__a {
  display: flex;
  gap: var(--primitive-spacing-md-lg);
}

.ax-urgcheck__t b {
  color: var(--axink);
  font-weight: var(--primitive-typography-weight-bold);
}

.ax-urgcheck.on {
  display: flex;
}

/* ── dp-bottom-nav ─────────────────────────────────────────────── */
.dp-bottom-nav {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: var(--primitive-spacing-md) var(--primitive-spacing-md) var(--primitive-spacing-sm);
  background: var(--semantic-color-contrast-light);
  border-top: var(--primitive-border-width-thin) solid var(--semantic-color-border-neutral-subtle);
}

.dp-bottom-nav__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: var(--primitive-spacing-sm);
  min-height: var(--touch-target-min);
  padding-bottom: var(--primitive-spacing-xs);
  border: none;
  background: none;
  cursor: pointer;
  color: var(--primitive-color-neutral-gray-600, #6D7374);
}

.dp-bottom-nav__label {
  font-size: var(--app-text-10);
  font-weight: var(--primitive-typography-weight-medium);
  letter-spacing: var(--primitive-typography-letter-spacing-normal);
  line-height: var(--primitive-typography-line-height-none);
}

.dp-bottom-nav__ni {
  position: relative;
  display: block;
}

.dp-bottom-nav__badge {
  position: absolute;
  top: -4px;
  right: -8px;
  min-width: 15px;
  height: 15px;
  padding: var(--primitive-spacing-zero) var(--primitive-spacing-xs-sm);
  border-radius: var(--primitive-radius-full, 999px);
  background: var(--semantic-color-surface-error-bold, #AC0019);
  color: var(--semantic-color-text-neutral-contrast);
  font-family: var(--font-mono, monospace);
  font-size: var(--app-text-10);
  font-weight: var(--primitive-typography-weight-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  border: var(--primitive-border-width-regular) solid var(--semantic-color-contrast-light);
}

.dp-bottom-nav--cradle {
  position: absolute;
  left: var(--primitive-spacing-zero);
  right: var(--primitive-spacing-zero);
  bottom: var(--primitive-spacing-zero);
  height: var(--app-nav-height);
  z-index: var(--app-z-nav);
  display: block;
  padding: var(--primitive-spacing-zero);
  background: none;
  border-top: var(--primitive-border-width-none);
  pointer-events: none;
}

.dp-bottom-nav--cradle > * {
  pointer-events: auto;
}

.dp-bottom-nav__plane {
  position: relative;
  height: var(--app-nav-height);
  --dp-nav-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 393 141' preserveAspectRatio='none'><path fill='white' d='M0,34 H156.5 A40,40 0 0,0 236.5,34 H393 V141 H0 Z'/></svg>");
}

.dp-bottom-nav__glass {
  position: absolute;
  inset: var(--primitive-spacing-zero);
  pointer-events: none;
  background: rgba(255,255,255,.80);
  -webkit-backdrop-filter: blur(24px) saturate(1.7);
  backdrop-filter: blur(24px) saturate(1.7);
  -webkit-mask-image: var(--dp-nav-mask);
  mask-image: var(--dp-nav-mask);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.dp-bottom-nav__edge {
  position: absolute;
  inset: var(--primitive-spacing-zero);
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  overflow: visible;
}

.dp-bottom-nav__items {
  position: absolute;
  left: var(--primitive-spacing-zero);
  right: var(--primitive-spacing-zero);
  top: 73px;
  bottom: 34px;
  display: flex;
  align-items: flex-end;
  padding: var(--primitive-spacing-zero) var(--primitive-spacing-sm);
}

.dp-bottom-nav__slot {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.dp-bottom-nav__scrim {
  position: absolute;
  left: 50%;
  top: -6px;
  transform: translateX(-50%);
  width: 80px;
  height: 80px;
  border-radius: var(--primitive-radius-full,999px);
  pointer-events: none;
  background: rgba(255,255,255,.70);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  backdrop-filter: blur(16px) saturate(1.5);
  box-shadow: inset 0 0 0 1px rgba(3,46,66,.10);
}

.dp-bottom-nav__fab {
  position: absolute;
  left: 50%;
  top: 4px;
  transform: translateX(-50%);
  width: 60px;
  height: 60px;
  border-radius: var(--primitive-radius-full,999px);
  border: var(--primitive-border-width-none);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--semantic-color-text-neutral-contrast);
  cursor: pointer;
  background: linear-gradient(152deg,#A33A63 0%,var(--tm-ai,#802B4E) 62%,#6B2342 100%);
  box-shadow: var(--component-fab-shadow);
}

.dp-bottom-nav__home {
  position: absolute;
  left: var(--primitive-spacing-zero);
  right: var(--primitive-spacing-zero);
  bottom: var(--primitive-spacing-zero);
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.dp-bottom-nav__item--active {
  color: var(--semantic-color-text-primary-default, var(--semantic-color-interactive-primary-default));
}

.dp-bottom-nav__fab svg {
  width: 26px;
  height: 26px;
}

.dp-bottom-nav__home i {
  width: 134px;
  height: 5px;
  border-radius: var(--primitive-radius-xs);
  background: var(--component-hpill-background);
  display: block;
}

.dp-bottom-nav--cradle .dp-bottom-nav__item {
  flex: 1;
  min-height: 0;
  padding-bottom: var(--primitive-spacing-zero);
}

.dp-bottom-nav__slot .dp-bottom-nav__label {
  color: var(--tm-ai,#802B4E);
  font-weight: var(--primitive-typography-weight-bold);
}

.dp-bottom-nav__item--active .dp-bottom-nav__label {
  font-weight: var(--primitive-typography-weight-bold);
}

/* ── dp-screen ─────────────────────────────────────────────── */
.dp-screen {
  position: relative;
  display: flex;
  flex-direction: column;
  width: var(--app-shell-width);
  min-height: var(--app-shell-height);
  background: var(--semantic-color-contrast-light);
  padding-top: var(--safe-area-top);
  padding-bottom: var(--safe-area-bottom);
}

.dp-screen__body {
  flex: 1;
  min-height: 0;
  overflow: hidden auto;
  padding: var(--primitive-spacing-xl-2xl) var(--semantic-spacing-rhythm-inset) var(--primitive-spacing-zero);
}

.dp-screen__foot {
  display: flex;
  flex-direction: column;
  gap: var(--primitive-spacing-lg);
  padding: var(--semantic-spacing-rhythm-title-body) var(--semantic-spacing-rhythm-inset) var(--primitive-spacing-3xl);
}

.dp-screen--cradle-nav {
  padding-bottom: var(--app-nav-height);
}

.dp-screen__body.is-centered {
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* ── dp-app-bar ─────────────────────────────────────────────── */
.dp-app-bar {
  height: var(--component-app-bar-height);
  flex: 0 0 var(--component-app-bar-height);
  display: flex;
  align-items: center;
  gap: var(--primitive-spacing-lg);
  padding: var(--primitive-spacing-zero) var(--primitive-spacing-lg);
  background: var(--semantic-color-contrast-light);
}

.dp-app-bar__back {
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  border-radius: var(--primitive-radius-md);
  color: var(--semantic-color-text-neutral-bold);
  cursor: pointer;
}

.dp-app-bar__icon {
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  border-radius: var(--primitive-radius-md);
  color: var(--semantic-color-text-neutral-bold);
  cursor: pointer;
}

.dp-app-bar__brand {
  width: 28px;
  height: 28px;
}

.dp-app-bar__title {
  font-family: var(--primitive-typography-family-heading);
  font-weight: var(--primitive-typography-weight-semibold);
}

.dp-app-bar__spacer {
  flex: 1;
}

.dp-app-bar--centered {
  display: grid;
  grid-template-columns: var(--touch-target-min) 1fr var(--touch-target-min);
  align-items: center;
  gap: var(--primitive-spacing-zero);
  padding: var(--primitive-spacing-zero) var(--primitive-spacing-md);
}

.dp-app-bar__avatar {
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  padding: var(--primitive-spacing-zero);
  cursor: pointer;
}

.dp-app-bar__avatar > span {
  width: 32px;
  height: 32px;
  border-radius: var(--primitive-radius-circle);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono, monospace);
  font-size: var(--app-text-12);
  font-weight: var(--primitive-typography-weight-bold);
  color: var(--semantic-color-text-neutral-contrast);
  background: linear-gradient(135deg, var(--semantic-color-interactive-primary-default),
    var(--semantic-color-text-heading, #032E42));
}

.dp-app-bar--centered > .dp-status {
  justify-self: center;
}

.dp-app-bar--centered > .dp-app-bar__avatar {
  justify-self: end;
}

/* ── dp-avail ─────────────────────────────────────────────── */
.dp-avail {
  display: flex;
  flex-direction: column;
  gap: var(--primitive-spacing-md);
}

.dp-avail__opt {
  display: flex;
  align-items: center;
  gap: var(--primitive-spacing-lg-xl);
  min-height: var(--touch-target-min);
  padding: var(--primitive-spacing-lg) var(--primitive-spacing-lg-xl);
  border: var(--primitive-border-width-regular) solid var(--semantic-color-border-neutral-default);
  border-radius: var(--primitive-radius-md);
  background: var(--semantic-color-contrast-light);
}

.dp-avail__ic {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: var(--primitive-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--semantic-color-surface-neutral-subtle);
  color: var(--semantic-color-text-neutral-subtle);
}

.dp-avail__text {
  flex: 1;
  min-width: 0;
}

.dp-avail__radio {
  width: 20px;
  height: 20px;
  flex: none;
  border-radius: var(--primitive-radius-circle);
  border: var(--primitive-border-width-medium) solid var(--semantic-color-border-neutral-bold);
}

.dp-avail__opt--selected {
  border-color: var(--tm-gold, #A8863F);
  background: var(--tm-gold-subtle, #F7F2E9);
}

.dp-avail__text b {
  display: block;
  font-size: var(--app-text-14);
  color: var(--semantic-color-text-heading, #032E42);
}

.dp-avail__text small {
  font-size: var(--app-text-12);
  color: var(--semantic-color-text-neutral-subtle);
}

button.dp-avail__opt {
  width: 100%;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.dp-avail__opt--selected .dp-avail__ic {
  background: #F4EEDF;
  color: var(--tm-gold-ink, #866200);
}

.dp-avail__opt--selected .dp-avail__radio {
  border-color: var(--tm-gold, #A8863F);
  background: var(--tm-gold, #A8863F);
  box-shadow: inset 0 0 0 3px var(--semantic-color-contrast-light);
}

/* ── dp-accent ─────────────────────────────────────────────── */
.dp-accent {
  background: var(--semantic-color-surface-primary-subtle);
}

/* ── dp-create ─────────────────────────────────────────────── */
.dp-create {
  display: inline-flex;
  align-items: center;
  gap: var(--primitive-spacing-md);
  appearance: none;
  margin-top: var(--primitive-spacing-2xl, 24px);
  min-height: var(--touch-target-min, 44px);
  height: auto;
  padding: var(--primitive-spacing-zero) var(--primitive-spacing-xl);
  border-radius: var(--primitive-radius-md);
  border: var(--primitive-border-width-thin) solid var(--semantic-color-border-neutral-default, #B1B5B6);
  background: var(--semantic-color-contrast-light);
  color: var(--semantic-color-text-heading, #032E42);
  font-family: inherit;
  font-size: var(--app-text-14);
  font-weight: var(--primitive-typography-weight-bold);
  cursor: pointer;
}

.dp-create__note {
  margin-top: var(--primitive-spacing-lg);
  max-width: 40ch;
  font-size: var(--app-text-12);
  line-height: var(--primitive-typography-line-height-normal);
  color: var(--semantic-color-text-neutral-subtle, #6E7273);
}

.dp-create__note b {
  color: var(--semantic-color-text-heading, #032E42);
  font-weight: var(--primitive-typography-weight-semibold);
}

/* ── dp-chips ─────────────────────────────────────────────── */
.dp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--primitive-spacing-md);
}

/* ── dp-provenance ─────────────────────────────────────────────── */
.dp-provenance {
  display: inline-flex;
  align-items: center;
  gap: var(--primitive-spacing-md);
  padding: var(--primitive-spacing-sm) var(--primitive-spacing-md);
  border-radius: var(--primitive-radius-full, 100px);
  background: var(--semantic-color-contrast-light);
  border: var(--primitive-border-width-thin) solid var(--semantic-color-border-hairline);
}

.dp-provenance__meter {
  display: inline-flex;
  align-items: center;
  gap: var(--primitive-spacing-xs-sm);
}

.dp-provenance__seg {
  width: 5px;
  height: 13px;
  border-radius: var(--primitive-radius-2xs);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--component-provenance-track);
}

.dp-provenance__label {
  font-size: var(--app-text-12);
  font-weight: var(--primitive-typography-weight-bold);
  letter-spacing: var(--primitive-typography-letter-spacing-normal);
  color: var(--semantic-color-text-heading);
}

.dp-provenance--inline {
  display: flex;
  align-items: center;
  gap: var(--primitive-spacing-md-lg);
  width: 100%;
  padding: var(--primitive-spacing-zero);
  border: var(--primitive-border-width-none);
  border-radius: var(--primitive-radius-zero);
  background: none;
}

.dp-provenance__source {
  margin-left: auto;
  font-size: var(--app-text-12);
  color: var(--semantic-color-text-neutral-subtle, #6E7273);
}

.dp-provenance--new .dp-provenance__seg:nth-child(-n+1) {
  background: var(--component-provenance-new);
}

.dp-provenance--emerging .dp-provenance__seg:nth-child(-n+2) {
  background: var(--component-provenance-emerging);
}

.dp-provenance--tested .dp-provenance__seg:nth-child(-n+3) {
  background: var(--component-provenance-tested);
}

.dp-provenance--reviewed .dp-provenance__seg:nth-child(-n+4) {
  background: var(--component-provenance-reviewed);
}

.dp-provenance--canon .dp-provenance__seg:nth-child(-n+5) {
  background: var(--component-provenance-canon);
}

.dp-provenance--new .dp-provenance__label {
  color: var(--component-provenance-new-ink);
}

.dp-provenance--emerging .dp-provenance__label {
  color: var(--component-provenance-emerging-ink);
}

.dp-provenance--tested .dp-provenance__label {
  color: var(--component-provenance-tested);
}

.dp-provenance--reviewed .dp-provenance__label {
  color: var(--component-provenance-reviewed);
}

.dp-provenance--canon .dp-provenance__label {
  color: var(--component-provenance-canon-ink);
}

.dp-provenance--inline .dp-provenance__label {
  font-family: var(--font-mono, monospace);
  font-size: var(--app-text-12);
  font-weight: var(--primitive-typography-weight-medium);
  letter-spacing: var(--app-tracking-caps);
  text-transform: uppercase;
}

/* ── dp-spread ─────────────────────────────────────────────── */
.dp-spread {
  font-size: var(--app-text-12);
  font-weight: var(--primitive-typography-weight-semibold);
  color: var(--semantic-color-text-heading, #032E42);
}

/* ── dp-ack ─────────────────────────────────────────────── */
.dp-ack {
  display: inline-flex;
  align-items: center;
  gap: var(--primitive-spacing-sm-md);
  font-size: var(--app-text-12);
  font-weight: var(--primitive-typography-weight-bold);
  color: var(--semantic-color-text-error-default, #AC0019);
}

.dp-ack__dot {
  width: 7px;
  height: 7px;
  border-radius: var(--primitive-radius-full);
  flex: none;
  background: currentColor;
}

/* ── dp-corpus ─────────────────────────────────────────────── */
.dp-corpus {
  background: var(--semantic-color-contrast-light);
  border: var(--primitive-border-width-thin) solid var(--semantic-color-border-hairline, #E2E9EA);
  border-radius: var(--primitive-radius-lg);
  padding: var(--primitive-spacing-xl);
  box-shadow: var(--tm-e1, 0 1px 2px rgba(4,58,70,.06));
}

.dp-corpus__title {
  font-size: var(--app-text-14);
  font-weight: var(--primitive-typography-weight-bold);
  color: var(--semantic-color-text-heading, #032E42);
}

.dp-corpus__claim {
  font-size: var(--app-text-14);
  line-height: var(--primitive-typography-line-height-normal);
  color: var(--semantic-color-text-neutral-default, #242728);
  margin-top: var(--primitive-spacing-lg);
}

.dp-corpus > .dp-provenance--inline + .dp-provenance--inline {
  margin-top: var(--primitive-spacing-lg-xl);
  padding-top: var(--primitive-spacing-lg-xl);
  border-top: var(--primitive-border-width-thin) solid var(--semantic-color-border-hairline, #E2E9EA);
}

.dp-corpus > .dp-corpus__claim + .dp-provenance--inline {
  margin-top: var(--primitive-spacing-lg-xl);
  padding-top: var(--primitive-spacing-lg-xl);
  border-top: var(--primitive-border-width-thin) solid var(--semantic-color-border-hairline, #E2E9EA);
}

/* ── dp-evidence ─────────────────────────────────────────────── */
.dp-evidence {
  margin-top: var(--primitive-spacing-lg-xl);
  padding: var(--primitive-spacing-lg) var(--primitive-spacing-lg-xl);
  border-radius: var(--primitive-radius-md);
  background: var(--semantic-color-surface-neutral-subtle, #F2F6F7);
  --_gap: 13px;
}

.dp-evidence > * + * {
  margin-top: var(--_gap);
  padding-top: var(--_gap);
  border-top: var(--primitive-border-width-thin) solid var(--semantic-color-border-hairline, #E2E9EA);
}

.dp-evidence--tight {
  --_gap: 9px;
}

/* ── ax-attachrow ─────────────────────────────────────────────── */
.ax-attachrow {
  display: none;
  padding: var(--primitive-spacing-md-lg) var(--primitive-spacing-lg-xl) var(--primitive-spacing-zero);
  padding-bottom: var(--primitive-spacing-lg-xl);
}

/* ── tm-drawer ─────────────────────────────────────────────── */
.tm-drawer {
  position: absolute;
  inset: var(--primitive-spacing-zero);
  z-index: var(--app-z-overlay);
  --axsans: var(--primitive-typography-family-body,'Atkinson Hyperlegible Next',system-ui,sans-serif);
  --axserif: var(--primitive-typography-family-display,'Newsreader',serif);
  --axmono: var(--font-mono,'DM Mono',monospace);
  --axmag: var(--primitive-color-ai-600);
  --axteal: var(--primitive-color-brand-primary-500);
  --axtealdeep: var(--primitive-color-brand-primary-700);
  --axtealsoft: var(--primitive-color-brand-primary-300);
  --axgold: var(--primitive-color-brand-gold);
  --axgoldstamp: var(--primitive-color-brand-gold);
  --axink: var(--primitive-color-brand-accent-800);
  --axink2: var(--primitive-color-neutral-gray-600);
  --axhair: var(--primitive-color-neutral-gray-100);
}

.tm-drawer .dp-sheet__foot .dp-cta {
  width: 100%;
}

/* ── ax-ments ─────────────────────────────────────────────── */
.ax-ments {
  display: flex;
  flex-wrap: wrap;
  gap: var(--primitive-spacing-md);
  margin-top: var(--primitive-spacing-xl);
}

.ax-ments:has(.ax-ment:not(.ax-ment--add)) .ax-ment--solo {
  width: auto;
  justify-content: flex-start;
  color: var(--axink2);
  font-weight: var(--primitive-typography-weight-semibold);
}

.ax-ments:has(.ax-ment:not(.ax-ment--add)) .ax-ment--icon {
  width: var(--touch-target-min);
  justify-content: center;
}

.ax-ments:has(.ax-ment:not(.ax-ment--add)) .ax-ment--solo svg {
  display: none;
}

.ax-ments:has(.ax-ment:not(.ax-ment--add)) .ax-ment--icon svg {
  display: block;
}

/* ── dp-pill ─────────────────────────────────────────────── */
.dp-pill {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: var(--primitive-spacing-zero) var(--primitive-spacing-lg);
  border-radius: var(--primitive-radius-full);
  font-size: var(--app-text-10);
  font-weight: var(--primitive-typography-weight-bold);
  letter-spacing: var(--primitive-typography-letter-spacing-wider);
  text-transform: uppercase;
  justify-content: center;
  line-height: var(--primitive-typography-line-height-none);
  margin: var(--primitive-spacing-zero);
}

.dp-pill--urgent {
  background: var(--semantic-color-badge-attention-surface);
  color: var(--semantic-color-badge-attention-text);
}

.dp-pill--teal {
  background: var(--tm-teal-bg);
  color: var(--tm-teal-700);
}

.dp-pill--gold {
  background: var(--tm-gold-subtle);
  color: var(--tm-gold-ink);
}

.dp-pill--give {
  background: var(--semantic-color-badge-progress-surface);
  color: var(--tm-navy);
}

.dp-pill--unans {
  background: var(--semantic-color-badge-progress-surface);
  color: var(--semantic-color-badge-progress-text);
}

.dp-pill--nocon {
  background: var(--primitive-color-neutral-gray-100,#E4E9EA);
  color: var(--tm-navy,#032E42);
}

.dp-pill--res {
  background: var(--semantic-color-badge-settled-surface);
  color: var(--semantic-color-badge-settled-text);
}

.dp-pill--must {
  background: var(--component-badge-warning-subtle-background);
  color: var(--component-badge-warning-subtle-text-color);
}

.dp-pill--ann {
  background: var(--semantic-color-badge-progress-surface);
  color: var(--tm-navy);
}

.dp-pill--ansd {
  background: var(--semantic-color-badge-settled-surface);
  color: var(--semantic-color-badge-settled-text);
}

.dp-pill--mod {
  background: var(--semantic-color-badge-attention-surface);
  color: var(--semantic-color-badge-attention-text);
}

.dp-pill--fup {
  background: var(--semantic-color-badge-progress-surface);
  color: var(--semantic-color-badge-progress-text);
}

.dp-pill--obs {
  background: var(--tm-teal-bg,#E5F1F1);
  color: var(--tm-teal-700,#004D4E);
}

.dp-pill--type {
  background: var(--tm-navy,#032E42);
  color: var(--semantic-color-text-neutral-contrast);
}

.dp-pill--closed {
  background: #ECEFEF;
  color: #4E5A5A;
}

/* ── tm-menu ─────────────────────────────────────────────── */
.tm-menu {
  position: absolute;
  right: var(--primitive-spacing-zero);
  bottom: calc(100% + 8px);
  z-index: var(--app-z-menu);
  min-width: 184px;
  padding: var(--primitive-spacing-sm-md);
  border-radius: var(--app-radius-group);
  background: var(--semantic-color-contrast-light);
  border: var(--primitive-border-width-thin) solid var(--tm-line-soft);
  box-shadow: var(--component-menu-shadow);
  display: none;
  flex-direction: column;
}

.tm-menu--below {
  bottom: auto;
  top: calc(100% + 8px);
}

.tm-menu__i {
  appearance: none;
  border: var(--primitive-border-width-none);
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--primitive-spacing-lg);
  min-height: var(--touch-target-min);
  padding: var(--primitive-spacing-zero) var(--primitive-spacing-md-lg);
  border-radius: var(--primitive-radius-sm);
  font-family: inherit;
  font-size: var(--app-text-14);
  font-weight: var(--primitive-typography-weight-semibold);
  color: var(--tm-navy);
  text-align: left;
}

.tm-menu__i--flag {
  margin-top: var(--primitive-spacing-sm-md);
  padding-top: var(--primitive-spacing-sm-md);
  border-top: var(--primitive-border-width-thin) solid var(--tm-line-soft);
  border-radius: var(--primitive-radius-zero) var(--primitive-radius-zero) var(--primitive-radius-sm) var(--primitive-radius-sm);
  color: var(--tm-err, #AC0019);
}

.tm-menu__i--close {
  border-top: var(--primitive-border-width-thin) solid var(--tm-line-soft,#E2E9EA);
  margin-top: var(--primitive-spacing-sm);
  padding-top: var(--primitive-spacing-md-lg);
}

.tm-menu__i svg {
  color: var(--tm-teal-700);
  flex: none;
}

.tm-menu__i--flag svg {
  color: var(--tm-err, #AC0019);
}

.tm-menu.on {
  display: flex;
}

.tm-menu__i:hover {
  background: var(--semantic-color-surface-neutral-subtle,#F2F6F7);
}

/* ── ax-invite ─────────────────────────────────────────────── */
.ax-invite {
  font-family: var(--axserif);
  font-size: var(--app-text-16);
  line-height: var(--primitive-typography-line-height-normal);
  color: var(--axink);
  margin-bottom: var(--primitive-spacing-zero);
}

/* ── aappbar ─────────────────────────────────────────────── */
.aappbar {
  height: 56px;
  display: grid;
  align-items: center;
  gap: var(--primitive-spacing-zero);
  padding: var(--primitive-spacing-zero) var(--primitive-spacing-lg);
  background: var(--semantic-color-contrast-light);
  position: relative;
  z-index: var(--app-z-chrome);
  grid-template-columns: var(--touch-target-min) 1fr var(--touch-target-min);
}

.aappbar__lead {
  display: flex;
  justify-content: flex-start;
}

.aappbar__mid {
  display: flex;
  justify-content: center;
  min-width: 0;
}

.aappbar__end {
  display: flex;
  justify-content: flex-end;
}

.aappbar .spacer {
  flex: 1;
}

.aappbar__lead[data-goto] {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.aappbar__lead[data-goto]:active {
  opacity: .55;
}

/* ── anavwrap ─────────────────────────────────────────────── */
.anavwrap {
  background: none;
  border-top: var(--primitive-border-width-none);
  position: absolute;
  z-index: var(--app-z-nav);
  left: var(--primitive-spacing-zero);
  right: var(--primitive-spacing-zero);
  bottom: var(--primitive-spacing-zero);
  height: var(--app-nav-height);
  pointer-events: none;
}

.anavwrap * {
  pointer-events: auto;
}

.anavwrap .it[data-goto] {
  cursor: pointer;
}

.anavwrap .slot[data-goto] {
  cursor: pointer;
}

/* ── base ─────────────────────────────────────────────── */
[data-list] {
  display: contents;
}

/* ── mlegend ─────────────────────────────────────────────── */
.mlegend {
  font-family: 'DM Mono',monospace;
  font-size: 10px;
  line-height: var(--primitive-typography-line-height-normal);
  letter-spacing: .04em;
  color: #5E7681;
  margin: var(--primitive-spacing-xs) 0 18px;
  padding: var(--primitive-spacing-md) var(--primitive-spacing-md-lg);
  border: 1px solid #1B2E37;
  border-radius: 8px;
}

.mlegend b {
  color: #C9843F;
  font-weight: var(--primitive-typography-weight-bold);
}

.mlegend span {
  color: #8AA3A8;
}

/* ── scode ─────────────────────────────────────────────── */
.scode {
  display: flex;
  align-items: baseline;
  gap: var(--primitive-spacing-md-lg);
  margin: var(--primitive-spacing-lg-xl) auto 0;
  max-width: 393px;
  font-family: 'DM Mono',monospace;
  font-size: 12px;
  letter-spacing: .06em;
  color: #5E7681;
}

.scode b {
  color: #57C7C4;
  font-weight: var(--primitive-typography-weight-bold);
  letter-spacing: .1em;
}

.scode span {
  color: #8AA3A8;
  letter-spacing: 0;
  font-family: inherit;
}

.scode i {
  margin-left: auto;
  font-style: normal;
  opacity: .55;
}

/* ── mbtn ─────────────────────────────────────────────── */
.mbtn {
  display: block;
  width: 100%;
  text-align: left;
  appearance: none;
  background: none;
  border: 0;
  color: #B9CBD0;
  font-family: inherit;
  font-size: 14px;
  padding: var(--primitive-spacing-md-lg) var(--primitive-spacing-lg);
  border-radius: 9px;
  margin-bottom: var(--primitive-spacing-xs-sm);
  cursor: pointer;
  min-height: 44px;
}

.mbtn__u {
  color: #C9843F;
  font-weight: var(--primitive-typography-weight-bold);
  margin-left: 5px;
  opacity: .85;
}

.mbtn:hover {
  background: #152631;
  color: var(--semantic-color-text-neutral-contrast);
}

.mbtn.on {
  background: #0F7A7C;
  color: var(--semantic-color-text-neutral-contrast);
  font-weight: var(--primitive-typography-weight-bold);
}

.mbtn.on .mcode {
  color: #BFE6E4;
}

.mbtn.on .mbtn__u {
  color: #FFD8A8;
}

/* ── mcode ─────────────────────────────────────────────── */
.mcode {
  display: inline-block;
  min-width: 44px;
  margin-right: var(--primitive-spacing-md);
  color: #57C7C4;
  font-family: 'DM Mono',monospace;
  font-size: 10px;
  letter-spacing: .08em;
  opacity: .85;
}

.mcode--state {
  opacity: .62;
}

/* ── insp-sw ─────────────────────────────────────────────── */
.insp-sw {
  display: flex;
  align-items: center;
  gap: var(--primitive-spacing-md-lg);
  width: 100%;
  appearance: none;
  background: #122430;
  border: 1px solid #1F3742;
  color: #B9CBD0;
  font-family: inherit;
  font-size: 12px;
  font-weight: var(--primitive-typography-weight-bold);
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 11px var(--primitive-spacing-lg);
  border-radius: 10px;
  cursor: pointer;
  min-height: 44px;
  margin: var(--primitive-spacing-xs) 0 18px;
}

.insp-sw__track {
  margin-left: auto;
  width: 34px;
  height: 19px;
  border-radius: 99px;
  background: #22404D;
  position: relative;
  flex: none;
  transition: background .16s;
}

.insp-sw__track::after {
  content: "";
  position: absolute;
  top: 2.5px;
  left: 2.5px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #7E9AA3;
  transition: transform .16s,background .16s;
}

.insp-sw__key {
  font-size: 10px;
  font-weight: var(--primitive-typography-weight-normal);
  letter-spacing: .04em;
  color: #5E7681;
  text-transform: none;
}

.insp-sw:hover {
  border-color: #2C505E;
  color: var(--semantic-color-text-neutral-contrast);
}

/* ── insp-hit ─────────────────────────────────────────────── */
.insp-hit {
  outline: 1.5px solid #E91E8C;
  outline-offset: 1px;
  background: rgba(233,30,140,.07);
}

/* ── insp-hit-part ─────────────────────────────────────────────── */
.insp-hit-part {
  outline: 1px dashed rgba(233,30,140,.5);
  outline-offset: 1px;
}

/* ── inspecting ─────────────────────────────────────────────── */
body.inspecting .insp-sw {
  border-color: #C2185B;
  color: var(--semantic-color-text-neutral-contrast);
  background: #1B1520;
}

body.inspecting .aphone * {
  cursor: crosshair;
}

body.inspecting .notes {
  position: sticky;
  top: 24px;
  max-height: calc(100vh - 60px);
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: #22404D transparent;
}

body.inspecting .insp {
  display: block;
}

body.inspecting .insp-sw__track {
  background: #C2185B;
}

body.inspecting .insp-sw__track::after {
  transform: translateX(15px);
  background: var(--semantic-color-contrast-light);
}

body.inspecting .notes > [data-n] {
  display: none;
}

/* ── g-promoted ─────────────────────────────────────────────── */
.g-promoted {
  background: #0F7A7C;
  color: var(--semantic-color-text-neutral-contrast);
}

/* ── g-core ─────────────────────────────────────────────── */
.g-core {
  background: #12414A;
  color: #8FD8D6;
}

/* ── g-mobile ─────────────────────────────────────────────── */
.g-mobile {
  background: #12414A;
  color: #8FD8D6;
}

/* ── g-screen ─────────────────────────────────────────────── */
.g-screen {
  background: #3A2A14;
  color: #E0B667;
}

/* ── g-legacy ─────────────────────────────────────────────── */
.g-legacy {
  background: #3A1420;
  color: #F0879F;
}

/* ── g-chrome ─────────────────────────────────────────────── */
.g-chrome {
  background: #1A2830;
  color: #6C868F;
}

/* ── b ─────────────────────────────────────────────── */
.b {
  font-size: inherit;
}

/* ── l ─────────────────────────────────────────────── */
.l {
  font-size: inherit !important;
}

/* ── span ─────────────────────────────────────────────── */
.span {
  font-size: inherit;
}

/* ── ts ─────────────────────────────────────────────── */
.ts {
  font-size: inherit;
}

/* ── tm-spread ─────────────────────────────────────────────── */
.tm-spread {
  margin-top: var(--primitive-spacing-md-lg);
  padding-top: var(--primitive-spacing-md-lg);
  border-top: var(--primitive-border-width-thin) solid var(--tm-line-soft);
  font-size: var(--app-text-12);
  color: var(--tm-navy);
  font-weight: var(--primitive-typography-weight-semibold);
}

/* ── ac-where ─────────────────────────────────────────────── */
.ac-where__r {
  font-size: var(--app-text-12);
}

/* ── dp-callout ─────────────────────────────────────────────── */
.dp-callout {
  font-size: var(--app-text-12);
}

/* ── tm-stub ─────────────────────────────────────────────── */
.tm-stub {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: var(--primitive-spacing-zero) var(--primitive-spacing-3xl-4xl);
  text-align: center;
  gap: var(--primitive-spacing-md);
}

.tm-stub__t {
  font-family: 'Newsreader',Georgia,serif;
  font-size: var(--app-text-28);
  color: var(--tm-navy,#032E42);
}

.tm-stub__s {
  font-family: var(--font-mono,monospace);
  font-size: var(--app-text-12);
  letter-spacing: var(--app-tracking-caps);
  text-transform: uppercase;
  color: var(--tm-muted,#515757);
}

.tm-stub__b {
  margin-top: var(--primitive-spacing-sm);
  font-size: var(--app-text-14);
  line-height: var(--primitive-typography-line-height-normal);
  color: var(--tm-muted,#515757);
}

/* ── base ─────────────────────────────────────────────── */
button {
  font-family: inherit;
  font-size: inherit;
}

/* ── base ─────────────────────────────────────────────── */
input {
  font-family: inherit;
  font-size: inherit;
}

/* ── base ─────────────────────────────────────────────── */
select {
  font-family: inherit;
  font-size: inherit;
}

/* ── base ─────────────────────────────────────────────── */
textarea {
  font-family: inherit;
  font-size: inherit;
}

/* ── ax-greet ─────────────────────────────────────────────── */
.ax-greet {
  font-family: var(--axserif);
  font-weight: var(--primitive-typography-weight-normal);
  font-size: var(--app-text-28);
  line-height: var(--primitive-typography-line-height-tight);
  color: var(--axink);
  margin-top: var(--primitive-spacing-xl);
}

.ax-greet .mut {
  color: var(--axink2);
  font-size: var(--app-text-28);
}

/* ── tm-cmp ─────────────────────────────────────────────── */
.tm-cmp {
  padding: var(--primitive-spacing-2xl-3xl) var(--primitive-spacing-xl-2xl) var(--primitive-spacing-zero);
}

.tm-cmp__t {
  font-family: var(--primitive-typography-family-display,'Newsreader',serif);
  font-weight: var(--primitive-typography-weight-semibold);
  font-size: var(--app-text-28);
  line-height: var(--primitive-typography-line-height-tighter);
  color: var(--tm-navy);
}

/* ── tm-cost ─────────────────────────────────────────────── */
.tm-cost {
  margin-top: var(--primitive-spacing-lg-xl);
  padding-top: var(--primitive-spacing-lg-xl);
  border-top: var(--primitive-border-width-thin) solid var(--semantic-color-border-error-subtle);
}

.tm-cost__r {
  display: flex;
  align-items: baseline;
  gap: var(--primitive-spacing-lg);
  padding: var(--primitive-spacing-sm) var(--primitive-spacing-zero);
}

.tm-cost__n {
  font-family: var(--font-mono,monospace);
  font-size: var(--app-text-18);
  font-weight: var(--primitive-typography-weight-bold);
  color: var(--tm-err, #AC0019);
  min-width: 30px;
  flex: none;
}

.tm-cost__l {
  font-size: var(--app-text-12);
  line-height: var(--primitive-typography-line-height-normal);
  color: var(--tm-navy);
}

.tm-cost__f {
  font-size: var(--app-text-12);
  line-height: var(--primitive-typography-line-height-normal);
  color: var(--tm-muted);
  margin-top: var(--primitive-spacing-lg);
  padding-top: var(--primitive-spacing-lg);
  border-top: var(--primitive-border-width-thin) solid var(--semantic-color-border-error-subtle);
}

.tm-cost__you {
  display: flex;
  align-items: center;
  gap: var(--primitive-spacing-md-lg);
  margin-top: var(--primitive-spacing-lg);
  padding-top: var(--primitive-spacing-lg);
  border-top: var(--primitive-border-width-thin) solid var(--semantic-color-border-error-subtle);
  font-size: var(--app-text-12);
  line-height: var(--primitive-typography-line-height-snug);
  color: var(--tm-muted);
}

.tm-cost__av {
  width: 30px;
  height: 30px;
  border-radius: var(--primitive-radius-full);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--app-text-12);
  font-weight: var(--primitive-typography-weight-bold);
  color: var(--semantic-color-text-neutral-contrast);
  background: linear-gradient(150deg,var(--component-provenance-emerging-ink),var(--tm-teal-700));
}

.tm-cost__l b {
  font-weight: var(--primitive-typography-weight-bold);
}

.tm-cost__f b {
  color: var(--tm-err, #AC0019);
  font-weight: var(--primitive-typography-weight-bold);
}

.tm-cost__you b {
  color: var(--tm-navy);
  font-weight: var(--primitive-typography-weight-bold);
}

/* ── tt ─────────────────────────────────────────────── */
.tt {
  font-size: var(--app-text-16);
}

/* ── tm-al ─────────────────────────────────────────────── */
.tm-al {
  display: flex;
  gap: var(--primitive-spacing-lg);
  align-items: flex-start;
  width: 100%;
  text-align: left;
  appearance: none;
  border: var(--primitive-border-width-none);
  border-bottom: var(--primitive-border-width-thin) solid var(--tm-line-soft);
  background: none;
  font-family: inherit;
  cursor: pointer;
  padding: var(--primitive-spacing-lg-xl) var(--primitive-spacing-xl-2xl) 15px;
}

.tm-al__mk {
  width: 7px;
  height: 7px;
  border-radius: var(--primitive-radius-full);
  flex: none;
  margin-top: var(--primitive-spacing-sm-md);
  background: transparent;
}

.tm-al__b {
  flex: 1;
  min-width: 0;
  display: block;
}

.tm-al__t {
  font-size: var(--app-text-14);
  line-height: var(--primitive-typography-line-height-snug);
  font-weight: var(--primitive-typography-weight-semibold);
  color: var(--tm-navy);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

.tm-al__m {
  font-size: var(--app-text-12);
  line-height: var(--primitive-typography-line-height-normal);
  color: var(--tm-muted);
  margin-top: var(--primitive-spacing-xs-sm);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.tm-al__w {
  font-family: var(--font-mono,monospace);
  font-size: var(--app-text-12);
  color: var(--tm-faint);
  flex: none;
  margin-top: var(--primitive-spacing-xs);
}

.tm-al__badges {
  display: flex;
  gap: var(--primitive-spacing-sm-md);
  margin-top: -2px;
  margin-bottom: var(--primitive-spacing-md-lg);
}

.tm-al--pri {
  background: var(--tm-err-subtle,#FBEDEA);
}

.tm-al[data-goto] {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.tm-al__m .who {
  color: var(--tm-teal-700);
  font-weight: var(--primitive-typography-weight-semibold);
}

.tm-al--unread .tm-al__mk {
  background: var(--tm-teal);
}

.tm-al--unread .tm-al__t {
  font-weight: var(--primitive-typography-weight-bold);
}

.tm-al--full .tm-al__t {
  -webkit-line-clamp: none;
  display: block;
  overflow: visible;
}

.tm-al--full .tm-al__m {
  -webkit-line-clamp: none;
  display: block;
  overflow: visible;
}

.tm-al__m .tm-al__quote {
  font-style: italic;
}

.tm-al[data-goto]:active {
  background: var(--tm-press,rgba(3,46,66,.035));
}

.tm-al--pri.tm-al--unread .tm-al__mk {
  background: var(--tm-err, #AC0019);
}

.tm-al--rec.tm-al--unread .tm-al__mk {
  background: var(--tm-gold);
}

/* ── tm-rev ─────────────────────────────────────────────── */
.tm-rev {
  margin: var(--primitive-spacing-zero);
  padding: var(--primitive-spacing-xl) var(--primitive-spacing-xl);
  border-radius: var(--app-radius-group);
  background: var(--tm-gold-subtle, #F6EFE2);
}

.tm-rev__k {
  font-family: var(--font-mono,monospace);
  font-size: var(--app-text-12);
  letter-spacing: var(--app-tracking-caps);
  text-transform: uppercase;
  color: var(--tm-gold-ink, #6B5426);
}

.tm-rev__r {
  margin-top: var(--primitive-spacing-lg);
  display: flex;
  align-items: baseline;
  gap: var(--primitive-spacing-md-lg);
  font-size: var(--app-text-14);
  color: var(--semantic-color-text-heading, #032E42);
}

.tm-rev__n {
  margin-top: var(--primitive-spacing-lg);
  font-size: var(--app-text-14);
  line-height: var(--primitive-typography-line-height-normal);
  color: var(--tm-muted);
}

.tm-rev__r b {
  font-weight: var(--primitive-typography-weight-bold);
}

.tm-rev__r .r {
  font-size: var(--app-text-14);
  color: var(--tm-muted);
}

/* ── tm-idnote ─────────────────────────────────────────────── */
.tm-idnote {
  margin: var(--primitive-spacing-lg) var(--primitive-spacing-xl-2xl) var(--primitive-spacing-zero);
  font-size: var(--app-text-14);
  line-height: var(--primitive-typography-line-height-normal);
  color: var(--tm-muted);
}

.tm-idnote b {
  color: var(--semantic-color-text-heading, #032E42);
  font-weight: var(--primitive-typography-weight-bold);
}

/* ── cell ─────────────────────────────────────────────── */
.cell__lbl {
  font-family: var(--font-mono);
  font-size: var(--app-text-12);
  letter-spacing: var(--app-tracking-caps);
  text-transform: uppercase;
  color: var(--tm-teal-700);
  margin: var(--primitive-spacing-zero) var(--primitive-spacing-zero) var(--primitive-spacing-md-lg);
}

.cell__cap {
  font-size: var(--app-text-14);
  color: var(--tm-muted);
  max-width: 372px;
  margin: var(--primitive-spacing-lg) var(--primitive-spacing-zero) var(--primitive-spacing-zero);
  line-height: var(--primitive-typography-line-height-normal);
}

/* ── ax-deidline ─────────────────────────────────────────────── */
.ax-deidline {
  display: flex;
  align-items: center;
  gap: var(--primitive-spacing-md-lg);
  font-family: var(--axsans);
  font-size: var(--app-text-14);
  line-height: var(--primitive-typography-line-height-snug);
  color: var(--tm-muted,#515757);
}

.ax-deidline svg {
  color: var(--axtealdeep);
  flex: none;
}

/* ── dp-stat ─────────────────────────────────────────────── */
.dp-stat {
  flex: 1;
  text-align: center;
  padding: var(--primitive-spacing-xl) var(--primitive-spacing-lg);
  border-radius: var(--primitive-radius-md);
  background: var(--semantic-color-surface-neutral-subtle);
}

.dp-stat__value {
  display: block;
  font-family: var(--primitive-typography-family-display);
  font-weight: var(--primitive-typography-weight-semibold);
  font-size: var(--app-text-28);
  line-height: var(--primitive-typography-line-height-none);
  color: var(--tm-gold-ink);
}

.dp-stat__label {
  display: block;
  margin-top: var(--primitive-spacing-sm);
  font-size: var(--app-text-12);
  line-height: var(--primitive-typography-line-height-tight);
  color: var(--semantic-color-text-neutral-subtle);
}

.dp-stat + .dp-stat {
  border-left: var(--primitive-border-width-thin) solid var(--semantic-color-border-hairline);
}

/* ── dp-ccard ─────────────────────────────────────────────── */
.dp-ccard {
  flex: none;
  background: var(--semantic-color-contrast-light);
  border-radius: var(--primitive-radius-lg);
  padding: var(--primitive-spacing-xl);
  box-shadow: var(--tm-e1);
  width: 262px;
  scroll-snap-align: start;
  border: var(--primitive-border-width-thin) solid var(--tm-line-soft);
  display: flex;
  flex-direction: column;
  min-height: 150px;
}

.dp-ccard__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--primitive-spacing-md);
  font-family: var(--font-mono,monospace);
  font-size: var(--app-text-12);
  letter-spacing: var(--primitive-typography-letter-spacing-wider);
  text-transform: uppercase;
  color: var(--tm-teal-700);
  margin-bottom: var(--primitive-spacing-md-lg);
}

.dp-ccard__title {
  font-weight: var(--primitive-typography-weight-bold);
  font-size: var(--app-text-16);
  line-height: var(--primitive-typography-line-height-tight);
  color: var(--tm-navy);
}

.dp-ccard__blurb {
  font-size: var(--app-text-12);
  color: var(--tm-muted);
  margin-top: var(--primitive-spacing-md);
  line-height: var(--primitive-typography-line-height-normal);
  flex: 1;
}

.dp-ccard__foot {
  margin-top: var(--primitive-spacing-lg-xl);
  display: flex;
  align-items: center;
  gap: var(--primitive-spacing-sm-md);
}

.dp-ccard__eyebrow .cc {
  width: 22px;
  height: 22px;
  border-radius: var(--primitive-radius-sm);
  background: var(--tm-teal-bg);
  color: var(--tm-teal-700);
  display: none;
  align-items: center;
  justify-content: center;
  flex: none;
}

.dp-ccard__blurb .span {
  font-size: var(--app-text-12);
}

.dp-ccard--comm .dp-ccard__eyebrow {
  color: var(--tm-navy);
}

.dp-ccard--comm .dp-ccard__eyebrow .cc {
  background: var(--semantic-color-badge-progress-surface);
  color: var(--tm-navy);
}

/* ── tm-must ─────────────────────────────────────────────── */
.tm-must {
  margin-top: var(--primitive-spacing-2xl);
  padding: var(--primitive-spacing-xl) var(--primitive-spacing-xl);
  border-radius: var(--app-radius-group);
  border: var(--primitive-border-width-thin) solid var(--tm-line);
  background: var(--semantic-color-contrast-light);
}

.tm-must--on {
  background: var(--tm-err-subtle,#FBEDEA);
  border-color: var(--semantic-color-border-error-subtle);
}

.tm-must--off {
  opacity: 1;
}

.tm-must__h {
  display: flex;
  align-items: flex-start;
  gap: var(--primitive-spacing-lg-xl);
}

.tm-must__b {
  flex: 1;
  min-width: 0;
}

.tm-must__t {
  font-size: var(--app-text-16);
  font-weight: var(--primitive-typography-weight-bold);
  color: var(--tm-navy);
}

.tm-must__m {
  font-size: var(--app-text-12);
  line-height: var(--primitive-typography-line-height-normal);
  color: var(--tm-muted);
  margin-top: var(--primitive-spacing-sm);
}

.tm-must--on .tm-must__t {
  color: var(--tm-err, #AC0019);
}

/* ── ac-id ─────────────────────────────────────────────── */
.ac-id__ver {
  font-size: var(--app-text-12);
}

.ac-id__where {
  font-size: var(--app-text-12);
}

/* ── ac-note ─────────────────────────────────────────────── */
.ac-note {
  font-size: var(--app-text-12);
}

/* ── ac-row ─────────────────────────────────────────────── */
.ac-row__val {
  font-size: var(--app-text-12);
}

/* ── tm-item ─────────────────────────────────────────────── */
.tm-item {
  padding: var(--primitive-spacing-xl) var(--primitive-spacing-xl-2xl);
  border-top: var(--primitive-border-width-thin) solid var(--tm-line-soft);
}

.tm-item__h {
  display: flex;
  align-items: center;
  gap: var(--primitive-spacing-md-lg);
}

.tm-item__kind {
  font-family: var(--font-mono,monospace);
  font-size: var(--app-text-12);
  letter-spacing: var(--app-tracking-caps);
  text-transform: uppercase;
  font-weight: var(--primitive-typography-weight-medium);
  color: var(--tm-teal-700);
}

.tm-item__who {
  font-size: var(--app-text-14);
  font-weight: var(--primitive-typography-weight-semibold);
  color: var(--tm-navy);
}

.tm-item__when {
  font-size: var(--app-text-12);
  color: var(--tm-muted);
  margin-left: auto;
}

.tm-item__flag {
  appearance: none;
  background: none;
  border: var(--primitive-border-width-none);
  color: var(--semantic-color-border-neutral-default);
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: -10px -12px -10px var(--primitive-spacing-zero);
  position: relative;
}

.tm-item__t {
  font-size: var(--app-text-14);
  line-height: var(--primitive-typography-line-height-normal);
  color: var(--tm-muted);
  margin-top: var(--primitive-spacing-md-lg);
}

.tm-item__flag::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: var(--touch-target-min);
  height: var(--touch-target-min);
}

.tm-item__b .b {
  font-size: inherit;
}

.tm-item--mod .tm-item__kind {
  color: var(--tm-navy, #032E42);
}

/* ── who ─────────────────────────────────────────────── */
.who .b {
  font-size: inherit;
}

/* ── ac-case ─────────────────────────────────────────────── */
.ac-case__meta b {
  color: var(--tm-state);
}

.ac-case__meta strong {
  color: var(--tm-state);
}

.ac-case__meta .ts {}

.ac-case__meta .canon {
  color: var(--tm-gold-ink);
}

.ac-case__meta b.canon {
  color: var(--tm-gold-ink);
}

/* ── tray ─────────────────────────────────────────────── */
.tray {
  position: relative;
  height: var(--app-nav-height);
  --nav-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 393 141' preserveAspectRatio='none'><path fill='white' d='M0,34 H156.5 A40,40 0 0,0 236.5,34 H393 V141 H0 Z'/></svg>");
}

.tray .navbg {
  position: absolute;
  inset: var(--primitive-spacing-zero);
  width: 100%;
  height: 100%;
  display: none;
  filter: drop-shadow(0 -1px 0 var(--tm-line-soft));
}

.tray .items {
  position: absolute;
  left: var(--primitive-spacing-zero);
  right: var(--primitive-spacing-zero);
  bottom: 34px;
  top: 73px;
  display: flex;
  align-items: flex-end;
  padding: var(--primitive-spacing-zero) var(--primitive-spacing-sm);
}

.tray .it {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--primitive-spacing-sm);
  color: var(--primitive-color-neutral-gray-500);
}

.tray .slot {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.tray .fab {
  position: absolute;
  left: 50%;
  top: var(--primitive-spacing-sm);
  transform: translateX(-50%);
  width: 60px;
  height: 60px;
  border-radius: var(--primitive-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(152deg,#A33A63 0%,var(--tm-ai,#802B4E) 62%,#6B2342 100%);
  color: var(--semantic-color-text-neutral-contrast);
  border: var(--primitive-border-width-none);
  box-shadow: var(--component-fab-shadow);
}

.tray .navglass {
  position: absolute;
  inset: var(--primitive-spacing-zero);
  pointer-events: none;
  background: rgba(255,255,255,.80);
  -webkit-backdrop-filter: blur(24px) saturate(1.7);
  backdrop-filter: blur(24px) saturate(1.7);
  -webkit-mask-image: var(--nav-mask);
  mask-image: var(--nav-mask);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.tray .navline {
  position: absolute;
  inset: var(--primitive-spacing-zero);
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  overflow: visible;
}

.tray .fabscrim {
  position: absolute;
  left: 50%;
  top: -6px;
  transform: translateX(-50%);
  width: 80px;
  height: 80px;
  border-radius: var(--primitive-radius-full);
  pointer-events: none;
  background: rgba(255,255,255,.70);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  backdrop-filter: blur(16px) saturate(1.5);
  box-shadow: inset 0 0 0 1px rgba(3,46,66,.10);
}

.tray .fab svg {
  width: 26px;
  height: 26px;
}

.tray .it .lb {
  font-size: var(--app-text-12);
  font-weight: var(--primitive-typography-weight-medium);
}

.tray .it.on {
  color: var(--tm-teal);
}

.tray .slot .lb {
  font-size: var(--app-text-12);
  font-weight: var(--primitive-typography-weight-bold);
  color: var(--tm-ai,#802B4E);
}

.tray .it.on .lb {
  font-weight: var(--primitive-typography-weight-bold);
}

/* ── tm-post ─────────────────────────────────────────────── */
.tm-post {
  background: var(--semantic-color-contrast-light);
  border: var(--primitive-border-width-thin) solid var(--tm-line-soft);
  border-radius: var(--primitive-radius-lg);
  padding: var(--primitive-spacing-xl);
  box-shadow: var(--tm-e1);
  margin-bottom: var(--primitive-spacing-lg-xl);
}

.tm-post--urgent {
  border-color: var(--semantic-color-border-error-subtle);
  box-shadow: var(--tm-e1), 0 0 0 3px rgba(178,58,46,.055);
}

.tm-post__q {
  font-size: var(--app-text-16);
  font-weight: var(--primitive-typography-weight-bold);
  line-height: var(--primitive-typography-line-height-tight);
  color: var(--tm-navy);
}

.tm-post__body {
  font-size: var(--app-text-14);
  line-height: var(--primitive-typography-line-height-normal);
  color: var(--tm-muted);
  margin-top: var(--primitive-spacing-md);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tm-post__by {
  font-size: var(--app-text-12);
  line-height: var(--primitive-typography-line-height-normal);
  color: var(--tm-muted);
  margin-top: var(--primitive-spacing-md);
}

.tm-post__ex {
  font-size: var(--app-text-14);
  line-height: var(--primitive-typography-line-height-normal);
  color: var(--tm-muted);
  margin-top: var(--primitive-spacing-md-lg);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tm-post__ctx {
  display: none;
}

.tm-post--obs {
  border-left: var(--primitive-border-width-none);
}

.tm-post__by b {
  color: var(--tm-navy);
  font-weight: var(--primitive-typography-weight-semibold);
}

.tm-post[data-open] {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.tm-post__body .b {
  font-size: var(--app-text-12);
}

.tm-post[data-open]:active {
  background: var(--tm-press,rgba(3,46,66,.035));
}

/* ── tm-anon ─────────────────────────────────────────────── */
.tm-anon {
  margin: var(--primitive-spacing-zero) var(--tm-gutter) var(--primitive-spacing-sm);
  padding: var(--primitive-spacing-lg) var(--primitive-spacing-lg-xl);
  border-radius: var(--primitive-radius-md);
  background: var(--semantic-color-surface-neutral-subtle,#F2F6F7);
  font-size: var(--app-text-12);
  line-height: var(--primitive-typography-line-height-normal);
  color: var(--tm-muted);
}

.tm-anon b {
  color: var(--tm-navy);
  font-weight: var(--primitive-typography-weight-semibold);
}

/* ── tm-gate ─────────────────────────────────────────────── */
.tm-gate {
  margin-top: var(--primitive-spacing-lg-xl);
  padding: var(--primitive-spacing-lg-xl) var(--primitive-spacing-lg-xl);
  border-radius: var(--primitive-radius-md);
  background: var(--semantic-color-surface-neutral-subtle,#F2F6F7);
  font-size: var(--app-text-12);
  line-height: var(--primitive-typography-line-height-normal);
  color: var(--tm-muted);
}

.tm-gate b {
  color: var(--tm-navy);
  font-weight: var(--primitive-typography-weight-semibold);
}

/* ── ax-eyebrow ─────────────────────────────────────────────── */
.ax-eyebrow {
  font-family: var(--axmono);
  font-size: var(--app-text-12);
  letter-spacing: var(--app-tracking-caps);
  text-transform: uppercase;
  color: var(--tm-mid);
}

.ax-eyebrow.ax-eb--ev {
  margin-top: var(--primitive-spacing-lg-xl);
}

/* ── ax-psec ─────────────────────────────────────────────── */
.ax-psec {
  font-family: var(--axmono);
  font-size: var(--app-text-12);
  letter-spacing: var(--app-tracking-caps);
  text-transform: uppercase;
  color: var(--tm-mid);
  margin: var(--primitive-spacing-2xl) var(--primitive-spacing-zero) var(--primitive-spacing-sm-md);
}

/* ── ax-srchint ─────────────────────────────────────────────── */
.ax-srchint {
  margin-top: var(--primitive-spacing-md-lg);
  font-family: var(--axsans);
  font-size: var(--app-text-12);
  line-height: var(--primitive-typography-line-height-normal);
  color: var(--tm-mid);
}

/* ── ax-closehint ─────────────────────────────────────────────── */
.ax-closehint {
  margin: var(--primitive-spacing-zero) var(--primitive-spacing-zero) var(--primitive-spacing-lg-xl);
  font-family: var(--axsans);
  font-size: var(--app-text-12);
  line-height: var(--primitive-typography-line-height-normal);
  color: var(--tm-mid);
}

/* ── mut ─────────────────────────────────────────────── */
.mut {
  color: var(--tm-mid) !important;
}

/* ── tm-th ─────────────────────────────────────────────── */
.tm-th {
  padding: var(--primitive-spacing-3xl) var(--primitive-spacing-xl-2xl) var(--primitive-spacing-zero);
}

.tm-th__top {
  display: flex;
  align-items: flex-start;
  gap: var(--primitive-spacing-lg);
  position: relative;
}

.tm-th__q {
  font-family: var(--primitive-typography-family-display,'Newsreader',serif);
  font-weight: var(--primitive-typography-weight-semibold);
  font-size: var(--app-text-28);
  line-height: var(--primitive-typography-line-height-tighter);
  letter-spacing: var(--primitive-typography-letter-spacing-normal);
  color: var(--tm-navy);
  flex: 1;
}

.tm-th__more {
  appearance: none;
  background: none;
  border: var(--primitive-border-width-thin) solid var(--tm-line-soft);
  border-radius: var(--primitive-radius-md);
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  flex: none;
  color: var(--tm-mid);
  font-size: var(--app-text-16);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--primitive-spacing-xs);
  position: relative;
}

.tm-th__badges {
  display: flex;
  gap: var(--primitive-spacing-sm-md);
  margin-top: var(--primitive-spacing-xl);
}

.tm-th__by {
  font-size: var(--app-text-12);
  line-height: var(--primitive-typography-line-height-normal);
  color: var(--tm-muted);
  margin-top: var(--primitive-spacing-lg);
}

.tm-th__body {
  font-size: var(--app-text-14);
  line-height: var(--primitive-typography-line-height-normal);
  color: var(--tm-muted);
  margin-top: var(--primitive-spacing-lg-xl);
}

.tm-th__by b {
  color: var(--tm-navy);
  font-weight: var(--primitive-typography-weight-semibold);
}

.tm-th__more[aria-expanded="true"] {
  background: var(--semantic-color-surface-neutral-subtle,#F2F6F7);
  color: var(--tm-navy);
}

.tm-th__b .b {
  font-size: inherit;
}

/* ── dp-status ─────────────────────────────────────────────── */
.dp-status {
  display: inline-flex;
  align-items: center;
  gap: var(--primitive-spacing-md);
  height: 32px;
  padding: var(--primitive-spacing-zero) var(--primitive-spacing-lg);
  border-radius: var(--primitive-radius-full);
  font-size: var(--app-text-12);
  font-weight: var(--primitive-typography-weight-semibold);
  letter-spacing: var(--primitive-typography-letter-spacing-normal);
  white-space: nowrap;
  background: var(--tm-teal-bg);
  color: var(--tm-mid);
}

.dp-status__q {
  font-size: var(--app-text-12);
  letter-spacing: var(--primitive-typography-letter-spacing-wide);
}

.dp-status--offline {
  background: var(--semantic-color-surface-neutral-subtle,#F2F6F7);
}

.dp-status--sending {
  background: var(--tm-teal-bg);
}

.dp-status--sent {
  background: var(--primitive-color-feedback-success-100);
}

.dp-status--failed {
  background: var(--semantic-color-badge-attention-surface);
}

.dp-status--oncall {
  background: var(--component-status-oncall-bg);
}

.dp-status--theatre {
  background: var(--component-status-theatre-bg);
}

.dp-status--off {
  background: var(--component-status-off-bg);
}

button.dp-status {
  border: none;
  cursor: pointer;
}

.dp-status .cx {
  position: relative;
  top: var(--primitive-spacing-xs);
}

.dp-status--offline .cx {
  color: var(--primitive-color-brand-navy-600);
}

.dp-status--syncing .dp-status--offline .dp-status__q {
  font-family: var(--font-mono,monospace);
  font-size: var(--app-text-10);
  letter-spacing: var(--primitive-typography-letter-spacing-wider);
  text-transform: uppercase;
  opacity: .72;
  margin-left: 1px;
}

/* ── tm-prov ─────────────────────────────────────────────── */
.tm-prov {
  display: flex;
  align-items: center;
  gap: var(--primitive-spacing-md-lg);
  margin-top: var(--primitive-spacing-lg-xl);
  padding-top: var(--primitive-spacing-lg-xl);
  border-top: var(--primitive-border-width-thin) solid var(--tm-line-soft);
}

.tm-prov__lbl {
  font-family: var(--font-mono,monospace);
  font-size: var(--app-text-12);
  letter-spacing: var(--app-tracking-caps);
  text-transform: uppercase;
  font-weight: var(--primitive-typography-weight-medium);
  color: var(--tm-mid);
}

.tm-prov__src {
  font-size: var(--app-text-12);
  color: var(--tm-muted);
  margin-left: auto;
}

.tm-prov--canon .tm-prov__lbl {}

.tm-prov--emerging .tm-prov__lbl {}

.tm-prov--new .tm-prov__lbl {}

/* ── chev ─────────────────────────────────────────────── */
.chev {
  color: var(--primitive-color-neutral-gray-300);
}

/* ── tdot ─────────────────────────────────────────────── */
.tdot {
  color: var(--primitive-color-neutral-gray-300);
}

/* ── dp-actionrow ─────────────────────────────────────────────── */
.dp-actionrow {
  display: flex;
  align-items: center;
  gap: var(--primitive-spacing-lg-xl);
  padding: var(--primitive-spacing-lg-xl) var(--primitive-spacing-xl);
  background: var(--semantic-color-contrast-light);
  border-radius: var(--primitive-radius-md);
  box-shadow: var(--tm-e1);
  border: var(--primitive-border-width-thin) solid var(--tm-line-soft);
  margin-bottom: var(--primitive-spacing-lg);
}

.dp-actionrow:has(.dp-pill) {
  padding-bottom: var(--primitive-spacing-xl);
}

.dp-actionrow--alert {
  background: var(--tm-err-subtle);
  border-color: var(--semantic-color-border-error-subtle);
}

.dp-actionrow__icon {
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: var(--primitive-radius-sm);
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--tm-teal-bg);
  color: var(--tm-teal-700);
}

.dp-actionrow__body {
  flex: 1;
  min-width: 0;
}

.dp-actionrow__title {
  font-weight: var(--primitive-typography-weight-semibold);
  font-size: var(--app-text-14);
  color: var(--tm-navy);
  line-height: var(--primitive-typography-line-height-tight);
}

.dp-actionrow__meta {
  font-size: var(--app-text-12);
  color: var(--tm-muted);
  margin-top: var(--primitive-spacing-sm);
  line-height: var(--primitive-typography-line-height-snug);
}

.dp-actionrow__pills {
  display: flex;
  gap: var(--primitive-spacing-sm-md);
  margin-top: var(--primitive-spacing-md);
  flex-wrap: wrap;
}

.dp-actionrow__chev {
  align-self: center;
  color: var(--semantic-color-border-neutral-default);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dp-actionrow--icon {
  align-items: flex-start;
}

.dp-actionrow + .dp-actionrow {
  margin-top: var(--primitive-spacing-zero);
}

.dp-actionrow:last-child {
  margin-bottom: var(--primitive-spacing-zero);
}

.dp-actionrow[data-goto] {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.dp-actionrow__meta .who {
  color: var(--tm-teal-700);
  font-weight: var(--primitive-typography-weight-semibold);
  font-size: var(--app-text-12);
}

.dp-actionrow--alert .dp-actionrow__icon {
  background: var(--semantic-color-badge-attention-surface);
  color: var(--tm-err);
}

.dp-actionrow--icon .dp-actionrow__icon {
  display: flex;
  margin-top: -1.5px;
}

.dp-actionrow__body > div:last-child {
  display: flex;
  flex-wrap: wrap;
  gap: var(--primitive-spacing-zero);
}

.dp-actionrow__body > div:last-child:has(.dp-pill) {
  margin-top: var(--primitive-spacing-lg);
  gap: var(--primitive-spacing-md);
}

.dp-actionrow[data-goto]:active {
  background: var(--tm-press,rgba(3,46,66,.035));
}

/* ── ax-topic ─────────────────────────────────────────────── */
.ax-topic {
  appearance: none;
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  gap: var(--primitive-spacing-lg);
  cursor: pointer;
  background: var(--semantic-color-contrast-light);
  border: var(--primitive-border-width-thin) solid var(--axhair);
  border-radius: var(--primitive-radius-md);
  padding: var(--primitive-spacing-lg-xl) var(--primitive-spacing-xl);
}

.ax-topic .tdot {
  width: 8px;
  height: 8px;
  border-radius: var(--primitive-radius-circle);
  background: var(--axteal);
  flex: none;
}

.ax-topic .tb {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--primitive-spacing-xs);
  min-width: 0;
}

.ax-topic .tt {
  font-family: var(--axsans);
  font-weight: var(--primitive-typography-weight-bold);
  font-size: var(--app-text-16);
  color: var(--axink);
}

.ax-topic .ts {}

.ax-topic .chev {
  font-size: var(--app-text-22);
  color: var(--component-provenance-new);
  flex: none;
}

.ax-topic--none .tdot {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px #9fb0ab;
}

.ax-topic--none .tt {
  color: var(--axink);
}

/* ── ax-hchip ─────────────────────────────────────────────── */
.ax-hchip {
  appearance: none;
  cursor: pointer;
  min-height: var(--touch-target-min);
  padding: var(--primitive-spacing-zero) var(--primitive-spacing-xl);
  border: var(--primitive-border-width-none);
  border-radius: var(--primitive-radius-md);
  background: var(--semantic-color-contrast-light);
  box-shadow: inset 0 0 0 1px var(--axhair);
  font-family: var(--axsans);
  font-weight: var(--primitive-typography-weight-bold);
  font-size: var(--app-text-14);
  color: var(--axink);
}

.ax-hchip:hover {
  box-shadow: inset 0 0 0 1px var(--axtealsoft);
}

.ax-hchip.on {
  background: var(--axtealdeep);
  color: var(--semantic-color-text-neutral-contrast);
  box-shadow: none;
}

/* ── dp-opt ─────────────────────────────────────────────── */
.dp-opt {
  border-radius: var(--primitive-radius-sm);
}

/* ── dp-select ─────────────────────────────────────────────── */
.dp-select {
  border-radius: var(--primitive-radius-sm);
}

/* ── tm-harm ─────────────────────────────────────────────── */
.tm-harm {
  display: flex;
  align-items: center;
  gap: var(--primitive-spacing-lg);
  margin: var(--primitive-spacing-xl) var(--primitive-spacing-zero) var(--primitive-spacing-zero);
  width: 100%;
  padding: var(--primitive-spacing-lg-xl) var(--primitive-spacing-lg-xl);
  border-radius: var(--primitive-radius-md);
  appearance: none;
  cursor: pointer;
  text-align: left;
  background: var(--semantic-color-surface-neutral-subtle, #F2F6F7);
  border: var(--primitive-border-width-thin) solid var(--semantic-color-border-hairline, #E2E9EA);
}

.tm-harm__box {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: var(--primitive-radius-xs);
  background: var(--semantic-color-contrast-light);
  border: var(--primitive-border-width-regular) solid var(--semantic-color-border-neutral-default, #B1B5B6);
  display: grid;
  place-items: center;
  color: transparent;
}

.tm-harm__t {
  flex: 1;
  font-size: var(--app-text-14);
  font-weight: var(--primitive-typography-weight-bold);
  color: var(--semantic-color-text-heading, #032E42);
}

.tm-harm__m {
  flex: none;
  font-family: var(--font-mono,monospace);
  font-size: var(--app-text-12);
  letter-spacing: var(--app-tracking-caps);
  text-transform: uppercase;
  color: var(--tm-muted);
}

.tm-harm--on {
  background: var(--tm-err-subtle, #FBEEEC);
  border-color: var(--semantic-color-text-error-default, #AC0019);
}

.tm-harm--on .tm-harm__box {
  background: var(--semantic-color-text-error-default, #AC0019);
  border-color: var(--semantic-color-text-error-default, #AC0019);
  color: var(--semantic-color-text-neutral-contrast);
}

.tm-harm--on .tm-harm__t {
  color: var(--semantic-color-text-error-default, #AC0019);
}

.tm-harm--on .tm-harm__m {
  color: var(--semantic-color-text-error-default, #AC0019);
}

/* ── tm-flag ─────────────────────────────────────────────── */
.tm-flag {
  display: flex;
  align-items: flex-start;
  gap: var(--primitive-spacing-lg);
  width: calc(100% - 40px);
  margin: var(--primitive-spacing-lg-xl) var(--primitive-spacing-xl-2xl) var(--primitive-spacing-zero);
  padding: var(--primitive-spacing-lg-xl) var(--primitive-spacing-lg-xl);
  border-radius: var(--primitive-radius-md);
  appearance: none;
  cursor: pointer;
  text-align: left;
  background: var(--semantic-color-surface-neutral-subtle, #F2F6F7);
  border: var(--primitive-border-width-thin) solid var(--semantic-color-border-hairline, #E2E9EA);
}

.tm-flag__box {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: var(--primitive-radius-xs);
  background: var(--semantic-color-contrast-light);
  border: var(--primitive-border-width-regular) solid var(--semantic-color-border-neutral-default, #B1B5B6);
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
}

.tm-flag__b {
  display: block;
}

.tm-flag__t {
  display: block;
  font-size: var(--app-text-14);
  font-weight: var(--primitive-typography-weight-bold);
  color: var(--semantic-color-text-heading, #032E42);
}

.tm-flag__m {
  display: block;
  font-size: var(--app-text-12);
  line-height: var(--primitive-typography-line-height-normal);
  margin-top: var(--primitive-spacing-xs-sm);
  color: var(--tm-muted);
}

.tm-flag--on {
  background: var(--tm-err-subtle, #FBEEEC);
  border-color: var(--semantic-color-text-error-default, #AC0019);
}

.tm-flag--on .tm-flag__box {
  background: var(--semantic-color-text-error-default, #AC0019);
  border-color: var(--semantic-color-text-error-default, #AC0019);
  color: var(--semantic-color-text-neutral-contrast);
}

.tm-flag--on .tm-flag__t {
  color: var(--semantic-color-text-error-default, #AC0019);
}

/* ── ax-cmopt ─────────────────────────────────────────────── */
.ax-cmopt {
  appearance: none;
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  gap: var(--primitive-spacing-lg);
  cursor: pointer;
  background: none;
  border: var(--primitive-border-width-none);
  padding: var(--primitive-spacing-lg) var(--primitive-spacing-xs);
  font-family: var(--axsans);
  font-size: var(--app-text-14);
  color: var(--axink);
}

.ax-cmopt .box {
  width: 22px;
  height: 22px;
  border-radius: var(--primitive-radius-xs);
  border: var(--primitive-border-width-regular) solid var(--tm-line);
  flex: none;
  display: grid;
  place-items: center;
  color: transparent;
  border-color: var(--semantic-color-border-neutral-default);
}

.ax-cmopt.on .box {
  background: var(--axtealdeep);
  border-color: var(--axtealdeep);
  color: var(--semantic-color-text-neutral-contrast);
}

/* ── box ─────────────────────────────────────────────── */
.box {
  border-radius: var(--primitive-radius-xs);
}

/* ── ck ─────────────────────────────────────────────── */
.ck {
  border-radius: var(--primitive-radius-xs);
}

/* ── tm-kb ─────────────────────────────────────────────── */
.tm-kb {
  background: #D3D6DC;
  padding: var(--primitive-spacing-md) var(--primitive-spacing-sm-md) var(--primitive-spacing-sm-md);
  user-select: none;
}

.tm-kb__r {
  display: flex;
  gap: var(--primitive-spacing-sm-md);
  justify-content: center;
  margin-bottom: var(--primitive-spacing-md);
}

.tm-kb__k {
  flex: 1;
  height: 41px;
  border-radius: var(--primitive-radius-sm);
  background: var(--semantic-color-contrast-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--app-text-16);
  color: var(--primitive-color-neutral-gray-950);
  box-shadow: var(--component-kbkey-shadow);
}

.tm-kb__b {
  height: 5px;
  width: 134px;
  border-radius: var(--primitive-radius-xs);
  background: rgba(3,46,66,.30);
  margin: var(--primitive-spacing-zero) auto var(--primitive-spacing-sm);
}

.tm-kb__k--w {
  flex: 1.5;
  background: var(--semantic-color-border-neutral-default);
  font-size: var(--app-text-12);
  font-weight: var(--primitive-typography-weight-semibold);
}

.tm-kb__k--sp {
  flex: 5;
}

.tm-kb__k--go {
  flex: 2;
  background: var(--semantic-color-border-neutral-default);
  color: var(--primitive-color-neutral-gray-950);
  font-size: var(--app-text-12);
  font-weight: var(--primitive-typography-weight-semibold);
}

/* ── lnot ─────────────────────────────────────────────── */
.lnot {
  display: block;
  width: 100%;
  text-align: left;
  appearance: none;
  border: var(--primitive-border-width-none);
  cursor: pointer;
  border-radius: var(--primitive-radius-2xl);
  padding: var(--primitive-spacing-lg-xl) var(--primitive-spacing-xl) 15px;
  background: rgba(255,255,255,.94);
  color: var(--semantic-color-text-heading, #032E42);
}

.lnot--q {
  background: rgba(255,255,255,.30);
  color: var(--semantic-color-text-neutral-contrast);
}

.lnot__h {
  display: flex;
  align-items: center;
  gap: var(--primitive-spacing-md);
}

.lnot__ic {
  width: 20px;
  height: 20px;
  border-radius: var(--primitive-radius-sm);
  display: grid;
  place-items: center;
  background: var(--semantic-color-interactive-primary-default, #007072);
  color: var(--semantic-color-text-neutral-contrast);
  font-size: var(--app-text-10);
  font-weight: var(--primitive-typography-weight-bold);
  letter-spacing: var(--primitive-typography-letter-spacing-wide);
  flex: none;
}

.lnot__app {
  font-family: var(--font-mono,monospace);
  font-size: var(--app-text-12);
  letter-spacing: var(--app-tracking-caps);
  text-transform: uppercase;
  color: var(--tm-muted);
}

.lnot__w {
  margin-left: auto;
  font-size: var(--app-text-12);
  color: var(--tm-muted);
}

.lnot__t {
  display: block;
  margin-top: var(--primitive-spacing-md-lg);
  font-size: var(--app-text-16);
  font-weight: var(--primitive-typography-weight-bold);
  line-height: var(--primitive-typography-line-height-tight);
}

.lnot__b {
  display: block;
  margin-top: var(--primitive-spacing-xs-sm);
  font-size: var(--app-text-14);
  line-height: var(--primitive-typography-line-height-snug);
  color: var(--tm-muted);
}

.lnot__p {
  display: block;
  margin-top: var(--primitive-spacing-md-lg);
}

.lnot--q .lnot__app {
  color: rgba(255,255,255,.72);
}

.lnot--q .lnot__w {
  color: rgba(255,255,255,.72);
}

.lnot--q .lnot__b {
  color: rgba(255,255,255,.78);
}

/* ── tm-alhd ─────────────────────────────────────────────── */
.tm-alhd {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--primitive-spacing-lg);
  padding: var(--primitive-spacing-3xl) var(--primitive-spacing-xl-2xl) var(--primitive-spacing-lg);
}

.tm-alhd__t {
  font-family: var(--primitive-typography-family-display,'Newsreader',serif);
  font-weight: var(--primitive-typography-weight-semibold);
  font-size: var(--app-text-28);
  line-height: var(--primitive-typography-line-height-tighter);
  color: var(--tm-navy);
}

.tm-alhd__a {
  appearance: none;
  border: var(--primitive-border-width-none);
  background: none;
  padding: var(--primitive-spacing-zero);
  cursor: pointer;
  position: relative;
  font-family: inherit;
  font-size: var(--app-text-14);
  font-weight: var(--primitive-typography-weight-bold);
  color: var(--semantic-color-text-primary-default, #007072);
  text-decoration: none;
}

.tm-alhd__a::after {
  content: '';
  position: absolute;
  left: 50%;
  right: -4px;
  top: 50%;
  transform: translate(-50%,-50%);
  height: 100%;
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
  width: 100%;
}

/* ── dp-link ─────────────────────────────────────────────── */
.dp-link {
  font-family: var(--primitive-typography-family-body);
  display: inline-flex;
  align-items: center;
  gap: var(--primitive-spacing-sm-md);
  appearance: none;
  border: var(--primitive-border-width-none);
  background: none;
  padding: var(--primitive-spacing-zero);
  cursor: pointer;
  font-size: var(--app-text-14);
  font-weight: var(--primitive-typography-weight-bold);
  line-height: var(--primitive-typography-line-height-snug);
  text-decoration: none;
  color: var(--semantic-color-text-primary-default, #007072);
  position: relative;
}

.dp-link::after {
  content: '';
  position: absolute;
  left: 50%;
  right: -6px;
  top: 50%;
  transform: translate(-50%,-50%);
  height: 100%;
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
  width: 100%;
}

.dp-link--inline {
  display: inline;
  font-size: inherit;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.dp-link--inline::after {
  content: none;
}

.dp-link--quiet {
  color: var(--semantic-color-text-neutral-subtle, #515757);
}

.dp-link svg {
  flex: none;
}

.dp-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── ax-ment ─────────────────────────────────────────────── */
.ax-ment {
  display: inline-flex;
  align-items: center;
  gap: var(--primitive-spacing-md);
  min-height: var(--touch-target-min);
  padding: var(--primitive-spacing-zero) var(--primitive-spacing-sm-md) var(--primitive-spacing-zero) var(--primitive-spacing-sm-md);
  border-radius: var(--primitive-radius-md);
  background: var(--semantic-color-contrast-light);
  box-shadow: inset 0 0 0 1px var(--axhair);
  font-family: var(--axsans);
  font-size: var(--app-text-14);
  font-weight: var(--primitive-typography-weight-bold);
  color: var(--axink);
  border: var(--primitive-border-width-none);
}

.ax-ment__a {
  width: 26px;
  height: 26px;
  border-radius: var(--primitive-radius-full);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--app-text-12);
  font-weight: var(--primitive-typography-weight-bold);
  color: var(--semantic-color-text-neutral-contrast);
  background: linear-gradient(150deg,var(--component-provenance-emerging-ink),var(--tm-teal-700));
}

.ax-ment__x {
  width: 30px;
  height: 30px;
  flex: none;
  border: var(--primitive-border-width-none);
  background: none;
  cursor: pointer;
  color: var(--axink2);
  display: grid;
  place-items: center;
  position: relative;
}

.ax-ment__x::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 100%;
  height: 100%;
  border-radius: var(--primitive-radius-circle);
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
}

.ax-ment--add {
  color: var(--axink2);
  font-weight: var(--primitive-typography-weight-semibold);
  padding: var(--primitive-spacing-zero) var(--primitive-spacing-lg-xl);
  cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--axhair);
}

.ax-ment--new {
  animation: ax-landed .34s cubic-bezier(.22,.61,.36,1);
}

.ax-ment--solo {
  width: 100%;
  justify-content: center;
  gap: var(--primitive-spacing-md-lg);
  min-height: 48px;
  padding: var(--primitive-spacing-zero) var(--primitive-spacing-xl);
  color: var(--axink);
}

.ax-ment--icon {
  width: var(--touch-target-min);
  min-height: var(--touch-target-min);
  padding: var(--primitive-spacing-zero);
  justify-content: center;
  gap: var(--primitive-spacing-zero);
  color: var(--axtealdeep);
  cursor: pointer;
}

.ax-ment--solo svg {
  color: var(--axtealdeep);
  flex: none;
}

.ax-ment--icon svg {
  flex: none;
}

/* ── ax-vidgo ─────────────────────────────────────────────── */
.ax-vidgo {
  width: 36px;
  height: 36px;
  flex: none;
  border: var(--primitive-border-width-none);
  border-radius: var(--primitive-radius-full);
  cursor: pointer;
  display: grid;
  place-items: center;
  position: relative;
  background: var(--axtealdeep,#004D4E);
  color: var(--semantic-color-text-neutral-contrast);
}

.ax-vidgo::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 100%;
  height: 100%;
  border-radius: var(--primitive-radius-circle);
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
}

/* ── ac-namelink ─────────────────────────────────────────────── */
.ac-namelink {
  position: relative;
}

.ac-namelink::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
  width: 100%;
  height: 100%;
}

/* ── tm-sw ─────────────────────────────────────────────── */
.tm-sw {
  width: 50px;
  height: 30px;
  border-radius: var(--primitive-radius-full);
  flex: none;
  position: relative;
  background: var(--tm-line);
  border: var(--primitive-border-width-none);
  padding: var(--primitive-spacing-zero);
  cursor: pointer;
  margin-top: var(--primitive-spacing-xs);
}

.tm-sw::before {
  content: "";
  position: absolute;
  left: -3px;
  right: -3px;
  top: 50%;
  transform: translateY(-50%);
  height: var(--touch-target-min);
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
}

.tm-sw::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: var(--primitive-radius-full);
  background: var(--semantic-color-contrast-light);
  box-shadow: var(--component-switch-shadow);
  transition: transform .16s ease;
}

.tm-sw--on {
  background: var(--tm-err, #AC0019);
}

.tm-sw--on::after {
  transform: translateX(20px);
}

.tm-sw--off {
  background: var(--semantic-color-surface-neutral-default);
}

.tm-sw:disabled {
  cursor: not-allowed;
  opacity: .55;
}

/* ── dp-seg ─────────────────────────────────────────────── */
.dp-seg {
  border-radius: var(--primitive-radius-md);
}

.dp-seg__i {
  border-radius: var(--primitive-radius-sm);
  min-height: var(--touch-target-min);
}

/* ── dp-note ─────────────────────────────────────────────── */
.dp-note {
  display: flex;
  gap: var(--primitive-spacing-lg-xl);
  padding: var(--primitive-spacing-xl) var(--primitive-spacing-xl);
  background: #FBF6EF;
  border: var(--primitive-border-width-thin) solid #EDE1CE;
  border-radius: var(--primitive-radius-lg);
  box-shadow: var(--tm-e1);
  margin: var(--primitive-spacing-zero) var(--tm-gutter);
  margin-left: var(--tm-gutter);
  margin-right: var(--tm-gutter);
}

.dp-note__avatar {
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: var(--primitive-radius-full);
  background: var(--component-status-theatre-bg);
  color: var(--tm-gold-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--primitive-typography-weight-bold);
  font-size: var(--app-text-12);
}

.dp-note__name {
  font-size: var(--app-text-14);
  font-weight: var(--primitive-typography-weight-bold);
  color: var(--tm-navy);
  }

.dp-note__quote {
  font-size: var(--app-text-16);
  line-height: var(--primitive-typography-line-height-snug);
  color: var(--tm-gold-ink);
  font-style: italic;
  font-family: var(--primitive-typography-family-display,'Newsreader',serif);
  }

.dp-note__meta {
  font-size: var(--app-text-10);
  color: var(--tm-faint);
  margin-top: var(--primitive-spacing-sm);
  font-family: var(--font-mono,monospace);
  letter-spacing: var(--primitive-typography-letter-spacing-wider);
  text-transform: uppercase;
  display: none;
}

.dp-note__body {
  min-width: 0;
  flex: 1;
}

.dp-note__quote .b {
  font-size: inherit;
}

/* ── dp-impact ─────────────────────────────────────────────── */
.dp-impact {
  background: var(--semantic-color-contrast-light);
  border-radius: var(--primitive-radius-xl);
  padding: var(--primitive-spacing-xl-2xl);
  box-shadow: var(--tm-glow-gold), var(--tm-e1);
  margin: var(--primitive-spacing-zero) var(--tm-gutter);
  border: var(--primitive-border-width-thin) solid var(--tm-line-soft);
  margin-left: var(--tm-gutter);
  margin-right: var(--tm-gutter);
}

.dp-impact__head {
  display: none;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--primitive-spacing-lg);
}

.dp-impact__note {
  margin-top: var(--primitive-spacing-xl-2xl);
  font-size: var(--app-text-14);
  color: var(--semantic-color-text-neutral-default,#3E4C4D);
  line-height: var(--primitive-typography-line-height-normal);
  padding-top: var(--primitive-spacing-xl-2xl);
  border-top: var(--primitive-border-width-thin) solid var(--tm-line-soft);
}

.dp-impact__collective {
  display: flex;
  align-items: baseline;
  gap: var(--primitive-spacing-md);
  margin-top: var(--primitive-spacing-xl);
  padding-top: var(--primitive-spacing-zero);
  border-top: var(--primitive-border-width-none);
  font-size: var(--app-text-12);
  color: var(--tm-muted);
  font-weight: var(--primitive-typography-weight-semibold);
  line-height: var(--primitive-typography-line-height-normal);
}

.dp-impact__collective svg {
  color: var(--tm-gold);
  flex: none;
  width: 15px;
  height: 15px;
}

.dp-impact__note b {
  color: var(--tm-gold-ink);
}

.dp-impact__collective b {
  color: var(--tm-navy);
  font-weight: var(--primitive-typography-weight-bold);
  white-space: nowrap;
}

.dp-impact .dp-ledger {
  display: flex;
  gap: var(--primitive-spacing-md-lg);
  margin-bottom: var(--primitive-spacing-lg-xl);
}

.dp-impact .dp-stat {
  flex: 1;
  text-align: center;
  padding: var(--primitive-spacing-xs) var(--primitive-spacing-md-lg);
  background: none;
  border: var(--primitive-border-width-none);
  border-radius: var(--primitive-radius-zero);
  display: block;
  min-width: 0;
}

.dp-impact__head .tt {
  font-weight: var(--primitive-typography-weight-bold);
  font-size: var(--app-text-14);
  color: var(--tm-navy);
}

.dp-impact__head .wk {
  font-size: var(--app-text-10);
  color: var(--tm-faint);
  font-family: var(--font-mono,monospace);
}

.dp-impact .dp-stat__value {
  font-family: var(--primitive-typography-family-display,'Newsreader',serif);
  font-weight: var(--primitive-typography-weight-semibold);
  font-size: var(--app-text-34);
  color: var(--tm-gold-ink);
  line-height: var(--primitive-typography-line-height-none);
  letter-spacing: var(--primitive-typography-letter-spacing-normal);
  display: block;
  font-variant-numeric: lining-nums tabular-nums;
  border-bottom: var(--primitive-border-width-none);
  padding-bottom: var(--primitive-spacing-zero);
}

.dp-impact .dp-stat__label {
  display: block;
  font-size: var(--app-text-12);
  color: var(--tm-muted);
  margin-top: var(--primitive-spacing-md-lg);
  line-height: var(--primitive-typography-line-height-snug);
  letter-spacing: var(--primitive-typography-letter-spacing-normal);
}

.dp-impact .dp-stat + .dp-stat {
  border-left: var(--primitive-border-width-thin) solid var(--tm-line-soft);
}

/* ── dp-setup ─────────────────────────────────────────────── */
.dp-setup {
  background: var(--tm-teal-bg);
  border-radius: var(--primitive-radius-xl);
  padding: var(--primitive-spacing-xl);
  box-shadow: var(--tm-e1);
  margin: var(--primitive-spacing-zero) var(--tm-gutter) var(--primitive-spacing-zero);
  border: var(--primitive-border-width-thin) solid #D3EAEA;
  margin-left: var(--tm-gutter);
  margin-right: var(--tm-gutter);
}

.dp-setup__title {
  font-weight: var(--primitive-typography-weight-bold);
  font-size: var(--app-text-16);
  color: var(--tm-navy);
  margin: var(--primitive-spacing-zero) var(--primitive-spacing-zero) var(--primitive-spacing-sm-md);
}

.dp-setup__sub {
  font-size: var(--app-text-12);
  color: var(--tm-teal-700);
  margin: var(--primitive-spacing-zero) var(--primitive-spacing-zero) var(--primitive-spacing-lg);
}

/* ── tm-seg ─────────────────────────────────────────────── */
.tm-seg {
  display: flex;
  gap: var(--primitive-spacing-zero);
  margin: var(--primitive-spacing-zero) var(--tm-gutter) var(--primitive-spacing-sm);
  border-bottom: var(--primitive-border-width-thin) solid var(--tm-line-soft);
  margin-left: var(--tm-gutter);
  margin-right: var(--tm-gutter);
}

.tm-seg button {
  appearance: none;
  background: none;
  border: var(--primitive-border-width-none);
  padding: var(--primitive-spacing-zero) var(--primitive-spacing-xs) var(--primitive-spacing-lg);
  margin-right: var(--primitive-spacing-2xl-3xl);
  font-family: inherit;
  font-size: var(--app-text-14);
  font-weight: var(--primitive-typography-weight-semibold);
  color: var(--tm-muted);
  border-bottom: var(--primitive-border-width-medium) solid transparent;
  margin-bottom: -1px;
  min-height: var(--touch-target-min);
  position: relative;
}

.tm-seg button::after {
  content: '';
  position: absolute;
  left: 50%;
  right: -3px;
  top: 50%;
  bottom: var(--primitive-spacing-zero);
  transform: translate(-50%,-50%);
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
  width: 100%;
  height: 100%;
}

.tm-seg .tm-seg__n {
  font-family: var(--font-mono,monospace);
  font-size: var(--app-text-12);
  font-weight: var(--primitive-typography-weight-normal);
  color: var(--tm-muted);
  margin-left: var(--primitive-spacing-sm-md);
}

.tm-seg .tm-seg__i--on {
  position: relative;
}

.tm-seg button.tm-seg__i--on {
  color: var(--tm-navy);
  font-weight: var(--primitive-typography-weight-bold);
  border-bottom-color: var(--tm-teal);
}

.tm-seg button.tm-seg__i--on .tm-seg__n {
  color: var(--tm-teal-700);
}

/* ── tm-corpus ─────────────────────────────────────────────── */
.tm-corpus {
  margin: var(--primitive-spacing-zero) var(--tm-gutter);
  background: var(--semantic-color-contrast-light);
  border: var(--primitive-border-width-thin) solid var(--tm-line-soft);
  border-radius: var(--primitive-radius-lg);
  padding: var(--primitive-spacing-xl);
  box-shadow: var(--tm-e1);
  margin-left: var(--tm-gutter);
  margin-right: var(--tm-gutter);
}

.tm-corpus__h {
  font-size: var(--app-text-14);
  font-weight: var(--primitive-typography-weight-bold);
  color: var(--tm-navy);
}

.tm-corpus__claim {
  font-size: var(--app-text-14);
  line-height: var(--primitive-typography-line-height-normal);
  color: var(--tm-muted);
  margin-top: var(--primitive-spacing-lg);
}

/* ── tm-empty ─────────────────────────────────────────────── */
.tm-empty {
  margin: var(--primitive-spacing-zero) var(--primitive-spacing-xl-2xl);
  padding: var(--primitive-spacing-2xl-3xl) var(--primitive-spacing-xl-2xl);
  text-align: center;
  border-radius: var(--primitive-radius-lg);
  border: var(--primitive-border-width-thin) dashed var(--tm-line);
  color: var(--tm-muted);
  font-size: var(--app-text-12);
  line-height: var(--primitive-typography-line-height-normal);
  margin-left: var(--tm-gutter);
  margin-right: var(--tm-gutter);
}

/* ── tm-receipt ─────────────────────────────────────────────── */
.tm-receipt {
  margin: var(--primitive-spacing-2xl) var(--tm-gutter) var(--primitive-spacing-zero);
  border: var(--primitive-border-width-thin) solid var(--tm-line-soft);
  border-radius: var(--app-radius-group);
  padding: var(--primitive-spacing-lg-xl) var(--primitive-spacing-xl);
  background: var(--semantic-color-contrast-light);
  box-shadow: var(--tm-e1);
  margin-left: var(--tm-gutter);
  margin-right: var(--tm-gutter);
}

.tm-receipt__k {
  font-family: var(--font-mono,monospace);
  font-size: var(--app-text-12);
  letter-spacing: var(--app-tracking-caps);
  text-transform: uppercase;
  color: var(--tm-navy);
  margin-bottom: var(--primitive-spacing-md-lg);
}

.tm-receipt__l {
  font-size: var(--app-text-14);
  line-height: var(--primitive-typography-line-height-normal);
  color: var(--tm-muted);
}

.tm-receipt__note {
  font-size: var(--app-text-12);
  line-height: var(--primitive-typography-line-height-normal);
  color: var(--tm-muted);
  margin-top: var(--primitive-spacing-md-lg);
}

.tm-receipt__l b {
  color: var(--tm-navy);
  font-weight: var(--primitive-typography-weight-bold);
}

/* ── tm-after ─────────────────────────────────────────────── */
.tm-after {
  margin: var(--primitive-spacing-2xl) var(--tm-gutter) var(--primitive-spacing-zero);
  margin-left: var(--tm-gutter);
  margin-right: var(--tm-gutter);
}

.tm-after__row {
  display: flex;
  gap: var(--primitive-spacing-lg);
  padding: var(--primitive-spacing-lg-xl) var(--primitive-spacing-zero);
  border-top: var(--primitive-border-width-thin) solid var(--tm-line-soft);
}

.tm-after__k {
  font-family: var(--font-mono,monospace);
  font-size: var(--app-text-12);
  letter-spacing: var(--app-tracking-caps);
  text-transform: uppercase;
  color: var(--tm-muted);
  width: 96px;
  flex: none;
  padding-top: var(--primitive-spacing-xs);
}

.tm-after__v {
  font-size: var(--app-text-14);
  line-height: var(--primitive-typography-line-height-normal);
  color: var(--tm-muted);
  flex: 1;
}

.tm-after__v b {
  color: var(--tm-navy);
  font-weight: var(--primitive-typography-weight-semibold);
}

.tm-after__v .tm-record__quote {
  font-family: var(--primitive-typography-family-display,'Newsreader',serif);
  font-style: italic;
  font-size: var(--app-text-16);
  line-height: var(--primitive-typography-line-height-normal);
  color: var(--tm-gold-ink);
  display: block;
}

/* ── tm-closed ─────────────────────────────────────────────── */
.tm-closed {
  margin: var(--primitive-spacing-2xl) var(--tm-gutter) var(--primitive-spacing-zero);
  padding: var(--primitive-spacing-lg-xl) var(--primitive-spacing-xl);
  border-radius: var(--primitive-radius-md);
  background: var(--semantic-color-surface-neutral-subtle,#F2F6F7);
  font-size: var(--app-text-12);
  line-height: var(--primitive-typography-line-height-normal);
  color: var(--tm-muted);
  margin-left: var(--tm-gutter);
  margin-right: var(--tm-gutter);
}

.tm-closed b {
  color: var(--tm-navy);
  font-weight: var(--primitive-typography-weight-semibold);
}

/* ── tm-anchor ─────────────────────────────────────────────── */
.tm-anchor {
  margin: var(--primitive-spacing-xl-2xl) var(--primitive-spacing-xl-2xl) var(--primitive-spacing-zero);
  border-left: var(--primitive-border-width-none);
  background: var(--semantic-color-surface-neutral-subtle,#F2F6F7);
  border-radius: var(--primitive-radius-md);
  padding: var(--primitive-spacing-lg-xl) var(--primitive-spacing-lg-xl);
  margin-left: var(--tm-gutter);
  margin-right: var(--tm-gutter);
}

.tm-anchor__k {
  font-family: var(--font-mono,monospace);
  font-size: var(--app-text-12);
  letter-spacing: var(--app-tracking-caps);
  text-transform: uppercase;
  color: var(--tm-teal-700, #004C4E);
  margin-bottom: var(--primitive-spacing-md);
}

.tm-anchor__q {
  font-size: var(--app-text-14);
  line-height: var(--primitive-typography-line-height-normal);
  color: var(--tm-muted);
}

.tm-anchor__w {
  font-size: var(--app-text-12);
  color: var(--tm-muted);
  margin-top: var(--primitive-spacing-md);
}

.tm-anchor__w b {
  color: var(--tm-navy);
  font-weight: var(--primitive-typography-weight-semibold);
}

/* ── tm-receipt-off ─────────────────────────────────────────────── */
.tm-receipt-off {
  display: flex;
  align-items: flex-start;
  gap: var(--primitive-spacing-md-lg);
  margin: var(--primitive-spacing-lg) var(--primitive-spacing-zero) var(--primitive-spacing-zero);
  padding: var(--primitive-spacing-lg) var(--primitive-spacing-lg-xl);
  border-radius: var(--primitive-radius-md);
  background: var(--semantic-color-surface-neutral-subtle,#F2F6F7);
  font-size: var(--app-text-12);
  line-height: var(--primitive-typography-line-height-normal);
  color: var(--tm-muted);
}

.tm-receipt-off--screen {
  margin: var(--primitive-spacing-xl) var(--tm-gutter) var(--primitive-spacing-zero);
  margin-left: var(--tm-gutter) !important;
  margin-right: var(--tm-gutter) !important;
}

.tm-receipt-off--stale {
  margin: var(--primitive-spacing-zero) var(--tm-gutter) var(--primitive-spacing-zero);
}

.tm-receipt-off b {
  color: var(--tm-navy);
  font-weight: var(--primitive-typography-weight-semibold);
}

.tm-receipt-off .cx {
  margin-top: var(--primitive-spacing-xs);
  color: var(--primitive-color-brand-navy-600);
}

.tm-receipt-off--sending .cx {
  color: var(--tm-teal-700);
}

/* ── dp-carousel ─────────────────────────────────────────────── */
.dp-carousel {
  display: flex;
  gap: var(--primitive-spacing-lg);
  overflow-x: auto;
  padding: var(--primitive-spacing-xs) var(--primitive-spacing-xl-2xl) var(--primitive-spacing-sm);
  scroll-snap-type: x mandatory;
  padding-left: var(--tm-gutter);
  padding-right: var(--tm-gutter);
}

.dp-carousel::-webkit-scrollbar {
  display: none;
}

/* ── dp-greet ─────────────────────────────────────────────── */
.dp-greet {
  padding: var(--component-greet-padding-top) var(--primitive-spacing-xl-2xl) var(--primitive-spacing-lg);
  padding-left: var(--tm-gutter);
  padding-right: var(--tm-gutter);
}

.dp-greet__name {
  font-family: var(--primitive-typography-family-display,'Newsreader',serif);
  font-weight: var(--primitive-typography-weight-semibold);
  font-size: var(--app-text-28);
  line-height: var(--primitive-typography-line-height-tighter);
  color: var(--tm-navy);
  letter-spacing: var(--primitive-typography-letter-spacing-normal);
}

.dp-greet__meta {
  font-family: var(--font-mono,monospace);
  font-size: var(--app-text-12);
  color: var(--tm-faint);
  margin-top: var(--primitive-spacing-md-lg);
  line-height: var(--primitive-typography-line-height-normal);
  letter-spacing: var(--primitive-typography-letter-spacing-normal);
}

.dp-greet__instruct {
  font-size: var(--app-text-14);
  line-height: var(--primitive-typography-line-height-normal);
  color: var(--semantic-color-text-neutral-default,#3E4C4D);
  margin-top: var(--primitive-spacing-lg);
  max-width: 33ch;
}

/* ── ax-community ─────────────────────────────────────────────── */
.ax-community {
  display: none;
  padding: var(--primitive-spacing-zero) var(--primitive-spacing-xl-2xl) var(--primitive-spacing-lg);
  text-align: center;
  font-size: var(--app-text-12);
  color: var(--axink2);
  padding-bottom: var(--primitive-spacing-lg-xl);
  padding-left: var(--tm-gutter);
  padding-right: var(--tm-gutter);
}

.ax-community__k {
  display: block;
  font-size: var(--app-text-12);
  line-height: var(--primitive-typography-line-height-snug);
  color: var(--axink2,#4A5A5A);
  margin-bottom: var(--primitive-spacing-sm-md);
}

.ax-community a {
  color: var(--axtealdeep);
  font-weight: var(--primitive-typography-weight-bold);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--primitive-spacing-sm-md);
}

/* ── ax-iosmsg ─────────────────────────────────────────────── */
.ax-iosmsg {
  padding: var(--primitive-spacing-lg-xl) var(--primitive-spacing-xl-2xl);
  text-align: center;
  font-family: var(--axsans);
  font-size: var(--app-text-14);
  line-height: var(--primitive-typography-line-height-snug);
  color: var(--tm-muted,#515757);
  border-bottom: var(--primitive-border-width-thin) solid rgba(3,46,66,.10);
  padding-left: var(--tm-gutter);
  padding-right: var(--tm-gutter);
}

.ax-iosmsg .t {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--primitive-spacing-md);
  font-weight: var(--primitive-typography-weight-bold);
  color: var(--tm-navy,#032E42);
  margin-bottom: var(--primitive-spacing-xs-sm);
}

.ax-iosmsg .t svg {
  color: var(--axtealdeep);
}

/* ── ax-attach ─────────────────────────────────────────────── */
.ax-attach {
  display: flex;
  align-items: center;
  gap: var(--primitive-spacing-lg);
  padding: var(--primitive-spacing-md-lg) var(--primitive-spacing-lg);
  border: var(--primitive-border-width-thin) solid var(--axhair);
  border-radius: var(--primitive-radius-md);
  background: var(--semantic-color-surface-neutral-subtle,#F2F6F7);
  margin-left: var(--tm-gutter);
  margin-right: var(--tm-gutter);
}

.ax-attach__thumb {
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: var(--primitive-radius-md);
  background: var(--component-attach-thumb-gradient);
  display: grid;
  place-items: center;
  color: rgba(255,255,255,.92);
}

.ax-attach__b {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--primitive-spacing-xs-sm);
}

.ax-attach__name {
  font-family: var(--axsans);
  font-weight: var(--primitive-typography-weight-bold);
  font-size: var(--app-text-14);
  color: var(--axink);
}

.ax-attach__deid {
  display: flex;
  align-items: center;
  gap: var(--primitive-spacing-md);
  font-family: var(--axsans);
  font-size: var(--app-text-12);
  color: var(--tm-muted,#515757);
}

.ax-attach__spin {
  width: 13px;
  height: 13px;
  flex: none;
  border-radius: var(--primitive-radius-circle);
  border: var(--primitive-border-width-medium) solid var(--axhair);
  border-top-color: var(--axteal);
  animation: axspin .7s linear infinite;
}

.ax-attach__x {
  width: 32px;
  height: 32px;
  flex: none;
  border: var(--primitive-border-width-none);
  background: none;
  color: var(--tm-muted,#515757);
  border-radius: var(--primitive-radius-circle);
  cursor: pointer;
  display: grid;
  place-items: center;
  position: relative;
}

.ax-attach__x::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 100%;
  height: 100%;
  border-radius: var(--primitive-radius-circle);
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
}

.ax-attach--vid {
  display: none;
  background: var(--semantic-color-surface-warning-subtle,#FDF6E7);
  border-color: var(--semantic-color-border-warning-subtle,#E8D6A8);
}

.ax-attach__st {
  width: 26px;
  flex: none;
  display: grid;
  place-items: center;
  color: var(--axtealdeep,#004D4E);
  align-self: start;
  margin-top: var(--primitive-spacing-xs);
}

.ax-attach__st--warn {
  color: var(--semantic-color-text-warning-bold,#8A5A00);
}

.ax-attach__deid .proc {
  display: inline-flex;
  align-items: center;
  gap: var(--primitive-spacing-md);
}

.ax-attach__deid .done {
  display: none;
}

.ax-attach--vid .conf {
  display: none;
}

.ax-attach--vid .unc {
  display: inline-flex;
  align-items: center;
}

.ax-attach__deid--vid .unc {
  color: var(--semantic-color-text-warning-bold,#8A5A00);
  font-weight: var(--primitive-typography-weight-bold);
}

.ax-attach--vid .ax-attach__x {
  display: none;
}

.ax-attach.deid-done .ax-attach__deid .proc {
  display: none;
}

.ax-attach.deid-done .ax-attach__deid .done {
  display: inline-flex;
  align-items: center;
  gap: var(--primitive-spacing-sm-md);
  color: var(--axtealdeep);
  font-weight: var(--primitive-typography-weight-bold);
}

/* ── tm-degrade ─────────────────────────────────────────────── */
.tm-degrade {
  margin: var(--primitive-spacing-xl-2xl) var(--primitive-spacing-xl-2xl) var(--primitive-spacing-zero);
  padding: var(--primitive-spacing-lg-xl) var(--primitive-spacing-xl);
  border-radius: var(--app-radius-group);
  background: var(--semantic-color-surface-neutral-subtle,#F2F6F7);
  margin-left: var(--tm-gutter);
  margin-right: var(--tm-gutter);
}

.tm-degrade__k {
  font-family: var(--font-mono,monospace);
  font-size: var(--app-text-12);
  letter-spacing: var(--app-tracking-caps);
  text-transform: uppercase;
  color: var(--tm-mid);
  margin-bottom: var(--primitive-spacing-md);
  display: flex;
  align-items: center;
  gap: var(--primitive-spacing-md);
}

.tm-degrade__t {
  font-size: var(--app-text-14);
  line-height: var(--primitive-typography-line-height-normal);
  color: var(--tm-muted);
}

.tm-degrade__t b {
  color: var(--tm-navy);
  font-weight: var(--primitive-typography-weight-bold);
}

.tm-degrade__k .cx {
  color: var(--primitive-color-brand-navy-600);
}

.tm-degrade__k .cx svg {
  width: 20px;
  height: 20px;
}

/* ── tm-cleared ─────────────────────────────────────────────── */
.tm-cleared {
  margin: var(--primitive-spacing-xl-2xl) var(--primitive-spacing-xl-2xl) var(--primitive-spacing-zero);
  padding: var(--primitive-spacing-lg-xl) var(--primitive-spacing-xl) 15px;
  border-radius: var(--app-radius-group);
  background: var(--semantic-color-surface-neutral-subtle,#F2F6F7);
  margin-left: var(--tm-gutter);
  margin-right: var(--tm-gutter);
}

.tm-cleared__k {
  font-family: var(--font-mono,monospace);
  font-size: var(--app-text-12);
  letter-spacing: var(--app-tracking-caps);
  text-transform: uppercase;
  color: var(--tm-muted);
  margin-bottom: var(--primitive-spacing-md-lg);
}

.tm-cleared__r {
  display: flex;
  align-items: baseline;
  gap: var(--primitive-spacing-md-lg);
  padding: var(--primitive-spacing-xs-sm) var(--primitive-spacing-zero);
  flex-wrap: wrap;
}

.tm-cleared__m {
  font-size: var(--app-text-12);
  line-height: var(--primitive-typography-line-height-normal);
  color: var(--tm-muted);
  margin-top: var(--primitive-spacing-md-lg);
  padding-top: var(--primitive-spacing-md-lg);
  border-top: var(--primitive-border-width-thin) solid var(--tm-line-soft,#E4EAEA);
}

.tm-cleared__r b {
  font-size: var(--app-text-14);
  font-weight: var(--primitive-typography-weight-bold);
  color: var(--tm-navy);
  min-width: 82px;
}

.tm-cleared__r span {
  font-size: var(--app-text-12);
  color: var(--tm-muted);
}

/* ── dp-peers ─────────────────────────────────────────────── */
.dp-peers {
  display: flex;
  align-items: stretch;
  gap: var(--primitive-spacing-md);
  flex: 1 1 auto;
  min-width: 0;
  margin-left: var(--tm-gutter);
  margin-right: var(--tm-gutter);
}

.dp-peers__count {
  margin-left: var(--primitive-spacing-sm-md);
  font-family: var(--font-mono, monospace);
  font-size: var(--app-text-12);
  font-weight: var(--primitive-typography-weight-medium);
  opacity: .8;
  white-space: nowrap;
}

.dp-peers > button {
  flex: 1 1 0;
  min-width: 0;
  appearance: none;
  cursor: pointer;
  display: block;
  text-align: center;
  min-height: var(--touch-target-min, 44px);
  height: auto;
  padding: var(--primitive-spacing-md-lg) var(--primitive-spacing-lg);
  border-radius: var(--primitive-radius-md);
  border: var(--primitive-border-width-thin) solid var(--semantic-color-accent-primary, #009598);
  background: var(--semantic-color-contrast-light);
  color: var(--semantic-color-text-primary-default, #007072);
  font-family: inherit;
  font-size: var(--app-text-14);
  font-weight: var(--primitive-typography-weight-bold);
  line-height: var(--primitive-typography-line-height-tight);
  letter-spacing: var(--primitive-typography-letter-spacing-normal);
}

.dp-peers > .dp-peers__opt {
  flex: 1 1 0;
  min-width: 0;
  appearance: none;
  cursor: pointer;
  display: block;
  text-align: center;
  min-height: var(--touch-target-min, 44px);
  height: auto;
  padding: var(--primitive-spacing-md-lg) var(--primitive-spacing-lg);
  border-radius: var(--primitive-radius-md);
  border: var(--primitive-border-width-thin) solid var(--semantic-color-accent-primary, #009598);
  background: var(--semantic-color-contrast-light);
  color: var(--semantic-color-text-primary-default, #007072);
  font-family: inherit;
  font-size: var(--app-text-14);
  font-weight: var(--primitive-typography-weight-bold);
  line-height: var(--primitive-typography-line-height-tight);
  letter-spacing: var(--primitive-typography-letter-spacing-normal);
}

/* ── tm-closure ─────────────────────────────────────────────── */
.tm-closure {
  margin: var(--primitive-spacing-lg-xl) var(--tm-gutter) var(--primitive-spacing-zero);
  padding: var(--primitive-spacing-lg-xl) var(--primitive-spacing-xl);
  border-radius: var(--app-radius-group);
  background: var(--semantic-color-surface-neutral-subtle,#F2F6F7);
  border: var(--primitive-border-width-thin) solid var(--tm-line-soft,#E2E9EA);
  margin-left: var(--tm-gutter);
  margin-right: var(--tm-gutter);
}

.tm-closure__h {
  display: flex;
  align-items: center;
  gap: var(--primitive-spacing-md-lg);
  flex-wrap: wrap;
}

.tm-closure__w {
  font-family: var(--font-mono,monospace);
  font-size: var(--app-text-12);
  letter-spacing: var(--primitive-typography-letter-spacing-wider);
  text-transform: uppercase;
  color: var(--tm-muted,#515757);
}

.tm-closure__b {
  margin-top: var(--primitive-spacing-md-lg);
  font-size: var(--app-text-14);
  line-height: var(--primitive-typography-line-height-normal);
  color: var(--tm-navy,#032E42);
}

/* ── ax-narrowfield ─────────────────────────────────────────────── */
.ax-narrowfield {
  display: flex;
  align-items: center;
  gap: var(--primitive-spacing-md-lg);
  padding: var(--primitive-spacing-zero) var(--primitive-spacing-xl);
  border-radius: var(--primitive-radius-md);
  background: var(--semantic-color-contrast-light);
  box-shadow: inset 0 0 0 1px var(--axhair);
  color: var(--axink2);
  margin-top: var(--primitive-spacing-xl-2xl);
  min-height: 46px;
  margin-left: var(--tm-gutter);
  margin-right: var(--tm-gutter);
}

.ax-narrowfield svg {
  flex: none;
}

.ax-narrowfield + .ax-list {
  margin-top: var(--primitive-spacing-md);
}

/* ── ax-tp ─────────────────────────────────────────────── */
.ax-tp {
  appearance: none;
  width: calc(100% - (var(--tm-gutter) * 2));
  text-align: left;
  display: flex;
  align-items: center;
  gap: var(--primitive-spacing-lg-xl);
  cursor: pointer;
  background: none;
  border: var(--primitive-border-width-none);
  padding: var(--primitive-spacing-xl) var(--primitive-spacing-xs);
  border-bottom: var(--primitive-border-width-thin) solid var(--axhair);
  margin-left: var(--tm-gutter);
  margin-right: var(--tm-gutter);
  box-sizing: border-box;
}

.ax-tp--none {
  border-bottom: var(--primitive-border-width-thin) solid var(--axhair);
}

.ax-tp:last-of-type {
  border-bottom: var(--primitive-border-width-none);
}

.ax-tp .ck {
  width: 20px;
  height: 20px;
  flex: none;
  display: grid;
  place-items: center;
  color: var(--axtealdeep);
}

.ax-tp .b {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--primitive-spacing-xs);
  min-width: 0;
}

.ax-tp .tt {
  font-family: var(--axsans);
  font-weight: var(--primitive-typography-weight-bold);
  font-size: var(--app-text-16);
  color: var(--axink);
}

.ax-tp .ts {}

.ax-tp[disabled] {
  opacity: .42;
  cursor: default;
}

.ax-tp--none .tt {
  letter-spacing: var(--primitive-typography-letter-spacing-normal);
}

.ax-tp.on .tt {
  color: var(--axtealdeep);
}

/* ── ax-src ─────────────────────────────────────────────── */
.ax-src {
  appearance: none;
  width: calc(100% - (var(--tm-gutter) * 2));
  text-align: left;
  display: flex;
  align-items: center;
  gap: var(--primitive-spacing-lg-xl);
  background: none;
  border: var(--primitive-border-width-none);
  padding: var(--primitive-spacing-xl) var(--primitive-spacing-zero);
  border-bottom: var(--primitive-border-width-thin) solid var(--semantic-color-border-neutral-subtle,#E2E9EA);
  cursor: pointer;
  min-height: 56px;
  margin-left: var(--tm-gutter);
  margin-right: var(--tm-gutter);
  box-sizing: border-box;
}

.ax-src__i {
  width: 24px;
  flex: none;
  display: grid;
  place-items: center;
  color: var(--tm-navy,#032E42);
}

.ax-src__t {
  flex: 1;
  font-family: var(--axsans);
  font-weight: var(--primitive-typography-weight-semibold);
  font-size: var(--app-text-16);
  color: var(--tm-navy,#032E42);
}

.ax-src__s {
  font-family: var(--axmono);
  font-size: var(--app-text-12);
  letter-spacing: var(--primitive-typography-letter-spacing-wider);
  text-transform: uppercase;
  color: var(--tm-muted,#515757);
}

.ax-src:last-child {
  border-bottom: var(--primitive-border-width-none);
}

.ax-src[disabled] {
  opacity: .42;
  cursor: default;
}

.ax-src__s.is-off {
  color: #9AABA8;
}

/* ── tm-cmpcta ─────────────────────────────────────────────── */
.tm-cmpcta {
  width: calc(100% - (var(--tm-gutter) * 2));
  min-height: 52px;
  border: var(--primitive-border-width-none);
  border-radius: var(--primitive-radius-full);
  background: var(--tm-teal-700,#004C4E);
  color: var(--semantic-color-text-neutral-contrast);
  font-family: inherit;
  font-weight: var(--primitive-typography-weight-bold);
  font-size: var(--app-text-16);
  cursor: pointer;
  letter-spacing: var(--primitive-typography-letter-spacing-normal);
  padding-left: var(--primitive-spacing-2xl);
  padding-right: var(--primitive-spacing-2xl);
  margin-left: var(--tm-gutter);
  margin-right: var(--tm-gutter);
  box-sizing: border-box;
}

.tm-cmpcta--must {
  background: var(--primitive-color-feedback-warning-500);
  color: var(--tm-caution-ink, #242728);
}

/* ── ax-p ─────────────────────────────────────────────── */
.ax-p {
  appearance: none;
  width: calc(100% - (var(--tm-gutter) * 2));
  text-align: left;
  display: flex;
  align-items: center;
  gap: var(--primitive-spacing-lg-xl);
  background: none;
  border: var(--primitive-border-width-none);
  cursor: pointer;
  padding: var(--primitive-spacing-lg) var(--primitive-spacing-xs);
  border-bottom: var(--primitive-border-width-thin) solid var(--axhair);
  font-family: var(--axsans);
  margin-left: var(--tm-gutter);
  margin-right: var(--tm-gutter);
  box-sizing: border-box;
}

.ax-p__a {
  width: 34px;
  height: 34px;
  border-radius: var(--primitive-radius-full);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--app-text-14);
  font-weight: var(--primitive-typography-weight-bold);
  color: var(--semantic-color-text-neutral-contrast);
  background: linear-gradient(150deg,var(--component-provenance-emerging-ink),var(--tm-teal-700));
}

.ax-p__b {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--primitive-spacing-xs);
}

.ax-p__n {
  font-size: var(--app-text-16);
  font-weight: var(--primitive-typography-weight-bold);
  color: var(--axink);
}

.ax-p__m {
  font-size: var(--app-text-12);
  color: var(--tm-mid);
}

.ax-p .ck {
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: var(--primitive-radius-sm);
  display: grid;
  place-items: center;
  border: var(--primitive-border-width-regular) solid var(--tm-line);
  color: transparent;
}

.ax-p.on .ck {
  background: var(--axtealdeep);
  border-color: var(--axtealdeep);
  color: var(--semantic-color-text-neutral-contrast);
}

.ax-p.on .ax-p__n {
  color: var(--axtealdeep);
}

/* ── dp-cta ─────────────────────────────────────────────── */
.dp-cta {
  display: block;
  width: calc(100% - (var(--tm-gutter) * 2));
  appearance: none;
  cursor: pointer;
  min-height: 52px;
  padding: var(--primitive-spacing-zero) var(--primitive-spacing-xl-2xl);
  border: var(--primitive-border-width-none);
  border-radius: var(--primitive-radius-full);
  background: var(--semantic-color-interactive-primary-default, #007072);
  color: var(--semantic-color-contrast-light, var(--semantic-color-text-neutral-contrast));
  font-family: inherit;
  font-size: var(--app-text-16);
  font-weight: var(--primitive-typography-weight-bold);
  letter-spacing: var(--primitive-typography-letter-spacing-normal);
  padding-left: var(--primitive-spacing-2xl);
  padding-right: var(--primitive-spacing-2xl);
  margin-left: var(--tm-gutter);
  margin-right: var(--tm-gutter);
  box-sizing: border-box;
}

.dp-cta--must {
  background: var(--primitive-color-feedback-warning-500);
  color: var(--tm-caution-ink, #242728);
}

.dp-cta:hover {
  background: var(--semantic-color-interactive-primary-hover, #004C4E);
}

.dp-cta:active {
  transform: translateY(1px);
}

/* ── ax-skip ─────────────────────────────────────────────── */
.ax-skip {
  display: block;
  width: calc(100% - (var(--tm-gutter) * 2));
  margin-top: var(--primitive-spacing-sm);
  padding: var(--primitive-spacing-lg) var(--primitive-spacing-zero);
  min-height: var(--touch-target-min);
  background: none;
  border: var(--primitive-border-width-none);
  cursor: pointer;
  font-family: var(--axsans);
  font-size: var(--app-text-14);
  font-weight: var(--primitive-typography-weight-bold);
  color: var(--tm-mid);
  margin-left: var(--tm-gutter);
  margin-right: var(--tm-gutter);
  box-sizing: border-box;
}

/* ── fab ─────────────────────────────────────────────── */
.fab {
  box-shadow: var(--primitive-shadow-ai-peak);
}

/* ── ax-send ─────────────────────────────────────────────── */
.ax-send {
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: var(--primitive-radius-full);
  border: var(--primitive-border-width-none);
  background: var(--axmag);
  color: var(--semantic-color-text-neutral-contrast);
  display: none;
  place-items: center;
  cursor: pointer;
  box-shadow: var(--primitive-shadow-ai-overlay);
}

/* ── tm-space ─────────────────────────────────────────────── */
.tm-space {
  padding: var(--primitive-spacing-3xl) var(--primitive-spacing-xl-2xl) var(--primitive-spacing-zero);
}

.tm-space__k {
  font-family: var(--font-mono,monospace);
  font-size: var(--app-text-12);
  letter-spacing: var(--app-tracking-caps);
  text-transform: uppercase;
  color: var(--tm-teal-700);
  margin-bottom: var(--primitive-spacing-md-lg);
}

.tm-space__n {
  font-family: var(--primitive-typography-family-display,'Newsreader',serif);
  font-weight: var(--primitive-typography-weight-semibold);
  font-size: var(--app-text-28);
  line-height: var(--primitive-typography-line-height-tighter);
  letter-spacing: var(--primitive-typography-letter-spacing-normal);
  color: var(--tm-navy);
}

.tm-space__m {
  font-family: var(--font-mono,monospace);
  font-size: var(--app-text-12);
  color: var(--tm-muted);
  margin-top: var(--primitive-spacing-md-lg);
  line-height: var(--primitive-typography-line-height-normal);
}

.tm-space__org {
  display: flex;
  align-items: center;
  gap: var(--primitive-spacing-lg);
  margin-bottom: var(--primitive-spacing-md-lg);
}

.tm-space__logo {
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: var(--primitive-radius-sm);
  background: var(--semantic-color-contrast-light);
  border: var(--primitive-border-width-thin) solid var(--tm-line-soft);
  display: grid;
  place-items: center;
  overflow: hidden;
  box-shadow: var(--shadow-e1);
}

.tm-space__org .tm-space__k {
  margin: var(--primitive-spacing-zero);
}

/* ── ac-seg ─────────────────────────────────────────────── */
.ac-seg {
  border-radius: var(--primitive-radius-md);
}

.ac-seg__o {
  font-size: var(--app-text-14);
  border-radius: var(--primitive-radius-sm);
  min-height: var(--touch-target-min);
}

.ac-seg__o--on {
  box-shadow: var(--shadow-e1);
}

/* ── tm-listend ─────────────────────────────────────────────── */
.tm-listend::after {
  display: block;
  text-align: center;
  font-size: var(--app-text-12);
  color: var(--tm-mid);
  padding: var(--primitive-spacing-2xl) var(--primitive-spacing-xl-2xl) var(--primitive-spacing-zero);
  border-top: var(--primitive-border-width-thin) solid var(--tm-line-soft);
  margin: var(--primitive-spacing-lg-xl) var(--primitive-spacing-xl-2xl) var(--primitive-spacing-zero);
}

/* ── ax-btnrow ─────────────────────────────────────────────── */
.ax-btnrow {
  display: none;
  padding: var(--primitive-spacing-lg) var(--primitive-spacing-xl) var(--primitive-spacing-md-lg);
  padding-bottom: var(--tm-dock-inset);
  box-sizing: border-box;
}

.ax-btnrow.tm-c2dock {
  display: block;
  background: var(--semantic-color-contrast-light);
  border-top: var(--primitive-border-width-thin) solid var(--tm-line-soft);
}

/* ── tm-dock ─────────────────────────────────────────────── */
.tm-dock {
  position: absolute;
  left: var(--primitive-spacing-zero);
  right: var(--primitive-spacing-zero);
  bottom: var(--primitive-spacing-zero);
  z-index: var(--app-z-chrome);
  padding: var(--primitive-spacing-lg) var(--primitive-spacing-xl) var(--primitive-spacing-2xl-3xl);
  background: var(--semantic-color-contrast-light);
  border-top: var(--primitive-border-width-thin) solid var(--tm-line-soft);
  padding-bottom: var(--tm-dock-inset);
  box-sizing: border-box;
}

/* ── tm-cmpdock ─────────────────────────────────────────────── */
.tm-cmpdock {
  padding: var(--primitive-spacing-xl) var(--primitive-spacing-xl-2xl) var(--primitive-spacing-lg);
  background: var(--semantic-color-contrast-light);
  border-top: var(--primitive-border-width-thin) solid var(--tm-line-soft);
  padding-bottom: var(--tm-dock-inset);
  box-sizing: border-box;
  position: absolute;
  left: var(--primitive-spacing-zero);
  right: var(--primitive-spacing-zero);
  bottom: var(--primitive-spacing-zero);
  margin-bottom: var(--primitive-spacing-zero);
}

/* ── dp-menuscrim ─────────────────────────────────────────────── */
.dp-menuscrim {
  background: rgba(3,46,66,.24);
}

/* ── dp-sheet ─────────────────────────────────────────────── */
.dp-sheet {
  position: absolute;
  left: var(--primitive-spacing-zero);
  right: var(--primitive-spacing-zero);
  bottom: var(--primitive-spacing-zero);
  max-height: 90%;
  display: flex;
  flex-direction: column;
  background: var(--semantic-color-contrast-light);
  border-radius: var(--primitive-radius-xl, 20px) var(--primitive-radius-xl, 20px) var(--primitive-radius-zero) var(--primitive-radius-zero);
  box-shadow: var(--component-sheet-shadow);
  padding-bottom: var(--primitive-spacing-2xl);
}

.dp-sheet__handle {
  width: 40px;
  height: 5px;
  border-radius: var(--primitive-radius-xs);
  flex: none;
  background: var(--semantic-color-border-neutral-default);
  margin: var(--primitive-spacing-md-lg) auto var(--primitive-spacing-xs);
}

.dp-sheet__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--primitive-spacing-md);
  padding: var(--primitive-spacing-md) var(--semantic-spacing-rhythm-inset) var(--primitive-spacing-md-lg);
}

.dp-sheet__title {
  font-family: var(--primitive-typography-family-heading);
  font-weight: var(--primitive-typography-weight-bold);
  font-size: var(--app-text-18);
  color: var(--semantic-color-text-heading, #032E42);
  margin: var(--primitive-spacing-zero);
}

.dp-sheet__close {
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  border-radius: var(--primitive-radius-md);
  color: var(--semantic-color-text-heading, #032E42);
  cursor: pointer;
  position: relative;
}

.dp-sheet__search {
  padding: var(--primitive-spacing-zero) var(--semantic-spacing-rhythm-inset) var(--primitive-spacing-lg);
}

.dp-sheet__body {
  flex: 1;
  min-height: 0;
  overflow: hidden auto;
  padding: var(--primitive-spacing-zero) var(--semantic-spacing-rhythm-inset);
}

.dp-sheet__cat {
  font-family: var(--font-mono, monospace);
  font-size: var(--app-text-12);
  letter-spacing: var(--app-tracking-caps);
  text-transform: uppercase;
  color: var(--semantic-color-text-neutral-subtle);
  margin: var(--primitive-spacing-xl) var(--primitive-spacing-zero) var(--primitive-spacing-sm-md);
}

.dp-sheet__foot {
  flex: none;
  padding: var(--primitive-spacing-lg) var(--semantic-spacing-rhythm-inset);
  padding-bottom: calc(12px + var(--safe-area-bottom,0px));
  border-top: var(--primitive-border-width-thin) solid var(--semantic-color-border-neutral-subtle);
  background: var(--semantic-color-contrast-light);
}

.dp-sheet__close::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: var(--touch-target-min);
  height: var(--touch-target-min);
}

/* ── unc ─────────────────────────────────────────────── */
.unc {
  color: var(--tm-caution-ink);
  background: var(--tm-caution-bg);
  border-color: var(--tm-caution-line);
}

/* ── conf ─────────────────────────────────────────────── */
.conf {
  color: var(--tm-caution-ink);
  background: var(--tm-caution-bg);
  border-color: var(--tm-caution-line);
}

/* ── abody ─────────────────────────────────────────────── */
.abody {
  flex: 1;
  overflow-y: auto;
  background: var(--semantic-color-surface-wash,#F0F7F7);
  padding-bottom: var(--app-nav-height);
}

.abody::-webkit-scrollbar {
  width: 0;
}

.abody:has(> .tm-dockzone) {
  overflow: hidden;
}

.abody.tm-nonav {
  padding-bottom: var(--primitive-spacing-zero);
}

.abody.tm-read {
  background: var(--semantic-color-contrast-light);
}

.abody.tm-ask {
  background: var(--semantic-color-contrast-light);
  display: flex;
  flex-direction: column;
  padding-bottom: var(--primitive-spacing-zero);
}

.abody.tm-nonav--dock {
  padding-bottom: var(--primitive-spacing-7xl);
}

.abody.tm-ask.ax {
  background: var(--semantic-color-contrast-light);
  display: flex;
  flex-direction: column;
  padding: var(--primitive-spacing-zero);
  height: 100%;
  overflow: visible;
  --axsans: var(--primitive-typography-family-body,'Atkinson Hyperlegible Next',system-ui,sans-serif);
  --axserif: var(--primitive-typography-family-display,'Newsreader',serif);
  --axmono: var(--font-mono,'DM Mono',monospace);
  --axmag: var(--primitive-color-ai-600);
  --axteal: var(--primitive-color-brand-primary-500);
  --axtealdeep: var(--primitive-color-brand-primary-700);
  --axtealsoft: var(--primitive-color-brand-primary-300);
  --axgold: var(--primitive-color-brand-gold);
  --axgoldstamp: var(--primitive-color-brand-gold);
  --axink: var(--primitive-color-brand-accent-800);
  --axink2: var(--primitive-color-neutral-gray-600);
  --axhair: var(--primitive-color-neutral-gray-100);
}

/* ── tm-scrollzone ─────────────────────────────────────────────── */
.tm-scrollzone {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* ── tm-dockzone ─────────────────────────────────────────────── */
.tm-dockzone {
  flex: none;
}

/* ── tm-done ─────────────────────────────────────────────── */
.tm-done {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.tm-done:not(.tm-done--inline) {
  flex: 1;
  justify-content: flex-start;
  padding: var(--primitive-spacing-zero) var(--primitive-spacing-3xl);
  padding-top: var(--component-done-padding-top);
}

.tm-done__i {
  width: 62px;
  height: 62px;
  border-radius: var(--primitive-radius-full);
  display: grid;
  place-items: center;
  color: var(--semantic-color-text-neutral-contrast);
  background: var(--tm-state);
}

.tm-done__t {
  margin-top: var(--primitive-spacing-xl-2xl);
  font-family: var(--primitive-typography-family-display,serif);
  font-size: var(--app-text-28);
  line-height: var(--primitive-typography-line-height-tight);
  color: var(--semantic-color-text-heading, #032E42);
}

.tm-done__s {
  margin-top: var(--primitive-spacing-md-lg);
  font-size: var(--app-text-14);
  line-height: var(--primitive-typography-line-height-normal);
  color: var(--tm-muted);
}

.tm-done__m {
  margin-top: var(--primitive-spacing-2xl);
  font-family: var(--font-mono,monospace);
  font-size: var(--app-text-12);
  letter-spacing: var(--app-tracking-caps);
  text-transform: uppercase;
  color: var(--tm-teal-700, #004C4E);
}

.tm-receipt:empty {
  display: none;
}

.ax-cmopts--lead {
  margin-top: var(--primitive-spacing-lg);
  margin-bottom: var(--primitive-spacing-xs);
}

.tm-done--inline {
  flex: none;
  padding: var(--primitive-spacing-sm-md) var(--primitive-spacing-zero) var(--primitive-spacing-2xl);
}

.tm-done--inline .tm-done__t {
  font-size: var(--app-text-28);
}

/* ── dp-progress ─────────────────────────────────────────────── */
.dp-progress {
  height: 7px;
  border-radius: var(--primitive-radius-full);
  background: var(--semantic-color-contrast-light);
  overflow: hidden;
  margin: var(--primitive-spacing-zero) var(--primitive-spacing-zero) var(--primitive-spacing-lg-xl);
}

.dp-progress > i {
  display: block;
  height: 100%;
  border-radius: var(--primitive-radius-full);
  background: var(--tm-state);
}

/* ── dp-task ─────────────────────────────────────────────── */
.dp-task {
  display: flex;
  align-items: center;
  gap: var(--primitive-spacing-lg);
  padding: var(--primitive-spacing-lg) var(--primitive-spacing-lg-xl);
  border: var(--primitive-border-width-thin) solid var(--tm-line-soft);
  border-radius: var(--primitive-radius-md);
  background: var(--semantic-color-contrast-light);
  min-height: var(--touch-target-min,44px);
  margin-bottom: var(--primitive-spacing-lg);
}

.dp-task__ck {
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: var(--primitive-radius-full);
  border: 1.6px solid var(--tm-line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--semantic-color-text-neutral-contrast);
}

.dp-task__body {
  flex: 1;
  min-width: 0;
}

.dp-task__lbl {
  font-weight: var(--primitive-typography-weight-semibold);
  font-size: var(--app-text-14);
  color: var(--tm-navy);
}

.dp-task__sub {
  font-size: var(--app-text-12);
  color: var(--tm-muted);
  margin-top: var(--primitive-spacing-xs);
  line-height: var(--primitive-typography-line-height-snug);
}

.dp-task__chev {
  margin-left: auto;
  color: var(--tm-teal);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dp-task--primary {
  background: var(--tm-teal-bg);
  border-color: var(--semantic-color-surface-primary-subtle);
}

.dp-task + .dp-task {
  margin-top: var(--primitive-spacing-zero);
}

.dp-task:last-child {
  margin-bottom: var(--primitive-spacing-zero);
}

.dp-task__chev.g {
  color: var(--semantic-color-border-neutral-default);
}

.dp-task--done .dp-task__ck {
  background: var(--tm-state);
  border-color: var(--tm-state);
}

.dp-task--done .dp-task__lbl {
  color: var(--tm-faint);
  text-decoration: line-through;
}

.dp-task--primary .dp-task__chev {
  color: var(--semantic-color-interactive-primary-default);
}

/* ── tm-btn ─────────────────────────────────────────────── */
.tm-btn {
  appearance: none;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--primitive-spacing-md);
  height: var(--touch-target-min);
  padding: var(--primitive-spacing-zero) var(--primitive-spacing-xl);
  border-radius: var(--primitive-radius-md);
  font-size: var(--app-text-14);
  font-weight: var(--primitive-typography-weight-bold);
  letter-spacing: var(--primitive-typography-letter-spacing-normal);
  background: none;
  cursor: pointer;
  color: var(--tm-mid);
}

.tm-btn--reply {
  border: var(--primitive-border-width-thin) solid var(--tm-teal);
  color: var(--tm-teal-700);
  background: var(--tm-teal-bg);
  flex: 1;
}

.tm-btn--more {
  border: var(--primitive-border-width-thin) solid var(--tm-line-soft);
  width: var(--touch-target-min);
  padding: var(--primitive-spacing-zero);
  margin-left: auto;
  font-size: var(--app-text-16);
  min-width: var(--touch-target-min);
  flex: none;
}

.tm-btn--follow {
  border: var(--primitive-border-width-thin) solid var(--tm-ai,#802B4E);
  color: var(--tm-ask);
  background: var(--semantic-color-contrast-light);
  flex: 1;
  border-color: var(--tm-ask);
}

.tm-btn--resolve {
  border: var(--primitive-border-width-none);
  background: var(--semantic-color-interactive-primary-default);
  color: var(--semantic-color-text-neutral-contrast);
  flex: 1;
}

.tm-btn--done {
  border: var(--primitive-border-width-thin) solid var(--tm-teal);
  background: var(--tm-teal-bg);
  color: var(--tm-teal-700);
  flex: 1;
}

.tm-btn .c {
  font-family: var(--font-mono,monospace);
  font-size: var(--app-text-12);
  font-weight: var(--primitive-typography-weight-medium);
  opacity: .8;
  margin-left: 1px;
}

.tm-btn--more[aria-expanded="true"] {
  background: var(--semantic-color-surface-neutral-subtle,#F2F6F7);
  color: var(--tm-navy);
}

/* ── hpad ─────────────────────────────────────────────── */
.hpad {
  padding: var(--primitive-spacing-zero) var(--primitive-spacing-xl-2xl);
  padding-left: var(--tm-gutter);
  padding-right: var(--tm-gutter);
}

.hpad > .tm-cta {
  margin-left: var(--primitive-spacing-zero);
  margin-right: var(--primitive-spacing-zero);
}

/* ── tm-cta ─────────────────────────────────────────────── */
.tm-cta {
  display: flex;
  align-items: center;
  gap: var(--primitive-spacing-md);
  margin-top: var(--primitive-spacing-lg-xl);
  padding-top: var(--primitive-spacing-lg);
  border-top: var(--primitive-border-width-thin) solid var(--tm-line-soft);
  position: relative;
  margin-left: var(--tm-gutter);
  margin-right: var(--tm-gutter);
}

.tm-cta__n {
  font-size: var(--app-text-12);
  color: var(--tm-muted);
  margin-left: auto;
  padding-right: var(--primitive-spacing-sm);
}

.tm-cta:has(.tm-btn--done) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--primitive-spacing-md);
  align-items: stretch;
}

.tm-cta .dp-peers {
  margin-left: var(--primitive-spacing-zero);
  margin-right: var(--primitive-spacing-zero);
}

.tm-cta:has(.tm-btn--done) > .dp-peers {
  min-width: 0;
  display: grid;
}

.tm-cta--flat .tm-btn--more {
  margin-left: auto;
}

.tm-cta:has(.tm-btn--done) > .tm-btn--done {
  min-width: 0;
  justify-content: center;
}

.tm-cta:has(.tm-btn--done) > .dp-peers > .dp-peers__opt {
  min-width: 0;
  width: 100%;
}

/* ── tm-answer ─────────────────────────────────────────────── */
.tm-answer {
  margin: var(--primitive-spacing-2xl-3xl) var(--tm-gutter) var(--primitive-spacing-zero);
  background: var(--semantic-color-surface-neutral-subtle,#F2F6F7);
  border-radius: var(--primitive-radius-lg);
  padding: var(--primitive-spacing-xl) var(--primitive-spacing-xl);
  margin-left: var(--tm-gutter);
  margin-right: var(--tm-gutter);
}

.tm-answer__k {
  font-family: var(--font-mono,monospace);
  font-size: var(--app-text-12);
  letter-spacing: var(--app-tracking-caps);
  text-transform: uppercase;
  color: var(--tm-teal-700);
  margin-bottom: var(--primitive-spacing-md-lg);
}

.tm-answer__t {
  font-size: var(--app-text-14);
  line-height: var(--primitive-typography-line-height-normal);
  color: var(--tm-muted);
}

.tm-answer__flag {
  display: block;
  margin-top: var(--primitive-spacing-lg);
  padding-top: var(--primitive-spacing-lg);
  border-top: var(--primitive-border-width-thin) solid var(--tm-line-soft);
  font-size: var(--app-text-12);
  line-height: var(--primitive-typography-line-height-normal);
  color: var(--tm-navy, #032E42);
  margin-left: var(--tm-gutter);
  margin-right: var(--tm-gutter);
}

.tm-answer__t b {
  color: var(--tm-navy);
  font-weight: var(--primitive-typography-weight-bold);
}

.tm-answer__flag b {
  font-weight: var(--primitive-typography-weight-bold);
  white-space: nowrap;
}

.tm-answer .tm-cta {
  border-top: var(--primitive-border-width-thin) solid var(--tm-line-soft);
  margin-top: var(--primitive-spacing-lg-xl);
  padding-top: var(--primitive-spacing-lg-xl);
  margin-left: var(--primitive-spacing-zero);
  margin-right: var(--primitive-spacing-zero);
}

.tm-answer .tm-answer__flag {
  margin-left: var(--primitive-spacing-zero);
  margin-right: var(--primitive-spacing-zero);
}

/* ── tm-record ─────────────────────────────────────────────── */
.tm-record {
  margin: var(--primitive-spacing-2xl-3xl) var(--tm-gutter) var(--primitive-spacing-zero);
  border: var(--primitive-border-width-thin) solid #D8E6DF;
  border-radius: var(--primitive-radius-lg);
  overflow: hidden;
  margin-left: var(--tm-gutter);
  margin-right: var(--tm-gutter);
}

.tm-record__h {
  background: var(--primitive-color-feedback-success-100);
  padding: var(--primitive-spacing-lg-xl) var(--primitive-spacing-xl);
  display: flex;
  align-items: center;
  gap: var(--primitive-spacing-md-lg);
  margin-left: var(--tm-gutter);
  margin-right: var(--tm-gutter);
}

.tm-record__k {
  font-family: var(--font-mono,monospace);
  font-size: var(--app-text-12);
  letter-spacing: var(--app-tracking-caps);
  text-transform: uppercase;
  font-weight: var(--primitive-typography-weight-medium);
  color: var(--primitive-color-feedback-success-600);
}

.tm-record__b {
  padding: var(--primitive-spacing-xl);
  margin-left: var(--tm-gutter);
  margin-right: var(--tm-gutter);
}

.tm-record__t {
  font-size: var(--app-text-14);
  line-height: var(--primitive-typography-line-height-normal);
  color: var(--tm-muted);
}

.tm-record__t b {
  color: var(--tm-navy);
  font-weight: var(--primitive-typography-weight-bold);
}

.tm-record .tm-record__h {
  margin-left: var(--primitive-spacing-zero);
  margin-right: var(--primitive-spacing-zero);
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}

.tm-record .tm-record__b {
  margin-left: var(--primitive-spacing-zero);
  margin-right: var(--primitive-spacing-zero);
}

/* ── ax-closeq ─────────────────────────────────────────────── */
.ax-closeq {
  font-family: var(--axserif);
  font-weight: var(--primitive-typography-weight-normal);
  font-size: var(--app-text-16);
  line-height: var(--primitive-typography-line-height-snug);
  color: var(--axink2);
  margin: var(--primitive-spacing-sm-md) var(--primitive-spacing-zero) var(--primitive-spacing-xl-2xl);
}

/* ── tm-askstatus ─────────────────────────────────────────────── */
.tm-askstatus {
  margin: var(--primitive-spacing-zero) var(--primitive-spacing-xl-2xl) var(--primitive-spacing-lg);
  font-size: var(--app-text-12);
  line-height: var(--primitive-typography-line-height-normal);
  color: var(--tm-muted);
  margin-left: var(--tm-gutter);
  margin-right: var(--tm-gutter);
}

.tm-askstatus b {
  color: var(--tm-navy);
  font-weight: var(--primitive-typography-weight-semibold);
}

.tm-askstatus:empty {
  display: none;
}

/* ── tm-followsw ─────────────────────────────────────────────── */
.tm-followsw {
  display: inline-flex;
  align-items: center;
  gap: var(--primitive-spacing-md-lg);
  flex: none;
  cursor: pointer;
}

.tm-followsw .l {
  font-size: var(--app-text-12) !important;
  font-weight: var(--primitive-typography-weight-medium);
  color: var(--tm-muted);
  white-space: nowrap;
  letter-spacing: var(--primitive-typography-letter-spacing-normal);
}

.tm-followsw .tm-sw {
  transform: scale(.82);
  transform-origin: right center;
}

.tm-followsw .tm-sw::before {
  min-width: 54px;
  min-height: 54px;
}

.tm-followsw .tm-sw--on {
  background: var(--tm-teal,#009598);
}

/* ── ax-act ─────────────────────────────────────────────── */
.ax-act {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: var(--primitive-spacing-md);
  min-height: 48px;
  padding: var(--primitive-spacing-zero) var(--primitive-spacing-xl-2xl);
  border: var(--primitive-border-width-thin) solid var(--axhair);
  background: rgba(255,255,255,.55);
  border-radius: var(--app-radius-group);
  cursor: pointer;
  font-family: var(--axsans);
  font-weight: var(--primitive-typography-weight-bold);
  font-size: var(--app-text-14);
  color: var(--axink);
  border-width: var(--primitive-border-width-regular);
}

.ax-act svg {
  color: var(--axtealdeep);
  flex: none;
}

.ax-act[aria-pressed="true"] {
  background: var(--axtealdeep);
  border-color: var(--axtealdeep);
  color: var(--semantic-color-text-neutral-contrast);
}

.ax-act[data-act="save"] {
  background: var(--axtealdeep);
  border-color: var(--axtealdeep);
  color: var(--semantic-color-text-neutral-contrast);
}

.ax-act[data-act="share"] {
  background: var(--semantic-color-contrast-light);
  border-color: var(--axhair);
  color: var(--axink);
}

.ax-act[aria-pressed="true"] svg {
  color: var(--semantic-color-text-neutral-contrast);
}

.ax-act[data-act="save"] svg {
  color: var(--semantic-color-text-neutral-contrast);
}

.ax-act[data-act="save"][aria-pressed="true"] {
  background: var(--axink);
  border-color: var(--axink);
}

/* ── scr ─────────────────────────────────────────────── */
.scr {
  display: none;
}

.scr.on {
  display: block;
}

.scr[data-s^="modify"] .ax-send {
  background: var(--semantic-color-interactive-primary-default, #007072);
}

.scr[data-s="compose"] .dp-cta {
  background: var(--tm-ask);
  box-shadow: var(--tm-ask-glow);
}

.scr[data-s="compose-written"] .dp-cta {
  background: var(--tm-ask);
  box-shadow: var(--tm-ask-glow);
}

.scr[data-s="compose-corpus"] .dp-cta {
  background: var(--tm-ask);
  box-shadow: var(--tm-ask-glow);
}

.scr[data-s="compose-community"] .dp-cta {
  background: var(--tm-ask);
  box-shadow: var(--tm-ask-glow);
}

.scr[data-s="st-attach"] .dp-cta {
  background: var(--tm-ask);
  box-shadow: var(--tm-ask-glow);
}

.scr[data-s="st-attached"] .dp-cta {
  background: var(--tm-ask);
  box-shadow: var(--tm-ask-glow);
}

.scr[data-s="st-video"] .dp-cta {
  background: var(--tm-ask);
  box-shadow: var(--tm-ask-glow);
}

.scr[data-s="st-video-ok"] .dp-cta {
  background: var(--tm-ask);
  box-shadow: var(--tm-ask-glow);
}

.scr[data-s="st-topic"] .dp-cta {
  background: var(--tm-ask);
  box-shadow: var(--tm-ask-glow);
}

.scr[data-s="st-topic-live"] .dp-cta {
  background: var(--tm-ask);
  box-shadow: var(--tm-ask-glow);
}

.scr[data-s="st-people"] .dp-cta {
  background: var(--tm-ask);
  box-shadow: var(--tm-ask-glow);
}

.scr[data-s="st-tagged"] .dp-cta {
  background: var(--tm-ask);
  box-shadow: var(--tm-ask-glow);
}

.scr[data-s="st-direct"] .dp-cta {
  background: var(--tm-ask);
  box-shadow: var(--tm-ask-glow);
}

.scr[data-s="compose-reply"] .ax-send {
  background: var(--semantic-color-interactive-primary-default);
  box-shadow: var(--primitive-shadow-glow-teal);
}

.scr[data-s="compose-harm"] .ax-send {
  background: var(--semantic-color-interactive-primary-default);
  box-shadow: var(--primitive-shadow-glow-teal);
}

.scr[data-s="st-write"] .ax-send {
  background: var(--semantic-color-interactive-primary-default);
  box-shadow: var(--primitive-shadow-glow-teal);
}

.scr[data-s="st-outcome"] .ax-send {
  background: var(--semantic-color-interactive-primary-default);
  box-shadow: var(--primitive-shadow-glow-teal);
}

.scr[data-s="st-share"] .ax-send {
  background: var(--semantic-color-interactive-primary-default);
  box-shadow: var(--primitive-shadow-glow-teal);
}

.scr[data-s="st-thanks"] .ax-send {
  background: var(--semantic-color-interactive-primary-default);
  box-shadow: var(--primitive-shadow-glow-teal);
}

.scr[data-s="close-ask"] .ax-send {
  background: var(--semantic-color-interactive-primary-default);
  box-shadow: var(--primitive-shadow-glow-teal);
}

.scr[data-s="compose-reply"] .dp-cta {
  background: var(--semantic-color-interactive-primary-default);
  box-shadow: var(--primitive-shadow-glow-teal);
}

.scr[data-s="compose-harm"] .dp-cta {
  background: var(--semantic-color-interactive-primary-default);
  box-shadow: var(--primitive-shadow-glow-teal);
}

.scr[data-s="st-resolve"] .dp-cta {
  background: var(--semantic-color-interactive-primary-default);
  box-shadow: var(--primitive-shadow-glow-teal);
}

.scr[data-s="st-posted"] .dp-cta {
  background: var(--semantic-color-interactive-primary-default);
  box-shadow: var(--primitive-shadow-glow-teal);
}

.scr[data-s="st-sent"] .dp-cta {
  background: var(--semantic-color-interactive-primary-default);
  box-shadow: var(--primitive-shadow-glow-teal);
}

.scr[data-s="st-confd"] .dp-cta {
  background: var(--semantic-color-interactive-primary-default);
  box-shadow: var(--primitive-shadow-glow-teal);
}

.scr[data-s="st-modified"] .dp-cta {
  background: var(--semantic-color-interactive-primary-default);
  box-shadow: var(--primitive-shadow-glow-teal);
}

.scr[data-s="modify"] .ax-send {
  box-shadow: var(--shadow-e2);
}

.scr[data-s="alerts-priority"] .v3-tail::after {
  content: "That is everything marked priority.";
  display: block;
  text-align: center;
  font-size: var(--app-text-12);
  color: var(--tm-mid);
  padding: var(--primitive-spacing-2xl) var(--primitive-spacing-xl-2xl) var(--primitive-spacing-zero);
  border-top: var(--primitive-border-width-thin) solid var(--tm-line-soft);
  margin: var(--primitive-spacing-sm-md) var(--primitive-spacing-xl-2xl) var(--primitive-spacing-zero);
}

.scr[data-s="alerts-recognition"] .v3-tail::after {
  content: "That is everything, for now.";
  display: block;
  text-align: center;
  font-size: var(--app-text-12);
  color: var(--tm-mid);
  padding: var(--primitive-spacing-2xl) var(--primitive-spacing-xl-2xl) var(--primitive-spacing-zero);
  border-top: var(--primitive-border-width-thin) solid var(--tm-line-soft);
  margin: var(--primitive-spacing-sm-md) var(--primitive-spacing-xl-2xl) var(--primitive-spacing-zero);
}

.scr[data-s="f-all-peers"] .ac-rows::after {
  content: "That is everyone you have worked with.";
  display: block;
  text-align: center;
  font-size: var(--app-text-12);
  color: var(--tm-mid);
  padding: var(--primitive-spacing-2xl) var(--primitive-spacing-xl-2xl) var(--primitive-spacing-zero);
  border-top: var(--primitive-border-width-thin) solid var(--tm-line-soft);
  margin: var(--primitive-spacing-sm-md) var(--primitive-spacing-zero) var(--primitive-spacing-zero);
}

.scr[data-s="st-alert"] .aavatar {
  background: var(--primitive-color-feedback-info-600);
}

.scr[data-s="st-sees"] .aavatar {
  background: var(--primitive-color-feedback-info-600);
}

.scr[data-s="st-write"] .aavatar {
  background: var(--primitive-color-feedback-info-600);
}

.scr[data-s="st-sent"] .aavatar {
  background: var(--primitive-color-feedback-info-600);
}

.scr[data-s="account-RA"] .aavatar {
  background: var(--primitive-color-feedback-info-600);
}

.scr[data-s="alerts"] .abody {
  background: radial-gradient(118% 38% at 4% -6%,
      rgba(0,149,152,.10) 0%, rgba(0,149,152,0) 62%),
    radial-gradient(94% 32% at 104% 1%,
      rgba(26,151,209,.085) 0%, rgba(26,151,209,0) 58%),
    radial-gradient(130% 34% at 88% 56%,
      rgba(0,149,152,.045) 0%, rgba(0,149,152,0) 60%),
    linear-gradient(180deg,
      var(--primitive-color-neutral-gray-white,var(--semantic-color-contrast-light)) 0%,
      var(--semantic-color-surface-wash,#F0F7F7) 38%);
}

.scr[data-s="alerts-priority"] .abody {
  background: radial-gradient(118% 38% at 4% -6%,
      rgba(0,149,152,.10) 0%, rgba(0,149,152,0) 62%),
    radial-gradient(94% 32% at 104% 1%,
      rgba(26,151,209,.085) 0%, rgba(26,151,209,0) 58%),
    radial-gradient(130% 34% at 88% 56%,
      rgba(0,149,152,.045) 0%, rgba(0,149,152,0) 60%),
    linear-gradient(180deg,
      var(--primitive-color-neutral-gray-white,var(--semantic-color-contrast-light)) 0%,
      var(--semantic-color-surface-wash,#F0F7F7) 38%);
}

.scr[data-s="alerts-recognition"] .abody {
  background: radial-gradient(118% 38% at 4% -6%,
      rgba(0,149,152,.10) 0%, rgba(0,149,152,0) 62%),
    radial-gradient(94% 32% at 104% 1%,
      rgba(26,151,209,.085) 0%, rgba(26,151,209,0) 58%),
    radial-gradient(130% 34% at 88% 56%,
      rgba(0,149,152,.045) 0%, rgba(0,149,152,0) 60%),
    linear-gradient(180deg,
      var(--primitive-color-neutral-gray-white,var(--semantic-color-contrast-light)) 0%,
      var(--semantic-color-surface-wash,#F0F7F7) 38%);
}

.scr[data-s="st-alert"] .abody {
  background: radial-gradient(118% 38% at 4% -6%,
      rgba(0,149,152,.10) 0%, rgba(0,149,152,0) 62%),
    radial-gradient(94% 32% at 104% 1%,
      rgba(26,151,209,.085) 0%, rgba(26,151,209,0) 58%),
    radial-gradient(130% 34% at 88% 56%,
      rgba(0,149,152,.045) 0%, rgba(0,149,152,0) 60%),
    linear-gradient(180deg,
      var(--primitive-color-neutral-gray-white,var(--semantic-color-contrast-light)) 0%,
      var(--semantic-color-surface-wash,#F0F7F7) 38%);
}

.scr[data-s="st-back"] .abody {
  background: radial-gradient(118% 38% at 4% -6%,
      rgba(0,149,152,.10) 0%, rgba(0,149,152,0) 62%),
    radial-gradient(94% 32% at 104% 1%,
      rgba(26,151,209,.085) 0%, rgba(26,151,209,0) 58%),
    radial-gradient(130% 34% at 88% 56%,
      rgba(0,149,152,.045) 0%, rgba(0,149,152,0) 60%),
    linear-gradient(180deg,
      var(--primitive-color-neutral-gray-white,var(--semantic-color-contrast-light)) 0%,
      var(--semantic-color-surface-wash,#F0F7F7) 38%);
}

.scr[data-s="alerts"] .tm-al {
  background: transparent;
}

.scr[data-s="alerts-priority"] .tm-al {
  background: transparent;
}

.scr[data-s="alerts-recognition"] .tm-al {
  background: transparent;
}

.scr[data-s="st-alert"] .tm-al {
  background: transparent;
}

.scr[data-s="st-back"] .tm-al {
  background: transparent;
}

.scr[data-s="st-share"] .tm-done {
  padding-top: var(--primitive-spacing-4xl) !important;
}

.scr[data-s="st-video-ok"] .unc {
  background: transparent;
  border-color: var(--tm-line-soft);
}

.scr[data-s="st-video-ok"] .conf {
  background: transparent;
  border-color: var(--tm-line-soft);
}

.scr[data-s="ask"] .aappbar__lead {
  cursor: pointer;
}

.scr[data-s="ask"] .aappbar__lead > span {
  width: var(--touch-target-min);
  height: var(--touch-target-min);
}

.scr[data-s="alerts"] .tm-al:last-of-type {
  border-bottom: var(--primitive-border-width-none);
}

.scr[data-s="alerts-priority"] .tm-al:last-of-type {
  border-bottom: var(--primitive-border-width-none);
}

.scr[data-s="alerts-recognition"] .tm-al:last-of-type {
  border-bottom: var(--primitive-border-width-none);
}

.scr[data-s="st-alert"] .tm-al:last-of-type {
  border-bottom: var(--primitive-border-width-none);
}

.scr[data-s="st-back"] .tm-al:last-of-type {
  border-bottom: var(--primitive-border-width-none);
}

/* ── tm-filt ─────────────────────────────────────────────── */
.tm-filt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--touch-target-min);
  margin: var(--primitive-spacing-zero) var(--tm-gutter) var(--primitive-spacing-sm-md);
}

.tm-filt__state {
  font-size: var(--app-text-14);
  color: var(--tm-mid);
}

.tm-filt__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--primitive-spacing-md);
  font-family: inherit;
  font-size: var(--app-text-14);
  font-weight: var(--primitive-typography-weight-bold);
  color: var(--semantic-color-interactive-primary-default);
  background: none;
  border: var(--primitive-border-width-none);
  cursor: pointer;
  padding: var(--primitive-spacing-md-lg) var(--primitive-spacing-zero);
  min-height: var(--touch-target-min);
}

.tm-filt__ic {
  width: 18px;
  height: 18px;
  flex: none;
}

.tm-filt__cnt {
  font-family: var(--font-mono,monospace);
  font-size: var(--app-text-12);
  background: rgba(255,255,255,.24);
  border-radius: var(--primitive-radius-full);
  padding: 1px var(--primitive-spacing-sm-md);
}

.tm-filt--saved {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--touch-target-min);
}

.tm-filt__btn--on {
  color: var(--semantic-color-text-neutral-contrast);
  background: var(--semantic-color-interactive-primary-default);
  border-radius: var(--primitive-radius-full);
  padding: var(--primitive-spacing-md-lg) var(--primitive-spacing-xl);
}

.tm-filt__state b {
  color: var(--tm-navy);
  font-weight: var(--primitive-typography-weight-bold);
}

.tm-filt--saved .tm-filt__state {
  font-size: var(--app-text-14);
  color: var(--tm-mid);
}

.tm-filt--saved .tm-filt__state b {
  color: var(--tm-navy);
  font-weight: var(--primitive-typography-weight-bold);
}

/* ── ax-assumed ─────────────────────────────────────────────── */
.ax-assumed {
  display: none;
  margin-top: var(--primitive-spacing-zero);
  padding: var(--primitive-spacing-lg) var(--primitive-spacing-lg-xl);
  border-radius: var(--primitive-radius-md);
  background: var(--tm-caution-bg);
  font-family: var(--axsans);
  font-size: var(--app-text-14);
  line-height: var(--primitive-typography-line-height-normal);
  color: var(--tm-caution-ink);
  border: var(--primitive-border-width-thin) solid var(--tm-caution-line);
  margin-bottom: var(--primitive-spacing-lg-xl);
}

.ax-assumed a {
  color: var(--tm-navy, #032E42);
  font-weight: var(--primitive-typography-weight-bold);
  text-decoration: underline;
}

.ax-assumed b {
  color: var(--tm-caution-ink);
}

/* ── ax ─────────────────────────────────────────────── */
.ax .ax-stack.tm-c2 {
  display: block;
}

.ax[data-ax="answerassumed"] .ax-assumed {
  display: block;
}

.ax[data-ax="rest"] .ax-send {
  display: grid;
  box-shadow: var(--component-send-glow);
}

.ax[data-ax="text"] .ax-send {
  display: grid;
  box-shadow: var(--component-send-glow);
}

.ax[data-ax="rest"] .ax-kb {
  display: block;
}

.ax[data-ax="text"] .ax-kb {
  display: block;
}

.ax[data-ax="communityedit"] .ax-kb {
  display: block;
}

.ax[data-ax="rest"] .ax-home {
  display: none;
}

.ax[data-ax="text"] .ax-home {
  display: none;
}

.ax[data-ax="communityedit"] .ax-home {
  display: none;
}

.ax[data-ax^="clarify"] .ax-comp {
  background: var(--semantic-color-surface-neutral-subtle,#F2F6F7);
  margin: var(--primitive-spacing-zero) var(--primitive-spacing-xl) var(--primitive-spacing-lg);
  border-radius: var(--app-radius-comp);
  border-top: var(--primitive-border-width-none);
  padding: var(--primitive-spacing-md) var(--primitive-spacing-md) var(--primitive-spacing-md) var(--primitive-spacing-xl-2xl);
  box-shadow: inset 0 0 0 1px var(--axhair);
}

.ax[data-ax^="answer"] .ax-comp {
  background: var(--axmag);
  margin: var(--primitive-spacing-zero) var(--primitive-spacing-xl) var(--primitive-spacing-lg);
  border-radius: var(--app-radius-comp);
  border-top: var(--primitive-border-width-none);
  padding: var(--primitive-spacing-md) var(--primitive-spacing-md) var(--primitive-spacing-md) var(--primitive-spacing-xl-2xl);
  box-shadow: var(--component-axcomp-shadow);
  display: none;
}

.ax[data-ax="contested"] .ax-comp {
  background: var(--axmag);
  margin: var(--primitive-spacing-zero) var(--primitive-spacing-xl) var(--primitive-spacing-lg);
  border-radius: var(--app-radius-comp);
  border-top: var(--primitive-border-width-none);
  padding: var(--primitive-spacing-md) var(--primitive-spacing-md) var(--primitive-spacing-md) var(--primitive-spacing-xl-2xl);
  box-shadow: var(--component-axcomp-shadow);
  display: none;
}

.ax[data-ax^="clarify"] .ax-label {
  display: block;
  color: var(--axink);
  font-weight: var(--primitive-typography-weight-semibold);
  font-size: var(--app-text-16);
}

.ax[data-ax^="answer"] .ax-label {
  display: block;
}

.ax[data-ax="contested"] .ax-label {
  display: block;
}

.ax[data-ax^="clarify"] .ax-plus {
  display: none;
}

.ax[data-ax^="answer"] .ax-plus {
  display: none;
}

.ax[data-ax="contested"] .ax-plus {
  display: none;
}

.ax[data-ax^="clarify"] .ax-input {
  display: none;
}

.ax[data-ax^="answer"] .ax-input {
  display: none;
}

.ax[data-ax="contested"] .ax-input {
  display: none;
}

.ax[data-ax^="clarify"] .ax-mic {
  background: none;
  color: var(--axink2);
}

.ax[data-ax^="answer"] .ax-mic {
  background: rgba(255,255,255,.15);
  color: var(--semantic-color-text-neutral-contrast);
}

.ax[data-ax="contested"] .ax-mic {
  background: rgba(255,255,255,.15);
  color: var(--semantic-color-text-neutral-contrast);
}

.ax[data-ax^="answer"] .ax-community {
  display: block;
  padding: var(--primitive-spacing-sm) var(--primitive-spacing-xl-2xl) var(--primitive-spacing-lg-xl);
}

.ax[data-ax="contested"] .ax-community {
  display: block;
  padding: var(--primitive-spacing-sm) var(--primitive-spacing-xl-2xl) var(--primitive-spacing-lg-xl);
}

.ax[data-ax="voice"] .ax-comp {
  background: var(--axmag);
  margin: var(--primitive-spacing-zero) var(--primitive-spacing-xl) var(--primitive-spacing-lg);
  border-radius: var(--app-radius-comp);
  border-top: var(--primitive-border-width-none);
  padding: var(--primitive-spacing-md);
}

.ax[data-ax="voice"] .ax-plus {
  display: none;
}

.ax[data-ax="voice"] .ax-input {
  display: none;
}

.ax[data-ax="voice"] .ax-send {
  display: none;
}

.ax[data-ax="voice"] .ax-wave {
  display: flex;
}

.ax[data-ax="voice"] .ax-stop {
  display: grid;
}

.ax[data-ax="voice"] .ax-mic {
  display: none;
}

.ax[data-ax="searching"] .ax-comp {
  display: none;
}

.ax[data-ax="gap"] .ax-comp {
  display: none;
}

.ax[data-ax="evidence"] .ax-comp {
  display: none;
}

.ax[data-ax="community"] .ax-comp {
  display: none;
}

.ax[data-ax="communityedit"] .ax-comp {
  display: none;
}

.ax[data-ax="communitytopic"] .ax-comp {
  display: none;
}

.ax[data-ax="searching"] .ax-home {
  display: flex;
}

.ax[data-ax="gap"] .ax-home {
  display: flex;
}

.ax[data-ax="evidence"] .ax-home {
  display: flex;
}

.ax[data-ax="community"] .ax-home {
  display: flex;
}

.ax[data-ax="communitytopic"] .ax-home {
  display: flex;
}

.ax[data-ax="gap"] .ax-gapdock {
  display: block;
}

.ax[data-ax="community"] .ax-postdock {
  display: block;
}

.ax[data-ax="communityedit"] .ax-postdock {
  display: block;
}

.ax[data-ax="attach"] .ax-attachlayer {
  display: block;
}

.ax[data-ax="attachios"] .ax-ioslayer {
  display: block;
}

.ax[data-ax="attached"] .ax-attachrow {
  display: block;
}

.ax[data-ax="attached"] .ax-send {
  display: grid;
  place-items: center;
  box-shadow: var(--component-send-glow);
}

.ax[data-ax="rest"] .ax-scroll {
  background: none;
}

.ax[data-ax^="clarify"] .ax-send {
  display: grid;
  place-items: center;
  box-shadow: var(--component-send-glow);
}

.ax[data-ax^="answer"] .ax-foot {
  flex-direction: column;
  align-items: stretch;
  gap: var(--primitive-spacing-zero);
}

.ax[data-ax="contested"] .ax-foot {
  flex-direction: column;
  align-items: stretch;
  gap: var(--primitive-spacing-xl);
}

.ax[data-ax^="answer"] .ax-home {
  display: flex;
}

.ax[data-ax="contested"] .ax-home {
  display: flex;
}

.ax[data-ax="clarifynarrow"] .ax-kb {
  display: block;
}

.ax[data-ax="clarifynarrow"] .ax-comp {
  display: none;
}

.ax[data-ax="clarifynarrow"] .ax-home {
  display: none;
}

.ax[data-ax="clarifynarrow"] .ax-scroll {
  padding-bottom: var(--primitive-spacing-zero);
}

.ax[data-ax="clarifynarrow"] .ax-clareye {
  margin-top: var(--primitive-spacing-2xl-3xl);
}

.ax[data-ax="contested"] .ax-cols {
  padding-bottom: 44px;
}

.ax[data-ax="mention"] .ax-comp {
  display: none;
}

.ax[data-ax="mention"] .ax-home {
  display: flex;
}

.ax[data-ax="mention"] .ax-kb {
  display: none;
}

.ax[data-ax="coldstart"] .ax-comp {
  display: none;
}

.ax[data-ax="coldcompose"] .ax-comp {
  display: none;
}

.ax[data-ax="coldattach"] .ax-comp {
  display: none;
}

.ax[data-ax="coldsources"] .ax-comp {
  display: none;
}

.ax[data-ax="coldurgent"] .ax-comp {
  display: none;
}

.ax[data-ax="coldstart"] .ax-home {
  display: flex;
}

.ax[data-ax="coldcompose"] .ax-home {
  display: flex;
}

.ax[data-ax="coldattach"] .ax-home {
  display: flex;
}

.ax[data-ax="coldsources"] .ax-home {
  display: flex;
}

.ax[data-ax="coldurgent"] .ax-home {
  display: flex;
}

.ax[data-ax="coldstart"] .ax-coldock {
  display: block;
}

.ax[data-ax="coldcompose"] .ax-postdock {
  display: block;
}

.ax[data-ax="coldsources"] .ax-postdock {
  display: block;
}

.ax[data-ax="coldattach"] .ax-postdock {
  display: block;
}

.ax[data-ax="coldurgent"] .ax-postdock {
  display: block;
}

.ax[data-ax="coldattach"] .ax-attachlayer {
  display: block;
}

.ax[data-ax="coldattach"] .ax-attach-sheet {
  animation: axsheetup .28s cubic-bezier(.22,.61,.36,1);
}

.ax[data-ax="coldsources"] .ax-srchint {
  display: none;
}

.ax[data-ax="coldurgent"] .ax-srchint {
  display: none;
}

.ax[data-vidok="1"] .ax-vidgo {
  display: none;
}

.ax[data-vid="1"]:not([data-vidok="1"]) .ax-send {
  opacity: .3;
  box-shadow: none;
  pointer-events: none;
}

.ax[data-ax="coldcompose"] .ax-back {
  display: none;
}

.ax[data-ax="coldattach"] .ax-back {
  display: none;
}

.ax[data-ax="coldsources"] .ax-back {
  display: none;
}

.ax[data-ax="coldurgent"] .ax-back {
  display: none;
}

.ax[data-ax="mention"] .ax-flabel--first {
  margin-top: var(--primitive-spacing-zero);
}

.ax[data-ax="coldcompose"] .ax-srcs--full {
  display: none;
}

.ax[data-vid="1"] .ax-attach--vid {
  display: flex;
}

.ax[data-vidok="1"] .ax-attach--vid {
  background: var(--semantic-color-surface-neutral-subtle,#F2F6F7);
  border-color: var(--axhair);
}

.ax[data-vidok="1"] .ax-attach__st--warn {
  color: var(--tm-navy,#032E42);
}

.ax[data-ax^="clarify"] .ax-label small {
  color: var(--axink2);
  opacity: 1;
}

.ax[data-ax="evidence"] .ax-eyebrow.ax-eb--ev {
  margin-top: var(--primitive-spacing-zero);
}

.ax[data-vid="1"] .ax-attachrow .ax-attach:not(.ax-attach--vid) {
  display: none;
}

.ax[data-vidok="1"] .ax-attach--vid .unc {
  display: none;
}

.ax[data-vidok="1"] .ax-attach--vid .conf {
  display: inline-flex;
  align-items: center;
  gap: var(--primitive-spacing-sm-md);
}

.ax[data-vidok="1"] .ax-attach__deid--vid .conf {
  color: var(--tm-navy,#032E42);
  font-weight: var(--primitive-typography-weight-bold);
}

.ax[data-vidok="1"] .ax-attach--vid .ax-attach__x {
  display: grid;
}

.ax[data-ax="community"] .ax-stack[data-when="community"] > :first-child {
  margin-top: var(--primitive-spacing-zero);
}

.ax[data-ax="communityedit"] .ax-stack[data-when="communityedit"] > :first-child {
  margin-top: var(--primitive-spacing-zero);
}

.ax[data-ax="communitytopic"] .ax-stack[data-when="communitytopic"] > :first-child {
  margin-top: var(--primitive-spacing-zero);
}

.ax[data-ax="coldstart"] .ax-stack[data-when="coldstart"] > :first-child {
  margin-top: var(--primitive-spacing-zero);
}

.ax[data-ax="coldcompose"] .ax-stack[data-when="coldcompose"] > :first-child {
  margin-top: var(--primitive-spacing-zero);
}

.ax[data-ax="coldattach"] .ax-stack[data-when="coldcompose"] > :first-child {
  margin-top: var(--primitive-spacing-zero);
}

.ax[data-ax="coldsources"] .ax-stack[data-when="coldcompose"] > :first-child {
  margin-top: var(--primitive-spacing-zero);
}

.ax[data-ax="coldurgent"] .ax-stack[data-when="coldcompose"] > :first-child {
  margin-top: var(--primitive-spacing-zero);
}

.ax[data-ax="community"] #axcback {
  display: none;
}

.ax[data-ax="communityedit"] #axcback {
  display: none;
}

.ax[data-ax="communitytopic"] #axtback {
  display: none;
}

.ax[data-ax="evidence"] #axevback {
  display: none;
}

.ax[data-ax="mention"] #axmback {
  display: none;
}

/* ── ax-flabel ─────────────────────────────────────────────── */
.ax-flabel {
  font-family: var(--axmono);
  font-size: var(--app-text-12);
  letter-spacing: var(--app-tracking-caps);
  text-transform: uppercase;
  color: var(--tm-mid);
  margin-top: var(--primitive-spacing-2xl);
  margin-bottom: var(--primitive-spacing-md-lg);
}

.ax-flabel--first {
  margin-top: var(--primitive-spacing-lg-xl);
}

.ax-flabel:not(.ax-flabel--first) {
  margin-top: var(--primitive-spacing-2xl);
}

/* ── ax-helpchips ─────────────────────────────────────────────── */
.ax-helpchips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--primitive-spacing-md);
  margin-bottom: var(--primitive-spacing-zero);
}

.ax-helpchips + .ax-flabel {
  margin-top: var(--primitive-spacing-2xl);
}

/* ── tm-acct ─────────────────────────────────────────────── */
:where(.tm-acct) :where(button) {
  font: inherit;
  color: inherit;
  border: var(--primitive-border-width-none);
  background: none;
  padding: var(--primitive-spacing-zero);
  -webkit-appearance: none;
  appearance: none;
}

.tm-acct {
  position: relative;
}

.tm-acct .dp-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--primitive-spacing-md);
  width: 100%;
  min-height: 48px;
  padding: var(--primitive-spacing-zero) var(--primitive-spacing-xl-2xl);
  border: var(--primitive-border-width-none);
  border-radius: var(--app-radius-group);
  font-size: var(--app-text-14);
  font-weight: var(--primitive-typography-weight-bold);
  letter-spacing: var(--primitive-typography-letter-spacing-normal);
  cursor: pointer;
}

.tm-acct .ac-until {
  display: block;
  width: 100%;
  margin: var(--primitive-spacing-lg-xl) var(--primitive-spacing-zero) var(--primitive-spacing-xs);
  padding: var(--primitive-spacing-lg-xl) var(--primitive-spacing-lg-xl);
  border: var(--primitive-border-width-none);
  text-align: left;
  cursor: pointer;
  background: var(--tm-teal-bg);
  border-radius: var(--app-radius-group);
}

.tm-acct .ac-receipt {
  display: flex;
  align-items: flex-start;
  gap: var(--primitive-spacing-md-lg);
  padding: var(--primitive-spacing-lg-xl) var(--primitive-spacing-xl-2xl) var(--primitive-spacing-zero);
  font-size: var(--app-text-12);
  line-height: var(--primitive-typography-line-height-normal);
  color: var(--tm-gold-ink);
}

.tm-acct .ac-id {
  background: var(--semantic-color-contrast-light);
  padding: var(--primitive-spacing-2xl-3xl) var(--primitive-spacing-xl-2xl) var(--primitive-spacing-zero);
  position: relative;
  padding-right: var(--component-acct-id-padding-right);
}

.tm-acct .ac-row {
  display: flex;
  align-items: center;
  gap: var(--primitive-spacing-lg);
  width: 100%;
  min-height: 60px;
  padding: var(--primitive-spacing-lg-xl) var(--primitive-spacing-zero);
  border: var(--primitive-border-width-none);
  background: none;
  text-align: left;
  cursor: pointer;
  border-top: var(--primitive-border-width-thin) solid var(--tm-line-soft);
}

.tm-acct .ac-rows {
  padding: var(--primitive-spacing-zero) var(--primitive-spacing-xl-2xl);
}

.tm-acct .ac-case {
  display: flex;
  align-items: flex-start;
  gap: var(--primitive-spacing-lg);
  width: 100%;
  min-height: 60px;
  padding: var(--primitive-spacing-lg-xl) var(--primitive-spacing-zero);
  border: var(--primitive-border-width-none);
  background: none;
  text-align: left;
  cursor: pointer;
  border-top: var(--primitive-border-width-thin) solid var(--tm-line-soft);
}

.tm-acct .ac-thanks {
  padding: var(--primitive-spacing-zero) var(--primitive-spacing-xl-2xl);
}

.tm-acct .ac-empty {
  padding: var(--primitive-spacing-3xl) var(--primitive-spacing-xl-2xl) var(--primitive-spacing-zero);
}

.tm-acct .ac-context {
  margin: var(--primitive-spacing-zero) var(--tm-gutter);
  padding: var(--primitive-spacing-xl) var(--primitive-spacing-xl);
  border-radius: var(--primitive-radius-lg);
  background: var(--semantic-color-surface-wash,#F0F7F7);
}

.tm-acct .ac-seg {}

.tm-acct .ac-note {
  padding: var(--primitive-spacing-lg) var(--primitive-spacing-xl-2xl) var(--primitive-spacing-zero);
  font-size: var(--app-text-12);
  line-height: var(--primitive-typography-line-height-normal);
  color: var(--tm-muted);
}

.tm-acct .ac-field {
  margin: var(--primitive-spacing-zero) var(--primitive-spacing-xl-2xl);
  padding: var(--primitive-spacing-lg-xl) var(--primitive-spacing-xl);
  border-radius: var(--app-radius-group);
  border: var(--primitive-border-width-regular) solid var(--tm-line);
  background: var(--semantic-color-contrast-light);
}

.tm-acct .ac-helper {
  display: flex;
  align-items: center;
  gap: var(--primitive-spacing-lg-xl);
  margin: var(--primitive-spacing-zero) var(--primitive-spacing-xl-2xl);
  padding: var(--primitive-spacing-lg-xl) var(--primitive-spacing-xl);
  border-radius: var(--primitive-radius-lg);
  background: var(--semantic-color-surface-wash,#F0F7F7);
}

.tm-acct .ac-title {
  padding: var(--primitive-spacing-2xl) var(--primitive-spacing-xl-2xl) var(--primitive-spacing-zero);
}

.tm-acct .dp-callout {
  font-size: var(--app-text-12);
  line-height: var(--primitive-typography-line-height-normal);
  padding: var(--primitive-spacing-xl) var(--primitive-spacing-xl);
  border-radius: var(--app-radius-group);
}

.tm-acct .ac-tail {
  height: 58px;
}

.tm-acct .ac-scrim {
  position: absolute;
  inset: var(--primitive-spacing-zero);
  background: rgba(3,46,66,.45);
  z-index: var(--app-z-scrim);
}

.tm-acct .ac-hair {
  height: 1px;
  background: var(--tm-line-soft);
  margin: var(--primitive-spacing-zero) var(--primitive-spacing-xl-2xl);
}

.tm-acct .ac-record {
  padding: var(--primitive-spacing-zero);
  margin-top: var(--primitive-spacing-xl-2xl);
  border-top: var(--primitive-border-width-thin) solid var(--tm-line-soft);
}

.tm-acct .ac-where {
  margin-top: var(--primitive-spacing-xl);
  padding-top: var(--primitive-spacing-xl);
  border-top: var(--primitive-border-width-thin) solid var(--tm-line-soft);
}

.tm-acct .dp-seg {
  display: flex;
  width: 100%;
  gap: var(--primitive-spacing-xs);
  padding: var(--primitive-spacing-xs-sm);
  border-radius: var(--primitive-radius-md);
  background: var(--semantic-color-contrast-light);
  border: var(--primitive-border-width-thin) solid var(--primitive-color-neutral-gray-200);
}

.tm-acct .dp-select {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--primitive-spacing-md-lg);
  min-height: var(--touch-target-min);
  padding: var(--primitive-spacing-md-lg) var(--primitive-spacing-lg);
  border: var(--primitive-border-width-thin) solid var(--primitive-color-neutral-gray-300);
  border-radius: var(--primitive-radius-sm);
  background: var(--semantic-color-contrast-light);
  font-family: 'Atkinson Hyperlegible Next','Atkinson Hyperlegible',system-ui,sans-serif;
  font-size: var(--app-text-14);
  font-weight: var(--primitive-typography-weight-normal);
  color: var(--primitive-color-neutral-gray-900);
  cursor: pointer;
}

.tm-acct .dp-menu {
  position: absolute;
  z-index: var(--app-z-menu);
  min-width: 200px;
  margin-top: var(--primitive-spacing-sm-md);
  padding: var(--primitive-spacing-sm-md);
  background: var(--semantic-color-contrast-light);
  border-radius: var(--primitive-radius-md);
  box-shadow: var(--shadow-e2);
}

.tm-acct .dp-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--primitive-spacing-md-lg);
  width: 100%;
  min-height: var(--touch-target-min);
  padding: var(--primitive-spacing-md-lg) var(--primitive-spacing-md-lg);
  border: var(--primitive-border-width-none);
  background: none;
  border-radius: var(--primitive-radius-sm);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--app-text-14);
  font-weight: var(--primitive-typography-weight-normal);
  text-align: left;
  color: var(--primitive-color-neutral-gray-800);
}

.tm-acct .dp-menuscrim {
  position: absolute;
  inset: var(--primitive-spacing-zero);
  z-index: var(--app-z-scrim-menu);
}

.tm-acct > .scr {
  display: none;
  flex-direction: column;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: var(--primitive-spacing-zero);
  background: var(--semantic-color-contrast-light);
}

.tm-acct .ac-mini {
  padding: var(--primitive-spacing-xl-2xl) var(--primitive-spacing-xl-2xl) var(--primitive-spacing-lg-xl);
  background: var(--semantic-color-contrast-light);
}

.tm-acct .ac-tabs {
  display: flex;
  gap: var(--primitive-spacing-zero);
  padding: var(--primitive-spacing-zero) var(--primitive-spacing-xl-2xl);
  border-bottom: var(--primitive-border-width-thin) solid var(--tm-line-soft);
  background: var(--semantic-color-contrast-light);
}

.tm-acct .ac-tab {
  flex: 1;
  min-height: 48px;
  padding: var(--primitive-spacing-zero) var(--primitive-spacing-xs) var(--primitive-spacing-lg);
  border: var(--primitive-border-width-none);
  background: none;
  cursor: pointer;
  font-size: var(--app-text-14);
  font-weight: var(--primitive-typography-weight-semibold);
  color: var(--tm-faint);
  position: relative;
  text-align: center;
}

.tm-acct .ac-doors {
  display: flex;
  gap: var(--primitive-spacing-xs-sm);
  padding: var(--primitive-spacing-xs-sm);
  margin: var(--primitive-spacing-xs) var(--primitive-spacing-xl-2xl) var(--primitive-spacing-zero);
  border-radius: var(--app-radius-group);
  background: var(--semantic-color-surface-neutral-subtle,#F2F6F7);
}

.tm-acct .ac-door {
  flex: 1;
  min-height: var(--touch-target-min);
  display: flex;
  align-items: center;
  justify-content: center;
  border: var(--primitive-border-width-none);
  background: none;
  border-radius: var(--primitive-radius-md);
  cursor: pointer;
  font-size: var(--app-text-14);
  font-weight: var(--primitive-typography-weight-semibold);
  color: var(--tm-muted);
}

.tm-acct .ac-count {
  font-family: var(--font-mono,monospace);
  font-size: var(--app-text-12);
  letter-spacing: var(--app-tracking-caps);
  text-transform: uppercase;
  color: var(--tm-faint);
}

.tm-acct .ac-pin {
  flex: none;
  background: var(--semantic-color-contrast-light);
  position: relative;
  z-index: var(--app-z-raised);
}

.tm-acct .ac-group {
  margin: var(--primitive-spacing-zero) var(--primitive-spacing-xl-2xl);
  background: var(--semantic-color-contrast-light);
  border: var(--primitive-border-width-thin) solid var(--tm-line-soft);
  border-radius: var(--primitive-radius-lg);
  box-shadow: var(--tm-e1);
  padding: var(--primitive-spacing-zero) var(--primitive-spacing-xl);
  overflow: hidden;
}

.tm-acct .dp-switch {
  width: 48px;
  height: 28px;
  flex: none;
  border-radius: var(--primitive-radius-full);
  position: relative;
  background: var(--tm-line);
  transition: none;
}

.tm-acct .ac-lock {
  font-family: var(--font-mono,monospace);
  font-size: var(--app-text-12);
  font-weight: var(--primitive-typography-weight-medium);
  letter-spacing: var(--primitive-typography-letter-spacing-wider);
  text-transform: uppercase;
  color: var(--tm-faint);
  flex: none;
}

.tm-acct .ac-preview {
  display: flex;
  align-items: center;
  gap: var(--primitive-spacing-lg-xl);
  width: 100%;
  min-height: 68px;
  padding: var(--primitive-spacing-lg-xl) var(--primitive-spacing-xl);
  border: var(--primitive-border-width-none);
  text-align: left;
  cursor: pointer;
  border-radius: var(--primitive-radius-lg);
  background: var(--semantic-color-surface-wash,#F0F7F7);
}

.tm-acct .ac-tn {
  display: flex;
  align-items: flex-start;
  gap: var(--primitive-spacing-lg-xl);
  padding: 18px var(--primitive-spacing-xl-2xl) var(--primitive-spacing-xl);
  border-top: var(--primitive-border-width-thin) solid var(--tm-line-soft);
  cursor: pointer;
  width: 100%;
  border-left: var(--primitive-border-width-none);
  border-right: var(--primitive-border-width-none);
  border-bottom: var(--primitive-border-width-none);
  background: none;
  text-align: left;
  font-family: inherit;
}

.tm-acct .ac-namelink {
  color: var(--tm-teal-700);
  font-weight: var(--primitive-typography-weight-bold);
  text-decoration: none;
  position: relative;
}

.tm-acct .ac-namelink::after {
  content: "";
  position: absolute;
  left: -4px;
  right: -4px;
  top: 50%;
  transform: translateY(-50%);
  height: var(--touch-target-min,44px);
}

.tm-acct .abody--paper {
  background: var(--semantic-color-contrast-light);
}

.tm-acct .abody--wash {
  background: var(--semantic-color-surface-wash,#F0F7F7);
}

.tm-acct .dp-button--primary {
  background: #00494B;
  color: var(--semantic-color-text-neutral-contrast);
}

.tm-acct .dp-button--secondary {
  background: var(--semantic-color-contrast-light);
  color: var(--tm-navy);
  border: var(--primitive-border-width-regular) solid var(--tm-line);
}

.tm-acct .dp-button--danger {
  background: var(--semantic-color-contrast-light);
  color: var(--tm-err-bold,#AC0019);
  border: var(--primitive-border-width-regular) solid #E6CFC9;
}

.tm-acct .ac-until__top {
  display: flex;
  align-items: center;
  gap: var(--primitive-spacing-md-lg);
}

.tm-acct .ac-until__lbl {
  flex: 1;
  min-width: 0;
  font-size: var(--app-text-14);
  font-weight: var(--primitive-typography-weight-bold);
  color: var(--tm-navy);
}

.tm-acct .ac-until__val {
  font-family: var(--font-mono,monospace);
  font-size: var(--app-text-12);
  font-weight: var(--primitive-typography-weight-medium);
  letter-spacing: var(--primitive-typography-letter-spacing-wider);
  text-transform: uppercase;
  color: var(--tm-teal-700);
  flex: none;
}

.tm-acct .ac-until__sub {
  display: block;
  font-size: var(--app-text-12);
  line-height: var(--primitive-typography-line-height-normal);
  color: var(--tm-teal-700);
  margin-top: var(--primitive-spacing-sm-md);
}

.tm-acct .ac-id__disc {
  width: 60px;
  height: 60px;
  border-radius: var(--primitive-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--semantic-color-text-neutral-contrast);
  font-size: var(--app-text-16);
  font-weight: var(--primitive-typography-weight-bold);
  letter-spacing: var(--primitive-typography-letter-spacing-wide);
  background: linear-gradient(150deg,var(--component-provenance-emerging-ink),var(--tm-teal-700));
}

.tm-acct .ac-id__name {
  font-family: var(--primitive-typography-family-display,'Newsreader',serif);
  font-weight: var(--primitive-typography-weight-semibold);
  font-size: var(--app-text-28);
  line-height: var(--primitive-typography-line-height-tighter);
  letter-spacing: var(--primitive-typography-letter-spacing-normal);
  color: var(--tm-navy);
  margin-top: var(--primitive-spacing-xl);
  margin-bottom: var(--primitive-spacing-zero);
}

.tm-acct .ac-id__role {
  font-family: var(--font-mono,monospace);
  font-size: var(--app-text-12);
  letter-spacing: var(--app-tracking-caps);
  text-transform: uppercase;
  color: var(--tm-teal-700);
  margin-top: var(--primitive-spacing-md-lg);
}

.tm-acct .ac-id__where {
  font-size: var(--app-text-12);
  line-height: var(--primitive-typography-line-height-normal);
  color: var(--tm-muted);
  margin-top: var(--primitive-spacing-xs);
}

.tm-acct .ac-id__ver {
  display: inline-flex;
  align-items: center;
  gap: var(--primitive-spacing-sm-md);
  font-size: var(--app-text-12);
  color: var(--tm-teal-700);
  margin-top: var(--primitive-spacing-md-lg);
  position: absolute;
  top: var(--primitive-spacing-sm);
  right: 20px;
  padding: var(--primitive-spacing-zero);
  background: none;
  font-weight: var(--primitive-typography-weight-bold);
  white-space: nowrap;
}

.tm-acct .ac-row__body {
  min-width: 0;
  flex: 1;
}

.tm-acct .ac-row__lbl {
  font-size: var(--app-text-14);
  font-weight: var(--primitive-typography-weight-bold);
  color: var(--tm-navy);
  line-height: var(--primitive-typography-line-height-tight);
}

.tm-acct .ac-row__sub {
  font-size: var(--app-text-12);
  line-height: var(--primitive-typography-line-height-snug);
  color: var(--tm-muted);
  margin-top: var(--primitive-spacing-xs-sm);
}

.tm-acct .ac-row__val {
  font-size: var(--app-text-12);
  color: var(--tm-muted);
  flex: none;
  max-width: 150px;
  text-align: right;
}

.tm-acct .ac-row__state {
  font-family: var(--font-mono,monospace);
  font-size: var(--app-text-12);
  font-weight: var(--primitive-typography-weight-medium);
  letter-spacing: var(--primitive-typography-letter-spacing-wider);
  text-transform: uppercase;
  color: var(--tm-navy);
  flex: none;
}

.tm-acct .ac-row__chev {
  flex: none;
  color: var(--semantic-color-border-neutral-default);
}

.tm-acct .ac-row__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--primitive-radius-full);
  background: var(--tm-teal);
  flex: none;
}

.tm-acct .ac-case__body {
  min-width: 0;
  flex: 1;
}

.tm-acct .ac-case__title {
  font-size: var(--app-text-14);
  font-weight: var(--primitive-typography-weight-semibold);
  color: var(--tm-navy);
  line-height: var(--primitive-typography-line-height-snug);
}

.tm-acct .ac-case__meta {
  font-size: var(--app-text-12);
  line-height: var(--primitive-typography-line-height-normal);
  color: var(--tm-muted);
  margin-top: var(--primitive-spacing-sm-md);
}

.tm-acct .ac-thanks__item {
  padding: var(--primitive-spacing-xl-2xl) var(--primitive-spacing-zero) var(--primitive-spacing-sm-md);
  border-top: var(--primitive-border-width-thin) solid var(--tm-line-soft);
}

.tm-acct .ac-thanks__quote {
  font-family: var(--primitive-typography-family-display,'Newsreader',serif);
  font-style: italic;
  font-weight: var(--primitive-typography-weight-normal);
  font-size: var(--app-text-16);
  line-height: var(--primitive-typography-line-height-normal);
  color: var(--tm-gold-ink);
  margin: var(--primitive-spacing-zero);
}

.tm-acct .ac-thanks__by {
  font-size: var(--app-text-14);
  font-weight: var(--primitive-typography-weight-bold);
  color: var(--tm-navy);
  margin-top: var(--primitive-spacing-lg);
}

.tm-acct .ac-thanks__case {
  display: flex;
  align-items: flex-start;
  gap: var(--primitive-spacing-md);
  min-height: var(--touch-target-min);
  width: 100%;
  border: var(--primitive-border-width-none);
  background: none;
  padding: var(--primitive-spacing-lg) var(--primitive-spacing-zero) var(--primitive-spacing-zero);
  text-align: left;
  cursor: pointer;
  font-size: var(--app-text-12);
  line-height: var(--primitive-typography-line-height-normal);
  color: var(--tm-muted);
}

.tm-acct .ac-empty__t {
  font-size: var(--app-text-16);
  font-weight: var(--primitive-typography-weight-bold);
  color: var(--tm-navy);
}

.tm-acct .ac-empty__b {
  font-size: var(--app-text-14);
  line-height: var(--primitive-typography-line-height-normal);
  color: var(--tm-muted);
  margin-top: var(--primitive-spacing-md-lg);
  max-width: 33ch;
}

.tm-acct .ac-context__lbl {
  font-family: var(--font-mono,monospace);
  font-size: var(--app-text-12);
  letter-spacing: var(--app-tracking-caps);
  text-transform: uppercase;
  color: var(--tm-teal-700);
  font-weight: var(--primitive-typography-weight-medium);
}

.tm-acct .ac-context__t {
  font-size: var(--app-text-14);
  font-weight: var(--primitive-typography-weight-semibold);
  color: var(--tm-navy);
  line-height: var(--primitive-typography-line-height-snug);
  margin-top: var(--primitive-spacing-md-lg);
}

.tm-acct .ac-context__m {
  font-size: var(--app-text-12);
  color: var(--tm-muted);
  margin-top: var(--primitive-spacing-sm-md);
}

.tm-acct .ac-seg__o {}

.tm-acct .ac-field__txt {
  font-size: var(--app-text-14);
  line-height: var(--primitive-typography-line-height-normal);
  color: var(--semantic-color-text-neutral-default,#3E4C4D);
}

.tm-acct .ac-field__cap {
  font-size: var(--app-text-12);
  line-height: var(--primitive-typography-line-height-normal);
  color: var(--tm-muted);
  padding: var(--primitive-spacing-md-lg) var(--primitive-spacing-xl-2xl) var(--primitive-spacing-zero);
}

.tm-acct .ac-helper__disc {
  width: 42px;
  height: 42px;
  border-radius: var(--primitive-radius-full);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--semantic-color-text-neutral-contrast);
  font-size: var(--app-text-12);
  font-weight: var(--primitive-typography-weight-bold);
  background: linear-gradient(150deg,var(--component-provenance-emerging-ink),var(--tm-teal-700));
}

.tm-acct .ac-helper__n {
  font-size: var(--app-text-14);
  font-weight: var(--primitive-typography-weight-bold);
  color: var(--tm-navy);
}

.tm-acct .ac-helper__m {
  font-size: var(--app-text-12);
  color: var(--tm-muted);
  margin-top: var(--primitive-spacing-xs-sm);
}

.tm-acct .ac-title__h {
  font-family: var(--primitive-typography-family-display,'Newsreader',serif);
  font-weight: var(--primitive-typography-weight-semibold);
  font-size: var(--app-text-28);
  line-height: var(--primitive-typography-line-height-tighter);
  letter-spacing: var(--primitive-typography-letter-spacing-normal);
  color: var(--tm-navy);
}

.tm-acct .ac-title__m {
  font-family: var(--font-mono,monospace);
  font-size: var(--app-text-12);
  letter-spacing: var(--app-tracking-caps);
  text-transform: uppercase;
  color: var(--tm-faint);
  margin-top: var(--primitive-spacing-lg);
}

.tm-acct .ac-row__act {
  font-size: var(--app-text-14);
  font-weight: var(--primitive-typography-weight-bold);
  color: var(--semantic-color-interactive-primary-default);
  flex: none;
}

.tm-acct .ac-record__foot {
  margin-top: var(--primitive-spacing-sm);
  margin-bottom: -11px;
}

.tm-acct .ac-where__lbl {
  font-family: var(--font-mono,monospace);
  font-size: var(--app-text-12);
  letter-spacing: var(--app-tracking-caps);
  text-transform: uppercase;
  color: var(--tm-faint);
  font-weight: var(--primitive-typography-weight-medium);
  margin-bottom: var(--primitive-spacing-md-lg);
}

.tm-acct .ac-where__r {
  display: flex;
  align-items: baseline;
  gap: var(--primitive-spacing-md-lg);
  font-size: var(--app-text-12);
  line-height: var(--primitive-typography-line-height-normal);
  color: var(--tm-muted);
  padding: var(--primitive-spacing-xs) var(--primitive-spacing-zero);
}

.tm-acct .ac-where__tag {
  font-family: var(--font-mono,monospace);
  font-size: var(--app-text-12);
  font-weight: var(--primitive-typography-weight-medium);
  letter-spacing: var(--primitive-typography-letter-spacing-wider);
  text-transform: uppercase;
  color: var(--tm-teal-700);
  flex: none;
}

.tm-acct .dp-seg__i {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--primitive-spacing-sm-md);
  min-height: 34px;
  padding: var(--primitive-spacing-zero) var(--primitive-spacing-md-lg);
  border: var(--primitive-border-width-none);
  background: none;
  border-radius: var(--primitive-radius-sm);
  cursor: pointer;
  font-family: 'Atkinson Hyperlegible Next','Atkinson Hyperlegible',system-ui,sans-serif;
  font-size: var(--app-text-14);
  font-weight: var(--primitive-typography-weight-semibold);
  white-space: nowrap;
  color: var(--primitive-color-neutral-gray-600);
}

.tm-acct .dp-seg__i::after {
  content: "";
  position: absolute;
  left: var(--primitive-spacing-zero);
  right: var(--primitive-spacing-zero);
  top: 50%;
  transform: translateY(-50%);
  height: var(--touch-target-min,44px);
}

.tm-acct .dp-select__ph {
  color: var(--primitive-color-neutral-gray-400);
}

.tm-acct .dp-select--bare {
  border: var(--primitive-border-width-none);
  background: none;
  padding: var(--primitive-spacing-zero);
  min-height: var(--touch-target-min);
  font-weight: var(--primitive-typography-weight-bold);
  color: var(--semantic-color-interactive-primary-default);
  font-family: inherit;
  font-size: var(--app-text-14);
}

.tm-acct .dp-select--focus {
  border-color: var(--primitive-color-brand-primary-600);
  box-shadow: 0 0 0 1.5px var(--primitive-color-brand-primary-100);
}

.tm-acct .dp-select--error {
  border-color: var(--primitive-color-feedback-error-500);
}

.tm-acct .dp-select--dis {
  background: var(--primitive-color-neutral-gray-100);
  color: var(--primitive-color-neutral-gray-400);
  cursor: not-allowed;
}

.tm-acct .dp-opt--hl {
  background: var(--primitive-color-brand-primary-100);
}

.tm-acct .dp-opt--sel {
  color: var(--primitive-color-brand-primary-700);
  font-weight: var(--primitive-typography-weight-semibold);
  background: var(--primitive-color-brand-primary-100);
}

.tm-acct .dp-opt--dis {
  color: var(--primitive-color-neutral-gray-400);
  cursor: not-allowed;
}

.tm-acct .ac-mini__top {
  display: flex;
  align-items: center;
  gap: var(--primitive-spacing-lg-xl);
}

.tm-acct .ac-mini__disc {
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  flex: none;
  border-radius: var(--primitive-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--semantic-color-text-neutral-contrast);
  font-size: var(--app-text-14);
  font-weight: var(--primitive-typography-weight-bold);
  background: linear-gradient(150deg,var(--component-provenance-emerging-ink),var(--tm-teal-700));
}

.tm-acct .ac-mini__name {
  font-family: var(--primitive-typography-family-display,'Newsreader',serif);
  font-weight: var(--primitive-typography-weight-semibold);
  font-size: var(--app-text-28);
  line-height: var(--primitive-typography-line-height-tighter);
  letter-spacing: var(--primitive-typography-letter-spacing-normal);
  color: var(--tm-navy);
  min-width: 0;
}

.tm-acct .ac-mini__role {
  font-family: var(--font-mono,monospace);
  font-size: var(--app-text-12);
  letter-spacing: var(--app-tracking-caps);
  text-transform: uppercase;
  color: var(--tm-teal-700);
  margin-top: var(--primitive-spacing-lg);
}

.tm-acct .ac-tab--on {
  color: var(--tm-teal-700);
  font-weight: var(--primitive-typography-weight-bold);
}

.tm-acct .ac-tab--on::after {
  content: '';
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: -1px;
  height: 2.5px;
  border-radius: var(--primitive-radius-2xs);
  background: var(--tm-teal);
}

.tm-acct .ac-door--on {
  background: var(--semantic-color-contrast-light);
  color: var(--tm-navy);
  font-weight: var(--primitive-typography-weight-bold);
  box-shadow: var(--component-acctdoor-shadow);
}

.tm-acct .ac-menu__id {
  display: flex;
  align-items: center;
  gap: var(--primitive-spacing-lg-xl);
  padding: var(--primitive-spacing-sm-md) var(--primitive-spacing-xl-2xl) var(--primitive-spacing-lg);
}

.tm-acct .ac-menu__t {
  flex: 1;
  min-width: 0;
}

.tm-acct .ac-menu__n {
  display: block;
  font-family: var(--primitive-typography-family-display,'Newsreader',serif);
  font-weight: var(--primitive-typography-weight-semibold);
  font-size: var(--app-text-16);
  color: var(--tm-navy);
  line-height: var(--primitive-typography-line-height-tight);
}

.tm-acct .ac-menu__r {
  display: block;
  font-family: var(--font-mono,monospace);
  font-size: var(--app-text-12);
  letter-spacing: var(--primitive-typography-letter-spacing-wider);
  text-transform: uppercase;
  color: var(--tm-teal-700);
  margin-top: var(--primitive-spacing-sm-md);
}

.tm-acct .dp-switch--on {
  background: var(--tm-teal);
}

.tm-acct .ac-row--static {
  cursor: default;
  align-items: center;
  gap: var(--primitive-spacing-xl);
}

.tm-acct .ac-preview__disc {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: var(--primitive-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--semantic-color-text-neutral-contrast);
  font-size: var(--app-text-12);
  font-weight: var(--primitive-typography-weight-bold);
  background: linear-gradient(150deg,var(--component-provenance-emerging-ink),var(--tm-teal-700));
}

.tm-acct .ac-preview__b {
  flex: 1;
  min-width: 0;
}

.tm-acct .ac-preview__t {
  display: block;
  font-size: var(--app-text-14);
  font-weight: var(--primitive-typography-weight-bold);
  color: var(--tm-navy);
}

.tm-acct .ac-preview__m {
  display: block;
  font-size: var(--app-text-12);
  color: var(--tm-muted);
  margin-top: var(--primitive-spacing-xs-sm);
}

.tm-acct .ac-tn__disc {
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: var(--primitive-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--semantic-color-text-neutral-contrast);
  font-size: var(--app-text-12);
  font-weight: var(--primitive-typography-weight-bold);
  background: var(--tm-gold);
}

.tm-acct .ac-tn__body {
  flex: 1;
  min-width: 0;
}

.tm-acct .ac-tn__quote {
  font-family: var(--primitive-typography-family-display,'Newsreader',serif);
  font-style: italic;
  font-weight: var(--primitive-typography-weight-normal);
  font-size: var(--app-text-16);
  line-height: var(--primitive-typography-line-height-normal);
  color: var(--tm-gold-ink);
  margin: var(--primitive-spacing-zero);
}

.tm-acct .ac-tn__by {
  font-size: var(--app-text-14);
  font-weight: var(--primitive-typography-weight-bold);
  color: var(--tm-navy);
  margin-top: var(--primitive-spacing-lg);
}

.tm-acct .ac-tn__chev {
  flex: none;
  color: var(--component-provenance-new);
  margin-top: var(--primitive-spacing-lg);
}

.tm-acct .ac-row__state--muted {
  color: var(--tm-faint);
}

.tm-acct .ac-seg__o--on {
  background: var(--semantic-color-interactive-primary-default);
  color: var(--semantic-color-text-neutral-contrast);
  box-shadow: none;
  font-weight: var(--primitive-typography-weight-bold);
}

.tm-acct .ac-where__r--p {
  color: var(--tm-navy);
  font-weight: var(--primitive-typography-weight-bold);
}

.tm-acct .dp-seg__i--on {
  background: var(--semantic-color-interactive-primary-default);
  color: var(--semantic-color-contrast-light);
}

.tm-acct .ac-tn__disc--none {
  background: transparent;
}

.tm-acct .ac-receipt svg {
  flex: none;
  margin-top: 1px;
  color: var(--tm-gold);
}

.tm-acct .ac-note b {
  color: var(--tm-navy);
  font-weight: var(--primitive-typography-weight-bold);
}

.tm-acct .dp-callout b {
  color: var(--tm-navy);
}

.tm-acct .dp-select svg {
  color: var(--primitive-color-neutral-gray-500);
  flex: 0 0 auto;
}

.tm-acct .dp-opt svg {
  color: var(--primitive-color-brand-primary-600);
  flex: 0 0 auto;
}

.tm-acct .dp-switch i {
  position: absolute;
  top: var(--primitive-spacing-sm);
  left: var(--primitive-spacing-sm);
  width: 20px;
  height: 20px;
  border-radius: var(--primitive-radius-full);
  background: var(--semantic-color-contrast-light);
  box-shadow: var(--component-switchknob-shadow);
  transition: none;
}

.tm-acct .ac-id__ver svg {
  flex: none;
  color: var(--tm-teal);
  width: 13px;
  height: 13px;
}

.tm-acct .ac-case__meta b {}

.tm-acct .ac-thanks__by span {
  font-weight: var(--primitive-typography-weight-normal);
  color: var(--tm-muted);
}

.tm-acct .ac-thanks__case span {
  flex: 1;
  min-width: 0;
}

.tm-acct .ac-thanks__case svg {
  margin-top: var(--primitive-spacing-xs);
  flex: none;
}

.tm-acct .dp-select--bare svg {
  color: var(--semantic-color-interactive-primary-default);
}

.tm-acct .dp-switch--on i {
  left: var(--primitive-spacing-2xl);
}

.tm-acct .ac-tn__by span {
  font-weight: var(--primitive-typography-weight-normal);
  color: var(--tm-muted);
}

.tm-acct > .scr.on {
  display: flex;
}

.tm-acct .ac-tabs .ac-tab {
  padding-left: var(--primitive-spacing-zero);
  padding-right: var(--primitive-spacing-zero);
}

.tm-acct .ac-tn:first-child {
  border-top: var(--primitive-border-width-none);
}

.tm-acct .dp-seclabel .dp-link {
  font-family: 'Atkinson Hyperlegible Next',system-ui,sans-serif;
  font-size: var(--app-text-14);
  font-weight: var(--primitive-typography-weight-bold);
  letter-spacing: var(--primitive-typography-letter-spacing-normal);
  text-transform: none;
  color: var(--semantic-color-interactive-primary-default);
}

.tm-acct .ac-thanks__item:first-child {
  border-top: var(--primitive-border-width-none);
  padding-top: var(--primitive-spacing-lg-xl);
}

.tm-acct .dp-seclabel--spread .dp-link {
  font-family: 'Atkinson Hyperlegible Next',system-ui,sans-serif;
  font-size: var(--app-text-14);
  font-weight: var(--primitive-typography-weight-bold);
  letter-spacing: var(--primitive-typography-letter-spacing-normal);
  text-transform: none;
  color: var(--semantic-color-interactive-primary-default);
}

.tm-acct .dp-seclabel--spread > .dp-link {
  font-family: 'Atkinson Hyperlegible Next',system-ui,sans-serif;
  font-size: var(--app-text-14);
  font-weight: var(--primitive-typography-weight-bold);
  letter-spacing: var(--primitive-typography-letter-spacing-normal);
  text-transform: none;
  color: var(--semantic-color-interactive-primary-default);
}

.tm-acct .ac-case__meta .canon {
  display: inline-flex;
  align-items: center;
  gap: var(--primitive-spacing-sm);
  color: var(--tm-gold-ink);
  font-weight: var(--primitive-typography-weight-bold);
}

.tm-acct .ac-where__r span:first-child {
  min-width: 0;
  flex: 1;
}

.tm-acct .ac-case__meta .canon svg {
  flex: none;
  color: var(--tm-gold);
}

.tm-acct .ac-rows .ac-row:first-child {
  border-top: var(--primitive-border-width-none);
}

.tm-acct .ac-record .ac-case:first-child {
  border-top: var(--primitive-border-width-none);
  padding-top: var(--primitive-spacing-xl);
}

.tm-acct .ac-group .ac-row:first-child {
  border-top: var(--primitive-border-width-none);
}

.tm-acct .ac-rows--ruled .ac-row:first-child {
  border-top: var(--primitive-border-width-thin) solid var(--tm-line-soft);
}

/* ── ax-opt ─────────────────────────────────────────────── */
.ax-opt {
  appearance: none;
  text-align: left;
  display: flex;
  align-items: center;
  gap: var(--primitive-spacing-lg);
  cursor: pointer;
  background: none;
  border: var(--primitive-border-width-none);
  padding: var(--primitive-spacing-lg-xl) var(--primitive-spacing-xs);
  border-bottom: var(--primitive-border-width-thin) solid var(--axhair);
}

.ax-opt::before {
  content: '';
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: var(--primitive-radius-sm);
  border: var(--primitive-border-width-regular) solid var(--tm-line);
  background: var(--semantic-color-contrast-light);
  background-position: center;
  background-repeat: no-repeat;
}

.ax-opt:last-child {
  border-bottom: var(--primitive-border-width-none);
}

.ax-opt .b {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--primitive-spacing-xs);
  min-width: 0;
}

.ax-opt .l {
  font-family: var(--axsans);
  font-weight: var(--primitive-typography-weight-bold);
  font-size: var(--app-text-16);
  color: var(--axink);
}

.ax-opt .s {
  font-family: var(--axsans);
  font-size: var(--app-text-12);
  color: var(--axink2);
}

.ax-opt .chev {
  font-size: var(--app-text-22);
  color: var(--component-provenance-new);
  line-height: var(--primitive-typography-line-height-none);
  flex: none;
  display: none;
}

.ax-opt[aria-pressed="true"]::before {
  border-color: var(--axtealdeep);
  background-color: var(--axtealdeep);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12.5 9.5 18 20 6.5'/></svg>");
}

.ax-opt:hover .l {
  color: var(--axtealdeep);
}

.ax-opt[aria-pressed="true"] .l {
  color: var(--axtealdeep);
}

/* ── ax-clarcta ─────────────────────────────────────────────── */
.ax-clarcta {
  display: block;
  width: calc(100% - (var(--tm-gutter) * 2));
  box-sizing: border-box;
  margin: var(--primitive-spacing-xl-2xl) var(--tm-gutter) var(--primitive-spacing-zero);
  min-height: 52px;
  border: var(--primitive-border-width-none);
  border-radius: var(--primitive-radius-full);
  background: var(--semantic-color-interactive-primary-default);
  color: var(--semantic-color-text-neutral-contrast);
  font-family: inherit;
  font-size: var(--app-text-16);
  font-weight: var(--primitive-typography-weight-bold);
  cursor: pointer;
}

.ax-clarcta[disabled] {
  opacity: .42;
  cursor: default;
}

/* ── ax-you ─────────────────────────────────────────────── */
.ax-you {
  font-family: var(--axsans);
  font-size: var(--app-text-16);
  line-height: var(--primitive-typography-line-height-snug);
  color: var(--axink);
  margin-top: var(--primitive-spacing-xl);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}

/* ── ax-stack ─────────────────────────────────────────────── */
.ax-stack {
  display: none;
}

.ax-stack.tm-c2:has(> .ax-cmnote:last-child) {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.ax-stack[data-when="community"] .ax-mentnote {
  display: none;
}

.ax-stack[data-when="c-resolve"] .ax-p {
  border-bottom: var(--primitive-border-width-thin) solid var(--axhair);
}

.ax-stack.tm-c2:has(> .ax-cmnote:last-child) > .ax-forming {
  margin-bottom: var(--primitive-spacing-5xl);
}

.ax-stack[data-when="c-resolve"] .ax-p:last-of-type {
  border-bottom: var(--primitive-border-width-none);
}

.ax-stack.tm-c2 > .ax-cmnote:last-child {
  margin-top: auto;
}

.ax-stack[data-when="community"] .ax-ments:has(.ax-ment:not(.ax-ment--add)) + .ax-mentnote {
  display: block;
}

/* ── insp ─────────────────────────────────────────────── */
.insp {
  display: none;
  max-width: 430px;
}

.insp__idle {
  color: #7E939A;
  font-size: 14px;
  line-height: 1.6;
}

.insp__cls {
  font-family: 'DM Mono',monospace;
  font-size: 18px;
  color: var(--semantic-color-text-neutral-contrast);
  margin: 0 0 var(--primitive-spacing-xs-sm);
  word-break: break-word;
  line-height: 1.3;
}

.insp__grade {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: 'DM Mono',monospace;
  font-size: 10px;
  letter-spacing: .11em;
  text-transform: uppercase;
  padding: 5px 9px;
  border-radius: 5px;
  margin: var(--primitive-spacing-sm-md) 0 0;
}

.insp__meta {
  font-size: 12px;
  color: #5E7681;
  margin: 9px 0 0;
  font-family: 'DM Mono',monospace;
}

.insp__sec {
  margin: var(--primitive-spacing-2xl) 0 0;
}

.insp__k {
  font-family: 'DM Mono',monospace;
  font-size: 10px;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: #57C7C4;
  margin: 0 0 9px;
  padding-bottom: 7px;
  border-bottom: 1px solid #1B2E37;
}

.insp__alias {
  background: #12222B;
  border: 1px solid #1F3742;
  border-radius: 9px;
  padding: 13px var(--primitive-spacing-lg-xl);
  margin: var(--primitive-spacing-xl) 0 0;
}

.insp__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.insp__chip {
  font-family: 'DM Mono',monospace;
  font-size: 10px;
  padding: var(--primitive-spacing-sm) 7px;
  border-radius: 5px;
  background: #152631;
  color: #8FA9AF;
  border: 1px solid #1B2E37;
}

.insp__code {
  font-family: 'DM Mono',monospace;
  font-size: 10px;
  line-height: 1.55;
  color: #9FB6BA;
  background: #0A151B;
  border: 1px solid #16262E;
  border-radius: 8px;
  padding: 11px var(--primitive-spacing-lg);
  margin: 0 0 var(--primitive-spacing-md);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 230px;
  overflow: auto;
}

.insp__tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.insp__bar {
  display: flex;
  height: 7px;
  border-radius: 99px;
  overflow: hidden;
  margin: var(--primitive-spacing-xs) 0 var(--primitive-spacing-lg-xl);
  background: #16262E;
}

.insp__force {
  float: right;
  font-family: 'DM Mono',monospace;
  font-size: 10px;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: #57C7C4;
}

.insp__inst {
  font-family: 'DM Mono',monospace;
  font-size: 12px;
  line-height: 1.4;
  color: #5E7681;
  margin: 0 0 var(--primitive-spacing-md);
}

.insp__code--on {
  border-color: #0F7A7C;
  background: #0C1D22;
  box-shadow: inset 3px 0 0 0 #57C7C4;
}

.insp__code--dead {
  border-color: #3A2A33;
}

.insp__d--dead {
  text-decoration: line-through;
  text-decoration-color: #B8365A;
  opacity: .45;
}

.insp__cls b {
  color: #F06FB4;
  font-weight: var(--primitive-typography-weight-normal);
}

.insp__alias a {
  color: #57C7C4;
  font-size: 12px;
  text-decoration: none;
  display: inline-block;
  margin-top: 9px;
}

.insp__tbl td {
  padding: var(--primitive-spacing-sm) 0;
  border-bottom: 1px solid #16262E;
  color: #8FA9AF;
  font-family: 'DM Mono',monospace;
  font-size: 10px;
  vertical-align: top;
}

.insp__bar i {
  display: block;
  height: 100%;
}

.insp__inst b {
  color: #8FD8D6;
  font-weight: var(--primitive-typography-weight-normal);
}

.insp__k.warn {
  color: #E0B667;
}

.insp__alias .l {
  font-family: 'DM Mono',monospace;
  font-size: 10px;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: #E0B667;
  margin: 0 0 var(--primitive-spacing-sm-md);
}

.insp__alias .n {
  font-family: 'DM Mono',monospace;
  font-size: 14px;
  color: #8FD8D6;
  margin: 0;
}

.insp__chip.on {
  background: #0F7A7C;
  color: var(--semantic-color-text-neutral-contrast);
  border-color: #0F7A7C;
}

.insp__code .s {
  color: #F06FB4;
}

.insp__code .v {
  color: #8FD8D6;
}

.insp__code--dead .insp__force {
  color: #B8365A;
}

.insp p.t {
  font-size: 14px;
  line-height: 1.62;
  color: #A9BEC2;
  margin: 0 0 11px;
}

.insp__alias a:hover {
  text-decoration: underline;
}

.insp__tbl td:last-child {
  text-align: right;
  color: #D7E5E7;
  white-space: nowrap;
  padding-left: var(--primitive-spacing-md-lg);
}

.insp p.t b {
  color: #E2EEF0;
  font-weight: var(--primitive-typography-weight-semibold);
}

/* ── ax-topicrow ─────────────────────────────────────────────── */
.ax-topicrow {
  display: flex;
  align-items: center;
  gap: var(--primitive-spacing-md);
  margin-bottom: var(--primitive-spacing-md);
  margin-top: var(--primitive-spacing-2xl);
}

.ax-topicrow .ax-flabel {
  margin: var(--primitive-spacing-zero);
  margin-top: var(--primitive-spacing-zero);
}

/* ═══ RESPONSIVE ═══ */

@media (prefers-reduced-motion:reduce) {
  .tm-trailwrap summary .cv {
      transition: none;
  }
}

@media (prefers-reduced-motion:no-preference) {
  .ax[data-ax="attach"] .ax-attach-sheet {
      animation: axsheetup .28s cubic-bezier(.22,.61,.36,1);
  }
  
  .ax[data-ax="attachios"] .ax-iossheet {
      animation: axsheetup .28s cubic-bezier(.22,.61,.36,1);
  }
}

@media (prefers-reduced-motion:reduce) {
  .cx--sending .cx__mk {
      animation: none;
      opacity: 1;
  }
}

@media (prefers-reduced-motion:reduce) {
  .cx--sending .cx__mk {
      animation: none;
      opacity: 1;
  }
}

@media (prefers-reduced-motion:reduce) {
  .tm-sw::after {
      transition: none;
  }
}

@media (prefers-reduced-motion:reduce) {
  .ax-ment--new {
      animation: none;
  }
}

@media (prefers-reduced-motion:no-preference) {
  .tm-al[data-goto] {
      transition: background .12s ease-out;
  }
  
  .dp-actionrow[data-goto] {
      transition: background .12s ease-out;
  }
}

@media (prefers-reduced-motion:reduce) {
  .dp-seclabel .reddot {
      animation: none;
      opacity: 1;
  }
  
  .tm-ack .dot {
      animation: none;
      opacity: 1;
  }
  
  .ax-forming .cur {
      animation: none;
      opacity: 1;
  }
  
  .ax-pulse {
      animation: none;
      opacity: 1;
      transform: none;
  }
  
  .ax-sline.on:not(.done) .dot {
      animation: none;
      opacity: 1;
      transform: none;
  }
  
  .ax-wave i {
      animation: none;
      transform: none;
  }
  
  .ax-attach__spin {
      animation: none;
  }
  
  .ax-vlabel i {
      animation: none;
  }
  
  .ax-ment--new {
      animation: none;
      opacity: 1;
      transform: none;
  }
  
  .ax[data-ax="coldattach"] .ax-attach-sheet {
      animation: none;
      transform: none;
  }
}

  /* ---------- margin_seams.py: scoped overrides ----------
     A + B beats A's own margin-top only when B is literally
     preceded by A. The base rule for A is untouched, so A's
     margin-top still applies when it opens a list. ---------- */
  .ax-closeq + .ax-forming { margin-top: var(--primitive-spacing-zero); }
  .tm-filt.tm-filt--saved + .band { margin-top: var(--primitive-spacing-zero); }
  .dp-note__body { display:flex;flex-direction:column;gap:var(--primitive-spacing-sm-md); }
  .tmx .dp-note__body { display:flex;flex-direction:column;gap:var(--primitive-spacing-sm-md); }

  /* ---------- margin_seams_has.py: :has() scoped overrides ----------
     A:has(+ B) beats A's own margin-bottom only when B is literally
     the next element. The base rule for A is untouched, so A's
     margin-bottom still applies against every other follower. ---------- */
  .dp-ledger:has(+ .dp-impact__note) { margin-bottom: 0; }
  .tm-seg:has(+ .band) { margin-bottom: 0; }
  .ax-flabel--first:has(+ .ax-narrowfield) { margin-bottom: 0; }
  .ax-evitem:has(+ .ax-evsec) { margin-bottom: 0; }
/*INSPECT*/
/* ── INSPECT ───────────────────────────────────────────────────────────────
   All of this is inert until <body class="inspecting">, except the switch. v4
   with INSPECT off must render byte-for-byte as v3 did. */
.insp-sw{display:flex;align-items:center;gap:10px;width:100%;appearance:none;
  background:#122430;border:1px solid #1F3742;color:#B9CBD0;font-family:inherit;
  font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:11px 12px;border-radius:10px;cursor:pointer;min-height:44px;margin:2px 0 18px;}
.insp-sw:hover{border-color:#2C505E;color:#fff;}
.insp-sw__track{margin-left:auto;width:34px;height:19px;border-radius:99px;background:#22404D;
  position:relative;flex:none;transition:background .16s;}
.insp-sw__track::after{content:"";position:absolute;top:2.5px;left:2.5px;width:14px;height:14px;
  border-radius:50%;background:#7E9AA3;transition:transform .16s,background .16s;}
body.inspecting .insp-sw{border-color:#C2185B;color:#fff;background:#1B1520;}
body.inspecting .insp-sw__track{background:#C2185B;}
body.inspecting .insp-sw__track::after{transform:translateX(15px);background:#fff;}
.insp-sw__key{font-size:10px;font-weight:400;letter-spacing:.04em;color:#5E7681;text-transform:none;}

/* the outline. `outline` and not `border` — it does not participate in layout,
   so nothing on the phone moves when a component lights up. */
body.inspecting .aphone *{cursor:crosshair;}
.insp-hit{outline:1.5px solid #E91E8C !important;outline-offset:1px;
  background:rgba(233,30,140,.07) !important;}
.insp-hit-part{outline:1px dashed rgba(233,30,140,.5) !important;outline-offset:1px;}

/* frozen: a click pinned the read. A different colour (not a variant of the
   same pink) so "this is locked" reads at a glance, not just on close look —
   and the cursor drops the crosshair since clicking again now means
   "unpin," not "inspect something else." */
body.insp-frozen .aphone *{cursor:pointer;}
body.insp-frozen .insp-hit{outline-color:#00E5A0 !important;background:rgba(0,229,160,.09) !important;}
/* One click's worth of hit-testing swallowed at the CSS level — see the JS
   wiring for why this has to happen here and not via preventDefault(). */
body.insp-suppress .aphone *{pointer-events:none !important;}
.insp__pin{display:inline-flex;align-items:center;gap:6px;font-family:'DM Mono',monospace;font-size:10px;
  font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#00E5A0;background:rgba(0,229,160,.12);
  border:1px solid rgba(0,229,160,.35);border-radius:5px;padding:4px 9px;margin:0 0 12px;}

/* the pane takes over the notes column; the notes are hidden, never removed */
body.inspecting .notes > [data-n]{display:none !important;}
/* while inspecting, the pane is a reading surface: it sticks and scrolls on its
   own, so moving the cursor off the phone to read does not scroll the phone away */
body.inspecting .notes{position:sticky;top:24px;max-height:calc(100vh - 60px);overflow:auto;
  scrollbar-width:thin;scrollbar-color:#22404D transparent;}
.insp{display:none;max-width:430px;}
body.inspecting .insp{display:block;}
.insp__idle{color:#7E939A;font-size:13px;line-height:1.6;}
.insp__cls{font-family:'DM Mono',monospace;font-size:19px;color:#fff;margin:0 0 3px;
  word-break:break-word;line-height:1.3;}
.insp__cls b{color:#F06FB4;font-weight:400;}
.insp__grade{display:inline-flex;align-items:center;gap:7px;font-family:'DM Mono',monospace;
  font-size:10px;letter-spacing:.11em;text-transform:uppercase;padding:5px 9px;border-radius:5px;
  margin:6px 0 0;}
.g-promoted{background:#0F7A7C;color:#fff;}
.g-core    {background:#12414A;color:#8FD8D6;}
.g-mobile  {background:#12414A;color:#8FD8D6;}
.g-screen  {background:#3A2A14;color:#E0B667;}
.g-legacy  {background:#3A1420;color:#F0879F;}
.g-chrome  {background:#1A2830;color:#6C868F;}
.insp__meta{font-size:11.5px;color:#5E7681;margin:9px 0 0;font-family:'DM Mono',monospace;}
.insp__sec{margin:24px 0 0;}
.insp__k{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  color:#57C7C4;margin:0 0 9px;padding-bottom:7px;border-bottom:1px solid #1B2E37;}
.insp__k.warn{color:#E0B667;}
.insp p.t{font-size:13px;line-height:1.62;color:#A9BEC2;margin:0 0 11px;}
.insp p.t b{color:#E2EEF0;font-weight:600;}
.insp__alias{background:#12222B;border:1px solid #1F3742;border-radius:9px;padding:13px 14px;margin:16px 0 0;}
.insp__alias .l{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.11em;
  text-transform:uppercase;color:#E0B667;margin:0 0 6px;}
.insp__alias .n{font-family:'DM Mono',monospace;font-size:14px;color:#8FD8D6;margin:0;}
.insp__alias a{color:#57C7C4;font-size:12px;text-decoration:none;display:inline-block;margin-top:9px;}
.insp__alias a:hover{text-decoration:underline;}
.insp__chips{display:flex;flex-wrap:wrap;gap:5px;}
.insp__chip{font-family:'DM Mono',monospace;font-size:10.5px;padding:4px 7px;border-radius:5px;
  background:#152631;color:#8FA9AF;border:1px solid #1B2E37;}
.insp__chip.on{background:#0F7A7C;color:#fff;border-color:#0F7A7C;}
.insp__code{font-family:'DM Mono',monospace;font-size:10.7px;line-height:1.55;color:#9FB6BA;
  background:#0A151B;border:1px solid #16262E;border-radius:8px;padding:11px 12px;margin:0 0 8px;
  white-space:pre-wrap;word-break:break-word;max-height:230px;overflow:auto;}
.insp__code .s{color:#F06FB4;}
.insp__code .v{color:#8FD8D6;}
.insp__tbl{width:100%;border-collapse:collapse;font-size:11.5px;}
.insp__tbl td{padding:4px 0;border-bottom:1px solid #16262E;color:#8FA9AF;
  font-family:'DM Mono',monospace;font-size:10.6px;vertical-align:top;}
.insp__tbl td:last-child{text-align:right;color:#D7E5E7;white-space:nowrap;padding-left:10px;}
.insp__bar{display:flex;height:7px;border-radius:99px;overflow:hidden;margin:2px 0 14px;background:#16262E;}
.insp__bar i{display:block;height:100%;}
/*/INSPECT*//*TUNE*/
/* ── TUNE ──────────────────────────────────────────────────────────────────
   Inert until <body class="tuning">, except the switch. With TUNE off the
   baseline renders exactly as it did before this patch. Gold, so a screenshot
   never leaves you wondering whether you were looking at INSPECT's magenta. */
.tune-sw{display:flex;align-items:center;gap:10px;width:100%;appearance:none;
  background:#122430;border:1px solid #1F3742;color:#B9CBD0;font-family:inherit;
  font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:11px 12px;border-radius:10px;cursor:pointer;min-height:44px;margin:-12px 0 18px;}
.tune-sw:hover{border-color:#2C505E;color:#fff;}
.tune-sw__key{font-size:10px;font-weight:400;letter-spacing:.04em;color:#5E7681;text-transform:none;}
.tune-sw__track{margin-left:auto;width:34px;height:19px;border-radius:99px;background:#22404D;
  position:relative;flex:none;transition:background .16s;}
.tune-sw__track::after{content:"";position:absolute;top:2.5px;left:2.5px;width:14px;height:14px;
  border-radius:50%;background:#7E9AA3;transition:transform .16s,background .16s;}
body.tuning .tune-sw{border-color:#B8862B;color:#fff;background:#1F1A12;}
body.tuning .tune-sw__track{background:#C9922E;}
body.tuning .tune-sw__track::after{transform:translateX(15px);background:#fff;}

.tune{display:none;max-width:430px;}
body.tuning .tune{display:block;}
body.tuning .notes>[data-n]{display:none;}
body.tuning .notes{position:sticky;top:24px;max-height:calc(100vh - 60px);overflow:auto;
  scrollbar-width:thin;scrollbar-color:#22404D transparent;}
body.tuning .aphone *{cursor:crosshair;}
body.tune-suppress .aphone *{pointer-events:none !important;}
.tune-hit{outline:1.5px dashed rgba(224,166,58,.75);outline-offset:1px;}
.tune-sel{outline:2px solid #E0A63A !important;outline-offset:1px;background:rgba(224,166,58,.10);}

.tune__idle{color:#7E939A;font-size:14px;line-height:1.6;}
.tune__cls{font-family:'DM Mono',monospace;font-size:18px;color:#fff;margin:0 0 6px;
  word-break:break-word;line-height:1.3;}
.tune__meta{font-size:12px;color:#5E7681;margin:6px 0 0;font-family:'DM Mono',monospace;line-height:1.55;}
.tune__meta b{color:#C9D8DB;font-weight:400;}

/* scope switch — element vs token. The distinction is the tool: one nudges a
   selector, the other re-points a semantic token and moves everything on it. */
.tune__scope{display:flex;gap:0;margin:16px 0 4px;border:1px solid #1F3742;border-radius:8px;overflow:hidden;}
.tune__scope button{flex:1;appearance:none;background:transparent;border:0;color:#7E939A;
  font-family:'DM Mono',monospace;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  padding:9px 6px;cursor:pointer;min-height:36px;}
.tune__scope button+button{border-left:1px solid #1F3742;}
.tune__scope button.on{background:#C9922E;color:#241B08;font-weight:700;}
.tune__scopenote{font-size:11px;color:#5E7681;line-height:1.55;margin:7px 0 0;}

.tune__k{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:#5E7681;margin:22px 0 2px;}
.tune__k.warn{color:#C9922E;}

.tune__row{display:grid;grid-template-columns:1fr auto auto;gap:2px 10px;align-items:center;
  padding:9px 0 10px;border-top:1px solid #162A33;}
.tune__row.on{background:rgba(224,166,58,.06);box-shadow:inset 2px 0 0 #C9922E;
  padding-left:9px;margin-left:-9px;}
.tune__prop{font-family:'DM Mono',monospace;font-size:12.5px;color:#C9D8DB;cursor:pointer;}
.tune__now{font-family:'DM Mono',monospace;font-size:12.5px;color:#fff;text-align:right;
  white-space:nowrap;}
.tune__step{display:flex;gap:4px;}
.tune__step button{width:27px;height:27px;appearance:none;background:#16303B;border:1px solid #22404D;
  color:#C9D8DB;border-radius:6px;cursor:pointer;font-size:14px;line-height:1;padding:0;
  display:flex;align-items:center;justify-content:center;font-family:'DM Mono',monospace;}
.tune__step button:hover:not(:disabled){background:#C9922E;border-color:#C9922E;color:#241B08;}
.tune__step button:disabled{opacity:.32;cursor:default;}

.tune__chain{grid-column:1/-1;font-family:'DM Mono',monospace;font-size:10.5px;color:#5E7681;
  line-height:1.65;word-break:break-word;margin:3px 0 0;}
.tune__chain .t3{color:#8E7CC3;}   /* component / pattern tier */
.tune__chain .t2{color:#57C7C4;}   /* semantic tier            */
.tune__chain .t1{color:#C9922E;}   /* primitive tier           */
.tune__chain .ar{color:#3A5560;padding:0 3px;}
.tune__chain .src{color:#4A6470;}
.tune__rung{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:3px;margin:6px 0 0;}
.tune__rung span{font-family:'DM Mono',monospace;font-size:9.5px;color:#4A6470;padding:2px 5px;
  border:1px solid #16303B;border-radius:4px;}
.tune__rung span.on{color:#241B08;background:#C9922E;border-color:#C9922E;font-weight:700;}
.tune__rung span.adj{color:#93A9AF;border-color:#2C505E;}
.tune__hard{grid-column:1/-1;font-size:11px;color:#C9922E;line-height:1.55;margin:5px 0 0;}
.tune__hard button{appearance:none;background:transparent;border:1px solid #6B5219;color:#C9922E;
  font-family:'DM Mono',monospace;font-size:10px;padding:3px 7px;border-radius:5px;cursor:pointer;
  margin-left:6px;}
.tune__hard button:hover{background:#C9922E;color:#241B08;border-color:#C9922E;}
.tune__diag{grid-column:1/-1;font-size:11px;color:#7E939A;line-height:1.55;margin:6px 0 0;
  font-family:'DM Mono',monospace;}
.tune__diag b{color:#E0A63A;font-weight:400;}
.tune__diag i{color:#B8365A;font-style:normal;}

.tune__ramp{margin:6px 0 0;}
.tune__ramprow{display:flex;gap:8px;align-items:center;margin:3px 0;}
.tune__ramprow span{flex:1;font-family:'DM Mono',monospace;font-size:11px;color:#7E939A;}
.tune__ramprow input{width:92px;background:#0E1B22;color:#E7EFEF;border:1px solid #1F3742;
  padding:4px 7px;font-family:'DM Mono',monospace;font-size:11px;text-align:right;border-radius:5px;}
.tune__ramprow input:focus{outline:1px solid #C9922E;border-color:#C9922E;}

.tune__log{background:#0E1B22;border:1px solid #162A33;border-radius:7px;padding:9px 10px;
  font-family:'DM Mono',monospace;font-size:10.5px;color:#8AA3A8;line-height:1.7;
  max-height:190px;overflow:auto;white-space:pre-wrap;word-break:break-word;margin:6px 0 0;}
.tune__btns{display:flex;gap:7px;margin:11px 0 0;}
.tune__btns button{flex:1;appearance:none;border-radius:7px;padding:9px 10px;cursor:pointer;
  font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.05em;min-height:38px;}
.tune__btns .go{background:#C9922E;border:0;color:#241B08;font-weight:700;}
.tune__btns .gh{background:transparent;border:1px solid #22404D;color:#B9CBD0;}
.tune__btns .gh:hover{border-color:#2C505E;color:#fff;}
.tune__out{width:100%;height:130px;background:#0E1B22;color:#B9CBD0;border:1px solid #1F3742;
  border-radius:7px;padding:8px;font-family:'DM Mono',monospace;font-size:10px;margin:8px 0 0;
  resize:vertical;}

/* ── the head ──────────────────────────────────────────────────────────────
   Built once and never re-rendered. The gutter slider lives here because a
   control you drag cannot survive its own container being replaced mid-drag,
   and the save bar lives here because it has to stay legible while you work
   through 85 screens — both are global, neither belongs to a selection. */
.tune__head{border-bottom:1px solid #162A33;padding:0 0 15px;margin:0 0 4px;}
.tune-sw__n{margin-left:auto;font-family:'DM Mono',monospace;font-size:10px;font-weight:700;
  letter-spacing:0;background:#C9922E;color:#241B08;border-radius:99px;padding:1px 6px;}
.tune-sw__n[hidden]{display:none;}
body.tuning .tune-sw__n{background:#fff;color:#241B08;}
.tune-sw__n+.tune-sw__key{margin-left:0;}

.tune__gut{margin:0 0 4px;}
.tune__gutrow{display:flex;align-items:center;gap:10px;margin:8px 0 0;}
.tune__gutrow input[type=range]{flex:1;accent-color:#C9922E;height:22px;cursor:pointer;}
.tune__gutrow input[type=number]{width:62px;background:#0E1B22;color:#fff;border:1px solid #1F3742;
  padding:5px 7px;font-family:'DM Mono',monospace;font-size:12px;text-align:right;border-radius:5px;}
.tune__gutrow input[type=number]:focus{outline:1px solid #C9922E;border-color:#C9922E;}
.tune__gutrow button{appearance:none;background:#16303B;border:1px solid #22404D;color:#C9D8DB;
  border-radius:6px;width:27px;height:27px;cursor:pointer;font-family:'DM Mono',monospace;
  font-size:11px;padding:0;flex:none;}
.tune__gutrow button:hover{background:#C9922E;border-color:#C9922E;color:#241B08;}
.tune__gutrep{font-size:11px;color:#5E7681;line-height:1.55;margin:7px 0 0;
  font-family:'DM Mono',monospace;}
.tune__gutrep b{color:#E0A63A;font-weight:400;}
.tune__gutrep i{color:#B8365A;font-style:normal;}

/* The sources the slider drives. Listed rather than hidden, because one number
   everywhere flattens differences that may have been deliberate — and a row
   you can see is a row you can switch off. */
.tune__src{margin:8px 0 0;border:1px solid #162A33;border-radius:7px;overflow:hidden;}
.tune__srcrow{display:flex;align-items:center;gap:7px;padding:5px 8px;cursor:pointer;
  font-family:'DM Mono',monospace;font-size:10.5px;color:#7E939A;
  border-top:1px solid #142530;}
.tune__srcrow:first-child{border-top:0;}
.tune__srcrow:hover{background:rgba(224,166,58,.05);}
.tune__srcrow.here{color:#C9D8DB;background:rgba(224,166,58,.07);}
.tune__srcrow input{accent-color:#C9922E;margin:0;flex:none;}
.tune__srcrow .l{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tune__srcrow .l em{color:#4A6470;font-style:normal;}
.tune__srcrow .v{color:#E0A63A;flex:none;}
.tune__srcrow .n{color:#3A5560;flex:none;min-width:44px;text-align:right;}

.tune__save{display:flex;flex-wrap:wrap;gap:5px;margin:9px 0 0;}
.tune__save button{appearance:none;border-radius:6px;padding:7px 9px;cursor:pointer;
  font-family:'DM Mono',monospace;font-size:10.5px;letter-spacing:.03em;min-height:32px;
  background:transparent;border:1px solid #22404D;color:#B9CBD0;}
.tune__save button:hover{border-color:#C9922E;color:#fff;}
.tune__save button.go{background:#C9922E;border-color:#C9922E;color:#241B08;font-weight:700;}
.tune__save button.warn:hover{border-color:#B8365A;color:#FF8FB0;}
.tune__count{font-family:'DM Mono',monospace;font-size:11px;color:#7E939A;margin:0;line-height:1.6;}
.tune__count b{color:#E0A63A;font-weight:400;}
.tune__count .ok{color:#57C7C4;}
/*/TUNE*/


/* ── the ask wash, named ──────────────────────────────────────────
   Was inline in .aphone:has(.ax[data-ax="rest"]), which is a STATE, not a
   flow — hence the gap at CO-03/CO-04 and the absence on the choice and
   done templates. Same value, so nothing already wearing it moves. */
:root {
  --tm-wash-ask: radial-gradient(115% 42% at 2% -8%,   rgba(128,43,78,.14)  0%, rgba(128,43,78,0)  64%),
    radial-gradient(86%  36% at 108% 2%,  rgba(0,149,152,.11)  0%, rgba(0,149,152,0)  60%),
    radial-gradient(120% 40% at 92% 62%,  rgba(128,43,78,.075) 0%, rgba(128,43,78,0)  62%),
    radial-gradient(110% 36% at 0% 74%,   rgba(168,134,63,.07) 0%, rgba(168,134,63,0) 60%),
    linear-gradient(180deg, #FFF6FA 0%, #FEFAFB 30%, #FAFDFD 62%, var(--semantic-color-contrast-light) 88%);
  --tm-wash-done: radial-gradient(115% 42% at 2% -8%,   rgba(0,149,152,.12)   0%, rgba(0,149,152,0)   64%),
    radial-gradient(86%  36% at 108% 2%,  rgba(26,151,209,.075) 0%, rgba(26,151,209,0) 60%),
    radial-gradient(120% 40% at 92% 62%,  rgba(0,149,152,.06)   0%, rgba(0,149,152,0)  62%),
    radial-gradient(110% 36% at 0% 74%,   rgba(168,134,63,.05)  0%, rgba(168,134,63,0) 60%),
    linear-gradient(180deg, #F2FAFA 0%, #F7FBFB 30%, #FBFDFD 62%, var(--semantic-color-contrast-light) 88%);
}

.scr[data-s="st-attach"] .aphone,
.scr[data-s="st-attached"] .aphone,
.scr[data-s="compose-community"] .aphone,
.scr[data-s="st-topic"] .aphone {
  background: var(--tm-wash-ask);
}

.scr[data-s="st-posted"] .aphone,
.scr[data-s="st-sent"] .aphone,
.scr[data-s="st-confd"] .aphone,
.scr[data-s="st-resolve"] .aphone,
.scr[data-s="st-share"] .aphone {
  background: var(--tm-wash-done);
}

/* the wash is on .aphone, so the body above it must not be opaque */
.scr[data-s="st-attach"] .abody,
.scr[data-s="st-attached"] .abody,
.scr[data-s="compose-community"] .abody,
.scr[data-s="st-topic"] .abody,
.scr[data-s="st-posted"] .abody,
.scr[data-s="st-sent"] .abody,
.scr[data-s="st-confd"] .abody,
.scr[data-s="st-resolve"] .abody,
.scr[data-s="st-share"] .abody {
  background: transparent;
}



/* ── topics: pick many ────────────────────────────────────────────
   .ax-tp inherits .ax-p's checkbox so CO-09 and CO-11 read alike. The
   tick sits in every row and is transparent until the row is on —
   an EMPTY BOX has to be visible or nothing says "you may pick more
   than one", which is the whole change. */
.ax-tp .ck {
  width: 22px;
  height: 22px;
  border-radius: var(--primitive-radius-sm);
  border: var(--primitive-border-width-regular) solid var(--tm-line);
  color: transparent;
}

.ax-tp.on .ck {
  background: var(--axtealdeep);
  border-color: var(--axtealdeep);
  color: var(--semantic-color-text-neutral-contrast);
}

/* the title and its badge share a line; the subtitle stays under both */
.tt-row {
  display: flex;
  align-items: center;
  gap: var(--primitive-spacing-md);
  flex-wrap: wrap;
}

/* the running total belongs above the button it is the cost of, so it
   sits in the foot — where .dp-reach's own gutter margin is wrong.

   Set as a caps label rather than a sentence: it is a readout, and the
   pack already says every standing label that way (WHAT YOU WROTE, TO,
   5 THINGS NEED YOU TODAY) in mono with --app-tracking-caps. The icon
   comes out — centred type does not need a mark to anchor it, and the
   glyph was doing no work the word "clinicians" was not already doing. */
.dp-sheet__foot .dp-reach {
  margin: var(--primitive-spacing-zero) var(--primitive-spacing-zero)
          var(--primitive-spacing-md);
  justify-content: center;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: var(--app-tracking-caps);
}

/*TUNED*/

/* ── TUNED ─────────────────────────────────────────────────────────────
   Written by apply_tune_changes.py from a TUNE pass.
   Change set exported 2026-08-19 20:24.
   5 decision(s) across 1 screen(s).
   Delete this block to restore the baseline exactly. ─────────────── */

/* seen on: home */
.aappbar {
  padding-left: 20px !important;
  padding-right: 20px !important;
}

/* seen on: home */
.ax-comp {
  padding-left: 20px !important;
  padding-right: 20px !important;
}

/* seen on: home */
.dp-greet__meta {
  margin-top: var(--primitive-spacing-sm-md) !important;
}

/* seen on: home */
.lock__notes {
  padding-left: 20px !important;
  padding-right: 20px !important;
}

/*/TUNED*/
/*FTU-FOLD:begin*/
/* ═══════════════════════════════════════════════════════════════════
   THE FTU FOLD — the design-system half of the first-time-user pack.
   Written by generators/apply_ftu_fold_v6.py. Do not hand-edit: run
   the script again and it replaces everything between these markers.
   Source of truth is generators/ftu/ftu_css.py and ftu_runtime.py.
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   FTU COMPONENT TOKENS — the values the primitive ramp has no step for.
   Namespace and layering follow v6's own --component-* tier. Fold these into
   the DS token layer with the families below.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  /* Control heights. 52 matches dp-cta's min-height, so a field and the button
     under it are the same object at rest. 48 is the search variant — shorter,
     because a search box is not a thing you fill in. */
  --component-ftu-control-height: 52px;
  --component-ftu-control-height-search: 48px;

  /* A six-digit cell wants to be taller than a field and narrower. */

  /* The whole-screen state glyph. Large enough to read as a state, small enough
     not to read as an illustration. */
  --component-ftu-hero-icon-size: 76px;

  /* Marks and boxes. Each sits below the 44pt floor on purpose and takes its
     target from an ::after overlay — the row is the target, not the box. */
  --component-ftu-consent-box-size: 22px;
  --component-ftu-rules-mark-size: 16px;
  --component-ftu-choice-radio-size: 20px;
  --component-ftu-grade-dot-size: 9px;
  --component-ftu-mark-border-width: 1.6px;

  /* Row heights that are taller than the 44pt floor because they carry two
     lines of type, not because the target needs it. */
  --component-ftu-row-height: 60px;

  /* The alert-tier key column. Sized to the longest of Now / Today / Whenever
     so the three descriptions share one left edge. */
  --component-ftu-tier-key-width: 82px;

  /* The welcome illustration well. Fixed so the three panes' titles land on the
     same baseline and the dots do not move between them. */
  --component-ftu-art-height: 190px;

  /* A numeric key is wider than a letter key and there are only three columns. */
  --component-ftu-keypad-key-width: 88px;

  /* The text caret. */
  --component-ftu-caret-width: 1.5px;
  --component-ftu-caret-height: 20px;

  /* The foot's lift. Same construction as v6's own --component-*-shadow tokens:
     an rgba literal inside a declared shadow token, not inside a rule. */
  --component-ftu-foot-shadow:
      0 -1px 0 var(--tm-line-soft),
      0 -8px 18px -14px rgba(3,46,66,.18);
  --component-ftu-focus-ring: 0 0 0 3px var(--semantic-color-surface-primary-subtle);
  /* The OTP focus ring goes round the ACTIVE CELL, not the group. Offset so it
     sits clear of the cell's own border and reads as a ring rather than a
     second border. */
  --component-ftu-focus-ring-width: 3px;
  /* the fold, softened — a cut line reads as `more below`, not as broken */
  --component-ftu-scroll-fade: linear-gradient(to bottom,
      var(--semantic-color-contrast-light) calc(100% - var(--component-ftu-scroll-fade-h)),
      transparent 100%);
  --component-ftu-scroll-fade-h: 20px;
  --component-ftu-focus-ring-offset: 2px;

  /* No --component-ftu-todo-*. They were the cream surface behind the retired
     dp-consent--todo, and the only two literal hexes left in the FTU block. */

  /* ── the atmosphere ───────────────────────────────────────────────────────
     Three backgrounds, ready to lift into the DS whole. Structure is taken from
     v6's own Alerts screens (AL-01/02/03), which is the one place in the product
     that already does this well — and the three things that make it work are not
     obvious from looking at it:

       · the ellipses are WIDE AND SHALLOW — 118%x38%, not circles. A round glow
         reads as a blob; a shallow one reads as light lying across the canvas.
       · the centres sit OUTSIDE the box — at 4% -6%, at 104% 1% — so only the
         falloff is ever on screen.
       · there is a BASE LINEAR WASH underneath, white to surface-wash. Without
         it the space between the glows is dead white and the whole thing reads
         as two stains rather than an atmosphere.

     Only the three logo colours appear, straight off the vector source in
     04 Brand Assets/TM_X_SVG/. v6's Alerts also pulls --tm-state blue as its
     second source; that is deliberately NOT here, because blue means progress
     in this pack now and a blue glow would argue with the bar.

     Composed as whole background-image values so a consumer writes
     `background-image: var(--component-ftu-atmos-edge)` and nothing else. */

  /* the sources */
  --component-ftu-atmos-warm: var(--semantic-color-interactive-secondary-default);
  --component-ftu-atmos-cool: var(--tm-teal);
  --component-ftu-atmos-pale: var(--primitive-color-brand-primary-300);

  /* the strength scale. Four steps, and they are the legibility budget rather
     than a style: --tm-faint clears the 4.5:1 floor on plain white by only
     0.36, so it is what breaks first. Every step below was measured with
     ftu_contrast.mjs. Do not raise them without re-running it. */
  --component-ftu-atmos-1: 11%;
  --component-ftu-atmos-2: 9%;
  --component-ftu-atmos-3: 7%;
  --component-ftu-atmos-4: 5%;

  /* the base wash, and where it lands */
  --component-ftu-atmos-wash: linear-gradient(var(--semantic-color-contrast-light) 0%,
                                              var(--semantic-color-surface-wash) 52%);

  /* The connection lockup's footprint. Fixed, because the three states have to
     occupy the same space — if the block grows when it resolves, the wordmark
     above it jumps, and an arrival screen that moves reads as a broken one. */
  --component-ftu-conn-height: 104px;
  --component-ftu-conn-bar-width: 176px;
  --component-ftu-conn-bar-height: 4px;
  --component-ftu-conn-bar-run: 42%;

  /* The switch. v6 declares .dp-switch at these sizes but scopes it to .tm-acct,
     so it has never rendered outside an account screen. Same geometry, tokenised
     — fold the scope off in v7 and this block goes. */
  --component-ftu-switch-width: 48px;
  --component-ftu-switch-height: 28px;
  --component-ftu-switch-knob: 20px;

  /* Two side-by-side secondary buttons wrap below this. Set at the width where
     the longer of the two English labels still fits on one line. */
  --component-ftu-btnrow-basis: 150px;

  /* ── the subtle ink, for a surface that is not white ──────────────────────
     --tm-faint is neutral-gray-500 and clears the 4.5:1 floor on plain white by
     0.36. That is enough for white and for nothing else: on the atmosphere's
     wash (#F0F7F7, luminance .918 where .936 is needed) every hint, quiet value
     and foot note fell to 4.2–4.49. Measured — 35 of them.

     One step down the same neutral ramp fixes it without inventing a value:
     gray-600 is 7.43:1 on white and 6.82:1 on the wash. Declared as its own
     token rather than by moving --tm-faint, because --tm-faint is still exactly
     right on the white surfaces this pack does not own — a sheet, a picker, a
     v6 screen. This one means: the subtle ink, WHEN THE SURFACE IS TINTED.

     → For the DS: lift as the tinted-surface sibling of
       --semantic-color-text-neutral-subtle. It needs a home in the semantic
       tier; it sits here only because the pack may not declare into that tier. */
  --component-ftu-faint-on-wash: var(--primitive-color-neutral-gray-600);

  /* ── EDGE · the workhorse ─────────────────────────────────────────────────
     Light hugs both edges and the centre column stays clear, so a line of type
     running down the middle never crosses a bright patch. This is the default
     for the pack and the one to reach for on anything with a form on it. */
  --component-ftu-atmos-edge:
    radial-gradient(46% 90% at -6% 30%,
      color-mix(in srgb, var(--component-ftu-atmos-cool) var(--component-ftu-atmos-1), transparent) 0%, transparent 62%),
    radial-gradient(44% 86% at 106% 44%,
      color-mix(in srgb, var(--component-ftu-atmos-warm) var(--component-ftu-atmos-2), transparent) 0%, transparent 60%),
    radial-gradient(40% 70% at -4% 88%,
      color-mix(in srgb, var(--component-ftu-atmos-pale) var(--component-ftu-atmos-3), transparent) 0%, transparent 58%),
    radial-gradient(38% 66% at 104% 90%,
      color-mix(in srgb, var(--component-ftu-atmos-pale) var(--component-ftu-atmos-3), transparent) 0%, transparent 58%),
    var(--component-ftu-atmos-wash);

  /* ── CORNER · arrival ─────────────────────────────────────────────────────
     Four corners and a pale core. The most present of the three, and the only
     one with light in the middle of the canvas — which is why it belongs on
     screens carrying one sentence and a mark, not on a form. */
  --component-ftu-atmos-corner:
    radial-gradient(70% 30% at 2% 2%,
      color-mix(in srgb, var(--component-ftu-atmos-cool) var(--component-ftu-atmos-2), transparent) 0%, transparent 58%),
    radial-gradient(70% 30% at 98% 4%,
      color-mix(in srgb, var(--component-ftu-atmos-warm) var(--component-ftu-atmos-1), transparent) 0%, transparent 58%),
    radial-gradient(96% 36% at 50% 50%,
      color-mix(in srgb, var(--component-ftu-atmos-pale) var(--component-ftu-atmos-3), transparent) 0%, transparent 62%),
    radial-gradient(70% 30% at 2% 98%,
      color-mix(in srgb, var(--component-ftu-atmos-pale) var(--component-ftu-atmos-3), transparent) 0%, transparent 58%),
    radial-gradient(70% 30% at 98% 96%,
      color-mix(in srgb, var(--component-ftu-atmos-cool) var(--component-ftu-atmos-2), transparent) 0%, transparent 58%),
    var(--component-ftu-atmos-wash);

  /* ── VEIL · the quiet one ─────────────────────────────────────────────────
     Six sources, all faint, none dominant. The most diffuse of the three and
     the closest to plain white — for dead ends and blocked states, where a
     screen should feel still rather than lit. */
  --component-ftu-atmos-veil:
    radial-gradient(96% 30% at 10% 4%,
      color-mix(in srgb, var(--component-ftu-atmos-warm) var(--component-ftu-atmos-3), transparent) 0%, transparent 60%),
    radial-gradient(96% 30% at 90% 14%,
      color-mix(in srgb, var(--component-ftu-atmos-pale) var(--component-ftu-atmos-3), transparent) 0%, transparent 60%),
    radial-gradient(96% 30% at 34% 40%,
      color-mix(in srgb, var(--component-ftu-atmos-cool) var(--component-ftu-atmos-4), transparent) 0%, transparent 60%),
    radial-gradient(96% 30% at 84% 58%,
      color-mix(in srgb, var(--component-ftu-atmos-warm) var(--component-ftu-atmos-4), transparent) 0%, transparent 60%),
    radial-gradient(96% 30% at 16% 80%,
      color-mix(in srgb, var(--component-ftu-atmos-pale) var(--component-ftu-atmos-4), transparent) 0%, transparent 60%),
    radial-gradient(110% 32% at 60% 100%,
      color-mix(in srgb, var(--component-ftu-atmos-cool) var(--component-ftu-atmos-3), transparent) 0%, transparent 62%),
    var(--component-ftu-atmos-wash);

  /* The grain. A fractal-noise tile with no colour in it at all — it darkens
     and lightens what is underneath rather than tinting it, which is what keeps
     the glows readable as light instead of as flat fills. 120px tile, so the
     repeat never becomes a visible grid on a 393px phone. */
  --component-ftu-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23g)'/%3E%3C/svg%3E");
  --component-ftu-grain-size: 120px;
  --component-ftu-grain-opacity: .055;

  /* Disabled. One opacity, so a disabled control looks the same everywhere. */
  --component-ftu-disabled-opacity: .42;

  /* No --component-ftu-art-warm. The illustrations' warm plane IS the brand
     orange, and the brand orange already has a token — it was declared here for
     an afternoon at #FBB045, one digit off #FBB044, which is precisely the
     "one meaning, two tokens" shape the DS index complains about at item 5. */
}

/* ═══════════════════════════════════════════════════════════════════════════
   FTU ADDITIONS — declared gaps, for folding into v7
   Every family below has markup consumers. None is a one-off.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── dp-app-bar--anon ────────────────────────────────────────────────────────
   The pre-auth bar. The canonical app bar is back · status · avatar, and
   pre-auth none of those three apply: there is no availability to set and no
   account to open. Same 44/1fr/44 grid, so the geometry is unchanged; the mid
   slot carries the step readout and the end slot carries Skip where the step is
   skippable. */
.aappbar--anon{background:var(--semantic-color-contrast-light);}
/* The step readout is blue because it is a MEASURE of progress — "Step 5 of 6"
   and the bar under it are the same statement, one counted and one drawn. See
   the rule at dp-stepper below. It is declared here, on the variant that owns
   the slot, rather than as a bare .aappbar__mid override: that loses on
   specificity to this rule and fails silently. */
.aappbar--anon .aappbar__mid{font-family:var(--font-mono);font-size:var(--app-text-12);
  letter-spacing:var(--app-tracking-caps);text-transform:uppercase;
  color:var(--semantic-color-text-accent-default);align-items:center;}
.aappbar--anon .aappbar__end .dp-link{font-size:var(--app-text-14);}
.aappbar__back{display:flex;width:var(--touch-target-min);height:var(--touch-target-min);
  align-items:center;color:var(--tm-navy);border:var(--primitive-border-width-none);
  background:none;padding:var(--primitive-spacing-zero);cursor:pointer;}

/* ── dp-ic ───────────────────────────────────────────────────────────────────
   The icon wrapper. Logged as a build hazard already: an icon wrapper is never
   a bare inline span — it centres, it does not participate in the text baseline,
   and it takes its colour from a modifier rather than from a style attribute. */
.dp-ic{display:inline-flex;align-items:center;justify-content:center;flex:none;}
.dp-ic--quiet{color:var(--tm-faint);}
.dp-ic--edge{color:var(--semantic-color-border-neutral-default);}

/* ── ftu-head ────────────────────────────────────────────────────────────────
   The title block. A TM screen does not label itself in a bar — the first serif
   line in the body IS the title. dp-greet is the Home-specific instance of this
   (greeting + mono meta); this is the form-screen instance: serif title,
   optional body-l lede. One per screen. */
.ftu-head{padding:var(--primitive-spacing-2xl-3xl) var(--tm-gutter) var(--primitive-spacing-zero);}
.ftu-head--tight{padding-top:var(--primitive-spacing-xl);}
.ftu-head--mark{padding-top:var(--primitive-spacing-3xl-4xl);}
.ftu-head__title{font-family:var(--primitive-typography-family-display);
  font-weight:var(--primitive-typography-weight-semibold);font-size:var(--app-text-28);
  line-height:var(--primitive-typography-line-height-tighter);color:var(--tm-navy);}
.ftu-head__sub{font-size:var(--app-text-14);line-height:var(--primitive-typography-line-height-normal);
  color:var(--tm-muted);margin-top:var(--primitive-spacing-lg);max-width:34ch;}
.ftu-head__sub b{color:var(--tm-navy);font-weight:var(--primitive-typography-weight-bold);}

/* ── ftu-mark ────────────────────────────────────────────────────────────────
   Where a brand mark is placed. The mark carries its own literal fills — a mark
   that shifts when a token moves is not a mark — so the surround is the only
   thing this rule owns. */
.ftu-mark{padding:var(--primitive-spacing-zero) var(--tm-gutter);}
.ftu-mark--top{padding-top:var(--primitive-spacing-3xl-4xl);}
/* Centred mark and head. Act A now centres throughout — the three welcome panes
   and the language step — so the arrival sequence reads as one piece and the
   forms that follow are the moment the screen starts talking to you rather than
   at you. Only these two families take it; the pack's default stays left. */
.ftu-mark--centre{display:flex;justify-content:center;}
.ftu-head--centre{text-align:center;}
.ftu-head--centre .ftu-head__sub{margin-left:auto;margin-right:auto;}
/* a single link on its own line, centred under a form */
.ftu-centreline{display:flex;justify-content:center;
  margin-top:var(--primitive-spacing-2xl-3xl);}
.ftu-mark--hero{margin:var(--primitive-spacing-xs) var(--primitive-spacing-zero)
  var(--primitive-spacing-sm-md);}

/* ── ftu shell ───────────────────────────────────────────────────────────────
   The screen shell for a form. dp-screen__body / dp-screen__foot exist in the DS
   and have never had a consumer; they assume they own the phone frame. Inside
   .aphone the frame is already owned, so these are the in-frame equivalents and
   they consume the same tokens. dp-cta carries its own gutter margins, which
   double up inside a padded foot — reset here, once, rather than per screen. */
/* background-COLOR, not the shorthand. `background:` resets background-image,
   so an atmosphere declared on a lower-specificity class was being wiped by
   this rule and rendering nothing at all — silently, as ever. */
.abody.ftu{background-color:var(--semantic-color-contrast-light);
  padding-bottom:var(--primitive-spacing-zero);display:flex;flex-direction:column;
  position:relative;}
/* The last line must never end flush against the dock. .ftu-scroll clips at its
   own bottom edge, and on FT-38 that edge fell 6px into the middle of a line of
   type — so the sentence read as sliced rather than as continuing. Padding is
   the fix, not a taller box: on a screen that does not overflow the scroll box
   is already taller than its content, so this costs those screens nothing and
   buys the long ones a clean last line. */
.ftu-scroll{flex:1;min-height:0;overflow-y:auto;
  padding-bottom:var(--primitive-spacing-3xl);
  -webkit-mask-image:var(--component-ftu-scroll-fade);
  mask-image:var(--component-ftu-scroll-fade);}
/* ⚠ The mask goes on the SCROLL BOX, so it stays at the fold while the content
   moves under it — and it clips descendants, which is the same shape as the
   bug that once trapped every picker inside this box. Verified by ftu_walk:
   open a picker on a scrolling screen and it still paints. If a future picker
   is added as a child of .ftu-scroll rather than escaping it, check here first.
   At the end of the scroll the fade lies over the padding above, so the last
   line arrives whole rather than dissolving. */
.ftu-scroll::-webkit-scrollbar{width:0;}
.ftu-foot{flex:none;display:flex;flex-direction:column;gap:var(--primitive-spacing-md-lg);
  padding:var(--primitive-spacing-lg-xl) var(--tm-gutter) var(--primitive-spacing-2xl-3xl);
  background:var(--semantic-color-contrast-light);box-shadow:var(--component-ftu-foot-shadow);}
.ftu-foot .dp-cta{margin-left:var(--primitive-spacing-zero);
  margin-right:var(--primitive-spacing-zero);width:100%;}
.ftu-foot__hint{text-align:center;font-size:var(--app-text-12);color:var(--tm-faint);
  line-height:var(--primitive-typography-line-height-normal);}
.ftu-foot__hint .dp-link{font-size:var(--app-text-12);}
.ftu-foot__row{display:flex;align-items:center;justify-content:center;
  gap:var(--primitive-spacing-md);font-size:var(--app-text-14);color:var(--tm-muted);}
.ftu-pad{padding:var(--primitive-spacing-zero) var(--tm-gutter);}

/* a screen with one decision on it centres its block rather than sitting at the
   top of an empty page — the hole in the middle reads as unfinished */
.ftu-centre{min-height:100%;display:flex;flex-direction:column;justify-content:center;
  padding-bottom:var(--primitive-spacing-4xl);}

/* ── the atmosphere ──────────────────────────────────────────────────────────
   Three backgrounds, declared whole in the TOKENS block above. The rules here
   do nothing but choose one and clear the way for it.

     edge     the default — light on both edges, centre column clear
     corner   arrival — four corners and a pale core, the most present
     veil     dead ends — six faint sources, the quietest

   Painted on .aphone, not on .abody, so an atmosphere runs the full 852 and
   reaches the top edge. Painting it on the body left a 28px white status bar
   sitting on the glow like a lid. Everything between the phone and the content
   therefore stops painting white: the status bar, the app bar, the body, and
   the foot — which keeps its top shadow, because that is what separates it. */
.aphone:has(.ftu-bg) .astatus,
.aphone:has(.ftu-bg) .aappbar--anon,
.ftu-bg .ftu-foot{background:none;}
.abody.ftu.ftu-bg{background-color:transparent;}

.aphone:has(.ftu-bg--edge){background-image:var(--component-ftu-atmos-edge);}
.aphone:has(.ftu-bg--corner){background-image:var(--component-ftu-atmos-corner);}
.aphone:has(.ftu-bg--veil){background-image:var(--component-ftu-atmos-veil);}

/* Every --tm-faint consumer in the pack, rebound for the tinted surface. The
   list is exhaustive as of 20 Aug — ten classes, found by walking all 52 screens
   for text computing to gray-500, not by reading the stylesheet.
   Scoped to the PHONE, not to .ftu-bg. The atmosphere is painted on .aphone and
   .ftu-bg sits on .abody, so a descendant selector off .ftu-bg misses anything
   in the app bar — which is where Skip lives, and Skip was the one of the ten
   that silently kept the old value. */
.aphone:has(.ftu-bg) .dp-stepper__eyebrow,
.aphone:has(.ftu-bg) .dp-link--quiet,
.aphone:has(.ftu-bg) .ftu-foot__hint,
.aphone:has(.ftu-bg) .dp-field__hint,
.aphone:has(.ftu-bg) .dp-sheet__cat,
.aphone:has(.ftu-bg) .ftu-kv__v--quiet,
.aphone:has(.ftu-bg) .ftu-doc__p--q,
.aphone:has(.ftu-bg) .dp-resrow__n,
.aphone:has(.ftu-bg) .dp-scoperow__v,
.aphone:has(.ftu-bg) .dp-task__lbl{color:var(--component-ftu-faint-on-wash);}

/* The grain sits on a pseudo rather than in the gradient stack, because it has
   to sit ON the glows: a noise tile blended into the list would be multiplied
   by each layer and go muddy at the overlaps.
   z-index:-1, and NOTHING is set on the children. The first version gave
   `.ftu-bg > *` position:relative to lift content above the grain, which made
   .ftu-scroll a containing block — and every picker and sheet the runtime opens
   is absolutely positioned, so they began anchoring to the scroll box and
   clipping inside its overflow. The walk caught it: six screens where a field
   took no input and a row did nothing. */
.aphone:has(.ftu-bg)::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:var(--component-ftu-grain);
  background-size:var(--component-ftu-grain-size) var(--component-ftu-grain-size);
  opacity:var(--component-ftu-grain-opacity);mix-blend-mode:multiply;}

/* ── the rhythm ──────────────────────────────────────────────────────────────
   ⭐ Spacing belongs to the wrapper, not the item — the DS's own law, and the
   reason the screens carry no margins of their own. Every gap between two
   blocks on an FTU screen is one of these rules. */
.ftu-head + .ftu-pad,
.ftu-head + .dp-banner,
.ftu-head + .dp-hero,
.dp-banner + .ftu-pad,
.dp-hero + .ftu-pad,
.dp-stepper + .ftu-head,
/* FT-49 is the first screen to open with a BANNER under the stepper rather
   than a head. Both seams were unowned, so the banner sat flush on the
   progress bar: it has no top margin of its own and only 14px of padding,
   where .ftu-head brings 24 + 28. Same token as the head gets, so a screen
   that leads with a banner keeps the stepper's rhythm. */
.dp-stepper + .dp-banner,
.dp-banner + .ftu-head,
.ftu-mark + .ftu-head{margin-top:var(--primitive-spacing-2xl);}
.ftu-head + .ftu-pad--tight,
.dp-hero + .ftu-pad--tight{margin-top:var(--primitive-spacing-md);}
/* a mark and the title under it are one lockup — the title's own top padding
   would double the gap, so it gives it up */
.ftu-mark + .ftu-head{padding-top:var(--primitive-spacing-zero);}
/* a link following a hint is a second thought, not the same line */
.ftu-pad > .dp-field__hint + .dp-link{margin-top:var(--primitive-spacing-lg-xl);
  display:inline-flex;}
/* Inside a field_choice the segments and the control were TOUCHING — no token
   at all, 0px, so the tabs read as the lid of the input rather than as a choice
   about it. The field's own rhythm is --primitive-spacing-md (8px, the gap the
   label and the hint both take); this is that ramp two steps up. Nick, 20 Aug. */
.dp-field > .dp-segments + .dp-field__control{margin-top:var(--primitive-spacing-lg);}
.ftu-pad > .dp-segments + .dp-field,
.ftu-pad > .dp-field__control + .dp-chips,
.ftu-pad > .dp-otp + .dp-field__hint,
.ftu-pad > .dp-otp + .dp-field__error{margin-top:var(--primitive-spacing-lg-xl);}
/* A search box and the results under it are two things, not one — at 14px they
   read as a single block and the eye does not know where the input ends. Two
   steps up the same ramp, split out of the group above so the segments and the
   OTP keep the gap they were tuned to. Nick, 20 Aug. */
.ftu-pad > .dp-field__control + .dp-sheet__cat{margin-top:var(--primitive-spacing-xl-2xl);}
/* ── the gaps that were never declared ───────────────────────────────────────
   Four places where two DIFFERENT components sat flush against each other with
   no rule between them, so they inherited nothing and touched at 0px. It shows
   worst on FT-11, where an error message lands hard against the consent below
   it — but the gap was missing whether or not the error was there. An error
   does not create the problem, it reveals it.

   ⚠ Same-family rows — resrow+resrow, scoperow+scoperow, kv+kv and the rest —
   are flush ON PURPOSE: they carry their own dividers and a gap would break the
   list. ftu_rhythm.mjs knows the difference and only fails on mixed pairs. */
.ftu-pad > .dp-otp + .ftu-btnrow,
.ftu-pad > .dp-field__error + .ftu-btnrow,
.ftu-pad > .dp-field + .dp-consent,
.ftu-pad > .dp-field + .dp-switchrow,
.ftu-pad > .dp-choice + .tm-anon,
.ftu-pad > .dp-resume + .dp-task{margin-top:var(--primitive-spacing-2xl);}
.ftu-pad > .dp-chips + .dp-reach,
.ftu-pad > .dp-rules + .dp-consent,
.ftu-pad > .dp-choice + .tm-gate,
.ftu-pad > .dp-field + .tm-gate,
.ftu-pad > .ftu-kv + .dp-link,
.ftu-pad > .dp-field__error + .dp-field__hint{margin-top:var(--primitive-spacing-xl-2xl);}
.ftu-pad > .dp-list-row:first-child,
.ftu-pad > .dp-choice:first-child,
.ftu-pad > .dp-otp:first-child,
.ftu-pad > .ftu-kv:first-child,
.ftu-pad > .dp-joinrow:first-child,
.ftu-pad > .dp-scoperow:first-child,
.ftu-pad > .dp-tierrow:first-child,
.ftu-pad > .dp-costrow:first-child,
.ftu-pad > .dp-stdrow:first-child,
.ftu-pad > .dp-resume:first-child,
.ftu-pad > .dp-field__control:first-child,
.ftu-pad > .dp-segments:first-child{margin-top:var(--primitive-spacing-xl-2xl);}
.ftu-pad > .dp-banner{margin-left:var(--primitive-spacing-zero);
  margin-right:var(--primitive-spacing-zero);}
.ftu-pad > .tm-gate:first-child,
.ftu-pad > .tm-anon:first-child{margin-top:var(--primitive-spacing-xl-2xl);}
.ftu-pad > .dp-task + .tm-anon,
.ftu-pad > .dp-stdrow + .dp-consent,
.ftu-pad > .ftu-kv + .tm-anon,
.ftu-pad > .dp-costrow + .tm-anon{margin-top:var(--primitive-spacing-xl-2xl);}
.ftu-pad > .dp-seclabel{margin-left:var(--primitive-spacing-zero);
  margin-right:var(--primitive-spacing-zero);}
.ftu-pad > .tm-anon,.ftu-pad > .dp-note{margin-left:var(--primitive-spacing-zero);
  margin-right:var(--primitive-spacing-zero);}
.dp-reach + .ftu-foot{margin-top:var(--primitive-spacing-zero);}

/* ── dp-field ────────────────────────────────────────────────────────────────
   The one form field. Resolves the open item logged for the v4 DS sweep: "the
   composer's form language being one form under two prefixes (ax-* and tm-f*),
   wanting to be dp-field". A real label above — the web app's accessible name
   for its email box is literally "name@example.com" — then the control, then
   hint or error in the same slot so nothing jumps when an error arrives. */
/* The gap BETWEEN field groups, two steps up the ramp — 20px to 28px, and the
   first field 24 to 32. A field is not one object: it is a label, a control and
   often a hint, and those three sit 8px apart. At 20 the gap between groups was
   only 2.5x the gap inside one, so a hint and the label under it read as the
   same block and the form scanned as one long column of parts. At 28 it is 3.5x
   and the groups separate. Nick, 20 Aug — the same two steps as the segments
   gap above, and this is why they should stay in step with each other.
   ⚠ This is the form rhythm, not an FT-10 rule: it moves all 15 screens that
   carry a dp-field. That is the point. */
.dp-field{margin-top:var(--primitive-spacing-2xl-3xl);}
.dp-field--first{margin-top:var(--primitive-spacing-3xl);}
/* Weight 500, not 700. Size, family, tracking and line-height already matched
   v6's dp-seclabel exactly; only the weight was heavier, and at 12px uppercase
   mono that is what reads as "bigger" — the letterforms thicken and the counters
   close, so the block gains mass without gaining a pixel. Measured, 20 Aug. */
.dp-field__label{display:block;font-size:var(--app-text-12);
  font-weight:var(--primitive-typography-weight-medium);letter-spacing:var(--app-tracking-caps);
  text-transform:uppercase;color:var(--tm-teal-700);font-family:var(--font-mono);
  margin-bottom:var(--semantic-spacing-rhythm-label);}
.dp-field__control{width:100%;box-sizing:border-box;display:flex;align-items:center;
  gap:var(--primitive-spacing-md-lg);min-height:var(--component-ftu-control-height);
  padding:var(--primitive-spacing-lg-xl) var(--primitive-spacing-xl);
  border:var(--primitive-border-width-thin) solid var(--tm-line);
  border-radius:var(--app-radius-group);background:var(--semantic-color-contrast-light);
  font-family:inherit;font-size:var(--app-text-16);
  font-weight:var(--primitive-typography-weight-bold);color:var(--tm-navy);}
.dp-field__control--search{min-height:var(--component-ftu-control-height-search);}
.dp-field__val--ph{color:var(--component-placeholder-text);
  font-weight:var(--primitive-typography-weight-normal);}
.dp-field__val{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;}
.dp-field__caret{width:var(--component-ftu-caret-width);
  height:var(--component-ftu-caret-height);background:var(--tm-teal-700);flex:none;}
.dp-field__eye{width:var(--touch-target-min);height:var(--touch-target-min);flex:none;
  display:flex;align-items:center;justify-content:center;
  border:var(--primitive-border-width-none);background:none;color:var(--tm-faint);
  cursor:pointer;margin:calc(var(--primitive-spacing-lg-xl) * -1)
  calc(var(--primitive-spacing-lg) * -1) calc(var(--primitive-spacing-lg-xl) * -1)
  var(--primitive-spacing-zero);}
.dp-field--focus .dp-field__control,
.dp-field__control--focus{border-color:var(--semantic-color-border-primary-default);
  box-shadow:var(--component-ftu-focus-ring);}
.dp-field--error .dp-field__control{border-color:var(--semantic-color-text-error-default);}
.dp-field--dis .dp-field__control{background:var(--semantic-color-surface-neutral-subtle);
  color:var(--tm-faint);}
.dp-field__hint{font-size:var(--app-text-12);
  line-height:var(--primitive-typography-line-height-normal);color:var(--tm-faint);
  margin-top:var(--primitive-spacing-md);}
.dp-field__error{display:flex;align-items:flex-start;gap:var(--primitive-spacing-sm-md);
  font-size:var(--app-text-12);line-height:var(--primitive-typography-line-height-normal);
  font-weight:var(--primitive-typography-weight-bold);
  color:var(--semantic-color-text-error-default);margin-top:var(--primitive-spacing-md);}
/* no .dp-field__error svg rule — the errors carry no glyph any more */

/* ── dp-rules ────────────────────────────────────────────────────────────────
   The live password checklist. The web app's version reads only the first of the
   two password boxes — it goes green on a pair that cannot succeed. This one
   reads the pair, so the match rule is a rule like the others. */
/* One row, wrapping. Two short conditions stacked read as a list of things to
   do; side by side they read as what they are — the shape of one password. It
   WRAPS on purpose and must keep doing so: these strings are the longest they
   will ever be in English, and the pack ships in four locales. */
.dp-rules{display:flex;flex-wrap:wrap;
  gap:var(--primitive-spacing-md) var(--primitive-spacing-xl);
  margin-top:var(--primitive-spacing-lg);}
.dp-rules__i{display:flex;align-items:center;gap:var(--primitive-spacing-md-lg);
  font-size:var(--app-text-12);color:var(--tm-muted);}
/* No ring on the unmet state. An empty bordered circle beside a line of text is
   a radio button — it says "choose one of these", and these are not choices,
   they are the conditions the field is being measured against. The mark draws
   only once there is something to say: a tick when met, an alert when failed.
   Unmet keeps the box so nothing shifts sideways when the state resolves. */
.dp-rules__mk{width:var(--component-ftu-rules-mark-size);
  height:var(--component-ftu-rules-mark-size);flex:none;
  border-radius:var(--primitive-radius-full);
  border:var(--primitive-border-width-none);display:flex;
  align-items:center;justify-content:center;color:var(--semantic-color-text-neutral-contrast);}
.dp-rules__i--met{color:var(--primitive-color-feedback-success-600);
  font-weight:var(--primitive-typography-weight-semibold);}
.dp-rules__i--met .dp-rules__mk{background:var(--primitive-color-feedback-success-600);
  border-color:var(--primitive-color-feedback-success-600);}
.dp-rules__i--fail{color:var(--semantic-color-text-error-default);
  font-weight:var(--primitive-typography-weight-semibold);}
.dp-rules__i--fail .dp-rules__mk{border-color:var(--semantic-color-text-error-default);
  color:var(--semantic-color-text-error-default);}

/* ── dp-banner ───────────────────────────────────────────────────────────────
   The page-level message. Three of the teardown's top findings are one missing
   component: ?expired=1 renders nothing, an invalid email produces no persistent
   message, and a form with three errors has no summary. Sits under the title,
   above the first field, and states the cause. */
.dp-banner{display:flex;align-items:flex-start;gap:var(--primitive-spacing-md-lg);
  margin:var(--primitive-spacing-zero) var(--tm-gutter);
  padding:var(--primitive-spacing-lg-xl) var(--primitive-spacing-xl);
  border-radius:var(--app-radius-group);font-size:var(--app-text-14);
  line-height:var(--primitive-typography-line-height-normal);}
.dp-banner__ic{flex:none;display:flex;align-items:center;justify-content:center;
  margin-top:var(--primitive-border-width-thin);}
.dp-banner__b{min-width:0;}
.dp-banner b{font-weight:var(--primitive-typography-weight-bold);}
.dp-banner small{display:block;font-size:var(--app-text-12);
  margin-top:var(--primitive-spacing-sm);opacity:.88;}
.dp-banner--error{background:var(--semantic-color-badge-attention-surface);
  color:var(--semantic-color-text-error-default);}
.dp-banner--info{background:var(--semantic-color-badge-progress-surface);color:var(--tm-navy);}
.dp-banner--offline{background:var(--semantic-color-surface-neutral-subtle);color:var(--tm-navy);}
.dp-banner--good{background:var(--primitive-color-feedback-success-100);
  color:var(--primitive-color-feedback-success-600);}

/* ── dp-hero ─────────────────────────────────────────────────────────────────
   The whole-screen state: a link that is spent, an address proved, a permission
   refused. The web's /reset-password invalid-token screen is the model — glyph,
   one sentence, two exits — and it is the one auth screen the teardown says to
   copy. /verify-email has the same glyph and no exits at all; this component
   makes the exits structural, so that state cannot recur. */
.dp-hero{display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:var(--primitive-spacing-4xl) var(--primitive-spacing-2xl) var(--primitive-spacing-2xl);
  gap:var(--primitive-spacing-lg);}
.dp-hero__icon{width:var(--component-ftu-hero-icon-size);
  height:var(--component-ftu-hero-icon-size);border-radius:var(--primitive-radius-circle);
  display:flex;align-items:center;justify-content:center;flex:none;
  background:var(--semantic-color-surface-neutral-subtle);color:var(--tm-navy);
  margin-bottom:var(--primitive-spacing-md);}
/* The glyph was --tm-faint, the placeholder grey. On the five neutral heroes —
   a spent link, a paused code — that read as a disabled control rather than as
   the screen's subject, which is the opposite of what a blocked state needs to
   say. Navy is what every other glyph carrying meaning uses. The surface stays
   subtle: these are not success and must not borrow CF-03's confidence. */
.dp-hero--good .dp-hero__icon{background:var(--tm-state);
  color:var(--semantic-color-text-neutral-contrast);}
.dp-hero--wait .dp-hero__icon{background:var(--tm-teal-bg);color:var(--tm-teal-700);}
.dp-hero__title{font-family:var(--primitive-typography-family-display);
  font-weight:var(--primitive-typography-weight-semibold);font-size:var(--app-text-28);
  line-height:var(--primitive-typography-line-height-tighter);color:var(--tm-navy);}
.dp-hero__body{font-size:var(--app-text-14);
  line-height:var(--primitive-typography-line-height-normal);color:var(--tm-muted);
  max-width:32ch;}
.dp-hero__body b{color:var(--tm-navy);font-weight:var(--primitive-typography-weight-bold);}
/* An address is a VALUE, not prose, and it gets its own line.
   `a.rao@gudalur-phc.in` was breaking as `a.rao@gudalur-` / `phc.in` because a
   hyphen is a break opportunity — so a domain split across two lines and read
   as two different addresses. `word-break:keep-all` closes the hyphen (and the
   `@` and `.`) as break points; `display:block` gives it the fresh line rather
   than leaving it to fall there by luck of the measure. Inherits the bold navy
   from the `b` rule above, so it looks the same — it just cannot come apart. */
.dp-hero__body .dp-hero__addr{display:block;word-break:keep-all;
  overflow-wrap:normal;hyphens:none;}

/* ── ftu-conn ────────────────────────────────────────────────────────────────
   The connection, as ONE object with three states.

   It replaces a status line and a banner that were saying the same thing twice
   and disagreeing about it: "Checking your connection…" sat under the mark while
   "Working on a slow line." sat in a box below, so the screen reported a result
   before it had finished asking the question. The three states are one process:

     checking   the question, with an indeterminate bar
     on         the answer, and the way forward
     off        the other answer, and the other way forward

   The footprint is fixed at --component-ftu-conn-height so the wordmark above it
   does not move when the state resolves. That is the whole reason the token
   exists; without it the lockup grows by the height of a CTA and the arrival
   screen twitches at the moment it should feel settled.

   The bar fills from --tm-state, like every other progress readout in the pack.
   It is indeterminate — a fixed run sliding, not a percentage — because nothing
   here knows how long a handshake takes. */
.ftu-conn{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  gap:var(--primitive-spacing-lg-xl);width:100%;
  min-height:var(--component-ftu-conn-height);}
.ftu-conn__state{display:flex;align-items:center;justify-content:center;
  gap:var(--primitive-spacing-md);font-size:var(--app-text-14);
  color:var(--component-ftu-faint-on-wash);text-align:center;}
.ftu-conn--checking .ftu-conn__state{color:var(--component-ftu-faint-on-wash);}
.ftu-conn--on .ftu-conn__state{color:var(--tm-teal-700);}
.ftu-conn--off .ftu-conn__state{color:var(--tm-navy);}
.ftu-conn__ic{display:inline-flex;align-items:center;flex:none;}
.ftu-conn__bar{width:var(--component-ftu-conn-bar-width);
  height:var(--component-ftu-conn-bar-height);border-radius:var(--primitive-radius-full);
  background:var(--tm-line-soft);overflow:hidden;}
.ftu-conn__bar > i{display:block;height:100%;width:var(--component-ftu-conn-bar-run);
  border-radius:var(--primitive-radius-full);background:var(--tm-state);
  animation:ftu-conn-run 1.5s ease-in-out infinite;}
@keyframes ftu-conn-run{
  0%{transform:translateX(-110%);} 100%{transform:translateX(340%);}}
.ftu-conn .dp-cta{width:100%;margin-left:var(--primitive-spacing-zero);
  margin-right:var(--primitive-spacing-zero);}
/* No hairline over the docked lockup. .ftu-foot's top shadow exists to separate
   a dock from content scrolling under it; on the arrival screens there is
   nothing to scroll, so the line would be drawing a join that is not there. */
.ftu-foot:has(.ftu-conn){box-shadow:none;}

/* ── dp-switch · unscoped ────────────────────────────────────────────────────
   v6 has the whole component and hides it behind .tm-acct, so it has never had
   a consumer outside the account screens. This is its first. The runtime
   already binds .dp-switch and toggles --on, so nothing there changes.

   dp-switchrow is the row it lives in: label left, switch right, the whole row
   a target — the same construction as dp-consent, and for the same reason. */
.dp-switchrow{display:flex;align-items:center;justify-content:space-between;
  gap:var(--primitive-spacing-lg);width:100%;text-align:left;
  padding:var(--primitive-spacing-lg-xl) var(--primitive-spacing-xl);
  border-radius:var(--app-radius-group);background:var(--tm-teal-bg);
  border:var(--primitive-border-width-none);font:inherit;cursor:pointer;}
.dp-switchrow__t{flex:1;min-width:0;}
.dp-switchrow__t b{display:block;font-size:var(--app-text-14);color:var(--tm-navy);
  font-weight:var(--primitive-typography-weight-semibold);}
.dp-switchrow__s{font-size:var(--app-text-12);color:var(--component-ftu-faint-on-wash);
  margin-top:var(--primitive-spacing-xs-sm);
  line-height:var(--primitive-typography-line-height-normal);}
.dp-switch{width:var(--component-ftu-switch-width);
  height:var(--component-ftu-switch-height);flex:none;
  border-radius:var(--primitive-radius-full);position:relative;background:var(--tm-line);}
.dp-switch--on{background:var(--semantic-color-interactive-primary-default);}
.dp-switch i{position:absolute;top:var(--primitive-spacing-sm);
  left:var(--primitive-spacing-sm);width:var(--component-ftu-switch-knob);
  height:var(--component-ftu-switch-knob);border-radius:var(--primitive-radius-full);
  background:var(--semantic-color-contrast-light);
  box-shadow:var(--component-switchknob-shadow);}
.dp-switch--on i{left:var(--primitive-spacing-2xl);}

/* ── dp-cta--outline, and the row that holds two ─────────────────────────────
   v6 has one CTA and it is filled. It has --component-button-secondary-* tokens
   but no class that consumes them, and the text colour they carry is
   #000E0F — the near-black this pack took out of the OTP cells on 20 Aug. So
   the outline button is declared here rather than bound to those.

   Teal, because by the colour rule teal is what you can touch. The border is an
   inset box-shadow rather than a border so the button keeps the filled CTA's
   exact height and the two can sit in a row together without one being 2px
   taller than the other. */
.dp-cta--outline{background:none;
  color:var(--semantic-color-interactive-primary-default);
  box-shadow:inset 0 0 0 var(--primitive-border-width-thin)
             var(--semantic-color-interactive-primary-default);}

/* Two secondary actions of equal weight. They wrap rather than squash: at 16px
   the two labels here are close to the full width of a 393 phone, and the
   locales this ships in run longer than English. */
.ftu-btnrow{display:flex;flex-wrap:wrap;gap:var(--primitive-spacing-lg);}
.ftu-btnrow > .dp-cta{flex:1 1 var(--component-ftu-btnrow-basis);
  margin-left:var(--primitive-spacing-zero);margin-right:var(--primitive-spacing-zero);
  font-size:var(--app-text-14);padding-left:var(--primitive-spacing-lg);
  padding-right:var(--primitive-spacing-lg);}

/* A CTA in the BODY rather than the dock. dp-cta carries its own gutter margins
   so that it can sit loose in a screen; inside .ftu-pad the gutter is already
   the wrapper's job and the two double up. Same reset .ftu-foot makes, same
   reason. */
.ftu-pad > .dp-cta{margin-left:var(--primitive-spacing-zero);
  margin-right:var(--primitive-spacing-zero);width:100%;}
/* The glyph belongs on the same optical line as the label, so the button is a
   flex row rather than text with an icon dropped in front of it. */
.dp-cta--add{display:flex;align-items:center;justify-content:center;
  gap:var(--primitive-spacing-md);}
/* An outline CTA after the choices it adds to — a full spacing step, because it
   acts on the list above it rather than belonging to it. */
.ftu-pad > .dp-choice + .dp-cta,
.ftu-pad > .dp-resrow + .dp-cta{margin-top:var(--primitive-spacing-2xl);}

/* ── dp-segments ─────────────────────────────────────────────────────────────
   Two mutually exclusive ways to be reached. Removed by mobilelayer.py in phase
   three for having zero markup consumers; reinstated because TOG-45 (SMS OTP,
   High) gives it one — an inbox is the weaker channel in the target markets and
   the choice has to be visible where the account is made, not in settings. */
.dp-segments{display:flex;gap:var(--primitive-spacing-xs);
  padding:var(--primitive-spacing-xs-sm);border-radius:var(--primitive-radius-md);
  background:var(--semantic-color-surface-neutral-subtle);
  border:var(--primitive-border-width-thin) solid var(--tm-line-soft);}
.dp-segments__i{position:relative;flex:1 1 0;min-width:0;display:inline-flex;
  align-items:center;justify-content:center;gap:var(--primitive-spacing-sm-md);
  min-height:var(--touch-target-min);
  padding:var(--primitive-spacing-zero) var(--primitive-spacing-md-lg);
  border:var(--primitive-border-width-none);background:none;
  border-radius:var(--primitive-radius-sm);cursor:pointer;font-family:inherit;
  font-size:var(--app-text-14);font-weight:var(--primitive-typography-weight-semibold);
  color:var(--tm-muted);white-space:nowrap;}
.dp-segments__i--on{background:var(--semantic-color-contrast-light);color:var(--tm-navy);
  font-weight:var(--primitive-typography-weight-bold);box-shadow:var(--tm-e1);}

/* ── dp-choice ───────────────────────────────────────────────────────────────
   Single-select from a closed list — occupation, seniority, how to be reached.
   dp-avail__opt is the same geometry but reserved to availability and selects in
   gold; this selects in teal, the interactive colour everywhere else. */
.dp-choice{display:flex;flex-direction:column;gap:var(--primitive-spacing-md);}
.dp-choice__opt{display:flex;align-items:center;gap:var(--primitive-spacing-lg-xl);
  width:100%;min-height:var(--touch-target-min);text-align:left;font:inherit;cursor:pointer;
  padding:var(--primitive-spacing-lg) var(--primitive-spacing-lg-xl);
  border:var(--primitive-border-width-regular) solid var(--tm-line);
  border-radius:var(--primitive-radius-md);background:var(--semantic-color-contrast-light);}
.dp-choice__text{flex:1;min-width:0;}
.dp-choice__text b{display:block;font-size:var(--app-text-14);
  font-weight:var(--primitive-typography-weight-semibold);color:var(--tm-navy);}
.dp-choice__text small{display:block;font-size:var(--app-text-12);color:var(--tm-muted);
  margin-top:var(--primitive-spacing-xs);
  line-height:var(--primitive-typography-line-height-snug);}
.dp-choice__radio{width:var(--component-ftu-choice-radio-size);
  height:var(--component-ftu-choice-radio-size);flex:none;
  border-radius:var(--primitive-radius-circle);
  border:var(--primitive-border-width-medium) solid var(--semantic-color-border-neutral-bold);}
.dp-choice__opt--on{border-color:var(--semantic-color-interactive-primary-default);
  background:var(--tm-teal-bg);}
.dp-choice__opt--on .dp-choice__text b{color:var(--tm-teal-700);}
.dp-choice__opt--on .dp-choice__radio{
  border-color:var(--semantic-color-interactive-primary-default);
  background:var(--semantic-color-interactive-primary-default);
  box-shadow:inset 0 0 0 var(--primitive-spacing-xs-sm) var(--semantic-color-contrast-light);}

/* ── dp-consent ──────────────────────────────────────────────────────────────
   A box you tick with prose beside it, and the whole row is the target. The web
   app consents to the clinical disclaimer only; the --todo variant is the
   placeholder for terms and privacy and is marked as needing a legal opinion
   rather than a design one. */
.dp-consent{display:flex;align-items:flex-start;gap:var(--primitive-spacing-lg);
  padding:var(--primitive-spacing-lg-xl) var(--primitive-spacing-xl);
  border-radius:var(--app-radius-group);
  background:var(--tm-teal-bg);text-align:left;width:100%;
  font:inherit;border:var(--primitive-border-width-none);cursor:pointer;}
.dp-consent + .dp-consent{margin-top:var(--primitive-spacing-md);}
.dp-consent__box{width:var(--component-ftu-consent-box-size);
  height:var(--component-ftu-consent-box-size);flex:none;
  border-radius:var(--primitive-radius-xs);
  border:var(--component-ftu-mark-border-width) solid var(--tm-line);
  background:var(--semantic-color-contrast-light);display:flex;align-items:center;
  justify-content:center;color:var(--semantic-color-text-neutral-contrast);
  margin-top:var(--primitive-border-width-thin);}
.dp-consent__t{flex:1;min-width:0;font-size:var(--app-text-12);
  line-height:var(--primitive-typography-line-height-normal);color:var(--tm-muted);}
.dp-consent__t b{color:var(--tm-navy);font-weight:var(--primitive-typography-weight-semibold);}
/* ⚠ An invisible link. v6 declares .dp-link--inline{color:inherit} at (0,1,0) and
   .dp-link carries its own colour at the same weight, so whichever lands later
   wins — and the one that wins resolves to the app-shell near-white. Measured at
   1.05:1 inside a consent: underlined, tappable, and to all intents not there.
   Given a colour of its own rather than left to inherit, and teal because by the
   20 Aug rule teal is what you can touch. Pre-existing; folding the two consents
   into one turned one instance into two, which is how it surfaced. */
.dp-consent__t .dp-link--inline,
.ftu-pad .dp-link--inline{color:var(--semantic-color-interactive-primary-default);}
.dp-consent--on{box-shadow:inset 0 0 0 var(--primitive-border-width-thin) var(--semantic-color-surface-primary-subtle);}
.dp-consent--on .dp-consent__box{background:var(--semantic-color-interactive-primary-default);
  border-color:var(--semantic-color-interactive-primary-default);}
/* No --todo variant. It was a second box in a second colour holding the terms
   and privacy consent, which put two agreements on one screen in two different
   surfaces and made the cream one read as a warning to the user — when the
   warning was to us. The two are one consent now; the finding it carried moved
   to the notes on FT-10, which is where a finding belongs. */

/* ── dp-welcome ──────────────────────────────────────────────────────────────
   The three-pane opening. Not a carousel of features — three sentences about why
   a busy clinician should spend the next four minutes. Skippable from the bar,
   and the dots are position, not progress. */
.dp-welcome{flex:1;display:flex;flex-direction:column;justify-content:center;
  padding:var(--primitive-spacing-2xl) var(--tm-gutter);gap:var(--primitive-spacing-2xl-3xl);}
.dp-welcome__art{height:var(--component-ftu-art-height);display:flex;align-items:center;
  justify-content:center;}
.dp-welcome__eyebrow{font-family:var(--font-mono);font-size:var(--app-text-12);
  letter-spacing:var(--app-tracking-caps);text-transform:uppercase;color:var(--semantic-color-text-accent-default);
  margin-bottom:var(--primitive-spacing-lg);}
.dp-welcome__title{font-family:var(--primitive-typography-family-display);
  font-weight:var(--primitive-typography-weight-semibold);font-size:var(--app-text-28);
  line-height:var(--primitive-typography-line-height-tighter);color:var(--tm-navy);}
.dp-welcome__body{font-size:var(--app-text-14);
  line-height:var(--primitive-typography-line-height-normal);color:var(--tm-muted);
  margin-top:var(--primitive-spacing-lg-xl);max-width:34ch;}

/* ── the two welcome variants ────────────────────────────────────────────────
   `centre` sets the block on the page's axis with 48px gutters — that is
   --primitive-spacing-4xl, already a step on the ramp, not a new value. The
   body's max-width comes off, because a 34ch measure inside a 48px gutter
   leaves the last line hanging left of centre and the whole thing reads as
   accidentally ragged rather than deliberately centred.

   `card` puts the same block on a raised surface. It floats rather than sits:
   without real elevation a light card on a light atmosphere is one smudge, so
   the surface is opaque white and takes --tm-e3, the deepest of the three. */
.dp-welcome--centre,
.dp-welcome--card{padding-left:var(--primitive-spacing-4xl);
  padding-right:var(--primitive-spacing-4xl);}
.dp-welcome--centre .dp-welcome__text,
.dp-welcome--card .dp-welcome__text{text-align:center;}
.dp-welcome--centre .dp-welcome__body,
.dp-welcome--card .dp-welcome__body{max-width:none;}

.dp-welcome--card{padding-left:var(--primitive-spacing-xl);
  padding-right:var(--primitive-spacing-xl);}
.dp-welcome__card{background:var(--semantic-color-contrast-light);
  border-radius:var(--primitive-radius-2xl);box-shadow:var(--tm-e3);
  padding:var(--primitive-spacing-3xl) var(--primitive-spacing-2xl)
          var(--primitive-spacing-3xl-4xl);}
.dp-welcome__card .dp-welcome__art{margin-bottom:var(--primitive-spacing-lg);}

/* ── ftu-kv ──────────────────────────────────────────────────────────────────
   Read-only summary rows: what a facility already records, what is queued. */
.ftu-kv{display:flex;justify-content:space-between;gap:var(--primitive-spacing-lg);
  padding:var(--primitive-spacing-lg) var(--primitive-spacing-zero);
  border-bottom:var(--primitive-border-width-thin) solid var(--tm-line-soft);
  font-size:var(--app-text-14);}
.ftu-kv:last-child{border-bottom:var(--primitive-border-width-none);}
.ftu-kv__k{color:var(--tm-muted);}
.ftu-kv__v{color:var(--tm-navy);font-weight:var(--primitive-typography-weight-semibold);
  text-align:right;}
.ftu-kv__v--quiet{color:var(--tm-faint);font-weight:var(--primitive-typography-weight-normal);}

/* ── dp-reach ────────────────────────────────────────────────────────────────
   The live audience readout under a scope control. The web ships four geographic
   tiers all defaulting to every post including Global; the number is what makes
   a default arguable instead of invisible. */
.dp-reach{display:flex;align-items:center;gap:var(--primitive-spacing-md);
  margin:var(--primitive-spacing-md) var(--tm-gutter) var(--primitive-spacing-zero);
  font-family:var(--font-mono);font-size:var(--app-text-12);color:var(--semantic-color-text-accent-default);}
.dp-reach b{font-weight:var(--primitive-typography-weight-medium);}

/* ── dp-cta--disabled ────────────────────────────────────────────────────────
   One disabled state, so a refused button looks the same everywhere. Used once
   in this pack, on the only screen the next step genuinely cannot be built
   without — every other CTA stays enabled and explains itself instead. */
.dp-cta--disabled{opacity:var(--component-ftu-disabled-opacity);pointer-events:none;}

/* ── dp-stepper / dp-progress · data through a custom property ───────────────
   The fill is a value from the model, not a style decision. It arrives as
   --fill on the element and the width reads it, so no rule and no markup
   carries a literal percentage. */
.dp-stepper__fill,.dp-progress > i{width:var(--fill);}

/* One colour reports progress, everywhere: --tm-state, the reporting blue.
   HM-02 settles it. Its "1 of 5 done" bar is a COMPLETION bar and v6 fills it
   from --tm-state; so does dp-task--done's tick and so does CF-03's confirm
   glyph. An earlier pass here split the two — stepper and resume took the
   interactive teal on the argument that completion is not state — which left
   onboarding as the only place in the product where making progress is teal
   while every other progress readout is blue. Matching HM-02 is the whole
   point of the pack, so the split is retired and the three agree again.
   ⚠ The DS still declares .dp-stepper__fill teal at source. That declaration
   has no consumer in v6 — this pack is its only one — so the override lives
   here rather than forking the baseline. Fold it into v7 and delete this. */
.dp-stepper__fill{background:var(--tm-state);}

/* ── blue reports, teal responds ─────────────────────────────────────────────
   Nick's rule, 20 Aug: blue carries information and progress; teal is reserved
   for things you can touch. So the label that names where you are in the flow
   joins the bar underneath it, and the CTA and the radios keep the teal.

   Two ramps, one structure. Text takes --semantic-color-text-accent-default
   (#00719F) and fills take --tm-state (#1A97D1) — which is the pairing the teal
   side already uses, teal-700 for type and teal-500 for fills. It is not a
   style choice: #1A97D1 is 3.29:1 on white, fine for a bar, and short of the
   4.5:1 that WCAG asks of 12px text. #00719F is 5.44:1. Measured, not assumed.

   dp-field__label is deliberately NOT here. It is the accessible name for a
   control you type into, so by the same rule it stays teal. */
/* Blue is the MEASURE of progress; grey NAMES the section. "Step 5 of 6" and
   the bar underneath are the same statement in two forms — one counted, one
   drawn — so they share the blue and read as one object. The eyebrow is not a
   measure, it is the name of where you are, so it takes the neutral and sits
   between the two blues, which is what stops them stacking.
   ⚠ v6 drift: v6's app bar counter is neutral. Safe to scope because
   .aappbar--anon carries nothing but the step readout in this pack — 33 screens
   have it, 19 are empty, none carry a status pill. Re-check on the v7 fold-in.
   The counter itself is set on .aappbar--anon .aappbar__mid above. */
.dp-stepper__eyebrow{color:var(--tm-faint);}
.dp-resume__label{color:var(--semantic-color-text-accent-default);}
/* The welcome dots by the same rule. The comment above dp-welcome argues they
   are "position, not progress" — a real distinction while teal did both jobs,
   but under blue-reports/teal-responds it collapses: position is information,
   and a dot is not something you touch. This is a fill, not type, so it takes
   --tm-state like every other fill. */
/* Matches v6's own selector, `.dp-dots i.dp-dots__i--on` (0,2,1). A bare
   .dp-dots__i--on is 0,1,0 and loses to it silently — the dot just stays teal
   and the screen looks entirely plausible. Second time this shape has bitten in
   this pass; the other was .aappbar--anon .aappbar__mid. */
.dp-dots i.dp-dots__i--on{background:var(--tm-state);}
.dp-resume .dp-progress{background:var(--tm-line-soft);}

/* ── the black-type correction ────────────────────────────────────────────────
   Two v6 declarations resolve to --semantic-color-text-neutral-bold (#000E0F),
   a near-pure black. Neither had a markup consumer in v6, so neither had ever
   been seen on a screen; this pack gave them one and they read as a hard black
   slab against the onboarding screens' white. Everything else that carries a
   value at this size is --tm-navy, so they join it. Not a new colour — the one
   already doing this job three lines away. */
.dp-otp__cell{color:var(--tm-navy);}
/* No teal box on the active cell. v6 rings it with a 3px --surface-primary-subtle
   glow AND a teal border, which on six cells in a row reads as a filled control
   rather than as a caret position. The position still has to be legible, so the
   active cell keeps a border — navy, one step of weight, no glow. */
.dp-otp__cell--active{border-color:var(--tm-navy)!important;box-shadow:none!important;}
/* ⚠ Focus goes on the ACTIVE CELL, never on the group.

   The runtime marks the active field by putting .dp-field__control--focus on
   it, and for an OTP the active field is the whole .dp-otp — so a six-cell row
   inherited the FIELD focus ring and drew a pale-teal box tight around all six
   the moment it was tapped. Offsetting it and rounding it did not help: a ring
   around a wide, short row is a container whatever its corners do, and it was
   only ever saying "this group is active", which the user knows because they
   have just tapped it.

   On the cell it says the thing focus actually means here — WHICH CELL TAKES
   THE NEXT DIGIT — and it moves as you type. The group ring is suppressed.

   ⚠ None of this appears in a static render. It was found by clicking the cells
   in a headless browser and diffing the computed style before and after. */
.dp-otp.dp-field__control--focus{box-shadow:none;border-color:transparent;outline:none;}
.dp-otp__cell--active{outline:var(--component-ftu-focus-ring-width) solid
    var(--semantic-color-surface-primary-subtle);
  outline-offset:var(--component-ftu-focus-ring-offset);}
.dp-resume__where{color:var(--tm-navy);}

/* ── row labels ──────────────────────────────────────────────────────────────
   dp-task__lbl and __sub are spans because dp-task owns their layout. Used in a
   row that does not own it, they need saying. */
.dp-list-row__text .dp-task__lbl,.dp-list-row__text .dp-task__sub,
.dp-joinrow__b .dp-task__lbl,.dp-joinrow__b .dp-task__sub,
.dp-task__body .dp-task__lbl,.dp-task__body .dp-task__sub{display:block;}

/* The 28px add disc inside a search result takes its 44pt target from an
   ::after overlay. Padding plus a negative margin would push the target outside
   its own row — the trap this recipe exists to avoid. */
.dp-list-row .dp-sheet-item__add{position:relative;}
.dp-list-row .dp-sheet-item__add::after{content:"";position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);min-width:var(--touch-target-min);
  min-height:var(--touch-target-min);}

/* ── dp-resrow ───────────────────────────────────────────────────────────────
   A graded resource. Three grades plus off, because available-or-not is not the
   condition of equipment in a constrained setting. The dot never carries the
   meaning alone — the word beside it does, per the DS rule on state. */
.dp-resrow{display:flex;align-items:center;gap:var(--primitive-spacing-lg);
  min-height:var(--component-ftu-control-height);
  padding:var(--primitive-spacing-md) var(--primitive-spacing-zero);
  border-bottom:var(--primitive-border-width-thin) solid var(--tm-line-soft);}
.dp-resrow__n{flex:1;min-width:0;font-size:var(--app-text-14);color:var(--tm-faint);}
.dp-resrow--on .dp-resrow__n{color:var(--tm-navy);
  font-weight:var(--primitive-typography-weight-semibold);}
.dp-resrow__g{display:inline-flex;align-items:center;gap:var(--primitive-spacing-md);
  font-size:var(--app-text-12);color:var(--tm-muted);white-space:nowrap;}
.dp-resrow--on .dp-resrow__g{color:var(--tm-navy);
  font-weight:var(--primitive-typography-weight-semibold);}
.dp-resrow__c{display:flex;flex:none;color:var(--semantic-color-border-neutral-default);}
.dp-dot{width:var(--component-ftu-grade-dot-size);height:var(--component-ftu-grade-dot-size);
  border-radius:var(--primitive-radius-full);flex:none;}
.dp-dot--usually{background:var(--semantic-color-text-success-default);}
.dp-dot--sometimes{background:var(--semantic-color-text-warning-default);}
.dp-dot--referral{background:var(--semantic-color-border-neutral-bold);}
.dp-dot--none{background:none;
  box-shadow:inset 0 0 0 var(--component-ftu-mark-border-width) var(--tm-line);}

/* ── dp-joinrow ──────────────────────────────────────────────────────────────
   A community, and whether you are joining it. The tag is the control. */
.dp-joinrow{display:flex;align-items:center;gap:var(--primitive-spacing-lg);
  min-height:var(--component-ftu-row-height);
  padding:var(--primitive-spacing-lg) var(--primitive-spacing-lg-xl);
  border:var(--primitive-border-width-thin) solid var(--tm-line-soft);
  border-radius:var(--primitive-radius-md);background:var(--semantic-color-contrast-light);
  margin-bottom:var(--primitive-spacing-md);}
.dp-joinrow--on{border-color:var(--semantic-color-interactive-primary-default);
  background:var(--tm-teal-bg);}
.dp-joinrow__b{flex:1;min-width:0;}
.dp-joinrow .dp-tg{flex:none;}

/* ── dp-scoperow ─────────────────────────────────────────────────────────────
   One geographic tier. The value is a word, not a segmented control — five
   stacked segmented controls is how the web ended up with four dead ones. */
.dp-scoperow{display:flex;align-items:center;gap:var(--primitive-spacing-lg);
  min-height:var(--component-ftu-row-height);
  padding:var(--primitive-spacing-lg) var(--primitive-spacing-zero);
  border-bottom:var(--primitive-border-width-thin) solid var(--tm-line-soft);}
.dp-scoperow__v{display:inline-flex;align-items:center;gap:var(--primitive-spacing-sm-md);
  flex:none;font-size:var(--app-text-14);
  font-weight:var(--primitive-typography-weight-semibold);color:var(--tm-faint);
  white-space:nowrap;}
.dp-scoperow--on .dp-scoperow__v{color:var(--semantic-color-interactive-primary-default);}

/* ── dp-tierrow ──────────────────────────────────────────────────────────────
   The three alert tiers, named Now / Today / Whenever rather than Acute /
   Relevant / Ambient, which are the internal model names. */
.dp-tierrow{display:flex;gap:var(--primitive-spacing-lg-xl);
  padding:var(--primitive-spacing-lg) var(--primitive-spacing-zero);
  border-bottom:var(--primitive-border-width-thin) solid var(--tm-line-soft);}
.dp-tierrow:last-child{border-bottom:var(--primitive-border-width-none);}
.dp-tierrow__k{flex:0 0 var(--component-ftu-tier-key-width);font-family:var(--font-mono);
  font-size:var(--app-text-12);letter-spacing:var(--app-tracking-caps);
  text-transform:uppercase;color:var(--semantic-color-text-accent-default);padding-top:var(--primitive-spacing-xs);}
.dp-tierrow__t{flex:1;min-width:0;font-size:var(--app-text-14);
  line-height:var(--primitive-typography-line-height-normal);color:var(--tm-muted);}
/* The channel, under the tier it belongs to. This row used to draw frequency as
   a run of ticks — one, five, fifteen. The runs did grow, but a tick says
   `more` without saying more of WHAT, so the reader had to supply the unit.
   Naming the channel carries the same argument and needs no key: only the top
   tier ever leaves the app. Nick, 20 Aug. */
.dp-tierrow__d{display:block;margin-top:var(--primitive-spacing-md);
  font-size:var(--app-text-12);color:var(--component-ftu-faint-on-wash);
  line-height:var(--primitive-typography-line-height-normal);}

/* ── dp-stdrow ───────────────────────────────────────────────────────────────
   A participation standard: the claim in body type, the mechanic that enforces
   it underneath. A standard with no mechanic under it is decoration. */
.dp-stdrow{display:flex;gap:var(--primitive-spacing-2xl);
  padding:var(--primitive-spacing-xl) var(--primitive-spacing-zero);
  border-bottom:var(--primitive-border-width-thin) solid var(--tm-line-soft);}
/* Teal, not navy: four navy glyphs this size would put a lot of near-black back
   on a screen that is already four bold sentences. This is the brand teal
   rather than the interactive one — nothing here is tappable. */
.dp-stdrow__ic{flex:none;display:flex;color:var(--tm-teal);
  margin-top:var(--primitive-spacing-zero);}
/* The text stops short of the right edge on purpose. At 32px the glyph is the
   thing that carries the row, and a measure running the full width beside it
   makes the two compete — the eye reads a wall of type with a mark stuck to the
   front. Holding the column back gives the glyph its own air and drops the
   claim to a line and a half. */
.dp-stdrow__b{flex:1;min-width:0;padding-right:var(--primitive-spacing-3xl);}
.dp-stdrow__c{display:block;font-size:var(--app-text-16);
  font-weight:var(--primitive-typography-weight-semibold);color:var(--tm-navy);
  line-height:var(--primitive-typography-line-height-tight);}
.dp-stdrow__m{display:block;font-size:var(--app-text-12);color:var(--tm-muted);
  margin-top:var(--primitive-spacing-md);
  line-height:var(--primitive-typography-line-height-normal);}

/* ── dp-costrow ──────────────────────────────────────────────────────────────
   What a skipped step costs, as a consequence rather than a warning. */
.dp-costrow{display:flex;gap:var(--primitive-spacing-lg);
  padding:var(--primitive-spacing-lg-xl) var(--primitive-spacing-zero);
  border-bottom:var(--primitive-border-width-thin) solid var(--tm-line-soft);}
.dp-costrow__ic{flex:none;color:var(--tm-gold-ink);
  margin-top:var(--primitive-spacing-xs);display:flex;}
.dp-costrow__b{flex:1;min-width:0;}
.dp-costrow__b b{display:block;font-size:var(--app-text-14);
  font-weight:var(--primitive-typography-weight-semibold);color:var(--tm-navy);
  line-height:var(--primitive-typography-line-height-tight);}
.dp-costrow__b small{display:block;font-size:var(--app-text-12);color:var(--tm-muted);
  margin-top:var(--primitive-spacing-sm);
  line-height:var(--primitive-typography-line-height-normal);}

/* ── ftu-doc ─────────────────────────────────────────────────────────────────
   Long-form legal and standards text, full column width. The web app renders
   this in a ~580px pane beside a photograph on an 1800px screen. */
.ftu-doc__h{font-size:var(--app-text-14);font-weight:var(--primitive-typography-weight-bold);
  color:var(--tm-navy);margin:var(--primitive-spacing-2xl) var(--primitive-spacing-zero)
  var(--primitive-spacing-md);}
.ftu-doc__h:first-child{margin-top:var(--primitive-spacing-lg);}
.ftu-doc__p{font-size:var(--app-text-14);
  line-height:var(--primitive-typography-line-height-normal);color:var(--tm-muted);
  margin:var(--primitive-spacing-zero);}
.ftu-doc__p--q{color:var(--tm-faint);font-style:italic;margin-top:var(--primitive-spacing-2xl);}

/* ── the numeric pad ─────────────────────────────────────────────────────────
   One keyboard family, digits only — a six-digit code does not want a QWERTY. */
.tm-kb--num .tm-kb__r{justify-content:center;}
.tm-kb--num .tm-kb__k{min-width:var(--component-ftu-keypad-key-width);
  font-size:var(--app-text-22);font-family:var(--font-mono);}

:root{
  /* One duration for the keyboard, so nothing else invents its own. */
  --component-ftu-kb-duration: .18s;
}

/* ── dp-kbdock ───────────────────────────────────────────────────────────────
   The keyboard's dock. Takes the bottom of the phone, and the screen's foot
   goes behind it rather than being pushed off — which is what iOS does, and
   what the logged rule about an autocomplete above a bottom dock implies. */
.dp-kbdock{position:absolute;left:var(--primitive-spacing-zero);
  right:var(--primitive-spacing-zero);bottom:var(--primitive-spacing-zero);
  z-index:var(--app-z-nav);transform:translateY(100%);
  transition:transform var(--component-ftu-kb-duration) ease-out;}
.aphone.is-kb .dp-kbdock{transform:translateY(0);}
.aphone.is-kb .ftu-foot{visibility:hidden;}
@media (prefers-reduced-motion: reduce){
  .dp-kbdock{transition:none;}
}
.dp-kbdock .dp-input-accessory{border-bottom:var(--primitive-border-width-thin) solid
  var(--semantic-color-border-neutral-default);}
.dp-input-accessory__label{flex:1;min-width:0;padding:var(--primitive-spacing-zero)
  var(--primitive-spacing-md);font-family:var(--font-mono);font-size:var(--app-text-12);
  letter-spacing:var(--app-tracking-caps);text-transform:uppercase;color:var(--tm-faint);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tm-kb__k{cursor:pointer;}
.tm-kb__k:active{background:var(--semantic-color-border-neutral-default);}

/* ── the caret blinks only while a field is being typed into ────────────────
   A caret on a screenshot is a state; a caret that blinks forever is noise. */
.dp-field__control--focus .dp-field__caret{animation:ftu-caret 1.06s step-end infinite;}
@keyframes ftu-caret{50%{opacity:0;}}
@media (prefers-reduced-motion: reduce){
  .dp-field__control--focus .dp-field__caret{animation:none;}
}

/* ── the picker sheet ────────────────────────────────────────────────────────
   dp-sheet is the DS's, unchanged. These are the parts a *picker* needs that a
   filter sheet did not: a chosen state, a two-line item, and an empty state for
   a dependent list whose parent has not been answered. */
.dp-sheet-scrim{cursor:pointer;}
.dp-pickitem{display:flex;align-items:center;gap:var(--primitive-spacing-lg);width:100%;
  min-height:var(--touch-target-min);text-align:left;font:inherit;cursor:pointer;
  padding:var(--primitive-spacing-lg) var(--primitive-spacing-zero);
  border:var(--primitive-border-width-none);
  border-bottom:var(--primitive-border-width-thin) solid var(--tm-line-soft);
  background:none;}
.dp-pickitem__b{flex:1;min-width:0;}
.dp-pickitem__n{display:block;font-size:var(--app-text-16);
  font-weight:var(--primitive-typography-weight-semibold);color:var(--tm-navy);}
.dp-pickitem__s{display:block;font-size:var(--app-text-12);color:var(--tm-muted);
  margin-top:var(--primitive-spacing-xs);
  line-height:var(--primitive-typography-line-height-snug);}
.dp-pickitem__mk{width:var(--component-ftu-choice-radio-size);
  height:var(--component-ftu-choice-radio-size);flex:none;
  border-radius:var(--primitive-radius-circle);
  border:var(--primitive-border-width-medium) solid var(--semantic-color-border-neutral-default);
  display:flex;align-items:center;justify-content:center;
  color:var(--semantic-color-text-neutral-contrast);}
.dp-pickitem--on .dp-pickitem__n{color:var(--tm-teal-700);}
.dp-pickitem--on .dp-pickitem__mk{background:var(--semantic-color-interactive-primary-default);
  border-color:var(--semantic-color-interactive-primary-default);}
.dp-sheet__empty{padding:var(--primitive-spacing-3xl) var(--primitive-spacing-zero);
  text-align:center;font-size:var(--app-text-14);color:var(--tm-muted);
  line-height:var(--primitive-typography-line-height-normal);}
.dp-sheet__empty b{color:var(--tm-navy);font-weight:var(--primitive-typography-weight-bold);}

/* ── ftu-flash ───────────────────────────────────────────────────────────────
   What the end of a path says instead of nothing. The pack's whole argument is
   against dead ends; a dead button at the end of it would be the same defect. */
.ftu-flash{position:absolute;left:var(--tm-gutter);right:var(--tm-gutter);
  bottom:var(--primitive-spacing-3xl-4xl);z-index:var(--app-z-nav);
  padding:var(--primitive-spacing-lg-xl) var(--primitive-spacing-xl);
  border-radius:var(--app-radius-group);background:var(--tm-navy);
  color:var(--semantic-color-text-neutral-contrast);font-size:var(--app-text-14);
  line-height:var(--primitive-typography-line-height-normal);
  box-shadow:var(--component-menu-shadow);}
.ftu-flash b{font-weight:var(--primitive-typography-weight-bold);}


/* ═══ REVIEW CHROME — not the product. Scoped to .rail / .notes / .scode ═══ */
/* the rail's reset — review furniture, scoped with the rest of it */
.rail .ftu-reset{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  min-height:44px;margin:2px 0 18px;padding:11px 12px;border-radius:10px;cursor:pointer;
  background:#122430;border:1px solid #1F3742;color:#B9CBD0;font-family:inherit;
  font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;}
.rail .ftu-reset:hover{border-color:#2C505E;color:#fff;}

.scode em{font-style:normal;font-size:10px;letter-spacing:.09em;padding:2px 6px;
  border-radius:4px;margin-left:8px;}
.scode em.web{background:rgba(87,199,196,.16);color:#57C7C4;}
.scode em.webp{background:rgba(201,132,63,.18);color:#E0A868;}
.scode em.new{background:rgba(233,30,140,.15);color:#F07AB8;}
.rail .lg{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 20px;}
.rail .lg em{font-style:normal;font-family:'DM Mono',monospace;font-size:9px;
  letter-spacing:.08em;padding:3px 7px;border-radius:4px;}
.rail .lg em.web{background:rgba(87,199,196,.16);color:#57C7C4;}
.rail .lg em.webp{background:rgba(201,132,63,.18);color:#E0A868;}
.rail .lg em.new{background:rgba(233,30,140,.15);color:#F07AB8;}
.rail .grp{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:#4E6D75;margin:20px 0 8px;padding-left:9px;}
.notes .par{display:flex;flex-direction:column;gap:6px;padding:12px 14px;border-radius:8px;
  background:#122430;border:1px solid #1F3742;margin:0 0 20px;}
.notes .par span{font-size:12px;color:#8AA3A8;line-height:1.5;}
.notes .par span b{color:#D7E5E7;}
.notes .par .t{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:#57C7C4;}

/*FTU-FOLD:end*/
/*RAILGRP:begin*/
/* ── .mgrpd — the index groups, collapsible ──────────────────────────────────
   Written by generators/apply_rail_groups_v6.py. The summary carries .mgrp's
   own type, colour and spacing so an open rail is pixel-identical to the flat
   one it replaced; the chevron and the count are the only additions. No card:
   .mstory is an object and earns a border, an index section is furniture. */
.mgrpd{border:0;background:none;}
.mgrpd > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:9px;
  font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:#5E7681;margin:var(--primitive-spacing-xl-2xl) 0 var(--primitive-spacing-md);}
.mgrpd > summary::-webkit-details-marker{display:none;}
.mgrpd > summary:hover{color:#8FA9B2;}
.mgrpd > summary .cv{display:flex;transition:transform .18s;}
.mgrpd[open] > summary .cv{transform:rotate(90deg);}
.mgrpd > summary .n{margin-left:auto;letter-spacing:0;color:#4E6D75;}

/* the switches, lifted out of the screen list and parked under the intro */
.railsw{display:flex;flex-direction:column;gap:var(--primitive-spacing-md);
  margin:var(--primitive-spacing-xl-2xl) 0 var(--primitive-spacing-sm);}
.railsw > button{margin:0;}
/*RAILGRP:end*//*NOTESHEAD:begin*/
/* ── the notes header — the stepper and the caption, on the right ───────────
   Written by generators/apply_notes_header_v6.py. */
/* .scode is a child of .scr, NOT of .phonewrap — checked in the DOM rather than
   assumed, after the first version of this rule matched nothing and the caption
   stayed under the phone while its copy appeared on the right. */
.scr > .scode{display:none;}
/* Air above the phone.

   ⚠ Scoped to DIRECT children of .stage because .notes is a child of .stage too
   — a bare `.scr` would push the notes column down with them. And it names
   .phonewrap as well as .scr because v6's script RE-PARENTS the active screen
   into a .phonewrap at runtime: the file has `.stage > .scr`, the live DOM has
   `.stage > .phonewrap > .scr`, so a rule written against the file padded only
   the screens that were hidden.

   A literal 30px rather than a token: this is review furniture, not the product
   surface, and no step on the ramp is 30. Nick, 20 Aug. */
.stage > .phonewrap,
.stage > .scr{padding-top:30px;}
.notes__top{position:sticky;top:0;z-index:3;background:#0A1A21;
  margin:0 0 var(--primitive-spacing-xl-2xl);padding-bottom:var(--primitive-spacing-lg);
  border-bottom:1px solid #16323C;}
 /* v6's own strip is left in the DOM and hidden: its script still writes to it,
    and a script writing to a detached node is a crash waiting to happen. Ours
    is a separate element that reads the stories rather than being told by one. */
.stostrip{display:none !important;}
.notes__step{display:flex;align-items:center;gap:9px;margin:0 0 10px;
  font-family:'DM Mono',monospace;font-size:11px;color:#7E9AA3;}
.notes__step[hidden]{display:none;}
.notes__step .l{flex:1;min-width:0;}
.notes__step .l b{color:#CFE3E6;}
.notes__step button{font:inherit;cursor:pointer;padding:4px 10px;border-radius:7px;
  background:#122430;border:1px solid #1F3742;color:#B9CBD0;}
.notes__step button:hover:not(:disabled){border-color:#2C505E;color:#fff;}
.notes__step button:disabled{opacity:.35;cursor:default;}
.notes__top:empty{display:none;}
/* the mirrored caption. .scode's own rules style the code and the pills; this
   only has to lay them out in a narrower column than the one they were cut for */
.notes__cap{display:flex;flex-wrap:wrap;align-items:baseline;gap:7px;
  font-family:'DM Mono',monospace;font-size:11px;color:#7E9AA3;}
.notes__cap b{color:#CFE3E6;}
.notes__cap i{font-style:normal;color:#4E6D75;}
/*NOTESHEAD:end*/