/*
 * The documentation's design system.
 *
 * Built the same way as the storefront's stylesheet
 * (simrig-se-localized/backend/public/css/store.css): a plain static file,
 * tokens first, no build step. The token block below is a deliberate copy of
 * that file's — the two repos deploy separately, so an @import would break
 * local builds and tie the docs to the store's release cadence. store.css is
 * the source of truth; retune there first, then mirror here.
 *
 * Everything after the tokens targets Sphinx's own markup (the "basic" theme
 * plus docutils), following the component sheet in the Claude Design project:
 * headings, inline roles, admonitions, code, lists, tables, figures, quotes,
 * footnotes, object descriptions, badges, math, chrome.
 */

:root {
    /* Ink */
    --ink: #141414;
    --ink-soft: #4a4a4a;
    --ink-body: #5d5d5d;
    --ink-quiet: #6e6e6e;
    --ink-mute: #8a8a8a;
    --ink-faint: #9a9a9a;

    /* Surfaces */
    --canvas: #eceae7;
    --paper: #fff;
    --paper-dim: #fafafa;
    --paper-head: #f8f8f8;

    /* Lines */
    --line: #e6e6e6;
    --line-soft: #f2f2f2;
    --line-card: #ededed;
    --line-strong: #cfcfcf;
    --frame: #dcd9d5;

    /* Amber — attention, money, "action needed" */
    --accent: #f5a623;
    --accent-ink: #b8770c;
    --accent-deep: #7a4f05;

    --note-bg: #fafafa;
    --accent-bg: #fffaf0;
    --accent-line: #f0e2c4;
    --accent-tag: #fdf3e2;

    /* Green — good news */
    --ok: #157f3c;
    --ok-deep: #136433;
    --ok-bg: #e9f6ec;

    --font: "Segoe UI", system-ui, -apple-system, sans-serif;
    --mono: ui-monospace, Menlo, Consolas, monospace;

    --shadow-sheet: 0 18px 40px -28px rgba(0, 0, 0, .35);

    /* ---- Docs-only, from the documentation design ----------------------- */

    /* The shop's sheet width. Docs and store sit on the same page frame, so a
       reader crossing between them sees the sheet stay put. */
    --sheet-w: 1180px;
    --nav-w: 264px;
    --rail-w: 216px;
    --gutter: 40px;

    /* Body copy in the content column. */
    --text: #3a3a3a;

    /* Code */
    --code-bg: #fbfbfa;
    --code-ink: #a3401e;
    --code-num: #2b6cb0;
    --console-bg: #1c1c1c;
    --console-ink: #f0f0f0;
    --console-out: #9a9a9a;
    --console-prompt: #7fbf6a;

    /* Admonitions — one accent, one wash, one border each. */
    --adm-note: #b8770c;      --adm-note-bg: #fff8ea;  --adm-note-line: #f0dcae;
    --adm-tip: #157f3c;       --adm-tip-bg: #f2faf4;   --adm-tip-line: #c9e6d2;
    --adm-hint: #2b6cb0;      --adm-hint-bg: #f3f7fc;  --adm-hint-line: #cfdff0;
    --adm-important: #7a4bbd; --adm-imp-bg: #f7f4fc;   --adm-imp-line: #ddd2ee;
    --adm-warning: #c1600e;   --adm-warn-bg: #fdf4ec;  --adm-warn-line: #f2d6bd;
    --adm-danger: #b3261e;    --adm-danger-bg: #fdf1f0; --adm-danger-line: #f0c9c6;
    --adm-see: #6e6e6e;       --adm-see-bg: #fafafa;   --adm-see-line: #e6e6e6;
}

/* ---- Base ---------------------------------------------------------------- */

* { box-sizing: border-box; }

/* Reserve the scrollbar so short and long pages keep the same width — the docs
   are a lot of short pages next to a few very long ones. */
html {
    overflow-y: scroll;
    scroll-behavior: smooth;
    /* Anchors land below the sticky rails, not under them. */
    scroll-padding-top: 20px;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

body {
    margin: 0;
    background: var(--paper);
    font-family: var(--font);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
}

/* Every link colour in this file names :visited as well. Browsers keep their
   own visited colour for any link the author has not explicitly styled in that
   state, and the docs are full of links a reader has been to — left them out
   and half the navigation turns purple. */
a,
a:visited {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 2px;
}

a:hover { color: var(--accent-ink); }

img { max-width: 100%; height: auto; }

/* Guarded contact links: --cg-w holds the decoded width, so the reveal does
   not reflow the line. See conf.py's _guarded and simrig-docs.js. */
a.cg { display: inline-block; min-width: var(--cg-w, auto); }

/* Available to a screen reader, invisible on screen. */
.docs-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ---- The bands ----------------------------------------------------------- */

/* The page is three bands stacked edge to edge — header, body, footer — each
   painting its own background across the full viewport, with the content held
   to the sheet width inside it. Nothing floats on a canvas: the body band
   takes whatever height the footer leaves, so a short page still ends in the
   footer at the bottom of the window. */
.docs-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.docs-band > * {
    max-width: var(--sheet-w);
    margin: 0 auto;
}

/* Positioned: the phone drawer's panel hangs from this band's bottom edge.
   Below 800px the header is sticky instead, which positions it as well. */
.docs-band-header {
    position: relative;
    background: var(--paper-head);
    border-bottom: 1px solid var(--line);
}

/* The body band is itself a column so .docs-body can stretch to its full
   height — a grid only grows to its content, and the nav's tint has to reach
   the footer on a short page too. The left-nav grey carries on past the sheet
   to the edge of the screen: the band paints it up to where the nav column
   ends, calc'd from the centred sheet. */
.docs-band-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: linear-gradient(
        to right,
        var(--paper-dim) calc(50% - var(--sheet-w) / 2 + var(--nav-w)),
        var(--paper) 0
    );
}

.docs-body {
    flex: 1;
    width: 100%;
}

.site-footer-band { background: var(--ink); }

/* ---- Header -------------------------------------------------------------- */

/* Logo and site nav left, search centred, language and cart right — the shop's
   header with a search field grafted into the middle. The two 1fr tracks are
   what keeps the field centred on the page rather than on what is left over. */
.docs-header {
    display: grid;
    grid-template-columns: 1fr minmax(220px, 400px) 1fr;
    align-items: center;
    gap: 24px;
    padding: 16px var(--gutter);
}

/* No min-width: 0 here. Letting this group shrink below its content lets the
   nav slide silently under the search field instead of forcing the grid to
   admit it has run out of room. */
.docs-header-start {
    display: flex;
    align-items: center;
    gap: 24px;
}

/* flex: none on both — the logo carries `max-width: 100%` from the base rules,
   which would otherwise let a flex parent squeeze it to nothing. */
.brand {
    flex: none;
    display: flex;
    text-decoration: none;
}

.brand-logo {
    flex: none;
    display: block;
    height: 36px;
    width: auto;
    max-width: none;
}

/* The doors — the shop's .store-nav, under a docs name because the
   narrow-screen behaviour differs (between 800 and 1200px it takes a row of
   its own here, above the search field). One level of weight per row: the
   door we are behind is the bold one wearing the accent underline. */
.docs-sitenav {
    display: flex;
    align-items: center;
    gap: 22px;
}

