/* v3 · the phone first. Under 900 px: a light top bar, the page, and the quick
   bar at the bottom where a thumb reaches it; a chapter fills the screen. On
   every size: Find, pictures that open full screen, and films in the chapter.
   Palette only, no gradients, shadows or blur, logical properties. */
:root { --quick-h: 4.1rem; }

/* ——— the quick bar ——— */
.quick { display: none; }
.bar-find { display: none; }
@media (min-width: 900px) {
  .bar-find { display: inline-flex; align-items: center; gap: .6rem; min-block-size: 2.75rem; inline-size: min(21rem, 30vw); margin-inline-start: 1.25rem; padding-inline: .85rem .6rem; border: 1px solid var(--edge); border-radius: 999px; background: var(--white); color: var(--deep); font-size: .9rem; text-align: start; transition: border-color var(--fast) var(--ease); }
  .bar-find:hover { border-color: var(--brass); }
  .bar-find .ico { color: var(--brass); inline-size: 1.25rem; block-size: 1.25rem; }
  .bar-find span { flex: 1; min-inline-size: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .bar-find kbd { font: inherit; font-size: .75rem; line-height: 1.5; border: 1px solid var(--hair); border-radius: 4px; padding-inline: .45rem; color: var(--deep); background: var(--paper); }
}
@media (max-width: 899px) {
  .app[data-shell], .app[data-shell][data-collapsed] { grid-template-rows: calc(var(--top-h) + env(safe-area-inset-top)) minmax(0, 1fr) auto; }
  .app[data-shell] > .side { display: none; }                      /* no drawer: the quick bar leads */
  .app[data-shell] > .bar { padding-inline: var(--pg); }
  .app[data-shell] > .bar .bar-menu, .app[data-shell] > .bar .prof { display: none; }
  .app[data-shell] > .quick {
    grid-row: 3; grid-column: 1; position: relative; z-index: 35;
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: stretch;
    block-size: calc(var(--quick-h) + env(safe-area-inset-bottom));
    padding-block-end: env(safe-area-inset-bottom);
    padding-inline: max(.25rem, env(safe-area-inset-left)) max(.25rem, env(safe-area-inset-right));
    background: var(--paper); border-block-start: 1px solid var(--hair);
  }
  /* a chapter being read has the whole screen: its own header above, Back and Next below */
  .app[data-shell][data-reading] { grid-template-rows: minmax(0, 1fr); }
  .app[data-shell][data-reading] > .bar, .app[data-shell][data-reading] > .quick { display: none; }
  .app[data-shell][data-reading] > .view { grid-row: 1; }
  /* a toast sits clear of the reader's header */
  .app[data-reading] ~ .toast { inset-block-start: calc(env(safe-area-inset-top) + 6.2rem); }
}
.qb { position: relative; display: grid; justify-items: center; align-content: center; gap: .22rem; min-inline-size: 0; padding-inline: .1rem; text-decoration: none; color: var(--deep); font-size: .75rem; line-height: 1.15; -webkit-tap-highlight-color: transparent; transition: color var(--fast) var(--ease); }
.qb > span:last-of-type { max-inline-size: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qb > .ico { inline-size: 1.5rem; block-size: 1.5rem; color: var(--edge); transition: transform var(--fast) var(--ease), color var(--fast) var(--ease); }
.qb:active > .ico { transform: scale(.88); }
.qb[aria-current="page"] { color: var(--ink); }
.qb[aria-current="page"] > .ico { color: var(--brass); }
/* the current place: a short brass line at the bar's top edge, drawn from its middle */
.qb[aria-current="page"]::before { content: ""; position: absolute; inset-block-start: -1px; inset-inline-start: calc(50% - .9rem); inline-size: 1.8rem; block-size: 2px; background: var(--brass); animation: qb-in var(--mid) var(--ease); }
@keyframes qb-in { from { transform: scaleX(0); } to { transform: none; } }
.qb-dot { position: absolute; inset-block-start: .5rem; inset-inline-start: calc(50% + .35rem); inline-size: .5rem; block-size: .5rem; border-radius: 50%; background: var(--brass); outline: 2px solid var(--paper); }
/* the question mark: raised above the bar, in brass */
.qb-find { align-content: end; padding-block-end: .5rem; color: var(--ink); }
.qb-disc { display: grid; place-items: center; inline-size: 3.4rem; block-size: 3.4rem; margin-block: -1.5rem .05rem; border-radius: 50%; background: var(--brass); color: var(--paper); border: 3px solid var(--paper); transition: transform var(--fast) var(--ease), background var(--fast) var(--ease); }
.qb-disc .ico { inline-size: 1.7rem; block-size: 1.7rem; stroke-width: 2; }
.qb-find:active .qb-disc { transform: scale(.94); background: var(--deep); }
@media (prefers-reduced-motion: reduce) { .qb[aria-current="page"]::before { animation: none; } }
@media print { .quick { display: none !important; } }

/* ——— More: everything else, a tile each ——— */
.mt-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin-block-end: 1.25rem; }
.mt { display: grid; justify-items: center; align-content: center; gap: .45rem; min-block-size: 5.1rem; padding: .7rem .3rem; border: 1px solid var(--hair); border-radius: 12px; background: var(--white); text-decoration: none; color: var(--ink); font: inherit; font-size: .86rem; line-height: 1.2; text-align: center; transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease); }
.mt .ico { inline-size: 1.5rem; block-size: 1.5rem; color: var(--brass); }
.mt:hover, .mt:active { border-color: var(--brass); background: var(--l1); }

