/* ==========================================================================
   Data booklets: re-created study editions, built on the site's design tokens
   (css/style.css).
     .fb-*  the paged document: A4 sheets, running heads, formula tables
     .m-*   a small math notation layer (fractions, roots, limits, matrices)
   ========================================================================== */


/* ===== 1. Local tokens ===== */

.fb {
    --fb-paper:      var(--neo-white);
    --fb-paper-alt:  var(--neo-gray-100);
    --fb-ink:        var(--neo-black);
    --fb-ink-soft:   var(--neo-gray-700);
    --fb-ink-faint:  var(--neo-gray-600);
    --fb-rule:       var(--neo-border-color);
    --fb-rule-hard:  var(--neo-border-strong);
    --fb-accent:     var(--neo-primary);
    --fb-accent-ink: var(--neo-marker);
    --fb-mark:       var(--neo-secondary);
    --fb-mark-ink:   var(--neo-on-secondary);

    /* Geometry of an A4 sheet, in millimetres, so screen and print agree. */
    --fb-sheet-w: 210mm;
    --fb-sheet-h: 297mm;
    --fb-margin-x: 13mm;
    --fb-margin-y: 12mm;

    /* The three editorial columns of a formula table. */
    --fb-col-ref:  10mm;
    --fb-col-desc: 50mm;

    --fb-font-body: var(--neo-font-primary);
    --fb-font-mono: var(--neo-font-mono);

    color: var(--fb-ink);
    font-family: var(--fb-font-body);
}


/* ==========================================================================
   2. The page / sheet
   A sheet is a lifted card on screen and the physical page in print.
   ========================================================================== */

.fb-doc {
    padding: var(--neo-space-xxl) 0 var(--neo-space-xxxl);
}

.fb-sheet {
    position: relative;
    box-sizing: border-box;
    width: var(--fb-sheet-w);
    min-height: var(--fb-sheet-h);
    margin: 0 auto var(--neo-space-xl);
    padding: var(--fb-margin-y) var(--fb-margin-x);
    background-color: var(--fb-paper);
    border: var(--neo-border-width) solid var(--fb-rule);
    box-shadow: 6px 6px 0 var(--neo-shadow-color);
    display: flex;
    flex-direction: column;
}

/* Landscape sheet. The source booklet prints these tables sideways; here the
   sheet turns instead, so the table reads upright. */
.fb-sheet--landscape {
    width: var(--fb-sheet-h);
    min-height: var(--fb-sheet-w);
    padding: 11mm 13mm;
}

/* Running head: booklet title, topic, page number. */
.fb-sheet__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--neo-space-md);
    padding-bottom: 2mm;
    border-bottom: 1px solid var(--fb-rule);
    margin-bottom: 4mm;
    font-family: var(--fb-font-mono);
    font-size: 6.6pt;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fb-ink-faint);
}

.fb-sheet__head-name { color: var(--fb-ink); }
.fb-sheet__head-topic { flex: 1; text-align: center; }
.fb-sheet__head-num { color: var(--fb-accent-ink); font-weight: 600; }

.fb-sheet__body { flex: 1 1 auto; }

.fb-sheet__foot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--neo-space-md);
    margin-top: 4mm;
    padding-top: 2mm;
    border-top: 1px solid var(--fb-rule);
    font-family: var(--fb-font-mono);
    font-size: 6.6pt;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fb-ink-faint);
}

/* The screen-only page chip, sitting outside the printed area. */
.fb-sheet__chip {
    position: absolute;
    top: 0;
    left: -2.6rem;
    padding: 0.15rem 0.4rem;
    font-family: var(--fb-font-mono);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--fb-ink-faint);
    border: 1px solid var(--fb-rule);
    background-color: var(--fb-paper-alt);
}


/* ===== 3. Title block and topic bands ===== */

.fb-title {
    margin-bottom: 6mm;
}

