/* Ralph Site override layer for the ralph-docs Sphinx theme.
   Synced with app/assets/stylesheets/application.tailwind.css
   (daisyUI ralph-ops theme — dark, oklch teal accent).

   CUSTOMISATION RULES — READ BEFORE EDITING
   ------------------------------------------
   1. Edit docs/sphinx_overrides/conf.py for palette/typography preferences.
   2. Edit docs/sphinx_overrides/_themes/ralph-docs/page.html for structural changes.
   3. CSS here: injected Rails navbar/footer chrome, layout grid, component polish.
   4. Color variables reference the token bridge defined below — no raw OKLCH.
   5. Layer priority: daisyUI tokens > Tailwind utilities > custom CSS.
      Custom CSS only intervenes for: (a) Sphinx-emitted markup that no
      Tailwind class can target, (b) layout primitives unique to docs
      (.ralph-page-layout grid), (c) genuine pseudo-element/animation work.

   IMPORTANT defensive scoping: the ralph-app.css bundle (full landing-page
   stylesheet) is loaded after this file. Any class name that exists in the
   landing page (.hero, .badge, .card, etc.) WILL bleed into Sphinx output.
   Re-scope or reset such classes here. */

/* Force dark ralph-ops palette regardless of system preference */
html,
body,
:root {
    color-scheme: dark;
}

/* ── Reset bleed-through from ralph-app.css landing-page classes ───────────
   The `.hero` class on the landing page sets `display: grid`, breaking the
   Sphinx hero where children stack via normal block flow. `.ralph-document
   .hero` (specificity 0,2,0) wins against the bare `.hero` rule (0,1,0)
   without needing !important — keeping the cascade workable for any future
   per-page override. */
.ralph-document .hero {
    display: block;
    grid-template-columns: none;
    margin: 0 0 2.25rem;
    padding: 0;
    background: none;
    border: 0;
}

/* ── DaisyUI / Tailwind token bridge ───────────────────────────────────────
   Maps semantic variable names used throughout this file to daisyUI tokens
   so no raw colour literals appear in component rules below.
   ─────────────────────────────────────────────────────────────────────────*/
:root,
html,
body {
    /* Brand accent */
    --rw-color-brand:          var(--color-primary);
    --rw-color-brand-dim:      oklch(from var(--color-primary) l c h / 80%);
    --rw-color-brand-tint:     oklch(from var(--color-primary) l c h / 10%);
    --rw-color-brand-ring:     oklch(from var(--color-primary) l c h / 40%);

    /* Surfaces */
    --rw-bg-primary:           var(--color-base-100);
    --rw-bg-secondary:         var(--color-base-200);
    --rw-bg-tertiary:          var(--color-base-300);
    --rw-bg-hover:             var(--color-base-300);

    /* Borders */
    --rw-border:               oklch(from var(--color-base-300) l c h / 50%);
    --rw-border-strong:        var(--color-base-300);

    /* Text */
    --rw-text-primary:         var(--color-base-content);
    --rw-text-secondary:       oklch(from var(--color-base-content) l c h / 80%);
    --rw-text-muted:           oklch(from var(--color-base-content) l c h / 60%);

    /* Sidebar */
    --rw-sidebar-bg:           var(--color-base-100);
    --rw-sidebar-border:       oklch(from var(--color-base-300) l c h / 50%);

    /* Code */
    --rw-code-bg:              var(--color-base-200);
    --rw-code-inline-bg:       var(--color-base-300);

    /* Status */
    --rw-color-info:           var(--color-info);
    --rw-color-warning:        var(--color-warning);
    --rw-color-success:        var(--color-success);
    --rw-color-error:          var(--color-error);

    /* Font stacks */
    --rw-font-sans:            'IBM Plex Sans', 'Instrument Sans', system-ui, -apple-system, sans-serif;
    --rw-mono-stack:           'IBM Plex Mono', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    /* Navbar height — used by layout and sticky positioning */
    --rw-navbar-height:        4rem;

    /* Legacy bridge — keep for any Furo CSS still in generated HTML during transition */
    --color-brand-primary:     var(--color-primary);
    --color-brand-content:     var(--color-primary);
    --color-background-primary:   var(--color-base-100);
    --color-background-secondary: var(--color-base-200);
    --color-background-border:    oklch(from var(--color-base-300) l c h / 50%);
    --color-background-hover:     var(--color-base-300);
    --color-foreground-primary:   var(--color-base-content);
    --color-foreground-secondary: oklch(from var(--color-base-content) l c h / 80%);
    --color-foreground-muted:     oklch(from var(--color-base-content) l c h / 60%);
    --color-sidebar-background:   var(--color-base-100);
    --color-sidebar-background-border: oklch(from var(--color-base-300) l c h / 50%);
    --color-sidebar-caption-text: oklch(from var(--color-base-content) l c h / 60%);
    --color-sidebar-link-text:    oklch(from var(--color-base-content) l c h / 80%);
    --color-sidebar-link-text--top-level: var(--color-base-content);
    --color-sidebar-item-background--current: var(--color-base-200);
    --color-sidebar-item-background--hover:   var(--color-base-200);
    --color-sidebar-search-background: var(--color-base-200);
    --color-sidebar-search-border: oklch(from var(--color-base-300) l c h / 60%);
    --color-sidebar-search-icon:   oklch(from var(--color-base-content) l c h / 60%);
    --color-table-border:          oklch(from var(--color-base-300) l c h / 50%);
    --color-table-header-background: var(--color-base-200);
    --color-highlighted-background: oklch(from var(--color-primary) l c h / 18%);
    --color-highlighted-text:      var(--color-base-content);
    --color-highlight-on-target:   oklch(from var(--color-primary) l c h / 12%);
    --color-code-background:       var(--color-base-200);
    --color-code-foreground:       var(--color-base-content);
    --color-inline-code-background: var(--color-base-300);
    --color-card-background:       var(--color-base-200);
    --color-card-border:           oklch(from var(--color-base-300) l c h / 50%);
    --color-card-marginals-background: var(--color-base-300);
    --color-admonition-background: var(--color-base-200);
    --color-admonition-title--note:       var(--color-info);
    --color-admonition-title--warning:    var(--color-warning);
    --color-admonition-title--tip:        var(--color-primary);
    --color-admonition-title--important:  var(--color-error);
    --color-admonition-title--danger:     var(--color-error);
    --color-admonition-title--seealso:    var(--color-secondary);
    --color-admonition-title--success:    var(--color-success);
    --color-admonition-title-background--note:      oklch(from var(--color-info) l c h / 12%);
    --color-admonition-title-background--warning:   oklch(from var(--color-warning) l c h / 12%);
    --color-admonition-title-background--tip:       oklch(from var(--color-primary) l c h / 12%);
    --color-admonition-title-background--important: oklch(from var(--color-error) l c h / 12%);
    --color-admonition-title-background--danger:    oklch(from var(--color-error) l c h / 12%);
    --color-admonition-title-background--seealso:   oklch(from var(--color-secondary) l c h / 12%);
    --color-admonition-title-background--success:   oklch(from var(--color-success) l c h / 12%);
    --font-stack:             var(--rw-font-sans);
    --font-stack--monospace:  var(--rw-mono-stack);
    --rails-docs-shell-height: var(--rw-navbar-height);
}

/* ── Base typography ────────────────────────────────────────────────────── */
body {
    background-color: var(--rw-bg-primary);
    color: var(--rw-text-primary);
    font-family: var(--rw-font-sans);
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.6;
    /* `clip` (not `hidden`) — preserves programmatic scroll for assistive tech
       and avoids creating a new scrolling box that could trap inner content
       like wide tables that have their own .table-wrapper overflow. */
    overflow-x: clip;
}

/* Heading hierarchy — restored after Tailwind preflight nukes browser defaults */
.ralph-document h1 { font-size: 2.25em; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; }
.ralph-document h2 { font-size: 1.5em;  font-weight: 600; line-height: 1.3; }
.ralph-document h3 { font-size: 1.2em;  font-weight: 600; line-height: 1.4; }
.ralph-document h4 { font-size: 1.05em; font-weight: 600; line-height: 1.4; }
.ralph-document h5 { font-size: 0.95em; font-weight: 600; line-height: 1.4; text-transform: uppercase; letter-spacing: 0.04em; }
.ralph-document h6 { font-size: 0.85em; font-weight: 600; line-height: 1.4; text-transform: uppercase; letter-spacing: 0.06em; color: var(--rw-text-muted); }

