/* Documentation layout (extends site.css tokens) */
.docs-progress{position:fixed;inset-block-start:0;inset-inline:0;block-size:3px;z-index:70;background:transparent}
.docs-progress span{display:block;block-size:100%;inline-size:0;background:var(--ds-orange-600)}
.docs-hero{padding-block:var(--s-7) var(--s-5)}
.docs-hero .lead{font-size:1.1875rem;color:var(--ds-ink-700);max-inline-size:62ch}
.docs-search{position:relative;display:flex;gap:var(--s-2);margin-block:var(--s-4)}
.docs-search input[type=search]{flex:1;min-block-size:48px;padding:10px 16px;border:1.5px solid var(--ds-ink-500);border-radius:var(--r-md);background:var(--ds-surface);color:var(--ds-ink-900);font:inherit;inline-size:100%}
.docs-search--big{max-inline-size:640px}
.suggest{position:absolute;inset-inline:0;inset-block-start:calc(100% + 4px);z-index:20;margin:0;padding:var(--s-1);list-style:none;background:var(--ds-surface);border:1px solid var(--ds-line);border-radius:var(--r-md);box-shadow:var(--sh-2)}
.suggest li a{display:block;padding:10px 12px;border-radius:var(--r-sm);color:var(--ds-ink-900);text-decoration:none}
.suggest li[aria-selected=true] a,.suggest li a:hover{background:var(--ds-paper)}
.doc-cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:var(--s-5)}
.doc-cat{border:1px solid var(--ds-line);border-radius:var(--r-md);background:var(--ds-surface);padding:var(--s-5)}
.doc-cat h2{font-size:1.25rem;margin-block-end:var(--s-2)}.doc-cat h2 a{color:var(--ds-ink-900);text-decoration:none}
.doc-cat p{color:var(--ds-ink-700);font-size:.9688rem}.doc-cat ul{padding-inline-start:1.1em;margin:0 0 var(--s-3)}.doc-cat small{color:var(--ds-ink-500)}
.docs-list{list-style:none;margin:0;padding:0;display:grid;gap:0;border-block-start:1px solid var(--ds-line)}
.docs-list>li{display:grid;gap:2px;padding:var(--s-4) 0;border-block-end:1px solid var(--ds-line)}
.docs-list>li>a{font:600 1.0625rem var(--font-display);color:var(--ds-ink-900);text-decoration:none}.docs-list>li>a:hover{color:var(--ds-orange-600)}
.docs-list>li>span{color:var(--ds-ink-700)}.docs-list small{color:var(--ds-ink-500)}
.docs-list mark,.results mark{background:var(--ds-orange-100);color:inherit;padding:0 2px;border-radius:3px}
.docs-shell{display:grid;gap:var(--s-6);padding-block:var(--s-5) var(--s-7);grid-template-columns:1fr}
@media (min-width:1000px){.docs-shell{grid-template-columns:260px minmax(0,1fr) 220px}.docs-shell--2{grid-template-columns:260px minmax(0,1fr)}}
.docs-nav{font-size:.9688rem}
@media (min-width:1000px){.docs-nav{position:sticky;inset-block-start:calc(var(--header-h) + 16px);align-self:start;max-block-size:calc(100vh - var(--header-h) - 32px);overflow:auto}}
.docs-nav summary{font-weight:700;cursor:pointer;min-block-size:44px;display:flex;align-items:center}
@media (min-width:1000px){.docs-nav summary{display:none}.docs-nav details:not([open])>*{display:revert}}
.tree,.tree ul{list-style:none;margin:0;padding:0}.tree ul{padding-inline-start:var(--s-4);border-inline-start:1px solid var(--ds-line);margin-block:2px var(--s-2)}
.tree a{display:block;padding:6px 10px;border-radius:var(--r-sm);color:var(--ds-ink-700);text-decoration:none;min-block-size:36px}
.tree a:hover{background:var(--ds-surface)}.tree a.on{color:#A8300A;font-weight:600;background:var(--ds-orange-100)}
.tree .cat{font-weight:600;color:var(--ds-ink-900)}.tree .sub>span{display:block;padding:6px 10px;color:var(--ds-ink-500);font-size:.8125rem}
.docs-main{min-inline-size:0}
.docs-main h1{font-size:clamp(1.75rem,1.3rem + 1.6vw,2.5rem)}
.docs-main .meta{display:flex;gap:var(--s-2);flex-wrap:wrap;margin:0 0 var(--s-3)}
.docs-main .dates{color:var(--ds-ink-500);font-size:.9375rem}
.doc-body{max-inline-size:78ch}
.doc-body h2{margin-block-start:var(--s-7);padding-block-start:var(--s-4);border-block-start:1px solid var(--ds-line)}
.doc-body h2 .anchor,.doc-body h3 .anchor{margin-inline-start:.4em;color:var(--ds-ink-500);text-decoration:none;opacity:0;font-weight:400}
.doc-body h2:hover .anchor,.doc-body h3:hover .anchor,.doc-body .anchor:focus{opacity:1}
.callout{margin:var(--s-5) 0;padding:var(--s-4) var(--s-5);border-radius:var(--r-md);border:1px solid var(--ds-line);border-inline-start-width:4px;background:var(--ds-surface);display:grid;gap:var(--s-1)}
.callout p:last-child{margin-block-end:0}.callout-title{font:700 .9375rem var(--font-display)}
.callout--note{border-inline-start-color:var(--ds-focus)}.callout--tip{border-inline-start-color:var(--ds-route)}.callout--warning{border-inline-start-color:var(--ds-warn);background:var(--ds-warn-100)}
.doc-steps{list-style:none;counter-reset:s;margin:var(--s-5) 0;padding:0;display:grid;gap:var(--s-5)}
.doc-steps>li{counter-increment:s;display:grid;grid-template-columns:44px 1fr;gap:var(--s-4)}
.doc-steps>li::before{content:counter(s);display:grid;place-items:center;inline-size:36px;block-size:36px;border-radius:50%;background:var(--ds-orange-600);color:#fff;font:700 .9375rem var(--font-display)}
.doc-steps .step-title{margin:0 0 var(--s-2);font-size:1.0625rem}.doc-steps .step-body>:last-child{margin-block-end:0}
.code{margin:var(--s-4) 0;border-radius:var(--r-md);overflow:hidden;background:#10151D;color:#EEF1F6;border:1px solid #2A3140}
.code-bar{display:flex;justify-content:space-between;align-items:center;padding:6px 12px;background:#1A202B;font:.8125rem var(--font-mono);color:#A7B1C0}
.code-bar button{min-block-size:32px;padding:0 10px;border:1px solid #3A4351;border-radius:var(--r-sm);background:transparent;color:#EEF1F6;cursor:pointer;font:inherit}
.code pre{margin:0;padding:var(--s-4);overflow:auto;background:transparent;line-height:1.6;font-size:.875rem}.code code{background:none;border:0;padding:0;font-family:var(--font-mono)}
.table-wrap{overflow-x:auto}
.doc-figure{margin:var(--s-5) 0}.doc-figure .legend{margin:var(--s-3) 0 0;padding-inline-start:1.4em;color:var(--ds-ink-700);font-size:.9375rem}
.figure-missing{padding:var(--s-4);border:1px dashed var(--ds-line);border-radius:var(--r-md);color:var(--ds-ink-500)}
.docs-toc{font-size:.9062rem}
@media (min-width:1000px){.docs-toc{position:sticky;inset-block-start:calc(var(--header-h) + 16px);align-self:start;max-block-size:calc(100vh - var(--header-h) - 32px);overflow:auto}}
.docs-toc ul{list-style:none;margin:var(--s-2) 0 0;padding:0;border-inline-start:1px solid var(--ds-line)}
.docs-toc a{display:block;padding:4px 12px;color:var(--ds-ink-700);text-decoration:none;margin-inline-start:-1px;border-inline-start:2px solid transparent}
.docs-toc .l3 a{padding-inline-start:24px}.docs-toc a.on{color:var(--ds-orange-600);border-inline-start-color:var(--ds-orange-600);font-weight:600}
@media (max-width:999px){.docs-toc{display:none}}
.doc-feedback{margin-block-start:var(--s-8);padding:var(--s-5);border:1px solid var(--ds-line);border-radius:var(--r-md);background:var(--ds-surface);max-inline-size:78ch}
.doc-feedback h2{font-size:1.125rem;margin-block-start:0;border:0;padding:0}.doc-feedback form+form{margin-block-start:var(--s-3)}
.doc-feedback select,.doc-feedback textarea{inline-size:100%;padding:10px;border:1.5px solid var(--ds-ink-500);border-radius:var(--r-sm);background:var(--ds-surface);color:var(--ds-ink-900);font:inherit}
.docs-pn{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4);margin-block-start:var(--s-7);max-inline-size:78ch}
.docs-pn a{display:grid;padding:var(--s-4);border:1px solid var(--ds-line);border-radius:var(--r-md);text-decoration:none;color:var(--ds-ink-900);background:var(--ds-surface)}
.docs-pn a[rel=next]{text-align:end;grid-column:2}.docs-pn small{color:var(--ds-ink-500)}
.docs-filters{display:flex;gap:var(--s-4);flex-wrap:wrap;margin-block-end:var(--s-4)}.docs-filters label{display:grid;gap:4px;font-size:.875rem;font-weight:600}
.docs-filters select{min-block-size:40px;padding:0 10px;border:1.5px solid var(--ds-ink-500);border-radius:var(--r-sm);background:var(--ds-surface);color:var(--ds-ink-900)}
.didyou,.related-q{color:var(--ds-ink-700)}
.code .tok-c{color:#8F9BB0;font-style:italic}.code .tok-s{color:#9BE3B0}.code .tok-n{color:#F4B87C}.code .tok-k{color:#B9A9FF}.code .tok-p{color:#8CC8FF}
:root[data-theme="dark"] .tree a.on{color:#FF9A70}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tree a.on{color:#FF9A70}}
.code pre:focus-visible,.table-wrap:focus-visible{outline:2px solid var(--ds-orange-600);outline-offset:2px}
.docs-main :not(pre)>code{overflow-wrap:anywhere}

/* category cards: an icon gives each card a point of entry before the title is read */
.doc-cat__icon{display:grid;place-items:center;inline-size:40px;block-size:40px;border-radius:12px;
  background:var(--ac-100);color:var(--ac-700);margin-block-end:12px}

/* Documentation steps: the marker, title and body have explicit grid positions.
   The generated li has h3 and div siblings; auto-placement put div in the 44px marker column. */
.doc-steps>li{grid-template-columns:44px minmax(0,1fr);row-gap:var(--s-2);align-items:start;min-inline-size:0}
.doc-steps>li::before{grid-column:1;grid-row:1 / span 2}
.doc-steps>li>.step-title{grid-column:2;grid-row:1;min-inline-size:0;margin:0}
.doc-steps>li>.step-body{grid-column:2;grid-row:2;min-inline-size:0;max-inline-size:100%;padding:var(--s-4);overflow-wrap:break-word}
.doc-steps>li>.step-body p{margin-block:0 var(--s-3)}
.doc-steps>li>.step-body>:last-child{margin-block-end:0}
.docs-shell>*{min-inline-size:0}
.doc-body .code{min-inline-size:0;max-inline-size:100%}
.doc-body .code pre{direction:ltr;text-align:left;white-space:pre;max-inline-size:100%}
/* Reserve three columns for screens wide enough to keep the article readable. */
@media (min-width:1000px) and (max-width:1199px){
  .docs-shell,.docs-shell--2{grid-template-columns:240px minmax(0,1fr)}
  .docs-toc{display:none}
}
@media (max-width:520px){
  .doc-steps>li{grid-template-columns:32px minmax(0,1fr);column-gap:var(--s-2)}
  .doc-steps>li::before{inline-size:28px;block-size:28px}
  .doc-steps>li>.step-body{padding:var(--s-3)}
}