/* The product's styles, phone first. Colours and fonts come from tokens.css only.

   A light table at night: the page is the roast ground, panels are walnut, fields are sunk
   wells, and the only accent is the lamp, which means "the light is on here". It is a fill for
   lit film, the switch that is on and one button a screen. As a text colour it appears here at
   most three times (tests/test_guards.py counts).

   Order: the base, the shell, the shared pieces every page uses, the film strip, then each
   screen's own layout. */

/* ---------- the base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; color-scheme: dark; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
  background: var(--roast) var(--ground) no-repeat; color: var(--paper);
  font-family: var(--font-text); font-size: 1rem; font-weight: 400; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
h1, h2, h3, .d {
  font-family: var(--font-display); font-stretch: 82%; font-weight: 740; letter-spacing: -0.012em; line-height: 1.06;
  font-optical-sizing: auto; margin: 0;
}
h1 { font-size: 31px; }
h2 { font-size: 22px; }
h3 { font-size: 20px; line-height: 1.12; }
/* Small labels are written and shown in sentence case ("Why it ranks here"), never capitals. */
h3.minor, .part h3 {
  font-family: var(--font-text); font-stretch: 100%; font-size: 0.9375rem; font-weight: 650; letter-spacing: 0; line-height: 1.4; color: var(--ash);
}
p { margin: 0; }
a { color: var(--paper); text-decoration-color: var(--underline); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--paper); }
:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; border-radius: 2px; }
:target { scroll-margin-top: calc(var(--top) + 16px); }
h1, h2, h3, p, li, dd, td { overflow-wrap: anywhere; }  /* one long unbroken run (a link, a hashtag) wraps instead of widening the page */

/* every price and count */
.num { font-variant-numeric: var(--numerals); font-feature-settings: "tnum"; }
.muted { color: var(--ash); }
.hint, .meta { font-size: 0.84375rem; font-weight: 400; line-height: 1.45; word-spacing: 0.06em; color: var(--ash); }
.label { font-weight: 650; margin-right: 0.4em; color: var(--paper); }
.nb { white-space: nowrap; }
.out, .more { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; white-space: nowrap; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- the shell: a top bar; the three places as tabs in it on a laptop, as a bar along the bottom on a phone ---------- */
.top { position: sticky; top: 0; z-index: 40; padding-top: env(safe-area-inset-top, 0px); background: var(--walnut); border-bottom: 1px solid var(--rule); }
.top__in { max-width: 1280px; margin: 0 auto; height: var(--bar); padding: 0 var(--gut); display: flex; align-items: center; gap: 20px; }
.brand {
  display: flex; align-items: center; gap: 9px; min-height: 44px; margin-right: auto; text-decoration: none;
  font-weight: 600; white-space: nowrap;
}
.brand img { display: block; border-radius: 5px; }
.top-right { display: flex; align-items: center; gap: 16px; font-size: 0.9375rem; }
.wallet { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 650; text-decoration: none; }
.wallet .hint { display: none; }
.account { display: inline-flex; align-items: center; min-height: 44px; color: var(--ash); }
.account:hover { color: var(--paper); }
/* The current place is paper and bold with a paper bar: the lamp is kept for light. */
.places { display: none; align-self: stretch; }
.places a { position: relative; display: flex; align-items: center; padding: 0 16px; color: var(--ash); text-decoration: none; }
.places a:hover { color: var(--paper); }
.places a[aria-current="page"] { color: var(--paper); font-weight: 700; }
.places a[aria-current="page"]::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: -1px; height: 3px; background: var(--paper); }
.bottom {
  position: sticky; bottom: 0; z-index: 40; display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--walnut); border-top: 1px solid var(--rule); padding-bottom: env(safe-area-inset-bottom, 0);
}
.bottom a { position: relative; display: flex; align-items: center; justify-content: center; height: 56px; color: var(--ash); font-size: 0.9375rem; text-decoration: none; }
.bottom a[aria-current="page"] { color: var(--paper); font-weight: 700; }
.bottom a[aria-current="page"]::before { content: ""; position: absolute; top: -1px; left: 30%; right: 30%; height: 3px; background: var(--paper); }
.foot { display: grid; gap: 6px; padding: 18px var(--gut) 22px; font-size: 0.84375rem; text-align: center; color: var(--ash); border-top: 1px solid var(--rule); }
.foot p { margin: 0; }
.foot a { color: var(--ash); }
.foot a:hover { color: var(--paper); }
.foot__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; }
.foot__links a { display: inline-block; padding: 4px 0; }
.foot__yt { font-size: 0.78125rem; }
.front__what { font-size: 1.0625rem; line-height: 1.5; }
.shot__src { display: block; font-size: 0.6875rem; line-height: 1.3; font-stretch: 85%; color: var(--ash); }
/* Opened from a phone's home screen the page has the whole screen (viewport-fit=cover in each head), so the shell
   keeps clear of what the phone draws over it: the status bar (the top bar's own padding, above), the home indicator
   (the bottom bar's, above; the footer's where there is no bottom bar) and, held sideways, the notch. The passcode
   page has no top bar, so its one block steps down instead. In a browser tab every one of these insets is 0. */
body { padding: 0 env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px); }
body > main:first-child { margin-top: env(safe-area-inset-top, 0px); }
.foot:last-child { padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px)); }

/* ---------- layout ---------- */
main { flex: 1; width: 100%; max-width: 1040px; margin: 0 auto; padding: 24px var(--gut) 56px; }
main.narrow { max-width: 460px; padding-top: 40px; }
main.reading { max-width: 760px; }
main.wide { max-width: 1280px; }
.stack { display: grid; gap: 16px; align-content: start; }  /* rows keep their own height in a stretched card */
.stack > * { min-width: 0; }
.stack.tight { gap: 8px; }
.split { display: grid; gap: 16px; }
.card { background: var(--walnut); border-radius: var(--radius); padding: 20px; }
.row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.back { font-size: 0.9375rem; }
.back a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ash); text-decoration: none; }
.back a:hover { color: var(--paper); }

/* ---------- forms: 16px text and 48px targets, so a phone neither zooms nor misses ---------- */
label { display: grid; gap: 6px; font-size: 0.9375rem; font-weight: 600; }
input[type="email"], input[type="password"], input[type="text"], input[type="url"], textarea, select {
  width: 100%; min-height: 48px; padding: 12px 14px;
  font: inherit; font-size: 1rem; font-weight: 400; color: var(--paper);
  background: var(--well); border: 1px solid var(--edge); border-radius: var(--radius-small);
}
textarea { resize: vertical; field-sizing: content; line-height: 1.45; }
select { padding: 10px 14px; }
::placeholder { color: var(--ash); opacity: 0.75; }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--paper); outline-offset: 1px; border-color: var(--paper); border-radius: var(--radius-small); }
/* a set of fields that belong together, and a list edited one row at a time */
.group { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.group legend { padding: 0 0 2px; font-size: 0.9375rem; font-weight: 600; }
.group .group { padding-left: 12px; border-left: 2px solid var(--rule); }
.lab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
label.line { display: flex; align-items: flex-start; gap: 8px; }
label.line textarea { flex: 1; min-width: 0; }
label.line .badge { margin-top: 13px; }
label.tick { display: flex; align-items: flex-start; gap: 10px; font-weight: 400; }
label.tick input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--paper); }
/* a small tag: what we inferred rather than read, where an angle came from. An outline, never the lamp. */
.badge {
  display: inline-block; flex: none; padding: 1px 7px 2px; font-size: 0.75rem; font-weight: 650; line-height: 1.45; white-space: nowrap;
  color: var(--paper); border: 1px solid var(--edge); border-radius: 3px;
}
.actions { display: flex; }

/* buttons. The ordinary main button is paper; a quiet one is an outline; the lamp fills one button a screen at most. */
.button {
  appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 0.3em;
  width: 100%; min-height: 48px; padding: 10px 18px; cursor: pointer; text-decoration: none;
  font: inherit; font-size: 1rem; font-weight: 700; line-height: 1.2; text-align: center;
  color: var(--main-ink); background: var(--main-fill); border: 1.5px solid var(--main-edge); border-radius: var(--radius-small);
}
.button:hover { background: var(--main-hover); border-color: var(--main-hover-edge); }
.button.quiet { color: var(--paper); background: transparent; border-color: var(--line); font-weight: 600; }
.button.quiet:hover { background: transparent; border-color: var(--paper); }
.button.lamp { color: var(--on-lamp); background: var(--lamp); border-color: var(--lamp); }
.button.lamp:hover { background: var(--lamp); border-color: var(--paper); }
.button.small { min-height: 44px; padding: 8px 16px; font-size: 0.9375rem; }
/* one main button a screen: where a screen has its lamp button, the other filled ones wear the second colours (in the current look those are the same) */
body:has(.button.lamp) .button:not(.lamp):not(.quiet):not([aria-pressed="true"]) { color: var(--second-ink); background: var(--second-fill); border-color: var(--second-edge); }
body:has(.button.lamp) .button:not(.lamp):not(.quiet):not([aria-pressed="true"]):hover { background: var(--second-hover); border-color: var(--second-hover-edge); }
.link {
  appearance: none; padding: 0; border: 0; background: none; cursor: pointer; min-height: 44px;
  font: inherit; color: var(--paper); text-decoration: underline; text-decoration-color: var(--underline); text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.link:hover { text-decoration-color: var(--paper); }

/* a message: a bar down its side, paper when something needs doing, ash when it is only news */
.notice {
  padding: 12px 14px 13px; font-size: 0.9375rem; line-height: 1.5; background: var(--walnut);
  border-left: 4px solid var(--paper); border-radius: var(--radius-small);
}
.notice.plain { border-left-color: var(--ash); }
.card .notice { background: var(--well); }

/* ---------- a ranked list: a drop's previews, a search's cards. Each row has its number in an
   empty frame of film (nothing shot for it yet); an opened one has film in the frame. ---------- */
.angles { list-style: none; margin: 0; padding: 0; }
.angle {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 108px; padding: 18px 0 20px 56px;
  border-top: 1px solid var(--rule);
}
.angle > * { min-width: 0; grid-column: 1 / -1; }
.rank {
  position: absolute; left: 0; top: 19px; display: grid; place-items: center; width: 40px; height: 71px;
  border: 1.5px dashed var(--edge); border-radius: 3px;
  font-family: var(--font-display); font-stretch: 82%; font-size: 22px; font-weight: 700; color: var(--ash);
}
.angle > .rank { grid-area: auto; }  /* placed against the row itself, not against a cell of its grid */
.angle.opened > .rank { border: 0; background: var(--film); box-shadow: 0 0 0 3px var(--gate); color: var(--paper); }
.angle h3 a { text-decoration: none; }
.angle h3 a:hover { text-decoration: underline; text-decoration-color: var(--line); text-decoration-thickness: 1.5px; }
.angle__say { display: grid; gap: 8px; align-content: start; }
/* on a phone the reason runs the row's width, then the thumbs and the button share one line */
.angle__why { display: contents; }
.angle__why > .why { grid-column: 1 / -1; }
.angle__why > .thumbs { grid-column: 1; }
.angle__say ~ .do { grid-column: 2; }
.angle .do .button { width: auto; min-width: 150px; }
.angle > .stack { overflow-wrap: anywhere; }  /* a caption that is one long unbroken run still fits a phone */
.hook { font-size: 1.125rem; font-weight: 400; line-height: 1.4; }
.why { font-size: 0.9375rem; line-height: 1.5; color: var(--ash); }
.ready-line { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 0.84375rem; line-height: 1.4; color: var(--ash); justify-self: start; }
.ready-line > span:first-child { flex: none; width: 20px; }

/* ---------- a generated piece: every field under its own quiet label, at a width that reads well ----------
   The fields come by their own keys (app/shape.py), so these rules dress whatever shape arrives:
   a line of prose, a set of named lines (each name run in at the start of its line), a numbered
   list of such sets, a plain list. */
.doc { max-width: 41.25rem; margin-top: 26px; border-top: 1px solid var(--rule); }
.part { display: grid; gap: 8px; padding: 18px 0 20px; border-top: 1px solid var(--rule); }
.part:first-child { border-top: 0; }
.part > * { min-width: 0; }
.part > .prose { font-size: 1.0625rem; line-height: 1.55; }
.prose { white-space: pre-line; overflow-wrap: anywhere; }
.lines { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.lines.plain { list-style: none; padding-left: 0; }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps > li { counter-increment: step; position: relative; padding: 12px 0 14px 34px; border-top: 1px solid var(--rule); }
.steps > li:first-child { padding-top: 2px; border-top: 0; }
.steps > li:last-child { padding-bottom: 0; }
.steps > li::before {
  content: counter(step); position: absolute; left: 0; top: 11px;
  font-family: var(--font-display); font-stretch: 82%; font-variant-numeric: var(--numerals); font-size: 22px; font-weight: 700; line-height: 1.2; color: var(--ash);
}
.steps > li:first-child::before { top: 1px; }
.pairs { display: grid; gap: 10px; margin: 0; }
.pairs > div { min-width: 0; }
.pairs dt { display: inline; margin-right: 0.45em; font-weight: 650; }
.pairs dd { display: inline; margin: 0; }
.pairs dd > .prose { display: inline; }
.pairs dd > .pairs, .pairs dd > .lines, .pairs dd > .steps { margin-top: 8px; }
.pairs dd > .pairs { padding-left: 14px; border-left: 2px solid var(--rule); }
.addons { display: grid; gap: 10px; }
.addons .button:not(.quiet) { color: var(--paper); background: transparent; border-color: var(--paper); }  /* a set of equal choices: none of them is the one main button */
.addons .button:not(.quiet):hover { background: var(--walnut); }
.card .addons .button:not(.quiet):hover, .makeit .addons .button:not(.quiet):hover { background: var(--well); }
.addons__note { margin-top: -4px; font-size: 0.84375rem; line-height: 1.45; color: var(--ash); }

/* ---------- admin pages: plain tables that scroll sideways on a phone rather than break the page ---------- */
.tabs { font-size: 0.9375rem; color: var(--ash); }
.tabs strong { color: var(--paper); }
.scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
th, td { padding: 9px 14px 9px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); white-space: nowrap; }
th { font-size: 0.8125rem; font-weight: 650; color: var(--ash); }
td.wrap { white-space: normal; min-width: 220px; }
th.n, td.n { text-align: right; }
.request { display: grid; gap: 10px; padding-bottom: 16px; border-bottom: 1px solid var(--rule); }
.request:last-child { padding-bottom: 0; border-bottom: 0; }
.versus { display: grid; gap: 24px; }
.versus .lines { gap: 12px; }
.pair { display: flex; gap: 10px; flex-wrap: wrap; }
.pair .button { width: auto; }
.flag { font-weight: 700; }

/* ---------- the wallet: the balance, then activity as lines with the amount at the right ---------- */
.balance { font-family: var(--font-display); font-stretch: 82%; font-size: 61px; font-weight: 740; letter-spacing: -0.012em; line-height: 1.04; }
.activity { list-style: none; margin: 0; padding: 0; }
.activity li { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 11px 0; border-top: 1px solid var(--rule); }
.activity li:first-child { border-top: 0; }
.activity .amount { font-weight: 600; white-space: nowrap; }

/* ---------- thumbs up or down. A pressed thumb is paper with the icon cut out of it, and says so (aria-pressed): the lamp is for film. ---------- */
.thumbs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.thumb {
  appearance: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; cursor: pointer;
  color: var(--ash); background: transparent; border: 1px solid var(--edge); border-radius: 50%;
}
.thumb:hover { color: var(--paper); border-color: var(--paper); }
.thumb.on { color: var(--roast); background: var(--paper); border-color: var(--paper); }
.note { display: grid; gap: 8px; }
.note .button { width: auto; justify-self: start; }

/* ---------- the trend finder: search terms as chips the owner can remove, and the platform's own player ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.chip {
  display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 6px 0 14px; font-size: 0.9375rem; font-weight: 500;
  border: 1px solid var(--edge); border-radius: var(--radius-small);
}
.chip:not(:has(form)) { padding-right: 14px; }
.chip form { display: flex; }
.chip button {
  appearance: none; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; cursor: pointer;
  font: inherit; font-size: 18px; line-height: 1; color: var(--paper); background: transparent; border: 0; border-radius: 50%;
}
.chip button:hover { background: var(--rule); }
.add { display: flex; align-items: flex-end; gap: 8px; }
.add label { flex: 1; min-width: 0; }
.add .button { width: auto; min-height: 48px; }
.player { display: block; width: 100%; max-width: 325px; aspect-ratio: 9 / 16; margin-top: 8px; border: 0; border-radius: var(--radius-small); background: var(--gate); }

/* a fold: a chevron that turns when it opens */
details > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; }
details > summary::-webkit-details-marker { display: none; }
details > summary::before {
  content: ""; width: 7px; height: 7px; flex: none; margin-left: 2px;
  border-right: 1.5px solid var(--ash); border-bottom: 1.5px solid var(--ash);
  transform: rotate(-45deg); transition: transform 0.15s ease;
}
details[open] > summary::before { transform: rotate(45deg); }
details > summary.hint { font-weight: 400; }

