/* ═══════════════════════════════════════════════════════════════════════════
   ra.css — remoteagent.online design system. The only stylesheet that declares
   colour, type, space, radius or shadow. Everything else references tokens.

   Why one file: the site shipped 17 custom stylesheets, 662 distinct colour
   literals, 14 font sizes and 321 KB of inline <style> (measured, verify/census.mjs).
   That is what made the surface look pieced together and what made "clean up the
   GUI" turn into a colour-by-colour argument every time.

   Rules of the house
   · colour ONLY from tokens below — a raw hex in a surface file is a bug
   · the type scale is the scale; do not invent intermediate sizes
   · spacing from --sp*, radii from --r*, one transition, one shadow ladder
   · both themes are complete: a rule that only exists in one theme is a bug
   · the legacy token names (--mw-*, --rd-*, --agent-*) are aliased at the bottom
     so every existing rule re-themes without being rewritten. Nothing is deleted.

   Theme switch: data-mona-theme on <html> (the dashboard's existing JS owns it,
   localStorage "mona.console.theme"). data-ra-theme is accepted as an alias so
   new pages can use it. With no attribute at all, the system preference wins.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. TOKENS ─────────────────────────────────────────────────────────── */

:root {
  /* type — Apple's stack, one scale, no 10.5px inventions */
  --ra-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
             "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ra-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --fs-xs: 12px;      /* metadata, table captions   */
  --fs-sm: 13px;      /* secondary text, table body */
  --fs-base: 15px;    /* body copy                  */
  --fs-md: 17px;      /* card titles                */
  --fs-lg: 21px;      /* section headings           */
  --fs-xl: 28px;      /* page titles                */
  --fs-2xl: 40px;     /* hero                       */
  --fs-2xs: 11px;     /* the smallest label that still reads (chips, eyebrows) */
  --fs-3xl: 56px;     /* the one display size above the hero */
  --lh-tight: 1.25; --lh-base: 1.5; --lh-loose: 1.65;
  --fw-normal: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700;
  /* Optical tracking: the larger the type, the tighter it sets. One value for every
     size is what makes big headings look loose and small labels look cramped. */
  --ls-tight: -.015em; --ls-wide: .04em;
  --ls-body: -.011em; --ls-title: -.022em; --ls-display: -.028em;

  /* space — a 4pt grid, and a section rhythm so every page breathes the same way */
  --sp1: 4px; --sp2: 8px; --sp3: 12px; --sp4: 16px; --sp5: 24px; --sp6: 32px; --sp7: 48px;
  --sp8: 64px; --sp9: 80px; --sp10: 112px;
  --ra-section: var(--sp9);      /* vertical gap between page sections (desktop) */
  --ra-section-sm: var(--sp7);   /* the same rhythm on a phone */

  /* radii */
  --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 22px; --r-pill: 999px;

  /* motion */
  --t-fast: 120ms cubic-bezier(.32,.72,0,1);
  --t-base: 200ms cubic-bezier(.32,.72,0,1);

  /* layout */
  --ra-max: 1120px;      /* reading width, from the landing */
  --ra-wide: 1440px;     /* app shell                       */
  --ra-measure: 68ch;    /* comfortable line length for prose */

  /* Materials and targets.
     --ra-material is a translucent fill for sticky chrome. It is only ever used with
     an ink token that was measured against the OPAQUE backdrop behind it, because a
     translucent panel over an unknown backdrop is how accent-on-accent (1:1) ships. */
  --ra-blur: saturate(180%) blur(20px);
  --ra-tap: 44px;        /* the smallest comfortable touch target */
  --ra-focus: var(--ra-accent);
}

