/* Spectronaut manual: compact navigation and one mounted reading topic. */
body[data-sn21-reader] { --sn21-ink:#162d3a; --sn21-muted:#496170; --sn21-line:#d5e0e4; --sn21-paper:#fff; --sn21-ground:#f4f7f8; --sn21-accent:#006b65; --sn21-soft:#e8f4f1; background:var(--sn21-ground); color:var(--sn21-ink); }
body[data-sn21-reader] [hidden] { display:none!important; }
.sn21-reader-main { width:calc(100% - 48px); max-width:1660px; margin:30px auto 64px; }
.sn21-reader-heading { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:20px; }
.sn21-reader-heading h1 { margin:4px 0 0; font-size:clamp(25px,2.1vw,34px); line-height:1.4; color:var(--sn21-ink); letter-spacing:-.025em; }
.sn21-reader-heading .eyebrow { margin:0; color:var(--sn21-accent); font-size:12px; letter-spacing:.09em; }
.sn21-reader-main a { color:var(--sn21-accent); }
.sn21-reader-main a:visited { color:var(--sn21-accent); }
.sn21-reader-main .button { white-space:normal; min-height:40px; border-radius:7px; box-shadow:none; font-size:14px; line-height:1.4; padding:10px 16px; text-align:center; }
.sn21-reader-main .button.primary, .sn21-reader-main .button.primary:visited, .sn21-reader-main .button.primary:hover, .sn21-reader-main .button.primary:focus-visible { color:#fff; background:#006b65; border:1px solid #006b65; }
.sn21-reader-main .button.secondary { color:var(--sn21-ink); background:var(--sn21-paper); border:1px solid var(--sn21-line); }
.sn21-reader-main :is(a,button,input,summary):focus-visible { outline:3px solid #17877d; outline-offset:3px; }
.sn21-search { background:var(--sn21-paper); border:1px solid var(--sn21-line); border-radius:10px; padding:16px 20px; }
.sn21-search label { display:block; color:var(--sn21-ink); font-size:13px; font-weight:700; margin-bottom:7px; }
.sn21-search-controls { display:flex; align-items:stretch; gap:10px; }
.sn21-search input { flex:1; min-width:0; color:var(--sn21-ink); background:var(--sn21-ground); border:1px solid var(--sn21-line); border-radius:6px; padding:10px 12px; font-size:15px; }
.sn21-search input::placeholder { color:var(--sn21-muted); opacity:1; }
.sn21-quick-links { display:flex; flex-wrap:wrap; gap:8px 24px; margin:12px 0 22px; font-size:13px; }
.sn21-quick-links a { text-decoration:underline; text-underline-offset:3px; }
.sn21-reader-layout { display:grid; grid-template-columns:270px minmax(0,1fr); gap:30px; align-items:start; }
.sn21-directory { position:sticky; top:calc(var(--portal-sticky-header-height,140px) + 18px); max-height:calc(100dvh - var(--portal-sticky-header-height,140px) - 40px); overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; border-right:1px solid var(--sn21-line); padding-right:18px; }
.sn21-directory details { background:none; border:0; border-radius:0; padding:0; box-shadow:none; margin:0; }
.sn21-directory summary { display:flex; align-items:baseline; gap:9px; font-size:14px; font-weight:650; color:var(--sn21-ink); padding:11px 3px; cursor:pointer; line-height:1.5; list-style:none; }
.sn21-directory summary::after { content:'+'; color:var(--sn21-muted); margin-left:auto; }
.sn21-directory details[open] > summary::after { content:'−'; }
#sn21DirectoryDisclosure > summary { font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--sn21-muted); padding:0 0 14px; }
.sn21-directory :is(summary,a) > span:first-child { color:var(--sn21-muted); font-variant-numeric:tabular-nums; flex:0 0 27px; font-size:12px; }
.sn21-directory nav { display:grid; padding-bottom:9px; }
.sn21-directory nav a { display:flex; align-items:baseline; gap:7px; color:var(--sn21-muted); font-size:13px; line-height:1.6; padding:8px 9px; border-left:2px solid transparent; border-radius:0 5px 5px 0; }
.sn21-directory nav a:hover { background:var(--sn21-paper); color:var(--sn21-ink); }
.sn21-directory nav a[aria-current] { background:var(--sn21-soft); border-left-color:var(--sn21-accent); color:var(--sn21-accent); font-weight:700; }
.sn21-directory-home { display:block; padding:8px 3px; font-weight:700; font-size:14px; }
.sn21-reader-stage { min-width:0; }
.sn21-index-group { background:var(--sn21-paper); border:1px solid var(--sn21-line); border-radius:9px; margin-bottom:20px; padding:20px 24px; }
.sn21-index-group h2 { display:flex; gap:12px; margin:0; color:var(--sn21-ink); font-size:21px; line-height:1.5; }
.sn21-index-group h2 span { color:var(--sn21-accent); font-size:15px; line-height:2; }
.sn21-index-group > p { margin:4px 0 14px 28px; color:var(--sn21-muted); font-size:13px; }
.sn21-index-row { display:grid; grid-template-columns:36px minmax(0,1fr) minmax(100px,1fr) 18px; align-items:baseline; gap:10px; padding:12px 0; border-top:1px solid var(--sn21-line); }
.sn21-index-row strong { font-size:15px; font-weight:600; color:var(--sn21-ink); }
.sn21-index-row :is(small,span:first-child) { color:var(--sn21-muted); font-size:12px; }
.sn21-index-row:hover strong { text-decoration:underline; text-underline-offset:3px; color:var(--sn21-accent); }
.sn21-breadcrumb { display:flex; flex-wrap:wrap; gap:8px; color:var(--sn21-muted); font-size:13px; margin:0 0 13px; scroll-margin-top:calc(var(--portal-sticky-header-height,140px) + 18px); }
.sn21-topics { display:flex; gap:7px; flex-wrap:wrap; padding:0 0 18px; }
.sn21-topics a { color:var(--sn21-muted); border:1px solid var(--sn21-line); border-radius:5px; padding:7px 10px; font-size:13px; line-height:1.5; background:var(--sn21-paper); }
.sn21-topics a[aria-current] { color:var(--sn21-accent); background:var(--sn21-soft); border-color:var(--sn21-accent); font-weight:700; }
.sn21-topics select { max-width:100%; min-width:155px; border:1px solid var(--sn21-line); border-radius:5px; background:var(--sn21-paper); color:var(--sn21-ink); padding:7px 10px; font-size:13px; }
#sn21Content { background:var(--sn21-paper); border:1px solid var(--sn21-line); border-radius:9px; padding:28px clamp(20px,3vw,48px); min-height:180px; overflow-wrap:anywhere; }
#sn21Content :is(h2,h3,h4,strong,b) { color:var(--sn21-ink); }
#sn21Content h2 { font-size:26px; line-height:1.5; margin:0 0 18px; }
#sn21Content h3 { font-size:20px; line-height:1.5; margin:26px 0 12px; }
#sn21Content h4 { font-size:17px; line-height:1.5; margin:22px 0 8px; }
#sn21Content :is(p,li,td,th,figcaption,summary) { color:var(--sn21-ink); line-height:1.85; }
#sn21Content p { margin:12px 0; font-size:16px; }
#sn21Content :is(ol,ul) { padding-left:24px; }
#sn21Content li { margin:8px 0; font-size:15px; }
#sn21Content .card { box-shadow:none; background:transparent; color:var(--sn21-ink); border-color:var(--sn21-line); }
#sn21Content article.card { border:0; padding:0; }
#sn21Content :is(.sn21-figure-strip,.sn21-figure-flow,.sn21-value-grid,.media-showcase) { display:grid; grid-template-columns:1fr; gap:22px; }
#sn21Content :is(.sn21-figure-callout,.sn21-online-figure,.sn21-inline-figure,figure) { display:block; width:100%; max-width:none; margin:20px 0; padding:0; border:0; }
#sn21Content img { display:block; width:auto; max-width:100%; height:auto; max-height:none; object-fit:contain; margin:12px auto; background:#fff; border:1px solid var(--sn21-line); }
#sn21Content figcaption { font-size:13px; color:var(--sn21-muted); margin:10px 0 0; }
#sn21Content table { display:block; overflow:auto; max-width:100%; border-collapse:collapse; }
#sn21Content :is(td,th) { min-width:120px; padding:8px 12px; }
#sn21Content pre { overflow:auto; max-width:100%; white-space:pre; }
#sn21Content .sn21-original { margin-top:24px; padding-top:14px; border-top:1px solid var(--sn21-line); }
#sn21Content .sn21-original summary { cursor:pointer; color:var(--sn21-accent); font-size:14px; font-weight:700; }
#sn21Content .sn21-original :is(p,div) { color:var(--sn21-muted); font-size:14px; white-space:pre-wrap; }
.sn21-reading-footer { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; margin:22px 0; }
.sn21-status { padding:20px 0; color:var(--sn21-muted); }
.sn21-search-summary { display:flex; align-items:baseline; justify-content:space-between; gap:15px; border-bottom:1px solid var(--sn21-line); padding-bottom:15px; }
.sn21-search-summary h2 { font-size:22px; margin:0; color:var(--sn21-ink); }
.sn21-search-summary p { color:var(--sn21-muted); margin:0; font-size:13px; }
.sn21-search-result { border-bottom:1px solid var(--sn21-line); padding:20px 0; }
.sn21-search-result a { display:block; font-size:18px; font-weight:700; margin-bottom:6px; }
.sn21-search-result small { color:var(--sn21-muted); font-size:12px; }
.sn21-search-result p { color:var(--sn21-ink); line-height:1.85; font-size:14px; margin:10px 0 0; overflow-wrap:anywhere; }
.sn21-search-result mark { background:#fff1a6; color:#172f38; padding:0 2px; border-radius:2px; }
.sn21-search-pagination { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:24px 0; }
body[data-sn21-reader][data-theme="dark"] { --sn21-ink:#e1edf0; --sn21-muted:#b4c7ce; --sn21-line:#41515b; --sn21-paper:#1c2b34; --sn21-ground:#14222b; --sn21-accent:#8cddca; --sn21-soft:#263f40; }
@media (prefers-color-scheme:dark) { body[data-sn21-reader]:not([data-theme]) { --sn21-ink:#e1edf0; --sn21-muted:#b4c7ce; --sn21-line:#41515b; --sn21-paper:#1c2b34; --sn21-ground:#14222b; --sn21-accent:#8cddca; --sn21-soft:#263f40; } }
@media (max-width:1000px) { .sn21-reader-layout { grid-template-columns:220px minmax(0,1fr); gap:20px; } .sn21-index-row { grid-template-columns:34px minmax(0,1fr) 18px; } .sn21-index-row small { grid-column:2; grid-row:2; } .sn21-index-row > span:last-child { grid-column:3; grid-row:1; } }
@media (max-width:760px) { .sn21-reader-main { width:calc(100% - 28px); margin-top:20px; } .sn21-reader-heading { align-items:flex-start; gap:12px; } .sn21-reader-heading h1 { font-size:25px; } .sn21-reader-heading .button { font-size:12px; padding:8px 10px; flex-shrink:0; } .sn21-search { padding:13px; } .sn21-search-controls { flex-wrap:wrap; } .sn21-search input { flex-basis:100%; } .sn21-reader-layout { grid-template-columns:1fr; gap:18px; } .sn21-directory { position:static; max-height:none; border:1px solid var(--sn21-line); border-radius:7px; padding:12px 15px; background:var(--sn21-paper); } #sn21DirectoryDisclosure > summary { padding:0; } #sn21Directory { margin-top:12px; max-height:55dvh; overflow:auto; } .sn21-index-group { padding:18px; } .sn21-index-group h2 { font-size:18px; } #sn21Content { padding:20px 18px; } #sn21Content h2 { font-size:22px; } .sn21-topics { gap:6px; } .sn21-reading-footer .button { max-width:100%; } .sn21-search-summary { flex-wrap:wrap; } }
@media (max-width:760px) {
  body[data-sn21-reader] .topbar .topnav { flex-wrap:nowrap; justify-content:flex-start; gap:8px; overflow-x:auto; max-width:100%; padding-bottom:8px; scrollbar-width:thin; }
  body[data-sn21-reader] .topnav > :is(a,.nav-menu-item) { flex:0 0 auto; }
}