/* Web-edition layout + typography for Introduction to Mechanics.
 *
 * Loaded AFTER LaTeXML.css / ltx-book.css (so these rules win) and after
 * stix2-fonts.css (which supplies the families). Targets LaTeXML's real class
 * vocabulary (ltx_*).
 *
 * Layout mirrors the print book: a readable text column on the left and a wide
 * right margin that holds BOTH sidenotes and figures (the book is a
 * margin-figure text). Notes and figures share the gutter and stack in document
 * order. Collapses to single-column inline flow on narrow screens.
 *
 * Palette mirrors rpbook.cls:
 *   headingcolor            rgb(.1,.3,.5)  -> #1a4d80
 *   emphasizebgcolor        rgb(.86,.94,1) -> #dbf0ff
 *   storyboxemphasizebgcolor rgb(.93,.97,1)-> #edf7ff
 */

:root {
  --heading: #1a4d80;
  --rule: #d8dee6;
  --ink: #1a1a1a;
  --muted: #5a6472;
  --emphasize-bg: #dbf0ff;
  --story-bg: #edf7ff;
  --shade-bg: #f0f0f0;
  --measure: 37.25rem;  /* body text column */
  --gutter: 15.75rem;   /* right margin: sidenotes AND figures */
  --gap: 2.5rem;        /* space between column and gutter */
  --pad: 2rem;          /* outer padding either side of the whole column */
  --nav-width: 15rem;   /* "On this page" sidebar when expanded */
  /* Total width of the centred column. Derived once: it used to be spelled out
   * as the same calc() in three places here plus a fourth hardcoded copy in
   * patch-web.py's sectiondl.css, which is how they drifted apart. */
  --page-width: calc(var(--measure) + var(--gap) + var(--gutter) + 2 * var(--pad));
}

/* ---- Page frame ---------------------------------------------------------- */
html { font-size: 17px; overflow-x: hidden; }   /* guard against float spill */
body {
  color: var(--ink);
  line-height: 1.5;
  background: #fff;
  margin: 0;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1;
}
.ltx_page_main, .ltx_page_content { margin: 0; padding: 0; }

/* The gutter is reserved as the document's right PADDING, so every block child
 * -- sections, paragraphs, figures -- is exactly `measure` wide. LaTeXML hoists
 * some margin notes to section level and leaves others inside a paragraph; by
 * making all those blocks the same width, a single negative margin carries BOTH
 * margin figures and sidenotes to the same gutter edge no matter where they sit.
 * box-sizing:border-box folds the padding into max-width, so nothing overflows. */
.ltx_document {
  box-sizing: border-box;
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 3.5rem var(--pad) 6rem;
  padding-right: calc(var(--pad) + var(--gap) + var(--gutter));
}
.ltx_chapter { counter-reset: sidenote; }

/* ---- Whole-book (--split) pages ----------------------------------------- *
 * The multi-document build has NO .ltx_document wrapper: the chapter sits
 * directly inside .ltx_page_content, so the centering above never applied and
 * the content ran full-width, sliding under our fixed left sidebar. LaTeXML
 * also adds a full-book TOC navbar (redundant with our nav + the index) and a
 * prev/next/up header. Give the chapter the same centered measure+gutter column
 * as the standalone build, hide the navbar, and keep the header as a slim
 * centered top bar for cross-chapter navigation. */
.ltx_page_content > .ltx_chapter {
  box-sizing: border-box;
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 1rem var(--pad) 6rem;
  padding-right: calc(var(--pad) + var(--gap) + var(--gutter));
}
.ltx_page_navbar { display: none; }
.ltx_page_header {
  box-sizing: border-box;
  max-width: var(--page-width);
  margin: 0 auto; padding: 1.2rem var(--pad) 0; font-size: .85rem;
}
.ltx_page_header .ltx_align_center {
  display: flex; flex-wrap: wrap; gap: 0 1.4em; justify-content: center;
  border-bottom: 1px solid var(--rule); padding-bottom: .6rem;
}
.ltx_page_header a.ltx_ref { color: var(--muted); }
.ltx_page_header a.ltx_ref:hover { color: var(--heading); }

