/* The chapter flow: a beat track, a stage that always fits, and a footer.
   Every screen: a picture column and a words column on one grid. The layout
   follows the stage (the content area), not the window, so the navigation
   beside it never throws it off. */
:root { --inner: 72rem; }
.flow { block-size: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr); min-inline-size: 0; }
.fl-head, .fl-foot { padding-inline: max(var(--pg), (100% - var(--inner)) / 2); }
.fl-head { padding-block: .85rem .35rem; display: grid; gap: .55rem; }
.fl-title { display: flex; align-items: baseline; gap: .8rem; min-inline-size: 0; }
.fl-title .eyebrow { margin: 0; flex: none; }
.fl-h { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 1.3rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Six equal columns that widen for a long name. flow.js marks the track tight when the names do not fit. */
.fl-beats { display: flex; gap: .45rem; min-inline-size: 0; }
.fl-beat { flex: 1 1 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .4rem; text-align: start; padding-block: .2rem; min-inline-size: max-content; }
.fl-bl { display: flex; gap: .35rem; align-items: center; font-size: 0.72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; min-inline-size: 0; }
.fl-bl span { overflow: hidden; text-overflow: ellipsis; }
.fl-bl .ico { inline-size: .95rem; block-size: .95rem; color: var(--l3); flex: none; }
.fl-beat[data-done] .fl-bl .ico { color: var(--brass); }
.fl-beat[data-now] .fl-bl { color: var(--ink); }
.fl-beat[data-now] .fl-bl .ico { color: var(--brass); }
.fl-segs { display: flex; gap: 2px; }
.fl-segs i { flex: 1; block-size: 3px; border-radius: 3px; background: var(--hair); transition: background var(--mid) var(--ease); }
.fl-segs i[data-seen] { background: var(--l3); }
.fl-segs i[data-now] { background: var(--brass); }
.fl-beat:hover .fl-segs i { background: var(--l3); }
.fl-beats[data-tight] { gap: .25rem; }
.fl-beats[data-tight] .fl-bl { letter-spacing: .12em; }
.fl-beats[data-tight] .fl-beat { min-inline-size: 0; }
.fl-beats[data-tight] .fl-beat[data-now] { flex: 3.2 1 0; min-inline-size: max-content; }
.fl-beats[data-tight] .fl-beat:not([data-now]) .fl-bl span { display: none; }
@container (max-width: 699px) { .fl-title .eyebrow { display: none; } }
.fl-stage { position: relative; overflow: hidden; container-type: size; container-name: stage; }
/* A sideways swipe changes the screen, so the browser may only pan up and down here. */
.fl-stage, .sc-text { touch-action: pan-y; }
.fl-foot { border-block-start: 1px solid var(--hair); padding-block: .65rem calc(env(safe-area-inset-bottom) + .65rem); display: grid; grid-template-columns: auto 1fr auto; gap: .75rem; align-items: center; background: var(--paper); }
.fl-foot .btn { min-block-size: 2.8rem; white-space: nowrap; }
.fl-foot .btn[disabled] { opacity: .35; }
.fl-count { justify-self: center; white-space: nowrap; font-size: .78rem; letter-spacing: .18em; color: var(--muted); font-variant-numeric: tabular-nums lining-nums; }
.fl-foot [data-fl-next] { min-inline-size: 0; max-inline-size: 100%; justify-self: end; }
.fl-foot [data-fl-next] > span { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 480px) {
  .fl-foot { grid-template-columns: auto minmax(0, 1fr); }
  .fl-foot [data-fl-prev] { inline-size: 2.8rem; padding: 0; }
  .fl-foot [data-fl-prev] [data-draft] { display: none; }
  .fl-count { display: none; }   /* the beat track above already says where you are */
  .fl-foot .btn { letter-spacing: .12em; padding-inline: 1.1rem; }
}
.screen { position: absolute; inset: 0; }
.screen[data-leaving] { pointer-events: none; }

/* one grid for every screen: picture or exercise first, words second */
.sc {
  inline-size: min(100% - 2 * var(--pg), var(--inner)); margin-inline: auto; block-size: 100%;
  padding-block: clamp(.75rem, 2.2vh, 1.75rem);
  display: grid; gap: clamp(1rem, 2.4vh, 1.5rem);
  grid-template-columns: minmax(0, 1fr);
  /* Stacked: the picture takes its share (--p) while the words fit. When the words need more, the picture
     gives way by exactly that much, down to its floor (--pmin); only then do the words scroll. */
  --p: 40%; --pmin: 7rem; --chrome: 4.75rem;
  grid-template-rows: minmax(var(--pmin), var(--p)) minmax(min-content, 1fr);
}
.sc[data-layout="game"], .sc[data-layout="tall"] { --p: 56%; }
.sc[data-layout="read"] { --p: 30%; }
@container stage (min-width: 720px) and (orientation: landscape) {
  .sc, .sc[data-layout="game"], .sc[data-layout="tall"], .sc[data-layout="read"] { grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(2.5rem, 5vw, 5rem); padding-block: clamp(1.5rem, 4.5vh, 3.25rem); }
  .sc[data-layout="game"] { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .sc-body { font-size: 1.08rem; }
}

/* the picture column */
.sc-media { position: relative; margin: 0; min-block-size: 0; border-radius: 8px; overflow: hidden; background: var(--linen); }
.sc-media > img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: center 60%; }
.sc-fit { container-type: size; min-block-size: 0; display: grid; place-items: start; }
.sc-fit > .frame { position: relative; aspect-ratio: var(--ar); inline-size: min(100cqw, 100cqh * (var(--ar))); border-radius: 8px; overflow: hidden; background: var(--linen); }
.sc-fit .compare { block-size: 100%; border-radius: 0; }
.sc-fit .compare > img, .sc-fit .compare .over img { block-size: 100%; object-fit: cover; }
.sc-tag { position: absolute; z-index: 3; inset-block-start: .75rem; inset-inline-start: .75rem; padding: .35rem .8rem; border-radius: 999px; font-size: 0.72rem; letter-spacing: .16em; text-transform: uppercase; transition: background var(--mid) var(--ease), color var(--mid) var(--ease); }
.sc-tag[data-level="2"] { background: var(--l2); color: var(--ink); }
.sc-tag[data-level="3"] { background: var(--l3); color: var(--ink); }

/* the words column: top-aligned, the eyebrow sits on the same line on every screen */
.sc-text { min-block-size: 0; max-block-size: calc(100cqb - var(--pmin) - var(--chrome)); overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: .95rem; padding-block-end: .5rem; scrollbar-width: thin; }
.sc-text > * { margin: 0; flex: none; }
.sc-text .eyebrow { margin: 0; display: inline-flex; gap: .45rem; align-items: center; }
.sc-practice .ico { inline-size: 1.05rem; block-size: 1.05rem; }
.sc-title { font-family: var(--serif); font-weight: 500; font-size: clamp(1.8rem, 3.4vw, 3rem); line-height: 1.06; letter-spacing: -.005em; outline: none; }
.sc-over { display: block; font-family: var(--sans); font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--brass); margin-block-end: .3rem; }   /* which Day a result belongs to */
.sc-title-xl { font-size: clamp(2.5rem, 5.8vw, 4.9rem); line-height: 1; }
.sc-body { line-height: 1.6; }
.sc-lead { font-size: calc(var(--step) * 1.18); line-height: 1.55; }
.sc-meta { display: flex; gap: 1rem; font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.sc-meta span { display: inline-flex; gap: .45rem; align-items: center; }
.sc-hint { font-size: .86rem; color: var(--muted); }
.sc-hint span { display: inline-flex; gap: .45rem; align-items: center; color: var(--brass); }
.sc-hint .ico { inline-size: 1rem; block-size: 1rem; }
.sc-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.sc-text { position: relative; }
/* on a phone an exercise's buttons never scroll away: they hold the bottom of the words */
@container stage (orientation: portrait) {
  .sc-text > .sc-actions { position: sticky; inset-block-end: 0; margin-block-start: auto; padding-block: .6rem .1rem; background: var(--paper); z-index: 2; flex-wrap: nowrap; }
  .sc-actions .btn.small { padding-inline: .9rem; }
  .sc-actions [data-again] { inline-size: 2.5rem; padding: 0; flex: none; }
  .sc-actions [data-again] [data-draft] { display: none; }
}
.sc-text .yours q { font-size: 1.2rem; }
.sc-text .callout { padding: 1.15rem 1.25rem; }

/* level list beside the slider */
.lv-list { list-style: none; padding: 0; display: grid; gap: .9rem; }
.lv-list li { display: grid; grid-template-columns: 1.1rem 1fr; gap: .9rem; }
.lv-list b { font-weight: 400; font-family: var(--serif); font-size: 1.35rem; line-height: 1.2; }
.lv-list p { margin: .2rem 0 0; color: var(--deep); }
.lv-sw { inline-size: 1.1rem; block-size: 1.1rem; border-radius: 3px; margin-block-start: .35rem; }
.lv-sw { outline: 1px solid var(--ink); }
.lv-sw[data-level="1"] { background: var(--l1); } .lv-sw[data-level="2"] { background: var(--l2); } .lv-sw[data-level="3"] { background: var(--l3); } .lv-sw[data-level="4"] { background: var(--l4); } .lv-sw[data-level="5"] { background: var(--l5); }

/* the steps, one at a time */
.stepcard { min-block-size: 0; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto auto; gap: clamp(.5rem, 1.6vh, 1rem); padding: clamp(1.1rem, 3vw, 2.25rem); border: 1px solid var(--hair); border-radius: 12px; background: var(--white); }
.stepcard .eyebrow { margin: 0; }
.stepcard-n { font-family: var(--serif); font-size: clamp(3.6rem, 11vh, 7.5rem); line-height: .85; color: var(--brass); }
.stepcard-t { margin: 0; font-size: clamp(1.25rem, 2.4vw, 1.85rem); line-height: 1.35; overflow-y: auto; }
.stepcard-nav { display: grid; grid-template-columns: auto 1fr auto; gap: .6rem; align-items: center; }
.stepcard-nav .btn { inline-size: 100%; }
.icon-btn.ring { border: 1px solid var(--edge); }
.icon-btn[disabled] { opacity: .3; pointer-events: none; }
.stepdots { display: flex; gap: .35rem; justify-content: center; }
.stepdots i { inline-size: .45rem; block-size: .45rem; border-radius: 50%; background: var(--hair); transition: all var(--fast) var(--ease); }
.stepdots i[data-on] { background: var(--l3); }
.stepdots i[data-now] { inline-size: 1.3rem; border-radius: 999px; background: var(--brass); }
.steplist { list-style: none; padding: 0; border-block-start: 1px solid var(--hair); }
.steplist button { inline-size: 100%; display: grid; grid-template-columns: 2.1rem 1fr 1.4rem; gap: .6rem; align-items: center; padding-block: .55rem; border-block-end: 1px solid var(--hair); text-align: start; font-size: .92rem; line-height: 1.4; color: var(--deep); }
.sl-n { font-family: var(--serif); font-size: 1.1rem; color: var(--brass); }
.sl-box { inline-size: 1.3rem; block-size: 1.3rem; border-radius: 50%; border: 1.5px solid var(--l3); display: grid; place-items: center; color: transparent; }
.sl-box .ico { inline-size: .8rem; block-size: .8rem; stroke-width: 2.2; }
.steplist button[data-done] .sl-box { background: var(--brass); border-color: var(--brass); color: var(--paper); }
.steplist button[aria-current="true"] { color: var(--ink); }
.steplist button[aria-current="true"] .sl-t { text-decoration: underline; text-decoration-color: var(--brass); text-underline-offset: .3em; }

/* notice: the photo with its spots */
.frame.hot img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.hot-count { display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.hot-pips { display: flex; gap: .3rem; }
.hot-pips i { inline-size: 1.4rem; block-size: 4px; border-radius: 4px; background: var(--hair); transition: background var(--mid) var(--ease); }
.hot-pips i[data-on] { background: var(--brass); }
.found-list.compact { padding: 0; margin: 0; gap: .45rem; }
.found-list.compact li { padding: .6rem .75rem; }
.found-list.compact b { font-size: 1.1rem; }
.found-list.compact p { font-size: .88rem; }

/* feedback under an exercise */
.sc-feedback { padding: .9rem 1rem; border-radius: 8px; background: var(--linen); border-inline-start: 3px solid var(--brass); }
.sc-feedback[data-tone="wrong"] { border-inline-start-color: var(--deep); background: var(--l1); }
.sc-feedback-h { margin: 0; font-family: var(--serif); font-size: 1.3rem; line-height: 1.25; color: var(--brass); }
.sc-feedback[data-tone="wrong"] .sc-feedback-h { color: var(--deep); }
.sc-feedback-b { margin: .3rem 0 0; font-size: .95rem; }
.sc-feedback-b:empty { display: none; }

/* reset the surface: the drawn scene, the boxes, the moving objects */
.game { position: relative; min-block-size: 0; container-type: size; display: grid; grid-template-rows: auto auto; align-content: start; gap: .7rem; }
.scene { min-block-size: 0; }
.scene-frame { position: relative; aspect-ratio: 3 / 2; inline-size: min(100cqw, (100cqh - var(--zones-h, 7.4rem) - .7rem) * 1.5); border-radius: 8px; overflow: hidden; border: 1px solid var(--hair); cursor: default; }
.scene-bg { inline-size: 100%; block-size: 100%; }
.sv-wall { fill: var(--l1); } .sv-light { fill: var(--paper); } .sv-floor { fill: var(--linen); }
.sv-ln { fill: none; stroke: var(--brass); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.sv-soft { stroke: var(--l3); }
.sv-w, .sv-1, .sv-2, .sv-ink { stroke: var(--brass); stroke-width: 1.6; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.sv-w { fill: var(--white); } .sv-1 { fill: var(--l1); } .sv-2 { fill: var(--l2); } .sv-ink { fill: var(--deep); }
.zones { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.zone { display: grid; grid-template-rows: auto 1fr; gap: .4rem; text-align: start; padding: .55rem .7rem .6rem; border: 1.5px dashed var(--l3); border-radius: 10px; background: var(--white); min-block-size: 5rem; transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease); }
.zone-h { display: flex; gap: .4rem; align-items: center; min-inline-size: 0; font-family: var(--serif); font-size: 1.02rem; line-height: 1.1; color: var(--deep); }
.zone-h b { font-weight: 400; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.zone-h .ico { color: var(--brass); }
.zone-h .ico { inline-size: 1rem; block-size: 1rem; }
.zone-slots { display: block; min-block-size: 3.2rem; }
.zone[data-armed] { border-color: var(--brass); }
.zone[data-hot] { border-style: solid; border-color: var(--brass); background: var(--l1); }
.obj { position: absolute; z-index: 4; padding: 0; cursor: grab; touch-action: none; border-radius: 4px;
  transition: inset-inline-start 460ms var(--ease), inset-block-start 460ms var(--ease), inline-size 460ms var(--ease), block-size 460ms var(--ease), transform 200ms var(--ease); }
.obj svg { inline-size: 100%; block-size: 100%; overflow: visible; display: block; pointer-events: none; }
/* No invisible margin on objects: drag.js picks the nearest object within reach of the finger. */
.scene-frame, .zones { touch-action: none; }
.obj:hover { transform: translateY(-2px); }
.obj.lift { z-index: 9; cursor: grabbing; transition: none; }
.obj[aria-pressed="true"] { outline: 2px solid var(--brass); outline-offset: 5px; }
.obj .badge { position: absolute; inset-block-start: -.7rem; inset-inline-end: -.7rem; inline-size: 1.25rem; block-size: 1.25rem; border-radius: 50%; display: none; place-items: center; color: var(--paper); }
.obj .badge .ico { inline-size: .75rem; block-size: .75rem; stroke-width: 2.4; }
.obj[data-result] .badge { display: grid; animation: pop var(--mid) var(--ease); }
.obj[data-result="right"] .badge { background: var(--brass); }
.obj[data-result="wrong"] .badge { background: var(--deep); }
.obj[data-result="wrong"] { animation: shake 360ms var(--ease); }
.zone-key { list-style: none; padding: 0; display: grid; gap: .5rem; font-size: .9rem; line-height: 1.45; color: var(--deep); }
.zone-key li { display: grid; grid-template-columns: 1.1rem 1fr; gap: .6rem; }
.zone-key .ico { color: var(--brass); inline-size: 1.1rem; block-size: 1.1rem; margin-block-start: .15rem; }
.zone-key b { display: block; font-weight: 400; color: var(--ink); font-family: var(--serif); font-size: 1.1rem; line-height: 1.2; }

/* right or not: a card that flips */
.tf { position: relative; container-type: size; min-block-size: 0; display: grid; place-items: start; perspective: 1400px; }
.tf > * { grid-area: 1 / 1; }
.tf-card, .tf-under { inline-size: min(100cqw, 30rem); block-size: min(100cqh, 22rem); }
.tf-under { position: absolute; border-radius: 14px; border: 1px solid var(--hair); background: var(--l1); transform: translateY(10px) scale(.95); }
.tf-card { position: relative; touch-action: pan-y; }
.tf-card[data-lean="yes"] .tf-front { border-color: var(--brass); }
.tf-card[data-lean="no"] .tf-front { border-color: var(--deep); }
.tf-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 14px; border: 1px solid var(--hair); background: var(--white); padding: clamp(1.1rem, 3vw, 1.9rem); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: .8rem; }
.tf-front { cursor: grab; }
.tf-back { background: var(--linen); }
.tf-card[data-tone="wrong"] .tf-back { background: var(--l1); }
.tf-face .eyebrow { margin: 0; }
.tf-q { margin: 0; align-self: center; font-family: var(--serif); font-size: clamp(1.35rem, 3vh, 2rem); line-height: 1.25; }
.tf-answers { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.tf-answers .btn { white-space: nowrap; padding-inline: .9rem; letter-spacing: .12em; }
.tf-answers.one { grid-template-columns: 1fr; }
.tf-verdict { display: flex; gap: .6rem; align-items: center; align-self: center; font-family: var(--serif); font-size: clamp(1.5rem, 3.4vh, 2.1rem); color: var(--brass); }
.tf-card[data-tone="wrong"] .tf-verdict { color: var(--deep); }
.tf-verdict .ico { inline-size: 1.7rem; block-size: 1.7rem; }
.tf-why { margin: 0; font-size: 1rem; line-height: 1.5; }
.tf-back { grid-template-rows: auto auto minmax(0, 1fr) auto; }
.tf-end .tf-face { position: relative; block-size: 100%; grid-template-rows: auto auto minmax(0, 1fr) auto; text-align: center; justify-items: center; }
.tf-review { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; text-align: start; overflow-y: auto; font-size: .86rem; }
.tf-review li { display: grid; grid-template-columns: 1.1rem 1fr; gap: .5rem; }
.tf-review li[data-state="right"] .ico { color: var(--brass); }
.tf-review .ico { inline-size: 1rem; block-size: 1rem; margin-block-start: .15rem; }
.tf-end .score-n { font-size: 3.8rem; }
.tf-end .strip { inline-size: 8rem; }
.tf-track { list-style: none; padding: 0; display: flex; gap: .4rem; }
.tf-track li { inline-size: 2rem; block-size: 2rem; border-radius: 50%; border: 1px solid var(--hair); display: grid; place-items: center; font-size: .78rem; color: var(--muted); transition: all var(--mid) var(--ease); }
.tf-track li[data-state="now"] { border-color: var(--brass); color: var(--brass); }
.tf-track li[data-state="right"] { background: var(--brass); border-color: var(--brass); color: var(--paper); }
.tf-track li[data-state="wrong"] { background: var(--deep); border-color: var(--deep); color: var(--paper); }

/* keep it */
.sc-cardwrap { min-block-size: 0; display: grid; align-content: start; overflow-y: auto; }
.check-flat > div:first-child .eyebrow { display: none; }
.keep-lg { padding: clamp(1.25rem, 3vw, 2.25rem); display: grid; gap: .4rem; }
.keep-lg .h3 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.keep-lg li span { font-size: clamp(1rem, 1.6vw, 1.15rem); }
.keep-lg .strip { inline-size: 7rem; margin-block-start: .75rem; }
.check-flat { border: 0; padding: 0; gap: .8rem; }
.pn-next { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.2rem; border: 1px solid var(--hair); border-radius: 10px; background: var(--white); text-decoration: none; color: inherit; transition: border-color var(--fast) var(--ease); }
.pn-next:hover { border-color: var(--brass); }
.pn-next small { display: block; font-size: 0.72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--brass); }
.pn-next b { font-weight: 400; font-family: var(--serif); font-size: 1.35rem; }
.pn-next .ico { color: var(--brass); }

/* Short screens held upright (a phone's browser tab is about 660 px tall): the picture
   takes less, the words sit closer, so the screen still shows everything it has. */
@container stage (max-height: 560px) and (orientation: portrait) {
  .sc { --p: 31%; --chrome: 1.7rem; gap: .7rem; padding-block: .5rem .4rem; }
  .sc[data-layout="game"], .sc[data-layout="tall"] { --p: 47%; }
  .sc[data-kind="sequence"] { --p: 57%; }
  .sc[data-kind="drag"] { --p: 63%; }      /* the scene needs room to be handled */
  .sc[data-kind="spot"] { --p: 55%; }
  .sc[data-kind="drag"] .zone { min-block-size: 4.4rem; padding-block: .35rem .4rem; }
  .sc[data-kind="drag"] .zone-slots { min-block-size: 2.4rem; }
  .sc[data-layout="read"] { --p: 25%; }
  .sc-text { gap: .55rem; }
  .sc-title { font-size: 1.45rem; }
  .sc-lead { font-size: 1.02rem; line-height: 1.48; }
  .sc-body { font-size: .98rem; line-height: 1.48; }
  .sc-principle { padding: .4rem .7rem; gap: .15rem; }
  .sc-pline { font-size: .92rem; line-height: 1.3; }
  .sc-text .callout { padding: .7rem .85rem; gap: .5rem .7rem; }
  .sc-text .callout p { font-size: .98rem; line-height: 1.45; }
  .stepnow { gap: .4rem; }
  .stepnow-t { font-size: 1.05rem; line-height: 1.35; }
  .stepnow-name { font-size: 1.5rem; }
  .stepnow-nav .btn, .stepnow-nav .icon-btn { min-block-size: 2.6rem; block-size: 2.6rem; }
  .keep-lines li { padding-block: .5rem; font-size: .98rem; }
  .check-seg button { padding-block: .6rem; }
  .teaser { padding-block: .4rem; }
  .teaser-img { inline-size: 4.2rem; }
  .role-chip { padding-block: .3rem; }
  .seq { gap: .25rem; }
  .seq-card { padding-block: .2rem; }
  .seq-art { inline-size: 2.4rem; }
  .tf-front .tf-q { font-size: 1.05rem; }
  .tf-face { padding: .8rem; gap: .5rem; }
  .level-now { padding: .6rem .8rem; }
  .sc-text > .eyebrow { margin: 0; }
  .sc-actions .btn.small { min-block-size: 2.4rem; }
}

/* phones: keep each screen to what fits; the full lists live on larger screens */
@container stage (max-width: 699px) {
  .steplist { display: none; }
  .check-flat .small { display: none; }
}
.game .sc-tag { inset-inline-start: auto; inset-inline-end: .75rem; }

/* ——— the kinds added in v2 ——— */
.sc[data-layout="wide"] { grid-template-rows: minmax(0, 1fr) !important; grid-template-columns: minmax(0, 1fr) !important; }
.sc-art { display: grid; place-items: center; padding: clamp(.75rem, 3cqi, 2rem); background: var(--linen); position: relative; }
.sc-art > svg { inline-size: 100%; block-size: 100%; max-block-size: 100%; }
.step-badge { position: absolute; inset-block-start: .75rem; inset-inline-start: .85rem; font-family: var(--serif); font-size: clamp(2rem, 6cqi, 3.4rem); line-height: 1; color: var(--brass); }
.rule-cap { position: absolute; inset-inline: 1rem; inset-block-end: .9rem; margin: 0; text-align: center; font-family: var(--serif); font-size: clamp(1.05rem, 2.2cqi, 1.35rem); line-height: 1.3; color: var(--ink); }
.rule-cap b { font-weight: 500; font-size: 1.3em; }
.rule-stage { padding-block-end: 4.5rem; }
.sc-principle { display: grid; gap: .35rem; margin: 0; padding: .7rem .9rem; border-radius: 10px; background: var(--l1); border: 1px solid var(--l2); }
.sc-beat { display: inline-flex; gap: .45rem; align-items: center; font-size: 0.72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--brass); margin: 0; }
.sc-beat .ico { inline-size: 1.05rem; block-size: 1.05rem; }
.sc-pline { font-family: var(--serif); font-style: italic; font-size: 1.08rem; line-height: 1.35; color: var(--deep); }
.sc-q { font-family: var(--serif); font-size: clamp(1.35rem, 2.6cqi, 1.8rem); line-height: 1.25; margin: 0; }

/* the week */
.sc-mosaic { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: 1fr 1fr; gap: 4px; background: none; }
.mo { position: relative; overflow: hidden; border-radius: 4px; background: var(--linen); display: block; }
.mo img, .mo svg { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform var(--slow) var(--ease); }
.mo:hover img { transform: scale(1.05); }
.mo-art { grid-column: span 2; padding: .5rem; }
.mo span { position: absolute; inset-inline-start: .45rem; inset-block-end: .45rem; background: var(--scrim); color: var(--deep); font-size: 0.72rem; letter-spacing: .16em; text-transform: uppercase; padding: .2rem .5rem; border-radius: 999px; }

/* which is right */
.choice { min-block-size: 0; display: grid; }
.opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; block-size: 100%; max-block-size: 24rem; }
.opts[data-n="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.opt-w { position: relative; display: grid; min-inline-size: 0; min-block-size: 0; }
.opt { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; border: 1.5px solid var(--hair); border-radius: 14px; background: var(--white); overflow: hidden; text-align: center; transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease), opacity var(--mid) var(--ease); }
.opt:hover { border-color: var(--brass); transform: translateY(-2px); }
.opt-art { background: var(--linen); display: grid; place-items: center; padding: .75rem; min-block-size: 0; overflow: hidden; }
.opt-art svg { inline-size: 100%; block-size: 100%; }
.opt-l { padding: .75rem .6rem .85rem; font-family: var(--serif); font-size: clamp(1.05rem, 2.2cqi, 1.3rem); line-height: 1.2; }
.opt-mark { position: absolute; inset-block-start: .6rem; inset-inline-end: .6rem; inline-size: 1.8rem; block-size: 1.8rem; border-radius: 50%; display: none; place-items: center; color: var(--paper); }
.opt-mark .ico { inline-size: 1rem; block-size: 1rem; stroke-width: 2.4; }
.opt[data-state] { pointer-events: none; }
.opt[data-state="right"] { border-color: var(--brass); }
.opt[data-state="right"] .opt-mark { display: grid; background: var(--brass); animation: pop var(--mid) var(--ease); }
.opt[data-state="wrong"] { border-color: var(--deep); animation: shake 360ms var(--ease); }
.opt[data-state="wrong"] .opt-mark { display: grid; background: var(--deep); }
.opt[data-state="dim"] { opacity: .5; }
.choice-sum { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; align-content: start; overflow-y: auto; }
.choice-sum li { display: grid; grid-template-columns: 5.5rem 1fr; gap: .8rem; align-items: center; padding: .5rem; border: 1px solid var(--hair); border-radius: 12px; background: var(--white); }
.cs-art { position: relative; background: var(--linen); border-radius: 8px; aspect-ratio: 4 / 3; display: grid; place-items: center; cursor: zoom-in; }
.cs-art svg { inline-size: 100%; block-size: 100%; }
.choice-sum li span:last-child { display: flex; gap: .5rem; align-items: flex-start; font-size: .92rem; }
.choice-sum b { font-weight: 400; }
.choice-sum li[data-state="right"] .ico { color: var(--brass); }

/* steps, drawn */
.stepnow { display: grid; gap: .7rem; }
.stepnow .eyebrow { margin: 0; }
.stepnow-t { margin: 0; font-size: clamp(1.25rem, 2.4cqi, 1.7rem); line-height: 1.35; }
.stepnow-nav { display: grid; grid-template-columns: auto 1fr auto; gap: .6rem; align-items: center; max-inline-size: 26rem; }
.stepnow-nav .btn { inline-size: 100%; }

/* put in order */
.seq { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; align-content: start; overflow-y: auto; min-block-size: 0; }
.seq-card { display: grid; grid-template-columns: 1.7rem 3.6rem 1fr 1.2rem; gap: .75rem; align-items: center; padding: .45rem .7rem .45rem .5rem; border: 1.5px solid var(--hair); border-radius: 12px; background: var(--white); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; position: relative; transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease); }
.seq-card:hover { border-color: var(--l3); }
.seq-card:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.seq-card.lift { z-index: 5; cursor: grabbing; border-color: var(--brass); background: var(--l1); transition: none; }
.seq-card[aria-pressed="true"] { border-color: var(--brass); background: var(--l1); }
.seq-n { inline-size: 1.7rem; block-size: 1.7rem; border-radius: 50%; display: grid; place-items: center; font-family: var(--serif); font-size: 1.05rem; color: var(--brass); background: var(--l1); }
.seq-art { position: relative; inline-size: 3.6rem; aspect-ratio: 4 / 3; min-block-size: 2rem; border-radius: 6px; background: var(--linen); display: grid; place-items: center; overflow: hidden; cursor: zoom-in; touch-action: manipulation; }
.seq-art:hover, .seq-art:focus-visible { outline: 1.5px solid var(--brass); outline-offset: 1px; }
.seq-art svg { inline-size: 100%; block-size: 100%; }
.seq-t { font-size: .92rem; line-height: 1.35; }
.seq-grip { color: var(--l3); }
.seq-card[data-state="right"] { border-color: var(--brass); }
.seq-card[data-state="right"] .seq-n { background: var(--brass); color: var(--paper); }
.seq-card[data-state="wrong"] { border-color: var(--deep); }
.seq-card[data-state="wrong"] .seq-n { background: var(--deep); color: var(--paper); }

/* the flip card, drawn */
.tf-front { grid-template-rows: minmax(0, 1fr) auto auto auto; }
.tf-art { position: relative; min-block-size: 0; display: grid; place-items: center; background: var(--linen); border-radius: 10px; padding: .35rem; }
.tf-art svg { inline-size: 100%; block-size: 100%; }
.tf-card, .tf-under { block-size: min(100cqh, 28rem); }
.tf-front .tf-q { font-size: clamp(1.15rem, 2.6cqh, 1.6rem); }

/* leave ready */
.keep-sm { padding: 1rem 1.2rem; }
.keep-sm .h3 { font-size: 1.3rem; }

/* report */
.report-card { background: var(--white); border: 1px solid var(--hair); display: grid; align-content: start; gap: 1rem; padding: clamp(1rem, 3cqi, 2rem); overflow-y: auto; }
.rc-top { display: grid; gap: .2rem; }
.rc-top .eyebrow { margin: 0; }
.rc-pts { font-family: var(--serif); font-size: clamp(3rem, 9cqi, 5.5rem); line-height: 1; color: var(--brass); }
.rc-beats { list-style: none; margin: 0; padding: 0; border-block-start: 1px solid var(--hair); }
.rc-beats li { display: grid; grid-template-columns: 1.3rem 1fr auto; gap: .7rem; align-items: center; padding-block: .55rem; border-block-end: 1px solid var(--hair); color: var(--muted); font-size: .95rem; }
.rc-beats li .ico { color: var(--l3); }
.rc-beats li[data-done="true"] { color: var(--ink); }
.rc-beats li[data-done="true"] .ico { color: var(--brass); }
.rc-ach { display: flex; flex-wrap: wrap; gap: .75rem; }
.rc-badge { display: grid; justify-items: center; gap: .3rem; inline-size: 5.5rem; text-align: center; }
.rc-badge svg { inline-size: 4rem; block-size: 4rem; }
.rc-badge small { font-size: 0.8125rem; }
.report-card .strip { inline-size: 7rem; }
.check-flat { border: 0; padding: 0; }
.teaser { display: grid; grid-template-columns: 5.5rem 1fr auto; gap: .9rem; align-items: center; padding: .55rem .9rem .55rem .55rem; border: 1px solid var(--hair); border-radius: 12px; background: var(--white); text-decoration: none; color: inherit; transition: border-color var(--fast) var(--ease); }
.teaser:hover { border-color: var(--brass); }
.teaser-img { inline-size: 5.5rem; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: var(--linen); display: block; }
.teaser-img img, .teaser-img svg { inline-size: 100%; block-size: 100%; object-fit: cover; }
.teaser-t { display: grid; gap: .15rem; }
.teaser-t small { font-size: 0.72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--brass); }
.teaser-t b { font-weight: 400; font-family: var(--serif); font-size: 1.2rem; line-height: 1.15; }
.teaser-t span { font-size: .82rem; color: var(--muted); line-height: 1.35; }
.teaser > .ico { color: var(--brass); }

