/*
 * Rulebook content styling: chapters, the two-column body, headings, tables and figures.
 *
 * Plain CSS under assets/ because it has TWO consumers that cannot share a bundled stylesheet:
 * the app document (which renders the unpaginated fallback view) links it from index.html, and
 * the pagination iframe links it too. The iframe is a separate document and deliberately does not
 * inherit the app's cascade -- that isolation is the whole point of the iframe, since the app's
 * global styles (Ionic, the army list's flex desk) distorted the boxes paged.js measures badly
 * enough that its layout loop never completed.
 *
 * One file rather than a copy in each place is what stops the two drifting apart.
 *
 * Page furniture -- sheet size, margins, running heads, folios, background -- is NOT here. It
 * lives in rulebook-print.css, which only the iframe loads: @page rules are meaningless in the app
 * document, and that file's .rulebook-chapter reset must not leak into the fallback view.
 *
 * `column-count: 2` on .rulebook-chapter__body is load-bearing and must stay exactly there.
 * Moving it onto paged.js's own page box -- which its documentation suggests -- spills content
 * horizontally off the sheet while still reporting full text retention and zero vertical overflow.
 */

/* Redeclared rather than relying on the app's copy: the iframe is its own document and inherits no
 * font faces from its parent. Same asset URLs, so the browser reuses the same downloads. */
@font-face {
    font-family: 'Orbitron';
    src: url('/assets/fonts/Orbitron-Variable.ttf') format('truetype');
    font-weight: 400 900;
    font-display: block;
}
@font-face {
    font-family: 'RobotoHE';
    src: url('/assets/fonts/Roboto-Variable.ttf') format('truetype');
    font-weight: 100 900;
    font-display: block;
}
@font-face {
    font-family: 'DIN1451';
    src: url('/assets/fonts/DIN1451.ttf') format('truetype');
    font-display: block;
}

/*
 * The export root. `PdfExportService` adds `.pdf-export` to the serialized clone only, never to
 * the live element, and these rules live HERE rather than in rulebook-pdf.scss because the
 * rulebook exports with `onlyExtraCss` -- the app's own stylesheets are deliberately not sent, so
 * anything the exported document needs must be in this file.
 *
 * Each declaration undoes something `.rulebook-reader` does on screen, and each has broken the
 * export before: it is a scroll container (content inside one scrolls rather than flowing, so
 * pagination stops almost at once), it is hidden outright while a preview is showing (paginating
 * a `display: none` element yields a PDF of nothing), and it paints a grey desk that would print
 * as a border around every sheet.
 */
.rulebook-reader.pdf-export {
    display: block;
    padding: 0;
    overflow: visible;
    /* TRANSPARENT, not #fff. The paper comes from the @page background; painting white here puts
     * an opaque block behind the text and leaves the page background visible only in the margins.
     * Easy to miss on a dense page and obvious on a short one -- the last page of a chapter shows
     * the block ending exactly where the text does. */
    background: transparent;
}

.rulebook-chapter {
    width: 210mm;
    max-width: 100%;
    box-sizing: border-box;
    padding: 16mm 15mm 18mm;
    color: #0f151b;
    font-family: 'RobotoHE', sans-serif;
    background: #fff;
}

.rulebook-chapter__mast {
    column-span: all;
    margin-bottom: 8mm;
    padding-bottom: 3mm;
    border-bottom: 2px solid #14324f;
}

.rulebook-chapter__number {
    font-family: 'DIN1451', sans-serif;
    font-size: 9pt;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #2f5f8f;
    margin-bottom: 1.5mm;
}

.rulebook-chapter__mast h1 {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    font-size: 26pt;
    margin: 0;
    padding: 0;
    color: #0d1b28;
}

.rulebook-chapter__body {
    column-count: 2;
    column-gap: 8mm;
    column-rule: 0.5pt solid #cbd4dc;
    /*
     * Fill column one before starting column two, rather than balancing them.
     *
     * The default, `balance`, splits whatever is left equally — so the last page of a short chapter
     * comes out as two stub columns of a few lines each instead of one short column. On a full page
     * there is no difference, because both columns fill regardless.
     */
    column-fill: auto;
    font-size: 9.5pt;
    line-height: 1.5;
    text-align: justify;
    /*
     * Load-bearing under pagination, and a no-op on screen.
     *
     * `text-align: justify` already leaves a paragraph's LAST line alone -- which is why this
     * looks fine in the browser. But paged.js fragments content by inserting its own marker
     * elements, and Chrome then stops treating those lines as final and stretches them edge to
     * edge. The result is justified last lines throughout the PDF only. Saying so explicitly
     * survives whatever paged.js splices in.
     */
    text-align-last: left;
    hyphens: auto;
}