/* ——— the chapter's own header on a phone: Close, the title, Find, and the beat track ——— */
.fl-x, .fl-q { display: none; }
@media (max-width: 899px) {
  .fl-head { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "x title q" "beats beats beats"; align-items: center; gap: .15rem .35rem; padding-inline: .4rem; padding-block: calc(env(safe-area-inset-top) + .3rem) .3rem; }
  .fl-x, .fl-q { display: inline-grid; }
  .fl-x { grid-area: x; }
  .fl-q { grid-area: q; }
  .fl-q .ico { inline-size: 1.25rem; block-size: 1.25rem; stroke-width: 2; }
  .fl-q { position: relative; color: var(--paper); z-index: 0; }
  .fl-q::before { content: ""; position: absolute; inset: .32rem; border-radius: 50%; background: var(--brass); z-index: -1; transition: background var(--fast) var(--ease); }
  .fl-q:hover { background: none; }
  .fl-q:active::before { background: var(--deep); }
  .fl-title { grid-area: title; justify-content: center; }
  .fl-h { font-size: 1.2rem; text-align: center; }
  .fl-beats { grid-area: beats; padding-inline: calc(var(--pg) - .4rem); }
}
/* a short phone: the beat track sits between the two buttons, and the chapter's name gives way */
@media (max-height: 720px) and (max-width: 899px) {
  .fl-head { grid-template-areas: "x beats q"; padding-block: calc(env(safe-area-inset-top) + .2rem) .15rem; }
  .fl-beats { padding-inline: 0; }
}

