/* Култура в София
 *
 * Quiet paper-and-ink base; colour comes from the events themselves.
 * Every event element carries a class (.p-<image> from /palette/*.css,
 * or a .t-* fallback below) that defines --p-bg, --p-fg, --p-muted,
 * --p-accent and --p-ph. Those are contrast-checked per palette.
 */

/* ---------- tokens ---------- */
:root {
  --paper: #f3f4f7;
  --surface: #ffffff;
  --ink: #181a2f;
  --ink-2: #4a4d68;
  --rule: #d8dae4;
  --indigo: #3b3fc4;
  --on-indigo: #ffffff;
  --marker: #ffd447;
  --marker-ink: #181a2f;
  --danger: #b42318;
  /* The active tab's icon on the tab bar: the light marker is too pale
     on paper (1.3:1), so light themes use the indigo. */
  --tab-mark: var(--indigo);

  --display: "Sofia Sans Extra Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --text: "Sofia Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --gutter: 16px;
  --max: 1180px;
  --r-card: 16px;
  --r-thumb: 10px;
  --r-btn: 10px;
  color-scheme: light;

  /* Event types (types.go, "event types" below): AA as text on the page. */
  --ty-theatre: #9a4a00; --ty-film: #1f5fb3; --ty-concert: #a8326a; --ty-classical: #6b3fb0;
  --ty-opera: #b2352a; --ty-ballet: #0f7563; --ty-musical: #7d5f00; --ty-performance: #9b3b5a;
  --ty-standup: #4a7412; --ty-exhibition: #0f6a85; --ty-dance: #8a3aa8; --ty-magic: #6d28d9;
  --ty-literature: #9d174d; --ty-talk: #0e7490; --ty-workshop: #a16207; --ty-games: #be185d;
  --ty-fair: #b45309; --ty-sport: #0b7a3b; --ty-other: #555b6e; --ty-event: #555b6e;
  /* Любими (saved events and venues), and text on it (the count badge). */
  --fav: #c92a5f; --on-fav: #ffffff;
}

:root[data-theme="dark"] {
  --paper: #11121c;
  --surface: #1b1c2b;
  --ink: #ececf4;
  --ink-2: #a9abc3;
  --rule: #2c2e43;
  --indigo: #a3a6ff;
  --on-indigo: #11121c;
  --danger: #ff8a80;
  --tab-mark: var(--marker);
  color-scheme: dark;

  --ty-theatre: #f6a85f; --ty-film: #7cb6ff; --ty-concert: #f78fb8; --ty-classical: #c6a6ff;
  --ty-opera: #ff8f80; --ty-ballet: #7fe0cf; --ty-musical: #ffd166; --ty-performance: #ff9ec0;
  --ty-standup: #a8de6f; --ty-exhibition: #6fd0ef; --ty-dance: #e9a6ff; --ty-magic: #b9a3ff;
  --ty-literature: #fda4af; --ty-talk: #67e8f9; --ty-workshop: #fcd34d; --ty-games: #f9a8d4;
  --ty-fair: #fdba74; --ty-sport: #6fe39a; --ty-other: #a9aec4; --ty-event: #a9aec4;
  --fav: #ff7aa2; --on-fav: #11121c;
}

/* ---------- palettes ----------
   The colours a visitor can choose (theme.js: the theme button's sheet),
   each dark and light; with none chosen (no data-palette) the house one,
   "Софийска нощ", above: indigo night and the yellow marker. The others
   are noviknigi.bg's:
     penguin    — "Пингвин": graphite and the orange of the old paperbacks
     dracula    — the Dracula colour theme (light: its "Alucard")
     mono       — black, white and greys only
     mono-green — one green, as on an old phosphor screen
     crt        — an old monitor's amber (light: the beige case)
   The one-colour ones also take the posters' tints away; CRT draws a
   screen's scanlines over the pictures and the page (below). */
:root[data-palette="penguin"][data-theme="dark"] {
  --paper: #151719; --surface: #1e2124; --rule: #33373c; --ink: #f2efe9; --ink-2: #aeb0b3;
  --indigo: #ffc58a; --on-indigo: #151719; --marker: #ff8a1f; --marker-ink: #1a1005;
  --fav: #ff7aa2; --on-fav: #151719; --danger: #ff8a80; --tab-mark: var(--marker); color-scheme: dark;
}
:root[data-palette="penguin"][data-theme="light"] {
  --paper: #f6f5f2; --surface: #ffffff; --rule: #dcdad5; --ink: #1d1f22; --ink-2: #55585d;
  --indigo: #b55200; --on-indigo: #ffffff; --marker: #ff8a1f; --marker-ink: #1a1005;
  --fav: #c92a5f; --on-fav: #ffffff; --danger: #b42318; --tab-mark: var(--indigo); color-scheme: light;
}
:root[data-palette="dracula"][data-theme="dark"] {
  --paper: #282a36; --surface: #303241; --rule: #44475a; --ink: #f8f8f2; --ink-2: #a9afd2;
  --indigo: #8be9fd; --on-indigo: #282a36; --marker: #ff79c6; --marker-ink: #282a36;
  --fav: #ff5555; --on-fav: #282a36; --danger: #ff5555; --tab-mark: var(--marker); color-scheme: dark;
  --ty-theatre: #ffb86c; --ty-film: #8be9fd; --ty-concert: #ff79c6; --ty-classical: #bd93f9; --ty-opera: #ff7a7a; --ty-ballet: #50fa7b; --ty-musical: #f1fa8c; --ty-performance: #ff92d0; --ty-standup: #50fa7b; --ty-exhibition: #8be9fd; --ty-dance: #d6acff; --ty-magic: #bd93f9; --ty-literature: #ff79c6; --ty-talk: #8be9fd; --ty-workshop: #f1fa8c; --ty-games: #ff92d0; --ty-fair: #ffb86c; --ty-sport: #50fa7b; --ty-other: #a9afd2; --ty-event: #a9afd2;
}
:root[data-palette="dracula"][data-theme="light"] {
  --paper: #fffbeb; --surface: #ffffff; --rule: #cfcfde; --ink: #1f1f1f; --ink-2: #6c664b;
  --indigo: #644ac9; --on-indigo: #ffffff; --marker: #a3144d; --marker-ink: #ffffff;
  --fav: #cb3a2a; --on-fav: #ffffff; --danger: #cb3a2a; --tab-mark: var(--indigo); color-scheme: light;
}
:root[data-palette="mono"][data-theme="dark"] {
  --paper: #0a0a0a; --surface: #161616; --rule: #2e2e2e; --ink: #f5f5f5; --ink-2: #a3a3a3;
  --indigo: #ffffff; --on-indigo: #0a0a0a; --marker: #ffffff; --marker-ink: #0a0a0a;
  --fav: #ffffff; --on-fav: #0a0a0a; --danger: #ffffff; --tab-mark: var(--marker); color-scheme: dark;
  --ty-theatre: #d4d4d4; --ty-film: #d4d4d4; --ty-concert: #d4d4d4; --ty-classical: #d4d4d4; --ty-opera: #d4d4d4; --ty-ballet: #d4d4d4; --ty-musical: #d4d4d4; --ty-performance: #d4d4d4; --ty-standup: #d4d4d4; --ty-exhibition: #d4d4d4; --ty-dance: #d4d4d4; --ty-magic: #d4d4d4; --ty-literature: #d4d4d4; --ty-talk: #d4d4d4; --ty-workshop: #d4d4d4; --ty-games: #d4d4d4; --ty-fair: #d4d4d4; --ty-sport: #d4d4d4; --ty-other: #d4d4d4; --ty-event: #d4d4d4;
}
:root[data-palette="mono"][data-theme="light"] {
  --paper: #ffffff; --surface: #f4f4f4; --rule: #d4d4d4; --ink: #0a0a0a; --ink-2: #5c5c5c;
  --indigo: #0a0a0a; --on-indigo: #ffffff; --marker: #0a0a0a; --marker-ink: #ffffff;
  --fav: #0a0a0a; --on-fav: #ffffff; --danger: #0a0a0a; --tab-mark: var(--indigo); color-scheme: light;
  --ty-theatre: #3a3a3a; --ty-film: #3a3a3a; --ty-concert: #3a3a3a; --ty-classical: #3a3a3a; --ty-opera: #3a3a3a; --ty-ballet: #3a3a3a; --ty-musical: #3a3a3a; --ty-performance: #3a3a3a; --ty-standup: #3a3a3a; --ty-exhibition: #3a3a3a; --ty-dance: #3a3a3a; --ty-magic: #3a3a3a; --ty-literature: #3a3a3a; --ty-talk: #3a3a3a; --ty-workshop: #3a3a3a; --ty-games: #3a3a3a; --ty-fair: #3a3a3a; --ty-sport: #3a3a3a; --ty-other: #3a3a3a; --ty-event: #3a3a3a;
}
:root[data-palette="mono-green"][data-theme="dark"] {
  --paper: #07110a; --surface: #0d1a10; --rule: #1d3523; --ink: #c9f7d3; --ink-2: #6fb685;
  --indigo: #9cffb8; --on-indigo: #04140a; --marker: #4cff86; --marker-ink: #04140a;
  --fav: #4cff86; --on-fav: #04140a; --danger: #4cff86; --tab-mark: var(--marker); color-scheme: dark;
  --ty-theatre: #4cff86; --ty-film: #4cff86; --ty-concert: #4cff86; --ty-classical: #4cff86; --ty-opera: #4cff86; --ty-ballet: #4cff86; --ty-musical: #4cff86; --ty-performance: #4cff86; --ty-standup: #4cff86; --ty-exhibition: #4cff86; --ty-dance: #4cff86; --ty-magic: #4cff86; --ty-literature: #4cff86; --ty-talk: #4cff86; --ty-workshop: #4cff86; --ty-games: #4cff86; --ty-fair: #4cff86; --ty-sport: #4cff86; --ty-other: #4cff86; --ty-event: #4cff86;
}
:root[data-palette="mono-green"][data-theme="light"] {
  --paper: #eefaf0; --surface: #ffffff; --rule: #bfe0c7; --ink: #0b3d1c; --ink-2: #3f6e4d;
  --indigo: #0b5c27; --on-indigo: #ffffff; --marker: #0f7a34; --marker-ink: #ffffff;
  --fav: #0f7a34; --on-fav: #ffffff; --danger: #0f7a34; --tab-mark: var(--indigo); color-scheme: light;
  --ty-theatre: #0f7a34; --ty-film: #0f7a34; --ty-concert: #0f7a34; --ty-classical: #0f7a34; --ty-opera: #0f7a34; --ty-ballet: #0f7a34; --ty-musical: #0f7a34; --ty-performance: #0f7a34; --ty-standup: #0f7a34; --ty-exhibition: #0f7a34; --ty-dance: #0f7a34; --ty-magic: #0f7a34; --ty-literature: #0f7a34; --ty-talk: #0f7a34; --ty-workshop: #0f7a34; --ty-games: #0f7a34; --ty-fair: #0f7a34; --ty-sport: #0f7a34; --ty-other: #0f7a34; --ty-event: #0f7a34;
}
:root[data-palette="crt"][data-theme="dark"] {
  --scan: rgb(0 0 0 / 0.38); --scan-page: rgb(0 0 0 / 0.16);
  --paper: #0c0a08; --surface: #16120d; --rule: #2c241a; --ink: #ffe7c2; --ink-2: #b8976a;
  --indigo: #ffcc55; --on-indigo: #140c00; --marker: #ffb000; --marker-ink: #140c00;
  --fav: #ff6a3d; --on-fav: #140c00; --danger: #ff6a3d; --tab-mark: var(--marker); color-scheme: dark;
  --ty-theatre: #ffb000; --ty-film: #ffb000; --ty-concert: #ffb000; --ty-classical: #ffb000; --ty-opera: #ffb000; --ty-ballet: #ffb000; --ty-musical: #ffb000; --ty-performance: #ffb000; --ty-standup: #ffb000; --ty-exhibition: #ffb000; --ty-dance: #ffb000; --ty-magic: #ffb000; --ty-literature: #ffb000; --ty-talk: #ffb000; --ty-workshop: #ffb000; --ty-games: #ffb000; --ty-fair: #ffb000; --ty-sport: #ffb000; --ty-other: #ffb000; --ty-event: #ffb000;
}
:root[data-palette="crt"][data-theme="light"] {
  --scan: rgb(0 0 0 / 0.22); --scan-page: rgb(60 40 10 / 0.06);
  --paper: #ece4d4; --surface: #f7f2e7; --rule: #cfc3a9; --ink: #2b2116; --ink-2: #6e5c43;
  --indigo: #8a3d00; --on-indigo: #fff8ec; --marker: #a35200; --marker-ink: #fff8ec;
  --fav: #c2410c; --on-fav: #fff8ec; --danger: #a3350a; --tab-mark: var(--indigo); color-scheme: light;
  --ty-theatre: #9a4f00; --ty-film: #9a4f00; --ty-concert: #9a4f00; --ty-classical: #9a4f00; --ty-opera: #9a4f00; --ty-ballet: #9a4f00; --ty-musical: #9a4f00; --ty-performance: #9a4f00; --ty-standup: #9a4f00; --ty-exhibition: #9a4f00; --ty-dance: #9a4f00; --ty-magic: #9a4f00; --ty-literature: #9a4f00; --ty-talk: #9a4f00; --ty-workshop: #9a4f00; --ty-games: #9a4f00; --ty-fair: #9a4f00; --ty-sport: #9a4f00; --ty-other: #9a4f00; --ty-event: #9a4f00;
}
/* The menu's groups in the palette's own two colours. */
:root[data-palette][data-theme] :is(.nav-g-prog, .nav-g-gal, .nav-g-cine) { --g: var(--indigo); --g-mark: var(--tab-mark); }
/* One-colour palettes: the posters' tints (palette/*.css, .t-*) give way
   to the palette's; the pictures keep theirs (as on noviknigi.bg). */
:root[data-palette="mono"][data-theme] :is([class^="p-"], [class*=" p-"], .t-0, .t-1, .t-2, .t-3, .t-4, .t-5, .t-6, .t-7, .t-g),
:root[data-palette="mono-green"][data-theme] :is([class^="p-"], [class*=" p-"], .t-0, .t-1, .t-2, .t-3, .t-4, .t-5, .t-6, .t-7, .t-g),
:root[data-palette="crt"][data-theme] :is([class^="p-"], [class*=" p-"], .t-0, .t-1, .t-2, .t-3, .t-4, .t-5, .t-6, .t-7, .t-g) {
  --p-bg: var(--surface); --p-fg: var(--ink); --p-muted: var(--ink-2); --p-accent: var(--indigo);
  --p-ph: var(--rule); --p-halo: var(--surface); --p-glow: var(--marker);
}

/* CRT: the dark rows of a cathode-ray screen over every picture, fainter
   over the whole page, and glowing phosphor type (as on noviknigi.bg). */
:root[data-palette="crt"] :is(.film-poster, .ev-thumb) { position: relative; }
:root[data-palette="crt"] :is(.tile-img, .film-poster, .hero-poster .zoom, .ev-thumb, dialog.lightbox)::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
  background:
    repeating-linear-gradient(0deg, var(--scan) 0 1px, transparent 1px 3px),
    radial-gradient(120% 90% at 50% 50%, transparent 60%, rgb(0 0 0 / 0.35));
}
:root[data-palette="crt"] main img { filter: saturate(1.25) contrast(1.08); }
:root[data-palette="crt"] body::after {
  content: ""; position: fixed; inset: 0; z-index: 2147483000; pointer-events: none;
  background: repeating-linear-gradient(0deg, var(--scan-page) 0 1px, transparent 1px 3px);
}
:root[data-palette="crt"][data-theme="dark"] :is(h1, h2) {
  text-shadow: 0 0 6px rgb(255 176 0 / 0.45), 1px 0 0 rgb(255 60 60 / 0.25), -1px 0 0 rgb(60 200 255 / 0.2);
}

/* Fallback tints for events without a picture: the venue's brand hue,
 * reduced to a calm, contrast-safe scheme. */
.t-0 { --h: 0; }   .t-1 { --h: 40; }  .t-2 { --h: 85; }  .t-3 { --h: 140; }
.t-4 { --h: 185; } .t-5 { --h: 220; } .t-6 { --h: 265; } .t-7 { --h: 320; }
.t-g { --h: 230; --sat: 0.15; }
:is(.t-0, .t-1, .t-2, .t-3, .t-4, .t-5, .t-6, .t-7, .t-g) {
  --p-bg: hsl(var(--h) calc(45% * var(--sat, 1)) 91%);
  --p-fg: hsl(var(--h) calc(40% * var(--sat, 1)) 13%);
  --p-muted: hsl(var(--h) calc(22% * var(--sat, 1)) 32%);
  --p-accent: hsl(var(--h) calc(65% * var(--sat, 1)) 32%);
  --p-ph: hsl(var(--h) calc(35% * var(--sat, 1)) 84%);
}
:root[data-theme="dark"] :is(.t-0, .t-1, .t-2, .t-3, .t-4, .t-5, .t-6, .t-7, .t-g) {
  --p-bg: hsl(var(--h) calc(30% * var(--sat, 1)) 16%);
  --p-fg: hsl(var(--h) calc(25% * var(--sat, 1)) 93%);
  --p-muted: hsl(var(--h) calc(15% * var(--sat, 1)) 72%);
  --p-accent: hsl(var(--h) calc(75% * var(--sat, 1)) 76%);
  --p-ph: hsl(var(--h) calc(25% * var(--sat, 1)) 24%);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.5 var(--text);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--indigo); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3 { margin: 0; font-weight: 800; }
p { margin: 0 0 0.8em; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--indigo); outline-offset: 2px; border-radius: 4px; }
main:focus { outline: none; }

.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.vh {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.js .js-hide { display: none; }
[hidden] { display: none !important; }

.skip {
  position: absolute; left: -9999px; top: 12px; z-index: 100;
  background: var(--marker); color: var(--marker-ink); padding: 10px 16px; border-radius: var(--r-btn);
  font-weight: 700;
}
.skip:focus { left: 12px; }

/* ---------- buttons, chips, tags ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 16px;
  border: 1.5px solid var(--rule); border-radius: var(--r-btn);
  background: var(--surface); color: var(--ink);
  font-weight: 650; font-size: 16px; line-height: 1.1; text-decoration: none;
  cursor: pointer;
}
.btn:hover { border-color: var(--ink-2); text-decoration: none; }
.btn-primary { background: var(--indigo); border-color: var(--indigo); color: var(--on-indigo); }
.btn-primary:hover { border-color: var(--indigo); filter: brightness(1.08); }
.btn-small { min-height: 36px; padding: 0 12px; font-size: 14px; }
.btn-wide { width: 100%; }
.linklike {
  background: none; border: 0; padding: 0; color: var(--indigo); cursor: pointer;
  text-decoration: underline; text-underline-offset: 0.18em; font-size: inherit;
}

/* Inline chip rows scroll sideways with snap and a fade at the edge. */
.chips {
  display: flex; gap: 8px; margin: 0; padding: 2px; padding-right: 32px; list-style: none;
  overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  display: inline-flex; align-items: center; height: 38px; padding: 0 15px; white-space: nowrap;
  border: 1px solid var(--rule); border-radius: 999px; background: var(--surface);
  color: var(--ink); font-weight: 650; font-size: 15px; text-decoration: none;
}
.chip:hover { border-color: var(--ink-2); text-decoration: none; }
.chip[aria-current] { background: var(--marker); border-color: var(--marker); color: var(--marker-ink); }

.tag {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  font-size: 12.5px; font-weight: 750; line-height: 1.6; white-space: nowrap;
}
.tag-prem { background: var(--marker); color: var(--marker-ink); }
.tag-sold { background: var(--ink); color: var(--paper); }
.tag-cancel { background: var(--danger); color: var(--paper); }

/* ---------- masthead ---------- */
.masthead { border-bottom: 1px solid var(--rule); background: var(--paper); }
.masthead-in {
  max-width: var(--max); margin-inline: auto; padding: 10px var(--gutter);
  display: flex; align-items: center; gap: 8px 20px; flex-wrap: wrap;
}
.brand { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; }
.brand-mark { width: 34px; height: 34px; flex: none; }
.brand-mark .col-dome, .brand-mark .col-base { fill: var(--ink); }
.brand-mark .col-body { fill: var(--marker); }
.brand-mark .col-bills { fill: var(--ink); opacity: 0.85; }
.brand-name { font: 900 28px/1 var(--display); letter-spacing: 0.002em; white-space: nowrap; }
.nav {
  order: 3; flex: 1 0 100%; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
  margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
}
.nav::-webkit-scrollbar { display: none; }
.nav a {
  padding: 8px 10px; border-radius: 8px; white-space: nowrap;
  color: var(--ink-2); font-weight: 650; text-decoration: none;
}
.nav a:hover { color: var(--ink); background: var(--surface); }
.nav a[aria-current] { color: var(--ink); box-shadow: inset 0 -3px 0 var(--g-mark, var(--marker)); border-radius: 0; }
/* The menu's three groups, tinted alike; the group you are in is
   stronger. */
.nav-g {
  flex: none; display: inline-flex; gap: 2px; padding: 2px; border-radius: 11px;
  background: color-mix(in srgb, var(--g) 9%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--g) 16%, transparent);
}
.nav-g + .nav-g { margin-left: 6px; }
.nav-g.is-here { background: color-mix(in srgb, var(--g) 18%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--g) 34%, transparent); }
.nav-g a:hover { background: color-mix(in srgb, var(--g) 16%, transparent); }
/* The menu's groups (Програма, Изложби, Големите кина) in one colour. */
.nav-g-prog, .nav-g-gal, .nav-g-cine { --g: #8b8fff; --g-mark: #ffd447; }
:root[data-theme="light"] :is(.nav-g-prog, .nav-g-gal, .nav-g-cine) { --g: #3b3fc4; --g-mark: #8a6000; }
/* Цветове: an icon button like Любими (its name for screen readers). */
.theme-toggle {
  flex: none; margin-left: 0; display: inline-grid; place-items: center; width: 38px; height: 38px; padding: 0;
  border: 1px solid var(--rule); border-radius: 999px; background: var(--surface); color: var(--ink-2); cursor: pointer;
}
.theme-toggle:hover { color: var(--ink); border-color: var(--ink-2); }
.theme-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.theme-toggle svg circle { fill: currentColor; stroke: none; }

@media (min-width: 900px) {
  :root { --gutter: 24px; }
  .masthead-in { flex-wrap: nowrap; gap: 8px 12px; padding-block: 14px; }
  /* Centred with auto margins, not justify-content: those shrink to 0 when
     the links don't fit, so the first link can never be pushed off-screen. */
  .nav { order: 0; flex: 1 1 auto; gap: 0; min-width: 0; margin: 0; padding: 0; overflow: hidden; }
  .nav > :first-child { margin-left: auto; }
  .nav > :last-child { margin-right: auto; }
}
/* Not enough room for the whole menu (measured by navfit.js): categories
   move to a centred second row under the logo — scales with any number of
   categories, nothing is ever cut off. */
@media (min-width: 900px) {
  .masthead.nav-wrap .masthead-in { flex-wrap: wrap; row-gap: 6px; padding-bottom: 6px; }
  .masthead.nav-wrap .nav { order: 3; flex: 1 0 100%; }
  .masthead.nav-wrap .fav-link { margin-left: auto; }
}
/* Ten menu items (with "Спорт"): free space progressively on
   narrower desktops so the menu never overflows. */
@media (min-width: 900px) and (max-width: 1279px) {
  .brand-city { display: none; }
}
@media (min-width: 900px) {
  .nav a { padding-inline: 6px; font-size: 15px; }
  .nav-sep { margin-inline: 4px; }
}
@media (min-width: 900px) and (max-width: 1023px) {
  .nav a { padding-inline: 5px; font-size: 14px; }
}

/* ---------- tonight shelf (home hero) ---------- */
.tonight { padding: 28px 0 8px; }

/* ---------- page heads ---------- */
.page-head { padding: 30px 0 4px; }
.page-head h1, .notfound h1 { font: 900 clamp(52px, 8vw, 88px)/0.86 var(--display); letter-spacing: -0.01em; }
.lead { max-width: 62ch; margin-top: 14px; font-size: 18px; color: var(--ink-2); }

.venue { background: var(--p-bg); color: var(--p-fg); padding: 30px 0 26px; }
.venue-kind { margin: 0 0 6px; font-weight: 700; color: var(--p-muted); }
.venue-name { font: 900 clamp(46px, 9vw, 96px)/0.88 var(--display); letter-spacing: -0.01em; margin-bottom: 12px; }
.venue-addr { font-size: 18px; margin-bottom: 4px; }
.venue-meta { color: var(--p-muted); }
.venue-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.venue .btn { background: transparent; color: var(--p-fg); border-color: color-mix(in srgb, var(--p-fg) 30%, transparent); }
/* The venue's photo: on top on phones, beside the name on wide screens. */
.venue-photo { margin: 0 0 18px; }
.venue-photo img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 14px; background: color-mix(in srgb, var(--p-fg) 8%, transparent); }
.venue-photo figcaption { margin-top: 6px; font-size: 12.5px; color: var(--p-muted); }
.venue-photo figcaption a { color: inherit; }
@media (min-width: 900px) {
  .venue-has-photo .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 32px; align-items: center; }
  .venue-has-photo .venue-photo { order: 2; margin: 0; }
  .venue-has-photo .venue-name { font-size: clamp(46px, 6vw, 84px); }
}

/* ---------- filters ---------- */
/* The subscribe box follows the events on every screen (.subbar order). */
.agenda { display: flex; flex-direction: column; padding-bottom: 48px; }
.filters { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 18px 0 6px; }
.f-search { display: flex; gap: 8px; min-width: 0; }
.f-search input {
  flex: 1; width: 0; min-width: 0; height: 48px; padding: 0 14px;
  border: 1.5px solid var(--rule); border-radius: 12px; background: var(--surface);
  font-size: 17px;
}
.f-search input:focus-visible { outline-offset: 0; border-color: var(--indigo); }
.f-search .btn { min-height: 48px; }
.f-row { display: flex; flex: 1 1 auto; align-items: center; gap: 8px; min-width: 0; }
.f-row .chips { flex: 1 1 auto; min-width: 0; }
.f-date input {
  height: 40px; padding: 0 10px; border: 1px solid var(--rule); border-radius: 999px;
  background: var(--surface); font-size: 16px; font-weight: 600; color-scheme: inherit;
}
.summary { margin: 14px 0 0; color: var(--ink-2); font-size: 15px; }

/* ---------- day groups ---------- */
.day { border-top: 1px solid var(--rule); margin-top: 12px; }
.day-head {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: baseline; gap: 10px;
  padding: 12px 0 8px; background: var(--paper);
}
.day-rel { font: 850 32px/1 var(--display); }
.day .day-rel {
  --hl: linear-gradient(transparent 58%, var(--marker) 58%, var(--marker) 92%, transparent 92%);
  background: var(--hl); padding: 0 2px;
}
/* On dark paper light text over yellow loses contrast: the marker
 * becomes a thick underline below the glyphs instead. */
:root[data-theme="dark"] .day .day-rel { --hl: linear-gradient(transparent 88%, var(--marker) 88%); }
.day-date { font-size: 17px; font-weight: 600; color: var(--ink-2); }
.day-count { margin-left: auto; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.day-list { list-style: none; margin: 0; padding: 0; }

@media (min-width: 900px) {
  .day { display: grid; grid-template-columns: 190px 1fr; gap: 28px; padding-top: 6px; }
  .day-head {
    top: 12px; align-self: start; flex-direction: column; align-items: flex-start; gap: 2px;
    background: none; padding-top: 14px;
  }
  .day-rel { font-size: 44px; }
  .day-count { margin: 6px 0 0; }
}

/* ---------- event rows ---------- */
.ev-link {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 8px; margin-inline: -8px; border-radius: 12px;
  color: inherit; text-decoration: none;
}
.ev + .ev .ev-link { box-shadow: 0 -1px 0 var(--rule); border-top-left-radius: 0; border-top-right-radius: 0; }
.ev-link:hover { background: color-mix(in srgb, var(--p-bg) 60%, transparent); text-decoration: none; }
.ev-link:hover .ev-title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.12em; }
.ev-time {
  flex: none; width: 66px; height: 62px; display: grid; place-items: center;
  border-radius: var(--r-thumb); background: var(--p-bg); color: var(--p-fg);
  font: 850 25px/1 var(--display); font-variant-numeric: tabular-nums;
}
.ev-thumb { flex: none; width: 62px; height: 62px; border-radius: var(--r-thumb); overflow: hidden; background: var(--p-ph, var(--p-bg)); }
.ev-thumb:empty { display: none; }
.ev-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ev-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ev-title { font: 750 22px/1.08 var(--display); overflow-wrap: anywhere; }
.ev-place { font-size: 15px; color: var(--ink-2); line-height: 1.3; }
.ev-hall { color: var(--ink-2); }
.ev-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 3px; }
.ev-info { font-size: 13.5px; color: var(--ink-2); line-height: 1.35; }
.is-past .ev-link { opacity: 0.5; }
.is-cancelled .ev-title { text-decoration: line-through; text-decoration-thickness: 2px; }
@media (min-width: 640px) {
  .ev-time { width: 76px; height: 70px; font-size: 28px; }
  .ev-thumb { width: 70px; height: 70px; }
  .ev-title { font-size: 25px; }
}

.nomatch, .empty { margin: 28px 0; padding: 22px; border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--rule); }
.empty p:first-child { font-size: 19px; font-weight: 650; }
.empty-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.more { margin: 26px 0 0; }

.subscribe {
  margin-top: 44px; padding: 22px; border-radius: var(--r-card);
  background: var(--surface); border: 1px solid var(--rule);
}
.subscribe-h { font: 850 30px/1 var(--display); margin-bottom: 8px; }
.subscribe-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }

/* ---------- event page ---------- */
.event { --hero-pad: 28px; }
.hero { background: var(--p-bg); color: var(--p-fg); padding: var(--hero-pad) 0 36px; }
.hero a { color: var(--p-fg); }
.hero-wide { padding-top: 0; }
.hero-banner { position: relative; margin: 0 0 4px; max-height: min(52vh, 520px); overflow: hidden; background: var(--p-ph); }
.hero-banner img { width: 100%; height: 100%; max-height: min(52vh, 520px); object-fit: cover; }
.hero-banner::after {
  content: ""; position: absolute; inset: 40% 0 0;
  background: linear-gradient(to bottom, transparent, var(--p-bg));
}
.hero-in { display: grid; gap: 24px; }
.hero-poster { margin: 0; width: min(70vw, 300px); }
.hero-poster img {
  width: 100%; border-radius: 14px; background: var(--p-ph);
  box-shadow: 0 30px 60px -28px color-mix(in srgb, var(--p-fg) 70%, transparent);
}
.crumb { font-size: 15px; font-weight: 650; color: var(--p-muted); margin-bottom: 10px; }
.crumb a { color: var(--p-muted); }
.hero-title {
  font: 900 clamp(46px, 9vw, 100px)/0.9 var(--display); letter-spacing: -0.008em;
  text-wrap: balance; overflow-wrap: anywhere; margin-bottom: 14px;
}
.is-cancelled .hero-title { text-decoration: line-through; text-decoration-thickness: 4px; }
.hero-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.hero-orig { font: italic 600 20px/1.25 var(--text); color: var(--p-muted); margin: -4px 0 8px; overflow-wrap: anywhere; }
.film-facts { font-size: 16px; font-weight: 650; line-height: 1.45; color: var(--p-fg); margin: 0 0 14px; }
.film-facts span[aria-hidden] { color: var(--p-muted); }

/* Trailer: a YouTube still with a play button; the player (youtube-nocookie)
   is inserted only on click (app.js). */
