/**
 * chappe - Developer Docs builder. Write guides in Markdown and references in API Blueprint. Comes with a built-in search engine.
 * @version v1.16.0
 * @author Valerian Saliou https://valeriansaliou.name/
 * @date 7/14/2026
 */
/*
 * Light mode surfaces. Use html[data-appearance] as source of truth so Chappe's
 * default body[data-appearance=light] cannot flash cream while dark is booting.
 */
html[data-appearance="light"] .appearance,
html:not([data-appearance]) .appearance:not([data-appearance="dark"]) {
  --color-white: #FAF8F3 !important;
  --color-base-background: #FAF8F3 !important;
  --color-base: #F3F0E9 !important;
  --color-header-background: #FAF8F3 !important;
  --color-header-coloring-background-clear: #FAF8F3 !important;
  --color-content-sidebar-toggler-background: rgba(250, 248, 243, 0.85) !important;
  --color-content-navigation-shadow-inset: rgba(250, 248, 243, 0.75) !important;
}

html[data-appearance="light"] body.appearance,
html[data-appearance="light"] body.viewer,
html:not([data-appearance]) body.appearance:not([data-appearance="dark"]),
html:not([data-appearance]) body.viewer:not([data-appearance="dark"]) {
  background-color: #FAF8F3 !important;
}

html[data-appearance="light"] body #content,
html:not([data-appearance]) body:not([data-appearance="dark"]) #content {
  background-color: #FAF8F3 !important;
}

html[data-appearance="light"] body #header,
html[data-appearance="light"] body #header .wrapper,
html:not([data-appearance]) body:not([data-appearance="dark"]) #header,
html:not([data-appearance]) body:not([data-appearance="dark"]) #header .wrapper {
  background-color: #FAF8F3 !important;
}

html[data-appearance="light"] body #footer .inner,
html:not([data-appearance]) body:not([data-appearance="dark"]) #footer .inner {
  background: #FAF8F3 !important;
}

/* Custom selects for API example pickers — match Tradeics theme accent */
.code-meta-picker select.tradeics-select-native {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 1px !important;
  height: 1px !important;
}

.tradeics-select {
  position: relative;
  display: inline-block;
  min-width: 160px;
  max-width: 240px;
  vertical-align: middle;
}

.tradeics-select-trigger {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 28px;
  padding: 4px 12px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 999px;
  background: #ffffff;
  color: #0f172a;
  font: inherit;
  font-size: 12.5px;
  line-height: 1.2;
  cursor: pointer;
  text-align: left;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 4px 12px rgba(15, 23, 42, 0.08);
  transition: border-color 100ms linear, box-shadow 100ms linear, background-color 100ms linear, color 100ms linear;
}

.tradeics-select-trigger:hover,
.tradeics-select[data-open="true"] .tradeics-select-trigger {
  border-color: var(--tradeics-blue, #5284D3);
  box-shadow: 0 0 0 3px rgba(82, 132, 211, 0.18);
}

.tradeics-select-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  color: inherit;
}

.tradeics-select-chevron {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: 0.55;
  flex: 0 0 auto;
}

.tradeics-select-menu {
  display: none;
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  min-width: 100%;
  max-height: 220px;
  overflow: auto;
  padding: 6px;
  margin: 0;
  list-style: none;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 16px;
  background: #ffffff;
  color: #0f172a;
  box-shadow:
    0 12px 32px rgba(15, 23, 42, 0.16),
    0 2px 6px rgba(15, 23, 42, 0.06);
}

/* Portaled to body so code panels (overflow:hidden) do not clip it */
.tradeics-select-menu.tradeics-select-menu--open {
  display: block;
  position: fixed;
  z-index: 10000;
}

.tradeics-select-option {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 12.5px;
  text-align: left;
  padding: 7px 12px;
  cursor: pointer;
}

