/* Studio (design/pages/studio: setup, live, drawer, stop-dialog, states, phone; App Bible §9, §19.8).
 *
 * Two screens on one page. The SETUP SHEET is a light app page under the kit masthead: the white
 * sheet (avatar, voice, speech, conversation) meets the navy field (cost, Start, the preview, the
 * rules of a run) on one vertical seam, and the Backdrop strip runs under both. The SESSION is the
 * student stage shell -- the navy session bar, the plate with the composer under it, the cream
 * transcript column -- minus gate, briefing and Brief, plus the "change while live" buttons in the
 * bar and the Settings drawer over the transcript column. Every colour is a token (theme.css),
 * every control the kit (components.css); session.css contributes only the renderer contract
 * (.stage__canvas, .stage__video, .stage__backdrop). The phone is keyed on [data-layout='mobile']
 * (never a width query) at the foot of this file. State hooks:
 *
 *   #session-view[data-run]            idle · running · paused · stopped   (also on #stage)
 *   #session-view.st-root--settings    the Settings drawer is open (the transcript column widens to 536)
 *   #session-main[data-transcript]     'open' · 'closed'   the transcript column (js/mobile-session.js)
 *   #stage[data-phase]                 idle · listening · thinking · speaking (the engine's phase)
 *   #stage-loading[data-state]         connecting · failed · dropped
 *   #status-chip[data-kind], #persona-chip[data-phase], #session-timer[data-level]
 */

/* ============================================================================================
   SETUP SHEET
   ============================================================================================ */

.sd-root {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--color-ground);
  color: var(--color-ink);
}

.sd-root .tt-logo:hover,
.st-root .tt-logo:hover { text-decoration: none; }

/* -- the masthead: the kit's, with Studio marked current (cream 600 + the 3px teal bar) ------ */

.sd-masthead { flex: none; }
/* the utilities are the instructor shell's: 32px links; Studio's current mark hangs 12px under the link, flush with the band's bottom edge */
.sd-util { position: relative; }
.sd-util.is-current { color: var(--color-ink); font-weight: 600; }
.sd-util .tt-nav__bar { display: none; }
.sd-util.is-current .tt-nav__bar { display: block; bottom: -12px; }
/* the buttons among the utilities (Sign out, the person) read as the kit's link and person block, as instructor.css draws them */
.sd-masthead button.tt-masthead__link,
.sd-masthead button.tt-person { padding: 0; border: 0; background: transparent; font: inherit; cursor: pointer; }
.sd-masthead button.tt-masthead__link { font: var(--text-ui); color: var(--color-ink-2); }
.sd-masthead button.tt-masthead__link:hover { color: var(--color-ink); }
.sd-masthead button.tt-person { text-align: left; }
.sd-masthead .tt-person:hover .tt-person__name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* the kit's nav-item ring for the masthead's other controls: inset, so nothing clips it against the band's edges */
.sd-masthead .tt-masthead__link:focus-visible,
.sd-masthead .tt-person:focus-visible,
.sd-masthead .tt-icon-btn:focus-visible,
.sd-masthead .tt-logo:focus-visible { outline: 0; box-shadow: inset 0 0 0 2px var(--color-focus); border-radius: var(--radius-control); }
.sd-masthead__menu { display: none; }
.sd-masthead__menu-icon { display: flex; }
.sd-masthead__menu-icon[hidden] { display: none; }
.sd-menu { position: fixed; inset: 0; z-index: 60; }
.sd-menu__scrim { position: absolute; inset: 0; background: var(--color-scrim); }
.sd-menu__sheet { position: absolute; top: 108px; right: 8px; min-width: 240px; }

/* -- the body grid: sheet | field, the strip under both --------------------------------------- */

.sd-body {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 606px;
  grid-template-rows: auto auto;
}
.sd-sheet { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; padding: 0 24px 36px var(--layout-gutter); min-width: 0; }
.sd-field { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; gap: 32px; padding: 28px var(--layout-gutter) 48px 12px; }
.sd-strip { grid-column: 1 / span 2; grid-row: 2; display: flex; flex-direction: column; gap: 20px; padding: 0 var(--layout-gutter) 56px; }
.sd-strip .tt-section-head { border-top: var(--rule-heavy); }

