/*
 * Instructor dashboard.
 *
 * Layered on theme.css, which owns every token and every generic control. This
 * file owns three things and nothing else:
 *
 *   1. the dashboard shell (header, views, the editor's rail + panel split);
 *   2. the composites the dashboard needs and nowhere else does — session cards,
 *      the rail, checklists, meters, download cards;
 *   3. the small pieces that used to be inline `style` objects in instructor.js.
 *      A dense authoring form only reads as designed if its spacing comes from
 *      one scale, and inline styles are how a scale quietly stops being one.
 */

/* -- shell ---------------------------------------------------------------- */

/*
 * The instructor app frame, on the kit (design/system/SYSTEM.md §7.1-7.2;
 * design/pages/sessions and design/pages/dashboard carry the masthead). The
 * masthead itself is `.tt-masthead` from components.css -- 56px navy, full
 * bleed, carrying the on-navy remap -- so this block only places the frame's
 * own pieces: the two-row phone masthead, the phone menu sheet, and the
 * buttons that stand in for the kit's anchors (Sign out, the person).
 *
 * `.dash` is the viewport-high frame and `.dash__main` its one scrollport. Both
 * names are a contract: the editor finds its scroller by `.dash__main`
 * (panelScroller() in js/instructor.js) and the Sessions group heads stick to
 * its top edge. `--dash-column` stays for the views not yet re-templated
 * (Knowledge, Account), which cap and centre themselves on it.
 */
.dash {
  --dash-column: 1240px;

  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.dash__main {
  position: relative;
  overflow-y: auto;
  min-width: 0;
  flex: 1 1 auto;
}

.dash-masthead {
  position: relative;
  z-index: 20;
  flex: none;
}

/* Sign out and the person are buttons (they act on this page), drawn as the
   kit's masthead link and person block. */
.dash-masthead button.tt-masthead__link,
.dash-masthead button.tt-person {
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.dash-masthead button.tt-masthead__link {
  font: var(--text-ui);
  color: var(--color-ink-2);
}

.dash-masthead button.tt-masthead__link:hover {
  color: var(--color-ink);
}

.dash-masthead button.tt-person {
  text-align: left;
}

.dash-masthead .tt-person:hover .tt-person__name {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* The focus ring the kit draws on its nav items, for the masthead's other
   controls: inset, so nothing clips it against the band's edges. */
.dash-masthead .tt-masthead__link:focus-visible,
.dash-masthead .tt-person:focus-visible,
.dash-masthead .tt-icon-btn:focus-visible,
.dash-masthead .tt-logo:focus-visible {
  outline: 0;
  box-shadow: inset 0 0 0 2px var(--color-focus);
  border-radius: var(--radius-control);
}

.dash-masthead__menu {
  display: none;
}

/* The kit's `:where(svg) { display: block }` would otherwise outrank the UA's
   `[hidden]`; the Menu control swaps its two glyphs by that attribute. */
.dash-masthead__menu svg[hidden] {
  display: none;
}

/* The phone menu sheet (SYSTEM.md §7.2): Account, Studio and Join session,
   hanging from the masthead's first row over a scrim. */
.dash-menu {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: transparent;
}

/* an action link drawn as a button (it acts on this page) */
.sx-page button.tt-link,
.modal--kit button.tt-link {
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.dash-menu__scrim {
  position: absolute;
  inset: 0;
  background: var(--color-scrim);
}

.dash-menu__sheet {
  position: absolute;
  top: 60px;
  right: 16px;
  width: 280px;
}

.dash-menu .tt-menu__item {
  width: 100%;
  min-height: var(--size-control-phone);
  border: 0;
  background: transparent;
  text-align: left;
}

.dash-menu .tt-menu__item:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 2px var(--color-ground), 0 0 0 4px var(--color-focus);
}

/*
 * The 390 masthead: row one is the wordmark, Sign out and
 * Menu (every target 44px); row two is the five views as a strip under a rule
 * on navy. Studio, Join session and the person move into the menu sheet.
 */
[data-layout='mobile'] .dash-masthead {
  height: auto;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0;
  padding: 0;
}

[data-layout='mobile'] .dash-masthead__logo {
  order: 0;
  align-self: center;
  margin-left: 16px;
  padding: 9px 0 8px;
}

[data-layout='mobile'] .dash-masthead__util {
  order: 1;
  height: var(--size-masthead);
  margin-left: auto;
  gap: var(--space-1);
  padding-right: 12px;
}

[data-layout='mobile'] .dash-masthead__wide {
  display: none;
}

[data-layout='mobile'] .dash-masthead__menu {
  display: inline-flex;
}

[data-layout='mobile'] .dash-masthead button.tt-masthead__link {
  height: var(--size-control-phone);
  padding: 0 10px;
}

[data-layout='mobile'] .dash-masthead__nav {
  order: 2;
  flex: 1 1 100%;
  height: var(--size-control-phone);
  justify-content: space-between;
  gap: var(--space-2);
  padding: 0 12px;
  border-top: var(--rule-on-navy);
}

[data-layout='mobile'] .dash-masthead__nav .tt-nav__item {
  flex: 0 1 auto;
  height: var(--size-control-phone);
  padding: 0 2px;
  font: var(--text-ui-sm);
  letter-spacing: var(--tracking-ui-sm);
}

[data-layout='mobile'] .dash-masthead__nav .tt-nav__item.is-current {
  font: var(--text-kicker);
  letter-spacing: var(--tracking-kicker);
}

/* -- sessions ------------------------------------------------------------- */

/*
 * The Sessions view, redesigned 2026-10-24 on the owner's instruction after
 * testing the register ("so hard to read … way too crowded … each session
 * should be a card"; DECISIONS §16): ONE centred column, `--sx-column` (920px,
 * the Dashboard's) inside the frame's gutters -- the title row, the status
 * tabs with counts beside the search field, then every session as a CARD,
 * stacked one per row under the status headings (the kit's section head: a
 * strong rule, the status word and its glyph as the title, one line saying what
 * the status means, the count at the right), 64px between groups and 16px
 * between cards. A card is a white surface with a 1px control edge (the live
 * card's top edge is the deep-teal bar the Dashboard's Live now panel carries):
 * the status word and the title, the persona line, four labelled facts -- the
 * join code as the kit's readout cells on the sessions students can join --
 * and the card's actions at the top right. The parts are the kit's
 * (`.tt-section-head`, `.tt-tabs`, `.tt-field`, `.tt-status`, `.tt-code`,
 * `.tt-btn`, `.tt-icon-btn`, `.tt-empty`, `.tt-banner`); these rules place
 * them. Painted by paintSessions() in js/instructor.js. Token-only; the phone
 * is the `[data-layout='mobile']` block at the end.
 *
 * `.sx-page`, `.sx-title-row`, `.sx-title`, `.sx-hint`, `.sx-actions`, the
 * empty block (`.sx-empty`, `.sx-ways`, `.sx-way*`, `.sx-empty-foot`), the
 * loading and error lines, `.sx-row-link`, `.sx-vh` and `.sx-ico` are shared
 * with the Knowledge view (`.kv-page`); the column layout is scoped to
 * `.sx-stack`, which only the Sessions view carries.
 */
.sx-page {
  display: flex;
  flex-direction: column;
  padding: 0 var(--layout-gutter) 64px;
}

.sx-page[hidden] {
  display: none;
}

/* title row: title + hint at the left, the screen's actions at the right, bottom-aligned */
.sx-title-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding-top: 36px;
}

.sx-title {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.sx-title h1 {
  margin: 0;
  font: var(--text-title-lg);
  letter-spacing: var(--tracking-title-lg);
  color: var(--color-ink);
}

.sx-hint {
  margin: 0;
  font: var(--text-body);
  color: var(--color-ink-2);
  max-width: 720px;
}

.sx-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  padding-bottom: 1px;
}

/* The empty state keeps the title alone: no hint, no actions, no toolbar. */
.sx-page.is-empty .sx-hint,
.sx-page.is-empty .sx-actions,
.sx-page.is-empty .sx-toolbar {
  display: none;
}

/* -- the Sessions column: 920 centred inside the gutters (the Dashboard's) -- */
.sx-stack {
  --sx-column: 920px;
  --sx-gutter: var(--layout-gutter);
  --sx-group-gap: 64px;
  --sx-card-gap: 16px;

  padding: 0 0 96px;
}

.sx-stack .sx-colw {
  width: min(calc(100% - 2 * var(--sx-gutter)), var(--sx-column));
  margin-inline: auto;
}

/* toolbar: the tabs on their hairline at the left, the search field at the right
   with its hint hanging beneath (the kit's field construction) */
.sx-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  margin-top: 32px;
}

.sx-toolbar .tt-tabs {
  flex: 1;
  min-width: 0;
}

/* While the list loads or failed there are no tabs: the hairline alone. */
.sx-toolbar__rule {
  display: block;
  flex: 1;
  height: 1px;
  margin-top: 35px;
  background: var(--color-rule);
}

.sx-toolbar .tt-tabs:has(.sx-toolbar__rule) {
  border-bottom: 0;
}

.sx-search {
  width: 360px;
  flex: none;
}

.sx-search .tt-input {
  display: block;
}

.sx-search .tt-field__hint {
  margin: 0;
}

.sx-vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* an inline glyph built by glyph() in js/instructor.js */
.sx-ico {
  display: inline-flex;
  flex: none;
  line-height: 0;
}

/* -- the list: the groups, each a section head over its cards -- */
.sx-body {
  display: flex;
  flex-direction: column;
  margin-top: 40px;
}

.sx-groups {
  display: flex;
  flex-direction: column;
  gap: var(--sx-group-gap);
}

.sx-group {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.sx-group-head {
  align-items: flex-start;
  gap: 24px;
  padding-top: 16px;
}

.sx-group-head__lead {
  flex: 1;
  min-width: 0;
}

/* the status word and its glyph set as the section's title */
.sx-group-title {
  margin: 0;
}

.sx-group-title .tt-status {
  gap: 10px;
  font: inherit;
  letter-spacing: inherit;
}

.sx-group-title .tt-status svg {
  width: 12px;
  height: 12px;
}

.sx-group-meta {
  margin-top: 6px;
  max-width: 72ch;
  font: var(--text-body);
}

.sx-group-count {
  flex: none;
  margin: 0;
  padding-top: 5px;
  font: var(--text-body);
  color: var(--color-ink-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sx-cards {
  display: flex;
  flex-direction: column;
  gap: var(--sx-card-gap);
}

/* -- a card: the lead and the actions on the first row, the facts beneath -- */
.sx-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas:
    'lead actions delete'
    'facts facts facts';
  align-items: start;
  gap: 24px 8px;
  padding: 24px 28px 28px;
  background: var(--color-ground);
  border: 1px solid var(--color-edge);
  border-radius: var(--radius-control);
  cursor: pointer;
}

.sx-card:hover {
  border-color: var(--color-edge-strong);
}

/* the live card carries the deep-teal bar the Dashboard's Live now panel has */
.sx-card[data-status='live'] {
  border-top: 3px solid var(--color-live-text);
  padding-top: 22px;
}

.sx-card__lead {
  grid-area: lead;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding-top: 2px;
}

.sx-card__title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 0;
  font: var(--text-title-md);
  letter-spacing: var(--tracking-title-md);
  color: var(--color-ink);
}

.sx-card__status {
  flex: none;
}

.sx-card__link {
  min-width: 0;
  color: inherit;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.sx-card:hover .sx-card__link,
.sx-card__link:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--color-link);
}

.sx-card__link:focus-visible {
  outline: 0;
  border-radius: var(--radius-control);
  box-shadow: 0 0 0 2px var(--color-ground), 0 0 0 4px var(--color-focus);
}

.sx-card__meta {
  margin: 0;
  font: var(--text-body);
  color: var(--color-ink-2);
}

.sx-card__actions {
  grid-area: actions;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 16px;
}

.sx-card__actions:empty {
  display: none;
}

.sx-card__delete {
  grid-area: delete;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Duplicate: quiet, labelled -- the copy glyph alone would read as Copy code */
.sx-card__duplicate {
  gap: 6px;
  color: var(--color-ink-2);
}

.sx-card__duplicate:hover {
  color: var(--color-ink);
}

.sx-card__delete .tt-icon-btn {
  color: var(--color-ink-2);
}

.sx-card__delete .tt-icon-btn:hover {
  color: var(--color-ink);
}

/* the facts: label above value, the join code's column sized to the readout cells */
.sx-card__facts {
  grid-area: facts;
  display: grid;
  grid-template-columns: 252px 112px 112px minmax(0, 1fr);
  column-gap: 40px;
  margin: 0;
}

.sx-fact {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

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

.sx-fact__value {
  display: flex;
  align-items: center;
  min-height: 32px;
  margin: 0;
  font: var(--text-figure-md);
  letter-spacing: var(--tracking-figure-md);
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}

.sx-fact__value.is-dim {
  color: var(--color-ink-3);
}

.sx-fact__now {
  color: var(--color-live-text);
}

/* a code that is not open for joining: text, at the kit's table-code size */
.sx-fact__code {
  font: var(--text-code-sm);
  letter-spacing: var(--tracking-code-sm);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* the page's foot: what is shown and what the counts mean, one line each */
.sx-notes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 48px;
  padding-top: 14px;
  border-top: var(--rule-hair);
  font: var(--text-body-sm);
  color: var(--color-ink-3);
}

.sx-notes p {
  margin: 0;
  max-width: 80ch;
}

.sx-notes b {
  font-weight: 600;
  color: var(--color-ink-2);
}

/* list states */
.sx-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 40px;
  font: var(--text-body);
  color: var(--color-ink-2);
}

.sx-stack .sx-loading {
  margin-top: 0;
}

.sx-error {
  margin-top: 32px;
}

.sx-stack .sx-error {
  margin-top: 0;
}

.sx-nomatch {
  padding-top: 8px;
}

.sx-nomatch + .sx-notes {
  margin-top: 32px;
}

/* the template picker (a kit dialog, 660 wide) */
.sx-dialog--picker {
  width: 660px;
}

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

.sx-tpl {
  display: flex;
  flex-direction: column;
  margin-top: 4px;
}

.sx-tpl__row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: 'text btn' 'meta meta';
  align-items: center;
  column-gap: 24px;
  row-gap: 6px;
  padding: 14px 0 16px;
  border-top: var(--rule-hair);
}

.sx-tpl__row:first-child {
  border-top: var(--rule-strong);
}

.sx-tpl__row .tt-btn {
  grid-area: btn;
}

.sx-tpl__text {
  grid-area: text;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.sx-tpl__title {
  font: var(--text-title-sm);
  letter-spacing: var(--tracking-title-sm);
  color: var(--color-ink);
}

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

/* The design sets this nowrap; it wraps here so a long line (the clinical
   template's grounding note) is read rather than cut. */
.sx-tpl__meta {
  grid-area: meta;
  display: block;
  font: var(--text-note);
  letter-spacing: var(--tracking-note);
  color: var(--color-ink-3);
}

.sx-tpl__meta b {
  font-weight: 600;
  color: var(--color-ink-2);
}

.sx-picker-foot {
  align-items: flex-end;
}

.sx-picker-foot__left {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-right: auto;
  min-width: 0;
}

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

/* the delete confirm's facts line */
.sx-facts {
  font: var(--text-body-sm);
  color: var(--color-ink-2);
}

/* empty state: the kit's block with the ways to start beneath it */
.sx-empty {
  max-width: 840px;
  padding: 32px 0 0;
  gap: 8px;
}

.sx-stack .sx-empty {
  padding-top: 0;
}

.sx-empty .tt-empty__text {
  max-width: 720px;
}

.sx-ways {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  margin-top: 16px;
  border-bottom: var(--rule-hair);
}

.sx-way {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 0 22px;
  border-top: var(--rule-hair);
}

.sx-way:first-child {
  border-top: var(--rule-strong);
}

.sx-way__body {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 32px;
  align-items: start;
}

.sx-way__body p {
  margin: 0;
  font: var(--text-body);
  color: var(--color-ink-2);
  max-width: 520px;
}

.sx-way__action {
  display: flex;
  justify-content: flex-end;
}

.sx-empty-foot {
  display: flex;
  gap: 20px;
  margin-top: 12px;
  font: var(--text-note);
  letter-spacing: var(--tracking-note);
  color: var(--color-ink-3);
}

.sx-empty-foot b {
  color: var(--color-ink-2);
  font-weight: 600;
}

/*
 * The 390 frame: the column takes 16px gutters; the actions stack under the
 * title; the search sits above the tabs, which wrap rather than scroll; a card
 * is the title beside a 44px Delete, the facts two to a row (the code across
 * both), then Open session and Copy code / Resume as 44px buttons.
 */
[data-layout='mobile'] .sx-page {
  padding: 0 16px 40px;
}

[data-layout='mobile'] .sx-stack {
  --sx-gutter: 16px;
  --sx-group-gap: 48px;

  padding: 0 0 48px;
}

[data-layout='mobile'] .sx-title-row {
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  padding-top: 20px;
}

[data-layout='mobile'] .sx-title {
  gap: 6px;
}

[data-layout='mobile'] .sx-actions {
  flex-direction: column-reverse;
  align-items: stretch;
  gap: 8px;
  padding-bottom: 0;
}

[data-layout='mobile'] .sx-actions .tt-btn {
  width: 100%;
  height: var(--size-control-phone);
  font: var(--text-button-lg);
}

[data-layout='mobile'] .sx-toolbar {
  flex-direction: column-reverse;
  align-items: stretch;
  gap: 16px;
  margin-top: 20px;
}

[data-layout='mobile'] .sx-search {
  width: auto;
}

[data-layout='mobile'] .sx-search .tt-input {
  height: var(--size-control-phone);
  font: var(--text-body-lg);
}

[data-layout='mobile'] .sx-toolbar .tt-tabs {
  flex-wrap: wrap;
  height: auto;
  gap: 0 20px;
}

[data-layout='mobile'] .sx-toolbar .tt-tab {
  height: var(--size-control-phone);
  min-width: 44px;
  justify-content: center;
}

[data-layout='mobile'] .sx-toolbar__rule {
  display: none;
}

[data-layout='mobile'] .sx-body {
  margin-top: 32px;
}

[data-layout='mobile'] .sx-group {
  gap: 20px;
}

/* the editor's phone rule stacks every section head; the group head keeps its
   count at the right of the status word */
[data-layout='mobile'] .sx-stack .sx-group-head {
  flex-direction: row;
  align-items: flex-start;
  gap: 16px;
}

[data-layout='mobile'] .sx-card {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    'lead delete'
    'facts facts'
    'actions actions';
  gap: 20px 12px;
  padding: 20px;
}

[data-layout='mobile'] .sx-card[data-status='live'] {
  padding-top: 18px;
}

[data-layout='mobile'] .sx-card__lead {
  padding-top: 0;
}

[data-layout='mobile'] .sx-card__actions {
  margin-left: 0;
}

[data-layout='mobile'] .sx-card__actions .tt-btn {
  flex: 1;
  min-width: 0;
  height: var(--size-control-phone);
  font: var(--text-button-lg);
}

[data-layout='mobile'] .sx-card__delete .tt-icon-btn,
[data-layout='mobile'] .sx-card__duplicate {
  width: var(--size-control-phone);
  height: var(--size-control-phone);
  border-color: var(--color-edge);
  background: var(--color-input);
}

/* on a phone Duplicate is the glyph beside Delete; its aria-label still names it */
[data-layout='mobile'] .sx-card__duplicate {
  justify-content: center;
  padding: 0;
  border: 1px solid var(--color-edge);
}

[data-layout='mobile'] .sx-card__duplicate-label {
  display: none;
}

[data-layout='mobile'] .sx-card__delete {
  gap: 8px;
}

[data-layout='mobile'] .sx-card__facts {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px 16px;
}

[data-layout='mobile'] .sx-fact--code {
  grid-column: 1 / -1;
}

[data-layout='mobile'] .sx-notes {
  margin-top: 40px;
}

[data-layout='mobile'] .sx-dialog--picker {
  width: 100%;
}

[data-layout='mobile'] .sx-tpl__row {
  grid-template-columns: 1fr;
  grid-template-areas: 'text' 'meta' 'btn';
}

[data-layout='mobile'] .sx-tpl__row .tt-btn {
  width: 100%;
  height: var(--size-control-phone);
  font: var(--text-button-lg);
}

[data-layout='mobile'] .sx-tpl__meta {
  white-space: normal;
}

[data-layout='mobile'] .sx-picker-foot {
  flex-direction: column-reverse;
  align-items: stretch;
}

[data-layout='mobile'] .sx-picker-foot__left {
  margin-right: 0;
}

[data-layout='mobile'] .sx-way__body {
  grid-template-columns: 1fr;
  gap: 12px;
}

[data-layout='mobile'] .sx-way__action .tt-btn {
  width: 100%;
  height: var(--size-control-phone);
  font: var(--text-button-lg);
}

[data-layout='mobile'] .sx-empty-foot {
  flex-direction: column;
  gap: 6px;
}

/* -- the Undo on a toast stays pressable while the stack ignores the pointer -- */
/* The toast that says what was applied carries Undo. The toast stack ignores
   the pointer so it never blocks what is under it; one with a button takes it
   back, so resting the pointer on it keeps it up (see `toast` in ui.js). */
.toast__action { pointer-events: auto; margin-left: var(--space-1); }
.toast:has(.toast__action) { pointer-events: auto; }
[data-layout='mobile'] .toast__action {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 10px;
  margin-block: -12px;
}
/* ===========================================================================
 * Embed panel
 * ======================================================================== */

/*
 * The snippet, as something to copy rather than something to read.
 *
 * Monospaced and small: it is markup, and proportional type makes a URL with a
 * hyphen in it ambiguous at exactly the moment somebody is checking whether
 * they pasted it correctly. `readonly` rather than disabled, so it can still be
 * focused and selected — the Copy button is the primary path, and hand-selecting
 * is the one that has to keep working when the clipboard API is refused.
 */

/* The pre-publication checklist. Four short lines, each of which is a thing
   that silently half-works if it is skipped, so they are spaced to be read
   rather than skimmed as a paragraph. */

/* ---------------------------------------------------------------------------
 * The preview on the upgrade wall.
 *
 * A drawing, not a screenshot: a screenshot of a session inside a fake course
 * page would be a picture of a real product the reader cannot yet have, and it
 * dates the moment either design changes. This is six divs and says the one
 * thing that matters — the session sits inside their page, and their page is
 * still their page.
 * ------------------------------------------------------------------------ */

/* The host page's own content, abstracted to bars — recognisable as "a page"
   without inventing copy for a university nobody has. */

/* -- editor (2026 design) ------------------------------------------------- */

/*
 * The session editor (design/pages/editor, editor-setup, editor-delivery;
 * DECISIONS §11), on the kit. The parts are components.css's -- the context
 * bar, the rail with its marks and readiness meter, the fields, switches,
 * steppers, chips, banners, the join-code readout, the briefing card -- and
 * these rules place them: the 64px bar stuck to the top of the `.dash__main`
 * scrollport, then three columns -- the 308px rail column (its 260px rail
 * sticks under the bar and scrolls on its own when taller than the window),
 * the panel on white, and the 378px cream context column that keeps the join
 * code and the session register in view from every panel.
 *
 * Class vocabulary shared with the design's generators so Editor part B drops
 * in: `.ed-page .ed-bar .ed-body .ed-railcol .ed-panel .ed-context`, the panel
 * head `.pn-head .pn-title .pn-blurb .pn-facts`, sections `.pn-section`
 * (kit `.tt-section-head` inside) with `.pn-section--last`, grids `.pn-grid2
 * .pn-grid3`, notes `.pn-note .pn-notes`, the context modules `.cx-mod .cx-reg
 * .cx-row`. Token-only; the phone is the `[data-layout='mobile']` block at the
 * end (design/pages/editor/overview-phone.html and the *-phone states).
 */
.ed-page {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  background: var(--color-ground);
}

.ed-page[hidden] {
  display: none;
}

/* the bar: the kit's context bar, stuck to the top of the scrollport */
.ed-bar {
  position: sticky;
  top: 0;
  z-index: 6;
  flex: none;
}

/* the breadcrumb's Sessions is a button (it acts on this page), drawn as the kit link */
.ed-bar__crumb {
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  color: var(--color-link);
}

.ed-bar__crumb-title,
.tt-crumbs {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

#online-count {
  flex: none;
}

/* the save chip: hidden while there is nothing to say; the glyph is a real
   element painted by setSaveState() */
.tt-save[hidden] {
  display: none;
}

.tt-save__glyph {
  display: flex;
  flex: none;
}

.tt-save__glyph svg {
  display: block;
}

.tt-save--saving .tt-save__glyph svg {
  animation: tt-spin 0.9s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .tt-save--saving .tt-save__glyph svg {
    animation: none;
  }
}

/* -- the three columns -- */
.ed-body {
  display: flex;
  align-items: stretch;
  flex: 1 1 auto;
}

/* 48 + the 260px rail + 24 of air before the column's rule */
.ed-railcol {
  flex: none;
  width: 332px;
  padding: 24px 24px 48px 48px;
  border-right: var(--rule-hair);
  display: flex;
  flex-direction: column;
}

.ed-railcol .tt-rail {
  width: 260px;
  position: sticky;
  top: 88px;
  max-height: calc(100dvh - var(--size-masthead) - 64px - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.ed-railcol .tt-rail::-webkit-scrollbar {
  display: none;
}

.ed-railcol .tt-rail__legend {
  margin-top: 0;
  border-top: 0;
  padding: 10px 0 12px;
  border-bottom: var(--rule-hair);
}

.ed-rail__items {
  display: flex;
  flex-direction: column;
}

/* readiness: the kit block, then the panels still left as action links and a note */
.rail-left {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 12px;
  min-height: 32px;
}

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

.rail-left .tt-link {
  border: 0;
  padding: 0;
  background: none;
}

.rail-note {
  font: var(--text-note);
  letter-spacing: var(--tracking-note);
  color: var(--color-ink-3);
}

/* rail items are buttons (they act on this page), drawn as the kit's rail item */
.tt-rail button.tt-rail-item {
  width: 100%;
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  background: transparent;
  text-align: left;
  font: var(--text-body);
}

.tt-rail button.tt-rail-item.is-current {
  background: var(--color-selected);
  font-weight: 600;
}

.tt-rail button.tt-rail-item:hover {
  background: var(--color-hover);
}

.tt-rail-item .tt-mark {
  width: 14px;
}

/* a panel AI edit has just changed: the badge says so until it is opened */
.tt-rail-item__badge--ai {
  color: var(--color-live-text);
  font-weight: 600;
}

/* -- the panel -- */
.ed-panel {
  flex: 1;
  min-width: 0;
  padding: 32px 48px 72px;
  display: flex;
  flex-direction: column;
}

.ed-panel .tt-field__hint {
  max-width: 560px;
}

.pn-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 28px;
}

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

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

.pn-facts {
  font: var(--text-body-sm);
  color: var(--color-ink-2);
  font-variant-numeric: tabular-nums;
}

.pn-facts[hidden] {
  display: none;
}

.pn-body {
  display: flex;
  flex-direction: column;
}

.pn-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-bottom: 36px;
}

.pn-section:last-child,
.pn-section--last {
  padding-bottom: 0;
}

.pn-section--banner {
  padding-bottom: 24px;
}

/* a section that follows a banner opens without its own rule */
.pn-section--after-banner > .tt-section-head {
  border-top: 0;
  padding-top: 0;
}

.pn-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 24px;
}

.pn-grid3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px 24px;
}