/* work in progress: a small block of film that breathes; the words stay paper */
.progress { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.pulse { flex: none; width: 9px; height: 16px; border-radius: 1.5px; background: var(--ash); animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.3; } }

/* ---------- the film strip: one video, one block per part ----------
   Edge print down the left (what kind of video it is), blocks as tall as each part is long
   (its share, s1 to s100, from app/strips.py), the length at the foot. Seconds with nothing
   noted stay dark. A strip is lit (data-lit) when the light is on it. */
.strip {
  --print: 15px;
  position: relative; display: grid; grid-template-columns: var(--print) minmax(0, 1fr); width: 100%; aspect-ratio: 9 / 16;
  padding: 4px 10px 4px 0; background: var(--gate); border-radius: 4px; color: var(--paper); text-align: left;
}
.strip::after { /* one row of sprocket holes, down the right edge */
  content: ""; position: absolute; right: 3px; top: 8px; bottom: 8px; width: 3px; border-radius: 1px; background: var(--sprockets);
}
.strip__edge {
  writing-mode: vertical-rl; transform: rotate(180deg); display: flex; align-items: center; justify-content: center;
  overflow: hidden; white-space: nowrap; font-size: 0.75rem; font-weight: 600; line-height: 1; font-stretch: 80%; letter-spacing: 0.02em; color: var(--ash);
}
.strip__body { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 3px; }
.strip__head, .strip__foot { flex: none; display: flex; align-items: center; justify-content: space-between; height: 15px; padding: 0 3px; font-size: 0.75rem; font-weight: 650; line-height: 1; }
.strip__foot { justify-content: flex-end; }
.strip__cells { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }  /* nothing is ever drawn outside the strip (the halo is the strip's own, not clipped here) */
.cell { position: relative; flex: 1 1 0; min-height: 4px; overflow: hidden; border-radius: 2px; border-bottom: 2px solid var(--gate); background: var(--film); background-clip: padding-box; color: var(--paper); }
.cell.b { background-color: var(--film-b); }
.cell.c { background-color: var(--film-c); }
.gap { flex: 1 1 0; min-height: 0; }
.cell__w, .cell__n { display: none; position: absolute; left: 6px; right: 5px; top: 4px; font-size: 0.75rem; font-weight: 500; line-height: 14px; }
.cell__n { top: 2px; font-weight: 700; }
.strip--script .cell__w { font-weight: 650; }
.strip--mini { display: flex; padding: 2px; border-radius: 2px; }
.strip--mini::after { display: none; }
.strip--mini .cell { min-height: 2px; border-radius: 1px; border-bottom-width: 1px; }
.strip__halo { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; box-shadow: 0 0 0 2px var(--lamp), 0 0 12px 1px var(--lamp-glow); }
.strip__head svg { visibility: hidden; }  /* the tick beside a strip's rank: seen only while a light is on it */
/* a lit strip: one that is always lit says so itself (data-lit); one a switch has lit is inside something marked .is-lit */
.is-lit .strip__halo { opacity: 1; }
.strip[data-lit] .strip__halo { opacity: 1; box-shadow: 0 0 0 2px var(--lamp), 0 0 44px 4px var(--lamp-glow-wide); }
.is-lit .cell, .strip[data-lit] .cell { background-image: var(--lit-a); color: var(--on-lamp); }
.is-lit .cell.b, .strip[data-lit] .cell.b { background-image: var(--lit-b); }
.is-lit .cell.c, .strip[data-lit] .cell.c { background-image: var(--lit-c); }
.is-lit .strip__edge, .strip[data-lit] .strip__edge { color: var(--lamp-ink); }
.is-lit .strip::after, .strip[data-lit]::after { background: var(--sprockets-lit); }
.is-lit .strip__head { background: var(--lamp); color: var(--on-lamp); border-radius: 2px; }
.is-lit .strip__head svg { visibility: visible; }
.is-lit .strip--blank .strip__cells { border-color: var(--lamp); }
/* a dim strip: its frames go dark and their words with them; its rank, its length and the figures under it stay readable */
.is-dim .strip__cells { opacity: 0.42; }
.is-dim .cell__w, .is-dim .cell__n { visibility: hidden; }
.is-dim .strip--blank .strip__cells { opacity: 1; }  /* an empty frame has no film to darken, and its words stay readable */
/* a video nobody could watch: a plain frame that says so */
.strip--blank .strip__cells { align-items: center; justify-content: center; border: 1.5px dashed var(--edge); border-radius: 2px; }
.blank { padding: 0 2px; font-size: 0.75rem; font-weight: 600; line-height: 1.2; font-stretch: 80%; text-align: center; color: var(--ash); }
/* each block's share of the strip */
.s1{flex-grow:1}.s2{flex-grow:2}.s3{flex-grow:3}.s4{flex-grow:4}.s5{flex-grow:5}.s6{flex-grow:6}.s7{flex-grow:7}.s8{flex-grow:8}.s9{flex-grow:9}.s10{flex-grow:10}
.s11{flex-grow:11}.s12{flex-grow:12}.s13{flex-grow:13}.s14{flex-grow:14}.s15{flex-grow:15}.s16{flex-grow:16}.s17{flex-grow:17}.s18{flex-grow:18}.s19{flex-grow:19}.s20{flex-grow:20}
.s21{flex-grow:21}.s22{flex-grow:22}.s23{flex-grow:23}.s24{flex-grow:24}.s25{flex-grow:25}.s26{flex-grow:26}.s27{flex-grow:27}.s28{flex-grow:28}.s29{flex-grow:29}.s30{flex-grow:30}
.s31{flex-grow:31}.s32{flex-grow:32}.s33{flex-grow:33}.s34{flex-grow:34}.s35{flex-grow:35}.s36{flex-grow:36}.s37{flex-grow:37}.s38{flex-grow:38}.s39{flex-grow:39}.s40{flex-grow:40}
.s41{flex-grow:41}.s42{flex-grow:42}.s43{flex-grow:43}.s44{flex-grow:44}.s45{flex-grow:45}.s46{flex-grow:46}.s47{flex-grow:47}.s48{flex-grow:48}.s49{flex-grow:49}.s50{flex-grow:50}
.s51{flex-grow:51}.s52{flex-grow:52}.s53{flex-grow:53}.s54{flex-grow:54}.s55{flex-grow:55}.s56{flex-grow:56}.s57{flex-grow:57}.s58{flex-grow:58}.s59{flex-grow:59}.s60{flex-grow:60}
.s61{flex-grow:61}.s62{flex-grow:62}.s63{flex-grow:63}.s64{flex-grow:64}.s65{flex-grow:65}.s66{flex-grow:66}.s67{flex-grow:67}.s68{flex-grow:68}.s69{flex-grow:69}.s70{flex-grow:70}
.s71{flex-grow:71}.s72{flex-grow:72}.s73{flex-grow:73}.s74{flex-grow:74}.s75{flex-grow:75}.s76{flex-grow:76}.s77{flex-grow:77}.s78{flex-grow:78}.s79{flex-grow:79}.s80{flex-grow:80}
.s81{flex-grow:81}.s82{flex-grow:82}.s83{flex-grow:83}.s84{flex-grow:84}.s85{flex-grow:85}.s86{flex-grow:86}.s87{flex-grow:87}.s88{flex-grow:88}.s89{flex-grow:89}.s90{flex-grow:90}
.s91{flex-grow:91}.s92{flex-grow:92}.s93{flex-grow:93}.s94{flex-grow:94}.s95{flex-grow:95}.s96{flex-grow:96}.s97{flex-grow:97}.s98{flex-grow:98}.s99{flex-grow:99}.s100{flex-grow:100}
/* What a block can carry is worked out where the strip is drawn (strips.fits): so many whole
   lines of its label, or its number only, or nothing. c is for a phone, w for a laptop.
   A script's shot keeps room for one line of its words (strips.FLOOR_PX) at each width where
   every shot can have it (strips.floor): never where that would push blocks out of the strip. */
