/* docs.edssa.io — presentation overrides on top of the stock mdBook theme.
 *
 * Loaded via `additional-css` in book.toml, deliberately as a small
 * ADDITIVE file rather than a forked copy of mdBook's own general.css:
 * a fork would silently drift from upstream on every mdbook upgrade,
 * and the thing that drifts would be the layout of every page.
 *
 * ── Why tables get more room, and how ─────────────────────────────────
 *
 * mdBook centres all content in a 750px prose column. That is right for
 * paragraphs and wrong for our tables: most are two or three columns of
 * *sentences* (the CE subset's "why held back", the field-kind table's
 * "value must be" / "encoded as"), and at 750px those wrap into narrow
 * ragged stacks harder to read than the prose around them.
 *
 * The obvious fix — bleed the table outward with negative margins — does
 * not work here and fails in a way worth recording: `.content` is a
 * scroll container (`overflow: auto`), so a table pushed outside it is
 * CLIPPED, not bled. Measured in a browser: the first column vanished
 * off the left edge and a horizontal scrollbar appeared under the table.
 *
 * So instead the prose column stays where it is and `main` is widened
 * around it: every block EXCEPT a table keeps the 750px measure and
 * stays centred, while a table is free to use the wider `main`. Nothing
 * overflows anything, so nothing can be clipped.
 *
 * Tables are deliberately NOT forced to `width: 100%`. Table auto-layout
 * grows a table to fit its content up to the space available, so a dense
 * three-column table takes the new room while a small two-column one
 * stays small and centred — which is what you want, rather than every
 * table stretched to the same width regardless of what is in it.
 */

:root {
    /* The widened measure for `main`. Past ~1200px a table stops being
     * easier to read and starts being a neck exercise, so this is a cap
     * rather than a target: `main` is a block, so on narrower viewports
     * it simply takes what is there. */
    --edssa-main-max-width: 1180px;
}

.content main {
    max-width: var(--edssa-main-max-width);
}

/* Everything that is not a table returns to the prose measure. `main`'s
 * children are block-level, so `margin-inline: auto` re-centres them
 * inside the wider column. */
.content main > *:not(.table-wrapper) {
    max-width: var(--content-max-width);
    margin-inline: auto;
}

/* ── Readability of the cells themselves ──────────────────────────────
 *
 * The extra width is only half the fix; these are what make a row of
 * sentences scannable.
 */
.content main table th,
.content main table td {
    /* Long cells are paragraphs. Centring one vertically against a
     * one-line neighbour reads as accidental. */
    vertical-align: top;
    /* mdBook ships 3px vertical padding, tight once cells wrap to two or
     * three lines. */
    padding-block: 8px;
    /* A long path or identifier wraps rather than forcing the table
     * wider than the room available. */
    overflow-wrap: break-word;
}

/* Headers over text columns read better ranged left, like the text
 * beneath them. (mdBook leaves <th> at the browser default, centred.) */
.content main table thead th {
    text-align: start;
}

/* Inline code in a cell wraps at boundaries rather than pushing the
 * column — API paths and committed field paths are the common case and
 * both are long. */
.content main table code {
    overflow-wrap: anywhere;
}

/* Print has no sidebar and a fixed page width; keep the prose measure
 * for everything so tables cannot run off the paper. */
@media print {
    .content main {
        max-width: none;
    }
}

/* ── Figures ──────────────────────────────────────────────────────────
 *
 * Diagrams are inline SVG so they inherit the page's theme colours
 * (currentColor plus the theme's own variables) rather than shipping one
 * hard-coded palette that would be wrong in three of the five themes.
 */
/* Figures opt out of the prose measure — a diagram or a screenshot reads
 * better with the extra room, for the same reason a table does. The
 * CAPTION does not: it is prose, and prose is easier to read narrow, so
 * it stays on the text measure underneath. */
.content main > .edssa-figure {
    max-width: min(980px, 100%);
    margin: 1.75rem auto;
}

.edssa-figure svg {
    display: block;
    width: 100%;
    height: auto;
}

.edssa-figure figcaption {
    /* Back to the text measure: a caption is prose. */
    max-width: var(--content-max-width);
    margin: 0.7rem auto 0;
    font-size: 0.88em;
    line-height: 1.5;
    opacity: 0.75;
}

/* Screenshots get a border, so a light screenshot on a light page still
 * reads as a picture of a thing rather than as part of the page. */
.edssa-figure img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--table-border-color);
    border-radius: 4px;
}