/* ============================================================
   Squad Field Manual — manual.css
   Styles for the knowledge-base reader (manual.html): the
   chapter sidebar, search, the rendered markdown "sheet", and
   prev/next pager. Depends on base.css for tokens + chrome.
   ============================================================ */

/* ---------- layout ---------- */
.frame{display:flex;min-height:100vh;padding-top:58px}

nav.sidebar{
  width:var(--sidebar-w);flex-shrink:0;
  background:var(--paper-lo);
  border-right:2px solid var(--ink);
  padding:22px 0 60px;
  position:sticky;top:58px;height:calc(100vh - 58px);
  overflow-y:auto;
}
.search-wrap{padding:0 18px 18px;border-bottom:1px solid var(--line);margin-bottom:14px}
.search-box{position:relative}
.search-box input{
  width:100%;padding:9px 12px 9px 34px;
  font-family:var(--font-mono);font-size:13px;
  background:var(--paper-hi);border:1.5px solid var(--ink);
  border-radius:var(--radius);color:var(--ink);outline:none;
}
.search-box input:focus-visible{box-shadow:0 0 0 3px rgba(77,92,46,.35);outline:none}
.search-box svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);opacity:.55}

.nav-group{margin-bottom:16px}
.nav-group h3{
  font-family:var(--font-mono);font-size:10.5px;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:var(--ink-soft);
  padding:6px 18px;display:flex;align-items:center;gap:8px;
}
.nav-group h3::after{content:"";flex:1;height:1px;background:var(--line)}
.nav-item{
  display:flex;align-items:center;gap:11px;
  width:100%;text-align:left;
  padding:8px 18px;border:none;background:none;cursor:pointer;
  font-family:var(--font-body);font-size:14.5px;font-weight:500;color:var(--ink);
}
.nav-item .grid-ref{
  font-family:var(--font-mono);font-size:10.5px;font-weight:600;letter-spacing:.05em;
  border:1.5px solid var(--ink);border-radius:var(--radius);
  padding:1px 5px;min-width:30px;text-align:center;
  background:var(--paper-hi);flex-shrink:0;
}
.nav-item:hover{background:rgba(77,92,46,.12)}
.nav-item:focus-visible{outline:2px solid var(--olive-deep);outline-offset:-2px}
.nav-item.active{background:var(--olive);color:var(--paper-hi)}
.nav-item.active .grid-ref{background:var(--olive-deep);border-color:var(--paper-hi);color:var(--paper-hi)}

main{flex:1;min-width:0;padding:44px clamp(20px,5vw,64px) 110px}

.sheet{
  max-width:var(--content-w);margin:0 auto;
  background:var(--paper-hi);
  border:2px solid var(--ink);
  box-shadow:6px 6px 0 rgba(35,38,25,.22);
  padding:clamp(26px,4.5vw,54px);
  position:relative;
}
.sheet::before{
  content:"";position:absolute;top:10px;right:10px;width:14px;height:14px;
  border-top:2px solid var(--ink);border-right:2px solid var(--ink);opacity:.5;
}
.doc-eyebrow{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:14px;
}
.doc-eyebrow .ref{
  background:var(--ink);color:var(--paper-hi);
  padding:2px 8px;border-radius:var(--radius);letter-spacing:.1em;
}

/* loading + error states */
.doc .state{
  font-family:var(--font-mono);font-size:13px;letter-spacing:.08em;
  color:var(--ink-soft);padding:40px 0;
}
.doc .state.err{color:var(--alert)}