.rulebook-chapter__body h2,
.rulebook-chapter__body h3,
.rulebook-chapter__body h4 {
    font-family: 'Orbitron', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #0d1b28;
    /*
     * `avoid`, NOT `avoid-column` — this keeps a heading with the text it introduces.
     *
     * paged.js copies the raw CSS value onto `data-break-after` / `data-previous-break-after`
     * (modules/paged-media/breaks.js:88) and then tests it with an exact `=== "avoid"` comparison
     * (chunker/layout.js:573, and :383 for break-inside). `avoid-column` passes that test's string
     * check and fails, so every one of these rules was silently doing nothing: headings stranded at
     * the foot of a column with their rules overleaf, and tables and figures splitting mid-way.
     *
     * `avoid` is also the more correct value here: a rulebook wants these kept together across page
     * breaks as well as column breaks.
     */
    break-after: avoid;
    break-inside: avoid;
    margin: 5mm 0 2mm;
    padding: 0;
    /* Headings inherit the body's `justify`, and a one-line heading is nothing but a last line --
     * so under pagination they came out stretched across the full column width. */
    text-align: left;
}

.rulebook-chapter__body h2 {
    font-size: 11pt;
    border-bottom: 1px solid #cbd4dc;
    padding-bottom: 1.4mm;
}

.rulebook-chapter__body h3 {
    font-size: 9.5pt;
}

.rulebook-chapter__body h4 {
    font-size: 9pt;
    letter-spacing: 0.02em;
}

.rulebook-chapter__body p {
    margin: 0 0 2.6mm;
}

/*
 * A heading bound to the paragraph it introduces — see keepHeadingsWithFirstParagraph().
 *
 * This is what actually stops a heading stranding at the foot of a column. `break-after: avoid` on
 * the heading only covers page boundaries, because within a page the columns belong to Chrome's
 * multicol, which does not implement it. `break-inside: avoid` Chrome does honour.
 */
.rulebook-keep {
    break-inside: avoid;
}

.rulebook-chapter__body table {
    width: 100%;
    border-collapse: collapse;
    break-inside: avoid;
    margin: 2mm 0 4mm;
    font-size: 8pt;
    text-align: left;
}

.rulebook-chapter__body table th,
.rulebook-chapter__body table td {
    border: 0.5pt solid #cbd4dc;
    padding: 1mm 1.6mm;
}

/*
 * Stat tables: centre the numbers, leave the words ranged left.
 *
 * Every column except the first and the last is a stat — short values like M6, Res 5, SV1 — and
 * those read far better centred under a centred header. The first column is the unit or item name
 * and the last is Special, both of which are prose and belong ranged left.
 *
 * `:first-child`/`:last-child` rather than a class, because the tables come from authored markdown
 * and carry no markup of their own to hook onto.
 */
.rulebook-chapter__body table th,
.rulebook-chapter__body table td {
    text-align: center;
    /*
     * `text-align-last` too, and it is the one that actually does the work here.
     *
     * The body sets `text-align-last: left` (so paged.js's fragmentation markers do not leave
     * justified last lines), and that inherits into table cells. A one-line cell's only line is
     * also its LAST line, so it is aligned by `text-align-last` — which meant every stat value
     * stayed left while `text-align: center` sat there computing to `center` and doing nothing.
     */
    text-align-last: center;
}

.rulebook-chapter__body table th:first-child,
.rulebook-chapter__body table td:first-child,
.rulebook-chapter__body table th:last-child,
.rulebook-chapter__body table td:last-child {
    text-align: left;
    text-align-last: left;
}

.rulebook-chapter__body table th {
    font-family: 'DIN1451', sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: #14324f;
    color: #fff;
}

/* Zebra striping for readability at 8pt in a narrow column. */
.rulebook-chapter__body table tbody tr:nth-child(even) td {
    background: rgba(47, 95, 143, 0.055);
}

.rulebook-chapter__body figure {
    break-inside: avoid;
    margin: 3mm 0;
    text-align: center;
}

