/* TAO-inspired dark aesthetic — monochrome, sharp typography, generous spacing. */

:root,
[data-md-color-scheme="slate"] {
  --md-default-bg-color: #0a0a0a;
  --md-default-bg-color--light: #0a0a0a;
  --md-default-fg-color: #f5f5f5;
  --md-default-fg-color--light: #c7c7c7;
  --md-default-fg-color--lighter: #8a8a8a;
  --md-default-fg-color--lightest: #2a2a2a;
  --md-primary-fg-color: #0a0a0a;
  --md-primary-bg-color: #f5f5f5;
  --md-accent-fg-color: #8c80e5;
  --md-accent-fg-color--transparent: rgba(140, 128, 229, 0.1);
  --md-accent-bg-color: #ffffff;
  --md-accent-bg-color--light: rgba(255, 255, 255, 0.7);
  --md-typeset-a-color: #8c80e5;
  --tao-accent: #8c80e5;
  --tao-accent-soft: rgba(140, 128, 229, 0.15);
  /* Mermaid sequence number badges — use the accent so they stand out
     against the dark background. */
  --md-mermaid-sequence-number-bg-color: #8c80e5;
  --md-mermaid-sequence-number-fg-color: #ffffff;
  --tao-border: #1a1a1a;
  --tao-surface: #111111;
  --tao-muted: #8a8a8a;
}

body {
  background: #0a0a0a;
}

.md-header,
.md-tabs {
  background: rgba(10, 10, 10, 0.85);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--tao-border);
  box-shadow: none;
}

.md-header__title {
  font-weight: 600;
  letter-spacing: -0.01em;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #ffffff;
}

/* ---------- Landing page ---------- */

.tao-landing {
  min-height: calc(100vh - 5rem);
  padding: 2rem 1.5rem 4rem;
  background:
    radial-gradient(ellipse at top, rgba(255, 255, 255, 0.04), transparent 60%),
    #0a0a0a;
}

/* Remove MkDocs Material's default wrapper padding around the landing so
   the hero region sits flush against the header without a dark strip of
   wrapper background showing through above it. Mirrors the Scalar API
   page rule further below. */
.md-main:has(.tao-landing) .md-main__inner,
.md-content:has(.tao-landing),
.md-content:has(.tao-landing) .md-content__inner {
  margin: 0;
  padding: 0;
  max-width: none;
}

/* Suppress Material's auto-injected <h1> on the landing page — our hero
   handles its own branding via the logo image. */
.md-content__inner:has(.tao-landing) > h1:first-child {
  display: none;
}

.tao-landing__header {
  text-align: center;
  margin: 0 auto 2rem;
  max-width: 40rem;
}

.tao-landing__eyebrow {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tao-muted);
  margin: 0 0 0.75rem;
}

.tao-landing__heading {
  font-size: clamp(1.85rem, 3.5vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0 0 0.75rem;
  color: #ffffff;
}

.tao-landing__tagline {
  font-size: 0.95rem;
  color: var(--tao-muted);
  margin: 0;
  line-height: 1.5;
}

.tao-landing__links {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin: 1.5rem auto 0;
  font-size: 0.8rem;
  color: var(--tao-muted);
}

.tao-landing__links a {
  color: #ffffff;
}

/* ---------- Product grid ---------- */

.tao-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem;
  max-width: 64rem;
  margin: 0 auto;
}

.tao-grid--single {
  grid-template-columns: minmax(0, 22rem);
  justify-content: start;
}

@media (max-width: 720px) {
  .tao-grid { grid-template-columns: 1fr; }
  .tao-grid--single { grid-template-columns: minmax(0, 1fr); }
}

.tao-tile {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.25rem;
  border-radius: 12px;
  background: #111111;
  border: 1px solid var(--tao-border);
  text-decoration: none !important;
  color: #ffffff !important;
  position: relative;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  overflow: hidden;
}

/* Tiles size to content; flex stretch keeps the row of tiles the same height
   as the tallest one for visual alignment. */

a.tao-tile,
a.tao-tile:visited,
a.tao-tile:hover,
a.tao-tile:active {
  color: #ffffff !important;
  text-decoration: none !important;
}

.tao-tile--live {
  cursor: pointer;
}

.tao-tile--live:hover {
  transform: translateY(-2px);
  border-color: var(--tao-accent);
  background: #141414;
}

