/* Storytime Guru — For Educators and Testers.
   Page-local layer on top of shared/tokens.css (the warm-editorial WEBSITE system).
   tokens.css owns every brand value: color, type, spacing, radius, shadow, the
   band/card/chip/phone/button recipes. This file adds layout only. Any color, radius,
   shadow, or font that is not a tokens variable is a bug, not a new value. */

img { max-width: 100%; height: auto; display: block; }

/* ---------- Header ---------- */

.site-header {
  background: var(--paper);
  border-bottom: 1px solid var(--hairline);
}
.site-header__inner { padding-block: var(--sp-4); }

.lockup { display: flex; align-items: center; gap: var(--sp-3); }
.lockup__icon { width: 52px; height: auto; flex: none; }
.lockup__text { display: grid; gap: var(--sp-1); }
.lockup .wordmark { display: block; }
.lockup .byline { display: block; }
a.byline { color: var(--muted); text-decoration: none; width: fit-content; }
a.byline:hover { text-decoration: underline; }

/* ---------- Hero ---------- */

.hero__grid { display: grid; gap: var(--col-gap); align-items: center; }
.hero__copy { max-width: var(--measure); }
.hero__copy h1 { max-width: 20ch; margin-bottom: var(--gap-lead); }
.hero__close { margin-top: var(--gap-statement); }

.hero__art { justify-self: center; }
.hero__art img { width: 200px; }

/* ---------- Cards ---------- */

.flow { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--card-gap); }

/* The icon chip leads the card, on its own line above the eyebrow. */
.card > .chip { display: flex; margin-bottom: var(--gap-lead); }
.card > .eyebrow + h2 { margin-top: 0; }
.card h2 { margin-bottom: var(--gap-lead); }
.card--form h2 { margin-bottom: var(--gap-lead); }

/* Bulleted lists: purple check marks (Storytime's secondary accent) */

.marklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-4);
}
.marklist--tight { gap: var(--sp-3); }

.marklist li {
  position: relative;
  padding-left: var(--sp-8);
  max-width: var(--measure);
}

.marklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.28em;
  width: 20px;
  height: 20px;
  background-color: var(--stg-vibrant-purple);
  -webkit-mask-image: var(--check-mask);
  mask-image: var(--check-mask);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 20px 20px;
  mask-size: 20px 20px;
}

:root {
  --check-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.6 10.6l4.2 4.2L16.4 5.4'/%3E%3C/svg%3E");
}

/* ---------- Form ---------- */

.help--intro { margin: 0 0 var(--gap-content); max-width: var(--measure); }

.field input[type="text"], .field input[type="email"] { width: 100%; }
.field input[aria-invalid="true"] { border-color: #9B2C1E; }

.field--check {
  margin-top: var(--sp-6);
  align-items: center;
  min-height: var(--touch-min);
  padding-block: var(--sp-2);
}
/* tokens.css ships 22px; 24px meets the WCAG 2.5.8 minimum target size. */
.field--check input { margin-top: 0; flex: none; width: 24px; height: 24px; }
.field--check label { cursor: pointer; }

.prefill-note { font-size: var(--fs-caption); color: var(--stg-vibrant-purple); margin: 0; }

.error[hidden] { display: none; }
.error { margin: 0; font-weight: 600; }

/* The Turnstile iframe is a fixed 300px; at the 360px floor the card is narrower
   than that, so scroll it inside its own slot rather than pushing the page wide. */
.turnstile-slot { margin: var(--sp-6) 0 var(--sp-4); min-height: 66px; max-width: 100%; overflow-x: auto; }

.btn--block { width: 100%; }

.status {
  margin: var(--sp-3) 0 0;
  min-height: 1.4em;
  font-size: var(--fs-body-md);
  color: var(--muted);
}
.status[data-tone="error"] { color: #9B2C1E; font-weight: 600; }

/* ---------- Result ---------- */

.card--result { border-color: var(--stg-deep-blue); scroll-margin-top: var(--sp-6); }
.card--result[hidden] { display: none; }
/* Focus is moved here programmatically for screen readers; the blue border is the
   visible cue, and the container is not keyboard-reachable, so the UA ring is noise. */
.card--result:focus { outline: none; }
.card--result:not([hidden]) { animation: rise 420ms cubic-bezier(0.22, 0.7, 0.3, 1) both; }
@media (prefers-reduced-motion: reduce) { .card--result:not([hidden]) { animation: none; } }

.existing-note {
  color: var(--muted);
  font-size: var(--fs-body-md);
  margin: calc(-1 * var(--sp-2)) 0 0;
}
.existing-note[hidden] { display: none; }

.coderow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin: var(--gap-lead) 0 var(--sp-6);
}

.btn--copy { padding-inline: var(--sp-4); }

/* Open in app: the primary action, with the stores reachable directly beneath it. */
.openrow { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-6); }
.openrow .stores { margin-top: 0; }
.openrow .stores .btn { flex: 1 1 auto; }
.openrow .help { margin: 0; }
.openrow .status { margin: 0; min-height: 0; }
.openrow .status:empty { display: none; }