/* two readers, rules, principles */
.role-chip { display: inline-flex; gap: .7rem; align-items: center; margin: 0; padding: .45rem .9rem .45rem .45rem; border-radius: 999px; border: 1px solid var(--l2); background: var(--l1); justify-self: start; align-self: flex-start; }
.role-chip small { display: block; font-size: 0.72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--brass); }
.role-chip b { font-weight: 400; font-family: var(--serif); font-size: 1.1rem; }
.role-chip > .ico { inline-size: 1.6rem; block-size: 1.6rem; color: var(--brass); }
.rulelist, .plist { list-style: none; margin: 0; padding: 0; border-block-start: 1px solid var(--hair); }
.rulelist button, .plist button { inline-size: 100%; display: grid; grid-template-columns: 2.1rem 1fr; gap: .6rem; align-items: start; padding-block: .6rem; border-block-end: 1px solid var(--hair); text-align: start; font-size: .92rem; line-height: 1.4; color: var(--deep); }
.rulelist button[aria-current="true"], .plist button[aria-current="true"] { color: var(--ink); background: var(--l1); }
.rulelist button[aria-current="true"] .sl-n { color: var(--brass); }
.plist button { grid-template-columns: 2.4rem 1fr; align-items: center; }
.plist b { display: block; font-weight: 400; font-family: var(--serif); font-size: 1.2rem; }
.plist small { display: block; font-size: .84rem; color: var(--deep); }
.pl-i { inline-size: 2.2rem; block-size: 2.2rem; border-radius: 50%; display: grid; place-items: center; background: var(--l1); color: var(--brass); }
.plist button[aria-current="true"] .pl-i { background: var(--brass); color: var(--paper); }
.motto-sm { padding-block: .75rem 0; text-align: start; }
.motto-sm p { margin: 0 0 .6rem; font-size: 1.35rem; max-inline-size: none; }
.motto-sm .strip { margin-inline: 0; inline-size: 6rem; }

