/* ============================================================
   EventCortex — Public Portal · Premium Mobile-First Redesign
   ------------------------------------------------------------
   Scope: PUBLIC PORTAL ONLY (port 8000). Loaded AFTER server.css
   via templates/public/_head_assets.html, so these rules layer on
   top of the existing --evx-* / --pub-* system.

   This file owns the redesigned event-detail + checkout surfaces:
     · .evx-hero-immersive  — 40vh full-bleed hero, floating text
     · .evx-sticky-cta      — glassmorphism mobile action bar
     · .evx-tier-card       — clickable card ticket selector
     · .evx-stepper         — pill-shaped [-][n][+] quantity control
     · .evx-bottom-sheet    — Alpine slide-up sheet (waitlist/checkout)

   AR-09: all styling is semantic + class-based. No inline styles.
   AR-01/AR-18: zero admin (.dg-*) reuse — public namespace only.

   Aesthetic: warm editorial — terracotta on cream, Outfit display
   + DM Sans body (both pre-loaded). Bold accent, soft paper surfaces,
   restrained motion with a single spring ease.
   ============================================================ */

:root {
  /* Redesign tokens — namespaced --pubx-* so they never collide with
     the live --evx-* / --pub-* sets. Values track the reference's warm
     terracotta/forest palette while staying legible on the cream field. */
  /* Sambandha reference palette — exact hexes (global retune, decision Q1-A).
     bg/accent/ink now match the User Portal design 1:1. */
  --pubx-bg:          #FFFBF0;   /* cream — page background            */
  --pubx-accent:      #C2410C;   /* terracotta — primary action        */
  --pubx-accent-deep: #9A3412;   /* pressed / hover (darker terracotta) */
  --pubx-accent-ink:  #FCEFE6;   /* text on accent                     */
  --pubx-secondary:   #2D5043;   /* forest green — secondary signal    */
  --pubx-ink:         #1C0A04;   /* midnight ink — primary type        */
  --pubx-ink-soft:    #3A2F26;
  --pubx-muted:       #9B8677;
  --pubx-line:        #E8D9C0;
  --pubx-card:        #FFF9EE;   /* paper surface                      */
  --pubx-card-2:      #FFFFFF;
  --pubx-mustard:     #EAB308;   /* mustard — secondary accent         */
  --pubx-mustard-deep: #CA8A04;
  --pubx-mustard-tint: rgba(234, 179, 8, .12);
  --pubx-mustard-bg:  #FEF9C3;
  --pubx-mustard-ink: #713F12;

  /* Type system — Public Portal (loaded in _head_assets.html):
     Outfit (display sans) · DM Sans (body sans) · DM Mono (mono). */
  --pubx-display:     'Outfit', system-ui, -apple-system, sans-serif;
  --pubx-body:        'DM Sans', 'Manrope', ui-sans-serif, system-ui, sans-serif;
  --pubx-mono:        'DM Mono', ui-monospace, 'SFMono-Regular', monospace;

  --pubx-radius:      16px;
  --pubx-radius-lg:   24px;
  --pubx-radius-pill: 999px;
  --pubx-ease:        cubic-bezier(.2, .7, .2, 1);
  --pubx-shadow:      0 1px 0 rgba(0,0,0,.02), 0 18px 40px -22px rgba(20,12,4,.18);
  --pubx-shadow-lift: 0 26px 60px -28px rgba(20,12,4,.30);

  /* Mobile sticky-CTA height — reserved as scroll padding so the bar
     never occludes the last card on small screens. */
  --pubx-cta-h:       76px;

  /* ============================================================
     SAMBANDHA PORTAL DESIGN TOKENS (--sb-*)
     Ported 1:1 from the Sambandha User-Portal design system
     (Event Design/portal/styles.css). Canonical for the portal
     redesign (.sb-* component classes). Public-only — AR-32 safe.
     ============================================================ */
  --sb-paper:        #FFFBF0;
  --sb-paper-2:      #F5EDD5;
  --sb-card:         #FFFFFF;
  --sb-card-2:       #FFF9EE;
  --sb-ink:          #1C0A04;
  --sb-ink-soft:     #6B5744;
  --sb-ink-faint:    #9B8677;
  --sb-line:         rgba(28,10,4,.10);
  --sb-line-strong:  rgba(28,10,4,.16);

  --sb-terracotta:      #C2410C;
  --sb-terracotta-deep: #9A3412;
  --sb-terracotta-tint: rgba(194,65,12,.10);
  --sb-mustard:         #EAB308;
  --sb-mustard-deep:    #CA8A04;
  --sb-mustard-tint:    rgba(234,179,8,.12);
  --sb-mustard-bg:      #FEF9C3;
  --sb-mustard-ink:     #713F12;
  --sb-marigold:        #EAB308;
  --sb-marigold-tint:   rgba(234,179,8,.14);
  --sb-plum:            #C2410C;
  --sb-plum-deep:       #9A3412;
  --sb-green:           #4f7a3a;
  --sb-green-tint:      rgba(79,122,58,.12);

  --sb-accent:       var(--sb-terracotta);
  --sb-accent-deep:  var(--sb-terracotta-deep);
  --sb-accent-tint:  var(--sb-terracotta-tint);

  --sb-sh-sm:  0 1px 2px rgba(28,10,4,.05), 0 2px 6px rgba(28,10,4,.04);
  --sb-sh-md:  0 2px 6px rgba(28,10,4,.05), 0 10px 24px -8px rgba(28,10,4,.14);
  --sb-sh-lg:  0 4px 10px rgba(28,10,4,.06), 0 26px 60px -18px rgba(28,10,4,.26);
  --sb-sh-cta: 0 6px 16px -4px rgba(194,65,12,.42);

  --sb-r-sm:   12px;
  --sb-r-md:   18px;
  --sb-r-lg:   26px;
  --sb-r-pill: 999px;

  --sb-font-serif: 'Outfit', system-ui, -apple-system, sans-serif;
  --sb-font-sans:  'DM Sans', system-ui, -apple-system, sans-serif;
  --sb-font-mono:  'DM Mono', ui-monospace, 'SFMono-Regular', monospace;
}

/* ============================================================
   PHASE 17 · CONTEXT-AWARE PORTAL THEME (token remap)
   When the end-user portal is in GLOBAL mode (body.portal--global,
   set by base_public when is_global_marketplace or no tenant), remap
   the page (--evx-*) and portal (--sb-*) design tokens onto the Global
   Marketplace --glm-* system. Because every .evx-page / .sb-* rule reads
   these variables, this single block re-themes the whole portal — page
   background, surfaces, ink, accents and typography — with no markup or
   per-component changes. Tenant portals omit the class and keep their own
   sb / evx tokens (and remain the hook for future per-tenant brand
   overrides). The glm tokens are defined in a later :root; CSS custom-property
   resolution is order-independent, so forward references are valid.
   ============================================================ */
body.portal--global {
  /* Page shell (server.css .evx-page { background: var(--evx-bg) }) */
  --evx-bg:           var(--glm-bg);          /* cool grey → warm cream  */
  --evx-bg-alt:       var(--glm-bg-alt);
  --evx-ink:          var(--glm-ink);
  --evx-ink-soft:     var(--glm-ink-soft);
  --evx-muted:        var(--glm-muted);

  /* Portal surfaces + ink (.sb-* components) */
  --sb-paper:         var(--glm-bg);
  --sb-paper-2:       var(--glm-bg-alt);
  --sb-card:          var(--glm-card);
  --sb-card-2:        var(--glm-card-2);
  --sb-ink:           var(--glm-ink);
  --sb-ink-soft:      var(--glm-ink-soft);
  --sb-ink-faint:     var(--glm-muted);
  --sb-line:          var(--glm-border);
  --sb-line-strong:   var(--glm-border-strong);

  /* Accents — terracotta is shared 1:1 across both systems */
  --sb-accent:        var(--glm-accent);
  --sb-accent-deep:   var(--glm-accent-deep);
  --sb-terracotta:      var(--glm-terracotta);
  --sb-terracotta-deep: var(--glm-terracotta-deep);

  /* Typography → Global Marketplace families */
  --sb-font-sans:     var(--glm-font-ui);     /* DM Sans (via --glm-font-ui) */
  --sb-font-serif:    var(--glm-font-display);
  --sb-font-mono:     var(--glm-font-mono);
}

/* ============================================================
   1 · IMMERSIVE HERO  (40vh full-bleed, floating white text)
   ============================================================ */
.evx-hero-immersive {
  position: relative;
  width: 100%;
  min-height: 40vh;
  max-height: 520px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background-color: #1a1d29;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  isolation: isolate;
}
.evx-hero-immersive--flat {
  background: linear-gradient(135deg, var(--pubx-secondary) 0%, #1a1d29 100%);
}

/* Bottom-weighted dark gradient so white text floats cleanly. Two-stop
   ramp keeps the top of the image bright while anchoring legibility low. */
.evx-hero-immersive__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgba(11, 8, 5, 0.92) 0%,
    rgba(11, 8, 5, 0.74) 26%,
    rgba(11, 8, 5, 0.30) 60%,
    rgba(11, 8, 5, 0.04) 100%
  );
  pointer-events: none;
}

.evx-hero-immersive__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(28px, 6vw, 56px) clamp(20px, 5vw, 40px);
  color: #fff;
}

.evx-hero-immersive__chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 13px;
  border-radius: var(--pubx-radius-pill);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font: 600 12px/1 var(--pubx-body);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 16px;
}
.evx-hero-immersive__chip-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pubx-accent);
}

.evx-hero-immersive__title {
  margin: 0;
  font-family: var(--pubx-display);
  font-weight: 400;
  font-size: clamp(34px, 7vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.01em;
  max-width: 20ch;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35);
}
.evx-hero-immersive__blurb {
  margin: 14px 0 0;
  max-width: 52ch;
  font: 400 clamp(15px, 2.2vw, 17px)/1.6 var(--pubx-body);
  color: rgba(255, 255, 255, 0.86);
}

/* Floating essentials — date + venue pills over the image. */
.evx-hero-immersive__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}
.evx-hero-immersive__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border-radius: var(--pubx-radius-pill);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.20);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font: 500 13.5px/1 var(--pubx-body);
  color: #fff;
}
.evx-hero-immersive__pill svg { opacity: .85; flex: 0 0 auto; }

/* Pull the editorial shell up so the intro card overlaps the hero base,
   matching the existing -120px overlap convention but tuned for 40vh. */
.ev-pub .evx-hero-immersive + .ev-pub__shell { margin-top: -64px; }
@media (max-width: 720px) {
  .ev-pub .evx-hero-immersive + .ev-pub__shell { margin-top: -40px; }
}

/* ============================================================
   2 · STICKY GLASSMORPHISM CTA  (mobile only)
   ============================================================ */
.evx-sticky-cta {
  display: none;                 /* desktop keeps the right-rail card */
}

@media (max-width: 960px) {
  /* Reserve space so the fixed-feeling bar never hides the last card. */
  .ev-pub { padding-bottom: var(--pubx-cta-h); }

  .evx-sticky-cta {
    position: sticky;
    bottom: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 -24px;                               /* bleed past .ev-pub__shell's 24px pad */
    padding: 12px 24px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    background: color-mix(in oklab, var(--pubx-card) 78%, transparent);
    backdrop-filter: blur(14px) saturate(1.4);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    border-top: 1px solid color-mix(in oklab, var(--pubx-line) 70%, transparent);
    box-shadow: 0 -10px 30px -18px rgba(20, 12, 4, 0.35);
  }

  .evx-sticky-cta__price {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    flex: 0 0 auto;
  }
  .evx-sticky-cta__price small {
    font: 500 11px/1 var(--pubx-body);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--pubx-muted);
    margin-bottom: 3px;
  }
  .evx-sticky-cta__price strong {
    font: 600 18px/1 var(--pubx-body);
    color: var(--pubx-ink);
    font-variant-numeric: tabular-nums;
  }

  .evx-sticky-cta .evx-cta-action {
    flex: 1 1 auto;
    justify-content: center;
  }
  .evx-sticky-cta .evx-cta-action:disabled {
    background: var(--pubx-accent);
    border-color: transparent;
    opacity: .55;
  }
}

/* Shared primary action — pill, terracotta, used by hero + sheet + bar. */
.evx-cta-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  border: 1px solid var(--pubx-accent);
  border-radius: var(--pubx-radius-pill);
  background: var(--pubx-accent);
  color: var(--pubx-accent-ink);
  font: 600 15px/1 var(--pubx-body);
  text-decoration: none;
  cursor: pointer;
  transition: background .18s var(--pubx-ease),
              transform .18s var(--pubx-ease),
              box-shadow .18s var(--pubx-ease);
}
.evx-cta-action:hover:not(:disabled) {
  background: var(--pubx-accent-deep);
  border-color: var(--pubx-accent-deep);
  transform: translateY(-1px);
  box-shadow: 0 12px 24px -12px rgba(168, 59, 32, 0.6);
}
.evx-cta-action:active:not(:disabled) { transform: translateY(0); }
.evx-cta-action:disabled {
  opacity: .5;
  cursor: not-allowed;
  background: var(--pubx-muted);
  border-color: var(--pubx-muted);
}
.evx-cta-action svg { flex: 0 0 auto; }
.evx-cta-action--block { width: 100%; }
/* Specificity fix: .evx-page button {color:inherit} at (0,1,1) beats .evx-cta-action {color:} at (0,1,0) */
.evx-page button.evx-cta-action { color: var(--pubx-accent-ink); }

.evx-cta-action--ghost {
  background: transparent;
  color: var(--pubx-ink);
  border-color: var(--pubx-line);
}
.evx-cta-action--ghost:hover:not(:disabled) {
  background: color-mix(in oklab, var(--pubx-accent) 8%, transparent);
  border-color: var(--pubx-accent);
  color: var(--pubx-accent);
  box-shadow: none;
}

/* ============================================================
   3 · CARD-BASED TICKET TIERS + PILL STEPPER
   ⚠️ DEPRECATED (checkout redesign) — .evx-tier-* is checkout-exclusive and the
   rewritten checkout_flow.html now uses .cko-tier-* (§5B). Inert dead code,
   safe to delete together with §5.
   ============================================================ */
.evx-tier-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.evx-tier-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  background: var(--pubx-card-2);
  border: 1px solid var(--pubx-line);
  border-radius: var(--pubx-radius);
  box-shadow: var(--pubx-shadow);
  transition: border-color .18s var(--pubx-ease),
              box-shadow .18s var(--pubx-ease),
              transform .18s var(--pubx-ease);
}
@media (min-width: 600px) { .evx-tier-card { padding: 22px 24px; } }

.evx-tier-card:hover { border-color: var(--pubx-ink-soft); }
.evx-tier-card.is-chosen {
  border-color: var(--pubx-accent);
  box-shadow: 0 0 0 1px var(--pubx-accent), var(--pubx-shadow-lift);
}

.evx-tier-card__body { flex: 1 1 auto; min-width: 0; }
.evx-tier-card__name {
  font: 600 16px/1.3 var(--pubx-body);
  color: var(--pubx-ink);
}
.evx-tier-card__price {
  margin-top: 3px;
  font: 600 15px/1.3 var(--pubx-body);
  color: var(--pubx-accent);
  font-variant-numeric: tabular-nums;
}
.evx-tier-card__max {
  margin-top: 2px;
  font: 400 12.5px/1.3 var(--pubx-body);
  color: var(--pubx-muted);
}

/* Pill-shaped [-][n][+] stepper */
.evx-stepper {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  padding: 4px;
  border: 1px solid var(--pubx-line);
  border-radius: var(--pubx-radius-pill);
  background: var(--pubx-card);
}
.evx-stepper__btn {
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--pubx-ink);
  font: 500 20px/1 var(--pubx-body);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s var(--pubx-ease), color .15s var(--pubx-ease);
}
.evx-stepper__btn:hover:not(:disabled) {
  background: var(--pubx-accent);
  color: var(--pubx-accent-ink);
}
.evx-stepper__btn:disabled { opacity: .32; cursor: not-allowed; }
.evx-stepper__qty {
  min-width: 28px;
  text-align: center;
  font: 600 16px/1 var(--pubx-body);
  color: var(--pubx-ink);
  font-variant-numeric: tabular-nums;
}

/* Running order total (sits under the tier list) */
.evx-tier-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px dashed var(--pubx-line);
}
.evx-tier-total__label {
  font: 500 13px/1.3 var(--pubx-body);
  color: var(--pubx-muted);
}
.evx-tier-total__value {
  font: 400 24px/1 var(--pubx-display);
  color: var(--pubx-ink);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   4 · BOTTOM SHEET  (Alpine x-show + x-transition slide-up)
   ------------------------------------------------------------
   Applied as a modifier on the existing .evd-waitlist-modal root
   (.evx-bottom-sheet). On mobile the panel docks to the bottom and
   slides up; on >=720px it recenters as a classic dialog. Transition
   is driven by the .evx-sheet--off helper toggled via x-transition
   start/end attributes — no inline styles.
   ============================================================ */
.evx-bottom-sheet {
  position: fixed;
  inset: 0;
  z-index: 1080;
  display: flex;
  align-items: flex-end;          /* dock to bottom on mobile */
  justify-content: center;
}
@media (min-width: 720px) {
  .evx-bottom-sheet { align-items: center; }
}

.evx-bottom-sheet__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 12, 4, 0.46);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.evx-bottom-sheet__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 560px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  background: var(--pubx-card);
  border: 1px solid var(--pubx-line);
  border-radius: var(--pubx-radius-lg) var(--pubx-radius-lg) 0 0;
  box-shadow: 0 -20px 60px -20px rgba(20, 12, 4, 0.45);
  overflow: hidden;
  transition: transform .34s var(--pubx-ease), opacity .26s var(--pubx-ease);
}
@media (min-width: 720px) {
  .evx-bottom-sheet__panel {
    border-radius: var(--pubx-radius-lg);
    margin: 0 16px;
    max-height: 88vh;
  }
}

/* Off-screen / hidden state used by Alpine x-transition start & leave-end. */
.evx-bottom-sheet .evx-sheet--off { transform: translateY(100%); opacity: 0; }
@media (min-width: 720px) {
  .evx-bottom-sheet .evx-sheet--off { transform: translateY(16px) scale(.98); }
}

/* Grab-handle affordance (mobile) */
.evx-bottom-sheet__handle {
  flex: 0 0 auto;
  width: 42px;
  height: 4px;
  border-radius: 999px;
  background: var(--pubx-line);
  margin: 10px auto 2px;
}
@media (min-width: 720px) { .evx-bottom-sheet__handle { display: none; } }

.evx-bottom-sheet__head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 22px 14px;
  border-bottom: 1px solid var(--pubx-line);
}
.evx-bottom-sheet__head > div:first-child { flex: 1; min-width: 0; }
.evx-bottom-sheet__eyebrow {
  font: 600 11px/1 var(--pubx-body);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pubx-accent);
}
.evx-bottom-sheet__title {
  margin: 6px 0 0;
  font: 400 26px/1.08 var(--pubx-display);
  color: var(--pubx-ink);
}
.evx-bottom-sheet__sub {
  margin: 6px 0 0;
  font: 400 13.5px/1.5 var(--pubx-body);
  color: var(--pubx-muted);
}
.evx-bottom-sheet__close {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 50%;
  background: color-mix(in oklab, var(--pubx-ink) 6%, transparent);
  color: var(--pubx-ink-soft);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s var(--pubx-ease);
}
.evx-bottom-sheet__close:hover { background: color-mix(in oklab, var(--pubx-ink) 12%, transparent); }

.evx-bottom-sheet__body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 20px 22px;
  padding-bottom: max(20px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Form primitives inside the sheet (mirror the existing .evd-* look but
   on the warm redesign tokens). Scoped to the sheet so the live
   server.css .evd-input elsewhere is untouched. */
.evx-bottom-sheet .evd-label {
  font: 600 13px/1.3 var(--pubx-body);
  color: var(--pubx-ink-soft);
}
.evx-bottom-sheet .evd-required-mark { color: var(--pubx-accent); }
.evx-bottom-sheet .evd-input {
  width: 100%;
  padding: 11px 13px;
  background: var(--pubx-card-2);
  border: 1px solid var(--pubx-line);
  border-radius: 10px;
  color: var(--pubx-ink);
  font: 400 15px/1.3 var(--pubx-body);
  transition: border-color .15s var(--pubx-ease), box-shadow .15s var(--pubx-ease);
}
.evx-bottom-sheet .evd-input:focus {
  outline: none;
  border-color: var(--pubx-accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--pubx-accent) 16%, transparent);
}
.evx-bottom-sheet .evd-help { font: 400 12px/1.4 var(--pubx-body); color: var(--pubx-muted); }
.evx-bottom-sheet .evd-form-actions {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}
.evx-bottom-sheet .evd-form-actions .evx-cta-action { flex: 1 1 auto; }

/* Inline success state */
.evx-bottom-sheet .evd-waitlist-success { text-align: center; align-items: center; }
.evx-bottom-sheet .evd-waitlist-success__icon { color: var(--pubx-secondary); }
.evx-bottom-sheet .evd-waitlist-success__title {
  margin: 12px 0 4px;
  font: 400 24px/1.1 var(--pubx-display);
  color: var(--pubx-ink);
}
.evx-bottom-sheet .evd-waitlist-success__sub {
  font: 400 14px/1.55 var(--pubx-body);
  color: var(--pubx-muted);
  max-width: 38ch;
}

/* ============================================================
   5 · CHECKOUT FLOW  (migrated from checkout_flow.html inline <style>)
   ------------------------------------------------------------
   ⚠️ DEPRECATED (checkout redesign): every selector below is scoped to
   .evx-checkout-flow / .evx-tier-* / .evc-mbar, which the rewritten
   checkout_flow.html + processing.html NO LONGER EMIT (they use the .cko-*
   system in §5B/§5C). These rules are therefore INERT dead code, retained
   only this pass to avoid a risky 280-line diff. Safe to delete wholesale
   (this block + §3 CARD-BASED TICKET TIERS, both checkout-exclusive).
   ------------------------------------------------------------
   AR-09: every rule was lifted out of the template's {% block head_extra %}.
   Those rules used to load LAST (after all linked CSS), so to preserve their
   win over Bootstrap base resets WITHOUT relying on source order — and
   without any !important — every selector is scoped under the page wrapper
   .evx-checkout-flow (added to the root .checkout-wrapper div). This adds one
   class of specificity (≥0,2,0), beating Bootstrap's element-level resets
   (input/legend/h1/li = 0,0,1) and single-class bases. The four legacy
   !important flags (input/textarea width, pay-card width+margin, cta:disabled
   transform/shadow) are therefore dropped. Tokens are public-only (--evx-*);
   no --admin-* usage (AR-01/AR-18). Source order of the two original blocks
   is preserved so intra-file overrides resolve identically.
   ============================================================ */

/* ── Shell ─────────────────────────────────────────────────────────── */
.evx-checkout-flow .evc-shell { max-width: 1200px; margin: 0 auto; padding: 32px 24px 64px; }

