/* r52: self-hosted fonts (SIL Open Font License 1.1; credits on the Terms page). Latin subsets only, font-display: swap; no third-party host. */
@font-face { font-family: 'DM Sans'; src: url('/fonts/DMSans-var.woff2') format('woff2'); font-weight: 100 1000; font-style: normal; font-display: swap; }
/* r54: Anton (display, regular only: declared 400 so the browser never fakes a bold). The Instrument Serif files stay in /fonts but nothing loads them any more. */
@font-face { font-family: 'Anton'; src: url('/fonts/Anton-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'DM Mono'; src: url('/fonts/DMMono-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }

/* Mobile-first (360-430px). Design tokens first; every component reads from them.
   r24 (A+, palette 1 "Indigo + Teal"): light neutral base, one accent (indigo) and one secondary (teal). To switch palette,
   change only the colour tokens below (docs/research/spikes/ui-directions/README.md, r21: palette 2 = Rose + Sky). */
:root {
  /* color — all text pairs are WCAG AA on their background (test/contrast.test.ts, test/r24-ui.test.ts) */
  --c-bg: #f8fafc;
  --c-surface: #ffffff;
  --c-surface-2: #f1f5f9;
  --c-line: #e2e8f0;
  --c-fg: #0f172a;
  --c-mute: #475569;
  --c-acc: #4f46e5;        /* indigo: primary actions, the gauge */
  --c-on-acc: #ffffff;
  --c-acc-ink: #3730a3;    /* indigo text on --c-acc-soft */
  --c-acc-soft: #eef2ff;
  --c-teal: #0f766e;       /* secondary: the friend's side, "where you meet" */
  --c-teal-soft: #f0fdfa;
  --c-ok: #0f766e;
  --c-fork: #b45309;
  --c-warn-soft: #fffbeb;
  --c-focus: var(--c-acc-ink);
  --c-track: #e2e8f0;
  /* r50: borders, scrim and gauge that used to be written as colour literals inside rules; body.mono (always on) turns them grey */
  --c-line-hi: #a5b4fc; --c-line-acc: #c7d2fe; --c-line-warn: #fde68a; --c-line-warn-2: #fcd34d; --c-line-teal: #99f6e4; --c-line-teal-2: #5eead4;
  --c-gauge-dim: #a5b4fc; --c-scrim: rgba(15, 23, 42, .45); --c-lift: rgba(15, 23, 42, .08);
  /* poster blocks (dark ink on all six) */
  --p0: #e0e7ff; --p1: #ccfbf1; --p2: #fef3c7; --p3: #fce7f3; --p4: #e0f2fe; --p5: #ede9fe;
  /* type: four sizes */
  --f-sm: 13px;
  --f-md: 16px;
  --f-lg: 20px;
  --f-hero: 44px;
  --font-ui: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Anton', Impact, 'Arial Narrow', sans-serif;
  /* r54: the one accent (lime). Change only these two tokens to change it. It is used in six places, listed in test/r54.test.ts */
  --c-pop: #d4ff3a;
  --c-on-pop: #0e0e0f;
  --font-mono: 'DM Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --f-body: 400 var(--f-md)/1.5 var(--font-ui);
  /* spacing (4px grid) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px;
  /* radius */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-pill: 999px;
  /* touch */
  --tap: 48px;
  --t-fast: .18s;
  --t-sweep: .9s;
  --shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px -16px rgba(15, 23, 42, .18);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--c-bg); color: var(--c-fg); font: var(--f-body); padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }
/* defensive: long titles / handles never widen the page */
main, .card, .row > *, .dom > *, p, h1, h2, h3 { min-width: 0; overflow-wrap: anywhere; }
.ic { flex: none; vertical-align: middle; }

.top { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); padding: calc(var(--s-3) + env(safe-area-inset-top)) var(--s-4) var(--s-3); position: sticky; top: 0; background: var(--c-surface); border-bottom: 1px solid var(--c-line); z-index: 2; }
.brand { font-weight: 800; letter-spacing: .2px; display: flex; align-items: center; gap: 6px; }
.brand::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--c-acc); }
.who { color: var(--c-mute); font-size: var(--f-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 55%; }
main { padding: var(--s-3) var(--s-4); max-width: 480px; margin: 0 auto; }

.tabs { position: fixed; bottom: 0; left: 0; right: 0; display: grid; grid-template-columns: repeat(3, 1fr); background: var(--c-surface); border-top: 1px solid var(--c-line); padding-bottom: env(safe-area-inset-bottom); z-index: 3; }
.tabs button { min-height: 60px; background: none; border: 0; color: var(--c-mute); font-size: var(--f-sm); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.tabs button.on { color: var(--c-acc-ink); box-shadow: inset 0 3px 0 var(--c-acc); font-weight: 700; }

h1 { font-size: var(--f-lg); font-weight: 800; line-height: 1.25; margin: var(--s-4) 0 var(--s-2); }
h2 { font-size: var(--f-lg); margin: var(--s-4) 0 var(--s-2); }
h3 { font-size: var(--f-sm); text-transform: uppercase; letter-spacing: .6px; color: var(--c-mute); margin: var(--s-4) 0 var(--s-1); }
.mute { color: var(--c-mute); font-size: var(--f-sm); }
.lead { font-size: var(--f-md); color: var(--c-fg); }

.card { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: var(--s-4); margin: var(--s-3) 0; box-shadow: var(--shadow); }
.row { display: flex; justify-content: space-between; gap: var(--s-2); align-items: center; min-height: var(--tap); padding: var(--s-2) 0; border-bottom: 1px solid var(--c-line); }
.row:last-child { border-bottom: 0; }
.badge { min-width: 36px; text-align: center; padding: var(--s-1) var(--s-2); border-radius: var(--r-sm); background: var(--c-acc-soft); color: var(--c-acc-ink); font-weight: 700; flex: none; }

.btn { min-height: var(--tap); min-width: var(--tap); padding: 0 var(--s-4); border-radius: var(--r-md); border: 1px solid var(--c-line); background: var(--c-surface); font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); }
.btn.primary { width: 100%; min-height: 52px; border: 0; background: var(--c-acc); color: var(--c-on-acc); font-weight: 700; }
.btn.ghost { background: none; }
.linkish { background: none; border: 0; padding: 0; min-height: var(--tap); min-width: var(--tap); color: var(--c-acc-ink); text-decoration: underline; font: inherit; cursor: pointer; }
.btn.block { width: 100%; }
.btn.small { min-height: var(--tap); padding: 0 var(--s-3); font-size: var(--f-sm); }
.btn:disabled { opacity: .55; cursor: default; }
.link { background: none; border: 0; color: var(--c-acc-ink); text-decoration: underline; min-height: var(--tap); min-width: var(--tap); padding: 0 var(--s-2) 0 0; text-align: left; }

.chips { display: flex; gap: var(--s-2); flex-wrap: wrap; margin: var(--s-2) 0 var(--s-3); }
.chip { min-height: var(--tap); min-width: var(--tap); padding: 0 var(--s-4); border-radius: var(--r-pill); border: 1px solid var(--c-line); background: var(--c-surface); }
.chip[aria-pressed=true] { border-color: var(--c-acc); background: var(--c-acc-soft); color: var(--c-acc-ink); font-weight: 700; }
/* r24: people as avatars (initial in a circle + name) */
.chip.person { display: inline-flex; align-items: center; gap: var(--s-2); padding: 0 var(--s-3) 0 6px; }
.av { width: 36px; height: 36px; border-radius: 50%; display: inline-grid; place-items: center; font-weight: 800; background: var(--c-surface-2); color: var(--c-fg); border: 2px solid var(--c-surface); flex: none; }
.chip[aria-pressed=true] .av { background: var(--c-acc); color: var(--c-on-acc); }
.av.friend { background: var(--c-teal-soft); color: var(--c-teal); }
.av.me { background: var(--c-acc-soft); color: var(--c-acc-ink); }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--s-1); padding: var(--s-1); border-radius: var(--r-md); background: var(--c-surface-2); border: 1px solid var(--c-line); margin: var(--s-2) 0 var(--s-3); }
.seg button { min-height: var(--tap); border: 0; border-radius: var(--r-sm); background: none; color: var(--c-mute); }
summary { min-height: var(--tap); display: flex; align-items: center; gap: var(--s-2); cursor: pointer; }
.seg button[aria-pressed=true] { background: var(--c-surface); color: var(--c-acc-ink); font-weight: 700; box-shadow: 0 1px 2px var(--c-lift); }

