/* Mesh v4: docs pages (/docs and its five sub-pages).
   Additive to /assets/mesh/site.css (the .doc, .doc__rail, .doc__body, .steps and
   .callout Read layout lives there). Link after shell.css:
     <link rel="stylesheet" href="/assets/mesh/pages/docs.css?v=1">
   Shared by the docs owners. Add, do not restyle site.css components.

   Page frame:
     <header class="page-head"><div class="wrap"> h1.page-head__title, p.page-head__lede,
       p.doc__jump (optional "For owners ... For builders ..." line), .actions,
       p.page-head__meta (the dated stamp) </div></header>
     <div class="wrap"><div class="doc">
       <div class="doc__side">
         <nav aria-label="Docs pages"><ul class="doc__rail">
           two tabs in this order: /docs Overview, /docs/getting-started Getting started.
           <li><a href="/docs/x" aria-current="page">
           <span class="tape tape--s">Label</span></a></li> (current page only).
         </ul></nav>
         <details class="doc__toc"><summary>On this page</summary>
           <nav aria-label="On this page"><ol><li><a href="#id">Plain label</a></li></ol></nav>
         </details>
       </div>
       <article class="doc__body"> h2[id] per section ... </article>
     </div></div>
   The TOC is always open at 960px and wider (summary hidden) and a closed
   disclosure on phones, so the article starts high on small screens.

   Body pieces:
     hr.doc__break        heavier rule before a part change (owner path to dated
                          technical notes). No label above the next h2.
     p.doc__stamp         a dated line inside the body (ui type, ink-3).
     p.doc__jump          jump line under a lede.
     p.doc__lead          the first plain sentence under an h2 (ink-2, slightly larger).
     div.table-wrap > table.ref   reference table; scrolls sideways on phones.
     pre.code             command or output block.
     dl.terms             defined terms (dt word, dd definition).
     fieldset.checklist   real checkboxes (.check rows from site.css) the reader may tick.
     ul.lists             hairline list whose items start with a bold term.
     ol.doc-index         the docs set as a reading order: li > a.doc-index__name + p.
*/

/* ---------- Side column: set tabs plus page contents ---------- */
.doc__side{position:sticky;top:calc(var(--nav-h) + var(--s-6));display:grid;gap:var(--s-8);max-height:calc(100vh - var(--nav-h) - var(--s-12));overflow:auto;overscroll-behavior:contain;padding:0 var(--s-2) var(--s-4) var(--s-1);scrollbar-width:thin}
.doc__side .doc__rail{position:static;gap:0 var(--s-2)}
/* Same compact strip as the nav tabs (a flex child tape would grow to a full label). */
.doc__side .doc__rail .tape{display:inline-block;white-space:nowrap;padding:var(--u) calc(var(--u) * 2.5);line-height:calc(var(--u) * 6)}
.doc__side .doc__rail a:hover .tape{transform:translateY(-1px)}
.doc__side .doc__rail a .tape{transition:transform var(--dur-2) var(--ease-out)}
.page-head .actions + .page-head__meta{margin-top:var(--s-4)}
.doc__body .steps{padding-left:0}
.doc__body .callout > .tape,.doc__body p > .tape--s{padding:var(--u) calc(var(--u) * 2.5);line-height:calc(var(--u) * 6)}
.doc__toc summary{display:flex;align-items:center;min-height:var(--tap-min);font:600 var(--t-sm)/var(--lh-ui) var(--font-ui);color:var(--ink);cursor:pointer;list-style:none}
.doc__toc summary::-webkit-details-marker{display:none}
.doc__toc summary::after{content:"";width:10px;height:10px;margin-left:var(--s-2);border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;rotate:45deg;translate:0 -3px;transition:rotate var(--dur-2) var(--ease-out)}
.doc__toc[open] summary::after{rotate:225deg;translate:0 3px}
.doc__toc ol{margin:0;padding:0;list-style:none;border-left:1px solid var(--rule)}
.doc__toc li + li{margin-top:0}
.doc__toc a{display:flex;align-items:center;min-height:36px;padding:var(--s-1) 0 var(--s-1) var(--s-4);margin-left:-1px;border-left:1px solid transparent;font:400 var(--t-sm)/var(--lh-ui) var(--font-ui);color:var(--ink-2);text-decoration:none}
.doc__toc a:hover{color:var(--ink);border-left-color:var(--ink)}
.doc__toc a:focus-visible{border-radius:0}
.doc__toc .doc__toc-part{margin-top:var(--s-3);padding-top:var(--s-3);border-top:1px solid var(--rule)}
@media (min-width:960px){
  .doc__toc summary{display:none}
  @supports selector(::details-content){
    .doc__toc::details-content{content-visibility:visible;display:block}
  }
}
@supports not selector(::details-content){
  @media (min-width:960px){.doc__toc summary{display:flex}}
}
@media (max-width:959px){
  .doc__side{position:static;max-height:none;overflow:visible;gap:var(--s-2);padding:0}
  .doc__toc{border-block:1px solid var(--rule)}
  .doc__toc summary{min-height:var(--s-12)}
  .doc__toc nav{padding:0 0 var(--s-4)}
  .doc__toc a{min-height:var(--tap-min)}
}

