/*
  shadcn/ui visual language (zinc theme) in plain CSS: neutral palette, 1px borders,
  0.5rem radius, no gradients, no decorative shadows. Font: Inter (SIL OFL 1.1),
  self-hosted from assets/fonts.
*/
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
}

:root {
  --background: 0 0% 100%;
  --foreground: 240 10% 3.9%;
  --card: 0 0% 100%;
  --muted: 240 4.8% 95.9%;
  --muted-foreground: 240 3.8% 46.1%;
  --border: 240 5.9% 90%;
  --input: 240 5.9% 90%;
  --primary: 240 5.9% 10%;
  --primary-foreground: 0 0% 98%;
  --secondary: 240 4.8% 95.9%;
  --secondary-foreground: 240 5.9% 10%;
  --accent: 240 4.8% 95.9%;
  --accent-foreground: 240 5.9% 10%;
  --destructive: 0 72% 51%;
  --destructive-foreground: 0 0% 98%;
  --ring: 240 5.9% 10%;
  --radius: 0.5rem;
  --code-bg: 240 10% 3.9%;
  --code-fg: 0 0% 96%;
  --sidebar-w: 260px;
  --toc-w: 210px;
  --header-h: 56px;
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Nirmala UI", sans-serif;
  --mono: ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, Menlo, monospace;
}
:root[data-theme="dark"] {
  --background: 240 10% 3.9%;
  --foreground: 0 0% 98%;
  --card: 240 10% 3.9%;
  --muted: 240 3.7% 15.9%;
  --muted-foreground: 240 5% 64.9%;
  --border: 240 3.7% 15.9%;
  --input: 240 3.7% 15.9%;
  --primary: 0 0% 98%;
  --primary-foreground: 240 5.9% 10%;
  --secondary: 240 3.7% 15.9%;
  --secondary-foreground: 0 0% 98%;
  --accent: 240 3.7% 15.9%;
  --accent-foreground: 0 0% 98%;
  --destructive: 0 62.8% 55%;
  --destructive-foreground: 0 0% 98%;
  --ring: 240 4.9% 83.9%;
  --code-bg: 240 5% 8%;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --background: 240 10% 3.9%; --foreground: 0 0% 98%; --card: 240 10% 3.9%;
    --muted: 240 3.7% 15.9%; --muted-foreground: 240 5% 64.9%; --border: 240 3.7% 15.9%;
    --input: 240 3.7% 15.9%; --primary: 0 0% 98%; --primary-foreground: 240 5.9% 10%;
    --secondary: 240 3.7% 15.9%; --secondary-foreground: 0 0% 98%;
    --accent: 240 3.7% 15.9%; --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 55%; --ring: 240 4.9% 83.9%; --code-bg: 240 5% 8%;
  }
}

* { box-sizing: border-box; border-color: hsl(var(--border)); }
html { scroll-padding-top: calc(var(--header-h) + 24px); }
body {
  margin: 0; background: hsl(var(--background)); color: hsl(var(--foreground));
  font: 400 15px/1.7 var(--font); font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: hsl(var(--foreground)); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: hsl(var(--muted-foreground) / .5); }
a:hover { text-decoration-color: hsl(var(--foreground)); }
img { max-width: 100%; height: auto; }
::selection { background: hsl(var(--muted-foreground) / .25); }
:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }

