/* ============================================================
   Patois Labs: docs portal shell
   Page-local styles for everything under /docs/. Loads AFTER
   ../styles.css (or ../../styles.css for pages one level deeper,
   e.g. /docs/features/<slug>/) and reuses its tokens (:root vars),
   header/footer, .wrap, .eyebrow, .btn, .panel, .k/.term.
   Calmer than the marketing pages: docs are for reading, so glass
   stays but blur and motion are turned down.
   ============================================================ */

/* ---------- shell: sidebar + content ---------- */
.docs-shell{width:min(1180px,94vw);margin-inline:auto;display:grid;
  grid-template-columns:236px minmax(0,1fr);gap:clamp(28px,4vw,52px);
  align-items:start;padding:clamp(24px,3.4vw,40px) 0 88px}

.docs-hero{padding-top:clamp(36px,5vw,60px);padding-bottom:clamp(8px,2vw,18px)}
.docs-hero p.section-lead{margin-top:14px}

/* ---------- sidebar nav ---------- */
.docs-sidebar{position:sticky;top:90px;max-height:calc(100vh - 110px);
  overflow-y:auto;padding:4px 10px 4px 0}
.docs-sidebar h2{font-family:var(--font-mono);font-size:11px;font-weight:500;
  letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
  margin:20px 0 6px}
.docs-sidebar h2:first-child{margin-top:0}
.docs-sidebar ul{list-style:none;margin:0;padding:0}
.docs-sidebar li{margin:0}
.docs-sidebar a{display:block;padding:6px 10px;border-radius:8px;
  font-size:14px;line-height:1.4;color:var(--ink-soft);text-decoration:none;
  transition:background .15s,color .15s}
.docs-sidebar a:hover{background:rgba(29,79,160,.08);color:var(--blue);
  text-decoration:none}
.docs-sidebar a[aria-current="page"]{background:rgba(29,79,160,.10);
  color:var(--blue);font-weight:600}
.docs-sidebar .docs-sub{padding-left:14px}
.docs-sidebar .docs-sub a{font-size:13.5px}

/* ---------- main content / prose ---------- */
.docs-content{min-width:0}
.docs-prose{max-width:70ch}
.docs-prose h1{margin:0 0 14px}
.docs-prose h2{font-size:clamp(24px,3vw,30px);margin:44px 0 14px}
.docs-prose h2:first-child{margin-top:0}
.docs-prose h3{font-size:19px;font-weight:700;margin:28px 0 10px;
  font-family:var(--font-head);color:var(--ink)}
.docs-prose p{color:var(--ink-soft);margin:0 0 16px;font-size:16.5px;line-height:1.65}
.docs-prose ul,.docs-prose ol{color:var(--ink-soft);font-size:16.5px;line-height:1.65;
  margin:0 0 16px;padding-left:1.3em}
.docs-prose li{margin:0 0 6px}
.docs-prose li:last-child{margin-bottom:0}
.docs-prose a{font-weight:500}
.docs-prose strong{color:var(--ink);font-weight:700}
.docs-prose hr{border:0;border-top:1px solid var(--line);margin:36px 0}

/* heading permalinks: quiet anchor icon that appears on hover/focus */
.docs-prose h2[id],.docs-prose h3[id]{scroll-margin-top:96px;position:relative}
.docs-prose h2[id] .anchor,.docs-prose h3[id] .anchor{
  margin-left:8px;font-family:var(--font-mono);font-weight:400;font-size:.78em;
  color:var(--muted);opacity:0;text-decoration:none;transition:opacity .15s}
.docs-prose h2[id]:hover .anchor,.docs-prose h3[id]:hover .anchor,
.docs-prose h2[id] .anchor:focus,.docs-prose h3[id] .anchor:focus{opacity:1}

/* ---------- "on this page" mini-nav ---------- */
.docs-onthispage{background:var(--glass);border:1px solid var(--line);
  border-radius:16px;padding:16px 18px;margin:0 0 32px;backdrop-filter:blur(6px)}