.sd-title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding-top: 36px; }
.sd-title { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sd-title h1 { font: var(--text-title-lg); letter-spacing: var(--tracking-title-lg); color: var(--color-ink); }
.sd-hint { font: var(--text-body); color: var(--color-ink-2); max-width: 720px; }
.sd-section { display: flex; flex-direction: column; gap: 20px; margin-top: 32px; }
.sd-checks { display: flex; flex-direction: column; gap: 2px; margin-top: -6px; }
.sd-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.sd-pair > * { min-width: 0; }
.sd-convo { display: grid; grid-template-columns: 1fr 300px; gap: 24px; align-items: start; }
.sd-convo > * { min-width: 0; }
.sd-note { font: var(--text-body-sm); color: var(--color-ink-2); }
.sd-note b { font-weight: 600; color: var(--color-ink); }

/* -- the avatar row (painted by studio.js): portrait · name and meta · Change avatar ---------- */

.sd-avatar-field { display: flex; flex-direction: column; gap: 14px; }
.sd-avatar { display: flex; align-items: center; gap: 16px; }
.sd-avatar__thumb { width: 56px; height: 56px; flex: none; display: flex; overflow: hidden; background: var(--color-chart-tint); }
.sd-avatar__thumb img { display: block; width: 56px; height: 56px; object-fit: cover; object-position: 50% 20%; }
.sd-avatar__thumb--empty { align-items: center; justify-content: center; color: var(--color-ink-3); }
.sd-avatar__text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sd-avatar__name { font: var(--text-title-sm); letter-spacing: var(--tracking-title-sm); color: var(--color-ink); }
.sd-avatar__meta { font: var(--text-body-sm); color: var(--color-ink-2); }
.sd-avatar .tt-btn { flex: none; }

/* -- the voice row: the select plus Play sample (setup only) ----------------------------------- */

.sd-voice { display: flex; align-items: center; gap: 8px; }
.sd-voice .sd-select { flex: 1; min-width: 0; }
.sd-voice__test { display: flex; flex: none; }
.sd-voice__test:empty { display: none; }
.sd-sample.is-active { border-color: var(--color-edge-strong); background: var(--color-selected); }

/* -- the native select, dressed as the kit's: the caret is a real element beside it, the menu is the browser's own -- */

.sd-select { position: relative; display: block; width: 100%; }
.sd-select .tt-select {
  display: block;
  appearance: none;
  -webkit-appearance: none;
  padding: 0 44px 0 12px;
  text-overflow: ellipsis;
}
.sd-select .tt-select:focus-visible { border-color: var(--color-edge-strong); }
.sd-select .tt-select:disabled { background: var(--color-hover); border-color: var(--color-rule); color: var(--color-ink-muted); cursor: default; }
.sd-select .tt-select__caret { position: absolute; right: 0; top: 0; height: 100%; pointer-events: none; }
/* languages the fast speech model cannot pronounce still route through the wide-coverage one; the option says so by dimming */
.sd-select option[data-slow] { color: var(--color-ink-3); }

/* -- the checkboxes: the native input is the control; the kit box beside it is what is drawn ---- */

.sd-check { position: relative; }
.sd-check__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.sd-check:has(.sd-check__input:checked) .tt-check__box { background: var(--color-primary); border-color: var(--color-primary); }
.sd-check:has(.sd-check__input:checked) .tt-check__mark { display: block; }
.sd-check:has(.sd-check__input:focus-visible) .tt-check__box { box-shadow: 0 0 0 2px var(--color-ground), 0 0 0 4px var(--color-focus); }
.sd-check:has(.sd-check__input:disabled) { cursor: default; pointer-events: none; }
.sd-check:has(.sd-check__input:disabled) .tt-check__box { background: var(--color-hover); border-color: var(--color-rule); }
.sd-check:has(.sd-check__input:disabled) .tt-check__text { color: var(--color-ink-muted); }

/* -- textarea sizes --------------------------------------------------------------------------- */

.sd-textarea { min-height: 76px; }
.sd-textarea--drawer { min-height: 56px; }

/* -- the volume slider: the native range is the control, drawn as the kit slider with its scale under the track -- */

.sd-slider__grid { display: grid; grid-template-columns: 1fr 56px; column-gap: 12px; row-gap: 6px; align-items: center; }
.sd-slider__grid .tt-slider__row { grid-column: 1; }
.sd-slider__grid .tt-slider__value { grid-column: 2; }
.sd-slider__grid .tt-slider__scale { grid-column: 1; }
.sd-range { position: relative; flex: 1; min-width: 0; }
.sd-range__input {
  --fill: 100%;
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  height: 32px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
.sd-range__input:focus-visible { outline: none; box-shadow: none; }
.sd-range__input::-webkit-slider-runnable-track {
  height: 4px;
  background: linear-gradient(to right, var(--color-primary) 0 var(--fill), var(--color-meter-track) var(--fill) 100%);
}
.sd-range__input::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: var(--size-slider-thumb);
  height: var(--size-slider-thumb);
  margin-top: -8px;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-control);
  background: var(--color-primary);
}
.sd-range__input:hover::-webkit-slider-thumb { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
.sd-range__input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--color-ground), 0 0 0 4px var(--color-focus); }
.sd-range__input::-moz-range-track { height: 4px; background: var(--color-meter-track); }
.sd-range__input::-moz-range-progress { height: 4px; background: var(--color-primary); }
.sd-range__input::-moz-range-thumb {
  width: var(--size-slider-thumb);
  height: var(--size-slider-thumb);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-control);
  background: var(--color-primary);
}
.sd-range__input:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 2px var(--color-ground), 0 0 0 4px var(--color-focus); }

/* -- the backdrop tiles: one construction on the sheet, in the drawer and on the phone ---------- */

.bd-grid { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 12px; }
.bd-tile {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  margin: 0;
  padding: 4px;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  background: transparent;
  font: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
}
.bd-tile:hover { border-color: var(--color-edge); }
.bd-tile.is-selected { border: 2px solid var(--color-edge-strong); padding: 3px; background: var(--color-hover); }
.bd-tile:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--color-ground), 0 0 0 4px var(--color-focus); }
.bd-tile__img { display: block; width: 100%; height: 70px; object-fit: cover; background: var(--color-chart-tint); }
/* the plain stage: a hatch drawn in the edge colour, so "no backdrop" reads as a choice rather than a picture that failed */
.bd-tile__img--empty { color: var(--color-edge); background: var(--color-hover); }
.bd-tile__img--empty svg { display: block; width: 100%; height: 100%; }
.bd-tile__label { font: var(--text-micro); color: var(--color-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-tile.is-selected .bd-tile__label { font: var(--text-label); letter-spacing: var(--tracking-label); }
.bd-check {
  position: absolute;
  left: 9px;
  top: 9px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  color: var(--color-primary-label);
  border-radius: var(--radius-control);
}

/* -- the navy field: cost and Start, the preview, the rules of a run ---------------------------- */

.sd-block { display: flex; flex-direction: column; gap: 14px; }
.sd-cost__line { font: var(--text-title-sm); letter-spacing: var(--tracking-title-sm); color: var(--color-ink); }
.sd-start__note { font: var(--text-body-sm); color: var(--color-ink-2); }
.sd-field .tt-meter[hidden] { display: none; }
.sd-plate { position: relative; width: 546px; max-width: 100%; height: 307px; overflow: hidden; background: var(--color-surface-raised); }
.sd-plate__img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.sd-plate__img[hidden] { display: none; }
.sd-plate__empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.sd-plate__empty[hidden] { display: none; }
.sd-plate__empty-word { font: var(--text-body-sm); color: var(--color-ink-3); }
.sd-plate .st-chip { position: absolute; }
.sd-plate .st-chip[hidden] { display: none; }
.sd-plate__tag {
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: var(--color-captions-scrim);
  color: var(--color-ink-on-navy);
  font: var(--text-micro);
  border-radius: var(--radius-control);
}
.sd-summary { font: var(--text-body-sm); color: var(--color-ink-2); }
.sd-summary b { font-weight: 600; color: var(--color-ink); }
.sd-summary:empty { display: none; }
.sd-facts { display: flex; flex-direction: column; }
.sd-fact { display: grid; grid-template-columns: 16px 1fr; column-gap: 12px; padding: 10px 0; border-top: var(--rule-hair); font: var(--text-body-sm); color: var(--color-ink); }
.sd-fact:first-child { border-top: 0; padding-top: 0; }
.sd-fact__icon { display: flex; margin-top: 1px; color: var(--color-ink-2); }
.sd-fact b { font-weight: 600; }

/* ============================================================================================
   SESSION
   ============================================================================================ */

.st-root {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--color-field-navy);
  color: var(--color-ink-on-navy);
}

/* -- the session bar: 56 + 1px rule ---------------------------------------------------------- */

.st-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 57px;
  flex: none;
  padding: 0 24px;
  border-bottom: var(--rule-on-navy);
}
.st-bar .tt-logo { flex: none; }
.st-mono { display: none; flex: none; padding: 2px 0; color: var(--color-ink); }
.st-mono__spark { color: var(--color-attention); }
.st-bar__sep { width: 0; height: 28px; border-left: 1px solid var(--color-rule); flex: none; }
.st-bar__title { display: flex; flex-direction: column; min-width: 0; }
.st-bar__name { font: var(--text-title-sm); letter-spacing: var(--tracking-title-sm); color: var(--color-ink); white-space: nowrap; }

