/* ============================================================================================
   TutorTalks Design Language 2026 — component kit
   Prefix .tt-. Built only on tokens.css: no literal colours (every hue is a token), no JavaScript,
   no ::before/::after content (every mark, glyph, rule, caret and ring is a real element).
   Flex/grid layout, explicit sizes (36 / 32 / 44 px targets).
   Every interactive state is reachable by pseudo-class AND by a class so a static comp can show it:
   .is-hover .is-active .is-focus .is-disabled .is-selected .is-error .is-busy .is-checked .is-mixed .is-on
   .is-current .is-held .is-listening .is-armed .is-playing .is-blocked .is-empty .is-readonly .is-sorted .is-warn
   Context modifiers remap the tokens for anything placed on a field: .tt-on-navy (dark field; .tt-masthead
   carries the same remap), .tt-on-live (teal field) and .tt-on-cream (the reading-field context column).
   SVG glyphs inside components use currentColor; the host element always sets `color`.
   ============================================================================================ */


/* ---------- 0. Base, contexts, utilities ---------- */
.tt-root { font: var(--text-body); letter-spacing: var(--tracking-body); color: var(--color-ink); background: var(--color-ground); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.tt-root *, .tt-root *::before, .tt-root *::after { box-sizing: border-box; }
.tt-root :where(p, h1, h2, h3, h4, ul, ol, figure) { margin: 0; padding: 0; }
.tt-root :where(ul, ol) { list-style: none; }
.tt-root :where(button, input, select, textarea) { font: inherit; color: inherit; letter-spacing: inherit; margin: 0; }
.tt-root :where(a) { color: inherit; text-decoration: none; }
.tt-root b, .tt-root strong { font-weight: 600; }   /* emphasis is 600 everywhere (the browser's 700 never leaks); a component that wants another style sets a --text-* token */
.tt-root :where(svg) { display: block; flex: none; }
.tt-root :where([data-icon]) { display: block; flex: none; }
.tt-num { font-variant-numeric: tabular-nums; }

/* a dark field: every component inside reads the on-navy values (the field is navy in both themes).
   .tt-masthead is self-sufficient: it carries the same remap, so its navigation, utilities and wordmark need no extra class. */
.tt-on-navy, .tt-masthead {
  --color-ground: var(--color-field-navy);
  --color-input: var(--color-surface-raised);
  --color-ink: var(--color-ink-on-navy);
  --color-ink-2: var(--color-ink-2-on-navy);
  --color-ink-3: var(--color-ink-3-on-navy);
  --color-ink-muted: var(--color-ink-muted-on-navy);
  --color-rule: var(--color-rule-on-navy);
  --color-edge: var(--color-edge-on-navy);
  --color-edge-strong: var(--color-ink-on-navy);
  --color-primary: var(--color-live);
  --color-primary-label: var(--color-ink-on-bright);
  --color-primary-hover: var(--color-live-hover);
  --color-primary-active: var(--color-live-active);
  --color-live-text: var(--color-live);
  --color-link: var(--color-ink-on-navy);
  --color-link-hover: var(--color-live);
  --color-focus: var(--color-focus-on-navy);
  --color-hover: var(--color-hover-on-navy);
  --color-selected: var(--color-selected-on-navy);
  --color-danger: var(--color-danger-on-navy);
  --color-danger-hover: var(--color-danger-hover-on-navy);
  --color-danger-label: var(--color-ink-on-bright);
  --color-warning: var(--color-warning-on-navy);
  --color-success: var(--color-success-on-navy);
  --color-info: var(--color-info-on-navy);
  --color-danger-tint: var(--color-danger-tint-on-navy);
  --color-warning-tint: var(--color-warning-tint-on-navy);
  --color-success-tint: var(--color-success-tint-on-navy);
  --color-info-tint: var(--color-info-tint-on-navy);
  --color-meter-track: var(--color-surface-raised);
  --color-chart-1: var(--color-chart-1-on-navy);
  --color-chart-2: var(--color-chart-2-on-navy);
  --color-chart-grid: var(--color-rule-on-navy);
  --color-kbd-edge-on-primary: var(--color-kbd-edge-on-live);
  color: var(--color-ink-on-navy);
}
.tt-on-navy { background: var(--color-field-navy); }
/* a teal field: navy ink, navy actions (white never sits on teal); fixed in both themes */
.tt-on-live {
  --color-ground: var(--color-field-live);
  --color-input: var(--color-cell-on-live);
  --color-ink: var(--color-ink-on-live); --color-ink-2: var(--color-ink-on-live); --color-ink-3: var(--color-ink-3-on-live); --color-ink-muted: var(--color-ink-3-on-live);
  --color-rule: var(--color-rule-on-live); --color-edge: var(--color-ink-on-live); --color-edge-strong: var(--color-ink-on-live);
  --color-primary: var(--color-primary-fixed); --color-primary-label: var(--color-primary-fixed-label); --color-primary-hover: var(--color-primary-fixed-hover); --color-primary-active: var(--color-primary-fixed-active);
  --color-live-text: var(--color-ink-on-live); --color-link: var(--color-ink-on-live); --color-link-hover: var(--color-ink-on-live); --color-focus: var(--color-ink-on-live);
  --color-hover: var(--color-hover-on-live); --color-selected: var(--color-selected-on-live);
  /* status on teal: the measured dark members of each family; no tint ever sits on teal (a blocked line there keeps its rule and its word) */
  --color-danger: var(--color-danger-on-live); --color-danger-hover: var(--color-danger-hover-on-live); --color-danger-label: var(--color-primary-fixed-label); --color-danger-tint: var(--color-danger-tint-on-live);
  --color-warning: var(--color-warning-on-live); --color-success: var(--color-success-on-live); --color-info: var(--color-info-on-live);
  --color-warning-tint: transparent; --color-success-tint: transparent; --color-info-tint: transparent;
  background: var(--color-field-live); color: var(--color-ink-on-live);
}
/* the reading-field context column: same ink, cream ground (inputs stay white) */
.tt-on-cream { --color-ground: var(--color-field-reading); background: var(--color-field-reading); }

/* type styles as classes (name = token) */
.tt-type-display-xl { font: var(--text-display-xl); letter-spacing: var(--tracking-display-xl); }
.tt-type-display-lg { font: var(--text-display-lg); letter-spacing: var(--tracking-display-lg); }
.tt-type-display-md { font: var(--text-display-md); letter-spacing: var(--tracking-display-md); }
.tt-type-title-xl { font: var(--text-title-xl); letter-spacing: var(--tracking-title-xl); }
.tt-type-title-lg { font: var(--text-title-lg); letter-spacing: var(--tracking-title-lg); }
.tt-type-title-md { font: var(--text-title-md); letter-spacing: var(--tracking-title-md); }
.tt-type-title-sm { font: var(--text-title-sm); letter-spacing: var(--tracking-title-sm); }
.tt-type-attention { font: var(--text-attention); letter-spacing: var(--tracking-attention); }
.tt-type-figure-xl { font: var(--text-figure-xl); letter-spacing: var(--tracking-figure-xl); }
.tt-type-figure-lg { font: var(--text-figure-lg); letter-spacing: var(--tracking-figure-lg); }
.tt-type-figure-md { font: var(--text-figure-md); letter-spacing: var(--tracking-figure-md); }
.tt-type-figure-unit { font: var(--text-figure-unit); letter-spacing: var(--tracking-figure-unit); }
.tt-type-note-numeral { font: var(--text-note-numeral); letter-spacing: var(--tracking-note-numeral); }
.tt-type-quote-lg { font: var(--text-quote-lg); letter-spacing: var(--tracking-quote-lg); }
.tt-type-quote { font: var(--text-quote); letter-spacing: var(--tracking-quote); }
.tt-type-reading { font: var(--text-reading); letter-spacing: var(--tracking-reading); }
.tt-type-caption { font: var(--text-caption); letter-spacing: var(--tracking-caption); }
.tt-type-code { font: var(--text-code); letter-spacing: var(--tracking-code); font-variant-numeric: tabular-nums; }
.tt-type-code-lg { font: var(--text-code-lg); letter-spacing: var(--tracking-code-lg); font-variant-numeric: tabular-nums; }
.tt-type-code-sm { font: var(--text-code-sm); letter-spacing: var(--tracking-code-sm); font-variant-numeric: tabular-nums; }
.tt-type-code-inline { font: var(--text-code-inline); letter-spacing: var(--tracking-code-inline); font-variant-numeric: tabular-nums; }
.tt-type-lead { font: var(--text-lead); letter-spacing: var(--tracking-lead); }
.tt-type-body-lg { font: var(--text-body-lg); letter-spacing: var(--tracking-body-lg); }
.tt-type-body { font: var(--text-body); letter-spacing: var(--tracking-body); }
.tt-type-body-sm { font: var(--text-body-sm); letter-spacing: var(--tracking-body-sm); }
.tt-type-ui { font: var(--text-ui); letter-spacing: var(--tracking-ui); }
.tt-type-button { font: var(--text-button); letter-spacing: var(--tracking-button); }
.tt-type-button-lg { font: var(--text-button-lg); letter-spacing: var(--tracking-button-lg); }
.tt-type-button-sm { font: var(--text-button-sm); letter-spacing: var(--tracking-button-sm); }
.tt-type-kicker { font: var(--text-kicker); letter-spacing: var(--tracking-kicker); }
.tt-type-label { font: var(--text-label); letter-spacing: var(--tracking-label); }
.tt-type-label-caps { font: var(--text-label-caps); letter-spacing: var(--tracking-label-caps); text-transform: uppercase; }
.tt-type-micro { font: var(--text-micro); letter-spacing: var(--tracking-micro); }
.tt-type-note { font: var(--text-note); letter-spacing: var(--tracking-note); }
.tt-type-ui-sm { font: var(--text-ui-sm); letter-spacing: var(--tracking-ui-sm); }
.tt-ink-2 { color: var(--color-ink-2); }
.tt-ink-3 { color: var(--color-ink-3); }

/* focus: live via :focus-visible, static via .is-focus; both draw a 2px ring 2px outside the control.
   The compound labels (.tt-check, .tt-radio, .tt-switch) are excluded here — their ring is drawn on the box / dot / track below,
   so a focused checkbox or switch never rings twice; :where() keeps the specificity of the generic rule unchanged. */
.tt-root :focus-visible, .tt-root .is-focus:where(:not(.tt-check, .tt-radio, .tt-switch)) { outline: none; box-shadow: 0 0 0 2px var(--color-ground), 0 0 0 4px var(--color-focus); }
/* a wrapper that draws the ring as a real element for comps */
.tt-focus-ring { display: inline-flex; padding: 2px; border: 2px solid var(--color-focus); border-radius: calc(var(--radius-control) + 4px); }
/* a text caret (a real 2px element) */
.tt-caret { display: block; width: 2px; height: 16px; background: var(--color-ink); flex: none; }

/* rules */
.tt-rule { height: 0; border: 0; border-top: var(--rule-hair); width: 100%; }
.tt-rule--strong { border-top: var(--rule-strong); }
.tt-rule--heavy { border-top: var(--rule-heavy); }
.tt-vrule { width: 0; align-self: stretch; border-left: var(--rule-hair); }

/* ---------- 1. Logo ---------- */
/* live Lora 700 text beside one spark path (stroke currentColor, coloured here). Inside .tt-on-navy or .tt-masthead the context reverses it;
   .tt-logo--reversed does the same on its own, .tt-logo--mono sets everything in the ink. Clear space: the cap height on every side. */
.tt-logo { display: inline-flex; align-items: baseline; padding: 3px 0 2px; font: var(--text-logo); letter-spacing: var(--tracking-logo); white-space: nowrap; text-decoration: none; }   /* the padding makes the 22px lockup a 32px target; --text-logo is a token so the letters bind to a Figma text style */
.tt-logo__tutor { color: var(--color-ink); }
.tt-logo__talks { color: var(--color-live-text); }
.tt-logo__spark { flex: none; display: block; width: 0.36em; height: 0.8em; margin-left: -0.096em; color: var(--color-attention); }   /* the 9 x 20 spark box, bottom on the baseline (kit/logo.html) */
.tt-logo--reversed { --color-ink: var(--color-ink-on-navy); --color-live-text: var(--color-live); }
.tt-logo--mono { --color-live-text: var(--color-ink); }
.tt-logo--mono .tt-logo__spark { color: var(--color-ink); }
.tt-logo--28 { font: var(--text-logo-28); letter-spacing: var(--tracking-logo-28); }
.tt-logo--36 { font: var(--text-logo-36); letter-spacing: var(--tracking-logo-36); }
.tt-logo--64 { font: var(--text-logo-64); letter-spacing: var(--tracking-logo-64); }
.tt-monogram { display: block; }

/* ---------- 2. Masthead and navigation ---------- */
/* gap 24 (not 48): the wordmark (131) + navigation (473) + the utilities with the longest role, `Modern Languages · Billing admin` (673),
   must fit the 1344 measure — 131 + 24 + 473 + 24 + 673 = 1325 — so the utilities end at x = 1392 for every role, never past the gutter */
.tt-masthead { height: var(--size-masthead); display: flex; align-items: center; gap: var(--space-6); padding: 0 var(--layout-gutter); background: var(--color-field-navy); }
.tt-nav { display: flex; align-items: stretch; height: var(--size-masthead); gap: var(--space-6); }
.tt-nav__item { position: relative; display: flex; align-items: center; height: var(--size-masthead); padding: 0 2px; font: var(--text-ui); color: var(--color-ink-2); text-decoration: none; }
.tt-nav__item:hover, .tt-nav__item.is-hover { color: var(--color-ink); }
.tt-nav__item.is-current { color: var(--color-ink); font-weight: 600; }
.tt-nav__item:focus-visible, .tt-nav__item.is-focus { box-shadow: inset 0 0 0 2px var(--color-focus); border-radius: var(--radius-control); color: var(--color-ink); }
.tt-nav__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--color-live); display: none; }
.tt-nav__item.is-current .tt-nav__bar { display: block; }
/* the utilities are one partial on every 1440 instructor frame: Studio · Join session · Help · rule · person · Sign out;
   at 16px gaps the set measures 638px and ends at x = 1392 beside the five-item navigation, so nothing wraps (every label is nowrap) */
