/* ============================================================================
   series.css — the shared "series shell" of the article series:
     reproduce/<abbr>.html + reproduce/index.html   (Tutorials for reproducing models)
     gcf/index.html                                 (Generalized covariate field)
   Loaded after assets/css/style.css, which provides the site header/footer and
   the colour/font tokens. Behaviour (nav accordion, scroll-spy, mobile nav
   toggle) is in assets/js/series.js.

   Two columns since 2026-09-15: the left series navigation is an accordion
   whose level-2 lists are the h2 headings of every page (static HTML written
   by reproduce/tools/convert.py --nav); the former right "On this page" TOC
   is gone and the content column took its width (max 1000 px).

   Typography and component tokens come from the encyclopedic method article
   (formerly gcf.html): 0.78rem body, Fraunces headings via --font-serif,
   cite-box, .thumb figures, .wikitable, .code-box, .note-box, .eq; the
   article-only components (hatnote, infobox, tool cards, references box)
   are in the "Method-article components" section below.
   ========================================================================== */

/* --- Base (gcf.html) ------------------------------------------------------ */
html, body { line-height: 1.8; }
p { line-height: 1.8; font-size: 0.78rem; }

/* --- Two-column layout ---------------------------------------------------- */
.series-layout {
    max-width: 1360px; margin: 0 auto; padding: 20px;
    display: flex; gap: 32px; align-items: stretch;   /* columns span the full height so the sticky nav stays in view */
}
.series-nav { width: 330px; flex: 0 0 330px; }   /* 150% of the original 220px so level-1 titles fit on one line */
.series-nav-inner {
    position: sticky; top: 20px; max-height: calc(100vh - 40px);
    overflow-y: auto; padding-top: 10px;
}
.content-column { flex: 1 1 auto; min-width: 0; max-width: 1000px; }   /* took the former TOC column's width */

/* --- Left: series navigation (accordion) ---------------------------------
   nav > a.series-home + ol.series-list > li.series-group[.current][.open]
     div.series-row   button.series-caret (toggles the group, aria-expanded) + a.series-title (link to the page)
     ul.series-sub    the page's h2 headings ([hidden] unless the group is open)
   Markup is static (convert.py --nav); series.js opens one group at a time and marks the current page's
   entry in view with a.active. The current page's group starts open (CURRENT_GROUP_OPEN in convert.py). */
.series-label {
    font-family: var(--font-sans); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--color-muted); padding: 0 12px 6px;
}
.series-nav a, .series-nav .series-title {
    display: block; font-family: var(--font-sans); font-size: 0.76rem; font-weight: 400;
    color: var(--color-muted); text-decoration: none; padding: 5px 12px 5px 20px;
    border-left: 2px solid transparent; transition: color 0.2s ease, border-color 0.2s ease; line-height: 1.4;
}
.series-nav a:hover, .series-nav .series-title:hover { color: var(--color-accent); border-left-color: var(--color-accent); }
.series-nav a.current { color: var(--color-accent); font-weight: 600; border-left-color: var(--color-accent); }
.series-home { margin-bottom: 6px; }
.series-list { list-style: none; margin: 0; padding: 0; }
.series-row { display: flex; align-items: stretch; position: relative; }
.series-nav a.series-title {                              /* level 1: "Name (ABBR)", one size; the link opens the page */
    flex: 1 1 auto; min-width: 0; padding-left: calc(22px + 1.3em); text-indent: -1.3em;   /* hanging indent: wrapped lines align under the title text, not the number */
    color: var(--color-heading); font-weight: 500;
}
.series-caret {                                           /* disclosure caret button: ▸ closed, ▾ open (toggles the group) */
    position: absolute; left: 2px; top: 5px; width: 18px; height: 20px; padding: 0; margin: 0;
    background: none; border: 0; cursor: pointer; color: var(--color-muted);
}
.series-caret::before { content: "\25B8"; display: inline-block; font-size: 0.6rem; line-height: 20px; transition: transform 0.15s ease; }
.series-caret:hover, .series-caret:focus-visible { color: var(--color-accent); }
.series-group.open > .series-row .series-caret::before { transform: rotate(90deg); }
.series-group.current > .series-row .series-title { color: var(--color-accent); font-weight: 600; border-left-color: var(--color-accent); }
.series-group.current > .series-row .series-caret { color: var(--color-accent); }
.series-list .n {
    display: inline-block; width: 1.3em; box-sizing: border-box; text-align: right; padding-right: 0.3em;   /* number hugs the text: right-aligned in its column, 0.3em gap; "12" still fits */
    font-variant-numeric: tabular-nums; color: var(--color-muted); font-weight: 400;
}
.series-sub { list-style: none; margin: 0 0 6px; padding: 0; }
.series-sub[hidden] { display: none; }
.series-nav .series-sub a {                               /* level 2: the page's h2 headings, hanging indent under the number */
    font-size: 0.7rem; line-height: 1.45; padding: 3px 12px 3px calc(22px + 1.3em + 1.1em); text-indent: -1.1em;
}
.series-nav .series-sub a.active { color: var(--color-accent); font-weight: 600; border-left-color: var(--color-accent); }
.series-toggle { display: none; }
.series-note {
    font-family: var(--font-sans); font-size: 0.68rem; font-style: italic; color: var(--color-muted);
    padding: 6px 12px 0; margin: 0; line-height: 1.4;
}

