/* Shared by the html format of every note. The PDF and the ePub never see it.
   Three fixes to Quarto's article layout, all of them things a long
   mathematical document on a phone runs into. */

/* --- 1. Keep the downloads reachable on a phone --------------------------
   The "Other Formats" links live inside #TOC, which lives inside
   #quarto-margin-sidebar, and Quarto sets that sidebar to display:none below
   its lg breakpoint. So on a phone -- where wanting the PDF or the ePub
   instead of the web page is most likely -- both links are simply gone.

   #quarto-content is a named-line grid, and the sidebar is placed in the same
   cell as the article (content-top / page-bottom), so merely un-hiding it
   lays it on top of the title. Dropping the grid to block on narrow screens
   stacks the two in source order instead, and the sidebar comes first in the
   markup, so the links land above the title where they read as part of the
   header.

   The contents list that shares the sidebar stays hidden: it has no mobile
   toggle to collapse into, and a full section list stacked above the abstract
   pushes the note itself off the screen.

   The breakpoint is 1200px, not Quarto's own 992px. Between the two, Quarto
   keeps the margin sidebar but takes its width out of the article, leaving a
   590px column -- narrow enough that five to eight display equations per note
   got clipped. Stacking from 1200px down means the article always has either
   the full window or a column wide enough for the mathematics, never the
   starved middle case. */
@media (max-width: 1199.98px) {
  #quarto-content { display: block !important; }

  #quarto-margin-sidebar,
  #TOC { display: block !important; }

  #TOC > h2#toc-title,
  #TOC > ul { display: none !important; }

  /* Quarto pins the sidebar with position:sticky so the contents list follows
     you down the page. Once it is a plain block at the top of the document
     that stickiness has nothing to track, and the formats box detaches and
     floats over the body text as soon as you scroll. */
  #quarto-margin-sidebar {
    position: static !important;
    margin-bottom: 1.25rem;
  }

  /* Quarto's side gutters are columns of the grid, so flattening it above
     left the text running flush to both edges of the screen. Put the inset
     back on the container the grid used to provide it on. clamp so it is a
     thumb's width on a phone and opens up towards the breakpoint, rather
     than one fixed value that is mean at 1199px or wasteful at 375px. */
  #quarto-content {
    padding-left: clamp(1rem, 4vw, 2.5rem);
    padding-right: clamp(1rem, 4vw, 2.5rem);
  }

  /* With the sidebar stacked, the formats box is the first thing on the page,
     above the title -- which is where it is most useful on a phone and where
     it looked most like stray text. Set it as a compact header row: the label
     in the same small grey caps the title block uses for AUTHOR and
     PUBLISHED, the two links side by side under it, and a rule to close it
     off from the title. */
  .quarto-alternate-formats {
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    padding-bottom: .75rem;
  }

  .quarto-alternate-formats h2 {
    margin: 0 0 .3rem;
    font-size: .7rem;
    font-weight: 400;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #6c757d;
  }

  .quarto-alternate-formats ul {
    display: flex;
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
}

/* --- 2. Let a wide equation scroll, not the page -------------------------
   Display equations are typeset at their natural width and MathJax does not
   wrap them. The body column is wide enough for all of them on a desktop, but
   nothing is wide enough on a phone: the widest is 899px against a 375px
   viewport. Without this the whole document scrolls sideways, so every line
   of body text drifts off the right edge as you chase one equation.

   The rule goes on the span Pandoc wraps the equation in, not on
   mjx-container: a numbered equation carries an inline min-width from MathJax
   that holds the tag out at the right margin, and min-width beats max-width,
   so the container cannot be narrowed without moving the tag. Scrolling the
   wrapper leaves MathJax's own geometry alone.

   overflow-y stays hidden because a box that scrolls in x reserves space in y
   as well, which otherwise clips tall fractions. */
#quarto-document-content span.math.display {
  display: block;
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;

  /* A classic scrollbar is laid out inside the box, under the equation, so
     every equation wide enough to scroll gained 15px beneath it and none
     above: 37px of space over the equation against 52px under it, which is
     what reads as the equation sitting too low in its own gap. Hiding the
     bar takes that 15px back and makes the space equal again at every width.
     It costs the scroll affordance on a mouse; a phone never showed one
     anyway, since iOS and Android draw scrollbars as an overlay that takes
     no layout space at all. Scrolling itself is untouched. */
  scrollbar-width: none;
}

#quarto-document-content span.math.display::-webkit-scrollbar {
  display: none;
}

/* Same treatment for a table too wide for the column. display:block is what
   makes a table scrollable -- it stops the table box itself from stretching
   the page, while thead/tbody keep laying out as row groups inside.

   width:max-content sizes it to its own columns rather than to the block it
   now is, and the auto margins then centre what is left over; max-width keeps
   the cap that makes the scrolling happen. A table narrower than the column
   therefore sits centred in it, the way the PDF sets one, instead of being
   stretched across the full measure. */
#quarto-document-content table {
  display: block;
  overflow-x: auto;
  width: max-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* Quarto centres everything in a table float. The caption is a title and is
   set flush left, the way the PDF sets one (justification=raggedright); the
   note under it is a paragraph of prose and is justified with the body, which
   is again what the PDF does (\floatnote switches on \justifying). Only the
   table itself is centred, by the rule above.

   .quarto-float-caption is carried for specificity, not to narrow the match:
   Quarto's own rule is figure.quarto-float-tbl figcaption.quarto-float-caption-top,
   which outranks a bare figcaption selector however late this file loads. */
figure.quarto-float-tbl > figcaption.quarto-float-caption {
  text-align: left;
}