/* ---- Headings ------------------------------------------------------------ */
.ltx_title_chapter, .ltx_title_section,
.ltx_title_subsection, .ltx_title_subsubsection {
  color: var(--heading);
  font-weight: 700;
  line-height: 1.15;
  margin: 2.2em 0 0.6em;
  max-width: var(--measure);
}
.ltx_title_chapter { font-size: 2.4rem; font-weight: 600; margin-top: 0; padding-bottom: .3em; }
.ltx_title_section { font-size: 1.7rem; }
.ltx_title_subsection { font-size: 1.3rem; }
.ltx_title_subsubsection { font-size: 1.08rem; color: var(--ink); }

/* ---- Body text ----------------------------------------------------------- */
.ltx_para, .ltx_p { max-width: var(--measure); }
.ltx_p { margin: 0 0 0.9em; }
.ltx_noindent .ltx_p { text-indent: 0; }
a.ltx_ref { color: var(--heading); text-decoration: none; }
a.ltx_ref:hover { text-decoration: underline; }

/* ---- Sidenotes (LaTeXML margin notes) ------------------------------------ *
 * Markup: span.ltx_note.ltx_role_margin
 *   > sup.ltx_note_mark                         (inline marker in the text)
 *   > span.ltx_note_outer > span.ltx_note_content
 *       > sup.ltx_note_mark  + span.ltx_note_type("margin: ") + content
 * We (a) drop the "margin: " type label, (b) replace the cycling dagger marks
 * with a number assigned by scripts/enhance-chapter.py. That script also moves
 * the in-text marker back onto the end of the sentence (LaTeXML hoists most
 * notes to block level, which otherwise strands the marker, and the sentence's
 * trailing period, on their own lines). Numbering is done in JS rather than CSS
 * counters precisely because the marker gets moved across the note in the DOM. */
.ltx_note.ltx_role_margin { position: relative; }
.ltx_note_type { display: none; }

/* in-text reference, sitting at the end of the annotated sentence */
.rp-note-ref {
  font-size: .68rem; vertical-align: super; line-height: 0;
  color: var(--heading); font-weight: 600; margin-left: .08em;
}
/* the matching number that prefixes the note out in the gutter. The number is
 * an inline <sup> sitting before the content's inline-block, whose baseline is
 * its LAST line -- so on a multi-line note a baseline-aligned number dropped to
 * the bottom (note 15) or the text rose above it (note 6). Top-align the number
 * and the block so the number sits beside the FIRST line. */
.rp-note-num {
  font-size: .82rem; vertical-align: top;
  color: var(--heading); font-weight: 600;
}
.ltx_note.ltx_role_margin .ltx_note_content .ltx_inline-logical-block {
  vertical-align: top;
}

/* LaTeXML ships margin notes as hover popups: the note is display:inline-block
 * (establishing its OWN containing block), the content is display:none until
 * :hover, and the marks are absolutely positioned inside a bordered popup box.
 * That inline-block is why a float on the content stayed put in the body text
 * -- it resolved against the tiny note box, not the paragraph. Undo all of it so
 * the note is a plain inline anchor and its content floats out to the gutter. */
.ltx_note.ltx_role_margin { display: inline; }
.ltx_note.ltx_role_margin .ltx_note_content {
  display: block;
  max-width: none; left: auto; font-size: inherit;
  background: none; padding: 0; border: 0; border-radius: 0; box-shadow: none;
}
.ltx_note.ltx_role_margin .ltx_note_content .ltx_note_mark { position: static; }
.ltx_note.ltx_role_margin:hover .ltx_note_content,
.ltx_note.ltx_role_margin .ltx_note_content:hover { position: static; z-index: auto; }

/* Only the OUTER wrapper floats into the gutter; the inline mark stays in the
 * text. The note is now inline, so the float resolves against the measure-wide
 * paragraph, and the negative margin carries it to the same gutter edge the
 * margin figures use. */