.docs-sitenav a,
.docs-sitenav a:visited {
    padding-bottom: 4px;
    border-bottom: 2px solid transparent;
    font: 600 16px/1 var(--font);
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
}

.docs-sitenav a:hover { border-bottom-color: var(--line-strong); }

/* Where we are: bold, and the accent underline. */
.docs-sitenav a.is-current,
.docs-sitenav a.is-current:visited {
    font-weight: 700;
    color: var(--ink);
    border-bottom-color: var(--accent);
}

/* The burger drawer — the shop's own component (store.css), the phone's
   alternative to the second row. A <details>: the summary is the burger, the
   panel drops below the header band, and the places inside are rows, the same
   list one under the other. Everything here is display:none until the 800px
   block turns it on. */
.store-drawer { display: none; position: static; }

.store-drawer > summary {
    display: flex;
    align-items: center;
    list-style: none;
    padding: 6px 6px 6px 0;
    cursor: pointer;
}

.store-drawer > summary::-webkit-details-marker { display: none; }

.drawer-burger { position: relative; display: block; width: 24px; height: 24px; }

.drawer-burger i {
    position: absolute;
    left: 0;
    width: 24px;
    height: 2px;
    background: var(--ink);
}

.drawer-burger i:nth-child(1) { top: 5px; }
.drawer-burger i:nth-child(2) { top: 11px; }
.drawer-burger i:nth-child(3) { top: 17px; }

/* Open, the burger is the ×. */
.store-drawer[open] .drawer-burger i:nth-child(1) { top: 11px; transform: rotate(45deg); }
.store-drawer[open] .drawer-burger i:nth-child(2) { opacity: 0; }
.store-drawer[open] .drawer-burger i:nth-child(3) { top: 11px; transform: rotate(-45deg); }

/* The panel hangs from the header band, full width, over the page. */
.store-drawer-panel {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 30;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 24px 40px -24px rgba(0, 0, 0, .35);
}

/* One row per place, tall enough for a thumb; the page we are on is the
   bold one wearing the accent edge. */
.store-drawer-panel a,
.store-drawer-panel a:visited {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 0 18px;
    border-bottom: 1px solid var(--line-card);
    font: 600 16px/1 var(--font);
    color: var(--ink);
    text-decoration: none;
}

.store-drawer-panel a:last-child { border-bottom: 0; }

.store-drawer-panel a[aria-current="page"] {
    font-weight: 700;
    border-left: 3px solid var(--accent);
    padding-left: 15px;
}

/* Header search */

.docs-search {
    display: flex;
    align-items: center;
    gap: 9px;
    /* The field is taller than the logo, and it must not be what sets the
       row: the negative margin lets it overhang into the header's padding,
       so this header stays the height of the shop's. The 1200px block
       resets it — stacked, the field has a row of its own. */
    margin: -10px 0;
    padding: 0 13px;
    border: 1px solid var(--line-strong);
    background: var(--paper);
}

.docs-search:focus-within { border-color: var(--ink); }

.docs-search-icon {
    flex: none;
    display: block;
    color: var(--ink-faint);
}

.docs-search input {
    flex: 1;
    min-width: 0;
    padding: 10px 0;
    border: 0;
    background: none;
    font: 400 15px/1 var(--font);
    color: var(--ink);
}

.docs-search input:focus { outline: none; }

.docs-search input::placeholder { color: var(--ink-faint); }

.docs-search-key {
    padding: 2px 6px;
    border: 1px solid var(--line);
    font: 600 11px/1.4 var(--mono);
    color: var(--ink-faint);
}

/* Replaces the shortcut hint once the field holds a query — the search page's
   state in the design. */
.docs-search-clear {
    flex: none;
    padding: 2px 4px;
    border: 0;
    background: none;
    font: 400 14px/1 var(--font);
    color: var(--ink-faint);
    cursor: pointer;
}

.docs-search-clear:hover { color: var(--ink); }

.docs-search-key[hidden],
.docs-search-clear[hidden] { display: none; }

/* A field with something in it reads as active. */
.docs-search:has(input:not(:placeholder-shown)) {
    border-color: var(--ink);
}

.docs-header-end {
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    gap: 12px;
}

/* Language switcher — a styled <details>, so it works without JavaScript.
   Same component as the storefront's. */

.lang-switch { position: relative; }

.lang-switch summary {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 100%;
    padding: 9px 14px;
    border: 1px solid var(--line-strong);
    background: var(--paper);
    font: 400 15px/1 var(--font);
    color: #222;
    cursor: pointer;
    list-style: none;
    white-space: nowrap;
}

.lang-switch summary::-webkit-details-marker { display: none; }

/* The code is the phone's spelling of the language — the region chip's own
   compaction. Off until the 720px block swaps it in for the name. */
.lang-switch-code { display: none; }

.lang-switch summary::after {
    content: "\25BC";
    color: var(--accent);
    font-size: 11px;
}

.lang-switch ul {
    position: absolute;
    right: 0;
    z-index: 10;
    margin: 4px 0 0;
    padding: 6px 0;
    list-style: none;
    min-width: 160px;
    background: var(--paper);
    border: 1px solid var(--line-strong);
    box-shadow: var(--shadow-sheet);
}

.lang-switch a {
    display: block;
    padding: 8px 14px;
    font: 400 14px/1 var(--font);
    text-decoration: none;
    white-space: nowrap;
}

.lang-switch a:hover { background: var(--paper-dim); }

.lang-switch a[aria-current="true"] { font-weight: 700; }

/* Buttons — the storefront's, unchanged. */

.btn {
    display: inline-block;
    padding: 13px 20px;
    font: 600 14px/1 var(--font);
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    border: 1px solid transparent;
    background: none;
}

.btn-primary,
.btn-primary:visited { background: var(--ink); color: #fff; }
.btn-primary:hover { color: #fff; background: #000; }

.btn-secondary { border-color: var(--ink); color: var(--ink); }
.btn-secondary:hover { color: var(--ink); background: var(--paper-dim); }

.btn-cart {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    font-size: 15px;
}

.cart-count {
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    border-radius: 9px;
    background: var(--accent);
    color: var(--ink);
    font: 700 12px/18px var(--font);
    text-align: center;
}

.cart-count[hidden] { display: none; }

/* ---- The second row ------------------------------------------------------ */

/* The site's map under the doors — the store's own component (.store-subnav
   under .store-band-subnav): plain text on white, the page we are on
   weighted. Folded away for now, as in the shop; conf.py's SECOND_ROW brings
   it back. It wraps rather than running off the side: at the narrow end of
   the desktop widths the longer languages need more than one line. */
.docs-band-subnav { background: var(--paper); border-bottom: 1px solid var(--line-card); }

.store-subnav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 22px;
    padding: 12px var(--gutter);
}

.store-subnav a,
.store-subnav a:visited {
    font: 400 14px/1 var(--font);
    color: var(--ink-body);
    text-decoration: none;
    white-space: nowrap;
}

.store-subnav a:hover { color: var(--ink); }

.store-subnav a[aria-current="page"] { font-weight: 600; color: var(--ink); }

/* ---- The three-column body ----------------------------------------------- */

.docs-body {
    display: grid;
    grid-template-columns: var(--nav-w) minmax(0, 1fr) var(--rail-w);
}

/* Pages with no headings to list — the search page, a stub article — still
   hold the rail column open. The column is a fixed part of the frame, so the
   content reads at the same width on every page; the rail comes and goes
   inside it. */

/* The narrow-screen disclosure. Hidden entirely at desk width — the nav is
   simply always open there, so a focusable control with nothing to show would
   only be a stop on the way to the content. */
.docs-nav-toggle,
.docs-nav-open { display: none; }

/* ---- Left navigation ----------------------------------------------------- */

.docs-nav {
    background: var(--paper-dim);
    border-right: 1px solid var(--line-soft);
}

.docs-nav-inner {
    position: sticky;
    top: 0;
    max-height: 100vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 28px 22px 40px;
}

/* Toctree captions are the group labels. */
.docs-nav p.caption {
    margin: 0 0 9px;
    font: 600 11px/1 var(--font);
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ink-mute);
}

