/* ==========================================================================
   Hermes Brain docs theme
   Palettes (from the template repo's website/styles.css):
     - Tokyo Night (default): violet + sky-blue neon on deep navy
     - Nemoclaw:              ember orange + amber on warm charcoal
   Modes: dark (default) and light. Palette switch: bottom-right button.
   ========================================================================== */

/* ---------- Palette tokens ---------- */
html, html[data-palette="tokyo"] {
  --hb-a1: #7c3aed;        --hb-a1-l: #a78bfa;   --hb-a1-rgb: 124, 58, 237;
  --hb-a2: #38bdf8;        --hb-a2-l: #7dd3fc;   --hb-a2-rgb: 56, 189, 248;
  --hb-ok: #10b981;  --hb-warn: #f59e0b;  --hb-err: #f43f5e;
}
html[data-palette="nemoclaw"] {   /* NVIDIA NemoClaw: signature green on black */
  --hb-a1: #76b900;        --hb-a1-l: #9bd91a;   --hb-a1-rgb: 118, 185, 0;
  --hb-a2: #bff230;        --hb-a2-l: #d4f96b;   --hb-a2-rgb: 191, 242, 48;
  --hb-ok: #76b900;  --hb-warn: #fbbf24;  --hb-err: #f43f5e;
}

/* ---------- Surface tokens ---------- */
[data-dark-mode] {
  --hb-bg: #0a0d14; --hb-bg2: #0f1422; --hb-card: #151b2d; --hb-card2: #1c243c;
  --hb-glass: rgba(21, 27, 45, .72);
  --hb-border: rgba(255, 255, 255, .08); --hb-border-strong: rgba(255, 255, 255, .14);
  --hb-text: #f1f5f9; --hb-body: #cbd5e1; --hb-muted: #94a3b8;
  --hb-code: #0b0f19; --hb-code-border: #1e293b;
  --hb-link: var(--hb-a2); --hb-link-h: var(--hb-a2-l); --hb-accent-text: var(--hb-a1-l);
  color-scheme: dark;
}
[data-dark-mode][data-palette="nemoclaw"] {
  --hb-bg: #050505; --hb-bg2: #0e0e0e; --hb-card: #161616; --hb-card2: #212121;
  --hb-glass: rgba(22, 22, 22, .78);
  --hb-border: rgba(255, 255, 255, .09); --hb-border-strong: rgba(118, 185, 0, .35);
  --hb-text: #ffffff; --hb-body: #d4d4d4; --hb-muted: #a3a3a3;
  --hb-code: #0a0a0a; --hb-code-border: #262626;
  --hb-link: #9bd91a; --hb-link-h: #bff230;
}
html:not([data-dark-mode]) {
  --hb-bg: #f8fafc; --hb-bg2: #ffffff; --hb-card: #ffffff; --hb-card2: #f1f5f9;
  --hb-glass: rgba(255, 255, 255, .85);
  --hb-border: rgba(15, 23, 42, .09); --hb-border-strong: rgba(15, 23, 42, .16);
  --hb-text: #0f172a; --hb-body: #334155; --hb-muted: #64748b;
  --hb-code: #f1f5f9; --hb-code-border: #e2e8f0;
  --hb-link: #6d28d9; --hb-link-h: #5b21b6; --hb-accent-text: #6d28d9;
}
html[data-palette="nemoclaw"]:not([data-dark-mode]) {
  --hb-link: #4d7c0f; --hb-link-h: #3f6212; --hb-accent-text: #4d7c0f;
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }
body, .page-wrapper, .page-content { background: var(--hb-bg) !important; color: var(--hb-body); }
[data-dark-mode] body {
  background-image:
    radial-gradient(60rem 30rem at 88% -8%, rgba(var(--hb-a1-rgb), .16), transparent 60%),
    radial-gradient(50rem 28rem at -8% 6%, rgba(var(--hb-a2-rgb), .10), transparent 60%) !important;
  background-attachment: fixed !important;
}
h1, h2, h3, h4, h5, h6, .title, .content-title { color: var(--hb-text) !important; letter-spacing: -.01em; }
p, li, td, th, .lead { color: var(--hb-body); }
.text-muted, small, .para-desc { color: var(--hb-muted) !important; }
a { color: var(--hb-link); text-decoration-color: rgba(var(--hb-a2-rgb), .4); text-underline-offset: 3px; }
a:hover { color: var(--hb-link-h); }
.text-primary { color: var(--hb-accent-text) !important; }
hr { border-color: var(--hb-border); opacity: 1; }
::selection { background: rgba(var(--hb-a1-rgb), .4); color: #fff; }
:focus-visible { outline: 2px solid var(--hb-a2); outline-offset: 2px; border-radius: 4px; }
img { border-radius: 10px; }
.logo-icon img, .logo img, svg { border-radius: 0; }

/* Content headings: neon underline accent on H2, subtle divider */
.docs-content h2 {
  margin-top: 2.2rem; padding-bottom: .45rem; position: relative;
  border-bottom: 1px solid var(--hb-border);
}
.docs-content h2::after {
  content: ""; position: absolute; left: 0; bottom: -1px; width: 64px; height: 2px;
  background: linear-gradient(90deg, var(--hb-a1), var(--hb-a2)); border-radius: 2px;
}
.docs-content h3 { color: var(--hb-accent-text) !important; margin-top: 1.6rem; }
.docs-content .content-title { background: none; }
.docs-content strong { color: var(--hb-text); }
.docs-content li::marker { color: var(--hb-a1-l); }

/* ---------- Top bars ---------- */
.top-header, .header-bar, #topnav, #topnav.nav-sticky, .navbar {
  background: color-mix(in srgb, var(--hb-bg) 82%, transparent) !important;
  backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--hb-border) !important; box-shadow: none !important;
}
#topnav .navigation-menu > li > a, .top-header a { color: var(--hb-text) !important; }
#topnav .navigation-menu > li > a:hover, #topnav .navigation-menu > li.active > a { color: var(--hb-a2-l) !important; }
#topnav .logo svg, .logo-icon svg, .sidebar-wrapper svg.logo { max-height: 32px; width: auto; }

