/*
 * The student session on a phone (design/pages/student-phone, its gen.mjs; SYSTEM §7.2; App Bible §8.6).
 *
 * A different design, not the desktop squeezed. The whole frame is the navy stage, stacked:
 *
 *   the session bar (57)        monogram · the title over its readouts (status · REC · "4:12 left") · Leave
 *   the room banner             only while the instructor has the room paused, ended or not yet open
 *   the video plate             full-bleed, taking the room: the persona chip and the Notes pill top-left,
 *                               Earpiece | Loudspeaker top-right, the captions plate along the foot
 *   the stage foot              Try saying, or the microphone banner -- hugging its content; gone while the sheet is up
 *   the sheet (cream)           transcript · notes · brief · type, risen above the rail, never over it
 *   the rail (navy)             Transcript (or Type) · Pause/Resume · Stop session · the 68px docked mic under its hint
 *
 * The briefing card covers the plate below the bar (the stage's idle state); confirmations are bottom sheets over a
 * scrim; toasts sit at the top, away from the mic. Every control is the kit (components.css), every colour a token.
 *
 * Everything keys on `[data-layout='mobile']`, which js/device-boot.js sets before the first paint -- never a width
 * query: a phone in landscape is wider than most tablet breakpoints and is still a phone held in two hands. The desktop
 * rules in student.css are unscoped base rules, so every phone rule here is an override of one of them.
 *
 * State hooks (written by js/student.js and js/mobile-session.js):
 *   #session-main[data-sheet]        'open' · 'closed'          the sheet is on screen (the stage foot hides while it is)
 *   #panel[data-open][data-view]     view: transcript · notes · brief; `data-open` draws the height, `data-dragging` stops its transition
 *   #m-rail[data-briefing]           the rail is away under the briefing
 *   .st-root[data-run='stopped']     the end sheet takes the room; the rail goes
 *   #session-main[data-transcript-off]   the Type pill and the inputs-only sheet
 *   --kbd on .st-root                the soft keyboard's height (the stack stands above it)
 * The renderer contract inside #stage is untouched (App Bible §19.4, §19.8): the canvas first, then the video, the
 * backdrop and the cover the renderer inserts; on a touch device the key is js/chroma.js's CSS/SVG filter.
 */

/* ============================================================================================ the shell */

[data-layout='mobile'] .st-root {
  /* 100dvh, not 100vh: mobile Safari measures vh with the address bar hidden, so a 100vh page is taller than the
     screen until you scroll, and this page never scrolls. `--kbd` is the soft keyboard (js/mobile-session.js). */
  height: 100dvh;
  height: calc(100dvh - var(--kbd, 0px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-field-navy);
}

[data-layout='mobile'] .st-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  position: relative;
}

/* the stage column takes the room; the sheet (below it in the body) takes its share back when open */
[data-layout='mobile'] .st-left {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}

[data-layout='mobile'] .st-stage {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: auto;
}

/* the notes column and its scrim: the notes are a view of the sheet on a phone (moved there by js/mobile-session.js) */
[data-layout='mobile'] .st-notes__scrim { display: none; }

/* ============================================================================================ the session bar: 56 + 1 */

[data-layout='mobile'] .st-bar {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: 8px;
  row-gap: 1px;
  align-content: center;
  height: calc(57px + var(--safe-t, 0px));
  padding: var(--safe-t, 0px) 8px 0;
}

/* the monogram stands in for the wordmark; the rule beside it, the subtitle and the counters go (no room over a face) */
[data-layout='mobile'] .st-bar .tt-logo,
[data-layout='mobile'] .st-bar__sep,
[data-layout='mobile'] .st-bar__sub,
[data-layout='mobile'] .st-bar .st-turns { display: none; }

[data-layout='mobile'] .st-mono {
  grid-area: 1 / 1 / 3 / 2;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: 44px;
  height: 44px;
  padding: 0;
}

[data-layout='mobile'] .st-bar__title {
  grid-area: 1 / 2 / 2 / 3;
  align-self: end;
  min-width: 0;
}

/* the readouts sit under the title on the bar's second line: status · REC · the countdown, inline */
[data-layout='mobile'] .st-bar__readouts {
  grid-area: 2 / 2 / 3 / 3;
  align-self: start;
  margin-left: 0;
  gap: 12px;
  min-width: 0;
  overflow: hidden;
  flex: 1 1 auto;
}

[data-layout='mobile'] .st-bar #status-chip { min-width: 0; flex: 0 1 auto; }
[data-layout='mobile'] .st-bar #status { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-layout='mobile'] .st-bar .tt-rec,
[data-layout='mobile'] .st-bar .tt-countdown { flex: none; }
[data-layout='mobile'] .st-bar .tt-rec { height: 18px; padding: 0; }
/* while the instructor has the room paused the banner stands in for the countdown (the clock is stopped) */
[data-layout='mobile'] .st-root[data-room='paused'] .st-bar .tt-countdown { display: none; }
[data-layout='mobile'] .st-bar .tt-countdown {
  height: 18px;
  padding: 0;
  border: 0;
  font: var(--text-kicker);
  letter-spacing: var(--tracking-kicker);
}
[data-layout='mobile'] .st-bar .tt-countdown__of { font-weight: 400; }