.docs-nav p.caption + ul { margin-bottom: 26px; }

.docs-nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.docs-nav li { margin: 0; }

.docs-nav a,
.docs-nav a:visited {
    display: block;
    padding: 6px 10px;
    border-left: 2px solid transparent;
    font: 400 14px/1.3 var(--font);
    color: var(--text);
    text-decoration: none;
}

.docs-nav a:hover {
    background: var(--line-soft);
    color: var(--ink);
}

/* The page you are on. */
.docs-nav li.current > a,
.docs-nav li.current > a:visited,
.docs-nav a.current:visited,
.docs-nav a.current {
    background: var(--paper);
    border-left-color: var(--accent);
    font-weight: 600;
    color: var(--ink);
}

/* Its sections, one level in. */
.docs-nav li ul a,
.docs-nav li ul a:visited {
    padding: 3px 10px 3px 22px;
    border-left: 0;
    font-size: 13px;
    color: var(--ink-quiet);
}

.docs-nav li ul li.current > a,
.docs-nav li ul li.current > a:visited,
.docs-nav li ul a.current:visited,
.docs-nav li ul a.current {
    background: none;
    font-weight: 600;
    color: var(--ink);
}

/* Quick links — the search page's sidebar block, ruled off from the toctree. */
.docs-nav-quick {
    margin-top: 4px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}

/* ---- Right rail — "On this page" ----------------------------------------- */

.docs-rail { border-left: 1px solid var(--line-soft); }

.docs-rail-inner {
    position: sticky;
    top: 0;
    max-height: 100vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 30px 22px 40px;
}

.docs-rail-title {
    margin: 0 0 10px;
    font: 600 11px/1 var(--font);
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ink-mute);
}

.docs-rail ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* The page's own h1 heads the local toc; the rail's title already says that,
   so unwrap the outer level rather than repeat it. */
.docs-rail > .docs-rail-inner > ul > li > a { display: none; }
.docs-rail > .docs-rail-inner > ul > li > ul { margin: 0; }

.docs-rail a,
.docs-rail a:visited {
    display: block;
    padding: 5px 0 5px 11px;
    border-left: 2px solid var(--line);
    font: 400 13px/1.4 var(--font);
    color: var(--ink-quiet);
    text-decoration: none;
}

.docs-rail a:hover { color: var(--ink); }

.docs-rail a.is-active,
.docs-rail a.is-active:visited {
    border-left-color: var(--accent);
    font-weight: 600;
    color: var(--ink);
}

/* Deeper headings step in. */
.docs-rail ul ul ul a { padding-left: 22px; }

/* ---- The content column --------------------------------------------------- */

.docs-main {
    min-width: 0;
    padding: 30px var(--gutter) 52px;
}

/* Breadcrumbs */

.docs-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    font: 400 13px/1 var(--font);
    color: var(--ink-mute);
}

.docs-crumbs a,
.docs-crumbs a:visited {
    color: var(--ink-mute);
    text-decoration: none;
}

.docs-crumbs a:hover { color: var(--accent-ink); text-decoration: underline; }

/* Previous / next */

.docs-updown {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-top: 40px;
    padding-top: 14px;
    border-top: 1px solid var(--line-soft);
}

.docs-updown a {
    display: flex;
    flex-direction: column;
    gap: 3px;
    max-width: 46%;
    text-decoration: none;
}

.docs-updown-next { text-align: right; margin-left: auto; }

.docs-updown-label {
    font: 400 12px/1 var(--font);
    letter-spacing: .04em;
    text-transform: capitalize;
    color: var(--ink-mute);
}

.docs-updown-title {
    font: 600 15px/1.3 var(--font);
    color: var(--ink);
}

.docs-updown a:hover .docs-updown-title { color: var(--accent-ink); }

/* ---- Footer -------------------------------------------------------------- */

/* The shop's site footer (store.css .site-footer): the site's map in columns,
   the social links and the ways to reach a human, over the company line, on
   the header's dark opposite. The link rules name :visited as well — see the
   base rules. */
.site-footer { padding: 44px var(--gutter) 26px; }

.site-footer-cols {
    display: grid;
    grid-template-columns: repeat(4, 1fr) 1.2fr;
    gap: 28px;
}

.site-footer-col { display: flex; flex-direction: column; gap: 8px; }

.site-footer-head {
    font: 700 14px/1 var(--font);
    letter-spacing: .06em;
    margin-bottom: 4px;
}

