.wordmark.on-light .check{color:var(--ink);}

/* ---------- HEADER ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0;
  z-index:100;
  height:var(--header-h);
  padding:0 1.6rem;
  display:flex;
  align-items:center;
  gap:1.8rem;
  background:rgba(20,24,27,0.94);
  backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color 0.3s ease;
}
.site-header.scrolled{border-bottom-color:var(--line-dark);}

.top-nav{
  display:flex;
  align-items:center;
  gap:1.8rem;
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.07em;
  text-transform:uppercase;
  flex:0 0 auto;
}
.top-nav a{
  color:var(--paper);
  opacity:0.7;
  position:relative;
  padding-bottom:4px;
  white-space:nowrap;
  transition:opacity 0.2s ease;
}
.top-nav a:hover, .top-nav a.active{opacity:1;}
.top-nav a::after{
  content:''; position:absolute; left:0; bottom:0;
  width:0; height:1px; background:var(--red);
  transition:width 0.2s ease;
}
.top-nav a:hover::after, .top-nav a.active::after{width:100%;}

.site-search{position:relative; flex:1 1 auto; max-width:320px; margin-left:auto;}
.search-input{
  width:100%;
  background:rgba(247,246,243,0.08);
  border:1px solid var(--line-dark);
  color:var(--paper);
  font-family:var(--font-mono);
  font-size:0.75rem;
  padding:0.55em 0.9em;
  transition:border-color 0.2s ease, background 0.2s ease;
}
.search-input::placeholder{color:rgba(247,246,243,0.45);}
.search-input:focus{outline:none; border-color:var(--red); background:rgba(247,246,243,0.12);}
.search-results{
  position:absolute;
  top:calc(100% + 10px);
  left:0; right:0;
  background:var(--ink);
  border:1px solid var(--line-dark);
  max-height:70vh;
  overflow-y:auto;
  z-index:200;
}
.search-results:not([hidden]){display:block;}
.search-result{display:block; padding:0.8em 1em; border-bottom:1px solid var(--line-dark);}
.search-result:last-child{border-bottom:none;}
.search-result:hover, .search-result.is-active{background:rgba(247,246,243,0.06);}
.search-result .sr-title{font-family:var(--font-head); font-size:0.9rem; color:var(--paper); font-weight:600;}
.search-result .sr-crumb{font-family:var(--font-mono); font-size:0.62rem; letter-spacing:0.05em; text-transform:uppercase; color:var(--red); margin-top:0.2rem;}
.search-result .sr-snippet{font-size:0.8rem; color:rgba(247,246,243,0.6); margin-top:0.3rem; line-height:1.5;}
.search-empty{padding:1em; font-size:0.8rem; color:rgba(247,246,243,0.5); font-family:var(--font-mono);}
.search-result mark{background:transparent; color:var(--red); font-weight:600;}

.menu-btn{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none; border:none; cursor:pointer;
  padding:8px;
  flex:0 0 auto;
}
.menu-btn span{width:20px; height:1.5px; background:var(--paper); transition:transform 0.25s ease, opacity 0.2s ease;}
.menu-btn.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.menu-btn.open span:nth-child(2){opacity:0;}
.menu-btn.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

.nav-backdrop{display:none;}

/* ---------- DOC LAYOUT ---------- */
.doc-layout{
  max-width:1400px;
  margin:0 auto;
  padding:calc(var(--header-h) + 2.6rem) 1.6rem 4rem;
  display:grid;
  grid-template-columns:240px minmax(0,1fr) 220px;
  gap:3rem;
  align-items:start;
}
.doc-layout--home{
  grid-template-columns:minmax(0,1fr);
  max-width:900px;
}
.doc-layout--home .markdown-body{margin:0 auto;}