.tradeics-select-option:hover,
.tradeics-select-option[data-active="true"] {
  background: rgba(82, 132, 211, 0.12);
  color: var(--tradeics-blue, #5284D3);
}

/*
 * Appearance lives on `.appearance`, and the open menu is portaled to `body`.
 * Style via `.appearance[data-appearance=...]` + menu[data-appearance] set in JS.
 */
.appearance[data-appearance="dark"] .tradeics-select-trigger,
.tradeics-select-menu[data-appearance="dark"] {
  background: var(--tradeics-dark-muted, #1f1f1f);
  border-color: rgba(255, 255, 255, 0.12);
  color: #f8fafc;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.35),
    0 8px 24px rgba(0, 0, 0, 0.35);
}

.appearance[data-appearance="dark"] .tradeics-select-trigger:hover,
.appearance[data-appearance="dark"] .tradeics-select[data-open="true"] .tradeics-select-trigger {
  border-color: var(--tradeics-blue, #5284D3);
  box-shadow: 0 0 0 3px rgba(82, 132, 211, 0.28);
}

.tradeics-select-menu[data-appearance="dark"] .tradeics-select-option:hover,
.tradeics-select-menu[data-appearance="dark"] .tradeics-select-option[data-active="true"],
.appearance[data-appearance="dark"] .tradeics-select-option:hover,
.appearance[data-appearance="dark"] .tradeics-select-option[data-active="true"] {
  background: rgba(82, 132, 211, 0.22);
  color: #9dbcf0;
}

/* Dark-mode rules must live in an external stylesheet.
   Chappe HTML-escapes quotes in config inline CSS, which breaks
   attribute selectors like [data-appearance="dark"]. */
.appearance[data-appearance="dark"] #home .bulletpoints .bulletpoint {
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.35), 0 1px 3px 0 rgba(0, 0, 0, 0.2) !important;
}

.appearance[data-appearance="dark"] #home .bulletpoints .bulletpoint:hover {
  box-shadow: 0 10px 28px 0 rgba(0, 0, 0, 0.45), 0 2px 6px 0 rgba(0, 0, 0, 0.25) !important;
}

/* Home cards: keep Chappe 3-col grid; equal-height cells + CTAs on one baseline */
#home .bulletpoints {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  align-items: stretch !important;
}

#home .bulletpoints .bulletpoint {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: 100% !important;
  box-sizing: border-box !important;
}

#home .bulletpoints .bulletpoint-label {
  flex: 1 1 auto !important;
}

/* Home card CTAs — pinned to card bottom so all three share one row */
#home .bulletpoints .bulletpoint-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px 14px !important;
  margin-top: auto !important;
  padding-top: 14px !important;
}

@media screen and (max-width: 880px) {
  #home .bulletpoints {
    grid-template-columns: 1fr !important;
  }
}

#home .bulletpoints .bulletpoint-action {
  display: inline-flex !important;
  align-items: center !important;
  height: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
}

#home .bulletpoints .bulletpoint-action + .bulletpoint-action {
  margin-left: 0 !important;
}

.appearance[data-appearance="dark"] #header {
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.35), 0 1px 3px 0 rgba(0, 0, 0, 0.2) !important;
}

/* Search: no border, elevated soft shadow (desktop + responsive) */
#header .search {
  border: none !important;
  box-shadow: 0 4px 14px 0 rgba(15, 23, 42, 0.10), 0 1px 3px 0 rgba(15, 23, 42, 0.06) !important;
  transition: box-shadow 150ms ease !important;
}

#header .search:hover {
  box-shadow: 0 8px 22px 0 rgba(15, 23, 42, 0.14), 0 2px 6px 0 rgba(15, 23, 42, 0.08) !important;
}

#header .search:active {
  box-shadow: 0 3px 10px 0 rgba(15, 23, 42, 0.10), 0 1px 2px 0 rgba(15, 23, 42, 0.06) !important;
}

.appearance[data-appearance="dark"] #header .search {
  box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.35), 0 1px 3px 0 rgba(0, 0, 0, 0.2) !important;
}

.appearance[data-appearance="dark"] #header .search:hover {
  box-shadow: 0 8px 22px 0 rgba(0, 0, 0, 0.45), 0 2px 6px 0 rgba(0, 0, 0, 0.25) !important;
}

.appearance[data-appearance="dark"] #header .search:active {
  box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.35), 0 1px 2px 0 rgba(0, 0, 0, 0.2) !important;
}

/* Soft rounded hover for two-line Get Started items — near-pill, not noisy */
#header .dropdown .dropdown-link--multiple {
  border-radius: var(--tradeics-pill-soft, 12px) !important;
}

.appearance[data-appearance="dark"] #footer .inner {
  background: var(--color-white) !important;
  box-shadow: 0 -4px 16px 0 rgba(0, 0, 0, 0.35), 0 -1px 3px 0 rgba(0, 0, 0, 0.2) !important;
}

#footer .inner {
  border-radius: 40px 40px 0 0 !important;
  background: var(--color-white) !important;
}

/* Footer logo: Chappe only inverts header .logo-image — match that filter here */
.appearance[data-appearance="dark"] #footer .brand .logo {
  filter: grayscale(1) invert(1) brightness(10) !important;
}