@media (max-width: 899.98px) {
  .strip--floor-c .cell { min-height: 23px; }
  .c1 > .cell__w, .c2 > .cell__w, .c3 > .cell__w, .c4 > .cell__w, .c5 > .cell__w, .c6 > .cell__w, .c7 > .cell__w, .c8 > .cell__w { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
  .c1 > .cell__w { -webkit-line-clamp: 1; line-clamp: 1; } .c2 > .cell__w { -webkit-line-clamp: 2; line-clamp: 2; }
  .c3 > .cell__w { -webkit-line-clamp: 3; line-clamp: 3; } .c4 > .cell__w { -webkit-line-clamp: 4; line-clamp: 4; }
  .c5 > .cell__w { -webkit-line-clamp: 5; line-clamp: 5; } .c6 > .cell__w { -webkit-line-clamp: 6; line-clamp: 6; }
  .c7 > .cell__w { -webkit-line-clamp: 7; line-clamp: 7; } .c8 > .cell__w { -webkit-line-clamp: 8; line-clamp: 8; }
  .cn > .cell__n { display: block; }
}
@media (min-width: 900px) {
  .strip--floor-w .cell { min-height: 23px; }
  .w1 > .cell__w, .w2 > .cell__w, .w3 > .cell__w, .w4 > .cell__w, .w5 > .cell__w, .w6 > .cell__w, .w7 > .cell__w, .w8 > .cell__w { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
  .w1 > .cell__w { -webkit-line-clamp: 1; line-clamp: 1; } .w2 > .cell__w { -webkit-line-clamp: 2; line-clamp: 2; }
  .w3 > .cell__w { -webkit-line-clamp: 3; line-clamp: 3; } .w4 > .cell__w { -webkit-line-clamp: 4; line-clamp: 4; }
  .w5 > .cell__w { -webkit-line-clamp: 5; line-clamp: 5; } .w6 > .cell__w { -webkit-line-clamp: 6; line-clamp: 6; }
  .w7 > .cell__w { -webkit-line-clamp: 7; line-clamp: 7; } .w8 > .cell__w { -webkit-line-clamp: 8; line-clamp: 8; }
  .wn > .cell__n { display: block; }
}

/* ---------- home: post this next, the rest of the week, the last trend search ---------- */
.pagehead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; padding: 0 0 20px; }
.pagehead__h { font-size: 39px; flex-basis: 100%; }
.home > .notice, .home > .card { margin-bottom: 20px; }

/* the band: the one post to make next */
.next { display: grid; grid-template-columns: 124px minmax(0, 1fr); column-gap: 18px; grid-template-areas: "strip title" "src src" "go go" "need need" "why why"; }
.next--bare { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "go" "need" "why"; }
.next__strip { grid-area: strip; }
.next__title { grid-area: title; align-self: center; }
.next__h { font-size: 31px; line-height: 1.04; margin-top: 8px; }
.next__h a { text-decoration: none; }
.next__h a:hover { text-decoration: underline; text-decoration-color: var(--line); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.useby { color: var(--paper); font-weight: 650; }
/* what must not be missed: a use-by date, a low wallet. Here it is said in paper, as before; a theme may fill it (the fill spreads round the words, so nothing moves) */
.flag { color: var(--flag-ink); background: var(--flag-fill); box-shadow: 0 0 0 var(--flag-spread) var(--flag-fill); border-radius: 2px; }
.badge.flag { border-color: var(--flag-edge); box-shadow: none; }
/* a row of choices where one is on: the one that is on is filled, and says so (aria-pressed) */
.pick { display: flex; flex-wrap: wrap; gap: 8px; }
.pick .button { flex: 1 1 0; min-width: 88px; }
.pick .button[aria-pressed="true"] { color: var(--roast); background: var(--paper); border-color: var(--paper); font-weight: 700; }
.next__src { grid-area: src; display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; margin-top: 8px; }
.next__go { grid-area: go; padding-top: 14px; }
.next__go form { display: contents; }
.next__go .button.lamp { width: 100%; min-height: 54px; margin: 16px 0 10px; font-size: 1.0625rem; }
.ready { display: grid; grid-template-columns: 30px minmax(0, 1fr) 10px; align-items: center; column-gap: 14px; min-height: 64px; padding: 8px 14px 8px 12px; background: var(--walnut); border-radius: 4px; text-decoration: none; }
.ready:hover { box-shadow: inset 0 0 0 1px var(--line); }
.ready b { display: block; font-weight: 650; line-height: 1.3; }
.ready .meta { display: block; }
.next__need { grid-area: need; padding-top: 24px; }
.mini-h { font-family: var(--font-text); font-stretch: 100%; font-size: 1rem; font-weight: 650; letter-spacing: 0; line-height: 1.4; margin-bottom: 6px; }
.needs { display: grid; gap: 7px; list-style: none; margin: 0; padding: 0; }
.needs li { position: relative; padding-left: 18px; line-height: 1.45; }
.needs li::before { content: ""; position: absolute; left: 1px; top: 0.68em; width: 8px; height: 1.5px; background: var(--ash); }
.next__need details { border-top: 1px solid var(--rule); }
.next__need details:first-of-type { margin-top: 16px; }
.next__need details > *:not(summary) { padding: 0 0 14px 19px; }
.next__need details p + p { margin-top: -6px; }
.next__why { grid-area: why; padding-top: 14px; border-top: 1px solid var(--rule); }
.next__why .thumbs { margin-top: 12px; }

/* the rest of the week, with the rail beside it on a laptop */
.week { margin-top: 26px; }
.sec-h { font-size: 25px; padding: 22px 0 12px; }
.rest .angles { margin: 0; }
.rest .angle:last-child { border-bottom: 1px solid var(--rule); }
.rest__fresh { padding: 8px 0 0; }
.rest__fresh .link { font-size: 0.9375rem; }
.rest__more { padding: 18px 0 0; }
.first { display: grid; gap: 14px; padding: 20px; margin: 4px 0 8px; background: var(--walnut); border-radius: var(--radius); }
.first .button { width: 100%; }
.angles + .first, .rest__fresh + .first { margin-top: 24px; }

.rail { padding: 0 0 8px; }
.rail__blk { border-top: 1px solid var(--rule); padding: 0 0 20px; }
.rest + .rail .rail__blk:first-child, .rail__blk:first-child { border-top: 0; }
.rail__h { font-size: 20px; padding: 22px 0 10px; }
.rail__ask { font-size: 1.125rem; line-height: 1.35; }
.mini { display: flex; gap: 5px; margin: 14px 0 8px; max-width: 330px; text-decoration: none; }
.mini > span { flex: 1; aspect-ratio: 9 / 16; display: flex; }
.mini:hover .strip { outline: 1px solid var(--line-hover); outline-offset: 1px; }
.rail__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0 14px; }
.rail .lines { font-size: 0.9375rem; }

/* ---------- the trend finder: the Trends tab, a search's header, its plan card ---------- */
.finder__cols { display: grid; gap: 30px; }
.finder__cols > * { min-width: 0; }
.finder__list .sec-h { padding-top: 0; }
.asks { list-style: none; margin: 0; padding: 0; }
.asks li { border-top: 1px solid var(--rule); }
.asks li:last-child { border-bottom: 1px solid var(--rule); }
.ask { display: grid; grid-template-columns: 24px minmax(0, 1fr) 11px; align-items: center; column-gap: 14px; min-height: 72px; padding: 13px 2px 14px; text-decoration: none; }
.ask:hover .ask__q { text-decoration: underline; text-decoration-color: var(--line); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.ask__frame { display: grid; place-items: center; width: 24px; height: 43px; border: 1.5px dashed var(--edge); border-radius: 3px; }  /* an empty frame of film until the search has results */
.ask__frame--film { border: 0; background: var(--film); box-shadow: 0 0 0 2px var(--gate); }
.ask__say { display: grid; gap: 3px; }
.ask__q { font-size: 20px; line-height: 1.15; overflow-wrap: anywhere; }
.ask > svg { color: var(--ash); }

.search > .notice, .search > .card { margin-bottom: 16px; }
.tr__head { display: grid; gap: 8px; padding: 2px 0 20px; }
.plan { display: grid; gap: 22px; }
.plan > * { min-width: 0; }
.plan__h { font-size: 20px; }
.plan__ask, .plan__go { padding-top: 20px; border-top: 1px solid var(--rule); }
.plan__go { display: grid; gap: 12px; }
.plan__pair { display: grid; gap: 10px; }

/* ---------- a finished search: the contact sheet, what the videos have in common, then each video ----------
   .tr holds all three. The sheet is the top videos as strips of film, five across. */
.tr__sheet { background: var(--well); border-radius: var(--radius); margin: 0 -8px; padding: 12px 8px 16px; scroll-margin-top: calc(var(--top) + 12px); }
.sheet__cap { padding: 0 2px 16px; font-size: 0.84375rem; line-height: 1.45; color: var(--ash); }
.sheet__cap b { display: block; font-size: 0.9375rem; font-weight: 650; color: var(--paper); }
.sheet__cap > span { display: block; }
.sheet { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 96px)); justify-content: center; gap: 18px clamp(8px, 2.6vw, 30px); }
.shot { display: block; width: 100%; text-decoration: none; }
.shot:hover .strip { outline: 1px solid var(--line-hover); outline-offset: 1px; }
.shot .strip { --print: 13px; padding: 3px 3px 3px 0; border-radius: 3px; }
.shot .strip::after { display: none; }
.shot .strip__body { gap: 2px; }
/* a video's box (thumbs.js): its real thumbnail at 9:16, loaded from the platform itself, with the strip of its beats behind it */
.vbox { position: relative; display: grid; gap: 3px; }
.vbox__face { position: relative; }
.vbox__thumb { aspect-ratio: 9 / 16; overflow: hidden; background: var(--gate); border-radius: 3px; }
.vbox__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; font-size: 0.6875rem; line-height: 1.3; color: var(--ash); }
.vbox__n { position: absolute; left: 3px; top: 3px; min-width: 18px; padding: 2px 4px; font-size: 0.75rem; font-weight: 700; line-height: 1.1; text-align: center; color: var(--paper); background: var(--gate); border-radius: 2px; }
.vbox__tick { position: absolute; right: 3px; top: 3px; display: none; place-items: center; width: 18px; height: 18px; color: var(--on-lamp); background: var(--lamp); border-radius: 50%; }
.vbox__tick svg { visibility: visible; }
.vbox__play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 44px; height: 44px; margin: -22px 0 0 -22px; }
.vbox__play svg { box-sizing: content-box; width: 12px; height: 12px; padding: 8px 7px 8px 9px; color: var(--roast); background: var(--paper); border-radius: 50%; }
.vbox__note, .vbox__flip { font-size: 0.6875rem; line-height: 1.25; font-stretch: 85%; color: var(--ash); }
.vbox__flip { appearance: none; min-height: 30px; padding: 4px 0; text-align: left; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; font-family: inherit; font-weight: 500; background: none; border: 0; }
.vbox__flip:hover { color: var(--paper); }
/* a thumbnail grown into its player, where it stands (thumbs.js): the cell takes the room the player needs and the others move round it */
.vbox__player { position: absolute; inset: 0; width: 100%; height: 100%; background: var(--gate); border: 0; }
.vbox__close { appearance: none; justify-self: start; min-height: 44px; padding: 8px 16px; cursor: pointer; font: inherit; font-size: 0.875rem; font-weight: 600; color: var(--paper); background: transparent; border: 1.5px solid var(--line); border-radius: var(--radius-small); }
.vbox.is-playing .vbox__play, .vbox.is-playing .vbox__n, .vbox.is-playing .vbox__flip { display: none; }
.sheet:has(> li.is-playing) { grid-auto-flow: row dense; }
.sheet > li.is-playing { grid-column: 1 / -1; justify-self: center; width: min(100%, 325px); }
/* lit, on a thumbnail: an orange frame and a tick; the rest are dimmed */
.is-lit .vbox__thumb { box-shadow: 0 0 0 3px var(--lamp); }
.is-lit .vbox__tick { display: grid; }
.is-dim .vbox__thumb img { opacity: 0.38; }
.shot--box { display: grid; }
.shot--box .shot__strip, .shot--box .shot__go { display: block; text-decoration: none; }
.shot--box a.shot__h { text-decoration: none; }
.shot--box a.shot__h:hover { text-decoration: underline; }
.sheet__all { display: inline-block; min-height: 36px; margin-top: 2px; font-size: 0.84375rem; }
.vid__strip .vbox__flip { min-height: 30px; }
.vbox__ico { display: none; }  /* the button's small drawing belongs to the layouts that make it a pill */
/* the first of the top, on its own results: its box carries the dark ring and the "#1 pick" label its mark on the chart carries */
.shot--box { position: relative; }
.shot--pick .vbox__face { outline: 2.5px solid var(--paper); outline-offset: 2px; border-radius: 3px; }
.shot--pick .vbox__n { visibility: hidden; }
.shot__pick { position: absolute; z-index: 2; left: 3px; top: 3px; padding: 2px 5px; font-size: 0.6875rem; font-weight: 700; line-height: 1.1; white-space: nowrap; color: var(--roast); background: var(--paper); border-radius: 2px; pointer-events: none; }
/* a mark on the chart leads to its video's card: the card is ringed for a moment as it is arrived at */
@keyframes vid-found { 0%, 55% { outline-color: var(--paper); } 100% { outline-color: transparent; } }
.vid:target { outline: 2.5px solid transparent; outline-offset: 6px; border-radius: var(--radius-small); animation: vid-found 1.8s ease-out 1; }
/* a card whose own thumbnail has grown into its player: the player has the card's width, and the figures go under it */
.vid.is-playing .vid__strip { grid-column: 1 / -1; justify-self: center; width: min(100%, 325px); margin-bottom: 12px; }
.vid.is-playing .vid__nums { grid-column: 1 / -1; }
.shot__x { display: block; margin-top: 6px; font-size: 0.75rem; line-height: 1.25; font-stretch: 85%; color: var(--ash); }
.shot__x b { display: block; font-size: 16px; line-height: 1.1; color: var(--paper); }
/* seven figures or more ("2,282,489 views, usually about 78") are wider than the column under a strip on a phone: set smaller, the number is never broken */
.shot__x b.long { font-size: clamp(11px, 3.4vw, 16px); }
.shot__h { display: block; margin-top: 2px; font-size: 0.75rem; line-height: 1.3; font-stretch: 85%; color: var(--ash); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* the count line: how many are lit, ten small lights, and Clear. On a phone it stays in view down the whole list. */
.tr__rail { display: contents; }
.tr__status {
  position: sticky; top: var(--top); z-index: 20; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px;
  margin: 0 calc(var(--gut) * -1); padding: 5px var(--gut) 9px; background: var(--roast); border-bottom: 1px solid var(--rule);
}
.status__go { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 44px; text-decoration: none; }
.status__n { font-size: 22px; white-space: nowrap; }
.status__clear {
  appearance: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; cursor: pointer;
  font: inherit; font-size: 0.9375rem; font-weight: 600; color: var(--paper); background: transparent; border: 1px solid var(--line); border-radius: var(--radius-small);
}
.status__clear:hover { border-color: var(--paper); }
.status__say { grid-column: 1 / -1; min-height: 1.4em; font-size: 0.84375rem; line-height: 1.4; color: var(--ash); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the narrowest phones: the count and Clear still share a line, and a six-figure view count still fits under its strip */
@media (max-width: 359.98px) { .status__go { gap: 8px; } .status__n { font-size: 19px; } .status__clear { padding: 0 10px; } .shot__x b { font-size: 13px; } }
.pips { display: flex; align-items: flex-end; gap: 2px; height: 20px; }
.pip { display: block; width: 9px; height: 16px; border-radius: 1.5px; background: var(--film); }
.pip.is-lit { background: var(--lamp); transform: translateY(-4px); }
.pip.is-dim { background: var(--film-b); }

/* what they have in common. As the page arrives, each claim is a line of text. lit.js makes the
   ones that name their ranks into switches (buttons), and only a button is drawn as one. */
.tr__share { padding: 4px 0 8px; }
.share__h { font-size: 22px; padding: 16px 0 10px; }
.claims { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.claims__line { display: grid; gap: 4px; }
.claim { font-size: 0.9375rem; line-height: 1.4; }
p.claim .claim__n { font: inherit; font-weight: 650; letter-spacing: 0; }
p.claim .claim__n--lit { display: none; }  /* a count of what a switch would light: nothing to say until it is one */
.claim--plain { padding: 5px 0 5px 14px; color: var(--ash); }
.claim--sub { margin-left: 24px; }
button.claim {
  appearance: none; position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr) 46px; align-items: center; column-gap: 10px;
  width: 100%; min-height: 48px; padding: 7px 10px 8px 14px; cursor: pointer;
  font: inherit; font-size: 0.9375rem; line-height: 1.3; text-align: left; color: var(--paper); background: var(--walnut); border: 0; border-radius: var(--radius-small);
}
button.claim--sub { width: auto; }
button.claim:hover { box-shadow: inset 0 0 0 1px var(--line); }
button.claim .claim__n { font-size: 31px; line-height: 1; }
button.claim::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: 4px 0 0 4px; background: var(--lamp); opacity: 0; }
button.claim[aria-pressed="true"]::before { opacity: 1; }
.facets__h { font-family: var(--font-text); font-stretch: 100%; font-size: 0.9375rem; font-weight: 650; letter-spacing: 0; line-height: 1.4; margin-top: 20px; }
.facets { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.facet { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9375rem; }
.facet b { font-weight: 650; }
span.facet { margin-right: 12px; color: var(--ash); }
button.facet {
  appearance: none; min-height: 44px; padding: 0 12px 0 10px; cursor: pointer;
  font: inherit; font-size: 0.9375rem; color: var(--paper); background: transparent; border: 1px solid var(--edge); border-radius: var(--radius-small);
}
button.facet:hover { border-color: var(--paper); }
button.facet[aria-pressed="true"] { border-color: var(--lamp); box-shadow: inset 0 0 0 1px var(--lamp); }
/* the end of a switch: an empty ring, filled with a tick (and the word On) while it is on. Never colour alone. */
.sw { display: none; }
button > .sw {
  justify-self: end; flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 22px; height: 22px;
  border: 1.5px solid var(--ash); border-radius: 11px; color: var(--on-lamp); font-size: 0.75rem; font-weight: 700; line-height: 1;
}
.sw svg, .sw b { display: none; }
button.facet > .sw { min-width: 16px; width: 16px; height: 16px; border-radius: 3px; }
[aria-pressed="true"] > .sw { background: var(--lamp); border-color: var(--lamp); }
[aria-pressed="true"] > .sw svg { display: block; }
button.claim[aria-pressed="true"] > .sw { padding: 0 7px 0 5px; }
button.claim[aria-pressed="true"] > .sw b { display: block; }
/* the lamp as words, in the two places it may be: the count while something is lit, and the number on the switch that is on */
.light-on .status__n, button.claim[aria-pressed="true"] > .claim__n, button.facet[aria-pressed="true"] > b { color: var(--lamp-ink); }

/* each video, in rank order */
.rows__h { font-size: 25px; padding: 30px 0 4px; }
.rows__note { padding-bottom: 14px; }
.vids { list-style: none; margin: 0; padding: 0; }
.vid { display: grid; grid-template-columns: 84px minmax(0, 1fr); column-gap: 16px; padding: 18px 0 14px; border-top: 1px solid var(--rule); scroll-margin-top: calc(var(--top) + 92px); }
.vid > * { min-width: 0; }
.vid__head { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 10px; align-items: start; margin-bottom: 10px; }
.vid__n { min-width: 22px; font-size: 31px; font-weight: 650; line-height: 1.06; color: var(--ash); }
.vid__who { font-family: var(--font-text); font-stretch: 100%; font-size: 1.0625rem; font-weight: 650; letter-spacing: 0; line-height: 1.25; padding-top: 3px; }
/* a lit row's mark. Its space is always kept, so no row changes height when the light changes. */
.vid__mark {
  visibility: hidden; display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 3px 9px 3px 7px;
  font-size: 0.84375rem; font-weight: 700; line-height: 1.4; white-space: nowrap; color: var(--on-lamp); background: var(--lamp); border-radius: 3px;
}
.is-lit .vid__mark { visibility: visible; }
.vid__strip { grid-column: 1; align-self: start; }
.vid__nums { grid-column: 2; align-self: center; display: grid; gap: 8px; }
.vid__x { font-size: 0.9375rem; line-height: 1.3; }
.vid__x b { display: block; font-size: 39px; line-height: 1.04; }
.vid__kind { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 9px; }
.vid__cap, .vid__why, .vid__borrow, .vid__do, .vid__rate, .vid__folds { grid-column: 1 / -1; }
.vid__cap, .vid__why { margin-top: 14px; }
.vid__why { font-size: 0.9375rem; line-height: 1.5; }
.vid__borrow { margin-top: 12px; padding: 12px 14px 13px; background: var(--walnut); border-radius: var(--radius-small); }
.vid__do { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; margin-top: 14px; }
.vid__do .hint { flex-basis: 100%; }
.vid__do .button { width: auto; min-width: 190px; }
.vid__do .button:not(.quiet) { color: var(--paper); background: transparent; border-color: var(--paper); }  /* one on every video: none of them is the screen's one main button */
.vid__do .button:not(.quiet):hover { background: var(--walnut); }
.vid__rate { display: grid; gap: 8px; margin-top: 8px; }
.vid__folds { display: flex; flex-wrap: wrap; gap: 0 26px; margin-top: 4px; }
.vid__folds details[open] { flex: 1 0 100%; }
.beats { list-style: none; margin: 0; padding: 2px 0 12px 19px; display: grid; gap: 8px; }
.beats li { display: grid; grid-template-columns: 76px minmax(0, 1fr); column-gap: 10px; font-size: 0.9375rem; line-height: 1.5; }
.beats .num { font-size: 0.84375rem; line-height: 1.67; color: var(--ash); }
/* a video the switch that is on doesn't cover: its words step back to ash (still 6.8 to 1 or better on every ground here), never fainter */
.vid.is-dim, .vid.is-dim .label, .vid.is-dim .badge, .shot.is-dim .shot__x b { color: var(--ash); }
.tr__foot { display: grid; gap: 10px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--rule); }

/* the only movement on the page: a lit strip lifts a little, one after the other along the sheet */
.shot { transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.2, 1); }
.shot .strip__halo, .shot .strip__cells { transition: opacity 0.3s ease; }
.sheet li:nth-child(2) .shot, .sheet li:nth-child(2) .strip__halo, .sheet li:nth-child(2) .strip__cells { transition-delay: 22ms; }
.sheet li:nth-child(3) .shot, .sheet li:nth-child(3) .strip__halo, .sheet li:nth-child(3) .strip__cells { transition-delay: 44ms; }
.sheet li:nth-child(4) .shot, .sheet li:nth-child(4) .strip__halo, .sheet li:nth-child(4) .strip__cells { transition-delay: 66ms; }
.sheet li:nth-child(5) .shot, .sheet li:nth-child(5) .strip__halo, .sheet li:nth-child(5) .strip__cells { transition-delay: 88ms; }
.sheet li:nth-child(6) .shot, .sheet li:nth-child(6) .strip__halo, .sheet li:nth-child(6) .strip__cells { transition-delay: 110ms; }
.sheet li:nth-child(7) .shot, .sheet li:nth-child(7) .strip__halo, .sheet li:nth-child(7) .strip__cells { transition-delay: 132ms; }
.sheet li:nth-child(8) .shot, .sheet li:nth-child(8) .strip__halo, .sheet li:nth-child(8) .strip__cells { transition-delay: 154ms; }
.sheet li:nth-child(9) .shot, .sheet li:nth-child(9) .strip__halo, .sheet li:nth-child(9) .strip__cells { transition-delay: 176ms; }
.sheet li:nth-child(n+10) .shot, .sheet li:nth-child(n+10) .strip__halo, .sheet li:nth-child(n+10) .strip__cells { transition-delay: 198ms; }
.shot.is-lit { transform: translateY(-3px); }