.ralph-document h1,
.ralph-document h2,
.ralph-document h3,
.ralph-document h4,
.ralph-document h5,
.ralph-document h6 {
    color: var(--rw-text-primary);
    text-wrap: balance;
}

.ralph-document h1 { margin: 0 0 1rem; }
.ralph-document h3 { margin: 2rem 0 0.625rem; }
.ralph-document h4 { margin: 1.5rem 0 0.5rem; }

/* Sphinx renders multiple top-level sections each as h1.
   Visually demote any h1 that is NOT the first section's h1 to h2 size,
   and apply an accent rule so it reads as a section break. */
.ralph-document h2,
.ralph-document section ~ section > h1,
.ralph-document section ~ section > .hero ~ h1 {
    margin-top: 2.75rem;
    padding-top: 1.5rem;
    position: relative;
}

.ralph-document h2::before,
.ralph-document section ~ section > h1::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 2.5rem;
    height: 2px;
    background: linear-gradient(90deg, var(--rw-color-brand), transparent);
    border-radius: 2px;
}

/* Subsequent h1s only need to look like h2s — drop the giant size */
.ralph-document section ~ section > h1 {
    font-size: 1.5em;
    font-weight: 600;
    letter-spacing: -0.005em;
}

/* Lead paragraph after page h1 — slightly larger, muted */
.ralph-document > section > h1 + p,
.ralph-document > section:first-child > h1 + p {
    font-size: 1.0625rem;
    color: var(--rw-text-secondary);
    margin-top: 0.25rem;
    margin-bottom: 1.5rem;
}

/* DaisyUI resets links — restore readable colour */
.ralph-document a,
.ralph-sidebar-nav a {
    color: var(--rw-color-brand);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

.ralph-document a:hover,
.ralph-sidebar-nav a:hover {
    color: oklch(from var(--color-primary) calc(l + 0.06) c h);
    text-decoration-color: oklch(from var(--color-primary) calc(l + 0.06) c h);
}

/* ── Hide visible toctree dump on index pages ─────────────────────────────
   Sphinx renders every `.. toctree::` block in the body as a flat link
   list, even when the same content is already in the sidebar. The sidebar
   is the canonical navigation — body toctrees are noise. */
.ralph-document .toctree-wrapper {
    display: none;
}

/* When an author truly wants an in-body toctree (rare), they can opt in
   with `.. container:: visible-toctree` wrapping the directive. */
.ralph-document .visible-toctree .toctree-wrapper {
    display: block;
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
    background: var(--rw-bg-secondary);
    border: 1px solid var(--rw-border);
    border-radius: 0.625rem;
}

/* Bullet/numbered lists — Tailwind preflight strips list-style; restore */
.ralph-document ul,
.ralph-document ol {
    list-style-position: outside;
    padding-left: 1.5rem;
    margin: 0.75rem 0;
}
.ralph-document ul { list-style-type: disc; }
.ralph-document ol { list-style-type: decimal; }
.ralph-document li > p { margin: 0.25rem 0; }
.ralph-document li::marker { color: var(--rw-text-muted); }
.ralph-document ul ul,
.ralph-document ul ol,
.ralph-document ol ul,
.ralph-document ol ol { margin: 0.25rem 0; }

/* Paragraph spacing — Tailwind preflight strips browser margins */
.ralph-document p { margin: 0.875rem 0; }
.ralph-document hr {
    border: 0;
    height: 1px;
    background: var(--rw-border);
    margin: 2rem 0;
}

/* Definition lists in prose */
.ralph-document dl:not(.py):not(.std):not(.rst):not(.field-list) > dt {
    font-weight: 600;
    color: var(--rw-text-primary);
    margin-top: 0.875rem;
}
.ralph-document dl:not(.py):not(.std):not(.rst):not(.field-list) > dd {
    margin: 0.25rem 0 0.875rem 1.25rem;
    color: var(--rw-text-secondary);
}

/* Blockquote — quiet rail, not a card. Markdown docs commonly use these as
   callouts, so don't force italic. */
.ralph-document blockquote {
    margin: 1.25rem 0;
    padding: 0.5rem 0 0.5rem 1.125rem;
    border-left: 3px solid oklch(from var(--color-primary) l c h / 50%);
    background: oklch(from var(--color-primary) l c h / 4%);
    color: var(--rw-text-secondary);
    border-radius: 0 0.375rem 0.375rem 0;
}

.ralph-document blockquote p:first-child { margin-top: 0; }
.ralph-document blockquote p:last-child  { margin-bottom: 0; }

/* ── Three-panel page layout ────────────────────────────────────────────── */

/* Skip link — visually hidden until focused */
.ralph-skip-link {
    position: absolute;
    top: -100%;
    left: 1rem;
    z-index: 9999;
    padding: 0.5rem 1rem;
    background: var(--rw-color-brand);
    color: var(--color-primary-content);
    border-radius: 0 0 0.5rem 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: top 0.1s;
}

.ralph-skip-link:focus {
    top: 0;
}

.ralph-announcement {
    background: oklch(from var(--color-warning) l c h / 15%);
    border-bottom: 1px solid oklch(from var(--color-warning) l c h / 30%);
    padding: 0.625rem 1.5rem;
    text-align: center;
    font-size: 0.875rem;
    color: var(--rw-text-primary);
}

/* Outer layout: sidebar | main */
.ralph-page-layout {
    display: grid;
    grid-template-columns: 18rem 1fr;
    min-height: calc(100dvh - var(--rw-navbar-height));
    align-items: start;
}

/* Left sidebar */
.ralph-sidebar {
    position: sticky;
    top: var(--rw-navbar-height);
    height: calc(100dvh - var(--rw-navbar-height));
    overflow-y: auto;
    overflow-x: hidden;
    border-right: 1px solid var(--rw-sidebar-border);
    background: var(--rw-sidebar-bg);
    scrollbar-width: thin;
    scrollbar-color: var(--rw-border) transparent;
}

.ralph-sidebar-scroll {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-bottom: 3rem;
}

.ralph-sidebar-brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--rw-sidebar-border);
}

.ralph-sidebar-brand-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: -0.01em;
    color: var(--rw-text-primary) !important;
    text-decoration: none !important;
}

.ralph-sidebar-brand-mark {
    display: inline-block;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--rw-color-brand);
    box-shadow: 0 0 0 2px var(--rw-color-brand-tint);
}

.ralph-sidebar-brand-link:hover {
    color: var(--rw-color-brand) !important;
}

.ralph-sidebar-close {
    display: none; /* desktop: hidden; mobile breakpoint enables */
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.375rem;
    color: var(--rw-text-muted);
    cursor: pointer;
    transition: background 120ms, color 120ms;
}

.ralph-sidebar-close:hover {
    background: var(--rw-bg-secondary);
    color: var(--rw-text-primary);
}

