/* ── Fonts ───────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Antonio:wght@400;700&family=Karla:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

/* ── Tokens ──────────────────────────────────────────────────────────────── */
:root {
  /* Brand colours (OKLCH — perceptually uniform) */
  --green:        oklch(59% 0.081 112);  /* #767B40 olive */
  --green-dark:   oklch(47% 0.065 112);
  --green-faint:  oklch(96% 0.016 112);
  --gold:         oklch(85% 0.17  88);
  --gold-dim:     oklch(74% 0.14  88);

  /* Surfaces */
  --bg:           oklch(98% 0.008 88);   /* warm cream — public pages   */
  --bg-admin:     oklch(93.5% 0.006 88); /* warm light grey — admin     */
  --surface:      oklch(99.5% 0.003 88); /* near-white cards            */
  --surface-2:    oklch(96.5% 0.005 88); /* table headers, alt rows     */

  /* Text */
  --text:         oklch(16% 0.015 112);
  --text-2:       oklch(38% 0.018 112);
  --text-3:       oklch(55% 0.013 112);

  /* Borders — warm buff to complement the olive */
  --border:       oklch(84% 0.025 90);
  --border-mid:   oklch(73% 0.032 90);

  /* Typography */
  --font-display: 'Antonio', sans-serif;
  --font-body:    'Karla', system-ui, sans-serif;

  /* Spacing — 4pt scale */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* Radius */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;

  /* Height to clear when something is stuck below the section-nav.
     ~52px of nav content + a few px breathing room. */
  --sticky-offset: 60px;
}

/* ── Reset & base ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  background: var(--bg-admin);
  color: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--green); }

/* ── Public pages ────────────────────────────────────────────────────────── */
body.public { background: var(--bg); }

/* Chromeless ?embed=1 mode — card + wallet badges only, for iframing on an
   external site. A fixed-width block centred with margin auto (the iframe is
   sized just wider than the card) — the most reliable centring, and it can't
   inherit the base .team-single 460px max-width that clipped the card. */
body.public.embed { background: transparent; }
/* body.-prefixed selectors: the embed margins must outrank the later
   .team-single .wallet-buttons rule (same specificity, later wins), or the
   base sp-6 top margin re-adds whitespace above the first element. Top
   margin is 0 so content starts flush at the top of the iframe. */
body.embed .team-single {
  width: 320px;
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  text-align: center;
}
body.embed .team-single__card-wrap { margin-top: 0; }
body.embed .wallet-buttons { margin-top: var(--sp-4); justify-content: center; }

/* Compact 50% variant (?embed=1&scale=half): a true miniature. The card's
   container units render it as a half-width card, and the two wallet badges are
   scaled to ~half too so they sit side by side beneath the 160px card rather
   than stacking — keeping the whole embed short. */
body.embed--half .team-single { width: 160px; }
body.embed--half .team-single__card-wrap .pass-card { width: 160px; }
body.embed--half .wallet-buttons { flex-wrap: nowrap; gap: var(--sp-2); }
body.embed--half .wallet-badge { height: 22px; }

/* Badges-above variant (?embed=1&badges=top; combinable with scale=half): the
   wallet buttons render above the card. order:-1 lifts them ahead of the card
   in the flex column; margin flips to sit below the buttons instead of above. */
body.embed--badges-top .team-single { display: flex; flex-direction: column; }
body.embed--badges-top .wallet-buttons { order: -1; margin: 0 0 var(--sp-4); }

/* Cropped variant (?embed=1&crop=1; combinable with badges=top / scale=half):
   drops the storeCard aspect-ratio so the card ends just below the Club/Season
   fields instead of reserving the real pass's empty lower region. The card's
   own border-radius + overflow:hidden keep the bottom corners rounded. */
body.embed--crop .pass-card:not(.pass-card--back) { aspect-ratio: auto; }
body.embed--crop .pass-card__body {
  flex: 0 0 auto;
  min-height: 0;
  padding-bottom: 12px;
  padding-bottom: 5.8cqw;
}

/* Site header */
.site-header {
  background: var(--green);
  color: oklch(97% 0.005 88);
  padding: var(--sp-8) var(--sp-4) var(--sp-6);
  text-align: center;
  position: relative;
  border-bottom: 4px solid var(--gold);
}

.site-header h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 7vw, 3.25rem);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--gold);
  line-height: 1.05;
}

.site-header .subtitle {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: oklch(80% 0.02 88);
  margin-top: var(--sp-2);
}

.back-link {
  position: absolute;
  top: var(--sp-4);
  left: var(--sp-4);
  color: oklch(75% 0.015 88);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: color 0.15s;
}

.back-link:hover { color: var(--gold); }

/* Team list — home page */
.team-list {
  max-width: 600px;
  margin: var(--sp-8) auto var(--sp-12);
  padding: 0 var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.team-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-5);
}

.team-card__preview {
  display: block;
  text-decoration: none;
  transition: transform 0.15s ease;
}
.team-card__preview:hover { transform: translateY(-2px); }
.team-card__preview:focus-visible {
  outline: 2px solid var(--accent, currentColor);
  outline-offset: 4px;
  border-radius: 12px;
}
.team-card .pass-card { width: 320px; }

/* Single team page */
.team-single {
  max-width: 460px;
  margin: var(--sp-8) auto var(--sp-12);
  padding: 0 var(--sp-4);
  text-align: center;
}

.team-single__card-wrap {
  display: flex;
  justify-content: center;
  margin-top: var(--sp-6);
}

/* Public page renders the same .pass-card markup the admin previews, but
   larger so it reads as the hero artwork. The admin preview is 240px; here
   we scale to 320px while keeping the same proportions. */