/* ---------- rendered markdown ---------- */
.doc h1{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(28px,4.6vw,40px);line-height:1.12;
  letter-spacing:.015em;margin:0 0 6px;color:var(--ink);
}
.doc .lede,.doc>p:first-of-type{font-size:17.5px;color:var(--ink-soft)}
.doc h2{
  font-family:var(--font-mono);font-weight:600;
  font-size:15px;letter-spacing:.16em;text-transform:uppercase;color:var(--olive-deep);
  margin:42px 0 14px;padding-top:16px;border-top:2px solid var(--ink);
}
.doc h3{font-size:16.5px;font-weight:700;margin:26px 0 8px;color:var(--ink)}
.doc p{margin:0 0 14px}
.doc ul,.doc ol{margin:0 0 16px 22px}
.doc li{margin-bottom:7px}
.doc li::marker{color:var(--olive-deep);font-weight:700}
.doc a{color:var(--intel);text-decoration-thickness:1.5px;text-underline-offset:2px}
.doc a:hover{color:var(--olive-deep)}
.doc strong{font-weight:700}
.doc hr{border:none;border-top:1px dashed var(--line);margin:28px 0}
.doc blockquote{
  border-left:4px solid var(--olive);background:rgba(77,92,46,.09);
  padding:12px 16px;margin:0 0 16px;font-size:15px;
}
.doc blockquote p:last-child{margin-bottom:0}
.doc code{
  font-family:var(--font-mono);font-size:.88em;
  background:var(--paper-lo);border:1px solid var(--line);
  border-radius:var(--radius);padding:1px 5px;
}
.doc table{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:14.5px}
.doc th{
  font-family:var(--font-mono);font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  text-align:left;color:var(--paper-hi);background:var(--ink);padding:8px 10px;
}
.doc td{padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.doc tr:nth-child(even) td{background:rgba(168,165,141,.14)}

/* callouts (blockquotes that open with a bold LABEL —) */
.doc blockquote.warn{border-left-color:var(--alert);background:rgba(142,58,43,.09)}
.doc blockquote.intel{border-left-color:var(--intel);background:rgba(56,83,107,.09)}
.doc blockquote .co-label{
  display:inline-block;font-family:var(--font-mono);font-size:10.5px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;margin-bottom:4px;
}
.doc blockquote.warn .co-label{color:var(--alert)}
.doc blockquote.intel .co-label{color:var(--intel)}
.doc blockquote:not(.warn):not(.intel) .co-label{color:var(--olive-deep)}

/* ---------- prev / next pager ---------- */
.pager{max-width:var(--content-w);margin:26px auto 0;display:flex;gap:14px}
.pager a{
  flex:1;display:block;text-decoration:none;
  border:2px solid var(--ink);background:var(--paper-hi);
  padding:12px 16px;color:var(--ink);
  box-shadow:4px 4px 0 rgba(35,38,25,.18);
}
.pager a:hover{background:var(--olive);color:var(--paper-hi)}
.pager a:hover small{color:inherit}
.pager a.next{text-align:right}
.pager small{
  display:block;font-family:var(--font-mono);font-size:10px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:2px;
}
.pager .t{font-weight:700;font-size:15px}

/* ---------- search results ---------- */
.results-note{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:18px;
}
.result{
  border:1.5px solid var(--ink);background:var(--paper-hi);
  padding:14px 16px;margin-bottom:12px;cursor:pointer;
  width:100%;text-align:left;font-family:inherit;font-size:inherit;color:inherit;display:block;
}
.result:hover{background:rgba(77,92,46,.1)}
.result h4{display:flex;gap:10px;align-items:center;font-size:15.5px;margin-bottom:4px}
.result .grid-ref{
  font-family:var(--font-mono);font-size:10.5px;font-weight:600;
  border:1.5px solid var(--ink);border-radius:var(--radius);padding:1px 5px;background:var(--paper-lo);
}
.result p{font-size:13.5px;color:var(--ink-soft)}
.result mark{background:var(--sand);color:var(--ink);padding:0 2px}

/* ---------- mobile ---------- */
.scrim{display:none}
@media (max-width:920px){
  .topbar .burger{display:block}
  nav.sidebar{
    position:fixed;left:0;top:58px;bottom:0;z-index:55;
    transform:translateX(-102%);transition:transform .22s ease;
    width:min(320px,86vw);height:auto;
    box-shadow:8px 0 24px rgba(0,0,0,.25);
  }
  nav.sidebar.open{transform:translateX(0)}
  .scrim.show{display:block;position:fixed;inset:58px 0 0 0;z-index:50;background:rgba(35,38,25,.45)}
  main{padding:26px 14px 90px}
  .sheet{box-shadow:4px 4px 0 rgba(35,38,25,.22)}
  .topbar .version{display:none}
}