/* ============================================================ markdown.css ============================================================ Rendered-markdown styling for the JR / R—Net design system. Companion to `SYSTEM.md §17` (Rendered Markdown). Imports the semantic layer from `colors_and_type.css` and styles the *bare* elements a markdown renderer emits — `h1`–`h6`, `p`, `ul`/`ol`, `pre`, `code`, `blockquote`, `hr`, `table` — with no class hooks required on the rendered output. Three scopes: .md — the rendered markdown body (720px measure). .doc — standalone preview chrome around it (stripe, eyebrow, footer). Per §17, chrome is supplied by the previewer, never by the markdown. body.vscode-body — the VS Code built-in markdown preview (§17.5). The body element rules carry both `.md` and this scope via `:is()`; the VS Code chrome is a separate section at the foot of this file. Discipline (§4.5 of proposals/graduated/markdown-preview.md): - No forked role variables. Every value composes from the §4.7 semantic layer in `colors_and_type.css`. - Code blocks and callouts re-derive the `.codeblock` / `.alert--note` treatment so a bare `
` / `
`
       matches its component counterpart without the class.

   Mode switches with ``.
   ============================================================ */

@import "colors_and_type.css";

/* ============================================================
   The markdown body — 720px prose measure
   ============================================================ */
:is(.md, body.vscode-body) {
  max-width: var(--content-max-prose);
  font-family: var(--font-body);
  color: var(--fg-1);
}

/* ─── Heading ramp — prose-scoped (§17, §4.1 of the proposal) ──
   h1/h2/h3 in Outfit at prose sizes; h4 reuses the system's
   mono-uppercase eyebrow rung; h5/h6 fall back to bold inline. */
:is(.md, body.vscode-body) h1,
:is(.md, body.vscode-body) h2,
:is(.md, body.vscode-body) h3 {
  font-family: var(--font-display);
  color: var(--fg-1);
}
:is(.md, body.vscode-body) h1 {
  font-size: var(--type-md-h1);
  font-weight: 600;
  letter-spacing: -1.2px;
  line-height: 1.12;
  margin: 0 0 var(--space-2) 0;
}
:is(.md, body.vscode-body) h2 {
  font-size: var(--type-md-h2);
  font-weight: 500;
  letter-spacing: -0.4px;
  line-height: 1.2;
  margin: var(--space-9) 0 var(--space-1) 0;
  padding-bottom: var(--space-2);
  border-bottom: var(--bw-hair) solid var(--rule);
}
:is(.md, body.vscode-body) h3 {
  font-size: var(--type-md-h3);
  font-weight: 500;
  letter-spacing: -0.2px;
  line-height: 1.3;
  margin: var(--space-6) 0 0 0;
}
/* h4 — the system's existing mono-uppercase eyebrow (reused rung). */
:is(.md, body.vscode-body) h4 {
  font-family: var(--font-mono);
  font-size: var(--type-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--accent);
  margin: var(--space-6) 0 0 0;
}
/* h5/h6 — no new rung; bold inline-weight text at body size. */
:is(.md, body.vscode-body) h5,
:is(.md, body.vscode-body) h6 {
  font-family: var(--font-body);
  font-size: var(--type-body);
  font-weight: 600;
  color: var(--fg-1);
  margin: var(--space-5) 0 0 0;
}

/* ─── Body prose ──────────────────────────────────────────── */
:is(.md, body.vscode-body) p {
  font-size: var(--type-body);
  line-height: 1.72;
  margin: var(--space-3) 0;
  max-width: none;
}
:is(.md, body.vscode-body) strong { font-weight: 600; color: var(--fg-1); }
:is(.md, body.vscode-body) em     { font-style: italic; }

/* Links carry meaning — exempt from §4.6 accent-count discipline
   (resolved as §7 resolves functional glyphs). */
:is(.md, body.vscode-body) a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  transition: border-color var(--dur-fast) var(--ease-instrument);
}
:is(.md, body.vscode-body) a:hover { border-bottom-color: var(--accent); }
:is(.md, body.vscode-body) a:focus-visible {
  outline: var(--focus-ring-w) solid var(--focus-ring);
  outline-offset: 2px;
}
:is(.md, body.vscode-body) small { color: var(--fg-3); }

/* ─── Lists ───────────────────────────────────────────────── */
:is(.md, body.vscode-body) ul,
:is(.md, body.vscode-body) ol {
  font-size: var(--type-body);
  line-height: 1.72;
  padding-left: var(--space-6);
  margin: var(--space-3) 0;
}
:is(.md, body.vscode-body) li { margin: var(--space-1) 0; }
:is(.md, body.vscode-body) li > ul,
:is(.md, body.vscode-body) li > ol { margin: var(--space-1) 0; }
:is(.md, body.vscode-body) ul li::marker { color: var(--accent-soft); }
:is(.md, body.vscode-body) ol li::marker {
  font-family: var(--font-mono);
  font-size: var(--type-body-sm);
  color: var(--fg-3);
}

