/* ==========================================================================
   HostHatch docs theme
   Ports the marketing-site design language (design-concepts/3-network-chip-v1)
   onto Material for MkDocs.

   Structure:
     1. Design tokens (dark + light)
     2. Token -> Material variable mapping
     3. Base + typography
     4. Header / logo / search
     5. Sidebars (nav + integrated TOC)
     6. Content: headings, links, lists, tables
     7. Code: blocks as terminal windows, inline code
     8. Admonitions, tabs, details
     9. Footer, back-to-top, tooltips, icons
    10. Responsive
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */

/* dark — the design is dark-native */
[data-md-color-scheme="slate"] {
  --md-hue: 222;

  --hh-bg: #050a16;
  --hh-bg-2: #081020;
  --hh-card: rgba(255, 255, 255, 0.035);
  --hh-card-2: rgba(255, 255, 255, 0.06);
  --hh-border: rgba(255, 255, 255, 0.09);
  --hh-border-2: rgba(255, 255, 255, 0.16);
  --hh-text: #eef2f8;
  --hh-muted: #93a0b5;
  --hh-faint: #5c6a80;
  --hh-coral: #ff7365;
  --hh-coral-deep: #de4f4f;
  --hh-amber: #fba963;
  --hh-grad: linear-gradient(90deg, #de4f4f, #ff7365, #fba963);
  --hh-nav-bg: rgba(5, 10, 22, 0.7);
  --hh-lat: #fba963;
  --hh-ok: #4ade80;
  --hh-glass: rgba(8, 16, 32, 0.72);
  --hh-shadow-lg: rgba(0, 0, 0, 0.5);
  --hh-term-bg: rgba(7, 12, 25, 0.92);
  --hh-term-soft: rgba(255, 255, 255, 0.05);
  --hh-term-soft-2: rgba(255, 255, 255, 0.09);
  --hh-egg: #d6dde8;
  /* code sits *above* the page here, unlike the marketing terminal which sits below the map */
  --hh-code-bg: #0b1322;

  color-scheme: dark;
}

/* light — neutral greige paper, not white; coral is the only warmth */
[data-md-color-scheme="default"] {
  --hh-bg: #f4f4f2;
  --hh-bg-2: #e9e9e7;
  --hh-card: rgba(255, 255, 255, 0.66);
  --hh-card-2: rgba(255, 255, 255, 0.95);
  --hh-border: rgba(40, 38, 42, 0.10);
  --hh-border-2: rgba(40, 38, 42, 0.18);
  --hh-text: #171a21;
  --hh-muted: #50545a;
  --hh-faint: #92979b;
  /* softer coral set for the light paper — lightened toward white, not darkened */
  --hh-coral: #ff8578;
  --hh-coral-deep: #e16862;
  --hh-amber: #fbb277;
  --hh-grad: linear-gradient(90deg, #e16862, #ff8578, #fbb277);
  --hh-nav-bg: rgba(244, 244, 242, 0.78);
  --hh-lat: #b45309;
  --hh-ok: #16a34a;
  --hh-glass: rgba(255, 255, 255, 0.66);
  --hh-shadow-lg: rgba(40, 38, 42, 0.18);
  --hh-term-bg: rgba(255, 255, 255, 0.92);
  --hh-term-soft: rgba(40, 38, 42, 0.055);
  --hh-term-soft-2: rgba(40, 38, 42, 0.10);
  --hh-egg: #d2d3d3;
  --hh-code-bg: #ffffff;

  color-scheme: light;
}

/* --------------------------------------------------------------------------
   2. Token -> Material variable mapping
   -------------------------------------------------------------------------- */

[data-md-color-scheme="slate"],
[data-md-color-scheme="default"] {
  --md-text-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter,
    Roboto, sans-serif;
  --md-code-font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo,
    Consolas, monospace;

  --md-default-bg-color: var(--hh-bg);
  --md-default-bg-color--light: var(--hh-bg-2);
  --md-default-bg-color--lighter: var(--hh-card);
  --md-default-bg-color--lightest: var(--hh-card-2);

  --md-default-fg-color: var(--hh-text);
  --md-default-fg-color--light: var(--hh-muted);
  --md-default-fg-color--lighter: var(--hh-faint);
  --md-default-fg-color--lightest: var(--hh-border);

  --md-typeset-color: var(--hh-text);
  --md-typeset-a-color: var(--hh-coral);
  --md-typeset-mark-color: color-mix(in srgb, var(--hh-amber) 28%, transparent);
  --md-typeset-del-color: color-mix(in srgb, var(--hh-coral-deep) 22%, transparent);
  --md-typeset-ins-color: color-mix(in srgb, var(--hh-ok) 22%, transparent);
  --md-typeset-table-color: var(--hh-border);

  /* the header sits on the page background, so "primary bg" is really its text */
  --md-primary-fg-color: var(--hh-coral);
  --md-primary-fg-color--light: var(--hh-amber);
  --md-primary-fg-color--dark: var(--hh-coral-deep);
  --md-primary-bg-color: var(--hh-text);
  --md-primary-bg-color--light: var(--hh-muted);

  --md-accent-fg-color: var(--hh-coral);
  --md-accent-fg-color--transparent: color-mix(in srgb, var(--hh-coral) 12%, transparent);
  --md-accent-bg-color: #200b09;
  --md-accent-bg-color--light: rgba(32, 11, 9, 0.7);

  --md-code-bg-color: var(--hh-code-bg);
  --md-code-fg-color: var(--hh-text);
  --md-code-hl-color: color-mix(in srgb, var(--hh-amber) 22%, transparent);
  --md-code-hl-keyword-color: var(--hh-coral);
  --md-code-hl-operator-color: var(--hh-coral);
  --md-code-hl-punctuation-color: var(--hh-muted);
  --md-code-hl-string-color: var(--hh-ok);
  --md-code-hl-number-color: var(--hh-lat);
  --md-code-hl-constant-color: var(--hh-amber);
  --md-code-hl-special-color: var(--hh-amber);
  --md-code-hl-function-color: var(--hh-amber);
  --md-code-hl-name-color: var(--hh-text);
  --md-code-hl-variable-color: var(--hh-text);
  --md-code-hl-comment-color: var(--hh-faint);
  --md-code-hl-generic-color: var(--hh-muted);

  --md-footer-bg-color: var(--hh-bg-2);
  --md-footer-bg-color--dark: var(--hh-bg-2);
  --md-footer-fg-color: var(--hh-text);
  --md-footer-fg-color--light: var(--hh-muted);
  --md-footer-fg-color--lighter: var(--hh-faint);

  --md-shadow-z1: 0 2px 10px var(--hh-shadow-lg);
  --md-shadow-z2: 0 8px 30px var(--hh-shadow-lg);
  --md-shadow-z3: 0 30px 80px var(--hh-shadow-lg);

  /* admonition families, remapped onto the brand */
  --md-admonition-fg-color: var(--hh-text);
  --md-admonition-bg-color: var(--hh-card);
}

/* --------------------------------------------------------------------------
   3. Base + typography
   -------------------------------------------------------------------------- */

body {
  background: var(--hh-bg);
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.25s, color 0.25s;
}

/* a soft coral wash behind the top of the page, like the hero glow */
.md-main::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: 620px;
  background:
    radial-gradient(ellipse 45% 45% at 22% 0%, color-mix(in srgb, var(--hh-coral-deep) 9%, transparent), transparent 70%),
    radial-gradient(ellipse 45% 45% at 82% 0%, color-mix(in srgb, var(--hh-amber) 7%, transparent), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* Material steps the root up on wide viewports (137.5% past 100em, 150% past
   125em), which blows the whole scale ~10-20% past the design's fixed 16px
   body. Hold it at 125% so 1rem = 20px and .md-typeset lands on 16px — the
   root still tracks the visitor's own browser font-size preference. */
@media screen and (min-width: 100em) { html { font-size: 125%; } }
@media screen and (min-width: 125em) { html { font-size: 125%; } }

.md-grid { max-width: 76rem; }

.md-typeset { font-size: 0.8rem; line-height: 1.6; }
.md-typeset p { color: var(--hh-muted); }
.md-typeset p strong,
.md-typeset li strong { color: var(--hh-text); font-weight: 600; }

/* --------------------------------------------------------------------------
   4. Header / logo / search
   -------------------------------------------------------------------------- */

.md-header {
  background: var(--hh-nav-bg);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hh-border);
  box-shadow: none;
  color: var(--hh-text);
}
.md-header--shadow { box-shadow: none; }

.md-header__inner { height: 64px; gap: 4px; }
.md-header__button { color: var(--hh-muted); }
.md-header__button:hover { color: var(--hh-text); opacity: 1; }

/* inline wordmark: both fills follow the palette (CSS wins over the attributes) */
.md-logo { padding: 0; margin-right: 6px; display: flex; align-items: center; }
.md-logo svg { height: 30px; width: auto; }
.md-logo svg g[fill="#eef2f8"] { fill: var(--hh-text); }
.md-logo svg path[fill="#d6dde8"] { fill: var(--hh-egg); }

/* "HostHatch" is in the wordmark — the title text only needs to say Docs */
.md-header__title { font-weight: 600; letter-spacing: -0.01em; margin-left: 0.4rem; }
.md-header__title .md-header__topic:first-child .md-ellipsis {
  font-family: var(--md-code-font-family);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hh-coral);
}
/* hide the redundant "HostHatch " prefix on the eyebrow */
.md-header__title .md-header__topic:first-child .md-ellipsis { font-size: 0; }
.md-header__title .md-header__topic:first-child .md-ellipsis::after {
  content: "Docs";
  font-size: 11px;
}
.md-header__title--active .md-header__topic:first-child { opacity: 0; }
.md-header__topic[data-md-component="header-topic"] .md-ellipsis { color: var(--hh-muted); }

/* search: a glass pill, like the network-test button */
.md-search__form {
  background: var(--hh-glass);
  border: 1px solid var(--hh-border-2);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: none;
  height: 2rem;
  transition: border-color 0.15s, background-color 0.15s;
}
.md-search__form:hover,
[data-md-toggle="search"]:checked ~ .md-header .md-search__form {
  background: var(--hh-card-2);
  border-color: color-mix(in srgb, var(--hh-coral) 55%, transparent);
}
.md-search__input { color: var(--hh-text); font-size: 0.68rem; }
.md-search__input::placeholder { color: var(--hh-faint); }
.md-search__icon { color: var(--hh-muted); }
.md-search__output { border-radius: 12px; }
.md-search-result__meta {
  font-family: var(--md-code-font-family);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hh-faint);
  background: transparent;
}
.md-search-result__article { color: var(--hh-text); }
.md-search-result mark { color: var(--hh-coral); background: transparent; }