/* LIGHT — the landing's palette, promoted to the whole site */
:root, html[data-mona-theme="light"], html[data-ra-theme="light"] {
  --ra-bg: #fbfbfd;
  --ra-bg-soft: #f5f5f7;
  --ra-panel: #ffffff;
  --ra-panel-2: #f5f5f7;
  --ra-input: #ffffff;
  --ra-ink: #1d1d1f;
  --ra-ink-2: #424245;
  --ra-muted: #5f5f66;   /* Apple's #6e6e73 measures 4.47:1 on the tinted footer */
  --ra-faint: #6e6e73;
  --ra-line: #d2d2d7;
  --ra-line-strong: #b8b8bf;
  --ra-accent: #0071e3;          /* fills: #0a84ff measured 3.65:1 with white text */
  --ra-accent-text: #0066cc;     /* text: #0a84ff measured 3.4:1 on white          */
  --ra-accent-ink: #ffffff;
  --ra-accent-soft: rgba(0,113,227,.10);
  --ra-ok: #16794a; --ra-ok-soft: #e8f7ee;
  --ra-warn: #9a6400; --ra-warn-soft: #fff6e5;
  --ra-bad: #c8102e; --ra-bad-soft: #fdecee;
  --ra-info: #0369a1; --ra-info-soft: #e6f4fb;
  --ra-sh1: 0 1px 2px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04);
  --ra-sh2: 0 8px 28px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.05);
  /* Sticky chrome over page content. Opaque enough that the ink measured against it
     still holds; never a 6%-alpha wash, which is what broke this before. */
  --ra-material: rgba(251,251,253,.86);
  --ra-glow: radial-gradient(900px 500px at 90% -10%, rgba(10,132,255,.06), transparent 60%);
  color-scheme: light;
}

/* DARK — neutral, deep, no neon */
html[data-mona-theme="dark"], html[data-ra-theme="dark"] {
  --ra-bg: #0b0b0d;
  --ra-bg-soft: #121214;
  --ra-panel: #17171a;
  --ra-panel-2: #1f1f23;
  --ra-input: #1a1a1e;
  --ra-ink: #f5f5f7;
  --ra-ink-2: #e0e0e5;
  --ra-muted: #a1a1a6;
  --ra-faint: #8e8e93;
  --ra-line: rgba(255,255,255,.12);
  --ra-line-strong: rgba(255,255,255,.22);
  --ra-accent: #409cff;
  --ra-accent-text: #6cb2ff;
  --ra-accent-ink: #04131f;
  --ra-accent-soft: rgba(64,156,255,.14);
  --ra-ok: #30d158; --ra-ok-soft: rgba(48,209,88,.14);
  --ra-warn: #ffd60a; --ra-warn-soft: rgba(255,214,10,.14);
  --ra-bad: #ff6961; --ra-bad-soft: rgba(255,105,97,.14);
  --ra-info: #6cb2ff; --ra-info-soft: rgba(108,178,255,.14);
  --ra-sh1: 0 1px 2px rgba(0,0,0,.5);
  --ra-sh2: 0 12px 32px rgba(0,0,0,.55);
  --ra-material: rgba(11,11,13,.78);
  --ra-glow: radial-gradient(900px 500px at 90% -10%, rgba(64,156,255,.10), transparent 60%);
  color-scheme: dark;
}

/* no attribute anywhere → follow the OS (the toggle then writes the attribute) */
@media (prefers-color-scheme: dark) {
  :root:not([data-mona-theme]):not([data-ra-theme]) {
    --ra-bg: #0b0b0d; --ra-bg-soft: #121214; --ra-panel: #17171a; --ra-panel-2: #1f1f23;
    --ra-input: #1a1a1e; --ra-ink: #f5f5f7; --ra-ink-2: #e0e0e5; --ra-muted: #a1a1a6;
    --ra-faint: #8e8e93; --ra-line: rgba(255,255,255,.12); --ra-line-strong: rgba(255,255,255,.22);
    --ra-accent: #409cff; --ra-accent-text: #6cb2ff; --ra-accent-ink: #04131f; --ra-accent-soft: rgba(64,156,255,.14);
    --ra-sh1: 0 1px 2px rgba(0,0,0,.5); --ra-sh2: 0 12px 32px rgba(0,0,0,.55);
    --ra-glow: radial-gradient(900px 500px at 90% -10%, rgba(64,156,255,.10), transparent 60%);
    color-scheme: dark;
  }
}

/* ── 2. LEGACY ALIASES — the merge, not a rewrite ──────────────────────────
   Three generations of token names already exist in the live CSS. Pointing them
   at the system means every rule that used them re-themes for free, and no
   surface file has to be rewritten to be consistent. */