.team-single__card-wrap .pass-card {
  width: 320px;
}

.team-single .wallet-buttons {
  justify-content: center;
  margin-top: var(--sp-6);
}

.expiry-note {
  color: var(--text-3);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: var(--sp-5);
}

/* Soft-launch landing page (domain root) — features the primary card. Reuses
   .pass-card / .wallet-buttons; adds intro copy, sponsor credit and footer. */
.landing {
  max-width: 460px;
  margin: var(--sp-10) auto var(--sp-12);
  padding: 0 var(--sp-4);
  text-align: center;
}
.landing-intro { margin-bottom: var(--sp-8); }
.landing-intro__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 5vw, 2rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--green-dark);
}
.landing-intro__lead {
  margin-top: var(--sp-3);
  color: var(--text-2);
  font-size: 1.02rem;
  line-height: 1.55;
}
.landing .wallet-buttons { justify-content: center; margin-top: var(--sp-6); }
.landing-sponsor {
  margin-top: var(--sp-10);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--border);
}
.landing-sponsor__label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}
.landing-sponsor__name {
  display: inline-block;
  margin-top: var(--sp-2);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--green-dark);
  text-decoration: none;
}
a.landing-sponsor__name:hover { text-decoration: underline; }
.landing-footer {
  text-align: center;
  padding: var(--sp-8) var(--sp-4) var(--sp-12);
  color: var(--text-3);
  font-size: 0.88rem;
}
.landing-footer a { font-weight: 600; }
.landing-footer__fine { margin-top: var(--sp-2); font-size: 0.78rem; }

/* Wallet buttons */
.wallet-buttons {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  flex-wrap: wrap;
}

.wallet-buttons.android-first { flex-direction: row-reverse; }
.btn-apple, .btn-google { display: inline-flex; text-decoration: none; transition: opacity 0.15s; }
.btn-apple:hover, .btn-google:hover { opacity: 0.8; }
.wallet-badge { height: 44px; width: auto; display: block; }

.empty {
  text-align: center;
  color: var(--text-3);
  padding: var(--sp-12) var(--sp-4);
  font-size: 0.9rem;
}

/* ── Admin ───────────────────────────────────────────────────────────────── */
body.admin { background: var(--bg-admin); }

/* Nav */
.admin-nav {
  background: var(--green);
  color: oklch(97% 0.005 88);
  padding: var(--sp-3) var(--sp-6);
  border-bottom: 3px solid var(--gold);
}

.nav-links {
  display: flex;
  gap: var(--sp-6);
  align-items: center;
  flex-wrap: wrap;
}

.nav-links a {
  color: oklch(88% 0.012 88);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: color 0.15s;
}

.nav-links a:hover { color: var(--gold); }
.nav-links a.is-active { color: var(--gold); }
.nav-links a.is-active::after {
  content: '';
  display: block;
  height: 2px;
  background: var(--gold);
  margin-top: 2px;
  border-radius: 1px;
}

.nav-logout-form { margin: 0; padding: 0; display: inline; }
.nav-logout {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  color: oklch(88% 0.012 88);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: color 0.15s;
}
.nav-logout:hover { color: var(--gold); }

.nav-user { font-weight: 400; opacity: 0.75; }

/* Main content */
.admin-main {
  max-width: 900px;
  margin: var(--sp-8) auto;
  padding: 0 var(--sp-4) var(--sp-16);
}

/* ── Section nav (per-page chips on team-edit) ────────────────────────────── */
.section-nav__sentinel { height: 1px; margin: 0; }

.section-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
  margin: 0 calc(var(--sp-4) * -1) var(--sp-6);
  padding: var(--sp-2) var(--sp-4);
  background: var(--bg-admin);
  border-bottom: 1px solid transparent;
  transition: box-shadow 0.18s, border-color 0.18s, background 0.18s;
  flex-wrap: wrap;
}
.section-nav.is-stuck {
  background: var(--surface);
  border-bottom-color: var(--border);
  box-shadow: 0 4px 12px oklch(0% 0 0 / 0.06);
}

.section-nav__list {
  display: flex;
  gap: var(--sp-1);
  list-style: none;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
}
.section-nav__list a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-2);
  text-decoration: none;
  transition: background 0.12s, color 0.12s;
}
.section-nav__list a:hover { background: var(--surface-2); color: var(--text); }
.section-nav__list a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px oklch(59% 0.081 112 / 0.25);
}
.section-nav__danger { color: oklch(40% 0.18 25) !important; }
.section-nav__danger:hover { background: oklch(92% 0.08 25) !important; }

.section-nav__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1;
}
.section-nav__badge.is-ok   { background: oklch(82% 0.12 145); color: oklch(28% 0.10 145); }
.section-nav__badge.is-warn { background: oklch(86% 0.13 65);  color: oklch(35% 0.15 65); }

.section-nav__pending {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: 999px;
  background: oklch(92% 0.09 75);
  color: oklch(35% 0.14 65);
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.12s;
}
.section-nav__pending:hover { background: oklch(88% 0.13 75); color: oklch(28% 0.16 65); }
.section-nav__pending-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: oklch(55% 0.17 50);
  animation: section-nav-pulse 1.6s ease-in-out infinite;
}
@keyframes section-nav-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

/* Smooth jumps + keep targets clear of the sticky bar */
html { scroll-behavior: smooth; }
:target { scroll-margin-top: var(--sticky-offset); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .section-nav__pending-dot { animation: none; }
  .section-nav { transition: none; }
}

.admin-main h1 {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: var(--sp-6);
  line-height: 1.1;
}

