/* ────────────────────────────────────────────────────────────────────────────
   Notes — a custom look for mdBook.  CSS only; no template changes.

   Written against mdBook 0.5.2 output (see the built HTML in public/).
   The visual reference was theme/custom.css from "Custom notes site styling.zip",
   which targeted mdBook 0.4; all chrome selectors below were re-derived from
   the 0.5.2 markup (e.g. #mdbook-menu-bar, #mdbook-searchbar, li.chapter-item
   > span.chapter-link-wrapper > a).

   book.toml:
     [output.html]
     additional-css = ["static/custom.css"]
     preferred-dark-theme = "coal"
   ──────────────────────────────────────────────────────────────────────────── */

/* Google Fonts: Newsreader (body), Public Sans (headings/UI), JetBrains Mono
   (code and labels).  Must stay the first rule of the file. */
@import url("https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400&family=Public+Sans:ital,wght@0,400;0,500;0,600;1,400&family=JetBrains+Mono:wght@400;500&display=swap");

/* ── Tokens ─────────────────────────────────────────────────────────────── */

/* Design tokens, light palette.  mdBook pins html { font-size: 62.5% }, so
   1rem = 10px; all rem values below are px / 10. */
:root {
    --paper:        #FBFAF7;   /* page background, cool paper */
    --paper-raised: #FFFFFF;   /* cards (sidebar, pre, search results) */
    --paper-sunk:   #F2F0EA;   /* recessed fills, hover fills */
    --ink:          #1C1B19;   /* primary text */
    --ink-2:        #514E48;   /* secondary text */
    --ink-3:        #6E6A61;   /* muted text, icons */
    --ink-4:        #B8B3A7;   /* faint text, borders on dark */
    --rule:         #E3DFD6;   /* hard rules */
    --rule-soft:    #EDEAE3;   /* soft rules, rails */
    --accent:       #A64B2A;   /* terracotta accent */
    --accent-soft:  #F6EBE5;   /* accent-tinted fill (active rows) */
    --accent-ink:   #7E3719;   /* accent at text contrast */
    --link-rule:    #E0C3B4;   /* link underline, terracotta-tinted */

    --serif: "Newsreader", Georgia, serif;
    --sans:  "Public Sans", system-ui, -apple-system, sans-serif;
    --mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

    /* mdBook's own knobs, retuned */
    --content-max-width: 720px;
    --mono-font: var(--mono);
    --searchbar-margin-block-start: 9px;
}

/* Design tokens, dark palette */
html.coal,
html.navy,
html.ayu {
    --paper:        #17171A;
    --paper-raised: #1E1E22;
    --paper-sunk:   #26262B;
    --ink:          #EDEAE3;
    --ink-2:        #B9B4AA;
    --ink-3:        #A29D92;
    --ink-4:        #605C55;
    --rule:         #33333A;
    --rule-soft:    #2A2A30;
    --accent:       #E08A5F;
    --accent-soft:  #33241D;
    --accent-ink:   #F0A87F;
    --link-rule:    #6B4A38;
}

/* mdBook theme variables, remapped so its built-in rules inherit the look.
   Light palette is on bare `html` unconditionally (an unstyled state must be
   unreachable for visitors whose localStorage holds an old theme choice) plus
   html.light/html.rust; the dark palette on html.coal/html.navy/html.ayu. */
