/* The docs' dark theme and its header button. Loaded only by docs pages (docsHead in lib/od-pages.mjs), whose script sets
   html[data-theme]. The colours are the dashboard's dark palette, mapped onto the site's --ss tokens. --ss-deep stays the
   deep green, because the green buttons and panels need it; where it is text on a page ground, a rule below changes it. */
.dt-btn{display:none;align-items:center;justify-content:center;width:34px;height:34px;margin-right:12px;padding:0;border:0;border-radius:9px;background:transparent;color:var(--ss-charcoal);cursor:pointer}
html[data-theme] .dt-btn{display:flex}
.dt-btn:hover{color:var(--ss-sea);box-shadow:0 0 0 1px var(--ss-sea)}
.dt-btn svg{width:18px;height:18px}
html[data-theme="dark"] .dt-moon,html[data-theme="light"] .dt-sun{display:none}
/* No line beside the sidebar, in either theme. */
.dn{border-right:0}
/* On a phone the header has no room, so the button sits in the docs bar, which only shows there. */
.docs-bar .dt-btn{margin:0 0 0 auto}
@media (max-width:860px){html[data-theme] .nav-right .dt-btn{display:none}}

html[data-theme="dark"]{
  color-scheme:dark;
  --ss-paper:#0f1011;--ss-white:#18191b;--ss-wash:#1a1b1d;--ss-hover:#1e1f22;
  --ss-obsidian:#f2f2f3;--ss-charcoal:#b4b5b9;--ss-stone:#8c8d92;--ss-ash:#36373b;
  --ss-hairline:#2a2b2e;--ss-line-teal:#2a2b2e;--ss-mint:#242528;--ss-mint-line:#333438;
  --ss-sea:#2fd6b0;--ss-line-number:#8c8d92;
  --ss-ide-fn:#8ab4ff;--ss-ide-key:#c7a1ff;--ss-ide-num:#ff9f91;--ss-ide-prop:#62cde0;--ss-ide-punc:#a0a1a6;--ss-ide-str:#63d69d;
  --ss-ring:0 0 0 1px rgba(255,255,255,.08),0 0 0 2px #0f1011;
  --ss-ring-line:0 0 0 1px #2a2b2e;--ss-ring-sea:0 0 0 1px #2fd6b0;
  --ss-focus:0 0 0 1px #2fd6b0,0 0 0 4px #242528;
  --ss-lift:0 0 0 1px #2a2b2e;--ss-lift-editor:0 0 0 1px #2a2b2e;--ss-float:0 0 0 1px #2a2b2e,0 20px 44px -18px rgba(0,0,0,.6);
}
/* The nav in the dark theme is the homepage's state over its dark hero (site-nav.mjs), on the docs' own dark ground. */
html[data-theme="dark"] header#site-nav.nav-page:not(.is-solid):not(.ss-open){background-color:rgba(15,16,17,.85);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 1px 0 #2a2b2e!important}
html[data-theme="dark"] header#site-nav.nav-page.ss-open{background-color:#0f1011!important}
html[data-theme="dark"] .docs-bar{background:rgba(15,16,17,.92)}
@media (max-width:860px){html[data-theme="dark"] .dn{box-shadow:0 0 0 1px #2a2b2e,0 24px 60px rgba(0,0,0,.6)}}
html[data-theme="dark"] .dn-search input,html[data-theme="dark"] .dc-facts,html[data-theme="dark"] .ep-url{background:#18191b}
html[data-theme="dark"] .prose code{color:#f2f2f3}
html[data-theme="dark"] .card,html[data-theme="dark"] .ed,html[data-theme="dark"] .t-frame{background:#18191b}
html[data-theme="dark"] .prose{color:#d6d7da}
html[data-theme="dark"] .prose a,html[data-theme="dark"] .anchor{color:#2fd6b0}
html[data-theme="dark"] .dc-facts code,html[data-theme="dark"] .dc-t code{color:#f2f2f3}
html[data-theme="dark"] .callout{color:#f2f2f3}
html[data-theme="dark"] .ed-copy{background:#303135;color:#f2f2f3}
html[data-theme="dark"] .skip{background:#f2f2f3;color:#0f1011}
/* The shared closing band and footer (site-footer.mjs) draw in fixed light greys; in the dark theme they take the docs' palette. */
html[data-theme="dark"] :is(.hx-endbox,.ft2-box){border-color:#2a2b2e}
html[data-theme="dark"] :is(.ft2-top > div + div,.ft2-base,.ft2-word){border-color:#2a2b2e}
html[data-theme="dark"] .ec2-h,html[data-theme="dark"] .ft2 .brand,html[data-theme="dark"] .ec2-note b{color:#f2f2f3}
html[data-theme="dark"] .ec2 .ec-line{stroke:#36373b}
html[data-theme="dark"] .ec2 .ec-tiles .tile{box-shadow:0 0 0 1px #2a2b2e,0 14px 26px -16px rgba(0,0,0,.6)!important}
html[data-theme="dark"] .ec2 .ec-tiles .tile.t-mint{--c:#18191b;background:#18191b}
html[data-theme="dark"] .ft2{color:#b4b5b9}
html[data-theme="dark"] :is(.ft-brand p,.ft-mail,.ft-col a,.ec2-note){color:#b4b5b9}
html[data-theme="dark"] :is(.ft-col h4,.ft2-base,.ft2-base a){color:#8c8d92}
html[data-theme="dark"] :is(.ft-col a:hover,.ft-mail:hover,.ft2-base a:hover){color:#f2f2f3}
html[data-theme="dark"] .ft-col a:hover{background:#1e1f22}
html[data-theme="dark"] .ft2-word{color:#18191b}
@media (max-width:900px){html[data-theme="dark"] :is(.ft2-top > .ft-brand,.ft2-top > div:nth-child(3),.ft2-top > div:nth-child(4),.ft2-top > div:nth-child(5)){border-color:#2a2b2e}}
/* The mega menu (owner, 2026-11-11: "give the hover nav menu a dark mode too"). Its words and tiles already read the
   --ss tokens; the panel and its foot were fixed light (#fff, #fafcfb), which left white words on white. The foot links
   go deep green on hover in the light theme, unreadable here, so they go to the near-white ink instead. */
html[data-theme="dark"] #site-nav .mm-box{background:#18191b;box-shadow:0 0 0 1px #2a2b2e,0 24px 60px -24px rgba(0,0,0,.7),0 8px 20px -12px rgba(0,0,0,.5)}
html[data-theme="dark"] #site-nav .mm-foot{background:#141516}
html[data-theme="dark"] #site-nav :is(.mm-more,.mm-mail):hover{color:#f2f2f3}