/* Sequences: the documentation pages (/docs, /docs/guide, /docs/install, /releases, /roadmap), after style.css. It
   uses only the colors and sizes defined there, as offer.css does: the top bar, hero, pill, buttons, tables, code and
   footer come from style.css, and this file adds the compact hero, the row of pages, the guides' "On this page" list
   and text, the cards of the docs home, the release notes and the roadmap. Every link a finger presses outside a
   sentence is at least 44 px tall. */

/* A compact hero: the page's name, one line under it and the row of pages. */
.docs-hero .hero-inner { padding-bottom: 36px; }
@media (min-width: 768px) {
  .docs-hero .hero-inner { padding-bottom: 44px; }
}
.docs-pill { margin-bottom: 16px; }
.docs-title { font-size: clamp(1.875rem, 1.3rem + 2.2vw, 3rem); }
.docs-nav { width: 100%; margin-top: 24px; }
.docs-nav ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.docs-nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--line-2); border-radius: 999px; background: var(--card); box-shadow: var(--shadow-s);
  font-size: 14px; font-weight: 500; color: var(--ink); text-decoration: none;
}
.docs-nav a:hover { border-color: var(--field); }
.docs-nav a[aria-current="page"] { border-color: var(--brand-ink); background: var(--brand-ink); color: var(--card); }

.docs-main { padding-block: 40px 64px; }
@media (min-width: 768px) {
  .docs-main { padding-block: 48px 80px; }
}

/* The guides: "On this page" above the text on a phone and a tablet, then a list beside it from 1024 px. */
.docs-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.docs-toc-title { margin-bottom: 8px; font: 400 12px/1.3 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.docs-toc ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.docs-toc a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  border: 1px solid var(--line-faint); border-radius: var(--radius-s); background: var(--card);
  font-size: 14px; color: var(--ink); text-decoration: none;
}
.docs-toc a:hover { border-color: var(--line-2); color: var(--brand-link); }
@media (min-width: 1024px) {
  .docs-layout { grid-template-columns: 220px minmax(0, 1fr); gap: 48px; align-items: start; }
  .docs-toc { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; }
  .docs-toc ol { display: grid; gap: 0; }
  .docs-toc a { display: flex; padding: 0 10px; border-color: transparent; background: none; line-height: 1.3; }
  .docs-toc a:hover { border-color: transparent; background: var(--chip); }
}

.docs-body { min-width: 0; max-width: 46rem; font-size: 16px; line-height: 1.6; }
.docs-section { scroll-margin-top: 16px; }
.docs-section + .docs-section { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--line-faint); }
.docs-h2 {
  font-size: clamp(1.375rem, 1.15rem + 0.9vw, 1.75rem); line-height: 1.2; font-weight: 600; letter-spacing: -0.01em;
  color: var(--brand-ink); text-wrap: balance; scroll-margin-top: 16px;
}
.docs-h3 { margin-top: 28px; font-size: 18px; line-height: 1.3; font-weight: 600; color: var(--brand-ink); scroll-margin-top: 16px; }
.docs-section > p, .docs-list, .docs-note, .docs-code, .docs-table { margin-top: 14px; }
.docs-section > p { text-wrap: pretty; }
.docs-list { display: grid; gap: 6px; padding-left: 1.4em; }
.docs-list li { padding-left: 2px; }
.docs-note { padding: 12px 16px; border-radius: var(--radius-s); background: var(--brand-tint); }
.docs-body code, .docs-releases code, .docs-quarters code {
  padding: 1px 5px; border-radius: 5px; background: var(--chip);
  font: 0.86em/1.4 var(--font-mono); overflow-wrap: anywhere;
}
.docs-code { max-height: none; border: 1px solid var(--line); border-radius: var(--radius); }
.docs-code code { padding: 0; border-radius: 0; background: none; font: inherit; overflow-wrap: normal; }
.docs-table .table { font-size: 14px; line-height: 1.5; }
.docs-table .table th { white-space: normal; }
.docs-table .table tbody tr:hover td { background: none; }
.docs-table .table td:first-child { min-width: 9rem; }

