/* Practice Studio clarity layer (assets/studio/clarity.js) — shared by the generated studios and the hand-built Unit 4
   pages. Problem-first layout: one slim header row (title, pathway, stars/progress, Menu), a context row of small chips
   (I can…, Mission, Word bank) and the section heading with its problem dots on one line. Tokens only, so every world
   and both themes recolour it; text pairs reuse the reading pairs already proven in studio-worlds.css. */

/* bilingual labels for the hand-built pages too (studio-v2.css has the same rule for the generated ones) */
.t-es {
  display: none;
}
body.show-es .t-es {
  display: inline;
}
body.show-es .t-en {
  display: none;
}

/* the trail is sticky: anything scrolled or tabbed into view lands below it, never under it (WCAG 2.4.11) */
html { scroll-padding-top: 72px; }

/* A consistent classroom palette across lessons. The previous world-by-world palette made
   navigation and controls change color unpredictably and several combinations were muddy. */
body[data-world][data-theme="light"] {
  --brand: #164e63;
  --brand-dark: #123247;
  --brand-tint: #e8f3f5;
  --brand-line: #a9c7d0;
  --sun: #e8b64a;
  --sun-deep: #8a6515;
  --sun-tint: #fff6dc;
  --sun-ink: #51400f;
  --paper: #f3f6f8;
  --well: #e9eef2;
  --surface: #ffffff;
  --surface-soft: #f7f9fb;
  --border: #cbd5de;
  --border-strong: #687d8d;
  --ink: #182532;
  --ink-muted: #405363;
  --ink-light: #596d7d;
  --ok: #28785f;
  --ok-tint: #e7f4ee;
  --ok-line: #a6d2bf;
  --bad: #a83c3c;
  --bad-tint: #fbecec;
  --bad-line: #e4b2b2;
  --warn: #9a6a08;
  --warn-tint: #fff5db;
  --warn-line: #dfc276;
  --font-display: system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius-sm: 7px;
  --radius-md: 11px;
  --radius-lg: 15px;
  --shadow-card: 0 2px 8px rgba(18, 50, 71, .08);
  color-scheme: light;
}
body[data-world][data-theme="dark"] {
  --brand: #80cbd3;
  --brand-dark: #10232e;
  --brand-tint: #24434e;
  --brand-line: #547b86;
  --sun: #edc15e;
  --sun-deep: #8d6a1d;
  --sun-tint: #3e3520;
  --sun-ink: #ffe8a8;
  --paper: #111d26;
  --well: #172630;
  --surface: #1c2d38;
  --surface-soft: #243743;
  --border: #405562;
  --border-strong: #8296a2;
  --ink: #f1f5f7;
  --ink-muted: #c4d0d8;
  --ink-light: #a8bac5;
  --ok: #68bf99;
  --ok-tint: #1b3a32;
  --ok-line: #437a66;
  --bad: #f08d8d;
  --bad-tint: #402b31;
  --bad-line: #8c5960;
  --warn: #edc15e;
  --warn-tint: #3e3520;
  --warn-line: #897644;
  --on-brand: #10232e;
  --on-sun: #10232e;
  --on-ok: #10232e;
  --on-bad: #10232e;
  --font-display: system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius-sm: 7px;
  --radius-md: 11px;
  --radius-lg: 15px;
  --shadow-card: 0 2px 10px rgba(0, 0, 0, .22);
  color-scheme: dark;
}
body[data-world] .app-header {
  background-image: none;
}
body[data-world][data-theme="light"] .tab-list::before,
body[data-world][data-theme="light"] .tab-list::after {
  height: 3px;
  border-radius: 0;
}
body[data-world][data-theme="light"] .tab-btn[aria-selected="true"] .tab-badge {
  box-shadow: 0 0 0 2px var(--surface);
}
body[data-world][data-theme="light"] .target-chip {
  background: var(--brand-tint);
  border-left-color: var(--brand);
}

/* Offer one clear starting action. The full lesson and interactive model are already
   available in the lesson links/menu, so they do not need to compete here. */
.pathway-intro .pathway-actions [data-path-full] {
  display: none;
}
.pathway-intro .pathway-actions {
  gap: .45rem;
}

/* ---- header: the Menu disclosure ---------------------------------------------------------------------------- */
.studio-menu-wrap {
  position: relative;
}
.studio-menu-btn {
  white-space: nowrap;
}
.studio-menu-btn[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.16);
  border-color: #fff;
}
.studio-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 120;
  min-width: 240px;
  max-width: min(320px, calc(100vw - 24px));
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  background: var(--surface);
  color: var(--ink);
  border: 2px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: 0 14px 34px -12px rgba(0, 0, 0, 0.45);
}
.studio-menu[hidden] {
  display: none;
}
.studio-menu .studio-menu-item.top-btn,
.studio-menu #comfort-btn.top-btn {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--ink);
  border: 2px solid transparent;
  border-radius: var(--radius-sm, 8px);
  min-height: 44px;
  padding: 6px 10px;
  font-size: 0.95rem;
  font-weight: 700;
  box-shadow: none;
  font-family: inherit;
}
.studio-menu .studio-menu-item.top-btn:hover {
  background: var(--brand-tint);
  border-color: var(--brand-line);
}
.studio-menu .studio-menu-item.top-btn[aria-pressed="true"] {
  background: var(--brand-tint);
  border-color: var(--brand);
  color: var(--ink);
}
.studio-menu .studio-menu-item.bonus-btn {
  color: var(--ink);
}
.studio-menu #reset-all-btn {
  border-top-color: var(--border);
  border-radius: 0 0 var(--radius-sm, 8px) var(--radius-sm, 8px);
  margin-top: 4px;
}
.studio-menu .ewl-hud-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  padding: 6px 10px 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
  color: var(--ink-muted);
  font-size: 0.9rem;
}
.studio-menu .ewl-hud-stats strong {
  color: var(--ink);
}
#think-btn.studio-menu-item[data-count]:not([data-count=""])::after {
  position: static;
  margin-left: auto;
}

