/* RC Tools look, shared by every page on the site (served at /shared/site.css). Colour tokens follow
   the system theme; data-theme="light" or "dark" on <html>, set by the toggle in site.js, forces one. */

:root {
  --bg: #f4f3ef; --bg2: #ecebe6; --panel: #ffffff; --panel2: #f8f7f3; --line: #dedcd5; --line2: #cbc9c1;
  --ink: #1d1d1b; --muted: #6b6a66; --dim: #8f8d87;
  --accent: #2f5bd3; --accent-hover: #2550c2; --on-accent: #ffffff;
  --ok: #1f8a4c; --warn: #b8730a; --bad: #c0362c; --info: #1d7fae; --violet: #7a4fd0;
  --shadow: 0 1px 2px rgba(0,0,0,.06), 0 6px 20px rgba(0,0,0,.08);
  --sans: system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #17181b; --bg2: #1c1d21; --panel: #212226; --panel2: #27282d; --line: #33343a; --line2: #44454c;
    --ink: #e9e7e1; --muted: #9a988f; --dim: #74726c;
    --accent: #7d9cff; --accent-hover: #93adff; --on-accent: #10131c;
    --ok: #4cc38a; --warn: #e3a24a; --bad: #ef6b60; --info: #5cc0ea; --violet: #a98bf5;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.35);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #17181b; --bg2: #1c1d21; --panel: #212226; --panel2: #27282d; --line: #33343a; --line2: #44454c;
  --ink: #e9e7e1; --muted: #9a988f; --dim: #74726c;
  --accent: #7d9cff; --accent-hover: #93adff; --on-accent: #10131c;
  --ok: #4cc38a; --warn: #e3a24a; --bad: #ef6b60; --info: #5cc0ea; --violet: #a98bf5;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.35);
  color-scheme: dark;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.55 var(--sans); }
a { color: var(--accent); }
code { font: 13px/1.5 var(--mono); }

/* Site header: "RC Tools / <tool>", then anything the tool adds after a .spacer. */
.bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 49px; padding: 8px 16px;
  border-bottom: 1px solid var(--line); background: var(--panel); }
.bar > a:first-child { color: inherit; text-decoration: none; font-weight: 600; }
.bar .sep { color: var(--muted); }
.bar .here { color: var(--muted); }
.bar .spacer { flex: 1; }
.theme-toggle { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; color: var(--muted);
  background: transparent; border: 1px solid transparent; border-radius: 8px; cursor: pointer; }
.theme-toggle:hover { color: var(--ink); border-color: var(--line); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }