/* The "Mix" layout (Danny, 2026-10-08): light, with Film mode's four colours for life and for
   telling things apart. Loaded after app.css, and only when the layout is Mix; its colours are
   tokens-mix.css's (no colour is written here). Home is laid out afresh (the chart of the last
   trend search joined to the idea made from it; then the rest of the drop as cards), the script
   is a block of coloured shots, and Film along fills the panel with each shot's colour. Every
   other screen keeps its layout and simply wears these colours. */

/* the four, in turn */
.mx-t0 { background: var(--mix-blue); }
.mx-t1 { background: var(--mix-pink); }
.mx-t2 { background: var(--mix-yellow); }
.mx-t3 { background: var(--mix-mint); }

/* ---------- home ---------- */
.mx-top { display: grid; gap: 22px; }
.mx-h { font-size: 1.5rem; line-height: 1.15; }
.mx-lab { margin: 0 0 6px; font-family: var(--font-text); font-size: 0.8125rem; font-stretch: 100%; font-weight: 700; letter-spacing: 0; line-height: 1.4; color: var(--paper); }
.mx-left .meta, .mx-left p { margin: 0; }
.mx-left .mx-lab { margin-bottom: 6px; }
/* each side has its title, and a line under it */
.mx-side { display: grid; gap: 3px; margin: 0 0 12px; }
.mx-side .mx-h, .mx-side p { margin: 0; }
.mx-left { display: flex; flex-direction: column; min-width: 0; }
/* the radar's side: a header row (the way to a new search at its right), the two lines that say which search this is,
   the chart, the caption of the video it picks out, and the two ways to that search. On a phone the ways and the
   caption stand over the chart, so the chart is last and its line drops straight into the idea under it. */
.mx-head { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 0 0 6px; }
.mx-head .mx-h { margin: 0; padding-top: 6px; }
.mx-left .mx-lines { display: grid; gap: 2px; margin: 0 0 12px; }
.mx-left .mx-go { order: 1; }
.mx-left .mx-src { order: 2; margin-top: 10px; }

/* the chart of the last trend search: the radar's own sheet, still. On a phone it is the last thing of its side, so
   the line from the mark runs straight down to the idea under it. */
.mx-sheet { position: relative; order: 3; margin-top: 8px; background: var(--radar-sheet); }
.mx-drop { position: absolute; left: 0; top: 100%; display: block; width: 100%; height: 22px; }  /* the gap between the two sides */
.mx-c__from { font-family: var(--radar-word); font-size: 11.5px; font-weight: 700; fill: var(--radar-green); paint-order: stroke; stroke: var(--radar-sheet); stroke-width: 4px; stroke-linejoin: round; }
.mx-c__do { overflow: visible; }
.mx-c__do form { margin: 0; }
.mx-c .mx-c__mine, body:has(.button.lamp) .mx-c .mx-c__mine.button { display: flex; width: 100%; min-height: 44px; margin: 3px 0; padding: 6px 10px; font-size: 0.9375rem; white-space: nowrap; }

/* "Make it mine", wherever it stands: the orange fill, with ink on it */
.button.mine-go, .vid__do .button.mine-go:not(.quiet), body:has(.button.lamp) .button.mine-go:not(.lamp):not(.quiet):not([aria-pressed="true"]) { color: var(--on-lamp); background: var(--lamp); border-color: var(--lamp); }
.button.mine-go:hover, .vid__do .button.mine-go:not(.quiet):hover, body:has(.button.lamp) .button.mine-go:not(.lamp):not(.quiet):not([aria-pressed="true"]):hover { background: var(--lamp); border-color: var(--paper); }

