/* clase.css — the /clase registration page (ADR-053). Loaded after shell.css
   and uses its --sh-* tokens; nothing here restyles the shell. Action is
   neutral (ADR-026): the brightest neutral on the ground, ember never. */

html { scroll-padding-bottom: 200px; }

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; background: var(--sh-void); color: var(--sh-signal);
  font: 400 16px/1.6 var(--sh-body);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
[hidden] { display: none !important; }
.wrap { width: min(1120px, 100%); margin-inline: auto; padding-inline: 16px; }
.mono { font-family: var(--sh-mono); text-transform: uppercase; letter-spacing: .14em; font-size: 11px; }
.muted { color: var(--sh-muted); }

.clase {
  padding: calc(var(--sh-nav-h) + var(--sh-nav-top) + clamp(40px, 8vw, 96px)) 0 clamp(56px, 9vw, 112px);
}
.clase-col { max-width: 640px; margin-inline: 0; }
@media (min-width: 700px) { .clase-col { margin-inline: auto; } }

.clase .eyebrow {
  display: flex; align-items: center; gap: 12px; margin: 0 0 20px; color: var(--sh-muted);
}
.clase .eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--sh-muted); }

.clase h1 {
  margin: 0; text-wrap: balance;
  font: 300 clamp(34px, 7vw, 56px)/1.04 var(--sh-display); letter-spacing: -.025em;
}
.clase .sub { margin: 16px 0 0; color: var(--sh-slate); max-width: 46ch; }
.note { margin: 20px 0 0; color: var(--sh-slate); font-size: 15px; }

.episode-card {
  margin: 28px 0 0; padding: 20px;
  background: var(--sh-surface); border: 1px solid var(--sh-line); border-radius: 16px;
}
.episode-card p { margin: 0; }
.episode-title { margin-top: 8px !important; font: 400 20px/1.3 var(--sh-display); }
#episode-date { margin-top: 6px !important; font-size: 14px; }

/* ---------- form ---------- */
#clase-form { margin-top: 28px; display: grid; gap: 22px; }
.field { display: grid; gap: 8px; }
.field > label { font: 500 14px/1.4 var(--sh-body); }
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"] {
  width: 100%; min-height: 48px; padding: 12px 14px;
  background: var(--sh-surface); color: var(--sh-signal);
  border: 1px solid var(--sh-line); border-radius: 12px;
  font: 400 16px/1.4 var(--sh-body); /* 16px keeps iOS from zooming on focus */
  transition: border-color .2s;
}
.field input:hover { border-color: var(--sh-muted); }
.field input:focus-visible,
.sh-btn:focus-visible,
.ok h1:focus-visible,
.field-check input:focus-visible {
  outline: 2px solid var(--sh-signal); outline-offset: 3px;
}
.field input[aria-invalid="true"] { border-color: var(--sh-signal); }
.hint { margin: 0; color: var(--sh-muted); font-size: 13px; }

/* Neutral error: bright text, a rule and a "!" -- never colour alone. */
.err {
  margin: 0; padding-left: 12px; border-left: 2px solid var(--sh-signal);
  font-size: 14px; line-height: 1.45;
}
.err::before { content: "! "; font-weight: 500; }

.field-check {
  grid-template-columns: 24px 1fr; column-gap: 14px; align-items: start;
}
.field-check input {
  width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--sh-signal);
}
.field-check label { font: 400 14px/1.55 var(--sh-body); color: var(--sh-slate); }
.field-check label a { color: var(--sh-signal); }
/* A tall target for the phone: the whole sentence toggles the box. */
.field-check label { padding-block: 2px; cursor: pointer; }
.field-check .err { grid-column: 1 / -1; }

/* Honeypot: off-screen rather than display:none, which bots detect. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

#submit { justify-content: center; width: 100%; min-height: 56px; border: 0; cursor: pointer; font-family: var(--sh-mono); }
#submit:disabled { opacity: .6; cursor: default; transform: none; }
/* Room under the button so a phone keyboard never leaves it hidden. */
#clase-form { padding-bottom: 8px; scroll-margin-bottom: 120px; }
#submit { scroll-margin-bottom: 120px; }

/* ---------- success ---------- */
.ok h1 {
  margin: 0; text-wrap: balance;
  font: 300 clamp(30px, 6vw, 44px)/1.08 var(--sh-display); letter-spacing: -.02em;
}
.ok-btns { margin-top: 28px; flex-direction: column; align-items: stretch; }
.ok-btns .sh-btn { justify-content: center; text-align: center; min-height: 56px; }
@media (min-width: 700px) { .ok-btns { flex-direction: row; flex-wrap: wrap; } }

@media (prefers-reduced-motion: reduce) {
  .field input { transition: none; }
}