/* maidr knitr-inline: the charts r-maidr writes inline into a knitted HTML
 * page. Every rule is scoped to the .maidr-knitr wrapper around a chart, or
 * to a dashboard box or slide holding one. maidr.js draws a chart's focus
 * ring itself from 4.15.0 (xability/maidr#1390); knitr-compat.css carries a
 * copy for a page whose maidr.js is older. */

.maidr-knitr {
  margin: 0 0 1em;
  max-width: 100%;
}

/* maidr.js builds article > figure > div[tabindex] around the svg; the host
 * page's figure margins are not the chart's. */
.maidr-knitr article,
.maidr-knitr figure {
  margin: 0;
  padding: 0;
}

/* The chart shrinks to a narrow column and keeps its shape. */
.maidr-knitr-svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* fig.align; knitr's figures are left-aligned by default. A Quarto figure
 * is centred unless fig-align says otherwise, by a text-align that centres
 * an image, not the chart's block. */
.maidr-knitr-center > .maidr-knitr-svg,
.maidr-knitr-center figure[id^="maidr-figure"] > [tabindex],
.quarto-figure-center .maidr-knitr > .maidr-knitr-svg,
.quarto-figure-center .maidr-knitr figure[id^="maidr-figure"] > [tabindex] {
  margin-left: auto;
  margin-right: auto;
}
.maidr-knitr-right > .maidr-knitr-svg,
.maidr-knitr-right figure[id^="maidr-figure"] > [tabindex],
.quarto-figure-right .maidr-knitr > .maidr-knitr-svg,
.quarto-figure-right .maidr-knitr figure[id^="maidr-figure"] > [tabindex] {
  margin-left: auto;
}
/* The fig.align a chunk sets wins over the Quarto figure the chart is in:
 * Quarto centres the float of a fig- chunk whatever the chunk says, and
 * keeps the chunk's alignment in data-fig-align. */
.maidr-knitr.maidr-knitr-left > .maidr-knitr-svg,
.maidr-knitr.maidr-knitr-left figure[id^="maidr-figure"] > [tabindex] {
  margin-left: 0;
  margin-right: auto;
}
.maidr-knitr.maidr-knitr-center > .maidr-knitr-svg,
.maidr-knitr.maidr-knitr-center figure[id^="maidr-figure"] > [tabindex] {
  margin-left: auto;
  margin-right: auto;
}
.maidr-knitr.maidr-knitr-right > .maidr-knitr-svg,
.maidr-knitr.maidr-knitr-right figure[id^="maidr-figure"] > [tabindex] {
  margin-left: auto;
  margin-right: 0;
}
/* A wrapper narrower than its column -- given an out.width, or held to
 * reveal.js's 95% -- is placed in it as the chart is. */
.maidr-knitr.maidr-knitr-center,
.quarto-figure-center .maidr-knitr:not(.maidr-knitr-left):not(.maidr-knitr-right) {
  margin-left: auto;
  margin-right: auto;
}
.maidr-knitr.maidr-knitr-right,
.quarto-figure-right .maidr-knitr:not(.maidr-knitr-left):not(.maidr-knitr-center) {
  margin-left: auto;
  margin-right: 0;
}
.maidr-knitr-center > .maidr-knitr-caption {
  text-align: center;
}
.maidr-knitr-right > .maidr-knitr-caption {
  text-align: right;
}
.maidr-knitr > .maidr-knitr-caption {
  margin-top: 0.5em;
}

/* Quarto: a chart it captions outside a float is a block the width of the
 * column, as Quarto's figure is, rather than the inline block Bootstrap
 * makes a .figure, so that it has room to be aligned in; its caption
 * starts at the start of the column, however the chart is aligned. A
 * float's caption is half a line below its chart. */
.cell-output-display .maidr-knitr.figure.maidr-knitr-left,
.cell-output-display .maidr-knitr.figure.maidr-knitr-center,
.cell-output-display .maidr-knitr.figure.maidr-knitr-right {
  display: block;
}
.cell-output-display .maidr-knitr > .maidr-knitr-caption {
  text-align: start;
}
/* Bootstrap 4 and 5 make a .figure an inline block, which a margin does
 * not place: a captioned chart given an out.width and aligned is a block,
 * as narrow as it was given, placed in its column as knitr's image is. */