.doc-sidebar{position:sticky; top:calc(var(--header-h) + 2rem); max-height:calc(100vh - var(--header-h) - 3rem); overflow-y:auto;}
.side-nav-heading{
  font-family:var(--font-mono);
  font-size:0.68rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--red);
  margin-bottom:0.9rem;
}
.side-nav-list{display:flex; flex-direction:column; gap:0.15rem;}
.side-nav-list--nested{padding-left:0.9rem; margin-top:0.15rem; border-left:1px solid var(--line-light);}
.side-nav-item a{
  display:block;
  padding:0.4em 0.6em;
  font-size:0.88rem;
  color:var(--ink-soft);
  border-left:2px solid transparent;
  transition:color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.side-nav-item a:hover{color:var(--ink); background:rgba(20,24,27,0.04);}
.side-nav-item a.active{color:var(--red); border-left-color:var(--red); font-weight:600;}
.side-nav-group-toggle{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:0.5em;
  background:none;
  border:none;
  cursor:pointer;
  padding:0.4em 0.6em;
  font-family:var(--font-mono);
  font-size:0.68rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--steel);
}
.side-nav-group-toggle svg{transition:transform 0.2s ease;}
.side-nav-group.is-open > .side-nav-group-toggle svg{transform:rotate(180deg);}
.side-nav-group-body{display:none;}
.side-nav-group.is-open > .side-nav-group-body{display:block;}

.doc-content{min-width:0;}
.doc-content > .eyebrow{margin-bottom:1.2rem;}

.doc-toc{position:sticky; top:calc(var(--header-h) + 2rem); max-height:calc(100vh - var(--header-h) - 3rem); overflow-y:auto;}
.toc-heading{
  font-family:var(--font-mono);
  font-size:0.68rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--steel);
  margin-bottom:0.9rem;
}
.toc-list{display:flex; flex-direction:column; gap:0.1rem;}
.toc-list .toc-list{padding-left:0.9rem;}
.toc-link{
  display:block;
  padding:0.3em 0 0.3em 0.7em;
  font-size:0.82rem;
  color:var(--steel);
  border-left:2px solid var(--line-light);
  transition:color 0.15s ease, border-color 0.15s ease;
}
.toc-link:hover{color:var(--ink);}
.toc-link.active{color:var(--red); border-left-color:var(--red);}

.not-found{padding:4rem 0; text-align:center;}
.not-found h1{font-size:2.4rem; margin-bottom:0.8rem;}
.not-found p{color:var(--steel); margin-bottom:1.8rem;}

/* ---------- FOOTER ---------- */
.site-footer{
  padding:2.6rem 1.6rem;
  border-top:1px solid var(--line-light);
  font-family:var(--font-mono);
  font-size:0.68rem;
  letter-spacing:0.03em;
  color:rgba(20,24,27,0.55);
}
.footer-stack{display:flex; flex-direction:column; align-items:center; gap:0.8rem; text-align:center;}
.footer-legal{display:flex; flex-wrap:wrap; justify-content:center; gap:0.5rem 1rem;}
.footer-legal a:hover{color:var(--red);}
.footer-disclaimer{opacity:0.7;}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1100px){
  .doc-layout{grid-template-columns:220px minmax(0,1fr); }
  .doc-toc{display:none;}
}
/* Mobile nav is consolidated into a single #mobileDrawer (top-level sections +
   the current section's page tree). The desktop .top-nav and .doc-sidebar are
   hidden below the breakpoint rather than reused, so only one panel can ever
   be open at once. */
.mobile-drawer{display:none;}

@media (max-width:860px){
  .top-nav{display:none;}
  .doc-sidebar{display:none;}
  .menu-btn{display:flex;}
  .site-search{order:1; max-width:none; flex:1 1 auto;}
  .doc-layout{grid-template-columns:minmax(0,1fr); padding-top:calc(var(--header-h) + 1.8rem);}

  .mobile-drawer{
    display:block;
    position:fixed;
    top:var(--header-h); bottom:0; left:0;
    width:80vw; max-width:320px;
    background:var(--paper);
    border-right:1px solid var(--line-light);
    padding:1.4rem;
    overflow-y:auto;
    transform:translateX(-100%);
    transition:transform 0.25s ease;
    z-index:90;
  }
  .mobile-drawer.open{transform:translateX(0);}
  .mobile-toplevel{
    display:flex;
    flex-direction:column;
    gap:0;
    font-family:var(--font-mono);
    font-size:0.78rem;
    letter-spacing:0.06em;
    text-transform:uppercase;
    padding-bottom:1rem;
    margin-bottom:1rem;
    border-bottom:1px solid var(--line-light);
  }
  .mobile-toplevel a{padding:0.6em 0; color:var(--ink-soft);}
  .mobile-toplevel a.active{color:var(--red);}

  .nav-backdrop.open{
    display:block;
    position:fixed; inset:var(--header-h) 0 0 0;
    background:rgba(20,24,27,0.5);
    z-index:80;
  }
}