.pn-grid2 > .tt-field,
.pn-grid3 > .tt-field {
  min-width: 0;
}

.pn-note {
  font: var(--text-body-sm);
  color: var(--color-ink-2);
  max-width: 560px;
}

.pn-note .tt-link {
  font: inherit;
}

.pn-notes {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}

.pn-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hint-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}

.nowrap {
  white-space: nowrap;
}

.w-360 {
  max-width: 360px;
}

.w-240 {
  max-width: 240px;
}

.w-400 {
  max-width: 400px;
}

/* inline links drawn as buttons (they open a panel) */
button.tt-link {
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
}

button.tt-link.tt-link--action {
  font: var(--text-button-sm);
}

/* the kit's loading row */
.ed-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  font: var(--text-body);
  color: var(--color-ink-2);
}

/* a label row with an Examples button at its right */
.tt-field__label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 32px;
}

/* textareas by their row count (the kit's min-height is 96) */
.tt-textarea--2 { min-height: 56px; }
.tt-textarea--3 { min-height: 76px; }
.tt-textarea--4 { min-height: 96px; }
.tt-textarea--5 { min-height: 116px; }
.tt-textarea--7 { min-height: 156px; }
.tt-textarea--style { min-height: 76px; }

.ed-panel .tt-textarea {
  white-space: pre-wrap;
}

/* an inline error wraps like the hint beside it */
.ed-panel .tt-inline-error > span {
  min-width: 0;
  white-space: normal;
}

/* the real control behind a drawn kit checkbox, radio or switch */
.ed-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.tt-check,
.tt-radio,
.tt-switch {
  position: relative;
}

/* live focus lands on the hidden input; the box or dot rings via :focus-within */
.tt-check:focus-within .tt-check__box,
.tt-radio:focus-within .tt-radio__dot {
  box-shadow: 0 0 0 2px var(--color-ground), 0 0 0 4px var(--color-focus);
}

/* the native select inside the kit's select frame: the frame draws the edge
   and the caret, the control fills it and stays invisible */
.tt-select {
  position: relative;
}

.ed-select__native {
  position: absolute;
  inset: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  margin: 0;
  padding: 0 44px 0 12px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  outline: none;
  /* the control is the hit area and the keyboard target; the frame's value span
     is the only text drawn (the popup list is the browser's own and unaffected) */
  opacity: 0;
}

.tt-select:focus-within {
  border-color: var(--color-edge-strong);
  box-shadow: 0 0 0 2px var(--color-ground), 0 0 0 4px var(--color-focus);
}

.tt-select .tt-select__value {
  pointer-events: none;
}

.tt-select .tt-select__caret {
  pointer-events: none;
}

.tt-select.is-disabled .ed-select__native {
  pointer-events: none;
}

.checks,
.sw-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sw-list {
  gap: 6px;
}

/* settings that depend on the switch above them, indented under a hairline */
.sw-sub {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-left: 78px;
  padding: 6px 0 4px 16px;
  border-left: var(--rule-hair);
}

.sw-sub .tt-field {
  max-width: 360px;
}

.sw-sub .tt-switch {
  padding-top: 2px;
  padding-bottom: 2px;
}

/* -- Overview -- */
.rd-list {
  display: flex;
  flex-direction: column;
  margin-top: -8px;
}

.rd-row {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  padding: 10px 0 10px 12px;
  border-bottom: var(--rule-hair);
}

.rd-row__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.rd-row__name {
  font: var(--text-button);
  color: var(--color-ink);
}

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

.rd-row__top {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* the name is drawn once: beside the mark on a phone, in the body on a desktop */
.rd-row__top .rd-row__name {
  display: none;
}

.share-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.share-code {
  display: flex;
  align-items: center;
  gap: 12px;
}

.share-link {
  display: flex;
  align-items: center;
  gap: 8px;
}

.share-link .tt-input {
  width: 400px;
  font-variant-numeric: tabular-nums;
}

.share-grid .tt-input-wrap {
  width: 400px;
}

.share-link__text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.share-grid .tt-input-wrap .tt-input {
  padding-left: 34px;
}

.tt-banner__title--live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.guide__toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-ink);
  cursor: pointer;
  text-align: left;
}

.guide__title {
  font: var(--text-button);
  color: var(--color-ink);
  flex: none;
  white-space: nowrap;
}

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

.guide {
  display: flex;
  flex-direction: column;
  border-top: var(--rule-strong);
}

.guide__row {
  display: grid;
  grid-template-columns: 16px 1fr auto;
  gap: 6px 12px;
  align-items: start;
  padding: 14px 0;
  border-bottom: var(--rule-hair);
}

.guide__icon {
  color: var(--color-ink-2);
  margin-top: 2px;
}

.guide__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

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

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

/* -- lists of rules, banned topics -- */
.rules {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

.rule-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  width: 100%;
}

.rule-row .tt-textarea,
.rule-row .tt-input {
  flex: 1;
}

.rule-row .tt-icon-btn {
  margin-top: 12px;
}

.rule-row--line .tt-icon-btn {
  margin-top: 2px;
}

/* -- Notes for students -- */
.note-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
}

.note {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.note__kicker {
  min-height: 32px;
}

.note__tools {
  display: flex;
  align-items: center;
  gap: 2px;
}

.note__foot {
  justify-content: flex-end;
}

/* -- the briefing preview: the kit card on a navy field, as the stage shows it -- */
.preview-stage {
  display: flex;
  justify-content: center;
  padding: 24px 24px 28px;
}

.preview-stage .tt-briefing {
  width: 560px;
  max-width: 100%;
}

.preview-stage .tt-btn--phone {
  pointer-events: none;
}

.alt {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  width: 100%;
}

.alt__k {
  font: var(--text-label);
  letter-spacing: var(--tracking-label);
  color: var(--color-ink-2);
}

/* -- Who can join -- */
.roster-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.roster-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tt-banner__body .tt-banner__text + .tt-banner__text {
  margin-top: 6px;
}

.minutes-field {
  max-width: 560px;
}

.minutes-field .tt-input {
  width: 317px;
}

.tt-stepper--typeable .tt-stepper__value {
  min-width: 96px;
  padding: 0 12px;
  border-left-color: var(--color-edge);
  border-right-color: var(--color-edge);
}

.tt-stepper__input {
  width: 64px;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: center;
  font-variant-numeric: tabular-nums;
  outline: none;
}

.tt-stepper__input::placeholder {
  color: var(--color-ink-3);
}

.tt-stepper:focus-within {
  border-color: var(--color-edge-strong);
  box-shadow: 0 0 0 2px var(--color-ground), 0 0 0 4px var(--color-focus);
}

/* -- the student-screen drawing (.sv): schematic, nothing under 12px; the bar
   and the stage are navy fields, the columns light -- */
.sv {
  display: flex;
  flex-direction: column;
  width: 100%;
  border: 1px solid var(--color-edge-strong);
}

.sv__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 36px;
  padding: 0 12px;
  border-bottom: 1px solid var(--color-rule);
}