/* The docs home: one card for each page, one to a row on a phone, two from 640 px and three from 1024 px. The title
   link covers its card. */
.docs-home { border-bottom: 0; }
.docs-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) {
  .docs-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .docs-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.docs-card {
  position: relative; display: grid; align-content: start; gap: 6px; padding: 16px 20px 20px;
  border: 1px solid var(--line-faint); border-radius: var(--radius); background: var(--card);
}
.docs-card:hover { border-color: var(--line-2); box-shadow: var(--shadow); }
.docs-card:focus-within { border-color: var(--brand-link); }
.docs-card-title { font-size: 18px; line-height: 1.3; font-weight: 600; }
.docs-card-title a { display: inline-flex; align-items: center; min-height: 44px; color: var(--brand-ink); text-decoration: none; }
.docs-card-title a::after { content: ''; position: absolute; inset: 0; border-radius: var(--radius); }
.docs-card-title a:focus-visible { outline: none; }
.docs-card-title a:focus-visible::after { outline: 2px solid var(--brand-link); outline-offset: 2px; }
.docs-card p { font-size: 15px; line-height: 22px; color: var(--ink-2); }
.docs-card .docs-card-meta { margin-top: 4px; font: 400 12.5px/1.4 var(--font-mono); color: var(--ink-2); }
.docs-contact { margin-top: 28px; font-size: 15px; line-height: 22px; text-align: center; color: var(--ink-2); overflow-wrap: anywhere; }

/* Release notes: one entry per release, newest first. */
.docs-releases { max-width: 46rem; margin-inline: auto; }
.docs-release { padding-block: 28px; border-top: 1px solid var(--line-faint); scroll-margin-top: 16px; }
.docs-release:first-child { padding-top: 0; border-top: 0; }
.docs-release-title { font-size: 20px; line-height: 1.3; font-weight: 600; color: var(--brand-ink); }
.docs-release-meta { margin-top: 4px; font: 400 12.5px/1.5 var(--font-mono); color: var(--ink-2); }
.docs-release-summary { margin-top: 10px; font-size: 16px; line-height: 1.6; text-wrap: pretty; }
.docs-release .docs-list { margin-top: 10px; font-size: 15px; line-height: 1.55; }

/* The roadmap: each quarter, then its items with their status. */
.docs-quarters { display: grid; gap: 40px; max-width: 52rem; margin-inline: auto; }
.docs-quarter { scroll-margin-top: 16px; }
.docs-quarter-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.docs-quarter-title { font-size: 22px; line-height: 1.25; font-weight: 600; color: var(--brand-ink); }
.docs-quarter-span { font-size: 14px; color: var(--ink-2); }
.docs-items { display: grid; gap: 12px; margin: 16px 0 0; padding: 0; list-style: none; }
.docs-item { padding: 16px 18px; border: 1px solid var(--line-faint); border-radius: var(--radius); background: var(--card); }
.docs-item-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 12px; }
.docs-item-title { flex: 1 1 16rem; font-size: 16px; line-height: 1.4; font-weight: 600; color: var(--brand-ink); }
.docs-status {
  display: inline-flex; align-items: center; min-height: 24px; padding: 2px 10px; border-radius: 999px;
  background: var(--chip); font: 400 11px/1.3 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2);
}
.docs-status[data-status="planned"] { background: var(--brand-tint); color: var(--brand-link); }
.docs-status[data-status="in-progress"] { background: var(--run-tint); color: var(--run); }
.docs-status[data-status="released"] { background: var(--ok-tint); color: var(--ok); }
.docs-item-when { margin-top: 4px; font: 400 12.5px/1.5 var(--font-mono); color: var(--ink-2); }
.docs-item-when a { display: inline-flex; align-items: center; min-height: 44px; color: var(--brand-link); text-underline-offset: 3px; }
.docs-item-summary { margin-top: 8px; font-size: 15px; line-height: 1.55; color: var(--ink); text-wrap: pretty; }

/* The docs 404 page: one button back to the docs home. */
.docs-missing { display: flex; justify-content: center; }