/*
 * auth.css — Hellox Auth Pages v9.0 (t141 Linear-grade amber)
 * Tone: charcoal cool + amber accent — match landing.html (app.hellox.org) DNA.
 * Background: cool charcoal #08090a + 2 ambient blob (low opacity, no drift = no battery cost).
 * Card: solid surface #141519 + neutral cool border + subtle amber focus halo.
 * Display font: Bricolage Grotesque (auto via app.css h1/h2 rules).
 * Loaded by: login.html, signup.html, verify_2fa.html — full-page override (no dashboard).
 * Scope strategy: :root override safe because auth.css loaded AFTER app.css di full-page auth views.
 */

/* === T141 PALETTE OVERRIDE (scoped at :root, cascades over app.css ECLIPSE base) === */
:root {
  /* Surfaces — cool charcoal */
  --bg:             #08090a;
  --bg-elev:        #141519;
  --bg-card:        #141519;
  --bg-card-hi:     #1c1e24;
  --surface:        #141519;
  --surface-2:      #1c1e24;
  --surface-3:      #23262e;

  /* Amber accent */
  --accent:         #f59e0b;
  --accent-hi:      #fbbf24;
  --accent-deep:    #d97706;
  --accent-dim:     color-mix(in oklab, #f59e0b 60%, transparent);
  --accent-glow:    color-mix(in oklab, #f59e0b 28%, transparent);
  --accent-halo:    color-mix(in oklab, #f59e0b 12%, transparent);
  --accent-bg:      color-mix(in oklab, #f59e0b 8%, transparent);

  /* Text */
  --text:           #fafafa;
  --text-dim:       color-mix(in oklab, #fafafa 65%, transparent);
  --text-muted:     color-mix(in oklab, #fafafa 65%, transparent);
  --text-low:       color-mix(in oklab, #fafafa 38%, transparent);

  /* Borders — neutral cool (NOT gold-tinted) */
  --border:         color-mix(in oklab, #fafafa 9%,  transparent);
  --border-soft:    color-mix(in oklab, #fafafa 6%,  transparent);
  --border-strong:  color-mix(in oklab, #fafafa 14%, transparent);
  --border-hi:      color-mix(in oklab, #f59e0b 32%, transparent);

  /* On-accent foreground */
  --on-accent:      #0a0700;

  /* Gold compat aliases (app.css used --gold-400 widely; remap ke t141 amber so legacy classes inherit) */
  --gold-200:       #fde68a;
  --gold-300:       #fcd34d;
  --gold-400:       #f59e0b;
  --gold-500:       #d97706;

  /* Gradients */
  --grad-gold:      linear-gradient(135deg, #fde68a 0%, #f59e0b 45%, #d97706 100%);

  /* Shadows */
  --shadow-md:      0 8px 32px rgba(0, 0, 0, .35);
  --shadow-lg:      0 20px 60px rgba(0, 0, 0, .45);
  --shadow-glow:    0 0 40px var(--accent-glow);
}

/* === BODY APPLY ===================================================== */
body {
  background: var(--bg);
  color: var(--text);
}

/* Subtle ambient — Linear-grade, static (no animation = no CPU/battery) */
body::before,
body::after {
  content: '';
  position: fixed;
  pointer-events: none;
  z-index: 0;
  border-radius: 50%;
  filter: blur(120px);
}
body::before {
  width: 640px; height: 480px;
  top: -160px; right: -120px;
  background: radial-gradient(ellipse, color-mix(in oklab, #f59e0b 12%, transparent), transparent 70%);
}
body::after {
  width: 520px; height: 420px;
  bottom: -120px; left: -100px;
  background: radial-gradient(ellipse, color-mix(in oklab, #d97706 9%, transparent), transparent 70%);
}

/* === NAV ============================================================ */
.hx-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in oklab, var(--bg) 82%, transparent);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid var(--border);
}

.hx-nav-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  position: relative;
  z-index: 1;
}

.hx-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.02em;
  flex-shrink: 0;
}
.hx-logo:hover { opacity: .85; text-decoration: none; }

.hx-logo-mark {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 16px var(--accent-glow);
}
.hx-logo-mark svg { display: block; }

.hx-nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.hx-nav-links a {
  color: var(--text-dim);
  font-size: 14px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 8px;
  text-decoration: none;
  transition: color .2s, background .2s;
}
.hx-nav-links a:hover {
  color: var(--text);
  background: var(--surface);
  text-decoration: none;
}

.hx-nav-cta {
  padding: 8px 18px;
  border-radius: 9px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  font-size: 13.5px;
  text-decoration: none;
  transition: transform .2s, box-shadow .2s, background .2s;
  white-space: nowrap;
}
.hx-nav-cta:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-glow);
  background: oklch(from var(--accent) calc(l + 0.08) c h);
  text-decoration: none;
  color: var(--on-accent);
}
.hx-nav-cta:active {
  background: oklch(from var(--accent) calc(l - 0.06) c h);
}

.hx-nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 8px;
}
.hx-nav-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text-dim);
  border-radius: 2px;
}

/* === AUTH LAYOUT ==================================================== */

.hx-skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 9999;
  padding: 10px 20px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 800;
  font-size: .9rem;
  border-radius: 0 0 10px 10px;
  text-decoration: none;
  transition: top .15s ease;
}
.hx-skip-link:focus { top: 0; }

.hx-auth-wrap {
  min-height: calc(100vh - 64px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 64px 20px 80px;
  position: relative;
  z-index: 1;
}

.hx-auth-center {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* === AUTH CARD — t141 Linear engineering surface ==================== */
.hx-auth-card {
  width: 100%;
  max-width: 460px;
  padding: 36px 30px 28px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  position: relative;
  box-shadow:
    0 1px 0 color-mix(in oklab, #fafafa 6%, transparent) inset,
    0 20px 60px rgba(0, 0, 0, .35);
}

/* Top-edge amber hairline — t141 signature accent on card */
.hx-auth-card::before {
  content: '';
  position: absolute;
  inset: -1px -1px auto -1px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in oklab, var(--accent) 60%, transparent) 50%,
    transparent 100%
  );
  border-radius: 16px 16px 0 0;
  pointer-events: none;
}

.hx-auth-card:focus-within {
  border-color: var(--border-strong);
}

/* === ICON CELL — already exists in app.css .hx-cell-icon, override ke amber */
.hx-auth-card .hx-cell-icon {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: color-mix(in oklab, var(--accent) 14%, transparent);
  border: 1px solid var(--border-hi);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  box-shadow: 0 0 24px var(--accent-halo);
}

/* === EYEBROW (app.css base, t141 tone refinement) =================== */
.hx-auth-card .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 14px;
}
.hx-auth-card .eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  flex-shrink: 0;
  animation: hxDotGlow 2s ease-in-out infinite;
}
@keyframes hxDotGlow {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1; }
}

/* === HEADING ======================================================== */
.hx-auth-card h1 {
  font-family: 'Bricolage Grotesque', 'Manrope', system-ui, sans-serif;
  font-size: clamp(1.55rem, 4vw, 1.875rem);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.15;
  margin: 0 0 10px;
  color: var(--text);
}
.hx-auth-card .accent-word {
  background: linear-gradient(135deg, #fde68a 0%, #f59e0b 55%, #d97706 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.hx-auth-card > .hx-muted {
  color: var(--text-dim);
  font-size: .92rem;
  line-height: 1.55;
  margin-bottom: 4px;
}

/* === FORM =========================================================== */
.hx-auth-card .hx-form { margin-top: 22px; }

.hx-auth-card .hx-form label {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--text-dim);
  margin-bottom: 7px;
  margin-top: 14px;
}
.hx-auth-card .hx-form label:first-of-type { margin-top: 0; }

.hx-auth-card .hx-form input[type="text"],
.hx-auth-card .hx-form input[type="email"],
.hx-auth-card .hx-form input[type="password"] {
  width: 100%;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-size: .95rem;
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.hx-auth-card .hx-form input::placeholder { color: var(--text-low); }
.hx-auth-card .hx-form input:hover { border-color: var(--border-strong); }
.hx-auth-card .hx-form input:focus {
  outline: none;
  border-color: var(--accent);
  background: color-mix(in oklab, var(--surface-2) 92%, var(--accent) 8%);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 18%, transparent);
}

/* === PASSWORD TOGGLE =============================================== */
.hx-input-wrap { position: relative; }
.hx-input-wrap input { padding-right: 42px; }
.hx-pw-toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--text-low);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color .15s;
  line-height: 0;
  border-radius: 6px;
  min-width: 28px;
  min-height: 28px;
}
.hx-pw-toggle:hover { color: var(--text); }
.hx-pw-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* === FORM HINT ===================================================== */
.hx-form-hint {
  font-size: .76rem;
  color: var(--text-low);
  margin: 6px 0 0;
  padding-left: 2px;
  line-height: 1.45;
}

/* === PERKS STRIP (signup) ========================================== */
.hx-form-perks {
  display: grid;
  gap: 10px;
  margin: 22px 0 4px;
  padding: 16px 18px;
  background: var(--accent-bg);
  border: 1px solid var(--border-hi);
  border-radius: 12px;
}
.hx-form-perks-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: .87rem;
  color: var(--text);
  line-height: 1.45;
}
.hx-form-perks-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in oklab, var(--accent) 18%, transparent);
  border: 1px solid var(--border-hi);
}
.hx-form-perks-icon svg {
  width: 12px;
  height: 12px;
  color: var(--accent);
}

