/* ══════════════════════════════════════════════════
   DESIGN NOTE ON FONTS
   · DM Serif Display — page heading only
   · Space Grotesk — all body, UI, labels, buttons, loglines
   · DM Mono — numbers only: year, runtime, counts
   · Noto Serif SC — Chinese characters only
   ══════════════════════════════════════════════════ */

/* ─── Tokens ─── */
:root {
  --bg:           #f7f4ef;
  --surface:      #edeae4;
  --card:         #ffffff;
  --card-hover:   #f9f7f3;
  --border:       rgba(0,0,0,0.09);
  --border-hover: rgba(0,0,0,0.20);
  --text-primary:   #1a1714;
  --text-body:      #2e2a25;
  --text-secondary: #5a5248;
  --text-muted:     #6b6560;  /* was #87807a — darkened for WCAG AA ~4.5:1 on --bg */
  --text-muted-card: #6b6560; /* same value; alias for clarity on white card surfaces */
  --text-dim:       #9e9890;  /* was #bdb8b0 — slightly darkened to keep ratio with new muted */
  --text-chinese:   #6b5c3e;
  --accent:         #7d6130;  /* was #9a7a3e — darkened for ~4.5:1 on --bg and card surfaces */
  --accent-active-text: #6b5228; /* used where accent is text colour on accent-dim bg */
  --accent-dim:     rgba(125,97,48,0.10);  /* updated to match new --accent #7d6130 */
  --europe-bg: #E6F1FB; --europe-text: #0C447C; --europe-border: rgba(24,95,165,0.22);
  --asia-bg:   #EEEDFE; --asia-text:   #3C3489; --asia-border:   rgba(83,74,183,0.22);
  --latam-bg:  #EAF3DE; --latam-text:  #27500A; --latam-border:  rgba(59,109,17,0.22);
  --africa-bg: #FAEEDA; --africa-text: #633806; --africa-border: rgba(133,79,11,0.22);
  --usca-bg:   #FAECE7; --usca-text:   #712B13; --usca-border:   rgba(153,60,29,0.22);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text-primary);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 18px;
  line-height: 1.6;
  min-height: 100vh;
  transition: background 0.25s, color 0.25s;
}

/* ─── Skip link ─── */
.skip-link {
  position: absolute; top: -50px; left: 0; background: var(--accent);
  color: var(--bg); padding: 8px 16px; z-index: 200;
  font-family: 'Space Grotesk', sans-serif; font-size: 14px;  /* was 12px — critical a11y control */
  border-radius: 0 0 4px 0; transition: top 0.15s;
}
.skip-link:focus { top: 0; }

/* ─── Header ─── */
.page-header {
  padding: 3.5rem 2rem 1rem;
  max-width: 960px;
  margin: 0 auto;
  border-bottom: 0.5px solid var(--border);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}
.page-title {
  font-size: clamp(1.9rem, 4.5vw, 3rem);
  font-family: 'DM Serif Display', Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin-bottom: 0.6rem;
}
.page-title em { font-style: normal; color: var(--accent); }
.page-subtitle {
  font-size: 16px;
  color: var(--text-secondary);
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 400;
  letter-spacing: 0.01em;
}


/* ─── Controls ─── */
.controls-wrap {
  max-width: 960px;
  margin: 0 auto;
  padding: 0.9rem 2rem 0.65rem;
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 20;
  border-bottom: 0.5px solid var(--border);
  transition: background 0.25s;
}

/* Search */
.search-row { position: relative; margin-bottom: 10px; }
.search-icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--text-muted); pointer-events: none;
  font-family: 'Space Grotesk', sans-serif; font-size: 15px;
}
.search-bar {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 10px 36px 10px 36px;
  font-size: 14px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 400;
  color: var(--text-primary);
  transition: border-color 0.2s, box-shadow 0.2s, background 0.25s;
  letter-spacing: 0.01em;
}
.search-bar:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}
.search-bar::placeholder { color: var(--text-muted); }
.search-clear {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--text-muted); cursor: pointer;
  font-size: 18px; padding: 4px 6px; display: none; line-height: 1;
}
.search-clear:hover { color: var(--text-secondary); }
.search-clear.visible { display: block; }

/* Filter rows */
.filter-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 7px;
}
.filter-label {
  font-size: 11px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  flex-shrink: 0;
  margin-right: 1px;
  min-width: 44px;
}

/* Filter buttons */
.fb {
  font-size: 12px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 400;
  padding: 4px 12px;
  border-radius: 3px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
  letter-spacing: 0.02em;
  white-space: nowrap;
  min-height: 30px;
}
.fb:hover { border-color: var(--border-hover); color: var(--text-primary); }
.fb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fb.on { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }
.fb.r-europe.on { background: var(--europe-bg); border-color: var(--europe-border); color: var(--europe-text); }
.fb.r-asia.on   { background: var(--asia-bg);   border-color: var(--asia-border);   color: var(--asia-text); }
.fb.r-latam.on  { background: var(--latam-bg);  border-color: var(--latam-border);  color: var(--latam-text); }
.fb.r-africa.on { background: var(--africa-bg); border-color: var(--africa-border); color: var(--africa-text); }
.fb.r-usca.on   { background: var(--usca-bg);   border-color: var(--usca-border);   color: var(--usca-text); }

/* Genre pills */
.genre-filter-row {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  flex-wrap: wrap;
  margin-bottom: 7px;
}
.gp {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 400;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: all 0.15s;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
/* Suppresses transition when clearing pills via × so they snap off instantly */
.gp.no-transition { transition: none !important; }
.gp:hover { border-color: var(--border-hover); color: var(--text-secondary); }
.gp:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gp.on { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }
/* Special attribute tag — woman director — slightly warmer/distinct from genre tags */
.gp.gp-special.on { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }

/* Transient ad-hoc genre pill — activated by clicking a genre inside a card.
   Always "on" (it only exists while selected). A trailing × signals that a
   click removes it. */
.gp.gp-adhoc {
  background: var(--accent-dim);
  border-color: var(--accent);
  border-style: dashed;
  color: var(--accent);
}
.gp.gp-adhoc::after {
  content: "\00d7";
  margin-left: 5px;
  opacity: 0.65;
  font-weight: 600;
}
.gp.gp-adhoc:hover { opacity: 0.85; }

/* Parent tags — slightly larger, full opacity */
.gp-parent {
  font-size: 11px;
  padding: 3px 10px;
  color: var(--text-secondary);
  min-height: 26px;
}

/* Child/standalone tags — slightly smaller, dimmer */
.gp-child {
  font-size: 11px;  /* was 10px */
  padding: 2px 9px;
  color: var(--text-muted);
  min-height: 24px;
}

/* Divider between genre groups */
.gp-divider {
  display: inline-block;
  width: 1px;
  height: 18px;
  background: var(--border);
  margin: 4px 3px 0;
  align-self: flex-start;
  flex-shrink: 0;
}

/* Runtime slider — dual range, snaps to 15-min ticks, 0 → 3h+ */
.rt-wrap { position: relative; height: 46px; width: min(100%, 360px); flex: 1; }
.rt-track { position: absolute; left: 8px; right: 8px; top: 13px; }
.rt-rail { position: absolute; left: 0; right: 0; top: -2px; height: 4px; background: var(--border); border-radius: 2px; }
.rt-fill { position: absolute; top: -2px; height: 4px; background: var(--accent); border-radius: 2px; }
.rt-ticks { position: absolute; left: 0; right: 0; top: 5px; height: 22px; }
.rt-tick { position: absolute; transform: translateX(-50%); }
.rt-tick .m { width: 1px; height: 5px; background: var(--text-dim); margin: 0 auto; }
.rt-tick.maj .m { height: 8px; background: var(--text-muted); }
.rt-tick .l {
  font-family: 'DM Mono', monospace; font-size: 11px; font-weight: 400;
  color: var(--text-muted); letter-spacing: 0.02em; margin-top: 3px; white-space: nowrap;
}
.rt-wrap input[type=range] {
  position: absolute; left: 0; top: 4px; width: 100%; height: 18px; margin: 0;
  background: transparent; -webkit-appearance: none; appearance: none; pointer-events: none;
}
.rt-wrap input[type=range]::-webkit-slider-runnable-track { height: 18px; background: transparent; }
.rt-wrap input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; height: 16px; width: 16px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--accent); cursor: pointer; pointer-events: auto;
}
.rt-wrap input[type=range]::-moz-range-track { height: 18px; background: transparent; }
.rt-wrap input[type=range]::-moz-range-thumb {
  height: 16px; width: 16px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--accent); cursor: pointer; pointer-events: auto;
}
.rt-wrap input[type=range]:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--accent); outline-offset: 2px; }
.rt-wrap input[type=range]:focus-visible::-moz-range-thumb { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Count */
.count {
  font-size: 11px;
  font-family: 'DM Mono', monospace;
  font-weight: 400;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  margin-top: 5px;
  padding-bottom: 1px;
}
.dir-dismiss {
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: 5px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--text-dim); color: var(--bg);
  border: none; cursor: pointer; font-size: 10px; line-height: 1;
  font-family: 'Space Grotesk', sans-serif; vertical-align: middle;
  transition: background 0.15s;
}
.dir-dismiss:hover { background: var(--text-muted); }

/* ─── Main ─── */
.main { max-width: 960px; margin: 0 auto; padding: 2rem 2rem 6rem; }

/* ─── Pre-rendered homepage list ───
   The build draws the default view's top films into #home-static (inside #fl)
   with the app's own card markup, so it paints before any script runs and the
   live list takes over without a visible change. The skeleton is only for
   pages without it, or for a shared link whose filters it doesn't show. */
#home-static ~ .load-screen { display: none; }
html.hash-state #home-static { display: none; }
html.hash-state #home-static ~ .load-screen { display: flex; }
h2.era-label { margin: 0; }
.home-more { margin: 4px 0 28px; text-align: center; }
.home-more-btn {
  font-family: 'Space Grotesk', sans-serif; font-size: 13px; letter-spacing: 0.02em;
  color: var(--text-secondary); background: none; cursor: pointer;
  border: 0.5px solid var(--border); border-radius: 999px; padding: 8px 16px;
}
.home-more-btn:hover { color: var(--accent); border-color: var(--accent); }
.home-more-btn[aria-busy="true"] { opacity: 0.6; cursor: progress; }

/* Until data.json is in, the homepage's controls already sit where they'll
   end up (so the pre-rendered list below them never moves) but don't respond:
   there's nothing to filter yet. The build puts .home-list on <html> when it
   ships that list, so these apply from the first byte painted. */
