/* fraction-ds — dist/css/prose.css
   The reading surface. Everything a person wrote or pasted — a note body,
   rendered markdown, a changelog, a help page — goes inside one element
   with class="prose" and needs no other class.

   NEW in the system (Canvas is a tool, not a reader) and therefore written
   strictly against the existing laws:
     · the body stays 15px / --fs-body; only HEADINGS are allowed out of
       the 15/13/11 UI scale, because a document needs a hierarchy a
       toolbar does not: 28 / 20 / 16, then back to body size,
     · human text is --sans, machine-derived text (code, pre, kbd) is
       --mono — the same type split as the rest of the system,
     · a blockquote is an --accent edge on its left, not a tinted card
       (0.10.0: Milan wanted quotes to read as full-strength text marked
       by the accent, not greyed out behind a grey hairline),
     · a table is hairlines, not zebra stripes,
     · links are --accent, and inside a paragraph --accent is spent on
       nothing else, so a link is the one thing in a line that draws the eye
       (the quote's edge is a 2px mark beside the text, never the text).

   Scoped: every rule below starts at .prose, so dropping this file into a
   product cannot restyle its chrome — with two named exceptions added in
   0.3.0, both reading furniture rather than chrome and both opted into by
   class: .codeblock (a fenced block with a language + copy head) and
   .toc (a document's table of contents, which sits beside .prose, not
   inside it). */

.prose {
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink);
  max-width: 68ch;          /* a measure, not a window width */
  overflow-wrap: break-word;
}
.prose--wide { max-width: none; }

/* ── headings ─────────────────────────────────────────────────────
   Three levels and no more. h4–h6 fall back to body size in a heavier
   weight: past three levels a document needs splitting, not a fourth
   type size. Top margin is collapsed on the first child so a .prose
   never opens with dead space. */
.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
  color: var(--ink);
  font-weight: 600;
  line-height: 1.25;
  margin: 1.6em 0 .5em;
  scroll-margin-top: 64px;
}
.prose h1 { font-size: 28px; letter-spacing: -.01em; }
.prose h2 { font-size: 20px; }
.prose h3 { font-size: 16px; }
.prose h4, .prose h5, .prose h6 { font-size: var(--fs-body); color: var(--ink-2); }
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }

/* A rule under h2 is the section break a 20px heading cannot carry alone. */
.prose h2 { padding-bottom: .3em; border-bottom: 1px solid var(--line); }

/* ── paragraphs ───────────────────────────────────────────────── */
.prose p { margin: 0 0 1em; }
.prose strong, .prose b { font-weight: 600; color: var(--ink); }
.prose em, .prose i { font-style: italic; }
.prose small { font-size: var(--fs-ui); color: var(--ink-2); }
.prose sub, .prose sup { font-size: var(--fs-meta); line-height: 0; }

/* ── links ────────────────────────────────────────────────────────
   Coloured, not underlined, until you point at one. */
.prose a {
  color: var(--accent);
  text-decoration: none;
  transition: color 120ms;
}
.prose a:hover { text-decoration: underline; text-underline-offset: 2px; }
.prose a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

/* ── lists ────────────────────────────────────────────────────── */
.prose ul, .prose ol { margin: 0 0 1em; padding-left: 1.4em; }
.prose li { margin: .25em 0; }
.prose li::marker { color: var(--ink-3); }
.prose ul ul, .prose ol ol, .prose ul ol, .prose ol ul { margin: .25em 0; }
.prose dl { margin: 0 0 1em; }
.prose dt { font-weight: 600; margin-top: .75em; }
.prose dd { margin: .2em 0 0; color: var(--ink-2); }

/* ── task lists ───────────────────────────────────────────────────
   The markdown `- [ ]` / `- [x]` shape. The checkbox is ds.css's .check,
   so a rendered task list and a real form control look identical. */
.prose ul.prose-tasks, .prose ul.contains-task-list { list-style: none; padding-left: 0; }
.prose li.prose-task, .prose li.task-list-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: .3em 0;
}
.prose li.prose-task > input[type="checkbox"],
.prose li.task-list-item > input[type="checkbox"] {
  appearance: none;
  width: 16px;
  height: 16px;
  margin: .25em 0 0;
  flex: none;
  border-radius: 4px;
  border: 1px solid var(--line-2);
  background: var(--bg);
  position: relative;
  cursor: pointer;
}
.prose li.prose-task > input[type="checkbox"]:checked,
.prose li.task-list-item > input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}
.prose li.prose-task > input[type="checkbox"]:checked::after,
.prose li.task-list-item > input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid var(--accent-ink);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
/* A finished task steps down the ink ramp instead of being struck out —
   it is done, not deleted. */
.prose li.prose-task--done, .prose li.task-list-item--done { color: var(--ink-3); }

/* ── blockquote ───────────────────────────────────────────────────
   Full-strength text with a 2px --accent edge on the left (0.10.0 — it was
   --ink-2 text behind a --line-2 hairline). No tint, no card, no quotation
   mark. */
