/* Colors and fonts are defined in bridge.css. */

/* Disable the page's vertical elastic overscroll / rubber-band bounce (same as
   the code blocks). Y axis only: overscroll-behavior-x: none on the root also
   kills the trackpad two-finger swipe back/forward navigation. */
html,
body {
  overscroll-behavior-y: none;
}

/* Anchor jumps land the heading flush at the sticky header's bottom (54px).
   Material's TOC scroll-spy marks a heading active only once its top reaches
   ~the header line; landing it further down (the default ~79px) leaves it just
   short, so the spy highlights the PREVIOUS heading. Matching the landing
   offset to the header height keeps the clicked heading and the highlight in
   sync. Applied to all headings (not just :target) so anchor-fix.js's
   scrollIntoView uses it regardless of :target timing. */
/* Land anchored headings clear below the sticky header (≈59px) with a small
   gap, so the heading isn't cropped. The TOC highlight no longer depends on
   this offset matching the scroll-spy line — anchor-fix.js highlights the
   clicked heading directly — so we can use a comfortable offset here. */
.md-typeset :is(h1, h2, h3, h4, h5, h6)[id] {
  scroll-margin-top: 76px;
}

body {
  background-color: var(--color-surface-default);
}

.md-main {
  background-color: var(--color-surface-default);
}

.md-content__inner {
  /* Figma content column is 720px (240 sidebar + 720 + 240 TOC = 1200 row).
     Fill the column — Material adds a ~24px side margin that otherwise leaves
     the text ~48px narrower than the design, so force the auto margins. The
     720 cap also keeps the measure sane on pages without a right TOC. */
  max-width: 720px;
  margin-inline: auto !important;
  padding: 24px 32px 40px; /* pinned px — rem tokens inflate at the 20px root */
}

/* Material inserts an ~8px top-spacer pseudo-element before the content; drop
   it so the 24px top padding alone sets the H1's distance from the header. */
.md-content__inner::before {
  display: none;
}

/* Header mirrors the public verda.com navigation: white surface, subtle
   border, dark text, and blue interaction states. */
.md-header {
  color: var(--color-text-primary);
  background-color: var(--color-surface-default);
  border-bottom: 1px solid var(--color-border-subtle);
  box-shadow: none;
  /* Material applies `backdrop-filter: blur()` for a frosted header. Our header
     is fully opaque, so the blur is invisible — but it still forces the header
     onto its own composited layer, which Chrome rasterises fuzzily on retina /
     scaled displays (soft logo + text). Drop it so the navbar stays crisp. */
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.md-header__title {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
}

.md-header__button,
.md-header__source {
  color: var(--color-text-secondary);
}

.md-header__button:hover,
.md-header__source:hover {
  color: var(--color-text-brand);
}

.md-search__form {
  color: var(--color-text-secondary);
  background-color: var(--color-surface-sunken);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radii-md);
  box-shadow: none;
}

.md-search__form:hover,
.md-search__form:focus-within {
  background-color: var(--color-surface-raised);
  border-color: var(--color-border-action);
}

.md-search__input,
.md-search__icon {
  color: var(--color-text-primary);
}

.md-footer {
  color: var(--color-text-primary);
  background-color: var(--color-surface-default);
  border-top: 1px solid var(--color-border-subtle);
  /* On md/sm the collapsed sidebar rail is fixed at left:0 down to the
     viewport bottom (z-index 2) and was covering the footer's first 40px —
     clipping "©", link text, and the first social icon. The footer is opaque,
     so stack it above the rail; the rail's expand button sits at its top and
     stays reachable. */
  position: relative;
  z-index: 3;
}

/* Bottom article nav (Figma "FooterArticleNav", node 27522-4909 / DES-605):
   one 1200px row — prev button left, next button right — each a 24px-tall
   transparent button: 16px arrow + 13/16 semibold title. The design has no
   "Previous"/"Next" label, so the direction span is hidden. */
.md-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  box-sizing: border-box;
  max-width: 1200px;
  margin-inline: auto;
  padding: 12px 24px;
}

.md-footer__link {
  display: flex;
  align-items: center;
  gap: 4px;
  /* Material's `flex: 0.01 1 auto` shrinks the link to a sliver, truncating
     short titles ("Team P…"); size to content instead, ellipsizing only when
     a title genuinely outgrows its half of the row. */
  flex: 0 1 auto;
  max-width: 45%;
  height: 24px;
  margin: 0;
  padding: 2px 8px 2px 4px; /* icon side 4, text side 8 */
  border-radius: 4px;
  color: var(--color-text-primary);
}

.md-footer__link--next {
  margin-left: auto; /* sits right even when it's the only link */
  padding: 2px 4px 2px 8px;
}

/* The design shows only the page title — no "Previous"/"Next" overline. */
.md-footer__direction {
  display: none;
}

.md-footer__title {
  position: static;
  margin: 0;
  padding: 0;
  max-width: none; /* Material reserves icon room the flex gap already covers */
  font-size: 13px; /* Figma font-size/2xs */
  line-height: 16px;
  font-weight: var(--font-weight-semibold);
  color: inherit;
}

/* Material collapses the prev link to icon-only below 45em; the design keeps
   both titles. Its column model (min-width 288px, wrapping row) means that on
   small screens the buttons wrap onto two rows — prev left, next right — each
   with the full row width, so titles stay readable instead of truncating. */
