/* --- Sidebar -------------------------------------------------------------- */

.sidebar {
  position: sticky;
  top: var(--shell);
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--shell) * 2);
  padding: 14px 10px 12px;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  box-shadow: var(--glass-shadow);
}

/* --- brand ---------------------------------------------------------------- */

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 6px 16px;
  min-width: 0;
}

/* The mark lives on the top bar now, beside the name of the board rather than
   beside the name of the software. Nothing is left here to show once the
   sidebar is narrow enough to hide the words, so the block goes with them. */
.app.collapsed .brand { display: none; }

.brand-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  white-space: nowrap;
}

.brand-name {
  font-size: 13.5px;
  font-weight: 650;
  letter-spacing: -.01em;
  color: var(--ink);
  line-height: 1.2;
}

.brand-sub {
  font-size: 10.5px;
  color: var(--faint);
  line-height: 1.3;
}

/* --- navigation ----------------------------------------------------------- */

.nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.nav-item,
.side-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 9px;
  border-radius: var(--r-md);
  color: var(--ink-2);
  cursor: pointer;
  white-space: nowrap;
  text-align: left;
  transition: background .16s ease, color .16s ease;
}

.nav-item .ico,
.side-btn .ico {
  display: grid;
  place-content: center;
  width: 20px;
  flex: none;
  color: var(--muted);
}

.nav-item .lbl { font-size: 13px; font-weight: 500; }
.side-btn .lbl { font-size: 12px; }

.nav-item:hover,
.side-btn:hover { background: var(--hover); color: var(--ink); }

.nav-item:hover .ico,
.side-btn:hover .ico { color: var(--ink-2); }

/* The selected item is a raised lozenge — lit from above like the cards, so
   "current" reads as a physical state rather than a highlight color. */
.nav-item.on {
  background: var(--fill);
  color: var(--ink);
  font-weight: 600;
  box-shadow:
    0 1px 2px rgba(20, 30, 45, .10),
    inset 0 1px 0 var(--glass-hi);
}

.nav-item.on .ico { color: var(--accent); }
.nav-item.on .lbl { font-weight: 600; }

/* --- the project list ----------------------------------------------------- */

/* Not a link to a page that lists the projects — the projects themselves. A
   list this short is cheaper to show than to navigate to, and the page it used
   to lead to had a tab bar across the top that was a second copy of this. */

.side-projects {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--hair);
}

.sp-head {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: none;
  padding: 0 7px 6px 9px;
}

.sp-title {
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
  white-space: nowrap;
}

.sp-add { width: 22px; height: 22px; }

.sp-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: 4px;
}

.sp-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  padding: 6px 9px;
  border-radius: var(--r-md);
  color: var(--ink-2);
  cursor: pointer;
  text-align: left;
  transition: background .16s ease, color .16s ease;
}

/* The full icon column, holding a much smaller dot: the projects line up with
   the sections above them rather than sitting in their own indent. */
.sp-dot {
  display: grid;
  place-content: center;
  width: 20px;
  flex: none;
}

.sp-dot::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tint);
  opacity: .55;
}

