/* Tokens (0.9.0, "printed" palette): warm paper and ink, one accent (a faded poster red), and a custom muted tier set:
   poster red, brass, plum, slate, olive, then teal, rust, rose; the last tier is warm stone. Every tier carries the same
   paper-coloured text (0.10.2, owner). Every text/background
   pair is checked to WCAG AA (4.5:1) in both schemes (tests/test_a11y.py). Each tier has a fill, the text on that fill
   (ink), and a shade for when the tier colour itself is the text - darker in light mode, lighter in dark mode. */
:root {
  --bg: #faf7f2; --surface: #fdfbf7; --fg: #1c1a17; --faded: #6b6359; --line: #e4ddd1; --accent: #a23b2c;
  --accent-fill: #a23b2c; --on-fill: #fdfbf7; --ok: #4f6229; --danger: #8f2318; --danger-fill: #8f2318;
  --danger-tint: #f6e3df; --ink-dark: #1c1a17;
  --tp0: #a23b2c; --tp0-ink: var(--on-fill); --tp0-text: #9a3326;
  --tp1: #8c6a1e; --tp1-ink: var(--on-fill); --tp1-text: #7a560f;    /* brass (0.10.2; was a light mustard with dark text) */
  --tp2: #6e4f8f; --tp2-ink: var(--on-fill); --tp2-text: #654685;
  --tp3: #3e6b8a; --tp3-ink: var(--on-fill); --tp3-text: #375f7b;
  --tp4: #5a6e34; --tp4-ink: var(--on-fill); --tp4-text: #4f6229;    /* deep olive (0.10.2) */
  --tp5: #2f6f6a; --tp5-ink: var(--on-fill); --tp5-text: #2a625e;
  --tp6: #a35a24; --tp6-ink: var(--on-fill); --tp6-text: #8a4a1a;    /* rust (0.10.2) */
  --tp7: #9c4a66; --tp7-ink: var(--on-fill); --tp7-text: #8e425c;
  --tpl: #746b5f; --tpl-ink: var(--on-fill); --tpl-text: #655d52;    /* warm stone (0.10.2) */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px;
  --radius: 3px; --control: 36px; --text-s: 13px; --text: 15px; --text-l: 22px; --text-xl: 34px;
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;   /* film-journal type (0.8.0), see fonts/fonts.css */
  --font-body: "Instrument Sans", system-ui, -apple-system, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #171513; --surface: #201d1a; --fg: #ece6dc; --faded: #a69d90; --line: #332e29; --accent: #e8907e;
          --ok: #b5c78e; --danger: #f0a196; --danger-tint: #2c1a17;
          --tp0-text: #e8907e; --tp1-text: #e2b75c; --tp2-text: #bba3d8; --tp3-text: #92b8d3; --tp4-text: #b5c78e;
          --tp5-text: #86c2bc; --tp6-text: #e2a477; --tp7-text: #dc9db3; --tpl-text: #cfc7ba; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font: var(--text)/1.45 system-ui, -apple-system, sans-serif; }
a { color: inherit; }
h1 { font-size: var(--text-xl); margin: 0 0 var(--space-2); overflow-wrap: anywhere; }
h2 { font-size: var(--text-l); margin: var(--space-6) 0 var(--space-3); }
h2 small, .tier-label small { font-size: var(--text-s); font-weight: normal; color: var(--faded); margin-left: var(--space-2); }
h3 { font-size: var(--text); margin: 0 0 var(--space-2); }
.faded { color: var(--faded); }
.small { font-size: var(--text-s); }
[hidden] { display: none !important; }

/* Layout */
.top { background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; }  /* above pinned tiers and popped cards */
nav { max-width: 1100px; margin: 0 auto; padding: 0 var(--space-4); display: flex; gap: var(--space-4);
      align-items: center; min-height: 48px; flex-wrap: wrap; }
nav a { text-decoration: none; color: var(--faded); padding: var(--space-2) 0; }
nav a[aria-current="page"] { color: var(--fg); font-weight: 600; box-shadow: inset 0 -2px 0 var(--accent); }
nav .brand { color: var(--fg); font-weight: 700; }
nav .brand-group { display: inline-flex; align-items: center; gap: var(--space-2); margin-right: auto; }
nav .list-icon { display: inline-flex; color: var(--fg); padding: var(--space-1); border-radius: 6px; }
nav .list-icon:hover { background: var(--line); }
main { max-width: 1100px; margin: 0 auto; padding: var(--space-4); }
footer { max-width: 1100px; margin: 0 auto; padding: var(--space-6) var(--space-4); font-size: var(--text-s); }

/* Controls */
.toolbar { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-bottom: var(--space-4); }
input[type="search"], select, button, .button {
  height: var(--control); padding: 0 var(--space-3); border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: var(--fg); font: inherit; max-width: 100%;
}
input[type="search"] { flex: 1 1 200px; min-width: 0; }
button, .button { cursor: pointer; display: inline-flex; align-items: center; text-decoration: none; }
.button.primary { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--on-fill); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Chips and tier colours */
/* --tc = fill, --tc-ink = text on the fill, --tc-text = the tier colour used as text (see the tokens at the top). */
.tp-0 { --tc: var(--tp0); --tc-ink: var(--tp0-ink); --tc-text: var(--tp0-text); }
.tp-1 { --tc: var(--tp1); --tc-ink: var(--tp1-ink); --tc-text: var(--tp1-text); }
.tp-2 { --tc: var(--tp2); --tc-ink: var(--tp2-ink); --tc-text: var(--tp2-text); }
.tp-3 { --tc: var(--tp3); --tc-ink: var(--tp3-ink); --tc-text: var(--tp3-text); }
.tp-4 { --tc: var(--tp4); --tc-ink: var(--tp4-ink); --tc-text: var(--tp4-text); }
.tp-5 { --tc: var(--tp5); --tc-ink: var(--tp5-ink); --tc-text: var(--tp5-text); }
.tp-6 { --tc: var(--tp6); --tc-ink: var(--tp6-ink); --tc-text: var(--tp6-text); }
.tp-7 { --tc: var(--tp7); --tc-ink: var(--tp7-ink); --tc-text: var(--tp7-text); }
.tp-last, .tp-none { --tc: var(--tpl); --tc-ink: var(--tpl-ink); --tc-text: var(--tpl-text); }
.chip { display: inline-block; min-width: 2.2em; text-align: center; padding: 0 var(--space-2); border-radius: 999px;
        font-weight: 700; font-size: var(--text-s); line-height: 1.6; color: var(--tc-ink); background: var(--tc); }
.chip.pred { background: transparent; color: var(--tc-text); border: 1.5px solid currentColor; line-height: 1.45; }

/* Cards */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-2); }
.card { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-2);
        min-height: 84px; padding: var(--space-3); background: var(--surface); border: 1px solid var(--line);
        border-radius: var(--radius); text-decoration: none; min-width: 0; }
