/* ==========================================================================
   Minshan: mission screen, mission complete screen, DataFrame table
   ========================================================================== */

/* ---------- DataFrame table (.df-*) ---------- */

.df-wrap {
  position: relative;
}

.df {
  --df-idx-w: 44px;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  font-family: var(--font-code);
  font-size: 14px;
  color: var(--text);
}

.df.df--marks {
  --df-idx-w: 66px;
}

.df-body {
  position: relative;
  overflow: hidden;
  margin-bottom: -1px;
}

.df-row {
  position: relative;
  display: grid;
  grid-template-columns: var(--df-tpl);
  align-items: center;
  min-height: 44px;
  background: var(--surface-1);
}

.df-body > .df-row {
  box-shadow: inset 0 -1px 0 var(--line);
}

.df-head {
  min-height: 38px;
  background: var(--df-head-bg);
  box-shadow: inset 0 -1px 0 var(--line-strong);
  color: var(--text-2);
  font-size: 13px;
  font-weight: 500;
}

.df-cell {
  position: relative;
  z-index: 1;
  min-width: 0;
  padding: 0 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.df-cell.df-idx {
  position: static;
  /* A grid item with a z-index forms its own stacking context, which would
     trap the row toggle (z-index 2) below the later cells. */
  z-index: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: visible;
  padding: 0 4px 0 12px;
  color: var(--dim);
}

.df-idx > .df-txt {
  position: relative;
  z-index: 1;
}

.df-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.df-cell.is-focus {
  color: var(--gold);
}

.df-gone {
  display: none !important;
}

.df-state,
.df-tint {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
}

.df-tint {
  background: var(--bad-soft);
}

/* Row highlights are an inset rounded rect drawn with an inset box-shadow.
   Inset 3px with a 10px radius it stays inside the table's 13px inner
   corner radius, so no outline is ever clipped by the rounded corners. */
.df-state {
  inset: 3px 4px 4px;
  border-radius: 10px;
  transition: opacity 160ms var(--ease-out);
}

.df-row.is-selected .df-state {
  opacity: 1;
  background: var(--gold-soft);
  box-shadow: inset 0 0 0 1.5px var(--gold);
}

.df-row.is-correct .df-state {
  opacity: 1;
  background: var(--good-soft);
  box-shadow: inset 0 0 0 1.5px var(--good);
}

.df-row.is-correct:not(.is-pressed) .df-state {
  background: transparent;
}

.df-row.is-wrong .df-state {
  opacity: 1;
  background: var(--bad-soft);
  box-shadow: inset 0 0 0 1.5px var(--bad);
}

/* --dim drops below 4.5:1 on the tinted rows; lift the index label there. */
.df-row.is-selected .df-idx,
.df-row.is-correct.is-pressed .df-idx,
.df-row.is-wrong .df-idx {
  color: var(--text-2);
}

.df-mark {
  display: none;
}

.df--marks .df-mark {
  position: relative;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
  color: transparent;
}

.df-mark svg {
  display: block;
}

.df-mark-check,
.df-mark-x {
  display: none;
}

.df-row.is-selected .df-mark-check,
.df-row.is-correct .df-mark-check,
.df-row.is-wrong .df-mark-x {
  display: inline;
}

.df-row.is-selected .df-mark {
  background: var(--gold);
  box-shadow: none;
  color: var(--gold-ink);
}

.df-row.is-correct.is-pressed .df-mark {
  background: var(--good);
  box-shadow: none;
  color: var(--gold-ink);
}

.df-row.is-correct:not(.is-pressed) .df-mark {
  box-shadow: inset 0 0 0 1.5px var(--good);
  color: var(--good);
}

.df-row.is-wrong .df-mark {
  background: var(--bad);
  box-shadow: none;
  color: var(--gold-ink);
}

.df-toggle {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.df-toggle:active {
  background: var(--white-05);
}

.df-toggle:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
}

@media (max-width: 359px) {
  .df-cell {
    padding: 0 8px;
  }

  .df-cell.df-idx {
    padding: 0 2px 0 10px;
    gap: 8px;
  }

  .df {
    --df-idx-w: 38px;
  }

  .df.df--marks {
    --df-idx-w: 60px;
  }
}

.df-caption {
  margin: 8px 2px 0;
  font-family: var(--font-code);
  font-size: 12px;
  color: var(--muted);
}

/* A single value has no dtype line. */
.df-caption:empty {
  display: none;
}

.df-caption mark {
  border-radius: 4px;
  background: var(--gold-soft);
  color: inherit;
}

/* ---------- Mission screen ---------- */

#screen-mission {
  background: var(--mission-bg);
  overflow: hidden;
}

