/* /docs on paper (DS2-4, docs/specs/ds2-4-the-docs.md): this page's own layout, and nothing else. A contents rail
   in mono beside one reading column.
   The tokens, the fonts, the top line, the footer and the pieces several reading pages share (an address, a list of
   facts, a note, the rows that open) are design/paper.css's; what moves is design/motion.css's.
   The old docs/docs.css, which /stats, /holders and /face shared, went with DS2-5. */

/* A wording for the other kind of site wallet is out of the page, whatever its element (PY8). */
[data-site-wallet][hidden]{display:none !important}

/* A link in the contents glides to its section, unless less motion is asked for. Reading text avoids a last line of one word. */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
p,li,dd{text-wrap:pretty}

.dwrap{--rail:204px;--rgap:clamp(40px,7vw,104px)}
.dhead{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);column-gap:var(--rgap);padding-block:clamp(32px,5vw,72px) clamp(36px,4.6vw,64px)}
.dhead .eyebrow{padding-top:clamp(8px,1.1vw,18px)}
.dhead h1{font-size:clamp(40px,5.2vw,78px)}
.dhead .lede{margin-top:clamp(18px,2vw,28px);font-size:clamp(17px,1.45vw,21px)}
/* The hairline under the head stops at the gutters, so it is drawn as a background. */
.docs{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);column-gap:var(--rgap);background:linear-gradient(var(--line),var(--line)) no-repeat var(--gut) 0 / calc(100% - 2 * var(--gut)) 1px}

/* ---------- the contents: a rail that stays in view, a dot on the section being read ---------- */
.toc{position:sticky;top:0;align-self:start;max-height:100vh;overflow:auto;display:grid;gap:22px;padding-block:clamp(44px,5vw,72px) 32px}
.toc-g p{margin-bottom:6px;font:400 11.5px/1 var(--mono);color:var(--ink-3)}
.toc a{display:flex;align-items:center;gap:9px;min-height:28px;font:400 12.5px/1.3 var(--mono);color:var(--ink-2);text-decoration:none}
.toc a::before,.toc-m nav a::before{content:"";width:6px;height:6px;border-radius:50%;flex:none}
.toc a:hover{color:var(--ink)}
.toc a[aria-current],.toc-m nav a[aria-current]{color:var(--ink)}
.toc a[aria-current]::before,.toc-m nav a[aria-current]::before{background:var(--acc)}
.toc .out::after{content:"\2197";color:var(--ink-3)}
.toc-m{display:none}