.admin-main h2 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: var(--sp-4);
}

/* Sections */
.admin-section {
  background: var(--surface);
  border-radius: var(--r-md);
  padding: var(--sp-6);
  margin-bottom: var(--sp-6);
  box-shadow: 0 1px 4px oklch(0% 0 0 / 0.06);
}

.admin-section h2 {
  border-bottom: 1px solid var(--border);
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-5);
}

.config-summary {
  background: var(--surface);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-6);
  font-size: 0.875rem;
  box-shadow: 0 1px 4px oklch(0% 0 0 / 0.06);
  color: var(--text-2);
}

.config-summary strong { color: var(--text); }
.config-summary .link-edit { margin-left: var(--sp-3); font-size: 0.8rem; }

/* ── Forms ───────────────────────────────────────────────────────────────── */
.admin-form { display: flex; flex-direction: column; gap: var(--sp-4); }

.form-subhead {
  margin: var(--sp-6) 0 var(--sp-3);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-2);
  letter-spacing: 0.02em;
}
.form-subhead:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.admin-form label {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
}

.admin-form label .lbl { display: block; }
.admin-form label small { display: block; font-weight: 400; color: var(--text-3); font-size: 0.78rem; margin-top: 2px; }

.field-wrap { display: flex; flex-direction: column; gap: var(--sp-1); }

.field-hint {
  font-size: 0.75rem;
  color: var(--text-3);
  line-height: 1.4;
  margin: 0;
}
.field-hint code {
  font-family: ui-monospace, monospace;
  font-size: 0.7rem;
  background: oklch(91% 0.008 88);
  padding: 0 3px;
  border-radius: 2px;
  color: var(--text);
}

.tag-req, .tag-opt, .tag-apple, .tag-google {
  display: inline-block;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 3px;
  vertical-align: middle;
  margin-left: 3px;
}
.tag-req    { background: oklch(59% 0.081 112 / 0.12); color: var(--green-dark, var(--green)); }
.tag-opt    { background: oklch(50% 0 0 / 0.07); color: var(--text-3); }
.tag-apple  { background: oklch(50% 0.06 260 / 0.12); color: oklch(35% 0.08 260); }
.tag-google { background: oklch(52% 0.12 25 / 0.12);  color: oklch(38% 0.14 25); }

.admin-form input[type=text],
.admin-form input[type=email],
.admin-form input[type=number],
.admin-form input[type=date],
.admin-form input[type=password],
.admin-form textarea,
.admin-form select {
  padding: var(--sp-2) var(--sp-3);
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: 0.9rem;
  width: 100%;
  background: var(--surface);
  color: var(--text);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.admin-form input:focus,
.admin-form textarea:focus,
.admin-form select:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px oklch(59% 0.081 112 / 0.12);
}

.checkbox-label { flex-direction: row !important; align-items: flex-start; gap: var(--sp-2) !important; font-weight: 400 !important; }

@media (min-width: 640px) {
  .admin-form label { flex-direction: row; align-items: flex-start; gap: var(--sp-4); }
  .admin-form label .lbl { width: 170px; min-width: 170px; text-align: right; padding-top: 0.45rem; }
  .admin-form label > input,
  .admin-form label > textarea,
  .admin-form label > select,
  .admin-form label > .colour-group,
  .admin-form label > .field-wrap { flex: 1; min-width: 0; }
  .admin-form label input[type=file] { padding-top: 0.35rem; }
  .checkbox-label { align-items: flex-start !important; }
  .checkbox-label .lbl { padding-top: 0.2rem !important; }
  .admin-form > button[type=submit],
  .admin-form > .btn-cancel { margin-left: calc(170px + var(--sp-4)); }
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
button[type=submit] {
  background: var(--green);
  color: oklch(98% 0.004 88);
  border: none;
  padding: var(--sp-2) var(--sp-6);
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  align-self: flex-start;
  transition: background 0.15s;
}

button[type=submit]:hover { background: var(--green-dark); }
button:disabled { background: var(--border); color: var(--text-3); cursor: not-allowed; }

/* Floating save bar — appears only while the Details form is dirty and its
   real Save button is out of view (managed by team-edit.js). */
.save-bar[hidden] { display: none; } /* display:flex below would otherwise defeat the hidden attribute */
.save-bar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 60; /* above the sticky section-nav (50), below the card modal (1000) */
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-6);
  padding-bottom: max(var(--sp-3), env(safe-area-inset-bottom));
  background: var(--surface);
  border-top: 1px solid var(--border);
  box-shadow: 0 -4px 16px oklch(20% 0.02 90 / 0.08);
}
.save-bar__msg {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-3);
}

.btn-cancel {
  color: var(--text-3);
  text-decoration: none;
  padding: var(--sp-2) var(--sp-2);
  font-size: 0.875rem;
  font-weight: 500;
}

.btn-primary {
  display: inline-block;
  background: var(--green);
  color: oklch(98% 0.004 88);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-sm);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: var(--sp-4);
  transition: background 0.15s;
}

.btn-primary:hover { background: var(--green-dark); color: oklch(98% 0.004 88); }

.btn-danger {
  background: oklch(42% 0.18 25);
  color: oklch(98% 0.004 88);
  border: none;
  padding: var(--sp-2) var(--sp-6);
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-danger:hover { background: oklch(33% 0.15 25); }

.btn-danger-sm {
  background: none;
  border: 1.5px solid oklch(55% 0.18 25);
  color: oklch(40% 0.18 25);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-sm);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: background 0.15s, color 0.15s;
}

.btn-danger-sm:hover { background: oklch(42% 0.18 25); color: oklch(98% 0.004 88); border-color: transparent; }

