/* weekly-class-material.css — the /education/weekly-class-material 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, never ember. Ember appears only as
   text accents (operator request, 2026-10-08), through --accent-text near the end. */

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); }

.weekly {
  padding: calc(var(--sh-nav-h) + var(--sh-nav-top) + clamp(40px, 8vw, 96px)) 0 clamp(56px, 9vw, 112px);
}
.weekly-col { max-width: 640px; margin-inline: 0; position: relative; }
.weekly-col > :not(.orbit) { position: relative; z-index: 1; }
@media (min-width: 700px) { .weekly-col { margin-inline: auto; } }

.weekly .eyebrow {
  display: flex; align-items: center; gap: 12px; margin: 0 0 20px;
}
.weekly .eyebrow::before { content: ""; width: 28px; height: 1px; }

.weekly h1 {
  margin: 0; text-wrap: balance;
  font: 300 clamp(34px, 7vw, 56px)/1.04 var(--sh-display); letter-spacing: -.025em;
}
.weekly .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 ---------- */
#weekly-form { margin-top: 28px; display: grid; gap: 32px; }
.field { display: grid; gap: 8px; }
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"] {
  width: 100%; min-height: 56px; padding: 14px 16px;
  background: var(--sh-surface); color: var(--sh-signal);
  border: 1px solid var(--sh-line); border-radius: 14px;
  font: 400 16px/1.4 var(--sh-body); /* 16px keeps iOS from zooming on focus */
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.field input:hover { border-color: var(--sh-muted); }
.field input:focus-visible,
.sh-btn: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 label { font: 400 13.5px/1.6 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%; border: 0; cursor: pointer; }
#submit:disabled { opacity: .6; cursor: default; transform: none; }
/* Room under the button so a phone keyboard never leaves it hidden. */
#weekly-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;
}
/* The heading takes programmatic focus so a screen reader lands on it; it is not
   a control, so it gets no ring (the ring read as a stray white box). */
.ok h1:focus, .ok h1:focus-visible { outline: none; }

/* A whisper of grain over the panel removes the flat, digital look. */
.ok::after {
  content: ""; position: absolute; inset: -40px -24px; z-index: 0; pointer-events: none; opacity: .045;
  -webkit-mask-image: radial-gradient(closest-side, #000 25%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 25%, transparent 100%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.ok-badge { display: block; margin: 0 0 20px; fill: none; stroke: var(--sh-signal); stroke-width: 1.5; }
.ok-tick { stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }

/* Resource deck: one wide primary, two equal secondaries, one shared system
   (radius, arrow, index, hover). Neutral surfaces; ember only on the index text. */
.res-deck { margin-top: 28px; display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 560px) {
  .res-deck { grid-template-columns: 1fr 1fr; }
  .res-primary { grid-column: 1 / -1; }
}
.res {
  position: relative; display: flex; align-items: center; gap: 16px;
  min-height: 76px; padding: 16px 20px; text-decoration: none;
  background: var(--sh-surface); color: var(--sh-signal);
  border: 1px solid var(--sh-line); border-radius: 16px;
  transition: transform .2s ease-out, border-color .2s, background-color .2s;
}
.res:focus-visible { outline: 2px solid var(--sh-signal); outline-offset: 3px; }
@media (hover: hover) {
  .res:hover { border-color: var(--sh-muted); transform: translateY(-2px); }
}
.res:active { transform: translateY(0) scale(.985); transition-duration: .1s; }
.res > * { position: relative; }
.res-primary {
  min-height: 96px; padding: 20px 24px;
  background: linear-gradient(180deg, rgb(255 255 255 / .55), rgb(255 255 255 / 0) 60%), var(--sh-signal);
  color: var(--sh-void); border-color: var(--sh-signal);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .9), 0 22px 60px -24px rgb(255 255 255 / .28);
}
@media (hover: hover) { .res-primary:hover { border-color: var(--sh-signal); } }
.res-n { flex: none; letter-spacing: .22em; }
/* Hover light: follows the pointer (--mx/--my set in the page script); neutral. */
.res:not(.res-primary)::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgb(255 255 255 / .09), transparent 70%);
  opacity: 0; transition: opacity .25s;
}
@media (hover: hover) { .res:not(.res-primary):hover::before { opacity: 1; } }
.res-txt { flex: 1; display: grid; gap: 2px; min-width: 0; }
.res-t { font: 400 clamp(17px, 2.4vw, 20px)/1.25 var(--sh-display); }
.res-primary .res-t { font-size: clamp(20px, 3vw, 26px); }
.res-s { font-size: 14px; color: var(--sh-slate); }
.res-primary .res-s { color: rgba(0, 0, 0, .62); }
.res-go {
  flex: none; fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease-out;
}
@media (hover: hover) { .res:hover .res-go { transform: translate(3px, -3px); } }

