/* Phone and small tablet mode. Below 1024px the fixed 16:9 stage is abandoned
   for a normal scrolling document: the rail becomes a horizontal tab strip,
   every split stacks to one column, and the type scale comes down. The same
   breakpoint is mirrored in js/stage.js and js/idle.js. */

@media (max-width: 1023px) {

  :root {
    --gutter: 20px;
    --t-mega: 64px;
    --t-huge: 52px;
    --t-name: 40px;
    --t-chapter: 22px;
    --t-lead: 22px;
    --t-body: 17px;
    --t-caption: 14px;
    --t-data: 12px;
    --t-tick: 11px;
    --touch-min: 56px;
    --touch-primary: 64px;
  }

  html, body { overflow: auto; height: auto; }
  body { -webkit-user-select: text; user-select: text; }

  .frame { position: static; overflow: visible; background: var(--bg); }
  #stage {
    position: static;
    width: auto !important;
    height: auto !important;
    transform: none !important;
    overflow: visible;
    min-height: 100vh;
  }

  .gridlines, .regmark, .krail__foot, [data-fullscreen], .idleveil { display: none !important; }

  /* ---- Header: mark and actions on one row, exhibit title beneath ---- */
  .khead {
    position: sticky;
    top: 0;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 10px 0 0;
  }
  .khead__mark { padding-left: var(--gutter); flex: 1 1 auto; }
  .mark__word { font-size: 20px; }
  .mark__slot { font-size: 9px; letter-spacing: 0.16em; }
  .khead__right { flex: 0 0 auto; height: auto; padding-right: 8px; }
  .slab { min-width: 0; min-height: 44px; padding: 0 12px; font-size: 11px; letter-spacing: 0.08em; border-left: 0; }
  .khead__center {
    order: 3;
    flex: 1 1 100%;
    padding: 10px var(--gutter) 12px;
    gap: 12px;
  }
  .khead__no { font-size: 12px; letter-spacing: 0.14em; white-space: nowrap; flex: none; }
  .khead__title { font-size: 18px; white-space: normal; line-height: 1.1; }

  /* ---- Rail: horizontal tab strip ---- */
  .krail {
    position: static;
    width: auto;
    border-right: 0;
    border-bottom: 1px solid var(--rule);
  }
  .krail__list { flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .krail__list::-webkit-scrollbar { display: none; }
  .chapbtn {
    flex: 0 0 auto;
    min-width: 108px;
    grid-template-columns: auto 1fr;
    gap: 8px;
    padding: 0 16px;
    border-bottom: 0;
    border-right: 1px solid var(--rule);
  }
  .chapbtn__no { font-size: 11px; text-align: left; }
  .chapbtn__sub { display: none; }
  .chapbtn::before {
    top: auto; bottom: 0; left: 0; right: 0;
    width: auto; height: 4px;
    transform: scaleX(0);
    transform-origin: left center;
  }
  .chapbtn[aria-selected="true"]::before { transform: scaleX(1); }

  /* ---- Panels flow instead of stacking in a fixed box ---- */
  .kbody { position: static; overflow: visible; }
  .panel { position: static; padding: 22px var(--gutter) 40px; }
  .panel.is-active { display: block; }

  .split, .split--wide-left, .split--wide-right, .split--even,
  .genes, .depth, .quiz {
    display: flex;
    flex-direction: column;
    gap: 22px;
    height: auto;
  }
  .stack--push { justify-content: flex-start; gap: 22px; }
  .stack--gap { gap: 22px; }
  .fill { height: auto; }
  .measure, .measure--tight { max-width: none; }

  /* Plates need a real height once they stop being flex-filled */
  .plate { flex: none; width: 100%; aspect-ratio: 4 / 3; }
  .plate--short, .plate--band { aspect-ratio: 2 / 1; }
  .plate__cap { padding: 12px 14px; font-size: 10px; letter-spacing: 0.12em; }

  .headline { font-size: var(--t-huge); }
  .headline--mega { font-size: var(--t-mega); }
  .subhead { font-size: 30px; }
  .eyebrow { font-size: 12px; letter-spacing: 0.2em; }
  .pull { font-size: 22px; padding-left: 18px; border-left-width: 4px; }
  .copy { font-size: var(--t-body); }
  .row { grid-template-columns: 48px 1fr; gap: 12px; padding: 14px 0; }
  .row__t { font-size: 22px; }
  .row__d { font-size: 16px; }
  .row__n { font-size: 12px; padding-top: 4px; }

  .record { grid-template-columns: 1fr 1fr; }
  .record__cell { padding: 14px 12px 0 0; }
  .record__cell:nth-child(2n) { border-right: 0; }
  .record__cell:nth-child(n+3) { border-top: 1px solid var(--rule); margin-top: 12px; }
  .record__v { font-size: 26px; }
  .record__u { font-size: 12px; }
  .record--stack .record__k { min-height: 0; }
  .record--stack .record__v { font-size: 26px; }
  .record + .tick { margin-top: 12px; }
  .divider-wave { height: 28px; }

  /* ---- Anatomy ---- */
  .anat { height: auto; aspect-ratio: 3 / 2; }
  .spot { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
  .spot__ring { width: 30px; height: 30px; font-size: 12px; border-width: 1.5px; }
  .spot__pulse { display: none; }
  .readout { height: auto; }
  .readout__t { font-size: 30px; }
  .readout__d { font-size: 17px; overflow: visible; padding-right: 0; }
  .readout__hint { font-size: 17px; padding: 20px 18px; }

  /* ---- Depth dial: image full width, then dial beside the readouts ---- */
  .depth { display: grid; grid-template-columns: 112px 1fr; gap: 18px; }
  .column { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
  .column__ledger { left: 16px; right: 16px; bottom: 14px; }
  .column__zone { font-size: 26px; }
  .column__note { font-size: 14px; margin-top: 6px; }
  .column__lamp { right: 12px; top: 12px; min-height: 44px; padding: 0 14px; font-size: 11px; }
  .dial { height: 470px; }
  .dial__label { font-size: 10px; letter-spacing: 0.12em; }
  .dial__hint { font-size: 10px; letter-spacing: 0.1em; padding-top: 10px; }
  .dial__handle { height: 84px; left: -6px; right: -6px; }
  .dial__readdepth { font-size: 28px; }
  .dial__readunit { font-size: 10px; }
  .dial__grip { display: none; }
  .dial__meso span { display: none; }
  .dial__tick span { font-size: 10px; left: 8px; }
  .gauge { padding: 12px 0 14px; }
  .gauge__v { font-size: 30px; }
  .gauge__u { font-size: 11px; }
  .band__swatch { height: 18px; }
  .band { grid-template-columns: 1fr 46px; }
  .presets { gap: 6px; }
  .preset { min-height: 48px; font-size: 12px; }
  .spectrum + .gauge__k { margin-top: 18px; }

  /* ---- Genetics ---- */
  .pairbtn { min-height: 56px; padding: 0 14px; }
  .pairbtn__t { font-size: 17px; }
  .pairbtn__g { font-size: 13px; }
  .punnett { height: 200px; grid-template-columns: 48px 1fr 1fr; grid-template-rows: 44px 1fr 1fr; }
  .punnett__h { font-size: 18px; }
  .punnett__geno { font-size: 20px; }
  .punnett__pheno { font-size: 10px; }
  .litter { gap: 8px; }
  .cub__tag { padding: 8px 6px; font-size: 10px; }
  .cub__eye { width: 18px; height: 18px; top: 8px; right: 8px; }
  .cub__slotno { font-size: 10px; top: 8px; left: 8px; }
  .tally__v { font-size: 28px; }
  .btn-run { width: 100%; min-height: var(--touch-primary); padding: 0 20px; font-size: 15px; }
  .btn-ghost { min-height: var(--touch-primary); padding: 0 18px; font-size: 14px; }
  .caution { font-size: 16px; padding: 12px 0 12px 16px; }

  /* ---- Quiz ---- */
  .quiz__q { font-size: 30px; }
  .quiz__plate { flex: none; aspect-ratio: 4 / 3; margin-top: 16px; }
  .answer { grid-template-columns: 52px 1fr 84px; min-height: 64px; padding: 12px 14px 12px 0; gap: 12px; }
  .answer__key { font-size: 16px; }
  .answer__t { font-size: 17px; }
  .answer__mark { font-size: 11px; }
  .verdict__t { font-size: 22px; }
  .verdict__d { font-size: 16px; }
  .verdict__row { flex-wrap: wrap; }
  .quizdone__score { font-size: 96px; }
  .quizdone__t { font-size: 30px; }
  .quizdone__d { font-size: 17px; }
  .quizdone__row { flex-direction: column; }
}