.sidebar {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 8px;
  background: var(--background-primary);
  border-right: var(--border-width-hair) solid var(--foreground-secondary);
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  color: var(--foreground-primary);
  min-width: 220px;
  position: sticky;
  top: var(--sidebar-top, 0);
  align-self: start;
  max-height: calc(100vh - var(--sidebar-top, 0px));
  overflow-y: auto;
}
.sidebar__intro {
  padding: 0 12px 12px;
  border-bottom: var(--border-width-hair) solid var(--background-tertiary);
  margin-bottom: 12px;
}
.sidebar__intro-kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--foreground-secondary);
  margin: 0 0 4px;
}
.sidebar__intro-title {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--foreground-primary);
  margin: 0;
}
.sidebar__hint {
  padding: 12px 16px;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--foreground-secondary);
  line-height: 1.5;
}
.sidebar__section {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 0;
}
.sidebar__section + .sidebar__section {
  border-top: var(--border-width-hair) dashed var(--background-tertiary);
}
.sidebar__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--foreground-secondary);
  padding: 4px 10px;
}
.sidebar__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  color: var(--foreground-secondary);
  background: transparent;
  border: none;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 120ms,
    color 120ms;
}
.sidebar__item:hover {
  background: var(--background-secondary);
  color: var(--foreground-primary);
}
.sidebar__item {
  border-left: 3px solid transparent;
}
.sidebar__item[data-active='true'] {
  color: var(--foreground-primary);
  background: var(--background-secondary);
  border-left-color: var(--cta-background);
  font-weight: var(--fw-bold);
}
.sidebar__item:focus-visible {
  outline: var(--border-width-hair) solid var(--foreground-primary);
  outline-offset: -2px;
}
.sidebar__icon {
  display: inline-flex;
  align-items: center;
  width: 1em;
  height: 1em;
}
.sidebar__label {
  flex: 1 1 auto;
}

.sidebar__section--collapsible {
  padding: 0;
}
.sidebar__section--collapsible > .sidebar__section__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 10px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.sidebar__section--collapsible
  > .sidebar__section__summary::-webkit-details-marker {
  display: none;
}
.sidebar__section--collapsible
  > .sidebar__section__summary
  > .sidebar__eyebrow {
  padding: 0;
}
.sidebar__section__caret {
  display: inline-block;
  font-size: var(--fs-sm);
  color: var(--foreground-secondary);
  transition: transform 160ms ease;
}
.sidebar__section--collapsible[open]
  > .sidebar__section__summary
  > .sidebar__section__caret {
  transform: rotate(90deg);
}