.site-footer-col a,
.site-footer-col a:visited,
.site-footer-col span {
    font: 400 14px/1.5 var(--font);
    color: #b9b4ae;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.site-footer-col .site-footer-head,
.site-footer-col a.site-footer-head:visited { font: 700 14px/1 var(--font); color: #fff; }

.site-footer-col a:hover,
.site-footer-col a.site-footer-head:hover { color: var(--accent); }

.site-footer-line {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 6px 24px;
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid #2b2b2b;
    font: 400 13px/1.6 var(--font);
    color: var(--ink-mute);
}

/* ==========================================================================
   01 — Headings and permalinks
   ========================================================================== */

.docs-content h1,
.docs-content h2,
.docs-content h3,
.docs-content h4,
.docs-content h5,
.docs-content h6 {
    margin: 0 0 14px;
    color: var(--ink);
    text-wrap: balance;
}

.docs-content h1 { font: 700 32px/1.1 var(--font); }

.docs-content h2 {
    margin-top: 38px;
    font: 700 20px/1.25 var(--font);
}

.docs-content h3 {
    margin-top: 30px;
    font: 600 17px/1.3 var(--font);
}

.docs-content h4 {
    margin-top: 26px;
    font: 600 12px/1.3 var(--font);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-mute);
}

.docs-content h5,
.docs-content h6 {
    margin-top: 22px;
    font: 600 14px/1.3 var(--font);
}

/* A rubric is an unnumbered heading — italic, quieter than a real one. */
.docs-content p.rubric {
    margin: 26px 0 10px;
    font: italic 600 15px/1.4 var(--font);
    color: var(--text);
}

/* The permalink stays visible but nearly invisible, and firms up on hover —
   discoverable without decorating every heading. */
.docs-content a.headerlink {
    visibility: visible;
    margin-left: 8px;
    font-weight: 400;
    font-size: .8em;
    color: #dcdcdc;
    text-decoration: none;
    opacity: 0;
    transition: opacity .12s ease-in-out;
}

.docs-content :hover > a.headerlink,
.docs-content a.headerlink:focus-visible { opacity: 1; }

.docs-content a.headerlink:hover { color: var(--accent-ink); }

/* ==========================================================================
   02 — Body text and inline roles
   ========================================================================== */

.docs-content {
    font: 400 16px/1.65 var(--font);
    color: var(--text);
}

.docs-content p {
    margin: 0 0 14px;
    text-wrap: pretty;
}

.docs-content strong { font-weight: 700; color: var(--ink); }

.docs-content a.reference { text-underline-offset: 3px; }

/* Off-site links get a marker — unless the link is wrapped around an image.
   Links to the rest of simrig.se are `reference site`, not `external`, and
   get none: see _ext/htmlwriter.py. */
.docs-content a.reference.external:not(:has(img))::after {
    content: " \2197";
    font-size: 11px;
    color: var(--ink-mute);
}

.docs-content a.reference.download::before {
    content: "\2193 ";
    color: var(--accent-ink);
}

/* Inline literal — :code:, ``literal``, and the default role. */
.docs-content code.literal,
.docs-content code.docutils {
    padding: 2px 6px;
    background: #f4f4f4;
    border: 1px solid var(--line);
    font: 400 .875em/1.4 var(--mono);
    color: var(--code-ink);
}

.docs-content a code.literal { color: var(--code-ink); }

/* GUI labels, menu paths, keystrokes, abbreviations. */
.docs-content .guilabel {
    padding: 3px 8px;
    background: #f0f0f0;
    border: 1px solid #dcdcdc;
    font: 600 .875em/1.3 var(--font);
    color: var(--ink);
}

.docs-content .menuselection { font-weight: 600; color: var(--ink); }

.docs-content kbd,
.docs-content .kbd {
    padding: 3px 7px;
    background: var(--paper);
    border: 1px solid var(--line-strong);
    border-bottom-width: 2px;
    font: 600 .8em/1.3 var(--mono);
    color: var(--ink);
}

.docs-content abbr[title] {
    border-bottom: 1px dotted var(--ink-faint);
    text-decoration: none;
    cursor: help;
}

.docs-content hr {
    margin: 34px 0;
    border: 0;
    border-top: 1px solid var(--line-soft);
}

/* ==========================================================================
   03 — Admonitions
   ========================================================================== */

.docs-content .admonition,
.docs-content div.admonition {
    margin: 20px 0;
    background: var(--adm-note-bg);
    border: 1px solid var(--adm-note-line);
    border-left: 3px solid var(--adm-note);
    padding: 9px 14px 13px;
}

.docs-content .admonition > .admonition-title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 7px;
    font: 700 12px/1.35 var(--font);
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--adm-note);
}

/* The round glyph. Its letter changes per type below. */
.docs-content .admonition > .admonition-title::before {
    content: "i";
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--adm-note);
    color: #fff;
    font: 700 10px/1 var(--font);
    letter-spacing: 0;
    text-transform: none;
}

/* Body copy hangs under the label, clear of the glyph. */
.docs-content .admonition > :not(.admonition-title) { margin-left: 25px; }

.docs-content .admonition > p:last-child { margin-bottom: 0; }

.docs-content .admonition p {
    font-size: 14px;
    line-height: 1.5;
}

.docs-content .admonition > .admonition-title + p { margin-top: 0; }

/* Tip — optional advice. */
.docs-content .admonition.tip {
    background: var(--adm-tip-bg);
    border-color: var(--adm-tip-line);
    border-left-color: var(--adm-tip);
}
.docs-content .admonition.tip > .admonition-title { color: var(--adm-tip); }
.docs-content .admonition.tip > .admonition-title::before {
    content: "\2726";
    background: var(--adm-tip);
}

/* Hint — a nudge. */
.docs-content .admonition.hint {
    background: var(--adm-hint-bg);
    border-color: var(--adm-hint-line);
    border-left-color: var(--adm-hint);
}
.docs-content .admonition.hint > .admonition-title { color: var(--adm-hint); }
.docs-content .admonition.hint > .admonition-title::before {
    content: "?";
    background: var(--adm-hint);
}

/* Important — easy to miss, costly to skip. */
.docs-content .admonition.important {
    background: var(--adm-imp-bg);
    border-color: var(--adm-imp-line);
    border-left-color: var(--adm-important);
}
.docs-content .admonition.important > .admonition-title { color: var(--adm-important); }
.docs-content .admonition.important > .admonition-title::before {
    content: "!";
    background: var(--adm-important);
}

/* Warning and caution — risk to the rig. */
.docs-content .admonition.warning,
.docs-content .admonition.caution {
    background: var(--adm-warn-bg);
    border-color: var(--adm-warn-line);
    border-left-color: var(--adm-warning);
}
.docs-content .admonition.warning > .admonition-title,
.docs-content .admonition.caution > .admonition-title { color: var(--adm-warning); }
.docs-content .admonition.warning > .admonition-title::before,
.docs-content .admonition.caution > .admonition-title::before {
    content: "!";
    background: var(--adm-warning);
}

/* Attention — read before continuing. */
.docs-content .admonition.attention > .admonition-title::before { content: "!"; }

/* Danger and error — injury, or a failure state. */
.docs-content .admonition.danger,
.docs-content .admonition.error {
    background: var(--adm-danger-bg);
    border-color: var(--adm-danger-line);
    border-left-color: var(--adm-danger);
}
.docs-content .admonition.danger > .admonition-title,
.docs-content .admonition.error > .admonition-title { color: var(--adm-danger); }
.docs-content .admonition.danger > .admonition-title::before {
    content: "!";
    background: var(--adm-danger);
}
.docs-content .admonition.error > .admonition-title::before {
    content: "\00D7";
    background: var(--adm-danger);
}

/* See also — pointers kept out of the body copy. */
.docs-content .admonition.seealso,
.docs-content div.seealso {
    background: var(--adm-see-bg);
    border-color: var(--adm-see-line);
    border-left-color: var(--adm-see);
}
.docs-content .seealso > .admonition-title { color: var(--adm-see); }
.docs-content .seealso > .admonition-title::before {
    content: "\2192";
    background: var(--adm-see);
}

/* Version markers — a rule and a tag, no box. */
.docs-content .versionadded,
.docs-content .versionchanged,
.docs-content .deprecated,
.docs-content .versionremoved {
    margin: 18px 0;
    padding: 8px 13px;
    background: var(--paper-dim);
    border-left: 3px solid var(--ink-mute);
    font-size: 14px;
}

.docs-content .versionadded > p,
.docs-content .versionchanged > p,
.docs-content .deprecated > p,
.docs-content .versionremoved > p { margin: 0; }

.docs-content .versionadded { border-left-color: var(--ok); }
.docs-content .versionchanged { border-left-color: var(--accent-ink); }
.docs-content .deprecated,
.docs-content .versionremoved { border-left-color: var(--adm-danger); }

.docs-content .versionmodified {
    font: 600 12px/1.5 var(--mono);
    color: var(--ink-quiet);
}

