/* =========================================================================
   TradeKit Marketing — the waitlist flow (src/_includes/waitlist.njk)

   Join → verify → on the list (plans/waitlist.md), linked by base.njk on
   every page: it's the dialog every CTA opens (.tk-dialog, site.css) and
   the inline flow on /waitlist/ (src/waitlist.njk, the .tk-wlpage styles
   at the bottom). js/waitlist.js steps it through its panels.

   It's a framed screen, like the homepage's demos: a HUD bar (lamp,
   WAITLIST // PRIVATE BETA, the step), then one panel at a time with a
   fitted display title, its one field and its actions. The code shows as
   six seven-segment cells over a real one-time-code input, and the
   confirmed state is the spot as an armed trigger: the homepage stage's
   marching candy-cane line with its order tag on it.
   ========================================================================= */

.tk-wl {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* ----- The HUD bar ----- */
.tk-wl__bar {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 2.4rem;
  padding-left: 0.9rem;
  border-bottom: 1px solid var(--ink);
  background: var(--paper);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.tk-wl__bar > span {
  display: inline-flex;
  align-items: center;
  height: 100%;
}

.tk-wl__bar-r {
  gap: 0.9rem;
}

.tk-wl--page .tk-wl__bar {
  padding-right: 0.9rem;
}

.tk-wl__close {
  height: 100%;
  padding: 0 0.9rem;
  border: 0;
  border-left: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}

.tk-wl__close:hover {
  background: var(--ink);
  color: var(--paper);
}

.tk-wl__close:focus-visible {
  outline-offset: -4px;
}

/* The lamp: live while it waits for an address, sun yellow while it waits
   for the code, then solid green once it's on the list. */
.tk-wl[data-wl-step="verify"] [data-wl-lamp] {
  background: var(--ink-2);
}

.tk-wl[data-wl-step="done"] [data-wl-lamp] {
  animation: none;
}

/* ----- The panels ----- */
.tk-wl__body {
  padding: calc(var(--pad) * 1.1) var(--pad) calc(var(--pad) * 1.2);
}

/* While the email's link confirms (/waitlist/?t=…), the panels wait. */
.tk-wl[data-wl-step="confirming"] .tk-wl__body {
  visibility: hidden;
}

.tk-wl__panel {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}

.tk-wl__panel[hidden] {
  display: none;
}

/* Fitted to the panel's width (data-fit, art-kit.js): the widest line spans
   it, capped so a wide page doesn't shout. */
.tk-wl__title {
  --fit: clamp(2.4rem, 8vw, 4rem);
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  line-height: 0.86;
  letter-spacing: -0.025em;
  word-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
}

.tk-wl__title:focus {
  outline: none;
}

.tk-wl__title > span {
  display: block;
  width: max-content;
  /* room for the italic's overhang */
  padding: 0.02em 0.12em 0.04em 0;
  font-size: min(var(--fit), 5.25rem);
}

.tk-wl__title em {
  font-style: italic;
}

.tk-wl__lede {
  max-width: 34rem;
  font-size: 0.95rem;
  line-height: 1.55;
  text-wrap: pretty;
}

.tk-wl__lede b {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.tk-wl__form {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.tk-wl__label {
  color: var(--ink-soft);
}

/* The field and its button share one ruled row (stacked on phones). */
.tk-wl__row {
  display: flex;
}

.tk-wl__row .tk-field {
  flex: 1;
  border-right: 0;
}

/* Its focus ring prints inside it, clear of the button beside (or under) it. */
.tk-wl__row .tk-field:focus-visible {
  outline-offset: -6px;
}

.tk-wl__row .tk-btn {
  flex: none;
}

.tk-wl__error {
  color: var(--ink-4);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.tk-wl__error:empty {
  display: none;
}

.tk-wl__suggest {
  font-size: 0.85rem;
}

.tk-wl__suggest[hidden] {
  display: none;
}

.tk-wl__fine {
  color: var(--ink-soft);
}

/* Lines break at the separators, never inside a phrase. */
.tk-wl__fine > span:not(.tk-sep) {
  white-space: nowrap;
}

.tk-wl__fine a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}

.tk-wl__fine a:hover {
  color: var(--ink-4);
}

/* Text actions: the kit's text link, as buttons. */
.tk-wl__link,
.tk-wl__fix {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font-family: var(--font-mono);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.35em;
  cursor: pointer;
}

.tk-wl__link {
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* The suggested address: a long one wraps rather than widening the panel. */
.tk-wl__fix {
  font-size: inherit;
  text-align: left;
  overflow-wrap: anywhere;
}

.tk-wl__link:hover,
.tk-wl__fix:hover {
  color: var(--ink-4);
}

.tk-wl__link:disabled {
  color: var(--ink-soft);
  text-decoration: none;
  cursor: default;
}

.tk-wl__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.6rem;
}

.tk-wl[aria-busy="true"] {
  cursor: progress;
}

/* The honeypot and the screen-reader announcements: present, never shown. */
.tk-wl__hp,
.tk-wl__status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ----- The code: six seven-segment cells over the real input ----- */
.tk-wl__code {
  position: relative;
  width: min(100%, 19.2rem);
}

.tk-wl__cells {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.tk-wl__cell {
  position: relative;
  display: grid;
  place-items: center;
  height: 4.3rem;
  border: 1px solid var(--ink);
  background: var(--paper);
}

.tk-wl__cell + .tk-wl__cell {
  border-left: 0;
}

.tk-wl__cell .tk-seg {
  height: 2.5rem;
}

.tk-wl__code.is-invalid .tk-wl__cell {
  border-color: var(--ink-4);
}

/* While the field has focus: the cells' focus ring, and a block caret in
   the next cell, blinking in hard steps. */
.tk-wl__code:focus-within .tk-wl__cells {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.tk-wl__code:focus-within .tk-wl__cell.is-next::after {
  content: '';
  position: absolute;
  left: 24%;
  right: 24%;
  bottom: 0.5rem;
  height: 3px;
  background: var(--ink);
  animation: tk-blink 1.1s steps(1, end) infinite;
}

/* The real field: over the cells, every glyph and the caret transparent,
   so typing, pasting, autofill and screen readers all reach it. */
.tk-wl__code-input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: transparent;
  -webkit-text-fill-color: transparent;
  caret-color: transparent;
  font-size: 16px;
  appearance: none;
  cursor: text;
}

.tk-wl__code-input:focus-visible {
  outline: none;
}

.tk-wl__code-input::selection {
  background: transparent;
}

/* ----- On the list: the armed trigger ----- */
.tk-wl__trigger {
  position: relative;
  height: 6px;
  margin-top: 2.1rem;
  background: repeating-linear-gradient(-45deg, var(--ink) 0 4px, transparent 4px 9px);
  background-size: 12.73px 6px;
  animation: tk-wl-march 0.6s linear infinite;
}

.tk-wl__trigger .tk-chip {
  position: absolute;
  left: 0;
  bottom: 0.85rem;
}

@keyframes tk-wl-march {
  to {
    background-position: 12.73px 0;
  }
}

/* Phones. The dialog is a full-screen sheet there, and it opens with the
   keyboard coming up over its lower half. iOS scrolls a focused field that
   isn't 50px clear of the keyboard to the middle of what's left, which
   takes the title off the top, so everything down to the field packs into
   the strip over the keyboard (about 390px on a 393×852 iPhone): tighter
   panels, the label close over its title, the title on one line fitted to
   the width and shorter code cells. /waitlist/'s flow shares the layout.
   The dialog's close is a 44px square. (Phones too short for even that
   open a step on its title instead of its field: js/waitlist.js.) */
@media (max-width: 560px) {
  .tk-wl--dialog .tk-wl__bar {
    height: 2.75rem;
  }

  .tk-wl__close {
    min-width: 2.75rem;
    padding: 0;
    font-size: 1rem;
    letter-spacing: 0;
  }

  .tk-wl__body {
    padding-top: var(--pad);
  }

  .tk-wl__panel {
    gap: 0.9rem;
  }

  .tk-wl__panel > .tk-label:first-child {
    margin-bottom: -0.4rem;
  }

  /* One row (art-kit.js fits it as one); the first --fit fits any phone
     until the fit runs. */
  .tk-wl__title {
    --fit: 6vw;
    font-size: min(var(--fit), 5.25rem);
    white-space: nowrap;
  }

  .tk-wl__title > span {
    display: inline;
    font-size: inherit;
  }

  /* The italic's overhang room, only where the line ends. */
  .tk-wl__title > span:not(:last-child) {
    padding-right: 0;
  }

  .tk-wl__lede {
    line-height: 1.45;
  }

  .tk-wl__row {
    flex-direction: column;
  }

  .tk-wl__row .tk-field {
    flex: none;
    border-right: 1px solid var(--ink);
    border-bottom: 0;
  }

  .tk-wl__row .tk-btn,
  .tk-wl__actions .tk-btn {
    width: 100%;
  }

  .tk-wl__cell {
    height: 3.5rem;
  }

  .tk-wl__cell .tk-seg {
    height: 2rem;
  }
}

/* =========================================================================
   The page (/waitlist/): the masthead and the copy beside the flow, framed
   on its plate over the dot screen (stacked on narrow screens).
   ========================================================================= */
.tk-wlpage {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  margin-inline: var(--frame);
  min-height: calc(100svh - var(--nav-h));
}

.tk-wlpage__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.75rem;
  padding: calc(var(--pad) * 1.4) var(--pad);
}

.tk-wlpage__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.9rem;
}

.tk-wlpage__mast {
  --fit: clamp(3rem, 9vw, 8rem);
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  line-height: 0.86;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}

.tk-wlpage__mast > span {
  display: block;
  width: max-content;
  padding: 0.02em 0.12em 0.04em 0;
  font-size: var(--fit);
}

.tk-wlpage__mast em {
  font-style: italic;
}

.tk-wlpage__lede {
  max-width: 26rem;
  font-size: clamp(1.05rem, 1.35vw, 1.2rem);
  line-height: 1.45;
  text-wrap: pretty;
}

.tk-wlpage__kit > li {
  padding: 0.45rem 0.7rem;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.tk-wlpage__flow {
  display: grid;
  place-items: center;
  padding: calc(var(--pad) * 1.6) calc(var(--pad) * 1.4);
  border-left: 1px solid var(--rule);
  background-image: radial-gradient(circle, var(--ink-faint) 1.1px, transparent 1.4px);
  background-size: 12px 12px;
}

.tk-wlpage__flow > .tk-wl {
  width: 100%;
  max-width: 36rem;
  border: 1px solid var(--ink);
  background: var(--paper-2);
  box-shadow: 0.9rem 0.9rem 0 0 var(--ink-3);
}

@media (max-width: 860px) {
  .tk-wlpage {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  .tk-wlpage__flow {
    border-left: 0;
    border-top: 1px solid var(--rule);
  }
}

@media (max-width: 560px) {
  .tk-wlpage__flow {
    padding: var(--pad) calc(var(--pad) + 0.9rem) calc(var(--pad) + 0.9rem) var(--pad);
  }
}