/* ---------- Sidebar ---------- */
.sidebar-wrapper, #sidebar, .sidebar-wrapper .sidebar-content {
  background: var(--hb-bg2) !important; border-right: 1px solid var(--hb-border) !important;
}
.sidebar-wrapper a, .sidebar-menu a { color: var(--hb-body) !important; transition: color .15s, background .15s; }
.sidebar-menu li a:hover { color: var(--hb-a2-l) !important; }
.sidebar-menu .menu-icon, .sidebar-menu .sidebar-dropdown > a .menu-icon {
  background: rgba(var(--hb-a1-rgb), .16) !important; color: var(--hb-a1-l) !important;
  border-radius: 10px;
}
.sidebar-menu .current > a, .sidebar-menu a.current, .sidebar-submenu li a.current {
  color: var(--hb-a1-l) !important; font-weight: 600;
}
.sidebar-submenu li a.current {
  background: linear-gradient(90deg, rgba(var(--hb-a1-rgb), .18), transparent) !important;
  border-right: 2px solid var(--hb-a1) !important;
}
.sidebar-footer { background: var(--hb-bg2) !important; border-color: var(--hb-border) !important; }

/* ---------- Breadcrumb / TOC / pager ---------- */
.breadcrumb, .breadcrumb-item, .breadcrumb-item a { color: var(--hb-muted) !important; }
.docs-toc a { color: var(--hb-muted) !important; border-left: 2px solid transparent; transition: color .15s, border-color .15s; }
.docs-toc a:hover, .docs-toc a.active { color: var(--hb-a2-l) !important; border-left-color: var(--hb-a2); }
.docs-toc .fw-bold, .docs-toc .text-uppercase { color: var(--hb-text) !important; }

/* ---------- Cards (glass) ---------- */
.card, .features {
  background: var(--hb-glass) !important; border: 1px solid var(--hb-border) !important;
  border-radius: 16px !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .45) !important;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.card:hover, .features:hover {
  border-color: rgba(var(--hb-a1-rgb), .55) !important;
  box-shadow: 0 0 0 1px rgba(var(--hb-a1-rgb), .25), 0 12px 40px -10px rgba(var(--hb-a1-rgb), .45) !important;
  transform: translateY(-3px);
}
.features { padding: 1.4rem !important; height: 100%; align-items: flex-start; }
.features .icon {
  width: 46px; height: 46px; flex: 0 0 46px; display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(var(--hb-a1-rgb), .28), rgba(var(--hb-a2-rgb), .18)) !important;
  border: 1px solid rgba(var(--hb-a1-rgb), .35); color: var(--hb-a2-l) !important; border-radius: 12px !important;
}
.features .icon .material-icons { color: inherit !important; }
.features h6, .features .title { color: var(--hb-text) !important; }
.features p { color: var(--hb-muted) !important; }
.features a { color: var(--hb-a2-l) !important; }

/* ---------- Buttons / badges ---------- */
.btn-primary, .btn-landing.btn-primary {
  background: linear-gradient(135deg, var(--hb-a1), color-mix(in srgb, var(--hb-a1) 60%, #000)) !important;
  border: 1px solid rgba(255, 255, 255, .18) !important; color: #fff !important;
  box-shadow: 0 8px 26px -6px rgba(var(--hb-a1-rgb), .6); transition: box-shadow .2s, filter .2s, transform .2s;
}
.btn-primary:hover { box-shadow: 0 10px 38px -4px rgba(var(--hb-a1-rgb), .8); filter: brightness(1.12); transform: translateY(-1px); }
.btn-outline-primary {
  color: var(--hb-a2-l) !important; border-color: rgba(var(--hb-a2-rgb), .5) !important; background: transparent !important;
}
.btn-outline-primary:hover { background: rgba(var(--hb-a2-rgb), .14) !important; box-shadow: 0 0 24px rgba(var(--hb-a2-rgb), .3); }
.bg-soft-primary { background: rgba(var(--hb-a1-rgb), .2) !important; color: var(--hb-a1-l) !important; border: 1px solid rgba(var(--hb-a1-rgb), .35); }
.btn-soft, .btn-default, .btn-secondary { background: var(--hb-card) !important; color: var(--hb-body) !important; border: 1px solid var(--hb-border) !important; }
.btn-soft:hover, .btn-default:hover, .btn-secondary:hover { border-color: rgba(var(--hb-a1-rgb), .5) !important; color: var(--hb-text) !important; }

/* ---------- Landing hero ---------- */
#hero {
  display: block !important; height: auto !important; padding: 6.5rem 0 4rem !important;
  background-color: var(--hb-bg) !important;
}
[data-dark-mode] #hero {
  background-image:
    radial-gradient(42rem 24rem at 82% 22%, rgba(var(--hb-a1-rgb), .32), transparent 65%),
    radial-gradient(36rem 22rem at 8% 85%, rgba(var(--hb-a2-rgb), .18), transparent 65%) !important;
}
html:not([data-dark-mode]) #hero {
  background-image:
    radial-gradient(42rem 24rem at 82% 22%, rgba(var(--hb-a1-rgb), .16), transparent 65%),
    radial-gradient(36rem 22rem at 8% 85%, rgba(var(--hb-a2-rgb), .14), transparent 65%) !important;
}
#hero .heading, #hero h4.heading {
  font-size: clamp(2.4rem, 5vw, 3.6rem) !important; font-weight: 800; line-height: 1.08;
  background: linear-gradient(90deg, var(--hb-a1-l), var(--hb-a2));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent !important;
}
#hero .para-desc { color: var(--hb-body) !important; font-size: 1.1rem; max-width: 34rem; }
#hero .classic-hero-image img {
  width: 100% !important; max-width: 100% !important; height: auto !important; margin: 0 !important;
  border: 1px solid var(--hb-border-strong); border-radius: 16px !important;
  box-shadow: 0 0 0 1px rgba(var(--hb-a1-rgb), .2), 0 30px 80px -20px rgba(var(--hb-a1-rgb), .55) !important;
}
#hero .ms-lg-4 { margin-left: 0 !important; }
#featureGrid { background: transparent !important; padding-bottom: 3rem; }
#featureGrid .section-title .title { font-size: 2rem; }

/* ---------- Code ---------- */
pre, .highlight pre {
  background: var(--hb-code) !important; border: 1px solid var(--hb-code-border); border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
}
:not(pre) > code {
  background: rgba(var(--hb-a1-rgb), .14) !important; color: var(--hb-a1-l) !important;
  border: 1px solid rgba(var(--hb-a1-rgb), .22); border-radius: 6px; padding: .1em .38em; font-size: .88em;
}
html:not([data-dark-mode]) :not(pre) > code { color: #5b21b6 !important; }

/* ---------- Tables ---------- */
.docs-content table { border-collapse: separate; border-spacing: 0; width: 100%; border: 1px solid var(--hb-border); border-radius: 12px; overflow: hidden; }
th { background: var(--hb-card) !important; color: var(--hb-text) !important; border-color: var(--hb-border) !important; font-weight: 600; }
td { border-color: var(--hb-border) !important; }
tbody tr:nth-child(even) td { background: rgba(var(--hb-a1-rgb), .035); }
tbody tr:hover td { background: rgba(var(--hb-a1-rgb), .09); }

/* ---------- Alerts / quotes ---------- */
.alert { border: 1px solid var(--hb-border) !important; background: var(--hb-glass) !important; color: var(--hb-body) !important; border-radius: 12px; border-left-width: 4px !important; }
.alert-info    { border-left-color: var(--hb-a2) !important; }
.alert-success { border-left-color: var(--hb-ok) !important; }
.alert-warning { border-left-color: var(--hb-warn) !important; }
.alert-danger  { border-left-color: var(--hb-err) !important; }
blockquote { border-left: 3px solid var(--hb-a1) !important; background: rgba(var(--hb-a1-rgb), .06); border-radius: 0 10px 10px 0; padding: .6rem 1rem; color: var(--hb-muted); }

/* ---------- Search / dropdown ---------- */
.flexsearch input, input[type="search"] { background: var(--hb-card) !important; color: var(--hb-text) !important; border: 1px solid var(--hb-border) !important; border-radius: 10px; }
.flexsearch-button-placeholder, .flexsearch-button-placeholder * { color: var(--hb-muted) !important; }
.dropdown-menu { background: var(--hb-card) !important; border: 1px solid var(--hb-border) !important; border-radius: 12px; }
.dropdown-item { color: var(--hb-body) !important; }
.dropdown-item:hover { background: rgba(var(--hb-a1-rgb), .14) !important; }

/* ---------- Footer ---------- */
.footer, footer { background: var(--hb-bg2) !important; border-top: 1px solid var(--hb-border); color: var(--hb-muted) !important; }
.footer a, footer a { color: var(--hb-a2-l) !important; }
.back-to-top { background: linear-gradient(135deg, var(--hb-a1), var(--hb-a2)) !important; color: #fff !important; border: 0 !important; box-shadow: 0 8px 24px -6px rgba(var(--hb-a1-rgb), .6); }

/* ---------- Scrollbars ---------- */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--hb-a1) 45%, transparent) transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--hb-a1) 40%, transparent); border-radius: 9px; }
::-webkit-scrollbar-thumb:hover { background: var(--hb-a1); }