/* the run controls leave the bar for the rail (js/mobile-session.js); the tools keep Leave alone: an icon over the word */
[data-layout='mobile'] .st-bar__tools {
  grid-area: 1 / 3 / 3 / 4;
  align-self: center;
  gap: 0;
}

[data-layout='mobile'] .st-bar .st-tool {
  flex-direction: column;
  justify-content: center;
  gap: 0;
  width: 48px;
  height: var(--size-control-phone);
  padding: 0;
  font: var(--text-micro);
  letter-spacing: var(--tracking-micro);
}
[data-layout='mobile'] .st-bar .st-tool .st-tool__icon svg { width: 20px; height: 20px; }
[data-layout='mobile'] .st-bar .st-tool__bar { display: none; }

/* ============================================================================================ the room banner */

[data-layout='mobile'] .st-room { padding: 0 16px; }
[data-layout='mobile'] .st-room .tt-banner { padding: 10px 0; align-items: flex-start; }
[data-layout='mobile'] .st-room .tt-banner__body { flex-direction: column; align-items: flex-start; gap: 2px; }

/* ============================================================================================ the video plate */

[data-layout='mobile'] .st-video {
  flex: 1 1 auto;
  min-height: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* the stage corner: the persona chip at 16, the Notes pill under it at 56 (its slot even with no chip) */
/* a toast never covers a control: while one is up at the top, the corner and the audio control drop under it
   (`--toasts` is the toast stack's height plus 12px, measured by js/mobile-session.js) */
[data-layout='mobile'] .st-chip,
[data-layout='mobile'] #session-main[data-notes='closed'] .st-chip,
[data-layout='mobile'] #session-main[data-notes='open'] .st-chip { top: calc(16px + var(--toasts, 0px)); left: 16px; }
[data-layout='mobile'] .st-dock--left,
[data-layout='mobile'] #session-main[data-notes='open'] .st-dock--left { display: flex; top: calc(56px + var(--toasts, 0px)); left: 16px; }
[data-layout='mobile'] #stage[data-briefing='true'] .st-dock--left { display: none; }
[data-layout='mobile'] #session-main[data-notes='open'] .st-captions { left: 16px; }
[data-layout='mobile'] .st-dock--right { top: 16px; right: 16px; }

/* Notes' home while the sheet is shut: a 44px control on the captions plate, icon and word */
[data-layout='mobile'] .st-dock .st-tool {
  height: var(--size-control-phone);
  padding: 0 12px 0 10px;
  gap: 8px;
  border: 1px solid var(--color-edge);
  background: var(--color-captions-scrim);
  color: var(--color-ink);
  font: var(--text-button);
  letter-spacing: var(--tracking-button);
}
[data-layout='mobile'] .st-dock .st-tool .st-tool__icon { display: flex; }
[data-layout='mobile'] .st-dock .st-tool .st-tool__chev,
[data-layout='mobile'] .st-dock .st-tool .st-tool__bar { display: none; }

/* audio output: Earpiece | Loudspeaker top-right (js/student.js shows it on touch screens); the chosen one is the
   cream segment (the kit's on-navy rule); cream labels, since the scrim lets bright picture through */
[data-layout='mobile'] .mspeaker {
  display: inline-flex;
  position: absolute;
  z-index: 4;
  top: calc(10px + var(--toasts, 0px));
  right: 16px;
  background: var(--color-captions-scrim);
  border-color: var(--color-edge);
}
[data-layout='mobile'] .mspeaker .tt-seg__item {
  height: var(--size-control-phone);
  padding: 0 12px;
  color: var(--color-ink);
}
[data-layout='mobile'] .mspeaker .tt-seg__item.is-selected { color: var(--color-ink-on-bright); }

/* captions along the foot of the picture */
[data-layout='mobile'] .st-captions,
[data-layout='mobile'] #session-main[data-transcript-off] .st-captions,
[data-layout='mobile'] #session-main[data-transcript-off] .st-stage:has(#mic-banner:not([hidden])) .st-captions {
  left: 16px;
  right: 16px;
  bottom: 16px;
}
[data-layout='mobile'] .tt-captions { max-width: 100%; }
[data-layout='mobile'] .st-avatar-note { max-width: calc(100% - 32px); bottom: 16px; }

/* the stage notes (connecting, paused, the room ended) fit the width */
[data-layout='mobile'] .st-stage-note__title,
[data-layout='mobile'] .st-stage-note__text { max-width: 320px; }
[data-layout='mobile'] .st-ended-note .tt-btn { width: 100%; max-width: 320px; }

/* the Transcript-off readout is not drawn on a phone: the Type pill, the briefing's "Not shown" fact and the sheet's
   "No transcript is kept" say it, and the corner is the Notes pill's */
[data-layout='mobile'] #session-main[data-transcript-off] #stage .st-readout-off { display: none; }

/* ============================================================================================ voice only: the orb on the plate */

[data-layout='mobile'] #session-main[data-voice='true'] .st-left { flex: 1 1 auto; }
[data-layout='mobile'] #session-main[data-voice='true'] .st-stage { width: auto; flex: 1 1 auto; }

