/* ============================================================
   interactive.css — drill panels, pickers, verdicts, calculators,
   ladders, then the shared sorting game / quiz / flashcards / toast.

   Load order is tokens → base → layout → components → interactive,
   so a rule here beats an equal-specificity rule in components.css.
   ============================================================ */

/* ---------------- Lab panel shell ---------------- */

.lab {
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--surface);
  overflow: hidden;
}

.lab__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}

.lab__title {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-sm);
  font-weight: 700;
}

.lab__title::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 10px var(--accent-2);
  flex: none;
}

.lab__body {
  padding: var(--s-4);
  display: grid;
  gap: var(--s-4);
}

/* A small button — used inside drills where a full-size one would crowd. */
.btn--sm {
  padding: 6px 14px;
  font-size: var(--t-xs);
}

/* ---------------- Drill chrome ---------------- */

.drill__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--ink-3);
  margin-bottom: var(--s-3);
}

/* The fact pattern. Bigger and quieter than body text, because the
   student is meant to read it slowly. */
.drill__facts {
  font-size: var(--t-md);
  line-height: 1.7;
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-md);
  background: var(--surface-2);
  border-left: 4px solid var(--accent);
  margin-bottom: var(--s-4);
  color: var(--ink);
}

.drill__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-top: var(--s-4);
}

/* ---------------- Answer pickers ---------------- */

.picks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}

.picks--wide {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.pick {
  display: grid;
  align-content: start;
  gap: 4px;
  text-align: left;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease),
    background var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.pick:hover:not(:disabled) {
  border-color: var(--line-strong);
  background: var(--surface-2);
  transform: translateY(-2px);
}

.pick:disabled {
  cursor: default;
}

.pick__label {
  font-weight: 700;
  font-size: var(--t-sm);
}

.pick__hint {
  font-size: var(--t-xs);
  color: var(--ink-3);
  line-height: 1.5;
}

.pick.is-right {
  border-color: var(--ok);
  background: color-mix(in srgb, var(--ok) 14%, var(--surface));
}

.pick.is-wrong {
  border-color: var(--bad);
  background: color-mix(in srgb, var(--bad) 14%, var(--surface));
}

/* An option foreclosed by an election the student already made. */
.pick.is-barred {
  opacity: 0.4;
}

.pick--ok.is-right,
.pick--bad.is-right,
.pick--warn.is-right {
  /* the verdict colours win over the option's own tint */
  border-color: var(--ok);
}

/* ---------------- Verdicts ---------------- */

.verdict {
  border: 1px solid var(--line);
  border-left: 4px solid var(--ink-3);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: var(--s-4) var(--s-5);
  margin-top: var(--s-4);
}

.verdict--ok {
  border-left-color: var(--ok);
  background: color-mix(in srgb, var(--ok) 7%, var(--surface));
}

.verdict--bad {
  border-left-color: var(--bad);
  background: color-mix(in srgb, var(--bad) 7%, var(--surface));
}

.verdict--warn {
  border-left-color: var(--warn);
  background: color-mix(in srgb, var(--warn) 8%, var(--surface));
}

.verdict__head {
  font-weight: 800;
  font-size: var(--t-md);
  margin-bottom: var(--s-2);
  color: var(--ink);
}

.verdict__rule {
  font-size: var(--t-sm);
  color: var(--accent-2);
  font-weight: 640;
  margin-bottom: var(--s-2);
}

.verdict__why {
  font-size: var(--t-sm);
  margin-bottom: var(--s-2);
}

/* The named misconception. Set apart so the eye finds it. */
.verdict__trap {
  font-size: var(--t-sm);
  margin: var(--s-3) 0 0;
  padding-top: var(--s-3);
  border-top: 1px dashed var(--line-strong);
  color: var(--ink-2);
}

.verdict > :last-child {
  margin-bottom: 0;
}

.liab {
  margin: 0 0 var(--s-2);
  padding-left: 1.3em;
  font-size: var(--t-sm);
}

.liab li {
  margin-bottom: 4px;
}

/* ---------------- Two-choice rows (earnest vs option) ---------------- */

.eo-rows {
  display: grid;
  gap: var(--s-2);
}

.eo-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}

.eo-row__text {
  font-size: var(--t-sm);
}

.eo-row__btns {
  display: flex;
  gap: var(--s-2);
}

.eo-row__why {
  grid-column: 1 / -1;
  font-size: var(--t-xs);
  color: var(--ink-2);
  line-height: 1.6;
  padding-top: var(--s-2);
  border-top: 1px dashed var(--line);
}

.eo-row.is-done {
  background: var(--surface-2);
}

.btn.is-right {
  border-color: var(--ok);
  background: color-mix(in srgb, var(--ok) 18%, transparent);
  color: var(--ok);
}