/* --- Content typography (gcf.html) --------------------------------------- */
.content-column h1 {
    font-family: var(--font-serif); font-size: 1.55rem; font-weight: 600; letter-spacing: -0.01em;
    margin-bottom: 4px; padding-bottom: 6px; border-bottom: 1px solid #a2a9b1;
}
.content-column h2 { font-size: 1.05rem; font-family: var(--font-serif); font-weight: 600; }
.content-column h3 { font-size: 0.85rem; font-weight: 600; margin-top: 22px; margin-bottom: 6px; }
.content-column h4 { font-size: 0.78rem; font-weight: 600; color: var(--color-muted); margin-top: 16px; margin-bottom: 4px; }
.section-heading { color: var(--color-heading); border-bottom: 1px solid #a2a9b1; padding-bottom: 4px; margin-top: 34px; margin-bottom: 10px; }
/* Numbered body headings for pages whose <body> carries class "numbered-headings" (gcf/index.html):
   h2 -> "1 ", "2 " … and h3 -> "1.1 ", "1.2 " … as ::before CSS counters, so the heading text itself is
   unchanged; the nav's level-2 entries of such a page carry the same numbers (convert.py --nav numbers the
   article's h2s in page order). The tutorials have their numbers in the heading text and do not use this. */
.numbered-headings .content-column { counter-reset: sec; }
.numbered-headings .content-column h2 { counter-increment: sec; counter-reset: subsec; }
.numbered-headings .content-column h3 { counter-increment: subsec; }
.numbered-headings .content-column h2::before { content: counter(sec) "\00a0"; }
.numbered-headings .content-column h3::before { content: counter(sec) "." counter(subsec) "\00a0"; }
.content-column a { color: var(--color-accent); text-decoration: none; }
.content-column a:hover { text-decoration: underline; }
.content-column ul, .content-column ol { font-size: 0.78rem; line-height: 1.8; margin: 6px 0 10px 22px; }
.content-column li { margin: 4px 0; }
.content-column code { font-size: 0.9em; }
.content-column p code, .content-column li code, .content-column td code, .content-column th code,
.content-column .thumbcaption code, .content-column .note-box code, .content-column .dlnote code {
    background: #f4f4f2; padding: 0 0.3em; border-radius: 3px;
}
dfn { font-style: normal; font-weight: 600; }

/* Title block */
.kicker {
    font-family: var(--font-sans); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--color-muted); margin: 0 0 6px;
}
.lead { font-size: 0.82rem; line-height: 1.8; margin: 10px 0 12px; }