[data-layout='mobile'] .st-orb-plate { padding: 24px; container-type: size; }
/* sized to the plate, which gives room to the sheet: a 240px orb on a 269px strip would be the whole strip */
[data-layout='mobile'] .st-orb {
  width: min(240px, 60cqw, 48cqh);
  height: auto;
  aspect-ratio: 1;
  margin-bottom: 16px;
}
[data-layout='mobile'] .st-orb__rings { width: 100%; height: 100%; }
[data-layout='mobile'] .st-orb__core { width: 52%; height: 52%; }
[data-layout='mobile'] .st-orb__core svg { width: 36%; height: 36%; }
[data-layout='mobile'] .st-orb-hint { margin-top: 10px; }

/* ============================================================================================ the stage foot: Try saying · the mic banner */

/* hugs its content: the padding travels with each child, so an empty foot takes no height */
[data-layout='mobile'] .st-foot,
[data-layout='mobile'] #session-main[data-transcript-off] .st-foot {
  position: static;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  gap: 0;
  align-items: stretch;
  background: var(--color-field-navy);
  z-index: auto;
}
[data-layout='mobile'] .st-foot > *,
[data-layout='mobile'] #session-main[data-transcript-off] .st-foot > * { width: auto; max-width: none; }

/* gone while the sheet is up (the sheet replaces it), under the briefing and once the run has stopped */
[data-layout='mobile'] #session-main[data-sheet='open'] .st-foot,
[data-layout='mobile'] #stage[data-briefing='true'] ~ .st-foot,
[data-layout='mobile'] #stage[data-run='stopped'] ~ .st-foot,
[data-layout='mobile'] .st-root[data-room='ended'] .st-foot { display: none; }

/* Try saying: the head at the margin, one row of chips that scrolls sideways and bleeds off the right edge as the
   cue that it continues */
[data-layout='mobile'] .st-foot .tt-suggest { padding: 12px 0 2px; gap: 8px; }
[data-layout='mobile'] .st-suggest__head { padding: 0 16px; align-items: baseline; gap: 10px; flex-wrap: wrap; }
[data-layout='mobile'] .st-suggest__meta { white-space: nowrap; }
[data-layout='mobile'] .st-foot .tt-suggest__row {
  gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding: 2px 16px 2px 16px;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
[data-layout='mobile'] .st-foot .tt-suggest__row::-webkit-scrollbar { display: none; }
[data-layout='mobile'] .st-foot .tt-suggest__chip { flex: none; max-width: 78vw; scroll-snap-align: start; }

/* the microphone banner where Try saying was: title over the text, the action under them */
[data-layout='mobile'] .st-banners { padding: 12px 16px 2px; }
[data-layout='mobile'] .st-banners .tt-banner { padding: 10px 0; align-items: flex-start; }
[data-layout='mobile'] .st-banners .tt-banner__body { flex-direction: column; align-items: flex-start; gap: 2px; }
[data-layout='mobile'] .st-banners .tt-banner__action { align-self: flex-end; margin-left: 0; }
[data-layout='mobile'] .st-banners .tt-banner__action .tt-btn { height: var(--size-control-phone); }

/* ============================================================================================ the rail: Transcript · Pause/Resume · Stop session · the docked mic */

/*
 * Fixed slots, not space-between: the pill's width must never move the run controls (USABILITY §Structure -- the
 * student's run controls sit in the same place on every state). Column 1 holds the pill at its start; column 2 (120)
 * is the run group with Pause/Resume in its first cell and Stop session always in its second, so a lone Stop session
 * stays put; column 3 is the mic. At 390: Pause/Resume x 178–234, Stop session 242–298, the mic 306–374.
 */
[data-layout='mobile'] .st-root .mrail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px 68px;
  column-gap: 8px;
  align-items: end;
  flex: none;
  padding: 12px 16px calc(16px + var(--safe-b, 0px));
  padding-left: calc(16px + var(--safe-l, 0px));
  padding-right: calc(16px + var(--safe-r, 0px));
  background: var(--color-field-navy);
}

/* away under the briefing (its Start is the one on screen) and once the run has stopped (the end sheet takes the room) */
[data-layout='mobile'] .st-root .mrail[data-briefing='true'],
[data-layout='mobile'] .st-root[data-run='stopped'] .mrail { display: none; }

