/* The docs (docs/ and docs/<slug>/): the menu beside the page, the page and its contents, over
   legal.css and blog.css, whose parts a guide's words are drawn with. This adds the parts only a
   guide has (src/guides/README.md says how each is written) and the docs' first page. */
html{scroll-behavior:smooth;scroll-padding-top:24px}

.docs{display:grid;grid-template-columns:208px minmax(0,1fr) 196px;gap:56px;align-items:start}
.docs.home{grid-template-columns:208px minmax(0,1fr)}
.docs .guide{max-width:760px;min-width:0}
.docs.home .guide{max-width:920px}

/* The menu, and the contents of the page: each stays in sight while the page scrolls. */
.docs .toc{position:sticky;top:0;max-height:100vh;overflow-y:auto;padding:80px 0 40px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.docs-menu summary{display:none}
.docs-menu nav{display:flex;flex-direction:column;gap:2px;font-size:15px;font-weight:500}
.docs-menu a{margin-left:-12px;padding:7px 12px;border-radius:10px;line-height:1.35;color:var(--muted);text-decoration:none}
.docs-menu a:hover{background:var(--card);color:var(--text)}
.docs-menu a[aria-current]{background:var(--card);color:var(--text);box-shadow:inset 2px 0 0 var(--accent)}
.docs .toc .group{margin:22px 0 6px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.docs-menu .group:first-of-type{margin-top:18px}

.onpage{font-size:14px;font-weight:500}
.onpage b{display:block;margin-bottom:12px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.onpage a{display:block;padding:6px 0 6px 14px;border-left:1px solid var(--line);line-height:1.35;color:var(--muted);text-decoration:none}
.onpage a:hover{color:var(--text)}
.onpage a[aria-current]{border-left-color:var(--accent);color:var(--text)}

/* A guide's words. */
.guide .meta time{color:var(--soft)}
.guide h3{scroll-margin-top:24px}
.guide pre{position:relative}

/* Steps: a numbered circle beside each step's heading, on a line that joins them. */
.guide .steps{position:relative;margin:28px 0 0;padding-left:48px}
.guide .steps::before{content:'';position:absolute;left:15px;top:20px;bottom:12px;width:1px;background:var(--line)}
.guide .steps>h3{position:relative;margin-top:40px}
.guide .steps>h3:first-child{margin-top:0}
.guide .steps .n{position:absolute;left:-48px;top:-3px;display:grid;place-items:center;width:31px;height:31px;border:1px solid var(--tint);border-radius:50%;background:var(--bg);font-family:var(--mono);font-size:13px;font-weight:500;color:var(--accent)}

/* A file, with its name above it. */
.guide figure.code{margin:20px 0 0;border-radius:16px;background:var(--card);overflow:hidden}
.guide figure.code figcaption{padding:11px 20px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:13px;letter-spacing:0;color:var(--muted)}
.guide figure.code pre{margin:0;padding-top:14px;border-radius:0}

/* A block of code, and the button that copies it (page.js). */
.guide .codebox{position:relative}
.guide .copy{position:absolute;top:12px;right:12px;padding:5px 11px;border:1px solid var(--line);border-radius:8px;background:var(--raised);font:600 12px/1.4 'Onest',system-ui,sans-serif;color:var(--soft);cursor:pointer;opacity:0;transition:opacity .15s}
.guide .codebox:hover .copy,.guide .copy:focus-visible{opacity:1}
.guide .copy:hover{color:var(--text)}

/* A remark beside the text. */
.guide aside{position:relative;margin:24px 0 0;padding:16px 20px 16px 52px;border:1px solid var(--tint);border-radius:16px;background:rgba(183,156,245,.06);font-size:16px;line-height:1.55}
.guide aside::before{content:'i';position:absolute;left:18px;top:17px;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:rgba(183,156,245,.18);font-size:12px;font-weight:700;color:var(--accent)}
.guide aside.warn{border-color:rgba(240,170,120,.3);background:rgba(240,170,120,.06)}
.guide aside.warn::before{content:'!';background:rgba(240,170,120,.18);color:#f0b48a}
.guide aside>:first-child{margin-top:0}
.guide aside p{margin-top:8px}

/* A picture of the panel, cut off at the bottom of its card; a dialog's whole, and narrower. */
.guide .shot.dialog{padding-bottom:24px}
.guide .shot.dialog img{max-width:520px;max-height:none;margin:0 auto;border-bottom:1px solid var(--line);border-radius:14px}

/* A list of templates, each its logo and name (render.mjs, withTemplates). */
.guide .apps{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0;padding:0;list-style:none}
.guide .apps li{margin:0}
.guide .apps a{display:flex;align-items:center;gap:10px;padding:7px 16px 7px 8px;border:1px solid var(--line);border-radius:999px;font-size:15px;font-weight:600;text-decoration:none}
.guide .apps a:hover{border-color:var(--tint);background:var(--card)}
.guide .apps img{width:26px;height:26px;padding:4px;border-radius:8px;background:var(--text);object-fit:contain}

/* The guides before and after. */
.guide .pager{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:56px 0 0}
.guide .pager a{display:block;padding:18px 22px;border:1px solid var(--line);border-radius:18px;font-weight:600;line-height:1.35;text-decoration:none}
.guide .pager a:hover{background:var(--card)}
.guide .pager small{display:block;margin-bottom:4px;font-size:13px;font-weight:500;color:var(--muted)}
.guide .pager .after{grid-column:2;text-align:right}

/* The docs' first page: the ways to deploy, the guides, the frameworks, the references. */
.guide .ways{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin:24px 0 0;counter-reset:way}
.guide .ways>div{display:flex;flex-direction:column;padding:22px;border-radius:20px;background:var(--card);font-size:15px;line-height:1.5;color:var(--muted);counter-increment:way}
.guide .ways>div::before{content:counter(way);display:grid;place-items:center;width:26px;height:26px;margin-bottom:14px;border-radius:50%;background:var(--raised);font-family:var(--mono);font-size:13px;color:var(--accent)}
.guide .ways h3{margin:0;font-size:17px}
.guide .ways p{margin:8px 0 0}
.guide .ways pre{margin:12px 0 0;padding:12px 14px;border-radius:12px;background:var(--bg);font-size:12.5px;white-space:pre-wrap;overflow-wrap:anywhere}
.guide .ways .go{margin-top:auto;padding-top:14px;font-weight:600}

.guide .tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin:24px 0 0;padding:0;list-style:none}
.guide .tiles li{position:relative;margin:0;padding:24px;border:1px solid transparent;border-radius:20px;background:var(--card);transition:border-color .15s}
.guide .tiles li:hover{border-color:var(--tint)}
.guide .tiles .icon{display:block;width:40px;height:40px;margin-bottom:18px;padding:9px;border-radius:12px;background:rgba(183,156,245,.12);fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.guide .tiles small{display:block;margin-bottom:6px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.guide .tiles a{font-size:19px;line-height:1.3;font-weight:600;text-decoration:none}
/* The whole tile is the link. */
.guide .tiles a::after{content:'';position:absolute;inset:0}
.guide .tiles p{margin:10px 0 0;font-size:15px;line-height:1.5;color:var(--muted)}
.guide .refs a{font-size:17px}

.guide .chips{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0;padding:0;list-style:none}
.guide .chips li{margin:0}
.guide .chips a{display:block;padding:9px 16px;border:1px solid var(--line);border-radius:999px;font-size:15px;font-weight:600;text-decoration:none}
.guide .chips a:hover{border-color:var(--tint);background:var(--card)}

@media (max-width:1180px){
  .docs{grid-template-columns:208px minmax(0,1fr)}
  .onpage{display:none}
}

@media (max-width:900px){
  .docs,.docs.home{display:block}
  .docs .docs-menu{position:static;max-height:none;margin-top:12px;padding:0;border-radius:14px;background:var(--card)}
  .docs-menu summary{display:block;padding:14px 18px;font-size:15px;font-weight:600;cursor:pointer}
  .docs-menu nav{padding:0 18px 16px 30px}
  .docs-menu a:hover,.docs-menu a[aria-current]{background:var(--raised)}
  .guide .steps{padding-left:42px}
  .guide .steps .n{left:-42px}
  .guide .pager{grid-template-columns:1fr}
  .guide .pager .after{grid-column:1}
}

/* A phone: each step's number stands before its heading, and the step takes the whole width. */
@media (max-width:600px){
  .guide .steps{padding-left:0}
  .guide .steps::before{display:none}
  .guide .steps .n{position:static;display:inline-grid;width:26px;height:26px;margin-right:8px;vertical-align:2px;font-size:12px}
}

@media (hover:none){
  .guide .copy{opacity:1}
}