/* ============================================================
   Sidebar nav: nested-tree treatment (v2 — bolder)
   ============================================================ */

/* SECTION HEADING (parent of a nested/collapsible group).
   Style it like a category chip so it's unambiguously not a list item:
   - UPPERCASE + letter-spacing
   - Tinted background
   - Bold weight + slightly smaller font
   - Vertical separation above
   - Rounded corners
   The `!important` clauses defeat Material's per-link defaults that would
   otherwise drown out the change. */
.md-nav--primary .md-nav__item--nested > .md-nav__link,
.md-nav--primary .md-nav__item--nested > label.md-nav__link {
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-size: 0.68rem !important;
  margin-top: 0.6rem;
  margin-bottom: 0.15rem;
  padding: 0.35rem 0.6rem !important;
  border-radius: 0.25rem;
  background-color: var(--md-default-fg-color--lightest);
  color: var(--md-default-fg-color) !important;
  opacity: 1 !important;
}

/* Light mode: section heading text uses the theme primary (indigo) so
   it reads as a brand-tinted category label, not as body text. */
[data-md-color-scheme="default"] .md-nav--primary .md-nav__item--nested > .md-nav__link,
[data-md-color-scheme="default"] .md-nav--primary .md-nav__item--nested > label.md-nav__link {
  color: var(--md-primary-fg-color) !important;
}

/* Dark mode (slate): brighter foreground + slightly stronger background tint
   to keep contrast against the dark slate canvas. */
[data-md-color-scheme="slate"] .md-nav--primary .md-nav__item--nested > .md-nav__link,
[data-md-color-scheme="slate"] .md-nav--primary .md-nav__item--nested > label.md-nav__link {
  color: var(--md-typeset-color) !important;
  background-color: var(--md-default-fg-color--lighter);
}

/* Hover: don't lose the chip background on hover. */
.md-nav--primary .md-nav__item--nested > .md-nav__link:hover,
.md-nav--primary .md-nav__item--nested > label.md-nav__link:hover {
  background-color: var(--md-default-fg-color--lighter) !important;
}
[data-md-color-scheme="slate"] .md-nav--primary .md-nav__item--nested > .md-nav__link:hover,
[data-md-color-scheme="slate"] .md-nav--primary .md-nav__item--nested > label.md-nav__link:hover {
  background-color: var(--md-default-fg-color--light) !important;
}

/* INDENT + TREE GUIDE LINE.
   Every nested .md-nav inside the primary sidebar gets a real left border
   and visible padding/margin, producing a clear "branches" silhouette. */
.md-nav--primary .md-nav .md-nav {
  border-left: 2px solid var(--md-default-fg-color--lighter) !important;
  margin-left: 0.75rem !important;
  padding-left: 0.5rem !important;
}

/* Dark mode: brighten the guide line so it doesn't vanish into the bg. */
[data-md-color-scheme="slate"] .md-nav--primary .md-nav .md-nav {
  border-left-color: var(--md-default-fg-color--light) !important;
}

/* LEAF LINKS under a nested group.
   Material's defaults would put leaves flush with the guide line — push
   them in so the indent reads visually. */
.md-nav--primary .md-nav .md-nav .md-nav__link {
  padding-left: 0.6rem !important;
}

/* Tight vertical rhythm between leaves. */
.md-nav--primary .md-nav .md-nav .md-nav__item {
  padding-top: 0.05rem;
  padding-bottom: 0.05rem;
}

/* ACTIVE LEAF: bold + accent color so the current page is easy to find
   in a deep, mostly-collapsed tree. */
.md-nav--primary .md-nav__link--active {
  font-weight: 700 !important;
  color: var(--md-accent-fg-color) !important;
}

/* Keep the expand/collapse chevron visible — Material sometimes fades it. */
.md-nav--primary .md-nav__icon {
  opacity: 1 !important;
}

/* ============================================================
   Phase tag chips: prominent, color-coded by phase.
   Targets the tag chips Material auto-renders at the top of every
   tagged page (under the H1) and on the /tags/ index page.
   ============================================================ */

/* Base chip styling — bigger, bolder, pill-shaped, with letter-spacing
   so the chip reads as a real category badge instead of a faint link. */
.md-tag {
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.68rem !important;
  padding: 0.25rem 0.7rem !important;
  border-radius: 1rem !important;
  border: 1px solid transparent;
  transition: filter 0.15s ease, transform 0.15s ease;
}

/* Launch chip — brand indigo (matches sidebar section-heading color). */
.md-tag[href*="#launch"] {
  background-color: rgba(83, 109, 254, 0.13) !important;
  color: var(--md-primary-fg-color) !important;
  border-color: rgba(83, 109, 254, 0.4) !important;
}

/* Current chip — green/success tint, distinct from Launch at a glance. */
.md-tag[href*="#current"] {
  background-color: rgba(0, 200, 83, 0.13) !important;
  color: rgb(0, 130, 60) !important;
  border-color: rgba(0, 200, 83, 0.45) !important;
}

/* Dark mode (slate): brighter, more saturated against dark canvas. */
[data-md-color-scheme="slate"] .md-tag[href*="#launch"] {
  background-color: rgba(120, 144, 255, 0.18) !important;
  color: rgb(170, 184, 252) !important;
  border-color: rgba(120, 144, 255, 0.55) !important;
}
[data-md-color-scheme="slate"] .md-tag[href*="#current"] {
  background-color: rgba(76, 217, 130, 0.18) !important;
  color: rgb(140, 235, 175) !important;
  border-color: rgba(76, 217, 130, 0.55) !important;
}

/* Hover: subtle elevation cue so it reads as interactive. */
.md-tag:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}