/* Cabinet left menu (common/page_service_list.html, mode logic in
 * app/views/nav_views.py). One rhythm for every row; the active page is a
 * tinted pill in the brand green; groups are split by a hairline, not a rule. */
.cnav { font-size: .9375rem; }
.cnav ul { list-style: none; margin: 0; padding: 0; }
.cnav .cnav-link {
  display: flex; align-items: center; gap: .625rem;
  padding: .5rem .75rem; margin-bottom: 2px; border-radius: .5rem;
  color: var(--al-800, #37474F); text-decoration: none; line-height: 1.25;
}
.cnav .cnav-link svg { width: 20px; height: 20px; flex: none; color: var(--al-600, #546E7A); }
.cnav .cnav-link:hover { background: var(--al-50, #ECEFF1); color: var(--al-900, #263238); }
.cnav .cnav-link:focus-visible { outline: 2px solid var(--al-info, #1565C0); outline-offset: 1px; }
.cnav .cnav-link.active { background: rgba(46, 125, 50, .1); color: var(--al-green-800, #2E7D32); font-weight: 600; }
.cnav .cnav-link.active svg { color: var(--al-green-800, #2E7D32); }
.cnav .cnav-label {
  padding: .75rem .75rem .25rem; font-size: .6875rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--al-500, #78909C);
}
.cnav .cnav-label:first-child { padding-top: 0; }
.cnav .cnav-sep { height: 1px; margin: .625rem .75rem; background: var(--al-100, #CFD8DC); }
.cnav .cnav-switch {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  margin: 1.25rem .25rem 0; padding: .5rem .75rem;
  border: 1px solid var(--al-100, #CFD8DC); border-radius: .5rem;
  font-size: .8125rem; color: var(--al-700, #455A64); text-decoration: none; line-height: 1.3;
}
.cnav .cnav-switch small { display: block; font-size: .6875rem; color: var(--al-500, #78909C); }
.cnav .cnav-switch:hover { border-color: var(--al-green-800, #2E7D32); color: var(--al-green-800, #2E7D32); }
.cnav .cnav-switch span[aria-hidden] { font-size: 1rem; }

/* Mobile drawer (layout.html #cabinetDrawer): the section menu first, then
 * reference links in two quiet columns, language + sign out in one row. */
.cnav-drawer { --bs-offcanvas-width: min(320px, 86vw); --bs-offcanvas-border-color: var(--al-100, #CFD8DC); }
.cnav-drawer .cnav-sep { margin-left: 0; margin-right: 0; }
.cnav-drawer .cnav-switch { margin-left: 0; margin-right: 0; }
.cnav .cnav-refs { display: grid; grid-template-columns: 1fr 1fr; gap: .375rem 1rem; padding: .25rem .75rem; font-size: .8125rem; }
.cnav .cnav-refs a { color: var(--al-700, #455A64); text-decoration: none; }
.cnav .cnav-refs a:hover { color: var(--al-green-800, #2E7D32); }
.cnav .cnav-foot { display: flex; align-items: center; justify-content: space-between; padding: .25rem .75rem; font-size: .8125rem; }
.cnav .cnav-foot > a { color: var(--al-700, #455A64); }
.cnav .cnav-langs { display: flex; gap: .25rem; }
.cnav .cnav-langs a { padding: .125rem .5rem; border-radius: .375rem; color: var(--al-600, #546E7A); text-decoration: none; text-transform: uppercase; font-size: .75rem; }
.cnav .cnav-langs a.active { background: var(--al-50, #ECEFF1); color: var(--al-900, #263238); font-weight: 600; }

/* Domain menu: on a domain page its sections open under "My domains", with a
 * switcher that keeps the section (nav_views.domain_context). */
.cnav .cnav-domain { margin: .25rem 0 .5rem .5rem; padding-left: .5rem; border-left: 2px solid var(--al-100, #CFD8DC); }
.cnav .cnav-domain-select { margin: 0 0 .25rem .25rem; width: calc(100% - .25rem); font-weight: 600; }
.cnav .cnav-sub .cnav-link { padding: .375rem .75rem; font-size: .875rem; justify-content: space-between; }
.cnav .cnav-link.is-muted { color: var(--al-500, #78909C); }
.cnav .cnav-note { font-size: .6875rem; color: var(--al-500, #78909C); white-space: nowrap; }
.cnav .cnav-note.is-on { color: var(--al-green-800, #2E7D32); font-weight: 600; }