/* docs.shiftlabs.org: the docs board under the masthead (generator/layout.ts), on site.css's tiles and tokens.
   Desktop: three rails under the masthead's three parts, the menu under the name tile, the page and the search under the
   links, On this page under Start free. Below 1100 px the menu folds into a button and On this page follows the title.
   Every block of a section takes the article's width; text keeps its reading measure from base.css. DESIGN.md "Docs". */

.docs { align-items: start; }

/* the Menu link (below 1100 px, under html.js), the search tile (search.js shows it; html.js keeps its row from the
   first paint, so the page doesn't jump when it appears) and its results */
.docs-top { grid-column: 4 / -1; grid-row: 1; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: var(--gap); }
.js .docs-top { min-height: 56px; }
.docs-menu-button { display: none; }
.docs-search { grid-column: 1 / -1; display: flex; min-height: 56px; padding: 0 var(--pad); cursor: text; transition: background-color var(--t-hover) ease; }
.docs-search:focus-within { outline: 2px solid var(--focus); outline-offset: 3px; }
.docs-search input { flex: 1; min-width: 0; margin: 0; padding: 16px 0; border: 0; border-radius: 0; background: none; font-weight: 600; appearance: none; outline: none; }
.docs-search input::placeholder { color: var(--muted); opacity: 1; }
.docs-search input::-webkit-search-decoration, .docs-search input::-webkit-search-cancel-button { appearance: none; }
.docs-search__key { align-self: center; min-width: 28px; padding: 3px 8px; background: var(--bg); color: var(--muted); font-size: var(--step-small); line-height: 1.3; text-align: center; }
.docs-search:focus-within .docs-search__key { visibility: hidden; }
@media (hover: none), (max-width: 1099px) { .docs-search__key { display: none; } }
.docs-hits { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.docs-hit { display: flex; flex-direction: column; gap: 4px; min-height: 64px; padding: 18px 20px; }
.docs-hit:focus-visible { background: var(--surface-2); }
.docs-hit:last-child:nth-child(3n+1) { grid-column: 1 / -1; }
.docs-hit:last-child:nth-child(3n+2) { grid-column: span 2; }
.docs-hit__title { font-weight: 600; line-height: 1.3; }
.docs-hit__page { color: var(--muted); }
.docs-hit__text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; overflow-wrap: anywhere; }
.docs-hits__none { grid-column: 1 / -1; overflow-wrap: anywhere; }

