/* Campaign cases: colours, type and the small parts every screen uses.
   Two themes, chosen by data-theme on <html>. The light one has no pure white surface larger than a control
   (contract C41). Spacing runs on one scale: 4, 8, 12, 16, 24, 32, 40. */

:root {
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, "SF Mono", Menlo, monospace;

  --r-s: 6px;
  --r-m: 8px;
  --r-l: 12px;

  --ease: cubic-bezier(.2, .7, .2, 1);
  --t-fast: 120ms;
  --t-pane: 220ms;
}

:root, :root[data-theme="light"] {
  color-scheme: light;
  --canvas: #e6e4de;
  --rail: #dcd9d1;
  --side: #eceae4;
  --pane: #f6f5f1;
  --raised: #fcfbf9;
  --sunken: #eeece6;
  --hover: rgba(40, 36, 28, .06);
  --press: rgba(40, 36, 28, .10);
  --line: #dad7ce;
  --line-strong: #c6c2b7;
  --field-line: #948d79;
  --text: #22201c;
  --text-2: #44413a;
  --text-3: #5a564e;
  --accent: #3455c0;
  --accent-hover: #2b48a6;
  --accent-ink: #2f4eb4;
  --accent-soft: #e2e7f6;
  --on-accent: #ffffff;
  --ok: #24723f;
  --ok-soft: #dfeee3;
  --warn: #7a5000;
  --warn-soft: #f5e9cc;
  --danger: #a3301f;
  --danger-soft: #f5dfdb;
  --sim: #6646b3;
  --sim-soft: #eae4f6;
  --hit: rgba(214, 164, 20, .34);
  --shadow: 0 1px 2px rgba(40, 36, 28, .06), 0 8px 24px rgba(40, 36, 28, .10);
  --focus: 0 0 0 3px rgba(52, 85, 192, .28);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #121315;
  --rail: #0d0e0f;
  --side: #17181a;
  --pane: #1d1e21;
  --raised: #25262a;
  --sunken: #17181a;
  --hover: rgba(255, 255, 255, .06);
  --press: rgba(255, 255, 255, .10);
  --line: #2d2f33;
  --line-strong: #3f4247;
  --field-line: #6b7078;
  --text: #e8e6e1;
  --text-2: #c5c2bc;
  --text-3: #a09d96;
  --accent: #4866d6;
  --accent-hover: #3f5ccc;
  --accent-ink: #9fb3ff;
  --accent-soft: #222a47;
  --on-accent: #ffffff;
  --ok: #72c594;
  --ok-soft: #1b3024;
  --warn: #e0b45a;
  --warn-soft: #382d14;
  --danger: #f08c80;
  --danger-soft: #3d201d;
  --sim: #b8a4f5;
  --sim-soft: #29233f;
  --hit: rgba(224, 180, 90, .30);
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .45);
  --focus: 0 0 0 3px rgba(111, 141, 245, .38);
}

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font: 14px/1.45 var(--font);
  color: var(--text);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
[hidden] { display: none !important; }

:focus { outline: none; }
:focus-visible { box-shadow: var(--focus); }
a:focus-visible, .linkbtn:focus-visible, .log-case:focus-visible { border-radius: 3px; }

::selection { background: var(--accent-soft); }

.boot { margin: 24px; color: var(--text-3); }

/* ---- scrollbars: quiet, the same in both themes ---- */
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }

