/* Datum teaching workspace — shared lesson stylesheet.
   Tufte-inspired: generous measure, serif body, sidenotes, prints cleanly.
   Every lesson and reference document links this. Do not inline styles in lessons. */

:root {
  --ink: #111;
  --ink-soft: #555;
  --ink-faint: #6f6f6a;
  --bg: #fffff8;          /* Tufte's off-white — easier than pure white */
  --rule: #ddd;
  --accent: #a00;         /* used sparingly: only for genuine emphasis */
  --link: #1a4b8c;
  --code-bg: #f4f4ee;
  --warn-bg: #fff8e6;
  --warn-edge: #e0b400;
  --measure: 38rem;       /* body text never exceeds this — readability */
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e8e8e3; --ink-soft: #a8a8a2; --ink-faint: #8a8a85;
    --bg: #15151a; --rule: #33333a; --accent: #ff8a80; --link: #8ab4f8;
    --code-bg: #1e1e26; --warn-bg: #2a2412; --warn-edge: #8a7000;
  }
}
:root[data-theme="dark"] {
  --ink: #e8e8e3; --ink-soft: #a8a8a2; --ink-faint: #8a8a85;
  --bg: #15151a; --rule: #33333a; --accent: #ff8a80; --link: #8ab4f8;
  --code-bg: #1e1e26; --warn-bg: #2a2412; --warn-edge: #8a7000;
}
:root[data-theme="light"] {
  --ink: #111; --ink-soft: #555; --ink-faint: #6f6f6a;
  --bg: #fffff8; --rule: #ddd; --accent: #a00; --link: #1a4b8c;
  --code-bg: #f4f4ee; --warn-bg: #fff8e6; --warn-edge: #e0b400;
}

/* Base size, raised twice. 15/16 px was the original; 2026-07-27 it went to 17/18
   because almost every element is set in fractions of a rem and the page ran from
   9.3 px to 15.2 px, with the bulk of its content at 13. Measured again 2026-07-28
   at 100% zoom on a laptop, and it was still small: prose in the detail layer sat at
   16.2 px and its labels at 12.6, because the scale is mostly *below* 1 rem. So the
   base is 20 px and the bottom of the scale is lifted with it (see atlas.css). Read
   at 100% by someone who is looking after their eyes, this is the floor, not a
   preference. */
html { font-size: 18px; }
@media (min-width: 800px) { html { font-size: 20px; } }

body {
  margin: 0 auto;
  padding: 3rem 2rem 6rem;
  max-width: 60rem;
  background: var(--bg);
  color: var(--ink);
  font-family: Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

/* ---- Masthead ---------------------------------------------------------- */

.masthead { border-bottom: 1px solid var(--rule); padding-bottom: 1rem; margin-bottom: 2.5rem; }
.eyebrow {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-faint); margin: 0 0 .6rem;
}
.subtitle { color: var(--ink-soft); font-style: italic; max-width: var(--measure); margin: .4rem 0 0; }

/* ---- Type -------------------------------------------------------------- */

h1 { font-weight: 400; font-size: 2.1rem; line-height: 1.15; margin: 0; letter-spacing: -.01em; }
h2 {
  font-weight: 400; font-size: 1.5rem; line-height: 1.2;
  margin: 3rem 0 1rem; max-width: var(--measure);
}
h3 { font-weight: 600; font-size: 1.05rem; margin: 2rem 0 .5rem; max-width: var(--measure); }
p, ul, ol, blockquote, .callout, .quiz, figure { max-width: var(--measure); }
p { margin: 0 0 1.1rem; }
li { margin-bottom: .4rem; }
strong { font-weight: 600; }
a { color: var(--link); text-underline-offset: .15em; }
a:hover { color: var(--accent); }

blockquote {
  margin: 1.5rem 0; padding-left: 1.2rem;
  border-left: 2px solid var(--rule);
  font-style: italic; color: var(--ink-soft);
}
blockquote cite { display: block; font-style: normal; font-size: .82rem; color: var(--ink-faint); margin-top: .5rem; }

code, kbd, pre, .mono {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}
code { background: var(--code-bg); padding: .1em .35em; border-radius: 3px; font-size: .85em; }
pre {
  background: var(--code-bg); padding: 1rem 1.2rem; border-radius: 4px;
  overflow-x: auto; font-size: .8rem; line-height: 1.5;
  max-width: 100%; border: 1px solid var(--rule);
}
pre code { background: none; padding: 0; font-size: inherit; }