/* Desktop footer: brand + links + status on one row, copyright under brand.
   Mobile/stacked order is left unchanged (Chappe max-width: 1020px rules). */
@media screen and (min-width: 1021px) {
  #footer .wrapper {
    display: grid !important;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "brand nav status"
      "copy copy status";
    column-gap: 28px;
    row-gap: 14px;
    align-items: center;
  }

  #footer .navigation,
  #footer .metadata {
    display: contents !important;
  }

  #footer .metadata .left {
    grid-area: brand;
  }

  #footer .navigation .left {
    grid-area: nav;
  }

  #footer .navigation .right {
    grid-area: copy;
    padding-left: 0 !important;
    justify-content: flex-start !important;
  }

  #footer .metadata .right {
    grid-area: status;
    padding-left: 12px !important;
    align-self: center;
  }
}

/* Footer GitHub icon — muted, left of status */
.tradeics-footer-social {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}

.tradeics-footer-github {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
  line-height: 0;
  transition: color 150ms ease, opacity 150ms ease;
}

.tradeics-footer-github:hover {
  color: #4b5563;
}

.appearance[data-appearance="dark"] .tradeics-footer-github {
  color: #9ca3af;
}

.appearance[data-appearance="dark"] .tradeics-footer-github:hover {
  color: #e5e7eb;
}

/* Footer llms.txt — same text styling as Website/Terms; menu matches header .dropdown */
#footer .tradeics-footer-llms {
  position: relative;
  display: inline-block;
}

#footer .tradeics-footer-llms__trigger {
  display: inline-flex !important;
  align-items: center;
  gap: 3px;
  margin: 0;
  padding: 0;
  border: none !important;
  background: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  color: inherit;
  cursor: pointer;
}

#footer .tradeics-footer-llms__trigger:hover {
  text-decoration: underline;
}

#footer .tradeics-footer-llms__chevron {
  display: block;
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  opacity: 0.7;
  transform: rotate(180deg);
  transition: transform 150ms ease;
}

#footer .tradeics-footer-llms.is-open .tradeics-footer-llms__chevron {
  transform: rotate(0deg);
}

#footer .tradeics-footer-llms__menu {
  position: absolute;
  left: 0;
  right: auto;
  bottom: calc(100% + 10px);
  top: auto;
  z-index: 60;
  min-width: 260px;
  max-width: min(280px, calc(100vw - 24px));
  padding: 8px 0;
  border: none !important;
  border-radius: 16px !important;
  overflow: hidden;
  background: var(--color-white) !important;
  box-shadow: var(--tradeics-shadow-card-hover) !important;
}

/* Mobile: llms.txt sits at the end of the link row — pin menu to the right edge */
@media screen and (max-width: 1020px) {
  #footer .tradeics-footer-llms__menu {
    left: auto;
    right: 0;
  }
}

#footer .tradeics-footer-llms__item {
  display: block;
  margin: 2px 6px;
  padding: 6px 12px;
  border-radius: var(--tradeics-pill-radius, 999px);
  text-decoration: none !important;
  color: var(--color-black, #0f172a) !important;
  font-size: 13.5px;
  line-height: 1.35;
  letter-spacing: -0.1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background-color 140ms ease, color 140ms ease;
}

#footer .tradeics-footer-llms__item:hover {
  background: rgba(82, 132, 211, 0.1) !important;
  color: #5284d3 !important;
  text-decoration: none !important;
}

#footer .tradeics-footer-llms__item-title {
  display: block;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

#footer .tradeics-footer-llms__item-meta {
  display: none;
}

.appearance[data-appearance="dark"] #footer .tradeics-footer-llms__menu {
  background: var(--color-white, #141414) !important;
  box-shadow: var(--tradeics-shadow-dark) !important;
}

.appearance[data-appearance="dark"] #footer .tradeics-footer-llms__item {
  color: var(--color-black, #faf8f3) !important;
}

.appearance[data-appearance="dark"] #footer .tradeics-footer-llms__item:hover {
  background: rgba(82, 132, 211, 0.16) !important;
  color: #9bb8f0 !important;
}

/* Status badge: match website elevated pill; keep Chappe status icons visible */
#footer .status .status-wrapped {
  border: none !important;
  border-radius: 999px !important;
  background: var(--color-white) !important;
  box-shadow:
    0 4px 14px color-mix(in oklab, var(--color-black) 8%, transparent),
    0 2px 6px color-mix(in oklab, var(--color-black) 5%, transparent) !important;
  padding: 10px 18px !important;
  gap: 12px;
  align-items: center;
  transition: box-shadow 200ms ease, transform 200ms ease !important;
}

