/* /plugins/: the ChatGPT and Claude waitlist in the nursery print.
   Builds on /v2/v2.css. Gold stays on this page's one ask: joining the waitlist. */

/* ---------- hero: the home's opening, one step down in scale, without the truck ---------- */
.pl-hero { padding-bottom: clamp(3rem, 2rem + 4vw, 5.5rem); }
.pl-hero h1 { font-size: clamp(2.75rem, 12vw, 4.5rem); }   /* the home's display tops out at 112px */
.pl-hero .hero-sub { max-width: 34ch; }
.pl-hero .hero-note { max-width: 36ch; }
@media (min-width: 1000px) {
  .pl-hero .hero-intro { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .pl-hero h1 { font-size: clamp(4.25rem, 6vw, 5.5rem); }
}

/* ---------- the example: the conversation is this page's art ---------- */
.pl-example { display: grid; gap: 1.75rem; }
.pl-example-head > p:not(.lede) { max-width: 43ch; margin-top: 1.25rem; }
.pl-video { width: 100%; max-width: 26rem; }
.pl-video video { display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; background: #fff; border-radius: 2px; }
.pl-video figcaption { margin-top: .85rem; font-size: var(--t-sm); line-height: 1.45; }
.pl-cap { display: block; font-weight: 600; }
.pl-credit { display: block; margin-top: .15rem; color: var(--ink-2); }
.pl-transcript { max-width: 36rem; border-bottom: 1px solid var(--rule); }
.pl-transcript summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 64px; padding: .9rem 0; border-top: 1px solid var(--rule); list-style: none; cursor: pointer; font-size: 1.25rem; font-weight: 650; line-height: 1.25; letter-spacing: -.015em; }  /* reads as one of the FAQ rows (.faq summary) */
.pl-transcript summary::-webkit-details-marker { display: none; }
.pl-transcript p { max-width: 60ch; padding: .8rem 0; border-top: 1px solid var(--rule); font-size: var(--t-sm); line-height: 1.5; }
.pl-transcript p:first-child { padding-top: .1rem; border-top: 0; }
.pl-transcript strong { font-weight: 600; }
@media (min-width: 760px) {
  .pl-example { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); grid-template-rows: auto 1fr; grid-template-areas: "head video" "more video"; gap: 2.25rem clamp(2.5rem, 6vw, 5.5rem); align-items: start; }
  .pl-example-head { grid-area: head; }
  .pl-video { grid-area: video; justify-self: end; }
  .pl-transcript { grid-area: more; }
}

/* ---------- the workflow we're building: three steps, ruled like a schedule ---------- */
.pl-flow h2 { max-width: 20ch; }
.pl-steps { margin-top: clamp(2rem, 4vw, 3rem); }
.pl-n { font-size: .8125rem; font-weight: 700; line-height: 1.3; letter-spacing: .1em; color: var(--forest-2); font-variant-numeric: tabular-nums; }
@media (min-width: 860px) {
  .pl-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(2rem, 4vw, 3.5rem); }
  .pl-steps li { align-content: start; border-top: 2px solid var(--pine); }
}

/* ---------- questions, with a way to send a list today ---------- */
.pl-now { margin-top: 1.5rem; color: var(--ink-2); }
@media (min-width: 960px) {
  .pl-faq-head { position: sticky; top: 2rem; }
  .faq-grid .pl-faq-head h2 { position: static; }
}

/* ---------- the close: the same ask at the end of the page ---------- */
.pl-join-in { display: grid; gap: 1.5rem clamp(2.5rem, 6vw, 5.5rem); }
.pl-join h2 { max-width: 14ch; }
.pl-join-ask { display: grid; justify-items: start; gap: 1rem; }
.pl-tip { max-width: 36ch; font-size: 1.125rem; line-height: 1.45; }
.pl-join .btn { margin-top: .5rem; }
.pl-join .promise { margin-top: 0; color: var(--on-pine-2); }
@media (min-width: 860px) {
  .pl-join-in { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: end; }
}

/* ---------- signup dialog: a native form in the send panel's frame; the worker files it in Fibery ---------- */
#waitlist-dialog { width: 100%; max-width: none; max-height: 100dvh; margin: auto 0 0; padding: 0; border: 0; background: var(--paper); color: var(--pine); }
#waitlist-dialog::backdrop { background: oklch(0.29 0.045 165 / .6); }
.pl-dialog { padding: .5rem var(--gutter) calc(1.25rem + env(safe-area-inset-bottom)); }
html:has(#waitlist-dialog[open]) { overflow: hidden; }
.wl-form { display: grid; gap: 1.35rem; }
.wl-form[hidden] { display: none; }
.wl-tip { font-size: var(--t-sm); line-height: 1.45; color: var(--ink-2); }
.wl-field { display: grid; gap: .45rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.wl-field > label, .wl-field legend { padding: 0; font-weight: 600; }
.wl-opt { font-weight: 400; color: var(--ink-2); }
/* The search field's box: 2px pine, square, 56px; 16px or more so iOS doesn't zoom on focus. */
.wl-field input:not([type="radio"]) { width: 100%; min-height: 56px; padding: 0 1rem; border: 2px solid var(--pine); border-radius: 2px; background: var(--paper); color: inherit; font: inherit; font-size: max(1rem, var(--t-body)); }
.wl-field input[aria-invalid="true"] { border-color: var(--negative); }
.wl-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.25rem; margin-top: .2rem; }
.wl-choice { display: flex; align-items: center; gap: .7rem; min-height: 48px; border-bottom: 1px solid var(--rule); line-height: 1.25; cursor: pointer; }
.wl-choice.wide { grid-column: 1 / -1; }
.wl-choice input { flex: none; width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--pine); }
.wl-err { font-size: var(--t-sm); font-weight: 600; line-height: 1.4; color: var(--negative); }
.wl-trap { position: absolute; left: -100vw; width: 1px; height: 1px; overflow: hidden; }   /* off-screen, for bots only */
.wl-submit { justify-content: space-between; }
.wl-form[aria-busy="true"] .wl-submit { cursor: progress; opacity: .75; }
.wl-status:empty { display: none; }
.wl-status { font-size: var(--t-sm); line-height: 1.45; }
.wl-status a, .wl-done b { color: var(--pine); font-weight: 600; }
.wl-status a { text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: .3em; }
.wl-done { padding-block: .75rem .25rem; }
.wl-done h3 { font-size: 1.5rem; font-weight: 650; line-height: 1.15; letter-spacing: -.02em; }
.wl-done h3:focus { outline: none; }
.wl-done p { max-width: 40ch; margin-top: .6rem; overflow-wrap: anywhere; }
.wl-done .btn { margin-top: 1.5rem; }
@media (min-width: 480px) { .wl-submit { justify-self: start; } }
@media (min-width: 720px) {
  #waitlist-dialog { width: min(37.5rem, 100% - 2rem); margin: auto; }
  .pl-dialog { padding: .5rem 1.5rem 1.5rem; }
}

/* ---------- motion: v2's arrivals; reduced motion shows the finished page ---------- */
@media (prefers-reduced-motion: no-preference) {
  .pl-transcript[open] > div { animation: rise .35s var(--ease); }
  #waitlist-dialog[open] { animation: slide-up .4s var(--ease); }
  @media (min-width: 720px) { #waitlist-dialog[open] { animation: fade .25s var(--ease); } }
}