.tao-tile--soon {
  opacity: 0.55;
  cursor: default;
}

.tao-tile__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.tao-tile__status {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(134, 239, 172, 0.12);
  color: #86efac;
  border: 1px solid rgba(134, 239, 172, 0.25);
}

.tao-tile__status--soon {
  background: rgba(255, 255, 255, 0.04);
  color: var(--tao-muted);
  border-color: var(--tao-border);
}

.tao-tile__arrow {
  font-size: 1.15rem;
  color: var(--tao-muted);
  transition: transform 0.15s ease, color 0.15s ease;
}

.tao-tile--live:hover .tao-tile__arrow {
  color: var(--tao-accent);
  transform: translateX(4px);
}

.tao-tile__title {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
  color: var(--tao-accent) !important;
}

.tao-tile__copy {
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--tao-muted);
  margin: 0;
  flex: 1;
}

.tao-tile__meta {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tao-muted);
  padding-top: 0.6rem;
  border-top: 1px solid var(--tao-border);
}


/* ---------- Scalar sidebar — white SVG icons per tag ---------- */

/* Class-based targeting. API-page scripts tag each sidebar link by its
   visible text (Health, Intents, TAO, Models, …) and assign a `tao-icon-*`
   class. We then attach a 16px inline SVG via ::before. `!important` keeps
   Scalar's Vue-scoped resets from suppressing the pseudo-element. */

.tao-icon-health::before,
.tao-icon-intents::before,
.tao-icon-networks::before,
.tao-icon-solvers::before,
.tao-icon-indexer::before,
.tao-icon-terms::before,
.tao-icon-accounts::before,
.tao-icon-tao::before,
.tao-icon-network::before,
.tao-icon-subnet-pools::before,
.tao-icon-subnet-emissions::before,
.tao-icon-subnets::before,
.tao-icon-models::before {
  content: "" !important;
  display: inline-block !important;
  width: 16px !important;
  height: 16px !important;
  margin-right: 8px !important;
  vertical-align: -3px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  opacity: 0.9 !important;
  flex-shrink: 0 !important;
}

.tao-icon-health::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h4l2.5-7 4.5 14 2-7h5'/%3E%3C/svg%3E") !important;
}

.tao-icon-intents::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h14l-3-3M20 17H6l3 3'/%3E%3C/svg%3E") !important;
}

.tao-icon-networks::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a13 13 0 010 18M12 3a13 13 0 000 18'/%3E%3C/svg%3E") !important;
}

.tao-icon-solvers::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 4 14h7l-1 8 9-12h-7l1-8z'/%3E%3C/svg%3E") !important;
}

.tao-icon-indexer::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='5' rx='8' ry='3'/%3E%3Cpath d='M4 5v6c0 1.6 3.6 3 8 3s8-1.4 8-3V5M4 11v6c0 1.6 3.6 3 8 3s8-1.4 8-3v-6'/%3E%3C/svg%3E") !important;
}

.tao-icon-terms::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h7l4 4v14H7z'/%3E%3Cpath d='M14 3v5h4M9.5 14l2 2 4-5'/%3E%3C/svg%3E") !important;
}

.tao-icon-accounts::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c1.8-4 4.4-6 8-6s6.2 2 8 6'/%3E%3C/svg%3E") !important;
}

.tao-icon-tao::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M8 8h8M12 8v8M9.5 16h5'/%3E%3C/svg%3E") !important;
}

.tao-icon-network::before,
.tao-icon-subnets::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a13 13 0 010 18M12 3a13 13 0 000 18'/%3E%3C/svg%3E") !important;
}

.tao-icon-subnet-pools::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 16c2 0 2-2 4-2s2 2 4 2 2-2 4-2 2 2 4 2'/%3E%3Cpath d='M4 10c2 0 2-2 4-2s2 2 4 2 2-2 4-2 2 2 4 2'/%3E%3C/svg%3E") !important;
}

.tao-icon-subnet-emissions::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 4 14h7l-1 8 9-12h-7l1-8z'/%3E%3C/svg%3E") !important;
}

.tao-icon-models::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='5' rx='8' ry='3'/%3E%3Cpath d='M4 5v6c0 1.6 3.6 3 8 3s8-1.4 8-3V5M4 11v6c0 1.6 3.6 3 8 3s8-1.4 8-3v-6'/%3E%3C/svg%3E") !important;
}

/* ---------- API page: full-bleed Scalar ---------- */

