/* --- Sidebar --- */
.folder-sidebar {
  position: sticky;
  top: var(--toddyi-size-1rem);
  display: flex;
  flex-direction: column;
  gap: var(--toddyi-size-0-15rem);
  padding: var(--toddyi-size-1rem) var(--toddyi-size-0-75rem);
  border-radius: var(--toddyi-size-16px);
  background: var(--pico-card-background-color);
  box-shadow: var(--toddyi-card-shadow);
}
.folder-sidebar__brand { display: flex; align-items: center; gap: var(--toddyi-size-0-5rem); font-size: var(--toddyi-size-1-15rem); font-weight: 700; padding: 0 var(--toddyi-size-0-4rem) var(--toddyi-size-0-25rem); }
.folder-sidebar__search {
  margin: 0 0 var(--toddyi-size-0-75rem);
  border-radius: var(--toddyi-size-2rem);
  background: color-mix(in srgb, var(--pico-primary) 6%, transparent);
  border: var(--toddyi-size-1px) solid var(--pico-muted-border-color);
  font-size: var(--toddyi-size-0-9rem);
}
.folder-nav__empty { list-style: none; padding: var(--toddyi-size-0-4rem) var(--toddyi-size-0-6rem); color: var(--pico-muted-color); font-size: var(--toddyi-size-0-85rem); }
.folder-sidebar__heading {
  display: flex; justify-content: space-between; align-items: center;
  margin: var(--toddyi-size-1rem) 0 var(--toddyi-size-0-4rem); padding: 0 var(--toddyi-size-0-4rem);
  font-size: var(--toddyi-size-0-7rem); font-weight: 700; letter-spacing: var(--toddyi-size-0-08em);
  text-transform: uppercase; color: var(--pico-muted-color);
}
.folder-sidebar__add {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--toddyi-size-1-4rem); height: var(--toddyi-size-1-4rem);
  border-radius: var(--toddyi-size-50pct); border: var(--toddyi-size-1px) solid var(--pico-muted-border-color);
  background: transparent; color: var(--pico-muted-color); font-weight: 700; text-decoration: none; line-height: 1;
}
.folder-sidebar__add:hover { background: color-mix(in srgb, var(--pico-primary) 12%, transparent); color: var(--pico-primary); }
.folder-nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--toddyi-size-0-1rem); }
.folder-nav-list li { display: flex; margin: 0; }
.folder-nav {
  flex: 1 1 auto;
  display: flex; justify-content: space-between; align-items: center; gap: var(--toddyi-size-0-5rem);
  padding: var(--toddyi-size-0-4rem) var(--toddyi-size-0-6rem);
  border-radius: var(--toddyi-size-0-6rem);
  /* Inherit the sidebar's neutral text — Pico redefines --pico-color to the
     brand primary inside <a>, which turned folder names link-brown. (#99) */
  color: inherit; text-decoration: none; font-size: var(--toddyi-size-0-92rem); line-height: 1.3;
  transition: background 0.15s ease;
}
.folder-nav:hover { background: color-mix(in srgb, var(--pico-primary) 8%, transparent); }
.folder-nav.is-active { background: color-mix(in srgb, var(--pico-primary) 16%, transparent); font-weight: 600; }
.folder-nav--archived { margin-top: var(--toddyi-size-0-75rem); padding-top: var(--toddyi-size-0-85rem); border-top: var(--toddyi-size-1px) solid var(--pico-muted-border-color); }
.folder-nav--list { color: var(--pico-muted-color); font-size: var(--toddyi-size-0-88rem); }
.folder-nav__label { display: inline-flex; align-items: center; gap: var(--toddyi-size-0-5rem); overflow: hidden; }
.folder-nav__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Folder glyphs read as the warm gold line-folder from the wireframe. */
.folder-icon { color: var(--pico-primary); }
.folder-nav__count {
  flex-shrink: 0; min-width: var(--toddyi-size-1-6rem); text-align: center;
  font-size: var(--toddyi-size-0-75rem); font-weight: 700; padding: var(--toddyi-size-0-1rem) var(--toddyi-size-0-5rem);
  border-radius: var(--toddyi-size-1rem); background: color-mix(in srgb, var(--pico-primary) 10%, transparent); color: var(--pico-muted-color);
}