/* AppNavComponent (org/project scope sidebar; drawer on mobile). */
.app-nav-link {
  display: block;
  padding: var(--wa-space-2xs) var(--wa-space-xs);
  border-radius: var(--wa-border-radius-m);
  color: inherit;
  text-decoration: none;
}

.app-nav-link--active {
  background-color: var(--wa-color-neutral-fill-quiet);
  font-weight: var(--wa-font-weight-semibold);
}

.app-nav-header {
  padding-block-end: var(--wa-space-xs);
  margin-block-end: var(--wa-space-xs);
  border-block-end: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
}

.app-nav-up {
  color: var(--wa-color-text-quiet);
  text-decoration: none;
  font-size: var(--wa-font-size-s);
}

/* A destination the IA declares but the app doesn't have yet: it must read as
   a disabled control, not as a link the pointer or the keyboard can chase —
   it is a <span>, so there is nothing to disable but its appearance. */
.app-nav-link--disabled {
  color: var(--wa-color-text-quiet);
  cursor: default;
}

/* Collapsible group: a <wa-details appearance="plain">, which strips the
   panel's background and border, leaving the parts below to make the summary
   read as a heading over its run of links rather than as a card header.
   Overriding the two padding parts is what removes the component's --wa-space-m
   default in both places at once (it pads summary AND content with it), so the
   grouped links line up with the top-level ones. */
.app-nav-group::part(header) {
  padding: var(--wa-space-2xs) var(--wa-space-xs);
  gap: var(--wa-space-xs);
}

.app-nav-group::part(summary) {
  font-size: var(--wa-font-size-s);
  color: var(--wa-color-text-quiet);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.app-nav-group::part(content) {
  display: flex;
  flex-direction: column;
  gap: var(--wa-space-2xs);
  padding: 0;
}

/* wa-divider's own margin is symmetric and generous; the sidebar wants the
   separator to belong to the run below it. */
.app-nav-divider {
  --spacing: var(--wa-space-2xs);
}