.ltx_note.ltx_role_margin .ltx_note_outer {
  display: block;
  float: right; clear: right;
  width: var(--gutter);
  margin-right: calc(-1 * (var(--gap) + var(--gutter)));
  margin-bottom: 1.1em;
  font-size: .82rem; line-height: 1.4; color: var(--ink);
}
.ltx_note.ltx_role_margin .ltx_note_content { display: block; }
/* The content paragraph is display:block by default, so it dropped to its own
 * line, leaving the number stranded above it. Inline it so the text runs right
 * after the number. */
.ltx_note_content .ltx_para,
.ltx_note_content .ltx_p { display: inline; max-width: none; margin: 0; }

/* ---- Figures ------------------------------------------------------------- *
 * Margin figures (\sidefigure -> rp_marginfig) float into the SAME gutter as
 * the sidenotes. They sit at section level (full-width containing block), so a
 * right float of width `gutter` lands flush at the gutter's left edge with no
 * negative margin -- aligning with the sidenotes above.
 * Body figures (\FigureC/\FigureP -> rp_bodyfig, and any untagged figure) stay
 * in the main text column, centered. */
.ltx_figure.rp_marginfig {
  float: right; clear: right;
  width: var(--gutter);
  margin: 0.4em 0 1.4em;
  margin-right: calc(-1 * (var(--gap) + var(--gutter)));  /* into the gutter, same
                                                             edge as sidenotes */
  text-align: center;
}
/* Problem figures (rp_probfig, applied by patch-web.py to figures inside a
 * "Problems for N.M" subsection). Print rebinds \sidefigure to
 * \inputproblems@sidefigure inside problem sections so the figure sets INLINE in
 * the column flow instead of in the margin; this is the web equivalent. No float,
 * so the figure stays directly under the problem that owns it. Capped well short
 * of the full measure and centred, because these are small line drawings that
 * look stretched at 37rem. */
.ltx_figure.rp_probfig {
  float: none; clear: both;
  width: auto;
  max-width: min(60%, 22rem);
  margin: 0.9em auto 1.5em;
  margin-right: auto;              /* cancel rp_marginfig's negative pull */
  text-align: center;
}
.ltx_figure.rp_probfig .ltx_caption { text-align: center; }

/* Figure source name, injected by patch-web.py. Print shows this on every figure
 * (\writefilename, enabled by the [filenames] class option the book driver uses);
 * this is the web equivalent. Deliberately quiet: it is a proofreading aid, so it
 * must not compete with the caption. Monospace so glyphs like l/1 and 0/O in a
 * file name are unambiguous, and selectable so a name can be copied. */
.rp-figname {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .56rem;              /* smaller now that it carries the "Filename:"
                                     prefix, so the line stays unobtrusive */
  line-height: 1.3;
  color: #8a8a8a;
  margin: .15em 0 0;
  text-align: center;
  word-break: break-all;          /* long stems must not widen the figure */
}

.ltx_figure {                      /* body figures (default) */
  max-width: var(--measure);
  margin: 1.6em 0;
  text-align: center;
}
.ltx_figure .ltx_graphics,
.ltx_figure object, .ltx_figure img,
.ltx_figure svg {
  max-width: 100%; height: auto;
}
.ltx_caption {
  font-size: .8rem; line-height: 1.4; color: var(--ink);
  margin-top: .5em; text-align: left;
  /* LaTeXML sets white-space:nowrap on .ltx_item; a caption of a figure inside
     a numbered sample solution (e.g. figs 10.11/10.12 in Sample 10.8, fig
     10.46) would inherit it and overflow on one unwrapped line. Force wrap. */
  white-space: normal;
}
.ltx_tag_figure { color: var(--heading); font-weight: 600; }

/* A problem whose number was orphaned into its own paragraph by a blank line
 * after \beginproblem (e.g. 11.2.11, 11.2.13, 11.4.9): drop the gap so the
 * number sits directly on the problem text instead of a blank-line break. */