/* --------------------------------------------------------------------------
   5. Sidebars (nav + integrated TOC)
   -------------------------------------------------------------------------- */

.md-sidebar { padding-top: 1.2rem; }

.md-nav {
  font-size: 0.68rem;
  color: var(--hh-muted);
}
.md-nav__title {
  font-family: var(--md-code-font-family);
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hh-faint);
  box-shadow: none;
  padding-bottom: 0.5rem;
}
.md-nav__link {
  color: var(--hh-muted);
  transition: color 0.15s;
}
.md-nav__link:hover,
.md-nav__link:focus { color: var(--hh-text); }
.md-nav__link--active,
.md-nav__item--active > .md-nav__link,
.md-nav__link--active:hover {
  color: var(--hh-coral);
  font-weight: 600;
}
.md-nav__icon { color: inherit; }

/* the site title is already in the header wordmark — drop it from the sidebar */
@media screen and (min-width: 76.25em) {
  .md-sidebar--primary .md-nav--primary > .md-nav__title { display: none; }
}

/* the integrated TOC hangs off a hairline rail; the active entry lights it up */
.md-nav--secondary .md-nav__list {
  border-left: 1px solid var(--hh-border);
  margin-left: 0.3rem;
  padding-left: 0.35rem;
}
.md-nav--secondary .md-nav__link {
  color: var(--hh-faint);
  font-weight: 400;
  line-height: 1.4;
  padding: 0.18rem 0;
}
.md-nav--secondary .md-nav__link:hover { color: var(--hh-text); }
.md-nav--secondary .md-nav__link--active {
  color: var(--hh-coral);
  font-weight: 600;
  position: relative;
}
.md-nav--secondary .md-nav__link--active::before {
  content: "";
  position: absolute;
  left: -0.4rem;
  top: 0.2rem;
  bottom: 0.2rem;
  width: 2px;
  border-radius: 2px;
  background: var(--hh-coral);
}