#screen-mission .ms-shell {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

#screen-mission .ms-top {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: calc(var(--safe-t) + 8px) max(12px, var(--safe-r)) 6px max(12px, var(--safe-l));
}

#screen-mission .ms-close {
  flex: none;
  color: var(--text-2);
  touch-action: manipulation;
}

#screen-mission .ms-progress {
  position: relative;
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: var(--white-10);
  overflow: hidden;
}

/* A 6px nub so step 1 of 5 never reads as an empty bar. */
#screen-mission .ms-progress::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  border-radius: 3px;
  background: var(--gold);
}

#screen-mission .ms-progress-fill {
  position: absolute;
  inset: 0;
  border-radius: 3px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
}

#screen-mission .ms-count {
  flex: none;
  min-width: 30px;
  padding-right: 4px;
  text-align: right;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

#screen-mission .ms-body {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Scrolling is managed in JS around the reveal; anchoring would fight it. */
  overflow-anchor: none;
  -webkit-overflow-scrolling: touch;
  padding: 20px max(16px, var(--safe-r)) 24px max(16px, var(--safe-l));
}

#screen-mission .ms-stage {
  max-width: 560px;
  margin: 0 auto;
}

#screen-mission .ms-eyebrow {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold);
}

#screen-mission .ms-prompt {
  margin: 0 0 16px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  text-wrap: balance;
}

#screen-mission .ms-prompt:focus {
  outline: none;
}

#screen-mission .ms-code {
  position: relative;
  box-sizing: border-box;
  margin: 0 0 16px;
  padding: 12px 14px;
  background: var(--code-bg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-family: var(--font-code);
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
  white-space: pre;
  tab-size: 4;
}

/* JS fits each block (shrink to 12.5px, then soft-wrap), so nothing should
   overflow. If something still does, it swipes with no scrollbar and a
   fade on the right edge. */
#screen-mission .ms-code--fit > code {
  display: block;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

#screen-mission .ms-code--fit > code::-webkit-scrollbar {
  display: none;
}

#screen-mission .ms-code--fit::after {
  content: "";
  position: absolute;
  top: 1px;
  right: 1px;
  bottom: 1px;
  width: 32px;
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: linear-gradient(to right, var(--code-bg-clear), var(--code-bg) 70%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms var(--ease-out);
}

#screen-mission .ms-code--fit.is-overflowing::after {
  opacity: 1;
}

#screen-mission .ms-code--fit.is-overflowing.is-at-end::after {
  opacity: 0;
}

#screen-mission .ms-code code {
  font: inherit;
}

#screen-mission .tk-str { color: var(--code-str); }
#screen-mission .tk-num { color: var(--code-num); }
#screen-mission .tk-kw { color: var(--code-kw); }
#screen-mission .tk-p { color: var(--code-punc); }

#screen-mission .ms-code--fill {
  display: flex;
  align-items: center;
  font-size: 17px;
  padding: 10px 16px;
}

/* The blank stays inline and its focus ring must not be clipped. */
#screen-mission .ms-code--fill > code {
  flex: 1;
  overflow: visible;
}

#screen-mission .ms-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 64px;
  min-height: 44px;
  margin: 0 3px;
  padding: 0 8px;
  border: 0;
  border-bottom: 1.5px dashed var(--line-strong);
  border-radius: 6px;
  background: var(--white-03);
  color: inherit;
  font: inherit;
  vertical-align: middle;
  cursor: pointer;
  touch-action: manipulation;
}

#screen-mission .ms-slot.is-filled {
  border-bottom-style: solid;
  border-bottom-color: var(--gold);
  background: var(--gold-soft);
}

#screen-mission .ms-slot.is-correct {
  border-bottom-color: var(--good);
  background: var(--good-soft);
}

#screen-mission .ms-slot.is-wrong {
  border-bottom-color: var(--bad);
  background: var(--bad-soft);
}

#screen-mission .ms-slot-inner {
  display: inline-block;
}

#screen-mission .ms-slot[aria-disabled="true"] {
  cursor: default;
}

/* chips and options */

#screen-mission .ms-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 20px;
}

#screen-mission .ms-chip,
#screen-mission .ms-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--surface-1);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 120ms var(--ease-out);
}

#screen-mission .ms-chip-txt {
  display: block;
  min-width: 0;
}

#screen-mission .ms-chip--code {
  font-family: var(--font-code);
  font-size: 15px;
  font-weight: 500;
}