.btn.is-wrong {
  border-color: var(--bad);
  background: color-mix(in srgb, var(--bad) 18%, transparent);
  color: var(--bad);
}

@media (max-width: 640px) {
  .eo-row {
    grid-template-columns: 1fr;
  }
}

/* ---------------- Person / mode grids ---------------- */

.who-grid,
.mode-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s-2);
  margin-bottom: var(--s-4);
}

.who,
.mode {
  display: grid;
  gap: 4px;
  text-align: left;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink);
  justify-items: start;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.who:hover,
.mode:hover {
  border-color: var(--line-strong);
  background: var(--surface-2);
}

.who[aria-current="true"],
.mode[aria-current="true"] {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
}

.who__name,
.mode__name {
  font-weight: 700;
  font-size: var(--t-sm);
  line-height: 1.4;
}

.who__art,
.mode__art {
  font-size: var(--t-xs);
  color: var(--ink-3);
  font-family: var(--mono);
}

/* ---------------- Detail panel ---------------- */

.detail {
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--r-md);
  background: var(--surface-2);
  padding: var(--s-4) var(--s-5);
}

.detail--bad {
  border-left-color: var(--bad);
}

.detail--warn {
  border-left-color: var(--warn);
}

.detail__head {
  font-weight: 800;
  margin-bottom: var(--s-2);
}

.detail__body {
  font-size: var(--t-sm);
  margin-bottom: var(--s-2);
}

.detail__foot {
  font-size: var(--t-sm);
  color: var(--ink-2);
  margin: 0;
  padding-top: var(--s-2);
  border-top: 1px dashed var(--line-strong);
}

/* ---------------- Segmented control ---------------- */

.seg {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
  margin-bottom: var(--s-4);
}

.seg--stack {
  flex-direction: column;
}

.seg__btn {
  flex: 1 1 auto;
  text-align: left;
  padding: 10px var(--s-4);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  font-size: var(--t-sm);
  font-weight: 620;
  transition: all var(--dur) var(--ease);
}

.seg__btn:hover {
  border-color: var(--line-strong);
  color: var(--ink);
}

.seg__btn[aria-pressed="true"] {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 15%, var(--surface));
  color: var(--ink);
}

/* ---------------- Calculators ---------------- */

.calc {
  display: grid;
  gap: var(--s-4);
}

.calc__inputs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}

.field {
  display: grid;
  gap: 6px;
}

.field__k {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--ink-3);
}

.field input,
.field select {
  width: 100%;
  padding: 10px var(--s-3);
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink);
  font-family: var(--mono);
  font-size: var(--t-sm);
}

.field input:focus,
.field select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* Dark themes make the native calendar / spinner glyphs nearly invisible. */
[data-theme="dark"] .field input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] .field input[type="number"]::-webkit-inner-spin-button {
  filter: invert(1) opacity(0.7);
}

.calc__note {
  font-size: var(--t-sm);
  color: var(--ink-3);
  margin: var(--s-3) 0 0;
}

/* ---------------- Checkboxes ---------------- */

.check {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: 10px var(--s-3);
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  cursor: pointer;
  line-height: 1.6;
}

.check:hover {
  background: var(--surface-2);
}

.check input {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 3px;
  accent-color: var(--accent);
  cursor: pointer;
}

.check--gf {
  border: 1px dashed var(--line-strong);
  margin-top: var(--s-2);
}

.req-list {
  display: grid;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-2);
  background: var(--surface);
}

.check--req:has(input:checked) {
  background: color-mix(in srgb, var(--ok) 10%, transparent);
}

/* ---------------- Worked steps ---------------- */

.steps {
  display: grid;
  gap: var(--s-2);
  margin-top: var(--s-4);
}

.step {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: var(--s-3);
  align-items: start;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  font-size: var(--t-sm);
  line-height: 1.65;
}

.step__n {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: #fff;
  font-size: var(--t-xs);
  font-weight: 800;
}

/* ---------------- Readout strip ---------------- */

.readouts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-top: var(--s-4);
}

.readout {
  background: var(--surface);
  padding: var(--s-3) var(--s-4);
}

.readout__k {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-3);
  font-weight: 700;
  margin-bottom: 2px;
}

.readout__v {
  font-family: var(--mono);
  font-size: var(--t-md);
  font-weight: 700;
  color: var(--ink);
}

/* ---------------- Double sale: parties and the ladder ---------------- */

.parties {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4);
  margin-bottom: var(--s-4);
}

@media (max-width: 720px) {
  .parties {
    grid-template-columns: 1fr;
  }
}

.party {
  display: grid;
  gap: var(--s-3);
  padding: var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  align-content: start;
}