/* ── Step indicator ────────────────────────────────────────────────── */
.evx-checkout-flow .evc-steps { display: flex; align-items: center; gap: 14px; padding-bottom: 28px; flex-wrap: wrap; }
.evx-checkout-flow .evc-step  { display: inline-flex; align-items: center; gap: 10px; color: var(--evx-muted); transition: color .2s; }
.evx-checkout-flow .evc-step.is-active { color: var(--sb-ink, #241c15); }
.evx-checkout-flow .evc-step.is-done   { color: var(--sb-terracotta, #C2410C); }
.evx-checkout-flow .evc-step__n {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--evx-card-2); border: 1px solid var(--evx-line);
    font: 600 12px/1 monospace;
}
.evx-checkout-flow .evc-step.is-active .evc-step__n { background: var(--sb-terracotta, #C2410C); color: #fff; border-color: var(--sb-terracotta, #C2410C); }
.evx-checkout-flow .evc-step.is-done   .evc-step__n { color: var(--sb-terracotta, #C2410C); border-color: var(--sb-terracotta, #C2410C); }
.evx-checkout-flow .evc-step__sep.is-done { background: var(--sb-terracotta, #C2410C); }
.evx-checkout-flow .evc-step__l { font: 500 13.5px/1.3 var(--evx-body); }
.evx-checkout-flow .evc-step__sep { flex: 0 0 64px; height: 1px; background: var(--evx-line); }

/* ── Two-column layout ─────────────────────────────────────────────── */
.evx-checkout-flow .evc-layout { display: grid; grid-template-columns: 1fr 360px; gap: 24px; align-items: start; }
@media (max-width: 960px) { .evx-checkout-flow .evc-layout { grid-template-columns: 1fr; } }

/* ── Card surface ──────────────────────────────────────────────────── */
.evx-checkout-flow .evc-card {
    background: var(--evx-card-2);
    border: 1px solid var(--evx-line);
    border-radius: var(--evx-radius);
    box-shadow: var(--evx-shadow);
}
.evx-checkout-flow .evc-main { padding: 28px; }

.evx-checkout-flow .evc-section-head { margin-bottom: 22px; }
.evx-checkout-flow .evc-section-head h1 {
    font: 600 24px/1.2 var(--evx-display);
    color: var(--evx-ink); letter-spacing: -.01em; margin: 0;
}
.evx-checkout-flow .evc-section-head p { font: 400 13.5px/1.5 var(--evx-body); color: var(--evx-muted); margin: 4px 0 0; }

.evx-checkout-flow .evc-back-btn {
    background: none; border: none; padding: 0;
    font: 500 13px/1.3 var(--evx-body); color: var(--evx-muted);
    cursor: pointer; margin-bottom: 14px;
    display: inline-flex; align-items: center; gap: 6px;
}
.evx-checkout-flow .evc-back-btn:hover { color: var(--evx-ink); }

/* ── Fieldsets (step 2) ────────────────────────────────────────────── */
.evx-checkout-flow .evc-fieldset {
    border: 1px solid var(--evx-line);
    border-radius: var(--evx-radius);
    padding: 24px;
    margin-bottom: 16px;
    background: var(--evx-card-2);
}
.evx-checkout-flow .evc-fieldset:last-of-type { margin-bottom: 0; }
.evx-checkout-flow .evc-fieldset legend {
    padding: 0 8px;
    font: 600 11px/1.3 monospace;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--evx-muted);
}

/* ── Email + Phone two-column row ──────────────────────────────────── */
.evx-checkout-flow .evc-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.evx-checkout-flow .evc-field-row__col { margin-bottom: 0; }
@media (max-width: 480px) {
    .evx-checkout-flow .evc-field-row { grid-template-columns: 1fr; }
}

/* ── Form inputs — cream/warm palette ──────────────────────────────── */
.evx-checkout-flow .evc-main .evd-form-row { margin-bottom: 14px; }
.evx-checkout-flow .evc-main .evd-form-row:last-child { margin-bottom: 0; }
.evx-checkout-flow .evc-main .evd-label { color: var(--evx-ink); font-family: var(--evx-body); }
.evx-checkout-flow .evc-main .evd-required-mark { color: #E11D48; }
.evx-checkout-flow .evc-main .evd-help { color: var(--evx-muted); font-family: var(--evx-body); }
.evx-checkout-flow .evc-main .evd-input {
    background: transparent;
    border: 1px solid var(--evx-line);
    border-radius: 8px;
    color: var(--evx-ink);
    font-family: var(--evx-body);
    width: 100%;
    padding: 9px 12px;
    transition: border-color .15s, box-shadow .15s;
}
.evx-checkout-flow .evc-main .evd-input:focus {
    outline: none;
    border-color: var(--evx-accent);
    box-shadow: 0 0 0 3px rgba(63,79,184,0.12);
}
.evx-checkout-flow .evc-main .evd-checkbox { color: var(--evx-ink); font-family: var(--evx-body); }
.evx-checkout-flow .evc-main .evd-checkbox input { accent-color: var(--evx-accent); }

/* ── Server-pricing lock notice ────────────────────────────────────── */
.evx-checkout-flow .evc-lock-card {
    background: color-mix(in oklab, var(--evx-accent) 7%, transparent);
    border: 1px dashed var(--evx-accent);
    border-radius: 12px; padding: 14px 16px;
    margin-bottom: 22px;
    display: flex; align-items: flex-start; gap: 12px;
}
.evx-checkout-flow .evc-lock-card__ico { color: var(--evx-accent); flex: 0 0 auto; margin-top: 1px; }
.evx-checkout-flow .evc-lock-card__txt { font: 500 12.5px/1.4 var(--evx-body); color: var(--evx-ink); }
.evx-checkout-flow .evc-lock-card__txt small { display: block; font: 400 11.5px/1.4 var(--evx-body); color: var(--evx-muted); margin-top: 2px; }

/* ── Right-rail order summary ──────────────────────────────────────── */
.evx-checkout-flow .evc-aside { position: sticky; top: 88px; align-self: start; }
.evx-checkout-flow .evc-summary { padding: 22px; }
.evx-checkout-flow .evc-summary__event { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; }
.evx-checkout-flow .evc-summary__banner {
    width: 56px; height: 56px; border-radius: 10px;
    object-fit: cover; flex: 0 0 auto;
    background: var(--evx-card);
}
.evx-checkout-flow .evc-summary__banner-fallback {
    width: 56px; height: 56px; border-radius: 10px; flex: 0 0 auto;
    background: linear-gradient(135deg, var(--evx-accent), var(--evx-secondary));
}
.evx-checkout-flow .evc-summary__title { font: 600 14.5px/1.25 var(--evx-body); color: var(--evx-ink); }
.evx-checkout-flow .evc-summary__sub   { font: 400 12px/1.4 var(--evx-body); color: var(--evx-muted); margin-top: 2px; }
.evx-checkout-flow .evc-summary__rule  { border: 0; border-top: 1px solid var(--evx-line); margin: 16px 0; }
.evx-checkout-flow .evc-summary__h3    { font: 600 11px/1.3 monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--evx-muted); margin: 0 0 12px; }

.evx-checkout-flow .evc-summary__lines { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.evx-checkout-flow .evc-summary__lines li { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; font: 400 13px/1.4 var(--evx-body); color: var(--evx-ink); }
.evx-checkout-flow .evc-summary__line-qty { font-weight: 600; color: var(--evx-accent); margin-right: 4px; }
.evx-checkout-flow .evc-summary__empty {
    font: 400 13px/1.4 var(--evx-body); color: var(--evx-muted); font-style: italic;
    padding: 14px; background: var(--evx-card); border-radius: 10px;
}

.evx-checkout-flow .evc-summary__promo { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--evx-line); }
.evx-checkout-flow .evc-summary__promo > label {
    display: block;
    font: 600 11px/1.3 monospace; letter-spacing: .1em; text-transform: uppercase;
    color: var(--evx-muted); margin-bottom: 6px;
}
.evx-checkout-flow .evc-summary__promo-row { display: flex; gap: 8px; }
.evx-checkout-flow .evc-summary__promo-row input {
    flex: 1 1 auto; min-width: 0;
    padding: 8px 12px;
    font: 500 13px/1.3 monospace; text-transform: uppercase;
    color: var(--evx-ink); background: transparent;
    border: 1px solid var(--evx-line); border-radius: 8px; outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.evx-checkout-flow .evc-summary__promo-row input:focus { border-color: var(--evx-accent); box-shadow: 0 0 0 3px rgba(63,79,184,0.12); }
.evx-checkout-flow .evc-summary__promo-row .evx-btn { padding: 8px 14px; border-radius: 8px; font-size: 13px; flex-shrink: 0; }
.evx-checkout-flow .evc-summary__help { font: 500 12px/1.4 var(--evx-body); color: var(--evx-accent); margin-top: 6px; }
.evx-checkout-flow .evc-summary__err  { font: 500 12px/1.4 var(--evx-body); color: #E11D48; margin-top: 6px; }

.evx-checkout-flow .evc-summary__totals { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--evx-line); display: flex; flex-direction: column; gap: 8px; }
.evx-checkout-flow .evc-summary__row { display: flex; justify-content: space-between; font: 500 13px/1.3 var(--evx-body); color: var(--evx-ink); }
.evx-checkout-flow .evc-summary__row--total {
    font: 700 18px/1.2 var(--evx-display);
    color: var(--evx-ink);
    padding-top: 10px; border-top: 1px solid var(--evx-line);
    font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.evx-checkout-flow .evc-summary__cta {
    width: 100%; margin-top: 18px;
    justify-content: center;
}
/* !important dropped — wrapper specificity (0,3,0) already beats
   .evx-btn--primary:hover (0,1,1). */
.evx-checkout-flow .evc-summary__cta:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.evx-checkout-flow .evc-summary__note { font: 400 11.5px/1.4 var(--evx-body); color: var(--evx-muted); text-align: center; margin-top: 10px; }

/* ── (was 2nd inline block) Checkout form layout fixes ─────────────── */
.evx-checkout-flow .evc-main .evd-form-row { display: block; margin-bottom: 14px; }
.evx-checkout-flow .evc-main .evd-label { display: block; margin-bottom: 8px; color: var(--evx-ink); font-weight: 500; }
/* !important dropped — wrapper prefix beats Bootstrap's element `input` reset. */
.evx-checkout-flow .evc-main .evd-input,
.evx-checkout-flow .evc-main textarea,
.evx-checkout-flow .evc-summary__promo-row input { width: 100%; box-sizing: border-box; }
.evx-checkout-flow .evc-main .evd-input::placeholder { color: var(--evx-muted); }
.evx-checkout-flow .evc-main .evd-checkbox { display: flex; align-items: center; gap: 10px; }
.evx-checkout-flow .evc-main .evd-checkbox input { width: 18px; height: 18px; }
.evx-checkout-flow .evc-main .evc-lock-card { margin-bottom: 18px; }
.evx-checkout-flow .evc-aside .evc-card { border-radius: 12px; }
@media (max-width: 960px) {
    .evx-checkout-flow .evc-layout { grid-template-columns: 1fr; }
    .evx-checkout-flow .evc-aside { position: static; margin-top: 18px; }
}

/* ── Payment method selector (Task 13) ─────────────────────────────────
   Selectable radio-cards bound to the Alpine `paymentGateway` state.
   Mirrors the tier-card border/hover/theme handling; diverges only on the
   .is-selected accent ring. */
.evx-checkout-flow .evc-pay-list {
    list-style: none;
    padding: 0;
    margin: 16px 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}
/* !important dropped — wrapper prefix (0,2,0) wins layout/box props. */
.evx-checkout-flow .evc-pay-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 20px;
    width: 100%;
    box-sizing: border-box;
    background: var(--evx-card-2, #ffffff);
    border: 1px solid var(--evx-line, #e2e8f0);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin: 0;
}
.evx-checkout-flow .evc-pay-card:hover { border-color: var(--evx-ink-soft, #94a3b8); }
.evx-checkout-flow .evc-pay-card.is-selected {
    border-color: var(--evx-accent, #3f4fb8);
    background: color-mix(in oklab, var(--evx-accent) 5%, transparent);
    box-shadow: 0 0 0 1px var(--evx-accent, #3f4fb8);
}
.evx-checkout-flow .evc-pay-card__radio {
    margin-top: 2px;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    accent-color: var(--evx-accent, #3f4fb8);
    cursor: pointer;
}
.evx-checkout-flow .evc-pay-card__body { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.evx-checkout-flow .evc-pay-card__name {
    font-weight: 600;
    font-size: 15px;
    color: var(--evx-ink, #0f172a);
    display: flex;
    align-items: center;
    gap: 10px;
}
.evx-checkout-flow .evc-pay-card__name svg { color: var(--evx-accent); }
.evx-checkout-flow .evc-pay-card__sub { font-size: 13.5px; color: var(--evx-muted, #64748b); line-height: 1.4; margin: 0; }

/* Discount amount in the summary totals (was an inline style on the span). */
.evx-checkout-flow .evc-summary__discount-amt { color: var(--evx-accent); }
.evx-checkout-flow .evc-pay-empty {
    font: 400 13px/1.4 var(--evx-body); color: var(--evx-muted); font-style: italic;
    padding: 14px; background: var(--evx-card); border-radius: 10px;
    border: 1px dashed var(--evx-line);
}

/* Free-registration confirmation panel (Phase 14 — $0 fast-path). Shown in
   place of the payment-method picker when the cart prices to $0. */
.evx-checkout-flow .evc-free-confirm {
    padding: 16px; background: var(--evx-card); border-radius: 12px;
    border: 1px solid var(--evx-line);
}
.evx-checkout-flow .evc-free-confirm__badge {
    display: flex; align-items: center; gap: 8px;
    font: 600 15px/1.3 var(--evx-body); color: var(--evx-accent);
}
.evx-checkout-flow .evc-free-confirm__note {
    margin: 8px 0 0; font: 400 13.5px/1.45 var(--evx-body); color: var(--evx-muted);
}

/* ============================================================
   6 · MOBILE OVERFLOW RESCUE + PREMIUM POLISH
   ============================================================ */

/* ── Horizontal-overflow safety net ─────────────────────────────────
   The public body scrolls (server.css: body.public{overflow:auto}); any
   sub-pixel bleed (negative-margin CTA, long unbreakable strings) would
   surface a horizontal scrollbar on mobile. Clip it on the content
   wrapper. `overflow-x: clip` (NOT hidden) deliberately does NOT create a
   scroll container, so the sticky bottom CTA still pins to the viewport. */
.evx-main-content { overflow-x: clip; }

/* ── Checkout: kill the double horizontal padding on mobile ─────────
   .evx-section__inner already supplies 24px side padding; .evc-shell
   added another 24px → 48px total, cramping the single-column layout and
   pushing inputs toward the edges. Drop the shell's own side padding once
   the grid has collapsed so only the section's gutter remains. */
@media (max-width: 960px) {
    .evx-checkout-flow .evc-shell { padding-left: 0; padding-right: 0; }
}

/* Belt-and-suspenders: any flex/grid child inside the collapsed checkout
   may shrink rather than overflow. min-width:0 lets long tier names /
   summary lines ellipsis-wrap instead of forcing a horizontal scroll. */
.evx-checkout-flow .evc-layout > * { min-width: 0; }
.evx-tier-card__name,
.evx-checkout-flow .evc-summary__lines li > span:first-child { min-width: 0; }

/* On the narrowest phones, keep the 3-step indicator from forcing width:
   shrink the fixed separators so the steps wrap cleanly. */
@media (max-width: 480px) {
    .evx-checkout-flow .evc-step__sep { flex-basis: 20px; }
    .evx-checkout-flow .evc-steps     { gap: 10px; }
}

/* ── Back + Continue button row (rail CTA) ──────────────────────────── */
.evx-checkout-flow .evc-cta-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
}
.evx-checkout-flow .evc-cta-row__back {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 14px;
    height: 44px;
    border-radius: var(--sb-r-pill, 999px);
    font-size: 13.5px;
    color: var(--sb-ink-soft, #6f6356);
    border-color: var(--sb-line-strong, rgba(28,10,4,.18));
    white-space: nowrap;
}
.evx-checkout-flow .evc-cta-row__back:hover {
    color: var(--sb-ink, #241c15);
    border-color: var(--sb-ink-faint, #9b8e7e);
}
.evx-checkout-flow .evc-cta-row__continue {
    flex: 1;
    justify-content: center;
    height: 44px;
    border-radius: var(--sb-r-pill, 999px) !important;
}

/* ── Read-only promo display (step 2+) ──────────────────────────────── */
.evx-checkout-flow .evc-promo-readonly {
    display: flex; align-items: center; gap: 7px;
    padding: 8px 12px;
    border-radius: 8px;
    font: 500 13px/1.3 var(--sb-font-mono, monospace);
    letter-spacing: .04em;
}
.evx-checkout-flow .evc-promo-readonly--applied {
    background: var(--sb-green-tint, rgba(79,122,58,.12));
    color: var(--sb-green, #4f7a3a);
    border: 1px solid var(--sb-green-tint, rgba(79,122,58,.20));
}
.evx-checkout-flow .evc-promo-readonly--applied svg { flex: none; }
.evx-checkout-flow .evc-promo-readonly__tag {
    font: 500 10.5px/1 var(--sb-font-mono, monospace);
    letter-spacing: .1em; text-transform: uppercase;
    opacity: .75; margin-left: 2px;
}
.evx-checkout-flow .evc-promo-readonly--none {
    background: transparent;
    color: var(--sb-ink-faint, #9b8e7e);
    font-style: italic;
    font-family: var(--sb-font-sans, sans-serif);
    letter-spacing: 0;
    padding-left: 0;
}

/* ── T&C checkbox (step 2) ──────────────────────────────────────────── */
.evx-checkout-flow .evc-tc-check {
    margin-top: 18px;
    padding: 16px 18px;
    border: 1px solid var(--sb-line, rgba(28,10,4,.11));
    border-radius: 12px;
    background: var(--sb-card-2, #faf5ea);
}
.evx-checkout-flow .evc-tc-label {
    display: flex; align-items: flex-start; gap: 11px;
    cursor: pointer;
    font: 400 13.5px/1.55 var(--sb-font-sans, sans-serif);
    color: var(--sb-ink-soft, #6f6356);
}
.evx-checkout-flow .evc-tc-label__box {
    width: 17px; height: 17px; flex: none; margin-top: 2px;
    accent-color: var(--sb-terracotta, #C2410C); cursor: pointer;
}
.evx-checkout-flow .evc-tc-label a {
    color: var(--sb-terracotta, #C2410C); font-weight: 600;
    text-decoration: none;
}
.evx-checkout-flow .evc-tc-label a:hover { text-decoration: underline; }
.evx-checkout-flow .evc-tc-req {
    color: var(--sb-terracotta, #C2410C); margin-left: 1px;
}

/* ── Mobile sticky bottom bar ───────────────────────────────────────── */
.evc-mbar { display: none; }   /* hidden on desktop */

@media (max-width: 960px) {
    /* Reserve space so the last card isn't obscured by the fixed bar. */
    .evx-checkout-flow .evc-shell { padding-bottom: 96px; }

    .evc-mbar {
        display: flex;
        align-items: center;
        gap: 14px;
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 70;
        padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
        background: rgba(244,239,228,.94);
        backdrop-filter: blur(16px) saturate(1.4);
        -webkit-backdrop-filter: blur(16px) saturate(1.4);
        border-top: 1px solid var(--sb-line-strong, rgba(28,10,4,.18));
        box-shadow: 0 -8px 30px -12px rgba(28,10,4,.22);
    }
    .evc-mbar__info { flex: 1; min-width: 0; }
    .evc-mbar__lbl {
        font: 500 10.5px/1 var(--sb-font-mono, monospace);
        letter-spacing: .12em; text-transform: uppercase;
        color: var(--sb-ink-faint, #9b8e7e);
    }
    .evc-mbar__amt {
        font: 600 22px/1 var(--sb-font-serif, Georgia, serif);
        color: var(--sb-ink, #241c15);
        margin-top: 4px;
        font-variant-numeric: tabular-nums;
        letter-spacing: -.01em;
    }
    .evc-mbar__cta {
        flex: none;
        display: inline-flex; align-items: center; gap: 7px;
        padding: 14px 20px;
        font-size: 14.5px !important;
        border-radius: var(--sb-r-pill, 999px) !important;
        white-space: nowrap;
    }
    .evc-mbar__cta:disabled { opacity: .45; }
}

/* ============================================================================
   5B · CHECKOUT REDESIGN  (--cko-* design system)
   ----------------------------------------------------------------------------
   Self-contained checkout + wait visual language for the public portal
   (Checkout Flow.dc.html reference). Tokens are declared on the page roots
   .cko-flow / .cko-wait — NOT :root — so they physically cannot bleed into the
   admin (8001) or field (8003) portals, which never carry those classes
   (AR-42). Type tokens are literal here so the scope is fully self-describing.
   Supersedes the legacy .evx-checkout-flow / .evx-tier-* / .evc-mbar rules.
   ============================================================================ */
.cko-flow, .cko-wait {
    --cko-bg:          #FFFBF0;   /* cream — page background      */
    --cko-surface:     #FFFFFF;   /* card paper                  */
    --cko-surface-2:   #FFF9EE;   /* inset / fieldset            */
    --cko-ink:         #1C0A04;   /* primary type                */
    --cko-muted:       #6B5744;   /* secondary type              */
    --cko-faint:       #9B8677;   /* labels / meta               */
    --cko-line:        rgba(28,10,4,.12);
    --cko-line-2:      rgba(28,10,4,.18);
    --cko-accent:      #C2410C;   /* terracotta                  */
    --cko-accent-deep: #9A3412;
    --cko-accent-soft: rgba(194,65,12,.07);
    --cko-mustard:     #EAB308;   /* mustard — secondary accent  */
    --cko-mustard-deep: #CA8A04;
    --cko-mustard-tint: rgba(234,179,8,.10);
    --cko-mustard-ink: #713F12;
    --cko-green:       #4f7a3a;
    --cko-green-deep:  #3c5f2c;
    --cko-green-soft:  rgba(79,122,58,.10);
    --cko-green-line:  rgba(79,122,58,.30);
    --cko-danger:      #9A3412;
    --cko-display: 'Outfit',system-ui,-apple-system,sans-serif;
    --cko-body:    'DM Sans','Manrope',ui-sans-serif,system-ui,sans-serif;
    --cko-mono:    'DM Mono',ui-monospace,'SFMono-Regular',monospace;
    --cko-radius:    16px;
    --cko-radius-sm: 12px;
    --cko-radius-pill: 999px;
    --cko-shadow:  0 1px 2px rgba(28,10,4,.05), 0 8px 30px -18px rgba(28,10,4,.22);
    --cko-shadow-lift: 0 18px 50px -24px rgba(28,10,4,.35);
    --cko-ease:    cubic-bezier(.2,.7,.2,1);

    background: var(--cko-bg);
    color: var(--cko-ink);
    font-family: var(--cko-body);
}
.cko-flow { min-height: 70vh; }
.cko-num { font-variant-numeric: tabular-nums; }

/* shared buttons */
.cko-flow .cko-btn, .cko-wait .cko-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: none; cursor: pointer;
    font: 700 15px/1 var(--cko-body);
    padding: 14px 18px; border-radius: 14px;
    transition: background .18s var(--cko-ease), border-color .18s var(--cko-ease), opacity .18s var(--cko-ease);
}
.cko-flow .cko-btn--primary, .cko-wait .cko-btn--primary { background: var(--cko-accent); color: #fff; }
.cko-flow .cko-btn--primary:hover:not(:disabled), .cko-wait .cko-btn--primary:hover:not(:disabled) { background: var(--cko-accent-deep); }
.cko-flow .cko-btn--ghost, .cko-wait .cko-btn--ghost {
    background: var(--cko-surface-2); color: var(--cko-ink);
    border: 1px solid var(--cko-line);
}
.cko-flow .cko-btn--ghost:hover, .cko-wait .cko-btn--ghost:hover { border-color: var(--cko-line-2); }
.cko-flow .cko-btn--dark { background: var(--cko-ink); color: #fff; }
.cko-flow .cko-btn:disabled, .cko-wait .cko-btn:disabled { opacity: .45; cursor: not-allowed; }
.cko-flow .cko-linkbtn {
    background: none; border: none; padding: 0; cursor: pointer;
    font: 600 13px/1.3 var(--cko-body); color: var(--cko-accent);
    display: inline-flex; align-items: center; gap: 6px;
}
.cko-flow .cko-linkbtn:hover { color: var(--cko-accent-deep); }

/* shell + progress */
.cko-shell { max-width: 1200px; margin: 0 auto; padding: 36px 22px 64px; }
.cko-prog { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }
.cko-prog__step {
    display: inline-flex; align-items: center; gap: 9px;
    background: none; border: none; padding: 4px 6px; border-radius: 9px;
    cursor: pointer; color: var(--cko-faint); font: inherit;
}
.cko-prog__step:disabled { cursor: default; }
.cko-prog__dot {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 32px; height: 32px; border-radius: 50%;
    font: 600 12px/1 var(--cko-mono);
    border: 1.5px solid var(--cko-line-2); color: var(--cko-faint);
    transition: background .2s, color .2s, border-color .2s;
}
.cko-prog__label { font: 600 14.5px/1.3 var(--cko-body); color: var(--cko-faint); }
.cko-prog__step.is-active .cko-prog__dot { background: var(--cko-accent); color: #fff; border-color: var(--cko-accent); }
.cko-prog__step.is-active .cko-prog__label { color: var(--cko-ink); }
.cko-prog__step.is-done .cko-prog__dot { color: var(--cko-accent); border-color: var(--cko-accent); }
.cko-prog__step.is-done .cko-prog__label { color: var(--cko-accent); }
.cko-prog__bar { flex: 1; height: 1.5px; max-width: 80px; background: var(--cko-line); }
.cko-prog__bar.is-done { background: var(--cko-accent); }

/* layout + cards */
.cko-layout { display: grid; grid-template-columns: 1fr 392px; gap: 24px; align-items: start; }
.cko-card {
    background: var(--cko-surface);
    border: 1px solid var(--cko-line);
    border-radius: 18px;
    box-shadow: var(--cko-shadow);
}
.cko-main { padding: 34px 36px; min-height: 440px; }
.cko-back {
    display: inline-flex; align-items: center; gap: 7px;
    background: none; border: none; cursor: pointer;
    padding: 8px 12px 8px 8px; margin: -8px 0 18px -8px; border-radius: 9px;
    font: 600 13.5px/1 var(--cko-body); color: var(--cko-muted); text-decoration: none;
}
.cko-back:hover { background: var(--cko-surface-2); color: var(--cko-ink); }

.cko-alert {
    display: flex; align-items: center; gap: 8px; margin-bottom: 18px;
    background: var(--cko-accent-soft); color: var(--cko-danger);
    border-radius: 11px; padding: 11px 14px;
    font: 600 13.5px/1.4 var(--cko-body);
}
.cko-alert svg { flex: none; }

.cko-head { margin-bottom: 24px; }
.cko-kicker { font: 500 11px/1.5 var(--cko-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--cko-accent); margin-bottom: 8px; }
.cko-h { font: 600 32px/1.1 var(--cko-display); letter-spacing: -.02em; color: var(--cko-ink); margin: 0; outline: none; }
.cko-head p { font: 400 14.5px/1.55 var(--cko-body); color: var(--cko-muted); margin: 8px 0 0; max-width: 460px; }

/* tier cards + stepper */
.cko-tiers { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.cko-tier {
    display: flex; align-items: center; gap: 16px; padding: 18px 20px;
    border: 1.5px solid var(--cko-line); border-radius: 16px; background: var(--cko-surface);
    transition: border-color .18s var(--cko-ease), background .18s var(--cko-ease);
}
.cko-tier.is-chosen { border-color: var(--cko-accent); background: var(--cko-accent-soft); }
.cko-tier__body { flex: 1; min-width: 0; }
.cko-tier__name { font: 600 19px/1.2 var(--cko-display); letter-spacing: -.01em; color: var(--cko-ink); }
.cko-tier__price { margin-top: 3px; font: 700 16px/1.2 var(--cko-body); color: var(--cko-accent); }
.cko-tier__max { margin-top: 4px; font: 400 12.5px/1.3 var(--cko-body); color: var(--cko-faint); }
.cko-stepper {
    display: inline-flex; align-items: center; flex: none; padding: 4px;
    background: var(--cko-surface-2); border: 1px solid var(--cko-line); border-radius: var(--cko-radius-pill);
}
.cko-stepper__btn {
    width: 36px; height: 36px; border: none; border-radius: 50%;
    background: var(--cko-surface); color: var(--cko-ink);
    font: 600 20px/1 var(--cko-body); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 1px 2px rgba(28,10,4,.12);
    transition: background .15s var(--cko-ease), color .15s var(--cko-ease);
}
.cko-stepper__btn:hover:not(:disabled) { background: var(--cko-accent); color: #fff; }
.cko-stepper__btn:disabled { background: transparent; color: var(--cko-line-2); cursor: not-allowed; box-shadow: none; }
.cko-stepper__qty { min-width: 34px; text-align: center; font: 700 16px/1 var(--cko-body); color: var(--cko-ink); }
.cko-tiertotal {
    display: flex; align-items: baseline; justify-content: space-between;
    margin-top: 22px; padding-top: 18px; border-top: 1px dashed var(--cko-line-2);
}
.cko-tiertotal__lbl { font: 500 11px/1.3 var(--cko-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--cko-faint); }
.cko-tiertotal__val { font: 600 30px/1 var(--cko-display); letter-spacing: -.01em; color: var(--cko-ink); }

/* form */
.cko-fieldset { border: 1px solid var(--cko-line); border-radius: 16px; padding: 22px; margin: 0 0 16px; background: var(--cko-surface-2); }
.cko-fieldset legend { padding: 0 8px; font: 500 11px/1.3 var(--cko-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--cko-faint); }
.cko-field { margin-bottom: 14px; }
.cko-field:last-child { margin-bottom: 0; }
.cko-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.cko-field-row__col { margin-bottom: 0; }
.cko-label { display: block; margin-bottom: 7px; font: 600 12.5px/1.3 var(--cko-body); color: var(--cko-ink); }
.cko-req { color: var(--cko-accent); margin-left: 3px; }
.cko-input {
    width: 100%; box-sizing: border-box; padding: 12px 14px;
    border-radius: 12px; border: 1px solid var(--cko-line-2);
    background: var(--cko-surface); color: var(--cko-ink);
    font: 400 15px/1.3 var(--cko-body); outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.cko-input::placeholder { color: var(--cko-faint); }
.cko-input:focus { border-color: var(--cko-accent); box-shadow: 0 0 0 3px var(--cko-accent-soft); }
.cko-help { margin-top: 6px; font: 400 12px/1.4 var(--cko-body); color: var(--cko-faint); }
.cko-checkgroup { display: flex; flex-direction: column; gap: 8px; }
.cko-check { display: flex; align-items: center; gap: 10px; font: 400 14px/1.3 var(--cko-body); color: var(--cko-ink); }
.cko-check input { width: 17px; height: 17px; accent-color: var(--cko-accent); }
.cko-agree {
    display: flex; align-items: flex-start; gap: 11px; cursor: pointer;
    background: var(--cko-surface-2); border: 1px solid var(--cko-line); border-radius: 14px;
    padding: 15px 16px; font: 400 13.5px/1.5 var(--cko-body); color: var(--cko-muted);
}
.cko-agree input { width: 18px; height: 18px; margin-top: 1px; flex: none; accent-color: var(--cko-accent); cursor: pointer; }
.cko-agree a { color: var(--cko-accent); font-weight: 600; text-decoration: none; }
.cko-agree a:hover { text-decoration: underline; }

/* review cards (step 3) */
.cko-rcard { background: var(--cko-surface-2); border: 1px solid var(--cko-line); border-radius: 16px; padding: 18px 20px; margin-bottom: 14px; }
.cko-rcard--event { display: flex; gap: 13px; align-items: center; }
.cko-rcard__thumb { width: 52px; height: 52px; border-radius: 11px; flex: none; object-fit: cover; background: var(--cko-surface); }
.cko-rcard__thumb--fallback { background: linear-gradient(135deg, var(--cko-mustard), var(--cko-accent)); }
.cko-rcard__title { font: 600 17px/1.25 var(--cko-display); letter-spacing: -.01em; color: var(--cko-ink); }
.cko-rcard__meta { margin-top: 3px; font: 400 12.5px/1.4 var(--cko-body); color: var(--cko-muted); }
.cko-rcard__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.cko-rcard__lbl { font: 500 11px/1.3 var(--cko-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--cko-faint); }
.cko-rrow { display: flex; justify-content: space-between; gap: 14px; padding: 6px 0; font: 400 14px/1.4 var(--cko-body); color: var(--cko-ink); }
.cko-rkv { display: flex; justify-content: space-between; gap: 14px; padding: 6px 0; font: 400 14px/1.4 var(--cko-body); }
.cko-rkv > span:first-child { color: var(--cko-faint); }
.cko-rkv > span:last-child { color: var(--cko-ink); font-weight: 500; text-align: right; }
.cko-rtot { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--cko-line); display: flex; flex-direction: column; gap: 7px; }
.cko-rtot__row { display: flex; justify-content: space-between; gap: 14px; font: 400 14px/1.4 var(--cko-body); color: var(--cko-ink); }
.cko-rtot__promo { color: var(--cko-faint); font-size: 12.5px; }
.cko-rtot__row--total { padding-top: 8px; margin-top: 2px; border-top: 1px solid var(--cko-line); align-items: baseline; }
.cko-rtot__row--total > span:first-child { font-weight: 700; }
.cko-rtot__row--total > span:last-child { font: 600 18px/1 var(--cko-display); }

/* Mobile-only promo entry (desktop uses the aside; ≤960px shows it in step 1) */
.cko-promo-mobile { display: none; }
@media (max-width: 960px) {
    .cko-promo-mobile { display: block; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--cko-line-2); }
    .cko-promo-mobile .cko-sum__promo-label { font: 500 10.5px/1.3 var(--cko-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--cko-faint); margin-bottom: 6px; }
    .cko-tiertotal { margin-top: 14px; padding-top: 12px; }
    .cko-tiertotal__val { font-size: 22px; }
}

/* free + payment */
.cko-freebox {
    display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
    background: var(--cko-green-soft); border: 1px solid var(--cko-green-line); border-radius: 16px; padding: 16px 18px;
}
.cko-freebox__ico { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--cko-green); color: #fff; flex: none; }
.cko-freebox__title { font: 700 15px/1.3 var(--cko-body); color: var(--cko-green-deep); }
.cko-freebox__sub { margin-top: 2px; font: 400 13px/1.4 var(--cko-body); color: var(--cko-muted); }
.cko-paylabel { font: 500 11px/1.3 var(--cko-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--cko-faint); margin-bottom: 12px; }
.cko-pay-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.cko-pay {
    display: flex; align-items: center; gap: 13px; width: 100%; text-align: left; cursor: pointer;
    background: var(--cko-surface); border: 1.5px solid var(--cko-line-2); border-radius: 14px; padding: 15px 16px;
    transition: border-color .15s, background .15s;
}
.cko-pay:hover { border-color: var(--cko-faint); }
.cko-pay.is-selected { border-color: var(--cko-accent); background: var(--cko-accent-soft); }
.cko-pay__radio { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--cko-line-2); flex: none; position: relative; }
.cko-pay.is-selected .cko-pay__radio { border-color: var(--cko-accent); }
.cko-pay.is-selected .cko-pay__radio::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--cko-accent); }
.cko-pay__ico { color: var(--cko-accent); flex: none; display: inline-flex; }
.cko-pay__body { display: flex; flex-direction: column; gap: 2px; }
.cko-pay__name { font: 600 15px/1.2 var(--cko-body); color: var(--cko-ink); }
.cko-pay__sub { font: 400 12.5px/1.3 var(--cko-body); color: var(--cko-faint); }
.cko-pay-empty {
    font: 400 13px/1.4 var(--cko-body); color: var(--cko-muted); font-style: italic;
    padding: 14px; background: var(--cko-surface-2); border: 1px dashed var(--cko-line-2); border-radius: 12px; margin-bottom: 14px;
}
.cko-confirm {
    display: flex; align-items: flex-start; gap: 11px; cursor: pointer; margin-bottom: 4px;
    background: var(--cko-accent-soft); border: 1px solid rgba(194,65,12,.25); border-radius: 14px; padding: 15px 16px;
    font: 500 13.5px/1.5 var(--cko-body); color: var(--cko-ink);
}
.cko-confirm.is-free { background: var(--cko-green-soft); border-color: var(--cko-green-line); }
.cko-confirm input { width: 18px; height: 18px; margin-top: 1px; flex: none; accent-color: var(--cko-accent); cursor: pointer; }
.cko-confirm.is-free input { accent-color: var(--cko-green); }

/* summary aside */
.cko-aside { position: sticky; top: 24px; align-self: start; }
.cko-sum { padding: 24px; }
.cko-sum__event { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; }
.cko-sum__banner { width: 50px; height: 50px; border-radius: 11px; flex: none; object-fit: cover; background: var(--cko-surface-2); }
.cko-sum__banner--fallback { background: linear-gradient(135deg, var(--cko-mustard), var(--cko-accent)); }
.cko-sum__title { font: 600 15.5px/1.2 var(--cko-display); color: var(--cko-ink); }
.cko-sum__sub { margin-top: 3px; font: 400 12px/1.4 var(--cko-body); color: var(--cko-faint); }
.cko-sum__label { font: 500 10.5px/1.3 var(--cko-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--cko-faint); margin: 0 0 10px; padding-top: 14px; border-top: 1px solid var(--cko-line); }
.cko-sum__lines { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.cko-sum__lines li { display: flex; justify-content: space-between; gap: 12px; font: 400 13.5px/1.4 var(--cko-body); color: var(--cko-ink); }
.cko-sum__qty { color: var(--cko-accent); font-weight: 700; }
.cko-sum__empty { font: 400 13px/1.4 var(--cko-body); color: var(--cko-faint); font-style: italic; }
.cko-sum__promo { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--cko-line); }
.cko-sum__promo-label { font: 500 10.5px/1.3 var(--cko-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--cko-faint); margin-bottom: 9px; }
.cko-promo-row { display: flex; gap: 8px; }
.cko-promo-input { flex: 1; min-width: 0; padding: 11px 13px; border-radius: 11px; border: 1px solid var(--cko-line-2); background: var(--cko-surface); font: 500 14px/1.2 var(--cko-mono); text-transform: uppercase; outline: none; }
.cko-promo-input:focus { border-color: var(--cko-accent); box-shadow: 0 0 0 3px var(--cko-accent-soft); }
.cko-promo-apply { flex: none; padding: 11px 16px; border-radius: 11px; font-size: 14px; }
.cko-promo-toggle { margin-top: 2px; color: var(--cko-mustard-deep); }
.cko-promo-toggle:hover { color: var(--cko-mustard); }
.cko-promo-chip {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    background: var(--cko-green-soft); border: 1px solid var(--cko-green-line); border-radius: 11px; padding: 9px 12px;
}
.cko-promo-chip__code { font: 600 13px/1.2 var(--cko-mono); color: var(--cko-green-deep); }
.cko-promo-chip__meta { font: 400 12px/1.2 var(--cko-body); color: var(--cko-faint); }
.cko-promo-chip .cko-linkbtn { margin-left: auto; color: var(--cko-faint); font-size: 12.5px; }
.cko-sum__err { margin-top: 6px; font: 500 12px/1.4 var(--cko-body); color: var(--cko-danger); }
.cko-sum__none { font: 400 13px/1.3 var(--cko-body); color: var(--cko-faint); font-style: italic; }
.cko-sum__totals { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--cko-line); display: flex; flex-direction: column; gap: 9px; }
.cko-sum__row { display: flex; justify-content: space-between; font: 500 13.5px/1.3 var(--cko-body); color: var(--cko-ink); }
.cko-sum__discount { color: var(--cko-green); }
.cko-sum__row--total { padding-top: 10px; margin-top: 2px; border-top: 1px solid var(--cko-line); align-items: baseline; }
.cko-sum__row--total > span:first-child { font: 700 15px/1.2 var(--cko-body); }
.cko-sum__row--total > span:last-child { font: 600 24px/1 var(--cko-display); }
.cko-sum__cta { width: 100%; margin-top: 18px; }
.cko-ctarow { display: flex; gap: 10px; margin-top: 18px; }
.cko-ctarow__go { flex: 1; }
.cko-sum__note { font: 400 12px/1.4 var(--cko-body); color: var(--cko-faint); text-align: center; margin-top: 10px; }

/* mobile bar + sheet (hidden on desktop) */
.cko-mbar { display: none; }
.cko-sheet { display: none; }

@media (max-width: 960px) {
    .cko-layout { grid-template-columns: 1fr; }
    .cko-aside { display: none; }       /* aside CTA replaced by the mobile bar + sheet */
    .cko-main { padding: 26px 20px; min-height: 0; }
    .cko-shell { padding: 20px 16px calc(96px + env(safe-area-inset-bottom, 0px)); }
    .cko-h { font-size: 26px; }

    .cko-mbar {
        display: flex; align-items: center; gap: 12px;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
        padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px));
        background: var(--cko-surface);
        border-top: 1px solid var(--cko-line-2);
        box-shadow: 0 -8px 24px -16px rgba(28,10,4,.4);
    }
    .cko-mbar__sum { flex: none; background: none; border: none; padding: 0; text-align: left; cursor: pointer; }
    .cko-mbar__lbl { display: flex; align-items: center; gap: 4px; font: 500 9.5px/1.2 var(--cko-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--cko-faint); }
    .cko-mbar__amt { display: block; margin-top: 3px; font: 600 23px/1 var(--cko-display); color: var(--cko-ink); }
    .cko-mbar__cta { flex: 1; }

    .cko-sheet { display: block; position: fixed; inset: 0; z-index: 80; }
    .cko-sheet__scrim { position: absolute; inset: 0; background: rgba(36,28,21,.4); }
    .cko-sheet__panel {
        position: absolute; left: 0; right: 0; bottom: 0;
        background: var(--cko-surface); border-radius: 26px 26px 0 0;
        padding: 20px 18px calc(26px + env(safe-area-inset-bottom, 0px));
        max-height: 82%; overflow-y: auto;
        animation: cko-sheet-up .32s cubic-bezier(.32,.72,0,1);
    }
    .cko-sheet__grab { width: 42px; height: 5px; border-radius: 3px; background: var(--cko-line-2); margin: 0 auto 16px; }
    .cko-sheet__close { width: 100%; margin-top: 16px; }
}

/* narrow phones: let the progress bar wrap cleanly */
@media (max-width: 420px) {
    .cko-prog { gap: 8px; }
    .cko-prog__bar { max-width: 24px; }
    .cko-prog__label { font-size: 13px; }
}

/* ============================================================================
   5C · CHECKOUT WAIT / PROCESSING  (.cko-wait)
   ============================================================================ */
.cko-wait__shell { max-width: 560px; margin: 0 auto; padding: 56px 22px 80px; }
.cko-wait__card {
    background: var(--cko-surface); border: 1px solid var(--cko-line);
    border-radius: 20px; box-shadow: var(--cko-shadow-lift);
    padding: 44px 36px; text-align: center;
}
.cko-wait__spinner {
    width: 58px; height: 58px; margin: 0 auto 22px; border-radius: 50%;
    border: 4px solid var(--cko-accent-soft); border-top-color: var(--cko-accent);
    animation: cko-spin .9s linear infinite;
}
.cko-wait__eyebrow { font: 500 11px/1.5 var(--cko-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--cko-accent); margin-bottom: 10px; }
.cko-wait__title { font: 600 26px/1.2 var(--cko-display); letter-spacing: -.02em; color: var(--cko-ink); margin: 0 0 10px; }
.cko-wait__lede { font: 400 14.5px/1.6 var(--cko-body); color: var(--cko-muted); max-width: 380px; margin: 0 auto; }
.cko-wait__steps { list-style: none; padding: 0; margin: 24px auto 0; max-width: 300px; text-align: left; display: flex; flex-direction: column; gap: 10px; }
.cko-wait__steps li { display: flex; align-items: center; gap: 11px; font: 400 13.5px/1.3 var(--cko-body); color: var(--cko-faint); }
.cko-wait__steps li.is-done, .cko-wait__steps li.is-active { color: var(--cko-ink); font-weight: 600; }
.cko-wait__tick { width: 20px; height: 20px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--cko-line-2); color: #fff; }
.cko-wait__steps li.is-done .cko-wait__tick { background: var(--cko-green); border: none; }
.cko-wait__tick--pulse { border-color: var(--cko-accent); }
.cko-wait__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cko-accent); animation: cko-pulse 1s infinite; }
.cko-wait__ref { display: inline-block; margin-top: 24px; font: 400 12px/1.3 var(--cko-mono); letter-spacing: .04em; color: var(--cko-ink); background: rgba(28,10,4,.06); padding: 7px 14px; border-radius: 9px; }
.cko-wait__hold { margin-top: 16px; }
.cko-wait__holdnote { font: 400 12.5px/1.5 var(--cko-mono); color: var(--cko-muted); margin: 0; }
.cko-wait__clock { color: var(--cko-accent); font-variant-numeric: tabular-nums; letter-spacing: .04em; font-weight: 500; }
.cko-wait__holdnote--expired { color: var(--cko-danger); }
.cko-wait__cta { margin-top: 22px; text-decoration: none; }

@keyframes cko-spin { to { transform: rotate(360deg); } }
@keyframes cko-pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
@keyframes cko-sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* a11y: honour reduced-motion — no spin/pulse/slide, no smooth-scroll jank */
@media (prefers-reduced-motion: reduce) {
    .cko-wait__spinner { animation-duration: 2.4s; }
    .cko-wait__dot { animation: none; }
    .cko-sheet__panel { animation: none; }
}

/* ── Hero: soft fade into the page background (no harsh bottom edge) ──
   In addition to the legibility scrim, melt the hero's lower edge into
   the portal background so the immersive image has no hard cut-off line
   where the editorial content begins. Sits below the floating text. */
.evx-hero-immersive::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 38%;
    z-index: 1;
    background: linear-gradient(to top,
        var(--evx-bg) 0%,
        color-mix(in oklab, var(--evx-bg) 55%, transparent) 45%,
        transparent 100%);
    pointer-events: none;
}
/* keep the floating title/meta above the fade */
.evx-hero-immersive__inner { z-index: 3; }

/* ============================================================
   7 · PREMIUM MOBILE NAV  (Alpine-driven glassmorphism overlay)
   ------------------------------------------------------------
   AR-09: all rules are semantic BEM classes — zero inline styles.
   Replaces the Bootstrap offcanvas pattern. Active on ≤960px only.
   Desktop horizontal nav is untouched (d-none d-md-flex handles it).
   ============================================================ */

/* ── Hamburger toggle (mobile only) ─────────────────────────── */
.evx-hdr__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  margin-left: auto;
  background: transparent;
  border: none;
  border-radius: 10px;
  color: var(--evx-ink);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s var(--pubx-ease);
}
.evx-hdr__toggle:hover {
  background: color-mix(in oklab, var(--pubx-ink) 6%, transparent);
}
@media (max-width: 960px) {
  .evx-hdr__toggle { display: inline-flex; }
}

/* ── Desktop actions row (replaces inline gap/align) ─────────── */
.evx-hdr__actions {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-left: auto;
}

/* ── Mobile nav overlay root ─────────────────────────────────── */
.evx-mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
}
@media (min-width: 961px) {
  .evx-mobile-nav { display: none; }
}

/* ── Backdrop ────────────────────────────────────────────────── */
.evx-mobile-nav__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.48);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  pointer-events: auto;
  cursor: pointer;
}

/* ── Glassmorphism side-panel ────────────────────────────────── */
.evx-mobile-nav__panel {
  position: relative;
  z-index: 1;
  width: min(340px, 92vw);
  height: 100%;
  display: flex;
  flex-direction: column;
  /* Glassmorphism: semi-transparent cream + blur */
  background: rgba(251, 246, 236, 0.92);
  backdrop-filter: blur(12px) saturate(1.6);
  -webkit-backdrop-filter: blur(12px) saturate(1.6);
  border-left: 1px solid var(--pubx-line);
  box-shadow: -16px 0 48px -16px rgba(20, 12, 4, 0.32);
  pointer-events: auto;
  overflow: hidden;
}

/* Panel header row */
.evx-mobile-nav__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--pubx-line);
  flex: 0 0 auto;
}

.evx-mobile-nav__brand {
  font: 400 18px/1 var(--pubx-display);
  color: var(--pubx-ink);
  text-decoration: none;
  letter-spacing: -0.01em;
}

/* X close button */
.evx-mobile-nav__close {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: color-mix(in oklab, var(--pubx-ink) 7%, transparent);
  color: var(--pubx-ink-soft);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s var(--pubx-ease);
}
.evx-mobile-nav__close:hover {
  background: color-mix(in oklab, var(--pubx-ink) 14%, transparent);
}

/* Scrollable body */
.evx-mobile-nav__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 16px 0 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Nav link list */
.evx-mobile-nav__links {
  list-style: none;
  margin: 0;
  padding: 0 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Individual link — minimum 52px touch target */
.evx-mobile-nav__link {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 0 16px;
  border-radius: 12px;
  text-decoration: none;
  font: 500 17px/1.2 var(--pubx-body);
  color: var(--pubx-ink-soft);
  letter-spacing: -0.01em;
  transition: background 0.15s var(--pubx-ease),
              color 0.15s var(--pubx-ease);
}
.evx-mobile-nav__link:hover {
  background: color-mix(in oklab, var(--pubx-ink) 6%, transparent);
  color: var(--pubx-ink);
}
.evx-mobile-nav__link.is-active {
  color: var(--pubx-accent);
  background: color-mix(in oklab, var(--pubx-accent) 9%, transparent);
  font-weight: 600;
}
.evx-mobile-nav__link--danger { color: #dc2626; font-weight: 500; }
.evx-mobile-nav__link--danger:hover { background: #fef2f2; color: #dc2626; }

/* Horizontal rule divider between link groups */
.evx-mobile-nav__rule {
  height: 1px;
  background: var(--pubx-line);
  margin: 12px 24px;
  border: none;
  flex: 0 0 auto;
}

/* Footer strip — sign-in CTA for guests */
.evx-mobile-nav__footer {
  flex: 0 0 auto;
  padding: 16px 24px;
  padding-bottom: max(24px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--pubx-line);
  margin-top: auto;
}

/* ── Alpine x-transition helper classes ──────────────────────── */
/* Backdrop fade */
.evx-nav-fade-enter  { transition: opacity 0.24s ease; }
.evx-nav-fade-off    { opacity: 0; }
.evx-nav-fade-on     { opacity: 1; }
/* Panel slide from right */
.evx-nav-slide-enter { transition: transform 0.32s cubic-bezier(0.2, 0.7, 0.2, 1); }
.evx-nav-slide-off   { transform: translateX(100%); }
.evx-nav-slide-on    { transform: translateX(0); }
/* Dropdown fade (reuses same pattern) */
.evx-dropdown-fade-enter { transition: opacity 0.18s ease, transform 0.18s ease; }
.evx-dropdown-fade-off   { opacity: 0; transform: translateY(-4px); }
.evx-dropdown-fade-on    { opacity: 1; transform: translateY(0); }

/* ============================================================
   9 · EVENT DETAIL PAGE — Premium immersive redesign
   ------------------------------------------------------------
   AR-09: zero inline styles (exception: background-image url
   which is dynamic and cannot be encoded as a CSS class).
   AR-01/AR-18: public portal only.

   Layout:
     evx-event-hero   — pure cover-fit background, 40 / 50vh
     evx-event-meta-card — slides 32px over hero bottom edge,
                           holds title + meta facts + description
     ev-pub__shell    — two-column content + ticketing (reset
                        from server.css margin-top: -120px)
   ============================================================ */

/* ── Event hero: pure background image ──────────────────────── */
.evx-event-hero {
  width: 100%;
  height: 40vh;
  min-height: 200px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: #1a1d29;          /* shown while image loads */
}
@media (min-width: 960px) {
  .evx-event-hero { height: 50vh; max-height: 640px; }
}
.evx-event-hero--flat {
  background-image: linear-gradient(
    145deg,
    var(--pubx-secondary) 0%,
    color-mix(in oklab, var(--pubx-secondary) 48%, var(--pubx-accent)) 52%,
    var(--pubx-accent) 100%
  );
}

/* ── Meta card: 32px overlap, rounded top, large shadow ─────── */
.evx-event-meta-card {
  background: var(--evx-bg, #f0eeea);
  border-radius: 24px 24px 0 0;
  margin-top: -32px;
  position: relative;
  z-index: 2;
  box-shadow: 0 -14px 48px rgba(20, 12, 4, 0.18);
}

.evx-event-meta-card__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(28px, 4vw, 44px) clamp(20px, 3vw, 40px) 36px;
}

/* Breadcrumb nav */
.evx-event-meta-card__crumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 6px;
  margin-bottom: 16px;
  font: 400 12.5px/1.3 var(--pubx-body);
  color: var(--pubx-muted);
}
.evx-event-meta-card__crumb a {
  color: var(--pubx-muted);
  text-decoration: none;
  transition: color 0.15s;
}
.evx-event-meta-card__crumb a:hover { color: var(--pubx-ink); }
.evx-event-meta-card__crumb-sep { color: var(--pubx-line); }

/* Category chip */
.evx-event-meta-card__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--pubx-accent) 10%, transparent);
  border: 1px solid color-mix(in oklab, var(--pubx-accent) 24%, transparent);
  font: 600 11px/1 var(--pubx-body);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--pubx-accent);
  margin-bottom: 14px;
}
.evx-event-meta-card__chip-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--pubx-accent);
}

/* Event title */
.evx-event-meta-card__title {
  font: 400 clamp(30px, 5vw, 52px)/1.06 var(--pubx-display);
  color: var(--pubx-ink);
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  max-width: 22ch;
}

/* Short blurb */
.evx-event-meta-card__blurb {
  font: 400 clamp(14px, 2vw, 16px)/1.65 var(--pubx-body);
  color: var(--pubx-ink-soft);
  max-width: 60ch;
  margin: 0 0 28px;
}

/* ── Meta fact strip ─────────────────────────────────────────── */
.evx-event-meta-card__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 40px;
  padding: 22px 24px;
  background: var(--pubx-card-2);
  border: 1px solid var(--pubx-line);
  border-radius: var(--pubx-radius);
  box-shadow: var(--pubx-shadow);
  margin-bottom: 32px;
}
@media (max-width: 640px) {
  .evx-event-meta-card__facts {
    flex-direction: column;
    gap: 16px;
    padding: 18px 18px;
  }
}

/* Individual fact item: [icon-box] [label / value / sub] */
.evx-meta-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex: 0 1 auto;
  min-width: 0;
}

.evx-meta-item__icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: color-mix(in oklab, var(--pubx-accent) 8%, var(--pubx-card));
  border: 1px solid color-mix(in oklab, var(--pubx-accent) 16%, transparent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--pubx-accent);
  flex-shrink: 0;
}

.evx-meta-item__text { flex: 1; min-width: 0; }

.evx-meta-item__label {
  font: 600 10.5px/1 var(--pubx-body);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pubx-muted);
  margin-bottom: 5px;
}
.evx-meta-item__value {
  font: 600 14.5px/1.3 var(--pubx-body);
  color: var(--pubx-ink);
}
.evx-meta-item__sub {
  font: 400 12.5px/1.4 var(--pubx-body);
  color: var(--pubx-muted);
  margin-top: 2px;
}
.evx-meta-item__link {
  display: inline-block;
  font: 500 12px/1 var(--pubx-body);
  color: var(--pubx-accent);
  text-decoration: none;
  margin-top: 5px;
  transition: opacity 0.15s;
}
.evx-meta-item__link:hover { opacity: 0.75; text-decoration: underline; }

/* ── Description inside meta card ────────────────────────────── */
.evx-event-meta-card__desc {
  margin-top: 0;        /* sits below the facts strip */
}

/* ── Shell reset: remove server.css margin-top: -120px ──────── */
.evx-event-detail .ev-pub__shell {
  margin-top: 0;
  /* max-width falls back to server.css 1200px — keeps layout aligned with the
     hero wrap (also 1200px) on wide viewports. Removing 100% override fixes
     the desktop bleed where the two-column grid was wider than the hero. */
  overflow-x: clip;
}

/* ============================================================
   10 · EVENT DETAIL — Dashain design language
   ------------------------------------------------------------
   Design reference: Dashain Fest 2026 / Sambandha Events.
   Layout: constrained hero → 65 / 35 grid (card + sticky rail).
   Tokens: new --evd-* for marigold + plum; existing --pubx-*
   for terracotta / ink / card palette.
   AR-09: no inline styles. AR-01/AR-18: public portal only.
   ============================================================ */

/* ── Supplementary design tokens ────────────────────────────── */
:root {
  --evd-marigold:         #EAB308;
  --evd-marigold-tint:    rgba(234, 179, 8, .14);
  --evd-mustard:          #EAB308;
  --evd-mustard-tint:     rgba(234, 179, 8, .12);
  --evd-mustard-bg:       #FEF9C3;
  --evd-mustard-ink:      #713F12;
  --evd-plum:             #C2410C;
  --evd-plum-deep:        #9A3412;
  --evd-sh-sm:            0 1px 2px rgba(28, 10, 4, .05), 0 2px 6px rgba(28, 10, 4, .04);
  --evd-sh-md:            0 2px 6px rgba(28, 10, 4, .05), 0 10px 24px -8px rgba(28, 10, 4, .14);
  --evd-sh-lg:            0 4px 10px rgba(28, 10, 4, .06), 0 26px 60px -18px rgba(28, 10, 4, .26);
  --evd-sh-cta:           0 6px 16px -4px rgba(194, 65, 12, .42);
  --evd-font-display:     'Outfit', system-ui, -apple-system, sans-serif;
  --evd-font-serif:       'Outfit', system-ui, -apple-system, sans-serif;
  --evd-font-mono:        'DM Mono', 'JetBrains Mono', ui-monospace, monospace;
}

/* ── Article background (warm radial glows) ─────────────────── */
.evx-event-detail {
  background-image:
    radial-gradient(900px 400px at 88% -6%, rgba(234, 179, 8, .07), transparent 62%),
    radial-gradient(700px 400px at -4% 3%, rgba(194, 65, 12, .05), transparent 55%);
  background-attachment: local;
  overflow-x: clip;
}

/* ── Hero section wrapper ────────────────────────────────────── */
.evx-event-detail__hero-section { padding-top: 24px; }
.evx-event-detail__hero-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
}

/* ── Hero save pill — dark frosted glass overlaid on poster, top-right ── */
.evx-poster-save {
  position: absolute;
  top: 20px;
  right: 44px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 15px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(20,12,4,.52);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  color: #fff;
  font-family: var(--pubx-body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .15s, background .2s, border-color .2s, box-shadow .2s;
  box-shadow: 0 2px 14px rgba(0,0,0,.28);
}
.evx-poster-save:hover {
  background: rgba(20,12,4,.68);
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(0,0,0,.36);
}
.evx-poster-save svg {
  width: 16px; height: 16px; flex-shrink: 0;
  transition: fill .2s, stroke .2s;
}
.evx-poster-save--saved {
  background: rgba(194,65,12,.88);
  border-color: rgba(255,255,255,.2);
  color: #fff;
}
.evx-poster-save--saved svg {
  fill: #fff;
  stroke: #fff;
}
.evx-poster-save--saved:hover {
  background: rgba(162,53,23,.92);
}
/* server.css `.evx-page button { color: inherit }` is (0,1,1) and beats (0,1,0) —
   re-assert white text at (0,2,0) so the pill stays legible on any poster. */
.evx-page .evx-poster-save { color: #fff; }
.evx-page .evx-poster-save.evx-poster-save--saved { color: #fff; }
@media (max-width: 620px) {
  .evx-poster-save { top: 14px; right: 32px; padding: 8px 13px; font-size: 12.5px; }
}

/* ── Poster-hero container (from Dashain design)
   Rich plum → terracotta gradient with a soft dot-grid overlay.
   The banner/poster image sits inside as a contained, shadow-lifted
   element — works for both portrait festival posters and
   landscape event banners. ────────────────────────────────────── */
.evx-poster-hero {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  /* vertical breathing room around the image */
  padding: 20px 24px;
  /* Background colour is derived at runtime from the event image's
     dominant colour (see event_detail.html). --evx-hero-bg is set by JS;
     the gradient below provides a subtle top→bottom depth shade around it.
     Falls back to a neutral plum if extraction fails or JS is disabled. */
  --evx-hero-bg: #C2410C;
  background:
    linear-gradient(160deg,
      color-mix(in srgb, var(--evx-hero-bg) 86%, white) 0%,
      var(--evx-hero-bg) 52%,
      color-mix(in srgb, var(--evx-hero-bg) 84%, black) 100%);
  transition: background .45s ease;
}

/* Flat fallback (no image) — terracotta → mustard on-brand gradient */
.evx-poster-hero--flat {
  padding: 80px 32px;
  min-height: 200px;
  background: linear-gradient(135deg, var(--pubx-accent) 0%, var(--pubx-mustard-deep) 100%);
}

/* Blurred, zoomed copy of the poster that fills the wide frame with the
   artwork's own colours — far richer than a flat tint for portrait posters. */
.evx-poster-hero__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(46px) saturate(1.3) brightness(.6);
  transform: scale(1.2);          /* hide the blurred edge fringe */
  pointer-events: none;
}

/* The sharp banner / poster image itself */
.evx-poster-hero__img {
  position: relative;
  z-index: 1;
  /* Portrait posters: cap at 440px wide (matches design).
     Landscape banners: allow up to 760px so they fill the space. */
  width: 100%;
  max-width: 760px;
  max-height: 620px;
  object-fit: contain;
  border-radius: 14px;
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .55);  /* lift off the backdrop */
  display: block;
}

/* Narrow portrait banners stay centred at 440px */
.evx-poster-hero__img--portrait {
  max-width: 440px;
}

@media (max-width: 620px) {
  .evx-poster-hero {
    padding: 22px 16px;
    border-radius: var(--pubx-radius);
  }
  .evx-poster-hero__img {
    max-height: min(72vw, 420px);
  }
}

/* ── Two-column layout grid (65 / 35) ────────────────────────── */
.evx-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 40px;
  align-items: start;
  padding-bottom: 30px;
  margin-top: 18px;
  position: relative;
  z-index: 5;
}
@media (max-width: 980px) {
  .evx-detail-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
    padding-bottom: 14px;
  }
}
@media (max-width: 620px) {
  .evx-detail-layout { padding-bottom: 14px; }
}

/* ── Left: main content card ─────────────────────────────────── */
.evx-detail-card {
  background: var(--pubx-card-2);
  border: 1px solid var(--pubx-line);
  border-radius: 20px;
  box-shadow: var(--evd-sh-md);
  padding: 44px 48px;
  min-width: 0;
}
@media (max-width: 980px) { .evx-detail-card { padding: 32px 28px; } }
@media (max-width: 620px) {
  .evx-detail-card { padding: 26px 20px; border-radius: 18px; }
}

/* Category pill */
.evx-detail-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: color-mix(in oklab, var(--pubx-accent) 10%, transparent);
  color: var(--pubx-accent-deep, var(--pubx-accent));
  font-family: var(--evd-font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: 999px;
}
.evx-detail-pill__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pubx-accent);
  flex-shrink: 0;
}

/* Event title */
.evx-detail-title {
  font-family: var(--evd-font-serif);
  font-weight: 700;
  font-size: clamp(23px, 3.5vw, 30px);
  line-height: 1.06;
  letter-spacing: -.018em;
  margin: 20px 0 0;
  color: var(--pubx-ink);
  overflow-wrap: break-word;
  word-break: break-word;
}
@media (max-width: 620px) {
  .evx-detail-title { font-size: clamp(21px, 5.5vw, 30px); }
}

/* Subtitle / blurb */
.evx-detail-blurb {
  font-size: 16px;
  line-height: 1.6;
  color: var(--pubx-ink-soft);
  max-width: 56ch;
  margin: 18px 0 0;
  font-weight: 400;
}

/* Quick-info 2-col grid */
/* At-a-glance When/Where — one light panel split by a divider (actions
   live in the booking rail, so this stays a clean info summary). */
.evx-quickinfo {
  display: flex;
  margin-top: 24px;
  background: var(--pubx-card);
  border: 1px solid var(--pubx-line);
  border-radius: 16px;
  overflow: hidden;
}
.evx-qi {
  flex: 1;
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  min-width: 0;
}
.evx-qi + .evx-qi { border-left: 1px solid var(--pubx-line); }
@media (max-width: 620px) {
  .evx-quickinfo { flex-direction: column; }
  .evx-qi + .evx-qi { border-left: 0; border-top: 1px solid var(--pubx-line); }
}
.evx-qi__ico {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--evd-mustard-tint);
  color: var(--evd-mustard-deep);
}
.evx-qi__ico svg { width: 18px; height: 18px; }
.evx-qi__k {
  font-family: var(--evd-font-mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pubx-muted);
}
.evx-qi__v {
  font-size: 14px;
  font-weight: 600;
  margin-top: 2px;
  line-height: 1.3;
  color: var(--pubx-ink);
  overflow-wrap: break-word;
  word-break: break-word;
}
.evx-qi__sub {
  font-size: 12.5px;
  color: var(--pubx-ink-soft);
  margin-top: 1px;
  line-height: 1.35;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Section rule & heading */
.evx-detail-rule {
  height: 1px;
  background: var(--pubx-line);
  margin: 20px 0;
  border: 0;
}
.evx-detail-h2 {
  font-family: var(--evd-font-serif);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -.01em;
  margin: 0 0 16px;
  color: var(--pubx-ink);
}

/* Prose / description */
.evx-detail-prose {
  overflow-wrap: break-word;
  word-break: break-word;
  overflow-x: hidden;
  min-width: 0;
}
.evx-detail-prose * { max-width: 100%; box-sizing: border-box; }
.evx-detail-prose pre { white-space: pre-wrap; overflow-x: auto; }
.evx-detail-prose blockquote { margin-inline: 0; }
.evx-detail-prose p {
  font-size: 16px;
  line-height: 1.72;
  color: var(--pubx-ink-soft);
  margin: 0 0 16px;
}
.evx-detail-prose p:last-child { margin-bottom: 0; }
.evx-detail-prose .evx-prose-lead {
  font-weight: 600;
  color: var(--pubx-ink);
  font-size: 16.5px;
}
.evx-detail-prose strong { color: var(--pubx-ink); font-weight: 600; }
.evx-detail-prose em { font-style: italic; color: var(--pubx-accent); }

/* Tags */
.evx-detail-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.evx-detail-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--pubx-line);
  background: var(--pubx-card);
  color: var(--pubx-ink);
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 500;
  transition: background .2s, border-color .2s, transform .15s;
}
.evx-detail-tag:hover {
  background: var(--evd-mustard-tint);
  border-color: var(--evd-mustard);
  transform: translateY(-1px);
}
.evx-detail-tag__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--evd-mustard);
  flex-shrink: 0;
}

/* Map placeholder */
.evx-detail-map {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--pubx-line);
  height: 200px;
  box-shadow: var(--evd-sh-sm);
  background:
    repeating-linear-gradient(0deg, rgba(74, 35, 64, .06) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(74, 35, 64, .06) 0 1px, transparent 1px 40px),
    radial-gradient(120px 120px at 60% 38%, rgba(217, 138, 43, .16), transparent 70%),
    var(--pubx-card);
}
.evx-detail-map__road { position: absolute; background: rgba(28, 10, 4, .1); }
.evx-detail-map__r1 { left: -5%; right: -5%; top: 56%; height: 8px; transform: rotate(-7deg); }
.evx-detail-map__r2 { top: -5%; bottom: -5%; left: 38%; width: 7px; transform: rotate(6deg); }
.evx-detail-map__r3 { left: 8%; right: 20%; top: 26%; height: 5px; transform: rotate(4deg); }
.evx-detail-map__pin {
  position: absolute;
  left: 60%;
  top: 38%;
  transform: translate(-50%, -100%);
  color: var(--pubx-accent);
  filter: drop-shadow(0 5px 6px rgba(28, 10, 4, .3));
}
.evx-detail-map__pin svg { width: 38px; height: 38px; }
.evx-detail-map__chip {
  position: absolute;
  left: 16px; bottom: 16px;
  background: rgba(255, 253, 248, .92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--pubx-line);
  border-radius: 12px;
  padding: 9px 14px;
  font-size: 13px;
  color: var(--pubx-accent);
  font-weight: 600;
  white-space: nowrap;
  display: inline-flex;
  gap: 5px;
  align-items: center;
  text-decoration: none;
  transition: background .2s, gap .2s, border-color .2s;
}
.evx-detail-map__chip:hover {
  gap: 8px;
  background: rgba(255, 253, 248, 1);
  border-color: color-mix(in oklab, var(--pubx-accent) 35%, var(--pubx-line));
}
.evx-detail-map__chip svg { width: 14px; height: 14px; }
.evx-detail-venue-tba {
  font-size: 13.5px; color: var(--pubx-ink-soft);
  font-style: italic; margin: 4px 0 0;
}

/* Refund row */
.evx-detail-refund { display: flex; align-items: center; gap: 13px; }
.evx-detail-refund__ico {
  width: 40px; height: 40px; flex: none;
  border-radius: 11px;
  display: grid; place-items: center;
  background: color-mix(in oklab, var(--pubx-accent) 10%, transparent);
  color: var(--pubx-accent);
}
.evx-detail-refund__ico svg { width: 20px; height: 20px; }
.evx-detail-refund__title { font-weight: 600; font-size: 15px; color: var(--pubx-ink); }
.evx-detail-refund__sub { font-size: 13px; color: var(--pubx-ink-soft); margin-top: 2px; }

/* ── Right rail (sticky) ─────────────────────────────────────── */
.evx-detail-rail {
  position: sticky;
  top: 92px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
@media (max-width: 980px) {
  .evx-detail-rail { position: static; top: auto; }
}
@media (max-width: 620px) {
  .evx-detail-rail { width: 100%; }
}

/* Ticket card */
.evx-ticket {
  background: var(--pubx-card-2);
  border: 1px solid var(--pubx-line);
  border-radius: 20px;
  box-shadow: var(--evd-sh-lg);
  overflow: hidden;
}

/* Ticket top */
.evx-ticket__top {
  padding: 18px 22px 18px;
  background: linear-gradient(180deg, var(--pubx-card) 0%, var(--pubx-card-2) 100%);
  border-bottom: 1px solid var(--pubx-line);
}

/* Host strip (at top of ticket) */
.evx-ticket__hosttop {
  display: flex;
  align-items: center;
  gap: 11px;
}
.evx-ticket__host-av {
  width: 40px; height: 40px;
  border-radius: 50%; flex: none;
  display: grid; place-items: center;
  color: #fff;
  font-family: var(--evd-font-serif);
  font-size: 17px; font-weight: 600;
  background: linear-gradient(150deg, var(--pubx-accent) 0%, var(--pubx-mustard-deep) 100%);
  box-shadow: var(--evd-sh-sm);
  user-select: none;
}
.evx-ticket__host-info { flex: 1; min-width: 0; }
.evx-ticket__host-k {
  font-family: var(--evd-font-mono);
  font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pubx-muted);
}
.evx-ticket__host-name {
  font-family: var(--pubx-body);
  font-size: 15px; font-weight: 600;
  letter-spacing: -.005em;
  margin-top: 1px;
  color: var(--pubx-ink);
  overflow-wrap: break-word;
  word-break: break-word;
  line-height: 1.3;
}
.evx-ticket__host-contact {
  background: none; border: 0; padding: 0; margin-top: 3px;
  font-family: var(--pubx-body);
  font-size: 12px; font-weight: 600;
  color: var(--pubx-accent);
  cursor: pointer;
  display: block;
  transition: color .2s;
  text-align: left;
}
.evx-ticket__host-contact:hover { color: var(--pubx-accent-deep, var(--pubx-accent)); }

/* Follow button — ghost/outline to keep visual hierarchy below the primary CTA */
.evx-ticket__follow {
  flex: none;
  display: inline-flex;
  align-items: center; gap: 7px;
  border: 1px solid color-mix(in oklab, var(--pubx-ink) 25%, transparent);
  background: transparent; color: var(--pubx-ink);
  border-radius: 999px; padding: 8px 13px;
  font-size: 12.5px; font-weight: 600;
  cursor: pointer;
  transition: background .2s, color .2s, transform .15s, border-color .2s;
}
.evx-ticket .evx-ticket__follow { color: var(--pubx-ink); }
.evx-ticket__follow:hover {
  background: var(--pubx-mustard-tint);
  border-color: var(--pubx-mustard);
  color: var(--pubx-mustard-ink);
  transform: translateY(-1px);
}
.evx-ticket__follow--on {
  background: var(--pubx-mustard-tint);
  border-color: var(--pubx-mustard);
  color: var(--pubx-mustard-ink);
}
.evx-ticket .evx-ticket__follow--on { color: var(--pubx-mustard-ink); }
.evx-ticket__follow svg { width: 15px; height: 15px; }

/* Divider between host strip and header */
.evx-ticket__host-divider {
  height: 1px;
  background: var(--pubx-line);
  margin: 14px 0;
}

/* Ticket registration header — kicker + title share a baseline row so the
   block reads as one compact line instead of three stacked rows. */
.evx-ticket__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}
.evx-ticket__kicker {
  font-family: var(--evd-font-mono);
  font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--pubx-muted); font-weight: 500;
  order: -1; flex-basis: 100%;
}
.evx-ticket__title {
  font-family: var(--evd-font-serif);
  font-weight: 500; font-size: 21px;
  line-height: 1.1; letter-spacing: -.012em;
  margin: 2px 0 0;
  color: var(--pubx-ink);
}
.evx-ticket__badges {
  display: inline-flex; flex-wrap: wrap; gap: 7px; margin: 0 0 0 auto;
}
.evx-ticket__badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--evd-font-mono); font-size: 10px;
  letter-spacing: .08em; text-transform: uppercase; font-weight: 500;
  padding: 6px 11px; border-radius: 999px;
}
.evx-ticket__badge--open {
  background: color-mix(in oklab, var(--pubx-accent) 10%, transparent);
  color: var(--pubx-accent-deep, var(--pubx-accent));
}
.evx-ticket__badge--sale {
  background: rgba(45,80,67,.12);
  border: 1px solid rgba(45,80,67,.28);
  color: #2D5043;
}
.evx-ticket__badge--price {
  background: var(--evd-mustard-tint);
  color: var(--evd-mustard-ink);
}
.evx-ticket__badge--free {
  background: var(--evd-mustard-tint);
  color: var(--evd-mustard-ink);
}

