/* 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 */
  --brand-link: #1a73e8;  /* --brand as TEXT, readable on --card (settings.ink_on) */
  --brand-stage: #2c7eea; /* --brand as TEXT on the dark survey screen (settings.STAGE_BG) */
  --font: Rubik, Segoe UI, Arial, sans-serif;
  --btn-radius: 8px;
  --bg: #f6f7f9;
  --inset: #f6f7f9;  /* a box inside the card: the preset's tone, never page_bg */
  --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; }
/* And any author rule that sets `display` (`.field` is a block) beats the UA
   stylesheet's [hidden], so a field shown on demand was always shown. */
[hidden] { display: none !important; }

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

/* 🚨 Link TEXT is --brand-link, never --brand. The business ochre #ffc250
   is 1.6:1 as text on white, so every link in a description was a word you
   squinted at; --brand-link is the same hue, darkened (or lightened on the
   night preset) until it reads. A line, a border or a ring stays --brand —
   only text has to be read. test_brand_link.py lists the exceptions. */
a { color: var(--brand-link); }

.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(--inset, var(--bg)); border-bottom: 1px solid var(--border); }

/* Editing the page in place (core/inline_edit.py, static/inline_edit.js): a
   thin bar on top that stays in view, and each text the owner wrote outlined
   on hover. Drawn only in edit mode: a visitor's page has none of these. */
.editbar { position: sticky; top: 0; z-index: 50; display: flex;
  flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 14px;
  padding: 8px 12px; border-radius: 8px; background: var(--warn-bg);
  color: var(--warn); font-size: 14px; box-shadow: 0 1px 4px rgba(0, 0, 0, .12); }
.editbar__title { font-weight: 600; }
.editbar__status { flex: 1; min-width: 90px; color: var(--muted); }
.editbar__status.is-err { color: var(--err); }
.editbar__undo { padding: 4px 10px; font-size: 13px; }
.editbar__back { font-size: 13px; }
[data-edit] { outline: 1px dashed transparent; outline-offset: 3px;
  border-radius: 3px; cursor: text; transition: outline-color .15s; }
[data-edit]:hover { outline-color: var(--brand); }
[data-edit]:focus { outline: 2px dashed var(--brand); }
[data-edit]:empty { display: block; min-height: 1.4em; }
span[data-edit]:empty { display: inline-block; min-width: 4em; }
[data-edit]:empty::before { content: attr(data-placeholder); color: var(--muted);
  font-weight: 400; }
/* A text a line each (the pains, the steps, the host card): its lines as
   typed, Enter for a new one. */
[data-kind="lines"] { white-space: pre-line; }
.pain__lines, .agenda__lines { padding: 10px 14px; border-radius: 10px;
  background: var(--card); line-height: 1.9; }
/* A settings text (core/inline_edit.SITE): the same on every page, said by
   a tag above it that inline_edit.js adds. */
[data-site] { outline-color: rgba(106, 27, 154, .35); }
[data-site]:hover, [data-site]:focus { outline-color: #6a1b9a; }
.sitetag { display: block; width: fit-content; margin: 0 auto 4px; padding: 1px 8px;
  border-radius: 999px; background: #f3e8fd; color: #6a1b9a; font-size: 12px;
  font-weight: 600; line-height: 1.6; }
.hostcard__text .sitetag, .proof .sitetag { margin-inline: 0; }
/* The video's place in edit mode: a 16:9 dashed frame where the player
   will stand, with the box for its link; under a video already there, just
   the box. Drawn only in edit mode. */
.vslspot { display: flex; flex-direction: column; justify-content: center;
  aspect-ratio: 16 / 9; margin: 16px 0; padding: 16px;
  border: 2px dashed var(--brand); border-radius: 12px;
  background: var(--inset, var(--bg)); text-align: center; }
.vslspot--has { aspect-ratio: auto; margin-top: -6px; padding: 10px 12px;
  border-width: 1px; text-align: start; }
.vslspot__title { margin: 0 0 4px; font-size: 18px; font-weight: 600; }
.vslspot__hint, .vslspot__note { margin: 4px 0 0; color: var(--muted);
  font-size: 13.5px; }
.vslspot__note.is-err { color: var(--err); }
.vslspot__row { display: flex; gap: 8px; margin-top: 10px; }
.vslspot__row .input { flex: 1; min-width: 0; }
.vslspot__row .btn { flex: none; }
[data-edit].is-saving { outline-color: var(--muted); }
[data-edit].is-err { outline: 2px dashed var(--err); }
.edittools { position: absolute; z-index: 60; display: flex; gap: 2px;
  padding: 3px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--card); box-shadow: 0 2px 8px rgba(0, 0, 0, .15); }
.edittools button { min-width: 32px; height: 30px; padding: 0 8px; border: 0;
  border-radius: 6px; background: transparent; color: var(--ink);
  font: inherit; font-size: 14px; cursor: pointer; }
.edittools button:hover { background: var(--inset); }

/* 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; }
/* The live banner (2026-10-22): an event running now is one wide red link
   under the top bar on every admin screen; amber in the quarter hour before
   it starts. White on #c5221f is 5.6:1, on #8f4e00 6.3:1. */
.livebanner { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 20px; background: var(--err); color: #fff;
  text-decoration: none; border-bottom: 1px solid rgba(0,0,0,.15); }
.livebanner:hover, .livebanner:focus-visible { background: #a91c19; color: #fff; }
.livebanner--soon { background: #8f4e00; }
.livebanner--soon:hover, .livebanner--soon:focus-visible { background: #7a4300; }
.livebanner:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }
.livebanner__dot { flex: none; width: 14px; height: 14px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 0 rgba(255,255,255,.7);
  animation: livepulse 1.6s ease-out infinite; }
.livebanner--soon .livebanner__dot { animation: none; }
@keyframes livepulse {
  0% { box-shadow: 0 0 0 0 rgba(255,255,255,.7); }
  100% { box-shadow: 0 0 0 12px rgba(255,255,255,0); }
}
@media (prefers-reduced-motion: reduce) { .livebanner__dot { animation: none; } }
.livebanner__text { flex: 1 1 320px; min-width: 0; display: flex;
  flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.livebanner__label { font-size: 14px; font-weight: 700; letter-spacing: .02em;
  text-transform: none; opacity: .92; }
.livebanner__name { font-size: 20px; font-weight: 700; line-height: 1.3;
  overflow-wrap: anywhere; }
.livebanner__when { font-size: 15px; opacity: .92; }
.livebanner__go { flex: none; display: inline-flex; align-items: center; gap: 4px;
  padding: 8px 14px 8px 10px; border-radius: 999px; background: #fff;
  color: var(--err); font-weight: 700; font-size: 15px; white-space: nowrap; }
.livebanner--soon .livebanner__go { color: #8f4e00; }
.livebanner__go .ic { width: 18px; height: 18px; }
@media (max-width: 600px) {
  .livebanner { padding: 12px; gap: 10px; }
  .livebanner__name { font-size: 18px; }
  .livebanner__go { flex: 1 1 100%; justify-content: center; }
}
/* Events 3.0's strip under the top bar (base.html, `three_banner`): the
   way from the old admin to the new one, in 3.0's own colour. Quieter than
   the live banner above it: one line, no pulse. */
/* The previous admin's strip (2026-10-31): quiet now that 3.0 is the main
   admin. Neutral ground, 3.0's colour only as the edge and the link. */
.v3banner { display: flex; align-items: center; gap: 4px 12px; flex-wrap: wrap;
  padding: 6px 20px; border-inline-start: 4px solid var(--v3);
  border-bottom: 1px solid rgba(127,127,127,.2);
  color: inherit; text-decoration: none; font-size: 14px; }
.v3banner:hover .v3banner__go, .v3banner:focus-visible .v3banner__go { text-decoration: underline; }
.v3banner:focus-visible { outline: 2px solid var(--v3); outline-offset: -3px; }
.v3banner__what { flex: 1 1 220px; min-width: 0; }
.v3banner__more { opacity: .75; }
.v3banner__go { flex: none; display: inline-flex; align-items: center; gap: 2px;
  color: var(--v3); font-weight: 700; white-space: nowrap; }
.v3banner__go .ic { width: 16px; height: 16px; }
@media (max-width: 600px) {
  .v3banner { padding: 6px 12px; }
  .v3banner__more { display: none; }
}
.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; }
.brandlink { display: block; width: fit-content; margin: 0 auto; border-radius: 8px; }
.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-link); 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; }

/* The one box's results, dropped under any [data-omni] form (static/omni.js,
   core/omni.py, 2026-10-15). In the topbar it is wider than the field, so a
   setting's section and explanation fit on their lines; it starts at the
   field's right edge (inline-start, RTL) and never wider than the screen. */
form[data-omni] { position: relative; }
.omni {
  position: absolute; top: calc(100% + 6px); inset-inline-start: 0; z-index: 40;
  width: max(100%, min(560px, calc(100vw - 32px)));
  max-height: min(70vh, 560px); overflow-y: auto; padding: 6px;
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 12px 32px rgba(60, 64, 67, .18), 0 2px 6px rgba(60, 64, 67, .10);
}
.omni__group + .omni__group, .omni__foot {
  margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--border); }