.party__head {
  font-weight: 800;
  font-size: var(--t-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-2);
}

.ladder {
  display: grid;
  gap: var(--s-2);
  margin-top: var(--s-4);
}

.rung {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: var(--s-3);
  align-items: start;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: var(--t-sm);
}

.rung__ico {
  font-size: var(--t-md);
  line-height: 1.3;
  text-align: center;
}

.rung__note {
  color: var(--ink-3);
  font-size: var(--t-xs);
  line-height: 1.6;
}

.rung--win {
  border-color: var(--ok);
  background: color-mix(in srgb, var(--ok) 10%, var(--surface));
}

.rung--skip {
  opacity: 0.85;
  border-style: dashed;
}

/* A rung the ladder never reached: struck through, because the student
   must see that it was never even consulted. */
.rung--dead {
  opacity: 0.42;
}

.rung--dead b {
  text-decoration: line-through;
}

/* ---------------- Recto: remedy cards ---------------- */

.remedies {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--s-3);
  margin: var(--s-4) 0;
}

.remedy {
  display: grid;
  gap: 6px;
  align-content: start;
  text-align: left;
  padding: var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink);
  transition: all var(--dur) var(--ease);
}

.remedy:hover:not(:disabled) {
  border-color: var(--line-strong);
  transform: translateY(-2px);
}

.remedy__head {
  font-weight: 800;
  font-size: var(--t-sm);
}

.remedy__needs {
  font-size: var(--t-xs);
  color: var(--ink-3);
  line-height: 1.55;
}

.remedy__state {
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--accent-2);
  margin-top: var(--s-2);
}

.remedy__state--no {
  color: var(--bad);
  font-weight: 620;
}

.remedy.is-elected {
  border-color: var(--ok);
  background: color-mix(in srgb, var(--ok) 12%, var(--surface));
}

.remedy.is-barred {
  opacity: 0.42;
}

/* Unavailable must be INERT, not merely faint — a card that still
   responds while the engine ignores it reads as a broken lab. */
.remedy.is-unavailable {
  opacity: 0.5;
  pointer-events: none;
}

/* ---------------- Maceda: the two-year threshold ---------------- */

.thresh {
  margin-top: var(--s-4);
}

.thresh__bar {
  position: relative;
  height: 12px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  border: 1px solid var(--line);
  overflow: hidden;
}

.thresh__bar > span {
  display: block;
  height: 100%;
  background: var(--accent-grad);
  transition: width var(--dur) var(--ease);
}

.thresh__mark {
  position: absolute;
  top: -1px;
  bottom: -1px;
  width: 2px;
  background: var(--ink);
  opacity: 0.55;
}

/* Labels are absolutely placed at the same percentages as the ticks above
   them, so the scale cannot drift out of step with what it is labelling.
   The end labels pull inward so they do not overhang the bar. */
.thresh__keys {
  position: relative;
  height: 1.4em;
  font-size: var(--t-xs);
  color: var(--ink-3);
  margin-top: 6px;
  font-weight: 620;
}

.thresh__keys span {
  position: absolute;
  white-space: nowrap;
  transform: translateX(-50%);
}

.thresh__keys span:first-child {
  transform: none;
}

.thresh__keys span:last-child {
  transform: translateX(-100%);
}

@media (max-width: 720px) {
  /* Two long labels cannot share a narrow bar without colliding. */
  .thresh__keys {
    height: auto;
  }
  .thresh__keys span {
    position: static;
    transform: none;
    display: block;
  }
}

/* ---------------- Sorting board additions ---------------- */

.bin__sub {
  font-size: var(--t-xs);
  color: var(--ink-3);
  line-height: 1.5;
  margin-bottom: var(--s-2);
}

/* The tap-to-select highlight. A class, not an inline style, so that
   clearing the selection cannot leave a stray outline behind. */
.token.is-picked {
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
}
/* ---------------- Sorting game ---------------- */

.sort-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4);
  margin-top: var(--s-4);
}

.bin {
  min-height: 150px;
  border: 2px dashed var(--line-strong);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  background: var(--surface);
  transition: all var(--dur) var(--ease);
}

.bin.is-over {
  border-color: var(--accent-2);
  background: color-mix(in srgb, var(--accent-2) 10%, var(--surface));
}