html.home-list body:not(.m-data-ready) #controls { pointer-events: none; }
main:has(#home-static) > .count-row { display: none; }
@media (max-width: 640px) {
  /* The phone order from the first paint — header, controls, strip, list —
     rather than after mobileSidebar() moves the strip below the controls. */
  html.home-list body { display: flex; flex-direction: column; }
  /* A flex item centred by auto margins shrinks to its content; these are
     blocks, full width up to their max-width, as they are outside flex. */
  html.home-list body > :is(.page-header, #controls, .home-strip, main, .page-footer) { width: 100%; }
  html.home-list body > .page-header { order: -2; }
  html.home-list body > #controls { order: -1; }
  /* What the bar holds once the script has moved the filters into the
     sidebar: the menu button (shown, inactive, until the data is in) and
     the search box. */
  html.home-list body:not(.m-data-ready) #controls .tbar > :not(.m-menu-btn):not(.search-row),
  html.home-list body:not(.m-data-ready) #controls > :not(.tbar) { display: none; }
  html.home-list body:not(.m-data-ready) .m-menu-btn { visibility: hidden; }
}

/* ─── Load screen ─── */
.load-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 5rem 2rem;
  gap: 1.2rem;
  text-align: center;
}
.load-screen p {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  max-width: 340px;
  line-height: 1.8;
}
.load-btn {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 10px 24px;
  border: 1px solid var(--accent);
  border-radius: 3px;
  background: var(--accent-dim);
  color: var(--accent);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.load-btn:hover { background: rgba(162,122,74,0.22); }
.load-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.load-status {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
/* ─── Skeleton placeholder cards (shown while data.json downloads + parses) ─── */
.skel-list { width: 100%; max-width: 960px; align-self: stretch; }
.skel-card {
  display: flex; gap: 1.1rem; align-items: stretch;
  border: 1px solid var(--border); border-radius: 4px;
  padding: 1.15rem 1.35rem 1.1rem; margin-bottom: 8px; background: var(--card);
}
.skel-poster { flex: 0 0 auto; width: 146px; aspect-ratio: 2 / 3; border-radius: 3px; }
.skel-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 11px; padding-top: 4px; }
.skel-line { height: 13px; border-radius: 3px; }
.skel-line.t  { height: 22px; width: 62%; margin-bottom: 6px; }
.skel-line.s  { width: 40%; }
.skel-line.a  { width: 92%; }
.skel-line.b  { width: 84%; }
.skel-line.c  { width: 55%; }
.skel-line.sp { margin-top: auto; width: 30%; height: 11px; }
.skel-poster, .skel-line {
  background: linear-gradient(100deg, var(--surface) 30%, var(--card-hover) 50%, var(--surface) 70%);
  background-size: 200% 100%; animation: skel-shimmer 1.3s ease-in-out infinite;
}
@keyframes skel-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skel-poster, .skel-line { animation: none; } }
@media (max-width: 640px) { .skel-poster { width: 92px; } .skel-card { padding: 0.9rem 1rem; } }
/* ─── Reload button (shown in header after file is loaded) ─── */
.reload-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text-muted);
  cursor: pointer;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  letter-spacing: 0.03em;
  padding: 6px 12px;
  white-space: nowrap;
  flex-shrink: 0;
  margin-bottom: 2px;
  transition: border-color 0.15s, color 0.15s;
  display: none;
}
.reload-btn:hover { border-color: var(--border-hover); color: var(--text-secondary); }
.reload-btn.visible { display: inline-block; }

/* ─── Era group ─── */
.era-group { margin-bottom: 3.5rem; scroll-margin-top: 200px; }
@keyframes era-flash {
  0%   { background: rgba(162,122,74,0.08); }
  100% { background: transparent; }
}
.era-group.flash { animation: era-flash 1s ease-out forwards; border-radius: 6px; }

.era-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 1.1rem;
}
/* In decade-sort mode, the decade header locks to the bottom of the sticky
   controls bar while the user scrolls through that section's films. The
   --controls-h custom property is set by JS and kept current on resize/render.
   Only decade headers (.dec-era-header) get this treatment; director
   headers stay static. A thin background + bottom-border make the pinned
   state readable without adding visual weight. */
.dec-era-header {
  position: sticky;
  top: var(--controls-h, 0px);
  z-index: 10;
  background: var(--bg);
  padding-top: 4px;
  padding-bottom: 4px;
  margin-bottom: 0.5rem;
  border-bottom: 0.5px solid var(--border);
  transition: background 0.25s;
  align-items: baseline;
}
.era-label {
  font-size: 11px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
.era-line { flex: 1; height: 0.5px; background: var(--border); }
.era-line-invisible { background: transparent; }
/* Decade headings ("1990s", "To 1920s", "2010–now") read as real section
   headings: large DM Serif Display, no accent, mixed case as written. */
.era-label.era-label-mixed {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: clamp(1.5rem, 3.4vw, 1.95rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-primary);
}
.era-count {
  font-size: 11px;
  font-family: 'DM Mono', monospace;
  color: var(--text-muted);
  white-space: nowrap;
  letter-spacing: 0.04em;
  line-height: 1;
}
.dec-film-count { align-self: baseline; padding: 0; }
/* "by decade" grouping switch in the era row */
.dec-tog {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; line-height: 1; color: var(--text-muted);
}
.dec-tog.on { color: var(--accent-active-text); }
.dec-tog:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
.dec-tog .dec-sw {
  width: 26px; height: 15px; border-radius: 8px; background: var(--border-hover);
  position: relative; display: inline-block; transition: background 0.15s;
}
.dec-tog .dec-sw::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 11px; height: 11px;
  border-radius: 50%; background: var(--card); transition: left 0.15s;
}
.dec-tog.on .dec-sw { background: var(--accent); }
.dec-tog.on .dec-sw::after { left: 13px; }
@media (max-width: 640px) {
  /* label, count and switch on one line; allow wrap. No Jump to decade. */
  .dec-era-header { flex-wrap: wrap; gap: 9px; }
  .dec-era-header .era-line-invisible { flex: 1 1 0; min-width: 0; }
  .dec-jump-wrap, .dec-jump-dot { display: none; }
}

/* ─── Jump-to-decade clicker (decade headers only; replaces the count) ─── */
.dec-jump-wrap { position: relative; flex-shrink: 0; }
.dec-jump {
  background: none; border: none; cursor: pointer;
  font-family: 'Space Grotesk', sans-serif; font-size: 11px; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--text-muted); white-space: nowrap;
  padding: 2px 0; transition: color 0.15s;
}
.dec-jump:hover { color: var(--accent); }
.dec-jump:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
.dec-jump .dj-car { font-size: 10px; margin-left: 5px; display: inline-block; transition: transform 0.2s; }
.dec-jump-wrap.open .dec-jump { color: var(--accent); }
.dec-jump-wrap.open .dj-car { transform: rotate(180deg); }
.dec-jump-menu {
  display: none; position: absolute; top: calc(100% + 6px); right: 0; z-index: 30;
  min-width: 132px; background: var(--bg);
  border: 0.5px solid var(--border-hover); border-radius: 6px;
  padding: 5px 4px; box-shadow: 0 8px 24px rgba(0,0,0,0.22);
}
.dec-jump-wrap.open .dec-jump-menu { display: block; }
.dec-jump-item {
  display: block; width: 100%; text-align: left;
  background: none; border: none; cursor: pointer;
  font-family: 'Space Grotesk', sans-serif; font-size: 14px;
  color: var(--text-secondary); padding: 3px 12px; line-height: 1.35;
  white-space: nowrap; transition: color 0.12s;
}
.dec-jump-item:hover { color: var(--text-primary); }
.dec-jump-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 3px; }
.dec-jump-item.current { color: var(--accent); }
.dec-jump-item.current::before { content: "\203A\00a0"; color: var(--accent); }

/* ─── Film card ─── */
.film-card {
  display: flex;
  gap: 1.1rem;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1.15rem 1.35rem 1.1rem;
  margin-bottom: 8px;
  background: var(--card);
  /* Skip layout/paint for off-screen cards; `auto` remembers each card's real
     height after first render for stable scrolling. ~280px is the initial
     estimate before a card has been measured. Falls back gracefully (renders
     normally) on browsers without content-visibility support. */
  content-visibility: auto;
  contain-intrinsic-size: auto 280px;
}
.film-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }  /* min-width:0 lets text wrap, not overflow */

/* ─── Poster thumbnail ─── */
.film-poster {
  flex: 0 0 auto;
  align-self: flex-start;
  width: 146px;
  aspect-ratio: 2 / 3;
  border-radius: 3px;
  overflow: hidden;
  background: var(--accent-dim);
  border: 1px solid var(--border);
}
.film-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.film-poster.is-empty {
  display: flex; align-items: center; justify-content: center;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.1rem; font-style: normal;
  color: var(--text-dim);
}
/* ─── Personal state: Seen / To Watch (bottom-right of each card) ───
   Namespaced .us-* to avoid collision with the providers .watch-btn. */
.film-userstate {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  margin-top: 12px;
}
/* When a card has no trailer/providers row, this is the bottom-most element,
   so it takes the spare vertical space to hug the card's lower edge. */
.film-userstate.us-anchor { margin-top: auto; }
/* When shown inline in the actions row, sit on the same line as the
   trailer / where-to-watch buttons and push to the right end of the row. */
.film-actions-btns .film-userstate { margin-top: 0; margin-left: auto; }
.us-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px; letter-spacing: 0.02em;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 3px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  white-space: nowrap;
}
.us-btn:hover { border-color: var(--border-hover); color: var(--text-secondary); }
.us-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.us-btn .us-ico { font-size: 10px; opacity: 0.7; line-height: 1; }
.us-btn.on { color: var(--accent); border-color: var(--accent); background: var(--accent-dim); }
.us-btn.on .us-ico { opacity: 1; }
/* Instant tactile feedback: the press itself registers immediately, before any
   state/colour transition resolves — this is what makes the click feel snappy. */
.us-btn:active { transform: scale(0.93); transition: transform 0s; }

/* Surgical card removal (when a toggle drops a card from the current view).
   A quick fade+slide instead of re-rendering the whole list. */
.film-card.us-removing {
  opacity: 0;
  transform: translateX(10px);
  transition: opacity .17s ease, transform .17s ease;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .film-card.us-removing { transition: opacity .05s linear; transform: none; }
}

/* ─── Personal-status view switch (segmented, top of the film list) ─── */
.us-view {
  display: flex;
  gap: 2px;
  justify-content: flex-end;
  align-items: center;
  width: fit-content;
  margin: 2px 0 8px auto;    /* right-justified */
  padding: 2px;
  border: 0.5px solid var(--border);
  border-radius: 5px;
  background: var(--surface);
}
.us-view-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px; letter-spacing: 0.02em;
  color: var(--text-secondary);
  background: transparent;
  border: none; border-radius: 3px;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.us-view-btn:hover { color: var(--text-primary); }
.us-view-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.us-view-btn.on { color: var(--accent); background: var(--accent-dim); }
.us-view-n {
  font-size: 11px; opacity: 0.75;  /* was 10.5px */
  padding: 1px 5px; border-radius: 8px;
  border: 0.5px solid var(--border);
}
.us-view-btn.on .us-view-n { border-color: var(--accent); opacity: 0.95; }

/* ─── Footer export / import buttons ─── */
.foot-btn {
  background: none; border: 1px solid var(--border); border-radius: 3px;
  color: var(--text-muted); cursor: pointer;
  font-family: 'Space Grotesk', sans-serif; font-size: 12px; letter-spacing: 0.03em;
  padding: 6px 12px; white-space: nowrap; flex-shrink: 0; margin-bottom: 2px;
  transition: border-color 0.15s, color 0.15s;
}
.foot-btn:hover { border-color: var(--border-hover); color: var(--text-secondary); }
.foot-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.page-footer {
  max-width: 920px; margin: 1.5rem auto 3rem; padding: 0 2rem;
  font-size: 12px; font-family: 'Space Grotesk', sans-serif;
  color: var(--text-muted); letter-spacing: 0.01em; line-height: 1.7;
}
.page-footer a { color: var(--text-secondary); }
.footer-controls { display: flex; gap: 8px; align-items: center; margin-bottom: 1.1rem; }
@media (max-width: 640px) {
  .film-card { gap: 0.8rem; }
  .film-poster { width: 52px; }
  .page-footer { padding: 0 1rem; }
}

.film-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 3px;
}
.film-title {
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.35;  /* was 1.2 — too tight for wrapping titles */
  letter-spacing: 0.005em;
}
.film-year {
  font-size: 12px;
  font-family: 'DM Mono', monospace;
  font-weight: 400;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: 0.05em;
}

.film-chinese {
  font-family: 'Noto Serif SC', 'Songti SC', serif;
  font-size: 0.9rem;
  color: var(--text-chinese);
  font-weight: 400;  /* was 300 — thin CJK strokes render poorly on non-Retina mobile */
  margin-bottom: 10px;
  line-height: 1.55;
  letter-spacing: 0.04em;
}

