/* Meridian design tokens + the one navigation bar every page shares.
   Tokens are namespaced --atlas-* on purpose: the older pages already declare
   :root{--paper/--ink/--green}, and reusing those names here would silently
   restyle them depending on stylesheet order. Pages opt in by referencing
   var(--atlas-*). The palette is canvas.html's, which the audit picked as the
   single surviving visual system. */
:root{
  --atlas-paper:#f7f9fb;      /* page background */
  --atlas-card:#ffffff;
  --atlas-ink:#0f172a;        /* headings */
  --atlas-body:#16202e;
  --atlas-muted:#52617a;
  --atlas-line:#dde4ec;
  /* Indigo is the interactive hue: links, active nav, primary buttons, data.
     Teal is the single secondary. Nothing in the defaults is amber or orange —
     caveats use the neutral note scheme below, and red is left meaning error. */
  --atlas-accent:#3b4d9b;
  --atlas-accent-deep:#2c3b78;
  --atlas-accent-wash:#eef1fa;
  --atlas-accent-2:#0e7490;
  --atlas-accent-2-wash:#ecfeff;
  --atlas-note-bg:#e8ecf1;
  --atlas-note-ink:#3d4a5c;
  --atlas-note-line:#b9c4d0;
  /* Serif states what a page is about; sans runs every control around it. */
  --atlas-font:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --atlas-serif:Georgia,"Iowan Old Style","Times New Roman",Times,serif;
}

/* Deliberately background-free so the bar inherits whatever header it is
   dropped into; only the links carry the shared look. Specificity (0,1,1)
   beats the legacy `nav a` / `header a` rules on every page it replaces, so
   adoption needs no edit to the page's own stylesheet. */
.atlas-nav{display:flex;flex-wrap:wrap;align-items:center;gap:2px;min-width:0}
.atlas-nav a{
  color:var(--atlas-muted);text-decoration:none;white-space:nowrap;
  font:600 12px/1 var(--atlas-font);letter-spacing:.01em;
  padding:8px 10px;border-radius:7px;
  transition:color .15s ease,background .15s ease;
}
.atlas-nav a:hover{color:var(--atlas-ink);background:#e8eef4}
.atlas-nav a[aria-current="page"]{color:var(--atlas-accent);background:var(--atlas-accent-wash)}
/* Operator tier: same bar, cooler tint, so a glance tells you that what you
   are looking at is the console and not the published product. */
.atlas-nav--ops a{color:#4d5b6e}
.atlas-nav--ops a:hover{color:#0f172a;background:#e2e9f0}
.atlas-nav--ops a[aria-current="page"]{color:var(--atlas-accent-deep);background:#e2e7f6}
.atlas-nav .atlas-nav-sep{width:1px;height:16px;margin:0 6px;background:var(--atlas-line);flex:none}
/* The way out of the console. Quieter than the tier's own links so it reads as
   an exit rather than a sixth destination. */
.atlas-nav .atlas-nav-escape{color:var(--atlas-muted);font-weight:500}
.atlas-nav .atlas-nav-escape:hover{color:var(--atlas-ink)}
@media(max-width:560px){.atlas-nav a{padding:7px 8px;font-size:11px}}

/* The header wordmark. Pages set their own .brand type rules, so the mark
   only claims a height and the flex row that keeps the page name beside it. */
.brand{display:flex;align-items:center;gap:9px;min-width:0}
.brandmark{height:26px;width:auto;display:block;flex:none}
.brandsep{color:#b6c0cd;font-weight:400}
.brandpage{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:700px){.brandpage,.brandsep{display:none}}