/* chrome.css — the setup pages' own look: SUPERCOLOR AM, adapted and turned
   down. Shared by brand.html and upload.html. Never part of the reel. */

/* SUPERCOLOR AM, adapted and turned down (Phil, 2026-09-20: "more restrained
   and dressed up"). The system's own rule does the restraining: paper carries
   the page, ink carries the words, channels appear only as furniture. Here
   that means one offset shadow per tier card and orange for the single
   thing you press at the end. Tokens and cuts are the AM spec's
   (sodisappointed-hero/docs/08), unchanged. */
:root {
  --paper: #F6F2DC; --cream: #D9D399; --tan: #C8C084;
  --ink: #121912; --ink-2: #3C423A; --ink-3: #5F6354;  /* 4.5:1 or better on paper and the tinted cards */
  --cyan: #1391B1; --cyan-t: #CDE7EE; --cyan-i: #0B6A85;
  --lime: #93B52B; --lime-t: #E5ECC5; --lime-i: #4E6A0A;
  --yellow: #FBE61B; --yellow-t: #FDF7C8;
  --amber: #ECB03E; --amber-t: #F9E8C6; --amber-i: #8F650E;
  --orange: #F96324; --orange-t: #FDDACA; --orange-i: #BF3F09;
  --brick: #D14226; --brick-t: #F3D3C9; --brick-i: #A32F14;
  --magenta: #F04383; --magenta-t: #FBD1DF; --magenta-i: #BE1D58;
  --disp: "Archivo Wide", "Archivo", "Arial Black", sans-serif;
  --mono: "Space Mono", ui-monospace, monospace;
  --body: "SN Pro", "Nunito Sans", system-ui, sans-serif;
  --rule: 2.5px solid var(--ink);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { color: var(--ink); font: 17px/1.6 var(--body); -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2.5px solid var(--ink); outline-offset: 3px; border-radius: 3px; }
[hidden] { display: none !important; }

.disp { font-family: var(--disp); font-weight: 900; font-stretch: 122%; text-transform: uppercase; letter-spacing: -.01em; }
.lab { font-family: var(--mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); }

/* ---- the room: halfway between the brand and the reel ----
   AM says no gradients; the reel lives in grain, a lamp and a vignette.
   Phil, 2026-09-20: drop the rainbow bars, add grain and a soft gradient,
   "somewhere between my brand and the video's vibe". So the paper gets
   the reel's light: a warm lamp from the top left, a breath of Meridian
   teal from the right, the edges falling off. All fixed to the window, so
   it reads as the room the page sits in, not a pattern on it. */
html { background: var(--paper); }
body { background:
    radial-gradient(90vmax 70vmax at 8% -10%, rgb(249 99 36 / .13), transparent 60%),
    radial-gradient(70vmax 60vmax at 105% 35%, rgb(31 131 120 / .12), transparent 62%),
    radial-gradient(80vmax 50vmax at 40% 115%, rgb(236 176 62 / .16), transparent 65%),
    var(--paper);
  background-attachment: fixed; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgb(90 70 20 / .09) 100%); }
/* Each layer sits directly on the page. Wrapping them in one fixed box
   would isolate the blend, and they'd paint as flat grey. */
.film { position: fixed; inset: 0; pointer-events: none; z-index: 20; }
/* Generated in the page, as the reel's texture.js does: nothing to fetch. */
/* soft-light, as the reel does it: mid-grey is neutral, so the texture
   adds bite without greying the paper or the type. */
.film.grain { background-image: var(--grain-tile); background-size: 220px; mix-blend-mode: soft-light; opacity: .55; }
.film.tooth { background-image: var(--tooth-tile); background-size: 640px; mix-blend-mode: soft-light; opacity: .7; }
/* No z-index here: a stacking context on main would trap anything inside it
   under the film. The brand page lifts its previews above the film, because
   a picture of the video should carry the video's grain and nothing else. */
.top, main { position: relative; }
.over-film { position: relative; z-index: 21; }
/* Anything you click or read a colour off sits above the texture too:
   grain over a label makes it hard to read (Phil, 2026-09-21), and over a
   colour chip or a picture it changes the colour (Phil, 2026-09-22). That is
   every control (buttons, the option cards, which are labels, inputs), the
   colour chips, and every picture (img, canvas). :where() keeps this at the
   lowest priority, so anything positioned on purpose keeps its position. */
