/* ==========================================================================
   Guest self check-in — /c/<token> and /checkin (SPEC §13)
   Uses tokens from /css/tokens.css. A light page for a phone at the clinic door: big type (18 px body,
   58 px buttons), dark ink on cream, one main action per screen. The Lucky Draw number reuses the golden
   ticket's wine and gold. Motion is small and stops under prefers-reduced-motion.
   ========================================================================== */

:root {
  --gutter: 16px;
  /* Button fill from the invitation: its lightest stop keeps cream label text ≥ 4.5:1. */
  --btn-gold: linear-gradient(110deg, #6f460f 0%, #86591b 30%, #9a6b22 50%, #86591b 70%, #6f460f 100%);
  /* Gold for text on cream: the lightest stop (#a8782c) stays ≥ 3:1 on large type. */
  --gold-text: linear-gradient(110deg, #7a5015 0%, #946622 26%, #a8782c 50%, #946622 74%, #7a5015 100%);
  --wine: linear-gradient(172deg, #6a2d2c 0%, #5c2626 46%, #461b1b 100%);
  --tk-gold: linear-gradient(100deg, #c69641 0%, #f1d68c 22%, #fff3cf 34%, #e3bf68 52%, #f1d68c 68%, #fff3cf 78%, #c69641 100%);
  --warn-ink: #6e4412;
  --warn-bg: #fbefd6;
}
@media (min-width: 420px) { :root { --gutter: 20px; } }

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--cream-100);
  color: var(--ink);
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--font-body);
  font-size: 1.125rem; /* 18 px: read at arm's length, standing, maybe in sunlight */
  line-height: 1.55;
  color: var(--ink);
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(227, 191, 104, 0.22), rgba(227, 191, 104, 0) 60%),
    radial-gradient(90% 50% at 50% 110%, rgba(201, 173, 134, 0.18), rgba(201, 173, 134, 0) 70%),
    var(--cream-100);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  overflow-x: clip;
}

p, h1, h2 { margin: 0; }
h1, h2 { font-weight: 500; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--brown-700); text-underline-offset: 0.18em; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 8px; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.icon {
  width: 22px; height: 22px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

/* --------------------------------------------------------------------------
   Page shell
   -------------------------------------------------------------------------- */
.page {
  width: min(100% - 2 * var(--gutter), 520px);
  min-height: 100vh;
  min-height: 100dvh;
  margin-inline: auto;
  padding-top: calc(18px + env(safe-area-inset-top, 0px));
  display: flex;
  flex-direction: column;
}

.masthead { display: grid; justify-items: center; gap: 8px; text-align: center; }
.masthead__logo {
  display: block;
  width: 112px;
  aspect-ratio: 2100 / 1566;
  background: var(--logo-brown);
  -webkit-mask: url("/assets/img/logo.svg") center / contain no-repeat;
  mask: url("/assets/img/logo.svg") center / contain no-repeat;
}
.masthead__event {
  display: grid;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.masthead__event span { white-space: nowrap; }

.sheet {
  position: relative;
  margin-top: 18px;
  padding: 30px 20px 26px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  transition: border-color 0.5s, box-shadow 0.5s;
}
@media (min-width: 420px) { .sheet { padding: 36px 28px 30px; } }
body[data-screen="success"] .sheet {
  border-color: rgba(198, 154, 67, 0.7);
  box-shadow: 0 0 0 4px rgba(236, 212, 154, 0.35), var(--shadow-lift);
}
body[data-screen="gold"] .sheet { border-color: rgba(198, 154, 67, 0.6); }
body[data-screen="scan"] .sheet { padding-top: 24px; }

.help {
  margin-top: auto;
  padding: 22px 8px calc(22px + env(safe-area-inset-bottom, 0px));
  text-align: center;
}
.help__text { color: var(--ink-soft); text-wrap: balance; }
.help__text::before {
  content: "";
  display: block;
  width: 40px; height: 1px;
  margin: 0 auto 14px;
  background: linear-gradient(90deg, rgba(198, 154, 67, 0), var(--gold-500), rgba(198, 154, 67, 0));
}

/* --------------------------------------------------------------------------
   Screen content
   -------------------------------------------------------------------------- */
.screen {
  display: grid;
  justify-items: center;
  gap: 16px;
  text-align: center;
}
.screen > * { max-width: 100%; }

.title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.05rem, 8.6vw, 2.6rem);
  line-height: 1.08;
  letter-spacing: -0.005em;
  color: var(--brown-800);
  text-wrap: balance;
}
/* Focus lands on each new heading so screen readers announce the screen; it is not a control, so no ring. */
.title:focus, .title:focus-visible { outline: none; }
.subtitle {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.7rem;
  line-height: 1.15;
  color: var(--brown-800);
}
.lede { font-size: 1.25rem; font-weight: 500; color: var(--brown-800); text-wrap: balance; }
.text { color: var(--ink); text-wrap: pretty; max-width: 30rem; }
.meta { font-size: 1.1875rem; font-weight: 500; color: var(--brown-700); text-wrap: balance; }
.small { color: var(--ink-soft); text-wrap: pretty; max-width: 30rem; }