/* the pathway is a segmented control in the dark header (chrome.js puts #ewl-hud there) */
.header-actions .ewl-hud {
  display: flex;
  padding: 0;
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 0.88rem;
}
.header-actions .ewl-hud-path {
  gap: 0;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-radius: 999px;
  overflow: hidden;
}
.header-actions .ewl-hud-opt {
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #fff;
  min-height: 40px;
  padding: 4px 12px;
}
.header-actions .ewl-hud-opt + .ewl-hud-opt {
  border-left: 2px solid rgba(255, 255, 255, 0.3);
}
.header-actions .ewl-hud-opt[aria-checked="true"] {
  background: var(--sun);
  color: var(--brand-dark);
}
.header-actions .ewl-hud-opt:focus-visible {
  outline-offset: -4px;
}
.show-es .header-actions .ewl-hud-opt .es-text {
  font-size: 0.72rem;
  color: inherit;
  margin-top: 0;
}
.header-actions .score-pill {
  padding: 6px 12px;
}
.header-actions .top-btn.stars-btn {
  box-shadow: 0 3px 0 var(--sun-deep);
}

/* ---- the context row: small chips that open in place ---------------------------------------------------------- */
.studio-context {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 12px;
}
.studio-context > .mission-card,
.studio-context > .glossary {
  margin: 0;
  flex: 0 1 auto;
  box-shadow: none;
}
.studio-context > .mission-card > summary,
.studio-context > .glossary > summary {
  min-height: 44px;
  padding: 6px 14px;
  gap: 8px;
  font-size: 0.95rem;
}
.studio-context > .mission-card {
  border-left-width: 6px;
}
.studio-context > .mission-card > summary .world-glyph {
  font-size: 1.2rem;
}
.studio-context > details[open] {
  flex: 1 1 100%;
  order: 10;
}
.studio-context > details > summary::after {
  content: "▸";
  margin-left: 6px;
  font-size: 0.8em;
  color: var(--ink-light);
}
.studio-context > details[open] > summary::after {
  content: "▾";
}
.studio-context > .glossary > summary {
  list-style: none;
}
.studio-context > .glossary > summary::-webkit-details-marker {
  display: none;
}

/* the lesson's "I can…" target: always shown, never clamped; it takes the room the chips leave */
.target-chip {
  flex: 1 1 340px; display: flex; align-items: flex-start; gap: 8px; margin: 0; min-height: 44px;
  padding: 9px 14px; border-left: 5px solid var(--brand); border-radius: var(--radius-md);
  background: var(--brand-tint); color: var(--ink); font-size: 0.95rem; font-weight: 700; line-height: 1.35;
}
.target-chip .target-icon { flex: 0 0 auto; line-height: 1.35; }
.target-chip .target-text { min-width: 0; overflow-wrap: anywhere; }

/* ---- the section heading carries its problem dots (generated studios) ------------------------------------------ */
.topic-strip > .stepper-bar {
  margin: 0;
  padding: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
  flex: 0 1 auto;
}
.topic-strip > .stepper-bar .step-dot {
  min-width: 40px;
  height: 40px;
}

@media (max-width: 840px) {
  .header-actions .ewl-hud-opt {
    padding: 4px 9px;
  }
}
@media print {
  .studio-menu-wrap,
  .studio-context > .mission-card {
    display: none !important;
  }
}

/* one header row on a laptop: the title wraps inside its own column instead of pushing the controls to a second row */
@media (min-width: 1000px) {
  .header-wrap { flex-wrap: nowrap; max-width: 1240px; }
  .header-wrap > .brand { flex: 1 1 auto; }
  .header-wrap > .header-actions { flex: 0 0 auto; flex-wrap: nowrap; }
}