html,
html.light,
html.rust {
    --bg: var(--paper);
    --fg: var(--ink);

    --sidebar-bg: transparent;   /* the sidebar is a floating card, not a slab */
    --sidebar-fg: var(--ink);
    --sidebar-non-existant: var(--ink-4);
    --sidebar-active: var(--accent);
    --sidebar-spacer: var(--rule-soft);

    --scrollbar: var(--ink-4);
    --icons: var(--ink-3);
    --icons-hover: var(--ink);
    --links: var(--accent);

    --inline-code-color: var(--accent-ink);
    --inline-code-bg: var(--paper-sunk);
    --code-bg: var(--paper-raised);
    --code-border: var(--rule);

    --theme-popup-bg: var(--paper-raised);
    --theme-popup-border: var(--rule);
    --theme-hover: var(--accent-soft);

    --quote-bg: var(--paper-sunk);
    --quote-border: var(--rule);
    --warning-border: #9A6B1F;

    --table-border-color: var(--rule);
    --table-header-bg: var(--paper-sunk);
    --table-alternate-bg: #FCFBF8;

    --searchbar-border-color: var(--rule);
    --searchbar-bg: var(--paper-raised);
    --searchbar-fg: var(--ink);
    --searchbar-shadow-color: rgb(28 27 25 / 10%);
    --searchresults-header-fg: var(--ink-3);
    --searchresults-border-color: var(--rule);
    --searchresults-li-bg: var(--accent-soft);
    --search-mark-bg: #F7E3B0;

    --color-scheme: light;
    /* Tuned so the (black) copy glyph renders in the accent */
    --copy-button-filter: invert(30%) sepia(100%) saturate(180%) hue-rotate(330deg) brightness(116%) contrast(181%);
    --copy-button-filter-hover: invert(35%) sepia(73%) saturate(202%) hue-rotate(332deg) brightness(93%) contrast(190%);
    --footnote-highlight: #C97B57;
    --overlay-bg: rgb(28 27 25 / 25%);

    --blockquote-note-color: #2F6DB1;
    --blockquote-tip-color: #3D7A44;
    --blockquote-important-color: #7A5FB8;
    --blockquote-warning-color: #9A6B1F;
    --blockquote-caution-color: #B03A34;

    --sidebar-header-border-color: var(--accent);
}

html.coal,
html.navy,
html.ayu {
    --bg: var(--paper);
    --fg: var(--ink);

    --sidebar-bg: transparent;
    --sidebar-fg: var(--ink);
    --sidebar-non-existant: var(--ink-4);
    --sidebar-active: var(--accent);
    --sidebar-spacer: var(--rule-soft);

    --scrollbar: var(--ink-4);
    --icons: var(--ink-3);
    --icons-hover: var(--ink);
    --links: var(--accent);

    --inline-code-color: var(--accent-ink);
    --inline-code-bg: var(--paper-sunk);
    --code-bg: var(--paper-raised);
    --code-border: var(--rule);

    --theme-popup-bg: var(--paper-raised);
    --theme-popup-border: var(--rule);
    --theme-hover: var(--accent-soft);

    --quote-bg: var(--paper-sunk);
    --quote-border: var(--rule);
    --warning-border: #D8A93C;

    --table-border-color: var(--rule);
    --table-header-bg: var(--paper-sunk);
    --table-alternate-bg: #1B1B1F;

    --searchbar-border-color: var(--rule);
    --searchbar-bg: var(--paper-raised);
    --searchbar-fg: var(--ink);
    --searchbar-shadow-color: rgb(0 0 0 / 35%);
    --searchresults-header-fg: var(--ink-3);
    --searchresults-border-color: var(--rule);
    --searchresults-li-bg: var(--paper-sunk);
    --search-mark-bg: #6B5428;

    --color-scheme: dark;
    /* Tuned so the (black) copy glyph renders in the accent */
    --copy-button-filter: invert(40%) sepia(90%) saturate(150%) hue-rotate(335deg) brightness(116%) contrast(185%);
    --copy-button-filter-hover: invert(55%) sepia(94%) saturate(130%) hue-rotate(338deg) brightness(96%) contrast(158%);
    --footnote-highlight: #C97B57;
    --overlay-bg: rgb(0 0 0 / 60%);

    --blockquote-note-color: #6EA9E8;
    --blockquote-tip-color: #7FBF88;
    --blockquote-important-color: #B39BE8;
    --blockquote-warning-color: #D8A93C;
    --blockquote-caution-color: #E87A72;

    --sidebar-header-border-color: var(--accent);
}

/* ── Page frame ────────────────────────────────────────────────────────── */

/* Body text is the serif stack; the chrome below opts back into sans. */
html {
    font-family: var(--serif);
}

body {
    font-size: 1.85rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

::selection {
    background-color: #F7DCC9;
}

html.coal ::selection,
html.navy ::selection,
html.ayu ::selection {
    background-color: #4A3428;
}

/* UI chrome: menu bar, sidebar, search, help popup */
#mdbook-menu-bar,
#mdbook-search-wrapper,
#mdbook-help-container,
.sidebar,
.sidebar-iframe-inner {
    font-family: var(--sans);
}

#mdbook-searchbar,
#mdbook-help-popup {
    font-family: var(--sans);
}

