/* Altius Labs brand theming for Material for MkDocs.
   Sourced from docs.altiuslabs.xyz:
   - accent / primary brand: #ec6441 (GitBook --primary-9)
   - near-black surfaces:    #090909 background, #000 sidebar
   The header is kept near-black (like the source site) rather than the
   accent color, with the orange reserved for links and interactive states. */

:root {
  --altius-orange: #ec6441;
  --altius-orange-dark: #d4502f;
  --altius-orange-bright: #ff7a52;
  --altius-black: #0a0a0a;
}

/* Header & navbar: near-black in both light and dark schemes */
[data-md-color-scheme="default"],
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: var(--altius-black);
  --md-primary-fg-color--light: #1a1a1a;
  --md-primary-fg-color--dark: #000000;
}

/* Light scheme: orange links / accents on a light canvas */
[data-md-color-scheme="default"] {
  --md-accent-fg-color: var(--altius-orange-dark);
  --md-typeset-a-color: var(--altius-orange-dark);
}

/* Dark scheme: near-black canvas with the orange accent (matches the site default) */
[data-md-color-scheme="slate"] {
  --md-default-bg-color: #090909;
  --md-default-bg-color--light: #141414;
  --md-default-bg-color--lighter: #1c1c1c;
  --md-default-bg-color--lightest: #242424;
  --md-accent-fg-color: var(--altius-orange);
  --md-typeset-a-color: var(--altius-orange);
}

/* GitBook-style uppercase group headers for the top-level nav sections
   ("Introduction to Altius", "Technical Overview"). The tree is fully expanded
   (navigation.expand), so these read as section labels. */
.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link {
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .66rem;
  font-weight: 700;
  opacity: .6;
}
/* Hide the expand/collapse chevron on the top-level sections so they read as
   static headers rather than toggles. */
.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link .md-nav__icon {
  display: none;
}

/* Active sidebar item in Altius orange */
.md-nav__link--active,
.md-nav__link--active > .md-nav__link {
  color: var(--altius-orange) !important;
}

/* Diagrams: subtle rounded card so the white-background figures sit nicely on dark */
.md-typeset img[src*="/assets/images/"] {
  border-radius: 8px;
  max-width: 100%;
}

/* Logo wordmark.
   The source PNG is black artwork on transparent; both the header and the mobile
   drawer title bar are near-black (primary color), so force the logo to render
   white for contrast (same as the source site, which inverts its logo on dark). */
.md-header__button.md-logo img,
.md-header__button.md-logo svg,
.md-nav__button.md-logo img,
.md-nav__button.md-logo svg {
  height: 1.5rem;
  width: auto;
  filter: brightness(0) invert(1);
}

/* Keep the Altius wordmark visible in the header at narrower widths too.
   Material hides the header logo below 76.25em and shows only the hamburger;
   the source GitBook site keeps the logo visible, so restore it. */
@media screen and (max-width: 76.1875em) {
  .md-header__button.md-logo {
    display: inline-flex !important;
    align-items: center;
  }
}

/* Remove the right-hand table-of-contents sidebar site-wide and give the
   reclaimed width back to the main content. Material's grid hands the freed
   column to `.md-content`, so hiding the secondary sidebar widens the body. */
.md-sidebar--secondary {
  display: none !important;
}

/* ── Interactive tool widgets (validator calc, value-retention) ──────────── */
.vlc, .vrc {
  --vlc-ok: #2e9e5b;
  --vlc-warn: #e0a008;
  --vlc-bad: #d2453c;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 10px;
  padding: 1rem 1.1rem 1.2rem;
  margin: 1rem 0 1.5rem;
}
/* Value-Retention calculator bars + legend swatches */
.vrc-bar-rev { fill: var(--altius-orange); }
.vrc-bar-ops { fill: var(--md-default-fg-color--light); opacity: .5; }
.vrc-sw { display: inline-block; width: 11px; height: 11px; border-radius: 2px; vertical-align: middle; margin-right: .2rem; }
.vrc-sw--rev { background: var(--altius-orange); }
.vrc-sw--ops { background: var(--md-default-fg-color--light); opacity: .6; }

