/* Student page: the join door (design/pages/student-join · DECISIONS §13) and, from "The live session" on, the session view.
 *
 * A light page: navy survives as the 56px masthead band and as ink. Under it two fields meet on one
 * seam — the cream reading field (the statement, the three steps, the instructor note) and the white
 * sheet (where you type). The one live element is the join code, six teal cells with navy ink and a
 * navy edge; the one primary is the navy Join session. Everything is the kit (components.css) plus
 * the page layout below; every colour is a token from theme.css. The phone stacks the same fields,
 * keyed on [data-layout='mobile'] (no width queries); the frame removes the chrome in embed.css. */

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

/* theme.css underlines every link on hover; the wordmark is a lockup, not a sentence link */
.join .tt-logo:hover {
  text-decoration: none;
}

.join__door {
  flex: 1 1 auto;
  display: flex;
  align-items: stretch;
}

/* -- the reading field: what this is -------------------------------------- */

.join__brand {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 88px 64px 48px var(--layout-gutter);
}

.join__brand-mid {
  display: flex;
  flex-direction: column;
  gap: 44px;
}

.join__statement {
  max-width: 660px;
  color: var(--color-ink);
}

.join__lede {
  margin-top: -20px;
  max-width: 774px;
  font: var(--text-lead);
  letter-spacing: var(--tracking-lead);
  color: var(--color-ink-2);
}

.join__steps {
  display: flex;
  flex-direction: column;
  max-width: 660px;
}

.join__steps .tt-kicker {
  margin-bottom: 4px;
}

/* the Lora numeral sits on the step title's baseline; no line-height override on the token */
.join__step {
  display: grid;
  grid-template-columns: 32px 1fr;
  column-gap: 12px;
  align-items: baseline;
  padding: 14px 0 16px;
  border-top: 1px solid var(--color-rule);
}

.tt-kicker + .join__step {
  border-top: 0;
}

.join__step-n {
  font: var(--text-title-md);
  letter-spacing: var(--tracking-title-md);
  color: var(--color-ink-2);
}

.join__step-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.join__step-title {
  font: var(--text-button);
  color: var(--color-ink);
}

.join__step-text {
  font: var(--text-body-sm);
  color: var(--color-ink-2);
}

.join__brand-foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 432px;
  padding-top: 48px;
}

.join__brand-foot .tt-link {
  align-self: flex-start;
}

.join__note {
  font: var(--text-body);
  color: var(--color-ink-2);
}

.join__policy {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--color-rule);
}

.join__dot {
  font: var(--text-body-sm);
  color: var(--color-ink-3);
}

/* -- the sheet: white head (title, blurb, the teal join code) · white body (your details) · the ruled
      notice · Join session. 480 wide, the design's 1440 proportion; the reading field takes the rest. */

.join__sheet {
  width: 480px;
  flex: none;
  display: flex;
  flex-direction: column;
  margin: 0;
  background: var(--color-ground);
}

/* In dark the reading field and the ground meet at about 1.2:1 (cream and white are 1.1:1 apart but read as two
   fields; two navies do not), so the seam is drawn as a hairline, as redeem.css does. The phone stacks the fields,
   so there the seam is the sheet's top edge; the frame's own border (embed.css) outranks both. */
[data-theme='dark'] .join__sheet {
  border-left: 1px solid var(--color-rule);
}

[data-layout='mobile'][data-theme='dark'] .join__sheet {
  border-left: 0;
  border-top: 1px solid var(--color-rule);
}

.join__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 28px var(--layout-gutter) 8px;
}

.join__title {
  font: var(--text-title-lg);
  letter-spacing: var(--tracking-title-lg);
  color: var(--color-ink);
}

.join__blurb {
  font: var(--text-body);
  color: var(--color-ink-2);
}

.join__head .tt-field {
  margin-top: 12px;
}

/*
 * The live cells: teal fill, navy ink and a navy edge (5.71:1 on the fill, 16.16:1 on white — the fill
 * alone is 2.83:1 against white, so the edge carries the boundary); the focus ring is the kit's deep
 * teal outside a 2px gap. A refused code drops to the kit's white error cell with the danger edge (the
 * red would be 2.32:1 against teal, and a refused code is not live); a disabled cell is the kit's.
 */
.join__code {
  position: relative;
}

/* 2026-10-24: the cells are the kit's input cells (white, navy edge, navy ink) -- the teal fill
   read as a block of colour rather than six fields; the deep-teal focus ring is enough live. */
.join__code .tt-code__cell:not(.is-error):not(.is-disabled) {
  background: var(--color-input);
  border-color: var(--color-edge-strong);
  color: var(--color-ink);
}

.join__code .tt-code__cell:not(.is-error):not(.is-disabled) .tt-code__caret {
  background: var(--color-ink);
}

@media (prefers-reduced-motion: no-preference) {
  .join__code .tt-code__caret {
    animation: join-caret 1.1s steps(2, jump-none) infinite;
  }
  @keyframes join-caret {
    50% { opacity: 0; }
  }
}

/*
 * The real control, over the cells. Transparent rather than hidden: it keeps focus, the soft keyboard,
 * paste and autofill, and a screen reader meets one ordinary text field. 16px so a phone does not zoom
 * on focus. The kit and theme focus rings are off here because the focused cell draws the ring.
 */
.join__code-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: transparent;
  caret-color: transparent;
  font-size: 16px;
  opacity: 0;
  cursor: text;
}

.join__code-input:focus,
.join__code-input:focus-visible {
  outline: none;
  box-shadow: none;
}

.join__code-input:disabled {
  cursor: default;
}

/* -- your details ---------------------------------------------------------- */