#screen-mission .ms-chip:active,
#screen-mission .ms-option:active {
  transform: scale(.97);
}

#screen-mission .ms-chip.is-selected,
#screen-mission .ms-option.is-selected {
  border-color: var(--gold);
  background: var(--gold-soft);
}

#screen-mission .ms-chip.is-correct,
#screen-mission .ms-option.is-correct {
  border-color: var(--good);
  background: var(--good-soft);
}

#screen-mission .ms-chip.is-wrong,
#screen-mission .ms-option.is-wrong {
  border-color: var(--bad);
  background: var(--bad-soft);
}

#screen-mission .ms-chip[aria-disabled="true"],
#screen-mission .ms-option[aria-disabled="true"] {
  cursor: default;
}

#screen-mission .ms-chip[aria-disabled="true"]:active,
#screen-mission .ms-option[aria-disabled="true"]:active {
  transform: none;
}

#screen-mission .ms-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 4px 0 8px;
}

#screen-mission .ms-option {
  padding: 0 8px;
}

#screen-mission .ms-visual {
  margin: 0 0 16px;
}

#screen-mission .ms-hint {
  margin: -6px 0 0;
  font-size: 14px;
  color: var(--muted);
}

/* After Check: "You picked rows 0 (Ana) and 1 (Ben)". */
#screen-mission .ms-hint.is-result {
  line-height: 1.4;
}

#screen-mission .ms-pick {
  font-weight: 500;
  color: var(--text-2);
}

#screen-mission .ms-pick.is-wrong {
  color: var(--bad);
}

/* concept annotations */

#screen-mission .ms-visual--annotated .df-wrap {
  padding: 40px 0 0 64px;
}

@media (max-width: 359px) {
  #screen-mission .ms-visual--annotated .df-wrap {
    padding-left: 56px;
  }
}

#screen-mission .ms-annos,
#screen-mission .ms-anno {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

#screen-mission .ms-annos {
  z-index: 3;
}

#screen-mission .ms-anno-pill {
  position: absolute;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  height: 24px;
  padding: 0 9px;
  border-radius: 12px;
  background: var(--surface-2);
  box-shadow: 0 0 0 1px var(--gold-soft), 0 4px 12px var(--black-30);
  color: var(--gold);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

#screen-mission .ms-anno-line {
  position: absolute;
  background: var(--gold);
}

#screen-mission .ms-anno--top .ms-anno-line {
  transform-origin: center top;
}

#screen-mission .ms-anno--left .ms-anno-line {
  transform-origin: left center;
}

/* arrange */

#screen-mission .ms-line {
  display: flex;
  flex-direction: column;
  /* JS reserves the height of the tallest filled chain (a wrapped piece);
     split any spare space evenly instead of leaving it at the bottom. */
  justify-content: center;
  gap: 6px;
  margin-bottom: 12px;
  padding: 6px 8px 6px 6px;
  white-space: normal;
  overflow: visible;
}

#screen-mission .ms-line.is-correct {
  border-color: var(--good);
}

#screen-mission .ms-line.is-wrong {
  border-color: var(--bad);
}

#screen-mission .ms-arow {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

#screen-mission .ms-anum {
  flex: none;
  width: 16px;
  text-align: center;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}

#screen-mission .ms-aslot {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  min-width: 0;
  min-height: 44px;
  border: 1.5px dashed var(--line-strong);
  border-radius: 12px;
}

#screen-mission .ms-aslot.is-filled {
  border-color: transparent;
}

/* A placed chip covers the slot's border so a filled row stays 44px. */
#screen-mission .ms-aslot > .ms-piece {
  margin: -1.5px;
}

#screen-mission .ms-traywrap {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 16px;
}

#screen-mission .ms-tray {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#screen-mission .ms-home {
  display: inline-flex;
  box-sizing: border-box;
  max-width: 100%;
  border-radius: 12px;
}

/* JS pins an emptied home to the chip's size; only a quiet outline remains. */
#screen-mission .ms-home.is-empty {
  border: 1px dashed var(--white-12);
}

#screen-mission .ms-piece {
  position: relative;
  justify-content: flex-start;
  max-width: 100%;
  min-height: 44px;
  padding: 9px 12px;
  font-size: 13px;
  line-height: 1.4;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
}

#screen-mission .ms-piece.is-flying {
  z-index: 3;
  /* The FLIP owns transform while flying; no :active transition on top. */
  transition: none;
}

#screen-mission .ms-piece::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 5px;
  height: 2px;
  border-radius: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 260ms var(--ease-out);
}