/* ——— Find ——— */
.find { position: fixed; inset: 0; z-index: 86; background: var(--paper); }
.find-box { display: grid; grid-template-rows: auto minmax(0, 1fr); block-size: var(--vvh, 100dvh); translate: 0 var(--vvt, 0px); background: var(--paper); }
.find-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .6rem; padding: calc(env(safe-area-inset-top) + .6rem) .75rem .6rem; border-block-end: 1px solid var(--hair); }
.find-mark { inline-size: 2.5rem; block-size: 2.5rem; border-radius: 50%; display: grid; place-items: center; background: var(--brass); color: var(--paper); }
.find-mark .ico { inline-size: 1.3rem; block-size: 1.3rem; stroke-width: 2; }
#find-in { inline-size: 100%; min-inline-size: 0; min-block-size: 3rem; border: 0; padding: 0; background: none; outline: none; font-family: var(--serif); font-weight: 500; font-size: 1.5rem; line-height: 1.2; color: var(--ink); appearance: none; -webkit-appearance: none; border-radius: 0; }
#find-in::placeholder { color: var(--note); opacity: 1; }
#find-in::-webkit-search-cancel-button { display: none; }
.find-x { padding-inline: .8rem 1rem; }
@media (max-width: 899px) {
  .find-x { inline-size: 2.75rem; min-block-size: 2.75rem; padding: 0; border-radius: 50%; }
  .find-x [data-draft] { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
  .find-x .ico { inline-size: 1.7rem; block-size: 1.7rem; }
  #find-in { font-size: 1.35rem; }
}
.find-body { overflow-y: auto; overscroll-behavior: contain; padding: .25rem var(--pg) calc(env(safe-area-inset-bottom) + 2rem); scrollbar-width: thin; }
.find-g { margin-block-start: 1.1rem; }
.find-h { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin: 0 0 .35rem; font-family: var(--sans); font-weight: 400; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--brass); }
.find-h span { color: var(--deep); letter-spacing: .08em; }
.find-count { margin: .9rem 0 0; font-size: .86rem; color: var(--deep); }
.fr { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto; gap: .8rem; align-items: center; inline-size: 100%; padding: .65rem .5rem; border-block-end: 1px solid var(--hair); border-radius: 0; text-decoration: none; color: inherit; font: inherit; text-align: start; transition: background var(--fast) var(--ease); }
.fr:hover, .fr:focus-visible { background: var(--l1); }
.fr:focus-visible { outline-offset: -2px; }
.fr-ic { inline-size: 2.5rem; block-size: 2.5rem; border-radius: 50%; display: grid; place-items: center; background: var(--l1); border: 1px solid var(--l2); color: var(--brass); }
.fr-ic .ico { inline-size: 1.2rem; block-size: 1.2rem; }
.fr-t { display: grid; gap: .15rem; min-inline-size: 0; }
.fr-t small { font-size: .8rem; line-height: 1.35; color: var(--deep); }
.fr-t b { font-weight: 400; font-size: 1.04rem; line-height: 1.4; color: var(--ink); }
.fr-t .fr-more { font-size: .92rem; line-height: 1.45; }
.fr mark { background: var(--l2); color: var(--ink); border-radius: 2px; padding-inline: .12em; }
.fr > .ico { color: var(--edge); inline-size: 1rem; block-size: 1rem; }
.fr.is-locked .fr-t b { color: var(--deep); }
.fr.is-locked .fr-ic { background: var(--paper); border-color: var(--hair); color: var(--edge); }
.fr-lock { font-style: italic; }
.find-try { display: flex; flex-wrap: wrap; gap: .45rem; }
.find-note { display: flex; gap: .5rem; align-items: center; margin: 1.5rem 0 0; font-size: .82rem; color: var(--deep); }
.find-note .ico { inline-size: 1rem; block-size: 1rem; color: var(--edge); }
.find-none { display: grid; justify-items: start; gap: .9rem; padding-block: 2rem; }
.find-none > .ico { inline-size: 2rem; block-size: 2rem; color: var(--brass); }
.find-none p { margin: 0; }
.find-none > p:first-of-type { font-family: var(--serif); font-size: 1.5rem; line-height: 1.25; }
@media (min-width: 900px) {
  .find { background: var(--veil); display: grid; justify-items: center; align-content: start; padding-block-start: 9vh; }
  .find-box { inline-size: min(44rem, 100% - 3rem); block-size: auto; max-block-size: 78vh; border: 1px solid var(--hair); border-radius: 14px; overflow: hidden; }
  .find-top { padding: .75rem .9rem; }
  .find-body { padding-inline: 1.25rem; padding-block-end: 1.5rem; }
}
.words li[data-at] { background: var(--l1); outline: 1px solid var(--l3); outline-offset: .5rem; border-radius: 4px; }

/* ——— a picture, full screen ——— */
.zoom-btn { position: absolute; z-index: 6; inset-block-start: .5rem; inset-inline-end: .5rem; inline-size: 2.5rem; block-size: 2.5rem; border-radius: 50%; display: grid; place-items: center; background: var(--scrim); color: var(--ink); border: 1px solid var(--hair); transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease), transform var(--fast) var(--ease); }
.zoom-btn:hover { background: var(--white); border-color: var(--brass); }
.zoom-btn:active { transform: scale(.92); }
.zoom-btn .ico { inline-size: 1.15rem; block-size: 1.15rem; }
.zoom-btn[data-at="be"] { inset-block-start: auto; inset-block-end: .5rem; }
.zoom-btn[data-at="bs"] { inset-block-start: auto; inset-block-end: .5rem; inset-inline-end: auto; inset-inline-start: .5rem; }
.frame[data-zoomable], .walk-map[data-zoomable] { position: relative; }
.sc-tools { display: flex; gap: .4rem; flex: none; }
.sc:has(.tf-end) .look-btn { display: none; }   /* the score has no picture to open */
/* a cover is its own button too (the playbook's page, another playbook's sheet), and carries the same sign */
button.ov-cover, button.bs-cover { padding: 0; cursor: zoom-in; display: block; position: relative; }
.bs-cover .zoom-sign { inset-block-start: auto; inset-block-end: .2rem; inset-inline-end: .2rem; inline-size: 1.3rem; block-size: 1.3rem; }
.bs-cover .zoom-sign .ico { inline-size: .7rem; block-size: .7rem; }
/* A small picture carries the mark itself (11 October, F11-09). Where the picture is a thing to tap or drag (a room
   to sort, an answer to choose), the mark is a small button in its corner. Where the picture does nothing else (a
   thing of the kit, a line of Keep It, the drawing on a card), the picture is the button and the mark is its sign. */