.card:hover { border-color: var(--faded); }
.card-title { font-weight: 600; overflow-wrap: anywhere; }
.card-meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); font-size: var(--text-s); color: var(--faded); }
.pred-line { display: inline-flex; gap: var(--space-1); align-items: center; }

/* Tier board */
.tier-row { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--space-3); padding: var(--space-3) 0;
            border-top: 1px solid var(--line); }
.tier-label { margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
              border-radius: var(--radius); color: var(--tc-ink); background: var(--tc); font-size: var(--text-xl);
              min-height: 84px; align-self: start; position: sticky; top: 56px; }
.tier-label small { color: inherit; margin: 0; }
.tier-row.empty .cards::after { content: "Nothing here"; color: var(--faded); font-size: var(--text-s); align-self: center; }
section.empty:not(.tier-row) { display: none; }
@media (max-width: 520px) {
  .tier-row { grid-template-columns: minmax(0, 1fr); }
  .tier-label { flex-direction: row; gap: var(--space-2); min-height: 0; padding: var(--space-1) var(--space-3);
                justify-content: flex-start; font-size: var(--text-l); position: static; }
  .cards { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}

/* Movie page */
.movie { max-width: 760px; }
.movie-head { display: flex; gap: var(--space-4); align-items: center; }
.movie-head > div { min-width: 0; }
.big-tier { flex: none; width: 72px; height: 72px; border-radius: var(--radius); background: var(--tc); color: var(--tc-ink);
            font-size: 32px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.trailer { position: relative; aspect-ratio: 16 / 9; margin: var(--space-4) 0; border-radius: var(--radius); overflow: hidden;
           background: #11100e; }
.trailer iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.comments, .comment { white-space: pre-wrap; overflow-wrap: anywhere; }
.comment { margin: var(--space-1) 0 0; color: var(--faded); }
ul.plain { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
ul.plain li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-width: 0; }
ul.plain li .comment { flex-basis: 100%; }
.who { font-weight: 600; min-width: 5.5em; }
.viewing { padding: var(--space-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
           margin-bottom: var(--space-2); }
li.history .who { font-weight: normal; }  /* older ratings: marked "earlier rating, not counted" in words */

/* Pick for me */
.pick { max-width: 760px; }
.pick-result { min-height: 120px; }
.pick-title { font-size: var(--text-xl); margin: var(--space-4) 0 var(--space-1); overflow-wrap: anywhere; }
.pick-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin: var(--space-4) 0 var(--space-2); }

/* Phase 3: buttons, forms and one-tap predictions */
button.primary { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--on-fill); }
button.danger { color: var(--on-fill); background: var(--danger-fill); border-color: var(--danger-fill); }
button.link, a.link { height: auto; padding: 0; border: 0; background: none; color: var(--accent); font-size: var(--text-s);
                      cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
button.link.danger { color: var(--danger); background: none; }
form.inline { display: inline; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-4) 0; }
.error { padding: var(--space-2) var(--space-3); border-radius: var(--radius); background: var(--danger-tint); color: var(--danger);
         overflow-wrap: anywhere; }

.tap { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.tap button { height: 28px; min-width: 32px; padding: 0 var(--space-1); font-size: var(--text-s); font-weight: 700;
              border-radius: 999px; color: var(--tc-text, var(--faded)); background: transparent; border: 1.5px solid var(--line);
              justify-content: center; }
.tap button:hover { border-color: var(--tc); }
.tap button[aria-pressed="true"] { background: var(--tc); border-color: var(--tc); color: var(--tc-ink); }
.tap.busy { opacity: .5; }
.tap.failed button { border-color: var(--danger); }
.card .card-title { text-decoration: none; }
.card .card-title:hover { text-decoration: underline; }
.add-prediction { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-top: var(--space-3); }
.add-prediction input { width: 10em; }

.form-page { max-width: 760px; }
.fields { display: grid; gap: var(--space-3); margin-bottom: var(--space-4); }
.fields label { display: grid; gap: var(--space-1); font-weight: 600; font-size: var(--text-s); }
input[type="text"], input[type="date"], input[type="url"], textarea {
  min-height: var(--control); padding: var(--space-1) var(--space-3); border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: var(--fg); font: inherit; width: 100%; min-width: 0;
}
textarea { resize: vertical; }
.fields label select { width: max-content; }
.watch-rows { display: grid; gap: var(--space-2); }
.watch-row { display: grid; grid-template-columns: minmax(7em, 1.2fr) 6.5em 5.5em minmax(8em, 2fr); gap: var(--space-2); }
.watch-row.head { font-size: var(--text-s); color: var(--faded); }
.watch-row select { width: 100%; }
@media (max-width: 600px) {
  .watch-row { grid-template-columns: 1fr 1fr; padding-bottom: var(--space-2); border-bottom: 1px solid var(--line); }
  .watch-row.head { display: none; }
  .watch-row input[name="viewer"], .watch-row input[name="comment"] { grid-column: 1 / -1; }
}
.viewing-head { display: flex; gap: var(--space-3); align-items: baseline; flex-wrap: wrap; }
.viewing-head h3 { margin-right: auto; }
.danger-zone { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.cell { display: block; min-width: 0; }
.cell-label { display: none; }
@media (max-width: 600px) {
  .cell-label { display: block; font-size: var(--text-s); color: var(--faded); margin-bottom: 2px; }
}
@media (max-width: 420px) {
  nav { gap: var(--space-3); font-size: var(--text-s); }
}

/* Phase 3b: posters and TMDB search results */
.card .poster { display: block; width: calc(100% + 2 * var(--space-3)); margin: calc(-1 * var(--space-3)) calc(-1 * var(--space-3)) 0;
                aspect-ratio: 2 / 3; object-fit: cover; border-radius: var(--radius) var(--radius) 0 0; background: var(--line); }
.card.has-poster { justify-content: flex-start; }
.card.has-poster .card-meta { margin-top: auto; }
.movie-poster { flex: none; width: 96px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: var(--radius); background: var(--line); }
@media (max-width: 420px) { .movie-poster { width: 72px; } .big-tier { width: 56px; height: 56px; font-size: 26px; } }
.movie-head { flex-wrap: wrap; }

.results { display: grid; gap: var(--space-2); margin-bottom: var(--space-4); }
.result { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: var(--space-3); align-items: center;
          padding: var(--space-2); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.result.current { border-color: var(--accent); }
.result .poster { width: 46px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 4px; background: var(--line); display: block; }
.result-text { min-width: 0; overflow-wrap: anywhere; }
.result-text p { margin: var(--space-1) 0 0; }
.clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.inline-label { display: flex; gap: var(--space-2); align-items: center; font-size: var(--text-s); font-weight: 600; }
details.manual { margin: var(--space-4) 0; }
details.manual summary { cursor: pointer; color: var(--accent); margin-bottom: var(--space-3); }
footer a { color: inherit; }

/* 0.3.5: review page and the "needs a check" banner */
.notice { max-width: 1100px; margin: var(--space-3) auto 0; padding: 0 var(--space-4); font-size: var(--text-s); }
.notice a { color: var(--accent); text-decoration: none; }
.notice a:hover { text-decoration: underline; }
.poster.none { display: block; width: 46px; aspect-ratio: 2 / 3; border-radius: 4px; background: var(--line); }
.result.review { grid-template-columns: 46px minmax(0, 1fr); }
.result.review a { text-decoration: none; }
.review-actions { grid-column: 1 / -1; display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: flex-end; }
.review-actions form { display: contents; }
@media (min-width: 700px) {
  .result.review { grid-template-columns: 46px minmax(0, 1fr) auto; }
  .review-actions { grid-column: auto; flex-wrap: nowrap; }
}

/* 0.3.6: saved entry on the TMDB search page */
.saved { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); align-items: baseline; margin: var(--space-3) 0;
         padding: var(--space-3); border: 1px dashed var(--faded); border-radius: var(--radius); overflow-wrap: anywhere; }
.saved > .small { flex-basis: 100%; }
.same-year { color: var(--ok); font-weight: 600; }

/* Phase 4: predictions page */
.predictions { max-width: 900px; }
label.check { display: inline-flex; gap: var(--space-2); align-items: center; font-size: var(--text-s); }
.stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-2); margin: var(--space-4) 0; }
.tile { display: grid; gap: var(--space-1); padding: var(--space-3); background: var(--surface); border: 1px solid var(--line);
        border-radius: var(--radius); font-size: var(--text-s); color: var(--faded); }
.tile .big { font-size: var(--text-xl); font-weight: 800; color: var(--fg); }
.grid-wrap { overflow-x: auto; }
table.grid { border-collapse: separate; border-spacing: 3px; }
table.grid th { font-weight: normal; padding: var(--space-1); text-align: center; }
table.grid td { width: 44px; height: 36px; text-align: center; border-radius: 6px; background: var(--surface);
                border: 1px solid var(--line); font-weight: 700; font-variant-numeric: tabular-nums; }
table.grid td.hit { border-color: var(--ok); color: var(--ok); }
table.grid td.zero { color: var(--faded); font-weight: normal; }
.two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-4); }
.surprise { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: var(--space-2); align-items: center;
            text-decoration: none; width: 100%; }