.docs-onthispage p{font-family:var(--font-mono);font-size:11px;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.docs-onthispage ul{list-style:none;margin:0;padding:0;font-size:14px;line-height:1.5}
.docs-onthispage li{margin:0 0 4px}
.docs-onthispage a{color:var(--ink-soft);font-weight:500}
.docs-onthispage a:hover{color:var(--blue)}

/* ---------- code blocks ---------- */
.docs-prose code{font-family:var(--font-mono);font-size:.88em;color:var(--blue);
  background:rgba(29,79,160,.08);padding:2px 6px;border-radius:5px}
.docs-prose pre{background:#12141a;color:#e8eaf0;border-radius:14px;
  padding:18px 20px;margin:0 0 20px;overflow-x:auto;box-shadow:var(--shadow-card)}
.docs-prose pre code{font-family:var(--font-mono);font-size:14px;line-height:1.6;
  color:inherit;background:none;padding:0;border-radius:0}

/* ---------- tables ---------- */
.docs-table-scroll{overflow-x:auto;margin:0 0 20px;border-radius:14px;
  border:1px solid var(--line)}
.docs-prose table{border-collapse:collapse;width:100%;min-width:480px;font-size:15px}
.docs-prose th,.docs-prose td{text-align:left;padding:10px 14px;
  border-bottom:1px solid var(--line);vertical-align:top}
.docs-prose thead th{font-family:var(--font-mono);font-size:12px;font-weight:500;
  letter-spacing:.04em;text-transform:uppercase;color:var(--muted);
  background:rgba(29,79,160,.05)}
.docs-prose tbody tr:last-child td{border-bottom:0}

/* ---------- callout / note box ---------- */
.callout{background:var(--glass);border:1px solid var(--line);
  border-left:3px solid var(--blue-bright);border-radius:12px;
  padding:16px 20px;margin:0 0 22px}
.callout p{margin:0;font-size:15.5px}
.callout p+p{margin-top:8px}
.callout-label{display:block;font-family:var(--font-mono);font-size:11px;
  font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--blue);
  margin:0 0 6px}
.callout--limit{border-left-color:#ad7d00}
.callout--limit .callout-label{color:#8a6400}

/* ---------- docs landing: section grid ---------- */
.docs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:36px}
.docs-card{background:var(--glass);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 24px;backdrop-filter:blur(8px);box-shadow:var(--shadow-card);
  transition:transform .2s,box-shadow .25s,border-color .25s}
.docs-card:hover{transform:translateY(-3px);border-color:rgba(29,79,160,.22);
  box-shadow:0 22px 44px -30px rgba(29,79,160,.4)}
.docs-card h3{font-size:17.5px;font-weight:700;margin:0 0 6px}
.docs-card h3 a{color:var(--ink)}
.docs-card h3 a:hover{color:var(--blue);text-decoration:none}
.docs-card p{color:var(--muted);margin:0;font-size:14.5px;line-height:1.55}
.docs-section-h{margin:48px 0 0}
.docs-section-h:first-of-type{margin-top:8px}
.docs-feature-list{display:grid;grid-template-columns:repeat(3,1fr);gap:8px 20px;
  margin-top:20px;padding:0;list-style:none}
.docs-feature-list a{display:block;padding:8px 4px;font-size:15px;font-weight:500;
  border-bottom:1px solid var(--line)}
.docs-feature-list a:hover{color:var(--blue)}

/* ---------- responsive: sidebar collapses to a top section list ---------- */
@media (max-width:860px){
  .docs-shell{grid-template-columns:1fr;gap:0}
  .docs-sidebar{position:static;max-height:260px;overflow-y:auto;
    padding:2px 4px 14px;margin-bottom:28px;border-bottom:1px solid var(--line)}
  .docs-grid{grid-template-columns:1fr 1fr}
  .docs-feature-list{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .docs-grid{grid-template-columns:1fr}
  .docs-feature-list{grid-template-columns:1fr}
  .docs-prose p,.docs-prose ul,.docs-prose ol{font-size:15.5px}
}

/* ---------- architecture diagram (reused by /docs/architecture/) ---------- */
.docs-prose .diagram-scroll{margin:0 0 20px}
.arch-svg{display:block;width:1180px;max-width:none;height:auto}
.ad-box{fill:rgba(255,255,255,.92);stroke:var(--dg-stroke);stroke-width:1.5}
.ad-box--core{fill:rgba(29,79,160,.07);stroke:var(--dg-stroke);stroke-width:1.9}
.ad-box--edge{fill:rgba(255,210,63,.16);stroke:var(--dg-stroke);stroke-width:1.5}
.ad-title{fill:var(--ink);font-family:var(--font-mono);font-size:14px;font-weight:500}
.ad-title--core{font-size:16px}
.ad-sub{fill:var(--muted);font-family:var(--font-mono);font-size:11.5px}
.ad-flow{stroke:var(--dg-flow);stroke-width:2;fill:none}
.ad-arrow{fill:var(--dg-flow)}
.ad-mbox{fill:rgba(255,255,255,.85);stroke:rgba(29,79,160,.4);stroke-width:1.2}
.ad-mod{fill:var(--ink-soft);font-family:var(--font-mono);font-size:12.5px}
.ad-ports{fill:rgba(29,79,160,.05);stroke:var(--dg-stroke);stroke-width:1.2;stroke-dasharray:5 4}
.ad-ports-label{fill:var(--muted);font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em}
.arch-caption{margin:14px 0 24px;color:var(--muted);font-size:15.5px;font-style:italic;max-width:680px}