/* RandWOD website — account.css
   Auth page styling. Telemetry tokens (subset of style.css) + the auth card. */

:root {
  --bg: #0D0D0D; --bg2: #131313; --text: #F2F0EB;
  --text-60: rgba(242,240,235,.6); --text-40: rgba(242,240,235,.4); --text-25: rgba(242,240,235,.25);
  --line: rgba(242,240,235,.09); --line-strong: rgba(242,240,235,.16);
  --orange: #FF4A09; --blue: #00B1FC; --green: #2BD576;
  --body: 'Space Grotesk', -apple-system, sans-serif; --mono: 'JetBrains Mono', monospace;
  --grid: linear-gradient(rgba(242,240,235,.022) 1px, transparent 1px) 0 0 / 100% 72px,
          linear-gradient(90deg, rgba(242,240,235,.022) 1px, transparent 1px) 0 0 / 72px 100%,
          linear-gradient(rgba(242,240,235,.055) 1px, transparent 1px) 0 0 / 100% 288px,
          linear-gradient(90deg, rgba(242,240,235,.055) 1px, transparent 1px) 0 0 / 288px 100%;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
::selection { background: var(--orange); color: #fff; }
/* SHORTHAND, not `background-image` — `--grid` carries `0 0 / 100% 72px`
   position/size syntax on each layer, which `background-image` does NOT
   accept. Written as `background-image: var(--grid)` the whole declaration
   is invalid and Chrome drops it silently: this page had no grid at all
   from the day it was written. style.css:107 always had it right
   (`background: var(--grid) var(--bg)`), which is why the landing page
   showed the texture and the portal pages did not. */
body { background: var(--grid) var(--bg); color: var(--text);
  font-family: var(--body); -webkit-font-smoothing: antialiased; min-height: 100vh; }

nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center;
  padding: 0 6vw; height: 58px; border-bottom: 1px solid var(--line);
  background: rgba(13,13,13,.75); backdrop-filter: blur(16px); }
/* no flex gap: "Rand" + the WOD span must stay one word — space the mark only */
.logo { font-weight: 700; font-size: 16px; letter-spacing: -.02em; text-decoration: none; color: var(--text); display: flex; align-items: flex-end; }
.logo .logo-mark { width: 22px; height: 22px; display: block; margin-right: 8px; margin-bottom: 1px; }  /* icon bottom on the wordmark baseline (owner 2026-08-23) */
.logo span { color: var(--orange); }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 7px; font-family: var(--mono);
  font-size: 10.5px; color: var(--text-40); letter-spacing: .14em; }
/* Green is a LIVE signal, never decoration (STYLE_GUIDE §2): the session is
   genuinely open by the time this page paints. */
.nav-right .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 8px var(--green); animation: pulse 2s infinite; }
@keyframes pulse { 50% { opacity: .3; } }