input[type=search], input[type=text], textarea { width: 100%; min-height: var(--tap); padding: var(--s-3); border-radius: var(--r-md); border: 1px solid var(--c-line); background: var(--c-surface); font-size: var(--f-md); }

/* r24: folds (<details>): small summary line with a chevron; the text inside stays in the DOM */
.fold { margin: var(--s-2) 0 0; border-top: 1px solid var(--c-line); }
.fold > summary { list-style: none; color: var(--c-acc-ink); font-size: var(--f-sm); font-weight: 600; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary .ic { transition: transform var(--t-fast); }
.fold[open] > summary .ic { transform: rotate(180deg); }
.fold > :not(summary) { margin: var(--s-1) 0 var(--s-2); }
.fold p { font-size: var(--f-sm); color: var(--c-mute); }

/* score pad: 5 x 2, every key >= 48px on a 360px screen */
.pad { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-2); margin-top: var(--s-3); }
.pad button { min-height: 52px; border-radius: var(--r-md); border: 1px solid var(--c-line); background: var(--c-surface); font-size: var(--f-md); font-weight: 700; }
.pad button[aria-pressed=true] { background: var(--c-acc); color: var(--c-on-acc); border-color: var(--c-acc); }
.pad button.hi { border-color: var(--c-line-hi); }
.item { padding: var(--s-3) 0; border-bottom: 1px solid var(--c-line); }
.item:last-child { border-bottom: 0; }

/* quick rate */
.deck { text-align: center; }
.deck .kind { font-size: var(--f-sm); color: var(--c-mute); text-transform: uppercase; letter-spacing: .6px; }
.deck .title { font-size: var(--f-lg); font-weight: 800; margin: var(--s-2) 0 var(--s-1); }
.progress { display: grid; gap: var(--s-1); margin: var(--s-2) 0; }
.bar { height: 8px; border-radius: var(--r-pill); background: var(--c-track); overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--c-acc); transition: width var(--t-fast); }

/* compare */
.banner { padding: var(--s-3); border-radius: var(--r-md); font-size: var(--f-sm); margin: 0 0 var(--s-3); border: 1px solid var(--c-line); color: var(--c-fg); }
.banner.with { background: var(--c-acc-soft); border-color: var(--c-line-acc); }
.banner.without { background: var(--c-warn-soft); border-color: var(--c-line-warn); }
.dom-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); }
.dom-head strong, .dom-head .dom-title { font-size: var(--f-lg); }
.dom-head .dom-title { margin: 0; font-weight: 800; line-height: inherit; display: flex; align-items: center; gap: var(--s-2); }
.dom-head .dom-title .ic { color: var(--c-acc); }
.flags { display: flex; gap: var(--s-1); flex-wrap: wrap; justify-content: flex-end; }
.flag { font-size: var(--f-sm); padding: 2px var(--s-2); border-radius: var(--r-pill); border: 1px solid var(--c-line); color: var(--c-mute); white-space: nowrap; }
.flag.warn { color: var(--c-fork); border-color: var(--c-line-warn-2); background: var(--c-warn-soft); }
/* the result: a half-circle gauge with the number in it */
.hero { display: flex; align-items: baseline; gap: var(--s-2); margin: var(--s-2) 0 var(--s-1); }
.hero.gauge { position: relative; display: block; width: 220px; max-width: 100%; margin: var(--s-3) auto var(--s-1); text-align: center; }
.hero.gauge svg { display: block; width: 100%; height: auto; }
.hero.gauge .num { position: absolute; left: 0; right: 0; bottom: 18px; }
.hero.gauge .unit { display: block; font-size: var(--f-sm); }
.gauge-track { stroke: var(--c-track); }
.gauge-val { stroke: var(--c-acc); animation: sweep var(--t-sweep) ease-out both; }
.gauge.dim .gauge-val { stroke: var(--c-gauge-dim); }
@keyframes sweep { from { stroke-dasharray: 0 400; } }
.hero .num { font-size: var(--f-hero); font-weight: 800; line-height: 1; letter-spacing: -1px; }
.hero .num.dim { color: var(--c-mute); }
.hero .unit { color: var(--c-mute); }
.meaning { margin: var(--s-1) 0 0; }
.band { font-size: var(--f-md); font-weight: 700; text-align: center; margin: var(--s-1) 0 var(--s-2); }
.meet li, .fork li { margin: var(--s-1) 0; }
.meet, .fork { padding-left: var(--s-4); margin: var(--s-1) 0; font-size: var(--f-sm); }
.meet b { color: var(--c-ok); font-weight: 700; }
.fork li::marker { color: var(--c-fork); }
.actions { display: flex; gap: var(--s-2); margin-top: var(--s-3); }
.actions .btn { flex: 1; }
.note { font-size: var(--f-sm); color: var(--c-fork); margin-top: var(--s-2); }
/* r24: "no titles in common, still compared": two circles that do not touch, a 0 between them */
.zero-hi { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s-2); padding: var(--s-3); margin: var(--s-2) 0; border-radius: var(--r-md); background: var(--c-teal-soft); border: 1px solid var(--c-line-teal); }
.zero-hi p { margin: 0; font-size: var(--f-sm); font-weight: 600; color: var(--c-fg); }
.zero-pair { display: flex; align-items: center; flex: none; }
.zero-pair .av { width: 40px; height: 40px; border: 2px solid var(--c-surface); }
.zero-gap { min-width: 40px; padding: 0 var(--s-1); text-align: center; font-size: var(--f-sm); font-weight: 800; color: var(--c-teal); border-top: 2px dashed var(--c-line-teal-2); line-height: 1.6; margin: 0 2px; }

/* share sheet */
.sheet-bg { position: fixed; inset: 0; background: var(--c-scrim); display: grid; align-items: end; z-index: 10; }
.sheet { background: var(--c-surface); border-radius: var(--r-lg) var(--r-lg) 0 0; padding: var(--s-5) var(--s-4) calc(var(--s-5) + env(safe-area-inset-bottom)); max-width: 480px; width: 100%; margin: 0 auto; }
.share-card { border-radius: var(--r-lg); padding: var(--s-5); background: var(--c-acc-soft); border: 1px solid var(--c-line-acc); text-align: center; margin: var(--s-3) 0; }
.share-card .who2 { font-size: var(--f-lg); font-weight: 700; }
.share-card .big { font-size: var(--f-hero); font-weight: 800; line-height: 1.1; color: var(--c-acc-ink); }
.share-card .sub { color: var(--c-mute); font-size: var(--f-sm); }
.sheet .actions { flex-wrap: wrap; }

/* states */
.state { text-align: center; padding: var(--s-6) var(--s-4); color: var(--c-mute); }
.skel { height: 120px; border-radius: var(--r-lg); background: linear-gradient(90deg, var(--c-surface-2) 0%, var(--c-line) 50%, var(--c-surface-2) 100%); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; margin: var(--s-3) 0; }
@keyframes shimmer { to { background-position: -200% 0; } }
.notice { padding: var(--s-3); border-radius: var(--r-md); background: var(--c-teal-soft); border: 1px solid var(--c-line-teal); margin: var(--s-2) 0; }

