/* The venue widget (/embed/source/…): a small self-contained page that
 * other sites frame. Same tokens and venue tints as app.css; light unless
 * ?theme=dark, or the visitor's system with ?theme=auto. */
:root {
  --paper: #ffffff;
  --surface: #f3f4f7;
  --ink: #181a2f;
  --ink-2: #4a4d68;
  --rule: #d8dae4;
  --marker: #ffd447;
  --marker-ink: #181a2f;
  --danger: #b42318;
  --display: "Sofia Sans Extra Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --text: "Sofia Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --paper: #11121c; --surface: #1b1c2b; --ink: #ececf4; --ink-2: #a9abc3; --rule: #2c2e43; --danger: #ff8a80;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --paper: #11121c; --surface: #1b1c2b; --ink: #ececf4; --ink-2: #a9abc3; --rule: #2c2e43; --danger: #ff8a80;
    color-scheme: dark;
  }
}

/* The venue's colour (view.go sourceTint), as on its page. */
.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; }
.t-city { --h: 238; } /* the city widget (/embed/sofia, /embed/kind/…): the site's indigo */
body {
  --p-bg: hsl(var(--h, 230) calc(45% * var(--sat, 1)) 91%);
  --p-fg: hsl(var(--h, 230) calc(40% * var(--sat, 1)) 13%);
  --p-muted: hsl(var(--h, 230) calc(22% * var(--sat, 1)) 32%);
  --p-accent: hsl(var(--h, 230) calc(65% * var(--sat, 1)) 32%);
}
:root[data-theme="dark"] body {
  --p-bg: hsl(var(--h, 230) calc(30% * var(--sat, 1)) 16%);
  --p-fg: hsl(var(--h, 230) calc(25% * var(--sat, 1)) 93%);
  --p-muted: hsl(var(--h, 230) calc(15% * var(--sat, 1)) 72%);
  --p-accent: hsl(var(--h, 230) calc(75% * var(--sat, 1)) 76%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) body {
    --p-bg: hsl(var(--h, 230) calc(30% * var(--sat, 1)) 16%);
    --p-fg: hsl(var(--h, 230) calc(25% * var(--sat, 1)) 93%);
    --p-muted: hsl(var(--h, 230) calc(15% * var(--sat, 1)) 72%);
    --p-accent: hsl(var(--h, 230) calc(75% * var(--sat, 1)) 76%);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; background: transparent; } /* below the box: the host page */
body { color: var(--ink); font: 16px/1.4 var(--text); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--p-accent); outline-offset: 2px; border-radius: 4px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.em { border: 1px solid var(--rule); border-radius: 16px; overflow: hidden; background: var(--paper); }
.em-head { padding: 14px 16px 12px; background: var(--p-bg); color: var(--p-fg); }
.em-kicker { font-size: 13px; font-weight: 750; letter-spacing: 0.06em; text-transform: uppercase; color: var(--p-muted); }
.em-venue { margin: 2px 0 0; font: 900 30px/0.95 var(--display); letter-spacing: -0.005em; }
.em-venue a { text-decoration: none; }
.em-venue a:hover { text-decoration: underline; text-decoration-thickness: 2px; }

.em-list { list-style: none; margin: 0; padding: 0 16px; }
.em-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.em-row + .em-row { border-top: 1px solid var(--rule); }
.em-date {
  flex: none; width: 54px; min-height: 54px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-radius: 10px; background: var(--p-bg); color: var(--p-fg); line-height: 1;
}
.em-d { font: 850 26px/1 var(--display); font-variant-numeric: tabular-nums; }
.em-m { font-size: 12.5px; font-weight: 750; color: var(--p-muted); margin-top: 2px; }
.em-range { padding: 4px; text-align: center; font: 800 16px/1.05 var(--display); }
/* The event's picture, as on the site's tiles: posters fill the square,
   wide pictures are shown whole over the venue's colour. */
.em-pic {
  flex: none; width: 72px; height: 72px; border-radius: 10px; overflow: hidden;
  display: flex; align-items: center; background: var(--p-bg);
}
.em-pic img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.em-pic.is-wide img { height: auto; object-fit: contain; }
@media (max-width: 380px) { .em-pic { width: 56px; height: 56px; } }
.em-body { flex: 1 1 auto; min-width: 0; }
.em-when { font-size: 14px; font-weight: 650; color: var(--ink-2); }
.em-title {
  display: block; font: 800 21px/1.08 var(--display); text-decoration: none; overflow-wrap: anywhere; margin-top: 1px;
}
.em-title:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.12em; }
.is-cancelled .em-title { text-decoration: line-through; }
.em-place { margin-top: 1px; font-size: 14px; font-weight: 650; color: var(--ink-2); overflow-wrap: anywhere; }
.em-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 3px; }
.em-tag { padding: 1px 8px; border-radius: 999px; font-size: 12.5px; font-weight: 750; line-height: 1.6; white-space: nowrap; }
.em-cancel { background: var(--danger); color: var(--paper); }
.em-sold { background: var(--ink); color: var(--paper); }
.em-few, .em-prem { background: var(--marker); color: var(--marker-ink); }
.em-price { font-size: 14px; font-weight: 750; white-space: nowrap; }
.em-btn {
  flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 10px;
  background: var(--p-accent); color: var(--p-bg); font-weight: 750; font-size: 15px; text-decoration: none; white-space: nowrap;
}
.em-btn:hover { filter: brightness(1.08); }
.em-empty { padding: 18px 16px; color: var(--ink-2); }
.em-empty a { font-weight: 700; color: var(--ink); }

.em-foot {
  display: flex; justify-content: flex-end; padding: 10px 16px; border-top: 1px solid var(--rule);
  background: var(--surface); font-size: 13.5px;
}
.em-credit { color: var(--ink-2); text-decoration: none; }
.em-credit strong { font: 850 16px/1 var(--display); color: var(--ink); }
.em-credit:hover strong { text-decoration: underline; }

@media (max-width: 420px) {
  .em-list { padding: 0 12px; }
  .em-row { gap: 10px; }
  .em-date { width: 48px; min-height: 50px; }
  .em-title { font-size: 19px; }
  .em-btn { min-height: 36px; padding: 0 10px; font-size: 14px; }
}