.rulebook-chapter__body figure img {
    width: 100%;
}

.rulebook-chapter__body figcaption {
    font-family: 'DIN1451', sans-serif;
    font-size: 7.5pt;
    letter-spacing: 0.04em;
    color: #6b7783;
    margin-top: 1mm;
}

/* Extraction failed for this diagram; a clearly-marked placeholder rather than a silent gap,
 * per the diagram manifest process. */
.rulebook-chapter__body .rulebook-figure--placeholder .rulebook-figure__placeholder-box {
    border: 1px dashed #a8323c;
    color: #a8323c;
    font-size: 8pt;
    padding: 6mm;
    background: rgba(168, 50, 60, 0.06);
}

.rulebook-chapter__body blockquote {
    break-inside: avoid;
    margin: 3mm 0;
    padding: 2.4mm 3mm;
    background: rgba(47, 95, 143, 0.06);
    border-left: 2px solid #2f5f8f;
    font-size: 9pt;
}

.rulebook-chapter__body blockquote p:last-child {
    margin-bottom: 0;
}

/*
 * In-book links — cross-references, and every table-of-contents entry.
 *
 * Left unstyled these render as browser-default blue-and-underlined, which reads as a web page
 * rather than a book and is especially loud in the PDF, where the whole contents page is links.
 * Coloured but not underlined stays obviously clickable on screen and unobtrusive in print.
 */
.rulebook-chapter__body a {
    color: #2f5f8f;
    text-decoration: none;
}

/*
 * The table of contents, filled by buildRulebookReaderChapters into the marker that
 * renderRulebookBlocks emits.
 *
 * No list markers: a book's contents is a list of names and page numbers, and discs down the
 * margin make it look like an outline of the rules rather than a way into them. The sections nest
 * under their chapter, so the indent carries the hierarchy on its own.
 */
.rulebook-toc__list,
.rulebook-toc__sections {
    list-style: none;
    margin: 0;
    padding: 0;
    /* Never justified. The body sets `justify` for prose, and an entry long enough to wrap -- "9.
     * Vehicles, Drones & Humongous Beasts" -- then has its first line stretched across the full
     * column. `text-align-last` does not help: that line is not the last one. */
    text-align: left;
}

.rulebook-toc__entry {
    margin-bottom: 1.5mm;
}

.rulebook-toc__entry > a {
    font-family: 'Orbitron', sans-serif;
    font-weight: 600;
    font-size: 9pt;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #0d1b28;
}

.rulebook-toc__sections {
    margin: 0.6mm 0 2.4mm 4mm;
}

.rulebook-toc__entry-section {
    font-size: 8.5pt;
    line-height: 1.4;
}

/*
 * The index, filled by buildRulebookReaderChapters into the marker renderRulebookBlocks emits.
 *
 * Same shape as the contents page otherwise: no list markers, and page numbers generated in print
 * only. An index entry's `<li>` also holds a nested `<ul>` of its children, so the `<li>` itself
 * cannot be a flex row the way a contents entry (label + leader only) can -- the leader would have
 * nothing to grow against but the children fighting it for the same row. `renderNode`
 * (rulebook-index.ts) instead wraps the label, leader and page numbers in a `.rulebook-index__row`
 * div that sits ABOVE the children `<ul>` as a sibling, not a wrapper -- the row is the flex
 * container, and the children nest below it undisturbed. See rulebook-print.css for the flex
 * rules, mirroring `.rulebook-toc__leader`.
 * Three levels of nesting, indented rather than bulleted, because the source index carries the
 * hierarchy that way and discs down the margin read as an outline of the rules rather than a way
 * into them.
 */
.rulebook-index__list,
.rulebook-index__children {
    list-style: none;
    margin: 0;
    padding: 0;
    /* Never justified. An entry long enough to wrap would otherwise have its first line stretched
     * across the column; `text-align-last` does not help, since that line is not the last one. */
    text-align: left;
}

.rulebook-index__entry {
    font-size: 8.5pt;
    line-height: 1.35;
    /* An entry and its children should not be split across a column unless they have to be. */
    break-inside: avoid;
}

/*
 * Holds the label, leader and page numbers -- everything except the children `<ul>`, which is its
 * sibling rather than its content. Plain block here: the flex layout that makes the leader grow
 * between the label and the page numbers is print-only (rulebook-print.css), since it exists only
 * to leave room for page numbers that only exist once the book is paginated. On screen this is
 * just a block containing inline label/leader/page-number spans, same as before the row existed.
 */
