/* Public pages on passap.co.uk (/v/<venue>, /s/<stage>, /p/<work>, /o/<share>). Pages link it as site.css?v=<date>: change
   that date in every page when this file changes, since Cloudflare keeps assets for 4 hours. */
:root {
  color-scheme: light dark;
  --bg: #f2f2f7;
  --card: #ffffff;
  --text: #1c1c1e;
  --muted: #6c6c70;
  --line: #e5e5ea;
  /* Links and accent text on white and the grey page: #0066cc keeps 4.5:1 (#007aff is 3.6:1). */
  --accent: #0066cc;
  --accent-soft: rgba(0, 122, 255, 0.1);
  /* Behind white text: the accent darkened to 4.5:1 (WCAG AA for body-size text). */
  --accent-fill: #0066cc;
  --green: #248a3d;
  --green-soft: rgba(52, 199, 89, 0.14);
  /* Text on --green-soft: #248a3d there is 3.9:1, this is 5.8:1 (as the app's .badge-good). */
  --green-text: #1a6b31;
  --placeholder: #d1d1d6;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --card: #1c1c1e;
    --text: #f2f2f7;
    --muted: #98989f;
    --line: #38383a;
    --accent: #0a84ff;
    --accent-soft: rgba(10, 132, 255, 0.18);
    --accent-fill: #0a6fd6;
    --green: #30d158;
    --green-soft: rgba(48, 209, 88, 0.16);
    --green-text: #63d982;
    --placeholder: #3a3a3c;
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.45 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
/* Skip link (keyboard): off screen until focused. */
.skip {
  position: absolute; left: 1rem; top: -100px; z-index: 10; padding: 0.5rem 1rem; border-radius: 0.5rem;
  background: var(--accent-fill); color: #fff; font-weight: 600; text-decoration: none;
}
.skip:focus { top: 0.5rem; outline: 3px solid var(--accent); outline-offset: 2px; }
main:focus { outline: none; }
main {
  max-width: 40rem;
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top, 0px) + 2rem) 1rem calc(env(safe-area-inset-bottom, 0px) + 3rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
main > section { display: flex; flex-direction: column; gap: 1.25rem; }
/* A group of a section's cards revealed together, laid out as if each card were the section's own child. */
.later { display: contents; }
.later[hidden] { display: none; }
a { color: var(--accent); }
.brand {
  display: flex; align-items: center; gap: 0.5rem; font-weight: 600; color: var(--muted); font-size: 0.9375rem;
  text-decoration: none; align-self: flex-start;
}
.brand-mark {
  display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 0.5rem;
  background: var(--accent-fill); color: #fff; font-weight: 700; font-size: 0.9375rem;
}
h1 { font-size: 1.875rem; line-height: 1.2; margin: 0; letter-spacing: -0.01em; text-wrap: balance; overflow-wrap: anywhere; }
h2 { font-size: 1.125rem; margin: 0; text-wrap: balance; }
h3 { font-size: 1rem; margin: 0; }
p { margin: 0; }
.eyebrow {
  margin: 0 0 0.25rem; font-size: 0.8125rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em;
  font-weight: 600;
}
.lede { margin: 0.5rem 0 0; color: var(--muted); }
.hero {
  display: block; width: 100%; aspect-ratio: 16 / 9; max-width: 100%; object-fit: cover; border-radius: 1rem;
  background: var(--placeholder);
}
.photo { margin: 0; display: grid; gap: 0.375rem; min-width: 0; }
.credit { font-size: 0.8125rem; color: var(--muted); overflow-wrap: anywhere; }
.credit a { color: inherit; }
.card { background: var(--card); border-radius: 1rem; padding: 1rem 1.125rem; display: grid; gap: 0.75rem; min-width: 0; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem 0.75rem; flex-wrap: wrap; }
.facts { display: grid; gap: 0.875rem; margin: 0; }
.facts div { display: grid; gap: 0.125rem; min-width: 0; }
.facts dt { font-size: 0.8125rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
/* Uppercase turns Armenian "և" into the old "ԵՒ" ("ԵՐԵՒԱՆ", not "ԵՐԵՎԱՆ"): Armenian labels keep their case. */
:lang(hy) .eyebrow, :lang(hy) .facts dt { text-transform: none; letter-spacing: normal; }
.facts dd { margin: 0; overflow-wrap: anywhere; white-space: pre-line; }
.sub { display: block; color: var(--muted); font-size: 0.9375rem; }
.note { color: var(--muted); font-size: 0.9375rem; }
/* Apple Weather's mark at its own proportions, about the text's height, on the text's line. */
.weather-logo { display: inline-block; height: 1.1em; width: auto; vertical-align: -0.2em; }
.badge {
  display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.1875rem 0.625rem; border-radius: 999px;
  font-size: 0.8125rem; font-weight: 600; background: var(--accent-soft); color: var(--accent);
}
.badge.official { background: var(--green-soft); color: var(--green-text); }
.badge.official::before { content: "✓"; }
.rows { list-style: none; margin: 0; padding: 0; }
.rows:empty, .chips:empty { display: none; }
.rows > li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem; flex-wrap: wrap;
  padding: 0.75rem 0; border-top: 1px solid var(--line);
}
.rows > li:first-child { border-top: 0; padding-top: 0.25rem; }
.rows > li > div { min-width: 0; flex: 1 1 14rem; }
.name { font-weight: 600; overflow-wrap: anywhere; }
/* A shared plan's rows (/l/): a small poster before the text, kept on one line. */
.rows > li.plan-item { flex-wrap: nowrap; align-items: flex-start; justify-content: flex-start; }
.plan-poster { flex: 0 0 auto; width: 3rem; height: 4.5rem; object-fit: cover; border-radius: 0.375rem; background: var(--bg); }
/* A cast list's rows (works and events, the artists index): a round photo before the name. */
.person-photo { flex: 0 0 auto; width: 3rem; height: 3rem; border-radius: 50%; object-fit: cover; background: var(--placeholder); }
.rows > li.plan-item:has(> .person-photo) { align-items: center; }
.unavailable { font-style: italic; }
.plan-days { display: grid; gap: 1.25rem; }
.price { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; margin-left: auto; }
.price .sub { font-weight: 400; text-align: right; }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.chips li { padding: 0.3125rem 0.75rem; border-radius: 999px; background: var(--bg); font-size: 0.9375rem; }
.day { display: grid; gap: 0.25rem; }
/* A film's or play's page: one block per place (a cinema's or theater's location), its days underneath. */
.place { display: grid; gap: 0.25rem; }
.place + .place { border-top: 1px solid var(--line); padding-top: 1rem; margin-top: 1rem; }
.place h3 { margin: 0; font-size: 1.0625rem; }
.place h3 a { color: inherit; text-decoration: none; }
.place h3 a:hover { text-decoration: underline; }
.place .day { margin-top: 0.5rem; }
.place .day h4 { margin: 0; font-size: 0.9375rem; color: var(--muted); font-weight: 600; }
.place .day + .day { border-top: 0; padding-top: 0; }
.day + .day { border-top: 1px solid var(--line); padding-top: 0.75rem; margin-top: 0.75rem; }
.time { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 3.5rem; }
.film { display: grid; gap: 0.125rem; padding: 0.5rem 0; }
.times { list-style: none; margin: 0.375rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 0.5rem; }
.times li { display: grid; gap: 0.0625rem; padding: 0.5rem 0.75rem; border-radius: 0.75rem; background: var(--bg); min-width: 0; }
.times .sub { font-size: 0.8125rem; }
.times .price { text-align: left; margin: 0; font-size: 0.9375rem; white-space: normal; }
.sold-out { color: var(--muted); font-weight: 600; }
.more {
  all: unset; cursor: pointer; justify-self: start; color: var(--accent); font-weight: 600; padding: 0.5rem 0;
  min-height: 2.75rem; box-sizing: border-box;
}
.more:focus-visible, .open-app:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 0.5rem; }
.open-app {
  display: block; text-align: center; padding: 0.875rem 1rem; border-radius: 0.875rem;
  background: var(--accent-soft); color: var(--accent); font-weight: 600; text-decoration: none;
}
.loading { color: var(--muted); }
.picker { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.picker button {
  all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; min-height: 2.75rem;
  padding: 0.5rem 0.875rem; border-radius: 999px; background: var(--bg); font-size: 0.9375rem;
}
.picker button[aria-pressed="true"] { background: var(--accent-fill); color: #fff; font-weight: 600; }
.picker button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* Add to Apple Wallet: Apple's badge as a form button (the shared tickets page). Keep its clear space. */
.wallet { margin: 0; padding: 0.25rem; }
.wallet button { all: unset; cursor: pointer; display: block; border-radius: 0.5rem; }
.wallet button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.wallet img { display: block; height: 2.5rem; width: auto; }
.rows > li > .wallet { flex: 0 0 auto; }
/* Add to Google Wallet: Google's button, at least 48px high with 8px clear space (its brand rules). */
.gwallet { flex: 0 0 auto; max-width: 100%; }
.gwallet button { all: unset; cursor: pointer; display: block; padding: 0.5rem; border-radius: 2rem; }
.gwallet button:focus-visible { outline: 3px solid var(--accent); outline-offset: 0; }
.gwallet button:disabled { cursor: progress; opacity: 0.6; }
.gwallet img { display: block; height: 3rem; width: auto; max-width: 100%; }
.gwallet .error { margin: 0 0.5rem; color: var(--danger, #d70015); font-size: 0.9375rem; }
/* A ticket's QR code: black on white in both themes, large, with the quiet zone drawn in. */
.ticket-qr { flex: 1 1 100%; margin: 0.25rem 0 0; display: grid; justify-items: center; gap: 0.5rem; padding: 1rem;
  background: #fff; color: #000; border-radius: 0.75rem; }
.ticket-qr svg { display: block; width: min(100%, 18rem); height: auto; aspect-ratio: 1; }
.ticket-qr code { font-size: 0.8125rem; color: #333; overflow-wrap: anywhere; text-align: center; }
.rows > li:has(> .wallet) { align-items: center; }
.directions { display: inline-block; margin-top: 0.25rem; }
/* The page in each site language (/x/<id>, /x/<id>/hy, /x/<id>/ru); the current one is plain text weight. */
.langs { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin-top: -0.75rem; font-size: 0.9375rem; }
.langs:empty { display: none; }
.langs a { display: inline-flex; align-items: center; min-height: 2.75rem; text-decoration: none; }
.langs a[aria-current="page"] { color: var(--text); font-weight: 600; }
.langs a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 0.25rem; }
.about { display: grid; gap: 0.75rem; overflow-wrap: anywhere; }
.links a { overflow-wrap: anywhere; }
/* An artist's page: a round portrait beside the name, stacked on narrow screens. */
.person { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.person > div { min-width: 0; flex: 1 1 12rem; }
.person .credit { margin-top: 0.375rem; }
.portrait { margin: 0; flex: 0 0 auto; }
.portrait img { display: block; width: 8rem; height: 8rem; border-radius: 50%; object-fit: cover; background: var(--placeholder); }
.rows > li a.name { color: inherit; text-decoration: none; }
.rows > li a.name:hover { text-decoration: underline; }
/* The partner page's contact form (/partners). */
.form { gap: 1rem; }
.field { display: grid; gap: 0.375rem; min-width: 0; }
.field label { font-size: 0.9375rem; font-weight: 600; }
.field input, .field textarea {
  font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 0.625rem;
  padding: 0.625rem 0.75rem; min-height: 2.75rem; width: 100%;
}
.field textarea { resize: vertical; min-height: 7rem; }
.field input:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.field [aria-invalid="true"] { border-color: #d70015; box-shadow: inset 0 0 0 1px #d70015; }
.submit {
  all: unset; box-sizing: border-box; cursor: pointer; justify-self: start; min-height: 2.75rem; padding: 0.75rem 1.5rem;
  border-radius: 0.875rem; background: var(--accent-fill); color: #fff; font-weight: 600;
}
.submit:disabled { opacity: 0.6; cursor: default; }
.submit:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.form-status:empty { display: none; }
.form-status { font-weight: 600; }
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
/* The home page (/, /hy, /ru): Apple's App Store badge as is, at its 40 px height with clear space around it. */
.store { align-self: flex-start; padding: 0.25rem; border-radius: 0.5rem; }
.store img { display: block; height: 2.5rem; width: auto; }
.store:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.dress { display: inline-flex; align-items: center; gap: 8px; }
.dress svg { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* A session address (/film/…-w285/<session>): its card above the schedule, and its time marked in the list. */
.session { display: grid; gap: 0.375rem; }
.session p { margin: 0; }
.session-when { font-size: 1.25rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.session .price { text-align: left; margin: 0; }
.session .open-app { margin-top: 0.5rem; }
.times li.selected { box-shadow: inset 0 0 0 2px var(--accent); }