.ltx_para:has(> .ltx_p > span.ltx_font_bold:only-child) > .ltx_p { margin-bottom: 0; }
.ltx_para:has(> .ltx_p > span.ltx_font_bold:only-child) { margin-bottom: 0; }

/* ---- Equations ----------------------------------------------------------- *
 * Wide equations (common in worked solutions) must scroll, not blow out the
 * page. scripts/enhance-chapter.py wraps every equation table in a
 * .rp-eqn-scroll <div>; THAT div is the scroll container, so the equation table
 * keeps its native display:table layout (centering pad-cells and the number
 * column intact). Setting display:block on the table itself (the old approach)
 * collapsed the pad-cells, which de-centered short equations and let the
 * zero-width number cell float back over the math -- the overlap bug. */
.rp-eqn-scroll {
  max-width: var(--measure);
  overflow-x: auto; overflow-y: hidden;
  margin: 0.6em 0;
}
/* The table fills the wrapper when the equation is narrow (so the pad-cells can
 * center it) and grows past it when the equation is wide (so it scrolls). */
.rp-eqn-scroll > .ltx_eqn_table { width: 100%; margin: 0; }
.ltx_eqn_table { margin: 0.6em 0; }
.ltx_tag_equation { color: var(--muted); }

/* The number cell ships as max-width:0 + float:right (it is meant to hang in a
 * wide print margin). In a measure-width column that float lands on top of the
 * math. Give it a real column with breathing room instead. */
.ltx_eqn_eqno { max-width: none; white-space: nowrap; padding-left: 1.4em; }
.ltx_eqn_eqno.ltx_align_right .ltx_tag { float: none; }

/* macOS hides scrollbars until you scroll, so an overflowing equation just looks
 * cut off against white. enhance-chapter.py adds .rp-scrolls to the equations
 * that actually overflow; force a thin, always-visible bar there as a scroll cue
 * (styling ::-webkit-scrollbar opts out of the overlay/auto-hiding bar). The
 * non-overflowing equations keep overflow:auto and show no bar. */