/* the five levels */
.scale-art { display: grid; grid-template-rows: repeat(5, 1fr); gap: 3px; background: none; }
.band { display: grid; grid-template-columns: 3rem 1fr auto; gap: .75rem; align-items: center; padding-inline: 1rem; text-align: start; border-radius: 6px; transition: transform var(--fast) var(--ease), flex var(--mid) var(--ease); }
.band[data-n="1"] { background: var(--l1); } .band[data-n="2"] { background: var(--l2); } .band[data-n="3"] { background: var(--l3); }
.band[data-n="4"] { background: var(--l4); color: var(--paper); } .band[data-n="5"] { background: var(--l5); color: var(--paper); }
.band-n { font-family: var(--serif); font-size: clamp(1.6rem, 4cqi, 2.6rem); line-height: 1; }
.band-t { font-family: var(--serif); font-size: clamp(1.05rem, 2.4cqi, 1.5rem); }
.band[aria-pressed="true"] { outline: 2px solid var(--ink); outline-offset: -2px; }
.band .wk { font-size: 0.72rem; letter-spacing: .16em; text-transform: uppercase; border: 1px solid currentColor; border-radius: 999px; padding: .2rem .5rem; }
.level-now { display: grid; grid-template-columns: 1.1rem 1fr; gap: .8rem; padding: .9rem 1rem; border-radius: 10px; background: var(--white); border: 1px solid var(--hair); }
.level-now b { font-weight: 400; font-family: var(--serif); font-size: 1.3rem; }
.level-now p { margin: .2rem 0 0; }