.toast { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* M9 P1-d: lives in the header bar (in the flow), never on top of a control; kept in the a11y tree so aria-live still announces */
textarea { margin: var(--s-2) 0; }
ol.how { padding-left: var(--s-5); color: var(--c-mute); }
ol.how li { margin: var(--s-1) 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* M3: IMDb picker + file button. The <label> row is the tap target (>= 48px); the checkbox sits inside it. */
.file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.filebtn { display: flex; align-items: center; justify-content: center; }
.file:focus-visible + .filebtn, .filebtn:focus-within { outline: 3px solid var(--c-focus); outline-offset: 2px; }
/* r25 fix (a): the source card is the picker (label around its input) */
label.src { position: relative; cursor: pointer; min-height: var(--tap); }
label.src:hover { background: var(--c-surface); }
label.src:focus-within { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.src-t { display: block; min-width: 0; }
.src-t .mute { display: block; }
.src-cta { display: inline-flex; align-items: center; gap: var(--s-2); margin-top: var(--s-2); font-weight: 600; color: var(--c-acc-ink); }
.lb-which { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); padding: var(--s-2) 0 var(--s-3); border-bottom: 1px solid var(--c-line); }
.lb-which label { flex-basis: 100%; font-weight: 600; }
.lb-which select { flex: 1; min-width: 0; min-height: var(--tap); padding: 0 var(--s-3); border-radius: var(--r-md); border: 1px solid var(--c-line); background: var(--c-surface); font-size: var(--f-md); }
.btn.danger { background: var(--c-fork); border-color: var(--c-fork); color: var(--c-on-acc); }
.zero-hi.on-top { margin-bottom: var(--s-4); }
.badge.mine { display: inline-flex; align-items: baseline; justify-content: center; gap: 4px; }
.badge-l { font-size: var(--f-sm); font-weight: 600; opacity: .85; }
/* r26: "For both of you" (bridge picks) and the shared taste words */
.both { margin-bottom: var(--s-4); }
.both .lean { font-size: var(--f-sm); color: var(--c-mute); margin-top: var(--s-1); }
.both .lean.both { color: var(--c-teal); font-weight: 600; }
.taste-words { margin: var(--s-3) 0 var(--s-4); }
.tw-h { font-weight: 600; margin-bottom: var(--s-2); }
.tw-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.tw-chip { display: inline-flex; align-items: center; padding: var(--s-1) var(--s-3); border-radius: 999px; background: var(--c-teal-soft); color: var(--c-teal); border: 1px solid var(--c-teal); font-weight: 600; font-size: var(--f-sm); }
.tw-src { font-size: var(--f-sm); margin-top: var(--s-2); }
/* r27: F4 cross-domain offer on a locked card */
.cross-offer { margin-top: var(--s-3); }
.picks { margin: var(--s-2) 0 var(--s-3); }
.pick { display: flex; align-items: center; gap: var(--s-3); min-height: 56px; padding: var(--s-1) 0; border-bottom: 1px solid var(--c-line); cursor: pointer; }
.pick input { width: 24px; height: 24px; flex: none; accent-color: var(--c-acc); }
.pick-t { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.pick-t .mute { display: block; }
.pick.off { opacity: .7; cursor: default; }
/* r24: import sources, two slots (only IMDb this round); the privacy line with a lock */
.sources { display: grid; grid-template-columns: 1fr; gap: var(--s-3); }
.src { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4); border-radius: var(--r-lg); border: 2px solid var(--c-acc); background: var(--c-acc-soft); }
.src .ic { color: var(--c-acc-ink); }
.src strong { display: block; font-size: var(--f-lg); color: var(--c-acc-ink); }
.privacy { display: flex; align-items: center; gap: var(--s-2); margin: var(--s-3) 0 0; font-size: var(--f-sm); color: var(--c-mute); }

/* r24: poster blocks (Recommend picks, import rows): the title's initial on a soft colour */
.poster { width: 44px; height: 56px; border-radius: var(--r-sm); display: grid; place-items: center; font-weight: 800; color: var(--c-fg); flex: none; }
.poster.sm { width: 32px; height: 40px; }
.poster.h0 { background: var(--p0); } .poster.h1 { background: var(--p1); } .poster.h2 { background: var(--p2); }
.poster.h3 { background: var(--p3); } .poster.h4 { background: var(--p4); } .poster.h5 { background: var(--p5); }
.pick-row { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) 0; border-bottom: 1px solid var(--c-line); }
.pick-row .pick-main { flex: 1; min-width: 0; }
.pick-row .pick-title { font-weight: 700; }
.why { display: flex; flex-wrap: wrap; gap: var(--s-1); align-items: center; margin-top: 2px; }
.why .tag { display: inline-flex; align-items: center; gap: 2px; font-size: var(--f-sm); padding: 0 var(--s-2); border-radius: var(--r-pill); background: var(--c-teal-soft); color: var(--c-teal); border: 1px solid var(--c-line-teal); }
.why .lead-in { font-size: var(--f-sm); color: var(--c-mute); }
.rec-send { margin-top: var(--s-3); }

/* M8: name hint above the draft (ruling M7-4) */
.name-hint { display: grid; gap: var(--s-2); margin: var(--s-3) 0; }
.name-hint label { color: var(--c-fg); }

/* M7 a11y helpers */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
h2.as-h3 { font-size: var(--f-sm); text-transform: uppercase; letter-spacing: .6px; color: var(--c-mute); margin: var(--s-4) 0 var(--s-1); font-weight: 700; }

/* M7 P3: desktop. Below 960px nothing changes (the phone layout is the design). From 960px: tabs move into the header bar,
   content sits in a centred 720px column (r50: Compare and the agent too; they no longer use a wide grid). */
@media (min-width: 960px) {
  body { padding-bottom: 0; }
  .top { min-height: 64px; padding: 0 max(var(--s-5), calc((100vw - 1040px) / 2)); }
  .who { max-width: 22vw; }
  .tabs { top: 0; bottom: auto; left: 50%; right: auto; transform: translateX(-50%); width: min(560px, 46vw); background: none; border-top: 0; padding-bottom: 0; }
  .tabs button { min-height: 64px; flex-direction: row; gap: var(--s-2); font-size: var(--f-md); }
  .tabs button.on { box-shadow: inset 0 -3px 0 var(--c-acc); }
  main { max-width: 720px; padding: var(--s-5); }
  .sources { grid-template-columns: 1fr 1fr; }
  .sheet-bg { align-items: center; }
  .sheet { border-radius: var(--r-lg); }
}

/* M9 P1-d: toast in the header; the header grows if the text wraps, the page moves down instead of being covered */
.top .toast.show { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; overflow-wrap: anywhere; min-width: 0; flex: 0 1 60%; text-align: right; color: var(--c-fg); font-size: var(--f-sm); font-weight: 600; }
.top:has(.toast.show) .who { display: none; }
.zero { font-weight: 600; color: var(--c-fork); margin: var(--s-2) 0; }
/* R-fix2 B1: a locked domain card weighs less than an available result (smaller number, no fill); text keeps its contrast */
.card.locked { background: transparent; border-style: dashed; padding: var(--s-3) var(--s-4); box-shadow: none; }
.card.locked .hero .num { font-size: 28px; }
/* R-fix2 A2 / r24: both direction indexes as two bars when they differ a lot */
.dirs { display: grid; gap: var(--s-2); margin: var(--s-3) 0; }
.dir { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--s-2); align-items: center; font-size: var(--f-sm); }
.dir b { font-size: var(--f-md); }
.dir .bar { grid-column: 1 / -1; }
.dir.them .bar > i { background: var(--c-teal); }
.dirs p { margin: 0; }
/* R-fix2 C: the recipient's answer buttons */
.answers { display: flex; gap: var(--s-1); flex-wrap: wrap; justify-content: flex-end; }
.answers .btn[aria-pressed=true] { background: var(--c-acc); color: var(--c-on-acc); border-color: var(--c-acc); font-weight: 700; }
.invite-landing h2 { margin-top: 0; }
.sent { font-weight: 700; color: var(--c-ok); }
.msg { white-space: pre-line; }
.steps { margin: var(--s-2) 0 0; padding-left: var(--s-5); color: var(--c-mute); font-size: var(--f-sm); }
.steps code { color: var(--c-fg); }
/* r28: agent timeline and mood line */
.timeline { list-style: none; padding-left: 0; border-left: 2px solid var(--c-line); margin-left: var(--s-2); }
.timeline li { position: relative; padding: 0 0 var(--s-2) var(--s-4); display: flex; flex-wrap: wrap; gap: 0 var(--s-2); overflow-wrap: anywhere; }
.timeline li::before { content: ''; position: absolute; left: -6px; top: 0.45em; width: 10px; height: 10px; border-radius: 50%; background: var(--c-fg); }
.timeline .tl-feature { font-weight: 600; color: var(--c-fg); }
.timeline .tl-text { flex-basis: 100%; }
.timeline .tl-text code { font-size: 0.75em; color: var(--c-mute); }
.tl-why { margin: var(--s-2) 0; font-weight: 600; }
.mood label { display: block; font-weight: 600; margin-bottom: var(--s-1, 4px); }
.mood input { width: 100%; box-sizing: border-box; min-height: var(--tap); }
.mood-tag { font-weight: 600; }
/* r29: mood candidate chips and the per-pick explainability chart */
.mood-chips { margin: 0 0 var(--s-3); }
.mood-chips .chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); }
.why-chart { margin-top: var(--s-2); font-size: var(--f-sm); }
.why-chart summary { cursor: pointer; min-height: var(--tap); display: flex; align-items: center; color: var(--c-acc-ink); font-weight: 600; }
.why-chart ul { list-style: none; padding: 0; margin: var(--s-2) 0 0; }
.why-chart li { display: grid; grid-template-columns: minmax(0, 1fr) 2.75rem; gap: 2px var(--s-2); align-items: center; padding: 4px 0; }
.why-who { grid-column: 1 / -1; overflow-wrap: break-word; }
.why-bar { display: block; height: 8px; border-radius: 4px; background: var(--c-track); overflow: hidden; }
.why-fill { display: block; height: 100%; background: var(--c-acc); }
.why-w { text-align: right; font-variant-numeric: tabular-nums; }
.why-none { font-size: var(--f-sm); margin: var(--s-1, 4px) 0 0; }
/* r31: the mark on the bars of the works named on the card's reason line */
.why-oncard { display: inline-block; margin-left: var(--s-2); padding: 0 6px; border-radius: var(--r-pill); background: var(--c-teal-soft); color: var(--c-acc-ink); font-size: 0.85em; }
/* desktop: the tabs sit in the middle of the header; the toast shrink-wraps into the space right of them */
@media (min-width: 960px) { .top .toast.show { flex: 0 1 auto; max-width: calc((100vw - min(560px, 46vw)) / 2 - max(var(--s-5), calc((100vw - 1040px) / 2)) - var(--s-2)); } }
.name-hint .btn { color: var(--c-fg); } /* M9 (ruling M8-2) */
.notice-sm { font-size: var(--f-sm); color: var(--c-mute); display: flex; gap: var(--s-2); align-items: flex-start; margin: var(--s-3) 0 0; }

