/* RSVP host website: one stylesheet, mobile first.

   The look: the host's backstage for a Greek celebration. Mist paper, white cards, plum ink; bougainvillea
   for the one thing to press, lemon for "you are here", sea for "yes". Three faces: Piazzolla for titles and
   the event's name (its Black Italic is the one display moment: the name as the invitation would print it),
   Commissioner for reading, JetBrains Mono for figures, times and phone numbers.
   Signature: the guests' answer poll. Rounded option rows with a check circle, a fill showing each answer's
   share and the count in mono: the guest list's totals, the send progress, an event's tally, the sign-in page.
   The event's pages share one numbered step rail (events/_nav.html): the work is a real sequence.

   Contents: fonts · tokens · base · top bar · page and page head · event head and step rail · cards ·
             buttons · forms · badges · alerts · poll · events list · questions · invitation · empty state ·
             auth · motion · admin · WhatsApp numbers · guest list · choosing guests · sending · messages ·
             table planner
*/

/* ------------------------------------------------------------------ fonts
   Self-hosted woff2 subsets (Greek, Latin, Latin Extended) made from the Google Fonts repository's variable
   fonts (OFL; licences in /static/fonts/OFL-*.txt). Commissioner: weights 400-700. Piazzolla: 700-900 at a
   fixed display optical size, upright and italic. JetBrains Mono: 400-700. */
@font-face {
  font-family: "Commissioner"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/static/fonts/commissioner-greek.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}  /* greek, 15380 bytes */
@font-face {
  font-family: "Commissioner"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/static/fonts/commissioner-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}  /* latin-ext, 30988 bytes */
@font-face {
  font-family: "Commissioner"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/static/fonts/commissioner-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}  /* latin, 36700 bytes */
