/* ==========================================================================
   Auth pages (owner 2026-10-06): login, signup, forgot-password,
   reset-password, auth-link, device. Builds on the .auth split layout in
   css/app.css. Tokens only. Load AFTER css/app.css.
   To revert: delete this file, the six auth pages and js/pages/auth*.js,
   login.js, signup.js, forgot-password.js, reset-password.js, device.js.
   ========================================================================== */

/* ---------- form side: soft glow + faint pixel dots ---------- */
.auth-page { background: var(--ink); }
.auth-form-side { position: relative; isolation: isolate; min-width: 0; }
.auth-form-side::before,
.auth-form-side::after { content: ''; position: absolute; z-index: -1; inset: 0; pointer-events: none; }
.auth-form-side::before {
  background:
    radial-gradient(520px 420px at 50% 46%, rgba(220,20,60,.12), transparent 70%),
    radial-gradient(420px 300px at 10% 0%, rgba(255,140,0,.06), transparent 70%);
  animation: authGlow 9s ease-in-out infinite alternate;
}
.auth-form-side::after {
  background-image: radial-gradient(rgba(242,234,231,.07) 1px, transparent 1.5px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(440px 380px at 50% 46%, var(--ink), transparent 75%);
  mask-image: radial-gradient(440px 380px at 50% 46%, var(--ink), transparent 75%);
}
@keyframes authGlow { from { opacity: .7; } to { opacity: 1; } }

.auth-form-side .brand { align-self: flex-start; border-radius: 8px; }
.auth-box { gap: 22px; }
.auth-box:focus { outline: none; }

/* ---------- heading block ---------- */
.auth-head { display: grid; justify-items: start; min-width: 0; }
.auth-head h1 { text-wrap: balance; }
.auth-head h1:focus { outline: none; }
.auth-head .sub { margin: 10px 0 0; font-size: 15.5px; max-width: 42ch; text-wrap: pretty; }
.auth-head.swap h1, .auth-head.swap .sub { animation: authIn .3s var(--ease) both; }
.auth-head.swap .sub { animation-delay: 40ms; }

.auth-chip {
  display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px 0 10px; margin-bottom: 16px;
  border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--bone);
  background: rgba(220,20,60,.12); border: 1px solid rgba(220,20,60,.35);
}
.auth-chip svg { color: var(--accent); }

/* state mark: stepped-corner tile with a 32px pixel icon */
.auth-mark { --px-step: 4px; display: grid; place-items: center; width: 60px; height: 60px; margin-bottom: 20px; background: var(--panel-2); color: var(--bone); }
.auth-mark.ok { background: var(--ok-bg); color: var(--ok); }
.auth-mark.warn { background: var(--warn-bg); color: var(--warn); }
.auth-mark.bad { background: var(--bad-bg); color: var(--bad); }
.auth-mark.info { background: var(--info-bg); color: var(--info); }
.auth-mark.red { background: rgba(220,20,60,.15); color: var(--accent); }
.auth-mark:not([hidden]) { animation: markIn .36s var(--ease-spring) both; }
@keyframes markIn { from { opacity: 0; transform: scale(.7); } }

/* ---------- alerts (banner above the form) ---------- */
.auth-alert:empty { display: none; }
.auth-alert .banner { animation: alertIn .3s var(--ease-spring) both; }
.auth-alert .banner p { font-size: 14px; }
.auth-alert .banner p b { display: inline; color: var(--bone); font-weight: 600; font-variant-numeric: tabular-nums; }
.auth-alert .act { margin-top: 10px; }
@keyframes alertIn { from { opacity: 0; transform: translateY(-6px) scale(.985); } }

/* ---------- panels (one visible at a time) ---------- */
.auth-panel { display: grid; gap: 18px; min-width: 0; }
.auth-panel.enter { animation: authIn .34s var(--ease) both; }
@keyframes authIn { from { opacity: 0; transform: translateY(8px); } }

/* ---------- buttons ---------- */
.auth-box .btn { --h: 48px; }
.auth-box .btn-google {
  border-radius: 999px; height: 48px; gap: 12px; font-size: 15px;
  box-shadow: 0 10px 26px -16px rgba(8,5,6,.9);
  transition: background-color .2s, transform .25s var(--ease), box-shadow .25s;
}
.auth-box .btn-google:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -14px rgba(8,5,6,.95); }
.auth-box .btn-google:active { transform: translateY(1px); }
.auth-box .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; box-shadow: 0 0 0 7px var(--accent-glow); border-radius: 999px; }
.btn[aria-busy="true"] { opacity: 1; cursor: progress; }
.btn .spin { flex: none; }

