/* base.css: the colours, the type and the controls the workbench (workbench.css) and the spot explorer
   (explore.css, on the site's spot pages too) share, light and dark. */
:root {
  --bg: #f4f2ec; --panel: #fffdf8; --sunk: #ebe8df; --ink: #1d2126; --muted: #5d646c; --faint: #8b9198;
  --line: rgba(29,33,38,.12); --line-strong: rgba(29,33,38,.24);
  --accent: #0b7a8a; --accent-soft: rgba(11,122,138,.12);
  --gold: #b7791f; --gold-soft: rgba(183,121,31,.14);
  --good: #2f7d4f; --good-soft: rgba(47,125,79,.13);
  --warn: #a8641a; --warn-soft: rgba(168,100,26,.14);
  --bad: #b3413a; --bad-soft: rgba(179,65,58,.12);
  --map-bg: #0d1a26; --land: #3a3a36;
  --radius: 10px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1419; --panel: #161d24; --sunk: #0b1015; --ink: #e8e6df; --muted: #a2a8ae; --faint: #737a81;
    --line: rgba(232,230,223,.1); --line-strong: rgba(232,230,223,.22);
    --accent: #4cc3cf; --accent-soft: rgba(76,195,207,.13);
    --gold: #e0a84a; --gold-soft: rgba(224,168,74,.15);
    --good: #6cc38c; --good-soft: rgba(108,195,140,.13);
    --warn: #e0a24f; --warn-soft: rgba(224,162,79,.14);
    --bad: #ec7d74; --bad-soft: rgba(236,125,116,.13);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0f1419; --panel: #161d24; --sunk: #0b1015; --ink: #e8e6df; --muted: #a2a8ae; --faint: #737a81;
  --line: rgba(232,230,223,.1); --line-strong: rgba(232,230,223,.22);
  --accent: #4cc3cf; --accent-soft: rgba(76,195,207,.13);
  --gold: #e0a84a; --gold-soft: rgba(224,168,74,.15);
  --good: #6cc38c; --good-soft: rgba(108,195,140,.13);
  --warn: #e0a24f; --warn-soft: rgba(224,162,79,.14);
  --bad: #ec7d74; --bad-soft: rgba(236,125,116,.13);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.55 var(--sans); }
a { color: var(--accent); }
code, .mono { font-family: var(--mono); font-size: .88em; }
code { background: var(--sunk); padding: .08em .35em; border-radius: 4px; overflow-wrap: anywhere; }
h1 { font-size: clamp(26px, 4vw, 36px); line-height: 1.12; margin: 0 0 8px; letter-spacing: -.015em; }
h2 { font-size: 21px; line-height: 1.25; margin: 40px 0 10px; letter-spacing: -.01em; }
h3 { font-size: 16px; margin: 22px 0 6px; }
p { margin: 0 0 12px; }
.lede { color: var(--muted); font-size: 17px; max-width: 72ch; margin-bottom: 20px; }
.kicker { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.btn { font: 600 14px/1 var(--sans); color: var(--ink); background: var(--panel); border: 1px solid var(--line-strong); border-radius: 999px; padding: 9px 14px; cursor: pointer; }
.btn:hover { border-color: var(--accent); }
.btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn:disabled { opacity: .5; cursor: default; }
.seg { display: inline-flex; flex-wrap: wrap; gap: 2px; background: var(--sunk); border-radius: 999px; padding: 3px; }
.seg button { font: 600 13px/1 var(--sans); color: var(--muted); background: transparent; border: 0; border-radius: 999px; padding: 7px 11px; cursor: pointer; }
.seg button.on { background: var(--panel); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.12); }
select { font: 14px var(--sans); color: var(--ink); background: var(--panel); border: 1px solid var(--line-strong); border-radius: 8px; padding: 7px 9px; max-width: 100%; }
label.tog { display: inline-flex; gap: 6px; align-items: center; font-size: 14px; color: var(--muted); cursor: pointer; }