.zoom-btn[data-at="ts"] { inset-inline-end: auto; inset-inline-start: .5rem; }
.zoom-mini { inline-size: 2.1rem; block-size: 2.1rem; inset-block-start: .3rem; inset-inline-end: .3rem; }
.zoom-mini .ico { inline-size: 1rem; block-size: 1rem; }
.zoom-mini[data-at="be"] { inset-block-start: auto; inset-block-end: .3rem; inset-inline-end: .3rem; }
.zoom-mini[data-at="ts"] { inset-inline-end: auto; inset-inline-start: .3rem; }
.zoom-sign { position: absolute; z-index: 6; inset-block-start: .3rem; inset-inline-end: .3rem; inline-size: 1.6rem; block-size: 1.6rem; border-radius: 50%; display: grid; place-items: center; background: var(--scrim); color: var(--ink); border: 1px solid var(--hair); pointer-events: none; transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease); }
.zoom-sign .ico { inline-size: .8rem; block-size: .8rem; }
.seq-art .zoom-sign, .cs-art .zoom-sign { inline-size: 1.05rem; block-size: 1.05rem; inset: auto .12rem .12rem auto; border-width: 0; }
.seq-art .zoom-sign .ico, .cs-art .zoom-sign .ico { inline-size: .62rem; block-size: .62rem; stroke-width: 2; }
:is(.keep-tile, .kit-t, .seq-art, .cs-art, .ov-cover, .bs-cover):hover .zoom-sign, :is(.keep-tile, .kit-t, .seq-art, .cs-art, .ov-cover, .bs-cover):focus-visible .zoom-sign { background: var(--white); border-color: var(--brass); }
.opt-art .mv-again { inset-inline-start: 2.7rem; }   /* the answer's mark has that corner */
/* a room to sort: a mouse has the button; a finger's tap on the room opens it, so there the mark is only the sign */
.sort-item > .zoom-sign { display: none; inset-block-start: auto; inset-block-end: .2rem; inset-inline-end: .2rem; inline-size: 1.3rem; block-size: 1.3rem; }
.sort-item > .zoom-sign .ico { inline-size: .7rem; block-size: .7rem; }
@media (pointer: coarse) { .sort-item > .zoom-mini { display: none; } .sort-item > .zoom-sign { display: grid; } }
/* the console's full view is one drawing of the room: its lines a little firmer at that size */
.vw-scene { border-radius: 10px; overflow: hidden; border: 1px solid var(--hair); }
.vw-scene :is(.sv-ln, .sv-w, .sv-1, .sv-2, .sv-ink) { stroke-width: 2.2; }

