/* layout.css — responsive page layout for the LaTeX->HTML lecture notes.
 *
 * Owned by buildtools; nothing here is shared with the website. It replaces
 * css/LaTeXML-navbar-left.css, which pinned .ltx_page_navbar at a fixed
 * 450px and .ltx_page_main at position:absolute; left:500px — unreadable
 * below ~1250px, and impossible to put a header above.
 *
 * Three ideas, not a pile of breakpoints:
 *   (a) a fluid frame        — normal flow, grid only where there is room
 *   (b) contain what cannot reflow — maths, tables and code scroll locally
 *   (c) fluid media          — LaTeXML emits literal width="419" on figures
 */

/* ---- (a) fluid frame -------------------------------------------------- */

html { -webkit-text-size-adjust: 100%; }

body {
    max-width: 1140px;
    margin: 0 auto;
    overflow-wrap: break-word;
}

/* Undo the fixed/absolute positioning, at every width, in case a repo still
   ships LaTeXML-navbar-left.css. */
.ltx_page_navbar {
    position: static;
    left: auto;
    top: auto;
    width: auto;
    border: 0;
    font-size: .85rem;
}

/* LaTeXML.css sets .ltx_page_navbar li { white-space:nowrap; overflow:hidden },
   which clips chapter titles once the sidebar is narrower than the old fixed
   450px. Let them wrap, and tighten the nested-list indent so a full title
   fits in 18rem. */
.ltx_page_navbar li {
    white-space: normal;
    overflow: visible;
}

.ltx_page_navbar .ltx_toclist { padding-left: 1.1em; margin: .15em 0; }
.ltx_page_navbar > .ltx_TOC > .ltx_toclist { padding-left: 0; }
.ltx_page_navbar .ltx_tocentry { margin: .15em 0; }

.ltx_page_main {
    position: static;
    left: auto;
    top: auto;
    right: auto;
    width: auto;
    margin: 0;
}

/* Narrow: single column. The TOC comes first in source order, so cap it —
   otherwise a 13-chapter contents list buries the text on a phone. */
.ltx_page_navbar {
    max-height: 40vh;
    overflow-y: auto;
    padding: .5rem 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
}

@media (min-width: 60rem) {
    body:not(.sm-standalone) {
        display: grid;
        grid-template-columns: 18rem minmax(0, 1fr);
        grid-template-areas:
            "hdr hdr"
            "toc main"
            "ftr ftr";
        column-gap: 1.5rem;
    }
    .sm-header      { grid-area: hdr; }
    .sm-footer      { grid-area: ftr; }
    .ltx_page_navbar {
        grid-area: toc;
        position: sticky;
        top: 0;
        align-self: start;
        max-height: 100vh;
        border-bottom: 0;
        border-right: 1px solid rgba(0, 0, 0, .1);
    }
    .ltx_page_main  { grid-area: main; min-width: 0; }
}

/* minmax(0, 1fr) above is load-bearing: without the explicit 0 minimum a
   grid track refuses to shrink below its content, and one wide equation
   blows the page out sideways. */

/* ---- (b) contain what cannot reflow ----------------------------------- */

/* LaTeXML 0.8.8 renders display maths as <table class="ltx_eqn_table">.
   Note ltx_equation is ALSO used on <tr>, so scope to the table. */
table.ltx_eqn_table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: thin;    /* a real, if slim, scrollbar rather than an
                                 overlay one: a reader has to be able to tell
                                 that the equation continues. */
}

/* Real tables, but not the tabulars LaTeXML uses to lay out figure panels. */
table.ltx_tabular:not(.ltx_minipage):not(.ltx_figure_panel) {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

.ltx_table,
.ltx_verbatim,
.ltx_listing,
.ltx_picture { max-width: 100%; overflow-x: auto; }

/* ---- (c) fluid media -------------------------------------------------- */

.ltx_page_main img,
.ltx_page_main object,
.ltx_page_main svg,
.ltx_graphics {
    max-width: 100%;
    height: auto;
}

/* ---- landing page ----------------------------------------------------- */

/* index.html is the one page this build writes itself; it carries
   class="sm-standalone" so it opts out of the two-column grid. */
.sm-standalone .sm-page { max-width: 46rem; margin: 0 auto; }

.sm-page {
    padding: 1rem;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans",
                 sans-serif;
    line-height: 1.6;
}

.sm-page code,
.sm-page .sm-clone {
    display: block;
    overflow-x: auto;
    padding: .5rem .75rem;
    background: #f8f9fa;
    border-radius: .25rem;
    font-size: .9rem;
}