/* ==========================================================================
   AfterGo.Party design system

   One set of tokens for every page. Type and the larger spaces are fluid:
   they grow smoothly with the screen between a phone (360px) and a laptop
   (1280px) with clamp(), so there are no jumps when a window is resized.
   Layout changes at two widths only, the same on every page:
     640px  phone → tablet (side-by-side poster and details)
     960px  tablet → desktop (panels side by side)
   Containers space their children with flex/grid `gap`, not margins on each
   element: forms and form sections --s-5, a label --s-2 above its input.
   ========================================================================== */
:root {
  color-scheme: dark;

  /* Colour */
  --bg: #0c0c0f;
  --surface: #151518;
  --surface-2: #1b1b20;
  --surface-3: #242429;
  --field: #101013;
  --line: rgba(255, 255, 255, .08);
  --line-strong: rgba(255, 255, 255, .14);
  --line-hover: rgba(255, 255, 255, .24);
  --ink: #f5f1ec;
  --ink-soft: #d6d0ca;
  --muted: #a7a2aa;
  --subtle: #8b8792;
  --accent: #ff7aa8;
  --accent-strong: #e0446c;
  --accent-tint: rgba(240, 80, 170, .15);
  --gold: #ffc06c;
  --gold-line: rgba(255, 192, 108, .45);
  --green: #84d6a4;
  --green-tint: rgba(112, 201, 148, .14);
  --red: #ff8f84;
  --violet: #d3b8f2;
  --violet-tint: rgba(150, 110, 200, .18);
  /* Actions: the logo's coral pink → violet, deep enough for white text (AA). */
  --gradient: linear-gradient(120deg, #d1306a, #b1279a 55%, #7a3be6);
  --focus-ring: 0 0 0 3px rgba(240, 100, 200, .4);

  /* Spacing (4px steps) and fluid spacing for page rhythm */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --gutter: clamp(16px, 3.2vw + 4px, 40px);
  --pad: clamp(20px, 1.6vw + 14px, 32px);
  --section-gap: clamp(20px, 2vw + 12px, 32px);
  --page-max: 1120px;

  /* Type: fixed small sizes, fluid headings */
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-body: 15px;
  --fs-md: 16px;
  --fs-lg: clamp(17px, .3vw + 16px, 19px);
  --fs-xl: clamp(20px, .6vw + 18px, 24px);
  --fs-2xl: clamp(24px, 1.2vw + 20px, 32px);
  --fs-display: clamp(30px, 2.4vw + 22px, 46px);

  /* Shape */
  --radius-sm: 10px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 18px 40px -22px rgba(0, 0, 0, .75);
  --shadow-lift: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 22px 44px -20px rgba(0, 0, 0, .85);
  --glass: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .012));

  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
}

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(55% 40% at 20% -10%, rgba(255, 61, 134, .15), transparent 70%),
    radial-gradient(45% 35% at 90% -5%, rgba(168, 85, 255, .13), transparent 70%),
    var(--bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
button, input, textarea, select { font: inherit; line-height: 1.4; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
img, video, svg { max-width: 100%; }
[hidden] { display: none !important; }
h1, h2, h3, p, ul, dl, dd, figure, pre { margin: 0; }
h1, h2, h3 {
  font-family: Manrope, system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.15;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
h1 { font-size: var(--fs-display); line-height: 1.06; letter-spacing: -.035em; }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
p { text-wrap: pretty; }
a { color: var(--accent); }
.muted { color: var(--muted); }
.subtle { color: var(--subtle); }
.eyebrow {
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1.4;
  text-transform: uppercase;
}
.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; }
::selection { color: #fff; background: #a8288f; }
/* While a signed-in visitor's session is restored: the logo and a spinner
   instead of a flash of the sign-in form (see the script in index.html). */
.boot-splash { display: none; }
.signed-in .boot-splash { display: flex; min-height: 70vh; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-5); }
.signed-in .boot-splash .brand-mark { width: auto; height: 72px; animation: glow-pulse 1.6s ease-in-out infinite; }
@keyframes glow-pulse { 50% { filter: drop-shadow(0 0 14px rgba(255, 70, 150, .55)); } }
.signed-in #guestAuth { display: none; }
.spinner { width: 34px; height: 34px; border: 3px solid var(--line-strong); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   Page shells and header
   Every page uses the same width and side gutter.
   ========================================================================== */
.page, .guest-shell, .invite-shell {
  width: min(var(--page-max), 100% - 2 * var(--gutter));
  margin: 0 auto;
  padding: var(--s-4) 0 clamp(48px, 6vw, 96px);
}
.invite-shell { width: min(1040px, 100% - 2 * var(--gutter)); }

.topbar, .page-top {
  display: flex;
  min-height: 56px;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
}
.page-top { width: 100%; margin-bottom: var(--section-gap); }
.topbar { margin-bottom: var(--s-2); }
/* The brand: the owner's glass AG mark (phi : 1) and the AfterGo.Party
   wordmark. Both images are exactly their visible ink (no empty margins), and
   every size comes from the mark's height h with the golden ratio:
   capitals h / phi^2, gap h / phi^3. The wordmark's box is centred on its
   capitals, so align-items: center lines them up with the mark. At 40px the
   mark is exactly as tall as the top-bar buttons. */
.brand {
  --brand-h: clamp(32px, 5vw + 14px, 40px);
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: calc(var(--brand-h) * .236);
  text-decoration: none;
  transition: opacity .18s ease;
}
.brand:hover { opacity: .85; }
.brand-mark { display: block; width: auto; height: var(--brand-h); flex: none; filter: drop-shadow(0 0 4px rgba(255, 70, 150, .4)); }
/* 120 : 72 is the wordmark box over its capitals. */
.brand .wordmark { display: block; width: auto; height: calc(var(--brand-h) * .382 * 120 / 72); flex: none; }
/* The header never overflows: the brand stays, the language menu shrinks
   (with "…") before anything is pushed off screen. */
.account { display: flex; min-width: 0; flex: 0 1 auto; align-items: center; justify-content: flex-end; gap: var(--s-3); }
.account > .button { flex: none; }
.account > .muted { overflow: hidden; font-size: var(--fs-sm); text-overflow: ellipsis; white-space: nowrap; }
.topbar-start { display: flex; min-width: 0; align-items: center; gap: var(--s-3); }
/* "‹ All parties": a real button in the top bar, so it reads as "go back". */
.back-button {
  display: inline-flex;
  min-height: 40px;
  flex: none;
  align-items: center;
  gap: 4px;
  padding: 0 var(--s-4) 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--ink);
  background: rgba(255, 255, 255, .05);
  font-size: var(--fs-sm);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .18s ease, background-color .18s ease;
}
.back-button:hover { border-color: var(--line-hover); background: rgba(255, 255, 255, .09); }
.back-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.2; }
.center-panel .back-button { margin-top: var(--s-2); }
/* The party page's Sign out: text on wider screens, an icon on phones, where
   the logo, "All parties", the bell and Sign out don't fit side by side. */
.sign-out svg { display: none; width: 20px; max-width: none; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.9; }
@media (max-width: 479.98px) {
  .topbar .sign-out { position: relative; width: 40px; padding: 0; }
  .sign-out svg { display: block; }
  .sign-out span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
}
/* Everything in the top bar is the same height, with the same corners. */
.topbar .button, .page-top .button { min-height: 40px; }
.topbar .icon-button, .page-top .icon-button,
.topbar .lang-picker select, .page-top .lang-picker select { border-radius: var(--radius); }
.page-notice:not(:empty) { margin-bottom: var(--s-4); }

/* Panels: the one card surface. */
.panel {
  padding: var(--pad);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--glass), var(--surface);
  box-shadow: var(--shadow);
}
.center-panel {
  display: flex;
  width: min(460px, 100%);
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  margin: clamp(24px, 6vw, 64px) auto 0;
  text-align: center;
}
.center-panel h1 { font-size: var(--fs-2xl); }
.center-panel .button { margin-top: var(--s-2); }
/* A party in its 10 minutes after Delete: the time left, big. */
.deleting-icon { color: var(--red); background: rgba(196, 64, 50, .14); }
.deleting-clock { background: linear-gradient(120deg, #ffa3c4, #ff4c9c 45%, #b06bff); -webkit-background-clip: text; background-clip: text; color: transparent; font: 800 clamp(44px, 6vw + 20px, 64px)/1 Manrope, sans-serif; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.deleting-photos { color: var(--muted); font-size: var(--fs-sm); }
.deleting-view .hint { max-width: 36ch; }

/* ==========================================================================
   Buttons and links
   ========================================================================== */
.button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 0 var(--s-5);
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, filter .18s ease, transform .18s ease;
}
.button:hover { transform: translateY(-1px); }
.button:active { transform: none; }
.button:disabled { cursor: progress; opacity: .6; transform: none; }
.button.primary { color: #fff; background: var(--gradient); box-shadow: 0 8px 22px -8px rgba(200, 60, 170, .78), inset 0 1px 0 rgba(255, 255, 255, .22); }
.button.primary:hover { filter: brightness(1.08); }
.button.quiet { border-color: var(--line-strong); color: var(--ink); background: rgba(255, 255, 255, .05); }
.button.quiet:hover { border-color: var(--line-hover); background: rgba(255, 255, 255, .09); }
.button.danger-quiet { border-color: rgba(255, 143, 132, .3); color: var(--red); background: rgba(196, 64, 50, .08); }
.button.danger-quiet:hover { border-color: var(--red); background: rgba(196, 64, 50, .18); }
.button.danger { color: #fff; background: #b3261e; box-shadow: 0 6px 18px -6px rgba(179, 38, 30, .7), inset 0 1px 0 rgba(255, 255, 255, .16); }
.button.danger:hover { background: #c42d24; }
.button.approve { border-color: rgba(112, 201, 148, .5); color: var(--green); background: var(--green-tint); }
.button.approve:hover { border-color: var(--green); background: rgba(112, 201, 148, .24); }
.button.full { width: 100%; min-height: 52px; font-size: var(--fs-md); }
.text-button {
  padding: var(--s-1) 0;
  border: 0;
  color: var(--accent);
  background: none;
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: 700;
  text-decoration: none;
}
.text-button:hover { text-decoration: underline; text-underline-offset: 3px; }
.text-button.inline { display: inline; padding: 0; font-size: inherit; }
.icon-button {
  display: grid;
  width: 40px;
  height: 40px;
  flex: none;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--ink);
  background: rgba(255, 255, 255, .05);
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
}
.icon-button:hover { border-color: var(--line-hover); background: rgba(255, 255, 255, .1); }
/* The notifications bell in the party page's top bar: gold when on, with a
   small coral dot inviting a tap while off. */
.push-button { position: relative; color: var(--muted); }
.push-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.push-button[data-state="on"] { border-color: rgba(255, 180, 90, .45); color: var(--gold); background: rgba(255, 180, 90, .12); }
.push-button[data-state="on"] svg path:first-child { fill: currentColor; fill-opacity: .25; }
.push-button[data-state="off"]::after { content: ""; position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; border: 2px solid var(--surface); border-radius: 50%; background: var(--accent); }
.push-modal { width: min(460px, calc(100% - 2 * var(--gutter))); }
.push-modal > .modal-intro { margin-top: var(--s-2); line-height: 1.6; }
.push-modal > .notice:not(:empty) { margin-top: var(--s-3); }
.small-action {
  min-height: 36px;
  padding: 0 var(--s-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  background: rgba(255, 255, 255, .04);
  cursor: pointer;
  font-size: var(--fs-xs);
  font-weight: 700;
  white-space: nowrap;
}
.small-action:hover { border-color: var(--line-hover); color: var(--ink); background: rgba(255, 255, 255, .08); }
.small-action.danger { border-color: rgba(255, 143, 132, .3); color: var(--red); }
.small-action.danger:hover { border-color: var(--red); color: var(--red); background: rgba(196, 64, 50, .14); }
.toolbar { display: flex; flex-wrap: wrap; gap: var(--s-2); }
:is(.button, .text-button, .icon-button, .small-action, .party-card, .guest-event-card, .guest-photo, .avatar,
  .lang-chip, .arrival-row, .brand, .back-button, .dash-tab, summary, .pos-range):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
/* The field a message points at (H.flagField), until it changes. */
.field-error:not(input, textarea, select) { border-radius: var(--radius); outline: 2px solid var(--red); outline-offset: 4px; }
:is(input, textarea, select).field-error { border-color: var(--red); }

/* ==========================================================================
   Forms
   ========================================================================== */
form, .form-stack { display: flex; flex-direction: column; gap: var(--s-5); }
label { display: flex; flex-direction: column; gap: var(--s-2); color: var(--ink-soft); font-size: var(--fs-sm); font-weight: 600; }
.field { display: flex; flex-direction: column; gap: var(--s-2); }
.field-label { display: block; color: var(--ink-soft); font-size: var(--fs-sm); font-weight: 600; }
.optional { color: var(--subtle); font-size: var(--fs-xs); font-weight: 500; }
.req { color: var(--accent); }
input, textarea, select {
  width: 100%;
  min-height: 48px;
  padding: var(--s-3) 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--ink);
  background-color: var(--field);
  /* 16px stops phones zooming in when a field is focused. */
  font-size: var(--fs-md);
  font-weight: 500;
  transition: border-color .15s, box-shadow .15s;
}
input::placeholder, textarea::placeholder { color: #85818b; }
input:hover, textarea:hover, select:hover { border-color: var(--line-hover); }
/* The focus ring sits inside the field's own size, so nothing shifts. */
input:focus, textarea:focus, select:focus { border-color: var(--accent); outline: none; box-shadow: var(--focus-ring); }
textarea { min-height: 88px; resize: vertical; }
select {
  padding-right: 40px;
  background: var(--field) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23aaa5b5' stroke-width='1.6' fill='none'/%3E%3C/svg%3E") no-repeat right 15px center;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  text-overflow: ellipsis;
}
/* Windows draws option lists on white; keep them dark and readable. */
select option, select optgroup { background-color: #24252f; color: #f4f1f6; }
select option:checked { background-color: #3a3440; }
input[type="checkbox"] { width: 18px; min-height: 18px; height: 18px; accent-color: var(--accent); }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.hint { color: var(--muted); font-size: var(--fs-xs); font-weight: 400; line-height: 1.55; }
.field-hint, .privacy-note { margin: 0; }
.privacy-note { text-align: center; }
.notice { color: var(--muted); font-size: var(--fs-sm); line-height: 1.5; }
.notice:empty { display: none; }
.notice.success { color: var(--green); }
.notice.error { color: var(--red); }
.step-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3); margin-top: calc(var(--s-2) - var(--s-5)); }

/* Password with an eye button to show what was typed. */
.password-field { position: relative; display: block; }
.password-field input { padding-right: 52px; }
.password-toggle {
  position: absolute;
  top: 50%;
  right: 4px;
  display: grid;
  width: 44px;
  height: 40px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  transform: translateY(-50%);
}
.password-toggle:hover { color: var(--ink); background: rgba(255, 255, 255, .06); }
.password-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
.password-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.password-toggle .icon-eye-off, .password-toggle[aria-pressed="true"] .icon-eye { display: none; }
.password-toggle[aria-pressed="true"] .icon-eye-off { display: block; }
.password-toggle[aria-pressed="true"] { color: var(--accent); }

/* Choice tiles (co-host access): same-size tiles, the chosen one gets a
   coral border, a tint and a check mark. */
.lang-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s-2); }
.lang-chips.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lang-chip {
  position: relative;
  display: flex;
  min-height: 60px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  padding: 10px 30px 10px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--ink);
  background: var(--field);
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.3;
  text-align: left;
  transition: border-color .15s, background-color .15s;
}
.lang-chip:hover { border-color: var(--line-hover); }
.lang-chip .chip-sub { color: var(--muted); font-size: var(--fs-xs); font-weight: 500; }
.lang-chip[aria-checked="true"] { border-color: var(--accent); background: var(--accent-tint); box-shadow: inset 0 0 0 1px var(--accent); }
.lang-chip[aria-checked="true"]::after {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  width: 16px;
  height: 16px;
  place-items: center;
  border-radius: 50%;
  color: #21151a;
  background: var(--accent);
  content: "✓";
  font-size: 10px;
  font-weight: 800;
}

/* Language menus */
.lang-picker { min-width: 0; flex: 0 1 auto; flex-direction: row; }
.lang-picker select {
  width: auto;
  min-width: 0;
  max-width: min(200px, 100%);
  height: 40px;
  min-height: 40px;
  padding: 6px 34px 6px var(--s-3);
  border-radius: var(--radius-sm);
  background-color: rgba(255, 255, 255, .05);
  background-position: right 13px center;
  font-size: var(--fs-sm);
  font-weight: 600;
}
.invite-language-select { max-width: 360px; font-weight: 600; }
.inline-select { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--s-2); color: var(--muted); font-weight: 500; }
.inline-select select { width: auto; min-height: 40px; padding: 6px 34px 6px var(--s-3); font-size: var(--fs-sm); }