.ralph-sidebar-search {
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--rw-border);
    /* Hide the basic-theme search h3 ("Quick search") which has no value alongside the input */
}
.ralph-sidebar-search h3 {
    position: absolute !important;
    width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.ralph-sidebar-search form {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.ralph-sidebar-search form::before {
    content: "";
    position: absolute;
    left: 0.65rem;
    top: 50%;
    width: 0.95rem;
    height: 0.95rem;
    transform: translateY(-50%);
    background: currentColor;
    color: var(--rw-text-muted);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>") center/contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>") center/contain no-repeat;
    pointer-events: none;
    z-index: 1;
}

.ralph-sidebar-search input[type="text"],
.ralph-sidebar-search input[type="search"] {
    flex: 1 1 auto;
    width: 100%;
    min-height: 2.5rem;
    background: oklch(from var(--rw-bg-secondary) calc(l + 0.015) c h);
    border: 1px solid var(--rw-border-strong) !important;
    border-radius: 0.625rem;
    color: var(--rw-text-primary);
    padding: 0.45rem 0.85rem 0.45rem 2rem;
    font-size: 0.9rem;
    font-family: var(--rw-font-sans);
    outline: none;
    transition: border-color 120ms, box-shadow 120ms, background 120ms;
}

.ralph-sidebar-search input::placeholder {
    color: var(--rw-text-secondary);
}

.ralph-sidebar-search input:hover {
    background: oklch(from var(--rw-bg-secondary) calc(l + 0.03) c h);
}

.ralph-sidebar-search input:focus,
.ralph-sidebar-search input:focus-visible {
    border-color: var(--rw-color-brand) !important;
    box-shadow: 0 0 0 3px var(--rw-color-brand-tint);
    background: var(--rw-bg-primary);
}

.ralph-sidebar-search input[type="submit"] {
    flex: 0 0 auto;
    min-height: 2.5rem;
    padding: 0.45rem 0.8rem;
    background: oklch(from var(--rw-color-brand-tint) calc(l + 0.03) c h);
    border: 1px solid var(--rw-color-brand);
    border-radius: 0.625rem;
    color: var(--rw-text-primary);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background 120ms, color 120ms, border-color 120ms, box-shadow 120ms;
}

.ralph-sidebar-search input[type="submit"]:hover,
.ralph-sidebar-search input[type="submit"]:focus-visible {
    background: var(--rw-color-brand);
    border-color: var(--rw-color-brand);
    color: var(--rw-bg-primary);
    box-shadow: 0 0 0 3px var(--rw-color-brand-tint);
}

.ralph-sidebar-nav {
    padding: 0.5rem 0;
}

/* Sphinx-generated toctree nav */
.ralph-sidebar-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ralph-sidebar-nav li a,
.ralph-sidebar-nav .reference {
    position: relative;
    display: block;
    padding: 0.35rem 1.25rem 0.35rem 1.5rem;
    border-radius: 0;
    color: var(--rw-text-secondary) !important;
    font-size: 0.825rem;
    line-height: 1.45;
    text-decoration: none !important;
    transition: background 120ms, color 120ms, padding-left 150ms;
}

.ralph-sidebar-nav .toctree-l1 > a {
    color: var(--rw-text-primary) !important;
    font-weight: 500;
    font-size: 0.875rem;
    padding-left: 1.5rem;
}

.ralph-sidebar-nav .toctree-l2 > a {
    padding-left: 2.25rem;
    font-size: 0.8rem;
    color: var(--rw-text-secondary) !important;
    font-weight: 400;
}

.ralph-sidebar-nav .toctree-l3 > a {
    padding-left: 3rem;
    font-size: 0.78rem;
    color: var(--rw-text-muted) !important;
}

.ralph-sidebar-nav .toctree-l2 > a::before,
.ralph-sidebar-nav .toctree-l3 > a::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 1.5rem;
    width: 0.4rem;
    height: 1px;
    background: var(--rw-border-strong);
    transform: translateY(-50%);
    transition: background 120ms, width 150ms;
}

.ralph-sidebar-nav .toctree-l3 > a::before {
    left: 2.25rem;
}

.ralph-sidebar-nav li a:hover,
.ralph-sidebar-nav .reference:hover {
    background: var(--rw-bg-secondary);
    color: var(--rw-text-primary) !important;
}

/* Scope hover ::before to only the levels that actually declare ::before.
   Previously this targeted all li > a, leaving dead branches for l1 and l4. */
.ralph-sidebar-nav .toctree-l2 > a:hover::before,
.ralph-sidebar-nav .toctree-l3 > a:hover::before {
    background: var(--rw-color-brand);
    width: 0.6rem;
}

.ralph-sidebar-nav > ul > li > a[href="#"],
.ralph-sidebar-nav .current > a,
.ralph-sidebar-nav a.current,
.ralph-sidebar-nav li.current > a {
    color: var(--rw-text-primary) !important;
    font-weight: 600;
    background: linear-gradient(90deg, var(--rw-color-brand-tint) 0%, transparent 100%);
    box-shadow: inset 3px 0 0 var(--rw-color-brand);
    border-inline-end: 1px solid color-mix(in oklab, var(--rw-color-brand) 35%, transparent);
}

.ralph-sidebar-nav .toctree-l2.current > a::before,
.ralph-sidebar-nav .toctree-l3.current > a::before,
.ralph-sidebar-nav .toctree-l2 > a.current::before,
.ralph-sidebar-nav .toctree-l3 > a.current::before {
    background: var(--rw-color-brand);
}

.ralph-sidebar-nav li a:focus-visible,
.ralph-sidebar-nav .reference:focus-visible {
    outline: 2px solid var(--rw-color-brand);
    outline-offset: -2px;
    background: var(--rw-color-brand-tint);
}

.ralph-sidebar-nav .caption,
.ralph-sidebar-nav .caption-text,
.ralph-sidebar-nav p.caption {
    display: block;
    padding: 1rem 1.25rem 0.4rem;
    margin: 0;
    color: var(--rw-text-muted);
    text-transform: uppercase;
    font-size: 0.65rem;
    letter-spacing: 0.12em;
    font-weight: 700;
    font-family: var(--rw-mono-stack);
}

.ralph-sidebar-nav .caption-text {
    padding: 0;
}

/* Main area: content | toc */
.ralph-page-main {
    display: grid;
    grid-template-columns: 1fr min(22rem, 22%);
    min-width: 0;
    align-items: start;
}

/* When the right TOC has no anchors (e.g. search page, short pages, the
   custom genindex), collapse to single column so the content can use the
   full width instead of leaving a blank gutter. */
.ralph-page-main:has(.ralph-toc-tree:empty),
.ralph-page-main:has(.ralph-toc-tree > :only-child:empty) {
    grid-template-columns: 1fr;
}

.ralph-page-main:has(.ralph-toc-tree:empty) .ralph-page-toc,
.ralph-page-main:has(.ralph-toc-tree > :only-child:empty) .ralph-page-toc {
    display: none;
}

.ralph-content-column {
    min-width: 0;
    padding: 2rem 2.5rem 4rem;
    max-width: 60rem;
}

.ralph-content-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px dashed oklch(from var(--color-base-300) l c h / 30%);
}

/* When the breadcrumb meta is absent (index pages), don't render the dashed
   underline — the bare "Top" pill on the right side looks isolated. The
   template emits .ralph-content-actions-bare on those pages because CSS :empty
   does not match elements containing whitespace text nodes. */
.ralph-content-actions-bare {
    border-bottom: none;
    justify-content: flex-end;
    padding-bottom: 0;
    margin-bottom: 0.75rem;
}

.ralph-content-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--rw-text-muted);
    font-family: var(--rw-mono-stack);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.ralph-content-crumb::before {
    content: "/";
    margin-right: 0.4rem;
    color: oklch(from var(--color-base-content) l c h / 35%);
}

.ralph-back-to-top {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.65rem;
    background: transparent;
    border: 1px solid oklch(from var(--color-base-300) l c h / 50%);
    border-radius: 999px;
    color: var(--rw-text-muted);
    font-family: var(--rw-mono-stack);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color 150ms, border-color 150ms, background 150ms, transform 150ms;
}

.ralph-back-to-top:hover {
    color: var(--rw-color-brand);
    border-color: var(--rw-color-brand);
    background: var(--rw-color-brand-tint);
    text-decoration: none;
}

.ralph-back-to-top:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--rw-color-brand-tint);
}

@media (prefers-reduced-motion: no-preference) {
    .ralph-back-to-top svg { transition: transform 150ms; }
    .ralph-back-to-top:hover svg { transform: translateY(-2px); }
}

.ralph-document {
    max-width: 52rem;
}

/* Right TOC */
.ralph-page-toc {
    position: sticky;
    top: var(--rw-navbar-height);
    height: calc(100dvh - var(--rw-navbar-height));
    overflow-y: auto;
    border-left: 1px solid var(--rw-border);
    scrollbar-width: thin;
    scrollbar-color: var(--rw-border) transparent;
}

.ralph-toc-inner {
    padding: 1.5rem 0.75rem 3rem;
}

.ralph-toc-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.75rem 0.625rem;
    margin: 0 0 0.5rem;
    color: var(--rw-text-muted);
    text-transform: uppercase;
    font-size: 0.65rem;
    letter-spacing: 0.12em;
    font-weight: 700;
    font-family: var(--rw-mono-stack);
    border-bottom: 1px solid var(--rw-border);
}

.ralph-toc-title::before {
    content: "";
    display: inline-block;
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: var(--rw-color-brand);
    box-shadow: 0 0 0 2px var(--rw-color-brand-tint);
}