/* Live pulsing dot on badge */
.evx-ticket__badge-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--pubx-accent);
  flex-shrink: 0;
  position: relative;
}
.evx-ticket__badge-dot::after {
  content: "";
  position: absolute; inset: -5px;
  border-radius: 50%;
  border: 1.5px solid var(--pubx-accent);
  opacity: .5;
  animation: evd-ping 1.8s ease-out infinite;
}
@keyframes evd-ping {
  0%   { transform: scale(.6); opacity: .6; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* Countdown strip */
.evx-ticket__countdown {
  display: flex; gap: 7px; margin-top: 14px;
}
.evx-cd-unit {
  flex: 1;
  background: color-mix(in oklab, var(--pubx-accent) 5%, var(--pubx-bg));
  border: 1px solid var(--pubx-line);
  border-radius: 8px; padding: 7px 4px; text-align: center;
}
.evx-cd-num {
  font-family: var(--evd-font-mono);
  font-size: 1.05rem; font-weight: 500; line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--pubx-ink);
}
.evx-cd-lab {
  font-family: var(--evd-font-mono);
  font-size: 9px; letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pubx-muted); margin-top: 5px;
}

/* Ticket body */
.evx-ticket__body { padding: 18px 22px 22px; }

/* Primary CTA button */
.evx-ticket__cta {
  width: 100%; border: none; border-radius: 999px;
  background: var(--pubx-accent); color: #fff;
  font-family: var(--pubx-display); font-size: 15px; font-weight: 700; letter-spacing: .01em;
  padding: 14px 22px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  box-shadow: 0 8px 24px rgba(194,65,12,0.32);
  transition: transform .15s, box-shadow .25s, background .2s, color .15s;
  cursor: pointer;
  text-decoration: none;
}
/* .evx-page button { color: inherit } (0-1-1) beats (0-1-0) — restate with higher specificity */
.evx-ticket .evx-ticket__cta { color: #fff; }
.evx-ticket__cta:hover {
  background: var(--pubx-accent-deep, var(--pubx-accent));
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -6px rgba(194, 65, 12, .50);
  color: #fff;
}
.evx-ticket__cta:active { transform: translateY(0); }
.evx-ticket__cta svg { width: 18px; height: 18px; transition: transform .2s; }
.evx-ticket__cta:hover svg { transform: translateX(3px); }
.evx-ticket__cta[disabled], .evx-ticket__cta:disabled {
  opacity: .55; cursor: not-allowed;
  transform: none; box-shadow: none;
}
.evx-ticket__cta-help {
  font-size: 12.5px; color: var(--pubx-muted);
  text-align: center; margin: 12px 0 0; line-height: 1.45;
}

/* Meta rows inside ticket */
.evx-ticket__meta { display: flex; flex-direction: column; gap: 0; margin-top: 18px; }
.evx-ticket__meta-row {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 10px 0;
  border-top: 1px solid var(--pubx-line);
}
.evx-ticket__meta-row:first-child { border-top: 0; padding-top: 0; }
.evx-ticket__meta-ico {
  width: 32px; height: 32px; flex: none;
  border-radius: 9px; display: grid; place-items: center;
  background: rgba(194,65,12,.10); color: var(--pubx-accent);
}
.evx-ticket__meta-ico svg { width: 17px; height: 17px; }
.evx-ticket__meta-k {
  font-family: var(--evd-font-mono); font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--pubx-muted);
}
.evx-ticket__meta-v {
  font-size: 14px; font-weight: 600; margin-top: 2px;
  line-height: 1.35; color: var(--pubx-ink);
}
.evx-ticket__meta-v--muted {
  font-weight: 400; font-style: italic; color: var(--pubx-ink-soft);
}
.evx-ticket__meta-s {
  font-size: 12.5px; color: var(--pubx-ink-soft);
  margin-top: 1px; line-height: 1.4;
}
.evx-ticket__meta-link {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; font-weight: 600; color: var(--pubx-accent);
  margin-top: 4px; text-decoration: none;
  transition: gap .2s;
}
.evx-ticket__meta-link svg { width: 13px; height: 13px; }
.evx-ticket__meta-link:hover { gap: 8px; }

/* Ghost action buttons (Add to calendar / Share) */
.evx-ticket__actions { display: flex; gap: 8px; margin-top: 16px; }
/* Match the Save pill to the slimmer ghost buttons in this row */
.evx-ticket__actions .sb-btn-save {
  flex: 1;
  justify-content: center;
  padding: 9px 10px;
  font-size: 12.5px;
  box-shadow: none;
}
.evx-ticket__btn-ghost {
  flex: 1;
  border: 1px solid var(--pubx-line);
  background: var(--pubx-card-2); color: var(--pubx-ink);
  border-radius: 999px; padding: 9px 10px;
  min-height: 44px;
  font-size: 12.5px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer;
  transition: background .2s, border-color .2s, transform .15s;
  font-family: var(--pubx-body);
  white-space: nowrap;
}
.evx-ticket__btn-ghost:hover {
  background: var(--pubx-card);
  border-color: var(--evd-mustard);
  transform: translateY(-1px);
}
.evx-ticket__btn-ghost svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ── Mobile sticky CTA override (warm glassmorphism) ─────────── */
@media (max-width: 960px) {
  /* The sticky CTA is the LAST element in the shell on the event detail
     page, so ev-pub's 76px padding-bottom reserve is redundant — it
     just adds a blank gap above the footer. Zero it out here. */
  .evx-event-detail.ev-pub { padding-bottom: 0; }
}
@media (max-width: 620px) {
  .evx-event-detail .evx-sticky-cta {
    background: color-mix(in oklab, var(--pubx-card) 92%, transparent);
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    border-top: 1px solid var(--pubx-line);
    box-shadow: 0 -8px 30px -12px rgba(28, 10, 4, .25);
  }
}

/* ── Reveal animation (staggered on load) ────────────────────── */
.evx-detail-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s cubic-bezier(.2, .7, .2, 1),
              transform .7s cubic-bezier(.2, .7, .2, 1);
}
.evx-detail-reveal.is-visible {
  opacity: 1;
  transform: none;
}
/* Staggered delay modifiers — semantic classes, not inline styles */
.evx-detail-reveal--d1 { transition-delay:   0ms; }
.evx-detail-reveal--d2 { transition-delay:  80ms; }
.evx-detail-reveal--d3 { transition-delay: 160ms; }

@media (prefers-reduced-motion: reduce) {
  .evx-detail-reveal { opacity: 1; transform: none; }
}

/* Green live-dot variant (On sale badge) */
.evx-ticket__badge-dot--green {
  background: #16a34a;
}
.evx-ticket__badge-dot--green::after {
  border-color: #16a34a;
}

/* ============================================================
   11 · MY TICKETS DASHBOARD
   ------------------------------------------------------------
   AR-09: zero inline styles — all rules live here.
   AR-01/AR-18: public portal only, evx-myt-* namespace.

   Surfaces:
     .evx-myt-page           — full-page wrapper
     .evx-myt                — dashboard card root
     .evx-myt__header        — title + tab strip
     .evx-myt__tabs / __tab  — tab navigation
     .evx-myt__body          — scrollable content area
     .evx-myt__empty         — empty-state placeholder
     .evx-myt__event-card    — upcoming event row card
     .evx-myt__ticket        — individual ticket cell with QR
     .evx-myt__status-badge  — Sambandha tonal badge variants
     .evx-myt__past-*        — past event grid cards
     .evx-myt__billing-*     — billing & invoices table
     .evx-myt-modal          — guest-edit modal overlay + panel
   ============================================================ */

/* ── Page wrapper ───────────────────────────────────────────── */
.evx-myt-page {
  min-height: 100vh;
  background-color: var(--evx-bg, #f0eeea);
  padding-bottom: 4rem;
}

/* ── Dashboard root card ────────────────────────────────────── */
.evx-myt {
  overflow: hidden;
  border-radius: var(--pubx-radius);
  border: 1px solid var(--pubx-line);
  background: var(--pubx-card-2);
  box-shadow: var(--pubx-shadow);
}

/* ── Header section ─────────────────────────────────────────── */
.evx-myt__header {
  background: var(--pubx-card);
  padding: 2rem 2rem 0;
}

.evx-myt__title {
  font: 400 2rem/1.1 var(--pubx-display);
  color: var(--pubx-ink);
  letter-spacing: -0.02em;
  margin: 0 0 1.5rem;
}

/* ── Tab strip ──────────────────────────────────────────────── */
.evx-myt__tabs {
  display: flex;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  border-bottom: 1px solid var(--pubx-line);
}
.evx-myt__tabs::-webkit-scrollbar { display: none; }

.evx-myt__tab {
  flex-shrink: 0;
  padding: 0.75rem 1.25rem;
  background: transparent;
  border: none;
  /* 2px bottom indicator sits at the container's border line */
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font: 500 0.875rem/1 var(--pubx-body);
  color: var(--pubx-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.18s var(--pubx-ease),
              border-bottom-color 0.18s var(--pubx-ease);
}
.evx-myt__tab:hover { color: var(--pubx-ink-soft); }
.evx-myt__tab.is-active {
  color: var(--pubx-ink);
  border-bottom-color: var(--pubx-accent);
  font-weight: 600;
}

/* ── Body ───────────────────────────────────────────────────── */
.evx-myt__body { padding: 2rem; }

/* ── Empty state ────────────────────────────────────────────── */
.evx-myt__empty {
  padding: 4rem 1rem;
  text-align: center;
  background: var(--pubx-card);
  border-radius: var(--pubx-radius);
  border: 1px solid var(--pubx-line);
}
.evx-myt__empty--bare {
  background: transparent;
  border-color: transparent;
}
.evx-myt__empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: color-mix(in oklab, var(--pubx-ink) 6%, var(--pubx-card));
  color: var(--pubx-muted);
  font-size: 2rem;
  margin-bottom: 1rem;
}
.evx-myt__empty-title {
  font: 700 1.2rem/1.3 var(--pubx-body);
  color: var(--pubx-ink);
  margin: 0 0 0.5rem;
}
.evx-myt__empty-body {
  font: 400 0.9rem/1.55 var(--pubx-body);
  color: var(--pubx-muted);
  max-width: 38ch;
  margin: 0 auto 1.5rem;
}
.evx-myt__empty-body--sm { margin-bottom: 0; }

/* ── Upcoming event cards ────────────────────────────────────── */
.evx-myt__event-card {
  border-radius: var(--pubx-radius);
  border: 1px solid var(--pubx-line);
  overflow: hidden;
  background: var(--pubx-card-2);
  transition: box-shadow 0.22s var(--pubx-ease);
}
.evx-myt__event-card:hover { box-shadow: var(--pubx-shadow-lift); }

/* Left thumbnail column — fixed height, full object-cover */
.evx-myt__event-thumb {
  position: relative;
  min-height: 12rem;
  background: var(--pubx-card);
  overflow: hidden;
}
.evx-myt__event-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Gradient fallback: terracotta → forest green, title anchored bottom-left */
.evx-myt__event-thumb--fallback {
  display: flex;
  align-items: flex-end;
  padding: 1.5rem;
  background: linear-gradient(
    135deg,
    var(--pubx-secondary) 0%,
    color-mix(in oklab, var(--pubx-secondary) 42%, var(--pubx-accent)) 55%,
    var(--pubx-accent) 100%
  );
}
.evx-myt__event-thumb-title {
  font: 700 1.2rem/1.25 var(--pubx-body);
  color: #fff;
  margin: 0;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}

/* Right info column */
.evx-myt__event-info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.25rem;
}
.evx-myt__event-title {
  font: 700 1.35rem/1.2 var(--pubx-body);
  color: var(--pubx-ink);
  letter-spacing: -0.01em;
  margin: 0 0 0.75rem;
}

/* Date / venue meta pill row */
.evx-myt__event-metas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.evx-myt__event-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.7rem;
  background: var(--pubx-card);
  border: 1px solid var(--pubx-line);
  border-radius: var(--pubx-radius-pill);
  font: 500 0.78rem/1.3 var(--pubx-body);
  color: var(--pubx-muted);
}
.evx-myt__event-meta-pill i { color: var(--pubx-accent); font-size: 0.95rem; }