.user-delete__confirm { display: flex; gap: var(--sp-2); align-items: center; font-size: 0.82rem; }
.user-delete__confirm strong { color: var(--text); }

.colour-group { display: flex; gap: var(--sp-2); align-items: center; }
.colour-group input[type=text] { flex: 1; }

.colour-picker {
  width: 38px;
  height: 36px;
  padding: 2px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  cursor: pointer;
  flex-shrink: 0;
}

.btn-preview {
  display: inline-block;
  background: var(--green);
  color: oklch(98% 0.004 88);
  padding: var(--sp-1) var(--sp-4);
  border-radius: var(--r-sm);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: background 0.15s;
}

.btn-preview:hover { background: var(--green-dark); }

/* ── Tables ──────────────────────────────────────────────────────────────── */
.admin-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: 0 1px 4px oklch(0% 0 0 / 0.06);
  margin-bottom: var(--sp-6);
}

.admin-table th,
.admin-table td {
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  border-bottom: 1px solid var(--border);
  font-size: 0.875rem;
}

.admin-table tr:last-child td { border-bottom: none; }

.admin-table th {
  background: var(--surface-2);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-2);
}

.image-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }

.image-table th,
.image-table td {
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.image-table th {
  background: var(--surface-2);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-2);
}

.image-row--error td { background: oklch(96% 0.035 25); }
.image-row__error {
  margin-top: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  background: oklch(91% 0.08 25);
  color: oklch(30% 0.16 25);
  font-size: 0.78rem;
  line-height: 1.4;
  max-width: 320px;
}

.thumb { height: 40px; border-radius: var(--r-sm); display: block; }
.thumb-wrap {
  display: inline-block;
  padding: 4px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  line-height: 0;
}

/* Inline forms */
.inline-form { display: flex; gap: var(--sp-2); align-items: center; }

.inline-form input {
  padding: var(--sp-1) var(--sp-3);
  font-size: 0.82rem;
  font-family: var(--font-body);
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
}

/* ── Badges ──────────────────────────────────────────────────────────────── */
.badge {
  display: inline-block;
  padding: 2px var(--sp-2);
  border-radius: var(--r-sm);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.badge.active  { background: oklch(90% 0.06 112); color: oklch(28% 0.08 112); }
.badge.inactive { background: var(--surface-2); color: var(--text-3); }
.badge.warn    { background: oklch(92% 0.09 88); color: oklch(40% 0.13 65); }

/* ── Alerts ──────────────────────────────────────────────────────────────── */
.alert {
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-sm);
  margin-bottom: var(--sp-4);
  font-size: 0.875rem;
  font-weight: 500;
}

.alert-success { background: oklch(90% 0.06 112); color: oklch(26% 0.08 112); }
.alert-error   { background: oklch(91% 0.08 25);  color: oklch(30% 0.16 25); }

/* ── Login ───────────────────────────────────────────────────────────────── */
body.login-page {
  background: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.login-box {
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: var(--sp-8);
  width: 100%;
  max-width: 360px;
  box-shadow: 0 12px 48px oklch(0% 0 0 / 0.28);
}

.login-box h1 {
  font-family: var(--font-display);
  color: var(--green);
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: var(--sp-1);
}

.login-box h2 {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 500;
  text-align: center;
  color: var(--text-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: var(--sp-6);
}

.login-box form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.login-box label {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-2);
}

.login-box input[type=text],
.login-box input[type=password] {
  padding: var(--sp-2) var(--sp-3);
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: 0.95rem;
  background: var(--surface);
  color: var(--text);
  width: 100%;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.login-box input:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px oklch(59% 0.081 112 / 0.12);
}

.login-box button[type=submit] {
  width: 100%;
  justify-content: center;
  margin-top: var(--sp-2);
  padding: var(--sp-3) var(--sp-6);
  font-size: 0.9rem;
}

/* ── Misc ────────────────────────────────────────────────────────────────── */
.cert-status { margin-bottom: var(--sp-4); font-size: 0.875rem; }

.cert-sharing-notice {
  margin: 0 0 var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: oklch(97% 0.04 88);
  border-radius: 8px;
  font-size: 0.875rem;
  line-height: 1.45;
  color: oklch(35% 0.08 65);
}
.cert-sharing-notice .badge { margin-right: var(--sp-2); }

.public-links {
  margin-bottom: var(--sp-6);
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
  align-items: center;
  font-size: 0.875rem;
}

/* ── Share & Embed page (public, /share/{id}) ────────────────────────────── */
.share-page {
  max-width: 1040px;
  margin: var(--sp-8) auto var(--sp-12);
  padding: 0 var(--sp-4);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  align-items: start;
}
/* Two columns once there's room; snippets are ordered so similar-height cards
   pair up per row (compact+compact-above, full+full-above). minmax(0,1fr)
   stops long code strings from blowing the columns out. */
@media (min-width: 820px) {
  .share-page { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Intro line and the trailing "Google coming soon" note span the full width. */
.share-page > .hint,
.share-page > .field-hint { grid-column: 1 / -1; }
.share-page > .hint { color: var(--text-2); font-size: 0.9rem; }
/* Grid gap handles spacing between snippets now (was margin-top). */
.snippet { margin-top: 0; }
.snippet__label { font-weight: 600; font-size: 0.875rem; }
.snippet__preview {
  margin-top: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border: 1px dashed var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  font-size: 0.875rem;
}
/* The iframe embed preview is the real page — cap it and let it scroll. */
.snippet__preview--frame {
  display: block;
  /* Roomy enough to show the full 560px embed preview without cropping it
     (was 420px, which clipped the card). Taller embeds still scroll. */
  max-height: 620px;
  overflow: auto;
}
.snippet__row { display: flex; gap: var(--sp-2); align-items: flex-start; margin-top: var(--sp-2); }
.snippet__row textarea {
  flex: 1;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8rem;
  line-height: 1.5;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--text);
  resize: vertical;
  white-space: pre-wrap;
  word-break: break-all;
}
.btn-copy {
  background: var(--surface);
  color: var(--text-2);
  border: 1px solid var(--border);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.btn-copy:hover { background: var(--surface-2); color: var(--text); }

/* Button styled as a small inline text link (e.g. "Use stored Greengate lat/long") */
.btn-inline-link {
  background: none;
  border: none;
  padding: 0;
  margin-top: var(--sp-2);
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--green);
  text-decoration: underline;
  cursor: pointer;
}
.btn-inline-link:hover { color: var(--green-dark); }
.btn-copy:disabled { background: var(--surface-2); color: var(--green); border-color: var(--border); cursor: default; }

.danger-zone { border: 1px solid oklch(80% 0.1 25); }

/* Collapsible Danger Zone — keeps the destructive action out of the way
   until the admin deliberately reveals it. */
.danger-zone--collapsible { padding: 0; }
.danger-zone--collapsible[open] { padding: var(--sp-6); padding-top: 0; }
.danger-zone__summary {
  list-style: none;                 /* drop the default triangle in WebKit */
  cursor: pointer;
  padding: var(--sp-4) var(--sp-6);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: oklch(40% 0.18 25);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  user-select: none;
}
.danger-zone__summary::-webkit-details-marker { display: none; }
.danger-zone__summary::before {
  content: '▸';
  font-size: 0.8em;
  transition: transform 0.15s ease;
  display: inline-block;
}
.danger-zone[open] .danger-zone__summary::before { transform: rotate(90deg); }
.danger-zone__summary:hover { color: oklch(33% 0.18 25); }
.danger-zone__summary:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 3px oklch(55% 0.18 25 / 0.25);
  border-radius: var(--r-md);
}
.danger-zone[open] .danger-zone__summary {
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--sp-4);
}
.hint { color: var(--text-3); font-size: 0.78rem; margin-top: var(--sp-2); }