/* ---- icons ---- */
.icon { display: inline-block; flex: none; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 32px; padding: 5px 12px;
  border: 1px solid transparent; border-radius: var(--r-m);
  background: transparent; color: var(--text);
  font-size: 13.5px; font-weight: 500; line-height: 1.25; text-align: center;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
  user-select: none;
}
.btn:disabled { opacity: .5; }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:not(:disabled):hover { background: var(--accent-hover); }
.btn-outline { background: transparent; border-color: var(--accent-ink); color: var(--accent-ink); }
.btn-outline:not(:disabled):hover { background: var(--accent-soft); }
.btn-decline { background: transparent; border-color: var(--danger); color: var(--danger); }
.btn-decline:not(:disabled):hover { background: var(--danger-soft); }
.btn-secondary { background: var(--raised); border-color: var(--line-strong); }
.btn-secondary:not(:disabled):hover { background: var(--hover); }
.btn-ghost { color: var(--text-2); }
.btn-ghost:not(:disabled):hover { background: var(--hover); color: var(--text); }
.btn-quiet { min-height: 28px; padding: 3px 8px; color: var(--text-2); font-weight: 400; font-size: 13px; }
.btn-quiet:not(:disabled):hover { background: var(--hover); color: var(--text); }
.btn.is-busy { opacity: .6; pointer-events: none; }

/* A button that states a fact in two lines: what it does, then exactly what. */
.btn-two { display: block; width: 100%; padding: 10px 14px; text-align: left; }
.btn-two .t { display: block; font-size: 14.5px; font-weight: 600; }
.btn-two .s { display: block; margin-top: 2px; font-size: 13px; font-weight: 400; line-height: 1.4; overflow-wrap: anywhere; }

.iconbtn {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 30px; height: 30px; padding: 0;
  border: 0; border-radius: var(--r-s);
  background: transparent; color: var(--text-2);
  transition: background var(--t-fast), color var(--t-fast);
}
.iconbtn:not(:disabled):hover { background: var(--hover); color: var(--text); }
.iconbtn:disabled { opacity: .35; }
.iconbtn[aria-pressed="true"] { background: var(--press); color: var(--text); }

/* ---- fields ---- */
.input, .textarea, .select {
  width: 100%; min-height: 32px; padding: 5px 10px;
  border: 1px solid var(--field-line); border-radius: var(--r-m);
  background: var(--raised); color: var(--text);
  font-size: 13.5px; line-height: 1.4;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.textarea { display: block; padding: 8px 10px; resize: vertical; min-height: 64px; line-height: 1.5; }
.input::placeholder, .textarea::placeholder { color: var(--text-3); }
/* the edge of a field the keyboard is in: the ink blue, two pixels wide, so it stands apart from the resting edge */
.input:focus, .textarea:focus, .select:focus { border-color: var(--accent-ink); box-shadow: 0 0 0 1px var(--accent-ink), var(--focus); border-radius: var(--r-m); }

/* ---- small marks ---- */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: 999px;
  background: var(--sunken); color: var(--text-2);
  font-size: 13px; font-weight: 500; line-height: 1.5; white-space: nowrap;
}
.pill.is-accent { background: var(--accent-soft); color: var(--accent-ink); }
.pill.is-ok { background: var(--ok-soft); color: var(--ok); }
.pill.is-warn { background: var(--warn-soft); color: var(--warn); }
.pill.is-danger { background: var(--danger-soft); color: var(--danger); }
.pill.is-wrap { white-space: normal; border-radius: 10px; }

/* Anything simulated carries this mark: a dashed outline, in one colour kept for it (contract C20). */
.sim {
  display: inline-flex; align-items: center;
  padding: 0 6px; border: 1px dashed var(--sim); border-radius: 4px;
  color: var(--sim); font-size: 13px; font-weight: 500; line-height: 1.5; white-space: nowrap;
}

.error { margin-top: 8px; color: var(--danger); font-size: 13px; }
.muted { color: var(--text-3); }
.mono { font-family: var(--mono); font-size: max(13px, .92em); font-variant-numeric: tabular-nums; }

/* ---- the floating tooltip for icon buttons ---- */
.tip {
  position: fixed; z-index: 100; pointer-events: none;
  max-width: 280px; padding: 4px 8px; border-radius: var(--r-s);
  background: var(--text); color: var(--pane);
  font-size: 13px; line-height: 1.35;
  opacity: 0; transform: translateY(2px);
  transition: opacity 100ms, transform 100ms;
}
.tip.is-on { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; }
}