/* ─── Code — re-derives the `.codeblock` treatment (§4.5) ─────
   Inline `code` gets a subtle chip; fenced `pre` matches the
   `controls.css` `.codeblock` surface exactly. */
:is(.md, body.vscode-body) :not(pre) > code {
  font-family: var(--font-mono);
  font-size: 0.86em;
  color: var(--accent);
  background: var(--bg-elev-2);
  padding: 1.5px 5px;
  border-radius: var(--radius-2);
}
:is(.md, body.vscode-body) pre {
  font-family: var(--font-mono);
  font-size: var(--type-code);
  line-height: 1.6;
  color: var(--fg-1);
  background: var(--bg-elev-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius-3);
  padding: 14px 16px;
  margin: var(--space-5) 0;
  overflow-x: auto;
}
:is(.md, body.vscode-body) pre code {
  background: none;
  padding: 0;
  font-size: inherit;
  color: inherit;
}

/* ─── Blockquote — re-derives the `.alert--note` callout (§4.5) ─
   Plain `> quote` reads as the note callout. A previewer may add
   `.ok` / `.warn` / `.alert` to map a quote onto the semantic
   layer (§4.4); the brand accent stays separate from status. */
:is(.md, body.vscode-body) blockquote {
  margin: var(--space-5) 0;
  padding: 14px 18px;
  background: var(--bg-callout);
  border-left: 3px solid var(--accent-warm);
  color: var(--fg-1);
}
:is(.md, body.vscode-body) blockquote p {
  font-size: var(--type-body-sm);
  margin: var(--space-2) 0;
  color: inherit;
}
:is(.md, body.vscode-body) blockquote p:first-child { margin-top: 0; }
:is(.md, body.vscode-body) blockquote p:last-child  { margin-bottom: 0; }
:is(.md, body.vscode-body) blockquote.ok    { background: var(--ok-bg-tint);    border-left-color: var(--ok); }
:is(.md, body.vscode-body) blockquote.warn  { background: var(--warn-bg-tint);  border-left-color: var(--warn); }
:is(.md, body.vscode-body) blockquote.alert { background: var(--alert-bg-tint); border-left-color: var(--alert); }

/* ─── Horizontal rule — hair rule ─────────────────────────── */
:is(.md, body.vscode-body) hr {
  border: 0;
  border-top: var(--bw-hair) solid var(--rule);
  margin: var(--space-7) 0;
}

/* ─── Tables — the R—Net sites-table pattern (`.table`) ─────── */
:is(.md, body.vscode-body) table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: var(--type-body-sm);
  color: var(--fg-1);
  margin: var(--space-5) 0;
}
:is(.md, body.vscode-body) th {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--fg-3);
  text-align: left;
  padding: 8px 12px;
  background: var(--bg-elev-2);
  border-bottom: 1px solid var(--rule-strong);
}
:is(.md, body.vscode-body) td {
  padding: 9px 12px;
  line-height: 1.5;
  border-bottom: 1px solid var(--rule);
}
:is(.md, body.vscode-body) tbody tr:last-child td { border-bottom: 0; }
/* Rebalance the final lines of a wrapped cell so a lone word is never
   stranded on its own line. Pure polish: never changes column widths,
   never affects single-line or numeric cells, ignored harmlessly where
   unsupported (Chromium + recent Safari yes, Firefox lagging — fallback
   is today's behavior). Harmless on the §17.5 strip: its cells are
   single-line tokens, which pretty leaves untouched. */
:is(.md, body.vscode-body) :is(td, th) { text-wrap: pretty; }

/* ─── Images ──────────────────────────────────────────────── */
:is(.md, body.vscode-body) img {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--rule);
}

/* ============================================================
   Preview chrome — supplied by the previewer, not the markdown
   ============================================================
   Form is fixed by the system; only content varies (from front
   matter). The classification stripe uses the `ground-deep`
   primitive directly — a fixed formal-document marker, not the
   brand accent. */
.doc {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 var(--space-7) var(--space-10);
}

/* Accent stripe — identical to the system's `.stripe-accent`. */
.doc-stripe {
  height: var(--bw-stripe);
  background: var(--accent);
}

/* §10 classification stripe — drawn only for formal documents. */
.doc-classstripe {
  height: 3px;
  background: var(--ground-deep);
}
.doc-classstripe[hidden] { display: none; }

/* Eyebrow — left: wordmark + label · right: classification + rev. */
.doc-eyebrow {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--type-meta);
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--fg-3);
  padding-top: var(--space-4);
}
.doc-eyebrow .accent   { color: var(--accent); }
.doc-eyebrow .classtag { color: var(--accent-warm); }

/* Title + metadata block sit at the head of the .md body. */
.md .doc-title-meta {
  font-family: var(--font-mono);
  font-size: var(--type-meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--fg-3);
  margin: var(--space-2) 0 0 0;
}

/* Deck — the §10.1 standfirst between the h1 and the metadata
   block. Body face, not mono: read, not scanned (§17.4). The one
   chrome region that carries a sentence rather than a token. */
