/* Angler — 85 · inline waitlist widget. One email field + one join button, wired
   by js/85-download.js. Dropped in at most "Get Angler" spots on the page (nav
   panel, hero, demo, closing CTA) instead of behind a click and a modal. The
   desktop nav bar and the footer have no room for a field of their own — see their
   plain [data-jump-target] buttons in sections/05-nav.html and 90-cta.html, which
   just scroll to and focus the closest one of these that does.
   data-mode (download | form) switches Mac desktop to a bare download button
   (email hidden) vs. the email-gated waitlist/download-link flow everywhere else;
   data-state (idle | busy | done) dims the button mid-submit.

   Grid, not flex: email and submit sit as a two-column row so the button lines up
   with the field beside it regardless of how the row is justified (the hero is
   centered as a group). .wl__row is unwrapped via display:contents so email/submit
   become direct grid items alongside it. */

.wl__form {
  display: grid;
  /* 320px, not 1fr: the email column matches .wl__email's own max-width below, so it
     stops growing there instead of stretching to fill a wide container and stranding
     the button off to the right of it. */
  /* minmax(0, max-content), not bare max-content: .wl__msg spans both columns, so
     its max-content contribution lands on the last track. A long status line (the
     "open this link on your Mac" deep-link message) would size that track to the
     whole unwrapped sentence and blow the form past the viewport on a phone —
     taking the hero's headline and agent strip with it, since every ancestor up to
     .hero__copy is shrink-to-fit. The 0 floor lets the track shrink so it wraps. */
  grid-template-columns: minmax(0, 320px) minmax(0, max-content);
  column-gap: 8px;
  row-gap: 8px;
}
.wl__row { display: contents; }

.wl__email {
  grid-column: 1; grid-row: 1; align-self: center;
  width: 100%; min-width: 0; max-width: 320px;
  height: 44px; padding: 0 14px;
  font: inherit; font-size: 15px; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-field);
}

.wl__submit { grid-column: 2; grid-row: 1; align-self: center; }

.wl__msg {
  grid-column: 1 / -1; grid-row: 2;
  min-height: 1.3em; font-size: 13.5px; color: var(--ink-soft); text-align: center;
}
.wl[data-state="busy"] .wl__submit { opacity: .6; pointer-events: none; }

/* honeypot: off-screen not display:none — some bots skip hidden fields */
.wl__hp { position: absolute; left: -9999px; }

/* Mac desktop: no email, no gate — the submit button IS the download button.
   The field stays in the DOM (hidden) so the deep-link and jump-target code
   paths keep resolving. */
.wl[data-mode="download"] .wl__email { display: none; }
.wl[data-mode="download"] .wl__form { grid-template-columns: minmax(0, max-content); }
.wl[data-mode="download"] .wl__submit { grid-column: 1; }
/* ≤720: the stacked layouts widen forms to 100%, which strands the lone
   download button at the left edge — center the single track. Desktop keeps
   each section's own alignment (formats sits left with its copy on purpose). */
@media (max-width: 720px) {
  .wl[data-mode="download"] .wl__form { justify-content: center; }
}

/* ---------- hero: same vellum fill as the mobile nav panel (05-nav.css), one color
   at every width rather than a desktop/mobile split ---------- */
/* 240px, not the base 320: the column has to match .wl__email's own width below,
   or the fixed-width column leaves the reserved 80px sitting empty between the
   field and the button instead of shrink-wrapping snug around them. */
.wl--hero .wl__form {
  width: fit-content; max-width: 100%; margin-inline: auto;
  grid-template-columns: minmax(0, 240px) minmax(0, max-content);
}
.wl--hero .wl__email {
  width: 240px; max-width: 100%;
  height: 56px; color: var(--ink);
  background: color-mix(in srgb, var(--vellum) 96%, transparent);
  border: 1px solid transparent;
}
.wl--hero .wl__email::placeholder { color: color-mix(in srgb, var(--ink) 55%, transparent); }
.wl--hero .wl__email:focus-visible { outline: none; box-shadow: none; }
.wl--hero .wl__submit { height: 56px; }
.wl--hero .wl__msg { color: var(--paper); text-shadow: 0 1px 3px rgb(0 0 0 / .4); }

/* ---------- hero on a phone: stack email / button full-width. The two-column
   row leaves the email field ~160px wide at 375px — too small to type an address
   into. Order via grid-row, no markup change; .wl__row is display:contents so its
   children place freely. Hero only — the nav panel and CTA copies stay two-up. */
@media (max-width: 720px) {
  /* .wl--hero too: the wrapper is a centered flex item in .hero__copy, so it
     shrink-wraps; without this the stack is only as wide as the button row was. */
  .wl--hero { width: 100%; }
  .wl--hero .wl__form { width: 100%; grid-template-columns: minmax(0, 1fr); }
  .wl--hero .wl__email { grid-row: 1; width: 100%; max-width: none; }
  .wl--hero .wl__submit { grid-column: 1; grid-row: 2; width: 100%; }
  .wl--hero .wl__msg { grid-row: 3; }
}

/* ---------- hero, deep link opened on a phone (js/85-download.js sets the state) ----
   The download link is spent and the download is Mac-only, so there is nothing here
   to sign up for or resend — drop the field and the button and let the notice be the
   whole hero action. Rust on its own vellum chip rather than plain red text: the
   notice sits over the painting, where red-on-photo is unreadable. */
.wl--hero[data-state="mac-only"] .wl__row { display: none; }
.wl--hero[data-state="mac-only"] .wl__msg {
  padding: 10px 14px; border-radius: var(--r-field);
  background: color-mix(in srgb, var(--vellum) 96%, transparent);
  color: var(--rust); text-shadow: none; font-weight: 500;
}

/* ---------- on a dark plate: closing CTA + footer, matching .btn--onDark ---------- */
.wl--onDark .wl__email { background: rgba(255, 255, 255, .95); border-color: transparent; }
.wl--onDark .wl__msg { color: rgba(255, 255, 255, .82); }

.wl--navpanel { margin-top: 6px; padding-block: 14px; }

/* ---------- mobile link_emailed toast (js/85-download.js#showToast) ----------
   The inline .wl__msg already carries this copy, but on mobile it can sit below
   the fold once the form scrolls out — a fixed toast makes the outcome visible
   without hunting for it. Top-fixed OVER the nav bar (nav is z-index 100; this
   must beat it, and the open nav panel, so a submit from the panel still shows
   the outcome without scrolling) + auto-dismiss, no framework, one div. */
.dl-toast {
  position: fixed;
  left: 50%;
  top: 18px;
  z-index: 200;
  transform: translate(-50%, -8px);
  max-width: min(92vw, 420px);
  padding: 12px 16px;
  border-radius: var(--r-field);
  background: var(--ink);
  color: var(--paper);
  font-size: 13.5px;
  line-height: 1.4;
  text-align: center;
  box-shadow: 0 14px 32px rgb(0 0 0 / .28);
  opacity: 0;
  visibility: hidden;
  transition: opacity 250ms var(--ease-house), transform 250ms var(--ease-house), visibility 0s 250ms;
}
.dl-toast.is-on {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition: opacity 250ms var(--ease-house), transform 250ms var(--ease-house), visibility 0s 0s;
}