/* =========================================================
   NEXT — pages/auth.css
   Sign in, register, forgot and reset. The left side is the
   rank ladder: an amber "Next" marker climbs rung by rung.
   ========================================================= */

.auth { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(440px, 0.9fr); }

/* ---------- Board ---------- */

.auth-board {
    position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
    padding: 40px clamp(32px, 5.5vw, 84px); background: var(--bg-2); border-right: 1px solid var(--line); overflow: hidden;
}
.auth-board::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 64px 64px; mask-image: radial-gradient(ellipse 80% 70% at 30% 55%, #000, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 30% 55%, #000, transparent 75%); opacity: 0.55;
}
.auth-board > * { position: relative; }
.board-body { display: flex; flex-direction: column; gap: 22px; max-width: 560px; }
.board-title { font-size: clamp(40px, 5.4vw, 72px); line-height: 1; letter-spacing: -0.045em; font-weight: 780; text-wrap: balance; }
.board-title em { font-style: normal; color: var(--accent-text); }
.board-foot a { color: var(--text-2); }

/* ---------- Ladder ---------- */

.ladder {
    list-style: none; margin: 14px 0 0; padding: 0; max-width: 440px;
    display: flex; flex-direction: column; overflow: hidden;
    background: color-mix(in srgb, var(--sunken) 85%, transparent); border: 1px solid var(--line-2); border-radius: var(--r-lg);
    box-shadow: var(--shadow);
}
.ladder li {
    position: relative; display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 14px; padding: 15px 22px;
    border-bottom: 1px solid var(--line);
    animation: ladder-in 0.7s var(--ease) both, rung 9s linear infinite;
    animation-delay: var(--in, 0s), var(--d, 0s);
}
.ladder li:last-child { border-bottom: 0; }
.ladder li::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--accent); opacity: 0;
    animation: rung-bar 9s linear infinite; animation-delay: var(--d, 0s);
}
.rung-num { font-size: 22px; font-weight: 750; letter-spacing: -0.03em; color: var(--muted); font-variant-numeric: tabular-nums; animation: rung-num 9s linear infinite; animation-delay: var(--d, 0s); }
.rung-name { font-size: 18px; font-weight: 650; letter-spacing: -0.015em; }
.rung-tag {
    display: inline-flex; align-items: center; gap: 2px; height: 26px; padding: 0 8px 0 11px; border-radius: 999px;
    background: var(--accent); color: var(--accent-ink); font-size: 12.5px; font-weight: 750; opacity: 0;
    animation: rung-tag 9s linear infinite; animation-delay: var(--d, 0s);
}
.rung-tag .ic { width: 14px; height: 14px; stroke-width: 2.6; }

@keyframes ladder-in { from { opacity: 0; transform: translateY(14px); } }
@keyframes rung { 0%, 17%, 100% { background: transparent; } 2%, 15% { background: color-mix(in srgb, var(--accent) 11%, transparent); } }
@keyframes rung-bar { 0%, 17%, 100% { opacity: 0; } 2%, 15% { opacity: 1; } }
@keyframes rung-num { 0%, 17%, 100% { color: var(--muted); } 2%, 15% { color: var(--accent-text); } }
@keyframes rung-tag { 0%, 17%, 100% { opacity: 0; transform: translateX(-6px); } 2%, 15% { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    .ladder li, .rung-num, .rung-tag, .ladder li::before { animation: none; }
    .ladder li:nth-child(4) { background: color-mix(in srgb, var(--accent) 11%, transparent); }
    .ladder li:nth-child(4)::before { opacity: 1; }
    .ladder li:nth-child(4) .rung-num { color: var(--accent-text); }
    .ladder li:nth-child(4) .rung-tag { opacity: 1; }
}
html.reduce-motion .ladder li, html.reduce-motion .rung-num, html.reduce-motion .rung-tag, html.reduce-motion .ladder li::before { animation: none; }
html.reduce-motion .ladder li:nth-child(4) { background: color-mix(in srgb, var(--accent) 11%, transparent); }
html.reduce-motion .ladder li:nth-child(4)::before { opacity: 1; }
html.reduce-motion .ladder li:nth-child(4) .rung-num { color: var(--accent-text); }
html.reduce-motion .ladder li:nth-child(4) .rung-tag { opacity: 1; }

/* ---------- Panel ---------- */

.auth-panel {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
    padding: 28px clamp(20px, 4vw, 56px); position: relative;
}
.auth-top { display: none; width: 100%; max-width: 440px; align-items: center; justify-content: space-between; }
.auth-card { width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: 22px; animation: view-in 0.4s var(--ease) both; }
.auth-head { display: flex; flex-direction: column; gap: 6px; }
.auth-head h2 { font-size: 30px; letter-spacing: -0.035em; font-weight: 750; }
.auth-foot { max-width: 440px; text-align: center; }
.auth-foot a { color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; }
.auth-error { padding: 11px 14px; border-radius: var(--r-sm); background: color-mix(in srgb, var(--bad) 10%, transparent); border: 1px solid color-mix(in srgb, var(--bad) 32%, transparent); }

.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; gap: 4px; background: var(--sunken); border: 1px solid var(--line); border-radius: var(--r-md); }
.auth-tab {
    height: 40px; border: 0; border-radius: 10px; background: transparent; color: var(--muted);
    font-size: 14px; font-weight: 650; transition: background 0.18s var(--ease), color 0.18s;
}
.auth-tab:hover { color: var(--text); }
.auth-tab[aria-selected='true'] { background: var(--raised); color: var(--text); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); }

.oauth { display: flex; flex-direction: column; gap: 10px; }
.oauth .btn { --h: 46px; }
.or { display: flex; align-items: center; gap: 14px; margin-top: 6px; color: var(--muted); font-size: 12.5px; font-weight: 600; }
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--line); }

.link-btn { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; color: var(--link); font-size: 13.5px; font-weight: 600; }
.link-btn:hover { text-decoration: underline; text-underline-offset: 3px; }
.link-btn.back { color: var(--muted); align-self: flex-start; }
.link-btn.back:hover { color: var(--text); }

.auth-done { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 12px 0; }

/* ---------- Narrow screens ---------- */

@media (max-width: 960px) {
    .auth { grid-template-columns: minmax(0, 1fr); }
    .auth-board { display: none; }
    .auth-panel { justify-content: flex-start; padding-top: calc(20px + var(--safe-top)); padding-bottom: calc(28px + var(--safe-bottom)); min-height: 100dvh; }
    .auth-top { display: flex; margin-bottom: 14px; }
    .auth-head h2 { font-size: 27px; }
}