.bin__title {
  font-size: var(--t-sm);
  font-weight: 700;
  margin-bottom: var(--s-3);
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.pool {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  min-height: 60px;
}

.token {
  padding: 8px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  font-size: var(--t-sm);
  font-weight: 600;
  cursor: grab;
  user-select: none;
  transition: all 180ms var(--ease);
}

.token:hover {
  border-color: var(--accent-2);
  transform: translateY(-2px);
}

.token.is-dragging {
  opacity: 0.4;
}

.token.is-right {
  border-color: var(--ok);
  background: color-mix(in srgb, var(--ok) 16%, transparent);
  color: var(--ok);
  cursor: default;
}

.token.is-wrong {
  border-color: var(--bad);
  background: color-mix(in srgb, var(--bad) 16%, transparent);
  color: var(--bad);
  animation: shake 340ms var(--ease);
}

@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-6px);
  }
  75% {
    transform: translateX(6px);
  }
}

@media (max-width: 640px) {
  .sort-board {
    grid-template-columns: 1fr;
  }
}

/* ---------------- Quiz ---------------- */

.quiz {
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--surface);
  padding: var(--s-5);
}

.quiz__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
  font-size: var(--t-sm);
  color: var(--ink-3);
  font-weight: 620;
}

.quiz__bar {
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--line-strong);
  overflow: hidden;
  margin-bottom: var(--s-5);
}

.quiz__bar span {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--accent-grad);
  transition: width var(--dur) var(--ease);
}

.quiz__q {
  font-size: var(--t-lg);
  font-weight: 660;
  line-height: 1.4;
  margin-bottom: var(--s-4);
  max-width: none;
  color: var(--ink);
}

.choices {
  display: grid;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
}

.choice {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  width: 100%;
  padding: 13px var(--s-4);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--bg-2);
  text-align: left;
  font-size: var(--t-sm);
  color: var(--ink-2);
  transition: all 180ms var(--ease);
}

.choice:hover:not(:disabled) {
  border-color: var(--accent-2);
  color: var(--ink);
  transform: translateX(3px);
}

.choice__key {
  width: 24px;
  height: 24px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 7px;
  border: 1px solid var(--line-strong);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
}

.choice.is-correct {
  border-color: var(--ok);
  background: color-mix(in srgb, var(--ok) 12%, transparent);
  color: var(--ink);
}

.choice.is-correct .choice__key {
  background: var(--ok);
  border-color: var(--ok);
  color: #04220d;
}

.choice.is-wrong {
  border-color: var(--bad);
  background: color-mix(in srgb, var(--bad) 12%, transparent);
}

.choice:disabled {
  cursor: default;
}

.feedback {
  padding: var(--s-4);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface-2);
  font-size: var(--t-sm);
  margin-bottom: var(--s-4);
  animation: slideIn 240ms var(--ease);
}

.feedback b {
  display: block;
  margin-bottom: 4px;
}

.feedback--ok b {
  color: var(--ok);
}
.feedback--bad b {
  color: var(--bad);
}

.quiz__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-3);
}

.score-hero {
  text-align: center;
  padding: var(--s-6) var(--s-4);
}

.score-hero__num {
  font-size: 4rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
}

/* ---------------- Flashcards ---------------- */

.flash-deck {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--s-3);
}

.flash {
  perspective: 1100px;
  height: 178px;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}

.flash__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 520ms var(--ease);
  transform-style: preserve-3d;
}

.flash.is-flipped .flash__inner {
  transform: rotateY(180deg);
}

.flash__face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  padding: var(--s-4);
  display: grid;
  place-content: center;
  text-align: center;
  gap: var(--s-2);
}

.flash__front {
  background: var(--surface-2);
}

.flash__back {
  transform: rotateY(180deg);
  background: color-mix(in srgb, var(--accent) 16%, var(--surface-solid));
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}

.flash__term {
  font-size: var(--t-md);
  font-weight: 700;
  color: var(--ink);
}

.flash__def {
  font-size: var(--t-sm);
  color: var(--ink-2);
  line-height: 1.5;
}

.flash__hint {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 700;
}

/* ---------------- Toast ---------------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: 88px;
  transform: translate(-50%, 20px);
  z-index: 60;
  padding: 12px 22px;
  border-radius: var(--r-pill);
  background: var(--surface-solid);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow);
  font-size: var(--t-sm);
  font-weight: 620;
  opacity: 0;
  pointer-events: none;
  transition: all var(--dur) var(--ease);
}

.toast.is-on {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* A revealed scene card grows and stretches its whole grid row. The cards
   are <button>s, and a stretched button centres its own content — leaving
   the un-revealed neighbours floating in the middle of a tall box. Pin
   their content to the top instead. */
#sceneGrid .tile {
  display: grid;
  align-content: start;
  text-align: left;
  width: 100%;
}

/* ---------------- Overrides for this lesson ----------------
   The shared block above assumes a two-bin sorting game. The three
   stages of a sale need three, and they must collapse on a phone. */

.sort-board {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 900px) {
  .sort-board {
    grid-template-columns: 1fr;
  }
}

.bin {
  align-content: start;
}