.join__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px var(--layout-gutter) 14px;
}

/* the (i) beside the pronoun label: a 32px pointer target that keeps the 16px label line */
.join__tiphost {
  position: relative;
  display: flex;
  align-items: center;
}

.join__labelrow {
  align-items: center;
}

.join__tip-btn {
  margin: -8px 0 -8px -2px;
  color: var(--color-ink-2);
}

/* the bubble is a real element (the kit's tooltip plate): shown on hover, on keyboard focus and after a press */
.join__tip {
  display: none;
  position: absolute;
  left: 0;
  top: 26px;
  z-index: 2;
}

.join__tip-btn:hover ~ .join__tip,
.join__tip-btn:focus-visible ~ .join__tip,
.join__tiphost.is-open .join__tip {
  display: inline-flex;
}

/* the native select, dressed as the kit's: the caret is a real element beside it, the menu is the browser's own */
.join__select {
  position: relative;
}

.join__select .tt-select {
  display: block;
  appearance: none;
  -webkit-appearance: none;
  padding: 0 44px 0 12px;
  text-overflow: ellipsis;
}

.join__select .tt-select:focus-visible {
  border-color: var(--color-edge-strong);
}

.join__select .tt-select:disabled {
  background: var(--color-hover);
  border-color: var(--color-rule);
  color: var(--color-ink-muted);
  cursor: default;
}

.join__select-caret {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  pointer-events: none;
}

/* -- the records notice: a ruled reading piece inside the white sheet ------- */

.join__notice {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 var(--layout-gutter);
  padding: 12px 0 6px;
  border-top: var(--rule-hair);
  border-bottom: var(--rule-hair);
}

/* a refusal banner follows: its own rule closes the notice, so two rules never stack */
.join__notice--open {
  border-bottom: 0;
}

.join__notice-text {
  font: var(--text-body);
  color: var(--color-ink);
  margin-top: 2px;
}

.join__notice-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 10px;
}

.join__notice .tt-check {
  position: relative;
  margin-top: 2px;
}

/* the native checkbox stays the control; the kit box beside it is what is drawn */
.join__ack-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  opacity: 0;
}

.join__ack:has(.join__ack-input:focus-visible) .tt-check__box {
  box-shadow: 0 0 0 2px var(--color-ground), 0 0 0 4px var(--color-focus);
}

/* -- the one primary, with every refusal in the one place above it ---------- */

.join__submit {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 8px var(--layout-gutter) 32px;
}

.join__submit-note {
  font: var(--text-body-sm);
  color: var(--color-ink-2);
}

/* the banner carries both level glyphs; the level class picks one */
.join__error .join__error-icon--warning {
  display: none;
}

.join__error.tt-banner--warning .join__error-icon--warning {
  display: block;
}

.join__error.tt-banner--warning .join__error-icon--danger {
  display: none;
}

/* -- the phone: the same fields stacked (design/pages/student-join/phone*) ---------------------------
      the 56px masthead (wordmark), the lede on a cream band, the white door with the six teal cells at
      44 × 56, the ruled notice, the 44px navy Join session, then the instructor note and the policy
      links as a 2 × 2 grid of 44px rows. The reading field's two parts become siblings of the sheet
      (display: contents) and are ordered around it, so nothing is duplicated. */

[data-layout='mobile'] .join__bar {
  padding: 0 var(--space-4);
  gap: var(--space-4);
}

[data-layout='mobile'] .join .tt-logo {
  padding: 9px 0 8px;
}

[data-layout='mobile'] .join__door {
  flex-direction: column;
  align-items: stretch;
}

[data-layout='mobile'] .join__brand {
  display: contents;
}

[data-layout='mobile'] .join__brand-mid {
  order: 0;
  gap: 0;
  padding: 16px 16px 18px;
  background: var(--color-field-reading);
}

[data-layout='mobile'] .join__statement,
[data-layout='mobile'] .join__steps {
  display: none;
}

[data-layout='mobile'] .join__lede {
  margin: 0;
  max-width: 340px;
  font: var(--text-body);
  letter-spacing: var(--tracking-body);
  color: var(--color-ink-2);
}

[data-layout='mobile'] .join__sheet {
  order: 1;
  width: 100%;
}

[data-layout='mobile'] .embed__origin {
  order: 2;
}

[data-layout='mobile'] .join__brand-foot {
  order: 3;
  margin: 16px 16px 0;
  padding: 20px 0 calc(24px + var(--safe-b));
  max-width: none;
  border-top: var(--rule-hair);
}

[data-layout='mobile'] .join__note {
  font: var(--text-body-sm);
}

[data-layout='mobile'] .join__policy {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
  margin-top: 12px;
  padding-top: 8px;
}

[data-layout='mobile'] .join__policy .join__dot {
  display: none;
}

[data-layout='mobile'] .join__policy .tt-link {
  justify-content: flex-start;
}

[data-layout='mobile'] .join__head {
  padding: 24px 16px 12px;
}

[data-layout='mobile'] .join__body {
  gap: 16px;
  padding: 16px 16px 20px;
}

[data-layout='mobile'] .join__notice {
  margin: 0 16px;
  padding: 16px 0 10px;
}

[data-layout='mobile'] .join__submit {
  gap: 12px;
  padding: 12px 16px 8px;
}

/* every target 44px (the kit's .tt-phone helpers, keyed here on data-layout) */
[data-layout='mobile'] .join .tt-code--input .tt-code__cell {
  width: 44px;
  height: 56px;
}