/* what you can change while live, as buttons that open Settings at their section */
.st-change { display: flex; align-items: center; gap: 2px; min-width: 0; }
.st-change .tt-btn { padding: 0 8px; white-space: nowrap; max-width: 220px; }
.st-change .tt-btn > span { overflow: hidden; text-overflow: ellipsis; }

.st-bar__readouts { margin-left: auto; display: flex; align-items: center; gap: 12px; flex: none; }
.st-readout { display: flex; flex-direction: column; gap: 1px; white-space: nowrap; }
.st-readout__main { display: inline-flex; align-items: center; gap: 6px; font: var(--text-button); font-variant-numeric: tabular-nums; color: var(--color-ink); }
.st-readout__sub { font: var(--text-note); letter-spacing: var(--tracking-note); font-variant-numeric: tabular-nums; color: var(--color-ink-3); }
.st-readout__sub:empty { display: none; }
.st-rate__short { display: none; }

/* status: the glyph follows the kind (disc for the live words, two bars Paused); the colour is the kit's */
.st-glyph { display: flex; }
.st-glyph svg { display: none; }
.st-glyph .st-glyph__dot { display: block; }
#status-chip[data-kind='paused'] .st-glyph__dot { display: none; }
#status-chip[data-kind='paused'] .st-glyph__pause { display: block; }
#status-chip[data-kind='connecting'] { color: var(--color-info); }
#status-chip[data-kind='ready'] { color: var(--color-success); }
#status-chip[data-kind='listening'],
#status-chip[data-kind='speaking'] { color: var(--color-live-text); }
#status-chip[data-kind='thinking'] { color: var(--color-info); }
#status-chip[data-kind='paused'] { color: var(--color-ink); }
#status-chip[data-kind='reconnecting'] { color: var(--color-danger); }

/* the countdown: the clock while running, the pause glyph while paused or waiting; amber inside the last minute, red and
   pulsing inside the last 20 s, greyed digits with a readable word while paused */
.st-countdown__icon { display: none; }
.st-countdown__icon--clock { display: flex; }
#session-timer[data-level='paused'] .st-countdown__icon--clock { display: none; }
#session-timer[data-level='paused'] .st-countdown__icon--pause { display: flex; }
#session-timer[data-level='warn'] { color: var(--color-warning); border-color: var(--color-warning); }
#session-timer[data-level='urgent'] { color: var(--color-danger); border-color: var(--color-danger); }
#session-timer[data-level='paused'] { color: var(--color-ink-3); }
#session-timer[data-level='paused'] .tt-countdown__of { color: var(--color-ink-3); }
@media (prefers-reduced-motion: no-preference) {
  #session-timer[data-level='urgent'] { animation: st-pulse 1s ease-in-out infinite; }
  @keyframes st-pulse { 50% { opacity: 0.55; } }
}

.st-bar__controls { display: flex; align-items: center; gap: 8px; flex: none; }
.st-run__icon { display: flex; color: inherit; }

/* the gear: the open mark is the masthead's 3px teal bar flush with the bar's bottom edge; the tool is 48 tall, centred in
   the 56px bar, so a focus ring ends at the frame's edge instead of being clipped */
.st-bar__tools { display: flex; align-items: center; gap: 4px; flex: none; align-self: stretch; }
.st-tool { position: relative; width: 44px; height: 48px; border-radius: 0; }
.st-tool__bar { position: absolute; left: 0; right: 0; bottom: -4px; height: 3px; background: var(--color-live); display: none; }
.st-tool.is-open .st-tool__bar { display: block; }

/* -- the body: stage | transcript ------------------------------------------------------------ */

.st-body { flex: 1; display: flex; min-height: 0; position: relative; }
.st-stage { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; }

/* the plate: the raised surface the picture sits on; everything the page draws is layered over the renderers' canvas and
   video (cover 2 · connecting 3 · docks 4) */
.st-video {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  background: var(--color-surface-raised);
}
.st-layer { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }

/* the connecting / failed / dropped notice: its own opaque ground (the stage behind it is black or, for a moment, a green
   wall), over the cover and under the dock */