.tt-masthead__util { margin-left: auto; display: flex; align-items: center; gap: var(--space-4); }
.tt-masthead__link { display: flex; align-items: center; gap: var(--space-2); height: 32px; font: var(--text-ui); color: var(--color-ink-2); white-space: nowrap; }
.tt-masthead__link:hover, .tt-masthead__link.is-hover { color: var(--color-ink); }
.tt-masthead__sep { width: 1px; height: 28px; background: var(--color-rule); }
.tt-person { display: flex; align-items: center; gap: var(--space-3); height: 36px; }
.tt-person__text { display: flex; flex-direction: column; }
.tt-person__name { font: var(--text-button-sm); color: var(--color-ink); white-space: nowrap; }                                   /* the name with its title: Dr. Lena Ortiz */
.tt-person__role { font: var(--text-note); letter-spacing: var(--tracking-note); color: var(--color-ink-2); white-space: nowrap; }  /* department · role (Owner / Admin / Billing admin / Instructor); the plan name shows on Account only */
/* phone masthead: one shared partial on every instructor 390 frame.
   Row 1 (.tt-masthead__row, 56px): wordmark · Sign out (visible, never in a menu) · 44px Menu (icon list-bullets; x when open).
   Row 2 (.tt-nav.tt-nav--phone, 44px): the five views, ui-sm at 8px gaps spread across the width — the labels measure ≈320px at 13px,
   so 320 + 4×8 + 24 of padding = 376 ≤ 390 and nothing is clipped (no overflow:hidden; a sixth item would need a scroll cue, not a clip).
   .tt-masthead--stack stacks the two rows inside the one navy band. */
.tt-masthead--phone { padding: 0 var(--space-4); gap: var(--space-4); justify-content: space-between; }
.tt-masthead--stack { height: auto; flex-direction: column; align-items: stretch; padding: 0; gap: 0; }
.tt-masthead__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); height: var(--size-masthead); padding: 0 var(--space-4); }
.tt-masthead__util--phone { gap: var(--space-1); margin-left: 0; }
.tt-masthead--phone .tt-masthead__link { height: var(--size-control-phone); padding: 0 10px; }
.tt-nav--phone { height: var(--size-control-phone); gap: var(--space-2); padding: 0 12px; justify-content: space-between; border-top: var(--rule-on-navy); }
.tt-nav--phone .tt-nav__item { height: var(--size-control-phone); flex: 0 1 auto; padding: 0 2px; font: var(--text-ui-sm); letter-spacing: var(--tracking-ui-sm); }
.tt-nav--phone .tt-nav__item.is-current { font: var(--text-kicker); letter-spacing: var(--tracking-kicker); }

