/* Shared foundation: colour tokens, spacing scale, dark mode, reset, and the
   handful of elements every page draws the same way.

   Layout is fluid first and only pinned at the top end. Three widths matter:
     phone   below 600px   one column, full-width controls, tighter padding
     tablet  600-1023px    roomier padding, side-by-side controls
     laptop  1024px and up wider page, largest type
   Spacing is expressed as tokens so a breakpoint changes one number, not
   thirty rules. */

:root {
  --bg: #f6f7f9; --panel: #ffffff; --ink: #16181d; --muted: #6b7280;
  --line: #e3e6ea; --accent: #2f6feb; --good: #1a7f4b; --bad: #b4413a;
  --soft-good: #e7f4ec; --soft-bad: #fbeceb;
  --shadow: 0 1px 3px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.06);

  /* Phone-first values; the breakpoints below raise them. */
  --page: 820px;
  --pad-x: 14px;
  --pad-y: 18px;
  --card-pad: 18px;
  --gap: 10px;
  --radius: 14px;
}

@media (min-width: 600px) {
  :root { --pad-x: 20px; --pad-y: 24px; --card-pad: 22px; --gap: 12px; }
}

@media (min-width: 1024px) {
  :root { --page: 940px; --pad-x: 24px; --pad-y: 28px; --card-pad: 26px; }
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14161a; --panel: #1c1f25; --ink: #e8eaee; --muted: #9aa3b0;
    --line: #2b3038; --accent: #6ea0ff; --good: #56c98a; --bad: #ef8079;
    --soft-good: #16301f; --soft-bad: #331b19;
    --shadow: 0 1px 3px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.3);
  }
}

* { box-sizing: border-box; }

/* Author rules like `.row { display: flex }` outrank the browser's own
   `[hidden] { display: none }`, which silently un-hides anything the markup
   or JS meant to keep out of sight. Settle it once, here. */
[hidden] { display: none !important; }

html {
  /* Stop iOS inflating text when the phone is turned sideways. */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Long deck names and citations must never widen the page on a phone. */
  overflow-wrap: break-word;
}

img { max-width: 100%; height: auto; }

a { color: var(--accent); }

.muted { color: var(--muted); font-size: 14px; }

h1 { font-size: clamp(17px, 2.6vw, 20px); margin: 0; letter-spacing: -.01em; }

button {
  font: inherit; color: var(--ink); background: var(--panel);
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 16px;
  cursor: pointer; transition: background .15s, border-color .15s, transform .05s;
}
button:hover:not(:disabled) { border-color: var(--accent); }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: .45; cursor: not-allowed; }
button.primary {
  background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600;
}

/* Fingers need a bigger target than a mouse pointer does. */
@media (pointer: coarse) {
  button { min-height: 44px; }
  input, select { min-height: 44px; }
}

progress { width: 100%; height: 6px; accent-color: var(--accent); }

code {
  font: 13px ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--bg); border: 1px solid var(--line); border-radius: 5px;
  padding: 1px 5px; word-break: break-all;
}

.empty { text-align: center; color: var(--muted); padding: 32px 16px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}