/* Repair · the stage film (seq.js): the part's animation with its words beneath, then its list.
   Always on the deep ground, in both themes, like The One Book's deep bands. The top bar and the session bar
   step away while it plays; Penguin and the sound stay in the corner.

   THE FRAME (contract, 2026-10-27; the owner: "Please utilize all the screenspace."). The film covers the whole
   screen, edge to edge, under the status bar and the home indicator. A stage that sets frame:'screen' gets a
   scene element as large as the screen; its lines sit in a band at the bottom, over a scrim, clear of the
   corner. scene(el, {band}) · band() says where that band begins, in px from the top of el. A stage without
   frame:'screen' keeps its 940:900 square, centred in the space above the lines, until it is redrawn. */

/* The page enters each screen with a transform animation (.step.enter); while that animation fills, `main` is
   the containing block of every position:fixed child, and the film was boxed between the top bar and the
   action bar (the owner's photos, 2026-10-27). No transform while a film plays. */
#app[data-seq="1"] #stage,#app[data-seq="hold"] #stage{animation:none;transform:none}

.seq{--seq-bg:#0A120D;position:fixed;inset:0;z-index:40;background:var(--seq-bg);color:#F5F0E4;overflow:hidden;
  display:grid;grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr);place-items:center;padding:0;
  --sg:#D9BD72;--sgl:#E7D39A;--sm:#84C7A4;
  --st:env(safe-area-inset-top,0px);--sb:env(safe-area-inset-bottom,0px);--sl:env(safe-area-inset-left,0px);--sr:env(safe-area-inset-right,0px);
  /* the room the corner takes at the foot of the screen; seq.js sets it from the corner as drawn */
  --corner-h:calc(76px + var(--sb))}
:root[data-theme="light"] .seq{--seq-bg:#17271E}
.seq>*{grid-area:1/1}
/* the film is placed absolutely: out of the grid, its containing block is the whole overlay, never a grid area
   that a padding (Ready's, when a list holds) has narrowed */
.seq>.seq-film{grid-area:auto}
/* the title and the alone line stand at the centre of the whole screen: the overlay has no padding to tilt them */
.seq-title{text-align:center;pointer-events:none;visibility:hidden;padding:0 calc(24px + var(--sr)) 0 calc(24px + var(--sl))}
.seq-title .e{font-size:var(--fs-xs);font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--sm);margin-bottom:16px}
.seq-title .t{font-family:var(--f-disp);font-size:clamp(52px,15vw,76px);line-height:.94;letter-spacing:.01em;max-width:8.5ch;margin:0 auto}
.seq-title .w{display:inline-block;white-space:nowrap}
.seq-title .lt{display:inline-block;opacity:0;text-shadow:0 0 22px rgba(242,212,138,.32);will-change:opacity,filter,transform}

/* the film: the whole screen; the scene above (or behind) the lines, the lines above the corner */
.seq-film{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  padding:calc(var(--st) + 12px) calc(24px + var(--sr)) var(--corner-h) calc(24px + var(--sl));visibility:hidden;opacity:0}
/* a square scene (not yet redrawn): centred in the space above the lines, as large as that space allows */
.seq-box{flex:1 1 auto;min-height:0;width:100%;display:grid;place-items:center;container-type:size}
.seq-box .seq-scene{position:relative;width:min(100cqw,420px,calc(100cqh * 940 / 900));aspect-ratio:940/900}
/* a full-screen scene: the whole screen behind everything */
.seq-film.full .seq-scene{position:absolute;inset:0;z-index:0}
.seq-film.full .seq-spacer{flex:1 1 auto}
/* the scrim: clear above, and at full strength from where the band begins (--band-top, seq.js) to the foot, so a
   line reads at AAA contrast over the brightest scene (cream on the deep ground at 84% over white: ~9:1) */
.seq-scrim{display:none}
.seq-film.full .seq-scrim{--fade:clamp(64px,13vh,132px);display:block;position:absolute;left:0;right:0;bottom:0;
  top:calc(var(--band-top,52%) - var(--fade));z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,color-mix(in srgb,var(--seq-bg) 0%,transparent),color-mix(in srgb,var(--seq-bg) 56%,transparent) calc(var(--fade) * .55),color-mix(in srgb,var(--seq-bg) 84%,transparent) var(--fade),color-mix(in srgb,var(--seq-bg) 92%,transparent))}
.seq-scene canvas,.seq-scene svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.seq-line,.seq-alone,.seq-list .x{hyphens:manual;-webkit-hyphens:manual}
/* onebook.css sets main p{text-align:justify}: these are centred, the last row too */
.seq-line,.seq-alone{text-align-last:center}
/* the band's height is the film's longest line at this width (seq.js), so it does not jump; this is its floor
   until that measure lands */