/* "Find what's trending": the radar side's one big button; pressed, the ask box opens under it */
.mx-find details > summary.mx-find__sum { display: grid; gap: 7px; min-height: 0; font-weight: 400; }
.mx-find details > summary.mx-find__sum::before { display: none; }
.mx-find__go { display: flex; align-items: center; justify-content: center; min-height: 58px; padding: 12px 20px; font-size: 1.1875rem; font-weight: 700; line-height: 1.1; text-align: center; text-decoration: none; color: var(--on-lamp); background: var(--lamp); border: 1.5px solid var(--lamp); border-radius: var(--radius-small); }
.mx-find__go:hover, .mx-find__sum:hover .mx-find__go { border-color: var(--paper); }
.mx-find a.mx-find__go { margin-bottom: 7px; }
.mx-find__note { display: block; }
.mx-find__box { margin-top: 12px; padding: 16px; background: var(--walnut); border-radius: var(--radius-small); }
/* the one at the head of the radar's side: on a phone a small outlined "New search"; its ask box opens under the header, over what is there */
.mx-find--head { flex: none; }
.mx-find--head details > summary.mx-find__sum { justify-items: end; }
.mx-find--head .mx-find__go { min-height: 44px; padding: 6px 14px; font-size: 0.9375rem; color: var(--paper); background: transparent; }
.mx-find--head a.mx-find__go { margin-bottom: 0; }
.mx-find--head .mx-find__note, .mx-find__wide { display: none; }
.mx-find--head .mx-find__box { position: absolute; z-index: 6; left: 0; right: 0; top: calc(100% + 6px); margin: 0; background: var(--well); box-shadow: 0 1px 2px var(--round-shade), 0 14px 32px -8px var(--round-shade-wide); }
.mx-find-low { margin-top: 18px; }
.mx-c { display: block; width: 100%; height: auto; overflow: visible; }
.mx-c--wide { display: none; }
.mx-c__col { stroke: var(--radar-grid); stroke-width: 1; opacity: 0.5; }
.mx-c__line { stroke: var(--radar-grid); stroke-width: 1; }
.mx-c__line--foot { stroke: var(--radar-ink); stroke-width: 3; }
.mx-c__t { font-family: var(--radar-word); font-size: 11px; fill: var(--radar-green); }
.mx-c__t--end { text-anchor: end; }
.mx-c__t--mid { text-anchor: middle; }
.mx-c__m { fill: var(--radar-mark); }
.mx-c__join { stroke: var(--radar-ink); stroke-width: 2; }
.mx-c__ring { fill: var(--radar-sheet); stroke: var(--radar-ink); stroke-width: 1.5; }
.mx-c__pick { fill: var(--radar-hi); stroke: var(--radar-ink); stroke-width: 1.5; }
.mx-c__n { font-family: var(--radar-num); font-size: 12px; font-weight: 700; text-anchor: middle; fill: var(--radar-on-hi); }
/* The two ways to the search under the radar: outlined pills, the shape, height and edge of "New search", in ink
   (Danny, 2026-10-09). "See the results" first; then the way to watch it play back, with a small mark that says it
   plays (it opens the results and plays there). On a phone they share the row, and where the two do not fit on one
   line each takes a line of its own, full width, in the same order. */