/* ---------- an angle and the pieces written for it ----------
   The head: the headline at display size and, once the video script is written, the script as
   the owner's own strip of film beside it (lit: it is hers). Under it the page is a reading
   column, with the one thing to do next (open the angle, or make something from it) in a panel
   that sits beside the column on a laptop and stays in view. */
.ang { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "t" "why" "facts" "ready"; }
.ang > * { min-width: 0; }
.ang--film { grid-template-columns: 116px minmax(0, 1fr); column-gap: 18px; grid-template-areas: "t t" "strip facts" "why why" "ready ready"; }  /* on a phone her strip comes straight under the hook, whatever the length of the reasons */
.ang__t { grid-area: t; display: grid; gap: 10px; }
.ang__h { font-size: 31px; line-height: 1.04; }
.ang__why { grid-area: why; display: grid; gap: 12px; margin-top: 16px; line-height: 1.5; }
.ang--film .ang__why { margin-top: 24px; }
.ang__need details { margin-top: 10px; border-top: 1px solid var(--rule); }
.ang__need details > .needs { padding: 0 0 4px 19px; }
.ang__strip { grid-area: strip; display: block; margin-top: 22px; text-decoration: none; }
a.ang__strip:hover .strip { outline: 1px solid var(--line-hover); outline-offset: 2px; }
.ang__facts { grid-area: facts; align-self: center; display: grid; gap: 4px; justify-items: start; margin-top: 22px; }
.ang__facts-h { font-size: 25px; }
.ang__count { font-size: 0.9375rem; color: var(--ash); }
.ang__go { display: grid; gap: 2px; justify-items: start; width: 100%; margin-top: 10px; }
.ang__go .button { min-height: 54px; font-size: 1.0625rem; }
.ang__ready { grid-area: ready; margin-top: 26px; border-top: 1px solid var(--rule); }

/* the one thing to do next: open the full angle, or make something from it */
.ap__main { min-width: 0; }
.ap__rail { margin-top: 26px; }
.open, .makeit { display: grid; gap: 12px; padding: 20px; background: var(--walnut); border-radius: var(--radius); scroll-margin-top: calc(var(--top) + 16px); }
.open > *, .makeit > * { min-width: 0; }
.makeit .rail__h { padding: 0; font-size: 22px; }
.makeit .addons { grid-template-columns: minmax(0, 1fr); }
.ang__jump { justify-self: start; white-space: normal; }  /* on a phone "Make it" is under the full angle: a way straight to it */
.open__what { font-size: 1.0625rem; line-height: 1.5; }
.open .button.lamp { min-height: 54px; font-size: 1.0625rem; }
.open .notice { background: var(--well); }
.ap__note, .ap__rate, .pp__rate { margin-top: 22px; }
.ap__note { max-width: 41.25rem; }
.wait, .closed { max-width: 41.25rem; margin-top: 26px; }
.closed { display: grid; gap: 14px; }

/* a checklist as ticks to press. Nothing is saved: they are hers for this visit. */
.ticks { list-style: none; margin: 0; padding: 0; }
.ticks .tick { gap: 12px; min-height: 44px; padding: 10px 0; font-size: 1rem; line-height: 1.45; cursor: pointer; }
.ticks .tick input { flex: none; margin-top: 1px; cursor: pointer; }
.ticks .tick input:checked + span { color: var(--ash); }
.part > .ticks { margin: -6px 0 -8px; }
.tips { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: tip; }
.tips li { counter-increment: tip; position: relative; padding-left: 26px; line-height: 1.5; }
.tips li::before { content: counter(tip); position: absolute; left: 0; top: 0.1em; font-variant-numeric: var(--numerals); font-size: 0.84375rem; font-weight: 650; line-height: 1.6; color: var(--ash); }
.after { display: grid; margin-top: 26px; }
.after > section { min-width: 0; padding-bottom: 24px; border-top: 1px solid var(--rule); }
.tags { margin-top: 10px; font-size: 0.9375rem; line-height: 1.5; color: var(--ash); overflow-wrap: anywhere; }
.sc__more { max-width: none; margin-top: 0; }