#screen-mission .ms-piece.is-running::after {
  transform: scaleX(1);
}

#screen-mission .ms-undo {
  flex: none;
  color: var(--text-2);
  touch-action: manipulation;
}

/* footer and feedback sheet */

#screen-mission .ms-foot {
  flex: none;
  padding: 12px max(16px, var(--safe-r)) calc(12px + var(--safe-b)) max(16px, var(--safe-l));
  border-top: 1px solid var(--line);
  background: var(--mission-bg);
}

#screen-mission .ms-foot .btn,
#screen-mission .ms-fb .btn {
  touch-action: manipulation;
}

#screen-mission .ms-fb {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  padding: 20px max(16px, var(--safe-r), calc((100% - 560px) / 2)) calc(12px + var(--safe-b)) max(16px, var(--safe-l), calc((100% - 560px) / 2));
  background: var(--surface-2);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: 0 -1px 0 var(--line), 0 -14px 36px var(--black-40);
}

#screen-mission .ms-fb::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 56px;
  background: var(--surface-2);
}

#screen-mission .ms-fb-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

#screen-mission .ms-fb-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
}

#screen-mission .ms-fb-icon svg {
  display: block;
}

#screen-mission .ms-fb-icon.is-good {
  background: var(--good-soft);
  color: var(--good);
}

#screen-mission .ms-fb-icon.is-bad {
  background: var(--bad-soft);
  color: var(--bad);
}

#screen-mission .ms-fb-title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
}

#screen-mission .ms-fb.is-good .ms-fb-title {
  color: var(--good);
}

#screen-mission .ms-fb.is-bad .ms-fb-title {
  color: var(--bad);
}

#screen-mission .ms-fb-answer {
  margin: 0 0 8px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--text);
  overflow-wrap: anywhere;
}

#screen-mission .ms-fb-label {
  color: var(--muted);
}

#screen-mission .ms-fb-code {
  font-family: var(--font-code);
  font-size: 14px;
}

#screen-mission .ms-fb-text {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--text-2);
}

#screen-mission .ms-live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Short screens (e.g. 320x568): tighten the chrome, the feedback sheet and
   non-interactive tables so the chain and the table both fit above the
   sheet during the reveal. Touch targets stay at 44px or more.
   The second query is the Mac's phone outline: it is 48px shorter than the
   window, so a 688px window holds a 640px screen. */
@media (max-height: 760px), (max-width: 699px) and (max-height: 900px) {
  #screen-mission .ms-top {
    padding-top: calc(var(--safe-t) + 4px);
    padding-bottom: 2px;
  }

  #screen-mission .ms-body {
    padding-top: 14px;
  }

  #screen-mission .ms-prompt {
    margin-bottom: 12px;
    font-size: 19px;
  }

  #screen-mission .ms-code,
  #screen-mission .ms-visual {
    margin-bottom: 12px;
  }

  #screen-mission .ms-line {
    margin-bottom: 8px;
    padding: 4px 6px 4px 4px;
    gap: 4px;
  }

  #screen-mission .ms-piece {
    padding: 6px 10px;
  }

  #screen-mission .df:not(.df--marks) .df-row {
    min-height: 36px;
  }

  #screen-mission .df:not(.df--marks) .df-head {
    min-height: 32px;
  }

  #screen-mission .ms-fb {
    padding-top: 14px;
    padding-bottom: calc(10px + var(--safe-b));
  }

  #screen-mission .ms-fb-head {
    gap: 10px;
    margin-bottom: 6px;
  }

  #screen-mission .ms-fb-icon {
    width: 32px;
    height: 32px;
  }

  #screen-mission .ms-fb-title {
    font-size: 18px;
  }

  #screen-mission .ms-fb-answer {
    margin-bottom: 6px;
    font-size: 14px;
    line-height: 1.4;
  }

  #screen-mission .ms-fb-code {
    font-size: 13px;
  }

  #screen-mission .ms-fb-text {
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 1.4;
  }

  #screen-mission .ms-fb .btn {
    height: 44px;
  }
}

/* ---------- New screens, in the same vocabulary ---------- */

/* Code in a description keeps its syntax colours, and Python's error names read red.
   Prompts and answer options stay plain words, as in the previous lesson. */
#screen-mission .ic {
  color: var(--text);
  font-family: var(--font-code);
  font-size: .94em;
}

#screen-mission .ms-prompt .ic,
#screen-mission .ms-prompt .ic span,
#screen-mission .ms-option .ic,
#screen-mission .ms-option .ic span {
  color: inherit;
  font: inherit;
}

#screen-mission .tk-err {
  color: var(--code-err);
}

