/* ============================================================
   WPClientHub docs — addendum to site.css
   Loaded ONLY on marketing/docs/*.html, after site.css. Reuses every
   token, band, prose, table, faq and next-reads style from site.css;
   this file only adds the two things the rest of the marketing site
   never needed: a section sidebar, and a doc-index grid.
   ============================================================ */

/* ---------- docs shell (sidebar + article) ---------- */
.docs-hero{padding:56px 0 40px}
.docs-hero h1{font-size:clamp(1.9rem,3.6vw,2.6rem); margin-top:14px; max-width:760px}
.docs-hero .lead{max-width:60ch}

.docs-shell{display:grid; grid-template-columns:248px minmax(0,1fr); gap:56px; align-items:start;
  padding:56px 0 96px}
.docs-nav{position:sticky; top:calc(var(--header-h) + 24px); max-height:calc(100vh - var(--header-h) - 48px);
  overflow-y:auto; padding-right:6px}
.docs-nav-group + .docs-nav-group{margin-top:20px}
.docs-nav-group h2{font-family:var(--font-mono); font-size:.68rem; font-weight:500; letter-spacing:.12em;
  text-transform:uppercase; color:var(--t-dark-faint); margin-bottom:8px}
.docs-nav-group ul{list-style:none; display:grid; gap:1px}
.docs-nav-group a{display:block; padding:6px 10px; margin:0 -10px; border-radius:8px; font-size:.89rem;
  color:var(--t-dark-soft); line-height:1.4}
.docs-nav-group a:hover{background:var(--paper-2); color:var(--t-dark); text-decoration:none}
.docs-nav-group a[aria-current="page"]{background:var(--teal-50); color:var(--teal-700); font-weight:600}
.docs-nav-all{display:inline-flex; align-items:center; gap:6px; margin-top:18px; font-size:.82rem; font-weight:600;
  color:var(--teal-700)}

.docs-article{min-width:0}
.docs-crumb{font-family:var(--font-mono); font-size:.8rem; color:var(--t-dark-faint); margin-bottom:14px}
.docs-crumb a{color:var(--teal-600)}
.docs-meta{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:16px 0 8px}
.docs-section-tag{display:inline-block; font-family:var(--font-mono); font-size:.68rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--teal-700); background:var(--teal-50); border:1px solid rgb(14 124 107 / .18);
  border-radius:999px; padding:4px 12px}
.docs-updated{font-family:var(--font-mono); font-size:.76rem; color:var(--t-dark-faint)}
.docs-summary{font-size:1.1rem; color:var(--t-dark-soft); line-height:1.6; margin-top:10px; max-width:70ch}

.docs-article h1{font-size:clamp(1.7rem,3vw,2.3rem); line-height:1.15}

/* mobile: sidebar collapses into a <details> toggle above the article */
.docs-nav-mobile{display:none}
@media (max-width:900px){
  .docs-shell{grid-template-columns:1fr; gap:28px; padding:40px 0 72px}
  .docs-nav{display:none}
  .docs-nav-mobile{display:block; margin-bottom:8px}
  .docs-nav-mobile summary{cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between;
    padding:12px 16px; border:1px solid var(--paper-line); border-radius:var(--r-md); background:#fff;
    font-weight:600; font-size:.92rem}
  .docs-nav-mobile summary::-webkit-details-marker{display:none}
  .docs-nav-mobile[open] summary{border-radius:var(--r-md) var(--r-md) 0 0}
  .docs-nav-mobile .docs-nav{display:block; position:static; max-height:none; overflow:visible;
    border:1px solid var(--paper-line); border-top:none; border-radius:0 0 var(--r-md) var(--r-md);
    padding:14px 16px; background:#fff}
}

/* ---------- doc index (browse by section) ---------- */
.docs-index-hero{padding:72px 0 12px}
.docs-search-note{margin-top:28px; max-width:640px; margin-left:auto; margin-right:auto;
  font-family:var(--font-mono); font-size:.82rem; color:var(--t-light-faint)}
.docs-groups{display:grid; gap:52px; margin-top:8px}
.docs-group h2{font-size:1.3rem}
.docs-group .doc-tag{font-family:var(--font-mono); font-size:.72rem; color:var(--t-dark-faint)}
.doclist{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:20px}
.doccard{display:block; background:var(--white); border:1px solid var(--paper-line); border-radius:var(--r-md);
  padding:20px 22px; box-shadow:var(--shadow-card); color:inherit; transition:transform .15s ease, border-color .15s ease}
.doccard:hover{transform:translateY(-2px); border-color:var(--teal-400); text-decoration:none}
.doccard h3{font-size:1.02rem; letter-spacing:-0.01em; line-height:1.3}
.doccard p{font-size:.86rem; color:var(--t-dark-soft); margin-top:6px; line-height:1.5}
@media (max-width:980px){ .doclist{grid-template-columns:1fr 1fr} }
@media (max-width:620px){ .doclist{grid-template-columns:1fr} }

/* ---------- small in-page components reused across doc pages ---------- */
.prose .kbd{font-family:var(--font-mono); font-size:.82em; background:var(--ink-900); color:var(--t-light);
  border-radius:5px; padding:1px 7px; border:1px solid var(--ink-line)}
.prose .limits-table th{white-space:normal}
.prose .word-list{display:grid; gap:2px; list-style:none; padding:0}
.prose .word-list dt{font-weight:600; color:var(--t-dark); margin-top:1.2em}
.prose .word-list dd{margin:.2em 0 0; color:var(--t-dark-soft)}