/* ============================================================
   Spruce Grove — App-shell sidebar (shared)
   Replaces the old top-nav. Collapsible, responsive, WCAG 2.2 AAA.
   Plain CSS + progressive JS; no build step.
   ============================================================ */

:root {
  --sb-w: 264px;            /* sidebar width, expanded */
  --sb-w-rail: 0px;         /* rail mode: sidebar fully hides (off-canvas) */
  --sb-bg: #0E130F;
  --sb-bg-2: #121813;
  --sb-line: rgba(238,235,229,.10);
  --sb-line-2: rgba(238,235,229,.18);
  --sb-text: #EEEBE2;
  --sb-text-soft: #A5A699;
  --sb-peri: #E4AA71;       /* cedar — AAA on dark */
  --sb-cyan: #F2A26A;
  --sb-radius: 12px;
  --sb-trans: transform .28s cubic-bezier(.22,1,.36,1), background-color .18s ease;
  --sb-focus: #E4AA71;      /* cedar focus ring (AAA on dark) */
}

.sb-shell { display: grid; min-height: 100vh; }
@media (min-width: 981px) {
  .sb-shell { grid-template-columns: var(--sb-w) minmax(0, 1fr); }
  body.sb-collapsed .sb-shell { grid-template-columns: var(--sb-w-rail) minmax(0, 1fr); }
}
@media (max-width: 980px) {
  .sb-shell { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- backdrop (mobile only) ---------- */
.sb-backdrop {
  position: fixed; inset: 0; background: rgba(6,10,8,.62);
  backdrop-filter: blur(3px); z-index: 380; opacity: 0; visibility: hidden;
  transition: opacity .24s ease, visibility .24s ease;
}
@media (min-width: 981px) { .sb-backdrop { display: none; } }
@media (max-width: 980px) {
  body.sb-open .sb-backdrop { opacity: 1; visibility: visible; }
}

/* ---------- the sidebar ---------- */
.sb {
  position: sticky; top: 0; height: 100vh; z-index: 400;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--sb-bg), var(--sb-bg-2));
  border-right: 1px solid var(--sb-line);
  color: var(--sb-text);
  overflow: hidden;
}
@media (max-width: 980px) {
  .sb {
    position: fixed; left: 0; top: 0; bottom: 0; height: 100vh;
    width: min(var(--sb-w), 84vw); transform: translateX(-102%);
    transition: var(--sb-trans); border-right: 1px solid var(--sb-line-2);
    box-shadow: 24px 0 60px -30px rgba(0,0,0,.8);
  }
  body.sb-open .sb { transform: translateX(0); }
}
@media (min-width: 981px) {
  body.sb-collapsed .sb { transform: translateX(-100%); transition: var(--sb-trans); }
}

.sb-head {
  display: flex; align-items: center; gap: 10px;
  padding: 18px 18px 14px; border-bottom: 1px solid var(--sb-line);
}
.sb-head .brand {
  display: flex; align-items: center; gap: 11px; color: var(--sb-text);
  font-weight: 700; font-size: 15px; letter-spacing: -0.01em; text-decoration: none;
  min-width: 0; flex: 1;
}
.sb-head .brand img, .sb-head .brand svg { width: 30px; height: 30px; flex: 0 0 auto; object-fit: contain; }
.sb-head .brand .t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* collapse/close toggles */
.sb-toggle {
  flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center;
  background: var(--sb-bg-2); color: var(--sb-text-soft);
  border: 1px solid var(--sb-line); border-radius: 9px; cursor: pointer;
  font-size: 16px; line-height: 1;
}
.sb-toggle:hover { color: var(--sb-text); border-color: var(--sb-line-2); }

/* nav list */
.sb-nav { flex: 1 1 auto; overflow-y: auto; padding: 14px 12px; }
.sb-nav::-webkit-scrollbar { width: 9px; }
.sb-nav::-webkit-scrollbar-thumb { background: var(--sb-line-2); border-radius: 99px; }