.fb-title__kicker {
    display: inline-block;
    padding: 0.3rem 0.7rem;
    margin-bottom: 3mm;
    background-color: var(--fb-ink);
    color: var(--fb-paper);
    font-family: var(--fb-font-mono);
    font-size: 7.5pt;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.fb-title__main {
    font-size: 26pt;
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    margin: 0;
}

.fb-title__sub {
    margin-top: 2.5mm;
    max-width: 46ch;
    font-size: 9.5pt;
    font-weight: 300;
    line-height: 1.55;
    color: var(--fb-ink-soft);
}

.fb-title__rule {
    width: 100%;
    height: 3mm;
    margin-top: 4mm;
    background-image: repeating-linear-gradient(
        90deg,
        var(--fb-accent) 0 6mm,
        var(--fb-mark) 6mm 9mm,
        var(--fb-ink) 9mm 10mm
    );
}

/* Topic band: solid ink and reversed text, opening each syllabus topic. */
.fb-band {
    display: flex;
    align-items: center;
    gap: var(--neo-space-md);
    margin: 5mm 0 0;
    padding: 2.2mm 3mm;
    background-color: var(--fb-ink);
    color: var(--fb-paper);
}

.fb-band--sub {
    background-color: var(--fb-paper-alt);
    color: var(--fb-ink);
    border: 1px solid var(--fb-rule-hard);
}

.fb-band__index {
    font-family: var(--fb-font-mono);
    font-size: 8pt;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: var(--fb-mark);
    text-transform: uppercase;
}

.fb-band--sub .fb-band__index { color: var(--fb-accent-ink); }

.fb-band__name {
    flex: 1;
    font-size: 13pt;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    line-height: 1.1;
    margin: 0;
}

.fb-band:first-child { margin-top: 0; }


/* ===== 4. Formula tables ===== */

.fb-table {
    margin-top: 3mm;
    border: 1px solid var(--fb-rule);
    border-top: none;
}

.fb-group {
    display: block;
    border-bottom: 1px solid var(--fb-rule);
}

.fb-group:last-child { border-bottom: none; }

/* Highlight the whole group when a reader is hunting for it. */
.fb-group:hover { background-color: var(--fb-paper-alt); }

.fb-pair {
    display: grid;
    grid-template-columns: var(--fb-col-ref) var(--fb-col-desc) minmax(0, 1fr);
    align-items: stretch;
}

.fb-pair + .fb-pair > * { border-top: 1px dashed var(--fb-rule); }

.fb-pair > * {
    padding: 1.7mm 2.2mm;
    min-width: 0;
}

.fb-ref {
    font-family: var(--fb-font-mono);
    font-size: 7.6pt;
    font-weight: 600;
    color: var(--fb-accent-ink);
    border-right: 1px solid var(--fb-rule);
    padding-top: 2.1mm;
}

.fb-desc {
    font-size: 8.1pt;
    font-weight: 300;
    line-height: 1.35;
    color: var(--fb-ink-soft);
    border-right: 1px solid var(--fb-rule);
}

.fb-desc strong { font-weight: 700; color: var(--fb-ink); }

.fb-eq {
    font-family: var(--fb-font-math);
    font-size: 9.1pt;
    font-weight: 400;
    line-height: 1.75;
    color: var(--fb-ink);
}

.fb-eq + .fb-math-only { padding-top: 0; }

/* Notes and "where …" clauses inside the equation column. */
.fb-where {
    display: inline;
    font-family: var(--fb-font-body);
    font-size: 7.7pt;
    font-weight: 300;
    line-height: 1.4;
    color: var(--fb-ink-soft);
}

.fb-note {
    margin-top: 1.2mm;
    font-family: var(--fb-font-body);
    font-size: 7.7pt;
    font-weight: 300;
    line-height: 1.4;
    color: var(--fb-ink-soft);
}

/* One equation per line, with breathing room between them. */
.fb-eqs { display: block; }
.fb-eqs > * + * { margin-top: 1.6mm; }
.fb-eqs > .fb-where { display: block; margin-top: 0.8mm; }


/* ==========================================================================
   5. Math notation layer
   Everything is inline-flex so formulas reflow and break like text; only
   fractions, roots, limits and matrices stack.
   ========================================================================== */

.m {
    font-family: var(--fb-font-math);
    font-style: normal;
    white-space: normal;
}

/* Variables carry a little extra weight; numbers and operators stay light. */
.m-v { font-weight: 600; }

/* Long prose inside a formula should not be monospaced. */
.m-t { font-family: var(--fb-font-body); font-weight: 300; }

.m-op { color: var(--fb-ink-faint); padding: 0 0.08em; }

/* Function names (sin, log, lim, d) read as upright words, not variables. */
.m-fn { font-weight: 500; padding-right: 0.06em; }

.m-align { display: inline-block; width: 0.9em; }

/* Sub- and superscripts -------------------------------------------------- */

.m sup, .m sub {
    font-size: 0.66em;
    line-height: 0;
    font-weight: 500;
}

.m sup { vertical-align: 0.62em; }
.m sub { vertical-align: -0.28em; }

/* Stacked limits: the sub and sup sit directly above/below each other. */
.m-stack {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    vertical-align: -0.15em;
    line-height: 1;
    margin: 0 0.1em;
}

.m-stack__top,
.m-stack__bot {
    font-size: 0.58em;
    font-weight: 500;
    line-height: 1.1;
    white-space: nowrap;
}

/* Fractions -------------------------------------------------------------- */

.m-frac {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    vertical-align: -0.52em;
    margin: 0 0.18em;
    line-height: 1.18;
    text-align: center;
}

.m-frac__n,
.m-frac__d {
    display: block;
    padding: 0 0.3em;
    font-size: 0.94em;
    white-space: nowrap;
}

.m-frac__d {
    border-top: 1px solid currentColor;
    padding-top: 0.14em;
    margin-top: 0.1em;
}

/* A fraction with a big numerator/denominator gets a bit more room. */
.m-frac--wide .m-frac__n,
.m-frac--wide .m-frac__d { padding: 0 0.45em; }

/* Large operators with limits -------------------------------------------- */

.m-lim {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    vertical-align: middle;
    margin: 0 0.16em;
    line-height: 1;
}

.m-lim__op {
    font-family: var(--fb-font-body);
    font-size: 1.7em;
    font-weight: 400;
    line-height: 0.9;
}

.m-lim__top,
.m-lim__bot {
    font-size: 0.6em;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    color: var(--fb-ink-soft);
}

/* An integral is a tall thin glyph: give it room to sit on the baseline. */
.m-lim:not(.m-lim--fn) { vertical-align: -0.28em; }
.m-lim:not(.m-lim--fn) .m-lim__op { padding: 0 0.04em; }

/* Inside a fraction the whole stack has to shrink or it bursts the rule. */
.m-frac .m-lim__op { font-size: 1.35em; }
.m-frac .m-lim__top,
.m-frac .m-lim__bot { font-size: 0.52em; }

/* Radicals --------------------------------------------------------------- */

.m-root {
    display: inline-flex;
    align-items: flex-start;
    margin: 0 0.08em;
}

.m-root__sym {
    font-size: 1.12em;
    line-height: 1;
    transform: translateY(0.06em);
}

.m-root__arg {
    border-top: 1px solid currentColor;
    padding: 0.1em 0.22em 0 0.12em;
    margin-left: -0.06em;
    margin-top: 0.12em;
    line-height: 1.35;
}

/* Delimiters that must grow around a stack ------------------------------- */

.m-paren {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

.m-paren__body { display: inline-block; padding: 0 0.05em; }

.m-paren__l,
.m-paren__r {
    display: inline-flex;
    align-items: center;
    font-weight: 300;
    line-height: 1;
    transform-origin: center;
    transform: scaleY(var(--m-stretch, 1));
}

.m-paren--mid { --m-stretch: 1.45; }
.m-paren--tall { --m-stretch: 2.3; }

/* Binomial coefficient stacks without a rule between the lines. */
.m-binom {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    vertical-align: -0.5em;
    margin: 0 0.14em;
    line-height: 1.05;
}

.m-binom__t, .m-binom__b { font-size: 0.62em; }

/* A stacked limit under a "lim" reads better set slightly tighter. */
.m-lim--fn .m-lim__op { font-size: 1em; }

/* Matrices and column vectors -------------------------------------------- */

.m-matrix {
    display: inline-grid;
    grid-auto-flow: column;
    gap: 0 0.9em;
    justify-items: center;
    align-items: center;
    vertical-align: middle;
    margin: 0 0.12em;
    padding: 0.12em 0;
}

.m-matrix__col {
    display: inline-grid;
    grid-auto-flow: row;
    gap: 0.14em 0;
    justify-items: center;
}

.m-matrix__col > span {
    display: block;
    line-height: 1.15;
    white-space: nowrap;
}

.m-row { display: inline-flex; align-items: center; gap: 0.1em; }

/* Bars and accents ------------------------------------------------------- */

.m-abs { padding: 0 0.06em; font-weight: 300; }

.m-vec { font-weight: 700; }

.m-bar {
    border-top: 1px solid currentColor;
    padding-top: 0.04em;
}


/* ===== 6. Data tables (constants, conversions, chemistry) ===== */

.fb-data {
    width: 100%;
    border-collapse: collapse;
    margin-top: 3mm;
    font-size: 7.8pt;
}

.fb-data th {
    background-color: var(--fb-ink);
    color: var(--fb-paper);
    font-family: var(--fb-font-mono);
    font-size: 6.8pt;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: left;
    padding: 1.4mm 2mm;
    vertical-align: bottom;
}

.fb-data td {
    padding: 1.15mm 2mm;
    border-bottom: 1px solid var(--fb-rule);
    vertical-align: top;
    line-height: 1.32;
}

.fb-data tbody tr:nth-child(even) { background-color: var(--fb-paper-alt); }

.fb-data .fb-data__num {
    font-family: var(--fb-font-mono);
    font-weight: 500;
    white-space: nowrap;
    text-align: right;
}

.fb-data .fb-data__sym {
    font-family: var(--fb-font-mono);
    font-weight: 600;
    color: var(--fb-accent-ink);
    white-space: nowrap;
}

.fb-data .fb-data__sub {
    font-size: 0.7em;
    vertical-align: -0.25em;
    font-weight: 500;
}

.fb-data__name { font-weight: 300; }

/* Reference lists -------------------------------------------------------- */

.fb-list {
    margin: 2mm 0 0;
    padding: 0;
    list-style: none;
    font-size: 8pt;
    font-weight: 300;
    line-height: 1.45;
    color: var(--fb-ink-soft);
}

.fb-list li {
    padding-left: 4mm;
    text-indent: -4mm;
    margin-bottom: 0.8mm;
}

.fb-list--num { counter-reset: fb-li; }
.fb-list--num li { counter-increment: fb-li; }
.fb-list--num li::before {
    content: "[" counter(fb-li) "]  ";
    font-family: var(--fb-font-mono);
    font-size: 0.85em;
    color: var(--fb-accent-ink);
}

/* Contents page ---------------------------------------------------------- */

.fb-toc { margin-top: 4mm; border-top: 2px solid var(--fb-ink); }

.fb-toc__row {
    display: grid;
    grid-template-columns: 14mm 1fr 16mm 16mm;
    align-items: baseline;
    gap: 3mm;
    padding: 2.6mm 0;
    border-bottom: 1px solid var(--fb-rule);
    text-decoration: none;
    color: inherit;
}

.fb-toc__row:hover { background-color: var(--fb-paper-alt); }

.fb-toc__ref {
    font-family: var(--fb-font-mono);
    font-size: 7.5pt;
    font-weight: 600;
    color: var(--fb-accent-ink);
    letter-spacing: 0.06em;
}

.fb-toc__name { font-size: 11pt; font-weight: 700; letter-spacing: -0.01em; }

.fb-toc__page {
    font-family: var(--fb-font-mono);
    font-size: 8pt;
    font-weight: 600;
    text-align: right;
}

.fb-toc__count {
    font-family: var(--fb-font-mono);
    font-size: 7pt;
    color: var(--fb-ink-faint);
    text-align: right;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* Callout blocks --------------------------------------------------------- */

.fb-callout {
    margin-top: 3mm;
    padding: 2.5mm 3mm;
    border-left: 3px solid var(--fb-accent);
    background-color: var(--fb-paper-alt);
    font-size: 8pt;
    font-weight: 300;
    line-height: 1.5;
    color: var(--fb-ink-soft);
}

.fb-callout strong { font-weight: 700; color: var(--fb-ink); }

.fb-callout--mark {
    border-left-color: var(--fb-mark);
}

/* The re-creation notice. Quiet, but it has to be there. */
.fb-disclaimer {
    margin-top: 5mm;
    padding-top: 2.5mm;
    border-top: 1px solid var(--fb-rule);
    font-size: 6.8pt;
    font-weight: 300;
    line-height: 1.5;
    color: var(--fb-ink-faint);
}

/* Generic helpers -------------------------------------------------------- */

.fb-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 6mm;
}

.fb-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0 5mm;
}

.fb-mt-sm { margin-top: 2mm; }
.fb-mt-md { margin-top: 4mm; }
.fb-mt-lg { margin-top: 6mm; }
.fb-avoid { break-inside: avoid; }



/* ==========================================================================
   12. Mathematics: MathML in TeX Gyre Pagella Math
   Formulas are MathML, so the browser handles fraction bars, stretchy
   delimiters and operator limits with no library and no JavaScript.
   ========================================================================== */

/* TeX Gyre Pagella Math; Latin Modern Math was rejected because Chrome sets
   its f(x) as f ( x ) and it has a lower x-height. */
@font-face {
    font-family: 'TeX Gyre Pagella Math';
    src: url('./fonts/texgyrepagella-math.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.fb {
    --fb-font-math: 'TeX Gyre Pagella Math', 'STIX Two Math', 'TeX Gyre Termes Math',
                    'Cambria Math', 'Times New Roman', serif;
}

.fb math {
    font-family: var(--fb-font-math);
    font-size: 1.06em;
    font-weight: 400;
    line-height: 1;
    color: inherit;
    text-indent: 0;
    /* Display-style maths inside an inline-level element. */
    math-style: normal;
}

/* Never set `display: block` on a <math>: the contents end up pushed to the
   right edge, where `text-align` cannot move them. Use math-style: normal. */

/* \text{...} is prose inside a formula, so it keeps the page's text face. */
.fb math mtext {
    font-family: var(--fb-font-body);
    font-size: 0.92em;
    font-weight: 300;
}

/* Chemical formulas sit on the cell baseline with the surrounding data. */
.fb-data math { vertical-align: -0.15em; }



/* ===== 7. Screen-only sheet frame ===== */

@media screen {
    .fb-doc {
        background-color: var(--neo-gray-200);
        overflow-x: auto;
    }

    .fb-toolbar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--neo-space-sm);
        max-width: var(--fb-sheet-w);
        margin: 0 auto var(--neo-space-lg);
    }

.fb-toolbar__pdf {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.35rem 0.8rem;
        border: var(--neo-border-width) solid var(--neo-border-color);
        background-color: var(--neo-white);
        box-shadow: var(--neo-shadow-offset) var(--neo-shadow-offset) 0 var(--neo-shadow-color);
        font-family: var(--neo-font-mono);
        font-size: var(--neo-font-size-label);
        font-weight: 500;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--neo-black);
        text-decoration: none;
        transition: var(--neo-transition-fast);
    }

    .fb-toolbar__pdf:hover {
        background-color: var(--neo-primary);
        color: var(--neo-on-primary);
        transform: translate(1px, 1px);
        box-shadow: 1px 1px 0 var(--neo-shadow-color);
    }

    .fb-toolbar__note {
        font-family: var(--fb-font-mono);
        font-size: var(--neo-font-size-label);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--neo-gray-600);
    }
}

