/* Stray Ahead base tokens (brand-tokens v2.0 and the component sheet). Client themes override
   only --client-header, --client-accent and --client-series. Semantic colors never change. */
:root {
  --black-navy: #03142a;
  --navy: #11243c;
  --muted-navy: #26496a;
  --steel-gray: #7d90a3;
  --slate: #c2cbd4;
  --light-gray: #e9ebed;
  --white: #ffffff;
  --blue: #349bb0;
  --seafoam: #45c59b;
  --amber: #f2b21a;

  --good-text: #2f6b2d;
  --good-bg: #e3f1e2;
  --bad-text: #a33a1f;
  --bad-bg: #f8e4de;
  --warn-text: #6b4e0f;
  --warn-bg: #fbecc4;

  --bg: #f4f5f7;
  --surface: var(--white);
  --field-bg: var(--white);
  --surface-2: var(--light-gray);
  --text: var(--black-navy);
  --text-muted: #4a5d70;
  --border: var(--slate);
  --border-strong: var(--steel-gray);
  --link: #26707f;
  --link-hover: #1f6650;
  --focus: #26707f;
  --cta-bg: var(--seafoam);
  --cta-text: var(--black-navy);

  --client-header: var(--black-navy);
  --client-accent: var(--seafoam);
  --client-series: var(--muted-navy);

  --font-body: "Inter", Arial, sans-serif;
  --font-head: "Montserrat", Arial, sans-serif;
  --radius: 10px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--black-navy);
    --surface: var(--navy);
    --field-bg: var(--black-navy);
    --surface-2: #0b1c31;
    --text: var(--white);
    --text-muted: var(--slate);
    --border: #2b4561;
    --border-strong: var(--steel-gray);
    --link: var(--seafoam);
    --link-hover: #7fdcbc;
    --focus: var(--seafoam);
    --good-text: #9bd998;
    --good-bg: #173a1f;
    --bad-text: #f0a58f;
    --bad-bg: #4a1f14;
    --warn-text: #f6cf6a;
    --warn-bg: #3d2f0b;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: var(--black-navy);
  --surface: var(--navy);
  --field-bg: var(--black-navy);
  --surface-2: #0b1c31;
  --text: var(--white);
  --text-muted: var(--slate);
  --border: #2b4561;
  --border-strong: var(--steel-gray);
  --link: var(--seafoam);
  --link-hover: #7fdcbc;
  --focus: var(--seafoam);
  --good-text: #9bd998;
  --good-bg: #173a1f;
  --bad-text: #f0a58f;
  --bad-bg: #4a1f14;
  --warn-text: #f6cf6a;
  --warn-bg: #3d2f0b;
  color-scheme: dark;
}

.topbar {
  background: var(--client-header); color: var(--white);
  display: flex; align-items: center; gap: 24px; padding: 12px 24px;
}
.topbar a { color: var(--white); text-decoration: none; }
.topbar a:hover { color: var(--seafoam); }
.brand { font-family: var(--font-head); font-weight: 700; font-size: 18px; letter-spacing: .01em; }
.brand span { color: var(--seafoam); }
.topbar .brand { display: flex; align-items: center; gap: 12px; }
.topbar .brand img { display: block; height: 48px; width: auto; }
.topbar .brand-label {
  color: var(--white); font-size: 16px; font-weight: 600; padding-left: 12px;
  border-left: 1px solid rgba(255, 255, 255, .3);
}
.icon-btn {
  display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0;
  background: transparent; color: var(--white); border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 50%; cursor: pointer;
}
.icon-btn:hover { color: var(--seafoam); border-color: var(--seafoam); }
.account-menu { position: relative; }
.account-menu summary { list-style: none; }
.account-menu summary::-webkit-details-marker { display: none; }
.avatar {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; cursor: pointer;
  background: var(--seafoam); color: var(--black-navy); font: 700 16px var(--font-head);
}
.avatar:hover, .account-menu[open] .avatar { box-shadow: 0 0 0 3px rgba(69, 197, 155, .35); }
.menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; min-width: 240px;
  background: var(--surface); color: var(--text); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: 0 8px 24px rgba(3, 20, 42, .18); padding: 6px;
}
.menu-who { display: grid; gap: 2px; padding: 10px 12px; border-bottom: 1px solid var(--border);
  margin-bottom: 6px; font-size: 14px; overflow-wrap: anywhere; }
.menu-who strong { font-size: 16px; }
.menu-item {
  display: block; width: 100%; text-align: left; padding: 10px 12px; border: 0; border-radius: 6px;
  background: transparent; color: var(--text); font: 500 16px var(--font-body); cursor: pointer;
}
.menu-item:hover, .menu-item:focus-visible { background: var(--surface-2); }
.icon-sun { display: none; }
:root[data-theme="dark"] .icon-sun { display: block; }
:root[data-theme="dark"] .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icon-sun { display: block; }
  :root:not([data-theme="light"]) .icon-moon { display: none; }
}
.topbar nav { display: flex; gap: 18px; flex: 1; }
.topbar .who { display: flex; gap: 14px; align-items: center; font-size: 14px; }
.env-badge { background: var(--amber); color: var(--black-navy); border-radius: 999px; padding: 2px 10px;
  font-size: 14px; font-weight: 600; }

.banner { padding: 10px 24px; font-weight: 500; display: flex; gap: 16px; align-items: center; }
.banner.impersonating { background: var(--warn-bg); color: var(--warn-text); }

.btn {
  display: inline-flex; align-items: center; gap: 8px; border-radius: 8px; padding: 10px 18px;
  font: 600 16px var(--font-body); cursor: pointer; border: 1px solid transparent; text-decoration: none;
}
.btn-primary { background: var(--cta-bg); color: var(--cta-text); }
.btn-primary:hover { filter: brightness(.95); color: var(--cta-text); }
.btn-secondary { background: transparent; color: var(--text); border-color: var(--border-strong); }
.btn-secondary:hover { background: var(--surface-2); color: var(--text); }
.btn-link { background: none; border: 0; color: var(--link); padding: 0; text-decoration: underline; font: inherit; cursor: pointer; }

/* The chrome is shared with the Django admin, so it sets its own font and box model. */
.topbar, .banner { font-family: var(--font-body); font-size: 16px; line-height: 1.55; }
.topbar *, .banner * { box-sizing: border-box; }

@media (max-width: 820px) {
  .topbar { flex-wrap: wrap; padding: 12px 16px; }
}

.topbar nav a { padding: 6px 2px; border-bottom: 2px solid transparent; }
.topbar nav a[aria-current="page"] { border-bottom-color: var(--seafoam); }
.topbar a:link, .topbar a:visited { color: var(--white); text-decoration: none; }
.topbar a:hover, .topbar a:focus-visible { color: var(--seafoam); text-decoration: none; }