.rp-eqn-scroll { scrollbar-width: thin; scrollbar-color: #c5ccd6 transparent; }
.rp-eqn-scroll.rp-scrolls { overflow-x: scroll; }
.rp-eqn-scroll::-webkit-scrollbar { height: 8px; }
.rp-eqn-scroll::-webkit-scrollbar-thumb { background: #c5ccd6; border-radius: 4px; }
.rp-eqn-scroll::-webkit-scrollbar-track { background: transparent; }
/* STIX Two Math runs optically small next to the body/typewriter text, so scale
 * inline math up to sit level with it. */
.ltx_Math { font-size: 1.12em; }

/* ---- Accent placement --------------------------------------------------- *
 * Accents keep their natural glyph size (print draws them as ordinary TeX
 * accents; the STIX accent glyph is already small). Each accent is tagged by
 * scripts/postprocess-math.py so it can be positioned on its own -- browser
 * MathML reads accent heights from the font MATH table and sits the dots higher
 * than TeX does, while the hat already sits right. Tune the per-accent translate
 * here; the harpoon (left untagged) is not touched. */
.rp-acc-hat  { transform: translateY(0.35em); }   /* a touch below \dot;
                                                     postprocess also adds
                                                     stretchy="false" so the
                                                     circumflex no longer expands */
.rp-acc-dot  { transform: translateY(0.30em); }   /* \dot was sitting too high */
.rp-acc-ddot { transform: translateY(0.26em); }   /* \ddot, same but a touch less */
/* hats over dotless i/j (\ui, \uj): nudge right, like print's \skew4\hat. Repeats
 * the Y so it doesn't drop the single-axis transform above. */
.rp-acc-hat-ij { transform: translate(0.06em, 0.35em); }

/* Accents stacked on a VECTOR sit much higher: \dot{\vec L} is a nested
 * <mover> over <mover> (dot above the harpoon), so the dot starts a harpoon's
 * height up. Drop those further. The selector matches an accent whose preceding
 * sibling is the inner (harpoon) mover. */
math mover > mover + .rp-acc-dot  { transform: translateY(0.52em); }
math mover > mover + .rp-acc-ddot { transform: translateY(0.46em); }

/* Body-frame derivative letter (the pre-superscript B/A/C/F in \BdotvH,
 * \vQdotA..F): it renders as an mmultiscripts prescript at scriptstyle, which is
 * too small. Enlarge just that letter. */
.rp-bodyframe { font-size: 1.5em; }

/* ---- Back-of-book short answers: off the chapter page -------------------- *
 * Harvested onto a separate Answers page by the multi-document build. */
.rp_backans { display: none; }

/* ---- Lists --------------------------------------------------------------- */
/* box-sizing:border-box folds the 1.4em bullet indent into max-width so the
 * list's right edge stays at `measure`, matching paragraphs. Without it a
 * sidenote that sits INSIDE a list item resolves its right-float against a box
 * whose right edge is 1.4em past measure, landing 1.4em too far into the gutter
 * (e.g. the first Vectors-chapter sidenote, which lives in an itemize). */
.ltx_itemize, .ltx_enumerate { box-sizing: border-box; max-width: var(--measure); padding-left: 1.4em; }
/* A sidenote INSIDE a list item (e.g. the first Vectors-chapter sidenote, on the
 * "force F" item). LaTeXML wraps each item body in a .ltx_para set to
 * display:inline-block, which shrink-wraps to the item text -- so the note's
 * right-float would resolve against that narrow box and land mid-measure, high
 * and far left, instead of in the gutter. Make the note-bearing item body inline
 * so the float instead resolves against the list item, whose right edge (thanks
 * to border-box above) sits at `measure`, exactly like a paragraph sidenote. */
.ltx_item .ltx_tag + .ltx_para:has(.ltx_note.ltx_role_margin),
.ltx_item .ltx_tag + .ltx_para:has(.ltx_note.ltx_role_margin) > .ltx_p { display: inline; }
.ltx_item { margin: 0.3em 0; }

/* ---- Callout environments ------------------------------------------------ *
 * The print emphasize/storybox machinery (colorshaded + changemargin + vbox
 * splitting) is too low-level for LaTeXML, so bindings/rpmathwww.sty.ltxml
 * overrides those environments to emit .web_emphasize / .web_storybox divs, and
 * \storytitle/\theorytitle to emit a .web_boxtitle heading. */
/* Emphasize highlights stay within the reading measure (they are inline asides,
 * not full callouts). */
.ltx_role_emphasize, .web_emphasize {
  background: var(--emphasize-bg); padding: 0.8em 1em; border-radius: 4px;
  margin: 1.2em 0; max-width: var(--measure);
}
/* Story (text) boxes span the FULL width -- body measure PLUS the margin/sidenote
 * gutter -- just like print, where \storycolwidth = \fullsize = textwidth +
 * marginparsep + marginparwidth. They reach into the reserved right gutter with a
 * negative right margin, the same trick the sidenotes and margin figures use. */
.web_storybox {
  background: var(--story-bg); border: 1px solid var(--rule);
  padding: 0.8em 1em; border-radius: 4px;
  margin: 1.2em calc(-1 * (var(--gap) + var(--gutter))) 1.2em 0;
  max-width: calc(var(--measure) + var(--gap) + var(--gutter));
  /* A full-width box occupies the gutter too. Rather than dropping the box below
     floated margin material (clear), the enhance-chapter.js margin-packing pass
     lifts any colliding sidenote/figure UP into the empty margin above the box. */
}
/* Inside a full-width story box, paragraphs/lists must fill the box, not snap back
 * to the narrow reading measure. */
.web_storybox .ltx_para, .web_storybox .ltx_p,
.web_storybox .ltx_itemize, .web_storybox .ltx_enumerate { max-width: none; }
.web_boxtitle {
  font-weight: 600; color: var(--heading); margin: 0 0 .5em;
  font-size: 1.3rem; line-height: 1.25;
  /* LaTeXML gives a first paragraph a 2em text-indent (with !important); the box
     title should start flush at the box's padding edge. */
  text-indent: 0 !important;
}
.web_emphasize > .ltx_para:last-child .ltx_p:last-child,
.web_storybox > .ltx_para:last-child .ltx_p:last-child { margin-bottom: 0; }
/* Headings INSIDE a callout box must stay clearly subordinate to the box title
   (.web_boxtitle, 1.3rem) -- otherwise an in-box subsection reads like a real
   chapter section. Keep them modest and in the body colour. */
.web_storybox .ltx_title_subsection, .web_emphasize .ltx_title_subsection,
.web_storybox .ltx_title_subsubsection, .web_emphasize .ltx_title_subsubsection {
  font-size: 1.05rem; color: var(--ink); margin: .8em 0 .3em;
}
.web_answer { background: var(--emphasize-bg); padding: 0.6em 0.9em; border-radius: 4px; }
.ltx_font_sansserif { font-family: var(--stix-text); }

/* ---- Chapter navigation sidebar ----------------------------------------- *
 * Built by scripts/enhance-chapter.py from the section/box headings and dropped
 * at the top of <body>, outside the content tree. It lives in the empty left
 * margin beside the centred text column.
 *
 * It is position:fixed at left:0, so whether it clears the text depends purely
 * on how much slack the centred column leaves: (viewport - page-width) / 2. That
 * only exceeds the nav's own width above roughly 1520px, so at every ordinary
 * laptop width -- and at any zoom level, since zoom shrinks the CSS viewport --
 * it used to paint straight over live text. Two things fix that now:
 *   1. a toggle button (always available, at every width), and
 *   2. body.rp-nav-open, set by the same script, which reserves the nav's width
 *      as page inset in the band where the slack is not enough on its own.
 * The script defaults to open when there is room and closed when there is not,
 * and remembers the reader's choice in localStorage. */
.rp-chapter-nav {
  position: fixed; top: 0; left: 0; z-index: 20;
  box-sizing: border-box; max-height: 100vh; overflow-y: auto;
  padding: 2.4rem 1rem 2rem 1.6rem;
  font-size: .8rem; line-height: 1.35;
  background: #fff;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: #c5ccd6 transparent;
}
/* Before the script runs there is no nav at all, so there is no flash to guard
   against; the width is what the two states differ in. */
.rp-chapter-nav { width: var(--nav-width); }
.rp-chapter-nav.rp-nav-collapsed {
  width: auto; overflow: visible; padding: 1rem .7rem 1rem 1rem;
}
.rp-chapter-nav.rp-nav-collapsed .rp-nav-title,
.rp-chapter-nav.rp-nav-collapsed .rp-nav-meta,
.rp-chapter-nav.rp-nav-collapsed ul { display: none; }

/* The toggle. Deliberately OUTSIDE any media query: the index is reachable at
   every width, which is the whole point of making it collapsible. */
.rp-nav-toggle {
  display: block; margin: 0 0 1rem; padding: .3rem .5rem;
  border: 1px solid var(--rule); border-radius: 4px;
  background: #fff; color: var(--muted);
  font: inherit; font-size: .78rem; line-height: 1;
  cursor: pointer;
}
.rp-nav-toggle:hover, .rp-nav-toggle:focus-visible {
  color: var(--heading); border-color: var(--heading); background: var(--story-bg);
}
.rp-chapter-nav.rp-nav-collapsed .rp-nav-toggle { margin-bottom: 0; }
/* Hamburger when closed, chevron when open; the accessible name lives in
   aria-label, set by the script, so this is decorative only. */
.rp-nav-toggle::before { content: "\2039\2039"; }
.rp-chapter-nav.rp-nav-collapsed .rp-nav-toggle::before { content: "\2261"; }

.rp-nav-title {
  font-weight: 600; color: var(--heading); margin-bottom: .8em;
  text-transform: uppercase; letter-spacing: .05em; font-size: .68rem;
}
.rp-chapter-nav ul { list-style: none; margin: 0; padding: 0; }
.rp-chapter-nav li { margin: .1em 0; }
.rp-chapter-nav a {
  display: block; color: var(--muted); text-decoration: none;
  padding: .12em .4em .12em .6em;
  border-left: 2px solid transparent; border-radius: 0 3px 3px 0;
}
.rp-chapter-nav a:hover { color: var(--heading); background: var(--story-bg); }
.rp-chapter-nav .rp-nav-sub a { padding-left: 1.5em; font-size: .95em; color: #8a93a0; }
/* Callout boxes get their own indented, tinted entry so a "Box 10.2" reads as
   a distinct landmark rather than a section. */
.rp-chapter-nav .rp-nav-box a {
  padding-left: 1.5em; font-size: .9em; color: #6f7b8a; font-style: italic;
}
.rp-chapter-nav a.rp-active {
  color: var(--heading); font-weight: 600;
  border-left-color: var(--heading); background: var(--story-bg);
}

/* Nav open but the viewport too narrow to clear the centred column on its own:
   inset the page by the nav's width so they cannot overlap. .ltx_page_main wraps
   both the header and the content, and the chapter inside it is margin:0 auto,
   so padding here shifts the whole centring box rightwards. Above the upper
   bound the natural slack already exceeds --nav-width and no inset is needed. */
@media (min-width: 901px) and (max-width: 1560px) {
  body.rp-nav-open .ltx_page_main { padding-left: var(--nav-width); }
}

/* ---- Narrow screens: collapse the gutter, inline notes and figures ------- */
@media (max-width: 900px) {
  .ltx_document { padding-right: 1.2rem; padding-left: 1.2rem; }
  /* The --split build has no .ltx_document, so without the chapter selector here
     every chapter page kept its full --gutter of right padding on a phone, with
     nothing in it. */
  .ltx_page_content > .ltx_chapter {
    padding-right: 1.2rem; padding-left: 1.2rem;
  }
  /* Never inset for the nav at this width -- it is an overlay here, so give it
     an edge instead so it reads as floating above the text rather than in it. */
  body.rp-nav-open .ltx_page_main { padding-left: 0; }
  .rp-chapter-nav:not(.rp-nav-collapsed) {
    border-right: 1px solid var(--rule);
    box-shadow: 0 0 18px rgba(0, 0, 0, .13);
  }
  .ltx_para, .ltx_p, .ltx_itemize, .ltx_enumerate,
  .ltx_title_chapter, .ltx_title_section, .ltx_title_subsection,
  .rp-eqn-scroll { max-width: none; }
  .ltx_note.ltx_role_margin .ltx_note_outer {
    float: none; clear: both; width: auto; margin-right: 0;
    border-left: 3px solid var(--rule); padding-left: .9em; margin: .6em 0 1em;
  }
  .ltx_figure, .ltx_figure.rp_marginfig {
    float: none; clear: both; width: auto; max-width: 26rem;
    margin: 1.4em auto;
  }
  /* Relax the 60% cap on narrow screens -- 60% of a phone-width column is too
     small to read a line drawing. Needs its own rule: .ltx_figure.rp_probfig
     outranks the one-class selector above whatever the source order. */
  .ltx_figure.rp_probfig {
    max-width: min(92%, 26rem);
    margin: 1.2em auto;
  }
  .web_storybox {
    max-width: none; margin-right: 0;
  }
}

/* ---- Print / PDF --------------------------------------------------------- *
 * The fixed sidebar and the horizontal-scroll equation wrappers are on-screen
 * affordances. In print there is no scrolling, so reveal equation overflow
 * (running wide is better than silently clipping content) and drop the nav and
 * the build-tool footer. */
@media print {
  .rp-chapter-nav { display: none !important; }
  .ltx_page_footer { display: none; }
  .rp-eqn-scroll, .rp-eqn-scroll.rp-scrolls { overflow: visible; }
}