/* ---------- Palette switch button ---------- */
#hb-palette-btn {
  position: fixed; right: 18px; bottom: 18px; z-index: 1050; display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .9rem; font: 600 .78rem/1 Inter, system-ui, sans-serif; letter-spacing: .02em;
  color: var(--hb-text); background: var(--hb-glass); border: 1px solid var(--hb-border-strong); border-radius: 999px;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); cursor: pointer;
  box-shadow: 0 8px 28px -8px rgba(0, 0, 0, .5); transition: border-color .2s, box-shadow .2s, transform .2s;
}
#hb-palette-btn:hover { border-color: var(--hb-a1); box-shadow: 0 0 24px rgba(var(--hb-a1-rgb), .45); transform: translateY(-1px); }
#hb-palette-btn .hb-dot { width: 12px; height: 12px; border-radius: 50%; background: linear-gradient(135deg, var(--hb-a1), var(--hb-a2)); box-shadow: 0 0 10px rgba(var(--hb-a1-rgb), .8); }
@media (max-width: 600px) { #hb-palette-btn .hb-label { display: none; } #hb-palette-btn { bottom: 14px; right: 14px; padding: .55rem; } }
@media print { #hb-palette-btn { display: none; } }

/* ---------- Refinements (higher specificity to beat theme defaults) ---------- */
html body .text-muted, html body small, html body .para-desc, html body .section-title p { color: var(--hb-muted) !important; }
html body #hero .para-desc { color: var(--hb-body) !important; }
html body #hero .text-muted { color: var(--hb-muted) !important; }
html body .badge.bg-soft-primary { color: var(--hb-a1-l) !important; background: rgba(var(--hb-a1-rgb), .2) !important; letter-spacing: .04em; text-transform: uppercase; font-size: .7rem; padding: .4rem .7rem; border-radius: 999px; }
html:not([data-dark-mode]) body .badge.bg-soft-primary { color: #5b21b6 !important; }
html body #featureGrid .col-md-4 { margin-bottom: 1.5rem; }
html body #featureGrid .features { margin-bottom: 0; }
/* keep hero glows away from the section edge so there is no hard line */
[data-dark-mode] #hero {
  background-image:
    radial-gradient(42rem 22rem at 82% 30%, rgba(var(--hb-a1-rgb), .30), transparent 65%),
    radial-gradient(34rem 18rem at 10% 45%, rgba(var(--hb-a2-rgb), .16), transparent 65%) !important;
}

/* Sidebar active states follow the palette */
html body .sidebar-menu .sidebar-dropdown.current > a,
html body .sidebar-menu .sidebar-dropdown.current > a .menu-icon,
html body .sidebar-menu .sidebar-dropdown > a.active { color: var(--hb-a1-l) !important; }
html body .sidebar-submenu li a.current,
html body .sidebar-submenu li.current > a { color: var(--hb-a1-l) !important; border-right: 2px solid var(--hb-a1) !important; background: linear-gradient(90deg, rgba(var(--hb-a1-rgb), .18), transparent) !important; }

/* ==========================================================================
   Landing sections
   ========================================================================== */
.hb-section { padding: 4.5rem 0 1rem; }
.hb-narrow { max-width: 820px; }
.hb-head { text-align: center; max-width: 720px; margin: 0 auto 2.4rem; }
.hb-eyebrow { display: inline-block; font: 700 .72rem/1 Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--hb-a2-l); margin-bottom: .8rem; }
.hb-h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); font-weight: 800; margin: 0 0 .7rem; }
.hb-sub { color: var(--hb-muted) !important; font-size: 1.05rem; margin: 0 auto; }
.hb-cta-row { text-align: center; margin-top: 1.8rem; }
.hb-link { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; color: var(--hb-a2-l) !important; text-decoration: none; }
.hb-link .material-icons { font-size: 1.1rem; transition: transform .2s; }
.hb-link:hover .material-icons { transform: translateX(4px); }
.hb-dots { display: inline-flex; gap: 6px; margin-right: .6rem; }
.hb-dots i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; } .hb-dots i:nth-child(2) { background: #febc2e; } .hb-dots i:nth-child(3) { background: #28c840; }

/* Stats strip */
.hb-stats { padding: 0 0 .5rem; margin-top: -1rem; }
.hb-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--hb-border); border-radius: 18px; background: var(--hb-glass); backdrop-filter: blur(10px); overflow: hidden; }
.hb-stat { padding: 1.4rem 1rem; text-align: center; border-right: 1px solid var(--hb-border); }
.hb-stat:last-child { border-right: 0; }
.hb-stat-v { font-size: 2.4rem; font-weight: 800; line-height: 1; background: linear-gradient(90deg, var(--hb-a1-l), var(--hb-a2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hb-stat-l { font-weight: 600; color: var(--hb-text); margin-top: .4rem; }
.hb-stat-n { font-size: .82rem; color: var(--hb-muted); }
@media (max-width: 767px) { .hb-stats-grid { grid-template-columns: repeat(2, 1fr); } .hb-stat:nth-child(2) { border-right: 0; } .hb-stat:nth-child(-n+2) { border-bottom: 1px solid var(--hb-border); } }

/* Pipeline */
.hb-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; position: relative; counter-reset: s; }
.hb-step { position: relative; padding: 1.4rem; background: var(--hb-glass); border: 1px solid var(--hb-border); border-radius: 16px; transition: .25s; }
.hb-step:hover { border-color: rgba(var(--hb-a1-rgb), .55); box-shadow: 0 14px 40px -14px rgba(var(--hb-a1-rgb), .5); transform: translateY(-3px); }
.hb-step:not(:last-child)::after { content: "\e5c8"; font-family: "Material Icons"; position: absolute; right: -1.05rem; top: 2.2rem; z-index: 2; color: var(--hb-a2); font-size: 1.4rem; }
.hb-step-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: .9rem; }
.hb-step-ico { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; color: var(--hb-a2-l); background: linear-gradient(135deg, rgba(var(--hb-a1-rgb), .3), rgba(var(--hb-a2-rgb), .18)); border: 1px solid rgba(var(--hb-a1-rgb), .35); }
.hb-step-n { font: 800 1.6rem/1 Inter, sans-serif; color: rgba(255,255,255,.07); }
html:not([data-dark-mode]) .hb-step-n { color: rgba(15,23,42,.1); }
.hb-step h3 { font-size: 1.15rem; margin-bottom: .4rem; }
.hb-step p { font-size: .92rem; color: var(--hb-muted) !important; min-height: 5.6em; }
.hb-step code { font-size: .74rem; word-break: break-all; }
@media (max-width: 991px) { .hb-steps { grid-template-columns: repeat(2, 1fr); } .hb-step::after { display: none; } }
@media (max-width: 575px) { .hb-steps { grid-template-columns: 1fr; } }

/* Install terminal */
.hb-term { max-width: 860px; margin: 0 auto; border: 1px solid var(--hb-border-strong); border-radius: 16px; overflow: hidden; background: var(--hb-code); box-shadow: 0 30px 70px -30px rgba(var(--hb-a1-rgb), .5); }
.hb-term-bar { display: flex; align-items: center; gap: .25rem; padding: .7rem .9rem; background: var(--hb-card); border-bottom: 1px solid var(--hb-border); overflow-x: auto; }
.hb-tab { background: transparent; border: 0; color: var(--hb-muted); font: 600 .82rem Inter, sans-serif; padding: .4rem .8rem; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.hb-tab:hover { color: var(--hb-text); }
.hb-tab.is-active { color: var(--hb-text); background: rgba(var(--hb-a1-rgb), .25); box-shadow: inset 0 0 0 1px rgba(var(--hb-a1-rgb), .45); }
.hb-term-body { display: none; position: relative; padding: 1.3rem 5.5rem 1.3rem 1.2rem; font-family: "Fira Code", ui-monospace, monospace; font-size: .86rem; }
.hb-term-body.is-active { display: block; }
.hb-term-body code { background: none !important; border: 0 !important; color: #e2e8f0 !important; padding: 0; word-break: break-all; font-size: inherit; }
.hb-prompt { color: var(--hb-a2); margin-right: .6rem; user-select: none; }
.hb-copy { position: absolute; right: .8rem; top: .8rem; display: inline-flex; align-items: center; gap: .3rem; background: var(--hb-card); color: var(--hb-body); border: 1px solid var(--hb-border-strong); border-radius: 8px; padding: .35rem .6rem; font: 600 .75rem Inter, sans-serif; cursor: pointer; }
.hb-copy .material-icons { font-size: 1rem; } .hb-copy:hover { border-color: var(--hb-a1); color: var(--hb-text); }
.hb-chips { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-top: 1.4rem; }
.hb-chip { padding: .4rem .9rem; border: 1px solid var(--hb-border-strong); border-radius: 999px; font-size: .85rem; font-weight: 600; text-decoration: none; color: var(--hb-body) !important; transition: .2s; }
.hb-chip:hover { border-color: var(--hb-a2); color: var(--hb-a2-l) !important; box-shadow: 0 0 20px rgba(var(--hb-a2-rgb), .25); }

/* Vault explorer */
.hb-vault { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }
.hb-folder { padding: 1.2rem; background: var(--hb-glass); border: 1px solid var(--hb-border); border-top: 3px solid var(--fc); border-radius: 14px; transition: .25s; }
.hb-folder:hover { transform: translateY(-3px); box-shadow: 0 14px 36px -14px var(--fc); border-color: var(--fc); }
.hb-folder > .material-icons { color: var(--fc); font-size: 1.9rem; display: block; margin-bottom: .5rem; }
.hb-folder code { display: inline-block; background: color-mix(in srgb, var(--fc) 16%, transparent) !important; color: var(--fc) !important; border-color: color-mix(in srgb, var(--fc) 35%, transparent) !important; margin-bottom: .6rem; }
.hb-folder p { font-size: .88rem; color: var(--hb-muted) !important; margin: 0; }
@media (max-width: 1100px) { .hb-vault { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 640px) { .hb-vault { grid-template-columns: 1fr 1fr; } }

/* MCP */
.hb-mcp { display: grid; grid-template-columns: 1fr 1.1fr; gap: 1.4rem; align-items: stretch; }
.hb-tools { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.hb-tools li { display: flex; flex-direction: column; gap: .15rem; padding: .8rem 1rem; background: var(--hb-glass); border: 1px solid var(--hb-border); border-left: 3px solid var(--hb-a1); border-radius: 10px; }
.hb-tools span { font-size: .88rem; color: var(--hb-muted); }
.hb-code { border: 1px solid var(--hb-border-strong); border-radius: 14px; overflow: hidden; background: var(--hb-code); display: flex; flex-direction: column; }
.hb-code-bar { display: flex; align-items: center; padding: .65rem .9rem; background: var(--hb-card); color: var(--hb-muted); font: 600 .78rem "Fira Code", monospace; border-bottom: 1px solid var(--hb-border); }
.hb-code pre { margin: 0; border: 0 !important; border-radius: 0 !important; flex: 1; font-size: .85rem; }
@media (max-width: 900px) { .hb-mcp { grid-template-columns: 1fr; } }

/* Compare */
.hb-table-wrap { max-width: 860px; margin: 0 auto; overflow-x: auto; border: 1px solid var(--hb-border); border-radius: 16px; background: var(--hb-glass); }
.hb-compare { width: 100%; border: 0 !important; border-radius: 0 !important; margin: 0; }
.hb-compare th, .hb-compare td { padding: .9rem 1rem; text-align: center; border-bottom: 1px solid var(--hb-border) !important; background: transparent !important; }
.hb-compare thead th { color: var(--hb-text) !important; font-size: .85rem; }
.hb-compare tbody th { text-align: left; font-weight: 500; color: var(--hb-body) !important; }
.hb-compare tr:last-child th, .hb-compare tr:last-child td { border-bottom: 0 !important; }
.hb-compare .is-us { background: rgba(var(--hb-a1-rgb), .12) !important; }
.hb-compare thead .is-us { color: var(--hb-a1-l) !important; }
.hb-yes { color: var(--hb-ok); } .hb-no { color: var(--hb-err); opacity: .75; } .hb-maybe { color: var(--hb-warn); }

/* FAQ */
.hb-faq { display: grid; gap: .7rem; }
.hb-faq details { background: var(--hb-glass); border: 1px solid var(--hb-border); border-radius: 12px; padding: 0 1.1rem; transition: border-color .2s; }
.hb-faq details[open] { border-color: rgba(var(--hb-a1-rgb), .5); }
.hb-faq summary { cursor: pointer; padding: 1rem 0; font-weight: 600; color: var(--hb-text); list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.hb-faq summary::-webkit-details-marker { display: none; }
.hb-faq summary::after { content: "+"; color: var(--hb-a2); font-size: 1.3rem; line-height: 1; }
.hb-faq details[open] summary::after { content: "\2212"; }
.hb-faq p { padding-bottom: 1rem; margin: 0; color: var(--hb-muted) !important; }

/* Final CTA */
.hb-final { text-align: center; padding: 3.5rem 1.5rem; border-radius: 24px; border: 1px solid rgba(var(--hb-a1-rgb), .4);
  background: radial-gradient(40rem 16rem at 50% 0%, rgba(var(--hb-a1-rgb), .28), transparent 70%), var(--hb-glass);
  box-shadow: 0 30px 80px -30px rgba(var(--hb-a1-rgb), .55); margin-bottom: 3rem; }
.hb-final-btns { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; margin-top: 1.6rem; }

/* ==========================================================================
   Documentation pages redesign
   ========================================================================== */
.docs-content { font-size: 1.02rem; line-height: 1.78; max-width: 52rem; }
.docs-content .content-title { font-size: clamp(2rem, 3.4vw, 2.7rem); font-weight: 800; letter-spacing: -.02em; }
.docs-content .lead, .docs-content > p.lead { font-size: 1.15rem; color: var(--hb-muted) !important; }
.docs-content .title-icon, .docs-content .content-title .material-icons {
  background: linear-gradient(135deg, rgba(var(--hb-a1-rgb), .3), rgba(var(--hb-a2-rgb), .2)) !important;
  border: 1px solid rgba(var(--hb-a1-rgb), .4); color: var(--hb-a2-l) !important; border-radius: 12px;
}
.hb-meta { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.4rem; }
.hb-pill { display: inline-flex; align-items: center; gap: .3rem; padding: .28rem .7rem; font: 600 .74rem Inter, sans-serif; color: var(--hb-muted) !important; background: var(--hb-glass); border: 1px solid var(--hb-border); border-radius: 999px; text-decoration: none; }
.hb-pill .material-icons { font-size: .95rem; }
.hb-pill-sec { color: var(--hb-a1-l) !important; border-color: rgba(var(--hb-a1-rgb), .4); background: rgba(var(--hb-a1-rgb), .12); }
a.hb-pill-sec:hover { box-shadow: 0 0 18px rgba(var(--hb-a1-rgb), .35); }

.docs-content h2 { font-size: 1.65rem; }
.docs-content h3 { font-size: 1.25rem; }
.docs-content a:not(.btn):not(.hb-pill) { font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; }
.docs-content ul, .docs-content ol { padding-left: 1.3rem; }
.docs-content li { margin: .25rem 0; }
.docs-content img { border: 1px solid var(--hb-border); box-shadow: 0 18px 50px -24px rgba(var(--hb-a1-rgb), .5); max-width: 100%; height: auto; }
.docs-content table { display: block; overflow-x: auto; }
.docs-content details { background: var(--hb-glass); border: 1px solid var(--hb-border); border-radius: 12px; padding: .8rem 1rem; margin: 1rem 0; }
.docs-content kbd { background: var(--hb-card2); border: 1px solid var(--hb-border-strong); border-bottom-width: 2px; color: var(--hb-text); border-radius: 6px; padding: .1em .45em; }

/* Code blocks: header-less but with polished copy button */
.docs-content pre { padding: 1.1rem 1.2rem; line-height: 1.6; margin: 1.2rem 0; position: relative; }
.docs-content pre::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--hb-a1), var(--hb-a2)); border-radius: 12px 0 0 12px; opacity: .8; }
div.code-toolbar > .toolbar .toolbar-item > button { background: var(--hb-card) !important; color: var(--hb-body) !important; border: 1px solid var(--hb-border-strong) !important; border-radius: 8px !important; }

/* Sidebar: rail + refined groups */
.sidebar-submenu ul { border-left: 1px solid var(--hb-border); margin-left: 1.2rem; padding-left: .2rem; }
.sidebar-submenu li a { border-radius: 0 8px 8px 0; padding: .35rem .7rem !important; }
.sidebar-menu > ul > li > a { border-radius: 12px; }
.sidebar-menu > ul > li > a:hover { background: rgba(var(--hb-a1-rgb), .1) !important; }

/* Right-hand TOC as a card */
.docs-toc { position: sticky; top: 90px; }
.docs-toc > div, .docs-toc nav { background: var(--hb-glass); border: 1px solid var(--hb-border); border-radius: 14px; padding: 1rem .9rem; }
.docs-toc a { border-left-width: 2px; padding-left: .7rem; margin-left: -.1rem; display: block; }
.docs-toc ul { list-style: none; padding-left: 0; }

/* Prev / next */
.doc-prev .card, .doc-next .card, .doc-nav .card { padding: .5rem .8rem; }
.doc-prev .card-title, .doc-next .card-title { color: var(--hb-a1-l) !important; }
.doc-prev .card-text, .doc-next .card-text { color: var(--hb-muted) !important; }

/* Feedback card */
.hb-feedback { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 3rem 0 1rem; padding: 1.1rem 1.3rem;
  border: 1px solid var(--hb-border); border-radius: 14px; background: linear-gradient(90deg, rgba(var(--hb-a1-rgb), .12), transparent), var(--hb-glass); }
.hb-feedback strong { display: block; color: var(--hb-text); } .hb-feedback span { font-size: .88rem; color: var(--hb-muted); }

/* Section index cards */
.hb-listcard { padding: 1.4rem !important; }
.hb-listico { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; color: var(--hb-a2-l); background: linear-gradient(135deg, rgba(var(--hb-a1-rgb), .3), rgba(var(--hb-a2-rgb), .18)); border: 1px solid rgba(var(--hb-a1-rgb), .35); }
.hb-listcard .hb-arrow { position: absolute; right: 1.1rem; bottom: 1rem; color: var(--hb-a2); opacity: 0; transform: translateX(-6px); transition: .2s; }
.hb-listcard:hover .hb-arrow { opacity: 1; transform: none; }
.hb-listcard .card-title { color: var(--hb-text) !important; }

.hb-tools code { align-self: flex-start; }
.docs-toc ul ul { padding-left: .8rem; }

/* Section index cards: icon row spans the card, folder badge sits at the right */
.hb-listcard { align-items: stretch !important; flex-direction: column; }
.hb-listcard .icon-color { width: 100%; align-items: center; justify-content: space-between; margin: 0 0 1rem !important; }
.hb-listcard .icon-faint { margin-left: auto; font-size: 1.25rem; color: var(--hb-muted) !important; opacity: .7; }
.hb-listcard .hb-arrow { font-size: 1.2rem; }

/* Centre the glyph inside the icon tile, and make the folder badge legible */
html body .hb-listico { display: inline-block !important; width: 44px; height: 44px; line-height: 44px !important; text-align: center; font-size: 24px; }
html body .hb-listcard .icon-faint { color: var(--hb-muted) !important; opacity: .9 !important; }

/* Theme variables behind the folder badge and card hover (near-black by default in dark mode) */
[data-dark-mode] { --feature-icon-faint: #64748b; --feature-link-hover-bg-color: var(--hb-card2); --feature-icon-color: var(--hb-a2-l); }
html:not([data-dark-mode]) { --feature-icon-faint: #94a3b8; }

html body .card.hb-listcard .icon-color i.icon-faint.material-icons { color: #7c8aa5 !important; opacity: 1 !important; }

/* NemoClaw green: dark text on green fills (NVIDIA style), black hero glow */
html[data-palette="nemoclaw"] .btn-primary,
html[data-palette="nemoclaw"] .btn-landing.btn-primary,
html[data-palette="nemoclaw"] .back-to-top { color: #0a0a0a !important; font-weight: 700; }
html[data-palette="nemoclaw"] .btn-primary { background: linear-gradient(135deg, #8bd100, #76b900) !important; border-color: rgba(191, 242, 48, .5) !important; }
html[data-palette="nemoclaw"] ::selection { color: #0a0a0a; background: #76b900; }
html[data-palette="nemoclaw"] #hb-palette-btn .hb-dot { background: #76b900; }
html[data-palette="nemoclaw"][data-dark-mode] .hb-step-n { color: rgba(118, 185, 0, .14); }

/* Active sidebar entries follow the palette (beats the theme's blue) */
html body .sidebar-wrapper .sidebar-menu li.current > a,
html body .sidebar-wrapper .sidebar-menu li.current > a span,
html body .sidebar-wrapper .sidebar-menu li.sidebar-dropdown.current > a,
html body .sidebar-wrapper .sidebar-menu li.sidebar-dropdown.current > a .menu-icon,
html body .sidebar-wrapper .sidebar-submenu li a.current,
html body .sidebar-wrapper .sidebar-submenu li.current > a { color: var(--hb-a1-l) !important; }
html body .sidebar-wrapper .sidebar-submenu li a.current { border-right-color: var(--hb-a1) !important; }

/* Video section */
.hb-wide { max-width: 940px; }
.hb-video { position: relative; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; border: 1px solid var(--hb-border-strong); background: #000; box-shadow: 0 30px 80px -30px rgba(var(--hb-a1-rgb), .55); }
.hb-video iframe, .hb-video-btn { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.hb-video-btn { padding: 0; background: none; cursor: pointer; }
.hb-video-btn img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; opacity: .85; transition: opacity .25s, transform .4s; }
.hb-video-btn:hover img { opacity: 1; transform: scale(1.02); }
.hb-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 76px; height: 76px; display: grid; place-items: center; border-radius: 50%;
  background: linear-gradient(135deg, var(--hb-a1), var(--hb-a2)); color: #fff; box-shadow: 0 0 0 10px rgba(var(--hb-a1-rgb), .25), 0 12px 40px rgba(var(--hb-a1-rgb), .6); transition: transform .2s; }
html[data-palette="nemoclaw"] .hb-play { color: #0a0a0a; }
.hb-play .material-icons { font-size: 2.6rem; }
.hb-video-btn:hover .hb-play { transform: translate(-50%, -50%) scale(1.08); }

.hb-legend { list-style: none; display: flex; gap: 1.4rem; justify-content: center; margin: 1rem 0 0; padding: 0; font-size: .85rem; color: var(--hb-muted); }
.hb-legend li { display: inline-flex; align-items: center; gap: .3rem; } .hb-legend .material-icons { font-size: 1.1rem; }
.hb-compare .is-us .hb-yes { filter: drop-shadow(0 0 6px rgba(var(--hb-a1-rgb), .6)); }

/* Pipeline diagram (inline SVG, palette-aware) */
.hb-diagram { margin: 1.6rem 0 2rem; padding: 1.2rem 1rem .8rem; border: 1px solid var(--hb-border); border-radius: 16px; background: var(--hb-glass); }
.hb-diagram svg { width: 100%; height: auto; display: block; border-radius: 0; font-family: Inter, system-ui, sans-serif; }
.hb-diagram figcaption { text-align: center; font-size: .85rem; color: var(--hb-muted); margin-top: .5rem; }
.hb-d-node rect { fill: var(--hb-card); stroke: var(--hb-border-strong); stroke-width: 1.5; }
.hb-d-human rect { stroke: var(--hb-a1); stroke-width: 2.5; fill: color-mix(in srgb, var(--hb-a1) 14%, var(--hb-card)); filter: drop-shadow(0 0 14px rgba(var(--hb-a1-rgb), .45)); }
.hb-d-num { fill: var(--hb-a2); font-size: 13px; font-weight: 700; letter-spacing: .12em; text-anchor: middle; }
.hb-d-title { fill: var(--hb-text); font-size: 22px; font-weight: 800; text-anchor: middle; }
.hb-d-sub { fill: var(--hb-muted); font-size: 14px; text-anchor: middle; }
.hb-d-path { fill: var(--hb-a1-l); font: 600 12px "Fira Code", ui-monospace, monospace; text-anchor: middle; }
.hb-d-cap { fill: var(--hb-muted); font-size: 13px; }
.hb-d-line { stroke: var(--hb-a2); stroke-width: 2.2; fill: none; }
.hb-d-dash { stroke-dasharray: 6 5; stroke: var(--hb-err); }
.hb-d-arrowhead { fill: var(--hb-a2); }
.hb-d-badge { fill: rgba(var(--hb-a1-rgb), .2); stroke: var(--hb-a1); stroke-width: 1; }
.hb-d-badge-t { fill: var(--hb-a1-l); font-size: 12px; font-weight: 700; text-anchor: middle; }
.hb-d-audit { stroke: var(--hb-border-strong); stroke-width: 2; stroke-dasharray: 2 6; stroke-linecap: round; }
.hb-d-path { font-size: 11px; }
.hb-d-x { fill: var(--hb-err); font-size: 26px; font-weight: 700; }