/* watch */
.sc-video { background: var(--ink); display: grid; place-items: center; }
.sc-video video { block-size: 100%; inline-size: auto; max-inline-size: 100%; aspect-ratio: 9 / 16; object-fit: cover; }

/* sort the rooms */
/* Sort the rooms. The six photographs are what the reader judges, so they are as large as the frame allows:
   three to a row in two rows, as wide as a third of the tray or as tall as two rows may be while the two levels
   under them still have room for a row of their own. As rooms leave the tray it gives its height to the levels. */
.sort { min-block-size: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: .6rem; container-type: size; container-name: sort; }
.sort-tray { --tw: min(calc((100cqi - 2.3rem) / 3), calc((66cqb - 2rem) / 2 * .75)); display: grid; grid-template-columns: repeat(3, var(--tw)); justify-content: center; align-content: start; gap: .45rem; min-block-size: 4.6rem; padding: .45rem; border: 1.5px dashed var(--l3); border-radius: 12px; background: var(--white); }
.sort-in .sort-item { flex: none; inline-size: min(calc(20cqb * .75), calc((100% - .45rem) / 2)); }
@container sort (max-width: 30rem) {   /* a phone: each level's name takes two rows, so the tray and a room in a level are a little less tall */
  .sort-tray { --tw: min(calc((100cqi - 2.3rem) / 3), calc((58cqb - 2rem) / 2 * .75)); }
  .sort-in .sort-item { inline-size: min(calc(18cqb * .75), calc((100% - .45rem) / 2)); }
}
.sort-tray[data-empty] { min-block-size: 2rem; }
.sort-cols { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; min-block-size: 0; }
.sort-col { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: .45rem; padding: .55rem; border: 1.5px dashed var(--l3); border-radius: 12px; background: var(--white); min-block-size: 0; }
.sort-col[data-hot], .sort-tray[data-hot] { border-style: solid; border-color: var(--brass); background: var(--l1); }
.sort-h { display: flex; gap: .45rem; align-items: center; margin: 0; font-family: var(--serif); font-size: 1rem; line-height: 1.2; }
.sort-h .lv-sw { margin: 0; inline-size: .9rem; block-size: .9rem; }
.sort-in { display: flex; flex-wrap: wrap; gap: .45rem; align-content: flex-start; overflow-y: auto; }
.sort[data-dragging] .sort-in { overflow: visible; }   /* a room in hand is not cut off at the edge of its level */
.sort-item { position: relative; display: block; aspect-ratio: 3 / 4; }
.sort-tile { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; border-radius: 6px; overflow: hidden; border: 2px solid transparent; padding: 0; cursor: grab; touch-action: none; transition: border-color var(--fast) var(--ease); }
.sort-tile.lift ~ .zoom-btn, .sort-tile.lift ~ .zoom-sign { visibility: hidden; }
.sort-tile img { inline-size: 100%; block-size: 100%; object-fit: cover; pointer-events: none; }
.sort-tile[aria-pressed="true"] { border-color: var(--brass); }
.sort-tile.lift { z-index: 9; cursor: grabbing; transition: none; }
.st-mark { position: absolute; inset-block-start: .25rem; inset-inline-end: .25rem; inline-size: 1.3rem; block-size: 1.3rem; border-radius: 50%; display: none; place-items: center; color: var(--paper); }
.st-mark .ico { inline-size: .75rem; block-size: .75rem; stroke-width: 2.4; }
.sort-tile[data-state] .st-mark { display: grid; }
.sort-tile[data-state="right"] { border-color: var(--brass); } .sort-tile[data-state="right"] .st-mark { background: var(--brass); }
.sort-tile[data-state="wrong"] { border-color: var(--deep); } .sort-tile[data-state="wrong"] .st-mark { background: var(--deep); }

