/* ==========================================================================
   accounts.realbrain.cc styles
   ==========================================================================
   Ported subset of the RealBrain Design System v2.0. Canonical source:
   realbrain.cc repo → docs/design-system/tokens.css (+ README.md for rules).
   Do not edit values here without checking that file first — this copy only
   carries the tokens/components the auth pages use, plus the auth-shell
   layout block at the end (structural, token-only).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

/* ---------- Tokens (dark — these pages ship dark-only, like realbrain.cc) ---------- */
:root {
  --bg: #080808;
  --surface: #121216;
  --elevated: #1A1A20;
  --text-1: #F4F4F6;
  --text-2: #A9A9B4;
  --text-3: #83838F;
  --accent: #8FA8FF;
  --accent-fg: #080808;             /* dark text ON accent — never white on periwinkle */
  --accent-hover: color-mix(in oklab, var(--accent), white 14%);
  --accent-pressed: color-mix(in oklab, var(--accent), black 24%);
  --success: #3ECF8E;
  --warning: #E8B23D;
  --error: #F26D6D;
  --info: #62B0F5;
  --border: #26262E;
  --border-strong: #3A3A46;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.45);
  --shadow-md: 0 4px 14px rgba(0,0,0,.5);
  --shadow-lg: 0 16px 40px rgba(0,0,0,.55);

  --font-ui: 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --fs-1: 12px; --lh-1: 16px;
  --fs-2: 13px; --lh-2: 20px;
  --fs-3: 15px; --lh-3: 24px;
  --fs-4: 17px; --lh-4: 26px;
  --fs-5: 20px; --lh-5: 28px;
  --fs-6: 24px; --lh-6: 32px;

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;
  --space-4: 16px; --space-5: 24px; --space-6: 32px;
  --space-7: 48px; --space-8: 64px;

  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-full: 999px;

  --dur-1: 120ms; --dur-2: 200ms; --dur-3: 360ms;
  --ease: cubic-bezier(.22,.61,.36,1);

  --control-h: 44px;
  --control-pad-x: var(--space-4);

  color-scheme: dark;
}

.density-comfortable { --control-h: 44px; --control-pad-x: var(--space-4); }

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; }
  *, *::before, *::after { animation-duration: 0ms !important; transition-duration: 0ms !important; }
}

/* ---------- Base ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text-1);
  font-family: var(--font-ui);
  font-size: var(--fs-3);
  line-height: var(--lh-3);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: var(--accent); color: var(--accent-fg); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
code, .mono { font-family: var(--font-mono); }

/* ---------- Brand chrome ---------- */
.r-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; flex: none;
  background: var(--accent); color: var(--accent-fg);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-weight: 600; font-size: var(--fs-3);
}

/* ---------- Button ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: var(--control-h); padding: 0 var(--control-pad-x);
  border-radius: var(--radius-sm);
  font-family: var(--font-ui); font-size: var(--fs-2); line-height: var(--lh-2); font-weight: 500;
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }

.btn-primary { background: var(--accent); color: var(--accent-fg); }
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); }
.btn-primary:active:not(:disabled) { background: var(--accent-pressed); }

.btn-secondary { background: var(--surface); color: var(--text-1); border-color: var(--border-strong); }
.btn-secondary:hover:not(:disabled) { background: var(--elevated); border-color: var(--text-3); }
.btn-secondary:active:not(:disabled) { background: var(--bg); }

.btn-ghost { background: transparent; color: var(--text-2); }
.btn-ghost:hover:not(:disabled) { background: var(--surface); color: var(--text-1); }
.btn-ghost:active:not(:disabled) { background: var(--elevated); }

.spinner {
  width: 14px; height: 14px; flex: none;
  border: 2px solid color-mix(in oklab, currentColor, transparent 70%);
  border-top-color: currentColor;
  border-radius: var(--radius-full);
  animation: spin 800ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Field / Input ---------- */
.field { display: grid; gap: var(--space-2); max-width: 320px; }
.field label { font-size: var(--fs-2); line-height: var(--lh-2); font-weight: 500; }
.field .help { font-size: var(--fs-1); line-height: var(--lh-1); color: var(--text-3); }
.field .error-msg { font-size: var(--fs-1); line-height: var(--lh-1); color: var(--error); display: flex; gap: var(--space-1); align-items: center; }
.input {
  height: var(--control-h); padding: 0 var(--space-3);
  background: var(--surface); color: var(--text-1);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  font-family: var(--font-ui); font-size: var(--fs-2); width: 100%;
  transition: border-color var(--dur-1) var(--ease);
}
.input::placeholder { color: var(--text-3); }
.input:hover:not(:disabled) { border-color: var(--text-3); }
.input:disabled { opacity: .45; cursor: not-allowed; }
.input.is-error { border-color: var(--error); }

/* ---------- Card ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-5); }

/* ---------- Skeleton ---------- */
.skeleton { position: relative; overflow: hidden; background: var(--elevated); border-radius: var(--radius-sm); }
.skeleton::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--text-3), transparent 82%), transparent);
  animation: shimmer 1.4s var(--ease) infinite;
}
@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* ==========================================================================
   Auth shell — accounts.realbrain.cc–specific layout. Structural only;
   every value is a token or matches a design-system precedent
   (440px card width = dialog.modal max-width in tokens.css).
   ========================================================================== */
.auth-wrap {
  min-height: 100dvh;
  display: grid; place-content: center; justify-items: center;
  gap: var(--space-5);
  padding: var(--space-5);
}
.auth-brand {
  display: inline-flex; align-items: center; gap: var(--space-3);
  color: var(--text-1); font-weight: 600; font-size: var(--fs-3);
}
.auth-brand:hover { text-decoration: none; }

.auth-card { width: min(440px, calc(100vw - var(--space-6))); padding: var(--space-6); }
.auth-card h1 { font-size: var(--fs-6); line-height: var(--lh-6); font-weight: 600; margin-bottom: var(--space-1); }
.auth-sub { color: var(--text-2); font-size: var(--fs-2); line-height: var(--lh-2); margin-bottom: var(--space-5); }

.auth-card form { display: grid; gap: var(--space-4); }
.auth-card .field { max-width: none; }
.auth-submit { width: 100%; margin-top: var(--space-2); }
.auth-alt { margin-top: var(--space-5); font-size: var(--fs-2); line-height: var(--lh-2); color: var(--text-2); text-align: center; }

/* ---------- Account page ---------- */
.account-rows { display: grid; gap: var(--space-4); }
.account-row { display: grid; gap: var(--space-1); }
.account-row .k { font-size: var(--fs-1); line-height: var(--lh-1); color: var(--text-3); }
.account-row .v { font-size: var(--fs-3); line-height: var(--lh-3); }
.account-actions { display: flex; gap: var(--space-3); margin-top: var(--space-6); }
.account-links {
  margin-top: var(--space-6); padding-top: var(--space-5);
  border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4);
  font-size: var(--fs-2); line-height: var(--lh-2);
}
/* Nav-style links stay neutral — accent is reserved for the primary action. */
.account-links a { color: var(--text-2); }
.account-links a:hover { color: var(--text-1); text-decoration: none; }