/* What every page a GUEST opens has in common.
 *
 * ---------------------------------------------------------------------------
 * WHY THIS FILE EXISTS, AND WHY IT IS CONCATENATED RATHER THAN LINKED
 * ---------------------------------------------------------------------------
 *
 * Three pages are opened by somebody who was sent a link — the RSVP page, the
 * enrolment page and the gallery. They are separate apps with separate
 * documents, and they carried three byte-identical copies of the token block,
 * the nine themes, and eleven shared components. Three copies of one idea is
 * three places to change and two places to forget, and it had already started:
 * `.cta` had drifted to `margin-top: var(--gap-xl)` on one page and `8px` on the other
 * two, `.small` existed only in the gallery, and an input's fill was `--bg` on
 * one page and `--surface` on another.
 *
 * It is NOT a second stylesheet link. scripts/build.sh concatenates this file
 * in front of each app's own rules, so every page still makes exactly ONE
 * stylesheet request. That constraint is deliberate and is the reason these
 * three apps ship no shared modules at all: each is opened once, usually on a
 * phone, often on a venue's wifi, and a second round-trip before first paint
 * costs more than the bytes it saves. A single source of truth was worth
 * having; a second request was not.
 *
 * So: the cascade order is this file, then the app's. An app that genuinely
 * needs to differ overrides below — the gallery widens `.sheet` because it
 * holds a photo grid rather than a form, and says so where it does it.
 *
 * ---------------------------------------------------------------------------
 * THE SCALE
 * ---------------------------------------------------------------------------
 *
 * Two radii, because there turned out to be exactly two things: a control and
 * a card. Four spacing steps. The names say what they are for rather than how
 * big they are, so a control staying a control survives somebody deciding that
 * 10px was wrong.
 */

:root {
  color-scheme: light;
  --bg: #f5efe4;
  --surface: #fffdf9;
  --ink: #241f18;
  --ink-dim: #5d554a;
  --line: #ddd2bf;
  --accent: #a9843f;
  --accent-ink: #fff;
  --danger: #9a3412;

  /* Geometry. Both were already in use and in agreement across all three
     pages before this file existed — 10px on every input and toggle, 12px on
     every card and primary button — so this names what was there rather than
     imposing something new. The strays it replaces were an 8px and a 6px in
     the gallery's lightbox. */
  --radius-control: 10px;
  --radius-card: 12px;

  /* Rhythm. The SAME six steps, under the same names, as the Control Center —
     see apps/admin/styles.css. Spacing is the one part of this vocabulary
     where the values should match as well as the names: these pages and that
     one are read at the same distance, at nearly the same text size, and a
     14px rhythm is 14px on both. Radii differ between surfaces on purpose; a
     gap has no reason to.

     --gap-lg is the one that recurs here: the space under a field, between
     cards, and above the primary button. */
  --gap-xs: 4px;
  --gap-sm: 6px;
  --gap-md: 10px;
  --gap-lg: 14px;
  --gap-xl: 20px;
  --gap-2xl: 24px;

  /* The smallest control that works on a phone held one-handed. 14px of
     vertical padding on 17px/1.6 text clears it; this is here so the number
     has a name and a reason rather than being rediscovered per page. */
  --tap: 44px;
}

/* The ten themes the Control Center offers. ONE copy, for all three guest
   pages, so an event looks like itself wherever a guest meets it — which is
   what three copies were for and could not guarantee. */
:root[data-theme="midnight"] {
  color-scheme: dark;
  --bg: #131d33; --surface: #1b2742; --ink: #f6f1e7; --ink-dim: #b9b0a0;
  --line: #2f3d5e; --accent: #d8b26a; --accent-ink: #0a1020;
}
:root[data-theme="emerald"] {
  color-scheme: dark;
  --bg: #0d3a2c; --surface: #12513e; --ink: #f6f1e7; --ink-dim: #b3c6bd;
  --line: #1e5443; --accent: #e0c07c; --accent-ink: #06231c;
}
:root[data-theme="noir"] {
  color-scheme: dark;
  --bg: #16161a; --surface: #1e1e24; --ink: #f6f1e7; --ink-dim: #b0aca6;
  --line: #33333c; --accent: #cfd2d6; --accent-ink: #08080a;
}
:root[data-theme="forest"] {
  color-scheme: dark;
  --bg: #1b4028; --surface: #24542f; --ink: #f6f1e7; --ink-dim: #bcc9bb;
  --line: #2d5f3b; --accent: #cfa85f; --accent-ink: #0f2416;
}
:root[data-theme="sage"] {
  --bg: #efece4; --surface: #fbf9f4; --ink: #2c332e; --ink-dim: #5c665f;
  --line: #d9d3c7; --accent: #566b5e; --accent-ink: #fff;
}
:root[data-theme="plum"] {
  color-scheme: dark;
  --bg: #2f1b4a; --surface: #3b2359; --ink: #f6f1e7; --ink-dim: #c0b3cf;
  --line: #482d6b; --accent: #d9bd82; --accent-ink: #1a0f2b;
}
:root[data-theme="saffron"] {
  --bg: #fdf4dc; --surface: #fffdf5; --ink: #3a2e12; --ink-dim: #6b5a2e;
  --line: #e6d3a4; --accent: #8a5a1c; --accent-ink: #fff;
}
:root[data-theme="blush"] {
  --bg: #f7ecec; --surface: #fffafa; --ink: #3a2020; --ink-dim: #6d5050;
  --line: #e6cfcb; --accent: #b07a63; --accent-ink: #fff;
}
/* Dark, like plum and noir. --accent-ink is the background rather than the
   white the light themes use, because the accent here is gold and the accent
   is what a guest taps: white on #d8a657 measures 2.21:1, the dark ink 8.24:1. */