/* the walk, beside its panel */
/* Stacked: the plan keeps a fixed share and is always whole; the panel below shows one room. */
.walk-wide { min-block-size: 0; block-size: 100%; display: grid; grid-template-rows: minmax(6rem, 40%) minmax(min-content, 1fr); }   /* the plan gives way when the panel needs more */
.walk-wide .walk-map { min-block-size: 0; display: grid; place-items: center; }
/* The plan's words are drawn at its own scale: numbers large enough to read, and on a plan too small
   for words (a short phone) only the rooms, the route and the marker are drawn. */
.walk-wide .walk-map { container-type: size; }
.walk-wide .walk-map .stop-n { font-size: 20px; }
@container (max-height: 215px) { .walk-map .room-label, .walk-map .stop-n { display: none; } }
.walk-wide .walk-map svg { inline-size: 100%; block-size: 100%; }
.walk-wide .walk-panel { min-block-size: 0; max-block-size: calc(100cqb - 6rem - var(--chrome, 4.75rem)); overflow-y: auto; align-content: start; }

@container stage (min-width: 720px) and (orientation: landscape) {
  .walk-wide { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: minmax(0, 1fr); }
  .walk-wide .walk-map { border-block-end: 0; border-inline-end: 1px solid var(--hair); display: grid; align-items: center; }
  .walk-wide .walk-panel { overflow-y: auto; max-block-size: none; }
}