:where(button, select, textarea, input, label, a.pill, .pill, .steps a, [role="button"], [role="radio"], .chip, img, canvas) { position: relative; z-index: 21; }
/* The top bar says two different things and must look it: on the left the
   tool and its promise (a name and a plain sentence under it), on the right
   where you are (a stepper you can click, steps.css). */
.top { max-width: 1120px; margin: 0 auto; padding: 18px 24px; display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; flex-wrap: wrap; }
/* The disco ball (Phil, 2026-09-22) sits beside the name, across both its
   lines. It animates itself; chrome.js swaps it for the still one when a
   person asks for less motion. */
.top .who { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 10px; }
.top .who .mark { grid-row: 1 / span 2; width: 34px; height: 34px; display: block; }
@media (max-width: 520px) { .top .who .mark { width: 28px; height: 28px; } }
.top .brand { font-size: 17px; line-height: 1.1; }
a.brand { color: inherit; text-decoration: none; }
/* A 24px-tall target without moving anything (tap-target size). */
.top a.brand { display: inline-block; padding-block: 2px; margin-block: -2px; }
a.brand:hover { text-decoration: underline; text-underline-offset: 3px; }
.top .promise { font-size: 13.5px; line-height: 1.3; color: var(--ink-2); }
/* The steps themselves are steps.css, shared with the preview. */

main { max-width: 1120px; margin: 0 auto; padding: 0 24px 140px; }

/* ---- the question you're answering, as the headline ---- */
.hero { padding: 44px 0 30px; border-top: 2px solid rgb(18 25 18 / .12); }
h1.disp { font-size: clamp(30px, 5.4vw, 66px); line-height: .94; text-wrap: balance; }
/* The month is the one control in the headline, so it looks like one: a
   raised slab with a round orange button on it, not a word with a caret. */
h1 .month { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: .22em; white-space: nowrap;
  color: var(--orange-i); background: var(--paper); border: max(3px, .06em) solid var(--ink); border-radius: .2em;
  padding: .1em .12em .06em .26em; margin: .06em 0; box-shadow: max(4px, .09em) max(4px, .09em) 0 var(--ink);
  transition: transform .12s, box-shadow .12s; }
h1 .month:hover { transform: translate(-.03em, -.03em); box-shadow: max(6px, .12em) max(6px, .12em) 0 var(--ink); }
h1 .month:active { transform: translate(.04em, .04em); box-shadow: .03em .03em 0 var(--ink); }
h1 .month:focus-visible { outline: 3px solid var(--orange); outline-offset: 5px; }
h1 .month .chev { flex: none; width: .96em; height: .96em; border-radius: 50%; background: var(--orange); border: max(2.5px, .05em) solid var(--ink);
  display: grid; place-items: center; transition: transform .2s; }
h1 .month .chev svg { width: 52%; height: 52%; margin-top: 10%; }
h1 .month[aria-expanded="true"] .chev { transform: rotate(180deg); }
.lede { max-width: 58ch; margin-top: 22px; color: var(--ink-2); font-size: 18px; }

/* the month picker: a broadcast schedule, one slot per month */
.schedule { margin-top: 26px; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); border: var(--rule);
  border-radius: 10px; overflow: hidden; background: var(--ink); gap: 2.5px; }
.schedule button { all: unset; cursor: pointer; background: var(--paper); padding: 12px 12px 10px; display: flex; flex-direction: column; gap: 2px; }
.schedule button b { font-family: var(--disp); font-weight: 900; font-stretch: 122%; font-size: 22px; line-height: 1; }
.schedule button small { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--ink-3); }
.schedule button:hover { background: var(--cream); }
.schedule button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.schedule button[aria-pressed="true"] small { color: var(--yellow); }
.schedule button:focus-visible { outline: 2.5px solid var(--orange); outline-offset: -5px; }