#stage-loading { z-index: 3; flex-direction: column; gap: 8px; text-align: center; padding: 0 24px; background: var(--color-surface-raised); pointer-events: none; }
#stage-loading[hidden] { display: none; }
.st-stage-note__icon { display: none; color: var(--color-ink-2); }
.st-stage-note__icon--failed { color: var(--color-danger); }
.st-stage-note__title { font: var(--text-title-sm); letter-spacing: var(--tracking-title-sm); color: var(--color-ink); max-width: 440px; }
.st-stage-note__text { font: var(--text-body); color: var(--color-ink-2); max-width: 440px; }
.st-stage-note__text:empty { display: none; }
.st-ring { display: block; color: var(--color-live); }
#stage-loading:not([data-state='connecting']) .st-ring { display: none; }
#stage-loading[data-state='failed'] .st-stage-note__icon--failed,
#stage-loading[data-state='dropped'] .st-stage-note__icon--dropped { display: flex; }
@media (prefers-reduced-motion: no-preference) {
  .st-ring { animation: st-spin 0.9s linear infinite; }
  @keyframes st-spin { to { transform: rotate(360deg); } }
}

/* paused: the plate dims to the scrim and takes no input; the notice (over the dim, under the dock) says what Resume does,
   and the connecting notice stands down while it shows */
.st-paused-note { z-index: 4; flex-direction: column; gap: 8px; text-align: center; padding: 0 24px; display: none; pointer-events: none; }
.st-paused-note .st-stage-note__icon { display: flex; }
.st-video__dim { position: absolute; inset: 0; z-index: 3; background: var(--color-captions-scrim); display: none; pointer-events: none; }
.st-root[data-run='paused'] .st-paused-note { display: flex; }
.st-root[data-run='paused'] .st-video__dim { display: block; }
.st-root[data-run='paused'] #stage-loading { display: none; }

/* the persona chip: the pip has one meaning -- is the avatar talking (teal), not (slate), offline (red) */
.st-chip {
  position: absolute;
  z-index: 2;
  top: 16px;
  left: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px 0 10px;
  border-radius: var(--radius-control);
  background: var(--color-captions-scrim);
  color: var(--color-ink-on-navy);
  font: var(--text-kicker);
  white-space: nowrap;
  pointer-events: none;
}
.st-chip[hidden] { display: none; }
.st-chip__pip { display: flex; color: var(--color-ink-2-on-navy); }
#persona-chip[data-phase='speaking'] .st-chip__pip { color: var(--color-live); }
#persona-chip[data-phase='offline'] .st-chip__pip { color: var(--color-danger-on-navy); }

/* the pill host (z 4: reachable while a stream comes up); invisible while empty */
.st-dock { position: absolute; z-index: 4; top: 16px; display: flex; pointer-events: none; }
.st-dock--right { right: 16px; }
.st-dock__slot { pointer-events: auto; }
.st-dock__slot:empty { display: none; }
/* the Transcript button, docked: the rail's pill restyled as a 32px pill on the picture, pointing the way the column comes in */
.st-dock .mtranscript {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  margin: 0;
  border: 1px solid var(--color-edge-on-navy);
  border-radius: var(--radius-control);
  background: var(--color-captions-scrim);
  color: var(--color-ink-on-navy);
  font: var(--text-button-sm);
  cursor: pointer;
}
.st-dock .mtranscript:hover { border-color: var(--color-ink-on-navy); background: var(--color-captions-scrim); }
.st-dock .sp-rail__chev { display: flex; transform: rotate(-90deg); }
.st-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-control);
  background: var(--color-live);
  color: var(--color-ink-on-bright);
  font: var(--text-micro);
  font-variant-numeric: tabular-nums;
}
.st-badge[hidden] { display: none; }

/* captions: the kit strip, centred along the bottom of the picture */
.st-captions { position: absolute; z-index: 2; left: 24px; right: 24px; bottom: 20px; display: flex; justify-content: center; pointer-events: none; }
.st-captions[hidden] { display: none; }

/* -- the foot: the renderer's note line · composer · composer foot ----------------------------- */

.st-foot { flex: none; display: flex; flex-direction: column; gap: 12px; padding: 8px 24px 16px; }
.st-avatar-note { display: flex; align-items: center; gap: 6px; min-height: 16px; font: var(--text-note); letter-spacing: var(--tracking-note); color: var(--color-ink-3); }
.st-avatar-note:empty { display: none; }

.st-mic-host { display: contents; }
.st-mic__icon { display: flex; }
.st-mic__icon--off { display: none; }
.tt-mic:disabled { pointer-events: auto; cursor: default; background: var(--color-surface-raised); border-color: var(--color-surface-raised); color: var(--color-ink-muted-on-navy); }
.tt-mic:disabled .st-mic__icon--on { display: none; }
.tt-mic:disabled .st-mic__icon--off { display: flex; }
.tt-mic:disabled .tt-mic__level { display: none; }
/* held: halo and level (data-active is the engine's); armed by Always listening: the outline */
.tt-mic[data-active='true']:not(:disabled) { box-shadow: 0 0 0 4px var(--color-mic-halo); }
/* the halo outweighs the kit's focus ring; a focused open mic keeps the ring inside the halo */
.tt-mic[data-active='true']:not(:disabled):focus-visible { box-shadow: 0 0 0 2px var(--color-ground), 0 0 0 4px var(--color-focus), 0 0 0 8px var(--color-mic-halo); }
.tt-mic[data-active='true']:not(:disabled) .tt-mic__level { display: block; }
.tt-mic[data-handsfree='true']:not([data-active='true']):not(:disabled) { background: transparent; color: var(--color-live); }
.tt-mic__level-fill { width: 100%; transform-origin: left center; transform: scaleX(0); }

/* the message box is the kit input, one line, growing to three */
.st-input { resize: none; min-height: var(--size-control-phone); max-height: 110px; padding: 10px 12px; line-height: 22px; overflow-y: auto; }
.st-input:focus { outline: none; }
.st-input::placeholder { color: var(--color-ink-3); }
.st-input:disabled::placeholder { color: var(--color-ink-muted); }

