/* ============================================================
   jellyroll-content.css — the document column.
   ============================================================

   Replaces the element styling in `slim-docs.css`. Three structural changes
   from that file, each fixing a defect rather than restyling anything:

   1. SCOPED SELECTORS.  The old rule was `a { color: … !important }` — global
      and unscoped. `.sidebar-brand`, `.sidebar-tree .reference` and
      `.toc-tree a.reference` are all <a> elements, so it captured every
      navigation link too, and `!important` beat furo's own sidebar tokens
      regardless of specificity. That is what put blue-600 (#0841B4) on a
      near-black rail at 1.97:1, and visited blue-800 at 1.23:1.
      Everything here is scoped to `[role="main"]`, which is the content
      element in *both* themes — furo emits `<article role="main">`, Alabaster
      emits `<div class="body" role="main">`.

   2. UNDERLINES RESTORED.  The old `text-decoration: none !important` left
      colour as the sole indicator of a link, which fails WCAG 1.4.1 (Use of
      Colour) in body copy. furo already underlines links by default, so mostly
      this is a matter of not overriding it; it is declared explicitly below so
      the Alabaster fallback matches.

   3. NO `!important`, and no `.sphinxsidebar` block.  furo's content rules are
      all element selectors (0,0,1), so a `[role="main"] …` selector (0,1,1)
      wins on specificity alone. The sidebar rules moved to
      jellyroll-chrome.css and were ported to the navy palette for both themes.

   Colours come from the mode-aware tokens in jellyroll-modes.css, so this file
   is written once and is correct in light and dark.
*/

/* ─── The content column ─────────────────────────────────────────
   Type is set HERE, not on `body`. The old stylesheet set
   `body { font-size: 14px !important }`, which silently rescaled furo's
   percentage-based chrome (labels shrank ~20.5%) and its `em`-based rail widths
   (264px -> 210px). Anchoring content type to the content column instead leaves
   furo's 17.6px root intact for geometry while the prose still reads at
   JellyRoll's 14px/22px body step. See jellyroll-chrome.css, "Chrome type
   scale". */
.content,
div.body {
  font-family: var(--font-sans);
  font-size: var(--type-body-size);      /* 14px = 10.5pt */
  line-height: var(--type-body-line);    /* 22px */
  color: var(--color-text-body);
}

/* ─── Typography ─────────────────────────────────────────────────
   THE HEADING SCALE, CORRECTED 2 Sep 2026.

   This map was inherited from slim-docs.css, which shifted every heading one
   step down the typescale: h1 took JellyRoll's "heading" (24px), h2
   "subheading", h3 "cardtitle", h4 "label". That disagrees with the design
   system as this asset set itself ships it - jellyroll-tokens.css declares the
   base recipes `h1 { font: title }`, `h2 { font: heading }`, `h3 { font:
   subheading }`, `h4 { font: cardtitle }`, straight from the Figma typescale -
   and because those recipes are element selectors that this file then overrode
   at higher specificity, the tokens file's own intent never reached the page. A
   page title rendered at 24px where JellyRoll specifies 32px, and h4 collapsed
   into body size.

   The map is now one-to-one with jellyroll-tokens.css:

     h1  title       32px / 38px / 800     the page title
     h2  heading     24px / 36px / 800     RST section
     h3  subheading  20px / 32px / 800     RST subsection
     h4  cardtitle   18px / 28px / 800     RST sub-subsection
     h5  label       14px / 22px / 800     the deepest level RST reaches
     h6  small       12px / 18px / 800

   Margins keep the 4-pt grid and widen with the step, so the size change does
   not leave a 32px title crowding the paragraph under it. h5 and h6 are new: they
   were never declared at all, so each base theme styled them itself, wrongly and
   differently. Alabaster's `div.body h5 { font-family: Georgia, serif; font-size:
   100% }` made them the only headings on the fallback rendering in a serif; furo's
   `h5, h6 { font-family: var(--font-stack--headings); font-weight: 700 }` resolves
   to its own system sans at 700, so on the published site they were neither Acherus
   nor JellyRoll's 800.

   EACH RULE CARRIES A SECOND SELECTOR, `div.body hN`, AND IT IS NOT REDUNDANT.
   The note at the head of this file says `[role="main"]` is the content element
   in both themes, which is true of the markup but not sufficient for the
   cascade. Alabaster styles headings through `div.body h1 … div.body h6`, which
   is (0,1,2); `[role="main"] h1` is only (0,1,1), so on the Alabaster fallback
   Alabaster won every one of these properties and the whole corrected scale was
   inert - page titles still Georgia at 240%, still serif, still the wrong size.
   Naming `div.body hN` alongside it makes the two equal and this file loads
   later. Under furo `div.body` matches nothing and furo's own heading rules are
   bare elements (0,0,1), so the `[role="main"]` selector already wins there.
   Verified per property against both builds rather than reasoned about. */
