/* Optics docs. Builds on styles.css: same tokens, fonts, code blocks and buttons.
   Layout follows a three-column docs shell: section sidebar, article, "On this page". */

.docs {
  --bar-h: 60px;
  --tabs-h: 46px;
  --head-h: calc(var(--bar-h) + var(--tabs-h));
  --side-w: 272px;
  --toc-w: 220px;
  --ok: #1A9E5C;
  --fail: #D93D63;
  font-size: 17px;
}
[data-theme="dark"] .docs { --ok: #3DDC84; --fail: #FF7096; }
.docs { scroll-padding-top: calc(var(--head-h) + 20px); }
html:has(.docs) { scroll-padding-top: 126px; }
.c-fail { color: #FF8FA8; }

/* ---------- header ---------- */
.docs-nav { border-bottom: 1px solid var(--line); }
.docs-bar { display: flex; align-items: center; gap: 14px; height: var(--bar-h); padding-inline: 20px 16px; }
.docs-bar .brand { font-size: 1.125rem; gap: 9px; }
.docs-bar .mark { width: 24px; height: 24px; }
.docs-label { font-weight: 560; font-size: 1.0625rem; color: var(--ink-3); text-decoration: none; padding-left: 12px; border-left: 1px solid var(--line-2); line-height: 22px; }
.docs-label:hover { color: var(--ink); }
.menu-toggle { display: none; width: 40px; height: 40px; place-items: center; border: 0; border-radius: 10px; background: transparent; color: var(--ink); cursor: pointer; margin-left: -8px; }
.menu-toggle svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.search-open { margin-left: auto; display: flex; align-items: center; gap: 10px; width: min(360px, 34vw); height: 40px; padding: 0 8px 0 12px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--bg-2); color: var(--ink-3); font: 500 .9375rem/1 var(--sans); cursor: pointer; }
.search-open:hover { border-color: var(--ink-3); color: var(--ink-2); }
.search-open svg, .search-box svg { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.search-ph { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-kbd { font-size: .75rem; }
.docs .nav-actions { margin-left: 8px; gap: 6px; }
.nav-text { color: var(--ink-2); text-decoration: none; font-size: .9375rem; font-weight: 500; padding: 0 10px; }
.nav-text:hover { color: var(--ink); }
.dtabs { display: flex; gap: 4px; height: var(--tabs-h); align-items: stretch; padding-inline: 12px; overflow-x: auto; scrollbar-width: none; }
.dtabs::-webkit-scrollbar { display: none; }
.dtab { display: flex; align-items: center; padding: 0 10px; color: var(--ink-2); text-decoration: none; font-size: .9375rem; font-weight: 520; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.dtab:hover { color: var(--ink); }
.dtab.on { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }

/* ---------- shell ---------- */
.docs-shell { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); max-width: 1480px; margin: 0 auto; }
.doc-home .docs-shell { grid-template-columns: minmax(0, 1fr); }
.doc-home .sidebar { display: none; }

.sidebar { position: sticky; top: var(--head-h); height: calc(100vh - var(--head-h)); height: calc(100dvh - var(--head-h)); border-right: 1px solid var(--line); }
.sidebar-inner { height: 100%; overflow-y: auto; padding: 22px 16px 48px 20px; scrollbar-width: thin; }
.side-section { display: none; }
.side-section.open { display: block; }
.side-title { font-size: .8125rem; font-weight: 650; color: var(--ink); margin: 0 0 10px 10px; }
.side-group { font-size: .875rem; font-weight: 640; color: var(--ink); margin: 22px 0 6px 10px; }
.side-section ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 1px; }
.side-section a { display: block; padding: 6px 10px; border-radius: 8px; color: var(--ink-2); text-decoration: none; font-size: .9375rem; line-height: 1.4; }
.side-section a:hover { color: var(--ink); background: var(--bg-2); }
.side-section a[aria-current="page"] { color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, transparent); font-weight: 600; }

.doc { display: grid; grid-template-columns: minmax(0, 1fr) var(--toc-w); gap: 48px; padding: 36px clamp(20px, 4vw, 56px) 80px; min-width: 0; }
.no-toc .doc { grid-template-columns: minmax(0, 1fr); }
.doc-article { min-width: 0; max-width: 780px; }
.layout-wide .doc-article { max-width: 980px; }
.doc-home .doc { grid-template-columns: minmax(0, 1fr); padding-top: 0; }
.doc-home .doc-article { max-width: 1160px; margin: 0 auto; width: 100%; }
.doc-home .crumbs, .doc-home .doc-head, .doc-home .pager { display: none; }

/* ---------- article head ---------- */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .875rem; color: var(--ink-3); margin-bottom: 14px; }
.crumbs a { color: var(--ink-3); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.crumbs .sep { opacity: .6; }
.doc-head h1 { font-size: clamp(2rem, 3.4vw, 2.625rem); font-weight: 650; font-stretch: 88%; line-height: 1.08; letter-spacing: -.028em; text-wrap: balance; }
.doc-summary { margin-top: 12px; font-size: 1.25rem; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.doc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.doc-level { margin: 0; font-size: .9375rem; color: var(--ink-3); }
.page-actions { display: flex; gap: 6px; margin-left: auto; }
.page-actions a, .page-actions button { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--ink-3); font: 520 .8125rem/1 var(--sans); text-decoration: none; cursor: pointer; }
.page-actions a:hover, .page-actions button:hover { color: var(--ink); border-color: var(--line-2); }
.page-actions svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.page-copy.done { color: var(--ok); }

/* ---------- prose ---------- */
.prose { margin-top: 28px; color: var(--ink-2); line-height: 1.7; }
.prose > * + * { margin-top: 18px; }
.prose p, .prose li { text-wrap: pretty; }
/* Running text keeps a reading measure (about 75 characters); code and tables use the full column. */
.prose > p, .prose > ul, .prose > ol:not(.doc-steps), .prose > blockquote, .step-body > p, .step-body > ul, .step-body > ol, .callout p { max-width: 35em; }
.prose strong { color: var(--ink); font-weight: 620; }
.prose a { color: var(--accent); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent); text-underline-offset: 3px; }
.prose a:hover { text-decoration-color: currentColor; }
.prose h2, .prose h3, .prose h4 { color: var(--ink); position: relative; scroll-margin-top: calc(var(--head-h) + 20px); }
.prose h2 { font-size: 1.625rem; font-weight: 640; font-stretch: 90%; letter-spacing: -.02em; line-height: 1.2; margin-top: 52px; }
.prose h3 { font-size: 1.1875rem; font-weight: 640; letter-spacing: -.01em; line-height: 1.3; margin-top: 36px; }
.prose h4 { font-size: 1rem; font-weight: 650; margin-top: 28px; }
.prose h2 + *, .prose h3 + *, .prose h4 + * { margin-top: 10px; }
.anchor { margin-left: 8px; color: var(--ink-3); text-decoration: none !important; opacity: 0; font-weight: 400; }
:is(h2, h3, h4):hover > .anchor, .anchor:focus { opacity: 1; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li + li { margin-top: 6px; }
.prose li > ul, .prose li > ol { margin-top: 6px; }
.prose li::marker { color: var(--ink-3); }
.prose hr { border: 0; border-top: 1px solid var(--line); margin-block: 40px; }
.prose img { max-width: 100%; border-radius: 12px; border: 1px solid var(--line); }
.prose blockquote { margin: 0; padding: 2px 0 2px 18px; border-left: 3px solid var(--line-2); color: var(--ink-2); }
.prose .ic { white-space: normal; overflow-wrap: anywhere; color: var(--ink); }
.prose kbd { color: var(--ink); }

/* tables */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.prose table { width: 100%; border-collapse: collapse; font-size: .9375rem; line-height: 1.5; }
.prose th { text-align: left; font-weight: 620; color: var(--ink); background: var(--bg-2); padding: 10px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.prose td { padding: 10px 14px; border-top: 1px solid var(--line); vertical-align: top; }
.prose tbody tr:first-child td { border-top: 0; }
.prose td .ic { white-space: nowrap; }
.prose td:first-child .ic { white-space: nowrap; }

/* code */
.doc-code { position: relative; }
.doc-code pre { padding: 16px 20px 18px; font-size: .8125rem; line-height: 1.75; }
.doc-code:not(.has-title, .no-copy) pre { padding-right: 84px; }
.doc-code figcaption { display: flex; align-items: center; min-height: 44px; padding: 0 84px 0 20px; }
.doc-code .copy { position: absolute; top: 6px; right: 6px; height: 32px; min-width: 60px; font-size: .8125rem; opacity: .85; }
.doc-code:not(.has-title) .copy { top: 8px; }
.doc-code .copy:hover { opacity: 1; }
.doc-code .prompt { user-select: none; }
@media (max-width: 520px) {
  /* A one-line command wraps on a phone, so none of it hides under the Copy button. */
  .doc-code:is([data-lang="shell"], [data-lang="powershell"]) pre { white-space: pre-wrap; overflow-wrap: anywhere; }
}
.diff pre code span { min-width: 100%; }

/* callouts */
.callout { --c: var(--accent); --ct: var(--accent); padding: 16px 20px 18px; border-radius: 10px; background: color-mix(in srgb, var(--c) 8%, var(--bg)); }
.callout > * + * { margin-top: 8px; }
.callout-title { font-weight: 650; color: var(--ct); font-size: .9375rem; }
.callout-tip { --c: var(--record); --ct: var(--record-t); }
.callout-warning { --c: var(--say); --ct: var(--say-t); }
.callout-mistake { --c: var(--delegate); --ct: var(--delegate-t); }
.callout-important { --c: var(--write); --ct: var(--write-t); }
.callout .doc-code { margin-top: 12px; }

/* steps */
.doc-steps { list-style: none; padding: 0 !important; margin-top: 28px; counter-reset: none; }
.doc-steps > li { position: relative; padding-left: 52px; padding-bottom: 28px; margin: 0 !important; }
.doc-steps > li.step-intro { padding-left: 0; }
.doc-steps > li.step-item::before { content: ""; position: absolute; left: 15px; top: 40px; bottom: 6px; width: 2px; background: var(--line); border-radius: 1px; }
.doc-steps > li.step-item:last-child::before { display: none; }
.step-head { display: flex; align-items: center; min-height: 32px; }
.step-num { position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); font-weight: 650; font-size: .9375rem; }
.doc-steps h2, .doc-steps h3 { margin: 0 !important; font-size: 1.1875rem; font-weight: 640; font-stretch: 100%; letter-spacing: -.01em; line-height: 1.3; }
.step-body { margin-top: 10px; }
.step-body > * + * { margin-top: 14px; }

/* tabs */
.doc-tabs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.doc-tabs > .os { flex-wrap: wrap; justify-self: start; max-width: 100%; }
.tab-pane > * + * { margin-top: 14px; }

/* cards */
.cards { display: grid; column-gap: 32px; }
.cards.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards.cols-1 { grid-template-columns: minmax(0, 1fr); }
.prose a.card, a.card { display: flex; flex-direction: column; gap: 4px; padding: 14px 0 16px; border-top: 1px solid var(--line); text-decoration: none; color: var(--ink-2); }
.card-title { color: var(--ink); font-weight: 620; font-size: 1rem; line-height: 1.35; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1.5px; text-underline-offset: .2em; transition: text-decoration-color .2s ease; }
a.card:hover .card-title, a.card:focus-visible .card-title { text-decoration-color: currentColor; }
.card-text { font-size: .9375rem; line-height: 1.5; }
.badge { margin-left: 8px; font-size: .875rem; font-weight: 500; color: var(--ink-3); }

/* details */
.doc-details { border: 1px solid var(--line); border-radius: 12px; }
.doc-details summary { cursor: pointer; padding: 12px 16px; font-weight: 600; color: var(--ink); list-style: none; display: flex; align-items: center; gap: 10px; }
.doc-details summary::-webkit-details-marker { display: none; }
.doc-details summary::before { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(-45deg); transition: transform .2s ease; flex: none; }
.doc-details[open] summary::before { transform: rotate(45deg); }
.details-body { padding: 0 18px 16px; }
.details-body > * + * { margin-top: 14px; }

/* definition lists written as HTML */
.prose dl.defs { display: grid; border-top: 1px solid var(--line); }
.prose dl.defs > div { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.prose dl.defs dt { color: var(--ink); font-weight: 600; }

/* ---------- on this page ---------- */
.toc { position: sticky; top: calc(var(--head-h) + 36px); align-self: start; max-height: calc(100vh - var(--head-h) - 72px); overflow-y: auto; font-size: .875rem; }
.toc-title { font-size: .875rem; font-weight: 650; color: var(--ink-3); margin-bottom: 10px; }
.toc ul { list-style: none; padding: 0; margin: 0; border-left: 1px solid var(--line); }
.toc li a { display: block; padding: 5px 0 5px 14px; margin-left: -1px; border-left: 2px solid transparent; color: var(--ink-3); text-decoration: none; line-height: 1.4; }
.toc li.toc-l3 a { padding-left: 26px; font-size: .8125rem; }
.toc li a:hover { color: var(--ink); }
.toc li a.active { color: var(--accent); border-left-color: var(--accent); }

/* ---------- foot of article ---------- */
.doc-foot { margin-top: 64px; display: grid; gap: 28px; }
.helpful { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--ink); font-weight: 560; font-size: .9375rem; }
.helpful-btns { display: flex; gap: 8px; }
.helpful-btns button { height: 32px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--bg); color: var(--ink); font: 560 .875rem/1 var(--sans); cursor: pointer; }
.helpful-btns button:hover { border-color: var(--accent); color: var(--accent); }
.helpful-thanks { width: 100%; font-weight: 400; color: var(--ink-2); }
.helpful-thanks a { color: var(--accent); }
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.pager a { display: flex; flex-direction: column; gap: 4px; padding-top: 14px; border-top: 2px solid var(--ink); text-decoration: none; color: var(--ink); font-weight: 620; font-size: 1.0625rem; }
.pager a:hover { color: var(--accent); }
.pager a span { font-size: .8125rem; font-weight: 500; color: var(--ink-3); }
.pager-next { text-align: right; grid-column: 2; }
.doc-edit { display: flex; gap: 24px; font-size: .875rem; color: var(--ink-3); }
.doc-edit a { color: var(--ink-3); text-underline-offset: 3px; }
.doc-edit a:hover { color: var(--ink); }