.st-composer-foot { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.st-composer-foot .tt-switch { padding: 0; min-height: 0; flex: none; max-width: 330px; }
.st-composer-foot .tt-mic-hint { max-width: 320px; justify-content: flex-start; }
.st-switch__input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* -- the transcript column: the reading field ------------------------------------------------- */

.st-transcript { width: 416px; flex: none; display: flex; flex-direction: column; min-height: 0; position: relative; }
.st-col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 56px;
  flex: none;
  padding: 0 16px 0 24px;
  border-bottom: var(--rule-strong);
}
.st-col-head__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.st-col-title { font: var(--text-title-sm); letter-spacing: var(--tracking-title-sm); color: var(--color-ink); }
.st-col-meta { font: var(--text-note); letter-spacing: var(--tracking-note); color: var(--color-ink-2); }
.sheet__grip, .sheet__spacer, .st-close__phone { display: none; }
.sheet__actions:empty { display: none; }
.st-close__desktop { display: flex; }
.st-keep { display: flex; gap: 8px; flex: none; padding: 14px 24px 12px; border-bottom: var(--rule-hair); font: var(--text-body-sm); color: var(--color-ink-2); }
.st-keep__icon { display: flex; margin-top: 1px; color: var(--color-ink-2); }
.st-log { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-start; padding: 4px 24px 20px; overflow-y: auto; overscroll-behavior: contain; }
.st-transcript .tt-turn { grid-template-columns: 44px 1fr; align-items: baseline; padding: 10px 0 11px; }
.st-transcript .tt-turn__speaker-row { margin-bottom: 4px; }
.st-turn__main { display: flex; flex-direction: column; min-width: 0; }
.st-transcript .tt-turn__line { display: block; overflow-wrap: anywhere; white-space: pre-wrap; }
.st-transcript .tt-turn__line .tt-caret { display: inline-block; vertical-align: -2px; margin-left: 2px; }
/* "Hear this again": js/transcript-replay.js's button (its legacy rules live in session.css for the avatar tester),
   redrawn as the kit's quiet compact button on its own row under the line; Playing tinted; loading dimmed */
.st-transcript .bubble__replay {
  position: static;
  display: flex;
  width: max-content;
  height: var(--size-control-compact);
  align-items: center;
  gap: 8px;
  margin: 6px 0 0 -10px;
  padding: 0 12px 0 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--color-ink);
  font: var(--text-button-sm);
  letter-spacing: var(--tracking-button);
  white-space: normal;
  transition: none;
  animation: none;
}
.st-transcript .bubble__replay svg { width: 16px; height: 16px; }
.st-transcript .bubble__replay:hover { color: var(--color-ink); background: var(--color-hover); }
.st-transcript .bubble__replay:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--color-ground), 0 0 0 4px var(--color-focus); }
.bubble__replay .st-replay-word { display: block; }
.bubble__replay .st-replay-word--playing { display: none; }
.st-transcript .bubble__replay[data-state='playing'] { color: var(--color-live-text); background: transparent; }
.bubble__replay[data-state='playing'] .st-replay-word { display: none; }
.bubble__replay[data-state='playing'] .st-replay-word--playing { display: block; }
.st-transcript .bubble__replay[data-state='loading'] { color: var(--color-ink); opacity: 0.55; pointer-events: none; }
/* the empty column: what to do */
.st-empty { display: flex; flex-direction: column; gap: 20px; padding: 20px 0; }
.st-empty .tt-empty { padding: 0; }

/* -- the transcript column put away (js/mobile-session.js writes data-transcript) ------------- */

#session-main[data-transcript='closed'] .st-transcript {
  width: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
#session-main[data-transcript] .st-transcript { transition: width 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.18s ease; }
/* the column away: the foot is capped at 760 and centred */
#session-main[data-transcript='closed'] .st-foot { align-items: center; }
#session-main[data-transcript='closed'] .st-foot > * { width: 100%; max-width: 760px; }

/* -- the Settings drawer: over the transcript column (which widens to 536 so the composer re-flows whole), no scrim -- */

.st-root--settings .st-transcript { width: 536px; }
.st-drawer {
  position: absolute;
  z-index: 8;
  right: 0;
  top: 57px;
  bottom: 0;
  width: 536px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  background: var(--color-ground);
  color: var(--color-ink);
  border-left: 1px solid var(--color-edge-strong);
  box-shadow: var(--shadow-overlay);
}
.st-drawer[hidden] { display: none; }
.st-drawer-scrim { display: none; }
.st-drawer__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex: none; padding: 10px 12px 8px 16px; border-bottom: var(--rule-strong); }
.st-drawer__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.st-drawer__title { font: var(--text-title-md); letter-spacing: var(--tracking-title-md); color: var(--color-ink); }
.st-drawer__meta { font: var(--text-body-sm); color: var(--color-ink-2); }
.st-drawer__body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 10px 16px 16px; overflow-y: auto; overscroll-behavior: contain; }
.st-drawer__section { display: flex; flex-direction: column; gap: 6px; scroll-margin-top: 10px; }
.st-drawer .sd-pair { gap: 12px; }
.st-drawer .bd-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.st-drawer .bd-grid:focus-visible { outline: none; box-shadow: none; }
.st-drawer .bd-tile__img { height: 42px; }
.st-drawer .bd-tile__label { white-space: normal; line-height: 14px; }
.st-drawer .tt-field { gap: 4px; }
.st-clear { display: flex; align-items: center; gap: 12px; }
.st-clear .tt-btn { flex: none; }
.st-clear .tt-field__hint { flex: 1; }

/* -- the stop dialog (confirmDialog in js/ui.js draws the kit dialog in the .modal--kit overlay) -- the body's name stays ink;
   on the stage it sits at the student stage's 232 (design/pages/studio/stop-dialog), not the dashboard's 136 (`.modal--stage`
   is added by confirmStop in js/studio.js; the phone's bottom sheet outranks it) */
