/* What every page shares, the admin included: the fonts (served from static/fonts, OFL: see the
   licences there), the colours, and the top bar. app.css styles the site's own pages on top of
   this; admin.css themes Django's admin with the same values. */

@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("../fonts/manrope-latin.938c6e8019b6.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("../fonts/manrope-cyrillic.e58febde317b.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Unbounded"; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url("../fonts/unbounded-latin.8616dc355070.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Unbounded"; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url("../fonts/unbounded-cyrillic.3a5ed4d11365.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap;
  src: url("../fonts/jetbrains-mono-latin.b636a65da4f0.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap;
  src: url("../fonts/jetbrains-mono-cyrillic.3576e677eb07.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

:root {
  color-scheme: dark;
  --bg: #101214;
  --panel: #181B1F;
  --raised: #22262C;
  --raised-2: #2B3037;
  --line: #2E333A;
  --line-strong: #3A4048;
  --fg: #F2F4F6;
  --muted: #A3ABB5;
  --faint: #5E6670;
  /* The accent and what goes with it: the built-in ones. Administrators can set another accent,
     and the page then gives all four (templates/_brand_head.html, siteconfig/branding.py). */
  --accent: #C8F250;
  --accent-hover: #E2FF8A;
  --on-accent: #101214;
  --accent-tint: #1B2010;
  --warn: #FF9C7D;
  --warn-fg: #FFD9CC;
  --info: #7CC4FF;
  --info-fg: #CFE8FF;
  /* Names the scripts and older rules use. */
  --bad: var(--warn);
  --ok: var(--accent);
  --up: var(--accent);
  --down: var(--info);
  --font: "Manrope", system-ui, sans-serif;
  --display: "Unbounded", "Manrope", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Top bar */
.topbar { border-bottom: 1px solid var(--line); }
.topbar-inner { max-width: 1280px; margin: 0 auto; padding: 14px 32px; display: flex; flex-wrap: wrap;
                justify-content: space-between; align-items: center; gap: 8px 20px; }
.topbar .brand img { display: block; width: auto; height: 28px; max-width: 220px; }
.topbar .brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: 0.04em;
                 text-transform: uppercase; color: var(--fg); text-decoration: none; }
.topbar nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.topbar nav > a, .topbar nav button.link { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px;
                                           border-radius: 999px; color: var(--muted); text-decoration: none; }
.topbar nav > a:hover, .topbar nav button.link:hover { color: var(--fg); }
.topbar nav > a.on { background: var(--raised); color: var(--fg); }
.topbar .who { padding: 0 12px; color: var(--muted); }
.topbar form { display: inline; margin: 0; }
.topbar select { min-height: 36px; padding: 0 8px; border-radius: 999px; }
@media (max-width: 640px) {
  .topbar-inner { padding: 12px 16px; }
}
/* The bar looks the same wherever it is, whatever the page's own styles say. */
.topbar, .topbar * { box-sizing: border-box; }
.topbar { font: 15px/1.5 var(--font); color: var(--fg); background: var(--bg); }
.topbar nav button.link { background: none; border: 0; font: inherit; cursor: pointer; }
.topbar select { height: auto; margin: 0; font: inherit; color: var(--fg); background: var(--bg); border: 1px solid var(--line-strong); }