#mdbook-theme-toggle {
    display: none;
}

/* ── Menu bar ──────────────────────────────────────────────────────────── */

#mdbook-menu-bar {
    background-color: var(--bg);
    background-color: color-mix(in srgb, var(--bg) 84%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-block-end-color: var(--rule-soft);
    box-shadow: none;
}

#mdbook-menu-bar .icon-button,
#mdbook-menu-bar .right-buttons a {
    color: var(--ink-3);
    border-radius: 8px;
    transition: background-color 0.12s ease, color 0.12s ease;
}

#mdbook-menu-bar .icon-button:hover,
#mdbook-menu-bar .right-buttons a:hover {
    background-color: var(--paper-sunk);
    color: var(--ink);
}

#mdbook-menu-bar .menu-title {
    font-size: 1.35rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--ink-3);
}

/* ── Search ────────────────────────────────────────────────────────────── */

#mdbook-search-wrapper {
    font-size: 1.5rem;
}

#mdbook-searchbar {
    font-size: 1.5rem;
    padding: 11px 14px;
    border: 1px solid var(--rule);
    border-radius: 10px;
    box-shadow: none;
}

#mdbook-searchbar:focus,
#mdbook-searchbar.active {
    border-color: var(--accent);
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

#mdbook-searchresults-header {
    font-family: var(--mono);
    font-size: 1.1rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

#mdbook-searchresults li {
    font-size: 1.5rem;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid var(--rule-soft);
}

#mdbook-searchresults li.focus {
    border-color: var(--rule);
}

#mdbook-searchresults a:hover {
    text-decoration: underline;
}

#mdbook-searchresults span.teaser em {
    font-style: normal;
    background-color: var(--search-mark-bg);
}

/* ── Sidebar: a floating rounded card, not a slab ──────────────────────── */

.sidebar {
    background: transparent;
}

.sidebar .sidebar-scrollbox {
    height: 100%;
    box-sizing: border-box;
    /* The scrollbox is absolutely positioned, so it ignores .sidebar's
       padding (absolute elements position against the padding box).  Inset
       it explicitly to float the card on the paper surround. */
    top: 16px;
    bottom: 16px;
    left: 16px;
    right: 0;
    padding: 22px 12px 24px;
    background-color: var(--paper-raised);
    border: 1px solid var(--rule);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgb(28 27 25 / 4%), 0 12px 28px -18px rgb(28 27 25 / 28%);
    scrollbar-width: thin;
}

/* No-JS fallback: the sidebar is <iframe class="sidebar-iframe-outer" src="/toc/">
   and custom.css is loaded inside that document, so the card has to be drawn
   on the iframe body itself, with its own paper surround (the iframe's root
   background is opaque; the parent page's paper does not show through). */
.sidebar-iframe-inner {
    box-sizing: border-box;
    margin: 16px 0 16px 16px;
    min-height: calc(100vh - 32px);
    padding: 22px 12px 24px;
    background-color: var(--paper-raised);
    border: 1px solid var(--rule);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgb(28 27 25 / 4%), 0 12px 28px -18px rgb(28 27 25 / 28%);
}

.sidebar,
.sidebar-iframe-inner {
    font-size: 1.35rem;
    line-height: 1.4;
}

/* Nav rows: pill-shaped, the whole wrapper row is the pill */
.chapter {
    margin: 0;
    line-height: 1.4;
}

.chapter li.chapter-item {
    margin-block-start: 0.45em;
    line-height: 1.4;
}

.chapter > .chapter-item {
    margin-block-start: 0.75em;
}

.chapter > .chapter-item:first-child {
    margin-block-start: 0;
}

.chapter .chapter-link-wrapper {
    display: flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 8px;
    transition: background-color 0.12s ease;
}

.chapter .chapter-link-wrapper > a:first-child {
    flex: 1;
    font-size: 1.45rem;
    color: var(--sidebar-fg);
    text-decoration: none;
}

