/* TSync docs — TSYNC brand (Storm Energy SRL). Amber accent on warm ink, brand fonts. No JS required.
   Brand rule: text on an amber fill is ALWAYS ink (#1A1620), never white. */
:root {
  --tsync-primary-50:  #fff6e6;  /* light amber tint */
  --tsync-primary-100: #fce9c7;
  --tsync-primary-500: #fbb034;  /* amber-400 — core brand color */
  --tsync-primary-600: #d97d06;  /* amber-600 — deep accent / hover */
  --tsync-primary-700: #b45f05;  /* amber-700 — amber text on light (AA) */
  --tsync-accent-500:  #f59e0b;  /* amber-500 */
  --tsync-ink:         #1a1620;  /* text on amber fills (never white) */
  --tsync-text:        #1a1620;  /* ink */
  --tsync-text-soft:   #3c3642;  /* ink-2 */
  --tsync-border:      #e7e2da;  /* warm neutral */
  --tsync-bg:          #fcfbf9;  /* light surface */
  --tsync-surface:     #ffffff;
  --tsync-surface-2:   #f7f4ef;
  --tsync-code-bg:     #f7f4ef;
  --tsync-chrome:      #16131c;  /* dark brand chrome (header/footer) */
  --radius:            8px;
  --shadow-sm:         0 1px 3px rgba(26,22,32,0.06);
  --shadow-md:         0 4px 12px rgba(26,22,32,0.10);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--tsync-text);
  background: var(--tsync-bg);
  -webkit-font-smoothing: antialiased;
}

.container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* Header */
.site-header {
  background: var(--tsync-surface);
  border-bottom: 1px solid var(--tsync-border);
  position: sticky; top: 0; z-index: 10;
  box-shadow: var(--shadow-sm);
}
.site-header .container {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding-top: 12px; padding-bottom: 12px;
}
.brand { display: flex; align-items: center; flex: 0 0 auto; }
.brand-logo { display: block; height: 34px; width: auto; }
.brand-logo--dark { display: none; } /* light theme (default) shows the dark wordmark */
.topnav { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }

/* Mobile nav — hamburger + off-canvas drawer. All hidden on desktop; only the ≤840px media query
   turns them on. On desktop the sidebar stays a normal sticky column (unaffected by these rules). */
.nav-toggle {
  display: none; /* shown ≤840px */
  align-items: center; justify-content: center;
  width: 42px; height: 42px; padding: 0; flex: 0 0 auto;
  background: transparent; border: 1px solid var(--tsync-border); border-radius: var(--radius);
  cursor: pointer; color: var(--tsync-text); -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, border-color 0.15s;
}
.nav-toggle:hover { background: var(--tsync-primary-50); border-color: var(--tsync-primary-500); }
.nav-toggle:focus-visible { outline: 2px solid var(--tsync-primary-500); outline-offset: 2px; }
.nav-toggle__bars { position: relative; display: block; width: 20px; height: 14px; }
.nav-toggle__bars span {
  position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px;
  background: currentColor; transition: transform 0.25s ease, opacity 0.2s ease, top 0.25s ease;
}
.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 6px; }
.nav-toggle__bars span:nth-child(3) { top: 12px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { top: 6px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

/* Drawer header (close button + label) — shown only inside the mobile drawer. */
.sidebar-head { display: none; align-items: center; justify-content: space-between; margin: -4px -4px 10px; padding-bottom: 10px; border-bottom: 1px solid var(--tsync-border); }
.sidebar-head__title { font-family: 'Space Grotesk', system-ui, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tsync-text-soft); }
.sidebar-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; font-size: 16px; line-height: 1;
  background: transparent; border: 1px solid var(--tsync-border); border-radius: var(--radius);
  color: var(--tsync-text); cursor: pointer; transition: background 0.15s, border-color 0.15s;
}
.sidebar-close:hover { background: var(--tsync-primary-50); border-color: var(--tsync-primary-500); }
.sidebar-close:focus-visible { outline: 2px solid var(--tsync-primary-500); outline-offset: 2px; }