@font-face {
  font-family: "Piazzolla"; font-style: normal; font-weight: 700 900; font-display: swap;
  src: url("/static/fonts/piazzolla-greek.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}  /* greek, 20780 bytes */
@font-face {
  font-family: "Piazzolla"; font-style: normal; font-weight: 700 900; font-display: swap;
  src: url("/static/fonts/piazzolla-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}  /* latin-ext, 28276 bytes */
@font-face {
  font-family: "Piazzolla"; font-style: normal; font-weight: 700 900; font-display: swap;
  src: url("/static/fonts/piazzolla-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}  /* latin, 43600 bytes */
@font-face {
  font-family: "Piazzolla"; font-style: italic; font-weight: 700 900; font-display: swap;
  src: url("/static/fonts/piazzolla-italic-greek.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}  /* greek, 21736 bytes */
@font-face {
  font-family: "Piazzolla"; font-style: italic; font-weight: 700 900; font-display: swap;
  src: url("/static/fonts/piazzolla-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}  /* latin-ext, 29344 bytes */
@font-face {
  font-family: "Piazzolla"; font-style: italic; font-weight: 700 900; font-display: swap;
  src: url("/static/fonts/piazzolla-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}  /* latin, 46004 bytes */
@font-face {
  font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/static/fonts/jetbrains-mono-greek.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}  /* greek, 6140 bytes */
@font-face {
  font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/static/fonts/jetbrains-mono-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}  /* latin-ext, 10368 bytes */
@font-face {
  font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/static/fonts/jetbrains-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}  /* latin, 30580 bytes */

/* ------------------------------------------------------------------ tokens
   Contrast (WCAG): ink on paper 16:1 · stone on white 5.4:1, on paper 4.9:1 · white on bloom 5.0:1 ·
   sea-ink on sea-50 5.5:1 · plum-ink on plum-50 7.6:1 · bloom-ink on bloom-50 6.5:1 · error on error-50 5.8:1 ·
   ink on lemon 12:1 (only ink ever sits on lemon) · control borders (line-strong) 3.4:1 on white ·
   the bloom focus ring 4.6:1 on paper, 3.5:1 on the ink top bar. */
:root {
  /* palette (shared with the marketing site) */
  --ink: #1b1530;          /* plum ink: text, the top bar */
  --paper: #f3f4f8;        /* mist: the page */
  --card: #ffffff;
  --bloom: #d3245f;        /* bougainvillea: the primary action, the focus ring, the signature mark */
  --lemon: #f6d63b;        /* highlight: the current step, the chosen filter, "needs attention" */
  --sea: #2e8c83;          /* yes: coming, connected, sent (fills and marks; text uses --sea-ink) */
  --stone: #6b6880;        /* secondary text */

  /* derived tints */
  --ink-2: #2d2650;        /* hover on ink */
  --bloom-600: #b51c50;    /* primary hover */
  --bloom-ink: #a3174a;    /* bloom text on --bloom-50 */
  --bloom-50: #fce9ef;
  --lemon-50: #fef7d6;
  --lemon-200: #fbe98f;
  --lemon-line: #e8c62a;
  --sea-ink: #1f6b64;
  --sea-50: #e4f3f1;
  --sea-100: #c9e6e1;
  --sea-line: #a9d6cf;
  --plum-50: #eceaf2;
  --plum-100: #dedbe9;
  --plum-ink: #4a4560;
  --line: #e3e2eb;         /* hairlines */
  --line-strong: #8c88a0;  /* control borders */
  --error: #b42318;        /* errors, never the brand's bloom */
  --error-50: #fdeeec;
  --error-100: #f8d6d1;
  --error-line: #f1b9b3;
  --focus: var(--bloom);

  /* type */
  --font-display: "Piazzolla", Georgia, "Times New Roman", serif;
  --font-body: "Commissioner", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --fs-13: 0.8125rem;      /* the floor: badges, small labels */
  --fs-14: 0.875rem; --fs-15: 0.9375rem; --fs-16: 1rem; --fs-18: 1.125rem;
  --fs-22: 1.375rem; --fs-28: 1.75rem; --fs-36: 2.25rem; --fs-48: 3rem;

  /* space (4 px steps), shape, motion */
  --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem; --s7: 3rem; --s8: 4rem;
  --radius-card: 14px;
  --radius: 10px;          /* controls */
  --radius-pill: 999px;    /* poll rows, pills, chips */
  --shadow: 0 1px 2px rgba(27, 21, 48, 0.08), 0 6px 20px -10px rgba(27, 21, 48, 0.08);
  --control-h: 48px;       /* inputs and buttons; small buttons are 44px */
  --gutter: 16px;
  --frame: 76rem;          /* the page and the top bar */
  --measure: 52rem;        /* forms and lists */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}
@media (min-width: 640px) { :root { --gutter: 24px; } }
@media (min-width: 1024px) { :root { --gutter: 32px; } }

/* the fill of a poll row: registered so it can slide when htmx settles a new value */
@property --share { syntax: "<percentage>"; inherits: false; initial-value: 0%; }

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--fs-16)/1.55 var(--font-body);
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul, ol, dl, dd, figure, fieldset { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
img, svg { max-width: 100%; }
[hidden] { display: none !important; }
::selection { background: var(--lemon); color: var(--ink); }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

a { color: var(--ink); text-decoration-color: var(--bloom); text-decoration-thickness: 1.5px; text-underline-offset: 0.2em; }
a:hover { color: var(--bloom-ink); text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.icon {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.muted { color: var(--stone); }
.nowrap { white-space: nowrap; }

.skip-link {
  position: absolute; left: var(--s2); top: -10rem; z-index: 10;
  padding: 0.7rem 1rem; border-radius: var(--radius);
  background: var(--lemon); color: var(--ink); font-weight: 700;
}
.skip-link:focus { top: var(--s2); }

/* ------------------------------------------------------------------ top bar
   A slim ink band. Phone: wordmark + language + log out on the first row, the sections on a second row.
   Wider: one row. The current section is underlined in lemon. */
.topbar { background: var(--ink); color: #fff; }
.topbar__row {
  max-width: var(--frame); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; grid-template-columns: auto 1fr; grid-template-areas: "brand tools" "nav nav";
  align-items: center; column-gap: var(--s3);
}
.brand {
  grid-area: brand; display: inline-flex; align-items: center; gap: 0.55rem; min-height: 56px;
  color: #fff; text-decoration: none;
}
.brand:hover { color: #fff; }
.brand__mark { flex: none; width: 24px; height: 24px; fill: var(--bloom); stroke: none; }
.brand__mark path { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.brand__name { font: 900 1.25rem/1 var(--font-display); letter-spacing: 0.01em; white-space: nowrap; }
@media (min-width: 420px) { .brand__name { font-size: 1.5rem; } }
@media (max-width: 419px) {   /* small phones: the name, the language and "log out" share one row */
  .topbar__row { column-gap: var(--s2); padding-inline: 12px; }
  .brand { gap: 0.4rem; }
  .brand__name { font-size: 1.125rem; }
  .langswitch button { min-width: 36px; padding: 0 0.4rem; }
  .topbar__logout { padding: 0 0.5rem; font-size: var(--fs-13); }
}
@media (max-width: 359px) {   /* below the supported 360px: the language and "log out" move under the name */
  .topbar__row { grid-template-columns: 1fr; grid-template-areas: "brand" "tools" "nav"; }
  .topbar__tools { justify-self: start; padding-bottom: var(--s2); }
}
.topbar__tools { grid-area: tools; justify-self: end; display: flex; align-items: center; gap: var(--s2); }
.topbar__tools form { margin: 0; }
.topbar__who {
  display: none; max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: rgba(255, 255, 255, 0.7); font-size: var(--fs-14);
}
.langswitch { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.1); }
.langswitch button {
  min-width: 40px; min-height: 44px; padding: 0 0.5rem; border: 0; border-radius: var(--radius-pill);
  background: transparent; cursor: pointer;
  color: rgba(255, 255, 255, 0.82); font: 600 var(--fs-13)/1 var(--font-mono); letter-spacing: 0.06em;
}
.langswitch button:hover { color: #fff; background: rgba(255, 255, 255, 0.12); }
.langswitch button[aria-pressed="true"] { background: var(--lemon); color: var(--ink); }
.topbar__logout {
  min-height: 44px; padding: 0 0.7rem; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.28); border-radius: var(--radius); background: transparent;
  color: #fff; font-weight: 600; font-size: var(--fs-14);
}
.topbar__logout:hover { background: var(--ink-2); border-color: rgba(255, 255, 255, 0.5); }
.mainnav {
  grid-area: nav; display: flex; gap: var(--s1); margin: 0 calc(-1 * var(--s3));
  overflow-x: auto; scrollbar-width: none; border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.mainnav::-webkit-scrollbar { display: none; }
.mainnav a {
  display: inline-flex; align-items: center; min-height: 46px; padding: 3px var(--s3) 0;
  border-bottom: 3px solid transparent; white-space: nowrap; text-decoration: none;
  color: rgba(255, 255, 255, 0.78); font-weight: 600; font-size: var(--fs-14);
}
.mainnav a:hover { color: #fff; }
.mainnav a[aria-current="page"] { color: #fff; border-bottom-color: var(--lemon); }
.mainnav a:focus-visible, .langswitch button:focus-visible { outline-offset: -3px; }

@media (min-width: 760px) {
  .topbar__row { grid-template-columns: auto 1fr auto; grid-template-areas: "brand nav tools"; column-gap: var(--s5); }
  .brand { min-height: 60px; }
  .mainnav { margin: 0; align-self: stretch; border-top: 0; }
  .mainnav a { min-height: 60px; }
}
@media (min-width: 1024px) {
  .topbar__who { display: block; }
}

/* ------------------------------------------------------------------ page and page head
   One frame for every page (the top bar's width), content left-aligned in it; forms and lists keep a reading
   measure, admin tables and the guest list use the whole frame. */
.page {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5); align-content: start;
  max-width: var(--frame); margin: 0 auto; padding: var(--s5) var(--gutter) var(--s8);
}
.page:focus { outline: none; }
.page > * { max-width: var(--measure); }
/* the page and an event page's body space their blocks evenly; the blocks' own margins don't add to it */
:is(.page, .eventbody) > * { margin-top: 0 !important; margin-bottom: 0 !important; }
.page--wide > *, .page--event > * { max-width: none; }
.page--narrow { max-width: calc(28rem + 2 * var(--gutter)); }
@media (min-width: 640px) { .page { padding-top: var(--s6); } }

.pagehead { display: grid; justify-items: start; gap: var(--s2); margin-bottom: var(--s5); }
.pagehead > .backlink { margin-block: calc(-1 * var(--s2)) calc(-1 * var(--s3)); }
.pagehead--split { grid-template-columns: minmax(0, 1fr); align-items: end; gap: var(--s4); }
.pagehead--split > div:first-child { display: grid; gap: var(--s2); }
.kicker { color: var(--stone); font-weight: 600; font-size: var(--fs-14); }
.pagetitle {
  max-width: 100%; color: var(--ink);
  font: 700 var(--fs-28)/1.12 var(--font-display); letter-spacing: -0.005em;
}
.pagehead__lead { max-width: 42rem; color: var(--stone); }
.pagehead__actions { display: flex; flex-wrap: wrap; gap: var(--s2); }
.pagehead__jump { font-size: var(--fs-14); }
@media (min-width: 640px) {
  .pagetitle { font-size: var(--fs-36); }
  .pagehead--split { grid-template-columns: minmax(0, 1fr) auto; }
}

.backlink {
  display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; justify-self: start;
  color: var(--stone); font-weight: 600; font-size: var(--fs-14); text-decoration: none;
}
.backlink::before { content: "\2190"; font-family: var(--font-mono); }
.backlink:hover { color: var(--ink); text-decoration: underline; }

/* ------------------------------------------------------------------ event head and step rail
   events/_nav.html: the event's name in Piazzolla Black Italic (the one display moment), when and where in
   mono and body text, then the seven steps, each named as its page's title. Every step always shows its number
   and name: below 1280px they wrap onto as many lines as they need (no step ever hides its name); from 1280px,
   where all seven fit on one line in Greek too, a short hairline joins them. The current step is a lemon pill. */
.eventhead { display: grid; gap: var(--s2); padding-bottom: var(--s5); border-bottom: 1px solid var(--line); }
.eventhead__id { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin-top: var(--s1); }
.eventhead__name {
  min-width: 0; color: var(--ink);
  font: italic 900 2rem/1.02 var(--font-display); word-spacing: 0.12em; overflow-wrap: anywhere;
}
.eventhead__meta { display: flex; flex-wrap: wrap; gap: 0.15rem var(--s4); color: var(--stone); font-size: var(--fs-14); }
.eventhead__when { color: var(--ink); font-weight: 600; }
.eventhead__clock, .eventhead__tz { font: 500 var(--fs-14)/1.5 var(--font-mono); white-space: nowrap; }
.eventhead__clock { margin-left: 0.35rem; }
.eventhead__tz { color: var(--stone); }
@media (min-width: 640px) { .eventhead__name { font-size: var(--fs-48); } }

.rail { margin-top: var(--s3); }
.rail__list { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); margin: 0 0 0 -6px; padding: 0; list-style: none; }
.rail__item { display: flex; align-items: center; min-width: 0; }
.rail__step {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 6px 0.9rem 6px 6px;
  border-radius: var(--radius-pill); color: var(--ink); text-decoration: none;
}
a.rail__step:hover { color: var(--ink); background: var(--card); box-shadow: inset 0 0 0 1px var(--line-strong); }
a.rail__step:hover .rail__n { border-color: var(--ink); }
.rail__n {
  display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%;
  border: 1.5px solid var(--line-strong); background: var(--paper);
  font: 600 var(--fs-14)/1 var(--font-mono);
}
.rail__label { font-weight: 600; font-size: var(--fs-14); line-height: 1.25; }
.rail__item--current .rail__step { background: var(--lemon); }
.rail__item--current .rail__n { border-color: var(--ink); background: var(--ink); color: var(--lemon); }
.rail__step--later { color: var(--stone); }
.rail__step--later .rail__n { border-style: dashed; }
.rail__later { margin-top: var(--s2); color: var(--stone); font-size: var(--fs-14); }

@media (min-width: 1280px) {
  .rail__list { gap: var(--s1); }
  .rail__item + .rail__item::before {   /* a short hairline between two steps */
    content: ""; flex: none; width: 0.75rem; height: 1px; margin-right: var(--s1); background: var(--line-strong);
  }
}
/* Windows high contrast: backgrounds are dropped, so the current step (and the other "chosen" pills: the
   language, the admin tab) get a visible outline */
@media (forced-colors: active) {
  .rail__item--current .rail__step, .langswitch button[aria-pressed="true"], .subnav a[aria-current="page"] {
    outline: 2px solid CanvasText; outline-offset: -2px;
  }
}

.eventbody { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5); align-content: start; max-width: var(--measure); }
.eventbody--wide { max-width: none; }

/* ------------------------------------------------------------------ cards */
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card);
  box-shadow: var(--shadow); padding: var(--s4);
}
.formcard { display: grid; gap: var(--s4); }
.stack { display: grid; gap: var(--s4); }
.stack > .btn { justify-self: start; }
.section-title { color: var(--ink); font-weight: 700; font-size: var(--fs-18); line-height: 1.3; }
.prose { display: grid; gap: var(--s4); }
.hint { margin-top: var(--s4); color: var(--stone); font-size: var(--fs-15); }

@media (min-width: 600px) {
  .card { padding: var(--s5); }
  .formcard, .stack { gap: var(--s5); }
}

/* ------------------------------------------------------------------ buttons
   Primary (bloom, one per view where possible), secondary (white, ink outline), danger (error outline),
   quiet (an underlined text button). */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: var(--control-h); padding: 0.6rem 1.2rem;
  border: 1.5px solid transparent; border-radius: var(--radius);
  font: 600 var(--fs-16)/1.2 var(--font-body); text-align: center; text-decoration: none; cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { text-decoration: none; }
.btn--primary { background: var(--bloom); color: #fff; box-shadow: 0 1px 2px rgba(27, 21, 48, 0.14); }
.btn--primary:hover { background: var(--bloom-600); color: #fff; }
.btn--secondary { background: var(--card); color: var(--ink); border-color: var(--line-strong); }
.btn--secondary:hover { color: var(--ink); border-color: var(--ink); background: var(--paper); }
.btn--danger { background: var(--card); color: var(--error); border-color: var(--error); }
.btn--danger:hover { color: var(--error); background: var(--error-50); }
.btn--quiet {
  background: transparent; color: var(--ink); padding-inline: 0.6rem;
  text-decoration: underline; text-decoration-color: var(--bloom); text-decoration-thickness: 1.5px; text-underline-offset: 0.2em;
}
.btn--quiet:hover { color: var(--ink); background: rgba(27, 21, 48, 0.05); text-decoration: underline; text-decoration-color: var(--bloom); }
.btn--sm { min-height: 44px; padding: 0.45rem 0.9rem; font-size: var(--fs-14); }
.btn--icon { width: 44px; min-height: 44px; padding: 0; background: var(--card); color: var(--ink); border-color: var(--line-strong); }
.btn--icon:hover { border-color: var(--ink); background: var(--paper); }
.btn--icon.btn--danger { color: var(--error); }
.btn--icon.btn--danger:hover { border-color: var(--error); background: var(--error-50); }
.btn--block { width: 100%; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.35; cursor: not-allowed; }
.btn:disabled:hover { background: var(--card); border-color: var(--line-strong); }
.htmx-request .btn, .btn.htmx-request { opacity: 0.6; }
.btn.is-busy { opacity: 0.7; cursor: progress; }

.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-top: var(--s5); }
@media (max-width: 479px) {
  .form-actions .btn--primary { flex: 1 1 100%; }
}

/* ------------------------------------------------------------------ forms
   Labels above fields, hints under them, errors in words with a "!" mark; the summary at the top links to
   each field. */
.field { display: grid; gap: 0.4rem; align-content: start; min-width: 0; padding: 0; border: 0; }
.field > label, .field > legend { padding: 0; font-weight: 600; font-size: var(--fs-14); color: var(--ink); }
.field > legend { margin-bottom: 0.4rem; }
.field__optional { font-weight: 400; color: var(--stone); }
.field__optional::before { content: "("; }
.field__optional::after { content: ")"; }
.field__hint { font-size: var(--fs-15); color: var(--stone); }
.field__error { display: flex; gap: 0.45rem; align-items: flex-start; color: var(--error); font-size: var(--fs-14); font-weight: 600; }
.field__error::before {
  content: "!"; flex: none; width: 1.2rem; height: 1.2rem; margin-top: 0.1rem; border-radius: 50%;
  background: var(--error); color: #fff; font-size: 0.75rem; font-weight: 800; line-height: 1.2rem; text-align: center;
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }

.input {
  display: block; width: 100%; min-width: 0; min-height: var(--control-h); padding: 0.6rem 0.85rem;
  border: 1.5px solid var(--line-strong); border-radius: var(--radius); background: var(--card);
  color: var(--ink); font-size: var(--fs-16); line-height: 1.4;
  -webkit-appearance: none; appearance: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.input:hover { border-color: var(--ink); }
.input:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--ink); }
.input[readonly] { background: var(--paper); color: var(--stone); }
.input::-webkit-date-and-time-value { text-align: left; }
.input[type="date"], .input[type="time"], .input[type="tel"], .input[type="number"] { font-family: var(--font-mono); font-size: 0.9375rem; }
.textarea { min-height: 8rem; resize: vertical; line-height: 1.5; }
.select {
  padding-right: 2.5rem; cursor: pointer;
  background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231b1530' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 0.9rem center / 12px 8px;
}
.input--code { font: 600 1.375rem/1.4 var(--font-mono); letter-spacing: 0.3em; }
.field--error .input { border-color: var(--error); background-color: var(--error-50); }

input[type="radio"], input[type="checkbox"] { width: 1.2rem; height: 1.2rem; margin: 0; flex: none; accent-color: var(--bloom); }

.segmented { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.segmented__option, .kindopt {
  display: flex; gap: 0.6rem; min-height: var(--control-h); padding: 0.55rem 0.85rem; cursor: pointer;
  border: 1.5px solid var(--line-strong); border-radius: var(--radius); background: var(--card);
}
.segmented__option { align-items: center; font-weight: 600; }
.segmented__option:hover, .kindopt:hover { border-color: var(--ink); }
.segmented__option:has(input:checked), .kindopt:has(input:checked) {
  border-color: var(--ink); background: var(--lemon-50); box-shadow: inset 0 0 0 1px var(--ink);
}
.field--error .segmented__option, .field--error .kindopt { border-color: var(--error); }
fieldset:disabled .segmented__option { cursor: not-allowed; opacity: 0.65; }

.placeholders { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; margin: 0.45rem 0 0; padding: 0; list-style: none; }
.placeholders code, code {
  padding: 0.1rem 0.4rem; border: 1px solid var(--line); border-radius: 6px; background: var(--paper);
  color: var(--ink); font: 500 0.8125rem/1.4 var(--font-mono);
}

/* ------------------------------------------------------------------ badges
   Status in words, a pill, a colour that agrees: sea = yes / connected / active, plum = no or neutral,
   lemon = needs you, error red = failed, outlined = not yet. Never colour alone. */
.badge {
  display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.65rem; white-space: nowrap;
  border-radius: var(--radius-pill); background: var(--plum-50); color: var(--plum-ink);
  font-size: var(--fs-13); font-weight: 600; line-height: 1.4; letter-spacing: 0.01em;
}
.badge .icon { width: 14px; height: 14px; stroke-width: 2.25; }
.badge--draft { background: transparent; color: var(--plum-ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
.badge--active, .badge--coming { background: var(--sea-50); color: var(--sea-ink); }
.badge--archived { background: transparent; color: var(--stone); box-shadow: inset 0 0 0 1px var(--line-strong); }
.badge--invited, .badge--kind { background: var(--plum-50); color: var(--plum-ink); }
.badge--cant { background: var(--plum-100); color: var(--plum-ink); }
.badge--attention { background: var(--lemon); color: var(--ink); }
.badge--fixed { background: transparent; color: var(--stone); padding-inline: 0; }

/* ------------------------------------------------------------------ alerts and notices */
.alert {
  margin-bottom: var(--s4); padding: var(--s3) var(--s4); border: 1px solid; border-radius: var(--radius);
}
.alert--error { background: var(--error-50); border-color: var(--error-line); color: var(--error); box-shadow: inset 4px 0 0 var(--error); }
.alert--ok { background: var(--sea-50); border-color: var(--sea-line); color: var(--sea-ink); font-weight: 600; }
.alert__title { font-weight: 700; }
.alert__list { margin: 0.35rem 0 0; padding-left: 1.2rem; }
.alert a { color: inherit; font-weight: 600; text-decoration-color: currentColor; }
.alert:focus { outline: none; }
.alert:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.notice {
  display: flex; gap: var(--s3); align-items: flex-start; margin-bottom: var(--s4); padding: var(--s3) var(--s4);
  border: 1px solid var(--lemon-line); border-radius: var(--radius); background: var(--lemon-50); color: var(--ink);
}
.notice .icon { margin-top: 0.2rem; }
.notice__title { font-weight: 700; }

/* ------------------------------------------------------------------ poll (the signature)
   A WhatsApp-style poll result, in this palette: each option a fully rounded row with a check circle, its
   name and the count in mono; the row fills from the left to the option's share (--share, set inline).
   Used as <dl> rows: <div class="poll__row poll__row--KEY" style="--share: N%"><dt/><dd/></div>.
   The fill is a background, so it never gets in the way of the text; the count says it in figures. The
   templates keep --share within 0-100 % and so does clamp() here. On the guest list the rows may add up to
   more than 100 %: "needs attention" overlaps "coming" (a guest who said yes and then got stuck is in both). */
.poll { display: grid; gap: var(--s2); margin: 0; }
.poll__row {
  --fill: var(--plum-100);
  --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10.5' fill='%23fff' stroke='%238c88a0' stroke-width='1.5'/%3E%3C/svg%3E");
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--s3);
  min-height: 44px; margin: 0; padding: 0.35rem 1rem 0.35rem 0.45rem;
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  --at: clamp(0%, var(--share), 100%);
  background: linear-gradient(to right, var(--fill) var(--at), var(--card) var(--at));
  transition: --share 250ms var(--ease);
}
.poll__row > dt {
  display: flex; align-items: center; gap: 0.6rem; min-width: 0;
  color: var(--ink); font-weight: 600; font-size: var(--fs-14); line-height: 1.3;
}
.poll__row > dt::before {   /* the check circle */
  content: ""; flex: none; width: 1.75rem; height: 1.75rem; background: var(--mark) center / contain no-repeat;
}
.poll__row > dd { margin: 0; color: var(--ink); font: 700 var(--fs-18)/1 var(--font-mono); font-variant-numeric: tabular-nums; }

/* yes: a sea tick */
.poll__row--coming, .poll__row--sent {
  --fill: var(--sea-100);
  --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%232e8c83'/%3E%3Cpath d='M7 12.4l3.3 3.3L17.2 8.8' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* no: a plum cross */
.poll__row--cant {
  --fill: var(--plum-100);
  --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%234a4560'/%3E%3Cpath d='M8.5 8.5l7 7M15.5 8.5l-7 7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* not answered / waiting: a dashed circle on a hatched fill */
.poll__row--no_answer, .poll__row--queued {
  --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10.25' fill='%23fff' stroke='%236b6880' stroke-width='1.5' stroke-dasharray='3 2.4'/%3E%3C/svg%3E");
  background:
    linear-gradient(to right, transparent var(--at), var(--card) var(--at)),
    repeating-linear-gradient(-45deg, var(--plum-100) 0 5px, var(--plum-50) 5px 10px);
}
/* needs attention / paused: lemon, the "look here" colour */
.poll__row--attention {
  --fill: var(--lemon-200);
  --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23f6d63b' stroke='%231b1530' stroke-width='1.5'/%3E%3Cpath d='M12 6.5v7' stroke='%231b1530' stroke-width='2.4' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='17.2' r='1.4' fill='%231b1530'/%3E%3C/svg%3E");
}
.poll__row--paused {
  --fill: var(--lemon-200);
  --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23f6d63b' stroke='%231b1530' stroke-width='1.5'/%3E%3Cpath d='M9.8 8v8M14.2 8v8' stroke='%231b1530' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* failed: error red */
.poll__row--failed {
  --fill: var(--error-100);
  --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23b42318'/%3E%3Cpath d='M12 6.5v7' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='17.2' r='1.4' fill='%23fff'/%3E%3C/svg%3E");
}

/* a poll as an illustration: a question over its rows, in a card (the sign-in page) */
.pollcard {
  display: grid; gap: var(--s3); padding: var(--s5); max-width: 26rem;
  border-radius: var(--radius-card) var(--radius-card) var(--radius-card) 4px; background: var(--card);
  border: 1px solid var(--line); box-shadow: var(--shadow);
}
.pollcard__q { font: 700 var(--fs-18)/1.3 var(--font-body); }

/* ------------------------------------------------------------------ events list
   A card per event: the date tile, the name (Piazzolla), when (mono) and where; the answers so far as one
   poll row (coming, out of those invited) beside the invited and people figures; the event's seven steps as
   a quiet row of links. */
.event-list { display: grid; gap: var(--s4); margin: 0; padding: 0; list-style: none; }
.page > .event-list, .page > .pagehead--split { max-width: 64rem; }
.event-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s4); align-items: start; }
.event-card > .tally, .event-card > .event-card__actions { grid-column: 1 / -1; }
.datechip {
  display: grid; justify-items: center; align-content: center; width: 3.75rem; height: 4rem;
  border-radius: var(--radius); background: var(--ink); color: #fff;
}
.datechip__day { font: 900 1.75rem/1 var(--font-display); }
.datechip__month { margin-top: 0.3rem; color: rgba(255, 255, 255, 0.78); font: 600 var(--fs-13)/1 var(--font-mono); letter-spacing: 0.08em; }
.event-card__body { display: grid; gap: 0.2rem; min-width: 0; }
.event-card__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin-bottom: 0.1rem; }
.event-card__title { min-width: 0; font: 700 var(--fs-22)/1.15 var(--font-display); }
.event-card__title a { color: var(--ink); text-decoration: none; }
.event-card__title a:hover { text-decoration: underline; text-decoration-color: var(--bloom); text-decoration-thickness: 2px; }
.event-card__date { font-size: var(--fs-14); }
.event-card__when { font-weight: 600; }
.event-card__clock { margin-left: 0.3rem; font: 500 var(--fs-14)/1.5 var(--font-mono); white-space: nowrap; }
.event-card__tz { margin-left: 0.3rem; color: var(--stone); font: 400 var(--fs-13)/1.5 var(--font-mono); white-space: nowrap; }
.event-card__venue, .event-card__owner { color: var(--stone); font-size: var(--fs-14); }

.tally { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--s2) var(--s4); }
.tally__cell { display: grid; justify-items: end; min-width: 0; }
.tally__cell dt { color: var(--stone); font-size: var(--fs-13); font-weight: 600; line-height: 1.25; }
.tally__cell dd { margin: 0; color: var(--ink); font: 700 var(--fs-18)/1.2 var(--font-mono); font-variant-numeric: tabular-nums; }

.event-card__actions { padding-top: var(--s3); border-top: 1px solid var(--line); }
.minirail { display: flex; flex-wrap: wrap; gap: 0 var(--s1); margin: 0 0 0 calc(-1 * var(--s2)); padding: 0; list-style: none; }
.minirail__step {
  display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; padding: 0 0.6rem;
  border-radius: var(--radius-pill); color: var(--ink); font-size: var(--fs-14); font-weight: 600; text-decoration: none;
}
.minirail__step:hover { color: var(--ink); background: var(--paper); }
.minirail__n { color: var(--stone); font: 500 var(--fs-13)/1 var(--font-mono); }

@media (min-width: 760px) {
  .event-card { grid-template-columns: auto minmax(0, 1fr) minmax(16rem, 22rem); column-gap: var(--s5); }
  .event-card > .tally { grid-column: 3; grid-row: 1; align-self: center; }
  .event-card > .event-card__actions { grid-column: 2 / -1; }
}

/* ------------------------------------------------------------------ questions
   One card per question, numbered; a question's answer options are shown as the poll guests will see. */
.qpanel { margin-bottom: var(--s5); }
.qpanel:focus { outline: none; }
.qlist { display: grid; gap: var(--s3); margin: 0; padding: 0; list-style: none; }
.qrow {
  display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: var(--s3);
  padding: var(--s4); border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--card); box-shadow: var(--shadow);
}
.qrow--fixed { background: rgba(255, 255, 255, 0.55); box-shadow: none; border-style: dashed; border-color: var(--line-strong); }
.qrow__num {
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%;
  background: var(--ink); color: #fff; font: 600 var(--fs-16)/1 var(--font-mono);
}
.qrow--fixed .qrow__num { background: var(--plum-50); color: var(--plum-ink); }
.qrow__body { display: grid; gap: var(--s2); min-width: 0; }
.qrow__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s1) var(--s3); }
.qrow__text { min-width: 0; font-weight: 600; font-size: var(--fs-18); line-height: 1.35; }
.qrow__poll { color: var(--stone); font-size: var(--fs-14); }
.qrow__label::after { content: ":"; }
.qrow__poll q { color: var(--ink); }
.optchips { display: grid; gap: 0.35rem; max-width: 24rem; margin: 0; padding: 0; list-style: none; }
.optchips li {   /* an empty poll option, as the guest sees it before tapping */
  display: flex; align-items: center; gap: 0.55rem; min-height: 36px; padding: 0.25rem 0.9rem 0.25rem 0.4rem;
  border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--card); font-size: var(--fs-14);
}
.optchips li::before {
  content: ""; flex: none; width: 1.25rem; height: 1.25rem; border-radius: 50%; border: 1.5px solid var(--line-strong);
}
.qrow > .qrow__tools, .qrow > .qrow__confirm { grid-column: 1 / -1; }
.qrow__confirm { margin: 0; }
.qrow__confirm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-top: var(--s2); }
.qrow__confirm-actions form { margin: 0; }
.qrow__tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2); }
.qrow__order { display: flex; gap: var(--s2); margin-left: auto; }
.qrow__order form { margin: 0; }
.qedit { min-width: 0; }
.qedit > summary { list-style: none; margin-left: -0.6rem; }
.qedit > summary::-webkit-details-marker { display: none; }
.qedit > summary::after {
  content: ""; width: 0.45rem; height: 0.45rem; margin: -0.2rem 0 0 0.1rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg);
}
.qedit[open] { flex-basis: 100%; }
.qedit[open] > summary::after { margin-top: 0.25rem; transform: rotate(-135deg); }
.qedit__form { display: grid; gap: var(--s3); margin-top: var(--s2); padding: var(--s4); border-radius: var(--radius); background: var(--paper); }
.qedit__form .btn { justify-self: start; }
.qlist__empty { margin-top: var(--s3); color: var(--stone); }

.kindgrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.kindopt { align-items: flex-start; padding-block: 0.65rem; }
.kindopt input { margin-top: 0.15rem; }
.kindopt__name { display: block; font-weight: 600; line-height: 1.3; }
.kindopt__hint { display: block; margin-top: 0.1rem; color: var(--stone); font-size: var(--fs-13); line-height: 1.35; }
/* the options box only matters for a Choice question */
.addq:has(input[name="kind"]:checked):not(:has(input[name="kind"][value="choice"]:checked)) .field--options { display: none; }

@media (min-width: 640px) {
  .qrow > .qrow__tools, .qrow > .qrow__confirm { grid-column: 2; }
  .kindgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------------ invitation
   The current picture/video, its "Play as GIF" switch, the upload form and the message as a guest reads it. */
.invmessage { margin-top: var(--s4); }
.invmessage .notice { margin-bottom: 0; }
.mediaframe { display: grid; gap: var(--s2); justify-items: start; margin: 0; }
.mediaframe__item {
  display: block; max-width: 100%; max-height: min(70vh, 34rem); width: auto; height: auto;
  border-radius: var(--radius); background: var(--ink); box-shadow: 0 0 0 1px var(--line), var(--shadow);
}
.mediaframe__caption { color: var(--stone); font-size: var(--fs-14); }
.gifform {
  display: grid; gap: var(--s2); justify-items: start;
  padding: var(--s3) var(--s4); border-radius: var(--radius); background: var(--paper);
}
.checkline { display: flex; gap: 0.6rem; align-items: flex-start; font-weight: 600; cursor: pointer; }
.checkline input { margin-top: 0.2rem; }
.confirmbox { margin: 0; }
.confirmbox__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-top: var(--s2); }
.confirmbox__actions form { margin: 0; }
.uploadform { display: grid; gap: var(--s3); justify-items: start; padding-top: var(--s4); border-top: 1px solid var(--line); }
.uploadform > .field { width: 100%; }
.input--file { padding: 0.45rem; cursor: pointer; font-size: var(--fs-14); }
.input--file::file-selector-button {
  margin-right: 0.75rem; padding: 0.5rem 0.9rem; cursor: pointer;
  border: 1.5px solid var(--line-strong); border-radius: 8px; background: var(--card);
  color: var(--ink); font: 600 var(--fs-14)/1.2 var(--font-body);
}
.input--file::file-selector-button:hover { border-color: var(--ink); background: var(--paper); }
.bubble {   /* a message as the guest receives it, *bold* markers included; not WhatsApp's colours */
  max-width: 34rem; padding: var(--s3) var(--s4);
  border-radius: var(--radius-card) var(--radius-card) var(--radius-card) 4px; background: var(--sea-50);
  box-shadow: 0 1px 0 rgba(27, 21, 48, 0.1); white-space: pre-wrap; overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------ empty state
   Says what's missing and offers the next step. The ghost poll: three empty option rows, a poll before
   anyone answered. */
.empty { display: grid; justify-items: start; gap: var(--s3); padding-block: var(--s6); }
.empty__title { color: var(--ink); font: 700 var(--fs-22)/1.15 var(--font-display); }
.empty__text { max-width: 34rem; color: var(--stone); }
.empty .btn { margin-top: var(--s2); }
.ghostpoll { display: grid; gap: 0.4rem; width: min(100%, 16rem); margin-bottom: var(--s2); }
.ghostpoll span {
  display: flex; align-items: center; height: 30px; padding-left: 5px;
  border: 1px dashed var(--line-strong); border-radius: var(--radius-pill);
}
.ghostpoll span::before { content: ""; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--line-strong); }
.ghostpoll span:nth-child(2) { width: 82%; }
.ghostpoll span:nth-child(3) { width: 64%; }

/* ------------------------------------------------------------------ auth
   Sign in: the form, and beside it (from 900px) the poll a guest answers, filling up. */
.page--auth > * { max-width: none; }
.authpage { display: grid; gap: var(--s7); align-items: center; width: 100%; max-width: 64rem; margin-inline: auto; }
.authpage__main { max-width: 28rem; width: 100%; }
.authpage__art { display: none; }
@media (min-width: 900px) {
  .page--auth { padding-top: var(--s8); }
  .authpage { grid-template-columns: minmax(0, 28rem) minmax(0, 1fr); }
  .authpage__art { display: grid; justify-items: center; }
  .authpage__art .pollcard { width: 100%; transform: rotate(-1.5deg); }
}

/* ------------------------------------------------------------------ motion
   Little of it, all of it purposeful: the poll fills slide when a poll refresh changes a share. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
}

/* ------------------------------------------------------------------ admin (Task 12)
   The admin pages: a wider page (.page--wide), section tabs (.subnav), stat cards, data tables, the copyable
   sign-up link, confirmation boxes and admin badges. Data tables are mobile first: every row is a card of
   labelled lines (td[data-label]::before; the column headers stay for screen readers), two cards a row from
   760px, and a real table only from 1120px, where even the long Greek labels fit. The markup repeats the
   table roles (role="row", "cell" ...) so rows shown as blocks keep their semantics. */
.subnav {   /* one row that scrolls sideways on phones (like .mainnav); the padding keeps focus rings visible */
  display: flex; gap: var(--s2); margin: calc(-1 * var(--s2)) calc(-1 * var(--s2)) var(--s5); padding: var(--s2);
  overflow-x: auto; scrollbar-width: none;
}
.subnav::-webkit-scrollbar { display: none; }
.subnav a {
  display: inline-flex; flex: none; align-items: center; min-height: 44px; padding: 0 1rem; white-space: nowrap;
  border: 1.5px solid var(--line-strong); border-radius: var(--radius-pill); background: var(--card);
  color: var(--ink); font-weight: 600; font-size: var(--fs-14); text-decoration: none;
}
.subnav a:hover { border-color: var(--ink); color: var(--ink); }
.subnav a[aria-current="page"] { background: var(--lemon); border-color: var(--ink); color: var(--ink); }

.statgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); margin: 0 0 var(--s5); }
.stat { display: flex; flex-direction: column; justify-content: space-between; gap: var(--s2); padding: var(--s4); }
.stat__label { color: var(--stone); font-size: var(--fs-13); font-weight: 600; line-height: 1.3; }
.stat__value { margin: 0; color: var(--ink); font: 700 var(--fs-36)/1 var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

.admin-sections { display: grid; gap: var(--s3); margin: 0; padding: 0; list-style: none; }
.admin-section { display: grid; gap: var(--s1); align-content: start; }
.admin-section__title { font: 700 var(--fs-22)/1.2 var(--font-display); }
.admin-section__title a { color: var(--ink); text-decoration: none; }
.admin-section__title a::after { content: " \2192"; color: var(--bloom); font-family: var(--font-mono); }
.admin-section__title a:hover { text-decoration: underline; text-decoration-color: var(--bloom); text-decoration-thickness: 2px; }
.admin-section__text { color: var(--stone); font-size: var(--fs-14); }

@media (min-width: 640px) {
  .statgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .admin-sections { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1120px) {
  .statgrid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .admin-sections { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.admin-block { margin-top: var(--s6); }
.admin-block__title { margin-bottom: var(--s3); color: var(--ink); font: 700 var(--fs-22)/1.15 var(--font-display); }
.admin-empty { color: var(--stone); }

.newlink { margin-bottom: var(--s4); box-shadow: inset 4px 0 0 var(--lemon), var(--shadow); }
.copyfield { display: flex; flex-wrap: wrap; gap: var(--s2); }
.copyfield__input { flex: 1 1 18rem; font: 500 0.875rem/1.4 var(--font-mono); }
.copyfield__input[readonly] { background: var(--paper); color: var(--ink); }

.badge--user-active, .badge--link-connected { background: var(--sea-50); color: var(--sea-ink); }
.badge--user-disabled { background: var(--error-50); color: var(--error); }
.badge--link-pending { background: var(--plum-50); color: var(--plum-ink); }
.badge--link-disconnected { background: var(--error-50); color: var(--error); }
.badge--link-logged_out { background: transparent; color: var(--stone); box-shadow: inset 0 0 0 1px var(--line-strong); }
.badge--you { background: var(--lemon); color: var(--ink); }

/* data tables: phones first (each row a card) */
.datatable { width: 100%; border-collapse: collapse; }
.datatable thead {
  position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.datatable tbody { display: grid; gap: var(--s3); }
.datatable tr {
  display: grid; padding: var(--s3) var(--s4);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow);
}
.datatable th, .datatable td { min-width: 0; padding: 0.4rem 0; text-align: left; font-weight: 400; vertical-align: middle; }
.datatable td[data-label] {
  display: grid; grid-template-columns: minmax(6.5rem, 38%) minmax(0, 1fr); gap: var(--s3); align-items: baseline;
  justify-items: start; border-top: 1px solid var(--line);
}
.datatable td[data-label]::before { content: attr(data-label); color: var(--stone); font: 600 var(--fs-13)/1.4 var(--font-body); }
.datatable .datatable__title {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2); padding: 0 0 var(--s2);
  color: var(--ink); font: 700 var(--fs-18)/1.25 var(--font-body); overflow-wrap: anywhere;
}
.datatable .datatable__actions { padding-top: var(--s3); }
td.datatable__num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.datatable__mono { font: 400 0.8125rem/1.4 var(--font-mono); overflow-wrap: break-word; }
.datatable__phone { white-space: nowrap; }
.datatable__sub { color: var(--stone); font-size: var(--fs-14); }
.datatable__stack { display: grid; }
.datatable td[data-label] > *, .datatable__stack > * { min-width: 0; max-width: 100%; }   /* long emails wrap, never widen the page */
.datatable__note { color: var(--stone); font-size: var(--fs-14); }
.datatable time { font: 400 var(--fs-14)/1.4 var(--font-mono); }
.rowactions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.rowactions form { margin: 0; }

.capcell { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s2); }
.capedit > summary { list-style: none; margin-left: -0.6rem; }
.capedit > summary::-webkit-details-marker { display: none; }
.capedit[open] { flex-basis: 100%; }
.capform { display: grid; gap: var(--s2); margin-top: var(--s2); padding: var(--s3); border-radius: var(--radius); background: var(--paper); }
.capform__label { font-weight: 600; font-size: var(--fs-14); }
.capform__row { display: flex; flex-wrap: wrap; gap: var(--s2); }
.capform__input { width: 7rem; }

@media (min-width: 760px) {
  .datatable tbody { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}

@media (min-width: 1120px) {
  .tablewrap {   /* scrolls sideways only if an extreme value (a very long email) makes the table too wide */
    overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--card);
    box-shadow: var(--shadow);
  }
  .datatable thead { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal; }
  .datatable tbody { display: table-row-group; }
  .datatable tr { display: table-row; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
  .datatable tbody tr:hover { background: rgba(243, 244, 248, 0.6); }
  .datatable th, .datatable td, .datatable td[data-label] {
    display: table-cell; padding: 0.75rem 0.75rem; border-top: 1px solid var(--line);
  }
  .datatable td[data-label]::before { content: none; }
  .datatable thead th {
    padding-block: 0.6rem; border-top: 0; background: var(--paper); color: var(--stone);
    font-size: var(--fs-13); font-weight: 700; letter-spacing: 0.02em;
  }
  .datatable .datatable__title {
    display: table-cell; padding: 0.75rem 0.75rem; font: 700 var(--fs-16)/1.3 var(--font-body);
    overflow-wrap: break-word;   /* whole words in a table: "anywhere" would let the column shrink mid-word */
  }
  .datatable .datatable__title .badge { margin-left: var(--s1); }
  .datatable .datatable__actions { padding-top: 0.75rem; }
  .datatable .datatable__num { text-align: right; }
  .datatable time { white-space: nowrap; }
  .rowactions { justify-content: flex-end; }
}
/* ================================================================== WhatsApp numbers (Task 9b)
   /numbers (list + add), /numbers/{id}/link (steps + polled QR code), an event's "Send from" page.
   Badges in words: connected (sea) / waiting for the code (plum) / reconnecting (outlined) / not connected
   (error) / code expired (lemon) / removed (outlined, quiet). */
.badge--wa-connected { background: var(--sea-50); color: var(--sea-ink); }
.badge--wa-pending { background: var(--plum-50); color: var(--plum-ink); }
.badge--wa-reconnecting { background: transparent; color: var(--plum-ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
.badge--wa-disconnected { background: var(--error-50); color: var(--error); }
.badge--wa-expired { background: var(--lemon); color: var(--ink); }
.badge--wa-logged_out { background: transparent; color: var(--stone); box-shadow: inset 0 0 0 1px var(--line-strong); }

.numlist { display: grid; gap: var(--s4); margin: 0 0 var(--s5); padding: 0; list-style: none; }
.numcard { display: grid; gap: var(--s2); }
.numcard__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s1) var(--s3); }
.numcard__label { min-width: 0; color: var(--ink); font: 700 var(--fs-22)/1.15 var(--font-display); }
.numcard__meta { display: flex; flex-wrap: wrap; gap: 0 var(--s4); color: var(--stone); font-size: var(--fs-14); }
.numcard__phone { color: var(--ink); font: 500 var(--fs-14)/1.5 var(--font-mono); white-space: nowrap; }
.numcard__help { color: var(--stone); font-size: var(--fs-15); }
.numcard__help--disconnected { color: var(--error); font-weight: 600; }
.numcard__confirm { margin: var(--s1) 0 0; }
.numcard__confirm-actions, .numcard__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.numcard__confirm-actions { margin-top: var(--s2); }
.numcard__confirm-actions form, .numcard__actions form { margin: 0; }
.numcard__actions:not(:empty) { margin-top: var(--s2); }
.numbers-add__limit { color: var(--stone); }

/* link page: the steps, then the code; side by side from tablet width */
.linkpage { display: grid; gap: var(--s4); align-items: start; }
.page > .linkpage { max-width: 60rem; }
.steps { display: grid; gap: var(--s3); margin: var(--s4) 0 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { position: relative; padding-left: 2.6rem; counter-increment: step; min-height: 1.9rem; padding-top: 0.15rem; }
.steps li::before {
  content: counter(step); position: absolute; left: 0; top: 0;
  display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%;
  background: var(--ink); color: #fff; font: 600 var(--fs-14)/1 var(--font-mono);
}
.linkbox, .linkstate { display: grid; justify-items: center; gap: var(--s3); text-align: center; }
.linkbox form { margin: 0; }
.linkstate__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--s2); }
.qr {
  display: block; width: 100%; max-width: 18rem; height: auto; padding: 10px; background: #fff;
  border-radius: var(--radius-card); box-shadow: 0 0 0 1px var(--line), 0 0 0 7px var(--lemon-50), 0 0 0 8px var(--lemon-line);
}
.linkstate__hint, .linkstate__wait { color: var(--stone); font-size: var(--fs-15); }
.linkstate__wait { padding-block: var(--s6); }
.linkstate__title { color: var(--ink); font: 700 var(--fs-22)/1.2 var(--font-display); }
.linkstate--connected .linkstate__title { color: var(--sea-ink); }
.linkstate--expired .linkstate__title { color: var(--ink); }

@media (min-width: 720px) {
  .linkpage { grid-template-columns: minmax(0, 1fr) minmax(0, 21rem); }
}

/* "Send from": one checkbox row per number */
.numpick { display: grid; gap: var(--s2); }
.numopt {
  display: flex; gap: 0.75rem; align-items: flex-start; min-height: var(--control-h); padding: 0.7rem 0.9rem; cursor: pointer;
  border: 1.5px solid var(--line-strong); border-radius: var(--radius); background: var(--card);
}
.numopt input { margin-top: 0.2rem; }
.numopt:hover { border-color: var(--ink); }
.numopt:has(input:checked) { border-color: var(--ink); background: var(--lemon-50); box-shadow: inset 0 0 0 1px var(--ink); }
.numopt--off { cursor: not-allowed; border-style: dashed; }
.numopt--off:hover { border-color: var(--line-strong); }
.numopt--off .numopt__name { color: var(--stone); }
.numopt__text { display: grid; gap: 0.25rem; min-width: 0; }
.numopt__name { font-weight: 600; line-height: 1.3; }
.numopt__about { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem var(--s2); color: var(--stone); font-size: var(--fs-14); }
.numopt__phone { font: 500 var(--fs-14)/1.5 var(--font-mono); white-space: nowrap; }
/* ================================================================== end WhatsApp numbers (Task 9b) */
/* ------------------------------------------------------------------ guest list (Task 11)
   Totals (polled every 5 s) as a poll with the headcount beside it, filter chips, the guest table (stacked
   cards on phones), the guest page with its WhatsApp conversation and the correction form. Guest status
   badges: coming / cant / no_answer / not_invited / not_delivered / attention - always with their name in
   words, never colour alone. */
.totals-panel { display: grid; gap: var(--s4); max-width: var(--measure); margin-bottom: var(--s5); }
#totals { display: grid; gap: var(--s4); }
.headcount { display: flex; }
.headcount__item { display: flex; flex-direction: row-reverse; align-items: baseline; gap: var(--s2); }
.headcount dt { color: var(--stone); font-weight: 600; font-size: var(--fs-14); }
.headcount dd { margin: 0; color: var(--ink); font: 700 var(--fs-36)/1 var(--font-mono); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.totals-more { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s5); color: var(--stone); font-size: var(--fs-14); }
.totals-more__item { display: flex; gap: 0.35rem; }
.totals-more dt::after { content: ":"; }
.totals-more dd { margin: 0; color: var(--ink); font: 600 var(--fs-14)/1.55 var(--font-mono); }

@media (min-width: 760px) {
  #totals { grid-template-columns: 11rem minmax(0, 1fr); column-gap: var(--s6); align-items: start; }
  .headcount { grid-row: 1 / 3; padding-top: var(--s1); }
  .headcount__item { flex-direction: column-reverse; align-items: flex-start; gap: var(--s1); }
  .headcount dd { font-size: var(--fs-48); }
  .totals-more { grid-column: 2; }
}

.chips { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s4); }
.chip {
  display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; padding: 0 1rem;
  border: 1.5px solid var(--line-strong); border-radius: var(--radius-pill); background: var(--card);
  color: var(--ink); font-weight: 600; font-size: var(--fs-14); text-decoration: none;
}
.chip:hover { color: var(--ink); border-color: var(--ink); background: var(--paper); }
.chip[aria-current="page"] { border-color: var(--ink); background: var(--lemon); color: var(--ink); }
.chip[aria-current="page"]::before {   /* a tick, so the chosen chip is not told by colour alone */
  content: ""; width: 0.35rem; height: 0.7rem; margin: -0.15rem 0.1rem 0 0;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg);
}

.badge--no_answer { background: transparent; color: var(--plum-ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
.badge--not_invited { background: transparent; color: var(--stone); box-shadow: inset 0 0 0 1px var(--line-strong); }
.badge--not_delivered { background: var(--error-50); color: var(--error); box-shadow: inset 0 0 0 1px var(--error-line); }

.guesttable-wrap {
  overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--card);
  box-shadow: var(--shadow);
}
.guesttable-wrap:focus-visible { outline-offset: 2px; }
.guesttable { width: 100%; border-collapse: collapse; font-size: var(--fs-14); }
.guesttable caption { padding: var(--s3) var(--s4); text-align: left; color: var(--ink); font-weight: 700; }
.guesttable th, .guesttable td { padding: 0.65rem 0.8rem; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.guesttable thead th { min-width: 6rem; color: var(--stone); font-size: var(--fs-13); font-weight: 700; background: var(--paper); }
.guesttable__name { min-width: 10rem; font-weight: 400; }
.guesttable__name a { color: var(--ink); font-weight: 700; text-decoration-color: var(--line-strong); }
.guesttable__name a:hover { text-decoration-color: var(--bloom); }
.guesttable td[data-col="phone"], .guesttable td.guesttable__num { font-family: var(--font-mono); font-size: 0.8125rem; }
.guesttable .guesttable__num { text-align: right; font-variant-numeric: tabular-nums; }
.guesttable__answer { max-width: 16rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.guesttable tbody tr:hover { background: rgba(243, 244, 248, 0.7); }
.guesttable-empty { color: var(--stone); }

@media (max-width: 699px) {   /* phones: each guest is a card, each value with its column's name */
  .guesttable-wrap { overflow: visible; border: 0; background: transparent; box-shadow: none; }
  .guesttable, .guesttable caption, .guesttable tbody, .guesttable tr, .guesttable th, .guesttable td { display: block; }
  .guesttable thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .guesttable caption { padding: 0 0 var(--s2); }
  .guesttable tr {
    margin-bottom: var(--s3); padding: var(--s3) var(--s4); border: 1px solid var(--line);
    border-radius: var(--radius-card); background: var(--card); box-shadow: var(--shadow);
  }
  .guesttable tbody tr:hover { background: var(--card); }
  .guesttable th[scope="row"] { padding: 0 0 var(--s2); border: 0; font-size: var(--fs-16); }
  .guesttable td {
    display: grid; grid-template-columns: minmax(6.5rem, 38%) minmax(0, 1fr); gap: var(--s3);
    padding: 0.4rem 0; max-width: none;
  }
  .guesttable td::before {   /* the column name; "/ ''" keeps screen readers from reading it twice */
    content: attr(data-label); content: attr(data-label) / "";
    color: var(--stone); font: 600 var(--fs-13)/1.5 var(--font-body); white-space: normal;
  }
  .guesttable .guesttable__num { text-align: left; }
  .guesttable td > .badge { justify-self: start; white-space: normal; }
}

.guestgrid { display: grid; gap: var(--s4); margin-bottom: var(--s4); }
.guestcard { display: grid; gap: var(--s3); align-content: start; }
.facts { display: grid; }
.facts > div {
  display: grid; grid-template-columns: minmax(7rem, 40%) minmax(0, 1fr); gap: var(--s3);
  padding: 0.5rem 0; border-top: 1px solid var(--line);
}
.facts > div:first-child { border-top: 0; padding-top: 0; }
.facts dt { color: var(--stone); font-size: var(--fs-14); font-weight: 600; }
.facts dd { margin: 0; min-width: 0; }
.facts dd.nowrap, .facts time { font: 500 var(--fs-14)/1.55 var(--font-mono); }
.facts__text { white-space: pre-wrap; overflow-wrap: anywhere; }
.guestlog { display: grid; gap: var(--s3); margin-bottom: var(--s4); }
.guestlog__lead, .guestlog__empty { color: var(--stone); font-size: var(--fs-15); }
.chatlog {
  display: grid; gap: var(--s2); margin: 0; padding: var(--s4); list-style: none;
  border-radius: var(--radius); background: var(--paper);
}
.chatlog__msg {
  display: grid; gap: 0.15rem; max-width: min(34rem, 88%); padding: var(--s2) var(--s3);
  border-radius: var(--radius-card); box-shadow: 0 1px 0 rgba(27, 21, 48, 0.1);
}
.chatlog__msg--in { justify-self: start; background: var(--card); border-bottom-left-radius: 4px; }
.chatlog__msg--out { justify-self: end; background: var(--sea-50); border-bottom-right-radius: 4px; }
.chatlog__meta { color: var(--stone); font-size: var(--fs-13); font-weight: 600; }
.chatlog__meta time { font-family: var(--font-mono); font-weight: 400; }
.chatlog__who { color: var(--ink); }
.chatlog__text { white-space: pre-wrap; overflow-wrap: anywhere; }
.input--short { max-width: 12rem; }
.textarea--short { min-height: 5.5rem; }

@media (min-width: 760px) {
  .guestgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ------------------------------------------------------------------ end guest list (Task 11) */
/* ================================================================== choosing guests (Task 10b)
   /events/{id}/contacts: the contact search, the merged contact list (one checkbox row per contact, with its
   "send from" choice when it is on several numbers), "add by phone number", and the chosen guests who are not
   invited yet. Rows are mobile first: checkbox + name/number, the badge or the choice below; on one line from
   720px. A ticked row turns lemon (the selection colour). The add button stays in view at the bottom of a long
   list. */
.pickcard, .chosencard { display: grid; gap: var(--s4); margin-bottom: var(--s5); }
.pickmanual { margin-bottom: var(--s5); }
.pickcard > .alert { margin-bottom: 0; }
.pickcard__text, .chosencard__count { color: var(--stone); }
.alert--warn { background: var(--lemon-50); border-color: var(--lemon-line); color: var(--ink); }
.badge--listed { background: var(--plum-50); color: var(--plum-ink); }
.badge--queued { background: transparent; color: var(--plum-ink); box-shadow: inset 0 0 0 1px var(--line-strong); }

.picksearch { display: grid; gap: 0.4rem; }
.picksearch > label { font-weight: 600; font-size: var(--fs-14); }
.picksearch__row { display: flex; gap: var(--s2); }
.picksearch__row .input { flex: 1 1 auto; }
.pickcount { color: var(--stone); font-size: var(--fs-14); }
.pickform { display: grid; gap: var(--s3); }
.picklist { display: grid; gap: var(--s2); margin: 0; padding: 0; list-style: none; }
.pickrow {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--s2) 0.75rem;
  min-height: var(--control-h); padding: 0.6rem 0.9rem;
  border: 1.5px solid var(--line); border-radius: var(--radius); background: var(--card);
}
.pickrow:hover { border-color: var(--line-strong); }
.pickrow:has(input[type="checkbox"]:checked) { border-color: var(--ink); background: var(--lemon-50); box-shadow: inset 0 0 0 1px var(--ink); }
.pickrow--taken { border-style: dashed; border-color: var(--line-strong); background: transparent; }
.pickrow--taken .pickrow__name { color: var(--stone); }
.pickrow__label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s3); min-width: 0; cursor: pointer; }
.pickrow--taken .pickrow__label { cursor: default; }
.pickrow__name { font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.pickrow__name--none, .chosenrow__name--none { color: var(--stone); font-weight: 400; font-style: italic; }
.pickrow__phone { color: var(--stone); font: 400 0.8125rem/1.5 var(--font-mono); white-space: nowrap; }
.pickrow__greeting { flex-basis: 100%; color: var(--stone); font-size: var(--fs-14); overflow-wrap: anywhere; }
.pickrow__badge, .pickrow__from { grid-column: 2; justify-self: start; }
.pickrow__from { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2); }
.pickrow__from label { color: var(--stone); font-size: var(--fs-14); }
.pickrow__from .select { width: auto; max-width: 100%; min-height: 44px; padding-block: 0.4rem; }
.pickform__actions {
  position: sticky; bottom: 0; z-index: 1; padding-block: var(--s3); border-top: 1px solid var(--line); background: var(--card);
}

.field-row--manual { align-items: start; }

.chosenlist { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.chosenrow { display: grid; gap: var(--s2); padding-block: var(--s3); border-bottom: 1px solid var(--line); }
.chosenrow__main { display: grid; gap: 0.2rem; min-width: 0; }
.chosenrow__name { font-weight: 600; overflow-wrap: anywhere; }
.chosenrow__greeting { color: var(--stone); font-size: var(--fs-14); overflow-wrap: anywhere; }
.chosenrow__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem var(--s3); color: var(--stone); font-size: var(--fs-14); }
.chosenrow__phone { color: var(--ink); font: 400 0.8125rem/1.5 var(--font-mono); white-space: nowrap; }
.chosenrow__actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s2); }
.chosenrow__actions form { margin: 0; }
.chosenrow__confirm { margin: 0; }
.chosenrow__confirm .chosenrow__actions { margin-top: var(--s2); }
.chosenrow__hint { align-self: center; color: var(--stone); font-size: var(--fs-14); }
.chosenedit { min-width: 0; }
.chosenedit > summary { list-style: none; margin-left: -0.6rem; }
.chosenedit > summary::-webkit-details-marker { display: none; }
.chosenedit[open] { flex-basis: 100%; }
.chosenedit__form { display: grid; gap: var(--s3); max-width: 28rem; margin-top: var(--s2); padding: var(--s4); border-radius: var(--radius); background: var(--paper); }
.chosenedit__form .btn { justify-self: start; }
.chosencard__next { display: flex; }

@media (max-width: 599px) {
  .field-row--manual { grid-template-columns: 1fr; }
}
@media (min-width: 720px) {
  .pickrow { grid-template-columns: auto minmax(0, 1fr) auto; }
  .pickrow__badge, .pickrow__from { grid-column: 3; justify-self: end; }
}
/* ================================================================== end choosing guests (Task 10b) */

/* ================================================================== sending (Task 10a)
   An event's send page: the progress block (a poll of sent / waiting / paused / not sent; the only element
   htmx polls; nothing focusable in it), the event's sending numbers with their day and "Test to myself", and
   the guests not invited yet. Guest states are badges with words (never colour alone): not sent / waiting /
   paused / couldn't be sent. */
.sendcard { display: grid; gap: var(--s3); margin-bottom: var(--s4); }
.sendcard__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.sendcard__actions form, .sendcard__all { margin: 0; }
.sendcard__all { justify-self: start; }

.sendstats { display: grid; gap: var(--s3); }
.sendstats__state { color: var(--stone); font-size: var(--fs-14); }
.sendstats--sending .sendstats__state { color: var(--ink); font-weight: 600; }
.sendstats--paused .sendstats__state { color: var(--ink); font-weight: 600; }

.sendnums, .sendlist { display: grid; gap: var(--s2); margin: 0; padding: 0; list-style: none; }
.sendnum, .sendrow {
  display: grid; gap: 0.3rem; padding: 0.75rem 0.9rem;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--card);
}
.sendnum__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s1) var(--s3); }
.sendnum__name { min-width: 0; font-weight: 700; }
.sendnum__day { color: var(--stone); font-size: var(--fs-14); }
.sendnum__test { display: grid; gap: var(--s1); justify-items: start; margin: 0; }
.sendnum__tested { font-size: var(--fs-14); font-weight: 600; color: var(--plum-ink); }
.sendnum__tested--done { color: var(--sea-ink); }
.sendnum__tested--failed { color: var(--error); }

.sendrow__who { display: grid; min-width: 0; }
.sendrow__name { font-weight: 700; }
.sendrow__phone { color: var(--stone); font: 400 0.8125rem/1.5 var(--font-mono); white-space: nowrap; }
.sendrow__number { color: var(--stone); font-size: var(--fs-14); }
.sendrow__problem { color: var(--error); font-weight: 600; }
.sendrow__status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.sendrow__when { color: var(--stone); font: 400 0.8125rem/1.5 var(--font-mono); }
.sendrow__action { margin: 0; }
.sendrow__note { color: var(--ink); font-size: var(--fs-14); font-weight: 600; }
.sendnum__waiting { color: var(--ink); font-size: var(--fs-14); font-weight: 600; }

@media (min-width: 720px) {
  .sendrow { grid-template-columns: minmax(0, 2fr) minmax(0, 1.3fr) minmax(0, 1.6fr) 8.5rem; align-items: center; gap: var(--s3); }
  .sendrow__action { justify-self: end; }
  .sendrow__note { grid-column: 1 / -1; }
}

.badge--send-none { background: transparent; color: var(--plum-ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
.badge--send-queued { background: var(--plum-50); color: var(--plum-ink); }
.badge--send-paused { background: var(--lemon); color: var(--ink); }
.badge--send-failed { background: var(--error-50); color: var(--error); }

.sendempty { display: grid; gap: var(--s2); justify-items: start; padding: var(--s4); border-radius: var(--radius); background: var(--paper); }
.sendempty__title { color: var(--ink); font-weight: 700; }
/* ================================================================== end sending (Task 10a) */
/* ================================================================== messages (editable guest messages)
   The questions page: the fixed questions' "Edit wording" (answer buttons), and "Messages guests receive" -
   one row per bot reply with its preview bubble, an edit form (placeholder chips, live preview) and a reset. */
.qedit__buttons { display: grid; gap: var(--s3); }
.qedit__buttons > legend { margin-bottom: 0; }
.qedit__reset { margin-top: var(--s2); }
.msgs { display: grid; gap: var(--s3); margin-top: var(--s5); scroll-margin-top: var(--s4); }
.msgs > .alert { margin-bottom: 0; }
.msglist { display: grid; gap: var(--s4); margin: 0; padding: 0; list-style: none; }
.msgrow { display: grid; gap: var(--s2); min-width: 0; padding-top: var(--s4); border-top: 1px solid var(--line); scroll-margin-top: var(--s4); }
.msgrow__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s1) var(--s3); }
.msgrow__when { min-width: 0; font-size: var(--fs-16); font-weight: 600; line-height: 1.35; color: var(--ink); }
.msgrow__saved { color: var(--sea-ink); font-size: var(--fs-14); font-weight: 600; }
.badge--custom { background: var(--lemon); color: var(--ink); }
.msgedit .qedit__form { margin-top: var(--s2); }
.msgedit__preview { display: grid; gap: var(--s1); }
.msgedit__default { display: grid; gap: var(--s2); justify-items: start; margin-top: var(--s3); }
.msgedit__default form { margin: 0; }
.bubble--live { background: var(--card); border: 1px dashed var(--sea-line); min-height: 2.75rem; }
.bubble--default { background: var(--card); color: var(--stone); box-shadow: none; border: 1px solid var(--line); }
.phmark { padding: 0 0.15em; border-radius: 3px; background: var(--lemon-200); color: var(--ink); box-shadow: inset 0 -2px 0 var(--lemon-line); }
.msgedit__note { color: var(--error); font-size: var(--fs-14); font-weight: 600; }
.msgrow:focus { outline: none; }
.msgrow:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: var(--radius); }
.phchip {
  display: inline-flex; align-items: center; min-height: 32px; margin: 0; padding: 0; border: 0; background: none; cursor: pointer;
}
.phchip code { cursor: pointer; }
.phchip:hover code { border-color: var(--ink); background: var(--card); }
.phchip:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; border-radius: 6px; }
.phchip__needed { color: var(--bloom-ink); font-size: var(--fs-13); font-weight: 700; }
.msgedit .placeholders { gap: 0.35rem 1rem; }
.msgedit .placeholders li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
.msgadvanced { padding-top: var(--s3); border-top: 1px solid var(--line); }
.msgadvanced > summary {
  display: flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 600; color: var(--ink);
}
.msgadvanced > .field__hint { margin-bottom: var(--s2); }
@media (max-width: 479px) {
  .msgedit .placeholders { display: grid; }
}
/* ================================================================== end messages */
/* ================================================================== co-organizers
   The "Co-organizers" link in an event's head (not a step of the rail); the team page: the join link shown once,
   with "Share via WhatsApp", the organizers and the open invitations as rows (on one line with their button from
   720px); the join page; the other organizers' numbers on "Send from" (read-only, dashed); "by organizer" on the
   send page; who added a guest and a number that no longer sends ("number removed"); the live contact search. */
