/* Daylight's waitlist page, in the app's Quiet direction (DESIGN.md): warm paper, ink as the only
   accent, hairline rows, Instrument Sans. Tokens are the app's (src/app/globals.css). */
@font-face {
  font-family: 'Instrument Sans';
  src: url('/fonts/InstrumentSans.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --bg: #fafaf7; --surface: #ffffff; --sunk: #f2f1ec;
  --ink: #1b1c20; --ink-2: #63656f;
  --line: #eae9e4; --line-2: #dcdbd5; --line-in: #92918b;
  --acc: #1b1c20; --acc-hover: #34353b; --acc-weak: #ecebe7;
  --ok: #2d7959; --bad: #b4462f;
  --r: 6px; --r-p: 10px;
  --ease: cubic-bezier(.2, .8, .2, 1); --t-fast: 120ms;
  --font: 'Instrument Sans', -apple-system, 'Segoe UI', sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font: 15px/1.45 var(--font); letter-spacing: -0.003em; -webkit-font-smoothing: antialiased; }
button, input { font: inherit; color: inherit; letter-spacing: inherit; }
::selection { background: #e2e0d9; color: var(--ink); }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; border-radius: var(--r); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.page { max-width: 640px; margin: 0 auto; padding: 32px 20px 48px; }
.mark { margin: 0 0 72px; font-weight: 600; font-size: 15px; letter-spacing: -0.01em; }

h1 { margin: 0 0 20px; font-size: 40px; font-weight: 400; line-height: 1.05; letter-spacing: -0.035em; text-wrap: balance; }
.lead { margin: 0; color: var(--ink-2); font-size: 18px; line-height: 1.5; letter-spacing: -0.012em; text-wrap: pretty; }

.rows { list-style: none; margin: 40px 0 0; padding: 0; border-top: 1px solid var(--line); }
.rows li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.rows li span:first-child { font-weight: 500; }
.rows li span:last-child { color: var(--ink-2); }

.join { margin-top: 64px; }
.join h2 { margin: 0; font-size: 22px; font-weight: 500; line-height: 1.2; letter-spacing: -0.018em; }
.muted { margin: 8px 0 20px; color: var(--ink-2); }

.who { display: inline-flex; gap: 2px; margin: 0 0 12px; padding: 3px; border: 0; border-radius: var(--r); background: var(--sunk); }
.who label { position: relative; padding: 5px 12px; border-radius: 4px; color: var(--ink-2); font-size: 14px; cursor: pointer; transition: background var(--t-fast), color var(--t-fast); }
.who input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.who label:has(input:checked) { background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--line-2); }
.who label:has(input:focus-visible) { outline: 2px solid var(--acc); outline-offset: 2px; }

.entry { display: flex; gap: 8px; }
.entry input { flex: 1; min-width: 0; height: 44px; padding: 0 14px; border: 0; border-radius: var(--r); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-in); font-size: 16px; transition: box-shadow var(--t-fast); }
.entry input::placeholder { color: var(--ink-2); opacity: .8; }
.entry input:focus { outline: 0; box-shadow: inset 0 0 0 1px var(--acc), 0 0 0 3px var(--acc-weak); }
.entry input[aria-invalid="true"] { box-shadow: inset 0 0 0 1px var(--bad); }
.btn { height: 44px; padding: 0 18px; border: 0; border-radius: var(--r); background: var(--acc); color: #fff; font-size: 15px; font-weight: 500; white-space: nowrap; cursor: pointer; transition: background var(--t-fast), transform var(--t-fast); }
.btn:hover { background: var(--acc-hover); }
.btn:active { transform: scale(.98); }
.btn:disabled { background: var(--sunk); color: var(--ink-2); cursor: default; transform: none; }

.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.cf-turnstile { margin-top: 12px; }
.cf-turnstile:empty { margin-top: 0; }
.status { margin: 12px 0 0; font-size: 14px; }
.status:empty { margin: 0; }
.status.bad { color: var(--bad); }
.done { padding: 16px; border-radius: var(--r-p); background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
.done strong { display: block; font-weight: 500; }
.done span { color: var(--ink-2); }
.fine { margin: 16px 0 0; color: var(--ink-2); font-size: 12px; }

.foot { max-width: 640px; margin: 0 auto; padding: 24px 20px 40px; color: var(--ink-2); font-size: 12px; }
.foot a, .fine a, .mark a { color: inherit; }
.mark a { text-decoration: none; }

/* The privacy policy: long-form text in the same type scale. */
.prose h1 { margin-bottom: 8px; }
.prose .lead { margin-bottom: 32px; font-size: 15px; }
.prose h2 { margin: 36px 0 8px; font-size: 18px; font-weight: 500; line-height: 1.3; letter-spacing: -0.012em; }
.prose p, .prose li { margin: 0 0 10px; text-wrap: pretty; }
.prose ul { margin: 0 0 12px; padding-left: 20px; }
.prose a { color: inherit; text-underline-offset: 2px; }

@media (min-width: 720px) {
  .page { padding-top: 48px; }
  .mark { margin-bottom: 120px; }
  h1 { font-size: 48px; }
}

@media (max-width: 479px) {
  .rows li { flex-direction: column; }
  .entry { flex-direction: column; }
  .entry input { flex: none; width: 100%; }
  .who { display: flex; }
  .who label { flex: 1; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}