.sv__title {
  font: var(--text-kicker);
  color: var(--color-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sv__meta {
  font: var(--text-note);
  letter-spacing: var(--tracking-note);
  color: var(--color-ink-3);
  white-space: nowrap;
}

.sv__readout {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  font: var(--text-micro);
  color: var(--color-ink-2);
  white-space: nowrap;
}

.sv__tools {
  margin-left: auto;
  display: flex;
  align-items: stretch;
  gap: 2px;
  height: 36px;
}

.sv__tool {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  font: var(--text-micro);
  color: var(--color-ink-2);
  border-bottom: 2px solid transparent;
}

.sv__tool.is-open {
  color: var(--color-ink);
  border-bottom-color: var(--color-live);
}

.sv__body {
  display: flex;
  align-items: stretch;
  min-height: 256px;
}

.sv--mini .sv__body {
  min-height: 150px;
}

.sv__notes {
  flex: none;
  width: 184px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 12px;
  border-right: var(--rule-hair);
}

.sv__note-more {
  font: var(--text-note);
  letter-spacing: var(--tracking-note);
  color: var(--color-ink-3);
}

.sv__colhead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
}

.sv__coltitle {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font: var(--text-kicker);
  color: var(--color-ink);
}

.sv__colsub {
  font: var(--text-note);
  letter-spacing: var(--tracking-note);
  color: var(--color-ink-2);
}

.sv__hide {
  display: flex;
  align-items: center;
  gap: 2px;
  font: var(--text-micro);
  color: var(--color-ink-2);
  white-space: nowrap;
}

.sv__note {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-top: 8px;
  border-top: var(--rule-hair);
}

.sv__note-h {
  font: var(--text-label);
  letter-spacing: var(--tracking-label);
  color: var(--color-ink);
}

.sv__note-t {
  font: var(--text-note);
  letter-spacing: var(--tracking-note);
  color: var(--color-ink-2);
  white-space: pre-line;
}

.sv__stage {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 8px;
  gap: 8px;
}

.sv__persona {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 8px;
  background: var(--color-surface-raised);
  border-radius: var(--radius-control);
  font: var(--text-micro);
  color: var(--color-ink);
}

.sv__avatar {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font: var(--text-micro);
  color: var(--color-ink-2);
}

.sv__caption {
  display: flex;
  justify-content: center;
}

.sv__caption-plate {
  padding: 3px 8px;
  background: var(--color-captions-scrim);
  font: var(--text-note);
  letter-spacing: var(--tracking-note);
  color: var(--color-ink);
  text-align: center;
}

.sv__composer {
  display: flex;
  align-items: center;
  gap: 4px;
}

.sv__mic {
  width: 24px;
  height: 24px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-live);
  color: var(--color-ink-on-bright);
  border-radius: var(--radius-control);
}