[data-layout='mobile'] .join .tt-input,
[data-layout='mobile'] .join .tt-select {
  height: var(--size-control-phone);
  min-height: var(--size-control-phone);   /* mobile.css gives every phone <select> a 46px floor; the kit's 44 is the row */
  font: var(--text-body-lg);
  letter-spacing: var(--tracking-body-lg);
}

[data-layout='mobile'] .join .tt-btn {
  height: var(--size-control-phone);
  padding: 0 18px;
  font: var(--text-button-lg);
  letter-spacing: var(--tracking-button-lg);
}

[data-layout='mobile'] .join .tt-icon-btn--compact {
  width: var(--size-control-phone);
  height: var(--size-control-phone);
}

[data-layout='mobile'] .join__tip-btn {
  margin: -14px 0 -14px -2px;
}

[data-layout='mobile'] .join__tip {
  max-width: min(280px, calc(100vw - 32px));
}

[data-layout='mobile'] .join .tt-check,
[data-layout='mobile'] .join .tt-link--action {
  min-height: var(--size-control-phone);
}


/* ============================================================================================
   The live session, desktop (design/pages/student-live, student-states, student-end; SYSTEM §2,
   §8–§9; App Bible §8, §19.8). The whole frame is the navy stage, fixed in both themes; the cream
   transcript column at the right is the reading field, the one seam on the screen. Three columns
   under a 56px session bar: the instructor's notes (288), the stage (the plate, then the foot with
   the composer), the transcript (416). The foot hugs its content, so the composer keeps its place
   in every state; the plate above gives and takes the room. Every colour is a token (theme.css),
   every control the kit (components.css); this file is the page's layout and its state hooks:

     #session-main[data-notes]           absent · 'open' · 'closed'   the notes column
     #session-main[data-transcript]      'open' · 'closed'            the transcript column (js/mobile-session.js)
     #session-main[data-transcript-off]  the instructor turned the transcript off: no column, the foot over the picture
     #session-main[data-voice]           'true' on a voice-only session: the stage is a strip, the transcript takes the rest
     #session-view[data-run]             idle · running · paused · stopped   (also on #stage)
     #stage[data-phase]                  idle · listening · thinking · speaking (the engine's phase)
     #status-chip[data-kind], #persona-chip[data-phase], #session-timer[data-level]

   The phone is the later pass: everything here is the desktop; session-mobile.css keys on
   [data-layout='mobile'] and loads after this file. The renderer stack's z-order inside #stage is
   the contract of App Bible §19.8 (cover 2 · connecting 3 · docks 4 · briefing 5).
   ============================================================================================ */

/* -- the frame -------------------------------------------------------------------------------- */

.st-root {
  position: relative;
  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: 16px;
  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;
  overflow: hidden;
  text-overflow: ellipsis;
}
.st-bar__sub {
  font: var(--text-body-sm);
  color: var(--color-ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.st-bar__sub:empty { display: none; }

.st-bar__readouts { margin-left: auto; display: flex; align-items: center; gap: 12px; flex: none; }
.st-turns { font: var(--text-body-sm); color: var(--color-ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.st-turns:empty { display: none; }

/* status: the glyph follows the kind (disc for the live words and Ready, two bars Paused, a dash Ended); 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,
#status-chip[data-kind='ended'] .st-glyph__dot { display: none; }
#status-chip[data-kind='paused'] .st-glyph__pause { display: block; }
#status-chip[data-kind='ended'] .st-glyph__end { 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='ended'] { color: var(--color-ink-2); }
#status-chip[data-kind='reconnecting'] { color: var(--color-danger); }

/* REC while the instructor has paused the room: still shown, in the paused look, the word beside it */
.tt-rec.is-paused { color: var(--color-ink-3); }
.tt-rec.is-paused .tt-rec__dot { background: var(--color-ink-3); }
.st-rec__paused { font: var(--text-note); letter-spacing: var(--tracking-note); text-transform: none; color: var(--color-ink-3); }

/* the countdown: clock while running, the pause glyph 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; }

.st-bar__controls { display: flex; align-items: center; gap: 8px; flex: none; }
.st-bar__controls:not(:has(> :not([hidden]))) ~ .st-bar__sep--tools { display: none; }

/* panel toggles: the open / current 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 (4px outside) ends at the frame's edge instead of being clipped; the bar hangs 4px
   below the tool to stay flush with the rule at y 56 */
.st-bar__tools { display: flex; align-items: center; gap: 4px; flex: none; align-self: stretch; }
.st-tool-home { display: contents; }
/* the briefing head's eyebrow row and the sheet's phone-only parts: hooks for css/session-mobile.css, nothing on a desktop */
.st-briefing__eyebrow-row { display: contents; }
.st-sheet__slot, .st-sheet__inputs { display: contents; }
.st-where--phone { display: none; }
.st-tool { position: relative; height: 48px; border-radius: 0; }
.st-tool__icon, .st-tool__chev { display: flex; color: inherit; }
.st-tool__chev { display: none; }
.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 room banner strip under the bar: the kit's ruled banner on navy, title and text on one line -------------------- */

.st-room { flex: none; padding: 0 24px; }
.st-room .tt-banner { padding: 9px 0; }
.st-room .tt-banner__body { flex-direction: row; align-items: baseline; gap: 8px; }

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

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

/* column heads (notes, transcript): 56px, the title over its meta, the control at the right */
.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-on-navy);
}
.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-3); }
.sheet__grip, .sheet__spacer { display: none; }
.sheet__actions:empty { display: none; }
.st-transcript .sheet__close-label { display: inline; }
/* the end screen heads the column: the inert column head (Hide would change nothing) is not drawn */
.st-root[data-run='stopped'] .st-transcript .st-col-head { display: none; }