:root {
  --mw-canvas: var(--ra-bg); --mw-card: var(--ra-panel); --mw-p: var(--ra-panel);
  --mw-p2: var(--ra-panel-2); --mw-ink: var(--ra-ink); --mw-ink2: var(--ra-ink-2);
  --mw-mut: var(--ra-muted); --mw-mut2: var(--ra-faint);
  --mw-line: var(--ra-line); --mw-line2: var(--ra-line-strong);
  --mw-ok: var(--ra-ok); --mw-okd: var(--ra-ok-soft);
  --mw-warn: var(--ra-warn); --mw-err: var(--ra-bad);
  --mw-sh: var(--ra-sh1); --mw-sh2: var(--ra-sh2);
  --mw-font: var(--ra-font); --mw-mono: var(--ra-mono);
  --mw-r: var(--r-md); --mw-rs: var(--r-sm); --mw-pd: var(--sp4);
  --rd-ink: var(--ra-ink); --rd-muted: var(--ra-muted); --rd-hair: var(--ra-line);
  --rd-paper: var(--ra-panel); --rd-off: var(--ra-bg-soft);
  --rd-accent: var(--ra-accent); --rd-cyan: var(--ra-accent); --rd-gold: var(--ra-warn);
  --rd-font: var(--ra-font); --rd-mono: var(--ra-mono); --rd-max: var(--ra-max);
  --rd-shadow: var(--ra-sh2);
  --agent-bg: var(--ra-bg); --agent-surface: var(--ra-panel);
  --agent-ink: var(--ra-ink); --agent-muted: var(--ra-muted);
  --agent-line: var(--ra-line); --agent-cyan: var(--ra-accent);
  --agent-font: var(--ra-font);
}

/* ── 3. BASE ───────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ra-glow), var(--ra-bg);
  color: var(--ra-ink);
  font: var(--fw-normal) var(--fs-base)/var(--lh-base) var(--ra-font);
  letter-spacing: var(--ls-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Display type sets tighter than body text, and headings balance their lines instead of
   leaving one orphan word. Both are what "Apple-grade" mostly IS at this size. */
h1,h2,h3,h4 { margin: 0 0 var(--sp3); font-weight: var(--fw-semi); letter-spacing: var(--ls-title); line-height: var(--lh-tight); text-wrap: balance; }
h1 { font-size: var(--fs-xl); letter-spacing: var(--ls-display); }
h2 { font-size: var(--fs-lg); }
h3 { font-size: var(--fs-md); }
h4 { font-size: var(--fs-base); }
p  { margin: 0 0 var(--sp4); text-wrap: pretty; }
/* Prose gets a measure: an unbounded paragraph on a 1440px screen is unreadable. */
.ra-prose, .ra-lede { max-width: var(--ra-measure); }
.ra-lede { font-size: var(--fs-md); color: var(--ra-muted); line-height: var(--lh-loose); }
small { font-size: var(--fs-sm); color: var(--ra-muted); }
a { color: var(--ra-accent-text); text-decoration: none; text-underline-offset: 3px; }
a:hover { text-decoration: underline; }
code, pre, kbd, samp { font-family: var(--ra-mono); font-size: .92em; }
code { background: var(--ra-panel-2); border: 1px solid var(--ra-line); border-radius: var(--r-sm); padding: 1px 6px; color: var(--ra-ink); }
hr { border: 0; border-top: 1px solid var(--ra-line); margin: var(--sp5) 0; }
::selection { background: var(--ra-accent); color: var(--ra-accent-ink); }
:focus-visible { outline: 2px solid var(--ra-focus); outline-offset: 2px; border-radius: var(--r-sm); }
/* A number that updates in place must not jitter: metrics line up in columns. */
.ra-num, .ra-metric, [data-num] { font-variant-numeric: tabular-nums; }

/* ── touch targets ───────────────────────────────────────────────────────────
   Measured on a 390px viewport: the landing and the app shell carried 112 controls
   under 44px, almost all of them links in the nav and the footer — a thumb misses
   those. On a coarse pointer every standalone control gets the floor; inline links
   inside a sentence are exempt, because padding them would wreck the paragraph. */
@media (pointer: coarse) {
  a.ra-btn, button, .ra-btn, .mw-b, .mw-bo, .mw-t, .mw-ibtn,
  nav a, footer a, .mw-dr-link, .mw-foot2 a, .ra-nav a, .landing-nav a {
    min-height: var(--ra-tap);
    display: inline-flex;
    align-items: center;
  }
  p a, li a, .ra-prose a, small a, code a { min-height: 0; display: inline; }
}