/* "Your Digital Tickets" eyebrow */
.evx-myt__tickets-label {
  font: 700 0.68rem/1 monospace;
  color: var(--pubx-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  border-bottom: 1px solid var(--pubx-line);
  padding-bottom: 0.5rem;
  margin: 0 0 1rem;
}

/* ── Individual ticket cell ──────────────────────────────────── */
.evx-myt__ticket {
  display: flex;
  gap: 0.875rem;
  align-items: flex-start;
  background: var(--pubx-card);
  border: 1px solid var(--pubx-line);
  border-radius: var(--pubx-radius);
  padding: 1rem;
}

/* QR code square: white bg, subtle border */
.evx-myt__ticket-qr {
  flex-shrink: 0;
  background: #fff;
  padding: 3px;
  border-radius: 6px;
  border: 1px solid var(--pubx-line);
}

/* Ticket text content area */
.evx-myt__ticket-body {
  flex: 1 1 auto;
  min-width: 0;
}
.evx-myt__ticket-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.2rem;
}
.evx-myt__ticket-name {
  font: 700 0.875rem/1.25 var(--pubx-body);
  color: var(--pubx-ink);
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.evx-myt__ticket-email {
  font: 400 0.72rem/1.4 var(--pubx-body);
  color: var(--pubx-muted);
  margin: 0 0 0.75rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Status badge — Sambandha tonal palette ──────────────────
   Issued   → midnight ink bg + cream text   (solid, verified)
   Pending  → cream bg + terracotta text     (calls for action)
   Cancelled→ ghost + muted + strikethrough  (de-prioritised)
   ──────────────────────────────────────────────────────────── */
.evx-myt__status-badge {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 0.12rem 0.48rem;
  border-radius: var(--pubx-radius-pill);
  font: 700 0.62rem/1 var(--pubx-body);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.evx-myt__status-badge--issued {
  background: var(--pubx-ink);
  color: var(--pubx-accent-ink);
  border: 1px solid var(--pubx-ink);
}
.evx-myt__status-badge--pending {
  background: var(--pubx-card-2);
  color: var(--pubx-accent);
  border: 1px solid color-mix(in oklab, var(--pubx-accent) 38%, transparent);
}
.evx-myt__status-badge--cancelled {
  background: transparent;
  color: var(--pubx-muted);
  border: 1px solid var(--pubx-line);
  text-decoration: line-through;
  text-decoration-color: color-mix(in oklab, var(--pubx-muted) 45%, transparent);
}

/* ── Ticket action buttons ───────────────────────────────────── */
.evx-myt__ticket-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--pubx-line);
}
.evx-myt__ticket-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0;
  background: transparent;
  border: none;
  font: 600 0.72rem/1 var(--pubx-body);
  cursor: pointer;
  transition: opacity 0.15s var(--pubx-ease);
}
.evx-myt__ticket-btn--accent { color: var(--pubx-accent); }
.evx-myt__ticket-btn--accent:hover { opacity: 0.72; }
.evx-myt__ticket-btn--muted {
  color: var(--pubx-muted);
  cursor: not-allowed;
  margin-left: auto;
}
/* Second muted button does not need auto-margin — only the first pushes right */
.evx-myt__ticket-btn--muted + .evx-myt__ticket-btn--muted { margin-left: 0; }

/* ── Past events grid ────────────────────────────────────────── */
.evx-myt__past-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: var(--pubx-radius);
  border: 1px solid var(--pubx-line);
  overflow: hidden;
  background: var(--pubx-card-2);
  opacity: 0.82;
  transition: opacity 0.2s var(--pubx-ease),
              box-shadow 0.2s var(--pubx-ease);
}
.evx-myt__past-card:hover {
  opacity: 1;
  box-shadow: var(--pubx-shadow);
}
.evx-myt__past-thumb {
  height: 8rem;
  flex-shrink: 0;
  background: var(--pubx-card);
  overflow: hidden;
}
.evx-myt__past-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(1);
}
.evx-myt__past-info {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 1.25rem;
}
.evx-myt__past-title {
  font: 700 1rem/1.25 var(--pubx-body);
  color: var(--pubx-ink);
  margin: 0 0 0.4rem;
}
.evx-myt__past-date {
  font: 400 0.72rem/1.4 var(--pubx-body);
  color: var(--pubx-muted);
  margin: 0 0 0.75rem;
}
.evx-myt__past-footer {
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid var(--pubx-line);
}
.evx-myt__past-badge {
  font: 600 0.68rem/1 var(--pubx-body);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--pubx-muted);
}

/* ── Billing table ───────────────────────────────────────────── */
.evx-myt__billing-wrap {
  border-radius: var(--pubx-radius);
  border: 1px solid var(--pubx-line);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.evx-myt__billing-wrap table { color: var(--pubx-ink); margin-bottom: 0; }
.evx-myt__billing-wrap thead { background: var(--pubx-card); }

.evx-myt__billing-th {
  padding: 0.875rem 1rem;
  font: 600 0.75rem/1 var(--pubx-body);
  color: var(--pubx-muted);
  border-bottom: 1px solid var(--pubx-line);
  white-space: nowrap;
  vertical-align: middle;
}
.evx-myt__billing-th--right  { text-align: right; }
.evx-myt__billing-th--center { text-align: center; }

.evx-myt__billing-td {
  padding: 0.875rem 1rem;
  font: 400 0.875rem/1.4 var(--pubx-body);
  color: var(--pubx-ink);
  vertical-align: middle;
  border-bottom: 1px solid color-mix(in oklab, var(--pubx-line) 55%, transparent);
}
.evx-myt__billing-td--mono {
  font-family: monospace;
  font-size: 0.8rem;
  color: var(--pubx-muted);
}
.evx-myt__billing-td--amount {
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.evx-myt__billing-td--center { text-align: center; }

/* Order status chip: tonal ink (not traffic-light) */
.evx-myt__billing-status {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.55rem;
  border-radius: 4px;
  font: 600 0.68rem/1 var(--pubx-body);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: color-mix(in oklab, var(--pubx-ink) 7%, var(--pubx-card));
  color: var(--pubx-ink);
  border: 1px solid var(--pubx-line);
}

.evx-myt__receipt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  background: transparent;
  border: none;
  padding: 0;
  font: 600 0.875rem/1 var(--pubx-body);
  color: var(--pubx-muted);
  cursor: not-allowed;
}

/* ── Guest edit modal ────────────────────────────────────────── */
.evx-myt-modal {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 10, 5, 0.52);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.evx-myt-modal__panel {
  width: 100%;
  max-width: 28rem;
  margin: 1rem;
  background: var(--pubx-card-2);
  border-radius: var(--pubx-radius);
  border: 1px solid var(--pubx-line);
  box-shadow: var(--pubx-shadow-lift);
  overflow: hidden;
}
.evx-myt-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  background: var(--pubx-card);
  border-bottom: 1px solid var(--pubx-line);
}
.evx-myt-modal__title {
  font: 700 1.05rem/1.2 var(--pubx-body);
  color: var(--pubx-ink);
  margin: 0;
}
.evx-myt-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--pubx-card-2);
  border: 1px solid var(--pubx-line);
  color: var(--pubx-muted);
  cursor: pointer;
  transition: background 0.15s var(--pubx-ease),
              color 0.15s var(--pubx-ease);
}
.evx-myt-modal__close:hover {
  background: color-mix(in oklab, var(--pubx-ink) 8%, var(--pubx-card));
  color: var(--pubx-ink);
}
.evx-myt-modal__body { padding: 1.5rem; }

.evx-myt-modal__group { margin-bottom: 1.25rem; }
.evx-myt-modal__group:last-of-type { margin-bottom: 0; }

.evx-myt-modal__label {
  display: block;
  font: 600 0.82rem/1 var(--pubx-body);
  color: var(--pubx-ink);
  margin-bottom: 0.5rem;
}
.evx-myt-modal__required { color: var(--pubx-accent); }
.evx-myt-modal__hint {
  display: block;
  font: 400 0.72rem/1.45 var(--pubx-body);
  color: var(--pubx-muted);
  margin-top: 0.35rem;
}
.evx-myt-modal__actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.75rem;
  padding-top: 1.25rem;
  margin-top: 1.25rem;
  border-top: 1px solid var(--pubx-line);
}

/* ============================================================
   13 · SAMBANDHA PORTAL — AUTH (Phase A)
   ------------------------------------------------------------
   Faithful port of Event Design/portal/{auth.css,styles.css}.
   Namespace: .sb-*  (canonical redesign system; supersedes the
   interim §8 .evx-auth-* rules, which are now legacy/unused by
   auth templates and slated for removal in a later cleanup).
   AR-09: zero inline styles. AR-32: public portal only.
   ============================================================ */