/* -- the notes column ------------------------------------------------------------------------------------------------- */

.st-notes { display: none; width: 288px; flex: none; flex-direction: column; border-right: var(--rule-on-navy); min-height: 0; }
#session-main[data-notes='open'] .st-notes { display: flex; }
.st-notes__list { display: flex; flex-direction: column; padding: 4px 24px 24px; overflow-y: auto; min-height: 0; }
.st-note { display: flex; flex-direction: column; gap: 6px; padding: 16px 0; border-top: var(--rule-on-navy); }
.st-note:first-child { border-top: 0; }
.st-note__title { font: var(--text-button); color: var(--color-ink); }
.st-note__body { font: var(--text-body); color: var(--color-ink-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.st-notes__scrim { display: none; }

/* -- the stage column: the plate, then the foot ------------------------------------------------------------------------ */

.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 */
.st-video {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  background: var(--color-surface-raised);
}

/* a full-stage layer (the connecting screen, the briefing) */
.st-layer { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }

/* fades (js/student.js `fadeLayer`: data-shown drives the opacity, hidden follows once the fade is over) */
#stage-loading, #stage-brief { transition: opacity 0.45s ease; }
#stage-loading[data-shown='false'], #stage-brief[data-shown='false'] { opacity: 0; }
#stage-loading[hidden], #stage-brief[hidden] { display: none; }

/* the connecting screen: its own opaque ground (the stage behind it is black or, for a moment, a green wall), over the cover
   (z 2) and under the docks (z 4) */
#stage-loading { z-index: 3; flex-direction: column; gap: 8px; text-align: center; padding: 0 24px; background: var(--color-surface-raised); pointer-events: none; }
.st-stage-note__icon { display: flex; color: var(--color-ink-2); }
.st-stage-note__icon--danger { 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[data-state='connecting'] .st-stage-note__icon,
#stage-loading:not([data-state='connecting']) .st-ring { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .st-ring { animation: st-spin 0.9s linear infinite; }
  @keyframes st-spin { to { transform: rotate(360deg); } }
}

/* the room ended by the instructor: the plate dims under the notice, which carries the one exit */
.st-ended-note { z-index: 4; flex-direction: column; gap: 8px; text-align: center; padding: 0 24px; display: none; }
.st-ended-note .tt-btn { margin-top: 12px; }
.st-root[data-room='ended'] #stage:not([data-briefing='true']):not([data-voice='true']) .st-ended-note { display: flex; }
.st-root[data-room='ended'] #stage .st-paused-note,
.st-root[data-room='ended'] #stage .st-avatar-note { display: none; }
/* no persona chip before the join has answered (nothing is on the plate yet) */
.st-root:not([data-joined]) .st-chip { display: none; }

/* the paused notices on the released plate: the student's pause, and the room paused by the instructor */
.st-paused-note { z-index: 3; flex-direction: column; gap: 8px; text-align: center; padding: 0 24px; display: none; pointer-events: none; }
#stage[data-run='paused'] .st-paused-note--run,
.st-root[data-room='paused'] #stage:not([data-briefing='true']) .st-paused-note--room { display: flex; }
.st-root[data-room='paused'] #stage .st-paused-note--run { display: none; }
#stage[data-voice='true'] .st-paused-note { display: none; }
/* the renderer's note shows only when it reports a failure (data-tone="error"); its routine words are chrome */
.st-avatar-note:not([data-tone='error']) { display: none; }

/* the stage dims once the run has stopped, or the instructor has ended the room */
.st-video__dim { position: absolute; inset: 0; z-index: 3; background: var(--color-captions-scrim); display: none; pointer-events: none; }
#stage[data-run='stopped'] .st-video__dim,
.st-root[data-room='ended'] .st-video__dim { display: block; }

/* 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);
  font: var(--text-kicker);
  white-space: nowrap;
  pointer-events: none;
}
.st-chip__pip { display: flex; color: var(--color-ink-2); }
#persona-chip[data-phase='speaking'] .st-chip__pip { color: var(--color-live); }
#persona-chip[data-phase='offline'] .st-chip__pip { color: var(--color-danger); }
/* the chip drops below a pill docked in the same corner */
#session-main[data-notes='closed'] .st-chip { top: 58px; }
#stage[data-briefing='true'] .st-chip,
#stage[data-voice='true'] .st-chip { display: none; }

/* the two pill hosts (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--left { left: 16px; }
.st-dock--right { right: 16px; }
.st-dock__slot { pointer-events: auto; }
.st-dock__slot:empty { display: none; }
#stage[data-briefing='true'] .st-dock--left { display: none; }
/* the pills: the Notes tool and the phone's Transcript button, restyled by their host */
.st-dock .st-tool,
.st-dock .mtranscript {
  display: inline-flex;
  flex-direction: row;   /* the narrow window's icon-over-word rule for the bar's tools must not reach the pill */
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--color-edge);
  border-radius: var(--radius-control);
  background: var(--color-captions-scrim);
  color: var(--color-ink);
  font: var(--text-button-sm);
  cursor: pointer;
  position: static;
  width: auto;
  box-shadow: none;
}
.st-dock .st-tool:hover, .st-dock .mtranscript:hover { border-color: var(--color-edge-strong); }
/* the pills' `box-shadow: none` above outweighs the kit's ring (same specificity, later sheet): the ring is drawn here */
.st-dock .st-tool:focus-visible, .st-dock .mtranscript:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--color-ground), 0 0 0 4px var(--color-focus); }
.st-dock .st-tool .st-tool__icon, .st-dock .st-tool .st-tool__bar { display: none; }
.st-dock .st-tool .st-tool__chev { display: flex; order: 2; }
.st-dock .mtranscript__chev { width: 16px; height: 16px; transform: rotate(-90deg); }
.mtranscript__key { display: none; }   /* the pill's keyboard glyph is the phone's, for a session with the transcript off (session-mobile.css) */
.st-dock .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;
  position: static;
  transform: none;
}
.st-dock .mtranscript__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 renderer's diagnostic note (Loading avatar…, Reconnecting…): a quiet line at the plate's foot, hidden while the run is live
   and whenever the briefing or the voice view has the plate */