/* Backdrop behind the open drawer. Inert (invisible, non-interactive) until body.nav-open. */
.nav-backdrop {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(20, 18, 26, 0.5);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
body.nav-open .nav-backdrop { opacity: 1; visibility: visible; pointer-events: auto; }

/* Language selector — compact segmented control (EN/RO/RU), one connected pill group. */
.lang-seg { display: inline-flex; align-items: stretch; border: 1px solid var(--tsync-border); border-radius: var(--radius); overflow: hidden; background: var(--tsync-surface); }
.lang-seg__item {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 38px; padding: 0 12px;
  font-family: 'Space Grotesk', system-ui, sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0.01em;
  color: var(--tsync-text-soft); text-decoration: none;
  border-right: 1px solid var(--tsync-border);
  transition: background 0.15s, color 0.15s;
}
.lang-seg__item:last-child { border-right: 0; }
.lang-seg__item:hover { background: var(--tsync-primary-50); color: var(--tsync-primary-700); }
.lang-seg__item.active { background: var(--tsync-primary-500); color: var(--tsync-ink); } /* ink on amber, never white */
.lang-seg__item:focus-visible { outline: 2px solid var(--tsync-primary-500); outline-offset: -2px; }

/* Layout */
.layout { display: grid; grid-template-columns: 240px 1fr; gap: 32px; padding-top: 32px; padding-bottom: 64px; align-items: start; }

/* Sidebar */
.sidebar {
  position: sticky; top: 84px;
  /* Independent scroll: the menu stays in view and scrolls on its own (its own scrollbar) when it's taller
     than the screen — regardless of how far you've scrolled the page. overscroll-behavior keeps the page from
     scrolling once the menu reaches its end. */
  max-height: calc(100vh - 104px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  background: var(--tsync-surface);
  border: 1px solid var(--tsync-border);
  border-radius: var(--radius);
  padding: 16px;
}
.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--tsync-border); border-radius: 8px; }
.sidebar::-webkit-scrollbar-thumb:hover { background: var(--tsync-text-soft); }
.sidebar ul { list-style: none; margin: 0; padding: 0; }
.sidebar li { margin: 0; }
.sidebar li.nav-section { margin: 18px 0 4px; padding: 4px 12px 0; font-family: 'Space Grotesk', system-ui, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tsync-text-soft); opacity: 0.7; }
.sidebar li.nav-section:first-child { margin-top: 0; }

/* Chapters — collapsible <details> groups. Only the chapter holding the current page is open, so ~70 pages
   read as a dozen scannable topics instead of one endless list. No JS: the disclosure is native. */
.sidebar li.nav-home a { font-weight: 600; }
.sidebar li.nav-chapter { margin: 2px 0; }
.sidebar li.nav-chapter > details > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 12px; border-radius: 6px; cursor: pointer; list-style: none;
  font-family: 'Space Grotesk', system-ui, sans-serif; font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--tsync-text-soft);
  transition: background 0.15s, color 0.15s;
}
.sidebar li.nav-chapter > details > summary::-webkit-details-marker { display: none; }
.sidebar li.nav-chapter > details > summary::marker { content: ''; }
.sidebar li.nav-chapter > details > summary:hover { background: var(--tsync-primary-50); color: var(--tsync-primary-700); }
.sidebar li.nav-chapter > details > summary:focus-visible { outline: 2px solid var(--tsync-primary-500); outline-offset: -2px; }
.sidebar li.nav-chapter > details[open] > summary { color: var(--tsync-text); }
.sidebar .nav-chapter__n { flex: 0 0 auto; white-space: nowrap; font-size: 10.5px; font-weight: 600; letter-spacing: 0; opacity: 0.55; }
.sidebar .nav-chapter__n::after { content: ' ▸'; }
.sidebar li.nav-chapter > details[open] .nav-chapter__n::after { content: ' ▾'; }
.sidebar li.nav-chapter > details > ul { margin: 2px 0 10px; border-left: 1px solid var(--tsync-border); margin-left: 12px; }
.sidebar li.nav-chapter > details > ul > li > a { padding: 6px 10px; font-size: 13.5px; border-radius: 0 6px 6px 0; }
.sidebar a {
  display: block; padding: 8px 12px;
  color: var(--tsync-text-soft);
  text-decoration: none;
  border-radius: 6px;
  font-size: 14px;
  transition: background 0.15s, color 0.15s;
}
.sidebar a:hover { background: var(--tsync-primary-50); color: var(--tsync-primary-700); }
.sidebar li.active a { background: var(--tsync-primary-500); color: var(--tsync-ink); font-weight: 600; }
.sidebar li.active a:hover { background: var(--tsync-accent-500); color: var(--tsync-ink); }