/* mobile drawer — Material paints its header slab in the primary colour, which
   here would be a flat coral block; give it the footer's surface instead */
@media screen and (max-width: 76.1875em) {
  .md-nav--primary .md-nav__title[for="__drawer"] {
    align-items: flex-start;
    background: var(--hh-bg-2);
    border-bottom: 1px solid var(--hh-border);
    box-shadow: none;
    color: var(--hh-faint);
    display: flex;
    flex-direction: column;
    font-family: var(--md-code-font-family);
    font-size: 0.55rem;
    font-weight: 600;
    gap: 0.5rem;
    height: auto;
    letter-spacing: 0.12em;
    line-height: 1.2;
    padding: 0.9rem 0.8rem 0.8rem;
    text-transform: uppercase;
  }
  .md-nav--primary .md-nav__title .md-nav__button.md-logo {
    display: block;
    margin: 0;
    padding: 0;
  }
  .md-nav--primary .md-nav__title .md-nav__button.md-logo svg {
    height: 26px;
    width: auto;
  }
  .md-nav--primary .md-nav__item { border-top-color: var(--hh-border); }
  .md-nav__source { background: var(--hh-bg-2); }
}

/* --------------------------------------------------------------------------
   6. Content: headings, links, lists, tables
   -------------------------------------------------------------------------- */