#footer .status .status-wrapped:hover {
  box-shadow:
    0 10px 28px color-mix(in oklab, var(--color-black) 12%, transparent),
    0 4px 10px color-mix(in oklab, var(--color-black) 6%, transparent) !important;
  transform: scale(1.02);
  border-color: transparent !important;
  cursor: pointer;
}

#footer .status .status-icon {
  display: inline-block !important;
  width: 24px !important;
  height: 24px !important;
  flex: 0 0 24px;
  border-radius: 50% !important;
  overflow: hidden !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

#footer .status[data-status="healthy"] .status-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='42' viewBox='0 0 42 42'%3E%3Ccircle cx='21' cy='21' r='21' fill='%230db033'/%3E%3Cg fill='none' stroke='%23fff' stroke-linecap='square' stroke-width='4' transform='translate(11.025 13.65)'%3E%3Cpath d='m0 8.4 6.3 6.3'/%3E%3Cpath d='m19.95 1.05-13.65 13.65'/%3E%3C/g%3E%3C/svg%3E") !important;
}

#footer .status[data-status="sick"] .status-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='42' viewBox='0 0 42 42'%3E%3Ccircle cx='21' cy='21' r='21' fill='%23f18000'/%3E%3Cpath fill='%23fff' transform='translate(15.75 7.35)' d='m8.03572998 17.0953125h-5.4140625l-.83671875-15.5203125h7.0875zm-6.18515625 5.7421875c0-.9953175.29530955-1.7691379.8859375-2.3214844s1.44921312-.8285156 2.57578125-.8285156c1.11563058 0 1.960544.2761691 2.53476563.8285156.57422162.5523465.86132812 1.3261669.86132812 2.3214844 0 .9843799-.29804389 1.7527316-.89414062 2.3050781s-1.43007277.8285156-2.50195313.8285156c-1.08281791 0-1.93046569-.2761691-2.54296875-.8285156s-.91875-1.3206982-.91875-2.3050781z'/%3E%3C/svg%3E") !important;
}

#footer .status[data-status="dead"] .status-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='42' viewBox='0 0 42 42'%3E%3Ccircle cx='21' cy='21' r='21' fill='%23e10000'/%3E%3Cg fill='none' stroke='%23fff' stroke-width='4' transform='translate(12.6 12.6)'%3E%3Cpath d='m16.8 0-16.73914598 16.739146'/%3E%3Cpath d='m16.8 0-16.73914598 16.739146' transform='matrix(-1 0 0 1 16.860854 0)'/%3E%3C/g%3E%3C/svg%3E") !important;
}

#footer .status[data-status="failure"] .status-icon,
#footer .status[data-status="none"] .status-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='42' viewBox='0 0 42 42'%3E%3Ccircle cx='21' cy='21' r='21' fill='%23787b84'/%3E%3Cg fill='none' stroke='%23fff' stroke-width='4' transform='translate(12.6 12.6)'%3E%3Cpath d='m16.8 0-16.73914598 16.739146'/%3E%3Cpath d='m16.8 0-16.73914598 16.739146' transform='matrix(-1 0 0 1 16.860854 0)'/%3E%3C/g%3E%3C/svg%3E") !important;
}

#footer .status .status-text {
  padding-left: 0 !important;
}

#footer .status .status-state {
  font-weight: 500 !important;
  opacity: 0.85;
}

#footer .status .status-time {
  opacity: 0.65;
}

@media screen and (max-width: 1020px) {
  .tradeics-footer-social {
    justify-content: center;
    width: 100%;
  }
}

/* Header logo — desktop stays as before; mobile short mark is larger below */
#header .logo .logo-image--full {
  height: 36px !important;
  width: 315px !important;
}

/* Short header logo (≤640px): larger wordmark for mobile */
@media screen and (max-width: 640px) {
  #header .logo {
    margin-right: 14px !important;
  }

  #header .logo .logo-image--short {
    width: 200px !important;
    height: 36px !important;
    min-width: 200px !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: left center !important;
  }
}

@media screen and (max-width: 400px) {
  #header .logo {
    margin-right: 10px !important;
  }

  #header .logo .logo-image--short {
    width: 168px !important;
    height: 32px !important;
    min-width: 168px !important;
  }
}