/* jsal.io shared app shell: colours, top bar and theme button, used by every app.
   Palette is the home page's Azeroth one: parchment and gold in light mode, dark slate,
   gold and arcane blue in dark. Light by default, dark when the computer is set to dark,
   and <html data-theme="light|dark"> when someone picks one with the theme button
   (nav.js saves the choice for all the apps and the home page). */

:root {
  --jsal-bg: #f5efe2;
  --jsal-surface: #fbf8f0;
  --jsal-sunk: #ece4d3;
  --jsal-ink: #1f1a12;
  --jsal-ink-2: #3d362a;
  --jsal-muted: #6b6253;
  --jsal-line: #e2d8c4;
  --jsal-line-hi: #cfc3a9;
  --jsal-accent: #9a6b14;      /* gold for text and links */
  --jsal-accent-soft: #f1e3c2;
  --jsal-accent-ring: rgba(154, 107, 20, 0.35);
  --jsal-fill: #e3b04b;        /* gold for main buttons */
  --jsal-on-fill: #1f1a12;
  --jsal-glow: rgb(227 176 75 / 0.22);   /* faint gold glow at the top of the page */
  --jsal-ok: #3f6b3a;   --jsal-ok-soft: #e3eedb;
  --jsal-warn: #8a4f0a; --jsal-warn-soft: #f6e2c8;
  --jsal-bad: #a8352b;  --jsal-bad-soft: #f6dfda;
  --jsal-info: #3b5a9a; --jsal-info-soft: #e1e7f3;   /* arcane blue */
  --jsal-shadow: 0 1px 2px rgba(60, 40, 10, 0.08);
  --jsal-font: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --jsal-radius: 6px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --jsal-bg: #111318; --jsal-surface: #191c23; --jsal-sunk: #22262f;
    --jsal-ink: #ece6d6; --jsal-ink-2: #cfc8b6; --jsal-muted: #9a9688; --jsal-line: #2a2e38; --jsal-line-hi: #3d424e;
    --jsal-accent: #e3b04b; --jsal-accent-soft: #2c2618; --jsal-accent-ring: rgba(227, 176, 75, 0.35);
    --jsal-fill: #e3b04b; --jsal-on-fill: #16130c; --jsal-glow: rgb(227 176 75 / 0.10);
    --jsal-ok: #7fbf7a; --jsal-ok-soft: #1c2a1d; --jsal-warn: #f0a860; --jsal-warn-soft: #33261a;
    --jsal-bad: #ff8f84; --jsal-bad-soft: #3a1d1a; --jsal-info: #8fb1ff; --jsal-info-soft: #1d2540;
    --jsal-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --jsal-bg: #111318; --jsal-surface: #191c23; --jsal-sunk: #22262f;
  --jsal-ink: #ece6d6; --jsal-ink-2: #cfc8b6; --jsal-muted: #9a9688; --jsal-line: #2a2e38; --jsal-line-hi: #3d424e;
  --jsal-accent: #e3b04b; --jsal-accent-soft: #2c2618; --jsal-accent-ring: rgba(227, 176, 75, 0.35);
  --jsal-fill: #e3b04b; --jsal-on-fill: #16130c; --jsal-glow: rgb(227 176 75 / 0.10);
  --jsal-ok: #7fbf7a; --jsal-ok-soft: #1c2a1d; --jsal-warn: #f0a860; --jsal-warn-soft: #33261a;
  --jsal-bad: #ff8f84; --jsal-bad-soft: #3a1d1a; --jsal-info: #8fb1ff; --jsal-info-soft: #1d2540;
  --jsal-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  color-scheme: dark;
}
/* Page background with the home page's gold glow */
body { background: radial-gradient(900px 500px at 15% -10%, var(--jsal-glow), transparent 70%) no-repeat, var(--jsal-bg); }

/* Same column as the jsal.io home page (.col: 640 / 880 / 1000px with 20px sides), so the
   top bar doesn't move when going between the home page and the apps. The apps' own content
   can be wider than this. */
:root { --jsal-col: 600px; }
@media (min-width: 1280px) { :root { --jsal-col: 840px; } }
@media (min-width: 1800px) { :root { --jsal-col: 960px; } }
/* Reserve the scrollbar's space on every page, scrolling or not, so nothing shifts sideways */
html { scrollbar-gutter: stable; }

/* Top bar: logo (app switcher) · app name · the app's own controls · theme button.
   The logo sits exactly where the home page's does: 40px down, 18px. Every row is 36px
   tall (the tallest control), so the top padding is set to put its centre on the home
   page logo's centre (40px + half of its 18px × 1.65 line). */
.jsal-top {
  width: min(100%, var(--jsal-col)); margin-inline: auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
  padding-top: calc(40px - (36px - 18px * 1.65) / 2);
  font-family: var(--jsal-font);
}
.jsal-brand {
  display: inline-flex; align-items: center; height: 36px; flex-shrink: 0;
  font-weight: 700; font-size: 18px; line-height: 1.65; letter-spacing: -0.02em;
  color: var(--jsal-ink); text-decoration: none; white-space: nowrap;
}
.jsal-brand span { color: var(--jsal-accent); }
.jsal-title { margin: 0; font: 700 18px/1.2 var(--jsal-font); letter-spacing: -0.02em; color: var(--jsal-ink); }
.jsal-title .hl { color: var(--jsal-accent); }
.jsal-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.jsal-theme {
  width: 32px; height: 32px; flex-shrink: 0; display: grid; place-items: center; padding: 0;
  border: 1px solid var(--jsal-line); border-radius: var(--jsal-radius);
  background: transparent; color: var(--jsal-muted); cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.jsal-theme:hover { background: var(--jsal-sunk); color: var(--jsal-ink); }
.jsal-theme:focus-visible { outline: 2px solid var(--jsal-accent); outline-offset: 2px; }