/* Reorder buttons (dashboard team list) */
.col-order { width: 56px; white-space: nowrap; }

.btn-reorder {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  width: 26px;
  height: 26px;
  cursor: pointer;
  font-size: 0.8rem;
  color: var(--text-2);
  line-height: 1;
  padding: 0;
  transition: background 0.12s, color 0.12s;
}

.btn-reorder:hover:not(:disabled) { background: var(--surface-2); color: var(--text); }
.btn-reorder:disabled { opacity: 0.25; cursor: default; }

/* ── Push panel (pass updates) ───────────────────────────────────────────── */
.push-panel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-6);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.push-panel--dirty {
  background: oklch(96% 0.04 75);
  border-color: oklch(75% 0.12 75);
}
.push-panel__main { display: flex; flex-direction: column; gap: var(--sp-1); }
.push-panel__status { display: flex; flex-direction: column; gap: 2px; }
.push-panel__status strong { font-size: 0.95rem; }
.push-panel__pending { color: oklch(45% 0.16 50); }
.push-panel__hint { font-size: 0.8rem; color: var(--text-3); }
.push-panel__counts { font-size: 0.78rem; color: var(--text-2, var(--text-3)); }
.btn-push {
  background: transparent;
  color: var(--green-dark);
  border: 2px solid var(--green);
  padding: calc(var(--sp-3) - 2px) var(--sp-5);
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.btn-push:hover:not(:disabled) { background: var(--green); color: oklch(98% 0.004 88); }
.btn-push:disabled { opacity: 0.4; cursor: not-allowed; }
.push-panel--dirty .btn-push {
  /* When changes are pending, draw more attention to the action */
  background: var(--green);
  color: oklch(98% 0.004 88);
}
.push-panel--dirty .btn-push:hover:not(:disabled) { background: var(--green-dark); }

/* ── Venue row ───────────────────────────────────────────────────────────── */
.field-group {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-5);
  margin: 0;
}
.field-group legend { padding: 0 var(--sp-2); font-weight: 600; }
.venue-row { display: flex; gap: var(--sp-4); }
.venue-row label { flex: 1; min-width: 0; }
.venue-row input { width: 100%; }
.coord-input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* Inside fieldsets (Venue location, iBeacon, Contact, Website), the labels
   should stack (lbl on top, input below) instead of using the global
   170px-label-on-the-left layout from the desktop breakpoint. */
.field-group label,
.field-group > div > label {
  flex-direction: column !important;
  align-items: stretch !important;
  gap: var(--sp-1) !important;
}
.field-group .lbl {
  width: auto !important;
  min-width: 0 !important;
  text-align: left !important;
  padding-top: 0 !important;
}

