/* ==========================================================================
   WySync — documentation
   Three-column reference layout: section nav / article / on-page contents.
   ========================================================================== */

.docs-shell {
  display: grid;
  grid-template-columns: 274px minmax(0, 1fr) 224px;
  gap: 0 clamp(24px, 3.4vw, 56px);
  align-items: start;
  max-width: 1500px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
@media (max-width: 1280px) { .docs-shell { grid-template-columns: 252px minmax(0,1fr); } .docs-toc { display: none; } }
@media (max-width: 940px)  { .docs-shell { grid-template-columns: minmax(0,1fr); } }

/* ---------- sidebar --------------------------------------------------- */

.docs-side {
  position: sticky; top: 64px;
  max-height: calc(100dvh - 64px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 28px 12px 60px 0;
  border-right: 1px solid var(--line);
  scrollbar-width: thin;
}
.docs-side::-webkit-scrollbar { width: 6px; }
.docs-side::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 99px; }

.docs-side-group + .docs-side-group { margin-top: 24px; }
.docs-side-group > h4 {
  font-family: var(--font-mono); font-size: .655rem; letter-spacing: .15em;
  text-transform: uppercase; color: var(--ink-4); font-weight: 500;
  padding: 0 10px; margin-bottom: 8px;
}
.docs-side a {
  display: block; padding: 6px 10px; border-radius: var(--r-sm);
  font-size: .855rem; color: var(--ink-3); line-height: 1.4;
  transition: color .14s var(--ease), background .14s var(--ease);
  position: relative;
}
.docs-side a:hover { color: var(--ink); background: var(--surface-2); }
.docs-side a[aria-current="page"] {
  color: var(--ink); font-weight: 580; background: var(--brand-soft);
}
.docs-side a[aria-current="page"]::before {
  content: ""; position: absolute; left: -1px; top: 6px; bottom: 6px;
  width: 2px; border-radius: 99px; background: var(--brand);
}
.docs-side li + li { margin-top: 1px; }

.docs-side-top { padding: 0 10px 20px; border-bottom: 1px solid var(--line); margin-bottom: 22px; }
.docs-side-top a.link { display: inline-flex; padding: 0; background: none; }

@media (max-width: 940px) {
  .docs-side {
    position: fixed; inset: 64px 0 0 auto; z-index: 95;
    width: min(340px, 88vw);
    background: var(--bg);
    border-left: 1px solid var(--line); border-right: 0;
    padding: 24px 18px 60px;
    transform: translateX(100%);
    transition: transform .28s var(--ease);
    box-shadow: var(--shadow-3);
    max-height: none;
  }
  body[data-docnav="open"] .docs-side { transform: none; }
  body[data-docnav="open"]::after {
    content: ""; position: fixed; inset: 64px 0 0 0; z-index: 94;
    background: color-mix(in srgb, var(--ink) 32%, transparent);
    backdrop-filter: blur(2px);
  }
}

/* ---------- docs sub-header ------------------------------------------- */

.docs-topbar {
  position: sticky; top: 64px; z-index: 80;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
}
.docs-topbar-in {
  display: flex; align-items: center; gap: 14px;
  height: 52px;
  max-width: 1500px; margin-inline: auto; padding-inline: var(--gutter);
}
.docs-crumbs {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .05em;
  color: var(--ink-4); text-transform: uppercase; white-space: nowrap;
  overflow: hidden;
}
.docs-crumbs a { color: var(--ink-4); }
.docs-crumbs a:hover { color: var(--brand-ink); }
.docs-crumbs .sep { opacity: .5; }
.docs-crumbs .cur { color: var(--ink-2); text-overflow: ellipsis; overflow: hidden; }

.docs-search {
  margin-left: auto;
  display: flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 8px 0 11px; min-width: 230px;
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink-4);
  font-size: .84rem;
  transition: border-color .16s var(--ease);
}
.docs-search:hover { border-color: var(--line-3); }
.docs-search svg { width: 14px; height: 14px; }
.docs-search kbd {
  margin-left: auto; font-family: var(--font-mono); font-size: .62rem;
  border: 1px solid var(--line); border-radius: var(--r-xs);
  padding: 2px 5px; background: var(--surface-2); color: var(--ink-4);
}
@media (max-width: 700px) { .docs-search { min-width: 0; } .docs-search span, .docs-search kbd { display: none; } }

.docnav-btn {
  display: none; align-items: center; gap: 7px; height: 34px; padding: 0 11px;
  border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface);
  font-size: .82rem; color: var(--ink-2);
}
.docnav-btn svg { width: 14px; height: 14px; }
@media (max-width: 940px) { .docnav-btn { display: inline-flex; } }

