/* ==========================================================================
   AnalystQBank — shared design system ("Focus mode" identity)
   Loaded by EVERY page. Tokens, base, brand, nav, buttons, forms, pills.
   Page-specific components live in aqb-app.css (training screens) and
   aqb-stats.css (statistics page).
   ========================================================================== */

:root{
  /* Background is driven by --h/--s/--l so the drill can warm the room as time runs down */
  --h:232; --s:44%; --l:14%;

  --tx:#f4f1ff;
  --mute:rgba(244,241,255,.6);
  --mute-2:rgba(244,241,255,.38);
  --ln:rgba(244,241,255,.16);
  --ln-2:rgba(244,241,255,.09);
  --ok:#7be0ad;
  --no:#ff8f9e;
  --sand:#f5d38f;

  --glass:rgba(255,255,255,.04);
  --glass-2:rgba(255,255,255,.09);
  --on-light:#161a3a;   /* text on light (tx) buttons */
  --on-sand:#2a1f08;    /* text on sand buttons */

  --ok-bg:rgba(123,224,173,.16);
  --no-bg:rgba(255,143,158,.15);
  --sand-bg:rgba(245,211,143,.12);

  --serif:ui-serif,"New York",Georgia,serif;
  --sans:system-ui,-apple-system,"SF Pro Text",sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace;

  --r-card:20px;
  --r-md:14px;
  --ease:cubic-bezier(.2,.8,.2,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:hsl(232 44% 14%)}
body{
  font-family:var(--sans);color:var(--tx);min-height:100vh;
  background:hsl(var(--h) var(--s) var(--l));
  transition:background 1.2s linear;
  -webkit-font-smoothing:antialiased;position:relative;
}
/* slow drifting glow — pure decoration, sits behind everything */
body::before{
  content:"";position:fixed;inset:-20%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(40% 40% at 20% 20%,rgba(255,255,255,.07),transparent 70%),
    radial-gradient(35% 35% at 85% 90%,rgba(255,255,255,.05),transparent 70%);
  animation:drift 26s ease-in-out infinite alternate;
}
@keyframes drift{to{transform:translate(4%,3%) scale(1.08)}}
@keyframes enter{from{opacity:0;transform:translateY(16px)}}

button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit}
::selection{background:rgba(245,211,143,.35)}
:focus-visible{outline:2px solid var(--sand);outline-offset:3px;border-radius:6px}
kbd{border:1px solid var(--ln);border-radius:5px;padding:1px 7px;font-family:inherit;font-size:12px}

/* ---------- gate (shown while the session is being checked) ---------- */
#gate{min-height:100vh;display:flex;align-items:center;justify-content:center;color:var(--mute);font-size:15px;text-align:center;padding:20px;font-family:var(--serif);font-size:18px}
#app{display:none}

/* ---------- brand + top nav ---------- */
.brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none;color:var(--tx);font-family:var(--serif);font-weight:600;font-size:18px;letter-spacing:-.01em}
.brand .logo,.logo{
  width:28px;height:28px;border-radius:50%;flex:none;display:grid;place-items:center;
  border:1px solid rgba(245,211,143,.55);color:var(--sand);
  font-family:var(--serif);font-weight:600;font-size:14px;line-height:1;
}
.nav{
  display:flex;align-items:center;gap:26px;padding:16px clamp(20px,4vw,48px);
  border-bottom:1px solid var(--ln-2);position:sticky;top:0;z-index:20;
  background:rgba(22,26,58,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.nav .right{margin-left:auto;display:flex;align-items:center;gap:14px}
.nav .who{font-size:13px;color:var(--mute)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;
  border-radius:999px;padding:11px 22px;font-size:14px;font-weight:600;font-family:var(--sans);
  text-decoration:none;cursor:pointer;border:1px solid transparent;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .2s,border-color .2s,color .2s;
}
.btn-primary{background:var(--sand);color:var(--on-sand)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 18px 40px -12px rgba(245,211,143,.55)}
.btn-ghost{background:transparent;color:var(--tx);border-color:var(--ln)}
.btn-ghost:hover{background:var(--glass-2);border-color:rgba(255,255,255,.4)}
.btn-light{background:var(--tx);color:var(--on-light)}
.btn-light:hover{transform:translateY(-2px)}
.btn-sm{padding:8px 16px;font-size:13px}
.btn-lg{padding:16px 32px;font-size:16px}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}

/* ---------- forms ---------- */
label{display:block;font-size:13px;font-weight:600;color:var(--mute);margin-bottom:8px}
input[type="email"],input[type="password"],input[type="text"],textarea{
  width:100%;padding:13px 16px;border:1px solid var(--ln);border-radius:var(--r-md);
  font-size:15px;font-family:var(--sans);color:var(--tx);background:var(--glass);
  transition:border-color .2s,background .2s;
}
input::placeholder,textarea::placeholder{color:var(--mute-2)}
input:focus,textarea:focus{outline:none;border-color:var(--sand);background:var(--glass-2);box-shadow:0 0 0 3px rgba(245,211,143,.18)}

/* ---------- small pieces ---------- */
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--sand)}
.card{background:var(--glass);border:1px solid var(--ln);border-radius:var(--r-card);padding:22px 24px}

@media (max-width:600px){
  .nav{padding:14px 18px;gap:14px}
  .nav .who{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}