.eventhead__team { display: flex; flex-wrap: wrap; gap: 0 var(--s4); margin: 0; font-size: var(--fs-14); }
.eventhead__team a {
  display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-weight: 600;
  text-decoration: underline; text-decoration-color: var(--bloom); text-decoration-thickness: 1.5px; text-underline-offset: 0.2em;
}
.eventhead__team a[aria-current="page"] { padding: 0 0.9rem; border-radius: var(--radius-pill); background: var(--lemon); text-decoration: none; }

.teaminvite, .teamcard { margin-bottom: var(--s4); }
.teamcard { display: grid; gap: var(--s3); }
.teamlist { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.teamrow { display: grid; gap: var(--s2); padding-block: var(--s3); border-bottom: 1px solid var(--line); scroll-margin-top: var(--s4); }
.teamrow__main { display: grid; gap: 0.25rem; min-width: 0; }
.teamrow__name { font-weight: 600; overflow-wrap: anywhere; }
.teamrow__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem var(--s3); color: var(--stone); font-size: var(--fs-14); }
.teamrow__email { color: var(--ink); font: 400 0.8125rem/1.5 var(--font-mono); overflow-wrap: anywhere; }
.teamrow__name.teamrow__email { font-weight: 600; }
.teamrow__action, .teamrow__confirm { margin: 0; }
.teamcard__none, .teamcard__rules { color: var(--stone); font-size: var(--fs-15); }
.teamshare { display: flex; flex-wrap: wrap; gap: var(--s2); }
.badge--team-owner { background: var(--ink); color: #fff; }
.badge--team-cohost { background: var(--plum-50); color: var(--plum-ink); }
.badge--team-left { background: transparent; color: var(--stone); box-shadow: inset 0 0 0 1px var(--line-strong); }
@media (min-width: 720px) {
  .teamrow { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--s4); }
  .teamrow__confirm { grid-column: 1 / -1; }
}