.st-avatar-note {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  max-width: calc(100% - 48px);
  padding: 6px 12px;
  border-radius: var(--radius-control);
  background: var(--color-captions-scrim);
  color: var(--color-ink-2);
  font: var(--text-note);
  letter-spacing: var(--tracking-note);
  text-align: center;
  pointer-events: none;
}
.st-avatar-note:empty,
#stage[data-run='running'] .st-avatar-note,
#stage[data-briefing='true'] .st-avatar-note,
#stage[data-voice='true'] .st-avatar-note,
#stage[data-run='stopped'] .st-avatar-note { display: none; }
.mspeaker { display: none; }

/* -- the briefing: the stage's idle state -------------------------------------------------------------------------------- */

/* the layer is the stage's own ground (navy), opaque, over everything drawn on the plate; the card scopes its own palette */
#stage-brief { z-index: 5; padding: 8px 24px 4px 16px; background: var(--color-field-navy); overflow: auto; }
#stage-brief .tt-briefing { max-width: 100%; }
#welcome-panel:focus { outline: none; }
#welcome-panel:focus-visible { box-shadow: 0 0 0 2px var(--color-field-navy), 0 0 0 4px var(--color-focus-on-navy); }
.tt-briefing__facts:empty { display: none; }
.tt-briefing__steps .tt-briefing__step { align-items: start; }
.tt-briefing__step .st-icon { color: var(--color-ink-2); margin-top: 1px; }
.st-briefing__about { display: flex; flex-direction: column; gap: 8px; }
.st-briefing__about p { margin: 0; }
.st-briefing__notice { font: var(--text-body-sm); color: var(--color-ink-2); }
.tt-briefing__note:empty { display: none; }
/* a card with nothing for the side column: one column, the foot's note beside the button */
.tt-briefing--wide.st-briefing--solo { grid-template-columns: 1fr; }
.tt-briefing--wide.st-briefing--solo .tt-briefing__main { padding-right: 0; }
.tt-briefing--wide.st-briefing--solo .tt-briefing__foot { grid-template-columns: 1fr 1fr; }
/* a short stage (a room banner above the card) hides the lede, as the design does */
.st-root[data-room]:not([data-room='live']) .tt-briefing__lede { display: none; }

/* -- the foot: microphone banner · Try saying · composer · composer foot ----------------------------------------------- */

.st-foot { flex: none; display: flex; flex-direction: column; gap: 14px; padding: 20px 24px 22px; }
.st-foot > [hidden], .st-inputs-slot:empty { display: none; }
#stage-inputs[hidden] { display: none; }
.st-banners .tt-banner { padding: 10px 0; }
.st-banners .tt-banner__action { align-self: center; flex: none; }
.st-banners .tt-banner__action:not(:has(> :not([hidden]))) { display: none; }
.st-suggest__head { display: flex; align-items: baseline; gap: 10px; }
.st-suggest__meta { font: var(--text-body-sm); color: var(--color-ink-2); }
.st-foot .tt-suggest__row { gap: 8px; flex-wrap: nowrap; overflow-x: auto; }
.st-foot .tt-suggest__text { white-space: nowrap; }
.tt-suggest__hear .st-hear-word { display: block; }
.tt-suggest__hear .st-hear-word--playing { display: none; }
.tt-suggest__chip.is-playing .st-hear-word { display: none; }
.tt-suggest__chip.is-playing .st-hear-word--playing { display: block; }
.tt-suggest__chip:disabled { opacity: 0.55; pointer-events: none; }

/* the composer: mic · message · Send · Interrupt, all 44 */
.st-mic-host { display: contents; }
.st-mic__icon { display: flex; }
.st-mic__icon--off { display: none; }
.tt-mic:disabled, .tt-mic.st-mic--blocked { pointer-events: auto; cursor: default; }
.tt-mic:disabled { 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, .tt-mic.st-mic--blocked .st-mic__icon--on { display: none; }
.tt-mic:disabled .st-mic__icon--off, .tt-mic.st-mic--blocked .st-mic__icon--off { display: flex; }
.tt-mic:disabled .tt-mic__level { display: none; }
/* the mic the browser blocked: an outline in the warning colour (the banner's) with the slashed glyph, still pressable */
.tt-mic.st-mic--blocked:not(:disabled) { background: transparent; border-color: var(--color-warning); color: var(--color-warning); }
/* 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; }
.st-time-warn { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; max-width: 320px; font: var(--text-body-sm); color: var(--color-ink-2); }
.st-time-warn__word { display: inline-flex; align-items: center; gap: 6px; font: var(--text-kicker); color: var(--color-warning); }
.st-time-warn--urgent .st-time-warn__word { color: var(--color-danger); }
.st-state-line { max-width: 320px; font: var(--text-body-sm); color: var(--color-ink-2); }
/* an ended run: one line at the live foot's height, no live switch under dead controls */
.st-root[data-run='stopped'] .st-composer-foot .tt-switch,
.st-root[data-room='ended'] .st-composer-foot .tt-switch { display: none; }
.st-root[data-run='stopped'] .st-composer-foot { min-height: 58px; }

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

.st-transcript { width: 416px; flex: none; display: flex; flex-direction: column; min-height: 0; position: relative; }
.st-transcript .st-col-head { border-bottom: var(--rule-strong); }
.st-transcript .st-col-meta { color: var(--color-ink-2); }
.st-log { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-start; padding: 0 24px 20px; overflow-y: auto; overscroll-behavior: contain; }
.st-log[hidden] { display: none; }
/* the newest turn at the foot when the log is shorter than the column */
.st-log > :first-child { margin-top: auto; }
.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__tools { margin-left: -10px; }
.st-transcript .tt-turn.is-blocked .tt-turn__tools { margin-left: 0; }
.st-transcript .tt-turn__line { overflow-wrap: anywhere; }
.st-transcript .tt-turn__line--typing { display: block; }
.st-transcript .tt-turn__line--typing .tt-caret { display: inline-block; vertical-align: -2px; margin-left: 2px; }
.tt-turn__line .tt-turn__gloss { display: block; margin-top: 4px; }
.st-thinking { color: var(--color-info); }
/* "Hear this again": js/transcript-replay.js's button (its legacy rules live in session.css for the studio), redrawn here as the
   kit's quiet compact button; Playing tinted; loading dimmed */
.st-transcript .bubble__replay {
  position: static;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  height: var(--size-control-compact);
  margin: 0;
  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);
  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; }