/* ---- Word bank chip: size and a preview of the first terms ------------------------------------------------------ */
.glossary > summary .wb-count {
  margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: var(--brand-tint); color: var(--ink);
  font-size: 0.8rem; font-weight: 800; white-space: nowrap;
}
.glossary > summary .wb-preview {
  margin-left: 8px; color: var(--ink-muted); font-weight: 600; font-size: 0.88rem;
  max-width: 34ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.glossary[open] > summary .wb-preview { display: none; }
@media (max-width: 600px) {
  .glossary > summary .wb-preview { display: none; }
}

/* ---- hint ladder: "Hint k of n" on every rung, the next rung and how many follow on the button ------------------- */
.hint-list { list-style: none; padding-left: 0; display: grid; gap: 6px; }
.hint-tag {
  display: inline-block; margin-right: 6px; padding: 0 8px; border-radius: 999px;
  background: var(--sun-tint); color: var(--sun-ink); border: 1px solid var(--sun);
  font-size: 0.8rem; font-weight: 800; white-space: nowrap;
}
.hint-left { margin-left: 10px; color: var(--ink-muted); font-size: 0.88rem; font-weight: 600; }
.story-hint strong .t-en, .story-hint strong .t-es { margin-right: 6px; }

/* ---- feedback anatomy: confirm · why it works · watch for / confirm · trap · guiding line --------------------------- */
.feedback-box .fb-line { margin: 0; }
.feedback-box .fb-line + .fb-line { margin-top: 6px; }
.feedback-box .fb-label {
  display: inline-block; margin-right: 6px; font-size: 0.78rem; font-weight: 800;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.feedback-box .fb-confirm .es-text { display: none; }
body.show-es .feedback-box .fb-confirm .es-text { display: inline; margin-left: 6px; }
.feedback-box .fb-trap strong { font-weight: 800; }
.feedback-box .next-btn { margin-top: 10px; }

/* ---- context vs ask: the setup reads quietly, the question stands out (assets/studio/typeset.js) ------------------ */
.item-q .q-context { color: var(--ink-muted); font-weight: 600; }
.item-q .q-ask { display: block; margin-top: 4px; color: var(--brand); font-weight: 800; }
.item-q .es-text .q-ask { margin-top: 2px; }

/* ---- stacked fractions: digit over digit, the words for screen readers live beside them in .sr-only ---------------- */
.frac { display: inline-flex; align-items: center; gap: 0.15em; vertical-align: middle; white-space: nowrap; margin: 0 0.05em; }
.frac-v {
  display: inline-flex; flex-direction: column; align-items: center; line-height: 1;
  font-size: 0.9em; font-variant-numeric: tabular-nums;
}
.frac-n { padding: 0 0.12em 0.08em; border-bottom: 0.09em solid currentColor; }
.frac-d { padding: 0.08em 0.12em 0; }
.frac-w { font-size: 1em; }
@media (forced-colors: active) {
  .frac-n { border-bottom-color: CanvasText; }
}

/* ---- exit card: what you can do now · how it went · one next step ------------------------------------------------ */
.complete-banner:has(.exit-card) {
  display: block; padding: 18px 22px; text-align: left; background: var(--surface); color: var(--ink);
  border: 3px solid var(--ok); font-family: inherit; font-size: 1rem; font-weight: 400;
}
.complete-banner:has(.exit-card)[hidden] { display: none; }
.exit-banner { margin: 0 0 8px; }
.exit-card .exit-title { margin: 0 0 8px; font-size: 1.25rem; color: var(--brand); }
.exit-card .exit-title:focus { outline: none; }
.exit-card .exit-title:focus-visible { outline: 3px solid var(--sun-deep); outline-offset: 3px; }
.exit-card .exit-target { margin: 0 0 10px; font-weight: 700; color: var(--ink); }
.exit-card .exit-sections {
  list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 8px;
}
.exit-card .exit-sections li {
  padding: 2px 10px; border-radius: 999px; background: var(--ok-tint); border: 1px solid var(--ok-line);
  color: var(--ink); font-weight: 700; font-size: 0.9rem;
}
.exit-card .exit-tally { margin: 0 0 12px; color: var(--ink); }
.exit-card .exit-step { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; }
.exit-card .exit-step-label {
  font-size: 0.78rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-muted);
}
.exit-card .exit-next { text-decoration: none; }

/* ---- anonymous Class Pulse code and the Family Window ------------------------------------------------------------ */
.pulse-box {
  margin-top: 14px; padding: 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  background: var(--surface-soft); color: var(--ink);
}
.pulse-label { margin: 0 0 8px; }
.pulse-note { display: block; margin-top: 3px; color: var(--ink-muted); font-size: 0.94rem; }
.pulse-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.pulse-code {
  display: block; max-width: 100%; padding: 6px 8px; overflow-wrap: anywhere; border: 1px solid var(--border);
  border-radius: 4px; background: var(--surface); color: var(--ink); font-size: 0.95rem; letter-spacing: 0.06em;
}
.pulse-code:focus-visible, .pulse-box button:focus-visible { outline: 3px solid var(--sun-deep); outline-offset: 3px; }
.pulse-box button { min-height: 44px; padding: 7px 12px; }
.pulse-ask { margin: 12px 0 0; }
.pulse-idea { display: block; margin-top: 4px; color: var(--ink-muted); }
@media (forced-colors: active) {
  .pulse-box, .pulse-code { border-color: CanvasText; }
}

/* ---- tighter vertical rhythm above the first problem ------------------------------------------------------------ */
.main-container { padding-top: 10px; }
.studio-context { margin-bottom: 10px; }
.topic-strip { margin-bottom: 10px; }
.glossary > summary .wb-preview { max-width: 18ch; }
/* the first-visit briefing reads as one short paragraph: the world's tagline runs into its story */
.studio-context > .mission-card .mission-body { padding: 0 16px 12px; }
.studio-context > .mission-card .mission-body p { display: inline; margin: 0; font-size: 0.98rem; }
.studio-context > .mission-card .mission-body p + p { margin-left: 0.35em; }
.studio-context > .mission-card .mission-body .es-text { display: none; }
body.show-es .studio-context > .mission-card .mission-body .es-text { display: block; margin: 6px 0 0; }

/* ---- phone: stage tabs wrap to rows of three so a name never splits mid-word ------------------------------------- */
@media (max-width: 560px) {
  .tab-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tab-name, .tab-desc { overflow-wrap: break-word; hyphens: manual; }
}

/* ---- the Word bank (moved here from studio-v2.css so the hand-built Unit 4 pages, which do not load it, share it) ---- */
.glossary {
  margin: 0 0 22px;
  background: var(--surface-soft);
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
}
.glossary > summary {
  cursor: pointer;
  padding: 10px 16px;
  font-weight: 800;
  color: var(--brand);
  min-height: 44px;
  display: flex;
  align-items: center;
}
.glossary dl {
  margin: 0;
  padding: 4px 18px 14px;
  display: grid;
  gap: 8px;
}
.glossary dt {
  font-weight: 800;
  color: var(--brand);
}
.glossary dd {
  margin: 0 0 2px;
  color: var(--ink-muted);
}

/* ---- seals, repair, optional confidence (docs/specs/studio-v3-w2.md) ------------------------------------------------- */
.seal-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.seal-row { display: flex; gap: 12px; align-items: flex-start; padding: 10px 14px; background: var(--surface-soft); border: 2px solid var(--border); border-radius: var(--radius-md); }
.seal-ring { flex: 0 0 auto; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 3px solid var(--border-strong); font-size: 1.4rem; line-height: 1; color: var(--ink); background: var(--surface); }
.seal-ring.seal-1 { border-color: var(--sun-deep); }
.seal-ring.seal-2 { border-color: var(--brand); color: var(--brand); }
.seal-ring.seal-3 { border-color: var(--ok); background: var(--ok-tint); color: var(--ok-ink); }
.seal-word { display: block; font-size: 0.85rem; font-weight: 800; color: var(--ink-muted); }
.seal-next, .seal-note { margin: 4px 0 0; color: var(--ink-muted); }
.exit-seals { margin: 8px 0 0; font-weight: 700; }
.repair-stage { margin-top: 14px; border-style: dashed; }
.repair-note { margin: 10px 0 0; }
.repair-btn { margin-top: 8px; }


.conf-opt { font-weight: 600; }


/* ---- Trap Book and tier two (docs/specs/studio-v3-w3.md) ----------------------------------------------------------- */
.reflect-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 0; padding: 10px 14px; background: var(--surface-soft); border: 2px dashed var(--border-strong); border-radius: var(--radius-md); }
.reflect-q { flex: 1 1 100%; margin: 0; color: var(--ink-muted); font-weight: 700; }
.reflect-thanks { margin: 0; color: var(--ink-muted); font-weight: 700; }
.trap-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.trap-card { display: flex; gap: 12px; align-items: flex-start; padding: 10px 14px; background: var(--surface-soft); border: 2px solid var(--border); border-radius: var(--radius-md); }
.trap-card.is-tamed { border-color: var(--ok); background: var(--ok-tint); }
.trap-mark { flex: 0 0 auto; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 3px solid var(--border-strong); background: var(--surface); color: var(--ink); font-weight: 800; }
.trap-card.is-tamed .trap-mark { border-color: var(--ok); color: var(--ok-ink); background: var(--ok-tint); }
.trap-card p { margin: 4px 0 0; }
.trap-counts, .trap-lessons { color: var(--ink-muted); font-size: 0.9rem; font-weight: 700; }
.trap-status.trap-tamed { color: var(--ok-ink); font-weight: 800; }