/* ── Shared primitives — buttons ─────────────────────────────── */
.sb-btn{
  border:none; border-radius:var(--sb-r-pill);
  font-family:var(--sb-font-sans);
  font-size:14.5px; font-weight:600; letter-spacing:.005em;
  padding:12px 22px; display:inline-flex; align-items:center; justify-content:center; gap:9px;
  transition: transform .15s, box-shadow .25s, background .2s, color .2s, border-color .2s;
  white-space:nowrap; cursor:pointer;
}
.sb-btn svg{ width:17px; height:17px; flex:none; }
.sb-btn-primary{ background:var(--sb-accent); color:#fff; box-shadow:var(--sb-sh-cta); }
.sb-btn-primary:hover:not(:disabled){ background:var(--sb-accent-deep); transform:translateY(-2px); box-shadow:0 10px 24px -6px rgba(194,65,12,.5); }
.sb-btn-primary:active{ transform:translateY(0); }
.sb-btn-google{ background:#fff; color:#2a2a2a; border:1px solid var(--sb-line-strong); font-weight:600; }
.sb-btn-google:hover:not(:disabled){ border-color:var(--sb-ink-faint); transform:translateY(-1px); box-shadow:var(--sb-sh-sm); }
.sb-btn-google svg{ width:19px; height:19px; }
.sb-btn-block{ width:100%; justify-content: center; }
.sb-btn-lg{ padding:15px 26px; font-size:15.5px; }
.sb-btn:disabled{ opacity:.65; cursor:default; }

/* ── Shared primitives — fields ──────────────────────────────── */
.sb-field{ margin-bottom:16px; }
.sb-field > label{ display:block; font-family:var(--sb-font-sans); font-size:12.5px; font-weight:600; color:var(--sb-ink-soft); margin-bottom:7px; }
.sb-field__labelrow{ display:flex; justify-content:space-between; align-items:baseline; }
.sb-field__labelrow > label{ display:block; font-family:var(--sb-font-sans); font-size:12.5px; font-weight:600; color:var(--sb-ink-soft); margin-bottom:7px; }
.sb-input{
  width:100%; border:1px solid var(--sb-line-strong); background:var(--sb-paper);
  border-radius:13px; padding:13px 15px; font-family:var(--sb-font-sans); font-size:15px; color:var(--sb-ink);
  transition: border-color .2s, box-shadow .2s, background .2s; box-sizing:border-box;
}
.sb-input:focus{ outline:none; border-color:var(--sb-accent); box-shadow:0 0 0 3px var(--sb-accent-tint); background:var(--sb-card); }
.sb-input::placeholder{ color:var(--sb-ink-faint); }
.sb-input-wrap{ position:relative; }
.sb-input-wrap .sb-ico-lead{ position:absolute; left:14px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--sb-ink-faint); pointer-events:none; }
.sb-input-wrap .sb-input{ padding-left:42px; }
.sb-input-wrap .sb-toggle-pw{ position:absolute; right:8px; top:50%; transform:translateY(-50%); background:none; border:0; width:34px; height:34px; display:grid; place-items:center; color:var(--sb-ink-faint); border-radius:9px; cursor:pointer; }
.sb-input-wrap .sb-toggle-pw:hover{ color:var(--sb-ink); background:var(--sb-card-2); }
.sb-input-wrap .sb-toggle-pw svg{ width:18px; height:18px; }
.sb-field-err{ color:var(--sb-terracotta); font-size:12.5px; margin-top:6px; display:flex; align-items:center; gap:5px; }
.sb-field-err:empty{ display:none; }
.sb-field-err svg{ width:14px; height:14px; flex:none; }
.sb-field-hint{ font-size:12px; color:var(--sb-ink-faint); margin-top:6px; }

/* eyebrow / kicker */
.sb-kicker{ font-family:var(--sb-font-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--sb-ink-faint); font-weight:500; }

/* ── Auth: centered card inside the page shell ──────────────────
   Renders within base_public (header + footer visible). A centered
   form card sits on the cream field with a soft festive wash. */
.sb-auth-centered{
  display:flex; align-items:center; justify-content:center;
  min-height: calc(100svh - 220px);            /* header + footer headroom */
  padding: clamp(36px,6vw,72px) 20px;
  font-family:var(--sb-font-sans); color:var(--sb-ink);
  background:
    radial-gradient(720px 380px at 50% -6%, rgba(194,65,12,.08), transparent 62%),
    radial-gradient(680px 460px at 92% 108%, rgba(234,179,8,.07), transparent 60%),
    var(--sb-paper);
}
.sb-auth-card{
  width:100%; max-width:440px;
  background:var(--sb-card); border:1px solid var(--sb-line);
  border-radius:var(--sb-r-lg); box-shadow:var(--sb-sh-lg);
  padding:36px 40px 40px;
}
/* Card headings are centred; form fields stay left-aligned. */
.sb-auth-card .sb-kicker,
.sb-auth-card .sb-auth-h1,
.sb-auth-card .sb-auth-sub{ display:block; text-align:center; }
@media (max-width: 520px){
  .sb-auth-centered{ min-height: calc(100svh - 160px); padding:28px 16px 48px; }
  .sb-auth-card{ padding:26px 22px 30px; border-radius:var(--sb-r-md); }
}

.sb-auth-form{ width:100%; }
.sb-auth-form .sb-btn-google{ margin-top:22px; }
.sb-auth-submit{ margin-top:14px; }
.sb-auth-form .sb-field-err:not(:empty){ margin-top:14px; }
.sb-auth-h1{ font-family:var(--sb-font-serif); font-weight:500; font-size:clamp(28px,4vw,34px); line-height:1.08; letter-spacing:-.015em; margin:8px 0 0; color:var(--sb-ink); }
.sb-auth-sub{ color:var(--sb-ink-soft); font-size:15px; line-height:1.5; margin:11px 0 0; }

.sb-auth-or{ display:flex; align-items:center; gap:14px; margin:20px 0; }
.sb-auth-or span{ flex:1; height:1px; background:var(--sb-line-strong); }
.sb-auth-or em{ font-family:var(--sb-font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--sb-ink-faint); font-style:normal; }

.sb-auth-link{ background:none; border:0; padding:0; color:var(--sb-accent); font-size:12.5px; font-weight:600; cursor:pointer; transition:color .2s; text-decoration:none; }
.sb-auth-link:hover{ color:var(--sb-accent-deep); }
.sb-auth-link.strong{ font-size:14px; }
.sb-auth-check{ display:flex; align-items:flex-start; gap:9px; font-size:13px; color:var(--sb-ink-soft); margin-top:6px; cursor:pointer; line-height:1.4; }
.sb-auth-check input{ margin-top:2px; accent-color:var(--sb-accent); width:15px; height:15px; flex:none; }
.sb-auth-check a{ color:var(--sb-accent); font-weight:600; }
.sb-auth-foot{ text-align:center; font-size:14px; color:var(--sb-ink-soft); margin:22px 0 0; }
.sb-auth-foot .sb-auth-link{ white-space:nowrap; }

/* password strength */
.sb-pw-strength{ display:flex; align-items:center; gap:11px; margin-top:9px; }
.sb-pw-bars{ display:flex; gap:4px; flex:1; }
.sb-pw-bars span{ height:4px; flex:1; border-radius:3px; background:var(--sb-line-strong); transition:background .25s; }
.sb-pw-bars span.on.s1{ background:#C2410C; }
.sb-pw-bars span.on.s2{ background:#EAB308; }
.sb-pw-bars span.on.s3{ background:#caa53b; }
.sb-pw-bars span.on.s4{ background:var(--sb-green); }
.sb-pw-label{ font-family:var(--sb-font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--sb-ink-faint); white-space:nowrap; }

/* entrance animation */
@keyframes sb-fadeUp{ from{ opacity:0; transform:translateY(13px);} to{ opacity:1; transform:none;} }
.sb-anim-up{ animation: sb-fadeUp .5s cubic-bezier(.2,.7,.2,1) both; }
@media (prefers-reduced-motion: reduce){ .sb-anim-up{ animation-duration:.001s; } }

/* Email-first login — chip + back link (reuse existing §13 tokens, no new colours).
   --sb-ink drives .sb-auth-h1 text; --sb-accent drives .sb-auth-link. */
.sb-auth-chip{ font-weight:600; color:var(--sb-ink); white-space:nowrap; }
.sb-auth-back{
    align-self:flex-start; background:none; border:0; padding:0 0 .35rem;
    font:inherit; color:var(--sb-accent); cursor:pointer;
}
.sb-auth-back:hover{ text-decoration:underline; }
.sb-auth-center{ display:block; text-align:center; }


/* ============================================================
   14 · SAMBANDHA PORTAL — avatar dropdown (header) + Profile
   ------------------------------------------------------------
   Single base (base_public): the account menu lives in the header
   avatar dropdown (.sb-usermenu), DB-driven from request.state.portal_nav
   (AR-07). No persistent sidebar. Ported from portal.css under .sb-*.
   AR-09: zero inline styles. AR-32: public only.
   ============================================================ */

/* ── Avatar ──────────────────────────────────────────────────── */
.sb-avatar{
  width:38px; height:38px; flex:none; border-radius:50%;
  display:inline-grid; place-items:center;
  font-family:var(--sb-font-serif); font-weight:600; font-size:15px; color:#fff;
  background: linear-gradient(150deg, var(--sb-accent) 0%, var(--sb-accent-deep) 100%);
  box-shadow: var(--sb-sh-sm); user-select:none;
}
.sb-avatar--lg{ width:46px; height:46px; font-size:18px; }
.sb-avatar--xl{ width:92px; height:92px; font-size:34px; }
/* Phase 19 — Google avatar photo fills the circle; covers the gradient so the
   text-initials fallback never shows through behind it. */
.sb-avatar__img{ width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; }

/* ── Header notification icon button ─────────────────────────── */
.sb-pnav__icobtn{
  width:42px; height:42px; border-radius:50%; border:1px solid var(--sb-line);
  background:var(--sb-card); color:var(--sb-ink); display:grid; place-items:center;
  transition:.2s;
}
.sb-pnav__icobtn:hover{ background:var(--sb-card-2); border-color:var(--sb-line-strong); }

/* ── Avatar dropdown ─────────────────────────────────────────── */
.sb-usermenu{ position:relative; }
.sb-usermenu__trigger{
  display:flex; align-items:center; gap:8px; background:none; border:0; padding:3px;
  border-radius:var(--sb-r-pill); transition:.2s; cursor:pointer;
}
.sb-usermenu__trigger:hover, .sb-usermenu__trigger.open{ background:var(--sb-card-2); }
.sb-usermenu__name{ font:600 14px/1 var(--sb-font-sans); color:var(--sb-ink); }
.sb-usermenu__chev{ color:var(--sb-ink-soft); transition:transform .2s; }
.sb-usermenu__trigger.open .sb-usermenu__chev{ transform:rotate(180deg); }

.sb-usermenu__pop{
  position:absolute; top:calc(100% + 10px); right:0; width:312px;
  background:var(--sb-card); border:1px solid var(--sb-line); border-radius:var(--sb-r-md);
  box-shadow:var(--sb-sh-lg); overflow:hidden; z-index:1060;
}
.sb-usermenu__head{ display:flex; align-items:center; gap:13px; padding:16px 18px 12px; }
.sb-usermenu__id{ min-width:0; }
.sb-usermenu__name-lg{ font-family:var(--sb-font-serif); font-size:18px; font-weight:600; line-height:1.1; color:var(--sb-ink); }
.sb-usermenu__email{ font-size:12.5px; color:var(--sb-ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; }
.sb-usermenu__view{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  width:calc(100% - 24px); margin:0 12px 6px; padding:9px 14px;
  border:1px solid var(--sb-line); background:var(--sb-card-2); border-radius:11px;
  font:600 13.5px/1 var(--sb-font-sans); color:var(--sb-accent); transition:.2s; text-decoration:none;
}
.sb-usermenu__view:hover{ background:var(--sb-accent-tint); border-color:var(--sb-accent); }
.sb-usermenu__view svg{ flex:none; }
.sb-usermenu__list{ padding:2px 8px; border-top:1px solid var(--sb-line); max-height:60vh; overflow-y:auto; }
.sb-usermenu__grp{ padding:3px 0; border-bottom:1px solid var(--sb-line); }
.sb-usermenu__grp:last-child{ border-bottom:0; }
.sb-usermenu__grplabel{ font-family:var(--sb-font-mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--sb-ink-faint); padding:5px 12px 3px; }
.sb-usermenu__item{ display:flex; align-items:center; gap:12px; width:100%; padding:7px 12px; border-radius:10px; font:500 14px/1.2 var(--sb-font-sans); color:var(--sb-ink); transition:.16s; white-space:nowrap; text-decoration:none; }
.sb-usermenu__item:hover{ background:var(--sb-card-2); }
.sb-usermenu__item.active{ background:var(--sb-accent-tint); color:var(--sb-accent-deep); }
.sb-usermenu__ico{ width:28px; height:28px; flex:none; border-radius:8px; display:grid; place-items:center; background:var(--sb-card-2); color:var(--sb-ink-soft); }
.sb-usermenu__item.active .sb-usermenu__ico{ background:var(--sb-accent); color:#fff; }
.sb-usermenu__logout{ display:flex; align-items:center; gap:12px; width:100%; padding:11px 20px; border:0; border-top:1px solid var(--sb-line); background:none; font:600 14px/1 var(--sb-font-sans); color:var(--sb-terracotta); transition:.16s; text-decoration:none; }
.sb-usermenu__logout:hover{ background:var(--sb-terracotta-tint); }
.sb-usermenu__logout .sb-usermenu__ico{ background:var(--sb-terracotta-tint); color:var(--sb-terracotta); }

/* Mobile (≤991.98px — the same breakpoint where the trigger collapses to an
   icon-only avatar): cap the width so the popup never causes horizontal scroll
   on small phones, and scale the open animation out from the top-right corner.
   The right-edge anchoring itself is handled per-portal below, because the
   trigger's position in the header differs between tenant and global. */
@media (max-width: 991.98px){
  .sb-usermenu__pop{
    right:0; left:auto;
    transform-origin:top right;
    width:min(312px, calc(100vw - 32px));
    max-width:calc(100vw - 32px);
  }

  /* Global portal: the avatar sits to the LEFT of the hamburger, so anchoring
     the popup to the trigger (right:0 on .sb-usermenu) lands it mid-screen —
     not at the viewport edge. Pin it to the screen's right edge with
     position:fixed instead. .glm-hdr carries backdrop-filter, which makes it
     the containing block for fixed descendants; it spans the full viewport
     width, so right:12px == 12px from the screen edge, and top:calc(100% + 8px)
     drops the popup just below the (full-width) header bar. */
  body.portal--global .sb-usermenu__pop{
    position:fixed;
    top:calc(100% + 8px);
    right:12px;
    left:auto;
    width:min(360px, calc(100vw - 24px));
    max-width:calc(100vw - 24px);
  }
}

/* ── Shared ghost button (profile actions) ───────────────────── */
.sb-btn-ghost{ background:var(--sb-card); color:var(--sb-ink); border:1px solid var(--sb-line-strong); }
.sb-btn-ghost:hover:not(:disabled){ background:var(--sb-card-2); border-color:var(--sb-accent); transform:translateY(-1px); }
.sb-btn-sm{ padding:9px 15px; font-size:13px; }

/* ── Account screen container (full-width, no sidebar) ───────── */
/* min-height keeps every portal page (Profile, Settings, Tickets) the
   same vertical footprint so navigation between them doesn't jump. */
.sb-screen{ max-width:920px; margin:0 auto; padding:34px 24px 70px; min-width:0; min-height:520px; }
@media (max-width: 640px){ .sb-screen{ padding:20px 16px 48px; } }

.sb-page-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:24px; flex-wrap:wrap; }
.sb-page-title{ font-family:var(--sb-font-serif); font-weight:500; font-size:clamp(28px,3.6vw,38px); line-height:1.04; letter-spacing:-.018em; margin:0; color:var(--sb-ink); }
.sb-page-sub{ color:var(--sb-ink-soft); font-size:15px; margin:8px 0 0; }

/* ── Profile hero ────────────────────────────────────────────── */
.sb-profile-hero{ background:var(--sb-card); border:1px solid var(--sb-line); border-radius:var(--sb-r-lg); box-shadow:var(--sb-sh-sm); overflow:hidden; margin-bottom:18px; }
.sb-profile-hero__cover{ height:96px; position:relative; background: linear-gradient(135deg, var(--sb-accent), color-mix(in srgb, var(--sb-accent) 60%, var(--sb-mustard-deep))); }
.sb-profile-hero__cover::after{ content:""; position:absolute; inset:0; background-image: radial-gradient(rgba(255,255,255,.18) 1px, transparent 1.5px); background-size:22px 22px; opacity:.5; mix-blend-mode:soft-light; }
.sb-profile-hero__main{ display:flex; align-items:center; gap:18px; padding:0 28px 18px; margin-top:-44px; position:relative; flex-wrap:wrap; }
.sb-profile-hero__av{ flex:none; align-self:flex-end; position:relative; border-radius:50%; box-shadow:0 0 0 4px var(--sb-card); }
.sb-profile-hero__cam{ position:absolute; bottom:2px; right:2px; width:30px; height:30px; border-radius:50%; border:2px solid var(--sb-card); background:var(--sb-ink); color:#fff; display:grid; place-items:center; cursor:pointer; transition:.2s; }
.sb-profile-hero__cam:hover{ background:var(--sb-accent-deep); }
.sb-profile-hero__id{ flex:1; min-width:0; padding-bottom:2px; }
.sb-profile-hero__id h2{ font-family:var(--sb-font-serif); font-size:26px; font-weight:600; margin:0; letter-spacing:-.01em; color:#eff7f7fc; padding-bottom: 10px; }
.sb-profile-hero__sub{ display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:6px; }
.sb-profile-hero__sub span{ display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--sb-ink-soft); }
.sb-profile-hero__sub svg{ color:var(--sb-ink-faint); flex:none; }
.sb-profile-hero__edit{ margin-bottom:2px; }
.sb-profile-stats{ display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--sb-line); }
.sb-pstat{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:16px 20px; border:0; border-right:1px solid var(--sb-line); background:none; text-align:left; }
.sb-pstat:last-child{ border-right:0; }
.sb-pstat__ico{ color:var(--sb-accent); margin-bottom:4px; }
.sb-pstat__v{ font-family:var(--sb-font-serif); font-size:26px; font-weight:600; line-height:1; color:var(--sb-ink); }
.sb-pstat__k{ font-size:12px; color:var(--sb-ink-soft); }

/* ── Card section ────────────────────────────────────────────── */
.sb-card-sec{ background:var(--sb-card); border:1px solid var(--sb-line); border-radius:var(--sb-r-lg); box-shadow:var(--sb-sh-sm); margin-bottom:18px; overflow:hidden; }
.sb-card-sec__head{ padding:20px 24px 0; }
.sb-card-sec__head h2{ font-family:var(--sb-font-serif); font-size:20px; font-weight:500; margin:0; letter-spacing:-.01em; color:var(--sb-ink); }
.sb-card-sec__head p{ font-size:13.5px; color:var(--sb-ink-soft); margin:5px 0 0; }
.sb-card-sec__body{ padding:8px 24px 16px; }

.sb-info-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px 24px; padding:8px 0; }
.sb-info-k{ font-family:var(--sb-font-mono); font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--sb-ink-faint); }
.sb-info-v{ font-size:15px; font-weight:500; margin-top:4px; color:var(--sb-ink); }
/* Spans full grid width — holds the "Edit details" button below the info cells */
.sb-info-edit-cta{ grid-column:1 / -1; padding-top:4px; }

/* setting / connected row */
.sb-set-row{ display:flex; align-items:center; gap:14px; padding:15px 0; border-bottom:1px solid var(--sb-line); }
.sb-set-row.last{ border-bottom:0; }
.sb-set-row__ico{ width:38px; height:38px; flex:none; border-radius:11px; display:grid; place-items:center; background:var(--sb-card-2); color:var(--sb-ink-soft); }
.sb-set-row__txt{ flex:1; min-width:0; }
.sb-set-row__t{ font-size:14.5px; font-weight:600; color:var(--sb-ink); }
.sb-set-row__d{ font-size:13px; color:var(--sb-ink-soft); margin-top:2px; }
.sb-set-row__ctrl{ flex:none; }

/* pill badge */
.sb-badge{ display:inline-flex; align-items:center; gap:7px; font-family:var(--sb-font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:500; padding:6px 12px; border-radius:var(--sb-r-pill); }
.sb-badge--green{ background:var(--sb-green-tint); color:var(--sb-green); }

/* empty / coming-soon state */
.sb-empty{ text-align:center; padding:56px 30px; background:var(--sb-card); border:1px dashed var(--sb-line-strong); border-radius:var(--sb-r-lg); }
.sb-empty__ico{ width:72px; height:72px; margin:0 auto 18px; border-radius:50%; display:grid; place-items:center; background:var(--sb-card-2); color:var(--sb-ink-faint); }
.sb-empty h3{ font-family:var(--sb-font-serif); font-size:23px; font-weight:500; margin:0 0 8px; color:var(--sb-ink); }
.sb-empty p{ color:var(--sb-ink-soft); font-size:14.5px; max-width:38ch; margin:0 auto 22px; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 640px){
  .sb-profile-stats{ grid-template-columns:1fr 1fr; }
  .sb-pstat{ border-bottom:1px solid var(--sb-line); }
  .sb-pstat:nth-child(2){ border-right:0; }
  .sb-info-grid{ grid-template-columns:1fr; }
  .sb-profile-hero__main{ padding:0 18px 18px; }
}

/* ── Authenticated portal shell: [sidebar][content] grid ─────────
   Applied to <main> ONLY when base_public renders the shell
   (end_user session + show_sidebar). Marketing pages never get this
   class, so they stay full-width. The portal page's own root element
   (.sb-screen) is the second grid cell. */
/* ── Portal background (Sambandha Portal v2) — warm paper + a faint terracotta
   concentric-mandala top-right and layered radial washes. Scoped to the
   authenticated account shell so marketing pages are untouched. Fixed so the
   motif stays put while long pages (Profile) scroll. ── */
body.portal--shell{
  background-color: var(--sb-paper);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560'%3E%3Cg fill='none' stroke='%23a63b21' stroke-opacity='0.07' stroke-width='1.5'%3E%3Ccircle cx='280' cy='280' r='52'/%3E%3Ccircle cx='280' cy='280' r='92'/%3E%3Ccircle cx='280' cy='280' r='132'/%3E%3Ccircle cx='280' cy='280' r='172'/%3E%3Ccircle cx='280' cy='280' r='212'/%3E%3Ccircle cx='280' cy='280' r='252'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(920px 540px at 100% -6%, rgba(234,179,8,.10), transparent 60%),
    radial-gradient(780px 540px at -6% 6%, rgba(194,65,12,.07), transparent 56%),
    radial-gradient(680px 460px at 50% 110%, rgba(234,179,8,.05), transparent 62%);
  background-repeat: no-repeat;
  background-position: right -150px top -150px, 0 0, 0 0, 0 0;
  background-size: 600px 600px, auto, auto, auto;
  background-attachment: fixed, fixed, fixed, fixed;
}
@media (max-width: 640px){
  body.portal--shell{
    background-position: right -120px top -120px, 0 0, 0 0, 0 0;
    background-size: 440px 440px, auto, auto, auto;
  }
}

.sb-portal-shell{
  display:grid;
  /* 1fr:4fr = 20% sidebar / 80% content — proportional, scales with shell width */
  grid-template-columns:1fr 4fr;
  gap:28px;
  width:100%;        /* fill to max-width on every page — without this the grid
                        is a flex item with `margin:0 auto`, so it shrinks to
                        max-content and pages with wider content (Saved's poster
                        grid) render a wider shell than narrow pages (My Tickets) */
  max-width:1107px;  /* fixed shell width → identical 1107/818 layout on every
                        portal page (My Tickets, Saved, Following, Billing) */
  /* Fill the full viewport below the 70px header. Every portal page
     (Profile with data, Tickets empty state, stub pages) always occupies
     the same vertical footprint → sidebar never shifts position on click.
     Content naturally taller than the viewport still scrolls. */
  min-height:calc(100vh - 70px);
  margin:0 auto;
  padding:34px 28px 70px;
  align-items:start;
}
/* Content cell: fill its grid area so ALL portal pages render at the same
   height. Profile has the most content (~880px); all shorter pages are
   padded to match it — the sidebar column never changes height on click. */
.sb-portal-shell .sb-screen{
  max-width:none !important;
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
  min-width:0;
  min-height:calc(100vh - 174px) !important; /* 100vh - 70px header - 34px top padding - 70px bottom padding */
}
/* Ensure profile hero, card sections, and form grids expand fully
   within the portal shell content cell — no nested max-width allowed. */
.sb-portal-shell .sb-profile-hero,
.sb-portal-shell .sb-card-sec { max-width:none; width:100%; box-sizing:border-box; }
.sb-portal-shell .sb-info-grid { grid-template-columns:1fr 1fr; }
.sb-portal-shell .sb-form-2    { grid-template-columns:1fr 1fr; }
@media (max-width:640px){
  .sb-portal-shell .sb-info-grid,
  .sb-portal-shell .sb-form-2  { grid-template-columns:1fr; }
}

/* Sidebar is a contained card panel (Sambandha Portal v2 design): gradient
   surface, hairline border, rounded, soft shadow. */
.sb-acct-side{ position:sticky; top:88px; display:flex; flex-direction:column; gap:4px;
  background:linear-gradient(180deg, var(--sb-card), var(--sb-card-2));
  border:1px solid var(--sb-line); border-radius:var(--sb-r-md); box-shadow:var(--sb-sh-sm); padding:10px; }
.sb-acct-side__grp{ padding:6px 0; }
.sb-acct-side__label{ font-family:var(--sb-font-mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--sb-ink-faint); padding:6px 12px; }
.sb-acct-side__item{ display:flex; align-items:center; gap:12px; padding:10px 13px; border:1px solid transparent; border-radius:11px; font:500 14.5px/1.2 var(--sb-font-sans); color:var(--sb-ink-soft); text-decoration:none; transition:.16s; }
.sb-acct-side__item:hover{ background:var(--sb-paper-2); color:var(--sb-ink); }
.sb-acct-side__item.active{ background:var(--sb-card); color:var(--sb-ink); box-shadow:var(--sb-sh-sm); font-weight:600; border:1px solid var(--sb-line); }
.sb-acct-side__ico{ width:30px; height:30px; flex:none; border-radius:9px; display:grid; place-items:center; background:var(--sb-card-2); color:var(--sb-ink-soft); transition:.16s; }
.sb-acct-side__item.active .sb-acct-side__ico{ background:var(--sb-accent); color:#fff; }
.sb-acct-side__logout{ display:flex; align-items:center; gap:12px; padding:10px 13px; margin-top:8px; border-top:1px solid var(--sb-line); font:600 14.5px/1 var(--sb-font-sans); color:var(--sb-terracotta); text-decoration:none; }
.sb-acct-side__logout:hover{ background:var(--sb-terracotta-tint); border-radius:11px; }

/* Phase 17 — in GLOBAL mode the sidebar items adopt crisp warm-cream
   proportions/typography. Colours already flow from the token remap above;
   this aligns padding, sizing and the label/hover treatment to the global UI.
   The active state (server-side Jinja) and anchor hrefs are untouched. */
body.portal--global .sb-acct-side__item{ padding:9px 11px; border-radius:10px; font:500 14px/1.2 var(--glm-font-ui); }
body.portal--global .sb-acct-side__item:hover{ background:var(--glm-card-2); }
body.portal--global .sb-acct-side__item.active{ background:var(--glm-card); box-shadow:var(--glm-sh-sm); }
body.portal--global .sb-acct-side__label{ font-family:var(--glm-font-mono); color:var(--glm-muted); }
body.portal--global .sb-acct-side__logout{ font:600 14px/1 var(--glm-font-ui); }

/* Phase 17 — the header avatar dropdown (.sb-usermenu, ported verbatim from the
   tenant header) inherits cream surfaces/ink/fonts from the token remap above.
   These overrides close the gap for tokens the remap doesn't cover — the
   active-item tint, the active icon chip, and the pop shadow — so the global
   dropdown matches the .glm-* warm-cream system exactly. */
body.portal--global .sb-usermenu__pop{ box-shadow:var(--glm-sh-lg, var(--glm-sh-sm)); }
body.portal--global .sb-usermenu__item.active{ background:var(--glm-accent-tint); color:var(--glm-accent-deep); }
body.portal--global .sb-usermenu__item.active .sb-usermenu__ico{ background:var(--glm-accent); color:#fff; }
body.portal--global .sb-usermenu__view:hover{ background:var(--glm-accent-tint); border-color:var(--glm-accent); }

/* Mobile: collapse to a single column; the account nav is reached via the
   header avatar dropdown (same permission-filtered menu) — responsive
   relocation, not a permission gate. */
@media (max-width: 960px){
  .sb-portal-shell{ grid-template-columns:1fr; gap:0; padding:18px 16px 48px; min-height:0; }
  .sb-portal-shell .sb-screen{ min-height:0 !important; }
  .sb-acct-side{ display:none; }
}

/* ============================================================
   PORTAL SETTINGS FORM  (.sb-form-2, .sb-field, .sb-input …)
   ------------------------------------------------------------
   Design source: Sambandha Portal.html reference (account-profile.jsx +
   portal.css). Token mapping: reference var(--X) → var(--sb-X).
   AR-09: zero inline styles. AR-32: public-only namespace.
   ============================================================ */

/* Two-column field grid (collapses to 1-col on mobile) */
.sb-form-2{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 18px;
  padding-top: 6px;
}
@media (max-width: 640px){ .sb-form-2{ grid-template-columns: 1fr; } }

/* Individual field: [label][input] stacked */
.sb-field{
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 16px;
}

/* Monospace uppercase label — matches reference .info-k eyebrow style */
.sb-field label{
  font-family: var(--sb-font-mono);
  font-size: 10px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--sb-ink-faint);
  font-weight: 500;
}

/* Input — cream background, terracotta focus ring */
.sb-input{
  width: 100%;
  padding: 10px 13px;
  background: var(--sb-paper);
  border: 1px solid var(--sb-line-strong);
  border-radius: var(--sb-r-sm);
  color: var(--sb-ink);
  font: 500 14.5px/1.3 var(--sb-font-sans);
  transition: border-color .15s, box-shadow .15s;
  box-sizing: border-box;
}
.sb-input:focus{
  outline: none;
  border-color: var(--sb-accent);
  box-shadow: 0 0 0 3px var(--sb-terracotta-tint);
}
.sb-input:disabled{
  opacity: .55;
  cursor: not-allowed;
  background: var(--sb-paper-2);
}

/* Form action row — right-aligned buttons */
.sb-form-actions{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  padding: 6px 0 8px;
}

/* Primary action button — terracotta pill (matches reference .btn-primary) */
.sb-btn-primary{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 22px;
  border: none;
  border-radius: var(--sb-r-pill);
  background: var(--sb-accent);
  color: #fff;
  font: 600 14px/1 var(--sb-font-sans);
  cursor: pointer;
  transition: background .16s, transform .16s, box-shadow .16s;
}
.sb-btn-primary:hover:not(:disabled){
  background: var(--sb-accent-deep);
  transform: translateY(-1px);
  box-shadow: var(--sb-sh-cta);
}
.sb-btn-primary:disabled{ opacity: .5; cursor: not-allowed; }
/* HTMX loading state — CSS class applied by HTMX during inflight request */
.sb-btn-primary.htmx-request{ opacity: .7; pointer-events: none; }

/* Inline form error — shown via HX-Retarget into #settings-error */
.sb-form-error{
  font: 500 13px/1.4 var(--sb-font-sans);
  color: #dc2626;
  padding: 8px 12px;
  background: rgba(220,38,38,.06);
  border-radius: var(--sb-r-sm);
  border: 1px solid rgba(220,38,38,.22);
  margin-bottom: 4px;
}

/* ============================================================
   15 · MY TICKETS DASHBOARD  (.sb-ticket-*)
   ------------------------------------------------------------
   Used by templates/public/portal/_tickets_content.html.
   Dual-mode: branded (/{slug}/tickets) and global (/tickets).
   Design source: Sambandha Portal reference — warm editorial
   palette, terracotta accents, Newsreader serif headings.
   AR-09: zero inline styles. AR-32: public-only namespace.
   ============================================================ */

/* ── Alpine fade transitions (tab swap + modal) ───────────── */
.sb-fade-enter{ transition: opacity .2s ease, transform .2s ease; }
.sb-fade-off  { opacity: 0; transform: translateY(6px); }
.sb-fade-on   { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce){
  .sb-fade-enter{ transition-duration: .001s; }
}

/* ── Tab toggle — sliding-ink segmented control (reference pattern) ──
   Container holds the two tabs + an absolutely-positioned ink pill that
   slides via Alpine :style binding. Zero border-bottom — not an underline
   tab bar. Matches reference portal.css .tabs exactly.               */
.sb-ticket-tabs{
  position: relative;
  display: inline-flex;
  gap: 4px;
  background: var(--sb-card);
  border: 1px solid var(--sb-line);
  border-radius: var(--sb-r-pill);
  padding: 4px;
  margin-bottom: 22px;
}

.sb-ticket-tab{
  position: relative;
  z-index: 1;
  border: 0;
  background: none;
  padding: 9px 22px;
  border-radius: var(--sb-r-pill);
  font: 600 14px/1 var(--sb-font-sans);
  color: var(--sb-ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: color .2s;
  white-space: nowrap;
}
.sb-ticket-tab.is-active{ color: #fff; }

/* Count badge */
.sb-ticket-tab__count{
  font-size: 11.5px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 9px;
  background: var(--sb-card-2);
  color: var(--sb-ink-soft);
  transition: background .2s, color .2s;
}
.sb-ticket-tab.is-active .sb-ticket-tab__count{
  background: rgba(255,255,255,.25);
  color: #fff;
}

/* Sliding ink — Alpine drives transform via :style */
.sb-ticket-tabs__ink{
  position: absolute;
  top: 4px; left: 4px; bottom: 4px;
  width: calc(50% - 4px);
  background: var(--sb-accent);
  border-radius: var(--sb-r-pill);
  transition: transform .28s cubic-bezier(.3,.8,.3,1);
  z-index: 0;
  box-shadow: var(--sb-sh-cta);
  pointer-events: none;
}

/* ── Tab panels ───────────────────────────────────────────── */
/* Fixed min-height: both Current and History panels occupy the same
   vertical space regardless of content — prevents layout jump on tab switch.
   Value is large enough that heading + tabs + panel = within the shell's 620px. */
.sb-ticket-panel{ min-height: 440px; }

/* ── Event card list ──────────────────────────────────────── */
.sb-ticket-list{ display: flex; flex-direction: column; gap: 20px; }

.sb-ticket-card{
  display: grid;
  grid-template-columns: 240px 1fr;
  background: var(--sb-card);
  border: 1px solid var(--sb-line);
  border-radius: var(--sb-r-lg);
  box-shadow: var(--sb-sh-sm);
  overflow: hidden;
  transition: box-shadow .2s var(--pubx-ease);
}
.sb-ticket-card:hover{ box-shadow: var(--sb-sh-md); }

/* Thumbnail column */
.sb-ticket-card__thumb{
  position: relative;
  overflow: hidden;
  background: var(--sb-paper-2);
  min-height: 180px;
}
.sb-ticket-card__thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sb-ticket-card__thumb--fallback{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--sb-accent) 0%, var(--sb-mustard-deep) 100%);
  padding: 20px;
}
.sb-ticket-card__thumb--fallback span{
  font-family: var(--sb-font-serif);
  font-size: 17px;
  color: rgba(255,255,255,.82);
  text-align: center;
  line-height: 1.3;
}

/* Content column */
.sb-ticket-card__body{
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px 24px;
  min-width: 0;
}
.sb-ticket-card__header{ display: flex; flex-direction: column; gap: 10px; }

.sb-ticket-card__tenant-chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--sb-font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sb-ink-soft);
  background: var(--sb-paper-2);
  border: 1px solid var(--sb-line);
  border-radius: var(--sb-r-pill);
  padding: 4px 10px;
  width: fit-content;
}
.sb-ticket-card__tenant-chip--sm{ font-size: 9px; padding: 3px 8px; }
.sb-ticket-card__tenant-chip svg{ color: var(--sb-ink-faint); flex: none; }

.sb-ticket-card__title{
  margin: 0;
  font-family: var(--sb-font-serif);
  font-size: clamp(17px, 2vw, 20px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--sb-ink);
}

.sb-ticket-card__meta{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sb-ticket-card__pill{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  background: var(--sb-card-2);
  border: 1px solid var(--sb-line);
  border-radius: var(--sb-r-pill);
  font: 500 12.5px/1 var(--sb-font-sans);
  color: var(--sb-ink-soft);
}
.sb-ticket-card__pill svg{ color: var(--sb-ink-faint); flex: none; }

.sb-ticket-card__label{
  font-family: var(--sb-font-mono);
  font-size: 10px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--sb-ink-faint);
  margin: 0 0 8px;
}

/* ── Global-mode card footer ──────────────────────────────── */
.sb-ticket-card--global .sb-ticket-card__body{
  justify-content: space-between;
}
.sb-ticket-card__global-footer{
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 12px;
  border-top: 1px solid var(--sb-line);
}
.sb-ticket-card__global-amount{
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.sb-ticket-card__global-amount-label{
  font-family: var(--sb-font-mono);
  font-size: 9.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--sb-ink-faint);
}
.sb-ticket-card__global-amount-value{
  font-family: var(--sb-font-serif);
  font-size: 20px;
  font-weight: 600;
  color: var(--sb-ink);
  font-variant-numeric: tabular-nums;
}
.sb-ticket-card__view-link{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 8px 16px;
  background: var(--sb-accent);
  color: #fff;
  border-radius: var(--sb-r-pill);
  font: 600 13px/1 var(--sb-font-sans);
  text-decoration: none;
  transition: background .16s, transform .16s, box-shadow .16s;
}
.sb-ticket-card__view-link:hover{
  background: var(--sb-accent-deep);
  transform: translateY(-1px);
  box-shadow: var(--sb-sh-cta);
}
.sb-ticket-card__view-link svg{ flex: none; }

/* ── Attendee ticket items (branded only) ─────────────────── */
.sb-ticket-items{ display: flex; flex-direction: column; gap: 10px; }

.sb-ticket-item{
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px;
  background: var(--sb-paper);
  border: 1px solid var(--sb-line);
  border-radius: var(--sb-r-md);
}

.sb-ticket-item__qr{
  flex: none;
  width: 72px;
  height: 72px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--sb-card-2);
  border: 1px solid var(--sb-line);
}

.sb-ticket-item__info{
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sb-ticket-item__row{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.sb-ticket-item__name{
  margin: 0;
  font: 600 14.5px/1 var(--sb-font-sans);
  color: var(--sb-ink);
}
.sb-ticket-item__email{
  margin: 0;
  font-size: 12.5px;
  color: var(--sb-ink-soft);
}

.sb-ticket-item__actions{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.sb-ticket-item__btn{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: var(--sb-r-pill);
  font: 600 12px/1 var(--sb-font-sans);
  cursor: pointer;
  transition: background .15s, transform .15s, box-shadow .15s;
  border: 1px solid transparent;
}
.sb-ticket-item__btn svg{ flex: none; }
.sb-ticket-item__btn--accent{
  background: var(--sb-accent);
  color: #fff;
  border-color: var(--sb-accent);
}
.sb-ticket-item__btn--accent:hover:not(:disabled){
  background: var(--sb-accent-deep);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -4px rgba(194,65,12,.42);
}
.sb-ticket-item__btn--ghost{
  background: var(--sb-card);
  color: var(--sb-ink-soft);
  border-color: var(--sb-line-strong);
}
.sb-ticket-item__btn--ghost:hover:not(:disabled){
  background: var(--sb-card-2);
  color: var(--sb-ink);
}
.sb-ticket-item__btn:disabled{
  opacity: .45;
  cursor: not-allowed;
}

/* ── Status badges ────────────────────────────────────────── */
.sb-ticket-badge{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--sb-r-pill);
  font: 600 10.5px/1 var(--sb-font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.sb-ticket-badge--issued  { background: var(--sb-green-tint);    color: var(--sb-green); }
.sb-ticket-badge--pending { background: var(--sb-marigold-tint); color: #b47419; }
.sb-ticket-badge--cancelled{ background: rgba(28,10,4,.07);     color: var(--sb-ink-faint); }
.sb-ticket-badge--sm{ padding: 3px 8px; font-size: 9.5px; }

/* ── CTA: browse events (upcoming empty state) ────────────── */
.sb-ticket-browse-cta{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  padding: 11px 22px;
  background: var(--sb-accent);
  color: #fff;
  border-radius: var(--sb-r-pill);
  font: 600 14px/1 var(--sb-font-sans);
  text-decoration: none;
  transition: background .16s, transform .16s, box-shadow .16s;
}
.sb-ticket-browse-cta:hover{
  background: var(--sb-accent-deep);
  transform: translateY(-1px);
  box-shadow: var(--sb-sh-cta);
}
.sb-ticket-browse-cta svg{ flex: none; }

/* ── Past events grid ─────────────────────────────────────── */
.sb-ticket-past-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

.sb-ticket-past-card{
  background: var(--sb-card);
  border: 1px solid var(--sb-line);
  border-radius: var(--sb-r-md);
  overflow: hidden;
  box-shadow: var(--sb-sh-sm);
  transition: box-shadow .2s;
}
.sb-ticket-past-card:hover{ box-shadow: var(--sb-sh-md); }

.sb-ticket-past-card__thumb{
  height: 130px;
  overflow: hidden;
  background: var(--sb-paper-2);
}
.sb-ticket-past-card__thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(.75);
}

.sb-ticket-past-card__info{
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sb-ticket-past-card__title{
  margin: 0;
  font-family: var(--sb-font-serif);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--sb-ink);
}
.sb-ticket-past-card__date{
  margin: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  font: 500 12.5px/1 var(--sb-font-sans);
  color: var(--sb-ink-soft);
}
.sb-ticket-past-card__date svg{ color: var(--sb-ink-faint); flex: none; }
.sb-ticket-past-card__footer{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
}
.sb-ticket-past-card__link{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: 600 12px/1 var(--sb-font-sans);
  color: var(--sb-accent);
  text-decoration: none;
  transition: color .15s;
}
.sb-ticket-past-card__link:hover{ color: var(--sb-accent-deep); }
.sb-ticket-past-card__link svg{ flex: none; }

/* ── Guest-edit modal ─────────────────────────────────────── */
.sb-ticket-modal{
  position: fixed;
  inset: 0;
  z-index: 1080;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(36,28,21,.52);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.sb-ticket-modal__panel{
  width: 100%;
  max-width: 440px;
  background: var(--sb-card);
  border: 1px solid var(--sb-line);
  border-radius: var(--sb-r-lg);
  box-shadow: var(--sb-sh-lg);
  overflow: hidden;
}
.sb-ticket-modal__head{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--sb-line);
}
.sb-ticket-modal__title{
  margin: 0;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--sb-font-serif);
  font-size: 19px;
  font-weight: 500;
  color: var(--sb-ink);
}
.sb-ticket-modal__title svg{ color: var(--sb-accent); flex: none; }
.sb-ticket-modal__close{
  width: 34px;
  height: 34px;
  border: 1px solid var(--sb-line);
  border-radius: 9px;
  background: none;
  color: var(--sb-ink-faint);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: .15s;
  flex: none;
}
.sb-ticket-modal__close:hover{ background: var(--sb-card-2); color: var(--sb-ink); }
.sb-ticket-modal__body{ padding: 20px 22px; display: flex; flex-direction: column; gap: 2px; }
.sb-ticket-modal__hint{ font-size: 12px; color: var(--sb-ink-faint); }
.sb-ticket-modal__actions{
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 12px;
}

/* ════════════════════════════════════════════════════════════
   COMPACT TICKET CARD + QR DETAIL MODAL  (.sb-tkt*) — branded mode
   One card per event (date-stub + meta + price). "View QR & details"
   opens .sb-tkt-overlay → event detail + every attendee's QR.
   Accent is chosen per-event via .sb-tkt--c1..c6 (sets --sb-tkt-c).
   ──────────────────────────────────────────────────────────── */

/* Per-event accent palette (AR-09: class-set custom prop, never inline). */
.sb-tkt--c1{ --sb-tkt-c: #C2410C; }   /* terracotta */
.sb-tkt--c2{ --sb-tkt-c: #EAB308; }   /* mustard    */
.sb-tkt--c3{ --sb-tkt-c: #0369A1; }   /* ocean      */
.sb-tkt--c4{ --sb-tkt-c: #4f7a3a; }   /* green      */
.sb-tkt--c5{ --sb-tkt-c: #9c5b34; }   /* rust       */
.sb-tkt--c6{ --sb-tkt-c: #7c5a86; }   /* mauve      */

/* ── Inline notice above the list ─────────────────────────── */
.sb-tkt-note{
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--sb-mustard-tint);
  border: 1px solid rgba(234,179,8,.30);
  border-radius: 13px;
  padding: 12px 16px;
  font-size: 13.5px;
  color: #8a5512;
  margin-bottom: 20px;
}
.sb-tkt-note svg{ flex: none; color: var(--sb-mustard); }

/* ── Card list ────────────────────────────────────────────── */
.sb-tkt-list{ display: flex; flex-direction: column; gap: 16px; }

.sb-tkt{
  display: flex;
  background: var(--sb-card);
  border: 1px solid var(--sb-line);
  border-radius: var(--sb-r-lg);
  box-shadow: var(--sb-sh-sm);
  overflow: hidden;
  cursor: pointer;
  transition: transform .2s, box-shadow .25s, border-color .2s;
}
.sb-tkt:hover{ transform: translateY(-2px); box-shadow: var(--sb-sh-md); border-color: var(--sb-line-strong); }
.sb-tkt:focus-visible{ outline: 2px solid var(--sb-accent); outline-offset: 2px; }
/* Anchor variant (global mode card links out to organiser portal). */
a.sb-tkt{ text-decoration: none; color: inherit; }
.sb-tkt.is-past{ opacity: .82; }
.sb-tkt__kicker{
  font-family: var(--sb-font-mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sb-ink-faint);
  margin-bottom: 3px;
}

.sb-tkt__stub{
  position: relative;
  width: 96px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, var(--sb-tkt-c, var(--sb-accent)),
              color-mix(in srgb, var(--sb-tkt-c, var(--sb-accent)) 70%, #000 18%));
}
.sb-tkt__stub-date{ display: flex; flex-direction: column; align-items: center; color: #fff; }
.sb-tkt__stub-d{ font-family: var(--sb-font-serif); font-size: 30px; font-weight: 600; line-height: 1; }
.sb-tkt__stub-m{ font-family: var(--sb-font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; margin-top: 4px; opacity: .9; }
.sb-tkt__perf{
  position: absolute;
  right: -1px; top: 0; bottom: 0;
  width: 2px;
  background-image: radial-gradient(circle at 1px 4px, var(--sb-card) 2px, transparent 2.5px);
  background-size: 4px 12px;
  background-repeat: repeat-y;
}

.sb-tkt__body{ flex: 1; min-width: 0; padding: 18px 20px; }
.sb-tkt__top{ display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sb-tkt__name{
  font-family: var(--sb-font-serif);
  font-size: 21px;
  font-weight: 500;
  line-height: 1.12;
  margin: 0;
  letter-spacing: -.01em;
  color: var(--sb-ink);
}
.sb-tkt__meta{ display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 14px; }
.sb-tkt__meta span{ display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--sb-ink-soft); }
.sb-tkt__meta svg{ color: var(--sb-ink-faint); flex: none; }
.sb-tkt__foot{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding-top: 15px;
  border-top: 1px solid var(--sb-line);
}
.sb-tkt__price{ font-family: var(--sb-font-serif); font-size: 19px; font-weight: 600; white-space: nowrap; color: var(--sb-ink); }
.sb-tkt__price em{ font-style: italic; color: var(--sb-green); font-size: 17px; }

/* Live dot + muted badge used by card/modal status pills. */
.sb-live-dot{ width: 7px; height: 7px; border-radius: 50%; background: var(--sb-green); display: inline-block; }
.sb-live-dot--light{ background: #fff; }
.sb-badge--muted{ background: rgba(28,10,4,.07); color: var(--sb-ink-soft); }

/* ── Detail overlay + modal ───────────────────────────────── */
.sb-tkt-overlay{
  position: fixed;
  inset: 0;
  z-index: 1080;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px;
  background: rgba(54,24,48,.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  overflow-y: auto;
}
.sb-tkt-modal{
  width: 100%;
  max-width: 440px;
  max-height: calc(100dvh - 48px);
  display: flex;
  flex-direction: column;
  background: var(--sb-card);
  border-radius: var(--sb-r-lg);
  box-shadow: var(--sb-sh-lg);
  overflow: hidden;
  position: relative;
  margin: auto;
}
.sb-tkt-modal__close{
  position: absolute;
  top: 16px; right: 16px;
  z-index: 3;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 0;
  background: rgba(255,255,255,.2);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background .2s;
}
.sb-tkt-modal__close:hover{ background: rgba(255,255,255,.34); }

.sb-tkt-modal__head{
  flex: none;
  padding: 28px 28px 24px;
  color: #fff;
  background: linear-gradient(155deg, var(--sb-tkt-c, var(--sb-accent)),
              color-mix(in srgb, var(--sb-tkt-c, var(--sb-accent)) 64%, #1a0d16));
}
.sb-tkt-modal__kicker{
  font-family: var(--sb-font-mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
}
.sb-tkt-modal__title{
  font-family: var(--sb-font-serif);
  font-size: 27px;
  font-weight: 600;
  line-height: 1.08;
  margin: 8px 0 0;
  letter-spacing: -.01em;
  color: #fff;
}
.sb-tkt-modal__sub{ font-size: 14px; opacity: .85; margin: 4px 0 0; }
.sb-tkt-modal__badge{
  margin-top: 14px;
  background: rgba(255,255,255,.18);
  color: #fff;
}

.sb-tkt-modal__body{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 22px 28px 28px;
}

.sb-tkt-dmeta{ display: flex; flex-direction: column; gap: 2px; }
.sb-tkt-dmeta__row{ display: flex; gap: 13px; align-items: flex-start; padding: 11px 0; }
.sb-tkt-dmeta__row svg{ color: var(--sb-accent); flex: none; margin-top: 1px; }
.sb-tkt-dmeta__k{ font-family: var(--sb-font-mono); font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: var(--sb-ink-faint); }
.sb-tkt-dmeta__v{ font-size: 14.5px; font-weight: 600; margin-top: 2px; color: var(--sb-ink); }

.sb-tkt-modal__label{
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sb-font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sb-ink-faint);
  margin: 14px 0 10px;
}
.sb-tkt-modal__count{
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--sb-r-pill);
  background: var(--sb-accent-tint);
  color: var(--sb-accent);
  font-size: 11px;
  font-weight: 700;
}

.sb-tkt-qrlist{ display: flex; flex-direction: column; gap: 12px; }
.sb-tkt-qrcard{
  display: flex;
  gap: 16px;
  align-items: center;
  background: var(--sb-card-2);
  border: 1px solid var(--sb-line);
  border-radius: 16px;
  padding: 14px;
}
.sb-tkt-qrcard.is-past{ opacity: .72; }
.sb-tkt-qrcard__frame{
  flex: none;
  width: 96px; height: 96px;
  display: grid;
  place-items: center;
  padding: 7px;
  background: #fff;
  border: 1px solid var(--sb-line);
  border-radius: 12px;
  box-shadow: var(--sb-sh-sm);
}
.sb-tkt-qrcard__frame img,
.sb-tkt-qrcard__frame canvas,
.sb-tkt-qrcard__frame svg{ width: 100% !important; height: 100% !important; display: block; }
.sb-tkt-qrcard__frame svg path{ fill: #241c15; }
.sb-tkt-qrcard__frame--empty{ color: var(--sb-ink-faint); }
.sb-tkt-qrcard.is-past .sb-tkt-qrcard__frame{ filter: grayscale(.4); opacity: .55; }
.sb-tkt-qrcard__info{ min-width: 0; flex: 1; }
.sb-tkt-qrcard__row{ display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sb-tkt-qrcard__name{ margin: 0; font-weight: 600; font-size: 14.5px; color: var(--sb-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-tkt-qrcard__email{ margin: 3px 0 0; font-size: 12.5px; color: var(--sb-ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-tkt-qrcard__hint{ margin: 8px 0 0; display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--sb-ink-faint); }
.sb-tkt-qrcard__hint svg{ flex: none; }

.sb-tkt-modal__noqr{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px;
  border: 1px dashed var(--sb-line-strong);
  border-radius: 14px;
  color: var(--sb-ink-soft);
  font-size: 13.5px;
}
.sb-tkt-modal__noqr svg{ flex: none; color: var(--sb-ink-faint); }

.sb-tkt-dtable{
  background: var(--sb-card-2);
  border: 1px solid var(--sb-line);
  border-radius: 14px;
  padding: 6px 16px;
  margin-top: 16px;
}
.sb-tkt-dtable__row{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 11px 0;
  border-top: 1px solid var(--sb-line);
  font-size: 13.5px;
}
.sb-tkt-dtable__row:first-child{ border-top: 0; }
.sb-tkt-dtable__row span{ color: var(--sb-ink-soft); }
.sb-tkt-dtable__row b{ font-weight: 600; text-align: right; color: var(--sb-ink); }

/* ── Ticket view v2 — compact summary + per-ticket "pass" stack ─────────
   Replaces the qrcard-list + dtable in the modal body. `--sb-tkt-c` (set by
   .sb-tkt--c{N} on the modal) is inherited as each pass's accent. ── */
.sb-tkt-summary{ margin-top: 2px; }
.sb-tsum-line{ display: flex; align-items: center; gap: 9px; font-size: 13.5px; padding: 3px 0; }
.sb-tsum-line svg{ color: var(--sb-accent); flex: none; }
.sb-tsum-line span{ font-weight: 500; color: var(--sb-ink); }
.sb-tsum-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 11px 14px; margin-top: 13px; padding-top: 14px; border-top: 1px solid var(--sb-line); }
.sb-tsum-k{ font-family: var(--sb-font-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--sb-ink-faint); }
.sb-tsum-v{ font-size: 13px; font-weight: 600; margin-top: 3px; line-height: 1.3; color: var(--sb-ink); }

.sb-pass-head{ margin-top: 24px; }
.sb-pass-head__title{ display: flex; align-items: center; gap: 9px; }
.sb-pass-head__title h4{ font-family: var(--sb-font-serif); font-size: 17px; font-weight: 600; margin: 0; letter-spacing: -.01em; color: var(--sb-ink); }
.sb-pass-head__n{ font-size: 11.5px; font-weight: 700; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--sb-accent-tint); color: var(--sb-accent-deep); display: grid; place-items: center; }
.sb-pass-head__hint{ font-size: 12.5px; color: var(--sb-ink-soft); margin: 5px 0 0; line-height: 1.45; }

.sb-pass-stack{ display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.sb-pass{ border: 1px solid var(--sb-line); border-radius: 16px; background: var(--sb-card); box-shadow: var(--sb-sh-sm); overflow: hidden; position: relative; }
.sb-pass::before{ content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--sb-tkt-c, var(--sb-accent)); }
.sb-pass__top{ display: flex; align-items: center; gap: 12px; padding: 14px 16px 14px 20px; border-bottom: 1px dashed var(--sb-line-strong); position: relative; }
/* perforation notches at the dashed divider */
.sb-pass__top::after, .sb-pass__top::before{ content: ""; position: absolute; bottom: -7px; width: 13px; height: 13px; border-radius: 50%; background: var(--sb-card-2); border: 1px solid var(--sb-line); }
.sb-pass__top::before{ left: -7px; }
.sb-pass__top::after{ right: -7px; }
.sb-pass__no{ flex: none; width: 42px; height: 42px; border-radius: 11px; background: color-mix(in srgb, var(--sb-tkt-c, var(--sb-accent)) 12%, transparent); color: var(--sb-tkt-c, var(--sb-accent)); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.sb-pass__no-n{ font-family: var(--sb-font-serif); font-size: 19px; font-weight: 600; }
.sb-pass__no-of{ font-size: 8.5px; font-weight: 600; opacity: .8; margin-top: 1px; }
.sb-pass__type{ flex: 1; min-width: 0; }
.sb-pass__type-k{ font-family: var(--sb-font-mono); font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--sb-ink-faint); }
.sb-pass__type-v{ font-size: 14.5px; font-weight: 600; margin-top: 3px; line-height: 1.2; color: var(--sb-ink); }
.sb-pass__state{ flex: none; display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: var(--sb-r-pill); }
.sb-pass__state.is-ok{ background: var(--sb-green-tint); color: var(--sb-green); }
.sb-pass__state.is-used{ background: var(--sb-card-2); color: var(--sb-ink-faint); }
.sb-pass__qr{ text-align: center; padding: 18px 16px 8px; }
.sb-pass__qr-frame{ display: inline-block; width: 150px; height: 150px; padding: 10px; background: #fff; border: 1px solid var(--sb-line); border-radius: 14px; box-shadow: var(--sb-sh-sm); }
.sb-pass__qr-frame svg{ width: 100% !important; height: 100% !important; display: block; }
.sb-pass__qr-frame svg path{ fill: #241c15; }
.sb-pass__qr-id{ margin-top: 11px; font-family: var(--sb-font-mono); font-size: 11.5px; color: var(--sb-ink-soft); word-break: break-all; }
.sb-pass__foot{ padding: 4px 16px 16px; }
.sb-pass__foot:empty{ display: none; }
.sb-tkt-modal__actions{ display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.sb-pass__usednote{ text-align: center; font-size: 12px; color: var(--sb-ink-faint); padding: 2px 0 4px; }
.sb-pass--past{ box-shadow: none; background: var(--sb-card-2); }
.sb-pass--past .sb-pass__qr-frame{ filter: grayscale(.4); opacity: .55; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 800px){
  .sb-ticket-card{
    grid-template-columns: 1fr;
  }
  .sb-ticket-card__thumb{
    height: 180px;
    min-height: unset;
  }
}
@media (max-width: 560px){
  .sb-ticket-tab{ padding: 8px 14px; font-size: 13px; }
  .sb-ticket-item{ flex-direction: column; }
  .sb-ticket-item__actions{ gap: 6px; }

  /* Compact ticket card → stack stub as a horizontal date strip. */
  .sb-tkt{ flex-direction: column; }
  .sb-tkt__stub{ width: auto; height: 60px; }
  .sb-tkt__stub-date{ flex-direction: row; gap: 8px; align-items: baseline; }
  .sb-tkt__stub-m{ margin-top: 0; }
  .sb-tkt__perf{ display: none; }
  .sb-tkt__name{ font-size: 19px; }

  /* QR detail modal → full-bleed sheet on phones. */
  .sb-tkt-overlay{ padding: 0; align-items: stretch; }
  .sb-tkt-modal{ max-width: none; max-height: 100dvh; min-height: 100%; border-radius: 0; margin: 0; box-shadow: none; }
  .sb-tkt-modal__head{ padding: 24px 22px 22px; }
  .sb-tkt-modal__body{ padding: 20px 18px 28px; }
  .sb-tsum-grid{ gap: 10px 12px; }
}

/* ============================================================
   16 · SAVED EVENTS — heart button, login gate modal, saved page
   ------------------------------------------------------------
   Heart button (.evx-card__save): absolutely positioned on the
   event card thumbnail. Works on both events_index.html grid
   cards and event_detail.html title row.
   Login gate modal (.evx-gate-modal): global Alpine component
   rendered by base_public.html for unauthenticated heart clicks.
   Saved events page (.sb-saved-*): portal page layout.
   AR-09: zero inline styles. AR-32: public-only namespace.
   ============================================================ */

/* ── Position context for heart button on grid cards ──────── */
/* server.css .evx-card has no position; add it here so the
   absolutely-positioned heart button resolves to the card. */
.evx-card{ position: relative; }

/* ── Heart / bookmark button ──────────────────────────────── */
.evx-card__save{
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--sb-ink-soft);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .18s, color .18s, transform .18s, box-shadow .18s;
  box-shadow: 0 2px 8px -2px rgba(36,28,21,.22);
  flex: none;
}
.evx-card__save:hover{
  background: #fff;
  color: var(--sb-terracotta);
  transform: scale(1.1);
}
.evx-card__save.is-saved{
  background: var(--sb-terracotta);
  color: #fff;
  box-shadow: 0 4px 12px -4px rgba(194,65,12,.52);
}
.evx-card__save.is-saved:hover{
  background: var(--sb-terracotta-deep);
  color: #fff;
  transform: scale(1.1);
}
.evx-card__save svg{ flex: none; pointer-events: none; }

/* Heart on event detail title row — inline (not absolute) */
.evx-detail-title-row{
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
}
.evx-detail-title-row .evx-card__save{
  position: static;      /* override absolute; sits inline in the flex row */
  flex: none;
  margin-top: 6px;       /* align with capital letter baseline */
  width: 40px;
  height: 40px;
}

/* Saved events card heart — override absolute for thumb context */
.sb-saved-card__thumb .evx-card__save{
  top: 8px;
  right: 8px;
}

/* ── Login gate modal ─────────────────────────────────────── */
.evx-gate-modal{
  position: fixed;
  inset: 0;
  z-index: 1090;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(36,28,21,.48);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.evx-gate-modal__panel{
  width: 100%;
  max-width: 380px;
  background: var(--sb-card);
  border: 1px solid var(--sb-line);
  border-radius: var(--sb-r-lg);
  box-shadow: var(--sb-sh-lg);
  padding: 32px 28px 28px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.evx-gate-modal__ico{
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--sb-terracotta-tint);
  color: var(--sb-terracotta);
  display: grid;
  place-items: center;
}
.evx-gate-modal__title{
  font-family: var(--sb-font-serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--sb-ink);
  margin: 0;
  letter-spacing: -.01em;
}
.evx-gate-modal__body{
  font-size: 14px;
  color: var(--sb-ink-soft);
  line-height: 1.55;
  max-width: 30ch;
  margin: 0;
}
.evx-gate-modal__actions{
  display: flex;
  gap: 10px;
  width: 100%;
  margin-top: 6px;
}
.evx-gate-modal__btn{
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 18px;
  border-radius: var(--sb-r-pill);
  font: 600 14px/1 var(--sb-font-sans);
  text-decoration: none;
  cursor: pointer;
  transition: background .16s, transform .16s, box-shadow .16s;
}
.evx-gate-modal__btn--primary{
  background: var(--sb-accent);
  color: #fff;
  border: none;
  box-shadow: var(--sb-sh-cta);
}
.evx-gate-modal__btn--primary:hover{
  background: var(--sb-accent-deep);
  transform: translateY(-1px);
}
.evx-gate-modal__btn--ghost{
  background: var(--sb-card-2);
  color: var(--sb-ink-soft);
  border: 1px solid var(--sb-line-strong);
}
.evx-gate-modal__btn--ghost:hover{
  background: var(--sb-paper-2);
  color: var(--sb-ink);
}

/* ── Saved events grid (.sb-saved-*) ─────────────────────── */
.sb-saved-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.sb-saved-card{
  background: var(--sb-card);
  border: 1px solid var(--sb-line);
  border-radius: var(--sb-r-lg);
  box-shadow: var(--sb-sh-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .2s, transform .2s;
}
.sb-saved-card:hover{
  box-shadow: var(--sb-sh-md);
  transform: translateY(-2px);
}

.sb-saved-card__thumb{
  position: relative;
  height: 160px;
  overflow: hidden;
  background: var(--sb-paper-2);
  flex: none;
}
.sb-saved-card__thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s;
}
.sb-saved-card:hover .sb-saved-card__thumb img{ transform: scale(1.05); }
.sb-saved-card__thumb--fallback{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--sb-accent) 0%, var(--sb-mustard-deep) 100%);
}
.sb-saved-card__thumb--fallback span{
  font-family: var(--sb-font-serif);
  font-size: 48px;
  color: rgba(255,255,255,.6);
}

.sb-saved-card__tenant{
  position: absolute;
  bottom: 8px;
  left: 8px;
  font-family: var(--sb-font-mono);
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: var(--sb-ink-soft);
  padding: 4px 9px;
  border-radius: var(--sb-r-pill);
}

.sb-saved-card__info{
  padding: 16px 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.sb-saved-card__title{
  margin: 0;
  font-family: var(--sb-font-serif);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--sb-ink);
}

.sb-saved-card__meta{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.sb-saved-card__pill{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: 500 12px/1 var(--sb-font-sans);
  color: var(--sb-ink-soft);
  background: var(--sb-card-2);
  border: 1px solid var(--sb-line);
  border-radius: var(--sb-r-pill);
  padding: 4px 10px;
}
.sb-saved-card__pill svg{ color: var(--sb-ink-faint); flex: none; }

.sb-saved-card__footer{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--sb-line);
  margin-top: auto;
}
.sb-saved-card__cta{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: 600 13px/1 var(--sb-font-sans);
  color: var(--sb-accent);
  text-decoration: none;
  transition: color .15s;
}
.sb-saved-card__cta:hover{ color: var(--sb-accent-deep); }
.sb-saved-card__cta svg{ flex: none; }
.sb-saved-card__saved-on{
  font-family: var(--sb-font-mono);
  font-size: 10px;
  letter-spacing: .06em;
  color: var(--sb-ink-faint);
  white-space: nowrap;
}

/* ── Error state (heart toggle server error) ──────────────── */
.evx-card__save-err{
  font: 500 12px/1 var(--sb-font-sans);
  color: var(--sb-terracotta);
}

/* ════════════════════════════════════════════════════════════
   SAVED EVENTS v2 (poster cards) · FOLLOWING (org cards) ·
   PAYMENTS & BILLING (bill cards)  — Sambandha Portal v2 design.
   Per-card accent inherited from .sb-tkt--c{N} (sets --sb-tkt-c);
   referenced here as var(--sb-tkt-c). AR-09: no inline styles.
   ════════════════════════════════════════════════════════════ */

/* ── Saved events — poster grid (3-up on web) ─────────────── */
.sb-se-grid{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:18px; }
.sb-se-card{ display:flex; flex-direction:column; background:var(--sb-card); border:1px solid var(--sb-line); border-radius:18px; box-shadow:var(--sb-sh-sm); overflow:hidden; transition:transform .2s, box-shadow .25s, border-color .2s; }
.sb-se-card:hover{ transform:translateY(-3px); box-shadow:var(--sb-sh-lg); border-color:var(--sb-line-strong); }
.sb-se-card__poster{ position:relative; aspect-ratio:4 / 3; padding:13px; display:flex; flex-direction:column; justify-content:space-between; color:#fff; overflow:hidden;
  background:linear-gradient(155deg, var(--sb-tkt-c, var(--sb-accent)), color-mix(in srgb, var(--sb-tkt-c, var(--sb-accent)) 50%, #1a0d16)); }
.sb-se-card__poster::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    radial-gradient(circle at 78% 18%, rgba(255,255,255,.16), transparent 42%),
    repeating-radial-gradient(circle at 50% 122%, rgba(255,255,255,.07) 0 1px, transparent 1px 26px); }
.sb-se-card__poster-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.sb-se-card__poster-img + .sb-se-card__poster-scrim{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(20,12,8,.28), rgba(20,12,8,.62)); }
.sb-se-card__cat{ position:relative; z-index:2; align-self:flex-start; font-family:var(--sb-font-mono); font-size:10px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; padding:5px 11px; border-radius:var(--sb-r-pill); background:rgba(20,12,8,.45); backdrop-filter:blur(4px); color:#fff; }
.sb-se-card__heart{ position:absolute; top:12px; right:12px; z-index:3; }
.sb-se-card__art{ position:absolute; inset:0; z-index:1; display:grid; place-items:center; padding:0 18px; text-align:center; font-family:var(--sb-font-serif); font-weight:600; font-size:23px; line-height:1.12; letter-spacing:-.01em; color:#fff; text-shadow:0 2px 14px rgba(0,0,0,.32); text-wrap:balance; }
.sb-se-card__date{ position:relative; z-index:2; align-self:flex-start; display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:600; padding:6px 11px; border-radius:var(--sb-r-pill); background:rgba(255,253,248,.94); color:var(--sb-ink); box-shadow:var(--sb-sh-sm); }
.sb-se-card__date svg{ color:var(--sb-accent); flex:none; }
.sb-se-card__body{ flex:1; display:flex; flex-direction:column; padding:15px 17px 14px; }
.sb-se-card__title{ font-family:var(--sb-font-serif); font-size:17.5px; font-weight:600; line-height:1.18; margin:0; letter-spacing:-.01em; color:var(--sb-ink); }
.sb-se-card__by{ font-size:13px; color:var(--sb-ink-soft); margin-top:6px; }
.sb-se-card__by a{ color:var(--sb-accent); font-weight:600; text-decoration:none; }
.sb-se-card__by a:hover{ text-decoration:underline; }
.sb-se-card__foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:14px; padding-top:13px; border-top:1px solid var(--sb-line); }
.sb-se-card__venue{ display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--sb-ink-faint); min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.sb-se-card__venue svg{ flex:none; }
.sb-se-card__view{ flex:none; white-space:nowrap; display:inline-flex; align-items:center; gap:5px; border:0; background:none; color:var(--sb-accent); font-size:13px; font-weight:600; text-decoration:none; transition:gap .15s; }
.sb-se-card__view:hover{ gap:9px; }

/* ── Following — organisation cards (2-up on web) ─────────── */
.sb-org-grid{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; }
.sb-org-card{ display:flex; flex-direction:column; background:var(--sb-card); border:1px solid var(--sb-line); border-radius:var(--sb-r-lg); box-shadow:var(--sb-sh-sm); padding:20px 20px 16px; transition:transform .2s, box-shadow .25s, border-color .2s; }
.sb-org-card:hover{ transform:translateY(-3px); box-shadow:var(--sb-sh-md); border-color:var(--sb-line-strong); }
.sb-org-card__head{ display:flex; align-items:center; gap:13px; }
.sb-org-mark{ width:50px; height:50px; flex:none; border-radius:15px; display:grid; place-items:center; color:#fff; font-family:var(--sb-font-serif); font-size:19px; font-weight:600; overflow:hidden;
  background:linear-gradient(150deg, var(--sb-tkt-c, var(--sb-accent)), color-mix(in srgb, var(--sb-tkt-c, var(--sb-accent)) 52%, #1a0d16)); box-shadow:0 4px 12px -4px color-mix(in srgb, var(--sb-tkt-c, var(--sb-accent)) 60%, transparent); }
.sb-org-mark img{ width:100%; height:100%; object-fit:cover; }
.sb-org-card__id{ min-width:0; }
.sb-org-card__id h3{ font-family:var(--sb-font-serif); font-size:18.5px; font-weight:600; line-height:1.14; margin:0; letter-spacing:-.01em; color:var(--sb-ink); }
.sb-org-card__type{ display:inline-block; font-family:var(--sb-font-mono); font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--sb-ink-faint); margin-top:5px; }
.sb-org-card__blurb{ font-size:13.5px; color:var(--sb-ink-soft); line-height:1.5; margin:15px 0 0; text-wrap:pretty; flex:1; }
.sb-org-card__meta{ display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--sb-ink-faint); margin-top:14px; }
.sb-org-card__meta span{ display:inline-flex; align-items:center; gap:6px; }
.sb-org-card__meta svg{ color:var(--sb-ink-faint); flex:none; }
.sb-org-card__meta b{ color:var(--sb-ink-soft); font-weight:600; }
.sb-org-card__sep{ width:3px; height:3px; border-radius:50%; background:var(--sb-line-strong); flex:none; }
.sb-org-card__foot{ display:flex; gap:9px; margin-top:16px; padding-top:16px; border-top:1px solid var(--sb-line); }
.sb-org-card__foot .sb-btn{ flex:1; }
.sb-org-card__view{ flex:none !important; padding-left:22px; padding-right:22px; }
/* follow / following pill (reuses sbToggleFollow JS) */
.sb-btn-follow{ display:inline-flex; align-items:center; justify-content:center; gap:7px; border-radius:var(--sb-r-pill); font:600 13px/1 var(--sb-font-sans); padding:9px 15px; cursor:pointer; transition:.16s; border:1px solid transparent; background:var(--sb-ink); color:var(--sb-paper); }
.sb-btn-follow:hover{ filter:brightness(1.05); }
.sb-btn-follow--on{ background:var(--sb-green-tint); color:var(--sb-green); border-color:rgba(79,122,58,.3); }
.sb-btn-follow--on:hover{ background:rgba(79,122,58,.16); filter:none; }
.sb-btn-follow svg{ flex:none; }

/* ── Payments & Billing — bill cards ──────────────────────── */
/* Status filter reuses the My-Tickets segmented toggle (.sb-ticket-tabs) via a
   4-equal-segment variant — per the "any new toggle follows the ticket toggle"
   rule. gap:0 + equal grid columns make the sliding ink reliable; Alpine drives
   only `transform` (a layout property — AR-09 compliant). */
.sb-ticket-tabs--seg4{ display:grid; grid-template-columns:repeat(4, 1fr); gap:0; width:100%; max-width:440px; }
.sb-ticket-tabs--seg4 .sb-ticket-tab{ justify-content:center; padding:9px 8px; }
.sb-ticket-tabs--seg4 .sb-ticket-tabs__ink{ width:calc((100% - 8px) / 4); }
.sb-bill{ display:flex; flex-direction:column; gap:11px; }
.sb-bill-card{ display:flex; align-items:center; gap:15px; flex-wrap:wrap; background:var(--sb-card); border:1px solid var(--sb-line); border-radius:16px; box-shadow:var(--sb-sh-sm); padding:15px 17px; transition:border-color .2s, box-shadow .25s, transform .2s; }
.sb-bill-card:hover{ border-color:var(--sb-line-strong); box-shadow:var(--sb-sh-md); transform:translateY(-1px); }
.sb-bill-card.is-failed{ border-color:rgba(194,65,12,.32); background:linear-gradient(0deg, var(--sb-terracotta-tint), var(--sb-terracotta-tint)), var(--sb-card); }
.sb-bill-card__mark{ flex:none; width:46px; height:46px; border-radius:13px; display:grid; place-items:center; color:#fff;
  background:linear-gradient(150deg, var(--sb-tkt-c, var(--sb-accent)), color-mix(in srgb, var(--sb-tkt-c, var(--sb-accent)) 52%, #1a0d16)); box-shadow:0 4px 12px -4px color-mix(in srgb, var(--sb-tkt-c, var(--sb-accent)) 55%, transparent); }
.sb-bill-card__main{ flex:1 1 220px; min-width:0; }
.sb-bill-card__ev{ font-family:var(--sb-font-serif); font-size:16.5px; font-weight:600; line-height:1.16; margin:0; letter-spacing:-.01em; color:var(--sb-ink); }
.sb-bill-card__meta{ font-size:12.5px; color:var(--sb-ink-soft); margin-top:4px; }
.sb-bill-card__right{ display:flex; align-items:center; gap:18px; }
.sb-bill-card__end{ display:flex; align-items:center; gap:14px; }
.sb-bill-card__amounts{ text-align:right; }
.sb-bill-card__amt{ font-size:15px; font-weight:700; white-space:nowrap; letter-spacing:-.01em; color:var(--sb-ink); }
.sb-bill-card__amt em{ font-style:italic; color:var(--sb-green); font-weight:600; }
.sb-bill-card__method{ font-family:var(--sb-font-mono); font-size:11px; color:var(--sb-ink-faint); margin-top:3px; white-space:nowrap; }
.sb-pay-status{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; padding:5px 11px; border-radius:var(--sb-r-pill); white-space:nowrap; }
.sb-pay-status svg{ flex:none; }
.sb-pay-status--paid{ background:var(--sb-green-tint); color:var(--sb-green); }
.sb-pay-status--pending{ background:rgba(234,179,8,.14); color:var(--sb-mustard-ink); }
.sb-pay-status--failed{ background:var(--sb-terracotta-tint); color:var(--sb-terracotta-deep); }
.sb-bill-dl{ flex:none; width:38px; height:38px; border-radius:11px; border:1px solid var(--sb-line); background:var(--sb-card); color:var(--sb-ink-soft); display:grid; place-items:center; cursor:pointer; text-decoration:none; transition:.2s; }
.sb-bill-dl:hover{ border-color:var(--sb-accent); color:var(--sb-accent); }
.sb-bill-dl:disabled{ opacity:.45; cursor:not-allowed; }
.sb-bill-wait{ flex:none; width:38px; height:38px; border-radius:11px; display:grid; place-items:center; color:var(--sb-mustard-deep); background:rgba(234,179,8,.12); }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 920px){
  .sb-se-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px){
  .sb-se-grid{ grid-template-columns:1fr; }
  .sb-org-grid{ grid-template-columns:1fr; }
  .sb-bill-card__main{ flex:1 1 100%; }
  .sb-bill-card__right{ flex:1 1 100%; justify-content:space-between; border-top:1px solid var(--sb-line); padding-top:13px; }
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 560px){
  .sb-saved-grid{ grid-template-columns: 1fr; }
  .evx-detail-title-row{ flex-direction: column; gap: 8px; }
  .evx-detail-title-row .evx-card__save{ margin-top: 0; }
}

/* ============================================================
   PHASE 6 — GLOBAL PUBLIC PORTAL UI COMPONENTS
   Sambandha warm-editorial: Loader · Toast · Confirm · Save Buttons
   AR-09: all CSS here, zero inline styles in component HTML files.
   AR-32: Port 8000 only. Never imported by admin templates.
   ============================================================ */

/* ── Shared keyframes ────────────────────────────────────────── */
@keyframes sb-trace   { 0%{ stroke-dashoffset:100; } 50%{ stroke-dashoffset:0; } 100%{ stroke-dashoffset:-100; } }
@keyframes sb-breathe { 0%,100%{ opacity:.4; } 50%{ opacity:.85; } }
@keyframes sb-pop     { 0%{ transform:scale(.4); opacity:0; } 100%{ transform:scale(1); opacity:1; } }
@keyframes sb-heartpop{
  0%  { transform:scale(1);    }
  28% { transform:scale(1.38); }
  55% { transform:scale(.88);  }
  100%{ transform:scale(1);    }
}
@media (prefers-reduced-motion: reduce){
  .sb-loader__mark path{ animation:none; stroke-dashoffset:0; }
  .sb-loader__word     { animation:none; opacity:.7; }
}

/* ── sb-loader: full-page brand loader ──────────────────────────
   Auto-hides on page load. SbLoader.show()/hide() for HTMX saves. */
.sb-loader{
  position:fixed; inset:0; z-index:9999; display:grid; place-items:center;
  background-color: var(--sb-paper);
  background-image:
    radial-gradient(1200px 520px at 82% -8%, rgba(234,179,8,.08), transparent 60%),
    radial-gradient(900px 500px at -6%  4%, rgba(194,65,12,.06),  transparent 55%);
  transition: opacity .5s ease, visibility .5s ease;
}
.sb-loader.sb-loader--hide{ opacity:0; visibility:hidden; pointer-events:none; }
.sb-loader__inner{ display:flex; flex-direction:column; align-items:center; gap:16px; }
.sb-loader__mark { width:56px; height:56px; color:var(--sb-terracotta); }
.sb-loader__mark svg{ width:100%; height:100%; display:block; }
.sb-loader__mark path{
  stroke-dasharray:100; stroke-dashoffset:100;
  animation: sb-trace 1.5s cubic-bezier(.65,0,.35,1) infinite;
}
.sb-loader__word{
  font-family: var(--sb-font-serif); font-size:15px;
  letter-spacing:.01em; color:var(--sb-ink-soft);
  animation: sb-breathe 1.5s ease-in-out infinite;
}

/* ── sb-toast: slide-in notification ────────────────────────────
   top-right desktop · top-centre mobile · 3.4 s auto-dismiss. */
.sb-toast{
  position:fixed; top:88px; right:24px; left:auto;
  transform: translateY(-18px) scale(.96);
  display:flex; align-items:center; gap:13px;
  background:var(--sb-card); color:var(--sb-ink);
  border:1px solid var(--sb-line); border-radius:16px;
  padding:12px 20px 12px 13px; box-shadow:var(--sb-sh-lg); z-index:200;
  min-width:290px; max-width:min(400px, calc(100vw - 32px));
  opacity:0; pointer-events:none;
  transition: opacity .35s cubic-bezier(.2,.7,.2,1), transform .4s cubic-bezier(.2,.9,.3,1.2);
}
.sb-toast.sb-toast--show{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.sb-toast__ico{
  flex:none; width:42px; height:42px; border-radius:12px;
  display:grid; place-items:center;
  background:var(--sb-terracotta-tint); color:var(--sb-terracotta);
}
.sb-toast__ico svg{ width:22px; height:22px; }
.sb-toast--show .sb-toast__ico svg{ animation: sb-pop .5s cubic-bezier(.2,.9,.3,1.4); }
.sb-toast__txt{ display:flex; flex-direction:column; gap:2px; min-width:0; padding-right:4px; }
.sb-toast__title{
  font-family:var(--sb-font-serif); font-weight:500; font-size:17px;
  line-height:1.15; letter-spacing:-.01em;
}
.sb-toast__sub{ font-size:12.5px; color:var(--sb-ink-soft); line-height:1.4; text-wrap:pretty; }
.sb-toast__sub:empty{ display:none; }
.sb-toast--plum .sb-toast__ico{ background:var(--sb-mustard-tint); color:var(--sb-mustard-deep); }
@media (max-width:620px){
  .sb-toast{
    top:calc(76px + env(safe-area-inset-top));
    left:16px; right:16px; min-width:0; max-width:none;
    transform:translateY(-18px) scale(.96);
  }
  .sb-toast.sb-toast--show{ transform:translateY(0) scale(1); }
}

/* ── sb-overlay + sb-confirm: centred modal dialog ──────────────
   variant default → terracotta · sb-confirm--gate → plum (login). */
.sb-overlay{
  position:fixed; inset:0; z-index:100; display:none;
  align-items:center; justify-content:center; padding:24px;
  background:rgba(54,24,48,.42); backdrop-filter:blur(4px);
  opacity:0; transition:opacity .25s;
}
.sb-overlay.sb-overlay--open{ display:flex; opacity:1; }
.sb-confirm{
  width:100%; max-width:416px; background:var(--sb-card);
  border-radius:var(--sb-r-lg); box-shadow:var(--sb-sh-lg);
  border:1px solid var(--sb-line); overflow:hidden;
  text-align:center; padding:36px 32px 28px; position:relative;
  transform:translateY(16px) scale(.97);
  transition:transform .3s cubic-bezier(.2,.9,.3,1.2);
}
.sb-overlay.sb-overlay--open .sb-confirm{ transform:none; }
.sb-confirm__close{
  position:absolute; top:16px; right:16px; width:34px; height:34px;
  border-radius:50%; border:1px solid var(--sb-line);
  background:var(--sb-card-2); display:grid; place-items:center;
  color:var(--sb-ink-soft); cursor:pointer;
  transition:background .2s, color .2s;
}
.sb-confirm__close:hover{ background:var(--sb-terracotta-tint); color:var(--sb-terracotta); }
.sb-confirm__close svg{ width:17px; height:17px; }
.sb-confirm__ico{
  width:66px; height:66px; margin:4px auto 18px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--sb-terracotta-tint); color:var(--sb-terracotta);
  animation: sb-pop .45s cubic-bezier(.2,.9,.3,1.4);
}
.sb-confirm__ico svg{ width:30px; height:30px; fill:currentColor; }
.sb-confirm__h3{
  font-family:var(--sb-font-serif); font-weight:500; font-size:26px;
  margin:0; letter-spacing:-.012em; line-height:1.1;
}
.sb-confirm__p{
  color:var(--sb-ink-soft); font-size:15px; margin:11px auto 0;
  max-width:33ch; line-height:1.55; text-wrap:pretty;
}
.sb-confirm__btns{ display:flex; gap:12px; margin-top:26px; }
.sb-confirm__btns button{
  flex:1; min-width:0; border-radius:var(--sb-r-pill);
  padding:14px 16px; font-size:15px; font-weight:600; font-family:inherit;
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; cursor:pointer;
  transition:transform .15s, box-shadow .25s, background .2s, border-color .2s;
}
.sb-btn-cancel{ border:1px solid var(--sb-line-strong); background:var(--sb-card); color:var(--sb-ink); }
.sb-btn-cancel:hover{ background:var(--sb-card-2); border-color:var(--sb-ink-faint); transform:translateY(-1px); }
.sb-btn-confirm{ border:none; background:var(--sb-terracotta); color:#fff; box-shadow:var(--sb-sh-cta); }
.sb-btn-confirm:hover{ background:var(--sb-terracotta-deep); transform:translateY(-2px); box-shadow:0 10px 24px -6px rgba(194,65,12,.5); }
.sb-btn-confirm:active{ transform:translateY(0); }
/* Gate (login-required) variant — primary action matches the portal's
   terracotta button colour (default .sb-btn-confirm already terracotta);
   only the lock icon keeps a soft accent tint. */
.sb-confirm--gate .sb-confirm__ico{ background:color-mix(in srgb, var(--sb-terracotta) 12%, transparent); color:var(--sb-terracotta); }
@media (max-width:460px){
  .sb-confirm{ padding:30px 22px 24px; }
  .sb-confirm__btns{ flex-direction:column-reverse; }
}

/* ── sb-btn-save: desktop ticket-rail pill save button ──────────
   Used inside .evx-ticket__actions on event_detail.html. */
.sb-btn-save{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--sb-line-strong);
  background:var(--sb-card); color:var(--sb-ink); border-radius:var(--sb-r-pill);
  padding:12px 20px; font-size:14.5px; font-weight:600; font-family:inherit;
  cursor:pointer; box-shadow:var(--sb-sh-sm);
  transition:background .2s, border-color .2s, color .2s, transform .15s, box-shadow .2s;
}
.sb-btn-save:hover{ transform:translateY(-2px); box-shadow:var(--sb-sh-md); }
.sb-btn-save svg{
  width:18px; height:18px; fill:transparent;
  transition:transform .25s cubic-bezier(.2,.9,.3,1.4);
}
.sb-btn-save.sb-btn-save--saved{
  background:var(--sb-terracotta-tint); border-color:var(--sb-terracotta); color:var(--sb-terracotta-deep);
}
.sb-btn-save.sb-btn-save--saved svg{ fill:var(--sb-terracotta); }
.sb-btn-save.sb-btn-save--pulse svg{ animation:sb-heartpop .5s cubic-bezier(.2,.9,.3,1.4); }

/* ── sb-mcta-save: mobile sticky bar compact save icon button ── */
.sb-mcta-save{
  flex:none; width:50px; height:50px; border-radius:50%;
  border:1px solid var(--sb-line-strong); background:var(--sb-card); color:var(--sb-ink);
  display:grid; place-items:center; cursor:pointer;
  transition:background .2s, border-color .2s, color .2s, transform .15s;
}
.sb-mcta-save:hover{ transform:translateY(-1px); }
.sb-mcta-save svg{
  width:22px; height:22px; fill:transparent;
  transition:transform .25s cubic-bezier(.2,.9,.3,1.4);
}
.sb-mcta-save.sb-mcta-save--saved{
  background:var(--sb-terracotta-tint); border-color:var(--sb-terracotta); color:var(--sb-terracotta);
}
.sb-mcta-save.sb-mcta-save--saved svg{ fill:currentColor; }
.sb-mcta-save.sb-mcta-save--pulse svg{ animation:sb-heartpop .5s cubic-bezier(.2,.9,.3,1.4); }

/* ════════════════════════════════════════════════════════════════════
   ERROR STATES — Public Portal (port 8000) premium error pages
   Adapted from the Sambandha "Error Pages" reference (portal/error.css)
   onto the live --sb-* token system. Standalone composition: the
   templates load this file directly and do NOT depend on the portal
   header/nav middleware state, so a 500 raised before middleware runs
   still renders cleanly. Admin (port 8001) is untouched.
   ════════════════════════════════════════════════════════════════════ */

/* ---- standalone page shell (cream, centered, subtle warmth) ---- */
.sb-errpage{
  min-height:100vh; min-height:100dvh;
  display:flex; flex-direction:column;
  background:var(--sb-paper);
  background-image:
    radial-gradient(120% 80% at 12% -8%, rgba(234,179,8,.08), transparent 60%),
    radial-gradient(120% 80% at 100% 110%, rgba(194,65,12,.08), transparent 55%);
  color:var(--sb-ink);
  font-family:var(--sb-font-sans);
}
.sb-errpage__brand{
  display:flex; align-items:center; gap:10px;
  padding:22px 28px; flex:none;
  font-family:var(--sb-font-serif); font-weight:600; font-size:18px;
  color:var(--sb-ink); text-decoration:none;
}
.sb-errpage__brand svg{ width:22px; height:22px; color:var(--sb-terracotta); }
.sb-errpage__body{ flex:1; display:flex; align-items:center; justify-content:center; }
.sb-errpage__foot{
  flex:none; padding:18px 28px 26px; text-align:center;
  font-family:var(--sb-font-mono); font-size:10.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--sb-ink-faint);
}

/* ---- error column ---- */
.sb-err-wrap{
  width:100%; display:flex; align-items:center; justify-content:center;
  padding:54px 40px 64px;
}
.sb-err{
  width:100%; max-width:480px; margin:0 auto;
  display:flex; flex-direction:column; align-items:center; text-align:center;
}

/* tone variants — emblem + accents pick up the right brand hue */
.sb-err.tone-accent  { --tone:var(--sb-terracotta); --tone-deep:var(--sb-terracotta-deep); --tone-tint:var(--sb-terracotta-tint); }
.sb-err.tone-marigold{ --tone:#c47d1f; --tone-deep:#a3650f; --tone-tint:var(--sb-marigold-tint); }
.sb-err.tone-plum    { --tone:var(--sb-mustard); --tone-deep:var(--sb-mustard-deep); --tone-tint:var(--sb-mustard-tint); }
.sb-err.tone-green   { --tone:var(--sb-green); --tone-deep:#3c5e2c; --tone-tint:var(--sb-green-tint); }

/* ---- ring emblem (echoes the brand mark) ---- */
.sb-err__art{
  position:relative; width:176px; height:176px;
  display:grid; place-items:center; margin-bottom:26px;
  animation:sb-emblemFloat 5.5s ease-in-out infinite;
}
.sb-err__rings{ position:absolute; inset:0; color:var(--tone); }
.sb-err__rings .r-dash{ color:var(--sb-line-strong); }
.sb-err__rings .r-spin{ transform-origin:center; animation:sb-ringSpin 36s linear infinite; }
.sb-err__core{
  position:relative; z-index:2;
  width:112px; height:112px; border-radius:50%;
  background:radial-gradient(120% 120% at 30% 22%, color-mix(in srgb, var(--tone-tint) 70%, #fff), var(--tone-tint));
  display:grid; place-items:center;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--tone) 22%, transparent);
}
.sb-err__code{
  font-family:var(--sb-font-serif); font-weight:600;
  font-size:42px; line-height:1; letter-spacing:-.02em;
  color:var(--tone-deep);
}
.sb-err__core .sb-err__glyph{ color:var(--tone-deep); display:grid; place-items:center; }
.sb-err__badge{
  position:absolute; z-index:3; top:6px; right:12px;
  width:46px; height:46px; border-radius:50%;
  background:var(--sb-card); color:var(--tone);
  display:grid; place-items:center;
  box-shadow:var(--sb-sh-md); border:1px solid var(--sb-line);
}
.sb-err__spark{ position:absolute; border-radius:50%; background:var(--tone); opacity:.5; }
.sb-err__spark.s1{ width:8px; height:8px; left:8px; top:40px; }
.sb-err__spark.s2{ width:5px; height:5px; right:16px; bottom:30px; opacity:.35; }
.sb-err__spark.s3{ width:6px; height:6px; left:46px; bottom:8px; opacity:.4; }

/* ---- copy ---- */
.sb-err__kicker{
  font-family:var(--sb-font-mono); font-size:11.5px; letter-spacing:.2em;
  text-transform:uppercase; font-weight:500; color:var(--tone-deep);
  display:inline-flex; align-items:center; gap:9px;
  padding:6px 14px; border-radius:var(--sb-r-pill);
  background:var(--tone-tint); margin-bottom:18px;
}
.sb-err__kicker svg{ width:14px; height:14px; }
.sb-err__title{
  font-family:var(--sb-font-serif); font-weight:500;
  font-size:clamp(28px, 4vw, 40px); line-height:1.06; letter-spacing:-.02em;
  color:var(--sb-ink); margin:0 0 14px; text-wrap:balance;
}
.sb-err__body{
  font-size:16px; line-height:1.62; color:var(--sb-ink-soft);
  max-width:42ch; margin:0 auto 30px; text-wrap:pretty;
}

/* ---- actions ---- */
.sb-err__actions{ display:flex; flex-wrap:wrap; gap:11px; justify-content:center; width:100%; }
.sb-err-btn{
  flex:1 1 auto; min-width:150px; max-width:240px;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--sb-font-sans); font-size:14.5px; font-weight:600;
  padding:13px 22px; border-radius:var(--sb-r-pill);
  cursor:pointer; text-decoration:none; border:1px solid transparent;
  transition:transform .15s var(--pubx-ease), background .18s, border-color .18s, box-shadow .18s;
}
.sb-err-btn svg{ width:17px; height:17px; }
.sb-err-btn:hover{ transform:translateY(-1px); }
.sb-err-btn--primary{ background:var(--tone, var(--sb-terracotta)); color:#fff; box-shadow:var(--sb-sh-cta); }
.sb-err-btn--primary:hover{ background:var(--tone-deep, var(--sb-terracotta-deep)); color:#fff; }
.sb-err-btn--ghost{ background:var(--sb-card); color:var(--sb-ink); border-color:var(--sb-line-strong); }
.sb-err-btn--ghost:hover{ background:var(--sb-card-2); border-color:var(--sb-ink-faint); color:var(--sb-ink); }

/* ---- footer / reference ---- */
.sb-err__foot{
  margin-top:32px; padding-top:22px; border-top:1px solid var(--sb-line);
  width:100%; max-width:380px;
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.sb-err__ref{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--sb-font-mono); font-size:11.5px; letter-spacing:.04em;
  color:var(--sb-ink-faint); background:var(--sb-card-2); border:1px solid var(--sb-line);
  padding:7px 14px; border-radius:var(--sb-r-pill); cursor:pointer; transition:.18s;
}
.sb-err__ref:hover{ border-color:var(--sb-line-strong); color:var(--sb-ink-soft); }
.sb-err__ref svg{ width:14px; height:14px; opacity:.7; }
.sb-err__help{ font-size:13px; color:var(--sb-ink-faint); }
.sb-err__help a{
  color:var(--tone-deep, var(--sb-terracotta-deep)); font-weight:600;
  text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px;
  text-decoration-color:color-mix(in srgb, var(--tone) 40%, transparent);
}
.sb-err__help a:hover{ text-decoration-color:var(--tone); }

/* ---- entrance animation (staggered) + idle motion ---- */
@keyframes sb-errPop{ from{ transform:scale(.78); opacity:0; } to{ transform:scale(1); opacity:1; } }
@keyframes sb-errRise{ from{ transform:translateY(14px); opacity:0; } to{ transform:none; opacity:1; } }
@keyframes sb-emblemFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }
@keyframes sb-ringSpin{ to{ transform:rotate(360deg); } }
.sb-err[data-anim] .sb-err__art{ animation:sb-errPop .55s cubic-bezier(.2,.8,.25,1.1) both, sb-emblemFloat 5.5s ease-in-out infinite .55s; }
.sb-err[data-anim] .sb-err__kicker{ animation:sb-errRise .5s ease both .12s; }
.sb-err[data-anim] .sb-err__title{ animation:sb-errRise .5s ease both .18s; }
.sb-err[data-anim] .sb-err__body{ animation:sb-errRise .5s ease both .24s; }
.sb-err[data-anim] .sb-err__actions{ animation:sb-errRise .5s ease both .3s; }
.sb-err[data-anim] .sb-err__foot{ animation:sb-errRise .5s ease both .38s; }

@media (max-width:560px){
  .sb-err-wrap{ padding:40px 22px 52px; }
  .sb-err__body{ font-size:15px; }
  .sb-err__actions{ flex-direction:column; align-items:stretch; }
  .sb-err-btn{ max-width:none; }
}

@media (prefers-reduced-motion: reduce){
  .sb-err__art, .sb-err__rings .r-spin{ animation:none !important; }
  .sb-err[data-anim] *{ animation-duration:.001s !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════════
   GLOBAL MARKETPLACE  (glm-*)
   Design system for the Event Sanjal public storefront served on Port 8000 (/).
   All design tokens are prefixed --glm-* — no collision with tenant portal tokens.
   All selectors are prefixed  .glm-*  — zero bleed into tenant portal pages.
   Fonts: Outfit (display sans) + DM Sans (UI sans) — both already loaded via
          _head_assets.html Google Fonts request; no additional CDN call needed.
═══════════════════════════════════════════════════════════════════════════════ */

/* ── Design tokens ─────────────────────────────────────────────────────────── */
:root {
  /* Brand palette — Nepali cultural theme */
  --glm-saffron:          #e8830a;
  --glm-saffron-light:    #fef3e2;
  --glm-saffron-deep:     #b5600a;
  --glm-crimson:          #c0392b;
  --glm-crimson-light:    #fdf2f2;
  --glm-crimson-deep:     #922b21;
  --glm-forest:           #2d6a4f;
  --glm-forest-light:     #e8f5ef;
  --glm-cobalt:           #1e4fa0;
  --glm-cobalt-light:     #eff4fd;
  --glm-plum:             #C2410C;
  --glm-plum-deep:        #9A3412;
  --glm-plum-mid:         #A33510;
  --glm-plum-border:      rgba(255,255,255,.12);
  --glm-marigold:         #EAB308;
  --glm-marigold-deep:    #CA8A04;

  /* Reference accent sync — the reference :root uses terracotta as the single
     primary accent (`--accent: var(--terracotta)`). These exact values mirror
     Global Portal/app/styles.css. Accent-role surfaces point at --glm-accent;
     saffron is retained only as the Festival category-badge colour. */
  --glm-terracotta:       #C2410C;
  --glm-terracotta-deep:  #9A3412;
  --glm-green:            #4f7a3a;
  --glm-green-deep:       #3c5f2c;
  --glm-accent:           var(--glm-terracotta);
  --glm-accent-deep:      var(--glm-terracotta-deep);
  --glm-accent-ink:       #fff;
  --glm-accent-tint:      color-mix(in oklab, var(--glm-accent) 12%, transparent);

  /* Mustard accent — secondary CTA, featured badges, accent fills */
  --glm-mustard:          #EAB308;
  --glm-mustard-deep:     #CA8A04;
  --glm-mustard-tint:     rgba(234, 179, 8, .12);
  --glm-mustard-bg:       #FEF9C3;
  --glm-mustard-ink:      #713F12;

  /* Warm neutral scale — recalibrated to Terracotta + Mustard + Cream */
  --glm-bg:               #FFFBF0;
  --glm-bg-alt:           #F5EDD5;
  --glm-card:             #FFFFFF;
  --glm-card-2:           #FFF9EE;
  --glm-ink:              #1C0A04;
  --glm-ink-soft:         #6B5744;
  --glm-muted:            #9B8677;
  --glm-faint:            #C4B5A5;
  --glm-line:             #E8D9C0;
  --glm-line-strong:      #D4BFA0;
  --glm-border:           rgba(28,10,4,.08);
  --glm-border-strong:    rgba(28,10,4,.16);
  --glm-surface:          #FFFBF0;
  --glm-surface-alt:      #F5EDD5;
  --glm-card-bg:          #FFFFFF;
  --glm-night:            #0f1117;

  /* Shadows (warm-tinted) */
  --glm-sh-sm:  0 1px 2px rgba(28,10,4,.05), 0 2px 6px rgba(28,10,4,.04);
  --glm-sh-md:  0 2px 6px rgba(28,10,4,.05), 0 10px 24px -8px rgba(28,10,4,.14);
  --glm-sh-lg:  0 4px 10px rgba(28,10,4,.06), 0 26px 60px -18px rgba(28,10,4,.26);

  /* Layout */
  --glm-hero-h:           560px;
  --glm-section-px:       clamp(18px, 4vw, 32px);   /* reference .wrap = 0 32px (≈1136px content); was capping at 48px → ~32px too narrow */
  --glm-sec-pad:          30px;   /* vertical section rhythm — reference default density "regular" --sec-pad:30px (was 64px → gap between sections too large) */
  --glm-max-w:            1200px;
  --glm-hdr-h:            64px;
  --glm-radius-lg:        22px;
  --glm-radius-pill:      999px;
  --glm-radius-card:      12px;
  --glm-radius-btn:       8px;
  --glm-radius-input:     8px;

  /* Typography */
  --glm-font-display:     'Outfit', system-ui, -apple-system, sans-serif;
  --glm-font-ui:          'DM Sans', system-ui, -apple-system, sans-serif;
  --glm-font-mono:        'DM Mono', ui-monospace, 'Cascadia Code', monospace;

  /* Motion */
  --glm-ease:             cubic-bezier(.25,.46,.45,.94);
  --glm-ease-out:         cubic-bezier(.0,.0,.2,1);
  --glm-dur:              .28s;
  --glm-dur-slow:         .5s;
}

/* ════════════════════════════════════════════════════════════════════════════
   HEADER — warm cream glass (matches reference design)
════════════════════════════════════════════════════════════════════════════ */

/* Sticky wrapper is the direct flex-child of .evx-page (flex column).
   Keeping sticky here — not on the inner <header> — prevents the 64 px
   parent-height trap where the child un-sticks immediately. */
.glm-hdr-wrap {
  position: sticky;
  top: 0;
  z-index: 200;
}

.glm-hdr {
  background: rgba(255, 251, 240, 0.88);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, background .3s ease;
}
.glm-hdr--scrolled {
  border-bottom-color: var(--glm-line);
}

.glm-hdr__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  max-width: var(--glm-max-w);
  margin: 0 auto;
  padding: 12px var(--glm-section-px);
}

/* ── Brand mark + wordmark ───────────────────────────────────────────────── */
.glm-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  flex-shrink: 0;
}
.glm-brand__emblem {
  display: block;
  height: 38px;
  width: 38px;
  object-fit: contain;
  flex-shrink: 0;
}
.glm-brand__logo--sm {
  display: block;
  height: 36px;
  width: 36px;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 6px;
}
.glm-brand__txt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1;
}
.glm-brand__name {
  display: flex;
  align-items: baseline;
  gap: 0;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1;
}
.glm-brand__event {
  color: var(--glm-ink);
  font-family: var(--glm-font-display);
}
.glm-brand__deva {
  color: var(--glm-accent);
  font-family: var(--glm-font-display);
}
.glm-brand__sub {
  font-family: var(--glm-font-mono);
  font-size: 7.5px;
  font-weight: 600;
  letter-spacing: .13em;
  color: var(--glm-muted);
  text-transform: uppercase;
}

/* ── Desktop search ─────────────────────────────────────────────────────── */
.glm-hdr__search {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--glm-card);
  border: 1px solid var(--glm-line);
  border-radius: 999px;
  padding: 10px 18px;
  width: 280px;
  gap: 9px;
  flex-shrink: 0;
  transition: border-color .2s, box-shadow .2s;
}
.glm-hdr__search:focus-within {
  border-color: var(--glm-accent);
  box-shadow: 0 0 0 3px rgba(194,65,12,.12);
}
.glm-hdr__search-ico {
  width: 18px;
  height: 18px;
  color: var(--glm-muted);
  flex-shrink: 0;
}
.glm-hdr__search-input {
  font-family: var(--glm-font-ui);
  font-size: 14px;
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  outline: none;
  color: var(--glm-ink);
  padding: 0;
}
.glm-hdr__search-input::placeholder { color: var(--glm-muted); }
.glm-hdr__search-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid var(--glm-line);
  border-top-color: var(--glm-accent);
  border-radius: 50%;
  flex-shrink: 0;
  display: none;
}
.glm-hdr__search-spinner.htmx-request {
  display: block;
  animation: glm-spin .6s linear infinite;
}

/* ── Desktop nav — pushed RIGHT by margin-left:auto ────────────────────── */
.glm-hdr__nav {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-left: auto;     /* pushes nav (and everything after it) to the right */
}
.glm-hdr__navlink {
  font-family: var(--glm-font-ui);
  font-size: 14px;
  font-weight: 500;
  color: var(--glm-ink-soft);
  text-decoration: none;
  padding: 8px 13px;
  border-radius: 999px;
  transition: color .2s, background .2s;
  white-space: nowrap;
}
.glm-hdr__navlink:hover {
  color: var(--glm-ink);
  background: rgba(239, 231, 216, .7);
}
.glm-hdr__navlink--active { color: var(--glm-accent); }

/* ── Right side: auth chip + hamburger ─────────────────────────────────── */
.glm-hdr__right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
/* On mobile the desktop nav (which carries margin-left:auto) is hidden, so the
   right group — Sign In / account icon + burger — needs its own push to the
   right edge. */
@media (max-width: 991.98px) {
  .glm-hdr__right { margin-left: auto; }
}

/* Sign-in pill (guest) — filled with our primary accent (terracotta) */
.glm-hdr__signin {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1.5px solid var(--glm-accent);
  background: var(--glm-accent);
  color: var(--glm-accent-ink);
  font-family: var(--glm-font-ui);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  transition: background .2s, border-color .2s, color .2s;
  white-space: nowrap;
}
.glm-hdr__signin:hover {
  background: var(--glm-accent-deep);
  border-color: var(--glm-accent-deep);
  color: var(--glm-accent-ink);
}

/* Mobile hamburger */
.glm-hdr__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--glm-line);
  background: var(--glm-card);
  color: var(--glm-ink);
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
.glm-hdr__toggle:hover {
  background: var(--glm-card-2);
  border-color: var(--glm-line-strong);
}

/* ════════════════════════════════════════════════════════════════════════════
   MOBILE NAV DRAWER — warm panel
════════════════════════════════════════════════════════════════════════════ */
.glm-mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 300;
  pointer-events: none;
}
[x-cloak] { display: none !important; }

.glm-mobile-nav__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(36, 28, 21, .45);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  pointer-events: auto;
}
.glm-mobile-nav__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(320px, 82vw);
  background: var(--glm-bg);
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  box-shadow: var(--glm-sh-lg);
  /* No CSS animation here — Alpine x-transition owns the slide (both enter + leave).
     A competing CSS animation would break the leave/close slide-out. */
}

.glm-mobile-nav__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--glm-line);
}
.glm-mobile-nav__brand {
  font-family: var(--glm-font-display);
  font-size: 19px;
  font-weight: 500;
  color: var(--glm-ink);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
}
.glm-mobile-nav__brand-txt {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
}
.glm-mobile-nav__brand-np {
  color: var(--glm-accent);
}
.glm-mobile-nav__close {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--glm-line);
  background: var(--glm-card);
  color: var(--glm-ink-soft);
  cursor: pointer;
  transition: background .2s;
}
.glm-mobile-nav__close:hover { background: var(--glm-bg-alt); }

.glm-mobile-nav__body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 20px 28px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.glm-mobile-nav__search { position: relative; margin-bottom: 8px; }
.glm-mobile-nav__search-input {
  font-family: var(--glm-font-ui);
  font-size: 14px;
  width: 100%;
  padding: 10px 14px 10px 38px;
  border-radius: 10px;
  border: 1px solid var(--glm-line-strong);
  background: var(--glm-card);
  color: var(--glm-ink);
  outline: none;
  box-sizing: border-box;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239b8e7e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 12px center;
  transition: border-color .2s;
}
.glm-mobile-nav__search-input:focus { border-color: var(--glm-accent); }

.glm-mobile-nav__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.glm-mobile-nav__link {
  font-family: var(--glm-font-display);
  font-size: 21px;
  font-weight: 400;
  color: var(--glm-ink);
  text-decoration: none;
  padding: 13px 6px;
  border-bottom: 1px solid var(--glm-line);
  display: block;
  transition: color .2s;
}
.glm-mobile-nav__link:last-child { border-bottom: 0; }
.glm-mobile-nav__link:hover { color: var(--glm-accent); }

/* ── Mobile auth row ────────────────────────────────────────────────────── */
.glm-mobile-nav__auth {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--glm-line);
}

/* Signed-out: full-width Sign In button — filled terracotta pill, matches header */
.glm-mobile-nav__signin {
  display: block;
  width: 100%;
  padding: 13px 16px;
  border-radius: 999px;
  border: 1.5px solid var(--glm-accent);
  background: var(--glm-accent);
  color: var(--glm-accent-ink);
  font-family: var(--glm-font-ui);
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  transition: background .2s, border-color .2s;
}
.glm-mobile-nav__signin:hover {
  background: var(--glm-accent-deep);
  border-color: var(--glm-accent-deep);
}

/* ════════════════════════════════════════════════════════════════════════════
   HERO SLIDER
════════════════════════════════════════════════════════════════════════════ */
/* ── Shared page-width wrapper (hero + other top-level sections) ── */
.glm-wrap {
  max-width: var(--glm-max-w);
  margin: 0 auto;
  padding: 0 var(--glm-section-px);
}

/* ── Hero section shell ───────────────────────────────────────────── */
.glm-hero {
  padding: 20px 0 0;
  background: var(--glm-surface);
}

/* ── Banner — 21:9 aspect-ratio box ─────────────────────────────── */
.glm-banner {
  position: relative;
  border-radius: var(--glm-radius-lg);
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(28,10,4,.06), 0 26px 60px -18px rgba(28,10,4,.26);
  aspect-ratio: 21 / 9;
  background: var(--glm-plum-deep);
}

.glm-banner__track {
  position: absolute;
  inset: 0;
}

/* Slides */
.glm-banner__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .8s var(--glm-ease-out);
}
.glm-banner__slide--on {
  opacity: 1;
  pointer-events: auto;
}

/* Banner image — Ken Burns subtle zoom */
.glm-banner__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.04);
  transition: transform 6s linear;
}
.glm-banner__slide--on .glm-banner__img {
  transform: scale(1);
}
.glm-banner__img--placeholder {
  background: linear-gradient(145deg, var(--glm-plum-deep) 0%, #5C1A0A 100%);
}

/* Gradient scrim — dark at left, transparent at right */
.glm-banner__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    95deg,
    rgba(28,16,12,.90) 0%,
    rgba(28,16,12,.55) 42%,
    rgba(28,16,12,.12) 75%
  );
}

/* Category badge — top left */
.glm-banner__cat {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 3;
}

/* Content block — bottom left */
.glm-banner__body {
  position: absolute;
  left: 0;
  bottom: 0;
  max-width: 620px;
  padding: clamp(22px, 3.4vw, 44px);
  color: #fff;
  z-index: 2;
}

/* Org name row */
.glm-banner__org {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,.9);
  margin-bottom: 13px;
}
.glm-banner__org-av {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  flex: none;
  background: var(--glm-plum);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--glm-font-display);
  font-size: 14px;
  font-weight: 500;
}

/* Title */
.glm-banner__title {
  font-family: var(--glm-font-display);
  font-weight: 400;
  font-size: clamp(28px, 3.8vw, 50px);
  line-height: 1.02;
  letter-spacing: -.018em;
  margin: 0 0 14px;
  color: #fff;
}

/* Meta row */
.glm-banner__meta {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 13.5px;
  color: rgba(255,255,255,.85);
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.glm-banner__meta span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

/* CTA */
.glm-banner__cta {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.glm-btn--banner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: 999px;
  background: var(--glm-mustard);
  color: var(--glm-mustard-ink);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background .2s ease, transform .16s ease;
  box-shadow: var(--evd-sh-cta);
}
.glm-btn--banner:hover {
  background: var(--glm-mustard-deep);
  color: var(--glm-mustard-ink);
  transform: translateY(-2px);
}
.glm-btn--banner:active { transform: translateY(0); }

/* Prev / Next arrows */
.glm-banner__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.16);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  display: grid;
  place-items: center;
  z-index: 3;
  cursor: pointer;
  transition: background .2s ease;
}
.glm-banner__nav:hover { background: rgba(255,255,255,.30); }
.glm-banner__nav--prev { left: 16px; }
.glm-banner__nav--next { right: 16px; }

/* Dot indicators — bottom right */
.glm-banner__dots {
  position: absolute;
  right: 20px;
  bottom: 22px;
  display: flex;
  gap: 8px;
  z-index: 3;
}
.glm-banner__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.40);
  padding: 0;
  cursor: pointer;
  transition: all .25s var(--glm-ease-out);
}
.glm-banner__dot--on {
  background: #fff;
  width: 26px;
  border-radius: 999px;
}
.glm-banner__dot:hover { background: rgba(255,255,255,.70); }

/* Solid category badge */
.glm-badge--solid {
  display: inline-flex;
  align-items: center;
  font-family: var(--glm-font-ui);
  font-size: 10px;
  letter-spacing: .09em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  border: 1px solid rgba(255,255,255,.28);
}

/* Responsive — collapse to 4:3 below 900px (reference .banner) */
@media (max-width: 900px) {
  .glm-banner { aspect-ratio: 4 / 3; }
  .glm-banner__body { max-width: 100%; }
  .glm-banner__title { font-size: clamp(20px, 5vw, 32px); }
}
/* Phones — portrait banner + hide the prev/next arrows (dots remain),
   matching the reference @media (max-width:600px) rules. Placed after the
   900px block so the 3/4 ratio wins the cascade. */
@media (max-width: 600px) {
  .glm-banner { aspect-ratio: 3 / 4; }
  .glm-banner__nav { display: none; }
}

/* Empty hero (no upcoming events) */
.glm-hero__empty {
  min-height: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 14px;
  padding: 48px var(--glm-section-px);
  background: var(--glm-plum);
  border-radius: var(--glm-radius-lg);
}
.glm-hero__tagline {
  font-family: var(--glm-font-display);
  font-size: clamp(32px, 6vw, 64px);
  font-weight: 400;
  color: #fff;
  margin: 0;
}
.glm-hero__tagline-np {
  font-style: italic;
  color: var(--glm-marigold);
}
.glm-hero__sub {
  font-family: var(--glm-font-ui);
  font-size: 17px;
  color: rgba(255,255,255,.72);
  max-width: 480px;
  margin: 0;
  line-height: 1.6;
}

/* ════════════════════════════════════════════════════════════════════════════
   SHARED SECTION PRIMITIVES
════════════════════════════════════════════════════════════════════════════ */
.glm-section-container {
  max-width: var(--glm-max-w);
  margin: 0 auto;
  padding: var(--glm-sec-pad) var(--glm-section-px);
}
.glm-section-container--narrow {
  max-width: 680px;
}
.glm-section-hd {
  margin-bottom: 32px;
}
.glm-section-hd--center {
  text-align: center;
}
/* Section header split — title left, link right */
.glm-section-hd--split {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 32px;
}
.glm-section-hd__main { max-width: 660px; }

.glm-section-title {
  font-family: var(--glm-font-display);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 350;
  color: var(--glm-ink);
  margin: 0 0 8px;
  letter-spacing: -.015em;
  line-height: 1.00;
}
/* Italic accent word inside the title, e.g. "the <em>community</em>" */
.glm-section-title em {
  font-style: italic;
  color: var(--glm-accent);
}
.glm-section-sub {
  font-family: var(--glm-font-ui);
  font-size: 14.5px;
  color: var(--glm-ink-soft);
  margin: 0;
  line-height: 1.6;
  max-width: 540px;
}

/* ════════════════════════════════════════════════════════════════════════════
   EVENTS SECTION — tabs + filter bar
════════════════════════════════════════════════════════════════════════════ */
.glm-events {
  background: var(--glm-surface);
}
/* The .evx-page shell (server.css) sets the page body font to DM Sans; re-assert
   --glm-font-ui at higher specificity to ensure the GLM token (now DM Sans) wins
   over any server.css cascade. Explicit Outfit display titles and DM Mono kicker
   still win. */
.evx-page .glm-events {
  font-family: var(--glm-font-ui);
}
.glm-events .glm-section-container {
  padding-top: 36px;
}

/* Category tabs — wrap to as many rows as needed (all pills always visible, no
   horizontal scroll on any viewport). */
.glm-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 26px;
}
/* Exact port of the reference .tab (adapted to --glm-* tokens). */
.glm-tab {
  border: 1px solid var(--glm-line);
  background: var(--glm-card);
  padding: 8px 15px;
  border-radius: var(--glm-radius-pill);
  font-family: var(--glm-font-ui);   /* reference inherits --font-body */
  font-size: 13.5px;
  font-weight: 500;
  color: var(--glm-ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  transition: all .18s var(--glm-ease);
}
/* server.css's `.evx-page button { font: inherit; color: inherit }` is (0,1,1)
   and outranks the bare `.glm-tab` (0,1,0) — it was silently stripping the
   tab's font-family / size / colour (tabs rendered in DM Sans 16px navy).
   Re-assert them at (0,2,0) so the reference typography actually applies.
   Hover and active colours are already (0,2,0) via :hover / [aria-selected]. */
.evx-page .glm-tab {
  font-family: var(--glm-font-ui);
  font-size: 11.5px;
  font-weight: 400;          /* `font: inherit` shorthand also reset weight */
  color: var(--glm-ink-soft);
}
/* Devanagari label inside a tab — Newsreader (from .devanagari). The serif has
   different vertical metrics than the Hanken English label, so under
   align-items:center they drift apart; lock the line box and nudge the baseline
   so the देवनागरी and Latin text sit on one optical line. */
.glm-tab__deva {
  font-size: 14px;
  line-height: 1;
  opacity: .85;
  transform: translateY(1px);
}
/* Match the English label's line box to the deva so align-items:center lines
   them up rather than centering two different-height boxes. */
.glm-tab__en {
  line-height: 1;
}
/* Count number — exact reference .tab .tab-n. Inert until a count span is
   added to the tab markup. */
.glm-tab__n {
  font-size: 11px;
  color: var(--glm-muted);
  font-variant-numeric: tabular-nums;
}
.glm-tab:hover {
  border-color: var(--glm-line-strong);
  color: var(--glm-ink);
}
.glm-tab--active,
.glm-tab--active:hover {
  background: var(--glm-ink);
  border-color: var(--glm-ink);
  color: var(--glm-bg);   /* cream on ink — reference .tab.active uses var(--bg), not pure white */
}
.glm-tab--active .glm-tab__en,
.glm-tab--active:hover .glm-tab__en {
  color: var(--glm-bg);
}
.glm-tab--active .glm-tab__deva {
  color: var(--glm-mustard);
  opacity: 1;
}
/* High-specificity fallback keyed on the aria-selected attribute
   that Alpine reliably manages — overrides any inherited color. */
.glm-tab[aria-selected="true"] {
  background: var(--glm-ink);
  border-color: var(--glm-ink);
  color: var(--glm-bg);
}
.glm-tab[aria-selected="true"] .glm-tab__en {
  color: var(--glm-bg);
}
.glm-tab[aria-selected="true"] .glm-tab__deva {
  color: var(--glm-marigold);
  opacity: 1;
}
/* Count badge on the active (dark ink) pill — muted cream, matches the
   reference .tab.active .tab-n. Inert until a count span is added to markup. */
.glm-tab--active .glm-tab__n,
.glm-tab[aria-selected="true"] .glm-tab__n {
  color: rgba(255,251,240,.65);
}

/* Filter bar */
.glm-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
}
.glm-filter-bar__field {
  flex: 1;
  min-width: 160px;
  max-width: 280px;
}
.glm-filter-bar__input {
  font-family: var(--glm-font-ui);
  font-size: 14px;
  width: 100%;
  padding: 9px 14px;
  border-radius: var(--glm-radius-input);
  border: 1px solid var(--glm-border-strong);
  background: var(--glm-card-bg);
  color: var(--glm-ink);
  outline: none;
  box-sizing: border-box;
  transition: border-color var(--glm-dur) ease, box-shadow var(--glm-dur) ease;
}
.glm-filter-bar__input::placeholder { color: var(--glm-faint); }
.glm-filter-bar__input:focus {
  border-color: var(--glm-accent);
  box-shadow: 0 0 0 3px rgba(194,65,12,.12);
}
.glm-filter-bar__spinner {
  display: none;
  width: 18px;
  height: 18px;
  border: 2px solid var(--glm-border-strong);
  border-top-color: var(--glm-accent);
  border-radius: 50%;
  flex-shrink: 0;
}
.glm-filter-bar__spinner.htmx-request { display: block; animation: glm-spin .6s linear infinite; }

/* ════════════════════════════════════════════════════════════════════════════
   UNIFIED FILTER BAR — search + searchable city combobox + city quick chips
   (one Alpine scope: .glm-eventsfilter)
════════════════════════════════════════════════════════════════════════════ */
.glm-eventsfilter {
  margin-bottom: 22px;
}
/* Search (grows) + city combobox */
.glm-filterbar {
  display: flex;
  align-items: center;
  gap: 12px;
}
.glm-filterbar__search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 1;
  min-width: 0;
  max-width: 560px;   /* keep search from dominating the row on wide screens */
  background: var(--glm-card);
  border: 1px solid var(--glm-border-strong);
  border-radius: var(--glm-radius-pill);
  padding: 10px 18px;
  transition: border-color .2s var(--glm-ease), box-shadow .2s var(--glm-ease);
}
.glm-filterbar__search:focus-within {
  border-color: var(--glm-accent);
  box-shadow: 0 0 0 3px rgba(194,65,12,.12);
}
.glm-filterbar__searchico { color: var(--glm-muted); flex-shrink: 0; }
.glm-filterbar__searchinput {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-family: var(--glm-font-ui);
  font-size: 14.5px;
  color: var(--glm-ink);
  padding: 0;
}
.glm-filterbar__searchinput::placeholder { color: var(--glm-muted); }

/* City combobox host */
.glm-citfilter {
  position: relative;
  flex-shrink: 0;
}
.glm-combo__btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 190px;
  padding: 10px 14px;
  background: var(--glm-card);
  border: 1px solid var(--glm-border-strong);
  border-radius: var(--glm-radius-pill);
  font-family: var(--glm-font-ui);
  font-size: 14px;
  font-weight: 500;
  color: var(--glm-ink);
  cursor: pointer;
  transition: border-color .18s var(--glm-ease), box-shadow .18s var(--glm-ease),
              background .18s var(--glm-ease), color .18s var(--glm-ease);
}
.glm-combo__btn:hover { border-color: var(--glm-accent); }
.glm-combo__btn.is-open {
  border-color: var(--glm-accent);
  box-shadow: 0 0 0 3px rgba(194,65,12,.12);
}
/* Selected (non-"all") state — accent-tinted pill so an active city reads at a
   glance, consistent with the active category tab. */
.glm-combo__btn.is-set {
  background: var(--glm-accent-tint);
  border-color: var(--glm-accent);
  color: var(--glm-accent-deep);
}
.glm-combo__pin { color: var(--glm-accent); flex-shrink: 0; }
.glm-combo__btn.is-set .glm-combo__pin { color: var(--glm-accent-deep); }
.glm-combo__value {
  flex: 1;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.glm-combo__chev {
  color: var(--glm-muted);
  flex-shrink: 0;
  transition: transform .2s var(--glm-ease);
}
.glm-combo__btn.is-open .glm-combo__chev { transform: rotate(180deg); }

/* Popover panel */
.glm-combo__pop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 40;
  width: 280px;
  max-width: 84vw;
  background: var(--glm-card);
  border: 1px solid var(--glm-border);
  border-radius: var(--glm-radius-card);
  box-shadow: var(--glm-sh-lg);
  overflow: hidden;
}
.glm-combo-fade { transition: opacity .16s var(--glm-ease), transform .16s var(--glm-ease); }
.glm-combo-fade--off { opacity: 0; transform: translateY(-6px); }
.glm-combo-fade--on  { opacity: 1; transform: translateY(0); }
.glm-combo__searchwrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 13px;
  border-bottom: 1px solid var(--glm-border);
}
.glm-combo__searchico { color: var(--glm-muted); flex-shrink: 0; }
.glm-combo__search {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-family: var(--glm-font-ui);
  font-size: 14px;
  color: var(--glm-ink);
  padding: 0;
}
.glm-combo__search::placeholder { color: var(--glm-muted); }
.glm-combo__list {
  list-style: none;
  margin: 0;
  padding: 6px;
  max-height: 264px;
  overflow-y: auto;
}
.glm-combo__opt {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 11px;
  border: 0;
  background: transparent;
  border-radius: 8px;
  font-family: var(--glm-font-ui);
  font-size: 14px;
  color: var(--glm-ink-soft);
  cursor: pointer;
  transition: background .12s var(--glm-ease), color .12s var(--glm-ease);
}
.glm-combo__opt:hover { background: var(--glm-bg-alt); color: var(--glm-ink); }
.glm-combo__opt.is-active {
  background: var(--glm-accent-tint);
  color: var(--glm-accent-deep);
  font-weight: 600;
}
.glm-combo__empty {
  padding: 14px 12px;
  text-align: center;
  font-family: var(--glm-font-ui);
  font-size: 13px;
  color: var(--glm-muted);
}

/* Mobile — search + city stack full-width. */
@media (max-width: 680px) {
  .glm-filterbar { flex-direction: column; align-items: stretch; gap: 10px; }
  .glm-citfilter { width: 100%; }
  .glm-combo__btn { width: 100%; }
  .glm-combo__pop { left: 0; right: 0; width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .glm-combo__chev, .glm-combo-fade { transition: none; }
}

/* ════════════════════════════════════════════════════════════════════════════
   EVENTS GRID — wrapper, count, cards
════════════════════════════════════════════════════════════════════════════ */
.glm-events-grid-wrapper {
  min-height: 240px;
}
.glm-events-count {
  font-family: var(--glm-font-ui);
  font-size: 13.5px;
  color: var(--glm-muted);
  margin: 0 0 16px;
}
.glm-events-count strong { color: var(--glm-ink); }

/* Card grid — 4-up desktop, responsive collapse */
.glm-ev-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
/* Reference responsive breakpoints (Global Portal .ev-grid):
   1080→3 · 900→2 · 600→2 (tighter gap, section head stacks) · 380→1.
   Order matters — the 380 rule MUST come after 600 so the single column wins
   on the smallest phones. The matching ≤768/≤480 ev-grid rules further down
   were removed; they overrode the 380 collapse and broke 1-up on phones. */
@media (max-width: 1080px) { .glm-ev-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .glm-ev-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px)  {
  .glm-ev-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .glm-section-hd--split { flex-direction: column; align-items: flex-start; gap: 14px; }
}
@media (max-width: 380px)  { .glm-ev-grid { grid-template-columns: 1fr; } }

/* ── Event card — poster style ─────────────────────────────────────────── */
.glm-ev-grid > div {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.glm-ev-card {
  background: var(--glm-card);
  border-radius: var(--glm-radius-lg);
  border: 1px solid var(--glm-line);
  box-shadow: var(--glm-sh-sm);
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  flex: 1;
  transition: transform .28s var(--glm-ease), box-shadow .28s var(--glm-ease);
}
.glm-ev-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--glm-sh-lg);
}
.glm-ev-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
  text-align: left;
}

/* ── Image area — ~16:11 (~25% taller than 16:9); no-image → plum gradient ─ */
.glm-ev-card__media {
  position: relative;
  aspect-ratio: 5 / 4.2;
  overflow: hidden;
  background: linear-gradient(135deg, var(--glm-plum) 0%, var(--glm-plum-mid) 100%);
  flex: none;
  width: 100%;
}
.glm-ev-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s var(--glm-ease);
}
.glm-ev-card:hover .glm-ev-card__img { transform: scale(1.06); }

