/* Group D: documentation (body class wapi-sec-docs). Read mode: paper and mist only, no sun, no sea, no reveals. Tokens come from wapi-layout.css; nothing new on :root. */

/* ---------- Layout: nav rail + 68ch column ---------- */
@media (min-width: 1021px) { .wapi-sec-docs .w-doc { grid-template-columns: minmax(220px, 260px) minmax(0, 1fr); } }
.wapi-sec-docs .w-doc { min-inline-size: 0; }
.wapi-sec-docs .w-doc__main { min-inline-size: 0; }
.wapi-sec-docs .w-doc__main.w-prose { max-inline-size: none; }
.wapi-sec-docs .w-doc__main > :not(.w-grid, .w-table, .w-scroll, .w-actions, .w-doc__pager) { max-inline-size: var(--w-measure); }
.wapi-sec-docs .w-doc__main > :is(.w-grid, .w-scroll, .w-table) { max-inline-size: 100%; }
.wapi-sec-docs .w-doc__main [id] { scroll-margin-block-start: 24px; }

/* ---------- Nav rail: closed details on phones, ink fill on the current item ---------- */
.wapi-sec-docs details.w-doc__nav { border-inline-end: 2px solid var(--w-stone); padding-inline-end: 12px; }
.wapi-sec-docs .w-doc__nav ul + h2 { margin-block-start: 22px; }
.wapi-sec-docs .w-doc__nav a { line-height: 1.35; overflow-wrap: anywhere; }
.wapi-sec-docs .w-doc__nav a[aria-current="page"] { background: var(--w-ink); color: #fff; }
.wapi-sec-docs .w-doc__nav a:focus-visible, .wapi-sec-docs .w-doc__nav > summary:focus-visible { outline: 3px solid var(--w-ink); outline-offset: 2px; }
@media (max-width: 1020px) {
	.wapi-sec-docs details.w-doc__nav { border-inline-end: 0; padding-inline-end: 16px; }
	.wapi-sec-docs .w-doc__nav > summary::after { content: ""; margin-inline-start: auto; inline-size: 8px; block-size: 8px; border-inline-end: 2px solid currentColor; border-block-end: 2px solid currentColor; transform: rotate(45deg); }
	.wapi-sec-docs .w-doc__nav[open] > summary::after { transform: rotate(-135deg); }
	.wapi-sec-docs .w-doc__nav[open] > nav { max-block-size: 60vh; overflow: auto; overscroll-behavior: contain; }
}

/* ---------- Title block ---------- */
.wapi-sec-docs .w-doc__main > .w-crumbs { margin-block-end: clamp(14px, 2vw, 24px); }
.wapi-sec-docs .w-doc__main > h1 { text-wrap: balance; }
.wapi-sec-docs .w-doc__meta { margin-block-start: 12px; padding-block-end: 16px; border-block-end: 2px solid var(--w-stone); font-variant-numeric: tabular-nums; }
.wapi-sec-docs .w-doc__main > .w-lead { margin-block-start: 20px; }

/* ---------- Prose ---------- */
.wapi-sec-docs .w-prose > h2 { margin-block-start: 2.4em; padding-block-start: .6em; border-block-start: 2px solid var(--w-stone); }
.wapi-sec-docs .w-prose > .w-lead + h2, .wapi-sec-docs .w-prose > .w-note + h2:first-of-type { border-block-start: 0; }
.wapi-sec-docs .w-prose > h2 + p, .wapi-sec-docs .w-prose > h2 + .w-grid { margin-block-start: .7em; }
.wapi-sec-docs .w-prose li { overflow-wrap: break-word; }
.wapi-sec-docs .w-prose :is(strong, b) { font-weight: 650; }

/* code, kbd and pre: system mono stack, inside the prose only */
.wapi-sec-docs .w-prose :is(code, kbd) { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; padding: 1px 6px; background: var(--w-mist); color: var(--w-ink); overflow-wrap: anywhere; }
.wapi-sec-docs .w-prose kbd { border-block-end: 2px solid var(--w-edge); }
.wapi-sec-docs .w-prose pre { font-size: .875rem; line-height: 1.55; padding: 16px 20px; margin-inline: 0; background: var(--w-ink); color: #fff; overflow-x: auto; max-inline-size: 100%; tab-size: 2; }
.wapi-sec-docs .w-prose pre code { padding: 0; background: transparent; color: inherit; font-size: inherit; overflow-wrap: normal; white-space: pre; }
.wapi-sec-docs .w-prose pre:focus-visible { outline: 3px solid var(--w-ink); outline-offset: 2px; }
.wapi-sec-docs :is(.w-note, .w-howto) code { background: var(--w-paper); }
.wapi-sec-docs .w-note--warn code { background: var(--w-mist); }

/* ---------- Steps ---------- */
.wapi-sec-docs .w-howto { margin-block: 24px; max-inline-size: var(--w-measure); }
.wapi-sec-docs .w-howto > li { scroll-margin-block-start: 24px; }
.wapi-sec-docs .w-howto > li > ul, .wapi-sec-docs .w-howto > li > ol { padding-inline-start: 1.3em; }
.wapi-sec-docs .w-howto > li > :is(ul, ol) > li + li { margin-block-start: 6px; }
.wapi-sec-docs .w-howto h3 { font-size: var(--w-s-lead); }

/* ---------- Crops and figures inside prose ---------- */
.wapi-sec-docs .w-prose .w-shot { max-inline-size: 100%; }
.wapi-sec-docs .w-prose .w-shot__crop { max-inline-size: 100%; }
/* a crop's picture is wider than its window on purpose (wapi-layout.css sizes and places it); capping it at 100% would shrink the whole screen into the crop */
.wapi-sec-docs .w-prose :is(.w-shot, figure) :is(img, video):not(.w-shot__crop > *) { max-inline-size: 100%; block-size: auto; }
/* phones: a close-up inside a step leaving the number indent, with its caption kept clear of the progress line, is the
   shared .w-howto rule in wapi-layout.css (600px block) */
.wapi-sec-docs .w-prose figcaption, .wapi-sec-docs .w-prose .w-cap { margin-block-start: 8px; font-size: var(--w-s-small); color: var(--w-ink-2); }

/* ---------- Notes ---------- */
.wapi-sec-docs .w-note { padding: 18px 22px; margin-block: 28px; }
.wapi-sec-docs .w-note p { margin: 0; }
.wapi-sec-docs .w-note > * + * { margin-block-start: 8px; }
.wapi-sec-docs .w-note--warn { background: var(--w-stone); }
.wapi-sec-docs .w-note a { font-weight: 600; }

/* ---------- Tables: scroll on phones, never the page ---------- */
.wapi-sec-docs .w-prose table, .wapi-sec-docs .w-table { min-inline-size: 0; }
.wapi-sec-docs .w-scroll { overflow-x: auto; max-inline-size: 100%; overscroll-behavior-x: contain; }
.wapi-sec-docs .w-scroll:focus-visible { outline: 3px solid var(--w-ink); outline-offset: 2px; }
.wapi-sec-docs .w-scroll > .w-table { min-inline-size: 560px; }
.wapi-sec-docs .w-table :is(th, td) { text-align: start; vertical-align: top; }
.wapi-sec-docs .w-table td code { white-space: normal; }
@media (max-width: 720px) {
	.wapi-sec-docs .w-prose > table { display: block; overflow-x: auto; max-inline-size: 100%; }
}

/* ---------- Hub: two-column list of guides ---------- */
.wapi-sec-docs .w-doc__main .w-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); margin-block: 16px 0; }
.wapi-sec-docs .w-doc__main .w-card--link { display: block; min-inline-size: 0; padding: 20px 22px; background: var(--w-mist); color: var(--w-ink); text-decoration: none; }
.wapi-sec-docs .w-doc__main .w-card--link h3 { font-size: var(--w-s-lead); margin-block: 4px 6px; }
.wapi-sec-docs .w-doc__main .w-card--link p { margin: 0; font-size: var(--w-s-small); color: var(--w-ink-2); }
.wapi-sec-docs .w-doc__main .w-card--link:focus-visible { outline: 3px solid var(--w-ink); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .wapi-sec-docs .w-doc__main .w-card--link:hover { background: var(--w-stone); } }
@media (max-width: 720px) { .wapi-sec-docs .w-doc__main .w-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Pager ---------- */
.wapi-sec-docs .w-doc__pager { border-block-start-width: 8px; }
.wapi-sec-docs .w-doc__pager a { min-block-size: 44px; display: inline-flex; align-items: center; gap: 8px; }
.wapi-sec-docs .w-doc__pager a:focus-visible { outline: 3px solid var(--w-ink); outline-offset: 2px; }
.wapi-sec-docs .w-doc__pager a[rel="next"] { margin-inline-start: auto; }