/* Cite box (gcf.html) */
.cite-box { margin: 10px 0 12px; padding: 10px 14px; background: #f8f9fa; border: 1px solid #c8ccd1; border-left: 3px solid var(--color-accent); font-size: 0.76rem; line-height: 1.6; }
.cite-box .cite-label { display: block; font-family: var(--font-sans); font-size: 0.64rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); margin-bottom: 4px; }
.cite-box p { margin: 0 0 4px; font-size: 0.76rem; line-height: 1.6; }
.cite-box p.cite-note { font-size: 0.7rem; color: var(--color-muted); }
.cite-box .cite-links { font-size: 0.7rem; color: var(--color-muted); }

/* Download / app buttons */
.dl-block { margin: 12px 0 6px; }
.dl-item { margin: 0 0 12px; }
.btn-outline {
    display: inline-block; font-family: var(--font-sans); font-size: 0.74rem; font-weight: 600;
    color: var(--color-heading); background: #fff; border: 1px solid #a2a9b1; border-radius: 3px;
    padding: 5px 12px; line-height: 1.4; text-decoration: none;
}
.content-column .btn-outline { color: var(--color-heading); }
.content-column .btn-outline:hover { color: var(--color-accent); border-color: var(--color-accent); text-decoration: none; }
.dlnote { font-size: 0.7rem; color: var(--color-muted); line-height: 1.6; margin: 5px 0 0; }

/* Figures (gcf.html .thumb) */
.thumb { width: 50%; margin: 14px auto 18px; padding: 4px; border: 1px solid #c8ccd1; background: #f8f9fa; box-sizing: border-box; }
.thumb img { width: 100%; height: auto; display: block; }
.thumb .thumbcaption { font-size: 0.72rem; color: var(--color-text); line-height: 1.6; padding: 6px 4px 2px; }
.thumb .thumbcaption b { font-weight: 600; }
.thumb.wide { width: 100%; }
.thumb.mid { width: 68%; }
.thumb.half { width: 50%; margin: 14px auto 18px; }   /* featured figure of the tutorials (except LISP, GCF) */
.thumb-row.half { width: 50%; margin-left: auto; margin-right: auto; }   /* a side-by-side pair shown at half width */
.thumb-link { display: block; }
.thumb-tag {
    display: block; font-family: var(--font-sans); font-size: 0.62rem; font-weight: 600;
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted); margin-bottom: 2px;
}
.thumbcaption .credit { display: block; font-style: italic; color: var(--color-muted); font-size: 0.68rem; margin-top: 2px; }
.thumb-row { display: flex; gap: 14px; align-items: flex-start; margin: 14px 0 18px; }
.thumb-row > .thumb, .thumb-row > .table-block { flex: 1 1 0; min-width: 0; width: auto; margin: 0; }
.fignote { font-size: 0.72rem; color: var(--color-muted); line-height: 1.6; margin: -6px 0 14px; }