.maidr-knitr.figure.maidr-knitr-sized.maidr-knitr-center,
.maidr-knitr.figure.maidr-knitr-sized.maidr-knitr-right {
  display: block;
}
.quarto-float .maidr-knitr {
  margin-bottom: 0.5em;
}

/* out.width: the chart fills the width its wrapper is given, as an image
 * fills the width it is given, larger than its own size or smaller. maidr.js
 * sizes its focusable element to fit its content, inline. */
.maidr-knitr-sized .maidr-knitr-svg {
  width: 100%;
}
.maidr-knitr-sized figure[id^="maidr-figure"] > [tabindex] {
  min-width: 100%;
}

/* Quarto stretches an image in a column: screen... to the column's width
 * (img.img-fluid.column-screen and the like); the chunk's output, which
 * holds the chart, takes the column's class. And it leaves an image in a
 * panel's cell the margin of the paragraph it is in (.quarto-layout-cell >
 * p); an aligned one is in a figure, which has none. */
.cell-output-display[class*="column-screen"] .maidr-knitr .maidr-knitr-svg {
  width: 100%;
}
.cell-output-display[class*="column-screen"] .maidr-knitr figure[id^="maidr-figure"] > [tabindex] {
  min-width: 100%;
}
.quarto-layout-cell > .maidr-knitr:not(.maidr-knitr-left):not(.maidr-knitr-center):not(.maidr-knitr-right) {
  margin-left: 0.2em;
  margin-right: 0.2em;
}

/* The charts of figures knitr holds, at a width the author set, sit side by
 * side as its images do. Each is a raw block of its own, so whitespace
 * stands between them, which inline blocks would show: they float, and
 * whatever follows them, or the end the last of them writes, starts below. */
.maidr-knitr.maidr-knitr-row {
  float: left;
}
.maidr-knitr-row + :not(.maidr-knitr-row),
.maidr-knitr-row-end {
  clear: both;
}

/* maidr's braille field is as wide as the reader's braille display, and its
 * review field 50 characters; in a narrower column, as a phone's, they keep
 * to the chart's width. maidr's other fields, in its dialogs, are sized by
 * MUI. */
.maidr-knitr textarea[id^="maidr-braille-textarea"],
.maidr-knitr input[id^="maidr-review-input"] {
  max-width: 100%;
  box-sizing: border-box;
}

/* maidr opens its dialogs inside the chart. knitr-inline.js sets, on each
 * chart's wrapper, the zoom that undoes a zoom of the page around it (a
 * slide deck's), and the one that gives their text its own size back when
 * it came out smaller than on a page that leaves its root font size alone
 * -- on a page whose root is smaller than the reader's default font size
 * (Bootstrap 3's 10px), unless maidr.js sized it for that page itself; the
 * paper is kept within the window at that zoom, as MUI keeps it at none. */
.maidr-knitr .MuiDialog-root {
  zoom: var(--maidr-knitr-unzoom, 1);
}
.maidr-knitr .MuiDialog-paper {
  zoom: var(--maidr-knitr-zoom, 1);
  max-width: min(600px, calc((100vw - 64px) / var(--maidr-knitr-zoom, 1)));
  max-height: calc((100vh - 64px) / var(--maidr-knitr-zoom, 1));
}

/* reveal.js 5, which Quarto's decks use, scales its slides with a transform
 * rather than a zoom, which makes the slides the box a fixed dialog is
 * placed in and scales the dialog with them: a dialog as tall as the
 * window, scaled up, ran off it. It is kept to the box it is placed in as
 * well. */
.reveal .maidr-knitr .MuiDialog-paper {
  max-height: min(calc(100% - 64px), calc((100vh - 64px) / var(--maidr-knitr-zoom, 1)));
}

/* A reveal.js slide, and the slides around it, set a perspective, which
 * makes the slide the box a fixed dialog is placed in rather than the
 * window: a slide taller than the window put the dialog's buttons out of
 * view. Not while one of a chart's dialogs is open on it. */
.reveal .slides:has(.maidr-knitr .MuiDialog-root),
.reveal .slides section:has(.maidr-knitr .MuiDialog-root) {
  perspective: none !important;
}

/* A slide's centred text, and a host's rules for headings -- a slide deck's
 * heading sizes, capitals and colours, a book's sizes -- would restyle the
 * dialogs' headings: they are given back the type MUI's default theme gives
 * them, in its rem: the size knitr-inline.js measured one at for the
 * dialog's text, which is the page's own rem unless maidr.js sized its text
 * for the page itself. */
