/* TOPO docs — full-width, responsive tweaks for the Furo theme.
   Furo constrains the content column (~46rem) for readability; for a
   reference manual with wide tables we want the content to use the full
   available width and let table cells wrap instead of scrolling. */

/* 1. Full-width content column.
   Furo centres .content at max-width: var(--content-width). Removing the cap
   lets the article fill all space between the left nav and the right TOC.
   The theme is still responsive: both sidebars collapse on narrow screens. */
:root {
    --content-width: 100%;
}

.content {
    max-width: 100%;
}

/* 2. Wrapping, full-width tables.
   By default long cells force the table wider than the viewport, so it scrolls
   left-right. Let cell text wrap (and break very long tokens) so the whole
   table fits. A wrapper still provides horizontal scroll as a graceful
   fallback for genuinely un-wrappable content (e.g. long code). */
article table.docutils {
    width: 100%;
    table-layout: auto;
}

article table.docutils td,
article table.docutils th {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.table-wrapper {
    overflow-x: auto;
}

/* Keep inline code/literals inside cells from forcing overflow. */
article table.docutils code,
article table.docutils .literal {
    white-space: normal;
    overflow-wrap: anywhere;
}

/* 3. Compact sidebar brand.
      Furo sizes the logo to the full sidebar width by default, which pushes the
      nav down and hides content. Cap the mark small and tighten the surrounding
      padding so more of the tree is visible without scrolling. */
.sidebar-logo {
    max-width: 64px;
    max-height: 64px;
    margin: 0 auto;
}

.sidebar-logo-container {
    margin: 0.4rem 0 0.2rem;
}

/* 3b. Tutorial figure pairs — one row, two columns.
      Each tutorial embeds two images (a static structure + a process GIF) in a
      single Markdown paragraph. Furo styles article images as block, which
      stacks them; make paragraph images inline-block and cap each at ~half the
      column so the pair sits side by side and reflows to stacked only on very
      narrow screens. */
article p img:not(:only-child) {
    display: inline-block;
    vertical-align: top;
    max-width: 49%;
    height: auto;
}

/* A lone figure (tutorials 6 and 7 ship only the process GIF): centre it and
   let it run large, capped so it doesn't become oversized on wide screens. */
article p img:only-child {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: min(100%, 720px);
    height: auto;
}

/* Centre the italic caption under a lone figure to match. */
article p:has(> img:only-child) + p em {
    display: block;
    text-align: center;
}

/* 4. Version switcher (sphinx-polyversion) — a dropdown pinned to the bottom of
      the sidebar, below Furo's light/dark toggle (see _templates/versions.html
      and html_sidebars in conf.py). */
.polyversion-switcher {
    padding: 0.5rem var(--sidebar-item-spacing-horizontal, 1rem) 0.75rem;
    border-top: 1px solid var(--color-sidebar-background-border, var(--color-background-border));
}

.polyversion-switcher .polyversion-label {
    display: block;
    margin-bottom: 0.25rem;
    font-size: var(--sidebar-caption-font-size, 0.8125rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-sidebar-caption-text, var(--color-foreground-secondary));
}

.polyversion-switcher select {
    width: 100%;
    padding: 0.35rem 0.5rem;
    font: inherit;
    color: var(--color-foreground-primary);
    background-color: var(--color-background-primary);
    border: 1px solid var(--color-background-border);
    border-radius: 0.25rem;
    cursor: pointer;
}

.polyversion-switcher select:hover {
    border-color: var(--color-foreground-border);
}