/* Layout: header + view tabs + filter strip over a poster wall; a film opens as a sheet with its showings as ticket stubs. */
:root {
  --bg: #eef0f2; --surface: #ffffff; --ink: #16181d; --muted: #5d6470; --line: #d6dae1;
  --accent: #a3213a; --accent-ink: #ffffff; --chip: #e2e5ea; --chip-on: #16181d; --chip-on-ink: #f3f4f6;
  --soon: #1f7a45; --scrim: rgba(10, 12, 16, .55); --edge: #a9b0bb; --stick-shadow: rgba(0, 0, 0, .2); --band: #ffffff;
  --display: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --body: "IBM Plex Sans", -apple-system, "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #101216; --surface: #191c22; --ink: #e9ebef; --muted: #9097a3; --line: #2b2f37;
    --accent: #f0647d; --accent-ink: #101216; --chip: #23272e; --chip-on: #e9ebef; --chip-on-ink: #101216;
    --soon: #6fd198; --scrim: rgba(0, 0, 0, .7); --edge: #4a515d; --stick-shadow: rgba(0, 0, 0, .6); --band: #0a0c0f;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #101216; --surface: #191c22; --ink: #e9ebef; --muted: #9097a3; --line: #2b2f37;
  --accent: #f0647d; --accent-ink: #101216; --chip: #23272e; --chip-on: #e9ebef; --chip-on-ink: #101216;
  --soon: #6fd198; --scrim: rgba(0, 0, 0, .7); --edge: #4a515d; --stick-shadow: rgba(0, 0, 0, .6); --band: #0a0c0f;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.5 var(--body);
  padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
a { color: inherit; }
button { font: inherit; color: inherit; }
img { max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wrap { max-width: 1180px; margin: 0 auto; padding-inline: 16px; }

/* header */
.top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-block: 24px 14px; }
h1 { font: 800 clamp(36px, 7vw, 56px)/0.9 var(--display); margin: 0 0 6px; text-transform: uppercase; letter-spacing: .01em; }
h1 span { color: var(--accent); }
.sub { color: var(--muted); font-size: 13px; }
.topright { display: flex; gap: 8px; align-items: center; flex: none; }
.topright select { font-weight: 600; }
.regionsopt .row { margin-top: 6px; gap: 14px; }
.banner { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--soon);
  padding: 10px 14px; border-radius: 4px; margin-bottom: 12px; font-size: 14px; }

.btn { border: 1px solid var(--ink); background: var(--ink); color: var(--bg); padding: 8px 14px; border-radius: 6px;
  cursor: pointer; font-weight: 500; font-size: 14px; white-space: nowrap; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn.accent { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn:disabled { opacity: .5; cursor: default; }

/* layout: filter sidebar beside the grid on wide screens; a slide-in panel on narrow ones */
.layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px; align-items: start; }
.main { min-width: 0; }
.filters { position: sticky; top: 12px; max-height: calc(100dvh - 24px); overflow: auto; padding-block: 12px 24px; }
.filters-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.filters-head h2 { font: 700 20px/1 var(--display); text-transform: uppercase; letter-spacing: .02em; margin: 0; }
#filtersDone, #filtersBtn { display: none; }
.fg { border: 0; margin: 0; padding: 12px 0; border-top: 1px solid var(--line); min-width: 0; }
.fg legend { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; color: var(--muted); padding: 0 0 6px; }
.fg legend .hint { text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: 4px; }
.ck { display: flex; align-items: center; gap: 8px; font-size: 14px; padding: 4px 0; cursor: pointer; }
.ck input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); flex: none; }
.ck span:first-of-type { flex: 1; min-width: 0; }
.ck .n { font: 500 11px var(--mono); color: var(--muted); }
.btn.small { padding: 5px 10px; font-size: 13px; }
@media (max-width: 999px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  #filtersBtn, #filtersDone { display: inline-block; }
  /* phones: the filter panel is a bottom sheet */
  .filters { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 20; max-height: 85dvh;
    background: var(--surface); border-top: 1px solid var(--edge); border-radius: 14px 14px 0 0; padding: 16px 16px 0;
    transform: translateY(105%); transition: transform .2s ease; }
  body.filters-open .filters { transform: none; box-shadow: 0 0 0 100vmax var(--scrim); }
}

/* pinned bar: [All films | ★ My watchlist], then [search ......] [Date] [Filters]. */
.bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-width: 0; }
/* All films / My watchlist: a full-width two-way switch */
.listswitch { display: flex; border: 1px solid var(--edge); border-radius: 8px; overflow: hidden; }
.listswitch button { flex: 1; border: 0; background: transparent; color: var(--ink); padding: 9px 8px; cursor: pointer;
  font: 600 14px var(--body); }
