/* ==========================================================================
   Admit One: design system
   Ported from the "Admit One" marquee mockup, with the judge's fixes and the
   Slate / Onesheet grafts applied. Light = matinee (lobby by day).
   Dark = house lights down, marquee still lit.
   ========================================================================== */

/* ------------------------------------------------------------------ fonts
   Self-hosted latin + latin-ext subsets from Google Fonts (SIL OFL 1.1, see fonts/OFL.txt).
   All three are variable fonts: one file per subset covers every weight we use. */
@font-face {
  font-family: "Big Shoulders"; font-style: normal; font-weight: 700 900; font-display: swap;
  src: url("fonts/BigShoulders-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Big Shoulders"; font-style: normal; font-weight: 700 900; font-display: swap;
  src: url("fonts/BigShoulders-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fonts/AtkinsonHyperlegibleNext-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fonts/AtkinsonHyperlegibleNext-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Atkinson Hyperlegible Mono"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fonts/AtkinsonHyperlegibleMono-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Atkinson Hyperlegible Mono"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fonts/AtkinsonHyperlegibleMono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------------------------------------------ tokens */
:root {
  color-scheme: light dark;
  --font-display: "Big Shoulders", "Arial Narrow", "Avenir Next Condensed", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Atkinson Hyperlegible Mono", ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* lobby */
  --bg: #F2F1EE;
  --surface: #FFFFFF;
  --surface-2: #E6E4DF;
  --ink: #16151A;
  --ink-2: #434249;
  --ink-3: #5F5E66;
  --rule: #D7D4CD;
  --rule-2: #A9A59C;
  --field-line: #8A867E;   /* text field outlines: 3.2:1 or more on every surface (WCAG 1.4.11) */
  --scrim: rgba(22, 21, 26, .52);

  /* marquee */
  --frame: #A3122B;
  --frame-2: #7E0D21;
  --frame-ink: #FFFFFF;
  --panel: #FFFFFF;
  --panel-ink: #121116;
  --panel-ink-2: #46444C;
  --panel-dim: #780E21;
  --panel-dim-ink: #FBE4E8;
  --panel-glow: inset 0 0 0 1px rgba(0, 0, 0, .08), inset 0 0 26px rgba(255, 214, 140, .38), 0 0 26px rgba(255, 226, 170, .22);
  --rail: #DCD7CD;
  --bulb: #FFC93C;
  --bulb-core: #FFF6D6;
  --bulb-halo: rgba(255, 190, 46, .55);
  --bulb-off: #5C0A19;
  --pill-ink: #1C1400;

  /* actions */
  --act: #A3122B;
  --act-ink: #FFFFFF;
  --act-hover: #860F23;
  --link: #A3122B;
  --focus: #16151A;

  /* ticket stock: status colour + its ink */
  --gold: #FBE2A0;  --gold-ink: #5A3F00;
  --blue: #D8E5F7;  --blue-ink: #163C78;
  --red: #F8D6DA;   --red-ink: #7C1022;
  --green: #D5EDDE; --green-ink: #145131;
  --grey: #E4E2DD;  --grey-ink: #38373E;

  --shadow-lg: 0 30px 80px rgba(18, 12, 20, .30), 0 2px 6px rgba(18, 12, 20, .12);
  --shadow-md: 0 10px 30px rgba(18, 12, 20, .22), 0 1px 3px rgba(18, 12, 20, .12);

  /* geometry */
  --gutter: 16px;
  --sa-top: env(safe-area-inset-top, 0px);
  --sa-bottom: env(safe-area-inset-bottom, 0px);
  --sa-left: env(safe-area-inset-left, 0px);     /* landscape iPhone: the notch side and the rounded corners */
  --sa-right: env(safe-area-inset-right, 0px);
  /* Content padding: the gutter, or the side inset where that is wider. Backgrounds stay full-bleed. */
  --pad-l: max(var(--gutter), var(--sa-left));
  --pad-r: max(var(--gutter), var(--sa-right));
  --crown-pad: max(6px, var(--sa-top));
  --crown-bar-h: 62px;
  --marquee-h: 70px;
  --sticky-top: calc(var(--crown-pad) + var(--crown-bar-h));   /* only the crown sticks; the lit panel scrolls away */
  --ruler-h: 68px;
  --ruler-stack: calc(var(--ruler-h) + 1px);   /* the whole sticky ruler: week cells + bottom border */
  --tabbar-h: 60px;
  --banner-bottom: calc(var(--tabbar-h) + var(--sa-bottom) + 12px);   /* toasts and the update banner */
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0E1019;
    --surface: #171A26;
    --surface-2: #222636;
    --ink: #F1F0F5;
    --ink-2: #C5C4CE;
    --ink-3: #A09FAD;
    --rule: #2B2F40;
    --rule-2: #4C5166;
    --field-line: #6B7088;
    --scrim: rgba(3, 4, 9, .72);

    --frame: #7F0E23;
    --frame-2: #5A0918;
    --frame-ink: #FFF3F4;
    --panel: #E4DED0;               /* still lit, without glare */
    --panel-ink: #121116;
    --panel-ink-2: #46444C;
    --panel-dim: #4E0815;
    --panel-dim-ink: #F3D3D9;
    --panel-glow: inset 0 0 0 1px rgba(0, 0, 0, .10);   /* no glow at night */
    --rail: #C7C0B1;
    --bulb: #FFD35C;
    --bulb-core: #FFF8E0;
    --bulb-halo: rgba(255, 196, 64, .6);
    --bulb-off: #3A0610;

    --act: #FFC93C;
    --act-ink: #1C1400;
    --act-hover: #FFD978;
    --link: #FFCF5C;
    --focus: #FFD35C;

    --gold: #3A2E0C;  --gold-ink: #FFD978;
    --blue: #182947;  --blue-ink: #B3CDFF;
    --red: #3D1520;   --red-ink: #FFB6C1;
    --green: #133221; --green-ink: #A3E5BD;
    --grey: #262A38;  --grey-ink: #D3D2DC;

    --shadow-lg: 0 30px 80px rgba(0, 0, 0, .65);
    --shadow-md: 0 10px 30px rgba(0, 0, 0, .55);
  }
}
@media (min-width: 900px) {
  :root {
    --gutter: 28px;
    --crown-pad: var(--sa-top);
    --crown-bar-h: 72px;
    --marquee-h: 0px;
    --tabbar-h: 0px;
    --ruler-h: 74px;
    --ruler-stack: calc(var(--ruler-h) + 34px);   /* + the legend row (25px), the border and a classic scrollbar */
    --banner-bottom: calc(24px + var(--sa-bottom));
  }
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg); }
/* Keyboard focus, find-in-page and in-page jumps land clear of the sticky chrome (crown, marquee and the
   sticky date header, or the week ruler on Coming soon) and above the phone tab bar (WCAG 2.4.11).
   The .grp-soon scroll-margin below adds to this padding for ruler jumps. */
html {
  scroll-padding-top: calc(var(--sticky-top) + 58px);
  scroll-padding-bottom: calc(var(--tabbar-h) + var(--sa-bottom) + 12px);
}
html:has(#view-soon:not([hidden]) .ruler) { scroll-padding-top: calc(var(--sticky-top) + var(--ruler-stack) + 8px); }
html:has(#update-banner:not([hidden])) { scroll-padding-bottom: calc(var(--banner-bottom) + 68px); }
body {
  margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink);
  font: 400 16px/1.45 var(--font-body);
  -webkit-font-smoothing: antialiased; font-optical-sizing: auto;
}
h1, h2, h3, h4, p, figure, dl, dd { margin: 0; }
a { color: var(--link); }
button, input, select { font: inherit; color: inherit; }
img { max-width: 100%; }
code { font-family: var(--font-mono); font-size: .92em; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ic-s { width: 16px; height: 16px; }
.ext { width: 15px; height: 15px; opacity: .8; }
.spin { animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.dot { color: var(--rule-2); }
html.has-sheet, html:has(#sheet-root > *) { overflow: hidden; }

.skip {
  position: absolute; left: max(8px, var(--sa-left)); top: -80px; z-index: 200; padding: 12px 16px; border-radius: 8px;
  background: var(--surface); color: var(--ink); font-weight: 700; box-shadow: var(--shadow-md);
}
.skip:focus { top: calc(8px + var(--sa-top)); }

/* ------------------------------------------------------------------ crown (sticky red bar) */
.crown { position: sticky; top: 0; z-index: 31; background: var(--frame); color: var(--frame-ink); padding-top: var(--crown-pad); }
.crown :focus-visible, .marquee :focus-visible, .onb-crown :focus-visible { outline-color: var(--frame-ink); }
.place-btn:focus-visible { outline-offset: -3px; } /* inside the button, so it never covers the freshness line below */
/* min-height and a growing second row: with the user's own text spacing (WCAG 1.4.12) the freshness line
   gets taller instead of being cut off. */
.crown-bar {
  min-height: var(--crown-bar-h); max-width: calc(1240px + 2 * var(--gutter)); margin: 0 auto;
  padding: 0 max(12px, var(--sa-right)) 0 max(6px, var(--sa-left));
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 44px minmax(17px, auto);
  grid-template-areas: "place end" "fresh fresh"; column-gap: 8px; align-content: center;
}
.wordmark {
  position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  font: 900 18px/1 var(--font-display); letter-spacing: .16em; text-transform: uppercase;
}
.place-btn {
  grid-area: place; justify-self: start; display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; max-width: 100%; min-width: 0; padding: 0 6px; border: 0; border-radius: 6px;
  background: transparent; color: var(--frame-ink); cursor: pointer; text-align: left;
}
.loc-name { min-width: 0; font: 800 22px/1 var(--font-display); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-top: 2px; }
@media (max-width: 899px) {
  /* Phone crown: room for the search button. The chevron goes, and the country chip shows only for an
     approximate (IP) place; the name already ends in its state or country, and Location shows the rest. */
  .place-btn .ic-s { display: none; }
  .place-btn .cc:not(.is-approx) { display: none; }
  .loc-name.loc-l1 { font-size: 19px; }
  .loc-name.loc-l2 { font-size: 16px; letter-spacing: .03em; }
  .loc-name.loc-l3 { font-size: 15px; letter-spacing: .02em; }
}
.cc { flex: none; font: 700 12px/1 var(--font-mono); letter-spacing: .06em; border: 1.5px solid currentColor; border-radius: 3px; padding: 3px 4px 2px; }
.approx { display: none; flex: none; font: 700 12px/1 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; }
.cc.is-approx { border-style: dashed; }
.freshness {
  grid-area: fresh; min-width: 0; padding-left: 32px; margin-top: -1px;
  font: 500 13px/16px var(--font-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fresh { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; }
.fresh-t { overflow: hidden; text-overflow: ellipsis; }
.fresh-ic { width: 14px; height: 14px; }
.fresh-warn .fresh-ic { color: var(--bulb); }
.fresh-error .fresh-ic { color: var(--bulb); }
.fresh-error .fresh-t, .fresh-warn .fresh-t { font-weight: 700; }
.crown-end { grid-area: end; display: flex; align-items: center; gap: 6px; }
.crown-icon {
  display: none; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 999px;
  background: transparent; color: var(--frame-ink); cursor: pointer;
}
.crown-search { display: grid; }   /* search sits in the crown on every screen size */
.refresh {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 16px 0 13px;
  border: 0; border-radius: 999px; cursor: pointer; white-space: nowrap;
  background: var(--bulb); color: var(--pill-ink); font: 700 16px/1 var(--font-body);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .18) inset, 0 0 18px var(--bulb-halo);
}
.refresh .ic { width: 19px; height: 19px; }
@media (hover: hover) {
  .place-btn:hover, .crown-icon:hover { background: rgba(0, 0, 0, .16); }
  .refresh:hover { background: #FFD666; }
}

/* ------------------------------------------------------------------ marquee: bulbs, lit panel, desktop tabs */
.marquee {
  position: relative; z-index: 30;
  height: var(--marquee-h); background: var(--frame); color: var(--frame-ink);
  box-shadow: inset 0 -3px 0 var(--frame-2);
}
.panel { padding: 0 max(10px, var(--sa-right)) 0 max(10px, var(--sa-left)); }
.tabs-desktop { display: none; }
.bulbs {
  height: 12px; margin: 0 2px;
  background: radial-gradient(circle at 8px 6px, var(--bulb-core) 0 1.3px, var(--bulb) 2px 3.1px, var(--bulb-halo) 3.7px, transparent 6px) 0 0 / 16px 12px repeat-x;
}
.bulbs.is-busy {
  background:
    radial-gradient(circle at 8px 6px, var(--bulb-off) 0 3.1px, transparent 3.7px) 0 0 / 48px 12px repeat-x,
    radial-gradient(circle at 24px 6px, var(--bulb-core) 0 1.3px, var(--bulb) 2px 3.1px, var(--bulb-halo) 3.7px, transparent 6px) 0 0 / 48px 12px repeat-x,
    radial-gradient(circle at 40px 6px, var(--bulb-core) 0 1.3px, var(--bulb) 2px 3.1px, var(--bulb-halo) 3.7px, transparent 6px) 0 0 / 48px 12px repeat-x;
  animation: chase .48s steps(3) infinite;
}
@keyframes chase { to { background-position: 48px 0, 48px 0, 48px 0; } }
.bulbs.is-degraded {
  background:
    radial-gradient(circle at 8px 6px, var(--bulb-core) 0 1.3px, var(--bulb) 2px 3.1px, var(--bulb-halo) 3.7px, transparent 6px) 0 0 / 32px 12px repeat-x,
    radial-gradient(circle at 24px 6px, var(--bulb-off) 0 3.1px, transparent 3.7px) 0 0 / 32px 12px repeat-x;
}
.mq-stage {
  min-height: 50px; padding: 0 12px; display: flex; align-items: center; gap: 12px;
  background-color: var(--panel); color: var(--panel-ink); border-radius: 3px;
  background-image: linear-gradient(var(--rail), var(--rail)), linear-gradient(var(--rail), var(--rail));
  background-size: 100% 2px; background-repeat: no-repeat; background-position: 0 5px, 0 calc(100% - 5px);
  box-shadow: var(--panel-glow);
}
.mq-title { flex: none; font: 900 27px/1 var(--font-display); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; padding-top: 2px; }
.mq-title .l { display: inline-block; transform-origin: 50% 0; }
.mq-title .sp { display: inline-block; width: .3em; }
.mq-title.flip .l { animation: flipIn .14s cubic-bezier(.2, .75, .3, 1) both; animation-delay: calc(var(--i, 0) * 10ms); }
@keyframes flipIn { from { transform: perspective(200px) rotateX(-85deg); opacity: .15; } to { transform: none; opacity: 1; } }
.mq-side {
  min-width: 0; margin-left: auto; display: flex; flex-direction: column; align-items: flex-end;
  font: 700 12px/15px var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--panel-ink-2); text-align: right;
}
.mq-side span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mq-side .mq-side-b { color: var(--panel-ink); }

.mq-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 3px 0; }
.mq-tab {
  position: relative; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 8px;
  min-width: 0; min-height: 80px; padding: 10px 18px; border: 0; border-radius: 3px; cursor: pointer; text-align: left;
  background: var(--panel-dim); color: var(--panel-dim-ink); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
}
.mq-tab .t { max-width: 100%; font: 900 clamp(22px, 2.4vw, 30px)/1 var(--font-display); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mq-tab .c { max-width: 100%; min-height: 13px; font: 700 12px/1.1 var(--font-mono); letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mq-tab[aria-current="page"] {
  background-color: var(--panel); color: var(--panel-ink);
  background-image: linear-gradient(var(--rail), var(--rail)), linear-gradient(var(--rail), var(--rail));
  background-size: 100% 2px; background-repeat: no-repeat; background-position: 0 7px, 0 calc(100% - 7px);
  box-shadow: var(--panel-glow);
}
.mq-tab[aria-current="page"] .c { color: var(--panel-ink-2); }
.mq-tab:focus-visible { outline-offset: 3px; }
@media (hover: hover) { .mq-tab:not([aria-current="page"]):hover { background: color-mix(in srgb, var(--panel-dim) 84%, #fff); } }

/* ------------------------------------------------------------------ phone tab bar */
.tabbar {
  position: fixed; z-index: 30; left: 0; right: 0; bottom: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px;
  padding: 4px max(4px, var(--sa-right)) calc(4px + var(--sa-bottom)) max(4px, var(--sa-left));
  background: var(--surface); border-top: 1px solid var(--rule);
}
.tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-width: 0; min-height: 52px; padding: 2px 0; border: 0; border-radius: 8px; background: none; cursor: pointer;
  color: var(--ink-3); font: 700 12px/1.1 var(--font-body);
}
.tab-ic { position: relative; display: grid; place-items: center; width: 50px; height: 28px; }
.tab-ic .ic { position: relative; }
.tab[aria-current="page"] { color: var(--ink); }
/* The current section: a gold ticket with a dark outline (the outline is the 3:1+ cue, WCAG 1.4.11). */
.tab[aria-current="page"] .tab-ic::before {
  content: ""; position: absolute; inset: 0; border-radius: 3px; background: var(--gold); box-shadow: inset 0 0 0 1.5px var(--gold-ink);
  -webkit-mask: radial-gradient(circle 5px at 0 50%, #0000 96%, #000) left / 51% 100% no-repeat, radial-gradient(circle 5px at 100% 50%, #0000 96%, #000) right / 51% 100% no-repeat;
          mask: radial-gradient(circle 5px at 0 50%, #0000 96%, #000) left / 51% 100% no-repeat, radial-gradient(circle 5px at 100% 50%, #0000 96%, #000) right / 51% 100% no-repeat;
}
.tab[aria-current="page"] .tab-ic { color: var(--gold-ink); }
.tab-n {
  position: absolute; top: -5px; right: -4px; min-width: 20px; height: 18px; padding: 0 4px; border-radius: 9px;
  background: var(--ink); color: var(--bg); font: 700 12px/18px var(--font-mono); text-align: center;
}
.tab-l { max-width: 100%; text-align: center; overflow-wrap: anywhere; padding: 0 2px; }
.tab-short { display: none; }

/* ------------------------------------------------------------------ layout */
.layout { max-width: calc(1240px + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--pad-r) 0 var(--pad-l); }
.main { min-width: 0; padding-bottom: calc(var(--tabbar-h) + var(--sa-bottom) + 12px); }
/* While "A new version is ready" shows, the end of every list (the credits, Settings on phones) stays reachable. */
body:has(#update-banner:not([hidden])) .main { padding-bottom: calc(var(--banner-bottom) + 68px); }
.main:focus { outline: none; }
.rail { display: none; }

/* ------------------------------------------------------------------ controls */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 44px; padding: 0 14px; border-radius: 8px; border: 1.5px solid transparent;
  font: 700 15px/1.15 var(--font-body); text-decoration: none; text-align: center; cursor: pointer;
  background: transparent; color: var(--ink);
}
.btn .ic { width: 18px; height: 18px; }
.btn .ext { width: 15px; height: 15px; }
/* A busy button stays focusable (aria-disabled, not disabled), so keyboard focus doesn't drop to the page. */
.btn:disabled, .btn[aria-disabled="true"] { opacity: .6; cursor: default; }
.btn-primary { background: var(--act); color: var(--act-ink); }
.btn-line { border-color: var(--rule-2); color: var(--ink); }
.btn-lg { min-height: 52px; padding: 0 20px; font-size: 17px; }
.btn-block { width: 100%; }
.btn-icon { width: 44px; padding: 0; }
.btn-small { min-height: 44px; padding: 0 12px; font-size: 14px; }
.btn-danger { background: var(--red-ink); color: var(--red); }
.btn-danger-line { border-color: var(--red-ink); color: var(--red-ink); }
@media (prefers-color-scheme: dark) { .btn-danger-line { border-color: var(--red-ink); } }
@media (hover: hover) {
  .btn-primary:not(:disabled):not([aria-disabled="true"]):hover { background: var(--act-hover); }
  .btn-line:not(:disabled):not([aria-disabled="true"]):hover { background: var(--surface-2); }
}
.linklike {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-weight: 700; color: var(--link); text-decoration: underline; text-underline-offset: 3px; text-align: left;
}

.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 0 10px; }
.toolbar .lbl { font: 700 12px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.seg { display: inline-flex; max-width: 100%; border: 1.5px solid var(--rule-2); border-radius: 10px; padding: 2px; gap: 2px; }
.seg button {
  min-height: 44px; min-width: 44px; padding: 0 12px; border: 0; border-radius: 7px; background: transparent; cursor: pointer;
  font: 700 15px/1 var(--font-body); color: var(--ink-2); white-space: nowrap;
}
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.seg button:disabled { opacity: .55; cursor: default; }
@media (hover: hover) { .seg button:not([aria-pressed="true"]):not(:disabled):hover { background: var(--surface-2); } }

/* ------------------------------------------------------------------ group headers (showtime board) */
.grp { margin-top: 2px; }
.grp-h {
  position: sticky; top: var(--sticky-top); z-index: 4; background: var(--bg);
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-height: 50px; padding: 8px 0;
  border-top: 2px solid var(--rule); border-bottom: 2px solid var(--rule);
}
.grp-d { font: 900 25px/1 var(--font-display); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; padding-top: 2px; }
.dow { display: inline-block; background: var(--ink); color: var(--bg); padding: 2px 5px 0; margin-right: 2px; border-radius: 2px; }
.grp-n { font: 700 12px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.when {
  margin-left: auto; font: 700 12px/1 var(--font-mono); letter-spacing: .07em; text-transform: uppercase; white-space: nowrap;
  padding: 6px 8px 5px; border-radius: 3px; background: var(--blue); color: var(--blue-ink);
}
.when.is-soon { background: var(--gold); color: var(--gold-ink); }
.when.is-past { background: transparent; color: var(--ink-3); padding-right: 0; }
.grp-sub { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 14px; color: var(--ink-2); }
.holiday {
  font: 700 12px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 6px 3px; border-radius: 3px; background: var(--red); color: var(--red-ink);
}
.grp-soon .grp-h { position: static; }
/* Coming soon scrolls under the crown AND the sticky week ruler: a ruler jump must land below both.
   html's scroll-padding-top already clears them (+8px); this adds the last 2px. */
.grp-soon { scroll-margin-top: 2px; }
.grp-h-loading { position: static; }
.month-h {
  display: flex; align-items: center; gap: 12px; margin: 26px 0 8px;
  font: 900 30px/1 var(--font-display); letter-spacing: .03em; text-transform: uppercase;
}
.month-h::after { content: ""; flex: 1; height: 2px; background: var(--ink); opacity: .85; }

/* ------------------------------------------------------------------ film rows */
.board { list-style: none; margin: 0; padding: 0; }
.row {
  position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr) 44px; gap: 0 14px;
  padding: 14px 0; border-bottom: 1px solid var(--rule);
}
.row:last-child { border-bottom: 0; }
.row-main { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.row-title { font: 800 22px/1.02 var(--font-display); letter-spacing: .02em; text-transform: uppercase; overflow-wrap: anywhere; padding-top: 1px; }
.row-title a { color: inherit; text-decoration: none; }
.row-title a::after { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: 4px; }
.row-title a:focus-visible { outline: none; }
.row-title a:focus-visible::after { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (hover: hover) { .row:hover .row-title a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; } }
.row-meta, .row-info { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 14px; line-height: 1.3; color: var(--ink-2); }
.row-meta .rt { color: var(--ink); font-weight: 500; }
.row-ov { display: none; }
.row-act { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.row-act .btn { min-height: 44px; padding: 0 12px; font-size: 14px; }
.cert { font: 700 12px/1 var(--font-mono); color: var(--ink); border: 1.5px solid currentColor; border-radius: 2px; padding: 3px 4px 2px; letter-spacing: .02em; }
.nocert { font-size: 14px; color: var(--ink-3); }
.score-line { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.score { font: 800 20px/1 var(--font-display); letter-spacing: .02em; color: var(--ink); }
.score .of { font-weight: 700; color: var(--ink-3); font-size: 15px; margin-left: 1px; }
.votes { color: var(--ink-2); }
.few { font: 700 12px/1 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.pend { display: inline-block; width: 46px; height: 13px; border-radius: 3px; background: var(--surface-2); position: relative; overflow: hidden; vertical-align: middle; }
.pend::after, .sk::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent); animation: shimmer 1.3s infinite;
}
@media (prefers-color-scheme: dark) { .pend::after, .sk::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .08), transparent); } }
@keyframes shimmer { to { transform: translateX(100%); } }
.tag {
  display: inline-block; font: 700 12px/1.2 var(--font-mono); letter-spacing: .05em; text-transform: uppercase;
  padding: 3px 6px 2px; border-radius: 3px; overflow-wrap: anywhere;
}
.tag-gold { background: var(--gold); color: var(--gold-ink); }
.tag-blue { background: var(--blue); color: var(--blue-ink); }
.tag-red { background: var(--red); color: var(--red-ink); }
.tag-green { background: var(--green); color: var(--green-ink); }
.tag-grey { background: var(--grey); color: var(--grey-ink); }
.tag-line { box-shadow: inset 0 0 0 1.5px var(--rule-2); color: var(--ink-2); }
.save {
  position: relative; z-index: 1; align-self: start; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 8px; border: 1.5px solid var(--rule-2); background: transparent; color: var(--ink-2); cursor: pointer;
}
.save .ic { width: 22px; height: 22px; }
.save[aria-pressed="true"] { background: var(--gold); color: var(--gold-ink); border-color: transparent; }
@media (hover: hover) { .save:hover:not([aria-pressed="true"]) { background: var(--surface-2); } }

/* skeletons */
.sk { position: relative; display: block; overflow: hidden; background: var(--surface-2); border-radius: 4px; }
.row-sk .row-main { gap: 10px; padding-top: 4px; }
.sk-title { height: 20px; width: 70%; }
.sk-line { height: 13px; width: 60%; }
.sk-short { width: 40%; }
.sk-btn { height: 40px; width: 160px; border-radius: 8px; }
.sk-save { width: 44px; height: 44px; border-radius: 8px; }
.row-sk:nth-child(2) .sk-title { width: 54%; }
.row-sk:nth-child(3) .sk-title { width: 82%; }
.row-sk:nth-child(4) .sk-title { width: 46%; }
.row-sk:nth-child(5) .sk-title { width: 64%; }

/* ------------------------------------------------------------------ posters and generated one-sheets */
.art {
  position: relative; display: block; flex: none; aspect-ratio: 2 / 3; overflow: hidden; border-radius: 3px;
  background: var(--surface-2); box-shadow: 0 0 0 1px rgba(0, 0, 0, .1); container-type: inline-size;
}
.art-row { width: 72px; }
.stub .art-thumb { cursor: pointer; } /* app.js opens the film when a stub's poster is tapped */
.art > .art-img, .art > picture, .art > picture > .art-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.art .fb { display: none; }
.art.no-img .fb { display: block; }
.art.no-img > .art-img, .art.no-img > picture { display: none; }

.fb { position: absolute; inset: 0; background: linear-gradient(180deg, var(--fa), var(--fz)); overflow: hidden; }
.fb::before { content: ""; position: absolute; inset: 0; z-index: 0; }
.fb::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46%; z-index: 1; background: linear-gradient(180deg, transparent, var(--fz) 72%); }
.fb-t {
  position: absolute; z-index: 2; left: 8%; right: 7%; bottom: 15%;
  font: 900 15cqw/.9 var(--font-display); letter-spacing: 0; text-transform: uppercase; color: var(--ft);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden;
}
.fb-t-long { -webkit-line-clamp: 5; }
.fb-bill {
  position: absolute; z-index: 2; left: 9%; bottom: 7%; width: 60%; height: 6px; opacity: .55;
  background: linear-gradient(var(--ft), var(--ft)) 0 0 / 100% 2px no-repeat, linear-gradient(var(--ft), var(--ft)) 0 100% / 72% 2px no-repeat;
}
.fb-p0 { --fa: #0B1B33; --fz: #1D4466; --fc: #FFC857; --ft: #F7F1E3; }
.fb-p1 { --fa: #2B0A0A; --fz: #A8360B; --fc: #FFB547; --ft: #FFE7CC; }
.fb-p2 { --fa: #0F3534; --fz: #05100F; --fc: #4BE3C9; --ft: #DDEFEA; }
.fb-p3 { --fa: #1B0F3A; --fz: #3E2C8C; --fc: #FF5EA8; --ft: #F4F0FF; }
.fb-p4 { --fa: #1A2B1C; --fz: #33502F; --fc: #F2B84B; --ft: #EAF2E2; }
.fb-p5 { --fa: #FFD9D3; --fz: #F49AA2; --fc: #7A1530; --ft: #4A0B1E; }
.fb-p6 { --fa: #DDF3FB; --fz: #8ED2F2; --fc: #163556; --ft: #0B2230; }
.fb-p7 { --fa: #F2E6C9; --fz: #DDB06A; --fc: #7A2E1B; --ft: #2E1408; }
.fb-p8 { --fa: #30363D; --fz: #101418; --fc: #F28C28; --ft: #F5F7FA; }
.fb-p9 { --fa: #3A0B16; --fz: #12030A; --fc: #E8475E; --ft: #FFE6A3; }
/* motifs: moon, rings, sunburst, speed lines, stars, peaks, spotlight, grid floor */
.fb-m0::before { background: radial-gradient(circle at 70% 25%, var(--fc) 0 12%, transparent 12.6%), linear-gradient(transparent 57%, color-mix(in srgb, var(--fc) 60%, transparent) 57% 57.8%, transparent 58.4%); }
.fb-m1::before { background: repeating-radial-gradient(circle at 50% 33%, transparent 0 6.5cqw, color-mix(in srgb, var(--fc) 60%, transparent) 6.5cqw 8cqw); -webkit-mask: radial-gradient(circle at 50% 33%, #000 0 40cqw, transparent 41cqw); mask: radial-gradient(circle at 50% 33%, #000 0 40cqw, transparent 41cqw); }
.fb-m2::before { background: repeating-conic-gradient(from -90deg at 50% 60%, color-mix(in srgb, var(--fc) 45%, transparent) 0 7deg, transparent 7deg 19deg); -webkit-mask: linear-gradient(#000 0 60%, transparent 60%); mask: linear-gradient(#000 0 60%, transparent 60%); }
.fb-m3::before { background: repeating-linear-gradient(-32deg, transparent 0 9cqw, color-mix(in srgb, var(--fc) 55%, transparent) 9cqw 11.5cqw); }
.fb-m4::before { background: radial-gradient(circle, var(--fc) 0 1.2px, transparent 1.6px) 0 0 / 23cqw 17cqw, radial-gradient(circle, color-mix(in srgb, var(--ft) 75%, transparent) 0 .9px, transparent 1.3px) 9cqw 7cqw / 17cqw 13cqw; -webkit-mask: linear-gradient(#000 0 50%, transparent 66%); mask: linear-gradient(#000 0 50%, transparent 66%); }
.fb-m5::before { background: color-mix(in srgb, var(--fc) 80%, var(--fz)); clip-path: polygon(0 72%, 17% 50%, 30% 62%, 51% 34%, 69% 56%, 82% 45%, 100% 64%, 100% 100%, 0 100%); }
.fb-m6::before { background: conic-gradient(from 162deg at 50% -6%, transparent 0deg, color-mix(in srgb, var(--fc) 50%, transparent) 12deg 24deg, transparent 36deg), radial-gradient(ellipse 36% 5% at 50% 58%, var(--fc) 0 55%, transparent 60%); }
.fb-m7::before { background: linear-gradient(color-mix(in srgb, var(--fc) 50%, transparent), color-mix(in srgb, var(--fc) 50%, transparent)) 0 46% / 100% 2px no-repeat, repeating-linear-gradient(90deg, transparent 0 15cqw, color-mix(in srgb, var(--fc) 35%, transparent) 15cqw calc(15cqw + 1.5px)); -webkit-mask: linear-gradient(transparent 0 46%, #000 46%); mask: linear-gradient(transparent 0 46%, #000 46%); }
.art-backdrop .fb::after { display: none; }

/* ------------------------------------------------------------------ Coming soon: week ruler */
.ruler {
  position: sticky; top: var(--sticky-top); z-index: 6; margin: 0 calc(-1 * var(--pad-r)) 4px calc(-1 * var(--pad-l));
  background: var(--surface); border-bottom: 1px solid var(--rule);
}
.ruler-scroll {
  display: flex; align-items: stretch; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain;
  padding: 0 var(--pad-r) 0 var(--pad-l); scrollbar-width: none; scroll-padding: 0 var(--pad-r) 0 var(--pad-l);
}
.ruler-scroll::-webkit-scrollbar { display: none; }
.ruler-lead {
  flex: none; align-self: center; display: grid; justify-items: start; gap: 3px; min-height: 48px; padding: 6px 12px; border-radius: 8px; border: 0; cursor: pointer;
  background: var(--gold); color: var(--gold-ink); text-align: left; white-space: nowrap;
}
.ruler-lead-k { font: 700 12px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.ruler-lead-v { font: 700 15px/1.1 var(--font-body); }
.ruler-weeks { display: flex; list-style: none; margin: 0; padding: 0; }
.wk-li { flex: none; display: flex; }
.wk {
  position: relative; display: grid; grid-template-rows: 16px minmax(0, 1fr) 20px; width: 44px; height: var(--ruler-h);
  padding: 5px 0 4px; border: 0; border-left: 1px solid transparent; background: transparent; color: var(--ink-2); cursor: pointer;
}
.wk.is-boundary { border-left-color: var(--rule-2); }
.wk:focus-visible { outline-offset: -3px; }   /* the scroller would clip a ring drawn outside the cell */
.wk.is-today { width: 58px; }
.wk.is-empty { cursor: default; }
.wk-mo { grid-row: 1; justify-self: start; padding-left: 4px; font: 700 12px/1 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
.wk-today {
  grid-row: 1; justify-self: center; z-index: 1; padding: 2px 4px 1px; border-radius: 2px; background: var(--bulb); color: var(--pill-ink);
  font: 700 12px/1 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
}
.wk.is-today .wk-mo { display: none; }
.wk-marks { grid-row: 2; display: flex; flex-direction: column-reverse; align-items: center; gap: 2px; padding-bottom: 3px; border-bottom: 1px solid var(--ink-3); min-height: 0; overflow: hidden; }
.wk.is-today .wk-marks { background: linear-gradient(var(--ink), var(--ink)) 50% 0 / 2px 100% no-repeat; }
.mk { display: block; flex: none; width: 14px; height: 5px; border-radius: 1px; background: var(--ink); }
.mk-limited { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink); }
.mk-saved { background: var(--bulb); box-shadow: inset 0 0 0 1.5px var(--gold-ink); }
.mk-more { font: 700 12px/1 var(--font-mono); font-style: normal; color: var(--ink-2); }
.wk-d { grid-row: 3; align-self: end; justify-self: center; padding: 1px 5px 0; border-radius: 3px; font: 700 12px/17px var(--font-mono); color: var(--ink-2); }
.wk[aria-current] .wk-d { background: var(--ink); color: var(--bg); }
@media (hover: hover) { button.wk:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); } }
.ruler-key { display: none; }

/* ------------------------------------------------------------------ theaters */
.th-head { padding: 2px 0 6px; }
.th-sum { font-size: 15px; color: var(--ink-2); margin: 0 0 6px; }
.plot { position: relative; height: 82px; margin: 4px 0 0; }
.plot-field { position: absolute; left: 4px; right: 6px; top: 0; height: 56px; border-bottom: 1.5px solid var(--ink-3); }
.pd { position: absolute; display: block; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; border: 1.5px solid var(--ink); background: var(--bg); }
.pd.is-chain { background: var(--ink); }
.plot-axis { position: absolute; left: 4px; right: 6px; top: 62px; height: 18px; font: 700 12px/1 var(--font-mono); color: var(--ink-3); }
.plot-you { position: absolute; left: -4px; top: 0; color: var(--ink); text-transform: uppercase; letter-spacing: .06em; }
.plot-tick { position: absolute; top: 0; transform: translateX(-50%); }
.plot-end { position: absolute; right: -6px; top: 0; }
.plot-key { display: flex; gap: 16px; font-size: 13px; color: var(--ink-3); margin: 0 0 4px; }
.plot-key span { display: inline-flex; align-items: center; gap: 6px; }
.plot-key .pd { position: static; margin: 0; }
.cached { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-2); margin: 12px 0 2px; }
.cached .ic { width: 18px; height: 18px; color: var(--ink-3); }

.th-list { list-style: none; margin: 0; padding: 0; }
.th { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 2px 12px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.th:first-child { border-top: 2px solid var(--rule); }
.th-dist { display: flex; flex-direction: column; align-items: flex-start; padding-top: 1px; }
.th-dist b { font: 900 32px/.86 var(--font-display); letter-spacing: 0; }
.th-sub { display: flex; align-items: center; gap: 5px; margin-top: 5px; white-space: nowrap; }
.th-unit { font: 700 12px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.th-bear { display: inline-flex; align-items: center; gap: 1px; font: 700 12px/1 var(--font-mono); color: var(--ink-2); }
.bear-ic { width: 14px; height: 14px; stroke-width: 2.4; }
.th-main { min-width: 0; }
.th-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font: 800 21px/1.05 var(--font-display); letter-spacing: .02em; text-transform: uppercase; overflow-wrap: anywhere; }
.brand { font: 700 12px/1 var(--font-mono); letter-spacing: .06em; padding: 4px 6px 3px; border-radius: 3px; background: var(--ink); color: var(--bg); }
.th-addr { margin-top: 4px; font-size: 14px; color: var(--ink-2); }
.th-addr-none { color: var(--ink-3); }
.th.is-closed .th-name > span:first-child, .th.is-closed .th-dist b { opacity: .7; }
.th-act { grid-column: 1 / -1; display: flex; align-items: stretch; gap: 8px; margin-top: 10px; }
.btn-group { flex: 1 1 auto; min-width: 0; max-width: 460px; display: flex; border: 1.5px solid var(--rule-2); border-radius: 8px; overflow: hidden; }
.bg-btn {
  flex: 1 1 0; min-width: 0; gap: 5px; min-height: 44px; padding: 0 6px; border: 0; border-radius: 0; border-left: 1.5px solid var(--rule-2);
  font-size: 14px; color: var(--ink);
}
.bg-btn:first-child { border-left: 0; }
.bg-btn .ic { width: 16px; height: 16px; }
@media (max-width: 419px) { .bg-btn .ic { display: none; } }
.bg-btn:focus-visible { outline-offset: -3px; border-radius: 0; }
@media (hover: hover) { .bg-btn:hover { background: var(--surface-2); } }
.th-more { position: relative; flex: none; }
.th-more > summary { list-style: none; display: grid; place-items: center; height: 100%; min-height: 44px; }
.th-more > summary::-webkit-details-marker { display: none; }
.th-more[open] > summary { background: var(--surface-2); }
.menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 236px; padding: 6px;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; box-shadow: var(--shadow-md);
}
.menu-i {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 12px; border: 0; border-radius: 6px;
  background: none; color: var(--ink); text-decoration: none; text-align: left; cursor: pointer; font: 500 15px/1.2 var(--font-body);
}
.menu-i span { flex: 1; }
.menu-i .ic { width: 18px; height: 18px; color: var(--ink-3); }
@media (hover: hover) { .menu-i:hover { background: var(--surface-2); } }
.more-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; }
.hidden-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 0; font-size: 14px; color: var(--ink-2); }
.hidden-note .ic { width: 18px; height: 18px; color: var(--ink-3); }
/* Nothing to list: a hint and a map search (OpenStreetMap may simply be missing cinemas here). */
.th-empty { display: grid; gap: 10px; justify-items: start; margin: 18px 0 0; }
.empty-line { color: var(--ink-2); }
.btn-maps { white-space: normal; text-align: left; }
.about-note {
  display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; margin: 22px 0 0; padding: 14px 16px;
  border-radius: 10px; background: var(--surface); box-shadow: 0 0 0 1px var(--rule); font-size: 14px; color: var(--ink-2);
}
.about-note .ic { color: var(--ink-3); margin-top: 1px; }
.about-note b { color: var(--ink); }
.th-sk .sk-num { width: 40px; height: 30px; }
.th-sk .th-main { display: grid; gap: 8px; padding-top: 4px; }
.th-sk .sk-group { height: 44px; width: 100%; max-width: 420px; border-radius: 8px; }
.sk-sum { display: inline-block; width: 70%; height: 14px; }

/* ------------------------------------------------------------------ watchlist stubs */
.stubs { list-style: none; margin: 0; padding: 14px 0 0; display: grid; gap: 12px; }
.stub {
  --split: 78px; --n: 8px;
  position: relative; display: grid; grid-template-columns: var(--split) minmax(0, 1fr); min-height: 110px;
  background: var(--sb); color: var(--si); border-radius: 8px;
  -webkit-mask: radial-gradient(circle var(--n) at var(--split) 0, #0000 97%, #000) top / 100% 51% no-repeat, radial-gradient(circle var(--n) at var(--split) 100%, #0000 97%, #000) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle var(--n) at var(--split) 0, #0000 97%, #000) top / 100% 51% no-repeat, radial-gradient(circle var(--n) at var(--split) 100%, #0000 97%, #000) bottom / 100% 51% no-repeat;
}
.s-gold { --sb: var(--gold); --si: var(--gold-ink); }
.s-blue { --sb: var(--blue); --si: var(--blue-ink); }
.s-red { --sb: var(--red); --si: var(--red-ink); }
.s-green { --sb: var(--green); --si: var(--green-ink); }
.s-grey { --sb: var(--grey); --si: var(--grey-ink); }
.stub-l {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; padding: 10px 4px; text-align: center;
  border-right: 2px dashed color-mix(in srgb, currentColor 40%, transparent);
}
.stub-pre { font: 700 12px/1.1 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; }
.stub-big { font: 900 44px/.84 var(--font-display); letter-spacing: -.01em; }
.stub-big.is-long { font-size: 34px; }
.stub-unit { max-width: 100%; font: 700 12px/1.15 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.stub-word { max-width: 100%; font: 900 17px/.95 var(--font-display); letter-spacing: .01em; text-transform: uppercase; }
.stub-r { position: relative; min-width: 0; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; padding: 10px 10px 10px 12px; align-items: start; }
.art-thumb { width: 48px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); }
.stub-main { min-width: 0; }
.stub-title { padding-right: 38px; font: 800 21px/1.02 var(--font-display); letter-spacing: .02em; text-transform: uppercase; overflow-wrap: anywhere; }
.stub-x {
  position: absolute; z-index: 1; top: 4px; right: 4px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 8px; background: transparent; color: inherit; cursor: pointer;
}
.stub-x .ic { width: 20px; height: 20px; }
@media (hover: hover) { .stub-x:hover { background: color-mix(in srgb, currentColor 12%, transparent); } }
.stub-x:focus-visible { outline-offset: -3px; }
.stub-title a { color: inherit; text-decoration: none; }
/* Like a list row, the title link covers the ticket's right half, so tapping anywhere on it opens the film
   (a 44px+ target); Remove and the action button sit above it. */
.stub-title a::after { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: 0 8px 8px 0; }
.stub-title a:focus-visible { outline: none; }
.stub-title a:focus-visible::after { outline: 3px solid var(--focus); outline-offset: -3px; }
@media (hover: hover) { .stub-title a:hover { text-decoration: underline; text-underline-offset: 3px; } }
.stub-when { margin-top: 3px; padding-right: 30px; font-size: 14px; line-height: 1.3; }
.stub-when b { font-weight: 700; }
.stub-meta { display: none; }
.stub-act { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.btn-stub { min-height: 44px; padding: 0 12px; font-size: 14px; color: inherit; border-color: color-mix(in srgb, currentColor 45%, transparent); }
@media (hover: hover) { .btn-stub:hover { background: color-mix(in srgb, currentColor 10%, transparent); } }
.stub-empty, .prompt-card, .keycard, .empty-card {
  margin: 16px 0; padding: 22px 18px; border-radius: 12px; background: var(--surface); box-shadow: 0 0 0 1px var(--rule);
  display: grid; gap: 10px; justify-items: start;
}
.stub-empty { border: 2px dashed var(--rule-2); box-shadow: none; background: transparent; }
.empty-ic, .prompt-ic { width: 32px; height: 32px; color: var(--ink-3); }
.empty-h, .prompt-h, .keycard-h { font: 900 26px/1.02 var(--font-display); letter-spacing: .03em; text-transform: uppercase; }
.stub-empty p, .prompt-card p, .empty-card p, .keycard-lede { color: var(--ink-2); max-width: 60ch; }
.acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.local-note { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 13px; color: var(--ink-3); }
.local-note .ic { width: 16px; height: 16px; }

/* ------------------------------------------------------------------ notices */
.notice {
  display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 6px 12px; align-items: start;
  margin: 12px 0; padding: 14px 16px; border-radius: 10px; background: var(--gold); color: var(--gold-ink);
}
.notice-error { background: var(--red); color: var(--red-ink); }
.notice-info { background: var(--blue); color: var(--blue-ink); }
.notice-ic { width: 22px; height: 22px; margin-top: 1px; }
.notice-t { font-size: 15px; line-height: 1.4; }
.notice > .btn { grid-column: 2; justify-self: start; }
.notice > .acts { grid-column: 1 / -1; margin-top: 2px; }   /* full width: two small buttons fit one row */
.btn-on-notice { border-color: color-mix(in srgb, currentColor 55%, transparent); color: inherit; }
@media (hover: hover) { .btn-on-notice:hover { background: color-mix(in srgb, currentColor 10%, transparent); } }
.notice-card { padding: 18px 16px; grid-template-columns: 30px minmax(0, 1fr); }
.d-error { margin: 0; }
.notice-card .notice-ic { width: 28px; height: 28px; }
.notice-b { min-width: 0; display: grid; gap: 6px; }
.notice-h { font: 800 24px/1.05 var(--font-display); letter-spacing: .02em; text-transform: uppercase; }
.btn-on-red { background: var(--red-ink); color: var(--red); }
.btn-on-red-line { color: inherit; border-color: color-mix(in srgb, currentColor 50%, transparent); white-space: normal; text-align: left; }

/* ------------------------------------------------------------------ key steps (onboarding + key card) */
.kicker { display: flex; align-items: center; gap: 8px; font: 700 12px/1.2 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.kicker .ic { width: 18px; height: 18px; }
.steps { list-style: none; margin: 10px 0 4px; padding: 0; display: grid; gap: 16px; }
.steps li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; }
.step-no {
  display: grid; place-items: center; height: 34px; border-radius: 3px; background: var(--gold); color: var(--gold-ink);
  font: 900 18px/1 var(--font-display); letter-spacing: .06em;
  -webkit-mask: radial-gradient(circle 4px at 0 50%, #0000 96%, #000) left / 51% 100% no-repeat, radial-gradient(circle 4px at 100% 50%, #0000 96%, #000) right / 51% 100% no-repeat;
          mask: radial-gradient(circle 4px at 0 50%, #0000 96%, #000) left / 51% 100% no-repeat, radial-gradient(circle 4px at 100% 50%, #0000 96%, #000) right / 51% 100% no-repeat;
}
.step-b { min-width: 0; }
.step-b > b { display: block; font-size: 16px; }
.step-b p { margin-top: 3px; font-size: 15px; color: var(--ink-2); }
.step-b p b { color: var(--ink); }
/* The Application URL to give TMDB: on its own line, one tap selects all of it. */
.app-url { display: block; margin: 4px 0 6px; color: var(--ink); font-weight: 700; overflow-wrap: anywhere; -webkit-user-select: all; user-select: all; }
.url-seg { white-space: nowrap; }   /* path segments stay whole; the address breaks after a slash */
.step-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 700; font-size: 15px; overflow-wrap: anywhere; }
.keycard .btn { margin-top: 6px; }

/* ------------------------------------------------------------------ list footer */
.credits { margin-top: 28px; padding: 10px 0 8px; border-top: 1px solid var(--rule); font-size: 13px; color: var(--ink-3); }
.credits p { display: flex; flex-wrap: wrap; align-items: center; column-gap: 20px; }
.credits p > span { display: inline-flex; flex-wrap: wrap; align-items: center; column-gap: .3em; }
.credits p > .dot { display: none; }
.credits a, .credits .linklike { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; color: var(--ink-2); font-weight: 700; }
.credits .linklike { font-size: 13px; }

/* ------------------------------------------------------------------ sheets: shared */
.scrim { position: fixed; inset: 0; z-index: 40; background: var(--scrim); }
.sheet { position: fixed; z-index: 50; overflow-y: auto; overscroll-behavior: contain; background: var(--bg); color: var(--ink); }
/* Only the headings the app focuses for screen readers (tabindex -1) go without a ring; a focused
   button, such as the Remove key / Reset everything confirm, keeps its ring. */
.sheet:focus, .sheet [data-focus][tabindex="-1"]:focus { outline: none; }
.sheet-panel {
  left: 0; right: 0; bottom: 0; max-height: 92vh; max-height: 92dvh; border-radius: 16px 16px 0 0;
  background: var(--surface); box-shadow: var(--shadow-lg); padding: 8px var(--pad-r) calc(18px + var(--sa-bottom)) var(--pad-l);
}
.grab { width: 40px; height: 5px; border-radius: 3px; background: var(--rule-2); margin: 2px auto 10px; }
.sheet-h { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.sheet-h h2 { font: 900 28px/1 var(--font-display); letter-spacing: .03em; text-transform: uppercase; }
.sheet-x { margin-left: auto; flex: none; }
.field-l { display: block; margin: 18px 0 8px; font: 700 12px/1.2 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.input {
  width: 100%; min-height: 50px; padding: 0 14px; border-radius: 8px; border: 1.5px solid var(--field-line);
  background: var(--bg); color: var(--ink); font: 400 17px/1.2 var(--font-body);
}
.input:focus-visible { outline-offset: 0; border-color: var(--ink); }
.input.mono { font: 400 16px/1.2 var(--font-mono); letter-spacing: .02em; }
.input::placeholder { color: var(--ink-3); opacity: 1; }
.input[aria-invalid="true"] { border-color: var(--red-ink); }
.field-err { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 0; padding: 10px 12px; border-radius: 8px; background: var(--red); color: var(--red-ink); font-size: 15px; }
.field-err .ic { margin-top: 1px; }
.fine { margin-top: 10px; font-size: 13px; color: var(--ink-3); }
.fine a { color: var(--ink-2); font-weight: 700; }
.or { display: flex; align-items: center; gap: 12px; margin: 16px 0 0; color: var(--ink-3); font-size: 14px; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.cur-place { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; padding: 12px 14px; border-radius: 10px; background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--rule); }
.cur-place > div { min-width: 0; flex: 1; }
.cur-place b { display: block; font: 800 21px/1.05 var(--font-display); letter-spacing: .04em; text-transform: uppercase; overflow-wrap: anywhere; }
.cur-place span { display: block; margin-top: 3px; font-size: 14px; color: var(--ink-2); }
.cc-ink { color: var(--ink-2); }
.search-row { display: grid; gap: 8px; }
.search-row .btn { min-height: 50px; }
@media (min-width: 480px) {
  .search-row { grid-template-columns: minmax(0, 1fr) auto; }
}
.picks { list-style: none; margin: 10px 0 0; padding: 0; border-radius: 10px; overflow: hidden; box-shadow: inset 0 0 0 1.5px var(--rule); }
.picks li + li { border-top: 1px solid var(--rule); }
.pick {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; min-height: 56px; padding: 9px 14px;
  border: 0; background: transparent; color: var(--ink); text-align: left; cursor: pointer;
}
.pick b { font-weight: 700; font-size: 16px; }
.pick span { font-size: 14px; color: var(--ink-2); }
.pick:focus-visible { outline-offset: -3px; }  /* .picks clips its corners, so the ring sits inside */
@media (hover: hover) { .pick:hover { background: var(--surface-2); } }
.no-match { margin-top: 10px; padding: 10px 12px; border-radius: 8px; background: var(--surface-2); font-size: 15px; }
.select-wrap { position: relative; }
.select { appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer; }
.select-ic { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--ink-2); }
.sheet-foot { display: grid; gap: 6px; justify-items: center; margin-top: 22px; }
.attrib { margin-top: 18px; }

/* settings */
.set-sec { padding: 4px 0 8px; }
.set-sec + .set-sec { border-top: 1px solid var(--rule); margin-top: 8px; }
.keyline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 15px; }
.key-kind { font-weight: 700; }
.key-mask { font: 700 15px/1 var(--font-mono); background: var(--surface-2); padding: 7px 9px; border-radius: 5px; letter-spacing: .04em; }
.test-state { display: flex; align-items: center; gap: 8px; min-height: 22px; margin-top: 8px; font-size: 14px; color: var(--ink-2); }
.test-state:empty { display: none; }
.test-state .ic { width: 18px; height: 18px; }
.test-ok { color: var(--green-ink); }
.test-fail { color: var(--red-ink); }
@media (prefers-color-scheme: light) { .test-ok { color: #145131; } .test-fail { color: #7C1022; } }
.set-p { color: var(--ink-2); }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; }
.set-row + .set-row { border-top: 1px solid var(--rule); }
.set-row b { font-size: 16px; }
.set-row .fine { margin-top: 2px; }
.set-row .btn { flex: none; }
.confirm { margin-top: 10px; padding: 14px; border-radius: 10px; background: var(--red); color: var(--red-ink); }
.confirm p { font-size: 15px; }
.confirm .btn-line { border-color: color-mix(in srgb, currentColor 50%, transparent); color: inherit; }
.tmdb-credit { display: inline-flex; align-items: center; min-height: 44px; }
.tmdb-credit img { display: block; width: 128px; height: auto; }
.tmdb-notice { font-size: 14px; color: var(--ink-2); }
.credit-list { margin: 10px 0 0; padding-left: 18px; font-size: 14px; color: var(--ink-2); display: grid; gap: 4px; }
.credit-list a { color: var(--link); }
.about-app { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--rule); }
.wordmark-inv { background: var(--frame); color: var(--frame-ink); }
.version { font: 700 12px/1.3 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }

/* ------------------------------------------------------------------ detail */
.sheet-detail { inset: 0; --d-pl: var(--pad-l); --d-pr: var(--pad-r); }
/* Home Screen app (black-translucent status bar): a full-screen sheet keeps a red strip under the clock
   and battery while it scrolls, as the crown does on the main view. 0px tall wherever there is no inset. */
.sheet-detail::before, .sheet-onb::before {
  content: ""; position: sticky; top: 0; z-index: 4; display: block; height: var(--sa-top);
  margin-bottom: calc(-1 * var(--sa-top)); background: var(--frame); pointer-events: none;
}
.d-hero { position: relative; }
.art-backdrop { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 0; background: #000; box-shadow: none; }
.d-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, .45) 0%, transparent 32%, transparent 58%, rgba(0, 0, 0, .3) 100%); }
/* The back button stays on screen while the details scroll: a Home Screen app has no browser Back. */
.d-top { position: sticky; z-index: 3; top: 0; height: 0; }
.d-top .round { position: absolute; left: max(12px, var(--sa-left)); top: max(10px, calc(var(--sa-top) + 6px)); }
.round { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; border: 0; cursor: pointer; background: rgba(14, 12, 18, .66); color: #fff; }
.round:focus-visible { outline-color: #fff; }
.d-head { position: relative; z-index: 1; display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 0 16px; padding: 0 var(--d-pr) 0 var(--d-pl); margin-top: -52px; }
.art-detail { width: 104px; border-radius: 4px; box-shadow: 0 10px 28px rgba(0, 0, 0, .35), 0 0 0 1px rgba(0, 0, 0, .12); }
.d-titles { align-self: end; min-width: 0; padding-top: 60px; }
.d-kicker { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.d-title { font: 900 32px/.98 var(--font-display); letter-spacing: .02em; text-transform: uppercase; overflow-wrap: anywhere; }
.d-genres { margin-top: 6px; font-size: 15px; color: var(--ink-2); }
.d-tagline { margin-top: 6px; font-size: 15px; color: var(--ink-2); }
.d-body { display: grid; gap: 22px; padding: 18px var(--d-pr) 30px var(--d-pl); }
.tk {
  --split: 68px; --n: 9px; --tb: var(--red); --ti: var(--red-ink);
  display: grid; grid-template-columns: minmax(0, 1fr) var(--split); border-radius: 8px; background: var(--tb); color: var(--ti);
  -webkit-mask: radial-gradient(circle var(--n) at calc(100% - var(--split)) 0, #0000 97%, #000) top / 100% 51% no-repeat, radial-gradient(circle var(--n) at calc(100% - var(--split)) 100%, #0000 97%, #000) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle var(--n) at calc(100% - var(--split)) 0, #0000 97%, #000) top / 100% 51% no-repeat, radial-gradient(circle var(--n) at calc(100% - var(--split)) 100%, #0000 97%, #000) bottom / 100% 51% no-repeat;
}
.tk.t-gold { --tb: var(--gold); --ti: var(--gold-ink); }
.tk.t-blue { --tb: var(--blue); --ti: var(--blue-ink); }
.tk.t-green { --tb: var(--green); --ti: var(--green-ink); }
.tk-dl { min-width: 0; padding: 14px 12px 14px 16px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: 14px 10px; }
.tk-dl > div { min-width: 0; }
.tk dt { font: 700 12px/1.15 var(--font-mono); letter-spacing: .07em; text-transform: uppercase; opacity: .92; }
.tk-v { margin-top: 6px; font: 800 23px/1 var(--font-display); letter-spacing: .02em; text-transform: uppercase; overflow-wrap: anywhere; }
.tk-v small { font: 800 15px/1 var(--font-display); opacity: .85; }
.tk-v-sm { font-size: 18px; line-height: 1.05; }
.tk-sub { margin-top: 4px; font-size: 13px; line-height: 1.2; }
.tk-wide { grid-column: 1 / -1; padding-top: 12px; border-top: 1.5px dashed color-mix(in srgb, currentColor 35%, transparent); }
.rel-lines { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 7px; }
.rel-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; font-size: 15px; line-height: 1.25; }
.rel-line .k { min-width: 70px; font: 700 12px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.rel-line b { font: 800 20px/1 var(--font-display); letter-spacing: .03em; text-transform: uppercase; }
.tk-stub { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 0; border-left: 2px dashed color-mix(in srgb, currentColor 38%, transparent); }
.tk-stub .v { writing-mode: vertical-rl; transform: rotate(180deg); font: 900 17px/1 var(--font-display); letter-spacing: .2em; text-transform: uppercase; }
.tk-stub .no { display: grid; justify-items: center; gap: 3px; font: 700 12px/1 var(--font-mono); letter-spacing: .02em; }
.d-actions { display: grid; gap: 12px; }
.d-primary { display: grid; gap: 6px; }
.hint { font-size: 14px; color: var(--ink-2); }
.d-more { display: flex; flex-wrap: wrap; gap: 8px; }
.d-more > .btn { flex: 1 1 auto; white-space: nowrap; }
.btn-save[aria-pressed="true"] { background: var(--gold); color: var(--gold-ink); border-color: transparent; }
.more-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-2); }
.more-links .btn { min-height: 44px; padding: 0 12px; font-size: 14px; }
.more-l { flex-basis: 100%; font: 700 12px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.d-sec h3 { margin-bottom: 9px; font: 700 12px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.d-sec p { font-size: 16px; line-height: 1.55; }
.d-sec .fine { font-size: 13px; }
.d-people { font-weight: 700; }
.people { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.people li { min-width: 0; overflow-wrap: anywhere; }
.people b { display: block; font-size: 15px; }
.people span { display: block; font-size: 14px; color: var(--ink-2); }
.people .as { display: inline; color: var(--ink-3); }
.prov-row { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 8px; align-items: start; margin-bottom: 8px; }
.prov-k { padding-top: 9px; font: 700 12px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.providers { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.prov { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px 0 6px; border-radius: 999px; background: var(--green); color: var(--green-ink); font-weight: 700; font-size: 14px; }
.prov-logo { position: relative; flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; overflow: hidden; background: color-mix(in srgb, currentColor 18%, transparent); }
.prov-ini { font: 700 12px/1 var(--font-body); }
.prov-logo img { position: absolute; inset: 0; width: 24px; height: 24px; }
.prov-logo.no-img img { display: none; }
.d-loading { display: grid; gap: 10px; }
.d-loading .sk-h { height: 12px; width: 90px; margin-top: 8px; }
.d-loading .sk-p { height: 15px; width: 100%; }
.d-loading .sk-short { width: 55%; }
.d-credits { padding: 16px var(--d-pr) calc(24px + var(--sa-bottom)) var(--d-pl); border-top: 1px solid var(--rule); font-size: 13px; color: var(--ink-3); }

/* ------------------------------------------------------------------ onboarding (full-screen sheet) */
.sheet-onb { inset: 0; z-index: 70; background: var(--bg); }
.onb-crown { background: var(--frame); color: var(--frame-ink); padding-top: var(--crown-pad); }
.onb-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 56px; max-width: calc(1240px + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--pad-r) 0 var(--pad-l); }
.onb-bar .sheet-x { color: var(--frame-ink); border-color: color-mix(in srgb, var(--frame-ink) 55%, transparent); }
.wordmark-tk {
  position: relative; display: inline-flex; align-items: center; height: 36px; padding: 0 18px;
  background: var(--frame-ink); color: var(--frame);
  font: 900 18px/1 var(--font-display); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap;
  -webkit-mask: radial-gradient(circle 7px at 0 50%, #0000 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 7px at 100% 50%, #0000 97%, #000) right / 51% 100% no-repeat;
          mask: radial-gradient(circle 7px at 0 50%, #0000 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 7px at 100% 50%, #0000 97%, #000) right / 51% 100% no-repeat;
}
.wordmark-tk::after { content: ""; position: absolute; inset: 4px 11px; border: 1.5px dashed currentColor; opacity: .45; border-radius: 2px; }
.onb-mq { max-width: calc(1240px + 2 * var(--gutter)); margin: 0 auto; padding: 0 max(10px, var(--sa-right)) 8px max(10px, var(--sa-left)); box-shadow: inset 0 -3px 0 var(--frame-2); }
.onb { max-width: calc(1240px + 2 * var(--gutter)); margin: 0 auto; padding: 22px var(--pad-r) calc(36px + var(--sa-bottom)) var(--pad-l); display: grid; gap: 24px; }
.onb-h { margin-top: 10px; font: 900 34px/.98 var(--font-display); letter-spacing: .01em; text-transform: uppercase; }
.onb-lede { margin-top: 12px; font-size: 17px; color: var(--ink-2); max-width: 46ch; }
.onb-get { display: none; list-style: none; margin: 24px 0 0; padding: 0; }
.onb-card { min-width: 0; padding: 20px 18px; border-radius: 12px; background: var(--surface); box-shadow: 0 0 0 1px var(--rule); }
.onb-card-h { font: 900 26px/1 var(--font-display); letter-spacing: .03em; text-transform: uppercase; }
.onb-card .btn-block { margin-top: 12px; }
.notes { margin: 12px 0 0; padding-left: 18px; display: grid; gap: 6px; font-size: 14px; color: var(--ink-2); }
.app-url-inline { display: inline; margin: 0; }
/* iPhone Safari tab: add to the Home Screen before pasting (the Home Screen app has its own storage). */
.onb-tip { display: flex; align-items: flex-start; gap: 8px; margin: 14px 0 0; padding: 10px 12px; border-radius: 8px; background: var(--blue); color: var(--blue-ink); font-size: 15px; }
.onb-tip .ic { margin-top: 1px; }
.onb-skip { margin-top: 8px; }
.onb-bar-skip {
  min-height: 44px; padding: 0 6px; border: 0; background: none; cursor: pointer; color: var(--frame-ink);
  font: 600 16px/1 var(--font-body); text-decoration: underline; text-underline-offset: 3px;
}
.onb-loc { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 12px 14px; border-radius: 10px; background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--rule); }
.onb-loc b { display: block; font: 800 21px/1.05 var(--font-display); letter-spacing: .04em; text-transform: uppercase; }
.onb-loc span { display: block; margin-top: 3px; font-size: 14px; color: var(--ink-2); }
.stack { display: grid; gap: 10px; margin-top: 14px; }
.stack .btn-block { margin-top: 0; }

/* ------------------------------------------------------------------ toasts, update banner, file warning */
/* Toasts sit above every sheet, the full-screen onboarding included ("Key saved"), and stack above the
   update banner while it shows. */
.toast {
  position: fixed; z-index: 75; left: 50%; bottom: var(--banner-bottom); transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px; width: max-content; max-width: calc(100vw - 24px - var(--sa-left) - var(--sa-right));
  padding: 6px 6px 6px 16px; border-radius: 12px; background: var(--ink); color: var(--bg); box-shadow: var(--shadow-md);
}
.toast-t { min-width: 0; font-size: 15px; font-weight: 500; overflow-wrap: anywhere; }
.toast-btn {
  flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 0; border-radius: 8px; cursor: pointer;
  background: var(--bulb); color: var(--pill-ink); font: 700 15px/1 var(--font-body);
}
.toast-btn .ic { width: 18px; height: 18px; }
.toast :focus-visible { outline-color: var(--bg); }
.toast:not(:has(.toast-btn)) { padding: 12px 16px; }
body:has(#update-banner:not([hidden])):not(:has(#sheet-root > *)) .toast { bottom: calc(var(--banner-bottom) + 64px); }
/* Hidden while a sheet is open (it would cover the Location sheet's Done); it comes back when the sheet closes. */
html:has(#sheet-root > *) .update-banner, html.has-sheet .update-banner { display: none; }
.update-banner {
  position: fixed; z-index: 55; left: max(12px, var(--sa-left)); right: max(12px, var(--sa-right)); bottom: var(--banner-bottom);
  display: flex; align-items: center; gap: 12px; max-width: 520px; margin: 0 auto; padding: 6px 6px 6px 16px;
  border-radius: 12px; background: var(--gold); color: var(--gold-ink); box-shadow: var(--shadow-md);
}
.update-banner p { flex: 1; font-weight: 700; }
.update-banner button {
  flex: none; min-height: 44px; padding: 0 16px; border: 0; border-radius: 8px; cursor: pointer;
  background: var(--gold-ink); color: var(--gold); font: 700 15px/1 var(--font-body);
}
.noscript {
  position: fixed; z-index: 80; left: max(12px, var(--sa-left)); right: max(12px, var(--sa-right)); bottom: var(--banner-bottom);
  max-width: 520px; margin: 0 auto; padding: 14px 16px; border-radius: 12px; background: var(--gold); color: var(--gold-ink); font-weight: 700;
}
.file-warning { display: none; }
.is-file .file-warning {
  display: grid; place-content: center; gap: 14px; position: fixed; inset: 0; z-index: 300; padding: 32px 24px;
  background: var(--bg); color: var(--ink); text-align: center;
}
.is-file .file-warning h1 { font: 900 34px/1 var(--font-display); letter-spacing: .03em; text-transform: uppercase; }
.is-file .file-warning p { max-width: 36ch; margin: 0 auto; font-size: 17px; }
.is-file .file-warning a { font-weight: 700; overflow-wrap: anywhere; }
.is-file #app, .is-file #sheet-root, .is-file #toast-root, .is-file #update-banner { display: none !important; }

/* ------------------------------------------------------------------ rail (desktop >= 1100px) */
.rail-sec + .rail-sec { margin-top: 28px; }
.rail-h { margin-bottom: 12px; padding-bottom: 8px; border-bottom: 2px solid var(--rule); font: 700 12px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.stubs.stubs-rail { padding: 0; grid-template-columns: minmax(0, 1fr); }
.stub-compact { --split: 72px; min-height: 0; }
.stub-compact .stub-r { grid-template-columns: 40px minmax(0, 1fr); gap: 10px; }
.stub-compact .art-thumb { width: 40px; }
.stub-compact .stub-title { font-size: 19px; }
.stub-compact .stub-big { font-size: 38px; }
.rail-empty { font-size: 14px; color: var(--ink-2); margin-bottom: 10px; }
.rail-th { list-style: none; margin: 0; padding: 0; }
.rail-th li { display: grid; grid-template-columns: 62px minmax(0, 1fr) 44px; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--rule); }
.rail-d { font: 700 12px/1 var(--font-mono); color: var(--ink-3); text-transform: uppercase; }
.rail-d b { font: 900 24px/1 var(--font-display); color: var(--ink); }
.rail-n { min-width: 0; }
.rail-name { display: block; font-weight: 700; font-size: 15px; line-height: 1.25; overflow-wrap: anywhere; }
.rail-sub { display: block; font-size: 13px; color: var(--ink-2); overflow-wrap: anywhere; }
.rail-go { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 8px; color: var(--ink-2); }
@media (hover: hover) { .rail-go:hover { background: var(--surface-2); color: var(--ink); } }
.rail-more { font-size: 14px; }
.rail-credits { font-size: 13px; color: var(--ink-3); display: grid; gap: 8px; }
.rail-credits a, .rail-credits .linklike { color: var(--ink-2); font-weight: 700; }
.rail-credits .linklike { font-size: 13px; }

/* ------------------------------------------------------------------ desktop (>= 900px) */
@media (min-width: 900px) {
  /* Only the crown is sticky here (the date column sticks beside the list, not over it). */
  html { scroll-padding-top: calc(var(--sticky-top) + 12px); }
  .crown-bar { display: flex; align-items: center; gap: 16px; padding: 0 var(--pad-r) 0 var(--pad-l); }
  .crown .wordmark {
    position: relative; flex: none; display: inline-flex; align-items: center; width: auto; height: 36px; margin: 0; padding: 0 18px;
    overflow: visible; clip: auto; clip-path: none; background: var(--frame-ink); color: var(--frame);
    -webkit-mask: radial-gradient(circle 7px at 0 50%, #0000 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 7px at 100% 50%, #0000 97%, #000) right / 51% 100% no-repeat;
            mask: radial-gradient(circle 7px at 0 50%, #0000 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 7px at 100% 50%, #0000 97%, #000) right / 51% 100% no-repeat;
  }
  .crown .wordmark::after { content: ""; position: absolute; inset: 4px 11px; border: 1.5px dashed currentColor; opacity: .45; border-radius: 2px; }
  .place-btn { padding: 0 8px; }
  .loc-name { font-size: 24px; }
  .approx { display: inline; }
  .freshness { margin-left: auto; padding: 0; font-size: 15px; line-height: 1.2; }
  .crown-icon { display: grid; }
  .marquee { position: relative; top: auto; height: auto; padding: 0 var(--pad-r) 10px var(--pad-l); }
  .panel { display: none; }
  .tabs-desktop { display: block; max-width: 1240px; margin: 0 auto; }
  .tabs-desktop .bulbs { height: 14px; margin: 0 -6px; background-size: 16px 14px; background-position: 0 1px; }
  .tabs-desktop .bulbs.is-busy, .tabs-desktop .bulbs.is-degraded { background-size: 48px 14px, 48px 14px, 48px 14px; }
  .tabs-desktop .bulbs.is-degraded { background-size: 32px 14px, 32px 14px; }
  .tabbar { display: none; }
  .credits p { column-gap: 10px; }
  .credits p > .dot { display: inline; }

  .row { grid-template-columns: 84px minmax(0, 1fr) 44px; gap: 0 18px; padding: 18px 0; }
  .art-row { width: 84px; }
  .row-title { font-size: 24px; }
  .row-ov { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; max-width: 66ch; font-size: 14px; line-height: 1.45; color: var(--ink-2); }

  .grp-split { display: grid; grid-template-columns: 172px minmax(0, 1fr); column-gap: 28px; border-top: 2px solid var(--rule); margin-top: 0; }
  .grp-split .grp-h { position: sticky; top: calc(var(--sticky-top) + 12px); align-self: start; flex-direction: column; align-items: flex-start; gap: 10px; min-height: 0; padding: 18px 0; border: 0; background: none; }
  .grp-split .grp-d { font-size: 29px; white-space: normal; }
  .grp-split .when { margin-left: 0; }
  .grp-split .when.is-past { padding-left: 0; }
  .grp-split .grp-sub { flex-direction: column; align-items: flex-start; gap: 6px; }
  .grp-soon .grp-h { position: sticky; top: calc(var(--sticky-top) + var(--ruler-h) + 12px); }
  .grp-soon { scroll-margin-top: 0; }   /* html's scroll-padding-top on Coming soon already clears the ruler */
  .grp-flat .board { border-top: 2px solid var(--rule); }

  .ruler { margin: 0 0 4px; border: 1px solid var(--rule); border-top: 0; border-radius: 0 0 10px 10px; }
  .ruler-scroll { padding: 0 12px; }
  .ruler-weeks { flex: 1; min-width: 0; }
  .wk-li { flex: 1 1 0; min-width: 30px; }
  @media (pointer: coarse) { .wk-li { min-width: 44px; } }
  .wk, .wk.is-today { width: 100%; }
  .ruler-scroll { scrollbar-width: thin; }
  .ruler-scroll::-webkit-scrollbar { display: block; height: 6px; }
  .ruler-scroll::-webkit-scrollbar-thumb { background: var(--rule-2); border-radius: 3px; }
  .wk-li:has(.is-today) { min-width: 58px; }
  .ruler-key { display: flex; gap: 16px; justify-content: flex-end; margin: 0; padding: 0 12px 6px; font-size: 13px; color: var(--ink-3); }
  .ruler-key span { display: inline-flex; align-items: center; gap: 6px; }

  .th { grid-template-columns: 74px minmax(0, 1fr) auto; align-items: center; gap: 4px 18px; padding: 16px 0; }
  .th-dist b { font-size: 34px; }
  .th-act { grid-column: 3; margin-top: 0; }
  .btn-group { width: 380px; }

  .stubs { grid-template-columns: 1fr 1fr; gap: 16px 20px; }
  .stub { --split: 92px; }
  .stub-big { font-size: 50px; }
  .stub-word { font-size: 20px; }
  .stub-r { grid-template-columns: 60px minmax(0, 1fr); padding: 12px 12px 12px 14px; }
  .art-thumb { width: 60px; }
  .stub-meta { display: inline; opacity: .92; }
  .stub-compact { --split: 72px; }
  .stub-compact .stub-r { grid-template-columns: 40px minmax(0, 1fr); }
  .stub-compact .art-thumb { width: 40px; }
  .stub-compact .stub-big { font-size: 38px; }

  .sheet-detail { inset: 0 0 0 auto; width: min(580px, 94vw); box-shadow: var(--shadow-lg); --d-pl: var(--gutter); }
  .d-top .round { left: 12px; }   /* a drawer: only its right edge meets the screen edge */
  .d-head { grid-template-columns: 124px minmax(0, 1fr); margin-top: -64px; }
  .art-detail { width: 124px; }
  .d-title { font-size: 40px; }

  .sheet-panel {
    left: 50%; right: auto; top: 6vh; bottom: auto; width: 520px; max-height: 88vh; transform: translateX(-50%);
    border-radius: 14px; padding: 20px 26px 24px;
  }
  .grab { display: none; }

  .onb { grid-template-columns: minmax(0, 1fr) minmax(0, 500px); gap: 48px; align-items: start; padding-top: 40px; }
  .onb-h { font-size: 58px; }
  .onb-get { display: grid; }
  .onb-get li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--rule); }
  .onb-get li:last-child { border-bottom: 1px solid var(--rule); }
  .onb-get .ic { width: 26px; height: 26px; color: var(--ink-2); }
  .onb-get b { display: block; font: 800 19px/1.05 var(--font-display); letter-spacing: .03em; text-transform: uppercase; }
  .onb-get span { font-size: 14px; color: var(--ink-2); }
  .onb-card { padding: 26px 26px 22px; }
  .onb-mq .mq-stage { height: 76px; padding: 0 18px; }
  .onb-mq .mq-title { font-size: 40px; }
  .onb-mq .bulbs { height: 14px; background-size: 16px 14px; background-position: 0 1px; }
}

/* ------------------------------------------------------------------ desktop with right rail (>= 1100px) */
@media (min-width: 1100px) {
  .layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; column-gap: 44px; align-items: start; }
  /* 6px of side padding (cancelled by the margin) so the scroller doesn't clip focus rings at its edges. */
  .rail {
    display: block; position: sticky; top: calc(var(--sticky-top) + 4px); padding: 18px 6px 24px; margin-inline: -6px;
    max-height: calc(100vh - var(--sticky-top) - 4px); overflow-y: auto; scrollbar-width: thin;
  }
  .th-act { grid-column: 1 / -1; margin-top: 8px; }
  .th { grid-template-columns: 74px minmax(0, 1fr); }
  .stubs { grid-template-columns: 1fr; }
}
@media (min-width: 1240px) {
  .th { grid-template-columns: 74px minmax(0, 1fr) auto; }
  .th-act { grid-column: 3; margin-top: 0; }
  .btn-group { width: 340px; }
  .stubs { grid-template-columns: 1fr 1fr; }
}

/* ------------------------------------------------------------------ small phones */
@media (max-width: 340px) {
  .loc-name { font-size: 18px !important; }
  .place-btn > .ic-s { display: none; }
  .refresh { padding: 0 12px 0 10px; font-size: 15px; }
  .tab-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .tab-short { display: inline; }
  /* A stub's "Showtimes near me" must fit its ~150px column instead of being cut by the ticket edge. */
  .btn-stub { font-size: 13px; }
  .btn-stub .ext { display: none; }
}
@media (max-width: 370px) {
  .stub { --split: 66px; }
  .stub-r { grid-template-columns: 40px minmax(0, 1fr); gap: 10px; }
  .art-thumb { width: 40px; }
  .stub-title { font-size: 18px; }
  .stub-big { font-size: 38px; }
  .stub-word { font-size: 15px; }
  .btn-stub { padding: 0 8px; white-space: nowrap; }
  .loc-name { font-size: 20px; }
  .mq-title { font-size: 24px; }
  .refresh { padding: 0 14px 0 11px; }
  .row { grid-template-columns: 64px minmax(0, 1fr) 44px; gap: 0 12px; }
  .art-row { width: 64px; }
  .seg button { padding: 0 10px; }
}

/* ------------------------------------------------------------------ short phone screens (landscape) */
/* A landscape iPhone (or any short, narrow window): only the crown stays put, the tab bar is one row and
   the detail backdrop is shorter, so the list keeps room between them. */
@media (max-width: 899px) and (max-height: 500px) {
  :root { --sticky-top: calc(var(--crown-pad) + var(--crown-bar-h)); --tabbar-h: 48px; }
  html, html:has(#view-soon:not([hidden]) .ruler) { scroll-padding-top: calc(var(--sticky-top) + 8px); }
  .marquee { position: relative; top: auto; }
  .grp-h, .ruler { position: static; }
  .tabbar { padding-top: 2px; padding-bottom: calc(2px + var(--sa-bottom)); }
  .tab { flex-direction: row; gap: 8px; min-height: 44px; }
  .art-backdrop { aspect-ratio: auto; height: 62vh; }
}

/* ------------------------------------------------------------------ forced colors (Windows High Contrast) */
/* Selected states are drawn with fills and shadows, which forced colours remove: use system colours. */
@media (forced-colors: active) {
  .seg button[aria-pressed="true"], .mq-tab[aria-current="page"], .wk[aria-current] .wk-d {
    forced-color-adjust: none; background: Highlight; color: HighlightText;
  }
  .mq-tab[aria-current="page"] .c { color: HighlightText; }
  .tab[aria-current="page"] .tab-ic { forced-color-adjust: none; color: HighlightText; }
  .tab[aria-current="page"] .tab-ic::before { background: Highlight; box-shadow: none; }
  .mk, .pd.is-chain { forced-color-adjust: none; background: CanvasText; border-color: CanvasText; }
  .mk-limited { forced-color-adjust: none; background: Canvas; box-shadow: inset 0 0 0 1.5px CanvasText; }
  .mk-saved { forced-color-adjust: none; background: Highlight; box-shadow: none; }
}

/* ------------------------------------------------------------------ motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .bulbs.is-busy { animation: none; }
  .pend::after, .sk::after { display: none; }
  .spin { animation: none; }
  .mq-title.flip .l { animation: none; }
}

/* ------------------------------------------------------------------ movie search sheet */
.sheet-search .msr-body { margin-top: 14px; }
.msr { list-style: none; margin: 0; padding: 0; }
.msr li + li { border-top: 1px solid var(--rule); }
.msr-row {
  display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  min-height: 56px; padding: 8px 2px; color: inherit; text-decoration: none; border-radius: 6px;
}
.msr-row:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.msr-row .art-thumb { width: 48px; }
.msr-t { display: grid; gap: 2px; min-width: 0; }
.msr-t b { font: 700 16px/1.25 var(--font-body); overflow-wrap: anywhere; }
.msr-meta { font-size: 14px; color: var(--ink-2); }
.msr-row .tag { white-space: nowrap; }