/* the menu: a link tile for a one-page section, a tile per section with its pages, the current page inverted */
.docs-menu { grid-column: 1 / 4; grid-row: 1 / span 3; position: sticky; top: var(--gap); display: grid; align-content: start; gap: var(--gap); max-height: calc(100svh - 2 * var(--gap)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.docs-menu ul, .docs-toc ul { padding: 0; list-style: none; }
.docs-menu__page { min-height: 56px; padding: 16px var(--pad); font-weight: 600; }
.docs-menu__group { padding: 16px 0 8px; }
.docs-menu__name { padding: 0 var(--pad) 6px; color: var(--muted); font-size: var(--step-small); font-weight: 600; }
.docs-menu__group a { display: block; padding: 8px var(--pad); font-weight: 600; text-decoration: none; transition: background-color var(--t-hover) ease, color var(--t-hover) ease; }
.docs-menu a[aria-current="page"] { background: var(--field); color: var(--field-ink); }
.docs-menu a:focus-visible { outline-offset: -4px; }
.docs-menu a[aria-current="page"]:focus-visible { outline-color: var(--field-ink); }

/* the page: title, picture and page tiles, On this page, then the sections */
.docs-main { grid-column: 4 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: var(--gap); align-items: start; }
.docs-intro, .docs-article, .docs-section { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }
.docs-intro { grid-column: 1 / 8; grid-row: 1; }
.docs-article { grid-column: 1 / 8; grid-row: 2; gap: 56px; }
.docs-article > .doc + .doc { margin-top: 0; }
.docs-title { display: flex; flex-direction: column; gap: 24px; }
.docs-title .lead { max-width: 34ch; font-weight: 600; }
.docs-title .lead code { font-weight: 500; }
.docs-photo { aspect-ratio: 2 / 1; }
.docs-photo img { position: absolute; inset: 0; object-position: 50% 35%; }
.docs-contents { display: flex; flex-wrap: wrap; gap: var(--gap); }
.docs-contents .tile { flex: 1 1 12rem; min-height: 64px; padding: 18px 20px; font-weight: 600; }

.docs-toc { grid-column: 8 / -1; grid-row: 1 / span 2; position: sticky; top: var(--gap); max-height: calc(100svh - 2 * var(--gap)); padding: 18px 0 12px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.docs-toc__name { padding: 0 20px 8px; font-size: var(--step-small); font-weight: 600; }
.docs-toc a { position: relative; display: block; padding: 5px 20px 5px 36px; color: var(--muted); font-size: var(--step-small); line-height: 1.35; text-decoration: none; transition: color var(--t-hover) ease; }
.docs-toc a[aria-current] { color: var(--ink); font-weight: 600; }
.docs-toc a[aria-current]::before { content: ""; position: absolute; left: 20px; top: calc(5px + 0.675em - 4px); width: 8px; height: 8px; background: currentColor; }
.docs-toc a:focus-visible { outline-offset: -4px; }

.docs-section__head h2 + p { margin-top: 16px; }
.docs-section .film { aspect-ratio: 16 / 9; min-height: 0; }
.docs-section .ref-rows > li { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); }

/* code tiles: the right caption, cut short on a narrow tile rather than wrapped, and the copy button (docs.js shows it) */
.code-tile__end { display: flex; align-items: baseline; gap: 14px; min-width: 0; }
.code-tile__end > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.code-tile__bar .lang { flex: none; }
.code-copy { flex: none; min-width: 4.75em; margin: -6px -10px 0 0; padding: 6px 10px; color: var(--night-muted); background: color-mix(in srgb, var(--night-ink) 7%, transparent); text-align: center; transition: background-color 160ms, color 160ms; }
.code-copy:hover, .code-copy.is-done { color: var(--night-ink); background: color-mix(in srgb, var(--night-ink) 14%, transparent); }
.code-copy:active { transform: scale(0.96); }

.docs-pager { grid-column: 4 / 11; grid-row: 3; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); margin-top: 48px; }
.docs-pager .tile { display: flex; flex-direction: column; gap: 4px; min-height: 64px; padding: 18px 20px; font-weight: 600; }
.docs-pager .small { color: var(--muted); font-weight: 400; }
.docs-pager__next { grid-column: 2; align-items: flex-end; text-align: right; }

@media (hover: hover) and (pointer: fine) {
  .docs-search:hover, .docs-hit:hover, .docs-contents a.tile:hover, .docs-pager .tile:hover, .docs-menu a:not([aria-current]):hover, .docs-menu-button:not([aria-expanded="true"]):hover { background: var(--surface-2); }
  .docs-toc a:hover { color: var(--ink); }
}
@media (prefers-reduced-motion: no-preference) {
  .docs-hits { animation: row-in var(--t-ui) var(--ease-out) both; }
}

/* ---------- tablet: the menu folds under a Menu link beside the search; On this page follows the title ---------- */
@media (max-width: 1099px) {
  .docs-top, .docs-menu, .docs-main, .docs-pager { grid-column: 1 / -1; grid-row: auto; }
  .docs-top { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .js .docs-menu-button { display: flex; }
  .docs-menu-button { grid-column: span 2; align-items: center; gap: 10px; min-height: 56px; padding: 0 var(--pad); font-weight: 600; transition: background-color var(--t-hover) ease, color var(--t-hover) ease; }
  .docs-menu-button__page { min-width: 0; overflow: hidden; color: var(--muted); font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
  .docs-menu-button__chevron { flex: none; width: 1.25em; height: 1.25em; margin-left: auto; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: square; transition: transform var(--t-ui) var(--ease-out); }
  .docs-menu-button[aria-expanded="true"] { background: var(--field); color: var(--field-ink); }
  .docs-menu-button[aria-expanded="true"] .docs-menu-button__page { color: inherit; opacity: 0.75; }
  .docs-menu-button[aria-expanded="true"] .docs-menu-button__chevron { transform: rotate(180deg); }
  .docs-menu-button[aria-expanded="true"]:focus-visible { outline-color: var(--accent); }
  .js .docs-search { grid-column: span 4; }
  .docs-hits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .docs-hit:last-child:nth-child(n) { grid-column: auto; }
  .docs-hit:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .js .docs-menu:not(.is-open):not(:target), .js .docs-menu.is-toggle:not(.is-open) { display: none; }
  .docs-menu { position: static; max-height: none; overflow: visible; }
  .docs-menu__group ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }
  .docs-main { display: flex; flex-direction: column; align-items: stretch; }
  .docs-toc { position: static; max-height: none; overflow: visible; }
  .docs-toc ul { columns: 2; column-gap: var(--gap); }
  .docs-toc li { break-inside: avoid; }
  .docs-section .ref-rows > li { grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); }
  .docs-pager { margin-top: 40px; }
}

/* ---------- phone ---------- */
@media (max-width: 599px) {
  .docs-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .js .docs-top { min-height: 52px; }
  .docs-menu-button, .js .docs-search { grid-column: span 1; }
  .docs-menu-button { min-height: 52px; padding: 0 16px; }
  .docs-menu-button__page { display: none; }
  .docs-search { min-height: 52px; padding: 0 16px; }
  .docs-search input { padding: 14px 0; }
  .docs-hits { grid-template-columns: minmax(0, 1fr); }
  .docs-hit, .docs-hit:last-child:nth-child(n) { grid-column: 1 / -1; gap: 2px; min-height: 52px; padding: 14px 16px; }
  .docs-hit__text { -webkit-line-clamp: 2; }
  .docs-menu__page { min-height: 52px; padding: 14px 16px; }
  .docs-menu__group { padding: 14px 0 6px; }
  .docs-menu__name { padding: 0 16px 6px; }
  .docs-menu__group a { padding: 8px 16px; }
  .docs-menu__group ul { grid-template-columns: minmax(0, 1fr); }
  .docs-photo { aspect-ratio: 4 / 3; }
  .docs-contents .tile { flex-basis: 9rem; min-height: 52px; padding: 14px 16px; }
  .docs-toc ul { columns: 1; }
  .docs-article { gap: 40px; }
  .docs-section .film { aspect-ratio: 4 / 3; }
  .docs-section .ref-rows > li { grid-template-columns: minmax(0, 1fr); padding: 14px 16px; }
  .docs-pager .tile { min-height: 52px; padding: 14px 16px; }
}