/* Short forms on the party and admin pages. */
.invite-form { max-width: 560px; }
.invite-form > .button { align-self: flex-start; min-height: 48px; padding: 0 var(--s-6); }

/* ==========================================================================
   Sign-in
   ========================================================================== */
.auth-shell { display: flex; min-height: calc(100vh - 80px); flex-direction: column; align-items: center; justify-content: center; gap: var(--s-4); }
.auth-shell > .page-top { width: min(440px, 100%); margin-bottom: 0; justify-content: flex-end; }
/* Sign-in: the stacked lockup, laid out in one box so nothing drifts. The
   wordmark is 1000 units wide; the slogan is tracked to exactly that width;
   the mark (phi : 1) is cap height x phi^3 tall and centred; both gaps are
   cap height / phi. Positions are percentages of the box (see
   lockup-type.svg). The wordmark is 440px / phi wide, the card's golden part. */
.auth-hero { display: flex; justify-content: center; margin-bottom: var(--s-3); }
.hero-lockup { position: relative; width: clamp(240px, 70vw, 272px); aspect-ratio: 1000 / 741.74; }
.hero-mark { position: absolute; top: 0; left: 12.329%; width: 75.343%; aspect-ratio: 1.618034; }
.hero-mark::before, .hero-mark::after { content: ""; position: absolute; inset: 0; background: url("logo.webp") center / 100% 100% no-repeat; }
/* The glow is the mark itself, blurred, so it keeps the ribbon's colours. */
.hero-mark::before { opacity: .6; filter: blur(7px) saturate(1.25); }
.hero-type { position: absolute; bottom: 0; left: 0; width: 100%; height: auto; }
/* Short screens (small phones, landscape): a smaller logo, so Sign in shows. */
@media (max-height: 700px) {
  .hero-lockup { width: 190px; }
}
.auth-card { display: flex; width: min(440px, 100%); flex-direction: column; gap: var(--s-3); }
.auth-card h1 { font-size: var(--fs-2xl); }
.auth-card > .muted { font-size: var(--fs-sm); line-height: 1.6; }
.auth-card form { margin-top: var(--s-3); }
.auth-foot { max-width: 440px; font-size: var(--fs-sm); text-align: center; }

/* ==========================================================================
   Posters: an Instagram portrait (4:5) frame, the whole image shown over a
   blurred copy of itself.
   ========================================================================== */