.joincard__lead { color: var(--ink); font-weight: 600; }
.joincard__list { display: grid; gap: var(--s1); margin: 0; padding-left: 1.2rem; color: var(--stone); }

.sendfrom-others { display: grid; gap: var(--s3); margin-top: var(--s4); }
.sendfrom-others .numpick { margin: 0; padding: 0; list-style: none; }
.numopt--other { cursor: default; border-style: dashed; background: transparent; }
.numopt--other:hover { border-color: var(--line-strong); }

.sendcard__scope { color: var(--stone); font-size: var(--fs-14); }
.sendorgs { display: grid; gap: var(--s2); margin: 0; padding: 0; list-style: none; }
.sendorg { display: grid; gap: 0.3rem; padding: 0.75rem 0.9rem; border: 1px solid var(--line); border-radius: var(--radius); }
.sendorg__name { font-weight: 700; overflow-wrap: anywhere; }
.sendorg__counts { display: flex; flex-wrap: wrap; gap: 0.25rem var(--s4); margin: 0; color: var(--stone); font-size: var(--fs-14); }
.sendorg__counts > div { display: flex; gap: 0.35rem; }
.sendorg__counts dt::after { content: ":"; }
.sendorg__counts dd { margin: 0; color: var(--ink); font: 600 var(--fs-14)/1.5 var(--font-mono); font-variant-numeric: tabular-nums; }
.sendnum__organizer { color: var(--stone); font-size: var(--fs-14); }
.sendrow__organizer { display: block; color: var(--stone); font-size: var(--fs-13); }

