/* The question outline and focused editor share the app's semantic palette.
   Selection is carried by spacing and a small accent, never a filled panel.
   Corners, spacing and type come from the scales in tokens.css (Work Plan items
   113-115): the teacher surface is denser than the student one, but on the same
   steps. A few control insides (a field's text inset, a button's side padding)
   sit on 12px or 20px, which are still on the 4px grid. */
#t-questions { gap: var(--sp-8); }

#t-questions .q-card {
  padding: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: none;
  min-width: 0;
}
#t-questions .q-card.is-editing { border-color: var(--border-strong); }
#t-questions .q-card::after { border-color: var(--c-accent-ink); }
/* The heading and the row's own actions side by side. The heading takes the
   room; the actions keep theirs, so a long question clamps rather than pushing
   Delete off the card. */
#t-questions .q-head-row { display: flex; align-items: center; min-width: 0; }
#t-questions .q-head { display: block; flex: 1 1 auto; min-width: 0; margin: 0; }
#t-questions .q-toggle {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 18px;
  gap: var(--sp-16);
  align-items: center;
  width: 100%;
  min-height: 78px;
  padding: var(--sp-16);
  border: 0;
  /* Just inside the card's border, so the hover fill follows its corner. */
  border-radius: calc(var(--r-card) - 1px);
  background: transparent;
  color: var(--fg);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
#t-questions .q-toggle:hover { background: var(--surface-hover, var(--bg-soft)); }
#t-questions .q-toggle:focus-visible {
  outline: 2px solid var(--c-accent-ink);
  outline-offset: -3px;
  box-shadow: none;
}
#t-questions .q-num {
  width: 32px;
  height: 32px;
  border-radius: var(--r-xs);
  color: var(--fg-muted);
  background: var(--bg-soft);
  font-family: var(--font-body);
  font-size: var(--fs-13);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
#t-questions .is-editing .q-num {
  color: var(--c-accent-ink);
  background: var(--accent-soft, var(--bg-soft));
}
#t-questions .q-summary-copy { display: block; min-width: 0; }
#t-questions .q-summary-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
  font-family: var(--font-head);
  font-size: var(--fs-16);
  line-height: 1.4;
  font-weight: 650;
}
#t-questions .q-summary-meta {
  display: block;
  margin-top: var(--sp-4);
  color: var(--fg-muted);
  font-family: var(--font-body);
  font-size: var(--fs-13);
  line-height: 1.5;
  font-weight: 400;
}
#t-questions .q-chevron {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--fg-muted);
}
#t-questions .is-editing .q-chevron { transform: rotate(180deg); }
#t-questions .q-editor {
  display: flow-root;
}
#t-questions .q-editor-content {
  display: flow-root;
  padding: var(--sp-16) var(--sp-24) var(--sp-8);
  border-top: 1px solid var(--border);
}
#t-questions .q-editor[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  #t-questions .q-chevron {
    transition: transform 220ms var(--ease-out);
  }
}
/* A segmented control: the track is a surface inside the card, and each segment
   sits one --sp-4 inside it, so the two corners stay concentric. */
#t-questions .q-types {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 var(--sp-16);
  padding: var(--sp-4);
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
#t-questions .q-type {
  min-height: 40px;
  padding: var(--sp-8) .75rem;
  font-family: var(--font-body);
  font-size: var(--fs-13);
  line-height: 1.35;
  font-weight: 550;
  border-radius: var(--r-xs);
  background: transparent;
  color: var(--fg-muted);
}
#t-questions .q-type.is-on {
  background: var(--card);
  color: var(--fg);
  box-shadow: none;
}
#t-questions .q-type:hover { color: var(--fg); }
#t-questions .q-field-label,
#t-questions .kp-head {
  display: block;
  margin: 0 0 var(--sp-8);
  font-family: var(--font-body);
  font-size: var(--fs-13);
  font-weight: 600;
  line-height: 1.4;
  color: var(--fg);
  letter-spacing: 0;
  text-transform: none;
}
#t-questions .q-text,
#t-questions .q-marks,
#t-questions .q-depth,
#t-questions .kp-input {
  background: var(--field, var(--bg));
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  color: var(--fg);
  min-height: 44px;
  box-shadow: none;
}
#t-questions .q-text {
  min-height: 90px;
  padding: .75rem;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-18);
  line-height: 1.55;
}
#t-questions .q-text:focus-visible,
#t-questions .q-marks:focus-visible,
#t-questions .q-depth:focus-visible,
#t-questions .kp-input:focus-visible {
  outline: 2px solid var(--c-accent-ink);
  outline-offset: 2px;
  border-color: var(--c-accent-ink);
  background: var(--field, var(--bg));
  box-shadow: none;
}
#t-questions .q-text::placeholder,
#t-questions .q-depth::placeholder,
#t-questions .kp-input::placeholder { color: var(--fg-muted); font-weight: 400; }
#t-questions .q-rubric {
  margin: var(--sp-24) 0 0;
  padding-top: var(--sp-24);
  border-top: 1px solid var(--border);
}
#t-questions .q-rubric-title {
  margin: 0;
  color: var(--fg);
  font-family: var(--font-head);
  font-size: var(--fs-16);
  font-weight: 650;
  line-height: 1.4;
}
/* A heading and the line that explains it read as one unit, so they sit one
   --sp-4 apart, like the lines of a paragraph; blocks below take --sp-16. */
