/* The shared look for every page on the server. Each page keeps its own layout rules and reads its colours
   and fonts from the names below - change one here and it changes everywhere. Loaded after the page's own
   styles, so these win. (The chart pictures keep their own paper-card style.) */
@import url("https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600&family=Barlow+Condensed:wght@500;600;700&family=JetBrains+Mono:wght@400;600&display=swap");

:root {
  --bg: #0d1117;            /* page ground */
  --card: #161b22;          /* panels */
  --btn: #21262d;           /* buttons, menus */
  --hover: #262c36;
  --line: #30363d;          /* borders */
  --track: #30363d;         /* progress bar track */
  --ink: #e6edf3;           /* main text */
  --text2: #c9d1d9;         /* body copy */
  --muted: #9aa4af;         /* secondary text */
  --on: #1f6feb;            /* primary buttons, selected */
  --link: #58a6ff;          /* links, key figures */
  --new: #1f6feb;           /* "new" badges */
  --newbg: #121d2f;         /* "new" panels */
  --newline: #1f3a66;
  --ok: #56d364;
  --warn: #e3b341;
  --head: "Barlow Condensed", "Arial Narrow", sans-serif;
  --body: Barlow, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  color-scheme: dark;
}

body { background: var(--bg); color: var(--ink); font-family: var(--body); }
a { color: var(--link); } a:hover { color: #79c0ff; }

/* panels */
.card, aside, main > .bar, .status, header, .post, .cm-list, .box { background: var(--card); border: 1px solid var(--line); border-radius: 10px; }

/* headings and labels: condensed capitals */
h1, h2, summary, .name, .serif, .head h2 { font-family: var(--head); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
h1 small, summary span, h2 .badge, h2 a, h2 button { text-transform: none; letter-spacing: 0; font-family: var(--body); }
.serif { font-weight: 700; letter-spacing: 0.03em; }
th { font-family: var(--head); text-transform: uppercase; letter-spacing: 0.07em; font-size: 13.5px; font-weight: 600; color: var(--muted); }
nav a { font-family: var(--head); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; font-size: 17px; color: var(--text2); }

/* controls */
button, select, a.btn, .btn, a.mini { background: var(--btn); color: var(--ink); border-color: var(--line); font-family: var(--body); }
button:hover:not(:disabled), a.btn:hover, .btn:hover, a.mini:hover { border-color: var(--link); color: var(--ink); }
a.mini { color: var(--link); }
button.on, button.primary, nav a.on, .new .btn { background: var(--on); border-color: var(--on); color: #fff; }
input[type=range] { accent-color: var(--link); }

/* "new" */
.badge { background: var(--new); color: #fff; border-radius: 4px; font-family: var(--head); text-transform: uppercase; letter-spacing: 0.06em; font-size: 13px; font-weight: 600; }
.run.new, .hl, .cm.new, tr.new td { background: var(--newbg); }
.run.new, .hl { border: 1px solid var(--newline); }
.cm.new { border-left-color: var(--link); }
tr.new td:first-child { box-shadow: inset 3px 0 0 var(--link); }

/* figures in the monospace face */
.tile b, .figs b, .when span, .hours button, .run .r, .run .p span, .status td, .status .tiles b { font-family: var(--mono); }
.tile b, .figs .top1 b { color: var(--link); }
.tile { background: var(--bg); }
.cm .txt, .body, .cm .x { color: var(--text2); }
td.lead { color: var(--link); }