/* Tables (gcf.html wikitable) */
.table-block { margin: 14px 0 18px; }
.table-container { overflow-x: auto; margin: 0; }
table.wikitable { width: 100%; border-collapse: collapse; font-size: 0.72rem; line-height: 1.55; border: 1px solid #a2a9b1; background: #f8f9fa; }
table.wikitable caption { caption-side: top; text-align: left; font-size: 0.72rem; font-weight: 600; padding: 4px 2px 6px; color: var(--color-heading); }
table.wikitable th { background: #eaecf0; border: 1px solid #a2a9b1; padding: 6px 8px; text-align: center; font-weight: 600; font-size: 0.7rem; text-transform: none; letter-spacing: 0; color: var(--color-heading); }
table.wikitable td { border: 1px solid #a2a9b1; padding: 6px 8px; color: var(--color-text); vertical-align: top; }
table.wikitable td.num, table.wikitable th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.wikitable tr:hover { background: #f1f2f4; }
table.wikitable tr.hl td { background: #f1efe9; }
table.wikitable tr:last-child td { border-bottom: 1px solid #a2a9b1; }
table.wikitable.keyval th { text-align: left; width: 26%; vertical-align: top; }
.tnote { font-size: 0.68rem; color: var(--color-muted); line-height: 1.6; margin: 4px 0 0; }

/* Math (gcf.html) */
.math { font-family: "Times New Roman", Times, serif; font-style: italic; }
.eq { text-align: center; margin: 10px 0 14px; font-size: 0.9rem; overflow-x: auto; padding: 2px 0; }
.eq .math { font-size: 0.95rem; }
.eq .eqn { float: right; color: var(--color-muted); font-size: 0.7rem; padding-left: 18px; }
.mono { font-family: "SF Mono", Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 0.72rem; line-height: 1.9; }

/* Code boxes — the r-graph-gallery.com look (Bootstrap pre + Pandoc sourceCode): #f8f9fa ground,
   1px #e9ecef border, 5px radius, 12px 20px padding, code one step below body text (0.68rem for a
   0.78rem body), compact 1.2 line-height, no wrapping (horizontal scroll). The converter sets
   data-lang="r|bash|text" (series.js highlights "r" only) and class "tall" on boxes of more than 30
   lines, which are capped at 30 lines and scroll vertically — no buttons, no folding. */
.code-box { background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 5px; padding: 0; margin: 12px 0; }
.code-box pre { margin: 0; padding: 12px 20px; white-space: pre; overflow: auto; font-size: 0.68rem; line-height: 1.2; }  /* line-height must sit on the pre: its inherited 1.8 strut, not the code element, sets the line box */
.code-box .code-label + pre { padding-top: 6px; }
.content-column .code-box code, .code-box code {
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.68rem; line-height: 1.2; color: #212529; background: none; padding: 0;
}
.code-box.tall pre { max-height: calc(30 * 1.2 * 0.68rem + 24px); overflow-y: auto; }
.code-box .code-label {
    font-family: var(--font-sans); font-size: 0.6rem; font-weight: 500; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--color-muted); margin: 0; padding: 8px 20px 0;
}
/* Pandoc/Quarto-style R token colours (spans added by series.js; text content is never changed) */
.code-box .co { color: #5E5E5E; font-style: italic; }
.code-box .st { color: #20794D; }
.code-box .dv { color: #AD0000; }
.code-box .fu { color: #4758AB; }
.code-box .kw { color: #003B4F; }
.code-box .op { color: #5E5E5E; }

/* Notes (gcf.html .note-box; one calm style, no colour variants) */
.note-box { background: #faf8f5; border: 1px solid #ece6dd; border-left: 3px solid var(--color-accent); padding: 12px 16px; margin: 16px 0; border-radius: 4px; font-size: 0.76rem; line-height: 1.8; }
.note-box .note-title { font-weight: 600; color: var(--color-heading); margin-bottom: 2px; }
.note-box p, .note-box li { font-size: 0.76rem; }
.note-box p { margin: 0.4em 0; }
.note-box ul, .note-box ol { margin: 0.4em 0 0.4em 20px; }

/* Steps (former step cards, flattened) */
.step { margin: 26px 0 30px; }
.step-label {
    font-family: var(--font-sans); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--color-muted); margin: 0;
}
.step > h3 { margin-top: 2px; }

/* Flow chips (one neutral style) */
.flow { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; margin: 14px 0 16px; }
.flow .chip {
    flex: 1 1 0; min-width: 130px; border: 1px solid #c8ccd1; background: #f8f9fa; border-radius: 3px;
    padding: 7px 10px; font-family: var(--font-sans); font-size: 0.7rem; line-height: 1.45; color: var(--color-text);
}
.flow .chip b { display: block; font-size: 0.72rem; color: var(--color-heading); }
.flow .arrow { align-self: center; color: var(--color-muted); font-size: 0.9rem; }

/* Inline tag in prose (former .pairtag outside figures) */
.inline-tag {
    font-family: var(--font-sans); font-size: 0.66rem; font-weight: 600; color: var(--color-text);
    border: 1px solid #c8ccd1; border-radius: 3px; background: #f8f9fa; padding: 0 5px; white-space: nowrap;
}

/* Small muted badge (former .mini-badge) */
.badge-muted { font-size: 0.66rem; color: var(--color-muted); margin-left: 4px; white-space: nowrap; }

/* Prev / next */
.pager {
    display: flex; justify-content: space-between; gap: 20px; margin: 44px 0 10px;
    padding-top: 14px; border-top: 1px solid #c8ccd1; font-family: var(--font-sans); font-size: 0.76rem;
}
.pager a { display: block; max-width: 48%; color: var(--color-heading); text-decoration: none; line-height: 1.45; }
.content-column .pager a { color: var(--color-heading); }
.content-column .pager a:hover { color: var(--color-accent); text-decoration: none; }
.pager a span { display: block; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); }
.pager a.next { text-align: right; margin-left: auto; }

/* Series home: the content column has no max width (the card grid runs to the layout's right edge) */
.content-column.content-full { max-width: none; }

/* Series home cards: frameless (no background, border or shadow) — thumbnail, "N · ABBR", name,
   one-line description, "Online app" tag. 4 per row from 1100 px, 3 between, 2 from 900 px down, 1 from 600 px. */
.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 20px; margin: 18px 0 10px; }
.card { border: none; background: none; box-shadow: none; padding: 0; display: flex; flex-direction: column; }
.card img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; display: block; border: 1px solid #e0e0e0; background: #fff; box-sizing: border-box; }
.card-body { padding: 8px 0 0; }
.card .card-n { font-family: var(--font-sans); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); }
.card h3 { margin: 2px 0 4px; font-size: 0.86rem; line-height: 1.35; }
.content-column .card h3 a { color: var(--color-heading); }
.card p { font-size: 0.72rem; line-height: 1.6; margin: 0 0 6px; }
.tag-app {
    display: inline-block; font-family: var(--font-sans); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--color-accent); border: 1px solid var(--color-accent); border-radius: 3px; padding: 0 6px;
}

/* --- Method-article components (gcf/index.html; from the former gcf.html) --- */
.hatnote { font-size: 0.74rem; font-style: italic; color: var(--color-muted); padding: 4px 0 8px 1.2em; margin-bottom: 8px; }
.lead p:first-of-type { font-size: 0.82rem; }
sup.ref { font-size: 0.62rem; line-height: 0; vertical-align: super; }
sup.ref a { color: #3366cc; text-decoration: none; }

/* Infobox (floats right of the lead) */
.infobox {
    float: right; clear: right; width: 300px; margin: 6px 0 18px 26px; padding: 6px;
    background: #f8f9fa; border: 1px solid #a2a9b1; font-size: 0.72rem; line-height: 1.55;
    font-family: var(--font-sans);
}
.infobox .infobox-title { text-align: center; font-size: 0.88rem; font-weight: 600; padding: 6px 4px 8px; color: var(--color-heading); }
.infobox img { width: 100%; height: auto; display: block; }
.infobox .infobox-caption { font-size: 0.68rem; color: var(--color-muted); padding: 4px 2px 8px; text-align: center; line-height: 1.5; }
.infobox table { width: 100%; border-collapse: collapse; font-size: 0.72rem; }
.infobox th, .infobox td { padding: 4px 6px; vertical-align: top; border: none; text-align: left; line-height: 1.5; }
.infobox th { width: 38%; font-weight: 600; color: var(--color-heading); background: none; text-transform: none; letter-spacing: 0; font-size: 0.72rem; }
.infobox tr:hover { background: none; }
.infobox .infobox-section { background: #eaecf0; text-align: center; font-weight: 600; padding: 4px; color: var(--color-heading); }

/* Software cards */
.tool-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin: 12px 0 6px; }
.tool-card { border: 1px solid #e3e3e3; border-radius: 6px; padding: 12px 14px; background: #fafaf9; font-size: 0.74rem; line-height: 1.65; }
.tool-card h4 { margin: 0 0 4px; font-size: 0.78rem; color: var(--color-heading); text-transform: none; letter-spacing: 0; }
.tool-card .tool-kind { display: inline-block; font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted); margin-bottom: 4px; }
.tool-card p { margin: 0 0 6px; font-size: 0.74rem; }
.tool-card .tool-link { word-break: break-all; font-size: 0.7rem; }

/* References */
.references-box { background: #fafaf9; border: 1px solid #eee; border-left: 3px solid var(--color-accent); padding: 14px 20px; margin: 16px 0; border-radius: 4px; }
.references-box ol { margin-left: 20px; padding-left: 0; font-size: 0.72rem; }
.references-box li { font-size: 0.72rem; line-height: 1.7; margin: 6px 0; color: var(--color-muted); }
.references-box li:target { background: #fff3d6; }

/* --- Responsive ----------------------------------------------------------- */
@media (min-width: 1100px) {
    .card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
    .series-layout { gap: 28px; }
}
@media (max-width: 900px) {
    .series-layout { flex-direction: column; gap: 0; }
    .series-nav { width: 100%; flex: none; margin-bottom: 16px; }
    .series-nav-inner { position: static; max-height: none; overflow: visible; padding-top: 0; }
    .series-toggle {
        display: block; width: 100%; text-align: left; font-family: var(--font-sans); font-size: 0.8rem; font-weight: 600;
        color: var(--color-heading); padding: 8px 12px; border: 1px solid #c8ccd1; background: #f8f9fa; border-radius: 3px; cursor: pointer;
    }
    .series-toggle::after { content: "\25BE"; float: right; color: var(--color-muted); }
    .series-nav.open .series-toggle::after { content: "\25B4"; }
    .series-nav nav { display: none; border: 1px solid #c8ccd1; border-top: none; padding: 8px 0; }
    .series-nav.open nav { display: block; }
    .series-label { display: none; }
    .content-column { max-width: none; }
    .infobox { float: none; width: auto; margin: 10px 0 18px; }
    .thumb, .thumb.mid, .thumb.half { width: 100%; }
    .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .thumb-row { flex-direction: column; }
    .thumb-row.half { width: 100%; }
    .thumb-row > .thumb, .thumb-row > .table-block { width: 100%; }
    .pager { flex-direction: column; }
    .pager a { max-width: none; }
    .pager a.next { text-align: left; margin-left: 0; }
    .footer-inner { grid-template-columns: 1fr; gap: 16px; }
    .footer-bottom { flex-direction: column; gap: 8px; }
}
@media (max-width: 768px) {
    html, body { font-size: 16px; }
    p, .content-column li { font-size: 1rem; }
    .lead, .lead p:first-of-type { font-size: 1.02rem; }
    .content-column h1 { font-size: 1.6rem; }
    .content-column h2 { font-size: 1.3rem; }
    .content-column h3 { font-size: 1.1rem; }
    .content-column h4 { font-size: 0.95rem; }
    .thumb .thumbcaption, .note-box, .note-box p, .note-box li, .dlnote, .tnote, .fignote, .cite-box p, .card p, .flow .chip,
    .hatnote, .infobox, .infobox table, .tool-card, .tool-card p, .references-box li { font-size: 0.92rem; }
    table.wikitable { font-size: 0.85rem; }
    .content-column .code-box code, .code-box code { font-size: 0.875rem; }   /* one step below the 1rem body */
    .code-box.tall pre { max-height: calc(30 * 1.35 * 0.875rem + 24px); }
}
@media (max-width: 600px) {
    .card-grid { grid-template-columns: minmax(0, 1fr); }
}