/* ═══════════════════════════════════════════════════════════════
   AUTH — the register page.
   Adds the form-side pseudo-components (c-fieldset, c-choice,
   c-check, c-strength, c-preview, c-alert) and the two-column
   shell that carries them. Same rules as everywhere else:
   phone-first, ornament from ::before / ::after, tokens only.
   ═══════════════════════════════════════════════════════════ */

/* ── s-header--slim ────────────────────────────────────────── */
.s-header--slim .s-header__actions { gap: 0.75rem; }
.s-header__aside {
  display: none;
  font-family: var(--font-ui);
  font-size: var(--fs-200);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-mute);
}

/* ── s-auth shell ──────────────────────────────────────────── */
.s-auth {
  position: relative;
  isolation: isolate;
  padding-block: var(--sp-7) var(--sp-9);
  overflow: clip;
}
.s-auth__inner { display: grid; gap: var(--sp-7); }

.s-auth__art { position: absolute; inset: 0 0 auto; height: 40rem; z-index: -1; pointer-events: none; }
.s-auth__sigil {
  position: absolute;
  left: 50%;
  top: 0;
  width: min(130vw, 44rem);
  aspect-ratio: 1;
  translate: -50% -42%;
  opacity: .42;
}
.s-auth__sigil svg { width: 100%; height: 100%; }
.s-auth__sigil .sig {
  stroke: color-mix(in oklab, var(--gold-500) 32%, transparent);
  stroke-width: 1;
  transform-box: fill-box;
  transform-origin: center;
}
.s-auth__sigil .sig--spin-slow { animation: spin 110s linear infinite; }
.s-auth__sigil .sig--spin-rev {
  stroke: color-mix(in oklab, var(--ember-400) 28%, transparent);
  animation: spin 160s linear infinite reverse;
}
.s-auth__sigil .sig--faint { stroke: color-mix(in oklab, var(--arcane-400) 16%, transparent); }
.s-auth__vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(48rem 24rem at 50% 0%, color-mix(in oklab, var(--ember-600) 30%, transparent), transparent 66%),
    linear-gradient(180deg, transparent 52%, var(--bg) 98%);
}

.s-auth__head { margin-bottom: var(--sp-6); }
.s-auth__head .c-lede { margin-top: var(--sp-3); }

/* ── c-backlink ────────────────────────────────────────────── */
.c-backlink {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: var(--sp-5);
  font-family: var(--font-ui);
  font-size: var(--fs-200);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-mute);
  transition: color var(--dur-2) var(--ease);
}
.c-backlink:hover { color: var(--gold-300); }
.c-backlink .c-ico { transition: translate var(--dur-2) var(--ease); }
.c-backlink:hover .c-ico { translate: -3px 0; }

/* ── c-alert ───────────────────────────────────────────────── */
.c-alert {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: 0.85rem;
  margin-bottom: var(--sp-6);
  padding: var(--sp-4) var(--sp-5);
  color: var(--text-dim);
  background: color-mix(in oklab, var(--blood-400) 12%, transparent);
  border: 1px solid color-mix(in oklab, var(--blood-400) 40%, transparent);
  clip-path: var(--cut);
}
.c-alert .c-ico { color: var(--blood-400); margin-top: 0.15rem; }
.c-alert__title { font-family: var(--font-display); font-weight: 700; color: var(--text-hi); }
.c-alert__list { display: grid; gap: 0.3rem; margin-top: 0.5rem; font-size: var(--fs-300); }
.c-alert__list li { position: relative; padding-left: 0.9rem; }
.c-alert__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 4px;
  height: 4px;
  rotate: 45deg;
  background: var(--blood-400);
}
.c-alert__list a { color: var(--gold-300); text-decoration: underline; text-underline-offset: 3px; }

/* ── c-form / c-fieldset ───────────────────────────────────── */
.c-form { display: grid; gap: var(--sp-6); }

.c-fieldset {
  position: relative;
  display: grid;
  gap: var(--sp-4);
  min-width: 0;          /* fieldsets refuse to shrink otherwise */
  margin: 0;
  padding: var(--sp-6) 0 0;
  border: 0;
  border-top: 1px solid var(--line-soft);
}
.c-fieldset:first-of-type { border-top: 0; padding-top: 0; }

