/* ============================================================
   Nexus console styling.

   One stylesheet, no preprocessor, no external font (the CSP forbids external
   origins, and a webfont request would also leak the fact that a user is on this
   console to a third party). System font stack only.

   Light and dark are both supported via prefers-color-scheme — a console people
   sit in front of all day should not force a light background at night.
   ============================================================ */

:root {
  --navy: #1a2744;
  --navy-2: #24365c;
  --accent: #2f6f9f;
  --bg: #f5f7fa;
  --surface: #ffffff;
  --border: #dfe4ea;
  --text: #1c2330;
  --text-dim: #5b6577;
  --warn-bg: #fff8e6;
  --warn-border: #e0c089;
  --warn-text: #7a5b1e;
  --err-bg: #fdeceb;
  --err-border: #e5a9a4;
  --err-text: #8d2b23;
  --ok-bg: #eaf6ee;
  --ok-border: #a8d5b8;
  --ok-text: #24623c;
  --info-bg: #eef4fb;
  --info-border: #b9cee6;
  --info-text: #274b73;
  --radius: 8px;
  --sidebar-w: 232px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --navy: #131c2f;
    --navy-2: #1b2740;
    --accent: #5c9dd0;
    --bg: #12161f;
    --surface: #1a1f2b;
    --border: #2c3444;
    --text: #e6eaf2;
    --text-dim: #9aa4b8;
    --warn-bg: #2e2716;
    --warn-border: #6b5626;
    --warn-text: #e8cd8f;
    --err-bg: #2f1a19;
    --err-border: #6d3a35;
    --err-text: #f0aaa3;
    --ok-bg: #17281d;
    --ok-border: #35603f;
    --ok-text: #9ad9ae;
    --info-bg: #182430;
    --info-border: #33506e;
    --info-text: #a6c8e8;
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body { display: flex; flex-direction: column; min-height: 100vh; }
#root { flex: 1 1 auto; display: flex; flex-direction: column; }

/* ---- boot / notices ---- */
.boot { margin: 80px auto; text-align: center; color: var(--text-dim); }

.notice {
  max-width: 620px;
  margin: 48px auto;
  padding: 20px 24px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
}
.notice h2 { margin: 0 0 8px; font-size: 1.15rem; }
.notice p { margin: 0 0 8px; }
.notice-warn  { background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn-text); }
.notice-error { background: var(--err-bg);  border-color: var(--err-border);  color: var(--err-text); }
.notice-info  { background: var(--info-bg); border-color: var(--info-border); color: var(--info-text); }

.pending-list { margin: 10px 0 0; padding-left: 20px; }
.pending-list li { margin: 3px 0; }

/* ---- login ---- */
.login-page { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; padding: 32px 16px; }
.login-card {
  width: 100%; max-width: 420px; padding: 32px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 2px 18px rgba(20, 30, 50, .07);
}
.login-title { margin: 0; font-size: 1.7rem; color: var(--navy); letter-spacing: -.01em; }
@media (prefers-color-scheme: dark) { .login-title { color: var(--text); } }
.login-sub { margin: 4px 0 24px; color: var(--text-dim); font-size: .9rem; }
.login-form { display: flex; flex-direction: column; gap: 14px; }
.login-actions { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.login-hint { margin: 20px 0 0; font-size: .82rem; color: var(--text-dim); }
.login-legal { margin-top: 18px; display: flex; gap: 14px; font-size: .8rem; }
.login-legal a { color: var(--accent); text-decoration: none; }
.login-legal a:hover { text-decoration: underline; }
.login-build { margin: 14px 0 0; font-size: .72rem; color: var(--text-dim); }

/* ---- fields ---- */
.field { display: flex; flex-direction: column; gap: 5px; }
.field-label { font-size: .82rem; font-weight: 600; color: var(--text-dim); }
.field input {
  padding: 10px 12px; font: inherit; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
}
.field input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
input[name="code"] { letter-spacing: .3em; font-variant-numeric: tabular-nums; }

/* ---- buttons ---- */
.btn {
  padding: 10px 16px; font: inherit; font-weight: 600;
  border-radius: 6px; border: 1px solid transparent; cursor: pointer;
}
.btn:disabled { opacity: .6; cursor: default; }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-primary { background: var(--navy); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--navy-2); }
.btn-link { background: none; border: none; color: var(--accent); font-weight: 500; padding: 10px 4px; }
.btn-link:hover:not(:disabled) { text-decoration: underline; }
.btn-quiet { background: transparent; border-color: var(--border); color: var(--text-dim); padding: 7px 12px; font-size: .85rem; }
.btn-quiet:hover { color: var(--text); }