/* Top-level folders become uppercase mono labels.  There are no part titles
   in this book (SUMMARY.md has 1 top-level page and 5 top-level folders), so
   the labels are derived from structure: a chapter item that owns a section.
   They are real links, so they get hover/active states for discoverability.
   (These rules come before the hover rules below; equal-specificity hover
   rules must win so the label reacts to hovering.) */
.chapter > .chapter-item:has(> .section) {
    margin-block-start: 1.5em;
}

.chapter > .chapter-item:has(> .section) > .chapter-link-wrapper > a {
    font-family: var(--mono);
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--ink-3);
}

/* Depth-1 folders: semibold sans — uppercase mono at two nesting levels
   would be noisy. */
.chapter .section > .chapter-item:has(> .section) > .chapter-link-wrapper > a {
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* Nesting: a hairline rail rather than blank indentation */
.chapter .section {
    margin: 2px 0 6px 15px;
    padding-inline-start: 9px;
    border-inline-start: 1px solid var(--rule-soft);
    line-height: 1.35;
}

.chapter .section .chapter-item {
    margin-block-start: 0.3em;
}

.chapter .section .chapter-link-wrapper > a:first-child {
    font-size: 1.4rem;
}

.chapter .chapter-link-wrapper:hover {
    background-color: var(--paper-sunk);
}

.chapter .chapter-link-wrapper:hover > a:first-child {
    color: var(--ink);
}

.chapter .chapter-link-wrapper:has(a.active),
.chapter .chapter-link-wrapper:has(a.current-header) {
    background-color: var(--accent-soft);
}

.chapter .chapter-link-wrapper > a.active,
.chapter .chapter-link-wrapper > a.current-header {
    color: var(--accent-ink);
    font-weight: 600;
}

.chapter > .chapter-item:has(> .section) > .chapter-link-wrapper > a.active,
.chapter > .chapter-item:has(> .section) > .chapter-link-wrapper > a.current-header {
    color: var(--accent-ink);
    font-weight: 600;
}

/* Collapse chevron (only used in the on-this-page header list) */
.chapter .chapter-fold-toggle {
    color: var(--ink-4);
    transition: color 0.12s ease, opacity 0.12s ease;
}

.chapter .chapter-fold-toggle:hover {
    color: var(--ink-2);
    opacity: 1;
}

/* The on-this-page heading list (built by toc.js into the active row's li)
   is an ordinary nested section: the rail and pill-row look come from
   .chapter .section and .chapter .chapter-link-wrapper, which already apply
   to it.  The wrapper itself only tucks the list under the active row's pill
   and clears mdBook's default chrome.css treatment (22px margin, 8px padding,
   and a 4px --sidebar-header-border-color rail) that this restyle doesn't
   use.  The old rule's border-inline-start-width drew an accidental second
   rail next to the section's own: chrome.css's shorthand still supplied the
   style and colour, so clear the border entirely and let the section rail
   stand. */
.on-this-page {
    margin: 0.35em 0 0;
    padding: 0;
    border-inline-start: 0;
}

/* Same vertical rhythm as chapter-tree rows inside a section. */
.on-this-page .header-item {
    margin-block-start: 0.3em;
}

/* A heading that is itself a markdown link (e.g. `### [text](url)`) is
   invalid HTML, so mdBook emits the link as a second anchor and the parser
   un-nests it: the heading's first child ends up an empty `a.header`.
   toc.js copies only that anchor into the sidebar row, so the row has no
   text to display.  Hide only the row's own wrapper, not the containing
   <li>: toc.js nests deeper headings inside that same <li>, and those must
   stay visible (the text cannot be recovered from the DOM). */
.on-this-page .header-item:has(> .chapter-link-wrapper > a:empty) > .chapter-link-wrapper {
    display: none;
}

/* ── Prev/next navigation: dropped (this book has no reading sequences) ─── */

.nav-wrapper,
.nav-wide-wrapper,
.mobile-nav-chapters {
    display: none;
}

/* ── The note itself ─────────────────────────────────────────────────────
   Content-column styling.  Based on theme/custom.css from the visual
   reference, re-derived for mdBook 0.5.2 markup and the 10px rem base
   (1rem = 10px, so the reference's px values divide by 10). */

.content {
    font-family: var(--serif);
    font-size: 1.85rem;
    line-height: 1.65;
    color: var(--ink);
    text-wrap: pretty;
    overflow-wrap: break-word;
    padding-bottom: 4rem;
}

.content p,
.content ol,
.content ul {
    line-height: 1.65;
}

.content p {
    margin-block: 0 1.15em;
}

.content ol,
.content ul {
    margin-block: 0 1.15em;
    padding-inline-start: 1.35em;
}

.content li {
    margin: 0.32em 0;
    padding-inline-start: 0.15em;
}

.content li::marker {
    color: var(--ink-4);
}

.content :is(ul, ol) :is(ul, ol) {
    margin-block: 0.3em;
}

/* ── Headings ─────────────────────────────────────────────────────────── */

.content h1,
.content h2,
.content h3,
.content h4,
.content h5,
.content h6 {
    font-family: var(--sans);
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--ink);
    line-height: 1.2;
    text-wrap: balance;
}