.modal--kit .tt-dialog__body p b { font-weight: 600; }
.modal.modal--kit.modal--stage { padding-top: 232px; }

/* -- toasts during a run: over the stage's top-right, 16px in from the transcript column (the student stage's rule;
   design/pages/embed/live-mic-refused-toast), never the window's bottom-right, where they sat on the column's newest
   turn and, with Settings open, on the Persona field (QA 2026-10-24). The column away: under the docked pill. -- */
body:has(#session-view:not([hidden])) .toasts { top: 73px; bottom: auto; right: 432px; left: auto; }
body:has(#session-main[data-transcript='closed']) .toasts { top: 113px; right: 16px; }
body:has(.st-root--settings) .toasts { top: 73px; right: 552px; }

/* -- a toast with Undo beside its words (toastUndo in js/studio.js, inside ui.js's toast) ---- */
.st-toast-line { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; }
.st-toast-undo { height: 28px; padding: 0 8px; margin: -4px 0; }

/* -- the narrow window (under 1,180px): the monogram for the wordmark, no diagnostics under the status word ------------ */

@media (max-width: 1179px) {
  .st-bar .tt-logo { display: none; }
  .st-mono { display: flex; }
  .st-bar__readouts { gap: 10px; }
  .st-readout__sub { display: none; }
  .st-change .tt-btn { max-width: 150px; }
  .st-composer-foot { flex-direction: column; align-items: stretch; gap: 10px; }
  .st-composer-foot .tt-switch, .st-composer-foot .tt-mic-hint { max-width: none; }
}

@media (max-width: 1099px) {
  .sd-body { grid-template-columns: minmax(0, 1fr); }
  .sd-sheet { grid-column: 1; grid-row: 1; padding-right: var(--layout-gutter); }
  .sd-field { grid-column: 1; grid-row: 2; padding: 28px var(--layout-gutter) 40px; }
  .sd-strip { grid-column: 1; grid-row: 3; }
  .bd-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .st-change { display: none; }
}

/* ============================================================================================
   PHONE (design/pages/studio/phone): full-bleed stage, the rail, the sheets. Keyed on
   [data-layout='mobile'] only -- a phone in landscape is still a phone in two hands.
   ============================================================================================ */

/* -- the setup sheet stacks: the stacked masthead, the sheet, the navy field, the backdrop strip -- */

[data-layout='mobile'] .sd-masthead { flex-wrap: wrap; height: auto; gap: 0; padding: 0; }
[data-layout='mobile'] .sd-masthead__logo { order: 0; margin-left: 16px; padding: 9px 0 8px; }
[data-layout='mobile'] .sd-masthead__util { order: 1; height: var(--size-masthead); margin-left: auto; gap: 4px; padding-right: 8px; }
[data-layout='mobile'] .sd-masthead__util .tt-masthead__link { height: var(--size-control-phone); padding: 0 10px; }
[data-layout='mobile'] .sd-masthead__util .tt-icon-btn { width: var(--size-control-phone); height: var(--size-control-phone); }
[data-layout='mobile'] .sd-wide { display: none; }
[data-layout='mobile'] .sd-masthead__menu { display: inline-flex; }
[data-layout='mobile'] .sd-masthead__nav {
  order: 2;
  flex: 0 0 100%;
  width: 100%;
  height: var(--size-control-phone);
  gap: 8px;
  padding: 0 12px;
  justify-content: space-between;
  border-top: var(--rule-on-navy);
}
[data-layout='mobile'] .sd-masthead__nav .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); }
[data-layout='mobile'] .sd-menu .tt-menu__item { min-height: var(--size-control-phone); }

[data-layout='mobile'] .sd-body { display: flex; flex-direction: column; }
[data-layout='mobile'] .sd-sheet { order: 0; padding: 0 16px 28px; }
[data-layout='mobile'] .sd-field { order: 1; gap: 28px; padding: 24px 16px 32px; }
[data-layout='mobile'] .sd-strip { order: 2; padding: 24px 16px 40px; }
[data-layout='mobile'] .sd-strip .tt-section-head { border-top: 0; padding-top: 0; }
[data-layout='mobile'] .sd-title-row { padding-top: 24px; }
[data-layout='mobile'] .sd-section { margin-top: 28px; gap: 16px; }
[data-layout='mobile'] .sd-pair,
[data-layout='mobile'] .sd-convo { grid-template-columns: minmax(0, 1fr); gap: 16px; }
[data-layout='mobile'] .sd-avatar { flex-wrap: wrap; }
[data-layout='mobile'] .sd-avatar__text { flex: 1 1 160px; }
[data-layout='mobile'] .sd-avatar .tt-btn { flex: 1 1 100%; }
[data-layout='mobile'] .sd-voice { flex-wrap: wrap; }
[data-layout='mobile'] .sd-voice .sd-select { flex: 1 1 100%; }
[data-layout='mobile'] .sd-voice__test { flex: 1 1 100%; }
[data-layout='mobile'] .sd-voice__test .tt-btn { width: 100%; }
[data-layout='mobile'] .bd-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
[data-layout='mobile'] .sd-plate { width: 100%; height: auto; aspect-ratio: 16 / 9; }
/* every target 44 (the kit's .tt-phone helpers, keyed here on data-layout); 16px text so a phone does not zoom */
[data-layout='mobile'] .sd-root .tt-btn,
[data-layout='mobile'] .st-drawer .tt-btn { height: var(--size-control-phone); padding: 0 18px; font: var(--text-button-lg); letter-spacing: var(--tracking-button-lg); }
[data-layout='mobile'] .sd-select .tt-select { height: var(--size-control-phone); font: var(--text-body-lg); letter-spacing: var(--tracking-body-lg); }
[data-layout='mobile'] .sd-textarea { font: var(--text-body-lg); letter-spacing: var(--tracking-body-lg); }
[data-layout='mobile'] .sd-check { min-height: var(--size-control-phone); }
[data-layout='mobile'] .sd-range__input { height: var(--size-control-phone); }
[data-layout='mobile'] .sd-range__input::-webkit-slider-thumb { width: 24px; height: 24px; margin-top: -10px; }
[data-layout='mobile'] .sd-range__input::-moz-range-thumb { width: 24px; height: 24px; }
[data-layout='mobile'] .sd-root .tt-link--action { min-height: var(--size-control-phone); }