/* ---------- fields ---------- */
.auth-box .input { height: 48px; }
.auth-box .input:hover:not(:focus):not([readonly]) { border-color: var(--dim); }
.auth-box .input-affix button { top: 8px; }
.auth-box.locked .input { opacity: .65; }
.auth-box .input[aria-invalid="true"] { border-color: var(--bad); }
.field.invalid .input:focus { border-color: var(--bad); box-shadow: 0 0 0 3px var(--bad-bg); }
.field.invalid .err { animation: authIn .2s var(--ease) both; }
.label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 12px; flex-wrap: wrap; }
.label-row .text-link { font-size: 13px; font-weight: 550; }
.auth-fine { margin: 0; font-size: 12.5px; color: var(--dim); text-align: center; text-wrap: pretty; }
.auth-fine a { color: var(--dust); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.auth-fine a:hover { color: var(--bone); text-decoration-color: var(--accent); }
.auth-foot { margin: 0; }
.auth-links { display: flex; justify-content: center; gap: 8px 18px; flex-wrap: wrap; font-size: 14px; }
.auth-links .text-link { font-weight: 550; }
button.text-link { background: none; border: 0; padding: 0; font: inherit; font-weight: 550; cursor: pointer; }
button.text-link .spin { display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: nxspin .8s linear infinite; }
button.text-link[disabled] { color: var(--dim); text-decoration-color: transparent; cursor: default; }

/* password strength: four stepped pixel segments + live rule */
.pw-meter { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.pw-meter i { height: 5px; background: var(--panel-3); transition: background-color .25s var(--ease); }
.pw-meter[data-score="1"] i:nth-child(1) { background: var(--bad); }
.pw-meter[data-score="2"] i:nth-child(-n+2) { background: var(--p-orange); }
.pw-meter[data-score="3"] i:nth-child(-n+3) { background: var(--p-gold); }
.pw-meter[data-score="4"] i { background: var(--ok); }
.pw-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12.5px; color: var(--dim); }
.pw-rule { display: inline-flex; align-items: center; gap: 6px; transition: color .2s; }
.pw-rule.met { color: var(--ok); }
.pw-label { font-weight: 650; }
.pw-label[data-score="1"] { color: var(--bad); }
.pw-label[data-score="2"] { color: var(--p-orange); }
.pw-label[data-score="3"] { color: var(--p-gold); }
.pw-label[data-score="4"] { color: var(--ok); }
.match-ok { display: none; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ok); }
.match-ok.on { display: inline-flex; animation: authIn .2s var(--ease) both; }

/* "sent" card */
.sent-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--r-md); background: var(--panel); border: 1px solid var(--line); min-width: 0; }
.sent-card .grow { flex: 1; min-width: 0; }
.sent-card small { display: block; font-size: 12.5px; color: var(--dim); }
.sent-card b { display: block; font-weight: 600; overflow-wrap: anywhere; }
.note-line { display: flex; gap: 10px; align-items: flex-start; margin: 0; font-size: 13.5px; color: var(--dust); }
.note-line img { width: 20px; height: 20px; image-rendering: pixelated; flex: none; margin-top: 1px; }
.note-line svg { flex: none; margin-top: 3px; color: var(--p-gold); }

/* ---------- legal footer ---------- */
.auth-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; margin: 0; }
.auth-legal a { transition: color var(--t-fast); }
.auth-legal a:hover { color: var(--bone); }

/* ---------- art side ---------- */
.auth-art { isolation: isolate; }
.auth-art::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(242,234,231,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(242,234,231,.04) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(70% 60% at 55% 34%, var(--ink), transparent 78%);
  mask-image: radial-gradient(70% 60% at 55% 34%, var(--ink), transparent 78%);
}
.auth-art .vox-stage::before { content: ''; position: absolute; inset: 8% 14% 4%; background: radial-gradient(closest-side, rgba(220,20,60,.30), transparent); pointer-events: none; }
.auth-art .vox-stage::after { content: ''; position: absolute; left: 28%; right: 28%; bottom: -2%; height: 7%; background: radial-gradient(closest-side, rgba(8,5,6,.7), transparent); pointer-events: none; }
.auth-art .vox { position: relative; z-index: 1; image-rendering: pixelated; }
.art-coin { position: absolute; z-index: 2; width: 30px; height: auto; image-rendering: pixelated; filter: drop-shadow(0 8px 10px rgba(8,5,6,.55)); animation: coinBob 4.2s ease-in-out infinite; pointer-events: none; }
.art-coin.c1 { top: 16%; left: 10%; }
.art-coin.c2 { top: 34%; right: 9%; width: 22px; animation-delay: -1.4s; }
.art-coin.c3 { bottom: 16%; left: 18%; width: 18px; animation-delay: -2.6s; opacity: .85; }
@keyframes coinBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.auth-facts { list-style: none; margin: 0; padding: 0; max-width: 520px; z-index: 3; }
.auth-fact { transition: border-color .2s, transform .3s var(--ease-spring), opacity .45s var(--ease); }
.auth-fact:hover { border-color: var(--line-2); transform: translateX(3px); }
.auth-fact img { margin-top: 1px; }
.auth-fact div { min-width: 0; }

