/* Netdocs theme overrides layered on top of the vendored Material stylesheet. */

/* Sticky footer: make the body a full-height flex column so the main content
   region grows to fill the viewport and the footer is pinned to the bottom on
   short pages instead of floating mid-screen. */
html {
  min-height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* The header/tabs/social nodes sit above the container; the container already
   carries `flex-grow: 1`, so it expands to consume any remaining height. */
.md-container {
  flex-grow: 1;
}

/* Social icon links render inline SVGs; keep them sized consistently in the
   footer meta row. */
.md-social__link svg,
.md-header__social svg {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}

/* Footer meta links (e.g. Disclaimers) rendered from `extra.footer_links`.
   Sit on their own line under the copyright/attribution text. */
.md-footer-links {
  margin-top: 0.3rem;
}

.md-footer-links__link {
  color: inherit;
}

.md-footer-links__sep {
  opacity: 0.5;
}

/* ----------------------------------------------------------------------------
   Header: logo + site title on the left; social links, palette toggle and
   search on the right. Top-level navigation lives in the separate `.md-tabs`
   bar below the header (styled by the vendored Material CSS).
   ---------------------------------------------------------------------------- */

/* Keep social links tight and vertically centred within the header row. */
.md-header__social {
  display: flex;
  align-items: center;
  gap: .1rem;
}

/* The header search box (`.md-search__inner`) is floated with a fixed width,
   which leaves its flex parent (`.md-search`) with no intrinsic width and
   collapses the box to zero. Give the flex item an explicit width so the search
   box stays visible on the right of the header (desktop only; on narrow
   viewports search expands from the icon as usual). */
@media screen and (min-width: 60em) {
  .md-header__inner > .md-search {
    flex: 0 0 auto;
    width: 11.7rem;
    margin-left: .4rem;
  }
}

/* Active top-level tab indicator. Material's default already lifts the active
   tab to full opacity; add a slightly bolder label so the current section reads
   as a subtle "highlight" (matching Material for MkDocs) instead of a heavy
   underline bar. Loaded after the vendored CSS, so this wins at equal
   specificity. */
.md-tabs__item--active .md-tabs__link {
  font-weight: 700;
}

/* Breadcrumbs (`.md-path`) render as a horizontal trail above the article title. They are
   emitted just outside the `.md-typeset` article so the article's `ul`/`li` styling can't
   turn the crumb list into a vertical bulleted list. The vendor `.md-path` rules then lay
   the trail out as a flex row with a chevron between crumbs (none before the first). Only
   the side margin is adjusted so the trail lines up flush with the article body / H1. */
.md-path {
  margin-left: 1.2rem;
  margin-right: 1.2rem;
  padding-top: 0.8rem;
}

/* The primary (nav) and secondary (TOC) sidebars scroll their own content, but the
   permanently visible scrollbar track looks broken on short pages. Hide the scrollbar
   chrome while keeping the wheel/trackpad scroll behaviour intact. */
.md-sidebar__scrollwrap {
  scrollbar-width: none;
}

.md-sidebar__scrollwrap::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* Give fenced code blocks a background that reads as a distinct panel against the page
   (Material's default is only a few percent lighter, so blocks blend into the page on
   the dark scheme). A hairline border plus a soft drop shadow lift the block off the
   page so it "pops" as an elevated panel in both schemes. */
:root {
  /* Elevation shadow for code panels — tuned per scheme below. */
  --nd-code-shadow: 0 0.1rem 0.4rem rgba(0, 0, 0, 0.12), 0 0.05rem 0.1rem rgba(0, 0, 0, 0.08);
}
[data-md-color-scheme="slate"] {
  --md-code-bg-color: hsla(var(--md-hue), 15%, 22%, 1);
  /* Darker, larger shadow so the panel clearly lifts off the dark page. */
  --nd-code-shadow: 0 0.25rem 0.85rem rgba(0, 0, 0, 0.55), 0 0.1rem 0.25rem rgba(0, 0, 0, 0.4);
}

.md-typeset .highlight,
.md-typeset .highlighttable {
  position: relative;
  /* Space stacked code blocks apart. The gap normally comes from the inner
     <pre>'s margin, but overflow:hidden (needed for the rounded corners) traps
     that margin INSIDE the panel, so put the spacing on the container itself. */
  margin: 1em 0;
  border: 0.05rem solid var(--md-default-fg-color--lightest);
  border-radius: 0.2rem;
  overflow: hidden;
  box-shadow: var(--nd-code-shadow);
}

/* Drop the inner <pre>'s own margin so it isn't trapped as internal whitespace,
   and de-position it (Material sets pre{position:relative}) so the injected
   copy/select nav anchors to the .highlight panel's top-right corner — over the
   title bar when one is present — instead of the code area below it. */
.md-typeset .highlight > pre,
.md-typeset .highlighttable > pre {
  margin: 0;
  position: static;
}

/* Give code content a little more horizontal breathing room so text is never
   flush against the panel border. */
.md-typeset .highlight > pre > code {
  padding: 0.8em 1.5em;
}

/* Bare <pre><code> blocks (not wrapped in a .highlight container) still need a
   panel border, but a wrapped block must NOT get a second, inset border on the
   inner <code> — that produced the "double border" seen on the reference page. */
.md-typeset pre > code {
  padding: 0.8em 1.5em;
  border: 0.05rem solid var(--md-default-fg-color--lightest);
  border-radius: 0.2rem;
  box-shadow: var(--nd-code-shadow);
}

/* Inner children of a wrapped block share the container's border/shadow, so
   reset theirs to avoid a doubled outline or a shadow bleeding inside the panel. */
.md-typeset .highlight pre > code,
.md-typeset .highlighttable pre > code,
.md-typeset .highlighttable .highlight {
  border: none;
  border-radius: 0;
  box-shadow: none;
}

/* Keep the copy/select nav pinned to the very top-right of the panel. It is
   injected inside <pre>, which we set to position:static above, so it anchors to
   the .highlight panel. */
.md-typeset .highlight .md-code__nav {
  top: 0.4em;
  right: 0.4em;
}

/* Filename/label title bar (fence `title="…"`). This is emitted server-side by
   the core fence parser, so its styling lives here (not in the swappable
   highlighter partial) to survive a renderer swap. */
.md-typeset .highlight > .filename {
  display: block;
  margin: 0;
  font-size: 0.85em;
  font-weight: 700;
  padding: 0.5em 1.5em;
  border-top-left-radius: 0.2rem;
  border-top-right-radius: 0.2rem;
  background: color-mix(in srgb, var(--md-code-bg-color) 100%, var(--md-default-fg-color) 6%);
  border-bottom: 0.05rem solid var(--md-default-fg-color--lightest);
}

/* Download button variant emitted by the `download()` macro. Prepend a small download glyph
   so it reads as a file-download action rather than a generic call-to-action button. */
.md-typeset .md-button--download::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 0.4em;
  vertical-align: -0.15em;
  background-color: currentColor;
  -webkit-mask-image: var(--nd-download-icon);
  mask-image: var(--nd-download-icon);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}