/* Build-vs-Altius calculator bars */
.bva-bar-diy { fill: var(--md-default-fg-color--light); opacity: .55; }
.bva-bar-alt { fill: var(--altius-orange); }
.bva-barval { fill: var(--md-default-fg-color--light); font-size: 11px; }
.bva-sw { display: inline-block; width: 11px; height: 11px; border-radius: 2px; vertical-align: middle; margin-right: .2rem; }
.bva-sw--diy { background: var(--md-default-fg-color--light); opacity: .6; }
.bva-sw--alt { background: var(--altius-orange); }

/* Throughput estimator + Latency comparator bars */
.tput-bar-need { fill: var(--altius-orange); }
.tput-bar-shared { fill: var(--vlc-bad); opacity: .8; }
.tput-bar-cap { fill: var(--md-default-fg-color--light); opacity: .45; }
.tput-bar-cap2 { fill: var(--altius-orange-dark); opacity: .7; }
.tput-val { fill: var(--md-default-fg-color--light); font-size: 11px; }
.lat-bar-conf { fill: var(--altius-orange); }
.lat-bar-final { fill: var(--altius-orange-dark); }
.lat-bar-shared { fill: var(--vlc-bad); opacity: .8; }

/* Launch timeline */
.tl-seg-rect { fill: var(--altius-orange); opacity: .9; cursor: pointer; transition: opacity .12s; }
.tl-seg:hover .tl-seg-rect { opacity: 1; }
.tl-seg.is-selected .tl-seg-rect { opacity: 1; stroke: var(--md-default-fg-color); stroke-width: 2; }
.tl-seg-label { fill: #fff; font-size: 12.5px; font-weight: 700; pointer-events: none; }
.tl-dur { fill: rgba(255, 255, 255, .85); font-size: 10px; pointer-events: none; }
.tl-rowlabel { fill: var(--md-default-fg-color--light); font-size: 11px; font-weight: 600; }
.tl-complabel { fill: var(--md-default-fg-color--light); font-size: 11px; }
.tl-alt-bar { fill: var(--altius-orange); }
.tl-inhouse { fill: var(--md-default-fg-color--light); opacity: .5; }
.tl-prod-label { fill: var(--altius-orange-dark); font-size: 10px; font-weight: 600; }
/* The timeline has a single control, so give it a full-width single-column
   layout (chart on top, large) instead of the cramped two-column split. */
#tl-root .vlc-layout { grid-template-columns: 1fr; gap: .8rem; }
#tl-root .vlc-chart { order: -1; }
#tl-root .vlc-chart svg { width: 100%; max-width: 100%; }
.tl-detail { font-size: .8rem; margin-top: .3rem; }
.tl-detail p { margin: .25rem 0 0; }

/* Parallel execution cells */
.par-cell-indep { fill: var(--altius-orange); }
.par-cell-dep { fill: var(--md-default-fg-color--light); opacity: .5; }

/* EVM compatibility checker */
.evm-search { width: 100%; font: inherit; font-size: .85rem; padding: .5rem .7rem; margin: .2rem 0 .7rem;
  border: 1px solid var(--md-default-fg-color--lighter); border-radius: 8px;
  background: var(--md-default-bg-color); color: var(--md-default-fg-color); }
.evm-search:focus { outline: none; border-color: var(--altius-orange); }
.evm-note { font-size: .78rem; margin-bottom: .8rem; padding: .4rem .6rem; border-radius: 6px; }
.evm-note--ok { color: var(--vlc-ok); background: color-mix(in srgb, var(--vlc-ok) 12%, transparent); }
.evm-note--ask { color: var(--vlc-warn); background: color-mix(in srgb, var(--vlc-warn) 14%, transparent); }
.evm-group { margin-bottom: .7rem; }
.evm-group__title { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--md-default-fg-color--light); margin-bottom: .35rem; }
.evm-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.evm-chip { display: inline-flex; align-items: center; gap: .3rem; font-size: .76rem; font-weight: 500;
  padding: .25rem .55rem; border-radius: 999px; border: 1px solid var(--md-default-fg-color--lightest);
  background: var(--md-default-fg-color--lightest); }
.evm-tick { color: var(--vlc-ok); font-weight: 700; }