/* r33: discovery queue, one big card at a time (390 first) */
.q-progress { margin: 0 0 var(--s-2); }
.q-card { display: grid; gap: var(--s-2); }
.q-card .q-poster { width: 100%; height: auto; aspect-ratio: 2 / 3; max-height: 40vh; object-fit: contain; border-radius: var(--r-md, 12px); font-size: 3rem; }
/* no poster from Qloo (mock mode, or a missing image.url): a short initial tile, so the buttons stay on screen */
.q-card span.q-poster { aspect-ratio: auto; height: 120px; }
.q-title { margin: 0; }
.q-sub { margin: 0; color: var(--c-muted, inherit); }
.q-meta, .q-cross { margin: 0; }
.q-cross { font-weight: 700; color: var(--c-acc-ink); }
.q-platforms { display: flex; flex-wrap: wrap; gap: var(--s-1, 4px); align-items: center; }
.q-note { font-size: var(--f-sm); }
.q-keywords { display: flex; flex-wrap: wrap; gap: var(--s-1, 4px); margin: 0; }
.q-kw { padding: 2px 8px; border-radius: var(--r-pill); background: var(--c-teal-soft); color: var(--c-acc-ink); font-size: var(--f-sm); }
.q-desc { margin: 0; }
.q-because { display: flex; gap: var(--s-2); align-items: center; }
.q-because p { margin: 0; }
.q-because-art { display: flex; gap: 4px; flex: none; }
.q-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
.q-actions .btn { min-height: 48px; padding-left: 6px; padding-right: 6px; white-space: normal; }
.q-score-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-1, 4px); }
.q-score-row .btn { min-width: 48px; min-height: 48px; padding: 0; }
.q-trailer, .q-next { justify-self: start; min-height: 48px; }
.q-trailer { color: var(--c-acc-ink); text-decoration: none; }
/* r34: import first, trailer (click-to-load, >= 200x200, 16:9), where to watch, terms footer */
.q-import { display: grid; gap: var(--s-3); }
.q-trailer-box { display: grid; gap: var(--s-2); }
.q-play { position: relative; display: grid; place-items: center; gap: var(--s-2); width: 100%; min-height: 200px; aspect-ratio: 16 / 9; border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-surface); font-weight: 700; overflow: hidden; }
.q-play .q-play-art { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .5; font-size: 3rem; border-radius: 0; }
.q-play-icon, .q-play > span:last-child { position: relative; }
.q-play-icon { font-size: 2.5rem; line-height: 1; }
.q-player { display: block; width: 100%; min-width: 200px; min-height: 200px; height: auto; aspect-ratio: 16 / 9; border: 0; border-radius: var(--r-md); }
.q-watch { display: grid; gap: var(--s-2); }
.q-watch h3 { margin: 0; font-size: 1rem; }
.q-watch p { display: grid; gap: 4px; margin: 0; }
.q-watch a.btn { color: var(--c-acc-ink); text-decoration: none; justify-self: start; }
.legal-foot { margin: var(--s-5) 0 var(--s-6); text-align: center; font-size: var(--f-sm); }
.legal-foot a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--s-3); }
/* r35: the tap area is >= 48px through padding on the inline link (the negative margin keeps the text where it was), so the line height does not grow */
[data-testid=consent] a { padding: 17px 4px; margin: 0 -4px; }
/* r35: the two links inside the terms text get a >= 48px tap area the same way (padding, no taller line) */
[data-view=terms] p a { padding: 15px 4px; margin: 0 -4px; }

/* r44: the Discovery screen is black, white and grey (docs/research/design/queue-mockup-mono.html). Only the colour tokens change.
   r50: body.mono is now set on every screen (public/app.js render), so the whole site is black, white and grey. */