/* ---- worked examples (docs/specs/studio-v3-w3.md, W3b) ------------------------------------------------------------- */
.example-offer { margin: 8px 0 0; color: var(--ink-muted); font-weight: 700; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.example-card { margin: 12px 0; padding: 14px 18px; background: var(--brand-tint); border: 2px dashed var(--brand); border-radius: var(--radius-md); }
.example-title { margin: 0 0 8px; font-size: 1.05rem; color: var(--brand); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.example-q .item-q { margin: 6px 0; }
.example-steps { margin: 8px 0; padding-left: 1.4em; display: grid; gap: 4px; }
.example-answer { margin: 8px 0 4px; }
.example-why { margin: 0 0 10px; color: var(--ink-muted); }
.example-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.example-try-stage { margin-top: 12px; }

/* ---- "Which move?" (docs/specs/studio-v3-w3.md, W3c): the work so far above the question ------------------------------- */
.move-work { margin: 8px 0 12px; padding: 10px 16px; background: var(--surface-soft); border: 2px solid var(--border); border-left: 6px solid var(--brand); border-radius: var(--radius-md); }
.move-label { margin: 0 0 4px; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-muted); }
.move-lines { margin: 0; padding-left: 1.4em; display: grid; gap: 2px; font-size: 1.05rem; color: var(--ink); }

/* ---- explore first (docs/specs/studio-v3-w4.md) ---------------------------------------------------------------------- */
.chip-explore { background: var(--brand-tint); color: var(--brand); border: 2px solid var(--brand); font-weight: 800; }

/* ---- attempts (assets/studio/attempts.js): the pause after a miss, Look closer, and the fresh problem that proves a guess ---- */
.hold-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 0; padding: 10px 14px; background: var(--surface-soft); border: 2px dashed var(--border-strong); border-radius: var(--radius-md); }
.hold-q { flex: 1 1 100%; margin: 0; color: var(--ink-muted); font-weight: 700; }
.hold-chip { min-height: 44px; }
.look-closer { margin: 10px 0 0; padding: 10px 14px; border-left: 6px solid var(--sun); background: var(--surface-soft); border-radius: var(--radius-md); color: var(--ink); }
.prove-box { margin: 12px 0 0; padding: 12px 16px; background: var(--brand-tint); border: 2px solid var(--brand); border-radius: var(--radius-md); }
.prove-box p { margin: 0 0 10px; color: var(--ink); }
.step-dot.owed { border-style: dashed; border-color: var(--sun); color: var(--ink); }

/* ---- colour discipline (v4): the floating Math Workbench button is a world colour, not a fixed teal that clashes with every palette ---- */
body:has(.app-header) #nsr-root #nsr-workbench,
body:has(.app-header) a[aria-label^="Open the Math Workbench"] {
  background: var(--brand-dark, #1b2c3f) !important;
  color: #fff !important;
  border-color: var(--brand-line, rgba(255, 255, 255, 0.7)) !important;
  box-shadow: var(--shadow-card, 0 4px 14px rgba(0, 0, 0, 0.25)) !important;
}

/* The shared Save/Resume dark rule uses a fixed blue. Match the lesson world instead so its foreground
   token and the launcher fill keep the same high contrast as the rest of the student HUD. */
body:has(.app-header)[data-theme="dark"] #nsr-root {
  --nsr-accent: var(--brand);
  --nsr-accent-fg: var(--on-brand, var(--paper));
}

/* ==== studio v4 platform layout (docs/audits/studio-v4/brief-x-platform.md; behaviour in assets/studio/focus.js) ========
   Tokens only. No backticks in comments. One block, appended, so other workers' rules above stay untouched. */

/* ---- short laptop screens (Chromebook 1366x768): the section trail scrolls away instead of costing 62px of every screen */
@media (max-height: 800px) and (min-width: 401px) {
  .tab-bar {
    position: static;
  }
  html {
    scroll-padding-top: 12px;
  }
}

