/* The "Experiment" layout (Danny, 2026-10-08): the Ledger theme's colours, the Mix layout, the
   radar in the theme's own, and the changes below. Loaded after mix.css, and only for this
   layout; no colour is written here (tokens-ledger.css and tokens-experiment.css hold them).
   Film mode's colours appear only inside a script: its shots, the prompter, the box of the pick. */

/* ---------- home: the radar's box about two thirds, the pick's box about one ---------- */
.ex-radar { padding: 14px 14px 16px; border: 2px solid var(--paper); }
.ex-top .mx-sheet { background: none; }
.ex-top .mx-drop { height: 40px; }  /* on a phone the line crosses the radar box's own foot and edge, and the gap, to the pick's box */
.ex-pick .mx-side .meta { color: var(--mix-ink); }
.mx-c--big { display: none; }
/* the pick, as Film mode's box: one colour, an ink edge, its script as the shots down it */
.ex-pick { padding: 16px; color: var(--mix-ink); background: var(--mix-blue); border: 2px solid var(--mix-ink); }
.ex-pick .mx-pick__h { font-size: clamp(1.5rem, 6vw, 1.875rem); }
.ex-pick .mx-pick__hook, .ex-pick p, .ex-pick .label { color: var(--mix-ink); }
.ex-pick .mx-pick__hook { font-size: 1.0625rem; }
.ex-pick .mx-chip { background: var(--mix-paper); box-shadow: inset 0 0 0 1.5px var(--mix-ink); }
.ex-pick .mx-chip--by { background: var(--mix-yellow); }
.ex-card .mx-chip:not(.mx-chip--by) { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ex-ink); }  /* Film mode's colours are for scripts: on a plain card the chip is an outline */
.ex-pick a { color: var(--mix-ink); }
.ex-pick .mx-open, body:has(.button.lamp) .ex-pick.ex-pick .mx-open.button:not(.lamp):not(.quiet) { width: 100%; min-width: 0; color: var(--mix-ink); background: var(--mix-paper); border: 2px solid var(--mix-ink); border-radius: 0; }
.ex-pick .mx-open.lamp { background: var(--lamp); }
.ex-pick .mx-script { margin: 4px 0 14px; }
.ex-pick .mx-script__h span { color: var(--mix-ink); }
.ex-pick .mx-shots { gap: 0; border: 2px solid var(--mix-ink); }
.ex-pick .mx-shot { border-radius: 0; }
.ex-pick .mx-shot + .mx-shot { border-top: 1.5px solid var(--mix-ink); }
.ex-pick .mx-script .button, body:has(.button.lamp) .ex-pick .mx-script .button { width: 100%; min-width: 0; color: var(--mix-paper); background: var(--mix-ink); border: 2px solid var(--mix-ink); border-radius: 0; }
.ex-pick__more { border-top: 1.5px solid var(--mix-ink); }
.ex-pick__more details { border-bottom: 1.5px solid var(--mix-ink); }
.ex-pick__more summary { color: var(--mix-ink); }
.ex-pick__more details > p, .ex-pick__more .needs { margin: 0; padding-bottom: 12px; }
.ex-pick__more .needs li::before { background: var(--mix-ink); }
.ex-pick .thumbs { margin-top: 12px; }
.ex-pick .thumb { color: var(--mix-ink); border-color: var(--mix-ink); }

