/* Opt out of Chrome's "Auto Dark Theme for web content". `color-scheme:
   light dark` alone only declares that the page supports both schemes; it
   does not stop Chrome's forced-dark heuristic from repainting a
   currently-light page when the browser/OS prefers dark. Only `only light` /
   `only dark` fully suppresses it (per Chrome for Developers' own auto-dark
   guidance). We already hand-curate both themes (see mermaid-theme.mjs), so
   tell Chrome definitively which single scheme is active rather than
   leaving it to guess -- otherwise its heuristic recolors inline SVG fills
   and text independently of each other, which is what breaks mermaid
   diagram contrast: light-mode boxes with their text inverted to
   near-white, everything washed out and illegible. */
body[data-md-color-scheme="default"] {
  color-scheme: only light;
}

body[data-md-color-scheme="slate"] {
  color-scheme: only dark;
}

/* Redundant, deliberately: mermaid's HTML-labeled nodes render as
   <div> content inside an SVG <foreignObject>, and Chrome's forced-dark
   heuristic has documented inconsistencies honoring inherited color-scheme
   across that HTML-in-SVG boundary. Declaring it again directly on the
   diagram container removes any dependency on that inheritance working. */
body[data-md-color-scheme="default"] .mermaid-diagram {
  color-scheme: only light;
}

body[data-md-color-scheme="slate"] .mermaid-diagram {
  color-scheme: only dark;
}

/* The top nav tab bar now has 11 top-level sections and overflows its
   container at essentially every desktop width (confirmed: scrollWidth >
   clientWidth from ~1220px up), scrolling horizontally via a native
   overflow-x scrollbar with no visual cue that there's more to the right.
   Fade both edges so an overflowing list visibly signals "scroll for
   more" instead of silently truncating. */
.md-tabs__list {
  mask-image: linear-gradient(to right, transparent, black 24px, black calc(100% - 24px), transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 24px, black calc(100% - 24px), transparent);
}

/* Diagram presentation. Colors themselves come from mermaid-theme.mjs;
   this just gives rendered diagrams a card treatment consistent with the
   rest of the site and keeps wide sequence diagrams from breaking layout
   on narrow viewports. */

pre.mermaid-source {
  display: none;
}

.mermaid-diagram {
  margin: 1.25em 0;
  padding: 1rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.25rem;
  background-color: var(--md-default-bg-color);
  overflow-x: auto;
  text-align: center;
}

.mermaid-diagram svg {
  max-width: 100%;
  height: auto;
}