/* Material declares the admonition colours, and the lighter shades below, on :root as var()
   references. A custom property resolves where it is declared, so a scheme that only redefines
   the base colours keeps the light values for these; each scheme sets them itself. */
[data-md-color-scheme="entropy-bright"] {
  color-scheme: light;
  --md-admonition-bg-color: #ffffff;
  --md-admonition-fg-color: var(--md-default-fg-color);
  --md-primary-fg-color: #404044;
  --md-accent-fg-color: #3082CF;
  --md-typeset-a-color: #3082CF;
  --md-footer-bg-color: #404044;
  --md-default-bg-color: #E5E5E5;
  --md-tabs-color: #464647;
}
[data-md-color-scheme="entropy-high-contrast"] {
  color-scheme: light;
  --md-admonition-bg-color: #ffffff;
  --md-admonition-fg-color: var(--md-typeset-color);
  --md-primary-fg-color: #404044;
  --md-accent-fg-color: #3082CF;
  --md-typeset-a-color: #3082CF;
  --md-footer-bg-color: #404044;
  --md-default-bg-color: #ffffff;
  --md-tabs-color: #464647;
  --md-typeset-color: black;
}

[data-md-color-scheme="entropy-dark"] {
  --md-primary-fg-color: #404044;
  --md-accent-fg-color: #3082CF;
  --md-typeset-a-color: #3082CF;
  --md-typeset-color: #C6CDD6;
  --md-footer-bg-color: #404044;
  --md-default-bg-color: #2B2C32;
  --md-code-bg-color: #323339;
  --md-default-fg-color: #F6F9FA;
  --md-default-fg-color--light: rgba(255,255,255,.54);
  --md-default-fg-color--lighter: rgba(255,255,255,.32);
  --md-typeset-kbd-color: #323339;
  --md-typeset-kbd-accent-color: #2B2C32;
  --md-code-fg-color: #F6F9FA;
  --md-code-hl-name-color: #C6CDD6;
  --md-code-hl-operator-color: #F6F9FA;
  --md-code-hl-punctuation-color: #F6F9FA;
  --md-code-hl-generic-color: #C6CDD6;
  --md-code-hl-special-color: #FF2463;
  --md-code-hl-color: rgba(115, 115, 51, 0.54);
  --md-code-hl-comment-color: rgba(255,255,255,.32);
  --md-default-fg-color--light: rgba(255,255,255,.54);
  --md-default-fg-color--lighter: rgba(255,255,255,.32);
  --md-typeset-table-color: rgba(255,255,255,.32);
  --md-code-hl-string-color: #00D59A;
  --md-code-hl-number-color: #FF2463;
  --md-code-hl-keyword-color: #6593ea;
  --md-code-hl-constant-color: #6593ea;
  --md-code-hl-function-color: #FFDB2C;
  --md-tabs-color: #212123;

  color-scheme: dark;
  --md-admonition-bg-color: var(--md-default-bg-color);
  --md-admonition-fg-color: var(--md-typeset-color);
  --md-default-fg-color--lightest: rgba(255,255,255,.12);
  --md-default-bg-color--light: rgba(43,44,50,.54);
  --md-default-bg-color--lighter: rgba(43,44,50,.26);
  --md-default-bg-color--lightest: rgba(43,44,50,.07);
  --md-code-bg-color--light: rgba(50,51,57,.9);
  --md-code-bg-color--lighter: rgba(50,51,57,.54);
  --md-code-hl-variable-color: var(--md-default-fg-color--light);
  --md-typeset-kbd-border-color: #1f2025;
  --md-typeset-mark-color: rgba(66,135,255,.3);
  --md-typeset-table-color--light: rgba(255,255,255,.035);
  --md-footer-bg-color--dark: #2f2f33;
  --md-shadow-z1: 0 .2rem .5rem rgba(0,0,0,.05), 0 0 .05rem rgba(0,0,0,.1);
  --md-shadow-z2: 0 .2rem .5rem rgba(0,0,0,.25), 0 0 .05rem rgba(0,0,0,.25);
  --md-shadow-z3: 0 .2rem .5rem rgba(0,0,0,.4), 0 0 .05rem rgba(0,0,0,.35);
}
/* Near-black, for reading in a dark room: QM black page, a lifted card colour for code and notes,
   and light text. Every colour Material derives on :root is set here too, for the reason above. */