.ralph-toc-tree ul {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Hide the redundant top-level "Page Title → #" entry at the very top of the TOC.
   It just duplicates the page heading; sub-items below carry the real navigation. */
.ralph-toc-tree > ul > li:first-child > a[href="#"] {
    display: none;
}

.ralph-toc-tree a {
    position: relative;
    display: block;
    padding: 0.3rem 0.75rem 0.3rem 1rem;
    border-radius: 0.375rem;
    color: var(--rw-text-secondary) !important;
    font-size: 0.8125rem;
    line-height: 1.45;
    text-decoration: none !important;
    transition: background 120ms, color 120ms, padding-left 150ms;
}

.ralph-toc-tree a::before {
    content: "";
    position: absolute;
    top: 0.55rem;
    bottom: 0.55rem;
    left: 0.4rem;
    width: 2px;
    background: transparent;
    border-radius: 1px;
    transition: background 150ms;
}

.ralph-toc-tree a:hover {
    background: oklch(from var(--color-base-200) l c h / 50%);
    color: var(--rw-text-primary) !important;
}

.ralph-toc-tree a:hover::before {
    background: var(--rw-border-strong);
}

.ralph-toc-tree a:focus-visible {
    outline: 2px solid var(--rw-color-brand);
    outline-offset: -2px;
}

.ralph-toc-tree a.toc-active {
    color: var(--rw-color-brand) !important;
    background: var(--rw-color-brand-tint);
}

.ralph-toc-tree a.toc-active::before {
    background: var(--rw-color-brand);
}

.ralph-toc-tree ul ul a {
    padding-left: 1.75rem;
    font-size: 0.76rem;
    color: var(--rw-text-muted) !important;
}

.ralph-toc-tree ul ul a::before {
    left: 1.15rem;
}

.ralph-toc-tree ul ul ul a {
    padding-left: 2.5rem;
}

.ralph-toc-tree ul ul ul a::before {
    left: 1.9rem;
}

/* Prev/Next navigation */
.ralph-page-footer {
    margin-top: 3.5rem;
    padding-top: 2rem;
    position: relative;
}

.ralph-page-footer::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--rw-border-strong) 30%, var(--rw-border-strong) 70%, transparent);
}

.ralph-related-pages {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.875rem;
}

/* If the related-pages nav has exactly one child (only `next` exists, e.g.
   index page), collapse the grid to a single column so we don't render a
   half-page-wide empty cell. */
.ralph-related-pages:has(> .ralph-nav-page:only-child) {
    grid-template-columns: 1fr;
}

.ralph-related-pages > .ralph-nav-page:only-child {
    grid-column: 1 !important;
}

.ralph-nav-page {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 1rem 1.125rem;
    background: var(--rw-bg-secondary);
    border: 1px solid var(--rw-border);
    border-radius: 0.625rem;
    text-decoration: none !important;
    transition: border-color 180ms, transform 180ms, box-shadow 180ms, background 180ms;
    overflow: hidden;
}

.ralph-nav-page::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 60%, var(--rw-color-brand-tint) 100%);
    opacity: 0;
    transition: opacity 200ms;
    pointer-events: none;
}

.ralph-nav-page:hover {
    border-color: var(--rw-color-brand);
    transform: translateY(-2px);
    box-shadow: 0 0 0 1px var(--rw-color-brand), 0 10px 28px oklch(from var(--color-primary) l c h / 18%);
}

.ralph-nav-page:hover::after {
    opacity: 1;
}

.ralph-nav-page:focus-visible {
    outline: none;
    border-color: var(--rw-color-brand);
    box-shadow: 0 0 0 3px var(--rw-color-brand-tint);
}

.ralph-nav-next {
    justify-content: space-between;
    grid-column: 2;
    text-align: right;
}

.ralph-nav-next .ralph-nav-info {
    align-items: flex-end;
}

.ralph-nav-prev {
    grid-column: 1;
}

.ralph-nav-info {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
    position: relative;
    z-index: 1;
}

.ralph-nav-label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--rw-mono-stack);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--rw-text-muted);
}

.ralph-nav-prev .ralph-nav-label::before { content: "←"; font-family: var(--rw-font-sans); }
.ralph-nav-next .ralph-nav-label::after  { content: "→"; font-family: var(--rw-font-sans); }

.ralph-nav-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--rw-text-primary);
    text-wrap: balance;
    line-height: 1.3;
    transition: color 150ms;
}

.ralph-nav-page:hover .ralph-nav-title {
    color: var(--rw-color-brand);
}

.ralph-nav-icon {
    font-family: var(--rw-mono-stack);
    font-size: 1.2rem;
    color: var(--rw-text-muted);
    flex-shrink: 0;
    line-height: 1;
    transition: color 150ms, transform 150ms;
    position: relative;
    z-index: 1;
}

.ralph-nav-page:hover .ralph-nav-icon { color: var(--rw-color-brand); }
.ralph-nav-prev:hover .ralph-nav-icon { transform: translateX(-3px); }
.ralph-nav-next:hover .ralph-nav-icon { transform: translateX(3px); }

/* ── Back-to-home link injected by docs.rake ────────────────────────────── */
.ralph-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.75rem 1rem 0;
    padding: 0.35rem 0.7rem;
    background: transparent;
    border: 1px solid oklch(from var(--color-base-300) l c h / 50%);
    border-radius: 999px;
    color: var(--rw-text-muted) !important;
    font-family: var(--rw-mono-stack);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none !important;
    transition: background 150ms, color 150ms, border-color 150ms, transform 150ms;
}

.ralph-back-link:hover {
    background: var(--rw-color-brand-tint);
    color: var(--rw-color-brand) !important;
    border-color: var(--rw-color-brand);
    text-decoration: none !important;
}

.ralph-back-link:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--rw-color-brand-tint);
}

.ralph-back-link::before {
    content: "←";
    font-size: 0.8rem;
    line-height: 1;
    transition: transform 150ms;
}

.ralph-back-link:hover::before {
    transform: translateX(-2px);
}

/* ── Injected navbar / footer (rendered by docs.rake) ───────────────────── */
.docs-navbar {
    position: sticky;
    top: 0;
    z-index: 200;
    min-height: var(--rw-navbar-height);
    border-bottom: 1px solid var(--rw-sidebar-border);
}

.docs-navbar .navbar-start svg {
    width: 1.5rem;
    height: 1.5rem;
}

.docs-navbar .btn {
    font-family: var(--rw-font-sans);
    font-size: 0.9rem;
}

.docs-brand-link,
.docs-brand-link:visited {
    color: var(--rw-text-primary) !important;
    text-decoration: none !important;
}

.docs-brand-link:hover {
    color: var(--rw-color-brand) !important;
}

.docs-navbar .docs-source-link-pill,
.docs-navbar .docs-source-link-pill:visited {
    color: var(--rw-text-secondary) !important;
    text-decoration: none !important;
}

.docs-navbar .docs-source-link-pill:hover {
    color: var(--rw-color-brand) !important;
}

.docs-navbar .docs-source-link-muted,
.docs-navbar .docs-source-link-muted:visited {
    color: var(--rw-text-muted) !important;
    text-decoration: none !important;
}

.docs-navbar .docs-source-link-muted:hover {
    color: var(--rw-color-brand) !important;
}

.docs-navbar .docs-source-link-menu,
.docs-navbar .docs-source-link-menu:visited {
    color: inherit !important;
}

.docs-navbar .menu a {
    color: var(--rw-text-secondary);
    text-decoration: none;
    border-radius: 0.5rem;
    transition: color 150ms, background 150ms;
}

.docs-navbar .menu a:hover {
    color: var(--rw-text-primary);
    background: oklch(from var(--color-base-200) l c h / 60%);
    text-decoration: none;
}

.docs-navbar .menu a.active {
    color: var(--rw-color-brand);
    background: var(--rw-color-brand-tint);
    box-shadow: inset 0 -2px 0 var(--rw-color-brand);
}

.docs-navbar .menu a:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--rw-color-brand-tint);
}

/* Toggle button + horizontal menu visibility tied to the drawer breakpoint
   (.ralph-sidebar drawer triggers at max-width: 64rem). Default desktop:
   menu visible, toggle hidden. Drawer mode: menu hidden, toggle visible. */
.docs-navbar-toggle { display: none; }
.docs-navbar-menu  { display: flex; }