/* ---------- Body rhythm ---------- */
.doc__body > h2[id],.doc__body [id]{scroll-margin-top:calc(var(--nav-h) + var(--s-6))}
.doc__lead{font-size:var(--t-lg);line-height:var(--lh-lede);color:var(--ink-2)}
.doc__stamp,.doc__jump{font:400 var(--t-sm)/var(--lh-ui-lg) var(--font-ui);color:var(--ink-3);font-variant-numeric:tabular-nums}
.doc__jump{margin:0 0 var(--s-6);color:var(--ink-2)}
.doc__jump a{font-weight:600;color:var(--ink)}
.doc__break{height:2px;margin:var(--s-24) 0 0;background:var(--ink)}
.doc__break + h2{margin-top:var(--s-12)}
.doc__body ul.lists{padding-left:0;list-style:none}
.doc__body ul.lists > li{padding:var(--s-3) 0;border-top:1px solid var(--rule)}
.doc__body ul.lists > li + li{margin-top:0}
.doc__body ul.lists > li > b:first-child,.doc__body ul.lists > li > strong:first-child{font:600 var(--t-md)/var(--lh-ui-lg) var(--font-ui)}
.doc__body .steps > li > p{margin:0}
.doc__body .steps > li > p + p{margin-top:var(--s-2)}
.doc__body .callout .tape + p{margin-top:0}
.doc__body .actions{margin:var(--s-8) 0}
.doc__body .pins{margin:var(--s-6) 0}
.doc__body .faq{margin:var(--s-6) 0 0}

/* ---------- Reference table ---------- */
.table-wrap{margin:var(--s-6) 0;overflow-x:auto;overscroll-behavior-x:contain;border-top:2px solid var(--ink)}
.table-wrap:focus-visible{box-shadow:var(--focus-ring)}
table.ref{width:100%;min-width:32rem;font:400 var(--t-sm)/var(--lh-ui-lg) var(--font-ui);color:var(--ink-2)}
table.ref caption{padding:0 0 var(--s-2);text-align:left;font:600 var(--t-xs)/var(--lh-ui) var(--font-ui);color:var(--ink-3);caption-side:bottom;padding-top:var(--s-3)}
table.ref th,table.ref td{padding:var(--s-3) var(--s-4) var(--s-3) 0;text-align:left;vertical-align:top;border-bottom:1px solid var(--rule)}
table.ref thead th{font-weight:600;font-size:var(--t-xs);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--ink-3)}
table.ref tbody th{font-weight:600;color:var(--ink)}
table.ref td.num,table.ref th.num{font-variant-numeric:tabular-nums lining-nums}
table.ref code{font-size:.86em;white-space:nowrap}
/* Phones: each row stacks. Give every td data-label="Column name" so the column
   name prints above its value once the header row is visually hidden.
   table.ref.ref--grid opts out: a small matrix of short values stays a grid. */
