/* ============================================================
   Tradevest Docs — layout & chrome (brand redesign · Modern)
   Uses tokens from tokens.css. Dark default + light via
   [data-theme]. Marketing header + footer wrap a 3-column
   docs shell (sidebar · content · on-this-page).
   ============================================================ */

* { box-sizing: border-box; }
html { background: #08060f; }
html, body { margin: 0; min-height: 100%; }

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
::selection { background: color-mix(in srgb, var(--color-primary) 35%, transparent); }

/* subtle brand glow on the page */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: var(--scrim);
  pointer-events: none;
  z-index: 0;
}

/* ============================================================
   MARKETING HEADER
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 28px;
  height: var(--header-height);
  padding: 0 32px;
  background: var(--color-bg-header);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--color-border);
}
.site-header__logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: 0.18em;
  font-size: 17px;
  color: var(--color-text);
  flex-shrink: 0;
  text-transform: uppercase;
}
.site-header__logo svg { width: 26px; height: 26px; display: block; color: var(--color-primary); }
.site-header__logo-image { display: block; height: 26px; width: auto; }

.mkt-nav { display: flex; align-items: center; gap: 26px; margin-left: 4px; }
.mkt-nav a {
  font-size: 14.5px;
  color: var(--color-text-secondary);
  font-weight: 500;
  white-space: nowrap;
  transition: color 0.15s;
}
.mkt-nav a:hover { color: var(--color-text); }

.mkt-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.lang {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13.5px; color: var(--color-text-secondary); padding: 6px 8px;
}
.lang .flag {
  width: 18px; height: 13px; border-radius: 2px; display: inline-block;
  background: linear-gradient(180deg, #012169 33%, #fff 33% 66%, #C8102E 66%);
}
.site-header__badge {
  background: var(--color-accent-soft);
  border: 1px solid color-mix(in srgb, var(--color-primary) 40%, transparent);
  border-radius: 999px;
  color: var(--color-accent-text);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  text-transform: uppercase;
}

.btn {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  border-radius: 999px;
  padding: 9px 18px;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.12s, background 0.15s, border-color 0.15s, filter 0.15s;
}
.btn-ghost { background: transparent; color: var(--color-text); border-color: var(--color-border-strong); }
.btn-ghost:hover { border-color: var(--color-primary); color: var(--color-accent-text); }
.btn-primary {
  background: var(--color-primary); color: #fff;
  box-shadow: 0 8px 22px -6px color-mix(in srgb, var(--color-primary) 75%, transparent);
}
.btn-primary:hover { transform: translateY(-1px); filter: brightness(1.06); }

.icon-btn {
  width: 38px; height: 38px;
  display: inline-grid; place-items: center;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.icon-btn:hover { background: var(--color-hover); color: var(--color-text); }
.icon-btn svg { width: 18px; height: 18px; }
/* theme toggle: show the icon for the theme you'll switch TO */
.theme-toggle .to-light { display: none; }
[data-theme="light"] .theme-toggle .to-light { display: block; }
[data-theme="light"] .theme-toggle .to-dark { display: none; }

.site-header__nav-toggle {
  display: none;
  width: 38px; height: 38px;
  align-items: center; justify-content: center;
  border-radius: 10px; border: 1px solid var(--color-border);
  background: transparent; cursor: pointer; position: relative;
}
.site-header__nav-toggle span {
  position: absolute; width: 16px; height: 2px; border-radius: 2px;
  background: var(--color-primary);
}
.site-header__nav-toggle span:nth-child(1) { transform: translateY(-5px); }
.site-header__nav-toggle span:nth-child(3) { transform: translateY(5px); }

/* ============================================================
   DOCS TOOLBAR (breadcrumb + search + theme)
   ============================================================ */
.docs-toolbar {
  position: sticky;
  top: var(--header-height);
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 16px;
  height: var(--toolbar-height);
  padding: 0 32px;
  background: var(--color-bg-header);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--color-border);
}
.toolbar-logo {
  display: flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 15px; color: var(--color-text);
  white-space: nowrap; flex-shrink: 0;
}
/* Put the wordmark on the same lane as the breadcrumb: its optical centre is
   aligned to the breadcrumb text centre (measured via canvas ink bounds, past
   the icon). The icon rises above the wordmark by design. */
.toolbar-logo__img { height: 22px; width: auto; display: block; flex-shrink: 0; position: relative; top: -2px; }
/* Show the logotype whose colour reads on the active theme (white on dark,
   black on light). data-theme is always set on <html>. */
html[data-theme="dark"] .toolbar-logo__img--light { display: none; }
html[data-theme="light"] .toolbar-logo__img--dark { display: none; }
.toolbar-logo:hover { opacity: 0.85; }
.footer-logo { display: inline-flex; align-items: center; }
.footer-logo .toolbar-logo__img { height: 30px; }

.crumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--color-text-muted); white-space: nowrap; }
.crumb .sep { opacity: 0.5; }
.crumb b { color: var(--color-text-secondary); font-weight: 600; }

