/* Shared documentation theme for every product on docs.ianlan.dev.
   Three-column docs layout: sidebar nav, prose, on-this-page rail.
   Hand-authored; shared by every product. The generator writes only each
   product's search-index.json, into site/docs/<product>/assets/. */

:root {
  --bg: #ffffff;
  --bg-soft: #f7f8fa;
  --bg-code: #f5f6f8;
  --border: #e4e7ec;
  --text: #1a1d23;
  --text-soft: #545a66;
  --text-faint: #8b919e;
  --accent: #2ea043;
  --accent-soft: rgba(46, 160, 67, 0.1);
  --accent-line: rgba(46, 160, 67, 0.35);
  --amber: #b45309;
  --red: #b42318;
  --blue: #1f6feb;
  --radius: 8px;
  --sidebar-w: 274px;
  --toc-w: 220px;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
}

html[data-theme="dark"] {
  --bg: #0d1117;
  --bg-soft: #131920;
  --bg-code: #161b22;
  --border: #232b36;
  --text: #e6edf3;
  --text-soft: #9aa4b2;
  --text-faint: #6e7681;
  --accent: #3fb950;
  --accent-soft: rgba(63, 185, 80, 0.12);
  --accent-line: rgba(63, 185, 80, 0.4);
  --amber: #d29922;
  --red: #f85149;
  --blue: #58a6ff;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: #fff; padding: 10px 16px; border-radius: 0 0 var(--radius) 0;
}
.skip:focus { left: 0; }

/* ------------------------------------------------------------------ topbar */

.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 18px;
  height: 60px; padding: 0 22px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: 9px; font-weight: 650; color: var(--text); font-size: 0.97rem; }
.brand:hover { text-decoration: none; }
.brand-sub {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--accent); border: 1px solid var(--accent-line);
  padding: 2px 7px; border-radius: 999px; background: var(--accent-soft);
}
.menu-toggle {
  display: none; background: none; border: 1px solid var(--border); color: var(--text);
  border-radius: 6px; width: 34px; height: 34px; font-size: 1rem; cursor: pointer;
}
.topbar-links { margin-left: auto; display: flex; align-items: center; gap: 18px; font-size: 0.87rem; }
.topbar-links a { color: var(--text-soft); }
.topbar-links a:hover { color: var(--text); text-decoration: none; }
.theme-toggle {
  background: none; border: 1px solid var(--border); color: var(--text-soft);
  border-radius: 6px; width: 32px; height: 32px; cursor: pointer; font-size: 0.95rem;
}
.theme-toggle:hover { color: var(--text); border-color: var(--accent-line); }

/* ------------------------------------------------------------------ search */

.search-wrap { position: relative; flex: 1; max-width: 440px; }
#search {
  width: 100%; height: 36px; padding: 0 13px;
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text); font-size: 0.87rem; font-family: inherit;
}
#search:focus { outline: none; border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-soft); }
#search-results {
  position: absolute; top: 44px; left: 0; right: 0; max-height: 62vh; overflow-y: auto;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.22); padding: 6px; z-index: 50;
}
#search-results a { display: block; padding: 9px 11px; border-radius: 6px; color: var(--text); }
#search-results a:hover, #search-results a.sel { background: var(--bg-soft); text-decoration: none; }
#search-results .r-group { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-faint); }
#search-results .r-title { font-weight: 600; font-size: 0.9rem; }
#search-results .r-snip { font-size: 0.8rem; color: var(--text-soft); }
#search-results .empty { padding: 14px; color: var(--text-soft); font-size: 0.87rem; }

/* ------------------------------------------------------------------ layout */

.layout { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--toc-w); gap: 0; }

.sidebar {
  position: sticky; top: 60px; align-self: start;
  height: calc(100vh - 60px); overflow-y: auto;
  padding: 26px 18px 60px; border-right: 1px solid var(--border);
}
.nav-group { margin-bottom: 22px; }
.nav-group-title {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--text-faint); font-weight: 700; margin: 0 0 8px 10px;
}
.sidebar ul { list-style: none; margin: 0; padding: 0; }
.sidebar li a {
  display: block; padding: 6px 10px; border-radius: 6px;
  color: var(--text-soft); font-size: 0.875rem; border-left: 2px solid transparent;
}
.sidebar li a:hover { background: var(--bg-soft); color: var(--text); text-decoration: none; }
.sidebar li a.active {
  color: var(--accent); background: var(--accent-soft);
  border-left-color: var(--accent); font-weight: 600;
}

.content { padding: 40px 52px 96px; min-width: 0; }

.toc {
  position: sticky; top: 60px; align-self: start;
  height: calc(100vh - 60px); overflow-y: auto; padding: 40px 20px 60px;
}
.toc-title {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--text-faint); font-weight: 700; margin-bottom: 10px;
}
.toc ul { list-style: none; margin: 0; padding: 0; }
.toc li a {
  display: block; padding: 4px 0 4px 11px; border-left: 2px solid var(--border);
  color: var(--text-soft); font-size: 0.82rem; line-height: 1.45;
}
.toc li.d3 a { padding-left: 22px; font-size: 0.79rem; }
.toc li a:hover { color: var(--text); text-decoration: none; }
.toc li a.active { color: var(--accent); border-left-color: var(--accent); }

/* ------------------------------------------------------------------- prose */