/* When the API page mounts, push the embed past Material's content padding
   and let Scalar own the full viewport. The :has() selector scopes these
   rules to the API page only — landing page is unaffected. */
.md-main:has(.tao-scalar-host) .md-main__inner,
.md-content:has(.tao-scalar-host),
.md-content:has(.tao-scalar-host) .md-content__inner {
  margin: 0;
  padding: 0;
  max-width: none;
}

.md-content:has(.tao-scalar-host) .md-content__inner > h1:first-child,
.md-content:has(.tao-scalar-host) .md-content__button {
  display: none;
}

.tao-scalar-host {
  position: relative;
  min-height: 100vh;
  background: #0a0a0a;
}

.tao-scalar-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tao-muted);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  pointer-events: none;
}

/* Once Scalar has mounted, its rendered tree appears as a sibling of the
   loading placeholder — hide the placeholder. */
.tao-scalar-host:has(.scalar-app) .tao-scalar-loading,
.tao-scalar-host:has(.scalar-api-reference) .tao-scalar-loading {
  display: none;
}

/* On the API page, keep Material's header (with top tabs) visible.
   Bump its z-index above Scalar's sticky sidebar so the sidebar doesn't
   roll over the header during scroll. */
body:has(.tao-scalar-host) .md-header {
  z-index: 1000;
}

/* Belt-and-suspenders: defensively hide both sidebars on the API page even
   though `hide: navigation, toc` in the page frontmatter already does this,
   so Scalar truly owns the full viewport width at every breakpoint. */
body:has(.tao-scalar-host) .md-sidebar {
  display: none;
}

/* Tables inside Scalar's description area (e.g. the Intent lifecycle state
   table in info.description of openapi.yaml) can render with the first
   column clipped on narrower viewports. Force the table to behave as a
   scrollable block and keep cell content from breaking out of its own
   cell, so the From column is fully visible when scrolled to the start. */
.scalar-app .references-rendered table {
  display: block;
  overflow-x: auto;
  max-width: 100%;
  width: max-content;
}

.scalar-app .references-rendered table th,
.scalar-app .references-rendered table td {
  white-space: nowrap;
}

/* Center table headers. Scalar's default <th> styling is more specific
   than ours; use !important to win. */
.scalar-app .references-rendered table th {
  text-align: center !important;
}

/* Scalar applies `word-break: break-all` to inline <code> by default, which
   causes long identifiers like `PENDING_TO_BE_MINED` to wrap mid-word
   inside table cells. Override so state-name code spans stay on one line.
   Also reduce inline-code horizontal padding inside table cells: Scalar's
   default makes `(open)` render as `( open )` with visible whitespace
   between the parentheses and the code span. */
.scalar-app .references-rendered table code {
  word-break: keep-all;
  white-space: nowrap;
  padding: 0 0.2em;
}

.scalar-app .references-rendered table th:first-child,
.scalar-app .references-rendered table td:first-child {
  padding-left: 0.75rem;
}

/* === Click-to-zoom: Mermaid diagrams & content images === */

.mermaid {
  cursor: zoom-in;
  transition: opacity 0.15s ease;
}
.mermaid:hover {
  opacity: 0.92;
}

.md-content img {
  cursor: zoom-in;
}

/* Backdrop behind the zoomed element. */
.tao-zoom-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  z-index: 9998;
  cursor: zoom-out;
  animation: tao-zoom-fade 0.18s ease-out;
}

@keyframes tao-zoom-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Lock body scroll while a diagram is zoomed. */
body.tao-zoom-locked {
  overflow: hidden;
}

/* In-place fullscreen promotion. The element stays in the DOM; CSS positions
   it as a fixed-position card above the backdrop. Shadow-DOM content (Mermaid
   11.x SVG) renders inside the host, so resizing the host resizes the SVG. */