/* ---------- article --------------------------------------------------- */

.docs-main { padding: clamp(30px, 4vw, 52px) 0 90px; min-width: 0; }
.docs-main > header { padding-bottom: 26px; border-bottom: 1px solid var(--line); margin-bottom: 34px; }
.docs-main > header .eyebrow { margin-bottom: 14px; }
.docs-main > header h1 {
  font-size: clamp(1.85rem, 1.4rem + 1.7vw, 2.7rem);
  letter-spacing: -.032em; line-height: 1.06;
}
.docs-main > header .lead { margin-top: 15px; font-size: 1.06rem; max-width: 64ch; }
.docs-meta {
  display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 18px;
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-4);
}
.docs-meta span { display: inline-flex; align-items: center; gap: 6px; }
.docs-meta svg { width: 12px; height: 12px; }

.doc-body { font-size: .97rem; line-height: 1.72; color: var(--ink-2); }
.doc-body > * + * { margin-top: 1.05em; }
.doc-body h2 {
  font-size: 1.42rem; letter-spacing: -.026em; margin-top: 2.4em;
  padding-top: 1.15em; border-top: 1px solid var(--line);
  scroll-margin-top: 130px;
}
.doc-body h3 { font-size: 1.1rem; letter-spacing: -.02em; margin-top: 2em; scroll-margin-top: 130px; }
.doc-body h4 { font-size: .96rem; margin-top: 1.7em; color: var(--ink); }
.doc-body h2 + *, .doc-body h3 + *, .doc-body h4 + * { margin-top: .7em; }

.doc-body a { color: var(--brand-ink); border-bottom: 1px solid var(--brand-line); }
.doc-body a:hover { border-color: var(--brand); }
.doc-body strong { color: var(--ink); font-weight: 620; }

.doc-body ul, .doc-body ol { padding-left: 0; }
.doc-body ul > li { position: relative; padding-left: 1.25em; }
.doc-body ul > li::before {
  content: ""; position: absolute; left: 1px; top: .72em;
  width: 6px; height: 1.5px; background: var(--brand);
}
.doc-body ol { counter-reset: li; }
.doc-body ol > li { position: relative; padding-left: 1.9em; counter-increment: li; }
.doc-body ol > li::before {
  content: counter(li) "."; position: absolute; left: 0; top: 0;
  font-family: var(--font-mono); font-size: .8em; color: var(--ink-4);
}
.doc-body li + li { margin-top: .42em; }
.doc-body li > ul, .doc-body li > ol { margin-top: .42em; }

.doc-body table { font-size: .875rem; }
.doc-body .table-scroll { margin-block: 1.6em; border: 1px solid var(--line); border-radius: var(--r); }
.doc-body .table-scroll table { min-width: 560px; }
.doc-body th, .doc-body td { text-align: left; padding: 11px 15px; border-bottom: 1px solid var(--line); vertical-align: top; }
.doc-body thead th {
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-4); font-weight: 500;
  background: var(--surface-2); white-space: nowrap;
}
.doc-body tbody tr:last-child td { border-bottom: 0; }
.doc-body td code { font-size: .82em; white-space: nowrap; }

.doc-body pre { margin-block: 1.5em; }
.doc-body blockquote { border-left: 2px solid var(--line-2); padding-left: 18px; color: var(--ink-3); font-style: italic; }

.anchor {
  opacity: 0; margin-left: .4em; font-weight: 400; color: var(--ink-4);
  transition: opacity .15s var(--ease); border: 0; font-size: .8em;
}
h2:hover .anchor, h3:hover .anchor, .anchor:focus { opacity: 1; }

/* ---------- doc components ------------------------------------------- */

.note {
  display: grid; grid-template-columns: auto minmax(0,1fr); gap: 12px;
  border: 1px solid var(--line); border-left: 2px solid var(--ink-4);
  background: var(--surface-2);
  border-radius: var(--r-sm);
  padding: 15px 18px;
  font-size: .9rem; color: var(--ink-3);
  margin-block: 1.5em;
}
.note > svg { width: 17px; height: 17px; margin-top: 2px; color: var(--ink-4); }
.note > div > * + * { margin-top: .6em; }
.note b.note-t { display: block; color: var(--ink); font-weight: 600; margin-bottom: 3px; font-size: .875rem; }
.note--tip  { border-left-color: var(--fit); background: var(--fit-soft); border-color: var(--fit-line); }
.note--tip > svg, .note--tip b.note-t { color: var(--fit); }
.note--warn { border-left-color: var(--maybe); background: var(--maybe-soft); border-color: var(--maybe-line); }
.note--warn > svg, .note--warn b.note-t { color: var(--maybe); }
.note--danger { border-left-color: var(--nofit); background: var(--nofit-soft); border-color: var(--nofit-line); }
.note--danger > svg, .note--danger b.note-t { color: var(--nofit); }
.note--plan { border-left-color: var(--brand); background: var(--brand-soft); border-color: var(--brand-line); }
.note--plan > svg, .note--plan b.note-t { color: var(--brand-ink); }