/* ---------- "Then, in order": the Signal board's cards, and the trend finder beside them ---------- */
.ex-then { display: grid; gap: 18px; margin: 30px calc(var(--gut) * -1) 0; padding: 22px var(--gut) 26px; background: var(--ex-ground); }
.ex-then__main { min-width: 0; }
.ex-then .row { align-items: center; }
.ex-fresh { width: auto; }
.ex-cards { margin-top: 12px; }
.mx-card.ex-card { background: var(--ex-card); border-radius: 12px; }
.ex-card .mx-card__n { border-radius: 8px; }
.ex-card .mx-card__why .label { font-size: 0.8125rem; }
.mx-card.ex-card .button, body:has(.button.lamp) .mx-card.ex-card .button:not(.lamp):not(.quiet) { color: var(--ex-paper); background: var(--ex-ink); border-color: var(--ex-ink); border-radius: 8px; }
/* the trend finder: an ink box, with paper fields and the orange button */
.ex-finder {
  --paper: var(--ex-paper); --ash: var(--ex-dim); --line: var(--ex-line); --rule: var(--ex-rule); --edge: var(--ex-line); --underline: var(--ex-line);
  display: grid; gap: 12px; align-content: start; padding: 18px; color: var(--ex-paper); background: var(--ex-ink); border-radius: 12px;
}
.ex-finder p { margin: 0; }
.ex-finder__h { font-size: 1.125rem; color: var(--ex-paper); }
.ex-finder h3 { font-family: var(--font-text); font-size: 0.8125rem; font-stretch: 100%; font-weight: 700; letter-spacing: 0; color: var(--ex-paper); }
.ex-finder a { color: var(--ex-paper); }
.ex-finder input, .ex-finder select, .ex-finder textarea { --paper: var(--ex-ink); --ash: var(--ex-ink); color: var(--ex-ink); background: var(--ex-field); border-color: var(--ex-field); }
.ex-finder .button:not(.quiet), body:has(.button.lamp) .ex-finder.ex-finder .button.button:not(.lamp):not(.quiet) { color: var(--on-lamp); background: var(--lamp); border-color: var(--lamp); }
.ex-finder__more { display: grid; gap: 6px; padding-top: 12px; border-top: 1px solid var(--ex-rule); font-size: 0.9375rem; }

/* ---------- the trend results: the top in rank order stands at the foot of the page, after the videos ---------- */
.ex-ten { margin-top: 34px; font-family: var(--radar-word); font-size: 0.9375rem; line-height: 1.4; color: var(--radar-ink); }
.ex-ten .radar__aside { display: block; }
.ex-ten p, .ex-ten ol, .ex-ten h3 { margin: 0; }
.ex-ten .radar__aside p { margin-bottom: 6px; }
.ex-ten a { color: var(--radar-ink); }
.ex-ten .num { font-family: var(--radar-word); font-variant-numeric: tabular-nums; }

/* ---------- the opened angle: on a wide screen, the script as coloured boxes and the prompter as a coloured box beside them.
   A phone keeps the Script block and the whole-screen Film along, exactly as the Mix layout has them. ---------- */
/* ---------- the radar: on a laptop the counted-out groups stand beside the chart, where a dot can be seen to land,
   with the plan under them (Danny, 2026-10-09). The two are wrapped as that column (`right` in _radar.html). On a
   phone the wrapper is no box at all and the order is the one it always was: the groups, the key, then the plan. ---------- */
.radar__col { display: contents; }
.radar__col ~ .radar__key { order: 1; }
.radar__col > .radar__aside { order: 2; }
.radar__rest { display: none; }
.radar__group.is-folded > .radar__row.is-rest { display: none; }
.radar__group.is-folded > .radar__rest { display: grid; }

.ex-vs, .fa__wide { display: none; }
.ex-vs { scroll-margin-top: calc(var(--top) + 12px); }
.ex-vs__h .ready-chip { align-self: center; }  /* on a phone the same prompter is Mix's, over the whole screen, with Mix's words */