/* ---------- device approval ---------- */
.dev-card {
  display: grid; gap: 14px; padding: 16px 18px; border-radius: var(--card-r); border: 1px solid var(--line); min-width: 0;
  background: linear-gradient(160deg, rgba(220,20,60,.10), transparent 55%), var(--panel);
}
.dev-client { display: flex; align-items: center; gap: 12px; min-width: 0; }
.dev-client .grow { flex: 1; min-width: 0; }
.dev-client b { display: block; font-weight: 650; }
.dev-client small { display: block; color: var(--dim); font-size: 13px; }
.dev-client .li-icon { background: rgba(220,20,60,.16); color: var(--accent); }
.dev-client .li-icon.ok { background: var(--ok-bg); color: var(--ok); }
.dev-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding-top: 14px; border-top: 1px solid var(--line); }
.dev-meta dt { font-size: 12px; color: var(--dim); }
.dev-meta dd { margin: 2px 0 0; font-size: 14.5px; font-weight: 600; overflow-wrap: anywhere; }

.dev-code {
  container-type: inline-size; position: relative; overflow: hidden; display: grid; gap: 14px;
  padding: 16px 16px 18px; border-radius: var(--card-r); background: var(--ink-2); border: 1px solid var(--line-2);
}
.dev-code-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--dust); }
.dev-timer { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; color: var(--dust); transition: color .2s; }
.dev-timer b { color: var(--bone); font-weight: 650; }
.dev-timer.low, .dev-timer.low b { color: var(--warn); }
.dev-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: linear-gradient(90deg, var(--p-crimson), var(--p-orange)); transition: width 1s linear; }
.dev-code .code-boxes { --g: clamp(3px, 1.6cqi, 7px); gap: var(--g); }
.dev-code .code-boxes span {
  width: calc((100cqi - 12px - 8 * var(--g)) / 8); max-width: 44px; height: auto; aspect-ratio: 4 / 5;
  font-size: clamp(17px, 6.6cqi, 27px); color: var(--bone); border-radius: 10px;
  box-shadow: inset 0 -3px 0 rgba(8,5,6,.45); animation: boxIn .32s var(--ease-spring) both;
}
.dev-code .code-boxes .dash { width: 12px; max-width: 12px; aspect-ratio: auto; box-shadow: none; }
@keyframes boxIn { from { opacity: 0; transform: translateY(6px) scale(.9); } }
.dev-note { display: flex; gap: 10px; align-items: flex-start; margin: 0; font-size: 13.5px; color: var(--dust); }
.dev-note svg { flex: none; margin-top: 3px; color: var(--p-gold); }
.dev-acts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 10px; }
.dev-who { margin: 0; font-size: 13px; color: var(--dim); text-align: center; overflow-wrap: anywhere; }
.dev-who b { color: var(--dust); font-weight: 600; }

/* code entry: one paste-friendly input styled like the code boxes */
.auth-box .input.code-input {
  height: 66px; text-align: center; font-family: var(--f-mono); font-size: clamp(22px, 7vw, 28px); font-weight: 700;
  letter-spacing: .22em; padding-left: calc(14px + .22em); text-transform: uppercase;
}
.code-input::placeholder { color: var(--line-2); }
.field .help.warn { color: var(--warn); }

/* success: pixel check that draws itself */
.auth-mark.big { width: 104px; height: 104px; background: none; clip-path: none; position: relative; margin-bottom: 12px; }
.auth-mark.big::before { content: ''; position: absolute; inset: -22%; background: radial-gradient(closest-side, rgba(79,191,122,.22), transparent); animation: pxFade .8s var(--ease) .3s both; pointer-events: none; }
.pxc { position: relative; width: 104px; height: 104px; overflow: visible; }
.pxc rect { transform-box: fill-box; transform-origin: center; }
.pxc .f { fill: var(--ok); opacity: .12; }
.pxc .r { fill: var(--ok); opacity: .5; animation: pxFade .16s linear both; }
.pxc .c { fill: var(--ok); animation: pxPop .26s var(--ease-spring) both; }
.spark { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px; background: var(--p-gold); opacity: 0; animation: spark .75s var(--ease) both; }
@keyframes pxFade { from { opacity: 0; } }
@keyframes pxPop { from { opacity: 0; transform: scale(0); } }
@keyframes spark { 0% { opacity: 0; transform: none; } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)); } }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .auth-form-side::before { background: radial-gradient(420px 360px at 50% 40%, rgba(220,20,60,.12), transparent 70%); }
}
@media (max-width: 640px) {
  .auth-box { padding: 28px 0 32px; gap: 20px; }
  .auth-head .sub { font-size: 15px; }
}
@media (max-width: 420px) {
  .dev-acts { grid-template-columns: minmax(0, 1fr); }
  .dev-acts .btn-accent { order: -1; }
}

/* ---------- signup: "Invited by {creator}" chip (affiliate referral) ---------- */
.ref-chip { padding-left: 4px; max-width: 100%; }
.ref-chip > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ref-chip .avatar.sm { width: 22px; height: 22px; border-radius: 999px; font-size: 10.5px; }
.ref-chip b { font-weight: 700; }