@media screen and (max-width: 44.984375em) {
  .md-footer__link--prev .md-footer__title {
    display: block;
  }

  .md-footer__link--prev {
    flex-shrink: 1; /* Material pins it to 0 for the icon-only layout */
    margin-right: auto; /* own-row case: keep it left-aligned */
  }

  /* Let each button use the whole row once they can't share one line. */
  .md-footer__link {
    max-width: 100%;
  }
}

/* Replace Material's lucide arrows with the official Verda 16px glyphs
   (icon/16/arrow-back / arrow-forward), painted via a currentColor mask. */
.md-footer__button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
  color: var(--color-text-secondary);
}

.md-footer__button svg {
  display: none;
}

.md-footer__button::after {
  content: "";
  width: 16px;
  height: 16px;
  background-color: currentcolor;
  -webkit-mask: var(--docs-footer-arrow) center / 16px 16px no-repeat;
  mask: var(--docs-footer-arrow) center / 16px 16px no-repeat;
}

.md-footer__link--prev {
  --docs-footer-arrow: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M6.86817 11.4078L4.01102 8.42036L13.0078 8.42036L13.0078 7.58354L4.01102 7.58354L6.86817 4.5961L6.29834 4.00195L3.38502 7.04798C3.14425 7.29902 3.00781 7.64212 3.00781 8.00195C3.00781 8.36179 3.14425 8.69651 3.38502 8.95593L6.29834 12.002L6.86817 11.4078Z'/></svg>");
}

.md-footer__link--next {
  --docs-footer-arrow: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M9.14401 4.60241L12.0012 7.58986L3.00437 7.58986L3.00437 8.42668L12.0012 8.42668L9.14401 11.4141L9.71384 12.0083L12.6272 8.96225C12.8679 8.7112 13.0044 8.3681 13.0044 8.00827C13.0044 7.64844 12.8679 7.31371 12.6272 7.0543L9.71384 4.00827L9.14401 4.60241Z'/></svg>");
}

.md-footer__link:hover,
.md-footer__link:focus {
  color: var(--color-text-brand);
  opacity: 1;
}

.md-footer__link:hover .md-footer__button,
.md-footer__link:focus .md-footer__button {
  color: var(--color-text-brand);
}

/* Footer meta bar (Figma "Footer", node 27522-3112 / DES-604): a sunken
   56px-min bar — copyright, Verda-slash divider, and legal links on the left,
   social icon buttons on the right. Metrics pinned in px (rem inflates at the
   20px root). The left group is rendered by overrides/partials/copyright.html. */
.md-footer-meta {
  color: var(--color-text-primary);
  background-color: var(--color-surface-sunken);
  border-top: 1px solid var(--color-border-subtle);
}

.md-footer-meta__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  box-sizing: border-box;
  max-width: 1200px;
  min-height: 56px;
  margin-inline: auto;
  padding: 12px 24px;
}

/* Left group: © text, slash, legal links — wraps as one row, 24px gaps.
   flex-shrink stays enabled (and min-width 0) so the group can compress and
   wrap below the design's 288px column instead of forcing horizontal
   overflow on phones. */
.md-footer-meta .md-copyright {
  display: flex;
  flex: 1 1 288px;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 24px;
  min-width: 0;
  margin: 0;
  padding: 0;
  font-size: 14px; /* Figma font-size/xs */
  line-height: 20px;
  color: var(--color-text-primary);
}

.md-footer-meta .md-copyright__highlight {
  color: inherit;
}

/* The slash glyph renders from a 16px frame but only occupies 6px of row
   width, per the design. */
.docs-footer-slash {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 6px;
  height: 16px;
}

.docs-footer-slash svg {
  flex: none;
}

/* The `html` prefix out-specifies Material's
   `html .md-footer-meta.md-typeset a:not(:focus-within)` colour rule. */
html .md-footer-meta.md-typeset a.docs-footer-link {
  color: var(--color-text-link);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

html .md-footer-meta.md-typeset a.docs-footer-link:hover,
html .md-footer-meta.md-typeset a.docs-footer-link:focus {
  color: var(--color-text-brand);
}

/* Right group: social icon buttons — 24px hit areas, 10px apart. */
.md-footer-meta .md-social {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 24px;
  margin: 0;
  padding: 0;
}

.md-footer-meta .md-social__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 2px;
  border-radius: 2px;
  color: var(--color-text-primary);
}

.md-footer-meta .md-social__link svg {
  width: auto;
  max-width: 20px;
  height: 16px;
  fill: currentcolor;
}

.md-footer-meta .md-social__link:hover,
.md-footer-meta .md-social__link:focus {
  color: var(--color-text-brand);
}

/* Whole 3-column row (sidebar + content + TOC) caps at 1200px, centred —
   per the Figma layout frame. */
.md-grid {
  max-width: 1200px;
}

/* Logo in header — sized to the Figma navbar (~20px tall in the 56px bar). */
.md-header__button.md-logo {
  padding: 0;
  display: flex;
  align-items: center;
}

.md-header__button.md-logo img {
  height: 24px;
  width: auto;
  vertical-align: middle;
}

.md-header__title {
  display: flex;
  align-items: center;
}

/* Theme-aware logo: hide/show based on color scheme */
[data-md-color-scheme="default"] .md-header__button.md-logo img.logo-dark {
  display: none;
}

[data-md-color-scheme="slate"] .md-header__button.md-logo img.logo-light {
  display: none;
}

/* Hide logo in sidebar/drawer on mobile */
.md-nav__button.md-logo {
  display: none;
}