/* the pill: Transcript with the caret (up to open, down to hide) and the unread count; Type with the keyboard glyph */
[data-layout='mobile'] .st-root .mtranscript {
  justify-self: start;
  max-width: 100%;
  height: var(--size-control-phone);
  padding: 0 12px;
  gap: 6px;
  margin-bottom: 12px;
  font: var(--text-button-lg);
  letter-spacing: var(--tracking-button-lg);
}
[data-layout='mobile'] .st-root .mtranscript__chev { transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1); }
[data-layout='mobile'] .st-root .mtranscript[aria-expanded='true'] .mtranscript__chev { transform: rotate(180deg); }
[data-layout='mobile'] .st-root .mtranscript__key { display: none; }
[data-layout='mobile'] .st-root:has(#session-main[data-transcript-off]) .mtranscript__chev { display: none; }
[data-layout='mobile'] .st-root:has(#session-main[data-transcript-off]) .mtranscript__key { display: block; }
[data-layout='mobile'] .st-root .mtranscript__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;
  white-space: nowrap;
}

/* the run group: the bar's controls, moved here; icon over the word(s), 56 × 62 so "Stop / session" fits on two lines */
[data-layout='mobile'] .st-root .mrail__run { display: flex; justify-content: flex-end; margin-bottom: 3px; }
[data-layout='mobile'] .st-root .mrail__run .runctl {
  display: grid;
  grid-template-columns: 56px 56px;
  column-gap: 8px;
  align-items: end;
}
[data-layout='mobile'] .st-root .mrail__run .runctl > .tt-btn {
  grid-column: 1;
  grid-row: 1;
  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'] .st-root .mrail__run .runctl > #stop-session-button { grid-column: 2; }
[data-layout='mobile'] .st-root .mrail__run .runctl > .tt-btn svg { width: 20px; height: 20px; }
[data-layout='mobile'] .st-root .mrail__run .runctl > .tt-btn > span { display: block; max-width: 56px; }

/* the mic dock: the one-line hint over the 68px button; the hint names the mic's own state (and goes when the mic is off) */
[data-layout='mobile'] .st-root .mrail__mic {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  width: 68px;
}
[data-layout='mobile'] .st-root .mrail__hint {
  margin: 0;
  font: var(--text-label-caps);
  letter-spacing: var(--tracking-label-caps);
  text-transform: uppercase;
  color: var(--color-ink-2);
  white-space: nowrap;
}
[data-layout='mobile'] .st-root .st-mic-hint__word { display: none; }
[data-layout='mobile'] .st-root .mrail__mic .st-mic-hint__word[data-word='idle'] { display: block; }
/* held (the engine's data-active) says Release to send; Always listening says so even while its mic is open; the
   browser's refusal names itself -- later rules win at equal weight, so the order here is the precedence. Every
   `display: none` carries `[data-word]` so it weighs the same as the `display: block` it has to beat: without it an
   armed mic that is also open showed "Release to send" and "Always listening" stacked (QA 2026-10-24) */
[data-layout='mobile'] .st-root .mrail__mic:has(.tt-mic[data-active='true']) .st-mic-hint__word[data-word] { display: none; }
[data-layout='mobile'] .st-root .mrail__mic:has(.tt-mic[data-active='true']) .st-mic-hint__word[data-word='held'] { display: block; }
[data-layout='mobile'] .st-root .mrail__mic:has(.tt-mic[data-handsfree='true']) .st-mic-hint__word[data-word] { display: none; }
[data-layout='mobile'] .st-root .mrail__mic:has(.tt-mic[data-handsfree='true']) .st-mic-hint__word[data-word='armed'] { display: block; }
[data-layout='mobile'] .st-root .mrail__mic:has(.tt-mic.st-mic--blocked) .st-mic-hint__word[data-word] { display: none; }
[data-layout='mobile'] .st-root .mrail__mic:has(.tt-mic.st-mic--blocked) .st-mic-hint__word[data-word='blocked'] { display: block; }
[data-layout='mobile'] .st-root .mrail__mic:has(.tt-mic:disabled) .mrail__hint { visibility: hidden; }

[data-layout='mobile'] .st-root #mic-dock .tt-mic {
  width: var(--size-mic-docked);
  height: var(--size-mic-docked);
  /* nothing about a press-and-hold may be read as a scroll, a selection or a long-press menu: all three cancel the
     pointer stream mid-utterance */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
[data-layout='mobile'] .st-root #mic-dock .tt-mic .st-mic__icon svg { width: 28px; height: 28px; }
[data-layout='mobile'] .st-root #mic-dock .tt-mic .tt-mic__level { left: 8px; right: 8px; bottom: 6px; height: 4px; }
[data-layout='mobile'] .st-root #mic-dock .tt-mic .tt-mic__level-fill { height: 4px; }

/* ============================================================================================ the sheet: transcript · notes · brief · type */

/*
 * In the flow above the rail, never over it: opening shortens the plate, and the rail keeps its place. Shut it has no
 * height; open it takes its share of the body -- 60% for the transcript (400 of 669 at 844), more for the notes and the
 * brief, as the design draws them -- and never leaves the picture under 120px.
 */
[data-layout='mobile'] .st-transcript,
[data-layout='mobile'] #session-main[data-transcript-off] .st-transcript {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: none;
  width: auto;
  height: 0;
  max-height: calc(100% - 120px);
  min-height: 0;
  padding: 0;
  overflow: hidden;
  visibility: hidden;
  border-top: 1px solid var(--color-edge);
  transition: height 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s;
}
[data-layout='mobile'] .st-transcript[data-open='true'] { height: 60%; padding-top: 12px; visibility: visible; }
[data-layout='mobile'] .st-transcript[data-open='true'][data-view='notes'] { height: 71%; }
[data-layout='mobile'] .st-transcript[data-open='true'][data-view='brief'] { height: 81%; }
[data-layout='mobile'] #session-main[data-transcript-off] .st-transcript[data-open='true'] { padding-top: 12px; visibility: visible; }
/* with the transcript off the sheet holds the inputs alone, sized to them */
[data-layout='mobile'] #session-main[data-transcript-off] .st-transcript[data-open='true'][data-view='transcript'] { height: auto; }
/* a voice-only session gives the sheet no more room than any other (the desktop lets the column take the rest) */
[data-layout='mobile'] #session-main[data-voice='true'] .st-transcript { flex: none; }
/* while a drag writes the height frame by frame, a transition would lag the finger */
[data-layout='mobile'] .st-transcript[data-dragging='true'] { transition: none; }
/* the desktop column's put-away state never applies here */
[data-layout='mobile'] #session-main[data-transcript='closed'] .st-transcript { width: auto; opacity: 1; pointer-events: auto; }

/* the grip, then the header: the title over its meta at the left, the tools at the right; the whole header is the
   drag handle, so a 4px pill is not the target */
[data-layout='mobile'] .sheet__grip {
  display: block;
  position: absolute;
  top: -4px;
  left: 50%;
  translate: -50% 0;
  width: 36px;
  height: 4px;
  border-radius: var(--radius-0);
  background: var(--color-edge);
}
[data-layout='mobile'] .st-transcript .st-col-head {
  position: relative;
  display: flex;
  height: 48px;
  padding: 0 8px 0 16px;
  border-bottom: var(--rule-strong);
  touch-action: none;
  cursor: grab;
}
[data-layout='mobile'] .st-col-head__text[hidden] { display: none; }
[data-layout='mobile'] .st-transcript .st-col-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-layout='mobile'] .st-transcript .st-col-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-layout='mobile'] .sheet__spacer { display: block; flex: 1 1 auto; }
[data-layout='mobile'] #sheet-close { display: none; }   /* the rail's pill hides the sheet; nothing to press here */
[data-layout='mobile'] .sheet__actions { display: flex; align-items: center; gap: 0; flex: none; }
[data-layout='mobile'] .sheet__actions:empty { display: none; }
[data-layout='mobile'] .sheet__actions .tt-btn {
  height: var(--size-control-phone);
  padding: 0 10px;
  gap: 4px;
  border-radius: var(--radius-control);
  width: auto;
  flex-direction: row;
  font: var(--text-button);
  letter-spacing: var(--tracking-button);
}
[data-layout='mobile'] .sheet__actions .st-tool .st-tool__icon { display: flex; }
[data-layout='mobile'] .sheet__actions .st-tool .st-tool__icon svg { width: 16px; height: 16px; }
[data-layout='mobile'] .sheet__actions .st-tool .st-tool__chev,
[data-layout='mobile'] .sheet__actions .st-tool .st-tool__bar { display: none; }
/* in the notes or the brief, the tool that opened the view gives way to the way back (‹ Transcript) */
[data-layout='mobile'] .st-transcript[data-view='notes'] #notes-toggle,
[data-layout='mobile'] .st-transcript[data-view='brief'] #brief-toggle { display: none; }