/* the kit */
.kit-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 4px; background: none; }
.kit-t { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; background: var(--linen); border-radius: 6px; padding: .5rem; text-align: center; min-block-size: 0; cursor: zoom-in; }
.kit-t svg { inline-size: 100%; block-size: 100%; }
.kit-t small { font-size: 0.8125rem; line-height: 1.3; color: var(--deep); }

/* phones: the ordering cards stay compact so every card is in reach */
@container stage (max-width: 699px) {
  .seq { gap: .35rem; }
  .seq-card { grid-template-columns: 1.45rem 2.8rem 1fr .9rem; gap: .55rem; padding: .3rem .5rem .3rem .4rem; border-radius: 10px; }
  .seq-n { inline-size: 1.45rem; block-size: 1.45rem; font-size: .92rem; }
  .seq-art { inline-size: 2.8rem; }
  .seq-t { font-size: .82rem; line-height: 1.3; }
  .seq-grip .ico { inline-size: .9rem; block-size: .9rem; }
}
@container stage (orientation: portrait) {
  .sc[data-kind="sequence"] { --p: 62%; }
}

/* long lists stay compact beside their picture */
.steplist button, .rulelist button { padding-block: .45rem; font-size: .86rem; }

/* small links still get a finger-sized target */
.sec-h .link, .words .src { display: inline-flex; align-items: center; min-block-size: 2.75rem; }

@container stage (max-width: 699px) { .hot-spot b { font-size: 0.8125rem; padding: .18rem .45rem; } }

/* Contrast on linen and L1 grounds, and control edges, as the platforms settle them. */
.sc-principle .sc-beat, .tf-back .eyebrow, .role-chip small, .seq-n, .sc-feedback-h { color: var(--deep); }
.sc-feedback[data-tone="wrong"] .sc-feedback-h { color: var(--ink); }
.fl-bl .ico, .seq-grip, .rc-beats li .ico { color: var(--edge); }
.sl-box, .zone, .sort-tray, .sort-col, .callout[data-kind="finer"] { border-color: var(--edge); }
.opt, .seq-card { border-color: var(--edge); }
.opt[data-state="right"], .seq-card[data-state="right"], .seq-card.lift, .seq-card[aria-pressed="true"] { border-color: var(--brass); }
.opt[data-state="wrong"], .seq-card[data-state="wrong"] { border-color: var(--deep); }
/* The five levels are the strip at full size: flat, five equal fifths, never rounded. */
.scale-art { gap: 0; border-radius: 0; }
.band { border-radius: 0; }

/* Right or not: the answer arrives with a short rise. Nothing rotates. */
.tf { perspective: none; }
.tf-card { transform-style: flat; transition: none; }
.tf-card.is-flipped { transform: none; }
.tf-face { backface-visibility: visible; -webkit-backface-visibility: visible; transition: opacity var(--mid) var(--ease), transform var(--mid) var(--ease), visibility 0s linear var(--mid); }
.tf-back { transform: translateY(12px); opacity: 0; visibility: hidden; }
.tf-card.is-flipped .tf-front { opacity: 0; visibility: hidden; }
.tf-card.is-flipped .tf-back { transform: none; opacity: 1; visibility: visible; transition: opacity var(--mid) var(--ease), transform var(--mid) var(--ease); }

/* ——— one thing at a time: steps, rules, principles ——— */
.stepnow { display: grid; gap: .6rem; }
.stepnow-top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin: 0; }
.stepnow-top .eyebrow { margin: 0; }
.stepnow-count { font-size: .8125rem; color: var(--muted); white-space: nowrap; }
.stepnow-name { margin: 0; font-family: var(--serif); font-size: clamp(1.7rem, 3cqi, 2.3rem); line-height: 1.1; }
.numchips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.numchips button { inline-size: 2.4rem; block-size: 2.4rem; border-radius: 50%; border: 1px solid var(--edge); background: var(--white); font-family: var(--serif); font-size: 1.05rem; color: var(--deep); display: grid; place-items: center; transition: background var(--fast) var(--ease), color var(--fast) var(--ease); }
.numchips button[data-done] { background: var(--brass); border-color: var(--brass); color: var(--paper); }
.numchips button[aria-current="true"] { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ——— keep it: three lines, three drawings ——— */
.keep-tiles { display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 4px; background: none; }
.keep-tile { position: relative; background: var(--linen); border-radius: 6px; display: grid; place-items: center; padding: .4rem 2.4rem; min-block-size: 0; cursor: zoom-in; }
.keep-tile svg { inline-size: 100%; block-size: 100%; }
.keep-tile b { position: absolute; inset-block-start: .35rem; inset-inline-start: .7rem; font-family: var(--serif); font-weight: 500; font-size: 1.35rem; line-height: 1; color: var(--brass); }
.keep-lines { list-style: none; margin: 0; padding: 0; border-block-start: 1px solid var(--hair); }
.keep-lines li { display: grid; grid-template-columns: 1.7rem 1fr; gap: .8rem; align-items: start; padding-block: .8rem; border-block-end: 1px solid var(--hair); font-size: 1.05rem; line-height: 1.45; }

/* ——— how this book works: tiles ——— */
.legend-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 4px; background: none; }
.lg-tile { display: grid; justify-items: center; align-content: center; gap: .4rem; padding: .5rem .3rem; background: var(--linen); border-radius: 6px; border: 1.5px solid transparent; text-align: center; font-size: .8125rem; line-height: 1.2; color: var(--deep); min-block-size: 0; transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease); }
.lg-tile .ico { inline-size: 1.6rem; block-size: 1.6rem; color: var(--brass); }
.lg-tile[aria-pressed="true"] { border-color: var(--brass); background: var(--white); color: var(--ink); }
.lg-now { grid-template-columns: 1.8rem 1fr; }
.lg-now .ico { inline-size: 1.6rem; block-size: 1.6rem; color: var(--brass); }