.steps { counter-reset: st; margin-block: 1.6em; }
.steps > li {
  counter-increment: st; position: relative;
  padding: 0 0 26px 44px; margin: 0;
}
.steps > li::before {
  content: counter(st);
  position: absolute; left: 0; top: -2px;
  width: 28px; height: 28px; border-radius: 99px;
  background: var(--surface); border: 1px solid var(--line-2);
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: .72rem; color: var(--ink-2);
  z-index: 1;
}
.steps > li::after {
  content: ""; position: absolute; left: 13.5px; top: 30px; bottom: 2px; width: 1px;
  background: var(--line);
}
.steps > li:last-child { padding-bottom: 0; }
.steps > li:last-child::after { display: none; }
.steps > li > b,
.steps > li > strong:first-child { display: block; color: var(--ink); font-weight: 600; font-size: .97rem; margin-bottom: 5px; }
.steps > li > * + * { margin-top: .6em; }

.figure { margin-block: 1.9em; }
.figure-frame {
  border: 1px solid var(--line-2); border-radius: var(--r);
  overflow: hidden; background: var(--surface-2);
  box-shadow: var(--shadow-2);
}
.figure-frame img { width: 100%; display: block; background: var(--surface); }
.figure figcaption {
  margin-top: 10px; font-size: .8rem; color: var(--ink-4);
  display: flex; gap: 8px; align-items: baseline;
}
.figure figcaption b { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-ink); flex: none; }

.kvs { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; margin-block: 1.5em; }
.kvs > div { background: var(--surface); padding: 13px 16px; display: grid; grid-template-columns: 190px minmax(0,1fr); gap: 16px; }
@media (max-width: 640px) { .kvs > div { grid-template-columns: minmax(0,1fr); gap: 4px; } }
.kvs > div.kv--plain { grid-template-columns: minmax(0,1fr); }
.kvs dt { font-family: var(--font-mono); font-size: .76rem; color: var(--ink); }
.kvs dd { margin: 0; font-size: .88rem; color: var(--ink-3); }

.cardlinks { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; margin-block: 1.6em; }
@media (max-width: 620px) { .cardlinks { grid-template-columns: minmax(0,1fr); } }
.cardlink {
  border: 1px solid var(--line); border-radius: var(--r); background: var(--surface);
  padding: 16px 18px; transition: all .18s var(--ease);
}
.cardlink:hover { border-color: var(--brand-line); background: var(--surface-2); transform: translateY(-1px); }
.cardlink b { display: block; color: var(--ink); font-size: .92rem; font-weight: 580; }
.cardlink span { display: block; color: var(--ink-4); font-size: .82rem; margin-top: 5px; line-height: 1.5; }

/* ---------- on-page contents ------------------------------------------ */

.docs-toc {
  position: sticky; top: 130px;
  padding: 52px 0 40px;
  max-height: calc(100dvh - 130px);
  overflow-y: auto;
}
.docs-toc h4 {
  font-family: var(--font-mono); font-size: .645rem; letter-spacing: .15em;
  text-transform: uppercase; color: var(--ink-4); font-weight: 500; margin-bottom: 12px;
}
.docs-toc a {
  display: block; padding: 5px 0 5px 13px;
  font-size: .8rem; color: var(--ink-4); line-height: 1.45;
  border-left: 1px solid var(--line);
  transition: color .14s var(--ease), border-color .14s var(--ease);
}
.docs-toc a:hover { color: var(--ink-2); }
.docs-toc a.h3 { padding-left: 24px; font-size: .775rem; }
.docs-toc a.active { color: var(--brand-ink); border-left-color: var(--brand); font-weight: 560; }
.docs-toc-foot { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); }
.docs-toc-foot a { border: 0; padding-left: 0; font-size: .78rem; color: var(--ink-3); display: flex; gap: 7px; align-items: center; }
.docs-toc-foot a:hover { color: var(--brand-ink); }
.docs-toc-foot svg { width: 13px; height: 13px; }

/* ---------- pager ----------------------------------------------------- */