/* Gradient scrim — makes overlaid text legible on any image */
.glm-ev-card__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(10, 6, 2, .88) 0%,
    rgba(10, 6, 2, .52) 36%,
    transparent 65%
  );
  z-index: 2;
}

/* Date stamp — top left, calendar-page badge */
.glm-ev-card__stamp {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--glm-mustard);
  border-radius: 8px;
  padding: 4px 8px 5px;
  min-width: 36px;
  line-height: 1;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
}
.glm-ev-card__stamp-day {
  font-family: var(--glm-font-ui);
  font-size: 19px;
  font-weight: 700;
  color: var(--glm-mustard-ink);
  line-height: 1;
}
.glm-ev-card__stamp-mon {
  font-family: var(--glm-font-ui);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .10em;
  color: rgba(113, 63, 18, .85);
  text-transform: uppercase;
  margin-top: 2px;
}
.glm-ev-card__stamp-yr {
  font-family: var(--glm-font-ui);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .06em;
  color: rgba(113, 63, 18, .60);
  margin-top: 1px;
}

/* Heart / save button — top right, frosted glass circle */
.glm-ev-card__fav {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .22);
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .15);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
  cursor: pointer;
  z-index: 3;
  transition: transform .18s var(--glm-ease), background .2s, color .2s;
}
.glm-ev-card__fav:hover { transform: scale(1.12); background: rgba(255, 255, 255, .28); }
.glm-ev-card__fav.is-saved { color: var(--glm-crimson); background: rgba(255, 255, 255, .92); }
.glm-ev-card__fav svg { width: 16px; height: 16px; }