.film-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 11px;
}
.director-list { display: inline; }
.director-sep {
  font-size: 1rem;
  font-style: normal;
  font-family: 'Space Grotesk', sans-serif;
  color: var(--text-secondary);
}
.director {
  font-size: 1rem;
  font-style: normal;
  font-family: 'Space Grotesk', sans-serif;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color 0.15s;
}
.director:hover { color: var(--accent); }
.director.dir-active { color: var(--accent); }
.director.dir-active .dir-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent-dim); border: none; cursor: pointer;
  font-size: 10px; line-height: 1; color: var(--accent);
  margin-left: 4px; vertical-align: middle;
  transition: background 0.15s;
}
.director.dir-active .dir-x:hover { background: rgba(125,97,48,0.22); }
.region-badge {
  font-size: 11px;  /* was 10px */
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 2px;
  white-space: nowrap;
  letter-spacing: 0.04em;
  border: 1px solid transparent;
  flex-shrink: 0;
}
.r-europe { background: var(--europe-bg); color: var(--europe-text); border-color: var(--europe-border); }
.r-asia   { background: var(--asia-bg);   color: var(--asia-text);   border-color: var(--asia-border); }
.r-latam  { background: var(--latam-bg);  color: var(--latam-text);  border-color: var(--latam-border); }
.r-africa { background: var(--africa-bg); color: var(--africa-text); border-color: var(--africa-border); }
.r-usca   { background: var(--usca-bg);   color: var(--usca-text);   border-color: var(--usca-border); }

.runtime {
  font-size: 12px;
  font-family: 'DM Mono', monospace;
  font-weight: 400;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.genre-tag {
  font-size: 11px;  /* was 10px */
  font-family: 'DM Mono', monospace;
  font-weight: 400;
  padding: 2px 8px;
  border-radius: 20px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  white-space: nowrap;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all 0.12s;
}
.genre-tag:hover { border-color: var(--accent); color: var(--accent); }
.genre-tag.active-genre { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }

/* ─── Mobile-card wrappers ───
   On desktop these are display:contents / display:none so the card renders
   EXACTLY as before. The mobile media query (≤640px) turns them on to make
   the poster float, keep the tombstone beside it, and cap the genre row. */
.film-tomb     { display: contents; }
.film-genres   { display: contents; }
.film-genres-more { display: none; }

.film-logline {
  font-size: 1rem;
  font-family: 'Space Grotesk', sans-serif;
  color: var(--text-body);
  line-height: 1.7;
  border-top: 0.5px solid var(--border);
  padding-top: 10px;
  margin-bottom: 0;
}
.film-hist {
  font-size: 0.88rem;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 400;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-top: 8px;
  padding-top: 9px;
  border-top: 0.5px solid var(--border);
}
.film-lang {
  font-size: 1rem;
  font-family: 'Space Grotesk', sans-serif;
  color: var(--text-body);
  line-height: 1.7;
  margin-top: 1.7em;
}
.lang-link {
  color: var(--text-body);
  cursor: pointer;
  transition: color 0.15s;
}
.lang-link:hover { color: var(--accent); }

/* ─── Trailer button & embed ─── */
.trailer-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px 5px 9px;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 3px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  white-space: nowrap;
}
.trailer-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-dim);
}
.trailer-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.trailer-btn .tb-ico {
  font-size: 10px;
  opacity: 0.75;
  transition: opacity 0.15s;
}
.trailer-btn:hover .tb-ico { opacity: 1; }
.trailer-btn .tb-label { line-height: 1; }

/* Collapsed state */
.trailer-zone {
  display: none;
  margin-top: 10px;
  border-top: 0.5px solid var(--border);
  padding-top: 10px;
}
/* Expanded state — toggled by JS */
.film-card.trailer-open .trailer-zone { display: block; }
.film-card.trailer-open .trailer-btn {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-dim);
}

/* Responsive 16:9 embed */
.trailer-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--surface);
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.trailer-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* ─── Action row (trailer + watch buttons sit together) ─── */
.film-actions {
  display: flex;
  flex-direction: column;
  margin-top: auto;
  padding-top: 14px;
}
.film-actions-btns {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
/* On desktop, film-actions-left is an invisible wrapper — buttons flow inline */
.film-actions-left { display: contents; }

/* ─── Watch Now button & panel ─── */
.watch-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px 5px 9px;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 3px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  white-space: nowrap;
}
.watch-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-dim);
}
.watch-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.watch-btn .wb-ico { font-size: 10px; opacity: 0.75; transition: opacity 0.15s; }
.watch-btn:hover .wb-ico { opacity: 1; }
.watch-btn .wb-label { line-height: 1; }
.film-card.watch-open .watch-btn {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-dim);
}

.watch-zone {
  display: none;
  margin-top: 10px;
  border-top: 0.5px solid var(--border);
  padding-top: 12px;
}
.film-card.watch-open .watch-zone { display: block; }

.wp-section-label {
  font-family: 'DM Mono', monospace;
  font-size: 11px;  /* was 9px — below legible threshold */
  letter-spacing: 0.08em;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.wp-providers {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 12px;
}
.wp-providers:last-child { margin-bottom: 0; }
.provider-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px 4px 5px;
  border: 0.5px solid var(--border);
  border-radius: 3px;
  background: var(--surface);
  text-decoration: none;
  transition: border-color 0.12s, background 0.12s;
}
.provider-chip:hover {
  border-color: rgba(162,122,74,0.45);
  background: var(--accent-dim);
}
.provider-chip:hover {
  border-color: rgba(162,122,74,0.45);
}
.provider-chip .pc-logo {
  width: 20px;
  height: 20px;
  border-radius: 3px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--border);
}
.provider-chip .pc-name {
  font-family: 'DM Mono', monospace;
  font-size: 11px;  /* was 10px */
  letter-spacing: 0.03em;
  color: var(--text-secondary);
  white-space: nowrap;
}
.provider-chip.pc-sub .pc-name { color: var(--text-primary); }

.wp-footer {
  font-family: 'DM Mono', monospace;
  font-size: 11px;  /* was 9px — below legible threshold */
  color: var(--text-muted);
  letter-spacing: 0.03em;
  border-top: 0.5px solid var(--border);
  padding-top: 8px;
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
}
.wp-footer a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.15s;
}
.wp-footer a:hover { color: var(--accent); }

.no-results {
  text-align: center;
  color: var(--text-muted);
  padding: 4rem 0;
  font-style: italic;
  font-size: 1.05rem;
}

mark {
  background: rgba(162,122,74,0.22);
  color: var(--accent);
  border-radius: 2px;
  padding: 0 1px;
}

@media (max-width: 640px) {
  .page-header { flex-direction: column; align-items: flex-start; gap: 0.75rem; padding: 2rem 1rem 0.85rem; }
  .controls-wrap, .main { padding-left: 1rem; padding-right: 1rem; }
  .film-card { padding: 0.9rem 1rem 0.85rem; }
  .film-title { font-size: 1.1rem; }
  .film-logline, .film-hist { font-size: 1rem; } /* was 0.95rem — keep body at 16px on mobile */
}
/* ─── Filter-trigger clear × button ─────────────────────────────────────
   Appears inline after the value text when a filter is non-default.
   The button sits between the value and the caret (▾) so it reads as
   "clear this filter" rather than "close the dropdown".
   Hidden by default; shown via JS when the filter is active.           */
.drw-trigger-x {
  display: none;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg);
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
  border: none;
  font-family: 'Space Grotesk', sans-serif;
  flex-shrink: 0;
  margin-left: 2px;
  /* sit on the text baseline */
  vertical-align: middle;
  align-self: center;
  position: relative;
  top: -1px;
  transition: background 0.15s;
}
.drw-trigger-x:hover { background: var(--text-secondary); }
.drw-trigger-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.drw-trigger-x.visible { display: inline-flex; }

/* Genre pill × badge — shown on active pills only */
.gp-x {
  display: none;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: rgba(125,97,48,0.28);
  color: var(--accent);
  font-size: 11px;  /* was 9px — decorative but still bumped for consistency */
  line-height: 1;
  margin-left: 3px;
  flex-shrink: 0;
  cursor: pointer;
  border: none;
  font-family: 'Space Grotesk', sans-serif;
  vertical-align: middle;
  pointer-events: none; /* pill button handles the click; × is decorative */
}
.gp.on .gp-x { display: inline-flex; }

/* ─── Film list dimming during filter rebuild ────────────────────────────
   When a × clear fires, the list fades out instantly on click so the user's
   eye moves to the already-updated filter bar. The cards fade back in once
   the rebuild is complete. This makes the × feel instantaneous even though
   the card rebuild takes ~100ms on large catalogs.                         */
#fl {
  transition: opacity 0.12s ease;
}
#fl.rebuilding {
  opacity: 0.25;
  pointer-events: none;
}

/* ─── Compact toolbar (power row) ─── */
.tbar { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 9px; }
.tbar-search { flex: 1 1 220px; margin-bottom: 0; min-width: 180px; }
.ctl { position: relative; flex-shrink: 0; }
.ctl-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 38px; padding: 0 11px;
  font-family: 'DM Mono', monospace; font-size: 12px; font-weight: 400;
  letter-spacing: 0.02em; color: var(--text-secondary);
  background: var(--surface); border: 1px solid var(--border); border-radius: 4px;
  cursor: pointer; white-space: nowrap; transition: all 0.15s;
}
.ctl-btn:hover { border-color: var(--border-hover); color: var(--text-primary); }
.ctl-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ctl.open .ctl-btn, .ctl-btn.active { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }
.ctl-ico { font-size: 13px; opacity: 0.8; }
.ctl-lab { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }  /* was 10px */
.ctl.open .ctl-lab, .ctl-btn.active .ctl-lab { color: var(--accent); opacity: 0.8; }
.ctl-caret { font-size: 11px; opacity: 0.7; margin-left: 1px; }  /* was 9px */
.ctl-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: var(--accent); color: var(--bg); font-size: 10px; font-weight: 500;
}

/* ─── Popovers ─── */
.pop {
  display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 40;
  min-width: 220px; background: var(--surface);
  border: 0.5px solid var(--border-hover); border-radius: 6px;
  padding: 6px; box-shadow: 0 8px 28px rgba(0,0,0,0.35);
}
.ctl.open .pop { display: block; }
.ctl-region .pop { left: 0; }
/* Country/Language live at the right edge now — hang their popovers from the
   right so they open leftward instead of overflowing offscreen. */
.trigger-group-right .pop { left: auto; right: 0; }
.pop-wide { min-width: 280px; }
.pop-search {
  width: 100%; box-sizing: border-box; margin-bottom: 5px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 4px;
  padding: 7px 10px; font-family: 'DM Mono', monospace; font-size: 12px;
  color: var(--text-primary);
}
.pop-search:focus { outline: none; border-color: var(--accent); }
.pop-body { max-height: 320px; overflow-y: auto; }
.pop-foot { border-top: 0.5px solid var(--border); margin-top: 4px; padding-top: 5px; text-align: right; }
.pop-clear {
  background: none; border: none; cursor: pointer;
  font-family: 'DM Mono', monospace; font-size: 12px; color: var(--accent); padding: 3px 6px;  /* was 11px */
}
.pop-clear:hover { text-decoration: underline; }

/* ─── Regional streaming: country signals + selector ───
   Existing tokens only: DM Mono labels, --accent, --text-muted, .pop chrome. */
.pop-head { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 0.03em; color: var(--text-muted); padding: 2px 2px 7px; }
.pop-head b { font-weight: 400; color: var(--text-primary); }
.pop-link { color: var(--accent); text-decoration: none; cursor: pointer; }
.pop-link:hover { text-decoration: underline; }
/* The selector is opened from the Stream popover and from any card's
   where-to-watch footer, so it floats under the controls bar rather than
   hanging off one trigger. Above the mobile sidebar (z 100). */