table.ref--grid{min-width:0}
table.ref--grid td{font-variant-numeric:tabular-nums}
@media (max-width:599px){
  .table-wrap:not(:has(.ref--grid)){overflow:visible}
  table.ref{min-width:0}
  table.ref:not(.ref--grid) thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  table.ref:not(.ref--grid),table.ref:not(.ref--grid) :is(tbody,tr,th,td){display:block}
  table.ref:not(.ref--grid) tr{padding:var(--s-3) 0;border-bottom:1px solid var(--rule)}
  table.ref:not(.ref--grid) :is(th,td){padding:var(--s-1) 0;border:0}
  table.ref:not(.ref--grid) tbody th{font-size:var(--t-md)}
  table.ref:not(.ref--grid) td[data-label]::before{content:attr(data-label);display:block;font-weight:600;font-size:var(--t-2xs);line-height:16px;letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--ink-3)}
  table.ref code{white-space:normal;overflow-wrap:anywhere}
  table.ref--grid :is(th,td){padding-right:var(--s-3)}
}
.page-head__title .tape--inline{white-space:nowrap}
/* Links inside list rows and cells: invisible padding lifts the hit area to 44px
   without changing line spacing (inline padding does not move lines). */
.doc__body :is(li,td,dd) a:not([class]){padding:13px 4px;margin-inline:-4px}
.doc__body ul.lists > li > a:first-child{padding-block:11px}

/* ---------- Code block ---------- */
pre.code{margin:var(--s-6) 0;padding:var(--s-4) var(--s-5);overflow-x:auto;background:var(--card);border:1px solid var(--rule);border-radius:var(--r-card);font:400 .875rem/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink);tab-size:2}
pre.code code{font-size:inherit}
pre.code:focus-visible{box-shadow:var(--focus-ring)}

/* ---------- Defined terms ---------- */
dl.terms{display:grid;grid-template-columns:minmax(9rem,max-content) minmax(0,1fr);gap:0 var(--s-6);margin:var(--s-6) 0;border-top:2px solid var(--ink)}
dl.terms dt,dl.terms dd{margin:0;padding:var(--s-3) 0;border-bottom:1px solid var(--rule)}
dl.terms dt{font:600 var(--t-md)/var(--lh-body) var(--font-ui);color:var(--ink)}
dl.terms dd{color:var(--ink-2)}
@media (max-width:599px){
  dl.terms{grid-template-columns:1fr}
  dl.terms dt{padding-bottom:0;border-bottom:0}
  dl.terms dd{padding-top:var(--s-1)}
}

/* ---------- Checklist the reader can tick (no data leaves the page) ---------- */
.checklist{margin:var(--s-6) 0;border-top:2px solid var(--ink)}
.checklist .check{padding:var(--s-3) 0;border-bottom:1px solid var(--rule);font-family:var(--font-text);font-size:var(--t-md);line-height:var(--lh-ui-lg)}
.checklist .check:has(input:checked) span{color:var(--ink)}

/* ---------- The docs set as a reading order (/docs) ---------- */
ol.doc-index{counter-reset:doc;margin:var(--s-6) 0;padding:0;list-style:none;border-top:2px solid var(--ink)}
ol.doc-index > li{counter-increment:doc;position:relative;display:grid;grid-template-columns:var(--s-10) minmax(0,1fr);gap:0 var(--s-4);padding:var(--s-5) var(--s-3) var(--s-5) 0;border-bottom:1px solid var(--rule);transition:background-color var(--dur-1) var(--ease-out)}
ol.doc-index > li + li{margin-top:0}
ol.doc-index > li::before{content:counter(doc);grid-row:1 / span 2;font:600 var(--t-lg)/1.3 var(--font-ui);font-variant-numeric:tabular-nums;color:var(--ink-3)}
.doc-index__name{justify-self:start;display:inline-flex;align-items:center;min-height:var(--tap-min);margin-block:-5px;font:600 var(--t-xl)/1.2 var(--font-display);text-decoration:none}
.doc-index__name::after{content:"";position:absolute;inset:0}
.doc-index__name:hover{text-decoration:underline;text-decoration-thickness:1px}
ol.doc-index > li:has(.doc-index__name:hover){background:var(--card)}
ol.doc-index p{grid-column:2;margin:var(--s-1) 0 0;color:var(--ink-2)}
.doc__body p a:not([class]){padding-block:11px;margin-block:-11px}