/* Right-sidebar TOC accent styling — matches Kloudfuse Docs design.
 *
 * sidebar-toggle.js sets --kf-row-color on every li[data-level] element,
 * propagating the parent h2's color down to all h3/h4 children in the group.
 *
 * Design spec:
 *   - 3px colored left border on every entry
 *   - 4% background tint (8% on hover / active)
 *   - colored dot (::before) in the row color
 *   - colored link text; dark (#171a21) on active
 *   - level-2 entries indented and smaller
 */

/* ── Heading ─────────────────────────────────────────────────────── */

aside.toc.sidebar .toc-menu > h3 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--kf-nav-muted, #8a90a0);
  margin: 0 0 10px;
  padding: 16px 12px 0;
}

/* ── List reset ──────────────────────────────────────────────────── */

aside.toc.sidebar .toc-menu ul {
  list-style: none;
  margin: 0;
  padding: 4px 8px 40px;
}

/* ── Every entry: pill row using --kf-row-color ─────────────────── */

aside.toc.sidebar .toc-menu ul > li {
  border-left: 3px solid var(--kf-row-color, transparent);
  border-radius: 0 7px 7px 0;
  background: color-mix(in srgb, var(--kf-row-color, transparent) 4%, transparent);
  margin-bottom: 2px;
}

aside.toc.sidebar .toc-menu ul > li > a {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: var(--kf-row-color, #3b414c);
  border-radius: 0 7px 7px 0;
  transition: background 0.1s ease;
}

aside.toc.sidebar .toc-menu ul > li > a:hover,
aside.toc.sidebar .toc-menu ul > li > a.is-active {
  background: color-mix(in srgb, var(--kf-row-color, #8a90a0) 8%, transparent);
  color: #171a21;
}

/* Colored dot */
aside.toc.sidebar .toc-menu ul > li > a::before {
  content: '';
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--kf-row-color, #8a90a0);
}

/* ── Level-1 (h2) sizing ─────────────────────────────────────────── */

aside.toc.sidebar .toc-menu ul > li[data-level="1"] > a {
  font-size: 13.5px;
  font-weight: 600;
  padding: 9px 10px;
}

aside.toc.sidebar .toc-menu ul > li[data-level="1"] > a::before {
  width: 7px;
  height: 7px;
}

/* ── Level-2 (h3) sizing ─────────────────────────────────────────── */

aside.toc.sidebar .toc-menu ul > li[data-level="2"] > a {
  font-size: 13px;
  font-weight: 500;
  padding: 6px 10px 6px 24px;
}

aside.toc.sidebar .toc-menu ul > li[data-level="2"] > a::before {
  width: 5px;
  height: 5px;
}

/* ── Level-3 (h4) sizing ─────────────────────────────────────────── */

aside.toc.sidebar .toc-menu ul > li[data-level="3"] > a {
  font-size: 12.5px;
  font-weight: 500;
  padding: 6px 10px 6px 38px;
}

aside.toc.sidebar .toc-menu ul > li[data-level="3"] > a::before {
  width: 5px;
  height: 5px;
}