/* ---- the report: framed like a featured image ---- */
.frame { border: var(--rule); border-radius: 10px; overflow: hidden; background: var(--paper); margin-top: 34px; }
.drop { display: grid; place-items: center; text-align: center; gap: 6px; padding: 46px 20px; cursor: pointer;
  background: repeating-linear-gradient(-45deg, transparent 0 11px, rgb(200 192 132 / .22) 11px 12px); transition: background-color .15s; }
.drop:hover, .drop.over { background-color: var(--yellow-t); }
.drop .disp { font-size: clamp(22px, 3.2vw, 32px); line-height: .95; }
.drop .or { font-size: 15px; color: var(--ink-2); }
.drop .or u { text-decoration-color: var(--cyan); text-decoration-thickness: 2px; text-underline-offset: 3px; color: var(--cyan-i); }
.loaded { display: none; padding: 22px 24px; gap: 4px 20px; grid-template-columns: 1fr auto; align-items: center; }
.frame.has-file .drop { display: none; }
.frame.has-file .loaded { display: grid; }
.loaded .disp { font-size: 22px; line-height: 1; overflow-wrap: anywhere; font-stretch: 110%; letter-spacing: 0; text-transform: none; }
.loaded .lab { grid-column: 1; }
.loaded .again { grid-row: 1 / 3; grid-column: 2; }
.capstrip { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 8px 14px;
  background: var(--cream); border-top: 2px solid var(--ink); font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.capstrip .cred { color: var(--ink-2); }

.notice { display: flex; gap: 12px; align-items: baseline; margin-top: 14px; padding: 11px 14px; border-radius: 6px; font-size: 15px; }
.notice .tag { flex: none; }
.notice.old { background: var(--amber-t); }
.notice.bad { background: var(--brick-t); }

/* ---- chips, pills, pickers ---- */
.tag { display: inline-block; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 3px; line-height: 1.5; white-space: nowrap; }
.tag.leave { background: var(--amber-t); color: var(--amber-i); }
.tag.back { background: var(--cyan-t); color: var(--cyan-i); }
.tag.odd { background: var(--brick-t); color: var(--brick-i); }
.tag.ink { background: var(--ink); color: var(--paper); }
.tag.ink em { font-style: normal; color: var(--yellow); }
.pill { cursor: pointer; font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  padding: 11px 20px; border-radius: 100px; border: 2px solid var(--ink); background: var(--paper); transition: transform .12s, box-shadow .12s; }
.pill:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); }
.pill:active { transform: none; box-shadow: none; }
.pill.go { background: var(--orange); box-shadow: 3px 3px 0 var(--ink); }
.pill.go:hover { box-shadow: 5px 5px 0 var(--ink); }
.pill.small { font-size: 11px; padding: 5px 12px; }
select.pick { cursor: pointer; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; padding: 4px 26px 4px 9px; border: 1.5px solid var(--tan);
  border-radius: 4px; background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23121912'/%3E%3C/svg%3E") no-repeat right 9px center;
  appearance: none; max-width: 100%; }
select.pick:hover { border-color: var(--ink); }

/* ---- please stand by: a question the reader can't answer itself ---- */
.standby { margin: 40px 0 10px; max-width: 640px; border: var(--rule); border-radius: 10px; background: var(--paper);
  box-shadow: 6px 6px 0 var(--orange); padding: 22px 24px 24px; transform: rotate(-.6deg); }
.standby h3 { font-size: clamp(22px, 3vw, 30px); line-height: .95; margin: 10px 0 10px; text-wrap: balance; }
.standby p { color: var(--ink-2); font-size: 15.5px; max-width: 54ch; }
.standby .answers { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }

/* ---- the workspace: controls beside the preview ---- */
.work { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 40px; align-items: start; margin-top: 44px; }
@media (max-width: 900px) { .work { grid-template-columns: 1fr; } }
.controls { display: grid; gap: 22px; }
/* On a desktop the controls stay put while the list scrolls, so a tick
   shows its effect in place. They scroll inside themselves when taller
   than the window, rather than hiding their bottom half. */
