/* Wild Brewer tweaks */
.wb-chart { max-width: 100%; margin: 1em 0; }
.md-typeset table:not([class]) { font-size: 0.72rem; }
.md-typeset .wb-meta { font-size: 0.7rem; opacity: 0.8; }

/* Wide screens: use the full width instead of the default 61rem column */
.md-grid { max-width: min(96vw, 110rem); }

/* Slimmer sidebars on large screens, leaving more room for content */
@media screen and (min-width: 76.25em) {
  .md-sidebar { width: 10rem; }
}

/* Tables: fill the content width and wrap cell text instead of scrolling sideways */
.md-typeset__table { display: block; padding: 0; }
.md-typeset__table table:not([class]),
.md-typeset table:not([class]) { display: table; width: 100%; table-layout: auto; }
.md-typeset table:not([class]) td { padding: 0.6em 0.8em; }
.md-typeset table:not([class]) th { white-space: normal; overflow-wrap: anywhere; hyphens: auto; }
.md-typeset table:not([class]) { font-size: 0.90em; }
/* Narrow screens keep horizontal scrolling as a fallback */
@media screen and (max-width: 44.9375em) {
  .md-typeset__table { overflow-x: auto; }
}

/* Left navigation (site index): slightly smaller text */
.md-sidebar--primary .md-nav { font-size: 0.64rem; }

/* Body text on every page */
.md-typeset { font-size: 0.7rem; line-height: 1.3; }

/* Photos carry a 2 px black frame (WIKI.md section 6). It is drawn here, never baked into
   the file. content-box keeps the photo at its own pixel size inside the frame.
   Diagrams, charts and screenshots opt out with { .wb-noframe }. */
.md-typeset img:not(.wb-noframe):not(.twemoji):not(.emojione):not(.gemoji) {
  box-sizing: content-box;
  border: 2px solid #000;
  max-width: calc(100% - 4px);
}

/* Images shown side by side. Each figure keeps its own pixel width and all of them shrink
   by the same factor, so a row conditioned to one height (wb.py media --match-height)
   also displays at one height. Captions follow the figure's width instead of setting it.
   Narrow screens stack the figures. */
.wb-figs { display: flex; flex-wrap: nowrap; gap: 1.5em; align-items: flex-start; margin: 1em 0; }
.wb-figs > div { flex: 0 1 auto; min-width: 0; }
.wb-figs img { height: auto; }
.wb-figs p { margin: 0.4em 0 0; }
.md-typeset .wb-figs p > img + em,
.md-typeset .wb-figs p > a.glightbox + em { width: 0; min-width: 100%; }
@media screen and (max-width: 44.9375em) {
  .wb-figs { flex-wrap: wrap; }
}

/* Captions: the italic line following an image always sits under it, never beside it. */
.md-typeset p > img,
.md-typeset p > a.glightbox { display: block; }
.md-typeset p > img + em,
.md-typeset p > a.glightbox + em {
  display: block;
  margin-top: 0.4em;
  font-size: 0.92em;
  opacity: 0.85;
}

/* Centred images and captions (About). Specificity has to beat the block rule above. */
.md-typeset .wb-center { text-align: center; }
.md-typeset .wb-center p > a.glightbox,
.md-typeset .wb-center p > img { display: inline-block; }
.md-typeset .wb-figs.wb-center { justify-content: center; }

/* Home page: the microscope clip sits beside the opening paragraphs. */
.wb-float-right {
  float: right;
  margin: 0 0 0.8em 1.2em;
  max-width: min(40%, var(--wb-float-max, 100vw));  /* per-block pixel cap: style="--wb-float-max: 560px" */
}
.wb-float-right img,
.wb-float-right video { display: block; max-width: 100%; height: auto; border: 2px solid #000; }
@media screen and (max-width: 44.9375em) {
  .wb-float-right { float: none; margin: 0.8em auto; max-width: 100%; text-align: center; }
}

/* Brand (WIKI.md section 6). Header logo: the micrograph with its lettering, 38 px high.
   The theme boxes the logo in a 1.6rem square; let the wide image keep its shape. */
.md-header__button.md-logo { width: auto; height: auto; }
.md-header__button.md-logo img { height: 1.92rem; width: auto; max-width: none; border-radius: 0.2rem; }
.md-nav__title .md-logo { width: auto; }
.md-nav__title .md-logo img { height: 1.92rem; width: auto; border-radius: 0.2rem; }
/* Where the theme shows the header logo (>= 76.25em), the logo carries the site name, so the
   text title is hidden; the page title still slides in on scroll. Narrower screens have no
   header logo and keep the text title. */
@media screen and (min-width: 76.25em) {
  .md-header__topic:first-child .md-ellipsis { visibility: hidden; }
}

/* Home page banner: the logo stands in for the heading, which stays for screen readers. */
.md-typeset img.wb-banner { display: block; max-width: 100%; height: auto; border-radius: 0.4rem; margin: 0 0 1.2em; }
.wb-sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}