.prose blockquote {
  margin: 0 0 1em;
  padding: 0 0 0 16px;
  border-left: 2px solid var(--accent);
  color: var(--ink);
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose blockquote cite { display: block; margin-top: .5em; font-size: var(--fs-ui); font-style: normal; color: var(--ink-3); }

/* ── rule ─────────────────────────────────────────────────────── */
.prose hr { height: 0; margin: 2em 0; border: 0; border-top: 1px solid var(--line); }

/* ── code ─────────────────────────────────────────────────────────
   Machine-derived text is mono on --bg-2, radius 8 for a block and 4 for
   an inline run. No syntax colours: the system has one accent and it is
   not spent on keywords. */
.prose code {
  font-family: var(--mono);
  font-size: .9em;
  padding: .12em .35em;
  border-radius: 4px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--ink);
}
.prose pre {
  margin: 0 0 1em;
  padding: 12px 14px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  overflow: auto;
  font-family: var(--mono);
  font-size: var(--fs-ui);
  line-height: 1.55;
  color: var(--ink);
}
.prose pre code {
  padding: 0;
  border: 0;
  background: none;
  font-size: inherit;
  border-radius: 0;
}
/* A code block that carries a head: the language in mono 11 and one
   ghost .btn--sm (copy). The frame takes over the --bg-2 / hairline /
   radius 8 a bare pre has, so the pre inside gives all three up. Not
   scoped to .prose on purpose — a card body that is not a full reading
   surface still shows code the same way. */
.codeblock {
  margin: 0 0 1em;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  overflow: hidden;
}
.codeblock__head {
  height: var(--h-control);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 3px 0 14px;
  border-bottom: 1px solid var(--line);
}
.codeblock__lang { font-family: var(--mono); font-size: var(--fs-meta); color: var(--ink-3); }
.codeblock__head .btn { margin-left: auto; }
.codeblock pre, .prose .codeblock pre {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

.prose kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 4px;
  font-family: var(--mono);
  font-size: var(--fs-meta);
  color: var(--ink-2);
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-bottom-width: 2px;
}

/* ── tables ───────────────────────────────────────────────────────
   Hairlines only. The header row is separated by a line, not a fill. */
.prose table {
  width: 100%;
  margin: 0 0 1em;
  border-collapse: collapse;
  font-size: var(--fs-ui);
}
.prose thead th {
  text-align: left;
  font-weight: 600;
  color: var(--ink-2);
  border-bottom: 1px solid var(--line-2);
}
.prose th, .prose td {
  padding: 8px 12px 8px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.prose tr:last-child td { border-bottom: none; }
.prose td.mono, .prose td:has(> code) { font-family: var(--mono); }
.prose caption { caption-side: bottom; padding-top: 8px; font-size: var(--fs-meta); color: var(--ink-3); text-align: left; }

/* ── mark ─────────────────────────────────────────────────────────
   Search hits and highlights: the accent wash, the same one ::selection
   uses, so a highlight and a selection read as the same gesture. */
.prose mark {
  background: var(--accent-soft);
  color: var(--ink);
  padding: .05em .2em;
  border-radius: 3px;
}

/* ── media & figures ──────────────────────────────────────────── */
.prose img, .prose video { max-width: 100%; height: auto; border-radius: var(--r-2); }
.prose figure { margin: 0 0 1em; }
.prose figcaption { margin-top: 6px; font-size: var(--fs-meta); color: var(--ink-3); }

/* ── details ──────────────────────────────────────────────────── */
.prose details {
  margin: 0 0 1em;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  padding: 8px 12px;
}
.prose summary { cursor: pointer; font-size: var(--fs-ui); font-weight: 600; }
.prose summary::marker { color: var(--ink-3); }

/* ── footnotes / abbreviations ────────────────────────────────── */
.prose abbr[title] { text-decoration: underline dotted; text-underline-offset: 2px; cursor: help; }
.prose .footnotes { margin-top: 2em; padding-top: 1em; border-top: 1px solid var(--line); font-size: var(--fs-ui); color: var(--ink-2); }

/* ── .toc — a document's table of contents ────────────────────────
   A column BESIDE the reading measure, never inside it. Each link carries
   a 1px --line hairline on its left edge, stacked without gaps so the
   hairlines read as one rule; the current section swaps its segment to
   --accent and its ink to --ink — the marker moves, nothing else does.
   13px links in --ink-2. Depth is data-depth="2" / "3" on the link, never
   an inline indent. Sticky placement and width are the product's call. */
.toc { display: flex; flex-direction: column; min-height: 0; }
.toc__label { font-size: var(--fs-meta); color: var(--ink-3); padding: 0 0 8px 13px; }
.toc__list { display: flex; flex-direction: column; min-height: 0; overflow: auto; }
.toc__link {
  display: block;
  padding: 4px 0 4px 12px;
  border-left: 1px solid var(--line);
  font-size: var(--fs-ui);
  line-height: 1.45;
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 120ms, border-color 120ms;
}
.toc__link:hover { color: var(--ink); }
.toc__link--on { color: var(--ink); border-left-color: var(--accent); }
.toc__link[data-depth="2"] { padding-left: 24px; }
.toc__link[data-depth="3"] { padding-left: 36px; }