/* Kupkop sidebar, compact. Loads after every other sheet (see includes/header.php).
   - Rows are shorter: 40px on a touch screen, 34px with a mouse.
   - An admin gets two folds, Site and Admin (details elements in includes/header.php). The one that holds the current
     page starts open. While Admin is shut, its head shows how many items wait for review.
   - The mission card is one line of text and a bar.
   - The links scroll. The theme button and Log out stay at the bottom, side by side.
   Colours come from the shared tokens, so light and dark mode both work. No gradients, no blur. */

.sidebar { gap: .5rem; padding: .625rem; overflow: hidden; }
.sb-search { margin: 0; }

/* ---------- Links ---------- */
.sb-nav {
  flex: 1 1 auto; min-height: 0; gap: .125rem; padding: 0 0 .25rem; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--edge-strong) transparent;
}
.sb-link { gap: .65rem; min-height: 2.5rem; padding: .35rem .65rem; font-size: .875rem; line-height: 1.25; }
.sb-link svg { width: 1.0625rem; height: 1.0625rem; }
.sb-link .count, .sb-fold-count { min-width: 1.25rem; height: 1.25rem; padding: 0 .35rem; font-size: .6875rem; line-height: 1.25rem; }
@media (hover: hover) and (pointer: fine) {
  .sb-link, .sb-fold-head { min-height: 2.125rem; padding-block: .25rem; }
}
.sb-link:focus-visible, .sb-fold-head:focus-visible, .sb-theme:focus-visible { outline-offset: -2px; }

/* ---------- Folds: Site and Admin (admins only; a member has one flat list) ---------- */
.sb-fold { margin-top: .25rem; padding-top: .375rem; border-top: 1px solid var(--edge); }
.sb-nav > .sb-fold:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.sb-fold-head {
  display: flex; align-items: center; gap: .65rem; min-height: 2.5rem; padding: .35rem .65rem; list-style: none;
  border-radius: var(--r-btn, 10px); color: var(--ink); font-size: .875rem; font-weight: 600; line-height: 1.25; cursor: pointer;
}
.sb-fold-head::-webkit-details-marker { display: none; }
.sb-fold-head::marker { content: ""; }
.sb-fold-head:hover { background: var(--tint); }
.sb-fold-head > svg {
  flex: none; width: 1.0625rem; height: 1.0625rem; color: var(--ink-soft);
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.sb-fold-head > span:not(.count) { flex: 1; }
.sb-fold-head .sb-chev { width: 1rem; height: 1rem; transition: transform .2s; }
.sb-fold[open] .sb-chev { transform: rotate(180deg); }
.sb-fold[open] .sb-fold-count { display: none; }
.sb-fold-body { display: flex; flex-direction: column; gap: .125rem; padding-top: .125rem; }
@media (prefers-reduced-motion: reduce) { .sb-fold-head .sb-chev { transition: none; } }

/* ---------- Mission ---------- */
.sb-mission { margin-top: 0; padding: .6rem .75rem; border-radius: 10px; }
.sb-mission strong { gap: .4rem; font-size: .75rem; }
.sb-mission strong svg { width: .875rem; height: .875rem; }
.sb-mission p { display: none; }
.sb-bar { height: .375rem; margin-top: .5rem; }
.sb-mission small { margin-top: .375rem; font-size: .75rem; }
/* A short window keeps its room for the links. */
@media (max-height: 43.75rem) { .sb-mission { display: none; } }

/* ---------- Bottom row: theme button and Log out ---------- */
.sb-foot { display: flex; align-items: stretch; gap: .5rem; margin-top: 0; padding-top: .5rem; border-top: 1px solid var(--edge); }
.sb-foot .inline-form { flex: 1; min-width: 0; margin: 0; }
.sb-foot .btn { width: 100%; height: 2.5rem; min-height: 2.5rem; padding: 0 .75rem; }
.sb-foot > a.btn { flex: 1; width: auto; }
.sb-theme {
  position: relative; flex: none; justify-content: center; width: 2.5rem; height: 2.5rem; min-height: 2.5rem; padding: 0;
  border: 1px solid var(--edge-strong); border-radius: var(--r-btn, 10px);
}
/* The label stays for screen readers. The switch is gone: the icon shows the state. */
.sb-theme > span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }