/* Култура в София
 *
 * 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 world's 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;
}

/* ---------- the three worlds ----------
   Програма (default: indigo night, yellow marker), Големите кина (cinema:
   red velvet), Изложби (gallery: green). Set by layout.World. */
:root[data-world="cinema"] {
  --paper: #fbf1f1; --surface: #ffffff; --rule: #ecd5d7; --ink-2: #5c4448;
  --marker: #d62f33; --marker-ink: #ffffff; --indigo: #b4232a; --on-indigo: #ffffff;
}
:root[data-world="gallery"] {
  --paper: #eff5f1; --surface: #ffffff; --rule: #d3e0d8; --ink-2: #41574d;
  --marker: #15805a; --marker-ink: #ffffff; --indigo: #13734f; --on-indigo: #ffffff;
}
:root[data-theme="dark"][data-world="cinema"] {
  --paper: #170d10; --surface: #25161b; --rule: #3c2329; --ink-2: #c3a9ae;
  --marker: #ff5a5f; --marker-ink: #170d10; --indigo: #ffaaad; --on-indigo: #170d10;
}
:root[data-theme="dark"][data-world="gallery"] {
  --paper: #0c1613; --surface: #15221e; --rule: #25372f; --ink-2: #a5c0b4;
  --marker: #6fdcb0; --marker-ink: #0c1613; --indigo: #8fe3c4; --on-indigo: #0c1613;
}

/* 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, each tinted with its world's colour on every
   page; 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); }
.nav-g-prog { --g: #8b8fff; --g-mark: #ffd447; }
.nav-g-gal { --g: #4fd1a0; --g-mark: #6fdcb0; }
.nav-g-cine { --g: #ff5a5f; --g-mark: #ff5a5f; }
:root[data-theme="light"] .nav-g-prog { --g: #3b3fc4; --g-mark: #8a6000; }
:root[data-theme="light"] .nav-g-gal { --g: #1f9e6e; --g-mark: #15805a; }
:root[data-theme="light"] .nav-g-cine { --g: #e5383b; --g-mark: #c8262c; }
.theme-toggle {
  margin-left: 0; display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 0 10px; border: 1px solid var(--rule); border-radius: 999px;
  background: var(--surface); color: var(--ink-2); font-size: 14px; font-weight: 650; cursor: pointer;
}
.theme-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.theme-toggle .half { 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 .sub-cta { 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, .theme-label { 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; }
  /* Icon-only subscribe button; the label stays for screen readers. */
  .sub-cta { padding-inline: 10px; }
  .sub-cta span {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
}

/* ---------- 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; }
.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, .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-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; }
.sub-cta {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
  min-height: 38px; padding: 0 14px; border-radius: 999px;
  background: var(--indigo); color: var(--on-indigo); font-weight: 750; font-size: 15px; text-decoration: none; white-space: nowrap;
}
.sub-cta:hover { text-decoration: none; filter: brightness(1.08); }
.sub-cta[aria-current] { box-shadow: 0 0 0 3px var(--marker); }

.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, .sub-cta { 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; min-height: 44px; padding: 0 14px; }

  .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); }
.mx-cards { display: grid; gap: 8px; margin-top: 6px; }
.mx-card {
  display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 12px 16px;
  border-radius: var(--r-card); border: 1px solid var(--rule); background: var(--surface);
  color: var(--ink); text-decoration: none;
}
.mx-card:hover { border-color: var(--ink-2); text-decoration: none; }
.mx-text strong { font: 850 24px/1 var(--display); margin-right: 6px; }
.mx-text span { color: var(--ink-2); font-size: 15.5px; }
.mx-go { margin-left: auto; width: 22px; height: 22px; color: var(--ink-2); }

.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: 379px) { .brand-city { display: none; } }


/* ---------- 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; }
.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; }
  .mx-cards { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .mx-card { min-height: 0; padding: 9px 12px; gap: 6px; }
  .mx-text strong { display: block; font-size: 18px; margin: 0 0 2px; }
  .mx-text span { font-size: 13px; }
  .mx-go { display: none; }
}
@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; }
}

/* Nine sections: the theme switch is its icon alone below 1600px (its
   label stays for screen readers), so the menu keeps one row from 1400px. */
@media (min-width: 900px) and (max-width: 1599px) {
  .theme-toggle { padding: 0 10px; }
  .theme-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* 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-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. */
.fav-link {
  position: relative; flex: none; 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; }
}

/* "Категории" 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); }
/* Phones: with the "Любими" icon the theme switch is its icon alone (the
   label stays for screen readers), so the header never overflows. */
@media (max-width: 479px) {
  .masthead .theme-toggle { padding: 0 12px; }
  .masthead .theme-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.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; }
.page-head .mx-cards { margin-top: 14px; }
@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; }
.w-cinema { --g: #ff5a5f; }
.w-gallery { --g: #4fd1a0; }
:root[data-theme="light"] .how-units li, :root[data-theme="light"] .how-s { --g: #3b3fc4; }
:root[data-theme="light"] .how-units .w-cinema, :root[data-theme="light"] .how-s.w-cinema { --g: #e5383b; }
:root[data-theme="light"] .how-units .w-gallery, :root[data-theme="light"] .how-s.w-gallery { --g: #1f9e6e; }
.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; }
}