/* the log: the newest line at the foot, the turn above cut at its own padding */
[data-layout='mobile'] .st-log { padding: 0 16px 16px; }
[data-layout='mobile'] .st-transcript .tt-turn { grid-template-columns: 44px 1fr; }
/* "Hear this again" is a 44px target on a phone, as every other control in the sheet (the desktop's is the 32px compact) */
[data-layout='mobile'] .st-transcript .bubble__replay { height: var(--size-control-phone); }
[data-layout='mobile'] .st-empty { padding: 20px 16px; }
[data-layout='mobile'] .st-log > .st-empty { margin: 0 -16px; }

/* the sheet's other two views: the notes column and the brief body, moved in by js/mobile-session.js */
[data-layout='mobile'] .st-sheet__slot { display: contents; }
[data-layout='mobile'] .st-transcript .st-notes,
[data-layout='mobile'] #session-main[data-notes='open'] .st-transcript .st-notes,
[data-layout='mobile'] .st-transcript #brief-body { display: none; }
[data-layout='mobile'] .st-transcript[data-view='notes'] #transcript,
[data-layout='mobile'] .st-transcript[data-view='notes'] #transcript-head,
[data-layout='mobile'] .st-transcript[data-view='notes'] #run-gate,
[data-layout='mobile'] .st-transcript[data-view='brief'] #transcript,
[data-layout='mobile'] .st-transcript[data-view='brief'] #transcript-head,
[data-layout='mobile'] .st-transcript[data-view='brief'] #run-gate { display: none; }

[data-layout='mobile'] .st-transcript[data-view='notes'] .st-notes,
[data-layout='mobile'] #session-main[data-notes='open'] .st-transcript[data-view='notes'] .st-notes {
  display: flex;
  position: static;
  flex: 1 1 auto;
  flex-direction: column;
  width: auto;
  min-height: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
  z-index: auto;
}
[data-layout='mobile'] .st-transcript .st-notes .st-col-head { display: none; }   /* the sheet header names the view */
[data-layout='mobile'] .st-transcript .st-notes__list { padding: 4px 16px 12px; }
[data-layout='mobile'] .st-transcript .st-note { padding: 14px 0; border-top: var(--rule-hair); }
[data-layout='mobile'] .st-transcript .st-note:first-child { border-top: 0; }

[data-layout='mobile'] .st-transcript[data-view='brief'] #brief-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  padding: 12px 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
[data-layout='mobile'] .st-transcript .st-brief__text,
[data-layout='mobile'] .st-transcript .st-brief__list { font: var(--text-body-sm); letter-spacing: 0; }

/* the composer at the sheet's foot: message · Send · Interrupt (the mic stays docked in the rail), then Always listening
   and the hint stacked */