/* h1 is the page title: it gets a hairline rule below it.  The h2 underline
   of the old stylesheet is gone. */
.content h1 {
    margin: 1.2em 0 0.5em;
    padding-bottom: 0.45em;
    border-bottom: 1px solid var(--rule);
    font-size: 3.4rem;
    letter-spacing: -0.028em;
}

.content h2 {
    margin: 2.3em 0 0.55em;
    font-size: 2.25rem;
}

.content h3 {
    margin: 1.9em 0 0.45em;
    font-size: 1.8rem;
}

/* h4 stays a plain sans heading at body size — the reference's uppercase
   mono label style reads wrong for ordinary subheadings like "Fly straight". */
.content h4 {
    margin: 1.7em 0 0.4em;
    font-size: 1.85rem;
}

.content h5,
.content h6 {
    margin: 1.7em 0 0.4em;
    font-size: 1.5rem;
}

.content h6 {
    font-size: 1.4rem;
}

/* Heading anchor links: hidden until hover, in the margin */
.content :is(h1, h2, h3, h4, h5, h6) > a.header {
    color: inherit;
    text-decoration: none;
    border-bottom: 0;
    position: relative;
}

.content :is(h1, h2, h3, h4, h5, h6) > a.header:hover::before {
    content: "#";
    position: absolute;
    left: -1.1em;
    color: var(--ink-4);
    font-family: var(--mono);
    font-weight: 400;
}

.content .header:link,
.content .header:visited {
    color: var(--fg);
    text-decoration: none;
}

/* ── Links ────────────────────────────────────────────────────────────── */

.content main a:not(.header) {
    color: var(--links);
    text-decoration: none;
    border-bottom: 1px solid var(--link-rule);
}

.content main a:not(.header):hover {
    color: var(--accent-ink);
    border-bottom-color: var(--accent);
}

/* Image links: the picture is the link, not a text underline */
.content main a:not(.header):has(> img) {
    border-bottom: 0;
}

/* Links inside headings: inherit the heading colour, no underline at rest,
   underline on hover.  (a.header anchor links are styled separately above;
   these rules come after the general link rules so they win at equal
   specificity.) */
.content :is(h1, h2, h3, h4, h5, h6) a:not(.header) {
    color: inherit;
    text-decoration: none;
    border-bottom: 0;
}

.content :is(h1, h2, h3, h4, h5, h6) a:not(.header):hover {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 0.05em;
    text-underline-offset: 0.12em;
}

.content strong,
.content b {
    font-weight: 600;
}

.content em {
    font-style: italic;
}

/* ── Code ─────────────────────────────────────────────────────────────── */

.content :not(pre) > code,
.content :not(pre) > .hljs {
    font-size: 0.82em;
    padding: 0.14em 0.38em;
    border-radius: 5px;
    border: 1px solid var(--rule-soft);
    background: var(--paper-sunk);
    color: var(--accent-ink);
}

/* Pre blocks: raised rounded cards */
.content pre {
    position: relative;
    box-sizing: border-box;
    margin-block: 1.75em;
    background: var(--paper-raised);
    border: 1px solid var(--rule);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgb(28 27 25 / 4%), 0 12px 28px -18px rgb(28 27 25 / 28%);
    overflow: hidden;
}