@media (min-width: 901px) {
  .controls { position: sticky; top: 16px; max-height: calc(100vh - 110px); overflow: auto; padding: 0 8px 8px 0; margin-right: -8px; }
}
.preview h2.disp { font-size: clamp(28px, 4vw, 44px); line-height: .92; text-wrap: balance; }
.preview h2 .n { color: var(--orange-i); }
.hint { color: var(--ink-2); font-size: 15px; margin: 10px 0 22px; }

/* a filter: a column, and the values in it you keep */
.filter { padding: 12px 0 14px; border-bottom: 1.5px dashed var(--tan); }
.filter:last-of-type { border-bottom: 0; }
.filter .fh { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.filter .fh b { font-weight: 700; font-size: 15px; }
.filter .fh .lab { font-size: 10.5px; }
.filter .fh .x { margin-left: auto; }
.filter .note { margin: 0 0 8px; }
.vals { list-style: none; max-height: 240px; overflow: auto; margin: 0 -4px; padding: 0 4px; }
.vals li { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 3px 0; font-size: 14.5px; }
.vals li label { display: contents; cursor: pointer; }
.vals li .v { overflow-wrap: anywhere; }
.vals li .v i { font-style: normal; color: var(--ink-3); }
.vals li.out .v { color: var(--ink-3); text-decoration: line-through; }
.vals li .c { font-family: var(--mono); font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.vals li .only { visibility: hidden; }
.vals li:hover .only, .vals li:focus-within .only { visibility: visible; }
.vals input[type=checkbox], .person input[type=checkbox] { appearance: none; width: 18px; height: 18px; border: 2px solid var(--ink); border-radius: 4px; cursor: pointer;
  display: grid; place-items: center; background: var(--paper); margin: 0; }
.vals input[type=checkbox]:checked { background: var(--ink); }
.vals input[type=checkbox]:checked::after { content: ""; width: 8px; height: 4.5px; border: solid var(--paper); border-width: 0 0 2.5px 2.5px; transform: translateY(-1px) rotate(-45deg); }
.fbtns { display: flex; gap: 12px; margin-top: 6px; }
.linkish { all: unset; cursor: pointer; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--cyan-i); }
.linkish:hover { color: var(--magenta-i); }
.linkish:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.add { padding: 12px 0 14px; }
.add select { width: 100%; }
.tag.new { background: var(--yellow-t); color: var(--ink); }

/* folding cards: the header is the switch */
.card.fold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; }
.card.fold > summary::-webkit-details-marker { display: none; }
.card.fold > summary .arr { margin-left: auto; transition: transform .2s; }
.card.fold[open] > summary .arr { transform: rotate(90deg); }
.card.fold > summary .count { color: var(--yellow); }
.left { margin-top: 10px; }
.settings p { font-size: 14px; margin: 10px 0 0; }
.settings .btns { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 10px; }
.settings .linkish { display: inline-block; margin-bottom: 12px; }

.notice.memo { background: var(--cyan-t); align-items: center; flex-wrap: wrap; }
.notice.memo .pill { margin-left: auto; }
.notice.phone { display: none; margin: 0 16px; background: var(--amber-t); border: 2px solid var(--ink); }
/* A touch screen with no mouse, not a narrow window: a desktop browser
   squeezed small is still a computer that can make the video. */
@media (hover: none) and (pointer: coarse) { .notice.phone { display: flex; } }

/* a tier: the year number big, as it lands in the video, the names beneath */
.tier { display: grid; grid-template-columns: 132px minmax(0, 1fr); border: var(--rule); border-radius: 10px; background: var(--paper);
  box-shadow: 5px 5px 0 var(--ch); margin-bottom: 22px; overflow: hidden; }
.tier .yr { border-right: var(--rule); padding: 16px 14px 14px; display: flex; flex-direction: column; justify-content: space-between; gap: 8px;
  background: color-mix(in srgb, var(--ch) 14%, var(--paper)); }
.tier .yr b { font-family: var(--disp); font-weight: 900; font-stretch: 125%; font-size: 64px; line-height: .82; letter-spacing: -.03em; }
.tier .yr span { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2); }
.tier ol { list-style: none; padding: 6px 18px; }
@media (max-width: 560px) {
  .tier { grid-template-columns: 1fr; }
  .tier .yr { border-right: 0; border-bottom: var(--rule); flex-direction: row; align-items: baseline; justify-content: flex-start; }
  .tier .yr b { font-size: 44px; }
}
.person { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 9px 0; }
.person + .person { border-top: 1.5px dashed var(--tan); }
.person input[type=checkbox] { appearance: none; width: 20px; height: 20px; border: 2px solid var(--ink); border-radius: 4px; cursor: pointer;
  display: grid; place-items: center; background: var(--paper); }