.surprise .poster, .surprise .poster.none { width: 30px; }
.surprise-title { overflow-wrap: anywhere; }
.surprise-tiers { white-space: nowrap; }
ul.surprises li { display: block; }
@media (max-width: 420px) { nav { gap: var(--space-2); } }
@media (max-width: 400px) { nav.in-list .brand { display: none; } nav.in-list { justify-content: space-between; } }

/* 0.6.0: several lists (home page, crumbs, list form) */
.crumbs { max-width: 1100px; margin: var(--space-3) auto 0; padding: 0 var(--space-4); font-size: var(--text-s);
          color: var(--faded); display: flex; gap: var(--space-2); align-items: baseline; flex-wrap: wrap; }
.crumbs a { color: inherit; text-decoration: none; }
.crumbs a:hover { color: var(--fg); text-decoration: underline; }
.crumbs .crumb-settings { margin-left: auto; color: var(--accent); }
.lists { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-3); }
.list-card { display: grid; gap: var(--space-3); align-content: start; padding: var(--space-4); background: var(--surface);
             border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; min-width: 0; }
.list-card:hover { border-color: var(--faded); }
.list-card h2 { margin: 0; overflow-wrap: anywhere; }
.list-card-head { display: grid; gap: var(--space-1); }
.list-best { display: flex; gap: var(--space-2); flex-wrap: wrap; min-height: 72px; align-items: flex-start; }
.mini { position: relative; width: 48px; display: block; }
.mini img { width: 48px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 4px; display: block; background: var(--line); }
.mini .chip { position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); min-width: 0; font-size: 11px; }
.mini:not(.has-poster) { width: auto; max-width: 100%; display: inline-flex; gap: var(--space-1); align-items: center;
                         padding: var(--space-1) var(--space-2); border: 1px solid var(--line); border-radius: 999px; }