@media print {
    .fb-toolbar,
    .fb-sheet__chip { display: none !important; }
}


/* ===== 8. Print: one sheet, one physical page ===== */

@page {
    size: A4;
    margin: 0;
}

/* Named page for .fb-sheet--landscape, so one document can mix orientations. */
@page fb-landscape {
    size: A4 landscape;
    margin: 0;
}

@media print {
    .fb {
        --fb-paper: #ffffff;
        --fb-paper-alt: #f2f2f1;
        --fb-ink: #0a0a0a;
        --fb-ink-soft: #3a3a39;
        --fb-ink-faint: #6b6b69;
        --fb-rule: rgba(10, 10, 10, 0.22);
        --fb-rule-hard: rgba(10, 10, 10, 0.4);
        --fb-accent: #4a1fd6;
        --fb-accent-ink: #4a1fd6;
        --fb-mark: #e1ff00;
        --fb-mark-ink: #000000;
    }

    html, body {
        background: #ffffff !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* The document takes over the page: no site chrome survives the print. */
    .neo-navbar,
    .neo-footer,
    .neo-skip-link,
    nav,
    footer { display: none !important; }

    .fb-doc { padding: 0 !important; background: #ffffff !important; }

    /* Neutralise Bootstrap's container, which would centre and clip the sheet. */
    .fb-doc > .container,
    .fb-doc .container {
        width: 210mm !important;
        max-width: 210mm !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .fb-sheet {
        width: 210mm;
        height: 297mm;
        min-height: 0;
        margin: 0;
        padding: var(--fb-margin-y) var(--fb-margin-x);
        border: none;
        box-shadow: none;
        overflow: hidden;
        break-inside: avoid;
        page-break-inside: avoid;
        break-after: page;
        page-break-after: always;
    }

    .fb-sheet:last-child {
        break-after: auto;
        page-break-after: auto;
    }

    .fb-sheet--landscape {
        page: fb-landscape;
        width: 297mm;
        height: 210mm;
        min-height: 0;
        padding: 11mm 13mm;
    }

    /* Keep colour that carries meaning: the topic bands and the rule strips. */
    .fb-band,
    .fb-data th,
    .fb-title__kicker,
    .fb-title__rule {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* ===== 9. Hub page: the shelf the three booklets sit on ===== */

.fb-hub {
    padding: var(--neo-space-xxl) 0 var(--neo-space-xxxl);
    background-color: var(--neo-gray-200);
}

.fb-hub__head { max-width: 62ch; margin-bottom: var(--neo-space-xl); }

.fb-hub__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--neo-space-lg);
}

.fb-hub__card {
    display: flex;
    flex-direction: column;
    background-color: var(--neo-white);
    border: var(--neo-border-width) solid var(--neo-border-color);
    box-shadow: var(--neo-shadow-offset) var(--neo-shadow-offset) 0 var(--neo-shadow-color);
    padding: var(--neo-space-xl);
    color: inherit;
    text-decoration: none;
    transition: var(--neo-transition-normal);
}

.fb-hub__card:hover {
    transform: translate(-2px, -2px);
    border-color: var(--neo-border-strong);
    box-shadow: calc(var(--neo-shadow-offset) + 2px) calc(var(--neo-shadow-offset) + 2px) 0 var(--neo-shadow-color);
}

.fb-hub__index {
    font-family: var(--neo-font-mono);
    font-size: var(--neo-font-size-label);
    font-weight: 600;
    letter-spacing: var(--neo-tracking-label);
    text-transform: uppercase;
    color: var(--neo-marker);
    margin-bottom: var(--neo-space-md);
}

.fb-hub__title {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    margin: 0 0 var(--neo-space-sm);
}

.fb-hub__text {
    font-size: var(--neo-font-size-small);
    font-weight: 300;
    line-height: 1.6;
    color: var(--neo-gray-700);
    margin-bottom: var(--neo-space-lg);
}

.fb-hub__specs {
    margin: auto 0 0;
    padding: var(--neo-space-md) 0 0;
    border-top: 1px solid var(--neo-border-color);
    list-style: none;
    font-family: var(--neo-font-mono);
    font-size: var(--neo-font-size-label);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--neo-gray-600);
}

.fb-hub__specs li { padding: 0.18rem 0; }
.fb-hub__specs b { color: var(--neo-black); font-weight: 600; }

.fb-hub__card--pending { opacity: 0.55; }


/* ==========================================================================
   11. Chemistry data booklet: periodic table, diagrams, dense data tables
   ========================================================================== */

/* Long element tables: a sheet is 297 mm tall, so 40 rows have to be compact. */
.fb-data--dense {
    margin-top: 2mm;
    font-size: 6.7pt;
}

.fb-data--dense th {
    padding: 1mm 1.1mm;
    font-size: 5.7pt;
    letter-spacing: 0.06em;
}

.fb-data--dense td {
    padding: 0.62mm 1.1mm;
    line-height: 1.2;
}

/* The narrowest variant, used where several tables share the 182 mm column. */
.fb-data--mini {
    margin-top: 1.6mm;
    font-size: 6.2pt;
}

.fb-data--mini th {
    padding: 0.9mm 0.9mm;
    font-size: 5.4pt;
    letter-spacing: 0.04em;
}

.fb-data--mini td {
    padding: 0.5mm 0.9mm;
    line-height: 1.18;
}

/* Several tables across the content width (periodic-table-shaped datasets). */
.fb-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0 3mm;
}

.fb-grid-5 {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0 3mm;
}

/* A block heading above each of those side-by-side tables. */
.fb-block-head {
    margin-top: 3mm;
    padding-bottom: 0.8mm;
    border-bottom: 2px solid var(--fb-ink);
    font-family: var(--fb-font-mono);
    font-size: 6.4pt;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fb-ink);
}