@media (max-width: 64rem) {
    .docs-navbar-toggle { display: inline-flex; }
    .docs-navbar-menu  { display: none; }
}

.docs-footer {
    margin-top: 4rem;
}

.docs-footer-copy {
    margin: 0;
    font-family: var(--rw-mono-stack);
    font-size: 0.72rem;
    letter-spacing: 0.02em;
}

.docs-footer-attr {
    color: var(--rw-text-muted);
}

.docs-footer a,
.docs-footer a:visited {
    color: inherit;
    text-decoration: none;
    transition: color 150ms;
}

.docs-footer .ofm-footer-link,
.docs-footer .ofm-footer-link:visited {
    color: var(--rw-text-secondary) !important;
}

.docs-footer .docs-footer-attr a,
.docs-footer .docs-footer-attr a:visited {
    color: var(--rw-text-secondary) !important;
    text-decoration: underline;
    text-underline-offset: 0.18em;
    text-decoration-thickness: 0.08em;
}

.docs-footer .docs-source-link-pill,
.docs-footer .docs-source-link-pill:visited {
    color: var(--rw-color-brand) !important;
}

.docs-footer .docs-source-link-muted,
.docs-footer .docs-source-link-muted:visited {
    color: var(--rw-text-muted) !important;
}

.docs-footer a:hover {
    text-decoration: none;
    color: var(--rw-color-brand) !important;
}
.docs-footer a:focus-visible {
    outline: 2px solid var(--rw-color-brand);
    outline-offset: 3px;
    border-radius: 0.25rem;
}

/* ── Admonitions ────────────────────────────────────────────────────────── */
.admonition,
div.admonition {
    --adm-color: var(--rw-color-brand);
    position: relative;
    background: linear-gradient(180deg,
        oklch(from var(--adm-color) l c h / 4%) 0%,
        var(--rw-bg-secondary) 60%);
    border: 1px solid oklch(from var(--rw-border-strong) l c h / 60%);
    border-left: 3px solid var(--adm-color);
    border-radius: 0.5rem;
    padding: 0.875rem 1.125rem 0.875rem 2.625rem;
    margin: 1.25rem 0;
    box-shadow: none;
}

.admonition.note,    div.admonition.note    { --adm-color: var(--color-info); }
.admonition.warning, div.admonition.warning,
.admonition.caution, div.admonition.caution,
.admonition.attention, div.admonition.attention { --adm-color: var(--color-warning); }
.admonition.tip,     div.admonition.tip,
.admonition.hint,    div.admonition.hint     { --adm-color: var(--color-primary); }
.admonition.important, div.admonition.important,
.admonition.danger,    div.admonition.danger,
.admonition.error,     div.admonition.error    { --adm-color: var(--color-error); }
.admonition.seealso,   div.admonition.seealso  { --adm-color: var(--color-secondary); }

.admonition-title {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0 0 0.5rem;
    color: var(--adm-color);
    font-family: var(--rw-mono-stack);
}

/* SVG icon for each admonition type — rendered as masked color block on the title */
.admonition::before,
div.admonition::before {
    content: "";
    position: absolute;
    top: 0.95rem;
    left: 0.875rem;
    width: 1rem;
    height: 1rem;
    background: var(--adm-color);
    -webkit-mask: var(--adm-icon, none) center/contain no-repeat;
            mask: var(--adm-icon, none) center/contain no-repeat;
}

.admonition.note,    div.admonition.note    { --adm-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='16' x2='12' y2='12'/><line x1='12' y1='8' x2='12.01' y2='8'/></svg>"); }
.admonition.warning, div.admonition.warning,
.admonition.caution, div.admonition.caution,
.admonition.attention, div.admonition.attention { --adm-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/><line x1='12' y1='9' x2='12' y2='13'/><line x1='12' y1='17' x2='12.01' y2='17'/></svg>"); }
.admonition.tip,     div.admonition.tip,
.admonition.hint,    div.admonition.hint     { --adm-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M9 18h6'/><path d='M10 22h4'/><path d='M12 2a7 7 0 0 0-4 12.74V17h8v-2.26A7 7 0 0 0 12 2z'/></svg>"); }
.admonition.important, div.admonition.important,
.admonition.danger,    div.admonition.danger,
.admonition.error,     div.admonition.error    { --adm-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='8' x2='12' y2='12'/><line x1='12' y1='16' x2='12.01' y2='16'/></svg>"); }
.admonition.seealso,   div.admonition.seealso  { --adm-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/><circle cx='12' cy='12' r='3'/></svg>"); }
/* Generic fallback for unrecognized admonition types */
.admonition:not(.note):not(.warning):not(.caution):not(.attention):not(.tip):not(.hint):not(.important):not(.danger):not(.error):not(.seealso) {
    --adm-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/></svg>");
}

.admonition p,
div.admonition p {
    margin: 0.4rem 0;
    color: var(--rw-text-secondary);
}

.admonition p:last-child,
div.admonition p:last-child {
    margin-bottom: 0;
}

.admonition code,
div.admonition code {
    background: oklch(from var(--adm-color) l c h / 12%);
    border-color: oklch(from var(--adm-color) l c h / 30%);
    color: var(--rw-text-primary);
}

/* ── Code blocks ────────────────────────────────────────────────────────── */
div[class*="highlight-"],
.highlight,
pre {
    position: relative;
    background: var(--rw-code-bg) !important;
    border: 1px solid var(--rw-border);
    border-radius: 0.625rem;
    overflow: hidden;
}

div[class*="highlight-"] pre,
.highlight pre {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 1rem 1.125rem !important;
    overflow-x: auto;
    font-family: var(--rw-mono-stack);
    font-size: 0.85rem;
    line-height: 1.55;
}

/* Top-edge accent — subtle horizontal hairline */
div[class*="highlight-"]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--rw-border-strong) 50%, transparent);
    pointer-events: none;
    z-index: 1;
}

/* Language tag — derived from highlight-{lang} class via attribute targeting.
   Pre-mapped for the common Sphinx-emitted languages. */
div[class*="highlight-"]::after {
    content: "";
    position: absolute;
    top: 0.5rem;
    right: 3rem;
    padding: 0.15rem 0.5rem;
    font-family: var(--rw-mono-stack);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--rw-text-muted);
    background: oklch(from var(--color-base-300) l c h / 60%);
    border: 1px solid oklch(from var(--rw-border-strong) l c h / 50%);
    border-radius: 0.3rem;
    pointer-events: none;
    z-index: 1;
}

/* Suppress label on default/none — only show when language is explicit */
div.highlight-default::after,
div.highlight-none::after { content: ""; padding: 0; border: 0; background: transparent; }

div.highlight-python::after,    div.highlight-py::after,    div.highlight-py3::after { content: "py"; }
div.highlight-javascript::after, div.highlight-js::after { content: "js"; }
div.highlight-typescript::after, div.highlight-ts::after { content: "ts"; }
div.highlight-bash::after,      div.highlight-shell::after, div.highlight-sh::after,
div.highlight-zsh::after,       div.highlight-console::after { content: "bash"; }
div.highlight-yaml::after,      div.highlight-yml::after  { content: "yaml"; }
div.highlight-json::after       { content: "json"; }
div.highlight-toml::after       { content: "toml"; }
div.highlight-rust::after,      div.highlight-rs::after   { content: "rust"; }
div.highlight-html::after       { content: "html"; }
div.highlight-css::after        { content: "css"; }
div.highlight-ruby::after,      div.highlight-rb::after,  div.highlight-erb::after { content: "ruby"; }
div.highlight-markdown::after,  div.highlight-md::after   { content: "md"; }
div.highlight-text::after,      div.highlight-txt::after  { content: "txt"; }
div.highlight-ini::after        { content: "ini"; }
div.highlight-diff::after       { content: "diff"; }
div.highlight-makefile::after   { content: "make"; }
div.highlight-dockerfile::after { content: "docker"; }
div.highlight-sql::after        { content: "sql"; }

code,
pre,
.literal {
    font-family: var(--rw-mono-stack);
}

code.literal,
:not(pre) > code {
    background: var(--rw-code-inline-bg);
    color: var(--rw-text-primary);
    border-radius: 0.3rem;
    border: 1px solid oklch(from var(--rw-border-strong) l c h / 60%);
    padding: 0.08em 0.35em;
    font-size: 0.85em;
    font-family: var(--rw-mono-stack);
    vertical-align: -0.05em;
    word-break: break-word;
}

/* Code inside admonitions and links — preserve readability */
a code.literal {
    color: inherit;
    border-color: oklch(from var(--color-primary) l c h / 30%);
}

.highlight table td,
.highlight table th {
    border: 0;
}

.highlight table {
    border: 0;
    margin: 0;
    width: auto;
}

/* Linenos column — quieter visual */
.highlight .linenos {
    color: var(--rw-text-muted);
    opacity: 0.55;
    user-select: none;
    padding-right: 0.75rem !important;
    border-right: 1px solid oklch(from var(--rw-border-strong) l c h / 40%) !important;
}

/* ── Tables ─────────────────────────────────────────────────────────────── */
.ralph-document table.docutils,
.ralph-document table.align-default,
.ralph-document table:not(.highlighttable):not(.field-list) {
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--rw-border);
    border-radius: 0.625rem;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    margin: 1.25rem 0;
    font-size: 0.875rem;
}

