/* ==========================================================================
   PRACTICE STUDIO v2 — components layered on assets/u4-studio.css.
   The design tokens (--brand, --sun, --surface …) are re-pointed per lesson by assets/studio-worlds.css
   (generated from data/practice-studio/worlds.json), so everything here uses tokens only and recolours with the world.
   Night = body[data-theme="dark"] (Challenge pages by default; Practice pages when the device is in dark mode; any studio when a student picks Dark).
   ========================================================================== */

/* ---- mission briefing, glossary, HUD ------------------------------------ */
.pathway-panel {
  margin: 0 0 1rem;
  padding: 0.75rem 1.25rem;
  border: 1.5px solid var(--brand-line);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--ink);
}
.pathway-panel h2 { margin: 0 0 .2rem; color: var(--brand); font-family: var(--font-display); font-size: clamp(1.1rem, 1.6vw, 1.35rem); }
.pathway-panel h3 { margin: 0 0 .35rem; color: var(--brand); }
.pathway-panel p { margin: 0; max-width: 68ch; line-height: 1.4; font-size: 0.92rem; }
.pathway-kicker { margin: 0 0 .2rem; color: var(--brand); font-size: .75rem; font-weight: 800; letter-spacing: .08em; }
.pathway-intro { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.pathway-actions, .pathway-summary { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; }
.pathway-actions { flex-shrink: 0; }
.pathway-summary { font-size: .92rem; }
.pathway-summary > span { padding: .2rem .6rem; border-radius: 999px; background: var(--brand-tint); font-size: 0.85rem; }
.pathway-reason { flex-basis: 100%; margin: 0; }
.pathway-primary, .pathway-go, .pathway-link { min-height: 38px; padding: .45rem .85rem; border-radius: .5rem; font: inherit; font-size: 0.9rem; font-weight: 750; cursor: pointer; }
.pathway-primary, .pathway-go { border: 2px solid var(--brand); background: var(--brand); color: #fff; }
.pathway-link { border: 1.5px solid var(--brand-line); background: transparent; color: var(--brand); }
.pathway-primary:hover, .pathway-go:hover { filter: brightness(1.1); }
.pathway-panel button:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; }
.pathway-check { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.pathway-check[hidden] { display: none; }
.pathway-item { max-width: 72rem; }
.pathway-note { margin-top: 0; }
@media (max-width: 720px) { .pathway-intro { flex-direction: column; align-items: stretch; } .pathway-actions { flex-direction: column; align-items: stretch; } }

.mission-card {
  background: var(--surface);
  border: 2px solid var(--border);
  border-left: 10px solid var(--sun);
  border-radius: var(--radius-lg);
  margin: 0 0 22px;
  box-shadow: var(--shadow-card);
}
.mission-card > summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--brand);
  min-height: 52px;
}
.mission-card > summary::-webkit-details-marker {
  display: none;
}
.mission-card > summary .world-glyph {
  font-size: 1.6rem;
  line-height: 1;
}
.mission-card .mission-body {
  padding: 0 20px 18px;
}
.mission-card .mission-body p {
  margin: 0 0 6px;
  max-width: 70ch;
  font-size: 1.05rem;
}
.mission-card .mission-tag {
  color: var(--ink-muted);
  font-weight: 700;
}

#hud-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  font-size: 0.9rem;
  font-weight: 800;
}
#think-btn {
  position: relative;
}
#think-btn[data-count]:not([data-count=""])::after {
  content: attr(data-count);
  position: absolute;
  top: -8px;
  right: -6px;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border-radius: 11px;
  background: var(--sun);
  color: var(--brand-dark);
  font-size: 0.78rem;
  line-height: 22px;
  text-align: center;
}