/* ---------- header ---------- */
.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--header-h);
  display: flex; align-items: center; gap: 8px; padding: 0 24px;
  background: hsl(var(--background)); border-bottom: 1px solid hsl(var(--border));
}
.brand { font-weight: 600; font-size: 15px; color: hsl(var(--foreground)); text-decoration: none; margin-right: 16px; }
.topbar .spacer { flex: 1; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px;
  border: 1px solid hsl(var(--input)); border-radius: calc(var(--radius) - 2px);
  background: hsl(var(--background)); color: hsl(var(--foreground)); font: 500 14px/1 var(--font);
  padding: 0 12px; cursor: pointer; text-decoration: none;
}
.btn:hover { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
.btn.icon { width: 36px; padding: 0; }
.btn svg { width: 16px; height: 16px; flex: none; }
.search-btn { color: hsl(var(--muted-foreground)); font-weight: 400; min-width: 240px; justify-content: flex-start; background: hsl(var(--muted) / .5); }
.search-btn kbd { margin-left: auto; }
.menu-btn { display: none; }
.top-link { display: none; }

kbd {
  font: 500 11px/1 var(--mono); border: 1px solid hsl(var(--border)); border-radius: 4px;
  padding: 3px 5px; background: hsl(var(--muted)); color: hsl(var(--muted-foreground));
}

/* ---------- layout ---------- */
.layout { display: flex; padding-top: var(--header-h); min-height: 100vh; max-width: 1400px; margin: 0 auto; }
.sidebar {
  position: sticky; top: var(--header-h); align-self: flex-start; width: var(--sidebar-w); flex: none;
  height: calc(100vh - var(--header-h)); overflow-y: auto; padding: 24px 16px 40px 24px;
}
.sidebar h6 { margin: 20px 0 6px; font-size: 14px; font-weight: 600; color: hsl(var(--foreground)); }
.sidebar h6:first-child { margin-top: 0; }
.sidebar a {
  display: block; padding: 4px 0; font-size: 14px; color: hsl(var(--muted-foreground));
  text-decoration: none; border-radius: 4px;
}
.sidebar a:hover { color: hsl(var(--foreground)); }
.sidebar a.active { color: hsl(var(--foreground)); font-weight: 500; }
.main-col { flex: 1; min-width: 0; display: flex; justify-content: center; gap: 40px; padding: 0 24px; }
.content { width: 100%; max-width: 760px; padding: 40px 0 96px; min-width: 0; }
.toc {
  position: sticky; top: calc(var(--header-h) + 32px); align-self: flex-start; width: var(--toc-w); flex: none;
  max-height: calc(100vh - var(--header-h) - 64px); overflow-y: auto; padding: 0; font-size: 13px;
}
.toc h6 { margin: 0 0 10px; font-size: 13px; font-weight: 500; color: hsl(var(--foreground)); }
.toc a { display: block; padding: 3px 0; color: hsl(var(--muted-foreground)); text-decoration: none; }
.toc a.h3 { padding-left: 14px; }
.toc a:hover { color: hsl(var(--foreground)); }
.toc a.active { color: hsl(var(--foreground)); font-weight: 500; }

/* ---------- typography ---------- */
.content h1 { font-size: 2.25rem; line-height: 1.15; font-weight: 700; letter-spacing: -0.025em; margin: 0 0 8px; }
.content h2 {
  font-size: 1.5rem; line-height: 1.3; font-weight: 600; letter-spacing: -0.02em;
  margin: 48px 0 16px; padding-bottom: 8px; border-bottom: 1px solid hsl(var(--border));
}
.content h3 { font-size: 1.2rem; line-height: 1.4; font-weight: 600; letter-spacing: -0.015em; margin: 32px 0 8px; }
.content h4 { font-size: 1rem; font-weight: 600; margin: 24px 0 4px; }
.content p { margin: 14px 0; }
.content ul, .content ol { padding-left: 1.5rem; margin: 14px 0; }
.content li { margin: 6px 0; }
.content strong { font-weight: 600; }
.lead { font-size: 1.15rem; line-height: 1.6; color: hsl(var(--muted-foreground)); margin: 8px 0 24px; }
.eyebrow { font-size: 13px; font-weight: 500; color: hsl(var(--muted-foreground)); margin-bottom: 8px; }
.anchor { margin-left: 8px; opacity: 0; color: hsl(var(--muted-foreground)); font-weight: 400; text-decoration: none; }
h2:hover .anchor, h3:hover .anchor { opacity: 1; }
hr { border: 0; border-top: 1px solid hsl(var(--border)); margin: 32px 0; }
blockquote { margin: 0; }

code {
  font: 500 .85em var(--mono); background: hsl(var(--muted)); padding: .15em .35em; border-radius: 4px;
}
pre {
  position: relative; background: hsl(var(--code-bg)); color: hsl(var(--code-fg)); border: 1px solid hsl(var(--border));
  border-radius: var(--radius); padding: 16px; overflow-x: auto; margin: 16px 0; font: 13px/1.65 var(--mono);
}
pre code { background: none; padding: 0; border-radius: 0; font: inherit; color: inherit; }
.copy-btn {
  position: absolute; top: 8px; right: 8px; height: 28px; padding: 0 10px; border-radius: 6px;
  border: 1px solid hsl(0 0% 100% / .15); background: hsl(0 0% 100% / .06); color: hsl(0 0% 85%);
  font: 500 12px/1 var(--font); cursor: pointer; opacity: 0;
}
pre:hover .copy-btn, .copy-btn:focus-visible { opacity: 1; }
.copy-btn:hover { background: hsl(0 0% 100% / .14); }

/* ---------- table ---------- */
.table-wrap { overflow-x: auto; margin: 20px 0; border: 1px solid hsl(var(--border)); border-radius: var(--radius); }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid hsl(var(--border)); vertical-align: top; }
th { font-weight: 500; color: hsl(var(--muted-foreground)); white-space: nowrap; background: hsl(var(--muted) / .4); }
tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: hsl(var(--muted) / .5); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.compact th, table.compact td { padding: 7px 12px; font-size: 13px; }
td:first-child strong { font-weight: 600; }
.te { font-family: "Noto Sans Telugu", "Nirmala UI", "Gautami", var(--font); }