.md-content { position: relative; z-index: 1; }
.md-content__inner { padding-top: 1.4rem; }
.md-content__inner::before { display: none; }  /* Material's spacer */

.md-typeset h1 {
  position: relative;
  color: var(--hh-text);
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.035em;
  margin: 0 0 1.4rem;
  padding-bottom: 1rem;
}
/* the gradient hairline under the page title — the design's signature rule */
.md-typeset h1::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 84px;
  height: 2px;
  border-radius: 2px;
  background: var(--hh-grad);
}

.md-typeset h2 {
  color: var(--hh-text);
  font-size: 1.4rem;  /* 28px — the design's h2 floor */
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.025em;
  margin: 2.6rem 0 0.9rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--hh-border);
}
/* pages that already separate sections with `---` don't need the rule twice */
.md-typeset hr + h2 {
  border-top: 0;
  padding-top: 0;
  margin-top: 1.6rem;
}
.md-typeset h3 {
  color: var(--hh-text);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 2rem 0 0.7rem;
}
/* endpoint headings (### GET /api/v1/…) read as monospace routes */
.md-typeset h3 code { font-size: 0.92em; }
.md-typeset h4 {
  color: var(--hh-text);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0;
}

.md-typeset .headerlink {
  color: var(--hh-border-2);
  transition: color 0.15s;
}
.md-typeset :is(h1, h2, h3, h4, h5, h6):hover .headerlink,
.md-typeset .headerlink:focus { color: var(--hh-coral); }

.md-typeset a { color: var(--hh-coral); text-decoration: none; }
.md-typeset a:hover { color: var(--hh-amber); }

.md-typeset hr { border-bottom-color: var(--hh-border); }

/* bullet lists pick up the design's coral checks + hairline rows */
.md-typeset ul li::marker { color: var(--hh-coral); }
.md-typeset :is(ul, ol) li { color: var(--hh-muted); }

/* tables — a card, with a mono uppercase header row */
.md-typeset__scrollwrap { margin: 1.2rem 0; }
.md-typeset__table { display: block; min-width: 100%; padding: 0; }
.md-typeset table:not([class]) {
  /* Material ships these as inline-block for scrolling; the anonymous table box
     that creates leaves the header background short of the card edge */
  display: table;
  width: 100%;
  background: var(--hh-card);
  border: 1px solid var(--hh-border);
  border-radius: 14px;
  box-shadow: none;
  font-size: 0.68rem;
  overflow: hidden;
}
.md-typeset table:not([class]) th {
  background: var(--hh-term-soft);
  border-bottom: 1px solid var(--hh-border);
  color: var(--hh-faint);
  font-family: var(--md-code-font-family);
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.75rem 0.9rem;
  white-space: nowrap;
}
.md-typeset table:not([class]) td {
  border-top: 1px solid var(--hh-border);
  color: var(--hh-muted);
  padding: 0.62rem 0.9rem;
  vertical-align: middle;
}
.md-typeset table:not([class]) tbody tr {
  transition: background-color 0.15s;
}
.md-typeset table:not([class]) tbody tr:hover {
  background: var(--hh-card-2);
  box-shadow: none;
}
.md-typeset table:not([class]) td:first-child { color: var(--hh-text); font-weight: 600; }
.md-typeset table:not([class]) td code { font-size: 0.95em; }

/* tablesort affordance on sortable headers */
.md-typeset table th[role="columnheader"]:hover { color: var(--hh-text); cursor: pointer; }