/* the shooting script: one shot per block, with its block of the strip down its side */
.script { border-top: 1px solid var(--rule); scroll-margin-top: calc(var(--top) + 4px); }
.script__cols { display: none; }
.shots { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.sh { position: relative; display: grid; gap: 8px; padding: 16px 0 20px 26px; scroll-margin-top: calc(var(--top) + 8px); }
.sh > * { min-width: 0; }
.sh::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 9px; border-radius: 2px; background: var(--lit-a); }
.sh.b::before { background: var(--lit-b); }
.sh.c::before { background: var(--lit-c); }
.sh::after { content: ""; position: absolute; left: 26px; right: 0; top: -2px; height: 1px; background: var(--rule); }
.sh:first-child::after { display: none; }
.sh__t { display: flex; align-items: baseline; gap: 10px; }
.sh__n { font-size: 25px; }
.sh__s { font-size: 0.84375rem; line-height: 1; color: var(--ash); }
.sh__say { font-size: 1.1875rem; line-height: 1.38; }
.sh__film { line-height: 1.5; }
.sh__lab { margin-right: 0.5em; font-weight: 650; }
.sh__say .sh__lab { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sh__txt .sh__lab, .sh__more .sh__lab { display: block; margin: 0 0 1px; font-size: 0.84375rem; font-weight: 400; color: var(--ash); }  /* over the bar, so words that wrap start from the same edge */
.sh__more { font-size: 0.9375rem; }
/* the words that go on the screen, set as they will sit on the video: a paper bar */
.capbar {
  display: inline; padding: 3px 9px 4px; font-size: 0.9375rem; font-weight: 700; line-height: 1.9; color: var(--roast); background: var(--paper); border-radius: 4px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* a prompt set: the note that keeps it honest, then each prompt as a block to copy by hand */
.honest { margin: 20px 0 22px; padding: 12px 14px 13px; line-height: 1.5; background: var(--walnut); border-radius: var(--radius-small); }
.prs { padding-bottom: 28px; border-top: 1px solid var(--rule); }
.doc > .prs:first-child { border-top: 0; }
.prs__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 30px; }
.pr { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; align-items: start; }
.pr__shape { display: grid; justify-items: center; padding-top: 3px; }
.pr__shape span { display: block; border: 1.5px solid var(--ash); border-radius: 2px; }
.r916 { width: 27px; height: 48px; }
.r11 { width: 38px; height: 38px; }
.r45 { width: 36px; height: 45px; }
.pr__body { display: grid; gap: 8px; }
.pr__body > * { min-width: 0; }
.pr__h { font-family: var(--font-text); font-stretch: 100%; font-size: 1.0625rem; font-weight: 650; letter-spacing: 0; line-height: 1.4; }
.pr__h .meta { margin-left: 6px; }
.pr__use { line-height: 1.5; }
.pr__lab { margin-top: 6px; font-size: 0.84375rem; font-weight: 600; line-height: 1.4; color: var(--ash); }
.pr__more { display: grid; gap: 8px; }
.copy {  /* one press selects the whole block */
  padding: 12px 14px 13px; font-size: 0.9375rem; line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; -webkit-user-select: all; user-select: all;
  background: var(--well); border: 1px solid var(--rule); border-radius: var(--radius-small);
}
.copy--small { color: var(--ash); }
@media (max-width: 899.98px) { .pr .copy, .pr .pr__lab, .pr .pr__more { margin-left: -54px; } }  /* on a phone a block to copy runs the column's full width, under the prompt's shape */

/* ---------- Film along: the prompter over a video script ----------
   A dialog that film.js opens. One shot at a time: what to film, what to say (large enough to
   read from a metre away), the words for the screen, and a clock counting down the shot's own
   seconds. Along the top, a strip of all the shots, each as wide as it is long. The lamp is on
   one thing only: the shot that is on. On a phone it takes the whole screen, with the buttons
   along the bottom; on a laptop the shooting script runs down its left side. Where there is
   little height (a small phone, a phone on its side, a short laptop window) it closes up in
   steps, so what to say is never the part left under the buttons. */
html.film-open { overflow: hidden; }
.fa { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; overflow: hidden; border: 0; background: var(--roast) var(--ground) no-repeat; color: var(--paper); }
.fa::backdrop { background: var(--gate); }
.fa[open] { display: flex; }
.fa__in {
  flex: 1; min-width: 0; width: 100%; max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}
.fa__top { display: flex; align-items: center; gap: 14px; padding: 8px var(--gut) 0; }
.fa__h { margin-right: auto; font-size: 20px; }
.fa__run { font-size: 1.0625rem; color: var(--ash); white-space: nowrap; }
.fa__run b { font-weight: 700; color: var(--paper); }
.fa__close {
  appearance: none; min-height: 48px; padding: 0 16px; cursor: pointer;
  font: inherit; font-size: 0.9375rem; font-weight: 600; color: var(--paper); background: transparent; border: 1px solid var(--line); border-radius: var(--radius-small);
}
.fa__close:hover { border-color: var(--paper); }
.fa__strip { list-style: none; margin: 0; padding: 10px var(--gut) 0; display: flex; gap: 3px; }
.fa__strip > li { flex-basis: 0; min-width: 0; display: flex; container-type: inline-size; }
.fa__strip--few > li { min-width: 34px; }  /* up to eight shots: each block stays wide enough for a finger */
.fa__blk {
  appearance: none; flex: 1; min-width: 0; height: 44px; padding: 0; overflow: hidden; cursor: pointer;
  font: inherit; font-size: 0.9375rem; font-weight: 700; color: var(--paper); background: var(--film); border: 0; border-radius: 3px;
}
.fa__strip > li:nth-child(3n + 2) > .fa__blk { background-color: var(--film-b); }
.fa__strip > li:nth-child(3n) > .fa__blk { background-color: var(--film-c); }
.fa__strip > li > .fa__blk.is-done { color: var(--ash); background: var(--gate); box-shadow: inset 0 0 0 1px var(--rule); }
.fa__strip > li > .fa__blk[aria-current] { color: var(--on-lamp); background: var(--lit-a); box-shadow: 0 0 0 2px var(--lamp), 0 0 14px 1px var(--lamp-glow); }
/* with many shots a short one's block is too thin for its number: it carries none, as on the page's own strip (Back and Next shot still reach it) */
@container (max-width: 17px) { .fa__blk { font-size: 0; } }
.fa__list { display: none; }
.fa__body { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; padding: 16px var(--gut) 14px; }
.fa__body > * { flex: none; }
.fa__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.fa__count { font-size: 25px; }
.fa__status { margin-top: 5px; font-size: 0.9375rem; line-height: 1.35; color: var(--ash); }
.fa__clock { flex: none; display: grid; justify-items: center; min-width: 96px; padding: 6px 10px 8px; text-align: center; border: 2px solid var(--edge); border-radius: var(--radius); }
.fa__digit { font-size: 56px; line-height: 1; }
.fa__unit { font-size: 0.8125rem; font-weight: 600; line-height: 1.3; color: var(--ash); }
/* while the clock runs its box is filled, and says so beside it: never by colour alone */
.fa[data-state="running"] .fa__clock { color: var(--roast); background: var(--paper); border-color: var(--paper); }
.fa[data-state="running"] .fa__unit { color: var(--roast); }
.fa__lab { display: block; margin-bottom: 3px; font-size: 0.84375rem; font-weight: 650; line-height: 1.4; color: var(--ash); }
.fa__film { font-size: clamp(18px, 5vw, 22px); line-height: 1.35; }
.fa__say { padding-top: 12px; border-top: 1px solid var(--rule); }
.fa__words { display: block; font-size: clamp(32px, 9.6vw, 44px); line-height: 1.04; text-wrap: balance; }
.fa__words.is-mid { font-size: clamp(28px, 8.4vw, 39px); }
.fa__words.is-long { font-size: clamp(25px, 7.2vw, 34px); }
.fa__words.is-xl { font-size: clamp(22px, 6.2vw, 29px); }  /* a line too long to say in one shot still shares the screen with the buttons */
.fa__bar { height: 6px; overflow: hidden; background: var(--rule); border-radius: 3px; }
.fa__bar span { display: block; height: 100%; background: var(--paper); transform-origin: 0 50%; }
.fa[data-state="done"] .fa__bar span { transform: scaleX(0); }
.fa__txt { margin-top: auto; padding-top: 6px; }
.fa__txt .capbar { font-size: 1.125rem; }
.fa__ctl { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; padding: 10px var(--gut) 12px; background: var(--walnut); border-top: 1px solid var(--rule); }
.fa__ctl .button { width: auto; min-height: 56px; padding: 0 16px; }
.fa__ctl .button:disabled, .fa__ctl .button:disabled:hover { cursor: default; color: var(--ash); background: transparent; border-color: var(--rule); }
.fa__keys { display: none; }
/* the only movement: the bar empties, and a new shot's words slide in */
@keyframes fa-in { from { opacity: 0; transform: translateX(16px); } }
.fa__body.is-in > .fa__film, .fa__body.is-in > .fa__say, .fa__body.is-in > .fa__txt { animation: fa-in 0.18s ease-out; }
/* a short phone: everything a size down, so the words and the buttons still share the screen */
@media (max-height: 700px) and (max-width: 899.98px) {
  .fa__digit { font-size: 40px; }
  .fa__clock { min-width: 80px; }
  .fa__film { font-size: 1.0625rem; }
  .fa__words { font-size: clamp(25px, 8vw, 30px); }
  .fa__words.is-mid { font-size: clamp(23px, 7.2vw, 27px); }
  .fa__words.is-long { font-size: clamp(20px, 6.4vw, 24px); }
  .fa__words.is-xl { font-size: clamp(18px, 5.6vw, 21px); }
  .fa__ctl .button { min-height: 48px; }
}
/* shorter still (a small phone with the browser's own bars showing): the gaps close and the quiet labels run in, so what to say is in view at once */
@media (max-height: 600px) and (max-width: 899.98px) {
  .fa__top { padding-top: 4px; }
  .fa__strip { padding-top: 6px; }
  .fa__body { gap: 10px; padding-top: 12px; padding-bottom: 10px; }
  .fa__count { font-size: 22px; }
  .fa__status { margin-top: 2px; }
  .fa__clock { padding: 4px 8px 5px; }
  .fa__film .fa__lab, .fa__txt .fa__lab { display: inline; margin: 0 8px 0 0; }
  .fa__say { padding-top: 10px; }
  .fa__txt { padding-top: 0; }
  .fa__ctl { padding-top: 8px; padding-bottom: 8px; }
}

/* ---------- theirs and yours, side by side: an angle made from a trend beside the video it was made from ----------
   Two sheets (see beside.html). Theirs lies on the sunk ground with its film unlit; yours is the
   raised one, with the light on what is hers: her strip of film and the one button that leads on.
   Each sheet is a list of rows. On a phone yours comes first with theirs under it; with script the
   two links at the top are buttons that show one sheet at a time (data-show). On a laptop the two
   stand side by side and meet at a seam, with the rows that answer each other level: both sheets
   lay their rows on the same six lines. --seam is how much of the width theirs has; beside.js
   moves it when the seam is pulled. The page a "make it mine" angle is waited for on (mine.html)
   is the same two sheets with only their first rows. */
.bs { --seam: 50%; }
.from { margin-right: 8px; }  /* the gap is the mark's, so a link that wraps under it starts at the line's own edge */
.beside { display: inline-block; margin: -13px 0; padding: 13px 0; font-size: 0.84375rem; font-weight: 400; white-space: nowrap; }  /* a small link with a full-size place to press */
.bs__switch { display: flex; gap: 8px; margin-bottom: 14px; }
.bs__switch .button { flex: 1 1 0; width: auto; }
.bs__switch .button[aria-pressed="true"] { color: var(--roast); background: var(--paper); border-color: var(--paper); font-weight: 700; }  /* the side that is showing: filled, and it says so (aria-pressed) */
.bs.is-live .bs__switch {
  position: sticky; top: var(--top); z-index: 20; margin: -8px calc(var(--gut) * -1) 14px; padding: 8px var(--gut);
  background: var(--roast); border-bottom: 1px solid var(--rule);
}
.bs__gone { margin-bottom: 16px; max-width: 47.5rem; }
.bs__sheets { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.bs--alone .bs__sheets { max-width: 47.5rem; }
.bs__sheet { min-width: 0; padding: 0 18px 6px; border-radius: var(--radius); scroll-margin-top: calc(var(--top) + 72px); }
.bs__sheet--yours { background: var(--walnut); }
.bs__sheet--theirs { background: var(--well); }
.bs__row { min-width: 0; padding: 16px 0 18px; border-top: 1px solid var(--rule); }
.bs__row--head { padding-top: 0; border-top: 0; }
.bs__row > * { min-width: 0; }
.bs__tag { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; padding: 14px 0 14px; }
.bs__tag .d { font-size: 22px; }
.bs__top { display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: 16px; align-items: center; }
.bs__strip { display: block; text-decoration: none; }
a.bs__strip:hover .strip { outline: 1px solid var(--line-hover); outline-offset: 2px; }
.strip--blank[data-lit] .strip__cells { border-color: var(--lamp); }  /* an empty frame with the light on it: hers, with nothing shot for it yet */
.bs__id { display: grid; gap: 8px; justify-items: start; }
.bs__id > * { min-width: 0; }
.bs__id .out { margin: -8px 0 -10px; }
.bs__who { font-size: 1.0625rem; font-weight: 650; line-height: 1.25; overflow-wrap: anywhere; }
.bs__h { font-size: 28px; line-height: 1.04; }
.bs__x { font-size: 0.9375rem; line-height: 1.3; }
.bs__x b { display: block; font-size: 34px; line-height: 1.04; }
.bs__lab { margin: 0 0 4px; font-family: var(--font-text); font-stretch: 100%; font-size: 0.84375rem; font-weight: 650; letter-spacing: 0; line-height: 1.4; color: var(--ash); }
.bs__part + .bs__part { margin-top: 16px; }
.bs__row .prose, .bs__row .needs { line-height: 1.5; }
.bs__hook { font-size: 1.25rem; line-height: 1.35; }
.bs__row--more .more { margin-bottom: -10px; }
.bs__row--go { display: grid; gap: 12px; padding-bottom: 14px; }
.bs__row--go form { display: grid; }
.bs__row--go .button.lamp { min-height: 54px; font-size: 1.0625rem; }
.bs__what { line-height: 1.5; }
.bs__seam { display: none; }
.bs__seam.is-settling { transition: transform 0.18s cubic-bezier(0.2, 0.7, 0.2, 1); }  /* the only movement: put back in the middle, the seam glides there */
@media (max-width: 899.98px) {
  .bs[data-show="yours"] .bs__sheet--theirs, .bs[data-show="theirs"] .bs__sheet--yours { display: none; }
}

/* ---------- the live radar: the screen a search shows while it runs, and a finished one at the top of its results ----------
   The original plotting sheet (Danny, 2026-10-07): a pale sheet with its own colours and three faces of its own, the
   same in every theme (tokens.css, the radar section). radar.js draws it from what the server says and nothing else
   (see _radar.html). The five steps are one ruled bar; each video found is a dot; the dots a rule counts out leave
   for that rule's row, whose block is as big as its count; the top are round marks with places of their own on the
   chart (a diamond where the video rides a trend), each a way to its card. The numbers below (--pl and the rest) are
   read by the script: the room the chart keeps round it, a mark's size, the pitch of the dots in a row, and that the
   crowd is dots (--radar-round). */
.radar {
  --pl: 22px; --pr: 22px; --pt: 34px; --pb: 24px; --mw: 28px; --mh: 28px; --tx: 5px; --ty: 5px; --slot-cols: 20; --radar-round: 1;
  --radar-in: var(--radar-crowd); --radar-out: var(--radar-crowd); --radar-seat: var(--radar-grid); --radar-known: var(--radar-green);
  position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 8px;
  margin: 0 calc(var(--gut) * -1); padding: 14px var(--gut) 18px;  /* on a phone the sheet runs from edge to edge */
  font-family: var(--radar-word); font-size: 0.9375rem; line-height: 1.4; color: var(--radar-ink); background: var(--radar-sheet);
}
.radar > * { min-width: 0; }
.radar p, .radar ol, .radar ul, .radar h2, .radar h3 { margin: 0; }
/* numbers: the fixed-width face where a figure stands alone (a rank, a row's count, a step's seconds, a day); the word face,
   with figures of one width, wherever a figure carries a comma or a colon, which the fixed-width face would set a whole cell wide */
.radar .num, .replay .num { font-family: var(--radar-word); font-variant-numeric: tabular-nums; }
.radar__step .num, .radar__row .num, .radar__rows b.num, .radar__terms .num { font-family: var(--radar-num); }
.radar a { color: var(--radar-ink); }
.radar .pulse { background: var(--radar-mark); }
.search__plain { max-width: 45rem; }
.radar__title { font-family: var(--radar-say); font-size: 1.375rem; font-stretch: 100%; font-weight: 500; letter-spacing: 0; line-height: 1.2; color: var(--radar-ink); }
/* the five steps: one ruled bar. A step that is done is filled; the one being worked on is named in bold, with the mark's colour at its edge */
.radar__steps { list-style: none; padding: 0; display: flex; border: 1.5px solid var(--radar-ink); }
.radar__step {
  flex: 1 1 0; min-width: 0; min-height: 44px; display: grid; align-content: center; justify-items: center; gap: 3px; padding: 0 2px; overflow: hidden;
  border-left: 1.5px solid var(--radar-ink); font-size: 0.8125rem; line-height: 1; white-space: nowrap;
}
.radar__step:first-child { border-left: 0; }
.radar__step { position: relative; isolation: isolate; }
.radar__step b { font-weight: 400; }
.radar__step span { min-height: 11px; font-size: 0.6875rem; color: var(--radar-green); }
/* the fill: whole in a step that is done; in the one being worked on, as far as the time gone by (radar.js). It moves
   from the left at the pace the script tells it the time: once a second while a search runs, four times a second played back */
.radar__fill { position: absolute; inset: 0; z-index: -1; background: var(--radar-done); transform: scaleX(0); transform-origin: left center; transition: transform 1s linear; }
.replay .radar__fill { transition-duration: 0.25s; }
[data-radar-playing="short"] .radar__fill { transition-duration: 0.05s; }  /* the short replay tells the time twenty times a second */
.radar__step.is-done, .radar__step.is-done span { color: var(--radar-on-done); }
.radar__step[aria-current] span { color: var(--radar-ink); }
.radar__step[aria-current] b { font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
/* what is happening, and the clock */
.radar__say { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: start; }
.radar__cap { grid-column: 1; display: flex; align-items: baseline; gap: 8px; font-size: 1rem; font-weight: 700; line-height: 1.3; }
.radar__clock { grid-column: 2; grid-row: 1 / span 2; text-align: right; white-space: nowrap; line-height: 1.15; }
.radar__clock b { display: block; font-weight: 700; }
.radar__clock small { display: block; font-size: 0.75rem; line-height: 1.3; color: var(--radar-green); }
.radar__sub { grid-column: 1; margin-top: 2px; min-height: 2.8em; }  /* room for two lines, so the chart stays where it is as the line changes */
.radar__sub.is-lost { font-weight: 700; }
.radar.is-rest .radar__sub { display: none; }
/* the chart: lines are doublings, across is the day posted */
.radar__plot { position: relative; height: 252px; border-bottom: 3px solid var(--radar-ink); }
.radar__hint { position: absolute; left: 20px; right: 20px; top: 50%; transform: translateY(-50%); text-align: center; color: var(--radar-green); }
.radar__axes { position: absolute; inset: 0; opacity: 0; }
.radar__line { position: absolute; left: 0; right: 0; top: 0; height: 0; border-top: 1px solid var(--radar-grid); }
.radar__line i { position: absolute; left: 0; bottom: 1px; padding: 1px 4px 1px 0; font-family: var(--radar-word); font-variant-numeric: tabular-nums; font-size: 0.75rem; font-style: normal; line-height: 1; color: var(--radar-green); background: var(--radar-sheet); white-space: nowrap; }
.radar__line.is-bare i { display: none; }
.radar__day { position: absolute; left: 0; bottom: 4px; font-family: var(--radar-num); font-size: 0.75rem; line-height: 1; color: var(--radar-green); white-space: nowrap; }
.radar__ytitle { position: absolute; right: 0; top: 2px; font-size: 0.75rem; line-height: 1.25; color: var(--radar-green); text-align: right; }
.radar__ytitle span { display: block; }
.radar__xtitle { position: absolute; left: 27%; bottom: 4px; transform: translateX(-50%); font-size: 0.75rem; line-height: 1; color: var(--radar-green); white-space: nowrap; }
/* a finished chart at rest: its three counts in one line, which opens the rows they come from */
.radar__sum {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; width: 100%; min-height: 44px; padding: 8px 0; text-align: left; cursor: pointer;
  font: inherit; color: var(--radar-ink); background: none; border: 0; border-bottom: 1px solid var(--radar-grid); border-radius: 0;
}
.radar__sum b { font-weight: 700; }
.radar__more { position: relative; flex: none; width: 14px; height: 14px; margin-left: auto; }
.radar__more::before, .radar__more::after { content: ""; position: absolute; left: 0; right: 0; top: 6px; border-top: 2px solid var(--radar-ink); }
.radar__more::after { transform: rotate(90deg); }
.radar__sum[aria-expanded="true"] .radar__more::after { display: none; }
/* how many are still in, and the rows of those counted out */
.radar__side { display: grid; gap: 4px; }
.radar__count { display: flex; align-items: baseline; gap: 14px; font-weight: 700; color: var(--radar-green); }
.radar__count b { font-size: 2.125rem; font-weight: 700; line-height: 1; color: var(--radar-ink); }
.radar__scale { font-size: 0.8125rem; color: var(--radar-green); }
.radar__group { opacity: 0; padding-top: 3px; border-top: 1px solid var(--radar-grid); }
.radar__group.is-in { opacity: 1; }
.radar__gh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }  /* on a phone the rule between the groups says it; a laptop has room for the words */
.radar__row { display: grid; grid-template-columns: auto 38px minmax(0, 1fr); align-items: center; column-gap: 10px; min-height: 23px; line-height: 1.2; }
.radar__row.is-waiting { opacity: 0; }
.radar__row b { font-weight: 700; text-align: right; }
.radar__slot { display: block; }
.radar__note { margin-top: 8px; }
.radar.is-rest .radar__side, .radar.is-rest .radar__aside { display: none; }
.radar.is-rest.is-tallied .radar__side { display: grid; }
.radar.is-rest.is-tallied .radar__aside { display: block; }
.radar.is-rest .radar__count { display: none; }  /* the line of three counts says it */
/* what the marks mean */
.radar__key { display: grid; gap: 4px; }
.radar__legend { display: flex; flex-wrap: wrap; gap: 2px 18px; }
.radar__legend > span { display: inline-flex; align-items: center; gap: 8px; }
.radar__glyph { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--radar-mark); }
.radar__glyph--d { border-radius: 1px; transform: rotate(45deg) scale(0.82); }
/* beside the chart on a laptop, behind the counts on a phone: the plan, and the top in rank order */
.radar__aside { padding-top: 10px; border-top: 1.5px solid var(--radar-ink); }
.radar__aside p { margin-bottom: 6px; }
.radar__ah { margin-bottom: 6px; font-family: var(--radar-word); font-size: 1.0625rem; font-stretch: 100%; font-weight: 700; letter-spacing: 0; line-height: 1.3; color: var(--radar-ink); }
.radar__lab { font-size: 0.8125rem; font-weight: 700; color: var(--radar-green); }
.radar__terms { list-style: none; margin-bottom: 6px; padding: 0; }
.radar__terms li { display: grid; grid-template-columns: minmax(0, 150px) auto; column-gap: 12px; line-height: 1.75; }
.radar__terms b { font-weight: 700; }
.radar__rows { list-style: none; margin-top: 6px; padding: 0; }
.radar__rows a { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto 34px; column-gap: 12px; align-items: baseline; min-height: 44px; padding: 10px 0; border-top: 1px solid var(--radar-grid); text-decoration: none; }
.radar__rows a:hover .radar__who { text-decoration: underline; }
.radar__rows a > :last-child { text-align: right; color: var(--radar-green); }
.radar__who { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the dots, and the marks */
.radar__dots { position: absolute; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.radar__marks, .radar__vals { position: absolute; z-index: 3; left: 0; top: 0; width: 0; height: 0; margin: 0; padding: 0; list-style: none; }
.radar__vals { z-index: 2; }
.radar__mark { position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 0; }
.radar__frame {
  position: absolute; left: calc(var(--mw) / -2); top: calc(var(--mh) / -2); width: var(--mw); height: var(--mh); display: grid; place-items: center;
  font-family: var(--radar-num); font-size: 0.8125rem; font-weight: 700; line-height: 1; color: var(--radar-on-mark); text-decoration: none;
}
.radar a.radar__frame { color: var(--radar-on-mark); }
.radar__frame::before, .radar__frame::after { content: ""; position: absolute; inset: 0; border-radius: 50%; }
.radar__frame::before { background: var(--radar-mark); }                                                                  /* the mark: round, or a diamond where the video rides a trend */
.radar__mark.is-trend .radar__frame::before { border-radius: 2px; transform: rotate(45deg) scale(0.82); }
.radar__frame::after { inset: -5px; border: 3px solid var(--radar-hi); box-shadow: 0 0 0 1.5px var(--radar-ink); opacity: 0; }  /* the ring round the one just watched */
.radar[data-radar-live] .radar__mark.is-watched .radar__frame::after, .replay.is-open .radar__mark.is-watched .radar__frame::after { animation: radar-seen 1.6s ease-out 1; }
@keyframes radar-seen { 0%, 60% { opacity: 1; } 100% { opacity: 0; } }
.radar__frame b { position: relative; z-index: 1; }
/* the closing moment: the first of the top is picked out, and a line runs from it to its card (on the results, to the
   first video's box in the sheet under the radar: radar.js lays it over the page and draws it) */
.radar .radar__mark.is-first .radar__frame::after, .replay.is-open .radar__mark.is-first.is-watched .radar__frame::after { inset: -6px; border: 2.5px solid var(--radar-ink); box-shadow: none; opacity: 1; animation: none; }
.radar__pick { align-self: center; justify-self: start; padding: 2px 5px; font-size: 0.6875rem; font-weight: 700; line-height: 1.1; text-decoration: none; white-space: nowrap; color: var(--radar-sheet); background: var(--radar-ink); border-radius: 3px; visibility: hidden; }
.radar__val.is-first .radar__pick { visibility: visible; }
.radar__frame:focus-visible { outline: 2px solid var(--radar-ink); outline-offset: 3px; border-radius: 50%; }
.radar__val { position: absolute; left: 0; top: 0; display: grid; padding: 1px 3px; font-family: var(--radar-word); font-variant-numeric: tabular-nums; font-size: 0.8125rem; line-height: 1.2; white-space: nowrap; background: var(--radar-sheet); opacity: 0; }
.radar__val b { font-weight: 700; }
.radar__val i { font-family: var(--radar-word); font-size: 0.75rem; font-style: normal; color: var(--radar-green); }
.radar__val i:empty { display: none; }
.radar__val em { display: none; font-family: var(--radar-word); font-size: 0.75rem; font-style: normal; color: var(--radar-green); }
.radar__val.is-tight em { display: none; }  /* no room for whose it is beside the number: the number stays, and the name is in the list beside the chart */
/* "Play the search": the sheet at the top of a finished search's results (see `played` in _radar.html). At rest it is
   the finished chart with the button over it. Playing, the button gives way to Skip, which on a phone rides the foot
   of the screen, just above the bar of places, for as long as the sheet is in view: in reach of a thumb. */
.replay {
  margin: 0 calc(var(--gut) * -1) 20px; padding: 14px var(--gut) 0; scroll-margin-top: var(--top);
  font-family: var(--radar-word); font-size: 0.9375rem; line-height: 1.4; color: var(--radar-ink); background: var(--radar-sheet);
}
.replay .radar { margin: 0; padding: 8px 0 16px; background: none; }
.replay__row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.replay__line { display: none; flex: 1 1 11rem; min-width: 0; margin: 0; }  /* on a phone the three counts under the chart say it; a laptop has room for the sentence */
.replay.is-open .replay__row { display: none; }  /* on a phone the playing sheet begins with the steps: the line's counts are in the radar itself */
.replay__play, .replay__skip, .replay__over { font: inherit; cursor: pointer; border-radius: 0; }
.replay__play { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; padding: 10px 14px; font-weight: 700; line-height: 1.1; color: var(--radar-on-mark); background: var(--radar-mark); border: 2px solid var(--radar-mark); }
.replay__play[data-replay-play]::before { content: ""; flex: none; width: 0; height: 0; border-left: 11px solid var(--radar-on-mark); border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.replay__skip { min-height: 46px; padding: 10px 16px; font-weight: 700; line-height: 1.1; color: var(--radar-ink); background: var(--radar-sheet); border: 1.5px solid var(--radar-ink); }
.replay__over { min-height: 44px; padding: 8px 4px; color: var(--radar-ink); background: none; border: 0; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.replay__play:focus-visible, .replay__skip:focus-visible, .replay__over:focus-visible, .radar__sum:focus-visible { outline: 2px solid var(--radar-ink); outline-offset: 2px; }
.replay__stage { display: flex; flex-direction: column; }
.replay__bar {
  order: 2; position: sticky; bottom: calc(57px + env(safe-area-inset-bottom, 0px)); z-index: 5; display: flex; gap: 10px;  /* 57px: the bar of places and its rule */
  margin: 0 calc(var(--gut) * -1); padding: 10px var(--gut); background: var(--radar-sheet); border-top: 1.5px solid var(--radar-ink);
}
.replay:not(.is-open) .replay__bar { display: none; }  /* at rest it holds nothing */
.replay__bar > * { flex: 1 1 auto; }
.replay__bar .replay__back, .replay__bar .replay__over { flex: 0 0 auto; }
.replay__bar .replay__main { flex: 2 1 auto; }
.replay__bar [aria-disabled="true"] { opacity: 0.4; cursor: default; }
/* on a phone the playing chart gives up a little height, so the count under it is in view above the buttons */
@media (max-width: 899.98px) { .replay.is-open .radar__plot { height: clamp(190px, calc(100vh - 560px), 252px); height: clamp(190px, calc(100dvh - 560px), 252px); } }

@media (prefers-reduced-motion: reduce) {
  .pulse { animation: none; }
  .bs__seam.is-settling { transition: none; }
  .radar[data-radar-live] .radar__mark.is-watched .radar__frame::after, .replay.is-open .radar__mark.is-watched .radar__frame::after { animation: none; }
  .radar__fill { transition: none; }  /* a step is done or not done: nothing fills */
  .vid:target { animation: none; outline-color: var(--paper); }
  details > summary::before { transition: none; }
  .shot, .shot .strip__halo, .shot .strip__cells { transition: none; }
  .shot.is-lit, .pip.is-lit { transform: none; }
  .fa__bar { display: none; }
  .fa__body.is-in > .fa__film, .fa__body.is-in > .fa__say, .fa__body.is-in > .fa__txt { animation: none; }
}

/* ---------- a laptop ---------- */
@media (min-width: 900px) {
  h1 { font-size: 39px; }
  h2 { font-size: 25px; }
  main { padding-top: 30px; }
  main.narrow { padding-top: 64px; }
  .places { display: flex; margin-right: auto; }
  .brand { margin-right: 12px; }
  .wallet .hint { display: inline; }
  .bottom { display: none; }
  .actions .button { width: auto; min-width: 280px; }
  .split { grid-template-columns: 1fr 1fr; }
  .addons { grid-template-columns: repeat(3, 1fr); }
  .versus { grid-template-columns: 1fr 1fr; }

  .angle { grid-template-columns: minmax(0, 1fr) auto; column-gap: 32px; min-height: 124px; padding: 22px 0 24px 68px; align-items: start; }
  .angle > .stack, .angle__say { grid-column: 1; }
  .angle__why { display: grid; gap: 8px; align-content: start; grid-column: 1; }
  .rank { top: 22px; width: 44px; height: 78px; font-size: 25px; }
  .angle h3 { font-size: 25px; }
  .angle .do, .angle__say ~ .do { grid-column: 2; grid-row: 1; }
  .angle .do .button { white-space: nowrap; }

  .pagehead { padding: 0 0 24px; }
  .pagehead__h { font-size: 31px; flex-basis: auto; }
  .next { grid-template-columns: 190px minmax(0, 1fr); column-gap: 44px; grid-template-areas: "strip title" "strip go" "strip need" "strip why"; grid-template-rows: auto auto auto 1fr; padding-bottom: 40px; }
  .next--bare { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "go" "need" "why"; }
  .next__title { align-self: start; }
  .next__h { font-size: clamp(40px, 4.8vw, 61px); line-height: 0.98; margin-top: 10px; }
  .next__src { grid-area: strip; align-self: start; display: block; margin-top: calc(190px * 16 / 9 + 14px); }  /* straight under the strip, whose height its width fixes */
  .next__src > span { display: block; }
  .next__src .nb { white-space: normal; overflow-wrap: anywhere; }  /* the column is as narrow as the strip: a long handle wraps inside it */
  .next__go { align-self: start; padding-top: 22px; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 0; }
  .next__go .hook { font-size: 1.25rem; max-width: 30em; flex-basis: 100%; }
  .next__go .button.lamp { width: auto; min-width: 200px; padding: 0 30px; margin: 20px 18px 0 0; }
  .ready { flex: 1 1 280px; max-width: 400px; min-height: 54px; }
  .next__need { max-width: 41.25rem; }
  .next__why { align-self: start; margin-top: 22px; padding-top: 14px; max-width: 41.25rem; font-size: 0.9375rem; line-height: 1.55; }
  .next__need + .next__why { margin-top: 0; }
  .week { display: grid; grid-template-columns: minmax(0, 1fr) 300px; column-gap: 48px; margin-top: 0; border-top: 1px solid var(--rule); }
  .week--alone { grid-template-columns: minmax(0, 560px); }
  .rail { position: sticky; top: var(--top); align-self: start; max-height: calc(100vh - var(--top)); max-height: calc(100dvh - var(--top)); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--film) transparent; }
  .rail .rail__h { padding-top: 24px; }
  .first { margin-top: 28px; padding: 28px 32px 32px; gap: 16px; }
  .first h2 { font-size: 31px; }
  .first p { font-size: 1.125rem; line-height: 1.5; max-width: 34em; }
  .first form { justify-self: start; }
  .first .button { width: auto; min-width: 280px; min-height: 54px; font-size: 1.0625rem; }

  /* the Trends tab: the ask box stays in view beside the owner's searches */
  .finder__cols { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); column-gap: 56px; align-items: start; }
  .finder__cols--alone { grid-template-columns: minmax(0, 520px); }
  .finder__ask { position: sticky; top: calc(var(--top) + 24px); padding: 24px; }
  .search .back a { min-height: 30px; }
  .tr__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 20px; padding: 4px 0 16px; }
  .plan { padding: 26px 28px 28px; }
  .plan__go .button, .plan__ask .button { width: auto; min-width: 280px; justify-self: start; }
  .plan__pair { grid-template-columns: auto auto; justify-content: start; }

  /* a finished search: the sheet with the switches beside it; the switches and the count stay in view down the list */
  .tr { display: grid; grid-template-columns: minmax(0, 1fr) 300px; column-gap: 36px; align-items: start; }
  .tr__sheet { grid-column: 1; margin: 0; padding: 14px 20px 18px; }
  .sheet__cap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; }
  .sheet__cap b, .sheet__cap > span { display: inline; }
  .sheet { grid-template-columns: repeat(5, minmax(0, 124px)); justify-content: space-between; gap: 24px 12px; }
  .shot .strip { --print: 15px; padding: 4px 10px 4px 0; border-radius: 4px; }
  .shot .strip::after { display: block; }
  .shot .strip__body { gap: 3px; }
  .shot.is-lit { transform: translateY(-5px); }
  .shot .strip__halo { box-shadow: 0 0 0 2px var(--lamp), 0 0 22px 2px var(--lamp-glow); }
  .shot__x { margin-top: 8px; font-size: 0.84375rem; font-stretch: 100%; }
  .shot__x b, .shot__x b.long { font-size: 25px; }
  .shot__h { font-size: 0.84375rem; font-stretch: 100%; }
  .tr__rail {
    display: block; grid-column: 2; grid-row: 1 / span 2; position: sticky; top: var(--top);
    max-height: calc(100vh - var(--top)); max-height: calc(100dvh - var(--top)); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--film) transparent;
    margin-left: -6px; padding: 0 6px 20px;
  }
  .tr__status { position: static; margin: 0; padding: 0 0 8px; background: none; }
  .status__n { font-size: 25px; }
  .tr__share { padding: 0; }
  .share__h { padding: 12px 0 8px; }
  .claims { gap: 6px; }
  .facets__h { margin-top: 14px; }
  .facets { gap: 5px; margin-top: 6px; }
  button.facet { min-height: 36px; }
  .tr__rows { grid-column: 1; }
  .rows__h { padding-top: 34px; }
  .vid { grid-template-columns: 128px minmax(0, 1fr); column-gap: 28px; padding: 26px 0 22px; scroll-margin-top: calc(var(--top) + 16px); }
  .vid__head { grid-column: 2; margin-bottom: 6px; }
  .vid__strip { grid-row: 1 / span 8; }
  .vid.is-playing { grid-template-columns: 300px minmax(0, 1fr); }
  .vid.is-playing .vid__strip { grid-column: 1; justify-self: stretch; width: auto; margin-bottom: 0; }
  .vid.is-playing .vid__nums { grid-column: 2; }
  .vid__nums { align-self: start; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: baseline; }
  .vid__nums > * { grid-column: 1 / -1; }
  .vid__x b { display: inline; margin-right: 0.18em; font-size: 49px; }
  .vid__cap, .vid__why, .vid__borrow, .vid__do, .vid__rate, .vid__folds { grid-column: 2; }
  .vid__why { max-width: 52em; }
  .tr__foot { max-width: 760px; }

  /* an angle and its pieces: the strip stands beside the headline, and the reading column lines up under the headline */
  .ang--film { grid-template-columns: 176px minmax(0, 1fr); column-gap: 40px; grid-template-areas: "strip t" "strip why" "strip facts" "ready ready"; grid-template-rows: auto auto 1fr auto; }
  .ang__t { gap: 14px; }
  .ang__h { font-size: clamp(40px, 4.4vw, 56px); line-height: 1; }
  .ang__t .hook { font-size: 1.375rem; max-width: 30em; }
  .ang__why, .ang--film .ang__why { max-width: 41.25rem; margin-top: 16px; }
  .ang__strip { margin-top: 0; }
  .ang__facts { align-self: start; margin-top: 18px; }
  .ang__facts-h { font-size: 20px; }
  .ang__go { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px; }
  .ang__go .button { width: auto; min-width: 200px; padding: 0 30px; }
  .ang--film ~ .doc, .ang--film ~ .wait, .ang--film ~ .ap__note, .ang--film ~ .ap__rate { margin-left: 216px; }
  .open, .makeit { padding: 24px; }
  .closed .button { width: auto; min-width: 280px; justify-self: start; }
  .after { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); column-gap: 56px; margin-top: 34px; }
  .script__cols, .sh { display: grid; grid-template-columns: 84px minmax(0, 1fr) minmax(0, 1.1fr) clamp(180px, 21vw, 250px); column-gap: clamp(20px, 2.6vw, 32px); }
  .script__cols { padding: 0 0 10px 26px; font-size: 0.84375rem; font-weight: 650; color: var(--ash); }
  .sh { align-items: start; row-gap: 8px; }
  .sh__t { grid-column: 1; grid-row: 1; flex-direction: column; gap: 4px; }
  .sh__say { grid-column: 2; grid-row: 1; }
  .sh__film { grid-column: 3; grid-row: 1; font-size: 0.9375rem; line-height: 1.55; }
  .sh__txt { grid-column: 4; grid-row: 1; }
  .sh__more { grid-column: 2 / -1; }
  .sh__film .sh__lab, .sh__txt .sh__lab { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }  /* the heads above the rows say it */

  /* Film along: the shooting script down the left, the prompter beside it */
  .fa__in { grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); column-gap: 48px; grid-template-areas: "top top" "list strip" "list body" "list ctl"; padding: env(safe-area-inset-top, 0px) max(var(--gut), env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(var(--gut), env(safe-area-inset-left, 0px)); }
  .fa__top { grid-area: top; padding: 10px 0; border-bottom: 1px solid var(--rule); }
  .fa__list { grid-area: list; display: block; min-height: 0; overflow-y: auto; list-style: none; margin: 0; padding: 14px 0 20px; scrollbar-width: thin; scrollbar-color: var(--film) transparent; }
  .fa__row {
    appearance: none; position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 10px; align-items: baseline; width: 100%; min-height: 48px; padding: 10px 10px 11px 22px; cursor: pointer;
    font: inherit; font-size: 0.9375rem; line-height: 1.4; text-align: left; color: var(--ash); background: transparent; border: 0; border-top: 1px solid var(--rule); border-radius: 0;
  }
  .fa__list > li:first-child > .fa__row { border-top: 0; }
  .fa__row::before { content: ""; position: absolute; left: 0; top: 3px; bottom: 3px; width: 9px; border-radius: 2px; background: var(--film); }
  .fa__row:hover { color: var(--paper); }
  .fa__row.is-done::before { background: var(--gate); box-shadow: inset 0 0 0 1px var(--rule); }
  .fa__row[aria-current] { color: var(--paper); background: var(--walnut); }
  .fa__row[aria-current]::before { background: var(--lit-a); }
  .fa__row-n { grid-row: 1 / span 2; font-size: 22px; line-height: 1.1; color: var(--paper); }
  .fa__row-s { font-size: 0.84375rem; }
  .fa__row-w { grid-column: 2; }
  .fa__strip { grid-area: strip; padding: 22px 0 0; }
  .fa__blk { height: 48px; }
  .fa__body { grid-area: body; gap: 20px; padding: 26px 0 18px; }
  .fa__count { font-size: 31px; }
  .fa__clock { min-width: 128px; padding: 8px 14px 10px; }
  .fa__digit { font-size: 76px; }
  .fa__unit { font-size: 0.9375rem; }
  .fa__film { max-width: 34em; font-size: 1.25rem; }
  .fa__say { padding-top: 16px; }
  .fa__words { font-size: clamp(40px, 4.7vw, 64px); }
  .fa__words.is-mid { font-size: clamp(36px, 4.1vw, 56px); }
  .fa__words.is-long { font-size: clamp(31px, 3.3vw, 46px); }
  .fa__words.is-xl { font-size: clamp(27px, 2.6vw, 36px); }
  .fa__txt .capbar { font-size: 1.375rem; }
  .fa__ctl { grid-area: ctl; grid-template-columns: auto 220px auto; justify-content: start; padding: 14px 0 22px; background: none; }
  .fa__h { margin-right: 0; font-size: 22px; }
  .fa__keys { display: block; margin-right: auto; padding: 3px 0 0 8px; }  /* where a keyboard is likely: what its keys do */

  .sheet > li.is-playing { grid-column: span 3; grid-row: span 2; }  /* on a laptop the player stands among the others, three boxes wide */

  /* the live radar: the chart with its counts under it, and beside them the plan and the top in rank order */
  .radar {
    --pl: 26px; --pr: 26px; --pt: 36px; --pb: 26px; --mw: 34px; --mh: 34px; --tx: 5px; --ty: 5px; --slot-cols: 24;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 384px); column-gap: 40px; row-gap: 10px; margin: 0; padding: 20px 24px 24px;
  }
  .radar > .radar__title, .radar > .radar__steps { grid-column: 1 / -1; }
  .radar > .radar__say, .radar > .radar__plot, .radar > .radar__sum, .radar > .radar__side, .radar > .radar__key { grid-column: 1; }
  .radar > .radar__aside { grid-column: 2; align-self: start; }
  .radar > .radar__plan { grid-row: 3 / span 2; padding-top: 0; border-top: 0; }  /* beside the caption and the chart */
  .radar[data-radar-live] > .radar__plan { grid-row: 4 / span 2; }                /* a running search has its heading above the steps */
  .radar > .radar__ten { grid-row: 5 / span 4; }
  .radar__title { font-size: 1.75rem; }
  .radar__step { min-height: 46px; display: flex; align-items: center; justify-content: flex-start; gap: 8px; padding: 0 12px; font-size: 0.9375rem; }
  .radar__step span { min-height: 0; font-size: 0.8125rem; }
  .radar__cap { font-size: 1.125rem; }
  .radar__sub { min-height: 1.4em; }
  .radar__plot { height: clamp(300px, calc(100vh - 420px), 440px); }
  .radar__line i, .radar__day, .radar__ytitle, .radar__xtitle { font-size: 0.8125rem; }
  .radar__ytitle span { display: inline; }
  .radar__ytitle span + span::before { content: ": "; }
  .radar__frame { font-size: 0.875rem; }
  .radar__val { grid-auto-flow: column; align-items: baseline; column-gap: 7px; font-size: 0.9375rem; }
  .radar__val i { grid-column: 1 / -1; grid-row: 2; }
  .radar__val em { display: block; }
  /* a laptop has room for the rows at rest too: the count, then the three groups side by side */
  .radar.is-rest .radar__sum { display: none; }
  .radar.is-rest .radar__side, .radar__side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .radar.is-rest .radar__aside { display: block; }
  .radar.is-rest .radar__count { display: flex; }
  .radar__count b { font-size: 3rem; }
  .radar__tally { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 32px; align-items: start; }
  .radar__gh { position: static; width: auto; height: auto; overflow: visible; clip-path: none; font-family: var(--radar-word); font-size: 0.8125rem; font-stretch: 100%; font-weight: 700; letter-spacing: 0; line-height: 1.4; color: var(--radar-green); }
  .radar__note { margin-top: 12px; }

  .replay { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 24px; margin: 0 0 26px; padding: 18px 24px 8px; }
  .replay__row, .replay.is-open .replay__row { display: flex; grid-column: 1; grid-row: 1; min-height: 48px; }
  .replay__line { display: block; }
  .replay__stage { display: contents; }
  .replay__bar, .replay:not(.is-open) .replay__bar { display: flex; order: 0; position: static; grid-column: 2; grid-row: 1; margin: 0; padding: 0; background: none; border: 0; }
  .replay__bar > *, .replay__bar .replay__main { flex: none; min-width: 112px; }
  .replay__bar .replay__over { min-width: 0; }
  .replay .radar { grid-column: 1 / -1; grid-row: 2; padding: 10px 0 18px; }

  /* theirs and yours: two sheets that meet at one seam, the rows that answer each other level */
  .bs__switch { display: none; }
  .bs__sheets { grid-template-columns: minmax(0, var(--seam)) minmax(0, 1fr); gap: 0; }
  .bs__sheet { display: grid; grid-template-rows: subgrid; grid-row: 1 / span 6; align-content: start; padding: 4px 32px 14px; scroll-margin-top: calc(var(--top) + 16px); }
  .bs__sheet--theirs { grid-column: 1; border-radius: var(--radius) 0 0 var(--radius); }
  .bs__sheet--yours { grid-column: 2; border-radius: 0 var(--radius) var(--radius) 0; }
  .bs__row--head { grid-row: 1; } .bs__row--opens { grid-row: 2; } .bs__row--why { grid-row: 3; }
  .bs__row--swap { grid-row: 4; } .bs__row--more { grid-row: 5; } .bs__row--go { grid-row: 6; }
  .bs__row { padding: 20px 0 22px; }
  .bs__row--head { padding: 0 0 24px; }
  .bs__tag { padding: 18px 0 18px; }
  .bs__top { grid-template-columns: 132px minmax(0, 1fr); column-gap: 24px; }
  .bs__h { font-size: clamp(30px, 2.9vw, 40px); line-height: 1.02; }
  .bs__x b { font-size: 39px; }
  .bs__hook { font-size: 1.375rem; }
  .bs__row--go .button.lamp { width: auto; min-width: 260px; padding: 0 30px; justify-self: start; }
  .bs__row--go form { justify-self: start; }
  .bs--alone .bs__sheets { grid-template-columns: minmax(0, 1fr); }
  .bs--alone .bs__sheet { display: block; grid-column: 1; grid-row: auto; border-radius: var(--radius); }
  /* the seam: a line down the join, with a grip that stays in view down the page. Drawn only when beside.js has shown it. */
  .bs__seam { display: block; position: absolute; z-index: 5; top: 0; bottom: 0; left: var(--seam); width: 44px; margin-left: -22px; cursor: col-resize; touch-action: pan-y; }
  .bs__seam::before { content: ""; position: absolute; top: 0; bottom: 0; left: 21px; width: 2px; background: var(--line); }
  .bs__grip {
    position: sticky; top: calc(var(--top) + 88px); display: grid; place-items: center; width: 32px; height: 56px; margin: 88px auto 24px;
    color: var(--paper); background: var(--roast); border: 1.5px solid var(--line); border-radius: 16px;
  }
  .bs__seam:hover .bs__grip, .bs.is-pulling .bs__grip { border-color: var(--paper); }
  .bs__grip:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; border-radius: 16px; }
  .bs.is-pulling { cursor: col-resize; -webkit-user-select: none; user-select: none; }
}
/* a laptop with little height: the words for the screen stand beside what to film, so they stay above the buttons with what to say */
@media (min-width: 900px) and (max-height: 780px) {
  .fa__body { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-content: start; gap: 14px 32px; padding-top: 16px; }
  .fa__head, .fa__say, .fa__bar { grid-column: 1 / -1; }
  .fa__film { grid-column: 1; grid-row: 2; }
  .fa__txt { grid-column: 2; grid-row: 2; margin-top: 0; padding-top: 0; }
  .fa__clock { min-width: 104px; padding: 6px 12px 8px; }
  .fa__digit { font-size: 56px; }
  .fa__strip { padding-top: 14px; }
  .fa__blk { height: 44px; }
}
/* and a laptop with less height still: a size down and the gaps closed, so what to say is never the part under the buttons */
@media (min-width: 900px) and (max-height: 660px) {
  .fa__top { padding: 6px 0; }
  .fa__strip { padding-top: 8px; }
  .fa__body { row-gap: 10px; padding-top: 10px; padding-bottom: 10px; }
  .fa__clock { min-width: 92px; padding: 4px 10px 6px; }
  .fa__digit { font-size: 44px; }
  .fa__words { font-size: clamp(34px, 3.9vw, 50px); }
  .fa__words.is-mid { font-size: clamp(31px, 3.5vw, 44px); }
  .fa__words.is-long { font-size: clamp(28px, 3vw, 38px); }
  .fa__ctl { padding: 10px 0 14px; }
}
/* a phone on its side, however wide: no height to stack in. What to say stands beside the rest, and the list of shots gives way to it. */
@media (max-height: 500px) and (min-width: 560px) {
  .fa__in { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "strip" "body" "ctl"; }
  .fa__list, .fa__keys { display: none; }
  .fa__top { padding-top: 4px; padding-bottom: 4px; }
  .fa__h { margin-right: auto; }
  .fa__strip { padding-top: 6px; }
  .fa__blk { height: 36px; }
  .fa__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; gap: 8px 24px; padding-top: 10px; padding-bottom: 8px; }
  .fa__head { grid-column: 1; grid-row: 1; }
  .fa__film { grid-column: 1; grid-row: 2; max-width: none; font-size: 1.0625rem; }
  .fa__txt { grid-column: 1; grid-row: 3; margin-top: 0; padding-top: 0; }
  .fa__say { grid-column: 2; grid-row: 1 / span 3; padding: 0 0 0 24px; border-top: 0; border-left: 1px solid var(--rule); }
  .fa__bar { grid-column: 1 / -1; grid-row: 4; }
  .fa__film .fa__lab, .fa__txt .fa__lab { display: inline; margin: 0 8px 0 0; }
  .fa__count { font-size: 22px; }
  .fa__status { margin-top: 2px; }
  .fa__clock { min-width: 80px; padding: 4px 8px 5px; }
  .fa__digit { font-size: 40px; }
  .fa__unit { font-size: 0.8125rem; }
  .fa__words { font-size: 34px; }
  .fa__words.is-mid { font-size: 30px; }
  .fa__words.is-long { font-size: 27px; }
  .fa__words.is-xl { font-size: 24px; }
  .fa__txt .capbar { font-size: 1.125rem; }
  .fa__ctl { padding-top: 6px; padding-bottom: 8px; }
  .fa__ctl .button { min-height: 48px; }
}
/* a touch screen at laptop width keeps full-size targets */
@media (min-width: 900px) and (pointer: coarse) { button.facet { min-height: 44px; } }
/* between a phone and a full laptop the sheet's strips are too narrow to carry their beats' words, and the count line has a narrower column */
@media (min-width: 900px) and (max-width: 1179.98px) {
  .sheet .cell > .cell__w, .sheet .cell > .cell__n { display: none; }
  .pip { width: 7px; }
  .shot__x b.long { font-size: 18px; }
  .status__go { gap: 10px; }
  .status__n { font-size: 22px; }
  .status__clear { padding: 0 11px; }
}