.c-fieldset__legend {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0;
  margin-bottom: var(--sp-1);
  font-family: var(--font-display);
  font-size: var(--fs-600);
  font-weight: 700;
  color: var(--text-hi);
}
/* the step number, drawn as a rune */
.c-fieldset__legend::before {
  content: attr(data-n);
  display: grid;
  place-items: center;
  width: 1.85rem;
  height: 1.85rem;
  flex: none;
  font-family: var(--font-ui);
  font-size: var(--fs-200);
  font-weight: 700;
  color: var(--gold-300);
  background: color-mix(in oklab, var(--gold-600) 18%, transparent);
  border: 1px solid color-mix(in oklab, var(--gold-500) 42%, transparent);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.c-fieldset[data-step="1"] .c-fieldset__legend::before { content: "1"; }
.c-fieldset[data-step="2"] .c-fieldset__legend::before { content: "2"; }
.c-fieldset[data-step="3"] .c-fieldset__legend::before { content: "3"; }

/* ── c-field additions ─────────────────────────────────────── */
.c-field--narrow { max-width: 16rem; }
.c-field__wrap { position: relative; display: block; }
.c-field__icon {
  position: absolute;
  left: 0.9rem;
  top: 50%;
  translate: 0 -50%;
  color: var(--text-mute);
  pointer-events: none;
  transition: color var(--dur-2) var(--ease);
}
.c-field__wrap:focus-within .c-field__icon { color: var(--gold-400); }
.c-field__input--iconed { padding-left: 2.7rem; }
.c-field__input--action { padding-right: 3rem; }
.c-field__input[aria-invalid="true"] { border-color: color-mix(in oklab, var(--blood-400) 65%, transparent); }
.c-field__input[type="date"] { color-scheme: dark; }

.c-field__toggle {
  position: absolute;
  right: 2px;
  top: 50%;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  translate: 0 -50%;
  color: var(--text-mute);
  transition: color var(--dur-2) var(--ease);
}
.c-field__toggle:hover { color: var(--gold-300); }

.c-field__hint { font-size: var(--fs-200); color: var(--text-mute); }

/* ── c-strength ────────────────────────────────────────────── */
.c-strength {
  --sc: var(--steel-400);
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 0.15rem;
}
.c-strength__track { display: flex; gap: 4px; flex: 1; }
.c-strength__track i {
  flex: 1;
  height: 4px;
  background: color-mix(in oklab, var(--void-600) 90%, transparent);
  clip-path: polygon(2px 0, 100% 0, calc(100% - 2px) 100%, 0 100%);
  transition: background-color var(--dur-2) var(--ease);
}
.c-strength__label {
  min-width: 5.5rem;
  font-family: var(--font-ui);
  font-size: var(--fs-100);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--sc);
  text-align: right;
}
.c-strength[data-score="1"] { --sc: var(--blood-400); }
.c-strength[data-score="2"] { --sc: var(--ember-400); }
.c-strength[data-score="3"] { --sc: var(--gold-400); }
.c-strength[data-score="4"] { --sc: var(--venom-400); }
.c-strength[data-score="1"] .c-strength__track i:nth-child(-n + 1),
.c-strength[data-score="2"] .c-strength__track i:nth-child(-n + 2),
.c-strength[data-score="3"] .c-strength__track i:nth-child(-n + 3),
.c-strength[data-score="4"] .c-strength__track i:nth-child(-n + 4) {
  background: var(--sc);
  box-shadow: 0 0 10px -2px var(--sc);
}

/* ── c-choice — the class picker ───────────────────────────── */
.c-choices { display: grid; gap: 0.6rem; }

.c-choice { position: relative; min-width: 0; }
.c-choice__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.c-choice__input:disabled { cursor: not-allowed; }