/* ---------- components ---------- */
.callout { border: 1px solid hsl(var(--border)); border-radius: var(--radius); padding: 14px 16px; margin: 20px 0; font-size: 14px; line-height: 1.65; }
.callout > :first-child { margin-top: 0; } .callout > :last-child { margin-bottom: 0; }
.callout .title { display: block; font-weight: 500; font-size: 14px; margin-bottom: 4px; letter-spacing: -0.01em; }
.callout.bad { border-color: hsl(var(--destructive) / .5); }
.callout.bad .title { color: hsl(var(--destructive)); }
.callout.warn, .callout.note, .callout.good { background: hsl(var(--muted) / .35); }

.badge {
  display: inline-flex; align-items: center; border-radius: 6px; padding: 1px 8px; font-size: 12px; font-weight: 600;
  line-height: 1.6; border: 1px solid hsl(var(--border)); white-space: nowrap; vertical-align: 1px;
}
.badge.good, .badge.note { background: transparent; color: hsl(var(--foreground)); }
.badge.warn { background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); border-color: transparent; }
.badge.bad { background: hsl(var(--destructive)); color: hsl(var(--destructive-foreground)); border-color: transparent; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin: 20px 0; }
.card {
  border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) + 4px); padding: 16px 18px;
  background: hsl(var(--card)); color: inherit; display: block; text-decoration: none;
}
a.card:hover { background: hsl(var(--muted) / .5); }
.card h4 { margin: 0 0 4px; font-size: 14px; font-weight: 600; }
.card p { margin: 0; color: hsl(var(--muted-foreground)); font-size: 13.5px; line-height: 1.55; }
.stat .l { color: hsl(var(--muted-foreground)); font-size: 13px; font-weight: 500; order: -1; }
.stat { display: flex; flex-direction: column; }
.stat .v { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.025em; line-height: 1.2; margin-top: 4px; }
.stat .d { font-size: 12.5px; margin-top: 4px; color: hsl(var(--muted-foreground)); }

