/* Brand fonts (exact match to the platform/marketing site):
   - Farnham Headline (display serif) via the Adobe Typekit kit `ghs4ttt`.
   - Apfel Grotezk (body sans) via the @fontsource package over jsDelivr.
   Imported here so the families are available; docs.json `fonts` applies them.
   `docs.hud.ai` must stay an authorized domain on the Typekit kit. */
@import url("https://use.typekit.net/ghs4ttt.css");
@import url("https://cdn.jsdelivr.net/npm/@fontsource/apfel-grotezk@5.2.5/index.css");

.dark {
  --tw-prose-body: #d4d4d8;
  --tw-prose-headings: #fafafa;
  --tw-prose-links: #e4e4e7;
  --tw-prose-bold: #f4f4f5;
  --tw-prose-counters: #a1a1aa;
  --tw-prose-bullets: #a1a1aa;
  --tw-prose-quotes: #d4d4d8;
  --tw-prose-code: #e4e4e7;
  --tw-prose-th-borders: #3f3f46;
  --tw-prose-td-borders: #27272a;
}

/* Sidebar page tags (e.g. the "Beta" pill on Robots): render quiet gray
   instead of the primary accent — informational, not a call to action. */
.nav-tag-pill-text {
  color: #71717a !important;
  background-color: rgba(113, 113, 122, 0.12) !important;
  font-weight: 500 !important;
}
.dark .nav-tag-pill-text {
  color: #a1a1aa !important;
  background-color: rgba(161, 161, 170, 0.16) !important;
}

/* ── HUD website design language ──────────────────────────────────────────
   Echo the platform/marketing site (sites/shared/src/tokens): warm-neutral
   text, hairline borders, a gold selection highlight, and tighter editorial
   headings to pair with the Farnham serif heading font set in docs.json. */

/* Light-mode prose: warm near-black body + muted gray, matching the site
   tokens (--default-font #0a0a0a, --subtext-color #737373, hairline #e5e5e5). */
html:not(.dark) {
  --tw-prose-body: #262626;
  --tw-prose-headings: #0a0a0a;
  --tw-prose-bold: #0a0a0a;
  --tw-prose-links: #0a0a0a;
  --tw-prose-quotes: #525252;
  --tw-prose-counters: #737373;
  --tw-prose-bullets: #d4d4d4;
  --tw-prose-hr: #e5e5e5;
  --tw-prose-th-borders: #e5e5e5;
  --tw-prose-td-borders: #f0f0f0;
}

/* Body text: Inter (matches the platform's product body font; insurance
   alongside docs.json `fonts.family`). */
body {
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
}

/* Three-tier type, matching the platform:
   - Main heading (page title + content H1): Farnham display serif.
   - Subheadings (H2–H4) and "subheading" chrome: Apfel Grotezk.
   - Body: Inter (above).
   Scoped to the content area so nav/sidebar chrome is untouched. */
#page-title,
#content h1 {
  font-family: "farnham-headline", "Farnham Headline", ui-serif, Georgia, serif !important;
  letter-spacing: -0.015em;
}
#content h2,
#content h3,
#content h4 {
  font-family: "Apfel Grotezk", "Inter", ui-sans-serif, system-ui, sans-serif !important;
  letter-spacing: -0.01em;
}

/* "Part N" step labels: look like an H3 (same font/size/weight, italic) but are
   plain divs — no heading anchor, much less space above, indented from the side. */
#content .part-label {
  font-family: "Apfel Grotezk", "Inter", ui-sans-serif, system-ui, sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
  font-style: italic;
  letter-spacing: -0.01em;
  color: var(--tw-prose-headings);
  margin-top: 0.4rem;
  margin-bottom: 0.4rem;
}

/* "See also" reference notes under code blocks: snug against the block above,
   smaller and paler than body text. Light + dark variants. */
#content .docs-ref {
  margin-top: -1.25rem !important;   /* pull up tight under the previous block */
  font-size: 0.82em;
  color: #8a8a8a;
}
#content .docs-ref a {
  color: #8a8a8a;
}
.dark #content .docs-ref {
  color: #8a8a8a;
}
.dark #content .docs-ref a {
  color: #8a8a8a;
}

/* Warm gold text selection (site accent --accent #ffc98c). */
::selection {
  background-color: rgba(255, 201, 140, 0.45);
  color: #0a0a0a;
}

/* Icon-only social links: Mintlify requires a `label`, so it stays (for
   accessibility) but we hide the visible text and show only the brand icon.
   Removing the inner flex gap keeps the icon centered with no trailing space. */
.navbar-link {
  font-size: 0 !important;
}
.navbar-link a {
  gap: 0 !important;
}
.navbar-link svg,
.navbar-link i {
  font-size: 1rem !important;
}