/* themed scrollbars — never a grey slab */
* { scrollbar-width: thin; scrollbar-color: var(--ra-line-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--ra-line-strong); border-radius: var(--r-pill); border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--ra-muted); background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ── 4. PRIMITIVES ─────────────────────────────────────────────────────── */
.ra-card, .ra-panel {
  background: var(--ra-panel); border: 1px solid var(--ra-line);
  border-radius: var(--r-lg); padding: var(--sp5); box-shadow: var(--ra-sh1);
}
.ra-card > h2, .ra-card > h3 { margin-top: 0; }
.ra-muted { color: var(--ra-muted); }
.ra-faint { color: var(--ra-faint); }
.ra-mono { font-family: var(--ra-mono); }
.ra-row { display: flex; align-items: center; gap: var(--sp3); flex-wrap: wrap; }
.ra-grid { display: grid; gap: var(--sp4); }
.ra-between { display: flex; align-items: center; justify-content: space-between; gap: var(--sp3); }
.ra-stack { display: grid; gap: var(--sp3); }
.ra-hide { display: none !important; }
/* Section rhythm: every page spaces its blocks with the same two values, so surfaces
   built by different people still line up. */
.ra-section { padding: var(--ra-section) 0; }
.ra-section--tight { padding: var(--ra-section-sm) 0; }
.ra-section > :last-child, .ra-section--tight > :last-child { margin-bottom: 0; }
/* An eyebrow: the small caps label above a heading. */
.ra-eyebrow { display: block; font-size: var(--fs-2xs); font-weight: var(--fw-semi); letter-spacing: var(--ls-wide);
  text-transform: uppercase; color: var(--ra-muted); margin-bottom: var(--sp2); }
/* Sticky chrome that sits on content: the fill is opaque enough for the ink on it. */
.ra-material { background: var(--ra-material); backdrop-filter: var(--ra-blur); -webkit-backdrop-filter: var(--ra-blur); }
/* A hairline that reads as a seam, not a border. */
.ra-hairline { border: 0; border-top: 1px solid var(--ra-line); margin: var(--sp5) 0; }
.ra-wrap { max-width: var(--ra-max); margin: 0 auto; padding: 0 var(--sp5); }
.ra-wide { max-width: var(--ra-wide); margin: 0 auto; padding: 0 var(--sp5); }

/* buttons */
.ra-btn, button.ra-btn {
  appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--sp2);
  font: var(--fw-medium) var(--fs-sm)/1 var(--ra-font); color: var(--ra-ink);
  background: var(--ra-panel-2); border: 1px solid var(--ra-line);
  border-radius: var(--r-md); padding: 9px 14px; min-height: 36px; cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast), color var(--t-fast);
  text-decoration: none; white-space: nowrap;
}
.ra-btn:hover { background: var(--ra-bg-soft); border-color: var(--ra-line-strong); text-decoration: none; }
.ra-btn:active { transform: scale(.985); }
.ra-btn:disabled, .ra-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }
.ra-btn--primary { background: var(--ra-accent); border-color: var(--ra-accent); color: var(--ra-accent-ink); font-weight: var(--fw-semi); }
.ra-btn--primary:hover { background: var(--ra-accent); filter: brightness(1.06); }
.ra-btn--quiet { background: transparent; border-color: transparent; color: var(--ra-accent); }
.ra-btn--quiet:hover { background: var(--ra-accent-soft); border-color: transparent; }
.ra-btn--danger { color: var(--ra-bad); border-color: var(--ra-line); }
.ra-btn--danger:hover { background: var(--ra-bad-soft); border-color: var(--ra-bad); }
.ra-btn--ok { color: var(--ra-ok); }
.ra-btn--sm { padding: 6px 10px; font-size: var(--fs-xs); min-height: 28px; }
/* A control the thumb has to hit grows to the touch floor; a mouse keeps the density. */
@media (pointer: coarse) { .ra-btn, button.ra-btn, .ra-btn--sm { min-height: var(--ra-tap); padding-block: 12px; } }