/* The round mark at the top of a screen. */
.seal {
  display: grid; place-items: center;
  width: 76px; height: 76px;
  border-radius: 50%;
  color: var(--gold-700);
  background: radial-gradient(circle at 35% 30%, #fffaf0, var(--cream-200));
  box-shadow: inset 0 0 0 1.5px rgba(198, 154, 67, 0.55), 0 8px 20px -10px rgba(138, 95, 31, 0.45);
}
.seal__icon {
  width: 34px; height: 34px;
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.seal--success {
  width: 92px; height: 92px;
  color: #fffdf8;
  background: radial-gradient(circle at 35% 28%, #f1d68c 0%, #c69a43 48%, #8a5f1f 100%);
  box-shadow: 0 0 0 6px rgba(236, 212, 154, 0.45), 0 0 0 7px rgba(198, 154, 67, 0.5), 0 16px 34px -12px rgba(138, 95, 31, 0.7);
}
.seal--success .seal__icon { width: 46px; height: 46px; stroke-width: 2.4; }
.seal--gold {
  color: var(--gold-700);
  background: radial-gradient(circle at 35% 30%, #fffaf0, #f7ebcf);
  box-shadow: inset 0 0 0 2px var(--gold-500), 0 0 0 5px rgba(236, 212, 154, 0.4);
}
.seal--gold .seal__icon { stroke-width: 2.2; }

/* Pass facts: Lucky Draw No. · guests · arrival window */
.facts {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
}
.facts li {
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--cream-100);
  border: 1px solid var(--line-strong);
  color: var(--brown-800);
  font-weight: 500;
  white-space: nowrap;
}

.note {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  border-radius: var(--radius);
  background: var(--cream-200);
  color: var(--brown-800);
  font-weight: 500;
  text-align: left;
}
.note .icon { color: var(--gold-700); }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.actions { display: grid; gap: 12px; width: 100%; }
.actions:empty { display: none; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%;
  min-height: 58px;
  padding: 14px 22px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-decoration: none;
  text-align: center;
  -webkit-user-select: none; user-select: none;
  touch-action: manipulation;
  transition: transform 0.2s var(--ease-out), box-shadow 0.3s var(--ease-out), background-color 0.3s, border-color 0.3s;
}
.btn:active { transform: scale(0.98); }
.btn--gold {
  color: #fffdf8;
  font-weight: 600;
  background: var(--btn-gold);
  background-size: 220% 100%;
  border-color: rgba(122, 82, 22, 0.35);
  text-shadow: 0 1px 1px rgba(70, 40, 8, 0.45);
  box-shadow: 0 12px 26px -10px rgba(138, 95, 31, 0.6), inset 0 1px 0 rgba(255, 245, 214, 0.45);
}
.btn--line {
  color: var(--brown-800);
  background: var(--cream-50);
  border-color: rgba(198, 154, 67, 0.8);
}
.btn--line .icon { color: var(--gold-700); }
.btn--quiet {
  min-height: 52px;
  padding: 10px 12px;
  color: var(--brown-700);
  background: transparent;
  text-decoration: underline;
  text-decoration-color: rgba(138, 95, 31, 0.45);
  text-underline-offset: 0.22em;
}
@media (hover: hover) {
  .btn--gold:hover { background-position: 100% 0; box-shadow: 0 14px 30px -10px rgba(138, 95, 31, 0.75), inset 0 1px 0 rgba(255, 245, 214, 0.5); }
  .btn--line:hover { background: #fff; border-color: var(--gold-600); }
  .btn--quiet:hover { color: var(--brown-900); text-decoration-color: currentColor; }
}

/* --------------------------------------------------------------------------
   Lucky Draw number: a small golden-ticket stub
   -------------------------------------------------------------------------- */
.lucky {
  position: relative;
  width: min(100%, 300px);
  margin: 4px auto;
  padding: 18px 24px 16px;
  border-radius: 18px;
  background:
    radial-gradient(90% 60% at 50% 30%, rgba(241, 214, 140, 0.2), rgba(241, 214, 140, 0) 72%),
    var(--wine);
  box-shadow:
    inset 0 0 0 2px #c69641,
    inset 0 0 0 5px rgba(70, 27, 27, 0.9),
    inset 0 0 0 6px rgba(241, 214, 140, 0.35),
    0 18px 34px -16px rgba(70, 27, 27, 0.7);
  isolation: isolate;
}
/* Ticket notches: the sheet's cream shows through at both sides. */
.lucky::before, .lucky::after {
  content: "";
  position: absolute; top: 50%;
  width: 20px; height: 20px; margin-top: -10px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: inset 0 0 0 2px #c69641;
}
.lucky::before { left: -10px; clip-path: inset(0 0 0 50%); }
.lucky::after { right: -10px; clip-path: inset(0 50% 0 0); }
.lucky__label {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  padding-left: 0.3em; /* optical centring of the tracking */
  text-transform: uppercase;
  color: #ecd49a;
}
.lucky__no {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(5rem, 27vw, 6.5rem);
  line-height: 1;
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
  background: var(--tk-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 22px rgba(241, 214, 140, 0.25);
}
.lucky--compact { padding: 12px 20px 12px; width: min(100%, 250px); }
.lucky--compact .lucky__no { font-size: clamp(3.6rem, 18vw, 4.4rem); }

/* --------------------------------------------------------------------------
   Live clock: proves the screen is live, not a forwarded screenshot
   -------------------------------------------------------------------------- */
.clock {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid rgba(198, 154, 67, 0.55);
  background: #fffaf0;
  font-size: 1.1875rem;
  font-weight: 500;
  color: var(--brown-800);
  font-variant-numeric: tabular-nums;
}
.clock__time {
  font-weight: 600;
  background: linear-gradient(100deg, #6e4412 0%, #6e4412 38%, #b48432 50%, #6e4412 62%, #6e4412 100%);
  background-size: 250% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 3.6s linear infinite;
}
.clock__dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--gold-500);
  box-shadow: 0 0 0 0 rgba(198, 154, 67, 0.55);
  animation: live-dot 2s var(--ease-out) infinite;
}
@keyframes shimmer { to { background-position: -150% 0; } }
@keyframes live-dot {
  0% { box-shadow: 0 0 0 0 rgba(198, 154, 67, 0.55); }
  70%, 100% { box-shadow: 0 0 0 10px rgba(198, 154, 67, 0); }
}

/* --------------------------------------------------------------------------
   Scanner
   -------------------------------------------------------------------------- */
.screen--scan .title { font-size: clamp(1.75rem, 7.2vw, 2.2rem); }
.viewfinder {
  position: relative;
  width: min(100%, 340px);
  aspect-ratio: 1;
  border-radius: 26px;
  overflow: hidden;
  background: radial-gradient(circle at 50% 40%, #4a2c1d, #2e1a10);
  box-shadow: 0 0 0 1px rgba(198, 154, 67, 0.45), 0 18px 40px -18px rgba(46, 26, 16, 0.8);
}
.viewfinder__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.viewfinder__corners { position: absolute; inset: 14%; pointer-events: none; }
.viewfinder__corners span {
  position: absolute;
  width: 34px; height: 34px;
  border: 0 solid #f1d68c;
  filter: drop-shadow(0 0 4px rgba(46, 26, 16, 0.6));
}
.viewfinder__corners span:nth-child(1) { top: 0; left: 0; border-top-width: 4px; border-left-width: 4px; border-top-left-radius: 12px; }
.viewfinder__corners span:nth-child(2) { top: 0; right: 0; border-top-width: 4px; border-right-width: 4px; border-top-right-radius: 12px; }
.viewfinder__corners span:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 4px; border-left-width: 4px; border-bottom-left-radius: 12px; }
.viewfinder__corners span:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 4px; border-right-width: 4px; border-bottom-right-radius: 12px; }
.viewfinder__line {
  position: absolute; left: 16%; right: 16%; top: 16%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(241, 214, 140, 0), #f1d68c 30%, #fff3cf 50%, #f1d68c 70%, rgba(241, 214, 140, 0));
  box-shadow: 0 0 12px rgba(241, 214, 140, 0.8);
  animation: sweep 2.6s var(--ease-in-out) infinite alternate;
}
.viewfinder.is-starting .viewfinder__line { opacity: 0; }
.viewfinder.is-starting .viewfinder__corners span { border-color: rgba(241, 214, 140, 0.55); }
@keyframes sweep { to { top: 84%; } }

.scan-status {
  min-height: 3.1em;
  display: grid; place-items: center;
  padding: 6px 14px;
  border-radius: var(--radius);
  font-weight: 500;
  color: var(--brown-800);
  text-wrap: balance;
  transition: background-color 0.3s, color 0.3s;
}
.scan-status.is-warn { background: var(--warn-bg); color: var(--warn-ink); }
.scan-help {
  display: grid; gap: 12px; justify-items: center;
  width: 100%;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  animation: rise 0.5s var(--ease-out) both;
}
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }

/* --------------------------------------------------------------------------
   Forms: the code on the stand, the RSVP phone number
   -------------------------------------------------------------------------- */
.form { display: grid; gap: 18px; width: 100%; text-align: left; }
.field { display: grid; gap: 8px; }
.field__label { font-weight: 600; color: var(--brown-800); }
.field__hint { color: var(--ink-soft); }
.field__error { display: none; font-weight: 500; color: var(--danger); }
.field__error.is-visible { display: block; }
.input {
  width: 100%;
  min-height: 62px;
  padding: 14px 18px;
  font-family: var(--font-body);
  font-size: 1.375rem;
  color: var(--ink);
  background: #fffefb;
  border: 1.5px solid var(--line-strong);
  border-radius: 16px;
  box-shadow: inset 0 1px 2px rgba(74, 44, 29, 0.05);
  -webkit-appearance: none; appearance: none;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.input::placeholder { color: #9c8878; }
.input:focus { outline: none; border-color: var(--gold-600); box-shadow: 0 0 0 4px rgba(198, 154, 67, 0.25); background: #fff; }
.input[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 4px rgba(164, 69, 47, 0.12); }
.input--code {
  text-align: center;
  font-size: 1.9rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.input--code::placeholder { letter-spacing: 0.1em; font-weight: 400; }
.input--phone { letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   Who's checking in (links saved on this phone)
   -------------------------------------------------------------------------- */
.who { display: grid; gap: 12px; width: 100%; }
.who__card {
  display: grid; gap: 2px; justify-items: start;
  width: 100%;
  min-height: 78px;
  padding: 14px 22px;
  border-radius: 20px;
  border: 1.5px solid transparent;
  text-align: left;
  color: #fffdf8;
  background: var(--btn-gold);
  background-size: 220% 100%;
  box-shadow: 0 12px 26px -12px rgba(138, 95, 31, 0.6), inset 0 1px 0 rgba(255, 245, 214, 0.45);
  transition: transform 0.2s var(--ease-out);
  touch-action: manipulation;
}
.who__card:active { transform: scale(0.98); }
.who__card + .who__card, .who__card.is-done {
  color: var(--brown-800);
  background: var(--cream-50);
  border-color: rgba(198, 154, 67, 0.8);
  box-shadow: none;
}
.who__name { font-size: 1.25rem; font-weight: 600; line-height: 1.25; }
.who__card:not(.is-done):first-child .who__name { text-shadow: 0 1px 1px rgba(70, 40, 8, 0.45); }
.who__sub { font-size: 1.0625rem; opacity: 0.92; }
.who__done { font-size: 1.0625rem; font-weight: 600; color: var(--success); }

/* --------------------------------------------------------------------------
   Reception view, offline fallback
   -------------------------------------------------------------------------- */
.reception__code {
  width: 100%;
  padding: 16px 12px;
  border-radius: 20px;
  border: 2px dashed var(--gold-500);
  background: #fff;
  font-size: clamp(2rem, 11vw, 3.4rem); /* "DRK-7K3QF" on one line at 320 px */
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: var(--brown-900);
  font-variant-numeric: tabular-nums;
}
.screen--reception .meta { font-size: 1.375rem; color: var(--brown-800); }
.fallback { display: grid; gap: 6px; width: 100%; padding: 14px; border-radius: var(--radius); background: var(--cream-200); }
.fallback__code { font-size: 1.6rem; font-weight: 600; letter-spacing: 0.04em; color: var(--brown-900); }

/* --------------------------------------------------------------------------
   Busy
   -------------------------------------------------------------------------- */
.screen--busy { padding: 18px 0 10px; }
.spinner {
  width: 54px; height: 54px;
  border-radius: 50%;
  border: 4px solid var(--gold-300);
  border-top-color: var(--gold-700);
  animation: spin 0.9s linear infinite;
}
.status { min-height: 1.55em; color: var(--ink-soft); }
@keyframes spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   Arrivals
   -------------------------------------------------------------------------- */
.screen { animation: screen-in 0.45s var(--ease-out) both; }
.screen--success .seal { animation: seal-pop 0.7s var(--ease-out) both; }
.screen--success .lucky { animation: rise 0.6s var(--ease-out) 0.15s both; }
@keyframes screen-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes seal-pop {
  0% { opacity: 0; transform: scale(0.6); }
  60% { opacity: 1; transform: scale(1.06); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .screen, .screen--success .seal, .screen--success .lucky, .scan-help { animation: none; }
  .clock__time { animation: none; background-position: 50% 0; }
  .clock__dot { animation: none; }
  .viewfinder__line { animation: none; top: 50%; }
  .spinner { animation-duration: 2.4s; }
  .btn, .who__card { transition: none; }
}