/* Event Engine 2.0 — one stylesheet, no build step.
   --brand is injected per install from the settings table (base.html), so this
   file never hardcodes an organisation's colour.

   Always light, deliberately. The OS-following dark theme surprised owners who
   had never asked for it, and every surface that set its own colour needed a
   second rule nobody remembered to write. */

/* The three Hebrew families an owner can pick from, vendored under
   /static/fonts (SIL OFL, see OFL.txt there) -- never a CDN, because this app
   is installed on other people's servers. Variable weight, split by script the
   way Google serves them, so a page loads only the family it uses and only the
   scripts it contains. */
@font-face { font-family: Rubik; font-style: normal; font-weight: 300 900; font-display: swap;
  src: url(fonts/rubik-hebrew.woff2) format("woff2");
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: Rubik; font-style: normal; font-weight: 300 900; font-display: swap;
  src: url(fonts/rubik-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; }
@font-face { font-family: Heebo; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(fonts/heebo-hebrew.woff2) format("woff2");
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: Heebo; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(fonts/heebo-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; }
@font-face { font-family: Assistant; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url(fonts/assistant-hebrew.woff2) format("woff2");
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: Assistant; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url(fonts/assistant-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; }

:root {
  --brand: #1a73e8;
  --brand-ink: #ffffff;   /* the text colour that reads on --brand */
  --font: Rubik, Segoe UI, Arial, sans-serif;
  --btn-radius: 8px;
  --bg: #f6f7f9;
  --card: #ffffff;
  --ink: #202124;
  --muted: #5f6368;
  --border: #dadce0;
  --ok: #188038;
  --err: #c5221f;
  --warn: #8f4e00;   /* 5.7:1 on the amber tint; #b06000 was 4.3 */
  --warn-bg: #fef7e0;
  --radius: 10px;
  --shadow: 0 1px 3px rgba(60, 64, 67, .16);
}

* { box-sizing: border-box; }
/* The UA stylesheet hides [hidden] on HTML elements only; an inline SVG
   sprite needs telling, or it renders as a blank 300x150 block. */
svg[hidden] { display: none; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.6 var(--font);
}

a { color: var(--brand); }

.wrap { max-width: 1040px; margin: 0 auto; padding: 24px 16px 64px; }
.wrap--narrow { max-width: 460px; padding-top: 64px; }
/* A form with three time fields in a row wants more than a login form. */
.wrap--form { max-width: 620px; padding-top: 32px; }
/* Public pages. A sign-up page carries a video, a cover image and paragraphs
   of description; at the 460px a login form wants, the video was a postage
   stamp on a 2000px screen and the text wrapped every few words. */
.wrap--public { max-width: 760px; padding-top: 40px; }

/* Shadow mode: the admin walking the public flow as a visitor. The banner is
   deliberately loud — this page looks exactly like the real one and is not. */
.shadow-banner { margin: 0 0 14px; padding: 10px 14px; border-radius: 8px;
  background: #fef7e0; color: var(--warn); font-size: 14px; text-align: center; }
.shadow-email { margin: 12px 0 0; border: 1px dashed var(--border);
  border-radius: 10px; overflow: hidden; }
.shadow-email__subject { padding: 10px 14px; font-weight: 500;
  background: var(--bg); border-bottom: 1px solid var(--border); }

/* topbar */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px 16px; padding: 10px 20px; flex-wrap: wrap;
  background: var(--card); border-bottom: 1px solid var(--border);
}
.topbar__brand { display: flex; align-items: center; gap: 10px; min-width: 0;
  font-weight: 600; color: var(--ink); text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar__nav a { white-space: nowrap; }
/* On a phone the name takes the first row and the nav the second, so
   neither wraps word by word. */
@media (max-width: 600px) {
  .topbar { padding: 8px 12px; }
  .topbar__brand { flex: 1 1 100%; }
  .topbar__nav { flex: 1 1 100%; justify-content: flex-start; margin: 0 -6px; }
}
.topbar__logo { height: 28px; width: auto; }
.brandmark { display: block; max-height: 72px; max-width: 220px; width: auto;
  margin: 0 auto 16px; }
/* The public frame: one card with a coloured strip as its top edge and the
   logo inside, the way v1 drew it. The templates' own .card is flattened so
   the page does not become a card inside a card. Logo at v1's 88px. */
.frame { background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.frame__bar { display: flex; height: 6px; }
.frame__bar > div { flex: 1; background: var(--brand); }
.frame__body { padding: 24px; }
.frame__body > .card { border: 0; box-shadow: none; padding: 0; border-radius: 0; }
.frame .brandmark { width: 88px; max-width: 88px; max-height: none; margin: 8px auto 18px; }
@media (min-width: 700px) { .frame__body { padding: 40px 48px; } }
.topbar__nav { display: flex; gap: 4px; }
.topbar__nav a { color: var(--muted); text-decoration: none; font-size: 15px;
  padding: 8px 10px; border-radius: 8px; line-height: 1.2; }
.topbar__nav a:hover { color: var(--ink); background: var(--bg); }
/* Where you are. A nav with no current item is a map with no "you are here". */
.topbar__nav a[aria-current="page"] { color: var(--brand); font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--brand); border-radius: 8px 8px 0 0; }
.topbar__brand { padding: 4px 0; }

/* The search field. One shell around the icon, the input and the button, so
   the three read as a single control and light up together — an input with a
   button parked beside it reads as two things that happen to be adjacent.
   The shell owns the border, the fill and the focus ring; the input inside it
   has none of the three, which is why it is not .input. */
.searchfield {
  display: flex; align-items: center; gap: 8px;
  padding: 5px; padding-inline-start: 14px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 999px;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.searchfield:hover { border-color: color-mix(in srgb, var(--brand) 35%, var(--border)); }
/* focus-within, not :focus: the ring belongs to the whole control, and the
   thing actually focused is the input or the button inside it. */
.searchfield:focus-within {
  background: var(--card); border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);
}
.searchfield__input {
  flex: 1 1 auto; min-width: 0; padding: 8px 0;
  font: inherit; font-size: 15px; color: var(--ink);
  background: none; border: 0; outline: none;
}
.searchfield__input::placeholder { color: var(--muted); }
.searchfield__go {
  flex: none; padding: 9px 18px; font: inherit; font-size: 14px; font-weight: 500;
  color: var(--brand-ink); background: var(--brand);
  border: 0; border-radius: 999px; cursor: pointer;
}
.searchfield__go:hover { filter: brightness(.94); }
.searchfield__go:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* The leading icon is decoration inside the field, so it drops .ic's trailing
   margin and takes the muted colour until the field is focused. */
.ic--lead { margin: 0; width: 19px; height: 19px; color: var(--muted); }
.searchfield:focus-within .ic--lead { color: var(--brand); }

/* In the topbar it grows into the space the brand and the nav leave, and at
   phone width it takes a row of its own rather than squeezing the links —
   measured at 375px, where a third item on one line overflows the document. */
.topbar__search { flex: 1 1 340px; max-width: 520px; min-width: 0; }
@media (max-width: 600px) {
  .topbar { flex-wrap: wrap; }
  .topbar__search { flex-basis: 100%; max-width: none; order: 3; }
}

/* The results page's own box: a card that is a form, not a form inside one. */
/* The results page's own field. No card around it: the field IS the card here,
   and a box inside a box was two borders saying the same thing. */
.searchbox { margin-bottom: 28px; }
.searchbox__hint { margin: 10px 4px 0; color: var(--muted); font-size: 13px; }
.searchfield--lg { padding: 6px; padding-inline-start: 18px;
  background: var(--card); box-shadow: var(--shadow); }
.searchfield--lg .ic--lead { width: 22px; height: 22px; }
.searchfield--lg .searchfield__input { padding: 11px 0; font-size: 17px; }
.searchfield--lg .searchfield__go { padding: 11px 24px; font-size: 15px; }

/* blocks */
.card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px;
}
.card--center { text-align: center; }
/* The approval queue. The one card on the dashboard that is waiting on a
   person, so it carries a rule in the warning colour rather than sitting in the
   page as one more identical white box. */
.card--queue { background: var(--warn-bg); border-color: #f0dfae; }
.card--queue .table { background: transparent; }
.card--queue h2 { color: var(--warn); }
.card h1 { margin-top: 0; font-size: 22px; }

.page-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 20px;
}
.page-head h1 { margin: 0; font-size: 24px; line-height: 1.3; }
.page-head--event { align-items: flex-start; }
.page-head__meta { margin: 4px 0 0; }
.page-head__meta .badge { vertical-align: 1px; }

/* Where you are, above the title. Every screen under an event says so in
   the same three words, so "back" is never the only way out. */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-size: 14px; color: var(--muted); margin: 0 0 10px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--brand); text-decoration: underline; }
.crumbs__sep { color: var(--border); }
.crumbs [aria-current] { color: var(--ink); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; max-width: 60vw; }

/* The day's actions, one row under the share box. The phase decides which
   button is the loud one; the row wraps on a phone and never widens it. */
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin: 0 0 20px; }
.actions form { margin: 0; }
.actions .btn { display: inline-flex; align-items: center; }