.c-choice__label {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  align-items: center;
  gap: 0.85rem;
  min-height: 62px;
  padding: 0.7rem 2rem 0.7rem 0.9rem;
  background: color-mix(in oklab, var(--void-800) 70%, transparent);
  border: 1px solid var(--line-soft);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  cursor: pointer;
  transition: border-color var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease),
              translate var(--dur-2) var(--ease);
}
/* the selected-state glow, drawn rather than layered on */
.c-choice__label::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, color-mix(in oklab, var(--rarity) 20%, transparent), transparent 62%);
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease);
}
/* the tick that appears on selection */
.c-choice__label::after {
  content: "";
  position: absolute;
  right: 0.9rem;
  top: 50%;
  width: 0.5rem;
  height: 0.9rem;
  translate: 0 -60%;
  rotate: 45deg;
  border: solid var(--rarity);
  border-width: 0 2px 2px 0;
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease);
}

.c-choice__input:hover:not(:disabled) + .c-choice__label { border-color: var(--line); translate: 0 -1px; }
.c-choice__input:focus-visible + .c-choice__label { outline: 2px solid var(--focus); outline-offset: 3px; }
.c-choice__input:checked + .c-choice__label {
  border-color: color-mix(in oklab, var(--rarity) 62%, transparent);
  box-shadow: 0 10px 28px -18px var(--rarity);
}
.c-choice__input:checked + .c-choice__label::before { opacity: 1; }
.c-choice__input:checked + .c-choice__label::after { opacity: 1; }

.c-choice__sigil {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  color: var(--rarity);
}
.c-choice__sigil::before {
  content: "";
  position: absolute;
  inset: 0.15rem;
  border: 1px solid color-mix(in oklab, var(--rarity) 40%, transparent);
  rotate: 45deg;
}
.c-choice__text { display: grid; gap: 0.1rem; min-width: 0; }
.c-choice__name {
  font-family: var(--font-display);
  font-size: var(--fs-400);
  font-weight: 700;
  color: var(--text-hi);
}
.c-choice__role {
  font-family: var(--font-ui);
  font-size: var(--fs-100);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: color-mix(in oklab, var(--rarity) 72%, white);
}
.c-choice__state {
  margin-top: 0.15rem;
  font-family: var(--font-ui);
  font-size: var(--fs-50);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-mute);
}
.c-choice:not([data-locked="true"]) .c-choice__state { color: var(--venom-400); }

.c-choice[data-locked="true"] .c-choice__label { opacity: .48; cursor: not-allowed; }
.c-choice[data-locked="true"] .c-choice__label:hover { translate: none; }