#t-questions .q-rubric-hint {
  margin: var(--sp-4) 0 var(--sp-16);
  max-width: 65ch;
  font-size: var(--fs-13);
  line-height: 1.55;
  color: var(--fg-muted);
}
#t-questions .q-guide {
  grid-template-columns: 5rem minmax(0, 1fr);
  align-items: start;
  gap: var(--sp-16);
  margin: 0 0 var(--sp-16);
}
#t-questions .q-marks,
#t-questions .q-depth,
#t-questions .kp-input {
  padding: var(--sp-8) .75rem;
  font-family: var(--font-body);
  font-size: var(--fs-14);
  line-height: 1.5;
}
#t-questions .kp { margin: 0; }
#t-questions .kp-row {
  grid-template-columns: 20px minmax(0, 1fr) 40px;
  align-items: center;
  gap: var(--sp-8);
  margin-bottom: var(--sp-8);
}
#t-questions .kp-dot {
  width: auto;
  height: auto;
  border-radius: 0;
  color: var(--fg-muted);
  background: none;
  font-size: var(--fs-13);
  font-variant-numeric: tabular-nums;
}
#t-questions .kp-add {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--sp-8) var(--sp-4);
  margin-left: var(--sp-24);
  font-family: var(--font-body);
  font-size: var(--fs-13);
  font-weight: 600;
  color: var(--c-accent-ink);
}
#t-questions .q-beta {
  padding: 0;
  margin: var(--sp-16) 0;
  font-size: var(--fs-13);
  line-height: 1.6;
  color: var(--fg-muted);
  background: none;
}
/* The open editor's last line: filing the question somewhere else. */
#t-questions .q-editor-foot {
  display: flex;
  align-items: center;
  margin: var(--sp-16) 0 0;
  padding: var(--sp-8) 0 var(--sp-16);
  border-top: 1px solid var(--border);
}
/* Reorder, duplicate, delete: on the question's row, open or not. */
#t-questions .q-acts {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--sp-4);
  margin: 0;
  padding: 0 var(--sp-8);
  /* A hairline between the question's own toggle and the actions on it. */
  border-left: 1px solid var(--border);
}
#t-questions .icon-btn {
  width: 40px;
  height: 44px;
  border-color: transparent;
  background: transparent;
  border-radius: var(--r-btn);
  color: var(--fg-muted);
  box-shadow: none;
}
#t-questions .icon-btn:hover:not(:disabled) {
  color: var(--fg);
  border-color: var(--border);
  background: var(--surface-hover, var(--bg-soft));
}
#t-questions .icon-btn:disabled { opacity: 0.4; }
#t-questions .icon-btn svg { width: 16px; height: 16px; }
#t-questions .q-move.select-wrap { width: auto; min-width: 0; }
#t-questions .q-move.select-wrap select {
  width: 100%;
  min-height: 44px;
  max-width: 260px;
  font-family: var(--font-body);
  font-size: var(--fs-13);
  color: var(--fg-muted);
  background: var(--field, var(--bg));
  border: 1px solid var(--border);
  box-shadow: none;
}
#t-questions .q-del.is-armed {
  width: auto;
  padding: 0 var(--sp-8);
  color: var(--fg);
  background: var(--bg-soft);
  border-color: var(--border-strong);
}
#t-questions .q-type:focus-visible,
#t-questions .icon-btn:focus-visible,
#t-questions .kp-add:focus-visible,
#t-questions .q-move select:focus-visible {
  outline: 2px solid var(--c-accent-ink);
  outline-offset: 2px;
  box-shadow: none;
}
@media (max-width: 640px) {
  #t-questions .q-toggle { gap: var(--sp-8); }
  #t-questions .q-editor-content { padding: var(--sp-16) var(--sp-16) var(--sp-8); }
  #t-questions .q-types { width: 100%; }
  #t-questions .q-type { flex: 1; min-width: 0; padding: var(--sp-8); }
  #t-questions .q-guide { grid-template-columns: 1fr; }
  #t-questions .q-marks { max-width: 6rem; }
  #t-questions .q-text { font-size: var(--fs-16); }
  #t-questions .kp-row { grid-template-columns: 16px minmax(0, 1fr) 36px; }
  #t-questions .kp-del { width: 36px; }
  #t-questions .q-move.select-wrap select { max-width: 130px; }
}