/* ── Interactive stack diagram (Overview) ────────────────────────────────── */
.altstack { margin: 1.2rem 0 1.5rem; }
.altstack svg { width: 100%; height: auto; display: block; }
.altstack-cols { display: grid; grid-template-columns: minmax(0, 2fr) minmax(200px, 1fr); gap: 1.2rem; align-items: start; }
.altstack-cols .altstack-detail { margin-top: 0; }
@media screen and (max-width: 59.9em) { .altstack-cols { grid-template-columns: 1fr; } }
.altstack-layer { cursor: pointer; }
.altstack-box { fill: var(--md-default-fg-color--lightest); stroke: var(--md-default-fg-color--lighter); stroke-width: 1; transition: stroke .15s, fill .15s; }
.altstack-layer:hover .altstack-box { stroke: var(--altius-orange); }
.altstack-layer.is-selected .altstack-box { stroke: var(--altius-orange); stroke-width: 2.5; }
.altstack-layer:focus { outline: none; }
.altstack-layer:focus .altstack-box { stroke: var(--altius-orange); stroke-width: 2.5; }
.altstack-accent { fill: var(--md-default-fg-color--lighter); }
.altstack-layer--hpec .altstack-accent { fill: var(--altius-orange); }
.altstack-layer--l1 .altstack-accent { fill: var(--altius-orange-dark); }
.altstack-layer--ssmt .altstack-accent { fill: var(--md-default-fg-color--light); }
.altstack-title { fill: var(--md-default-fg-color); font-size: 16px; font-weight: 700; }
.altstack-sub { fill: var(--md-default-fg-color--light); font-size: 12px; }
.altstack-metric { fill: var(--altius-orange-dark); font-size: 12px; font-weight: 600; }
.altstack-arrow { stroke: var(--md-default-fg-color--light); stroke-width: 1.5; }
.altstack-arrowhead { fill: var(--md-default-fg-color--light); }
.altstack-conn { fill: var(--md-default-fg-color--light); font-size: 10.5px; }
.altstack-detail { border: 1px solid var(--md-default-fg-color--lightest); border-left: 3px solid var(--altius-orange); border-radius: 8px; padding: .7rem .9rem; margin-top: .4rem; background: var(--md-default-fg-color--lightest); }
.altstack-detail__head strong { font-size: .95rem; }
.altstack-detail p { margin: .35rem 0 .5rem; font-size: .82rem; }
.altstack-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .5rem; }
.altstack-chip { font-size: .68rem; font-weight: 600; padding: .15rem .45rem; border-radius: 999px; background: var(--altius-orange); color: #fff; }
.altstack-link { font-size: .78rem; font-weight: 600; }
.altstack-hint { font-size: .74rem; font-weight: 600; color: var(--altius-orange-dark); text-align: center; margin: 0 0 .6rem; }
.altstack-foot { font-size: .68rem; color: var(--md-default-fg-color--light); text-align: center; margin: .5rem 0 0; }
.vlc-head h3 { margin: 0 0 .2rem; }
.vlc-muted { color: var(--md-default-fg-color--light); font-size: .76rem; margin: 0; }
.vlc-presets { display: flex; flex-wrap: wrap; gap: .4rem; margin: .9rem 0; }
.vlc-btn {
  font: inherit; font-size: .72rem; cursor: pointer;
  padding: .3rem .6rem; border-radius: 6px;
  border: 1px solid var(--md-default-fg-color--lighter);
  background: var(--md-default-bg-color); color: var(--md-default-fg-color);
}
.vlc-btn:hover { border-color: var(--altius-orange); }
.vlc-btn--active { background: var(--altius-orange); border-color: var(--altius-orange); color: #fff; }
.vlc-layout { display: grid; grid-template-columns: minmax(240px, 340px) 1fr; gap: 1.4rem; align-items: start; }
@media screen and (max-width: 60em) { .vlc-layout { grid-template-columns: 1fr; } }
.vlc-controls label { display: block; font-size: .76rem; margin: .55rem 0; color: var(--md-default-fg-color--light); }
.vlc-controls label strong { color: var(--md-default-fg-color); }
.vlc-controls input[type="range"] { width: 100%; accent-color: var(--altius-orange); margin-top: .25rem; }
.vlc-execmode { margin: .7rem 0 .2rem; }
.vlc-execmode__label { font-size: .76rem; color: var(--md-default-fg-color--light); }
.vlc-toggle { display: flex; gap: .35rem; margin-top: .3rem; }
.vlc-toggle button { font: inherit; font-size: .72rem; cursor: pointer; flex: 1; padding: .3rem .5rem; border-radius: 6px; border: 1px solid var(--md-default-fg-color--lighter); background: var(--md-default-bg-color); color: var(--md-default-fg-color); }
.vlc-toggle button.vlc-btn--active { background: var(--altius-orange); border-color: var(--altius-orange); color: #fff; }
.vlc-help { font-size: .7rem; color: var(--md-default-fg-color--light); margin: .2rem 0 0; }
.vlc-verdict { border-radius: 8px; padding: .55rem .7rem; margin: .9rem 0; font-size: .76rem; border-left: 4px solid var(--md-default-fg-color--lighter); background: var(--md-default-fg-color--lightest); }
.vlc-verdict strong { display: block; margin-bottom: .15rem; }
.vlc-verdict span { color: var(--md-default-fg-color--light); }
.vlc-verdict--ok { border-left-color: var(--vlc-ok); }
.vlc-verdict--warn { border-left-color: var(--vlc-warn); }
.vlc-verdict--bad { border-left-color: var(--vlc-bad); }
.vlc-readouts { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.vlc-readouts article { background: var(--md-default-fg-color--lightest); border-radius: 6px; padding: .45rem .5rem; text-align: center; }
.vlc-readouts span { display: block; font-size: .62rem; color: var(--md-default-fg-color--light); }
.vlc-readouts strong { font-size: .92rem; }
.vlc-chart svg { width: 100%; height: auto; }
.vlc-grid { stroke: var(--md-default-fg-color--lightest); stroke-width: 1; }
.vlc-axis { stroke: var(--md-default-fg-color--light); stroke-width: 1.2; }
.vlc-axtick { fill: var(--md-default-fg-color--light); font-size: 10px; }
.vlc-axlabel { fill: var(--md-default-fg-color--light); font-size: 11px; }
.vlc-region-bad { fill: var(--vlc-bad); opacity: .12; }
.vlc-region-warn { fill: var(--vlc-warn); opacity: .16; }
.vlc-region-ok { fill: var(--vlc-ok); opacity: .18; }
.vlc-boundary { stroke: var(--vlc-bad); stroke-width: 2; }
.vlc-boundary-warn { stroke: var(--vlc-warn); stroke-width: 1.5; stroke-dasharray: 5 4; }
.vlc-guide { stroke: var(--md-default-fg-color--light); stroke-width: 1; stroke-dasharray: 3 3; }
.vlc-op { stroke: var(--md-default-bg-color); stroke-width: 2; }
.vlc-op--ok { fill: var(--vlc-ok); }
.vlc-op--warn { fill: var(--vlc-warn); }
.vlc-op--bad { fill: var(--vlc-bad); }
.vlc-legend { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: .5rem; font-size: .68rem; color: var(--md-default-fg-color--light); }
.vlc-sw { display: inline-block; width: 11px; height: 11px; border-radius: 2px; vertical-align: middle; margin-right: .2rem; }
.vlc-sw--ok { background: var(--vlc-ok); }
.vlc-sw--warn { background: var(--vlc-warn); }
.vlc-sw--bad { background: var(--vlc-bad); }
.vlc-sw--line { background: var(--vlc-bad); height: 3px; border-radius: 0; }

/* ── Architecture diagrams (hand-built SVG, replaces Mermaid) ─────────────── */
.arch { margin: 1.3rem 0 1.6rem; }
.arch svg { width: 100%; height: auto; max-width: 820px; display: block; margin: 0 auto; }
.arch text { font-family: inherit; }
.arch-box { fill: var(--md-default-fg-color--lightest); stroke: var(--md-default-fg-color--lighter); stroke-width: 1.3; }
.arch-box--accent { stroke: var(--altius-orange); stroke-width: 2; }
.arch-group { fill: none; stroke: var(--md-default-fg-color--lighter); stroke-width: 1.3; stroke-dasharray: 5 4; }
.arch-grouplabel { fill: var(--md-default-fg-color--light); font-size: 12px; font-weight: 700; letter-spacing: .05em; }
.arch-title { fill: var(--md-default-fg-color); font-size: 16px; font-weight: 700; }
.arch-sub { fill: var(--md-default-fg-color--light); font-size: 12.5px; }
.arch-edge { stroke: var(--md-default-fg-color--light); stroke-width: 1.8; fill: none; }
.arch-arrow { fill: var(--md-default-fg-color--light); }