.docs-content .versionadded .versionmodified { color: var(--ok); }
.docs-content .versionchanged .versionmodified { color: var(--accent-ink); }
.docs-content .deprecated .versionmodified,
.docs-content .versionremoved .versionmodified { color: var(--adm-danger); }

/* ==========================================================================
   04 — Code blocks
   ========================================================================== */

.docs-content div[class^="highlight-"],
.docs-content div[class*=" highlight-"] {
    margin: 0 0 18px;
}

.docs-content div.highlight {
    background: var(--code-bg);
    border: 1px solid var(--line);
    overflow-x: auto;
}

.docs-content div.highlight pre {
    margin: 0;
    padding: 12px 14px;
    background: none;
    border: 0;
    font: 400 13px/1.75 var(--mono);
    color: var(--text);
}

/* Only the tokens the design actually names — everything else keeps the
   base style's choices. */
.docs-content .highlight .s, .docs-content .highlight .s1, .docs-content .highlight .s2,
.docs-content .highlight .sb, .docs-content .highlight .sc, .docs-content .highlight .sd,
.docs-content .highlight .se, .docs-content .highlight .sh, .docs-content .highlight .si,
.docs-content .highlight .sx, .docs-content .highlight .sr, .docs-content .highlight .ss {
    color: var(--code-ink);
}

.docs-content .highlight .m, .docs-content .highlight .mb, .docs-content .highlight .mf,
.docs-content .highlight .mh, .docs-content .highlight .mi, .docs-content .highlight .mo,
.docs-content .highlight .il {
    color: var(--code-num);
}

.docs-content .highlight .c, .docs-content .highlight .c1, .docs-content .highlight .cm,
.docs-content .highlight .cp, .docs-content .highlight .cs, .docs-content .highlight .ch {
    color: var(--ink-mute);
    font-style: italic;
}

/* A caption above the block, or the bar the script builds. */
.docs-content .code-block-caption,
.docs-content .docs-code-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 14px;
    background: var(--paper-head);
    border: 1px solid var(--line);
    border-bottom: 0;
    font: 600 12px/1.4 var(--mono);
    color: var(--text);
}

.docs-content .code-block-caption + div.highlight,
.docs-content .docs-code-bar + div[class^="highlight-"] div.highlight,
.docs-content .docs-code-bar + div[class*=" highlight-"] div.highlight {
    border-top: 0;
}

.docs-content .literal-block-wrapper { margin-bottom: 18px; }
.docs-content .literal-block-wrapper div[class^="highlight-"] { margin-bottom: 0; }

.docs-code-bar-end {
    display: flex;
    align-items: center;
    gap: 10px;
}

.docs-code-lang {
    font: 400 11px/1 var(--font);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-mute);
}

.docs-code-copy {
    padding: 3px 8px;
    border: 1px solid #d4d4d4;
    background: var(--paper);
    font: 600 11px/1.5 var(--font);
    color: var(--text);
    cursor: pointer;
}

.docs-code-copy:hover { border-color: var(--ink); }
.docs-code-copy[data-copied] { border-color: var(--ok); color: var(--ok-deep); }

/* Console transcripts run dark — a command you paste into a terminal reads
   differently from a config file you edit. */
.docs-content div.highlight-sh div.highlight,
.docs-content div.highlight-shell div.highlight,
.docs-content div.highlight-console div.highlight,
.docs-content div.highlight-bash div.highlight,
.docs-content div.highlight-powershell div.highlight,
.docs-content div.highlight-bat div.highlight,
.docs-content div.highlight-batch div.highlight,
.docs-content div.highlight-shell-session div.highlight {
    background: var(--console-bg);
    border-color: var(--console-bg);
}

.docs-content div.highlight-sh pre, .docs-content div.highlight-sh pre *,
.docs-content div.highlight-shell pre, .docs-content div.highlight-shell pre *,
.docs-content div.highlight-console pre, .docs-content div.highlight-console pre *,
.docs-content div.highlight-bash pre, .docs-content div.highlight-bash pre *,
.docs-content div.highlight-powershell pre, .docs-content div.highlight-powershell pre *,
.docs-content div.highlight-bat pre, .docs-content div.highlight-bat pre *,
.docs-content div.highlight-batch pre, .docs-content div.highlight-batch pre *,
.docs-content div.highlight-shell-session pre, .docs-content div.highlight-shell-session pre * {
    color: var(--console-ink);
}

/* The prompt, and anything the shell printed back. */
.docs-content div.highlight-console .gp,
.docs-content div.highlight-shell-session .gp { color: var(--console-prompt); }

.docs-content div.highlight-console .go,
.docs-content div.highlight-shell-session .go { color: var(--console-out); }

/* Line numbers */
.docs-content table.highlighttable {
    width: 100%;
    margin: 0;
    border: 0;
    display: block;
}

.docs-content td.linenos {
    background: none;
    border: 0;
    padding: 0;
}

.docs-content .linenos pre,
.docs-content span.linenos {
    color: #b0b0b0;
    padding-right: 10px;
    text-align: right;
    -webkit-user-select: none;
    user-select: none;
}