[data-md-color-scheme="entropy-black"] {
  color-scheme: dark;
  --md-primary-fg-color: #0e0e0e;
  --md-accent-fg-color: #3a86ff;
  --md-typeset-a-color: #3a86ff;
  --md-typeset-color: #d1d5dc;
  --md-footer-bg-color: #0e0e0e;
  --md-footer-bg-color--dark: #080808;
  --md-default-bg-color: #0e0e0e;
  --md-default-bg-color--light: rgba(14, 14, 14, 0.54);
  --md-default-bg-color--lighter: rgba(14, 14, 14, 0.26);
  --md-default-bg-color--lightest: rgba(14, 14, 14, 0.07);
  --md-default-fg-color: #e5e5e5;
  --md-default-fg-color--light: #999999;
  --md-default-fg-color--lighter: rgba(153, 153, 153, 0.64);
  --md-default-fg-color--lightest: rgba(153, 153, 153, 0.32);
  --md-code-bg-color: #1d1d1d;
  --md-code-bg-color--light: rgba(29, 29, 29, 0.9);
  --md-code-bg-color--lighter: rgba(29, 29, 29, 0.54);
  --md-code-fg-color: #eeffff;
  --md-code-hl-color: #2c3b41;
  --md-code-hl-color--light: #2c3b4166;
  --md-code-hl-keyword-color: #bb80b3;
  --md-code-hl-string-color: #c3e88d;
  --md-code-hl-number-color: #f78c6c;
  --md-code-hl-function-color: #82aaff;
  --md-code-hl-constant-color: #82aaff;
  --md-code-hl-name-color: #eeffff;
  --md-code-hl-operator-color: #89ddff;
  --md-code-hl-punctuation-color: #89ddff;
  --md-code-hl-comment-color: #546e7a;
  --md-code-hl-special-color: #ff5370;
  --md-code-hl-generic-color: #eeffff;
  --md-code-hl-variable-color: #89ddff;
  --md-typeset-kbd-color: #1d1d1d;
  --md-typeset-kbd-accent-color: #0e0e0e;
  --md-typeset-kbd-border-color: #000000;
  --md-typeset-mark-color: rgba(58, 134, 255, 0.3);
  --md-typeset-table-color: rgba(229, 229, 229, 0.24);
  --md-typeset-table-color--light: rgba(229, 229, 229, 0.035);
  --md-tabs-color: #0e0e0e;
  --md-admonition-bg-color: #1d1d1d;
  --md-admonition-fg-color: #d1d5dc;
  --md-shadow-z1: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.05), 0 0 0.05rem rgba(0, 0, 0, 0.1);
  --md-shadow-z2: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.25), 0 0 0.05rem rgba(0, 0, 0, 0.25);
  --md-shadow-z3: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.4), 0 0 0.05rem rgba(0, 0, 0, 0.35);
}

[data-md-color-scheme="entropy-black"] .md-typeset :is(h1, h2, h3, h4) {
  color: #e5e5e5;
}

/* A note is a card in the code colour, so inline code inside one takes the page colour and reads
   as an inset chip rather than vanishing into the card. */
[data-md-color-scheme="entropy-black"] .md-typeset :is(.admonition, details) :not(pre) > code {
  background-color: var(--md-default-bg-color);
}

.md-annotation__index::after {
  background-color: #3082CF;
  --md-default-fg-color--lightest: #0fafcbb3;
}
.md-header__topic:first-child {
  font-weight: 700;
}
.md-nav__item .md-nav__link--active {
  --md-typeset-a-color: #3082CF;
}
/* Indentation. */
div.doc-contents:not(.first) {
  padding-left: 25px;
  border-left: 0.05rem solid var(--md-typeset-table-color);
}

/* Mark external links as such. */
a.autorefs-external::after {
  /* https://primer.style/octicons/arrow-up-right-24 */
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="rgb(0, 0, 0)" d="M18.25 15.5a.75.75 0 00.75-.75v-9a.75.75 0 00-.75-.75h-9a.75.75 0 000 1.5h7.19L6.22 16.72a.75.75 0 101.06 1.06L17.5 7.56v7.19c0 .414.336.75.75.75z"></path></svg>');
  content: ' ';

  display: inline-block;
  position: relative;
  top: 0.1em;
  margin-left: 0.2em;
  margin-right: 0.1em;

  height: 1em;
  width: 1em;
  border-radius: 100%;
  background-color: var(--md-typeset-a-color);
}
a.autorefs-external:hover::after {
  background-color: var(--md-accent-fg-color);
}
.md-header {
  background-color: rgba(30,30,32,0.8);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}
.md-tabs {
  background-color: var(--md-tabs-color);
}

