/* ═══ ANNOTATION · css/base.css ═══
   WHAT:   Reset, the page (tower wall), and the typography of reading surfaces
           (lesson text, tables, code, prompts).
   RULE:   Reading surfaces stay flat and textureless. Decoration lives in decor.css
           and never sits under text.
   ADD:    New lesson element (e.g. a callout)? Style it under ".prose" here.
*/

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--bevel-hi) var(--page-bg); }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

/* ── Page: the tower wall ────────────────────────────────────────────────────
   A fixed layer behind everything (background-attachment: fixed is ignored on
   iOS and stretches with page height elsewhere). The scrim keeps the wall a
   backdrop: it never competes with the stone in front of it. */
html { background: var(--page-bg); overflow-x: clip; }   /* decor at the frame's edge may never widen the page */
body {
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--read-text);
  background: transparent;
  overflow-x: clip;
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60vmax 50vmax at 22% 30%, var(--glow-soft), transparent 70%),
    linear-gradient(180deg, oklch(0 0 0 / .2), oklch(0 0 0 / .5) 85%),
    var(--wall) center top / cover no-repeat,
    var(--page-bg);
}

/* ── Accessibility helpers ────────────────────────────────────────────────── */
:focus-visible { outline: 3px solid var(--mana); outline-offset: 3px; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--read-bg); color: var(--read-text); padding: 10px 16px;
  border: 2px solid var(--mana); text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* ── Prose: lesson text rendered from Markdown ────────────────────────────── */
.prose { max-width: none; }
/* text keeps a comfortable line length; components (comparisons, galleries) may use the full width */
.prose > :is(p, ul, ol, h1, h2, h3, h4, blockquote, pre, hr) { max-width: var(--measure); }
.prose > table { max-width: 96ch; }
.prose > * + * { margin-top: 0.9em; }
.prose h1 { font-family: var(--font-carved); font-weight: 700; font-size: 2.1rem; line-height: 1.1; letter-spacing: .02em; }
.prose h2 {
  font-family: var(--font-carved); font-weight: 700; font-size: 1.6rem; line-height: 1.15; margin-top: 1.7em; letter-spacing: .03em;
  display: flex; align-items: center; gap: .55em;
}
/* a small cut-stone marker before each section heading, lit in the theme's light */
.prose h2::before {
  content: ""; flex: none; width: .5em; height: .5em; rotate: 45deg;
  background: linear-gradient(135deg, var(--mana-text), var(--mana) 55%, oklch(from var(--mana) calc(l - .25) c h));
  box-shadow: 0 0 10px var(--glow);
}
.prose h3 { font-size: 1.1rem; font-weight: 700; margin-top: 1.4em; }
.prose p.lead { font-size: 1.15rem; color: var(--read-text); }
.prose a { color: var(--read-accent); text-underline-offset: 3px; }
.prose a:hover { text-decoration-thickness: 2px; }
/* a link to a part of the guide that is hidden for now ("later" in content/site.json) */
.prose .later-link { color: var(--read-muted); }
.prose strong { color: var(--read-text); }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li + li { margin-top: .35em; }
.prose li::marker { color: var(--read-accent); }
.prose code {
  font-family: var(--font-mono); font-size: .88em;
  background: var(--read-bg-2); padding: .1em .35em; border-radius: 2px;
  overflow-wrap: anywhere;
}
/* code / prompt blocks: a chamfered inset groove with a lit left edge */
.prose pre {
  position: relative;
  font-family: var(--font-mono); font-size: .86rem; line-height: 1.6;
  background: var(--read-bg-2); color: var(--read-text);
  padding: 14px 16px; padding-right: 96px;
  border-left: 3px solid var(--read-accent);
  box-shadow: inset 0 2px 6px oklch(0 0 0 / .35);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  overflow-x: auto; white-space: pre-wrap; overflow-wrap: anywhere;
}
.prose pre code { background: none; padding: 0; font-size: inherit; }
.prose blockquote {
  border-left: 3px solid var(--mana-2); padding: 4px 0 4px 16px; color: var(--read-muted);
}
/* tables: scroll sideways inside their own box instead of crushing columns */
.prose table { border-collapse: collapse; width: 100%; font-size: .95rem; display: block; overflow-x: auto; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 9px 10px; border-bottom: 1px solid var(--read-line); }
.prose thead th { border-bottom: 2px solid color-mix(in srgb, var(--read-accent) 40%, var(--read-line)); }
.prose th { font-family: var(--font-carved); font-weight: 700; font-size: 1.05rem; letter-spacing: .04em; color: var(--read-muted); text-transform: uppercase; }
.prose tbody tr:hover { background: color-mix(in srgb, var(--read-accent) 5%, transparent); }
.prose hr { border: 0; height: 2px; margin: 2em 0; background: linear-gradient(90deg, transparent, var(--read-line) 15% 85%, transparent); }
.prose kbd {
  font-family: var(--font-mono); font-size: .85em; padding: .1em .45em;
  border: 1px solid var(--read-line); border-bottom-width: 3px; border-radius: 2px; background: var(--read-bg-2);
}
.prose .task-list-item { list-style: none; margin-left: -1.4em; }
.prose input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--mana); vertical-align: -4px; margin-right: 8px; }
.muted { color: var(--read-muted); }

/* phones: each row of a labelled table becomes a small card: the first cell is its title,
   the other cells are stacked with their column name above them (js/main.js labelTables) */
@media (max-width: 719px) {
  .prose table.stack-on-phone { display: block; overflow: visible; font-size: .95rem; }
  .prose table.stack-on-phone thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .prose table.stack-on-phone tbody { display: grid; gap: 10px; }
  .prose table.stack-on-phone tr {
    display: grid; gap: 6px; padding: 10px 12px;
    background: var(--read-bg-2); box-shadow: inset 0 2px 6px oklch(0 0 0 / .3);
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
  }
  .prose table.stack-on-phone td { display: block; padding: 0; border: 0; }
  .prose table.stack-on-phone td + td[data-label]::before {
    content: attr(data-label); display: block; margin-bottom: 1px;
    font-family: var(--font-carved); font-weight: 700; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--read-muted);
  }
  .prose table.stack-on-phone td:first-child { font-weight: 700; }
  .prose table:not(.stack-on-phone) th, .prose table:not(.stack-on-phone) td { min-width: 9em; }
}

/* ── Callouts written in Markdown as  > **Tip:** …  ──────────────────────────
   A small chiselled plaque: inset, lit left edge, a gem marker. */
.callout, .prose blockquote.callout {
  position: relative;
  border-left: 3px solid var(--read-accent);
  background: var(--read-bg-2); color: var(--read-text);
  padding: 12px 16px 12px 42px;
  box-shadow: inset 0 2px 6px oklch(0 0 0 / .3);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}
.callout::before, .prose blockquote.callout::before {
  content: ""; position: absolute; left: 15px; top: 17px; width: 11px; height: 11px; rotate: 45deg;
  background: linear-gradient(135deg, var(--mana-text), var(--mana) 55%, oklch(from var(--mana) calc(l - .25) c h));
  box-shadow: 0 0 8px var(--glow);
}

/* ── Motion preferences ───────────────────────────────────────────────────── */
html[data-motion="reduced"] *, html[data-motion="reduced"] *::before, html[data-motion="reduced"] *::after {
  animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important;
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="full"]) *, html:not([data-motion="full"]) *::before, html:not([data-motion="full"]) *::after {
    animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important;
  }
}