.country-pop {
  position: fixed; top: calc(var(--controls-h, 56px) + 18px); left: 50%; transform: translateX(-50%);
  width: min(92vw, 320px); z-index: 120; display: none; flex-direction: column;
  max-height: calc(100vh - var(--controls-h, 56px) - 40px);
}
.country-pop.open { display: flex; }
.country-pop .pop-body { max-height: none; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.country-pop .pop-search { position: sticky; top: 0; z-index: 1; margin: 4px 0; }
.country-pop .rgn-row { padding-left: 8px; }
/* Row marker in the country selector: the flag emoji where the platform has
   flag glyphs, the DM Mono code where it doesn't (Chrome/Edge on Windows
   render regional-indicator pairs as letter boxes). Both occupy the same
   20px, so the two states line up identically. The emoji stack is system
   fonts only — nothing is downloaded, so §1.4 still holds. */
.cty-flag {
  flex: 0 0 auto; width: 20px; text-align: center; font-size: 15px; line-height: 1;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}
.cty-code {
  flex: 0 0 auto; width: 20px; font-family: 'DM Mono', monospace;
  font-size: 10px; letter-spacing: 0.1em; color: var(--text-muted);
}
.rgn-row.on .cty-code { color: var(--accent); }
/* Local-only tiles (Playing in NYC Theaters): shown by default, dropped once
   /api/geo says the visitor is far away. The owner is in New York and sees
   no flicker; a visitor in London loses the tile a moment after paint. No
   answer keeps the default. Body class set by the client (REDESIGN.md §10). */
body.far-nyc .tile.tile-local[data-local="nyc"] { display: none; }
/* Country code in the tile's empty top-left corner, opposite the ↗ mark. */
.tile.freetile .img b.cc { position: absolute; top: 15px; left: 14px; font-family: 'DM Mono', monospace; font-weight: 400; font-size: 11px; letter-spacing: 0.12em; line-height: 1; color: var(--accent); }

/* Menu items (sort / group) */
.menu-item {
  display: flex; align-items: baseline; gap: 8px; width: 100%; text-align: left;
  background: none; border: none; cursor: pointer; border-radius: 4px;
  padding: 8px 10px; font-family: 'DM Mono', monospace; font-size: 12px;
  color: var(--text-secondary); letter-spacing: 0.02em;
}
.menu-item:hover { background: var(--card-hover); color: var(--text-primary); text-decoration: underline dashed; text-decoration-color: var(--text-muted); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.menu-item.on { color: var(--accent); }
.menu-item.on::after { content: "✓"; margin-left: auto; font-size: 11px; }
.menu-sub { font-size: 11px; color: var(--text-muted); }  /* was 10px */

/* ─── Region picker — three-level collapsible tree ─── */

/* Continent row — flex container, not itself a button */
.rgn-cont {
  display: flex; align-items: center; width: 100%;
  border-top: 0.5px solid var(--border); margin-top: 2px;
}
.rgn-continent-block:first-child .rgn-cont { border-top: none; margin-top: 0; }

/* Caret — expand/collapse only */
.rgn-caret-btn {
  flex-shrink: 0; background: none; border: none; cursor: pointer;
  padding: 7px 4px 6px 8px; color: var(--text-muted);
  border-radius: 4px 0 0 4px; transition: color 0.12s;
  display: flex; align-items: center;
}
.rgn-caret-btn:hover { color: var(--text-primary); }
.rgn-caret {
  font-size: 11px; width: 12px; text-align: center;  /* was 9px */
  transition: transform 0.18s; display: inline-block;
}
.rgn-cont-children.open ~ * .rgn-caret,
.rgn-caret-btn[aria-expanded="true"] .rgn-caret { transform: rotate(90deg); }

/* Label — select/deselect all for this continent */
.rgn-cont-label-btn {
  flex: 1; background: none; border: none; cursor: pointer; text-align: left;
  padding: 7px 8px 6px 4px; font-family: 'DM Mono', monospace; font-size: 11px;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-secondary);
  border-radius: 0 4px 4px 0; transition: color 0.12s;
  display: flex; align-items: center; gap: 7px;
}
.rgn-cont-label-btn:hover { color: var(--text-primary); background: var(--card-hover); }
.rgn-cont-label-btn.all-on { color: var(--accent); }
.rgn-cont-badge {
  font-size: 10px; font-family: 'DM Mono', monospace; min-width: 16px; height: 16px;
  padding: 0 4px; border-radius: 8px;
  background: var(--accent); color: var(--bg);
  display: inline-flex; align-items: center; justify-content: center;
  visibility: hidden;
}
.rgn-cont-badge.visible { visibility: visible; }

/* Continent children panel */
.rgn-cont-children { display: none; padding-bottom: 4px; }
.rgn-cont-children.open { display: block; }

/* Select-all toggle (checkbox) shown before continent & subregion labels, so
   it's visually clear the whole group can be selected at once. Tri-state:
   empty (none selected) · dash (some) · check (all). */
.rgn-toggle {
  flex-shrink: 0; background: none; border: none; cursor: pointer;
  padding: 4px; display: inline-flex; align-items: center; border-radius: 4px;
}
.rgn-toggle-box {
  width: 14px; height: 14px; border-radius: 3px;
  border: 1px solid var(--border-hover); display: inline-flex;
  align-items: center; justify-content: center;
  font-size: 10px; line-height: 1; color: var(--bg); transition: all 0.12s;
}
.rgn-toggle:hover .rgn-toggle-box { border-color: var(--accent); }
.rgn-toggle.all .rgn-toggle-box { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.rgn-toggle.partial .rgn-toggle-box { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }

/* Subregion block + its collapsible country panel */
.rgn-sub-children { display: none; }
.rgn-sub-children.open { display: block; }

/* Subregion header row — caret + toggle + select-all label */
.rgn-grp-head {
  display: flex; align-items: center;
  padding: 0 8px 0 16px; font-size: 11px; letter-spacing: 0.08em;  /* was 10px */
  text-transform: uppercase; color: var(--text-muted);
}
.rgn-sub-caret-btn {
  flex-shrink: 0; background: none; border: none; cursor: pointer;
  padding: 5px 3px 4px 0; color: var(--text-muted);
  display: inline-flex; align-items: center; transition: color 0.12s;
}
.rgn-sub-caret-btn:hover { color: var(--text-primary); }
.rgn-sub-caret {
  font-size: 11px; width: 12px; text-align: center;  /* was 8px */
  transition: transform 0.18s; display: inline-block;
}
.rgn-sub-caret-btn[aria-expanded="true"] .rgn-sub-caret { transform: rotate(90deg); }

/* Subregion label — clickable select-all */
.rgn-sub-label-btn {
  flex: 1; background: none; border: none; cursor: pointer; text-align: left;
  padding: 5px 6px 4px 6px; font-family: 'DM Mono', monospace; font-size: 11px;  /* was 10px */
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted);
  transition: color 0.12s;
}
.rgn-sub-label-btn:hover { color: var(--accent); }
.rgn-sub-label-btn.all-on { color: var(--accent); }
.rgn-all { background: none; border: none; cursor: pointer; font-family: 'DM Mono', monospace; font-size: 11px; color: var(--accent); padding: 2px 4px; }  /* was 10px */
.rgn-all:hover { text-decoration: underline; }

/* Country row */
.rgn-row {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  background: none; border: none; cursor: pointer; border-radius: 4px;
  padding: 6px 8px 6px 22px; font-family: 'DM Mono', monospace; font-size: 12px; color: var(--text-body);
}
/* Country rows inside a subregion accordion sit one level deeper */
.rgn-sub-children .rgn-row { padding-left: 38px; }
.rgn-row:hover { background: var(--card-hover); }
.rgn-box {
  width: 15px; height: 15px; flex-shrink: 0; border-radius: 3px;
  border: 1px solid var(--border-hover); display: inline-flex;
  align-items: center; justify-content: center; font-size: 11px; color: var(--bg);
}
.rgn-row.on { color: var(--text-primary); }
.rgn-row.on .rgn-box { background: var(--accent); border-color: var(--accent); }
/* Streaming bucket headers double as whole-bucket filter toggles */
.prov-sec-toggle { display: inline-flex; align-items: center; gap: 8px; }
.prov-sec-head.on .rgn-box { background: var(--accent); border-color: var(--accent); }
.prov-sec-head.on .prov-sec-name { color: var(--accent-active-text, var(--accent)); font-weight: 500; }
/* Share-this-view button (copies a URL that reproduces the current filters) */
.share-btn {
  display: none; /* shown only when the view diverges from default (JS adds .available) */
  align-items: center; gap: 6px;
  padding: 5px 13px; margin-left: 4px;
  border: 1px solid var(--border); border-radius: 999px;
  background: transparent; color: var(--text-secondary);
  font-family: 'Space Grotesk', sans-serif; font-size: 13px;
  cursor: pointer; white-space: nowrap;
  transition: border-color .15s, color .15s;
}
.share-btn.available { display: inline-flex; }
.share-btn:hover { border-color: var(--border-hover); color: var(--text-primary); }
.page-title .home-link { color: inherit; text-decoration: none; }
/* Visually hidden, crawlable */
.vh-seo { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Tagline row: subtitle left, the single Collections link right */
.page-header-text { flex: 1; min-width: 0; }
.tagrow { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.coll-link {
  font-family: 'Space Grotesk', sans-serif; font-size: 14px;
  color: var(--text-secondary); text-decoration: none; white-space: nowrap; flex: 0 0 auto;
}
.coll-link:hover { color: var(--text-primary); text-decoration: underline; text-underline-offset: 3px; }
.coll-link.cur { color: var(--accent-active-text); text-decoration: none; }
@media (max-width: 640px) {
  .page-header-text { width: 100%; }
  .coll-link { font-size: 13.5px; }
}

/* ─── Homepage carousel (.home-strip) and the collection tiles it shares
   with "More collections" on collection pages ─── */
.home-strip { max-width: 960px; margin: 0 auto; padding: 1.1rem 2rem 0.2rem; }
body.coll-page .home-strip { display: none; }
.strip { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: thin; }
.tile { flex: 0 0 184px; scroll-snap-align: start; text-decoration: none; color: inherit; }
.tile .img { aspect-ratio: 16/9; border-radius: 5px; overflow: hidden; background: var(--surface); border: 0.5px solid var(--border); }
.tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Tile captions are set as film titles: same size, weight, line-height and
   tracking as .film-title, so a collection name and a film name read as the
   same kind of thing. 1.35 line-height matters more here than on a card —
   these wrap at 184px. */
.tile .t { font-family: 'Space Grotesk', sans-serif; font-size: 1.2rem; font-weight: 500; line-height: 1.35; letter-spacing: 0.005em; margin-top: 7px; color: var(--text-primary); }
.tile:hover .t { text-decoration: underline; text-underline-offset: 3px; }
.tile .n { font-family: 'DM Mono', monospace; font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.tile.freetile .img { background: rgba(125,97,48,0.12); border-color: rgba(125,97,48,0.35); display: flex; align-items: flex-end; justify-content: flex-start; padding: 12px 14px; position: relative; }
.tile.freetile .img span { font-family: 'DM Serif Display', Georgia, serif; color: var(--accent-active-text); font-size: 22px; line-height: 1; }
.tile.freetile .img i { font-style: normal; position: absolute; top: 10px; right: 12px; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--accent); display: flex; align-items: center; justify-content: center; color: var(--accent-active-text); font-size: 12px; font-family: 'Space Grotesk', sans-serif; transition: background 0.15s, color 0.15s; }
.tile.freetile:hover .img { background: rgba(125,97,48,0.18); }
.tile.freetile:hover .img i { background: var(--accent); color: var(--bg); border-color: var(--accent); }
/* End cap of the carousel — the way through to the full directory. Deliberately
   the inverse of .freetile: dashed and empty against filled-and-serif, so the
   two never read as the same kind of tile. No caption underneath. */
.tile.alltile .img { background: transparent; border: 1px dashed var(--border-hover); display: flex; align-items: center; justify-content: center; gap: 9px; }
.tile.alltile .img span { font-family: 'DM Mono', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-secondary); }
.tile.alltile .img i { font-style: normal; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--border-hover); display: flex; align-items: center; justify-content: center; color: var(--text-secondary); font-size: 13px; transition: background 0.15s, color 0.15s, border-color 0.15s; }
.tile.alltile:hover .img { border-color: var(--accent); }
.tile.alltile:hover .img span { color: var(--accent-active-text); }
.tile.alltile:hover .img i { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.more-coll { margin: 2.5rem 0 1rem; padding-top: 1.2rem; border-top: 0.5px solid var(--border); }
.more-coll h2 { font-family: 'DM Mono', monospace; font-weight: 400; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.6rem; }
/* The heading is a link to the directory — it always read like one. Styled to
   stay the quiet mono label it is until the pointer is on it. */
.more-coll h2 a { color: inherit; text-decoration: none; }
.more-coll h2 a:hover, .more-coll h2 a:focus-visible { color: var(--accent-active-text); text-decoration: underline; text-underline-offset: 3px; }
/* Spare candidates ship hidden; the client reveals them if the visitor's
   country prunes the tiles in front of them (§10.3). .tile sets no display of
   its own, so this only makes the intent explicit. */
.more-coll .tile[hidden] { display: none; }
@media (max-width: 640px) {
  /* Below the sticky bar (JS moves it there); tiles run off the right edge
     as the swipe affordance, so only the left gutter is kept. */
  .home-strip { padding: 0.85rem 0 0.3rem 1rem; }
  .strip { gap: 10px; scrollbar-width: none; }
  .strip::-webkit-scrollbar { height: 0; display: none; }
  .home-strip .strip { padding-right: 1rem; }
  .tile { flex-basis: 156px; }
  .tile .t { font-size: 1.1rem; margin-top: 6px; }
  .tile.freetile .img { padding: 9px 11px; }
  .tile.freetile .img span { font-size: 17px; line-height: 1.05; }
  .tile.freetile .img i { top: 8px; right: 9px; width: 19px; height: 19px; font-size: 10px; }
  .tile.freetile .img b.cc { top: 12px; left: 11px; }
  .tile.alltile .img { gap: 7px; }
  .tile.alltile .img span { font-size: 10px; letter-spacing: 0.07em; }
  .tile.alltile .img i { width: 22px; height: 22px; font-size: 12px; }
}
/* Search-scope control inside the search field: "search everything ⌄" */
.search-right {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; gap: 2px;
}
.search-right .search-clear { position: static; transform: none; }
.search-scope-wrap { position: relative; }
.search-scope {
  border: 0; background: none; cursor: pointer; white-space: nowrap;
  color: var(--text-muted); font-family: 'Space Grotesk', sans-serif;
  font-size: 12px; letter-spacing: 0.01em; padding: 4px 2px;
  display: inline-flex; align-items: center; gap: 3px;
}
.search-scope .ss-fixed { color: var(--text-dim); }
.search-scope .ss-val {
  text-decoration: underline dashed; text-decoration-color: var(--text-dim);
  text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.search-scope .ss-car { font-size: 9px; color: var(--text-dim); }
.search-scope:hover .ss-val, .search-scope:hover .ss-car { color: var(--text-primary); }
.search-scope.scoped .ss-val { color: var(--accent-active-text); text-decoration-color: var(--accent); }
.search-scope-menu {
  display: none; position: absolute; right: 0; top: calc(100% + 6px); z-index: 60;
  background: var(--card); border: 1px solid var(--border); border-radius: 6px;
  box-shadow: 0 6px 22px rgba(0,0,0,0.09);
  padding: 4px; min-width: 168px;
}
.search-scope-menu.open { display: block; }
.search-scope-menu button {
  display: block; width: 100%; text-align: left; border: 0; background: none;
  cursor: pointer; font-family: 'Space Grotesk', sans-serif; font-size: 13px;
  color: var(--text-secondary); padding: 7px 9px; border-radius: 4px;
}
.search-scope-menu button:hover { background: var(--surface); }
.search-scope-menu button.on { color: var(--accent-active-text); font-weight: 500; }
.search-row .search-bar { padding-right: 190px; }
@media (max-width: 640px) {
  .search-scope .ss-fixed { display: none; }   /* just "everything ⌄" on phones */
  .search-row .search-bar { padding-right: 128px; }
}
/* ─── Collection pages: editorial header (Letterboxd-style list intro) ─── */
.coll-editorial {
  max-width: 960px; margin: 0 auto;
  padding: 1.7rem 2rem 0;
}
/* Collection pages: the list follows the intro closely */
body.coll-page .main { padding-top: 0.6rem; }
.coll-title {
  font-family: 'DM Serif Display', Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.55rem, 3.2vw, 2.35rem);
  line-height: 1.15; letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0 0 0.7rem;
}
.coll-standfirst {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 16px; line-height: 1.6;
  color: var(--text-body);
  max-width: 640px;
  margin: 0 0 0.3rem;
}
.coll-body {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14.5px; line-height: 1.7;
  color: var(--text-secondary);
  max-width: 640px;
}
.coll-body p { margin: 0 0 0.85em; }
.coll-hero {
  display: block; width: 100%; height: auto;
  aspect-ratio: 21 / 9; object-fit: cover;     /* §5.4: 21:9, rounded */
  border-radius: 8px; border: 0.5px solid var(--border);
  margin: 0.9rem 0 0.9rem;
  background: var(--surface);
}
@media (max-width: 640px) { .coll-hero { border-radius: 6px; } }
body.view-filtered .coll-hero { display: none; }
.coll-more summary {
  cursor: pointer; list-style: none;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px; color: var(--accent-active-text);
  margin: 0.1rem 0 0.35rem;
}
.coll-more summary::-webkit-details-marker { display: none; }
.coll-more summary::after { content: " ↓"; }
.coll-more[open] summary::after { content: " ↑"; }
.coll-editorial::after {
  content: ""; display: block;
  border-bottom: 0.5px solid var(--border);
  margin-top: 0.85rem;
}
.coll-restore { display: none; margin: 0 0 0.6rem; }
.coll-restore a {
  font-family: 'Space Grotesk', sans-serif; font-size: 13px;
  color: var(--accent-active-text); text-decoration: none;
}
.coll-restore a:hover { text-decoration: underline; text-underline-offset: 3px; }
body.view-filtered .coll-standfirst,
body.view-filtered .coll-body, body.view-filtered .coll-more,
body.view-filtered .coll-title { display: none; }
body.view-filtered .coll-restore { display: block; }
body.view-filtered .coll-editorial { padding-top: 1rem; }
body.view-filtered .coll-editorial::after { display: none; }
@media (max-width: 640px) {
  .coll-editorial { padding: 1.4rem 1rem 0; }
}

/* ─── Sectioned collections (build_collections.py `sections`) ───
   The list is split into named sections, each with its own ranking, <h2>,
   backdrop and entry in a contents list. The contents block sits in the
   editorial header because that survives hydration — the static list below it
   does not — so its anchors keep pointing at the live .era-group sections. */
.coll-toc-h {
  font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-muted);
  margin: 1.15rem 0 0.5rem; cursor: pointer; list-style: none;
}
.coll-toc-h::-webkit-details-marker { display: none; }
.coll-toc-h::after { content: " \2193"; color: var(--text-dim); }
.coll-toc-wrap[open] > .coll-toc-h::after { content: " \2191"; }
.coll-toc {
  margin: 0 0 0.2rem; padding: 0; list-style: none;
  columns: 2; column-gap: 2.2rem;
}
.coll-toc li { break-inside: avoid; }
.coll-toc a {
  display: flex; align-items: baseline; gap: 9px; padding: 5px 0;
  font-family: 'Space Grotesk', sans-serif; font-size: 14px; line-height: 1.4;
  color: var(--accent-active-text); text-decoration: none;
}
.coll-toc a span { flex: 1 1 auto; min-width: 0; }
.coll-toc a::before {
  content: "\2193"; font-family: 'DM Mono', monospace; font-size: 11px;
  color: var(--text-dim); flex: 0 0 auto; line-height: 1.5;
}
.coll-toc a:hover { text-decoration: underline; text-underline-offset: 3px; }
.coll-toc a:hover::before { color: var(--accent); }
.coll-toc a:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px;
}
body.view-filtered .coll-toc-wrap { display: none; }