/* -- the session bar: the monogram, Studio over its readouts, the gear ------------------------- */

[data-layout='mobile'] .st-bar {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  grid-template-rows: auto auto;
  grid-template-areas: 'mark title gear' 'mark readouts gear';
  align-content: center;
  column-gap: 8px;
  row-gap: 1px;
  padding: 0 12px 0 8px;
}
[data-layout='mobile'] .st-bar .tt-logo,
[data-layout='mobile'] .st-bar__sep,
[data-layout='mobile'] .st-change,
[data-layout='mobile'] .st-bar__controls,
[data-layout='mobile'] .st-readout__sub { display: none; }
[data-layout='mobile'] .st-mono { grid-area: mark; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; align-self: center; }
[data-layout='mobile'] .st-bar__title { grid-area: title; }
[data-layout='mobile'] .st-bar__name { overflow: hidden; text-overflow: ellipsis; }
[data-layout='mobile'] .st-bar__readouts { grid-area: readouts; margin-left: 0; gap: 8px; min-width: 0; overflow: hidden; }
[data-layout='mobile'] .st-readout { flex-direction: row; align-items: center; }
[data-layout='mobile'] .st-bar .tt-status { font: var(--text-kicker); letter-spacing: var(--tracking-kicker); }
[data-layout='mobile'] #session-timer { height: 18px; padding: 0; border: 0; font: var(--text-kicker); letter-spacing: var(--tracking-kicker); }
[data-layout='mobile'] .st-readout--credits .st-readout__main { gap: 4px; font: var(--text-kicker); letter-spacing: var(--tracking-kicker); color: var(--color-ink-2); }
[data-layout='mobile'] .st-readout--credits svg { width: 12px; height: 12px; }
[data-layout='mobile'] .st-rate__short { display: inline; }
[data-layout='mobile'] .st-rate__long { display: none; }
[data-layout='mobile'] .st-bar__tools { grid-area: gear; align-self: center; }
[data-layout='mobile'] .st-tool { width: 44px; height: 44px; }
[data-layout='mobile'] .st-tool__bar { display: none; }

/* -- the stage: full bleed, the rail under it; the composer lives in the transcript sheet (js/studio.js placeComposer) -- */

[data-layout='mobile'] .st-body { flex-direction: column; }
[data-layout='mobile'] .st-stage { flex: 1; min-height: 0; }
[data-layout='mobile'] .st-captions { left: 16px; right: 16px; bottom: 16px; }
[data-layout='mobile'] .st-dock { display: none; }
[data-layout='mobile'] .st-foot { padding: 14px 0 calc(16px + var(--safe-b, 0px)); gap: 10px; }
/* the renderer's note is chrome while a run is up (paused included); the bar's status word carries the state */
[data-layout='mobile'] .st-root:not([data-run='idle']) .st-avatar-note { display: none; }
[data-layout='mobile'] .st-avatar-note { padding: 0 16px; }

/* the rail is the student stage's (css/session-mobile.css, design/pages/student-phone): fixed slots, not space-between, so
   the pill's width never moves the run controls -- column 1 the pill at its start, column 2 (120) the run group with
   Pause/Resume in its first cell and Stop session in its second, column 3 the 68px mic under its hint */
.sp-rail { display: grid; grid-template-columns: minmax(0, 1fr) 120px 68px; column-gap: 8px; align-items: end; padding: 0 16px; }
.sp-rail[hidden] { display: none; }
.sp-rail__pill { justify-self: start; max-width: 100%; padding: 0 12px; margin-bottom: 12px; gap: 6px; }
[data-layout='mobile'] .sp-rail .sp-rail__pill { height: var(--size-control-phone); font: var(--text-button-lg); letter-spacing: var(--tracking-button-lg); }
.sp-rail__chev { display: flex; }
.sp-rail__run { display: flex; justify-content: flex-end; margin-bottom: 3px; }
.sp-rail__run:empty { display: none; }
.sp-rail__mic { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; width: 68px; flex: none; }
.sp-mic-hint { white-space: nowrap; font: var(--text-label-caps); letter-spacing: var(--tracking-label-caps); text-transform: uppercase; color: var(--color-ink-2); }
.sp-mic-hint[hidden] { display: none; }
.sp-mic-hint[data-fading='true'] { opacity: 0; transition: opacity 0.3s ease; }
/* the run controls, moved into the rail: 56 × 62, the icon over the word(s), so "Stop / session" fits on two lines */
[data-layout='mobile'] #rail-run .st-bar__controls { display: grid; grid-template-columns: 56px 56px; column-gap: 8px; align-items: end; }
[data-layout='mobile'] #rail-run .tt-btn {
  flex-direction: column;
  justify-content: flex-start;
  gap: 2px;
  width: 56px;
  height: 62px;
  padding: 6px 0 0;
  font: var(--text-micro);
  letter-spacing: var(--tracking-micro);
  white-space: normal;
  text-align: center;
}
[data-layout='mobile'] #rail-run .tt-btn svg { width: 20px; height: 20px; }
[data-layout='mobile'] #rail-run .tt-btn > span { display: block; max-width: 56px; }
/* the narrowest phones (a width question): 48px run buttons, 6px gaps -- the student rail's rule */
@media (max-width: 359px) {
  .sp-rail { grid-template-columns: minmax(0, 1fr) 102px 68px; column-gap: 6px; padding: 0 12px; }
  [data-layout='mobile'] #rail-run .st-bar__controls { grid-template-columns: 48px 48px; column-gap: 6px; }
  [data-layout='mobile'] #rail-run .tt-btn { width: 48px; }
  [data-layout='mobile'] #rail-run .tt-btn > span { max-width: 48px; }
  [data-layout='mobile'] .sp-rail .sp-rail__pill { padding: 0 8px; gap: 4px; font: var(--text-button); letter-spacing: var(--tracking-button); }
  [data-layout='mobile'] .sp-rail .sp-rail__chev { display: none; }
}
/* the microphone, docked: 68px, the icon enlarged */
[data-layout='mobile'] #mic-dock .tt-mic { width: var(--size-mic-docked); height: var(--size-mic-docked); }
[data-layout='mobile'] #mic-dock .tt-mic svg { width: 28px; height: 28px; }