.mx-left .mx-go { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.mx-see { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 6px 14px; font-size: 0.9375rem; font-weight: 700; line-height: 1.1; text-align: center; text-decoration: none; color: var(--mix-ink); background: transparent; border: 1.5px solid var(--mix-ink); border-radius: var(--radius-small); }
.mx-see:hover { box-shadow: inset 0 0 0 1px var(--mix-ink); }
.mx-watch { gap: 7px; }
.mx-watch::before { content: ""; flex: none; width: 0; height: 0; border-left: 8px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.mx-watch__still { display: none; }
@media (prefers-reduced-motion: reduce) { .mx-watch__moving { display: none; } .mx-watch__still { display: inline; } }

/* The radar's own sheet, over the still chart while the search plays back (radar.js sizes it to the chart's box and
   plot). Small: the dots are the still chart's dots, the clock and the count have the room over the plot, the five
   steps the room under it. At the closing moment the still chart comes back under it: the mark is picked out, its
   line is drawn to the idea, and the label (or "Make it mine") appears. */
.mx-stage { position: absolute; left: 0; top: 0; z-index: 2; width: 100%; height: 100%; transition: opacity 0.3s ease; }
.is-closing > .mx-sheet .mx-stage { opacity: 0; }
[data-replay-home].is-open .mx-c, [data-replay-home].is-open .mx-drop { visibility: hidden; }
[data-replay-home].is-open.is-closing .mx-c, [data-replay-home].is-open.is-closing .mx-drop { visibility: visible; }
.mx-stage .radar { --mw: 10px; --mh: 10px; --home-head: 14px; --home-foot: 22px; position: absolute; inset: 0; display: block; margin: 0; padding: 0; font-size: 0.6875rem; line-height: 1.2; background: none; }
.mx-stage .radar__plot { position: absolute; inset: 0; height: auto; border-bottom: 0; }
.mx-stage .radar__title, .mx-stage .radar__cap, .mx-stage .radar__sub, .mx-stage .radar__key, .mx-stage .radar__sum, .mx-stage .radar__hint, .mx-stage .radar__vals,
.mx-stage .radar__ytitle, .mx-stage .radar__xtitle, .mx-stage .radar__day, .mx-stage .radar__tally, .mx-stage .radar__scale, .mx-stage .radar__clock small,
.mx-stage .radar__frame b, .mx-stage .radar__step span { display: none !important; }
.mx-stage .radar__say { position: absolute; z-index: 4; left: 50%; top: 0; display: block; height: var(--home-head); transform: translateX(-50%); }
.mx-stage .radar__clock { display: flex; align-items: center; height: 100%; }
.mx-stage .radar__clock b { display: block; font-size: 0.6875rem; font-weight: 700; line-height: 1; }
.mx-stage .radar .radar__side { position: absolute; z-index: 4; right: 14px; top: 0; display: flex; align-items: center; height: var(--home-head); }
.mx-stage .radar .radar__count { display: flex; align-items: baseline; gap: 4px; font-size: 0.6875rem; line-height: 1; }
.mx-stage .radar .radar__count b { font-size: 0.6875rem; line-height: 1; }
.mx-stage .radar__steps { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; height: var(--home-foot); border-width: 1px; }
.mx-stage .radar .radar__step { display: grid; min-height: 0; padding: 0 2px; font-size: 0.6875rem; border-left-width: 1px; }
.mx-stage .radar__line i { font-size: 0.6875rem; background: none; }
.mx-stage .radar__xtitle + .radar__line { border-top: 3px solid var(--radar-ink); }
@keyframes mx-pop { from { transform: scale(0.2); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes mx-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes mx-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes mx-down { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.is-closing .mx-c__lit { transform-box: fill-box; transform-origin: center; animation: mx-pop 0.35s 0.15s both cubic-bezier(0.2, 0.8, 0.3, 1.25); }
.is-closing .mx-c__join { stroke-dasharray: 1; animation: mx-draw 0.6s 0.45s both ease-in-out; }
.is-closing .mx-c--tight .mx-c__join { animation-duration: 0.35s; }
.is-closing .mx-drop { animation: mx-down 0.25s 0.8s both linear; }
.is-closing .mx-c__from, .is-closing .mx-c__do { animation: mx-in 0.3s 0.95s both ease; }
/* the short replay's closing moment: the same, in the time it has */
.is-quick.is-closing .mx-c__lit { animation-duration: 0.2s; animation-delay: 0.05s; }
.is-quick.is-closing .mx-c__join { animation-duration: 0.3s; animation-delay: 0.2s; }
.is-quick.is-closing .mx-c--tight .mx-c__join { animation-duration: 0.2s; }
.is-quick.is-closing .mx-drop { animation-duration: 0.12s; animation-delay: 0.4s; }
.is-quick.is-closing .mx-c__from, .is-quick.is-closing .mx-c__do { animation-duration: 0.17s; animation-delay: 0.45s; }
@media (prefers-reduced-motion: reduce) {
  .mx-stage { transition: none; }
  .is-closing .mx-c__lit, .is-closing .mx-c__join, .is-closing .mx-drop, .is-closing .mx-c__from, .is-closing .mx-c__do { animation: none; }
}

/* the idea to make first: on a phone it stands under the chart, and the line from the mark comes down to its edge */
.mx-pick { padding-top: 16px; border-top: 2px solid var(--paper); }
.mx-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 10px; }
.mx-chip { display: inline-block; padding: 2px 8px 3px; font-size: 0.8125rem; font-weight: 700; line-height: 1.4; color: var(--mix-ink); background: var(--mix-mint); border-radius: 3px; }
.mx-chip--by { background: var(--mix-yellow); }
.mx-pick__h { margin: 0 0 10px; font-size: clamp(1.75rem, 7vw, 2.5rem); line-height: 1.05; }
.mx-pick__h a { color: inherit; text-decoration: none; }
.mx-pick__h a:hover { text-decoration: underline; }
.mx-pick .mx-pick__hook { margin: 0 0 14px; font-size: 1.25rem; }
.mx-pick .mx-open { width: 100%; margin-bottom: 16px; }
.mx-pick__more { display: grid; gap: 14px; }
.mx-pick__more p { margin: 0; }
.mx-need { margin: 14px 0 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.mx-need .needs { padding-bottom: 12px; }
.mx-pick .thumbs { margin-top: 12px; }

/* ---------- from the last search: its top four as the results' own boxes, and a tile to all of them; on a phone, one row to swipe ---------- */
.mx-five { margin-top: 30px; padding-top: 18px; border-top: 2px solid var(--paper); }
.mx-five .mx-h { margin: 0 0 14px; }
/* with no next video the tile is the plain way to the results, in the dark of the stack's own button (Danny, 2026-10-09): never an empty grey slot */
.mx-all { display: grid; place-content: center; justify-items: center; gap: 10px; aspect-ratio: 9 / 16; padding: 10px; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none; color: var(--mix-paper); background: var(--mix-ink); border-radius: 3px; }
.mx-all:hover { text-decoration: underline; text-underline-offset: 3px; }
.mx-all svg { width: 18px; height: 18px; }
/* The tile as a peek stack: the next video's thumbnail is the front card, exactly a video tile's size and in line with
   them; the two after it stand behind it, a little smaller and tilted, so they peek out only to the left, into the gap
   before the tile, and nothing of them reaches above, below or to the right of the front card. Under it, a dark button
   to all of them, set as "Show script" is under a video. Each picture is whole and as the platform serves it; one that
   can't be had is a plain card. */
.mx-stack { display: grid; gap: 3px; text-decoration: none; }
.mx-peek { position: relative; display: block; aspect-ratio: 9 / 16; }
.mx-peek__c { position: absolute; inset: 0; overflow: hidden; background: var(--well); border-radius: 3px; box-shadow: 0 0 0 2px var(--roast); }
.mx-peek__c img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mx-peek__c--1 { z-index: 3; }
.mx-peek__c--2 { z-index: 2; transform: translateX(-6px) rotate(-3deg) scale(0.95); }
.mx-peek__c--3 { z-index: 1; transform: translateX(-11px) rotate(-6deg) scale(0.9); }
.mx-stack__go { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; margin-top: 3px; padding: 5px 8px; font-size: 0.875rem; font-weight: 700; line-height: 1.15; color: var(--mix-paper); background: var(--mix-ink); border-radius: 22px; }
.mx-stack__go svg { flex: none; width: 16px; height: 16px; }
.mx-stack:hover .mx-stack__go { text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 1100px) {  /* a wide laptop's gap is wider: the two behind lean a little further into it */
  .mx-peek__c--2 { transform: translateX(-11px) rotate(-3deg) scale(0.95); }
  .mx-peek__c--3 { transform: translateX(-20px) rotate(-6deg) scale(0.9); }
}
.mx-five__row { display: flex; justify-content: flex-start; gap: 12px; margin-right: calc(var(--gut) * -1); padding: 0 var(--gut) 8px 0; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; }
.mx-five__row > li { flex: 0 0 38%; min-width: 0; scroll-snap-align: start; }
.mx-five__row > li.is-playing { flex-basis: min(86%, 325px); }
.mx-five__row > li.mx-five__more--stack { margin-left: 10px; }  /* a phone's gap is narrow: room in it for the two cards behind */

/* ---------- a video's box: "Show script" is a button that can be seen ---------- */
.vbox__flip { display: flex; align-items: center; justify-content: center; gap: 5px; width: 100%; min-height: 44px; margin-top: 3px; padding: 5px 8px; font-size: 0.6875rem; font-stretch: 100%; font-weight: 700; line-height: 1.15; text-align: left; text-decoration: none; color: var(--mix-ink); background: var(--mix-blue); border-radius: 22px; }
.vbox__flip[hidden] { display: none; }
.vbox__flip:hover { color: var(--mix-ink); box-shadow: inset 0 0 0 1.5px var(--mix-ink); }
.vbox__ico { display: block; flex: none; width: 14px; height: 14px; }
.vid__strip .vbox__flip { min-height: 44px; }
/* On a phone a sheet of videos is one row that swipes sideways: about four in view on the results, the next one
   peeking in. The script toggle is a small round button at the thumbnail's top right (its words are for a screen
   reader; the whole 44px corner takes the tap), the play button keeps the middle, and under each thumbnail the figure
   and the name have one clean line each. */
@media (max-width: 899.98px) {
  .tr__sheet .sheet { display: flex; justify-content: flex-start; gap: 8px; margin-right: -8px; padding: 4px 8px 6px 2px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; }
  .tr__sheet .sheet > li { flex: 0 0 calc((100% - 32px) / 4.35); min-width: 0; scroll-snap-align: start; }
  .tr__sheet .sheet > li.is-playing { flex-basis: min(86%, 325px); }
  .sheet .vbox__flip { position: absolute; z-index: 3; right: 0; top: 0; width: 44px; height: 44px; min-height: 0; margin: 0; padding: 0; justify-content: flex-end; align-items: flex-start; background: none; border-radius: 0; }
  .sheet .vbox__flip:hover { box-shadow: none; }
  .sheet .vbox__flip .vbox__ico { box-sizing: content-box; width: 14px; height: 14px; margin: 3px 3px 0 0; padding: 5px; color: var(--mix-ink); background: var(--mix-blue); border-radius: 50%; }
  .sheet .vbox__flip [data-vbox-word] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .sheet .vbox__tick { top: auto; bottom: 3px; }
  .sheet .shot--box { grid-template-columns: minmax(0, 1fr); }  /* a long figure is cut, never a reason for its box to be wider than the others */
  .sheet .shot__x, .sheet .shot__x b, .sheet .shot__x span { display: inline; }
  .sheet .shot__x { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sheet .shot__x b { font-size: 0.875rem; }
}

/* ---------- the Script block: one row a shot, in the four colours in turn ---------- */
.mx-script { display: grid; gap: 10px; margin: 18px 0 6px; scroll-margin-top: calc(var(--top) + 12px); }
.mx-then { scroll-margin-top: var(--top); }
.mx-script__h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0; font-size: 1.375rem; line-height: 1.2; }
.mx-script__h span { font-family: var(--font-text); font-size: 0.875rem; font-stretch: 100%; font-weight: 500; letter-spacing: 0; color: var(--ash); }
.mx-shots { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.mx-shot { border-radius: 4px; color: var(--mix-ink); }
.mx-shot summary { display: grid; grid-template-columns: 24px 38px minmax(0, 1fr) 14px; align-items: center; column-gap: 8px; min-height: 46px; padding: 6px 12px; font-weight: 600; }
.mx-shot summary::before { display: none; }
.mx-shot summary::after { content: "+"; font-size: 1.125rem; font-weight: 700; line-height: 1; text-align: right; }
.mx-shot details[open] > summary::after { content: "–"; }
.mx-shot summary b { font-family: var(--font-display); font-size: 1.375rem; line-height: 1; }
.mx-shot__s { font-size: 0.8125rem; }
.mx-shot__w { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-shot__in { display: grid; gap: 10px; margin: 0; padding: 2px 12px 14px 44px; }
.mx-shot__in dt { font-size: 0.8125rem; font-weight: 700; line-height: 1.4; }
.mx-shot__in dd { margin: 0; }
.mx-shot__in .mx-shot__say { font-family: var(--font-display); font-size: 1.375rem; font-weight: 700; line-height: 1.12; }
.mx-bar { display: inline; padding: 3px 9px 4px; font-weight: 700; line-height: 1.9; color: var(--mix-paper); background: var(--mix-ink); border-radius: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.mx-script .button { width: 100%; }

/* ---------- "Then, in order": the rest of the drop as cards ---------- */
.mx-then { margin-top: 34px; padding-top: 18px; border-top: 2px solid var(--paper); }
.mx-cards { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.mx-card { display: grid; grid-template-columns: 38px minmax(0, 1fr); column-gap: 12px; align-items: start; padding: 14px; border-radius: 8px; color: var(--mix-ink); }
.mx-card__n { display: grid; place-items: center; width: 38px; height: 38px; font-family: var(--font-display); font-size: 1.25rem; line-height: 1; color: var(--on-lamp); background: var(--lamp); border-radius: 6px; }
.mx-card__in { display: grid; gap: 8px; justify-items: start; }
.mx-card .mx-card__chips { margin: 2px 0 -2px; }
.mx-card__h { margin: 2px 0 0; font-size: 1.25rem; line-height: 1.15; }
.mx-card__h a { color: var(--mix-ink); text-decoration: none; }
.mx-card__h a:hover { text-decoration: underline; }
.mx-card p { margin: 0; color: var(--mix-ink); }
.mx-card__why { font-size: 0.9375rem; line-height: 1.45; }
.mx-card .label { color: var(--mix-ink); }
.mx-card .button, body:has(.button.lamp) .mx-card .button:not(.lamp):not(.quiet) { width: auto; min-height: 44px; margin-top: 4px; padding: 8px 18px; color: var(--mix-ink); background: transparent; border-color: var(--mix-ink); }
.mx-foot { display: grid; gap: 22px; margin-top: 34px; }

/* ---------- the opened angle: "You'll need" as a checklist, and "Make it" near the top on a phone ---------- */
.needlist { display: grid; gap: 6px; }
.needlist__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.needlist__head .mini-h { margin: 0; }
.needlist__count { margin: 0; font-size: 0.875rem; font-weight: 700; white-space: nowrap; }
.needlist__items { list-style: none; margin: 0; padding: 0; display: grid; }
.needlist__item { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 10px; align-items: start; min-height: 44px; padding: 10px 0; line-height: 1.45; cursor: pointer; }
/* the box: a square that fills with the lamp's colour, and its tick, when the thing is ready */
.needlist__item input { appearance: none; display: grid; place-content: center; width: 22px; height: 22px; margin: 1px 0 0; cursor: pointer; background: var(--well); border: 1.5px solid var(--line); border-radius: 5px; }
.needlist__item input::after { content: ""; width: 11px; height: 6px; border-left: 2.5px solid var(--on-lamp); border-bottom: 2.5px solid var(--on-lamp); transform: translateY(-1.5px) rotate(-45deg); opacity: 0; }
.needlist__item input:checked { background: var(--lamp); border-color: var(--lamp); }
.needlist__item input:checked::after { opacity: 1; }
.needlist__item input:checked + span { color: var(--ash); }
.needlist__item input:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
.needlist .needlist__save { justify-self: start; width: auto; }
.ang__need.needlist details > .needlist__items { padding: 0 0 4px; }
.ready-chip { display: inline-flex; align-items: center; padding: 4px 10px 5px; font-family: var(--font-text); font-size: 0.8125rem; font-stretch: 100%; font-weight: 700; letter-spacing: 0; line-height: 1.2; white-space: nowrap; color: var(--mix-ink); background: var(--mix-mint); border-radius: 3px; }
.mx-script__go { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 0; }
.makeit--top { margin-top: 8px; }
@media (max-width: 899.98px) { .ap__rail > .makeit { display: none; } }  /* on a phone "Make it" stands under the headline and hook instead */

/* ---------- Film along, after Film mode: each shot fills the panel in its colour ---------- */
.fa { color: var(--mix-ink); background: var(--mix-blue); }
.fa:has(.fa__strip > li:nth-child(4n + 2) > [aria-current]) { background: var(--mix-pink); }
.fa:has(.fa__strip > li:nth-child(4n + 3) > [aria-current]) { background: var(--mix-yellow); }
.fa:has(.fa__strip > li:nth-child(4n + 4) > [aria-current]) { background: var(--mix-mint); }
.fa .fa__keys, .fa .fa__run, .fa .fa__status, .fa .fa__lab, .fa .fa__unit, .fa .fa__count { color: var(--mix-ink); }
.fa .fa__close { color: var(--mix-ink); background: transparent; border: 2px solid var(--mix-ink); border-radius: 0; }
.fa .fa__strip { gap: 0; }
.fa .fa__strip > li > .fa__blk { color: var(--mix-ink); background: var(--mix-blue); border: 1.5px solid var(--mix-ink); border-radius: 0; box-shadow: none; }
.fa .fa__strip > li + li > .fa__blk { border-left-width: 0; }
.fa .fa__strip > li:nth-child(4n + 2) > .fa__blk { background: var(--mix-pink); }
.fa .fa__strip > li:nth-child(4n + 3) > .fa__blk { background: var(--mix-yellow); }
.fa .fa__strip > li:nth-child(4n + 4) > .fa__blk { background: var(--mix-mint); }
.fa .fa__strip > li > .fa__blk.is-done { color: var(--mix-paper); background: var(--mix-ink); box-shadow: none; }
.fa .fa__strip > li > .fa__blk[aria-current] { color: var(--mix-ink); background: var(--mix-paper); box-shadow: inset 0 0 0 1.5px var(--mix-ink); }
.fa .fa__clock, .fa[data-state="running"] .fa__clock { color: var(--mix-ink); background: var(--mix-paper); border: 3px solid var(--mix-ink); border-radius: 0; }
.fa[data-state="running"] .fa__clock { color: var(--mix-paper); background: var(--mix-ink); }
.fa[data-state="running"] .fa__unit { color: var(--mix-paper); }
.fa .fa__film { font-weight: 600; }
.fa .fa__bar { height: 12px; background: transparent; border: 1.5px solid var(--mix-ink); border-radius: 0; }
.fa .fa__bar span { background: var(--mix-ink); }
.fa .fa__say { border-color: var(--mix-ink); }
.fa .fa__txt { margin: auto calc(var(--gut) * -1) 0; padding: 10px var(--gut) 12px; color: var(--mix-paper); background: var(--mix-ink); }
.fa .fa__txt .fa__lab { color: var(--mix-paper); }
.fa .fa__txt .capbar { display: block; padding: 0; font-size: 1.125rem; color: var(--mix-paper); background: none; border-radius: 0; }
/* Back, then the way on ("Filmed it, next shot") as the one filled button; the clock's own button has a row to itself */
.fa .fa__ctl { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "back next" "clock clock"; background: transparent; border-top: 0; }
.fa .fa__ctl [data-fa="back"] { grid-area: back; }
.fa .fa__ctl [data-fa="next"] { grid-area: next; }
.fa .fa__ctl [data-fa="toggle"] { grid-area: clock; min-height: 48px; }
.fa .fa__ctl .button, body:has(.button.lamp) .fa .fa__ctl .button { color: var(--mix-ink); background: transparent; border: 2px solid var(--mix-ink); border-radius: 0; font-weight: 700; }
.fa .fa__ctl [data-fa="next"], body:has(.button.lamp) .fa .fa__ctl [data-fa="next"] { color: var(--mix-paper); background: var(--mix-ink); }
.fa .fa__ctl .button:disabled, .fa .fa__ctl .button:disabled:hover { color: var(--mix-ink); background: transparent; border-color: var(--mix-ink); opacity: 0.4; }
.fa .fa__row { color: var(--mix-ink); }
.fa .fa__row .fa__row-s, .fa .fa__row .fa__row-w { color: var(--mix-ink); }

/* ---------- a laptop ---------- */
@media (min-width: 900px) {
  .mx-top { grid-template-columns: minmax(0, 29fr) minmax(0, 21fr); column-gap: 56px; align-items: start; }  /* the radar's side about 58%, the idea's about 42% */
  .mx-top--alone { grid-template-columns: minmax(0, 34rem); }
  /* the chart's drawing runs on to the idea beside it: the line from the highlighted mark ends at the idea's own edge */
  .mx-sheet { order: 0; margin-top: 0; margin-right: -56px; background: linear-gradient(var(--radar-sheet), var(--radar-sheet)) no-repeat left top / calc(100% * 664 / 720) 100%; }
  .mx-top--alone .mx-sheet { margin-right: 0; }
  .mx-left .mx-go, .mx-left .mx-src { order: 0; }
  .mx-left .mx-src { margin-top: 8px; }
  .mx-find--head .mx-find__go { padding: 8px 18px; font-size: 1rem; color: var(--on-lamp); background: var(--lamp); }
  .mx-find--head .mx-find__wide { display: inline; }
  .mx-find--head .mx-find__narrow { display: none; }
  .mx-find--head .mx-find__note { display: block; max-width: 230px; font-size: 0.75rem; line-height: 1.35; text-align: right; }
  .mx-find--head .mx-find__box { left: auto; width: min(100%, 400px); }
  .mx-find-low { display: none; }
  .mx-see { flex: 0 0 auto; }  /* a laptop has the room: each is as wide as its words */
  .makeit--top { display: none; }  /* a laptop has "Make it" beside the column */
  .mx-c--wide { display: block; }
  .mx-c--tight, .mx-drop { display: none; }
  .mx-find:not(.mx-find--head) details:not([open]) > summary .mx-find__go, .mx-find:not(.mx-find--head) a.mx-find__go { justify-self: start; min-width: 280px; }
  .mx-pick { padding-top: 0; padding-left: 24px; border-top: 0; border-left: 2px solid var(--paper); }
  .mx-five__row { display: grid; grid-template-columns: repeat(5, minmax(0, 176px)); justify-content: space-between; gap: 24px 20px; margin-right: 0; padding: 0; overflow: visible; }
  .mx-five__row > li.is-playing { grid-column: span 2; grid-row: auto; justify-self: center; width: min(100%, 325px); }
  .mx-five__row > li.mx-five__more--stack { margin-left: 0; }  /* a laptop's gap has the room already */
  .mx-stack__go { gap: 7px; padding: 6px 12px; font-size: 0.8125rem; }  /* the size of "Show script", in its row */
  .vbox__flip { gap: 7px; padding: 6px 12px; font-size: 0.8125rem; }
  .vbox__ico { width: 16px; height: 16px; }
  .mx-pick .mx-open { width: auto; min-width: 200px; }
  .mx-script .button { width: auto; min-width: 200px; justify-self: start; }
  .mx-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .mx-card { grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; padding: 18px; }
  .mx-card__n { width: 44px; height: 44px; }
  .mx-foot { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px; align-items: start; }
  .fa .fa__ctl { grid-template-columns: auto minmax(0, 320px) auto; grid-template-areas: "back next clock"; justify-content: start; }
  .fa .fa__txt { margin-left: 0; margin-right: 0; }
}