/* ---- phones: the five sections are ONE row; only the open section shows its name, the others keep an accessible name */
@media (max-width: 400px) {
  /* Let the section trail scroll away on phones so it cannot cover a lab Check control near the top edge. */
  html body .tab-bar {
    position: static;
  }
  html body .tab-bar .tab-list {
    display: flex;
    flex-wrap: nowrap;
    gap: 2px;
    padding: 4px 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }
  html body .tab-bar .tab-list::-webkit-scrollbar {
    display: none;
  }
  html body .tab-bar .tab-list::before,
  html body .tab-bar .tab-list::after {
    display: none;
  }
  html body .tab-bar .tab-btn {
    flex: 0 0 auto;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 6px;
    min-width: 44px;
    min-height: 44px;
    padding: 2px 4px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
    transform: none;
    scroll-snap-align: center;
  }
  html body .tab-bar .tab-btn[aria-selected="true"] {
    background: var(--brand-tint);
    padding-right: 12px;
  }
  html body .tab-bar .tab-badge {
    width: 32px;
    height: 32px;
    font-size: 0.9rem;
  }
  html body .tab-bar .tab-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  html body .tab-bar .tab-btn[aria-selected="true"] .tab-text {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: nowrap;
    background: transparent;
  }
  html body .tab-bar .tab-btn[aria-selected="true"] .tab-name {
    font-size: 0.85rem;
    text-align: left;
  }
  html body .tab-bar .tab-desc {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }
  .stage-card {
    padding: 12px;
  }
}

/* ---- floating Save / Resume and Math Workbench: icon-only on phones, hidden while they would sit on a widget control */
@media (max-width: 600px), (max-height: 520px) {
  body.studio-has-menu #nsr-root {
    right: 8px;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    gap: 6px;
  }
  body.studio-has-menu #nsr-launcher,
  body.studio-has-menu #nsr-workbench {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    justify-content: center;
    gap: 0;
  }
  body.studio-has-menu #nsr-launcher .nsr-launcher-label,
  body.studio-has-menu #nsr-workbench .nsr-workbench-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
  body.studio-has-menu #nsr-launcher .nsr-launcher-ico,
  body.studio-has-menu #nsr-workbench .nsr-workbench-ico {
    font-size: 1.15rem;
  }
  body.studio-has-menu #nsr-launcher .nsr-dot {
    position: absolute;
    right: 7px;
    top: 7px;
  }
}
body.studio-fab-hidden #nsr-root {
  visibility: hidden;
}
.main-container {
  padding-bottom: 96px;
}

/* ---- the lab item: task, goal, PICTURE + CONTROLS, then a check bar that stays on screen, then feedback, prediction, hints */
.item-body.lab-item {
  display: flex;
  flex-direction: column;
}
.item-body.lab-item > * {
  order: 8;
}
.item-body.lab-item > .item-q {
  order: 0;
}
.item-body.lab-item > .lab-goal {
  order: 1;
  margin: 6px 0;
}
.item-body.lab-item > .lab-show {
  order: 2;
  margin: 2px 0 6px;
}
.item-body.lab-item > .answer-zone {
  order: 3;
}
.item-body.lab-item > .item-fb {
  order: 4;
}
.item-body.lab-item > .lab-goalbar {
  order: 5;
}
/* the answer to Check appears just above the Check bar, on the same screen as the picture (focus.js sets --lab-bar-h) */
.item-body.lab-item > .item-fb.show {
  position: sticky;
  bottom: calc(var(--lab-bar-h, 64px) + 16px);
  z-index: 6;
  max-height: min(40vh, 300px);
  overflow: auto;
  margin: 8px 0;
  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.45);
}
@media (max-width: 600px) {
  .item-body.lab-item > .item-fb.show {
    max-height: 32vh;
  }
  .focus-body .item-body.lab-item > .lab-show {
    display: none;
  }
}
.item-body.lab-item > .lab-predict {
  order: 6;
}
.item-body.lab-item > .hint-area {
  order: 7;
}
.item-body.lab-item > .lab-twin {
  order: 20;
}
.lab-goalbar {
  position: sticky;
  bottom: 8px;
  z-index: 6;
  justify-content: flex-start;
  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.45);
}
.lab-goalbar:empty {
  display: none;
}

/* the Check row of a hands-on activity (assets/studio/focus.js marks it) stays on screen while the picture is in view */
.act-host .check-bar {
  position: sticky;
  bottom: 8px;
  z-index: 6;
  padding: 6px 8px;
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.45);
}
.item-fb {
  scroll-margin-block: 72px 96px;
}
.lab-twin-shown {
  order: 20;
}

/* ---- buttons the platform adds: Full screen on a widget, the first-touch coach ---------------------------------------- */
.item-tools .focus-open {
  white-space: nowrap;
}
dialog.focus-sheet {
  inset: 0;
  width: 100vw;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--surface);
  color: var(--ink);
  overflow: hidden;
}
dialog.focus-sheet[open] {
  display: flex;
  flex-direction: column;
}
dialog.focus-sheet::backdrop {
  background: rgba(0, 0, 0, 0.55);
}
.focus-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  background: var(--surface-soft);
  border-bottom: 2px solid var(--border);
}
.focus-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  color: var(--brand);
}
.focus-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 12px;
}
.focus-body > .item-body {
  max-width: 1120px;
  margin: 0 auto;
}
.focus-hole {
  margin: 8px 0;
  color: var(--ink-muted);
  font-weight: 700;
}
.focus-hole[hidden] {
  display: none;
}
body.focus-open {
  overflow: hidden;
}