/* --------------------------------------------------------------------------
   7. Code
   -------------------------------------------------------------------------- */

/* fenced blocks are terminal windows: rounded, bordered, gradient rule on top */
.md-typeset .highlight,
.md-typeset pre > code {
  border-radius: 12px;
}
.md-typeset .highlight {
  position: relative;
  background: var(--hh-code-bg);
  border: 1px solid var(--hh-border-2);
  box-shadow: 0 18px 46px color-mix(in srgb, var(--hh-shadow-lg) 55%, transparent);
  overflow: hidden;
  /* the inner <pre> carried Material's block spacing, but it has to sit flush
     inside the card — so the card owns the vertical rhythm now */
  margin: 1em 0;
}
/* the tab panel already supplies the gap under the labels */
.md-typeset .tabbed-block > .highlight:first-child { margin-top: 0; }
.md-typeset .highlight::before {
  content: "";
  position: absolute;
  top: 0;
  left: 20px;
  right: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--hh-grad);
  opacity: 0.85;
  z-index: 1;
}
.md-typeset .highlight pre { margin: 0; }
.md-typeset .highlight > pre > code,
.md-typeset pre > code {
  background: transparent;
  color: var(--hh-text);
  font-size: 0.675rem;  /* 13.5px / 1.75 — the design's terminal type */
  line-height: 1.75;
  padding: 0.9rem 1rem 1.1rem;  /* .term-body: 18px 20px 22px */
}
.md-typeset .highlight [data-linenos]::before { color: var(--hh-faint); }

/* ```yaml title="…" → the terminal window's title bar */
.md-typeset .highlight span.filename {
  background: var(--hh-term-soft);
  border-bottom: 1px solid var(--hh-border);
  color: var(--hh-muted);
  font-family: var(--md-code-font-family);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  /* Material floats this off the top with margin-top: 1em; it's a title bar
     here, so it has to sit flush against the card edge */
  margin: 0;
  padding: 0.6rem 1rem;  /* left edge aligns with the code below */
}

.md-clipboard {
  color: var(--hh-faint);
  border-radius: 6px;
  transition: color 0.15s, background-color 0.15s;
}
.md-clipboard:hover,
:hover > .md-clipboard:hover { color: var(--hh-coral); background: var(--hh-term-soft); }
:hover > .md-clipboard { color: var(--hh-muted); }

/* inline code */
.md-typeset code {
  background: var(--hh-term-soft);
  border: 1px solid var(--hh-border);
  border-radius: 5px;
  color: var(--hh-text);
  font-size: 0.8em;
  padding: 0.1em 0.36em;
  box-shadow: none;
}
.md-typeset a code { color: var(--hh-coral); border-color: color-mix(in srgb, var(--hh-coral) 30%, transparent); }
.md-typeset h1 code,
.md-typeset h2 code,
.md-typeset h3 code { background: transparent; border: 0; padding: 0; }

/* --------------------------------------------------------------------------
   8. Admonitions, tabs, details
   -------------------------------------------------------------------------- */

.md-typeset .admonition,
.md-typeset details {
  background: var(--hh-card);
  border: 1px solid var(--hh-border);
  border-left-width: 1px;
  border-radius: 14px;
  box-shadow: none;
  font-size: 0.7rem;
  overflow: hidden;
  /* Material insets the box and bleeds the title back out with a negative
     margin; the title bar here is a full-width bar, so drop both */
  padding: 0;
}
.md-typeset .admonition-title,
.md-typeset summary {
  background: var(--hh-term-soft);
  border: 0;
  border-bottom: 1px solid var(--hh-border);
  color: var(--hh-text);
  font-family: var(--md-code-font-family);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.6rem 0.8rem 0.6rem 2.1rem;
  margin: 0;
}
.md-typeset .admonition-title::before,
.md-typeset summary::before {
  top: 0.6rem;
  left: 0.72rem;
  width: 0.9rem;
  height: 0.9rem;
}
.md-typeset .admonition > :not(.admonition-title),
.md-typeset details > :not(summary) { padding-left: 0.8rem; padding-right: 0.8rem; }
/* …but code blocks, tables and tab sets are cards in their own right. Padding
   would land inside their border and hold their own title bars off the edge,
   so inset those from the outside instead. */