.site-header__badge {
  display: inline-flex; align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
  background: var(--color-accent-soft);
  color: var(--color-accent-text);
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em;
  white-space: nowrap;
}

.search {
  position: relative;
  margin-left: auto;
  display: flex; align-items: center; gap: 10px;
  width: 320px; max-width: 38vw;
  padding: 9px 14px;
  border-radius: 11px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: 13.5px; font-family: inherit;
  cursor: text;
  transition: border-color 0.15s;
}
.search:hover, .search:focus-within { border-color: var(--color-border-strong); }
.search svg { width: 15px; height: 15px; flex-shrink: 0; }
.search input {
  border: 0; background: transparent; outline: none; flex: 1; min-width: 0;
  color: var(--color-text); font: inherit;
}
.search input::placeholder { color: var(--color-text-muted); }
.search .kbd {
  font-family: var(--font-code); font-size: 11px;
  padding: 2px 6px; border-radius: 5px; border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}

/* endpoint search results dropdown */
.search-results {
  position: absolute;
  top: calc(100% + 8px); right: 0;
  width: min(460px, 80vw);
  max-height: 60vh; overflow-y: auto;
  padding: 6px;
  background: var(--color-bg-elev);
  border: 1px solid var(--color-border-strong);
  border-radius: 12px;
  box-shadow: var(--shadow-elevated);
  z-index: 80;
}
.search-results[hidden] { display: none; }
.sr-empty { padding: 14px 12px; font-size: 13px; color: var(--color-text-muted); }
.sr-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px;
  text-decoration: none; color: var(--color-text);
}
.sr-item:hover { background: var(--color-hover); }
.sr-method {
  flex-shrink: 0; min-width: 46px; text-align: center;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em;
  padding: 4px 6px; border-radius: 6px; color: #fff;
}
.sr-method.m-get { background: #16a982; }
.sr-method.m-post { background: #8b5cf6; }
.sr-method.m-put { background: #c88413; }
.sr-method.m-patch { background: #9a63f6; }
.sr-method.m-delete { background: #d44b5a; }
.sr-method.m-options, .sr-method.m-head, .sr-method.m-trace { background: #6b6880; }
.sr-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.sr-label { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-path { font-family: var(--font-code); font-size: 11px; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-spec { flex-shrink: 0; font-size: 11px; color: var(--color-text-muted); }

/* prose (guide / release note) results, grouped above the endpoint hits */
.sr-group {
  padding: 10px 10px 5px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-text-muted);
}
.sr-kind {
  flex-shrink: 0; min-width: 46px; text-align: center;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em;
  padding: 4px 6px; border-radius: 6px;
  background: var(--color-accent-soft); color: var(--color-accent-text);
}
.sr-kind--release-note { background: color-mix(in srgb, #16a982 20%, transparent); color: #16a982; }
.sr-detail {
  font-size: 11.5px; color: var(--color-text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.search-results mark {
  background: color-mix(in srgb, var(--color-primary) 26%, transparent);
  color: inherit; border-radius: 3px; padding: 0 1px;
}
.sr-item { align-items: flex-start; }
.sr-item .sr-kind, .sr-item .sr-method { margin-top: 1px; }
.toolbar-link {
  font-size: 13.5px; font-weight: 600; color: var(--color-accent-text);
  padding: 8px 14px; border-radius: 10px; border: 1px solid var(--color-border);
}
.toolbar-link:hover { background: var(--color-hover); }

/* ============================================================
   3-COLUMN SHELL
   ============================================================ */
.docs-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr) var(--toc-width);
  max-width: var(--shell-max);
  margin: 0 auto;
}
/* API (Redoc) pages: 2-column shell (sidebar + Redoc's content/samples). No
   right rail — Redoc fills the whole row so there is no empty column. Capped
   wider than guide pages to give the two Redoc panels room, and centred on
   very large screens so it doesn't stretch into emptiness. */
.docs-shell:has(.main-content--api) {
  max-width: var(--shell-max);
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
}
.docs-shell:has(.main-content--api) .toc { display: none; }

/* Prose pages: move the "on this page" nav to a LEFT column (between the site
   sidebar and the content), mirroring where the API reference's menu sits.
   DOM order is sidebar → main → toc, so place them explicitly. This covers
   every non-Redoc page — guides, release notes and the index pages — so the
   rail never jumps sides between them. */
.docs-shell:has(.main-content--guide),
.docs-shell:has(.main-content--index) {
  grid-template-columns: var(--sidebar-width) var(--toc-width) minmax(0, 1fr);
}
.docs-shell:has(.main-content--guide) .toc,
.docs-shell:has(.main-content--index) .toc {
  grid-column: 2;
  grid-row: 1;
  padding: 44px 18px 60px 26px;
  border-right: 1px solid var(--color-border);
}
.docs-shell:has(.main-content--guide) .main-content,
.docs-shell:has(.main-content--index) .main-content { grid-column: 3; grid-row: 1; }

/* ---------- SIDEBAR ---------- */
.sidebar {
  position: sticky;
  top: var(--chrome-height);
  align-self: start;
  height: calc(100vh - var(--chrome-height));
  overflow-y: auto;
  padding: 22px 14px 60px 26px;
  border-right: 1px solid var(--color-border);
  scrollbar-width: thin;
}
.side-home {
  display: flex; align-items: center; gap: 10px;
  font-weight: 600; font-size: 14.5px; color: var(--color-accent-text);
  padding: 9px 11px; border-radius: 10px; margin-bottom: 12px;
  background: var(--color-accent-soft);
}
.side-home .lbl { flex: 1; min-width: 0; line-height: 1.3; }
.side-home svg { width: 17px; height: 17px; flex-shrink: 0; }

/* ---------- MAIN CONTENT ---------- */
.main-content { min-width: 0; }
.main-content--guide,
.main-content--index { padding: 44px 56px 96px; }
.main-content--api { padding: 0; }
.api-reference { min-height: calc(100vh - var(--chrome-height)); }

.guide-content { max-width: 760px; }

/* ---------- ON THIS PAGE (TOC) ---------- */
.toc {
  position: sticky;
  top: var(--chrome-height);
  align-self: start;
  height: calc(100vh - var(--chrome-height));
  overflow-y: auto;
  padding: 46px 26px 60px 8px;
  font-size: 13px;
}
.toc[hidden] { display: none; }
.toc-title {
  display: flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 14px;
}
.toc-title svg { width: 13px; height: 13px; }
.toc a {
  display: block; color: var(--color-text-muted);
  padding: 5px 0 5px 14px; border-left: 2px solid var(--color-border);
  line-height: 1.4; transition: color 0.13s, border-color 0.13s;
}
.toc a.lvl-3 { padding-left: 26px; font-size: 12.5px; }
.toc a:hover { color: var(--color-text); }
.toc a.active { color: var(--color-accent-text); border-left-color: var(--color-primary); font-weight: 600; }

/* ============================================================
   FOOTER
   ============================================================ */
.mkt-footer {
  position: relative; z-index: 1;
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-elev);
  margin-top: 40px;
}
.footer-inner {
  max-width: var(--content-max); margin: 0 auto;
  padding: 52px 32px 40px;
  display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 40px;
}
.foot-brand .site-header__logo { font-size: 16px; }
.foot-brand p { font-size: 13.5px; color: var(--color-text-secondary); max-width: 290px; margin: 14px 0 0; line-height: 1.6; }
.foot-reg {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 18px;
  font-size: 12px; color: var(--color-text-muted);
  padding: 7px 12px; border: 1px solid var(--color-border); border-radius: 9px;
}
.foot-reg svg { width: 14px; height: 14px; color: var(--m-get); }
.foot-col h5 {
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--color-text-muted); margin: 0 0 14px;
}
.foot-col a { display: block; font-size: 14px; color: var(--color-text-secondary); padding: 5px 0; }
.foot-col a:hover { color: var(--color-accent-text); }
.foot-bottom {
  max-width: var(--content-max); margin: 0 auto;
  padding: 22px 32px; border-top: 1px solid var(--color-border);
  display: flex; align-items: center; gap: 16px;
  font-size: 13px; color: var(--color-text-muted);
}

/* ============================================================
   MOBILE
   ============================================================ */
.sidebar-backdrop { display: none; }

@media (max-width: 1080px) {
  .docs-shell { grid-template-columns: var(--sidebar-width) minmax(0, 1fr); }
  .toc { display: none; }
  /* collapse the prose pages' left nav too (more specific than the base rule) */
  .docs-shell:has(.main-content--guide),
  .docs-shell:has(.main-content--index) { grid-template-columns: var(--sidebar-width) minmax(0, 1fr); }
  .docs-shell:has(.main-content--guide) .main-content,
  .docs-shell:has(.main-content--index) .main-content { grid-column: auto; }
}
@media (max-width: 860px) {
  .mkt-nav, .lang, .login-btn { display: none; }
  .site-header__nav-toggle { display: inline-flex; }
  .site-header { padding: 0 18px; }
  .docs-toolbar { padding: 0 18px; }
  .docs-shell { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; left: 0; top: var(--chrome-height); bottom: 0;
    width: 86%; max-width: 320px; z-index: 70;
    background: var(--color-bg-elev);
    box-shadow: var(--shadow-elevated);
    transform: translateX(-102%); transition: transform 0.2s ease;
    height: auto;
  }
  body.sidebar-open .sidebar { transform: translateX(0); }
  body.sidebar-open .sidebar-backdrop {
    display: block; position: fixed; inset: var(--chrome-height) 0 0; z-index: 65;
    background: rgba(5, 3, 12, 0.55);
  }
  .main-content--guide, .main-content--index { padding: 30px 20px 70px; }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 28px; }
}