.badge--number-removed { background: var(--error-50); color: var(--error); }
.chosenmove { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2); margin: 0; }
.chosenmove label { color: var(--stone); font-size: var(--fs-14); }
.chosenmove .select { width: auto; max-width: 100%; min-height: 44px; padding-block: 0.4rem; }

.guesttable__sub { display: block; color: var(--stone); font-size: var(--fs-13); }
.facts__sub { color: var(--stone); font-size: var(--fs-14); }

/* the live contact search: the results block keeps the card's rhythm, and dims while the next answer is coming */
.pickresults { display: grid; gap: var(--s4); }
.pickcard:has(.picksearch .htmx-request) .pickresults { opacity: 0.6; transition: opacity 0.15s; }
@media (prefers-reduced-motion: reduce) {
  .pickcard:has(.picksearch .htmx-request) .pickresults { transition: none; }
}
/* the selection basket: #pick-form has no box of its own (its fields live in the results and in the hidden basket);
   the add button, how many are ticked (a polite live region) and the selection to review or clear */
#pick-form { display: contents; }
.pickactions__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }
.pickselected { margin: 0; color: var(--ink); font-weight: 600; font-size: var(--fs-14); }
.pickreview { margin-top: var(--s2); }
.pickreview > summary {
  display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; color: var(--ink);
  font-weight: 600; font-size: var(--fs-14);
}
.pickreview__list { display: grid; gap: var(--s1); max-height: 14rem; overflow-y: auto; margin: var(--s2) 0; padding: 0; list-style: none; }
.pickreview__list li {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s1) var(--s2);
  padding: 0.25rem 0; border-bottom: 1px solid var(--line);
}
.pickreview__who { min-width: 0; overflow-wrap: anywhere; font-size: var(--fs-14); }
/* ================================================================== end co-organizers */
/* ================================================================== guest list upload (A)
   "Upload a list" on Choose guests, the import summary there, the preview (/events/{id}/import/{draft}): the
   first rows with a role select under each column header - the table scrolls sideways inside its card only,
   never the page - the counts, "send from" and the actions; the guest fields on the guest page, the guest list's
   search, guests without a mobile number. */