/* Content */
.content {
  background: var(--tsync-surface);
  border: 1px solid var(--tsync-border);
  border-radius: var(--radius);
  padding: 40px 48px;
  box-shadow: var(--shadow-sm);
  min-width: 0;
}
.content article { max-width: 760px; }
.content h1, .content h2, .content h3, .content h4 { font-family: 'Space Grotesk', system-ui, sans-serif; }
.content h1 { font-size: 36px; font-weight: 700; margin: 0 0 16px; letter-spacing: -0.02em; color: var(--tsync-text); }
.content h1::after { content: ''; display: block; width: 56px; height: 4px; margin-top: 12px; border-radius: 4px; background: var(--tsync-primary-500); }
.content h2 { font-size: 24px; font-weight: 600; margin-top: 40px; margin-bottom: 12px; padding-top: 8px; border-top: 1px solid var(--tsync-border); letter-spacing: -0.01em; color: var(--tsync-text); }
.content h3 { font-size: 18px; font-weight: 600; margin-top: 28px; margin-bottom: 8px; color: var(--tsync-text); }
.content h4 { font-size: 16px; font-weight: 600; margin-top: 20px; margin-bottom: 6px; color: var(--tsync-text-soft); }
.content p, .content ul, .content ol { margin: 12px 0; }
.content a { color: var(--tsync-primary-600); text-decoration: underline; text-underline-offset: 2px; }
.content a:hover { color: var(--tsync-primary-700); }
.content ul, .content ol { padding-left: 24px; }
.content li { margin: 6px 0; }
.content strong { font-weight: 600; }
.content blockquote {
  border-left: 4px solid var(--tsync-primary-500);
  background: var(--tsync-primary-50);
  padding: 12px 16px;
  margin: 16px 0;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.content blockquote p { margin: 4px 0; }

/* Code */
.content code {
  background: var(--tsync-code-bg);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'JetBrains Mono', 'Consolas', 'Courier New', monospace;
  font-size: 0.92em;
  color: var(--tsync-primary-700);
}
.content pre {
  background: var(--tsync-chrome);
  color: #f7f4ef;
  padding: 16px 20px;
  border-radius: var(--radius);
  overflow-x: auto;
  margin: 16px 0;
  font-size: 14px;
  line-height: 1.5;
}
.content pre code {
  background: transparent;
  color: inherit;
  padding: 0;
  font-size: inherit;
}

/* Tables */
.content table {
  border-collapse: collapse;
  width: 100%;
  margin: 16px 0;
  font-size: 14px;
}
.content th, .content td {
  border: 1px solid var(--tsync-border);
  padding: 8px 12px;
  text-align: left;
}
.content th { background: var(--tsync-primary-50); font-weight: 600; color: var(--tsync-primary-700); }
.content tbody tr:nth-child(even) { background: var(--tsync-bg); }
/* A 4-column table needs ~400px and a phone gives the article ~300px, so the table
   used to push the WHOLE page sideways (the body scrolled horizontally and the text
   ran off the edge). The table scrolls inside its own box instead; the page never does.
   Wrapper is added by the build — see wrapTables(). */
.content .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 16px 0; max-width: 100%; }
.content .table-scroll > table { margin: 0; }
@media (max-width: 700px) {
  .content .table-scroll { border: 1px solid var(--tsync-border); border-radius: 8px; }
  .content .table-scroll > table { min-width: 520px; border: 0; }
}

hr { border: none; border-top: 1px solid var(--tsync-border); margin: 32px 0; }