/* ---------- 3. Buttons ---------- */
.tt-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: var(--size-control); padding: 0 14px; border: 1px solid transparent; border-radius: var(--radius-control); font: var(--text-button); letter-spacing: var(--tracking-button); white-space: nowrap; cursor: pointer; text-decoration: none; background: transparent; color: var(--color-ink); }
.tt-btn--compact { height: var(--size-control-compact); padding: 0 12px; font: var(--text-button-sm); }
.tt-btn--phone { height: var(--size-control-phone); padding: 0 18px; font: var(--text-button-lg); }   /* the 44 size: phones and the stage composer */
.tt-btn--block { width: 100%; }
.tt-btn__icon { color: inherit; }
.tt-btn__label { display: block; }
/* primary: navy fill, cream label (teal fill, navy label inside .tt-on-navy) */
.tt-btn--primary { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-primary-label); }
.tt-btn--primary:hover, .tt-btn--primary.is-hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
.tt-btn--primary:active, .tt-btn--primary.is-active { background: var(--color-primary-active); border-color: var(--color-primary-active); }
/* secondary: white fill, 1px edge, navy label (transparent, slate edge, cream label on navy) */
.tt-btn--secondary { background: var(--color-input); border-color: var(--color-edge); color: var(--color-ink); }
.tt-on-navy .tt-btn--secondary, .tt-on-live .tt-btn--secondary { background: transparent; }
.tt-btn--secondary:hover, .tt-btn--secondary.is-hover { border-color: var(--color-edge-strong); background: var(--color-hover); }
.tt-btn--secondary:active, .tt-btn--secondary.is-active { border-color: var(--color-edge-strong); background: var(--color-selected); }
/* quiet: label only, hover wash */
.tt-btn--quiet { color: var(--color-ink); padding: 0 10px; }
.tt-btn--quiet:hover, .tt-btn--quiet.is-hover { background: var(--color-hover); }
.tt-btn--quiet:active, .tt-btn--quiet.is-active { background: var(--color-selected); }
/* danger: never primary-shaped in context — white fill, danger edge and label; pressed = the tint with the darker edge and label (it keeps its outline shape) */
.tt-btn--danger { background: var(--color-input); border-color: var(--color-danger); color: var(--color-danger); }
.tt-on-navy .tt-btn--danger, .tt-on-live .tt-btn--danger { background: transparent; }   /* on teal: --color-danger-on-live edge and label (5.30:1), e.g. End on Live now */
.tt-btn--danger:hover, .tt-btn--danger.is-hover { background: var(--color-danger-tint); }
.tt-btn--danger:active, .tt-btn--danger.is-active { background: var(--color-danger-tint); border-color: var(--color-danger-hover); color: var(--color-danger-hover); }
/* danger-solid: only the confirm button of a destructive dialog; its label token is white in light and navy in dark (salmon fill) */
.tt-btn--danger-solid { background: var(--color-danger); border-color: var(--color-danger); color: var(--color-danger-label); }
.tt-btn--danger-solid:hover, .tt-btn--danger-solid.is-hover { background: var(--color-danger-hover); border-color: var(--color-danger-hover); }
/* shared states: disabled is dimmed, never hidden — the label stays ink-3 (4.2:1 on the track, 5.1:1 on the wash) so the hint beside it explains a button you can read */
.tt-btn:disabled, .tt-btn.is-disabled { cursor: default; pointer-events: none; background: var(--color-hover); border-color: var(--color-rule); color: var(--color-ink-3); }
.tt-btn--primary:disabled, .tt-btn--primary.is-disabled { background: var(--color-meter-track); border-color: var(--color-meter-track); color: var(--color-ink-3); }
.tt-btn.is-busy { pointer-events: none; }
.tt-btn.is-busy .tt-btn__label, .tt-btn.is-busy .tt-btn__icon { opacity: 0.55; }
.tt-btn .tt-spinner { display: none; }
.tt-btn.is-busy .tt-spinner { display: block; }
.tt-spinner { width: 16px; height: 16px; color: inherit; }
@media (prefers-reduced-motion: no-preference) { .tt-spinner { animation: tt-spin 0.9s linear infinite; } @keyframes tt-spin { to { transform: rotate(360deg); } } }
/* the orb: the one whole-dialog wait indicator (the AI designer and AI edit Working steps; 28 beside a stage line in a thread). A navy disc with two quiet rings, flat and without glow, coloured through currentColor; it breathes only when motion is allowed. The spinner stays the in-control busy mark. */
.tt-orb { display: block; width: 112px; height: 112px; color: var(--color-ink); flex: none; }
.tt-orb--28 { width: 28px; height: 28px; }
.tt-orb__core, .tt-orb__ring { transform-origin: 56px 56px; }
@media (prefers-reduced-motion: no-preference) { .tt-orb__core { animation: tt-breathe 2.4s ease-in-out infinite; } .tt-orb__ring { animation: tt-ripple 2.4s ease-in-out infinite; } .tt-orb__ring--outer { animation-delay: 0.4s; } @keyframes tt-breathe { 50% { transform: scale(1.08); } } @keyframes tt-ripple { 50% { transform: scale(1.03); stroke-opacity: 0.4; } } }
/* keycap hint inside a button or a hint line */
.tt-kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border: 1px solid var(--color-edge); border-radius: var(--radius-control); font: var(--text-micro); color: var(--color-ink-2); background: var(--color-input); }
.tt-btn--primary .tt-kbd { background: transparent; border-color: var(--color-kbd-edge-on-primary); color: var(--color-primary-label); }
/* icon-only button */
.tt-icon-btn { display: inline-flex; flex: none; align-items: center; justify-content: center; width: var(--size-control); height: var(--size-control); border: 1px solid transparent; border-radius: var(--radius-control); background: transparent; color: var(--color-ink); cursor: pointer; }
.tt-icon-btn--compact { width: var(--size-control-compact); height: var(--size-control-compact); }
.tt-icon-btn--phone { width: var(--size-control-phone); height: var(--size-control-phone); }
.tt-icon-btn--secondary { border-color: var(--color-edge); background: var(--color-input); }
.tt-on-navy .tt-icon-btn--secondary, .tt-masthead .tt-icon-btn--secondary, .tt-on-live .tt-icon-btn--secondary { background: transparent; }
.tt-icon-btn:hover, .tt-icon-btn.is-hover { background: var(--color-hover); }
.tt-icon-btn:active, .tt-icon-btn.is-active { background: var(--color-selected); }
.tt-icon-btn:disabled, .tt-icon-btn.is-disabled { color: var(--color-ink-muted); pointer-events: none; }
/* link: bare .tt-link only inside a sentence; a standalone link is .tt-link--action (≥32px tall, 44 on a phone) */
.tt-link { color: var(--color-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--color-link); cursor: pointer; }
.tt-link:hover, .tt-link.is-hover { color: var(--color-link-hover); text-decoration-color: var(--color-link-hover); }
.tt-link--action { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font: var(--text-button-sm); white-space: nowrap; }
.tt-link--arrow { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- 4. Segmented control ---------- */
/* a 34px frame so each item is a 32px target; no overflow clipping, so the focus ring shows (the end items round their own corners) */
.tt-seg { display: inline-flex; align-self: flex-start; height: calc(var(--size-control-compact) + 2px); border: 1px solid var(--color-edge); border-radius: var(--radius-control); background: var(--color-input); }
.tt-on-navy .tt-seg, .tt-on-live .tt-seg { background: transparent; }
.tt-seg--36 { height: calc(var(--size-control) + 2px); }
.tt-seg--44 { height: calc(var(--size-control-phone) + 2px); }
.tt-seg__item { display: flex; align-items: center; gap: 6px; padding: 0 12px; border-left: 1px solid var(--color-rule); font: var(--text-ui-sm); letter-spacing: var(--tracking-ui-sm); color: var(--color-ink-2); white-space: nowrap; cursor: pointer; background: transparent; border-top: 0; border-right: 0; border-bottom: 0; }
.tt-seg__item:first-child { border-left: 0; border-radius: 1px 0 0 1px; }
.tt-seg__item:last-child { border-radius: 0 1px 1px 0; }
.tt-seg__item:hover, .tt-seg__item.is-hover { background: var(--color-hover); color: var(--color-ink); }
.tt-seg__item.is-selected { background: var(--color-primary); color: var(--color-primary-label); font-weight: 600; border-left-color: var(--color-primary); }
.tt-seg__item.is-selected + .tt-seg__item { border-left-color: var(--color-primary); }
.tt-on-navy .tt-seg__item.is-selected { background: var(--color-ink-on-navy); color: var(--color-ink-on-bright); border-left-color: var(--color-ink-on-navy); }
.tt-on-navy .tt-seg__item.is-selected + .tt-seg__item { border-left-color: var(--color-ink-on-navy); }
.tt-seg__item:disabled, .tt-seg__item.is-disabled { color: var(--color-ink-muted); pointer-events: none; }

/* ---------- 5. Fields: label above, control, hint below, counter, inline error ---------- */
.tt-field { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.tt-field__label { display: flex; align-items: baseline; gap: 6px; font: var(--text-label); letter-spacing: var(--tracking-label); color: var(--color-ink); }
.tt-field__optional { font: var(--text-micro); color: var(--color-ink-3); }
.tt-field__required { font: var(--text-micro); color: var(--color-ink-3); }
.tt-field__hint { font: var(--text-body-sm); color: var(--color-ink-2); }
.tt-field__foot { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.tt-field__counter { font: var(--text-micro); font-variant-numeric: tabular-nums; color: var(--color-ink-3); white-space: nowrap; }
.tt-field__counter.is-warn { color: var(--color-warning); font-weight: 600; }
.tt-field__counter.is-error { color: var(--color-danger); font-weight: 600; }
/* on navy the input takes the raised surface, the slate edge and cream ink through the context remap (the stage composer) */
.tt-input { display: flex; align-items: center; gap: 2px; width: 100%; height: var(--size-control); padding: 0 12px; border: 1px solid var(--color-edge); border-radius: var(--radius-control); background: var(--color-input); color: var(--color-ink); font: var(--text-body); }
.tt-input--phone { height: var(--size-control-phone); font: var(--text-body-lg); }   /* the 44 size, 16px text so a phone does not zoom */
.tt-input::placeholder { color: var(--color-ink-3); }
.tt-textarea::placeholder { color: var(--color-ink-3); }
.tt-input__placeholder { color: var(--color-ink-3); }
.tt-input:hover, .tt-input.is-hover { border-color: var(--color-edge-strong); }
.tt-input:focus-visible, .tt-input.is-focus { border-color: var(--color-edge-strong); }
.tt-input:disabled, .tt-input.is-disabled { background: var(--color-hover); border-color: var(--color-rule); color: var(--color-ink-muted); }
.tt-input.is-readonly { background: var(--color-hover); }
.tt-input.is-error, .tt-field.is-error .tt-input, .tt-field.is-error .tt-textarea { border-color: var(--color-danger); }
.tt-textarea { display: block; width: 100%; min-height: 96px; padding: 8px 12px; border: 1px solid var(--color-edge); border-radius: var(--radius-control); background: var(--color-input); color: var(--color-ink); font: var(--text-body); resize: vertical; }
.tt-textarea:hover, .tt-textarea.is-hover { border-color: var(--color-edge-strong); }
.tt-textarea.is-focus, .tt-textarea:focus-visible { border-color: var(--color-edge-strong); }
.tt-textarea:disabled, .tt-textarea.is-disabled { background: var(--color-hover); border-color: var(--color-rule); color: var(--color-ink-muted); }
.tt-inline-error { display: flex; align-items: flex-start; gap: 6px; font: var(--text-body-sm); color: var(--color-danger); }
.tt-inline-error [data-icon], .tt-inline-error svg { margin-top: 1px; }
/* input with a leading icon (search) */
.tt-input-wrap { position: relative; display: flex; align-items: center; width: 100%; }
.tt-input-wrap__icon { position: absolute; left: 10px; color: var(--color-ink-3); pointer-events: none; }
.tt-input-wrap .tt-input { padding-left: 34px; }
/* select */
.tt-select { position: relative; display: flex; align-items: center; width: 100%; height: var(--size-control); border: 1px solid var(--color-edge); border-radius: var(--radius-control); background: var(--color-input); color: var(--color-ink); font: var(--text-body); cursor: pointer; }
.tt-select__value { flex: 1; padding: 0 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-select__caret { width: 32px; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--color-ink-2); }
.tt-select:hover, .tt-select.is-hover { border-color: var(--color-edge-strong); }
.tt-select.is-focus { border-color: var(--color-edge-strong); }
.tt-select.is-disabled { background: var(--color-hover); border-color: var(--color-rule); color: var(--color-ink-muted); pointer-events: none; }
.tt-select.is-error { border-color: var(--color-danger); }

/* checkbox, radio, switch: a 32px-tall row, the control, the text and the effect stated beside it; the check mark is currentColor on the box */
.tt-check, .tt-radio, .tt-switch { display: flex; align-items: flex-start; gap: 10px; min-height: 32px; padding: 6px 0; cursor: pointer; }
.tt-check__box { position: relative; width: 18px; height: 18px; margin-top: 1px; border: 1px solid var(--color-edge); border-radius: var(--radius-control); background: var(--color-input); color: var(--color-primary-label); display: flex; align-items: center; justify-content: center; flex: none; }
.tt-check__mark { display: none; }
.tt-check.is-checked .tt-check__box { background: var(--color-primary); border-color: var(--color-primary); }
.tt-check.is-checked .tt-check__mark { display: block; }
.tt-check.is-mixed .tt-check__box { background: var(--color-primary); border-color: var(--color-primary); }
.tt-check.is-mixed .tt-check__dash { display: block; }
.tt-check__dash { display: none; }
.tt-check:hover .tt-check__box, .tt-check.is-hover .tt-check__box { border-color: var(--color-edge-strong); }
.tt-check.is-focus .tt-check__box { box-shadow: 0 0 0 2px var(--color-ground), 0 0 0 4px var(--color-focus); }
.tt-check.is-disabled, .tt-radio.is-disabled, .tt-switch.is-disabled { cursor: default; pointer-events: none; }
.tt-check.is-disabled .tt-check__box { background: var(--color-hover); border-color: var(--color-rule); }
/* checked (or mixed) AND disabled: the box dims to the muted ink and keeps its mark, so a locked-on setting never reads as unchecked (disabled is exempt from the ratio floor) */
.tt-check.is-checked.is-disabled .tt-check__box, .tt-check.is-mixed.is-disabled .tt-check__box { background: var(--color-ink-muted); border-color: var(--color-ink-muted); }
.tt-check.is-disabled .tt-check__text, .tt-radio.is-disabled .tt-check__text, .tt-switch.is-disabled .tt-check__text { color: var(--color-ink-muted); }
.tt-check.is-error .tt-check__box { border-color: var(--color-danger); }
.tt-check__text { display: flex; flex-direction: column; gap: 2px; font: var(--text-body); color: var(--color-ink); }
.tt-check__effect { font: var(--text-body-sm); color: var(--color-ink-2); }
.tt-radio__dot { position: relative; width: 18px; height: 18px; margin-top: 1px; border: 1px solid var(--color-edge); border-radius: 50%; background: var(--color-input); display: flex; align-items: center; justify-content: center; flex: none; }
.tt-radio__inner { width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary); display: none; }
.tt-radio.is-checked .tt-radio__dot { border-color: var(--color-primary); }
.tt-radio.is-checked .tt-radio__inner { display: block; }
.tt-radio:hover .tt-radio__dot, .tt-radio.is-hover .tt-radio__dot { border-color: var(--color-edge-strong); }
.tt-radio.is-focus .tt-radio__dot { box-shadow: 0 0 0 2px var(--color-ground), 0 0 0 4px var(--color-focus); }
.tt-radio.is-disabled .tt-radio__dot { background: var(--color-hover); border-color: var(--color-rule); }
.tt-radio.is-checked.is-disabled .tt-radio__dot { border-color: var(--color-ink-muted); }
.tt-radio.is-checked.is-disabled .tt-radio__inner { background: var(--color-ink-muted); }
.tt-radio.is-error .tt-radio__dot { border-color: var(--color-danger); }
.tt-switch__track { position: relative; width: 36px; height: 20px; margin-top: 1px; border: 1px solid var(--color-edge); border-radius: var(--radius-control); background: var(--color-input); display: flex; align-items: center; padding: 2px; flex: none; }
.tt-switch__knob { width: 14px; height: 14px; border-radius: var(--radius-control); background: var(--color-edge); margin-left: 0; }
.tt-switch.is-on .tt-switch__track { background: var(--color-primary); border-color: var(--color-primary); justify-content: flex-end; }
.tt-switch.is-on .tt-switch__knob { background: var(--color-primary-label); }
.tt-switch:hover .tt-switch__track, .tt-switch.is-hover .tt-switch__track { border-color: var(--color-edge-strong); }
.tt-switch.is-focus .tt-switch__track, .tt-switch:focus-within .tt-switch__track { box-shadow: 0 0 0 2px var(--color-ground), 0 0 0 4px var(--color-focus); }   /* live focus lands on the hidden input, so the track rings via :focus-within */
.tt-switch.is-disabled .tt-switch__track { background: var(--color-hover); border-color: var(--color-rule); }
.tt-switch.is-disabled .tt-switch__knob { background: var(--color-rule); }
.tt-switch.is-on.is-disabled .tt-switch__track { background: var(--color-ink-muted); border-color: var(--color-ink-muted); }
.tt-switch.is-on.is-disabled .tt-switch__knob { background: var(--color-primary-label); }
.tt-switch.is-error .tt-switch__track { border-color: var(--color-danger); }
.tt-switch__state { font: var(--text-label); color: var(--color-ink-2); min-width: 22px; margin-top: 2px; }
/* stepper */
.tt-stepper { display: inline-flex; align-self: flex-start; align-items: stretch; height: var(--size-control); border: 1px solid var(--color-edge); border-radius: var(--radius-control); background: var(--color-input); }
.tt-stepper__btn { width: 36px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 1px; background: transparent; color: var(--color-ink); cursor: pointer; }
.tt-stepper__btn:hover, .tt-stepper__btn.is-hover { background: var(--color-hover); }
.tt-stepper__btn:disabled, .tt-stepper__btn.is-disabled { color: var(--color-ink-muted); pointer-events: none; }
.tt-stepper__value { min-width: 56px; display: flex; align-items: center; justify-content: center; gap: 4px; border-left: 1px solid var(--color-rule); border-right: 1px solid var(--color-rule); font: var(--text-body); font-variant-numeric: tabular-nums; }
.tt-stepper__unit { color: var(--color-ink-3); font: var(--text-body-sm); }
.tt-stepper.is-focus { border-color: var(--color-edge-strong); }
.tt-stepper.is-disabled { background: var(--color-hover); border-color: var(--color-rule); color: var(--color-ink-muted); }
/* slider: the 32px row is the hit area; 20px thumb on a 4px track (24 on a phone) */
.tt-slider { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.tt-slider__row { display: flex; align-items: center; gap: 12px; height: 32px; cursor: pointer; }
.tt-slider__track { position: relative; flex: 1; height: 4px; background: var(--color-meter-track); border-radius: 0; display: flex; align-items: center; }
.tt-slider__fill { height: 4px; background: var(--color-primary); }
.tt-slider__thumb { width: var(--size-slider-thumb); height: var(--size-slider-thumb); margin-left: calc(var(--size-slider-thumb) / -2); border-radius: var(--radius-control); background: var(--color-primary); border: 1px solid var(--color-primary); flex: none; }
.tt-slider:hover .tt-slider__thumb, .tt-slider.is-hover .tt-slider__thumb { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
.tt-slider.is-focus .tt-slider__thumb, .tt-slider__thumb:focus-visible { box-shadow: 0 0 0 2px var(--color-ground), 0 0 0 4px var(--color-focus); }
.tt-slider.is-disabled .tt-slider__fill, .tt-slider.is-disabled .tt-slider__thumb { background: var(--color-ink-muted); border-color: var(--color-ink-muted); }
.tt-slider__value { min-width: 56px; text-align: right; font: var(--text-body); font-variant-numeric: tabular-nums; }
.tt-slider__scale { display: flex; justify-content: space-between; font: var(--text-micro); color: var(--color-ink-3); }
/* chips (removable; roster addresses): 32px, radius 2, never a pill; the remove button is a full 32×32 target (44 on a phone) */
.tt-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tt-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 0 0 10px; border: 1px solid var(--color-edge); border-radius: var(--radius-control); background: var(--color-input); font: var(--text-body-sm); color: var(--color-ink); white-space: nowrap; }
.tt-chip--static { padding-right: 10px; }
.tt-chip__icon { color: inherit; }
.tt-chip__remove { width: 32px; height: 32px; margin: -1px -1px -1px 0; display: flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--color-ink-2); cursor: pointer; border-radius: var(--radius-control); }
.tt-chip__remove:hover, .tt-chip__remove.is-hover { background: var(--color-hover); color: var(--color-ink); }
.tt-chip:hover, .tt-chip.is-hover { border-color: var(--color-edge-strong); }
/* selected = a filter chosen within a set: navy edge on the hover wash (teal is kept for where you are and what is live) */
.tt-chip.is-selected { background: var(--color-hover); border-color: var(--color-edge-strong); }
.tt-chip.is-disabled { color: var(--color-ink-muted); border-color: var(--color-rule); pointer-events: none; }
.tt-chip.is-error { border-color: var(--color-danger); color: var(--color-danger); }
.tt-chip.is-focus { border-color: var(--color-edge-strong); }

/* ---------- 6. Status, save state, pips, marks, monogram ---------- */
/* status is always an SVG glyph plus a word; the glyph is currentColor, so it takes the word's colour (and follows the theme) */
.tt-status { display: inline-flex; align-items: center; gap: 7px; font: var(--text-kicker); color: var(--color-ink); white-space: nowrap; }
.tt-status--live { color: var(--color-live-text); }
.tt-status--paused { color: var(--color-ink); }
.tt-status--draft, .tt-status--ended { color: var(--color-ink-2); }
.tt-status--12 { font: var(--text-label); }
/* the stage's five states on navy: the live exchange is teal, processing is slate (the info colour), Ready green, Reconnecting red */
.tt-status--ready { color: var(--color-success); }
.tt-status--listening, .tt-status--speaking { color: var(--color-live-text); }
.tt-status--thinking { color: var(--color-info); }
.tt-status--reconnecting { color: var(--color-danger); }
.tt-save { display: inline-flex; align-items: center; gap: 7px; height: 24px; font: var(--text-ui-sm); letter-spacing: var(--tracking-ui-sm); color: var(--color-ink-2); white-space: nowrap; }
.tt-save--unsaved { color: var(--color-warning); }
.tt-save--saving { color: var(--color-ink-3); }
.tt-save--saved { color: var(--color-success); }
.tt-save--failed { color: var(--color-danger); font-weight: 600; }
.tt-pip { display: block; width: var(--size-pip); height: var(--size-pip); border-radius: 50%; background: var(--color-live-text); flex: none; }
.tt-pip--navy { background: var(--color-ink); }
.tt-pip--ink3 { background: var(--color-ink-3); }
.tt-pip--6 { width: 6px; height: 6px; }
.tt-pips { display: inline-flex; align-items: center; gap: 3px; }
.tt-pips__dot { display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--color-live-text); }
.tt-online { display: inline-flex; align-items: center; gap: 8px; font: var(--text-kicker); color: var(--color-live-text); white-space: nowrap; }
.tt-online--12 { font: var(--text-label); letter-spacing: 0; }
.tt-online__count { color: var(--color-ink); font-weight: 600; }
/* the attention mark: 8px orange square with a navy inset edge (the edge carries the 3:1 boundary); never alone, never text;
   one per screen — the first Needs-attention item — and never in the rail or a readiness banner */
.tt-mark-attention { display: block; width: var(--size-mark); height: var(--size-mark); flex: none; }
/* rail marks are squares (status words own the circles): Done = ink square with a ground check, Needed = hollow 1px ink square,
   Optional = dotted square in ink-3. Not toggles; the rail's legend says so. */
.tt-mark { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; flex: none; color: var(--color-ink); }
.tt-mark--done { background: var(--color-ink); color: var(--color-ground); }
.tt-mark--needed { color: var(--color-ink); }
.tt-mark--optional { color: var(--color-ink-3); }
.tt-monogram-person { display: inline-flex; align-items: center; justify-content: center; width: var(--size-monogram); height: var(--size-monogram); border-radius: var(--radius-control); background: var(--color-surface-raised); color: var(--color-ink-on-navy); font: var(--text-label); letter-spacing: 0.02em; flex: none; }
.tt-monogram-person--36 { width: 36px; height: 36px; font-size: 13px; }
.tt-on-navy .tt-monogram-person, .tt-masthead .tt-monogram-person { background: var(--color-ink-on-navy); color: var(--color-ink-on-bright); }

/* ---------- 7. Kicker, section head, tabs, context bar ---------- */
.tt-kicker { display: flex; align-items: center; gap: 12px; font: var(--text-kicker); color: var(--color-ink); }
.tt-kicker__rule { flex: 1; height: 1px; background: var(--color-edge-strong); }
.tt-kicker__meta { font: var(--text-body-sm); color: var(--color-ink-2); white-space: nowrap; }
.tt-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-5); padding-top: 14px; border-top: var(--rule-strong); }
.tt-section-head__title { font: var(--text-title-md); letter-spacing: var(--tracking-title-md); color: var(--color-ink); }
.tt-section-head__meta { margin-top: 3px; font: var(--text-body-sm); color: var(--color-ink-2); }
.tt-section-head__tools { display: flex; align-items: center; gap: var(--space-4); padding-top: 2px; }
/* tabs: a filter chosen within a set takes the navy bar (teal is for where you are and what is live) */
.tt-tabs { display: flex; align-items: stretch; gap: var(--space-5); height: 36px; border-bottom: var(--rule-hair); }
.tt-tab { position: relative; display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 2px; font: var(--text-ui-sm); letter-spacing: var(--tracking-ui-sm); color: var(--color-ink-2); white-space: nowrap; cursor: pointer; background: transparent; border: 0; }
.tt-tab__count { font-weight: 600; color: var(--color-ink-3); font-variant-numeric: tabular-nums; }
.tt-tab:hover, .tt-tab.is-hover { color: var(--color-ink); }
.tt-tab.is-selected { color: var(--color-ink); font-weight: 600; }
.tt-tab.is-selected .tt-tab__count { color: var(--color-ink); }
.tt-tab__bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--color-ink); display: none; }
.tt-tab.is-selected .tt-tab__bar { display: block; }
.tt-tab.is-disabled { color: var(--color-ink-muted); pointer-events: none; }
/* editor context bar */
.tt-context-bar { display: flex; align-items: center; gap: var(--space-4); height: 64px; min-width: 0; overflow: hidden; padding: 0 var(--layout-gutter); border-bottom: var(--rule-strong); background: var(--color-ground); }
.tt-context-bar__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.tt-crumbs { display: flex; align-items: center; gap: 6px; font: var(--text-body-sm); color: var(--color-ink-2); white-space: nowrap; }
.tt-crumbs__sep { color: var(--color-ink-3); }
.tt-context-bar__title-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tt-context-bar__title { flex: none; max-width: 420px; font: var(--text-title-sm); letter-spacing: var(--tracking-title-sm); color: var(--color-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-context-bar__meta { flex: 1; min-width: 0; font: var(--text-body-sm); color: var(--color-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-context-bar__actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); flex: none; }
.tt-context-bar__sep { width: 1px; height: 24px; background: var(--color-rule); margin: 0 var(--space-1); }

/* ---------- 8. Rail, readiness, legend ---------- */
.tt-rail { display: flex; flex-direction: column; width: 100%; }
.tt-rail__group { padding: 14px 0 6px; font: var(--text-label); color: var(--color-ink-2); }
.tt-rail-item { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px 0 8px; border-left: 2px solid transparent; color: var(--color-ink); font: var(--text-body); text-decoration: none; cursor: pointer; }
.tt-rail-item__icon { color: var(--color-ink-2); }
.tt-rail-item__label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the badge is a word or a count ("4", "off", "required", "AI-edited"); never a bare coloured dot */
.tt-rail-item__badge { font: var(--text-micro); color: var(--color-ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tt-rail-item:hover, .tt-rail-item.is-hover { background: var(--color-hover); }
.tt-rail-item.is-current { background: var(--color-selected); border-left-color: var(--color-live-text); font-weight: 600; }
.tt-rail-item.is-current .tt-rail-item__icon { color: var(--color-ink); }
.tt-rail-item.is-disabled { color: var(--color-ink-muted); pointer-events: none; }
.tt-rail__legend { display: flex; align-items: center; gap: 14px; padding: 14px 0 0; border-top: var(--rule-hair); margin-top: 10px; font: var(--text-micro); color: var(--color-ink-2); }
.tt-rail__legend-item { display: inline-flex; align-items: center; gap: 6px; }
.tt-readiness { display: flex; flex-direction: column; gap: 8px; padding: 0 0 12px; border-bottom: var(--rule-hair); }
.tt-readiness__row { display: flex; align-items: baseline; justify-content: space-between; font: var(--text-label); color: var(--color-ink); }
.tt-readiness__count { font-variant-numeric: tabular-nums; color: var(--color-ink-2); font-weight: 500; }

/* ---------- 9. Banners, empty states, toasts, dialogs, menus, tooltips ---------- */
/* banner: a ruled row on the ground — 1px rules above and below in the level colour, the level icon, the title in the level colour,
   ink text, the next step as a button at the right. No tint and no left bar: the only tint in the system is a transcript's blocked line. */
.tt-banner { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-top: 1px solid var(--color-info); border-bottom: 1px solid var(--color-info); color: var(--color-ink); }
.tt-banner__icon { margin-top: 1px; color: var(--color-info); }
.tt-banner__body { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tt-banner__title { font: var(--text-button); color: var(--color-info); }
.tt-banner__text { font: var(--text-body-sm); color: var(--color-ink-2); }
.tt-banner__action { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.tt-banner--warning { border-color: var(--color-warning); }
.tt-banner--warning .tt-banner__icon, .tt-banner--warning .tt-banner__title { color: var(--color-warning); }
.tt-banner--danger { border-color: var(--color-danger); }
.tt-banner--danger .tt-banner__icon, .tt-banner--danger .tt-banner__title { color: var(--color-danger); }
.tt-banner--success { border-color: var(--color-success); }
.tt-banner--success .tt-banner__icon, .tt-banner--success .tt-banner__title { color: var(--color-success); }
.tt-banner--live { border-color: var(--color-live-text); }
.tt-banner--live .tt-banner__icon, .tt-banner--live .tt-banner__title { color: var(--color-live-text); }
.tt-banner--row { align-items: center; }
.tt-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 24px 0; }
.tt-empty__title { font: var(--text-title-sm); letter-spacing: var(--tracking-title-sm); color: var(--color-ink); }
.tt-empty__text { font: var(--text-body); color: var(--color-ink-2); max-width: 480px; }
.tt-empty__actions { display: flex; gap: 8px; margin-top: 8px; }
.tt-empty--inline { flex-direction: row; align-items: center; gap: 16px; padding: 0; min-height: 36px; }
.tt-empty--inline .tt-empty__text { display: inline-flex; align-items: center; gap: 8px; color: var(--color-ink); }
/* toast: the overlay look the dialog and menu share — white, 1px navy border, radius 3, the overlay shadow; the level is the icon's colour plus the words */
.tt-toast { display: flex; align-items: flex-start; gap: 10px; width: 400px; max-width: 400px; padding: 12px 8px 12px 14px; border: 1px solid var(--color-edge-strong); border-radius: var(--radius-overlay); background: var(--color-ground); color: var(--color-ink); box-shadow: var(--shadow-overlay); }
.tt-toast__icon { margin-top: 10px; color: var(--color-info); }
.tt-toast__text { flex: 1; font: var(--text-body); padding-top: 8px; padding-bottom: 8px; }
.tt-toast__action { display: flex; align-items: center; gap: 2px; }
.tt-toast--success .tt-toast__icon { color: var(--color-success); }
.tt-toast--warning .tt-toast__icon { color: var(--color-warning); }
.tt-toast--error .tt-toast__icon { color: var(--color-danger); }
.tt-toast--info .tt-toast__icon { color: var(--color-info); }
.tt-scrim { background: var(--color-scrim); }
.tt-dialog { display: flex; flex-direction: column; width: 440px; border: 1px solid var(--color-edge-strong); border-radius: var(--radius-overlay); background: var(--color-ground); color: var(--color-ink); box-shadow: var(--shadow-overlay); }
.tt-dialog__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 20px 0 24px; }
.tt-dialog__title { font: var(--text-title-md); letter-spacing: var(--tracking-title-md); }
.tt-dialog__body { padding: 10px 24px 4px; font: var(--text-body); color: var(--color-ink-2); display: flex; flex-direction: column; gap: 12px; }
.tt-dialog__foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 20px 24px 20px; }
.tt-dialog__foot--split { justify-content: space-between; }
.tt-dialog__steps { font: var(--text-micro); color: var(--color-ink-3); }
/* phone sheet: the dialog docked at the foot of a 390 frame. The DOM keeps desktop order (Cancel, then the confirm) and the foot
   reverses it, so the primary or destructive button is drawn on top and Cancel / Back lands at the bottom, nearest the thumb.
   --sheet-block is the same sheet at 100% width for a frame that is not exactly 390 wide (a sheet inside a page's own phone frame). */
.tt-dialog--sheet { width: 390px; border-radius: var(--radius-overlay) var(--radius-overlay) 0 0; }
.tt-dialog--sheet-block { width: 100%; border-radius: var(--radius-overlay) var(--radius-overlay) 0 0; }
.tt-dialog--sheet .tt-dialog__foot, .tt-dialog--sheet-block .tt-dialog__foot { flex-direction: column-reverse; align-items: stretch; gap: 8px; }
.tt-menu { display: flex; flex-direction: column; min-width: 220px; padding: 4px; border: 1px solid var(--color-edge-strong); border-radius: var(--radius-overlay); background: var(--color-ground); box-shadow: var(--shadow-overlay); }
.tt-menu__item { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; border-radius: var(--radius-control); font: var(--text-body); color: var(--color-ink); white-space: nowrap; cursor: pointer; text-decoration: none; }
.tt-menu__item:hover, .tt-menu__item.is-hover { background: var(--color-hover); }
.tt-menu__item.is-selected { background: var(--color-selected); font-weight: 600; }
.tt-menu__item.is-disabled { color: var(--color-ink-muted); pointer-events: none; }
.tt-menu__item--danger { color: var(--color-danger); }
.tt-menu__hint { margin-left: auto; font: var(--text-micro); color: var(--color-ink-3); }
.tt-menu__check { margin-left: auto; color: var(--color-ink); }
.tt-menu__sep { height: 1px; margin: 4px 6px; background: var(--color-rule); }
.tt-menu__label { padding: 8px 10px 4px; font: var(--text-label); color: var(--color-ink-2); }
/* tooltip: a navy plate in both themes with a 1px slate edge so it keeps its boundary on a dark ground */
.tt-tooltip { display: inline-flex; align-items: center; max-width: 280px; padding: 6px 10px; border: 1px solid var(--color-tooltip-edge); border-radius: var(--radius-overlay); background: var(--color-tooltip); color: var(--color-tooltip-ink); font: var(--text-note); letter-spacing: var(--tracking-note); }
.tt-tooltip__kbd { margin-left: 8px; border-color: var(--color-kbd-edge-on-primary); background: transparent; color: var(--color-tooltip-ink); }

/* ---------- 10. Data: figures, reference, meter, table cells, charts, code readout ---------- */
.tt-figure { display: flex; flex-direction: column; gap: 6px; }
.tt-figure__label { font: var(--text-kicker); color: var(--color-ink); }
.tt-figure__note { font: var(--text-note); letter-spacing: var(--tracking-note); color: var(--color-ink-3); }
.tt-figure__value { display: flex; align-items: baseline; gap: 4px; font: var(--text-figure-lg); letter-spacing: var(--tracking-figure-lg); color: var(--color-ink); white-space: nowrap; }
.tt-figure__unit { font: var(--text-ui); letter-spacing: 0; color: var(--color-ink-2); margin: 0 6px 0 2px; }
.tt-figure__unit:last-child { margin-right: 0; }
.tt-figure__delta { display: flex; align-items: baseline; gap: 5px; font: var(--text-body-sm); color: var(--color-ink-2); }
.tt-figure__delta b { font-weight: 600; color: var(--color-ink); }
.tt-figure__link { margin-top: 2px; }
.tt-figure--xl .tt-figure__value { font: var(--text-figure-xl); letter-spacing: var(--tracking-figure-xl); gap: 6px; }
.tt-figure--xl .tt-figure__unit { font: var(--text-figure-unit); letter-spacing: var(--tracking-figure-unit); margin: 0 18px 0 4px; }
.tt-figure--xl .tt-figure__unit:last-child { margin-right: 0; }
.tt-figure--md .tt-figure__value { font: var(--text-figure-md); letter-spacing: var(--tracking-figure-md); }
/* a supporting-figure row: the whole 64px row is the link to where you act on it (hover underlines the label); the arrow is decoration */
.tt-figure-row { display: flex; align-items: center; gap: 16px; min-height: 64px; border-bottom: var(--rule-hair); color: var(--color-ink); text-decoration: none; cursor: pointer; }
.tt-figure-row:last-child { border-bottom: 0; }
.tt-figure-row .tt-figure { flex: 1; gap: 2px; }
.tt-figure-row .tt-figure__value { font: var(--text-figure-md); letter-spacing: var(--tracking-figure-md); }
.tt-figure-row .tt-figure__delta { width: 72px; justify-content: flex-end; }
.tt-figure-row__arrow { display: flex; align-items: center; color: var(--color-ink); }
.tt-figure-row:hover .tt-figure__label, .tt-figure-row.is-hover .tt-figure__label { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* speaking-time reference: two bars with a dimension line */
.tt-reference { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.tt-reference__label { font: var(--text-body-sm); color: var(--color-ink-2); }
.tt-reference__row { display: flex; align-items: center; gap: 10px; height: 16px; }
.tt-reference__bar { height: 14px; background: var(--color-chart-2); flex: none; }
.tt-reference__bar--ref { background: var(--color-input); border: 1px solid var(--color-ink); }
.tt-reference__value { font: var(--text-button-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tt-reference__value span { font-weight: 400; color: var(--color-ink-3); }
.tt-reference__dim { display: flex; align-items: center; height: 20px; }
.tt-reference__dim-space { flex: none; }
.tt-reference__dim-line { display: flex; align-items: center; height: 10px; border-left: 1px solid var(--color-ink); border-right: 1px solid var(--color-ink); }
.tt-reference__dim-rule { flex: 1; height: 1px; background: var(--color-ink); }
.tt-reference__dim-label { font: var(--text-label); letter-spacing: 0; color: var(--color-ink); padding: 0 6px; white-space: nowrap; }
.tt-reference__axis { display: flex; justify-content: space-between; border-top: var(--rule-hair); padding-top: 3px; font: var(--text-micro); color: var(--color-ink-3); }
/* progress meter (allowance) */
.tt-meter { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.tt-meter__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font: var(--text-body-sm); }
.tt-meter__label { font-weight: 600; color: var(--color-ink); }
.tt-meter__value { font-variant-numeric: tabular-nums; color: var(--color-ink); white-space: nowrap; }
.tt-meter__value b { font-weight: 600; }
.tt-meter__value span { color: var(--color-ink-3); }
.tt-meter__track { height: 8px; background: var(--color-meter-track); display: flex; }
.tt-meter__fill { height: 8px; background: var(--color-chart-1); }
.tt-meter--warn .tt-meter__fill { background: var(--color-warning); }
.tt-meter--full .tt-meter__fill { background: var(--color-danger); }
.tt-meter__note { font: var(--text-note); letter-spacing: var(--tracking-note); color: var(--color-ink-3); }
/* tables: grid rows, unit headers, sparkline and micro-bar cells */
.tt-table { display: flex; flex-direction: column; width: 100%; }
.tt-tr { display: grid; align-items: center; min-height: 48px; border-bottom: var(--rule-hair); border-left: 2px solid transparent; }
.tt-tr--th { min-height: 0; align-items: end; padding-bottom: 8px; border-bottom: var(--rule-strong); }
.tt-tr--2line { min-height: 54px; }
.tt-tr:hover, .tt-tr.is-hover { background: var(--color-hover); }
.tt-tr.is-selected { background: var(--color-selected); border-left-color: var(--color-live-text); }
.tt-th { display: flex; flex-direction: column; padding: 0 8px; font: var(--text-label); letter-spacing: var(--tracking-label); color: var(--color-ink-2); white-space: nowrap; }
.tt-th__unit { font: var(--text-note); letter-spacing: var(--tracking-note); color: var(--color-ink-3); white-space: normal; }   /* wraps in its own column rather than running under the next */
.tt-th--num { align-items: flex-end; text-align: right; }
.tt-th.is-sorted { color: var(--color-ink); }
.tt-th__sort { display: inline-flex; align-items: center; gap: 4px; }
.tt-td { display: flex; align-items: center; gap: 8px; padding: 0 8px; font: var(--text-body-sm); color: var(--color-ink); min-width: 0; }
.tt-td--num { justify-content: flex-end; text-align: right; font-variant-numeric: tabular-nums; }
.tt-td--stack { flex-direction: column; align-items: flex-start; gap: 1px; }
/* the primary line is a flex row (name, then any badge such as Online now) so nothing inline-flex sits in bare text */
.tt-td__primary { display: flex; align-items: center; gap: 8px; max-width: 100%; min-width: 0; font-weight: 600; }
.tt-td__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-td__secondary { font: var(--text-note); letter-spacing: var(--tracking-note); color: var(--color-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tt-td--dim { color: var(--color-ink-3); }
.tt-td--now { color: var(--color-live-text); font-weight: 600; }
.tt-tr:first-child .tt-td:first-child, .tt-tr .tt-th:first-child, .tt-tr .tt-td:first-child { padding-left: 6px; }
.tt-table__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 10px; font: var(--text-body-sm); color: var(--color-ink-3); }
.tt-table__notes { display: flex; gap: 20px; padding-top: 10px; border-top: var(--rule-hair); margin-top: 8px; font: var(--text-note); letter-spacing: var(--tracking-note); color: var(--color-ink-3); }
.tt-table__notes b { color: var(--color-ink-2); font-weight: 600; }
.tt-sparkline { display: block; width: 84px; height: 22px; color: var(--color-chart-1); }   /* the path is stroke="currentColor", so the stroke follows the chart token in both themes */
.tt-sparkline__now { color: var(--color-chart-2); }                                           /* a live session's last point: a deep-teal disc, fill="currentColor" */
.tt-microbar { display: flex; align-items: center; gap: 10px; }
.tt-microbar__track { position: relative; width: 92px; height: 6px; background: var(--color-meter-track); display: flex; align-items: center; }
.tt-microbar__fill { position: absolute; left: 0; top: 0; height: 6px; background: var(--color-chart-2); }
.tt-microbar__avg { position: absolute; top: -3px; width: 2px; height: 12px; background: var(--color-ink); }
.tt-microbar__value { font: var(--text-body-sm); font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 56px; text-align: right; }
.tt-segs { display: inline-flex; gap: 2px; }
.tt-segs__cell { display: block; width: 9px; height: 7px; background: var(--color-meter-track); }
.tt-segs__cell.is-on { background: var(--color-ink); }
.tt-engagement { display: inline-flex; align-items: center; gap: 8px; }
/* charts: the plot is an SVG of bars and gridlines drawn per screen; every label is an HTML text element positioned over it (inside the chart only) */
.tt-chart { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.tt-chart__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.tt-chart__legend { display: flex; flex-wrap: wrap; gap: 20px; font: var(--text-body-sm); color: var(--color-ink-2); }
.tt-chart__legend-item { display: inline-flex; align-items: center; gap: 7px; }
.tt-chart__legend-item b { color: var(--color-ink); font-weight: 600; }
.tt-chart__swatch { display: block; width: 10px; height: 10px; background: var(--color-chart-1); flex: none; }
.tt-chart__swatch--2 { background: var(--color-chart-2); }
.tt-chart__swatch--outline { background: var(--color-ground); border: 1px solid var(--color-ink); }
.tt-chart__plot { position: relative; }
.tt-chart__plot svg { position: absolute; left: 0; top: 0; }
/* the plot's marks are grouped by role and drawn with currentColor, so the chart tokens (and their dark values) colour them */
.tt-chart__grid { color: var(--color-chart-grid); }       /* gridlines at round values */
.tt-chart__baseline { color: var(--color-ink); }          /* the baseline is ink */
.tt-chart__bars-1 { color: var(--color-chart-1); }        /* every series but one */
.tt-chart__bars-2 { color: var(--color-chart-2); }        /* the highlighted series: student speaking time */
.tt-chart__today { color: var(--color-ground); }          /* today in outline: ground fill, series stroke */
.tt-chart__today-1 { stroke: var(--color-chart-1); }
.tt-chart__today-2 { stroke: var(--color-chart-2); }
.tt-chart__marks { color: var(--color-ink); }             /* the average line and the note ticks */
.tt-chart__label { position: absolute; font: var(--text-micro); color: var(--color-ink-3); white-space: nowrap; }
.tt-chart__label--y { text-align: right; }
.tt-chart__label--x { text-align: center; }
.tt-chart__label--today { color: var(--color-ink); font-weight: 600; }
.tt-chart__label--avg { color: var(--color-ink); }
.tt-chart__label--note { font: var(--text-note-numeral); color: var(--color-ink); text-align: right; }
.tt-chart__caption { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding-top: 10px; border-top: var(--rule-hair); font: var(--text-note); letter-spacing: var(--tracking-note); color: var(--color-ink-2); }
.tt-chart__caption b { color: var(--color-ink); font-weight: 600; }
.tt-chart__notes { display: flex; flex-direction: column; gap: 4px; font: var(--text-note); letter-spacing: var(--tracking-note); color: var(--color-ink-2); }
.tt-chart__note { display: grid; grid-template-columns: 16px 1fr; gap: 4px; }
.tt-chart__note b { font: var(--text-note-numeral); color: var(--color-ink); }
/* join code readout: six cells grouped 3 + 3. Display cells are a quiet readout (rule-coloured edge on navy and teal);
   INPUT cells are controls and take the field's control edge (≥3:1 on white, navy and teal). */
.tt-code { display: inline-flex; align-items: center; gap: 12px; }
.tt-code__group { display: inline-flex; gap: 3px; }
.tt-code__cell { display: flex; align-items: center; justify-content: center; width: 38px; height: 48px; border: 1px solid var(--color-edge); border-radius: var(--radius-control); background: var(--color-input); font: var(--text-code); letter-spacing: 0; color: var(--color-ink); font-variant-numeric: tabular-nums; }
.tt-on-navy .tt-code__cell { background: var(--color-surface-raised); border-color: var(--color-rule); }
.tt-on-live .tt-code__cell { background: var(--color-cell-on-live); border-color: var(--color-rule); }
.tt-code--input .tt-code__cell { cursor: text; border-color: var(--color-edge); }
.tt-on-live .tt-code--input .tt-code__cell { background: transparent; }   /* no wash under an input on teal: the navy edge marks it */
.tt-code--input .tt-code__cell.is-empty { color: var(--color-ink-3); }
.tt-on-live .tt-code--input .tt-code__cell.is-empty { color: transparent; }   /* no placeholder letter on teal: every colour that passes 4.5:1 there is within 1.2:1 of the typed ink, so an example in the cells reads as a filled code — the example goes in the hint (.tt-code-inline), the empty state is six empty cells with the caret in cell 1 */
.tt-code--input .tt-code__cell.is-focus { border-color: var(--color-edge-strong); box-shadow: 0 0 0 2px var(--color-ground), 0 0 0 4px var(--color-focus); }
.tt-code--input .tt-code__cell.is-error { border-color: var(--color-danger); }
.tt-code--input .tt-code__cell.is-disabled { background: var(--color-hover); border-color: var(--color-rule); color: var(--color-ink-muted); }
.tt-code--lg .tt-code__cell { width: 48px; height: 64px; font: var(--text-code-lg); letter-spacing: 0; font-variant-numeric: tabular-nums; }   /* the shorthand resets tnum; re-declared */
.tt-code--sm .tt-code__cell { width: 26px; height: 32px; font: var(--text-code-sm); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.tt-code__caret { width: 2px; height: 28px; background: var(--color-ink); }
.tt-code-inline { font: var(--text-code-inline); letter-spacing: var(--tracking-code-inline); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tt-code-inline--sm { font: var(--text-label); letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }
.tt-code-block { display: flex; flex-direction: column; gap: 6px; }
.tt-code-block__label { font: var(--text-label); color: var(--color-ink-2); }
.tt-code-block__hint { font: var(--text-body-sm); color: var(--color-ink-2); }
.tt-code-block__actions { display: flex; gap: 6px; }

/* ---------- 11. Live now panel (teal field) and attention items ---------- */
/* drawn at the context column's width (378 field, 330 content): the code is the default 38×48 readout on its own line, the actions on the line below */
.tt-live { display: flex; flex-direction: column; width: 100%; padding: 24px 24px 20px; }
.tt-live__head { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid var(--color-edge-strong); }
.tt-live__title { font: var(--text-title-md); letter-spacing: var(--tracking-title-md); }
.tt-live__count { font: var(--text-kicker); }
.tt-live__session { display: flex; flex-direction: column; gap: 14px; padding: 16px 0 18px; border-bottom: 1px solid var(--color-edge-strong); }
.tt-live__session:last-child { border-bottom: 0; }
.tt-live__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.tt-live__name { display: flex; align-items: center; gap: 8px; font: var(--text-button); }
.tt-live__meta { font: var(--text-body-sm); margin-top: 2px; padding-left: 16px; }
.tt-live__online { display: flex; flex-direction: column; align-items: flex-end; }
.tt-live__online-n { font: var(--text-figure-md); letter-spacing: var(--tracking-figure-md); }
.tt-live__online-t { font: var(--text-label); }
.tt-live__code-row { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.tt-live__code { display: flex; align-items: center; gap: 6px; }   /* the readout with Copy code and Copy link (32px icon buttons) beside it: 252 + 6 + 32 + 6 + 32 = 328 inside the 330 */
.tt-live__actions { display: flex; gap: 6px; }
.tt-live__paused { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 14px; border-top: 1px solid var(--color-edge-strong); }
.tt-live__paused .tt-live__name { font: var(--text-kicker); }
.tt-live__paused .tt-live__meta { font: var(--text-note); letter-spacing: var(--tracking-note); }   /* its join code is set in .tt-code-inline--sm */
.tt-attention-strip { display: grid; grid-template-columns: 1fr 1fr 1fr; }
.tt-attention { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 0 24px; border-left: var(--rule-hair); }
.tt-attention:first-child { padding-left: 0; border-left: 0; }
.tt-attention__head { display: flex; align-items: center; gap: 8px; font: var(--text-label); color: var(--color-ink); }
.tt-attention__sentence { font: var(--text-attention); letter-spacing: var(--tracking-attention); color: var(--color-ink); }
.tt-attention__sentence b { font: var(--text-attention-strong); letter-spacing: var(--tracking-attention-strong); }   /* the numbers: their own text style, so Figma binds them */
.tt-attention__note { font: var(--text-body-sm); color: var(--color-ink-2); }
.tt-attention__action { margin-top: auto; padding-top: 6px; }

/* ---------- 12. Conversation: transcript turns, insights, briefing, mic, countdown, captions, suggestions ---------- */
.tt-turn { display: grid; grid-template-columns: 44px 112px 1fr; column-gap: 12px; padding: 12px 0 13px; border-top: var(--rule-hair); align-items: baseline; }
.tt-turn:first-child { border-top: 0; }
.tt-turn__time { font: var(--text-note); letter-spacing: var(--tracking-note); color: var(--color-ink-3); font-variant-numeric: tabular-nums; }   /* the grid aligns baselines, so no line-height override */
.tt-turn__speaker { font: var(--text-kicker); color: var(--color-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-turn__speaker--student { color: var(--color-live-text); }
.tt-turn__speaker-row { display: flex; align-items: center; gap: 10px; }
.tt-turn__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tt-turn__line { font: var(--text-reading); color: var(--color-ink); }
.tt-turn__line--typing { display: flex; align-items: center; gap: 2px; }
.tt-turn__gloss { font: var(--text-body-sm); color: var(--color-ink-2); }   /* the one gloss style: Inter under the line, here and under a Try-saying phrase */
.tt-turn__tools { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.tt-turn__blocked { display: flex; align-items: flex-start; gap: 6px; font: var(--text-kicker); letter-spacing: var(--tracking-kicker); color: var(--color-warning); }
.tt-turn.is-blocked .tt-turn__body { border-left: 3px solid var(--color-warning); background: var(--color-warning-tint); padding: 8px 12px; }
.tt-turn--stage { grid-template-columns: 1fr; padding: 10px 0; border-top: 0; }
.tt-turn--stage .tt-turn__speaker { line-height: 18px; }
.tt-turn--stage .tt-turn__speaker-row { margin-bottom: 4px; }
.tt-turn__speaking { display: inline-flex; align-items: center; gap: 8px; font: var(--text-label); letter-spacing: 0; color: var(--color-live-text); }
.tt-insight { display: flex; flex-direction: column; gap: 4px; padding: 12px 0; border-top: var(--rule-hair); }
.tt-insight:first-child { border-top: 0; padding-top: 0; }
/* the title's rule is a real element: solid green = went well, dotted amber = to work on */
.tt-insight__title { display: inline-flex; flex-direction: column; align-self: flex-start; gap: 3px; font: var(--text-button); color: var(--color-ink); }
.tt-insight__rule { display: block; height: 2px; background: var(--color-success); }
.tt-insight--work .tt-insight__rule { height: 0; background: none; border-top: 2px dotted var(--color-warning); }
.tt-insight__detail { font: var(--text-body); color: var(--color-ink-2); }
.tt-insight__quote { display: flex; align-items: baseline; gap: 8px; margin-top: 2px; font: italic var(--text-quote); color: var(--color-ink); }
.tt-insight__quote-label { font: var(--text-label); letter-spacing: var(--tracking-label); color: var(--color-ink-3); font-style: normal; white-space: nowrap; }
.tt-insight__list { display: flex; flex-direction: column; gap: 4px; }
/* briefing card: a cream reading field on the navy stage, the stage's idle state. It scopes its own tokens because it does not
   change with the theme (the stage is navy in both), so it renders the same inside .tt-on-navy in light and dark. */
.tt-briefing {
  --color-ground: var(--color-briefing-field); --color-input: var(--color-briefing-field);
  --color-ink: var(--color-briefing-ink); --color-ink-2: var(--color-briefing-ink-2); --color-ink-3: var(--color-briefing-ink-3); --color-ink-muted: var(--color-briefing-ink-3);
  --color-rule: var(--color-briefing-rule); --color-edge: var(--color-briefing-ink-3); --color-edge-strong: var(--color-briefing-ink);
  --color-primary: var(--color-primary-fixed); --color-primary-label: var(--color-primary-fixed-label); --color-primary-hover: var(--color-primary-fixed-hover); --color-primary-active: var(--color-primary-fixed-active);
  --color-focus: var(--color-briefing-focus); --color-live-text: var(--color-briefing-focus); --color-link: var(--color-briefing-ink); --color-link-hover: var(--color-briefing-focus);
  --color-warning: var(--color-briefing-warning); --color-danger: var(--color-briefing-danger); --color-meter-track: var(--color-briefing-track); --color-hover: var(--color-briefing-hover); --color-selected: var(--color-briefing-selected); --color-kbd-edge-on-primary: var(--color-kbd-edge-on-primary-fixed);
  display: flex; flex-direction: column; gap: 16px; width: 560px; padding: 28px 32px 28px; background: var(--color-ground); color: var(--color-ink);
}
.tt-briefing__eyebrow { font: var(--text-label-caps); letter-spacing: var(--tracking-label-caps); text-transform: uppercase; color: var(--color-ink-2); }
.tt-briefing__title { font: var(--text-title-lg); letter-spacing: var(--tracking-title-lg); }
.tt-briefing__lede { font: var(--text-body); color: var(--color-ink-2); }
.tt-briefing__facts { display: flex; gap: 0; border-top: 1px solid var(--color-ink); border-bottom: var(--rule-hair); }
.tt-briefing__fact { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 10px 16px 10px 0; border-left: var(--rule-hair); padding-left: 16px; }
.tt-briefing__fact:first-child { border-left: 0; padding-left: 0; }
.tt-briefing__fact-v { font: var(--text-button); font-variant-numeric: tabular-nums; }
.tt-briefing__fact-k { font: var(--text-note); letter-spacing: var(--tracking-note); color: var(--color-ink-2); }
/* "From your instructor" is set as a transcript turn: a kicker, then the note in the reading face directly on the field, ruled above and below. No box, no teal. */
.tt-briefing__from { display: flex; flex-direction: column; gap: 6px; padding: 12px 0; border-top: 1px solid var(--color-ink); border-bottom: 1px solid var(--color-ink); }
.tt-briefing__from-k { font: var(--text-label); color: var(--color-ink-2); }
.tt-briefing__from-t { font: var(--text-reading); white-space: pre-wrap; }
.tt-briefing__steps { display: flex; flex-direction: column; gap: 10px; }
.tt-briefing__step { display: grid; grid-template-columns: 20px 1fr; gap: 10px; font: var(--text-body-sm); color: var(--color-ink-2); }
.tt-briefing__step b { display: block; color: var(--color-ink); font-weight: 600; }
.tt-briefing__actions { display: flex; align-items: center; gap: 14px; }
.tt-briefing__note { font: var(--text-body-sm); color: var(--color-ink-2); }
.tt-briefing__note--warn { color: var(--color-warning); font-weight: 600; }
/* the facts carry a small icon before the label; a section is a kicker over its content; topics are a dotted list; a step may carry a one-line note */
.tt-briefing__fact-k { display: flex; align-items: center; gap: 6px; }
.tt-briefing__fact-icon { display: flex; color: var(--color-ink-2); }
.tt-briefing__fact-icon--rec { color: var(--color-danger); }   /* the Recorded fact's dot: --color-briefing-danger through the card's scope (5.89:1) */
.tt-briefing--short .tt-briefing__lede { display: none; }      /* a short stage (a room banner above the card) hides the lede, as the product does */
.tt-briefing__section { display: flex; flex-direction: column; gap: 10px; }
.tt-briefing__step-note { display: block; margin-top: 2px; }
.tt-briefing__topics { display: flex; flex-direction: column; gap: 2px; }
.tt-briefing__topic { display: flex; align-items: center; gap: 8px; }
.tt-briefing__topic-dot { display: block; width: 4px; height: 4px; flex: none; background: var(--color-ink); }
/* --wide: the 1440 stage's card — 696px, a 1fr main column (the note, How to talk) beside a 232px side column (What you will be doing),
   the facts and the Start foot spanning both, tightened spacings; the 560 column card above stays the phone's and the sheet's default */
.tt-briefing--wide { width: 696px; display: grid; grid-template-columns: 1fr 232px; column-gap: 0; row-gap: 0; padding: 12px 32px 12px; }
.tt-briefing--wide .tt-briefing__head { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px; }
.tt-briefing--wide .tt-briefing__facts { grid-column: 1 / -1; margin-top: 8px; }
.tt-briefing--wide .tt-briefing__fact { flex: 1 1 auto; padding-top: 6px; padding-bottom: 6px; white-space: nowrap; }
.tt-briefing--wide .tt-briefing__main { grid-column: 1; display: flex; flex-direction: column; gap: 10px; padding: 10px 24px 0 0; }
.tt-briefing--wide .tt-briefing__from { padding: 8px 0; }
.tt-briefing--wide .tt-briefing__steps { gap: 6px; }
.tt-briefing--wide .tt-briefing__side { grid-column: 2; display: flex; flex-direction: column; gap: 8px; padding: 10px 0 0 24px; border-left: var(--rule-hair); font: var(--text-body-sm); color: var(--color-ink); }
.tt-briefing--wide .tt-briefing__side p { margin: 0; }
.tt-briefing--wide .tt-briefing__foot { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 232px; column-gap: 0; align-items: center; margin-top: 10px; padding-top: 10px; border-top: var(--rule-hair); }
.tt-briefing--wide .tt-briefing__foot .tt-btn { width: 100%; }
.tt-briefing--wide .tt-briefing__foot .tt-briefing__note { padding-left: 24px; }
/* mic button: the stage's teal primary, 44 (68 docked on a phone), radius 2 */
.tt-mic { display: inline-flex; align-items: center; justify-content: center; width: var(--size-mic); height: var(--size-mic); border: 2px solid var(--color-live); border-radius: var(--radius-control); background: var(--color-live); color: var(--color-ink-on-bright); cursor: pointer; position: relative; }
.tt-mic--docked { width: var(--size-mic-docked); height: var(--size-mic-docked); }
.tt-mic:hover, .tt-mic.is-hover { background: var(--color-live-hover); border-color: var(--color-live-hover); }
.tt-mic.is-held, .tt-mic.is-listening { box-shadow: 0 0 0 4px var(--color-mic-halo); }
.tt-mic.is-armed { background: transparent; color: var(--color-live); }
.tt-mic.is-disabled { background: var(--color-surface-raised); border-color: var(--color-surface-raised); color: var(--color-ink-muted-on-navy); pointer-events: none; }
.tt-mic__level { position: absolute; left: 4px; right: 4px; bottom: 3px; height: 3px; background: var(--color-mic-level-track); display: none; }
.tt-mic__level-fill { height: 3px; background: var(--color-ink-on-bright); }
.tt-mic.is-listening .tt-mic__level, .tt-mic.is-held .tt-mic__level { display: block; }
.tt-mic-row { display: flex; align-items: center; gap: 10px; }
/* the keycap hint is a flex row of spans around the keycap, never a keycap inside bare text */
.tt-mic-hint { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font: var(--text-body-sm); color: var(--color-ink-2); }
.tt-mic-hint .tt-kbd { background: transparent; }
/* countdown readout */
.tt-countdown { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border: 1px solid var(--color-rule); border-radius: var(--radius-control); font: var(--text-button); font-variant-numeric: tabular-nums; color: var(--color-ink); white-space: nowrap; }
.tt-countdown__of { font-weight: 400; color: var(--color-ink-2); }
.tt-countdown--warn { color: var(--color-warning); border-color: var(--color-warning); }
.tt-countdown--urgent { color: var(--color-danger); border-color: var(--color-danger); }
.tt-countdown--paused { color: var(--color-ink-3); }
.tt-countdown--paused .tt-countdown__of { color: var(--color-ink-3); }   /* the word "paused" stays readable (7.5:1 on navy); only the digits dim */
.tt-rec { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 8px; font: var(--text-label-caps); letter-spacing: var(--tracking-label-caps); text-transform: uppercase; color: var(--color-danger); }
.tt-rec__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-danger); }
/* captions strip */
.tt-captions { display: inline-flex; max-width: 720px; padding: 10px 16px; border-radius: var(--radius-control); background: var(--color-captions-scrim); color: var(--color-ink-on-navy); font: var(--text-caption); letter-spacing: var(--tracking-caption); text-align: center; }
/* suggestion chips ("Try saying"): 44px controls; on navy they take the raised surface and the slate edge through the context remap */
.tt-suggest { display: flex; flex-direction: column; gap: 8px; }
.tt-suggest__label { font: var(--text-label); color: var(--color-ink-2); }
.tt-suggest__row { display: flex; flex-wrap: wrap; gap: 8px; }
.tt-suggest__chip { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px 8px 10px; border: 1px solid var(--color-edge); border-radius: var(--radius-control); background: var(--color-input); color: var(--color-ink); cursor: pointer; text-align: left; }
.tt-suggest__icon { color: var(--color-live-text); }
.tt-suggest__hear { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; min-width: 32px; font: var(--text-micro); color: var(--color-ink); white-space: nowrap; }   /* the word under the speaker icon: what a press does (Hear), or what is happening (Playing), on the control itself */
.tt-suggest__text { display: flex; flex-direction: column; gap: 1px; }
.tt-suggest__phrase { font: var(--text-ui); }
.tt-suggest__gloss { font: var(--text-body-sm); color: var(--color-ink-2); }
.tt-suggest__chip:hover, .tt-suggest__chip.is-hover { border-color: var(--color-edge-strong); }
/* playing is a fill, never a ring: on navy --color-live-text and --color-focus are the same teal, so a ring here would be indistinguishable from the focus ring (one drawn focus per screen) */
.tt-suggest__chip.is-playing { border-color: var(--color-live-text); background: var(--color-selected); }   /* the word Playing stays ink (9.3:1 on the wash); teal micro text would be 3.7:1 */
.tt-suggest__chip.is-disabled { opacity: 0.55; pointer-events: none; }
/* speaking waveform (svg bars; the svg content is drawn per screen) */
.tt-wave { display: block; height: 14px; }
/* composer row on the stage: mic · message · Send · Interrupt, all 44 */
.tt-composer { display: flex; align-items: center; gap: 10px; width: 100%; }
.tt-composer .tt-input { flex: 1; }

/* ---------- 13. Phone helpers: every target 44px ---------- */
.tt-phone .tt-btn { height: var(--size-control-phone); padding: 0 18px; font: var(--text-button-lg); }
.tt-phone .tt-input, .tt-phone .tt-select { height: var(--size-control-phone); font: var(--text-body-lg); }
.tt-phone .tt-icon-btn { width: var(--size-control-phone); height: var(--size-control-phone); }
.tt-phone .tt-seg { height: calc(var(--size-control-phone) + 2px); }
.tt-phone .tt-rail-item, .tt-phone .tt-menu__item, .tt-phone .tt-tab, .tt-phone .tt-check, .tt-phone .tt-radio, .tt-phone .tt-switch { min-height: var(--size-control-phone); }
.tt-phone .tt-chip { height: var(--size-control-phone); }
.tt-phone .tt-chip__remove { width: var(--size-control-phone); height: var(--size-control-phone); }
.tt-phone .tt-code--input .tt-code__cell { width: 44px; height: 56px; }
.tt-phone .tt-link--action { min-height: var(--size-control-phone); }
.tt-phone .tt-logo { padding: 9px 0 8px; }   /* the 22px lockup becomes a 44px target on a phone (32 on desktop); the mark itself does not change */
.tt-phone .tt-slider__row { height: var(--size-control-phone); }
.tt-phone .tt-slider__thumb { width: 24px; height: 24px; margin-left: -12px; }
.tt-phone .tt-stepper { height: calc(var(--size-control-phone) + 2px); }   /* 46 outside the 1px border, so each button inside is a full 44 (as .tt-seg--44 does) */
.tt-phone .tt-stepper__btn { width: var(--size-control-phone); }