.md-typeset .admonition > :is(.highlight, .md-typeset__scrollwrap, .tabbed-set),
.md-typeset details > :is(.highlight, .md-typeset__scrollwrap, .tabbed-set) {
  padding-left: 0;
  padding-right: 0;
  margin-left: 0.8rem;
  margin-right: 0.8rem;
}
.md-typeset .admonition p { color: var(--hh-muted); }
.md-typeset summary::after { color: var(--hh-faint); }

/* Remap the families onto the brand: informational -> coral, states keep meaning.
   Material scopes its per-type colours as `.admonition.info` / `details.info`,
   so these have to carry the same weight to win. */
.md-typeset .admonition:is(.note, .abstract, .summary, .tldr, .info, .todo),
.md-typeset details:is(.note, .abstract, .summary, .tldr, .info, .todo) {
  border-color: color-mix(in srgb, var(--hh-coral) 32%, transparent);
}
.md-typeset :is(.note, .abstract, .summary, .tldr, .info, .todo) > :is(.admonition-title, summary) {
  background: color-mix(in srgb, var(--hh-coral) 12%, transparent);
}
.md-typeset :is(.note, .abstract, .summary, .tldr, .info, .todo) > :is(.admonition-title, summary)::before {
  background-color: var(--hh-coral);
}
.md-typeset .admonition:is(.tip, .hint, .success, .check, .done),
.md-typeset details:is(.tip, .hint, .success, .check, .done) {
  border-color: color-mix(in srgb, var(--hh-ok) 32%, transparent);
}
.md-typeset :is(.tip, .hint, .success, .check, .done) > :is(.admonition-title, summary) {
  background: color-mix(in srgb, var(--hh-ok) 12%, transparent);
}
.md-typeset :is(.tip, .hint, .success, .check, .done) > :is(.admonition-title, summary)::before {
  background-color: var(--hh-ok);
}
.md-typeset .admonition:is(.warning, .caution, .attention),
.md-typeset details:is(.warning, .caution, .attention) {
  border-color: color-mix(in srgb, var(--hh-amber) 38%, transparent);
}
.md-typeset :is(.warning, .caution, .attention) > :is(.admonition-title, summary) {
  background: color-mix(in srgb, var(--hh-amber) 14%, transparent);
}
.md-typeset :is(.warning, .caution, .attention) > :is(.admonition-title, summary)::before {
  background-color: var(--hh-lat);
}
.md-typeset .admonition:is(.danger, .error, .failure, .fail, .missing, .bug),
.md-typeset details:is(.danger, .error, .failure, .fail, .missing, .bug) {
  border-color: color-mix(in srgb, var(--hh-coral-deep) 40%, transparent);
}
.md-typeset :is(.danger, .error, .failure, .fail, .missing, .bug) > :is(.admonition-title, summary) {
  background: color-mix(in srgb, var(--hh-coral-deep) 14%, transparent);
}
.md-typeset :is(.danger, .error, .failure, .fail, .missing, .bug) > :is(.admonition-title, summary)::before {
  background-color: var(--hh-coral-deep);
}
/* example/quote keep their own hue but pick up the card chrome above */
.md-typeset .admonition:is(.example, .quote, .cite),
.md-typeset details:is(.example, .quote, .cite) {
  border-color: var(--hh-border-2);
}

/* tabs — the terminal window's segmented pill control */
.md-typeset .tabbed-set { margin: 1.2rem 0; }
.md-typeset .tabbed-labels {
  align-self: flex-start;  /* .tabbed-set is a flex column — don't stretch the pill */
  background: var(--hh-term-soft);
  border: 1px solid var(--hh-border);
  border-radius: 9px;
  box-shadow: none;
  display: flex;
  gap: 2px;
  max-width: 100%;
  padding: 3px;
  width: fit-content;
}
.md-typeset .tabbed-labels > label {
  position: relative;
  z-index: 1;
  border: 0;
  border-radius: 6px;
  color: var(--hh-muted);
  font-family: var(--md-code-font-family);
  font-size: 0.56rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  padding: 0.42rem 0.85rem;
}
.md-typeset .tabbed-labels > label:hover { color: var(--hh-text); }
/* Material slides ::before as the active indicator — grow it into a pill */
.js .md-typeset .tabbed-labels::before {
  background: color-mix(in srgb, var(--hh-coral) 20%, transparent);
  border-radius: 6px;
  bottom: 3px;
  top: 3px;
  height: auto;
}
.md-typeset .tabbed-set > input:checked + label { color: var(--hh-text); font-weight: 600; }
/* no-JS / print fallback: the checked label paints its own pill */
.no-js .md-typeset .tabbed-set > input:checked + label {
  background: color-mix(in srgb, var(--hh-coral) 20%, transparent);
}
.md-typeset .tabbed-content { margin-top: 0.6rem; }
.md-typeset .tabbed-block > .highlight:first-child > pre { margin: 0; }