.rulebook-index__row {
    display: block;
}

.rulebook-index__children {
    margin-left: 3mm;
}

.rulebook-index__label {
    font-family: 'DIN1451', sans-serif;
    letter-spacing: 0.02em;
    color: #0d1b28;
}

.rulebook-index__see,
.rulebook-index__see-also {
    font-style: italic;
    color: #6b7783;
    margin-left: 1mm;
}

/* An index runs long; two columns of it on one page is the convention and keeps it scannable. */
.rulebook-chapter__body .rulebook-index__list {
    orphans: 2;
    widows: 2;
}

/*
 * The cover.
 *
 * Hooked on `[data-chapter-anchor='cover']`, which the page already puts on every chapter article —
 * so the cover needs no component change and no class the data layer cannot express.
 *
 * The chapter mast renders the book title as the page's <h1>; everything here is about letting that
 * breathe and pushing the credits back. A cover is one thing to look at and a lot of small print,
 * which is the opposite of how the rest of the book is set.
 */
.rulebook-chapter[data-chapter-anchor='cover'] .rulebook-chapter__mast {
    /* No rule line: it reads as a chapter opener, which is exactly what a cover is not. */
    border-bottom: none;
    margin-bottom: 12mm;
    padding-top: 26mm;
    text-align: center;
}

.rulebook-chapter[data-chapter-anchor='cover'] .rulebook-chapter__mast h1 {
    font-size: 34pt;
    line-height: 1.1;
    letter-spacing: 0.01em;
}

/*
 * Single column: credits are a list of names, and splitting them across two makes the eye hunt.
 *
 * `text-align-last` as well as `text-align`, and it is the one doing the work. The base body rule
 * sets `text-align-last: left` so paged.js's fragmentation markers cannot leave justified last
 * lines — and every line of the masthead is a single line, therefore also a LAST line, so it stayed
 * ranged left under a centred title while `text-align: center` sat there doing nothing. Same trap
 * the stat tables hit further up this file.
 */
.rulebook-chapter[data-chapter-anchor='cover'] .rulebook-chapter__body {
    column-count: 1;
    column-rule: none;
    text-align: center;
    text-align-last: center;
    hyphens: none;
}

/* The masthead block — edition, version, strapline. */
.rulebook-chapter[data-chapter-anchor='cover'] [data-block-key='cover-masthead'] {
    font-family: 'DIN1451', sans-serif;
    font-size: 12pt;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #2f5f8f;
    margin-bottom: 16mm;
}

.rulebook-chapter[data-chapter-anchor='cover'] [data-block-key='cover-masthead'] em {
    display: block;
    margin-top: 4mm;
    font-family: 'RobotoHE', sans-serif;
    font-size: 9.5pt;
    letter-spacing: 0.02em;
    text-transform: none;
    font-style: italic;
    color: #6b7783;
}

/*
 * Credits: small and dense, in a centred column but set ragged-LEFT inside it.
 *
 * Centring the text itself was tried and is wrong for this content: a credit is a long list of
 * names, and centring gives every line a different left edge, so the eye loses its place hunting
 * for the next name. The source book left-aligns them for the same reason.
 */
.rulebook-chapter[data-chapter-anchor='cover'] [data-block-key='cover-credits'] {
    font-size: 8pt;
    line-height: 1.45;
    max-width: 145mm;
    margin: 0 auto;
    text-align: left;
    text-align-last: left;
}

.rulebook-chapter[data-chapter-anchor='cover'] [data-block-key='cover-credits'] strong {
    font-family: 'DIN1451', sans-serif;
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #2f5f8f;
}

/* Copyright, trademarks and the print permission — present, deliberately quiet. */
.rulebook-chapter[data-chapter-anchor='cover'] [data-block-key='cover-legal'] {
    margin-top: 14mm;
    font-size: 7pt;
    line-height: 1.4;
    color: #6b7783;
    max-width: 145mm;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    text-align-last: left;
}

/* The permission line is the one piece of small print that should read as a statement, not a
 * footnote buried in the block above it. */
.rulebook-chapter[data-chapter-anchor='cover'] [data-block-key='cover-legal'] p:last-child {
    margin-top: 4mm;
    text-align: center;
    font-style: italic;
}