/* Look shared by every dev page: the Dev hub, both trackers and Warframe.
   Load it right after css/style.css. It only restyles things that already use
   the shared theme variables. Load it AFTER css/cb8-auth.css (the sign-in
   button and dialog), because the small-phone rule below nudges that button.

   The theme variables themselves (--bg, --card, --accent ...) come from
   js/theme.js, which turns four chosen colors into every variable below. */

:root {
  --text: #e9f3ec;
  --text-dim: #a3bbac;
  --text-faint: #6f8878;
}

body {
  background:
    radial-gradient(ellipse 900px 500px at 12% -10%, var(--wash-a, rgba(180, 76, 255, 0.14)), transparent 60%),
    radial-gradient(ellipse 900px 500px at 88% 0%, var(--wash-b, rgba(57, 255, 20, 0.12)), transparent 55%),
    var(--bg);
  background-attachment: fixed;
}

header { background: var(--bg-alt); border-bottom-color: var(--border); }
.nav-tabs li a.active { color: var(--on-grad, #fff); }
.btn-primary { color: var(--on-grad, #fff); }

/* Small phones: a slimmer header on every dev page, so the menu and the
   sign-in button take less room. */
@media (max-width: 420px) {
  body > header { padding: 0.8rem 1rem; gap: 0.6rem; }
  body > header .brand { font-size: 1.25rem; }
  .cb8-pin .cb8-auth-btn { top: 0.7rem; right: 1rem; }
  body > header .nav-tabs { gap: 0.15rem; }
  body > header .nav-tabs li a { padding: 0.45rem 0.65rem; font-size: 0.88rem; }
}