/* Theme-aware images: Light modes hide dark-only images */
[data-md-color-scheme="entropy-bright"] img[src$="#only-dark"],
[data-md-color-scheme="entropy-high-contrast"] img[src$="#only-dark"] {
  display: none;
}

/* Theme-aware images: Dark mode hides light-only images */
[data-md-color-scheme="entropy-dark"] img[src$="#only-light"],
[data-md-color-scheme="entropy-black"] img[src$="#only-light"] {
  display: none;
}

/* Code blocks are recoloured by js/shiki-highlight.js, which also turns `[text]{.orange}` in a
   `text` block into a coloured span. These are the colours those spans use, per palette. */
[data-md-color-scheme="entropy-bright"],
[data-md-color-scheme="entropy-high-contrast"] {
  --snippet-orange: #e65100;
  --snippet-yellow: #f9a825;
  --snippet-blue: #1565c0;
  --snippet-green: #558b2f;
  --snippet-red: #c62828;
  --snippet-aqua: #00838f;
  --snippet-purple: #6a1b9a;
}

[data-md-color-scheme="entropy-dark"],
[data-md-color-scheme="entropy-black"] {
  --snippet-orange: #f78c6c;
  --snippet-yellow: #ffcb6b;
  --snippet-blue: #82aaff;
  --snippet-green: #c3e88d;
  --snippet-red: #ff5370;
  --snippet-aqua: #89ddff;
  --snippet-purple: #bb80b3;
}

.highlight .snippet-orange { color: var(--snippet-orange); }
.highlight .snippet-yellow { color: var(--snippet-yellow); }
.highlight .snippet-blue { color: var(--snippet-blue); }
.highlight .snippet-green { color: var(--snippet-green); }
.highlight .snippet-red { color: var(--snippet-red); }
.highlight .snippet-aqua { color: var(--snippet-aqua); }
.highlight .snippet-purple { color: var(--snippet-purple); }

/* Until Shiki loads, and if it cannot, Pygments colours a shell line. Its shell lexers only know
   builtins (`cd`, `echo`) and split `3.11` into a number plus leftover text, so flatten those
   tokens to read as one command. Strings, comments, `$VARS`, and the prompt keep their colour. */
.highlight:is(
  .language-bash,
  .language-sh,
  .language-shell,
  .language-console,
  .language-shell-session,
  .language-zsh,
  .language-posix
) :is(.m, .mi, .mf, .mh, .il, .nb, .k, .kd, .kn, .kp, .o, .ow) {
  color: var(--md-code-fg-color);
  font-style: normal;
}

/* Diagram tokens. js/mermaid-brand.js reads these inside the diagram's shadow
   root, so they are the one place a domain colour is defined. */
:root {
  --qm-grey: #999999;
  --qm-gold: #d3a55f;
  --qm-blue: #3a86ff;
}

/* Mermaid renders into a closed shadow root, so page selectors cannot reach the
   diagram. The --md-mermaid-* custom properties are the only way in; they
   inherit across the shadow boundary and follow the palette toggle.

   Colour is the domain: gold for the classical side (gRPC, Python, C++), grey
   for scaffolding (lifelines, node borders, target boxes). Dash is the
   direction, which the diagram source sets with ->> and -->>.

   Material declares its own defaults on `:root > *`, so an override has to land
   on the same element (the body) to win. */
:root > * {
  --md-mermaid-node-fg-color: var(--qm-grey);
  --md-mermaid-edge-color: var(--qm-gold);
  --md-mermaid-sequence-actor-border-color: var(--qm-grey);
  --md-mermaid-sequence-actor-line-color: var(--qm-grey);
  --md-mermaid-sequence-actorman-line-color: var(--qm-grey);
  --md-mermaid-sequence-message-line-color: var(--qm-gold);
  --md-mermaid-sequence-message-fg-color: var(--qm-gold);
  --md-mermaid-sequence-box-bg-color: transparent;
  --md-mermaid-sequence-box-fg-color: var(--qm-grey);
  --md-mermaid-sequence-label-bg-color: transparent;
  --md-mermaid-sequence-label-fg-color: var(--qm-grey);
  --md-mermaid-sequence-loop-border-color: var(--qm-grey);
  --md-mermaid-sequence-loop-fg-color: var(--qm-grey);
  --md-mermaid-sequence-note-border-color: var(--qm-grey);
}

/* Cards read as a filled surface on dark and as an outline on light, where the
   page is already the lightest tone in the palette. */