/* no replay once the run is stopped: the server refuses it then (hidden, never disabled) */
.st-root[data-run='stopped'] .tt-turn__tools { display: none; }
/* the empty column: what to do, and the records notice under it */
.st-empty { display: flex; flex-direction: column; gap: 20px; padding: 20px 24px; }
.st-empty .tt-empty { padding: 0; }
.st-records { display: flex; flex-direction: column; gap: 8px; font: var(--text-body-sm); color: var(--color-ink); }
.st-records p { margin: 0; }
.st-log > .st-empty { margin: 0 -24px; }

/* -- the end screen heads the column; the transcript is a ruled sub-region under it ----------------------------------- */

.st-endgroup { display: flex; flex-direction: column; min-height: 0; flex: none; border-bottom: var(--rule-strong); }
.st-endgroup[hidden] { display: none; }
.st-endgroup.is-open { flex: 1; }
.st-end { display: flex; flex-direction: column; gap: 8px; padding: 18px 24px 0; }
.st-end__title { font: var(--text-title-md); letter-spacing: var(--tracking-title-md); color: var(--color-ink); }
.st-end__text { font: var(--text-body); color: var(--color-ink-2); }
.st-end__text:empty, .st-end__text[hidden] { display: none; }
.st-insights { display: flex; flex-direction: column; gap: 10px; min-height: 0; padding: 14px 24px 0; }
.st-insights[hidden] { display: none; }
.st-insights.is-open { flex: 1; }
.st-insights__box { position: relative; display: flex; min-height: 0; }
.st-insights__clip { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.st-insights.is-open .st-insights__clip { overflow-y: auto; overscroll-behavior: contain; }
.st-insights__scroll { display: flex; flex-direction: column; gap: 16px; }
.st-insights__note { font: var(--text-reading); letter-spacing: var(--tracking-reading); color: var(--color-ink); white-space: pre-wrap; }
.st-insights__note:empty, .st-insights__note[hidden] { display: none; }
.st-insights__sections { display: flex; flex-direction: column; gap: 16px; }
.st-insights__sections[hidden] { display: none; }
.st-insights__section { display: flex; flex-direction: column; gap: 8px; }
.st-insights__points { display: flex; flex-direction: column; }
.st-insights .tt-insight { gap: 4px; padding: 10px 0 11px; }
.st-insights .tt-insight:first-child { padding-top: 0; }
.st-insights .tt-insight__detail { font: var(--text-body); color: var(--color-ink); }
.st-steps { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.st-step { display: flex; align-items: flex-start; gap: 10px; font: var(--text-body); color: var(--color-ink); }
.st-step__dot { display: block; width: 4px; height: 4px; flex: none; margin-top: 8px; background: var(--color-ink); }
.st-topics { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.st-topic { display: flex; align-items: center; gap: 10px; min-height: 22px; font: var(--text-body); color: var(--color-ink); }
.st-topic__check { display: flex; width: 16px; justify-content: center; color: var(--color-success); }
.st-topic__dot { display: flex; width: 16px; justify-content: center; }
.st-topic__dot span { display: block; width: 4px; height: 4px; background: var(--color-ink); }
.st-insights__foot { display: flex; flex-direction: column; gap: 4px; padding-top: 10px; border-top: var(--rule-hair); }
.st-insights__keep { font: var(--text-body); color: var(--color-ink); }
.st-insights__credit { font: var(--text-body-sm); color: var(--color-ink-2); }
.st-insights__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0 14px; }
.st-insights__row[hidden] { display: none; }
.st-insights__row .tt-link--action { min-height: 36px; border: 0; background: transparent; padding: 0; }
.st-toggle__down, .st-toggle__up { display: flex; }
.st-toggle__up { display: none; }
#gate-insights-toggle[aria-expanded='true'] .st-toggle__down { display: none; }
#gate-insights-toggle[aria-expanded='true'] .st-toggle__up { display: flex; }
.st-gate { display: flex; align-items: center; gap: 12px; padding: 12px 24px 16px; border-top: var(--rule-hair); }
.st-gate--primary { border-top: 0; padding-top: 8px; }
.st-gate--primary .tt-btn { flex: 1; }
.st-gate__hint { font: var(--text-body-sm); color: var(--color-ink-2); }
.st-gate__hint:empty { display: none; }
.st-tx__head { flex: none; padding: 14px 24px 8px; }
.st-tx__head[hidden] { display: none; }
.st-root[data-run='stopped'] .st-log .tt-turn:first-child { border-top: var(--rule-hair); }

/* -- 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; }
/* both columns away: the foot is capped at 760 and centred */
#session-main[data-transcript='closed'] .st-foot,
#session-main[data-transcript-off] .st-foot { align-items: center; }
#session-main[data-transcript='closed'] .st-foot > *,
#session-main[data-transcript-off] .st-foot > * { width: 100%; max-width: 760px; }

/* -- the transcript off: no column; the foot is a translucent inputs bar over the bottom of the picture --------------- */

#session-main[data-transcript-off] .st-transcript { display: none; }
#session-main[data-transcript-off] .st-stage { position: relative; }
#session-main[data-transcript-off] .st-foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 auto;
  width: 760px;
  max-width: 100%;
  padding: 16px 20px 18px;
  background: var(--color-captions-scrim);
  z-index: 4;
}
#session-main[data-transcript-off] .st-captions { bottom: 271px; }
#session-main[data-transcript-off] .st-stage:has(#mic-banner:not([hidden])) .st-captions { bottom: 344px; }
#session-main[data-transcript-off] #stage[data-briefing='true'] ~ .st-foot,
#session-main[data-transcript-off] #stage[data-run='stopped'] ~ .st-foot { display: none; }
/* the readout that explains the missing column, where the Transcript pill would dock */
.st-readout-off {
  position: absolute;
  z-index: 2;
  top: 16px;
  right: 16px;
  display: none;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 14px 0 12px;
  border-radius: var(--radius-control);
  background: var(--color-captions-scrim);
  color: var(--color-ink-3);
}
#session-main[data-transcript-off] #stage:not([data-briefing='true']) .st-readout-off { display: flex; }
.st-readout-off__text { display: flex; flex-direction: column; gap: 1px; }
.st-readout-off__word { font: var(--text-kicker); color: var(--color-ink-2); white-space: nowrap; }
.st-readout-off__why { font: var(--text-note); letter-spacing: var(--tracking-note); color: var(--color-ink-3); white-space: nowrap; }
/* the end screen with the transcript off: the panel is a 460 card (the dialog's construction) centred over the picture, never
   over the notes; js/mobile-session.js sets data-mode="gate" on the panel while the end screen shows */
#session-main[data-transcript-off] .st-transcript[data-mode='gate'] {
  display: flex;
  position: absolute;
  inset: 57px 0 0 0;
  width: auto;
  align-items: center;
  justify-content: center;
  background: transparent;
  pointer-events: none;
  z-index: 6;
  opacity: 1;
  visibility: visible;
  overflow: visible;
}
#session-main[data-transcript-off][data-notes='open'] .st-transcript[data-mode='gate'] { left: 288px; }
#session-main[data-transcript-off] .st-transcript[data-mode='gate'] .st-col-head,
#session-main[data-transcript-off] .st-transcript[data-mode='gate'] .st-log,
#session-main[data-transcript-off] .st-transcript[data-mode='gate'] .st-tx__head { display: none; }
#session-main[data-transcript-off] .st-transcript[data-mode='gate'] .st-endgroup {
  width: 460px;
  max-height: 100%;
  overflow: auto;
  pointer-events: auto;
  border: 1px solid var(--color-edge-strong);
  border-radius: var(--radius-overlay);
  background: var(--color-ground);
  box-shadow: var(--shadow-overlay);
}

