/* ===================================================================
   CLASH CHRONICLES — DOCUMENTATION PAGE STYLES
   Two-column reading layout: sticky TOC + content, plus a small
   client-side search over headings and paragraph text.
   =================================================================== */

.docs-header{
  padding:150px 0 40px;
  border-bottom:1px solid var(--line-soft);
}
.docs-header h1{ font-size:clamp(2rem, 4vw, 3rem); margin-bottom:10px; }
.docs-header p{ max-width:640px; }

.docs-search{
  margin-top:26px;
  max-width:480px;
  position:relative;
}
.docs-search input{
  width:100%;
  background:var(--stone);
  border:1px solid var(--line);
  color:var(--parchment);
  font-family:var(--font-mono);
  font-size:0.86rem;
  padding:13px 16px 13px 40px;
  border-radius:var(--radius);
}
.docs-search input::placeholder{ color:var(--parchment-faint); }
.docs-search input:focus{ outline:none; border-color:var(--gold); }
.docs-search svg{
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; opacity:0.6; pointer-events:none;
}
.docs-search-count{
  font-family:var(--font-mono); font-size:0.7rem; color:var(--parchment-faint);
  margin-top:8px;
}

.docs-layout{
  display:grid;
  grid-template-columns:280px 1fr;
  gap:56px;
  align-items:start;
  padding:56px 0 120px;
}

.docs-toc{
  position:sticky;
  top:90px;
  max-height:calc(100vh - 120px);
  overflow-y:auto;
  padding-right:14px;
  border-right:1px solid var(--line-soft);
}
.toc-list{ font-size:0.85rem; }
.toc-list ul{ margin:0; padding:0; }
.toc-h1 > a{
  display:block; padding:10px 0 6px;
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--gold-bright);
  border-top:1px solid var(--line-soft);
  margin-top:6px;
}
.toc-list > .toc-h1:first-child > a{ border-top:none; margin-top:0; }
.toc-sub{ padding-left:4px; margin-bottom:6px; }
.toc-h2 > a{
  display:block; padding:5px 0 5px 10px;
  color:var(--parchment-dim);
  font-size:0.82rem;
  border-left:2px solid transparent;
}
.toc-h2 > a:hover{ color:var(--gold-bright); border-left-color:var(--gold-dim); }
.toc-subsub{ padding-left:20px; }
.toc-h3 > a{
  display:block; padding:3px 0;
  color:var(--parchment-faint);
  font-size:0.76rem;
}
.toc-h3 > a:hover{ color:var(--gold-bright); }

.docs-content{ min-width:0; max-width:820px; }
.docs-content h1{
  font-size:2rem; margin-top:56px; padding-top:24px;
  border-top:1px solid var(--line-soft);
  scroll-margin-top:90px;
}
.docs-content h1:first-child{ margin-top:0; border-top:none; padding-top:0; }
.docs-content h2{ font-size:1.5rem; margin-top:44px; scroll-margin-top:90px; }
.docs-content h3{ font-size:1.15rem; margin-top:30px; color:var(--gold-bright); scroll-margin-top:90px; }
.docs-content p{ font-size:1rem; }
.docs-content strong{ color:var(--parchment); }
.docs-content em{ color:var(--elixir-glow); font-style:italic; }
.docs-content hr{ border:none; border-top:1px solid var(--line-soft); margin:44px 0; }
.docs-content ul, .docs-content ol{ margin:0 0 1em; padding-left:1.3em; color:var(--parchment-dim); }
.docs-content li{ list-style:disc; margin-bottom:6px; }
.docs-content ol li{ list-style:decimal; }
.docs-content code{
  font-family:var(--font-mono); font-size:0.85em;
  background:var(--stone); padding:2px 6px; border-radius:3px; color:var(--gold-bright);
}
.docs-content .table-wrap{ margin:20px 0 28px; }
.docs-content table{ font-size:0.84rem; min-width:100%; }
.docs-content table td, .docs-content table th{ vertical-align:top; }

mark.search-hit{ background:var(--gold-dim); color:#120F0A; padding:0 2px; border-radius:2px; }
.docs-content [data-search-hidden="true"]{ display:none; }

.docs-mobile-toc-toggle{
  display:none;
  width:100%;
  margin-top:20px;
  padding:12px 16px;
  background:var(--stone);
  border:1px solid var(--line);
  color:var(--parchment);
  font-family:var(--font-mono);
  font-size:0.76rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  border-radius:var(--radius);
  cursor:pointer;
}

@media (max-width: 980px){
  .docs-layout{ grid-template-columns:1fr; padding-top:20px; }
  .docs-toc{
    position:static; max-height:none; border-right:none;
    border:1px solid var(--line-soft); border-radius:var(--radius);
    padding:16px; margin-bottom:0;
    display:none;
  }
  .docs-toc.is-open{ display:block; }
  .docs-mobile-toc-toggle{ display:block; }
}