/* sketch.css — theme tokens + hand-drawn diagram classes. Shared by every diagram.
 * Layout concept: a lab notebook on graph paper; diagrams are pencil sketches, feedback is red/green pen.
 */
:root {
  --paper: #f6f8f5;      /* page: faintly blue-green off-white */
  --card: #ffffff;
  --grid: #dde6ec;       /* graph-paper lines */
  --ink: #1f2a44;        /* navy pencil */
  --ink-soft: #5d6882;
  --accent: #2b67d1;     /* blue pen */
  --hl: #ffd84d;         /* highlighter */
  --hl-soft: #fff1b0;
  --good: #1d855a;       /* green check */
  --bad: #cf3f37;        /* red pen */
  --font-hand: 'Patrick Hand', 'Comic Sans MS', 'Chalkboard SE', cursive;
  --font-body: 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #1c2a29; --card: #22332f; --grid: #2b3d3a;
    --ink: #eef2ea; --ink-soft: #a7b6b0; --accent: #86b6ff;
    --hl: #e8c33a; --hl-soft: #4a4420; --good: #6fd39d; --bad: #ff8b7c;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #1c2a29; --card: #22332f; --grid: #2b3d3a;
  --ink: #eef2ea; --ink-soft: #a7b6b0; --accent: #86b6ff;
  --hl: #e8c33a; --hl-soft: #4a4420; --good: #6fd39d; --bad: #ff8b7c;
  color-scheme: dark;
}

/* ---- SVG stroke classes ---- */
svg.sk { overflow: visible; }
.sk-ink    { stroke: var(--ink); }
.sk-soft   { stroke: var(--ink-soft); }
.sk-accent { stroke: var(--accent); }
.sk-good   { stroke: var(--good); }
.sk-bad    { stroke: var(--bad); }
.sk-hl     { stroke: var(--hl); }
.sk-grid   { stroke: var(--grid); }

/* ---- SVG fill classes ---- */
.sk-fill-hl     { fill: var(--hl); opacity: .55; }
.sk-fill-accent { fill: var(--accent); opacity: .25; }
.sk-fill-good   { fill: var(--good); opacity: .25; }
.sk-fill-bad    { fill: var(--bad); opacity: .25; }
.sk-fill-ink    { fill: var(--ink); }
.sk-fill-card   { fill: var(--card); }
.sk-fill-paper  { fill: var(--paper); }

/* ---- SVG text ---- */
.sk-text        { fill: var(--ink); font-family: var(--font-hand); }
.sk-text-soft   { fill: var(--ink-soft); font-family: var(--font-hand); }
.sk-text-accent { fill: var(--accent); font-family: var(--font-hand); }
.sk-text-good   { fill: var(--good); font-family: var(--font-hand); }
.sk-text-bad    { fill: var(--bad); font-family: var(--font-hand); }

/* ---- diagram controls ---- */
.diagram { display: grid; gap: 10px; min-width: 0; }
.sk-controls { display: grid; gap: 10px; }
.sk-slider {
  display: grid; grid-template-columns: minmax(5.5em, auto) 1fr minmax(5.5em, auto);
  align-items: center; gap: 12px;
  font-family: var(--font-hand); font-size: 1.15rem; color: var(--ink);
}
.sk-slider-label { color: var(--ink-soft); }
.sk-slider-value { font-variant-numeric: tabular-nums; text-align: right; color: var(--accent); }
.sk-slider input[type="range"] { width: 100%; min-width: 0; height: 36px; accent-color: var(--accent); }
.sk-toggle { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-family: var(--font-hand); font-size: 1.1rem; }
.sk-toggle button {
  font: inherit; color: var(--ink); background: var(--card);
  border: 2px solid var(--ink); border-radius: 14px 10px 16px 9px / 9px 15px 10px 14px;
  padding: 6px 14px; min-height: 40px; cursor: pointer;
}
.sk-toggle button[aria-pressed="true"] { background: var(--hl-soft); border-color: var(--accent); color: var(--ink); }
.sk-toggle button:focus-visible, .sk-slider input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (max-width: 480px) {
  .sk-slider { grid-template-columns: 1fr auto; }
  .sk-slider input[type="range"] { grid-column: 1 / -1; grid-row: 2; }
}