/* --------------------------------------------------------------------------
   9. Footer, back-to-top, tooltips, icons
   -------------------------------------------------------------------------- */

.md-footer {
  background: transparent;
  border-top: 1px solid var(--hh-border);
  margin-top: 3rem;
}
.md-footer__inner { margin: 0 auto; padding: 1.4rem 0; }
.md-footer__link { opacity: 1; }
.md-footer__direction {
  font-family: var(--md-code-font-family);
  font-size: 0.52rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hh-faint);
  opacity: 1;
}
.md-footer__title { color: var(--hh-muted); font-weight: 600; }
.md-footer__link:hover .md-footer__title { color: var(--hh-text); }
.md-footer-meta {
  background: var(--hh-bg-2);
  border-top: 1px solid var(--hh-border);
}
.md-footer-meta__inner { padding: 1.1rem 0; }
.md-copyright,
.md-copyright__highlight { color: var(--hh-faint); font-size: 0.6rem; }
.md-footer-meta a,
.md-copyright a { color: var(--hh-muted); }
.md-footer-meta a:hover,
.md-copyright a:hover { color: var(--hh-text); }

/* back-to-top: the design's glass pill */
.md-top {
  background: var(--hh-glass);
  border: 1px solid var(--hh-border-2);
  border-radius: 999px;
  color: var(--hh-muted);
  font-family: var(--md-code-font-family);
  font-size: 0.55rem;
  letter-spacing: 0.06em;
  box-shadow: none;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.md-top:hover {
  background: var(--hh-card-2);
  color: var(--hh-text);
  border-color: color-mix(in srgb, var(--hh-coral) 55%, transparent);
  transform: none;
}

/* icons: :material-check: reads as a coral tick, like the design's feature rows */
.md-typeset .twemoji { vertical-align: text-bottom; }
.md-typeset td .twemoji { color: var(--hh-coral); }
/* the light palette's coral is lifted toward white — too faint for a 12px tick */
[data-md-color-scheme="default"] .md-typeset td .twemoji { color: var(--hh-coral-deep); }
.md-typeset .twemoji svg { width: 0.95em; height: 0.95em; }

/* hint.css tooltips (mkdocs-tooltips) in the design's terminal idiom */
[class*="hint--"] { border-bottom: 1px dotted var(--hh-border-2); }
[class*="hint--"]::after {
  background: var(--hh-glass) !important;
  border: 1px solid var(--hh-border-2);
  border-radius: 8px;
  box-shadow: 0 8px 30px var(--hh-shadow-lg);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--hh-text) !important;
  font-family: var(--md-code-font-family);
  font-size: 11px;
  letter-spacing: 0.02em;
  text-shadow: none !important;
  padding: 7px 11px;
}
[class*="hint--"]::before { border-top-color: var(--hh-border-2) !important; }
.md-typeset .hint--bottom-left::before,
.md-typeset .hint--bottom-right::before,
.md-typeset .hint--bottom::before { border-bottom-color: var(--hh-border-2) !important; }

/* selection + focus */
::selection { background: color-mix(in srgb, var(--hh-coral) 30%, transparent); }
.md-typeset :target { scroll-margin-top: 5rem; }

/* --------------------------------------------------------------------------
   10. Responsive
   -------------------------------------------------------------------------- */

@media screen and (max-width: 59.984375em) {
  .md-typeset h1 { font-size: 1.75rem; }
  .md-typeset h2 { font-size: 1.2rem; }
}

@media screen and (max-width: 44.984375em) {
  .md-header__inner { height: 56px; }
  .md-logo svg { height: 24px; }
  .md-header__title { display: none; }
  /* long tab labels can't fit — let the pill fill the column and scroll inside it */
  .md-content__inner > .tabbed-set .tabbed-labels { margin: 0; width: auto; }
  .md-typeset .tabbed-control { background: linear-gradient(to right, var(--hh-bg) 40%, transparent); }
  .md-typeset .tabbed-control--next { background: linear-gradient(to left, var(--hh-bg) 40%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
  .js .md-typeset .tabbed-labels::before { transition: none; }
}