/* Overlay — category pill + title + org, layered on gradient scrim */
.glm-ev-card__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
  padding: 10px 13px 13px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Category pill — inside overlay above title */
.glm-ev-card__cat { margin-bottom: 1px; }
.glm-ev-cat {
  display: inline-flex;
  align-items: center;
  font-family: var(--glm-font-mono);
  font-size: 9px;
  letter-spacing: .09em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  color: #fff;
  opacity: .92;
}
.glm-ev-cat--saffron  { background: var(--glm-saffron);  }
.glm-ev-cat--crimson  { background: var(--glm-crimson);  }
.glm-ev-cat--forest   { background: var(--glm-forest);   }
.glm-ev-cat--cobalt   { background: var(--glm-cobalt);   }
.glm-ev-cat--muted    { background: var(--glm-muted);    }
.glm-ev-cat--night    { background: var(--glm-night);    }
.glm-ev-cat--plum     { background: var(--glm-plum);     }
.glm-ev-cat--marigold { background: var(--glm-marigold); }

/* Event title — Newsreader, white, on gradient */
.glm-ev-card__title {
  font-family: var(--glm-font-display);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: -.005em;
  margin: 0;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .5);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Org name — warm golden below title in overlay */
.glm-ev-card__host {
  font-family: var(--glm-font-ui);
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(255, 205, 100, .88);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Location strip — venue or city, below the image */
.glm-ev-card__strip {
  padding: 8px 13px 9px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-top: 1px solid var(--glm-line);
  background: var(--glm-card-2);
}
.glm-ev-card__strip-ico {
  color: var(--glm-accent);
  flex-shrink: 0;
  opacity: .75;
}
.glm-ev-card__strip-txt {
  font-family: var(--glm-font-ui);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--glm-ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: .005em;
}

/* ── Phones (≤600px) — tighten overlays on narrow cards ─────────────────── */
@media (max-width: 600px) {
  .glm-ev-card__title   { font-size: 14px; }
  .glm-ev-card__overlay { padding: 8px 10px 11px; gap: 3px; }
  .glm-ev-card__strip   { padding: 7px 10px 8px; }
  .glm-ev-card__stamp-day { font-size: 16px; }
  .glm-ev-card__stamp   { padding: 3px 6px 4px; min-width: 30px; }
  .glm-ev-cat           { font-size: 8px; padding: 2px 7px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   PAGINATION
════════════════════════════════════════════════════════════════════════════ */
.glm-pagination {
  margin-top: 36px;
}
.glm-pagination__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.glm-pagination__item { display: flex; }
.glm-pagination__ellipsis {
  padding: 0 6px;
  color: var(--glm-faint);
  font-family: var(--glm-font-ui);
  font-size: 14px;
  align-self: center;
}
.glm-pagination__btn {
  font-family: var(--glm-font-ui);
  font-size: 14px;
  font-weight: 500;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid var(--glm-border-strong);
  background: var(--glm-card-bg);
  color: var(--glm-ink-soft);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--glm-dur) ease,
              background  var(--glm-dur) ease,
              color       var(--glm-dur) ease;
}
.glm-pagination__btn:hover {
  border-color: var(--glm-accent);
  color: var(--glm-accent-deep);
}
.glm-pagination__btn--active {
  border-color: var(--glm-accent);
  background: var(--glm-accent);
  color: #fff;
  cursor: default;
}
.glm-pagination__btn--prev,
.glm-pagination__btn--next { color: var(--glm-ink-soft); }

/* ════════════════════════════════════════════════════════════════════════════
   EMPTY STATE
════════════════════════════════════════════════════════════════════════════ */
.glm-events-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 56px 24px;
  gap: 10px;
}
.glm-events-empty__ico { color: var(--glm-faint); }
.glm-events-empty__msg {
  font-family: var(--glm-font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--glm-ink);
  margin: 0;
}
.glm-events-empty__hint {
  font-family: var(--glm-font-ui);
  font-size: 14px;
  color: var(--glm-muted);
  margin: 0;
}
.glm-events-empty__reset {
  margin-top: 6px;
  font-family: var(--glm-font-ui);
  font-size: 13.5px;
  font-weight: 600;
  padding: 9px 20px;
  border-radius: var(--glm-radius-btn);
  border: 1px solid var(--glm-accent);
  background: transparent;
  color: var(--glm-accent);
  cursor: pointer;
  transition: background var(--glm-dur) ease, color var(--glm-dur) ease;
}
.glm-events-empty__reset:hover {
  background: var(--glm-accent);
  color: #fff;
}

/* ════════════════════════════════════════════════════════════════════════════
   CONTACT SECTION — dark plum section, white form card
════════════════════════════════════════════════════════════════════════════ */

/* glm-section--plum supplies the plum background + white text cascade.
   position:relative lets the grain overlay (.glm-pgrain) sit correctly. */
.glm-contact { position: relative; overflow: hidden; }

/* ── Two-column layout ───────────────────────────────────────────────────── */
.glm-contact__layout {
  display: grid;
  grid-template-columns: 1fr 1.28fr;
  gap: 52px;
  align-items: center;
}

/* ── Left: info column ───────────────────────────────────────────────────── */
.glm-contact__info {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* Reach block — editorial contact details, no icon boxes or pills */
.glm-contact__reach {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,.12);
}

.glm-contact__reach-label {
  font-family: var(--glm-font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(232,223,240,.45);
}

/* Email as the typographic centerpiece of the left column */
.glm-contact__email-big {
  display: block;
  font-family: var(--glm-font-ui);
  font-size: clamp(17px, 1.9vw, 22px);
  font-weight: 700;
  color: var(--glm-marigold);
  text-decoration: none;
  line-height: 1.15;
  word-break: break-all;
  transition: color var(--glm-dur);
}
.glm-contact__email-big:hover { color: #e8a03a; text-decoration: underline; }

/* Single clean meta line: "Within 24 hours · Auckland, NZ" */
.glm-contact__meta-line {
  font-family: var(--glm-font-ui);
  font-size: 13px;
  color: rgba(232,223,240,.55);
  margin: 0;
  line-height: 1.5;
}

/* Phone (conditional) */
.glm-contact__phone-link {
  display: inline-block;
  font-family: var(--glm-font-ui);
  font-size: 14px;
  font-weight: 500;
  color: rgba(232,223,240,.75);
  text-decoration: none;
  transition: color var(--glm-dur);
}
.glm-contact__phone-link:hover { color: #fff; }

/* Social icon row (conditionally rendered) */
.glm-contact__socials {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.glm-contact__soc {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.07);
  color: rgba(232,223,240,.72);
  text-decoration: none;
  transition: background var(--glm-dur), color var(--glm-dur), border-color var(--glm-dur);
}
.glm-contact__soc:hover {
  background: rgba(255,255,255,.16);
  color: #fff;
  border-color: rgba(255,255,255,.26);
}

/* ── Right: white form card ──────────────────────────────────────────────── */
.glm-contact__card {
  background: #fff;
  border-radius: 20px;
  padding: 36px;
  box-shadow: 0 8px 48px rgba(0,0,0,.28);
}

/* ── Form ─────────────────────────────────────────────────────────────────── */
.glm-contact__form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.glm-contact__row--two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.glm-contact__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.glm-contact__label {
  font-family: var(--glm-font-ui);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--glm-ink-soft);
}
.glm-contact__req { color: var(--glm-crimson); margin-left: 2px; }

/* Input / select / textarea shared base */
.glm-contact__input,
.glm-contact__select,
.glm-contact__textarea {
  font-family: var(--glm-font-ui);
  font-size: 14.5px;
  padding: 10px 14px;
  border-radius: var(--glm-radius-input);
  border: 1.5px solid var(--glm-border-strong);
  background: var(--glm-surface);
  color: var(--glm-ink);
  outline: none;
  transition: border-color var(--glm-dur) ease, box-shadow var(--glm-dur) ease;
  width: 100%;
  box-sizing: border-box;
}
.glm-contact__input::placeholder,
.glm-contact__textarea::placeholder { color: var(--glm-faint); }
.glm-contact__input:focus-visible,
.glm-contact__select:focus-visible,
.glm-contact__textarea:focus-visible {
  border-color: var(--glm-accent);
  box-shadow: 0 0 0 3px rgba(194,65,12,.38);
  background: #fff;
}
.glm-contact__textarea {
  resize: vertical;
  min-height: 120px;
}

/* Error state */
.glm-contact__field--err .glm-contact__input,
.glm-contact__field--err .glm-contact__select,
.glm-contact__field--err .glm-contact__textarea {
  border-color: var(--glm-crimson);
  box-shadow: 0 0 0 3px rgba(192,57,43,.12);
}
.glm-contact__errmsg {
  font-family: var(--glm-font-ui);
  font-size: 12px;
  font-weight: 500;
  color: var(--glm-crimson);
}

/* Select: custom chevron via wrapper pseudo-element */
.glm-contact__select-wrap { position: relative; }
.glm-contact__select-wrap::after {
  content: '';
  pointer-events: none;
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  width: 11px;
  height: 7px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%239b8e7e' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.glm-contact__select { appearance: none; cursor: pointer; padding-right: 36px; }

/* Character count hint */
.glm-contact__hint {
  font-family: var(--glm-font-ui);
  font-size: 12px;
  color: var(--glm-faint);
}

/* Submit — full-width terracotta */
.glm-contact__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px 24px;
  border-radius: var(--glm-radius-btn);
  border: none;
  background: var(--glm-accent);
  color: #fff;
  font-family: var(--glm-font-ui);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--glm-dur) ease, transform var(--glm-dur) ease;
  box-shadow: 0 2px 12px rgba(194,65,12,.35);
  margin-top: 4px;
}
.glm-contact__submit:hover  { background: var(--glm-accent-deep); transform: translateY(-1px); }
.glm-contact__submit:active { transform: translateY(0); }
.glm-contact__submit:disabled { opacity: .6; cursor: not-allowed; transform: none; }

/* Spinner (inside submit button) */
.glm-contact__spinner {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: 50%;
  flex-shrink: 0;
}
.glm-contact__spinner.htmx-request { display: block; opacity: 1; animation: glm-spin .6s linear infinite; }

/* ── Success panel ───────────────────────────────────────────────────────── */
.glm-contact__success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 52px 24px;
  gap: 10px;
}
.glm-contact__sent-ico {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: color-mix(in oklab, var(--glm-accent) 12%, transparent);
  color: var(--glm-accent);
  display: grid;
  place-items: center;
  margin-bottom: 10px;
}
.glm-contact__sent-title {
  font-family: var(--glm-font-display);
  font-size: clamp(24px, 2.5vw, 32px);
  font-weight: 350;
  letter-spacing: -.015em;
  color: var(--glm-ink);
  margin: 0;
}
.glm-contact__sent-sub {
  font-family: var(--glm-font-ui);
  font-size: 14.5px;
  color: var(--glm-ink-soft);
  line-height: 1.65;
  margin: 0;
  max-width: 340px;
}
.glm-contact__sent-brand {
  font-family: var(--glm-font-display);
  font-style: italic;
  font-size: 13.5px;
  color: var(--glm-muted);
  margin: 6px 0 0;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .glm-contact__layout { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 768px) {
  .glm-contact__row--two { grid-template-columns: 1fr; }
  .glm-contact__card     { padding: 24px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   FOOTER — warm dark ink (matches reference design)
════════════════════════════════════════════════════════════════════════════ */
.glm-ftr {
  background: var(--glm-ink);       /* #241c15 — warm dark, not cold night */
  color: #ddd0c4;
}

.glm-ftr__inner {
  max-width: var(--glm-max-w);
  margin: 0 auto;
  padding: 52px var(--glm-section-px) 40px;
  display: grid;
  grid-template-columns: 1.7fr 1fr 1.2fr;
  gap: 40px;   /* reference .footer__grid gap */
}

/* ── Col 1: brand + about + social ─────────────────────────────────────── */
.glm-ftr__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  margin-bottom: 16px;
}
.glm-ftr__brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  flex-shrink: 0;
  background: linear-gradient(145deg, var(--glm-accent) 0%, var(--glm-accent-deep) 55%, var(--glm-mustard-deep) 100%);
  display: grid;
  place-items: center;
  color: #fff;
}
.glm-ftr__brand-mark svg { width: 19px; height: 19px; }
.glm-ftr__brand-txt {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.glm-ftr__brand-name {
  font-family: var(--glm-font-display);
  font-size: 19px;
  font-weight: 500;
  color: #fff;
  display: flex;
  align-items: baseline;
  gap: 5px;
}
.glm-ftr__brand-deva { color: var(--glm-marigold); }
.glm-ftr__brand-sub {
  font-family: var(--glm-font-mono);
  font-size: 9px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(221,208,196,.45);
  font-weight: 500;
  margin-top: 4px;
}

.glm-ftr__about {
  font-family: var(--glm-font-ui);
  font-size: 13.5px;
  color: rgba(221,208,196,.7);
  line-height: 1.7;
  margin: 0 0 20px;
  max-width: 300px;
}

/* Social row */
.glm-ftr__social {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.glm-ftr__social-link {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;   /* rounded square — reference .footer__socials a */
  border: 1px solid rgba(221,208,196,.22);
  color: rgba(221,208,196,.72);
  text-decoration: none;
  transition: border-color .2s, color .2s, background .2s;
}
.glm-ftr__social-link:hover {
  border-color: var(--glm-mustard);
  color: var(--glm-mustard);
  background: rgba(234,179,8,.08);
}

/* ── Col 2 & 3: nav + contact ───────────────────────────────────────────── */
.glm-ftr__heading {
  font-family: var(--glm-font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--glm-marigold);
  margin: 0 0 16px;
}

.glm-ftr__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.glm-ftr__link {
  font-family: var(--glm-font-ui);
  font-size: 14px;
  color: rgba(221,208,196,.78);
  text-decoration: none;
  transition: color .2s;
}
.glm-ftr__link:hover { color: #fff; }

/* Contact column — clean type, no icon rows */
.glm-ftr__cinfo {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.glm-ftr__cinfo-email {
  font-family: var(--glm-font-ui);
  font-size: 14px;
  font-weight: 600;
  color: var(--glm-marigold);
  text-decoration: none;
  word-break: break-all;
  transition: color .2s;
}
.glm-ftr__cinfo-email:hover { color: #e8a03a; text-decoration: underline; }
.glm-ftr__cinfo-meta {
  font-family: var(--glm-font-ui);
  font-size: 13px;
  color: rgba(221,208,196,.48);
  line-height: 1.55;
}
.glm-ftr__cinfo-phone {
  font-family: var(--glm-font-ui);
  font-size: 13.5px;
  color: rgba(221,208,196,.68);
  text-decoration: none;
  transition: color .2s;
}
.glm-ftr__cinfo-phone:hover { color: #fff; }

/* ── Col 3: Powered-by + legal ──────────────────────────────────────────── */
.glm-ftr__col--legal {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
}

.glm-ftr__powered-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.glm-ftr__powered-label {
  font-family: var(--glm-font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--glm-marigold);
}
.glm-ftr__powered-link {
  display: inline-block;
  opacity: .7;
  transition: opacity .2s;
  text-decoration: none;
}
.glm-ftr__powered-link:hover { opacity: 1; }

.glm-ftr__aimpact-combined {
  display: block;
  height: 46px;
  width: auto;
  object-fit: contain;
}

.glm-ftr__legal {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px solid rgba(221,208,196,.12);
  padding-top: 14px;
}
.glm-ftr__copy {
  font-family: var(--glm-font-ui);
  font-size: 11.5px;
  color: rgba(221,208,196,.32);
}
.glm-ftr__legal-links {
  display: flex;
  gap: 14px;
}
.glm-ftr__legal-link {
  font-family: var(--glm-font-ui);
  font-size: 11.5px;
  color: rgba(221,208,196,.32);
  text-decoration: none;
  transition: color .2s;
}
.glm-ftr__legal-link:hover { color: rgba(221,208,196,.72); }

/* ════════════════════════════════════════════════════════════════════════════
   SHARED KEYFRAME
════════════════════════════════════════════════════════════════════════════ */
@keyframes glm-spin {
  to { transform: rotate(360deg); }
}

/* ════════════════════════════════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════════════════════════════════ */

/* Tablet and below */
@media (max-width: 1024px) {
  .glm-hdr__search { width: 200px; }   /* search stays left, slightly narrower */
  .glm-ftr__inner { grid-template-columns: 1fr 1fr; }
  .glm-ftr__col--brand { grid-column: 1 / -1; }
}

/* Mobile */
@media (max-width: 768px) {
  :root { --glm-hero-h: 420px; }

  .glm-hero__content {
    right: var(--glm-section-px);
    bottom: 48px;
  }
  /* Footer: tighten gap at 768px */
  .glm-ftr__inner { gap: 28px 24px; }
  /* .glm-ev-grid columns are handled by the reference breakpoints above
     (1080/900/600/380) — no override here, so the 380 1-column collapse works. */
}

/* Small phone — single column footer */
@media (max-width: 600px) {
  .glm-ftr__inner {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-top: 40px;
    padding-bottom: 32px;
  }
  .glm-ftr__col--brand { grid-column: auto; }
  .glm-ftr__social-link { width: 40px; height: 40px; }
}

/* Small mobile */
@media (max-width: 480px) {
  :root { --glm-hero-h: 340px; }
  .glm-hero__title { font-size: 22px; }
  /* section padding now inherits --glm-sec-pad (30px); no mobile bump needed */
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .glm-hero__slide,
  .glm-hero__bg,
  .glm-ev-card,
  .glm-ev-card__img,
  .glm-ev-card__fav,
  .glm-hero__cta,
  .glm-contact__submit { transition: none !important; }
  .glm-hero__bg { transform: scale(1) !important; }
  .glm-ev-card:hover .glm-ev-card__img { transform: scale(1) !important; }
  .glm-filter-bar__spinner.htmx-request { animation: none !important; }
  /* Hide spinner entirely rather than showing a static broken ring */
  .glm-contact__spinner.htmx-request { display: none !important; }
}


/* ════════════════════════════════════════════════════════════════════════════
   EDITORIAL SECTIONS — Organizations · News · Journal · Gallery
   All selectors carry the glm-* namespace (Phase 6 additions).
════════════════════════════════════════════════════════════════════════════ */

/* ─── Devanagari font helper ─────────────────────────────────────────────── */
.devanagari {
  font-family: var(--glm-font-display);
}

/* ─── Shared section base ────────────────────────────────────────────────── */
.glm-section {
  position: relative;
  overflow: hidden;
}

/* ─── Section variants ────────────────────────────────────────────────────── */
.glm-section--plum {
  background: linear-gradient(160deg, #2A0E06 0%, #1C0A04 100%);
  color: #fff;
}

.glm-section--alt {
  background: var(--glm-mustard-bg);   /* mustard cream tint — organisations section accent fill */
}

/* ─── Grain overlay (plum sections) ─────────────────────────────────────── */
.glm-pgrain {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-size: 200px;
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
}

/* ─── Section-head row variant (title + "See all" link side-by-side) ──────── */
.glm-section-hd--row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.glm-section-hd__main {
  flex: 1 1 auto;
}

/* ─── Kicker (small label with leading rule) ─────────────────────────────── */
.glm-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--glm-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--glm-accent);
  margin-bottom: 11px;
}

.glm-section--plum .glm-kicker {
  color: #f0c56a;
}

.glm-kicker__line {
  display: block;
  width: 22px;
  height: 1px;
  background: currentColor;
  opacity: .5;
  flex-shrink: 0;
}

/* Devanagari label inside kicker — display font, no uppercase */
.glm-kicker__deva {
  font-family: var(--glm-font-display);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--glm-ink-soft);
}

.glm-section--plum .glm-kicker__deva {
  color: #c7a8e8;
}

/* ─── "See all →" / "Full calendar →" link ───────────────────────────────── */
.glm-linkarrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 600 13.5px / 1 var(--glm-font-ui);
  color: var(--glm-accent);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}
.glm-linkarrow svg { width: 15px; height: 15px; transition: transform .25s var(--glm-ease); }
.glm-linkarrow:hover svg { transform: translateX(4px); }

.glm-section--plum .glm-linkarrow       { color: #f0c56a; }
.glm-section--plum .glm-linkarrow:hover { border-bottom-color: #f0c56a; }

.glm-section--plum .glm-section-title { color: #fff; }
.glm-section--plum .glm-section-sub   { color: rgba(232,223,240,.7); }


/* ════════════════════════════════════════════════════════════════════════════
   ORGANISATIONS
════════════════════════════════════════════════════════════════════════════ */

.glm-org-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);   /* reference .org-grid = 4-up */
  gap: 20px;
  margin-top: 40px;
}

/* Card — warm bordered cream card (reference .org-card) */
.glm-org-card {
  background: var(--glm-card);
  border: 1px solid var(--glm-line);
  border-radius: var(--glm-radius-lg);          /* 22px */
  padding: 20px;
  box-shadow: var(--glm-sh-sm);                  /* warm-tinted, was cool rgba */
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform var(--glm-dur) var(--glm-ease),
              box-shadow var(--glm-dur), border-color var(--glm-dur);
}

.glm-org-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--glm-sh-md);
  border-color: var(--glm-line-strong);
}

.glm-org-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Monogram avatar — background driven by --av-bg. Keeps Noto Sans Devanagari
   (renders the देवनागरी monogram far better than Newsreader would). */
.glm-mono-av {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: var(--av-bg, #888);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 600 19px / 1 'Noto Sans Devanagari', system-ui, sans-serif;
  color: #fff;
  flex-shrink: 0;
  letter-spacing: 0;
  text-shadow: 0 1px 3px rgba(0,0,0,.25);
}
/* Logo variant — organiser logo fills the avatar tile (overrides the
   monogram gradient bg). object-fit: cover keeps any logo shape tidy. */
.glm-mono-av--logo {
  background: var(--glm-card-2, #fff);
  border: 1px solid var(--glm-line, rgba(0,0,0,.08));
  overflow: hidden;
  padding: 0;
}
.glm-mono-av__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.glm-org-card__info {
  flex: 1;
  min-width: 0;
}

/* Name — Newsreader serif (reference .org-card__name) */
.glm-org-card__name {
  font-family: var(--glm-font-display);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.1;
  color: var(--glm-ink);
  margin: 0 0 3px;
  display: flex;
  align-items: center;
  gap: 6px;
}


.glm-org-card__type {
  font: 400 11.5px / 1.35 var(--glm-font-ui);
  color: var(--glm-muted);
  margin: 0;
}

.glm-org-card__bio {
  font: 400 13.5px / 1.5 var(--glm-font-ui);
  color: var(--glm-ink-soft);
  margin: 0;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Footer — Follow (flex:1) + View, no divider (reference .org-card__foot) */
.glm-org-card__foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
}

/* Follow — dark pill by default, green tint once following (reference btn-dark
   → .following). Stays a real hx-post action (AR-24). */
.evx-page .glm-org-card__follow {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--glm-radius-pill);
  border: 1px solid var(--glm-ink);
  background: var(--glm-ink);
  color: var(--glm-bg);
  font: 600 13px / 1 var(--glm-font-ui);
  cursor: pointer;
  transition: background var(--glm-dur), color var(--glm-dur), border-color var(--glm-dur);
  white-space: nowrap;
}

.evx-page .glm-org-card__follow:hover {
  background: var(--glm-plum);
  border-color: var(--glm-plum);
}

.evx-page .glm-org-card__follow--on {
  background: color-mix(in oklab, var(--glm-green) 14%, transparent);
  border-color: color-mix(in oklab, var(--glm-green) 22%, transparent);
  color: var(--glm-green-deep);
}

.evx-page .glm-org-card__follow--on:hover {
  background: color-mix(in oklab, var(--glm-green) 20%, transparent);
}

/* View — ghost pill (reference .btn-ghost). Placeholder: no organisation
   detail page exists yet, so this is a non-navigating button for now. */
.evx-page .glm-org-card__view {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: var(--glm-radius-pill);
  border: 1px solid var(--glm-line-strong);
  background: var(--glm-card);
  color: var(--glm-ink);
  font: 600 13px / 1 var(--glm-font-ui);
  cursor: pointer;
  transition: background var(--glm-dur), border-color var(--glm-dur);
  white-space: nowrap;
}

.evx-page .glm-org-card__view:hover {
  background: var(--glm-card-2);
  border-color: var(--glm-accent);
}

/* Organisations responsive — reference .org-grid: 4-up → 2-up ≤1080 → stays
   2-up ≤600 with tighter spacing + a stacked, full-width button footer. */
@media (max-width: 1080px) { .glm-org-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) {
  .glm-org-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .glm-org-card { gap: 10px; padding: 16px; }
  .glm-org-card__foot { flex-direction: column; align-items: stretch; gap: 7px; }
  .glm-org-card__head .glm-mono-av { width: 40px; height: 40px; border-radius: 11px; font-size: 17px; }
  .glm-org-card__name { font-size: 16px; }
}


/* ════════════════════════════════════════════════════════════════════════════
   NEWS & NOTICES
════════════════════════════════════════════════════════════════════════════ */

.glm-news-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 40px;
  position: relative;
  z-index: 1;
}

/* Date badge */
.glm-news-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  background: var(--glm-crimson);
  border-radius: 9px;
  flex-shrink: 0;
}

.glm-news-date__d {
  font: 700 17px / 1 var(--glm-font-ui);
  color: #fff;
}

.glm-news-date__m {
  font: 600 9px / 1 var(--glm-font-ui);
  color: rgba(255,255,255,.8);
  letter-spacing: .07em;
  text-transform: uppercase;
}

/* Tag pill */
.glm-news-tag {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 4px;
  background: rgba(255,255,255,.14);
  font: 600 10px / 1.4 var(--glm-font-ui);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #fff;
}

.glm-news-tag--sm {
  padding: 2px 7px;
  font-size: 9px;
}

/* Featured card */
.glm-news-feature {
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255,255,255,.07);
  border: 1px solid var(--glm-plum-border);
  display: flex;
  flex-direction: column;
}

.glm-news-feature__img {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.glm-news-feature__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.glm-news-feature__body {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.glm-news-feature__top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.glm-news-feature__title {
  font: 600 19px / 1.35 var(--glm-font-display);
  color: #fff;
  margin: 0;
}

.glm-news-feature__blurb {
  font: 400 13px / 1.65 var(--glm-font-ui);
  color: rgba(232,223,240,.72);
  margin: 0;
}

.glm-news-feature__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.1);
  font: 400 12px / 1 var(--glm-font-ui);
  color: rgba(232,223,240,.5);
}

.glm-news-feature__org {
  font-weight: 600;
  color: rgba(232,223,240,.8);
}

/* Secondary list */
.glm-news-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.glm-news-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
}

.glm-news-item__body { flex: 1; min-width: 0; }

.glm-news-item__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.glm-news-item__org {
  font: 500 11px / 1 var(--glm-font-ui);
  color: rgba(232,223,240,.58);
}

.glm-news-item__time {
  font: 400 11px / 1 var(--glm-font-ui);
  color: rgba(232,223,240,.38);
  margin-left: auto;
}

.glm-news-item__title {
  font: 500 14px / 1.45 var(--glm-font-ui);
  color: #fff;
  margin: 0;
}

.glm-news-empty {
  font: 400 13px / 1 var(--glm-font-ui);
  color: rgba(232,223,240,.5);
  padding: 20px 0;
}


/* ════════════════════════════════════════════════════════════════════════════
   JOURNAL
════════════════════════════════════════════════════════════════════════════ */

.glm-journal-grid {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: 32px;
  margin-top: 40px;
}

/* Featured post */
.glm-blog-feature {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 14px rgba(0,0,0,.08);
  background: var(--glm-card-bg);
  display: flex;
  flex-direction: column;
}

.glm-blog-feature__img {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.glm-blog-feature__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--glm-dur-slow);
}

