/* ---------- sidebar ---------- */
aside {
  border-right: 1px solid var(--border);
  background: var(--panel);
  display: flex;
  flex-direction: column;
  /* `align-self: start` matters: a grid item defaults to stretching to the
     full row height, which leaves sticky nothing to slide against. Pinning
     it to the top and capping it at the viewport is what makes the nav
     follow you down a long page. */
  align-self: start;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  scrollbar-width: thin;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 14px;
  border-bottom: 1px solid var(--border);
  min-height: 57px;
}
.brand .mark {
  width: 26px; height: 26px; flex: none;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--accent), var(--purple));
  display: grid; place-items: center;
  font-size: 12px; font-weight: 700; color: #0d1117;
}
.brand .name { font-weight: 600; white-space: nowrap; }
body.collapsed .brand .name,
body.collapsed .brand .mark { display: none; }
body.collapsed .brand { justify-content: center; }

.icon-btn {
  margin-left: auto;
  display: grid; place-items: center;
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--muted);
  padding: 5px;
  cursor: pointer;
}
.icon-btn:hover { background: var(--panel-2); color: var(--text); border-color: var(--border); }
.icon-btn svg { width: 16px; height: 16px; display: block; }
body.collapsed .icon-btn { margin-left: 0; }
body.collapsed .icon-btn svg { transform: rotate(180deg); }

.pages { padding: 10px 8px; display: flex; flex-direction: column; gap: 2px; }
.pages button {
  display: flex; align-items: center; gap: 11px;
  width: 100%;
  background: none; border: none; border-radius: 7px;
  color: var(--muted);
  padding: 9px 10px;
  font: inherit; text-align: left;
  cursor: pointer;
  white-space: nowrap;
}
.pages button:hover { background: var(--panel-2); color: var(--text); }
.pages button[aria-current="true"] {
  background: var(--panel-2);
  color: var(--text);
  box-shadow: inset 2px 0 0 var(--accent);
}
.pages svg { flex: none; width: 17px; height: 17px; opacity: .85; }
body.collapsed .pages button { justify-content: center; padding: 9px 0; }
body.collapsed .pages .plabel { display: none; }

.side-foot { margin-top: auto; padding: 10px 8px; border-top: 1px solid var(--border); }
.side-foot button, .side-foot a {
  display: flex; align-items: center; gap: 11px;
  width: 100%;
  background: none; border: none; border-radius: 7px;
  color: var(--muted); padding: 9px 10px;
  font: inherit; cursor: pointer; text-decoration: none;
  white-space: nowrap;
}
.side-foot button:hover, .side-foot a:hover { background: var(--panel-2); color: var(--text); }
.side-foot svg { flex: none; width: 17px; height: 17px; }
body.collapsed .side-foot button, body.collapsed .side-foot a { justify-content: center; padding: 9px 0; }
body.collapsed .side-foot span { display: none; }