/* portal-ui-v1: the UMET Platform look, shared by every portal page.
   Tokens (light and dark), the legacy variable names older page scripts still use inline, base elements,
   and the top bar. Page components live in components.css (Map has its own atlas.css). */

:root {
  --bg: #f7f6f3; --panel: #ffffff; --ink: #1d1d1b; --ink-2: #3d3c39; --quiet: #6b6a66; --faint: #b9b7b0;
  --line: #e4e2dc; --line-soft: #efede8; --hover: #efeee9;
  --ok: #2f7d4f; --warn: #b7791f; --bad: #b4372f; --info: #3d5a80; --muted: #8a8882;
  --ok-bg: #e8f3ec; --warn-bg: #fbf1df; --bad-bg: #f9e7e5; --info-bg: #e7edf5; --muted-bg: #efeee9;
  --ok-line: #b9dcc6; --warn-line: #ecd3a4; --bad-line: #efc2bd;
  --sec: #9f1239; --sec-bg: #fbe4e8; --sec-line: #f3c2cb; --draft: #6d28d9; --draft-bg: #ede9fe;
  --e-proxy: #8a8882; --e-bus: #7c3aed; --e-db: #2f5ea8; --e-http: #0e7490; --e-outbound: #b7791f; --e-schedule: #3d3c39;
  --shadow: 0 10px 30px rgba(0, 0, 0, .10);
  --backdrop: rgba(20, 20, 18, .45);
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --r: 8px;
  --topbar-h: 56px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #161615; --panel: #1f1f1d; --ink: #ecebe6; --ink-2: #cfcdc6; --quiet: #a3a19a; --faint: #5f5d58;
    --line: #34332f; --line-soft: #2b2a27; --hover: #2a2a27;
    --ok: #6cc08b; --warn: #e2b05a; --bad: #e57b72; --info: #8fb0d8; --muted: #8f8d86;
    --ok-bg: #1f3327; --warn-bg: #3a2f1a; --bad-bg: #3d2220; --info-bg: #1e2a3a; --muted-bg: #2a2a27;
    --ok-line: #2f5a3e; --warn-line: #5c4a24; --bad-line: #5e302c;
    --sec: #f08ca0; --sec-bg: #3d1f26; --sec-line: #5e2c37; --draft: #b9a2f5; --draft-bg: #2b2440;
    --e-proxy: #8f8d86; --e-bus: #a98bf0; --e-db: #7fa6e0; --e-http: #5fb8c9; --e-outbound: #e2b05a; --e-schedule: #cfcdc6;
    --shadow: 0 10px 30px rgba(0, 0, 0, .45);
    --backdrop: rgba(0, 0, 0, .6);
  }
}

/* Names the older pages' scripts use inline (style="background:var(--ok-lt)" and the like). */
:root {
  --surface: var(--bg); --white: var(--panel); --border: var(--line); --border-lt: var(--line-soft);
  --ink-3: var(--quiet); --ink-4: var(--faint);
  --ok-lt: var(--ok-bg); --warn-lt: var(--warn-bg); --crit: var(--bad); --crit-lt: var(--bad-bg);
  --err: var(--muted); --err-lt: var(--muted-bg); --info-lt: var(--info-bg);
  --sec-lt: var(--sec-bg); --draft-lt: var(--draft-bg);
  --panel-bg: var(--panel); --text: var(--ink);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 14px/1.45 var(--sans); }
a { color: var(--info); }
code, pre, .mono { font-family: var(--mono); }
h1, h2, h3, p { margin: 0; }
:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; }

/* Top bar: one header on every page (templates/_topbar.html) */
.topbar { height: var(--topbar-h); display: flex; align-items: center; gap: 20px; padding: 0 24px;
          background: var(--panel); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 30; }
.topbar .brand { font-size: 16px; font-weight: 600; color: var(--ink); text-decoration: none; white-space: nowrap; }
.topbar nav { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.topbar nav::-webkit-scrollbar { display: none; }
.topbar nav a { color: var(--quiet); text-decoration: none; padding: 6px 10px; border-radius: 6px; white-space: nowrap; }
.topbar nav a:hover { color: var(--ink); background: var(--hover); }
.topbar nav a.on { color: var(--ink); font-weight: 600; }
.topbar .top-right { margin-left: auto; display: flex; align-items: center; gap: 14px; color: var(--quiet);
                     font-size: 12px; white-space: nowrap; }
.topbar .top-right a { color: var(--quiet); text-decoration: none; border: 1px solid var(--line); border-radius: 6px;
                       padding: 4px 10px; }
.topbar .top-right a:hover { color: var(--ink); border-color: var(--faint); }
@media (max-width: 1100px) { .topbar .top-right #asof { display: none; } }
@media (max-width: 760px) {
  .topbar { padding: 0 16px; gap: 12px; }
  .topbar .top-right #me { display: none; }
  .topbar nav { -webkit-mask-image: linear-gradient(to right, #000 85%, transparent); mask-image: linear-gradient(to right, #000 85%, transparent); }
}