/* Docs and plugins pages. Loaded after site.css. */

.doc-head{padding-block:48px 32px;border-bottom:1px solid var(--chrome-line)}
.doc-head h1{font-size:34px;margin:0 0 12px;max-width:20ch}
@media (min-width:860px){.doc-head h1{font-size:44px}}
.doc-head .lede{max-width:62ch}
.crumbs{font-size:13px;line-height:1.4;color:var(--text-dim);margin:0 0 12px}
.crumbs a{color:var(--text-dim);text-underline-offset:3px}
.crumbs a:hover{color:var(--text)}

.doc{display:grid;grid-template-columns:232px minmax(0,1fr);gap:24px 72px;padding-block:40px 120px}
@media (max-width:900px){.doc{grid-template-columns:minmax(0,1fr)}}
.toc{position:sticky;top:88px;align-self:start;font-size:13px}
@media (max-width:900px){.toc{position:static;border:1px solid var(--chrome-line);border-radius:10px;padding:12px 16px;background:var(--side-bg)}}
/* on a phone, only this page's sections: the header and the pager cover the rest of the guide */
@media (max-width:900px){.toc p:nth-of-type(2),.toc ul:nth-of-type(2){display:none}.toc ul{margin-bottom:0}}
.toc p{font:600 11px/1.4 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim);margin:0 0 8px}
.toc-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:28px;padding:0;border:0;background:none;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;cursor:pointer}
.toc-toggle::after{content:"";width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform var(--t-move) var(--ease)}
.toc-toggle[aria-expanded="true"]::after{transform:rotate(225deg) translate(-2px,0)}
.toc p:has(.toc-toggle){margin:0}
.toc p:has(.toc-toggle[aria-expanded="true"]){margin-bottom:8px}
.toc ul{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:2px}
.toc a{display:flex;align-items:center;min-height:28px;padding:0 8px;margin-left:-8px;border-radius:6px;text-decoration:none;color:var(--text-dim);transition:background-color var(--t-colour) var(--ease),color var(--t-colour) var(--ease)}
.toc a:hover{background:var(--chrome-bg-2);color:var(--text)}
.toc a[aria-current="page"]{background:var(--accent-soft);color:var(--text);font-weight:600;box-shadow:inset 2px 0 0 var(--accent)}

.prose{max-width:74ch;min-width:0}
.prose > :first-child{margin-top:0}
.prose h2{font-size:26px;max-width:none;margin:48px 0 12px;scroll-margin-top:88px}
.prose h3{font-size:18px;margin:32px 0 8px;scroll-margin-top:88px}
.prose p,.prose li{color:var(--text-dim)}
.prose p{margin:0 0 12px}
.prose strong{color:var(--text);font-weight:600}
.prose ul,.prose ol{margin:0 0 16px;padding-left:20px}
.prose li{margin-bottom:4px}
.prose li::marker{color:var(--text-faint)}
.prose code{font:400 13px var(--mono);background:var(--field);border:1px solid var(--chrome-line);padding:1px 4px;border-radius:4px;color:var(--text)}
.prose pre{margin:0 0 16px;min-height:0}
.prose pre code{background:none;border:0;padding:0;color:inherit;font-size:inherit}
.prose kbd{font:600 12px/1 var(--sans);border:1px solid var(--field-line);border-bottom-width:2px;border-radius:4px;padding:2px 6px;background:var(--field);color:var(--text)}
.ui{font-weight:600;color:var(--text)}
.prose .tbl-wrap{margin:8px 0 24px}
.prose table{min-width:560px;font-size:13px;line-height:1.4}
.prose td,.prose th{padding:8px 16px}
.prose td code,.prose th code{white-space:nowrap}

.callout{margin:0 0 16px;padding:12px 16px;border-radius:10px;background:var(--chrome-bg-2);border:1px solid var(--chrome-line)}
.callout p{margin:0;color:var(--text)}
.callout p + p{margin-top:8px}
.callout.warn{border-color:var(--warn)}

.cards{list-style:none;padding:0;margin:8px 0 24px;display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:12px}
.cards li{margin:0;padding:16px;border:1px solid var(--chrome-line);border-radius:10px;background:var(--chrome-bg-2);transition:border-color var(--t-colour) var(--ease)}
.cards li:has(a:hover){border-color:var(--field-line)}
.cards li b{display:block;font:600 15px/1.2 var(--serif);color:var(--text);margin-bottom:4px}
.cards li span{display:block;font-size:13px;line-height:1.4;color:var(--text-dim)}
.cards li small{display:block;margin-top:8px;font-size:12px;line-height:1.4;color:var(--text-dim)}
.cards a{text-decoration:none}
.cards a:hover b{color:var(--accent)}

.flow{list-style:none;counter-reset:s;margin:8px 0 24px;padding:0}
.flow li{counter-increment:s;display:grid;grid-template-columns:40px minmax(0,1fr);gap:2px 12px;padding:12px 0;border-bottom:1px solid var(--chrome-line);margin:0}
.flow li::before{content:counter(s);grid-row:span 2;width:28px;height:28px;border-radius:50%;border:1px solid var(--field-line);display:grid;place-items:center;font:600 13px var(--sans);color:var(--text);font-feature-settings:"tnum"}
.flow b{color:var(--text);font-weight:600}

.pager{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:48px;padding-top:24px;border-top:1px solid var(--chrome-line)}
.pager a{text-decoration:none;font-weight:600;color:var(--accent)}
.pager a:hover{color:var(--text)}
.pager small{display:block;font:600 11px/1.4 var(--sans);color:var(--text-dim);text-transform:uppercase;letter-spacing:.06em}

/* an app screenshot inside the guide */
.prose .shot-doc{margin:8px 0 24px}
.prose a.shot-frame{cursor:zoom-in}
.prose .shot-doc figcaption{margin-top:8px}
.prose .pair-half p{margin:0;color:var(--win-dim)}

/* ---------- print: the guide on paper, without the site around it ---------- */
@media print{
  .site-head,.toc,.pager,footer,.skip{display:none}
  body{background:#fff;color:#1f1e1b;font-size:11pt}
  .doc{display:block;padding:0}
  .prose{max-width:none}
  .prose p,.prose li{color:#1f1e1b}
  .prose a{color:inherit;text-decoration:none}
  .prose h2,.prose h3{break-after:avoid}
  .tbl-wrap,.callout,.flow li{break-inside:avoid}
  .reveal [data-rv]{opacity:1;transform:none}
}
.toc ul[hidden]{display:none}