/* ---- item head, chips, tools ---------------------------------------------- */
.item-head {
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.chip {
  display: inline-block;
  background: var(--brand-tint);
  color: var(--brand);
  border: 2px solid var(--brand-line);
  border-radius: var(--radius-pill);
  padding: 1px 12px;
  font-size: 0.8rem;
  font-weight: 800;
}
.chip-level {
  letter-spacing: 1px;
  color: var(--sun-ink);
  background: var(--sun-tint);
  border-color: var(--sun);
}
.item-tools {
  margin-left: auto;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.tool-btn {
  min-height: 40px;
  padding: 4px 12px;
  border-radius: var(--radius-md);
  border: 2px solid var(--border);
  background: var(--surface-soft);
  color: var(--brand);
  font-weight: 800;
  font-size: 0.88rem;
  font-family: inherit;
  cursor: pointer;
}
.tool-btn:hover {
  background: var(--brand-tint);
  border-color: var(--brand);
}
.tool-btn[hidden] {
  display: none;
}

/* ---- figures, answers ----------------------------------------------------- */
.viz-host {
  margin: 4px 0 16px;
  padding: 10px;
  display: flex;
  justify-content: center;
  overflow-x: auto;
  background: var(--surface-soft);
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
}
.viz-host svg {
  max-width: 100%;
  height: auto;
}

.num-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 14px 0;
}
.num-row .num-input {
  width: min(15ch, 100%);
}
.num-unit {
  font-weight: 800;
  color: var(--brand);
  font-size: 1.1rem;
}

.complete-banner .btn {
  min-height: 44px;
}

/* ---- sort ----------------------------------------------------------------- */
.sort-pool {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0 16px;
  min-height: 52px;
  padding: 10px;
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius-md);
}
.sort-card {
  appearance: none;
  background: var(--surface);
  color: var(--ink);
  border: 2px solid var(--border-strong);
  border-bottom-width: var(--lift);
  border-radius: var(--radius-md);
  padding: 8px 14px;
  min-height: 48px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
}
.sort-card:hover:not([disabled]) {
  border-color: var(--brand);
  background: var(--brand-tint);
}
.sort-card.selected {
  background: var(--sun-tint);
  border-color: var(--sun-deep);
  box-shadow: 0 0 0 3px var(--sun);
}
.sort-card.locked {
  background: var(--ok-tint);
  border-color: var(--ok);
  color: var(--ink);
}
.sort-bins {
  display: grid;
  grid-template-columns: repeat(var(--bins, 2), minmax(0, 1fr));
  gap: 12px;
}
.sort-bin {
  border: 2px solid var(--brand-line);
  border-radius: var(--radius-md);
  background: var(--surface-soft);
  overflow: hidden;
}
.sort-bin-btn {
  appearance: none;
  width: 100%;
  text-align: left;
  border: 0;
  background: var(--brand-tint);
  color: var(--brand);
  padding: 10px 14px;
  font: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  min-height: 56px;
}
.sort-bin-btn small {
  font-weight: 700;
  color: var(--ink-light);
}
.sort-bin-btn:hover:not([disabled]) {
  background: var(--sun-tint);
}
.sort-drop {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px;
  min-height: 60px;
}

/* ---- match ---------------------------------------------------------------- */
.match-board {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 10px 0;
}
.match-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.match-item {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  background: var(--surface);
  color: var(--ink);
  border: 2px solid var(--border-strong);
  border-bottom-width: var(--lift);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  min-height: 52px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.match-item:hover:not([disabled]) {
  border-color: var(--brand);
  background: var(--brand-tint);
}
.match-item.selected {
  background: var(--sun-tint);
  border-color: var(--sun-deep);
  box-shadow: 0 0 0 3px var(--sun);
}
.match-item.paired {
  border-color: var(--brand);
  background: var(--brand-tint);
}
.match-item.locked {
  border-color: var(--ok);
  background: var(--ok-tint);
}
.pair-badge {
  flex: 0 0 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--brand);
  color: var(--surface);
  font-family: var(--font-display);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
}

/* ---- number line ---------------------------------------------------------- */
.nline-wrap {
  max-width: 660px;
  margin: 8px auto 0;
}
.nline-range {
  width: 100%;
  height: 44px;
  accent-color: var(--brand);
  cursor: pointer;
}
.nline-read {
  text-align: center;
  margin: 2px 0 6px;
}

/* ---- written answer review, thinking map ---------------------------------- */
.wr-review {
  margin-top: 14px;
  padding: 14px 18px;
  background: var(--brand-tint);
  border: 2px solid var(--brand-line);
  border-radius: var(--radius-md);
}
.rubric-list {
  list-style: none;
  margin: 6px 0 10px;
  padding: 0;
  display: grid;
  gap: 6px;
}
.rubric-list label {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  cursor: pointer;
  font-weight: 600;
}
.rubric-list input {
  width: 22px;
  height: 22px;
  accent-color: var(--brand);
  flex: 0 0 auto;
  margin-top: 2px;
}
.think-list {
  margin: 6px 0 14px;
  padding-left: 1.2em;
  display: grid;
  gap: 10px;
}
.u4-dialog-body h3 {
  margin: 16px 0 6px;
  color: var(--brand);
}
.redeem-stage {
  margin-top: 10px;
}