.mini:not(.has-poster) .chip { position: static; transform: none; }
.mini-title { font-size: var(--text-s); overflow-wrap: anywhere; }
.list-counts { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); color: var(--faded); }
.list-counts strong { color: var(--fg); }
.list-card.new { justify-items: center; text-align: center; align-content: center; border-style: dashed; min-height: 180px; }
.list-card.new .plus { font-size: 40px; line-height: 1; color: var(--accent); }
fieldset.choices { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-3); margin: 0;
                   display: grid; gap: var(--space-2); }
fieldset.choices legend { font-weight: 600; font-size: var(--text-s); padding: 0 var(--space-1); }
label.choice { display: flex; gap: var(--space-2); align-items: center; font-weight: normal; font-size: var(--text); }
.word-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-2); }
.fields > p { margin: calc(-1 * var(--space-2)) 0 0; }

/* 0.7.0: Jellyfin (in-library mark, suggestions) */
.lib-mark { color: var(--ok); font-weight: 600; white-space: nowrap; }
details.library-suggestions { margin: var(--space-6) 0 0; padding-top: var(--space-4); border-top: 1px solid var(--line); }
details.library-suggestions summary { cursor: pointer; font-weight: 600; margin-bottom: var(--space-3); }
details.library-suggestions li .who { min-width: 0; overflow-wrap: anywhere; }

/* 0.7.2: watchlist folding sections and order picker */
details.fold { margin-top: var(--space-4); }
details.fold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--space-2); }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::before { content: "▸"; color: var(--faded); transition: transform .15s; display: inline-block; }
details.fold[open] > summary::before { transform: rotate(90deg); }
details.fold > summary h2 { margin: var(--space-2) 0; }
details.fold.empty { display: none; }
.order-bar { margin-bottom: var(--space-2); }

/* 0.7.3: list icons */
.icon { display: block; flex: none; }
.list-card h2 { display: flex; align-items: center; gap: var(--space-2); }
.list-card-icon { color: var(--accent); display: inline-flex; }
.icon-grid { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.icon-choice { display: grid; justify-items: center; gap: var(--space-1); width: 72px; padding: var(--space-2);
               border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; font-weight: normal; }
.icon-choice input { position: absolute; opacity: 0; pointer-events: none; }
.icon-choice:has(input:checked) { border-color: var(--accent); color: var(--accent); background: var(--surface); }
.icon-choice:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 0.7.4: TMDB description */
.overview { margin: var(--space-3) 0; max-width: 70ch; line-height: 1.55; overflow-wrap: anywhere; }

/* 0.7.6: accessibility (scan 2026-10-29) */
.skip { position: absolute; left: var(--space-2); top: -60px; z-index: 10; padding: var(--space-2) var(--space-3);
        background: var(--accent-fill); color: var(--on-fill); border-radius: var(--radius); }
.skip:focus { top: var(--space-2); }
main:focus { outline: none; }
.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; }
.tap-error { flex-basis: 100%; color: var(--danger); font-size: var(--text-s); }