.viewer { position: fixed; inset: 0; z-index: 95; background: var(--ink); color: var(--paper); user-select: none; -webkit-user-select: none; animation: fade var(--fast) linear; }
.viewer[data-tone="art"] { background: var(--linen); color: var(--ink); }
.vw-stage { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; touch-action: none; cursor: zoom-in; padding-block: calc(env(safe-area-inset-top) + 4.4rem) calc(env(safe-area-inset-bottom) + 5.2rem); }
/* a caption has the rows its words need (--cap-h is its height, set as each picture is shown): the picture gives them the room */
.viewer[data-cap] .vw-stage { padding-block-end: calc(env(safe-area-inset-bottom) + 5.6rem + var(--cap-h, 3.4rem)); }
.viewer[data-in] .vw-stage { cursor: grab; }
.vw-item { display: grid; place-items: center; max-inline-size: 100%; max-block-size: 100%; min-block-size: 0; transform-origin: center; transition: transform 300ms var(--ease); }
.vw-item.is-live { transition: none; }
.vw-item img { display: block; max-inline-size: 100vw; max-block-size: calc(100dvh - 9.6rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)); object-fit: contain; pointer-events: none; }
.viewer[data-cap] .vw-item img { max-block-size: calc(100dvh - 10rem - var(--cap-h, 3.4rem) - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
.vw-art { inline-size: min(100vw - 1.5rem, (100dvh - 9.6rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * var(--ar)); aspect-ratio: var(--ar); pointer-events: none; }
.viewer[data-cap] .vw-art { inline-size: min(100vw - 1.5rem, (100dvh - 10rem - var(--cap-h, 3.4rem) - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * var(--ar)); }
.vw-art svg { display: block; inline-size: 100%; block-size: 100%; }
.vw-art.walk-map { padding: 0; border: 0; background: none; }
.vw-top { position: absolute; z-index: 2; inset-block-start: 0; inset-inline: 0; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: calc(env(safe-area-inset-top) + .7rem) max(.75rem, env(safe-area-inset-right)) .5rem max(1.1rem, env(safe-area-inset-left)); pointer-events: none; }
.vw-top > * { pointer-events: auto; }
.vw-count { font-size: .82rem; letter-spacing: .18em; font-variant-numeric: tabular-nums lining-nums; }
.vw-close, .film-close { background: var(--paper); color: var(--ink); border: 1px solid var(--hair); min-block-size: 3rem; padding-inline: 1rem 1.3rem; }
.vw-close:hover, .film-close:hover { background: var(--white); }
.viewer[data-tone="art"] .vw-close { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.vw-cap { position: absolute; z-index: 2; inset-inline: 0; inset-block-end: calc(env(safe-area-inset-bottom) + 4.9rem); margin: 0; padding-inline: 1.25rem; max-block-size: 8.6rem; overflow: hidden; text-align: center; font-family: var(--serif); font-size: 1.25rem; line-height: 1.35; pointer-events: none; }
.vw-cap:empty { display: none; }
/* a picture that can be given something while it is seen large (a room, its level): the choices sit under it */
.vw-ask { position: absolute; z-index: 3; inset-inline: 0; inset-block-end: calc(env(safe-area-inset-bottom) + 4.9rem); display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .5rem; inline-size: min(100% - 1.5rem, 36rem); margin-inline: auto; }
.vw-pick { display: flex; align-items: center; justify-content: center; gap: .55rem; min-block-size: 3.4rem; padding: .45rem .9rem; border-radius: 14px; background: var(--paper); color: var(--ink); border: 1.5px solid var(--hair); font-family: var(--serif); font-size: 1.1rem; line-height: 1.15; text-align: start; transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease); }
.vw-pick:hover { border-color: var(--brass); }
.vw-pick:active { transform: scale(.97); }
.vw-pick[aria-pressed="true"] { border-color: var(--brass); background: var(--l2); }
.vw-pick .lv-sw { flex: none; margin: 0; }
.viewer[data-ask] .vw-cap { inset-block-end: calc(env(safe-area-inset-bottom) + 9rem); max-block-size: 3.5rem; }
.viewer[data-ask] .vw-stage { padding-block-end: calc(env(safe-area-inset-bottom) + 9.9rem + var(--cap-h, 1.7rem)); }
.viewer[data-ask] .vw-item img { max-block-size: calc(100dvh - 14.5rem - var(--cap-h, 1.7rem) - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
@media (max-width: 420px) { .vw-ask { gap: .4rem; inline-size: calc(100% - 1rem); } .vw-pick { font-size: 1rem; padding-inline: .6rem; } }
/* a phone on its side has no height to spare: the two choices stand at either end of the row of buttons, and the picture keeps its size */
@media (max-height: 520px) and (orientation: landscape) {
  .vw-ask { inset-block-end: calc(env(safe-area-inset-bottom) + .75rem); display: flex; justify-content: space-between; inline-size: calc(100% - 1.5rem - env(safe-area-inset-left) - env(safe-area-inset-right)); pointer-events: none; }
  .vw-pick { pointer-events: auto; max-inline-size: calc(50% - 8.4rem); min-block-size: 3.1rem; font-size: 1rem; }
  .viewer[data-ask] .vw-cap { inset-block-end: calc(env(safe-area-inset-bottom) + 4.9rem); }
  .viewer[data-ask] .vw-stage { padding-block-end: calc(env(safe-area-inset-bottom) + 5.6rem + var(--cap-h, 3.4rem)); }
  .viewer[data-ask] .vw-item img { max-block-size: calc(100dvh - 10rem - var(--cap-h, 3.4rem) - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
}
.vw-tools { position: absolute; z-index: 2; inset-inline: 0; inset-block-end: calc(env(safe-area-inset-bottom) + .9rem); display: flex; justify-content: center; gap: .6rem; pointer-events: none; }
.vw-btn { pointer-events: auto; inline-size: 3.1rem; block-size: 3.1rem; border-radius: 50%; display: grid; place-items: center; background: var(--paper); color: var(--ink); border: 1px solid var(--hair); transition: transform var(--fast) var(--ease), opacity var(--fast) var(--ease); }
.viewer[data-tone="art"] .vw-btn { background: var(--white); border-color: var(--edge); }
.vw-btn:active { transform: scale(.92); }
.vw-btn[disabled] { opacity: .4; }
.vw-btn .ico { inline-size: 1.35rem; block-size: 1.35rem; }
/* the hint stands on the viewer's own ground: a tall picture reaches up under it, and a pale one took the words with it */
.vw-hint { position: absolute; z-index: 2; inset-inline: 0; inset-block-start: calc(env(safe-area-inset-top) + 4.15rem); inline-size: max-content; max-inline-size: calc(100% - 1.5rem); margin-block: 0; margin-inline: auto; padding: .2rem .8rem; border-radius: 999px; background: var(--ink); text-align: center; font-size: .82rem; line-height: 1.35; letter-spacing: .04em; pointer-events: none; animation: vw-hint 4200ms linear 1 both; }
.viewer[data-tone="art"] .vw-hint { background: var(--linen); }
@keyframes vw-hint { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .vw-item { transition: none; } .viewer { animation: none; } }

/* ——— a film in the chapter ——— */
.sc[data-kind="film"], .sc[data-kind="video"] { --p: 60%; --pmin: 10rem; }
/* a film's title can be a long one ("Watch · Bathrooms, Dry and Bright"): on a phone it is set a little smaller,
   and on a short phone the line under it gives way, so the screen never scrolls inside */
@container stage (max-width: 699px) { .sc[data-kind="film"] .sc-title, .sc[data-kind="video"] .sc-title { font-size: 1.55rem; line-height: 1.12; } }
@container stage (max-height: 560px) and (orientation: portrait) {
  .sc[data-kind="film"], .sc[data-kind="video"] { --pmin: 8.5rem; }
  .sc[data-kind="film"] .sc-body, .sc[data-kind="video"] .sc-body { display: none; }
}
.sc-film { background: var(--ink); display: grid; place-items: center; }
.film-poster { position: relative; display: block; padding: 0; block-size: 100%; max-inline-size: 100%; aspect-ratio: 9 / 16; overflow: hidden; }
.film-poster img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform var(--slow) var(--ease); }
.film-poster:hover img { transform: scale(1.03); }
/* the employer's film is landscape: its poster lies across the frame, on linen instead of a dark ground,
   and on a wide screen it has the larger of the two columns */
.sc-film[data-wide] { background: var(--linen); }
.sc-film[data-wide] .film-poster { aspect-ratio: 16 / 9; inline-size: 100%; block-size: auto; max-block-size: 100%; outline: 1px solid var(--hair); outline-offset: -1px; }
@container stage (min-width: 720px) and (orientation: landscape) { .sc[data-kind="film"]:has(.sc-film[data-wide]) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
/* on a phone held upright a landscape film is small: the screen says that turning the phone makes it large */
.film-turn { display: none; }
@media (max-width: 899px) and (orientation: portrait) { .film-turn { display: block; } }
.film-play { position: absolute; inset-block-start: calc(50% - 2.25rem); inset-inline-start: calc(50% - 2.25rem); inline-size: 4.5rem; block-size: 4.5rem; border-radius: 50%; display: grid; place-items: center; background: var(--paper); color: var(--ink); transition: transform var(--fast) var(--ease); }
.film-play .ico { inline-size: 1.8rem; block-size: 1.8rem; fill: currentColor; stroke-width: 0; margin-inline-start: .2rem; }
.film-poster:active .film-play { transform: scale(.94); }
.film-len { display: inline-flex; gap: .35rem; align-items: center; align-self: center; font-size: .86rem; color: var(--deep); white-space: nowrap; }
.film-len .ico { inline-size: 1rem; block-size: 1rem; color: var(--brass); }
.sc-actions [data-film-play] .ico { fill: currentColor; stroke-width: 0; inline-size: 1rem; block-size: 1rem; }
.film-state { color: var(--deep); }
.film-state .ico { color: var(--brass); }
.film-lines { border-block: 1px solid var(--hair); }
.film-lines summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-block-size: 2.9rem; cursor: pointer; list-style: none; font-size: .92rem; color: var(--deep); }
.film-lines summary::-webkit-details-marker { display: none; }
.film-lines summary .ico { inline-size: 1rem; block-size: 1rem; color: var(--brass); transition: transform var(--fast) var(--ease); }
.film-lines[open] summary .ico { transform: scaleY(-1); }
.film-lines ol { margin: 0 0 .9rem; padding-inline-start: 1.3rem; display: grid; gap: .4rem; font-size: .95rem; line-height: 1.45; }
.film-lines ol li::marker { color: var(--brass); font-family: var(--serif); }
.film-lines ol b { font-weight: 400; font-family: var(--serif); font-size: 1.08em; color: var(--ink); margin-inline-end: .2em; }
@container stage (min-width: 720px) and (orientation: landscape) { .sc[data-kind="film"], .sc[data-kind="video"] { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }

.film { position: fixed; inset: 0; z-index: 96; background: var(--ink); display: grid; place-items: center; animation: fade var(--fast) linear; }
.film video { display: block; inline-size: 100%; block-size: 100%; max-block-size: 100dvh; object-fit: contain; background: var(--ink); }
.film-close { position: absolute; z-index: 3; inset-block-start: calc(env(safe-area-inset-top) + .7rem); inset-inline-end: max(.75rem, env(safe-area-inset-right)); }
.film-end { position: absolute; z-index: 2; inset: 0; display: grid; place-content: center; justify-items: center; gap: 1.25rem; padding: 1.5rem; background: var(--veil); animation: fade var(--mid) var(--ease); }
.film-end > * { margin: 0; }
.film-end-h { display: flex; gap: .6rem; align-items: center; font-family: var(--serif); font-size: 1.9rem; color: var(--paper); }
.film-end-h .ico { inline-size: 1.9rem; block-size: 1.9rem; }
.film-end .row { justify-content: center; }
.film-end .btn { background: var(--paper); color: var(--ink); }
.film-end .btn.ghost { background: var(--ink); color: var(--paper); border-color: var(--paper); }
.film-end .btn .ico { inline-size: 1.1rem; block-size: 1.1rem; }
.film-wait { position: absolute; z-index: 2; inset-inline: 1.5rem; inset-block-end: calc(env(safe-area-inset-bottom) + 5rem); margin: 0; padding: .9rem 1.1rem; border-radius: 10px; background: var(--paper); color: var(--ink); text-align: center; }

/* small fixes found while looking: the Back arrow in the reader's footer, and the ring round the step in hand,
   which now hugs its chip so the edge of the column cannot cut it */
@media (max-width: 480px) {
  .fl-foot .btn[data-fl-prev] { padding: 0; }   /* a later rule had put the button's side padding back, which squeezed its arrow to 8 px */
  .fl-foot [data-fl-prev] .ico { inline-size: 1.6rem; block-size: 1.6rem; }
}   /* alone in its circle, the arrow is drawn larger */
.numchips button[aria-current="true"] { outline-offset: -1px; }

/* the beat track as one button on a phone, and the chapter's beats by name */
.fl-track { display: flex; gap: inherit; inline-size: 100%; min-inline-size: 0; min-block-size: 2.75rem; align-items: center; padding: 0; text-align: start; border-radius: 8px; -webkit-tap-highlight-color: transparent; }
.fl-track:active { background: var(--linen); }
.fl-track .fl-beat { display: grid; }
.cb-time { display: flex; gap: .45rem; align-items: flex-start; margin: -.6rem 0 1rem; font-size: .9rem; line-height: 1.4; color: var(--deep); }
.cb-time .ico { inline-size: 1rem; block-size: 1rem; color: var(--brass); margin-block-start: .15rem; }
.cb { list-style: none; margin: 0 0 1.1rem; padding: 0; display: grid; gap: .4rem; }
.cb-row { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto; gap: .8rem; align-items: center; inline-size: 100%; min-block-size: 3.5rem; padding: .45rem .8rem .45rem .5rem; border: 1px solid var(--hair); border-radius: 12px; background: var(--white); text-align: start; transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease); }
.cb-row:hover { border-color: var(--brass); }
.cb-row[aria-current="step"] { border-color: var(--brass); background: var(--l1); }
.cb-row[disabled] { background: var(--paper); color: var(--deep); }
.cb-ic { inline-size: 2.6rem; block-size: 2.6rem; border-radius: 50%; display: grid; place-items: center; background: var(--l1); border: 1px solid var(--l2); color: var(--brass); }
.cb-row[disabled] .cb-ic { background: var(--paper); border-color: var(--hair); color: var(--edge); }
.cb-t { display: grid; gap: .05rem; }
.cb-t b { font-weight: 400; font-family: var(--serif); font-size: 1.3rem; line-height: 1.15; }
.cb-t small { font-size: .82rem; color: var(--deep); }
.cb-row > .ico { inline-size: 1.1rem; block-size: 1.1rem; color: var(--brass); }
.cb-row[disabled] > .ico { color: var(--edge); }

/* The smallest phones (under 370 px wide), with the larger text: nine step chips still fit one row at a size
   a finger can hit, and Next names the beat without "Next" before it, so the name is never cut short. */
@container stage (max-width: 369px) {
  .numchips { gap: .2rem; }
  .numchips button { inline-size: max(32px, min(2.05rem, (100cqi - 2 * var(--pg) - 1.6rem) / 9)); }
}
@media (max-width: 369px) { .fl-nx { display: none; } }
/* A part with a long name (the book's "The Starter Playbook Card") does not fit the Next button on one row of a
   phone. It takes two rows there; it is never cut short. */
@media (max-width: 480px) {
  .fl-foot .btn[data-fl-next] { white-space: normal; text-align: start; line-height: 1.2; padding-block: .4rem; }
  .fl-foot [data-fl-next] > span { overflow: visible; text-overflow: clip; }
}

/* Side by side on a short stage (a tablet held sideways, a 1280 x 720 laptop), with the larger text:
   the words sit a little closer so a long callout still shows whole. */
@container stage (max-height: 620px) and (orientation: landscape) {
  .sc { padding-block: 1rem; }
  .sc-text { gap: .7rem; }
  .sc-title { font-size: clamp(1.7rem, 3vw, 2.45rem); }
  .sc-lead { font-size: 1.06rem; line-height: 1.5; }
  .sc-body { font-size: 1rem; line-height: 1.5; }
  .sc-text .callout { padding: .9rem 1rem; }
  .sc-text .callout p { line-height: 1.5; }
  .sc-principle { padding: .55rem .8rem; }
}

/* The employer's three decisions on a phone: the form is the task, and each box now shows its whole example
   or answer, so the drawing above it (which the screen before has, large) steps aside and the form sits closer.
   On a tablet held upright there is room for both. */
@container stage (orientation: portrait) {
  .sc[data-kind="decisions"]:has(form) { --p: 15%; --pmin: 4.75rem; }
  .sc[data-kind="decisions"] .sc-text { gap: .7rem; }
  .sc-text .decisions { padding: .8rem .9rem; gap: .6rem; }
  .sc-text .decisions .field { gap: .3rem; }
  .sc-text .decisions .textarea { min-block-size: 2.7rem; padding-block: .55rem; }
  .sc-text .decisions .btn.small { min-block-size: 2.4rem; }
}
@container stage (max-width: 699px) and (orientation: portrait) {
  .sc[data-kind="decisions"]:has(form) { --p: 0px; --pmin: 0px; grid-template-rows: minmax(0, 1fr); }
  .sc[data-kind="decisions"]:has(form) > .sc-media { display: none; }
}
/* On a wide screen the form has the whole width: the three decisions stand side by side, each with room for
   its answer, and Save under them. */
@container stage (min-width: 720px) and (orientation: landscape) {
  .sc[data-kind="decisions"]:has(form) { grid-template-columns: minmax(0, 1fr); }
  .sc[data-kind="decisions"]:has(form) > .sc-media { display: none; }
  .sc[data-kind="decisions"] form.decisions { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 1.5rem; align-items: start; padding: 1.4rem 1.5rem; }
  .sc[data-kind="decisions"] form.decisions > .row { grid-column: 1 / -1; }
}

/* Sign in, and who is using this device: no frame at all, so the empty top bar does not leave a band above the picture. */
.app:not([data-shell]) > .bar, .app:not([data-shell]) > .quick { display: none; }

/* A phone held sideways has little height: the quick bar keeps its marks and puts their names away
   (still read aloud), so the page keeps what room there is. */
@media (max-width: 899px) and (max-height: 480px) {
  :root { --quick-h: 3.1rem; }
  .qb > span:last-of-type { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
  .qb-find { align-content: center; padding-block-end: 0; }
  .qb-disc { inline-size: 2.7rem; block-size: 2.7rem; margin-block: -.9rem 0; }
  .qb-disc .ico { inline-size: 1.4rem; block-size: 1.4rem; }
}

/* The smallest phones (360 by 640 and the like) have no room for the larger text in the middle of an exercise:
   they keep the size the screens were first fitted at. Every other phone has the larger text. */
@media (max-width: 369px) and (max-height: 700px) { html { font-size: 100%; } }

/* Put in order, side by side on a short stage (a tablet held sideways), with the larger text: the cards sit closer. */
@container stage (max-height: 620px) and (orientation: landscape) {
  .seq { gap: .35rem; }
  .seq-card { padding-block: .3rem; }
  .seq-art { inline-size: 3.1rem; }
}