/* ---- activity host --------------------------------------------------------- */
.act-host {
  margin: 10px 0 4px;
}

/* ---- chrome variants: the section navigator looks different from world to world ---------- */
body[data-chrome="steps"] .tab-list::before,
body[data-chrome="steps"] .tab-list::after,
body[data-chrome="cards"] .tab-list::before,
body[data-chrome="cards"] .tab-list::after {
  display: none;
}
/* no trail line under these two navigators, so the label needs no mask */
body[data-chrome="steps"] .tab-text,
body[data-chrome="cards"] .tab-text {
  background: transparent;
}
body[data-chrome="steps"] .tab-list {
  gap: 8px;
  padding: 6px 16px;
}
body[data-chrome="steps"] .tab-btn {
  flex-direction: row;
  text-align: left;
  gap: 10px;
  align-items: center;
  background: var(--surface-soft);
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  padding: 2px 8px;
}
body[data-chrome="steps"] .tab-btn[aria-selected="true"] {
  background: var(--brand-tint);
  border-color: var(--brand);
}
body[data-chrome="steps"] .tab-badge {
  width: 28px;
  height: 28px;
  font-size: 0.9rem;
  transform: none !important;
  box-shadow: none !important;
}
body[data-chrome="cards"] .tab-list {
  gap: 10px;
  padding: 7px 16px 9px;
}
body[data-chrome="cards"] .tab-btn {
  background: var(--surface);
  border: 3px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 2px 6px;
  box-shadow: 0 4px 0 var(--border-strong);
  transition: transform 0.15s ease;
}
body[data-chrome="cards"] .tab-btn[aria-selected="true"] {
  border-color: var(--brand);
  box-shadow: 0 4px 0 var(--brand);
  transform: translateY(-3px);
}
body[data-chrome="cards"] .tab-badge {
  border-radius: 12px;
  transform: none !important;
}
@media (max-width: 840px) {
  body[data-chrome="steps"] .tab-btn {
    flex-direction: column;
    text-align: center;
    padding: 6px 2px;
  }
  .match-board {
    grid-template-columns: 1fr;
  }
  .sort-bins {
    grid-template-columns: 1fr;
  }
  #hud-pill {
    padding: 4px 10px;
    font-size: 0.82rem;
  }
}

/* ---- night: Challenge pages ----------------------------------------------- */
body[data-theme="dark"] .num-input,
body[data-theme="dark"] .write-box,
body[data-theme="dark"] .data-table,
body[data-theme="dark"] .big-fraction {
  background: var(--surface-soft);
  color: var(--ink);
}
body[data-theme="dark"] .num-input {
  color: var(--ink);
}
body[data-theme="dark"] .num-input.ok {
  background: var(--ok-tint);
  color: var(--ink);
}
body[data-theme="dark"] .num-input.err {
  background: var(--bad-tint);
  color: var(--ink);
}
body[data-theme="dark"] .app-footer a {
  color: var(--sun);
}

@media print {
  .mission-card,
  .glossary {
    break-inside: avoid;
  }
  .item-tools,
  #hud-pill {
    display: none !important;
  }
}