/* Profile remains a named destination at every width. */
.t-account .acct-btn {
  appearance: none;
  min-height: 40px;
  padding: var(--sp-4) var(--sp-8);
  border: 1px solid var(--border);
  border-radius: var(--r-btn);
  background: var(--card);
  color: var(--fg);
  gap: var(--sp-8);
  outline: none;
  box-shadow: none;
}
.t-account .acct-btn:hover { border-color: var(--border-strong); background: var(--surface-hover); }
.t-account .acct-btn:focus { outline: none; box-shadow: none; }
.t-account .acct-btn:focus-visible {
  outline: none;
  border-color: var(--border-strong);
  box-shadow: 0 0 0 2px var(--c-accent-ink);
}

/* Coordinates come from the info trigger, rather than the header's left edge.
   A popover with paragraphs in it, so it takes the card's corner. */
#t-info-tip {
  left: auto;
  right: auto;
  width: 22rem;
  max-width: calc(100% - var(--sp-24));
  padding: var(--sp-16);
  line-height: 1.55;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--card);
  box-shadow: var(--shadow-pop);
}

/* Equal side columns keep the help links centred on the whole footer.
   Saving and connection details share the trailing column. */
.t-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-areas: "scope help status";
  column-gap: var(--sp-16);
  row-gap: var(--sp-8);
}
.t-foot .t-foot-note { grid-area: scope; min-width: 0; margin: 0; }
/* Saving and services are two lines of one status, hence the --sp-4 between
   them when they stack. */
.t-foot-status {
  grid-area: status;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "save services";
  align-items: center;
  gap: var(--sp-4) var(--sp-16);
  min-width: 0;
  min-height: 2.4rem;
}
/* Keep the live region mounted when Saved fades. The pill fits its words,
   while the cell leaves room for longer save errors without moving help. */
.t-foot .save-flag {
  grid-area: save;
  justify-self: end;
  align-self: center;
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-width: 0;
  padding: var(--sp-4) .75rem;
  line-height: 1.4;
  text-align: right;
  overflow-wrap: anywhere;
}
.t-foot .workspace-services { grid-area: services; justify-self: end; margin: 0; }
@media (max-width: 820px) {
  .t-foot {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "scope status" "help help";
  }
  .t-foot-status {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "save" "services";
  }
}
.t-account .acct-label { font: 600 var(--fs-13) var(--font-body); }
/* "Profile" and the name are different sizes, so centring them left their
   baselines apart. A grid lines both up on one baseline, but a baseline group
   sits at the top of its row, and the avatar is taller than either line, so
   the text rode high. Giving both text spans the avatar's height as their
   line height makes the shared line fill the row, which centres the glyphs
   while keeping one baseline. The avatar stays centred on its own. */
.t-account .acct-btn { display: inline-grid; grid-auto-flow: column; align-items: baseline; align-content: center; column-gap: var(--sp-8); }
.t-account .acct-avatar { align-self: center; }
.t-account .acct-label,
.t-account .t-account-who { line-height: 26px; }
.t-account .t-account-who { max-width: 15ch; font-family: var(--font-body); }
.t-account .acct-avatar svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
}
.profile-preview-note { margin: var(--sp-16) 0; color: var(--fg-muted); font-size: var(--fs-13); line-height: 1.5; }
#profile-modal .profile-zone { background: var(--bg-soft); border-color: var(--border-strong); }
#profile-modal .profile-zone-label { color: var(--fg-muted); }
#profile-modal .t-input:disabled, #profile-modal select:disabled { opacity: 0.6; cursor: not-allowed; }