[data-layout='mobile'] .st-sheet__inputs { display: flex; flex-direction: column; flex: none; }
[data-layout='mobile'] .st-sheet__inputs .tt-composer { padding: 10px 16px 0; gap: 8px; border-top: var(--rule-hair); }
[data-layout='mobile'] #session-main[data-transcript-off] .st-sheet__inputs .tt-composer { border-top: 0; padding-top: 12px; }
[data-layout='mobile'] .st-sheet__inputs .tt-composer > .tt-btn { flex: none; padding: 0 12px; }
[data-layout='mobile'] .st-sheet__inputs .tt-composer > #stop-button { padding: 0 10px; gap: 4px; }
[data-layout='mobile'] .st-sheet__inputs .st-input { min-width: 0; }
[data-layout='mobile'] .st-sheet__inputs .st-composer-foot {
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  padding: 4px 16px 10px;
}
[data-layout='mobile'] .st-sheet__inputs .st-composer-foot .tt-switch { padding: 4px 0; max-width: none; min-height: var(--size-control-phone); }
[data-layout='mobile'] .st-sheet__inputs .st-composer-foot .tt-mic-hint,
[data-layout='mobile'] .st-sheet__inputs .st-composer-foot .st-state-line,
[data-layout='mobile'] .st-sheet__inputs .st-composer-foot .st-time-warn { max-width: none; }
/* no composer under the briefing (the sheet opens there for the notes or the brief, with nothing to send yet) nor on
   the end sheet (the rail is gone and Join another session is the way on) */
[data-layout='mobile'] .st-root[data-briefing='true'] .st-sheet__inputs,
[data-layout='mobile'] .st-root[data-run='stopped'] .st-sheet__inputs { display: none; }

/* the scrim behind the old sheet is not drawn: the pill (now reading Hide), a drag down or Escape close the sheet */
[data-layout='mobile'] .st-root .sheetscrim { display: none; }

/* ============================================================================================ the end sheet */

/*
 * The run has stopped: the dimmed plate keeps 160px and the sheet takes the rest, held open by js/mobile-session.js. The
 * sheet body is the scroll box -- the end title and the tools in its header row, the saved line, the insights, Join
 * another session, then the transcript from the start under its own kicker.
 */
[data-layout='mobile'] .st-root[data-run='stopped'] .st-left { flex: 0 0 160px; }
[data-layout='mobile'] .st-root[data-run='stopped'] .st-transcript {
  flex: 1 1 auto;
  height: auto;
  max-height: none;
  padding-top: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
[data-layout='mobile'] .st-root[data-run='stopped'] .sheet__grip { display: none; }
[data-layout='mobile'] .st-root[data-run='stopped'] .st-transcript .st-col-head {
  display: flex;
  height: 60px;
  flex: none;
  cursor: default;
  touch-action: auto;
}
[data-layout='mobile'] .st-root[data-run='stopped'] .st-transcript .st-col-head__text { display: none; }
/* the end title takes the header row's left (the tools keep the right); the rest of the end screen follows under it */
[data-layout='mobile'] .st-root[data-run='stopped'] .st-end { padding: 14px 16px 0; gap: 10px; }
[data-layout='mobile'] .st-root[data-run='stopped'] .st-end__title {
  position: absolute;
  top: 16px;
  left: 16px;
  right: 196px;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-layout='mobile'] .st-endgroup { border-bottom: 0; }
/* the sheet scrolls as one: nothing inside it takes the free space (the desktop gives the open lists their own scroll box) */
[data-layout='mobile'] .st-endgroup.is-open,
[data-layout='mobile'] .st-insights.is-open { flex: none; }

/* the insights as one column in the scrolling sheet: the note, Show all insights, the lists, Download insights (PDF),
   then the keep line and the credit */
[data-layout='mobile'] .st-insights { padding: 4px 16px 0; gap: 10px; }
[data-layout='mobile'] .st-insights__box,
[data-layout='mobile'] .st-insights__clip,
[data-layout='mobile'] .st-insights__scroll,
[data-layout='mobile'] .st-insights__row { display: contents; }
[data-layout='mobile'] .st-insights > .tt-kicker { order: 0; }
[data-layout='mobile'] .st-insights__note { order: 1; font: var(--text-body); letter-spacing: 0; }
[data-layout='mobile'] #gate-insights-toggle { order: 2; align-self: flex-start; min-height: var(--size-control-phone); padding: 0 2px; margin: -4px 0; }
[data-layout='mobile'] .st-insights__sections { order: 3; }
[data-layout='mobile'] #gate-insights-pdf {
  order: 4;
  width: 100%;
  height: var(--size-control-phone);
  justify-content: center;
  font: var(--text-button-lg);
  letter-spacing: var(--tracking-button-lg);
}
[data-layout='mobile'] .st-insights__foot { order: 5; padding-top: 0; border-top: 0; }

