/**
 * sidebar-rail.css — Typographic + spatial hierarchy for the bilateral chrome
 * left rail (Phase 1 v2). No icon rules: hierarchy is expressed through
 * indentation, weight, and spacing only. Applies to depth-1 children of the
 * 5 top-level siblings (Overview / Projects / Libraries / Lab tools / Admin)
 * and depth-2 when present.
 *
 * Caitlin direct: "intelligent indentation (probably no iconography) for the
 * children of the top 5. These should be mostly typographic and spatial IA
 * style choices below that top level."
 *
 * Decision: 2026-05-11-guide-shell-eureka-architecture Decision 2.
 */

/* ── Sub-item base (depth-1) ────────────────────────────────────────────── */

[data-nav-sub-item] {
  font-weight: var(--s-font-weight-regular);
  color: var(--s-color-fg-secondary, var(--s-color-fg-muted));
}

[data-nav-sub-item]:hover {
  color: var(--s-color-fg-primary);
}

[data-nav-sub-item].active {
  color: var(--brand-accent-dark);
  font-weight: var(--s-font-weight-medium);
}

/* Depth-1 items: first indent step — aligns with parent label (icon slot + gap). */

.tree-item.depth-1[data-nav-sub-item] {
  padding-left: var(--tree-align-to-label, calc(var(--s-space-3) + 16px + var(--s-space-4)));
  font-size: var(--s-font-size-1);
  letter-spacing: 0.01em;
  min-height: calc(var(--s-font-size-active) * 1.8);
}

/* Depth-2 items: second indent step — additional 16px step. */

.tree-item.depth-2[data-nav-sub-item] {
  padding-left: calc(
    var(--tree-align-to-label, calc(var(--s-space-3) + 16px + var(--s-space-4))) +
    var(--s-space-4)
  );
  font-size: var(--s-font-size-1);
  color: var(--s-color-fg-muted);
  min-height: calc(var(--s-font-size-active) * 1.6);
}

.tree-item.depth-2[data-nav-sub-item]:hover {
  color: var(--s-color-fg-primary);
}

.tree-item.depth-2[data-nav-sub-item].active {
  color: var(--brand-accent-dark);
}

/* ── Group breathing: generous space between top-level sections ─────────── */

.tree-item.depth-0 + .tree-children {
  margin-bottom: var(--s-space-2);
}

.tree-item.depth-0:not(:first-child) {
  margin-top: var(--s-space-1);
}

/* ── Explicitly suppress any icon rendering inside sub-items ────────────── */

[data-nav-sub-item] .tree-icon {
  display: none;
}

/* ── Bilateral chrome: data-bilateral-chrome shell verification ─────────── */
/* Carries no visual rules — attribute is tested by verification asserts only. */