.sb-sec {
  margin: 18px 10px 8px; font-family: var(--mono, "JetBrains Mono", monospace);
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--sb-text-soft);
}
.sb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.sb-link {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: var(--sb-radius);
  color: var(--sb-text-soft); text-decoration: none; font-size: 14px; font-weight: 500;
  border: 1px solid transparent; transition: background-color .15s ease, color .15s ease;
}
.sb-link .ic { width: 20px; height: 20px; flex: 0 0 auto; display: grid; place-items: center; color: var(--sb-peri); }
.sb-link .ic svg { width: 19px; height: 19px; }
.sb-link .lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-link:hover { background: var(--sb-bg-2); color: var(--sb-text); }
.sb-link:hover .ic { color: var(--sb-cyan); }
.sb-link.active {
  background: rgba(228,170,113,.10); color: var(--sb-text);
  border-color: rgba(228,170,113,.28);
}
.sb-link.active .ic { color: var(--sb-peri); }

.sb-foot {
  padding: 14px; border-top: 1px solid var(--sb-line);
  display: flex; align-items: center; gap: 10px;
}
.sb-foot .meta { font-family: var(--mono, monospace); font-size: 10.5px; color: var(--sb-text-soft); line-height: 1.4; min-width: 0; }
.sb-foot .gh {
  margin-left: auto; display: flex; align-items: center; gap: 7px;
  color: var(--sb-text-soft); text-decoration: none; font-size: 12px;
  font-family: var(--mono, monospace);
}
.sb-foot .gh:hover { color: var(--sb-text); }

/* ---------- topbar (mobile only) ---------- */
.sb-topbar {
  position: sticky; top: 0; z-index: 370;
  display: none; align-items: center; gap: 12px;
  padding: 12px 16px; background: rgba(10,15,11,.9);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--sb-line);
}
@media (max-width: 980px) { .sb-topbar { display: flex; } }
.sb-topbar .brand { display: flex; align-items: center; gap: 10px; color: var(--sb-text); font-weight: 700; font-size: 15px; text-decoration: none; }
.sb-topbar .brand img, .sb-topbar .brand svg { width: 26px; height: 26px; object-fit: contain; }
.sb-topbar .spacer { margin-left: auto; }

/* hamburger (mobile open) — mirrors .sb-toggle */
.sb-burger {
  width: 38px; height: 38px; display: grid; place-items: center;
  background: var(--sb-bg-2); color: var(--sb-text-soft);
  border: 1px solid var(--sb-line); border-radius: 10px; cursor: pointer;
}
.sb-burger:hover { color: var(--sb-text); border-color: var(--sb-line-2); }

/* ---------- content column ---------- */
.sb-main { min-width: 0; display: flex; flex-direction: column; }
.sb-main > * { min-width: 0; }

/* ---------- skip link ---------- */
.sb-skip {
  position: absolute; left: -999px; top: 0; z-index: 700;
  background: var(--BB-peri, #E4AA71); color: #0E130F; font-weight: 700;
  padding: 10px 16px; border-radius: 0 0 10px 0; text-decoration: none;
}
.sb-skip:focus { left: 0; outline: 3px solid var(--sb-focus); }

/* show the close (X) toggle only on mobile; collapse only on desktop */
@media (max-width: 980px) {
  .sb-toggle[data-sb-collapse] { display: none; }
}
@media (min-width: 981px) {
  .sb-toggle.sb-close { display: none; }
  .sb-topbar { display: none !important; }
}

/* ---------- a11y: focus ring + reduced motion ---------- */
.sb a:focus-visible, .sb button:focus-visible,
.sb-topbar a:focus-visible, .sb-topbar button:focus-visible,
.sb-burger:focus-visible, .sb-toggle:focus-visible {
  outline: 2px solid var(--sb-focus); outline-offset: 2px; border-radius: 8px;
}
@media (prefers-reduced-motion: reduce) {
  .sb, .sb-backdrop, .sb-link, .sb-toggle, .sb-burger { transition: none !important; }
}

/* hide the now-legacy top .nav bars when the shell is active */
.sb-legacy-topnav { display: none !important; }