/* Join another session (or Join again): full width, 44 */
[data-layout='mobile'] .st-gate { padding: 12px 16px 16px; border-top: 0; flex-direction: column; align-items: stretch; gap: 8px; }
[data-layout='mobile'] .st-gate .tt-btn {
  flex: none;
  width: 100%;
  height: var(--size-control-phone);
  font: var(--text-button-lg);
  letter-spacing: var(--tracking-button-lg);
}
[data-layout='mobile'] .st-tx__head { padding: 8px 16px 4px; }
[data-layout='mobile'] .st-root[data-run='stopped'] .st-log { flex: none; overflow: visible; padding: 0 16px 16px; }
[data-layout='mobile'] .st-root[data-run='stopped'] .st-log > :first-child { margin-top: 0; }

/* the transcript off and the run stopped: the end screen is the sheet, not the desktop's 460 card over the picture */
[data-layout='mobile'] #session-main[data-transcript-off] .st-transcript[data-mode='gate'] {
  position: relative;
  inset: auto;
  width: auto;
  height: auto;
  max-height: none;
  flex: 1 1 auto;
  visibility: visible;
  align-items: stretch;
  justify-content: flex-start;
  background: var(--color-field-reading);
  pointer-events: auto;
  z-index: auto;
  overflow-y: auto;
}
[data-layout='mobile'] #session-main[data-transcript-off][data-notes='open'] .st-transcript[data-mode='gate'] { left: auto; }
[data-layout='mobile'] #session-main[data-transcript-off] .st-transcript[data-mode='gate'] .st-col-head { display: flex; }
[data-layout='mobile'] #session-main[data-transcript-off] .st-transcript[data-mode='gate'] .st-endgroup {
  width: auto;
  max-height: none;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* ============================================================================================ the briefing card: the stage's idle state */

/*
 * Covers the plate below the bar: a scrolling body (the head with Notes at its right, the facts two by two, the
 * instructor's words, How to talk, What you will be doing, Your records) and the one Start pinned in a foot. The rail is
 * away while it shows; Leave stays reachable in the bar.
 */
[data-layout='mobile'] #stage-brief { padding: 0; overflow: hidden; align-items: stretch; justify-content: stretch; }
[data-layout='mobile'] #welcome-panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;
  height: 100%;
  min-height: 0;
  padding: 0;
  gap: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
[data-layout='mobile'] #welcome-panel .tt-briefing__head { display: flex; flex-direction: column; gap: 4px; padding: 4px 16px 0; }
[data-layout='mobile'] .st-briefing__eyebrow-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--size-control-phone);
}
[data-layout='mobile'] #welcome-notes-home .st-tool {
  height: var(--size-control-phone);
  width: auto;
  padding: 0 10px;
  gap: 6px;
  flex-direction: row;
  border-radius: var(--radius-control);
  font: var(--text-button);
  letter-spacing: var(--tracking-button);
}
[data-layout='mobile'] #welcome-notes-home .st-tool .st-tool__icon { display: flex; }
[data-layout='mobile'] #welcome-notes-home .st-tool .st-tool__chev,
[data-layout='mobile'] #welcome-notes-home .st-tool .st-tool__bar { display: none; }
/* a short stage hides the lede on a desktop; the phone card scrolls, so it keeps it */
[data-layout='mobile'] .st-root[data-room]:not([data-room='live']) .tt-briefing__lede { display: block; }

/* the facts, two by two */
[data-layout='mobile'] #welcome-panel .tt-briefing__facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 10px 16px 0;
  border-bottom: 0;
}
[data-layout='mobile'] #welcome-panel .tt-briefing__fact { padding: 6px 12px; white-space: normal; border-left: var(--rule-hair); }
[data-layout='mobile'] #welcome-panel .tt-briefing__fact:nth-child(2n+1) { border-left: 0; padding-left: 0; }
[data-layout='mobile'] #welcome-panel .tt-briefing__fact:nth-child(n+3) { border-top: var(--rule-hair); }
[data-layout='mobile'] #welcome-panel .tt-briefing__fact:last-child:nth-child(odd) { grid-column: 1 / -1; border-left: 0; padding-left: 0; }

/* the body sections in the design's order: the instructor's words, How to talk, What you will be doing, Your records */
[data-layout='mobile'] #welcome-panel .tt-briefing__main { display: contents; }
[data-layout='mobile'] #welcome-panel .tt-briefing__from { order: 2; margin: 10px 16px 0; padding: 8px 0; }
[data-layout='mobile'] #welcome-panel .tt-briefing__main > .tt-briefing__section { order: 3; padding: 10px 16px 0; }
[data-layout='mobile'] #welcome-panel .tt-briefing__side { order: 4; display: flex; flex-direction: column; gap: 8px; padding: 10px 16px 0; border-left: 0; }
[data-layout='mobile'] #welcome-panel #welcome-notice-block { order: 5; }
[data-layout='mobile'] #welcome-panel .tt-briefing__main > .tt-briefing__section:last-of-type { padding-bottom: 12px; }
[data-layout='mobile'] #welcome-panel .tt-briefing__steps { gap: 8px; }
[data-layout='mobile'] #welcome-panel .tt-briefing__side p,
[data-layout='mobile'] #welcome-panel .tt-briefing__side li { font: var(--text-body-sm); color: var(--color-ink); }