.coach {
  margin: 8px 0;
  padding: 10px 14px;
  border: 2px solid var(--brand);
  border-radius: var(--radius-md);
  background: var(--brand-tint);
  color: var(--ink);
}
.coach p {
  margin: 0 0 8px;
  font-weight: 700;
}
.coach-count {
  font-size: 0.85rem;
  color: var(--ink-muted);
}
.coach-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

@media (forced-colors: active) {
  .lab-goalbar,
  dialog.focus-sheet,
  .coach {
    border: 2px solid CanvasText;
  }
}
@media print {
  .item-tools .focus-open,
  dialog.focus-sheet,
  .coach {
    display: none !important;
  }
}

/* ======================= LANGUAGE LAYER (assets/studio/language*.js) ====================================================
   One Language control, Español shown the way the student chose, a one-sentence-per-line view of a problem, the writing
   frame ladder with sentence tiles, partner talk, word chips with cognate cues, and Quiet mode. Tokens only; every target
   is 44px; nothing moves; colour is never the only signal (marks, labels and borders carry the meaning too). */
.lang-es-inline { margin-left: 0.4em; color: var(--ink-muted); font-size: 0.94em; }
.lang-dialog .lang-es-inline, .lang-gloss .lang-es-inline { display: block; margin-left: 0; }
.lang-dialog .lang-hint { color: var(--ink-muted); }
.lang-dialog fieldset { margin: 0 0 12px; }
.lang-note { margin: 4px 0; color: var(--ink-muted); font-size: 0.9rem; }
.lang-evidence { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); }
.lang-evidence h3 { margin: 0 0 4px; font-size: 1rem; }
.lang-evidence ul { margin: 6px 0; padding-left: 20px; }

/* ---- tap for Español: one button per problem, one before each line of a chunked stem ------------------------------- */
.lang-tool-es, .lang-es-tap { display: none; }
body.lang-tap .lang-tool-es { display: inline-flex; }
body.lang-tap .lang-es-tap {
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin: 0 6px;
  padding: 0 10px; border: 2px solid var(--brand); border-radius: var(--radius-sm); background: var(--surface);
  color: var(--brand); font: inherit; font-size: 0.85rem; font-weight: 800; cursor: pointer; vertical-align: middle;
}
body.lang-tap .lang-es-tap[aria-expanded="true"] { background: var(--brand-tint); }
body.lang-tap .es-text.lang-open, body.lang-tap .lang-open-all .es-text { display: block; }
body.lang-tap .studio-context.lang-open-all .mission-body .es-text,
body.lang-tap .topic-strip.lang-open-all .es-text { display: block; }
.lang-gloss-tools { margin: 0 0 6px; }

/* ---- Español primero: the Spanish line leads, English follows a little quieter ------------------------------------- */
body.lang-esfirst .item-q > :not(.es-text),
body.lang-esfirst .item-sub > :not(.es-text),
body.lang-esfirst .fb-guide > :not(.es-text) { font-size: 0.93em; font-weight: 600; color: var(--ink-muted); }
body.lang-esfirst .lang-line { display: flex; flex-direction: column; }
body.lang-esfirst .lang-line .es-text { order: -1; }
body.lang-esfirst .lang-line .lang-en { color: var(--ink-muted); font-size: 0.93em; }

/* ---- What is this asking? ------------------------------------------------------------------------------------------- */
.lang-chunks { display: block; }
.lang-line { display: block; margin: 0 0 8px; padding: 2px 0 2px 10px; border-left: 3px solid var(--border-strong); }
.lang-line.lang-ask { border-left: 6px solid var(--brand); font-weight: 800; color: var(--brand); }
.lang-qmark { font-weight: 800; }
.lang-num {
  padding: 0 0.22em; border-radius: 4px; background: var(--brand-tint); color: var(--brand-dark); font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.lang-need { margin: 8px 0 12px; padding: 10px 12px; border: 2px dashed var(--border-strong); border-radius: var(--radius-md); background: var(--surface-soft); }
.lang-need-title { margin: 0 0 6px; }
.lang-need-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0; }
.lang-need-lead { min-width: 9.5em; font-weight: 700; }
.lang-need-input { flex: 1 1 14em; min-height: 44px; padding: 6px 10px; border: 2px solid var(--border-strong); border-radius: var(--radius-sm); font: inherit; background: var(--surface); color: var(--ink); }