.glm-blog-feature:hover .glm-blog-feature__img img {
  transform: scale(1.04);
}

.glm-blog-feature__body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.glm-blog-feature__cat {
  font: 600 11px / 1 var(--glm-font-ui);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--glm-accent);
}

.glm-blog-feature__title {
  font: 600 20px / 1.35 var(--glm-font-display);
  color: var(--glm-ink);
  margin: 0;
}

.glm-blog-feature__excerpt {
  font: 400 13px / 1.65 var(--glm-font-ui);
  color: var(--glm-ink-soft);
  margin: 0;
}

.glm-blog-feature__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  font: 400 12px / 1 var(--glm-font-ui);
  color: var(--glm-faint);
  flex-wrap: wrap;
}

.glm-blog-feature__org {
  font-weight: 600;
  color: var(--glm-muted);
}

/* Secondary rows */
.glm-blog-sub {
  display: flex;
  flex-direction: column;
}

.glm-blog-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 18px 0;
  border-bottom: 1px solid var(--glm-border);
  text-decoration: none;
  color: inherit;
  transition: opacity var(--glm-dur);
}

.glm-blog-row:first-child { padding-top: 0; }
.glm-blog-row:last-child  { border-bottom: none; padding-bottom: 0; }
.glm-blog-row:hover       { opacity: .78; }

.glm-blog-row__img {
  width: 72px;
  height: 56px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}

.glm-blog-row__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.glm-blog-row__body   { flex: 1; min-width: 0; }

.glm-blog-row__cat {
  font: 600 10px / 1 var(--glm-font-ui);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--glm-accent);
  margin: 0 0 5px;
}

.glm-blog-row__title {
  font: 500 14px / 1.4 var(--glm-font-ui);
  color: var(--glm-ink);
  margin: 0 0 6px;
}

.glm-blog-row__meta {
  font: 400 11px / 1 var(--glm-font-ui);
  color: var(--glm-faint);
  margin: 0;
}


/* ════════════════════════════════════════════════════════════════════════════
   GALLERY
════════════════════════════════════════════════════════════════════════════ */

.glm-gal-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 185px;
  gap: 10px;
  margin-top: 40px;
}

.glm-gal-tile {
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  background: var(--glm-border);
  cursor: pointer;
}

.glm-gal-tile--wide { grid-column: span 2; }
.glm-gal-tile--tall { grid-row:    span 2; }

.glm-gal-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--glm-dur-slow), filter var(--glm-dur);
  display: block;
}

.glm-gal-tile:hover img {
  transform: scale(1.06);
  filter: brightness(.82);
}

.glm-gal-tile__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.65) 0%, transparent 55%);
  opacity: 0;
  transition: opacity var(--glm-dur);
  display: flex;
  align-items: flex-end;
  padding: 14px;
  margin: 0;
}

.glm-gal-tile:hover .glm-gal-tile__overlay { opacity: 1; }

.glm-gal-tile__title {
  font: 500 13px / 1.3 var(--glm-font-ui);
  color: #fff;
  margin: 0;
}

.glm-gal-tile__cat {
  font: 600 9px / 1 var(--glm-font-ui);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: rgba(255,255,255,.65);
  display: block;
  margin-bottom: 4px;
}


/* ─── Editorial responsive breakpoints ───────────────────────────────────── */
@media (max-width: 1024px) {
  .glm-journal-grid { grid-template-columns: 1fr; }
  .glm-blog-sub     { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
  .glm-blog-row     { padding: 0 0 18px; }
}

@media (max-width: 900px) {
  .glm-news-grid       { grid-template-columns: 1fr; }
  .glm-gal-grid        { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
  .glm-gal-tile--tall  { grid-row: auto; }
}

@media (max-width: 700px) {
  .glm-section-hd--row  { flex-direction: column; align-items: flex-start; }
  /* .glm-org-grid columns handled by the dedicated org breakpoints above
     (4→2→2) so it stays 2-up on phones per the reference, not 1-up. */
  .glm-journal-grid     { gap: 24px; }
  .glm-blog-sub         { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .glm-gal-grid         { grid-template-columns: 1fr 1fr; grid-auto-rows: 120px; }
  .glm-gal-tile--wide   { grid-column: span 2; }
}

@media (prefers-reduced-motion: reduce) {
  .glm-org-card,
  .glm-blog-feature__img img,
  .glm-gal-tile img,
  .glm-linkarrow        { transition: none !important; }
  .glm-gal-tile img     { transform: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   §31 — Phase 29 Public Premium UI: Facts Bar + Category Blocks
   All tokens: --pubx-* only (AR-42). No inline styles (AR-09).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Facts bar — single compact unified card ──────────────────────────── */
.evx-facts-bar {
  display: flex;
  background: var(--pubx-card);
  border: 1px solid var(--pubx-line);
  border-radius: 14px;
  box-shadow: var(--pubx-shadow);
  max-width: 1152px;          /* matches ev-pub__shell inner width (1200px - 2×24px) */
  margin: 16px auto 20px;     /* 16px gap below hero, not flush */
  width: calc(100% - 48px);
  overflow: hidden;
}

.evx-fact {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-right: 1px solid var(--pubx-line);
}
.evx-fact:last-child { border-right: none; }

/* Tappable WHERE pill — platform-aware map link */
a.evx-fact {
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  position: relative;
  transition: background .15s;
}
a.evx-fact:hover  { background: rgba(194,65,12,.04); }
a.evx-fact:active { background: rgba(194,65,12,.09); }
a.evx-fact .evx-fact__v { color: var(--pubx-ink); }
.evx-fact__map-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--pubx-accent);
  transition: gap .15s;
}
.evx-fact__map-label svg { width: 11px; height: 11px; flex-shrink: 0; }
a.evx-fact:hover .evx-fact__map-label { gap: 6px; }

.evx-fact__ico {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.evx-fact__ico svg { width: 16px; height: 16px; }

.evx-fact__ico--default {
  background: var(--pubx-mustard-tint);
  color: var(--pubx-mustard-ink);
}
.evx-fact__ico--warn {
  background: rgba(194,65,12,0.14);
  color: var(--pubx-accent);
}
.evx-fact__ico--green {
  background: rgba(45,80,67,0.12);
  color: var(--pubx-secondary);
}

.evx-fact__k {
  font-family: var(--pubx-mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--pubx-muted);
  margin-bottom: 3px;
}
.evx-fact__v {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--pubx-ink);
  line-height: 1.25;
  overflow-wrap: break-word;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.evx-fact__sub {
  font-size: 11.5px;
  color: var(--pubx-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* facts bar mobile — 2-col grid, WHERE spans full width */
@media (max-width: 620px) {
  .evx-facts-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: calc(100% - 32px);
    margin: 12px auto 16px;
  }
  .evx-fact {
    border-right: none;
    border-bottom: 1px solid var(--pubx-line);
    padding: 14px 16px;
    gap: 12px;
  }
  .evx-fact:last-child { border-bottom: none; }
  /* DATE + TIME stay side-by-side; WHERE (3rd fact) spans the full row */
  .evx-fact:nth-child(3) {
    grid-column: 1 / -1;
    border-top: 1px solid var(--pubx-line);
    border-bottom: none;
  }
  .evx-fact__ico { width: 38px; height: 38px; }
  .evx-fact__ico svg { width: 17px; height: 17px; }
  .evx-fact__k { font-size: 10.5px; margin-bottom: 4px; }
  .evx-fact__v { font-size: 15px; -webkit-line-clamp: 3; line-clamp: 3; }
  .evx-fact__sub { font-size: 13px; white-space: normal; }
  .evx-fact__map-label { font-size: 12px; }
}
@media (max-width: 400px) {
  .evx-facts-bar { width: calc(100% - 24px); }
}

/* ── Category section header ──────────────────────────────────────────── */
.evx-cat-sh {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.evx-cat-sh__eye {
  font-family: var(--pubx-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--pubx-accent);
  border-left: 2px solid var(--pubx-accent);
  padding-left: 8px;
}
.evx-cat-sh__pill {
  font-size: 11px;
  font-weight: 600;
  background: rgba(194,65,12,0.10);
  color: var(--pubx-accent);
  border-radius: 999px;
  padding: 1px 8px;
}

/* ── Profile card ─────────────────────────────────────────────────────── */
.evx-cat-profile {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.evx-cat-profile__av {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(194,65,12,0.12);
  color: var(--pubx-accent);
  font-size: 17px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.evx-cat-profile__name {
  font-size: 15px;
  font-weight: 600;
  color: var(--pubx-ink);
  margin-bottom: 2px;
}
.evx-cat-profile__role {
  font-family: var(--pubx-mono);
  font-size: 11px;
  color: var(--pubx-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.evx-cat-profile__bio {
  font-size: 13px;
  color: var(--pubx-muted);
  margin-top: 4px;
  line-height: 1.5;
}

/* ── People grid ──────────────────────────────────────────────────────── */
.evx-cat-people {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}
.evx-cat-person {
  background: var(--pubx-bg);
  border: 1px solid var(--pubx-line);
  border-radius: 12px;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}
.evx-cat-person__av {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(194,65,12,0.10);
  color: var(--pubx-accent);
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.evx-cat-person__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--pubx-ink);
  line-height: 1.3;
}
.evx-cat-person__role {
  font-size: 11px;
  color: var(--pubx-muted);
  font-family: var(--pubx-mono);
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ── Chips ────────────────────────────────────────────────────────────── */
.evx-cat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.evx-cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 500;
  background: var(--pubx-bg);
  color: var(--pubx-ink-soft);
  border: 1px solid var(--pubx-line);
  border-radius: 999px;
  padding: 5px 13px;
}
.evx-cat-chip svg { width: 12px; height: 12px; flex-shrink: 0; }
.evx-cat-chip--green {
  background: rgba(45,80,67,0.08);
  color: var(--pubx-secondary);
  border-color: rgba(45,80,67,0.20);
}
.evx-cat-chip--warn {
  background: rgba(194,65,12,0.08);
  color: var(--pubx-accent);
  border-color: rgba(194,65,12,0.20);
}

/* ── Support act pills ────────────────────────────────────────────────── */
.evx-cat-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.evx-cat-act {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 500;
  background: var(--pubx-card);
  color: var(--pubx-ink);
  border: 1px solid var(--pubx-line);
  border-radius: 999px;
  padding: 6px 14px 6px 8px;
}
.evx-cat-act::before {
  content: '';
  display: block;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(194,65,12,0.12);
  flex-shrink: 0;
}

/* ── Checklist ────────────────────────────────────────────────────────── */
.evx-cat-checks { display: flex; flex-direction: column; gap: 8px; }
.evx-cat-check {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--pubx-ink-soft);
}
.evx-cat-check__ico {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--pubx-secondary);
}
.evx-cat-check--no .evx-cat-check__ico { color: var(--pubx-accent); }

/* ── Timeline ─────────────────────────────────────────────────────────── */
.evx-cat-timeline { display: flex; flex-direction: column; gap: 0; }
.evx-cat-tl-row {
  display: flex;
  gap: 14px;
  padding-bottom: 16px;
  position: relative;
}
.evx-cat-tl-row:last-child { padding-bottom: 0; }
.evx-cat-tl-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--pubx-accent);
  flex-shrink: 0;
  margin-top: 5px;
  position: relative;
  z-index: 1;
}
.evx-cat-tl-row:not(:last-child) .evx-cat-tl-dot::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 10px;
  transform: translateX(-50%);
  width: 1px;
  height: calc(100% + 16px - 10px);
  background: var(--pubx-line);
}
.evx-cat-tl-body { flex: 1; min-width: 0; }
.evx-cat-tl-time {
  font-family: var(--pubx-mono);
  font-size: 11px;
  color: var(--pubx-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 2px;
}
.evx-cat-tl-time--accent { color: var(--pubx-accent); }
.evx-cat-tl-title { font-size: 14px; font-weight: 600; color: var(--pubx-ink); }
.evx-cat-tl-desc { font-size: 13px; color: var(--pubx-muted); margin-top: 2px; line-height: 1.4; }

/* ── Level meter ──────────────────────────────────────────────────────── */
.evx-cat-level {
  display: flex;
  align-items: center;
  gap: 12px;
}
.evx-cat-level__bars {
  display: flex;
  gap: 4px;
  align-items: flex-end;
}
.evx-cat-level__bar {
  width: 10px;
  border-radius: 3px;
  background: var(--pubx-line);
}
.evx-cat-level__bar:nth-child(1) { height: 16px; }
.evx-cat-level__bar:nth-child(2) { height: 22px; }
.evx-cat-level__bar:nth-child(3) { height: 28px; }
.evx-cat-level__bar--on { background: var(--pubx-accent); }
.evx-cat-level__label {
  font-size: 14px;
  font-weight: 600;
  color: var(--pubx-ink);
}

/* ── Warning banner ───────────────────────────────────────────────────── */
.evx-cat-warn {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: rgba(194,65,12,0.07);
  border: 1px solid rgba(194,65,12,0.18);
  border-radius: 12px;
  padding: 14px 16px;
}
.evx-cat-warn__ico {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 8px;
  background: rgba(194,65,12,0.12);
  color: var(--pubx-accent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.evx-cat-warn__ico svg { width: 16px; height: 16px; }
.evx-cat-warn__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--pubx-accent);
  margin-bottom: 3px;
}
.evx-cat-warn__body { font-size: 13px; color: var(--pubx-ink-soft); line-height: 1.4; }

/* ── Q&A callout ──────────────────────────────────────────────────────── */
.evx-cat-qa {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: rgba(194,65,12,0.05);
  border: 1px solid rgba(194,65,12,0.15);
  border-radius: 12px;
  padding: 14px 16px;
}
.evx-cat-qa__ico {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 8px;
  background: rgba(194,65,12,0.10);
  color: var(--pubx-accent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.evx-cat-qa__ico svg { width: 16px; height: 16px; }
.evx-cat-qa__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--pubx-accent);
  margin-bottom: 3px;
}
.evx-cat-qa__body { font-size: 13px; color: var(--pubx-ink-soft); line-height: 1.4; }

/* ── Food menu list ───────────────────────────────────────────────────── */
.evx-cat-menu-list { display: flex; flex-direction: column; }
.evx-cat-menu-row {
  padding: 12px 0;
  border-bottom: 1px solid var(--pubx-line);
}
.evx-cat-menu-row:last-child { border-bottom: none; }
.evx-cat-menu-row__course {
  font-family: var(--pubx-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--pubx-muted);
  margin-bottom: 3px;
}
.evx-cat-menu-row__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--pubx-ink);
}
.evx-cat-menu-row__desc {
  font-size: 12.5px;
  color: var(--pubx-muted);
  margin-top: 2px;
  line-height: 1.4;
}

/* ── Info block ───────────────────────────────────────────────────────── */
.evx-cat-info {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--pubx-bg);
  border: 1px solid var(--pubx-line);
  border-radius: 12px;
  padding: 14px 16px;
}
.evx-cat-info__ico {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 8px;
  background: rgba(45,80,67,0.10);
  color: var(--pubx-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.evx-cat-info__ico svg { width: 16px; height: 16px; }
.evx-cat-info__title {
  font-size: 12px;
  font-weight: 600;
  font-family: var(--pubx-mono);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--pubx-secondary);
  margin-bottom: 4px;
}
.evx-cat-info__body { font-size: 13.5px; color: var(--pubx-ink-soft); line-height: 1.45; }

/* ── Lineup grid ──────────────────────────────────────────────────────── */
.evx-cat-lineup-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}
.evx-cat-lineup-card {
  background: var(--pubx-bg);
  border: 1px solid var(--pubx-line);
  border-radius: 12px;
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  position: relative;
}
.evx-cat-lineup-card--head {
  background: rgba(194,65,12,0.07);
  border-color: rgba(194,65,12,0.22);
}
.evx-cat-lineup-card__av {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--pubx-line);
  color: var(--pubx-muted);
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.evx-cat-lineup-card--head .evx-cat-lineup-card__av {
  background: rgba(194,65,12,0.15);
  color: var(--pubx-accent);
}
.evx-cat-lineup-card__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--pubx-ink);
  line-height: 1.3;
}
.evx-cat-lineup-card__badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  background: var(--pubx-accent);
  color: var(--pubx-accent-ink);
  border-radius: 999px;
  padding: 2px 8px;
}

/* ── Volunteer CTA ────────────────────────────────────────────────────── */
.evx-cat-vol {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: rgba(45,80,67,0.07);
  border: 1px solid rgba(45,80,67,0.18);
  border-radius: 12px;
  padding: 16px 18px;
  flex-wrap: wrap;
}
.evx-cat-vol__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--pubx-secondary);
  margin-bottom: 2px;
}
.evx-cat-vol__sub { font-size: 12.5px; color: var(--pubx-muted); }
.evx-cat-vol__btn {
  font-size: 13px;
  font-weight: 600;
  background: var(--pubx-secondary);
  color: #fff;
  border-radius: 999px;
  padding: 8px 20px;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity .15s;
}
.evx-cat-vol__btn:hover { opacity: .85; }

/* ── Film detail grid ─────────────────────────────────────────────────── */
.evx-cat-filmgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 10px;
}
.evx-cat-fg-cell {
  background: var(--pubx-bg);
  border: 1px solid var(--pubx-line);
  border-radius: 10px;
  padding: 12px 10px;
  text-align: center;
}
.evx-cat-fg-cell__k {
  font-family: var(--pubx-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--pubx-muted);
  margin-bottom: 4px;
}
.evx-cat-fg-cell__v {
  font-size: 14px;
  font-weight: 700;
  color: var(--pubx-ink);
}

/* ── Theatre run-of-show grid ─────────────────────────────────────────── */
.evx-cat-runshow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px;
}
.evx-cat-rs-cell {
  background: var(--pubx-bg);
  border: 1px solid var(--pubx-line);
  border-radius: 10px;
  padding: 12px 10px;
  text-align: center;
}
.evx-cat-rs-cell__k {
  font-family: var(--pubx-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--pubx-muted);
  margin-bottom: 4px;
}
.evx-cat-rs-cell__v {
  font-size: 14px;
  font-weight: 700;
  color: var(--pubx-ink);
}

/* ── Link button ──────────────────────────────────────────────────────── */
.evx-cat-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--pubx-accent);
  border: 1.5px solid var(--pubx-accent);
  border-radius: 999px;
  padding: 8px 18px;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.evx-cat-link:hover {
  background: var(--pubx-accent);
  color: var(--pubx-accent-ink);
}
.evx-cat-link svg { width: 14px; height: 14px; flex-shrink: 0; }

/* ── §31 addendum — Headliner featured card (musical / comedy) ─────────────
   .evx-cat-hl-group   flex column container with gap between headliner card(s)
                       and the support acts chips that follow in the same block.
   .evx-cat-hl-card    featured artist card — gradient border tint, large avatar.
   ──────────────────────────────────────────────────────────────────────────── */
.evx-cat-hl-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.evx-cat-hl-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  background: linear-gradient(135deg, rgba(194,65,12,.08) 0%, rgba(194,65,12,.02) 100%);
  border: 1px solid rgba(194,65,12,.20);
  border-radius: 16px;
}
.evx-cat-hl-card__av {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--pubx-accent), var(--pubx-accent-deep));
  color: var(--pubx-accent-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--pubx-display);
  font-size: 1.25rem;
  font-weight: 700;
  flex-shrink: 0;
  letter-spacing: -.01em;
}
.evx-cat-hl-card__info {
  flex: 1;
  min-width: 0;
}
.evx-cat-hl-card__badge {
  display: inline-block;
  font-family: var(--pubx-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pubx-accent);
  background: rgba(194,65,12,.10);
  border: 1px solid rgba(194,65,12,.20);
  padding: 2px 8px;
  border-radius: 999px;
  margin-bottom: 5px;
}
.evx-cat-hl-card__name {
  font-family: var(--pubx-display);
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--pubx-ink);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.evx-cat-hl-card__genre {
  font-size: 12.5px;
  color: var(--pubx-muted);
  margin-top: 3px;
}