.md .doc-deck {
  font-family: var(--font-body);
  font-size: var(--type-body);
  line-height: 1.6;
  color: var(--fg-2);
  max-width: 60ch;
  margin: var(--space-3) 0 0 0;
}

/* Footer — left: wordmark / sign-off · right: locating metadata. */
.doc-foot {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--type-meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--fg-3);
  border-top: var(--bw-hair) solid var(--rule);
  margin-top: var(--space-8);
  padding-top: var(--space-3);
}

/* ============================================================
   VS Code preview chrome (§17.5)
   ============================================================
   The built-in markdown preview renders into `body.vscode-body`
   with no `.doc` wrapper, so the chrome is drawn from the body
   box itself plus the front-matter table that the
   `bierner.markdown-yaml-preamble` extension renders as the
   body's first child. Form is fixed by the system; content
   varies via front matter (§17.4). The footer carries the fixed
   wordmark only — variable footer metadata waits for a richer
   target (§17.5, deferred).
   ============================================================ */

/* The preview body is the document column — centered, 720px from
   the shared body rule above, with `.doc`-equivalent padding. */
body.vscode-body {
  margin: 0 auto;
  padding: 0 var(--space-7) var(--space-10);
  box-sizing: border-box;
}

/* Accent stripe — mirrors `.doc-stripe`, drawn at the column top.
   `::before` is a pseudo-element, so the preamble table below is
   still `:first-child`. */
body.vscode-body::before {
  content: "";
  display: block;
  height: var(--bw-stripe);
  background: var(--accent);
  margin-bottom: var(--space-4);
}

/* Metadata strip — the front-matter table (§17.5)
   ------------------------------------------------------------
   The preamble extension emits front matter as one : a
   row of 
 keys above a row of  values. CSS reaches a
   column only by position — there is no text-content selector —
   so this target does not try to render the whole block. The
   strip is CAPPED at the first five columns, and §17.5 names a
   canonical key order that front-loads the flattened eyebrow:
   doc-id, node, class, status, rev — the identity and condition
   an editor wants at a glance.

   Everything past the cap — `description`, `title`, owner, the
   dates, any project keys — does not render here; it stays in
   the front matter for the standalone target and the project's
   tooling. The cap is what makes the strip safe: it cannot
   overrun its line, `description` can never blow it out, and
   the §17.4 "data, not chrome" boundary holds for the strip.

   Column one is shrink-wrapped and ruled off as the doc-id
   register; columns two–five are the condition readout. The
   `ground-deep` bottom rule is the §10 classification stripe. */
body.vscode-body > table:first-child {
  width: 100%;
  margin: 0 0 var(--space-7);
  border: 0;
  border-bottom: 3px solid var(--ground-deep);
}
/* The cap — only the first five columns render. */
body.vscode-body > table:first-child th:nth-child(n+6),
body.vscode-body > table:first-child td:nth-child(n+6) {
  display: none;
}
body.vscode-body > table:first-child th,
body.vscode-body > table:first-child td {
  font-family: var(--font-mono);
  font-size: var(--type-meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
  border: 0;
  background: none;
  padding: 0 var(--space-5) var(--space-1) 0;
}
body.vscode-body > table:first-child th {
  font-weight: 500;
  color: var(--fg-3);
}
body.vscode-body > table:first-child td {
  color: var(--accent-warm);
  padding-bottom: var(--space-3);
}

/* Column 1 — doc-id as the register mark. The canonical order
   leads with `doc-id` (§17.5); the column is shrink-wrapped to
   its content, ruled off with a hairline, and the value carries
   `--accent`, not `--accent-warm` — the same accent the
   standalone eyebrow gives `doc-id` at its right edge (§17.4).
   The identifier reads as a register in both targets; this rule
   is the strip's analog of the eyebrow edge. */
body.vscode-body > table:first-child th:first-child,
body.vscode-body > table:first-child td:first-child {
  width: 1%;
  border-right: var(--bw-hair) solid var(--rule);
}
body.vscode-body > table:first-child th:first-child + th,
body.vscode-body > table:first-child td:first-child + td {
  padding-left: var(--space-5);
}
body.vscode-body > table:first-child td:first-child {
  color: var(--accent);
  font-weight: 500;
}
/* A strip of only doc-id has no readout to rule off from. */
body.vscode-body > table:first-child th:first-child:last-child,
body.vscode-body > table:first-child td:first-child:last-child {
  border-right: 0;
}

/* Footer — hairline rule and a wordmark. The wordmark text is the
   one project-level knob this target exposes: a consumer project
   sets `--doc-footer` to a quoted string in a CSS file loaded after
   `markdown.css` (§17.5). `none` drops the footer; unset uses the
   system default. This is project-level only — per-document footer
   metadata is not reachable from CSS (§17.5, deferred). */
body.vscode-body::after {
  content: var(--doc-footer, "JR / R—NET ◇ CHARTS & VECTORS");
  display: block;
  font-family: var(--font-mono);
  font-size: var(--type-meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--fg-3);
  border-top: var(--bw-hair) solid var(--rule);
  margin-top: var(--space-8);
  padding-top: var(--space-3);
}