/*
 * Outpost Universe: after outpost2.net and its forum - a black starfield, maroon to
 * black header, dark grey panels with a thin maroon band across the top, soft grey
 * text, italic white headings and gold highlights. Always dark.
 *
 * Self-contained on purpose: the stars are CSS, not outpost2.net's images, and the
 * font falls back to the system stack, so the page never loads from another site.
 */
:root {
  --bg: #000000;
  --surface: #232323;
  --surface-2: #2c2c2c;
  --text: #cccccc;
  --muted: #8f8f8f;
  --border: #4f4f4f;
  --accent: #b88d1f;
  --accent-text: #e8c547;
  --on-accent: #0c0c0c;
  --ok: #75da41;
  --warn: #f2e38f;
  --bad: #ff6b6b;
  --radius: 10px;
  --shadow: 0 2px 6px rgb(0 0 0 / .6);

  /* outpost2.net's content panels: maroon fading to black over 20px, then grey */
  --card-bg: linear-gradient(to bottom, #642121 0, #0c0c0c 20px, #282828 21px);

  --header-bg: linear-gradient(to bottom, #642121 0%, #0c0c0c 100%);
  --header-text: #fdfdfd;
  --header-border: 2px solid #4a4a4a;
  --nav-text: #dddddd;
  --nav-hover-bg: rgb(255 255 255 / .06);
  --nav-active-text: #fdfdfd;
  --nav-active-bg: rgb(232 197 71 / .14);
  --brand-mark: radial-gradient(circle at 35% 35%, #f2b07a, #a2401c 55%, #3a0f08);

  --font: "Open Sans", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --heading-font: var(--font);
  --heading-color: #f0f0f0;
  --heading-style: italic;

  --page-bg: #000000;
  color-scheme: dark;
}

/* Starfield: three tiles of scattered points at different sizes, so the pattern
   never visibly repeats. */
body {
  background-color: #000;
  background-image:
    radial-gradient(1px 1px at 12% 18%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 68% 7%, #ddd 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 35% 62%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 82% 44%, #bbb 50%, transparent 51%),
    radial-gradient(1px 1px at 51% 83%, #eee 50%, transparent 51%),
    radial-gradient(1px 1px at 20% 30%, #888 50%, transparent 51%),
    radial-gradient(1px 1px at 70% 80%, #999 50%, transparent 51%),
    radial-gradient(1px 1px at 45% 10%, #777 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 90% 60%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 30% 75%, #aaa 50%, transparent 51%);
  background-size: 263px 263px, 263px 263px, 263px 263px, 263px 263px, 263px 263px,
                   97px 97px, 97px 97px, 97px 97px, 401px 401px, 401px 401px;
  background-attachment: fixed;
}

/* The panels' maroon band needs a little headroom so titles sit below it */
.panel, .stat, .repo, .person { padding-top: 26px; }
.table-wrap { background: #282828; }

.stat b { color: #f2e38f; }
.top nav a[aria-current="page"] { box-shadow: inset 0 0 0 1px #e8c547; }
.top nav a:hover { text-shadow: 1px 1px 1px #f2e38f; }
a:hover { color: #ddddff; }

.topic, .chips li { border: 1px solid #3a3a3a; }
input, select { background: #1c1c1c; }
.foot { color: #7890a1; }
.foot a { color: #9fb3c3; }