/* ── Film grain ───────────────────────────────────────────────────────────
   The POC's signature filmic texture (it ships a grain PNG; here we generate
   equivalent noise inline so the docs need no asset). Fixed, non-interactive,
   blended subtly over the whole canvas. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 120px 120px;
  mix-blend-mode: overlay;
  opacity: 0.045;
}
.dark body::after {
  opacity: 0.07;
}

/* ── Editorial page title ─────────────────────────────────────────────────
   Larger, lighter-weight serif H1 with a sliver of breathing room, echoing
   the site's Farnham display headings. */
#page-title {
  font-weight: 500;
  font-size: 2.6rem;
  line-height: 1.08;
}

/* Remove the section eyebrow / breadcrumb shown above the page title. */
.eyebrow {
  display: none !important;
}

/* ── Content polish (scoped to #content; uses stable HTML elements) ──────── */

/* Inline code: neutral muted chip (matches the platform's `bg-muted` surfaces),
   not a gold accent. */
#content :not(pre) > code {
  background-color: oklch(0.96 0.003 325.6);
  border: 1px solid oklch(0.922 0.005 325.62);
  border-radius: 5px;
  padding: 0.12em 0.36em;
  font-weight: 500;
}
.dark #content :not(pre) > code {
  background-color: oklch(0.263 0.024 320.12);
  border-color: oklch(1 0 0 / 0.1);
}

/* Tight list: collapse the inter-item spacing for a compact, inline-feeling
   bulleted list (used on the intro's "what's in an environment" breakdown). */
#content .tight-list ul,
#content .tight-list ol {
  margin-top: -1.1rem !important;
  margin-bottom: -1.1rem !important;
}
#content .tight-list li {
  margin-top: 0.25rem !important;
  margin-bottom: 0.25rem !important;
  line-height: 1.4 !important;
}
/* loose markdown lists wrap each item's text in a <p>; kill its margins too */
#content .tight-list li > p {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
/* inside a quotation, keep the list within the quote padding (no negative pull) */
#content blockquote.tight-list ol,
#content blockquote.tight-list ul {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Step list: standard line spacing (no tight pull), with a gentle top margin so
   it never overlaps a wrapping intro line above it (used in the split guide panes). */
#content .step-list ul,
#content .step-list ol {
  margin-top: 0.4rem !important;
  margin-bottom: 0.4rem !important;
}
#content .step-list li {
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
  line-height: 1.7 !important;
}
#content .step-list li > p {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
/* breathing room before a part-label that follows a step list (e.g. "2 · ...") */
#content .step-list + .part-label {
  margin-top: 1.6rem !important;
}

/* Blockquotes: gold left rule, like a pull-quote. */
#content blockquote {
  border-left: 2px solid #c0960c;
  padding-left: 1rem;
}

/* Tables + rules: hairline borders matching the site's #e5e5e5. */
#content hr {
  border-color: #e5e5e5;
}
#content table {
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}
/* separate borders drop the default row/header rules — add them back so the
   table reads as a grid, not floating text. `separate` also zeroes the cell
   padding, so restore horizontal/vertical breathing room (incl. the first
   column, which was sitting flush against the left border). */
#content th,
#content td {
  border-bottom: 1px solid #f0f0f0;
  padding: 0.625rem 1rem;
}
#content tbody tr:last-child td {
  border-bottom: none;
}
#content th {
  background-color: rgba(0, 0, 0, 0.03);
  border-bottom: 1px solid #e5e5e5;
  font-weight: 600;
}
.dark #content table {
  border-color: rgba(255, 255, 255, 0.1);
}
.dark #content th,
.dark #content td {
  border-bottom-color: rgba(255, 255, 255, 0.06);
}
.dark #content th {
  background-color: rgba(255, 255, 255, 0.04);
  border-bottom-color: rgba(255, 255, 255, 0.12);
}

/* ── Cards ────────────────────────────────────────────────────────────────
   Match the current platform/POC card (components/ui/card.tsx): a flat `bg-card`
   surface with a single hairline `border-border` and NO drop shadow. Gentle
   rounding (clean, not brutalist). The hover edge is the theme's amber primary.
   Values are the platform's exact oklch tokens. */
.card {
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 30%, #fafafa 72%, #f9f9f9 100%) !important;
  border: 1px solid #e5e5e5 !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.03) !important;
  transition: border-color 150ms ease;
}
.dark .card {
  background: oklch(0.212 0.019 322.12) !important;
  border-color: oklch(1 0 0 / 0.1) !important;
}

/* ── Code blocks ──────────────────────────────────────────────────────────
   Flat hairline container, no drop shadow — matching the platform's bordered
   editor surface. (Syntax colors stay dark via docs.json styling.codeblocks.) */