:root {
  --nd-download-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 20h14v-2H5v2M19 9h-4V3H9v6H5l7 7 7-7Z"/></svg>');
}

/* Blog post sidebar (`.nd-post-sidebar`) rendered in the left column on post pages: a
   back-link, the author profile, a "Metadata" heading, and a stacked date / category /
   reading-time list. Self-contained `.nd-post-*` markup (not Material's drawer classes)
   so it lays out predictably inside `.md-sidebar--primary` at every width. */
.nd-post-sidebar {
  font-size: .7rem;
}

.nd-post-back {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-bottom: 1rem;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--md-default-fg-color--light);
}

.nd-post-back svg {
  width: 0.9rem;
  height: 0.9rem;
  fill: currentColor;
}

.nd-post-author {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.4rem 0 1rem;
}

.nd-post-avatar {
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  object-fit: cover;
}

.nd-post-author-name strong {
  display: block;
  line-height: 1.2;
}

.nd-post-author-role {
  color: var(--md-default-fg-color--light);
  font-size: 0.7rem;
}

.nd-post-meta-title {
  margin: 0 0 0.5rem;
  color: var(--md-default-fg-color--light);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.nd-post-meta {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.7rem;
  color: var(--md-default-fg-color--light);
}

.nd-post-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.nd-post-meta-item svg {
  width: 0.9rem;
  height: 0.9rem;
  flex-shrink: 0;
  fill: currentColor;
}


/* ---------------------------------------------------------------------------
   Grid cards (`<div class="grid cards" markdown>` + a bullet list, the
   mkdocs-material landing-page pattern). Lays the list items out as responsive
   cards and styles inline icons (`:material-*:{ .lg .middle }`).
   --------------------------------------------------------------------------- */
.md-typeset .grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 0.8rem;
  margin: 1em 0;
}

