/* Documentation layout. Loads after pages.css and reuses its tokens. */
.docs-shell{display:grid;grid-template-columns:240px minmax(0,1fr) 200px;gap:48px;max-width:1280px;width:calc(100% - 64px);margin:0 auto;padding:32px 0 80px}

/* Left sidebar */
.docs-sidebar{position:sticky;top:20px;align-self:start;max-height:calc(100vh - 40px);overflow-y:auto;padding-right:8px}
.docs-search{position:relative;margin-bottom:22px!important}
.docs-sidebar .docs-search input{width:100%;border:1px solid var(--line);border-radius:6px;padding:9px 10px 9px 32px;font:inherit;font-size:12px;color:var(--ink);background:#fff}
.docs-sidebar .docs-search input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(8,122,255,.12)}
.docs-search svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:14px;height:14px;stroke:#8794a7;fill:none;stroke-width:2}
.docs-search kbd{position:absolute;right:8px;top:50%;transform:translateY(-50%);font:10px/1 monospace;color:#8794a7;border:1px solid var(--line);border-radius:4px;padding:3px 5px;background:#f7faff}
.docs-group{margin-bottom:22px}
.docs-group h2{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:#8794a7;margin-bottom:8px;font-weight:600}
.docs-group a{display:block;font-size:13px;color:#475c77;padding:6px 10px;border-left:2px solid transparent;border-radius:0 5px 5px 0;line-height:1.35}
.docs-group a:hover{color:var(--ink);background:#f7faff}
.docs-group a[aria-current="true"]{color:var(--blue);border-left-color:var(--blue);background:#f2f7ff;font-weight:600}
.docs-noresults{font-size:12px;color:#8794a7;padding:6px 10px}
.docs-mobile-nav{display:none}

/* Article */
.docs-article{min-width:0;max-width:760px}
.docs-article .breadcrumb{margin-bottom:18px}
.docs-article h1{font-size:clamp(30px,3vw,40px)}
.docs-lead{font-size:16px;line-height:1.7;color:#55657c;margin-top:14px}
.docs-meta{display:flex;flex-wrap:wrap;gap:16px;margin-top:16px;font-size:11px;color:#8794a7}
.docs-section{padding-top:44px;margin-top:44px;border-top:1px solid var(--line)}
.docs-section:first-of-type{border-top:0;margin-top:28px;padding-top:0}
.docs-section > .eyebrow{margin-bottom:8px}
.docs-section h2{font-size:26px;scroll-margin-top:24px}
.docs-section h3{font-size:16px;margin-top:28px;scroll-margin-top:24px}
.docs-section p,.docs-section li{font-size:14px;line-height:1.75;color:#4b5d75}
.docs-section p{margin-top:12px}
.docs-section ul,.docs-section ol{padding-left:20px;margin:12px 0}
.docs-section li{margin:4px 0}
.docs-section strong{color:var(--ink)}
.docs-section a:not(.button){color:var(--blue);font-weight:600}
.docs-section a:not(.button):hover{text-decoration:underline}
.docs-section code:not(pre code){font-family:"SFMono-Regular",Consolas,monospace;font-size:12.5px;background:#f2f6fb;border:1px solid #e3eaf3;border-radius:4px;padding:1px 5px;color:#1d3a66}
.docs-section .table-wrap{margin-top:16px}
.docs-section td code{white-space:nowrap}
.docs-section td{color:#4b5d75}
.docs-section th{font-size:11px;color:#8794a7;font-weight:600;background:#f9fbfe}

/* Code blocks */
.docs-code{position:relative;margin-top:16px;border:1px solid #1e2b45;border-radius:8px;background:#0f1a2e;overflow:hidden}
.docs-code-head{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid #1e2b45;font:11px/1 monospace;color:#8ea2c0}
.docs-code pre{margin:0;padding:16px;overflow-x:auto;font:12.5px/1.8 "SFMono-Regular",Consolas,monospace;color:#d6e2f5}
.docs-code .c{color:#7d8fab}.docs-code .k{color:#ff9e64}.docs-code .s{color:#7ee0c3}.docs-code .n{color:#8fb8ff}.docs-code .p{color:#8fb8ff;user-select:none}
.copy-btn{font:600 11px/1 Arial,sans-serif;color:#c9d6ea;background:#1b2840;border:1px solid #2a3a58;border-radius:4px;padding:5px 8px;cursor:pointer}
.copy-btn:hover{background:#24365a;color:#fff}

/* Callouts */
.callout{display:flex;gap:12px;margin-top:18px;border:1px solid #cfe2ff;background:#f2f7ff;border-radius:8px;padding:14px 16px;font-size:13px;line-height:1.65;color:#36506f}
.callout b{color:var(--ink)}
.callout.warn{border-color:#fbe0b6;background:#fff8ec;color:#7a5520}
.callout.ok{border-color:#bfeee4;background:#effcf8;color:#1d5f53}
.callout-icon{flex-shrink:0;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:12px;background:var(--blue);color:#fff}
.callout.warn .callout-icon{background:#e59a1c}
.callout.ok .callout-icon{background:var(--teal)}

/* Steps */
.docs-steps{list-style:none;padding:0!important;counter-reset:step;margin-top:18px!important}
.docs-steps > li{position:relative;padding:0 0 22px 44px!important;margin:0!important;border-left:1px solid var(--line);margin-left:14px!important}
.docs-steps > li:last-child{border-left-color:transparent;padding-bottom:0!important}
.docs-steps > li:before{counter-increment:step;content:counter(step);position:absolute;left:-14px;top:-2px;width:28px;height:28px;border-radius:50%;background:#fff;border:1px solid #cdddf1;color:var(--blue);font-weight:700;font-size:12px;display:grid;place-items:center}
.docs-steps > li > strong{display:block;font-size:14px;margin-bottom:2px}

/* Concept cards */
.docs-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:18px}
.docs-card{border:1px solid var(--line);border-radius:8px;padding:16px;background:#fff;transition:border-color .15s,box-shadow .15s}
a.docs-card:hover{border-color:#b9d3f5;box-shadow:0 8px 24px -16px rgba(8,60,140,.35)}
.docs-card small{display:block;font-size:10px;letter-spacing:.8px;font-weight:600;text-transform:uppercase;color:var(--blue)}
.docs-card.src small{color:#087aff}.docs-card.tf small{color:#e5710b}.docs-card.snk small{color:var(--teal)}
.docs-card strong{display:block;font-size:14px;margin-top:6px;color:var(--ink)}
.docs-card span{display:block;font-size:12.5px;line-height:1.6;color:#64748b;margin-top:4px;font-weight:400}

/* Feedback + pager */
.docs-feedback{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:56px;padding:16px;border:1px solid var(--line);border-radius:8px;font-size:13px;color:#4b5d75}
.docs-feedback button{border:1px solid var(--line);background:#fff;border-radius:5px;padding:6px 12px;font:inherit;font-size:12px;cursor:pointer;color:var(--ink)}
.docs-feedback button:hover{border-color:var(--blue);color:var(--blue)}
.docs-pager{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.docs-pager a{border:1px solid var(--line);border-radius:8px;padding:14px 16px;font-size:14px;font-weight:600;color:var(--ink)}
.docs-pager a:hover{border-color:var(--blue);color:var(--blue)}
.docs-pager small{display:block;font-size:11px;font-weight:400;color:#8794a7;margin-bottom:4px}
.docs-pager .next{text-align:right}

/* Right "On this page" */
.docs-toc{position:sticky;top:20px;align-self:start;font-size:12px}
.docs-toc h2{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:#8794a7;margin-bottom:10px;font-weight:600}
.docs-toc a{display:block;color:#64748b;padding:5px 0 5px 12px;border-left:1px solid var(--line);line-height:1.4}
.docs-toc a:hover{color:var(--ink)}
.docs-toc a.active{color:var(--blue);border-left-color:var(--blue);font-weight:600}
.docs-toc .toc-help{margin-top:22px;padding:14px;border-radius:8px;background:#f7faff;border:1px solid #edf2f8;line-height:1.55;color:#64748b}
.docs-toc .toc-help a{border:0;padding:0;margin-top:6px;color:var(--blue);font-weight:600}

@media(max-width:1100px){.docs-shell{grid-template-columns:220px minmax(0,1fr);gap:36px}.docs-toc{display:none}}
@media(max-width:820px){
  .docs-shell{grid-template-columns:1fr;width:calc(100% - 40px);padding-top:16px}
  .docs-sidebar{display:none}
  .docs-mobile-nav{display:block;position:sticky;top:0;z-index:5;background:#fff;padding:10px 0;border-bottom:1px solid var(--line);margin-bottom:8px}
  .docs-mobile-nav select{width:100%;border:1px solid var(--line);border-radius:6px;padding:10px;font:inherit;font-size:13px;color:var(--ink);background:#fff}
  .docs-cards{grid-template-columns:1fr}
  .docs-pager{grid-template-columns:1fr}
  .docs-section h2,.docs-section h3,.docs-section{scroll-margin-top:72px}
}

/* .hidden from pages.css loses to the more specific rules above */
.docs-group.hidden,.docs-group a.hidden,.docs-noresults.hidden,.docs-feedback .hidden{display:none}
/* Dedicated guide pages and links from the documentation overview. */
.docs-guide-links{margin:22px 0;padding-bottom:18px;border-bottom:1px solid var(--line)}.docs-guide-links h2{font-size:11px;letter-spacing:0;color:#8794a7;margin-bottom:10px}.docs-guide-links a,#guide-sections a{display:block;padding:8px 10px;font-size:12px;color:#536780;border-radius:5px;line-height:1.5}.docs-guide-links a:hover,#guide-sections a:hover{background:#f3f7fd;color:var(--blue)}.docs-guide-links a[aria-current=page],#guide-sections a[aria-current=true]{color:var(--blue);background:#eef5ff;font-weight:600}.guide-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin:22px 0}.guide-card-grid a{display:block;border:1px solid var(--line);border-radius:7px;padding:17px;background:#fbfdff}.guide-card-grid strong{font-size:13px;color:var(--blue)}.guide-card-grid span{display:block;color:#71839b;font-size:11px;line-height:1.6;margin-top:10px}.guide-card-grid a:hover{border-color:#9fc5f5}.guide-mobile-links{display:none}.docs-example-flow{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:20px 0}.docs-example-flow span{border:1px solid #d5e5fa;padding:14px;border-radius:5px;font-size:12px;background:#f8fbff}.docs-example-flow b{color:#87b0e6;font-weight:400}.guide-help{font-size:11px;margin:30px 0 12px;color:#8496ad}.docs-section ol>li>p{margin-top:5px;margin-bottom:14px}.docs-toc h2{font-size:11px;letter-spacing:0}#guide-empty{font-size:11px;margin:15px 10px;color:#899ab0}@media(max-width:900px){.guide-mobile-links{display:flex;align-items:center;gap:15px;margin-bottom:24px}.guide-mobile-links>a{font-size:11px;white-space:nowrap;color:var(--blue)}.guide-mobile-links select{width:auto;flex:1}}@media(max-width:640px){.docs-example-flow{flex-direction:column;align-items:stretch}.docs-example-flow b{transform:rotate(90deg);align-self:center}.docs-example-flow span{text-align:center}.guide-card-grid{grid-template-columns:1fr}}