/* ---- Sidenotes (Tufte) ------------------------------------------------- */

.sidenote {
  float: right; clear: right;
  width: 15rem; margin-right: -18rem; margin-top: .3rem; margin-bottom: 1rem;
  font-size: .78rem; line-height: 1.45; color: var(--ink-soft);
}
.sidenote-number { counter-increment: sidenote; }
.sidenote-number::after {
  content: counter(sidenote); font-size: .65rem; top: -.4rem; left: .1rem; position: relative;
  color: var(--accent);
}
body { counter-reset: sidenote; }
@media (max-width: 1100px) {
  .sidenote {
    float: none; width: auto; margin: 1rem 0; max-width: var(--measure);
    border-left: 2px solid var(--rule); padding-left: .9rem;
  }
}

/* ---- Callouts ---------------------------------------------------------- */

.callout {
  background: var(--warn-bg); border-left: 3px solid var(--warn-edge);
  padding: .9rem 1.1rem; margin: 1.5rem 0; font-size: .92rem;
}
.callout p:last-child { margin-bottom: 0; }
.callout .label {
  font-family: ui-monospace, monospace; font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint); display: block; margin-bottom: .35rem;
}

/* ---- Tables ------------------------------------------------------------ */

.table-scroll { overflow-x: auto; margin: 1.5rem 0; max-width: 100%; }
table { border-collapse: collapse; font-size: .85rem; width: 100%; }
th, td { text-align: left; padding: .45rem .8rem .45rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { font-weight: 600; border-bottom: 1px solid var(--ink-soft); white-space: nowrap; }
td code { font-size: .8em; }

/* ---- Layer diagram ----------------------------------------------------- */

.stack { margin: 2rem 0; max-width: 44rem; }
.layer {
  border: 1px solid var(--rule); border-left: 3px solid var(--ink-faint);
  padding: .6rem .9rem; margin-bottom: .35rem; background: var(--code-bg);
}
.layer .name { font-family: ui-monospace, monospace; font-size: .82rem; font-weight: 600; }
.layer .role { font-size: .8rem; color: var(--ink-soft); }
.layer.control { border-left-color: var(--link); }
.layer.data { border-left-color: var(--accent); }

/* ---- Footer / nav ------------------------------------------------------ */

.lesson-footer { margin-top: 4rem; border-top: 1px solid var(--rule); padding-top: 1.5rem; }
.next-steps { font-size: .9rem; }
.ask {
  font-size: .9rem; color: var(--ink-soft); font-style: italic;
  border-left: 2px solid var(--accent); padding-left: 1rem; margin: 2rem 0;
  max-width: var(--measure);
}
.source-box {
  border: 1px solid var(--rule); padding: 1rem 1.2rem; margin: 2rem 0;
  max-width: var(--measure); font-size: .9rem; background: var(--code-bg);
}
.source-box .label {
  font-family: ui-monospace, monospace; font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint); display: block; margin-bottom: .4rem;
}

/* ---- Print ------------------------------------------------------------- */

@media print {
  /* Paper is white whatever the screen was, so *every* colour has to come back to the
     light set — not the four that used to be reset here. Printed from a dark-themed
     browser, `--ink-soft` and `--ink-faint` stayed pale grey, and every secondary line
     on the page — captions, notes, table rules, the second half of most cards — came out
     almost invisible. The `[data-theme]` selector is repeated because it outranks `:root`
     and would otherwise put the dark values back. */
  :root, :root[data-theme="dark"], :root[data-theme="light"] {
    --bg: #fff; --ink: #000; --ink-soft: #333; --ink-faint: #555;
    --rule: #bbb; --link: #000; --accent: #000;
    --code-bg: #f7f7f7; --warn-bg: #f7f7f7; --warn-edge: #999;
  }
  body { padding: 0; max-width: none; font-size: 10.5pt; }
  .sidenote { float: none; width: auto; margin: .8rem 0; border-left: 2px solid #ccc; padding-left: .8rem; }
  .quiz, .lesson-footer nav, .theme-toggle { display: none; }
  h2 { break-after: avoid; } pre, table, .callout { break-inside: avoid; }
  a { color: #000; text-decoration: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; color: #666; word-break: break-all; }
}