/* The icon itself opens the occasional control; the editor keeps its space. */
.t-open-head .module-icon-trigger {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  padding: 0;
  background: var(--field);
  color: var(--fg-muted);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-btn);
  cursor: pointer;
  transition: background 150ms var(--ease-out), border-color 150ms var(--ease-out);
}
.module-icon-trigger:hover { background: var(--surface-hover); }
.module-icon-trigger:disabled { opacity: 0.4; cursor: default; }
/* The activity's own icon, in the text colour; the pencil badge stays muted. */
.module-icon-value { display: grid; place-items: center; color: var(--fg); }
.module-icon-value svg { width: 22px; height: 22px; }
.module-icon-trigger .module-icon-edit {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 17px;
  height: 17px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  background: var(--card);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linejoin: round;
  stroke-linecap: round;
}
/* Wider than the 440px confirmation body, so eight labelled icons fit a row.
   The labels are 13px (the type floor), and the longest single words,
   "Microphone" and "Microscope", need a tile about 85px wide: eight of those
   plus the gaps is the 800px here. The dialog scrolls once it is taller than
   the screen, which three columns on a phone can be. */
.module-icon-modal { width: min(800px, calc(100vw - 2rem)); }
.module-icon-modal .modal-body { width: min(800px, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); overflow-y: auto; padding: var(--sp-24); text-align: left; }
.module-icon-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-16); margin-bottom: var(--sp-16); }
.module-icon-head .modal-title { margin: 0; }
.module-icon-head .btn-mini { min-height: 40px; }
/* 32 icons: four full rows of eight, then six, four and three columns as the
   dialog narrows, each step keeping every tile wide enough for its label. */