/* ---------- the reading column ---------- */
.content{min-width:0;max-width:800px;padding-bottom:clamp(40px,6vw,96px)}
.doc{padding-block:clamp(44px,5vw,72px);border-top:1px solid var(--line);scroll-margin-top:0}
.doc:first-child{border-top:0}
.doc > * + *{margin-top:18px}
.doc h2{font-size:clamp(32px,3.4vw,48px);font-weight:400;letter-spacing:-.045em;line-height:1.04;text-wrap:balance}
.doc .sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.doc p{font-size:17px;line-height:1.6;color:var(--ink-2);max-width:32em}
.doc .intro{margin-top:22px;font-size:clamp(18px,1.5vw,21px);line-height:1.45;letter-spacing:-.01em;color:var(--ink);max-width:31em}
.doc h3{font-size:22px;font-weight:450;letter-spacing:-.03em;line-height:1.2;scroll-margin-top:24px}
.doc > h3{margin-top:44px}
.doc p.small{font-size:14.5px;color:var(--ink-3);max-width:44em}
.doc a:not(.btn):not(.part){color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.doc a:not(.btn):not(.part):hover{text-decoration-thickness:2px}
.doc .aside p{max-width:44em}
.doc .faq details > p{max-width:34em}
.doc > .aside + .facts{margin-top:0}
.doc > .aside + .facts > div:first-child{border-top:0}
.doc .code{margin-block:18px}
.doc > .addr{margin-top:22px}
.doc > .facts,.doc > .aside,.doc > .steps,.doc > .parts,.doc > .kit,.doc > .faq,.doc > .lines{margin-top:24px}
/* A section that ends in ruled rows: the next section's hairline closes them. */
.doc:has(> :is(.facts,.parts,.faq,.aside:not(.warn)):last-child){padding-bottom:0}
.doc > :is(.facts,.parts,.faq,.aside:not(.warn)):last-child{border-bottom:0}

/* The three parts: columns divided by hairlines. Each is a link. */
.parts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.part{display:flex;flex-direction:column;gap:10px;padding:20px 22px 22px;text-decoration:none;color:inherit}
.part + .part{border-left:1px solid var(--line)}
.part:first-child{padding-left:0}
.part:last-child{padding-right:0}
.part-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.doc .part h3{margin:0;font-size:26px;font-weight:400;letter-spacing:-.04em}
.doc .part p{font-size:15px;line-height:1.5}
.part .go{margin-top:auto;padding-top:6px;font:400 12.5px/1 var(--mono);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.part:hover .go{text-decoration-thickness:2px}

/* The loop's steps: a number, the step, its statuses. */
.steps{border-bottom:1px solid var(--line)}
.steps li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;align-items:baseline;padding:16px 0 17px;border-top:1px solid var(--line)}
.steps .n{font:400 12.5px/1 var(--mono);color:var(--ink-3)}
.doc .steps p{font-size:clamp(18px,1.5vw,21px);line-height:1.35;letter-spacing:-.02em;color:var(--ink);max-width:none}
.sts{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:11px}

/* The brand kit: each file in a frame, its name and its Download under it. */
.kit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 20px}
.kit-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.kit-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.kit-span2{grid-column:span 2}
.kit-item{display:flex;flex-direction:column;min-width:0}
.kit-art{flex:1;display:grid;place-items:center;min-height:150px;padding:26px 22px}
.kit-art img{width:auto;height:auto;max-width:100%;max-height:110px}
.kit-art.square img{max-height:96px}
.kit-art.photo{padding:0;min-height:0}
.kit-art.photo img{width:100%;height:260px;max-height:none;object-fit:cover;object-position:50% 20%}
.kit-art.photo.sq img{height:auto;aspect-ratio:1/1}
.kit-art.photo-pad{padding:18px}
.kit-art.photo-pad img{max-height:none;width:100%}
.kit-item figcaption{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;padding-top:10px}
.kit-item figcaption span{display:grid;gap:2px;min-width:0;font-size:14.5px;font-weight:500;line-height:1.3}
.kit-item figcaption small{font:400 11.5px/1.4 var(--mono);color:var(--ink-3);white-space:nowrap}

/* ---------- a phone: the contents become a bar held at the top, which opens to a list ---------- */
@media (max-width:900px){
  .dhead,.docs{grid-template-columns:1fr}
  .dhead{padding-top:18px}
  .dhead .eyebrow{padding:0 0 12px}
  .dhead h1{font-size:clamp(40px,11.5vw,78px)}
  .docs{background:none}
  .toc{display:none}
  .toc-m{display:block;position:sticky;top:0;z-index:40;background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .toc-m summary{list-style:none;display:flex;align-items:center;gap:10px;min-height:48px;padding-inline:var(--gut);font:400 12.5px/1 var(--mono);color:var(--ink-3);cursor:pointer}
  .toc-m summary::-webkit-details-marker{display:none}
  .toc-m summary::after{content:"\25BE";margin-left:auto;color:var(--ink)}
  .toc-m[open] summary::after{content:"\25B4"}
  .toc-m .now{color:var(--ink)}
  .toc-m nav{display:grid;max-height:62vh;overflow:auto;padding:0 var(--gut) 8px}
  .toc-m nav a{display:flex;align-items:center;gap:9px;min-height:44px;border-top:1px solid var(--line);font:400 13px/1 var(--mono);color:var(--ink-2);text-decoration:none}
  .doc{padding-block:40px;scroll-margin-top:49px}   /* its hairline lands under the held bar's own */
  .doc h3{scroll-margin-top:64px}
  .parts{grid-template-columns:1fr}
  .part,.part:first-child,.part:last-child{padding:18px 0 20px}
  .part + .part{border-left:0;border-top:1px solid var(--line)}
  .steps li{grid-template-columns:28px minmax(0,1fr)}
  .kit{grid-template-columns:1fr}
  .kit-3,.kit-4{grid-template-columns:1fr 1fr;gap:22px 12px}
  .kit-art.photo img{height:200px}
  .kit .btn-sm,.addr .btn-sm{min-height:44px}
}