/* ---------- a wide laptop: the band in three parts, what you'll need beside it ---------- */
@media (min-width: 1100px) {
  .next { grid-template-columns: 190px minmax(0, 1fr) minmax(280px, 340px); grid-template-areas: "strip title need" "strip go need" "strip why need"; grid-template-rows: auto auto 1fr; }
  .next--bare { grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); grid-template-areas: "title need" "go need" "why need"; }
  .next__need { max-width: none; padding: 2px 0 0 28px; border-left: 1px solid var(--rule); }
  .next__need + .next__why { margin-top: 22px; }
  /* a ranked row in three parts: what it is, why it ranks here, the button */
  .angle { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) auto; }
  .angle > .stack { grid-column: 1 / 3; }
  .angle__why { grid-column: 2; }
  .angle .do, .angle__say ~ .do { grid-column: 3; }
  /* an angle: what to do next stays in view beside the reading column; a script's checklist stands beside its head */
  .ap--ready, .ap--closed { display: grid; grid-template-columns: minmax(0, 1fr) 320px; column-gap: 56px; align-items: start; }
  .ap > .back { grid-column: 1 / -1; }
  .ap__rail { position: sticky; top: calc(var(--top) + 24px); margin-top: 0; }
  .ang__jump { display: none; }  /* "Make it" is in view beside the column */
  .ang--ready { grid-template-columns: 176px minmax(0, 1fr) minmax(280px, 340px); grid-template-areas: "strip t ready" "strip why ready" "strip facts ready"; grid-template-rows: auto auto 1fr; }
  .ang--ready .ang__ready { margin: 0; padding: 0 0 0 28px; border-top: 0; border-left: 1px solid var(--rule); }
  .ang--ready .ang__ready .sec-h { padding-top: 0; }
}
@media (min-width: 1180px) {
  .tr { grid-template-columns: minmax(0, 1fr) 340px; column-gap: 44px; }
}