figure.fig { margin: 24px 0; border: 1px solid hsl(var(--border)); border-radius: var(--radius); padding: 12px; background: #fff; }
figure.fig img { display: block; margin: 0 auto; }
figure.fig figcaption { font-size: 13px; color: #52525b; margin-top: 10px; line-height: 1.55; }
figure.fig figcaption b { color: #18181b; font-weight: 600; }
.fig-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; margin: 20px 0; }
.fig-grid figure.fig { margin: 0; }

.flow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 20px 0; }
.flow .node {
  border: 1px solid hsl(var(--border)); background: hsl(var(--card)); border-radius: calc(var(--radius) - 2px);
  padding: 8px 12px; font-size: 13px; font-weight: 500; text-align: center; line-height: 1.35;
}
.flow .node small { display: block; font-weight: 400; color: hsl(var(--muted-foreground)); font-size: 12px; }
.flow .node.opt { border-style: dashed; }
.flow .arrow { color: hsl(var(--muted-foreground)); font-size: 14px; }

pre.tree { line-height: 1.7; }

details { border: 1px solid hsl(var(--border)); border-radius: var(--radius); padding: 10px 16px; margin: 12px 0; }
details > summary { cursor: pointer; font-weight: 500; font-size: 14px; }
details[open] > summary { margin-bottom: 8px; }

.timeline { list-style: none; padding: 0; margin: 20px 0; }
.timeline > li { margin: 0; padding: 16px 0 16px 16px; border-left: 2px solid hsl(var(--border)); }
.timeline h4 { margin: 0 0 6px; font-size: 15px; }
.timeline p { margin: 6px 0; }

.pager { display: flex; gap: 12px; margin-top: 56px; padding-top: 24px; border-top: 1px solid hsl(var(--border)); }
.pager a {
  flex: 1; border: 1px solid hsl(var(--border)); border-radius: var(--radius); padding: 10px 16px;
  color: hsl(var(--foreground)); display: block; min-width: 0; text-decoration: none; font-weight: 500; font-size: 14px;
}
.pager a:hover { background: hsl(var(--accent)); }
.pager small { display: block; color: hsl(var(--muted-foreground)); font-size: 12px; font-weight: 400; }
.pager .next { text-align: right; }
.pager .gap { flex: 1; }
.footer { margin-top: 32px; color: hsl(var(--muted-foreground)); font-size: 13px; }

/* ---------- command dialog (search) ---------- */
.search-overlay {
  position: fixed; inset: 0; z-index: 100; background: hsl(0 0% 0% / .6); display: none;
  align-items: flex-start; justify-content: center; padding: 14vh 16px 16px;
}
.search-overlay.open { display: flex; }
.search-box {
  width: 100%; max-width: 560px; background: hsl(var(--background)); border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) + 2px); overflow: hidden;
}
.search-head { display: flex; align-items: center; gap: 8px; padding: 0 14px; border-bottom: 1px solid hsl(var(--border)); }
.search-head svg { width: 16px; height: 16px; color: hsl(var(--muted-foreground)); flex: none; }
.search-head input {
  flex: 1; border: 0; outline: 0; padding: 14px 0; font: 400 15px var(--font); background: transparent; color: hsl(var(--foreground));
}
.search-results { max-height: 50vh; overflow-y: auto; padding: 6px; }
.search-results a {
  display: block; padding: 8px 10px; border-radius: 6px; color: hsl(var(--foreground)); text-decoration: none;
}
.search-results a:hover, .search-results a.sel { background: hsl(var(--accent)); }
.search-results .rt { font-weight: 500; font-size: 14px; }
.search-results .rp { color: hsl(var(--muted-foreground)); font-size: 12px; margin-left: 8px; font-weight: 400; }
.search-results .rs { color: hsl(var(--muted-foreground)); font-size: 12.5px; margin-top: 2px; line-height: 1.45; }
.search-results mark { background: hsl(var(--muted-foreground) / .25); color: inherit; border-radius: 2px; padding: 0 1px; }
.search-empty { padding: 28px 14px; color: hsl(var(--muted-foreground)); font-size: 14px; text-align: center; }
.search-foot { padding: 8px 14px; font-size: 12px; color: hsl(var(--muted-foreground)); border-top: 1px solid hsl(var(--border)); }

/* ---------- responsive ---------- */
@media (min-width: 1000px) { .top-link { display: inline-flex; } }
@media (max-width: 1180px) { .toc { display: none; } }
@media (max-width: 880px) {
  .menu-btn { display: inline-flex; }
  .topbar { padding: 0 16px; }
  .sidebar {
    position: fixed; z-index: 60; left: 0; top: var(--header-h); bottom: 0; height: auto; width: min(82vw, 300px);
    background: hsl(var(--background)); border-right: 1px solid hsl(var(--border)); transform: translateX(-100%);
  }
  body.nav-open .sidebar { transform: none; }
  body.nav-open::after { content: ""; position: fixed; inset: var(--header-h) 0 0 0; background: hsl(0 0% 0% / .5); z-index: 55; }
  .main-col { padding: 0 16px; }
  .search-btn { min-width: 0; width: 36px; padding: 0; justify-content: center; }
  .search-btn span, .search-btn kbd { display: none; }
  .content h1 { font-size: 1.8rem; }
}
@media print {
  .topbar, .sidebar, .toc, .pager, .copy-btn { display: none !important; }
  .layout { padding-top: 0; } .content { max-width: none; }
}