/* ---- status text ---- */
.form-status { margin: 0; min-height: 1.2em; font-size: .85rem; }
.form-status-error { color: var(--err-text); }
.form-status-warn  { color: var(--warn-text); }
.form-status-ok    { color: var(--ok-text); }

/* ---- app shell ---- */
.app-shell { flex: 1 1 auto; display: flex; align-items: stretch; min-height: 0; }
.shell-side { flex: 0 0 var(--sidebar-w); }
.shell-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.sidebar {
  position: sticky; top: 0; height: 100vh; width: var(--sidebar-w);
  display: flex; flex-direction: column;
  background: var(--navy); color: #e8edf6;
}
.sidebar-brand { padding: 20px 18px 16px; display: flex; flex-direction: column; }
.brand-mark { font-size: 1.2rem; font-weight: 700; letter-spacing: -.01em; }
.brand-sub { font-size: .72rem; opacity: .65; }
.sidebar-nav { display: flex; flex-direction: column; padding: 6px 8px; gap: 2px; }
.nav-link {
  text-align: left; padding: 9px 12px; font: inherit; font-size: .9rem;
  color: #cdd7e8; background: transparent; border: none; border-radius: 6px; cursor: pointer;
}
.nav-link:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.nav-link.is-active { background: rgba(255, 255, 255, .13); color: #fff; font-weight: 600; }
.nav-link:focus-visible { outline: 2px solid #7fb2dc; outline-offset: -2px; }
.sidebar-foot { margin-top: auto; padding: 14px 16px; border-top: 1px solid rgba(255, 255, 255, .1); }
.who { display: flex; flex-direction: column; margin-bottom: 10px; }
.who-name { font-size: .85rem; font-weight: 600; }
.who-role { font-size: .72rem; opacity: .65; }
.sidebar-foot .btn-quiet { color: #cdd7e8; border-color: rgba(255, 255, 255, .2); width: 100%; }
.sidebar-foot .btn-quiet:hover { color: #fff; background: rgba(255, 255, 255, .07); }

.content { flex: 1 1 auto; padding: 28px 32px; min-width: 0; }
.content:focus { outline: none; }
.view-title { margin: 0 0 4px; font-size: 1.35rem; color: var(--text); }
.view-blurb { margin: 0 0 20px; color: var(--text-dim); max-width: 70ch; }

/* ---- banner (idle warning, degrade notices) ---- */
.banner { padding: 10px 32px; font-size: .88rem; border-bottom: 1px solid var(--border); }
.banner-warn  { background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn-text); }
.banner-error { background: var(--err-bg);  border-color: var(--err-border);  color: var(--err-text); }
.banner-info  { background: var(--info-bg); border-color: var(--info-border); color: var(--info-text); }

/* ---- empty states + disclosed figures ---- */
.empty {
  padding: 22px; border: 1px dashed var(--border); border-radius: var(--radius);
  background: var(--surface); color: var(--text-dim);
}
.empty-msg { margin: 0 0 6px; font-weight: 600; color: var(--text); }
.empty-detail { margin: 0; font-size: .87rem; }

/* A computed figure always shows its basis beneath it (calculation transparency). */
.figure { display: inline-flex; flex-direction: column; }
.figure-value { font-variant-numeric: tabular-nums; font-weight: 600; }
.figure-basis { font-size: .74rem; color: var(--text-dim); }

/* ---- footer ---- */
.app-footer {
  flex: 0 0 auto; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 10px 24px; font-size: .76rem; color: var(--text-dim);
  background: var(--surface); border-top: 1px solid var(--border);
}
.footer-links { display: flex; gap: 12px; }
.footer-links a { color: var(--text-dim); text-decoration: none; }
.footer-links a:hover { color: var(--accent); text-decoration: underline; }
.footer-build { margin-left: auto; font-variant-numeric: tabular-nums; }
body.is-anon .app-footer { background: transparent; border-top: none; }

/* ---- legal pages (static, no JS) ---- */
.legal { max-width: 760px; margin: 48px auto; padding: 0 20px 60px; }
.legal h1 { font-size: 1.5rem; color: var(--navy); }
@media (prefers-color-scheme: dark) { .legal h1 { color: var(--text); } }
.legal h2 { font-size: 1.05rem; margin-top: 28px; }
.legal p, .legal li { color: var(--text); }
.legal .updated { color: var(--text-dim); font-size: .85rem; }
.legal a { color: var(--accent); }

@media (max-width: 720px) {
  .app-shell { flex-direction: column; }
  .shell-side { flex: 0 0 auto; }
  .sidebar { position: static; height: auto; width: 100%; }
  .sidebar-nav { flex-direction: row; overflow-x: auto; }
  .content { padding: 20px 16px; }
  .banner { padding: 10px 16px; }
}