.seq-line{position:relative;z-index:2;flex:none;margin:clamp(14px,3vh,28px) 0 0;min-height:calc(5*1.45em);font-size:var(--t-lead);line-height:1.45;text-align:center;color:#F5F0E4;max-width:28ch;opacity:0}
.seq-film.full .seq-line{text-shadow:0 1px 2px color-mix(in srgb,var(--seq-bg) 70%,transparent),0 0 16px color-mix(in srgb,var(--seq-bg) 60%,transparent)}
.seq-alone{margin:0;padding:0 calc(24px + var(--sr)) 0 calc(24px + var(--sl));font-size:clamp(28px,8vw,40px);line-height:1.22;text-align:center;max-width:calc(13ch + 48px + var(--sl) + var(--sr));opacity:0;visibility:hidden}

/* the list: fits the screen above the corner (or above Ready, when it holds). seq.js eases its spacing (--lg),
   then its type (--ls), until it does; only then does it scroll, with a fade on the edge that has more. */
.seq-list{--lg:1;--ls:1;--pt:calc(var(--st) + 16px * var(--lg));--pb:var(--corner-h);
  width:min(380px,calc(100% - 48px - var(--sl) - var(--sr)));max-height:100%;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;
  padding:var(--pt) 0 var(--pb);visibility:hidden;opacity:0}
.seq-list::-webkit-scrollbar{display:none}
.seq-list.scrolls{--fu:0px;--fd:0px;
  -webkit-mask-image:linear-gradient(to bottom,transparent var(--pt),#000 calc(var(--pt) + var(--fu)),#000 calc(100% - var(--pb) - var(--fd)),transparent calc(100% - var(--pb)));
  mask-image:linear-gradient(to bottom,transparent var(--pt),#000 calc(var(--pt) + var(--fu)),#000 calc(100% - var(--pb) - var(--fd)),transparent calc(100% - var(--pb)))}
.seq-list.more-up{--fu:40px}
.seq-list.more-down{--fd:64px}
.seq-list .eyebrow{color:var(--sm);margin-bottom:calc(24px * var(--lg))}
.seq-list ol{list-style:none;margin:0;padding:0}
.seq-list li{--r:calc(48px * var(--ls));position:relative;display:grid;grid-template-columns:var(--r) 1fr;column-gap:calc(16px * var(--ls));padding-bottom:calc(24px * var(--lg));--k:0;--line:0}
.seq-list .ring{grid-area:1/1;width:var(--r);height:var(--r);transform:rotate(-90deg)}
.seq-list .ring circle{fill:none;stroke:var(--sg);stroke-width:1.5;stroke-dasharray:131.95;stroke-dashoffset:calc(131.95px * (1 - var(--k)))}
.seq-list .n{grid-area:1/1;display:grid;place-items:center;width:var(--r);height:var(--r);font-family:var(--f-disp);font-size:calc(26px * var(--ls));line-height:1;padding-top:calc(3px * var(--ls));color:var(--sgl);
  opacity:var(--k);transform:scale(calc(1.3 - .3 * var(--k)));filter:blur(calc((1 - var(--k)) * 6px))}
.seq-list .x{grid-area:1/2;align-self:start;padding-top:calc(12px * var(--ls));font-size:calc(var(--t-lead) * var(--ls));line-height:1.35;opacity:var(--k);transform:translateX(calc((1 - var(--k)) * 14px))}
.seq-list li:not(:last-child)::after{content:"";position:absolute;left:calc(var(--r) / 2 - .75px);top:calc(var(--r) + 4px);width:1.5px;height:calc(100% - var(--r) - 8px);background:linear-gradient(var(--sg),rgba(217,189,114,0));transform:scaleY(var(--line));transform-origin:top}

.seq-corner{position:absolute;z-index:3;left:calc(16px + var(--sl));right:calc(16px + var(--sr));bottom:calc(14px + var(--sb));display:flex;justify-content:space-between;align-items:center;opacity:.42}
.seq-corner .sbtn{background:transparent;border-color:rgba(245,240,228,.22);color:#F5F0E4}
.seq-corner .navbtn{color:#F5F0E4}
/* Skip sits between Penguin and the sound; one phone's tap shows Waiting for the other there (app.js) */
.seq-skip{flex:1 1 auto;display:flex;justify-content:center}
.seq-skip .wait{font-size:var(--fs-sm);color:#F5F0E4}
#app[data-seq="1"] #top,#app[data-seq="1"] #act{visibility:hidden}
/* a stage that holds its list: Ready comes back over the film, and the list ends above it */
#app[data-seq="hold"] #top{visibility:hidden}
#app[data-seq="hold"] #act{position:fixed;left:0;right:0;bottom:0;z-index:46}
#app[data-seq="hold"] .seq-corner{display:none}
#app[data-seq="hold"] .seq{padding-bottom:var(--act-h,0px)}
#app[data-seq="hold"] .seq-list{--pb:16px}