/* ==========================================================================
   zerynix — one stylesheet for the sign-in flow, the public site and error pages.

   Identity: a calm, ink-blue palette taken from the brand artwork (blue and silver on
   near-black). One memorable element — the verification-code field and the thin "expiry
   rail" under it — and everything else stays quiet.

   Themes: body[data-theme="hacker"] is the dark theme (the stored value is kept for
   cookie compatibility); body[data-theme="simple"] is the light theme. Labels in the UI
   say "Dark" and "Light".
   No inline styles are needed by any template; the CSP is unchanged.
   ========================================================================== */

@font-face { font-family: "Bricolage Grotesque"; src: url("/static/fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/static/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/static/fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/static/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/static/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

/* ---- Tokens ------------------------------------------------------------ */
body {
    --font-display: "Bricolage Grotesque", "IBM Plex Sans", system-ui, sans-serif;
    --font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
    --radius: 10px;
    --gutter: 16px;

    /* dark (default) */
    --bg: #0e1525;
    --surface: #141d31;
    --text: #e8edf6;
    --muted: #a6b2c7;
    --line: #2a3550;
    --field-border: #6a7a99;
    --accent: #7db3ff;
    --accent-hover: #a2c8ff;
    --on-accent: #0a1220;
    --danger: #ffa3a3;
    --danger-bg: rgba(255, 120, 120, 0.1);
    --ok: #86dcae;
    --ok-bg: rgba(134, 220, 174, 0.1);
    --warn: #f2c869;
    --warn-bg: rgba(242, 200, 105, 0.1);
    --focus: #a2c8ff;
    color-scheme: dark;
}
body[data-theme="simple"] {
    --bg: #f5f6f9;
    --surface: #ffffff;
    --text: #0e1525;
    --muted: #4a566b;
    --line: #d3dae6;
    --field-border: #6b7891;
    --accent: #1f4fd8;
    --accent-hover: #173fb0;
    --on-accent: #ffffff;
    --danger: #b3261e;
    --danger-bg: #fdeceb;
    --ok: #1b6e45;
    --ok-bg: #e7f5ed;
    --warn: #8a5a00;
    --warn-bg: #fdf3dc;
    --focus: #1f4fd8;
    color-scheme: light;
}

/* ---- Base -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 400 1rem/1.55 var(--font-body);
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; line-height: 1.12; margin: 0; text-wrap: balance; }
p { margin: 0; }
a { color: var(--accent); text-underline-offset: 0.18em; }
a:hover { color: var(--accent-hover); }
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: var(--gutter); top: -4rem; background: var(--accent); color: var(--on-accent); padding: 0.6rem 1rem; border-radius: var(--radius); z-index: 10; font-weight: 600; }
.skip-link:focus { top: var(--gutter); color: var(--on-accent); }

/* ---- Brand lockup ------------------------------------------------------ */
.brand { display: inline-flex; align-items: center; gap: 0.6rem; color: inherit; text-decoration: none; font-family: var(--font-display); font-weight: 700; font-size: 1.45rem; letter-spacing: -0.03em; line-height: 1; }
.brand:hover { color: inherit; }
.brand-mark { width: 1.9rem; height: 1.9rem; flex: none; color: var(--accent); }
.brand-img { width: 2rem; height: 2rem; object-fit: contain; border-radius: 6px; flex: none; }

/* ---- Buttons & links --------------------------------------------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    min-height: 3rem; padding: 0.7rem 1.4rem;
    border: 1.5px solid transparent; border-radius: var(--radius);
    font: 600 1rem/1.2 var(--font-body); text-decoration: none; cursor: pointer;
    background: var(--accent); color: var(--on-accent);
    transition: background-color 0.15s, border-color 0.15s;
}
.btn:hover { background: var(--accent-hover); color: var(--on-accent); }
.btn-block { width: 100%; }
.btn-quiet { background: transparent; color: var(--text); border-color: var(--field-border); }
.btn-quiet:hover { background: transparent; color: var(--text); border-color: var(--text); }
.btn[aria-disabled="true"], .btn:disabled { cursor: not-allowed; opacity: 0.55; }
.btn[aria-disabled="true"]:hover { background: var(--accent); }
.btn-quiet[aria-disabled="true"]:hover { background: transparent; border-color: var(--field-border); }
.btn[data-busy="true"] { cursor: progress; opacity: 0.8; }
.btn-small { min-height: 2.5rem; padding: 0.45rem 1rem; font-size: 0.9375rem; }
.link-button { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer; }
.link-button:hover { color: var(--accent-hover); }
.link-button[aria-disabled="true"] { color: var(--muted); cursor: not-allowed; text-decoration: none; }

/* ---- Alerts ------------------------------------------------------------ */
.alert { border-left: 4px solid var(--muted); background: var(--surface); padding: 0.8rem 1rem; border-radius: 0 var(--radius) var(--radius) 0; margin: 0 0 1.25rem; font-size: 0.9688rem; }
.alert strong { display: block; font-weight: 600; margin-bottom: 0.1rem; }
.alert-error { border-color: var(--danger); background: var(--danger-bg); }
.alert-error strong { color: var(--danger); }
.alert-success { border-color: var(--ok); background: var(--ok-bg); }
.alert-success strong { color: var(--ok); }
.alert-warning { border-color: var(--warn); background: var(--warn-bg); }
.alert-warning strong { color: var(--warn); }
.alert:focus { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ---- Forms ------------------------------------------------------------- */
.field { margin: 0 0 1.25rem; }
.field > label, .field-label { display: block; font-weight: 500; font-size: 0.9688rem; margin: 0 0 0.35rem; }
.field-hint { display: block; color: var(--muted); font-size: 0.875rem; margin: 0.3rem 0 0; }
.field-error { display: block; color: var(--danger); font-size: 0.9062rem; font-weight: 500; margin: 0.35rem 0 0; }
.field-error[hidden] { display: none; }
.input {
    display: block; width: 100%; min-height: 3rem; padding: 0.65rem 0.85rem;
    background: var(--surface); color: var(--text);
    border: 1.5px solid var(--field-border); border-radius: var(--radius);
    font: 400 1rem/1.4 var(--font-body);
}
.input::placeholder { color: var(--muted); opacity: 0.8; }
.input:hover { border-color: var(--text); }
.input:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--text); border-radius: var(--radius); }
.input[aria-invalid="true"] { border-color: var(--danger); }
.input:-webkit-autofill, .input:-webkit-autofill:focus { -webkit-text-fill-color: var(--text); box-shadow: 0 0 0 40rem var(--surface) inset; caret-color: var(--text); }
.input-affix { position: relative; }
.input-affix .input { padding-right: 4.75rem; }
.affix-btn { position: absolute; right: 0.35rem; top: 50%; transform: translateY(-50%); min-height: 2.25rem; padding: 0 0.7rem; background: transparent; border: 0; border-radius: 6px; color: var(--accent); font: 600 0.9062rem var(--font-body); cursor: pointer; }
.affix-btn:hover { color: var(--accent-hover); }
.affix-btn[hidden] { display: none; }
.check { display: flex; gap: 0.7rem; align-items: flex-start; margin: 0 0 1.25rem; }
.check input { flex: none; width: 1.5rem; height: 1.5rem; margin: 0; accent-color: var(--accent); }
.check label { font-size: 0.9688rem; padding: 0.15rem 0; }
.check input[aria-invalid="true"] { outline: 2px solid var(--danger); outline-offset: 2px; }
.form-foot { margin-top: 1.5rem; color: var(--muted); font-size: 0.9688rem; }

/* ---- Verification code field: the one distinctive element --------------- */
.code-input {
    display: block;
    box-sizing: content-box;
    width: 11.4ch; padding: 0.55rem 0.3ch 0.7rem 0; text-indent: 0.25ch;
    background-origin: content-box; background-clip: content-box;
    font: 500 2.1rem/1.2 var(--font-mono); letter-spacing: 0.9ch;
    color: var(--text); background-color: transparent;
    background-image: linear-gradient(to right, var(--field-border) 0, var(--field-border) 1.5ch, transparent 1.5ch);
    background-size: 1.9ch 3px; background-repeat: repeat-x; background-position: 0 100%;
    border: 0; border-radius: 0;
    caret-color: var(--accent);
}
.code-input:focus-visible { outline: none; background-image: linear-gradient(to right, var(--accent) 0, var(--accent) 1.5ch, transparent 1.5ch); border-radius: 0; }
.code-input[aria-invalid="true"] { background-image: linear-gradient(to right, var(--danger) 0, var(--danger) 1.5ch, transparent 1.5ch); }
.code-input::placeholder { color: var(--field-border); opacity: 0.55; letter-spacing: 0.9ch; }
.code-input:-webkit-autofill { -webkit-text-fill-color: var(--text); box-shadow: 0 0 0 40rem var(--bg) inset; }
.code-field:focus-within .field-label { color: var(--accent); }

/* expiry rail: shrinks as the code ages; no ticking digits for assistive tech */
.rail { height: 3px; width: 11.4ch; max-width: 100%; margin: 0.85rem 0 0.5rem; background: var(--line); border-radius: 2px; overflow: hidden; font-size: 2.1rem; }
.rail-fill { display: block; height: 100%; width: 100%; background: var(--accent); transform-origin: left center; transition: transform 1s linear; }
.rail[data-state="low"] .rail-fill { background: var(--warn); }
.rail[data-state="expired"] .rail-fill { background: var(--danger); transform: scaleX(0); }
.code-status { font-size: 0.9062rem; color: var(--muted); min-height: 1.4em; }
.code-status [data-state="low"] { color: var(--warn); }
.code-status [data-state="expired"] { color: var(--danger); font-weight: 500; }
.resend { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem; margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.9688rem; }
.resend form { display: inline; margin: 0; }
/* once the code has expired, getting a new one is the primary action on the page */
.resend.is-expired { border-top: 0; padding-top: 0.25rem; }
.resend.is-expired form { flex: 1 0 100%; }
.resend.is-expired .link-button { display: flex; width: 100%; align-items: center; justify-content: center; min-height: 3rem; padding: 0.7rem 1.4rem; border-radius: var(--radius); background: var(--accent); color: var(--on-accent); font-weight: 600; text-decoration: none; }
.resend.is-expired .link-button[aria-disabled="true"] { opacity: 0.6; }

/* ---- Auth layout -------------------------------------------------------- */
.auth-shell { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.auth-aside { background: #0a101c; color: #e8edf6; padding: clamp(2rem, 5vw, 4rem); display: flex; flex-direction: column; justify-content: space-between; gap: 3rem; border-right: 1px solid #1b2640; }
.auth-aside .brand-mark { color: #7db3ff; }
.aside-copy h2 { font-size: clamp(2rem, 3.2vw, 3rem); max-width: 14ch; font-weight: 700; }
.aside-copy p { margin-top: 1.25rem; color: #b7c2d6; max-width: 34ch; font-size: 1.0625rem; }
.aside-foot { color: #93a0b8; font-size: 0.875rem; }
.aside-foot a { color: #b7c2d6; }
.auth-main { display: flex; flex-direction: column; padding: clamp(1.5rem, 4vw, 3rem) var(--gutter) 1.5rem; }
.auth-panel { width: 100%; max-width: 26rem; margin: auto; padding: 1rem 0 2rem; }
.auth-panel > h1 { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.25rem); margin-bottom: 0.6rem; }
.auth-lede { color: var(--muted); margin-bottom: 1.75rem; }
.auth-lede strong { color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
.step { color: var(--muted); font-size: 0.9062rem; margin-bottom: 0.9rem; font-weight: 500; }
.auth-utility { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; color: var(--muted); font-size: 0.875rem; padding: 1rem 0 0; }
.auth-utility a { color: var(--muted); }
.auth-utility a:hover { color: var(--text); }
.mobile-brand { display: none; }

/* theme switch: two real buttons in a POST form, works without JS */
.theme-form { display: inline-flex; margin: 0; padding: 2px; border: 1px solid var(--line); border-radius: 999px; }
.theme-form button { font: 500 0.8125rem var(--font-body); padding: 0.3rem 0.85rem; min-height: 2rem; border: 0; border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer; }
.theme-form button:hover { color: var(--text); }
.theme-form button.active { background: var(--accent); color: var(--on-accent); }
.theme-label { margin-right: 0.5rem; }

/* ---- Site header / footer (landing, services, errors) --------------------- */
.site-header { border-bottom: 1px solid var(--line); }
.site-header-inner { max-width: 72rem; margin: 0 auto; padding: 0.9rem var(--gutter); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.6rem 1.5rem; }
.site-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem 1.25rem; }
.site-nav a:not(.btn) { color: var(--text); text-decoration: none; font-weight: 500; font-size: 0.9688rem; padding: 0.4rem 0; }
.site-nav a:not(.btn):hover { color: var(--accent); }
.site-nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.35em; text-decoration-color: var(--accent); }
.nav-user { color: var(--muted); font-size: 0.9062rem; overflow-wrap: anywhere; }
.site-nav form { margin: 0; }
.site-footer { border-top: 1px solid var(--line); margin-top: 4rem; }
.site-footer-inner { max-width: 72rem; margin: 0 auto; padding: 1.5rem var(--gutter); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; color: var(--muted); font-size: 0.875rem; }
.wrap { max-width: 72rem; margin: 0 auto; padding: 0 var(--gutter); }
.wrap-narrow { max-width: 46rem; margin: 0 auto; padding: 0 var(--gutter); }

.hero { padding: clamp(3rem, 8vw, 6.5rem) 0 clamp(2.5rem, 6vw, 4.5rem); }
.hero h1 { font-size: clamp(2.5rem, 1.4rem + 5vw, 5rem); font-weight: 700; letter-spacing: -0.035em; max-width: 14ch; }
.hero p { margin-top: 1.5rem; max-width: 40rem; font-size: 1.1875rem; color: var(--muted); }
.hero-actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.section { padding: clamp(2rem, 5vw, 3.5rem) 0; border-top: 1px solid var(--line); }
.section-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 1rem 3rem; align-items: start; }
.section-head h2 { font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem); }
.section-head p { color: var(--muted); margin-top: 0.6rem; }
.rows { list-style: none; margin: 0; padding: 0; }
.row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: baseline; gap: 0.25rem 3rem; padding: 1.1rem 0; border-top: 1px solid var(--line); }
.row:first-child { border-top: 0; }
.row h3 { font-size: 1.125rem; font-family: var(--font-body); font-weight: 600; letter-spacing: 0; line-height: 1.35; }
.row h3 a { color: var(--text); text-decoration: none; }
.row h3 a:hover { color: var(--accent); text-decoration: underline; }
.row p { color: var(--muted); }
.row .status { font-size: 0.875rem; font-weight: 500; margin-top: 0.35rem; color: var(--muted); }
.row .status.is-on { color: var(--ok); }
.tags { display: flex; flex-wrap: wrap; gap: 0.35rem 0.5rem; list-style: none; margin: 0.5rem 0 0; padding: 0; }
.tags li { font-size: 0.8125rem; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 0.1rem 0.6rem; }
.page-title { padding: clamp(2.5rem, 6vw, 4.5rem) 0 1.5rem; }
.page-title h1 { font-size: clamp(2rem, 1.2rem + 3.5vw, 3.5rem); letter-spacing: -0.03em; font-weight: 700; }
.page-title p { color: var(--muted); margin-top: 0.9rem; max-width: 40rem; font-size: 1.125rem; }
.crumbs { font-size: 0.9062rem; color: var(--muted); margin-bottom: 1rem; }
.crumbs a { color: var(--muted); }
.prose p { max-width: 62ch; font-size: 1.0625rem; line-height: 1.7; }
.prose h2 { font-size: 1.5rem; margin: 2.5rem 0 1rem; }
.checklist { margin: 0; padding: 0 0 0 1.2rem; max-width: 62ch; }
.checklist li { padding: 0.35rem 0 0.35rem 0.25rem; }
.checklist li::marker { color: var(--accent); }
.notice-page { padding: clamp(3rem, 9vw, 7rem) 0; }
.notice-page .code { font-family: var(--font-mono); font-weight: 500; color: var(--muted); font-size: 0.9375rem; margin-bottom: 0.75rem; }
.notice-page h1 { font-size: clamp(2rem, 1.2rem + 3vw, 3rem); letter-spacing: -0.03em; }
.notice-page p { color: var(--muted); margin-top: 1rem; max-width: 36rem; font-size: 1.125rem; }
.notice-page .actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* ---- Small screens ------------------------------------------------------ */
@media (max-width: 860px) {
    .auth-shell { display: block; }
    .auth-aside { display: none; }
    .mobile-brand { display: block; margin: 0 0 2rem; }
    .auth-main { min-height: 100vh; min-height: 100dvh; padding-top: 1.25rem; }
    .auth-panel { margin: 0 auto; padding-top: 0.5rem; }
    .section-head, .row { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .site-header-inner { gap: 0.5rem 1rem; }
    .brand { font-size: 1.3rem; }
    .nav-user { display: none; }
    .code-input { font-size: 1.85rem; }
    .rail { font-size: 1.85rem; }
}

/* ---- Motion: only state changes; none when the user asks for less -------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
    .btn, .input, .code-input { border: 2px solid ButtonText; }
    .code-input { border-width: 0 0 2px; }
    .rail { border: 1px solid CanvasText; }
}