.code-inline { font-family: var(--font-mono); letter-spacing: 0.06em; color: var(--stg-deep-blue); }

/* ---------- Steps ---------- */

.steps {
  list-style: none;
  counter-reset: step;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-4);
}

.steps li {
  counter-increment: step;
  position: relative;
  padding-left: calc(var(--sp-8) + var(--sp-2));
  min-height: 32px;
  max-width: var(--measure);
}

.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: var(--tint-blue-bg);
  color: var(--stg-deep-blue);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-body-md);
}

.steps__text { display: block; padding-top: 3px; }

.stores { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-4); }
.stores .btn svg { flex: none; }

/* ---------- Privacy ---------- */

.privacy p { max-width: var(--measure); font-size: var(--fs-body-md); }
.privacy__h {
  display: inline;
  font-family: var(--font-heading);
  font-size: var(--fs-body-md);
  font-weight: 700;
  margin: 0 var(--sp-1) 0 0;
}
.privacy__h + p { display: inline; }

/* ---------- Footer ---------- */

.site-footer { padding-block: var(--sp-12); }
.site-footer__inner { display: grid; gap: var(--sp-2); }
.site-footer p { margin: 0; font-size: var(--fs-body-md); max-width: none; }
.footer__brand { font-family: var(--font-heading); font-weight: 700; color: var(--paper); }
.footer__links { color: var(--muted-on-dark); }
.footer__links a, .privacy a { color: var(--paper); }
.footer__links a { display: inline-block; padding-block: 2px; }
.privacy a { color: var(--stg-deep-blue); display: inline-block; padding-block: 2px; }
.footer__links > span { margin: 0 var(--sp-1); }

/* ---------- Desktop ---------- */

@media (min-width: 1025px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr) 280px; }
  .hero__art { justify-self: end; }
  .hero__art img { width: 280px; }

  /* Explanatory copy reads down the left column; the form (and, after issuance,
     the result that replaces it) holds the right rail. DOM order is unchanged,
     so the mobile / screen-reader sequence stays intro > form > steps > privacy. */
  .flow {
    grid-template-columns: minmax(0, 1fr) 26rem;
    gap: var(--col-gap);
    align-items: start;
  }
  .card--unlocks { grid-column: 1; grid-row: 1; }
  .card--form,
  .card--result { grid-column: 2; grid-row: 1 / span 3; }
  .card--steps { grid-column: 1; grid-row: 2; }
  .privacy { grid-column: 1; grid-row: 3; }
}

/* ---------- Entrance motion ---------- */

.reveal {
  animation: rise 520ms cubic-bezier(0.22, 0.7, 0.3, 1) both;
  animation-delay: var(--d, 0ms);
}

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

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

.nowrap { white-space: nowrap; }