.fb-block-head span { color: var(--fb-accent-ink); }


/* --- the periodic table ------------------------------------------------- */

.fb-ptable { margin-top: 3mm; }

/* Group numbers and period numbers sit outside the element grid. */
.fb-ptable__labels,
.fb-ptable__row {
    display: grid;
    grid-template-columns: repeat(18, minmax(0, 1fr));
    gap: 0.5mm;
}

.fb-ptable__labels {
    margin-bottom: 1mm;
    font-family: var(--fb-font-mono);
    font-size: 5.4pt;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--fb-ink-faint);
    text-align: center;
}

.fb-ptable__row { margin-bottom: 0.5mm; }

/* The two detached f-block rows are indented under groups 4-17. */
.fb-ptable__row--f {
    margin-left: 15.6mm;
    grid-template-columns: repeat(14, minmax(0, 1fr));
}

.fb-ptable__cell {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 15mm;
    padding: 0.9mm 0.7mm;
    border: 1px solid var(--fb-rule);
    background-color: var(--fb-paper);
    overflow: hidden;
}

.fb-ptable__cell--empty {
    border-color: transparent;
    background-color: transparent;
}

.fb-ptable__z {
    font-family: var(--fb-font-mono);
    font-size: 5pt;
    font-weight: 600;
    line-height: 1;
    color: var(--fb-accent-ink);
}

