/* ─────────────────────────────────────────────────────────────────────────
   The waitlist: an inline block, and a sheet that has to earn its way in.

   In public/ for the same reason tabbar.css is: src/styles.css reaches the app
   alone and public/content.css reaches the documents alone, and this appears on
   both. One stylesheet, one implementation in src/waitlist.js, two hosts.
   ───────────────────────────────────────────────────────────────────────── */

.wl { --wl-gap: 14px; }

.wl h3 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(21px, 4.4vw, 26px); line-height: 1.12; letter-spacing: -.026em;
  color: var(--ink);
}
.wl p { margin-top: 9px; font-size: 14px; line-height: 1.6; color: var(--ink-2); max-width: 46ch; }
.wl-fine { margin-top: 10px; font-size: 12px; line-height: 1.5; color: var(--ink-3); }

.wl form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--wl-gap); }

.wl-field {
  display: flex; align-items: center; flex: 1 1 200px; min-width: 0;
  border: 1.5px solid var(--line); border-radius: 999px;
  background: var(--paper);
  transition: border-color .2s var(--ease);
}
.wl-field:focus-within { border-color: var(--ink); }
.wl-field b {
  padding: 0 2px 0 15px; font-size: 15px; font-weight: 550; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.wl-field input {
  flex: 1 1 auto; min-width: 0;
  padding: 13px 15px 13px 6px;
  border: 0; background: none; color: var(--ink);
  font: inherit; font-size: 16px; /* 16px or iOS zooms the page on focus */
  font-variant-numeric: tabular-nums;
}
.wl-field input:focus { outline: none; }
.wl-field input::placeholder { color: var(--ink-3); }

.wl button[type='submit'] {
  flex: 0 0 auto;
  padding: 13px 22px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--accent); color: var(--accent-ink);
  font: inherit; font-size: 14.5px; font-weight: 600;
  transition: filter .2s var(--ease);
}
.wl button[type='submit']:hover { filter: brightness(1.06); }
.wl button[type='submit']:disabled { opacity: .6; cursor: default; }

/* Said where it happened, not in an alert somewhere else on the page. */
.wl-said { margin-top: 10px; font-size: 13.5px; line-height: 1.5; }
.wl-said[data-bad] { color: var(--accent); }

/* The honeypot. Off-screen rather than `display: none`, which the better bots
   check for, and never focusable by a keyboard that is following the form. */
.wl-pot {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden; opacity: 0;
}

/* ── inline ───────────────────────────────────────────────────────────
   Part of the page, in the flow, nothing to dismiss. */
.wl-inline {
  margin: 40px 0;
  padding: 24px 22px 26px;
  border: 1px solid var(--line); border-radius: var(--r-lg, 18px);
  background: var(--paper-2);
}

/* ── the sheet ────────────────────────────────────────────────────────
   Bottom sheet on a phone, small card on a wide screen. It appears only
   once somebody has read most of a page or come back for a second one —
   see src/waitlist.js — because an overlay on arrival is what Google
   calls an intrusive interstitial and this site lives on search. */
.wl-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  padding: 22px 20px calc(22px + env(safe-area-inset-bottom, 0px));
  background: var(--paper);
  border-top: 1px solid var(--line);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, .16);
  animation: wl-up .38s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes wl-up { from { transform: translateY(101%) } to { transform: none } }

@media (prefers-reduced-motion: reduce) {
  .wl-sheet { animation: none; }
}

/* Clear of the tab bar, which is fixed to the same edge — and clear of the
   4XL button, which is lifted out of that bar and stands about four pixels
   proud of it. Flush against the bar, the sheet's higher stacking order
   sliced the top off the circle. The extra ten pixels clear the button and
   read as a deliberate gap rather than two panels welded together. */
@media (max-width: 899px) {
  .wl-sheet { bottom: calc(var(--tabbar-h, 62px) + 10px + env(safe-area-inset-bottom, 0px)); }
}

/* Smaller than the inline block, on a phone only.
   At the shared size this took about 45% of a 412×823 screen, which is more
   than "a reasonable amount of screen space" is worth arguing about on a site
   that lives on organic search. The same four things, set tighter, come in
   around a third — and the sentence being read stays visible above it, which
   is the part that actually decides whether this reads as an interstitial. */
@media (max-width: 619px) {
  .wl-sheet { --wl-gap: 11px; padding-top: 18px; }
  .wl-sheet h3 { font-size: 19px; line-height: 1.18; }
  .wl-sheet p { margin-top: 6px; font-size: 13.5px; line-height: 1.5; }
  .wl-sheet .wl-fine { margin-top: 8px; font-size: 11.5px; }
  .wl-sheet .wl-field input { padding-top: 11px; padding-bottom: 11px; }
  .wl-sheet button[type='submit'] { padding: 11px 18px; }
}

@media (min-width: 620px) {
  .wl-sheet {
    left: auto; right: 22px; bottom: 22px;
    max-width: 420px;
    border-radius: 18px; border: 1px solid var(--line);
  }
}

/* ── the standing button ──────────────────────────────────────────────
   Bottom-left on every page, permanent until somebody signs up. Left,
   because the right-hand corner is where the sheet itself opens on a wide
   screen and where a phone's back gesture lives. See src/waitlist.js. */
.wl-fab {
  position: fixed; z-index: 190;
  left: 16px; bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; gap: 8px;
  max-width: calc(100vw - 32px);
  padding: 11px 16px 11px 13px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--paper); color: var(--ink);
  font: inherit; font-size: 13.5px; font-weight: 550; line-height: 1;
  white-space: nowrap;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .13);
  cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
  animation: wl-fab-in .4s cubic-bezier(.22, 1, .36, 1) both;
}
.wl-fab[hidden] { display: none; }
.wl-fab:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0, 0, 0, .17); }
.wl-fab:active { transform: none; }
.wl-fab i { font-style: normal; font-size: 14px; color: var(--accent); }

@keyframes wl-fab-in { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) { .wl-fab { animation: none; } }

/* Clear of the bottom tab bar, which is fixed to the same edge on a phone. */
@media (max-width: 899px) {
  .wl-fab { bottom: calc(var(--tabbar-h, 62px) + 12px + env(safe-area-inset-bottom, 0px)); }
}

/* Under ~380px the words and the tab bar are competing for the same row of
   pixels, so the button keeps the mark and drops the sentence. */
@media (max-width: 379px) {
  .wl-fab { padding: 12px; }
  .wl-fab span { display: none; }
  .wl-fab i { font-size: 16px; }
}

@media print { .wl-fab { display: none !important; } }

.wl-close {
  position: absolute; top: 12px; right: 12px;
  width: 34px; height: 34px; border: 0; border-radius: 50%;
  background: var(--paper-2); color: var(--ink-2);
  font: inherit; font-size: 17px; line-height: 1; cursor: pointer;
}
.wl-close:hover { color: var(--ink); }
.wl-sheet h3 { padding-right: 38px; }

@media print { .wl { display: none !important; } }