.prose { max-width: 780px; }
.prose h1 { font-size: 2.1rem; line-height: 1.22; margin: 0 0 18px; letter-spacing: -0.02em; }
.prose h2 {
  font-size: 1.42rem; margin: 46px 0 14px; padding-top: 20px;
  border-top: 1px solid var(--border); letter-spacing: -0.01em;
}
.prose h3 { font-size: 1.1rem; margin: 30px 0 10px; }
.prose h4 { font-size: 0.97rem; margin: 22px 0 8px; color: var(--text-soft); }
.prose p { margin: 0 0 15px; }
.prose ul, .prose ol { margin: 0 0 15px; padding-left: 24px; }
.prose li { margin: 5px 0; }
.prose li > ul, .prose li > ol { margin: 5px 0; }
.prose strong { font-weight: 650; color: var(--text); }
.prose hr { border: none; border-top: 1px solid var(--border); margin: 34px 0; }
.prose img { max-width: 100%; height: auto; border: 1px solid var(--border); border-radius: var(--radius); }

.anchor {
  margin-left: 9px; color: var(--text-faint); opacity: 0;
  font-weight: 400; text-decoration: none;
}
h2:hover .anchor, h3:hover .anchor { opacity: 1; }

.prose :not(.code-block) > code {
  background: var(--bg-code); border: 1px solid var(--border);
  padding: 1px 6px; border-radius: 5px;
  font-family: var(--mono); font-size: 0.855em;
}

.code-block { position: relative; margin: 0 0 17px; }
.code-block pre {
  margin: 0; padding: 15px 17px; overflow-x: auto;
  background: var(--bg-code); border: 1px solid var(--border); border-radius: var(--radius);
}
.code-block code { font-family: var(--mono); font-size: 0.845rem; line-height: 1.6; color: var(--text); }
.code-block[data-lang]::before {
  content: attr(data-lang);
  position: absolute; top: 9px; right: 62px;
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint);
}
.code-block .copy {
  position: absolute; top: 7px; right: 8px; z-index: 2;
  background: var(--bg); border: 1px solid var(--border); color: var(--text-soft);
  border-radius: 5px; padding: 3px 9px; font-size: 0.72rem; cursor: pointer; opacity: 0;
  transition: opacity 0.12s;
}
.code-block:hover .copy { opacity: 1; }
.code-block .copy:hover { color: var(--text); border-color: var(--accent-line); }

.prose table {
  width: 100%; border-collapse: collapse; margin: 0 0 18px;
  font-size: 0.875rem; display: block; overflow-x: auto;
}
.prose th, .prose td { border: 1px solid var(--border); padding: 9px 12px; text-align: left; vertical-align: top; }
.prose th { background: var(--bg-soft); font-weight: 650; }

blockquote {
  margin: 0 0 17px; padding: 2px 0 2px 16px;
  border-left: 3px solid var(--border); color: var(--text-soft);
}

.callout {
  margin: 0 0 17px; padding: 13px 16px;
  border: 1px solid var(--border); border-left-width: 3px; border-radius: var(--radius);
  background: var(--bg-soft);
}
.callout p:last-child { margin-bottom: 0; }
.callout-title { font-weight: 650; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 5px; }
.callout.note { border-left-color: var(--blue); }
.callout.note .callout-title { color: var(--blue); }
.callout.tip { border-left-color: var(--accent); }
.callout.tip .callout-title { color: var(--accent); }
.callout.warning { border-left-color: var(--amber); }
.callout.warning .callout-title { color: var(--amber); }
.callout.important { border-left-color: var(--red); }
.callout.important .callout-title { color: var(--red); }

kbd {
  background: var(--bg-soft); border: 1px solid var(--border); border-bottom-width: 2px;
  border-radius: 5px; padding: 1px 6px; font-family: var(--mono); font-size: 0.8em;
}

/* --------------------------------------------------------------- prev/next */

.prev-next {
  display: flex; justify-content: space-between; gap: 16px;
  margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--border);
  max-width: 780px;
}
.pn {
  display: flex; flex-direction: column; gap: 3px;
  padding: 13px 17px; border: 1px solid var(--border); border-radius: var(--radius);
  min-width: 190px; color: var(--text);
}
.pn:hover { border-color: var(--accent-line); text-decoration: none; }
.pn span { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-faint); }
.pn.next { text-align: right; }

/* ------------------------------------------------------------- responsive */

@media (max-width: 1200px) {
  .layout { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
  .toc { display: none; }
}
@media (max-width: 860px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .menu-toggle { display: block; }
  .sidebar {
    display: none; position: fixed; top: 60px; left: 0; bottom: 0; width: 280px;
    background: var(--bg); z-index: 35;
  }
  .sidebar.open { display: block; }
  .content { padding: 28px 20px 72px; }
  .topbar { gap: 12px; padding: 0 14px; }
  .topbar-links a { display: none; }
}

/* ---------------------------------------------------------- product switch */
/* A <details> disclosure, not a row of links: the row worked at two products
   and overflows the topbar well before nine. Generated from products.json, so
   a product added later appears here with no CSS change. */

.product-switch { position: relative; }

.product-switch summary {
  list-style: none;
  cursor: pointer;
  display: flex; align-items: center; gap: 7px;
  padding: 5px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-soft);
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
}
.product-switch summary::-webkit-details-marker { display: none; }
.product-switch summary::after {
  content: "";
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid var(--text-faint);
}
.product-switch summary:hover { border-color: var(--accent-line); }

.product-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
  min-width: 300px; max-height: 70vh; overflow-y: auto;
  padding: 6px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
}
.product-menu a {
  display: block;
  padding: 8px 11px;
  border-radius: 5px;
  color: var(--text);
  font-size: 0.87rem;
}
.product-menu a:hover { background: var(--bg-soft); text-decoration: none; }
.product-menu a.active { background: var(--accent-soft); }
.product-menu a span { display: block; font-weight: 600; }
.product-menu a em {
  display: block;
  font-style: normal;
  color: var(--text-faint);
  font-size: 0.78rem;
  line-height: 1.45;
  margin-top: 1px;
}

@media (max-width: 900px) {
  .product-switch { display: none; }
}