/* One backdrop per section header, instead of the per-film .card-backdrop
   images an unsectioned page interleaves between cards — and sized exactly
   like them: the backdrop runs at its own ratio. Cropping it to a band would
   cut the frame a cinematographer composed, so only the page hero (one image,
   a masthead) gets the 21:9 treatment. */
.sec-hero {
  display: block; width: 100%; height: auto;
  border-radius: 8px; border: 0.5px solid var(--border);
  background: var(--surface); margin: 0 0 18px;
}
body.view-filtered .sec-hero { display: none; }
/* Section titles are sentences, not "1960s": .era-label's nowrap would push
   the count and switch outside the header — and the page into a horizontal
   scroll — so here the title wraps and the meta travels as one unit. */
.sec-era-header { flex-wrap: wrap; column-gap: 12px; row-gap: 4px; }
.sec-era-header .era-label-mixed {
  white-space: normal; flex: 1 1 340px; min-width: 0;
}
.sec-meta {
  display: inline-flex; align-items: baseline; gap: 12px;
  flex: 0 0 auto; margin-left: auto;
}

/* Optional per-section note; renders only where the spec supplies one. */
.era-group > .sec-note, .coll-static-sec > .sec-note {
  font-family: 'Space Grotesk', sans-serif; font-size: 13.5px; line-height: 1.55;
  color: var(--text-secondary); max-width: 62ch; margin: -0.2rem 0 1rem;
}
/* Sectioned pre-hydration list (crawlers + first paint). */
.coll-static-sec > h2 {
  font-family: 'DM Serif Display', Georgia, serif; font-weight: 400;
  font-size: 1.4rem; line-height: 1.15; color: var(--text-primary);
  margin: 1.7rem 0 0.3rem;
}
.coll-static-sec > ol { list-style: none; margin: 0; padding: 0; }
@media (max-width: 640px) {
  .coll-toc { columns: 1; }
  .sec-hero { margin-bottom: 14px; }
  /* Section titles run to two serif lines on a phone; pinning them would cost
     ~100px of viewport, which the short decade labels never did. */
  .sec-era-header { position: static; }
}
/* ─── NYC Theaters page ─── */
/* Listings films carry no pop_rank; the page ranks by critics only. */
body.nyc-page #sortbtn-popularity { display: none; }
.nyc-tag { font-size: 0.5em; color: var(--accent-active-text); letter-spacing: 0.02em;
  vertical-align: 0.35em; margin-left: 2px; }
.nyc-stickybar { position: sticky; top: var(--controls-h, 0px); z-index: 15;
  background: var(--bg); border-bottom: 0.5px solid var(--border);
  transition: background 0.25s; }
.nyc-onebar { max-width: 960px; margin: 0 auto; padding: 0.6rem 2rem 0.6rem;
  display: flex; align-items: center; gap: 12px; }
.nyc-dayrow { display: inline-flex; align-items: center; gap: 12px; }
.nyc-dot { color: var(--border); font-size: 1.1rem; }
.nyc-week { font: inherit; font-family: 'Space Grotesk', sans-serif; font-weight: 500;
  font-size: 0.92rem; padding: 8px 18px 7px; border-radius: 999px;
  border: 1px dashed var(--border); background: var(--card); color: var(--text-secondary);
  cursor: pointer; white-space: nowrap; line-height: 1.3; }
.nyc-week.on { background: var(--accent-dim); border-style: solid;
  border-color: var(--accent); color: var(--accent-active-text); }
.nyc-stepper { display: inline-flex; align-items: stretch; border: 1px solid var(--border);
  border-radius: 999px; background: var(--card); overflow: hidden; }
.nyc-arrow { font: inherit; border: none; background: transparent; color: var(--text-secondary);
  padding: 8px 13px 7px; cursor: pointer; font-size: 0.95rem; line-height: 1.3; }
.nyc-arrow:disabled { color: var(--border); cursor: default; }
.nyc-datechip { font: inherit; font-family: 'Space Grotesk', sans-serif; font-weight: 500;
  font-size: 0.92rem; padding: 8px 14px 7px; min-width: 122px; text-align: center;
  border: none; border-left: 1px solid var(--border); border-right: 1px solid var(--border);
  background: transparent; color: var(--text-secondary); cursor: pointer; line-height: 1.3;
  white-space: nowrap; }
.nyc-datechip.on { background: var(--accent-dim); color: var(--accent-active-text); cursor: default; }
.nyc-updated { font-family: 'DM Mono', monospace; font-size: 11px; color: var(--text-muted);
  margin-left: auto; white-space: nowrap; }