/* The decoration layer clips to this, so it must be the positioned ancestor. */
.page { position: relative; min-height: 100vh; overflow: hidden; }
.grid-fx { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.grid-fx .cell, .grid-fx .plus, .grid-fx .formula { position: absolute; }
.c-blue { left: 144px; top: 288px; width: 143px; height: 71px; background: rgba(0,177,252,0.045); }
.c-orange { right: 216px; top: 216px; width: 71px; height: 143px; background: rgba(255,74,9,0.05); }
.c-outline { width: 71px; height: 71px; border: 1px solid var(--line); }
.o1 { left: 288px; bottom: 216px; }
.o2 { right: 360px; bottom: 144px; }
.plus { font-family: var(--mono); font-size: 13px; color: rgba(242,240,235,0.10); transform: translate(-50%,-50%); }
.p1 { left: 216px; top: 216px; }
.p2 { left: 432px; top: 576px; }
.p3 { right: 288px; top: 432px; }
.p4 { right: 144px; bottom: 288px; }
.formula { font-family: var(--mono); letter-spacing: .04em; white-space: nowrap; }
.formula em { font-style: normal; color: rgba(255,74,9,0.3); }
.f1 { left: 4vw; top: 33%; font-size: 13px; color: rgba(242,240,235,0.11); transform: rotate(-7deg); }
.f2 { right: 3.4vw; bottom: 22%; font-size: 11px; color: rgba(242,240,235,0.10); transform: rotate(5deg); }

.wrap { position: relative; z-index: 2; min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 116px 20px 48px; }
.card { position: relative; width: 100%; max-width: 452px; background: var(--bg2);
  border: 1px solid var(--line-strong); border-radius: 16px; padding: 34px 34px 26px;
  box-shadow: 0 40px 90px rgba(0,0,0,.5); }
/* Page chrome, not card content — it sits under every panel, the developer
   portal included, because it is about the portal rather than about signing in. */
.undercard { width: 100%; max-width: 452px; display: flex; justify-content: space-between;
  margin-top: 20px; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: var(--text-25); }
.undercard .links { display: flex; gap: 18px; }
.undercard a { color: var(--text-25); text-decoration: none; }
.undercard a:hover { color: var(--text-60); }
.card::before { content: ''; position: absolute; left: 34px; right: 34px; top: 0; height: 2px;
  background: linear-gradient(90deg, var(--blue), var(--orange)); border-radius: 2px; opacity: .9; }

.eyebrow { font-family: var(--mono); font-size: 10px; letter-spacing: .22em; color: var(--text-40);
  text-transform: uppercase; margin-bottom: 18px; display: flex; align-items: center; gap: 8px; }
/* green dot only on genuinely live state (Session Active) — green is a live
   signal, never decoration (STYLE_GUIDE §2) */
.eyebrow.live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 8px var(--green); }
h1 { font-size: 27px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.sub { font-family: var(--mono); font-size: 12px; color: var(--text-60); margin-top: 8px; line-height: 1.5; }
/* The sign-in card's own explanation line — body face, not mono: it is a
   sentence to read, not a readout. */
.lead { font-size: 14px; color: var(--text-60); line-height: 1.6; margin: 10px 0 26px; text-wrap: pretty; }
.hint { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; color: var(--text-25);
  margin-top: 12px; line-height: 1.6; }

.panel { display: none; }
.panel.active { display: block; }

.btn-google { margin-top: 26px; width: 100%; display: flex; align-items: center; justify-content: center;
  gap: 11px; background: #fff; color: #1f1f1f; border: none; border-radius: 10px; height: 50px; cursor: pointer;
  font-family: var(--body); font-size: 14.5px; font-weight: 600; }
.btn-google:hover { background: #f1f1f1; }

.btn-apple { margin-top: 10px; width: 100%; display: flex; align-items: center; justify-content: center;
  gap: 10px; background: #000; color: #fff; border: 1px solid var(--line-strong); border-radius: 10px; height: 50px;
  cursor: pointer; font-family: var(--body); font-size: 14.5px; font-weight: 600; }
.btn-apple:hover { background: #161616; border-color: rgba(242,240,235,.28); }

.divider { display: flex; align-items: center; gap: 14px; margin: 24px 0 20px; }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.divider span { font-family: var(--mono); font-size: 9.5px; letter-spacing: .2em; color: var(--text-25); }

label.fld { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; color: var(--text-40);
  text-transform: uppercase; display: block; margin-bottom: 9px; }
input[type=email] { width: 100%; height: 48px; background: var(--bg); border: 1px solid var(--line-strong);
  border-radius: 10px; padding: 0 14px; color: var(--text); font-family: var(--mono); font-size: 13.5px;
  outline: none; transition: border-color .15s; }
input[type=email]::placeholder { color: var(--text-25); }
input[type=email]:focus { border-color: var(--orange); }

.btn-primary { margin-top: 12px; width: 100%; height: 50px; display: flex; align-items: center;
  justify-content: center; gap: 9px; background: var(--orange); color: #fff; border: none; border-radius: 10px;
  cursor: pointer; font-family: var(--body); font-size: 15px; font-weight: 600; text-decoration: none; }
.btn-primary { transition: box-shadow .25s; }
.btn-primary:hover { box-shadow: 0 0 36px rgba(255,74,9,0.45); } /* same glow as .btn-o, no off-brand orange */

.err { display: none; margin-top: 14px; font-family: var(--mono); font-size: 11.5px; color: var(--orange);
  line-height: 1.4; }
.err.show { display: block; }

.foot { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.foot p { font-family: var(--mono); font-size: 11px; color: var(--text-40); line-height: 1.5; }
.foot p span { color: var(--text-25); }
.appstore { display: inline-flex; align-items: center; gap: 8px; background: #000; border: 1px solid var(--line-strong);
  color: #fff; text-decoration: none; border-radius: 9px; padding: 9px 14px; font-size: 12px; font-weight: 600;
  white-space: nowrap; transition: border-color .15s; }
.appstore:hover { border-color: rgba(242,240,235,.28); }
.appstore small { display: block; font-size: 8px; font-weight: 400; color: var(--text-60); letter-spacing: .04em; }

.glyph { width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 22px; margin-bottom: 18px; }
.glyph.ok { background: rgba(43,213,118,.12); color: var(--green); border: 1px solid rgba(43,213,118,.35); }
.glyph.warn { background: rgba(255,74,9,.12); color: var(--orange); border: 1px solid rgba(255,74,9,.35); }
.mono-em { font-family: var(--mono); color: var(--text); font-size: 12.5px; }
.ghost { margin-top: 14px; width: 100%; height: 44px; background: transparent; border: 1px solid var(--line-strong);
  border-radius: 9px; color: var(--text-60); font-family: var(--mono); font-size: 12px; letter-spacing: .06em; cursor: pointer; }
.ghost:hover { color: var(--text); border-color: var(--text-40); }

.acct-id { display: flex; align-items: center; gap: 12px; margin-top: 24px; padding: 14px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.avatar { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, var(--blue), var(--orange)); flex: none; }
.acct-id .who { font-size: 13px; font-weight: 600; }
.acct-id .who small { display: block; font-family: var(--mono); font-size: 10.5px; color: var(--text-40); font-weight: 400; margin-top: 2px; }

.spinner { width: 26px; height: 26px; border: 2px solid var(--line-strong); border-top-color: var(--orange);
  border-radius: 50%; animation: spin 0.8s linear infinite; margin: 8px auto 0; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Developer / API Tokens (inside #panel-account) */
.dev-section { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.dev-section .sub { margin-bottom: 16px; }
#token-form input[type=text] { width: 100%; height: 46px; background: var(--bg);
  border: 1px solid var(--line-strong); border-radius: 9px; padding: 0 14px; color: var(--text);
  font-family: var(--mono); font-size: 13.5px; outline: none; }
#token-form input[type=text]:focus { border-color: var(--orange); }

.token-reveal { margin-top: 16px; padding: 14px; border: 1px solid rgba(255,74,9,.35);
  border-radius: 10px; background: rgba(255,74,9,.06); }
.token-warn { font-family: var(--mono); font-size: 11px; color: var(--orange); margin-bottom: 10px; }
.token-reveal-row { display: flex; align-items: center; gap: 10px; }
.token-plain { flex: 1; font-family: var(--mono); font-size: 12px; color: var(--text);
  word-break: break-all; line-height: 1.4; }
.token-copy { margin-top: 0; width: auto; height: 36px; padding: 0 14px; white-space: nowrap; }

.token-list { list-style: none; margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.token-empty { font-family: var(--mono); font-size: 11.5px; color: var(--text-40); }
.token-row { padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.token-row-main { display: flex; align-items: baseline; gap: 10px; }
.token-row-name { font-size: 13px; font-weight: 600; }
.token-row-prefix { font-family: var(--mono); font-size: 11px; color: var(--text-40); }
.token-row-meta { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 12px;
  font-family: var(--mono); font-size: 10.5px; color: var(--text-40); }
.token-badge { text-transform: uppercase; letter-spacing: .1em; }
.token-badge-active { color: var(--green); }
.token-badge-revoked { color: var(--orange); }
.token-revoke { margin-top: 10px; width: auto; height: 34px; padding: 0 14px; }

@media (prefers-reduced-motion: reduce) {
  .nav-right .dot { animation: none; }
  .spinner { animation-duration: 2.4s; }
}