/* The way out after several misses: quiet, in the title row, so the sheet doesn't grow. */
#screen-mission .ms-fb-alt {
  flex: none;
  min-height: 44px;
  margin: -8px 0 -8px auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-2);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

#screen-mission .tk-com { color: var(--dim); }

/* #app lets code be selected; inside a button a long press should still press it. */
#screen-mission button code {
  -webkit-user-select: none;
  user-select: none;
}

/* One group of lines in a code card. */
#screen-mission .ms-lg {
  display: block;
}

/* A line still to come holds its place, so the card keeps one size. */
#screen-mission .ms-lg.is-later {
  visibility: hidden;
}

/* The same card, read as output: no syntax colours, exact pandas text. */
#screen-mission .ms-out-label {
  display: block;
  margin-bottom: 2px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--muted);
}

#screen-mission .ms-code--out mark {
  border-radius: 4px;
  background: var(--gold-soft);
  color: inherit;
}

#screen-mission .ms-text {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--text-2);
}

#screen-mission .ms-rule {
  color: var(--text);
}

#screen-mission .ms-list {
  display: grid;
  gap: 6px;
  margin: 0 0 12px;
}

#screen-mission .ms-list-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--text-2);
}

#screen-mission .ms-list-text {
  flex: 1;
  min-width: 0;
}

#screen-mission .ms-list-tag {
  flex: none;
  font-family: var(--font-code);
  font-size: 12px;
  color: var(--dim);
}

/* Two data cards share a row. */
#screen-mission .ms-visuals {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 16px;
}

#screen-mission .ms-visuals .ms-visual {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
}

#screen-mission .ms-visuals .ms-visual--narrow {
  flex: none;
}

/* Choose: the three ways an option can read. */
#screen-mission .ms-options--stack {
  grid-template-columns: minmax(0, 1fr);
}

#screen-mission .ms-option--text,
#screen-mission .ms-option--code {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 10px 14px;
  text-align: left;
}

#screen-mission .ms-option--text {
  line-height: 1.3;
}

#screen-mission .ms-option--code {
  font-family: var(--font-code);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  white-space: pre;
}

#screen-mission .ms-option--word {
  padding: 0 4px;
  font-family: var(--font-code);
  font-size: var(--ow-fs, 15px);
  font-weight: 500;
  white-space: pre;
}

#screen-mission .ms-option--output {
  flex-direction: column;
  padding: 10px var(--oc-pad, 8px);
  font-family: var(--font-code);
  font-size: var(--oc-fs, 13px);
  font-weight: 400;
  letter-spacing: var(--oc-ls, 0);
  line-height: 1.4;
  white-space: pre;
}

#screen-mission .ms-option--output > span {
  text-align: left;
}

/* A Series on its tile reads like the table above it. */
#screen-mission .ms-ot {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 1ch;
}

#screen-mission .ms-ot-i {
  color: var(--dim);
}

#screen-mission .ms-ot-v {
  text-align: right;
}

#screen-mission .ms-ot-c {
  grid-column: 1 / -1;
  color: var(--muted);
}

#screen-mission .ms-options--cards {
  gap: var(--oc-gap, 10px);
}

/* Output cards scroll sideways, inside their row, only if truly too narrow. */
#screen-mission .ms-options--scroll {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

#screen-mission .ms-options--scroll::-webkit-scrollbar {
  display: none;
}

#screen-mission .ms-options--scroll .ms-option--output {
  flex: none;
  width: var(--oc-w);
}

#screen-mission .ms-option-sub {
  display: block;
  margin-top: 2px;
  font-family: var(--font-code);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--muted);
  overflow-wrap: anywhere;
  white-space: normal;
}

/* iOS will not type into a field under -webkit-user-select: none (#app). */
#screen-mission input {
  -webkit-user-select: text;
  user-select: text;
}

/* Fill: a typed blank is a real input in the same slot. */
/* A template too wide for a narrow phone swipes inside its card. */
#screen-mission .ms-code--fill.is-overflowing > code {
  overflow-x: auto;
}

#screen-mission .ms-slot--input {
  padding: 0 6px;
  cursor: text;
}

#screen-mission .ms-slot--input:focus-within {
  border-bottom-style: solid;
  border-bottom-color: var(--gold);
}

#screen-mission .ms-slot.is-active {
  border-bottom-color: var(--gold);
}