.field-counter {
  display: block;
  font-size: 0.7rem;
  color: var(--text-3);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.field-counter--near { color: oklch(40% 0.13 65); font-weight: 600; }

.uuid-group { display: flex; gap: var(--sp-3); align-items: center; }
.uuid-group input { flex: 1; }
.btn-generate-uuid {
  flex-shrink: 0;
  padding: 0 var(--sp-4);
  height: 38px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
}
.btn-generate-uuid:hover { background: var(--surface-3, var(--surface-2)); }

/* ── Card preview ────────────────────────────────────────────────────────── */
.details-with-preview {
  display: flex;
  gap: var(--sp-8);
  align-items: flex-start;
}

.details-with-preview .admin-form { flex: 1; min-width: 0; }

.pass-preview-panel { flex-shrink: 0; width: 240px; }
.pass-preview-col { display: block; }
.pass-preview-col--back { margin-top: var(--sp-5); }

@media (min-width: 900px) {
  .pass-preview-panel {
    position: sticky;
    /* Sits below the sticky section-nav so it doesn't get clipped */
    top: var(--sticky-offset);
    align-self: flex-start;
  }
}

/* Wide viewports — place the Back card beside Front + Apple Watch so a tall
   Back doesn't push the sticky panel off-screen. The notification row spans
   both columns below them. Page max-width widens so the form doesn't get
   squeezed. */
@media (min-width: 1200px) {
  .admin-main:has(.pass-preview-col--back) { max-width: 1120px; }
  .pass-preview-panel {
    width: auto;
    display: grid;
    grid-template-columns: 240px 240px;
    column-gap: var(--sp-6);
    row-gap: var(--sp-5);
    align-items: flex-start;
  }
  .pass-preview-col--main { grid-column: 1; }
  .pass-preview-col--back { grid-column: 2; margin-top: 0; }
  .pass-preview-row      { grid-column: 1 / -1; }
}

.pass-preview-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: var(--sp-2);
}

/* ── Platform tabs (team edit: Shared / Apple Wallet / Google Wallet) ────────
   A single data-active attribute on #details drives which panes show, via the
   ~= attribute selector (data-platform is a space-separated list). */
.platform-tabs {
  display: flex;
  gap: var(--sp-1);
  margin-bottom: var(--sp-5);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.platform-tab {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: var(--sp-2) var(--sp-4);
  font: inherit;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-3);
  cursor: pointer;
}
.platform-tab:hover { color: var(--text); }
.platform-tab.is-active { color: var(--text); border-bottom-color: var(--green); }
.platform-tab:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 4px; }

.admin-main .tab-pane { display: none; }
.admin-main[data-active="shared"] .tab-pane[data-platform~="shared"],
.admin-main[data-active="apple"]  .tab-pane[data-platform~="apple"],
.admin-main[data-active="google"] .tab-pane[data-platform~="google"] { display: block; }
/* Nav links are flex/list items — restore that when shown, not block. */
.admin-main[data-active="apple"]  .section-nav__list .tab-pane[data-platform~="apple"],
.admin-main[data-active="google"] .section-nav__list .tab-pane[data-platform~="google"] { display: list-item; }

/* Collapse the (empty) Back column when its Apple preview isn't showing. */
.admin-main[data-active="shared"] .pass-preview-col--back,
.admin-main[data-active="google"] .pass-preview-col--back { display: none; }
@media (min-width: 1200px) {
  .admin-main[data-active="shared"] .pass-preview-panel,
  .admin-main[data-active="google"] .pass-preview-panel { grid-template-columns: 240px; }
}

/* ── Google Wallet card preview ─────────────────────────────────────────────
   Mirrors Google's generic-pass layout: solid background, circular logo, small
   title, optional subheader, bold header, optional hero banner. Text colour
   comes from --g-card-text (luminance-based, set in PHP + refreshed in JS). */