/* A heading inside a long form: more room above than below, so the fields
   read as belonging to the heading under them. */
.form__group { margin: 28px 0 12px; padding-top: 20px; font-size: 17px;
  border-top: 1px solid var(--border); }
.form__actions { display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap; margin-top: 8px; }

/* The settings map. */
.jumpbar { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0 0 20px;
  padding: 14px 18px; background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); }
/* Three groups, each a heading over its links — not thirteen identical chips.
   The groups list the sections in the order the page shows them. */
.jumpbar { gap: 12px 32px; }
.jumpbar__group { display: flex; flex-direction: column; gap: 6px; }
.jumpbar__group > a { align-self: flex-start; }
.jumpbar__title { font-size: 13px; font-weight: 600; color: var(--ink);
  padding-bottom: 2px; border-bottom: 2px solid var(--brand); align-self: flex-start; }
.jumpbar__links { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.jumpbar a { font-size: 14px; color: var(--ink); text-decoration: none;
  padding: 4px 10px; border-radius: 999px; background: var(--bg); }
.jumpbar a:hover { color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, var(--card)); }
.card[id] { scroll-margin-top: 16px; }

/* The one save for a long page, kept in view. */
.savebar { position: sticky; bottom: 0; display: flex; align-items: center;
  gap: 14px; margin: 0 -16px; padding: 12px 16px;
  background: color-mix(in srgb, var(--card) 88%, transparent);
  backdrop-filter: blur(8px); border-top: 1px solid var(--border); }