.listswitch button + button { border-left: 1px solid var(--edge); }
.listswitch button[aria-pressed="true"] { background: var(--chip-on); color: var(--chip-on-ink); }
.listswitch button[data-list="watch"][aria-pressed="false"] { color: var(--accent); }
#view { flex: 1 1 auto; min-width: 0; }
.searchbox { position: relative; display: flex; align-items: center; flex: 1 1 160px; min-width: 0; }
.searchbox input { flex: 1; min-width: 0; text-overflow: ellipsis; }
.searchbox svg { position: absolute; left: 13px; color: var(--muted); pointer-events: none; }
.iconbtn { flex: none; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; font-size: 20px; line-height: 1; padding: 0; }
.chip.watch { font-weight: 600; flex: none; border-color: var(--accent); }
.chip.watch[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
#filtersBtn { flex: none; }
/* filter options as chips: the real checkbox/radio is hidden inside a tappable pill */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.opt-chip { position: relative; display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--chip); font-size: 13px; cursor: pointer; user-select: none; }
.opt-chip input { position: absolute; opacity: 0; pointer-events: none; }
.opt-chip .n { font: 500 11px var(--mono); opacity: .65; }
.opt-chip:has(input:checked) { background: var(--chip-on); color: var(--chip-on-ink); border-color: var(--chip-on); }
.opt-chip:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.filters-foot { display: flex; gap: 8px; justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--line); }
#filtersShow { display: none; }
@media (max-width: 999px) {
  /* narrow bar: Date and Filters keep their size and the search field gives way (down to its icon) */
  .bar { flex-wrap: nowrap; }
  .searchbox { flex: 1 1 0; min-width: var(--pill-h); }
  #filtersShow { display: inline-block; flex: 1; }
  .filters { display: flex; flex-direction: column; }
  #filtersBody { flex: 1; overflow: auto; }
  .filters-foot { position: sticky; bottom: 0; background: var(--surface); padding: 12px 0 calc(12px + env(safe-area-inset-bottom, 0px)); }
}

/* while you're typing in a narrow search field (phones, small tablets), it takes the whole bar */
@container (max-width: 459px) { .bar:has(#q:focus) > :not(.searchbox) { display: none; } }
/* tablets and small laptops: the switch and the bar share one row, as on desktop, instead of two stretched rows */
@media (min-width: 640px) and (max-width: 999px) {
  .controls { grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); align-items: center; }
}

@media (min-width: 1000px) {
  .controls { grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); align-items: center; }
  #view { flex: 0 1 240px; }
}

/* controls */
.controls { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: var(--bg);
  padding-block: 12px; display: grid; gap: 8px; }