.sp-name {
  font-size: 12.5px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sp-n {
  margin-left: auto;
  flex: none;
  font-size: 10.5px;
  color: var(--faint);
}

.sp-item:hover { background: var(--hover); color: var(--ink); }
.sp-item:hover .sp-dot::before { opacity: 1; }

.sp-item.on {
  color: var(--ink);
  font-weight: 600;
  background: var(--fill);
  box-shadow:
    0 1px 2px rgba(20, 30, 45, .10),
    inset 0 1px 0 var(--glass-hi);
}

.sp-item.on .sp-dot::before { opacity: 1; }
.sp-item.on .sp-n { color: var(--tint); }

/* ── One weight for every name ──────────────────────────────────────────────
   Nothing below may set `color` or `font-weight` on .sp-name. Three rules used
   to: `.on` through inheritance, `.has-new` to --ink, `.is-paused` to --faint.
   Each was defensible alone, and together they made the list a brightness ramp
   — the project with unread findings happened to be first and the paused one
   happened to be last, so the names ran ink → ink-2 → ink-2 → faint down the
   rail and read as a gradient nobody wrote.
   State belongs on the dot, which is beside the name and can carry three
   states without any of them being "harder to read". Only `.on` still speaks
   through the row, because that is about where you are and not about the
   project. */

/* Paused is not finished. It stays in the list and goes quiet — on the dot. */
.sp-item.is-paused .sp-dot::before { opacity: .28; }

/* Something arrived that has not been looked at. The dot is already there and
   already means "this project", so it fills in and takes a ring rather than
   picking up a second marker — and being the dot is what makes it survive the
   rail collapsing to icons, which is exactly when you would miss a badge. */
.sp-item.has-new .sp-dot::before {
  opacity: 1;
  box-shadow: 0 0 0 3px var(--tint-bg), 0 0 0 4px var(--tint);
}

.sp-none {
  padding: 3px 12px 8px;
  font-size: 11.5px;
  color: var(--faint);
}

/* --- the archive ---------------------------------------------------------- */

/* Finished projects, folded away under the live ones. The block is removed
   rather than emptied when there is nothing in it — an archive that is always
   there and always empty is a control that only ever disappoints. */
.sp-arch {
  display: flex;
  flex-direction: column;
  flex: none;
  min-height: 0;
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--hair);
}

.sp-arch[hidden] { display: none; }

.sp-arch-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 6px 9px;
  border-radius: var(--r-md);
  color: var(--muted);
  cursor: pointer;
  text-align: left;
  transition: background .16s ease, color .16s ease;
}

.sp-arch-bar:hover { background: var(--hover); color: var(--ink-2); }

/* The same 20px column the icons and the dots use, so the chevron lines up
   under them rather than starting its own indent. */
.sp-arch-bar .ico {
  display: grid;
  place-content: center;
  width: 20px;
  flex: none;
  color: var(--faint);
}

.sp-arch-bar .lbl {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.sp-arch-bar .tally { margin-left: auto; }

/* Capped: the archive only grows, and it may not push the live projects off
   the top of the rail however many years accumulate in it. */
#archList {
  max-height: 34vh;
  padding-bottom: 2px;
}

#archList[hidden] { display: none; }

/* Put away, so the dot goes quiet — the same move as paused, further. The name
   stays at full strength: nothing in this list is harder to read than anything
   else in it. */
#archList .sp-dot::before { opacity: .3; }

/* --- foot ----------------------------------------------------------------- */

.side-foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 10px;
  border-top: 1px solid var(--hair);
}

/* About is a section, so it is a .nav-item and lights up like one — but it is
   down here with the settings, and takes their type size. */
.side-foot .nav-item .lbl { font-size: 12px; font-weight: 500; }
.side-foot .nav-item.on .lbl { font-weight: 600; }

/* --- collapsed ------------------------------------------------------------ */
/* Labels are removed rather than faded: a half-visible word next to an icon
   reads as a rendering bug. The tooltip carries the name instead. */

.app.collapsed .sidebar { padding-left: 8px; padding-right: 8px; }
.app.collapsed .nav-item,
.app.collapsed .side-btn,
.app.collapsed .sp-item,
.app.collapsed .sp-head { justify-content: center; padding-left: 0; padding-right: 0; }
.app.collapsed .nav-item .lbl,
.app.collapsed .side-btn .lbl { display: none; }

/* The dots stay — they are the only thing left that says which project is
   open. Everything that was a word goes, including the count, which without a
   name beside it is a number about nothing. */
.app.collapsed .sp-title,
.app.collapsed .sp-head .tally,
.app.collapsed .sp-name,
.app.collapsed .sp-n,
.app.collapsed .sp-arch-bar .lbl,
.app.collapsed .sp-arch-bar .tally,
.app.collapsed .sp-none { display: none; }

.app.collapsed .sp-arch-bar { justify-content: center; padding-left: 0; padding-right: 0; }