.fb-ptable__sym {
    font-family: var(--fb-font-mono);
    font-size: 8.4pt;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.fb-ptable__mass {
    font-family: var(--fb-font-mono);
    font-size: 5pt;
    font-weight: 500;
    line-height: 1;
    color: var(--fb-ink-soft);
    white-space: nowrap;
}

.fb-ptable__mark {
    font-size: 5.4pt;
    vertical-align: super;
    color: var(--fb-accent-ink);
}

.fb-ptable__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1mm 6mm;
    margin-top: 3mm;
    padding-top: 1.6mm;
    border-top: 1px solid var(--fb-rule);
    font-family: var(--fb-font-mono);
    font-size: 6pt;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--fb-ink-faint);
}

.fb-ptable__legend b { color: var(--fb-ink); font-weight: 600; }

.fb-ptable__note {
    margin-top: 1.6mm;
    font-size: 6.6pt;
    font-weight: 300;
    line-height: 1.45;
    color: var(--fb-ink-faint);
}


/* --- inline SVG diagrams ------------------------------------------------ */

.fb-figure {
    margin-top: 4mm;
    text-align: center;
}

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

.fb-figure--wheel svg { max-width: 118mm; margin: 0 auto; }
.fb-figure--tri svg { max-width: 172mm; margin: 0 auto; }