/* the foot pinned to the card's bottom edge: the one Start on screen, full width, with its note */
[data-layout='mobile'] #welcome-panel .tt-briefing__foot {
  order: 6;
  position: sticky;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  margin-top: auto;
  padding: 12px 16px calc(16px + var(--safe-b, 0px));
  border-top: var(--rule-strong);
  background: var(--color-ground);
}
[data-layout='mobile'] #welcome-panel .tt-briefing__foot .tt-btn { width: 100%; height: var(--size-control-phone); }
[data-layout='mobile'] #welcome-panel .tt-briefing__foot .tt-briefing__note { padding-left: 0; }

/* a phone on its side is 390px tall under a browser bar: the card gives back its lede and tightens, the rail its
   top padding, and the open sheet scrolls as one (head · log · composer · switch) with the plate kept at 64px */
@media (max-height: 480px) {
  [data-layout='mobile'] #welcome-panel .tt-briefing__lede { display: none; }
  [data-layout='mobile'] #welcome-panel .tt-briefing__foot { padding-top: 8px; }
  [data-layout='mobile'] .st-root .mrail { padding-top: 6px; padding-bottom: calc(10px + var(--safe-b, 0px)); }
  [data-layout='mobile'] .st-transcript[data-open='true'],
  [data-layout='mobile'] .st-transcript[data-open='true'][data-view='notes'],
  [data-layout='mobile'] .st-transcript[data-open='true'][data-view='brief'] { height: calc(100% - 64px); max-height: none; overflow-y: auto; overscroll-behavior: contain; }
  [data-layout='mobile'] .st-transcript[data-open='true'] .st-log { flex: none; overflow: visible; }
  [data-layout='mobile'] .st-transcript[data-open='true'] .st-log > :first-child { margin-top: 0; }
}

/* the narrowest phones still in service (a width question, not a layout one): 48px run buttons, 6px gaps, the pill at
   14px without its caret, so the three slots clear each other -- measured at 320: pill 12–124, run 130–232, mic 240–308 */
@media (max-width: 359px) {
  [data-layout='mobile'] .st-root .mrail { grid-template-columns: minmax(0, 1fr) 102px 68px; column-gap: 6px; padding-left: calc(12px + var(--safe-l, 0px)); padding-right: calc(12px + var(--safe-r, 0px)); }
  [data-layout='mobile'] .st-root .mrail__run .runctl { grid-template-columns: 48px 48px; column-gap: 6px; }
  [data-layout='mobile'] .st-root .mrail__run .runctl > .tt-btn { width: 48px; }
  [data-layout='mobile'] .st-root .mrail__run .runctl > .tt-btn > span { max-width: 48px; }
  [data-layout='mobile'] .st-root .mtranscript { padding: 0 8px; gap: 4px; font: var(--text-button); letter-spacing: var(--tracking-button); }
  [data-layout='mobile'] .st-root .mtranscript .mtranscript__chev { display: none; }
  [data-layout='mobile'] .st-bar { padding-left: 4px; padding-right: 4px; column-gap: 6px; }
}

/* ============================================================================================ overlays: dialogs as bottom sheets, toasts at the top */

[data-layout='mobile'] .st-overlay { align-items: flex-end; padding: 0; }
[data-layout='mobile'] .st-overlay .tt-dialog {
  width: 100%;
  max-width: none;
  max-height: calc(100dvh - 48px);
  border-bottom: 0;
  border-radius: var(--radius-overlay) var(--radius-overlay) 0 0;
  padding-bottom: var(--safe-b, 0px);
  overflow-y: auto;
}
/* the kit dialog's 24px insets, as the design's sheets and every other phone sheet (buttons 340 wide at x 25); the
   44px Close keeps its cross where the kit's 32px one sits (14 + 22 = 20 + 12 from the edge) */
[data-layout='mobile'] .st-overlay .tt-dialog__head { padding: 20px 14px 0 24px; }
[data-layout='mobile'] .st-overlay .tt-dialog__head .tt-icon-btn { width: var(--size-control-phone); height: var(--size-control-phone); margin: -8px 0 0; }
[data-layout='mobile'] .st-overlay .tt-dialog__body { padding: 10px 24px 4px; }
[data-layout='mobile'] .st-overlay .tt-dialog__foot { flex-direction: column-reverse; align-items: stretch; gap: 8px; padding: 20px 24px 20px; }
[data-layout='mobile'] .st-overlay .tt-dialog__foot .tt-btn,
[data-layout='mobile'] .st-dialog-alt .tt-btn {
  width: 100%;
  height: var(--size-control-phone);
  font: var(--text-button-lg);
  letter-spacing: var(--tracking-button-lg);
}
[data-layout='mobile'] .st-dialog-alt { flex-direction: column; align-items: stretch; gap: 8px; }

/* toasts sit at the top, under the bar and away from the mic, the width of the screen less the margins */
[data-layout='mobile'] body:has(.st-root: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(.st-root:not([hidden])) .toast { width: 100%; max-width: none; }
/* under the room banner when the instructor has one up (a banner is the room's word; a toast is the page's) */
[data-layout='mobile'] body:has(.st-root:not([hidden]) #room-banner:not([hidden])) .toasts { top: calc(141px + var(--safe-t, 0px)); }

/* the room ended by the instructor: the notice points at the transcript below, not to the right */
[data-layout='mobile'] .st-where--desktop { display: none; }
[data-layout='mobile'] .st-where--phone { display: inline; }

/* ============================================================================================ reduced motion */

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