.omni__head { padding: 8px 10px 4px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.omni__item { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px;
  border-radius: 10px; color: var(--ink); text-decoration: none; }
.omni__item.is-active { background: color-mix(in srgb, var(--brand) 12%, var(--card)); }
.omni__title { font-size: 15px; font-weight: 500; }
.omni__sub { font-size: 13px; color: var(--muted); }
.omni__hint { font-size: 13px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.omni__item--ask .omni__title { color: var(--brand-link); font-weight: 600; }
.omni__back .omni__title { font-size: 14px; color: var(--muted); }
.omni__none { margin: 10px; color: var(--muted); }
.omni__ai { padding: 2px; }
.omni__answer { margin: 6px 10px 12px; font-size: 15px; line-height: 1.65; white-space: pre-line; }
.omni__error { margin: 6px 10px 12px; color: var(--warn); }
.omni__thinking { margin: 10px; color: var(--muted); animation: omni-pulse 1.2s ease-in-out infinite; }
@keyframes omni-pulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .omni__thinking { animation: none; } }
.omni__links { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 10px 8px; }
/* The search page: settings and places as a list, and the question box. */
.omni-list { list-style: none; padding: 6px 0; margin: 0 0 24px; }
.omni-list li { display: flex; flex-direction: column; gap: 2px; padding: 10px 24px;
  border-top: 1px solid var(--border); }
.omni-list li:first-child { border-top: 0; }
.omni-list a { font-weight: 500; }
.omni-list__sub, .omni-list__hint { font-size: 13.5px; color: var(--muted); }
.omni-answer, .omni-ask { margin-bottom: 24px; }
.omni-ask { margin-top: 28px; }
.omni-ask__form { display: flex; gap: 8px; margin-top: 12px; }
.omni-ask__form .input { flex: 1 1 auto; min-width: 0; }
.omni-ask__out { margin-top: 14px; }
.omni-ask__out .omni__answer, .omni-answer .omni__answer { margin: 0 0 12px; }
.omni-ask__out .omni__links, .omni-answer .omni__links { margin: 0; }
.omni-ask__out .omni__thinking { margin: 0; }
/* The settings page's own box sits above the map. */
.settings-search { margin-bottom: 20px; }
/* A setting the search opened, lit up for a few seconds. */
.field--found { border-radius: 10px; animation: field-found 3.4s ease-out; }
@keyframes field-found {
  0%, 55% { background: color-mix(in srgb, var(--brand) 12%, transparent);
            box-shadow: 0 0 0 6px color-mix(in srgb, var(--brand) 12%, transparent),
                        0 0 0 8px color-mix(in srgb, var(--brand) 55%, transparent); }
  100% { background: transparent; box-shadow: 0 0 0 6px transparent, 0 0 0 8px transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .field--found { animation: none; outline: 3px solid var(--brand); outline-offset: 6px; }
}
@media (max-width: 600px) {
  .omni-list li { padding: 10px 16px; }
  .omni-ask__form { flex-direction: column; }
  /* A card opened alone (:target) is the whole screen; the box is the map's. */
  body:has(.card[id]:target) .settings-search { display: none; }
}

/* 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); }
/* Something missing that only the owner can supply — a session with no
   WhatsApp group of its own (settings → nag_event_group). Red rather than the
   queue's amber: amber is "waiting on you", this is "not there". */
.card--alert { background: #fce8e6; border-color: #f3b8b5; }
.card--alert h2 { color: var(--err); margin-top: 0; }
.card--alert .field__hint { color: var(--ink); }
.groupnag { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.groupnag .input { flex: 1 1 240px; min-width: 0; width: auto; }
form.groupnag { padding: 12px 0; border-top: 1px solid #f3b8b5; }
.groupnag__head { flex: 1 1 100%; }
.groupnag__head > * { display: block; }
.groupnag__none { margin: 12px 0 0; }

/* "לטיפול" (2026-10-22): everything on the events screen that waits on the
   owner, in one card above the lists. A brand rule across its top says
   "this is the work"; each part inside is divided by a hairline, and the
   one that is MISSING something (a WhatsApp group) keeps the red tint the
   alert card had. */
.todo { padding: 18px 24px; border-top: 3px solid var(--brand); margin-bottom: 20px; }
.todo > h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; font-size: 20px; }
.todo__count { display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; padding: 1px 9px; border-radius: 999px; font-size: 14px;
  font-weight: 600; background: var(--brand); color: var(--brand-ink); }
.todo__part { padding: 14px 0 6px; border-top: 1px solid var(--border); }
.todo > h2 + .todo__part { border-top: 0; }
.todo__part > h3 { margin: 0 0 4px; font-size: 16px; }
.todo__part--alert { background: #fce8e6; margin-inline: -24px; padding-inline: 24px;
  border-top-color: #f3b8b5; }
.todo__part--alert > h3 { color: var(--err); }
.todo__part--alert .field__hint { color: var(--ink); }
.todo__queue > h3 { color: var(--warn); }
.todo__queue .table { background: transparent; }
.tasks { list-style: none; margin: 0; padding: 0; }
.task { display: flex; align-items: center; gap: 8px 12px; padding: 8px 0;
  border-top: 1px solid var(--border); }
.tasks > li:first-child > .task, .tasks > .task:first-child { border-top: 0; }
.task__what { flex: 1 1 260px; min-width: 0; }
.task__what b { font-weight: 600; }
/* The calendar's line is the fold's summary; its entries open under it. */
.task__fold > summary { list-style: none; cursor: pointer; }
.task__fold > summary::-webkit-details-marker { display: none; }
.task__fold:not([open]) .when-open, .task__fold[open] .when-closed { display: none; }
.task__cal { margin: 0 0 8px; padding: 4px 12px; border-radius: 12px; background: var(--bg); }
/* While nothing waits: one quiet line instead of the card. */
.dash-note { margin: 0 0 18px; }
.chip--todo { background: var(--warn-bg); color: var(--warn); border-color: #f0dfae; }

/* The lists, one at a time (2026-10-22): הבאים · סדנאות קבועות · שהיו.
   Without the script (no .dtabs-on) every list shows, one under another. */
.dtabs-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 16px;
  margin: 8px 0 16px; border-bottom: 1px solid var(--border); }
.dtabs-bar .search { margin: 0 0 8px; margin-inline-start: auto; flex: 0 1 300px; }
.dtabs { display: flex; flex-wrap: wrap; gap: 2px; }
.dtab { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px;
  margin-bottom: -1px; border-bottom: 3px solid transparent; color: var(--muted);
  font-size: 16px; font-weight: 500; text-decoration: none; }
.dtab:hover { color: var(--ink); text-decoration: none; }
.dtab.is-active { color: var(--ink); border-bottom-color: var(--brand); }
.dtab__n { font-size: 13px; font-weight: 400; color: var(--muted); }
.dtabs-on .dpanel { display: none; }
.dtabs-on .dpanel.is-active { display: block; }
/* The tab already names the list it shows. */
.dtabs-on .dpanel[data-list] > .list__title { display: none; }
/* Searching: both event lists open, the workshops step aside. */
.dtabs-on.dtabs-searching .dpanel[data-list] { display: block; }
.dtabs-on.dtabs-searching .dpanel:not([data-list]) { display: none; }
.dtabs-on.dtabs-searching .dpanel[data-list] > .list__title { display: block; }
.dtabs-searching .dtab.is-active { border-bottom-color: transparent; color: var(--muted); }
/* A group's heading inside a list ("היום", "בשבוע הבא", "אוקטובר"). */
.table--events tr.row-group > th { padding: 18px 12px 6px; font-size: 13.5px;
  font-weight: 600; color: var(--muted); text-align: start; background: var(--bg);
  border-bottom: 1px solid var(--border); }
.table--events tr.row-group:first-child > th { padding-top: 10px; }
.row-day { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.row-more { margin-top: 6px; font-size: 13.5px; }
/* The whole calendar card, folded at the bottom. */
.calfold { margin-top: 24px; }
.calfold > summary { cursor: pointer; color: var(--brand-link); font-weight: 500; }
.calfold > .card { margin-top: 10px; }
/* The date changed under people who registered for the old one
   (core/moved.py): amber like the queue, because it is waiting on the owner
   to send something, not missing something only they can supply. */
.card--moved { background: var(--warn-bg); border-color: #f0dfae; }
.card--moved h2 { color: var(--warn); margin-top: 0; }
.moved__people { margin: 0 0 12px; padding-inline-start: 20px; }
.moved__people li { margin: 2px 0; }
/* The recurring workshops on the dashboard (2026-10-07). A list, not a
   table: on a phone each one is a block and its button wraps under it. */
/* 🚨 Never `padding: 0` here: the list IS the card (`ul.card`), and a zero
   took the card's own padding away, so the text and the "מועד חדש" button
   touched its border (2026-10-08, Omri: "something is wrong with the frame
   on the left"). */
.workshops { list-style: none; margin: 0; padding: 18px 24px; }
@media (max-width: 600px) { .workshops { padding: 14px 16px; } }
.workshop { display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px 16px; padding: 12px 0; border-top: 1px solid var(--border); }
.workshop:first-child { border-top: 0; padding-top: 0; }
.workshop__main { flex: 1 1 260px; min-width: 0; }
/* "סדנה 2" never breaks between the word and its number. */
.wnum { white-space: nowrap; }
.workshop__title { display: block; overflow-wrap: anywhere; }
.workshop__meta { margin: 2px 0 0; font-size: 13.5px; }
/* "דף ההנחיות", "קבוצת הוואטסאפ": a two-word link never breaks in half. */
.workshop__meta a, .workshop__meta .chip { white-space: nowrap; }
.workshop__excerpt { margin: 6px 0 0; font-size: 14px; color: var(--muted);
  max-width: 72ch; overflow-wrap: anywhere; }
.workshop__edit { margin: 8px 0 0; font-size: 14px; }
.workshop__edit summary { cursor: pointer; color: var(--brand-link); }
.workshop__rename { display: flex; flex-wrap: wrap; align-items: flex-end;
  gap: 8px 10px; margin: 10px 0 0; }
.workshop__rename .field { flex: 1 1 240px; min-width: 0; margin: 0; }
/* Two classes, so it outranks `.linkish`, defined further down. */
.workshop .workshop__ungroup { color: var(--err); }
.field--missing .field__label,
.field--missing .field__hint strong { color: var(--err); }
.field--missing .input { border-color: var(--err); background: #fffafa;
  box-shadow: 0 0 0 3px #fce8e6; }
.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; }
/* "סדנה 2 · מועד 34" above an event's title (2026-10-08): the numbers the
   owner talks about it by. Small, so the title stays the title. */
.page-head__ids { margin: 0 0 2px; font-size: 13.5px; font-weight: 500;
  color: var(--muted); }
/* The event's running number, "#019": the one to say it by, so it reads
   first among the muted ids (2026-10-16). */
.page-head__sessno { display: inline-block; padding: 0 8px; border-radius: 10px;
  background: #fcebd7; color: #a14a06; font-weight: 700;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
/* The number link beside it, "events…/019" (2026-10-16): a quiet copy
   button, never broken across lines; on a phone it may wrap as a whole. */
.numlink { display: inline-flex; align-items: center; gap: 4px; margin-inline-start: 6px;
  padding: 1px 8px; border: 1px solid var(--border); border-radius: 999px;
  background: transparent; color: var(--muted); font: inherit; font-size: 12.5px;
  font-variant-numeric: tabular-nums; white-space: nowrap; cursor: pointer;
  vertical-align: 1px; max-width: 100%; }
.numlink:hover { color: var(--text); border-color: var(--muted); }
.numlink .ic { width: 13px; height: 13px; }
.numlink.is-copied { color: var(--text); }
.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-link); 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-link); background: color-mix(in srgb, var(--brand) 10%, var(--card)); }
.card[id] { scroll-margin-top: calc(var(--jumpbar-h, 0px) + 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,
  .page-head:has(.next) > .page-head__actions { 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 > p { margin: 0; }
/* Its two parts since 2026-09-30: the meeting, and the survey (a status
   line and one "הפעלת הסקר" button; the QR and the switch are on the survey
   screen). Side by side, a rule between; stacked on a phone. */
.daystrip__part { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.daystrip__part + .daystrip__part { padding-inline-start: 18px;
  border-inline-start: 1px solid color-mix(in srgb, var(--brand) 30%, var(--border)); }
.daystrip__label { font-size: 13px; color: var(--muted); }
.daystrip__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
@media (max-width: 600px) {
  .daystrip__part { flex: 1 1 100%; }
  .daystrip__part + .daystrip__part { padding-inline-start: 0; border-inline-start: 0;
    padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--brand) 30%, var(--border)); }
}
/* "הסקר סגור · 4 שאלות" / "הסקר פתוח · 12 ענו", with a dot that is green
   while it is open: here and in the survey card. */
.livestatus { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.livestatus__dot { width: 10px; height: 10px; border-radius: 50%; background: #9aa0a6; flex: none; }
.livestatus--open .livestatus__dot { background: var(--ok);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 18%, transparent); }
.livestatus__note { font-size: 13px; color: var(--muted); }
/* 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; }
/* 🚨 A date select is never narrower than what it shows (2026-09-30). They
   were `flex: 1 1 0; min-width: 0` in a third of a form row, so the
   duplicate form's proposed Friday 16 October 2026 read "16 | בר | 20" —
   the date was right and nobody could see it; on a phone each select was
   43px. Each one is as wide as its longest option now, the field holding
   them takes that room, and the two times beside it give way: one line on a
   desktop, the date alone above the times on a phone. */
.dateparts .input { flex: 1 0 auto; width: auto; padding-inline: 6px; }
.row .field:has(> .dateparts) { flex: 1 0 auto; }
.row .field:has(> .input--time) { flex-basis: 110px; }
/* 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 -- on a
   screen wide enough for it. On a phone its groups wrap to half the screen,
   and a bar that tall covers what it jumps to. The room a section leaves for
   it is measured into --jumpbar-h by settings.html. */
.jumpbar { position: sticky; top: 8px; z-index: 2; }
@media (max-width: 600px) { .jumpbar { position: static; } }

/* 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, .todo__queue thead { display: none; }
  .table--events, .table--events tbody,
  .todo__queue .table, .todo__queue tbody { display: block; }
  .table--events tr, .todo__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, .todo__queue td { display: block; padding: 0; border: 0; }
  .todo__queue td { flex: 1 1 100%; font-size: 15px; }
  .todo__queue td .muted { font-size: 13px; }
  .todo__queue .cell-actions { margin-top: 8px; }
  .todo__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 survey card, on its own סקר tab since 2026-10-02 (it was on במפגש):
   three steps, in the order they happen. The numbers are the order, which
   is the point of them. The QR is not here any more; it lives on the survey
   screen. The status line carries the close button while it is open. */
.svcard__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.svcard__head h2 { margin: 0; }
.svcard__status { margin: 12px 0 0; display: flex; flex-wrap: wrap;
  align-items: center; gap: 8px 14px; }
.svcard__status form { margin: 0; }
/* "מי ענה על הסקר": the people the survey added, one per line. */
.svpeople { margin: 0 0 10px; padding-inline-start: 20px; }
.svpeople li { margin: 4px 0; overflow-wrap: anywhere; }
.svpeople__list { color: var(--ok); font-size: 13px; }
/* The Google Form card (core/gform.py): what the check found, one line
   each, and the delay's select with its button on one row. */
.gfcheck { margin: 6px 0 12px; padding-inline-start: 20px; }
.gfcheck li { margin: 4px 0; overflow-wrap: anywhere; }
#gform .btnrow { margin: 0 0 12px; }
#gform .tiles { margin-top: 14px; }
.gfmail { border: 0; padding: 0; margin: 14px 0 0; min-width: 0; }
.gfmail > legend { padding: 0; margin-bottom: 4px; }
.gfdelay { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; margin: 12px 0 0; }
.gfdelay .field { margin: 0; min-width: 0; flex: 0 1 260px; }
.svcard__count { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--border); }
.svstep p.svstep__gap { margin-bottom: 10px; }
.svcard__auto { margin: 10px 0 0; padding: 8px 12px; border-radius: 8px;
  background: var(--bg); font-size: 14px; max-width: 72ch; }
.svsteps { list-style: none; margin: 14px 0 0; padding: 0; }
.svstep { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 14px;
  padding: 16px 0 14px; border-top: 1px solid var(--border); }
.svstep__n { width: 32px; height: 32px; border-radius: 50%; display: grid;
  place-items: center; font-weight: 700; font-size: 15px; background: var(--bg);
  border: 1px solid var(--border); }
.svstep h3 { margin: 3px 0 8px; font-size: 16px; }
.svstep p { margin: 0; }
.svstep--off { opacity: .5; }
.svstep__line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.svstep .sharebox__row { margin-top: 12px; }
.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; }
/* 🚨 A disabled button LOOKS disabled (2026-10-10, Omri on event 39's
   notice: "the send button does not work"). There was no :disabled rule,
   so a locked send in the brand's colour, with a pointer cursor, read as a
   button that was broken. Two classes deep beats every .btn--* look, and
   three on hover beats their :hover rules (.btn--danger's paints pink). */
.btn.is-disabled, .btn:disabled, .btn:disabled:hover {
  background: var(--border); color: var(--muted);
  border-color: transparent; cursor: not-allowed; filter: none; }

/* 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); }
/* A flash that carries its next step as a button ("השאלות נשמרו." →
   "הפעלת הסקר"). */
.flash--row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }

.foot {
  text-align: center; color: var(--muted); font-size: 12px; padding: 8px 0 24px;
}
.foot__text { display: block; font-size: 13px; margin-bottom: 4px; }
/* The Clarity notice (base.html): said, as its terms ask, but in the margin. */
.foot__text--fine { font-size: 11px; opacity: .75; }

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

.row { display: flex; gap: 12px; flex-wrap: wrap; }
.row .field { flex: 1 1 140px; }
/* The owner's background (_background.html): a fieldset that looks like
   the form around it, its legend one of the form's group headings. */
.bgfields { border: 0; padding: 0; margin: 0; min-width: 0; }
.bgfields > legend { width: 100%; padding-inline: 0; font-weight: 700; }
.bgfields > legend .muted { font-weight: 400; font-size: 14px; }

/* The duplicate form's runs: one row per date, the weekday named above it. */
.runs { list-style: none; margin: 0; padding: 0; }
.runs__row + .runs__row { border-top: 1px dashed var(--border); padding-top: 10px; }
.runs__day { font-weight: 700; color: var(--ink); }

.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; }
/* A full date's form (core/seats.py): the dates ARE the choice, not a
   reveal under a card, so they stand on their own like any field. */
.altdates--open { margin: 0 0 16px; padding: 0; border: 0; }

/* The sign-up form's choice as cards (2026-09-29). Each card is the <label>
   of a real, visible radio, so a tap anywhere on it chooses — no script, and
   nothing hidden. 🚨 `min-width: 0`: a fieldset's default min-inline-size is
   its content's, which is how a long line widens a phone page. The chosen
   card is drawn by `:has()`; where it is unsupported the radio still shows
   the choice. `.choice` stays plain for the pick page, which shares it. */
.choice--cards { border: 0; padding: 0; margin: 0 0 20px; min-width: 0; }
.choice--cards legend { padding: 0; margin-bottom: 10px; font-size: 17px; }
.optcard { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 10px;
  padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--card); cursor: pointer; min-width: 0; }
.optcard input { width: 20px; height: 20px; margin: 2px 0 0; flex: none;
  accent-color: var(--brand); }
.optcard:hover { border-color: color-mix(in srgb, var(--brand) 45%, var(--border)); }
.optcard:has(input:checked) { border: 2px solid var(--brand); padding: 13px 15px;
  background: color-mix(in srgb, var(--brand) 9%, var(--card)); }
.optcard:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
.optcard:has(input:disabled) { opacity: .55; cursor: default; }
.learn__most { margin: -2px 0 10px; font-size: 14px; color: var(--muted); }
.optcard__text { display: block; min-width: 0; }
.optcard__title { display: block; font-weight: 500; font-size: 16px; color: var(--ink); }
.optcard__sub { display: block; margin-top: 2px; font-size: 14px; color: var(--muted);
  overflow-wrap: anywhere; }
.choice--cards .altdates { margin: -2px 0 10px; margin-inline-start: 16px; }
.check--small { font-size: 14px; color: var(--muted); }
.check--small input { width: 16px; height: 16px; }

/* The facts card under the title (2026-10-02): when, where, the places, the
   proof and the countdown, one per row, then the way to the form. Its own
   framed block on the page's grey, so the limit is a fact on a line of its
   own rather than a sentence the description runs straight on from. */
.facts { margin: 0 0 28px; padding: 16px 18px; border: 1px solid var(--border);
  border-radius: 12px; background: var(--inset, var(--bg)); min-width: 0; }
.facts__row { display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px;
  min-width: 0; line-height: 1.5; }
.facts__ic { flex: none; width: 1.5em; text-align: center; }
.facts__text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.facts__why { display: block; margin-top: 2px; font-size: 14px; color: var(--muted); }
/* The places: plain while they say only the limit, the seat bar's amber once
   they count what is left, framed once full. Fixed colours on the amber, so
   they read on every preset; the full row takes the card's own surfaces. */
.facts__seats--hot, .facts__seats--full { padding: 8px 10px; border-radius: 10px;
  margin-inline: -10px; }
.facts__seats--hot { background: var(--warn-bg); color: var(--warn);
  border: 1px solid #f5d58a; }
.facts__seats--hot .facts__why { color: var(--warn); }
.facts__seats--full { background: var(--card); color: var(--ink);
  border: 1px solid var(--border); }
.facts__go { margin-top: 6px; }
@media (max-width: 420px) {
  .facts { padding: 14px; }
  .facts__row { gap: 8px; }
  .facts__sep { display: none; }
  .facts__time { display: block; }
}
/* The same words again, small, framed and centred over the sign-up button. */
.seatchip { width: fit-content; max-width: 100%; margin: 4px auto 12px;
  padding: 4px 14px; border: 1px solid var(--border); border-radius: 999px;
  font-size: 14px; color: var(--ink); text-align: center; overflow-wrap: anywhere; }
.seatchip--hot { background: var(--warn-bg); color: var(--warn); border-color: #f5d58a; }

/* The ticket shop (web/tickets.py, 2026-10-10): one row per kind of ticket,
   the option card's frame, the name and price on one side and how many on
   the other. A row is a <label> around its select, so a tap on the name
   opens it. `min-width: 0` everywhere, the fieldset lesson above. */
.shop__kinds { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; }
.shop__kinds legend { padding: 0; margin-bottom: 8px; font-size: 17px; }
.shop__phase { margin: -2px 0 10px; font-size: 14px; color: var(--muted); }
.shop__kind { display: flex; align-items: center; gap: 12px; margin: 0 0 10px;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--card); min-width: 0; }
.shop__kind.is-picked { border: 2px solid var(--brand);
  padding: 11px 13px; background: color-mix(in srgb, var(--brand) 9%, var(--card)); }
.shop__name { flex: 1 1 auto; min-width: 0; font-weight: 500; font-size: 16px;
  overflow-wrap: anywhere; }
.shop__price { flex: none; font-size: 16px; white-space: nowrap; }
.shop__info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.shop__info .shop__name { flex: none; }
.shop__legend { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; }
.shop__price s { font-size: 14px; margin-inline-start: 4px; }
/* − 1 + (2026-10-11): left to right like any number control. */
.stepper { flex: none; display: inline-flex; align-items: center; direction: ltr;
  border: 1px solid var(--border); border-radius: 999px; background: var(--card); }
.stepper:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; }
.stepper__btn { width: 44px; height: 44px; border: 0; background: transparent;
  font-size: 24px; line-height: 1; color: var(--brand-link); cursor: pointer; padding: 0; }
.stepper__btn:disabled { color: var(--muted); opacity: .35; cursor: default; }
.stepper__n { width: 32px; height: 44px; border: 0; padding: 0; text-align: center;
  font: inherit; font-size: 18px; font-weight: 700; color: var(--ink);
  background: transparent; -moz-appearance: textfield; appearance: textfield; }
.stepper__n:focus { outline: none; }
.stepper__n::-webkit-outer-spin-button,
.stepper__n::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.shop__coupon { margin: 0 0 14px; }
.shop__coupon summary { cursor: pointer; color: var(--brand-link); font-size: 15px;
  margin-bottom: 8px; }
.shop__total { margin: 14px 0 10px; font-size: 18px; text-align: center; }
.shop__total b { font-size: 22px; }
.shop__total [data-discount] { display: block; font-size: 14px; }
.shopclosed .banner { margin-bottom: 12px; }
/* The parking question's instructions: the owner's words, line breaks kept. */
.shop__parking { margin: 4px 0 12px; padding: 10px 14px; border-radius: 10px;
  background: var(--inset, var(--bg)); color: var(--ink);
  border: 1px solid var(--border); white-space: pre-line;
  overflow-wrap: anywhere; }

/* A ticket order, on the page the buyer comes back to: each line with its
   price, the code's discount, the total. */
.ordersum { margin: 16px 0; padding: 14px 16px; border-radius: 12px;
  background: var(--inset, var(--bg)); border: 1px solid var(--border); min-width: 0; }
.ordersum__code { margin: 0 0 8px; color: var(--muted); }
.ordersum__lines { list-style: none; margin: 0; padding: 0; }
.ordersum__lines li { display: flex; justify-content: space-between; gap: 12px;
  padding: 6px 0; border-bottom: 1px solid var(--border); min-width: 0; }
.ordersum__lines li span:first-child { min-width: 0; overflow-wrap: anywhere; }
.ordersum__total { font-weight: 700; border-bottom: 0 !important; }

/* The owner's ticket editor: four narrow columns that stay a table on a
   phone, inside their own scrolling box. */
.table--tickets td { padding: 6px 4px; vertical-align: middle; }
.table--tickets .input { min-width: 0; }
.input--num { width: 100%; max-width: 110px; }
.table--tickets td:first-child .input { min-width: 120px; }

/* The door (door.html): big rows to tap with one thumb, the count on top. */
.doorcount { font-size: 18px; margin: 0 0 14px; }
.doorsearch { margin-bottom: 12px; }
.doorlist { list-style: none; margin: 0; padding: 0; }
.doorrow { margin: 0 0 8px; }
.doorrow form { margin: 0; }
.doorrow__btn { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; width: 100%; min-height: 60px; padding: 12px 14px; text-align: start;
  font: inherit; color: var(--ink); background: var(--card);
  border: 1px solid var(--border); border-radius: 12px; cursor: pointer; }
.doorrow__who { display: flex; flex-direction: column; min-width: 0; }
.doorrow__who b { font-size: 17px; overflow-wrap: anywhere; }
.doorrow__who .muted { font-size: 14px; overflow-wrap: anywhere; }
.doorrow__state { flex: none; font-size: 14px; color: var(--brand-link); }
.doorrow.is-in .doorrow__btn { background: #e6f4ea; border-color: #a8dab5; }
.doorrow.is-in .doorrow__state { color: #137333; font-weight: 700; }
.doorbox { display: inline-block; width: 18px; height: 18px; border: 1.5px solid var(--ink);
  border-radius: 3px; text-align: center; line-height: 16px; }
.table--door-print td, .table--door-print th { padding: 6px 8px; }
@media print {
  .topbar, .crumbs, .page-head__actions, footer { display: none !important; }
}
/* Who runs this, under the logo (`host_line`). Balanced, so on a phone it
   breaks into two even lines rather than leaving one word of a parenthesis
   on the second: "(Google" at the end of a right-to-left line, its ")" on
   the next, reads as a pair of brackets facing the wrong way. */
.hostline { margin: -8px 0 20px; text-align: center; font-size: 15px;
  color: var(--ink); overflow-wrap: anywhere; text-wrap: balance; }
/* "מחזור 13" above a workshop date's title (core/cycles.py): small, in the
   brand's readable ink (`--brand-link`, never `--brand`: the ochre is 1.6:1
   on white), so it reads as a label of the title, not a second title. */
.cycleline { margin: 0 0 4px; font-size: 14.5px; font-weight: 700;
  letter-spacing: .01em; color: var(--brand-link); }

/* The personal portal (/me, core/portal.py): one column of dated items, each
   a bordered block with its buttons in a wrapping row, so a phone never
   scrolls sideways. A date happening now is tinted in the brand's colour. */
.portal h2 { font-size: 17px; margin: 0 0 10px; }
.portal__head { display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; flex-wrap: wrap; }
.portal__head form { margin: 0; }
.portal__addr { margin: -6px 0 18px; font-size: 14px; overflow-wrap: anywhere; }
.portal__sec { margin: 26px 0 0; display: grid; gap: 10px; }
.portal__sec > h2 { margin: 0; }
.portal__community { text-align: center; padding: 16px; border-radius: 14px;
  background: #e8f4f2; border: 1px solid #cfe7e3; }
/* The community at the top of the personal area: one short row, the green
   button at the end (on a phone the button takes its own line). */
.portal__community--top { display: flex; align-items: center; gap: 10px 14px;
  flex-wrap: wrap; justify-content: space-between; text-align: start;
  padding: 12px 14px; margin: 0 0 6px; }
.portal__community--top p { margin: 0; flex: 1 1 220px; font-size: 14.5px; }
.btn--whatsapp { background: #128c7e; border-color: #128c7e; color: #fff; }
.btn--whatsapp:hover { background: #0f7a6e; color: #fff; }
.pitem .vsl { margin: 4px 0 2px; }
.pitem { border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px;
  display: grid; gap: 6px; min-width: 0; }
.pitem--live { border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 8%, var(--card)); }
.pitem p { margin: 0; }
.pitem__meta { font-size: 14px; color: var(--muted); display: flex; flex-wrap: wrap;
  gap: 4px 8px; align-items: center; }
.pitem__when { color: var(--ink); font-weight: 500; }
.pitem__title { font-weight: 700; line-height: 1.45; overflow-wrap: anywhere; }
.pitem__sub { font-size: 14px; color: var(--muted); }
.prow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.prow form { margin: 0; }
/* A closed course in the personal area (core/course.py, stage 3): a bar of
   its sessions, the next one, and the list with materials and products. */
.pcourse__bar { display: flex; gap: 4px; }
.pcourse__seg { flex: 1; height: 8px; border-radius: 4px; background: var(--border); }
.pcourse__seg--came { background: #2f7d5b; }
.pcourse__seg--unmarked { background: #e2b04f; }
.pcourse__seg--next { background: var(--brand); }
.pcourse__next { border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 6%, var(--card)); }
.pcourse__line { font-size: 14.5px; }
.plearn { margin-top: 10px; }
.plearn__text { font-size: 14.5px; margin: 0 0 8px; }
.pcourse__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.pcourse__item { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px;
  padding: 12px 0; border-bottom: 1px solid var(--border); }
.pcourse__item:last-child { border-bottom: 0; }
.pcourse__item p { margin: 0; }
.pcourse__mark { font-weight: 700; text-align: center; color: var(--muted); }
.pcourse__item--came .pcourse__mark { color: #2f7d5b; }
.pcourse__item--unmarked .pcourse__mark { color: #9a6a12; }
.pcourse__item--future .pcourse__body, .pcourse__item--none .pcourse__body { opacity: .65; }
.pcourse__body { display: grid; gap: 4px; min-width: 0; }
.pcourse__recap { font-size: 14.5px; line-height: 1.7; margin-top: 4px; }
.pcourse__recap summary { cursor: pointer; color: var(--brand-link); font-weight: 600; }
.pcourse__recap ul, .pcourse__recap ol { margin: 6px 0; padding-inline-start: 20px; }
.pcourse__recap li { overflow-wrap: anywhere; }
.pcourse__product { margin: 6px 0 0; }
.pcourse__product .prow { flex-wrap: nowrap; margin: 0; }
.pcourse__product .input { flex: 1; min-width: 0; }
/* One meeting, opened from the follow-up (core/followup_ab.py): the first
   thing on the page, its video and materials, the next workshops under it. */
.psession { padding: 16px; border-radius: 14px; border: 1px solid var(--border);
  background: var(--inset, var(--bg)); }
.psession .vsl { margin: 4px 0 0; }
h2.psession__title { font-size: 19px; line-height: 1.4; overflow-wrap: anywhere; }
.portal__then { margin: 26px 0 4px; }
/* "להעמיק" (core/offers.py): the paid workshops as items, premium in a box. */
.pprice { margin: 2px 0 0; font-size: 17px; }
.pprice s { color: var(--muted); font-weight: 400; }
.ppremium { padding: 16px; border-radius: 14px; border: 2px solid var(--brand);
  background: var(--inset, var(--bg)); display: grid; gap: 8px; }
.ppremium p { margin: 0; }
.ppremium__title { font-weight: 700; font-size: 17px; line-height: 1.45; }
.ppremium__lines { margin: 0; padding-inline-start: 20px; line-height: 1.6; }
.pjoined { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline;
  margin: 0; font-size: 15px; overflow-wrap: anywhere; }
.nowrap { white-space: nowrap; }
.datelist form { margin: 0; }

.fold { margin: 4px 0 20px; }
.fold summary { cursor: pointer; color: var(--brand-link); }
/* 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-link); }
/* A solid button keeps its own ink: brand-link on the brand is the ochre on ochre. */
.btn--primary.is-copied { color: var(--brand-ink); }
/* 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-link); }
.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; }
/* Every label-link-copy row, in the share box or not (the survey's): the
   field shrinks so the copy button stays beside it, not a line under it. */
.sharebox .input, .sharebox__row .input { flex: 1 1 240px; width: auto; min-width: 0; }
/* 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 אחרי tab's recording, summary and slides: label, link, open. */
/* One grid for all three rows, so a row with no link yet (and so no open
   button) keeps its field the same width as the rows that have one. */
.materials__links { display: grid; align-items: center; gap: 8px 10px;
  grid-template-columns: auto minmax(0, 1fr) auto; }
.materials__row { display: contents; }
.materials__label { grid-column: 1; font-size: 14px; color: var(--muted); }
.materials__row .input { grid-column: 2; min-width: 0; }
.materials__actions { grid-column: 3; display: flex; gap: 6px; }
.materials__check { grid-column: 2 / -1; margin: 0; font-size: 13px;
  color: var(--muted); }
/* A URL needs the width on a phone: the label goes above its field, and the
   two buttons under it — beside it they leave the address 100px. */
@media (max-width: 600px) {
  .materials__links { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
  .materials__label { grid-column: 1; margin-top: 6px; }
  .materials__row .input { grid-column: 1; }
  .materials__actions { grid-column: 1; flex-wrap: wrap; }
  .materials__check { grid-column: 1; }
}
.materials__auto { margin-top: 14px; }

/* "על מה הקליקו": one small table per email, under its name. */
.clicks__email { margin: 18px 0 6px; font-size: 15px; }
.clicks__email:first-of-type { margin-top: 4px; }
/* An address has no spaces to break at, and unbroken it widened its table
   to 572px at a 375px viewport. */
.clicks__link { overflow-wrap: anywhere; }
/* One width for the number columns, so the tables stacked under each other
   line up instead of each sizing to its own longest label. */
.table--clicks th:not(:first-child), .table--clicks td:not(:first-child) {
  width: 5.5em; }
/* A closed course's attendance report (core/course.py): one narrow column
   per session, a tap target per cell. */
.table--attend th.attend__col, .table--attend td.attend__cell {
  text-align: center; width: 3.2em; padding-inline: 4px; }
.attend__cell form { margin: 0; }
.attend__btn { min-width: 36px; min-height: 36px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--card); color: var(--muted);
  font: inherit; font-weight: 700; cursor: pointer; }
.attend__btn.is-on { background: #e6f3ec; border-color: #9fd0b5; color: #1d6b45; }
/* The שיווק tab (2026-10-01): the post, a row per place, the list editor. */
.post__text { width: 100%; resize: vertical; font: inherit; line-height: 1.6; }
/* The three WhatsApp versions (core/post_versions.py): side by side on a
   computer, one under the other on a phone. Each box keeps its buttons at
   its foot, so three texts of different lengths still line up. */
.versions { display: grid; gap: 12px; margin: 4px 0 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr)); }
.versions.is-waiting { opacity: .55; }
.version { display: flex; flex-direction: column; gap: 8px; min-width: 0;
  padding: 14px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--card); }
.version__style { margin: 0; font-size: 14px; font-weight: 600;
  color: var(--brand-link); }
.version__text { margin: 0; white-space: pre-line; line-height: 1.6;
  overflow-wrap: anywhere; }
.version__details { margin: auto 0 0; padding-top: 8px; white-space: pre-line;
  font-size: 13.5px; line-height: 1.5; color: var(--muted);
  border-top: 1px dashed var(--border); overflow-wrap: anywhere; }
.version__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.version__actions form { margin: 0; }
.versions__status { display: flex; align-items: center; gap: 10px;
  margin: 0 0 12px; color: var(--muted); }
.versions__pulse { flex: none; width: 10px; height: 10px; border-radius: 50%;
  background: var(--brand); animation: versions-pulse 1.2s ease-in-out infinite; }
@keyframes versions-pulse { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .versions__pulse { animation: none; } }
.versions__retry { display: inline; margin: 0 8px 0 0; }
.versions__foot { display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 8px 16px; }
.versions__foot .field__hint { margin: 0; flex: 1 1 22em; }
.versions__foot form { margin: 0; }
@media (max-width: 900px) {
  .versions { grid-template-columns: minmax(0, 1fr); }
}
.places__progress { margin: 0 0 8px; color: var(--muted); }
.places__progress b { color: var(--ink); }
.places { list-style: none; margin: 0 0 12px; padding: 0; }
/* The ✓, the name, the numbers on one line; the link and its buttons under
   them, the width of the row. */
.place { display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: 8px 12px; padding: 14px 0;
  border-top: 1px solid var(--border); }
.place__mark { grid-column: 1; margin: 0; }
.place__name { grid-column: 2; font-weight: 500; overflow-wrap: anywhere; }
.place__numbers { grid-column: 3; font-size: 13px; color: var(--muted);
  white-space: nowrap; }
.place__link { grid-column: 1 / -1; }
.place__tick { background: var(--card); color: var(--ink);
  border-color: var(--border); min-width: 8.5em; justify-content: center; }
.place__tick:hover { border-color: var(--muted); }
.place.is-posted .place__tick { background: #e6f4ea; color: var(--ok);
  border-color: #b7dfc2; }
/* The follow-up shared on WhatsApp too (core/wa_share.py): the places as
   boxes on one line, the rows below reuse .place. A row not chosen is
   `hidden`, and .place's display: grid would otherwise beat the UA's rule. */
.washare__checks { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.washare__list { margin-top: 12px; }
.washare [hidden], .washare .place[hidden] { display: none; }
.washare h2 .chip { vertical-align: middle; }
.badge--kind { font-size: 12.5px; font-weight: 400; padding: 1px 8px;
  margin-inline-start: 4px; background: #f1f3f4; color: var(--muted); }
/* A phone: the ✓ gets its own line, the name and the numbers share the next. */
@media (max-width: 600px) {
  .place { grid-template-columns: minmax(0, 1fr) auto; }
  .place__mark { grid-column: 1 / -1; }
  .place__name { grid-column: 1; }
  .place__numbers { grid-column: 2; }
}
/* The editor: name, link, remove. One grid for every row (display:
   contents), so the fields line up; on a phone each row is its own block. */
.placesedit { display: grid; gap: 8px 10px; align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) auto; margin: 12px 0; }
.placesedit__head { font-size: 13px; color: var(--muted); }
.placesedit__row { display: contents; }
.placesedit .input { width: 100%; min-width: 0; }
.placesedit__remove { margin: 0; white-space: nowrap; font-size: 14px; }
.placesedit__more { margin: 0 0 12px; }
@media (max-width: 600px) {
  .placesedit { display: block; }
  .placesedit__head { display: none; }
  .placesedit__row { display: grid; grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 10px; align-items: center; padding: 10px 0;
    border-top: 1px solid var(--border); }
  .placesedit__row input[name="label"] { grid-column: 1; grid-row: 1; }
  .placesedit__row > :last-child { grid-column: 2; grid-row: 1; }
  .placesedit__row input[name="url"] { grid-column: 1 / -1; grid-row: 2; }
}
.materials__message { margin-top: 16px; }
.materials__message textarea { width: 100%; resize: vertical; font: inherit;
  line-height: 1.6; }

/* The picture beside the message for a WhatsApp group (_share_picture.html). */
.sharepic { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start;
  margin-top: 16px; }
.sharepic__thumb { flex: 0 0 auto; display: block; }
.sharepic__thumb img { display: block; width: 120px; max-height: 150px;
  object-fit: contain; border-radius: 8px; }
.sharepic__body { flex: 1 1 240px; min-width: 0; }
.sharepic__body .field__label { margin: 0 0 8px; }
.sharepic__body .field__hint { margin: 8px 0 0; }

/* The follow-up's own page (2026-10-15): its materials and the message for
   the group, one card above the editor. Side by side on a computer, the
   links first until the follow-up has gone and the message first after;
   one under the other on a phone. The rows are the אחרי card's grid
   (.materials__links), with a ✓ or "חסר" beside each name. */
.fumat { margin-bottom: 20px; }
.fumat__cols { display: grid; gap: 22px 32px;
  grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
  .fumat__cols { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  /* The message first: the links keep the wider column (an address). */
  .fumat__cols--sent { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
}
/* A phone: each name with its ✓ and its open button on one line, the
   address under them at the full width. `dense` puts the button back beside
   the name it belongs to (the rows are `display: contents`). */
@media (max-width: 600px) {
  .fumat .materials__links { grid-template-columns: minmax(0, 1fr) auto;
    grid-auto-flow: row dense; }
  .fumat .materials__label { grid-column: 1; }
  .fumat .materials__row .input { grid-column: 1 / -1; }
  .fumat .materials__actions { grid-column: 2; }
  .fumat .materials__check { grid-column: 1 / -1; }
}
.fumat h2 { font-size: 17px; margin: 0 0 4px; }
.fumat .field__hint { margin: 0 0 12px; }
.fumat__label { white-space: nowrap; }
.fumat__label .chip { margin-inline-start: 4px; font-size: 12.5px; }
.fumat__msg textarea { width: 100%; resize: vertical; font: inherit;
  line-height: 1.6; margin-bottom: 6px; }
.fumat__msg .field__hint { margin: 0 0 10px; }
.fumat__foot { margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--border); }
.recapfill { display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px 12px; margin: 0 0 12px; }
.recapfill .field__hint { margin: 0; }

/* The waiting-list segment pickers: a row of selects that reload the page.
   🚨 Pinned to the top of the screen (2026-10-10, Omri: "make the waiting
   list filters stay visible too"); its sticky box is the whole page. The
   page's own grey behind it, so the list scrolls under a clean edge. The
   send bar below sticks under it (.invite__send reads --filters-h). */
.filters { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end;
  margin-bottom: 16px; position: sticky; top: 0; z-index: 16;
  padding: 8px 0 10px; background: var(--bg);
  box-shadow: 0 8px 10px -10px rgba(60, 64, 67, .45); }
.filters__field { display: flex; flex-direction: column; gap: 4px;
  flex: 1 1 220px; max-width: 420px; }
/* The select and the date box are one height, so the pinned row lines up. */
.filters .input { min-height: 48px; }
.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);
  /* Bounded since the filters are pinned (2026-10-10): every run of a
     busy installation, open at the top of the screen, covered the page. */
  max-height: 50vh; overflow-y: auto; }
.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); }
/* A survey that is open: green, "go". */
.badge--open { background: #e6f4ea; color: var(--ok); }
.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. */
/* Two buttons side by side: 385px at a 375px viewport until they could wrap. */
.invite__checks { margin: 12px 0; flex-wrap: wrap; white-space: normal; }
/* 🚨 The send bar stays on the screen (2026-10-10, Omri: "make the waiting
   list send button stay visible"). It sits between the invitation and the
   list, outside both cards, so its sticky box is the whole form: pinned to
   the bottom edge while the invitation is being written above it, to the top
   edge while the names under it are ticked. */
.invite__send { position: sticky; top: calc(var(--filters-h, 0px) + 8px); bottom: 8px; z-index: 15;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  margin: 16px 0; padding: 12px 16px; background: var(--card);
  border: 1px solid color-mix(in srgb, var(--brand) 45%, var(--border));
  border-radius: var(--radius); box-shadow: 0 4px 16px rgba(60, 64, 67, .18); }
/* The date-change notice (event page, #moved) borrows the bar's look and
   not its pin: a short form whose bar holds the preview, the test copy and
   the send together, in place under the editor. Pinned, it covered the
   editor on a phone with three stacked buttons. */
.moved__send { position: static; }
/* The template bar: the select takes the room, the buttons wrap under it on a
   phone rather than widening the document. */
.tplbar__row { flex-wrap: wrap; white-space: normal; }
.tplbar__row .input { flex: 1 1 220px; width: auto; min-width: 0; }
.tplbar__new { margin: 8px 0 4px; }
.tplbar__new summary { cursor: pointer; color: var(--brand-link); }
.tplbar__new .tplbar__row { margin-top: 8px; }
/* The invitation's button text and its A/B second text: side by side where
   there is room, one under the other on a phone (each field's basis). */
.abfields { display: flex; flex-wrap: wrap; gap: 0 16px; }
.abfields .field { flex: 1 1 240px; min-width: 0; margin-bottom: 8px; }
.abfields__hint { margin: 0 0 20px; }
.abtest { margin: 0 0 20px; padding: 14px 16px; background: var(--bg);
  border: 1px solid var(--border); border-radius: var(--radius); }
.abtest__title { margin: 0 0 8px; font-size: 16px; }
.abtest__verdict { margin: 10px 0 0; max-width: 72ch; }
.table--ab td:first-child { min-width: 12em; }
.invite__preview { height: 0; border: 0; }
/* The waiting page's cap (2026-10-16): one sentence with the choice inside
   it, its save beside it. The select is as wide as its words, and the
   sentence wraps around it on a phone rather than pushing past the edge. */
.capbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  margin-bottom: 16px; padding: 14px 16px; }
.capbar__row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
  flex: 1 1 320px; min-width: 0; }
.capbar__select { width: auto; max-width: 100%; }
.capbar__hint { flex: 1 1 100%; margin: 0; }
.invites-line { font-size: 13px; margin-top: 4px; }
.invite__preview.is-open { height: 560px; border: 1px solid var(--border); }
.badge--confirmation, .badge--waiting { background: #f3e8fd; color: #6b21a8; }
/* "רק ההקלטה" — not the waiting list, so not its colour. */
.badge--vod { background: #e6f4ea; color: #1e6b34; }
/* Not on the mailing list when they registered (core/newcomers.py): a hue
   no other badge on the row uses. 6.5:1. */
.badge--new { background: #e0f7f4; color: #0b6157; }
/* 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--recap li, .pcourse__recap li { overflow-wrap: anywhere; }
.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; }
/* A coupon code on a paid event's form (core/paid_coupons.py). */
.couponfield__row { display: flex; gap: 8px; align-items: stretch; }
.couponfield__row .input { flex: 1 1 auto; min-width: 0; text-transform: uppercase; }
.couponfield__note { margin: 6px 0 0; font-size: 14px; color: var(--ok, #1e7e34); min-height: 0; }
.couponfield__note:empty { display: none; }
.couponfield__note--err { color: var(--err, #b3261e); }
.couponline { margin: 0 0 12px; }
/* Premium members register first (core/early_booking.py): the line over
   the form until the event opens to everybody. On --inset, the card's own
   inner tone, never --bg (the theatre's is the dark curtain). */
.earlynote { margin: 0 0 16px; padding: 10px 14px; border: 1px solid var(--border);
  border-radius: 10px; background: var(--inset, #f6f7f9); line-height: 1.6;
  font-size: 15px; color: var(--ink); }
/* A code for every paid event: this event's own Morning link, in its row. */
.couponlink { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.couponlink .input { flex: 1 1 180px; min-width: 0; }
/* The line above a button that says what it leads to — the permanent group's
   promise, "bring a friend". Ink, never the brand colour (test_brand_link). */
.pitch { text-align: center; margin: 24px 0 0; line-height: 1.6; }
.pitch + p > .btn--block { margin-top: 10px; }
/* "יש לכם אזור אישי" on the thank-you page (core/portal.py): a box inside
   the card, so it is seen and not read past. `--inset`, never `--bg`: a dark
   page_bg would put dark text on dark (the parking box, 2026-10-12). */
.portalnote { margin: 24px 0 0; padding: 16px 18px; border-radius: 12px;
  background: var(--inset, var(--bg)); border: 1px solid var(--border);
  text-align: center; line-height: 1.6; }
.portalnote p { margin: 0 0 6px; }
.portalnote p:last-child { margin: 12px 0 0; }

/* "איך הגעתם אלינו?" on the thank-you screen (core/heard.py): the answers
   as tap chips that wrap, on the card's inset like the portal note. */
.heard { margin: 24px 0 0; padding: 16px 18px; border-radius: 12px;
  background: var(--inset, var(--bg)); border: 1px solid var(--border); }
.heard__q { margin: 0 0 12px; text-align: center; }
.heard__opts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  margin: 0 0 12px; }
.heard__opt { display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--card); line-height: 1.3; }
.heard__opt input { margin: 0; accent-color: var(--brand); }
.heard__opt:has(input:checked) { border-color: var(--brand);
  box-shadow: 0 0 0 2px var(--brand) inset; }
.heard__detail { width: 100%; margin: 0 0 12px; }
.heard__thanks { margin: 0; text-align: center; }
.heard__error { margin: 0 0 12px; text-align: center; color: var(--err); }
/* "רוצים לקבל את התזכורות גם בוואטסאפ?" (core/wa_optin.py): the same card,
   a number field and the consent box under the question. */
.wacard__line { margin: -4px 0 12px; text-align: center; }
.wacard__phone { width: 100%; margin: 0; text-align: center; }
.wacard__consent { align-items: flex-start; margin: 12px 0; }
.wacard__consent input { margin-top: 3px; }

/* The admin's look at a registrant's area (web/portal.admin_preview): an
   amber note on top, and the page in a disabled fieldset that must look like
   no fieldset at all. */
.ppreview { margin: 0 0 22px; padding: 14px 16px; border-radius: 12px;
  background: #fff4d6; color: #3b2f00; border: 1px solid #f0c75e; line-height: 1.55; }
.ppreview p { margin: 0 0 6px; }
.ppreview .muted { color: #5c4a00; }
.ppreview__title { overflow-wrap: anywhere; }
.ppreview__pick { margin: 8px 0 0; }
.ppreview__pick .field { margin: 0; }
.ppreview__page { border: 0; padding: 0; margin: 0; min-width: 0; }
.ppreview__page button:disabled { opacity: .55; cursor: not-allowed; }

/* A guest appearance's materials page (core/guest.py): the "keep me
   updated" form, set apart under the materials by a rule, not a box. */
.guestjoin { margin: 28px 0 0; padding: 20px 0 0; border-top: 1px solid var(--border); }
.guestjoin h2 { font-size: 19px; margin: 0 0 12px; }

/* The check of a pasted list (the people tab of a guest appearance): what
   would be added, before anything is. */
.importcheck { margin: 12px 0; padding: 12px 16px; border-radius: var(--radius);
  background: #f1f3f4; }
.importcheck p { margin: 4px 0; }
.importcheck__list { margin: 4px 0 8px; padding-inline-start: 20px;
  max-height: 220px; overflow-y: auto; overflow-wrap: anywhere; }
.importcheck__list--bad { color: var(--muted); }

/* 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; }
/* The price is text, so --brand-link: the ochre was 1.6:1 here. */
.offer__price b { font-size: 28px; color: var(--brand-link); }
.offer__anchor { color: var(--muted); font-size: 16px; }
/* The early price's end and the honest comparison line, under the price. */
.offer__early { margin: -4px 0 8px; font-size: 15px; color: var(--ink); }
.offer__note { margin: 0 0 12px; font-size: 15px; color: var(--muted); }
.offer__guarantee { margin: 16px 0; padding: 14px 18px; border-radius: 10px;
  background: var(--inset, 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; }
/* A show's shop (2026-10-11): a friend's code said above the kinds, the
   pair's price per person under its price, the cancellation policy
   folded under the button, the share box on the thank-you page. */
.shop__friend { margin: 0 0 14px; padding: 10px 14px; border-radius: 10px;
  background: color-mix(in srgb, var(--brand) 7%, #fffdf8); color: var(--brand-link);
  border-inline-start: 3px solid var(--brand); font-size: 15px; }
.shop__each { display: block; font-size: 13px; color: var(--muted); }
/* The offer of the moment above everything (2026-10-26): a code from the
   link, drawn as a printed ticket in the site's own ink (--brand) — the
   offer on the ticket, the code on a stub torn along a dotted line, a
   notch cut out of each side where the two meet. */
.offerbar { --stub: 122px; --paper: color-mix(in srgb, var(--brand) 5%, #fffaf0);
  display: flex; margin: 0 0 18px; color: var(--brand-link); text-decoration: none;
  background: var(--paper); border-radius: 10px;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--brand) 70%, transparent),
              inset 0 0 0 5px var(--paper),
              inset 0 0 0 6px color-mix(in srgb, var(--brand) 30%, transparent),
              0 10px 24px rgba(40, 8, 16, .18);
  -webkit-mask: radial-gradient(circle 11px at var(--stub) 0, transparent 98%, #000) top / 100% 51% no-repeat,
                radial-gradient(circle 11px at var(--stub) 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle 11px at var(--stub) 0, transparent 98%, #000) top / 100% 51% no-repeat,
                radial-gradient(circle 11px at var(--stub) 100%, transparent 98%, #000) bottom / 100% 51% no-repeat; }
.offerbar:hover { color: var(--brand-link); }
.offerbar:hover .offerbar__go { background: var(--brand); color: var(--brand-ink); }
.offerbar__main { flex: 1; min-width: 0; padding: 18px 16px 16px; text-align: center; }
.offerbar__eyebrow { display: block; font-size: 12px; font-weight: 700;
  letter-spacing: 1.5px; opacity: .75; }
.offerbar__big { display: block; margin: 4px 0 6px; font-size: 27px; font-weight: 800;
  line-height: 1.15; }
.offerbar__line { display: block; font-size: 15px; color: var(--ink); opacity: .85; }
.offerbar__go { display: inline-block; margin-top: 12px; padding: 7px 18px;
  border: 1.5px solid var(--brand); border-radius: var(--btn-radius, 8px);
  font-weight: 700; font-size: 15px; transition: background .15s, color .15s; }
/* The stub: on the left in Hebrew (the end of the line), the dotted tear. */
.offerbar__stub { flex: 0 0 var(--stub); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px; padding: 14px 6px;
  border-inline-start: 2px dashed color-mix(in srgb, var(--brand) 45%, transparent);
  text-align: center; }
.offerbar__label { font-size: 12px; font-weight: 700; letter-spacing: 1.5px; opacity: .75; }
.offerbar__code { font-size: 13px; letter-spacing: .3px; overflow-wrap: anywhere;
  max-width: calc(var(--stub) - 14px);
  padding: 3px 6px; border: 1.5px solid currentColor; border-radius: 4px;
  transform: rotate(-4deg); }
.offerbar__ok { font-size: 11px; line-height: 1.3; color: var(--ink); opacity: .7; }
@media (max-width: 480px) {
  .offerbar { --stub: 112px; }
  .offerbar__big { font-size: 23px; }
  .offerbar__main { padding: 16px 12px 14px; }
}
/* What to type on Morning's page for an order on the hand-made link
   (core/pay_link.py): before the button, the amount big. */
.paynext { background: var(--inset); border: 2px solid var(--brand); border-radius: 14px;
  padding: 16px 18px; margin: 16px 0; }
.paynext__title { font-weight: 700; margin: 0 0 12px; }
.paynext__step { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 12px; }
.paynext__step:last-child { margin-bottom: 0; }
.paynext__n { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--brand);
  color: var(--brand-ink); display: grid; place-items: center; font-weight: 700; font-size: 15px; }
.paynext__amount { display: block; width: fit-content; margin: 6px 0; padding: 4px 18px;
  font-size: 34px; line-height: 1.2; letter-spacing: .02em; background: var(--card, #fff);
  border: 2px dashed var(--brand); border-radius: 10px; }
.paynext__note { display: block; font-size: 14px; color: var(--muted); }
/* The order number for Morning's „הערה” box, as hard to miss as the amount
   (2026-11-08: a buyer paid without it). */
.paynext__code { font-size: 28px; }
.shop__policy { margin: 12px 0 0; font-size: 14px; color: var(--muted); }
.shop__policy summary { cursor: pointer; }
.shop__policy p { margin: 6px 0 0; }
.friendbox { margin: 24px 0 0; padding: 16px 18px; border-radius: 12px;
  background: var(--inset, var(--bg)); border: 1px solid var(--border); }
.friendbox p:last-child { margin-bottom: 0; }
.friendbox__link { overflow-wrap: anywhere; font-size: 14px; }
/* The community's box on the order page (2026-10-15): the ticket email's
   green box, on the page the buyer is looking at. */
.groupbox { margin: 24px 0 0; padding: 18px 18px 2px; border-radius: 16px;
  background: #e8f4f2; border: 1px solid #cfe6e1; color: #202124; }
.groupbox .pitch { margin-top: 0; }
/* The details page, /i/<number> (2026-10-26): when and where in one box,
   on --inset (a box inside the card, never --bg). */
.infobox { margin: 8px 0 16px; padding: 14px 18px; border-radius: 14px;
  background: var(--inset); font-size: 18px; }
.infobox p { margin: 4px 0; }
.infodesc { white-space: pre-line; }
.infoshare { text-align: center; }
/* The updates form folded under the group's box on a materials page
   (2026-10-18): a quiet line until it is opened. */
.mailalt { margin: 12px 0 0; text-align: center; }
.mailalt summary { display: inline-block; cursor: pointer; font-size: 15px;
  color: var(--brand-link); text-decoration: underline; text-underline-offset: 3px; }
.mailalt summary::-webkit-details-marker { display: none; }
.mailalt[open] { text-align: start; }
.mailalt[open] summary { display: block; margin-bottom: 12px; text-align: center; }
.mailalt--done, .mailalt--done[open] { text-align: center; }
.mailalt--done summary { color: inherit; font-weight: 700; text-decoration: none; cursor: default; }
/* A workshop's materials page (2026-10-16, core/materials_page.py): the
   next date, then other workshops as a quiet list of links. */
.mnext, .mothers { margin: 28px 0 0; padding: 20px 0 0; border-top: 1px solid var(--border); }
.mnext h2, .mothers h2 { font-size: 19px; margin: 0 0 10px; }
.mothers__list { list-style: none; margin: 0; padding: 0; }
.mothers__list li + li { margin-top: 8px; }
.mothers__list a { display: block; padding: 12px 14px; border-radius: 12px;
  background: var(--inset); color: inherit; text-decoration: none; }
.mothers__list a b { display: block; color: var(--brand-link); }
.mothers__list a .muted { font-size: 14px; }
/* The page's link on the אחרי tab's materials card. */
.materials__page { margin: 18px 0 4px; padding: 14px 16px; border-radius: 12px;
  background: var(--bg); }
.materials__page .field__label { margin: 0 0 4px; }
.materials__pageurl { font-size: 15px; overflow-wrap: anywhere; }
.materials__page .materials__actions { display: flex; flex-wrap: wrap;
  align-items: center; gap: 8px; }
/* The timer and the photos (2026-10-11). The track scrolls inside its
   own box, never the page. */
/* A show's hero (2026-10-11): the outcome big, the line under it, when
   and where in one quiet line, one button. */
.hero { text-align: center; margin: 4px 0 28px; }
.hero__title { font-size: clamp(30px, 8vw, 46px); line-height: 1.15;
  font-weight: 800; margin: 8px 0 12px; text-wrap: balance; }
.hero__sub { font-size: clamp(18px, 4.6vw, 22px); line-height: 1.45;
  margin: 0 auto 14px; max-width: 34ch; text-wrap: balance; }
.hero__when { margin: 0 0 18px; font-size: 18px; line-height: 1.5; color: var(--ink); }
.hero__when p { margin: 0; }
.hero__when p + p { margin-top: 4px; }

.hero__note { margin: 0 0 12px; }
.hero__go { font-size: 18px; padding-top: 14px; padding-bottom: 14px; }
.hero__early { margin: 12px 0 0; font-size: 15px; }
.hero__meta { margin: 10px 0 0; font-size: 15.5px; }
/* The line under the buy button that answers a newcomer's fear (2026-10-14). */
.hero__assure { margin: 12px auto 0; max-width: 34ch; font-size: 16px;
  line-height: 1.45; color: var(--ink); text-wrap: balance; }
.hero__assure + .hero__meta { margin-top: 6px; }
/* A button's second, smaller line: the price (2026-10-11). */
.btn__sub { display: block; margin-top: 2px; font-size: 14px; font-weight: 400;
  opacity: .92; }
.hero__meta a, .shop__rating a { color: inherit; text-decoration: none; }
.hero__sep { margin: 0 4px; color: var(--muted); }
.shop__rating { text-align: center; margin: 4px 0 10px; font-size: 15px; }
/* The FAQ folded: one line per question (2026-10-11). */
.faq__item { border-bottom: 1px solid var(--border); }
.faq__item > summary { cursor: pointer; list-style: none; padding: 12px 0;
  font-weight: 600; display: flex; justify-content: space-between; gap: 12px; }
.faq__item > summary::-webkit-details-marker { display: none; }
.faq__item > summary::after { content: "+"; color: var(--brand-link);
  font-weight: 700; flex: none; }
.faq__item[open] > summary::after { content: "−"; }
.faq__a { padding: 0 0 12px; }
.faq__a p { margin: 0; }
.hero__stars { color: #d9a400; letter-spacing: 1px; }
.cta-again { margin: 22px 0; }
.shop__title { text-align: center; font-size: 22px; margin: 0 0 14px; }
.shop__car { margin: 0 0 14px; }
.shop__car .shop__parking { margin: 6px 0 0; }
.timer__label { text-align: center; margin: 0 0 6px; font-size: 14px; color: var(--muted); }
/* The next show: one quiet line at the foot of the shop (2026-10-11). */
.nextshow { margin: 26px 0 0; font-size: 14.5px; }
.nextshow > summary { cursor: pointer; color: var(--muted); text-align: center;
  text-decoration: underline; text-underline-offset: 3px; list-style: none; }
.nextshow > summary::-webkit-details-marker { display: none; }
.nextshow[open] > summary { margin-bottom: 12px; }
.vsl__play { position: absolute; inset: 0; display: block; }
.vsl__play img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vsl__icon { position: absolute; top: 50%; left: 50%; width: 68px; height: 48px;
  margin: -24px 0 0 -34px; border-radius: 14px; background: #ff0000; }
.vsl__icon::after { content: ""; position: absolute; top: 14px; left: 27px;
  border-style: solid; border-width: 10px 0 10px 17px;
  border-color: transparent transparent transparent #fff; }
.hero__early b { color: var(--warn); }
.hero .timer { margin: 14px 0 0; }
.timer { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px; margin: 4px 0 14px; direction: ltr; }
/* Like a clock: days on the left, seconds on the right (Omri, 2026-10-11). */
.timer__cell { text-align: center; padding: 8px 4px; border-radius: 10px;
  background: var(--card); border: 1px solid var(--border); }
.timer__cell b { display: block; font-size: 26px; line-height: 1.1;
  color: var(--brand-link); font-variant-numeric: tabular-nums; }
.timer__cell span { font-size: 12.5px; color: var(--muted); }
.facts__early b { color: var(--warn); }
.gallery { margin: 22px 0; }
/* A returning buyer's thank-you (core/returning.py). */
.returning { margin: 20px 0; padding: 16px; border-radius: 14px;
  background: var(--card); border: 1px solid var(--border); text-align: center; }
.returning__line { font-weight: 700; font-size: 18px; margin: 0 0 12px; }
.returning .vsl { margin: 0; }
/* The slider (2026-10-14): photos and videos, every slide 16:9, so a
   video's picture and a photo are one height. On a phone the next slide
   peeks in at the edge (the "there is more" cue); from 600px one slide
   fills the width. Arrows and dots for everybody (Omri, the same day: "a
   slider you move through with a click"), revealed by register.js; a
   finger can still swipe. Without the script, it swipes and scrolls. */
.gallery__stage { position: relative; }
.gallery__track { display: flex; gap: 10px; overflow-x: auto;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  padding-bottom: 6px; scrollbar-width: none; }
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__item { flex: 0 0 88%; max-width: 88%; aspect-ratio: 16 / 9;
  height: auto; border-radius: 12px; scroll-snap-align: center;
  overflow: hidden; }
.gallery__img { object-fit: cover; display: block; }
.gallery__video { position: relative; background: #111; }
.gallery__video iframe { position: absolute; inset: 0; width: 100%;
  height: 100%; border: 0; }
/* A neutral play mark: YouTube's red would be a lie on a Wistia video. */
.gallery__video .vsl__icon { width: 64px; height: 64px; margin: -32px 0 0 -32px;
  border-radius: 50%; background: rgba(0, 0, 0, .55);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .9); }
.gallery__video .vsl__icon::after { top: 20px; left: 25px;
  border-width: 12px 0 12px 20px; }
.gallery__track:has(.gallery__item:only-child) .gallery__item { flex-basis: 100%; max-width: 100%; }
@media (min-width: 600px) {
  .gallery__item { flex-basis: 100%; max-width: 100%; }
}
.gallery__arrow { position: absolute; top: calc(50% - 25px);
  width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .92); color: #202124; padding: 0;
  display: grid; place-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .3); z-index: 2; }
.gallery__arrow svg { width: 22px; height: 22px; fill: none;
  stroke: currentColor; stroke-width: 2.6; stroke-linecap: round;
  stroke-linejoin: round; }
.gallery__arrow:disabled { opacity: 0; pointer-events: none; }
.gallery__arrow--prev { right: 8px; }
.gallery__arrow--next { left: 8px; }
.gallery__dots { display: flex; justify-content: center; flex-wrap: wrap;
  gap: 2px; margin: 4px 0 0; }
.gallery__dot { width: 24px; height: 24px; padding: 0; border: 0;
  background: none; cursor: pointer; display: grid; place-items: center; }
.gallery__dot::before { content: ""; width: 8px; height: 8px;
  border-radius: 50%; background: var(--muted); opacity: .45; }
.gallery__dot[aria-current="true"]::before { background: var(--brand-link);
  opacity: 1; }
.gallery__hint { margin: 4px 0 0; font-size: 13px; text-align: center; }
/* With the arrows and dots there, the swipe hint says nothing new. */
.gallery[data-ready] .gallery__hint { display: none; }
@media (max-width: 600px) {
  .gallery__arrow { width: 36px; height: 36px; top: calc(50% - 21px); }
  .gallery__arrow svg { width: 18px; height: 18px; }
}
.gallery-admin { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px; margin: 10px 0; }
.gallery-admin__item { display: grid; gap: 4px; font-size: 13px; }
.gallery-admin__item img { width: 100%; height: 80px; object-fit: cover; border-radius: 8px; }
.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; }

.linkish { background: none; border: 0; padding: 0; font: inherit;
  color: var(--brand-link); 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-link); border-color: transparent; }
.chip--warn { background: var(--warn-bg); color: var(--warn); border-color: #f0dfae; }
.chip--open { background: #e6f4ea; color: var(--ok); border-color: transparent; }
.chip--err { background: #fce8e6; color: var(--err); border-color: #f3b8b5; }
/* "📍 פרונטלי" (core/events.in_person, 2026-10-15): an event in a room, in a
   hue no other chip uses (amber waits, red is missing, green is open), so
   it is told from the online ones at a glance. 8.6:1. */
.chip--place { background: #f3e8fd; color: #6a1b9a; border-color: #e1c6f7; }
/* A paid event (core/events.paid_mark, 2026-10-18, Omri: "really a
   different colour from the other workshops"): the one SOLID chip, money
   green with white (6.6:1), and its whole row tinted the same green, with a
   stripe at the row's start. No other row is tinted, so the colour means
   one thing. Plain hex, like the place chip: no theme moves it. */
.chip--paid { background: #0b6b32; color: #fff; border-color: #0b6b32;
  font-weight: 600; }
.table--events tr.row--paid > td { background: #e9f5ec; }
/* The stripe sits on the first cell a computer shows (the date tile is a
   phone's). The page is right to left, so the start edge is the right. */
@media (min-width: 601px) {
  .table--events tr.row--paid > .cell-name { box-shadow: inset -5px 0 0 #0b6b32; }
}
/* On a phone the row is a card: the card itself is green, and so is its
   date tile, in the chip's solid green. */
@media (max-width: 600px) {
  .table--events tr.row--paid { background: #e9f5ec; border-color: #b7dfc3; }
  .table--events tr.row--paid .cell-date { background: #0b6b32; border-color: #0b6b32; }
  .table--events tr.row--paid .cell-date span { color: #fff; }
}
.workshop--paid { background: #e9f5ec; border-inline-start: 5px solid #0b6b32;
  border-radius: 10px; padding: 12px 14px; margin: 6px 0; border-top: 0; }
.workshop--paid + .workshop { border-top: 0; }
/* An event's running number, "#019" (2026-10-16): the one to say it by.
   Its digits line up from row to row. */
.chip--id { background: #fcebd7; border-color: #fcebd7; color: #a14a06;
  font-weight: 700; font-variant-numeric: tabular-nums; }
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-link); 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; }
/* The settings' templates card: "שינוי שם" folds open to a name box and a
   save button ON ONE LINE, and the row wraps so the open box takes a line of
   its own rather than pushing its button out over "מחיקה". */
.cell-actions .actionrow:has(.rename) { flex-wrap: wrap; justify-content: flex-end; }
.rename > summary { list-style: none; }
.rename > summary::-webkit-details-marker { display: none; }
.rename[open] { flex-basis: 100%; order: 2; }
.rename__row { display: flex; gap: 6px; margin-top: 6px; }
.rename__row .input { flex: 1 1 160px; min-width: 0; width: auto; padding: 6px 10px; }

.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; }
/* 🚨 The email editor's save stays on the screen (2026-10-10, Omri), and
   the question editor's the same way (its save and the answers link). The
   form's last child, sticky to the bottom: the whole form is its sticky
   box, so it rides the bottom edge while the email is written. Stretched to
   the card's edges by the card's own padding. Only the button: the "save as
   a template" choice stays in its place above it. */
.composer__savebar { position: sticky; bottom: 0; z-index: 5; display: flex;
  align-items: center; gap: 12px; margin: 8px -24px -24px; padding: 12px 24px;
  background: color-mix(in srgb, var(--card) 92%, transparent);
  backdrop-filter: blur(6px); border-top: 1px solid var(--border);
  border-radius: 0 0 var(--radius) var(--radius); }
.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; }
/* The suggestion from the description (core/copy_suggest.py), above the
   editor: what to write about THIS event, beside a generic default. */
.suggest { margin-bottom: 20px; padding: 16px 20px; }
.suggest h2 { font-size: 15px; margin-bottom: 8px; }
.suggest__label { margin: 8px 0 2px; font-size: 13px; color: var(--muted); }
.suggest__subject { margin: 0; font-weight: 600; }
.suggest__opening { margin: 0; line-height: 1.6; }
.suggest__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
/* The check when an email is saved (core/proofread.py). */
.proof { margin-top: 16px; margin-bottom: 8px; }
.proof__list { list-style: none; margin: 0; padding: 0; }
.proof__item { padding: 10px 0; border-top: 1px solid var(--border); }
.proof__item:first-child { border-top: 0; }
.proof__item del { color: var(--err, #b3261e); }
.proof__item ins { color: var(--ok, #0b6b32); font-weight: 600; text-decoration: none; }
.proof__item .btn { margin-top: 6px; }
.proof__item.is-done del { opacity: .6; }
/* The add-ons card's preview: the buttons as the email draws them, on white. */
.addons__preview { margin-top: 4px; padding: 12px; background: #ffffff;
  border: 1px solid var(--border); border-radius: var(--radius); overflow-wrap: anywhere; }
.addons__preview p { margin: 6px 0; }
.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; }
/* "אחר" with a box to write in (_question_fields.html). The row is the
   option's own look (.check, or .optcard on the survey), holding the
   label of the radio and the box beside it. 🚨 The box undoes the option
   input rules (`.check input`, `.optcard input` size a radio to 18-22px),
   or it renders as an 18px square. `min-width: 0` lets it shrink at 375px
   instead of widening the page. */
.qother__pick { display: flex; align-items: center; gap: 8px; flex: none;
  cursor: pointer; }
.qother__pick input { margin: 0; }
.qother .qother__text { flex: 1 1 auto; width: auto; height: auto; min-width: 0;
  margin: 0; padding: 7px 10px; }
.optcard--tap.qother { gap: 10px; }
/* Typing in the box: the box draws its own focus ring, so the card does
   not draw a second one around it. */
.optcard.qother:has(.qother__text:focus-visible) { outline: none; }
.optcard--tap .qother__pick { gap: 12px; }
.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); }

/* The survey during the meeting, on a phone (live.html, `cards=True` in
   _question_fields.html). Only there: the sign-up step, the feedback form and
   an answer from an email keep the plain look above. Choices are big tap
   cards (the sign-up form's .optcard), 0 to 10 is a grid of even tiles in
   two rows that fits 375px, the stars are five even boxes. */
.livecard h1 { text-wrap: balance; }
.livecard__anon { display: flex; align-items: center; gap: 8px; margin: -4px 0 18px;
  color: var(--muted); font-size: 14px; }
.livecard__lock { width: 16px; height: 16px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.livecard__send { font-size: 18px; padding: 14px 20px; border-radius: 12px; }
/* "סקר קצר" above the event's name: the page is a survey, said before the
   title (which is the workshop's, and reads like the sign-up page's). */
.livecard__kicker { margin: 0 0 4px; font-size: 14px; font-weight: 600;
  color: var(--brand-link); }
/* Who they are, in a box of its own above the questions (2026-10-16): the
   two fields, the reason the address is asked, and the "send me updates"
   box as a tap card. On --inset, never --bg: a box INSIDE the card. */
.livecard__who { margin: 0 0 30px; padding: 16px 16px 6px; border-radius: 14px;
  background: var(--inset); border: 1px solid var(--border); }
.livecard__whoh { margin: 0 0 4px; font-size: 17px; font-weight: 600; }
.livecard__why { margin: 0 0 14px; font-size: 14.5px; color: var(--muted); }
.livecard__who .field { margin-bottom: 14px; }
.livecard__who .input { background: var(--card); }
.livecard__updates { margin: 0 0 10px; background: var(--card); }
@media (min-width: 600px) {
  .livecard__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
}
.livecard__mailed { margin: 0 0 8px; font-size: 17px; }
/* "At the end there is one more short question, on the same code" (core/survey_now.py). */
.livecard__more { margin: 0 0 16px; padding: 10px 14px; border-radius: 12px;
  background: var(--inset); font-size: 16px; }
/* A giveaway's prize (core/giveaway.py): what is won, its rounds, when. */
.givebox { margin: 0 0 26px; padding: 14px 16px 4px; border-radius: 14px;
  background: var(--inset); border: 1px solid var(--border); }
.givebox p { margin: 0 0 10px; }
.givebox ul { margin: 0 0 10px; padding-inline-start: 20px; }
/* The giveaway's headline: the prize, big (Omri, 2026-10-25: "בגדול, בענק"). */
.givehero { margin: 4px 0 24px; text-align: center; }
.givehero .livecard__kicker { text-align: center; }
.livecard h1.givehead { margin: 0 auto 12px; font-size: clamp(30px, 8.4vw, 44px);
  line-height: 1.15; text-wrap: balance; }
.givelead { margin: 0 auto; max-width: 32ch; font-size: 18px; font-weight: 700;
  line-height: 1.5; text-wrap: balance; }
/* The steps: a numbered card each, the clearest way in. */
.givesteps { margin: 0 0 14px; padding: 18px 16px 6px; border-radius: 16px;
  background: var(--inset); border: 1px solid var(--border); }
.givesteps__title { margin: 0 0 14px; font-size: 18px; text-align: center; }
.givesteps ol { margin: 0; padding: 0; list-style: none; }
.givesteps li { display: flex; align-items: flex-start; gap: 12px;
  margin: 0 0 14px; font-size: 16.5px; line-height: 1.5; }
.givesteps__n { flex: none; display: grid; place-items: center; width: 30px;
  height: 30px; border-radius: 50%; background: var(--brand);
  color: var(--brand-ink); font-weight: 700; font-size: 15px; }
/* Outranks `.livecard .qfield--cards legend::before`, which comes later. */
.livecard .givefields .qfield--cards legend::before { display: none; }
.givenote { margin: 0 0 26px; text-align: center; color: var(--muted);
  font-size: 15px; text-wrap: balance; }
/* Each question carries its number, so a phone a long way down the page
   still says where it is. CSS only: the markup is the shared macro's. */
.livecard form { counter-reset: q; }
.qfield--cards { border: 0; padding: 0; margin: 0 0 26px; min-width: 0;
  counter-increment: q; }
.qfield--cards legend { padding: 0; margin-bottom: 10px; font-size: 17px;
  font-weight: 600; line-height: 1.4; }
.livecard .qfield--cards legend::before { content: counter(q);
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; margin-inline-end: 8px; border-radius: 50%;
  vertical-align: 1px; font-size: 14px; font-weight: 700;
  background: color-mix(in srgb, var(--brand) 22%, var(--card)); color: var(--ink); }
.qfield__hint { margin: -4px 0 10px; font-size: 14px; color: var(--muted); }
.optcard--tap { align-items: center; min-height: 52px; margin: 0 0 8px; padding: 11px 14px; }
.optcard--tap:has(input:checked) { padding: 10px 13px; }
.optcard--tap input { width: 22px; height: 22px; margin: 0; }
.optcard--tap .optcard__title { font-size: 16.5px; overflow-wrap: anywhere; }
.scale--grid, .scale--stars { display: grid; gap: 8px; }
.scale--grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.scale--stars { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.scale--grid .scale__opt, .scale--stars .scale__opt { position: relative;
  justify-content: center; min-width: 0; padding: 0; border-radius: 12px;
  background: var(--card); }
.scale--grid .scale__opt { grid-column: span 2; height: 52px; font-size: 19px; font-weight: 600; }
/* 0 to 5 on the first row, 6 to 10 centred under it. */
.scale--grid .scale__opt:nth-child(7) { grid-column: 2 / span 2; }
.scale--stars .scale__opt { height: 62px; gap: 1px; }
/* The radio covers its tile, transparent: the tile is what is drawn and
   tapped, and the radio is still there for the keyboard and a reader. */
.scale--grid .scale__opt input, .scale--stars .scale__opt input { position: absolute;
  inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.scale--grid .scale__opt:has(input:focus-visible),
.scale--stars .scale__opt:has(input:focus-visible) { outline: 2px solid var(--brand-link); outline-offset: 2px; }
.scale--grid .scale__opt:has(input:checked) { background: var(--brand);
  border-color: var(--brand); color: var(--brand-ink); }
/* 3:1 at least, lit or not: a star is a control, not a decoration. */
.scale__star { font-size: 26px; line-height: 1; color: #80868b; }
.scale--stars small { font-size: 12.5px; color: var(--muted); }
/* A star lights up with every star before it. */
.scale--stars .scale__opt:has(input:checked),
.scale--stars .scale__opt:has(~ .scale__opt input:checked) { border-color: #e8b440;
  background: color-mix(in srgb, #fbbc04 12%, var(--card)); }
.scale--stars .scale__opt:has(input:checked) .scale__star,
.scale--stars .scale__opt:has(~ .scale__opt input:checked) .scale__star { color: #b07d00; }

.qlist { margin: 12px 0; }
.qrow { border: 1px solid var(--border); border-radius: 8px; padding: 12px;
  margin-bottom: 12px; background: var(--card); }
/* The question and its options are boxes that grow with what is typed
   (questions.js sizes them), never one line that cuts a long sentence off
   (2026-10-02, Omri: "the text is cut, I can't see it"). The question takes
   the whole width; the type sits under it. */
.qrow__head { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.qrow__label, .qrow__options { resize: none; overflow: hidden; line-height: 1.45;
  min-height: 0; }
.qrow__label { font-weight: 500; }

/* The survey editor's texts (2026-10-28): boxes as tall as their text
   (questions.js sizes every `[data-grow]`), a title in a slightly larger
   weight, and the "after the answers" step as a framed section of its own. */
.input--grow { resize: none; overflow: hidden; line-height: 1.5; min-height: 0; }
.input--title { font-size: 16px; font-weight: 500; }
.fold--box { border: 1px solid var(--border); border-radius: 12px;
  background: var(--bg); margin: 8px 0 24px; }
.fold--box > summary { list-style: none; display: flex; flex-direction: column;
  gap: 2px; padding: 14px 18px; color: var(--ink); }
.fold--box > summary::-webkit-details-marker { display: none; }
.foldbox__title { font-weight: 600; color: var(--brand-link); }
.foldbox__title::before { content: "▸"; display: inline-block; margin-inline-end: 8px;
  transition: transform .15s; }
[dir="rtl"] .foldbox__title::before { content: "◂"; }
.fold--box[open] .foldbox__title::before { transform: rotate(90deg); }
[dir="rtl"] .fold--box[open] .foldbox__title::before { transform: rotate(-90deg); }
.foldbox__sub { color: var(--muted); font-size: 13px; }
.foldbox__body { border-top: 1px solid var(--border); padding: 18px 18px 2px;
  background: var(--card); border-radius: 0 0 12px 12px; }
@media (max-width: 600px) {
  .fold--box > summary { padding: 12px 14px; }
  .foldbox__body { padding: 14px 14px 2px; }
}
.qrow__type { width: auto; min-width: 150px; max-width: 100%; }
.qrow__opts { margin-top: 10px; }
.qrow__opts .field__hint { display: block; margin-top: 4px; }
.qrow__opts .check { margin: 8px 0 0; }
.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; }
/* What was written in "אחר", under the bars (core/questions.py). */
.sv__others { margin: 8px 0 0; max-width: 72ch; }
.sv__others summary { cursor: pointer; font-size: 14px; color: var(--muted); }
.sv__others .sv__quotes { margin-top: 6px; overflow-wrap: anywhere; }
/* 🚨 The answers page's bar stays on the screen (2026-10-10, Omri): a jump
   to any question and the page's two buttons, sticky to the top of the page
   on its grey. The person search sticks inside its own card, under the bar
   (--answersbar-h, measured in answers.html), and a jump lands below the
   bar rather than behind it (scroll-margin-top). */
.answersbar { position: sticky; top: 0; z-index: 16; display: flex; flex-wrap: wrap;
  align-items: center; gap: 8px; margin: 0 0 16px; padding: 8px 0 10px;
  background: var(--bg); box-shadow: 0 8px 10px -10px rgba(60, 64, 67, .45); }
.answersbar__jump { flex: 1 1 260px; width: auto; min-width: 0; min-height: 48px; }
.answersbar .btn { display: inline-flex; align-items: center; min-height: 48px; }
.sv[id], #people { scroll-margin-top: calc(var(--answersbar-h, 0px) + 12px); }
.answers__search { position: sticky; top: var(--answersbar-h, 0px); z-index: 5;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  margin: 0 0 8px; padding: 8px 0; background: var(--card); }
.answers__search .input { flex: 1 1 240px; width: auto; min-width: 0; }
/* An event's results page (results.html, 2026-10-26): every section on one
   screen, a jump to each, and its own full table beside its title. */
.results__jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.results__jump .chip { padding: 6px 12px; font-size: 14px; text-decoration: none; }
.results__head { display: flex; flex-wrap: wrap; align-items: flex-start;
  justify-content: space-between; gap: 8px 16px; margin: 0 0 8px; }
.results__head h2 { margin: 0; }
.results__head .muted { margin: 2px 0 0; }
.results__waiting { margin: 8px 0 24px; }
section.card[id^="part-"] { scroll-margin-top: 12px; }

/* The AI insight points over an open question (core/insights.py). A tinted
   panel above the answers, so it reads as a summary OF them. */
.insights { background: color-mix(in srgb, var(--brand) 8%, #fff);
  border: 1px solid color-mix(in srgb, var(--brand) 25%, #fff);
  border-radius: 10px; padding: 10px 14px; margin: 0 0 12px; max-width: 72ch; }
.insights__head { margin: 0 0 6px; font-size: 14px; }
.insights p { margin: 0; }
.insights__list { margin: 0; padding-inline-start: 20px; }
.insights__list li { margin-bottom: 4px; line-height: 1.5; }

.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__title { font-size: 18px; margin: 0 0 12px; text-align: center; }
.proof__quote { margin: 0 0 12px; padding: 12px 16px; border-radius: 10px;
  background: var(--inset, 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; }
/* A show's door count, offered to save (event.html, 2026-10-15). */
.attend-door { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0 0 12px; }
/* "מה מופיע בדף האירוע" in settings: one row per area, the hint beside it. */
.areas .check { align-items: flex-start; }
.areas .check input { margin-top: 4px; }

/* ── 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 survey screen ("הפעלת הסקר", 2026-09-30) --------------------------
   One tab that is the presenter's control room AND what the room sees, shared
   in Zoom as it is. Dark, because it is projected. A bar along the top (the
   state and its switch, what the stage shows, the tools), then the stage: one
   state at a time, sized with container units so it reads on a projector and
   still fits a laptop. `--brand-stage` is the brand lightened until it reads
   on the dark (settings.admin_theme_vars); a button keeps --brand/--brand-ink. */
.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; }
body.present { background: #141517; color: #f4f5f6; }
body.present .wrap--stage { max-width: none; padding: 0; margin: 0; }
body.present .flashes { margin: 0; padding: 10px 16px 0; }
.screen { position: relative; display: flex; flex-direction: column;
  height: 100vh; height: 100dvh; min-height: 460px; overflow: hidden; }
.screen form { margin: 0; }
.pbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px 14px; padding: 10px 14px; background: #1c1d20; border-bottom: 1px solid #3a3d42;
  position: relative; z-index: 6; transition: opacity .25s, transform .25s; }
/* Fullscreen: the bar floats over the stage and goes after 3s without the
   mouse (present.js), so the room sees only the stage. */
.screen.is-full .pbar { position: absolute; inset-inline: 0; top: 0; }
.screen.is-full.is-idle .pbar { opacity: 0; transform: translateY(-100%); pointer-events: none; }
.screen.is-full.is-idle { cursor: none; }
.pbar__grp { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px;
  font-weight: 600; font-size: 15px; background: #26282c; color: #c3c7cc; white-space: nowrap; }
.pill > i { width: 10px; height: 10px; border-radius: 50%; background: #80868b; }
.pill.is-open { background: rgba(91, 214, 130, .14); color: #a8e6b8; }
.pill.is-open > i { background: #5bd682; animation: pill-live 1.8s ease-in-out infinite; }
.pill__n { font-weight: 500; }
.pbar__auto { font-size: 14px; color: #c3c7cc; }
.pb { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 7px 13px;
  border-radius: 9px; border: 1px solid #3a3d42; background: #26282c; color: #f4f5f6;
  font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; white-space: nowrap;
  text-decoration: none; }
.pb:hover { border-color: #6b7078; }
.pb .ic, .seg .ic, .huge .ic { margin: 0; }
.pb--go { background: var(--brand); color: var(--brand-ink); border-color: transparent; }
.pb--icon { width: 40px; justify-content: center; padding: 0; font-weight: 700; }
.pb[aria-expanded="true"] { background: #3a3d42; border-color: #6b7078; }
.ic--fill { fill: currentColor; stroke: none; }
.seg { display: inline-flex; padding: 3px; gap: 3px; border-radius: 11px; background: #26282c;
  border: 1px solid #3a3d42; }
.seg button { display: inline-flex; align-items: center; gap: 7px; border: 0; background: transparent;
  color: #c3c7cc; padding: 6px 13px; border-radius: 8px; font: inherit; font-size: 15px;
  font-weight: 500; cursor: pointer; min-height: 34px; }
.seg button[aria-pressed="true"] { background: #f4f5f6; color: #141517; }
.pb:focus-visible, .seg button:focus-visible, .arrow:focus-visible, .huge:focus-visible,
.pop__link:focus-visible { outline: 2px solid var(--brand-stage); outline-offset: 2px; }

.stage { position: relative; flex: 1 1 auto; min-height: 0; container-type: size; }
.st { position: absolute; inset: 0; }
.st--center { display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 2.4cqh; padding: 4cqh 6cqw; }
.st-eyebrow { margin: 0; font-size: clamp(16px, 2cqw, 30px); color: #c3c7cc; text-wrap: balance; }
.st-title { margin: 0; font-size: clamp(28px, 4.6cqw, 64px); font-weight: 700; line-height: 1.15;
  text-wrap: balance; }
.st-sub { margin: 0; font-size: clamp(16px, 2cqw, 28px); color: #c3c7cc; max-width: 48ch;
  text-wrap: balance; }
.st-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.huge { display: inline-flex; align-items: center; gap: .5em; font: inherit;
  font-size: clamp(22px, 3cqw, 42px); font-weight: 700; padding: .55em 1.35em; border-radius: 18px;
  border: 0; background: var(--brand); color: var(--brand-ink); cursor: pointer; text-decoration: none; }
.huge:hover { filter: brightness(1.06); }
.huge--quiet { background: #26282c; color: #f4f5f6; border: 1px solid #3a3d42; }
/* The link for the chat, over the stage (`?copy=1`, from the owner's email
   before the meeting, core/survey_mail.py). Covers whichever state is under
   it, on the stage's own dark, until it is closed. */
.copybox { z-index: 5; background: #141517; }
.copybox__url { margin: 0; font-size: clamp(22px, 3.4cqw, 48px); font-weight: 700;
  color: var(--brand-stage); overflow-wrap: anywhere; }
.copybox__close { font-size: clamp(16px, 1.8cqw, 24px); }

/* An event's Google Form, to project (gform_qr.html): the stage's sizes,
   one column, the QR as large as the height allows. */
.gfqr .st--center { gap: 1.8cqh; }
.gfqr__title { margin: 0; font-size: clamp(24px, 4cqw, 56px); font-weight: 700; line-height: 1.15;
  text-wrap: balance; }
.gfqr__img { display: block; width: min(62cqh, 80cqw); height: auto; aspect-ratio: 1;
  background: #fff; border-radius: 18px; }
.gfqr__url { margin: 0; font-size: clamp(18px, 2.7cqw, 40px); font-weight: 600;
  color: var(--brand-stage); overflow-wrap: anywhere; }
.gfqr__back { color: #c3c7cc; font-size: clamp(14px, 1.4cqw, 18px); }
.gfqr__back:focus-visible { outline: 2px solid var(--brand-stage); outline-offset: 2px; }

.st--qrlayout { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center;
  gap: 5cqw; padding: 5cqh 7cqw; }
.qrbig { width: min(78cqh, 44cqw); aspect-ratio: 1; background: #fff; border-radius: 18px;
  overflow: hidden; }
.qrbig img, .qrmini img { display: block; width: 100%; height: 100%; }
.st-qr__text { min-width: 0; }
.st-qr__cta { margin: 0; font-size: clamp(24px, 4.2cqw, 60px); font-weight: 700; line-height: 1.15;
  text-wrap: balance; }
.st-qr__pitch { margin: 1.4cqh 0 0; font-size: clamp(18px, 2.4cqw, 34px); color: #c3c7cc; line-height: 1.4; }
.st-qr__url { margin: 2cqh 0 0; font-size: clamp(18px, 2.7cqw, 40px); font-weight: 600;
  color: var(--brand-stage); overflow-wrap: anywhere; text-align: right; }
.st-qr__count { margin: 5cqh 0 0; display: flex; align-items: baseline; gap: .35em; flex-wrap: wrap; }
.st-qr__count b { display: inline-block; font-size: clamp(44px, 8.4cqw, 120px); line-height: 1;
  font-variant-numeric: tabular-nums; }
.st-qr__count span { font-size: clamp(18px, 2.6cqw, 36px); color: #c3c7cc; }
.bump { animation: bump .6s ease-out; }

.st--res { display: grid; grid-template-columns: minmax(0, 1fr) clamp(150px, 17cqw, 300px);
  gap: 3.5cqw; padding: 3.4cqh 7.5cqw 3cqh; }
.res { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.res__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: 0;
  font-size: clamp(15px, 1.8cqw, 24px); color: #c3c7cc; }
.res__sort { margin-inline-start: auto; }
.res__q { margin: .25em 0 .7em; font-size: clamp(24px, 3.5cqw, 46px); line-height: 1.2;
  text-wrap: balance; }
.res__body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.res__empty { font-size: clamp(18px, 2.4cqw, 30px); color: #c3c7cc; margin: 2cqh 0; }
.bars { display: grid; gap: 1.8cqh; }
.barrow { display: grid; grid-template-columns: minmax(0, 34%) minmax(0, 1fr) 6.4em;
  align-items: center; gap: 1.6cqw; font-size: clamp(16px, 2.05cqw, 28px); }
.barrow__l { overflow-wrap: anywhere; line-height: 1.25; }
.barrow__t { height: clamp(18px, 4.4cqh, 42px); background: #26282c; border-radius: 8px; overflow: hidden; }
.barrow__f { display: block; height: 100%; min-width: 3px; background: var(--brand-stage);
  border-radius: 8px; }
.barrow__n { font-variant-numeric: tabular-nums; white-space: nowrap; }
.barrow__n span { color: #c3c7cc; }
.avg { margin: 0 0 2cqh; font-size: clamp(18px, 2.4cqw, 32px); }
.avg b { font-size: 1.25em; color: var(--brand-stage); }
.cols { flex: 1 1 auto; min-height: 120px; max-height: 46cqh; display: grid; grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr); gap: 1.1cqw; }
.col { display: flex; flex-direction: column; align-items: center; min-height: 0; }
.col__track { flex: 1 1 auto; width: 100%; min-height: 0; display: flex; flex-direction: column;
  justify-content: flex-end; align-items: center; }
.col__n { font-size: clamp(16px, 2.1cqw, 28px); font-weight: 700; margin-bottom: .25em;
  font-variant-numeric: tabular-nums; }
.col__n.is-zero { color: #9aa0a6; font-weight: 500; }
.col__bar { display: block; width: 100%; background: var(--brand-stage); border-radius: 8px 8px 3px 3px;
  min-height: 3px; }
.col__lbl { font-size: clamp(16px, 2.1cqw, 28px); margin-top: .35em; line-height: 1.2; white-space: nowrap; }
.col__lbl--stars { color: var(--brand-stage); letter-spacing: -.05em; font-size: clamp(12px, 1.5cqw, 22px); }
.res__body .insights { background: #222a36; border-color: #3a4a63; max-width: none;
  margin: 0 0 2.2cqh; padding: 1.6cqh 1.8cqw; }
.res__body .insights__head { color: #9cc2ff; font-size: clamp(14px, 1.7cqw, 22px); }
.res__body .insights__list li { color: #f4f5f6; font-size: clamp(16px, 2cqw, 27px); line-height: 1.35; }
.res__body .insights .muted { color: #c3c7cc; }
.quotes { list-style: none; margin: 0; padding: 0; flex: 1 1 auto; min-height: 0; overflow: hidden;
  display: flex; flex-wrap: wrap; gap: 1.2cqh 1cqw; align-content: flex-start; }
.quote { background: #26282c; border-radius: 12px; padding: .45em .85em;
  font-size: clamp(15px, 1.9cqw, 25px); line-height: 1.35; }
.quote--new { box-shadow: inset 0 0 0 2px var(--brand-stage); }
/* What was written in "אחר", under a choice's bars: the same chips, one
   size down, taking whatever room the bars leave. */
.others__head { margin: 2.6cqh 0 1cqh; font-size: clamp(15px, 1.8cqw, 24px); color: #c3c7cc; }
.quotes--others .quote { font-size: clamp(14px, 1.65cqw, 22px); }
/* A later page of "אחר" answers has no bars above it. */
.others__head--top { margin-top: 0; }
/* Its line is kept even while empty: filled in after the answers are
   measured, it would otherwise push the last row half off the screen. */
.more { margin: 1.2cqh 0 0; font-size: clamp(14px, 1.6cqw, 21px); color: #c3c7cc;
  min-height: 1.35em; line-height: 1.35; }
.res__aside { align-self: end; text-align: center; min-width: 0; }
.qrmini { width: 100%; aspect-ratio: 1; background: #fff; border-radius: 12px; overflow: hidden; }
.res__aside p { margin: .55em 0 0; font-size: clamp(14px, 1.6cqw, 22px); line-height: 1.3; }
.res__url { color: var(--brand-stage); font-weight: 600; overflow-wrap: anywhere; }
/* One line: "events.omri-iram.co.il/s/abcde" split in two is harder to type
   from across a room than a smaller one. */
.res__aside .res__url { font-size: clamp(12px, 1.12cqw, 18px); white-space: nowrap; }
.res__closed { border: 1px dashed #3a3d42; border-radius: 12px; padding: 1.2em .6em; color: #c3c7cc; }
.arrow { position: absolute; top: 50%; transform: translateY(-50%); width: clamp(44px, 5cqw, 72px);
  aspect-ratio: 1; border-radius: 50%; border: 1px solid #3a3d42; background: rgba(38, 40, 44, .9);
  color: #f4f5f6; display: grid; place-items: center; cursor: pointer; padding: 0; }
.arrow .ic { width: 55%; height: 55%; margin: 0; }
.arrow--prev { right: 1.5cqw; }
.arrow--next { left: 1.5cqw; }
.arrow:disabled { opacity: .25; cursor: default; }

.clock { position: absolute; top: 2.4cqh; left: 2cqw; z-index: 4; font-size: clamp(34px, 5.4cqw, 80px);
  font-weight: 700; line-height: 1.1; padding: .08em .42em; border-radius: 14px;
  background: rgba(20, 21, 23, .9); border: 1px solid #3a3d42; font-variant-numeric: tabular-nums; }
.clock.is-done { color: #f28b82; border-color: #f28b82; }
.pop { position: absolute; left: 14px; z-index: 8; width: min(330px, calc(100% - 28px));
  background: #202226; border: 1px solid #4a4e55; border-radius: 14px; padding: 14px;
  display: grid; gap: 12px; box-shadow: 0 16px 40px rgba(0, 0, 0, .45); }
.pop .seg { width: 100%; }
.pop .seg button { flex: 1 1 0; justify-content: center; }
.pop__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.pop__set { font-size: 26px; font-variant-numeric: tabular-nums; }
.pop__title { margin: 0; font-weight: 600; }
.pop__hint { margin: 0; font-size: 14px; color: #c3c7cc; }
.pop__link { justify-self: start; background: none; border: 0; color: #c3c7cc; text-decoration: underline;
  cursor: pointer; padding: 0; font: inherit; font-size: 14px; }
.keys { margin: 0; display: grid; gap: 6px; }
.keys div { display: flex; align-items: center; gap: 10px; }
.keys dt { margin: 0; min-width: 34px; }
.keys dd { margin: 0; color: #c3c7cc; }
.keys kbd { display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 6px;
  border-radius: 6px; background: #26282c; border: 1px solid #6b7078; font: 600 14px/1 var(--font);
  color: #f4f5f6; }
.stoast { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 9;
  background: #f4f5f6; color: #141517; padding: 10px 18px; border-radius: 12px; font-weight: 500;
  max-width: calc(100% - 28px); }
@keyframes bump { 0% { transform: scale(1); } 30% { transform: scale(1.16); } 100% { transform: scale(1); } }
@keyframes pill-live { 0%, 100% { box-shadow: 0 0 0 3px rgba(91, 214, 130, .22); }
  50% { box-shadow: 0 0 0 7px rgba(91, 214, 130, .06); } }
@media (prefers-reduced-motion: reduce) {
  .bump, .pill.is-open > i { animation: none; }
  .pbar { transition: none; }
}
/* A laptop squeezed narrow, or a phone opening it by mistake: the stage
   stacks and scrolls instead of shrinking the QR to a stamp. */
@media (max-width: 760px) {
  .screen { height: auto; min-height: 100vh; overflow: visible; }
  .stage { container-type: inline-size; min-height: 70vh; }
  .st { position: relative; min-height: 70vh; }
  .st--qrlayout { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center;
    padding: 28px 18px; }
  .st--qrlayout .st-qr__url { text-align: center; }
  .st-qr__count { justify-content: center; }
  .qrbig { width: min(76cqw, 340px); }
  .st--res { grid-template-columns: minmax(0, 1fr); padding: 20px 56px 24px; }
  .res__aside { display: none; }
  .cols { height: 220px; max-height: none; flex: none; }
  .quotes { max-height: none; overflow: visible; }
}

/* ── The phone app (2026-10-09) ─────────────────────────────────────────────
   Omri: "rebuild the mobile experience", for the admin screens, phone-first,
   and on the home screen like an app (web/pwa.py). Approved mockup:
   claude.ai/artifact/Cs12KkHxPefvX7QxRYdtRR. On a phone the admin has a
   bottom bar with the four places, a slim top bar, events as cards with a
   date tile, and an event that opens on a list of its sections, each of which
   opens on its own with a way back (tabs.js). Every rule here is inside a
   max-width: 600px query or hides a phone-only thing above it: the computer
   view is what it was. */
.tabbar, .hub, .secbar, .cell-date, .cell-num__label, .next__day,
.install-card, .phone-signout, .phone-label, .setback { display: none; }

@media (max-width: 600px) {
  .wrap { padding-top: 16px; }

  /* The top bar: one slim row with the name; the nav and the search moved
     down to the bottom bar. */
  .topbar--app { min-height: 52px; padding: 8px 16px; }
  .topbar--app .topbar__nav, .topbar--app .topbar__search { display: none; }
  .topbar--app .topbar__brand { flex: 1 1 auto; font-size: 16px; }

  /* The bottom bar, above the phone's own gesture bar. */
  .tabbar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    position: fixed; inset-inline: 0; bottom: 0; z-index: 30;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    background: var(--card); border-top: 1px solid var(--border);
    box-shadow: 0 -1px 6px rgba(60, 64, 67, .08); }
  .tabbar a { display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 2px; min-height: 54px; font-size: 12.5px;
    font-weight: 500; line-height: 1.2; color: var(--muted); text-decoration: none;
    -webkit-tap-highlight-color: transparent; }
  .tabbar__ic { display: flex; padding: 4px 18px; border-radius: 999px; }
  /* A fifth tab where surveys are on (core/surveys.py). */
  .tabbar--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .tabbar--5 .tabbar__ic { padding: 4px 12px; }
  .tabbar--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .tabbar--6 .tabbar__ic { padding: 4px 8px; }
  .tabbar--6 a { font-size: 11.5px; }
  .tabbar .ic { margin: 0; width: 22px; height: 22px; vertical-align: 0; }
  .tabbar a[aria-current="page"] { color: var(--brand-link); font-weight: 700; }
  .tabbar a[aria-current="page"] .tabbar__ic {
    background: color-mix(in srgb, var(--brand) 30%, var(--card)); }
  .tabbar a:focus-visible { outline: 2px solid var(--brand); outline-offset: -4px;
    border-radius: 14px; }
  body:has(.tabbar) { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
  /* A sticky save bar sits above the bottom bar, never under it. */
  body:has(.tabbar) .savebar { bottom: calc(68px + env(safe-area-inset-bottom)); }

  /* A screen under another: its parent as one back link, "→ אירועים". */
  .crumbs > a:not(:last-of-type), .crumbs__sep, .crumbs [aria-current] { display: none; }
  .crumbs > a:last-of-type { display: inline-flex; align-items: center; gap: 6px;
    min-height: 40px; color: var(--ink); font-weight: 500; }
  .crumbs > a:last-of-type::before { content: "→"; font-size: 18px; color: var(--muted); }

  /* A card's 24px is a tenth of a phone's width on each side. */
  .card { padding: 16px; }
  .card--alert h2 { font-size: 18px; line-height: 1.35; }
  /* The approval queue's rows (stacked by the older phone block above):
     `.table td`'s padding and rule are undone here too, so each held email
     is one block, not five ruled lines. */
  .todo__queue td { padding: 2px 0; border: 0; }
  .todo__queue tr:last-child { border-bottom: 0; }
  .todo { padding: 16px; }
  .todo__part--alert { margin-inline: -16px; padding-inline: 16px; }
  .task { flex-wrap: wrap; }
  /* The day's buttons and "לכל ההשתלמות" sit above the card's stretched
     link, so a tap on them is theirs. */
  .row-day, .row-more a { position: relative; z-index: 1; }
  /* A group's heading on a phone: a line between the cards, not a card. */
  .table--events tr.row-group { display: block; margin: 14px 2px 8px; padding: 0;
    background: none; border: 0; box-shadow: none; }
  .table--events tr.row-group:first-child { margin-top: 0; }
  .table--events tr.row-group > th { display: block; padding: 0; background: none;
    border: 0; font-size: 14px; }
  /* "· 12 חדשים" after the counts wraps rather than widening the page. */
  .table--events .cell-num { white-space: normal; }
  .dtabs-bar { flex-direction: column; align-items: stretch; }
  .dtabs-bar .search { max-width: none; flex: none; margin-inline-start: 0; }
  .dtab { padding: 10px 10px; }

  /* ── The events screen ── */
  .page-head:has(.next) h1 { font-size: 22px; }
  /* "הבא: …" is the first card: the next event, large, and on the day its
     two buttons (the meeting, the survey). */
  .next { margin: 10px 0 2px; padding: 14px 16px; border-radius: 14px;
    background: color-mix(in srgb, var(--brand) 10%, var(--card));
    border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--border)); }
  .next__label { font-size: 13.5px; }
  .next__name { flex: 1 1 100%; font-size: 18px; line-height: 1.35; color: var(--ink); }
  .next__day { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px; flex: 1 1 100%; margin-top: 8px; }
  .next__day .btn { display: inline-flex; align-items: center; justify-content: center;
    min-height: 48px; padding: 8px 12px; }
  /* "אירוע חדש" floats above the bottom bar, where a thumb is. */
  .btn--fab { position: fixed; z-index: 25; inset-inline-end: 16px;
    bottom: calc(82px + env(safe-area-inset-bottom)); display: inline-flex;
    align-items: center; min-height: 52px; padding: 0 20px; border-radius: 16px;
    font-weight: 600; box-shadow: 0 6px 18px rgba(32, 33, 36, .2); }
  body:has(.btn--fab) { padding-bottom: calc(150px + env(safe-area-inset-bottom)); }

  /* Events as cards: a date tile, the name, the time, how many. The name's
     link is stretched over the whole card, so a tap anywhere opens the event;
     a chip that is a link of its own stays above the stretch. Duplicating is
     on the event itself (its action row), not on every card. */
  .list .table-scroll { overflow: visible; }
  .table--events, .table--events tbody { background: none; }
  .table--events tr { display: grid; grid-template-columns: 56px minmax(0, 1fr);
    column-gap: 12px; row-gap: 3px; align-items: start; position: relative;
    margin: 0 0 10px; padding: 12px; background: var(--card);
    border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); }
  .table--events tr:active { background: var(--bg); }
  /* `.table td`'s padding and rule come later in this file than the older
     phone block above, so they won over it there; here they are undone. */
  .table--events td { grid-column: 2; padding: 0; border: 0; }
  .table--events .cell-num:empty { display: none; }
  .table--events .cell-when__rel { display: inline; font-size: inherit; }
  .table--events .cell-date { display: flex; grid-column: 1; grid-row: 1 / span 4;
    flex-direction: column; align-items: center; justify-content: center;
    height: 64px; border-radius: 12px; background: var(--bg);
    border: 1px solid var(--border); line-height: 1.15; text-align: center; }
  .cell-date__wd, .cell-date__mon { font-size: 11.5px; color: var(--muted); }
  .cell-date__day { font-size: 22px; font-weight: 700; color: var(--ink); }
  .table--events .cell-name { margin: 0; }
  .table--events .cell-name > a:first-child { color: var(--ink); font-weight: 600;
    text-decoration: none; padding: 0; }
  .table--events .cell-name > a:first-child::after { content: ""; position: absolute;
    inset: 0; border-radius: 14px; }
  .table--events .cell-name .chip { position: relative; z-index: 1; margin: 6px 0 0;
    margin-inline-end: 6px; }
  .table--events .cell-when { font-size: 14px; }
  .cell-when__date { display: none; }
  .table--events .cell-num { color: var(--muted); }
  .cell-num__label { display: inline; }
  .table--events .cell-actions .actionrow { display: none; }

  /* ── One event ── */
  .page-head--event h1 { font-size: 22px; }
  /* The share box: the link and its copy button on one line, the other two
     buttons sharing the next. */
  .sharebox { padding: 12px; }
  .sharebox__row { gap: 8px; }
  .sharebox__label { flex: 1 1 100%; min-width: 0; }
  /* 60%: wide enough that only the copy button fits beside it. With a zero
     basis the open button squeezed onto the line too and the link shrank
     to a sliver. */
  .sharebox__row .input { flex: 1 1 60%; font-size: 14px; }
  .sharebox__row > button.btn { flex: none; }
  .sharebox__row > a.btn { flex: 1 1 calc(50% - 4px); display: inline-flex;
    align-items: center; justify-content: center; padding-inline: 10px; }
  /* The list: the summary above, the sections here; the tabs and panels
     wait until one is opened. */
  html[data-evview="hub"] .tabs, html[data-evview="hub"] .tab-panel { display: none; }
  html[data-evview="hub"] .hub { display: block; }
  .hub { margin: 0 0 16px; background: var(--card); border: 1px solid var(--border);
    border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; }
  .hub__row { display: flex; align-items: center; gap: 12px; min-height: 64px;
    padding: 10px 14px; color: var(--ink); text-decoration: none;
    border-top: 1px solid var(--border); -webkit-tap-highlight-color: transparent; }
  .hub__row:first-child { border-top: 0; }
  .hub__row:active { background: var(--bg); }
  .hub__ic { flex: none; display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 11px; background: var(--bg); }
  .hub__ic .ic, .hub__chev { margin: 0; width: 20px; height: 20px; vertical-align: 0; }
  .hub__chev { color: var(--muted); }
  .hub__text { flex: 1 1 auto; min-width: 0; }
  .hub__title { display: block; font-weight: 600; line-height: 1.3; }
  .hub__sub { display: block; font-size: 13.5px; color: var(--muted); line-height: 1.4;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hub__sub .chip { font-size: 12.5px; }
  /* One section open: its bar with the way back, then the panel alone. */
  html[data-evview="section"] .evhead, html[data-evview="section"] .tabs { display: none; }
  html[data-evview="section"] .secbar { display: flex; }
  .secbar { position: sticky; top: 0; z-index: 20; align-items: center; gap: 4px;
    margin: -16px -16px 16px; padding: 6px 10px; min-height: 58px;
    background: var(--card); border-bottom: 1px solid var(--border); }
  .secbar__back { flex: none; display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 12px; color: var(--ink); }
  .secbar__back .ic { margin: 0; width: 22px; height: 22px; vertical-align: 0; }
  .secbar__text { flex: 1 1 auto; min-width: 0; }
  .secbar__title { margin: 0; font-size: 18px; line-height: 1.25; }
  .secbar__event { display: block; font-size: 12.5px; color: var(--muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  .phone-label { display: inline; }

  /* ── Tables as cards (`.table--cards`): people, emails, the waiting list,
     search results. The same markup as the computer's table; each row a
     block, its cells lines. `.cell-title` and `.cell-badge` share the first
     line; a cell with `data-label` says what it is, since the headings are
     gone. Inside a card the rows are a list, outside it each is a card. */
  .table--cards thead { display: none; }
  .table--cards, .table--cards tbody { display: block; background: none; }
  .table--cards tr { display: flex; flex-wrap: wrap; align-items: center;
    gap: 3px 10px; margin: 0 0 10px; padding: 12px 14px; background: var(--card);
    border: 1px solid var(--border); border-radius: 14px; }
  .card .table--cards tr { margin: 0; padding: 12px 0; background: none; border: 0;
    border-bottom: 1px solid var(--border); border-radius: 0; }
  .card .table--cards tr:last-child { border-bottom: 0; }
  .table--cards td { display: block; flex: 1 1 100%; min-width: 0; padding: 0;
    border: 0; overflow-wrap: anywhere; }
  .table--cards td:empty { display: none; }
  .table--cards td[dir="ltr"] { text-align: right; font-size: 14.5px; }
  .table--cards td[data-label]::before { content: attr(data-label) " "; }
  .table--cards .cell-title { order: -2; flex: 1 1 auto; width: auto;
    font-weight: 600; font-size: 16px; }
  .table--cards .cell-badge { order: -1; flex: 0 1 auto; }
  .table--cards .muted { font-size: 14px; }
  .table--cards .cell-actions { margin-top: 6px; }
  .table--cards .actionrow { flex-wrap: wrap; justify-content: flex-start;
    white-space: normal; gap: 8px; }
  .table--cards .actionrow .btn { min-height: 40px; }
  /* With a box to tick: the box beside the lines, all of them. */
  .table--check tr { display: grid; grid-template-columns: 34px minmax(0, 1fr);
    column-gap: 8px; align-items: start; }
  .table--check td { grid-column: 2; }
  .table--check .cell-title, .table--check .cell-badge { order: 0; }
  .table--check .cell-check { grid-column: 1; grid-row: 1 / span 5; padding-top: 2px; }
  .table--check input[type="checkbox"] { width: 22px; height: 22px; margin: 0;
    accent-color: var(--brand); }
  .table--check thead { display: block; }
  .table--check thead tr { display: block; padding: 0 0 10px;
    border-bottom: 1px solid var(--border); }
  .table--check thead th { display: none; padding: 0; border: 0; }
  .table--check thead th:first-child { display: block; }
  .pickall__wrap { display: inline-flex; align-items: center; gap: 12px;
    min-height: 40px; font-weight: 500; color: var(--ink); cursor: pointer; }

  /* ── Settings: the map is the list, and one card opens alone (:target).
     The form, the save bar and every other card stay in the page, hidden. */
  body:has(.jumpbar) .list__title { display: none; }
  body:has(.jumpbar) .card[id] { display: none; }
  body:has(.jumpbar) .card[id]:target { display: block; }
  body:has(.card[id]:target) .jumpbar,
  body:has(.card[id]:target) .install-card,
  body:has(.card[id]:target) .page-head { display: none; }
  body:has(.jumpbar):not(:has(.card[id]:target)) .savebar { display: none; }
  /* The way back stays in view, like an event section's bar: the browser
     scrolls the opened card to the top, which would leave it above. */
  body:has(.card[id]:target) .setback { display: flex; align-items: center; gap: 8px;
    position: sticky; top: 0; z-index: 20; min-height: 56px; margin: -16px -16px 12px;
    padding: 0 14px; background: var(--card); border-bottom: 1px solid var(--border);
    color: var(--ink); font-size: 17px; font-weight: 600; text-decoration: none; }
  .setback .ic { margin: 0; width: 22px; height: 22px; }
  body:has(.card[id]:target) .card[id] { scroll-margin-top: 72px; }
  body:has(.card[id]:target) .phone-signout { display: none; }
  /* A card's own heading with a button beside it (נרשמים + ייצוא). */
  .card .page-head h2 { font-size: 19px; margin: 0; }
  .card .page-head .btn { white-space: nowrap; }
  .jumpbar { display: block; margin: 0 0 8px; padding: 0; background: none;
    border: 0; box-shadow: none; }
  .jumpbar__group { margin: 0 0 18px; gap: 8px; }
  .jumpbar__title { border: 0; padding: 0 4px; font-size: 13.5px; font-weight: 500;
    color: var(--muted); }
  .jumpbar__links { display: flex; flex-direction: column; gap: 0; overflow: hidden;
    background: var(--card); border: 1px solid var(--border); border-radius: 14px; }
  .jumpbar a { display: flex; align-items: center; justify-content: space-between;
    gap: 10px; min-height: 54px; padding: 0 16px; border-radius: 0; background: none;
    border-top: 1px solid var(--border); font-size: 16px; color: var(--ink); }
  .jumpbar a:first-child { border-top: 0; }
  .jumpbar a:hover { background: none; color: var(--ink); }
  .jumpbar a:active { background: var(--bg); }
  /* A chevron pointing onward (left, in Hebrew), drawn, not a glyph that
     the bidi algorithm might mirror. */
  .jumpbar a::after { content: ""; flex: none; width: 18px; height: 18px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f6368' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E") center / contain no-repeat; }

  /* ── The editors and forms ── The email editor's save bar clears the
     bottom bar and takes the card's 16px edges here. */
  .composer__main { padding: 16px; }
  .composer__savebar { margin: 8px -16px -16px; padding: 10px 16px; }
  body:has(.tabbar) .composer__savebar { bottom: calc(68px + env(safe-area-inset-bottom)); }
  .composer__savebar .btn { flex: 1 1 auto; min-height: 48px;
    display: inline-flex; align-items: center; justify-content: center; }
  /* Two fields side by side are two cramped fields on a phone; one under the
     other. The date and the times keep their own rows (their rules carry
     :has(), which outranks this). */
  .row .field { flex-basis: 100%; }
  /* The answers page's bar, one row on a phone: the jump takes the room,
     the two buttons are their icons (their words stay for a screen reader
     in aria-label, and are clipped in place here). */
  .answersbar .btn { width: 48px; justify-content: center; padding: 0; flex: none; }
  .answersbar .btn .ic { margin: 0; width: 20px; height: 20px; }
  .answersbar__text { position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .answersbar__jump { flex: 1 1 0; }
  /* The waiting list's pinned filters, one short row: the two side by side
     (each box says what it holds: "כל הסוגים", "כל התאריכים"), their labels
     kept for a screen reader by clipping in place, never by pushing them
     off the page. An opened date list takes the whole row. */
  .filters { gap: 8px; padding: 6px 0 8px; }
  .filters .filters__field { flex: 1 1 0; min-width: 0; max-width: none; }
  .filters .filters__field:has(.picklist[open]) { flex-basis: 100%; }
  .filters .field__label { position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .filters .btn { flex: none; }
  /* The waiting list's send bar: above the bottom bar, its button the
     whole width. */
  body:has(.tabbar) .invite__send { bottom: calc(76px + env(safe-area-inset-bottom)); }
  .invite__send .btn { flex: 1 1 100%; min-height: 48px; }
  .invite__send [data-invite-lock] { font-size: 13.5px; }
  /* Number tiles three to a row, not two tall ones. */
  .tiles { gap: 8px; }
  .tile { flex: 1 1 28%; padding: 10px 8px; }
  .tile b { font-size: 22px; }
  .tile span { font-size: 12.5px; line-height: 1.35; display: block; }

  /* The settings page: installing the app, and signing out (the top bar's
     link is not on a phone). */
  .install-card[data-install]:not([hidden]) { display: flex; align-items: center;
    gap: 14px; margin: 0 0 16px; padding: 14px; border-radius: 14px;
    background: color-mix(in srgb, var(--brand) 10%, var(--card));
    border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--border)); }
  .install-card img { flex: none; display: block; border-radius: 12px; }
  .install-card__text { flex: 1 1 auto; min-width: 0; display: flex;
    flex-direction: column; line-height: 1.4; }
  .install-card__text .muted { font-size: 13.5px; }
  .phone-signout { display: block; margin: 24px 0 0; }
  .phone-signout .btn { width: 100%; color: var(--err); }
}
/* A client's personal area, /area/<token> (core/clients.py). */
.clientarea__kicker { margin: 0 0 6px; color: var(--brand-link); font-weight: 700; font-size: 14px; }
.clientarea__session { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--border); }
.clientarea__session h2 { margin: 0 0 12px; }
.clientarea__session > .muted:first-child { margin: 0 0 4px; }

/* The picture of a course on a client's page (_client_report.html). --heading
   is always dark enough to read on the card, so white reads on it. */
.creport__head { background: var(--heading, #202124); color: #fff; border-radius: 12px; padding: 24px; }
.creport__head h1 { color: #fff; margin: 0 0 8px; }
.creport__head p { margin: 0; }
.creport__kicker { font-weight: 700; font-size: 14px; margin-bottom: 6px !important; }
.creport__dots { display: flex; gap: 6px; margin-top: 16px; }
.creport__dots span { flex: 1 1 0; height: 8px; border-radius: 4px; background: rgba(255,255,255,.25); }
.creport__dots .is-held { background: var(--brand); }
.creport__sec { margin-top: 28px; }
.creport__sec > h2 { margin: 0 0 12px; color: var(--heading, inherit); }
.creport__how { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.creport__how > div { background: var(--inset); border-radius: 12px; padding: 14px; }
.creport__how p { margin: 4px 0 0; font-size: 15px; }
.creport__sample { margin-top: 12px; }
.creport__sample summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 500; color: var(--brand-link); }
.creport__sample > div { border: 1px solid var(--border); border-radius: 12px; padding: 14px; max-width: 460px; }
.creport__sample p { margin: 0 0 6px; font-size: 15px; }
.creport__tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin-bottom: 10px; }
.creport__tile { border: 1px solid var(--border); border-radius: 12px; padding: 14px; }
.creport__tile p { margin: 0; }
.creport__value { font-size: 28px; font-weight: 700; line-height: 1.2; color: var(--heading, inherit); }
.creport__label { font-weight: 500; font-size: 15px; margin-top: 4px !important; }
.creport__tile .muted { font-size: 13px; }
.creport__points { background: var(--inset); border-radius: 12px; padding: 16px 18px; margin-bottom: 12px; }
.creport__points p { margin: 0 0 6px; }
.creport__points ul { margin: 0; padding-inline-start: 20px; }
.creport__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin-bottom: 8px; }
.creport__cards blockquote { margin: 0; border: 1px solid var(--border); border-radius: 12px; padding: 14px; font-size: 15px; overflow-wrap: anywhere; }
.creport__product { background: var(--inset); border-radius: 12px; padding: 14px; font-size: 15px; overflow-wrap: anywhere; }
.creport__list { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.creport__s + .creport__s { border-top: 1px solid var(--border); }
.creport__s > summary, .creport__s--next { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 16px; min-height: 60px; padding: 12px 16px; box-sizing: border-box; }
.creport__s > summary { cursor: pointer; }
.creport__stitle { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; }
.creport__stitle .muted, .creport__smeta { font-size: 14px; }
.creport__sbody { padding: 4px 16px 18px; }
.creport__chart { margin-bottom: 16px; }
.creport__chart p { margin: 0 0 6px; }
.creport__bar { margin-bottom: 8px; }
.creport__barhead { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.creport__track { height: 8px; background: var(--inset); border-radius: 4px; overflow: hidden; }
.creport__track i { display: block; height: 100%; background: var(--brand); }
.creport__note { margin-top: 24px; font-size: 14px; }
/* A file behind an email form, /d/<number> (core/lead_files.py). */
.leadfile__kicker { margin: 0 0 6px; color: var(--brand-link); font-weight: 700; font-size: 14px; }
.leadfile__blurb { font-size: 17px; line-height: 1.6; margin: 0 0 18px; }
.leadfile__form .check { margin: 6px 0 16px; }
.leadfile__fine { text-align: center; margin: 10px 0 0; font-size: 13px; }
.leadadmin h2 { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.leadadmin__videos { margin: 0 0 12px; padding-inline-start: 20px; }

/* The sign-up hero (2026-10-18, Omri: "full of information, on a phone a
   lot of text; it should be cleaner"). No boxed card: one small line with
   where and when, the outcome as the title, one line under it, the way in,
   and the places and the guarantee on one line under the button. The logo
   is small on this page, so the title is on the first screen. */
/* The logo and who runs it are one small row on this page (2026-10-18, the
   Hormozi comparison): the headline is the first big thing. */
.public--signup .brandrow { display: flex; align-items: center; justify-content: center;
  gap: 10px; margin: 0 0 16px; min-width: 0; }
.public--signup .brandrow:empty { display: none; }
.public--signup .frame .brandmark { width: auto; height: 36px; max-width: 120px;
  flex: none; margin: 0; object-fit: contain; }
.public--signup .brandlink { flex: none; margin: 0; }
.public--signup .hostline { margin: 0; font-size: 13.5px; line-height: 1.4;
  color: var(--muted); text-align: start; min-width: 0; }
.ehero { margin: 0 0 26px; }
/* A QR for someone watching on a projector or YouTube: the page's bare public
   address only. Bigger than on the other tools: a long slug makes a denser
   code. On a phone there is nothing to scan. */
.ehero__top { display: flex; align-items: flex-start; gap: 20px; }
.ehero__toptext { flex: 1; min-width: 0; }
.scan { flex: none; margin: 0 0 12px; display: grid; justify-items: center; gap: 6px; }
.scan img { display: block; width: 160px; height: 160px; border: 1px solid #e3e3e3; border-radius: 8px; }
.scan figcaption { font-size: 13px; color: var(--muted); }
@media (max-width: 560px) { .scan { display: none; } }
/* The top lines are centred, like the lines under the button (2026-10-18,
   Omri: "why is the headline not centred?"). The description's bullets stay
   at the start: a centred list is hard to read. */
.ehero__eyebrow { margin: 0 0 8px; font-size: 14px; font-weight: 700;
  color: var(--brand-link); text-wrap: balance; text-align: center; }
.ehero__title { font-size: clamp(25px, 6.6vw, 32px); line-height: 1.25; margin: 0 0 10px;
  text-wrap: balance; text-align: center; }
.ehero__sub { font-size: clamp(16.5px, 4.4vw, 18px); line-height: 1.5; color: var(--muted);
  margin: 0 0 18px; text-wrap: balance; text-align: center; }
.couponfold { margin: 0 0 14px; }
.couponfold > summary { cursor: pointer; text-align: center; font-size: 14.5px; color: var(--brand-link);
  text-decoration: underline; text-underline-offset: 3px; list-style: none; }
.couponfold > summary::-webkit-details-marker { display: none; }
.couponfold[open] > summary { margin-bottom: 8px; }
.ehero__desc { margin: 0 0 18px; font-size: 16px; line-height: 1.55; }
.ehero__desc ul { margin: 0; }
.ehero__desc li { margin: 0 0 6px; }
.ehero__go { font-size: 17px; padding-top: 13px; padding-bottom: 13px; }
.ehero__prem { margin: 0 0 12px; padding: 9px 12px; border-radius: 10px;
  background: #eef3fe; color: #1a3d7a; font-size: 15px; }
.ehero__alt { display: block; margin: 10px 0 0; text-align: center; font-size: 14.5px; }
.ehero__meta { margin: 10px 0 0; text-align: center; font-size: 14px; color: var(--ink);
  text-wrap: balance; }
.ehero__meta a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.ehero__meta--quiet { margin-top: 2px; color: var(--muted); }
.btn__was { font-weight: 400; opacity: .7; font-size: .9em; }
/* The members' button: white with the members' blue, under the main one. */
.btn--member { margin-top: 10px; background: var(--card); color: #1a3d7a;
  border: 1.5px solid #9db4e6; }
.btn--member:hover { background: #f4f7fe; }
.memberline, .offer__member { margin: 0 0 14px; padding: 9px 12px; border-radius: 10px;
  background: #eef3fe; color: #1a3d7a; font-size: 15px; }
.couponline--no { color: var(--warn); }
/* A free date's form inside the hero: the two fields side by side from
   600px, and the choice behind one quiet line after the button. */
.ehero form { margin: 0; }
.twofields { display: grid; gap: 0 12px; }
@media (min-width: 600px) { .twofields { grid-template-columns: 1fr 1fr; } }
.choicefold { margin: 12px 0 0; }
.choicefold > summary { cursor: pointer; text-align: center; font-size: 14.5px;
  color: var(--brand-link); text-decoration: underline; text-underline-offset: 3px; }
.choicefold[open] > summary { margin-bottom: 12px; }
.check--quiet { justify-content: center; margin: 10px 0 0; }
.nowrap-sm { white-space: nowrap; }
@media (max-width: 380px) { .nowrap-sm { white-space: normal; } }
/* Who runs it, after the description (settings → על המנחה). */
.hostcard { display: flex; gap: 14px; align-items: flex-start; margin: 22px 0;
  padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; min-width: 0; }
.hostcard__img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; }
.hostcard__text { min-width: 0; }
.hostcard__name { margin: 0 0 4px; font-weight: 700; }
.hostcard__line { margin: 0 0 4px; }
.hostcard__line--quiet { font-size: 14px; color: var(--muted); }
.ehero__line { display: block; }
.choicefold > summary { list-style: none; }
.choicefold > summary::-webkit-details-marker { display: none; }
/* A link from a YouTube description behind the gate, /g/<code>
   (core/gate_links.py): the community first, then on to the link. */
.gatelink h1 { margin-bottom: 4px; }
.gatelink__yes { margin: 4px 0 12px; font-size: 14px; }
.gatelink__go { margin: 28px 0 0; padding: 20px 0 0; border-top: 1px solid var(--border); }
.gatelist { margin: 0; padding: 0; list-style: none; }
.gatelist li { padding: 10px 0; border-top: 1px solid var(--border); }
.gatelist li:first-child { border-top: 0; }
.gatelist .tiles { margin-top: 8px; }

/* A sign-up page in sections (2026-10-18, the landing-page review, Omri:
   "I'm not happy with the structure"). Only `.public--signup`: a show's
   shop and the thank-you screens look as they did.
   - The headings and the top line take `--heading` / `--eyebrow`
     (settings → צבע הכותרות), so the brand colour is left to the buttons:
     on business the ochre was also the date line, the quote edges and the
     price, and the button stopped standing out.
   - Each part is a `.sec` with air and a hairline above it; `.sec--band`
     reaches the card's edges in a faint tint of the heading colour, so a
     phone's long page reads as parts, not one block.
   - The price, the guarantee and the form are one `.pricebox`. */
.public--signup .frame__body { --frame-pad: 24px; }
@media (min-width: 700px) { .public--signup .frame__body { --frame-pad: 48px; } }
.public--signup h1, .public--signup .ehero__title { color: var(--heading, var(--ink)); }
.public--signup .ehero__eyebrow { color: var(--eyebrow, var(--brand-link)); }
.public--signup .sec { margin: 0; padding: 28px 0; border-top: 1px solid var(--border); }
.public--signup .sec--band { margin-inline: calc(-1 * var(--frame-pad)); padding: 30px var(--frame-pad);
  border-top: 0; background: var(--inset, var(--bg));
  background: color-mix(in srgb, var(--heading, var(--ink)) 5%, var(--card)); }
.public--signup .sec--band + .sec { border-top: 0; }
.public--signup .sec__title, .public--signup .proof__title, .public--signup .faq h2 {
  margin: 0 0 16px; font-size: 21px; line-height: 1.3; text-align: center;
  text-wrap: balance; color: var(--heading, var(--ink)); }
.public--signup .desc h2, .public--signup .desc h3 { color: var(--heading, var(--ink)); }
.public--signup .sec--desc .desc { margin: 0; }
.public--signup .offer__stack { margin: 0; }
.public--signup .offer__stack li { margin: 0 0 8px; }
/* Quotes: a card each, no brand-coloured edge. */
.public--signup .proof__quote { border: 1px solid var(--border); border-inline-start-width: 1px;
  background: var(--card); padding: 14px 16px; }
.public--signup .proof__quote cite { display: block; margin-top: 2px; }
/* The host, in a band: no box of its own inside it. */
.public--signup .sec--band .hostcard { margin: 0; padding: 0; border: 0; }
.public--signup .hostcard__img { width: 72px; height: 72px; }
.public--signup .hostcard__name { font-size: 19px; color: var(--heading, var(--ink)); }
/* The price box. */
.pricebox { margin: 28px 0 8px; padding: 20px; border: 2px solid var(--heading, var(--ink));
  border-radius: 16px; background: var(--card); }
.pricebox .offer { margin: 0 0 18px; }
.pricebox .offer__price { margin: 0 0 6px; }
.pricebox .offer__price b { font-size: 34px; color: var(--heading, var(--brand-link)); }
.pricebox .offer__guarantee { border: 0; background: var(--inset, var(--bg));
  background: color-mix(in srgb, var(--heading, var(--ink)) 6%, var(--card)); }
.pricebox form { margin: 0; }
@media (max-width: 400px) { .pricebox { padding: 16px; } }
.public--signup .faq.sec--band { margin-top: 28px; }
/* A band that ends the page reaches the card's bottom edge too. */
.public--signup .sec--band:last-child { margin-bottom: calc(-1 * var(--frame-pad)); }
@media (min-width: 700px) { .public--signup .sec--band:last-child { margin-bottom: -40px; } }
/* The picture under a sign-up page's title (the event's cover). */
.ehero__shot { display: block; width: 100%; max-width: 100%; aspect-ratio: 16 / 9;
  object-fit: cover; border-radius: 14px; margin: 0 0 18px; }
/* With a flyer the picture is a link to it: a hand on hover, nothing else. */
.ehero__shotlink { display: block; cursor: zoom-in; border-radius: 14px; }
/* "מכירים את זה?" (core/page_parts.py): a white line per pain on the band,
   then the sentence that turns to the answer. */
.pain__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pain__list li { background: var(--card); border-radius: 10px; padding: 10px 14px;
  border: 1px solid var(--border); }
.pain__answer { margin: 14px 0 0; text-align: center; font-weight: 700; font-size: 17px;
  color: var(--heading, var(--ink)); text-wrap: balance; }
/* What happens in the session: the time, then the step. */
.agenda__list { list-style: none; margin: 0; padding: 0; }
.agenda__list li { display: flex; gap: 14px; align-items: baseline; padding: 10px 0;
  border-bottom: 1px dashed var(--border); min-width: 0; }
.agenda__list li:last-child { border-bottom: 0; }
.agenda__time { flex: none; min-width: 3.2em; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--heading, var(--ink)); }
.agenda__what { min-width: 0; }
/* An intensive's programme and the boxes that pick its workshops
   (core/intensive.py, 2026-10-23). */
.programme__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.programme__item { background: var(--inset, var(--bg)); border-radius: 12px;
  padding: 14px 16px; min-width: 0; }
.programme__when { margin: 0 0 4px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--brand-link); }
.programme__name { margin: 0; font-size: 19px; color: var(--heading, var(--ink)); }
.programme__host { margin: 4px 0 0; color: var(--muted); }
.programme__desc { margin-top: 8px; }
.programme__prices { margin: 14px 0 0; text-align: center; }
.unitpick { border: 0; margin: 0 0 14px; padding: 0; min-width: 0; }
.unitpick__item { align-items: flex-start; padding: 10px 12px; margin: 6px 0;
  border: 1px solid var(--border); border-radius: 10px; background: var(--card); }
.unitpick__item input { margin-top: 4px; flex: none; }
.unitpick__item--off { opacity: .6; cursor: default; }
.unitpick__full { color: var(--err, #b3261e); font-weight: 700; }
.unitpick__left { color: var(--warn, #8f4e00); font-weight: 700; }
.unitpick__price { margin: 10px 0 0; font-size: 17px; text-align: center; }
/* The date and the hour (2026-10-18, Omri: "very small and easy to miss"):
   the second line of the top lines, big, bold and in a tinted box. */
.ehero__when { display: table; margin: 0 auto 18px; padding: 8px 14px;
  border-radius: 12px; font-size: 18px; line-height: 1.45; font-weight: 700;
  color: var(--heading, var(--ink)); background: var(--inset, var(--bg));
  background: color-mix(in srgb, var(--heading, var(--ink)) 8%, var(--card)); }
@media (max-width: 380px) { .ehero__when { font-size: 16.5px; padding: 7px 10px; } }
/* The introduction at the start and when to join after it (core/intro.py):
   one quiet line right under the date box, which it moves up against. */
.ehero__intro { max-width: 34em; margin: -8px auto 18px; text-align: center;
  font-size: 15px; line-height: 1.55; color: var(--muted); text-wrap: balance; }
/* A line for the day, a line for the hour: no "·" left hanging. */
.ehero__whenline { display: block; white-space: nowrap; }

/* ---------------------------------------------- "✨ בשיחה" (2026-10-19)
   The chat beside its draft card (web/quick.py). Two columns from 1000px,
   the chat first in reading order (the right side in RTL); one column under
   that, the chat above the card. */
.quick { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1000px) { .quick { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.quick__chat h1 { margin-bottom: 6px; }
.quick__turns { list-style: none; margin: 16px 0; padding: 0; display: flex;
  flex-direction: column; gap: 10px; max-height: 60vh; overflow-y: auto; }
.quick__turn { max-width: 88%; padding: 10px 14px; border-radius: 14px;
  line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.quick__turn--me { align-self: flex-start; background: var(--brand); color: var(--brand-ink);
  border-end-start-radius: 4px; }
.quick__turn--ai { align-self: flex-end; background: var(--inset); color: var(--ink);
  border: 1px solid var(--border); border-end-end-radius: 4px; }
.quick__turn--hello { color: var(--muted); }
.quick__label { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; }
.quick__input { min-height: 84px; resize: vertical; }
/* Which model answered, under the answer (web/quick.py `by`). */
.quick__by { display: block; margin-top: 6px; font-size: 12.5px; color: var(--muted); }
.quick__pick { display: flex; gap: 12px; flex-wrap: wrap; margin: 4px 0 2px; }
.quick__pickfield { display: flex; flex-direction: column; gap: 4px; flex: 1 1 180px;
  min-width: 0; font-size: 14px; color: var(--muted); }
.quick__pickfield .input { width: 100%; }
.quick__pickhint { margin: 4px 0 12px; }
.quick__send { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.quick__note { background: var(--inset); border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 12px; margin: 8px 0 12px; }
.quick__facts { display: grid; grid-template-columns: max-content minmax(0, 1fr);
  gap: 6px 14px; margin: 12px 0; }
.quick__facts dt { color: var(--muted); }
.quick__facts dd { margin: 0; overflow-wrap: anywhere; }
.quick__missing-word { color: var(--err); font-weight: 600; }
.quick__desc { background: var(--inset); border-radius: 8px; padding: 4px 14px; }
.quick__h { font-size: 15px; margin: 18px 0 6px; }
.quick__qs { margin: 0 0 8px; padding-inline-start: 22px; }
.quick__qs li { margin: 3px 0; }
.quick__post { white-space: pre-wrap; background: var(--inset); border-radius: 8px;
  padding: 10px 14px; overflow-wrap: anywhere; }
.quick__similar { background: var(--warn-bg); color: var(--warn); border-radius: 8px;
  padding: 10px 14px; margin: 14px 0; }
.quick__similar ul { margin: 4px 0 0; padding-inline-start: 20px; }
.quick__problems { color: var(--err); margin: 12px 0; padding-inline-start: 20px; }
.quick__create { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.quick__after { margin-top: 8px; }
.quick__card--empty p { margin: 0; }

/* The dashboard's "ביומן ולא באפליקציה" (core/calendar_check.py). */
.calcard__row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 0; border-top: 1px solid var(--border); }
.calcard__row:first-of-type { border-top: 0; }
.calcard__main { flex: 1 1 260px; min-width: 0; }
.calcard__title { font-weight: 600; overflow-wrap: anywhere; }
.calcard__meta { color: var(--muted); font-size: 14px; overflow-wrap: anywhere; }
.calcard__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.calcard__actions form { margin: 0; }
.calcard__foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 12px; color: var(--muted); font-size: 14px; }
.calcard__foot form { margin: 0; }
.quick__todraft { margin-inline-start: auto; }
@media (min-width: 1000px) { .quick__todraft { display: none; } }

/* A survey of its own, `/p/<code>` (core/surveys.py, 2026-10-20). The page
   is the live survey's card; these are its two extra steps. */
.svintro { margin: -2px 0 22px; color: var(--muted); font-size: 15.5px;
  white-space: pre-line; }
.svwho__saved { font-weight: 600; }
.svwho__skip { margin: 14px 0 0; text-align: center; }
/* Who is answering, named by the newsletter's link (stage 2). On --inset:
   a box inside the card. */
.svreader { margin: 0 0 22px; padding: 10px 14px; border-radius: 12px;
  background: var(--inset); border: 1px solid var(--border); font-size: 15px; }
/* The results page's two buttons wrap on a phone: in one .actionrow they
   widened the page to 398px at 375. */
.svlink__row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
/* A survey's link per place (core/survey_traffic.py). */
.svplaces { display: grid; gap: 8px; margin: 12px 0 16px; }
.svplaces__row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.svplaces__name { min-width: 6em; font-weight: 600; }
.svplaces .numlink { max-width: 100%; overflow-wrap: anywhere; }
.svwho__skip a { display: inline-block; padding: 10px 12px; }

/* What a meeting's chat said (core/chat_reactions.py, templates/_chat.html). */
.chatlist { display: grid; gap: 10px; margin: 12px 0; }
.chatmsg {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px 14px; background: var(--card);
}
.chatmsg--question { border-inline-start: 4px solid #8f4e00; }
.chatmsg--other { opacity: .8; }
.chatmsg__head { font-size: 14px; display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: baseline; }
.chatmsg__body { margin: 6px 0 8px; white-space: pre-line; overflow-wrap: anywhere; }
.chatmsg__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.chatmsg__tags:empty { display: none; }
.chatmsg__actions { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-top: 8px; }
.chatmsg__actions form { margin: 0; }
.chatfilters__row { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: end; }
.chatfilters__row .field { flex: 1 1 180px; min-width: 0; margin: 0; }
.chatfilters__row + .chatfilters__row { margin-top: 10px; }
.chatfetch, .chatoff { margin-top: 10px; }

/* The archive (core/archive.py, 2026-10-25): every event that happened, and
   one page per event with its recording and the emails as they went out. */
.archfilters { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: end; }
.archfilters .field { flex: 1 1 200px; min-width: 0; margin: 0; }
.archlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.archrow { background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; padding: 12px 16px; display: grid; gap: 6px; }
.archrow__link { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline;
  color: var(--ink); text-decoration: none; }
.archrow__link:hover .archrow__name { color: var(--brand-link); text-decoration: underline; }
.archrow__date { color: var(--muted); font-size: 13.5px; white-space: nowrap; }
.archrow__name { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.archrow__meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; }
.archvideo { position: relative; aspect-ratio: 16 / 9; border-radius: 12px;
  overflow: hidden; background: #000; margin-bottom: 12px; }
.archvideo iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.archnote { white-space: pre-line; color: var(--muted); }
.archmails { display: grid; gap: 8px; }
.archmail { border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; }
.archmail > summary { cursor: pointer; display: grid; gap: 2px; list-style: none; }
.archmail > summary::-webkit-details-marker { display: none; }
.archmail__label { font-weight: 600; }
.archmail__subject { overflow-wrap: anywhere; }
.archmail__meta { font-size: 13px; }
.archmail__frame { width: 100%; height: 480px; border: 1px solid var(--border);
  border-radius: 8px; margin-top: 10px; background: #fff; }
.archmsgs { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 8px; }
.archmsg { border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; }
.archmsg__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline;
                 justify-content: space-between; font-size: 13px; }
.archmsg__del { margin: 0; }
.archmsg__text { white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 6px; }
.archadd { display: grid; gap: 10px; margin-top: 10px; }
.archquotes { padding-inline-start: 18px; }
.archquotes li + li { margin-top: 6px; }

/* What the admins press (usage.html, core/admin_usage.py, 2026-10-27). */
.usage > summary { cursor: pointer; list-style-position: inside; }
.usage__table { margin-top: 10px; }
.usage__table td { overflow-wrap: anywhere; }
.usage__n { width: 6.5em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.usage__last { width: 11em; }
.usage__never td { color: var(--muted); }
@media (max-width: 600px) { .usage__last { display: none; } }

/* The owner's thank-you video on a show's follow-up page, and its public
   page /tv/<code> (core/thanks_video.py). */
.thanksvid { margin-bottom: 20px; }
.thanksvid h2 { font-size: 17px; margin: 0 0 4px; }
.thanksvid > .field__hint { margin: 0 0 14px; }
.thanksvid__player, .thanksvid__live, .thanksvid__review, .tvpage__player {
  display: block; width: 100%; max-width: 480px; max-height: 70vh;
  margin: 0 auto; background: #111; border-radius: 12px; }
.thanksvid__live { transform: scaleX(-1); }
.thanksvid__state { text-align: center; margin: 10px 0 14px; color: var(--ok, #137333); font-weight: 600; }
.thanksvid__caption { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin-bottom: 14px; }
.thanksvid__caption .field { flex: 1 1 260px; margin: 0; }
.thanksvid__start { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.thanksvid__big { font-size: 18px; padding: 14px 26px; min-height: 52px; }
.thanksvid__file { position: relative; cursor: pointer; }
/* The native picker says "Choose File" in the browser's language; the
   label is the button. Clipped in place, never pushed off the page. */
.thanksvid__file input { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; }
.thanksvid__file:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; }
.thanksvid__stage { position: relative; max-width: 480px; margin: 0 auto 10px; }
.thanksvid__count { position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; font-size: 96px; font-weight: 700; color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,.6); }
.thanksvid__rectime { position: absolute; top: 10px; inset-inline-start: 10px; padding: 4px 10px;
  border-radius: 999px; background: rgba(200,0,0,.85); color: #fff; font-weight: 600;
  font-variant-numeric: tabular-nums; direction: ltr; }
.thanksvid__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; }
.thanksvid__progress { display: block; width: 100%; max-width: 480px; margin: 14px auto 0; }
.thanksvid__status { text-align: center; min-height: 1.4em; margin: 10px 0 0; }
.thanksvid__status--err { color: var(--err, #b3261e); }
.thanksvid__delete { text-align: center; margin-top: 14px; }
.tvpage { text-align: center; }
.tvpage__kicker { color: var(--muted); margin: 0 0 6px; }
.tvpage__title { font-size: 24px; margin: 0 0 16px; }
.tvpage__next { margin: 20px 0 0; }

/* "Came without a ticket?" /came/<slug> (2026-10-27): one short form. */
.came__kicker { margin: 0 0 6px; color: var(--brand-link); font-weight: 700; font-size: 14px; }
.came__form fieldset { border: 0; padding: 0; margin: 0 0 16px; min-width: 0; }
.came__form legend { font-weight: 700; margin-bottom: 8px; padding: 0; }
.came__kind { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; }
.came__kind .input { flex: 0 0 72px; width: 72px; text-align: center; }
.came__form .optcard { margin: 0 0 8px; }
.came__form .check { margin: 6px 0 16px; }
/* The orders card's "came without a ticket" link. */
.camelink { margin: 16px 0; padding: 14px 16px; border-radius: 12px; background: var(--inset, #f4f5f7); }
.camelink p { margin: 0 0 8px; }
.camelink .btnrow { flex-wrap: wrap; align-items: center; }
.camelink .input { flex: 1 1 220px; min-width: 0; }

/* A recurring workshop's growing guide (templates/workshop_guide.html). */
.guidelinks { list-style: none; margin: 12px 0; padding: 0; }
.guidelinks li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 8px 0; border-top: 1px solid var(--line); }
.guidelinks li a { overflow-wrap: anywhere; min-width: 0; }
.guidelinks form { margin: 0; }
.guideupdate { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 12px; }
.guideupdate__item { display: grid; gap: 6px; margin-bottom: 10px; }
.guideupdate .check { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.guideupdate .check .muted { overflow-wrap: anywhere; min-width: 0; }
.guidelinks .input--sm, .guideupdate .input--sm { width: auto; flex: 1 1 180px; max-width: 280px; }

/* Sharing an event's registrants (core/viewers.py, 2026-10-31): the list on
   the נרשמים tab's card and on the viewer's own pages. */
.viewer__list { list-style: none; padding: 0; margin: 8px 0 16px; }
.viewer__list li { padding: 8px 0; border-bottom: 1px solid var(--line, #e3e3e3); overflow-wrap: anywhere; }

/* `/next`, every coming event on one page (web/shows_api.py, 2026-11-01). */
.next__title { margin-bottom: 4px; }
.next__org { margin-top: 0; margin-bottom: 8px; }
.next__item { display: flex; gap: 16px; align-items: flex-start;
  padding: 20px 0; border-top: 1px solid var(--border); }
.next__img { width: 140px; height: 140px; object-fit: cover; border-radius: 10px; flex: none; }
.next__body { flex: 1; min-width: 0; }
.next__when { margin: 0 0 4px; font-size: 14px; color: var(--brand-link, var(--brand)); font-weight: 600; }
.next__name { margin: 0 0 6px; font-size: 20px; }
.next__headline { margin: 0 0 8px; }
.next__body .btn { margin-top: 12px; width: 100%; }
.next__empty { padding: 20px 0; border-top: 1px solid var(--border); }
.next__community { margin-top: 8px; padding-top: 20px; border-top: 1px solid var(--border); }
.next__community .btn { margin-top: 0; }
@media (max-width: 520px) {
  .next__item { flex-direction: column; align-items: stretch; }
  .next__img { width: 100%; height: auto; aspect-ratio: 4 / 5; }
}

/* ------------------------------------------------------------------ /videos
   Every video on the channel, searchable (core/video_library.py, 2026-11-01).
   Rubik for the titles, Heebo for the text, as the house rule says; the page
   is wider than the other public pages so two cards fit side by side. */
.wrap--videos { max-width: 1040px; }
.vlib { font-family: Heebo, Arial, sans-serif; }
.vlib h1, .vcard__title { font-family: Rubik, Arial, sans-serif; }
.vlib__head { text-align: center; margin-bottom: 18px; }
.vlib__head h1 { margin: 0 0 6px; font-size: clamp(24px, 4.5vw, 32px); color: var(--heading, var(--ink)); }
.vlib__head p { margin: 0; }
/* The label is for a screen reader; the placeholder says it on screen. */
.vlib__label { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.vlib__search { position: relative; margin: 0 auto 14px; max-width: 640px; }
.vlib__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 10px; }
.vchip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--card); color: var(--ink);
  font-size: 14px; text-decoration: none; line-height: 1.2; }
.vchip:hover { border-color: var(--brand); }
.vchip.is-on { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.vchip__n { font-size: 12px; opacity: .7; font-variant-numeric: tabular-nums; }
.vlib__count { text-align: center; min-height: 1.4em; margin: 4px 0 12px; font-size: 14px; }
.vlib__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.vcard { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 14px;
  background: var(--card); overflow: hidden; min-width: 0; }
.vcard[hidden] { display: none; }
.vcard__thumb { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--inset, #eee); }
.vcard__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vcard__len { position: absolute; bottom: 8px; left: 8px; padding: 1px 6px; border-radius: 4px;
  background: rgba(0, 0, 0, .78); color: #fff; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.vcard__body { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 14px; flex: 1; }
.vcard__title { margin: 0; font-size: 17px; line-height: 1.35; }
.vcard__title a { color: var(--ink); text-decoration: none; }
.vcard__title a:hover { color: var(--brand-link); text-decoration: underline; }
.vcard__meta { margin: 0; font-size: 13px; }
.vcard__sum { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vcard__chapters { list-style: none; margin: 2px 0 0; padding: 0; font-size: 14px; }
.vcard__chapters li { margin: 3px 0; }
.vcard__chapters li[hidden] { display: none; }
.vcard__chapters a { color: var(--brand-link); }
.vcard__said { list-style: none; margin: 2px 0 0; padding: 0; font-size: 14px; }
.vcard__said[hidden] { display: none; }
.vcard__said li { margin: 3px 0; }
.vcard__said::before { content: attr(data-label); display: block; font-size: 13px; color: var(--muted); }
.vcard__said a { color: var(--brand-link); }
/* The few transcript words around the hit (core/video_library.py _phrase). */
.vcard__saidq { display: block; font-size: 13px; line-height: 1.5; color: var(--muted);
  margin-top: 1px; overflow-wrap: anywhere; }
/* Under a chosen topic: what this video says about it (core/video_notes.py). */
.vcard__sum[hidden], .vcard__topic[hidden] { display: none; }
.vcard__topic { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px;
  border-radius: 10px; background: var(--inset, #f4f6f8); }
.vcard__topicsum { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink); }
.vcard__moments { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.vcard__moments li { margin: 3px 0; }
.vcard__moments a { color: var(--brand-link); }
.vcard__actions { margin: auto 0 0; padding-top: 6px; display: flex; flex-wrap: wrap; gap: 8px; }
/* The length row (settings videos_lengths, 2026-11-08): quieter than the topics. */
.vlib__chips--len { gap: 6px; margin-bottom: 12px; }
.vchip--len { padding: 5px 12px; font-size: 13.5px; background: transparent; }
.vchip--len.is-on { background: var(--inset, #eef1f4); border-color: var(--brand); color: var(--ink); font-weight: 600; }
/* An old video (settings videos_old_months): said, not hidden. */
.vcard__old { color: var(--muted); }
/* Every chapter of a long video, folded (core/video_chapters.py). */
.vcard__allch { font-size: 14px; }
.vcard__allch summary { cursor: pointer; color: var(--brand-link); padding: 2px 0; }
.vcard__allch ol { list-style: none; margin: 4px 0 0; padding: 0; }
.vcard__allch li { margin: 3px 0; }
.vcard__allch a { color: var(--brand-link); }
.vlib__empty { text-align: center; padding: 28px 8px; }
.vlib .groupbox { max-width: 560px; margin-inline: auto; margin-top: 32px; }

/* ── a learning page (core/learning.py): one link, stations, a video each ── */
.learnpage .learn { text-align: start; }
.learn h1 { font-size: 26px; margin: 0 0 8px; }
.learn h2 { font-size: 18px; margin: 0 0 10px; }
.learn h3 { font-size: 15px; margin: 18px 0 6px; color: var(--muted); font-weight: 600; }
.learn .flash--ok { background: #e6f4ea; color: #137333; }
.learn__kicker { color: var(--brand-link); font-weight: 600; font-size: 14px; margin: 0 0 4px; }
.learn__intro { color: var(--muted); margin: 0 0 18px; white-space: pre-line; }
.learn__top { display: flex; align-items: flex-start; gap: 20px; }
.learn__topmain { flex: 1; min-width: 0; }
.learn__qr { flex: none; width: 140px; margin: 0 0 16px; text-align: center; }
.learn__qr img { display: block; width: 140px; height: 140px; }
.learn__qr figcaption { margin-top: 4px; font-size: 13px; line-height: 1.4; color: var(--muted); }
/* A person on a phone has nothing to scan. */
@media (max-width: 560px) { .learn__qr { display: none; } }
.learn__banner { display: flex; align-items: center; gap: 12px; margin: 0 0 22px; padding: 14px 16px;
  background: var(--inset); border: 2px solid var(--brand); border-radius: 12px;
  color: var(--ink); text-decoration: none; }
.learn__banner:hover { box-shadow: 0 0 0 2px var(--brand); }
.learn__banner small { color: var(--muted); font-size: 14px; }
.learn__bannericon { font-size: 28px; line-height: 1; }
.learn__tools { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.learn__ticks { list-style: none; margin: 0; padding: 0; }
.learn__ticks li { margin-bottom: 4px; }
.learn__ticks label { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; cursor: pointer; }
.learn__ticks input { flex: none; width: 22px; height: 22px; margin-top: 2px; accent-color: var(--brand); }
.learn__ticks input:checked + span { color: var(--muted); text-decoration: line-through; }
@media print {
  .learn__noprint { display: none !important; }
  .learn__sec { break-inside: avoid; }
  .learn__ticks input { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
.learn__back { position: sticky; top: 0; z-index: 3; margin: 0 0 14px; padding: 8px 12px;
  background: var(--warn-bg); color: var(--warn); border-radius: 8px; font-size: 15px; text-align: center; }
.learn__me { display: flex; justify-content: space-between; align-items: center; gap: 10px;
  font-size: 15px; color: var(--muted); margin-bottom: 10px; }
.learn__link, .learn__skip { background: none; border: 0; padding: 0; font: inherit; font-size: 14px;
  color: var(--brand-link); text-decoration: underline; cursor: pointer; }
.learn__skip { display: block; margin: 14px auto 0; }
.learn__route { margin: 8px 0 24px; padding: 16px; background: var(--inset); border-radius: 12px; }
.learn__again { font-size: 14px; color: var(--brand-link); }
.learn__route .learn__again { display: block; margin-top: 10px; }
.learn__list { list-style: none; margin: 0; padding: 0; }
.learn__row { margin: 0 0 8px; }
.learn__row a { display: flex; align-items: flex-start; gap: 12px; padding: 12px; color: var(--ink);
  text-decoration: none; background: var(--card); border: 1px solid var(--border); border-radius: 10px; }
.learn__row a:hover, .learn__row a:focus-visible { border-color: var(--brand-link); }
.learn__row--done a { background: var(--inset); }
.learn__mark { flex: none; width: 26px; height: 26px; line-height: 26px; text-align: center;
  border-radius: 50%; background: var(--inset); color: var(--brand-link); font-weight: 700; font-size: 14px; }
.learn__route .learn__mark { background: var(--card); }
.learn__row--done .learn__mark { background: var(--ok); color: #fff; }
.learn__rowtext { flex: 1; min-width: 0; }
.learn__rowtext b { display: block; }
.learn__rowabout { display: block; color: var(--muted); font-size: 14px; }
.learn__mins { flex: none; color: var(--muted); font-size: 13px; white-space: nowrap; }
.learn__up { display: inline-block; margin-bottom: 12px; font-size: 14px; color: var(--brand-link); }
.learn__video { position: relative; aspect-ratio: 16 / 9; margin: 0 0 20px; border-radius: 10px;
  overflow: hidden; background: #000; }
.learn__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.learn__sec { margin: 0 0 22px; }
.learn__steps { margin: 0; padding-inline-start: 22px; }
.learn__steps li { margin-bottom: 6px; }
.learn__prompthead { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.learn__prompthead h2 { margin: 0; }
.learn__prompthead--fold { margin-top: 10px; font-weight: 600; }
.learn__prompt, .learn__pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.learn__prompt { padding: 12px 14px; background: var(--inset); border: 1px solid var(--border);
  border-radius: 10px; font-size: 15px; }
.learn__more { margin: 0; padding-inline-start: 20px; }
.learn__more a { color: var(--brand-link); }
.learn__fold { margin: 0 0 18px; padding: 10px 14px; background: var(--inset); border-radius: 10px; }
.learn__fold summary { cursor: pointer; font-weight: 600; }
.learn__fold form, .learn__fold p { margin-top: 10px; }
.learn__fold .btn { margin-top: 8px; }
.learn__product { padding-top: 18px; border-top: 1px solid var(--border); }
.learn__drop { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px;
  border: 2px dashed var(--border); border-radius: 10px; }
.learn__drop.is-over { border-color: var(--brand-link); background: var(--inset); }
.learn__drop input { min-width: 0; max-width: 100%; }
.learn__drop .hint { flex-basis: 100%; margin: 0; }
.learn__shotnow img, .learn__shotview canvas { display: block; max-width: 100%; height: auto;
  border: 1px solid var(--border); border-radius: 8px; }
.learn__shotnow { margin: 0 0 10px; }
.learn__shotnow img { max-height: 280px; margin-bottom: 6px; }
.learn__shotnew { margin-top: 10px; }
.learn__shotview { position: relative; display: inline-block; max-width: 100%; overflow: hidden; line-height: 0; }
.learn__shotview canvas { cursor: crosshair; touch-action: none; }
.learn__crop { position: absolute; border: 2px dashed #fff; box-shadow: 0 0 0 9999px rgba(0, 0, 0, .4); pointer-events: none; }
.learn__shotacts { display: flex; gap: 16px; margin: 4px 0 0; }
.learn__next { margin-top: 8px; text-align: center; }
.learn__donemark { color: var(--ok); font-weight: 600; margin: 0 0 4px; }

/* its projected screen: alone on the wall, big enough for the back row. */
.learnshow { margin: 0; min-height: 100vh; background: #14181f; color: #f4f5f7; font-family: Rubik, Arial, sans-serif; }
.learnshow__bar { display: flex; gap: 18px; justify-content: center; padding: 12px; font-size: 15px; }
.learnshow__bar a { color: #aab2bf; }
.learnshow__bar a[aria-current] { color: #fff; font-weight: 700; }
.learnshow__qr { text-align: center; padding: 8px 20px 24px; }
.learnshow__qr h1 { font-size: clamp(26px, 4vw, 46px); margin: 0 0 16px; }
.learnshow__qr img { width: min(62vh, 80vw); border-radius: 16px; background: #fff; }
.learnshow__qr p { font-size: clamp(20px, 3vw, 34px); margin: 14px 0 0; overflow-wrap: anywhere; }
.learnshow__questions { max-width: 1100px; margin: 0 auto; padding: 8px 24px 32px; }
.learnshow__questions h1 { font-size: clamp(26px, 4vw, 46px); margin: 0 0 18px; text-align: center; }
.learnshow__questions section { padding: 12px 0; border-top: 1px solid #39414e; }
.learnshow__questions h2 { font-size: clamp(20px, 2.8vw, 32px); margin: 0 0 8px; }
.learnshow__questions ul { display: flex; flex-wrap: wrap; gap: 8px 12px; margin: 0; padding: 0; list-style: none; }
.learnshow__questions li { padding: 6px 14px; border: 1px solid #aab2bf; border-radius: 10px; font-size: clamp(16px, 2vw, 24px); }
.learnshow__slides { max-width: 1000px; margin: 0 auto; padding: 4vh 24px; }
.learnshow__slides article[hidden] { display: none; }
.learnshow__kicker { color: #aab2bf; font-size: clamp(16px, 2vw, 24px); margin: 0 0 8px; }
.learnshow__slides h1 { font-size: clamp(30px, 5vw, 60px); margin: 0 0 22px; }
.learnshow__shot { display: block; max-width: 100%; max-height: 62vh; margin: 0 auto 18px; border-radius: 10px; }
.learnshow__note { font-size: clamp(20px, 3vw, 36px); line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }
.learnshow__open { display: inline-block; margin-top: 14px; padding: 12px 22px; border-radius: 12px;
  background: #fff; color: #14181f; font-weight: 700; text-decoration: none; }
.learnshow__nav { display: flex; justify-content: center; align-items: center; gap: 20px; margin-top: 5vh; font-size: 18px; }
.learnshow__nav button { width: 54px; height: 54px; border-radius: 50%; border: 1px solid #aab2bf;
  background: none; color: #fff; font-size: 24px; cursor: pointer; }

/* The owner's message or thumbs check on a learning page: a corner, never in the way. */
.learn__pulse { position: fixed; bottom: 16px; inset-inline-start: 16px; z-index: 50; width: min(340px, calc(100vw - 32px));
  padding: 14px 16px; background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .18); }
.learn__pulse-body { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.learn__pulse-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
@media print { .learn__pulse { display: none; } }

/* The winners of a giveaway (core/giveaway.py, 2026-11-09). */
.gwwinners { display: grid; gap: 12px; margin-bottom: 20px; }
.gwwin { display: flex; gap: 14px; align-items: flex-start; padding: 16px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); }
.gwwin__medal { font-size: 34px; line-height: 1; }
.gwwin__who { min-width: 0; overflow-wrap: anywhere; }
.gwwin__who p { margin: 0 0 4px; }
.gwwin__name { font-size: 24px; font-weight: 700; line-height: 1.25; }
.gwwin__prize { font-weight: 600; }
.gwrelease { margin-bottom: 20px; }
.gwplace { margin-bottom: 8px; }
.gwnames { margin: 4px 0 0; }
#gwform fieldset { min-width: 0; border: 0; padding: 0; margin: 0 0 16px; }
#gwform .check { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
#gwform select { max-width: 100%; }
#giveaway .tplbar__row { flex-wrap: wrap; }
#giveaway .tplbar__row .field { flex: 1 1 100%; min-width: 0; }
#giveaway .field__label { white-space: normal; overflow-wrap: anywhere; }
#giveaway p.actionrow { flex-wrap: wrap; white-space: normal; }

/* A press on a running number copies it (copy_no.js). */
.chip--id, .page-head__sessno { cursor: pointer; }