.code-block,
.code-group {
  border: 1px solid oklch(0.922 0.005 325.62) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}
.dark .code-block,
.dark .code-group {
  border-color: oklch(1 0 0 / 0.1) !important;
}

/* Accordions: flat hairline surface to match cards. */
.accordion {
  border: 1px solid oklch(0.922 0.005 325.62) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}
.dark .accordion {
  border-color: oklch(1 0 0 / 0.1) !important;
}

/* Callouts (Note/Warning/Tip): match the card radius + hairline language. */
.callout {
  border-radius: 12px !important;
}

/* Protocol loop diagram: tint only the Capabilities participant box a light
   blue (mermaid has no per-participant color; it tags each actor box with a
   `name` attribute, so target that one). */
#content .mermaid rect.actor[name="Caps"] {
  fill: #eaf3ff !important;
  stroke: #7aa9e0 !important;
}
/* Dark mode only: the Capabilities box (light blue) and the "agent works"
   highlight band (light gray) keep their light fills in dark mode, leaving
   mermaid's light text unreadable on them. Darken just those two so the text
   reads — light-mode visuals are untouched. */
.dark #content .mermaid rect.actor[name="Caps"] {
  fill: #15314f !important;
  stroke: #5a8fd0 !important;
}
.dark #content .mermaid rect.rect,
.dark #content .mermaid rect[fill="rgb(238,238,238)"] {
  fill: #2b2b30 !important;
}

/* Flowchart edge labels (capabilities / humans measure / agent improves):
   mermaid's default label box is white, which shows as a box on the #fafafa
   page. Match it to the page background instead — no visible box, but the box
   still masks the connector line so it never strikes through the text. Page bg
   per docs.json: #fafafa light, #17151b dark. */
#content .mermaid .edgeLabel,
#content .mermaid .edgeLabel p,
#content .mermaid .edgeLabel span,
#content .mermaid .edgeLabel foreignObject div {
  background: #fafafa !important;
  background-color: #fafafa !important;
}
#content .mermaid .edgeLabel rect {
  fill: #fafafa !important;
}
.dark #content .mermaid .edgeLabel,
.dark #content .mermaid .edgeLabel p,
.dark #content .mermaid .edgeLabel span,
.dark #content .mermaid .edgeLabel foreignObject div {
  background: #17151b !important;
  background-color: #17151b !important;
}
.dark #content .mermaid .edgeLabel rect {
  fill: #17151b !important;
}
/* Center subgraph (cluster) titles. */
#content .mermaid .cluster-label,
#content .mermaid .cluster-label p,
#content .mermaid .cluster-label div {
  text-align: center !important;
  width: 100% !important;
}

/* ── "Core Principles" boxes ──────────────────────────────────────────────
   Custom JSX divs sit outside Mintlify's prose scope, so the bold lead-in
   doesn't inherit prose colors (it went near-black on dark). Theme the
   surface + text explicitly for both modes. */
.principles {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.principle {
  background: #f7f7f8;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  padding: 16px 20px;
  color: #262626;
}
.principle strong {
  color: #0a0a0a;
}
.dark .principle {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
  color: #d4d4d8;
}
.dark .principle strong {
  color: #fafafa;
}

/* ── Wider reading column on landscape/large screens ──────────────────────
   Mintlify caps the prose measure fairly narrow; give it a bit more room once
   there's space (≥1024px). Kept to ~76rem so long-form text stays readable
   rather than going full-bleed. Per-page `mode: "wide"` still works on top. */
@media (min-width: 1024px) {
  #content-area,
  #content-container {
    max-width: 100% !important;
  }
  #content {
    max-width: 76rem !important;
    margin-inline: auto;
  }
}

/* ── Agent-only note ───────────────────────────────────────────────────────
   Guidance aimed at AI agents reading the page, not humans. Fully invisible
   and collapsed in layout, but the text stays in the DOM for an agent that
   ingests the page. `.agent-signal` is the same pattern for the steering line. */
