/* Booking-page-only visual system (modules/booking/views/book.ejs).
   Deliberately NOT Tailwind utility classes, unlike every other view in
   this app — the layout and component structure were adapted from
   UI-UX-Audits/booking-page-platform-branded.html, a from-scratch design
   system built to fix the problems documented in
   UI-UX-Audits/booking-page-Audit.md. See book.ejs's own top comment for
   the full list of adaptations made from that prototype to the real app
   (real branding data, real attendee-collection form, dark mode, no
   simulated-phone chrome, etc).

   The PALETTE and TYPE are no longer that prototype's. Both were moved
   onto The CEO's Table's own identity — the gold/charcoal tokens and the
   Cormorant Garamond / Jost pairing the landing page uses — so that a
   buyer arriving here from "Reserve your seat" stays inside one brand
   instead of crossing into the platform's indigo chrome. Only the two
   token blocks below, the handful of colours that were hardcoded past
   them, the two font stacks and the radius scale changed; every
   component rule still reads through the same variable names it always
   did.

   There is no light variant and no theme toggle any more — see the
   :root block below for why. book.ejs also strips the `dark` class the
   shared head partial sets, so none of public/theme.css's
   `html.dark ...` rules can reach this page; one of them forces a slate
   `background-image` onto `body` with !important, which used to show
   through behind this page's own shell. */