/* 0.7.7: header search and the + Add button */
nav.in-list .brand-group { margin-right: 0; }
nav .nav-search { position: relative; flex: 1 1 180px; max-width: 320px; margin-right: auto; }
nav .nav-search input { width: 100%; height: 32px; }
.search-pop { position: absolute; top: calc(100% + 4px); left: 0; z-index: 20; width: min(440px, calc(100vw - 2 * var(--space-4)));
              max-height: 70vh; overflow: auto; padding: var(--space-1); background: var(--surface);
              border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 10px 28px rgba(28, 26, 23, .22); }
.search-pop > p { margin: var(--space-2); }
.search-hit { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: var(--space-3); align-items: center;
              padding: var(--space-2); border-radius: 6px; color: var(--fg); text-decoration: none; }
.search-hit:hover, .search-hit:focus-visible { background: var(--line); }
.search-hit .poster, .search-hit .poster.none { width: 34px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 4px; }
.search-text { min-width: 0; display: grid; overflow-wrap: anywhere; }
nav .search-pop a { color: var(--fg); padding: var(--space-2); }
nav .search-pop a.search-all { display: block; color: var(--accent); }
.search-results .search-hit { background: var(--surface); border: 1px solid var(--line); }
nav a.nav-add { background: var(--accent-fill); color: var(--on-fill); font-weight: 600; padding: var(--space-1) var(--space-3);
                border-radius: 999px; line-height: 1.6; }
nav a.nav-add:hover { filter: brightness(1.1); }
nav a.nav-add[aria-current="page"] { box-shadow: inset 0 0 0 2px var(--fg); color: var(--on-fill); }
@media (max-width: 700px) {
  nav .nav-search { order: 10; flex: 1 1 calc(100% - 110px); min-width: 0; max-width: none; margin: 0 0 var(--space-2); }
  nav a.nav-add { order: 11; margin-bottom: var(--space-2); }   /* phones: row 1 = links, row 2 = search + Add */
}

/* ===== 0.8.0: film-journal typography (owner's design, 2026-10-29) =====
   Fraunces (serif, display) for titles, tiers, the synopsis and quotes; Instrument Sans for everything else.
   Fonts are served from /static/fonts (fonts.css). Greys use --faded so contrast holds in both colour schemes. */

/* ---------- Base ---------- */
body { font-family: var(--font-body); font-size: var(--text); font-weight: 400; line-height: 1.5; font-optical-sizing: auto; }
input, select, button, textarea { font: inherit; }

/* ---------- Headings ---------- */
h1 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 500; line-height: 1.05; letter-spacing: -0.02em; }
h2 { font-family: var(--font-display); font-size: var(--text-l); font-weight: 500; line-height: 1.15; letter-spacing: -0.01em; }
h2 small { font-family: var(--font-body); font-size: var(--text-s); font-weight: 400; letter-spacing: 0; color: var(--faded);
           margin-left: 0.35em; }
h3 { font-family: var(--font-display); font-size: 17px; font-weight: 400; font-style: italic; line-height: 1.3; }  /* History dates read like journal entries */
.pick-title { font-family: var(--font-display); font-size: 40px; font-weight: 500; line-height: 1.05; letter-spacing: -0.02em; }

