/* ------------------------------------------------------------------ *
 * Frontend Principal Engineering — Measured                          *
 * ------------------------------------------------------------------ */

/* Wider content: these pages are table- and code-heavy */
.content main {
    max-width: 900px;
}

pre {
    font-size: 0.87em;
    line-height: 1.5;
}

/* Chapter headings — subtle accent rule */
.content h1:first-of-type {
    border-left: 4px solid var(--links);
    padding-left: 0.6em;
}

:not(pre) > code {
    padding: 0.1em 0.3em;
    border-radius: 3px;
}

/* Phase dividers in the sidebar */
.chapter li.part-title {
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.78em;
    margin-top: 1.2em;
}

.chapter ol {
    padding-left: 1.6em;
}

/* ---- Measurement tables ------------------------------------------ *
 * Most tables in this book are results. Make numbers legible and let
 * wide tables scroll rather than overflow the page.                  */
.content table {
    display: block;
    overflow-x: auto;
    max-width: 100%;
    font-variant-numeric: tabular-nums;
}

.content table th {
    background-color: var(--table-header-bg);
    white-space: nowrap;
}

.content table td:not(:first-child) {
    font-variant-numeric: tabular-nums;
}

/* ---- ASCII pipeline diagrams -------------------------------------- *
 * Several chapters use box-drawing diagrams. Keep them from wrapping. */
.content pre > code {
    white-space: pre;
}

/* Blockquotes are used for the one-sentence mental models */
.content blockquote {
    border-left: 4px solid var(--quote-border);
    padding: 0.5em 1em;
    margin: 1.2em 0;
}

/* Prediction gates and warnings read better with breathing room */
.content h2 + blockquote,
.content h3 + blockquote {
    margin-top: 0.6em;
}

/* Details/summary used for progressive hints in step files */
.content details {
    border: 1px solid var(--table-border-color);
    border-radius: 4px;
    padding: 0.4em 0.8em;
    margin: 0.8em 0;
}

.content details > summary {
    cursor: pointer;
    font-weight: 600;
    padding: 0.2em 0;
}

.content details[open] > summary {
    margin-bottom: 0.6em;
    border-bottom: 1px solid var(--table-border-color);
}