.pickupload { margin-bottom: var(--s5); }
.pickupload:focus { outline: none; }
.pickupload .stack { gap: var(--s3); }
.importsummary { display: grid; gap: var(--s2); color: var(--sea-ink); }
.importsummary:focus { outline: none; }
.importsummary__counts { display: grid; gap: 0.15rem; margin: 0; padding: 0; list-style: none; font-weight: 600; }
.importsummary__lead { margin-top: var(--s1); color: var(--ink); font-weight: 600; }
.importsummary__notes { color: var(--ink); font-weight: 400; }
.chosenrow__detail { color: var(--ink); font-size: var(--fs-14); overflow-wrap: anywhere; }
.chosenrow__nophone, .nophone { color: var(--stone); font-style: italic; }

.importform { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5); min-width: 0; }
.importform > .alert { margin-bottom: 0; }
.importcard { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); min-width: 0; }
.importcard:focus { outline: none; }
.importtable-wrap {   /* positioned: the visually hidden labels in it stay inside, never widen the page */
  position: relative; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--card);
}
.importtable-wrap:focus-visible { outline-offset: 2px; }
.importtable { min-width: 100%; border-collapse: collapse; font-size: var(--fs-14); }
.importtable__caption { color: var(--ink); font-weight: 700; }   /* the caption, shown above the scrolling table */
.importtable th, .importtable td { padding: 0.55rem 0.75rem; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.importtable thead th { background: var(--paper); vertical-align: bottom; }
.importtable td { min-width: 8rem; max-width: 18rem; overflow-wrap: anywhere; }
.importtable__num { width: 1%; color: var(--stone); font: 500 0.8125rem/1.5 var(--font-mono); white-space: nowrap; }
.importtable__col { min-width: 13rem; }
.importtable__label { display: block; margin-bottom: var(--s2); color: var(--ink); font-weight: 700; overflow-wrap: anywhere; }
.importtable__use { display: block; margin-bottom: 0.25rem; color: var(--stone); font-size: var(--fs-13); font-weight: 600; }
.importtable__role {   /* as wide as its longest choice ("Keep as field ..."), so the chosen one is never cut */
  width: auto; min-width: 100%; min-height: 44px; padding-block: 0.4rem; font-size: var(--fs-14);
}
.importtable__col--error .importtable__role { border-color: var(--error); background-color: var(--error-50); }
.importtable__col .field__error { margin-top: 0.35rem; font-weight: 600; white-space: normal; }

.importcounts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); margin: 0; }
.importcounts__item {
  display: flex; flex-direction: column-reverse; gap: 0.15rem; padding: var(--s3);
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper);
}
.importcounts dt { color: var(--stone); font-size: var(--fs-14); font-weight: 600; }
.importcounts dd { margin: 0; color: var(--ink); font: 700 var(--fs-28)/1.1 var(--font-mono); font-variant-numeric: tabular-nums; }
.importcounts__item--warn { border-color: var(--lemon-line); background: var(--lemon-50); }
.importform__link { max-width: 28rem; }
.importform__nonumber { margin-bottom: 0; }
.importform__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); padding-top: var(--s2); }