/* -- voice only: the stage is a 524px strip beside the transcript, which takes the rest ------------------------------- */

#session-main[data-voice='true'] .st-left { flex: none; }
#session-main[data-voice='true'] .st-stage { flex: none; width: 524px; }
#session-main[data-voice='true'] .st-transcript { flex: 1; width: auto; }
#session-main[data-voice='true']:not([data-transcript-off]) .st-composer-foot { flex-direction: column; align-items: stretch; gap: 10px; }
#session-main[data-voice='true'] .st-composer-foot .tt-switch,
#session-main[data-voice='true'] .st-composer-foot .tt-mic-hint,
#session-main[data-voice='true'] .st-composer-foot .st-state-line { max-width: none; }
#session-main[data-voice='true'] .st-foot .tt-suggest__row { flex-wrap: wrap; }
/* the orb plate: the avatar's orb (a raised core with the voice mark; rings only while something is live), the name, the
   phase word and the no-video line */
.st-orb-plate {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  background: var(--color-field-navy);
}
.st-orb-plate[hidden] { display: none; }
.st-orb { position: relative; width: 240px; height: 240px; display: flex; align-items: center; justify-content: center; margin-bottom: 22px; }
.st-orb__rings { position: absolute; left: 0; top: 0; display: none; color: var(--color-live); }
.st-orb__rings--thinking { color: var(--color-ink-2); }
#stage[data-phase='speaking'] .st-orb__rings--speaking,
#stage[data-phase='listening'] .st-orb__rings--listening,
#stage[data-phase='thinking'] .st-orb__rings--thinking { display: block; }
.st-orb__core { position: relative; display: flex; align-items: center; justify-content: center; width: 124px; height: 124px; border-radius: 50%; background: var(--color-surface-raised); color: var(--color-ink); }
#stage[data-phase='listening'] .st-orb__core,
#stage[data-phase='idle'] .st-orb__core { color: var(--color-ink-2); }
@media (prefers-reduced-motion: no-preference) {
  #stage[data-phase='speaking'] .st-orb__rings--speaking { animation: st-ripple 2.4s ease-in-out infinite; transform-origin: 50% 50%; }
  @keyframes st-ripple { 50% { transform: scale(1.03); opacity: 0.8; } }
}
.st-orb-name { font: var(--text-title-md); letter-spacing: var(--tracking-title-md); color: var(--color-ink); }
.st-orb-status { margin-top: 8px; }
#voice-status[data-kind='ready'] { color: var(--color-success); }
#voice-status[data-kind='listening'], #voice-status[data-kind='speaking'] { color: var(--color-live-text); }
#voice-status[data-kind='thinking'] { color: var(--color-info); }
#voice-status[data-kind='reconnecting'] { color: var(--color-danger); }
#voice-status[data-kind='paused'], #voice-status[data-kind='ended'] { color: var(--color-ink-2); }
.st-orb-hint { margin-top: 14px; font: var(--text-body-sm); color: var(--color-ink-3); }
.st-orb-fallback { display: flex; align-items: center; gap: 6px; margin-top: 10px; font: var(--text-note); letter-spacing: var(--tracking-note); color: var(--color-ink-3); }
.st-orb-fallback[hidden] { display: none; }
#stage[data-voice='true'] .stage__canvas { display: none; }