#screen-mission .ms-slot-input {
  min-width: 44px;
  height: 42px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: none;
  background: transparent;
  color: inherit;
  caret-color: var(--gold);
  font-family: var(--font-code);
  /* iOS zooms into a field below 16px. */
  font-size: max(16px, 1em);
  font-weight: 400;
  text-align: center;
  -webkit-appearance: none;
  appearance: none;
}

#screen-mission .ms-hintbtn {
  flex: none;
  margin-left: auto;
  color: var(--text-2);
  touch-action: manipulation;
}

/* Build: one line of tiles that flow and wrap. */
#screen-mission .ms-line--flow {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: center;
  justify-content: flex-start;
}

#screen-mission .ms-line--flow .ms-aslot {
  flex: none;
  justify-content: center;
  width: 34px;
}

#screen-mission .ms-line--flow .ms-aslot.is-filled {
  width: auto;
  max-width: 100%;
}

/* Over the slot's border, as a placed chip always sits, with its full width to itself. */
#screen-mission .ms-line--flow .ms-aslot > .ms-piece {
  max-width: calc(100% + 3px);
}

#screen-mission .ms-line--flow .ms-aslot.is-filled .ms-anum {
  display: none;
}

#screen-mission .ms-line--flow .ms-piece {
  flex: none;
}

#screen-mission .ms-traytools {
  flex: none;
  display: flex;
  gap: 4px;
}

#screen-mission .ms-traytools.is-stack {
  flex-direction: column;
}

/* Symbols above the footer button. */
#screen-mission .ms-footx {
  margin-bottom: 8px;
}

#screen-mission .ms-footx:empty {
  display: none;
}

#screen-mission .ms-keys {
  display: flex;
  gap: 4px;
}

#screen-mission .ms-keys + .ms-keys {
  margin-top: 4px;
}

#screen-mission .ms-key {
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
  padding: 0;
  border-radius: 10px;
}

#screen-mission .ms-keys--wide {
  flex-wrap: wrap;
}

#screen-mission .ms-keys--wide .ms-key {
  flex: 0 1 auto;
  padding: 0 10px;
}

#screen-mission .ms-foot-help {
  margin: 0 0 8px;
}

#screen-mission .ms-fb-icon.is-info {
  background: var(--white-10);
  color: var(--text-2);
}

/* The question mark's sheet. */
#screen-mission .ms-scrim {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  background: var(--scrim);
}

#screen-mission .ms-panel {
  z-index: 6;
}

#screen-mission .ms-panel.is-tall {
  max-height: calc(100% - var(--safe-t) - 12px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

#screen-mission .ms-panel.is-tall::after {
  content: none;
}

#screen-mission .ms-hints {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: baseline;
  gap: 8px 12px;
  margin: 0 0 16px;
}

#screen-mission .ms-hints-code {
  font-family: var(--font-code);
  font-size: 13px;
  white-space: pre;
}

#screen-mission .ms-hints-say {
  font-size: 14px;
  line-height: 1.4;
  color: var(--text-2);
}

#screen-mission .ms-panel-btns {
  display: grid;
  gap: 8px;
}

/* ---------- Fit: no screen scrolls ---------- */

/* What the feedback sheet folded away. */
#screen-mission .is-folded {
  display: none;
}

/* Used by type, parsons and project until they are redrawn. */
#screen-mission .gone {
  display: none;
}

/* JS sets fit-1, then fit-2, then fit-3 on the stage when a screen would
   otherwise scroll. Touch targets stay at 44px, code at 12.5px and table
   text at 12px. */
#screen-mission .fit-1 {
  margin-top: -6px;
  margin-bottom: -14px;
}

#screen-mission .fit-1 .ms-eyebrow {
  margin-bottom: 4px;
}

#screen-mission .fit-1 .ms-prompt {
  margin-bottom: 8px;
}

#screen-mission .fit-1 .ms-code,
#screen-mission .fit-1 .ms-visual,
#screen-mission .fit-1 .ms-visuals {
  margin-bottom: 8px;
}

#screen-mission .fit-1 .ms-visuals .ms-visual {
  margin-bottom: 0;
}

#screen-mission .fit-1 .ms-code {
  padding: 8px 12px;
}

#screen-mission .fit-1 .ms-code--fill {
  padding: 6px 12px;
}

#screen-mission .fit-1 .ms-line {
  margin-bottom: 6px;
  padding: 4px;
}

#screen-mission .fit-1 .ms-traywrap {
  margin-bottom: 8px;
}

#screen-mission .fit-1 .ms-chips {
  gap: 8px;
  margin-bottom: 8px;
}

#screen-mission .fit-1 .ms-options {
  gap: 8px;
  margin: 0 0 4px;
}