.module-icon-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--sp-8); }
.module-icon-option {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  min-width: 0;
  min-height: 68px;
  padding: var(--sp-8) var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-btn);
  color: var(--fg-muted);
  background: var(--field);
  cursor: pointer;
  transition: background 150ms var(--ease-out), border-color 150ms var(--ease-out);
}
.module-icon-option:hover { color: var(--fg); background: var(--surface-hover); border-color: var(--border-strong); }
.module-icon-option[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--c-accent-ink); color: var(--fg); }
.module-icon-option[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  top: 5px;
  right: 5px;
  width: 4px;
  height: 7px;
  border: solid var(--c-accent-ink);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
.module-icon-symbol { display: grid; place-items: center; }
.module-icon-symbol svg { width: 24px; height: 24px; }
.module-icon-label { font: 500 var(--fs-13)/1.3 var(--font-body); text-align: center; }
@media (max-width: 900px) { .t-account .t-account-who { display: none; } }
@media (max-width: 830px) { .module-icon-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 640px) { .module-icon-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 520px) {
  .module-icon-modal .modal-body { padding: var(--sp-16); }
  .module-icon-option { min-height: 62px; }
  .t-account .acct-avatar { display: none; }
}
@media (max-width: 440px) { .module-icon-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) {
  .module-icon-trigger, .module-icon-option { transition: none; }
}

/* Bounds come from the rendered stress library and editor; see
   docs/library-sidebar-sizing.md. The dedicated lane never covers the scrollbar. */
#t-panel-library, #t-classes-split {
  --pane-min: 280px;
  --pane-default: 280px;
  --pane-max: 480px;
  --pane-main-min: 560px;
  --pane-grip: 32px;
}
#t-classes-split { --pane-max: 400px; --pane-main-min: 640px; }
:is(#t-panel-library, #t-classes-split)[data-resizable="true"] {
  grid-template-columns: var(--pane-width, var(--pane-default)) var(--pane-grip) minmax(0, 1fr);
}
:is(#t-panel-library, #t-classes-split)[data-resizable="true"] > .t-side { border-right: 0; }
.library-resizer { display: none; }
:is(#t-panel-library, #t-classes-split)[data-resizable="true"] > .library-resizer {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  background: var(--bg);
  cursor: col-resize;
  touch-action: none;
  user-select: none;
}
.library-resizer::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(50% - .5px); width: 1px; background: var(--border); }
.library-resizer::after { content: ""; position: relative; width: 6px; height: 48px; border-radius: var(--r-pill); background: var(--border-strong); box-shadow: 0 0 0 5px var(--bg); }
.library-resizer:is(:hover, :focus-visible)::after,
.library-resizer[data-dragging="true"]::after { background: var(--c-accent-ink); }
.library-resizer:focus-visible { outline: 2px solid var(--c-accent-ink); outline-offset: -3px; }
.is-resizing-library, .is-resizing-library * { cursor: col-resize !important; user-select: none !important; }
.t-side-head .library-width-settings { flex: none; width: 44px; height: 44px; padding: 14px; border-color: transparent; background: transparent; box-shadow: none; color: var(--fg-muted); }
.library-width-settings svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.t-side-head .library-width-settings:is(:hover, :focus-visible) { color: var(--fg); background: var(--surface-hover); }
@media (hover: hover) and (pointer: fine) {
  .library-width-settings svg { opacity: 0; }
  .t-side:is(:hover, :focus-within) .library-width-settings svg { opacity: 1; }
}
.library-width-dialog .modal-body { width: min(26rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); overflow-y: auto; text-align: left; }
.library-width-controls { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--sp-8); align-items: center; margin: var(--sp-24) 0 var(--sp-16); }
.library-width-controls output { min-width: 4.5rem; text-align: center; font: 600 var(--fs-14) var(--font-sans); font-variant-numeric: tabular-nums; }
.library-width-controls button, .library-width-dialog .modal-actions button { min-height: 44px; }
.library-width-dialog .modal-actions { justify-content: space-between; }
.library-width-range { font-size: var(--fs-13); }
@media (pointer: coarse) { #t-panel-library, #t-classes-split { --pane-grip: 44px; } }
@media (max-width: 820px) {
  :is(#t-panel-library, #t-classes-split)[data-resizable="true"] { grid-template-columns: minmax(0, 1fr); }
  :is(#t-panel-library, #t-classes-split) > .library-resizer, .t-side-head .library-width-settings { display: none; }
}

/* Identity above; creation left, checking and delivery right. Respond to the
   editor's width because either sidebar can be resized independently. */
#t-panel-library > .t-main { container: activity-editor / inline-size; }
#t-panel-library .t-open-head { grid-template-columns: 44px minmax(0, 1fr) 150px; gap: var(--sp-8); align-items: center; }
#t-panel-library .t-open-head .select-wrap { grid-column: auto; }
#t-panel-library .t-open-head .module-icon-trigger { width: 44px; height: 44px; }
#t-panel-library .t-tools { gap: var(--sp-8) var(--sp-32); align-items: center; }
#t-panel-library .t-tools-create, #t-panel-library .t-tools-delivery { display: flex; align-items: center; gap: var(--sp-8); width: auto; flex-wrap: nowrap; }
#t-panel-library .t-tools-delivery { margin-left: auto; }
#t-panel-library .t-tools button { min-height: 44px; white-space: nowrap; }
#t-panel-library .t-tools .beta-tag { margin-left: 0; }
#t-panel-library :is(#t-add-phrase, #t-try) { border-color: transparent; background: transparent; box-shadow: none; }
#t-panel-library :is(#t-add-phrase, #t-try):hover { background: var(--surface-hover); }
/* The two groups plus spacing need about 753px in the current type scale. */
@container activity-editor (max-width: 760px) {
  #t-panel-library .t-tools { gap: var(--sp-8); }
  #t-panel-library .t-tools-create, #t-panel-library .t-tools-delivery { width: 100%; }
  #t-panel-library .t-tools-delivery { justify-content: flex-end; padding-top: var(--sp-8); border-top: 1px solid var(--border); }
}
@container activity-editor (max-width: 420px) {
  #t-panel-library .t-open-head { grid-template-columns: 44px minmax(0, 1fr); }
  #t-panel-library .t-open-head .select-wrap { grid-column: 1 / -1; }
  #t-panel-library .t-tools button { flex: 1; min-width: 0; padding-inline: var(--sp-8); font-size: var(--fs-13); gap: var(--sp-4); }
  #t-panel-library .t-tools button > svg { display: none; }
}

#t-library-browser { display: contents; }
.mobile-module-browse { display: none; }
@media (max-width: 760px) {
  #t-panel-library > .t-side { max-height: none; padding: var(--sp-8) var(--sp-16); }
  .mobile-module-browse {
    display: flex;
    width: 100%;
    min-height: 44px;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-8);
    padding: var(--sp-8) .75rem;
    color: var(--fg);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r-btn);
    font: 600 var(--fs-13) var(--font-body);
    cursor: pointer;
  }
  .mobile-module-browse svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .mobile-module-browse[aria-expanded="true"] svg { transform: rotate(180deg); }
  #t-library-browser { display: none; }
  #t-library-browser.is-browsing { display: block; padding-top: var(--sp-16); }
  #t-library-browser .t-folders { max-height: min(50vh, 360px); overflow-y: auto; }
}
.preview-mode-dialog .modal-body {
  width: min(26rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  text-align: left;
}
.preview-mode-field {
  display: block;
  margin: var(--sp-16) 0 var(--sp-8);
  font: 600 var(--fs-13) var(--font-body);
}
.preview-mode-description { margin: var(--sp-8) 0 0; color: var(--fg); font-size: var(--fs-14); line-height: 1.5; }
.preview-mode-note { margin: var(--sp-16) 0 0; padding-top: var(--sp-16); border-top: 1px solid var(--border); color: var(--fg-muted); font-size: var(--fs-13); line-height: 1.5; }
.preview-mode-dialog .modal-actions .btn { min-width: 0; padding-inline: var(--sp-8); font-size: var(--fs-14); white-space: nowrap; }
.preview-mode-dialog .modal-actions .btn-ghost { flex: .8; }
.preview-mode-dialog .modal-actions .btn-primary { flex: 1.2; }
/* A question the teacher marks by hand. A fact about the question rather than a
   warning, so it takes the neutral chip: gold means "needs attention" everywhere
   else in the product, and a question with no key points is allowed. At the
   13px type floor it drops to weight 500, so the chip stays quieter than the
   activity name beside it. */
.hand-marked-badge {
  display: inline-block;
  margin-left: var(--sp-8);
  padding: 0 var(--sp-8);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--bg-soft);
  color: var(--fg-muted);
  font: 500 var(--fs-13)/1.5 var(--font-sans);
  vertical-align: .05em;
  white-space: nowrap;
}
/* The sidebar is too narrow to keep it on the count's line, and wrapping there
   left it indented by its own margin. Its own line, flush left, every time. */
.t-folder-meta > .hand-marked-badge { display: table; margin: var(--sp-4) 0 0; }

/* ── The activity's own fields ─────────────────────────────────────────────
   Above the questions, because the plan's flow starts from the learning goal.
   One metadata row, with the notes opening beneath the whole row. */
.t-activity-details { container-type: inline-size; margin: 0 0 var(--sp-16); padding: 0 0 var(--sp-16); border-bottom: 1px solid var(--border); }
.t-activity-details[hidden] { display: none; }
.t-detail-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.1fr) minmax(0, 1fr) auto; gap: var(--sp-16); align-items: end; }
.t-detail { display: flex; flex-direction: column; gap: var(--sp-8); min-width: 0; }
.t-detail-label { font: 600 var(--fs-13)/1.4 var(--font-body); color: var(--fg); }
.t-detail-optional { margin-left: var(--sp-4); font: 400 var(--fs-13)/1.4 var(--font-body); color: var(--fg-muted); }
.t-detail .t-input,
.t-rubric .t-textarea { background: var(--field, var(--bg)); border: 1px solid var(--border-strong); border-radius: var(--r-sm); }
.t-detail-rubric .rubric-scope-row { padding: 0; min-width: 0; }
.t-detail-rubric .rubric-scope-button { width: 100%; max-width: 100%; min-height: 44px; display: flex; justify-content: flex-start; text-align: left; }
.t-detail-rubric .rubric-scope-button svg { width: 18px; height: 18px; }
.t-rubric { margin: 0; }
.t-rubric-body { padding-top: var(--sp-8); }
.t-rubric-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
  min-height: 44px;
  padding: var(--sp-8);
  border: 1px solid transparent;
  border-radius: var(--r-btn);
  background: none;
  color: var(--fg);
  font: 600 var(--fs-13)/1.4 var(--font-body);
  text-align: left;
  cursor: pointer;
}
.t-rubric-toggle:hover { background: var(--bg-soft); }
.t-rubric-toggle svg {
  flex: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; color: var(--fg-muted);
}
.t-rubric-toggle[aria-expanded="true"] svg { transform: rotate(90deg); }
.t-rubric-toggle:focus-visible { outline: 2px solid var(--c-accent-ink); outline-offset: 2px; }
.t-rubric .t-textarea { min-height: 5.5rem; }
.t-detail-hint { margin: var(--sp-8) 0 0; color: var(--fg-muted); font-size: var(--fs-13); line-height: 1.5; }
@media (prefers-reduced-motion: no-preference) {
  .t-rubric-toggle svg { transition: transform 220ms var(--ease-out); }
}
@container (max-width: 850px) {
  .t-detail-row { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .t-rubric-toggle { justify-self: start; }
}
@container (max-width: 520px) {
  .t-detail-row { grid-template-columns: minmax(0, 1fr) auto; }
  .t-detail-goal, .t-detail-subject { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  /* Below this the row's actions drop under the question rather than squeezing
     its words into a sliver beside four buttons. */
  #t-questions .q-head-row { flex-wrap: wrap; }
  #t-questions .q-head { flex-basis: 100%; }
  #t-questions .q-acts { width: 100%; justify-content: flex-end; padding: 0 var(--sp-8) var(--sp-8); border-left: 0; }
  /* The move menu has the whole last line to itself, so its label is not cut off. */
  #t-questions .q-editor-foot .q-move.select-wrap { width: 100%; }
  #t-questions .q-editor-foot .q-move.select-wrap select { max-width: none; }
}
/* A unit's icon in the "Move to unit" menu, kept out of the item's spoken name. */
.t-menu-ico { display: grid; place-items: center; flex: none; color: var(--fg-muted); }
.t-menu-ico svg { width: 16px; height: 16px; stroke-width: 1.75; }

.profile-export-note { margin: var(--sp-8) 0 0; color: var(--fg-muted); font-size: var(--fs-13); line-height: 1.5; }

/* ── First steps ───────────────────────────────────────────────────────────
   Three numbered steps across the top for a new teacher. The current one is
   the only card with an edge and its actions showing; done ones carry a tick. */
.t-app > .first-steps { flex: none; }
.first-steps { padding: var(--sp-16) var(--sp-24); background: var(--card); border-bottom: 1px solid var(--border); }
.first-steps[hidden] { display: none; }
.first-steps-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-16); margin: 0 0 var(--sp-8); }
.first-steps-title { margin: 0; font: 650 .95rem/1.4 var(--font-head); color: var(--fg); letter-spacing: -.01em; }
/* start, not stretch: a step that is done or waiting is one line, and three
   cards as tall as the one with buttons in it read as three empty boxes. */