@media (max-width: 700px) {
  .nyc-onebar { flex-wrap: wrap; gap: 8px; padding: 0.55rem 1rem 0.55rem; }
  .nyc-onebar .nyc-bundlebar { display: flex; width: 100%; }
  .nyc-onebar .nyc-bundle { flex: 1 1 0; }
  .nyc-dot, .nyc-updated { display: none; }
  .nyc-dayrow { display: flex; width: 100%; gap: 8px; }
  .nyc-stepper { flex: 1 1 auto; }
  .nyc-datechip { flex: 1 1 auto; min-width: 0; }
}
.nyc-daybar { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
.nyc-daybar::-webkit-scrollbar { display: none; }
.nyc-day { flex: 0 0 auto; font: inherit; font-size: 13px; padding: 5px 12px 4px;
  border-radius: 999px; border: 1px solid var(--border); background: var(--card);
  color: var(--text-secondary); cursor: pointer; white-space: nowrap; text-align: center; }
.nyc-day small { display: block; font-size: 10px; color: var(--text-dim); line-height: 1.2; }
.nyc-day.on { background: var(--accent-dim); border-color: var(--accent);
  color: var(--accent-active-text); }
.nyc-day.on small { color: var(--accent-active-text); opacity: 0.75; }
.nyc-day.nyc-day-week { border-style: dashed; }
.nyc-bundlebar-wrap { max-width: 960px; margin: 0 auto; padding: 0.5rem 2rem 0.15rem; }
/* Desktop: a content-sized segmented pair — a bigger sibling of the day pills
   above it, not two half-page slabs. Phone (below) keeps the full-width feel. */
.nyc-bundlebar { display: inline-flex; gap: 0; border: 1px solid var(--border);
  border-radius: 999px; overflow: hidden; background: var(--card); }
.nyc-bundle { flex: 0 0 auto; font-family: 'Space Grotesk', sans-serif; font-weight: 500;
  font-size: 0.95rem; padding: 8px 20px 7px; border: none; background: transparent;
  color: var(--text-secondary); cursor: pointer; text-align: center; line-height: 1.3; }
.nyc-bundle + .nyc-bundle { border-left: 1px solid var(--border); }
.nyc-bundle.on { background: var(--accent-dim); color: var(--accent-active-text); }
.nyc-cwv-head { cursor: pointer; margin-top: 4.2rem; }
.nyc-cwv-chev { font-size: 15px; color: var(--text-muted); }
body:not(.nyc-cwv-open) .film-card.nyc-cwv { display: none; }
@media (max-width: 640px) {
  .nyc-bundlebar-wrap { padding: 0.4rem 1rem 0.1rem; }
  .nyc-bundlebar { display: flex; border: none; border-radius: 0; overflow: visible;
    background: transparent; gap: 8px; }
  .nyc-bundle { flex: 1 1 0; font-size: 0.95rem; padding: 9px 10px 8px;
    border: 1px solid var(--border); border-radius: 10px; background: var(--card); }
  .nyc-bundle + .nyc-bundle { border-left: 1px solid var(--border); }
  .nyc-bundle.on { border-color: var(--accent); background: var(--accent-dim); }
}
.nyc-shows { border-top: 0.5px dashed var(--border); padding-top: 8px; margin-top: 10px;
  }
.nyc-shows-day { font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted); margin: 8px 0 3px; }
.nyc-srow { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 3px 0; font-size: 1rem; }
.nyc-thtr { color: var(--text-body); min-width: 150px; }
.nyc-t { color: var(--accent-active-text); text-decoration: underline dashed;
  text-decoration-color: var(--border-hover); text-underline-offset: 3px; }
.nyc-t:hover { text-decoration-style: solid; }
.nyc-t.past { color: var(--text-dim); text-decoration: line-through; }
.nyc-t.past:hover { text-decoration: line-through underline; }
span.nyc-t { text-decoration: none; color: var(--text-body); cursor: default; }
.nyc-fmt { font-family: 'DM Mono', monospace; font-size: 0.7rem; color: var(--text-muted);
  border: 1px solid var(--border); border-radius: 3px; padding: 1px 5px; }
.nyc-ev { flex-basis: 100%; font-size: 0.85rem; color: var(--text-muted);
  font-style: italic; padding-left: 150px; margin-top: -2px; }
.nyc-divider { display: flex; align-items: center; gap: 14px; margin: 2.2rem 0 0.4rem; }
.nyc-divider h2 { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400;
  font-size: 1.45rem; margin: 0; color: var(--text-primary); }
.nyc-divider .n { font-family: 'DM Mono', monospace; font-size: 11px; color: var(--text-muted); }
.nyc-divider::after { content: ""; flex: 1; border-bottom: 0.5px solid var(--border); }
.nyc-divnote { font-size: 12.5px; color: var(--text-muted); margin: 0 0 1rem; }
.nyc-updated { color: var(--text-dim); font-size: 12px; }
@media (max-width: 640px) {
  .nyc-daybar-wrap { padding: 0.5rem 1rem 0.1rem; }
  .nyc-thtr { min-width: 120px; }
  .nyc-ev { padding-left: 0; }
}
/* Interleaved backdrops on small curated lists (injected after render) */
.card-backdrop {
  display: block; width: 100%; height: auto;
  border-radius: 8px; border: 0.5px solid var(--border);
  background: var(--surface);
  margin: 26px 0 14px;
}
/* Static pre-hydration list (crawlers + first paint; removed on hydration) */
.coll-static-list {
  list-style: none; max-width: 960px;
  margin: 0 auto; padding: 1rem 2rem 4rem;
}
.coll-static-list li { display: flex; gap: 14px; padding: 12px 0; border-bottom: 0.5px solid var(--border); }
.coll-static-list img { width: 62px; height: 93px; object-fit: cover; border-radius: 4px; flex: 0 0 auto; background: var(--surface); }
.coll-static-list .t { font-weight: 500; font-size: 15px; font-family: 'Space Grotesk', sans-serif; }
.coll-static-list .d { color: var(--text-secondary); font-size: 13px; margin: 2px 0; }
.coll-static-list .lg { font-size: 13px; line-height: 1.5; color: var(--text-secondary); }
@media (max-width: 640px) { .coll-static-list { padding: 0.8rem 1rem 3rem; } }
.share-btn.copied { border-color: var(--accent); color: var(--accent-active-text, var(--accent)); }
.share-ico { font-size: 12px; line-height: 1; }
@media (max-width: 640px) {
  .share-btn { padding: 5px 9px; }
  .share-btn .share-lab { display: none; }
  .share-btn.copied .share-lab { display: inline; }
}
.rgn-count { margin-left: auto; font-size: 11px; color: var(--text-dim); }


/* ─── Active filter chips ─── */
.chip-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 7px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 0.02em;
  padding: 3px 5px 3px 11px; border-radius: 20px;
  border: 1px solid var(--accent); background: var(--accent-dim); color: var(--accent);
}
.chip.r-europe { background: var(--europe-bg); border-color: var(--europe-border); color: var(--europe-text); }
.chip.r-asia   { background: var(--asia-bg);   border-color: var(--asia-border);   color: var(--asia-text); }
.chip.r-latam  { background: var(--latam-bg);  border-color: var(--latam-border);  color: var(--latam-text); }
.chip.r-africa { background: var(--africa-bg); border-color: var(--africa-border); color: var(--africa-text); }
.chip.r-usca   { background: var(--usca-bg);   border-color: var(--usca-border);   color: var(--usca-text); }
.chip-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,0.10); font-size: 10px; line-height: 1; border: none; color: inherit;
}
.chip-x:hover { background: rgba(255,255,255,0.20); }
/* Overflow chips — hidden until the expander is clicked */
.chip.chip-overflow { display: none; }
.chip-row.chips-expanded .chip.chip-overflow { display: inline-flex; }
/* "+N more" expander pill */
.chip-more {
  display: inline-flex; align-items: center;
  font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 0.02em;
  padding: 3px 11px; border-radius: 20px; cursor: pointer;
  border: 1px dashed var(--accent); background: transparent; color: var(--accent);
  transition: background 0.15s;
}
.chip-more:hover { background: var(--accent-dim); }
.chip-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.chip-row.chips-expanded .chip-more { display: none; }

/* Genre row + runtime popover tweaks */
.genre-row { align-items: flex-start; margin-bottom: 7px; }
.genre-row .filter-label { padding-top: 4px; }
.pop .rt-wrap { width: 312px; flex: none; margin: 4px 4px 0; }
.rt-note { font-family: 'DM Mono', monospace; font-size: 11px; color: var(--text-dim); margin: 6px 4px 2px; border-top: 0.5px solid var(--border); padding-top: 8px; }  /* was 10px */


/* Multi-sort chain */
.sortchain { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sortchain-lab { flex-shrink: 0; }
.sort-levels { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sortlvl { position: relative; display: inline-flex; align-items: center; }
.sortlvl-num { color: var(--text-muted); font-size: 11px; margin-right: 5px; }
.sortlvl-plus { color: var(--text-muted); font-size: 14px; line-height: 1; margin-right: 5px; }
/* "Sort More" header inside the secondary dropdown — clicking it clears the level */
.menu-clear {
  display: flex; align-items: center; width: 100%; text-align: left;
  background: none; border: none; cursor: pointer; border-radius: 4px;
  padding: 7px 10px 8px; margin-bottom: 4px;
  border-bottom: 0.5px solid var(--border);
  font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 0.1em;  /* was 10px */
  text-transform: uppercase; color: var(--text-muted); transition: color 0.12s;
}
.menu-clear:hover { color: var(--accent); }
.menu-clear-x { margin-left: auto; font-size: 11px; }
.sortlvl-x {
  margin-left: 2px; padding: 0 2px; border-radius: 50%;
  font-size: 13px; line-height: 1; opacity: 0.55; cursor: pointer;
}
.sortlvl-x:hover { opacity: 1; color: var(--accent); }
.sort-add {
  display: inline-flex; align-items: center; gap: 3px; height: 38px; padding: 0 11px;
  font-family: 'DM Mono', monospace; font-size: 12px; letter-spacing: 0.02em;
  color: var(--text-muted); background: transparent;
  border: 1px dashed var(--border-hover); border-radius: 4px; cursor: pointer; transition: all 0.15s;
}
.sort-add:hover { color: var(--accent); border-color: var(--accent); }
.sort-add span { font-size: 14px; }
.sort-add:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Year / Decade inline toggle (yr · dec ↓) inside the sort pill */
/* Year · Decade row inside the sort dropdown */
.menu-item-yd {
  display: flex; align-items: baseline; gap: 0;
  padding: 4px 10px; border-radius: 4px;
  background: none; border: none; width: 100%;
}
.menu-item-yd:hover { background: var(--card-hover); }
.menu-yd-opt {
  padding: 4px 5px; flex-shrink: 0;
  background: none; border: none; width: auto;
  text-decoration: none; text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.menu-yd-opt:hover {
  background: none; color: var(--text-primary);
  text-decoration: underline dashed;
  text-decoration-color: var(--text-muted);
}
.menu-yd-opt.on { color: var(--accent); }
.menu-yd-opt.on::after { content: none; }
.menu-yd-sep {
  color: var(--text-dim); font-size: 11px; line-height: 1;  /* was 9px */
  align-self: center; user-select: none; padding: 0 1px;
}
/* ↓/↑ direction arrow inside the pill */
.yd-dir {
  padding: 1px 3px; border-radius: 2px; cursor: pointer;
  color: var(--text-muted); font-size: 12px; line-height: 1;
  margin-left: 2px; user-select: none;
  transition: color 0.12s, background 0.12s;
}
.yd-dir:hover { color: var(--accent); background: rgba(125,97,48,0.14); }  /* rgba updated to match new --accent #7d6130 */
.yd-dir:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 2px; }

/* (runtime now lives in a drawer — see unified filter-drawer styles below) */

/* Year slider — shares rt-wrap track/tick styles; only needs width + thumb overrides */
#yr-wrap { flex: 0 0 auto; width: min(38vw, 240px); }
#yr-wrap input[type=range] {
  position: absolute; left: 0; top: 4px; width: 100%; height: 18px; margin: 0;
  background: transparent; -webkit-appearance: none; appearance: none; pointer-events: none;
}
#yr-wrap input[type=range]::-webkit-slider-runnable-track { height: 18px; background: transparent; }
#yr-wrap input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; height: 16px; width: 16px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--accent); cursor: pointer; pointer-events: auto;
}
#yr-wrap input[type=range]::-moz-range-thumb {
  height: 16px; width: 16px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--accent); cursor: pointer; pointer-events: auto;
}
#yr-wrap input[type=range]:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--accent); outline-offset: 2px; }
#yr-wrap input[type=range]:focus-visible::-moz-range-thumb { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ─── Unified filter drawers (Genre / Runtime / Year) ───
   One persistent trigger line; each filter expands into an airy, boxless
   drawer (hairline-separated, no filled panel). Genre + Runtime open at the
   top and collapse on scroll into the cards (re-open at the top); Year is
   manual. Trigger text colour stays constant — only the caret reacts. */