/* MathJax puts a MathML copy of every expression in the page for screen
   readers. It is clipped to invisibility but keeps its full typeset width,
   and an absolutely positioned box still counts toward the scrollable area --
   which left 8px of sideways drift on the phone after the two rules above.

   1px box plus overflow:hidden is the standard visually-hidden idiom: the
   MathML stays in the DOM and in the accessibility tree, where assistive
   technology reads it, and only its footprint goes away.

   The parent element is in the selector to buy specificity, not to narrow the
   match. MathJax's own rule for this element is `width: auto !important`, and
   it injects that stylesheet at runtime, so it lands after this file and a
   bare `mjx-assistive-mml` selector loses the tie on document order. */
mjx-container mjx-assistive-mml {
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* --- 3. The note under a float's caption ---------------------------------
   float-notes.lua marks it as .floatnote outside LaTeX (in the PDF it is a
   \floatnote paragraph, set by the preamble). Same treatment here: its own
   block under the caption and one step down in size, so caption and note read
   as two things rather than one run-on sentence. The italic "Note:" that opens
   it is written by the filter, not by this stylesheet -- it belongs to the
   text, the same as it does in the PDF. */
.quarto-float-caption .floatnote,
figcaption .floatnote {
  display: block;
  margin-top: .4em;
  font-size: .9em;
  line-height: 1.4;
}

/* --- 4. The title block's metadata columns on a phone --------------------
   Quarto lays Author / Affiliation out as one two-column grid and Published
   as another, both on fixed narrow tracks. That is most of a phone's width spent on two columns,
   and it breaks "The University of Manchester" over four lines beside a name
   that fits on one. One column below the sm breakpoint: each field gets the
   full measure and the pair reads as a list rather than a squeezed table. */
@media (max-width: 575.98px) {
  .quarto-title-meta,
  .quarto-title-meta-author {
    grid-template-columns: 1fr !important;
  }

  .quarto-title-meta { row-gap: .6rem; }

  /* The author grid is filled column-major -- its children are in the order
     label, label, value, value -- so collapsing it to one column on its own
     stacks both labels, then both values. `order` re-pairs each label with
     the value underneath it. Everything starts at 5 so that a second author,
     were one ever added, falls in after these four rather than jumping ahead
     of them on order:0. */
  .quarto-title-meta-author > * { order: 5; }
  .quarto-title-meta-author > :nth-child(1) { order: 1; }
  .quarto-title-meta-author > :nth-child(3) { order: 2; margin-bottom: .6rem; }
  .quarto-title-meta-author > :nth-child(2) { order: 3; }
  .quarto-title-meta-author > :nth-child(4) { order: 4; }
}

/* --- 5. Justified body text ---------------------------------------------
   Matching the PDF, which LaTeX justifies. hyphens:auto is not optional
   here: these notes are dense with inline math, and an inline equation is an
   unbreakable box, so without hyphenation the justifier can only stretch the
   word spaces around it and the column fills with rivers. The <html lang>
   Quarto emits is what lets the browser hyphenate at all.

   Scoped to paragraphs and list items inside the article, so it never
   reaches a float caption or its note -- those stay left, set above. */
#quarto-document-content p,
#quarto-document-content li {
  text-align: justify;
  hyphens: auto;
}

/* Two places where justifying is wrong even in a justified document: a caption
   line, which is a title and belongs flush left, and a bibliography entry,
   which is already shaped by its hanging indent. */
#quarto-document-content figcaption p,
#quarto-document-content .csl-entry {
  text-align: left;
  hyphens: manual;
}

/* The note under a float is prose and reads with the body, so it justifies
   with the body -- as it does in the PDF, where \floatnote sets \justifying.
   The id is here for specificity: the caption rules above, and Quarto's own,
   reach the note by inheritance and would otherwise leave it flush left. */
#quarto-document-content figcaption .floatnote {
  text-align: justify;
  hyphens: auto;
}

/* --- 6. Appendix headings ------------------------------------------------
   The `.appendix` class that lets the relabelling script find these sections
   also switches on Quarto's appendix area, which sets them at 17px -- barely
   above the 15.3px body text, and below the 26.7px of their own subsections,
   so the hierarchy read upside down. Put the top-level appendix heading back
   at the size the body's h1 uses (1.854rem against a 17px root) and its
   subsections at the h2 size, so the appendix is graded like the rest of the
   document. The area's rule and spacing above it are Quarto's and stay.

   Quarto's own rule is #quarto-appendix.default .quarto-appendix-heading with
   !important, so this one matches that shape and answers in kind. */
#quarto-appendix.default .quarto-appendix-heading {
  font-size: 1.854rem !important;
  margin-bottom: 1rem;
}

#quarto-appendix section.level2 > h2 {
  font-size: 1.572rem;
}

/* --- 7. The end of the page ----------------------------------------------
   A page closes on whatever its last block happens to be, and each kind
   carries a different trailing margin: a bibliography entry has none, a
   paragraph has one, a display equation has its own on top of that. Measured
   across the three notes the gap under the final line came out at 3px, 29px
   and 75px -- so the one that ends on the references stopped dead against the
   bottom of the page while the others had room to spare.

   Zero the trailing margin AND padding of whatever ends the article, at
   whatever depth it sits -- Quarto's appendix sections carry 25.5px and
   22.95px of bottom padding, which is what made the two notes that end on an
   appendix sit lower than the one that ends on its references -- then set the
   end space once on the article itself. Scoped to the last block, so nothing
   earlier in the document is touched. */
#quarto-document-content {
  margin-bottom: 0;
  padding-bottom: 4rem;
}

#quarto-document-content > *:last-child,
#quarto-document-content > *:last-child :last-child {
  margin-bottom: 0;
  padding-bottom: 0;
}