/* ---- bilingual tab labels, finder ----------------------------------------- */
.t-es { display: none; }
body.show-es .t-es { display: inline; }
body.show-es .t-en { display: none; }
.finder-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.finder-card { display: flex; gap: 12px; align-items: flex-start; background: var(--surface-soft); border: 2px solid var(--border); border-radius: var(--radius-md); padding: 12px 14px; }
.finder-emoji { font-size: 1.7rem; line-height: 1.1; flex: 0 0 auto; }
.finder-main { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.finder-links { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.finder-links .btn { text-decoration: none; }
.stamp { display: inline-block; font-size: 0.78rem; font-weight: 800; border: 2px solid var(--border-strong); border-radius: var(--radius-pill); padding: 1px 10px; color: var(--ink-muted); }
.stamp-p, .stamp-c { background: var(--ok-tint); border-color: var(--ok); color: var(--ok); }
.stamp-g { background: var(--sun); border-color: var(--sun-deep); color: var(--brand-dark); }
.finder-passport h2 { margin-top: 0; color: var(--brand); }
.finder-unit { margin-bottom: 18px; }
.finder-unit h2 { margin: 0; color: var(--brand); }
.mission-card > summary .mission-title { flex: 1 1 auto; }

/* ---- long section names must wrap inside their column on a phone ---------- */
.tab-list { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tab-btn, .tab-text { min-width: 0; }
.tab-name, .tab-desc { overflow-wrap: anywhere; }

/* ---- status bar (assets/studio/chrome.js): lesson, pathway, accuracy, streak, theme ---------------------------- */
.ewl-hud {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding: 8px 16px;
  background: var(--surface-soft, var(--surface));
  border-bottom: 1px solid var(--border);
  color: var(--ink);
  font-size: 0.9rem;
}
.ewl-hud-id {
  flex: 1 1 220px;
  min-width: 0;
  overflow-wrap: anywhere;
}
.ewl-hud-title {
  color: var(--ink-muted);
}
.ewl-hud-path {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 100%;
}
.ewl-hud-opt,
.ewl-hud-btn {
  min-height: 44px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 2px solid var(--brand);
  background: var(--surface);
  color: var(--brand);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.ewl-hud-opt[aria-checked="true"] {
  background: var(--brand);
  color: var(--surface);
}
.ewl-hud-opt .es-text {
  display: none;
}
.show-es .ewl-hud-opt .es-text {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
}
.ewl-hud-stat {
  white-space: nowrap;
}
.ewl-hud-stat strong {
  font-variant-numeric: tabular-nums;
}
.ewl-hud-on #hud-pill {
  display: none;
}
.ewl-brand {
  margin-left: auto;
  opacity: 0.75;
  font-size: 0.85rem;
}
.ewl-notice {
  margin: 12px 0;
  padding: 12px 16px;
  border-left: 6px solid var(--bad, #a32222);
  background: var(--bad-tint, #fbe9e9);
  color: var(--ink);
  border-radius: 8px;
}
.ewl-debug {
  position: fixed;
  right: 8px;
  bottom: 8px;
  z-index: 9999;
  max-width: min(92vw, 560px);
  max-height: 60vh;
  overflow: auto;
  padding: 8px 12px;
  border: 2px solid var(--brand);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  font: 12px/1.4 ui-monospace, Menlo, Consolas, monospace;
}
.ewl-debug pre {
  margin: 0;
  white-space: pre-wrap;
}
.ewl-debug[hidden] {
  display: none;
}
body[data-ewl-state="LESSON_MASTERED"] .complete-banner {
  box-shadow: 0 0 0 3px var(--ok-line, #17683f), 0 0 18px var(--ok-line, #17683f);
}
@media (prefers-reduced-motion: reduce) {
  .ewl-hud-opt,
  .ewl-hud-btn {
    transition: none;
  }
}
@media print {
  .ewl-hud,
  .ewl-debug {
    display: none !important;
  }
}

/* the situation a mastery question belongs to */
.item-ctx {
  margin: 0 0 12px;
  padding: 10px 14px;
  border-left: 6px solid var(--brand);
  border-radius: 8px;
  background: var(--brand-tint);
  color: var(--ink);
}

/* More for this lesson: one quiet row of student materials in the footer. */
.footer-more {
  flex: 1 0 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  align-items: baseline;
  font-size: 0.88rem;
}

/* Lab bench: the goal and the check sit together above the model; the paper twin is for print and for a model that cannot load. */
.lab-goalbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
  justify-content: space-between;
  margin: 10px 0;
  padding: 10px 14px;
  border-radius: var(--radius-md, 12px);
  background: var(--brand-tint, #eef3fb);
  border: 1.5px solid var(--brand-line, #c7d3e6);
}
.lab-goalbar .lab-goal {
  margin: 0;
  flex: 1 1 260px;
}
.lab-goalbar .item-actions {
  margin: 0;
}
.lab-trail {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: var(--radius-md, 12px);
  background: var(--surface-soft, #f7f9fc);
  border: 1.5px dashed var(--border, #cbd5e1);
}
.lab-trail p {
  margin: 0 0 4px;
}
.lab-trail ol {
  margin: 0;
  padding-left: 22px;
}
.lab-twin {
  display: none;
}
.lab-twin-shown {
  display: block;
  margin-top: 14px;
}
.lab-twin-table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0;
}
.lab-twin-table th,
.lab-twin-table td {
  border: 1.5px solid #000;
  padding: 8px;
  text-align: left;
  min-width: 70px;
  vertical-align: top;
}
@media print {
  .lab-model,
  .lab-mission,
  .lab-predict,
  .lab-goalbar .item-actions,
  .lab-trail {
    display: none !important;
  }
  .lab-twin {
    display: block !important;
    break-inside: avoid;
  }
}