[data-md-color-scheme="entropy-dark"],
[data-md-color-scheme="entropy-black"] {
  --md-mermaid-node-bg-color: var(--md-code-bg-color);
  --md-mermaid-label-fg-color: var(--md-default-fg-color);
  --md-mermaid-sequence-actor-bg-color: var(--md-code-bg-color);
  --md-mermaid-sequence-actor-fg-color: var(--md-default-fg-color);
  --md-mermaid-sequence-actorman-bg-color: var(--md-code-bg-color);
}

[data-md-color-scheme="entropy-bright"],
[data-md-color-scheme="entropy-high-contrast"] {
  --md-mermaid-node-bg-color: transparent;
  --md-mermaid-label-fg-color: var(--md-typeset-color);
  --md-mermaid-sequence-actor-bg-color: transparent;
  --md-mermaid-sequence-actor-fg-color: var(--md-typeset-color);
  --md-mermaid-sequence-actorman-bg-color: transparent;
}

/* Centre the diagram instead of letting it stretch across the article column. */
.md-typeset .mermaid {
  display: flex;
  justify-content: center;
  margin: 1.25em auto;
}

/* A captioned diagram. The caption names what the figure shows and links to the
   page that teaches the notation, so it sits quieter than body text. A figure
   supplies the outer margin, so the diagram inside it drops its own. */
.md-typeset figure:has(> .mermaid) {
  margin: 1.5em auto;
}

.md-typeset figure > .mermaid {
  margin: 0 auto;
}

.md-typeset figure > figcaption,
.md-typeset .qm-slide-caption {
  max-width: 34rem;
  margin: 0.6em auto 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--qm-grey);
  text-align: center;
}

.md-typeset figure > figcaption code {
  font-size: 0.95em;
  background: transparent;
  padding: 0;
}

/* Several diagrams of one thing, shown one at a time. Every slide occupies the
   same grid cell, so the figure is as tall as its tallest slide and nothing
   below it moves when the slide changes. Inactive slides keep their box
   (mermaid needs one to lay text out) and lose only their paint. */
.md-typeset figure.qm-slides {
  display: grid;
  margin: 1.5em auto;
}

.md-typeset figure.qm-slides > .qm-slide {
  grid-area: 1 / 1;
  align-self: start;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease;
}

.md-typeset figure.qm-slides > .qm-slide:first-of-type,
.md-typeset figure.qm-slides > .qm-slide.is-active {
  opacity: 1;
  visibility: visible;
}

.md-typeset figure.qm-slides.is-ready > .qm-slide:first-of-type:not(.is-active) {
  opacity: 0;
  visibility: hidden;
}

.md-typeset figure.qm-slides > .qm-slide > .mermaid {
  margin: 0 auto;
}

.md-typeset .qm-slide-caption strong {
  color: var(--qm-grey);
  font-weight: 600;
}

/* Named steps rather than dots: the labels say what each arrangement is, which
   keeps the figure readable when it is not moving. */
.md-typeset .qm-slides__nav {
  grid-row: 2;
  grid-column: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 1em;
}

.md-typeset .qm-slides__step {
  padding: 0.25em 0.75em;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 999px;
  background: transparent;
  color: var(--md-default-fg-color--light);
  font-family: var(--md-text-font-family);
  font-size: 0.7rem;
  line-height: 1.6;
  cursor: pointer;
  transition:
    color 0.2s,
    border-color 0.2s;
}

.md-typeset .qm-slides__step:hover,
.md-typeset .qm-slides__step.is-active {
  color: var(--md-typeset-a-color);
  border-color: var(--md-typeset-a-color);
}

@media (prefers-reduced-motion: reduce) {
  .md-typeset figure.qm-slides > .qm-slide {
    transition: none;
  }
}

/* A diagram whose legend is its own tooltips (js/diagram-legend.js). The list
   is the legend wherever the script does not run, so it is hidden only once
   the tooltips are attached, and kept for screen readers. */