/* Highlighted lines inside a block. */
.docs-content .highlight .hll { background: #fff3d4; display: block; }

/* Doctest / parsed-literal blocks with no lexer. */
.docs-content pre.literal-block {
    margin: 0 0 18px;
    padding: 12px 14px;
    background: var(--code-bg);
    border: 1px solid var(--line);
    font: 400 13px/1.75 var(--mono);
    color: var(--text);
    overflow-x: auto;
}

/* ==========================================================================
   05 — Lists
   ========================================================================== */

/* The markers hang in this padding. Wide enough for "10." set in mono. */
.docs-content ul,
.docs-content ol {
    margin: 0 0 14px;
    padding-left: 26px;
}

.docs-content li { margin: 0 0 7px; }

/* A paragraph is the normal shape of a list item in reST; it must not add a
   second helping of vertical space. */
.docs-content li > p { margin-bottom: 0; }
.docs-content li > p + p { margin-top: 7px; }

/* A nested list inside an item needs a little air under it, but not a full
   paragraph's worth. */
.docs-content li > ul,
.docs-content li > ol {
    margin-top: 6px;
    margin-bottom: 6px;
}

/* The markers are the browser's own, coloured through ::marker rather than
   redrawn as pseudo-elements.

   A CSS counter cannot see <ol start="4">, and docutils emits exactly that
   every time a numbered list resumes after an image or a note — which happens
   on 23 pages here. A counter restarts those at 1. The real marker also keeps
   the browser's baseline alignment, so a smaller mono numeral still sits on the
   item's first line without being nudged. */

.docs-content ul { list-style-type: disc; }
.docs-content ul > li::marker { color: var(--accent); }

/* Second level and deeper: a hollow mark, quieter copy. Keyed off `li ul`
   rather than `ul ul` because the common shape in these pages is a bullet list
   inside a numbered step, which is just as much a second level. */
.docs-content li ul { list-style-type: circle; }
.docs-content li ul > li::marker { color: #c9c9c9; }

.docs-content li ul > li {
    font-size: 15px;
    color: var(--ink-body);
}

.docs-content ol > li::marker {
    font: 600 14px/1.7 var(--mono);
    color: var(--accent-ink);
}

/* docutils labels the enumeration it parsed; the browser needs it as a
   list-style-type. */
.docs-content ol.arabic { list-style-type: decimal; }
.docs-content ol.loweralpha { list-style-type: lower-alpha; }
.docs-content ol.upperalpha { list-style-type: upper-alpha; }
.docs-content ol.lowerroman { list-style-type: lower-roman; }
.docs-content ol.upperroman { list-style-type: upper-roman; }

/* Definition lists */

.docs-content dl { margin: 0 0 18px; }

.docs-content dl > dt {
    margin-bottom: 3px;
    font: 600 15px/1.35 var(--font);
    color: var(--ink);
}

.docs-content dl > dd {
    margin: 0 0 10px;
    padding-left: 14px;
    border-left: 2px solid var(--line-soft);
    font-size: 15px;
    color: var(--ink-body);
}

.docs-content dl > dd > p:last-child { margin-bottom: 0; }

/* Field lists — a two-column key/value grid, no rules.
   minmax(0, 1fr) and min-width: 0, not plain 1fr: a grid item's automatic
   minimum is its min-content, and a field body containing a code block has the
   longest unbreakable line as its min-content. Without these the block refuses
   to scroll and stretches the page instead. */
.docs-content dl.field-list {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 5px 14px;
}

.docs-content dl.field-list > dd { min-width: 0; }

.docs-content dl.field-list > dt {
    margin: 0;
    font: 600 14px/1.5 var(--font);
    color: var(--text);
}

.docs-content dl.field-list > dd {
    margin: 0;
    padding: 0;
    border: 0;
    font: 400 14px/1.5 var(--font);
    color: var(--ink-body);
}

.docs-content dl.field-list > dd > p { margin: 0; }

/* Option lists — a flag and what it does. */
.docs-content .option-list { display: grid; gap: 6px; }

.docs-content .option-list kbd,
.docs-content .option-list .option {
    padding: 0;
    background: none;
    border: 0;
    font: 400 13px/1.5 var(--mono);
    color: var(--code-ink);
    white-space: nowrap;
}

.docs-content .option-list .description {
    font: 400 14px/1.5 var(--font);
    color: var(--ink-body);
}

/* Glossary terms get the amber rule — they are linked from everywhere. */
.docs-content dl.glossary > dt {
    margin-top: 14px;
    padding: 13px 15px 4px;
    background: var(--paper-dim);
    border-left: 3px solid var(--accent);
}

.docs-content dl.glossary > dd {
    margin-top: 0;
    padding: 0 15px 13px;
    background: var(--paper-dim);
    border-left: 3px solid var(--accent);
}

/* ==========================================================================
   06 — Tables
   ========================================================================== */

/* Wide tables scroll inside the content column instead of stretching it. The
   scrolling belongs to a wrapper (_ext/tablescroll.py adds one to every
   table), because a table that is itself `display: block` lays its rows out
   in an anonymous box that shrinks to the contents — a narrow table then
   fills only the left part of its own full-width border. */
.docs-content .table-scroll {
    max-width: 100%;
    overflow-x: auto;
    margin: 0 0 20px;
}

.docs-content table.docutils,
.docs-content table.align-default {
    width: 100%;
    margin: 0;
    border: 1px solid var(--line-strong);
    border-collapse: collapse;
    font-size: 15px;
}

.docs-content table.docutils thead { background: var(--paper-head); }

/* docutils marks every table that did not ask for an alignment as
   .align-default, and basic.css reads that as text-align: center — so all the
   copy in every table ends up centred. Cells read left. */
.docs-content table.docutils th,
.docs-content table.docutils td {
    text-align: left;
}

.docs-content table.docutils th {
    padding: 11px 18px;
    border: 0;
    border-bottom: 1px solid var(--line);
    background: var(--paper-head);
    font: 600 12px/1.3 var(--font);
    letter-spacing: .07em;
    text-transform: uppercase;
    text-align: left;
    color: var(--ink-quiet);
    vertical-align: bottom;
}

.docs-content table.docutils td {
    padding: 12px 18px;
    border: 0;
    border-bottom: 1px solid var(--line-soft);
    vertical-align: top;
    /* Let long cells wrap — the docs have prose in tables, not just values. */
    white-space: normal;
}

/* Zebra, as the design draws it. */
.docs-content table.docutils tbody tr.row-even { background: var(--paper-dim); }

.docs-content table.docutils tbody tr:last-child td { border-bottom: 0; }

/* The stub column is the row's name. */
.docs-content table.docutils td.stub,
.docs-content table.docutils th.stub {
    font-weight: 600;
    color: var(--ink);
    text-transform: none;
    letter-spacing: 0;
    font-size: 15px;
}

/* Cells hold paragraphs; they must not add margins inside the row. */
.docs-content table.docutils td > p,
.docs-content table.docutils th > p { margin: 0; }

.docs-content table.docutils td > p + p { margin-top: 6px; }

.docs-content table caption,
.docs-content .table-wrapper > .caption {
    caption-side: top;
    padding: 0 0 8px;
    font: 600 13px/1.4 var(--font);
    text-align: left;
    color: var(--text);
}

/* ==========================================================================
   07 — Figures and images
   ========================================================================== */

.docs-content figure,
.docs-content div.figure {
    margin: 0 0 22px;
}

.docs-content figure img,
.docs-content div.figure img { display: block; }

.docs-content figcaption,
.docs-content div.figure p.caption {
    margin: 9px 0 0;
    font: 400 13px/1.5 var(--font);
    color: var(--ink-body);
    text-align: left;
}

.docs-content figcaption p { margin: 0; }

/* The legend is extra explanation, set apart from the caption. */
.docs-content .legend {
    margin-top: 9px;
    padding: 11px 14px;
    background: var(--paper-dim);
    border-left: 2px solid var(--line-soft);
    font: 400 13px/1.55 var(--font);
    color: var(--ink-quiet);
}

.docs-content .legend p:last-child { margin-bottom: 0; }

/* Standalone screenshots — 115 of them, so they carry the frame themselves. */
.docs-content > section > img,
.docs-content > section > p > img,
.docs-content li > img,
.docs-content dd > img {
    margin: 4px 0 18px;
    border: 1px solid var(--line);
}

.docs-content .align-center { margin-left: auto; margin-right: auto; }
.docs-content .align-right { margin-left: auto; }

/* ==========================================================================
   08 — Quotes, topics, sidebars
   ========================================================================== */

.docs-content blockquote {
    margin: 0 0 18px;
    padding-left: 16px;
    border-left: 3px solid var(--line-soft);
    color: var(--text);
}

.docs-content blockquote .attribution {
    font: 400 13px/1.4 var(--font);
    color: var(--ink-mute);
}

.docs-content .topic {
    margin: 20px 0;
    padding: 16px 18px;
    background: var(--paper-head);
}

.docs-content .topic > .topic-title {
    margin: 0 0 8px;
    font: 600 12px/1 var(--font);
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--ink-mute);
}

.docs-content .sidebar {
    float: right;
    width: 40%;
    margin: 4px 0 18px 24px;
    padding: 16px 18px;
    border: 1px solid var(--line-strong);
    border-top: 3px solid var(--ink);
    background: var(--paper);
    font-size: 14px;
}

.docs-content .sidebar > .sidebar-title {
    margin: 0 0 8px;
    font: 700 15px/1.2 var(--font);
    color: var(--ink);
}

/* ==========================================================================
   09 — Footnotes and citations
   ========================================================================== */

.docs-content a.footnote-reference,
.docs-content a.brackets {
    font: 600 .75em/1 var(--font);
    color: var(--accent-ink);
    text-decoration: none;
    vertical-align: super;
}

.docs-content aside.footnote-list,
.docs-content dl.footnote,
.docs-content div.citation {
    margin-top: 30px;
    padding-top: 12px;
    border-top: 1px solid var(--line-soft);
}

.docs-content aside.footnote,
.docs-content div.citation {
    display: flex;
    gap: 10px;
    margin: 0 0 8px;
    font: 400 13px/1.6 var(--font);
    color: var(--ink-body);
}

.docs-content aside.footnote > .label,
.docs-content div.citation > .label {
    flex: none;
    font: 600 12px/1.6 var(--font);
    color: var(--accent-ink);
    white-space: nowrap;
}

.docs-content aside.footnote p { margin: 0; }

.docs-content .fn-backref { text-decoration: none; }

/* ==========================================================================
   10 — Object descriptions (.. describe::, domain directives)
   ========================================================================== */

.docs-content dl.describe,
.docs-content dl.py,
.docs-content dl.c,
.docs-content dl.cpp,
.docs-content dl.js,
.docs-content dl.std {
    margin: 0 0 14px;
}

.docs-content dl.describe > dt,
.docs-content dl.py > dt,
.docs-content dl.std > dt,
.docs-content dt.sig {
    margin: 0;
    padding: 10px 14px;
    background: var(--paper-head);
    border: 1px solid var(--line);
    font: 400 14px/1.5 var(--mono);
    color: var(--text);
}

.docs-content dt.sig .sig-name,
.docs-content dt.sig .descname {
    font-weight: 700;
    color: var(--ink);
}

.docs-content dt.sig .sig-prename,
.docs-content dt.sig .descclassname { color: var(--ink-mute); }

.docs-content dt.sig .sig-param,
.docs-content dt.sig .sig-paren + .sig-param { color: var(--code-ink); }

/* The body sits in a box that continues the signature's frame. */
.docs-content dl.describe > dd,
.docs-content dl.py > dd,
.docs-content dl.std > dd,
.docs-content dt.sig + dd {
    margin: 0 0 14px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-top: 0;
    background: var(--paper);
    font-size: 15px;
    color: var(--text);
}

/* Nested describes step in without stacking frames on frames. */
.docs-content dl.describe dl.describe {
    margin: 12px 0 0;
    padding-left: 14px;
    border-left: 2px solid var(--line-soft);
}

.docs-content dl.describe dl.describe > dt {
    background: none;
    border: 0;
    padding: 0 0 4px;
    font-weight: 700;
}

.docs-content dl.describe dl.describe > dd {
    border: 0;
    padding: 0;
    margin-bottom: 10px;
}

.docs-content dl.describe dl.describe > dd > p:last-child { margin-bottom: 0; }

/* ==========================================================================
   11 — Badges, buttons, inline toctrees
   ========================================================================== */

.docs-content .toctree-wrapper > p.caption {
    margin: 26px 0 10px;
    font: 700 20px/1.25 var(--font);
    color: var(--ink);
}

.docs-content .toctree-wrapper ul {
    margin: 0 0 18px;
    padding: 0;
    border: 1px solid var(--line);
}

/* Opt in from the page with the toctree directive's own `class` option:

       .. toctree::
          :glob:
          :class: multi-column

          game-setup/*

   The list then flows into as many columns as fit and drops its frame. For
   `game-setup/*` on Supported Games — 74 entries, three thousand pixels of
   single file — that is the difference between a wall and a list. Asked for
   per toctree rather than inferred from a length, so a list only changes shape
   when a page says it should. */
.docs-content .toctree-wrapper.multi-column > ul {
    border: 0;
    columns: 240px;
    column-gap: 28px;
}

.docs-content .toctree-wrapper.multi-column > ul > li {
    break-inside: avoid;
}

.docs-content .toctree-wrapper.multi-column > ul > li > a {
    padding: 9px 10px;
}

.docs-content .toctree-wrapper li {
    margin: 0;
    padding: 0;
    list-style: none;
    border-bottom: 1px solid var(--line-soft);
}

.docs-content .toctree-wrapper li:last-child { border-bottom: 0; }

.docs-content .toctree-wrapper li > a {
    display: block;
    padding: 11px 15px;
    font: 600 14px/1.3 var(--font);
    text-decoration: none;
}

.docs-content .toctree-wrapper li > a:hover { background: var(--paper-dim); }

/* A nested level indents rather than nesting another frame. */
.docs-content .toctree-wrapper li ul {
    margin: 0;
    border: 0;
    border-top: 1px solid var(--line-soft);
}

.docs-content .toctree-wrapper li ul > li > a {
    padding-left: 32px;
    font-weight: 400;
    color: var(--ink-quiet);
}

/* ==========================================================================
   12 — Math
   ========================================================================== */

.docs-content .math,
.docs-content div.math {
    margin: 0 0 18px;
    padding: 18px 20px;
    background: var(--paper-dim);
    border: 1px solid var(--line-soft);
    overflow-x: auto;
}

.docs-content span.eqno {
    float: right;
    font: 400 14px/1 var(--mono);
    color: var(--ink-mute);
}

/* ==========================================================================
   13 — The search page
   ========================================================================== */

/* The field and the button are separate boxes side by side. */
.docs-searchpage {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 20px;
}

.docs-searchpage input {
    width: 420px;
    max-width: 100%;
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--line-strong);
    background: var(--paper);
    font: 400 15px/1 var(--font);
    color: var(--ink);
}