.guestsearch { max-width: var(--measure); margin-bottom: var(--s4); }
.guestfields__grid { display: grid; gap: var(--s4); }

@media (min-width: 640px) {
  .importcounts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .guestfields__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 479px) {
  .importform__actions .btn--primary { flex: 1 1 100%; }
}
/* ================================================================== end guest list upload (A) */
/* ================================================================== table planner (D)
   /events/{id}/tables (reached from the guest list): the tool row, the floor plan (an SVG drawn by
   static/seating.js, in centimetres, with its zoom buttons on it) beside "Not seated" and auto-seat, then "Who sits
   where" - one card per table whose head is a poll row: the fill is the share of seats taken. On the plan a table
   is drawn the same way: its chairs fill with sea as guests sit, and its number is set in Piazzolla Black Italic,
   the event name's face. Phones: the tools, the lists (seating with "Seat at…"), then the plan to look at. Also:
   the 3D view (.room3d), the printable list (.seatsheet) and print styles. */
.planner {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4);
  grid-template-areas: "tools" "stage" "side" "cards";
}
.planstage { display: grid; gap: var(--s2); align-content: start; min-width: 0; }
.planside { display: grid; gap: var(--s4); align-content: start; min-width: 0; }
.whosits { display: grid; gap: var(--s3); min-width: 0; margin-top: var(--s2); }
.planner > .planbar { grid-area: tools; }
.planner > .planstage { grid-area: stage; }
.planner > .planside { grid-area: side; }
.planner > .whosits { grid-area: cards; }
.whosits__title { color: var(--ink); font: 700 var(--fs-22)/1.2 var(--font-display); }
@media (min-width: 700px) and (max-width: 1099px) {
  .planside { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .planside > #declined-box { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
  .planner { grid-template-columns: minmax(0, 1fr) 22rem; grid-template-areas: "tools tools" "stage side" "cards cards"; column-gap: var(--s5); }
}
@media (max-width: 699px) {
  .planner { grid-template-areas: "tools" "side" "cards" "stage"; }
}

/* the tools: dropdown panels (details) */
.planbar { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.tool { position: relative; }
.tool > summary { list-style: none; }
.tool > summary::-webkit-details-marker { display: none; }
.tool > summary::after {
  content: ""; width: 0.4rem; height: 0.4rem; margin: -0.2rem 0 0 0.15rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg);
}
.tool[open] > summary { box-shadow: inset 0 0 0 2px var(--ink); }
.tool[open] > summary.btn--secondary { background: var(--lemon-50); }
.tool__panel {
  position: absolute; z-index: 6; top: calc(100% + 6px); left: 0; width: min(23rem, calc(100vw - 2 * var(--gutter)));
  display: grid; gap: var(--s3); padding: var(--s4);
  background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--radius-card);
  box-shadow: 0 12px 32px -12px rgba(27, 21, 48, 0.35);
}
.tool__panel .btn { justify-self: start; }
.tool__panel .segmented__option { gap: 0.5rem; font-size: var(--fs-14); }
.tool__lead { color: var(--stone); font-size: var(--fs-14); }
.tool__panel--objects { grid-template-columns: 1fr 1fr; width: min(20rem, calc(100vw - 2 * var(--gutter))); }
.tool__panel--plan form { display: grid; gap: var(--s3); margin: 0; }
.tool__panel--plan form + form { padding-top: var(--s3); border-top: 1px solid var(--line); }
@media (max-width: 699px) {   /* phones: the panels open under the whole tool row */
  .tool { position: static; }
  .tool__panel { left: 0; right: 0; width: auto; }
}
.shapeicon { flex: none; display: inline-block; border: 2px solid currentColor; background: var(--card); }
.shapeicon--round { width: 18px; height: 18px; border-radius: 50%; }
.shapeicon--rect { width: 24px; height: 12px; border-radius: 3px; }
.objbtn {
  display: flex; align-items: center; gap: 0.55rem; min-height: 44px; padding: 0.4rem 0.7rem; cursor: pointer;
  border: 1.5px solid var(--line-strong); border-radius: var(--radius); background: var(--card);
  color: var(--ink); font: 600 var(--fs-14)/1.2 var(--font-body); text-align: left;
}
.objbtn:hover { border-color: var(--ink); background: var(--paper); }
.objbtn__swatch { flex: none; width: 22px; height: 16px; border-radius: 3px; border: 1.5px solid var(--ink); }
.objbtn__swatch--stage { background: var(--ink); }
.objbtn__swatch--bar { background: var(--plum-100); }
.objbtn__swatch--dance { background: repeating-conic-gradient(var(--plum-100) 0 25%, #fff 0 50%) 0 0 / 8px 8px; }
.objbtn__swatch--stand { background: var(--lemon-50); border-color: var(--lemon-line); }
.objbtn__swatch--other { background: #fff; border-style: dashed; }
.range { width: 100%; min-height: var(--control-h); accent-color: var(--bloom); cursor: pointer; }

/* the floor plan */
.floor {
  position: relative; height: clamp(24rem, 66vh, 46rem); overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius-card); background: #fbfbfd; box-shadow: var(--shadow);
}
.floor__still { position: absolute; inset: 0; display: grid; place-items: center; padding: var(--s3); }
.floor__still .plansvg { width: 100%; height: 100%; max-height: none; }
.floor > svg.fp { position: absolute; inset: 0; display: block; width: 100%; height: 100%; touch-action: none; user-select: none; -webkit-user-select: none; }
.floor.is-panning > svg.fp { cursor: grabbing; }
.floor__scale {
  position: absolute; left: var(--s3); bottom: var(--s3); z-index: 1; display: flex; align-items: center; gap: 0.4rem;
  margin: 0; padding: 0.2rem 0.55rem; border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.85);
  color: var(--stone); font: 500 var(--fs-13)/1.4 var(--font-mono); pointer-events: none;
}
.floor__scalebar { width: 12px; height: 12px; border: 1.5px solid var(--line-strong); background: #fff; }
/* zoom in, out, everything, and snapping: a column of buttons on the plan's top right corner */
.floor__controls { position: absolute; top: var(--s2); right: var(--s2); z-index: 1; flex-direction: column; gap: var(--s1); }
.floor__controls:not([hidden]) { display: flex; }
.floor__controls .btn--icon { box-shadow: var(--shadow); }
.floor__snap {
  position: relative; display: grid; place-items: center; width: 44px; height: 44px; cursor: pointer;
  border: 1.5px solid var(--line-strong); border-radius: var(--radius); background: var(--card); color: var(--stone);
  box-shadow: var(--shadow);
}
.floor__snap input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.floor__snap:hover { border-color: var(--ink); color: var(--ink); }
.floor__snap:has(input:checked) { border-color: var(--ink); background: var(--lemon); color: var(--ink); }
.floor__snap:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (max-width: 699px) { .floor__snap { display: none; } }   /* phones look at the plan; nothing is dragged */
.floor.has-inspector .floor__scale { display: none; }
.floor__help { color: var(--stone); font-size: var(--fs-14); }
.floor__help--phone { display: none; }
@media (max-width: 699px) {
  .floor { height: 62vh; min-height: 22rem; }
  .floor__help--wide { display: none; }
  .floor__help--phone { display: inline; }
}

/* the plan's drawing: shared by the editor (fp-*) and the still picture (plansvg__*). Strokes keep their width
   at any zoom (vector-effect). */
.fp text, .plansvg text { text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.fp-grid-minor { stroke: #ecebf2; stroke-width: 1; vector-effect: non-scaling-stroke; }
.fp-grid-major { stroke: #d9d6e4; stroke-width: 1; vector-effect: non-scaling-stroke; }
.fp-item { cursor: pointer; outline: none; }
.planner[data-editable="yes"] .fp-item { cursor: grab; }
.fp-item.is-dragging { cursor: grabbing; }
.fp-top, .plansvg__top { fill: #fff; stroke: var(--ink); stroke-width: 2; vector-effect: non-scaling-stroke; }
.fp-chair, .plansvg__chair { fill: #fff; stroke: var(--line-strong); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.fp-chair.is-taken, .plansvg__chair.is-taken { fill: var(--sea); stroke: var(--sea-ink); }
.fp-num, .plansvg__num { fill: var(--ink); font-family: var(--font-display); font-style: italic; font-weight: 900; }
.fp-name { fill: var(--ink); font-family: var(--font-body); font-weight: 700; }
.fp-count {   /* never smaller than READABLE_PX on screen (--fp-readable, set by seating.js), within its table */
  fill: var(--plum-ink); font-family: var(--font-mono); font-weight: 600;
  font-size: clamp(calc(var(--least, 12) * 1px), calc(var(--fp-readable, 12) * 1px), calc(var(--most, 30) * 1px));
}
.fp-bar-track { fill: var(--plum-50); }
.fp-bar-fill { fill: var(--sea); }
.fp-item--full .fp-top { stroke: var(--sea-ink); }
.fp-item--over .fp-top, .plansvg__item--over .plansvg__top { stroke: var(--error); stroke-width: 3; }
.fp-item--over .fp-count { fill: var(--error); }
.fp-item--over .fp-bar-fill { fill: var(--error); }
.fp-halo { fill: none; stroke: transparent; stroke-width: 4; vector-effect: non-scaling-stroke; }
.fp-halo-line { fill: none; stroke: transparent; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.fp-item:focus-visible .fp-halo { stroke: var(--focus); stroke-width: 3; stroke-dasharray: 6 4; }
.fp-item.is-selected .fp-halo { stroke: var(--lemon); stroke-width: 9; stroke-dasharray: none; }
.fp-item.is-selected .fp-halo-line { stroke: var(--ink); }
.fp-item.is-target-ok .fp-halo { stroke: var(--sea); stroke-width: 8; stroke-dasharray: none; }
.fp-item.is-target-no .fp-halo { stroke: var(--error); stroke-width: 8; stroke-dasharray: none; }
.fp-obj, .plansvg__obj { fill: #fff; stroke: var(--ink); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.fp-objlabel, .plansvg__objlabel {
  fill: var(--ink); font-family: var(--font-body); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
.fp-item--stage .fp-obj, .plansvg__item--stage .plansvg__obj { fill: var(--ink); }
.fp-item--stage .fp-objlabel, .plansvg__item--stage .plansvg__objlabel { fill: #fff; }
.fp-item--bar .fp-obj, .plansvg__item--bar .plansvg__obj { fill: var(--plum-100); }
.fp-item--dance .fp-obj { fill: url(#fp-checker); }
.plansvg__item--dance .plansvg__obj { fill: var(--plum-50); }
.fp-item--stand .fp-obj, .plansvg__item--stand .plansvg__obj { fill: var(--lemon-50); stroke: #c9a815; }
.fp-item--other .fp-obj, .plansvg__item--other .plansvg__obj { stroke-dasharray: 8 5; }
.fp-plan { pointer-events: none; }

/* the selected item's tools, over the bottom of the plan */
.fp-inspector {
  position: absolute; left: var(--s2); right: var(--s2); bottom: var(--s2); z-index: 2;
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s2) var(--s3); padding: var(--s3);
  background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--radius-card);
  box-shadow: 0 10px 30px -12px rgba(27, 21, 48, 0.4);
}
.fp-inspector__title { flex-basis: 100%; display: flex; align-items: baseline; gap: var(--s2); margin: 0; color: var(--stone); font-size: var(--fs-13); font-weight: 600; }
.fp-inspector__title strong { color: var(--ink); font-size: var(--fs-15); }
.fp-inspector .field { gap: 0.2rem; }
.fp-inspector .field > label { font-size: var(--fs-13); }
.fp-inspector .input { min-height: 44px; padding-block: 0.4rem; }
.fp-inspector__label { width: 13rem; max-width: 100%; }
.fp-inspector__num { width: 6.5rem; font-family: var(--font-mono); }
.fp-inspector__turn, .fp-inspector__end { display: flex; gap: var(--s2); }
.fp-inspector__end { margin-left: auto; }
@media (max-width: 559px) { .fp-inspector .field:first-of-type, .fp-inspector__label { width: 100%; } .fp-inspector__end { margin-left: 0; } }

/* "Not seated" and the other side cards */
.sidecard { display: grid; gap: var(--s3); align-content: start; padding: var(--s4); }
.sidecard__lead { color: var(--stone); font-size: var(--fs-14); }
.sidecard__scroll { min-height: 0; margin: 0 calc(-1 * var(--s2)); padding: 0 var(--s2); }
@media (min-width: 700px) and (max-width: 1099px) {
  .sidecard--guests .sidecard__scroll { max-height: 34rem; overflow-y: auto; overscroll-behavior: contain; }
}
@media (min-width: 1100px) {
  .sidecard--guests { max-height: calc(clamp(24rem, 66vh, 46rem) + 3.25rem); grid-template-rows: auto auto minmax(0, 1fr); }
  .sidecard--guests .sidecard__scroll { overflow-y: auto; overscroll-behavior: contain; }
}
.autoform { display: grid; gap: var(--s3); }
.autoform .btn { justify-self: start; }
.autoresult { padding: var(--s3); border-radius: var(--radius); background: var(--lemon-50); border: 1px solid var(--lemon-line); font-size: var(--fs-14); }
.autoresult__title { font-weight: 700; }
.autoresult ul { margin: 0.3rem 0 0; padding-left: 1.1rem; }
.clearform { margin: 0; padding-top: var(--s2); border-top: 1px solid var(--line); }
.clearform__button { color: var(--error); text-decoration-color: var(--error); padding-inline: 0; }
.clearform__button:hover { color: var(--error); text-decoration-color: var(--error); }
.finder { gap: var(--s2); }
.finder:not([hidden]) { display: grid; }
.finder__search { min-height: 44px; padding-block: 0.45rem; }
.finder__row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--s2) var(--s3); }
.finder__label { color: var(--stone); font-size: var(--fs-13); font-weight: 600; }
.finder__select { min-height: 40px; padding-block: 0.3rem; font-size: var(--fs-14); }

/* a party: the guest and the people they bring */
.partylist, .seatlist { display: grid; margin: 0; padding: 0; list-style: none; }
.partylist__count { margin-bottom: var(--s1); color: var(--stone); font-size: var(--fs-14); font-weight: 600; }
.partylist__empty { padding: var(--s3) 0; color: var(--stone); font-size: var(--fs-15); }
.party {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s2); min-width: 0;
  padding: 0.3rem 0; border-top: 1px solid var(--line);
}
.partylist > .party:first-child, .seatlist > .party:first-child { border-top: 0; }
.party.is-saving { opacity: 0.55; }
.party.is-dragged { opacity: 0.35; }
.party__grip {   /* six dots drawn by CSS (seating.js adds the handle) */
  flex: none; display: grid; grid-template-columns: repeat(2, 4px); place-content: center; gap: 3px 3px;
  width: 28px; height: 40px; margin: 0 -0.2rem 0 -0.3rem; padding: 0;
  border: 0; border-radius: 8px; background: transparent; color: var(--line-strong); cursor: grab; touch-action: none;
}
.party__grip i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.party__grip:hover { color: var(--ink); background: var(--paper); }
.party__who { flex: 1 1 7rem; display: grid; min-width: 0; padding-block: 0.15rem; }
.party__name { font-weight: 600; font-size: var(--fs-15); line-height: 1.3; overflow-wrap: anywhere; }
.party__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s2); color: var(--stone); font-size: var(--fs-13); line-height: 1.45; }
.party__status { display: inline-flex; align-items: center; gap: 0.3rem; font-weight: 600; }
.party__status::before { content: ""; flex: none; width: 0.55rem; height: 0.55rem; border-radius: 50%; }
.party__status--coming { color: var(--sea-ink); }
.party__status--coming::before { background: var(--sea); }
.party__status--pending { color: var(--plum-ink); }
.party__status--pending::before { border: 1.5px dashed var(--stone); }
.party__status--declined { color: var(--error); }
.party__status--declined::before { background: var(--error); }
.party__field + .party__field::before, .party__status + .party__field::before { content: "·"; margin-right: var(--s2); }
.partysize {
  flex: none; display: grid; place-items: center; min-width: 2rem; height: 2rem; padding: 0 0.45rem;
  border-radius: var(--radius-pill); background: var(--plum-50); color: var(--ink);
  font: 700 var(--fs-14)/1 var(--font-mono); font-variant-numeric: tabular-nums;
}
.partysize--guess { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line-strong); color: var(--plum-ink); }
.party__seat {   /* "Seat at…": a link to the guest's page without JavaScript, a button opening the chooser with it */
  flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 0.5rem; cursor: pointer;
  border: 0; border-radius: var(--radius); background: transparent;
  color: var(--ink); font: 600 var(--fs-14)/1.2 var(--font-body);
  text-decoration: underline; text-decoration-color: var(--bloom); text-decoration-thickness: 1.5px; text-underline-offset: 0.2em;
}
.party__seat:hover { color: var(--ink); background: rgba(27, 21, 48, 0.05); }
.party__actions { flex: none; display: flex; align-items: center; gap: var(--s1); }
.party__act { width: 40px; min-height: 40px; padding: 0; color: var(--stone); border-color: var(--line); }
.party__act--move:hover { color: var(--ink); border-color: var(--ink); }
.party__act--remove:hover { color: var(--error); border-color: var(--error); background: var(--error-50); }
.party__remove--now { color: var(--error); border-color: var(--error); }
/* the one "Seat at…" chooser, opened under the row it is for */
.chooser {
  flex-basis: 100%; display: grid; gap: var(--s2); margin: var(--s1) 0 var(--s2); padding: var(--s3);
  border-radius: var(--radius); background: var(--paper); box-shadow: inset 0 0 0 1px var(--line);
}
.chooser__label { font-weight: 600; font-size: var(--fs-13); }
.chooser__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.chooser__select { flex: 1 1 10rem; width: auto; min-height: 44px; padding-block: 0.35rem; font-size: var(--fs-14); }
.chooser__number { width: 5.5rem; min-height: 44px; padding-block: 0.35rem; }
.chooser__expect { display: grid; gap: var(--s1); padding-top: var(--s2); border-top: 1px solid var(--line); }
.chooser__expect[hidden] { display: none; }
.chooser__hint { color: var(--stone); font-size: var(--fs-13); }
/* one guest's "Seat at" page (without JavaScript) */
.seatpage { gap: var(--s5); }
.seatform { display: grid; gap: var(--s3); justify-items: start; margin: 0; }
.seatform + .seatform { padding-top: var(--s4); border-top: 1px solid var(--line); }
.seatform > .field { width: 100%; }
.party--seated.party--declined .party__name { color: var(--stone); text-decoration: line-through; text-decoration-color: var(--error); }

/* "Who sits where": the table cards; a card is also a place to drop a guest */
.tablecards { grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr)); gap: var(--s3); }
.tablecards:not([hidden]) { display: grid; }
.tablecard {
  display: grid; gap: var(--s2); align-content: start; min-width: 0; padding: var(--s3);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow);
  transition: box-shadow 0.15s;
}
.tablecard.is-target-ok { box-shadow: 0 0 0 3px var(--sea), var(--shadow); }
.tablecard.is-target-no { box-shadow: 0 0 0 3px var(--error), var(--shadow); }
.tablecard__head { margin: 0; }
.tablecard__empty { padding: var(--s1) 0; color: var(--stone); font-size: var(--fs-14); }
/* the poll row with a heading's label (the cards) instead of a <dt>/<dd> pair */
.poll__row > .poll__label {
  display: flex; align-items: center; gap: 0.6rem; min-width: 0;
  color: var(--ink); font: 700 var(--fs-15)/1.3 var(--font-body);
}
.poll__row > .poll__label::before { content: ""; flex: none; width: 1.75rem; height: 1.75rem; background: var(--mark) center / contain no-repeat; }
.poll__row > .poll__count { color: var(--ink); font: 700 var(--fs-15)/1 var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* a table's fill: empty (dashed), has room (a sea ring), full (the sea tick), too many (error) */
.poll__row--seats-empty {
  --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10.25' fill='%23fff' stroke='%236b6880' stroke-width='1.5' stroke-dasharray='3 2.4'/%3E%3C/svg%3E");
}
.poll__row--seats-partly {
  --fill: var(--sea-100);
  --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10.25' fill='%23fff' stroke='%232e8c83' stroke-width='2'/%3E%3Ccircle cx='12' cy='12' r='4.5' fill='%232e8c83'/%3E%3C/svg%3E");
}
.poll__row--seats-full {
  --fill: var(--sea-100);
  --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%232e8c83'/%3E%3Cpath d='M7 12.4l3.3 3.3L17.2 8.8' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.poll__row--seats-over {
  --fill: var(--error-100);
  --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23b42318'/%3E%3Cpath d='M12 6.5v7' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='17.2' r='1.4' fill='%23fff'/%3E%3C/svg%3E");
}
.poll__row--seats-over > .poll__count { color: var(--error); }

.declined { padding: var(--s3) var(--s4); border: 1px dashed var(--line-strong); border-radius: var(--radius-card); background: rgba(255, 255, 255, 0.55); }
.declined__summary { display: flex; align-items: center; gap: var(--s2); min-height: 40px; cursor: pointer; font-weight: 600; }
.declined__n { color: var(--stone); font: 600 var(--fs-14)/1 var(--font-mono); }
.declined__lead { margin-bottom: var(--s2); color: var(--stone); font-size: var(--fs-14); }
.declined__list { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin: 0; padding: 0; list-style: none; color: var(--plum-ink); font-size: var(--fs-14); }

/* the editor's messages, and the guest being dragged */
.toast {
  position: fixed; left: 50%; bottom: var(--s5); z-index: 30; transform: translateX(-50%);
  max-width: min(36rem, calc(100vw - 2 * var(--gutter))); margin: 0; padding: 0.7rem 1.1rem;
  border-radius: var(--radius); background: var(--ink); color: #fff; font-weight: 600; font-size: var(--fs-15);
  box-shadow: 0 12px 30px -10px rgba(27, 21, 48, 0.5);
}
.toast--error { background: var(--error); }
.toast:not([hidden]) + .toast--error:not([hidden]) { bottom: calc(var(--s5) + 3.5rem); }
.dragghost {
  position: fixed; left: 0; top: 0; z-index: 40; pointer-events: none;
  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.85rem 0.4rem 0.4rem;
  border-radius: var(--radius-pill); background: var(--ink); color: #fff; font-weight: 600; font-size: var(--fs-14);
  box-shadow: 0 14px 30px -10px rgba(27, 21, 48, 0.6); white-space: nowrap;
}
.dragghost__n {
  display: grid; place-items: center; min-width: 1.6rem; height: 1.6rem; padding: 0 0.35rem; border-radius: var(--radius-pill);
  background: var(--lemon); color: var(--ink); font: 700 var(--fs-13)/1 var(--font-mono);
}
.dragghost.is-no { background: var(--error); }

/* the still picture (no JavaScript, print) and the read-only list */
.plansvg { display: block; width: 100%; height: auto; max-height: 70vh; }
.printplan { margin: 0; padding: var(--s3); border: 1px solid var(--line); border-radius: var(--radius-card); background: #fff; }
.seatsheet { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--s3); }
.seatsheet__table { padding: var(--s3) var(--s4); border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--card); break-inside: avoid; }
.seatsheet__table--waiting { border-style: dashed; background: transparent; }
.seatsheet__head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s2);
  margin-bottom: var(--s2); padding-bottom: var(--s2); border-bottom: 2px solid var(--ink);
}
.seatsheet__label { font: 700 var(--fs-18)/1.2 var(--font-display); }
.seatsheet__count { color: var(--stone); font: 600 var(--fs-14)/1 var(--font-mono); }
.seatsheet__list { margin: 0; padding-left: 1.4rem; font-size: var(--fs-15); line-height: 1.6; }
.seatsheet__list li::marker { color: var(--stone); font-family: var(--font-mono); font-size: var(--fs-13); }
.seatsheet__note, .seatsheet__empty { color: var(--stone); font-size: var(--fs-14); }

/* the 3D view */
.room3d {
  position: relative; height: clamp(24rem, 70vh, 46rem); overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow);
  background: radial-gradient(120% 90% at 50% 0%, #ffffff 0%, var(--paper) 60%, var(--plum-50) 100%);
}
.room3d canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.room3d__status { position: absolute; inset: 0; display: grid; place-items: center; color: var(--stone); font-weight: 600; }
.room3d:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.room3d__keys { color: var(--stone); font-size: var(--fs-14); }

@media print {
  .topbar, .skip-link, .rail, .backlink, .noprint, .eventhead .badge { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .page { padding: 0; max-width: none; }
  .eventhead { padding-bottom: var(--s3); }
  .eventhead__name { font-size: 24pt; }
  .pagetitle { font-size: 18pt; }
  .printplan { padding: 0; border: 0; }
  .plansvg { max-height: 120mm; }
  .seatsheet { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6mm; }
  .seatsheet__table { padding: 0; border: 0; box-shadow: none; }
}
/* ================================================================== end table planner (D) */