#screen-mission .fit-1 .ms-option--text,
#screen-mission .fit-1 .ms-option--code {
  padding: 6px 12px;
}

#screen-mission .fit-1 .ms-text {
  margin-bottom: 8px;
}

#screen-mission .fit-2 .ms-prompt {
  font-size: 18px;
  line-height: 1.25;
}

#screen-mission .fit-2 .ms-code {
  font-size: 13px;
  line-height: 1.45;
}

#screen-mission .fit-2 .ms-code--fill {
  font-size: 15px;
}

#screen-mission .fit-2 .df {
  font-size: 13px;
}

#screen-mission .fit-2 .df:not(.df--marks) .df-row {
  min-height: 30px;
}

#screen-mission .fit-2 .df:not(.df--marks) .df-head {
  min-height: 28px;
  font-size: 12px;
}

#screen-mission .fit-2 .ms-chip,
#screen-mission .fit-2 .ms-option {
  min-height: 44px;
}

#screen-mission .fit-2 .ms-option--text {
  font-size: 15px;
}

#screen-mission .fit-2 .ms-option--output {
  padding: 8px var(--oc-pad, 8px);
  line-height: 1.3;
}

#screen-mission .fit-2 .ms-text {
  font-size: 14px;
  line-height: 1.4;
}

#screen-mission .fit-3 {
  margin-top: -10px;
  margin-bottom: -20px;
}

/* Only when nothing else is left to give: JS sets it. */
#screen-mission .ms-shell.is-tight .ms-foot {
  padding-top: 8px;
  padding-bottom: calc(8px + var(--safe-b));
}

#screen-mission .ms-shell.is-tight .ms-foot .btn {
  height: 44px;
}

#screen-mission .fit-3 .ms-eyebrow {
  margin-bottom: 2px;
}

#screen-mission .fit-3 .ms-prompt {
  margin-bottom: 6px;
  font-size: 17px;
  line-height: 1.2;
}

#screen-mission .fit-3 .ms-code {
  margin-bottom: 6px;
  padding: 6px 10px;
  font-size: 12.5px;
  line-height: 1.4;
}

#screen-mission .fit-3 .ms-code--fill {
  padding: 4px 10px;
  font-size: 14px;
}

#screen-mission .fit-3 .df {
  font-size: 12px;
}

#screen-mission .fit-3 .df:not(.df--marks) .df-row {
  min-height: 26px;
}

#screen-mission .fit-3 .df:not(.df--marks) .df-head {
  min-height: 24px;
}

#screen-mission .fit-3 .ms-visual,
#screen-mission .fit-3 .ms-visuals {
  margin-bottom: 6px;
}

#screen-mission .fit-3 .ms-option--text {
  padding: 4px 10px;
  font-size: 14px;
}

#screen-mission .fit-3 .ms-option--code {
  padding: 4px 10px;
  font-size: 14px;
}

#screen-mission .fit-3 .ms-option--output {
  padding: 6px var(--oc-pad, 8px);
}

#screen-mission .fit-3 .ms-line {
  gap: 4px;
}

#screen-mission .fit-3 .ms-piece {
  padding: 4px 6px;
  font-size: 12.5px;
}

#screen-mission .fit-3 .ms-line--flow .ms-aslot:not(.is-filled) {
  width: 26px;
}

#screen-mission .fit-3 .ms-chips,
#screen-mission .fit-3 .ms-options {
  gap: 6px;
  margin-bottom: 4px;
}

#screen-mission .fit-3 .ms-tray {
  gap: 6px;
}

#screen-mission .fit-3 .ms-traywrap {
  margin-bottom: 6px;
}

#screen-mission .fit-3 .ms-text {
  margin-bottom: 6px;
  font-size: 13.5px;
  line-height: 1.35;
}

/* With the keyboard up the body moves, so the focused blank stays in view. */
#screen-mission .ms-shell.kb .ms-foot {
  padding-top: 6px;
  padding-bottom: 6px;
}

#screen-mission .ms-shell.kb .ms-footx {
  margin-bottom: 6px;
}

#screen-mission .ms-shell.kb .ms-hint {
  display: none;
}

#screen-mission .ms-shell.kb-tight .ms-top {
  display: none;
}

#screen-mission .ms-shell.kb-tight .ms-body {
  padding-top: calc(var(--safe-t) + 6px);
}

/* ---------- Win screen, design/win-screen/SPEC.md ---------- */

/* Its colours, and the only place they are set. Navy for now, by the founder's word: "go now
   with the navy setting, and we change it later". --text, --muted and --good are the app's. To
   go back to graphite, as SPEC.md has it, point these at the --graphite-* tokens in base.css,
   and set --text, --muted and --good from them too. */