:root{
  /* The CEO's Table brand tokens. Anchors: gold-500 #CF982A (the logo's
     own gradient) and ink-800 #23272E (the panelled wall behind every
     host portrait). Every value was contrast-checked against the surface
     it actually sits on; the notes record the measured ratio.

     Single-theme by intent. This page used to ship a light palette and a
     dark one behind a toggle, inherited from the generic platform this
     codebase started as. The CEO's Table has one look, and a buyer
     reaches this page by clicking "Reserve your seat" on a charcoal
     landing page — crossing into a different world mid-checkout was the
     only thing the toggle bought. The brand gold also only works as a
     real accent here: 7.08:1 on charcoal against 2.57:1 on white.

     The variable NAMES are the ones this page already used, so the ~100
     usages throughout this file keep working untouched. */
  color-scheme: dark;

  --ink:#0B0D10;              /* deepest ground — toast, hero base */
  --page-bg:#121417;          /* ink-900 */
  --surface:#23272E;          /* ink-800 — the wall */
  --border:#2C313A;           /* hairline dividers, decorative */
  --border-strong:#737B88;    /* control borders, 3.51:1 on surface */

  /* Fields are a recessed well rather than a box drawn on the card: a
     translucent black fill, so the field picks up whatever sits behind
     it (it stays warm inside a gold-tinted ticket card instead of
     punching a cool charcoal rectangle into it), plus a 1px hairline.
     --field-border cannot go dimmer than this: at 1px over the well it
     measures 3.91:1 on a plain card and 3.36:1 inside a selected one,
     and WCAG 1.4.11 wants 3:1 for the boundary that identifies an input.
     The weight and the fill are what make it read quietly, not the
     colour. */
  --field-bg:rgba(0,0,0,.22);
  --field-border:#737B88;
  --field-ring:rgba(207,152,42,.22);
  --text-primary:#E1E4EA;     /* a tint of the ground, not white — 11.77:1 */
  --text-secondary:#AFB5C0;   /*  7.28:1 */
  --text-tertiary:#949BA8;    /*  5.36:1 */

  /* Gold fills carry ink text, never white: white on gold-500 measures
     2.57:1. --accent-1 is the gold used AS text and icons, which reads
     7.08:1 on the dark surface; --accent-grad is the fill. */
  --accent-1:#DAAB4E;         /* gold-400 */
  --accent-2:#CF982A;         /* gold-500 */
  --accent-glow:rgba(207,152,42,.35);
  --accent-grad:linear-gradient(135deg,#DAAB4E 0%,#CF982A 100%);
  --accent-tint:rgba(207,152,42,.13);
  --gold:#DAAB4E;
  --gold-soft:rgba(207,152,42,.10);
  --gold-border:rgba(218,171,78,.38);
  --error:#EC8B8E;            /* 6.17:1 */
  --error-tint:rgba(167,47,51,.18);
  --error-glow:rgba(236,139,142,.16);

  /* Serious/Elegant: border-radius adds playfulness and is supposed to
     match the roundness of the typeface. Cormorant's serifs are sharp,
     so rectangles stop at 2px. Genuine circles (the host avatar, the
     stepper dots, the quantity controls) keep their 50%. */
  --radius-sm:2px;
  --radius-md:2px;
  --radius-lg:2px;
  /* Shadows in small doses, and light — separation here comes from
     whitespace and a hairline rule instead. */
  --shadow-card:0 1px 2px rgba(0,0,0,.35), 0 1px 1px rgba(0,0,0,.25);
  --shadow-float:0 -8px 24px rgba(0,0,0,.45);
}

body.book-page{
  margin:0;
  background:var(--page-bg);
  color:var(--text-primary);
}
.page-shell *, .page-shell *::before, .page-shell *::after{ box-sizing:border-box; }
.page-shell button{ font-family:inherit; cursor:pointer; }
.page-shell input{ font-family:inherit; }

.page-shell{
  min-height:100vh;
  max-width:560px;
  margin:0 auto;
  background:var(--page-bg);
  color:var(--text-primary);
  font-family:'Jost','Avenir Next','Segoe UI',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* ---------- App bar ---------- */
.app-bar{
  position:sticky;
  top:0;
  z-index:30;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:calc(env(safe-area-inset-top,0px) + 14px) 14px 12px;
  background:transparent;
  transition:background-color .25s ease, box-shadow .25s ease;
}
.app-bar.is-scrolled{
  background:rgba(18,20,23,.93);
  backdrop-filter:blur(10px);
  box-shadow:0 1px 0 var(--border);
}
.app-bar__icon-btn{
  width:38px; height:38px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  border:none;
  background:rgba(18,20,23,.45);
  color:#fff;
  transition:background-color .25s ease, color .25s ease;
  flex-shrink:0;
}
.app-bar.is-scrolled .app-bar__icon-btn{
  background:transparent;
  color:var(--text-primary);
}
.app-bar__actions{ display:flex; gap:8px; }
.app-bar__title{
  font-family:'Jost','Avenir Next','Segoe UI',system-ui,sans-serif;
  font-size:15px;
  font-weight:600;
  color:var(--text-primary);
  opacity:0;
  transition:opacity .25s ease;
  max-width:190px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.app-bar.is-scrolled .app-bar__title{ opacity:1; }

/* ---------- Hero ---------- */
.hero{
  position:relative;
  margin-top:-56px;
  padding-top:56px;
  height:230px;
  background:
    radial-gradient(120% 90% at 15% 0%, #2B2A23 0%, transparent 55%),
    radial-gradient(120% 90% at 100% 100%, #23272E 0%, transparent 55%),
    var(--ink);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border-radius:0;
}
.hero__bg-image{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index:0;
}
.hero__scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(18,20,23,.15) 0%, rgba(18,20,23,.70) 100%);
  z-index:1;
}
.hero__mark{
  position:relative; z-index:2;
  text-align:center;
  color:#fff;
  transition:opacity .2s ease;
}
.hero__ticket-icon{ display:block; }

/* ---------- Layout helpers ---------- */
main{ padding:0 18px 0; }
.section-heading{
  font-family:'Jost','Avenir Next','Segoe UI',system-ui,sans-serif;
  font-size:12px;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--text-secondary);
  margin:0 0 12px;
}

/* ---------- State messages (loading / not found / sold out / ended) ---------- */
.state-message{
  background:var(--surface);
  border:1.5px solid var(--border);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-card);
  padding:32px 20px;
  text-align:center;
  color:var(--text-secondary);
  font-size:14px;
  margin:0 0 18px;
}
.state-message--standalone{ margin:40px 18px; }

.error-banner{
  margin:0 0 16px;
  padding:14px 16px;
  border-radius:var(--radius-sm);
  background:var(--error-tint);
  border:1px solid var(--error);
  color:var(--error);
  font-size:13px;
}

/* ---------- Event card ---------- */
.event-card{ padding:18px 0 6px; }
.event-card__host{
  display:flex; align-items:center; gap:10px; margin-bottom:14px;
}
.avatar{
  width:34px; height:34px; border-radius:50%;
  background:var(--accent-grad);
  display:flex; align-items:center; justify-content:center;
  color:var(--ink); font-family:'Jost',system-ui,sans-serif; font-weight:600; font-size:13px;
  flex-shrink:0;
  overflow:hidden;
}
.avatar img{ width:100%; height:100%; object-fit:cover; }
.event-card__host-text{ font-size:13px; color:var(--text-secondary); }
.event-card__host-text strong{ color:var(--text-primary); font-weight:600; }

.event-title{
  font-family:'Cormorant Garamond',Palatino,Georgia,serif;
  font-weight:500;
  font-size:32px;
  line-height:1.14;
  letter-spacing:-.01em;
  margin:0 0 14px;
}

.event-meta{ display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
.event-meta__row{
  display:flex; align-items:center; gap:9px;
  font-size:13.5px; color:var(--text-secondary);
}
.event-meta__row svg{ color:var(--accent-1); flex-shrink:0; }

.event-actions{ display:flex; gap:8px; margin-bottom:18px; flex-wrap:wrap; }
.pill-btn{
  display:flex; align-items:center; gap:6px;
  padding:8px 14px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border-strong);
  background:var(--surface);
  font-size:12.5px; font-weight:600; color:var(--text-primary);
  transition:border-color .15s ease, background-color .15s ease;
}
.pill-btn:hover{ border-color:var(--accent-1); background:var(--accent-tint); }
.pill-btn svg{ color:var(--accent-1); }

.event-desc{
  font-size:14px; line-height:1.6; color:var(--text-secondary);
  margin:0 0 4px;
}
.event-desc.is-clamped p{
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  margin:0;
}
.event-desc.is-expanded p{ margin:0; }
.desc-toggle{
  border:none; background:none; padding:0; margin:6px 0 22px;
  font-size:13px; font-weight:700; color:var(--accent-1);
  display:block;
}

/* ---------- Progress stepper ---------- */
.stepper-nav{
  display:flex; align-items:flex-start; justify-content:space-between;
  padding:6px 6px 26px;
  margin-bottom:6px;
}
.stepper-nav__item{ display:flex; flex-direction:column; align-items:center; gap:7px; flex:1; }
.stepper-nav__line{ flex:1.2; height:2px; background:var(--border-strong); margin-top:13px; }
.stepper-nav__dot{
  width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700;
  border:1.5px solid var(--border-strong);
  background:var(--surface); color:var(--text-tertiary);
}
.stepper-nav__item.is-active .stepper-nav__dot{
  background:var(--accent-grad); border-color:transparent; color:var(--ink);
  box-shadow:none;
}
.stepper-nav__label{ font-size:11px; font-weight:600; color:var(--text-tertiary); }
.stepper-nav__item.is-active .stepper-nav__label{ color:var(--text-primary); }

/* ---------- Ticket cards ---------- */
.tickets-section{ margin-bottom:22px; }
.ticket-list{ display:flex; flex-direction:column; gap:10px; }

.ticket-card{
  background:var(--surface);
  border:1.5px solid var(--border);
  border-radius:var(--radius-md);
  padding:14px 15px 13px;
  box-shadow:var(--shadow-card);
  transition:border-color .18s ease, background-color .18s ease;
}
.ticket-card.is-selected{
  border-color:var(--accent-1); background:var(--accent-tint);
}
.ticket-card__top{ display:flex; justify-content:space-between; gap:10px; margin-bottom:4px; }
.ticket-card__name{ font-size:15px; font-weight:700; margin:0; line-height:1.3; }
.ticket-card__price{ font-size:15px; font-weight:700; white-space:nowrap; font-variant-numeric:tabular-nums; }
.ticket-card__desc{ font-size:12.5px; line-height:1.5; color:var(--text-secondary); margin:6px 0 12px; }

.ticket-card__bottom{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.availability-tag{ font-size:11.5px; font-weight:600; color:var(--text-tertiary); }

.stepper{ display:flex; align-items:center; gap:10px; }
.qty-btn{
  width:30px; height:30px; border-radius:50%;
  border:1.5px solid var(--border-strong);
  background:var(--surface);
  display:flex; align-items:center; justify-content:center;
  font-size:16px; font-weight:600; line-height:1; color:var(--text-primary);
  transition:all .15s ease;
}
.qty-btn:disabled{ opacity:.35; cursor:not-allowed; }
.qty-btn:not(:disabled):active{ transform:scale(.92); }
.ticket-card.is-selected .qty-btn--plus{ background:var(--accent-grad); border-color:transparent; color:var(--ink); }
.qty-value{ min-width:16px; text-align:center; font-size:14px; font-weight:700; font-variant-numeric:tabular-nums; }

.ticket-card__subtotal{
  margin-top:10px; padding-top:10px; border-top:1px dashed var(--border);
  font-size:12px; color:var(--text-secondary); text-align:right;
}
.ticket-card__subtotal strong{ color:var(--text-primary); }

/* ---------- Per-attendee detail rows (inside a selected ticket card) ---------- */
.attendee-rows{ display:flex; flex-direction:column; gap:8px; }
.attendee-rows:not(:empty){ margin-top:12px; padding-top:12px; border-top:1px dashed var(--border); }
.attendee-row + .attendee-row{ margin-top:4px; padding-top:12px; border-top:1px dashed var(--border); }
.attendee-row__label{
  font-family:'Jost','Avenir Next','Segoe UI',system-ui,sans-serif;
  font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-tertiary); margin:0 0 6px;
}
.attendee-row__grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; }
.attendee-row input{
  width:100%;
  border:1px solid var(--field-border);
  border-radius:var(--radius-sm);
  background:var(--field-bg);
  padding:9px 10px;
  font-size:13px;
  color:var(--text-primary);
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.attendee-row input:focus{
  border-color:var(--accent-1);
  box-shadow:0 0 0 3px var(--field-ring);
}
.attendee-row input::placeholder{ color:var(--text-tertiary); }
@media (max-width:420px){
  .attendee-row__grid{ grid-template-columns:1fr; }
}

/* ---------- Details form ---------- */
.details-section{ margin-top:6px; margin-bottom:22px; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.field{ margin-bottom:14px; }
.field.field--full{ grid-column:1 / -1; }
.field label{
  display:block; font-size:12px; font-weight:600; color:var(--text-secondary);
  margin-bottom:6px;
}
.input-wrap{
  display:flex; align-items:center; gap:8px;
  border:1px solid var(--field-border);
  border-radius:var(--radius-sm);
  background:var(--field-bg);
  padding:0 13px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.input-wrap svg{ color:var(--text-tertiary); flex-shrink:0; }
.input-wrap:focus-within{ border-color:var(--accent-1); box-shadow:0 0 0 3px var(--field-ring); }
.field.has-error .input-wrap{ border-color:var(--error); }
.field.has-error .input-wrap:focus-within{ box-shadow:0 0 0 3px var(--error-glow); }
.input-wrap input{
  border:none; outline:none; background:transparent;
  padding:12px 0; width:100%; font-size:14.5px; color:var(--text-primary);
}
.input-wrap input::placeholder{ color:var(--text-tertiary); }
.prefix{ font-size:14.5px; font-weight:600; color:var(--text-secondary); }
.field-error{
  display:block; min-height:16px; font-size:11.5px; font-weight:500; color:var(--error);
  margin-top:5px;
}

/* ---------- Confirm-email safety banner ---------- */
.confirm-banner{
  margin:0 0 22px;
  padding:14px 16px;
  border-radius:var(--radius-md);
  background:var(--gold-soft);
  border:1px solid var(--gold-border);
  color:var(--text-primary);
  font-size:13.5px;
}
.confirm-banner p{ margin:0 0 10px; }
.confirm-banner__actions{ display:flex; align-items:center; gap:16px; }
.confirm-banner__edit{
  border:none; background:none; padding:0;
  font-size:13px; font-weight:700; color:var(--text-primary);
  text-decoration:underline;
}
.cta-button--compact{ width:auto; padding:10px 20px; box-shadow:none; }

/* ---------- Spacer so content clears the fixed summary bar ----------
   The bar is position:fixed (reserves no document-flow space at all), so
   this needs to be tall enough that the form's last content (particularly
   the confirm-email banner) isn't left sitting behind it once the bar
   slides in — sized for the bar's typical collapsed height. */
.bottom-spacer{ height:150px; }

/* ---------- Summary / CTA bar ----------
   position:fixed, not sticky — this bar must stay pinned to the viewport's
   bottom edge and slide in/out via transform regardless of page length or
   scroll position. (position:sticky was tried first, matching the
   prototype, but sticky's "stuck" offset is computed independently of any
   transform applied to the same element — a translateY meant to hide the
   bar below the viewport doesn't reliably do so once the element is
   already in its stuck position, most visible on short pages. fixed +
   left:50% + translateX(-50%) for centering, combined with translateY for
   the slide, avoids that interaction entirely.) */
.summary-bar{
  position:fixed; left:50%; bottom:0; z-index:30;
  width:100%; max-width:560px;
  background:var(--surface);
  border-top:1px solid var(--border);
  border-radius:0;
  box-shadow:var(--shadow-float);
  padding-bottom:env(safe-area-inset-bottom,0px);
  transform:translateX(-50%) translateY(101%);
  transition:transform .32s cubic-bezier(.32,.72,0,1);
}
.summary-bar.is-visible{ transform:translateX(-50%) translateY(0); }

.summary-toggle{
  width:100%; border:none; background:none;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px 10px;
  color:var(--text-primary);
}
.summary-toggle__left{ display:flex; align-items:center; gap:7px; }
.summary-toggle__left svg{ color:var(--text-tertiary); transition:transform .2s ease; }
.summary-bar.is-expanded .summary-toggle__left svg{ transform:rotate(180deg); }
.summary-toggle__count{ font-size:13px; font-weight:600; color:var(--text-secondary); }
.summary-toggle__total{ font-size:17px; font-weight:700; font-variant-numeric:tabular-nums; }

.summary-itemized{
  max-height:0; overflow:hidden;
  transition:max-height .3s ease;
  padding:0 18px;
}
.summary-bar.is-expanded .summary-itemized{ max-height:220px; overflow-y:auto; }
.summary-item{
  display:flex; justify-content:space-between; gap:10px;
  font-size:12.5px; color:var(--text-secondary);
  padding:7px 0; border-bottom:1px solid var(--border);
}
.summary-item:last-child{ border-bottom:none; }
.summary-item strong{ color:var(--text-primary); font-weight:600; }

.summary-footer{ padding:12px 18px 16px; }
.cta-button{
  width:100%;
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:15px; border:none; border-radius:var(--radius-sm);
  background:var(--accent-grad);
  color:var(--ink); font-size:14px; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase;
  box-shadow:none;
  transition:transform .12s ease, opacity .2s ease;
}
.cta-button:active{ transform:scale(.98); }
.cta-button:disabled{ opacity:.65; cursor:progress; }
.trust-row{
  display:flex; align-items:center; justify-content:center; gap:6px;
  margin-top:11px; font-size:11.5px; color:var(--text-tertiary);
}
.trust-row svg{ color:var(--text-tertiary); flex-shrink:0; }
.trust-row .trust-brand{ color:var(--text-secondary); font-weight:700; }
.terms-link{
  display:block; width:100%; text-align:center;
  border:none; background:none; padding:0; margin-top:8px;
  font-size:11.5px; font-weight:700; color:var(--text-tertiary);
  text-decoration:underline;
}

/* ---------- Terms & Conditions modal ---------- */
.terms-modal{
  position:fixed; inset:0; z-index:60;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  background:rgba(18,20,23,.66);
}
.terms-modal__panel{
  position:relative;
  width:100%; max-width:480px; max-height:80vh; overflow-y:auto;
  background:var(--surface);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-card);
  padding:28px 24px 24px;
  color:var(--text-primary);
}
.terms-modal__panel h2{
  margin:0 0 14px; padding-right:28px;
  font-size:16px; font-weight:700;
}
.terms-modal__close{
  position:absolute; top:14px; right:14px;
  display:flex; align-items:center; justify-content:center;
  width:28px; height:28px; border:none; border-radius:50%;
  background:var(--border); color:var(--text-secondary);
}
.terms-modal__list{
  margin:0; padding-left:20px;
  font-size:13.5px; line-height:1.6; color:var(--text-secondary);
}
.terms-modal__list li{ margin-bottom:10px; }
.terms-modal__footnote{
  margin:16px 0 0; font-size:12.5px; font-weight:600;
  color:var(--text-primary);
}

/* ---------- Toast ---------- */
.toast{
  position:fixed; left:50%; bottom:24px;
  transform:translate(-50%,12px);
  background:var(--ink); color:#fff;
  font-size:13px; font-weight:500;
  padding:12px 18px; border-radius:var(--radius-sm);
  max-width:88%; text-align:center;
  box-shadow:0 12px 30px -8px rgba(0,0,0,.45);
  opacity:0; pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
  z-index:50;
}
.toast.is-visible{ opacity:1; transform:translate(-50%,0); }

/* ---------- Motion & accessibility ---------- */
.page-shell :focus-visible{ outline:2px solid var(--accent-1); outline-offset:2px; }
/* Fields show focus as a gold border plus a soft gold ring of their own.
   Without this, the shared rule above stacked a THIRD gold line outside
   that — border, ring, then outline — which is what made focused inputs
   look heavy. Buttons and links keep the shared outline; they have no
   focus treatment of their own. */
.page-shell input:focus-visible,
.page-shell input:focus{ outline:none; }
@media (prefers-reduced-motion:reduce){
  .page-shell *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}
@media (max-width:360px){
  .event-title{ font-size:27px; }
  .form-grid{ grid-template-columns:1fr; }
}

/* ---------- Laptop / desktop layout ----------
   1024px matches this app's own Tailwind `lg` breakpoint convention
   (there's no tailwind.config.js — Tailwind's default scale — even though
   this page's own component styles are hand-written CSS, not Tailwind
   utilities). Below this, everything above is the mobile layout: full-width
   single column, summary bar as a fixed bottom sheet. At and above it,
   #content becomes a two-column grid — ticket selection/details on the
   left, an always-visible sticky order-summary sidebar on the right,
   replacing the bottom sheet — so a laptop-width visitor gets a page
   actually laid out for that width, not a centered phone view. */
@media (min-width:1024px){
  .page-shell{ max-width:1120px; }

  .app-bar__title{ max-width:400px; }

  #content:not(.hidden){
    display:grid;
    grid-template-columns:1fr 380px;
    column-gap:32px;
    align-items:start;
    padding:0 24px;
  }
  .hero{ grid-column:1 / -1; height:280px; border-radius:0; }
  .event-title{ font-size:42px; }

  main{ grid-column:1; padding:0; }

  /* Same #summaryBar element as the mobile bottom sheet — here it drops
     the fixed-position/slide-in-transform treatment entirely (a sidebar
     card has no "hidden" state to slide out of; it's just always present,
     including showing "0 tickets selected" before anything's picked) and
     becomes a normal, always-expanded sticky card instead. */
  .summary-bar{
    position:sticky; top:80px;
    grid-column:2;
    left:auto; bottom:auto;
    width:auto; max-width:none;
    border-top:none;
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    box-shadow:var(--shadow-card);
    padding-bottom:0;
    transform:none !important;
  }
  .summary-itemized{
    max-height:none !important;
    overflow:visible;
    padding:0 18px;
  }
  .summary-toggle{ pointer-events:none; cursor:default; }
  .summary-toggle__left svg{ display:none; }

  /* No fixed bottom sheet to clear anymore — the sidebar sits beside the
     form, not over it. */
  .bottom-spacer{ display:none; }
}