/* The documentation at /docs: a menu of sections beside the page on a wide screen, folded into
   "All documentation" above it on a phone. Everything else comes from site.css. */

.docs{display:grid; grid-template-columns:232px minmax(0, 1fr); gap:56px; padding-block:48px 120px; align-items:start}
.docs-nav{position:sticky; top:88px; max-height:calc(100vh - 108px); overflow-y:auto; font-size:14.5px; padding-right:8px}
.docs-home{display:block; font-weight:600; color:var(--ink); text-decoration:none; margin-bottom:14px}
.docs-menu-list{list-style:none; margin:0; padding:0; display:grid; gap:2px}
.docs-menu-list a{display:block; padding:5px 10px; border-radius:7px; color:var(--ink-2); text-decoration:none; line-height:1.35}
.docs-menu-list a:hover{background:var(--ground-2); color:var(--ink)}
.docs-menu-list li.here > a{color:var(--ink); font-weight:600}
.docs-menu-list ul{list-style:none; margin:2px 0 8px; padding:0 0 0 10px; border-left:1px solid var(--line); display:grid; gap:1px}
.docs-menu-list ul a{font-size:14px; padding:4px 10px}
.docs-menu-list a[aria-current="page"]{background:var(--accent-wash); color:var(--accent-deep); font-weight:500}
.docs-mobile{display:none}

.docs-main{max-width:760px; min-width:0}
.docs-crumbs{font-size:14px; color:var(--ink-3); margin:0 0 14px}
.docs-crumbs a{color:var(--ink-3); text-decoration:none}
.docs-crumbs a:hover{color:var(--ink)}
.docs-main h1, .docs-index h1{font-family:var(--serif); font-weight:400; letter-spacing:-.016em; line-height:1.1;
  font-size:clamp(2.1rem, 4.2vw, 2.9rem); color:var(--ink); margin:0}
.docs-summary{font-size:18.5px; line-height:1.55; color:var(--ink-2); margin:14px 0 32px; max-width:680px}
.docs-main .prose{font-size:16.5px; line-height:1.7}
.docs-main .prose h2{font-size:1.5rem; margin-top:40px}
.docs-main .prose h3{font-family:var(--sans); font-size:1.06rem; font-weight:600; color:var(--ink); margin-top:28px}
.docs-main .prose li + li{margin-top:6px}

.prose .note{background:var(--accent-wash); border-left:3px solid var(--accent); border-radius:0 10px 10px 0;
  padding:12px 16px; color:var(--ink); font-size:15.5px}
.prose .note.warn{background:#FEF6E7; border-left-color:#C2780A}

.docs-list{list-style:none !important; padding:0 !important; display:grid; gap:0; border-top:1px solid var(--line)}
.docs-list li{padding:12px 0; border-bottom:1px solid var(--line); margin:0 !important}
.docs-list li a{font-weight:600; text-decoration:none}
.docs-list li span{display:block; font-size:15px; color:var(--ink-3); line-height:1.5; margin-top:2px}

.docs-updated{font-size:13.5px; color:var(--ink-3); margin:56px 0 0}
.docs-pn{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:20px}
.docs-pn a{display:block; border:1px solid var(--line); border-radius:12px; padding:14px 16px; text-decoration:none;
  color:var(--ink); background:var(--paper); font-weight:500; line-height:1.35}
.docs-pn a:hover{border-color:var(--line-2)}
.docs-pn a span{display:block; font-size:12.5px; color:var(--ink-3); font-weight:400; margin-bottom:3px}
.docs-pn .next{text-align:right; grid-column:2}

.docs-index{padding-block:56px 120px}
.docs-index .docs-summary{margin-bottom:40px}
.docs-cards{display:grid; grid-template-columns:repeat(auto-fill, minmax(290px, 1fr)); gap:16px}
.docs-card{border:1px solid var(--line); border-radius:14px; background:var(--paper); padding:20px 22px}
.docs-card h2{font-family:var(--sans); font-size:1.08rem; font-weight:600; margin:0}
.docs-card h2 a{color:var(--ink); text-decoration:none}
.docs-card h2 a:hover{color:var(--accent-deep)}
.docs-card p{font-size:15px; color:var(--ink-3); line-height:1.5; margin:6px 0 12px}
.docs-card ul{list-style:none; margin:0; padding:0; display:grid; gap:6px; font-size:14.5px}
.docs-card ul a{color:var(--accent-deep); text-decoration:none}
.docs-card ul a:hover{text-decoration:underline; text-underline-offset:3px}

@media (max-width:900px){
  .docs{grid-template-columns:minmax(0, 1fr); gap:0; padding-block-start:24px}
  .docs-nav{display:none}
  .docs-mobile{display:block; border:1px solid var(--line); border-radius:12px; background:var(--paper);
    padding:10px 14px; margin-bottom:28px; font-size:15px}
  .docs-mobile summary{cursor:pointer; font-weight:600; color:var(--ink)}
  .docs-mobile .docs-menu-list{margin-top:10px}
  .docs-pn{grid-template-columns:1fr}
  .docs-pn .next{grid-column:1}
}

/* Legal pages (/privacy): one column, with the company's identification box on top. */
.legal{max-width:calc(760px + 2 * var(--gutter)); padding-block:56px 120px}
.legal h1{font-family:var(--serif); font-weight:400; letter-spacing:-.016em; line-height:1.1;
  font-size:clamp(2.1rem, 4.2vw, 2.9rem); color:var(--ink); margin:0}
.legal .docs-updated{margin:10px 0 32px}
.legal .prose{font-size:16.5px; line-height:1.7}
.legal .prose h2{font-size:1.5rem; margin-top:40px}
.prose .legal-id{border:1px solid var(--line); border-radius:12px; background:var(--paper); padding:16px 20px; font-size:15px; line-height:1.55}
.prose .legal-id p{margin:0}
.prose .legal-id p + p{margin-top:4px}