/* paperpages.css — site-specific tweaks on top of tufte.css for
 * felixmontag.com paper pages.
 *
 * Adapts Tufte CSS to pandoc's HTML5 output structure (header
 * #title-block-header, div.abstract, div.refsection from biblatex's
 * \begin{refsection}) and adds the back-to-homepage nav strip rendered
 * via --include-before-body in tools/build_html_papers.sh.
 *
 * Tufte CSS itself constrains body paragraphs and headings via the
 * `section > X` family of selectors. Pandoc emits the body inside a
 * top-level <div class="refsection"> instead of a <section>, so we
 * mirror Tufte's width rules onto that div.
 */

/* ----------------------------------------------------------------
 * Top nav strip (back to felixmontag.com)
 * ---------------------------------------------------------------- */
.paper-nav {
    font-size: 1.1rem;
    width: 55%;
    margin: 1.5rem 0 1rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #ddd;
    color: #5a5a5a;
    font-family: et-book, Palatino, "Palatino Linotype", "Palatino LT STD",
                 "Book Antiqua", Georgia, serif;
}
.paper-nav a {
    color: #5a5a5a;
    text-decoration: none;
    border-bottom: none;
}
.paper-nav a:hover {
    color: #111;
    border-bottom: 1px solid #ccc;
}

/* ----------------------------------------------------------------
 * Title block (pandoc --standalone)
 * <header id="title-block-header"> wraps the title and the abstract
 * ---------------------------------------------------------------- */
header#title-block-header {
    margin: 2rem 0;
}
header#title-block-header h1.title {
    font-style: italic;
    font-weight: 400;
    font-size: 2.6rem;
    line-height: 1.15;
    margin-top: 1rem;
    margin-bottom: 1.5rem;
    width: 55%;
}

/* Abstract panel. Quiet inset so it reads as title-block furniture
 * rather than competing with the body. */