.md-typeset figure.qm-legend--live > .qm-legend-items {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.md-typeset figure.qm-legend--live:not(.qm-legend--callouts) > figcaption::after {
  content: " Point at or tap any part of the diagram to see what it means.";
}

.qm-legend-tip {
  position: fixed;
  z-index: 10;
  max-width: 18rem;
  padding: 0.5rem 0.7rem;
  border-radius: 0.2rem;
  background: var(--md-default-bg-color);
  box-shadow: var(--md-shadow-z2);
  color: var(--md-default-fg-color);
  font-size: 0.7rem;
  line-height: 1.5;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.15s,
    visibility 0.15s;
}

.qm-legend-tip--on {
  opacity: 1;
  visibility: visible;
}

.qm-legend-tip code {
  font-size: 0.95em;
}


/* Feedback widget: optional free-text comment field */
.md-feedback__comment {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5em;
  max-width: 20rem;
  margin: 0.75em auto 0;
}

.md-feedback__comment[hidden] {
  display: none;
}

.md-feedback__comment label {
  font-size: 0.75rem;
  color: var(--md-default-fg-color--light);
}

.md-feedback__comment textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  font-family: inherit;
  font-size: 0.75rem;
  padding: 0.4em 0.6em;
  border-radius: 0.2rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  background-color: var(--md-default-bg-color);
  color: var(--md-default-fg-color);
}

.md-feedback__comment-submit {
  padding: 0.3em 1em;
  font-size: 0.75rem;
  border-radius: 0.2rem;
  border: 1px solid var(--md-primary-fg-color);
  background-color: var(--md-primary-fg-color);
  color: var(--md-primary-bg-color);
  cursor: pointer;
}

.md-feedback__comment-submit:disabled {
  cursor: default;
  opacity: 0.6;
}

/* What's New: one page per release, in the shape of a short post.
   A lede, a release line, a hero animation, then one card per change. */
.md-typeset .qm-lede {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--md-default-fg-color--light);
}

.md-typeset .qm-release-meta {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.2rem 0 1.6rem;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.5rem;
  font-size: 0.7rem;
  color: var(--md-default-fg-color--light);
}

.md-typeset figure.qm-media {
  margin: 0 0 1.6rem;
  padding: 0.4rem;
  border-radius: 0.9rem;
  background: var(--md-code-bg-color);
  border: 1px solid var(--md-default-fg-color--lightest);
}

.md-typeset figure.qm-media video,
.md-typeset figure.qm-media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.6rem;
}

.md-typeset figure.qm-media figcaption {
  margin: 0.6rem 0.4rem 0.2rem;
}

.md-typeset .qm-feature {
  margin: 1.6rem 0;
  padding: 0.2rem 1.2rem 1rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-left: 3px solid var(--qm-gold);
  border-radius: 0.7rem;
  background: color-mix(in srgb, var(--qm-gold) 4%, transparent);
}

.md-typeset .qm-feature--action {
  border-left-color: var(--qm-blue);
  background: color-mix(in srgb, var(--qm-blue) 5%, transparent);
}

.md-typeset .qm-feature > h2 {
  margin: 0.9rem 0 0.4rem;
  font-weight: 600;
}

.md-typeset .qm-badge {
  display: inline-block;
  margin-bottom: 0.4rem;
  padding: 0.1rem 0.55rem;
  border-radius: 0.3rem;
  font-family: "Roboto Mono", var(--md-code-font-family), monospace;
  font-size: 0.62rem;
  color: var(--qm-gold);
  background: color-mix(in srgb, var(--qm-gold) 14%, transparent);
}

.md-typeset .qm-feature--action .qm-badge {
  color: var(--qm-blue);
  background: color-mix(in srgb, var(--qm-blue) 14%, transparent);
}

.md-typeset a.qm-feature-link {
  font-weight: 600;
  color: var(--qm-gold);
}

.md-typeset .qm-feature--action a.qm-feature-link {
  color: var(--qm-blue);
}

/* The release list on the What's New index. */
.md-typeset .qm-releases {
  display: grid;
  gap: 1rem;
}

/* A card holds a video, which cannot sit inside a link, so the title's link is stretched over the
   whole card to keep all of it clickable. */
.md-typeset .qm-release {
  position: relative;
  display: grid;
  gap: 0.3rem;
  padding: 0.5rem 0.5rem 0.9rem;
  border-radius: 0.9rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  transition: border-color 0.2s;
}

.md-typeset .qm-release:hover {
  border-color: var(--qm-gold);
}

.md-typeset .qm-release img,
.md-typeset .qm-release video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.6rem;
  margin-bottom: 0.4rem;
}

.md-typeset a.qm-release-title {
  color: var(--md-default-fg-color);
}

.md-typeset a.qm-release-title::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

.md-typeset .qm-release-title {
  padding: 0 0.4rem;
  font-weight: 600;
  font-size: 0.9rem;
}

.md-typeset .qm-release-summary {
  padding: 0 0.4rem;
  font-size: 0.75rem;
  color: var(--md-default-fg-color--light);
}
