/* Help pages: a reading surface. Shares tokens and header with site.css. */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.top nav a[aria-current]{background:var(--acc-tint)}

/* Index */
.hub{max-width:1000px}
.hub h1,.doc h1{font-size:clamp(34px,6vw,48px);line-height:1.08}
.sum{margin-top:10px;font-size:19px;color:var(--ink-2);max-width:34em}
.find{margin:26px 0 8px}
.find input{width:100%;height:56px;font:400 18px var(--sans);color:var(--ink);background:var(--surface);border:1.5px solid var(--line-2);border-radius:14px;padding:0 18px 0 50px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%2355535A' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:16px 50%;transition:border-color .15s,box-shadow .15s}
.find input:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 4px var(--acc-tint)}
.grp{margin-top:36px}
.grp h2{font:600 22px/1.2 var(--serif);margin-bottom:14px}
.tiles{list-style:none;padding:0;display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.tile{position:relative;display:grid;grid-template-rows:auto auto 1fr;gap:6px;height:100%;padding:20px 20px 22px;background:var(--surface);border:1.5px solid var(--line);border-radius:16px;color:var(--ink);text-decoration:none;transition:border-color .15s,transform .2s var(--ease)}
.tile:hover{border-color:var(--acc);transform:translateY(-2px)}
.tile svg{width:46px;height:46px;padding:11px;border-radius:12px;background:var(--acc-tint);margin-bottom:8px;fill:none;stroke:var(--acc-ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tile strong{font:600 18px/1.3 var(--sans)}
.tile span{color:var(--ink-2);font-size:15px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tile.big{grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:18px;align-items:center;background:var(--ink);border-color:var(--ink);color:#fff}
.tile.big svg{grid-row:1/3;margin:0;width:56px;height:56px;padding:13px;background:rgba(255,255,255,.12);stroke:#fff}
.tile.big span{color:rgba(255,255,255,.82);font-size:16px}
.tile.big:hover{border-color:var(--acc)}
.grp:first-child .tiles{grid-template-columns:1fr}
.none{padding:22px 0;color:var(--ink-2)}
@media(prefers-reduced-motion:reduce){.tile{transition:none}.tile:hover{transform:none}}

/* Article */
.docs{max-width:1120px;margin:0 auto;padding:12px 20px 72px;display:grid;gap:18px}
@media(min-width:900px){.docs{grid-template-columns:250px minmax(0,1fr);gap:64px;padding-top:28px}.side-m{display:none}}
@media(max-width:899px){.side{display:none}}
.side{position:sticky;top:20px;align-self:start;max-height:calc(100vh - 40px);overflow:auto;font-size:15px}
.side .back{display:inline-block;margin-bottom:14px;font-weight:600;color:var(--ink);text-decoration:none}
.side ul,.side-m ul{list-style:none;padding:0}
.side h2,.side-m h2{font:600 12px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);margin:20px 0 6px}
.side-m h2{margin-top:12px}
.side a,.side-m li a{display:block;padding:8px 12px;margin-left:-12px;border-radius:9px;color:var(--ink-2);text-decoration:none;line-height:1.35}
.side a:hover,.side-m li a:hover{background:var(--surface);color:var(--ink)}
.side a[aria-current],.side-m a[aria-current]{background:var(--acc-tint);color:var(--acc-ink);font-weight:600}
.side-m{border:1.5px solid var(--line-2);border-radius:12px;background:var(--surface);padding:0 14px}
.side-m summary{padding:14px 0;font-weight:600;cursor:pointer}
.side-m ul{padding-bottom:10px}
.doc{max-width:680px;font-size:18px;line-height:1.7}
.doc .sum{margin-bottom:28px}
.doc h2{font:600 27px/1.2 var(--serif);letter-spacing:-.01em;margin:44px 0 12px}
.doc p,.doc ul,.doc ol{margin-bottom:16px}
.doc ul{list-style:none;padding:0}
.doc ul li{position:relative;padding-left:26px;margin-bottom:8px}
.doc ul li::before{content:"";position:absolute;left:6px;top:.7em;width:8px;height:8px;border-radius:50%;background:var(--acc)}
.doc ol{list-style:none;padding:0;counter-reset:s}
.doc ol li{position:relative;counter-increment:s;padding:2px 0 14px 50px;margin:0}
.doc ol li::before{content:counter(s);position:absolute;left:0;top:0;width:34px;height:34px;border-radius:50%;background:var(--ink);color:#fff;font:600 16px/34px var(--sans);text-align:center}
.doc ol li:not(:last-child)::after{content:"";position:absolute;left:16px;top:38px;bottom:4px;width:2px;background:var(--line)}
.doc b{font-weight:600}
.doc code{background:var(--surface);border:1px solid var(--line);padding:1px 7px;border-radius:6px;font-size:.88em}
.pn{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:48px 0 8px}
.pn a{display:grid;gap:2px;padding:16px 18px;border:1.5px solid var(--line-2);border-radius:14px;background:var(--surface);color:var(--ink);text-decoration:none;font-weight:600;line-height:1.3;transition:border-color .15s}
.pn a:hover{border-color:var(--acc)}
.pn a.n{text-align:right}
.pn small{font-weight:500;color:var(--ink-2);font-size:13px}
.ask{margin-top:32px;font-size:16px;color:var(--ink-2)}
@media(max-width:560px){.pn{grid-template-columns:1fr}.pn a.n{text-align:left}}

/* Fill every row: 4 tiles make 2 x 2, 5 tiles make 3 over 2 (the last two wider). */
@media(min-width:760px){
  .grp:nth-child(2) .tiles{grid-template-columns:repeat(2,1fr)}
  .grp:nth-child(n+3) .tiles{grid-template-columns:repeat(6,1fr)}
  .grp:nth-child(n+3) .tiles li{grid-column:span 2}
  .grp:nth-child(n+3) .tiles li:nth-child(n+4){grid-column:span 3}
}