/* Wrapper to allow horizontal scroll on narrow viewports without breaking
   layout. Sphinx wraps tables in `.table-wrapper` when emitted with
   `:widths:`; for un-wrapped tables we promote the table itself to a block
   with overflow. */
.ralph-document .table-wrapper {
    max-width: 100%;
    overflow-x: auto;
    margin: 1.25rem 0;
    border-radius: 0.625rem;
    -webkit-overflow-scrolling: touch;
}

.ralph-document .table-wrapper > table {
    margin: 0;
}

.ralph-document th,
.ralph-document table.docutils th {
    background: var(--rw-bg-secondary);
    color: var(--rw-text-primary);
    font-weight: 600;
    font-family: var(--rw-mono-stack);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--rw-border-strong);
    padding: 0.6rem 0.85rem;
    text-align: left;
}

.ralph-document td,
.ralph-document table.docutils td {
    border-top: 1px solid oklch(from var(--color-base-300) l c h / 35%);
    padding: 0.6rem 0.85rem;
    vertical-align: top;
}

.ralph-document tr:hover td {
    background: oklch(from var(--color-base-200) l c h / 30%);
}

/* ── Headerlinks (¶) ────────────────────────────────────────────────────── */
.headerlink {
    color: var(--rw-text-muted);
    opacity: 0;
    margin-left: 0.5rem;
    font-weight: 400;
    text-decoration: none !important;
    transition: opacity 180ms, color 180ms, transform 180ms;
    display: inline-block;
}