/* "הבא: …" — the dashboard's first sentence. One line, wraps on a phone. */
.next { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
  margin: 6px 0 2px; font-size: 16px; }
.next__label { color: var(--muted); }
.next__name { font-weight: 600; text-decoration: none; }
.next__name:hover { text-decoration: underline; }
.next__when { color: var(--ink); }
.next__n { color: var(--muted); }
/* On a phone the head stacks: the "next" line takes the full width and the
   button sits under it, instead of a tall squeezed button beside the text. */
@media (max-width: 600px) {
  .page-head:has(.next) { flex-direction: column; align-items: stretch; }
  .page-head:has(.next) > .btn { align-self: flex-start; }
}

/* The day strip: live, or within three hours of the start. Three things,
   large, first — the room, the survey's QR, its switch. */
.daystrip { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px;
  margin: 0 0 16px; padding: 16px 18px; border-radius: var(--radius);
  background: color-mix(in srgb, var(--brand) 8%, var(--card));
  border: 1px solid color-mix(in srgb, var(--brand) 30%, var(--border)); }
.daystrip form { margin: 0; }
.daystrip .btn { display: inline-flex; align-items: center; font-size: 17px;
  padding: 12px 22px; }
.daystrip__qr { display: inline-flex; flex-direction: column; align-items: center;
  gap: 4px; text-decoration: none; color: var(--muted); font-size: 13px; }