/* inputs */
.ra-input, .ra-select, .ra-textarea, input.ra-input, select.ra-select, textarea.ra-textarea {
  font: var(--fw-normal) var(--fs-base)/var(--lh-base) var(--ra-font);
  color: var(--ra-ink); background: var(--ra-input);
  border: 1px solid var(--ra-line); border-radius: var(--r-md);
  padding: 10px 12px; width: 100%; transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.ra-input::placeholder, .ra-textarea::placeholder { color: var(--ra-faint); }
.ra-input:hover, .ra-select:hover, .ra-textarea:hover { border-color: var(--ra-line-strong); }
/* The focus ring is an OUTLINE, not a box-shadow: the token pass rewrites every
   box-shadow onto the shadow ladder, and a 3px ring silently became a 22px blur. */
.ra-input:focus, .ra-select:focus, .ra-textarea:focus { border-color: var(--ra-accent); outline: 3px solid var(--ra-accent-soft); outline-offset: 0; }
.ra-textarea { min-height: 96px; resize: vertical; }
.ra-label { display: block; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--ra-muted); margin-bottom: var(--sp2); }
.ra-check { accent-color: var(--ra-accent); width: 16px; height: 16px; }

/* chips, badges, pills */
.ra-chip, .ra-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-xs); font-weight: var(--fw-medium); line-height: 1;
  padding: 5px 9px; border-radius: var(--r-pill);
  background: var(--ra-panel-2); border: 1px solid var(--ra-line); color: var(--ra-muted);
}
.ra-chip--ok { color: var(--ra-ok); background: var(--ra-ok-soft); border-color: transparent; }
.ra-chip--warn { color: var(--ra-warn); background: var(--ra-warn-soft); border-color: transparent; }
.ra-chip--bad { color: var(--ra-bad); background: var(--ra-bad-soft); border-color: transparent; }
.ra-chip--accent { color: var(--ra-accent); background: var(--ra-accent-soft); border-color: transparent; }
.ra-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ra-ok); display: inline-block; }
.ra-dot--warn { background: var(--ra-warn); } .ra-dot--bad { background: var(--ra-bad); } .ra-dot--idle { background: var(--ra-faint); }

/* tables — sticky header, tabular numerals, row hover */
.ra-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.ra-table th {
  position: sticky; top: 0; z-index: 2; text-align: left;
  font-size: var(--fs-xs); font-weight: var(--fw-semi); letter-spacing: var(--ls-wide);
  text-transform: uppercase; color: var(--ra-muted);
  background: var(--ra-panel); border-bottom: 1px solid var(--ra-line); padding: 10px 12px;
}
.ra-table td { padding: 11px 12px; border-bottom: 1px solid var(--ra-line); color: var(--ra-ink-2); vertical-align: middle; }
.ra-table tbody tr:hover td { background: var(--ra-panel-2); }
.ra-table tbody tr:last-child td { border-bottom: 0; }

/* key/value blocks */
.ra-kv { display: grid; grid-template-columns: minmax(120px, auto) 1fr; gap: var(--sp2) var(--sp4); font-size: var(--fs-sm); }
.ra-kv dt, .ra-kv-key { color: var(--ra-muted); }
.ra-kv dd, .ra-kv-val { margin: 0; color: var(--ra-ink); font-variant-numeric: tabular-nums; }

/* stat tiles */
.ra-stat { background: var(--ra-panel); border: 1px solid var(--ra-line); border-radius: var(--r-md); padding: var(--sp4); }
.ra-stat__v { font-size: var(--fs-lg); font-weight: var(--fw-semi); font-variant-numeric: tabular-nums; letter-spacing: var(--ls-tight); }
.ra-stat__k { font-size: var(--fs-xs); color: var(--ra-muted); text-transform: uppercase; letter-spacing: var(--ls-wide); }

/* tabs */
.ra-tabs { display: flex; gap: var(--sp1); flex-wrap: wrap; align-items: center; border-bottom: 1px solid var(--ra-line); }
.ra-tab {
  appearance: none; background: none; border: 0; border-bottom: 2px solid transparent;
  color: var(--ra-muted); font: var(--fw-medium) var(--fs-sm)/1 var(--ra-font);
  padding: 10px 12px; cursor: pointer; border-radius: var(--r-sm) var(--r-sm) 0 0; transition: color var(--t-fast), background var(--t-fast);
}
.ra-tab:hover { color: var(--ra-ink); background: var(--ra-panel-2); }
.ra-tab[aria-selected="true"], .ra-tab.is-active, .ra-tab.act { color: var(--ra-accent); border-bottom-color: var(--ra-accent); }