/* Orbits: three thin rings turning behind the form and the confirmation, centred near the eyebrow, each
   carrying one small "planet". Decorative (aria-hidden), neutral, transform-only.
   .weekly clips them so they never widen the page. */
.weekly { position: relative; overflow: hidden; overflow: clip; }
.ok { position: relative; }
.ok > * { position: relative; z-index: 1; }
.orbit {
  position: absolute; left: -476px; top: -476px; width: 1000px; height: 1000px; z-index: 0; pointer-events: none;
  -webkit-mask-image: radial-gradient(circle closest-side, #000 55%, transparent 100%);
          mask-image: radial-gradient(circle closest-side, #000 55%, transparent 100%);
}
.o {
  position: absolute; left: 50%; top: 50%; border-radius: 50%;
  border: 1px solid rgb(255 255 255 / .13);
  animation: orbit-spin linear infinite; will-change: transform;
}
.o::after {
  content: ""; position: absolute; left: 50%; top: 0; border-radius: 50%;
  background: var(--sh-signal); transform: translate(-50%, -50%);
  box-shadow: 0 0 14px 3px rgb(255 255 255 / .38);
}
.o1 { width: 340px; height: 340px; margin: -170px 0 0 -170px; animation-duration: 38s; }
.o1::after { width: 6px; height: 6px; opacity: .85; }
.o2 { width: 600px; height: 600px; margin: -300px 0 0 -300px; animation-duration: 64s; animation-direction: reverse; border-color: rgb(255 255 255 / .1); }
.o2::after { width: 9px; height: 9px; background: transparent; border: 1px solid var(--sh-signal); opacity: .7; }
.o3 { width: 900px; height: 900px; margin: -450px 0 0 -450px; animation-duration: 110s; border-color: rgb(255 255 255 / .07); }
.o3::after { width: 5px; height: 5px; opacity: .5; }
/* A tilted, turning ellipse gives the flat circles a sense of depth. */
.o4 {
  width: 760px; height: 760px; margin: -380px 0 0 -380px;
  border-color: rgb(255 255 255 / .09); transform: rotate(-24deg) scaleY(.36);
  animation-name: orbit-tilt; animation-duration: 90s;
}
.o4::after { display: none; }
@keyframes orbit-tilt { to { transform: rotate(336deg) scaleY(.36); } }
@keyframes orbit-spin { to { transform: rotate(360deg); } }

/* Entrance: runs when the panel is un-hidden; staggered, transform/opacity only. */
@keyframes ok-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes ok-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.ok-badge, .ok h1, .res, .ok .note { animation: ok-rise .36s ease-out backwards; }
.ok h1 { animation-delay: .06s; }
.res:nth-child(1) { animation-delay: .14s; }
.res:nth-child(2) { animation-delay: .2s; }
.res:nth-child(3) { animation-delay: .26s; }
.ok .note { animation-delay: .34s; }
.ok-ring, .ok-tick { stroke-dasharray: 1; stroke-dashoffset: 0; animation: ok-draw .5s ease-out .1s both; }

/* ---------- form, luxury pass (neutral; ember stays cost) ---------- */
.grp { display: grid; gap: 18px; margin: 0; padding: 0; border: 0; min-width: 0; }
.grp > legend { padding: 0; margin: 0 0 18px; color: var(--sh-muted); letter-spacing: .18em; }

.field:not(.field-check) > label { font: 500 11px/1.4 var(--sh-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--sh-slate); }
.field:not(.field-check) > label .muted { text-transform: none; letter-spacing: 0; font-family: var(--sh-body); }
.field input[type="text"]:focus,
.field input[type="email"]:focus,
.field input[type="tel"]:focus {
  border-color: var(--sh-signal);
  box-shadow: 0 0 0 4px rgb(255 255 255 / .09);
}
.hint { font-size: 12.5px; line-height: 1.5; }
.err { animation: err-in .16s ease-out; }
@keyframes err-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* Consent rows: custom box, same legal text; the label and the box are the targets. */
.field-check {
  padding: 14px 16px; border: 1px solid var(--sh-line); border-radius: 14px; min-height: 56px;
  background: rgb(255 255 255 / .02);
  transition: border-color .2s, background-color .2s;
}
@media (hover: hover) { .field-check:hover { border-color: var(--sh-muted); } }
.field-check:has(input:checked) { border-color: rgb(255 255 255 / .38); background: rgb(255 255 255 / .04); }
.field-check input {
  -webkit-appearance: none; appearance: none; flex: none; cursor: pointer;
  width: 24px; height: 24px; margin: 2px 0 0; border-radius: 8px;
  background: var(--sh-surface) center / 16px no-repeat; border: 1px solid var(--sh-muted);
  transition: background-color .15s, border-color .15s;
}
.field-check input:checked {
  background-color: var(--sh-signal); border-color: var(--sh-signal);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230a0a0a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E");
}
/* The optional Meta box is visibly secondary: tag, smaller, quieter border. */
.field-opt { border-style: dashed; padding-top: 12px; row-gap: 8px; }
.field-opt::before {
  content: "Opcional"; content: "Opcional" / ""; grid-column: 1 / -1; font: 500 10px/1 var(--sh-mono);
  letter-spacing: .18em; text-transform: uppercase; color: var(--sh-muted);
}
.field-opt label { font-size: 12.5px; color: var(--sh-muted); }

/* Episode "ticket". */
.episode-card {
  background: linear-gradient(180deg, rgb(255 255 255 / .03), rgb(255 255 255 / 0) 70%), var(--sh-surface);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .08);
}

/* Submit = the same lit slab as the primary result card. */
#submit {
  min-height: 60px; border-radius: 16px;
  background: linear-gradient(180deg, rgb(255 255 255 / .55), rgb(255 255 255 / 0) 60%), var(--sh-signal);
  color: var(--sh-void);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .9), 0 22px 60px -24px rgb(255 255 255 / .28);
  transition: transform .2s ease-out, box-shadow .2s;
}
@media (hover: hover) { #submit:not(:disabled):hover { transform: translateY(-2px); } }
#submit:not(:disabled):active { transform: scale(.985); transition-duration: .1s; }

/* Form entrance (runs when the form is un-hidden), staggered, transform/opacity only. */
#weekly-form .grp, #submit, .episode-card { animation: ok-rise .36s ease-out backwards; }
#weekly-form .grp:nth-of-type(1) { animation-delay: .06s; }
#weekly-form .grp:nth-of-type(2) { animation-delay: .14s; }
#submit { animation-delay: .22s; }

/* ---------- orange accents on text (operator request 2026-10-08) ----------
   One variable so the whole accent can be dialled back in one line. Text only,
   never a button fill (ADR-026). #C96B2E on --sh-void is about 5.3:1. */
.weekly { --accent-text: rgb(var(--sh-ember-rgb)); }
.weekly .eyebrow { color: var(--accent-text); }
.weekly .eyebrow::before { background: var(--accent-text); }
.weekly h1 .hl { font-style: normal; color: var(--accent-text); }
.grp > legend { color: var(--accent-text); }
#episode-label { color: var(--accent-text); }
.field-opt::before { color: var(--accent-text); }
.ok-name { color: var(--accent-text); }

/* Submit label: real bold. Outfit 600 is loaded; JetBrains Mono only has 400/500. */
#submit { font-family: var(--sh-display); font-weight: 600; letter-spacing: .08em; font-size: 15px; }

/* Confirmation accents: the badge, the 01/02/03 index and the next-class line.
   On the light primary card the index uses a darkened ember (about 6:1 there). */
.ok-ring { stroke: var(--accent-text); stroke-opacity: .55; }
.ok-tick { stroke: var(--accent-text); }
.res-n { color: var(--accent-text); }
.res-primary .res-n { color: color-mix(in srgb, rgb(var(--sh-ember-rgb)) 68%, #000); }
#ok-next { color: var(--accent-text); font-family: var(--sh-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }

/* Windows high-contrast: let the browser draw the checkbox so the tick shows. */
@media (forced-colors: active) {
  .field-check input { -webkit-appearance: auto; appearance: auto; background-image: none; }
}

@media (prefers-reduced-motion: reduce) {
  .field input { transition: none; }
  .ok-badge, .ok h1, .res, .ok .note, .ok-ring, .ok-tick, .o { animation: none; }
  .res, .res-go { transition: none; }
  #weekly-form .grp, #submit, .episode-card, .err { animation: none; }
  .field input, .field-check, .field-check input, #submit { transition: none; }
  #submit:not(:disabled):hover, #submit:not(:disabled):active { transform: none; }
  .res:hover, .res:hover .res-go { transform: none; }
  .res:not(.res-primary)::before { transition: none; }
}