/* Footer — dark brand chrome */
.site-footer {
  background: var(--tsync-chrome);
  color: rgba(247,244,239,0.85);
  padding: 24px 0;
  font-size: 14px;
}
.site-footer p { margin: 0; text-align: center; }
.site-footer a { color: var(--tsync-primary-300, #fcc45a); text-decoration: underline; }

/* Theme toggle button (header). Default light → shows the moon (= switch to dark). */
.theme-toggle { cursor: pointer; background: var(--tsync-surface); border: 1px solid var(--tsync-border); border-radius: var(--radius); min-width: 40px; min-height: 38px; display: inline-flex; align-items: center; justify-content: center; padding: 0 11px; font-size: 16px; line-height: 1; color: var(--tsync-text-soft); transition: background 0.15s, color 0.15s, border-color 0.15s; }
.theme-toggle:focus-visible { outline: 2px solid var(--tsync-primary-500); outline-offset: -2px; }
.theme-toggle:hover { border-color: var(--tsync-primary-500); color: var(--tsync-primary-700); }
.theme-toggle .sun { display: none; }
.theme-toggle .moon { display: inline; }

/* Dark mode — defaults to the system (prefers-color-scheme) and is overridable by the header toggle
   (data-theme, persisted in localStorage). Mirrors the TSYNC site dark theme. Brand dark tokens; amber text on
   dark = amber-300 #FCC45A (AA); amber fills keep ink text. Token set is applied both for the system default
   (:root:not([data-theme=light])) and the manual choice (:root[data-theme=dark]). */
:root[data-theme="dark"] { --tsync-primary-50:#241c10; --tsync-primary-100:#2e2412; --tsync-primary-500:#fbb034; --tsync-primary-600:#fcc45a; --tsync-primary-700:#fcc45a; --tsync-accent-500:#f59e0b; --tsync-ink:#1a1620; --tsync-text:#f1ecf4; --tsync-text-soft:#b8b2c0; --tsync-border:#2a2531; --tsync-bg:#0e0c10; --tsync-surface:#16131c; --tsync-surface-2:#1d1924; --tsync-code-bg:#1d1924; --tsync-chrome:#16131c; --shadow-sm:0 1px 3px rgba(0,0,0,0.4); --shadow-md:0 4px 12px rgba(0,0,0,0.5); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --tsync-primary-50:#241c10; --tsync-primary-100:#2e2412; --tsync-primary-500:#fbb034; --tsync-primary-600:#fcc45a; --tsync-primary-700:#fcc45a; --tsync-accent-500:#f59e0b; --tsync-ink:#1a1620; --tsync-text:#f1ecf4; --tsync-text-soft:#b8b2c0; --tsync-border:#2a2531; --tsync-bg:#0e0c10; --tsync-surface:#16131c; --tsync-surface-2:#1d1924; --tsync-code-bg:#1d1924; --tsync-chrome:#16131c; --shadow-sm:0 1px 3px rgba(0,0,0,0.4); --shadow-md:0 4px 12px rgba(0,0,0,0.5); }
}

/* Logo + toggle-icon swap for the resolved dark state (manual + system) */
:root[data-theme="dark"] .brand-logo--light { display: none; }
:root[data-theme="dark"] .brand-logo--dark { display: block; }
:root[data-theme="dark"] .theme-toggle .moon { display: none; }
:root[data-theme="dark"] .theme-toggle .sun { display: inline; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand-logo--light { display: none; }
  :root:not([data-theme="light"]) .brand-logo--dark { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .moon { display: none; }
  :root:not([data-theme="light"]) .theme-toggle .sun { display: inline; }
}
/* Explicit light (toggle forced light, even on a dark system) */
:root[data-theme="light"] .brand-logo--light { display: block; }
:root[data-theme="light"] .brand-logo--dark { display: none; }
:root[data-theme="light"] .theme-toggle .sun { display: none; }
:root[data-theme="light"] .theme-toggle .moon { display: inline; }

.content pre { border: 1px solid var(--tsync-border); }
.content img { opacity: 0.97; }

/* Search box (header) */
.docsearch { position: relative; flex: 1 1 360px; max-width: 460px; margin: 0 18px; }
.docsearch-ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 13px; opacity: 0.55; pointer-events: none; }
.docsearch-input {
  width: 100%; box-sizing: border-box; padding: 9px 34px 9px 34px; border-radius: 10px;
  border: 1px solid var(--tsync-border); background: var(--tsync-surface); color: var(--tsync-text);
  font-family: 'Manrope', system-ui, sans-serif; font-size: 14px; outline: none; transition: border-color .15s, box-shadow .15s;
}
.docsearch-input::placeholder { color: var(--tsync-text-soft); opacity: 0.8; }
.docsearch-input:focus { border-color: var(--tsync-primary-500); box-shadow: 0 0 0 3px rgba(251,176,52,0.22); }
.docsearch-kbd {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-family: 'JetBrains Mono', monospace;
  font-size: 11px; line-height: 1; padding: 3px 6px; border-radius: 6px; border: 1px solid var(--tsync-border);
  background: var(--tsync-bg); color: var(--tsync-text-soft); pointer-events: none;
}
.docsearch-results {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 60; max-height: 70vh; overflow-y: auto;
  background: var(--tsync-surface); border: 1px solid var(--tsync-border); border-radius: 12px;
  box-shadow: 0 18px 48px rgba(2,6,23,0.22); padding: 6px;
}
.docsearch-item { display: block; padding: 9px 11px; border-radius: 9px; text-decoration: none; color: var(--tsync-text); }
.docsearch-item:hover, .docsearch-item.is-sel { background: var(--tsync-primary-500); color: #1A1620; }
.docsearch-item.is-sel .docsearch-x, .docsearch-item:hover .docsearch-x { color: #1A1620; opacity: 0.85; }
.docsearch-t { display: block; font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 600; font-size: 14px; }
.docsearch-x { display: block; font-size: 12.5px; color: var(--tsync-text-soft); margin-top: 2px; line-height: 1.4; }
.docsearch-none { padding: 18px; text-align: center; color: var(--tsync-text-soft); font-size: 14px; }
.docsearch-hint { padding: 8px 11px 4px; border-top: 1px solid var(--tsync-border); margin-top: 4px; color: var(--tsync-text-soft); font-size: 11.5px; }
:root[data-theme="dark"] .docsearch-input { background: rgba(255,255,255,0.04); }

/* Responsive */
@media (max-width: 840px) {
  /* Single column: the content is the only in-flow item — the sidebar becomes a fixed off-canvas
     drawer (removed from flow) so it no longer pushes the article down. */
  .layout { grid-template-columns: 1fr; gap: 16px; padding-top: 16px; }
  .nav-toggle { display: inline-flex; }
  .sidebar-head { display: flex; }
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 100;
    width: min(86vw, 320px); height: 100%; max-height: none;
    margin: 0; border-radius: 0; border-width: 0 1px 0 0;
    padding: 16px; overflow-y: auto; -webkit-overflow-scrolling: touch;
    transform: translateX(-100%); visibility: hidden;
    transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0.28s;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
  }
  body.nav-open .sidebar { transform: translateX(0); visibility: visible; }
  body.nav-open { overflow: hidden; }
  .content { padding: 24px 20px; }
  .content h1 { font-size: 28px; }
  .content h2 { font-size: 20px; }
  .docsearch { order: 3; flex: 1 1 100%; margin: 8px 0 0; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sidebar, .nav-backdrop, .nav-toggle__bars span { transition: none !important; }
}
/* Header on phones: brand stays top-left, the toggle + language segmented control sit on their own
   right-aligned row — no misaligned wrapping, no horizontal scroll, touch targets stay ≥38px. */
@media (max-width: 560px) {
  .site-header .container { flex-wrap: wrap; gap: 8px; }
  .brand { flex: 1 1 auto; }
  .topnav { flex: 0 0 auto; }
  .brand-logo { height: 30px; }
}
@media (max-width: 360px) {
  .site-header .container { justify-content: center; }
  .brand { flex: 1 1 100%; }
  .topnav { width: 100%; justify-content: center; }
}