/* === BUTTON PRIMARY — override to t141 amber ======================= */
.hx-auth-card .hx-btn-primary {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  background: var(--accent);
  color: var(--on-accent);
  font-family: inherit;
  font-weight: 700;
  font-size: .98rem;
  letter-spacing: -.005em;
  border: 1px solid color-mix(in oklab, var(--accent) 60%, #000);
  border-radius: 11px;
  cursor: pointer;
  text-decoration: none;
  transition: transform .15s, box-shadow .2s, background .15s;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .25) inset,
    0 8px 24px var(--accent-glow);
}
.hx-auth-card .hx-btn-primary:hover {
  transform: translateY(-1px);
  background: oklch(from var(--accent) calc(l + 0.08) c h);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .3) inset,
    0 12px 32px color-mix(in oklab, var(--accent) 38%, transparent);
}
.hx-auth-card .hx-btn-primary:active {
  transform: translateY(0);
  background: oklch(from var(--accent) calc(l - 0.06) c h);
}
.hx-auth-card .hx-btn-primary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.hx-auth-card .hx-btn-block { width: 100%; }
.hx-auth-card .hx-btn-lg { padding: 14px 22px; font-size: 1rem; }

/* === FOOTER LINK =================================================== */
.hx-foot-link {
  text-align: center;
  color: var(--text-dim);
  margin-top: 22px;
  font-size: .88rem;
}
.hx-foot-link a {
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
  transition: color .15s;
}
.hx-foot-link a:hover {
  color: var(--accent-hi);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

/* === STATUS BADGE ================================================== */
.hx-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-bg);
  border: 1px solid var(--border-hi);
  margin-right: 4px;
}