/* ---------- a laptop ---------- */
@media (min-width: 900px) {
  /* the radar's own column beside the chart: the count, the three groups in the order the dots leave, then the plan */
  .radar__col { display: grid; grid-column: 2; grid-row: 2 / span 4; align-self: start; gap: 16px; min-width: 0; }
  .radar[data-radar-live] > .radar__col { grid-row: 3 / span 4; }
  .radar__col ~ .radar__key, .radar__col > .radar__aside { order: 0; }
  .radar__col > .radar__side, .radar.is-rest .radar__col > .radar__side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .radar__col .radar__tally { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .radar__col .radar__gh b { margin-left: 4px; font-family: var(--radar-word); font-variant-numeric: tabular-nums; color: var(--radar-ink); }
  .radar__col > .radar__aside, .radar.is-rest .radar__col > .radar__aside { display: block; padding-top: 12px; border-top: 1.5px solid var(--radar-ink); }
  .ex-top { grid-template-columns: minmax(0, 29fr) minmax(0, 21fr); column-gap: 40px; }  /* the radar's box about 58%, the idea's about 42% */
  .ex-top.mx-top--alone { grid-template-columns: minmax(0, 1fr); }
  /* the drawing runs on past the radar's own edge to the pick's box: the padding, the edge and the gap between the two */
  .ex-top .mx-sheet { margin-right: -58px; background: none; }
  .ex-top.mx-top--alone .mx-sheet { margin-right: 0; }
  .ex-top .mx-c--wide { display: none; }
  .ex-top .mx-c--big { display: block; }
  .ex-pick { padding: 18px; border-left-width: 2px; }
  .ex-pick .mx-open--read { display: none; }  /* with a script written, "Film along" is this box's one button on a laptop: the headline opens the angle to read */
  /* the idea's box is wide enough for a script row to say more of itself: two lines before it is cut */
  .ex-pick .mx-shot__w { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; white-space: normal; line-height: 1.2; }
  .ex-pick .mx-shot summary { padding-top: 8px; padding-bottom: 8px; }
  .ex-then--alone.ex-then { grid-template-columns: minmax(0, 1fr); }
  .ex-then { grid-template-columns: minmax(0, 1fr) 320px; column-gap: 20px; align-items: start; margin-left: -40px; margin-right: -40px; padding: 26px 40px 30px; }
  .ex-finder { position: sticky; top: calc(var(--top) + 16px); }
  .ex-ten .radar__rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }

  /* the opened angle as Film mode had it. The page keeps its own colour: only the shots' boxes and the prompter's box are coloured. */
  .ap--ready:has(.ex-vs) { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); column-gap: 40px; }
  /* the right-hand column: the prompter, and "Make it" directly under it (on a phone it stays at the foot of the page) */
  .ap--ready:has(.ex-vs) .ap__rail--film { grid-column: 2; grid-row: 2; align-self: start; position: static; display: grid; gap: 14px; margin: 0; }
  .ap--ready:has(.ex-vs) .ap__main { grid-column: 1; grid-row: 2; }
  .ap--ready:has(.ex-vs) .makeit { gap: 10px; padding: 14px 16px 16px; }
  .ap--ready:has(.ex-vs) .makeit .muted { display: none; }
  .ap--ready:has(.ex-vs) .makeit .addons { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .ap--ready:has(.ex-vs) .makeit .addons .button { min-height: 48px; padding: 8px 10px; font-size: 0.9375rem; }
  .ap--ready:has(.ex-vs) .makeit .addons__note { grid-column: 1 / -1; }
  .ap__main:has(.ex-vs) .mx-script { display: none; }
  .ex-vs { display: block; margin-top: 22px; padding-top: 16px; border-top: 3px solid var(--paper); }
  .ex-vs__h { display: flex; align-items: baseline; gap: 10px; margin: 0 0 14px; font-size: 1.375rem; }
  .ex-vs__h span { font-family: var(--font-text); font-size: 0.9375rem; font-stretch: 100%; font-weight: 500; letter-spacing: 0; color: var(--ash); }
  .ex-shots { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 12px; }
  .ex-shotc p { margin: 0; }
  .ex-shotc__box {
    appearance: none; position: relative; display: block; width: 100%; aspect-ratio: 9 / 16; padding: 0; cursor: pointer; text-align: left;
    font: inherit; color: var(--mix-ink); border: 1.5px solid var(--mix-ink); border-radius: 0;
  }
  .ex-shotc__box b { position: absolute; left: 10px; top: 6px; font-family: var(--font-display); font-size: 1.875rem; line-height: 1; }
  .ex-shotc__now { position: absolute; right: 8px; top: 8px; display: none; padding: 2px 6px 3px; font-size: 0.8125rem; font-weight: 700; line-height: 1.2; color: var(--mix-paper); background: var(--mix-ink); }
  .ex-shotc__box[aria-current] { outline: 3px solid var(--mix-ink); outline-offset: 3px; }
  .ex-shotc__box[aria-current] .ex-shotc__now { display: block; }
  .ex-shotc__bar { position: absolute; left: 0; right: 0; bottom: 14%; padding: 6px 9px 7px; font-size: 0.8125rem; font-weight: 700; line-height: 1.25; color: var(--mix-paper); background: var(--mix-ink); }
  .ex-shotc__s { margin-top: 8px; font-size: 0.875rem; font-weight: 700; }
  .ex-shotc .ex-shotc__s { margin-top: 8px; }
  .ex-shotc__say { font-size: 0.9375rem; line-height: 1.35; }
  /* the prompter: one box in the colour of the shot that is on, where it stays while the script scrolls */
  .fa.fa--inline, .fa.fa--inline[open] {
    position: static; inset: auto; display: block;
    width: auto; height: auto; max-height: none; margin: 0; overflow: visible; border: 2.5px solid var(--mix-ink);
  }
  .fa.fa--inline[hidden] { display: none; }
  .fa--inline .fa__wide { display: inline; }
  .fa--inline .fa__narrow { display: none; }
  .fa--inline .fa__in { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "strip run" "body body" "ctl ctl"; max-width: none; padding: 20px 22px 18px; }
  .fa--inline .fa__top { display: contents; }
  .fa--inline .fa__h, .fa--inline .fa__keys, .fa--inline .fa__close, .fa--inline .fa__list { display: none; }
  .fa--inline .fa__run { grid-area: run; align-self: center; margin: 0; padding-left: 18px; }
  .fa--inline .fa__strip { grid-area: strip; padding: 0; }
  .fa--inline .fa__body { grid-area: body; min-height: 380px; padding: 18px 0 0; overflow: visible; }
  .fa--inline .fa__clock, .fa--inline.fa[data-state] .fa__clock { color: var(--mix-paper); background: var(--mix-ink); border-color: var(--mix-ink); }
  .fa--inline .fa__clock .fa__unit { color: var(--mix-paper); }
  .fa--inline .fa__txt { margin: auto -22px 0; padding: 12px 22px 14px; }
  .fa--inline .fa__ctl, .fa.fa--inline .fa__ctl { grid-area: ctl; grid-template-columns: auto minmax(0, 220px) auto; grid-template-areas: "back clock next"; justify-content: start; padding: 16px 0 0; }
  .fa.fa--inline .fa__ctl [data-fa="toggle"], body:has(.button.lamp) .fa.fa--inline .fa__ctl [data-fa="toggle"] { min-height: 56px; color: var(--mix-paper); background: var(--mix-ink); }
  .fa.fa--inline .fa__ctl [data-fa="next"], body:has(.button.lamp) .fa.fa--inline .fa__ctl [data-fa="next"] { color: var(--mix-ink); background: transparent; }
}
/* a screen tall enough for both: the prompter and "Make it" stay beside the script while it scrolls */
@media (min-width: 900px) and (min-height: 780px) {
  .ap--ready:has(.ex-vs) .ap__rail--film { position: sticky; top: calc(var(--top) + 16px); }
}
/* a shorter one: the prompter alone stays in view beside the script, and "Make it" keeps its place under where the prompter began */
@media (min-width: 900px) and (max-height: 779.98px) {
  .ap--ready:has(.ex-vs) .ap__rail--film { align-self: stretch; display: block; }
  .ap--ready:has(.ex-vs) .ap__rail--film > .fa.fa--inline, .ap--ready:has(.ex-vs) .ap__rail--film > .fa.fa--inline[open] { position: sticky; top: calc(var(--top) + 12px); z-index: 2; }
  .ap--ready:has(.ex-vs) .ap__rail--film > .makeit { margin-top: 14px; }
}