.person input[type=checkbox]:checked { background: var(--ink); }
.person input[type=checkbox]:checked::after { content: ""; width: 9px; height: 5px; border: solid var(--paper); border-width: 0 0 2.5px 2.5px;
  transform: translateY(-1px) rotate(-45deg); }
.person .name { border: 0; border-bottom: 1.5px solid transparent; background: transparent; padding: 1px 0; font-size: 17px; font-weight: 500; min-width: 0; width: 100%; }
.person .name:hover { border-bottom-color: var(--tan); }
.person .name:focus { outline: none; border-bottom-color: var(--ink); }
.person .when { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--ink-3); text-transform: uppercase; white-space: nowrap; }
/* A name is never cut short for its details: when they don't fit beside
   it, they go underneath. */
@media (max-width: 720px) { .person .when { grid-column: 2 / 4; white-space: normal; } }
.person .tags { grid-column: 2 / 4; display: flex; gap: 6px; flex-wrap: wrap; }
.person .tags:empty { display: none; }
.person.off .name { text-decoration: line-through; text-decoration-thickness: 1.5px; color: var(--ink-3); }
.empty { border: 2px dashed var(--tan); border-radius: 10px; padding: 30px; text-align: center; color: var(--ink-2); }

/* the reasoning: a credits roll of every decision */
.card { border: var(--rule); border-radius: 10px; overflow: hidden; background: var(--paper); }
.card .head { background: var(--ink); color: var(--paper); padding: 10px 16px; font-family: var(--mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; }
.card .head em { font-style: normal; color: var(--yellow); }
.card .rows { padding: 2px 16px; }
.card .row { padding: 11px 0; border-bottom: 1.5px dashed var(--tan); font-size: 14.5px; line-height: 1.5; }
.card .row:last-child { border-bottom: 0; }
.card .row .lab { display: block; font-size: 10.5px; margin-bottom: 6px; color: var(--ink-2); }
.card .row .say { font-weight: 500; }
.card .row .note { display: block; margin-top: 5px; color: var(--ink-2); font-size: 13.5px; }
.card details summary { cursor: pointer; list-style: none; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--cyan-i); margin-top: 6px; }
.card details summary::-webkit-details-marker { display: none; }
.card details[open] summary { margin-bottom: 8px; }
.statuses { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; align-items: center; font-size: 14px; }

.left .rows details { border-bottom: 1.5px dashed var(--tan); }
.left .rows details:last-child { border-bottom: 0; }
.left .rows summary { cursor: pointer; list-style: none; display: flex; gap: 10px; align-items: baseline; padding: 11px 0; font-size: 14.5px; }
.left .rows summary::-webkit-details-marker { display: none; }
.left .rows summary .count { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--ink-2); }
.left .rows summary .arr { font-family: var(--mono); font-size: 11px; color: var(--ink-3); transition: transform .2s; flex: none; }
.left .rows details[open] .arr { transform: rotate(90deg); }
.left ul { list-style: none; padding: 0 0 12px; max-height: 260px; overflow: auto; }
.left li { display: flex; gap: 10px; align-items: baseline; font-size: 13.5px; padding: 3px 0; }
.left li .ln { font-family: var(--mono); font-size: 11px; color: var(--ink-3); flex: none; width: 52px; }
.left li .why { color: var(--ink-3); }
.left li button { margin-left: auto; flex: none; }

/* ---- the bar you finish on ---- */
/* Above the film (20) and anything lifted over it (21), so a photo or a
   preview scrolling underneath never shows through the bar. */
.bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: rgb(246 242 220 / .82);
  -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2); border-top: var(--rule); }
.bar .in { max-width: 1120px; margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; gap: 16px; }
.bar .sum { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.bar .pill { margin-left: auto; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } .standby { transform: none; } }