/* ── c-check ───────────────────────────────────────────────── */
.c-check { position: relative; display: grid; grid-template-columns: 1.4rem 1fr; gap: 0.8rem; }
.c-check__input {
  position: absolute;
  width: 1.4rem;
  height: 1.4rem;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.c-check__label {
  grid-column: 2;
  font-size: var(--fs-300);
  color: var(--text-dim);
  cursor: pointer;
}
.c-check__label span { display: block; margin-top: 0.15rem; font-size: var(--fs-200); color: var(--text-mute); }
.c-check__label a { color: var(--gold-300); text-decoration: underline; text-underline-offset: 3px; }
.c-check__label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.1rem;
  width: 1.4rem;
  height: 1.4rem;
  background: color-mix(in oklab, var(--void-950) 70%, transparent);
  border: 1px solid var(--line);
  clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
  transition: background-color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.c-check__label::after {
  content: "";
  position: absolute;
  left: 0.5rem;
  top: 0.35rem;
  width: 0.35rem;
  height: 0.7rem;
  rotate: 45deg;
  border: solid var(--void-950);
  border-width: 0 2px 2px 0;
  opacity: 0;
  transition: opacity var(--dur-1) var(--ease);
}
.c-check__input:hover + .c-check__label::before { border-color: var(--line-strong); }
.c-check__input:focus-visible + .c-check__label::before { outline: 2px solid var(--focus); outline-offset: 3px; }
.c-check__input:checked + .c-check__label::before { background: var(--gold-400); border-color: var(--gold-400); }
.c-check__input:checked + .c-check__label::after { opacity: 1; }
.c-check__input[aria-invalid="true"] + .c-check__label::before {
  border-color: color-mix(in oklab, var(--blood-400) 70%, transparent);
}

/* ── c-form__note ──────────────────────────────────────────── */
.c-form__note {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: var(--fs-200);
  color: var(--text-mute);
}
.c-form__note .c-ico { margin-top: 0.2rem; flex: none; }

/* ── c-done — what the form becomes on success ─────────────── */
.c-done__panel {
  --rarity: var(--venom-400);
  display: grid;
  justify-items: center;
  gap: 0.75rem;
  padding: var(--sp-7) var(--sp-5);
  text-align: center;
}
.c-done__mark {
  display: grid;
  place-items: center;
  width: 3.75rem;
  height: 3.75rem;
  color: var(--venom-400);
  background: radial-gradient(circle, color-mix(in oklab, var(--venom-400) 20%, transparent), transparent 70%);
  border: 1px solid color-mix(in oklab, var(--venom-400) 45%, transparent);
  rotate: 45deg;
}
.c-done__mark .c-ico { rotate: -45deg; }
.c-done__panel h2 { font-size: var(--fs-700); }
.c-done__panel h2:focus-visible { outline: 2px solid var(--focus); outline-offset: 6px; }
.c-done__panel p { max-width: 42ch; color: var(--text-dim); }
.c-done__panel strong { color: var(--gold-300); font-weight: 600; }
.c-done__note { font-size: var(--fs-200); color: var(--text-mute); }
.c-done__panel .c-btn { margin-top: var(--sp-3); }

/* ── c-preview ─────────────────────────────────────────────── */
.c-preview {
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  padding-top: var(--sp-6);
  text-align: center;
}
.c-preview__kicker {
  font-family: var(--font-ui);
  font-size: var(--fs-100);
  font-weight: 600;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-mute);
}
.c-preview__sigil {
  position: relative;
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  margin-block: 0.5rem 0.25rem;
  color: var(--rarity);
  background: radial-gradient(circle at 50% 45%, color-mix(in oklab, var(--rarity) 24%, transparent), transparent 68%);
  transition: color var(--dur-3) var(--ease);
}
.c-preview__sigil::before,
.c-preview__sigil::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid color-mix(in oklab, var(--rarity) 45%, transparent);
  rotate: 45deg;
}
.c-preview__sigil::after { inset: 8px; opacity: .4; rotate: 0deg; }
.c-preview__name {
  font-family: var(--font-display);
  font-size: var(--fs-600);
  font-weight: 700;
  color: var(--text-hi);
  overflow-wrap: anywhere;
}
.c-preview__name[data-empty] { color: var(--text-mute); font-style: italic; font-weight: 500; }
.c-preview__class {
  font-family: var(--font-ui);
  font-size: var(--fs-200);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: color-mix(in oklab, var(--rarity) 76%, white);
}
.c-preview .c-meters { width: 100%; margin-top: var(--sp-4); text-align: left; }
.c-preview__foot {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line-soft);
  font-size: var(--fs-200);
  color: var(--text-mute);
}

/* ── c-perks ───────────────────────────────────────────────── */
.c-perks { display: grid; gap: 0.6rem; margin-top: var(--sp-5); font-size: var(--fs-300); }
.c-perks li { display: grid; grid-template-columns: 1rem 1fr; gap: 0.7rem; align-items: start; color: var(--text-mute); }
.c-perks .c-ico { margin-top: 0.3rem; color: var(--gold-400); }

/* ── s-authfoot ────────────────────────────────────────────── */
.s-authfoot {
  padding-block: var(--sp-5);
  border-top: 1px solid var(--line-soft);
  font-size: var(--fs-200);
  color: var(--text-mute);
}
.s-authfoot .l-container { display: grid; gap: var(--sp-3); }

/* ═══════════════════════════ BREAKPOINTS ══════════════════ */

@media (min-width: 36rem) {
  .s-header__aside { display: inline; }
  .c-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s-authfoot .l-container { grid-template-columns: 1fr auto; align-items: center; }
}

@media (min-width: 64rem) {
  .s-auth { padding-block: var(--sp-8) var(--sp-10); }
  .s-auth__inner {
    grid-template-columns: minmax(0, 1fr) 21rem;
    gap: var(--sp-8);
    align-items: start;
  }
  .s-auth__aside { position: sticky; top: calc(var(--header-h) + var(--sp-5)); }
  .c-form { gap: var(--sp-7); }
}