@media (prefers-reduced-motion: no-preference) {
    h1:hover > .headerlink,
    h2:hover > .headerlink,
    h3:hover > .headerlink,
    h4:hover > .headerlink,
    h5:hover > .headerlink,
    h6:hover > .headerlink,
    dt:hover > .headerlink {
        opacity: 0.7;
        transform: translateX(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .headerlink { transition: none; }
    h1:hover > .headerlink,
    h2:hover > .headerlink,
    h3:hover > .headerlink,
    h4:hover > .headerlink,
    h5:hover > .headerlink,
    h6:hover > .headerlink,
    dt:hover > .headerlink {
        opacity: 0.7;
    }
}

.headerlink:hover,
.headerlink:focus-visible {
    color: var(--rw-color-brand);
    opacity: 1 !important;
    text-decoration: none !important;
}

.headerlink:focus-visible {
    outline: 2px solid var(--rw-color-brand);
    outline-offset: 2px;
    border-radius: 0.25rem;
}

/* ── Copy button ────────────────────────────────────────────────────────── */
button.copybtn {
    top: 0.5rem !important;
    right: 0.5rem !important;
    width: 1.85rem !important;
    height: 1.85rem !important;
    padding: 0.35rem !important;
    background: oklch(from var(--color-base-300) l c h / 60%) !important;
    border: 1px solid oklch(from var(--rw-border-strong) l c h / 50%) !important;
    border-radius: 0.4rem !important;
    color: var(--rw-text-muted) !important;
    opacity: 0 !important;
    transition: background 150ms, color 150ms, border-color 150ms, opacity 200ms, transform 150ms !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

div.highlight:hover button.copybtn,
button.copybtn:focus-visible {
    opacity: 1 !important;
}

button.copybtn:hover {
    background: var(--rw-color-brand-tint) !important;
    color: var(--rw-color-brand) !important;
    border-color: var(--rw-color-brand) !important;
    transform: translateY(-1px);
}

button.copybtn:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 3px var(--rw-color-brand-tint) !important;
}

button.copybtn.success {
    color: var(--color-success) !important;
    border-color: var(--color-success) !important;
    background: oklch(from var(--color-success) l c h / 12%) !important;
    opacity: 1 !important;
}

/* ── Sphinx-design cards ────────────────────────────────────────────────── */
.sd-card,
.sd-card.sd-shadow-sm,
.sd-card.sd-shadow {
    position: relative;
    background: var(--rw-bg-secondary) !important;
    border: 1px solid var(--rw-border) !important;
    border-radius: 0.75rem !important;
    box-shadow: none !important;
    padding: 1.25rem 1.4rem !important;
    overflow: hidden;
    transition: border-color 200ms, transform 200ms, box-shadow 200ms;
}

.sd-card::after {
    content: "→";
    position: absolute;
    top: 1rem;
    right: 1.1rem;
    font-family: var(--rw-mono-stack);
    color: var(--rw-text-muted);
    opacity: 0;
    transition: opacity 200ms, transform 200ms;
    transform: translateX(-4px);
    font-size: 1rem;
    line-height: 1;
}

.sd-card:hover,
.sd-card:focus-within {
    transform: translateY(-2px);
    border-color: var(--rw-color-brand) !important;
    box-shadow:
        0 0 0 1px var(--rw-color-brand),
        0 10px 28px oklch(from var(--color-primary) l c h / 18%) !important;
}

.sd-card:hover::after,
.sd-card:focus-within::after {
    opacity: 1;
    transform: translateX(0);
    color: var(--rw-color-brand);
}

.sd-card-title,
.sd-card .sd-card-title {
    color: var(--rw-text-primary);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.3;
    margin: 0 0 0.4rem;
    letter-spacing: -0.01em;
}

.sd-card .sd-card-text,
.sd-card .sd-card-text > p:last-child,
.sd-card p {
    color: var(--rw-text-secondary);
    font-size: 0.875rem;
    line-height: 1.5;
    margin: 0;
}

/* Make the entire card clickable for the link-card variant */
.sd-card.sd-card-click-target,
.sd-card a.stretched-link,
.sd-card .reference {
    cursor: pointer;
}

.sd-card .stretched-link::before,
.sd-card-click-target::after,
.sd-card > a.sd-stretched-link::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* ── View-this-page eye icon — hidden site-wide ──────────────────────────── */
.view-this-page {
    display: none !important;
}

/* ── Mobile sidebar toggle ────────────────────────────────────────────── */
.ralph-nav-toggle {
    position: absolute;
    top: -9999px;
    left: -9999px;
    opacity: 0;
    pointer-events: none;
}

.ralph-sidebar-overlay {
    display: none;
}

@media (max-width: 64rem) {
    .ralph-sidebar-overlay {
        position: fixed;
        inset: var(--rw-navbar-height) 0 0 0;
        background: oklch(0% 0 0deg / 55%);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        opacity: 0;
        pointer-events: none;
        z-index: 99;
        transition: opacity 200ms;
    }

    .ralph-nav-toggle:checked ~ .ralph-sidebar-overlay {
        display: block;
        opacity: 1;
        pointer-events: auto;
    }

    .ralph-nav-toggle:checked ~ .ralph-page-layout .ralph-sidebar {
        display: flex;
        flex-direction: column;
        animation: ralph-sidebar-slide 200ms ease-out;
    }

    .ralph-sidebar-close {
        display: inline-flex;
    }

    @keyframes ralph-sidebar-slide {
        from { transform: translateX(-100%); }
        to   { transform: translateX(0); }
    }

    @media (prefers-reduced-motion: reduce) {
        .ralph-nav-toggle:checked ~ .ralph-page-layout .ralph-sidebar {
            animation: none;
        }
        .ralph-sidebar-overlay {
            transition: none;
        }
    }
}

/* ── API reference (autodoc) ────────────────────────────────────────────── */
dl.py, dl.std, dl.rst {
    margin-bottom: 1.5rem;
}

dl.py > dt, dl.std > dt, dl.rst > dt {
    background: var(--rw-bg-secondary);
    border: 1px solid var(--rw-border);
    border-left: 3px solid var(--rw-color-brand);
    border-radius: 0.5rem;
    padding: 0.625rem 0.875rem;
    font-family: var(--rw-mono-stack);
    font-size: 0.875rem;
}

dl.py .sig-prename, dl.py .sig-prename .pre { color: var(--rw-text-muted); font-weight: 400; }
dl.py .sig-name, dl.py .sig-name .pre { color: var(--rw-color-brand); font-weight: 600; }
dl.py .sig-paren { color: var(--rw-text-secondary); }
dl.py .n, dl.py em.property { color: var(--rw-text-secondary); font-style: normal; }

dl.field-list {
    display: grid;
    grid-template-columns: minmax(8rem, max-content) 1fr;
    gap: 0.25rem 1rem;
    margin: 1rem 0;
}

dl.field-list > dt {
    color: var(--rw-text-muted);
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    font-weight: 600;
    padding-top: 0.25rem;
}

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

a.viewcode-link, a.viewcode-back {
    font-size: 0.75rem;
    color: var(--rw-text-muted);
    padding: 0.125rem 0.5rem;
    border-radius: 0.375rem;
    border: 1px solid var(--rw-border);
}

a.viewcode-link:hover, a.viewcode-back:hover {
    color: var(--rw-color-brand);
    border-color: var(--rw-color-brand);
    text-decoration: none;
}

/* ── Genindex / domain index (custom templates) ──────────────────────────── */
.ralph-genindex,
.ralph-domainindex {
    max-width: 100%;
}

.ralph-genindex-title {
    font-size: 1.875rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 1rem;
}

.ralph-genindex-jumpbox,
.ralph-genindex-split {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.6rem;
    margin: 0 0 1.5rem;
    padding: 0.65rem 0.85rem;
    background: var(--rw-bg-secondary);
    border: 1px solid var(--rw-border);
    border-radius: 0.5rem;
    font-family: var(--rw-mono-stack);
    font-size: 0.85rem;
}

.ralph-genindex-jumpbox a,
.ralph-genindex-split a {
    color: var(--rw-text-secondary) !important;
    text-decoration: none !important;
    padding: 0.1rem 0.4rem;
    border-radius: 0.25rem;
    transition: color 120ms, background 120ms;
}

.ralph-genindex-jumpbox a:hover,
.ralph-genindex-split a:hover {
    color: var(--rw-color-brand) !important;
    background: var(--rw-color-brand-tint);
}

.ralph-genindex-letter {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 1.75rem 0 0.625rem;
    color: var(--rw-color-brand);
    font-family: var(--rw-mono-stack);
}

/* Index tables — quiet, no border (the letter heading separates each block) */
.ralph-genindex .indextable,
.ralph-genindex .indextable td,
.ralph-domainindex .indextable,
.ralph-domainindex .indextable td {
    border: 0 !important;
    background: transparent !important;
    padding: 0.2rem 0 !important;
}

.ralph-genindex .indextable {
    margin: 0 0 1rem !important;
    border-radius: 0 !important;
}

.ralph-genindex .indextable td {
    vertical-align: top;
}

.ralph-genindex .indextable ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.ralph-genindex .indextable li {
    line-height: 1.4;
    font-size: 0.875rem;
}

.ralph-genindex .indextable a {
    color: var(--rw-text-secondary) !important;
    text-decoration: none !important;
}

.ralph-genindex .indextable a:hover {
    color: var(--rw-color-brand) !important;
    text-decoration: underline !important;
}

.ralph-genindex .indextable ul ul {
    margin-left: 1rem;
    margin-top: 0.15rem;
}

/* Domain index (py-modindex) — module list with code chips */
.ralph-domainindex .modindextable code.xref {
    background: oklch(from var(--color-base-300) l c h / 60%);
    border: 1px solid oklch(from var(--rw-border-strong) l c h / 60%);
    padding: 0.05em 0.4em;
    border-radius: 0.3rem;
    font-size: 0.85em;
}

.ralph-domainindex .modindextable .cap td:nth-child(2) strong {
    display: block;
    font-size: 1.1rem;
    font-family: var(--rw-mono-stack);
    color: var(--rw-color-brand);
    margin: 1rem 0 0.5rem;
}

/* ── Search page (custom searchpage.html) ────────────────────────────────── */
.ralph-search {
    max-width: 48rem;
}

.ralph-search-title {
    font-size: 1.875rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 0.5rem;
    color: var(--rw-text-primary);
}

.ralph-search-hint {
    color: var(--rw-text-muted);
    font-size: 0.875rem;
    margin: 0 0 1.5rem;
}

.ralph-search-form {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.ralph-search-form input[type="text"] {
    flex: 1;
    background: var(--rw-bg-secondary);
    border: 1px solid var(--rw-border-strong);
    border-radius: 0.625rem;
    color: var(--rw-text-primary);
    font-family: var(--rw-font-sans);
    font-size: 1rem;
    padding: 0.6rem 0.875rem;
    outline: none;
    transition: border-color 150ms, box-shadow 150ms, background 150ms;
}

.ralph-search-form input[type="text"]:focus,
.ralph-search-form input[type="text"]:focus-visible {
    border-color: var(--rw-color-brand);
    background: var(--rw-bg-primary);
    box-shadow: 0 0 0 3px var(--rw-color-brand-tint);
}

.ralph-search-form input[type="submit"] {
    background: var(--rw-color-brand);
    color: var(--color-primary-content);
    border: none;
    border-radius: 0.625rem;
    padding: 0.6rem 1.25rem;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background 150ms, transform 150ms;
    box-shadow: 0 0 0 1px var(--rw-color-brand-ring);
}

.ralph-search-form input[type="submit"]:hover {
    background: oklch(from var(--color-primary) calc(l + 0.04) c h);
    transform: translateY(-1px);
}

.ralph-search-form input[type="submit"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--rw-color-brand-tint), 0 0 0 1px var(--rw-color-brand);
}

.ralph-search-progress {
    color: var(--rw-text-muted);
    font-family: var(--rw-mono-stack);
    font-size: 0.75rem;
    min-height: 1.25rem;
    margin: 0.5rem 0 1rem;
}

/* ── Search results ─────────────────────────────────────────────────────── */
#search-results > ul.search {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
}

#search-results > ul.search > li {
    background: var(--rw-bg-secondary);
    border: 1px solid var(--rw-border);
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    margin-bottom: 0.75rem;
    transition: border-color 150ms, transform 150ms;
}

#search-results > ul.search > li:hover {
    border-color: var(--rw-color-brand);
    transform: translateY(-2px);
}

#search-results .context {
    color: var(--rw-text-secondary);
    font-size: 0.875rem;
    margin: 0.5rem 0 0;
}

#search-results .highlighted {
    background: oklch(from var(--color-primary) l c h / 18%);
    color: var(--rw-text-primary);
    padding: 0 0.15em;
    border-radius: 0.25rem;
}

#search-form input[type="text"] {
    background: var(--rw-bg-secondary);
    border: 1px solid var(--rw-border);
    border-radius: 0.5rem;
    color: var(--rw-text-primary);
    padding: 0.5rem 0.875rem;
}

#search-form input[type="text"]:focus {
    outline: none;
    border-color: var(--rw-color-brand);
    box-shadow: 0 0 0 2px var(--rw-color-brand-tint);
}

#search-form input[type="submit"] {
    background: var(--rw-color-brand);
    color: var(--color-primary-content);
    border: none;
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
    font-weight: 600;
    cursor: pointer;
}

#search-form input[type="submit"]:hover {
    background: oklch(from var(--color-primary) calc(l - 0.05) c h);
}