.fb-figure__cap {
    margin-top: 2.5mm;
    font-family: var(--fb-font-mono);
    font-size: 6.4pt;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fb-ink-faint);
}

/* Diagram typography: ink on paper, mono labels, no borrowed artwork. */
.fb-svg-label {
    font-family: var(--neo-font-mono);
    font-size: 11px;
    font-weight: 500;
    fill: #0a0a0a;
}

.fb-svg-label--sm { font-size: 9px; fill: #6b6b69; }
.fb-svg-label--lg { font-size: 13px; font-weight: 700; letter-spacing: 0.02em; }
.fb-svg-label--inv { fill: #ffffff; }
.fb-svg-rule { stroke: #0a0a0a; stroke-width: 1.2; fill: none; }
.fb-svg-rule--thin { stroke: #0a0a0a; stroke-width: 0.5; opacity: 0.45; }
.fb-svg-rule--dash { stroke: #0a0a0a; stroke-width: 1; stroke-dasharray: 4 3; }
.fb-svg-axis { stroke: #0a0a0a; stroke-width: 1.6; fill: none; }


/* --- landscape sheets ---------------------------------------------------- */
/* A landscape sheet is wider (271 mm vs 186 mm) but shorter (171 mm), so rows
   get taller and nothing has to wrap. */

.fb-data--roomy { font-size: 7pt; }
.fb-data--roomy th { padding: 1mm 2.2mm; font-size: 6.2pt; letter-spacing: 0.08em; }
.fb-data--roomy td { padding: 0.72mm 2.2mm; line-height: 1.25; }

.fb-data--comfy { font-size: 8pt; }
.fb-data--comfy th { padding: 1.1mm 2.4mm; font-size: 6.4pt; letter-spacing: 0.08em; }
/* Maths has a taller line box than plain text, so the roomiest row style
   trims padding to keep 23 formula rows on one landscape sheet. */
.fb-data--comfy td { padding: 0.95mm 2.4mm; line-height: 1.3; }

/* The periodic table on a landscape sheet: the cells can be nearly square. */
.fb-ptable--wide .fb-ptable__cell { min-height: 14.2mm; padding: 1.1mm 0.9mm; }
.fb-ptable--wide .fb-ptable__sym { font-size: 9.6pt; }
.fb-ptable--wide .fb-ptable__mass { font-size: 5.8pt; }
.fb-ptable--wide .fb-ptable__z { font-size: 5.6pt; }

/* The element grids (melting points, ionization, radii) reuse the
   periodic-table shape, one value per line. */
.fb-ptable--data .fb-ptable__cell { min-height: 14.6mm; padding: 0.9mm 0.6mm; }
.fb-ptable--data .fb-ptable__sym { font-size: 7.6pt; line-height: 1.1; }
.fb-ptable--data .fb-ptable__z { font-size: 4.6pt; }

.fb-ptable__val {
    font-family: var(--fb-font-mono);
    font-size: 5pt;
    font-weight: 500;
    line-height: 1.2;
    color: var(--fb-ink-soft);
    white-space: nowrap;
}

.fb-ptable__val--en { color: var(--fb-accent-ink); font-weight: 600; }
.fb-ptable__val--sub { color: var(--fb-ink-faint); }

/* The infrared range chart under the infrared table. */
.fb-chart { margin-top: 3.5mm; }

/* --- helpers used by the chemistry tables --------------------------------- */

/* Column headings keep their own case: "kJ mol⁻¹" must not become "KJ MOL⁻¹". */
.fb-data th .m {
    text-transform: none;
    letter-spacing: 0.02em;
}

/* Chemistry formula in a data cell: maths that may wrap, without the accent colour. */
.fb-data__formula {
    font-family: var(--fb-font-mono);
    font-weight: 500;
}

/* Inside a formula cell the upright run is set in the maths face, so H2O stays
   one typeface. */
.fb-data__formula math mtext {
    font-family: var(--fb-font-math);
    font-size: 1em;
    font-weight: 400;
}

/* Section 1 is a two-column equation list: name on the left, maths right. */
.fb-data--eq th:first-child,
.fb-data--eq td:first-child { width: 66mm; }

.fb-data--eq td { vertical-align: middle; }

/* A 25-line contents list has to fit one sheet. */
.fb-toc--tight .fb-toc__row {
    grid-template-columns: 12mm 1fr 26mm 12mm;
    gap: 0 3mm;
    padding: 1.2mm 0;
}
.fb-toc--tight .fb-toc__name { font-size: 8.6pt; }
.fb-toc--tight .fb-toc__ref { font-size: 6.4pt; }
.fb-toc--tight .fb-toc__page { font-size: 7.2pt; }
.fb-toc--tight .fb-toc__count { font-size: 6.2pt; }

/* The colour wheel keeps its own spectral fills, which must survive print. */
@media print {
    .fb-wheel__sector,
    .fb-tri__region {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}


.fb-hub__downloads {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--neo-space-sm);
    margin-top: var(--neo-space-lg);
}

.fb-hub__downloads-label {
    font-family: var(--neo-font-mono);
    font-size: var(--neo-font-size-label);
    font-weight: 500;
    letter-spacing: var(--neo-tracking-label);
    text-transform: uppercase;
    color: var(--neo-gray-600);
    margin-right: var(--neo-space-sm);
}

.fb-hub__downloads a {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.45rem 0.9rem;
    border: var(--neo-border-width) solid var(--neo-border-color);
    background-color: var(--neo-white);
    box-shadow: var(--neo-shadow-offset) var(--neo-shadow-offset) 0 var(--neo-shadow-color);
    font-family: var(--neo-font-primary);
    font-size: var(--neo-font-size-small);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--neo-black);
    text-decoration: none;
    transition: var(--neo-transition-fast);
}

.fb-hub__downloads a span {
    font-family: var(--neo-font-mono);
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--neo-gray-600);
}

.fb-hub__downloads a:hover {
    background-color: var(--neo-primary);
    color: var(--neo-on-primary);
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 var(--neo-shadow-color);
}

.fb-hub__downloads a:hover span { color: var(--neo-on-primary); }