/* eXLib docs — v2 identity. Dark only. No build step. */

:root {
  --bg: #101012;
  --surface: #17181c;
  --card: #1d1f24;
  --elevated: #262930;
  --border: #2f333b;
  --text: #e9e7e2;
  --dim: #a3a7b0;
  --faint: #6b707b;
  --accent: #ff9800;
  --accent-dim: #ff98002a;
  --accent-border: #ff980055;
  --success: #4ec9b0;
  --error: #f48771;
  --warn: #e0a13d;

  --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --content-width: 840px;
  --nav-width: 268px;
  --toc-width: 220px;
  --topbar-h: 60px;
}

* { box-sizing: border-box; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

html { color-scheme: dark; }

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

.noscript-notice {
  margin: 0; padding: 12px 20px; color: var(--text); background: var(--warn);
  font: 600 13px/1.4 var(--font-body); text-align: center;
}

/* Width/height attributes reserve space before screenshots decode. Once an
   image is constrained by the article width, its painted height must follow
   the intrinsic aspect ratio instead of retaining the authored pixel height. */
img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

::selection { background: var(--accent-dim); color: var(--text); }

/* thin styled scrollbars for panels */
.scroll-panel {
  scrollbar-width: thin;
  scrollbar-color: #ffffff22 transparent;
}
.scroll-panel::-webkit-scrollbar { width: 8px; }
.scroll-panel::-webkit-scrollbar-track { background: transparent; }
.scroll-panel::-webkit-scrollbar-thumb {
  background: #ffffff1c; border-radius: 8px; border: 2px solid transparent; background-clip: padding-box;
}
.scroll-panel:hover::-webkit-scrollbar-thumb { background: #ffffff30; background-clip: padding-box; }

/* ---------------------------------------------------------------- */
/* Shared top bar                                                    */
/* ---------------------------------------------------------------- */

.topbar {
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 28px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 30;
}
.topbar .brand { display: flex; align-items: center; gap: 12px; }
/* The shipped combined lockup (owner-specified), copied into the site so it stays
   self-contained. Its fills are amber (#f19d38 / #8c5b21) plus one pink accent on
   transparent — the same family as --accent, and legible on this surface as-is.
   The site is dark-only, so no theme handling is needed. Height drives it; width
   follows the intrinsic 2.1:1 aspect. */
.topbar .brand .logo { height: 32px; width: auto; display: block; }
.topbar .brand .ver {
  font-family: var(--font-mono); font-size: 10.5px; color: var(--dim);
  background: var(--elevated); border: 1px solid var(--border); border-radius: 5px; padding: 2px 7px;
}
.topbar .links { display: flex; align-items: center; gap: 22px; }
.topbar .links a { font-size: 13.5px; color: var(--dim); }
.topbar .links a:hover { color: var(--text); }
.topbar .links a.on { color: var(--accent); font-weight: 600; }

.topbar .search-trigger {
  display: flex; align-items: center; gap: 8px;
  background: var(--elevated); border: 1px solid var(--border); border-radius: 8px;
  padding: 7px 10px; min-width: 200px;
  color: var(--faint); font-size: 13px;
}
.topbar .search-trigger kbd {
  margin-left: auto;
  font-family: var(--font-mono); font-size: 10.5px; color: var(--faint);
  background: var(--surface); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px;
}

/* ---------------------------------------------------------------- */
/* Landing page                                                      */
/* ---------------------------------------------------------------- */

.hero {
  position: relative;
  padding: 96px 28px 72px;
  background:
    radial-gradient(640px 420px at 82% -10%, #ff980022, transparent 60%),
    radial-gradient(520px 380px at 10% 0%, #ff980014, transparent 60%),
    var(--bg);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.hero-inner { max-width: 980px; margin: 0 auto; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--accent-border); background: var(--accent-dim);
  border-radius: 100px; padding: 6px 13px;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.6px; color: var(--accent);
  margin-bottom: 22px;
}
.hero h1 {
  font-family: var(--font-display); font-weight: 600; letter-spacing: -1.4px;
  font-size: clamp(32px, 5vw, 52px); line-height: 1.08; margin: 0 0 18px; max-width: 820px;
}
.hero h1 .accent-word { color: var(--accent); }
.hero .lead {
  font-size: 17px; line-height: 1.6; color: var(--dim); max-width: 620px; margin: 0 0 34px;
}
.hero .cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 56px; }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  border-radius: 9px; padding: 11px 18px; font-size: 13.5px; font-weight: 600;
  border: 1px solid transparent; cursor: pointer;
}
.btn-primary { background: var(--accent); color: #1a1206; }
.btn-primary:hover { background: #ffa726; }
.btn-secondary { background: var(--card); border-color: var(--border); color: var(--text); }
.btn-secondary:hover { background: var(--elevated); }

.stat-strip {
  display: flex; flex-wrap: wrap; gap: 40px;
  padding-top: 28px; border-top: 1px solid var(--border);
}
.stat { display: flex; flex-direction: column; gap: 4px; }
.stat .v { font-family: var(--font-display); font-size: 28px; font-weight: 600; letter-spacing: -0.5px; color: var(--text); }
.stat .v .unit { color: var(--accent); }
.stat .l { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.6px; color: var(--faint); text-transform: uppercase; }

.section { padding: 72px 28px; max-width: 1180px; margin: 0 auto; }
.section-head { margin-bottom: 34px; max-width: 640px; }
.kicker {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 1.2px; color: var(--accent);
  text-transform: uppercase; margin-bottom: 10px; display: block;
}
.section-head h2 {
  font-family: var(--font-display); font-size: 30px; font-weight: 600; letter-spacing: -0.6px; margin: 0 0 10px;
}
.section-head p { color: var(--dim); font-size: 15px; line-height: 1.6; margin: 0; }

.card-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px;
}
.feature-card {
  display: flex; flex-direction: column; gap: 12px;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  padding: 22px; transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.feature-card:hover {
  border-color: var(--accent-border); background: var(--elevated); transform: translateY(-2px);
}
.feature-card .icon {
  width: 34px; height: 34px; border-radius: 8px;
  background: var(--accent-dim); border: 1px solid var(--accent-border);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
}
.feature-card .icon .iglyph { width: 19px; height: 19px; vertical-align: 0; }

/* ---------------------------------------------------------------- */
/* Panel glyphs                                                      */
/* ---------------------------------------------------------------- */

/* The extension's own Phosphor SVGs, copied into docs-site/icons/ and drawn as
   a mask so they take the surrounding text colour (the files are
   fill="currentColor", which an <img> would ignore). The mask-image URL lives
   INLINE on each span, not in a custom property: url() passed through var()
   resolves against the stylesheet's base (css/), which 404'd every glyph and
   masked them out entirely (live defect, 2026-08-10). Inline style resolves
   against the document. */
.iglyph {
  display: inline-block; width: 17px; height: 17px; vertical-align: -3.5px;
  background-color: currentColor;
  -webkit-mask-position: center; -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat;
  mask-position: center; mask-size: contain; mask-repeat: no-repeat;
}
.doc-content td .iglyph { color: var(--accent); }
.doc-content td:has(> .iglyph) { width: 1%; text-align: center; }
.feature-card h3 { font-family: var(--font-display); font-size: 16px; font-weight: 600; margin: 0; letter-spacing: -0.2px; }
.feature-card p { font-size: 13.5px; line-height: 1.55; color: var(--dim); margin: 0; flex: 1; }
.feature-card .go { font-size: 12.5px; color: var(--accent); font-weight: 600; }

.footer {
  border-top: 1px solid var(--border);
  padding: 28px; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  flex-wrap: wrap; color: var(--faint); font-size: 12.5px;
}
.footer a { color: var(--dim); }
.footer a:hover { color: var(--text); }

/* ---------------------------------------------------------------- */
/* Docs reader (three-pane)                                          */
/* ---------------------------------------------------------------- */

.doc-shell { display: flex; min-height: calc(100vh - var(--topbar-h)); }

.doc-nav {
  width: var(--nav-width); flex: none;
  background: var(--surface); border-right: 1px solid var(--border);
  padding: 20px 16px 40px;
  position: sticky; top: var(--topbar-h); height: calc(100vh - var(--topbar-h)); overflow-y: auto;
}
.doc-nav .search-box {
  display: flex; align-items: center; gap: 8px;
  background: var(--elevated); border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 10px; margin-bottom: 16px;
}
.doc-nav .search-box input {
  border: none; background: none; outline: none; width: 100%;
  font-family: var(--font-body); font-size: 13px; color: var(--text);
}
.doc-nav .search-box:focus-within { border-color: var(--accent); }
.doc-nav .search-box input::placeholder { color: var(--faint); }
.doc-nav .search-box .glyph { color: var(--faint); font-size: 12px; }

.nav-section { margin-bottom: 6px; }
.nav-section-title {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--faint); padding: 14px 10px 6px;
}
.nav-page {
  display: block; border-radius: 7px; padding: 7px 10px; margin: 1px 0;
  font-size: 13.5px; color: var(--dim);
}
.nav-page:hover { background: #ffffff08; color: var(--text); }
.nav-page.on {
  background: var(--accent-dim); color: var(--text); font-weight: 600;
  box-shadow: inset 2px 0 0 var(--accent);
}
.nav-page.missing { color: var(--faint); font-style: italic; }
.nav-empty { color: var(--faint); font-size: 13px; padding: 8px 10px; }

.doc-article { flex: 1; min-width: 0; padding: 48px 56px 96px; max-width: calc(var(--content-width) + 112px); }
.doc-breadcrumb {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 12px; color: var(--faint); margin-bottom: 18px;
}
.doc-breadcrumb b { color: var(--accent); font-weight: 500; }

.mobile-page-picker { display: none; }

.doc-content { max-width: var(--content-width); }
.doc-content h1 {
  font-family: var(--font-display); font-size: 36px; font-weight: 600; letter-spacing: -0.8px;
  margin: 0 0 20px;
}
.doc-content h2 {
  font-family: var(--font-display); font-size: 21px; font-weight: 600; letter-spacing: -0.2px;
  color: var(--text); margin: 38px 0 12px; padding-top: 24px; border-top: 1px solid var(--border);
}
.doc-content h2:first-child { padding-top: 0; border-top: none; margin-top: 0; }
.doc-content h3 { font-family: var(--font-display); font-size: 16px; font-weight: 600; margin: 24px 0 8px; }
.doc-content p { color: var(--dim); line-height: 1.7; margin: 0 0 14px; }
.doc-content > .doc-content-inner > p:first-of-type { font-size: 16.5px; color: var(--text); }
.doc-content ul, .doc-content ol {
  color: var(--dim); line-height: 1.7; margin: 0 0 16px; padding-left: 22px;
}
.doc-content li { margin-bottom: 6px; }
.doc-content li::marker { color: var(--accent); }
.doc-content a { color: var(--accent); border-bottom: 1px solid var(--accent-border); }
.doc-content a:hover { border-color: var(--accent); }
.doc-content strong { color: var(--text); font-weight: 600; }
.doc-content code {
  font-family: var(--font-mono); font-size: 0.87em; color: var(--accent);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 5px; padding: 1.5px 6px;
}
.doc-content pre {
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 16px 18px; overflow-x: auto; margin: 0 0 18px;
}
.doc-content pre code {
  background: none; border: none; padding: 0; font-size: 13px; line-height: 1.65; color: var(--text);
}
.doc-content hr { border: none; border-top: 1px solid var(--border); margin: 28px 0; }
.doc-content table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 13.5px; display: block; overflow-x: auto; }
.doc-content th {
  text-align: left; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.6px;
  color: var(--faint); font-weight: 500; text-transform: uppercase;
  padding: 8px 12px; border-bottom: 1px solid var(--border); white-space: nowrap;
}
.doc-content td { padding: 9px 12px; border-bottom: 1px solid var(--border); vertical-align: top; color: var(--dim); }
.doc-content td:first-child { color: var(--text); }
.doc-content blockquote {
  border-left: 3px solid var(--accent); border-radius: 2px;
  padding: 4px 0 4px 16px; margin: 0 0 16px; color: var(--dim); font-size: 15px;
}

/* screenshot figures */
.doc-content figure {
  margin: 0 0 22px; padding: 0;
}
.doc-content figure img {
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
}
.doc-content figcaption {
  font-size: 12.5px; color: var(--faint); margin-top: 8px; text-align: center;
}

/* placeholder standing in for a screenshot that hasn't been captured yet —
   deliberately not a broken <img>, and deliberately still carrying its caption */
.shot-pending {
  border: 1px dashed var(--border); border-radius: 10px; background: var(--surface);
  padding: 26px 22px; margin: 0 0 22px; text-align: center;
}
.shot-pending .label {
  display: inline-block; font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint);
  border: 1px solid var(--border); border-radius: 999px; padding: 4px 10px;
  background: var(--card);
}
.shot-pending p {
  font-size: 12.5px; color: var(--faint); margin: 10px 0 0; text-align: center;
}

/* callout blocks: tip / note / warning */
.callout {
  border-radius: 10px; border: 1px solid var(--border); background: var(--card);
  padding: 14px 16px; margin: 0 0 18px; display: flex; gap: 12px;
}
.callout .glyph {
  font-family: var(--font-mono); font-size: 13px; font-weight: 700;
  width: 22px; height: 22px; border-radius: 6px; flex: none;
  display: flex; align-items: center; justify-content: center; margin-top: 1px;
}
.callout .body { font-size: 13.5px; line-height: 1.6; color: var(--dim); }
.callout .body p:last-child { margin-bottom: 0; }
.callout-tip { border-color: #4ec9b04a; }
.callout-tip .glyph { background: #4ec9b022; color: var(--success); }
.callout-note { border-color: var(--accent-border); }
.callout-note .glyph { background: var(--accent-dim); color: var(--accent); }
.callout-warning { border-color: #e0a13d4a; }
.callout-warning .glyph { background: #e0a13d22; color: var(--warn); }

.doc-placeholder {
  border: 1px dashed var(--border); border-radius: 10px; padding: 36px 28px; text-align: center;
  color: var(--faint); font-size: 13.5px;
}
.doc-placeholder code { font-family: var(--font-mono); color: var(--dim); }

.doc-pager {
  display: flex; justify-content: space-between; gap: 16px; margin-top: 52px;
  padding-top: 24px; border-top: 1px solid var(--border);
}
.doc-pager a {
  flex: 1; max-width: 48%; display: flex; flex-direction: column; gap: 4px;
  padding: 14px 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--card);
}
.doc-pager a:hover { border-color: var(--accent-border); background: var(--elevated); }
.doc-pager a.next { text-align: right; margin-left: auto; }
.doc-pager .dir { font-family: var(--font-mono); font-size: 10.5px; color: var(--faint); letter-spacing: 0.6px; text-transform: uppercase; }
.doc-pager .title { font-size: 13.5px; font-weight: 600; color: var(--text); }

.doc-toc {
  width: var(--toc-width); flex: none;
  border-left: 1px solid var(--border);
  padding: 48px 22px;
  position: sticky; top: var(--topbar-h); height: calc(100vh - var(--topbar-h)); overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px;
}
.doc-toc .h {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 1px; color: var(--faint);
  text-transform: uppercase; margin-bottom: 4px;
}
/* One entry per line. The links are anchors — inline by default — so the list
   needs its own stacking context, or every heading runs into the next as one
   sentence. Mirrors .nav-page's states so the two lists read as one system. */
.doc-toc-links { display: flex; flex-direction: column; align-items: stretch; gap: 1px; }
.doc-toc a {
  display: block;
  font-size: 12.5px; color: var(--faint); line-height: 1.45;
  padding: 4px 8px; border-radius: 6px;
  border-left: 2px solid transparent;
  overflow-wrap: anywhere;
}
.doc-toc a.lvl3 { padding-left: 20px; font-size: 12px; }
.doc-toc a:hover { color: var(--text); background: #ffffff08; }
.doc-toc a.on { color: var(--accent); border-left-color: var(--accent); background: var(--accent-dim); }
.doc-toc-empty { color: var(--faint); font-size: 12px; }

@media (max-width: 1180px) {
  .doc-toc { display: none; }
}
@media (max-width: 860px) {
  .doc-nav { display: none; }
  .doc-article { padding: 32px 24px; }
  .topbar { padding: 0 16px; }
  .topbar .search-trigger {
    display: flex; min-width: 38px; width: 38px; height: 38px; padding: 0;
    justify-content: center;
  }
  .topbar .search-trigger > span:not(.glyph), .topbar .search-trigger kbd { display: none; }
  .mobile-page-picker {
    display: flex; flex-direction: column; gap: 6px; margin: 0 0 22px;
    font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .6px;
    color: var(--faint); text-transform: uppercase;
  }
  .mobile-page-picker select {
    width: 100%; min-height: 42px; padding: 8px 34px 8px 11px;
    color: var(--text); background: var(--elevated); border: 1px solid var(--border);
    border-radius: 8px; font: 13.5px/1.4 var(--font-body); text-transform: none;
  }
  .hero { padding: 64px 20px 48px; }
  .section { padding: 48px 20px; }
}
@media (max-width: 620px) {
  .topbar { gap: 10px; }
  .topbar .links { gap: 12px; }
  .topbar .links a:last-child { display: none; }
  .topbar .brand .ver { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  .feature-card:hover { transform: none; }
}

/* ---------------------------------------------------------------- */
/* Search overlay                                                    */
/* ---------------------------------------------------------------- */

.search-overlay {
  position: fixed; inset: 0; background: #000000a0;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 12vh; z-index: 100;
}
.search-overlay[hidden] { display: none; }
.search-panel {
  width: 100%; max-width: 560px; max-height: 60vh; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 30px 70px -20px #000000cc; overflow: hidden;
}
.search-panel .row {
  display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--border);
}
.search-panel .row:focus-within { box-shadow: inset 0 -1px 0 var(--accent); }
.search-panel .row .glyph { color: var(--accent); font-family: var(--font-mono); font-size: 14px; }
.search-panel input {
  flex: 1; border: none; background: none; outline: none;
  font-family: var(--font-body); font-size: 15px; color: var(--text);
}
.search-panel input::placeholder { color: var(--faint); }
.search-panel .esc {
  font-family: var(--font-mono); font-size: 10.5px; color: var(--faint);
  background: var(--surface); border: 1px solid var(--border); border-radius: 5px;
  padding: 2px 6px; cursor: pointer;
}
.search-panel .esc:hover { color: var(--text); border-color: var(--accent-border); }
.search-results { overflow-y: auto; padding: 8px; }
.search-result {
  display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 8px;
}
.search-result:hover, .search-result.active { background: var(--elevated); }
.search-result .t { font-size: 13.5px; font-weight: 600; color: var(--text); }
.search-result .p { font-family: var(--font-mono); font-size: 11px; color: var(--faint); }
.search-empty { padding: 24px 18px; text-align: center; color: var(--faint); font-size: 13px; }