.content pre > code {
    display: block;
    padding: 18px 20px;
    font-size: 1.35rem;
    line-height: 1.62;
    background: transparent;
    border: 0;
    color: var(--ink);
    overflow-x: auto;
}

.content pre > .hljs {
    background: transparent;
}

/* Copy button: appears on hover */
.content pre > .buttons {
    opacity: 0;
    transition: opacity 0.15s ease;
}

.content pre:hover > .buttons {
    opacity: 1;
}

.content pre > .buttons button {
    background: var(--paper-sunk);
    border: 1px solid var(--rule);
    border-radius: 7px;
    color: var(--ink-3);
    cursor: pointer;
}

.content pre > .buttons button:hover {
    color: var(--ink);
    border-color: var(--ink-4);
}

/* Syntax colours tuned to the palette (highlight.js classes).  The dark
   palette needs its own shades: the light colours above are too dim
   against the dark paper, so each light group gets a lighter twin. */
.content .hljs-comment,
.content .hljs-quote {
    color: var(--ink-3);
    font-style: italic;
}

.content .hljs-keyword,
.content .hljs-selector-tag,
.content .hljs-literal {
    color: #8A3FA0;
}

.content .hljs-string,
.content .hljs-attr {
    color: #1F6B4C;
}

.content .hljs-number,
.content .hljs-symbol {
    color: var(--accent);
}

.content .hljs-title,
.content .hljs-function .hljs-title,
.content .hljs-name {
    color: #2A5DA8;
}

.content .hljs-type,
.content .hljs-built_in {
    color: #94551F;
}

html.coal .content .hljs-string,
html.coal .content .hljs-attr,
html.navy .content .hljs-string,
html.navy .content .hljs-attr,
html.ayu .content .hljs-string,
html.ayu .content .hljs-attr {
    color: #8FCFAE;
}

html.coal .content .hljs-keyword,
html.coal .content .hljs-selector-tag,
html.coal .content .hljs-literal,
html.navy .content .hljs-keyword,
html.navy .content .hljs-selector-tag,
html.navy .content .hljs-literal,
html.ayu .content .hljs-keyword,
html.ayu .content .hljs-selector-tag,
html.ayu .content .hljs-literal {
    color: #C79BE0;
}

html.coal .content .hljs-title,
html.coal .content .hljs-function .hljs-title,
html.coal .content .hljs-name,
html.navy .content .hljs-title,
html.navy .content .hljs-function .hljs-title,
html.navy .content .hljs-name,
html.ayu .content .hljs-title,
html.ayu .content .hljs-function .hljs-title,
html.ayu .content .hljs-name {
    color: #86B4F0;
}

html.coal .content .hljs-type,
html.coal .content .hljs-built_in,
html.navy .content .hljs-type,
html.navy .content .hljs-built_in,
html.ayu .content .hljs-type,
html.ayu .content .hljs-built_in {
    color: #D8A93C;
}

/* ── Tables ───────────────────────────────────────────────────────────── */

.content .table-wrapper {
    margin-block: 1.75em;
}

.content table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--sans);
    font-size: 1.5rem;
}

.content table th,
.content table td {
    padding: 9px 13px;
    border: 1px solid var(--rule);
    text-align: start;
}

.content table thead th {
    background: var(--paper-sunk);
    font-weight: 600;
    font-size: 1.2rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink-2);
}

.content table tbody tr:nth-child(2n) {
    background: var(--table-alternate-bg);
}

/* ── Blockquotes, rules, footnotes ────────────────────────────────────── */

/* Blockquotes: flush, marked by an accent rule, italic */
.content blockquote {
    margin: 1.75em 0;
    padding: 0.1em 0 0.1em 1.25em;
    border: 0;
    border-inline-start: 2px solid var(--accent);
    background: transparent;
    color: var(--ink-2);
    font-style: italic;
}

.content blockquote > :first-child {
    margin-block-start: 0.2em;
}

.content blockquote > :last-child {
    margin-block-end: 0.2em;
}

/* mdBook blockquote tags ([!NOTE] and friends) and the legacy .warning */
.content .blockquote-tag {
    padding: 0.2em 0 0.2em 1.25em;
    border-inline-start-width: 2px;
    background: transparent;
}

