/* Egnyte Backup Console - shared tokens and chrome. Light palette on :root,
   dark redefined only under the OS preference (guarded) and the explicit
   data-theme stamp, so every colour is defined in the un-stamped state. */
:root {
  color-scheme: light;
  --ground: #f3f5f7;
  --surface: #ffffff;
  --surface-2: #eaeef2;
  --ink: #14202b;
  --ink-2: #4c5a68;
  --muted: #7d8a97;
  --line: #d9dfe5;
  --line-strong: #b9c3cd;
  --chrome: #1c3550;
  --chrome-ink: #ffffff;
  --focus: #2a78d6;

  --s-downloaded: #2a78d6;
  --s-linked: #1baf7a;
  --s-carried: #eb6834;
  --s-downloaded-soft: #cde2fb;

  --good: #0ca30c;
  --warning: #fab219;
  --critical: #d03b3b;
  --good-bg: #e6f6e6;
  --warning-bg: #fff3d6;
  --critical-bg: #fbe4e4;
  --status-ink-on-warning: #5a3d00;

  --font-display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --font-body: "Barlow", "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ground: #0f1519;
    --surface: #171e24;
    --surface-2: #1f2830;
    --ink: #e8edf1;
    --ink-2: #a9b4be;
    --muted: #74818d;
    --line: #2a343d;
    --line-strong: #3b4854;
    --chrome: #0b1219;
    --chrome-ink: #e8edf1;
    --focus: #3987e5;
    --s-downloaded: #3987e5;
    --s-linked: #199e70;
    --s-carried: #d95926;
    --s-downloaded-soft: #184f95;
    --good-bg: #123a12;
    --warning-bg: #3d2f08;
    --critical-bg: #421414;
    --status-ink-on-warning: #ffe4a3;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #0f1519;
  --surface: #171e24;
  --surface-2: #1f2830;
  --ink: #e8edf1;
  --ink-2: #a9b4be;
  --muted: #74818d;
  --line: #2a343d;
  --line-strong: #3b4854;
  --chrome: #0b1219;
  --chrome-ink: #e8edf1;
  --focus: #3987e5;
  --s-downloaded: #3987e5;
  --s-linked: #199e70;
  --s-carried: #d95926;
  --s-downloaded-soft: #184f95;
  --good-bg: #123a12;
  --warning-bg: #3d2f08;
  --critical-bg: #421414;
  --status-ink-on-warning: #ffe4a3;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------- masthead ---------- */
.mast { background: var(--chrome); color: var(--chrome-ink); }
.mast-inner {
  max-width: 1280px; margin: 0 auto; padding: 18px 28px 16px;
  display: flex; align-items: baseline; gap: 22px; flex-wrap: wrap;
}
.brand {
  font-family: var(--font-display); font-weight: 700; font-size: 26px;
  letter-spacing: .01em; text-transform: uppercase; margin: 0;
}
.brand small {
  display: block; font-family: var(--font-body); font-weight: 400; font-size: 12px;
  letter-spacing: .08em; text-transform: uppercase; opacity: .7; margin-top: 2px;
}
.mast-meta {
  margin-left: auto; display: flex; gap: 22px; align-items: baseline; flex-wrap: wrap;
  font-size: 13px; opacity: .85;
}
.mast-meta .mono { font-family: var(--font-mono); font-size: 12.5px; }
.mast-meta a { text-decoration: none; border-bottom: 1px solid currentColor; opacity: .9; }
.mast-meta select {
  font: inherit; font-family: var(--font-mono); font-size: 12.5px; background: transparent; color: inherit;
  border: 1px solid currentColor; border-radius: 3px; padding: 2px 6px;
}
.mast-meta select option { color: #14202b; }