/* ——— report: each beat with its mark ——— */
.rc-beats li { grid-template-columns: 2rem 1fr auto; }
.rc-ico { inline-size: 2rem; block-size: 2rem; border-radius: 50%; border: 1px solid var(--edge); display: grid; place-items: center; }
.rc-beats li .rc-ico .ico { inline-size: 1.05rem; block-size: 1.05rem; color: var(--edge); }
.rc-beats li[data-done="true"] .rc-ico { background: var(--brass); border-color: var(--brass); }
.rc-beats li[data-done="true"] .rc-ico .ico { color: var(--paper); }
.rc-beats li .rc-tick { color: var(--brass); }

/* ——— the form inside a screen stays compact ——— */
.sc-text .decisions { padding: 1rem 1.1rem; gap: .8rem; }
.sc-text .decisions .field label { font-size: 1.12rem; }
.sc-text .textarea { min-block-size: 2.9rem; }

/* ——— phones: every screen shows what it has without scrolling ——— */
@container stage (max-width: 699px) {
  .lv-list p, .teaser-lead { display: none; }
  .sc[data-kind="scene"] .sc-hint { display: none; }
  .keep-lines li { font-size: 1rem; padding-block: .65rem; }
  .sc-principle { padding: .55rem .8rem; }
  .sc-pline { font-size: 1rem; }
}

@container stage (max-width: 699px) {
  .numchips { gap: .25rem; }
  .numchips button { inline-size: min(2.05rem, (100cqi - 2 * var(--pg) - 2rem) / 9); block-size: auto; aspect-ratio: 1; font-size: .98rem; }   /* nine fit one row */
  .stepnow-t { font-size: 1.12rem; }
}
.fl-beat { padding-block: .5rem .35rem; }   /* a taller target for the beat track */