.first-steps-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: var(--sp-16); margin: 0; padding: 0; list-style: none; }
.first-step {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-8);
  min-width: 0;
  padding: var(--sp-16);
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  color: var(--fg-muted);
}
.first-step.is-current { background: var(--card); border-color: var(--c-accent-ink); color: var(--fg); }
.first-step-mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: var(--r-xs);
  background: var(--card);
  border: 1px solid var(--border);
  font: 600 var(--fs-13)/1 var(--font-body);
  font-variant-numeric: tabular-nums;
}
.first-step.is-current .first-step-mark { background: var(--accent-soft); border-color: transparent; color: var(--c-accent-ink); }
.first-step.is-done .first-step-mark { background: var(--c-accent-ink); border-color: transparent; color: var(--card); }
.first-step-mark svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.first-step-body { min-width: 0; }
/* The title's small top margin centres its first line on the 28px mark. */
.first-step-title { margin: var(--sp-4) 0 0; font: 600 var(--fs-14)/1.4 var(--font-body); overflow-wrap: anywhere; }
.first-step.is-done .first-step-title { font-weight: 600; }
.first-step-note { margin: var(--sp-4) 0 var(--sp-8); color: var(--fg-muted); font-size: var(--fs-13); line-height: 1.5; }
.first-step-actions { display: flex; flex-wrap: wrap; gap: var(--sp-8); }
.first-step-actions .btn-mini { display: inline-flex; align-items: center; gap: var(--sp-4); }
@media (max-width: 760px) {
  .first-steps { padding: var(--sp-16); }
  .first-steps-list { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); }
  /* Only the current step keeps its full card; the others shrink to a line. */
  .first-step:not(.is-current) { padding: var(--sp-8) var(--sp-16); }
}