.md-typeset .grid.cards > ul {
  display: contents;
}

.md-typeset .grid.cards > ul > li,
.md-typeset .grid > .card {
  margin: 0;
  padding: 0.8rem;
  border: 0.05rem solid var(--md-default-fg-color--lightest);
  border-radius: 0.2rem;
  box-shadow: var(--nd-code-shadow);
  transition: border-color 0.25s, box-shadow 0.25s;
}

.md-typeset .grid.cards > ul > li:hover,
.md-typeset .grid > .card:hover {
  border-color: var(--md-accent-fg-color);
  box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.1);
}

.md-typeset .grid.cards > ul > li > hr {
  margin: 0.6rem 0;
}

.md-typeset .grid.cards > ul > li > :first-child {
  margin-top: 0;
}

.md-typeset .grid.cards > ul > li > :last-child {
  margin-bottom: 0;
}

/* Inline icons emitted from `:material-*:` / `:octicons-*:` / `:fontawesome-*:`. */
.md-typeset .twemoji {
  display: inline-flex;
  height: 1.125em;
  vertical-align: text-top;
}

.md-typeset .twemoji svg {
  width: 1.125em;
  height: 1.125em;
  fill: currentColor;
}

.md-typeset .twemoji.lg svg {
  width: 2.2em;
  height: 2.2em;
}

.md-typeset .twemoji.xl svg {
  width: 3em;
  height: 3em;
}

.md-typeset .twemoji.middle {
  vertical-align: middle;
}


/* ---------------------------------------------------------------------------
   Collapsible code blocks (fence `collapse` / `max-lines="N"`). The block is
   emitted as `.highlight.nd-collapsible[data-max-lines]`; a small script clips
   it to N lines (via the --nd-max custom property) and appends a toggle button.
   --------------------------------------------------------------------------- */
.md-typeset .highlight.nd-collapsible {
  position: relative;
}

.md-typeset .highlight.nd-collapsible.nd-collapsed > pre {
  max-height: var(--nd-max, 16rem);
  overflow-y: hidden;
  overflow-x: auto;
}

/* Fade the last visible lines while collapsed to signal there's more below. */
.md-typeset .highlight.nd-collapsible.nd-collapsed::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2.2rem;
  height: 2.4rem;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--md-code-bg-color));
}

.md-typeset .highlight.nd-collapsible .nd-code-toggle {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.35rem 0.8rem;
  border: none;
  border-top: 0.05rem solid var(--md-default-fg-color--lightest);
  background: var(--md-code-bg-color);
  color: var(--md-accent-fg-color);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.md-typeset .highlight.nd-collapsible .nd-code-toggle:hover {
  background: var(--md-default-fg-color--lightest);
  color: var(--md-accent-fg-color);
}


/* ---------------------------------------------------------------------------
   Calculator plugin (```calc fences -> interactive forms). Styles the input
   grid and the computed-output cards. Uses Material CSS custom properties so
   it follows the active palette (light/dark) automatically.
   --------------------------------------------------------------------------- */
.nd-calc {
  display: block;
  margin: 1.5em 0;
  padding: 1em 1.2em;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: .4rem;
  background: var(--md-code-bg-color);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .08);
}