.docs-searchpage input:focus {
    outline: none;
    border-color: var(--ink);
}

.docs-searchpage .btn {
    height: 44px;
    padding: 0 22px;
    font: 600 15px/1 var(--font);
}

/* The hint and the summary searchtools writes below it are two elements — the
   h2 between them is out of flow — sharing one background and one amber rule so
   they read as the single note the design draws. */
.docs-content p.docs-searchhint,
#search-results p.search-summary {
    margin: 0;
    background: #faf9f8;
    border-left: 3px solid var(--accent);
}

.docs-content p.docs-searchhint {
    padding: 14px 16px;
    font: 400 14px/1.6 var(--font);
    color: var(--ink-soft);
}

/* Only pull the two together once there is a summary to pull. */
.docs-content:has(#search-results p.search-summary) p.docs-searchhint {
    padding-bottom: 0;
}

#search-results p.search-summary {
    padding: 6px 16px 14px;
    font: 400 13px/1.6 var(--font);
    color: var(--ink-mute);
}

/* "Search Results" — the page is already titled, so this is for screen readers
   only rather than removed outright. */
#search-results h2 {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

#search-results ul.search {
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid #f0f0f0;
}

#search-results ul.search > li {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin: 0;
    padding: 18px 0;
    border-bottom: 1px solid #f0f0f0;
}

#search-results ul.search > li > a,
#search-results ul.search > li > a:visited {
    font: 600 17px/1.35 var(--font);
    color: var(--ink);
    text-underline-offset: 3px;
    text-wrap: pretty;
}

