/* boa-docs CSS overrides — synced from the repo (grav/assets/helios/) by the
   deploy's pull script; loaded via an addCss hook in the Helios theme.
   Keep this file small: targeted fixes only, the theme owns the design. */

/* Comparison-style tables: give the first (label) column room to breathe.
   Auto table layout otherwise squeezes it to word-per-line against long
   prose columns. min() keeps narrow screens from forcing overflow.
   Two floors: the fuller one is sized for first columns that carry code
   tokens (the path/file catalogues it was measured on); a plain-label
   first column (Layer, Concern, …) only needs enough for a short word,
   and the fuller floor there pads "OS" with dead space the prose columns
   next to it need. The :has() split keeps each rule in its own block so
   browsers without :has() drop only the reduction and keep the fuller
   floor everywhere — the previous shipped behaviour. */
.prose table th:first-child,
.prose table td:first-child {
  min-width: min(12rem, 30vw);
}
.prose table:not(:has(td:first-child code)) th:first-child,
.prose table:not(:has(td:first-child code)) td:first-child {
  min-width: min(8.5rem, 30vw);
}

/* Wide tables: fit the content column instead of horizontal scrolling.
   Helios ships `table { display: block; width: max-content; overflow-x:
   auto }`, which sizes every table to its widest unbroken token — on the
   reference pages that is a long control-file path — and scrolls the rest.
   From tablet width up, restore real table layout and allow breaks inside
   long tokens (paths, filenames, link slugs) only when a column runs out
   of room; overflow-wrap: anywhere affects min-content sizing, so auto
   layout can shrink columns to fit. Break points are chosen by the
   renderer, not injected into the text, so copied paths stay clean.
   Without floors the layout hands nearly all width to the widest prose
   column and shreds the token columns character-per-line, so the first,
   second and last columns get floors that keep typical short tokens
   (`/etc/boa/`, most file names, link slugs) on one line. Floors are
   two-tier because %-min-widths are not honoured inside table sizing:
   lighter for tablet/narrow-desktop containers, fuller from 1280px where
   the content column is wide enough to afford them (16rem fits ~78% of
   the control-file reference names unwrapped, measured 2026-07-26).
   Headers (th) keep normal word wrapping so they never break mid-word.
   Below 768px a multi-column table cannot fit a phone either way, so the
   Helios scrolling-block behaviour is kept there. */
@media (min-width: 768px) {
  .prose table {
    display: table;
    width: 100%;
  }
  .prose table td {
    word-break: break-word;   /* fallback for engines without `anywhere` */
    overflow-wrap: anywhere;
  }
  .prose table td:nth-child(2) {
    min-width: 8.5rem;
  }
  .prose table td:last-child {
    min-width: 7.5rem;
  }
  /* Interior columns: the floors above cover the first, second and last
     columns only, so in a 4-column table the third has no floor — and
     with anywhere dropping its min-content to ~1ch, auto layout hands
     its width to the widest prose column and shreds interior code
     tokens character-per-line (the Master/Satellite "Lives at" column
     rendered 89px wide). 11.5rem holds a typical instance-root path
     unbroken with a trailing list comma (`/data/disk/o1/` chip 146px
     in-cell + comma + 32px cell padding, measured 2026-08-15). Scoped
     to ≤4-column tables with a plain first column:
     the 5-column and code-first-column reference catalogues are exactly
     the tables the 2026-07-26 fix sized to break long tokens instead of
     overflowing, and their 1280px budget has no room for another fixed
     floor. Browsers without :has() skip this and keep the previous
     layout. */
  .prose table:not(:has(tr > :nth-child(5))):not(:has(td:first-child code)) td:nth-child(3):not(:last-child) {
    min-width: 11.5rem;
  }
}
@media (min-width: 1280px) {
  .prose table th:first-child,
  .prose table td:first-child {
    min-width: 16rem;
  }
  .prose table:not(:has(td:first-child code)) th:first-child,
  .prose table:not(:has(td:first-child code)) td:first-child {
    min-width: 10rem;
  }
  .prose table td:nth-child(2) {
    min-width: 12rem;
  }
  .prose table td:last-child {
    min-width: 10rem;
  }
}

/* 1024-1279px: the sidebar and the "on this page" TOC both appear at
   1024 (Helios shows them from lg: up), which collapses the content
   column to 408-663px — narrower than the no-chrome 768-1023 band the
   tablet floors above were sized for, so any 3+-column table (448px of
   floors) rides under the TOC text. Give this window the layout that
   pages without a TOC already use: drop the TOC (it never renders
   below 1024 anyway) and centre the capped content column. Tables then
   get 680-768px and fit with room above their floors; the rule is
   inert on no-TOC pages and outside the window. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  #htmx-toc-container { display: none; }
  #toc-layout > .flex-1 { margin-inline: auto; }
}

/* C4 shared brand layer: tokens come from tokens.css (mirror note there);
   the docs accent maps to brand blue. The only visual detail is the accent
   dash above content h2s: ALL CAPS belongs to the marketing site, never
   these docs, and headings stay compact one-liners (Adam 2026-07-29). */
:root {
    --o8-accent: var(--o8-blue, #29b6f6);
}

.prose h2::before {
    content: "";
    display: block;
    width: 1.75rem;
    height: 3px;
    margin-bottom: 0.4rem;
    background: var(--o8-accent, #29b6f6);
    border-radius: 1px;
}