.nd-calc--error {
  border-color: #d32f2f;
  color: #d32f2f;
  font-weight: 500;
}

.nd-calc__title {
  font-weight: 700;
  font-size: .9rem;
  margin-bottom: .8em;
}

.nd-calc__inputs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: .8em 1.2em;
}

.nd-calc__field {
  display: flex;
  flex-direction: column;
  gap: .25em;
}

.nd-calc__field label {
  font-size: .72rem;
  font-weight: 600;
  color: var(--md-default-fg-color--light);
}

.nd-calc__field input,
.nd-calc__field select {
  font: inherit;
  font-size: .8rem;
  padding: .35em .5em;
  border: 1px solid var(--md-default-fg-color--lighter);
  border-radius: .25rem;
  background: var(--md-default-bg-color);
  color: var(--md-default-fg-color);
}

.nd-calc__field input[type="range"] {
  padding: 0;
}

.nd-calc__range {
  font-size: .72rem;
  color: var(--md-default-fg-color--light);
}

.nd-calc__outputs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: .8em 1.2em;
  margin-top: 1em;
  padding-top: 1em;
  border-top: 1px solid var(--md-default-fg-color--lightest);
}

.nd-calc__result {
  display: flex;
  flex-direction: column;
  gap: .1em;
}

.nd-calc__label {
  font-size: .72rem;
  font-weight: 600;
  color: var(--md-default-fg-color--light);
}

.nd-calc__value {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--md-primary-fg-color);
}

/* ---------------------------------------------------------------------------
   Timeline plugin (```timeline fences -> interactive date pickers driving a
   client-rendered Mermaid gantt diagram). Input styling mirrors .nd-calc's -
   same field/label conventions - so the two plugins read as one family.
   --------------------------------------------------------------------------- */
.nd-timeline {
  display: block;
  margin: 1.5em 0;
  padding: 1em 1.2em;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: .4rem;
  background: var(--md-code-bg-color);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .08);
}

.nd-timeline--error {
  border-color: #d32f2f;
  color: #d32f2f;
  font-weight: 500;
}

.nd-timeline__title {
  font-weight: 700;
  font-size: .9rem;
  margin-bottom: .8em;
}

.nd-timeline__inputs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: .8em 1.2em;
}

.nd-timeline__field {
  display: flex;
  flex-direction: column;
  gap: .25em;
}

.nd-timeline__field label {
  font-size: .72rem;
  font-weight: 600;
  color: var(--md-default-fg-color--light);
}

.nd-timeline__field input[type="date"] {
  font: inherit;
  font-size: .8rem;
  padding: .35em .5em;
  border: 1px solid var(--md-default-fg-color--lighter);
  border-radius: .25rem;
  background: var(--md-default-bg-color);
  color: var(--md-default-fg-color);
}

/* `editable: false` input: plain text, not styled like a control (no border/background) - it
   isn't one, and looking like one would misleadingly suggest it can be interacted with. Shares
   .nd-timeline__field's layout; only the label/value elements themselves differ from the
   editable case (span instead of label[for] / input). */
.nd-timeline__field-label {
  font-size: .72rem;
  font-weight: 600;
  color: var(--md-default-fg-color--light);
}

.nd-timeline__static-value {
  font-size: .8rem;
  padding: .35em 0;
  color: var(--md-default-fg-color);
}

.nd-timeline__diagram {
  margin-top: 1em;
  padding-top: 1em;
  border-top: 1px solid var(--md-default-fg-color--lightest);
  overflow-x: auto;
}

/* Sized in JS to the greater of the container and a legible minimum (see MIN_DIAGRAM_WIDTH in
   BinderJs), then pinned to that width. `max-width: 100%` here would scale it back down to fit a
   narrow column, shrinking the labels until they are unreadable — the container scrolls instead. */
.nd-timeline__diagram svg {
  max-width: none;
}

/* Mermaid's gantt "default" theme hardcodes the axis tick labels, section title, and
   diagram title to fill:#333 directly in its own generated <style> (not a CSS variable, unlike
   most of its other text) - unreadable on a dark background. Rendering into plain light DOM
   ourselves (see BinderJs) means our stylesheet can reach in and override it; !important because
   these compete with an equal-origin <style> inside the SVG itself. */