.poster-frame {
  position: relative;
  display: grid;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: #0b0b10;
  box-shadow: var(--shadow-lift);
  isolation: isolate;
}
.poster-frame .poster-backdrop {
  position: absolute;
  inset: -30px;
  z-index: -1;
  width: calc(100% + 60px);
  height: calc(100% + 60px);
  object-fit: cover;
  filter: blur(26px) brightness(.45) saturate(1.15);
}
.poster-frame .poster-image, .poster-frame video { width: 100%; height: 100%; object-fit: contain; }
.poster-frame.empty { background: radial-gradient(circle at 78% 16%, rgba(233, 130, 104, .18), transparent 40%), linear-gradient(145deg, #2e2b35, #1a1b23 66%, #261f27); }
.poster-frame.empty span {
  display: grid;
  width: min(34%, 140px);
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 50%;
  color: #ffb69a;
  background: rgba(255, 255, 255, .05);
  font: 800 clamp(44px, 8vw, 76px) Manrope, sans-serif;
}

/* Shared bits of a party */
.event-date { color: var(--accent); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; line-height: 1.4; text-transform: uppercase; }
.event-meta { color: var(--ink-soft); }
.event-description { color: var(--muted); font-size: var(--fs-sm); line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
/* Tags: every role and status uses the same pill (height, small caps,
   spacing); only the colour says which it is. */
.role-badge, .ended-badge, .status-badge, .report-chip {
  display: inline-flex;
  min-height: 22px;
  align-self: flex-start;
  align-items: center;
  gap: 5px;
  padding: 0 9px;
  border: 1px solid transparent;
  border-radius: 99px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.role-badge { border-color: rgba(255, 61, 134, .38); color: #ff9dbb; background: rgba(255, 61, 134, .12); }
.role-badge.full { border-color: rgba(255, 143, 92, .4); color: #ffb48f; background: rgba(255, 143, 92, .12); }
.role-badge.pickup { border-color: rgba(196, 158, 225, .38); color: var(--violet); background: var(--violet-tint); }
.role-badge.guest { border-color: rgba(120, 180, 255, .38); color: #a9cdff; background: rgba(120, 180, 255, .12); }
.ended-badge { border-color: rgba(255, 255, 255, .14); color: #c0bbc5; background: rgba(255, 255, 255, .06); }

/* ==========================================================================
   Dashboard (/)
   ========================================================================== */
.guest-topbar { margin-bottom: var(--section-gap); }
.profile-hero {
  position: relative;
  display: flex;
  padding: var(--pad);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--glass), var(--surface);
  box-shadow: var(--shadow);
  align-items: center;
  gap: clamp(16px, 2vw, 24px);
  margin-bottom: var(--section-gap);
  overflow: hidden;
}
.profile-hero::after {
  position: absolute;
  top: -120px;
  right: 8%;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: rgba(215, 125, 104, .12);
  content: "";
  filter: blur(40px);
  pointer-events: none;
}
.profile-hero > * { position: relative; z-index: 1; }
.profile-hero > div { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: var(--s-1); }
.profile-hero h1 { font-size: var(--fs-2xl); }
.profile-hero .muted { font-size: var(--fs-sm); }
.profile-hero .button { flex: none; }
.avatar {
  display: grid;
  flex: none;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 50%;
  place-items: center;
  color: #fff;
  background: var(--gradient);
  cursor: pointer;
  font: 800 26px Manrope, sans-serif;
}
.avatar:disabled { cursor: default; }
.avatar.large { width: clamp(60px, 4vw + 44px, 76px); height: clamp(60px, 4vw + 44px, 76px); box-shadow: 0 0 0 4px rgba(255, 255, 255, .07); }
.avatar.medium { width: 52px; height: 52px; font-size: 20px; }
.avatar.small { width: 40px; height: 40px; font-size: 15px; cursor: default; }
.avatar.medium { cursor: default; }
.avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }

/* Hosting / Invited tabs */
.dash-tabs {
  display: flex;
  width: min(100%, 480px);
  gap: 4px;
  margin-bottom: var(--s-5);
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}
.dash-tab {
  position: relative;
  display: inline-flex;
  min-width: 0;
  min-height: 44px;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: 700;
  transition: color .18s ease, background-color .18s ease;
}
.dash-tab:hover { color: var(--ink); background: rgba(255, 255, 255, .04); }
.dash-tab[aria-selected="true"] { border-color: rgba(240, 110, 200, .3); color: #fff4ef; background: var(--accent-tint); }
.dashboard-tab-icon { width: 18px; min-width: 18px; height: 18px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.dash-tab[aria-selected="true"] .dashboard-tab-icon { color: #ff9ccb; }
.dashboard-tab-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tab-count {
  display: inline-flex;
  min-width: 22px;
  height: 20px;
  flex: none;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  border-radius: 99px;
  color: var(--ink-soft);
  background: rgba(255, 255, 255, .08);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.tab-count:empty { display: none; }
.dash-tab[aria-selected="true"] .tab-count { color: #ffc0b0; background: rgba(209, 102, 82, .22); }
.dash-tabs:not([hidden]) ~ #hostingSection #hostingHeading,
.dash-tabs:not([hidden]) ~ #invitedSection #invitedHeadingRow { display: none; }

.dash-section { display: flex; flex-direction: column; gap: var(--s-4); margin-bottom: var(--s-10); }
.dash-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-4); }
.dash-heading:not(:has(> :not([hidden]):not(:empty))) { display: none; }
.dash-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* Party rows: Hosting and Invited look the same. One column on phones,
   then as many ~360px columns as fit. */
.party-grid, .guest-event-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: var(--s-4);
}
/* Poster and details side by side; the footer (role and "View party") runs
   along the bottom of the whole card, so everything lines up. */
.party-card, .guest-event-card {
  display: grid;
  min-width: 0;
  grid-template-areas: "cover info" "foot foot";
  grid-template-columns: 88px minmax(0, 1fr);
  /* Footers line up across a row of cards. */
  grid-template-rows: 1fr auto;
  align-items: start;
  gap: var(--s-3) var(--s-4);
  padding: var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  color: inherit;
  background: var(--glass), var(--surface);
  box-shadow: var(--shadow);
  cursor: pointer;
  font: inherit;
  text-align: left;
  text-decoration: none;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.party-card:hover, .guest-event-card:hover { transform: translateY(-2px); border-color: var(--line-hover); box-shadow: var(--shadow-lift); }
.party-card .party-cover, .guest-event-card .guest-event-cover {
  display: grid;
  width: 100%;
  grid-area: cover;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #0b0b10;
}
.party-cover img, .party-cover video, .guest-event-cover img, .guest-event-cover video { width: 100%; height: 100%; object-fit: contain; }
.party-cover.empty, .guest-event-cover.empty { background: radial-gradient(circle at 78% 18%, rgba(240, 110, 200, .16) 0 10%, transparent 40%), linear-gradient(145deg, #312d38, #1f2028); }
.party-cover.empty span, .guest-event-cover.empty span {
  display: grid;
  width: 36px;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 50%;
  color: #f5b0a0;
  background: rgba(255, 255, 255, .05);
  font: 800 19px Manrope, sans-serif;
}
.party-card-info, .guest-event-summary {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 2px 0;
}
.party-card .party-date, .guest-event-summary .party-date {
  max-width: 100%;
  color: var(--gold);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.35;
  text-transform: uppercase;
}
.party-card h3, .guest-event-title {
  max-width: 100%;
  color: var(--ink);
  font: 800 var(--fs-lg)/1.25 Manrope, sans-serif;
  letter-spacing: -.02em;
  overflow-wrap: anywhere;
}
/* The schedule (H.schedule): labels in one column, times lined up beside
   them, and "next day" for times after midnight. */
.party-schedule {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: baseline;
  gap: 3px var(--s-3);
  margin: 0;
  line-height: 1.4;
}
.party-schedule dt { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.party-schedule dd { display: flex; min-width: 0; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s-2); margin: 0; }
.schedule-time { color: var(--ink-soft); font: 700 var(--fs-sm) Manrope, sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap; }
.next-day { color: var(--muted); font-size: var(--fs-xs); white-space: nowrap; }
.party-card-info .party-schedule, .guest-event-summary .party-schedule { margin-top: 2px; }
.party-card-info, .guest-event-summary { grid-area: info; }
.card-footer {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  grid-area: foot;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
}
.card-badges { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: 6px; }
.guest-event-cta {
  display: inline-flex;
  min-height: 34px;
  flex: none;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  padding: 0 6px 0 14px;
  border-radius: 99px;
  color: #fff;
  background: var(--gradient);
  font-size: var(--fs-xs);
  font-weight: 700;
  white-space: nowrap;
  transition: filter .18s ease;
}
.guest-event-arrow { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; background: rgba(0, 0, 0, .22); font-size: 17px; line-height: 1; transition: transform .18s ease; }
.party-card:hover .guest-event-cta, .guest-event-card:hover .guest-event-cta { filter: brightness(1.1); }
/* Check in now / show the QR code: a gold ring says "this is for right now". */
.guest-event-cta.now { box-shadow: 0 0 0 2px rgba(255, 192, 108, .75), 0 8px 20px -8px rgba(255, 150, 80, .9); }
/* A party the host didn't let the guest in to: a notice until closed. */
.refused-list { display: flex; flex-direction: column; gap: var(--s-2); }
.refused-list:empty { display: none; }
.refused-notice { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-2) var(--s-2) var(--s-4); border: 1px solid rgba(255, 143, 132, .4); border-radius: var(--radius); color: #ffd0ca; background: rgba(196, 64, 50, .12); font-size: var(--fs-sm); font-weight: 600; line-height: 1.45; }
.refused-notice p { flex: 1; min-width: 0; }
/* Deleting the account: out of the way, under the form's buttons. */
.danger-zone { display: flex; justify-content: center; padding-top: var(--s-4); border-top: 1px solid var(--line); }
.text-button.danger-link { color: var(--red); }
.party-card:hover .guest-event-arrow, .guest-event-card:hover .guest-event-arrow { transform: translateX(2px); }
/* Upcoming parties get a gold outline; ended ones are greyed and listed last. */
.party-card.upcoming, .guest-event-card.upcoming { border-color: var(--gold-line); box-shadow: 0 0 0 1px rgba(255, 192, 108, .12), var(--shadow); }
.party-card.upcoming:hover, .guest-event-card.upcoming:hover { border-color: var(--gold); }
/* Ended parties are greyed but stay readable: the poster and action fade,
   the text keeps enough contrast. */
.party-card.ended, .guest-event-card.ended { border-color: var(--line); box-shadow: none; }
.party-card.ended :is(.party-cover, .guest-event-cover, .guest-event-cta),
.guest-event-card.ended :is(.guest-event-cover, .guest-event-cta) { opacity: .55; filter: grayscale(.9); }
.party-card.ended :is(h3, .guest-event-title), .guest-event-card.ended .guest-event-title { color: var(--ink-soft); }
.party-card.ended .party-date, .guest-event-card.ended .party-date { color: var(--muted); }

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-12) var(--s-5);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .015);
  text-align: center;
}
.empty-state h2, .empty-state h3 { font-size: var(--fs-lg); }
.empty-state .muted { max-width: 44ch; }
.empty-icon { display: inline-grid; width: 52px; height: 52px; margin-bottom: var(--s-2); place-items: center; border-radius: 16px; color: #f7a8d2; background: rgba(240, 110, 200, .12); font-size: 24px; }
.done-icon { color: var(--green); background: var(--green-tint); }
.empty-line { color: var(--muted); font-size: var(--fs-sm); }

/* ==========================================================================
   Invited party details (dialog on the dashboard)
   Phones: poster, then text. Wider: poster on the left, text on the right.
   ========================================================================== */
.modal.invited-party-dialog { width: min(880px, calc(100% - 2 * var(--gutter))); padding: 0; overflow: hidden; }
.invited-party-dialog[open] { display: grid; grid-template-columns: minmax(0, 1fr); max-height: min(92vh, 900px); max-height: min(92dvh, 900px); overflow-y: auto; }
.invited-party-close { position: absolute; top: var(--s-3); right: var(--s-3); z-index: 3; border-color: rgba(255, 255, 255, .3); background: rgba(14, 15, 20, .6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.invited-party-media { padding: var(--s-3) var(--s-3) 0; }
.invited-party-media .poster-frame { border-radius: var(--radius-lg); box-shadow: none; }
.invited-party-body { display: flex; min-width: 0; flex-direction: column; gap: var(--s-5); padding: var(--s-5) var(--pad) var(--pad); }
.invited-party-caption { display: flex; flex-direction: column; gap: var(--s-2); }
.invited-party-date { color: var(--gold); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.invited-party-title { font-size: var(--fs-2xl); }
.invited-party-caption .party-schedule { margin-top: var(--s-1); }
.invited-party-caption .schedule-time, .event-meta .schedule-time { font-size: var(--fs-md); }
.invited-party-description { margin-top: var(--s-1); color: var(--muted); font-size: var(--fs-sm); line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.invited-party-details { display: flex; flex-direction: column; gap: var(--s-4); }
.party-location { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-1); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.address-label { color: var(--gold); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.address-text, .party-location .muted { color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.party-location .text-button { margin-top: 2px; }

/* Check-in states */
.checkin-text { color: var(--muted); font-size: var(--fs-sm); line-height: 1.5; }
.checkin-button { min-height: 54px; font-size: var(--fs-md); }
.checkin-box.status { display: flex; align-items: center; gap: var(--s-3); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.checkin-status-icon { display: grid; width: 36px; height: 36px; flex: none; place-items: center; border-radius: 50%; color: var(--gold); background: rgba(255, 180, 90, .14); font-size: 19px; line-height: 1; }
.checkin-box.status .checkin-text { color: var(--ink-soft); }
.checkin-box.done { padding: 14px var(--s-4); border: 1px solid rgba(112, 201, 148, .35); border-radius: var(--radius); background: var(--green-tint); }
.checkin-box.done .checkin-text { color: #b5ebca; font-weight: 700; }
.checkin-box.ticket { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); padding: var(--s-5); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); background: var(--surface-2); text-align: center; }
.ticket-title { font: 800 var(--fs-lg) Manrope, sans-serif; }
.qr-image { width: min(220px, 64vw); height: auto; padding: 10px; border-radius: var(--radius); background: #fff; image-rendering: pixelated; }
/* The spacing after the last letter is balanced on the left, so the code
   sits in the middle. */
.ticket-code { padding-left: .22em; font: 800 30px Manrope, sans-serif; letter-spacing: .22em; }

/* ==========================================================================
   Invitation page
   Phones: one column. From 720px: poster on the left (2 parts), the
   invitation on the right (3 parts), so both grow together.
   ========================================================================== */
.invite-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); width: min(480px, 100%); margin: 0 auto; }
.invite-poster { min-width: 0; }
.invite-panel { display: flex; min-width: 0; flex-direction: column; }
.invite-head { display: flex; flex-direction: column; gap: var(--s-2); }
/* The party leads: a warm hello, the date in gold, then its name large. */
.invite-hello { color: var(--ink-soft); font-size: var(--fs-md); font-weight: 600; }
.invite-date { margin-top: var(--s-1); color: var(--gold); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; line-height: 1.35; text-transform: uppercase; }
.invite-party { margin-bottom: var(--s-1); font: 800 var(--fs-display)/1.08 Manrope, sans-serif; letter-spacing: -.03em; overflow-wrap: anywhere; text-wrap: balance; }
/* No poster: a short band with the party's name instead of an empty frame. */
.invite-band { display: grid; min-height: 120px; padding: var(--s-6) var(--s-5); place-items: center; border-radius: var(--radius-xl); color: #fff; background: var(--gradient); font: 800 var(--fs-xl)/1.15 Manrope, sans-serif; text-align: center; text-wrap: balance; }
/* "Is this email right?" before a new account. */
.email-confirm .step-title { color: #fbe3a6; font-size: var(--fs-md); }
/* Done: which party they joined, and when. */
.done-party { display: flex; width: 100%; flex-direction: column; align-items: center; gap: var(--s-2); padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); }
.done-party:empty { display: none; }
.done-party-title { font: 800 var(--fs-lg)/1.2 Manrope, sans-serif; text-align: center; }
/* Phones: a bar at the bottom leads from the poster to the form. */
.join-bar { position: fixed; z-index: 30; right: 0; bottom: 0; left: 0; padding: var(--s-3) var(--gutter) calc(var(--s-3) + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: rgba(12, 12, 15, .92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.join-bar[hidden] { display: none; }
body.has-join-bar { padding-bottom: 88px; }
.invite-head .event-description { margin-top: var(--s-2); }
.cohost-box { display: flex; flex-direction: column; gap: 6px; margin-top: var(--s-3); padding: var(--s-4); border: 1px solid rgba(180, 139, 200, .3); border-radius: var(--radius); background: var(--violet-tint); }
.cohost-box p { line-height: 1.55; }
.cohost-box p + p { color: var(--muted); font-size: var(--fs-sm); }

/* Each step is a form: heading, then fields --s-5 apart. */
.step { margin-top: var(--s-8); padding-top: var(--s-8); border-top: 1px solid var(--line); }
.step-head { display: flex; flex-direction: column; gap: 6px; }
.step-title { font-size: var(--fs-xl); }
.step-intro { color: var(--muted); font-size: var(--fs-sm); line-height: 1.6; }
.step-section { margin-top: var(--s-3); margin-bottom: calc(var(--s-3) - var(--s-5)); }

/* Position: first the 🏳️‍🌈 question, then (on Yes) the slider from 0
   (bottom) to 1 (top), with a gradient fill up to a glowing thumb, a tick per
   step, and "Others · Side". The number and words pop when they change. */
.seg.pos-ask { margin-bottom: 0; }
.pos-box {
  --pos: 0;
  --thumb: 28px;
  display: grid;
  gap: var(--s-2);
  padding: var(--s-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--field);
  transition: border-color .25s ease, box-shadow .25s ease;
  animation: pos-in .28s ease-out;
}
.pos-box[data-unset="0"] { border-color: rgba(240, 110, 200, .42); box-shadow: 0 16px 36px -24px rgba(255, 61, 134, .75); }
.pos-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-2); }
.pos-num {
  min-width: 2ch;
  background: linear-gradient(120deg, #ffa3c4, #ff4c9c 45%, #b06bff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font: 800 34px/1 Manrope, sans-serif;
  font-variant-numeric: tabular-nums;
}
.pos-text { min-width: 0; text-align: right; transform-origin: right center; }
.pos-word { color: var(--ink); font-size: var(--fs-body); font-weight: 700; }
.pos-sub { margin-top: 2px; color: var(--muted); font-size: var(--fs-xs); font-weight: 500; }
.pos-box[data-unset="1"] .pos-num { background: none; color: var(--subtle); }
.pos-box[data-unset="1"] .pos-word { color: var(--muted); font-weight: 600; }
.pos-box.pop :is(.pos-num, .pos-text) { animation: pos-pop .34s cubic-bezier(.2, .9, .3, 1.35); }
.pos-track { position: relative; transition: opacity .2s ease; }
input[type="range"].pos-range {
  display: block;
  width: 100%;
  height: 40px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  touch-action: pan-y;
  -webkit-appearance: none;
  appearance: none;
}
input[type="range"].pos-range:focus { box-shadow: none; }
.pos-range::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 99px;
  background:
    linear-gradient(90deg, #ff4c9c, #c13cf0 70%, #8b45ff) 0 0 / calc(var(--thumb) / 2 + (100% - var(--thumb)) * var(--pos)) 100% no-repeat,
    rgba(255, 255, 255, .1);
}
.pos-range::-moz-range-track { height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .1); }
.pos-range::-moz-range-progress { height: 8px; border-radius: 99px; background: linear-gradient(90deg, #ff4c9c, #c13cf0 70%, #8b45ff); }
.pos-range::-webkit-slider-thumb {
  box-sizing: border-box;
  width: var(--thumb);
  height: var(--thumb);
  margin-top: calc((8px - var(--thumb)) / 2);
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--gradient);
  box-shadow: 0 0 0 6px rgba(255, 76, 156, .2), 0 6px 18px -2px rgba(176, 43, 255, .65);
  transition: transform .18s ease, box-shadow .18s ease;
  -webkit-appearance: none;
  appearance: none;
}
.pos-range::-moz-range-thumb {
  box-sizing: border-box;
  width: var(--thumb);
  height: var(--thumb);
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--gradient);
  box-shadow: 0 0 0 6px rgba(255, 76, 156, .2), 0 6px 18px -2px rgba(176, 43, 255, .65);
  transition: transform .18s ease, box-shadow .18s ease;
}
.pos-range:active::-webkit-slider-thumb { transform: scale(1.14); box-shadow: 0 0 0 10px rgba(255, 76, 156, .24), 0 8px 22px -2px rgba(176, 43, 255, .75); }
.pos-range:active::-moz-range-thumb { transform: scale(1.14); box-shadow: 0 0 0 10px rgba(255, 76, 156, .24), 0 8px 22px -2px rgba(176, 43, 255, .75); }
/* Not chosen yet: a grey thumb that softly pulses, asking to be moved. */
.pos-box[data-unset="1"] .pos-range::-webkit-slider-thumb { border-color: var(--muted); background: var(--surface-3); animation: pos-nudge 1.8s ease-out infinite; }
.pos-box[data-unset="1"] .pos-range::-moz-range-thumb { border-color: var(--muted); background: var(--surface-3); animation: pos-nudge 1.8s ease-out infinite; }
/* No fill until a position is chosen, and none for Side. */
.pos-box:is([data-unset="1"], [data-side="1"]) .pos-range::-webkit-slider-runnable-track { background: rgba(255, 255, 255, .1); }
.pos-box:is([data-unset="1"], [data-side="1"]) .pos-range::-moz-range-progress { background: transparent; }
.pos-ticks { position: absolute; top: calc(50% + 10px); right: calc(var(--thumb) / 2 - 2px); left: calc(var(--thumb) / 2 - 2px); display: flex; justify-content: space-between; pointer-events: none; }
.pos-tick { width: 4px; height: 4px; border-radius: 50%; background: rgba(255, 255, 255, .2); transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.pos-tick.on { background: #ff7aa8; }
.pos-tick.now { background: #fff; box-shadow: 0 0 8px rgba(255, 122, 168, .95); transform: scale(1.5); }
.pos-scale { display: flex; justify-content: space-between; gap: var(--s-2); color: var(--subtle); font-size: 11px; font-weight: 500; transition: opacity .2s ease; }
.pos-box[data-side="1"] :is(.pos-track, .pos-scale) { opacity: .38; }
.pos-side {
  display: flex;
  width: 100%;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--ink-soft);
  background: var(--surface-2);
  cursor: pointer;
  text-align: left;
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.pos-side:hover { border-color: var(--line-hover); }
.pos-side:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.pos-side-mark { position: relative; width: 22px; height: 22px; flex: none; border: 2px solid var(--line-hover); border-radius: 50%; transition: background-color .2s ease, border-color .2s ease; }
.pos-side-text { display: grid; min-width: 0; gap: 2px; }
.pos-side-title { color: inherit; font-size: var(--fs-sm); font-weight: 700; }
.pos-side-sub { color: var(--muted); font-size: var(--fs-xs); }
.pos-side[aria-pressed="true"] { border-color: rgba(240, 110, 200, .55); color: var(--ink); background: var(--accent-tint); box-shadow: 0 12px 28px -20px rgba(255, 61, 134, .85); }
.pos-side[aria-pressed="true"] .pos-side-mark { border-color: transparent; background: var(--gradient); }
.pos-side[aria-pressed="true"] .pos-side-mark::after { content: ""; position: absolute; top: 4px; left: 7px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
@keyframes pos-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes pos-pop { from { opacity: .35; transform: scale(.82); } to { opacity: 1; transform: none; } }
@keyframes pos-nudge { 0% { box-shadow: 0 0 0 0 rgba(255, 122, 168, .5); } 70%, 100% { box-shadow: 0 0 0 12px rgba(255, 122, 168, 0); } }

/* Social handles */
.social-inputs { display: grid; gap: var(--s-2); }
.social-input { flex-direction: row; align-items: stretch; gap: 0; }
.social-tag { display: grid; flex: none; width: 82px; place-items: center; border: 1px solid var(--line-strong); border-right: 0; border-radius: var(--radius) 0 0 var(--radius); color: var(--muted); background: var(--surface-2); font-size: var(--fs-xs); font-weight: 700; }
.social-input input { min-width: 0; border-radius: 0 var(--radius) var(--radius) 0; }

/* Face photo */
.face-picker { display: flex; align-items: center; gap: var(--s-4); }
.face-preview { display: grid; flex: none; width: 104px; height: 104px; overflow: hidden; place-items: center; border: 1px dashed var(--line-hover); border-radius: var(--radius-xl); color: var(--subtle); background: var(--field); font-size: 38px; }
.face-preview.has-photo { border-style: solid; border-color: var(--accent); }
.face-preview img { width: 100%; height: 100%; object-fit: cover; }
.face-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.face-actions .hint { flex-basis: 100%; margin-top: var(--s-1); }

/* ==========================================================================
   Party page (host.html)
   Phones: poster, then details. From 640px: poster on the left, details
   beside it. The poster stays clean; the title and times sit next to it.
   ========================================================================== */
.detail-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); align-items: start; margin-bottom: var(--section-gap); }
.detail-poster { width: min(420px, 100%); margin: 0 auto; }
.detail-info { display: flex; min-width: 0; flex-direction: column; gap: var(--s-5); }
.detail-head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); }
.detail-head h1 { font-size: var(--fs-display); }
.schedule-list { display: grid; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.schedule-list li { display: flex; min-height: 44px; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-2) 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: var(--fs-sm); }
.schedule-list strong { color: var(--ink); font: 700 var(--fs-md) Manrope, sans-serif; font-variant-numeric: tabular-nums; text-align: right; }
.ended-note { padding: var(--s-3) 14px; border: 1px solid var(--line-strong); border-radius: var(--radius); color: var(--muted); background: var(--surface-2); font-size: var(--fs-sm); line-height: 1.5; }
.detail-facts { display: flex; flex-direction: column; gap: var(--s-4); }
.fact { display: flex; flex-direction: column; gap: var(--s-1); }
.fact dt { color: var(--gold); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.fact dd { color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.detail-address.missing { color: var(--muted); }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
.stats.five > :last-child { grid-column: 1 / -1; }
.stat { display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-2); padding: 14px var(--s-4); border: 1px solid var(--line); border-radius: var(--radius); color: var(--muted); background: var(--surface); font-size: var(--fs-xs); font-weight: 600; line-height: 1.35; }
.stat strong { color: var(--ink); font: 800 28px/1 Manrope, sans-serif; font-variant-numeric: tabular-nums; }

/* Sections: heading block, then content --s-5 apart. */
.section-panel { display: flex; min-width: 0; flex-direction: column; gap: var(--s-5); margin-bottom: var(--section-gap); }
.section-panel.plain { padding: 0; border: 0; background: none; box-shadow: none; }
.section-heading { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-3) var(--s-4); }
.section-heading > div { display: flex; min-width: 0; flex-direction: column; gap: var(--s-2); }
.section-heading h1 { font-size: var(--fs-2xl); }
.section-heading h2 { font-size: var(--fs-xl); }
.section-intro { max-width: 64ch; font-size: var(--fs-sm); line-height: 1.6; }
.list-heading { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.section-panel > .list-heading { margin-bottom: calc(var(--s-2) - var(--s-5)); }

.invite-result { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-5); border: 1px solid rgba(255, 130, 120, .35); border-radius: var(--radius-lg); background: rgba(232, 64, 102, .1); }
.invite-message { color: var(--ink); font: 14px/1.6 "DM Sans", sans-serif; white-space: pre-wrap; overflow-wrap: anywhere; }
.pending-list:empty { display: none; }
.pending-list { display: flex; flex-direction: column; }
.pending-list .list-heading { padding-bottom: var(--s-2); }
.pending-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) 0; border-top: 1px solid var(--line); }
.pending-row > div:first-child { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.pending-row .muted { font-size: var(--fs-xs); }
.row-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s-2); }
.pending-row .small-action:first-of-type { border-color: rgba(240, 110, 200, .32); color: #ffb3d6; background: rgba(220, 60, 160, .12); }
.pending-row .small-action:first-of-type:hover { border-color: var(--accent); background: rgba(232, 70, 100, .22); }
/* In the side column (and on phones) the name sits above its buttons. */
.pane-side .pending-row { flex-direction: column; align-items: stretch; gap: var(--s-2); }
.pane-side .row-actions { justify-content: flex-start; }
/* The language of a waiting invitation, changeable in place. */
.row-lang {
  width: auto;
  max-width: 190px;
  min-height: 36px;
  padding: 0 30px 0 var(--s-3);
  border-radius: var(--radius-sm);
  background-position: right 11px center;
  font-size: var(--fs-xs);
  font-weight: 700;
}
.cohost-waiting { padding: var(--s-2) var(--s-4) var(--s-1); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); }
.cohost-waiting .list-heading { padding-top: var(--s-2); }
.returning-guest { display: flex; flex-direction: column; gap: var(--s-3); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.pending-list:empty + .returning-guest { padding-top: 0; border-top: 0; }
/* Invite and Team: the form, then the lists (side by side on desktops). */
.pane-cols, .pane-main, .pane-side { display: flex; min-width: 0; flex-direction: column; gap: var(--s-5); }
.pane-side:not(:has(> :not([hidden]):not(:empty))) { display: none; }
.returning-list, .cohost-list { display: grid; gap: var(--s-2); }
.cohost-list:empty { display: none; }
.returning-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  padding: 10px var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  transition: border-color .18s ease, background-color .18s ease;
}
.returning-row:hover { border-color: var(--line-hover); }
.returning-text { display: flex; min-width: 0; flex: 1 1 160px; flex-direction: column; gap: 2px; }
.returning-text .muted { overflow: hidden; font-size: var(--fs-xs); text-overflow: ellipsis; white-space: nowrap; }
.returning-row .button { min-height: 38px; }
.role-select { width: auto; min-height: 38px; padding: 6px 34px 6px var(--s-3); font-size: var(--fs-sm); background-position: right 12px center; }

/* Door and pickup */
.pickup-panel { border-color: rgba(255, 186, 98, .3); background: radial-gradient(70% 90% at 100% 0, rgba(255, 180, 90, .1), transparent 70%), var(--glass), var(--surface); }
.pickup-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.scan-button { min-height: 52px; padding: 0 var(--s-6); font-size: var(--fs-md); }
.qr-icon { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.code-form { display: flex; min-width: 240px; max-width: 420px; flex: 1; flex-direction: row; gap: var(--s-2); }
.code-form input { min-height: 52px; font: 700 var(--fs-md) Manrope, sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.code-form input::placeholder { letter-spacing: .04em; text-transform: none; }
.code-form .button { min-height: 52px; }
.arrival-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: var(--s-2); }
.arrival-list:empty { display: none; }
.arrival-row {
  display: flex;
  width: 100%;
  align-items: center;
  gap: var(--s-3);
  padding: 10px var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: inherit;
  background: var(--surface-2);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: border-color .18s ease, background-color .18s ease;
}
.arrival-row:hover { border-color: rgba(240, 110, 200, .5); background: var(--surface-3); }
.arrival-text { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 2px; }
.arrival-text .muted { font-size: var(--fs-xs); }
.arrival-name { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: 2px var(--s-2); }
.arrival-name strong { min-width: 0; overflow-wrap: anywhere; }
.arrival-name .code-pill { padding: 2px 8px; font-size: 12px; }
.arrival-row.done { opacity: .8; }
.picked-list summary { display: flex; min-height: 44px; align-items: center; color: var(--muted); cursor: pointer; font-size: var(--fs-sm); font-weight: 700; }
.refused-list summary { color: var(--red); }
.refused-list #refusedRows { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: var(--s-2); }
.picked-list[open] summary { margin-bottom: var(--s-2); }
.picked-list #pickedRows { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: var(--s-2); }
.code-pill { flex: none; padding: 5px 10px; border-radius: var(--radius-sm); color: var(--gold); background: rgba(255, 180, 90, .14); font: 800 13px Manrope, sans-serif; letter-spacing: .12em; }

/* Guest cards */
.guest-search { max-width: 420px; }
.guest-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--s-4); }
.guest-card { display: flex; min-width: 0; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--glass), var(--surface); box-shadow: var(--shadow); }
.guest-card.checked-in { border-color: rgba(112, 201, 148, .5); }
.guest-card.arrived { border-color: var(--gold-line); }
.guest-photo { position: relative; display: grid; aspect-ratio: 1; padding: 0; border: 0; place-items: center; color: var(--subtle); background: var(--surface-2); cursor: zoom-in; font: 800 48px Manrope, sans-serif; }
.guest-photo:disabled { cursor: default; }
.guest-photo img { width: 100%; height: 100%; object-fit: cover; }
.checked-badge { position: absolute; top: 10px; left: 10px; padding: 4px 10px; border-radius: 99px; color: #a5e7bb; background: rgba(20, 50, 34, .85); font: 700 11px "DM Sans", sans-serif; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.checked-badge.waiting { color: #f1d38f; background: rgba(60, 46, 16, .85); }
.checked-badge.refused { color: #ffb4aa; background: rgba(70, 24, 20, .88); }
.guest-info { display: flex; min-width: 0; flex: 1; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px var(--s-4) var(--s-2); }
.guest-card h3 { max-width: 100%; font-size: var(--fs-md); }
.guest-email { max-width: 100%; color: var(--muted); font-size: var(--fs-xs); text-decoration: none; overflow-wrap: anywhere; }
.pos-pill { display: inline-block; padding: 3px 10px; border-radius: 99px; color: var(--gold); background: rgba(255, 180, 90, .14); font-size: var(--fs-xs); font-weight: 700; }
.social-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.social-chip { padding: 3px var(--s-2); border: 1px solid var(--line-strong); border-radius: var(--s-2); color: var(--ink-soft); font-size: var(--fs-xs); text-decoration: none; overflow-wrap: anywhere; }
a.social-chip:hover { border-color: var(--accent); }
.guest-note { color: var(--muted); font-size: var(--fs-xs); line-height: 1.5; overflow-wrap: anywhere; }
.guest-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); padding: var(--s-3) var(--s-4) var(--s-4); }
.guest-actions .button { min-height: 40px; flex: 1 1 auto; padding: 0 var(--s-3); font-size: var(--fs-xs); }
.table-empty { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); padding: var(--s-8); border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); color: var(--muted); text-align: center; }
.table-empty[hidden] { display: none; }
/* Who is where: a row of filters with counts above the guest list. */
.guest-filters { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.filter-chip { display: inline-flex; min-height: 40px; align-items: center; gap: 6px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 99px; color: var(--muted); background: rgba(255, 255, 255, .04); cursor: pointer; font-size: var(--fs-sm); font-weight: 700; }
.filter-chip:hover { border-color: var(--line-hover); color: var(--ink); }
.filter-chip[aria-pressed="true"] { border-color: rgba(240, 110, 200, .55); color: var(--ink); background: var(--accent-tint); }
.filter-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.filter-count { color: var(--subtle); font-variant-numeric: tabular-nums; }
.filter-chip[aria-pressed="true"] .filter-count { color: var(--accent); }

/* ==========================================================================
   Dialogs
   ========================================================================== */
.modal {
  width: min(540px, calc(100% - 2 * var(--gutter)));
  max-height: calc(100% - 32px);
  padding: var(--pad);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-xl);
  color: var(--ink);
  background: #1a1b23;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.modal::backdrop { background: rgba(8, 9, 14, .72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.modal-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.modal-heading > div { display: flex; min-width: 0; flex-direction: column; gap: var(--s-1); }
.modal-heading h2 { font-size: var(--fs-xl); }
.modal > .modal-heading + * { margin-top: var(--s-5); }
.modal-intro { color: var(--muted); font-size: var(--fs-sm); line-height: 1.55; }
form > .modal-heading + .modal-intro { margin-top: calc(var(--s-2) - var(--s-5)); }
.modal-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s-2); }
.modal > .modal-actions { margin-top: var(--s-5); }
.face-modal { width: min(560px, calc(100% - 2 * var(--gutter))); }
.face-dialog-image img { display: block; width: 100%; max-height: 70vh; border-radius: var(--radius); object-fit: contain; background: #0b0b10; }
.face-modal .verify-details { margin-top: var(--s-4); }

/* Check-in dialog */
.checkin-modal { width: min(460px, calc(100% - 2 * var(--gutter))); }
.guide-box { display: flex; flex-direction: column; gap: 6px; padding: 14px var(--s-4); border: 1px solid rgba(142, 181, 208, .3); border-radius: var(--radius); background: rgba(34, 49, 59, .7); text-align: left; }
.guide-title { color: #b1d6ed; font-size: var(--fs-sm); font-weight: 700; }
.guide-text { color: var(--ink); font-size: var(--fs-sm); line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.guide-photo { margin-top: var(--s-1); overflow: hidden; border-radius: var(--radius-sm); background: #0b0b10; }
.guide-photo:empty { display: none; }
.guide-photo img { display: block; width: 100%; max-height: 260px; object-fit: contain; }
/* On the ticket the instructions fold into a centred row that reads as a
   button, with an arrow that turns when it opens. */
.guide-details { width: 100%; gap: 0; margin-top: var(--s-1); padding: 0; }
.guide-details summary { display: flex; min-height: 46px; align-items: center; justify-content: center; gap: var(--s-2); padding: var(--s-2) var(--s-4); cursor: pointer; list-style: none; text-align: center; }
.guide-details summary::-webkit-details-marker { display: none; }
.guide-details summary::after { content: ""; width: 7px; height: 7px; flex: none; margin-left: 2px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .18s ease; }
.guide-details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.guide-details > :not(summary) { margin: 0 var(--s-4) var(--s-4); }
.guide-details .guide-photo { margin-top: 0; }
.face-picker.checkin-face { flex-direction: column; align-items: center; text-align: center; }
.checkin-face .face-actions { justify-content: center; }
.checkin-face .face-preview { width: 160px; height: 160px; border-radius: 50%; }
.face-preview[role="button"] { cursor: pointer; }
.face-preview[role="button"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.confirm-box { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-4); border: 1px solid rgba(255, 186, 98, .45); border-radius: var(--radius); background: rgba(69, 57, 31, .75); }
.confirm-box p { color: #f2d994; font-size: var(--fs-sm); line-height: 1.5; }

/* Scanner and photo check */
.scan-modal { width: min(480px, calc(100% - 2 * var(--gutter))); }
.scanner { position: relative; overflow: hidden; aspect-ratio: 1; border-radius: var(--radius-lg); background: #000; }
.scanner video { width: 100%; height: 100%; object-fit: cover; }
.scanner-frame { position: absolute; inset: 18%; border: 3px solid rgba(255, 255, 255, .8); border-radius: 22px; box-shadow: 0 0 0 999px rgba(0, 0, 0, .4); }
.scan-modal .notice { margin-top: var(--s-3); }
.verify-modal { width: min(620px, calc(100% - 2 * var(--gutter))); }
.verify-modal > .modal-intro { margin-top: var(--s-2); }
.verify-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); margin-top: var(--s-4); }
.verify-photos figure { display: flex; min-width: 0; flex-direction: column; gap: var(--s-2); }
/* Parties that aren't strict have no check-in selfie: just the profile photo. */
.verify-photos:has(> figure[hidden]) { grid-template-columns: minmax(0, 220px); justify-content: center; }
.verify-photo { display: grid; overflow: hidden; aspect-ratio: 3 / 4; place-items: center; border-radius: var(--radius); color: var(--subtle); background: var(--surface-2); font-size: var(--fs-sm); }
.verify-photo img { width: 100%; height: 100%; object-fit: cover; }
/* The label sits above each photo, so it never covers the chin. */
.verify-photos figcaption { color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-align: center; text-transform: uppercase; }
/* Tap a face to see it large. */
.photo-zoom { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.photo-zoom:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.verify-details { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--s-3) var(--s-4); align-items: center; margin-top: var(--s-4); padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); }
.verify-details:empty { display: none; }
.verify-details dt { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.verify-details dd { color: var(--ink); font-size: var(--fs-body); font-weight: 600; overflow-wrap: anywhere; }
.verify-details .detail-ok { color: var(--green); }
.verify-details .detail-warn { color: #ffcf7a; }
.verify-details .detail-muted { color: var(--muted); font-weight: 500; }
.verify-modal > .notice:not(:empty) { margin-top: var(--s-3); }
#confirmPickup { min-height: 50px; padding: 0 var(--s-6); font-size: var(--fs-md); }

/* ==========================================================================
   Party form (a full-screen sheet on phones)
   ========================================================================== */
.sheet { width: min(620px, calc(100% - 2 * var(--gutter))); padding: 0; }
.sheet form { gap: 0; padding: 0 var(--pad); }
.sticky-heading { position: sticky; top: 0; z-index: 2; margin: 0 calc(-1 * var(--pad)); padding: var(--s-5) var(--pad) var(--s-4); border-bottom: 1px solid var(--line); background: rgba(26, 27, 35, .96); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.sticky-actions { position: sticky; bottom: 0; margin: var(--s-4) calc(-1 * var(--pad)) 0; padding: 14px var(--pad) calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: rgba(26, 27, 35, .96); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.form-section { display: flex; flex-direction: column; gap: var(--s-5); padding: var(--s-6) 0; border-bottom: 1px solid var(--line); }
.form-section:last-of-type { border-bottom: 0; }
.sheet form > .notice:not(:empty) { padding-bottom: var(--s-2); }
.section-label { margin-bottom: calc(var(--s-1) - var(--s-5)); color: var(--accent); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
/* An on/off switch (a checkbox drawn as a toggle) in a row with its name. */
label.switch-row { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-3) var(--s-4); border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface-2); cursor: pointer; transition: border-color .2s ease, background-color .2s ease; }
label.switch-row:has(.switch:checked) { border-color: rgba(240, 110, 200, .5); background: var(--accent-tint); }
.switch-text { display: grid; min-width: 0; gap: 2px; }
.switch-title { color: var(--ink); font-size: var(--fs-body); font-weight: 700; }
input[type="checkbox"].switch { position: relative; flex: none; width: 48px; height: 28px; min-height: 0; margin: 0; padding: 0; border: 1px solid var(--line-hover); border-radius: 99px; background: var(--surface-3); box-shadow: none; cursor: pointer; transition: background-color .2s ease, border-color .2s ease; -webkit-appearance: none; appearance: none; }
input[type="checkbox"].switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .45); transition: transform .2s ease; }
input[type="checkbox"].switch:checked { border-color: transparent; background: var(--gradient); }
input[type="checkbox"].switch:checked::after { transform: translateX(20px); }
input[type="checkbox"].switch:focus { box-shadow: none; }
input[type="checkbox"].switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* Short points under a control, explaining what it does. */
.hint-list { display: grid; gap: var(--s-1); margin: calc(var(--s-3) - var(--s-5)) 0 0; padding: 0 0 0 var(--s-5); color: var(--muted); font-size: var(--fs-xs); line-height: 1.55; }
.hint-list li::marker { color: var(--accent); }
/* "Strict mode is on" where it matters: inviting and at the door. */
.strict-note { padding: var(--s-3) var(--s-4); border: 1px solid rgba(240, 110, 200, .3); border-radius: var(--radius); color: var(--ink-soft); background: var(--accent-tint); font-size: var(--fs-sm); line-height: 1.5; }
.poster-picker, .guide-picker { display: flex; gap: var(--s-4); }
.poster-picker-body { display: flex; min-width: 0; flex-direction: column; justify-content: center; gap: var(--s-2); }
.poster-thumb { display: grid; flex: none; overflow: hidden; width: 96px; aspect-ratio: 4 / 5; place-items: center; border: 1px dashed var(--line-hover); border-radius: var(--radius); color: var(--subtle); background: var(--field); font-size: 11px; text-align: center; }
.poster-thumb img, .poster-thumb video { width: 100%; height: 100%; object-fit: cover; }
.guide-thumb { display: grid; flex: none; overflow: hidden; width: 112px; aspect-ratio: 4 / 3; place-items: center; border: 1px dashed var(--line-hover); border-radius: var(--radius-sm); color: var(--subtle); background: var(--field); font-size: 11px; }
.guide-thumb img { width: 100%; height: 100%; object-fit: cover; }
.field > .guide-picker { margin-top: var(--s-1); }
.time-rows { display: grid; gap: var(--s-2); }
.time-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) minmax(150px, auto); align-items: center; gap: 10px; padding: var(--s-2) var(--s-2) var(--s-2) 14px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--field); }
.time-icon { font-size: var(--fs-lg); }
.time-name { color: var(--ink-soft); font-size: var(--fs-sm); font-weight: 600; }
.time-select {
  min-height: 44px;
  padding: var(--s-2) 34px var(--s-2) 14px;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--gold);
  background: var(--surface-3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23e8bf7a' stroke-width='1.8' fill='none'/%3E%3C/svg%3E") no-repeat right 12px center;
  font: 800 17px Manrope, sans-serif;
  text-align: right;
}
.schedule-summary { color: var(--ink); font-size: var(--fs-sm); font-weight: 600; line-height: 1.5; }
.schedule-summary:empty { display: none; }
.schedule-summary + .hint { margin-top: calc(var(--s-2) - var(--s-5)); }
.location-status { color: var(--muted); font-size: var(--fs-sm); }
.location-status:empty { display: none; }
.location-status.set { color: var(--green); }

/* ==========================================================================
   Party page tabs
   Phones: a bar fixed to the bottom of the screen, like an app. Wider
   screens: a bar that sticks to the top while scrolling.
   ========================================================================== */
.tab-pane.is-inactive, .invite-section.is-inactive { display: none !important; }
.party-tabs {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  gap: 4px;
  margin: 0 calc(-1 * var(--s-2)) var(--section-gap);
  padding: var(--s-2);
  border-bottom: 1px solid var(--line);
  background: rgba(14, 15, 20, .88);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  backdrop-filter: blur(14px) saturate(130%);
}
.party-tab {
  position: relative;
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: 700;
  transition: color .18s ease, background-color .18s ease;
}
.party-tab svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.party-tab:hover { color: var(--ink); background: rgba(255, 255, 255, .05); }
.party-tab[aria-selected="true"] { border-color: rgba(240, 110, 200, .3); color: #fff4ef; background: var(--accent-tint); }
.party-tab[aria-selected="true"] svg { color: #ff9ccb; }
.party-tab .tab-count:empty { display: none; }
.tab-badge {
  display: inline-grid;
  min-width: 20px;
  height: 20px;
  place-items: center;
  padding: 0 6px;
  border-radius: 99px;
  color: #1e1608;
  background: var(--gold);
  font-size: 11px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.tab-badge.alert { color: #fff; background: #c4433a; box-shadow: 0 0 0 0 rgba(196, 67, 58, .6); animation: pulse 1.8s ease-out infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 8px rgba(224, 72, 58, 0); } 100% { box-shadow: 0 0 0 0 rgba(224, 72, 58, 0); } }
/* The overview's totals open the matching tab. */
button.stat { color: var(--muted); cursor: pointer; font: inherit; font-size: var(--fs-xs); font-weight: 600; text-align: left; transition: border-color .18s ease, background-color .18s ease; }
button.stat:hover { border-color: var(--line-hover); background: var(--surface-2); }

/* Confirmations (instead of the browser's plain box) */
.confirm-modal { display: none; width: min(480px, calc(100% - 2 * var(--gutter))); }
.confirm-modal[open] { display: flex; flex-direction: column; gap: var(--s-4); }
.confirm-modal h2 { padding-right: var(--s-2); font-size: var(--fs-xl); }
.confirm-modal .modal-actions { margin-top: var(--s-2); }
.warn-banner { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-3) var(--s-4); border: 1px solid rgba(255, 120, 108, .55); border-radius: var(--radius); color: #ffd2cc; background: rgba(179, 38, 30, .22); font-weight: 700; line-height: 1.45; }
.warn-icon { flex: none; color: #ff8f84; font-size: 20px; line-height: 1.1; }
.confirm-text { color: var(--ink-soft); line-height: 1.55; }
.confirm-list { display: grid; gap: 6px; margin: calc(var(--s-2) - var(--s-4)) 0 0; padding: 0 0 0 var(--s-5); color: var(--ink); line-height: 1.45; }
.confirm-list li::marker { color: #ff8f84; }
.confirm-ack { flex-direction: row; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border: 1px solid var(--line-strong); border-radius: var(--radius); color: var(--ink); background: var(--surface-2); cursor: pointer; font-size: var(--fs-sm); }
.confirm-ack input { flex: none; }
.confirm-ok:disabled { cursor: not-allowed; opacity: .45; transform: none; box-shadow: none; }

/* Invite tab: a switch between inviting guests and co-hosts (owners). */
.seg { display: flex; width: 100%; gap: 4px; margin-bottom: var(--s-4); padding: 4px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.seg-button { min-height: 40px; flex: 1; border: 1px solid transparent; border-radius: 10px; color: var(--muted); background: transparent; cursor: pointer; font-size: var(--fs-sm); font-weight: 700; transition: color .18s ease, background-color .18s ease; }
.seg-button:hover { color: var(--ink); }
.seg-button[aria-pressed="true"] { border-color: rgba(240, 110, 200, .3); color: #fff4ef; background: var(--accent-tint); }
.seg-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.invite-pane > .section-panel { margin-bottom: 0; }

/* Team chat: fills the screen like a messaging app; only the messages
   scroll, and the message box stays at the bottom. */
body.chat-open, body.chat-open .page { padding-bottom: 0; }
.chat-pane { position: relative; display: flex; min-height: 300px; flex-direction: column; padding: 0; overflow: hidden; }
.chat-scroll { display: flex; min-height: 0; flex: 1; flex-direction: column; overflow-y: auto; padding: var(--s-4) var(--s-4) var(--s-3); overscroll-behavior: contain; }
/* Offer to turn on notifications, once, at the top of the chat. */
.chat-push { display: flex; flex: none; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-2) var(--s-2) var(--s-4); border-bottom: 1px solid var(--line); background: rgba(255, 180, 90, .08); color: var(--ink-soft); font-size: var(--fs-sm); font-weight: 600; }
.chat-push span { flex: 1; min-width: 0; }
.chat-push .button { min-height: 36px; padding: 0 var(--s-4); }
.chat-push .icon-button { width: 36px; height: 36px; border: 0; background: transparent; color: var(--muted); font-size: 20px; }
.chat-push[hidden] { display: none; }
.chat-intro { align-self: center; max-width: 100%; padding: 6px 12px; border-radius: 99px; color: var(--muted); background: rgba(255, 255, 255, .05); font-size: var(--fs-xs); text-align: center; }
/* Few messages sit at the bottom, next to the message box. */
.chat-log { display: flex; flex-direction: column; margin-top: auto; }
.chat-empty { margin: auto; padding: var(--s-6) 0; color: var(--muted); font-size: var(--fs-sm); text-align: center; }
.chat-empty[hidden] { display: none; }
.chat-day { align-self: center; margin: var(--s-4) 0 var(--s-1); padding: 3px 10px; border-radius: 99px; color: var(--muted); background: rgba(255, 255, 255, .05); font-size: 11px; font-weight: 700; }
/* A message: others' have their photo beside the first of a group, like a
   messaging app; your own sit on the right without one. */
.chat-msg { display: flex; max-width: min(86%, 560px); align-items: flex-end; gap: var(--s-2); margin-top: var(--s-3); }
.chat-msg.grouped { margin-top: 3px; }
.chat-msg.mine { align-self: flex-end; justify-content: flex-end; }
.chat-stack { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; }
.chat-msg.mine .chat-stack { align-items: flex-end; }
.chat-avatar { display: grid; width: 30px; height: 30px; flex: none; overflow: hidden; place-items: center; align-self: flex-start; margin-top: 18px; border-radius: 50%; color: #fff; background: var(--gradient); font: 800 13px Manrope, sans-serif; }
.chat-avatar img { width: 100%; height: 100%; object-fit: cover; }
.chat-avatar.spacer { height: 1px; margin: 0; background: none; }
.chat-author { margin: 0 0 3px 12px; color: var(--gold); font-size: var(--fs-xs); font-weight: 700; }
.chat-body { padding: 8px 12px 7px; border-radius: 18px; color: var(--ink); background: var(--surface-3); font-size: var(--fs-body); line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }
/* Photos fill the bubble's top; tap to see them large. */
.chat-msg.has-photo .chat-body { padding: 4px 4px 7px; }
.chat-msg.has-photo .chat-text, .chat-msg.has-photo .chat-time { margin-right: 8px; margin-left: 8px; }
.chat-photo { display: block; width: min(240px, 60vw); min-height: 120px; padding: 0; overflow: hidden; border: 0; border-radius: 14px; background: rgba(0, 0, 0, .25); cursor: zoom-in; }
.chat-photo img { display: block; width: 100%; max-height: 320px; object-fit: cover; }
.chat-text { margin-top: 0; }
.chat-msg.has-photo .chat-text { margin-top: 6px; }
.chat-msg.theirs:not(.grouped) .chat-body { border-top-left-radius: 6px; }
.chat-msg.mine .chat-body { color: #fff; background: var(--gradient); }
.chat-msg.mine:not(.grouped) .chat-body { border-top-right-radius: 6px; }
.chat-time { float: right; margin: 7px 0 -3px 10px; color: var(--muted); font-size: 11px; line-height: 1.2; white-space: nowrap; }
.chat-msg.mine .chat-time { color: #fff; }
.chat-msg.sending .chat-body { opacity: .7; }
.chat-msg.failed { cursor: pointer; }
.chat-msg.failed .chat-body { border: 1px solid rgba(255, 143, 132, .6); background: rgba(179, 38, 30, .4); }
.chat-msg.failed:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 18px; }
.chat-jump { position: absolute; bottom: 80px; left: 50%; z-index: 2; padding: 8px 14px; border: 0; border-radius: 99px; color: #1e1608; background: var(--gold); box-shadow: 0 8px 20px rgba(0, 0, 0, .45); cursor: pointer; font-size: var(--fs-xs); font-weight: 800; transform: translateX(-50%); }
.chat-notice { padding: 0 var(--s-4) var(--s-2); }
.chat-form { flex-direction: row; align-items: flex-end; gap: var(--s-2); padding: var(--s-3); border-top: 1px solid var(--line); background: rgba(0, 0, 0, .14); }
.chat-attach { display: grid; width: 44px; height: 44px; flex: none; place-items: center; padding: 0; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--ink-soft); background: rgba(255, 255, 255, .05); cursor: pointer; }
.chat-attach:hover { color: var(--ink); border-color: var(--line-hover); }
.chat-attach svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.chat-form textarea { min-height: 44px; max-height: 132px; flex: 1; padding: 11px 16px; border-radius: 22px; line-height: 1.35; resize: none; }
.chat-send { display: grid; width: 44px; height: 44px; flex: none; place-items: center; padding: 0; border: 0; border-radius: 50%; color: #fff; background: var(--gradient); cursor: pointer; transition: opacity .15s ease, transform .15s ease; }
.chat-send:not(:disabled):active { transform: scale(.94); }
.chat-send:disabled { cursor: default; opacity: .35; }
.chat-send:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.chat-send svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.9; }

/* Pop-up notices */
.toast-stack { position: fixed; top: max(12px, env(safe-area-inset-top)); left: 50%; z-index: 100; display: flex; width: min(440px, calc(100% - 24px)); flex-direction: column; gap: var(--s-2); transform: translateX(-50%); pointer-events: none; }
.toast {
  padding: 14px var(--s-4);
  border: 1px solid rgba(255, 192, 108, .45);
  border-radius: var(--radius);
  color: var(--ink);
  background: rgba(30, 31, 40, .97);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .55);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.45;
  text-align: left;
  pointer-events: auto;
  animation: toast-in .25s ease-out;
}
button.toast { cursor: pointer; }
.toast.alert { border-color: rgba(255, 143, 132, .55); background: rgba(58, 28, 28, .97); }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } }

/* Reports from the door */
/* Waiting for a decision: the block flashes red until someone decides (it
   stays plainly red, without moving, for people who turn motion off). */
.report-block {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-4);
  border: 1px solid #ff6b5c;
  border-radius: var(--radius-lg);
  background: rgba(196, 64, 50, .18);
  animation: decide-flash 1.6s ease-in-out infinite;
}
@keyframes decide-flash {
  0%, 100% { border-color: rgba(255, 107, 92, .55); background-color: rgba(196, 64, 50, .1); box-shadow: 0 0 0 0 rgba(224, 72, 58, 0); }
  50% { border-color: #ff6b5c; background-color: rgba(196, 64, 50, .3); box-shadow: 0 0 0 3px rgba(224, 72, 58, .3), 0 0 32px rgba(224, 72, 58, .4); }
}
.report-heading { display: inline-flex; align-items: center; gap: var(--s-2); color: #ffb0a6; }
.report-heading::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; background: #e0483a; box-shadow: 0 0 0 0 rgba(224, 72, 58, .6); animation: pulse 1.6s ease-out infinite; }
.report-list { display: grid; gap: var(--s-2); }
/* A report waiting for a decision: photo and details, then two equal
   buttons (no / yes) across the row; beside the details on wider screens. */
.report-row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--s-3); padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); }
.report-row .arrival-text { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: 2px; }
.report-note { color: var(--ink-soft); font-size: var(--fs-sm); font-style: italic; overflow-wrap: anywhere; }
/* Phones: Check photos across the row, then no / yes side by side. */
.report-actions { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
.report-actions .button { min-height: 44px; padding: 0 var(--s-3); }
.report-actions .report-view { grid-column: 1 / -1; }
@media (min-width: 640px) {
  .report-row { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
  .report-actions { grid-column: auto; grid-template-columns: auto repeat(2, 130px); }
  .report-actions .report-view { grid-column: auto; }
}
/* Report lines carry names, so they wrap instead of pushing the page wider. */
.report-chip { max-width: 100%; margin-top: 2px; padding-block: 3px; letter-spacing: .04em; line-height: 1.3; text-transform: none; white-space: normal; }
.report-chip.pending { border-color: rgba(255, 192, 108, .4); color: #ffcf7a; background: rgba(255, 180, 90, .14); }
.report-chip.approved { border-color: rgba(112, 201, 148, .4); color: var(--green); background: var(--green-tint); }
.report-chip.denied { border-color: rgba(255, 143, 132, .4); color: var(--red); background: rgba(196, 64, 50, .16); }
.report-status { margin-top: var(--s-3); padding: var(--s-3) 14px; border: 1px solid var(--line-strong); border-radius: var(--radius); font-size: var(--fs-sm); font-weight: 600; line-height: 1.5; }
.report-status.pending { border-color: rgba(255, 186, 98, .45); color: #f2d994; background: rgba(69, 57, 31, .6); }
.report-status.approved { border-color: rgba(112, 201, 148, .45); color: #b5ebca; background: var(--green-tint); }
.report-status.denied { border-color: rgba(255, 143, 132, .45); color: #ffb0a6; background: rgba(196, 64, 50, .14); }
.report-form { margin-top: var(--s-4); padding: var(--s-4); border: 1px solid rgba(255, 143, 132, .35); border-radius: var(--radius); background: var(--surface-2); gap: var(--s-4); }
/* Reasons to report: tap any; "Other…" opens a box to describe it. */
.reason-field { display: flex; min-width: 0; flex-direction: column; gap: var(--s-2); margin: 0; padding: 0; border: 0; }
.reason-field legend { padding: 0; margin-bottom: var(--s-2); color: var(--ink); font-size: var(--fs-sm); font-weight: 700; }
.reason-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.reason-chip { position: relative; display: inline-flex; cursor: pointer; }
.reason-chip input { position: absolute; opacity: 0; pointer-events: none; }
.reason-chip span { display: inline-flex; min-height: 40px; align-items: center; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 99px; color: var(--ink-soft); background: var(--surface-3); font-size: var(--fs-sm); font-weight: 600; line-height: 1.25; transition: border-color .15s, background .15s, color .15s; }
.reason-chip input:checked + span { border-color: var(--red); color: #fff; background: rgba(196, 64, 50, .32); }
.reason-chip input:checked + span::before { content: "✓"; margin-right: 6px; color: var(--red); }
.reason-chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
/* The door's buttons share the row equally; hidden ones take no space. */
/* Confirm pickup / Report / Let in stay at the bottom of the dialog, on
   screen however long the details are (also the report form's buttons). */
.verify-actions, .verify-modal .report-form > .toolbar {
  position: sticky;
  z-index: 2;
  bottom: calc(-1 * var(--pad));
  margin: var(--s-4) calc(-1 * var(--pad)) calc(-1 * var(--pad));
  padding: 14px var(--pad) calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: rgba(26, 27, 35, .97);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.verify-modal .report-form > .toolbar { margin-bottom: 0; }
.verify-actions { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: var(--s-2); }
.verify-actions .button { min-width: 0; padding: 0 var(--s-3); }
.verify-modal.reporting .verify-actions { display: none; }

/* Where the guest is waiting */
.place-thumb { display: grid; width: 44px; height: 44px; flex: none; overflow: hidden; place-items: center; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-3); font-size: 18px; }
.place-thumb img { width: 100%; height: 100%; object-fit: cover; }
.verify-where { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-4); }
.where-media { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); }
/* The spot is a hint; the faces matter most, so it stays smaller. */
.where-media img { display: block; width: 100%; max-height: min(320px, 26vh); object-fit: contain; background: #0b0b10; }
.where-map { display: block; width: 100%; height: min(220px, 26vh); border: 0; }
.where-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-1) var(--s-3); color: var(--muted); font-size: var(--fs-sm); }

/* Guest side: status on party cards, welcome after pickup, place photo */
.status-badge.in { border-color: rgba(112, 201, 148, .4); color: #b5ebca; background: var(--green-tint); }
.status-badge.door, .status-badge.open { border-color: rgba(255, 192, 108, .45); color: #ffd58f; background: rgba(255, 180, 90, .14); }
.status-badge.alert { border-color: #e0483a; color: #fff; background: #c4433a; }
/* A small dot in front of live states. */
.status-badge.in::before, .status-badge.door::before, .status-badge.open::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.checkin-box.done { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); padding: var(--s-6) var(--s-5); border-radius: var(--radius-lg); text-align: center; }
.welcome-icon { font-size: 40px; line-height: 1; }
.welcome-title { color: #e6fbee; font: 800 var(--fs-xl)/1.2 Manrope, sans-serif; letter-spacing: -.02em; text-wrap: balance; }
.checkin-box.done .checkin-text { color: #b5ebca; font-weight: 600; }
.checkin-box.ticket .checkin-text { max-width: 32ch; color: var(--ink-soft); }
.ticket-again { width: 100%; margin-top: var(--s-1); }
.place-field .face-picker { align-items: center; }
.place-preview { width: 120px; height: 90px; border-radius: var(--radius); font-size: 28px; }

/* ==========================================================================
   640px and up: tablets and wider
   ========================================================================== */
@media (min-width: 640px) {
  .party-card, .guest-event-card { grid-template-columns: 104px minmax(0, 1fr); }
  .seg { width: min(100%, 360px); }
  .detail-hero { grid-template-columns: clamp(220px, 34%, 380px) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); }
  .detail-hero:has(> .detail-poster[hidden]) { grid-template-columns: minmax(0, 1fr); }
  .detail-poster { width: 100%; margin: 0; }
  .detail-info { padding-top: var(--s-2); }
  /* The totals run under both the poster and the details. */
  .detail-hero > .stats { grid-column: 1 / -1; }
}

/* 720px and up: invitation poster beside the invitation */
@media (min-width: 720px) {
  .invite-layout { width: 100%; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: clamp(24px, 3vw, 40px); align-items: start; }
  .invite-poster { position: sticky; top: var(--s-6); }
  .invited-party-dialog[open] { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; }
  .invited-party-media { position: sticky; top: 0; padding: var(--s-3); }
  .invited-party-body { padding: var(--pad) var(--pad) var(--pad) var(--s-3); }
  .invited-party-caption { padding-right: var(--s-10); }
}

/* 960px and up: desktop */
@media (min-width: 960px) {
  .pane-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-8); align-items: start; }
  .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stats.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .stats.five > :last-child { grid-column: auto; }
  /* Party tab on a laptop: one card, the poster and the details side by
     side at about the same height, the times as three columns and the
     address beside the instructions, so nothing is squeezed to one side. */
  .detail-hero {
    grid-template-columns: clamp(280px, 32%, 360px) minmax(0, 1fr);
    gap: var(--s-6) clamp(32px, 4vw, 48px);
    padding: var(--pad);
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    background: var(--glass), var(--surface);
    box-shadow: var(--shadow);
  }
  .detail-info { gap: var(--s-6); padding-top: 0; }
  .schedule-list { grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
  .schedule-list li { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; padding: var(--s-3) var(--s-4); border-bottom: 0; border-left: 1px solid var(--line); }
  .schedule-list li:first-child { padding-left: 0; border-left: 0; }
  .schedule-list strong { font-size: var(--fs-lg); text-align: left; }
  .detail-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5) var(--s-6); }
  .detail-facts > #detailDescriptionRow { grid-column: 1 / -1; }
}

/* ==========================================================================
   Phones (below 640px)
   ========================================================================== */
@media (max-width: 639.98px) {
  .panel { border-radius: var(--radius-lg); }
  .step { margin-top: var(--s-6); padding-top: var(--s-6); }
  .form-row { grid-template-columns: minmax(0, 1fr); }

  /* Header: the account email moves under the button. */
  .account { gap: var(--s-2); }
  .account > .button { min-height: 40px; padding: 0 var(--s-4); }
  .topbar .account > .muted { display: none; }

  .profile-hero { flex-wrap: wrap; }
  .profile-hero .button { width: 100%; }
  .dash-tabs { width: 100%; }
  /* Phones: the title on its own line, the buttons side by side under it. */
  .dash-heading { flex-direction: column; align-items: stretch; }
  .dash-actions { flex-wrap: nowrap; }
  .dash-actions .button { min-width: 0; flex: 1; padding: 0 var(--s-3); }

  .party-card, .guest-event-card { gap: var(--s-3); padding: 10px; }

  .pickup-actions { flex-direction: column; }
  .scan-button { width: 100%; }
  .code-form { min-width: 0; max-width: none; }
  .invite-form { max-width: none; }
  .invite-form > .button { align-self: stretch; }
  .pending-row { flex-direction: column; align-items: stretch; }
  .row-actions { justify-content: flex-start; }
  .row-actions .small-action { flex: 1; }
  .guest-search { max-width: none; }
  .cohost-list .role-select { flex: 1; }
  .guest-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .guest-info { padding: var(--s-3) var(--s-3) var(--s-1); }
  .guest-actions { flex-direction: column; align-items: stretch; padding: var(--s-2) var(--s-3) var(--s-3); }

  .face-picker { flex-direction: column; text-align: center; }
  .face-picker .face-preview { width: 132px; height: 132px; }
  .face-actions { justify-content: center; }

  .modal { max-height: calc(100% - 16px); }
  .modal-actions .button { flex: 1; }
  .modal.invited-party-dialog { width: calc(100% - 16px); }
  /* At the door the ticket matters, not the poster. */
  .invited-party-dialog.has-ticket .invited-party-media { display: none; }
  .invited-party-dialog.has-ticket .invited-party-caption { padding-right: var(--s-10); }
  .invited-party-media { padding: var(--s-2) var(--s-2) 0; }

  .sheet { width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; border: 0; border-radius: 0; }
  .sticky-actions .button { flex: 1; }
  .time-row { grid-template-columns: 26px minmax(0, 1fr); padding: 10px 10px 10px var(--s-3); }
  .time-select { grid-column: 1 / -1; width: 100%; font-size: var(--fs-lg); text-align: left; }
}
/* Phones: the party tabs and the dashboard tabs become an app-style bar
   at the bottom of the screen. */
@media (max-width: 639.98px) {
  body.has-tabbar { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .party-tabs, body.has-tabbar .dash-tabs {
    position: fixed;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 30;
    width: 100%;
    margin: 0;
    padding: 6px max(6px, env(safe-area-inset-left)) calc(6px + env(safe-area-inset-bottom));
    border: 0;
    border-top: 1px solid var(--line-strong);
    border-radius: 0;
    background: rgba(18, 19, 25, .94);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
  }
  .party-tab, body.has-tabbar .dash-tab {
    min-width: 0;
    min-height: 56px;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    padding: 4px 2px;
    font-size: 11px;
  }
  .party-tab-label, body.has-tabbar .dashboard-tab-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .party-tab .tab-badge, .party-tab .tab-count, body.has-tabbar .dash-tab .tab-count {
    position: absolute;
    top: 4px;
    left: calc(50% + 6px);
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 10px;
  }
  body.has-tabbar .dashboard-tab-icon { width: 22px; min-width: 22px; height: 22px; }
  /* The keyboard needs the room while typing in the chat. */
  body.chat-typing .party-tabs { display: none; }
  body.chat-typing.has-tabbar, body.chat-open.has-tabbar { padding-bottom: 0; }
}
@media (max-width: 639.98px) {
  .brand.compact .wordmark { display: none; }
}
/* The dashboard keeps its language menu and Sign out whole: below 560px the
   wordmark makes room. */
@media (max-width: 559.98px) {
  .guest-topbar .brand .wordmark { display: none; }
}

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

/* Thai, Chinese, Japanese and Korean: no extra letter spacing in small caps
   labels (it breaks Thai and spreads CJK apart). */
:is(:lang(th), :lang(zh), :lang(ja), :lang(ko)) :is(.eyebrow, .event-date, .party-date, .invite-date, .invited-party-date,
  .address-label, .party-schedule dt, .role-badge, .status-badge, .ended-badge, .report-chip, .list-heading,
  .verify-photos figcaption, .verify-details dt) { letter-spacing: 0; }