.agent-note,
.agent-note * {
  color: transparent !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  opacity: 0 !important;
  text-decoration: none !important;
}
.agent-note {
  height: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
  pointer-events: none;
  font-size: 0;
  line-height: 0;
}
.agent-signal {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Collapsible sidebar sections ("toggle masquerading as a heading") ──────
   Mintlify makes a section collapsible by nesting a group inside it, but it
   renders that nested group as a <button> styled like a plain page link.
   Restyle the toggle so it reads as a section heading (matching the always-open
   "Start here" / "Guides" / "Reference" / "More" headings), keeping its chevron
   as the expand/collapse affordance. The redundant outer wrapper heading is
   hidden. This keys off the nested-group structure (`li[data-group-tag]`), so it
   applies to exactly whichever sections are authored as nested groups in
   docs.json — currently Advanced and Cookbooks. */
li[data-group-tag] > button[aria-expanded] {
  font-size: 0.75rem !important;   /* text-xs */
  line-height: 1rem !important;
  font-weight: 600 !important;     /* font-semibold */
  color: #111827 !important;       /* gray-900 */
}
.dark li[data-group-tag] > button[aria-expanded] {
  color: #e5e7eb !important;       /* gray-200 */
}
/* the section's pages sit one nesting level deeper than other sections — pull
   them back to the standard page-link indent so they line up identically. */
li[data-group-tag] ul a {
  padding-left: 1rem !important;
}
/* hide the redundant outer section heading that wraps a collapsible toggle */
div:has(> ul.sidebar-group > li[data-group-tag]) > .sidebar-group-header {
  display: none !important;
}

/* ── Mermaid diagrams: fix clipped labels at the source ─────────────────────
   Mermaid measures each node's width with its own font (trebuchet) but the
   page otherwise renders the labels in the wider HUD brand font (Inter), so
   the boxes come out too narrow and the last letters get clipped. Instead of
   patching the overflow, render the labels in the SAME font mermaid measures
   with — then every box is sized correctly and nothing overflows. */
#content .mermaid,
#content .mermaid .nodeLabel,
#content .mermaid .edgeLabel,
#content .mermaid .cluster-label,
#content .mermaid span,
#content .mermaid p,
#content .mermaid div,
#content .mermaid text {
  font-family: "trebuchet ms", verdana, arial, sans-serif !important;
}
/* Overview step pills stay on one line (non-breaking spaces). Any tiny
   measure-vs-render slack on the longest pill ("Declare your environment")
   would clip the last letters — let the label spill into the pill's internal
   padding instead of being cut at the box edge. */
#content .mermaid .node.clickable .nodeLabel,
#content .mermaid .node.clickable foreignObject,
#content .mermaid .node.clickable foreignObject > div {
  overflow: visible !important;
  white-space: nowrap !important;
}
/* Nodes with a mermaid `click` link: a subtle, minimalist hover cue — a slight
   scale-up from the node's own center, nothing imposing. */
#content .mermaid .node.clickable {
  cursor: pointer;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 120ms ease;
}
#content .mermaid .node.clickable:hover {
  transform: scale(1.05);
}

/* ── Two-column guide layout (textbook margin) ─────────────────────────────
   A per-step row: the explanation on the left stays the center of attention,
   with a quiet margin on the right for supporting code, tables, diagrams, and
   notes. The split engages at ≥1024px (matching the wide reading column) and
   stacks into a single column below that, so each visual drops under the text it
   belongs to. The text column is intentionally narrower than the visual column
   (4:6) so code and diagrams get room to breathe. */
@media (min-width: 1024px) {
  #content .guide-row {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
    gap: 2.75rem;
    align-items: start;
    margin: 1.5rem 0;
  }
  #content .guide-aside {
    border-left: 1px solid #e5e5e5;
    padding-left: 1.5rem;
    font-size: 0.9em;
  }
  .dark #content .guide-aside {
    border-left-color: rgba(255, 255, 255, 0.1);
  }
}
/* Small uppercase caption above a margin visual. */
#content .aside-label {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.7rem;
  font-weight: 600;
  color: #8a8a8a;
  margin-bottom: 0.5rem;
}
/* Margin tables/code shrink to fit the narrow column without forcing a scrollbar. */
#content .guide-aside table {
  width: 100%;
  font-size: 0.8em;
}
#content .guide-aside th,
#content .guide-aside td {
  padding: 0.4rem 0.6rem;
}

/* ── File tree ──────────────────────────────────────────────────────────────
   A clean directory listing (à la a file explorer): a bordered, rounded box
   matching the card/code-block hairline language, with monospace entries, quiet
   connector glyphs, and muted inline notes aligned in their own column. Each
   row is a 2-column grid (name | note) so every note lines up regardless of
   filename length. */
#content .filetree {
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  background: #fafafa;
  padding: 1rem 1.25rem;
  margin: 1.25rem 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Cascadia Code", monospace;
  font-size: 0.85rem;
  line-height: 1.85;
}
.dark #content .filetree {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
}
#content .filetree .ft-root {
  font-weight: 600;
  color: var(--tw-prose-headings);
  margin-bottom: 0.15rem;
}
#content .filetree .ft-row {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.5rem 1.5rem;
  align-items: baseline;
}
#content .filetree .ft-branch {
  color: #c0c0c0;
}
.dark #content .filetree .ft-branch {
  color: #5a5a5a;
}
#content .filetree .ft-name {
  color: var(--tw-prose-headings);
  font-weight: 500;
}
#content .filetree .ft-note {
  color: #8a8a8a;
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.92em;
}