/* -- the narrow window (under 1,180px): no notes column; the Notes tool opens a 340px panel over the picture's left side ---
   -- non-modal, no scrim: the composer and the transcript stay live. The bar keeps every readout and tool by taking the
   monogram, 12px gaps, no subtitle and the tools as an icon over a word */
@media (max-width: 1179px) {
  .st-bar { gap: 12px; }
  .st-bar .tt-logo { display: none; }
  .st-mono { display: flex; }
  .st-bar__sub { display: none; }
  .st-tool { flex-direction: column; justify-content: center; gap: 3px; width: 56px; padding: 0; font: var(--text-micro); letter-spacing: var(--tracking-micro); }
  .st-tool .st-tool__icon svg { width: 20px; height: 20px; }
  #session-main[data-notes='open'] .st-notes {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 340px;
    z-index: 6;
    background: var(--color-field-navy);
    border-right: 1px solid var(--color-edge);
    box-shadow: var(--shadow-overlay);
  }
  #session-main[data-notes='open'] .st-chip { left: 356px; }
  #session-main[data-notes='open'] .st-captions { left: 364px; }
  #session-main[data-notes='open'] .st-dock--left { display: none; }
  /* the foot paints over the panel's lower edge, so the panel ends where the foot begins and the composer stays whole */
  .st-foot { position: relative; z-index: 7; background: var(--color-field-navy); }
  #session-main[data-transcript-off] .st-foot { background: var(--color-captions-scrim); }
  #session-main[data-voice='true'] .st-stage { width: 420px; }
  .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; }
}

/* -- toasts during a session: over the stage's top-right, 16px in from the transcript column (the placement
   design/pages/embed/live-mic-refused-toast draws), never the window's bottom-right, where a 400px toast sat on the
   column's newest turn and its "Hear this again" (QA 2026-10-24). With the column away, or the transcript off, the
   corner holds the docked pill / the Transcript-off readout, so the toasts drop under it; a voice-only session has a
   524px orb strip, so they sit at its left under the Notes pill. The phone's rule (session-mobile.css) wins there. */
body:has(.st-root: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(#session-main[data-transcript-off]) .toasts { top: 125px; right: 16px; }
body:has(#session-main[data-voice='true']) .toasts { top: 113px; right: auto; left: 16px; }
body:has(#session-main[data-voice='true'][data-notes='open']) .toasts { left: 304px; }
@media (max-width: 1179px) {
  body:has(#session-main[data-voice='true'][data-notes='open']) .toasts { left: 356px; }
}

/* -- dialogs on this page (Stop this session?, Leave the session?): the kit dialog over the kit scrim; built by js/student.js */

.st-overlay { position: fixed; inset: 0; z-index: 300; display: flex; justify-content: center; align-items: flex-start; padding-top: 232px; }
.st-overlay .tt-dialog { max-width: calc(100% - 32px); }
.st-dialog-alt { display: flex; align-items: center; gap: 14px; padding: 12px 0 2px; border-top: var(--rule-hair); }
.st-dialog-alt .tt-btn { flex: none; }
.st-dialog-alt__text { font: var(--text-body-sm); color: var(--color-ink-2); }

/* -- the session brief (the Briefing tool's dialog): the kit dialog's construction on the legacy modal shell ---------- */

#brief-modal .modal__panel { width: min(560px, 100%); border-radius: var(--radius-overlay); border: 1px solid var(--color-edge-strong); background: var(--color-ground); box-shadow: var(--shadow-overlay); backdrop-filter: none; }
#brief-modal .modal__head { padding: 20px 20px 0 24px; border-bottom: 0; background: transparent; }
#brief-modal .card__title { font: var(--text-title-md); letter-spacing: var(--tracking-title-md); color: var(--color-ink); }
#brief-modal .modal__body { padding: 10px 24px 24px; gap: 16px; }
.st-brief__section { display: flex; flex-direction: column; gap: 8px; }
.st-brief__text { font: var(--text-reading); letter-spacing: var(--tracking-reading); color: var(--color-ink); white-space: pre-wrap; }
.st-brief__list { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; font: var(--text-body); color: var(--color-ink); }
.st-brief__list li { display: flex; align-items: flex-start; gap: 10px; }
.st-brief__list li b { font-weight: 600; }

/* -- reduced motion: the stage keeps its states and drops the movement --------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  #stage-loading, #stage-brief, #session-main[data-transcript] .st-transcript { transition: none; }
}