.maidr-knitr [role="dialog"] {
  text-align: start;
  font-size: var(--maidr-knitr-rem, 1rem);
  line-height: 1.5;
}
.maidr-knitr [role="dialog"] :is(h1, h2, h3, h4, h5, h6) {
  font-family: "Roboto", "Helvetica", "Arial", sans-serif !important;
  color: inherit !important;
  text-transform: none !important;
  text-shadow: none !important;
  word-wrap: normal !important;
}
.maidr-knitr [role="dialog"] .MuiTypography-h6 {
  font-size: calc(1.25 * var(--maidr-knitr-rem, 1rem)) !important;
  line-height: 1.6 !important;
  letter-spacing: 0.0075em !important;
}
.maidr-knitr [role="dialog"] .MuiTypography-subtitle1 {
  font-size: var(--maidr-knitr-rem, 1rem) !important;
  line-height: 1.75 !important;
  letter-spacing: 0.00938em !important;
}
.maidr-knitr [role="dialog"] .MuiTypography-subtitle2 {
  font-size: calc(0.875 * var(--maidr-knitr-rem, 1rem)) !important;
  line-height: 1.57 !important;
  letter-spacing: 0.00714em !important;
}
/* The text of maidr's dialogs that has none of MUI's type, a heading among
 * it, sized as MUI's body text; their captions; and their lists, which a
 * slide's rules for its own lists would restyle. */
.maidr-knitr [role="dialog"] :is(h1, h2, h3, h4, h5, h6):not([class*="MuiTypography-"]) {
  font-size: inherit !important;
  line-height: inherit !important;
  margin: 0 !important;
}
.maidr-knitr [role="dialog"] .MuiTypography-caption {
  font-size: calc(0.75 * var(--maidr-knitr-rem, 1rem)) !important;
  line-height: 1.66 !important;
}
.maidr-knitr [role="dialog"] :is(ul, ol) {
  display: block !important;
  margin: 0 !important;
}

/* Dashboards size their boxes to the window and hide what does not fit:
 * flexdashboard's .chart-shim, and the fill items of a Quarto dashboard's
 * cards. knitr-inline.js shrinks a chart to the height of a .chart-shim
 * when it does not fit, and sizes one in a Quarto dashboard's card as
 * Quarto sizes an image there; either box scrolls rather than clip
 * maidr's braille and review fields below the chart. */
.chart-shim:has(> .maidr-knitr),
.html-fill-item:has(> .maidr-knitr) {
  overflow: auto;
}
/* A chart in a Quarto dashboard's card is centred across it, as Quarto
 * centres an image, and knitr-inline.js centres it down the card. Its
 * size is the card's, never what maidr's text and fields below it leave
 * of the card, which only scroll it; and a card the chart fills
 * (maidr-knitr-filled) keeps the room for its scrollbar, shown or not,
 * which would otherwise narrow the chart as those fields came and went. */
.html-fill-container > .maidr-knitr.html-fill-item {
  margin-bottom: 0;
}
.html-fill-container > .maidr-knitr.html-fill-item figure[id^="maidr-figure"] > [tabindex],
.html-fill-container > .maidr-knitr.html-fill-item .maidr-knitr-svg {
  margin-left: auto;
  margin-right: auto;
}
.html-fill-container > .html-fill-item:has(> .maidr-knitr-filled) {
  scrollbar-gutter: stable;
}

/* reveal.js keeps an image within 95% of its box (.reveal img); a chart's
 * wrapper is kept to the same, and placed in its box as the chart is. A
 * chart knitr-inline.js stretched has the room it measured for it, with
 * no margin below, whatever width an out.width gave its wrapper: reveal.js
 * sizes a stretched image over the width it was given too. */
.reveal .maidr-knitr {
  max-width: 95%;
}
.reveal .maidr-knitr.maidr-knitr-stretched {
  width: auto !important;
  max-width: none;
  margin-bottom: 0;
}
.reveal .maidr-knitr-stretched figure[id^="maidr-figure"] > [tabindex] {
  min-width: 0;
}
/* The line of text maidr shows below a chart is none of the slide's
 * paragraphs, whose margins would push it off a stretched chart's slide. */
.reveal .maidr-knitr [id^="maidr-text-container"] p {
  margin: 0;
}