#screen-complete {
  --bg: var(--mission-bg);
  --s1: var(--surface-1);
  --tok: var(--win-ring);
  --paper: var(--gold);
  --ink: var(--gold-ink);
  --lip: var(--gold-lip);
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
}

#screen-complete :focus-visible {
  outline-color: var(--paper);
}

#screen-complete .win-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#screen-complete .win-body {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  padding: max(50px, calc(var(--safe-t) + 16px)) max(16px, var(--safe-r)) 12px max(16px, var(--safe-l));
}

/* Centred above the footer. Auto margins collapse to 0 when it overflows, so
   a very short screen scrolls from the top. */
#screen-complete .win-body > :first-child {
  margin-top: auto;
}

#screen-complete .win-body > :last-child {
  margin-bottom: auto;
}

#screen-complete .win-cub {
  flex: none;
  align-self: center;
  width: 68px;
  margin-bottom: 12px;
}

#screen-complete .win-cub svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

#screen-complete .win-title {
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -.02em;
  text-align: center;
}

#screen-complete .win-title:focus {
  outline: none;
}

#screen-complete .win-sub {
  margin: 4px 0 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  color: var(--muted);
}

#screen-complete .win-stats {
  flex: none;
  display: flex;
  justify-content: space-between;
  margin-top: 24px;
}

#screen-complete .win-stat {
  width: 112px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

#screen-complete .win-ring {
  position: relative;
  width: 98px;
  height: 98px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#screen-complete .win-ring svg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

#screen-complete .win-ring circle {
  fill: var(--s1);
  stroke: var(--tok);
}

#screen-complete .win-ring .win-lit {
  fill: none;
  stroke: var(--good);
}

#screen-complete .win-val {
  position: relative;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.01em;
  white-space: nowrap;
}

#screen-complete .win-unit {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
}

#screen-complete .win-label {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--muted);
  white-space: nowrap;
}

#screen-complete .win-streak {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 14px 0 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}

#screen-complete .win-streak svg {
  flex: none;
  color: var(--paper);
}

#screen-complete .win-foot {
  flex: none;
  padding: 12px max(16px, var(--safe-r)) calc(12px + var(--safe-b)) max(16px, var(--safe-l));
}

#screen-complete .win-btn {
  display: block;
  width: 100%;
  height: 56px;
  border: 0;
  border-radius: 28px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 17px;
  font-weight: 600;
  text-align: center;
  box-shadow: 0 4px 0 0 var(--lip);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 120ms var(--ease-out);
}

#screen-complete .win-btn:active {
  transform: scale(.97);
}

/* The last lesson: the waiting list is the primary action, Continue stays plain. */
#screen-complete .win-btn--plain {
  margin-top: 14px;
  background: var(--s1);
  color: var(--text);
  box-shadow: none;
}

@keyframes cub-squish {
  0%   { transform: scale(1, 1); }
  20%  { transform: scale(1.09, .9); }
  47%  { transform: scale(.96, 1.05); }
  73%  { transform: scale(1.02, .98); }
  100% { transform: scale(1, 1); }
}

@keyframes cub-hide { 0%, 100% { opacity: 0; } }
@keyframes cub-show { 0%, 100% { opacity: 1; } }

#screen-complete .cub-squish { transform-origin: 50% 100%; animation: cub-squish 1080ms 500ms both; }
#screen-complete .cub-open { opacity: 1; animation: cub-hide 900ms 500ms; }
#screen-complete .cub-shut { opacity: 0; animation: cub-show 900ms 500ms; }

@media (max-width: 359px) {
  #screen-complete .win-stats {
    gap: 4px;
  }

  #screen-complete .win-stat {
    flex: 1;
    width: auto;
    min-width: 0;
  }

  #screen-complete .win-ring {
    width: 84px;
    height: 84px;
  }

  #screen-complete .win-val {
    font-size: 20px;
  }

  #screen-complete .win-label {
    white-space: normal;
    text-align: center;
  }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .df-state,
  #screen-mission .ms-code--fit::after,
  #screen-mission .ms-piece::after,
  #screen-mission .ms-chip,
  #screen-mission .ms-option,
  #screen-complete .win-btn {
    transition: none;
  }

  #screen-complete .cub-squish,
  #screen-complete .cub-open,
  #screen-complete .cub-shut {
    animation: none;
  }

  #screen-complete .cub-open { opacity: 0; }
  #screen-complete .cub-shut { opacity: 1; }
}