/* 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;
}

/* ----------------------------------------------------------------------------
   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;
  }
}

/* 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);
}

/* --------------------------------------------------------------------------
   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); }