/* overlays */
.ra-modal { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.42); backdrop-filter: blur(6px); z-index: 2000; }
.ra-modal__box { background: var(--ra-panel); border: 1px solid var(--ra-line); border-radius: var(--r-lg); box-shadow: var(--ra-sh2); padding: var(--sp5); max-width: 520px; width: calc(100% - 32px); }
.ra-toast { background: var(--ra-panel); border: 1px solid var(--ra-line); border-left: 3px solid var(--ra-accent); border-radius: var(--r-md); box-shadow: var(--ra-sh2); padding: var(--sp3) var(--sp4); font-size: var(--fs-sm); }

/* app shell */
.ra-topbar { position: sticky; top: 0; z-index: 1000; background: color-mix(in srgb, var(--ra-panel) 82%, transparent); backdrop-filter: blur(20px) saturate(180%); border-bottom: 1px solid var(--ra-line); }
.ra-footer { border-top: 1px solid var(--ra-line); color: var(--ra-muted); font-size: var(--fs-sm); padding: var(--sp6) 0; }
.ra-divider { height: 1px; background: var(--ra-line); border: 0; }
.ra-scroll-x { overflow-x: auto; }

/* prose (docs, blog, static pages) */
.ra-prose { max-width: 72ch; }
.ra-prose h2 { margin-top: var(--sp6); }
.ra-prose h3 { margin-top: var(--sp5); }
.ra-prose p, .ra-prose li { color: var(--ra-ink-2); line-height: var(--lh-loose); }
.ra-prose code { font-size: .88em; }
.ra-prose pre { background: var(--ra-panel-2); border: 1px solid var(--ra-line); border-radius: var(--r-md); padding: var(--sp4); overflow-x: auto; }
.ra-prose blockquote { margin: var(--sp4) 0; padding: var(--sp2) var(--sp4); border-left: 3px solid var(--ra-accent); color: var(--ra-muted); }

/* ── 5. NIGHT-MODE BRIDGE ────────────────────────────────────────────────
   Sngine's own stylesheet scopes dark styling to body.night-mode. Map it onto
   the system so stock pages follow the same theme instead of fighting it. */
body.night-mode { background: var(--ra-glow), var(--ra-bg); color: var(--ra-ink); }

/* ── 6. LEGACY SHELL SKIN (the /blogs, /static, auth and admin chrome) ─────
   This is the previous design layer, kept rule-for-rule: it re-points the shell's
   own legacy token names (--ink/--muted/--line/--card/--blue/--cyan …) and then
   fixes the handful of hardcoded colours the tokens could not reach. Here it is
   expressed in system tokens only, which is what gives every shell page a complete
   dark theme — the old file hardcoded light values and patched dark back in with a
   media query, so half of it was wrong half the time. */
/* remoteagent.online — index design layer (2026-09-12)
   Brings the landing-page design language (Apple-grade: SF type, near-monochrome,
   hairline borders, pill buttons, generous radii) to every Sngine-rendered page:
   blogs, all /static pages, packages, sign-in, admin, and — because the console
   CSS loads later — without disturbing the console app itself.

   How it works: the legacy "shell" design (blogs + /static) defines its palette
   and type in an inline :root on every page. Declaring the same custom properties
   on body with !important wins for body and every descendant, so one file
   re-skins every shell page without touching 100+ stored pages.
   Everything else is a short, targeted list of the hardcoded colours the tokens
   cannot reach. */

/* 1 · re-point the legacy shell tokens (blogs + /static + any shell page) */
html body{
  --ink:var(--rd-ink)!important; --ink2:var(--rd-ink)!important;
  --muted:var(--rd-muted)!important; --mut2:var(--rd-muted)!important;
  --line:var(--rd-hair)!important; --soft:var(--rd-off)!important;
  --card:var(--rd-paper)!important; --white:var(--rd-paper)!important;
  --blue:var(--rd-accent)!important; --blue2:color-mix(in srgb, var(--ra-accent-text) 10%, transparent)!important;
  --cyan:var(--rd-cyan)!important; --cyan2:color-mix(in srgb, var(--ra-accent-text) 10%, transparent)!important;
  --violet:var(--rd-cyan)!important;
  --green:var(--ra-ok)!important; --red:var(--ra-bad)!important; --amber:var(--rd-gold)!important;
  --max:var(--rd-max)!important; --r:18px!important;
  --font:var(--rd-font)!important; --mono:var(--rd-mono)!important;
  --shadow:var(--ra-sh1);
  font-family:var(--rd-font)!important;
  background:var(--rd-paper)!important;
  color:var(--rd-ink)!important;
  -webkit-font-smoothing:antialiased;
}
html body h1,html body h2,html body h3,html body h4{letter-spacing:-.035em;font-weight:700}
html body h1{line-height:1.06}html body h2{line-height:1.08}