/* On a short phone screen the chapter's name gives way to the beat track; the menu still names the chapter. */
@media (max-height: 720px) and (max-width: 899px) {
  .fl-title { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .fl-head { padding-block: .45rem .15rem; }
  .fl-foot { padding-block: .45rem calc(env(safe-area-inset-bottom) + .45rem); }
}

/* Notice on a phone: the latest explanation only; the whole list on larger screens. */
/* The list of finds: on a wide stage the latest in full and the earlier ones by name; stacked, the latest only. */
.found-list.compact { display: flex; flex-wrap: wrap; }
.found-list.compact li { flex: 1 1 100%; }
.found-list.compact li:not(:first-child), .sc-text:has(> .sc-feedback:not([hidden])) .found-list.compact li { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .75rem; border-radius: 999px; }
.found-list.compact li:not(:first-child) :is(p, small), .sc-text:has(> .sc-feedback:not([hidden])) .found-list.compact li :is(p, small) { display: none; }
.found-list.compact li:not(:first-child) b, .sc-text:has(> .sc-feedback:not([hidden])) .found-list.compact li b { font-size: 1rem; }
.found-list.compact li:not(:first-child) .ico, .sc-text:has(> .sc-feedback:not([hidden])) .found-list.compact li .ico { inline-size: 1rem; block-size: 1rem; margin: 0; }
@container stage (orientation: portrait) { .found-list.compact li:not(:first-child) { display: none; } }
.continue-beat { display: flex; align-items: flex-start; }
.continue-beat .ico { margin-block-start: .15rem; }

/* Held upright, the console exercise takes more of the screen: it is the thing being handled. */
@container stage (orientation: portrait) { .sc[data-kind="drag"] { --p: 61%; } }
@container stage (max-height: 560px) and (orientation: portrait) { .sc[data-kind="drag"] { --p: 66%; } }

/* A tablet held upright: a picture that is limited by its height sits in the middle of the page,
   and the two boxes of the console exercise keep the width of the scene above them. */
.zones { inline-size: min(100cqw, (100cqh - var(--zones-h, 7.4rem) - .7rem) * 1.5); }
@container stage (min-width: 700px) and (orientation: portrait) {
  .sc-fit, .tf { place-items: start center; }
  .game { justify-items: center; }
}

/* The key under the console exercise needs a wide, tall column; anywhere smaller the boxes carry their names. */
@container stage (max-width: 999px) { .zone-key { display: none; } }
@container stage (orientation: portrait) { .zone-key { display: none; } }

/* A phone held sideways leaves no room for a screen, so the reader asks for upright. */
.fl-turn { display: none; }
@media (orientation: landscape) and (max-height: 480px) and (pointer: coarse) {
  .flow { position: relative; }
  .fl-turn { display: grid; position: absolute; inset: 0; z-index: 20; margin: 0; padding: var(--pg); place-content: center; justify-items: center; gap: .8rem; background: var(--paper); font-family: var(--serif); font-size: 1.5rem; line-height: 1.25; text-align: center; }
  .fl-turn .ico { inline-size: 2.4rem; block-size: 2.4rem; color: var(--brass); }
}

/* On a phone, once an exercise answers, the answer takes the place of the question, so nothing
   scrolls away half read. Try again brings the question back. */
/* Everywhere, once an exercise answers, its instructions step aside for the answer. */
.sc-text:has(> .sc-feedback:not([hidden])) > :is(.sc-body, .sc-hint, .zone-key) { display: none; }
@container stage ((orientation: portrait) or (max-width: 899px)) {   /* stacked, or side by side but narrow */
  .sc-text:has(> .sc-feedback:not([hidden])) > :is(.eyebrow, .sc-principle, .sc-title, .sc-body, .sc-hint, .sc-q, .found-list),
  .sc-text:has(> .found-list > li) > :is(.eyebrow, .sc-principle, .sc-title, .sc-body) { display: none; }
}

/* What each exercise needs at the least, so the words can never squeeze it past use. */
.sc[data-kind="spot"], .sc[data-kind="compare"], .sc[data-kind="choice"], .sc[data-kind="legend"], .sc[data-kind="kit"] { --pmin: 10rem; }
.sc[data-kind="scale"], .sc[data-kind="truefalse"], .sc[data-kind="keepit"] { --pmin: 11rem; }
.sc[data-kind="drag"], .sc[data-kind="sequence"], .sc[data-kind="sort"] { --pmin: 13.5rem; }

/* Where the picture column holds a list at the end of an exercise, it takes all the words leave it. */
.sc:has(.choice-sum), .sc:has(.tf-end) { --p: 100%; }
.sc:has(.choice-sum) .sc-hint, .sc:has(.tf-end) .sc-body { display: none; }
/* Sort the rooms on a phone: a larger share for the exercise. The kit too: its words are few, and its six drawings
   were squeezed to a few pixels on a short phone. */
@container stage (max-width: 699px) {
  .sc[data-kind="sort"] { --p: 60%; }
  .sc[data-kind="kit"] { --p: 56%; }
}


/* The smallest phones (a stage under 480 px tall): the same screens, a little tighter. */
@container stage (max-height: 480px) and (orientation: portrait) {
  .sc[data-kind="sequence"] { --p: 100%; }
  .sc[data-kind="sequence"] .sc-text > .eyebrow { display: none; }
  .choice-sum { gap: .4rem; }
  .choice-sum li { grid-template-columns: 4.2rem 1fr; padding: .35rem; gap: .6rem; }
  .tf-end .score-n { font-size: 3rem; }
  .report-card { padding: .7rem .9rem; gap: .45rem .9rem; }
  .rc-pts { font-size: 2.6rem; }
  .sc[data-kind="report"] .callout { padding: .55rem .75rem; }
  .sc[data-kind="report"] .teaser { padding-block: .3rem; }
  .sc[data-kind="report"] .check-seg button { padding-block: .45rem; }
}

/* The photograph with its spots: the picture keeps its rounded corners, and a label may reach past its edge. */
.sc-fit > .frame.hot { overflow: visible; background: none; }
.frame.hot img { border-radius: 8px; }

/* Put in order, answered, on a short phone: the cards drop their drawings so the answer has room. */
@container stage (max-height: 560px) and (orientation: portrait) {
  .sc[data-kind="sequence"]:has(.sc-feedback:not([hidden])) .seq-art { display: none; }
  .sc[data-kind="sequence"]:has(.sc-feedback:not([hidden])) .seq-card { grid-template-columns: 1.45rem 1fr .9rem; }
}

/* Side by side (a wide stage held sideways), the words have the whole height: no cap. This sits last so it
   outranks the stacked rule above. */
@container stage (min-width: 720px) and (orientation: landscape) { .sc-text { max-block-size: none; } }

/* The report card, stacked (phones, and tablets held upright): as tall as what it holds; points and badges
   share a line; the beat track above already shows the six beats. */
@container stage (orientation: portrait) {
  .sc[data-kind="report"] { grid-template-rows: auto minmax(0, 1fr); }
  .rc-beats { display: none; }
  .report-card { grid-template-columns: auto minmax(0, 1fr); gap: .6rem .9rem; padding: 1rem 1.1rem; max-block-size: 46cqb; }
  .report-card > * { grid-column: 1 / -1; }
  .rc-top { display: contents; }
  .rc-top .eyebrow { grid-column: 1 / -1; grid-row: 1; }
  .rc-pts { grid-column: 1; grid-row: 2; align-self: center; font-size: 3rem; }
  .report-card > .rc-ach { grid-column: 2; grid-row: 2; justify-content: flex-end; flex-wrap: nowrap; gap: .5rem; }
  .report-card > .strip { grid-row: 3; }
  .rc-badge { inline-size: 4.4rem; }
  .rc-badge svg { inline-size: 2.8rem; block-size: 2.8rem; }
}
/* Side by side: the six beats in two columns, so the card holds its badges without scrolling. */
@container stage (min-width: 720px) and (orientation: landscape) {
  .rc-beats { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.25rem; }
}

/* The Walk, one line of the card at a time: lines already settled shrink to their Day and their mark,
   lines still to come wait their turn. */
.walk-lines { display: flex; flex-wrap: wrap; gap: .6rem; }
.walk-line { flex: 1 1 100%; min-inline-size: 0; }
.walk-line:not([data-now]):not([data-state]) { display: none; }
.walk-line[data-state]:not([data-now]) { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .5rem; padding: .3rem .75rem; border-radius: 999px; }
.walk-line[data-state]:not([data-now]) p { font-size: 1.05rem; }
.walk-line[data-state]:not([data-now]) .wl-rest, .walk-line[data-state]:not([data-now]) .state [data-draft] { display: none; }
.walk-line .row { gap: .45rem; }
/* and on a phone, a little smaller */
@container stage (max-width: 699px) {
  .walk-wide .walk-panel { padding: .8rem 1rem .9rem; gap: .55rem; }
  .walk-wide .walk-panel .h3 { margin: 0; font-size: 1.45rem; }
  .walk-lines { gap: .5rem; }
  .walk-line { padding: .7rem .85rem; gap: .55rem; }
  .walk-line p { font-size: 1.14rem; line-height: 1.28; }
  .walk-line[data-state]:not([data-now]) { padding: .3rem .7rem; }
  .walk-line[data-state]:not([data-now]) p { font-size: 1rem; }
  .walk-wide .walk-sum div { padding: .55rem .3rem; }
  .walk-wide .walk-panel .btn { min-block-size: 2.6rem; }
  .walk-line .row { gap: .4rem; }
  .walk-line .row .btn { padding-inline: .6rem; letter-spacing: .06em; gap: .35rem; }
  .walk-line .small { font-size: .92rem; line-height: 1.35; }
}

/* Side by side on a short or narrow stage (a sideways tablet, a 1280 × 720 laptop): the report card,
   the teaser and The Walk's panel draw a little tighter. */
@container stage (max-height: 600px) and (orientation: landscape) {
  .rc-pts { font-size: 3.6rem; }
  .rc-beats li { padding-block: .35rem; }
  .rc-badge svg { inline-size: 3.2rem; block-size: 3.2rem; }
  .report-card { gap: .75rem; }
  .walk-panel { padding: 1rem 1.15rem 1.1rem; gap: .7rem; }
  .walk-line { padding: .8rem .9rem; gap: .6rem; }
  .walk-line p { font-size: 1.15rem; }
}
@container stage (max-width: 899px) and (orientation: landscape) { .teaser-lead { display: none; } }

/* ——— v2.1 · in the chapter: the "i" on an exercise, and sharing on the report ——— */
.sc-headline { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.sc-headline .sc-title { margin: 0; min-inline-size: 0; }
.guide-btn { flex: none; inline-size: 2.5rem; block-size: 2.5rem; border-radius: 50%; border: 1px solid var(--edge); background: var(--white); color: var(--brass); display: inline-grid; place-items: center; transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease); }
.guide-btn:hover { border-color: var(--brass); background: var(--l1); }
.guide-btn .ico { inline-size: 1.3rem; block-size: 1.3rem; }
@container stage ((orientation: portrait) or (max-width: 899px)) {
  .sc-text:has(> .sc-feedback:not([hidden])) > .sc-headline, .sc-text:has(> .found-list > li) > .sc-headline { display: none; }
}
.guide { display: grid; gap: .9rem; }
.guide > * { margin: 0; }
.guide .h2 { padding-inline-end: 2.5rem; }
.guide-art { background: var(--linen); border-radius: 10px; padding: .6rem; }
.guide-art svg { display: block; inline-size: 100%; block-size: auto; max-block-size: 11rem; }
.guide-art * { vector-effect: non-scaling-stroke; }
.guide-steps { list-style: none; padding: 0; display: grid; gap: .5rem; }
.guide-steps li { display: grid; grid-template-columns: 1.7rem 1fr; gap: .7rem; align-items: start; font-size: 1.05rem; line-height: 1.4; }
/* the gesture: three passes, then it rests where it began. Nothing travels more than 40 px. */
@keyframes g-move { 0%, 18% { transform: translate(0, 0); } 58%, 86% { transform: translate(var(--dx, 0px), var(--dy, 0px)); } 100% { transform: translate(0, 0); } }
@keyframes g-on { 0%, 52% { opacity: 0; } 62%, 86% { opacity: 1; } 100% { opacity: 0; } }
.g-m { animation: g-move 2600ms var(--ease) 3; }
.g-on { opacity: 0; animation: g-on 2600ms linear 3; }
@media (prefers-reduced-motion: reduce) { .g-m, .g-on { animation: none; } .g-on { opacity: 1; } }

.sharebox { display: flex; flex-wrap: wrap; gap: .5rem .8rem; align-items: center; }
.sharebox .sc-status { margin: 0; }
.share-note { font-size: 0.8125rem; color: var(--deep); }
.walk-top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-block-size: 2.5rem; }
.walk-top .eyebrow { margin: 0; }

/* v2.1 fit: the "i" never makes the title row taller; on a short side-by-side stage the teaser drops its second line */
.sc-headline { align-items: center; }
.guide-btn { margin-block: -.35rem; }
@container stage (max-height: 560px) and (orientation: portrait) { .guide-btn { inline-size: 2.2rem; block-size: 2.2rem; } }
@container stage (max-height: 600px) and (orientation: landscape) { .teaser-lead { display: none; } }

/* the chapter's time beside its title, where there is room; and the share box on a short phone */
.fl-time { display: none; }
@container (min-width: 900px) { .fl-time { display: inline-flex; gap: .4rem; align-items: center; margin-inline-start: auto; font-size: 0.8125rem; color: var(--deep); white-space: nowrap; } .fl-time .ico { inline-size: .95rem; block-size: .95rem; color: var(--brass); } }
@container stage (max-height: 560px) and (orientation: portrait) {
  .share-note { display: none; }
  .sharebox .btn.small { min-block-size: 2.3rem; }
}

/* v2.1 fit, small stages: the report keeps to its screen once Share is on it; a found list gives way to the answer; the walk's panel sits tighter */
@container stage (max-height: 480px) and (orientation: portrait) {
  .sc[data-kind="report"] .sc-text > .eyebrow:not(.sc-beat) { display: none; }
  .walk-wide .walk-panel { gap: .4rem; padding-block: .6rem .7rem; }
}
@container stage (max-height: 600px) and (orientation: landscape) {
  .sc-text:has(> .sc-feedback:not([hidden])) > .found-list { display: none; }
}