body.mono { --c-bg: #0e0e0f; --c-surface: #19191a; --c-surface-2: #242426; --c-line: #333335; --c-fg: #f2f2f2; --c-mute: #a1a1a6;
  --c-acc: #f2f2f2; --c-on-acc: #0e0e0f; --c-acc-ink: #f2f2f2; --c-acc-soft: #242426; --c-focus: var(--c-pop); --c-track: #333335;
  --c-teal: #f2f2f2; --c-teal-soft: #242426; --shadow: none; color-scheme: dark;
  /* r50: the same black, white and grey on every screen; colour comes only from the works' pictures */
  --c-ok: #d8d8dc; --c-fork: #c8c8cc; --c-warn-soft: #242426;
  --p0: #2e2e30; --p1: #38383a; --p2: #303032; --p3: #3a3a3d; --p4: #2a2a2c; --p5: #343436;
  --c-line-hi: #8e8e93; --c-line-acc: #3a3a3d; --c-line-warn: #3a3a3d; --c-line-warn-2: #3a3a3d; --c-line-teal: #3a3a3d; --c-line-teal-2: #8e8e93;
  --c-gauge-dim: #8e8e93; --c-scrim: rgba(0, 0, 0, .6); --c-lift: transparent; }
body.mono .top { background: #0e0e0f; border-bottom: 1px solid #333335; }
.disc { display: grid; gap: var(--s-3); }
.d-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-1); padding: var(--s-1); border-radius: var(--r-md); background: var(--c-surface); border: 1px solid var(--c-line); }
.d-tab { border: 0; border-radius: var(--r-sm); background: transparent; color: var(--c-mute); min-height: var(--tap); font-size: var(--f-sm); font-weight: 600; padding: 0 var(--s-1); }
.d-tab.on { background: var(--c-fg); color: var(--c-bg); }
.d-progress { margin: 0; font-size: var(--f-sm); text-align: right; }
.d-card { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); overflow: hidden; }
.d-art { display: block; width: 100%; aspect-ratio: 4 / 3; max-height: 40vh; object-fit: cover; background: var(--c-surface-2); }
/* r51: the card picture is whole (contain) on a dark blurred copy of itself; colour here is the picture's own */
.d-artbox { position: relative; overflow: hidden; }
.d-art-bg { position: absolute; inset: -12%; width: 124%; height: 124%; object-fit: cover; filter: blur(22px) brightness(.38); }
.d-art-fg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.d-trailer-link { font-size: var(--f-sm); color: var(--c-mute); text-decoration: underline; justify-self: start; min-height: var(--tap); display: inline-flex; align-items: center; }
.d-titlecard { display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--s-4); background: linear-gradient(160deg, #2a2a2c, #19191a); color: #d8d8dc; font-weight: 700; font-size: var(--f-lg); }
.d-body { padding: var(--s-4); display: grid; gap: var(--s-2); }
.d-tag { justify-self: start; display: inline-block; background: var(--c-fg); color: var(--c-bg); font-weight: 700; font-size: 11px; letter-spacing: .07em; border-radius: 4px; padding: 3px 8px; }
.d-title { margin: 0; font-size: var(--f-lg); line-height: 1.25; }
.d-meta { margin: 0; font-size: var(--f-sm); }
.d-chips { margin: 0; display: flex; flex-wrap: wrap; gap: var(--s-1); }
.d-chip { background: var(--c-surface-2); color: #c8c8cc; border-radius: 4px; padding: 2px 8px; font-size: 12px; }
.d-reason { margin: 0; font-size: var(--f-md); }
.d-why-btn { display: inline-flex; align-items: center; gap: 4px; background: transparent; border: 0; padding: 0; min-height: var(--tap); color: var(--c-mute); font-weight: 600; font-size: var(--f-sm); text-decoration: underline; }
.d-why-body { background: var(--c-surface-2); border-radius: var(--r-md); padding: var(--s-3); display: grid; gap: var(--s-2); }
.d-why-h { margin: 0; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--c-mute); }
.d-bar { display: grid; grid-template-columns: minmax(0, 1fr) 70px auto; gap: var(--s-2); align-items: center; font-size: var(--f-sm); }
.d-bar-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d-bar-t small { color: var(--c-mute); }
.d-bar-w { height: 6px; border-radius: 3px; background: #3a3a3d; overflow: hidden; display: block; }
.d-bar-w i { display: block; height: 6px; background: var(--c-fg); }
.d-bar-n { color: var(--c-mute); font-variant-numeric: tabular-nums; }
.d-note { margin: 0; font-size: 12px; }
.d-actions { display: grid; gap: var(--s-2); margin-top: var(--s-2); }
.d-actions .btn.primary { background: var(--c-fg); color: var(--c-bg); border-color: var(--c-fg); }
.d-actions-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
.d-actions-row .btn { white-space: nowrap; font-size: 12px; padding-left: 4px; padding-right: 4px; min-width: 0; }
.d-actions .btn { overflow-wrap: normal; word-break: normal; }
.d-desc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: 0; }
.d-dots { display: flex; gap: 5px; justify-content: center; align-items: center; flex-wrap: wrap; }
.d-dots span { width: 7px; height: 7px; border-radius: 50%; background: #3a3a3d; }
.d-dots .done { background: #8e8e93; }
.d-dots .on { background: var(--c-fg); width: 16px; border-radius: 4px; }
.d-sample { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-md); padding: var(--s-2) var(--s-3); font-size: var(--f-sm); }
.d-cold { display: grid; gap: 2px; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-md); padding: var(--s-3); font-size: var(--f-sm); }
.d-done, .d-empty, .d-onb { display: grid; gap: var(--s-3); }
.d-done h2, .d-onb h1 { margin: 0; }
.d-sub { margin: 0; color: var(--c-mute); }
.d-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); }
.d-stat { background: var(--c-surface); border-radius: var(--r-md); padding: var(--s-3); text-align: center; color: var(--c-mute); font-size: var(--f-sm); }
.d-stat b { display: block; font-size: var(--f-lg); color: var(--c-fg); }
.d-onb-sec h2 { margin: var(--s-3) 0 var(--s-2); font-size: var(--f-md); }
.d-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: var(--s-2); }
.d-cell { position: relative; display: grid; gap: 4px; padding: 0; border: 2px solid transparent; background: transparent; border-radius: var(--r-md); text-align: left; min-height: var(--tap); }
.d-cell.on { border-color: var(--c-fg); }
.d-cover { display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: var(--r-sm); background: var(--c-surface-2); }
.d-cover.d-titlecard { font-size: 13px; padding: var(--s-2); }
.d-cell-t { font-size: 12px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.d-check { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%; background: var(--c-fg); color: var(--c-bg); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; }
.d-onb-actions, .d-onb-more { display: grid; gap: var(--s-2); }
.d-how { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-md); padding: var(--s-3); font-size: var(--f-sm); }
.d-how summary { cursor: pointer; font-weight: 600; display: flex; align-items: center; gap: 4px; min-height: var(--tap); }
.d-how h3 { margin: var(--s-3) 0 var(--s-1); font-size: var(--f-sm); }
.d-how ul { margin: 0; padding-left: 18px; }
.d-friends { display: grid; gap: var(--s-2); margin: var(--s-3) 0; }
.d-friend-btn { display: grid; gap: 2px; text-align: left; justify-items: start; padding: var(--s-3); }
body.mono a:not(.btn) { color: #d8d8dc; }
body.mono .q-trailer-box, body.mono .q-watch { margin-top: var(--s-2); }
/* r45: on the dark surface the pastel picture tile under the play text is dimmed, so the light text keeps its contrast (m7 axe color-contrast) */
body.mono .q-play .q-play-art { opacity: .16; }


/* ================= r52: polish =================
   Type: Instrument Serif for titles and the wordmark, DM Sans for the interface, DM Mono for figures (tabular, so scores line up).
   Scale (px): 11.5 small print, 13 notes, 16 body, 20 lead, 28-40 titles (serif), 44 the score. Colour stays black, white and grey (r50). */
/* r52b: Instrument Serif exists only in regular (and its italic): never let the browser fake a bold or an italic of any face */
html { font-synthesis: none; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, .brand, .d-title { font-family: var(--font-display); font-weight: 400; letter-spacing: .01em; line-height: .95; text-transform: uppercase; }
h1 { font-size: 30px; line-height: 1.12; }
h2 { font-size: 24px; line-height: 1.18; }
.hero .num, .d-bar-n, .d-progress, .d-meta, .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.hero .num { font-weight: 400; letter-spacing: -.02em; }
/* r52b: the small card headings stay the interface face in bold capitals; the category title on Compare is the serif at its one weight */
h2.as-h3 { font-family: var(--font-ui); }
.dom-head .dom-title { font-size: 26px; font-weight: 400; letter-spacing: -.005em; }

/* F: header - a wordmark and a round initial instead of "dot + Guest 6cb97d" */
.brand { font-size: 28px; font-weight: 400; letter-spacing: .02em; gap: 8px; }
.brand::before { content: ''; width: 20px; height: 12px; border-radius: 0; background:
  radial-gradient(circle at 6px 50%, transparent 3.4px, var(--c-fg) 3.9px 5px, transparent 5.5px),
  radial-gradient(circle at 14px 50%, transparent 3.4px, var(--c-fg) 3.9px 5px, transparent 5.5px); }
.who { width: 32px; height: 32px; max-width: none; padding: 0; border-radius: 50%; display: grid; place-items: center; overflow: visible; background: var(--c-surface-2); border: 1px solid var(--c-line); color: var(--c-fg); font-size: 13px; font-weight: 600; letter-spacing: 0; }
.who:empty { display: none; }
.tabs button.on { box-shadow: inset 0 2px 0 var(--c-pop); }
@media (min-width: 960px) { .tabs button.on { box-shadow: inset 0 -2px 0 var(--c-pop); } }

/* B: the card has layers: a lit top edge, a soft shadow, the picture flush to the edge and fading into the text */
.d-card { position: relative; background: #1a1a1c; border: 1px solid rgba(255, 255, 255, .07); border-radius: 20px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 2px rgba(0, 0, 0, .5), 0 30px 60px -30px rgba(0, 0, 0, .95); }
.d-artbox::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(26, 26, 28, 0) 50%, #1a1a1c 100%); }
.d-art-fg { z-index: 2; }
.d-titlecard { font-family: var(--font-display); font-weight: 400; font-size: 34px; line-height: .95; letter-spacing: .01em; text-transform: uppercase; }
.d-body { padding: 4px var(--s-5) var(--s-5); gap: 10px; }
.d-title { font-size: 34px; line-height: 1.05; margin: 2px 0 0; }
.d-reason { font-family: var(--font-ui); font-weight: 500; font-style: normal; font-size: 18px; line-height: 1.3; color: #e8e8ea; }

/* E: the category is small, spaced, grey text (no white pill); the year / length / rating line has one format */
.d-tag { background: none; color: var(--c-mute); padding: 0; border-radius: 0; font-size: 11.5px; font-weight: 600; letter-spacing: .16em; }
.d-meta { font-size: 12.5px; letter-spacing: .02em; color: var(--c-mute); }

/* D: one clear action, the rest quiet */
.d-actions { gap: 8px; margin-top: 4px; }
.d-actions .btn.primary { min-height: var(--tap); border-radius: var(--r-md); font-weight: 600; letter-spacing: .01em; gap: 8px; }
.d-actions-row { gap: 8px; }
/* r53 button tiers: primary (white), secondary (tinted, outlined: Seen / Not for me / Next with an icon above the label), text (Why this?, Details, trailer) */
.d-actions-row .btn { flex-direction: column; gap: 3px; min-height: 52px; padding: 6px 4px; border-radius: var(--r-md); border-color: rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .05); color: #d8d8dc; font-weight: 500; }
.d-actions-row .btn:hover { background: rgba(255, 255, 255, .1); color: var(--c-fg); }
.btn { transition: transform .12s ease, background-color .12s ease, color .12s ease; }
.btn:active, .d-tab:active, .chip:active { transform: scale(.97); }
.d-why-btn { text-decoration: none; justify-self: start; padding: 0 10px; margin-left: -10px; min-height: var(--tap); border: 0; border-radius: var(--r-md); font-weight: 500; }
.d-why-btn:hover { color: var(--c-fg); background: rgba(255, 255, 255, .06); }
.d-chip { background: transparent; border: 1px solid rgba(255, 255, 255, .1); color: #a1a1a6; border-radius: var(--r-pill); padding: 1px 10px; font-size: 11.5px; }
.d-tab { font-weight: 500; }
.d-tab.on { font-weight: 600; }

/* G: a new card eases in (only after Next / an answer, not when something inside the card opens) */
@keyframes d-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.d-card.d-enter { animation: d-enter .2s ease-out; }
/* r53: the direction says what you did: saved = in from the right, skipped = in from the left, Next = up */
@keyframes d-enter-r { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes d-enter-l { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
.d-card.d-enter-saved { animation: d-enter-r .2s ease-out; }
.d-card.d-enter-skip { animation: d-enter-l .2s ease-out; }
.d-art-loading { background: linear-gradient(90deg, var(--c-surface-2) 0%, #2c2c2f 50%, var(--c-surface-2) 100%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
.d-art-loading > img { opacity: 0; }
.d-art-fg { transition: opacity .18s ease; }

/* H: while the screen loads there is a card-shaped placeholder, not a blank */
.skel { height: 420px; border-radius: 20px; max-width: 720px; margin: 0 auto; }

/* ================= r53: Discover fits one screen =================
   The page does not scroll while a card is on screen: header + toolbar (tabs, hint, progress) + the card, which takes the rest of the window.
   Desktop: the picture on the left in its own shape (no blur), words in the middle (scrolls inside), the four actions at the bottom of the right
   column. Phone: the picture takes what is left, the actions sit right under the reason, the rest is behind "Details". */
html { height: 100%; }
body:has(.disc .d-card) { height: 100%; overflow: hidden; display: flex; flex-direction: column; padding-bottom: 0; }
body:has(.disc .d-card) > .top { flex: none; }
body:has(.disc .d-card) main { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; flex-direction: column; overflow-y: auto; padding-top: 8px; padding-bottom: calc(60px + env(safe-area-inset-bottom) + 8px); }
body:has(.disc .d-card) .disc { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 8px; }

.d-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; }
.d-toolbar > .d-tabs { grid-column: 1 / -1; }
.d-toolbar > .d-sample, .d-toolbar > .d-cold { grid-column: 1; min-width: 0; }
.d-toolbar > .d-progress { grid-column: 2; grid-row: 2; }
.d-progress { margin: 0; font-size: 12px; color: var(--c-mute); white-space: nowrap; text-align: right; }
.d-sample { display: flex; gap: 8px; align-items: center; min-height: var(--tap); padding: 0; border: 0; background: none; border-radius: 0; font-size: 12.5px; color: var(--c-mute); }
.d-sample > span:not(.d-tag) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 0 1 auto; }
.d-sample .btn { min-height: var(--tap); padding: 0 12px; font-size: 12.5px; flex: none; margin-left: auto; background: none; border-color: transparent; color: var(--c-fg); }
.d-sample .d-tag { flex: none; }
.d-cold { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 0; border: 0; background: none; border-radius: 0; font-size: 12.5px; color: var(--c-mute); }
.d-cold strong { color: var(--c-fg); font-weight: 600; white-space: nowrap; }
.d-cold > span:not(.d-pips) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d-cold small { display: none; }
.d-pips { display: inline-flex; gap: 4px; flex: none; }
/* r55d: the small link in the cold banner; the row can wrap, the tap box is 48 px high */
.d-cold { flex-wrap: wrap; row-gap: 0; }
.d-cold-sample { flex: none; min-height: var(--tap); padding: 0 4px; border: 0; background: none; color: var(--c-fg); font: inherit; font-size: 12.5px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; margin-left: auto; }
.d-cold-sample:hover { text-decoration-thickness: 2px; }
.d-pips i { width: 6px; height: 6px; border-radius: 50%; background: #3a3a3d; }
.d-pips i.on { background: var(--c-fg); }

/* the progress strip is the top edge of the card */
.d-dots { position: absolute; top: 0; left: 0; right: 0; z-index: 3; gap: 3px; flex-wrap: nowrap; padding: 0; }
.d-dots span, .d-dots .on { flex: 1 1 0; width: auto; height: 3px; border-radius: 0; background: rgba(255, 255, 255, .16); }
.d-dots .done { background: rgba(255, 255, 255, .5); }
.d-dots .on { background: var(--c-fg); }

.disc .d-card { display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; }
.disc .d-card > .d-art { flex: 1 1 0; min-height: 120px; aspect-ratio: auto; }
.disc .d-card > .d-body { flex: none; padding: 12px 16px 12px; gap: 8px; display: flex; flex-direction: column; min-height: 0; }
.d-head { display: grid; gap: 3px; }
.d-title { font-size: 44px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.d-reason { font-size: 17px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.d-actions { order: 2; }
.d-more { order: 3; }
.d-more-toggle { display: flex; align-items: center; gap: 6px; min-height: var(--tap); padding: 0 10px; margin-left: -10px; border: 0; border-radius: var(--r-md); background: none; color: var(--c-mute); font-weight: 500; font-size: var(--f-sm); }
.d-more-toggle .ic { transition: transform .15s ease; }
.d-more-open .d-more-toggle .ic { transform: rotate(180deg); }
.d-more-body { display: none; }
.d-more-open .d-more-body { display: grid; gap: 10px; }
/* r55d: only on a phone (Details is a phone control); a desktop window that was a phone window keeps moreOpen = true and must not shrink the card */
@media (max-width: 959.98px) {
  .d-card.d-more-open { flex: none; }
  .d-card.d-more-open > .d-art { flex: none; height: 32vh; min-height: 0; }
}
.d-trailer-link { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--c-mute); font-weight: 500; min-height: var(--tap); padding: 0 10px; margin-left: -10px; border-radius: var(--r-md); }
.d-trailer-link:hover { color: var(--c-fg); background: rgba(255, 255, 255, .06); }
body.mono .q-watch h3, .q-watch h3 { font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: .12em; color: var(--c-mute); margin: var(--s-2) 0 var(--s-1); }

@media (min-width: 960px) {
  main:has(.disc) { max-width: 1120px; }
  body:has(.disc .d-card) main { overflow: hidden; padding: 12px var(--s-5) 16px; }
  .d-toolbar { display: flex; align-items: center; gap: 16px; height: var(--tap); }
  .d-toolbar > .d-tabs { flex: none; width: 400px; }
  .d-toolbar > .d-sample, .d-toolbar > .d-cold { flex: 1 1 auto; }
  .d-toolbar > .d-progress { margin-left: auto; }
  .disc .d-card { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); container-type: size; }
  .disc .d-card > .d-art { flex: none; min-height: 0; height: 100%; width: min(calc(100cqh * var(--arn, .667)), 56cqw); background: var(--c-surface-2); }
  .d-art-bg, .d-artbox::before { display: none; }
  .disc .d-card > .d-body { padding: 28px 32px 24px; }
  .d-title { font-size: 64px; }
  .d-reason { font-size: 18px; }
  .d-more { order: 2; flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 4px -8px 0; padding: 0 8px; }
  .d-more-toggle { display: none; }
  .d-more-body { display: grid; gap: 10px; align-content: start; }
  .d-actions { order: 3; margin-top: auto; padding-top: 12px; }
}

.d-card[data-domain=music] .d-art { --arn: 1; }

/* r53: fixes after the first look */
.d-tab { display: flex; align-items: center; justify-content: center; gap: 6px; }
.d-sample { flex-wrap: nowrap; }
.d-sample .d-tag { display: none; }
body:has(.disc .d-card) .legal-foot { display: none; } /* the Terms link is inside "Details" / the scrolling area while a card is on screen */
.d-terms { color: var(--c-mute); font-size: var(--f-sm); min-height: var(--tap); display: inline-flex; align-items: center; text-decoration: none; }
.d-terms:hover { color: var(--c-fg); }
@media (min-width: 960px) {
  .d-sample .d-tag { display: inline-block; }
  .disc .d-card > .d-art { max-height: none; }
}

/* r53: the agent's steps read as plain steps; function names and the planner are in the Technical trace */
.steps .tl-fn, .steps .tl-raw { display: none; }
[data-testid=agent-steps]:has(.tl-tech[open]) .steps .tl-fn, [data-testid=agent-steps]:has(.tl-tech[open]) .steps .tl-raw { display: inline; }
.tl-tech { margin-top: var(--s-2); }
.tl-tech > summary { display: flex; align-items: center; gap: 6px; min-height: var(--tap); color: var(--c-mute); font-size: var(--f-sm); font-weight: 500; cursor: pointer; list-style: none; }
.tl-tech > summary::-webkit-details-marker { display: none; }
.tl-tech[open] > summary .ic { transform: rotate(180deg); }
.d-more-body { scrollbar-width: thin; }
@media (min-width: 960px) { .d-more { -webkit-mask-image: linear-gradient(#000 calc(100% - 24px), transparent); mask-image: linear-gradient(#000 calc(100% - 24px), transparent); padding-bottom: 20px; } }

/* r53b: landscape pictures, pictures-less cards, a quiet disclosure, Terms in the toolbar */
.d-how:not([open]) { padding-top: 0; padding-bottom: 0; }
.d-terms-bar { display: none; }
.d-terms-card { display: inline-flex; }
.d-why-cold { margin: 0; font-size: var(--f-sm); line-height: 1.45; max-width: 46ch; }
.d-titlecard { --tc-bg: repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 28px), repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 28px), linear-gradient(var(--tc-angle, 160deg), hsl(0 0% var(--tc-l, 18%)), hsl(0 0% calc(var(--tc-l, 18%) - 7%))); background: var(--tc-bg); }
.q-play-icon .ic { width: 40px; height: 40px; }
@media (min-width: 960px) {
  .d-terms-bar { display: inline-flex; align-items: center; min-height: var(--tap); font-size: 12px; color: var(--c-mute); text-decoration: none; }
  .d-terms-bar:hover { color: var(--c-fg); }
  .d-terms-card { display: none; }
  .d-toolbar > .d-terms-bar { margin-left: 4px; }
  /* a wide picture: whole, on a blurred darkened copy of itself (as on a phone); a tall poster keeps the plain column */
  .d-artbox[data-shape=wide] .d-art-bg { display: block; }
  /* no picture: a narrow square title card, centred in the left column */
  .disc .d-card > .d-art.d-titlecard { width: min(40cqw, calc(100cqh - 48px)); height: auto; aspect-ratio: 1; align-self: center; margin: 0 0 0 24px; background: var(--tc-bg); border-radius: var(--r-md); font-size: 44px; line-height: 1.05; padding: var(--s-5); }
}


/* ================= r54: "Poster Night" =================
   Bold narrow capitals (Anton) over the work's own picture, black and white and grey with ONE accent (--c-pop, lime).
   The accent is used in six places only: the main action, the current tab line, the progress strip, the small line above the title,
   the focus ring, the Friends gauge; plus the 4 px bar under a name on a picture-less card. */
.d-actions .btn.primary { background: var(--c-pop); color: var(--c-on-pop); border-color: var(--c-pop); }
.d-actions .btn.primary:hover { background: var(--c-pop); filter: brightness(1.06); }
.d-dots .done, .d-dots .on { background: var(--c-pop); }
.d-dots .done { opacity: .45; }
.d-tag { color: var(--c-pop); font-family: var(--font-mono); font-weight: 400; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; }
body.mono .gauge-val { stroke: var(--c-pop); }
.d-art.d-titlecard span::after { content: ''; display: block; width: 48px; height: 4px; background: var(--c-pop); margin: 14px auto 0; }
.d-title[data-len=mid] { font-size: 36px; }
.d-title[data-len=long] { font-size: 28px; }
.d-card-bg { display: none; }
.d-sample .d-tag { color: var(--c-mute); } /* the sample bar's label is not the card's small line */

/* a phone / tablet: the title and the first line of the reason sit ON the bottom edge of the picture, on a dark gradient; the actions and Details are below it */
@media (max-width: 959.98px) {
  .disc .d-card { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto auto; }
  .disc .d-card > .d-art { grid-row: 1; grid-column: 1; flex: none; min-height: 160px; max-height: none; aspect-ratio: auto; height: auto; align-self: stretch; }
  .d-why-cold { display: none; }
  .disc .d-card > .d-body { display: contents; }
  .disc .d-card .d-head { grid-row: 1; grid-column: 1; align-self: end; position: relative; z-index: 3; padding: 0 16px 12px; text-shadow: 0 1px 10px rgba(0, 0, 0, .7); min-width: 0; }
  .disc .d-card .d-actions { grid-row: 2; grid-column: 1; padding: 12px 16px 0; }
  .disc .d-card .d-more { grid-row: 3; grid-column: 1; padding: 0 16px 4px; }
  .d-reason { -webkit-line-clamp: 1; }
  .d-artbox::before { top: auto; bottom: 0; height: 62%; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .6) 35%, rgba(0, 0, 0, .88) 70%, rgba(0, 0, 0, .9) 100%); z-index: 2; }
  .d-art-fg { z-index: 1; }
  /* no picture: the same dark ramp on the grey card; the name is the title that sits on it */
  .d-art.d-titlecard { position: relative; overflow: hidden; }
  .d-art.d-titlecard::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 62%; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .6) 35%, rgba(0, 0, 0, .88) 70%, rgba(0, 0, 0, .9) 100%); z-index: 2; }
  .d-art.d-titlecard span { display: block; position: absolute; z-index: 1; top: 6px; left: 12px; right: -14px; bottom: 38%; overflow: hidden; text-align: left; font-size: 112px; line-height: .88; letter-spacing: 0; color: hsl(0 0% calc(var(--tc-l, 18%) + 9%)); pointer-events: none; word-break: normal; overflow-wrap: normal; }
  .d-art.d-titlecard[data-len=short] span { font-size: 140px; }
  .d-art.d-titlecard[data-len=long] span { font-size: 96px; }
  .d-art.d-titlecard span::after { display: none; }
  .d-card.d-more-open { grid-template-rows: 38vh auto auto; }
  .d-card.d-more-open > .d-art { height: auto; }
  /* r55g: while playing, the title block is under the player (not over the controls) */
  .disc .d-card.d-playing {
    grid-template-areas: "player" "head" "actions" "more";
    grid-template-rows: auto auto auto auto;
  }
  .disc .d-card.d-playing > .d-playbox {
    grid-area: player;
    align-self: start;
    min-height: 0;
    display: grid;
    grid-template-rows: 56px minmax(0, auto);
    align-content: start;
    place-items: stretch;
    padding-top: 0;
    overflow: hidden;
  }
  .disc .d-card.d-playing > .d-playbox .d-player { grid-row: 2; align-self: start; width: 100%; }
  .disc .d-card.d-playing > .d-playbox .d-video-out,
  .disc .d-card.d-playing > .d-playbox .d-video-close { grid-row: 1; align-self: start; }
  .disc .d-card.d-playing > .d-playbox .d-video-cap { grid-row: 1; }
  .disc .d-card.d-playing .d-head { grid-area: head; align-self: start; position: relative; padding: 10px 16px 0; text-shadow: none; }
  .disc .d-card.d-playing .d-actions { grid-area: actions; }
  .disc .d-card.d-playing .d-more { grid-area: more; }
  .disc .d-card.d-playing.d-more-open { grid-template-areas: "player" "head" "actions" "more"; grid-template-rows: auto auto auto auto; }
  /* r55g-2: on a very short phone, hide the card caption while playing; the playbox source line stays visible above the player */
  @media (max-height: 760px) {
    .disc .d-card.d-playing .d-tag,
    .disc .d-card.d-playing .d-title,
    .disc .d-card.d-playing .d-meta,
    .disc .d-card.d-playing .d-reason { display: none; }
    .disc .d-card.d-playing .d-head { padding: 0; min-height: 0; }
  }
  /* r55f-2 + r55g: searched videos keep the absolute caption band inside the playbox */
  .disc .d-card.d-playing > .d-playbox:has([data-testid=video-caption]) {
    display: block;
    padding-top: 56px;
    box-sizing: border-box;
  }
}

/* a desktop: one blurred picture under the whole card, a left-to-right dark ramp under the words, thin outlines instead of solid boxes */
@media (min-width: 960px) {
  .disc .d-card { background: #0e0e0f; }
  .disc .d-card > .d-card-bg { display: block; position: absolute; inset: -10%; width: 120%; height: 120%; object-fit: cover; filter: blur(28px) brightness(.65) saturate(1.1); z-index: 0; pointer-events: none; }
  .disc .d-card::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(14, 14, 15, 0) 0%, rgba(14, 14, 15, .2) 45%, rgba(14, 14, 15, .38) 100%); }
  /* r54b: the dark is only where the words are: the title block, the details and the four actions each stand on a panel (alpha .66); everywhere else the ramp above is at most .38, so the picture shows */
  .disc .d-card .d-head, .disc .d-card .d-more-body, .disc .d-card .d-actions { background: rgba(10, 10, 11, .66); border-radius: var(--r-md); padding: 14px 16px; }
  .disc .d-card .d-more-body { align-content: start; }
  .disc .d-card > .d-art, .disc .d-card > .d-body { position: relative; z-index: 2; }
  .disc .d-card > .d-art { background: transparent; }
  .disc .d-card > .d-art.d-titlecard { background: var(--tc-bg); }
  .d-how, .d-why-body { background: transparent; border: 1px solid rgba(255, 255, 255, .14); }
  .q-watch a.btn { background: transparent; border-color: rgba(255, 255, 255, .14); }
}

@media (min-width: 960px) {
  .d-title[data-len=mid] { font-size: 48px; }
  .d-title[data-len=long] { font-size: 36px; }
}


/* ================= r55: the play capsule, the player ================= */
.d-video { position: absolute; z-index: 4; left: 12px; top: 12px; display: grid; gap: 6px; justify-items: start; max-width: min(300px, calc(100% - 24px)); pointer-events: none; }
.d-video > * { pointer-events: auto; }
.d-video-btn { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); padding: 0 18px 0 14px; border: 0; border-radius: var(--r-pill); background: rgba(255, 255, 255, .94); color: #0e0e0f; font-weight: 600; font-size: 15px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 6px 20px rgba(0, 0, 0, .45); }
.d-video-btn:hover { background: #ffffff; }
.d-video .q-note { margin: 0; padding: 6px 9px; border-radius: 10px; background: rgba(0, 0, 0, .62); color: #d8d8dc; font-size: 11px; line-height: 1.3; }
.d-video .q-note a { color: #e8e8ea; text-decoration: underline; }
/* r55b: the consent panel replaces the capsule on the first press only; the capsule is alone on the picture the rest of the time */
.d-video-ask { right: 12px; max-width: none; }
.d-consent { display: grid; gap: 8px; padding: 10px; border-radius: 14px; background: rgba(8, 8, 9, .86); box-shadow: 0 8px 28px rgba(0, 0, 0, .55); }
.d-consent .q-note { padding: 0; background: none; font-size: 12.5px; line-height: 1.4; color: #e3e3e6; }
.d-consent-btns { display: flex; gap: 8px; }
.d-consent-btns button { flex: 1 1 0; min-height: var(--tap); border-radius: var(--r-pill); border: 1px solid rgba(255, 255, 255, .45); font-weight: 600; font-size: 15px; background: transparent; color: #ffffff; }
.d-consent-btns .d-consent-play { background: rgba(255, 255, 255, .94); color: #0e0e0f; border-color: transparent; }
.d-video-out { position: absolute; top: 8px; right: calc(8px + var(--tap) + 8px); z-index: 5; min-height: var(--tap); padding: 0 14px; display: inline-flex; align-items: center; border-radius: var(--r-pill); background: rgba(0, 0, 0, .72); color: #ffffff; font-weight: 600; font-size: 14px; text-decoration: none; }
.d-video-out:hover { background: rgba(0, 0, 0, .9); }
.d-playbox { position: relative; background: #000; display: grid; place-items: center; min-height: 0; overflow: hidden; }
.d-player { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; display: block; }
.d-video-close { position: absolute; top: 8px; right: 8px; z-index: 5; width: var(--tap); height: var(--tap); min-width: var(--tap); border: 0; border-radius: 50%; background: rgba(0, 0, 0, .72); color: #ffffff; display: grid; place-items: center; }
.d-video-close:hover { background: rgba(0, 0, 0, .9); }
/* r55f: a short line in place of the capsule (looking / nothing found) and the caption of a searched video under the player */
.d-video-note { margin: 0; padding: 8px 12px; border-radius: 12px; background: rgba(0, 0, 0, .72); color: #e3e3e6; font-size: 12.5px; line-height: 1.35; }
.d-video-cap { margin: 0; padding: 6px 10px; width: 100%; box-sizing: border-box; font-size: 12px; line-height: 1.3; color: #d0d0d4; background: #000; text-align: left; }
.d-video-cap a { color: #f0f0f2; text-decoration: underline; white-space: nowrap; }
@media (max-width: 959.98px) {
  .disc .d-card > .d-playbox { grid-row: 1; grid-column: 1; min-height: 160px; align-self: stretch; align-content: start; padding-top: 56px; box-sizing: border-box; } /* r55f: the player starts under the two buttons, its caption sits right under it, above the title that is laid over the lower part of the cell */
  /* r55f-2: on a phone the source line of a searched video sits in the 56 px band above the player, left of "YouTube ↗" and the close button: one line, an ellipsis when it is long, no extra height
     (in the flow it was laid over the category word of the card). The caption's own YouTube link is the one in the band. */
  .d-video-cap { position: absolute; top: 8px; left: 12px; right: 184px; width: auto; min-height: var(--tap); padding: 0; background: none; display: flex; align-items: center; white-space: nowrap; overflow: hidden; z-index: 5; }
  .d-video-cap-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .d-video-cap-sep, .d-video-cap a { display: none; }
  /* r55g: these beat the generic .d-playbox row above when the card is playing */
  .disc .d-card.d-playing > .d-playbox { align-self: start; min-height: 0; padding-top: 0; align-content: start; }
}
@media (min-width: 960px) {
  .d-video { top: auto; bottom: 16px; left: 16px; }
  .disc .d-card.d-playing { grid-template-columns: minmax(0, 58%) minmax(0, 1fr); }
  .disc .d-card > .d-playbox { position: relative; z-index: 2; height: 100%; }
}