.nd-timeline__diagram svg .tick text,
.nd-timeline__diagram svg .sectionTitle,
.nd-timeline__diagram svg .titleText {
  fill: var(--md-default-fg-color) !important;
}

/* Always-visible exact-date reference, populated client-side alongside the diagram - see
   renderDatesTable() in TimelinePlugin's BinderJs. Empty (no children) until JS runs. */
.nd-timeline__dates-table {
  width: 100%;
  margin-top: 1em;
  border-collapse: collapse;
  font-size: .8rem;
}

.nd-timeline__dates-table tr {
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
}

.nd-timeline__dates-table th,
.nd-timeline__dates-table td {
  padding: .4em .6em .4em 0;
  text-align: left;
  font-weight: 400;
}

.nd-timeline__dates-table th {
  color: var(--md-default-fg-color--light);
  white-space: nowrap;
}

.nd-timeline__dates-table td {
  color: var(--md-default-fg-color);
  white-space: nowrap;
}

/* Exclusion dates (holidays/blackouts) - read-only list, or an editable add/remove UI when
   options.editExclusions is on. Populated client-side; see renderExclusions() in BinderJs. */
.nd-timeline__exclusions:not(:empty) {
  margin-top: .8em;
  padding-top: .8em;
  border-top: 1px solid var(--md-default-fg-color--lightest);
}

.nd-timeline__exclusions-title {
  font-size: .72rem;
  font-weight: 600;
  color: var(--md-default-fg-color--light);
  margin-bottom: .4em;
}

.nd-timeline__exclusions-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .4em;
  font-size: .8rem;
}

.nd-timeline__exclusions-list li {
  display: flex;
  align-items: center;
  gap: .3em;
  padding: .2em .5em;
  border-radius: 1em;
  background: var(--md-default-fg-color--lightest);
}

.nd-timeline__exclusions-empty {
  background: none !important;
  color: var(--md-default-fg-color--light);
  font-style: italic;
}

.nd-timeline__exclusion-remove {
  border: none;
  background: none;
  padding: 0;
  line-height: 1;
  font-size: 1rem;
  color: var(--md-default-fg-color--light);
  cursor: pointer;
}

.nd-timeline__exclusion-remove:hover {
  color: #d32f2f;
}

.nd-timeline__exclusions-add {
  display: flex;
  align-items: center;
  gap: .5em;
  margin-top: .6em;
}

.nd-timeline__exclusions-add input[type="date"] {
  font: inherit;
  font-size: .8rem;
  padding: .3em .5em;
  border: 1px solid var(--md-default-fg-color--lighter);
  border-radius: .25rem;
  background: var(--md-default-bg-color);
  color: var(--md-default-fg-color);
}

.nd-timeline__exclusions-add button {
  font: inherit;
  font-size: .75rem;
  font-weight: 600;
  padding: .3em .8em;
  border: 1px solid var(--md-primary-fg-color);
  border-radius: .25rem;
  background: none;
  color: var(--md-primary-fg-color);
  cursor: pointer;
}

.nd-timeline__exclusions-add button:hover {
  background: var(--md-primary-fg-color);
  color: var(--md-primary-bg-color);
}

/* --------------------------------------------------------------------------
   CriticMarkup (KeysCriticExtension) — {++ins++} {--del--} {==mark==}
   {>>comment<<} {~~old~>new~~}. Mirrors Material for MkDocs' critic palette.
   -------------------------------------------------------------------------- */