.content .warning {
    margin: 1.75em 0;
    padding: 0.25em 0 0.25em 1.25em;
    background: transparent;
}

.content hr {
    height: 1px;
    margin: 2.6em 0;
    border: 0;
    background: var(--rule);
}

.content .footnote-definition {
    font-family: var(--sans);
    font-size: 1.5rem;
    color: var(--ink-2);
}

.content .footnote-definition sup.footnote-definition-label {
    color: var(--accent);
}

/* ── Images ───────────────────────────────────────────────────────────── */

.content img,
.content video {
    height: auto;
    max-width: 100%;
}

/* The border and corner radius apply only to images that are the sole
   content of their paragraph — a blanket border looks wrong on small
   inline images.  (Images here are often link-wrapped, so cover both.) */
.content p > img:only-child,
.content p > a:only-child > img:only-child {
    display: block;
    box-sizing: border-box;
    border: 1px solid var(--rule);
    border-radius: 10px;
}

/* ── Task lists ───────────────────────────────────────────────────────── */

.content li > input[type="checkbox"] {
    width: 1em;
    height: 1em;
    margin-inline-end: 0.5em;
    accent-color: var(--accent);
    cursor: pointer;
    vertical-align: -0.08em;
}

/* ── Responsive ───────────────────────────────────────────────────────── */

@media only screen and (max-width: 620px) {
    :root {
        --page-padding: 18px;
    }

    /* The sidebar card flattens against the edge of the screen */
    .sidebar .sidebar-scrollbox,
    .sidebar-iframe-inner {
        border-radius: 0;
        border: 0;
        box-shadow: none;
    }

    .sidebar .sidebar-scrollbox {
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }

    .sidebar-iframe-inner {
        margin: 0;
        min-height: 100vh;
    }

    .content {
        font-size: 1.75rem;
    }

    .content h1 {
        font-size: 2.8rem;
    }
}

/* ── Print ────────────────────────────────────────────────────────────── */

@media print {
    html,
    html.light,
    html.rust,
    html.coal,
    html.navy,
    html.ayu {
        --bg: #fff;
        --fg: #000;
        --links: #4183c4;
        --link-rule: #c5c5c5;
        --color-scheme: light;

        /* Our own token layer, too: the theme class stays on <html> when
           printing, so without this a dark palette would print light ink
           on white paper. */
        --paper: #fff;
        --paper-raised: #fff;
        --paper-sunk: #f2f2f2;
        --ink: #000;
        --ink-2: #333;
        --ink-3: #555;
        --ink-4: #999;
        --rule: #ccc;
        --rule-soft: #ddd;
        --accent: #A64B2A;
        --accent-soft: #F6EBE5;
        --accent-ink: #7E3719;
        --table-alternate-bg: #FCFBF8;
    }

    /* Syntax colours: force the light set (these selectors match the dark
       palette overrides in specificity, and win by coming later) so code
       stays legible on white paper even when printing from a dark theme. */
    html:is(.coal, .navy, .ayu) .content .hljs-string,
    html:is(.coal, .navy, .ayu) .content .hljs-attr {
        color: #1F6B4C;
    }

    html:is(.coal, .navy, .ayu) .content .hljs-keyword,
    html:is(.coal, .navy, .ayu) .content .hljs-selector-tag,
    html:is(.coal, .navy, .ayu) .content .hljs-literal {
        color: #8A3FA0;
    }

    html:is(.coal, .navy, .ayu) .content .hljs-title,
    html:is(.coal, .navy, .ayu) .content .hljs-function .hljs-title,
    html:is(.coal, .navy, .ayu) .content .hljs-name {
        color: #2A5DA8;
    }

    html:is(.coal, .navy, .ayu) .content .hljs-type,
    html:is(.coal, .navy, .ayu) .content .hljs-built_in {
        color: #94551F;
    }

    .content {
        font-size: 11pt;
    }

    .content main {
        max-width: none;
    }

    .content pre,
    .content .table-wrapper {
        width: auto;
        margin-inline: 0;
    }

    .content pre {
        border-color: #ccc;
        box-shadow: none;
    }

    .content main a:not(.header) {
        color: #4183c4;
        text-decoration: none;
    }
}