/* ---------- search ---------- */
.search-dialog { width: min(640px, calc(100vw - 32px)); max-height: min(560px, calc(100vh - 120px)); margin: 80px auto auto; padding: 0; border: 1px solid var(--line-2); border-radius: 16px; background: var(--bg); color: var(--ink); box-shadow: 0 40px 100px -30px rgba(6, 8, 28, .6); overflow: hidden; }
.search-dialog[open] { display: flex; flex-direction: column; }
.search-dialog::backdrop { background: rgba(6, 8, 28, .45); backdrop-filter: blur(3px); }
.search-box { display: flex; align-items: center; gap: 12px; padding: 0 12px 0 18px; height: 60px; border-bottom: 1px solid var(--line); color: var(--ink-3); flex: none; }
.search-input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font: 500 1.0625rem/1 var(--sans); }
.search-input::-webkit-search-cancel-button { display: none; }
.search-close { height: 28px; padding: 0 8px; border-radius: 6px; border: 1px solid var(--line-2); background: var(--bg-2); color: var(--ink-3); font: 500 .75rem/1 var(--mono); cursor: pointer; }
.search-results { list-style: none; margin: 0; padding: 8px; overflow-y: auto; }
.search-results:empty { display: none; }
.search-results a { display: block; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: var(--ink-2); }
.search-results a[aria-selected="true"], .search-results a:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.sr-title { display: block; color: var(--ink); font-weight: 600; }
.sr-sec { font-size: .75rem; color: var(--ink-3); font-weight: 600; margin-right: 8px; }
.sr-text { display: block; font-size: .875rem; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-text mark { background: color-mix(in srgb, var(--say) 40%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
.search-empty { padding: 18px 20px 22px; color: var(--ink-2); font-size: .9375rem; }

/* ---------- docs home ---------- */
.dh-hero { padding: clamp(40px, 6vw, 72px) 0 clamp(28px, 4vw, 44px); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.dh-hero h1 { font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 650; font-stretch: 80%; letter-spacing: -.035em; line-height: 1; color: var(--ink); margin: 0; }
.dh-hero .lede { margin-top: 18px !important; max-width: 52ch; }
.dh-hero .btn-row { margin-top: 26px !important; }
.prose .dh-hero .btn { text-decoration: none; }
.prose .btn-solid { color: var(--on-accent); }
.prose .btn-ghost { color: var(--ink); }
.dh-band { margin-top: clamp(48px, 6vw, 72px) !important; }
.dh-band > h2 { margin-top: 0 !important; }
.dh-band > .dh-sub { margin-top: 8px !important; color: var(--ink-3); }
.dh-band > .cards, .dh-band > .paths, .dh-band > .dh-cols { margin-top: 22px !important; }
.paths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.path { display: flex; flex-direction: column; padding-top: 18px; border-top: 2px solid var(--ink); }
.path-tag { margin: 0; font-size: .875rem; font-weight: 560; color: var(--ink-3); }
.path h3 { margin-top: 4px !important; font-size: 1.25rem; }
.path p { margin-top: 6px; font-size: .9375rem; line-height: 1.55; }
.path ul { list-style: none; padding: 0 !important; margin-top: 14px; display: grid; }
.path li + li { margin-top: 0 !important; }
.path li a { display: block; padding: 9px 0; border-top: 1px solid var(--line); color: var(--ink) !important; font-weight: 520; font-size: .9375rem; text-decoration: none !important; }
.path li a:hover { color: var(--accent) !important; }
.dh-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 32px; }
.dh-col h3 { margin: 0 !important; padding-bottom: 8px; border-bottom: 1px solid var(--line); font-size: 1rem; }
.dh-col ul { list-style: none; padding: 0 !important; margin-top: 10px !important; display: grid; gap: 2px; }
.dh-col li + li { margin-top: 0 !important; }
.dh-col a { text-decoration: none !important; font-size: .9375rem; display: block; padding: 3px 0; }
.dh-col a:hover { text-decoration: underline !important; }

/* ---------- scenes (the figures themselves are styled in scenes.css) ---------- */
.scene-fig { margin-top: 28px !important; margin-bottom: 8px; }
.scene-fig figcaption { margin-top: 10px; font-size: .875rem; color: var(--ink-3); line-height: 1.5; text-align: center; text-wrap: balance; }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .doc { grid-template-columns: minmax(0, 1fr); }
  .toc { display: none; }
}
@media (max-width: 920px) {
  .docs-shell { grid-template-columns: minmax(0, 1fr); }
  .menu-toggle { display: grid; }
  .dtabs { display: none; }
  .docs { --head-h: var(--bar-h); }
  .sidebar { position: fixed; z-index: 60; top: 0; left: 0; bottom: 0; height: auto; width: min(320px, 86vw); background: var(--bg); border-right: 1px solid var(--line); transform: translateX(-102%); transition: transform .3s var(--ease); }
  .doc-home .sidebar { display: block; }
  .sidebar.open { transform: none; box-shadow: 0 0 80px rgba(6, 8, 28, .4); }
  .side-section { display: block; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
  .scrim { position: fixed; inset: 0; z-index: 55; background: rgba(6, 8, 28, .4); }
  .search-open { width: auto; margin-left: auto; }
  .search-ph, .search-kbd { display: none; }
  .nav-text { display: none; }
  .dh-hero { grid-template-columns: minmax(0, 1fr); }
  .paths { grid-template-columns: minmax(0, 1fr); }
  .dh-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .docs { font-size: 16px; }
  .docs-bar { padding-inline: 16px 12px; gap: 10px; }
  .docs-label { padding-left: 10px; }
  .doc { padding: 24px 16px 64px; }
  .doc-summary { font-size: 1.0625rem; }
  .page-actions { margin-left: 0; }
  .cards.cols-2, .cards.cols-3 { grid-template-columns: minmax(0, 1fr); }
  .dh-cols { grid-template-columns: minmax(0, 1fr); }
  .prose dl.defs > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .doc-steps > li { padding-left: 44px; }
  .pager { grid-template-columns: minmax(0, 1fr); }
  .pager-next { grid-column: 1; }
}

/* Touch screens: every control is at least 44px on each side (see styles.css). */
@media (pointer: coarse) {
  .menu-toggle { width: 44px; height: 44px; }
  .search-open { height: 44px; min-width: 44px; justify-content: center; }
  .search-close { height: 44px; padding: 0 12px; }
  .side-section a, .path li a, .dh-col a, .toc li a { display: flex; align-items: center; min-height: 44px; padding-block: 6px; }
  .dh-col ul { gap: 0; }
  .page-actions a, .page-actions button, .helpful-btns button { height: 44px; }
  .helpful-btns button { min-width: 56px; }
  .doc-edit { flex-wrap: wrap; column-gap: 24px; row-gap: 0; }
  .doc-edit a { display: inline-flex; align-items: center; min-height: 44px; }
  .docs-label, .crumbs a { position: relative; }
  .docs-label::after, .crumbs a::after, .doc-code .copy::after, .task label::after { content: ""; position: absolute; }
  .docs-label::after { inset: -11px -4px; }
  .crumbs a::after { inset: -11px -6px; }
  .doc-code .copy { z-index: 2; }
  .doc-code .copy::after { inset: -7px; }
  .task label::after { inset: -11px; }
}
/* Heading anchors appear on hover, which touch screens don't have, so they would be invisible tap targets. */
@media (hover: none) { .anchor { display: none; } }

/* checklists */
.prose ul.tasks { list-style: none; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.prose ul.tasks > li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; padding: 16px 0; margin: 0; border-bottom: 1px solid var(--line); }
.task label { position: relative; display: block; width: 22px; height: 22px; margin-top: 3px; cursor: pointer; }
.task input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.task-box { position: absolute; inset: 0; border-radius: 6px; border: 1.6px solid var(--line-2); background: var(--bg); transition: background .2s ease, border-color .2s ease; }
.task input:checked + .task-box { background: var(--ok); border-color: var(--ok); }
.task input:checked + .task-box::after { content: ""; position: absolute; left: 6.5px; top: 2.5px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2.2px 2.2px 0; transform: rotate(45deg); }
.task input:focus-visible + .task-box { outline: 2px solid var(--accent); outline-offset: 2px; }
.task-body > * + * { margin-top: 8px; }
.task:has(input:checked) .task-body > :first-child strong { text-decoration: line-through; text-decoration-color: var(--ink-3); }