[role="main"] h1,
div.body h1 {
  font: var(--type-title-weight) var(--type-title-size)/var(--type-title-line) var(--font-sans);
  color: var(--color-text-heading);
  margin: 0 0 var(--space-5) 0;
  border-bottom: none;
}

[role="main"] h2,
div.body h2 {
  font: var(--type-heading-weight) var(--type-heading-size)/var(--type-heading-line) var(--font-sans);
  color: var(--color-text-heading);
  margin: var(--space-10) 0 var(--space-4) 0;
  border-bottom: none;
}

[role="main"] h3,
div.body h3 {
  font: var(--type-subheading-weight) var(--type-subheading-size)/var(--type-subheading-line) var(--font-sans);
  color: var(--color-text-heading);
  margin: var(--space-8) 0 var(--space-3) 0;
}

[role="main"] h4,
div.body h4 {
  font: var(--type-cardtitle-weight) var(--type-cardtitle-size)/var(--type-cardtitle-line) var(--font-sans);
  color: var(--color-text-heading);
  margin: var(--space-6) 0 var(--space-2) 0;
}

[role="main"] h5,
div.body h5 {
  font: var(--type-label-weight) var(--type-label-size)/var(--type-label-line) var(--font-sans);
  color: var(--color-text-heading);
  margin: var(--space-5) 0 var(--space-2) 0;
}

[role="main"] h6,
div.body h6 {
  font: 800 var(--type-small-size)/var(--type-small-line) var(--font-sans);
  color: var(--color-text-heading);
  margin: var(--space-4) 0 var(--space-2) 0;
}

[role="main"] p {
  margin: 0 0 var(--space-4) 0;
}

/* The body line-height, restated at Alabaster's own specificity. `div.body`
   above sets 22px and it inherits correctly under furo, but Alabaster declares
   `div.body p, div.body dd, div.body li { line-height: 1.4em }` at (0,1,2),
   which beat the inherited value and squeezed every paragraph, list item and
   definition to 19.6px. Same class of miss as the heading scale below the
   comment above: a JellyRoll value that was set, was correct, and never reached
   the page. Inert under furo, which emits no `div.body`. */
[role="main"] p,
[role="main"] dd,
[role="main"] li,
div.body p,
div.body dd,
div.body li {
  line-height: var(--type-body-line);
}

[role="main"] strong,
[role="main"] b {
  font-weight: 800;          /* JellyRoll ExtraBold */
}

/* ─── Links (content only) ───────────────────────────────────────
   Light:  blue-600 8.66:1, visited blue-800 13.88:1, hover teal-700 6.69:1
   Dark:   blue-300 9.12:1, visited purple-300 9.41:1, hover teal-300 11.04:1
   All against their own canvas; all AA, most AAA. */