/* -- the transcript sheet: closed by default; it rises above the rail, never over it, so the docked mic never moves out
      from under a thumb; the whole header is the drag handle -- */

[data-layout='mobile'] .st-root { --sp-rail: 120px; }
[data-layout='mobile'] .st-foot { position: relative; z-index: 7; }
[data-layout='mobile'] .st-transcript {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--sp-rail) + var(--safe-b, 0px));
  z-index: 7;
  width: auto;
  height: calc(100dvh - 57px - var(--sp-rail) - var(--safe-b, 0px));
  max-height: 72dvh;
  transform: translateY(calc(100% + var(--sp-rail) + var(--safe-b, 0px)));
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  border-top: 1px solid var(--color-edge-strong);
  border-radius: var(--radius-overlay) var(--radius-overlay) 0 0;
}
[data-layout='mobile'] .st-transcript[data-open='true'] { transform: none; }
.st-sheet-inputs { display: contents; }
.st-sheet-inputs:empty { display: none; }
[data-layout='mobile'] .st-transcript[data-dragging='true'] { transition: none; }
[data-layout='mobile'] #session-main[data-transcript] .st-transcript { width: auto; opacity: 1; visibility: visible; pointer-events: auto; overflow: visible; }
[data-layout='mobile'] .st-col-head { position: relative; cursor: grab; touch-action: none; padding: 0 12px 0 16px; }
[data-layout='mobile'] .sheet__grip { display: block; position: absolute; left: 50%; top: 6px; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: var(--color-edge); }
[data-layout='mobile'] .st-close__desktop, [data-layout='mobile'] .sheet__close-label { display: none; }
[data-layout='mobile'] .st-close__phone { display: flex; }
[data-layout='mobile'] #sheet-close { width: var(--size-control-phone); height: var(--size-control-phone); padding: 0; }
[data-layout='mobile'] .st-keep { display: none; }
[data-layout='mobile'] .st-log { padding: 4px 16px 12px; }
/* "Hear this again" is a 44px target on a phone, as every control in the sheet (the desktop's is the 32px compact) */
[data-layout='mobile'] .st-transcript .bubble__replay { height: var(--size-control-phone); }
/* the composer and its foot, moved into the sheet under the log: message · Send · Interrupt (the mic is in the rail), Interrupt as its glyph alone */
[data-layout='mobile'] .st-transcript .tt-composer { flex: none; padding: 10px 16px 0; gap: 8px; }
[data-layout='mobile'] .st-transcript #stop-button { width: var(--size-control-phone); padding: 0; }
[data-layout='mobile'] .st-transcript #stop-button span { display: none; }
[data-layout='mobile'] .st-transcript .st-composer-foot { flex: none; flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 16px calc(12px + var(--safe-b, 0px)); }
[data-layout='mobile'] .st-transcript .tt-switch, [data-layout='mobile'] .st-transcript .tt-mic-hint { max-width: none; }
[data-layout='mobile'] .st-transcript .tt-check__effect { display: none; }
.sheetscrim { display: none; }
[data-layout='mobile'] .sheetscrim[data-open='true'] { display: block; position: fixed; inset: 0; z-index: 6; background: var(--color-scrim); }

/* -- Settings as a bottom sheet, over its own scrim ------------------------------------------- */

[data-layout='mobile'] .st-drawer {
  position: fixed;
  z-index: 9;
  left: 0;
  right: 0;
  top: auto;
  bottom: 0;
  width: auto;
  max-height: 86dvh;
  border-left: 0;
  border-top: 1px solid var(--color-edge-strong);
  border-radius: var(--radius-overlay) var(--radius-overlay) 0 0;
}
[data-layout='mobile'] .st-drawer__body { padding-bottom: calc(16px + var(--safe-b, 0px)); }
[data-layout='mobile'] .st-drawer .sd-pair { grid-template-columns: minmax(0, 1fr); }
[data-layout='mobile'] .st-drawer .bd-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
[data-layout='mobile'] .st-drawer .tt-icon-btn--compact { width: var(--size-control-phone); height: var(--size-control-phone); }
[data-layout='mobile'] .st-drawer-scrim:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 8; background: var(--color-scrim); }
[data-layout='mobile'] .st-clear { flex-wrap: wrap; }
[data-layout='mobile'] .st-clear .tt-btn { width: 100%; }

/* toasts sit at the top on a phone during a run -- under the bar, not over its monogram and gear, and away from the
   mic; the persona chip drops under the stack (`--toasts` is its height, measured by js/mobile-session.js on the
   shell, which is <body> on this page). The setup sheet keeps theme.css's bottom corner, as every instructor page. */
[data-layout='mobile'] body:has(#session-view:not([hidden])) .toasts { top: calc(69px + var(--safe-t, 0px)); bottom: auto; left: 16px; right: 16px; max-width: none; align-items: stretch; }
[data-layout='mobile'] body:has(#session-view:not([hidden])) .toast { width: 100%; max-width: none; }
[data-layout='mobile'] .st-chip { top: calc(16px + var(--toasts, 0px)); }

/* -- reduced motion: the states stay, the movement goes --------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  #session-main[data-transcript] .st-transcript,
  [data-layout='mobile'] .st-transcript { transition: none; }
}