.sv__input {
  flex: 1;
  min-width: 0;
  height: 24px;
  display: flex;
  align-items: center;
  padding: 0 8px;
  background: var(--color-input);
  border: 1px solid var(--color-edge);
  border-radius: var(--radius-control);
  font: var(--text-note);
  letter-spacing: var(--tracking-note);
  color: var(--color-ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sv__send {
  height: 24px;
  flex: none;
  display: flex;
  align-items: center;
  padding: 0 8px;
  border: 1px solid var(--color-edge);
  border-radius: var(--radius-control);
  font: var(--text-micro);
  color: var(--color-ink);
}

.sv__al {
  flex: none;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: 4px;
  font: var(--text-micro);
  color: var(--color-ink-2);
  white-space: nowrap;
}

.sv__al-track {
  width: 20px;
  height: 12px;
  display: flex;
  align-items: center;
  padding: 1px;
  border: 1px solid var(--color-edge);
  border-radius: var(--radius-control);
  background: var(--color-input);
}

.sv__al-knob {
  width: 8px;
  height: 8px;
  border-radius: 1px;
  background: var(--color-edge);
}

.sv__transcript {
  flex: none;
  width: 200px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  background: var(--color-ground);
  border-left: var(--rule-hair);
}

.sv--mini .sv__transcript {
  width: 112px;
}

.sv__turn {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 7px;
  border-top: var(--rule-hair);
}

.sv__speaker {
  font: var(--text-label);
  letter-spacing: var(--tracking-label);
  color: var(--color-ink);
}

.sv__speaker--student {
  color: var(--color-live-text);
}

.sv__line {
  font: var(--text-note);
  letter-spacing: var(--tracking-note);
  color: var(--color-ink);
}

.preview-pair {
  align-items: start;
}

.preview-alt {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* -- Session format: the register of what a minute costs -- */
.rates {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 600px;
}

.rates__rows {
  display: flex;
  flex-direction: column;
}

.rates__head {
  display: grid;
  grid-template-columns: 1fr 72px 170px;
  gap: 12px;
  align-items: end;
  padding: 0 12px 8px 40px;
  border-bottom: var(--rule-strong);
}

.rates__head .tt-th {
  padding: 0;
}

.rate {
  display: grid;
  grid-template-columns: 18px 1fr 72px 170px;
  gap: 12px;
  align-items: start;
  min-height: 44px;
  padding: 10px 12px 10px 10px;
  border-top: var(--rule-hair);
  border-left: 2px solid transparent;
  cursor: pointer;
}

.rate:first-of-type {
  border-top: 0;
}

.rate.is-checked {
  background: var(--color-selected);
  border-left-color: var(--color-live-text);
}

.rate .tt-check__effect {
  max-width: 330px;
}

.rate__n {
  font: var(--text-kicker);
  color: var(--color-ink);
  text-align: right;
  font-variant-numeric: tabular-nums;
  padding-top: 1px;
}

.rate__note {
  font: var(--text-body-sm);
  color: var(--color-ink-2);
  padding-top: 1px;
}

.rate.is-checked .rate__note {
  font: var(--text-kicker);
  color: var(--color-ink);
}

.rate.is-disabled {
  cursor: default;
}

.rate.is-disabled .tt-check__text,
.rate.is-disabled .tt-check__effect,
.rate.is-disabled .rate__n,
.rate.is-disabled .rate__note {
  color: var(--color-ink-3);
}

.rate:focus-within {
  box-shadow: 0 0 0 2px var(--color-ground), 0 0 0 4px var(--color-focus);
}

.rate:focus-within .tt-radio__dot {
  box-shadow: none;
}

/* the context column's rate row: the whole row opens Session format */
.cx-row--link {
  color: var(--color-ink);
  text-decoration: none;
  cursor: pointer;
  text-align: left;
  width: 100%;
  background: none;
  border-right: 0;
  border-left: 0;
  border-bottom: 0;
  font: inherit;
}

.cx-row--link:hover .cx-row__k {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.cx-rate {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.cx-rate__n {
  font: var(--text-figure-md);
  letter-spacing: var(--tracking-figure-md);
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}

.cx-rate__u {
  font: var(--text-ui);
  color: var(--color-ink);
}

/* -- Avatar & voice: the gallery, inline -- */
.av-tools {
  display: flex;
  align-items: center;
  gap: 12px;
}

.av-tools .tt-input-wrap {
  width: 300px;
}

.av-count {
  display: flex;
  align-items: center;
  gap: 10px;
  font: var(--text-body-sm);
  color: var(--color-ink-2);
  white-space: nowrap;
}

.av-tools__right {
  margin-left: auto;
}

.av-scroll {
  max-height: 464px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-bottom: var(--rule-hair);
  padding: 2px 2px 12px;
  margin: -2px -2px 0;
}

.av-cue {
  display: flex;
  align-items: center;
  gap: 8px;
  font: var(--text-body-sm);
  color: var(--color-ink-2);
}

.av-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.av-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  padding: 8px;
  border: 1px solid var(--color-edge);
  border-radius: var(--radius-control);
  background: var(--color-ground);
  color: var(--color-ink);
  cursor: pointer;
  text-align: left;
  font: inherit;
}

.av-tile:hover {
  border-color: var(--color-edge-strong);
}

.av-tile.is-selected {
  border: 2px solid var(--color-edge-strong);
  padding: 7px;
  background: var(--color-hover);
}

.av-tile:disabled,
.av-tile.is-disabled {
  cursor: default;
}

.av-tile:disabled .av-plate img,
.av-tile:disabled .av-plate__bust {
  opacity: 0.55;
}

.av-tile:disabled .av-name,
.av-tile:disabled .av-meta,
.av-tile:disabled .av-voice {
  color: var(--color-ink-3);
}

.av-plate {
  position: relative;
  width: 100%;
  height: 102px;
  background: var(--color-ground);
  border: 1px solid var(--color-rule);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.av-plate--photo {
  border: 0;
}

.av-plate img {
  display: block;
  width: 100%;
  height: 102px;
  object-fit: cover;
  object-position: top;
}

.av-plate__bust {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  color: var(--color-meter-track);
}

.av-plate__none {
  position: absolute;
  right: 6px;
  top: 6px;
  font: var(--text-micro);
  color: var(--color-ink-3);
}

.av-check {
  position: absolute;
  left: 6px;
  top: 6px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  color: var(--color-primary-label);
  border-radius: var(--radius-control);
}

.av-flag {
  position: absolute;
  right: 6px;
  bottom: 6px;
  padding: 2px 6px;
  background: var(--color-field-navy);
  color: var(--color-ink-on-navy);
  font: var(--text-micro);
  border-radius: var(--radius-control);
}

.av-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.av-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.av-name {
  font: var(--text-kicker);
  color: var(--color-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.av-inuse {
  font: var(--text-kicker);
  color: var(--color-ink);
  white-space: nowrap;
}

.av-meta {
  font: var(--text-body-sm);
  color: var(--color-ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.av-voice {
  font: var(--text-body-sm);
  color: var(--color-ink);
}

.av-foot {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 4px;
}

.av-foot__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.av-foot__lead {
  font: var(--text-button);
  color: var(--color-ink);
}

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

.av-foot__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.av-skel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-control);
}

.av-skel__plate {
  height: 102px;
  background: var(--color-chart-tint);
}

.av-skel__line {
  height: 10px;
  background: var(--color-chart-tint);
}

.av-skel__line--short {
  width: 60%;
}

/* voice row: the select and Hear a sample side by side */
.voice-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.voice-row .tt-select {
  width: 380px;
  max-width: 100%;
}

.voice-lines {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 560px;
}

.voice-line {
  font: var(--text-body-sm);
  color: var(--color-ink-2);
  padding: 6px 0;
  border-top: var(--rule-hair);
}

.voice-line:first-child {
  border-top: 0;
}

/* backdrop tiles in their runs */
.bd-runs {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.bd-run {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bd-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  align-items: start;
}

.bd-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  padding: 4px;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--color-ink);
  cursor: pointer;
  text-align: left;
  font: inherit;
}

.bd-tile:hover {
  border-color: var(--color-edge);
}

.bd-tile.is-selected {
  border: 2px solid var(--color-edge-strong);
  padding: 3px;
  background: var(--color-hover);
}

.bd-tile__img {
  display: block;
  width: 100%;
  height: 64px;
  object-fit: cover;
  background: var(--color-meter-track);
}

.bd-tile__img--none {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--color-edge);
  background: var(--color-ground);
  font: var(--text-micro);
  color: var(--color-ink-3);
}

.bd-tile__label {
  font: var(--text-micro);
  color: var(--color-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bd-tile.is-selected .bd-tile__label {
  font: var(--text-label);
  letter-spacing: var(--tracking-label);
}

.bd-check {
  position: absolute;
  left: 9px;
  top: 9px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  color: var(--color-primary-label);
  border-radius: var(--radius-control);
}

.bd-upload-tile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
  min-width: 0;
}

.bd-upload-tile .tt-link--action {
  margin-left: 4px;
}

.bd-upload {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

/* green-screen key: the switch, the fine-tune disclosure and the free preview */
.key {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.key-toggle {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 36px;
  padding: 8px 0;
  border: 0;
  border-top: var(--rule-hair);
  border-bottom: var(--rule-hair);
  background: transparent;
  color: var(--color-ink);
  cursor: pointer;
  text-align: left;
  width: 100%;
}

.key-toggle svg {
  margin-top: 2px;
}

.key-toggle__title {
  font: var(--text-button);
  color: var(--color-ink);
  white-space: nowrap;
}

.key-toggle__meta {
  flex: 1;
  font: var(--text-body-sm);
  color: var(--color-ink-2);
  padding-top: 1px;
}

.key-tune {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-left: 7px;
  padding: 4px 0 10px 26px;
  border-left: var(--rule-hair);
  max-width: 540px;
}

.key-tune .tt-slider {
  gap: 6px;
}

.key-tune .tt-slider__row {
  max-width: 440px;
}

.swatch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 36px;
  padding: 0 12px 0 4px;
  border: 1px solid var(--color-edge);
  border-radius: var(--radius-control);
  background: var(--color-input);
  color: var(--color-ink);
  font: var(--text-body);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  position: relative;
}

.swatch__chip {
  width: 26px;
  height: 26px;
  border-radius: var(--radius-control);
  border: 1px solid var(--color-rule);
}

/* the real colour input sits over the drawn swatch */
.swatch__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  border: 0;
  padding: 0;
}

.swatch:focus-within {
  box-shadow: 0 0 0 2px var(--color-ground), 0 0 0 4px var(--color-focus);
}

/* the kit slider over a real range input: the input is the hit area, drawn by the kit's track and thumb */
.tt-slider__row {
  position: relative;
}

.tt-slider__range {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(100% - 68px);
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.tt-slider:focus-within .tt-slider__thumb {
  box-shadow: 0 0 0 2px var(--color-ground), 0 0 0 4px var(--color-focus);
}

.key-preview {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.key-canvas {
  position: relative;
  width: 480px;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-field-navy);
}

.key-canvas canvas,
.key-canvas .bgpreview__flat {
  display: block;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

.key-canvas .bgpreview__flat {
  display: flex;
  align-items: center;
  justify-content: center;
  font: var(--text-note);
  color: var(--color-ink-3-on-navy);
}

.key-tag {
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: var(--color-captions-scrim);
  color: var(--color-ink-on-navy);
  font: var(--text-micro);
  border-radius: var(--radius-control);
}

/* -- Embed on your site -- */
.snippet {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-edge);
  border-radius: var(--radius-control);
  background: var(--color-hover);
  color: var(--color-ink);
  font: var(--text-body-sm);
  white-space: pre-wrap;
  word-break: normal;
  overflow-wrap: anywhere;
  resize: none;
  min-height: 0;
  field-sizing: content;
}

.snippet-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}

.site-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.site-row .tt-input {
  width: 400px;
}

.sites {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bullets {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: 600px;
}

.bullet {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 10px;
  align-items: start;
  font: var(--text-body-sm);
  color: var(--color-ink-2);
}

.bullet__mark {
  color: var(--color-ink);
  padding-top: 1px;
}

.bullet b {
  font-weight: 600;
  color: var(--color-ink);
}

.bullet .tt-link {
  font: inherit;
}

.emb-draw {
  width: 560px;
  max-width: 100%;
  border: 1px solid var(--color-edge-strong);
  border-radius: var(--radius-overlay);
  overflow: hidden;
  background: var(--color-ground);
}

.emb-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 36px;
  padding: 0 12px;
  background: var(--color-field-reading);
  border-bottom: var(--rule-hair);
}

.emb-dots {
  display: flex;
  gap: 5px;
}

.emb-dot {
  width: 7px;
  height: 7px;
  background: var(--color-edge);
  border-radius: 1px;
}

.emb-addr {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  background: var(--color-ground);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-control);
  font: var(--text-note);
  color: var(--color-ink-2);
}

.emb-page {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 24px 24px;
}

.emb-h {
  font: var(--text-title-sm);
  letter-spacing: var(--tracking-title-sm);
  color: var(--color-ink);
}

.emb-p {
  font: var(--text-body-sm);
  color: var(--color-ink-2);
  max-width: 440px;
}

.emb-frame {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 176px;
  background: var(--color-field-navy);
  color: var(--color-ink-on-navy);
}

.emb-frame__t {
  font: var(--text-kicker);
  color: var(--color-ink-on-navy);
}

.emb-frame__p {
  font: var(--text-note);
  color: var(--color-ink-2-on-navy);
}

/* -- the Examples dialog: the kit dialog widened to 520 -- */
.ed-examples {
  width: 520px;
}

.ex-titles {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

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

.ex-list {
  display: flex;
  flex-direction: column;
  padding: 14px 0 8px;
}

.ed-examples .tt-dialog__body {
  padding-left: 0;
  padding-right: 0;
}

.ex {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 14px 20px 14px 24px;
  border-top: var(--rule-hair);
}

.ex__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.ex__label {
  font: var(--text-kicker);
  color: var(--color-ink);
}

.ex__text {
  font: var(--text-body-sm);
  color: var(--color-ink-2);
  white-space: pre-wrap;
}

.ex .tt-btn {
  margin-top: 1px;
  flex: none;
}

/* -- the context column -- */
.ed-context {
  flex: none;
  width: 378px;
  display: flex;
  flex-direction: column;
  padding: 0 24px 48px;
}

.ed-context__stick {
  position: sticky;
  top: 64px;
  display: flex;
  flex-direction: column;
}

.cx-mod {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 0 24px;
  border-bottom: var(--rule-hair);
}

.cx-mod:last-child {
  border-bottom: 0;
}

.cx-mod[hidden] {
  display: none;
}

.cx-mod .tt-code-block {
  gap: 8px;
}

/* Start · Pause · End, above the join code: the buttons valid now share the column's width */
.cx-mod--run {
  flex-direction: row;
  gap: 8px;
}

.cx-mod--run .tt-btn {
  flex: 1;
}

/* under 1081px the context column is hidden and the block rides in the editor bar (placeLifecycle) */
.cx-mod--run.is-in-bar {
  flex: none;
  padding: 0;
  border: 0;
}

.cx-mod--run.is-in-bar .tt-btn {
  flex: none;
  height: var(--size-control-compact);
  padding: 0 12px;
  font: var(--text-button-sm);
}

.cx-mod .tt-code-block__actions {
  margin-top: 4px;
}

.cx-newcode {
  align-self: flex-start;
}

.cx-code--empty .tt-code__cell {
  color: var(--color-ink-3);
}

.cx-reg {
  display: flex;
  flex-direction: column;
}

.cx-row {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 12px;
  padding: 10px 0;
  border-top: var(--rule-hair);
}

.cx-row:first-child {
  border-top: 0;
  padding-top: 0;
}

.cx-row:last-child {
  padding-bottom: 0;
}

.cx-row__k {
  font: var(--text-label);
  letter-spacing: var(--tracking-label);
  color: var(--color-ink-2);
  padding-top: 2px;
}

.cx-row__v {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: flex-start;
}

.cx-row__lead {
  font: var(--text-kicker);
  color: var(--color-ink);
}

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

.cx-row .tt-save {
  height: 18px;
}

/* -- between the 1440 frame and a phone: the context column gives way first -- */
@media (max-width: 1240px) {
  .ed-context {
    width: 320px;
    padding: 0 16px 48px;
  }

  .ed-panel {
    padding: 32px 32px 72px;
  }

  .pn-grid3 {
    grid-template-columns: 1fr 1fr;
  }

  .av-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .bd-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 1080px) {
  .ed-context {
    display: none;
  }

  .ed-railcol {
    width: 300px;
    padding-left: 16px;
  }
}

/*
 * The 390 frame (design/pages/editor/overview-phone.html and the *-phone
 * states): the bar stacks -- identity row, the save chip, the actions wrapping
 * at 44px -- and is no longer stuck (it is three rows tall); the rail becomes a
 * strip of items that scrolls sideways and sticks to the top of the scrollport
 * so the panels stay one tap away, with the readiness row and the legend under
 * it; the join code card follows the strip; the panel takes the width at 16px
 * margins; the "This session" register ends the page on its cream field.
 */
[data-layout='mobile'] .ed-bar {
  position: static;
  height: auto;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px 4px;
  padding: 10px 16px 14px;
  overflow: visible;
}

[data-layout='mobile'] .ed-bar__back {
  width: var(--size-control-phone);
  height: var(--size-control-phone);
}

[data-layout='mobile'] .ed-bar .tt-context-bar__main {
  flex: 1 1 0;
  min-width: 0;
  padding-top: 2px;
}

[data-layout='mobile'] .ed-bar .tt-crumbs .tt-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 13px 0;
  margin: -13px 0;
}

[data-layout='mobile'] .ed-bar .tt-context-bar__title-row {
  flex-wrap: wrap;
  gap: 6px 12px;
}

[data-layout='mobile'] .ed-bar .tt-context-bar__title {
  max-width: 100%;
  white-space: normal;
}

[data-layout='mobile'] .ed-bar .tt-context-bar__meta {
  flex: none;
  width: 100%;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

[data-layout='mobile'] .ed-bar__actions {
  flex: 1 1 100%;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: 0;
}

[data-layout='mobile'] .ed-bar__actions .tt-save {
  flex: 1 1 100%;
}

[data-layout='mobile'] .ed-bar__actions .tt-btn {
  height: var(--size-control-phone);
  padding: 0 14px;
  font: var(--text-button);
}

[data-layout='mobile'] .ed-bar__actions .tt-context-bar__sep {
  display: none;
}

[data-layout='mobile'] .ed-body {
  flex-direction: column;
}

[data-layout='mobile'] .ed-railcol {
  order: 1;
  width: auto;
  padding: 0;
  border-right: 0;
  border-bottom: var(--rule-hair);
}

[data-layout='mobile'] .ed-railcol .tt-rail {
  position: static;
  width: 100%;
  max-height: none;
  overflow: visible;
}

[data-layout='mobile'] .ed-rail__items {
  order: 1;
  position: sticky;
  top: 0;
  z-index: 5;
  flex-direction: row;
  align-items: center;
  gap: 2px;
  padding: 6px 16px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  background: var(--color-ground);
  border-bottom: var(--rule-hair);
}

[data-layout='mobile'] .ed-rail__items::-webkit-scrollbar {
  display: none;
}

[data-layout='mobile'] .ed-rail__items .tt-rail__group {
  display: none;
}

[data-layout='mobile'] .tt-rail button.tt-rail-item {
  width: auto;
  flex: none;
  min-height: var(--size-control-phone);
  padding: 0 12px 0 10px;
}

[data-layout='mobile'] .tt-rail-item__label {
  flex: none;
  overflow: visible;
}

[data-layout='mobile'] .tt-readiness {
  order: 2;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 10px;
  min-height: 44px;
  padding: 0 16px;
  border-bottom: 0;
}

[data-layout='mobile'] .tt-readiness__row {
  gap: 8px;
}

[data-layout='mobile'] .tt-readiness .tt-meter__track,
[data-layout='mobile'] .tt-readiness .rail-note {
  display: none;
}

[data-layout='mobile'] .ed-railcol .tt-rail__legend {
  order: 3;
  margin: 0 16px;
  padding: 10px 0 12px;
  border-bottom: 0;
}

[data-layout='mobile'] .ed-context,
[data-layout='mobile'] .ed-context__stick {
  display: contents;
}

[data-layout='mobile'] .cx-mod--run {
  order: 2;
  padding: 16px 16px 0;
  border-bottom: 0;
  background: var(--color-ground);
}

[data-layout='mobile'] .cx-mod--run .tt-btn {
  height: var(--size-control-phone);
  font: var(--text-button-lg);
}

[data-layout='mobile'] .cx-mod--code {
  order: 2;
  padding: 20px 16px;
  border-bottom: var(--rule-hair);
  background: var(--color-ground);
}

[data-layout='mobile'] .cx-mod--code .tt-code-block__actions {
  gap: 8px;
}

[data-layout='mobile'] .cx-mod--code .tt-code-block__actions .tt-btn {
  flex: 1;
  height: var(--size-control-phone);
  font: var(--text-button-lg);
}

[data-layout='mobile'] .cx-mod--code .cx-newcode {
  min-height: var(--size-control-phone);
}

[data-layout='mobile'] .ed-panel {
  order: 3;
  padding: 24px 16px 40px;
}

[data-layout='mobile'] .cx-mod--session {
  order: 4;
  padding: 20px 16px 40px;
  background: var(--color-field-reading);
  border-bottom: 0;
}

[data-layout='mobile'] .cx-row {
  grid-template-columns: 56px 1fr;
}

[data-layout='mobile'] .pn-head {
  padding-bottom: 20px;
}

[data-layout='mobile'] .pn-section {
  padding-bottom: 32px;
}

[data-layout='mobile'] .pn-grid2,
[data-layout='mobile'] .pn-grid3 {
  grid-template-columns: 1fr;
}

[data-layout='mobile'] .tt-section-head {
  flex-direction: column;
}

[data-layout='mobile'] .tt-kicker {
  white-space: nowrap;
}

[data-layout='mobile'] .tt-kicker__meta {
  white-space: normal;
  max-width: 58%;
  text-align: right;
}

[data-layout='mobile'] .ed-panel .tt-btn,
[data-layout='mobile'] .ed-panel .tt-icon-btn {
  min-height: var(--size-control-phone);
}

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

[data-layout='mobile'] .ed-panel .tt-input,
[data-layout='mobile'] .ed-panel .tt-select {
  height: var(--size-control-phone);
  font: var(--text-body-lg);
}

[data-layout='mobile'] .ed-panel .tt-textarea {
  font: var(--text-body-lg);
}

[data-layout='mobile'] .ed-panel .tt-check,
[data-layout='mobile'] .ed-panel .tt-radio,
[data-layout='mobile'] .ed-panel .tt-switch {
  min-height: var(--size-control-phone);
}

[data-layout='mobile'] .ed-panel .tt-chip {
  height: var(--size-control-phone);
}

[data-layout='mobile'] .ed-panel .tt-chip__remove {
  width: var(--size-control-phone);
  height: var(--size-control-phone);
}

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

[data-layout='mobile'] .ed-panel .tt-stepper {
  height: calc(var(--size-control-phone) + 2px);
}

[data-layout='mobile'] .ed-panel .tt-stepper__btn {
  width: var(--size-control-phone);
}

[data-layout='mobile'] .tt-field__label-row {
  min-height: 44px;
}

[data-layout='mobile'] .rd-row {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 14px 0;
}

[data-layout='mobile'] .rd-row .tt-btn {
  align-self: flex-start;
}

[data-layout='mobile'] .rd-row__top .rd-row__name {
  display: inline;
}

[data-layout='mobile'] .rd-row__body > .rd-row__name {
  display: none;
}

[data-layout='mobile'] .share-code,
[data-layout='mobile'] .share-link {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

[data-layout='mobile'] .share-link .tt-input,
[data-layout='mobile'] .share-grid .tt-input-wrap {
  width: 100%;
}

[data-layout='mobile'] .guide__toggle {
  min-height: 44px;
  align-items: flex-start;
  padding-top: 4px;
}

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

[data-layout='mobile'] .guide__row {
  grid-template-columns: 16px 1fr;
}

[data-layout='mobile'] .guide__row .tt-link {
  grid-column: 2;
}

[data-layout='mobile'] .w-360,
[data-layout='mobile'] .w-240,
[data-layout='mobile'] .w-400,
[data-layout='mobile'] .sw-sub .tt-field,
[data-layout='mobile'] .minutes-field .tt-input {
  max-width: none;
  width: 100%;
}

[data-layout='mobile'] .sw-sub {
  margin-left: 0;
  padding-left: 12px;
}

[data-layout='mobile'] .rates {
  max-width: none;
}

[data-layout='mobile'] .rates__head {
  grid-template-columns: 1fr 56px;
  padding: 0 8px 8px 36px;
}

[data-layout='mobile'] .rates__head .rates__head-diff {
  display: none;
}

[data-layout='mobile'] .rate {
  grid-template-columns: 18px 1fr 56px;
  gap: 8px 10px;
  padding: 10px 8px;
}

[data-layout='mobile'] .rate__note {
  grid-column: 2;
  padding-top: 0;
}

[data-layout='mobile'] .rate .tt-check__effect {
  max-width: none;
}

[data-layout='mobile'] .av-tools {
  flex-wrap: wrap;
}

[data-layout='mobile'] .av-tools .tt-input-wrap {
  width: 100%;
}

[data-layout='mobile'] .av-tools__right {
  margin-left: 0;
}

[data-layout='mobile'] .av-grid {
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

[data-layout='mobile'] .av-scroll {
  max-height: 456px;
}

[data-layout='mobile'] .tt-banner {
  flex-wrap: wrap;
}

[data-layout='mobile'] .tt-banner__body {
  flex: 1 1 200px;
}

[data-layout='mobile'] .tt-banner__action {
  margin-left: 28px;
  width: 100%;
}

[data-layout='mobile'] .av-foot,
[data-layout='mobile'] .voice-row,
[data-layout='mobile'] .site-row {
  flex-direction: column;
  align-items: stretch;
}

[data-layout='mobile'] .voice-row .tt-select,
[data-layout='mobile'] .site-row .tt-input {
  width: 100%;
}

[data-layout='mobile'] .bd-grid {
  grid-template-columns: repeat(3, 1fr);
}

[data-layout='mobile'] .key-tune {
  margin-left: 0;
  padding-left: 0;
  border-left: 0;
}

[data-layout='mobile'] .key-toggle {
  flex-wrap: wrap;
  min-height: 44px;
}

[data-layout='mobile'] .key-toggle__meta {
  flex-basis: 100%;
}

[data-layout='mobile'] .swatch {
  height: 44px;
}

[data-layout='mobile'] .emb-draw {
  width: 100%;
}

[data-layout='mobile'] .emb-frame__p {
  text-align: center;
}

[data-layout='mobile'] .preview-stage {
  padding: 16px 12px 20px;
}

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

[data-layout='mobile'] .sv__transcript {
  width: 120px;
}

[data-layout='mobile'] .ed-examples {
  width: 100%;
}


/* -- editor part B (2026 design): content panels, Students, the review dialogs, Try it yourself -- */

/*
 * The Content panels (design/pages/editor-content), the Students panel with
 * its Read / Report / See instructions dialogs (design/pages/review) and the
 * Try it yourself run (the same set), on the kit. Class vocabulary from the
 * design's generators: `.pn-intro .sub .who .disc`, topics `.tp-*`, knowledge
 * `.kb-*`, insights `.sees* .si-*`, notes `.cn-*`, MCP `.mcp-*`, Students
 * `.rs-*`, the dialogs `.rv-*`, the run `.tx-*`. Token-only; the phone rules
 * are the `[data-layout='mobile']` block at the end.
 */

/* one prose measure down a content panel */
.pn-intro {
  font: var(--text-body);
  color: var(--color-ink-2);
  max-width: 620px;
}

.ed-panel .tt-check__effect {
  max-width: 620px;
}

/* settings that depend on the switch above them, indented under a hairline (the design's `.sub`) */
.sub {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-left: 62px;
  padding-left: 16px;
  border-left: var(--rule-hair);
}

.sub__hint {
  margin-top: -8px;
}

.tt-field--narrow .tt-select {
  width: 300px;
  max-width: 100%;
}

/* a disclosure standing alone where a section would be */
.disc {
  border-top: var(--rule-strong);
  padding-top: 8px;
}

.tt-section-head__tools {
  flex: none;
}

.tt-section-head__tools .guide__toggle {
  height: 32px;
  white-space: nowrap;
}

/* the kit's 4px square list mark */
.sq {
  display: inline-flex;
  flex: none;
}

/* -- Topics: a ruled list numbered in Lora, two fields per topic, the mark under them -- */
.tp-list {
  display: flex;
  flex-direction: column;
}

.tp-head,
.tp {
  display: grid;
  grid-template-columns: 36px 232px 1fr auto;
  gap: 8px;
  align-items: start;
}

.tp-head {
  padding-bottom: 6px;
}

.tp {
  padding: 12px 0 10px;
  border-top: var(--rule-hair);
}

.tp__n {
  font: var(--text-title-sm);
  letter-spacing: var(--tracking-title-sm);
  color: var(--color-ink);
  padding-top: 6px;
  font-variant-numeric: normal;
}

.tp .tt-icon-btn {
  margin-top: 2px;
}

.tp .tt-textarea {
  min-height: 56px;
}

.tp__check {
  grid-column: 2 / 4;
}

.tp-foot {
  padding: 12px 0 0;
  border-top: var(--rule-hair);
}

.tp-empty {
  padding: 2px 0 8px;
}

/* -- Knowledge: a dense ruled list; the attached row is the selected row; status is a glyph and a word -- */
.kb-list {
  display: flex;
  flex-direction: column;
}

.kb-head,
.kb-row {
  display: grid;
  grid-template-columns: 32px 1fr 126px 196px;
  gap: 0 16px;
  align-items: start;
}

.kb-head {
  padding: 0 10px 8px;
  border-bottom: var(--rule-strong);
}

.kb-head__cell {
  display: flex;
  flex-direction: column;
  font: var(--text-label);
  letter-spacing: var(--tracking-label);
  color: var(--color-ink-2);
  white-space: nowrap;
}

.kb-head__cell--num {
  align-items: flex-end;
  text-align: right;
}

.kb-head__unit {
  font: var(--text-note);
  letter-spacing: var(--tracking-note);
  color: var(--color-ink-3);
  white-space: nowrap;
}

.kb-row {
  min-height: 54px;
  padding: 12px 10px 12px 8px;
  border-bottom: var(--rule-hair);
  border-left: 2px solid transparent;
}

.kb-row.is-checked {
  background: var(--color-selected);
  border-left-color: var(--color-live-text);
}

.kb-row:hover .tt-check__box {
  border-color: var(--color-edge-strong);
}

/* the box is 18px; the label around it is the 32px pointer target */
.kb-row__tick {
  width: 32px;
  height: 32px;
  min-height: 0;
  padding: 0;
  margin: -5px 0 0 -7px;
  align-items: center;
  justify-content: center;
}

.kb-row__tick .tt-check__box {
  margin-top: 0;
}

.kb-row__main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.kb-row__name {
  font: var(--text-button);
  color: var(--color-ink);
}

.kb-row__desc {
  font: var(--text-body-sm);
  color: var(--color-ink-2);
  overflow-wrap: anywhere;
}

.kb-row__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-end;
  text-align: right;
  padding-top: 1px;
  font: var(--text-body-sm);
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}

.kb-row__meta-note {
  font: var(--text-note);
  letter-spacing: var(--tracking-note);
  color: var(--color-ink-3);
  font-variant-numeric: tabular-nums;
}

.kb-row__status {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 1px;
  align-items: flex-start;
}

.kb-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: var(--text-kicker);
  white-space: nowrap;
}

.kb-status--ready {
  color: var(--color-success);
}

/* in progress is slate, never amber (SYSTEM §3: Thinking… is slate) */
.kb-status--preparing,
.kb-status--empty {
  color: var(--color-ink-2);
}

.kb-status--failed {
  color: var(--color-danger);
}

.kb-status__note {
  font: var(--text-note);
  letter-spacing: var(--tracking-note);
  color: var(--color-ink-2);
}

.kb-retry {
  margin-top: 2px;
  border: 0;
  padding: 0;
  background: none;
}

.kb-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.kb-action {
  display: flex;
  align-items: center;
  gap: 16px;
}

.kb-action .tt-btn {
  flex: none;
}

.kb-action .tt-field__hint {
  max-width: 400px;
}

.kb-empty {
  padding: 4px 0 8px;
}

.kb-guard {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.kb-guard .tt-switch {
  max-width: 540px;
}

.kb-guard .tt-link--action {
  margin-top: 6px;
  flex: none;
}

/* -- Student insights: what they see / never see, the framed drawing, the sample row -- */
.who {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.who__col {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 10px;
  border-top: var(--rule-strong);
}

.who__k {
  font: var(--text-kicker);
  color: var(--color-ink);
}

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

.tt-banner__action .tt-btn {
  gap: 6px;
}

.sees-fig {
  margin: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-edge-strong);
}

.sees {
  display: flex;
  justify-content: center;
  padding: 32px;
}

.sees-cap {
  font: var(--text-note);
  letter-spacing: var(--tracking-note);
  color: var(--color-ink-2);
  padding: 8px 12px;
  border-top: 1px solid var(--color-edge-strong);
}

.si-card {
  gap: 12px;
}

.si-card .tt-briefing__title {
  font: var(--text-title-md);
  letter-spacing: var(--tracking-title-md);
}

.si-report {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 10px;
}

.si-report__note {
  font: var(--text-reading);
  letter-spacing: var(--tracking-reading);
  color: var(--color-ink);
}

.si-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 4px;
}

.si-group__k {
  font: var(--text-label);
  letter-spacing: var(--tracking-label);
  color: var(--color-ink-2);
}

.si-group .tt-insight {
  padding: 6px 0 4px;
  border-top: 0;
}

.si-step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font: var(--text-body);
  color: var(--color-ink);
  padding-top: 4px;
}

.si-step .sq {
  margin-top: 8px;
}

.si-card .tt-briefing__actions {
  padding-top: 6px;
}

.si-sample {
  display: flex;
  align-items: center;
  gap: 16px;
}

.si-sample .tt-btn {
  flex: none;
}

/* -- Conversation notes: three ruled facts at the panel's full measure, then the notebook on the reading field -- */
.cn-facts {
  display: flex;
  border-top: var(--rule-strong);
  border-bottom: var(--rule-hair);
}

.cn-fact {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 16px;
  border-left: var(--rule-hair);
}

.cn-fact:first-child {
  border-left: 0;
  padding-left: 0;
}

.cn-fact__v {
  font: var(--text-button);
  color: var(--color-ink);
}

.cn-fact__k {
  font: var(--text-note);
  letter-spacing: var(--tracking-note);
  color: var(--color-ink-2);
}

.cn-fact__k .tt-link {
  font: inherit;
}

.cn-note {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 28px 32px 32px;
}

.cn-note__eyebrow {
  font: var(--text-label-caps);
  letter-spacing: var(--tracking-label-caps);
  text-transform: uppercase;
  color: var(--color-ink-2);
}

.cn-note__title {
  font: var(--text-title-md);
  letter-spacing: var(--tracking-title-md);
  color: var(--color-ink);
}

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

.cn-note__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 32px;
  padding-top: 12px;
}

.cn-note__group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cn-note__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cn-note__line {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font: var(--text-body);
  color: var(--color-ink);
}

.cn-note__line .sq {
  margin-top: 8px;
}

/* -- MCP tools (behind its flag): the servers as ruled cards on the kit -- */
.mcp-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mcp-server {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 0 18px;
  border-top: var(--rule-hair);
}

.mcp-server__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.mcp-server__id {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.mcp-form,
.mcp-secret {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.mcp-secret:empty {
  display: none;
}

.rv-foot__spacer {
  flex: 1;
}

/* -- Students: the figures as a ruled register, the links among them filter the roster -- */
.rs-kicker-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.rs-kicker-row .tt-kicker {
  flex: 1;
  min-width: 0;
}

.rs-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1.1fr 1fr 1.3fr;
  border-bottom: var(--rule-hair);
}

.rs-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 8px 16px 14px;
  border: 0;
  border-left: var(--rule-hair);
  background: none;
  font: inherit;
  text-align: left;
  text-decoration: none;
  color: var(--color-ink);
}

.rs-stat:first-child {
  border-left: 0;
  padding-left: 0;
}

.rs-stat__v {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font: var(--text-figure-md);
  letter-spacing: var(--tracking-figure-md);
  color: var(--color-ink);
  white-space: nowrap;
}

.rs-stat__u {
  font: var(--text-ui);
  color: var(--color-ink-2);
}

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

.rs-stat__k--live {
  color: var(--color-live-text);
  font: var(--text-kicker);
}

.rs-stat--link {
  cursor: pointer;
}

.rs-stat--link .rs-stat__k {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.rs-stat--link:hover .rs-stat__k {
  color: var(--color-link-hover);
}

.rs-stat--link.is-selected {
  background: var(--color-selected);
}

.rs-colnote {
  font: var(--text-note);
  letter-spacing: var(--tracking-note);
  color: var(--color-ink-3);
  padding-top: 2px;
}

/* downloads: three ruled rows (icon · what it is · what is in it · the download), the archive first as the region's primary */
.rs-dl {
  display: flex;
  flex-direction: column;
  margin-top: -4px;
}

.rs-dl__item {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  grid-template-rows: auto auto;
  gap: 4px 16px;
  align-items: start;
  padding: 12px 0;
  border-bottom: var(--rule-hair);
}

.rs-dl__icon {
  display: flex;
  color: var(--color-ink);
  grid-row: 1 / span 2;
  padding-top: 1px;
}

.rs-dl__head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  grid-column: 2;
  grid-row: 1;
}

.rs-dl__t {
  font: var(--text-button);
  color: var(--color-ink);
}

.rs-dl__fmt {
  font: var(--text-note);
  letter-spacing: var(--tracking-note);
  color: var(--color-ink-3);
  font-variant-numeric: tabular-nums;
}

.rs-dl__p {
  font: var(--text-body-sm);
  color: var(--color-ink-2);
  grid-column: 2;
  grid-row: 2;
  max-width: 400px;
}

.rs-dl__item .tt-btn {
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: center;
  justify-self: end;
}

/* how the class did: two ruled columns; topic rows with a bar; the gaps as rows */
.rs-class {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 32px;
}

.rs-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rs-topics {
  display: flex;
  flex-direction: column;
}

.rs-topic {
  display: grid;
  grid-template-columns: 1fr 72px 36px;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 6px 0;
  border-bottom: var(--rule-hair);
}

.rs-topic__t {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.rs-topic__name {
  font: var(--text-body-sm);
  color: var(--color-ink);
}

.rs-topic__req {
  font: var(--text-note);
  letter-spacing: var(--tracking-note);
  color: var(--color-ink-3);
}

.rs-topic__short {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: var(--text-label);
  letter-spacing: var(--tracking-label);
  color: var(--color-warning);
}

.rs-topic__bar {
  height: 6px;
  background: var(--color-meter-track);
  display: flex;
}

.rs-topic__fill {
  height: 6px;
  background: var(--color-chart-1);
}

.rs-topic--short .rs-topic__fill {
  background: var(--color-warning);
}

.rs-topic__n {
  font: var(--text-body-sm);
  font-variant-numeric: tabular-nums;
  color: var(--color-ink);
  text-align: right;
  white-space: nowrap;
}

.rs-gaps {
  display: flex;
  flex-direction: column;
}

.rs-gap {
  display: flex;
  flex-direction: column;
  border-bottom: var(--rule-hair);
}

.rs-gap__row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 2px 0;
  color: var(--color-ink);
}

.rs-gap__t {
  flex: 1;
  font: var(--text-body-sm);
  color: var(--color-ink);
}

.rs-gap__n {
  font: var(--text-note);
  letter-spacing: var(--tracking-note);
  color: var(--color-ink-3);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* the roster: 6 columns; cells take 4px padding so a long address fits without truncation */
.rs-roster .tt-tr {
  grid-template-columns: minmax(0, 1.9fr) 84px 72px 112px 128px 112px;
}

.rs-roster .tt-th,
.rs-roster .tt-td {
  padding-left: 4px;
  padding-right: 4px;
}

.rs-roster .tt-tr .tt-th:first-child,
.rs-roster .tt-tr .tt-td:first-child {
  padding-left: 0;
}

.rs-roster .tt-tr--2line {
  min-height: 56px;
}

.rs-roster .tt-td__primary {
  gap: 6px;
}

/* the name is the kit's 32px action link, in its own text style, drawn as a button */
.rs-roster .tt-td__name {
  font: var(--text-button-sm);
  border: 0;
  padding: 0;
  background: none;
  min-width: 0;
}

.rs-roster .tt-td__secondary {
  max-width: 100%;
}

.rs-attempt {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 5px;
  border: 1px solid var(--color-edge);
  border-radius: var(--radius-control);
  font: var(--text-micro);
  color: var(--color-ink-2);
  white-space: nowrap;
  flex: none;
}

.rs-when {
  font: var(--text-note);
  letter-spacing: var(--tracking-note);
  color: var(--color-ink-3);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.rs-actions {
  display: flex;
  align-items: center;
  gap: 2px;
}

.rs-actions .tt-btn--quiet {
  padding: 0 8px;
}

.rs-noaudio {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font: var(--text-body-sm);
  color: var(--color-ink-3);
}

.rs-blocked {
  font: var(--text-label);
  letter-spacing: var(--tracking-label);
  color: var(--color-warning);
  white-space: nowrap;
}

.rs-turns {
  align-items: flex-end;
  text-align: right;
}

.rs-turns__n {
  font: var(--text-body-sm);
  font-variant-numeric: tabular-nums;
  color: var(--color-ink);
}

.rs-turns__none {
  font: var(--text-note);
  letter-spacing: var(--tracking-note);
  color: var(--color-ink-3);
  white-space: nowrap;
}

.rs-status {
  color: var(--color-ink-2);
}

.rs-status--online {
  color: var(--color-live-text);
}

.rs-nw__eng {
  gap: 6px;
}

.rs-nw__eng .tt-type-kicker {
  font: var(--text-note);
  letter-spacing: var(--tracking-note);
  color: var(--color-ink-2);
}

.rs-nw__none {
  font: var(--text-note);
  letter-spacing: var(--tracking-note);
  color: var(--color-ink-3);
  white-space: nowrap;
}

.rs-roster .tt-table__notes {
  flex-wrap: wrap;
  gap: 6px 20px;
}

.rs-roster .tt-table__foot .pn-actions {
  gap: 20px;
}

.rs-unent {
  margin-bottom: -4px;
}

.rs-unent .tt-link--action {
  border: 0;
  padding: 0;
  background: none;
}

/* the context column's download notes (the Students panel only) */
.cx-how {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 12px;
  align-items: start;
}

.cx-how__icon {
  color: var(--color-ink-2);
  margin-top: 1px;
}

.cx-how__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cx-how__t {
  font: var(--text-kicker);
  color: var(--color-ink);
}

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

/* -- the review dialogs: a kicker and a titles column in the head, a toolbar row, ruled sections, a split foot -- */
.rv-dialog {
  width: 760px;
  max-height: calc(100dvh - 72px);
}

.rv-dialog--read {
  width: 800px;
}

.rv-dialog--prompt {
  width: 860px;
}

.rv-dialog--server {
  width: 620px;
}

.rv-dialog .tt-dialog__head {
  flex: none;
}

.rv-dialog .tt-dialog__body.rv-dialog__body {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  color: var(--color-ink);
}

.rv-dialog--server .tt-dialog__body {
  padding: 16px 24px 4px;
}

.rv-dialog .tt-dialog__foot {
  flex: none;
}

/* the overlay sits the long dialogs near the top so a 900px viewport holds them */
.modal--kit:has(.rv-dialog) {
  padding-top: 56px;
}

.rv-titles {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.rv-kicker {
  font: var(--text-label);
  letter-spacing: var(--tracking-label);
  color: var(--color-ink-2);
  margin-bottom: 2px;
}

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

.rv-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  padding-top: 2px;
}

.rv-head-actions > *,
.tt-dialog__head > .tt-icon-btn {
  flex: none;
}

.rv-head-slot:empty {
  display: none;
}

.rv-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 24px 0;
}

.rv-toolbar__meta {
  margin-left: auto;
  font: var(--text-body-sm);
  color: var(--color-ink-2);
}

.rv-toolbar__end {
  margin-left: auto;
}

.rv-sec {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 24px 0;
}

.rv-sec--last,
.rv-dialog__body > .rv-sec:last-child {
  padding-bottom: 24px;
}

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

.rv-reading {
  font: var(--text-reading);
  letter-spacing: var(--tracking-reading);
  color: var(--color-ink);
}

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

.rv-foot {
  justify-content: flex-start;
  gap: 14px;
  padding: 16px 24px 20px;
  border-top: var(--rule-hair);
}

.rv-foot__row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
}

.rv-foot__row[hidden] {
  display: none;
}

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

/* the players: a drawn native player (play, track, time) with the download beside it; all 32px */
.rv-player-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rv-player-wrap--inline {
  gap: 4px;
  margin-top: 4px;
}

.rv-player {
  display: flex;
  align-items: center;
  gap: 12px;
}

.rv-player__track {
  position: relative;
  flex: 1;
  height: 6px;
  background: var(--color-meter-track);
  cursor: pointer;
}

.rv-player__track:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-ground), 0 0 0 4px var(--color-focus);
}

.rv-player__fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 6px;
  background: var(--color-chart-1);
}

.rv-player__time {
  font: var(--text-body-sm);
  font-variant-numeric: tabular-nums;
  color: var(--color-ink-2);
  white-space: nowrap;
}

.rv-player__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

.rv-player__note[hidden] {
  display: none;
}

.rv-inline {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 320px;
  max-width: 100%;
}

/* turns: the kit turn with a 64px time column (locale time with seconds) and the speaker row above the line */
.rv-turns {
  display: flex;
  flex-direction: column;
  border-top: var(--rule-strong);
}

.rv-turns .tt-turn {
  grid-template-columns: 64px 1fr;
  padding: 12px 0 13px;
}

.rv-turns .tt-turn:first-child {
  border-top: 0;
}

.rv-turn__main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.rv-turns .tt-turn__speaker-row {
  margin-bottom: 4px;
  gap: 8px;
}

.rv-turn__meta {
  font: var(--text-note);
  letter-spacing: var(--tracking-note);
  color: var(--color-ink-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.rv-turn__speaker--system {
  color: var(--color-warning);
}

.rv-turns .tt-turn__tools {
  margin-left: -1px;
}

/* report: meta row, criterion rows, topic chips, bullet lists, the student's copy on the reading field */
.rv-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 20px;
}

.rv-meta__jump {
  margin-left: auto;
  border: 0;
  padding: 0;
  background: none;
}

.rv-released {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: var(--text-kicker);
  color: var(--color-success);
}

.rv-released--was {
  color: var(--color-ink);
}

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

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

.rv-insights {
  display: flex;
  flex-direction: column;
}

.rv-insights .tt-insight {
  padding: 12px 0;
}

.rv-insights .tt-insight:first-child {
  padding-top: 0;
}

.rv-insights .tt-insight:last-child {
  padding-bottom: 0;
}

.rv-insights .tt-insight__quote {
  flex-wrap: wrap;
  row-gap: 0;
}

.rv-crits {
  display: flex;
  flex-direction: column;
}

.rv-crit {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 16px;
  padding: 10px 0;
  border-top: var(--rule-hair);
}

.rv-crit:first-child {
  border-top: 0;
  padding-top: 0;
}

.rv-crit:last-child {
  padding-bottom: 0;
}

.rv-crit__t {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rv-crit__name {
  font: var(--text-kicker);
  color: var(--color-ink);
}

.rv-crit__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

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

.rv-chip--missed {
  color: var(--color-ink-3);
  text-decoration: line-through;
  border-color: var(--color-rule);
}

.rv-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rv-list__item {
  display: grid;
  grid-template-columns: 12px 1fr;
  gap: 8px;
  align-items: baseline;
  font: var(--text-body);
  color: var(--color-ink);
}

.rv-list__dot {
  display: block;
  width: 4px;
  height: 4px;
  background: var(--color-ink);
  margin-bottom: 4px;
}

.rv-student {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 24px;
  padding: 20px 24px 24px;
  background: var(--color-field-reading);
  border-radius: 0 0 var(--radius-overlay) var(--radius-overlay);
}

.rv-student .tt-insight {
  padding: 10px 0;
}

.rv-student .tt-insight:first-child {
  padding-top: 0;
}

.rv-student .tt-insight:last-child {
  padding-bottom: 0;
}

.rv-student__group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rv-student__foot {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 4px;
}

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

.rv-upsell {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 24px 24px;
}

.rv-upsell__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* the notice sits over a written report: a strong rule closes it before the report starts */
.rv-upsell--above {
  border-bottom: var(--rule-strong);
}

.rv-none {
  padding: 4px 24px 24px;
}

.rv-none .tt-empty {
  padding: 16px 0 0;
}

/* the instructions: the assembled text on the reading field, ruled into the panels it came from, each with an Edit link */
.rv-prompt__wrap {
  padding: 16px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rv-blocks {
  display: flex;
  flex-direction: column;
  background: var(--color-field-reading);
  padding: 4px 20px 8px;
}

.rv-blk {
  display: grid;
  grid-template-columns: 164px 1fr;
  gap: 0 20px;
  padding: 14px 0 16px;
  border-top: var(--rule-hair);
}

.rv-blk:first-child {
  border-top: 0;
}

.rv-blk__k {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.rv-blk__name {
  font: var(--text-kicker);
  color: var(--color-ink);
}

.rv-blk__from {
  font: var(--text-note);
  letter-spacing: var(--tracking-note);
  color: var(--color-ink-3);
}

/* "Edit" alone is 24px wide; the target is 32 */
.rv-blk__k .tt-link--action {
  min-height: 32px;
  min-width: 32px;
}

.rv-prompt {
  font: var(--text-body);
  color: var(--color-ink);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 0;
}

.rv-prompt__note {
  font: var(--text-note);
  letter-spacing: var(--tracking-note);
  color: var(--color-ink-3);
}

/* -- Try it yourself: a 1120 × 720 dialog; the body is the student's stage grammar (navy stage, cream transcript column) under the start gate -- */
.modal--kit.modal--tx {
  padding: 72px 16px 24px;
}

.tx-dialog {
  width: 1120px;
  height: 720px;
  max-height: calc(100dvh - 48px);
  overflow: hidden;
}

.tx-head {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 56px;
  flex: none;
  padding: 0 12px 0 24px;
  border-bottom: var(--rule-strong);
  color: var(--color-ink);
}

.tx-head__title {
  font: var(--text-title-sm);
  letter-spacing: var(--tracking-title-sm);
  color: var(--color-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.tx-head__sep {
  width: 0;
  height: 24px;
  border-left: var(--rule-hair);
  flex: none;
}

/* a plain readout beside the status word, not a control */
.tx-head .tt-countdown {
  border: 0;
  padding: 0;
  height: 24px;
}

.tx-head .tt-countdown[hidden] {
  display: none;
}

.tx-head__right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

.tx-head__cost {
  font: var(--text-body-sm);
  color: var(--color-ink-2);
  white-space: nowrap;
  margin-right: 8px;
}

.tx-head [hidden] {
  display: none;
}

.tx-body {
  position: relative;
  flex: 1;
  display: flex;
  min-height: 0;
}

.tx-stage {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.tx-plate {
  position: relative;
  flex: 1;
  min-height: 0;
  background: var(--color-surface-raised);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* the renderer contract: the canvas fills the plate; the streaming renderer puts its video, backdrop and cover beside it */
.tx-plate .stage__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.tx-plate[data-picture='false'] .stage__canvas {
  visibility: hidden;
}

.tx-chip {
  position: absolute;
  z-index: 3;
  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;
}

.tx-chip__pip {
  display: flex;
  color: var(--color-ink-2);
}

.tx-chip__pip--live {
  color: var(--color-live);
}

.tx-note {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  max-width: 420px;
  padding: 0 24px;
}

.tx-note[hidden] {
  display: none;
}

.tx-note__icon {
  display: flex;
  color: var(--color-ink-2);
}

.tx-note__icon--pause {
  color: var(--color-ink-2);
}

.tx-note__icon .tt-spinner {
  display: block;
  width: 28px;
  height: 28px;
  animation: tt-spin 0.9s linear infinite;
}

.tx-note__title {
  font: var(--text-title-sm);
  letter-spacing: var(--tracking-title-sm);
  color: var(--color-ink);
}

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

.tx-note .tt-btn {
  margin-top: 8px;
}

.tx-captions {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: 16px;
  display: flex;
  justify-content: center;
  padding: 0 24px;
  pointer-events: none;
}

.tx-captions[hidden] {
  display: none;
}

.tx-foot {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 24px 18px;
}

.tx-foot .tt-suggest[hidden] {
  display: none;
}

.tx-foot .tt-input {
  resize: none;
  overflow: hidden;
  padding-top: 11px;
  line-height: 20px;
}

.tx-mic-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.tx-side {
  width: 360px;
  flex: none;
  display: flex;
  flex-direction: column;
  border-left: var(--rule-hair);
  min-height: 0;
}

.tx-col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 56px;
  flex: none;
  padding: 0 20px 0 24px;
  border-bottom: var(--rule-strong);
}

.tx-col-head__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.tx-col-title {
  font: var(--text-title-sm);
  letter-spacing: var(--tracking-title-sm);
  color: var(--color-ink);
}

.tx-col-meta {
  font: var(--text-note);
  letter-spacing: var(--tracking-note);
  color: var(--color-ink-2);
}

.tx-private {
  padding: 0 24px;
  flex: none;
}

.tx-private .tt-banner {
  padding: 10px 0;
}

.tx-private .tt-banner__body {
  gap: 2px;
}

.tx-log {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

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

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

.tx-log .tt-turn--stage {
  padding: 8px 0;
}

.tx-log__end {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding-top: 10px;
  border-top: var(--rule-hair);
  font: var(--text-body-sm);
  color: var(--color-ink-2);
}

.tx-gate {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  background: var(--color-scrim);
}

.tx-gate[hidden] {
  display: none;
}

.tx-gate__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

/* the stage foot's height, so the card centres over the video plate and never covers the composer */
.tx-gate__cell--stage {
  padding-bottom: 108px;
}

.tx-gate .tt-briefing {
  width: 480px;
  max-width: calc(100% - 48px);
  padding: 24px 32px 24px;
  gap: 14px;
}

.tx-gate .tt-briefing__head {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tx-gate .tt-briefing__facts {
  margin-top: 2px;
}

.tx-gate .tt-briefing__fact {
  padding-top: 8px;
  padding-bottom: 8px;
}

.tx-gate .tt-briefing__steps {
  gap: 8px;
}

.tx-gate .tt-briefing__foot {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 14px;
  border-top: var(--rule-hair);
}

.tx-gate .tt-briefing__foot .tt-btn {
  flex: none;
  min-width: 160px;
}

.tx-gate .tt-briefing__foot--two .tt-btn {
  min-width: 0;
}

.tx-gate .tt-briefing__note--warn {
  color: var(--color-warning);
}

.tx-ended-icon {
  display: flex;
  color: var(--color-success);
  margin-bottom: 2px;
}

.tx-failed-icon {
  display: flex;
  color: var(--color-danger);
  margin-bottom: 2px;
}

/* -- phone (390): the panels stack; every target 44 -- */
[data-layout='mobile'] .sub {
  margin-left: 0;
  padding-left: 12px;
}

[data-layout='mobile'] .tp-head {
  display: none;
}

[data-layout='mobile'] .tp {
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 12px 8px;
  padding: 14px 0 12px;
}

[data-layout='mobile'] .tp .tt-input {
  grid-column: 2;
  grid-row: 1;
}

[data-layout='mobile'] .tp .tt-textarea {
  grid-column: 2 / 4;
  grid-row: 2;
  min-height: 76px;
}

[data-layout='mobile'] .tp .tt-icon-btn {
  grid-column: 3;
  grid-row: 1;
  width: 44px;
  height: 44px;
  margin-top: 0;
}

[data-layout='mobile'] .tp__n {
  padding-top: 12px;
}

[data-layout='mobile'] .tp__check {
  grid-column: 2 / 4;
  grid-row: 3;
  margin-top: -4px;
}

[data-layout='mobile'] .kb-head {
  grid-template-columns: 32px 1fr;
}

[data-layout='mobile'] .kb-head__cell--num,
[data-layout='mobile'] .kb-head__cell--status {
  display: none;
}

[data-layout='mobile'] .kb-row {
  grid-template-columns: 32px 1fr;
  gap: 6px 12px;
}

[data-layout='mobile'] .kb-row__tick {
  width: 44px;
  height: 44px;
  margin: -11px 0 0 -13px;
}

[data-layout='mobile'] .kb-row__meta {
  grid-column: 2;
  align-items: flex-start;
  text-align: left;
  flex-direction: row;
  gap: 8px;
}

[data-layout='mobile'] .kb-row__status {
  grid-column: 2;
}

[data-layout='mobile'] .kb-action {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

[data-layout='mobile'] .kb-guard {
  flex-direction: column;
  gap: 4px;
}

[data-layout='mobile'] .tt-field--narrow .tt-select {
  width: 100%;
}

[data-layout='mobile'] .who {
  grid-template-columns: 1fr;
  gap: 12px;
}

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

[data-layout='mobile'] .sees .tt-briefing {
  width: 100%;
}

[data-layout='mobile'] .si-card .tt-briefing__actions {
  flex-wrap: wrap;
}

[data-layout='mobile'] .si-sample {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

[data-layout='mobile'] .cn-facts {
  flex-direction: column;
}

[data-layout='mobile'] .cn-fact {
  border-left: 0;
  padding: 10px 0;
  border-top: var(--rule-hair);
}

[data-layout='mobile'] .cn-fact:first-child {
  border-top: 0;
}

[data-layout='mobile'] .cn-note {
  padding: 20px 16px 24px;
}

[data-layout='mobile'] .cn-note__grid {
  grid-template-columns: 1fr;
}

[data-layout='mobile'] .guide__toggle {
  height: auto;
  min-height: 44px;
}

[data-layout='mobile'] .tt-section-head__tools .guide__toggle {
  height: auto;
}

/* one button face on a phone: every 44px button in the editor takes the kit's
   phone size (--text-button-lg, 18px sides), as the design's phone frames and
   the Sessions phone do; a short action link gets a 44px hit box */
[data-layout='mobile'] .ed-page .tt-btn:not(.tt-icon-btn),
[data-layout='mobile'] .ed-page .tt-btn--compact {
  height: var(--size-control-phone);
  padding: 0 18px;
  font: var(--text-button-lg);
}

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

[data-layout='mobile'] .rail-left .tt-link--action {
  display: inline-flex;
  align-items: center;
}

/* the download notes follow the register on a phone (design/pages/review/students-phone) */
[data-layout='mobile'] #cx-download-notes {
  order: 5;
  padding: 20px 16px 24px;
}

[data-layout='mobile'] .rs-kicker-row {
  flex-wrap: wrap;
}

[data-layout='mobile'] .rs-kicker-row .tt-kicker {
  flex: 1 1 100%;
}

[data-layout='mobile'] .rs-kicker-row .tt-btn {
  height: var(--size-control-phone);
}

[data-layout='mobile'] .rs-stats {
  grid-template-columns: 1fr 1fr;
  border-bottom: 0;
}

[data-layout='mobile'] .rs-stat {
  border-left: 0;
  border-bottom: var(--rule-hair);
  padding: 10px 0 12px;
  min-height: 44px;
}

[data-layout='mobile'] .rs-dl__item {
  grid-template-columns: 20px 1fr;
  grid-template-rows: auto auto auto;
  gap: 6px 12px;
  align-items: start;
  padding: 14px 0;
}

[data-layout='mobile'] .rs-dl__icon {
  grid-row: 1;
}

[data-layout='mobile'] .rs-dl__p {
  grid-column: 2;
  grid-row: 2;
}

[data-layout='mobile'] .rs-dl__item .tt-btn {
  grid-column: 2;
  grid-row: 3;
  justify-self: start;
  margin-top: 4px;
  height: var(--size-control-phone);
}

[data-layout='mobile'] .rs-class {
  grid-template-columns: 1fr;
  gap: 24px;
}

[data-layout='mobile'] .rs-gap__row {
  min-height: 44px;
}

/* the roster re-flows into one card per row: name row, address and joined, the figures, the actions */
[data-layout='mobile'] .rs-roster .tt-tr--th {
  display: none;
}

[data-layout='mobile'] .rs-roster .tt-tr {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 14px 0;
  min-height: 0;
}

[data-layout='mobile'] .rs-roster .tt-td {
  padding: 0;
}

[data-layout='mobile'] .rs-roster .tt-td--stack {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

[data-layout='mobile'] .rs-roster .tt-td:first-child {
  flex: 1 1 100%;
  flex-wrap: wrap;
}

[data-layout='mobile'] .rs-roster .tt-td__name {
  min-height: 44px;
}

[data-layout='mobile'] .rs-roster .tt-td__secondary {
  flex: 1 1 100%;
  white-space: normal;
}

[data-layout='mobile'] .rs-roster .rs-turns {
  align-items: center;
  text-align: left;
}

[data-layout='mobile'] .rs-roster .tt-td:nth-child(5),
[data-layout='mobile'] .rs-roster .tt-td:nth-child(6) {
  flex: 1 1 100%;
  padding-top: 4px;
}

[data-layout='mobile'] .rs-roster .tt-td:nth-child(6) {
  flex: 0 1 auto;
}

[data-layout='mobile'] .rs-actions .tt-btn,
[data-layout='mobile'] .rs-actions .tt-icon-btn,
[data-layout='mobile'] .rs-roster .tt-td:nth-child(6) .tt-btn {
  height: var(--size-control-phone);
  min-width: var(--size-control-phone);
}

[data-layout='mobile'] .rs-noaudio {
  width: 44px;
  height: 44px;
}

[data-layout='mobile'] .tt-table__foot {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

[data-layout='mobile'] .tt-table__foot .tt-link--action {
  min-height: 44px;
}

[data-layout='mobile'] .tt-table__notes {
  flex-direction: column;
  gap: 8px;
}

/* the dialogs are bottom sheets */
[data-layout='mobile'] .modal--kit .rv-dialog,
[data-layout='mobile'] .modal--kit .tx-dialog {
  width: 100%;
  height: auto;
  max-height: 100dvh;
}

[data-layout='mobile'] .modal--kit:has(.rv-dialog),
[data-layout='mobile'] .modal--kit.modal--tx {
  padding: 0;
}

[data-layout='mobile'] .rv-dialog .tt-dialog__head {
  padding: 16px 12px 0 16px;
}

[data-layout='mobile'] .rv-head-actions {
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: 8px;
}

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

[data-layout='mobile'] .rv-head-actions .tt-btn {
  height: var(--size-control-phone);
}

[data-layout='mobile'] .rv-toolbar,
[data-layout='mobile'] .rv-sec,
[data-layout='mobile'] .rv-upsell,
[data-layout='mobile'] .rv-none,
[data-layout='mobile'] .rv-prompt__wrap,
[data-layout='mobile'] .rv-student {
  padding-left: 16px;
  padding-right: 16px;
}

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

[data-layout='mobile'] .rv-toolbar .tt-btn {
  height: var(--size-control-phone);
  width: 100%;
}

[data-layout='mobile'] .rv-toolbar__meta,
[data-layout='mobile'] .rv-toolbar__end {
  margin-left: 0;
}

[data-layout='mobile'] .rv-player {
  flex-wrap: wrap;
}

[data-layout='mobile'] .rv-player__actions {
  width: 100%;
}

[data-layout='mobile'] .rv-player__actions .tt-btn {
  flex: 1;
  height: var(--size-control-phone);
}

[data-layout='mobile'] .rv-player > .tt-icon-btn,
[data-layout='mobile'] .rv-inline > .tt-icon-btn {
  width: var(--size-control-phone);
  height: var(--size-control-phone);
}

[data-layout='mobile'] .rv-turns .tt-turn {
  grid-template-columns: 1fr;
  row-gap: 2px;
}

[data-layout='mobile'] .rv-turns .tt-turn__tools .tt-btn {
  height: var(--size-control-phone);
}

[data-layout='mobile'] .rv-foot {
  padding: 16px;
}

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

[data-layout='mobile'] .rv-foot__row .tt-btn {
  height: var(--size-control-phone);
}

[data-layout='mobile'] .rv-crit {
  grid-template-columns: 1fr;
  gap: 6px;
}

[data-layout='mobile'] .rv-blk {
  grid-template-columns: 1fr;
  gap: 8px;
}

[data-layout='mobile'] .rv-meta__jump {
  margin-left: 0;
}

[data-layout='mobile'] .rv-upsell__actions,
[data-layout='mobile'] .rv-student__foot {
  flex-direction: column;
  align-items: stretch;
}

[data-layout='mobile'] .rv-upsell__actions .tt-btn,
[data-layout='mobile'] .rv-student__foot .tt-btn,
[data-layout='mobile'] .rv-none .tt-btn {
  height: var(--size-control-phone);
}

/* Try it yourself on a phone: the stage over the transcript, both scrolling as one sheet */
[data-layout='mobile'] .tx-dialog {
  border-radius: 0;
  border: 0;
  max-height: 100dvh;
  height: 100dvh;
}

[data-layout='mobile'] .tx-head {
  height: auto;
  min-height: 56px;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 8px 8px 8px 16px;
}

[data-layout='mobile'] .tx-head__cost {
  display: none;
}

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

[data-layout='mobile'] .tx-body {
  flex-direction: column;
  overflow-y: auto;
}

[data-layout='mobile'] .tx-stage {
  flex: none;
}

[data-layout='mobile'] .tx-plate {
  min-height: 42dvh;
}

[data-layout='mobile'] .tx-foot {
  padding: 12px 16px 14px;
}

[data-layout='mobile'] .tx-side {
  width: 100%;
  flex: 1 0 auto;
  border-left: 0;
  border-top: var(--rule-hair);
}

[data-layout='mobile'] .tx-log {
  overflow: visible;
}

[data-layout='mobile'] .tx-gate {
  grid-template-columns: 1fr;
  position: fixed;
  z-index: 7;
  align-items: end;
}

[data-layout='mobile'] .tx-gate__cell {
  display: none;
}

[data-layout='mobile'] .tx-gate__cell--stage {
  display: flex;
  align-items: flex-end;
  padding: 0;
}

[data-layout='mobile'] .tx-gate .tt-briefing {
  width: 100%;
  max-width: none;
  max-height: 92dvh;
  overflow-y: auto;
  padding: 20px 16px calc(20px + env(safe-area-inset-bottom, 0px));
  border-radius: var(--radius-overlay) var(--radius-overlay) 0 0;
}

[data-layout='mobile'] .tx-gate .tt-briefing__foot {
  flex-direction: column;
  align-items: stretch;
}

[data-layout='mobile'] .tx-gate .tt-briefing__foot .tt-btn {
  width: 100%;
}

/* -- knowledge (2026 design) ------------------------------------------------ */

/*
 * The Knowledge view (design/pages/knowledge): the Sessions shell's title row
 * (`.sx-*`, above), then a ruled kicker and the register `.kv-table` -- one
 * `.tt-tr.kv-row` per base: the name cell as the link, documents, characters
 * with the page estimate, the status word (`.kb-status--*`, shared with the
 * editor's Knowledge panel and the dialog), the sessions using it, the row's
 * actions. The knowledge base dialog is `.kb-dialog` on the kit dialog; Paste
 * a document is `.kb-paste`; the viewer `.kb-viewer`. Painted by
 * paintKnowledgeList() / openKnowledgeBase() in js/instructor.js. Token-only;
 * the phone is the `[data-layout='mobile']` block at the end.
 */
#knowledge-body > .tt-kicker {
  margin-top: 30px;
}

.kv-table {
  margin-top: 18px;
}

/* 1,342 inside the 1,344 measure (the row keeps its 2px leading rule): the
   name column takes what the fixed columns leave, so a narrower frame squeezes
   the description, not the figures. */
.kv-row {
  grid-template-columns: minmax(0, 1fr) 104px 108px 232px 280px 295px;
}

.kv-row__stats {
  display: none;
}

/* one vocabulary with the dialog: Preparing… (slate, a spinner) · Searchable (green) · Could not prepare (red);
   Empty and Not checked are quiet */
.kb-status--searchable {
  color: var(--color-success);
}

.kb-status--unknown {
  color: var(--color-ink-2);
}

.kb-status .tt-spinner {
  width: 14px;
  height: 14px;
}

/* the page estimate under the number, right-aligned like the number */
.kv-chars {
  align-items: flex-end;
}

.kv-status-cell .tt-td__secondary {
  white-space: normal;
}

.kv-used {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.kv-used .kb-usedby__s {
  height: auto;
}

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

.kv-used .tt-link--action {
  margin-top: -2px;
}

.kv-row-actions {
  justify-content: flex-end;
  gap: 8px;
  padding-right: 0;
}

/* table notes: two columns, the second starting on the Status column's text edge */
.kv-foot {
  display: grid;
  grid-template-columns: minmax(0, 537px) minmax(0, 1fr);
  align-items: start;
  gap: 0;
}

.kv-foot span:first-child {
  padding-left: 10px;
  padding-right: 40px;
}

.kv-foot span:last-child {
  padding-left: 8px;
  max-width: 640px;
}

/* the empty state: the kit's block, the primary under the text, then what a base is for across the full measure */
.kv-empty {
  max-width: none;
  align-self: stretch;
}

.kv-empty .sx-ways {
  margin-top: 28px;
}

.kv-way__body {
  grid-template-columns: minmax(0, 1fr) 320px;
}

.kv-way__body p {
  max-width: 720px;
}

.kv-way__aside {
  font: var(--text-body-sm);
  color: var(--color-ink-2);
  padding-top: 2px;
}

.kv-way__aside b {
  color: var(--color-ink);
  font-weight: 600;
}

/* Between the 1440 frame and a phone the fixed columns (1,019px) outgrow the page: the register scrolls sideways. */
@media (max-width: 1180px) {
  .kv-table {
    overflow-x: auto;
  }

  .kv-row {
    min-width: 1100px;
  }
}

/* the knowledge base dialog: 720 wide, at most min(84vh, 760px); head and foot pinned, the body scrolls */
.kb-dialog {
  width: 720px;
}

.modal--kit .kb-dialog {
  max-height: min(84vh, 760px);
}

/* 40px from the top (the dashboard's other dialogs sit at 136): at the 760px cap the dialog ends at 800, above the toasts */
.modal--kit:has(.kb-dialog) {
  padding-top: 40px;
}

.kb-dialog .tt-dialog__head {
  padding-top: 16px;
  align-items: flex-start;
  flex-wrap: wrap;
  row-gap: 6px;
}

.kb-dialog__sub {
  flex-basis: 100%;
  margin: 0;
}

.kb-dialog .rv-titles {
  min-width: 0;
  flex: 1;
}

.kb-dialog .rv-head-actions {
  align-items: center;
  gap: 12px;
  margin-top: -2px;
}

.kb-dialog .rv-head-actions .tt-save {
  white-space: nowrap;
}

.modal--kit .kb-dialog__body {
  padding-top: 14px;
  padding-bottom: 0;
  gap: 0;
  min-height: 0;
  flex: 1;
}

.kb-dialog__inner {
  display: flex;
  flex-direction: column;
}

.kb-fields {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  column-gap: 20px;
}

.kb-fields .tt-field__foot {
  margin-top: -2px;
}

.kb-block {
  display: flex;
  flex-direction: column;
  margin-top: 12px;
}

.kb-block .tt-empty--inline {
  margin-top: 2px;
}

.kb-usedby {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 28px;
  padding: 4px 0 0;
}

.kb-usedby__s {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 24px;
}

.kb-usedby__name {
  font: var(--text-body);
  color: var(--color-ink);
}

.kb-docs {
  display: flex;
  flex-direction: column;
}

.kb-doc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 140px 150px;
  grid-template-areas: 'text status actions' 'detail detail detail';
  align-items: center;
  column-gap: 12px;
  padding: 6px 0 8px;
  border-top: var(--rule-hair);
}

.kb-doc:first-child {
  border-top: 0;
}

.kb-doc__text {
  grid-area: text;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding-left: 2px;
}

.kb-doc__title {
  font: var(--text-kicker);
  color: var(--color-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kb-doc__meta {
  font: var(--text-note);
  letter-spacing: var(--tracking-note);
  color: var(--color-ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kb-doc__status {
  grid-area: status;
}

.kb-doc__actions {
  grid-area: actions;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

.kb-doc__detail {
  grid-area: detail;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 4px;
  padding-left: 2px;
}

.kb-doc__detail > span {
  flex: 1;
  min-width: 0;
  font: var(--text-body-sm);
  color: var(--color-ink-2);
}

.kb-doc__detail .tt-btn,
.kb-doc__detail .tt-link--action {
  flex: none;
}

.kb-reason {
  color: var(--color-danger);
  font-weight: 600;
}

/* the dropzone: the whole dashed zone is the control (click, Enter/Space, drop); Choose files inside it is the
   visible affordance and the region's one primary */
.kb-drop {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  margin-top: 10px;
  padding: 12px 16px 14px 18px;
  border: 1px dashed var(--color-edge);
  border-radius: var(--radius-control);
  background: var(--color-input);
  cursor: pointer;
}

.kb-drop:hover,
.kb-drop:focus-visible {
  border-color: var(--color-edge-strong);
}

.kb-drop.is-over {
  border-style: solid;
  border-color: var(--color-edge-strong);
}

.kb-drop[aria-busy='true'] {
  cursor: progress;
}

.kb-drop .tt-btn {
  pointer-events: none;
  flex: none;
}

.kb-drop__row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.kb-drop__icon {
  color: var(--color-ink-2);
}

.kb-drop__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  font: var(--text-button);
  color: var(--color-ink);
}

.kb-drop__title .tt-spinner {
  width: 16px;
  height: 16px;
  color: var(--color-ink-3);
}

.kb-drop__hint {
  padding-left: 30px;
  font: var(--text-body-sm);
  color: var(--color-ink-2);
}

.kb-drop-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 10px;
  padding-bottom: 4px;
}

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

/* the footer's hairline is deliberate for this long dialog */
.kb-dialog .tt-dialog__foot {
  padding-top: 16px;
  border-top: var(--rule-hair);
}

/* the delete confirm's list of sessions */
.kb-confirm-sessions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
  padding-top: 2px;
}

/* paste a document (680) */
.kb-paste {
  width: 680px;
}

.modal--kit .kb-paste__body {
  padding-top: 14px;
  gap: 16px;
}

.kb-paste .tt-textarea {
  min-height: 256px;
}

/* the document viewer (760): the full extracted text, read-only, line breaks kept; the text scrolls, not the dialog */
.kb-viewer {
  width: 760px;
}

.modal--kit .kb-viewer {
  max-height: min(84vh, 760px);
}

.kb-viewer .tt-dialog__head {
  padding-top: 18px;
}

.kb-viewer__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  font: var(--text-body-sm);
  color: var(--color-ink-2);
}

.modal--kit .kb-viewer__body {
  display: flex;
  flex-direction: column;
  padding-top: 14px;
  gap: 0;
  overflow: hidden;
  min-height: 0;
  flex: 1;
}

.kb-viewer__text {
  flex: 1;
  min-height: 0;
  max-height: 504px;
  padding: 14px 0 8px;
  border-top: var(--rule-strong);
  font: var(--text-body-sm);
  color: var(--color-ink);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  overflow-y: auto;
}

/* -- account (2026 design) ---------------------------------------------------- */

/*
 * The Account view (design/pages/account, its gen.mjs): the title row with the
 * `.ac-who` line, the ruled *On this page* index, then the sections -- a
 * sidehead column (3 columns) beside the body (9 columns), each opening on a
 * navy rule. The parts are the kit's (`.tt-figure`, `.tt-meter`, `.tt-table`,
 * `.tt-seg`, `.tt-switch`, `.tt-banner`, `.tt-kicker`, `.tt-status`, `.tt-field`);
 * these rules place them. Painted by paintAccount() in js/instructor.js, the
 * dialogs by openPlanPicker / openCreditPicker / openChangePassword and the
 * confirms. Token-only; the phone is the `[data-layout='mobile']` block at the end.
 */
.ac-page {
  display: flex;
  flex-direction: column;
  padding: 0 var(--layout-gutter) 56px;
}

.ac-page[hidden] {
  display: none;
}

.ac-title-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding-top: 36px;
}

.ac-title {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.ac-title h1 {
  margin: 0;
  font: var(--text-title-lg);
  letter-spacing: var(--tracking-title-lg);
  color: var(--color-ink);
}

.ac-hint {
  margin: 0;
  font: var(--text-body);
  color: var(--color-ink-2);
  max-width: 760px;
}

.ac-who {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 12px;
  margin-top: 4px;
}

.ac-who[hidden] {
  display: none;
}

.ac-who__name {
  font: var(--text-kicker);
  color: var(--color-ink);
}

.ac-who__role {
  font: var(--text-body-sm);
  color: var(--color-ink-2);
  font-variant-numeric: tabular-nums;
}

/* back from Stripe: the result, under the title */
.ac-return {
  margin-top: 24px;
}

/* on this page: a ruled index of the sections, in order; every link is a 44px-tall target */
.ac-index {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 14px;
  margin-top: 26px;
  min-height: 44px;
  border-top: var(--rule-strong);
}

.ac-index__k {
  font: var(--text-label);
  letter-spacing: var(--tracking-label);
  color: var(--color-ink-2);
  margin-right: 6px;
  white-space: nowrap;
}

.ac-index .tt-link--action {
  min-height: 44px;
  min-width: 32px;
  padding: 0 4px;
  justify-content: center;
  border: 0;
  background: none;
}

/* sections: a sidehead column and the body, opening on a 1px navy rule */
.ac-section {
  display: grid;
  grid-template-columns: 318px minmax(0, 1fr);
  column-gap: 24px;
  padding: 22px 0 44px;
  border-top: var(--rule-strong);
}

.ac-section--last {
  padding-bottom: 16px;
  border-bottom: var(--rule-strong);
}

.ac-section--last .ac-kv {
  border-bottom: 0;
}

.ac-side {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-right: 24px;
}

.ac-side h2 {
  margin: 0;
  font: var(--text-title-md);
  letter-spacing: var(--tracking-title-md);
  color: var(--color-ink);
}

.ac-side h2:focus {
  outline: 0;
}

.ac-side__meta {
  margin: 0;
  font: var(--text-body-sm);
  color: var(--color-ink-2);
}

.ac-side__note {
  margin: 2px 0 0;
  font: var(--text-note);
  letter-spacing: var(--tracking-note);
  color: var(--color-ink-3);
}

.ac-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.ac-body p {
  margin: 0;
}

.ac-rule {
  height: 1px;
  background: var(--color-rule);
}

/* plan */
.ac-plan {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
}

.ac-plan__lead {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 560px;
}

.ac-plan__name-row {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}

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

.ac-status--active {
  color: var(--color-success);
}

.ac-status--warn {
  color: var(--color-warning);
}

.ac-plan__price-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font: var(--text-body-sm);
  color: var(--color-ink-2);
  font-variant-numeric: tabular-nums;
}

.ac-plan__price {
  font: var(--text-button);
  color: var(--color-ink);
}

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

.ac-plan__granted,
.ac-plan__billing {
  font: var(--text-body-sm);
  color: var(--color-ink-2);
}

.ac-plan__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex: none;
  padding-top: 6px;
  text-align: right;
}

.ac-plan__actions .tt-field__hint {
  max-width: 220px;
}

.ac-plan__gate {
  font: var(--text-note);
  letter-spacing: var(--tracking-note);
  color: var(--color-ink-3);
  max-width: 220px;
}

.ac-policy-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  padding-top: 12px;
  border-top: var(--rule-hair);
}

.ac-policy {
  font: var(--text-body-sm);
  color: var(--color-ink-2);
  max-width: 700px;
}

.ac-policy-row .tt-btn {
  flex: none;
  margin-top: -2px;
}

/* the next-invoice register: a 2px top rule, the figure, the ruled lines, the portal action */
.ac-register {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 12px;
  border-top: var(--rule-heavy);
}

.ac-register__body {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) auto;
  column-gap: 32px;
  align-items: start;
}

.ac-register__total {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ac-register__amount {
  font: var(--text-figure-md);
  letter-spacing: var(--tracking-figure-md);
  color: var(--color-ink);
  white-space: nowrap;
}

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

.ac-lines {
  display: flex;
  flex-direction: column;
  max-width: 620px;
}

.ac-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 88px;
  column-gap: 16px;
  align-items: baseline;
  padding: 7px 0;
  border-top: var(--rule-hair);
}

.ac-line:first-child {
  border-top: 0;
  padding-top: 0;
}

.ac-line__d {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  font: var(--text-body-sm);
  color: var(--color-ink-2);
}

.ac-line__row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.ac-line__k {
  font: var(--text-kicker);
  color: var(--color-ink);
}

.ac-line__v {
  font: var(--text-kicker);
  color: var(--color-ink);
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ac-line--dim .ac-line__k,
.ac-line--dim .ac-line__v {
  font: var(--text-body-sm);
  color: var(--color-ink-3);
}

.ac-line--dim .ac-line__d {
  color: var(--color-ink-3);
}

.ac-register__action {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

/* credits */
.ac-credits {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ac-credits__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.ac-credits__action {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex: none;
}

.ac-credits__hint {
  font: var(--text-body-sm);
  color: var(--color-ink-2);
  font-variant-numeric: tabular-nums;
}

.ac-credits .tt-figure {
  gap: 4px;
}

.ac-credits .tt-meter__note {
  max-width: 820px;
}

.ac-figure--faint .tt-figure__value {
  color: var(--color-ink-3);
}

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

/* this month's allowances: column-ruled meters */
.ac-allow {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.ac-allow--1 {
  grid-template-columns: 1fr;
}

.ac-allow--2 {
  grid-template-columns: 1fr 1fr;
}

.ac-allow__item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 24px;
  min-width: 0;
}

.ac-allow__item + .ac-allow__item {
  padding-left: 24px;
  border-left: var(--rule-hair);
}

.ac-allow__head {
  display: flex;
  align-items: center;
  gap: 10px;
  font: var(--text-kicker);
  color: var(--color-ink);
}

.ac-allow__gloss {
  font: var(--text-note);
  letter-spacing: var(--tracking-note);
  color: var(--color-ink-3);
  margin-top: -6px;
}

.ac-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: var(--text-label);
  letter-spacing: var(--tracking-label);
}

.ac-badge--warn {
  color: var(--color-warning);
}

.ac-badge--danger {
  color: var(--color-danger);
}

.ac-allow__hint {
  font: var(--text-body-sm);
  color: var(--color-ink-2);
  font-variant-numeric: tabular-nums;
}

.ac-allow__over {
  font: var(--text-kicker);
  color: var(--color-warning);
  font-variant-numeric: tabular-nums;
}

.ac-allow__note {
  font: var(--text-body-sm);
  color: var(--color-ink-2);
  max-width: 820px;
}

.ac-allow__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 48px;
  align-items: end;
}

.ac-allow__figure {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.ac-buckets {
  display: flex;
  align-items: stretch;
}

.ac-bucket {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 24px;
  border-left: var(--rule-hair);
  min-width: 128px;
}

.ac-bucket:last-child {
  padding-right: 0;
}

.ac-bucket__n {
  font: var(--text-kicker);
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}

.ac-bucket__n--warn {
  color: var(--color-warning);
}

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

.ac-notes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font: var(--text-body-sm);
  color: var(--color-ink-2);
  max-width: 820px;
}

.ac-notes b {
  font-weight: 600;
  color: var(--color-ink);
}

/* the fallback This month (a member instructor): ruled meter rows */
.ac-fallback {
  display: flex;
  flex-direction: column;
  max-width: 820px;
}

.ac-fallback__row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 0;
  border-bottom: var(--rule-hair);
}

.ac-fallback__row:first-child {
  padding-top: 0;
}

.ac-fallback__over {
  font: var(--text-body-sm);
  color: var(--color-warning);
}

/* add-ons */
.ac-addon {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  column-gap: 24px;
  align-items: start;
  padding: 0 0 18px;
  border-bottom: var(--rule-hair);
}

.ac-addon__text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 680px;
}

.ac-addon__title-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.ac-addon__title {
  font: var(--text-title-sm);
  letter-spacing: var(--tracking-title-sm);
  color: var(--color-ink);
}

.ac-addon__price {
  font: var(--text-ui-sm);
  color: var(--color-ink-2);
  font-variant-numeric: tabular-nums;
}

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

.ac-addon__ends {
  font: var(--text-body-sm);
  color: var(--color-ink);
}

.ac-addon__action {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  text-align: right;
}

.ac-addon__state {
  font: var(--text-note);
  letter-spacing: var(--tracking-note);
  color: var(--color-ink-3);
}

.ac-addon__foot {
  font: var(--text-body-sm);
  color: var(--color-ink-2);
  max-width: 820px;
}

/* what the plan allows: a ruled list, one name per limit, the live figure beside the ceiling */
.ac-dl {
  display: flex;
  flex-direction: column;
  border-bottom: var(--rule-hair);
  max-width: 820px;
}

.ac-dl__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px 160px;
  column-gap: 24px;
  align-items: baseline;
  min-height: 40px;
  padding: 10px 0;
  border-top: var(--rule-hair);
  font: var(--text-body-sm);
  color: var(--color-ink-2);
}

.ac-dl__row:first-child {
  border-top: 0;
  padding-top: 0;
}

.ac-dl__k {
  font: var(--text-body);
  color: var(--color-ink);
}

.ac-dl__live {
  font-variant-numeric: tabular-nums;
}

.ac-dl__v {
  font: var(--text-kicker);
  color: var(--color-ink);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* student sessions */
.ac-visits {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.ac-table-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.ac-table-tools__meta {
  font: var(--text-body-sm);
  color: var(--color-ink-2);
  font-variant-numeric: tabular-nums;
}

.ac-table .tt-tr {
  grid-template-columns: minmax(200px, 272px) minmax(160px, 1fr) 186px 104px 136px 122px;
  min-width: 908px;
}

.ac-table .tt-td--num {
  white-space: nowrap;
}

.ac-td-numstack {
  align-items: flex-end;
  text-align: right;
}

.ac-td-numstack .tt-td__primary {
  justify-content: flex-end;
  font-weight: 400;
}

.ac-now {
  color: var(--color-live-text);
}

.ac-table .tt-table__notes {
  flex-direction: column;
  gap: 4px;
}

.ac-vrow__line--phone {
  display: none;
}

/* At laptop widths the six columns need the sidehead's 342px: this section
   stacks so the table takes the page's width, and below its 908px minimum it
   scrolls sideways rather than letting the Session column collapse. */
.ac-visits {
  overflow-x: auto;
}

@media (max-width: 1360px) {
  #ac-visits {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 16px;
  }

  #ac-visits .ac-side {
    max-width: 640px;
    padding-right: 0;
  }
}

/* recording and records */
.ac-switches {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ac-switches .tt-switch {
  max-width: 820px;
}

.ac-retention {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 24px;
}

.ac-retention .tt-field {
  gap: 8px;
}

.ac-days {
  display: flex;
  align-items: center;
  gap: 4px;
}

.ac-days__cell {
  position: relative;
  display: flex;
  align-items: center;
  width: 116px;
}

.ac-days__input {
  width: 100%;
  padding-right: 44px;
  font-variant-numeric: tabular-nums;
}

.ac-days__u {
  position: absolute;
  right: 12px;
  font: var(--text-body-sm);
  color: var(--color-ink-3);
  pointer-events: none;
}

.ac-save-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.ac-save-row .tt-field__hint {
  max-width: 640px;
}

.ac-facts {
  font: var(--text-body-sm);
  color: var(--color-ink-2);
  max-width: 820px;
}

.ac-facts .tt-link--arrow {
  display: inline-flex;
  gap: 4px;
}

/* this browser: one setting (hands-free) since the appearance control went */
.ac-settings {
  display: grid;
  grid-template-columns: minmax(0, 640px);
  align-items: start;
}

.ac-settings__col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

/* sign-in */
.ac-signin {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  max-width: 820px;
}

.ac-kv {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  column-gap: 24px;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: var(--rule-hair);
  font: var(--text-body);
  color: var(--color-ink);
  flex: 1;
  min-width: 0;
}

.ac-kv__k {
  font: var(--text-label);
  letter-spacing: var(--tracking-label);
  color: var(--color-ink-2);
}

.ac-kv > span:last-child {
  overflow-wrap: anywhere;
}

.ac-signin__google {
  font: var(--text-body-sm);
  color: var(--color-ink-2);
  max-width: 820px;
}

/* the dialogs */
.ac-dialog--720 {
  width: 720px;
}

.ac-dialog--840 {
  width: 840px;
}

.ac-dialog--460 {
  width: 460px;
}

.modal--kit .ac-dialog-body {
  color: var(--color-ink);
}

.ac-conseq__line {
  margin: 0;
  padding: 8px 0;
  border-top: var(--rule-hair);
  font: var(--text-body);
  color: var(--color-ink);
}

.ac-conseq__line:first-child {
  border-top: 0;
  padding-top: 0;
}

.ac-conseq__line b {
  font-weight: 600;
}

.ac-dialog-note {
  margin: 0;
  font: var(--text-body-sm);
  color: var(--color-ink-2);
}

.modal--kit .tt-dialog__body p.ac-dialog-note {
  color: var(--color-ink-2);
}

/* change plan: one ruled row per plan */
.ac-plans {
  display: flex;
  flex-direction: column;
  margin-top: 6px;
  border-bottom: var(--rule-hair);
}

.ac-plan-row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) 200px;
  column-gap: 24px;
  align-items: start;
  padding: 16px 24px 16px 22px;
  margin: 0 -24px;
  border-top: var(--rule-hair);
  border-left: 2px solid transparent;
}

.ac-plan-row.is-current {
  border-left-color: var(--color-live-text);
  background: var(--color-selected);
}

.ac-plan-row__name {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ac-plan-row__title {
  font: var(--text-title-sm);
  letter-spacing: var(--tracking-title-sm);
  color: var(--color-ink);
}

.ac-plan-row__price {
  font: var(--text-ui-sm);
  color: var(--color-ink-2);
  font-variant-numeric: tabular-nums;
}

.ac-plan-row__current {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  font: var(--text-kicker);
  color: var(--color-live-text);
}

.ac-plan-row__text {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

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

.ac-limits {
  display: grid;
  grid-template-columns: 1fr 1fr 1.5fr;
  column-gap: 16px;
}

.ac-limit {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.ac-limit__k {
  font: var(--text-note);
  letter-spacing: var(--tracking-note);
  color: var(--color-ink-3);
}

.ac-limit__v {
  font: var(--text-kicker);
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}

.ac-plan-row__action {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
}

.ac-plan-row__action .tt-btn {
  width: 100%;
}

.ac-plan-row__action .tt-link--action {
  align-self: flex-start;
}

.ac-plan-row__note {
  font: var(--text-note);
  letter-spacing: var(--tracking-note);
  color: var(--color-ink-3);
}

.ac-dialog-policy {
  margin: 0;
  padding-top: 12px;
  font: var(--text-body-sm);
  color: var(--color-ink-2);
}

.modal--kit .tt-dialog__body p.ac-dialog-policy {
  color: var(--color-ink-2);
}

/* buy credits: a ruled list, one row per bundle */
.ac-bundles {
  display: flex;
  flex-direction: column;
  margin-top: 8px;
  border-top: var(--rule-strong);
  border-bottom: var(--rule-hair);
}

.ac-bundle {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) 240px;
  column-gap: 24px;
  align-items: center;
  padding: 14px 0;
  border-top: var(--rule-hair);
}

.ac-bundle:first-child {
  border-top: 0;
}

.ac-bundle__lead {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ac-bundle__name {
  font: var(--text-title-sm);
  letter-spacing: var(--tracking-title-sm);
  color: var(--color-ink);
}

.ac-bundle__per {
  font: var(--text-note);
  letter-spacing: var(--tracking-note);
  color: var(--color-ink-3);
}

.ac-bundle__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ac-bundle__blurb {
  font: var(--text-body);
  color: var(--color-ink);
}

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

.ac-bundle .tt-btn {
  width: 100%;
}

/* change password */
.ac-pw-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ac-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 32px;
}

.ac-label-row .tt-link--action {
  font: var(--text-body-sm);
  min-height: 32px;
  border: 0;
  background: none;
  padding: 0;
}

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

.ac-pw__cell {
  position: relative;
  display: flex;
  align-items: center;
}

.ac-pw__cell .tt-input {
  padding-right: 40px;
}

.ac-pw__eye {
  position: absolute;
  right: 2px;
}

.ac-pw-note {
  margin: 0;
  font: var(--text-body-sm);
  color: var(--color-ink-2);
}

.modal--kit .tt-dialog__body p.ac-pw-note {
  color: var(--color-ink-2);
}

.ac-pw__notice[hidden] {
  display: none;
}

.tt-link.is-disabled,
.tt-link[aria-disabled='true'] {
  color: var(--color-ink-3);
  text-decoration-color: transparent;
  pointer-events: none;
}

/* -- knowledge and account on a phone (design/pages/knowledge/phone*, account/phone) -- */

[data-layout='mobile'] #knowledge-body > .tt-kicker {
  margin-top: 24px;
  flex-wrap: wrap;
  row-gap: 4px;
}

[data-layout='mobile'] .kv-table {
  margin-top: 4px;
}

[data-layout='mobile'] .kv-row.tt-tr--th {
  display: none;
}

/* one column: the name (the link, 44px), the facts line, the status and its count, the sessions using it, Open */
[data-layout='mobile'] .kv-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  min-height: 0;
  min-width: 0;
  padding: 12px 0 14px;
}

[data-layout='mobile'] .kv-row:hover {
  background: transparent;
}

[data-layout='mobile'] .kv-row .tt-td {
  padding: 0;
}

[data-layout='mobile'] .kv-cell--name {
  min-height: 44px;
  justify-content: center;
}

[data-layout='mobile'] .kv-cell--name .tt-td__name {
  font: var(--text-button-sm);
}

[data-layout='mobile'] .kv-cell--docs,
[data-layout='mobile'] .kv-cell--chars {
  display: none;
}

[data-layout='mobile'] .kv-row__stats {
  display: block;
  font: var(--text-body-sm);
  color: var(--color-ink-2);
  font-variant-numeric: tabular-nums;
}

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

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

[data-layout='mobile'] .kv-row-actions .tt-btn {
  height: var(--size-control-phone);
  font: var(--text-button-lg);
}

[data-layout='mobile'] .kv-foot {
  grid-template-columns: 1fr;
  gap: 8px;
}

[data-layout='mobile'] .kv-foot span {
  padding: 0;
  max-width: none;
}

[data-layout='mobile'] .kv-way__body {
  grid-template-columns: 1fr;
  gap: 12px;
}

/* the knowledge base sheet: the fields stack, the add controls come before the rows, Used by last */
[data-layout='mobile'] .kb-dialog .tt-dialog__head {
  flex-wrap: wrap;
}

[data-layout='mobile'] .kb-fields {
  grid-template-columns: 1fr;
  row-gap: 14px;
}

[data-layout='mobile'] .kb-block--docs {
  order: 2;
}

[data-layout='mobile'] .kb-block--usedby {
  order: 3;
}

[data-layout='mobile'] .kb-block--docs .kb-drop {
  order: 1;
}

[data-layout='mobile'] .kb-block--docs .kb-drop-foot {
  order: 2;
  margin-bottom: 8px;
}

[data-layout='mobile'] .kb-block--docs .kb-docs,
[data-layout='mobile'] .kb-block--docs .tt-empty {
  order: 3;
}

[data-layout='mobile'] .kb-block .tt-kicker {
  flex-wrap: wrap;
  row-gap: 4px;
}

[data-layout='mobile'] .kb-doc {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: 'text status' 'detail detail' 'actions actions';
  padding: 10px 0;
}

[data-layout='mobile'] .kb-doc__title,
[data-layout='mobile'] .kb-doc__meta {
  white-space: normal;
  overflow: visible;
}

[data-layout='mobile'] .kb-doc__actions {
  justify-content: flex-start;
  margin-top: 8px;
}

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

[data-layout='mobile'] .kb-doc__detail {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

/* no dashed frame on a phone: nothing drops here; the add control is the full-width Choose files */
[data-layout='mobile'] .kb-drop {
  border-style: solid;
  padding: 12px 12px 14px;
}

[data-layout='mobile'] .kb-drop__row {
  flex-wrap: wrap;
  row-gap: 10px;
}

[data-layout='mobile'] .kb-drop__row .tt-btn {
  flex-basis: 100%;
  height: var(--size-control-phone);
  font: var(--text-button-lg);
}

[data-layout='mobile'] .kb-drop__hint {
  padding-left: 0;
}

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

[data-layout='mobile'] .kb-drop-foot .tt-btn {
  height: var(--size-control-phone);
  font: var(--text-button-lg);
}

[data-layout='mobile'] .kb-viewer__text {
  max-height: none;
}

/* the sheet's foot keeps Delete knowledge base on top and Close, the safe exit, nearest the thumb */
[data-layout='mobile'] .modal--kit .kb-dialog .tt-dialog__foot {
  flex-direction: column;
}

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

/* account on a phone: one adaptive layout, the same page stacked; 44px targets */
[data-layout='mobile'] .ac-page {
  padding: 0 16px 40px;
}

[data-layout='mobile'] .ac-title-row {
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  padding-top: 24px;
}

[data-layout='mobile'] .ac-page .tt-kicker {
  flex-wrap: wrap;
  row-gap: 4px;
}

[data-layout='mobile'] .ac-page .tt-kicker__rule {
  min-width: 48px;
}

[data-layout='mobile'] .ac-index {
  flex-wrap: wrap;
  gap: 0 8px;
  margin-top: 20px;
  padding: 4px 0;
}

[data-layout='mobile'] .ac-index__k {
  display: none;
}

[data-layout='mobile'] .ac-index .tt-link--action {
  flex: none;
  min-width: 44px;
  padding: 0 6px;
}

[data-layout='mobile'] .ac-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px 0 32px;
}

[data-layout='mobile'] .ac-side {
  padding-right: 0;
}

[data-layout='mobile'] .ac-plan {
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
}

[data-layout='mobile'] .ac-plan__actions {
  align-items: stretch;
  padding-top: 0;
  text-align: left;
}

[data-layout='mobile'] .ac-plan__actions .tt-btn,
[data-layout='mobile'] .ac-register__action .tt-btn,
[data-layout='mobile'] .ac-policy-row .tt-btn,
[data-layout='mobile'] .ac-credits__action .tt-btn,
[data-layout='mobile'] .ac-addon__action .tt-btn,
[data-layout='mobile'] .ac-save-row .tt-btn,
[data-layout='mobile'] .ac-signin .tt-btn {
  width: 100%;
  height: var(--size-control-phone);
  font: var(--text-button-lg);
}

[data-layout='mobile'] .ac-plan__actions .tt-field__hint,
[data-layout='mobile'] .ac-plan__gate {
  max-width: none;
}

[data-layout='mobile'] .ac-register__body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
}

[data-layout='mobile'] .ac-register__action {
  align-items: stretch;
}

[data-layout='mobile'] .ac-policy-row {
  flex-direction: column;
  gap: 16px;
}

[data-layout='mobile'] .ac-policy-row .tt-btn {
  margin: 0;
}

[data-layout='mobile'] .ac-credits__row {
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
}

[data-layout='mobile'] .ac-credits__action {
  align-items: stretch;
}

[data-layout='mobile'] .ac-allow {
  grid-template-columns: 1fr;
  row-gap: 24px;
}

[data-layout='mobile'] .ac-allow__item {
  padding: 0;
}

[data-layout='mobile'] .ac-allow__item + .ac-allow__item {
  padding-top: 20px;
  border-left: 0;
  border-top: var(--rule-hair);
}

[data-layout='mobile'] .ac-allow__top {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
}

[data-layout='mobile'] .ac-buckets {
  border-top: var(--rule-hair);
  padding-top: 12px;
}

[data-layout='mobile'] .ac-bucket {
  flex: 1;
  min-width: 0;
  padding: 0 8px;
}

[data-layout='mobile'] .ac-bucket:first-child {
  border-left: 0;
  padding-left: 0;
}

[data-layout='mobile'] .ac-addon {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

[data-layout='mobile'] .ac-addon__action {
  align-items: stretch;
  text-align: left;
}

[data-layout='mobile'] .ac-dl__row {
  grid-template-columns: minmax(0, 1fr) auto;
  row-gap: 2px;
}

[data-layout='mobile'] .ac-dl__live {
  grid-column: 1 / -1;
}

[data-layout='mobile'] .ac-table-tools {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

[data-layout='mobile'] .ac-table-tools .tt-seg {
  height: calc(var(--size-control-phone) + 2px);
}

[data-layout='mobile'] .ac-table-tools .tt-seg__item {
  flex: 1;
  justify-content: center;
}

[data-layout='mobile'] .ac-visits {
  overflow: visible;
}

/* the conversations as stacked rows: student and when, the address, the session and its start, then length · minutes · turns */
[data-layout='mobile'] .ac-table .tt-tr.tt-tr--th {
  display: none;
}

[data-layout='mobile'] .ac-table .tt-tr {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 3px 12px;
  min-width: 0;
  min-height: 0;
  padding: 10px 0 12px;
}

[data-layout='mobile'] .ac-table .tt-td {
  padding: 0;
}

[data-layout='mobile'] .ac-cell--student {
  flex: 1 1 60%;
  min-width: 0;
}

[data-layout='mobile'] .ac-cell--when {
  flex: none;
  align-items: flex-end;
  text-align: right;
}

[data-layout='mobile'] .ac-cell--when .tt-td__secondary {
  display: none;
}

[data-layout='mobile'] .ac-cell--session,
[data-layout='mobile'] .ac-cell--length,
[data-layout='mobile'] .ac-cell--minutes,
[data-layout='mobile'] .ac-cell--turns {
  display: none;
}

[data-layout='mobile'] .ac-vrow__line--phone {
  display: block;
  flex-basis: 100%;
  font: var(--text-body-sm);
  color: var(--color-ink-2);
  font-variant-numeric: tabular-nums;
}

[data-layout='mobile'] .ac-vrow__line--phone b {
  font-weight: 600;
  color: var(--color-ink);
}

[data-layout='mobile'] .ac-retention {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

[data-layout='mobile'] .ac-days__cell {
  width: 128px;
}

[data-layout='mobile'] .ac-days .tt-icon-btn,
[data-layout='mobile'] .ac-days .tt-input {
  height: var(--size-control-phone);
}

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

[data-layout='mobile'] .ac-save-row {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

[data-layout='mobile'] .ac-settings {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

[data-layout='mobile'] .ac-signin {
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}

[data-layout='mobile'] .ac-plan-row {
  grid-template-columns: 1fr;
  row-gap: 10px;
  margin: 0 -16px;
  padding: 14px 16px 16px 14px;
}

[data-layout='mobile'] .ac-limits {
  grid-template-columns: 1fr 1fr;
  row-gap: 8px;
}

[data-layout='mobile'] .ac-plan-row__action .tt-btn,
[data-layout='mobile'] .ac-bundle .tt-btn {
  height: var(--size-control-phone);
  font: var(--text-button-lg);
}

[data-layout='mobile'] .ac-bundle {
  grid-template-columns: 1fr;
  row-gap: 8px;
}

[data-layout='mobile'] .ac-pw__eye {
  width: var(--size-control-phone);
  height: var(--size-control-phone);
}

[data-layout='mobile'] .ac-pw__cell .tt-input {
  height: var(--size-control-phone);
  font: var(--text-body-lg);
}

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