/* Product pages, guides, reference and privacy policies. The tokens, top bar
 * and footer come from portfolio.css, so these pages look like the home page;
 * this file only styles the reading column. */

:root { --card: var(--surface); }

.doc { max-width: 760px; margin: 0 auto; padding: 40px 22px 72px; line-height: 1.65; overflow-wrap: break-word; }
.doc h1 { margin: 0 0 8px; font-size: clamp(28px, 4vw, 38px); line-height: 1.15; letter-spacing: -0.02em; font-weight: 750; }
.doc h2 { margin: 36px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--line); font-size: 20px; letter-spacing: -0.01em; }
.doc h3 { margin: 24px 0 6px; font-size: 17px; }
.doc .date, .doc .sub { margin: 0 0 24px; color: var(--dim); font-size: 16px; }
.doc ul, .doc ol { padding-left: 22px; }
.doc li { margin-bottom: 8px; }
.doc strong { font-weight: 600; }
.doc .stamp { margin: 36px 0 0; color: var(--dim); font-size: 14px; }
.doc h2[id], .doc h3[id], .doc h4[id] { scroll-margin-top: 130px; }

.doc .crumbs { margin: 0 0 22px; font-size: 14px; color: var(--dim); }
.doc .crumbs a { text-decoration: none; }

.doc .card {
  display: block; margin-bottom: 14px; padding: 16px 18px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
  color: inherit; text-decoration: none;
}
.doc .card:hover { border-color: var(--accent); }
.doc .card h2, .doc .card h3 { margin: 0 0 4px; padding: 0; border: 0; font-size: 16px; }
.doc .card p { margin: 0; color: var(--dim); font-size: 14px; }

.doc .actions { margin: 20px 0 0; }
.doc .search { top: 61px; }
.doc .actions .stamp { margin: 0 0 0 8px; }


/* Product tours get more room than the documentation reading column. */
.product-page { max-width: 1000px; }
.product-page > p, .product-page > ul, .product-page > ol { max-width: 72ch; }
.product-heading { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.product-heading .tool-icon { width: 48px; height: 48px; }
.product-heading h1 { margin: 0; }
.product-tour .tour { margin: 24px auto 0; }
.product-tour .tour.narrow { max-width: 440px; }
.screenshot-hint { text-align: center; color: var(--dim); font-size: 14px; }

@media (max-width: 640px) { .doc .search { top: 101px; } .doc h2[id], .doc h3[id], .doc h4[id] { scroll-margin-top: 170px; } }