:root[data-theme="burgundy"] {
  color-scheme: dark;
  --bg: #2d0812; --surface: #45101e; --ink: #f6f1e7; --ink-dim: #c9aeb3;
  --line: #5e1328; --accent: #d8a657; --accent-ink: #2d0812;
}

/* --- The page ------------------------------------------------------------ */

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* A phone in a venue is often held one-handed; keep content clear of the
     notch and the home indicator. */
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* A form's width. The gallery overrides it — a photo grid is not a form. */
.sheet { max-width: 34rem; margin: 0 auto; padding: 28px 22px 64px; }

/* --- Loading, and then whatever happened --------------------------------- */

/* The one loading state these pages have. They fetch once, at open, and show
   this until the answer arrives; there is no second spinner anywhere, because
   there is no second fetch that blocks the page. */
.boot { color: var(--ink-dim); padding: 40px 0; }

/* The one error state. Every one of these pages puts its failures in the same
   place, in the same colour, at the same size: under the thing that failed.
   A page with two ways of reporting a problem teaches a guest to read
   neither. */
.error { color: var(--danger); font-size: 15px; margin-top: var(--gap-lg); }

/* --- Type --------------------------------------------------------------- */

.logo { max-height: 64px; width: auto; display: block; margin: 0 0 20px; }

h1 { font-size: 27px; line-height: 1.2; margin: 0 0 12px; font-weight: 600; }
.kicker {
  margin: 0 0 4px;
  font-size: 13px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.lede { color: var(--ink-dim); margin: 0 0 var(--gap-2xl); }
.muted { color: var(--ink-dim); }
.small { font-size: 14px; }

/* --- Fields ------------------------------------------------------------- */

.field { display: block; margin-bottom: var(--gap-lg); }
.field:last-child { margin-bottom: 0; }
.flabel {
  display: block;
  font-size: 14px;
  color: var(--ink-dim);
  margin-bottom: var(--gap-sm);
}

/* Every text control on every guest page: same height, same radius, same
   fill. The fill was the drift — `--bg` on the RSVP page's inputs and
   `--surface` on the gallery's code box, which made the same control look
   like two different controls between two pages of one event. `--bg` with the
   border doing the work is the one the majority of controls already used, and
   it is the one that still reads as a field inside a `--surface` card. */
.field input[type="text"],
.field input[type="tel"],
.field input[type="email"],
.field input,
.field select {
  width: 100%;
  min-height: var(--tap);
  font: inherit;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  padding: 14px 12px;
}

/* --- Actions ------------------------------------------------------------ */

/* The primary action. One margin-top, where there were two: 18px on the RSVP
   page and 8px on the other two, for no reason either page could state. */
.cta {
  display: block;
  width: 100%;
  min-height: var(--tap);
  padding: 16px;
  font: inherit;
  font-weight: 600;
  color: var(--accent-ink);
  background: var(--accent);
  border: 0;
  border-radius: var(--radius-card);
  cursor: pointer;
  margin-top: var(--gap-lg);
}
.cta:disabled { opacity: .6; cursor: default; }

/* The quiet alternative under it — "I cannot find my name", "skip this". */
.link {
  display: block;
  width: 100%;
  margin-top: var(--gap-xs);
  padding: 12px;
  font: inherit;
  color: var(--ink-dim);
  background: none;
  border: 0;
  text-decoration: underline;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}
/* The RSVP page — only what is ITS OWN.
 *
 * The tokens, the themes, the page frame, the loading and error states,
 * the type scale, the fields and the two actions all live in
 * packages/ui/guest-base.css, which scripts/build.sh concatenates in front of
 * this file. One stylesheet request, one source of truth; see the note at the
 * top of that file for why it is not a second <link>.
 *
 * Opened on a phone, usually once, by somebody who was invited to something.
 * It should feel like the event's own stationery rather than like a form, but
 * it is still a form: generous tap targets, text large enough to read on a bus,
 * and no motion. The one deliberate piece of restraint is the Coming / Not
 * coming pair — neither is emphasised over the other, because a page that
 * nudges produces a headcount nobody can defend.
 */

/* One card per person, so a household of four reads as four decisions rather
   than as one long list of inputs. */
.person {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 16px 18px 18px;
  margin-bottom: var(--gap-lg);
}

.field--inline {
  display: flex;
  align-items: center;
  gap: var(--gap-lg);
}
.field--inline .flabel { margin: 0; color: var(--ink); }
.field--inline input[type="checkbox"] {
  width: 26px; height: 26px; flex: none; accent-color: var(--accent);
  /* A checkbox is its own tap target and is not a full-width control, so the
     base rule's min-height would stretch the row. */
  min-height: 0;
}

/* Coming and Not coming are the same size, the same weight and the same
   distance from the thumb. Neither is the default and neither is the
   suggestion. */
.yesno { display: flex; gap: var(--gap-md); margin-bottom: var(--gap-lg); }
.toggle {
  flex: 1;
  min-height: var(--tap);
  padding: 14px 10px;
  font: inherit;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  cursor: pointer;
}
.toggle--on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}

.questions {
  border-top: 1px solid var(--line);
  padding-top: var(--gap-lg);
  margin-top: var(--gap-xs);
}

.remove {
  margin-top: var(--gap-lg);
  padding: 8px 0;
  font: inherit;
  font-size: 15px;
  color: var(--ink-dim);
  background: none;
  border: 0;
  text-decoration: underline;
  cursor: pointer;
}