/* ---------- the first-run guide (templates/_guide.html): one compact card at the top of home, one tip at a time.
   The first tip left is the one showing; "Next" names another, and that one shows in its place. It keeps to a third of
   a phone's screen, so the drop is on the first screen under it. ---------- */
.card.guide { padding: 12px 16px 14px; }
.guide__tips { list-style: none; margin: 0; padding: 0; }
.guide__tip { display: none; gap: 5px; align-content: start; font-size: 0.875rem; line-height: 1.45; scroll-margin-top: calc(var(--top) + 12px); }
.guide__tip:first-child { display: grid; }
.guide__tips:has(.guide__tip:target) > .guide__tip { display: none; }
.guide__tips > .guide__tip:target { display: grid; }
.guide__tip > p { max-width: 46em; margin: 0; }
.guide__h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 0.9375rem; }
.guide__h > .num { font-size: 0.8125rem; color: var(--ash); white-space: nowrap; }
.guide__go { display: flex; gap: 8px; margin-top: 5px; }
.guide__go .button { width: auto; padding: 6px 18px; }
@media (min-width: 900px) {
  .guide__tip { grid-template-columns: minmax(0, 1fr) auto; column-gap: 32px; align-items: center; }
  .guide__tip > p { grid-column: 1; }
  .guide__go { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
}



}

/* ---------- the pilot's one question (templates/_question.html): a hint-sized line and three
   small answers, as quiet as the thumbs they sit next to. The answer already given is paper. ---------- */
.pilot-q { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.pilot-q .button { min-width: 56px; padding: 8px 14px; font-size: 0.875rem; font-weight: 500; color: var(--ash); border: 1px solid var(--edge); }
.pilot-q .button:hover, .pilot-q .button[aria-pressed="true"] { color: var(--paper); border-color: var(--paper); }