/* ---------- Tier display ---------- */
.tier-label { font-family: var(--font-display); font-size: 44px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.tier-label small { color: inherit; }
.big-tier { font-family: var(--font-display); font-size: 44px; font-weight: 700; line-height: 1; }
.chip { font-family: var(--font-display); font-size: 14px; font-weight: 600; line-height: 1.2; }
.chip.pred { font-style: italic; font-weight: 500; }   /* predictions are guesses, so they lean */
.tap button { font-family: var(--font-display); font-size: 14px; font-weight: 600; }
.mini .chip { font-family: var(--font-body); font-size: 11px; font-weight: 600; font-style: normal; }  /* serif gets fussy at 11px */
.tile .big { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 500; line-height: 1; letter-spacing: -0.02em;
             font-variant-numeric: lining-nums tabular-nums; }
table.grid td { font-family: var(--font-body); font-size: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- Navigation and controls ---------- */
nav .brand { font-family: var(--font-display); font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }  /* the wordmark */
nav a { font-size: var(--text); font-weight: 400; }
nav a[aria-current="page"] { font-weight: 600; }
nav a.nav-add { font-weight: 600; }
.crumbs { font-size: var(--text-s); font-weight: 400; }
.notice { font-size: var(--text); font-weight: 400; }
.link { font-weight: 400; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.fields label, legend, .inline-label { font-size: var(--text-s); font-weight: 600; }
label.check { font-size: var(--text-s); font-weight: 400; }
label.choice { font-size: var(--text); font-weight: 400; }

/* ---------- Cards and meta ---------- */
.card-title { font-family: var(--font-display); font-size: 16px; font-weight: 500; line-height: 1.25; letter-spacing: -0.005em; }
.card-meta { font-size: var(--text-s); font-weight: 400; color: var(--faded); }
.who { font-size: var(--text-s); font-weight: 600; }
.lib-mark, .same-year { font-size: var(--text-s); font-weight: 600; }

/* ---------- Running text ---------- */
p { font-size: var(--text); line-height: 1.5; }
.overview { font-family: var(--font-display); font-size: 16px; font-weight: 400; line-height: 1.6; max-width: 65ch; }  /* synopsis as editorial copy */
.comment, .comments { font-family: var(--font-display); font-size: 16px; font-weight: 400; font-style: italic; line-height: 1.45; }  /* pull quotes */
.comment { color: var(--faded); }
.faded, .small { font-size: var(--text-s); font-weight: 400; }
footer { font-size: var(--text-s); font-weight: 400; }

/* ---------- Phones ---------- */
@media (max-width: 600px) {
  :root { --text-xl: 28px; }
  .tier-label { font-size: 32px; }
  .big-tier { font-size: 34px; }
  .pick-title { font-size: 32px; }
}
@media (max-width: 480px) {   /* owner's sheet had 380px; the 15px links pushed "+ Add" onto its own line on 390-430px phones */
  nav a { font-size: var(--text-s); }
  nav.in-list { gap: var(--space-2) var(--space-3); }
}

/* ===== 0.9.0: "printed" layout and details (owner's design brief, 2026-10-29) =====
   Fewer containers: posters and lists sit on the page, separated by rules and whitespace, not boxed. Posters are
   rectangles (no radius); everything else gets a small 3px radius; the only shadow left is the floating search menu.
   Hover states are specific to the element; all motion is off for people who ask for reduced motion. */

/* ---------- Wordmark: one handmade touch ---------- */
nav .brand { display: inline-flex; align-items: flex-start; gap: 1px; }
.wordmark-star { width: 11px; height: 11px; fill: var(--accent); transform: rotate(-8deg) translateY(1px); }

/* ---------- Posters are rectangles ---------- */
.poster, .card .poster, .movie-poster, .mini img, .result .poster, .search-hit .poster, .search-hit .poster.none,
.poster.none { border-radius: 0; }

/* ---------- Cards: no box, the poster does the work ---------- */
.card { background: none; border: 0; border-radius: 0; padding: 0; min-height: 0; gap: 6px; justify-content: flex-start; }
.card .poster { width: 100%; margin: 0; }
.card:not(.has-poster) { border-top: 2px solid var(--fg); padding-top: var(--space-2); }   /* a typed index card */
.card:hover { border-color: var(--fg); }
.card .poster { transition: transform .18s ease, box-shadow .18s ease; }
.card:hover .poster, a.card:focus-visible .poster { transform: translateY(-3px); box-shadow: 0 6px 14px rgba(28, 26, 23, .28); }
/* 0.10.8: the underline lives on the inline title text, so it follows each line's words (not the card's width), sits
   below the descenders with 2px to spare, and draws across the lines in reading order. */
.card-title .title-text { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
                          padding-bottom: 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone;
                          transition: background-size .25s ease; }
.card:hover .card-title .title-text, .card .card-title:hover .title-text,
.card .card-title:focus-visible .title-text { background-size: 100% 1px; }
.card:hover .card-title, .card .card-title:hover, .card .card-title:focus-visible { text-decoration: none; }

/* ---------- Tier board: bigger posters for better tiers ---------- */
.tier-row { gap: var(--space-4); padding: var(--space-4) 0; }
.tier-label { border-radius: 0; }
.tier-row.size-0 .cards { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.tier-row.size-1 .cards { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.tier-row.size-2 .cards { grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); }
.tier-row.size-3 .cards { grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); }
.tier-row.size-4 .cards { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
.tier-row.size-3 .card-title, .tier-row.size-4 .card-title { font-size: var(--text); }
.tier-row.empty .cards::after { content: "None yet."; font-style: italic; }
/* 0.10.3: every card in a tier is the same height. Titles stop at 2 lines (full title on hover) and each tier's rows
   all match its tallest card, so a long title no longer stretches just its own row and leaves gaps beside it. */
.tier-row .cards { grid-auto-rows: 1fr; }
.tier-row .card-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
                        overflow: hidden; padding-bottom: 3px; margin-bottom: -3px; }   /* room for the underline */
/* 0.10.4: rest the pointer on a card and it pops out a little; a title cut short shows in full on a paper slip over
   the title. The delay sits on the way in only, so passing over cards does nothing and leaving undoes it at once.
   Mouse and trackpad only. 0.10.10: every card gets the slip (it keeps the year/prediction on paper above the row
   below); only a title cut short has more to unroll. app.js sizes it and adds .is-measured. */
/* 0.10.5: the slip carries a copy of the year/prediction line under the full title; the card's own line hides
   meanwhile, so it moves down with the title instead of being covered. */
.card-title-wrap { position: relative; display: block; }
.card-full { display: none; }
@media (hover: hover) {
  .tier-row .card { position: relative; transition: transform .2s ease; }
  .tier-row .card:hover { z-index: 2; transform: scale(1.06); transition-delay: .45s; }
  /* 0.10.11: a popped card grows ~11px down and its slip reaches 6px past the year line; 8px between rows let it
     land on the poster below. 24px keeps it clear. */
  .tier-row .cards { row-gap: var(--space-6); }
  /* 0.10.6: the slip opens at the card's own height (2 title lines + meta, --closed) and unrolls to --open, so the
     rest of the title is revealed while the year/prediction slides down, in step with the card growing. app.js
     measures both heights. */
  .tier-row .card-full { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 6px;
                         position: absolute; top: -4px; left: -6px; right: -6px; padding: 4px 6px 6px;
                         height: var(--closed, auto);
                         background: var(--surface);   /* hairline + shadow: the edge shows in dark mode too */
                         box-shadow: 0 0 0 1px var(--line), 0 8px 18px rgba(0, 0, 0, .28);
                         opacity: 0; visibility: hidden; pointer-events: none;
                         transition: opacity .15s ease, visibility 0s linear .15s, height .2s ease; }
  .tier-row .card-full .card-title { display: block; -webkit-line-clamp: none; line-clamp: none; overflow: hidden; }
  .tier-row .card.is-measured:hover .card-full { opacity: 1; visibility: visible; height: var(--open, auto);
                                                transition: opacity .12s ease .45s, visibility 0s linear .45s,
                                                            height .3s cubic-bezier(.2, .7, .3, 1) .5s; }
  .tier-row .card.is-measured:hover > .card-meta { visibility: hidden; transition: visibility 0s linear .5s; }
}
@media (max-width: 520px) {
  .tier-row.size-0 .cards { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .tier-row.size-1 .cards { grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); }
  .tier-row.size-2 .cards { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
  .tier-row.size-3 .cards { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
  .tier-row.size-4 .cards { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
}

/* ---------- Chips and tap buttons: small stamps, darken on hover ---------- */
.chip, .tap button { border-radius: 2px; }
.mini:not(.has-poster) { border-radius: 2px; }
.tap button { transition: background-color .12s ease, color .12s ease; }
.tap button:hover { background: color-mix(in srgb, var(--tc) 14%, transparent); border-color: var(--tc); }
.tap button[aria-pressed="true"]:hover { background: color-mix(in srgb, var(--tc) 82%, black); }
.big-tier { border-radius: 2px; }

/* ---------- Movie page: History as a journal (dates in a narrow left column, hairlines between entries) ---------- */
.viewing { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: var(--space-4); padding: var(--space-3) 0;
           margin: 0; background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; }
.viewing:last-of-type { border-bottom: 1px solid var(--line); }
.viewing-date { margin: 2px 0 0; color: var(--faded); }
.viewing-body { min-width: 0; display: grid; gap: var(--space-2); }
.viewing-actions { display: flex; gap: var(--space-3); }
@media (max-width: 520px) { .viewing { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); } }
.trailer { border-radius: 0; }

/* ---------- Lists of results: rules, not boxes ---------- */
.result, .search-results .search-hit { background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0;
                                       padding: var(--space-3) 0; }
.result.current { border-top: 2px solid var(--accent); }
.results, .search-results { gap: 0; }
.search-results .search-hit:hover { background: none; }
.search-results .search-hit:hover strong { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Predictions: numbers under a rule, not in boxes ---------- */
.tile { background: none; border: 0; border-top: 2px solid var(--fg); border-radius: 0; padding: var(--space-3) 0 0; }
table.grid td { border-radius: 2px; }

/* ---------- Home: lists set like contents pages ---------- */
.list-card { background: none; border: 0; border-top: 3px double var(--fg); border-radius: 0; padding: var(--space-4) 0; }
.list-card:hover h2 { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.list-card.new { border: 1px dashed var(--faded); padding: var(--space-4); }
.mini img { transition: transform .18s ease; }
.list-card:hover .mini img { transform: translateY(-2px); }

/* ---------- Top bar: underlines that draw in ---------- */
nav a:not(.nav-add):not(.brand):not(.list-icon) { background: linear-gradient(var(--accent), var(--accent)) 0 100% / 0 2px no-repeat;
                                                   transition: background-size .2s ease; }
nav a:not(.nav-add):not(.brand):not(.list-icon):hover { background-size: 100% 2px; color: var(--fg); }
nav a.nav-add { border-radius: var(--radius); }
nav .list-icon { border-radius: var(--radius); }
.search-pop .search-hit { border-radius: 2px; }

/* ---------- Other boxes keep a quiet 3px ---------- */
fieldset.choices, .icon-choice, .saved, .error, .skip { border-radius: var(--radius); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
  .card:hover .poster, a.card:focus-visible .poster, .list-card:hover .mini img { transform: none; }
  .tier-row .card:hover { transform: none; }   /* the full title still shows */
}

/* ===== 0.10.0: Stats page =====
   Charts follow the dataviz rules: one ink colour for the bars (single measure; the tier chip or month label says
   which), values in text colours next to the bar, 4px rounded data ends anchored to the baseline, a recessive track,
   native hover titles, and every number also in text. */
.stats { max-width: 980px; }
.stats-section { font-size: var(--text-xl); margin: var(--space-6) 0 var(--space-3); padding-top: var(--space-3);
                 border-top: 3px double var(--fg); }
.stats-h { font-family: var(--font-display); font-style: normal; font-size: var(--text-l); font-weight: 500;
           margin: var(--space-6) 0 var(--space-3); }
.stats-h .small { font-family: var(--font-body); margin-left: var(--space-2); }
.viewer-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-3);
               border-top: 3px double var(--fg); margin-top: var(--space-6); }
.viewer-head .stats-section { border: 0; margin-bottom: 0; }

.bars { display: grid; gap: 6px; }
ul.bars li.bar-row { display: grid; grid-template-columns: 3.2em minmax(0, 1fr) 3em; align-items: center; gap: var(--space-2); }
.bar-label { display: flex; }
.bar-track { height: 14px; background: color-mix(in srgb, var(--line) 60%, transparent); }
.bar { display: block; height: 100%; background: var(--fg); border-radius: 0 4px 4px 0; min-width: 2px; }
.bar-value { font-variant-numeric: tabular-nums; text-align: right; color: var(--fg); }

.months { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2px; align-items: end; height: 170px; }
.month { display: grid; grid-template-rows: auto 1fr auto; height: 100%; text-align: center; }
.month-value { font-size: var(--text-s); color: var(--faded); font-variant-numeric: tabular-nums; min-height: 1.4em; }
.month-track { display: flex; align-items: flex-end; border-bottom: 1px solid var(--fg); }
.month-bar { display: block; width: 70%; margin: 0 auto; background: var(--fg); border-radius: 4px 4px 0 0; min-height: 0; }
.month-label { font-size: var(--text-s); color: var(--faded); padding-top: 4px; }

.plain-table { border-collapse: collapse; width: 100%; max-width: 520px; font-variant-numeric: tabular-nums; }
.plain-table th, .plain-table td { text-align: left; padding: var(--space-2) var(--space-3) var(--space-2) 0;
                                   border-bottom: 1px solid var(--line); font-weight: normal; }
.plain-table thead th { font-size: var(--text-s); color: var(--faded); border-bottom: 1px solid var(--fg); }
.plain-table tbody th { font-weight: 600; }

.ranked { display: grid; gap: 0; }
.ranked li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3);
             padding: var(--space-2) 0; border-bottom: 1px solid var(--line); }
.ranked a { font-family: var(--font-display); font-size: 16px; color: var(--fg); text-decoration: none; }
.ranked a:hover { text-decoration: underline; text-underline-offset: 3px; }
.who-tiers { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; color: var(--faded); }

.favourites { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: var(--space-3); }
.fav { position: relative; display: block; text-decoration: none; color: var(--fg); }
.fav .poster { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; display: block; transition: transform .18s ease; }
.fav:hover .poster { transform: translateY(-3px); }
.fav .chip { position: absolute; left: 6px; bottom: 6px; }
.fav-title { display: block; aspect-ratio: 2 / 3; padding: var(--space-2); border-top: 2px solid var(--fg);
             font-family: var(--font-display); }
@media (prefers-reduced-motion: reduce) { .fav:hover .poster { transform: none; } }

/* ===== 0.12.0: Stats for whoever is looking ===== */
/* Most divisive: the title on its line, the viewers' tiers beneath it (phones and desktop alike). */
.ranked.divisive li { flex-direction: column; align-items: flex-start; gap: 4px; }   /* beats ul.plain li centring */
/* Viewers (owner only): one row each, the name box with Rename, then counts and Hide / Remove; wraps on phones. */
ul.viewer-list li { justify-content: space-between; gap: var(--space-2) var(--space-4); padding: var(--space-3) 0;
                  border-bottom: 1px solid var(--line); }
.viewer-list .rename { display: flex; gap: var(--space-2); align-items: center; flex: 1 1 16em; min-width: 0; }
.viewer-list .rename input { flex: 1 1 auto; min-width: 0; max-width: 16em; }
.viewer-meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); }
.viewer-list .is-hidden .rename input, .viewer-list .is-hidden .viewer-name { color: var(--faded); }
.hidden-tag { font-style: italic; }

/* ===== 0.13.0: tier rows fold, and the tier stays in sight =====
   The label is a button: tap it to fold the row (app.js remembers it per device). It stays pinned under the header
   while its row scrolls by: a tile on the left on wide screens, a full-width bar on phones. --top-h is the header's
   real height (app.js measures it; the phone header wraps to two lines). */
.tier-label { top: var(--top-h, 56px); z-index: 2; }
.tier-label .tier-toggle { display: flex; flex-direction: inherit; align-items: inherit; justify-content: inherit;
  gap: inherit; width: 100%; min-height: inherit; height: auto; padding: inherit; margin: 0; border: 0; border-radius: 0;
  background: none; color: inherit; font: inherit; letter-spacing: inherit; text-align: inherit; }
.tier-label { padding: 0; }
.tier-label .tier-toggle:focus-visible { outline: 3px solid var(--fg); outline-offset: 2px; }
.fold-mark { font-family: var(--font-body); font-size: 14px; font-weight: 400; line-height: 1; opacity: .8;
             transition: transform .15s ease; }
.tier-row.folded .fold-mark { transform: rotate(-90deg); }
@media (min-width: 521px) { .fold-mark { display: none; } }   /* 0.13.1: the arrow is for phones; the desktop tile and its note say enough */
.tier-row { scroll-margin-top: var(--top-h, 56px); }
.tier-folded { display: none; margin: 0; align-self: center; }
.tier-row.folded .cards { display: none; }
.tier-row.folded .tier-folded { display: block; }
.tier-row.folded.empty .tier-folded { display: none; }
@media (max-width: 520px) {
  .tier-label { position: sticky; padding: 0; }
  .tier-label .tier-toggle { padding: var(--space-1) var(--space-3); }
  .fold-mark { margin-left: auto; }
  .tier-row.folded { padding-bottom: var(--space-2); }
  .tier-folded { display: none !important; }   /* on phones the folded bar says it all */
}