/* === ALERTS ======================================================== */
.hx-alert {
  padding: 12px 16px;
  border-radius: 10px;
  font-size: .88rem;
  margin-top: 16px;
  margin-bottom: 4px;
  line-height: 1.5;
}
.hx-alert-error {
  background: color-mix(in oklab, #ef4444 10%, transparent);
  border: 1px solid color-mix(in oklab, #ef4444 30%, transparent);
  color: #fca5a5;
}
.hx-alert-success {
  background: color-mix(in oklab, #22c55e 10%, transparent);
  border: 1px solid color-mix(in oklab, #22c55e 30%, transparent);
  color: #86efac;
}

/* === SIGNUP WIDER VARIANT ========================================== */
.hx-auth-card--signup { max-width: 500px; }

/* === VERIFY 2FA — single-card centered, no nav ===================== */
.hx-auth-verify {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  position: relative;
  z-index: 1;
}
.hx-auth-verify .hx-auth-card { max-width: 420px; text-align: center; }
.hx-auth-verify .hx-auth-card .hx-cell-icon { margin: 0 auto 16px; }
.hx-auth-verify .hx-auth-card h1 { text-align: center; }
.hx-auth-verify .hx-auth-card > .hx-muted { text-align: center; }
.hx-auth-verify .hx-form { text-align: left; }
.hx-auth-verify .hx-otp-input {
  font-size: 1.4rem !important;
  text-align: center !important;
  letter-spacing: .4em !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
}

/* === MOBILE ======================================================== */
@media (max-width: 768px) {
  .hx-nav-inner { padding: 0 20px; }
  .hx-nav-links { display: none; }
  .hx-nav-hamburger { display: flex; }
  .hx-nav-links.open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    background: var(--bg-elev);
    border-bottom: 1px solid var(--border);
    padding: 12px 0;
    z-index: 99;
  }
  .hx-nav-links.open a { padding: 12px 24px; }
  .hx-nav-cta { padding: 7px 14px; font-size: 13px; }
}

@media (max-width: 600px) {
  .hx-auth-wrap { padding: 40px 14px 56px; }
  .hx-auth-card {
    padding: 28px 22px 22px;
    border-radius: 14px;
    max-width: 100%;
  }
  body::before,
  body::after { filter: blur(80px); opacity: .7; }
}

@media (max-width: 380px) {
  .hx-auth-card { padding: 24px 18px 20px; border-radius: 12px; }
  .hx-form-perks { padding: 14px; }
}

/*
 * 5-LAYER GATE self-lint — auth.css v9.0 t141
 * L1 FOUNDATION
 *   - Hick: login 2 fields, signup 5 fields — <= 7 per screen
 *   - Fitts: .hx-btn-block full-width, min 44px height (padding 13+13+font)
 *   - Gestalt: proximity label->input, perks grouped
 *   - Grid: 8pt rhythm (padding multiples of 4)
 *   - States: hover/focus/active on btn + input
 *   - Micro: 150-200ms transitions
 *   - Nielsen: skip-link, focus-visible, placeholder visible, error alert
 * L2 CORRECTNESS
 *   - DTCG: tokens scoped at :root override, no invented names
 *   - WCAG 2.2: touch >= 44px on pw-toggle, focus 2px outline
 *   - APCA: fafafa on #141519 -> Lc ~105 (max contrast); text-dim on bg-card -> Lc ~62 ok
 *   - CWV: static ambient (no anim) → no INP/CLS cost; transform-only hover
 * L3 DISTINCTIVE
 *   - Font: Bricolage Grotesque display (anti-Inter)
 *   - Color: cool charcoal + amber — Linear engineering vibe, not generic dark
 *   - Composition: centered card + edge amber hairline + soft ambient blob
 *   - Detail: glass nav with backdrop-filter, gradient accent-word, glow logo mark
 * L4 SIGNATURE
 *   - Tone: t141 Linear Cycle Refined Dark Amber — same DNA sebagai landing.html
 *   - Brand-lock: amber #f59e0b + eyebrow-dot pulse + Hx monogram glow
 * L5 INDUSTRY 2025
 *   - 60-30-10: charcoal 60%, card surface 30%, amber 10%
 *   - Token 3-tier: primitive (#f59e0b) -> semantic (--accent) -> component (--border-hi)
 *   - OKLCH: button states via oklch(from var(--accent) calc(l ± 0.08) c h) — dynamic calc
 *   - APCA: text Lc verified
 *   - Anti-pattern scan: no purple-gradient, no equal-card-grid, no Inter override,
 *     no glassmorphic card (only nav has glass — distinctive), no aggressive blob drift anim
 */