/* The tail of a "Page > Section" hit, split out by the script. */
.docs-result-section {
    font: 400 13px/1.4 var(--font);
    color: var(--ink-mute);
}

#search-results p.context {
    margin: 0;
    font: 400 14px/1.65 var(--font);
    color: var(--ink-soft);
    text-wrap: pretty;
}

#search-results .highlighted {
    background: #fdf1d6;
    color: var(--ink);
    font-weight: 600;
}

/* Inside a result title the term is already bold; only the wash is wanted. */
#search-results ul.search > li > a .highlighted { font-weight: inherit; }

#search-progress {
    font: 400 12px/1 var(--font);
    color: var(--ink-mute);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* No room for the rail — the left nav still fits. */
@media (max-width: 1100px) {
    .docs-body { grid-template-columns: var(--nav-w) minmax(0, 1fr); }
    .docs-rail { display: none; }
}

/* The header runs out of room before the body does: brand, three nav links, a
   search field, the language menu and the cart need the sheet at its full
   1180 px, and the longer languages — "Dokumentation", "Winkelwagen",
   "Collegamenti" — need all of it. So the header stacks as soon as the sheet
   stops being full width, while the body is still comfortably two columns.
   Three rows: brand and the language/cart controls, then the site nav, then the
   search field. The start group dissolves so its two children can be placed
   independently. */
@media (max-width: 1200px) {
    .docs-header {
        grid-template-columns: auto 1fr;
        gap: 12px 16px;
        padding: 14px var(--gutter);
    }

    .docs-header-start { display: contents; }

    .brand { grid-column: 1; grid-row: 1; }

    .docs-header-end {
        grid-column: 2;
        grid-row: 1;
    }

    .docs-sitenav {
        grid-column: 1 / -1;
        grid-row: 2;
        gap: 16px;
        overflow-x: auto;
    }

    .docs-search,
    .docs-search-placeholder {
        grid-column: 1 / -1;
        grid-row: 3;
        margin: 0;
    }
}

/* One column. The nav becomes a disclosure driven by the checkbox in the
   markup, so it works with JavaScript off. */
@media (max-width: 860px) {
    :root { --gutter: 22px; }

    /* The nav is a disclosure above the content now, not a column. */
    .docs-band-body { background: var(--paper); }

    .docs-body { grid-template-columns: minmax(0, 1fr); }

    /* Off-screen rather than display:none, so it keeps its place in the tab
       order and can open the nav from the keyboard. */
    .docs-nav-toggle {
        display: block;
        position: absolute;
        width: 1px;
        height: 1px;
        margin: 0;
        opacity: 0;
        pointer-events: none;
    }

    .docs-nav-toggle:focus-visible + .docs-nav-open {
        outline: 2px solid var(--ink);
        outline-offset: -2px;
    }

    .docs-nav-open {
        display: block;
        padding: 12px var(--gutter);
        border-bottom: 1px solid var(--line);
        background: var(--paper-dim);
        font: 600 13px/1 var(--font);
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--ink-quiet);
        cursor: pointer;
    }

    .docs-nav-open::after {
        content: " \25BC";
        color: var(--accent);
        font-size: 10px;
    }

    .docs-nav {
        display: none;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .docs-nav-toggle:checked ~ .docs-nav { display: block; }

    .docs-nav-toggle:checked ~ .docs-nav-open::after { content: " \25B2"; }

    .docs-nav-inner {
        position: static;
        max-height: none;
        padding: 20px var(--gutter) 28px;
    }

    .docs-main { padding: 24px var(--gutter) 40px; }

    .docs-content h1 { font-size: 27px; }

    .docs-updown { flex-direction: column; gap: 16px; }
    .docs-updown a { max-width: 100%; }
    .docs-updown-next { text-align: left; margin-left: 0; }

    .docs-content .sidebar {
        float: none;
        width: auto;
        margin: 0 0 18px;
    }

}

/* A phone — the shop's own 720px break, so the two sites change shape at the
   same width. Mockup 1d: the worlds row does not survive, so the burger
   drawer replaces it and the crumb line replaces the Support row; the bar is
   burger, logo, language, cart in the shop's phone proportions, and the
   search field keeps a row of its own beneath — the docs are searched more
   than they are browsed. */
/* The header folds into the burger below 800px, as the shop's does — the
   doors stop fitting beside the logo, the language menu and the cart before
   the page itself narrows. simrig-docs.js watches the same width. */
@media (max-width: 800px) {
    .docs-header {
        grid-template-columns: auto auto 1fr;
        gap: 12px 14px;
        padding: 12px var(--gutter);
    }

    .docs-header > .store-drawer { display: block; grid-column: 1; grid-row: 1; }
    .brand { grid-column: 2; }
    .docs-header-end { grid-column: 3; }
    .docs-sitenav { display: none; }

    .docs-search,
    .docs-search-placeholder { grid-row: 2; }

    /* The second row, when it is shown, folds into the drawer too. */
    .docs-band-subnav { display: none; }

    /* The header follows the thumb, as the shop's does: stuck to the top of
       the viewport, slid off it by the distance the page has scrolled down
       and back on by the distance it has scrolled up. simrig-docs.js writes
       --head-shift as the finger moves; without it the band simply stays
       put. The drawer's panel hangs from the band, so it rides along. */
    .docs-band-header {
        position: sticky;
        top: 0;
        z-index: 20;
        transform: translateY(calc(-1 * var(--head-shift, 0px)));
    }

    /* Left half in, half out when the finger lifts, it finishes the move. */
    .docs-band-header.is-settling { transition: transform .18s ease-out; }

    @media (prefers-reduced-motion: reduce) {
        .docs-band-header.is-settling { transition: none; }
    }
}

/* A phone — the shop's own 720px break. */
@media (max-width: 720px) {
    /* The shop's phone inset, so the logo and the content share one left
       edge with the pages either side of the boundary. */
    :root { --gutter: 16px; }

    /* Mockup 1d's proportions for the rest of the bar: a 28px logo and a
       13px cart label, so the row fits 375px with the longest labels. */
    .brand-logo { height: 28px; }

    .docs-header-end { gap: 10px; }

    .btn-cart { padding: 0 12px; gap: 8px; font-size: 13px; }

    /* The language menu wears its code, the way the region chip does. The
       name stays in the accessibility tree — clipped, not removed — so the
       control still announces the language, not two letters. */
    .lang-switch summary { padding: 8px 11px; gap: 7px; }

    .lang-switch-code {
        display: inline;
        font: 700 12px/1 var(--mono);
        letter-spacing: .06em;
    }

    .lang-switch-name {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    /* The footer's five columns become two. */
    .site-footer { padding: 28px var(--gutter) 20px; }
    .site-footer-cols { grid-template-columns: 1fr 1fr; }
}

/* ---- Print --------------------------------------------------------------- */

@media print {
    .docs-header,
    .store-drawer,
    .docs-band-subnav,
    .docs-nav,
    .docs-rail,
    .docs-updown,
    .site-footer-band,
    .docs-nav-open { display: none; }

    .docs-band > * { max-width: none; }

    .docs-body { display: block; }
    .docs-main { padding: 0; }
}