.docs-pager {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px;
  margin-top: 60px; padding-top: 34px; border-top: 1px solid var(--line);
}
@media (max-width: 560px) { .docs-pager { grid-template-columns: minmax(0,1fr); } }
.docs-pager a {
  border: 1px solid var(--line); border-radius: var(--r); padding: 15px 18px;
  transition: all .18s var(--ease);
}
.docs-pager a:hover { border-color: var(--line-2); background: var(--surface-2); }
.docs-pager .dir { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); }
.docs-pager b { display: block; margin-top: 6px; color: var(--ink); font-size: .93rem; font-weight: 580; }
.docs-pager .next { text-align: right; grid-column: 2; }
@media (max-width: 560px) { .docs-pager .next { grid-column: 1; text-align: left; } }

.docs-help {
  margin-top: 40px; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface-2); padding: 22px 24px;
  display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
}
.docs-help b { display: block; color: var(--ink); font-size: .95rem; }
.docs-help p { font-size: .85rem; color: var(--ink-3); margin-top: 4px; }
.docs-help .btn { margin-left: auto; }

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

.pal-backdrop {
  position: fixed; inset: 0; z-index: 200;
  background: color-mix(in srgb, var(--ink) 34%, transparent);
  backdrop-filter: blur(3px);
  display: none;
  padding: clamp(40px, 10vh, 120px) 16px 16px;
}
.pal-backdrop[data-open="true"] { display: block; }
.pal {
  max-width: 620px; margin-inline: auto;
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--r-lg); box-shadow: var(--shadow-3);
  overflow: hidden;
  animation: palIn .18s var(--ease-out);
}
@keyframes palIn { from { opacity: 0; transform: translateY(-8px) scale(.99); } }
.pal-input {
  display: flex; align-items: center; gap: 11px;
  padding: 0 16px; height: 54px; border-bottom: 1px solid var(--line);
}
.pal-input svg { width: 17px; height: 17px; color: var(--ink-4); flex: none; }
.pal-input input {
  flex: 1; border: 0; outline: 0; background: none; font-size: 1rem; color: var(--ink);
}
.pal-input input::placeholder { color: var(--ink-4); }
.pal-input input::-webkit-search-cancel-button,
.pal-input input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.pal-input kbd {
  font-family: var(--font-mono); font-size: .62rem; border: 1px solid var(--line);
  border-radius: var(--r-xs); padding: 3px 6px; color: var(--ink-4); background: var(--surface-2);
}
.pal-results { max-height: min(460px, 58vh); overflow-y: auto; padding: 8px; }
.pal-group {
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-4);
  padding: 10px 10px 6px;
}
.pal-item {
  display: block; padding: 9px 11px; border-radius: var(--r-sm);
  transition: background .12s var(--ease);
}
.pal-item b { display: block; font-size: .9rem; color: var(--ink); font-weight: 560; }
.pal-item span { display: block; font-size: .78rem; color: var(--ink-4); margin-top: 3px; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pal-item mark { background: var(--brand-soft); color: var(--brand-ink); border-radius: 2px; padding: 0 1px; }
.pal-item[data-sel="true"], .pal-item:hover { background: var(--surface-2); }
.pal-item[data-sel="true"] { box-shadow: inset 2px 0 0 var(--brand); }
.pal-empty { padding: 34px 16px; text-align: center; color: var(--ink-4); font-size: .88rem; }
.pal-foot {
  display: flex; gap: 16px; align-items: center; padding: 10px 16px;
  border-top: 1px solid var(--line); background: var(--surface-2);
  font-size: .72rem; color: var(--ink-4);
}
.pal-foot kbd { font-family: var(--font-mono); font-size: .62rem; border: 1px solid var(--line); border-radius: 3px; padding: 1px 4px; background: var(--surface); }

/* ---------- docs landing ---------------------------------------------- */

.docs-hero {
  border-bottom: 1px solid var(--line);
  padding-block: clamp(44px, 6vw, 78px);
  position: relative;
}
.docs-hero .d1 { font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.4rem); }
.docs-index { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px; }
@media (max-width: 1000px) { .docs-index { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px)  { .docs-index { grid-template-columns: minmax(0,1fr); } }
.docs-index-col h3 {
  font-size: .95rem; letter-spacing: -.014em; padding-bottom: 12px;
  border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 9px;
}
.docs-index-col h3 svg { width: 16px; height: 16px; color: var(--brand); }
.docs-index-col li { border-bottom: 1px solid var(--line); }
.docs-index-col li a {
  display: block; padding: 10px 0; font-size: .875rem; color: var(--ink-3);
  transition: color .14s var(--ease), padding-left .16s var(--ease);
}
.docs-index-col li a:hover { color: var(--brand-ink); padding-left: 5px; }