.g-card {
  width: 240px;
  box-sizing: border-box;
  border-radius: 16px;
  background: var(--card-bg, #1a237e);
  color: var(--g-card-text, #fff);
  padding: 16px;
  box-shadow: 0 4px 20px oklch(0% 0 0 / 0.2);
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.g-card__head { display: flex; align-items: center; gap: 10px; }
.g-card__logo {
  width: 32px; height: 32px; flex: 0 0 auto;
  border-radius: 50%; background: #fff; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.g-card__logo img { width: 80%; height: 80%; object-fit: contain; }
.g-card__title { font-size: 0.82rem; font-weight: 500; line-height: 1.25; }
.g-card__subheader { font-size: 0.8rem; opacity: 0.85; margin-top: 14px; }
.g-card__subheader[hidden] { display: none; }
.g-card__header { font-size: 1.28rem; font-weight: 500; line-height: 1.25; margin-top: 14px; }
/* When the subheader is visible, tighten the gap to the header below it. */
.g-card__subheader:not([hidden]) + .g-card__header { margin-top: 4px; }
.g-card__hero { margin-top: 16px; }
.g-card__hero img { display: block; width: 100%; border-radius: 8px; }

.pass-card {
  background: var(--card-bg, #006400);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px oklch(0% 0 0 / 0.2);
  width: 240px;
  text-align: left;
  /* Query container so the card's inner text/logo/padding can scale with the
     card's width (cqw units below). Without this they'd stay fixed px/rem and
     look tiny whenever the card renders larger than its 240px design width
     (the zoom view, the 320px public cards). Real Wallet scales everything
     together. Existing px/rem values remain as fallbacks for old browsers. */
  container-type: inline-size;
}

.pass-card:not(.pass-card--back) {
  display: flex;
  flex-direction: column;
  /* Match a real Apple Wallet storeCard's tall proportion at any width —
     the body (flex: 1) absorbs the empty region below the primary fields
     that the pass reserves. */
  aspect-ratio: 1 / 1.42;
}

.pass-card__strip { flex-shrink: 0; }
.pass-card__strip img { width: 100%; display: block; }

.pass-card__strip-placeholder {
  width: 100%;
  aspect-ratio: 375 / 123;
  background: oklch(0% 0 0 / 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  font-size: 4.6cqw;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--card-fg, #ffd700);
  opacity: 0.5;
}

.pass-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  gap: 3.8cqw;
  padding: 8px 10px 6px;
  padding: 3.8cqw 4.8cqw 2.9cqw;
  min-height: 34px;
  min-height: 16.3cqw;
  flex-shrink: 0;
}

.pass-card__logo-img {
  height: 22px;
  height: 10.6cqw;
  width: auto;
  max-width: 60%;
  object-fit: contain;
  flex-shrink: 0;
}

.pass-card__logo-text-label {
  font-size: 0.55rem;
  font-size: 4.3cqw;
  font-weight: 700;
  color: var(--card-lbl, var(--card-fg, #ffd700));
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
  text-align: center;
}
/* When a header field OR logo image is shown, the logo text aligns left to make room */
.pass-card__header:has(.pass-card__header-field:not([hidden])) .pass-card__logo-text-label,
.pass-card__header:has(.pass-card__logo-img) .pass-card__logo-text-label {
  text-align: left;
}

.pass-card__header-field {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex-shrink: 0;
  max-width: 50%;
}
.pass-card__header-field[hidden] { display: none; }
.pass-card__header-field[data-align="PKTextAlignmentLeft"]    { text-align: left;   }
.pass-card__header-field[data-align="PKTextAlignmentCenter"]  { text-align: center; }
.pass-card__header-field[data-align="PKTextAlignmentRight"]   { text-align: right;  }
.pass-card__header-field[data-align="PKTextAlignmentNatural"] { text-align: end;    }

.pass-card__header-field-label {
  display: block;
  font-size: 0.42rem;
  font-size: 3.7cqw;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--card-lbl, var(--card-fg, #ffd700));
  opacity: var(--card-lbl-opacity, 0.65);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pass-card__header-field-value {
  display: block;
  font-size: 0.62rem;
  font-size: 4.7cqw;
  font-weight: 600;
  color: var(--card-fg, #ffd700);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* flex: 1 lets the body fill the aspect-ratio slack (see .pass-card above),
   reserving the empty region below the fields like the real pass. */
.pass-card__body { padding: 12px 12px 0; padding: 5.8cqw 5.8cqw 0; flex: 1 1 auto; min-height: 120px; }

.pass-card__fields { display: flex; gap: 10px; gap: 4.8cqw; }

.pass-card__field--club {
  flex: 1;
  min-width: 0;
}
.pass-card__field--club .pass-card__value {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pass-card__field { display: flex; flex-direction: column; gap: 2px; }

.pass-card__label {
  font-size: 0.48rem;
  font-size: 3.7cqw;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--card-lbl, var(--card-fg, #ffd700));
  opacity: var(--card-lbl-opacity, 0.65);
}

.pass-card__value {
  font-size: 0.78rem;
  font-size: 6cqw;
  font-weight: 600;
  color: var(--card-fg, #ffd700);
}

.pass-card--back {
  background: oklch(99% 0.004 88);
  border: 1px solid var(--border);
  box-shadow: 0 2px 8px oklch(0% 0 0 / 0.07);
}

.pass-card__back-fields {
  padding: 10px 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pass-card__back-field { display: flex; flex-direction: column; gap: 1px; }
.pass-card__back-field[hidden] { display: none; }

.pass-card__back-label {
  font-size: 0.55rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--text-3);
}

.pass-card__back-value {
  font-size: 0.62rem;
  font-weight: 500;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
}
.pass-card__back-value--link {
  color: oklch(55% 0.18 245);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Apple Watch preview ─────────────────────────────────────────────────── */
/* Layered structure mirrors what Apple Wallet actually shows on Watch when
   the pass is opened: thin black case → black OLED screen → blue team card
   floating in the middle → repeated header field below it on the watch face. */
.pass-card--watch {
  /* Override base .pass-card */
  width: 168px;
  background: #1a1a1a;          /* watch case */
  border-radius: 28px;
  padding: 6px;
  overflow: hidden;
  box-shadow: 0 4px 20px oklch(0% 0 0 / 0.25);
}
.pass-card--watch__screen {
  background: #000;             /* OLED off-pixel black */
  border-radius: 22px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 196px;
  padding: 4px 4px 8px;
}
.pass-card--watch__status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 6px 6px;
  flex-shrink: 0;
}
.pass-card--watch__close {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: oklch(100% 0 0 / 0.18);
  color: #fff;
  font-size: 9px;
  line-height: 1;
  font-weight: 400;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pass-card--watch__time {
  font-size: 0.6rem;
  font-weight: 700;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.pass-card--watch__card {
  background: var(--card-bg, #006400);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}
.pass-card--watch__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: 5px 6px 3px;
  min-height: 18px;
  flex-shrink: 0;
}
.pass-card--watch__logo {
  height: 14px;
  width: auto;
  max-width: 40%;
  object-fit: contain;
  flex-shrink: 0;
}
.pass-card--watch__header-value {
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--card-fg, #fff);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Strip area — container is deliberately *shorter* than the source image's
   natural rendered height at the card's width, so the surplus is clipped by
   overflow:hidden. We anchor the image to the bottom (flex-end) because
   Apple Watch crops more aggressively from the TOP of the strip, leaving
   any wordmark in the bottom band fully visible. */
.pass-card--watch__strip {
  height: 26px;
  margin: 8px 0 2px;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
}
.pass-card--watch__strip img {
  width: 100%;
  height: 100%;
  /* object-fit: cover scales the image to fill the wider/shorter container.
     Source aspect (3.05:1) is narrower than container aspect (~4.2:1) so the
     image scales to fit width and overflows vertically. object-position
     biases the visible window toward the BOTTOM of the source — most of the
     crop comes off the TOP, matching Apple Watch's behaviour where wordmarks
     in the lower band stay visible. */
  object-fit: cover;
  object-position: 50% 53%;
  display: block;
}
.pass-card--watch__strip-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--card-fg, #ffd700);
  opacity: 0.5;
}
.pass-card--watch__primary {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 5px 8px 7px;
  flex-shrink: 0;
}
.pass-card--watch__primary .pass-card__label {
  font-size: 0.42rem;
}
.pass-card--watch__primary .pass-card__value {
  font-size: 0.7rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Header field repeated below the card on the watch face — Apple Wallet
   surfaces the header label + value here when you tap the pass open. */
.pass-card--watch__extra {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 8px 4px 0;
  flex-shrink: 0;
}
.pass-card--watch__extra-label {
  font-size: 0.46rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /* Below-card field labels on Apple Watch render in a neutral system grey,
     not the team's label colour (which is only used on the card face). */
  color: oklch(68% 0 0);
}
.pass-card--watch__extra-value {
  font-size: 0.74rem;
  font-weight: 600;
  color: #fff;                  /* on the watch face, system uses white for the value */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 767px) {
  .details-with-preview { flex-direction: column-reverse; }
  .pass-preview-panel { width: 100%; }
  .pass-card { width: 260px; margin: 0 auto; }
}

/* ── Card preview lightbox ──────────────────────────────────────────────── */
.pass-preview-panel .pass-card {
  cursor: zoom-in;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.pass-preview-panel .pass-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px oklch(0% 0 0 / 0.3);
}

/* ── Lock-screen notification preview ────────────────────────────────────
   iOS-style banner sized to match the lock-screen banner on a recent iPhone
   Pro (~390pt screen width minus ~16pt margins each side). Rounded white
   pill with app icon left, two-line text centre, mini pass thumbnail right. */
.pass-preview-row { width: 100%; }

.lock-notif {
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  background: oklch(99% 0.002 250 / 0.92);
  border-radius: 22px;
  box-shadow:
    0 1px 0 oklch(100% 0 0 / 0.4) inset,
    0 8px 24px oklch(0% 0 0 / 0.18);
  padding: 12px 14px 12px 12px;
  display: grid;
  grid-template-columns: 44px 1fr 50px;
  gap: 12px;
  align-items: center;
  color: oklch(20% 0.01 250);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  backdrop-filter: blur(8px);
}
.lock-notif[hidden] { display: none; }

.lock-notif__icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: oklch(94% 0.005 250);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lock-notif__icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lock-notif__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lock-notif__title {
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lock-notif__text {
  font-size: 0.88rem;
  font-weight: 400;
  line-height: 1.25;
  color: oklch(30% 0.01 250);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lock-notif__thumb {
  width: 50px;
  height: 64px;
  border-radius: 7px;
  background: var(--card-bg, oklch(40% 0.04 250));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 1px 2px oklch(0% 0 0 / 0.15);
}
.lock-notif__thumb-icon {
  width: 26px;
  height: 26px;
  border-radius: 5px;
  object-fit: cover;
}
/* JS replaces the thumb's icon with a scaled clone of the live front card
   (mirroring how iOS builds the real notification thumbnail). */
.lock-notif__thumb { position: relative; }
.lock-notif__thumb-mini {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: top left;
  pointer-events: none; /* not the zoomable card — just a picture of it */
}
.pass-preview-panel .lock-notif__thumb-mini.pass-card,
.pass-preview-panel .lock-notif__thumb-mini.pass-card:hover {
  cursor: default;
  box-shadow: none;
}

/* ── Android (Google Wallet) lock-screen notification preview ─────────────
   Material-You-flavoured card: thumbnail on the LEFT (opposite of iOS),
   chip row showing app name + time, then bigger title + subtitle. */
.g-notif {
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  background: oklch(98% 0.005 250 / 0.95);
  border-radius: 26px;
  box-shadow:
    0 1px 0 oklch(100% 0 0 / 0.5) inset,
    0 6px 18px oklch(0% 0 0 / 0.14);
  padding: 14px;
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 14px;
  align-items: center;
  color: oklch(20% 0.01 250);
  font-family: Roboto, "Roboto Flex", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  backdrop-filter: blur(8px);
}
.g-notif[hidden] { display: none; }

.g-notif__thumb {
  width: 52px;
  height: 66px;
  border-radius: 10px;
  background: var(--card-bg, oklch(40% 0.04 250));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 1px 2px oklch(0% 0 0 / 0.18);
}
.g-notif__thumb-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  object-fit: cover;
}

.g-notif__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.g-notif__chip {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  font-weight: 500;
  color: oklch(40% 0.01 250);
  margin-bottom: 2px;
}
.g-notif__chip-icon {
  width: 14px;
  height: 14px;
  border-radius: 3px;
}
.g-notif__chip-name { font-weight: 500; }
.g-notif__chip-dot { opacity: 0.55; }
.g-notif__chip-time { opacity: 0.7; }

.g-notif__title {
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.g-notif__subtitle {
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1.25;
  color: oklch(35% 0.01 250);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-modal[hidden] { display: none; }

.card-modal__backdrop {
  position: absolute;
  inset: 0;
  background: oklch(16% 0.015 112 / 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.card-modal__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
}

.card-modal__card-wrap .pass-card {
  zoom: 1.5;
  cursor: default;
  transition: none;
  transform: none;
}
.card-modal__card-wrap .pass-card:hover {
  transform: none;
  box-shadow: 0 4px 20px oklch(0% 0 0 / 0.2);
}

.card-modal__close {
  background: oklch(99% 0.003 88 / 0.9);
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.card-modal__close:hover { background: white; }