.filter-bar { margin-top: 9px; border-top: 0.5px solid var(--border); padding-top: 9px; }
/* The trigger row never wraps — all filters always sit on a single line.
   Both groups can shrink; only the value text (.v) inside each trigger clips.
   Key labels, sep dots, × and ▾ chrome are always fully visible. */
.trigger-row {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: nowrap;
  min-width: 0;
}
.trigger-row .count { margin-left: 0; margin-top: 0; align-self: center; white-space: nowrap; }
/* Left group (Genre / Runtime / Year) — shrinks so the right group always has room */
.trigger-group {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: nowrap;
  flex-shrink: 1;
  min-width: 0;
}
/* Right group (Country / Language / Stream) — pushed right, also shrinks */
.trigger-group-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: nowrap;
  flex-shrink: 1;
  min-width: 0;
}
/* Every trigger can shrink; it holds the key+sep+×+▾ at min-content width */
.trigger-group .drw-trigger,
.trigger-group-right .drw-trigger {
  min-width: 0;
  flex-shrink: 1;
}
/* The value span is the only part that clips. It sits inline so the underline
   decoration still renders correctly; overflow clips within that inline box. */
.trigger-group .drw-trigger .v,
.trigger-group-right .drw-trigger .v {
  display: inline-block;
  vertical-align: baseline;
  max-width: 14ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Tighten gaps a little at the narrowest desktop widths (< 800px) */
@media (max-width: 800px) {
  .trigger-row { gap: 14px; }
  .trigger-group { gap: 14px; }
  .trigger-group-right { gap: 12px; }
  .trigger-group .drw-trigger .v,
  .trigger-group-right .drw-trigger .v { max-width: 9ch; }
}
.trigger-rule { width: 1px; align-self: stretch; min-height: 20px; background: var(--border); flex-shrink: 0; }

/* ─── Inline Sort toggle (Critics Pick / Decade) — editorial underline tabs.
   Lives on the top row beside the search bar. Two mutually-exclusive mode
   "tabs"; the active one carries an accent underline + a reversible ↓/↑ arrow.
   No boxes — prominence comes from type size and the underline. */
.sort-toggle {
  display: inline-flex; align-items: baseline; gap: 14px;
  flex-shrink: 0; white-space: nowrap;
}
.sort-toggle-lab {
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;  /* was 10px */
  color: var(--text-muted); font-family: 'DM Mono', monospace;
}
.sortbtn {
  display: inline-flex; align-items: baseline; gap: 5px;
  background: none; border: none; border-bottom: 2px solid transparent;
  cursor: pointer; padding: 2px 1px 4px;
  font-family: 'DM Mono', monospace; font-size: 13px; letter-spacing: 0.02em;
  color: var(--text-muted); white-space: nowrap; transition: color 0.15s, border-color 0.15s;
}
.sortbtn:hover { color: var(--text-primary); }
.sortbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
.sortbtn.active { color: var(--accent); border-bottom-color: var(--accent); }

/* Film count — sits just above the film list, right-aligned. No own border:
   the sticky .controls-wrap already provides the single divider above it. */
.count-row { margin-bottom: 4px; text-align: right; }
/* Don't show the divider/gap before films load, while the count is empty */
#count-row:has(#cnt:empty) { display: none; }
@media (max-width: 640px) {
  .sort-toggle { gap: 10px; }
}

.drw-trigger {
  display: inline-flex; align-items: baseline; gap: 6px;
  background: none; border: none; cursor: pointer;
  font-family: 'DM Mono', monospace; font-size: 13px; letter-spacing: 0.02em;
  color: var(--text-secondary); padding: 3px 0; white-space: nowrap; transition: color 0.15s;
}
/* Inside the trigger row, buttons must be able to compress so their .v can clip */
.trigger-group .drw-trigger,
.trigger-group-right .drw-trigger { white-space: normal; overflow: hidden; }
.drw-trigger.trigger-hidden { display: none; }
.drw-trigger .k { color: var(--text-secondary); font-size: 13px; white-space: nowrap; }
.drw-trigger .sep { color: var(--text-dim); font-size: 13px; white-space: nowrap; }
.drw-trigger .car { font-size: 11px; opacity: 0.55; transition: transform 0.25s, opacity 0.2s; white-space: nowrap; }  /* was 9px */
.drw-trigger .v {
  color: var(--text-secondary); font-size: 13px;
  text-decoration: underline dashed; text-decoration-color: var(--text-dim);
  text-decoration-thickness: 1px; text-underline-offset: 4px;
  transition: text-decoration-color 0.15s, color 0.15s;
}
/* A filter with a non-default selection turns its value to accent + solid underline. */
.drw-trigger.active .v {
  color: var(--accent);
  text-decoration-style: solid; text-decoration-color: var(--accent);
}
.drw-trigger:hover { color: var(--text-primary); }
.drw-trigger:hover .k { color: var(--text-primary); }
.drw-trigger:hover .v { text-decoration-color: var(--accent); }
.drw-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
.drw-trigger[aria-expanded="true"] .car { transform: rotate(180deg); opacity: 0.85; }

/* The drawer — animates height via the grid-rows trick */
.drw { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s cubic-bezier(.4,0,.2,1); }
.drw.open { grid-template-rows: 1fr; }
.drw-in { overflow: hidden; min-width: 0; }
.drw-pad { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 13px 2px 5px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.drw-pad > * { cursor: auto; }
.drw-pad .filter-label { align-self: center; min-width: auto; }
.drw-pad .rt-wrap, .drw-pad #yr-wrap { width: min(72vw, 440px); flex: 0 0 auto; }

@media (prefers-reduced-motion: reduce) { .drw { transition: none; } }
@media (max-width: 640px) { .drw-pad .rt-wrap, .drw-pad #yr-wrap { width: 100%; } }
@media (max-width: 640px) { .trigger-group-right { margin-left: 0; } .trigger-rule { display: none; } }

/* ════════════════════════════════════════════════════════════════════════
   MOBILE & TOUCH LAYER  ·  appended
   Everything below is gated by `max-width: 640px` or `hover: none`, so the
   laptop/desktop experience (≥ 641px, hover-capable) is completely untouched —
   no base rule above is modified, these only add/override at phone widths.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

  /* — Inputs at 16px: easier to read, and stops mobile zoom-on-focus — */
  .search-bar { font-size: 16px; padding-top: 12px; padding-bottom: 12px; }
  .pop-search { font-size: 16px; }

  /* — Compact the (still sticky) controls so the bar pins without eating
       half the screen — */
  .controls-wrap { padding: 0.6rem 1rem 0.5rem; }
  .tbar          { gap: 8px; margin-bottom: 8px; }
  .filter-bar    { margin-top: 8px; padding-top: 8px; }
  .trigger-row   { gap: 9px 16px; }

  /* — Roomier tap targets (cursor-sized hit areas are fiddly with a thumb) — */
  .fb          { min-height: 38px; padding: 8px 14px; font-size: 13px; }
  .gp-parent   { min-height: 34px; padding: 7px 13px; font-size: 12px; }
  .gp-child    { min-height: 32px; padding: 6px 12px; font-size: 11px; }
  .drw-trigger { padding: 8px 0; }
  .sortbtn     { padding: 6px 2px 8px; }
  .us-btn      { padding: 9px 13px; font-size: 12px; }
  .us-view-btn { padding: 9px 14px; }
  .trailer-btn, .watch-btn { padding: 9px 12px; font-size: 12px; }
  .genre-tag   { padding: 5px 11px; font-size: 11px; }
  .provider-chip { padding: 7px 9px; }
  .chip-x      { width: 22px; height: 22px; }
  .dec-jump      { padding: 6px 0; }
  .dec-jump-item { padding: 8px 12px; }
  .menu-item   { padding: 9px 10px; }
  .rgn-row     { padding: 9px 8px; }
  .foot-btn, .reload-btn { padding: 9px 14px; font-size: 13px; }

  /* — Fatter slider thumbs so they're grabbable; id-level rule for the year wrap — */
  .rt-wrap input[type=range]::-webkit-slider-thumb,
  #yr-wrap input[type=range]::-webkit-slider-thumb { height: 24px; width: 24px; }
  .rt-wrap input[type=range]::-moz-range-thumb,
  #yr-wrap input[type=range]::-moz-range-thumb     { height: 24px; width: 24px; }

  /* — Popovers/menus never exceed the viewport; they scroll inside instead — */
  .pop, .pop-wide { min-width: 0; width: min(92vw, 340px); max-width: 92vw; }
  .pop-body       { max-height: 48vh; }
  .dec-jump-menu  { max-height: 60vh; overflow-y: auto; }

  /* — Card layout: the poster floats; the tombstone (title · meta · genres)
       holds the column beside it; plot + actions reflow to full width below,
       filling the space next to the poster's lower edge. — */
  .film-card   { display: block; padding: 0.9rem 1rem; }
  .film-card::after { content: ""; display: block; clear: both; }   /* contain the float */
  .film-poster { float: left; width: 126px; margin: 0 0.85rem 0.5rem 0; align-self: auto; }
  .film-body   { display: block; }

  /* The tombstone is the only thing that stays beside the poster. overflow:hidden
     gives it its own formatting context so it never slides under the poster. */
  .film-tomb   { display: block; overflow: hidden; }

  /* Genres get their own full-width row inside the tombstone, capped to two
     lines by JS with a small round "more" button. */
  .film-genres {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    flex-basis: 100%; width: 100%; margin-top: 2px;
  }
  .genre-tag.g-hidden { display: none; }
  .film-genres-more {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; padding: 0; margin-left: 2px; flex-shrink: 0;
    border: 1px solid var(--border); border-radius: 50%;
    background: transparent; color: var(--text-muted);
    cursor: pointer; vertical-align: middle;
    transition: border-color 0.15s, color 0.15s;
    -webkit-tap-highlight-color: transparent;
  }
  .film-genres-more:hover { color: var(--accent); border-color: var(--accent); }
  .film-genres-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .film-genres-more svg { display: block; }

  /* Plot + history: normal flow so they wrap beside the poster and then run
     full width. Drop the partial-width divider that looks wrong mid-float. */
  .film-logline, .film-hist {
    font-size: 0.95rem; border-top: 0; padding-top: 0; margin-top: 12px;
  }
  /* Actions clear the float and sit full width with a divider above. */
  .film-actions {
    clear: both; margin-top: 12px; padding-top: 12px;
    border-top: 0.5px solid var(--border);
  }
  /* Two-column layout: trailer+watch stack on the left, Seen+To Watch stack on the right */
  .film-actions-btns {
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
  }
  /* Left group: trailer + where-to-watch stacked vertically */
  .film-actions-left {
    display: flex;
    flex-direction: column;
    gap: 7px;
    align-items: flex-start;
  }
  /* Right group (userstate): Seen + To Watch stacked vertically */
  .film-actions-btns .film-userstate {
    margin-left: 0;
    flex-direction: column;
    align-items: flex-end;
    gap: 7px;
    flex-shrink: 0;
  }
  /* No-actions card: the Seen / To Watch group is the bottom row. */
  .film-userstate.us-anchor {
    clear: both; margin-top: 12px; padding-top: 12px;
    border-top: 0.5px solid var(--border);
  }

  /* — Nothing long can force a sideways scroll — */
  .film-title, .director, .film-logline, .film-hist,
  .film-chinese, .page-footer { overflow-wrap: anywhere; }
}


/* ════════════════════════════════════════════════════════════════════════
   MOBILE SIDEBAR  ·  appended
   New elements (hamburger, sidebar, scrim) are display:none by default, so
   they never appear on desktop. The JS only relocates the filter controls
   into the sidebar at ≤640px and restores them above 640px, so the desktop
   DOM + layout is identical to the original.
   ════════════════════════════════════════════════════════════════════════ */
.m-menu-btn, .m-sidebar, .m-scrim { display: none; }

@media (max-width: 640px) {

  /* — Header: title-only on mobile now that the hamburger lives in the sticky bar — */
  .page-header { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
  .page-header-text { display: flex; flex-direction: column; min-width: 0; }

  /* — Hamburger: sits in the tbar, inline with the search bar — */
  body.m-data-ready .m-menu-btn, html.home-list .m-menu-btn {
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    width: 48px; height: 48px; padding: 0;
    background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
    cursor: pointer; transition: border-color 0.15s, background 0.15s;
  }
  .m-menu-btn:active { background: var(--accent-dim); border-color: var(--accent); }
  .m-menu-btn { position: relative; }
  .m-menu-btn.has-filters::after {
    content: ""; position: absolute; top: 7px; right: 7px;
    width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  }
  .m-menu-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .m-menu-ico { display: flex; flex-direction: column; gap: 4px; width: 20px; }
  .m-menu-ico span { display: block; height: 2px; width: 100%; background: var(--text-primary); border-radius: 2px; }

  /* — Search bar: taller and more visually prominent on mobile — */
  .search-bar { padding-top: 14px; padding-bottom: 14px; font-size: 16px; border-radius: 6px; }
  .tbar-search .search-icon { font-size: 17px; }
  .tbar { align-items: center; }

  /* — Hide the in-body filter machinery; it now lives in the sidebar — */
  #filter-bar, #chip-row { display: none; }

  /* — Off-canvas sidebar, slides in from the left — */
  .m-sidebar {
    flex-direction: column;
    position: fixed; top: 0; left: 0; height: 100%;
    width: min(86vw, 340px); z-index: 100;
    background: var(--bg);
    border-right: 0.5px solid var(--border-hover);
    box-shadow: 10px 0 34px rgba(0,0,0,0.30);
    overscroll-behavior: contain;
  }
  .m-sidebar.m-open { display: flex; }      /* instant show; no slide/compositing */

  .m-scrim {
    position: fixed; inset: 0; z-index: 90;
    background: transparent;   /* no dim: a translucent layer forces the whole
                                  list to be re-rasterized for blending, which
                                  is the close-time cost. Opaque panel + clear
                                  catcher means nothing blends over the list. */
    touch-action: manipulation;
  }
  .m-scrim.m-open { display: block; }        /* instant; transparent tap-catcher */
  .m-menu-btn, .m-sidebar-close { touch-action: manipulation; }

  .m-sidebar-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 15px 16px 12px; flex-shrink: 0;
    border-bottom: 0.5px solid var(--border);
  }
  .m-sidebar-title {
    font-family: 'DM Serif Display', Georgia, serif;
    font-size: 1.35rem; color: var(--text-primary); line-height: 1;
  }
  .m-sidebar-close {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; min-height: 44px; margin-right: -6px;
    background: none; border: none; color: var(--text-muted);
    font-size: 28px; line-height: 1; cursor: pointer;
    padding: 0; border-radius: 6px;
  }
  .m-sidebar-close:active { background: var(--accent-dim); color: var(--accent); }
  .m-sidebar-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

  .m-sidebar-body {
    flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 2px 16px 32px;
  }
  .m-sec { padding: 3px 0; border-bottom: 0.5px solid var(--border); }
  .m-sec:last-child { border-bottom: none; }
  .m-sec:empty { display: none; }

  /* — Relocated triggers become full-width accordion headers — */
  .m-sidebar .drw-trigger, .m-sidebar .ctl-trigger {
    display: flex; width: 100%; align-items: center; gap: 7px;
    padding: 14px 2px; font-size: 15px; flex-wrap: nowrap;
  }
  .m-sidebar .drw-trigger .k, .m-sidebar .ctl-trigger .k { font-size: 15px; flex-shrink: 0; }
  .m-sidebar .drw-trigger .v, .m-sidebar .ctl-trigger .v { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .m-sidebar .drw-trigger .car, .m-sidebar .ctl-trigger .car { margin-left: auto; font-size: 11px; flex-shrink: 0; }
  .m-sidebar .drw-trigger .drw-trigger-x, .m-sidebar .ctl-trigger .drw-trigger-x { flex-shrink: 0; }
  /* keep the accordion header visible even when its drawer is open */
  .m-sidebar .drw-trigger.trigger-hidden { display: flex; }
  /* the drawer carries no duplicate label inside the sidebar */
  .m-sidebar .drw-pad .filter-label { display: none; }
  .m-sidebar .drw-pad { padding: 4px 2px 14px; gap: 12px; }
  .m-sidebar .ctl { width: 100%; position: static; }

  /* — Country / Language: expand INLINE inside the sidebar (no floating
       popover that could run off-screen) — */
  .m-sidebar .pop, .m-sidebar .pop-wide {
    position: static; width: 100%; min-width: 0; max-width: none;
    background: transparent; border: 0; border-radius: 0;
    box-shadow: none; padding: 2px 2px 12px;
  }
  .m-sidebar .ctl.open .pop { display: block; }
  .m-sidebar .pop-body { max-height: none; }

  /* — Sliders fill the sidebar width — */
  .m-sidebar .rt-wrap, .m-sidebar #yr-wrap { width: 100%; flex: 1 1 auto; }

  /* — Genre pills wrap to fill the sidebar — */
  .m-sidebar #gf { gap: 7px; }

  /* — Sort section (first in the sidebar): Sort  critics | popularity — */
  .m-sidebar .sort-toggle {
    display: flex; flex-wrap: wrap; align-items: baseline;
    gap: 12px 18px; width: 100%; padding: 14px 2px;
  }
  .m-sidebar .sort-toggle-lab { font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--text-primary); }
  .m-sidebar .sortbtn { font-size: 15px; text-transform: lowercase; }

  /* ── Mobile-friendly Country (region) picker ──────────────────────────
     The desktop picker is a compact tree built for a mouse. On mobile it
     lives inline in the sidebar, so we rethink it as a touch-first list:
     · Continent and subregion headers become full-width tap strips with a
       large font and generous min-height.
     · The tiny separate caret button is hidden — instead the whole
       continent label row acts as the expand toggle (we achieve this by
       making the caret button invisible but still covering the row via a
       ::after overlay approach) — actually simpler: we just enlarge every
       element so each individual target is thumb-sized (≥44px), which is
       enough for accurate tapping even when they sit next to each other.
     · Country rows get a bigger font, taller height, and a larger checkbox.
     · The search-within-picker input is promoted to 16px so iOS won't zoom.
  ─────────────────────────────────────────────────────────────────────── */

  /* Continent block — add breathing room between blocks */
  .m-sidebar .rgn-continent-block { margin-bottom: 2px; }

  /* Continent row: make the whole strip a clear, thumb-sized header */
  .m-sidebar .rgn-cont {
    min-height: 52px;
    border-top: 0.5px solid var(--border);
    background: var(--surface);
    border-radius: 6px;
    margin-bottom: 2px;
    gap: 0;
  }
  .m-sidebar .rgn-continent-block:first-child .rgn-cont { border-top: none; }

  /* Caret button: taller tap target, larger glyph */
  .m-sidebar .rgn-caret-btn {
    min-width: 44px; min-height: 52px;
    padding: 0 8px 0 12px;
    justify-content: center;
  }
  .m-sidebar .rgn-caret { font-size: 12px; }

  /* Continent toggle (checkbox) — larger box and tap area */
  .m-sidebar .rgn-cont > .rgn-toggle { padding: 10px 6px; }
  .m-sidebar .rgn-cont > .rgn-toggle .rgn-toggle-box {
    width: 20px; height: 20px; border-radius: 4px; font-size: 13px;
  }

  /* Continent label button: big text, fills the row */
  .m-sidebar .rgn-cont-label-btn {
    font-size: 14px; letter-spacing: 0.06em;
    min-height: 52px; padding: 0 12px 0 6px;
    align-items: center;
  }
  .m-sidebar .rgn-cont-badge { font-size: 11px; min-width: 20px; height: 20px; }

  /* Children panel: a bit of left indent so it reads as nested */
  .m-sidebar .rgn-cont-children { padding-left: 8px; padding-bottom: 6px; }

  /* Subregion header row */
  .m-sidebar .rgn-grp-head {
    min-height: 46px; padding: 0 8px 0 8px;
    font-size: 12px; border-top: 0.5px solid var(--border);
    align-items: center;
  }
  .m-sidebar .rgn-subregion-block:first-child .rgn-grp-head { border-top: none; }

  /* Subregion caret */
  .m-sidebar .rgn-sub-caret-btn {
    min-width: 32px; min-height: 46px;
    padding: 0 6px 0 0;
    justify-content: center;
  }
  .m-sidebar .rgn-sub-caret { font-size: 10px; }

  /* Subregion toggle */
  .m-sidebar .rgn-grp-head > .rgn-toggle { padding: 8px 4px; }
  .m-sidebar .rgn-grp-head > .rgn-toggle .rgn-toggle-box {
    width: 18px; height: 18px; border-radius: 4px; font-size: 12px;
  }

  /* Subregion label */
  .m-sidebar .rgn-sub-label-btn {
    font-size: 12px; letter-spacing: 0.06em;
    min-height: 46px; padding: 0 8px;
    display: flex; align-items: center;
  }

  /* Country rows: full-width, generous height, bigger everything */
  .m-sidebar .rgn-row {
    min-height: 48px;
    font-size: 15px; letter-spacing: 0.01em;
    padding: 10px 12px 10px 16px;
    border-radius: 6px;
    gap: 12px;
  }
  .m-sidebar .rgn-sub-children .rgn-row { padding-left: 24px; }

  /* Checkbox box inside each country row */
  .m-sidebar .rgn-box {
    width: 22px; height: 22px; border-radius: 4px;
    font-size: 14px; flex-shrink: 0;
  }

  /* Film count: right-aligned, readable */
  .m-sidebar .rgn-count { font-size: 13px; }

  /* Search within picker */
  .m-sidebar .pop-search {
    font-size: 16px; padding: 12px 14px;
    border-radius: 6px; margin-bottom: 8px;
  }
}

/* ─── Faceted filter visibility ──────────────────────────────────────────
   Country/Language picker entries can be hidden for two INDEPENDENT reasons:
   (a) .facet-hidden — the entry isn't present in the currently filtered batch
       of films (set on each render by updateRegionFacetCounts /
       updateLanguageFacetCounts), and
   (b) .search-hidden — the entry doesn't match the picker's own search box.
   Either reason hides; using separate classes lets them compose without one
   clobbering the other. */
.lang-row.facet-hidden, .rgn-row.facet-hidden,
.rgn-subregion-block.facet-hidden, .rgn-continent-block.facet-hidden,
.lang-row.search-hidden, .rgn-row.search-hidden,
.rgn-subregion-block.search-hidden, .rgn-continent-block.search-hidden {
  display: none !important;
}

/* ─── Streaming provider picker ───────────────────────────────────────── */
/* Provider logo in picker rows */
.prov-logo {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  object-fit: cover;
  flex-shrink: 0;
  vertical-align: middle;
}
.prov-logo-placeholder {
  display: inline-block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
/* Provider section head — matches .rgn-grp-head style */
.prov-sec-head {
  padding: 6px 2px 4px;
}
/* Provider and section-block facet/search hiding */
.prov-row.facet-hidden, .prov-row.search-hidden,
.prov-section-block.facet-hidden, .prov-section-block.search-hidden {
  display: none !important;
}


/* VIRTUALIZER override: the JS virtualizer now removes off-screen cards
     from the DOM entirely, so content-visibility is no longer needed on mobile
     (and disabling it makes block heights measure accurately). */
@media (max-width: 640px){
  .film-card{ content-visibility: visible; contain-intrinsic-size: auto; }
  .vblk{ display: block; }
}