/* ---- writing: the frame ladder, tiles, partner talk ----------------------------------------------------------------- */
.lang-write { margin: 10px 0; }
.lang-frame { padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface-soft); }
.lang-frame-head { margin: 0 0 6px; }
.lang-level { margin-left: 8px; padding: 0 8px; border: 1px solid var(--border-strong); border-radius: 999px; font-size: 0.8rem; font-weight: 700; color: var(--ink-muted); }
.lang-frame-list { margin: 0; padding-left: 22px; }
.lang-frame-line { margin: 0 0 8px; }
.lang-fn { display: inline-block; margin-right: 6px; padding: 0 8px; border-radius: 999px; background: var(--sun-tint); color: var(--sun-ink); border: 1px solid var(--sun); font-size: 0.78rem; font-weight: 800; }
.lang-blank { display: inline-block; min-width: 3.4em; border-bottom: 3px solid var(--ink); vertical-align: baseline; }
.lang-frame-actions { margin: 6px 0 0; }
.lang-first { margin: 6px 0 0; }
.lang-tiles, .lang-partner { margin: 10px 0; padding: 8px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface); }
.lang-tiles > summary, .lang-partner > summary { min-height: 44px; display: flex; align-items: center; font-weight: 800; cursor: pointer; }
.lang-sentence { display: flex; flex-wrap: wrap; gap: 6px; min-height: 52px; margin: 6px 0; padding: 6px; border: 2px dashed var(--border-strong); border-radius: var(--radius-md); }
.lang-empty { color: var(--ink-muted); align-self: center; }
.lang-tilebox { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.lang-tile {
  min-height: 44px; min-width: 44px; padding: 6px 12px; border: 2px solid var(--brand); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer;
}
.lang-tile-word { border-style: dashed; }
.lang-tile-num { font-variant-numeric: tabular-nums; border-width: 3px; }
.lang-sentence .lang-tile { background: var(--brand-tint); }
.lang-tile:focus-visible, .lang-chip:focus-visible, .lang-es-tap:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
.lang-tile-actions { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.lang-rehearse { margin-top: 8px; padding: 8px 10px; border-left: 6px solid var(--ok); background: var(--ok-tint); }
.lang-built { margin: 4px 0; font-weight: 800; }
.lang-part-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.lang-part-tabs [aria-pressed="true"] { background: var(--brand-tint); border-color: var(--brand); font-weight: 800; }
.lang-partner-steps { margin: 6px 0; padding-left: 22px; }
.lang-check { display: flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; }
.lang-check input { width: 24px; height: 24px; }
.lang-three { margin-top: 10px; }
.lang-three-list { margin: 8px 0 0; padding-left: 22px; }
.lang-three-list li { margin: 0 0 6px; }

/* ---- words ----------------------------------------------------------------------------------------------------------- */
.lang-words { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 10px; }
.lang-words-label { font-size: 0.85rem; font-weight: 700; color: var(--ink-muted); }
.lang-chip {
  min-height: 44px; padding: 4px 12px; border: 2px solid var(--brand); border-radius: 999px; background: var(--surface);
  color: var(--brand); font: inherit; font-weight: 800; cursor: pointer;
}
.lang-chip[aria-expanded="true"] { background: var(--brand-tint); }
.lang-chip-cog { border-style: solid; }
.lang-gloss { flex-basis: 100%; padding: 8px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface-soft); }
.lang-gloss p { margin: 0 0 4px; }
.lang-pic { max-width: 220px; margin: 6px 0; }
.lang-pic svg { width: 100%; height: auto; }
.lang-cog { text-decoration: underline dotted; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.lang-cogline { display: block; margin-top: 4px; font-size: 0.9rem; }
.lang-cogmark-true { font-weight: 700; color: var(--ok-ink); }
.lang-cogmark-trap { font-weight: 700; color: var(--sun-ink); }
.lang-amber { margin: 6px 0 10px; padding: 8px 12px; border: 2px solid var(--sun); border-left-width: 8px; border-radius: var(--radius-md); background: var(--sun-tint); color: var(--sun-ink); }

/* ---- Quiet mode: the story shrinks to the lesson's one-line purpose; section names are the same in every lesson ---- */
body.lang-quiet .studio-context > .mission-card { display: none; }
body.lang-quiet .world-glyph { display: none; }

@media (forced-colors: active) {
  .lang-num { background: Canvas; color: CanvasText; border-bottom: 3px solid CanvasText; border-radius: 0; }
  .lang-line.lang-ask, .lang-amber, .lang-need, .lang-frame, .lang-tiles, .lang-partner, .lang-gloss { border-color: CanvasText; }
  .lang-tile, .lang-chip, body.lang-tap .lang-es-tap { border-color: ButtonText; color: ButtonText; background: ButtonFace; }
  .lang-blank { border-bottom-color: CanvasText; }
}
@media print {
  .lang-tool, .lang-es-tap, .lang-tiles, .lang-partner, .lang-words, .lang-three, .lang-need { display: none !important; }
}

/* ---- Class Pulse: the anonymous class code and the Family Window question (assets/studio/pulse.js) ---------------- */
.pulse-slot:empty { display: none; }
.pulse-box { margin: 14px 0 0; padding: 12px 14px; border: 2px dashed var(--border-strong); border-radius: 12px; background: var(--surface-soft); }
.pulse-label { margin: 0 0 6px; color: var(--ink); }
.pulse-note { font-size: 0.9rem; color: var(--ink-muted); }
.pulse-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 8px; }
.pulse-code { display: inline-block; max-width: 100%; padding: 6px 10px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); color: var(--ink); font: 700 1rem/1.4 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: 0.04em; overflow-wrap: anywhere; user-select: all; }
.pulse-box .btn { min-height: 44px; }
.pulse-ask { margin: 8px 0 0; color: var(--ink); }
.pulse-idea { font-size: 0.92rem; color: var(--ink-muted); }
.pulse-code:focus-visible { outline: 3px solid var(--sun-deep); outline-offset: 2px; }
@media (forced-colors: active) { .pulse-box, .pulse-code { border-color: CanvasText; } }
@media print { .pulse-box button { display: none; } }

/* ---- a ratio table's optional scale arrows (assets/studio/focus.js) ---- */
.scale-pill {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 2px;
  min-height: 32px;
  padding: 0 6px;
  transform: translate(-50%, -50%);
  border: 2px solid var(--brand);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-weight: 800;
  z-index: 2;
}
.scale-pill[hidden] {
  display: none;
}
.scale-pill input {
  width: 36px;
  min-height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: center;
}
.viz-tools {
  margin: 6px 0 0;
}
@media print {
  .scale-pill,
  .viz-tools {
    display: none !important;
  }
}

/* ---- phones: the header is one compact band, so the first problem sits near the top of the screen. Layout only:
   every control stays in the DOM and keeps its behaviour; the subtitle clamps to one line. */
@media (max-width: 600px) {
  body[data-world] .app-header .header-wrap { padding-top: 6px; padding-bottom: 6px; gap: 6px; }
  body[data-world] .app-header .brand-icon { display: none; }
  body[data-world] .app-header .brand-title { font-size: 1rem; line-height: 1.2; }
  body[data-world] .app-header .brand-sub {
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.75rem;
  }
  body[data-world] .app-header .header-actions { flex-wrap: wrap; gap: 4px; }
}