/* ── Pygments token retuning ────────────────────────────────────────────── */
/* Keywords / control flow */
.highlight .k, .highlight .kd, .highlight .kn, .highlight .kr,
.highlight .kt, .highlight .kp { color: var(--color-secondary); font-weight: 500; }
/* Strings */
.highlight .s, .highlight .s1, .highlight .s2, .highlight .sb,
.highlight .sd, .highlight .se, .highlight .sh, .highlight .si,
.highlight .sx, .highlight .sr, .highlight .ss { color: var(--color-success); }
/* Function/class/builtin names */
.highlight .nb { color: var(--color-warning); }
.highlight .nf, .highlight .nc, .highlight .nd { color: var(--rw-color-brand); font-weight: 500; }
.highlight .nn, .highlight .ne { color: oklch(from var(--color-primary) calc(l + 0.06) c h); }
/* Comments */
.highlight .c, .highlight .c1, .highlight .cm,
.highlight .cp, .highlight .cs, .highlight .ch { color: var(--rw-text-muted); font-style: italic; opacity: 0.85; }
/* Operators / punctuation */
.highlight .o, .highlight .ow { color: oklch(from var(--color-base-content) l c h / 70%); }
.highlight .p { color: oklch(from var(--color-base-content) l c h / 75%); }
/* Numbers */
.highlight .mi, .highlight .mf, .highlight .mh, .highlight .mo,
.highlight .il { color: var(--color-warning); }
/* Generic prompt / heading / output */
.highlight .gh, .highlight .gu { color: var(--rw-color-brand); font-weight: 600; }
.highlight .gp { color: var(--rw-text-muted); user-select: none; }
.highlight .go { color: var(--rw-text-secondary); }
/* Diff additions/deletions */
.highlight .gd { color: var(--color-error); background: oklch(from var(--color-error) l c h / 10%); }
.highlight .gi { color: var(--color-success); background: oklch(from var(--color-success) l c h / 10%); }
/* Names / variables / attributes */
.highlight .n  { color: var(--rw-text-primary); }
.highlight .na { color: var(--color-info); }
.highlight .nv, .highlight .vc, .highlight .vg, .highlight .vi { color: var(--color-info); }
/* Errors */
.highlight .err { color: var(--color-error); border-bottom: 1px dashed var(--color-error); background: transparent; }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.ralph-document .hero-headline {
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.025em;
    margin: 0 0 0.625rem;
    color: var(--rw-text-primary);
    text-wrap: balance;
    background: linear-gradient(180deg, var(--rw-text-primary) 0%, oklch(from var(--color-base-content) calc(l - 0.08) c h) 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ralph-document .hero-headline::before {
    content: none !important; /* override the section-rule accent for hero h1 */
}

.ralph-document .hero-subtitle {
    font-size: 1.05rem;
    line-height: 1.55;
    color: var(--rw-text-secondary);
    max-width: 42rem;
    margin: 0 0 1.25rem;
}

.ralph-document .hero-subtitle code {
    font-size: 0.9em;
    background: oklch(from var(--color-primary) l c h / 10%);
    border-color: oklch(from var(--color-primary) l c h / 25%);
    color: var(--rw-text-primary);
}

.hero-cta,
a.hero-cta {
    display: inline-flex !important;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0;
    padding: 0.6rem 1.15rem;
    background: var(--rw-color-brand);
    color: var(--color-primary-content) !important;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    letter-spacing: 0.005em;
    text-decoration: none !important;
    transition: background 150ms, box-shadow 200ms, transform 150ms;
    box-shadow:
        0 0 0 1px var(--rw-color-brand-ring),
        0 4px 14px oklch(from var(--color-primary) l c h / 22%),
        inset 0 1px 0 oklch(from var(--color-primary-content) l c h / 18%);
}

.hero-cta:hover,
a.hero-cta:hover {
    background: oklch(from var(--color-primary) calc(l + 0.04) c h);
    transform: translateY(-1px);
    box-shadow:
        0 0 0 1px var(--rw-color-brand-ring),
        0 10px 28px oklch(from var(--color-primary) l c h / 38%),
        inset 0 1px 0 oklch(from var(--color-primary-content) l c h / 22%);
}

.hero-cta:focus-visible,
a.hero-cta:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 3px var(--rw-color-brand-tint),
        0 0 0 1px var(--rw-color-brand);
}

.hero-cta:active,
a.hero-cta:active {
    transform: translateY(0);
}

/* ── Sphinx grid layout ─────────────────────────────────────────────────── */
.sd-grid,
.sd-container .sd-row,
.bd-content .sd-grid {
    display: grid;
    gap: 0.875rem;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    margin: 1.5rem 0;
}

.sd-card a { color: inherit; text-decoration: none !important; }

/* ── Scrollbar ──────────────────────────────────────────────────────────── */
* { scrollbar-color: var(--rw-border-strong) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: oklch(from var(--color-base-300) l c h / 70%);
    border-radius: 5px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--rw-color-brand-ring);
    background-clip: padding-box;
}
::-webkit-scrollbar-corner { background: transparent; }

/* ── Responsive: mobile sidebar ─────────────────────────────────────────── */
@media (max-width: 64rem) {
    .ralph-page-layout {
        grid-template-columns: 1fr;
    }

    .ralph-sidebar {
        display: none; /* mobile: sidebar hidden by default */
        position: fixed;
        top: var(--rw-navbar-height);
        left: 0;
        bottom: 0;
        width: min(18rem, 85vw);
        z-index: 100;
        border-right: 1px solid var(--rw-sidebar-border);
        box-shadow: 0 8px 28px oklch(0% 0 0deg / 35%);
    }

    .ralph-page-main {
        grid-template-columns: 1fr;
    }

    .ralph-page-toc {
        display: none;
    }

    .ralph-content-column {
        padding: 1.5rem 1.25rem 3rem;
        max-width: 100%;
    }

    .ralph-related-pages {
        grid-template-columns: 1fr;
    }

    .ralph-nav-next,
    .ralph-nav-prev {
        grid-column: 1;
        text-align: left;
    }

    .ralph-nav-next .ralph-nav-info {
        align-items: flex-start;
    }
}

@media (max-width: 48rem) {
    .ralph-content-column {
        padding: 1rem 1rem 2.5rem;
    }

    .ralph-document .hero-headline {
        font-size: 1.875rem;
    }

    .ralph-document .hero-subtitle {
        font-size: 0.95rem;
    }

    .ralph-document h1 {
        font-size: 1.75em;
    }

    .ralph-document h2 {
        font-size: 1.35em;
    }

    .ralph-content-actions {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    /* Tighten table padding on narrow viewports */
    .ralph-document th,
    .ralph-document table.docutils th,
    .ralph-document td,
    .ralph-document table.docutils td {
        padding: 0.45rem 0.6rem;
        font-size: 0.8rem;
    }

    /* Promote tables to block + horizontal scroll on mobile so wide tables
       don't push the body wider than the viewport. Tables with their own
       .table-wrapper will scroll inside the wrapper instead. */
    .ralph-document table.docutils,
    .ralph-document table.align-default,
    .ralph-document table:not(.highlighttable):not(.field-list):not(.indextable) {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
    .ralph-document table tbody { display: table; width: 100%; }
    .ralph-document table thead { display: table-header-group; }

    /* Code blocks: smaller copy button on mobile */
    button.copybtn {
        opacity: 1 !important; /* always visible — no hover on mobile */
        width: 1.65rem !important;
        height: 1.65rem !important;
    }

    /* Cards in the Sphinx-design grid stack to single column */
    .sd-grid,
    .ralph-document .sd-grid {
        grid-template-columns: 1fr;
    }

    /* The .docs-navbar-menu visibility is handled by the dedicated breakpoint
       rule above (max-width: 64rem) — no mobile-specific override needed here. */
}

/* Tablet: keep TOC hidden but sidebar visible if there's room */
@media (max-width: 80rem) and (min-width: 64.0625rem) {
    .ralph-page-main {
        grid-template-columns: 1fr;
    }
    .ralph-page-toc {
        display: none;
    }
    .ralph-content-column {
        max-width: 56rem;
    }
}

/* ── Reduced-motion blanket ─────────────────────────────────────────────────
   WCAG 2.3.3: respect prefers-reduced-motion for non-essential motion. The
   per-rule guards above cover the most-visible cases; this rule kills any
   transform-based hover lift, animation, or smooth scroll project-wide for
   users with the OS preference set. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }

    .ralph-nav-page:hover,
    .sd-card:hover,
    .ralph-back-to-top:hover svg,
    button.copybtn:hover,
    .hero-cta:hover,
    .ralph-search-form input[type="submit"]:hover,
    .ralph-nav-prev:hover .ralph-nav-icon,
    .ralph-nav-next:hover .ralph-nav-icon,
    .ralph-back-link:hover::before,
    #search-results > ul.search > li:hover {
        transform: none !important;
    }
}