ins.critic,
del.critic,
.critic.comment {
  border-radius: .1rem;
  padding: 0 .1em;
  text-decoration: none;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

ins.critic {
  background-color: rgba(76, 175, 80, .18);
  color: inherit;
}

del.critic {
  background-color: rgba(244, 67, 54, .18);
  text-decoration: line-through;
  color: inherit;
}

mark.critic {
  background-color: rgba(255, 235, 59, .5);
  border-radius: .1rem;
  padding: 0 .1em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

[data-md-color-scheme="slate"] ins.critic { background-color: rgba(76, 175, 80, .3); }
[data-md-color-scheme="slate"] del.critic { background-color: rgba(244, 67, 54, .3); }
[data-md-color-scheme="slate"] mark.critic { background-color: rgba(255, 235, 59, .35); color: inherit; }

.critic.comment {
  background-color: var(--md-default-fg-color--lightest);
  color: var(--md-default-fg-color--light);
  font-style: italic;
}

.critic.comment::before { content: "\A0//\A0"; opacity: .6; }

/* ---------------------------------------------------------------------------
   Nav icons (mkdocs-material reference style) — `icon:` front matter or a nav
   `icon` field renders a small glyph before the label via the `nav_icon`
   helper (curated Material glyphs, brand icons, or a literal emoji).
   --------------------------------------------------------------------------- */
.nd-nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  margin-right: .4rem;
  flex-shrink: 0;
  vertical-align: middle;
}
.nd-nav-icon svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: currentColor;
}
.nd-nav-icon .nd-emoji { font-size: .95rem; line-height: 1; }
.md-nav__link .nd-nav-icon { opacity: .8; }
.md-nav__link--active .nd-nav-icon,
.md-nav__link:hover .nd-nav-icon { opacity: 1; }

/* ---------------------------------------------------------------------------
   Feature / version badges — inline pills for reference pages, produced by the
   `version()` / `flag()` / `badge()` macros. Mirrors mkdocs-material's badge.
   --------------------------------------------------------------------------- */
.nd-badge {
  display: inline-flex;
  align-items: center;
  height: 1.7rem;
  margin: 0 .35rem .35rem 0;
  border: .05rem solid var(--md-default-fg-color--lighter);
  border-radius: .85rem;
  font-size: .68rem;
  overflow: hidden;
  vertical-align: middle;
}
.nd-badge__icon {
  display: inline-flex;
  align-items: center;
  padding: 0 .4rem;
  height: 100%;
  background-color: var(--md-default-fg-color--lightest);
  color: var(--md-default-fg-color--light);
}
.nd-badge__icon svg {
  width: .9rem;
  height: .9rem;
  fill: currentColor;
}
.nd-badge__text {
  display: inline-flex;
  align-items: center;
  padding: 0 .5rem;
  height: 100%;
  color: var(--md-default-fg-color--light);
  white-space: nowrap;
}
.nd-badge__text a {
  color: var(--md-primary-fg-color);
  text-decoration: none;
}
.nd-badge__text a:hover { text-decoration: underline; }

/* Version selector (versioning plugin) — hover/focus dropdown in the header. */
.md-version {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: .4rem;
  font-size: .7rem;
}
.md-version__current {
  appearance: none;
  cursor: pointer;
  color: inherit;
  background: rgba(0, 0, 0, .18);
  border: none;
  border-radius: .1rem;
  padding: .1rem .5rem;
  font-size: inherit;
  line-height: 1.6;
  white-space: nowrap;
}
.md-version__current::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: .35em;
  vertical-align: middle;
  border-left: .3em solid transparent;
  border-right: .3em solid transparent;
  border-top: .3em solid currentColor;
}
.md-version__list {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 3;
  min-width: 100%;
  margin: .2rem 0 0;
  padding: .2rem 0;
  list-style: none;
  background: var(--md-default-bg-color);
  color: var(--md-default-fg-color);
  border-radius: .1rem;
  box-shadow: 0 .2rem .5rem rgba(0, 0, 0, .25);
  opacity: 0;
  transform: translateY(-.2rem);
  pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.md-version:hover .md-version__list,
.md-version:focus-within .md-version__list {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.md-version__item { margin: 0; }
.md-version__link {
  display: block;
  padding: .3rem .8rem;
  color: inherit;
  white-space: nowrap;
  text-decoration: none;
}
.md-version__link:hover { background: var(--md-default-fg-color--lightest); }
.md-version__link--active { font-weight: 700; color: var(--md-primary-fg-color); }