.trailer { margin: 0 0 30px; max-width: 64ch; }
.yt, .yt-frame {
  position: relative; display: block; aspect-ratio: 16 / 9; width: 100%;
  border-radius: var(--r-card); overflow: hidden; background: #000; color: #fff;
}
.yt img { width: 100%; height: 100%; object-fit: cover; opacity: 0.92; transition: opacity 0.2s; }
.yt:hover img, .yt:focus-visible img { opacity: 1; }
.yt-play { position: absolute; inset: 0; display: grid; place-items: center; }
.yt-play svg { width: 68px; height: 48px; }
.yt-bg { fill: #212121; fill-opacity: 0.85; transition: fill 0.2s, fill-opacity 0.2s; }
.yt:hover .yt-bg, .yt:focus-visible .yt-bg { fill: #f00; fill-opacity: 1; }
.yt-tri { fill: #fff; }
.yt-label {
  position: absolute; left: 12px; bottom: 10px; padding: 3px 10px; border-radius: 999px;
  background: rgba(0, 0, 0, 0.7); font-size: 14px; font-weight: 700;
}
.yt-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt-note { font-size: 13px; color: var(--ink-2); margin: 6px 0 0; }
.facts { display: grid; gap: 12px 28px; margin: 18px 0 0; }
.facts div { min-width: 0; }
.facts dt { font-size: 14px; font-weight: 750; color: var(--p-muted); }
.facts dd { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.35; }
.fact-when dd { font: 800 26px/1.15 var(--display); }
.fact-sub { display: block; font: 500 15px/1.4 var(--text); color: var(--p-muted); margin-top: 2px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
/* data-nosnippet needs a div; this one keeps everything but „Купи билет“ out of Google's snippet without changing the row */
.actions-rest { display: contents; }
.btn-accent { background: var(--p-accent); color: var(--p-bg); border-color: var(--p-accent); font-size: 17px; }
.btn-accent:hover { border-color: var(--p-accent); filter: brightness(1.07); }
.btn-ghost { background: transparent; color: var(--p-fg); border-color: color-mix(in srgb, var(--p-fg) 32%, transparent); }
.btn-ghost:hover { border-color: var(--p-fg); }
@media (min-width: 900px) {
  .event { --hero-pad: 44px; }
  .hero-in { grid-template-columns: 300px 1fr; gap: 48px; align-items: start; }
  .hero-wide .hero-in, .hero-in:not(:has(.hero-poster)) { grid-template-columns: 1fr; }
  /* The text block overlaps the banner's lower part: let clicks there
     reach the picture (zoom) except on the block's own links/buttons. */
  .hero-wide .hero-in { margin-top: -90px; position: relative; pointer-events: none; }
  .hero-wide .hero-in :is(a, button, summary, input, select, label, details, [tabindex]) { pointer-events: auto; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fact-when { grid-column: 1 / -1; }
}

.event-body { display: grid; gap: 36px; padding-top: 34px; padding-bottom: 56px; }
@media (min-width: 900px) { .event-body { grid-template-columns: minmax(0, 1fr) 340px; gap: 56px; } }
/* Comfortable reading length however wide the page is. */
.event-body > :first-child { max-width: 72ch; }
.prose p { max-width: 64ch; font-size: 18px; line-height: 1.62; }
.prose p:first-child { font-size: 20px; line-height: 1.55; }
.prose-empty { color: var(--ink-2); }
.credits { margin-top: 30px; }
.credits h2, .others h2, .work-link h2, .feeds-h { font: 850 30px/1 var(--display); margin-bottom: 12px; }
.credits dl { margin: 0; display: grid; gap: 10px; max-width: 64ch; }
.credits dt { font-size: 14px; font-weight: 750; color: var(--ink-2); }
.credits dd { margin: 0; }
.others ol { list-style: none; margin: 0 0 28px; padding: 0; }
.others a {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px;
  padding: 10px 2px; border-bottom: 1px solid var(--rule); color: var(--ink); text-decoration: none;
}
.others a:hover .o-day { text-decoration: underline; }
.o-day { font-weight: 650; }
.o-time { font: 850 22px/1 var(--display); font-variant-numeric: tabular-nums; }
.o-hall { flex-basis: 100%; font-size: 14px; color: var(--ink-2); }
.others .is-cancelled time { text-decoration: line-through; }
.place { padding: 18px; border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--rule); margin-bottom: 16px; }
.place h2 { font: 850 26px/1.05 var(--display); margin-bottom: 8px; }
.place-links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 0; font-weight: 650; }
.source-note { font-size: 14px; color: var(--ink-2); }

/* ---------- feeds ---------- */
.feeds-page { padding-bottom: 56px; }
.feeds-page section { margin-top: 36px; }
.howto { display: grid; gap: 14px; }
.howto > div { padding: 18px; border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--rule); }
.howto h2 { font: 850 24px/1.05 var(--display); margin-bottom: 6px; }
.howto p { margin: 0; color: var(--ink-2); font-size: 15.5px; }
@media (min-width: 640px) { .howto { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .howto { grid-template-columns: repeat(4, 1fr); } }
.feed-list { list-style: none; margin: 0; padding: 0; }
.feed {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
  padding: 14px 0; border-bottom: 1px solid var(--rule); scroll-margin-top: 16px;
}
.feed-sub { padding-left: 22px; }
.feed-sub .feed-name strong { font-size: 19px; }
.feed:target { background: color-mix(in srgb, var(--marker) 30%, transparent); }
.feed-name strong { display: block; font: 800 23px/1.1 var(--display); }
.feed-name span { font-size: 14px; color: var(--ink-2); }
.feed-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.data-note p { max-width: 70ch; }

/* ---------- status ---------- */
.table-scroll { overflow-x: auto; margin-top: 24px; }
.status { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.status th, .status td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.status thead th { font-size: 13.5px; color: var(--ink-2); }
.status .num { font-variant-numeric: tabular-nums; }
.badge-st { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 13px; font-weight: 750; }
.st-ok { background: #dcf3e3; color: #14532d; }
.st-err { background: #fde2df; color: #8a1c12; }
.st-stale { background: #fff1c2; color: #6b4a00; }
.st-msg { display: block; margin-top: 4px; font-size: 13.5px; color: var(--ink-2); overflow-wrap: anywhere; }

/* ---------- 404, footer, consent ---------- */
.notfound { padding: 48px var(--gutter) 80px; }
.notfound p { font-size: 19px; color: var(--ink-2); max-width: 50ch; margin-top: 16px; }

.foot { border-top: 1px solid var(--rule); background: var(--surface); }
.foot-in { max-width: var(--max); margin-inline: auto; padding: 28px var(--gutter) 40px; font-size: 15px; color: var(--ink-2); }

.consent {
  position: fixed; z-index: 50; left: 12px; right: 12px; bottom: 12px; max-width: 560px;
  padding: 16px 18px; border-radius: 14px; background: var(--ink); color: var(--paper);
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.5);
}
.consent p { font-size: 15px; }
.consent-short { display: none; }
@media (max-width: 899px) { .consent-short { display: inline; } }
.consent-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.consent .btn:not(.btn-primary) { background: transparent; color: var(--paper); border-color: color-mix(in srgb, var(--paper) 40%, transparent); }
.consent .btn-primary { background: var(--marker); border-color: var(--marker); color: var(--marker-ink); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  .masthead, .filters, .subscribe, .foot, .actions, .consent { display: none; }
  .hero { background: none; color: #000; }
}

/* ---------- subscriptions (first-class) ---------- */
/* The icon sprite (layout.html): defines symbols, takes no space. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.icon-plus { stroke-width: 2.2; }

.subbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px;
  margin-top: 22px; padding: 14px 16px; border-radius: var(--r-card);
  background: color-mix(in srgb, var(--indigo) 9%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--indigo) 28%, transparent);
}
.subbar-text { display: flex; align-items: flex-start; gap: 10px; min-width: 0; flex: 1 1 320px; }
.subbar-text .icon { width: 26px; height: 26px; color: var(--indigo); margin-top: 1px; }
.subbar-text p { margin: 0; line-height: 1.35; }
.subbar-text strong { font: 800 22px/1.1 var(--display); }
.subbar-text span { display: block; font-size: 14.5px; color: var(--ink-2); margin-top: 3px; }
.subbar-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.subbar-actions .btn { min-height: 40px; font-size: 15px; padding: 0 13px; }

.actions .icon { width: 18px; height: 18px; }
.hero-sub { margin: 14px 0 0; font-size: 15px; font-weight: 650; }
.hero-sub a { color: var(--p-muted); }

/* Status badges on dark paper (dark is the default theme). */
:root[data-theme="dark"] .st-ok { background: #123a24; color: #b6f0c8; }
:root[data-theme="dark"] .st-err { background: #4a1712; color: #ffc9c2; }
:root[data-theme="dark"] .st-stale { background: #3d3108; color: #ffe8a3; }

/* ---------- filter panel: inline on desktop and without JS ---------- */
.f-panel {
  display: grid; gap: 10px; position: static; inset: auto; margin: 0; padding: 0;
  width: auto; max-width: none; max-height: none; border: 0; background: none; color: inherit; overflow: visible;
}
.f-panel .sheet-head, .f-panel .sheet-foot { display: none; }
.f-group { display: flex; align-items: center; gap: 10px; min-width: 0; }
.f-group > .chips { flex: 1 1 auto; }
.f-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.f-date-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.f-venue {
  flex: 1 1 260px; min-width: 0; max-width: 420px; height: 40px; padding: 0 28px 0 12px;
  border: 1px solid var(--rule); border-radius: 999px; background: var(--surface); font-size: 16px; font-weight: 600;
}
.f-toggle { display: none; }
.f-count {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  background: var(--marker); color: var(--marker-ink); font-size: 13px; font-weight: 800;
}

.chips li { scroll-snap-align: start; flex: none; }

/* ---------- bottom sheets (<dialog>, mobile) ---------- */
dialog.sheet[open] {
  position: fixed; inset: auto 0 0 0; margin: 0; width: 100%; max-width: 100%;
  max-height: 86dvh; overflow: auto; overscroll-behavior: contain;
  display: block; border: 0; border-radius: 22px 22px 0 0;
  background: var(--surface); color: var(--ink);
  padding: 0 max(16px, env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  animation: sheet-up 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
dialog.sheet::backdrop { background: rgba(5, 6, 14, 0.62); }
@keyframes sheet-up { from { transform: translateY(40px); opacity: 0.4; } }
.sheet[open] .sheet-head {
  position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0 10px; background: var(--surface);
}
.sheet-head h2 { font: 850 30px/1 var(--display); }
.sheet-close {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px;
  border: 1px solid var(--rule); background: var(--paper); cursor: pointer;
}
.sheet[open] .f-group { display: block; padding: 10px 0 14px; border-bottom: 1px solid var(--rule); }
.sheet[open] .f-label {
  position: static; width: auto; height: auto; clip: auto; overflow: visible;
  margin: 0 0 10px; font: 800 20px/1 var(--display); color: var(--ink-2);
}
.sheet[open] .chips { flex-wrap: wrap; overflow: visible; padding: 0; -webkit-mask-image: none; mask-image: none; }
.sheet[open] .f-row { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.sheet[open] .f-date { display: flex; align-items: center; gap: 10px; }
.sheet[open] .f-date-label { position: static; width: auto; height: auto; clip: auto; font-weight: 700; }
.sheet[open] .f-date input { flex: 1; }
.sheet[open] .f-venue { max-width: none; width: 100%; height: 48px; flex: none; }
.sheet[open] .sheet-foot {
  position: sticky; bottom: calc(-16px - env(safe-area-inset-bottom)); display: flex; gap: 8px;
  padding: 14px 0 calc(16px + env(safe-area-inset-bottom)); margin-bottom: calc(-16px - env(safe-area-inset-bottom));
  background: var(--surface);
}
.sheet-foot .btn-primary { flex: 1; min-height: 50px; }
.sheet-foot .btn { min-height: 50px; }

/* Kinds and venues: footer section, and the "Категории" sheet. */
.browse { margin-bottom: 28px; }
.browse-h { font: 850 26px/1 var(--display); color: var(--ink); margin-bottom: 14px; }
.browse-list { display: grid; gap: 18px; }
@media (min-width: 640px) { .browse-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .browse-list { grid-template-columns: repeat(4, 1fr); } }
.browse-kind-link { display: inline-block; font: 850 23px/1.1 var(--display); color: var(--ink); text-decoration: none; padding: 6px 0; }
.browse-kind ul { list-style: none; margin: 0; padding: 0; }
.browse-kind li a { display: block; padding: 6px 0; color: var(--ink-2); font-size: 15.5px; text-decoration: none; }
.browse-kind li a:hover { color: var(--ink); text-decoration: underline; }
.sheet .browse-list { padding-top: 4px; }
.sheet .browse-kind li a { padding: 11px 0; border-bottom: 1px solid var(--rule); font-size: 16px; color: var(--ink); }

/* ---------- tab bar and action bar (mobile) ---------- */
.tabbar, .actionbar { display: none; }

.ev-title, .ev-place {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}

@media (max-width: 899px) {
  :root { --tabbar-h: 64px; }
  body { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }
  .nav { display: none; }
  .masthead-in {
    flex-wrap: nowrap; padding-left: max(var(--gutter), env(safe-area-inset-left));
    padding-right: max(var(--gutter), env(safe-area-inset-right));
  }
  .theme-toggle { margin-left: auto; width: 44px; height: 44px; }

  .tabbar {
    position: fixed; z-index: 40; left: 0; right: 0; bottom: 0;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
    padding: 4px max(6px, env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
    background: color-mix(in srgb, var(--paper) 90%, transparent);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-top: 1px solid var(--rule);
  }
  .tabbar a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: 56px; border-radius: 14px; color: var(--ink-2); text-decoration: none;
    font-size: 12.5px; font-weight: 750; line-height: 1.1; text-align: center;
  }
  .tabbar .icon { width: 24px; height: 24px; }
  .tabbar a[aria-current], .tabbar a.is-here { color: var(--ink); }
  .tabbar a[aria-current] .icon, .tabbar a.is-here .icon { color: var(--tab-mark); }
  .tabbar .tab-sub { background: var(--indigo); color: var(--on-indigo); margin: 2px 0; }
  .tabbar .tab-sub[aria-current] { box-shadow: inset 0 0 0 2px var(--marker); }
  .tabbar .tab-sub .icon, .tabbar .tab-sub[aria-current] .icon { color: var(--on-indigo); }

  /* Filters: one compact sticky row; the rest lives in a bottom sheet. */
  .js .filters {
    position: sticky; top: 0; z-index: 5; margin: 14px calc(var(--gutter) * -1) 0;
    padding: 8px var(--gutter); background: var(--paper); border-bottom: 1px solid var(--rule);
  }
  .js .f-panel:not([open]) { display: none; }
  .f-submit { display: none; }
  .f-toggle { display: inline-flex; min-height: 48px; gap: 6px; padding: 0 14px; }
  .js .day-head { top: 65px; }
  .chip { height: 44px; padding: 0 16px; font-size: 15.5px; }
  .f-date input, .f-venue { height: 44px; }
  .btn-small { min-height: 44px; }

  /* Event page: primary actions in a thumb-reachable bar. */
  .event { padding-bottom: 76px; }
  .actions .act-main { display: none; }
  .actions:not(:has(> :not(.act-main):not([hidden]))) { display: none; }
  .actionbar {
    position: fixed; z-index: 39; left: 0; right: 0;
    bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
    display: flex; gap: 8px;
    padding: 10px max(var(--gutter), env(safe-area-inset-right)) 10px max(var(--gutter), env(safe-area-inset-left));
    background: color-mix(in srgb, var(--p-bg) 94%, transparent);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-top: 1px solid color-mix(in srgb, var(--p-fg) 16%, transparent);
    color: var(--p-fg);
  }
  .actionbar > .btn { flex: 1 1 0; min-height: 50px; padding: 0 12px; }
  .cal-menu { flex: 1 1 0; position: relative; }
  .cal-menu summary { width: 100%; min-height: 50px; list-style: none; cursor: pointer; }
  .cal-menu summary::-webkit-details-marker { display: none; }
  .cal-menu-list {
    position: absolute; right: 0; bottom: calc(100% + 10px); width: max(100%, 260px);
    display: grid; padding: 6px; border-radius: 16px;
    background: var(--surface); color: var(--ink); border: 1px solid var(--rule);
    box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.55);
  }
  .cal-menu-list a {
    display: flex; align-items: center; min-height: 50px; padding: 0 14px; border-radius: 10px;
    color: var(--ink); font-weight: 700; text-decoration: none;
  }
  .cal-menu-list a + a { border-top: 1px solid var(--rule); }
}
/* Wide screens: the filter panel is inline; other sheets never open. */
@media (min-width: 900px) { .sheet:not(.f-panel) { display: none; } }

/* Grid/flex items must be allowed to shrink below an input's intrinsic width. */
.tabbar { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 899px) {
  .brand { min-height: 44px; }
  .subbar-actions .btn { min-height: 44px; }
  .browse-kind-link { padding: 10px 0; }
  .browse-kind li a { padding: 11px 0; }
}

/* ---------- multiplexes: grouped by film ---------- */
.nav-sep { flex: none; align-self: center; width: 1px; height: 20px; margin: 0 6px; background: var(--rule); }

.film-list { list-style: none; margin: 0; padding: 0; }
.film {
  display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px;
  padding: 14px 0; align-items: start;
}
.film + .film { border-top: 1px solid var(--rule); }
.film-poster {
  display: block; aspect-ratio: 2 / 3; border-radius: var(--r-thumb); overflow: hidden;
  background: var(--p-ph, var(--p-bg));
}
.film-poster img { width: 100%; height: 100%; object-fit: cover; }
.film-title { font: 800 25px/1.04 var(--display); overflow-wrap: anywhere; }
.film-title a { color: var(--ink); text-decoration: none; }
.film-title a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.film-meta { margin: 4px 0 0; font-size: 14.5px; color: var(--ink-2); }
.branch { margin-top: 10px; min-width: 0; }
.branch-name { display: inline-block; font-weight: 750; font-size: 15px; color: var(--ink); text-decoration: none; margin-bottom: 4px; }
.branch-name:hover { text-decoration: underline; }
.shows { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 0; padding: 0; }
.show {
  display: inline-flex; align-items: center; flex-wrap: wrap; min-height: 40px; padding: 2px 12px;
  border-radius: 10px; border: 1px solid color-mix(in srgb, var(--p-fg) 14%, transparent);
  background: var(--p-bg); color: var(--p-fg); text-decoration: none; font-size: 13.5px; line-height: 1.2;
}
.show:hover { border-color: var(--p-fg); text-decoration: none; }
.show time { font: 850 21px/1 var(--display); font-variant-numeric: tabular-nums; }
.show-x { color: var(--p-muted); }
.show-x::before { content: "·"; margin: 0 6px; }
.show.is-cancelled time { text-decoration: line-through; }
.show.is-sold { border-style: dashed; opacity: 0.6; }
.screenings .branch { margin: 0 0 14px; }
.feeds-note { max-width: 70ch; color: var(--ink-2); }
.browse-mx { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--rule); }
.browse-note { font-size: 14px; color: var(--ink-2); margin: 0 0 6px; }
.browse-mx ul { columns: 2 220px; }
@media (min-width: 640px) {
  .film { grid-template-columns: 96px minmax(0, 1fr); gap: 18px; }
  .film-title { font-size: 28px; }
}
@media (max-width: 899px) {
  .show { min-height: 44px; }
  .branch-name { display: flex; align-items: center; min-height: 44px; margin-bottom: 0; }
  .film-title a { display: inline-block; padding: 4px 0; }
}

/* Narrow screens: screenings as compact tiles, two or three per row. */
@media (max-width: 639px) {
  .shows { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; }
  .show { flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; padding: 7px 10px; min-height: 58px; }
  .show time { font-size: 22px; }
  .show-x { font-size: 12.5px; line-height: 1.25; }
  .show-x::before { content: none; }
}
/* The event sidebar is narrow at every width: use tiles there too. */
.screenings .shows { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; }
.screenings .show { flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; padding: 7px 10px; min-height: 58px; }
.screenings .show-x { font-size: 12.5px; line-height: 1.25; }
.screenings .show-x::before { content: none; }

/* ---------- brand: Тази вечер ---------- */
.brand-mark .moon { fill: var(--marker); }
.brand-mark .star { fill: var(--ink); opacity: 0.85; }
.brand-city { font-weight: 600; color: var(--ink-2); }

/* One line where it fits; on phones "в София" wraps as a lighter subline.
   The parts never break internally, so "София" can't drop alone. */
.tonight-h { margin-bottom: 8px; font: 900 clamp(52px, 6.4vw, 88px)/0.9 var(--display); letter-spacing: -0.012em; }
.tonight-h .tn-1, .tonight-h .tn-2 { white-space: nowrap; }
.tonight-h .tn-2 { font-weight: 500; color: var(--ink-2); }
/* Same lockup on every "… в София" heading: the place in the lighter cut. */
.city-h .h-city { font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.tonight-lead { max-width: 46ch; margin: 12px 0 18px; font-size: 19px; line-height: 1.4; color: var(--ink-2); }
@media (max-width: 899px) {
  .brand-name { font-size: 25px; }
  .tonight-lead { font-size: 17px; }
}
@media (max-width: 419px) { .brand-city { display: none; } } /* the logo, ↻, ♥ and the palette in one row */


/* ---------- poster zoom ---------- */
.zoom { position: relative; display: block; cursor: zoom-in; color: inherit; }
.zoom:focus-visible { outline: 3px solid var(--p-accent, currentColor); outline-offset: 3px; }
.zoom-hint {
  position: absolute; right: 10px; bottom: 10px; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 999px;
  background: rgb(0 0 0 / 0.55); color: #fff; opacity: 0.85; transition: opacity 0.15s;
}
.zoom-hint svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.zoom:hover .zoom-hint, .zoom:focus-visible .zoom-hint { opacity: 1; }
.hero-banner .zoom-hint { right: max(16px, calc((100vw - var(--max)) / 2 + var(--gutter))); bottom: 16px; }

.lightbox {
  width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0;
  border: 0; background: transparent; cursor: zoom-out; overflow: hidden;
}
.lightbox[open] { display: grid; place-items: center; }
.lightbox::backdrop { background: rgb(5 5 10 / 0.92); }
.lightbox img {
  max-width: calc(100vw - 2 * env(safe-area-inset-left, 0px) - 16px);
  max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 16px);
  width: auto; height: auto; object-fit: contain;
  background: var(--p-ph, transparent); box-shadow: 0 20px 80px rgb(0 0 0 / 0.6);
}
.lightbox-close {
  position: fixed; top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right));
  width: 48px; height: 48px; border-radius: 999px; border: 1px solid rgb(255 255 255 / 0.3);
  background: rgb(0 0 0 / 0.5); color: #fff; cursor: pointer; display: grid; place-items: center;
}
.lightbox-close svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
@media (prefers-reduced-motion: no-preference) {
  .lightbox[open] img { animation: zoom-in 0.18s ease-out; }
  @keyframes zoom-in { from { opacity: 0; transform: scale(0.97); } }
}

/* ---------- price & availability ---------- */
.tag-few { background: var(--marker); color: var(--marker-ink); }
.tag-nosale { background: transparent; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--rule); }
.ev-price { font-weight: 750; color: var(--ink); white-space: nowrap; }
.show.is-sold time { text-decoration: line-through; text-decoration-thickness: 2px; }
.show-sold { font-weight: 700; }
.show.is-few { box-shadow: inset 0 0 0 2px var(--marker); }
.show-few { font-weight: 700; color: var(--ink); }
.chip-toggle[aria-current]::before { content: "✓ "; }
.unknown { margin: 22px 0 8px; border-top: 1px solid var(--rule); padding-top: 14px; }
.unknown > summary {
  cursor: pointer; display: flex; align-items: center; gap: 6px; min-height: 44px;
  font: 800 20px/1.2 var(--display); color: var(--ink-2); list-style: none;
}
.unknown > summary::-webkit-details-marker { display: none; }
.unknown > summary::before { content: "▸"; display: inline-block; transition: transform 0.15s; }
.unknown[open] > summary::before { transform: rotate(90deg); }
.unknown-count { font-weight: 600; }
.unknown-note { margin: 4px 0 12px; font-size: 14px; color: var(--ink-2); }
.unknown-more { margin: 10px 0 0; font-size: 15px; color: var(--ink-2); }
.unknown-more a { font-weight: 700; display: inline-block; min-height: 44px; line-height: 44px; }

/* ---------- poster grid (default agenda view) ---------- */
/* One site width per screen: every page, view, header and footer share
   the same edges; a little wider on large screens, at most 5 tiles a row. */
@media (min-width: 1400px) {
  :root { --max: 1320px; }
}

.summary-row { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.summary-row .summary { flex: 1 1 auto; min-width: 0; margin: 0; }
.viewswitch {
  flex: none; display: inline-flex; gap: 2px; padding: 3px;
  border: 1px solid var(--rule); border-radius: 999px; background: var(--surface);
}
.vs {
  display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 12px;
  border-radius: 999px; color: var(--ink-2); font-weight: 650; font-size: 14.5px; text-decoration: none;
}
.vs:hover { color: var(--ink); text-decoration: none; }
.vs[aria-current] { background: var(--ink); color: var(--paper); }
.vs .icon { width: 18px; height: 18px; }

.is-grid .day { display: block; border-top: 0; margin-top: 8px; padding-top: 0; }
.is-grid .day-head { flex-direction: row; align-items: baseline; padding: 12px 0 10px; background: var(--paper); z-index: 4; }
@media (min-width: 900px) {
  .is-grid .day-head { top: 0; }
  .is-grid .day-rel { font-size: 42px; }
  .is-grid .day-count { margin: 0 0 0 auto; }
}

.grid {
  list-style: none; margin: 2px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px;
}
@media (min-width: 600px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 16px; } }
@media (min-width: 900px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }


/* isolation: the heart's z-index stays inside its tile, under the sticky day heading. */
.tile { position: relative; isolation: isolate; min-width: 0; display: flex; flex-direction: column; }
.tile-link { display: flex; flex-direction: column; gap: 9px; color: var(--ink); text-decoration: none; border-radius: var(--r-card); }
.tile-link:hover { text-decoration: none; }
.tile-link:focus-visible { outline-offset: 3px; }
.tile-img {
  position: relative; display: block; aspect-ratio: 2 / 3; overflow: hidden; isolation: isolate;
  container-type: inline-size;
  border-radius: var(--r-card); background: var(--p-ph, var(--p-bg));
  box-shadow: 0 14px 30px -20px rgba(0, 0, 0, 0.7);
}
.tile-pic {
  position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; max-width: none;
  object-fit: cover; transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}
/* Wide pictures: shown whole at the top, over the venue-coloured bill. */
.is-wide .tile-img { display: flex; flex-direction: column; background: var(--p-bg); }
.is-wide .tile-pic { position: relative; inset: auto; flex: none; height: auto; max-height: 62%; }
.tile-link:hover .is-wide .tile-pic, .is-wide .tile-link:hover .tile-pic { transform: none; }
/* The bill under a wide picture is as tall as the picture leaves: its own
   size container, so the title's size follows the room it has (cqh) as
   well as the width (cqi), and a squarish picture gets a smaller title. */
.is-wide .bill { position: relative; inset: auto; flex: 1; min-height: 0; padding: 5cqi 10cqi 8cqi; background-image: none; container-type: size; overflow: hidden; }
.is-wide .bill-kind { display: none; }
.is-wide .bill-title { margin: auto 0; font-size: min(12.5cqi, 27cqh); -webkit-line-clamp: 3; padding: 1cqh 0; }
.is-wide .bill-title.tt-m { font-size: min(11cqi, 25cqh); }
.is-wide .bill-title.tt-l { font-size: min(10cqi, 21cqh); -webkit-line-clamp: 4; }
.is-wide .bill-title.tt-xl { font-size: min(9.5cqi, 19cqh); -webkit-line-clamp: 4; }
.is-wide .bill-venue { font-size: max(11px, min(5.8cqi, 9cqh)); -webkit-line-clamp: 1; }
.is-wide:has(.tile-badges) .bill { padding-bottom: calc(8cqi + 34px); }

.tile-time {
  position: absolute; z-index: 3; left: 8px; top: 8px; padding: 5px 9px 4px; border-radius: 10px;
  background: var(--p-bg); color: var(--p-fg);
  font: 850 21px/1 var(--display); font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
.tile-badges { position: absolute; z-index: 3; left: 8px; right: 8px; bottom: 8px; display: flex; flex-wrap: wrap; gap: 4px; }
.tile .tag { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); }
.tag-age { background: rgba(10, 10, 16, 0.78); color: #fff; }
.tag-price { background: var(--p-bg); color: var(--p-fg); font-variant-numeric: tabular-nums; }
.tile .tag-nosale { background: rgba(10, 10, 16, 0.78); color: #fff; box-shadow: none; }

.tile-text { display: flex; flex-direction: column; gap: 3px; padding: 0 2px; min-width: 0; }
.tile-title {
  font: 800 21px/1.04 var(--display); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tile-title.tt-m { font-size: 19px; }
.tile-title.tt-l { font-size: 17.5px; }
.tile-title.tt-xl { font-size: 16.5px; }
.tile-link:hover .tile-title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.12em; }
.tile-place {
  font-size: 13.5px; line-height: 1.3; color: var(--ink-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
@media (min-width: 600px) {
  .tile-title { font-size: 23px; }
  .tile-title.tt-m { font-size: 20.5px; }
  .tile-title.tt-l { font-size: 18.5px; }
  .tile-title.tt-xl { font-size: 17.5px; }
  .tile-place { font-size: 14px; }
}
.tile.is-past .tile-link { opacity: 0.5; }
.tile.is-past .tile-pic { filter: grayscale(0.5); }
.tile.is-cancelled .tile-title, .tile.is-cancelled .bill-title { text-decoration: line-through; text-decoration-thickness: 2px; }

/* Several performances of one production: a time chip each. */
.tile-shows { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 9px 0 0; padding: 0 2px; }
.tshow {
  display: inline-flex; align-items: center; min-height: 38px; padding: 0 10px; border-radius: 10px;
  background: var(--p-bg); color: var(--p-fg); text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--p-fg) 14%, transparent);
  font: 850 19px/1 var(--display); font-variant-numeric: tabular-nums;
}
.tshow:hover { border-color: var(--p-fg); text-decoration: none; }
.tshow.is-cancelled time { text-decoration: line-through; }
.tshow.is-sold { border-style: dashed; opacity: 0.7; }
.tshow.is-few { box-shadow: inset 0 -3px 0 var(--marker); }

/* No picture: a typographic bill in the venue's colours. */
.bill {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  padding: 48px 12cqi 12cqi; background: var(--p-bg); color: var(--p-fg);
  background-image: radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--p-accent) 22%, transparent), transparent 70%);
}
.bill-kind {
  font: 750 max(11px, 5.4cqi)/1 var(--text); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--p-muted); padding-bottom: 3cqi; border-bottom: 2px solid color-mix(in srgb, var(--p-fg) 55%, transparent);
}
.bill-title {
  margin: auto 0; padding: 4cqi 0;
  font: 900 16cqi/0.9 var(--display); text-transform: uppercase; letter-spacing: -0.005em;
  overflow-wrap: anywhere; hyphens: auto;
  display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden;
}
.bill-title.tt-m { font-size: 13cqi; }
.bill-title.tt-l { font-size: 11cqi; -webkit-line-clamp: 7; }
.bill-title.tt-xl { font-size: 9.5cqi; -webkit-line-clamp: 8; }
.bill-venue {
  font: 700 max(12px, 5.8cqi)/1.2 var(--text); color: var(--p-muted);
  padding-top: 3cqi; border-top: 2px solid color-mix(in srgb, var(--p-fg) 55%, transparent);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Badges and status sit at the bottom, as on picture tiles; the bill's own
   text makes room for them instead of being overlapped. */
.is-bill:has(.tile-badges) .bill { padding-bottom: calc(12cqi + 34px); }

.tile-date { font-size: 18px; max-width: calc(100% - 16px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }


/* Multiplexes in the grid view: the poster leads. On phones it sits
   beside the title only; showtimes use the full width below. */
.is-posters .film { grid-template-columns: 112px minmax(0, 1fr); gap: 16px; padding: 18px 0; }
@media (max-width: 639px) {
  .is-posters .film { gap: 0 16px; }
  .is-posters .film-body { display: contents; }
  .is-posters .film-pic { grid-row: 1 / span 3; }
  .is-posters .film-title, .is-posters .film-meta { grid-column: 2; }
  .is-posters .film-title { align-self: end; }
  .is-posters .film-meta { align-self: start; }
  .is-posters .branch { grid-column: 1 / -1; }
  .is-posters .branch:first-of-type { margin-top: 14px; }
}
.is-posters .film-poster { border-radius: 12px; box-shadow: 0 14px 30px -20px rgba(0, 0, 0, 0.7); }
@media (min-width: 640px) {
  .is-posters .film { grid-template-columns: 176px minmax(0, 1fr); gap: 26px; }
  .is-posters .film-poster { border-radius: var(--r-card); }
  .is-posters .film-title { font-size: 32px; }
}

@media (max-width: 899px) {
  .vs { min-height: 44px; padding: 0 12px; }
  .tshow { min-height: 44px; padding: 0 12px; }
}
@media (max-width: 380px) {
  .vs span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

/* ---------- filter panel, wide screens: labelled rows in two columns ---------- */
.f-note { margin: 8px 0 0; font-size: 13px; line-height: 1.4; color: var(--ink-2); max-width: none; }
@media (min-width: 900px) {
  .filters { gap: 12px; }
  .f-panel {
    display: grid; gap: 0; padding: 4px 20px;
    border: 1px solid var(--rule); border-radius: var(--r-card); background: var(--surface);
  }
  .f-group {
    display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 18px;
    padding: 11px 0;
  }
  .f-group + .f-group { border-top: 1px solid var(--rule); }
  .f-label {
    position: static; width: auto; height: auto; clip: auto; overflow: visible; white-space: nowrap;
    margin: 0; font: 800 20px/1 var(--display); color: var(--ink-2);
  }
  .f-label label { cursor: pointer; }
  .f-group .chips { flex-wrap: wrap; overflow: visible; padding: 0; -webkit-mask-image: none; mask-image: none; }
  .f-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; min-width: 0; }
  .f-row .chips { flex: 0 1 auto; }
  .f-date { display: inline-flex; align-items: center; gap: 8px; }
  .f-date-label {
    position: static; width: auto; height: auto; clip: auto; overflow: visible;
    font-size: 14.5px; font-weight: 650; color: var(--ink-2);
  }
  .f-venue { flex: 0 1 380px; max-width: 380px; }
  /* The select gives way so "Любими сцени" stays on its row. */
  .f-g-venue .f-row { flex-wrap: nowrap; }
  .f-g-venue .f-venue { flex: 1 1 auto; min-width: 0; }
  .f-note { margin: 0; }
}

/* ---------- footer ---------- */
.foot-h { font: 850 24px/1 var(--display); color: var(--ink); margin: 0 0 12px; }
.foot-h a { color: inherit; text-decoration: none; }
.dir { padding-bottom: 24px; border-bottom: 1px solid var(--rule); }

/* Wide screens: one flowing directory, columns end at about the same height. */
.dir-cols { display: none; }
.dir-kind { font: 850 21px/1.15 var(--display); margin: 0; padding: 6px 0 4px; break-after: avoid; }
.dir-kind a { color: var(--ink); text-decoration: none; }
.dir-kind a:hover { text-decoration: underline; }
.dir-group { break-inside: auto; margin-bottom: 14px; }
.dir-group ul, .dir-acc ul, .foot-list { list-style: none; margin: 0; padding: 0; }
.dir-group li { break-inside: avoid; }
.dir-group li a { display: block; padding: 4px 0; color: var(--ink-2); font-size: 15px; line-height: 1.35; text-decoration: none; }
.dir-group li a:hover { color: var(--ink); text-decoration: underline; }
@media (min-width: 560px) {
  .dir-cols { display: block; columns: 2; column-gap: 32px; }
  .dir-acc { display: none; }
}
@media (min-width: 800px) { .dir-cols { columns: 3; } }
@media (min-width: 1100px) { .dir-cols { columns: 4; } }

/* Phones: each kind is a closed <details>. */
.dir-acc-group { border-top: 1px solid var(--rule); }
.dir-acc-group:last-child { border-bottom: 1px solid var(--rule); }
.dir-acc-group > summary {
  display: flex; align-items: center; gap: 6px; min-height: 48px; cursor: pointer; list-style: none;
  font: 850 21px/1 var(--display); color: var(--ink);
}
.dir-acc-group > summary::-webkit-details-marker { display: none; }
.dir-acc-group > summary::after { content: "+"; margin-left: auto; font: 700 22px/1 var(--text); color: var(--ink-2); }
.dir-acc-group[open] > summary::after { content: "−"; }
.dir-count { font: 600 15px/1 var(--text); color: var(--ink-2); }
.dir-acc li a { display: flex; align-items: center; min-height: 44px; color: var(--ink-2); font-size: 16px; text-decoration: none; }
.dir-acc ul { padding-bottom: 8px; }

/* Lower band: three equal columns on wide screens, stacked on phones. */
.foot-band { display: grid; gap: 24px; padding-top: 24px; }
.foot-band p { margin: 0 0 10px; max-width: 60ch; }
.foot-list li a { display: inline-flex; align-items: center; min-height: 34px; font-weight: 650; }
.foot-cookie { font-weight: 650; font-size: inherit; }
.foot-copy { font-size: 13.5px; }
@media (min-width: 800px) { .foot-band { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } }
@media (max-width: 899px) {
  .foot-list li a, .foot-cookie { min-height: 44px; }
}

.foot-meta { font-size: 13.5px; color: var(--ink-2); margin-top: 16px; }
.no-more { color: var(--ink-2); font-size: 15px; text-align: center; }

/* ---------- exhibitions & "за деца" ---------- */
.tag-kids { background: #0f766e; color: #fff; }
.tag-stated { background: #3f3f46; color: #fff; }
.tag-last { background: #c2410c; color: #fff; }
.exhibits { margin-top: 18px; }
.ex-head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 18px 0 12px; font: 850 28px/1.1 var(--display);
}
.ex-head .day-count { font: 600 14px/1.2 var(--text); color: var(--ink-2); }
.ex-events { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--rule); }
.ex-empty { color: var(--ink-2); margin: 6px 0 18px; }

/* ---------- event types (types.go): label + icon + colour ----------
   Colours (--ty-*, with the tokens at the top) meet WCAG AA as text on the
   page in both themes; the same colour draws a thin strip along the
   bottom of the tile's picture. */
.ty-theatre { --ty: var(--ty-theatre); }
.ty-film { --ty: var(--ty-film); }
.ty-concert { --ty: var(--ty-concert); }
.ty-classical { --ty: var(--ty-classical); }
.ty-opera { --ty: var(--ty-opera); }
.ty-ballet { --ty: var(--ty-ballet); }
.ty-musical { --ty: var(--ty-musical); }
.ty-performance { --ty: var(--ty-performance); }
.ty-standup { --ty: var(--ty-standup); }
.ty-exhibition { --ty: var(--ty-exhibition); }
.ty-dance { --ty: var(--ty-dance); }
.ty-magic { --ty: var(--ty-magic); }
.ty-literature { --ty: var(--ty-literature); }
.ty-talk { --ty: var(--ty-talk); }
.ty-workshop { --ty: var(--ty-workshop); }
.ty-games { --ty: var(--ty-games); }
.ty-fair { --ty: var(--ty-fair); }
.ty-sport, .ty-football, .ty-volleyball, .ty-basketball, .ty-running, .ty-cycling, .ty-combat { --ty: var(--ty-sport); }
.ty-other { --ty: var(--ty-other); }
.ty-event { --ty: var(--ty-event); }
/* "← Цялата програма" at the start of the Вид row: a way out, not a
   filter. A button with the arrow, outlined in the ink colour (the chips
   are filled), set apart from the chips by a rule. */
.f-back {
  display: inline-flex; align-items: center; gap: 6px; flex: none; height: 38px; padding: 0 14px 0 10px;
  border: 1.5px solid var(--ink); border-radius: 10px; background: transparent;
  color: var(--ink); font-size: 15px; font-weight: 700; white-space: nowrap; text-decoration: none;
}
.f-back .ticon { width: 18px; height: 18px; stroke-width: 2.4; }
.f-back:hover { background: var(--ink); color: var(--paper); text-decoration: none; }
.f-row-kind .f-back { margin-right: 6px; }
.f-row-kind .f-back + .chips { padding-left: 14px; border-left: 1px solid var(--rule); }
.sheet[open] .f-back { align-self: flex-start; height: 44px; }
.sheet[open] .f-row-kind .f-back + .chips { padding-left: 0; border-left: 0; }

/* ---------- toast: the one-time hint after a first save (app.js) ---------- */
.toast {
  position: fixed; z-index: 60; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom));
  width: max-content; max-width: min(440px, calc(100vw - 32px)); padding: 12px 16px; border-radius: 14px;
  background: var(--ink); color: var(--paper); font-size: 15px; font-weight: 600; line-height: 1.35;
  box-shadow: 0 16px 40px -18px rgba(0, 0, 0, 0.7);
  transform: translate(-50%, 12px); opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.18s, transform 0.18s, visibility 0s 0.18s;
}
.toast.is-on { transform: translate(-50%, 0); opacity: 1; visibility: visible; transition: opacity 0.18s, transform 0.18s; }
.toast .icon { width: 17px; height: 17px; vertical-align: -3px; margin-right: 6px; fill: currentColor; }
@media (max-width: 899px) {
  .toast { bottom: calc(var(--tabbar-h) + 14px + env(safe-area-inset-bottom)); }
  body:has(.actionbar) .toast { bottom: calc(var(--tabbar-h) + 84px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { .toast, .toast.is-on { transition: none; transform: translate(-50%, 0); } }
.tl { display: inline-flex; align-items: center; gap: 4px; color: var(--ty); font-weight: 700; white-space: nowrap; }
.ticon { width: 1.05em; height: 1.05em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tile .tile-img::after { content: ""; position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 4px; background: var(--ty); pointer-events: none; }
.chip-ty { display: inline-flex; align-items: center; gap: 6px; }
.chip-ty .ticon { color: var(--ty); }
.chip-ty[aria-current] .ticon { color: currentColor; }

/* Event type on its own line, between the poster and the title. */
.tile-type, .ev-type { display: block; font-size: 13.5px; line-height: 1; margin: 6px 0 0; }
/* A genre: its icon and name (genre-label), on a line of its own under
   the type on tiles and list rows, cut short when narrow. */
.gl { display: inline-flex; align-items: center; gap: 4px; min-width: 0; max-width: 100%; }
.gl .gicon { width: 15px; height: 15px; position: relative; top: -0.05em; }
/* The same box as the type line above it (.tile-type): size, icon and
   its offset, so the two icons and names line up. */
.tile-genre, .ev-genre { display: flex; align-items: center; margin: 0; font-size: 13.5px; line-height: 1; font-weight: 600; color: var(--p-muted); white-space: nowrap; overflow: hidden; }
/* A type line followed by a genre line: both the icon's height (no
   strut under an inline label), the column's gap between them. */
.tile-type:has(+ .tile-genre), .ev-type:has(+ .ev-genre) { display: flex; align-items: center; }
.tile-genre .gicon, .ev-genre .gicon { top: -0.09em; }
.gl-n { overflow: hidden; text-overflow: ellipsis; }
/* Genre colours (genre-icon): each genre takes one of the types' colours,
   which pass AA in both themes; the icon is drawn in it. */
.g-rock, .g-drama, .g-operas, .g-action, .g-food, .g-painting { --g: var(--ty-opera); }
.g-metal, .g-experimental, .g-horror, .g-contemporary-art { --g: var(--ty-magic); }
.g-alternative, .g-newmusic, .g-newplay, .g-scifi, .g-society, .g-design { --g: var(--ty-talk); }
.g-pop, .g-musicals, .g-romance { --g: var(--ty-concert); }
.g-jazz, .g-early, .g-operetta, .g-heritage { --g: var(--ty-musical); }
.g-electronic, .g-recital, .g-science, .g-photography { --g: var(--ty-film); }
.g-hiphop, .g-improv, .g-adventure { --g: var(--ty-fair); }
.g-folk, .g-folk-dance, .g-family, .g-psychology { --g: var(--ty-standup); }
.g-popfolk, .g-puppet, .g-quiz { --g: var(--ty-games); }
.g-retro, .g-comedy, .g-animation, .g-crafts, .g-applied { --g: var(--ty-workshop); }
.g-songwriter, .g-monodrama, .g-historical, .g-history, .g-sculpture { --g: var(--ty-theatre); }
.g-crossover, .g-verbatim, .g-documentary, .g-languages { --g: var(--ty-exhibition); }
.g-symphonic, .g-classic, .g-musicfilm, .g-graphics { --g: var(--ty-classical); }
.g-chamber, .g-physical, .g-classical-ballet, .g-biography, .g-travel { --g: var(--ty-ballet); }
.g-choral, .g-latin-dance, .g-books { --g: var(--ty-literature); }
.g-contemporary-dance, .g-fantasy, .g-arts { --g: var(--ty-dance); }
.g-thriller { --g: var(--ty-performance); }
.g-crime, .g-business { --g: var(--ty-other); }
.g-nature { --g: var(--ty-sport); }
.gicon { color: var(--g, currentColor); }
.chip-g[aria-current] .gicon { color: currentColor; }
.chip-g { gap: 6px; }
.pr-genres { margin: 8px 0 4px; }
.pr-genres .chips { flex-wrap: wrap; }
/* Film and production cards: the genres on a line under the type. */
.film-genre { display: flex; flex-wrap: wrap; gap: 2px 12px; margin: 4px 0 6px; font-size: 13.5px; font-weight: 600; color: var(--p-muted); }
.chip-g .gicon { width: 16px; height: 16px; }
.facts .genres { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.facts .genres .gl .gicon { width: 18px; height: 18px; }
.tile-genre + .tile-title, .ev-genre + .ev-title { margin-top: 1px; }
.tile-type .tl, .ev-type .tl { line-height: 1; }
/* The font's line box has extra room above the letters, so a centred
   icon looks low; lift it to the letters' optical middle. */
.tile-type .tl svg, .ev-type .tl svg { width: 15px; height: 15px; position: relative; top: -0.09em; }
.tile-type + .tile-title, .ev-type + .ev-title { margin-top: 1px; }

/* ---------- phones: the program first ----------
   The subscribe box moves below the events (the bottom bar has its own
   button), the price note lives in the filter sheet, the cards to the
   multiplexes and exhibitions sit side by side, and the lead is shorter. */
.f-note-sheet { display: none; }
/* The subscribe box follows the events on every screen: the program first. */
.agenda > .subbar { order: 10; margin-top: 28px; }
@media (max-width: 899px) {
  .agenda > .f-note { display: none; }
  .f-note-sheet { display: block; margin: 12px 0 0; }
}
@media (max-width: 640px) {
  .tonight { padding-top: 16px; }
  .tonight-lead { font-size: 15px; margin: 6px 0 12px; }
}

/* Wide screens: the filters stay open but take less height, so the first
   events show sooner: "Кога" and "Вид" span the panel, the shorter rows
   (Цена, Публика, Още, Сцена) pair up in two columns. */
@media (min-width: 900px) {
  .f-panel > .f-group { padding: 7px 0; }
  .tonight { padding-top: 20px; }
  .tonight-lead { margin: 8px 0 12px; font-size: 16px; max-width: 70ch; }
  .page-head { padding-top: 22px; }
}
@media (min-width: 1360px) {
  .f-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; }
  .f-panel > .f-wide { grid-column: 1 / -1; }
  .f-panel > .f-group { padding: 7px 0; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; }
  .f-panel > .f-group + .f-group { border-top: 1px solid var(--rule); }
  .f-panel > .sheet-foot, .f-panel > .f-note-sheet, .f-panel > .sheet-head { grid-column: 1 / -1; }
}


/* Today's events that began a while ago, folded under the evening. */
.day-started { margin-top: 14px; }
.day-started > summary {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px;
  border: 1px dashed var(--rule); border-radius: 999px; cursor: pointer;
  font-size: 14.5px; font-weight: 650; color: var(--ink-2); list-style: none;
}
.day-started > summary::-webkit-details-marker { display: none; }
.day-started > summary::before { content: "▸"; }
.day-started[open] > summary::before { content: "▾"; }
.day-started[open] > summary { margin-bottom: 12px; }

/* The first screen: lower headings so the events start sooner. */
@media (min-width: 900px) {
  .tonight-h { font-size: clamp(44px, 4.6vw, 64px); }
  .page-head h1 { font-size: clamp(44px, 4.6vw, 64px); }
  .venue-name { font-size: clamp(40px, 4.4vw, 64px); }
}
/* Phones: the cookie question is one slim bar at the top, so it never
   covers the events or the event page's "Купи билет" bar at the bottom. */
@media (max-width: 899px) {
  .consent {
    top: calc(8px + env(safe-area-inset-top)); bottom: auto; left: 8px; right: 8px;
    display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px;
  }
  .consent p { flex: 1 1 auto; font-size: 12.5px; line-height: 1.3; margin: 0; }
  .consent-long { display: none; } /* one line: the bar never hides the header for long */
  .consent-actions { flex: none; flex-wrap: nowrap; gap: 6px; }
  .consent .btn { min-height: 38px; padding: 0 10px; font-size: 13.5px; }
}
/* Phones: denser event rows (about 7 a screen) and no lead line. */
@media (max-width: 639px) {
  .tonight-lead { display: none; }
  .ev-link { gap: 10px; padding: 7px 8px; }
  .ev-time { width: 56px; height: 52px; font-size: 21px; }
  .ev-thumb { width: 52px; height: 52px; }
  .ev-title { font-size: 19px; }
  .ev-place { font-size: 14px; }
  .ev-info { display: none; }
  .ev-tags { margin-top: 1px; }
}

/* An old event link: the stage's next events. */
.notfound h2 { margin-top: 32px; font: 850 26px/1.1 var(--display); }
.past-next { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 17px; }
.past-next .muted { color: var(--ink-2); font-size: 15px; }

/* ---------- Любими: saved events and venues (app.js, /saved) ----------
   --fav and --on-fav (text on it) are with the tokens at the top. */
.icon-heart { stroke-linejoin: round; }
[aria-pressed="true"] > .icon-heart { fill: currentColor; }

/* The heart button of tiles and rows: only with JavaScript. */
.fav { display: none; }
.js .fav {
  display: grid; place-items: center; width: 40px; height: 40px; padding: 0; flex: none;
  border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); cursor: pointer;
}
.fav .icon { width: 22px; height: 22px; }
.fav:hover { color: var(--ink); }
.fav[aria-pressed="true"] { color: var(--fav); }

.js .tile > .fav {
  position: absolute; z-index: 5; top: 6px; right: 6px; width: 38px; height: 38px;
  background: rgba(10, 10, 16, 0.55); color: #fff;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.js .tile > .fav[aria-pressed="true"] { color: #ff7aa2; }
.js .tile-date { max-width: calc(100% - 60px); }

/* List rows: at the right end of the row. */
.day-list > .ev { position: relative; isolation: isolate; }
.js .day-list > .ev > .fav { position: absolute; top: 50%; right: -6px; transform: translateY(-50%); }
.js .day-list .ev-link { padding-right: 42px; }

/* Header: an icon with the count, next to the theme switch; on wide
   screens it starts the right-hand group. */
.fav-link {
  position: relative; flex: none; margin-left: auto; display: inline-grid; place-items: center; width: 38px; height: 38px;
  border: 1px solid var(--rule); border-radius: 999px; background: var(--surface); color: var(--ink-2);
}
.fav-link:hover { color: var(--ink); border-color: var(--ink-2); }
.fav-link[aria-current] { color: var(--fav); box-shadow: 0 0 0 2px var(--marker); }
.fav-link .icon { width: 20px; height: 20px; }
.fav-count {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--fav); color: var(--on-fav); font-size: 11.5px; font-weight: 800; line-height: 18px; text-align: center;
}
.fav-link .fav-count { position: absolute; top: -6px; right: -7px; }
@media (max-width: 899px) {
  .fav-link { margin-left: auto; width: 44px; height: 44px; }
  .fav-link + .theme-toggle { margin-left: 0; }
}

/* Reload: phones only, an icon left of "Любими" (app.js). */
.reload {
  flex: none; display: none; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--rule); border-radius: 999px; background: var(--surface); color: var(--ink-2); cursor: pointer;
}
.reload .icon { width: 20px; height: 20px; }
.reload.is-busy .icon { animation: reload-spin 0.8s linear infinite; }
@keyframes reload-spin { to { transform: rotate(360deg); } }
@media (max-width: 899px) {
  .reload:not([hidden]) { display: inline-grid; margin-left: auto; }
  .reload:not([hidden]) + .fav-link { margin-left: 0; }
}
@media (max-width: 439px) {
  .masthead-in { column-gap: 8px; }
  .reload, .fav-link, .masthead .theme-toggle { width: 40px; height: 40px; min-height: 40px; }
}

/* "Категории" sheet: the way to the list on phones. */
.browse-fav {
  display: flex; align-items: center; gap: 10px; min-height: 52px; margin: 2px 0 16px; padding: 0 14px;
  border: 1px solid var(--rule); border-radius: 14px; background: var(--paper);
  color: var(--ink); font: 850 23px/1 var(--display); text-decoration: none;
}
.browse-fav .icon { color: var(--fav); }
.browse-fav .fav-count { margin-left: auto; font-family: var(--text); }

/* Event and venue pages. */
.fav-btn .fav-on, .fav-btn[aria-pressed="true"] .fav-off { display: none; }
.fav-btn[aria-pressed="true"] .fav-on { display: inline; }
.fav-btn[aria-pressed="true"] { border-color: currentColor; }
.venue .fav-btn .icon, .actions .fav-btn .icon { width: 18px; height: 18px; }

/* The "Любими сцени" filter chip. */
.chip[aria-pressed="true"] { background: var(--marker); border-color: var(--marker); color: var(--marker-ink); }
.chip[aria-pressed="true"] .icon { color: currentColor; }

/* /saved */
.saved { padding-bottom: 56px; }
.saved-sec { margin-top: 22px; }
.saved-sec + .saved-sec { margin-top: 40px; padding-top: 6px; border-top: 1px solid var(--rule); }
.saved .empty .icon-heart { display: inline; width: 1.1em; height: 1.1em; vertical-align: -0.2em; color: var(--fav); fill: currentColor; }
.saved-ex { margin-bottom: 20px; }
.saved-gone { margin-top: 16px; color: var(--ink-2); font-size: 15px; }
.saved-venues { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
@media (min-width: 720px) { .saved-venues { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .saved-venues { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sv-venue {
  display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  border: 1px solid var(--rule); border-radius: var(--r-card); background: var(--surface);
}
.sv-head { position: relative; padding: 14px 58px 14px 16px; background: var(--p-bg); color: var(--p-fg); }
.sv-kind { margin: 0 0 4px; font-size: 14px; font-weight: 700; color: var(--p-muted); }
.sv-name { font: 900 30px/0.95 var(--display); overflow-wrap: anywhere; }
.sv-name a { color: inherit; text-decoration: none; }
.sv-name a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.js .sv-fav { position: absolute; top: 10px; right: 10px; color: var(--p-fg); }
.js .sv-fav[aria-pressed="true"] { color: var(--fav); }
.sv-next { list-style: none; margin: 0; padding: 2px 16px; }
.sv-next a {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 10px 0;
  border-bottom: 1px solid var(--rule); color: var(--ink); text-decoration: none;
}
.sv-title { flex-basis: 100%; font: 750 20px/1.1 var(--display); overflow-wrap: anywhere; }
.sv-next a:hover .sv-title { text-decoration: underline; }
.sv-next .is-cancelled .sv-title { text-decoration: line-through; }
.sv-none { margin: 0; padding: 14px 16px 0; color: var(--ink-2); }
.sv-all { margin: auto 0 0; padding: 12px 16px 14px; font-weight: 700; }

/* Venue page: "Вградете програмата", the widget code to copy. */
.embed-box { order: 11; margin-top: 16px; padding: 0 16px; border: 1px solid var(--rule); border-radius: var(--r-card); background: var(--surface); }
.embed-box[open] { padding-bottom: 16px; }
.embed-box > summary {
  display: flex; align-items: center; gap: 8px; min-height: 52px; cursor: pointer; list-style: none;
  font: 800 20px/1.2 var(--display); color: var(--ink-2);
}
.embed-box > summary::-webkit-details-marker { display: none; }
.embed-box > summary::before { content: "▸"; display: inline-block; transition: transform 0.15s; }
.embed-box[open] > summary::before { transform: rotate(90deg); }
.embed-box p { max-width: 72ch; font-size: 15px; color: var(--ink-2); }
.embed-code {
  margin: 10px 0 12px; padding: 12px 14px; border: 1px solid var(--rule); border-radius: 10px; background: var(--paper);
  font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere;
}
.embed-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.embed-note code { font-size: 13.5px; color: var(--ink); }

.embed-alt { margin-top: 12px; }
.embed-alt > summary { cursor: pointer; font-size: 15px; font-weight: 700; color: var(--ink); }
.has-fav [data-saved] > .empty { visibility: hidden; }
[data-saved][aria-busy] { min-height: 40vh; }

/* "Любими сцени" next to the venue select. */
.chip-fav { gap: 6px; cursor: pointer; text-decoration: none; }
.chip-fav .icon { width: 17px; height: 17px; color: var(--fav); }
.chip-fav[aria-pressed="true"] { background: var(--marker); color: var(--marker-ink); border-color: var(--marker); }
.chip-fav[aria-pressed="true"] .icon { color: currentColor; fill: currentColor; }
.f-row .chip-fav { flex: none; white-space: nowrap; }
/* A film's heart: on its poster's corner, as on tiles. */
.film-pic { position: relative; isolation: isolate; }
.js .film-pic > .fav {
  position: absolute; z-index: 2; top: 4px; right: 4px; width: 30px; height: 30px;
  background: rgba(10, 10, 16, 0.55); color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.js .film-pic > .fav .icon { width: 18px; height: 18px; }
.js .is-posters .film-pic > .fav { top: 6px; right: 6px; width: 38px; height: 38px; }
.js .is-posters .film-pic > .fav .icon { width: 22px; height: 22px; }
.js .film-pic > .fav[aria-pressed="true"] { color: #ff7aa2; }
.saved-note { margin: -4px 0 12px; color: var(--ink-2); font-size: 15px; }

/* ---------- Постановки: a card per production, its dates as chips ---------- */
.prod-place { margin: 4px 0 0; font-size: 15px; font-weight: 650; color: var(--ink-2); }
.prod-place a { color: var(--ink); text-decoration: none; }
.prod-place a:hover { text-decoration: underline; }
.prod-dates { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 6px; margin-top: 12px; }
.prod-dates .show { width: 100%; }
.pshow { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; padding: 7px 10px; min-height: 58px; }
.pshow-day { font-size: 13px; font-weight: 700; color: var(--p-muted); white-space: nowrap; }
.pshow time { font-size: 22px; }
.pshow .show-x { font-size: 12.5px; line-height: 1.25; }
.pshow .show-x::before { content: none; }
.prod-more { margin: 8px 0 0; font-size: 15px; }
.prod-more a { display: inline-block; min-height: 44px; line-height: 44px; font-weight: 700; }
/* Phones: title, facts and venue beside the poster, from the top; the
   dates use the full width below. */
@media (max-width: 639px) {
  .is-posters .prod { grid-template-rows: auto auto auto 1fr auto auto; }
  .is-posters .prod .film-pic { grid-row: 1 / span 4; }
  .is-posters .prod .film-title { grid-row: 1; align-self: start; }
  .is-posters .prod .film-meta { grid-row: 2; }
  .is-posters .prod-place { grid-column: 2; grid-row: 3; align-self: start; }
  .is-posters .prod-dates { grid-column: 1 / -1; grid-row: 5; }
  .is-posters .prod-more { grid-column: 1 / -1; grid-row: 6; }
  .prod-dates { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
}
/* Wide screens: a smaller poster, two productions a row. */
@media (min-width: 640px) {
  .is-prods .film { grid-template-columns: 128px minmax(0, 1fr); gap: 22px; }
  .is-prods .film-title { font-size: 28px; }
}
@media (min-width: 1100px) {
  .is-prods .film-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 44px; }
  .is-prods .film + .film { border-top: 0; }
  .is-prods .film { border-top: 1px solid var(--rule); }
  .is-prods .film:first-child, .is-prods .film:nth-child(2) { border-top: 0; }
}
/* Three views: on phones the switch shows icons only (names kept for
   screen readers). */
@media (max-width: 640px) {
  .viewswitch:has(.vs-productions) .vs span {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .viewswitch:has(.vs-productions) .vs { padding: 0 13px; }
}

/* ---------- the same anatomy on every page (agenda.html) ----------
   Heading, one line naming what one card is, the filters, the active
   filters as removable chips, the summary row, then the days. */
.unit-line { max-width: 64ch; margin: 10px 0 0; font-size: 17px; line-height: 1.4; color: var(--ink-2); }
.unit-line a { font-weight: 700; }
.venue .unit-line { margin: -4px 0 10px; color: var(--p-fg); font-weight: 650; }
@media (max-width: 639px) { .unit-line { font-size: 15px; margin-top: 6px; } }

.active { margin: 12px 0 0; }
.achips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.achip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 8px 0 13px;
  border-radius: 999px; border: 1px solid color-mix(in srgb, var(--marker) 60%, transparent);
  background: color-mix(in srgb, var(--marker) 14%, var(--surface)); color: var(--ink);
  font-size: 14.5px; font-weight: 700; text-decoration: none;
}
.achip .icon { width: 16px; height: 16px; stroke-width: 2.4; color: var(--ink-2); }
.achip:hover { background: var(--marker); border-color: var(--marker); color: var(--marker-ink); text-decoration: none; }
.achip:hover .icon { color: currentColor; }
.achip-clear { display: inline-flex; align-items: center; min-height: 34px; padding: 0 8px; font-size: 14.5px; font-weight: 700; }
@media (max-width: 899px) { .achip, .achip-clear { min-height: 40px; } }

.summary strong { color: var(--ink); font-weight: 750; }

.empty-why { font-size: 19px; font-weight: 650; color: var(--ink); }
.empty-note { color: var(--ink-2); font-size: 15px; margin: -2px 0 0; }
.fixes { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.fix-n {
  display: inline-grid; place-items: center; min-width: 24px; height: 22px; margin-left: 8px; padding: 0 7px;
  border-radius: 999px; background: color-mix(in srgb, currentColor 14%, transparent);
  font-size: 13px; font-weight: 750; font-variant-numeric: tabular-nums;
}
.empty-ex { margin: 6px 0 18px; }

/* One visual language: what has begun is dimmed on every card. */
.film.is-past .film-poster, .film.is-past .film-body { opacity: 0.5; }
.film.is-past .film-poster img { filter: grayscale(0.5); }
.film.is-past .show.is-past { opacity: 1; }
.show.is-past, .tshow.is-past { opacity: 0.5; }

/* ---------- the marks of a tile: the first-visit hint and /how ---------- */
.hint {
  margin: 18px 0 4px; padding: 16px 18px 18px; border-radius: var(--r-card);
  background: var(--surface); border: 1px solid color-mix(in srgb, var(--marker) 50%, var(--rule));
}
.hint-head h2 { font: 850 27px/1 var(--display); margin: 0 0 4px; }
.hint-head p { margin: 0 0 14px; color: var(--ink-2); font-size: 15px; }
.hint-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 16px 0 0; font-weight: 700; }
.legend { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px 26px; align-items: center; }
.lg-demo { display: flex; gap: 30px; align-items: flex-start; padding: 8px; }
.lg-tile {
  position: relative; flex: none; width: 150px; aspect-ratio: 2 / 3; border-radius: 14px;
  background: var(--p-bg); color: var(--p-fg); box-shadow: 0 14px 30px -20px rgba(0, 0, 0, 0.7);
  background-image: radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--p-accent) 22%, transparent), transparent 70%);
}
.lg-tile::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; border-radius: 0 0 14px 14px; background: var(--ty); }
.lg-bill { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 46px 13px 62px; }
.lg-kind { font: 750 10px/1 var(--text); letter-spacing: 0.16em; text-transform: uppercase; color: var(--p-muted); padding-bottom: 4px; border-bottom: 2px solid color-mix(in srgb, var(--p-fg) 55%, transparent); }
.lg-title { margin: auto 0; font: 900 27px/0.92 var(--display); text-transform: uppercase; overflow-wrap: anywhere; }
.lg-venue { font: 700 11px/1.2 var(--text); color: var(--p-muted); padding-top: 4px; border-top: 2px solid color-mix(in srgb, var(--p-fg) 55%, transparent); }
.lg-time {
  position: absolute; left: 8px; top: 8px; padding: 4px 8px 3px; border-radius: 9px;
  background: var(--p-bg); color: var(--p-fg); font: 850 19px/1 var(--display); font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
.lg-fav { position: absolute; right: 6px; top: 6px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 999px; background: rgba(10, 10, 16, 0.55); color: #fff; }
.lg-fav .icon { width: 19px; height: 19px; }
.lg-badges { position: absolute; left: 8px; right: 8px; bottom: 10px; display: flex; flex-wrap: wrap; gap: 4px; }
.lg-badges .tag { font-size: 11.5px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); }
.lg-n {
  display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 999px;
  background: var(--marker); color: var(--marker-ink); font: 800 13px/1 var(--text);
  box-shadow: 0 0 0 2px var(--surface);
}
.lg-demo .lg-n { position: absolute; z-index: 2; }
.lg-n1 { left: -9px; top: -9px; }
.lg-n2 { right: -9px; top: -9px; }
.lg-n3 { left: -9px; bottom: -9px; }
.lg-side { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding-top: 4px; }
.lg-past { position: relative; }
.lg-mini { width: 92px; }
.lg-mini .lg-bill { padding: 36px 9px 12px; }
.lg-mini .lg-title { font-size: 22px; }
.lg-mini .lg-time { font-size: 16px; }
.lg-tile.is-past { opacity: 0.5; }
.lg-n4 { left: -9px; top: -9px; }
.lg-fold {
  position: relative; display: inline-flex; align-items: center; gap: 5px; min-height: 34px; padding: 0 12px;
  border: 1px dashed var(--rule); border-radius: 999px; font-size: 13px; font-weight: 650; color: var(--ink-2); white-space: nowrap;
}
.lg-fold::before { content: "▸"; }
.lg-n5 { right: -9px; top: -11px; }
.lg-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 15.5px; line-height: 1.4; color: var(--ink-2); }
.lg-list li { display: flex; gap: 10px; align-items: flex-start; }
.lg-list b { color: var(--ink); }
@media (max-width: 639px) {
  .legend { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .lg-demo { justify-content: center; gap: 24px; padding: 6px 4px; }
  .lg-tile { width: 118px; }
  .lg-title { font-size: 22px; }
  .lg-mini { width: 72px; }
  .lg-mini .lg-title { font-size: 17px; }
  .lg-mini .lg-time { font-size: 14px; }
  .hint { padding: 14px 14px 16px; }
  .hint-head h2 { font-size: 24px; }
  .hint-head p { font-size: 14px; margin-bottom: 8px; }
  .summary { font-size: 14px; }
  .lg-fold { white-space: normal; max-width: 150px; }
  .lg-list { font-size: 14.5px; }
}

/* ---------- /saved: its one filter row ---------- */
.sv-filters { margin: 18px 0 0; }
.sv-filters .f-group { display: flex; }
@media (min-width: 900px) {
  .sv-filters { padding: 7px 20px; border: 1px solid var(--rule); border-radius: var(--r-card); background: var(--surface); }
  .sv-filters .f-group { display: grid; padding: 4px 0; }
}

/* ---------- /how ---------- */
.wrap-how { --max: 920px; }
.how { padding-bottom: 56px; }
.how-toc { display: flex; flex-wrap: wrap; gap: 6px; margin: 18px 0 6px; }
.how-toc a {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 13px; border-radius: 999px;
  border: 1px solid var(--rule); background: var(--surface); color: var(--ink); font-size: 14.5px; font-weight: 650; text-decoration: none;
}
.how-toc a:hover { border-color: var(--ink-2); }
.how-sec { margin-top: 36px; scroll-margin-top: 16px; }
.how-sec h2 { font: 850 32px/1 var(--display); margin-bottom: 12px; }
.how-sec p { max-width: 66ch; font-size: 17px; line-height: 1.55; }
.how-sec .btn { gap: 6px; }
.how-sec .btn .icon { width: 18px; height: 18px; color: var(--fav); }
.how-units { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.how-units li, .how-s {
  padding: 12px 16px; border-radius: 12px; background: var(--surface); border: 1px solid var(--rule);
  border-left: 4px solid var(--g, #8b8fff); font-size: 16px; line-height: 1.45;
}
.how-units strong { font: 850 21px/1 var(--display); margin-right: 2px; }
:root[data-theme="light"] .how-units li, :root[data-theme="light"] .how-s { --g: #3b3fc4; }
.how-sections { display: grid; gap: 8px; margin: 0; }
@media (min-width: 700px) { .how-sections { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.how-s dt a { font: 850 22px/1 var(--display); color: var(--ink); text-decoration: none; }
.how-s dt a:hover { text-decoration: underline; }
.how-s dd { margin: 5px 0 0; color: var(--ink-2); font-size: 15px; line-height: 1.4; }
.how .legend { padding: 18px; border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--rule); }
.day-done { margin: 4px 0 10px; color: var(--ink-2); font-size: 15px; }

/* ---------- share menu (share.go) ---------- */
.share-menu { position: relative; display: inline-flex; }
.share-menu > summary { list-style: none; cursor: pointer; }
.share-menu > summary::-webkit-details-marker { display: none; }
.share-menu > summary .icon { width: 18px; height: 18px; }
.share-list {
  position: absolute; z-index: 45; left: 0; top: calc(100% + 8px); width: max-content; min-width: 230px;
  max-width: calc(100vw - 2 * var(--gutter));
  display: grid; margin: 0; padding: 6px; list-style: none; border-radius: 14px;
  background: var(--surface); color: var(--ink); border: 1px solid var(--rule);
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.45);
}
.share-list li + li { border-top: 1px solid var(--rule); }
.share-list li:has(> [hidden]) { display: none; } /* items app.js has not turned on */
.share-list .sh-ig .icon { color: #d62976; }
:root[data-theme="dark"] .share-list .sh-ig .icon { color: #ff7ab0; }
.share-list :is(a, button) {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px; padding: 0 12px; border: 0; border-radius: 9px;
  background: none; color: var(--ink); font-weight: 700; font-size: 16px; text-align: left; text-decoration: none; cursor: pointer;
}
.share-list :is(a, button):hover { background: var(--paper); }
.share-list .icon { width: 20px; height: 20px; color: var(--ink-2); }
.share-list .sh-viber .icon { color: #7360f2; }
.share-list .sh-wa .icon { color: #1fa855; }
.share-list .sh-fb .icon { color: #1877f2; }
:root[data-theme="dark"] .share-list .sh-viber .icon { color: #a99cff; }
:root[data-theme="dark"] .share-list .sh-wa .icon { color: #4fdc86; }
:root[data-theme="dark"] .share-list .sh-fb .icon { color: #6aa7ff; }
.head-share { margin-top: 12px; }
/* Share beside the page's one-line description, not on a row of its own. */
.page-head .wrap:has(> .head-share) { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: center; }
.page-head .wrap:has(> .head-share) > * { grid-column: 1 / -1; }
.page-head .wrap:has(> .head-share) > .unit-line { grid-column: 1; grid-row: 2; }
.page-head .wrap > .head-share { grid-column: 2; grid-row: 2; margin: 0; }

/* ---------- /embed: the city widget's builder ---------- */
.builder { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; padding-top: 14px; padding-bottom: 56px; }
.builder > * { min-width: 0; }
.b-form { display: grid; gap: 16px; padding: 16px; border: 1px solid var(--rule); border-radius: var(--r-card); background: var(--surface); }
.b-field { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.b-label { padding: 0; font: 800 19px/1.1 var(--display); color: var(--ink-2); letter-spacing: 0.01em; }
.b-select { max-width: 100%; height: 44px; }
.b-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.b-chip { position: relative; display: inline-flex; }
.b-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.b-chip span {
  display: inline-flex; align-items: center; height: 40px; padding: 0 15px; border: 1px solid var(--rule); border-radius: 999px;
  background: var(--surface); color: var(--ink); font-weight: 650; font-size: 15px; white-space: nowrap;
}
.b-chip:hover span { border-color: var(--ink-2); }
.b-chip input:checked + span { background: var(--marker); border-color: var(--marker); color: var(--marker-ink); }
.b-chip input:focus-visible + span { outline: 3px solid var(--indigo); outline-offset: 2px; }
.b-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.b-row .b-label { flex-basis: 100%; }
.b-num { width: 84px; height: 44px; padding: 0 12px; border: 1px solid var(--rule); border-radius: 10px; background: var(--paper); font-size: 16px; font-weight: 700; }
.b-check { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 650; cursor: pointer; }
.b-check input { width: 20px; height: 20px; accent-color: var(--indigo); }
.b-h { font: 850 30px/1 var(--display); margin-bottom: 10px; }
.b-note { max-width: 70ch; font-size: 15.5px; color: var(--ink-2); }
.b-note code { font-size: 13.5px; color: var(--ink); }
.b-attrs { margin-top: 14px; }
.b-frame {
  padding: 14px; border-radius: var(--r-card); border: 1px solid var(--rule);
  background: repeating-conic-gradient(var(--surface) 0 25%, var(--paper) 0 50%) 0 0 / 22px 22px;
}
.b-frame iframe { display: block; width: 100%; height: 560px; border: 0; }
.b-badge { padding-top: 22px; border-top: 1px solid var(--rule); }
.b-venue { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 6px 0 14px; }
.b-venue .f-venue { height: 44px; flex: 1 1 240px; width: 100%; max-width: 420px; }
.badge-pair { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 4px; }
.badge-swatch { display: grid; justify-items: start; gap: 6px; padding: 14px 16px 10px; border-radius: 12px; border: 1px solid var(--rule); }
.badge-swatch img { display: block; }
.badge-swatch span { font-size: 13px; font-weight: 700; }
.badge-swatch.is-light { background: #f3f4f7; color: #4a4d68; }
.badge-swatch.is-dark { background: #0b0c14; color: #a9abc3; }
.embed-h { margin: 22px 0 6px; font: 800 20px/1.2 var(--display); color: var(--ink); }
@media (min-width: 1000px) {
  .builder { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: start; column-gap: 32px; }
  .b-form { grid-column: 1; grid-row: 1; }
  .b-code { grid-column: 1; grid-row: 2; }
  .b-preview { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: 16px; }
  .b-badge { grid-column: 1 / -1; }
}

/* Любими in a Google account (/saved, account.go; app.js shows the part
   that fits). The button follows Google's: white, the four-colour G. */
.acct {
  display: grid; gap: 10px; max-width: 64ch; margin: 16px 0 0; padding: 14px 16px;
  border: 1px solid var(--rule); border-radius: 14px; background: var(--surface);
}
.acct[hidden], .acct [hidden] { display: none; }
.acct p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.acct strong { color: var(--ink); }
.acct-out, .acct-in { display: grid; gap: 10px; justify-items: start; }
.acct-google { background: #fff; border-color: #dadce0; color: #1f1f1f; }
.acct-google:hover { background: #f8f9fa; filter: none; }
.icon-google { width: 18px; height: 18px; stroke: none; }
.acct-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.btn-danger { color: var(--danger, #d93a3a); }
.btn-danger.is-armed { background: var(--danger, #d93a3a); border-color: var(--danger, #d93a3a); color: #fff; }

/* Премиери (/premieres): the day the run begins, the cinemas. */
.premiere-when { margin: 6px 0 0; font-size: 15px; }
.premiere-where { margin: 4px 0 0; font-size: 14px; color: var(--ink-2); }
.browse-premieres { display: inline-block; margin: 0 0 10px; font-weight: 750; }

/* A date's page: its film's or production's page (all dates). */
.work-link { margin: 0 0 28px; }
.work-link p { margin: 0 0 12px; font-size: 15.5px; line-height: 1.45; color: var(--ink-2); }
.work-link p a { display: inline; padding: 0; border: 0; font-weight: 750; }
.work-link .btn { width: 100%; }

/* ---------- colours sheet (the theme button: layout.html, app.js) ---------- */
dialog.theme-sheet[open] { max-width: 560px; margin-inline: auto; }
@media (min-width: 700px) { dialog.theme-sheet[open] { inset: 0; margin: auto; height: fit-content; border-radius: 22px; } }
.pals { list-style: none; margin: 0; padding: 0; }
.pal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.pal-name { display: flex; flex-direction: column; min-width: 0; }
.pal-name b { font: 800 22px/1.1 var(--display); }
.pal-name small { color: var(--ink-2); font-size: 14px; }
.pal-modes { display: flex; gap: 8px; }
.pal-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px;
  border: 1px solid var(--rule); border-radius: 999px; background: var(--paper); color: var(--ink);
  font-weight: 650; font-size: 15px; cursor: pointer;
}
.pal-btn[aria-pressed="true"] { border-color: var(--tab-mark); box-shadow: inset 0 0 0 1px var(--tab-mark); }
/* A palette's swatch: a circle of its page colour and its marker. */
.sw { flex: none; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, var(--sw-a) 50%, var(--sw-b) 50%); }
.sw-night-light, .sw-penguin-light, .sw-dracula-light, .sw-mono-dark, .sw-mono-light, .sw-mono-green-light, .sw-crt-light { box-shadow: inset 0 0 0 1px var(--rule); }
.sw-crt-dark { background: repeating-linear-gradient(0deg, rgb(0 0 0 / .45) 0 1px, transparent 1px 3px), linear-gradient(135deg, var(--sw-a) 50%, var(--sw-b) 50%); }
.sw-crt-light { background: repeating-linear-gradient(0deg, rgb(0 0 0 / .2) 0 1px, transparent 1px 3px), linear-gradient(135deg, var(--sw-a) 50%, var(--sw-b) 50%); }
.sw-night-dark { --sw-a: #11121c; --sw-b: #ffd447; } .sw-night-light { --sw-a: #f3f4f7; --sw-b: #3b3fc4; }
.sw-penguin-dark { --sw-a: #151719; --sw-b: #ff8a1f; } .sw-penguin-light { --sw-a: #f6f5f2; --sw-b: #ff8a1f; }
.sw-dracula-dark { --sw-a: #282a36; --sw-b: #ff79c6; } .sw-dracula-light { --sw-a: #fffbeb; --sw-b: #644ac9; }
.sw-mono-dark { --sw-a: #0a0a0a; --sw-b: #ffffff; } .sw-mono-light { --sw-a: #ffffff; --sw-b: #0a0a0a; }
.sw-mono-green-dark { --sw-a: #07110a; --sw-b: #4cff86; } .sw-mono-green-light { --sw-a: #eefaf0; --sw-b: #0f7a34; }
.sw-crt-dark { --sw-a: #0c0a08; --sw-b: #ffb000; } .sw-crt-light { --sw-a: #ece4d4; --sw-b: #a35200; }
.pal-auto { display: flex; align-items: center; gap: 10px; padding: 14px 0 4px; font-weight: 600; }
.pal-auto input { width: 20px; height: 20px; accent-color: var(--indigo); }

/* ---------- pages of a long period (paging.go) ---------- */
/* As on noviknigi.bg: ‹ Предишни · 1 … 3 4 [5] 6 7 … 12 · Следващи ›;
   on phones ‹, "5 / 12" and ›. */
.pager {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px;
  margin: 44px 0 0; padding-top: 22px; border-top: 1px solid var(--rule);
}
.pager a, .pager .pg-arrow, .pager .pg-of {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 44px; height: 44px; padding: 0 16px; border-radius: var(--r-btn);
  border: 1.5px solid var(--rule); background: var(--surface); text-decoration: none; color: var(--ink);
  font: 800 20px/1 var(--display); font-variant-numeric: tabular-nums;
}
.pager a:hover { border-color: var(--ink-2); }
.pager .pg-arrow { font: 650 16px/1 var(--text); }
.pager .pg-arrow.off { opacity: 0.35; }
.pager .pg-nums { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; }
.pager .pg-n { padding: 0 12px; }
.pager .pg-n[aria-current] { background: var(--marker); color: var(--marker-ink); border-color: var(--marker); }
.pager .pg-gap { min-width: 20px; text-align: center; color: var(--ink-2); }
.pager .pg-of { display: none; background: var(--marker); color: var(--marker-ink); border-color: var(--marker); }
.pager .pg-arrow:first-child { margin-right: auto; }
.pager .pg-arrow:last-child { margin-left: auto; }
@media (max-width: 760px) {
  .pager { flex-wrap: nowrap; }
  .pager .pg-nums { display: none; }
  .pager .pg-of { display: inline-flex; }
}

/* ---------- "Тази вечер" on the home page (tonight.go) ---------- */
.tonight-row { margin: 4px 0 22px; }
.tonight-row-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font: 850 30px/1 var(--display); margin: 0 0 12px; }
.tonight-row-h .day-count { font: 600 15px var(--text); color: var(--ink-2); }
.tonight-all { margin-left: auto; font: 650 15px var(--text); }
/* No scrolling sideways: as many as fill the grid's rows — two rows of
   two on a phone, one row from 600px (3, 4, then 5 columns). */
.tonight-grid > li:nth-child(n+5) { display: none; }
@media (min-width: 600px) { .tonight-grid > li:nth-child(n+4) { display: none; } }
@media (min-width: 900px) { .tonight-grid > li:nth-child(4) { display: flex; } }
@media (min-width: 1200px) { .tonight-grid > li:nth-child(5) { display: flex; } }

/* ---------- an event's page: more in its genre (related.go) ---------- */
.related { margin: 34px 0 0; }
.related h2 { font: 850 28px/1.05 var(--display); margin: 0 0 14px; }
/* Whole rows, no scrolling sideways: two rows of two on a phone, then
   two rows of three (beside the text from 900px too). */
.related-grid > li:nth-child(n+5) { display: none; }
@media (min-width: 600px) { .related-grid > li:nth-child(n+5) { display: flex; } }
@media (min-width: 900px) { .related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.related-all { margin: 8px 0 0; font-weight: 650; }
.prose-from { color: var(--ink-2); font-size: 15px; }

/* The genre row: the most frequent chips, the rest behind "още". */
.more-genres { margin-top: 8px; }
.more-genres > summary { list-style: none; cursor: pointer; width: fit-content; }
.more-genres > summary::-webkit-details-marker { display: none; }
.more-genres[open] > summary { display: none; }
.more-genres .chips { flex-wrap: wrap; }

/* The footer's line on the sister sites (noviknigi.bg, anonymous.bg). */
.foot-sites { color: var(--ink-2); }