/* DO NOT EDIT — copied from packages/shared/src/events/ui/event-page.css
   by `npm run tokens`. Edit the source there, regenerate, commit both.
   A vitest in packages/shared fails if this file drifts from the source. */
/* Shared public event page + event-list card (W4 Phase 4c, P4c-B2). Class prefix .ep-, built on the
 * shop page's .sp- frame (pages/shop-page.css loads first). Source: packages/shared/src/events/ui/
 * event-page.css; npm run tokens copies it to apps/server/public/shared/pages/event-page.css.
 * Tokens only (var(--...)) and SOLID colours: no alpha mixes, so it holds up on /m. Layers come
 * from gradients between solid tokens, borders and box-shadow glows, not flat cards. */

.ep { min-width: 0; }
.ep-owner { align-items: center; }
.ep-owner__title { color: var(--gold); font: 800 14px/1.3 var(--head); }
.sp-chip--ban { border-color: var(--magenta); color: var(--text); background: var(--surface-2); }

/* ── hero ── */
.ep-hero__body { display: grid; gap: 10px; padding: 14px 16px 16px; min-width: 0; }
.ep-hero__shop { display: inline-flex; align-items: center; gap: 6px; justify-self: start; max-width: 100%; color: var(--cyan); font: 700 13px/1.3 var(--head); text-decoration: none; }
.ep-hero__shop span { min-width: 0; overflow-wrap: anywhere; }
.ep-hero__title { font: 900 clamp(22px, 5.5vw, 32px)/1.15 var(--display); overflow-wrap: anywhere; }
.ep-hero__about { color: var(--text); font-size: 14px; line-height: 1.6; white-space: pre-line; overflow-wrap: anywhere; }
.ep-hero__actions { align-items: center; }
.ep-hero__actions .sp-cta { flex: 1 1 260px; }

/* ── when ── */
.ep-when { display: flex; align-items: center; gap: 14px; min-width: 0; }
.ep-when .sp-ev__date { width: 60px; padding: 8px 0; }
.ep-when .sp-ev__date b { font-size: 24px; }
.ep-when__text { display: grid; gap: 4px; min-width: 0; }
.ep-when__main { font: 700 16px/1.35 var(--head); overflow-wrap: anywhere; }
.ep-when__sub { display: flex; align-items: center; gap: 6px; color: var(--text-dim); font-size: 13px; }

/* ── entry and prizes: ranked rows ── */
.ep-prizes { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.ep-prize { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border: 1px solid var(--surface-2); border-radius: 10px; background: var(--input); min-width: 0; }
.ep-prize__pl { flex: none; min-width: 44px; color: var(--gold); font: 800 13px/1.2 var(--head); text-align: center; }
.ep-prize__tx { min-width: 0; font-size: 14px; overflow-wrap: anywhere; }

/* ── sign up ── */
.ep-lead { margin-bottom: 10px; color: var(--chrome); font-size: 14px; }
.ep-hint { display: flex; align-items: center; gap: 6px; margin-top: 10px; color: var(--text-dim); font-size: 13px; }
.ep-sheet { display: grid; gap: 12px; margin-top: 14px; padding: 14px; border: 1px solid var(--cyan-dim); border-radius: 12px; background: linear-gradient(135deg, var(--surface-2), var(--input)); }
.ep-sheet[hidden] { display: none; }
.ep-field { display: grid; gap: 6px; color: var(--chrome); font: 700 12px/1.2 var(--head); letter-spacing: 0.04em; }
.ep-input { width: 100%; padding: 10px 12px; border: 1px solid var(--cyan-dim); border-radius: 10px; background: var(--input); color: var(--text); font: 400 14px/1.4 var(--body); resize: vertical; }
.ep-input:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; }
.ep-err { min-height: 0; color: var(--red); font-size: 13px; }
.ep-err:empty { display: none; }
.ep-reg { display: grid; gap: 8px; margin-top: 12px; padding: 14px; border: 1px solid var(--cyan-dim); border-radius: 12px; background: linear-gradient(135deg, var(--surface-2), var(--input)); }
.ep-reg--ok { border-color: var(--green-dim); }
.ep-reg--wait { border-color: var(--gold); }
.ep-reg--bad { border-color: var(--red); }
.ep-reg__title { font: 800 15px/1.3 var(--head); }
.ep-reg__text { color: var(--text-dim); font-size: 13px; }
.ep-reg .sp-btn { justify-self: start; }

/* ── location ── */
.ep-addr { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.ep-loc-actions { margin-top: 12px; }

/* ── schedule ── */
.ep-agenda { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ep-agenda__row { display: flex; gap: 12px; padding: 8px 12px; border: 1px solid var(--surface-2); border-radius: 10px; background: var(--input); min-width: 0; }
.ep-agenda__time { flex: none; min-width: 96px; color: var(--cyan); font: 700 13px/1.4 var(--mono); }
.ep-agenda__label { min-width: 0; font-size: 14px; overflow-wrap: anywhere; }

/* ── host ── */
.ep-host { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.ep-host__main { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 220px; color: var(--text); text-decoration: none; }
.ep-host__logo { position: relative; flex: none; width: 56px; height: 56px; border-radius: 14px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--surface-2); border: 1px solid var(--cyan-dim); }
.ep-host__logo .sp-img { position: absolute; inset: 0; }
.ep-host__meta { display: grid; gap: 2px; min-width: 0; }
.ep-host__name { font: 800 15px/1.25 var(--head); overflow-wrap: anywhere; }
.ep-host__sub { color: var(--text-dim); font-size: 12px; }
.ep-host__about { margin-top: 10px; color: var(--text-dim); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }

/* ── the one public event card (C30) ── */
.ep-cards { display: grid; gap: 10px; min-width: 0; }
.ep-card { display: flex; gap: 8px; align-items: stretch; min-width: 0; border: 1px solid var(--border-hi); border-radius: 14px; background: linear-gradient(135deg, var(--surface-2), var(--surface)); }
.ep-card__main { display: flex; flex: 1; align-items: center; gap: 12px; min-width: 0; padding: 12px; color: var(--text); text-decoration: none; }
.ep-card__date { align-self: flex-start; }
.ep-card__thumb { position: relative; flex: none; width: 72px; height: 72px; border-radius: 12px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--surface-2); border: 1px solid var(--cyan-dim); }
.ep-card__thumb .sp-img { position: absolute; inset: 0; }
.ep-card__body { display: grid; align-content: start; gap: 5px; min-width: 0; flex: 1; }
.ep-card__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 800 15px/1.25 var(--head); overflow-wrap: anywhere; }
.ep-card__shop, .ep-card__when { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--text-dim); font-size: 12px; }
.ep-card__shop span { min-width: 0; overflow-wrap: anywhere; }
.ep-card__act { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 8px; padding: 12px 12px 12px 0; }
.ep-card--compact .ep-card__thumb { display: none; }
.ep-card--compact .ep-card__main { padding: 10px; }
.ep-card--compact .ep-card__act { padding: 10px 10px 10px 0; }
.ep-heart { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--cyan-dim); border-radius: 10px; background: var(--input); color: var(--chrome); cursor: pointer; }
.ep-heart.on { border-color: var(--magenta); background: var(--magenta); color: var(--text); }
.ep-heart:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

@media (max-width: 520px) {
  .ep-when { gap: 10px; }
  .ep-agenda__row { flex-direction: column; gap: 2px; }
  .ep-card__thumb { width: 56px; height: 56px; }
}