.row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
input[type=search], input[type=email] { flex: 1 1 240px; min-width: 0; font: inherit; padding: 9px 12px; border-radius: 6px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
select { font: inherit; padding: 8px 10px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.chip { font-size: 13px; padding: 5px 11px; border-radius: 999px; border: 1px solid transparent; background: var(--chip);
  cursor: pointer; white-space: nowrap; }
.chip.on, .chip[aria-pressed="true"] { background: var(--chip-on); color: var(--chip-on-ink); }
.chip .n { opacity: .6; margin-left: 5px; font: 500 11px var(--mono); }
.seg { display: inline-flex; flex-wrap: wrap; background: var(--chip); border-radius: 999px; padding: 2px; }
.seg .chip { background: transparent; }
.seg .chip.on { background: var(--chip-on); }
.cinemas { padding: 8px 0 2px; }
.linkbtn { background: none; border: 0; color: var(--accent); cursor: pointer; font-size: 13px; padding: 5px 4px; }
.sec h2 .n { font: 500 11px var(--mono); opacity: .7; }
/* sections: header pins under the controls bar; click collapses to one line */
.sec { scroll-margin-top: var(--stick-top, 0px); }
.sech { position: sticky; top: var(--stick-top, 0px); z-index: 4; margin: 0; background: var(--bg); }
.sech button { width: 100%; display: flex; align-items: baseline; gap: 10px; text-align: left; background: none; border: 0;
  border-bottom: 1px solid var(--edge); padding: 18px 0 8px; cursor: pointer; color: var(--ink); }
.sech .lbl { font: 700 24px/1 var(--display); text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; }
.sech .peek { flex: 1; min-width: 0; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sech .chev { margin-left: auto; color: var(--muted); font-size: 14px; }
.sec > .grid { padding-top: 14px; }
.card.nosale .poster img { opacity: .4; filter: grayscale(.6); }
.card.nosale h3 { color: var(--muted); }
.nosaletag { display: inline-block; margin-top: 2px; font-size: 11px; padding: 1px 6px; border-radius: 3px;
  border: 1px dashed var(--muted); color: var(--muted); }
.count { color: var(--muted); font: 500 12px var(--mono); padding-block: 14px 10px; }

/* poster wall */
.grid { list-style: none; margin: 0; padding: 0 0 10px; display: grid; gap: 22px 16px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.card { position: relative; min-width: 0; }
.card > a { display: block; text-decoration: none; }
.poster { position: relative; aspect-ratio: 2 / 3; max-width: 100%; border-radius: 4px; overflow: hidden; background: var(--chip); }
.poster img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease; }
.card > a:hover .poster img { transform: scale(1.03); }
.poster .ph { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 10px;
  font: 800 22px/0.95 var(--display); text-transform: uppercase; color: var(--muted); }
.flag { position: absolute; left: 6px; top: 6px; background: var(--accent); color: var(--accent-ink);
  font: 600 11px/1 var(--body); letter-spacing: .06em; text-transform: uppercase; padding: 4px 6px; border-radius: 3px; }
.kind { position: absolute; left: 6px; bottom: 6px; background: rgba(10, 12, 16, .7); color: #fff;
  font: 600 10px/1 var(--body); letter-spacing: .05em; text-transform: uppercase; padding: 4px 6px; border-radius: 3px; }
.hint { color: var(--muted); font-size: 12px; margin-left: 4px; }
.star { position: absolute; right: 6px; top: 6px; width: 32px; height: 32px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(10, 12, 16, .55); color: #fff; font-size: 17px; line-height: 32px; text-align: center; padding: 0; }
.star.on { background: var(--accent); color: var(--accent-ink); }
.card h3 { font: 700 19px/1.02 var(--display); text-transform: uppercase; margin: 8px 0 3px; letter-spacing: .01em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card .m { color: var(--muted); font-size: 12px; line-height: 1.35; }
.card .m b { color: var(--ink); font-weight: 500; }
.card .m .today { color: var(--soon); }
.empty { grid-column: 1 / -1; padding: 50px 0; color: var(--muted); text-align: center; }
.foot { color: var(--muted); font-size: 12px; padding-block: 10px 40px; border-top: 1px solid var(--line); }

/* dialogs */
dialog { border: 0; padding: 0; background: var(--surface); color: var(--ink); border-radius: 8px;
  width: min(760px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); overflow: auto; }
dialog::backdrop { background: var(--scrim); }
#account { width: min(440px, calc(100vw - 32px)); padding: 22px; }
.dlg-close { position: sticky; top: 0; height: 0; display: flex; justify-content: flex-end; z-index: 5; }  /* above pinned headings and card overlays */
.x { width: 36px; height: 36px; margin: 8px; border-radius: 50%; border: 0; background: var(--chip); font-size: 22px; line-height: 1; cursor: pointer; }
.fhead { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 20px; padding: 22px; }
.fhead .poster { width: 150px; }
.fhead h2 { font: 800 34px/0.95 var(--display); text-transform: uppercase; margin: 0 0 6px; text-wrap: balance; padding-right: 36px; }
.fhead .alt { color: var(--muted); font-style: italic; margin: -2px 0 6px; }
.fhead .meta { color: var(--muted); font-size: 13px; margin-bottom: 10px; }
.fhead p { margin: 0 0 12px; font-size: 14px; max-width: 62ch; }
.badges { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; }
.badge { font-size: 12px; padding: 2px 8px; border-radius: 3px; background: var(--chip); }
.badge.line { background: transparent; border: 1px solid var(--line); color: var(--muted); }
.badge.new { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.exts { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.ext { font-size: 12px; padding: 3px 9px; border-radius: 3px; border: 1px solid var(--line); text-decoration: none; color: var(--muted); }
.ext:hover { border-color: var(--ink); color: var(--ink); }
.ext.lb { color: var(--ink); }
.ext b { font: 500 12px var(--mono); color: var(--soon); }
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; }
.actions a { color: var(--muted); }
.days { padding: 0 22px 22px; }
.day { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; padding-block: 12px; border-top: 1px solid var(--line); }
.day h4 { margin: 0; font: 700 18px/1.1 var(--display); text-transform: uppercase; }
.day h4 small { display: block; font: 500 12px var(--mono); color: var(--muted); text-transform: none; margin-top: 3px; }
.day.today h4 { color: var(--soon); }
.stubs { display: flex; flex-wrap: wrap; gap: 8px; }
.stub { display: inline-flex; flex-direction: column; text-decoration: none; padding: 6px 11px 6px 13px; border-radius: 3px;
  border: 1px solid var(--line); border-left: 3px dotted var(--accent); background: var(--bg); font-size: 12px; line-height: 1.3; max-width: 100%; }
a.stub:hover { border-color: var(--accent); }
.stub .t { font: 500 15px var(--mono); }
.stub .c { color: var(--muted); }
.stub .tg { color: var(--accent); font-size: 11px; }
.stub .nt { font-size: 11px; color: var(--ink); max-width: 28ch; }
.stub.nosale { border-left-color: var(--muted); border-style: dashed; opacity: .75; }
.hiddenNote { color: var(--muted); font-size: 13px; padding: 10px 0 0; border-top: 1px solid var(--line); }

/* account */
#account h2 { font: 800 28px/1 var(--display); text-transform: uppercase; margin: 0 0 8px; }
#account p { margin: 0 0 14px; font-size: 14px; color: var(--muted); }
#account form.signin { display: flex; gap: 8px; flex-wrap: wrap; }
.opt { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; padding: 12px 0; border-top: 1px solid var(--line); font-size: 14px; cursor: pointer; }
.opt input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--accent); }
.opt small { display: block; color: var(--muted); font-size: 12px; }
.who { font: 500 13px var(--mono); margin-bottom: 14px; word-break: break-all; }
.msg { font-size: 13px; margin-top: 10px; }
.msg.err { color: var(--accent); }

@media (max-width: 560px) {
  .grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 18px 10px; }
  .card h3 { font-size: 16px; }

  dialog { width: 100vw; max-width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; margin: 0; }
  .fhead { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; padding: 16px; }
  .fhead .poster { width: 96px; }
  .fhead h2 { font-size: 26px; }
  .days { padding: 0 16px 24px; }
  .day { grid-template-columns: 1fr; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Last on purpose, so nothing overrides it: iPhone Safari zooms the page when you tap a text box
   smaller than 16px (that's what made the page look too wide after tapping search). */
@media (max-width: 1000px) {
  input[type=search], input[type=email], input[inputmode], select, textarea { font-size: 16px; }
}

/* ===================== Preview: V1 layout in the 17:54 "pill" style ===================== */
:root { --accent-tint: #f7e1e6; --pill-h: 36px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --accent-tint: #3b2028; } }
:root[data-theme="dark"] { --accent-tint: #3b2028; }


/* one control language: soft pills, same height */
.pill { display: inline-flex; align-items: center; gap: 6px; height: var(--pill-h); padding: 0 14px; border-radius: 999px;
  border: 1px solid transparent; background: var(--chip); color: var(--ink); font: 600 14px var(--body); cursor: pointer;
  white-space: nowrap; max-width: 100%; }
.pill:hover { border-color: var(--line); }
.pill .k { font-weight: 400; color: var(--muted); }
.pill .chev { color: var(--muted); font-size: 11px; margin-left: 2px; }
#filtersBtn[aria-pressed="true"] { background: var(--accent-tint); border-color: var(--accent); }
.iconbtn { width: var(--pill-h); height: var(--pill-h); border-radius: 999px; border: 1px solid transparent; background: var(--chip); }
.searchbox input { height: var(--pill-h); border-radius: 999px; border: 1px solid transparent; background: var(--chip); padding: 0 14px 0 36px; }

/* All films / My watchlist: a pill switch, like 17:54's switches */
.listswitch { display: flex; gap: 2px; padding: 3px; border: 0; border-radius: 999px; background: var(--chip); }
.listswitch button { flex: 1; border: 0; border-radius: 999px; background: transparent; color: var(--muted); padding: 7px 10px;
  font: 600 14px var(--body); cursor: pointer; }
.listswitch button + button { border-left: 0; }
.listswitch button[data-list="all"][aria-pressed="true"] { background: var(--chip-on); color: var(--chip-on-ink); }
.listswitch button[data-list="watch"] { color: var(--accent); }
.listswitch button[data-list="watch"][aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }

/* pill menus */
.dd { position: relative; flex: none; min-width: 0; }
.menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 230px; z-index: 30; padding: 6px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0, 0, 0, .28); }
.menu.right { left: auto; right: 0; min-width: 160px; }
.menu button { display: block; width: 100%; text-align: left; border: 0; background: none; color: var(--ink); cursor: pointer;
  padding: 9px 12px 9px 30px; border-radius: 8px; font: 500 14px var(--body); position: relative; }
.menu button small { display: block; color: var(--muted); font-size: 12px; font-weight: 400; margin-top: 1px; }
.menu button:hover, .menu button:focus-visible { background: var(--chip); outline: none; }
.menu button[aria-checked="true"] { color: var(--accent); }
.menu button[aria-checked="true"]::before { content: "✓"; position: absolute; left: 11px; top: 9px; }

/* lighter filter chips: outline, selected = soft accent tint */
.opt-chip { background: transparent; border: 1px solid var(--line); padding: 5px 11px; font-size: 13px; }
.opt-chip:has(input:checked) { background: var(--accent-tint); border-color: var(--accent); color: var(--ink); }
.fg legend { padding-bottom: 8px; }
.fg { padding-block: 14px; }

/* header: title left, location pill right */
.top { align-items: center; padding-block: 20px 12px; }

/* --- review fixes --- */
/* group headings without border lines running through them; spacing separates groups */
.fg { border: 0; padding: 0; margin: 0 0 18px; }
.fg legend { padding: 0 0 8px; }
.menu { min-width: max(230px, 100%); }
.menusep { height: 1px; background: var(--line); margin: 6px 4px; }
.menu button.plain { padding-left: 30px; font-weight: 500; color: var(--muted); }
.menu button.plain:hover { color: var(--ink); }
.grab { display: none; }
.scrim { position: fixed; inset: 0; z-index: 19; background: var(--scrim); }
.scrim[hidden] { display: none; }
@media (max-width: 999px) {
  .grab { display: block; width: 40px; height: 4px; border-radius: 99px; background: var(--edge); margin: -6px auto 10px; }
  body.filters-open .filters { box-shadow: none; }
  .filters-head { margin-bottom: 10px; }
}
@media (min-width: 1000px) {
  .scrim { display: none; }
  /* one row: [All films | My watchlist] [Date ▾] [search .........] */
  .controls { grid-template-columns: 300px minmax(0, 1fr); }
  .bar { flex-wrap: nowrap; }
  .bar .searchbox { flex: 1 1 auto; }
  /* the Filters heading is centred on the bar's All films / Watchlist switch, at the top of the page and pinned alike */
  .filters { padding-top: 12px; top: 0; max-height: 100dvh; }
  .filters-head { min-height: 38.5px; }  /* the switch's height */
}

/* --- review pass 2 --- */
@media (max-width: 999px) { #filtersDone { display: none; } }  /* handle, backdrop and "Show N films" close it */
@media (min-width: 1000px) {
  /* desktop sidebar: options as a tidy list, not wrapping chips */
  .layout { grid-template-columns: 240px minmax(0, 1fr); }
  .filters .chips { flex-direction: column; align-items: stretch; gap: 2px; }
  .filters .opt-chip { border: 0; border-radius: 8px; padding: 7px 10px; background: transparent; font-size: 14px; justify-content: space-between; }
  .filters .opt-chip:hover { background: var(--chip); }
  .filters .opt-chip .n { margin-left: auto; }
  .filters .opt-chip:has(input:checked) { background: var(--accent-tint); border: 0; }
  .filters-head { margin-bottom: 14px; }
}

/* --- pass 3: headers keep their size when collapsed; rating badge variants --- */
.lbr { font-variant-numeric: tabular-nums; }
.pillr { position: absolute; right: 6px; bottom: 6px; display: inline-flex; align-items: center; gap: 1px; padding: 3px 7px;
  border-radius: 999px; background: rgba(10, 12, 16, .78); color: #fff; font: 600 12px/1.2 var(--body); }
.pillr i { font-style: normal; font-size: 11px; color: #f2b84b; margin-left: 2px; }

.card .m .nw { white-space: nowrap; }
.card .m .nw.today { color: var(--soon); }

/* keep last: stop iPhone zooming the page when the search box is tapped */
@media (max-width: 1000px) { .searchbox input { font-size: 16px; } }

/* heart buttons */
.star svg { display: block; margin: auto; }
.star { display: flex; align-items: center; justify-content: center; padding: 0; }
.actions .btn svg { vertical-align: -3px; }

/* each section is one panel: the header is its top row and the films sit inside it */
#grid { overflow-anchor: none; padding-top: 14px; }  /* anchor: no re-jump on collapse; padding: gap under the bar's line */
.sec { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; margin: 0 0 16px; overflow: clip; }  /* clip (unlike hidden) keeps the header sticky */
.sec .sech { top: calc(var(--stick-top, 0px) - 1px); padding: 0; background: var(--surface); border-radius: 0; }
.sec .sech button { align-items: center; padding: 14px 16px; border: 0; border-radius: inherit; background: none; transition: background .15s; }
.sec .sech button:hover { background: var(--chip); }
.sec .sech button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.sec .sech .lbl, .sec.shut .sech .lbl { font-size: 22px; color: var(--ink); }
.sec .sech .chev { margin-left: auto; display: flex; color: var(--muted); transition: transform .15s; }
.sec.shut .sech .chev { transform: rotate(-90deg); }
.sec .sech button:hover .chev { color: var(--ink); }
.sec > .grid { padding: 2px 16px 16px; }
@media (max-width: 560px) { .sec > .grid { padding: 2px 10px 12px; } .sec .sech button { padding: 13px 12px; } }

/* sign-in / account dialogs: pill controls everywhere, bottom sheet on phones */
#account .signin { flex-direction: column; gap: 10px; }
#account input[type=email], #account input[inputmode] { flex: none; width: 100%; font: inherit; font-size: 16px; padding: 12px 16px;
  border-radius: 999px; border: 1px solid transparent; background: var(--chip); color: var(--ink); }
#account .signin .btn { width: 100%; padding: 12px 16px; border-radius: 999px; font-size: 15px; }
#account h2 { padding-right: 44px; }
@media (max-width: 560px) {
  #account { position: fixed; inset: auto 0 0 0; margin: 0; width: 100%; max-width: 100%; height: auto; max-height: 92dvh;
    border-radius: 18px 18px 0 0; padding: 22px 18px calc(24px + env(safe-area-inset-bottom, 0px)); }
}

/* header band: the title row has a background that differs from the page */
/* The band runs edge to edge through a pseudo-element, so menus can still drop out of it (a clip-path would cut them off). */
body { overflow-x: clip; }
.top { position: relative; z-index: 6; isolation: isolate; background: none; }
.top::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: var(--band); z-index: -1; }
/* The controls bar is plain page (opaque only so pinned content doesn't show through), its controls in line with the
   films, and as snug at the top of the page as it is when pinned. Below desktop it covers the page edge to edge. */
.controls { background: var(--bg); }
#grid { padding-top: 0; }
@media (max-width: 639px) { .controls { row-gap: 10px; } }  /* two rows on phones */
@media (max-width: 999px) {
  .controls { background: none; }
  .controls::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: var(--bg); z-index: -1; }
}

/* sections: even rhythm, header and posters share one left edge */
.sec { margin: 0 0 12px; border-radius: 16px; }
.sec .sech button { padding: 16px 18px; gap: 12px; }
.sec .sech .n { font: 600 12px var(--mono); opacity: .55; }
.sec .sech .chev { margin-right: -4px; width: 30px; height: 30px; align-items: center; justify-content: center; border-radius: 50%; transition: transform .15s, background .15s; }
.sec .sech button:hover .chev { background: var(--bg); }
.sec > .grid { padding: 16px 18px 18px; }
/* phones: panels run edge to edge so the posters get the width, with the same breathing room on every side */
@media (max-width: 560px) {
  .sec { margin-inline: -16px; border-radius: 0; border-inline: 0; }
  .sec .sech button { padding: 14px 12px; }
  .sec > .grid { padding: 12px; }
}

/* The day control (a calendar icon, named when there's room) */
#dayDD { flex: none; }
#dayBtn svg { flex: none; color: var(--muted); }
#dayBtn.on { background: var(--accent-tint); border-color: var(--accent); }   /* another day than today, like active filters */
#dayBtn.on svg { color: var(--accent); }
.dayempty { margin: 0; padding: 22px 18px 24px; color: var(--muted); }
.menu.cal { left: 0; min-width: 0; width: 300px; padding: 12px; }
.menu.cal .calhead { gap: 2px; }
.menu.cal .calhead b { margin-right: auto; padding-left: 4px; }
.menu.cal .caltoday { display: inline-flex; align-items: center; width: auto; height: 30px; padding: 0 12px; margin-right: 4px; border: 1px solid var(--line); border-radius: 999px;
  font: 600 13px var(--body); }
.menu.cal .caltoday:hover { border-color: var(--ink); }
.calhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.calhead b { font: 700 18px var(--display); text-transform: uppercase; letter-spacing: .02em; }
.menu.cal :is(.calnav, .cday) { display: inline-flex; align-items: center; justify-content: center; padding: 0; text-align: center; }
.menu.cal .calnav { width: 34px; height: 34px; border-radius: 50%; font-size: 22px; line-height: 1; }
.calgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.calgrid .wd { text-align: center; font: 500 11px var(--mono); color: var(--muted); padding-bottom: 4px; }
.menu.cal .cday { width: 100%; aspect-ratio: 1; border-radius: 50%; font: 500 14px var(--body); font-variant-numeric: tabular-nums; }
.menu.cal .cday.now { box-shadow: inset 0 0 0 1px var(--edge); }
.menu.cal .cday[aria-pressed="true"] { background: var(--chip-on); color: var(--chip-on-ink); }
.menu.cal button:disabled { color: var(--muted); opacity: .4; cursor: default; background: none; }
.day.picked { box-shadow: inset 3px 0 0 var(--accent); padding-left: 12px; }
.day.picked h4 { color: var(--accent); }
@media (max-width: 999px) {
  /* narrow: the picker drops from the whole bar so it fits */
  .bar { position: relative; }
  #dayDD { position: static; }
  .menu.cal { width: min(300px, 100%); }
}
/* The day's name shows beside the icon (it matters more than the search field, which shrinks first); only on very
   narrow bars, where the search field would be squeezed to under its icon, is the date button just the icon. */
.bar { container-type: inline-size; }
@container (max-width: 299px) {
  #dayBtn { width: var(--pill-h); padding: 0; justify-content: center; }
  #dayBtn .lbl, #dayBtn .chev { display: none; }
  #dayBtn svg { color: var(--ink); }
}
@media (min-width: 1000px) { .menu.cal { left: auto; right: 0; } }  /* the date sits at the bar's right end: open leftwards */
@media (max-width: 560px) { .dayempty { padding: 18px 12px 20px; } }

/* What's new: a header button (it isn't a filter) opening a feed of what went on sale or got a date lately. */
#newsBtn { font-weight: 600; }
#newsBtn svg { flex: none; color: var(--accent); }
/* The header compacts step by step only as far as it must to stay on one row (fitHeader in app.js sets these). */
.top { flex-wrap: wrap; }                                /* last resort: the buttons go under the title */
.topright { margin-left: auto; }
#accountBtn .ico { display: none; }
.top.fit-news #newsBtn, .top.fit-account #accountBtn.primary { width: var(--pill-h); padding: 0; justify-content: center; }
.top.fit-news #newsBtn .lbl, .top.fit-account #accountBtn .lbl { display: none; }
.top.fit-account #accountBtn .ico { display: block; }
.top.fit-pin #regionBtn svg { display: none; }
.top.fit-chev #regionBtn .chev { display: none; }
.top.fit-title h1 { font-size: 30px; }
/* The What's new panel: days (pinned headers), each split into labelled "Tickets on sale" / "Newly announced" grids of
   the usual cards. Every card here is new, so no "New" flag, and announced films aren't dimmed: the label says why.
   It's as wide as a film's page (the dialog default). */
.nhead { padding: 22px 22px 4px; }
.nhead h2 { font: 800 34px/0.95 var(--display); text-transform: uppercase; margin: 0 0 6px; padding-right: 44px; }
.nhead p { margin: 0; color: var(--muted); font-size: 13px; }
.nday { padding: 0 22px 8px; }
.nday > h3 { position: sticky; top: 0; z-index: 3; margin: 0; padding: 18px 0 10px; background: var(--surface);
  border-bottom: 1px solid var(--line); font: 700 24px/1 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.nkind h4 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 16px 0 12px; font-weight: 400; }
.nkind .ntag { padding: 5px 12px; border-radius: 999px; font: 700 13px var(--body); letter-spacing: .02em; text-transform: uppercase; }
.nkind.ann .ntag { background: var(--accent-tint); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.nkind.sale .ntag { background: var(--soon); color: var(--bg); }
.nkind .n { font: 600 12px var(--mono); color: var(--muted); }
.nkind .grid { padding-bottom: 6px; }
#news .flag { display: none; }
#news .card.nosale .poster img { opacity: 1; filter: none; }
#news .card.nosale h3 { color: var(--ink); }
.nempty { padding: 18px 22px 24px; color: var(--muted); }
@media (max-width: 560px) { .nhead, .nday { padding-inline: 16px; } .nempty { padding-inline: 16px; } }

/* film page on phones: a bottom sheet with a Close button where the thumb is; the page behind can't scroll */
html:has(dialog[open]), body:has(dialog[open]) { overflow: hidden; }
dialog { overscroll-behavior: contain; }
.sheetbar { display: none; }
@media (max-width: 560px) {
  #film, #news { position: fixed; inset: auto 0 0 0; width: 100%; max-width: 100%; height: auto; max-height: 88dvh; margin: 0;
    border-radius: 18px 18px 0 0; }
  #film .dlg-close, #news .dlg-close { top: 0; }
  .sheetbar { display: block; position: sticky; bottom: 0; z-index: 3; padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: var(--surface); border-top: 1px solid var(--line); }
  .sheetbar .btn { width: 100%; padding: 12px; border-radius: 999px; font-size: 15px; }
}


/* Short confirmation message (a popover, so it shows above open dialogs): one line, bottom centre, Undo on the right. */
#toast { position: fixed; inset: auto 0 calc(20px + env(safe-area-inset-bottom)) 0; margin: 0 auto; width: max-content; max-width: calc(100vw - 32px);
  display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 16px; border: 0; border-radius: 12px;
  background: var(--ink); color: var(--bg); font-size: 14px; font-weight: 500; line-height: 1.3; box-shadow: 0 6px 24px rgba(0, 0, 0, .35); }
#toast:not(:popover-open) { display: none; }
#toast:popover-open { animation: toast-in .2s ease-out; }
#toast span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

/* Header: the location is a plain pill with a pin; signing in is the one filled button, then a round avatar once signed in. */
#accountBtn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
#accountBtn.avatar { width: var(--pill-h); padding: 0; justify-content: center; font-weight: 700; background: var(--accent-tint); border-color: var(--accent); color: var(--accent); }
#regionBtn svg { flex: none; color: var(--muted); }

/* "Last chance" / "Leaving soon" line on a poster card. */
.card .m .leave { color: var(--accent); font-weight: 600; }

/* Poster overlays stay above the image when it zooms on hover (the transformed image otherwise paints over them). */
.poster .flag, .poster .kind, .poster .pillr { z-index: 1; }

/* Hide-a-film button: always visible, bottom-left of the poster, the height of the rating tag. Hidden films are dimmed (not their buttons). */
.poster .hide { position: absolute; left: 6px; bottom: 6px; width: 20px; height: 20px; border-radius: 50%; border: 0; cursor: pointer; padding: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center; background: rgba(10, 12, 16, .55); color: #fff; }
.poster .hide svg { width: 11px; height: 11px; }
.poster .kind { left: 32px; }                           /* the type label (Shorts, Live & stage, ...) sits beside the hide button */
.card.hid .poster img, .card.hid .poster .ph, .card.hid .m, .card.hid h3 { opacity: .45; }
#toast .linkbtn { flex: none; color: inherit; font-weight: 700; text-decoration: none; padding: 6px 12px; border-radius: 8px; background: color-mix(in srgb, currentColor 16%, transparent); }
#toast .linkbtn:hover { background: color-mix(in srgb, currentColor 26%, transparent); }
.actions .btn svg { vertical-align: -3px; }

/* Hover feedback on the heart and hide buttons. */
.star, .hide { transition: transform .15s ease, background-color .15s ease, opacity .15s ease; }
.star:hover:not(.on), .hide:hover { background: rgba(10, 12, 16, .88); transform: scale(1.12); }
.star.on:hover { transform: scale(1.12); filter: brightness(1.12); }
.star:active, .hide:active { transform: scale(.94); }

/* Film sheet: the badges, links and buttons, then the Cinemas/Format menus, continue the column beside the poster; on
   phones they sit under the poster and description, using the full width. The strip of days always spans the full
   width under the poster, as the header of the showings it lists. */
.fhead { grid-template-rows: auto auto 1fr auto; row-gap: 0; padding-bottom: 20px; }
.fhead .picks { grid-column: 1 / -1; }
.fhead .poster { grid-row: span 3; }
.fmore, .fhead .pmenus { grid-column: 2; }
.fhead .pmenus { margin-top: 14px; align-self: start; }
@media (max-width: 600px) {
  .fhead { padding-bottom: 14px; }
  .fhead .poster { grid-row: auto; }
  .fmore, .fhead .pmenus { grid-column: 1 / -1; }
  .fmore { margin-top: 14px; }
  .pmenus + .picks { margin-top: 10px; }
}

/* Dimming (hiding a film) fades; the button that was pressed bounces once. */
.card .poster img { transition: opacity .3s ease, transform .25s ease; }
.card .poster .ph, .card .m, .card h3 { transition: opacity .3s ease; }
.pop { animation: pop .35s ease; }
@keyframes pop { 40% { transform: scale(1.28); } }

/* Film sheet: the Cinemas and Format menus and the strip of days that narrow its showings. A picked
   menu is highlighted like an active filter; a format that can't combine with those picked is dimmed. */
.picks { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.pmenus { display: flex; flex-wrap: wrap; gap: 8px; }
.pill.sm { height: 32px; padding: 0 12px; font-size: 13px; }
.pill.sm .lbl { overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.pill.sm.on { background: var(--accent-tint); border-color: var(--accent); }
.pmenus .menu { max-height: min(360px, 60vh); overflow-y: auto; max-width: calc(100vw - 32px); }
.pmenus .menu button { display: flex; gap: 12px; align-items: baseline; }
.pmenus .menu .n { margin-left: auto; color: var(--muted); font-weight: 400; font-size: 12px; font-variant-numeric: tabular-nums; }
.pmenus .menu button.alone { opacity: .5; }
.pmenus .menu button.alone:hover, .pmenus .menu button.alone:focus-visible { opacity: 1; }
.pmenus .menu button[aria-checked="true"]::before { top: 50%; transform: translateY(-50%); }
.dwrap { display: flex; align-items: center; gap: 6px; }
.dstrip { position: relative; flex: 1; min-width: 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.dstrip::-webkit-scrollbar { display: none; }
.dstrip button { flex: none; display: flex; flex-direction: column; align-items: center; min-width: 54px; padding: 5px 8px; border-radius: 10px;
  border: 1px solid transparent; background: var(--chip); color: var(--ink); cursor: pointer; font: 500 11px/1.25 var(--body); }
.dstrip button span { color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.dstrip button b { font-size: 13px; font-weight: 600; white-space: nowrap; }
.dstrip button:hover { border-color: var(--line); }
.dstrip button[aria-pressed="true"] { background: var(--chip-on); color: var(--chip-on-ink); }
.dstrip button[aria-pressed="true"] span { color: inherit; opacity: .75; }
.dnav { flex: none; width: 32px; height: 32px; padding: 0 0 2px; border-radius: 50%; border: 1px solid var(--line); background: none;
  color: var(--ink); font-size: 20px; line-height: 1; cursor: pointer; }
.dnav:hover:not(:disabled) { border-color: var(--ink); }
.dnav:disabled { opacity: .3; cursor: default; }
.dwrap.fits .dnav { display: none; }
.dstrip.more-l { mask-image: linear-gradient(to right, transparent, #000 28px); }
.dstrip.more-r { mask-image: linear-gradient(to left, transparent, #000 28px); }
.dstrip.more-l.more-r { mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent); }
@media (max-width: 600px) {
  /* swiped, running to the screen's edges */
  .dnav { display: none; }
  .dstrip { margin: 0 -16px; padding: 0 16px; }
}