/* Nesto docs app (loaded after site.css: shares tokens, brand and buttons). */

:root, [data-theme="dark"] { --zebra: rgba(255,255,255,.02); --overlay: rgba(4,2,3,.72); --info-fg: #7dbbff; --warn-fg: #f5b450; --tip-fg: #ff8a9c; }
[data-theme="light"] { --zebra: #faf8f8; --overlay: rgba(21,17,18,.45); --info-bd: #8fbff3; --info-fg: #1a5fae; --warn-bd: #eebd6e; --warn-fg: #8a5200; --tip-fg: #c01a35; }

body.docs { background: var(--bg); line-height: 1.75; }

/* ---- header ---------------------------------------------------------------- */
.docs-header {
  position: sticky; top: 0; z-index: 40; height: 64px; display: flex; align-items: center; gap: 14px; padding: 0 16px;
  border-bottom: 1px solid var(--border); background: rgba(8,6,6,.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
[data-theme="light"] .docs-header { background: rgba(251,250,250,.88); }
.docs-header .wordmark { font-size: 20px; }
.version { padding: 2px 8px; border: 1px solid var(--border); border-radius: 6px; font: 600 11.5px 'JetBrains Mono', monospace; color: var(--text); line-height: 1.6; }
.docs-header .header-actions { margin-left: auto; }
.search-btn {
  display: flex; align-items: center; gap: 10px; width: 240px; height: 38px; padding: 0 8px 0 12px; border: 1px solid var(--border);
  border-radius: 9px; background: var(--panel); color: var(--muted); font: 500 14px Manrope, sans-serif; cursor: pointer;
}
.search-btn:hover { border-color: var(--muted); }
.search-btn kbd, .kbd { margin-left: auto; padding: 1px 6px; border: 1px solid var(--border); border-radius: 5px; background: var(--panel-2); font: 600 11.5px 'JetBrains Mono', monospace; color: var(--text); line-height: 1.5; }
.search-icon-btn, .drawer-btn { display: none; width: 44px; height: 44px; color: var(--text-strong); }
.drawer-btn { margin-left: -8px; }

/* ---- layout ----------------------------------------------------------------- */
.docs-shell { display: flex; align-items: flex-start; }
.docs-sidebar {
  flex: none; width: 256px; position: sticky; top: 64px; height: calc(100vh - 64px); overflow-y: auto;
  padding: 20px 12px 40px; border-right: 1px solid var(--border); overscroll-behavior: contain;
}
.docs-main { flex: 1; min-width: 0; display: flex; justify-content: center; gap: 48px; padding: 0 40px; }
.docs-article { flex: 1; min-width: 0; max-width: 760px; padding: 40px 0 80px; }
.docs-toc { flex: none; width: 220px; position: sticky; top: 64px; align-self: flex-start; padding: 44px 0 0; max-height: calc(100vh - 64px); overflow-y: auto; }
.drawer-backdrop { display: none; }

/* ---- sidebar ---------------------------------------------------------------- */
.side-nav { display: flex; flex-direction: column; gap: 2px; font-size: 14.5px; line-height: 1.4; }
.side-nav .single, .side-nav .group-btn { display: block; padding: 8px 12px; color: var(--text-strong); font-weight: 700; }
.side-nav .single { border-left: 2px solid transparent; border-radius: 0 7px 7px 0; }
.side-nav .single:hover, .side-nav .items a:hover { color: var(--text-strong); }
.side-nav .single[aria-current="page"] { border-left-color: var(--red); background: var(--tint); color: var(--red-2); }
.group-btn {
  display: flex !important; align-items: center; gap: 8px; width: 100%; border: 0; border-radius: 7px; background: transparent;
  font: 700 14.5px Manrope, sans-serif; text-align: left; cursor: pointer;
}
.group-btn:hover { background: var(--panel-2); }
.group-btn .chev { margin-left: auto; color: var(--muted); transition: transform .18s; }
.group-btn[aria-expanded="true"] .chev { transform: rotate(90deg); }
.badge { padding: 1px 6px; border-radius: 5px; background: var(--btn); color: #fff; font: 800 10px Manrope, sans-serif; letter-spacing: .06em; }
.side-nav .items { display: none; flex-direction: column; gap: 1px; margin: 2px 0 8px 12px; border-left: 1px solid var(--border); }
.side-nav .group-btn[aria-expanded="true"] + .items { display: flex; }
.side-nav .items a { display: block; margin-left: -1px; padding: 6px 12px; border-left: 2px solid transparent; border-radius: 0 7px 7px 0; color: var(--text); font-weight: 500; }
.side-nav .items a[aria-current="page"] { border-left-color: var(--red); background: var(--tint); color: var(--red-2); font-weight: 700; }

/* ---- article ---------------------------------------------------------------- */
.crumbs { font-size: 13.5px; font-weight: 600; color: var(--muted); display: flex; flex-wrap: wrap; gap: 8px; }
.crumbs .here { color: var(--text); }
.prose h1 { margin: 10px 0 0; font-size: clamp(34px,5vw,44px); line-height: 1.1; letter-spacing: -0.04em; font-weight: 800; color: var(--text-strong); }
.prose h2 { margin: 52px 0 0; display: flex; align-items: center; gap: 10px; font-size: 28px; line-height: 1.2; letter-spacing: -0.03em; font-weight: 800; color: var(--text-strong); scroll-margin-top: 84px; }
.prose h3 { margin: 36px 0 0; display: flex; align-items: center; gap: 8px; font-size: 20px; line-height: 1.3; letter-spacing: -0.02em; font-weight: 800; color: var(--text-strong); scroll-margin-top: 84px; }
.prose h4 { margin: 28px 0 0; font-size: 16.5px; font-weight: 800; color: var(--text-strong); }
.prose .anchor { opacity: 0; color: var(--red-2); font-weight: 700; transition: opacity .15s; }
.prose h2:hover .anchor, .prose h3:hover .anchor, .prose .anchor:focus { opacity: 1; }
.prose p { margin: 14px 0 0; text-wrap: pretty; }
.prose h1 + p { margin-top: 18px; }
.prose ul, .prose ol { margin: 14px 0 0; padding-left: 1.4em; }
.prose li { margin: 6px 0; }
.prose li::marker { color: var(--muted); }
.prose strong { color: var(--text-strong); font-weight: 700; }
.prose hr { margin: 40px 0; border: 0; border-top: 1px solid var(--border); }
.prose img { max-width: 100%; border-radius: 10px; }
.prose :not(pre) > code {
  padding: 2px 6px; border-radius: 5px; background: var(--ic-bg); color: var(--ic-fg); font: 500 .86em 'JetBrains Mono', monospace; overflow-wrap: anywhere;
}
.prose a code { color: inherit; }

/* code blocks */
.prose figure.code-block { margin: 20px 0 0; border-radius: 12px; border: 1px solid var(--code-bd); background: var(--code-bg); overflow: hidden; position: relative; }
.prose figcaption {
  display: flex; align-items: center; gap: 12px; height: 42px; padding: 0 8px 0 16px; border-bottom: 1px solid #2a2224; background: #110d0e;
  font: 500 12.5px 'JetBrains Mono', monospace; color: #b5aeb0;
}
.prose figcaption .file { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prose figcaption .lang { color: #8a8284; }
.prose figure pre { margin: 0; padding: 16px 18px 18px; overflow-x: auto; font: 400 13.5px/1.75 'JetBrains Mono', monospace; color: #e6e1e2; }
.prose figure pre .ln { display: block; white-space: pre; min-height: 1.75em; }
.prose figure.bare .copy-btn { position: absolute; top: 10px; right: 10px; opacity: 0; transition: opacity .15s; }
.prose figure.bare:hover .copy-btn, .prose figure.bare .copy-btn:focus { opacity: 1; }
.code-tabs { display: flex; align-items: center; gap: 2px; height: 42px; padding: 0 8px; border-bottom: 1px solid #2a2224; background: #110d0e; overflow-x: auto; }
.code-tabs [role="tab"] {
  height: 42px; padding: 0 12px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: #a39c9e;
  font: 600 12.5px Manrope, sans-serif; cursor: pointer; white-space: nowrap;
}
.code-tabs [role="tab"][aria-selected="true"] { border-bottom-color: #ea2845; color: #f2eeef; }
.code-tabs .file { margin-left: 8px; font: 500 12px 'JetBrains Mono', monospace; color: #8a8284; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.code-tabs .copy-btn { margin-left: auto; }

/* callouts */
.callout { margin: 22px 0 0; padding: 14px 18px; border: 1px solid; border-radius: 10px; }
.callout .label { display: flex; align-items: center; gap: 8px; font: 800 12px Manrope, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.callout p { margin: 6px 0 0; color: var(--text-strong); font-size: 15px; }
.callout :not(pre) > code { background: rgba(127,127,127,.14); color: var(--text-strong); }
.callout.info { border-color: var(--info-bd); background: var(--info-bg); }
.callout.info .label { color: var(--info-fg); }
.callout.warning { border-color: var(--warn-bd); background: var(--warn-bg); }
.callout.warning .label { color: var(--warn-fg); }
.callout.tip { padding: 0; border-color: var(--red); background: var(--tip-bg); overflow: hidden; }
.callout.tip .label { gap: 10px; padding: 10px 18px; border-bottom: 1px solid rgba(234,40,69,.35); color: var(--tip-fg); }
.callout.tip p { margin: 0; padding: 12px 18px 14px; }
.callout.tip p + p { padding-top: 0; }
.callout.tip :not(pre) > code { background: var(--ic-bg); color: var(--ic-fg); }
.callout + .callout { margin-top: 16px; }

/* tables */
.table-wrap { margin: 20px 0 0; border: 1px solid var(--border); border-radius: 10px; overflow-x: auto; }
.prose table { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.5; }
.prose thead tr { background: var(--panel-2); text-align: left; }
.prose th { padding: 11px 16px; font-weight: 700; color: var(--text-strong); border-bottom: 1px solid var(--border); white-space: nowrap; }
.prose td { padding: 10px 16px; border-top: 1px solid var(--border); vertical-align: top; }
.prose tbody tr:nth-child(even) { background: var(--zebra); }
.prose td:first-child code { white-space: nowrap; }

/* missing page */
.missing { margin-top: 18px; padding: 18px 20px; border: 1px dashed var(--border); border-radius: 12px; color: var(--muted); }

/* page footer + pager */
.page-tools { margin: 56px 0 0; padding-top: 20px; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 20px; font-size: 14px; font-weight: 600; }
.page-tools[hidden] { display: none; }
.page-tools a, .page-tools button { display: inline-flex; align-items: center; gap: 7px; padding: 0; border: 0; background: none; color: var(--text); font: 600 14px Manrope, sans-serif; cursor: pointer; }
.page-tools a:hover, .page-tools button:hover { color: var(--text-strong); }
.pager { margin-top: 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,240px), 1fr)); gap: 14px; }
.pager a { display: flex; flex-direction: column; gap: 2px; padding: 16px 20px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); color: var(--text); line-height: 1.5; }
.pager a:hover { border-color: var(--red); color: var(--text); }
.pager a.next { text-align: right; grid-column: -2; }
.pager small { font-size: 13px; color: var(--muted); }
.pager span { font-size: 17px; font-weight: 700; color: var(--text-strong); }

/* toc */
.docs-toc h5 { margin: 0 0 10px; font: 800 11.5px Manrope, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.toc-links { display: flex; flex-direction: column; border-left: 1px solid var(--border); font-size: 14px; line-height: 1.4; }
.toc-links a { margin-left: -1px; padding: 6px 14px; border-left: 2px solid transparent; color: var(--text); font-weight: 500; }
.toc-links a.lvl3 { padding-left: 26px; font-size: 13.5px; }
.toc-links a:hover { color: var(--text-strong); }
.toc-links a.active { border-left-color: var(--red); color: var(--red-2); font-weight: 700; }

/* ---- search ------------------------------------------------------------------ */
.search-overlay {
  position: fixed; inset: 0; z-index: 60; background: var(--overlay); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  display: flex; justify-content: center; align-items: flex-start; padding: 12vh 20px 20px;
}
.search-overlay[hidden] { display: none; }
.search-dialog { width: 100%; max-width: 620px; max-height: 100%; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 14px; background: var(--panel); box-shadow: 0 30px 90px -20px rgba(0,0,0,.6); overflow: hidden; }
.search-field { display: flex; align-items: center; gap: 12px; padding: 0 16px; height: 58px; border-bottom: 1px solid var(--border); }
.search-field input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: transparent; color: var(--text-strong); font: 600 17px Manrope, sans-serif; }
.search-field input::placeholder { color: var(--muted); }
.search-field kbd { padding: 2px 7px; border: 1px solid var(--border); border-radius: 5px; background: var(--panel-2); font: 600 11.5px 'JetBrains Mono', monospace; color: var(--text); cursor: pointer; }
.search-results { flex: 1; overflow-y: auto; padding: 8px 8px 12px; max-height: 60vh; }
.search-results .grp { padding: 6px 0; }
.search-results .grp-name { margin: 0; padding: 6px 12px; font: 800 11px Manrope, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.search-results a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 9px; color: var(--text); }
.search-results a[aria-selected="true"] { background: var(--tint); }
.search-results .icon { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 7px; border: 1px solid var(--border); background: var(--panel-2); font: 700 13px 'JetBrains Mono', monospace; color: var(--muted); }
.search-results a[aria-selected="true"] .icon { color: var(--red-2); }
.search-results .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.search-results .title { font-size: 15px; font-weight: 700; color: var(--text-strong); }
.search-results .crumb { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-results mark { background: transparent; color: var(--red-2); text-decoration: underline; text-underline-offset: 3px; }
.search-results .enter { font: 600 12px 'JetBrains Mono', monospace; color: var(--muted); visibility: hidden; }
.search-results a[aria-selected="true"] .enter { visibility: visible; }
.search-results .empty { margin: 0; padding: 28px 12px; text-align: center; color: var(--muted); }
.search-help { display: flex; flex-wrap: wrap; gap: 16px; padding: 10px 16px; border-top: 1px solid var(--border); background: var(--panel-2); font-size: 12.5px; color: var(--muted); }
.search-help span { display: flex; align-items: center; gap: 6px; }
.search-help kbd { padding: 0 5px; border: 1px solid var(--border); border-radius: 4px; background: var(--panel); font: 600 11px 'JetBrains Mono', monospace; color: var(--text); }

/* ---- responsive (design: TOC from 1180px, drawer under 860px) ----------------- */
@media (max-width: 1179px) { .docs-toc { display: none; } }
@media (max-width: 859px) {
  .version, .search-btn { display: none; }
  .search-icon-btn, .drawer-btn { display: grid; }
  .docs-sidebar {
    position: fixed; top: 64px; bottom: 0; left: 0; z-index: 30; width: 284px; height: auto;
    background: var(--panel); transform: translateX(-102%); transition: transform .22s ease;
  }
  body.drawer-open .docs-sidebar { transform: none; }
  body.drawer-open .drawer-backdrop { display: block; position: fixed; inset: 64px 0 0; z-index: 29; background: var(--overlay); }
  .docs-main { padding: 0 20px; }
  .search-overlay { padding: 12px; }
}

/* ---- mascot (expressions per state: see docs/WRITING.md) ----------------------- */
.prose img.mascot, .mascot { display: block; border-radius: 0; }
[data-theme="light"] .mascot { filter: drop-shadow(0 5px 10px rgba(40,10,18,.12)); }
.prose img.mascot-intro { float: right; width: 120px; height: auto; margin: 18px 0 12px 28px; }
.prose .mascot-intro + p { margin-top: 18px; }
.not-found { padding: 48px 0 8px; text-align: center; }
.not-found .mascot { margin: 0 auto 8px; width: 128px; height: 128px; }
.prose .not-found h1 { margin-top: 0; }
.prose .not-found p { margin: 14px auto 0; max-width: 460px; }
.prose .not-found p + p { margin-top: 28px; }
.prose .not-found .btn { color: #fff; }
.search-results .no-results { padding: 24px 12px 28px; }
.search-results .no-results .mascot { margin: 0 auto 10px; width: 72px; height: 72px; }
.search-results .no-results p { margin: 0; }
.search-results .no-results p:first-of-type { color: var(--text-strong); font-weight: 700; }
.search-results .no-results .hint { margin-top: 4px; font-size: 14px; }
.mascot-note { margin: 44px 0 0; display: flex; align-items: center; gap: 18px; padding: 18px 22px; border: 1px solid var(--border); border-radius: 14px; background: var(--panel); }
.prose .mascot-note img { flex: none; width: 72px; height: 72px; border-radius: 0; }
.prose .mascot-note p { margin: 0; color: var(--text-strong); font-weight: 700; font-size: 17px; }
@media (max-width: 859px) {
  .prose img.mascot-intro { width: 80px; margin-left: 16px; }
}