/* 2 · chrome the tokens cannot reach (hardcoded colours in the shell) */
html body .announce{background:var(--rd-off)!important;color:var(--rd-muted)!important;border-bottom:1px solid var(--rd-hair)!important}
html body .announce b{color:var(--rd-ink)!important}
html body .mark{background:var(--rd-ink)!important;color:var(--rd-paper)!important}
html body .brand,html body .logo,html body .footbrand strong{letter-spacing:-.03em!important}
html body .navlinks a,html body .links a,html body .link-btn{color:var(--rd-muted)!important}
html body .links{flex-wrap:wrap!important;min-width:0!important;row-gap:6px!important}
html body nav.shell,html body .shell nav{flex-wrap:wrap!important}
@media(max-width:980px){
  html body .links:not(.open){display:none!important}
  html body .hamb{display:grid!important;place-items:center}
}
@media(max-width:900px){html body .links{gap:14px!important}html body .links a,html body .link-btn{font-size:var(--fs-sm)!important}}
html body .navlinks a:hover,html body .links a:hover,html body .link-btn:hover{color:var(--rd-ink)!important}
html body .navcta{background:var(--rd-ink)!important;color:var(--rd-paper)!important;border-color:var(--rd-ink)!important;border-radius:var(--r-pill)!important}
html body .hero{background:transparent!important;border-bottom:1px solid var(--rd-hair)!important}
html body .crumbs,html body .crumbs a{color:var(--rd-muted)!important}
html body .lede,html body .hero .lede,html body .hero-copy,html body .hero .meta{color:var(--rd-muted)!important}
html body .kicker,html body .eyebrow{color:var(--ra-accent-text)!important;letter-spacing:.08em!important;text-transform:uppercase!important;font-weight:600!important}
html body .btn{border-radius:var(--r-pill)!important}
html body .btn.primary{background:var(--rd-accent)!important;border-color:var(--rd-accent)!important;color:var(--ra-ink)!important}
html body .btn.secondary{background:transparent!important;border-color:var(--rd-hair)!important;color:var(--rd-ink)!important}
html body .card,html body .blog-card,html body .sidebox,html body .callout{border-radius:var(--r-lg)!important;border-color:var(--rd-hair)!important;background:var(--rd-paper)!important}
html body .blog-card{box-shadow:var(--ra-sh1)}
html body .blog-card:hover{box-shadow:var(--ra-sh1)}
html body .blog-cat,html body .blog-meta{color:var(--rd-muted)!important}
html body .prose a{color:var(--rd-accent)!important}
html body .prose code,html body .prose .cmd{background:var(--rd-off)!important;border:1px solid var(--rd-hair)!important;color:var(--rd-ink)!important;font-family:var(--rd-mono)!important;border-radius:var(--r-sm)!important}
html body .prose pre{background:var(--ra-bg)!important;border-color:var(--ra-line-strong)!important;border-radius:var(--r-md)!important}
html body .prose pre code{background:transparent!important;border:0!important;color:var(--ra-ink-2)!important}
html body .callout.tip,html body .callout.note{border-left:3px solid var(--rd-cyan)!important;background:var(--rd-off)!important}
html body .foot-in,html body .agent-static-footer{background:var(--rd-off)!important;color:var(--rd-muted)!important;border-top:1px solid var(--rd-hair)!important}
html body .site-head,html body footer{background:var(--rd-paper)!important;border-color:var(--rd-hair)!important}
html body .footgrid a,html body footer a,html body .footbottom{color:var(--rd-muted)!important}
html body .footgrid a:hover,html body footer a:hover{color:var(--rd-ink)!important}
html body .footbottom{border-top:1px solid var(--rd-hair)!important;background:transparent!important}

/* 3 · stock Sngine chrome (sign-in, packages, admin) — light touch */
body{font-family:var(--rd-font)}
.btn-primary,.btn-primary:focus,.btn-primary:hover{background:var(--rd-accent)!important;border-color:var(--rd-accent)!important;border-radius:var(--r-pill)!important}
.card,.modal-content{border-radius:var(--r-lg)}
.main-header{backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px)}

/* 4 · dark mode */