.abstract {
    width: 55%;
    background: rgba(0, 0, 0, 0.025);
    padding: 1rem 1.4rem;
    margin: 2rem 0;
    font-size: 1.3rem;
    line-height: 1.7rem;
}
.abstract-title {
    font-style: normal;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

/* ----------------------------------------------------------------
 * Author / affiliation / date blocks under the title.
 * Pandoc wraps LaTeX \maketitle raw text in <div class="center">
 * and the JEL classification line in <div class="singlespacing">.
 * ---------------------------------------------------------------- */
div.center,
div.singlespacing {
    width: 55%;
    text-align: center;
    margin: 1.2rem 0;
    font-size: 1.3rem;
    line-height: 1.6rem;
}
div.center p,
div.singlespacing p {
    margin: 0.35rem 0;
}

/* ----------------------------------------------------------------
 * Body content. Pandoc's output structure depends on whether the
 * LaTeX source uses biblatex's \begin{refsection}:
 *   MFCJ:        body > header + div.center + div.singlespacing + div.refsection > {h1, p, figure, ...}
 *   MPD / MDP:   body > header + div.center + div.singlespacing + {h1, p, figure, ...}
 * Mirror Tufte's `section > X { width: 55% }` rules onto both
 * top-level contexts so paragraphs and headings stay in the text
 * column either way. Use :is() so the selector list stays readable.
 * ---------------------------------------------------------------- */
:is(body, div.refsection) > :is(p, ol, ul, dl, blockquote, pre, h1, h2, h3, h4) {
    width: 55%;
}

/* Section headings (LaTeX \section / \subsection / \subsubsection
 * map to h1 / h2 / h3). Smaller than the title h1, italic in
 * Tufte's display face. */
:is(body, div.refsection) > h1 {
    font-style: italic;
    font-weight: 400;
    font-size: 2.2rem;
    line-height: 1.1;
    margin-top: 4rem;
    margin-bottom: 1.5rem;
}
:is(body, div.refsection) > h2 {
    font-style: italic;
    font-weight: 400;
    font-size: 1.7rem;
    line-height: 1.15;
    margin-top: 2.5rem;
    margin-bottom: 1.4rem;
}
:is(body, div.refsection) > h3 {
    font-style: italic;
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 1.2;
    margin-top: 2rem;
    margin-bottom: 1.2rem;
}

/* ----------------------------------------------------------------
 * Figures and tables.
 *
 * Felix's papers wrap floats in deeply nested LaTeX environments that
 * pandoc preserves verbatim, e.g.
 *   <figure>
 *     <div class="minipage">
 *       <div class="threeparttable">
 *         <div class="center"><div class="minipage"><img></div></div>
 *         <div class="footnotesize">
 *           <div class="tablenotes"><p>Notes: ...</p></div>
 *         </div>
 *       </div>
 *     </div>
 *     <figcaption>...</figcaption>
 *   </figure>
 * and analogous shapes for tables. The defaults from Tufte CSS
 * constrain plain <figure> to max-width: 55% (and don't know about
 * .threeparttable, .tablenotes, .scriptsize at all), so the rendered
 * floats end up squeezed and the notes drift unaligned. Below we:
 *   (a) widen figures and table wrappers to 80% body width;
 *   (b) flatten the inner Tufte width constraints so children fill
 *       the float container;
 *   (c) lay out multi-panel figures (sibling .minipage children) in
 *       an auto-fit grid, with notes spanning all columns;
 *   (d) give tables booktabs-style horizontal rules;
 *   (e) align figure/table notes flush under the asset at the same
 *       width, with smaller quieter type.
 * ---------------------------------------------------------------- */

/* (a) Float container width. Apply to top-level <figure> and
 * <div class="threeparttable"> blocks; both are how the build emits
 * floats. Stay narrower than full body so a sidenote in the gutter
 * still has room. `clear: right` pushes the float past any active
 * right-floating sidenote so wide tables don't visually collide
 * with marginalia anchored to a preceding paragraph. */
:is(body, div.refsection) > figure,
:is(body, div.refsection) > div.threeparttable,
:is(body, div.refsection) figure {
    width: 80%;
    max-width: 80%;
    margin: 2.5rem 0 3rem 0;
    clear: right;
}

/* (b) Flatten nested-div width constraints inside floats so the
 * image / table / notes occupy the float container width. Without
 * this, Tufte's body-text 55% rule cascades into nested .minipage
 * wrappers and shrinks the image to ~30% of body width. */
figure div.minipage,
figure div.threeparttable,
figure div.center,
div.threeparttable div.minipage,
div.threeparttable div.center {
    width: 100%;
    max-width: 100%;
    margin: 0;
}

/* Images and embedded media inside a figure fill their container.
 * pdftocairo gives us PNGs that are typically 900–1500px wide; with
 * the container at 80% body, browsers scale them to fit. */
figure img,
figure embed,
figure svg {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

/* Figure caption. Tufte's default floats the caption right at 40%
 * width, which makes sense for marginalia but not for a pandoc
 * figcaption that's already inside a wide float. Reset to left-
 * aligned, full width, slightly muted. */
figure > figcaption {
    float: none;
    clear: none;
    max-width: 100%;
    width: 100%;
    margin: 0.8rem 0 0 0;
    text-align: left;
    font-size: 1.15rem;
    line-height: 1.45;
    color: #333;
}

/* (c) Multi-panel figures. When the threeparttable contains more
 * than one .minipage child, lay them out in a 2-up grid. The notes
 * sibling (.tablenotes, .footnotesize, .scriptsize) spans all
 * columns. Single-panel figures (one .minipage child) keep the
 * default block layout via the :not() guard. */
div.threeparttable:has(> div.minipage ~ div.minipage) {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    align-items: start;
}
div.threeparttable:has(> div.minipage ~ div.minipage) > div.tablenotes,
div.threeparttable:has(> div.minipage ~ div.minipage) > div.footnotesize,
div.threeparttable:has(> div.minipage ~ div.minipage) > div.scriptsize,
div.threeparttable:has(> div.minipage ~ div.minipage) > div.center,
div.threeparttable:has(> div.minipage ~ div.minipage) > table {
    grid-column: 1 / -1;
}

/* (d) Tables inside .threeparttable: booktabs-style horizontal rules
 * and tighter padding than the browser default. */
div.threeparttable > table,
div.threeparttable table {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.4;
}
div.threeparttable th,
div.threeparttable td {
    padding: 0.4rem 0.7rem;
    vertical-align: baseline;
}
div.threeparttable thead {
    border-top: 1.5px solid #333;
    border-bottom: 1px solid #999;
}
div.threeparttable thead th {
    font-weight: 600;
}
div.threeparttable tbody {
    border-bottom: 1.5px solid #333;
}
div.threeparttable caption {
    caption-side: top;
    text-align: left;
    font-weight: normal;
    margin-bottom: 0.6rem;
    font-size: 1.15rem;
    line-height: 1.45;
    color: #222;
}

/* Plain tables outside a threeparttable wrapper (rare; defensive). */
:is(body, div.refsection) > table {
    width: 80%;
    max-width: 80%;
    border-collapse: collapse;
    font-size: 1.05rem;
    margin: 2rem 0;
}
:is(body, div.refsection) > table th,
:is(body, div.refsection) > table td {
    padding: 0.4rem 0.7rem;
    border-bottom: 1px solid #ddd;
}

/* (e) Figure/table notes. Pandoc emits Felix's `\begin{tablenotes}`
 * as <div class="tablenotes"> (sometimes wrapped by .footnotesize
 * or .scriptsize from \footnotesize / \scriptsize size environments).
 * Notes always sit flush under the asset, at the asset's width,
 * with smaller quieter type. */
figure div.tablenotes,
figure div.footnotesize,
figure div.scriptsize,
div.threeparttable div.tablenotes,
div.threeparttable div.footnotesize,
div.threeparttable div.scriptsize,
div.threeparttable > div.tablenotes,
div.threeparttable > div.footnotesize,
div.threeparttable > div.scriptsize {
    width: 100%;
    max-width: 100%;
    margin: 0.6rem 0 0 0;
    font-size: 0.95rem;
    line-height: 1.45;
    color: #444;
}
figure div.tablenotes p,
figure div.footnotesize p,
figure div.scriptsize p,
div.threeparttable div.tablenotes p,
div.threeparttable div.footnotesize p,
div.threeparttable div.scriptsize p {
    margin: 0.25rem 0;
}

/* `.scriptsize` content (LaTeX \scriptsize) is intentionally tinier
 * than \footnotesize, so render it slightly smaller. */
figure div.scriptsize,
div.threeparttable div.scriptsize {
    font-size: 0.9rem;
}

/* Top-level <div class="footnotesize"> outside a float (e.g. for
 * inline small-text blocks in body prose) keeps the narrow text
 * column width — distinguish from inside-float notes above. */
:is(body, div.refsection) > div.footnotesize {
    width: 55%;
    font-size: 1.05rem;
    line-height: 1.5rem;
    color: #444;
}

/* ----------------------------------------------------------------
 * Math: give display equations room.
 *
 * Pandoc emits a display equation as a <span class="math display">
 * inside the surrounding paragraph; MathJax then replaces that span
 * with a block-level <mjx-container display="true">. The math
 * container is bounded by its parent <p>, which we've constrained
 * to 55% body width — so left untouched, the equation gets clipped
 * to less than 55% (and on some equations breaks visually after
 * the sum sign). Widen the paragraph when it actually contains a
 * display equation, and let the math container fill it, scrolling
 * horizontally if the equation is still wider than that.
 * ---------------------------------------------------------------- */
:is(body, div.refsection) > p:has(> mjx-container[display="true"]),
:is(body, div.refsection) > p:has(> span.math.display) {
    width: 90%;
}

mjx-container[display="true"] {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    margin: 1em 0;
}

/* ----------------------------------------------------------------
 * References block from --citeproc. Pandoc emits #refs / .references.
 * ---------------------------------------------------------------- */
#refs,
.references {
    width: 55%;
    margin-top: 4rem;
    padding-top: 1rem;
    border-top: 1px solid #ccc;
    font-size: 1.2rem;
    line-height: 1.55rem;
}
#refs > div.csl-entry,
.references > div.csl-entry,
#refs > p,
.references > p {
    margin: 0.5rem 0;
    padding-left: 2em;
    text-indent: -2em;
}

/* ----------------------------------------------------------------
 * Suppress pandoc's default end-of-document footnotes section. The
 * footnote_to_sidenote.lua filter has converted every Note element
 * into an inline Tufte sidenote; pandoc still emits an (empty in
 * practice) <section class="footnotes"> at the bottom — hide it.
 * ---------------------------------------------------------------- */
section.footnotes,
div.footnotes,
.footnotes {
    display: none;
}

/* ----------------------------------------------------------------
 * Mobile: collapse Tufte's asymmetric canvas so the text column
 * spans the viewport. Tufte CSS already handles this for its own
 * selectors via @media (max-width: 760px); mirror that here for
 * the pandoc-specific selectors above.
 * ---------------------------------------------------------------- */
@media (max-width: 760px) {
    .paper-nav,
    header#title-block-header h1.title,
    .abstract,
    div.center,
    div.singlespacing,
    :is(body, div.refsection) > :is(p, ol, ul, dl, blockquote, pre, h1, h2, h3, h4),
    :is(body, div.refsection) > figure,
    :is(body, div.refsection) figure,
    :is(body, div.refsection) > div.threeparttable,
    :is(body, div.refsection) > table,
    :is(body, div.refsection) table,
    div.footnotesize,
    #refs,
    .references,
    mjx-container[display="true"] {
        width: auto;
        max-width: 100%;
    }

    /* Collapse multi-panel figure grid to single column on phones. */
    div.threeparttable:has(> div.minipage ~ div.minipage) {
        grid-template-columns: 1fr;
    }
}