/* ---- focus layout (every studio, body.focus-layout set in clarity.js): the question and its model lead; the Help, goal
   and check controls sit beside the model on laptops and stack under it on phones. Context folds behind one control. */
body.focus-fold .pathway-panel,
body.focus-fold .studio-context { display: none; }
body.focus-fold.show-context .pathway-panel,
body.focus-fold.show-context .studio-context { display: block; }
body.focus-layout .focus-more-btn {
  display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 10px; padding: 8px 14px; min-height: 44px;
  border: 1px solid var(--ink-muted, #5b6b7c); border-radius: 999px; background: transparent; color: inherit;
  font: inherit; font-weight: 700; cursor: pointer;
}
body.focus-layout .focus-more-btn:focus-visible { outline: 3px solid var(--brand, #2563eb); outline-offset: 2px; }
@media (min-width: 901px) {
  body.focus-layout .tab-panel.active .stage-card .item-body.lab-item {
    display: grid;
    grid-template-columns: minmax(0, 1.9fr) minmax(280px, 1fr);
    grid-template-rows: auto repeat(11, min-content) 1fr;
    gap: 12px 20px;
    align-items: start;
  }
  body.focus-layout .tab-panel.active .stage-card .item-body.lab-item > .item-q { grid-column: 1 / -1; grid-row: 1; }
  body.focus-layout .tab-panel.active .stage-card .item-body.lab-item > .answer-zone { grid-column: 1; grid-row: 2 / 14; }
  body.focus-layout .tab-panel.active .stage-card .item-body.lab-item > :not(.item-q):not(.answer-zone) { grid-column: 2; }
}
@media (max-width: 900px) {
  body.focus-layout .tab-panel.active .stage-card .item-body.lab-item { display: flex; flex-direction: column; }
  body.focus-layout .tab-panel.active .stage-card .item-body.lab-item > .item-q { order: -2; }
  body.focus-layout .tab-panel.active .stage-card .item-body.lab-item > .answer-zone { order: -1; }
}
@media (max-width: 900px) {
  body.focus-layout .topic-strip > div > p,
  body.focus-layout .topic-strip .lang-tool-es { display: none; }
}

/* ---- focus pilot, laptop: one progress bar, a quiet stage stepper, a Help card, fewer competing controls ---------- */
body.focus-layout .focus-progress { height: 8px; background: rgba(0, 0, 0, 0.14); }
body.focus-layout .focus-progress-fill {
  display: block; height: 100%; width: 0; background: var(--brand, #2563eb); transition: width 0.25s ease;
}
@media (prefers-reduced-motion: reduce) { body.focus-layout .focus-progress-fill { transition: none; } }
body.focus-layout .header-actions #u4-stars-btn,
body.focus-layout .header-actions .score-pill,
body.focus-layout .header-actions #hud-pill { display: none; }
body.focus-layout .tab-btn { background: transparent; border-color: transparent; box-shadow: none; }
body.focus-layout .tab-btn .tab-desc { display: none; }
body.focus-layout .tab-btn[aria-selected="true"] { border-bottom: 3px solid var(--brand, #2563eb); border-radius: 8px 8px 0 0; }
body.focus-layout .topic-strip > div > p,
body.focus-layout .topic-strip .lang-tool-es { display: none; }
body.focus-layout .hint-area {
  padding: 12px 14px; border: 1px solid var(--line, #d5dde6); border-radius: 12px; background: var(--card, transparent);
}
body.focus-layout .hint-area::before {
  content: "Help"; display: block; margin-bottom: 8px; font-weight: 800; font-size: 1.05rem;
}
body.focus-layout .hint-area .hint-btn { width: 100%; justify-content: center; min-height: 44px; }
body.focus-layout .item-head .item-tools .tool-btn { background: transparent; border-color: transparent; font-size: 0.9rem; }
body.focus-layout .item-head .chip-explore { display: none; }

/* ---- figure-first items (graph hosts, move-work): the question comes first, then the figure it asks about ---------- */
body.focus-layout .tab-panel.active .stage-card .item-body:has(> .viz-host, > .move-work) {
  display: flex;
  flex-direction: column;
}
body.focus-layout .tab-panel.active .stage-card .item-body:has(> .viz-host, > .move-work) > .item-ctx { order: -3; }
body.focus-layout .tab-panel.active .stage-card .item-body:has(> .viz-host, > .move-work) > .item-q { order: -2; }
body.focus-layout .tab-panel.active .stage-card .item-body:has(> .viz-host, > .move-work) > .lang-words { order: -1; }
@media (min-width: 901px) {
  body.focus-layout .lab-goalbar { position: static; }
}

/* ---- declutter round 2: quieter tool row, compact prediction, one step indicator ------------------------------------- */
body.focus-layout .item-head .item-tools { display: flex; flex-wrap: wrap; gap: 2px 6px; margin-inline-start: auto; }
body.focus-layout .item-head .item-tools .tool-btn { padding: 4px 8px; min-height: 36px; white-space: nowrap; }
/* the numbered dots above already show "Problem n of m"; keep the words for screen readers */
body.focus-layout .item-head .item-count {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
body.focus-layout .lab-predict { padding: 8px 0 0; }
body.focus-layout .lab-predict .item-sub { margin: 0 0 6px; font-size: 0.9rem; }
body.focus-layout .lab-predict .item-actions { display: flex; flex-wrap: nowrap; gap: 6px; margin: 0; }
body.focus-layout .lab-predict .item-actions .btn { flex: 1 1 auto; min-width: 0; padding: 6px 8px; min-height: 40px; font-size: 0.85rem; }
body.focus-layout .item-body.lab-item > .lab-show { font-size: 0.9rem; opacity: 0.85; }
@media (max-width: 600px) {
  body.focus-layout .item-head .item-tools .tool-btn { font-size: 0.82rem; }
  body.focus-layout .item-head { gap: 4px 8px; }
}