.mermaid.tao-zoom-active,
img.tao-zoom-active {
  position: fixed !important;
  top: 2.5vh !important;
  left: 2.5vw !important;
  width: 95vw !important;
  height: 95vh !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 2rem !important;
  z-index: 9999 !important;
  background: #111 !important;
  border: 1px solid #2a2a2a !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
  cursor: zoom-out !important;
  overflow: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Override the global `.mermaid svg { max-width: 100% !important }` so the
   SVG can grow inside the fullscreen host instead of being clipped by the
   original column width. */
.mermaid.tao-zoom-active svg {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  display: block !important;
}

img.tao-zoom-active {
  object-fit: contain;
}

/* === Centered tables ===
   Material defaults `.md-typeset table:not([class])` to display: inline-block
   (for overflow handling), which makes `margin: auto` a no-op. Force display: table
   AND auto margins with !important so the table centers within the content column.
   Also center the wrapper div in case Material wraps the table in .md-typeset__table. */

.md-typeset table:not([class]) {
  display: table !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.md-typeset__table,
.md-typeset__scrollwrap {
  display: flex !important;
  justify-content: center !important;
}

/* === Tabbed code blocks: card style matching Wormhole === */

.md-typeset .tabbed-set {
  margin: 1rem 0;
}

/* Labels strip: no background; border + rounded top creates the card outline. */
.md-typeset .tabbed-labels {
  border-top-left-radius: 0.5em;
  border-top-right-radius: 0.5em;
  border: 1px solid var(--md-default-fg-color--lightest, #2a2a2a);
  border-bottom: none;
  box-shadow: none;
  background: transparent;
  padding: 0 0.5rem;
}

.md-typeset .tabbed-labels > label {
  padding: 0.3rem 0.85rem;
  font-weight: 500;
  font-size: 0.7rem;
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: var(--md-default-fg-color--light, #8a8a8a);
  transition: color 0.15s ease;
  cursor: pointer;
}

.md-typeset .tabbed-labels > label:hover {
  color: var(--md-default-fg-color, #f5f5f5);
}

.md-typeset .tabbed-labels--linked > label > a,
.md-typeset .tabbed-labels > label > [href]:first-child {
  color: inherit;
  font-weight: inherit;
}

/* Active tab underline indicator (the slider) */
.js .md-typeset .tabbed-labels:before {
  background-color: var(--tao-accent);
  height: 1.5px;
  border-radius: 1px;
}

.md-typeset .tabbed-set > input:checked + label {
  color: var(--tao-accent);
  font-weight: 600;
}

/* Content area: NO background, NO padding. Continues the border from the labels.
   The embedded <pre> code block provides its own background and padding. */
.md-typeset .tabbed-content {
  border: 1px solid var(--md-default-fg-color--lightest, #2a2a2a);
  border-top: none;
  border-bottom-left-radius: 0.5em;
  border-bottom-right-radius: 0.5em;
  background: transparent;
  padding: 0;
}

/* Prose content inside tabs gets margin so it doesn't hug the borders.
   Code blocks already manage their own spacing, so they're untouched. */
.md-typeset .tabbed-block p,
.md-typeset .tabbed-block ul,
.md-typeset .tabbed-block ol,
.md-typeset .tabbed-block details {
  margin: 1em;
}

/* === Bulletproof click capture on Mermaid diagrams === */
/* Ensure the click bubbles to .mermaid no matter which child SVG element gets the hit */
.mermaid svg,
.mermaid svg * {
  pointer-events: none;
}
.mermaid {
  pointer-events: auto;
}

/* === Constrain Mermaid SVGs to container width === */

.mermaid {
  display: block;
  text-align: center;
  margin: 1.25rem auto;
  max-width: 100%;
  overflow-x: auto;
}

.mermaid svg {
  max-width: 100% !important;
  height: auto !important;
  display: inline-block;
}

/* === Accent highlighting for navigation, search, anchors === */

/* Active item in left sidebar (current page) */
.md-nav__link--active,
.md-nav__link:active {
  color: var(--tao-accent) !important;
}

/* Active tab in the top nav */
.md-tabs__link--active,
.md-tabs__item--active .md-tabs__link {
  color: var(--tao-accent) !important;
  opacity: 1 !important;
}

/* Header anchor (¶) hover */
.md-typeset .headerlink:hover,
.md-typeset .headerlink:focus,
.md-typeset :target > .headerlink {
  color: var(--tao-accent);
}

/* Search input focus */
.md-search__input:focus,
.md-search__input:hover {
  background-color: var(--tao-accent-soft);
}

/* Inline code accent on hover/select — optional subtle highlight */
.md-typeset a code {
  color: var(--tao-accent);
  background: var(--tao-accent-soft);
}

/* "Live" status pill on landing tiles: switch from green to accent */
.tao-tile__status:not(.tao-tile__status--soon) {
  color: var(--tao-accent);
  border-color: var(--tao-accent);
}