[role="main"] a {
  color: var(--color-text-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

[role="main"] a:visited {
  color: var(--color-text-link-visited);
}

[role="main"] a:hover {
  color: var(--color-text-link-hover);
  text-decoration-thickness: 2px;
}

/* Alabaster draws content links as `text-decoration: none` plus
   `border-bottom: 1px dotted #004B6B` — a hard-coded teal-blue that is not on
   any JellyRoll ramp. With the underline restored above it also doubled up.
   Removed so the underline is the only rule, in the token colour, in both
   themes. (furo does not do this, so the rule is inert there.) */
[role="main"] a.reference,
[role="main"] a.footnote-reference {
  border-bottom: none;
}

/* Headerlink anchors (the ¶ beside headings) are decoration, not prose — an
   underline on them is noise, and at full link strength they compete with the
   heading. furo hides them outright; Alabaster shows them, where they now
   inherit blue-600. Keep them quiet and reveal on hover. */
[role="main"] a.headerlink {
  text-decoration: none;
  color: var(--color-border-default);
}

[role="main"] h1:hover a.headerlink,
[role="main"] h2:hover a.headerlink,
[role="main"] h3:hover a.headerlink,
[role="main"] h4:hover a.headerlink,
[role="main"] a.headerlink:focus-visible {
  color: var(--color-text-link);
}

/* Visible keyboard focus in the content column (WCAG 2.4.7). JellyRoll's
   focus stroke is teal-600, which clears AA on the light canvas; the dark
   canvas needs the lighter step, so this follows the link-hover token. */
[role="main"] a:focus-visible {
  outline: 2px solid var(--color-text-link-hover);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* ─── Code ───────────────────────────────────────────────────────
   Inline literals get a JellyRoll surface. Code BLOCKS deliberately do not:
   furo generates a mode-aware `pygments.css` (`pygments_dark_style`, default
   `native`) and paints `.highlight` itself, with token colours chosen for that
   background. Forcing a JellyRoll surface underneath would leave the syntax
   palette contrast-mismatched, which is exactly the class of bug this asset
   set is fixing. Border and radius only, so the block still reads as a
   JellyRoll object. */
[role="main"] code.literal,
[role="main"] :not(pre) > code {
  font-family: var(--font-mono);
  font-size: var(--type-small-size);      /* 12px = 9pt */
  background: var(--jr-code-bg);
  border: 1px solid var(--jr-code-border);
  border-radius: var(--radius-xs);
  color: var(--color-text-body);
  padding: 2px 6px;
}

[role="main"] div.highlight,
[role="main"] pre {
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xs);
}

[role="main"] pre {
  font-family: var(--font-mono);
  font-size: var(--type-small-size);
  line-height: var(--type-small-line);
  padding: var(--space-4);
  margin: var(--space-4) 0;
  overflow-x: auto;
}

/* ─── Lists ──────────────────────────────────────────────────────
   Bullets are restored: `list-style: none` belonged to the sidebar rules,
   never to prose. */
[role="main"] ul,
[role="main"] ol {
  margin: 0 0 var(--space-4) 0;
  padding-left: var(--space-6);
}

[role="main"] li {
  margin-bottom: var(--space-2);
}

/* ─── Tables ─────────────────────────────────────────────────────
   `overflow: hidden` is what makes border-radius clip the header corners. */
[role="main"] table {
  border-collapse: collapse;
  width: 100%;
  margin: var(--space-4) 0;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

[role="main"] th {
  background: var(--color-surface-sunken);
  font: var(--type-label-weight) var(--type-label-size)/var(--type-label-line) var(--font-sans);
  color: var(--color-text-body);
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
}

[role="main"] td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
  color: var(--color-text-body);
}

[role="main"] tr:last-child td {
  border-bottom: none;
}

/* ─── Admonitions ────────────────────────────────────────────────
   Tints come from --jr-tint-*, which flip to the 900 steps in dark mode.
   Body ink holds 5.98:1 (caution/yellow, the worst case) to 12.24:1 on those.
   furo adds a box-shadow to `.admonition`; it is removed because JellyRoll is
   flat by default and reserves elevation for raised surfaces. */
[role="main"] .admonition,
[role="main"] .topic {
  padding: var(--space-4);
  margin: var(--space-4) 0;
  border-left: 4px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  background: var(--color-surface-sunken);
  box-shadow: none;
  color: var(--color-text-body);
}

[role="main"] .admonition.note,
[role="main"] .admonition.seealso {
  border-left-color: var(--color-border-information);
  background: var(--color-background-information);
}

[role="main"] .admonition.warning,
[role="main"] .admonition.caution,
[role="main"] .admonition.attention {
  border-left-color: var(--color-border-warning);
  background: var(--color-background-warning);
}

[role="main"] .admonition.danger,
[role="main"] .admonition.error {
  border-left-color: var(--color-border-alert);
  background: var(--color-background-alert);
}

[role="main"] .admonition.tip,
[role="main"] .admonition.hint,
[role="main"] .admonition.important {
  border-left-color: var(--color-border-success);
  background: var(--color-background-success);
}

[role="main"] .admonition-title,
[role="main"] p.admonition-title {
  font: var(--type-label-weight) var(--type-label-size)/var(--type-label-line) var(--font-sans);
  color: var(--color-text-heading);
  margin: 0 0 var(--space-2) 0;
  background: transparent;
}

/* ─── Images and figures ─────────────────────────────────────────
   The border is kept off diagrams-on-transparent by applying it only to
   figure images, as before. */
[role="main"] img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-subtle);
}

[role="main"] .figure,
[role="main"] figure {
  margin: var(--space-6) 0;
  text-align: center;
}

/* Captions use --color-text-subtle, which is the token whose value this asset
   set corrects: upstream grey-700 was 3.67:1 on white and failed WCAG AA for
   normal-size text. It now resolves to grey-800 (5.94:1) in light and grey-500
   (9.74:1) in dark. See jellyroll-modes.css. */
[role="main"] .figure .caption,
[role="main"] figcaption,
[role="main"] p.caption,
[role="main"] table > caption {
  font-size: var(--type-small-size);
  line-height: var(--type-small-line);
  color: var(--color-text-subtle);
  margin-top: var(--space-2);
}

/* ─── Page footer ───────────────────────────────────────────────
   `.bottom-of-page` is furo's; `.footer` is Alabaster's. Same token, so the
   same corrected contrast applies in both. */
.bottom-of-page,
div.footer {
  border-top: 1px solid var(--color-border-subtle);
  padding: var(--space-6) 0;
  margin-top: var(--space-10);
  color: var(--color-text-subtle);
  font-size: var(--type-small-size);
  line-height: var(--type-small-line);
}

.bottom-of-page a,
div.footer a {
  color: var(--color-text-link);
  text-decoration: underline;
}