.daystrip__qr img { width: 132px; height: 132px; border-radius: 8px;
  background: #fff; border: 1px solid var(--border); }
.daystrip > p { margin: 0; }
/* On the day the share box folds to one line. */
.sharebox--fold > summary { cursor: pointer; color: var(--muted); font-size: 14px; }
.sharebox--fold[open] > summary { margin-bottom: 10px; }
/* The date picker's three selects, LTR so day-month-year read left to right
   like the digits do. */
.dateparts { display: flex; gap: 6px; }
.dateparts .input { flex: 1 1 0; min-width: 0; padding-inline: 6px; }
/* A notice that carries its own buttons. */
.notice--actions p { margin: 0 0 10px; }
.notice--actions .btnrow { gap: 8px 14px; }
/* The settings map stays in view while the page scrolls under it. */
.jumpbar { position: sticky; top: 8px; z-index: 2; }

/* The dashboard's two lists. */
.list { margin-bottom: 28px; }
/* A table with a subject column and three buttons cannot shrink to a phone
   without becoming one word per line; it scrolls in its box instead. */
@media (max-width: 600px) {
  /* On a phone each event (and each held reminder) is a small block: name,
     then the facts, then the buttons. The same markup, so the desktop table
     is not a second list. */
  .table--events thead, .card--queue thead { display: none; }
  .table--events, .table--events tbody,
  .card--queue .table, .card--queue tbody { display: block; }
  .table--events tr, .card--queue tr { display: flex; flex-wrap: wrap; align-items: center;
    gap: 2px 12px; padding: 12px 4px; border-bottom: 1px solid var(--border); }
  .table--events td, .card--queue td { display: block; padding: 0; border: 0; }
  .card--queue td { flex: 1 1 100%; font-size: 15px; }
  .card--queue td .muted { font-size: 13px; }
  .card--queue .cell-actions { margin-top: 8px; }
  .card--queue .actionrow { flex-wrap: wrap; white-space: normal; }
  .table--events .cell-name { flex: 1 1 100%; font-size: 16px; margin-bottom: 4px; }
  .table--events .cell-name .chip { display: inline-block; margin: 4px 0 0; }
  .table--events .cell-when { white-space: normal; color: var(--muted); font-size: 14px; }
  .cell-when__rel { display: inline; }
  .cell-when__rel::before { content: "· "; }
  .table--events .cell-num { font-size: 14px; }
  .table--events .cell-num:empty { display: none; }
  .table--events .cell-actions { flex: 1 1 100%; margin-top: 6px; text-align: start; }
}
.list__title { font-size: 16px; margin: 0 0 10px; color: var(--muted);
  font-weight: 600; }
.list__empty { margin: 0; }
.table--events .cell-name .chip { margin-inline-start: 8px; }
.table--events .cell-when { white-space: nowrap; }
.cell-when__rel { display: block; font-size: 13px; }
.cell-num { white-space: nowrap; }
.table--events td { vertical-align: top; }
@media (min-width: 601px) { .table--events .actionrow { justify-content: flex-end; } }
.search { position: relative; display: block; max-width: 360px; margin: 0 0 18px; }
.search .ic { position: absolute; inset-inline-start: 12px; top: 50%;
  transform: translateY(-50%); color: var(--muted); margin: 0; }
.search .input { padding-inline-start: 38px; }

/* The QR in the action bar, on the day: a small code on the button itself,
   so a phone held up to the room needs no second screen. */
.btn--qr { padding: 6px 12px 6px 8px; }
.btn--qr img { width: 44px; height: 44px; border-radius: 4px; background: #fff;
  vertical-align: middle; margin-inline-start: 8px; }

/* The live survey card: QR beside the controls, stacked on a phone. */
.survey { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.survey__qr { width: 160px; height: 160px; flex: none; border: 1px solid var(--border);
  border-radius: 8px; background: #fff; }
.survey__body { flex: 1 1 260px; min-width: 0; }
.survey__body > p { margin-top: 0; }
.input--inline { flex: 1 1 240px; max-width: 420px; font-size: 13px; color: var(--muted); }

.empty {
  background: var(--card); border: 1px dashed var(--border);
  border-radius: var(--radius); padding: 48px 24px; text-align: center;
}
.muted { color: var(--muted); }
p.muted { max-width: 72ch; }

/* forms */
.field { display: block; margin-bottom: 20px; text-align: start; }
.field__label { display: block; font-weight: 500; margin-bottom: 6px; }
.field__hint { display: block; color: var(--muted); font-size: 13px; margin-top: 6px;
  max-width: 72ch; }

.input {
  width: 100%; padding: 10px 12px; font: inherit; color: var(--ink);
  background: var(--card); border: 1px solid var(--border); border-radius: 8px;
}
.input:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }
.input--code { text-align: center; letter-spacing: .5em; font-size: 24px; }
.input--color { height: 44px; padding: 4px; }

.btn {
  display: inline-block; padding: 10px 20px; font: inherit; font-weight: 500;
  border: 1px solid transparent; border-radius: var(--btn-radius); cursor: pointer;
  text-decoration: none; text-align: center;
}
.btn--primary { background: var(--brand); color: var(--brand-ink); }
.btn--primary:hover { filter: brightness(.94); }
.btn--block { display: block; width: 100%; margin-top: 16px; }
.btn.is-disabled { background: var(--border); color: var(--muted); cursor: not-allowed; }

/* table */
.table { width: 100%; border-collapse: collapse; background: var(--card); }
.table th, .table td {
  padding: 12px 14px; text-align: start; border-bottom: 1px solid var(--border);
}
.table th { font-size: 13px; color: var(--muted); font-weight: 500; }
.table td > a:first-child { display: inline-block; padding: 2px 0; font-weight: 500; }

.badge {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: 13px; background: #e8f0fe; color: #1557b0;
}
.badge--draft { background: #fef7e0; color: var(--warn); }
.badge--canceled { background: #fce8e6; color: var(--err); }

/* flashes */
.flashes { margin-bottom: 20px; }
.flash {
  margin: 0 0 8px; padding: 10px 14px; border-radius: 8px;
  background: #e6f4ea; color: var(--ok);
}
.flash--err { background: #fce8e6; color: var(--err); }

.foot {
  text-align: center; color: var(--muted); font-size: 12px; padding: 8px 0 24px;
}
.foot__text { display: block; font-size: 13px; margin-bottom: 4px; }

/* ── phase 1 components ──────────────────────────────────────────────────── */

.row { display: flex; gap: 12px; flex-wrap: wrap; }
.row .field { flex: 1 1 140px; }

.check { display: flex; align-items: center; gap: 8px; margin: 8px 0; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--brand); flex: none; }

.choice { border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; margin: 0 0 20px; }
.choice legend { padding: 0 6px; }
.choice__hint { margin: 4px 0 0; }
.altdates { margin: 6px 0 0; margin-inline-start: 26px; padding-top: 6px; border-top: 1px dashed var(--border); }
.altdates .check { margin: 6px 0; }
.datelist form { margin: 0; }

.fold { margin: 4px 0 20px; }
.fold summary { cursor: pointer; color: var(--brand); }
/* The delete fold: red where the rest of the form is brand-coloured, so it
   cannot be mistaken for one more setting. The button is red-tinted, not
   solid red -- a confirm() stands between it and the delete either way. */
.fold--danger { border-top: 1px solid var(--border); padding-top: 16px; margin-top: 24px; }
.fold--danger summary { color: var(--err); }
.btn--danger { background: #fce8e6; color: var(--err); border-color: #f3b8b5;
  display: inline-flex; align-items: center; }  /* the icon must not stretch the line */
.btn--danger:hover { background: #f9d6d3; }

.btn--quiet { background: var(--card); color: var(--ink); border-color: var(--border); }
.btn--quiet:hover { border-color: var(--muted); }
.btn.is-copied { border-color: var(--brand); color: var(--brand); }
/* A quiet button that is currently "on" (the survey is open): a brand tint. */
.btn--on { background: color-mix(in srgb, var(--brand) 12%, var(--card));
  border-color: color-mix(in srgb, var(--brand) 40%, var(--border)); color: var(--brand); }
.btn:focus-visible, .tab-link:focus-visible, .topbar__nav a:focus-visible,
.jumpbar a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* Drawn icons inside buttons and links: one stroke, one weight, sized to the
   text beside them. Emoji never lined up and never matched across devices. */
.ic { width: 1.05em; height: 1.05em; vertical-align: -0.18em; fill: none;
  stroke: currentColor; stroke-width: 1.75; stroke-linecap: round;
  stroke-linejoin: round; margin-inline-end: .45em; flex: none; }
.btn--sm .ic { margin-inline-end: .35em; }
.ic--solo { margin: 0; vertical-align: -0.2em; }

.sharebox { background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 16px; margin-bottom: 20px; }
.sharebox__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sharebox__row + .sharebox__row { margin-top: 8px; }
.sharebox__label { font-size: 13px; color: var(--muted); flex: 0 0 auto;
  min-width: 96px; }
.sharebox .input { flex: 1 1 240px; }
/* The long URL is there to be read, not pasted, so it steps back. */
.sharebox__row--quiet .input { font-size: 13px; color: var(--muted); }
.sharebox__channels { margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--border); }
.sharebox__channels summary { cursor: pointer; font-size: 13px;
  color: var(--muted); }
.sharebox__channels .sharebox__row { margin-top: 8px; }
.sharebox__channels .sharebox__label { min-width: 170px; }
.sharebox__channels .field__hint { margin: 8px 0 0; }

/* The waiting-list segment pickers: a row of selects that reload the page. */
.filters { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end;
  margin-bottom: 16px; }
.filters__field { display: flex; flex-direction: column; gap: 4px;
  flex: 1 1 220px; max-width: 420px; }
.filters .btn { align-self: flex-end; }
/* The "waiting for" picker: a closed box that reads like a select and opens
   into checkboxes, so several runs can be one segment. Opens in flow, never
   floats -- a floating panel over the tiles is one more thing to get wrong
   at 375px. */
.picklist summary { cursor: pointer; list-style: none; }
.picklist summary::-webkit-details-marker { display: none; }
.picklist summary::after { content: "▾"; float: left; color: var(--muted); }
.picklist__body { border: 1px solid var(--border); border-top: 0;
  border-radius: 0 0 var(--radius) var(--radius); padding: 8px 12px;
  background: var(--card); }
.picklist__body .check { margin: 6px 0; }
.picklist__body .check span { overflow-wrap: anywhere; }
.picklist__body .btn { margin-top: 6px; }
@media (max-width: 480px) { .filters__field { flex-basis: 100%; max-width: none; } }

.tiles { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.tile { flex: 1 1 120px; background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px; text-align: center; }
.tile b { display: block; font-size: 28px; line-height: 1.2; }
.tile span { color: var(--muted); font-size: 13px; }
.tile small { font-size: 12.5px; }

section.card { margin-bottom: 20px; }
section.card h2 { margin-top: 0; font-size: 18px; }

.warn-inline { margin-top: 4px; font-size: 13px; color: var(--warn); }

.badge--upcoming { background: #e8f0fe; color: #1557b0; }
.badge--live { background: #fce8e6; color: var(--err); }
.badge--ended, .badge--off { background: #f1f3f4; color: var(--muted); }
.badge--sent { background: #e8f0fe; color: #1557b0; }
.badge--scheduled { background: #e6f4ea; color: var(--ok); }
.badge--skipped { background: #fef7e0; color: var(--warn); }
.badge--blocked { background: #fce8e6; color: var(--err); }
/* The waiting page's invite: the check row under the editor and its preview
   frame. Starts collapsed; grows once a preview has been posted into it. */
.invite__checks { margin: 12px 0; }
.invite__preview { height: 0; border: 0; }
.invite__preview.is-open { height: 560px; border: 1px solid var(--border); }
.badge--confirmation, .badge--waiting { background: #f3e8fd; color: #6b21a8; }
/* Held for approval: the same amber the stale-date warning uses, because it is
   the same kind of fact — something is waiting for a person to look at it. */
.badge--hold { background: #fef7e0; color: var(--warn); }

/* public page */
.public .wrap { padding-top: 40px; }
.desc { margin: 16px 0; }
.desc p { margin: 0 0 12px; }
.desc h2, .desc h3 { margin: 20px 0 8px; }
.desc ul, .desc ol { margin: 0 0 12px; padding-inline-start: 22px; }
.desc blockquote { margin: 12px 0; padding-inline-start: 14px;
  border-inline-start: 3px solid var(--border); color: var(--muted); }
.whenbox { margin: 20px 0; padding: 14px 18px; border-radius: 10px;
  background: color-mix(in srgb, var(--brand) 8%, var(--card));
  border-inline-start: 4px solid var(--brand); line-height: 2; }
/* The hero, the way v1 showed it: full width, cropped to a band rather than
   pushing the form below the fold on a tall image. */
.cover { display: block; width: 100%; max-height: 360px; object-fit: cover;
  border-radius: 10px; margin: 0 0 16px; }
.cover--thumb { max-width: 320px; max-height: 160px; margin: 0 0 8px; }
.banner { margin: 0 0 12px; padding: 8px 14px; border-radius: 8px;
  background: #fce8e6; color: var(--err); font-weight: 500; text-align: center; }
.banner--quiet { background: #f1f3f4; color: var(--muted); }
.fineprint { text-align: center; color: var(--muted); font-size: 13px; margin: 12px 0 0; }

/* paid events: the offer block. Everything is min-width 0 / wraps, and the
   whole block was measured at 375px before it shipped. */
.offer__headline { font-size: 19px; font-weight: 500; margin: -8px 0 16px; color: var(--muted); }
.offer { margin: 20px 0; }
.offer__stack { margin: 0 0 12px; }
.offer__stack ul { padding-inline-start: 22px; }
.offer__price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 16px 0; font-size: 18px; }
.offer__price b { font-size: 28px; color: var(--brand); }
.offer__anchor { color: var(--muted); font-size: 16px; }
.offer__guarantee { margin: 16px 0; padding: 14px 18px; border-radius: 10px;
  background: var(--bg); border: 1px dashed var(--border); }
.offer__guarantee-title { font-weight: 500; margin-bottom: 4px; }
.offer__guarantee p:last-child { margin-bottom: 0; }
.seatbar { margin: 16px 0; padding: 12px 16px; border-radius: 10px;
  background: #fef7e0; color: var(--warn); border: 1px solid #f5d58a;
  font-size: 15px; overflow-wrap: anywhere; }
.seatbar--closed { background: #f1f3f4; color: var(--muted); border-color: var(--border); }
.seatbar__why { display: block; margin-top: 4px; font-size: 14px; }
.faq { margin: 28px 0 0; }
.faq h2 { font-size: 18px; }
.badge--paid { background: #e6f4ea; color: #137333; }

/* The honeypot must be unreachable, not merely invisible: display:none is the
   first thing a bot checks for. The template also carries aria-hidden and
   tabindex="-1", so it is out of the tab order and unread by a screen reader.

   🚨 NOT `left: -9999px`. That is the usual recipe and it is wrong here: the
   offset element still counts towards the document's scrollable area, so the
   public page grew an 11,000px horizontal scroll that a phone user could swipe
   into. Clipping in place costs nothing and adds no overflow. */
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; }

/* Four tiles that shrink rather than wrap: a fifth row of one tile at 375px
   reads as broken, and minmax(0, …) lets the grid go narrower than the digits. */
.countdown { display: grid; grid-template-columns: repeat(4, minmax(0, 96px));
  gap: 12px; justify-content: center; margin: 28px 0; }
.countdown__unit { display: flex; flex-direction: column; align-items: center;
  min-width: 0; padding: 14px 4px; border-radius: 12px; background: var(--card);
  border: 2px solid var(--brand); box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.countdown__unit b { font-size: 40px; line-height: 1; font-weight: 700;
  color: var(--brand); font-variant-numeric: tabular-nums; }
.countdown__unit i { font-style: normal; font-size: 14px; margin-top: 6px;
  color: var(--muted); }
@media (max-width: 420px) {
  .countdown { gap: 8px; }
  .countdown__unit { padding: 10px 2px; }
  .countdown__unit b { font-size: 32px; }
}
.countdown--now { justify-content: center; color: var(--err); font-weight: 500; }

.linkish { background: none; border: 0; padding: 0; font: inherit;
  color: var(--brand); text-decoration: underline; cursor: pointer; }

.notice { margin: 0 0 20px; padding: 12px 16px; border-radius: var(--radius);
  background: var(--warn-bg); color: var(--warn); border: 1px solid #f0dfae; }
.flash--warn { background: #fef7e0; color: var(--warn); }

/* ── phase 2: tabs, composer ─────────────────────────────────────────────── */

.tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 20px;
  border-bottom: 1px solid var(--border); }
.tab-link { padding: 10px 14px; font: inherit; color: var(--muted);
  background: none; border: 0; border-bottom: 3px solid transparent;
  cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  white-space: nowrap; }
/* What a tab holds, on the tab: "לפני · 1 ממתין" answers before the click. */
.chip { display: inline-block; padding: 1px 8px; border-radius: 999px;
  font-size: 12.5px; line-height: 1.5; font-weight: 500;
  background: var(--bg); color: var(--muted); border: 1px solid var(--border);
  text-decoration: none; white-space: nowrap; }
.tab-link.is-active .chip { background: color-mix(in srgb, var(--brand) 10%, var(--card));
  color: var(--brand); border-color: transparent; }
.chip--warn { background: var(--warn-bg); color: var(--warn); border-color: #f0dfae; }
.chip--live { background: #fce8e6; color: var(--err); border-color: transparent; }
a.chip:hover { border-color: currentColor; }
/* 🚨 On a phone the tabs WRAP. They scrolled sideways for one release with
   the scrollbar hidden, and three of the five tabs were simply not on the
   screen — nothing said the bar scrolled. Two rows of visible tabs beat one
   row of invisible ones; test_tabs_never_scroll_out_of_a_phone pins it. */
@media (max-width: 600px) {
  .tabs { gap: 0; }
  .tab-link { padding: 10px 10px; font-size: 15px; }
  .tab-link .chip { font-size: 11.5px; padding: 0 6px; }
}
.tab-link:hover { color: var(--ink); }
.tab-link.is-active { color: var(--brand); border-bottom-color: var(--brand); }

.tab-panel { display: none; }
.tab-panel.is-active { display: block; }

.page-head__actions { display: flex; gap: 8px; align-items: center; }
.btn--sm { padding: 5px 12px; font-size: 14px; }
/* 🚨 `.cell-actions` is a <td>, and a <td> must never be given `display: flex`
   (or grid, or anything else that is not a table display). It stops being a
   table cell, so it no longer stretches to the row's height and the table's
   own background stops painting behind it: measured 59px inside a 71px row on
   the dashboard, 59px inside 106px in the approval queue, with the page's grey
   showing above, below and beside the buttons. The row of buttons lives on an
   inner `.actionrow` instead, which is free to be flex because it is a <div>.
   `.actionrow` is also used on its own where there is no cell — the waiting
   list's header, the question editor's row.

   ⚠️ It is NOT called `.btnrow`, and renaming it to that breaks it quietly.
   `.btnrow` already exists further down this file (search for it: the
   phase-aware action strip) with 8px gaps and `flex-wrap: wrap`, and being
   defined later it wins on source order — so the cells silently get the
   strip's metrics and these rows start wrapping inside a table. Found the
   hard way; the name is deliberate. */
.cell-actions { text-align: end; }
.actionrow { display: flex; gap: 6px; align-items: center; white-space: nowrap; }
/* Inside a page header the actions are three buttons, not a table cell's pair
   of links; at phone width they must wrap rather than widen the document.
   Measured on the waiting list at 375px: 539px wide without this. */
.page-head .actionrow { flex-wrap: wrap; white-space: normal; }

.composer { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px;
  align-items: start; }
.composer__main { background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 24px; }
.composer__body { font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 14px; line-height: 1.6; }
.composer__actions { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.composer__side { display: flex; flex-direction: column; gap: 16px;
  grid-column: 2; grid-row: 1; }
.composer__side .card { padding: 16px; }
.composer__side h2 { font-size: 15px; margin-bottom: 10px; }
/* The preview sits UNDER the editor, in the wide column, because the email it
   shows is 600px wide: in the 320px sidebar it was crushed to 288px and the
   date card wrapped to three lines. Tall enough for a whole reminder. */
.composer__previewcard { grid-column: 1; }
.composer__preview { width: 100%; height: 720px; border: 1px solid var(--border);
  border-radius: 8px; background: #fff; }
/* What finalize() adds on the way out. The editor holds the STORED copy, so
   the WhatsApp, pay and feedback buttons are simply not up there to look at —
   this list is the only place the page says they are going out at all. */
.composer__extrashead { margin-top: 10px; font-weight: 600; }
.composer__extras { list-style: none; margin: 4px 0 14px; padding: 0;
  display: flex; flex-direction: column; gap: 5px; max-width: 72ch; }
.composer__extra { color: var(--muted); font-size: 13px; line-height: 1.6;
  padding-inline-start: 18px; position: relative; }
.composer__extra::before { content: "+"; position: absolute; inset-inline-start: 0;
  color: var(--brand); font-weight: 700; }
.composer__extra--warn { color: var(--warn); }
.composer__extra--warn::before { content: "!"; color: var(--warn); }

code { background: rgba(127, 127, 127, .16); border-radius: 4px;
  padding: 1px 5px; font-size: .9em; }

@media (max-width: 860px) {
  .composer { grid-template-columns: 1fr; }
  .composer__side, .composer__previewcard { grid-column: auto; grid-row: auto; }
  .composer__preview { height: 520px; }
}

/* ── phase 3: questions, answers, waiting list, social proof ─────────────── */

.qfield { border: 1px solid var(--border); border-radius: 8px;
  padding: 12px 14px; margin: 0 0 16px; }
.qfield legend { padding: 0 6px; }
.req { color: var(--err); }

.scale { display: flex; gap: 6px; flex-wrap: wrap; }
.scale__opt { display: flex; flex-direction: column; align-items: center;
  gap: 4px; padding: 6px 10px; border: 1px solid var(--border);
  border-radius: 8px; cursor: pointer; min-width: 40px; }
.scale__opt:has(input:checked) { border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 12%, transparent); }
.scale__opt input { accent-color: var(--brand); }

.qlist { margin: 12px 0; }
.qrow { border: 1px solid var(--border); border-radius: 8px; padding: 12px;
  margin-bottom: 12px; background: var(--card); }
.qrow__head { display: flex; gap: 10px; }
.qrow__label { flex: 1 1 auto; }
.qrow__type { flex: 0 0 150px; }
.qrow__opts { margin-top: 10px; }
.qrow__foot { display: flex; justify-content: space-between; align-items: center;
  margin-top: 10px; gap: 12px; flex-wrap: wrap; }
.qrow__foot .check { margin: 0; }

.rule { border: 0; border-top: 1px solid var(--border); margin: 20px 0; }
.skip-form { text-align: center; margin-top: 14px; }
.datelist { list-style: none; padding: 0; margin: 16px 0 0; }
.datelist li { margin-bottom: 8px; }

/* results */
.sv { margin-bottom: 28px; }
.sv__q { font-size: 16px; margin: 0 0 10px; }
.sv__row { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.sv__label { flex: 0 0 30%; }
.sv__bar { flex: 1 1 auto; height: 20px; background: var(--bg);
  border-radius: 4px; overflow: hidden; }
.sv__bar i { display: block; height: 100%; background: var(--brand);
  min-width: 2px; }
.sv__n { flex: 0 0 90px; color: var(--muted); font-size: 13px; text-align: start; }
.sv__avg { margin: 0 0 10px; font-size: 15px; }
.sv__cols { display: flex; gap: 6px; align-items: flex-end; height: 110px; }
.sv__col { flex: 1 1 0; display: flex; flex-direction: column;
  justify-content: flex-end; align-items: center; height: 100%; }
.sv__col i { display: block; width: 100%; background: var(--brand);
  border-radius: 3px 3px 0 0; min-height: 2px; }
.sv__col span { font-size: 12px; color: var(--muted); margin-top: 4px; }
.sv__quotes { margin: 0; padding-inline-start: 20px; }
.sv__quotes li { margin-bottom: 6px; }

.table-scroll { overflow-x: auto; }

/* public: video + social proof */
.vsl { position: relative; padding-top: 56.25%; margin: 16px 0;
  border-radius: 10px; overflow: hidden; background: #000; }
.vsl iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.proof { margin: 20px 0; }
.proof__rating { text-align: center; font-size: 18px; margin: 0 0 14px; }
.proof__quote { margin: 0 0 12px; padding: 12px 16px; border-radius: 10px;
  background: var(--bg); border-inline-start: 3px solid var(--brand); }
.proof__quote p { margin: 0 0 6px; }
.proof__quote cite { font-style: normal; font-size: 14px; }
.proof__stars { color: #f5b301; font-size: 14px; }
.proof__role { color: var(--muted); }

/* ── phase 4: integrations, attendance ───────────────────────────────────── */

.conn { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin: 0 0 12px; }
.conn .muted { flex: 1 1 260px; font-size: 14px; }

.attend { font-size: 17px; margin: 0 0 12px; }
.attend b { font-size: 26px; }
.attend-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.attend-form .input { flex: 0 0 140px; }

/* ── phase 5: the setup wizard ───────────────────────────────────────────── */

.steps { display: flex; gap: 8px; list-style: none; margin: 0 0 20px; padding: 0; }
.steps__i { flex: 1 1 0; display: flex; flex-direction: column; align-items: center;
  gap: 4px; padding: 10px 4px; border-radius: 8px; background: var(--card);
  border: 1px solid var(--border); color: var(--muted); font-size: 13px; }
.steps__i b { display: grid; place-items: center; width: 24px; height: 24px;
  border-radius: 999px; background: var(--border); color: var(--muted);
  font-size: 13px; }
.steps__i.is-active { border-color: var(--brand); color: var(--ink); }
.steps__i.is-active b { background: var(--brand); color: var(--brand-ink); }
.steps__i.is-done b { background: var(--ok); color: #fff; }

/* ---- the live survey's projected screen ------------------------------- */
.btnrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }
.btnrow .btn { display: inline-flex; align-items: center; }
.btnrow form { margin: 0; }
.wrap--wide { max-width: 1200px; }
body.present { background: #17181a; color: #f1f3f4; }
body.present .foot, body.present .foot span { color: #5f6368; }
body.present .btn { background: #2a2c30; color: #f1f3f4; border-color: #3c4043; }
body.present .btn.is-on, body.present .btn--primary { background: var(--brand); color: var(--brand-ink); }
.present__head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-bottom: 24px; }
.present__title { margin: 0; font-size: 28px; flex: 1 1 auto; }
.present__count { font-size: 22px; white-space: nowrap; }
.present__controls { display: flex; flex-wrap: wrap; gap: 8px; }
.present__closed { background: #3b2f10; color: #fdd663; border: 0; }
.present__join { text-align: center; padding: 20px 0; }
.present__qr { width: min(60vh, 90vw, 520px); max-width: 100%; height: auto; border-radius: 16px; background: #fff; }
.present__qr--mini { width: 180px; }
.present__cta { font-size: 30px; margin: 20px 0 6px; }
.present__url { font-size: 22px; color: #9aa0a6; word-break: break-all; margin: 0; }
.present__big { margin-top: 24px; }
.present__bignum { display: block; font-size: 72px; line-height: 1; font-weight: 700; color: var(--brand); }
.present__biglbl { color: #9aa0a6; font-size: 20px; }
.present__results { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 24px; align-items: start; }
.present__stage { min-width: 0; }
.present__nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.present__counter { color: #9aa0a6; font-size: 18px; }
.present__card { background: #202124; border-radius: 16px; padding: 28px; min-height: 320px; }
.present__q { margin: 0 0 4px; font-size: 34px; line-height: 1.25; }
.present__n { color: #9aa0a6; margin: 0 0 20px; font-size: 18px; }
.present__card .sv__row { font-size: 22px; margin-bottom: 12px; }
.present__card .sv__bar { height: 30px; background: #2a2c30; }
.present__card .sv__n { color: #9aa0a6; font-size: 18px; flex-basis: 120px; }
.present__card .sv__cols { height: 200px; }
.present__card .sv__col { color: #9aa0a6; font-size: 18px; }
.present__card .sv__col i { background: var(--brand); }
.present__avg { font-size: 26px; margin: 0 0 16px; }
.present__quotes { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.present__quotes li { background: #2a2c30; border-radius: 10px; padding: 10px 16px; font-size: 22px; }
.present__mini { text-align: center; }
.present__mini .present__cta { font-size: 18px; margin: 10px 0 4px; }
.present__mini .present__url { font-size: 13px; }
.present__timer { margin-top: 24px; text-align: center; }
.present__clock { font-size: 96px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.present__clock.is-done { color: #f28b82; }
.present__timerctl { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; margin-top: 14px; }
.present__timerctl > span { display: flex; gap: 6px; }
@media (max-width: 800px) {
  .present__results { grid-template-columns: minmax(0, 1fr); }
  .present__mini { display: none; }
  .present__q { font-size: 24px; }
  .present__clock { font-size: 56px; }
}