@import url("https://fonts.googleapis.com/css2?family=Google+Sans+Flex:opsz,wght@6..144,1..1000&display=swap");

@font-face {
  font-family: "League Gothic";
  src: url("assets/fonts/league-gothic-400.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("assets/fonts/barlow-condensed-500.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("assets/fonts/barlow-condensed-600.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("assets/fonts/barlow-condensed-700.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("assets/fonts/manrope-400.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("assets/fonts/manrope-500.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("assets/fonts/manrope-600.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("assets/fonts/manrope-700.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

:root {
  --ink: #11182e;
  --night: #0a1025;
  --paper: #f2f5fb;
  --paper-bright: #fbfcff;
  --citrus: #92d8ff;
  --citrus-deep: #6dbff1;
  --blue: #4f5bd5;
  --blue-soft: #e8ebff;
  --aurora-pink: #f0a6d4;
  --aurora-lilac: #b8abff;
  --muted: #5f6980;
  --line: #d4dbea;
  --line-dark: #75839f;
  --error: #bd4059;
  --success: #267064;
  /* Layered: a tight, faint contact shadow plus a large diffuse one reads as soft light,
     where a single hard-edged shadow at this size read as a heavy slab underneath the card. */
  --shadow: 0 2px 8px rgba(27, 42, 92, 0.05), 0 18px 40px rgba(27, 42, 92, 0.1);
  --display: "League Gothic", "Barlow Condensed", sans-serif;
  --body: "Google Sans Flex", "Manrope", sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
/* scrollbar-gutter: pages that scroll and pages that do not keep the same content width. */
html { scrollbar-gutter: stable; min-width: 320px; background: var(--paper); scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; color: var(--ink); background: var(--paper); font-family: var(--body); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: var(--blue); text-underline-offset: 3px; }
::selection { background: var(--aurora-lilac); color: var(--ink); }
* { scrollbar-color: var(--ink) var(--paper); scrollbar-width: thin; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.utility {
  min-height: 64px;
  padding: 0 28px;
  display: grid;
  /* Equal side columns keep the centre switch truly centred whatever sits left or right. */
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 28px;
  background: var(--night);
  color: var(--paper-bright);
  border-bottom: 1px solid #000;
}
.brand { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; border: 0; background: transparent; padding: 0; cursor: pointer; }
.brand-word { font: 700 34px/1 var(--display); letter-spacing: -0.02em; text-transform: uppercase; }
.brand-stamp { padding: 4px 7px; background: var(--aurora-lilac); color: var(--night); font: 750 9px/1 var(--body); letter-spacing: .05em; transform: rotate(-2deg); }
.utility-center { justify-self: center; }
.role-switch { display: flex; align-items: center; gap: 2px; padding: 3px; background: #202943; border-radius: 999px; }
.role-switch button { border: 0; background: transparent; color: #bfc9df; border-radius: 999px; padding: 8px 14px; cursor: pointer; font-weight: 650; font-size: 12px; }
.role-switch button.active { background: var(--paper-bright); color: var(--ink); }
.utility-meta { display: grid; justify-items: end; gap: 3px; color: #dce6fa; font-size: 12px; font-variant-numeric: tabular-nums; }
.utility-clock-row { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.utility-meta small { color: #95a5c4; font-size: 10px; }
.utility-meta .icon { width: 17px; height: 17px; color: var(--citrus); }
.sim-badge { display: inline-flex; align-items: center; gap: 6px; color: var(--citrus); font-weight: 700; }
.sim-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px rgba(146,216,255,.14); }
i.icon[data-lucide]::before { content: attr(data-icon-fallback); font-style: normal; line-height: 1; }

.page { min-height: calc(100vh - 64px); }
.boot-loading { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; background: var(--paper-bright); color: var(--ink); }
.boot-loading .brand-word { font: 700 34px/1 var(--display); letter-spacing: -0.02em; text-transform: uppercase; }
.boot-loading-bar { width: 120px; height: 3px; border-radius: 999px; background: var(--line); position: relative; overflow: hidden; }
.boot-loading-bar::after { content: ''; position: absolute; inset: 0; width: 40%; border-radius: 999px; background: var(--ink); animation: boot-loading-sweep 1.1s ease-in-out infinite; }
@keyframes boot-loading-sweep { 0% { transform: translateX(-120%); } 100% { transform: translateX(380%); } }
.main-pad { padding: 34px 38px 48px; }
.topline { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.topline h1, .panel-title, .auth-title { margin: 0; font-family: var(--display); font-weight: 600; letter-spacing: -0.025em; line-height: .92; text-transform: uppercase; }
.topline h1 { font-size: clamp(52px, 6vw, 86px); max-width: 780px; }
.topline p { margin: 10px 0 0; color: var(--muted); max-width: 56ch; }
.action-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.btn { min-height: 44px; border: 1px solid var(--ink); background: transparent; padding: 10px 12px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; cursor: pointer; text-decoration: none; font-weight: 700; transition: background-color .18s ease-out, color .18s ease-out, transform .18s ease-out, box-shadow .18s ease-out; }
.btn:hover { background: var(--ink); color: var(--paper-bright); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--citrus); color: var(--ink); border-color: var(--ink); box-shadow: 0 9px 24px rgba(79,91,213,.18); }
.btn-primary:hover { background: var(--citrus-deep); color: var(--ink); }
.btn-dark { background: var(--ink); color: var(--paper-bright); }
.btn-dark:hover { background: #30312d; }
.btn-quiet { border-color: transparent; color: var(--muted); }
.btn-quiet:hover { background: #e8e6df; color: var(--ink); }
.btn-danger { color: var(--error); border-color: #dfb3ae; }
.btn-danger:hover { background: var(--error); color: white; }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }

.auth-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(360px, .8fr) minmax(500px, 1.2fr); background: var(--paper-bright); }
.auth-copy { padding: clamp(34px, 6vw, 86px); display: flex; flex-direction: column; justify-content: space-between; background: var(--night); color: var(--paper-bright); position: relative; overflow: hidden; isolation: isolate; }
.auth-copy .brand { position: relative; z-index: 1; }
.auth-copy > div { position: relative; z-index: 1; }
.auth-copy h1 { margin: 50px 0 24px; max-width: 640px; font: 600 clamp(64px, 8vw, 128px)/.84 var(--display); text-transform: uppercase; letter-spacing: -0.03em; text-shadow: 0 3px 24px rgba(2,8,30,.82); }
.auth-copy p { max-width: 34ch; margin-bottom: 0; color: #fff; font-size: 16px; font-weight: 600; line-height: 1.55; text-shadow: 0 2px 14px rgba(2,8,30,.95); }
.auth-form { padding: clamp(34px, 7vw, 100px); display: flex; align-items: center; justify-content: center; }
.auth-card { width: min(100%, 470px); }
.auth-title { font-size: 58px; }
.auth-sub { color: var(--muted); margin: 14px 0 34px; }
.google-btn { width: 100%; min-height: 56px; background: var(--paper-bright); border: 1px solid var(--ink); display: flex; align-items: center; justify-content: center; gap: 14px; cursor: pointer; font-weight: 700; box-shadow: 0 10px 24px rgba(16,17,15,.09); transition: transform .18s ease-out, box-shadow .18s ease-out; }
.google-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(16,17,15,.13); }
.google-mark { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; border: 4px solid var(--blue); font-weight: 800; color: var(--blue); font-size: 11px; }
.privacy-line { margin: 20px 0 0; color: var(--muted); font-size: 12px; text-align: center; }

@media (min-width: 761px) {
  .auth-copy { background-image: linear-gradient(180deg,rgba(8,18,55,.34) 0%,rgba(12,26,74,.58) 48%,rgba(7,13,37,.9) 100%), url("assets/login-cityscape.jpg"); background-size: cover; background-position: 52% center; }
}

.setup-shell { min-height: 100vh; display: grid; grid-template-columns: 300px 1fr; }
.setup-side { background: var(--ink); color: var(--paper-bright); padding: 32px; display: flex; flex-direction: column; }
.setup-main { padding: clamp(34px, 7vw, 100px); max-width: 1160px; }
.setup-main h1 { font: 600 clamp(56px, 6vw, 92px)/.9 var(--display); text-transform: uppercase; letter-spacing: -0.03em; margin: 18px 0; }
.source-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; margin: 38px 0; max-width: 760px; }
.source-option { min-height: 210px; border: 1px solid var(--line-dark); background: var(--paper-bright); padding: 22px; text-align: left; cursor: pointer; display: grid; grid-template-rows: auto 1fr; gap: 28px; transition: border-color .18s, transform .18s, background .18s; }
.source-option:hover, .source-option.selected { border-color: var(--ink); transform: translateY(-2px); background: var(--blue-soft); }
.source-option.selected { box-shadow: inset 0 -6px 0 var(--citrus); }
.source-icon { width: 48px; height: 48px; display: grid; place-items: center; background: var(--blue-soft); color: var(--blue); border-radius: 50%; }
.source-option.selected .source-icon { background: #cbd0f7; color: var(--night); }
.source-option > span:last-child { align-self: end; display: grid; gap: 8px; }
.source-option strong { display: block; font: 600 27px/.95 var(--display); text-transform: uppercase; text-wrap: balance; }
.source-option small { display: block; color: var(--muted); line-height: 1.4; }
.field { display: grid; gap: 7px; }
.field label, .label { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.field input, .field textarea, .field select { width: 100%; border: 1px solid var(--line-dark); background: var(--paper-bright); color: var(--ink); min-height: 46px; padding: 10px 12px; border-radius: 0; }
.field input:not([type="checkbox"]), .field select { height: 46px; }
.field input::placeholder, .field textarea::placeholder { color: #68748c; opacity: .78; }
.field textarea { min-height: 88px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--blue); outline: 3px solid rgba(60,115,217,.16); }
.field input[aria-invalid="true"] { border-color: var(--error); outline: 3px solid rgba(189,61,49,.12); }
.field-error { color: var(--error); font-size: 12px; margin: 0; }
.setup-fields { display: grid; grid-template-columns: 1.2fr .8fr; gap: 16px; margin: 28px 0; }
.country-field, .city-field { min-width: 0; align-content: start; }
.country-field > label, .city-field > label { margin: 0; }
.field input:disabled { color: #8a94a9; background: #e8edf6; border-color: var(--line); cursor: not-allowed; }
.setup-range-field { position: relative; }
.trip-range-input { width: 100%; min-height: 68px; padding: 11px 14px; border: 1px solid var(--line-dark); background: var(--paper-bright); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 13px; text-align: left; cursor: pointer; }
.trip-range-input:hover, .trip-range-input[aria-expanded="true"] { border-color: var(--blue); background: var(--blue-soft); }
.trip-range-input > .icon:first-child { color: var(--blue); }
.trip-range-input > .icon:last-child { transform: rotate(90deg); }
.trip-range-input span { min-width: 0; display: grid; gap: 2px; }
.trip-range-input .range-change { display: inline; color: var(--blue); font-size: 12px; font-weight: 800; text-align: right; }
.trip-range-input strong { overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.trip-range-input small { color: var(--muted); font-size: 12px; }
.setup-range-backdrop { position: fixed; inset: 0; z-index: 140; padding: 24px; display: grid; place-items: center; background: rgba(8,17,39,.58); backdrop-filter: blur(4px); }
.setup-range-dialog { width: min(560px,100%); max-height: calc(100vh - 48px); overflow: auto; border-top: 6px solid var(--blue); background: var(--paper-bright); box-shadow: 0 28px 80px rgba(8,17,39,.3); }
.setup-range-head { min-height: 66px; padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); background: var(--paper-bright); }
.setup-range-head > span { display: grid; gap: 2px; }
.setup-range-head strong { text-transform: uppercase; }
.setup-range-head small { color: var(--muted); }
.setup-range-jump { padding: 12px 14px 4px; display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: 10px; }
.setup-range-jump > .icon-btn { width: 44px; height: 44px; }
.setup-range-jump > .icon-btn:first-child .icon { transform: none; }
.setup-range-selects { display: grid; grid-template-columns: 1.3fr .7fr; gap: 8px; }
.setup-range-selects label { display: grid; gap: 4px; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.setup-range-selects select { width: 100%; height: 44px; min-height: 44px; border: 1px solid var(--line-dark); background: var(--paper-bright); padding: 8px 36px 8px 11px; color: var(--ink); font: 700 14px/1 var(--body); }
.setup-range-month { padding: 8px 14px 14px; }
.setup-range-month h3 { margin: 8px 0 6px; color: var(--ink); font: 600 25px/1 var(--display); text-align: center; text-transform: uppercase; }
.setup-range-weekdays, .setup-range-grid { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); }
.setup-range-weekdays span { padding: 6px 2px; color: var(--muted); text-align: center; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.setup-range-grid button { min-width: 0; min-height: 42px; border: 0; background: transparent; color: var(--ink); cursor: pointer; font-size: 12px; font-variant-numeric: tabular-nums; }
.setup-range-grid button:hover:not(:disabled), .setup-range-grid button:focus-visible { position: relative; z-index: 1; background: var(--citrus); outline: 2px solid var(--ink); outline-offset: -2px; }
.setup-range-grid button.outside { color: #9ca6b9; }
.setup-range-grid button:disabled { color: #bcc4d3; cursor: not-allowed; text-decoration: line-through; }
.setup-range-grid button.in-range { background: var(--blue-soft); }
.setup-range-grid button.range-endpoint { background: var(--blue); color: white; font-weight: 800; }
.setup-range-summary { margin: 0 14px; padding: 11px 0; display: grid; grid-template-columns: 1fr 1fr .7fr; gap: 12px; border-top: 1px solid var(--line); }
.setup-range-summary span { min-width: 0; display: grid; gap: 2px; }
.setup-range-summary small { color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.setup-range-summary strong { font-size: 11px; line-height: 1.25; }
.setup-range-foot { padding: 12px 14px 14px; display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--line); }
.range-help { margin: 12px 0 0; color: var(--muted); font-size: 12px; }
.search-input-wrap { position: relative; }
.search-input-wrap > .icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--blue); pointer-events: none; }
.search-input-wrap input { padding-left: 42px; }
.timezone-field, .country-field, .city-field { position: relative; }
.timezone-native, .country-native, .city-native { display: none; }
.timezone-desktop, .country-desktop, .city-desktop { position: relative; }
.timezone-results, .country-results, .city-results { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 90; max-height: 224px; overflow: auto; background: var(--paper-bright); border: 1px solid var(--ink); box-shadow: var(--shadow); }
.timezone-results[hidden], .country-results[hidden], .city-results[hidden], [hidden] { display: none !important; }
.timezone-results button, .country-results button, .city-results button { width: 100%; min-height: 44px; padding: 9px 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 0; border-bottom: 1px solid var(--line); background: var(--paper-bright); text-align: left; cursor: pointer; }
.timezone-results button:hover, .timezone-results button:focus-visible, .country-results button:hover, .country-results button:focus-visible, .city-results button:hover, .city-results button:focus-visible { background: var(--blue-soft); outline: 2px solid var(--blue); outline-offset: -2px; }
.timezone-results small, .timezone-results p, .country-results small, .country-results p, .city-results small, .city-results p { color: var(--muted); }
.timezone-results p, .country-results p, .city-results p { margin: 0; padding: 14px; }
.timezone-auto input[readonly] { color: var(--ink); background: #f2f5fb; cursor: default; }
.place-search { position: relative; }
.place-results { position: absolute; left: 0; right: 0; top: calc(100% - 26px); z-index: 95; max-height: 230px; overflow-y: auto; border: 1px solid var(--ink); background: var(--paper-bright); box-shadow: var(--shadow); }
.place-results button { width: 100%; min-height: 52px; padding: 9px 12px; display: flex; align-items: center; gap: 11px; border: 0; border-bottom: 1px solid var(--line); background: var(--paper-bright); text-align: left; cursor: pointer; }
.place-results button:hover, .place-results button:focus-visible { background: var(--blue-soft); outline: 2px solid var(--blue); outline-offset: -2px; }
.place-results button span { display: grid; gap: 1px; }
.place-results button small, .place-results p { color: var(--muted); }
.place-results p { margin: 0; padding: 14px; }
.field-hint { color: var(--muted); font-size: 11px; }
.format-hint { color: var(--blue); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.trip-title-field { padding: 14px; border: 1px solid var(--blue); background: var(--blue-soft); }
.trip-title-field input { border-color: var(--ink); }
.date-time-inputs { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(112px,.7fr); gap: 8px; }
.date-time-inputs.same-day { grid-template-columns: 1fr; }
.date-time-inputs.same-day #event-end-date { display: none; }
.guest-capacity-field { grid-column: span 2; }
.guest-capacity-field input { max-width: 180px; }
.check-row { min-height: 56px; padding: 11px 12px; border: 1px solid var(--line-dark); display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.check-row input { width: 18px; height: 18px; flex: none; accent-color: var(--ink); }
.check-row span { display: grid; gap: 3px; }
.check-row strong { font-size: 13px; }
.check-row small { color: var(--muted); font-size: 11px; font-weight: 400; letter-spacing: 0; text-transform: none; }
.linked-calendar { min-height: 68px; padding: 12px 14px; display: flex; align-items: center; gap: 13px; border: 1px solid var(--line-dark); background: var(--paper-bright); }
.linked-calendar > .icon { width: 22px; height: 22px; color: var(--blue); }
.linked-calendar > span { display: grid; gap: 3px; }
.linked-calendar strong, .linked-calendar small { display: block; }
.linked-calendar small { color: var(--success); font-size: 12px; font-weight: 700; }
.linked-calendar .sim-dot { display: inline-block; width: 6px; height: 6px; margin-right: 6px; }

.owner-layout { display: block; min-height: calc(100vh - 64px); }
.utility-brand { position: relative; display: flex; align-items: center; gap: 14px; }
/* Same wordmark size for host and guest — only the login/auth splash page keeps the larger
   hero-sized brand-word (it isn't wrapped in .utility-brand). The "FOR FRIENDS" stamp stays
   for guests but drops out next to the hamburger, which needs the room more than host mode does. */
.utility-brand .brand-word { font-size: 26px; }
.utility-brand:has(.owner-menu) .brand-stamp { display: none; }
.owner-menu { position: relative; }
/* Guest preview has no host menu; this keeps its slot so the logo does not jump when the
   host flips between Host and Guest preview. Real guests (no switch) do not get it. */
.owner-menu-placeholder { width: 38px; height: 38px; flex: none; }
.owner-menu-trigger { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.28); border-radius: 9px; background: transparent; color: inherit; cursor: pointer; }
.owner-menu-trigger:hover, .owner-menu-trigger[aria-expanded="true"] { background: rgba(255,255,255,.12); }
/* A slide-in drawer docked to the right edge, not a dropdown anchored under the trigger —
   both the backdrop and panel stay in the DOM at all times (rather than being added/removed)
   so the .open class change actually has something to transition between. */
.owner-menu-backdrop { position: fixed; inset: 0; z-index: 88; background: rgba(7,13,37,.5); border: 0; padding: 0; cursor: default; opacity: 0; pointer-events: none; transition: opacity .22s ease-out; }
.owner-menu-backdrop.open { opacity: 1; pointer-events: auto; }
.owner-menu-panel { position: fixed; top: 0; left: 0; bottom: 0; z-index: 89; width: min(320px,86vw); padding: 16px 14px calc(18px + env(safe-area-inset-bottom)); border: 0; border-right: 1px solid var(--ink); background: var(--paper-bright); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 2px; overflow-y: auto; transform: translateX(-100%); transition: transform .26s cubic-bezier(.16,1,.3,1); }
.owner-menu-panel.open { transform: translateX(0); }
.owner-menu-head { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.owner-menu-panel button { width: 100%; min-height: 46px; border: 0; background: transparent; text-align: left; padding: 11px 12px; display: flex; align-items: center; gap: 11px; cursor: pointer; color: var(--muted); font-weight: 700; }
.owner-menu-panel button:hover, .owner-menu-panel button:focus-visible { background: var(--blue-soft); color: var(--blue); }
.owner-menu-panel button.active { background: var(--ink); color: var(--paper-bright); }
.owner-menu-panel button.active:hover { background: var(--ink); color: var(--paper-bright); }
.owner-menu-panel .nav-divider { height: 1px; margin: 6px 12px; background: var(--line); }
.owner-content { min-width: 0; padding: 30px 34px 50px; }
.owner-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 26px; }
.owner-header > div:first-child { flex: 1 1 auto; min-width: 0; }
.owner-header h1 { margin: 0; font: 600 56px/.95 var(--display); text-transform: uppercase; letter-spacing: -0.025em; }
.owner-header .owner-trip-title { max-width: 100%; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; }
.owner-header p { margin: 8px 0 0; color: var(--muted); }
.owner-header .action-row { justify-content: flex-end; }
.sync-line { display: flex; align-items: center; gap: 8px; color: var(--success); font-weight: 700; font-size: 12px; }
.sync-line.is-disconnected { color: #8a5b18; }
.sync-line.is-disconnected .sim-dot { box-shadow: 0 0 0 3px rgba(178,117,28,.12); }
.owner-grid { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(300px,.65fr); gap: 24px; align-items: start; }
.owner-grid > * { min-width: 0; }
.calendar-wrap { border-top: 2px solid var(--ink); background: var(--paper-bright); }
.calendar-toolbar { min-height: 74px; padding: 15px 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); }
.month-title { font: 600 34px/1 var(--display); text-transform: uppercase; }
.calendar-controls { display: flex; align-items: center; gap: 8px; }
.month-picker { min-width: 208px; position: relative; }
.month-picker-trigger { width: 100%; min-height: 44px; padding: 5px 9px 5px 0; border: 0; background: transparent; display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--ink); cursor: pointer; font: 600 34px/1 var(--display); text-align: left; text-transform: uppercase; }
.month-picker-trigger .icon { width: 16px; height: 16px; transform: rotate(90deg); transition: transform .16s ease-out; }
.month-picker-trigger[aria-expanded="true"] { color: var(--blue); }
.month-picker-trigger[aria-expanded="true"] .icon { transform: rotate(-90deg); }
.month-menu { position: absolute; z-index: 85; top: calc(100% + 6px); left: 0; width: 230px; max-height: 300px; overflow-y: auto; border: 1px solid var(--ink); background: var(--paper-bright); box-shadow: var(--shadow); }
.month-menu button { width: 100%; min-height: 43px; padding: 8px 11px; border: 0; border-bottom: 1px solid var(--line); background: var(--paper-bright); display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; cursor: pointer; font-weight: 700; }
.month-menu button:hover, .month-menu button:focus-visible { background: var(--blue-soft); color: var(--blue); outline: 2px solid var(--blue); outline-offset: -2px; }
.month-menu button.selected { background: var(--ink); color: var(--paper-bright); }
.month-menu button .icon { width: 16px; height: 16px; }
.month-static { min-width: 170px; padding: 5px 0; font: 600 34px/1 var(--display); text-transform: uppercase; white-space: nowrap; }
.toolbar-actions { display: flex; align-items: center; gap: 8px; }
.range-trigger { min-height: 45px; padding: 7px 10px; border: 1px solid var(--line-dark); background: var(--paper-bright); display: flex; align-items: center; gap: 9px; cursor: pointer; text-align: left; }
.range-trigger:hover, .range-trigger[aria-expanded="true"] { background: var(--blue-soft); border-color: var(--blue); }
.range-trigger span { display: grid; line-height: 1.15; }
.range-trigger small { color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.range-trigger strong { font-size: 12px; font-variant-numeric: tabular-nums; }
.range-trigger .range-change { display: inline; margin-left: auto; padding-left: 9px; color: var(--blue); font-size: 11px; font-weight: 800; }
.range-editor { padding: 14px 18px; display: grid; grid-template-columns: minmax(150px,1fr) auto minmax(150px,1fr) auto; gap: 12px; align-items: end; background: var(--blue-soft); border-bottom: 1px solid var(--blue); }
.range-editor .field input { background: var(--paper-bright); }
.range-arrow { align-self: end; min-height: 46px; display: grid; place-items: center; color: var(--blue); }
.calendar-view-switch { display: flex; border: 1px solid var(--line-dark); }
.calendar-view-switch button { min-height: 36px; padding: 7px 10px; border: 0; border-right: 1px solid var(--line); background: transparent; font-size: 11px; font-weight: 800; cursor: pointer; }
.calendar-view-switch button:last-child { border-right: 0; }
.calendar-view-switch button.active { background: var(--ink); color: white; }
.icon-btn { width: 40px; height: 40px; display: inline-grid; place-items: center; border: 1px solid var(--line-dark); background: transparent; cursor: pointer; }
.icon-btn:hover { background: var(--ink); color: white; }
.icon-btn.active { background: var(--ink); color: white; }
/* Trip settings and Share are icon-only at every width; the name stays available to screen
   readers (aria-label, plus this visually hidden label) and as a hover title. */
.btn-icon-collapse { width: 44px; padding-left: 0; padding-right: 0; }
.btn-icon-collapse .btn-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
/* Overview tab: icon-only, set apart from the Month/List pair, named on hover/focus. */
.view-overview-btn { position: relative; margin-left: 8px; }
.view-overview-btn::after { content: attr(data-tip); position: absolute; left: 50%; top: calc(100% + 8px); z-index: 20; transform: translateX(-50%); padding: 5px 9px; background: var(--ink); color: white; font-size: 11px; font-weight: 700; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .14s ease-out; }
.view-overview-btn:hover::after, .view-overview-btn:focus-visible::after { opacity: 1; }
.calendar-wrap > .event-list { border-top: 0; }
/* Same width as the month picker it replaces, so the view buttons do not jump. */
.overview-title { min-width: 208px; }
.calendar-desktop { position: relative; }
.weekday-row { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); }
.weekday { padding: 10px 8px; text-align: center; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; border-bottom: 1px solid var(--line); }
.calendar-week { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); }
.day-cell { min-height: 154px; padding: 7px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--paper-bright); position: relative; overflow: hidden; }
.calendar-week .day-cell:last-child { border-right: 0; }
.day-cell.muted { color: #9aa4b8; background: #f0f3f9; }
.day-cell.out-of-range { background: #e9edf6; opacity: .72; }
.day-cell.selected { box-shadow: inset 0 0 0 2px var(--blue); }
.day-cell.today .date-num { background: var(--ink); color: white; }
.date-num { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; font-size: 12px; font-weight: 800; margin-bottom: 7px; }
.slot { position: absolute; left: 7px; right: 7px; top: calc(34px + (var(--slot-index, 0) * 27px)); width: auto; min-height: 23px; margin: 0; border: 1px solid transparent; padding: 3px 6px; display: flex; align-items: center; justify-content: space-between; gap: 6px; text-align: left; font-size: 9px; font-weight: 800; cursor: pointer; overflow: hidden; transition: transform .16s cubic-bezier(.16,1,.3,1), box-shadow .16s ease-out, background-color .16s ease-out, border-color .16s ease-out; }
.slot-open { background: var(--citrus); color: var(--ink); }
.slot-open:hover, .slot-open:focus-visible { z-index: 3; background: var(--citrus-deep); border-color: var(--ink); transform: translateY(-2px); box-shadow: 0 8px 16px rgba(16,17,15,.16); }
.slot-open.selected-slot { z-index: 2; background: var(--ink); color: var(--paper-bright); border-color: var(--ink); box-shadow: 0 0 0 2px var(--citrus), 0 8px 18px rgba(16,17,15,.18); }
.slot-open.selected-slot.secondary-slot { background: var(--aurora-lilac); color: var(--night); border-color: var(--aurora-pink); box-shadow: 0 0 0 2px var(--aurora-pink), 0 8px 18px rgba(79,91,213,.2); }
.slot-booked { background: #d9deea; color: #566078; border-color: #9ca6ba; opacity: .78; }
.slot-busy { color: #56637c; background: repeating-linear-gradient(-45deg,#dfe4ef 0 4px,#f7f9fd 4px 8px); }
.slot[data-owner-event], .agenda-slot[data-owner-event] { cursor: pointer; }
.slot-open[data-owner-event], .agenda-slot.open[data-owner-event] { background: var(--blue-soft); color: var(--ink); border-color: var(--blue); }
.slot-booked[data-owner-event], .agenda-slot.booked[data-owner-event] { background: #d9deea; color: #566078; border-color: #9ca6ba; opacity: .78; }
.slot-booked[data-owner-event]:hover, .agenda-slot.booked[data-owner-event]:hover, .slot-booked[data-preview-event]:hover, .agenda-slot.booked[data-preview-event]:hover { opacity: 1; }
.slot[data-owner-event]:hover, .agenda-slot[data-owner-event]:hover { outline: 2px solid var(--blue); outline-offset: 1px; }
.slot.multi-day-start { right: -1px; border-right-width: 0; }
.slot.multi-day-middle { left: -1px; right: -1px; border-right-width: 0; border-left-width: 0; }
.slot.multi-day-end { left: -1px; border-left-width: 0; }
.slot.multi-day-start, .slot.multi-day-middle, .slot.multi-day-end { z-index: 1; }
.slot[data-preview-event], .agenda-slot[data-preview-event] { cursor: pointer; }
.slot[data-preview-event]:hover, .slot[data-preview-event]:focus-visible, .agenda-slot[data-preview-event]:hover, .agenda-slot[data-preview-event]:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; color: var(--blue); }
.slot[data-preview-event].selected-slot, .agenda-slot[data-preview-event].selected-slot { box-shadow: inset 0 0 0 2px var(--blue); }
.slot-overflow { position: absolute; left: 7px; right: 7px; bottom: 7px; min-height: 24px; padding: 3px 7px; border: 1px solid var(--ink); background: var(--paper-bright); color: var(--ink); font-size: 9px; font-weight: 800; text-align: left; cursor: pointer; }
.slot-overflow:hover, .slot-overflow:focus-visible { background: var(--blue-soft); border-color: var(--blue); color: var(--blue); }
.quick-add { position: absolute; inset: 34px 7px 8px; border: 1px dashed transparent; background: transparent; color: var(--muted); display: grid; place-items: center; align-content: center; gap: 5px; opacity: 0; cursor: pointer; transition: opacity .16s ease-out, background-color .16s ease-out, border-color .16s ease-out; }
.quick-add .icon { width: 20px; height: 20px; }
.quick-add span { font-size: 10px; font-weight: 800; text-transform: uppercase; }
.day-cell:hover .quick-add, .quick-add:focus-visible { opacity: 1; background: rgba(146,216,255,.15); border-color: var(--citrus-deep); }
.mini-people { display: flex; align-items: center; margin-left: auto; padding-left: 5px; }
.mini-avatar { width: 17px; height: 17px; margin-left: -5px; border-radius: 50%; display: grid; place-items: center; background: var(--paper-bright); color: var(--ink); border: 1px solid currentColor; font-size: 6px; font-weight: 850; letter-spacing: -.02em; }
.mini-avatar:first-child { margin-left: 0; }
.mini-avatar.occupied { background: var(--blue-soft); color: var(--ink); }
.mini-avatar.empty { background: transparent; border-style: dashed; color: currentColor; }
.mini-capacity { margin-left: 3px; font-size: 7px; font-weight: 850; }
.legend { padding: 11px 16px; display: flex; flex-wrap: wrap; gap: 18px; font-size: 11px; font-weight: 700; border-bottom: 1px solid var(--line); background: #f3f6fc; }
.legend-item { display: inline-flex; align-items: center; gap: 7px; }
.legend-swatch { width: 26px; height: 14px; border: 1px solid var(--ink); }
.legend-swatch.open { background: var(--citrus); }
.legend-swatch.booked { background: #d9deea; }
.legend-swatch.busy { background: repeating-linear-gradient(-45deg,#d9dfec 0 3px,#f7f9fd 3px 6px); }
.mobile-agenda { display: none; }
.list-agenda { padding: 18px; }
.agenda-day { border-top: 1px solid var(--line); padding: 14px 0; display: grid; grid-template-columns: 120px 1fr; gap: 18px; }
.agenda-day h3 { margin: 0; font: 400 25px/1 var(--display); text-transform: uppercase; }
.agenda-slots { display: grid; gap: 7px; }
/* Title on its own line, time + guest count sharing the line below it, and the
   Select/Selected badge as its own column spanning both rows so it reads as centered against
   the whole row rather than squeezed to the baseline of a single truncated line. */
.agenda-slot { min-height: 46px; min-width: 0; border: 1px solid var(--line-dark); background: var(--paper-bright); padding: 10px 12px; display: grid; grid-template-columns: auto auto minmax(0,1fr) auto; grid-template-rows: auto auto; align-items: center; column-gap: 10px; row-gap: 4px; text-align: left; font-weight: 700; transition: transform .16s cubic-bezier(.16,1,.3,1), box-shadow .16s ease-out, background-color .16s ease-out; }
.agenda-slot.open { background: var(--citrus); border-color: var(--ink); cursor: pointer; }
.agenda-slot.open::after { content: "Select →"; grid-column: 4; grid-row: 1 / -1; align-self: center; margin-left: 0; font-size: 11px; font-weight: 800; text-transform: uppercase; white-space: nowrap; }
.agenda-slot .mini-people, .agenda-slot > .icon:last-child { grid-column: 2; grid-row: 2; justify-self: start; margin-left: 0; padding-left: 0; }
.agenda-slot-title { grid-column: 1 / 4; grid-row: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-right: 0; }
.agenda-slot-time { grid-column: 1; grid-row: 2; justify-self: start; font-variant-numeric: tabular-nums; }
.agenda-slot.open:hover, .agenda-slot.open:focus-visible { background: var(--citrus-deep); transform: translateY(-2px); box-shadow: 0 8px 18px rgba(16,17,15,.15); }
.agenda-slot.open.selected-slot { background: var(--ink); color: var(--paper-bright); box-shadow: inset 0 0 0 2px var(--citrus); }
.agenda-slot.open.selected-slot::after { content: "Selected ✓"; }
.agenda-slot.open.selected-slot.secondary-slot { background: var(--aurora-lilac); color: var(--night); box-shadow: inset 0 0 0 2px var(--aurora-pink); }
.agenda-slot.open.selected-slot.secondary-slot::after { content: "Backup ✓"; }
.agenda-slot.booked { background: #d9deea; color: #566078; border-color: #9ca6ba; opacity: .78; cursor: pointer; }
.agenda-slot.busy { background: repeating-linear-gradient(-45deg,#dfe4ef 0 4px,#f7f9fd 4px 8px); color: var(--muted); }
/* The guest picker card specifically: title/time/guest-count stacked as their own lines
   instead of squeezed into one truncated row, with the Select/Selected badge as its own
   column, vertically centered against the full card height rather than crammed inline. */
.sheet-picker .agenda-slot { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; row-gap: 3px; column-gap: 14px; min-height: 92px; padding: 14px; }
.sheet-picker .agenda-slot-title { grid-column: 1; grid-row: 1; margin-right: 0; font-size: 15px; line-height: 1.28; white-space: normal; text-overflow: clip; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sheet-picker .agenda-slot-time { grid-column: 1; grid-row: 2; }
.sheet-picker .agenda-slot > .mini-people, .sheet-picker .agenda-slot > .icon:last-child { grid-column: 1; grid-row: 3; margin-left: 0; padding-left: 0; justify-self: start; }
.sheet-picker .agenda-slot.open::after { grid-column: 2; grid-row: 1 / -1; align-self: center; margin-left: 0; }
.agenda-empty-label { margin: 0; min-height: 42px; display: flex; align-items: center; color: var(--muted); transition: opacity .16s ease-out; }
.agenda-slots.is-empty { min-height: 42px; position: relative; }
.agenda-quick-add { min-height: 42px; padding: 8px 11px; border: 1px dashed var(--line-dark); background: var(--paper-bright); color: var(--blue); display: flex; align-items: center; justify-content: center; gap: 8px; opacity: 0; pointer-events: none; cursor: pointer; font-weight: 750; transition: opacity .16s ease-out, background-color .16s ease-out, border-color .16s ease-out; }
.agenda-slots.is-empty .agenda-quick-add { position: absolute; inset: 0; }
.agenda-day:hover .agenda-quick-add, .agenda-quick-add:focus-visible { opacity: 1; pointer-events: auto; }
.agenda-day:hover .agenda-empty-label { opacity: .18; }
.agenda-quick-add:hover, .agenda-quick-add:focus-visible { border-style: solid; border-color: var(--blue); background: var(--blue-soft); }
.agenda-quick-add .icon { width: 17px; height: 17px; }
.mobile-day-strip { display: flex; max-width: 100%; overflow-x: auto; border-bottom: 1px solid var(--line); }
.mobile-day { min-width: 64px; min-height: 62px; border: 0; border-right: 1px solid var(--line); background: transparent; cursor: pointer; font-weight: 700; }
.mobile-day strong { display: block; font: 400 25px/1 var(--display); }
.mobile-day.active { background: var(--ink); color: white; }
.mobile-day.has-open { box-shadow: inset 0 -4px 0 0 var(--success); }
.mobile-day.is-dim:not(.active) { opacity: .48; }
.mobile-agenda-body { padding: 14px; }
.mobile-agenda-body h3 { margin: 0 0 12px; font: 400 32px/1 var(--display); text-transform: uppercase; }
.day-empty { color: var(--muted); padding: 12px 0; }

.calendar-empty { text-align: center; display: grid; justify-items: center; align-content: center; gap: 10px; }
.calendar-empty h3 { margin: 0; font: 600 34px/.95 var(--display); text-transform: uppercase; letter-spacing: -.02em; }
.calendar-empty p { margin: 0 0 8px; max-width: 42ch; color: var(--muted); }
.empty-calendar-icon { width: 58px; height: 58px; display: grid; place-items: center; position: relative; background: var(--citrus); border-radius: 50%; color: var(--ink); }
.empty-calendar-icon .icon:first-child { width: 27px; height: 27px; }
.empty-calendar-icon .icon:last-child { width: 16px; height: 16px; position: absolute; right: -2px; bottom: 4px; padding: 2px; background: var(--ink); color: var(--paper-bright); border-radius: 50%; }
.calendar-empty-desktop { position: absolute; inset: 35px 0 0; z-index: 2; min-height: 520px; padding: 38px; background: rgba(251,252,255,.96); }
.calendar-empty-agenda { min-height: 360px; padding: 40px 20px; }
.calendar-empty-mobile { min-height: 285px; padding: 28px 18px 38px; }

.overview { position: sticky; top: 22px; background: var(--paper-bright); border-top: 2px solid var(--ink); padding: 22px; min-width: 0; }
.overview::before { content: ""; position: absolute; left: 0; right: 0; top: 102px; border-top: 2px dashed var(--blue); pointer-events: none; }
.overview-label { display: flex; justify-content: space-between; gap: 15px; text-transform: uppercase; font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.overview h2 { margin: 28px 0 20px; font: 600 clamp(44px,4vw,68px)/.86 var(--display); letter-spacing: -0.025em; text-transform: uppercase; text-wrap: balance; }
.overview-section { padding: 18px 0; border-top: 1px solid var(--line); }
.overview-section:first-of-type { margin-top: 24px; }
.meta-line { display: flex; gap: 10px; align-items: flex-start; margin: 9px 0; }
.meta-line p { margin: 0; }
.meta-line small { color: var(--muted); display: block; }
/* "Primary"/"Secondary" used to be folded into the descriptive date/time line — easy to miss
   as just more grey text. As its own small header above the event title it reads as a status,
   which is what it actually is. */
.meta-role-label { display: block; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 2px; }
.meta-role-label.primary { color: var(--blue); }
.meta-role-label.secondary { color: var(--muted); }
.time-option { width: 100%; display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 11px; min-height: 54px; padding: 9px; margin: 8px 0; background: transparent; border: 1px solid var(--line-dark); cursor: pointer; text-align: left; }
.time-option.selected { background: var(--citrus); border-color: var(--ink); }
.time-index { width: 30px; height: 34px; display: grid; place-items: center; background: var(--ink); color: white; font: 600 21px/1 var(--display); }
.time-main { font-weight: 800; }
.time-main small { display: block; color: var(--muted); font-weight: 500; }
.choice-dot { width: 20px; height: 20px; border: 2px solid currentColor; border-radius: 50%; }
.selected .choice-dot { background: var(--ink); box-shadow: inset 0 0 0 4px var(--citrus); }
.confirm-btn { width: 100%; min-height: 58px; font: 600 22px/1 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.microcopy { margin: 10px 0 0; color: var(--muted); font-size: 11px; text-align: center; }

.event-list { border-top: 2px solid var(--ink); background: var(--paper-bright); }
.event-row { padding: 16px 0; margin: 0 18px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; }
.event-date { font: 600 20px/1 var(--display); text-transform: uppercase; text-align: center; border-right: 1px solid var(--line); padding-right: 14px; }
.event-date span { display: block; font-size: 34px; }
.event-info strong { display: block; }
.event-info small { color: var(--muted); }
.event-info { min-width: 0; overflow-wrap: anywhere; }
.row-actions { display: flex; gap: 5px; }
.owner-side-section { margin-bottom: 24px; }
.owner-event-overview { position: sticky; top: 20px; z-index: 2; background: var(--paper-bright); padding: 20px 20px 26px; border-top: 6px solid var(--citrus); box-shadow: var(--shadow); margin-bottom: 30px; }
.receipt-card::after { content: ""; position: absolute; left: 0; right: 0; bottom: -14px; height: 15px; background: linear-gradient(135deg,var(--paper-bright) 10px,transparent 0) 0 0/20px 15px repeat-x; filter: drop-shadow(0 8px 7px rgba(27,42,92,.08)); pointer-events: none; }
.owner-event-overview h2 { margin: 4px 0 18px; font: 600 46px/.9 var(--display); text-transform: uppercase; text-wrap: balance; }
.owner-event-overview .overview-close { display: flex; justify-content: flex-end; }
.owner-event-overview .overview-section { padding: 14px 0; }
.owner-event-overview .action-row { margin-top: 16px; }
.owner-event-overview a { color: var(--blue); text-underline-offset: 3px; }
.owner-event-overview a .icon { width: 13px; height: 13px; vertical-align: -2px; }
.event-note { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.event-note p, .note-copy { margin: 6px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.event-note a, .note-copy a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 2px; }
.going-section { padding: 14px 0; border-top: 1px dashed var(--line-dark); }
.going-list { display: grid; gap: 8px; margin-top: 10px; }
.going-person { display: grid; grid-template-columns: 32px minmax(0,1fr); align-items: center; gap: 9px; }
.going-person .mini-avatar { width: 32px; height: 32px; font-size: 9px; }
.going-person > span:last-child { min-width: 0; display: grid; }
.going-person small { color: var(--muted); overflow-wrap: anywhere; }
.booking-avatar { width: 38px; height: 38px; margin: 0; font-size: 10px; }
.bookings-grid { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(300px,.65fr); gap: 24px; align-items: start; }
.bookings-grid > * { min-width: 0; }
.booking-list { display: grid; }
.booking-row { width: 100%; padding: 16px 18px; border: 0; border-bottom: 1px solid var(--line); background: var(--paper-bright); display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 13px; text-align: left; cursor: pointer; }
.booking-row:hover, .booking-row.selected { background: var(--blue-soft); box-shadow: inset 3px 0 var(--blue); }
.booking-row .event-info { display: grid; gap: 2px; }
.booking-row > .icon { color: var(--blue); }
.booking-host-overview h2 { font-size: 42px; overflow-wrap: anywhere; }
.booking-actions { display: grid; gap: 8px; margin-top: 16px; }
.bookings-empty { padding: 34px 0; border-top: 2px solid var(--ink); }
.bookings-empty h2 { margin: 0; font: 600 38px/1 var(--display); text-transform: uppercase; }
.bookings-empty p { color: var(--muted); }
.owner-side-section h2 { font: 600 28px/1 var(--display); text-transform: uppercase; margin: 0 0 12px; }
.stat-line { display: flex; align-items: baseline; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--line); }
.stat-line strong { font: 600 30px/1 var(--display); }
.activity { padding: 13px 0; border-bottom: 1px solid var(--line); }
.activity p { margin: 0; font-size: 13px; }
.activity small { color: var(--muted); }
.activity-empty { color: var(--muted); }
.link-inline { display: inline; border: 0; background: none; padding: 0; margin: 0; font: inherit; font-weight: 700; color: var(--blue); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.link-inline:hover, .link-inline:focus-visible { color: var(--ink); }

/* The guest's first screen: the cityscape photo is the full backdrop rather than confined to
   half the page, and the form floats as a centered card on top of it instead of sitting in
   its own flat white panel. */
.identity-onboard { min-height: calc(100vh - 64px); padding: clamp(28px,6vw,64px) 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; color: white; background-image: linear-gradient(180deg,rgba(8,18,55,.34) 0%,rgba(12,26,74,.54) 48%,rgba(7,13,37,.9) 100%), url("assets/login-cityscape.jpg"); background-size: cover; background-position: 52% center; isolation: isolate; }
.identity-modal { width: min(100%,480px); background: var(--paper-bright); color: var(--ink); border-top: 6px solid var(--citrus); box-shadow: var(--shadow); padding: clamp(28px,5vw,44px) clamp(22px,4vw,36px); }
.identity-modal .identity-form { width: 100%; }
.identity-modal .identity-form h2 { font: 600 40px/.9 var(--display); text-transform: uppercase; margin: 0 0 10px; }
.identity-modal .identity-form > p { color: var(--muted); font-weight: 600; }
.identity-onboard-trip { margin: 0; }
/* Two side-by-side columns forced long trip titles into a narrow ~60% strip and truncated
   them mid-word (e.g. "Tanya's Real Amsterdam Trip" → "Tanya's Real Amsterda..."). Each block
   gets the card's full width stacked vertically instead, with a divider standing in for the
   column gap. */
.trip-stops { width: min(100%,520px); padding: 18px 20px; display: grid; grid-template-columns: 1fr; gap: 12px; color: white; background: rgba(10,16,37,.82); border: 1px solid rgba(220,230,255,.24); box-shadow: 0 18px 44px rgba(4,10,31,.28); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.trip-stops > div { display: grid; gap: 3px; min-width: 0; }
.trip-stops > div + div { padding-top: 12px; border-top: 1px solid rgba(220,230,255,.18); }
.trip-stops strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; letter-spacing: .03em; text-transform: uppercase; }
.trip-stops span { display: block; color: #dbe7ff; font-size: 12px; font-weight: 650; }
.trip-stops > span { font-weight: 750; }
.trip-stops .line { display: none; }
.identity-form { width: min(100%, 480px); }
.identity-form h2 { font: 600 54px/.9 var(--display); text-transform: uppercase; margin: 0 0 12px; }
.identity-form-grid { display: grid; gap: 16px; margin: 28px 0; }
.party-field { min-width: 0; margin: 0; padding: 0; border: 0; display: grid; gap: 10px; }
.party-field legend { margin-bottom: 7px; padding: 0; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.party-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.party-options label { min-height: 66px; padding: 11px 12px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--line-dark); background: var(--paper-bright); cursor: pointer; transition: border-color .16s ease-out, background-color .16s ease-out, box-shadow .16s ease-out; }
.party-options label:hover { border-color: var(--blue); }
.party-options label:has(input:checked) { border-color: var(--blue); background: var(--blue-soft); box-shadow: inset 0 0 0 1px var(--blue); }
.party-options input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--blue); }
.party-options span { display: grid; gap: 1px; }
.party-options strong { font-size: 13px; }
.party-options small { color: var(--muted); font-size: 11px; }
.friend-count { margin-top: 2px; }

.booking-shell { min-height: calc(100vh - 64px); }
.booking-header { padding: 23px 32px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); gap: 18px; }
.preview-badge { min-height: 38px; padding: 8px 12px; display: inline-flex; align-items: center; border: 1px solid var(--blue); background: var(--blue-soft); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.trip-title { font: 600 30px/1 var(--display); text-transform: uppercase; }
.booking-grid { display: grid; grid-template-columns: minmax(0,1.7fr) minmax(360px,.7fr); align-items: start; gap: 24px; }
.booking-calendar { padding: 22px 26px 38px; min-width: 0; }
.booking-overview { min-height: 0; margin: 22px 26px 36px 0; padding: 20px 20px 26px; position: sticky; top: 20px; color: var(--ink); background: var(--paper-bright); border-top: 6px solid var(--citrus); box-shadow: var(--shadow); }
/* At desktop the review content (checklist/details/confirm) just sits inline in the sidebar —
   the backdrop and close button only exist for the mobile full-overlay presentation below. */
.booking-review-backdrop { display: none; }
.booking-review-head { display: none; }
.booking-overview h2 { font: 600 clamp(42px,4vw,58px)/.86 var(--display); text-transform: uppercase; letter-spacing: -.025em; margin: 10px 0 14px; }
.booking-title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.booking-title-row h2 { min-width: 0; margin-bottom: 10px; }
.booking-overview .overview-section { padding: 12px 0; }
.booking-overview .meta-line { margin: 6px 0; }
.booking-overview .celebration-rule { margin: 3px 0 6px; }
.choice-checklist { display: grid; gap: 8px; margin: 10px 0 14px; }
.choice-checklist-item { min-width: 0; display: grid; grid-template-columns: minmax(0,1fr) auto; border: 1px solid var(--line-dark); background: var(--paper); transition: border-color .18s ease-out, background-color .18s ease-out, box-shadow .18s ease-out; }
.choice-checklist-item.active { border-color: var(--blue); background: var(--blue-soft); box-shadow: inset 0 0 0 1px var(--blue); }
.choice-checklist-item.filled { border-color: var(--blue); }
.choice-checklist-item > button:first-child { width: 100%; min-height: 64px; min-width: 0; padding: 9px 10px; border: 0; background: transparent; color: inherit; display: grid; grid-template-columns: 26px minmax(0,1fr) 20px; align-items: center; gap: 9px; text-align: left; cursor: pointer; }
.choice-checklist-item > button:first-child:disabled { cursor: not-allowed; opacity: .55; }
.choice-check-number { width: 25px; height: 28px; display: grid; place-items: center; background: var(--ink); color: var(--paper-bright); font: 600 18px/1 var(--display); }
.choice-check-copy { min-width: 0; display: grid; gap: 1px; }
.choice-check-copy strong { font-size: 13px; }
.choice-check-copy small { color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.choice-check-copy > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.choice-check-state { width: 20px; height: 20px; display: grid; place-items: center; border: 1px dashed var(--line-dark); border-radius: 50%; }
.filled .choice-check-state { border-style: solid; border-color: var(--citrus); background: var(--citrus); color: var(--night); }
.choice-check-state .icon { width: 13px; height: 13px; stroke-width: 2.5; }
.choice-clear { align-self: stretch; min-width: 48px; padding: 6px 8px; border: 0; border-left: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; font-size: 10px; font-weight: 800; }
.choice-clear:hover { background: var(--aurora-lilac); color: var(--night); }
.booking-instruction { max-width: 28ch; margin: 20px 0; color: var(--muted); font-size: 17px; line-height: 1.45; }
.booking-overview .overview-section { border-color: var(--line); }
.booking-overview .meta-line small, .booking-overview .microcopy, .booking-overview .label { color: var(--muted); }
.booking-overview a { color: var(--blue); }
.booking-overview a .icon { width: 13px; height: 13px; vertical-align: -2px; }
.selection-status { width: fit-content; margin-bottom: 11px; padding: 5px 7px; border: 1px solid var(--line-dark); color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.selection-status.unavailable { color: #6d5a20; border-color: #d39b2a; background: #fff8df; }
.event-time-detail { color: var(--ink) !important; font-weight: 700; font-variant-numeric: tabular-nums; }
.booking-overview .event-time-detail { color: var(--ink) !important; }
.unavailable-note { margin: 12px 0; padding: 12px; border: 1px solid #d39b2a; background: #fff8df; color: #655421 !important; }
.selected-plan { animation: selected-plan-settle .5s cubic-bezier(.16,1,.3,1); }
.celebration-rule { height: 46px; position: relative; overflow: hidden; }
.celebration-rule::before { content: ""; position: absolute; left: 0; right: 0; top: 52%; height: 2px; background: var(--line); }
.celebration-rule::after { content: ""; position: absolute; left: 0; right: 0; top: 52%; height: 2px; background: linear-gradient(90deg,var(--blue),var(--aurora-lilac),var(--aurora-pink)); transform: scaleX(0); transform-origin: left; animation: celebration-progress 3.8s cubic-bezier(.45,0,.2,1) both; }
.celebration-runner { position: absolute; z-index: 2; left: 0; top: 7px; width: 31px; height: 31px; animation: celebration-glide 3.8s cubic-bezier(.45,0,.2,1) both; }
.celebration-icon { position: absolute; inset: 0; width: 31px; height: 31px; padding: 6px; border-radius: 50%; background: var(--aurora-lilac); color: var(--night); box-shadow: 0 8px 20px rgba(79,91,213,.25); stroke-width: 1.9; }
.celebration-particle { position: absolute; z-index: 3; width: 5px; height: 5px; transform: rotate(45deg); animation: particle-pulse 1.4s ease-in-out infinite alternate; }
.celebration-particle.p1 { left: -6px; top: 4px; background: var(--blue); }
.celebration-particle.p2 { right: -6px; top: -2px; background: var(--aurora-pink); animation-delay: .18s; }
.celebration-particle.p3 { left: -9px; bottom: 1px; background: var(--aurora-lilac); animation-delay: .36s; }
.booking-confirm-check { min-height: 54px; margin: 14px 0 10px; padding: 11px 12px; border: 1px solid var(--line-dark); background: var(--paper); display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 13px; font-weight: 700; line-height: 1.35; }
.booking-confirm-check:hover { border-color: var(--blue); background: var(--blue-soft); }
.booking-confirm-check input { width: 19px; height: 19px; flex: none; margin: 0; accent-color: var(--ink); }
.booking-overview .btn-primary { background: var(--citrus); color: var(--ink); }
.guest-pill { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border: 1px solid var(--line); font-size: 12px; }
.guest-initial { width: 25px; height: 25px; border-radius: 50%; background: var(--blue-soft); display: grid; place-items: center; font-weight: 800; }

/* The guest's booking, before and after confirming, is one boarding-pass-style ticket
   (bookingTicket() in app.js) rather than separate hero+sidebar / hero+form layouts — same
   card for "you just booked" and "come back to manage it" instead of two visual languages
   for what's conceptually the same object. */
.ticket-shell { min-height: calc(100vh - 64px); display: flex; align-items: center; justify-content: center; padding: clamp(24px,5vw,64px) 20px; background-image: linear-gradient(180deg,rgba(8,18,55,.34) 0%,rgba(12,26,74,.54) 48%,rgba(7,13,37,.9) 100%), url("assets/login-cityscape.jpg"); background-size: cover; background-position: 52% center; }
.ticket { position: relative; width: min(100%,480px); background: var(--paper-bright); box-shadow: var(--shadow); }
.ticket-top { position: relative; padding: 28px 26px 22px; border-top: 6px solid var(--citrus); }
.ticket-top-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.ticket-brand { font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.ticket-status { padding: 5px 10px; background: var(--ink); color: var(--paper-bright); font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.ticket-route { display: flex; align-items: center; gap: 10px; margin: 4px 0 20px; }
.ticket-time { display: grid; gap: 2px; }
.ticket-time strong { font: 600 30px/1 var(--display); font-variant-numeric: tabular-nums; }
.ticket-time small { font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.ticket-time.end { text-align: right; }
.ticket-path { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; color: var(--blue); min-width: 32px; position: relative; }
.ticket-path::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--line-dark); z-index: 0; }
.ticket-path .icon { position: relative; z-index: 1; width: 20px; height: 20px; background: var(--paper-bright); }
.ticket-title { margin: 0 0 4px; font: 600 clamp(28px,5vw,38px)/.95 var(--display); text-transform: uppercase; letter-spacing: -.02em; }
.ticket-date { margin: 0; color: var(--muted); font-weight: 700; font-size: 13px; }
.ticket-date span { display: block; }
.ticket-divider { position: relative; height: 0; border-top: 2px dashed var(--line-dark); margin: 0 4px; overflow: visible; }
.ticket-divider::before, .ticket-divider::after { content: ''; position: absolute; top: -13px; width: 26px; height: 26px; border-radius: 50%; background: var(--night); }
.ticket-divider::before { left: -17px; }
.ticket-divider::after { right: -17px; }
.ticket-bottom { padding: 22px 26px 26px; }
/* minmax(0,1fr): a long value must not widen its column and push the other one off the card. */
.ticket-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 16px 14px; margin-bottom: 22px; }
.ticket-grid > div { min-width: 0; }
.ticket-grid small { display: block; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }
.ticket-grid strong { display: block; font-size: 14px; overflow-wrap: anywhere; }
.ticket-grid a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.ticket-actions { display: grid; gap: 10px; }
.ticket-actions .btn { width: 100%; justify-content: center; }

.dialog-backdrop { position: fixed; inset: 0; background: rgba(7,13,37,.62); display: grid; place-items: center; padding: 20px; z-index: 30; }
.dialog { width: min(720px,100%); max-height: min(880px, calc(100vh - 40px)); overflow: auto; background: var(--paper-bright); box-shadow: var(--shadow); border-top: 8px solid var(--citrus); padding: 28px; }
.settings-dialog { width: min(780px,100%); }
.dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.dialog h2 { margin: 0; font: 600 44px/.9 var(--display); text-transform: uppercase; }
.dialog p { margin: 8px 0 0; color: var(--muted); }
.dialog-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; gap: 16px; }
.span-2 { grid-column: span 2; }
.dialog-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }
.choice-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.choice-card { border: 1px solid var(--line-dark); padding: 16px; background: var(--paper); cursor: pointer; text-align: left; }
.choice-card:hover, .choice-card.active { border-color: var(--ink); box-shadow: inset 0 -5px var(--citrus); }
.share-dialog { width: min(680px,100%); }
.share-link-row { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 10px; }
.share-link-row .field { min-width: 0; }
.share-link-row input { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.share-link-row .btn { min-height: 46px; }
.dialog .share-note { margin-top: 12px; font-size: 12px; }
.warning-panel { padding: 16px; border: 1px solid var(--error); background: #fff0ed; display: grid; gap: 4px; }
.warning-panel span { color: var(--muted); font-size: 13px; }
.conflict-warning { padding: 12px; border: 1px solid #d39b2a; background: #fff8df; display: flex; align-items: flex-start; gap: 10px; }
.conflict-icon { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 50%; background: #d39b2a; color: var(--ink); font-weight: 900; }
.conflict-warning > span:last-child { display: grid; gap: 2px; }
.conflict-warning small { color: #655421; }
.day-event-options { display: grid; gap: 8px; }
.day-event-option { width: 100%; min-height: 68px; padding: 12px 14px; border: 1px solid var(--line-dark); background: var(--paper-bright); display: flex; align-items: center; justify-content: space-between; gap: 18px; text-align: left; cursor: pointer; }
.day-event-option > span { display: grid; gap: 3px; }
.day-event-option > span:last-child { grid-auto-flow: column; align-items: center; color: var(--blue); font-size: 11px; font-weight: 800; text-transform: uppercase; white-space: nowrap; }
.day-event-option small { color: var(--muted); }
.day-event-option.open:hover, .day-event-option.open:focus-visible { border-color: var(--ink); background: var(--citrus); }
.day-event-option.unavailable { cursor: pointer; background: #efeee8; color: var(--muted); }
.day-event-option.unavailable:hover, .day-event-option.unavailable:focus-visible { border-color: var(--blue); color: var(--blue); background: var(--blue-soft); }

.toast-region { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 60; width: min(92vw, 540px); pointer-events: none; }
.toast { min-height: 50px; padding: 13px 16px; background: var(--ink); color: white; box-shadow: var(--shadow); display: flex; align-items: center; gap: 10px; animation: toast-in .28s cubic-bezier(.16,1,.3,1); }
.toast.error { background: var(--error); }
.toast.success { background: var(--success); }
@keyframes toast-in { from { transform: translateY(18px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes selected-plan-settle { from { box-shadow: inset 0 0 0 2px var(--aurora-lilac), -12px 0 28px rgba(79,91,213,.16); } to { box-shadow: inset 0 0 0 0 transparent, 0 0 0 rgba(79,91,213,0); } }
@keyframes celebration-progress { 0% { transform: scaleX(0); } 100% { transform: scaleX(1); } }
@keyframes celebration-glide { 0% { left: 0; transform: scale(.92); } 12% { transform: scale(1); } 100% { left: calc(100% - 31px); transform: scale(1); } }
@keyframes particle-pulse { from { opacity: .25; transform: rotate(45deg) scale(.72); } to { opacity: 1; transform: rotate(135deg) scale(1); } }

@media (max-width: 1050px) {
  .owner-grid { grid-template-columns: 1fr; }
  .overview { position: static; }
  .booking-grid { grid-template-columns: minmax(0,1.4fr) minmax(330px,.7fr); }
  .day-cell { min-height: 154px; padding: 6px; }
  .slot { padding: 3px 5px; }
  .utility-meta .sim-badge { display: none; }
}

@media (min-width: 761px) and (max-width: 1000px) {
  .setup-shell { grid-template-columns: 240px 1fr; }
  .setup-side { padding: 24px; }
  .setup-main { padding: 50px 34px 60px; }
  .source-grid { grid-template-columns: 1fr; gap: 10px; margin: 28px 0; }
  .source-option { min-height: 92px; grid-template-columns: 48px 1fr; grid-template-rows: 1fr; align-items: center; gap: 18px; padding: 16px 18px; }
  .source-option > span:last-child { align-self: center; }
  .source-option strong { font-size: 28px; }
}

@media (max-width: 760px) {
  .timezone-desktop, .country-desktop, .city-desktop { display: none; }
  .timezone-native, .country-native, .city-native { display: block; }
}

@media (max-width: 760px) {
  body { font-size: 14px; }
  .field input, .field textarea, .field select, .identity-form input { font-size: 16px; }
  .utility { min-height: 88px; padding: 10px 16px 9px; grid-template-columns: auto 1fr; column-gap: 14px; row-gap: 8px; }
  .brand-word { font-size: 27px; }
  .brand-stamp { display: none; }
  .utility-center { justify-self: end; }
  .utility-meta { width: 100%; grid-column: 1 / -1; grid-template-columns: 1fr auto; align-items: center; justify-items: stretch; padding-top: 7px; border-top: 1px solid #30312d; }
  .utility-clock-row { min-width: 0; }
  .utility-meta time { font-size: 10px; }
  .utility-meta small { text-align: right; font-size: 9px; }
  .role-switch button { padding: 7px 10px; }
  .auth-shell { grid-template-columns: 1fr; }
  .auth-copy { min-height: 46vh; padding: 28px 24px; }
  .auth-copy h1 { font-size: 64px; margin: 40px 0 18px; }
  .auth-form { padding: 38px 24px 56px; }
  .auth-title { font-size: 44px; }
  .setup-shell { grid-template-columns: 1fr; }
  .setup-side { padding: 20px; }
  .setup-main { padding: 38px 20px 56px; }
  .setup-main h1 { font-size: 54px; }
  .source-grid { grid-template-columns: 1fr; gap: 10px; margin: 26px 0; }
  .source-option { min-height: 84px; grid-template-columns: 48px 1fr; grid-template-rows: 1fr; align-items: center; gap: 16px; padding: 14px 16px; }
  .source-option > span:last-child { align-self: center; }
  .source-option strong { font-size: 26px; }
  .setup-fields { grid-template-columns: 1fr; }
  .owner-content { padding: 22px 14px 42px; }
  .owner-header { display: grid; }
  .owner-header h1 { font-size: 43px; }
  .owner-header .action-row { justify-content: flex-start; }
  /* Trip settings / Share collapse to icon-only so three actions fit without wrapping;
     Add event is the primary action and keeps its label. aria-label on the button (set in
     ownerTrip()) keeps the accessible name intact once the visible text is hidden. */
  .btn-icon-collapse { padding-left: 10px; padding-right: 10px; }
  .btn-icon-collapse .btn-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
  .owner-grid { gap: 18px; }
  /* Base rule makes this position:sticky inside a 2-column grid that collapses to 1 column
     here, so the card previously rendered BELOW the whole calendar in DOM order — reaching
     it meant scrolling past everything. A fixed full-screen overlay is visible the instant
     an event is tapped, with its own scroll for long content; the existing close button
     (data-action="close-event-overview") is unaffected and still clears the selection. */
  .owner-event-overview { position: fixed; inset: 0; z-index: 25; margin: 0; height: 100vh; max-height: none; overflow-y: auto; padding: 20px 20px calc(24px + env(safe-area-inset-bottom)); }
  .bookings-grid { grid-template-columns: 1fr; }
  .booking-host-overview { position: static; }
  .event-row { grid-template-columns: 50px 1fr; }
  .row-actions { grid-column: 2; justify-content: flex-start; }
  .trip-stops { gap: 10px; padding: 15px 16px; }
  .identity-onboard { padding: 24px 16px; gap: 20px; }
  .identity-modal { padding: 26px 20px; }
  .booking-header { padding: 16px; align-items: flex-start; }
  .booking-header .action-row { justify-content: flex-end; }
  .booking-grid { display: block; }
  .calendar-toolbar { padding: 12px 4px; }
  .calendar-toolbar { align-items: flex-start; flex-wrap: wrap; }
  .toolbar-actions { width: 100%; justify-content: space-between; }
  .range-trigger { flex: 1; }
  .range-editor { grid-template-columns: 1fr auto 1fr; padding: 12px; }
  .range-editor .btn { grid-column: 1 / -1; }
  .month-title { font-size: 28px; }
  .month-static { min-width: 0; font-size: 28px; }
  .month-picker { min-width: 190px; }
  .month-picker-trigger { font-size: 28px; }
  .calendar-desktop { display: none; }
  .mobile-agenda { display: block; }
  .calendar-empty-desktop { display: none; }
  .calendar-wrap { overflow: visible; }
  .legend { min-width: 0; gap: 9px; padding: 11px; }
  .legend-item { font-size: 9px; }
  .calendar-view-switch { display: none; }
  /* Picking now happens inside the sheet itself (.sheet-picker, a mobileAgenda day-strip +
     slot-list) — the calendar behind it is no longer needed to complete a booking on mobile,
     so it's hidden rather than fought with fixed-position overlap hacks. */
  .booking-calendar { display: none; }
  .booking-overview { position: static; height: auto; max-height: none; overflow: visible; margin: 0; padding: 16px 18px calc(24px + env(safe-area-inset-bottom)); border-top: 6px solid var(--citrus); box-shadow: none; }
  .booking-overview.receipt-card::after { display: none; }
  .booking-overview h2 { font-size: 37px; margin: 8px 0; }
  .booking-overview .overview-section { padding: 8px 0; }
  .sheet-picker { margin: 0; }
  .sheet-picker .mobile-agenda { display: block; }
  /* Picking a date/slot and reviewing/confirming used to share one long scroll — dense enough
     that the confirm button was easy to miss. Reviewing now opens as its own centered overlay
     on top of the picker instead, so each step gets the full viewport to itself. */
  .booking-review-backdrop { display: none; }
  .booking-review { display: none; }
  .booking-overview.review-open .booking-review-backdrop { display: block; position: fixed; inset: 0; z-index: 30; background: rgba(7,13,37,.62); }
  /* Full screen rather than a floating card: the confirm button lives in its own fixed
     footer below a scrollable body, so a long note never pushes it out of reach. */
  .booking-overview.review-open .booking-review { display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 31; background: var(--paper-bright); border-top: 6px solid var(--citrus); box-shadow: var(--shadow); }
  .booking-overview.review-open .booking-review-head { display: flex; flex: none; justify-content: flex-end; padding: 12px 16px 0; }
  .booking-overview.review-open .booking-review-body { flex: 1 1 auto; overflow-y: auto; padding: 0 18px 18px; }
  .booking-overview.review-open .booking-review-footer { flex: none; padding: 14px 18px calc(18px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--paper-bright); box-shadow: 0 -8px 20px rgba(27,42,92,.06); }
  .dialog-backdrop { place-items: end stretch; padding: 0; }
  .dialog { width: 100%; max-height: 88vh; padding: 20px; border-top-width: 6px; }
  .dialog-grid { grid-template-columns: 1fr; }
  .span-2 { grid-column: auto; }
  .guest-capacity-field { grid-column: auto; }
  .choice-cards { grid-template-columns: 1fr; }
  .share-link-row { grid-template-columns: 1fr; }
  .share-link-row .btn { width: 100%; }
  .ticket-shell { padding: 20px 14px; }
  .ticket-top { padding: 22px 18px 18px; }
  .ticket-bottom { padding: 18px 18px 22px; }
  .ticket-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 520px) {
  .setup-range-backdrop { padding: 0; place-items: end stretch; }
  .setup-range-dialog { width: 100%; max-height: 92vh; border-top-width: 6px; }
  .setup-range-summary { grid-template-columns: 1fr 1fr; }
  .setup-range-summary span:last-child { grid-column: 1 / -1; }
  .setup-range-grid button { min-height: 38px; aspect-ratio: auto; }
  .booking-row { padding-inline: 12px; }
}

@media (max-width: 430px) {
  .party-options, .trip-stops { grid-template-columns: 1fr; }
  .trip-stops { gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}