/* Navigation primitives for Blazorponents. */
.bp-navbar {
  display: flex;
  align-items: var(--bp-nav-align, center);
  justify-content: var(--bp-nav-justify, space-between);
  flex-wrap: var(--bp-nav-wrap, nowrap);
  gap: var(--bp-nav-gap, 1rem);
  padding: var(--bp-nav-padding, 1rem 1.5rem);
  border-radius: var(--bp-nav-radius, 18px);
  border: 1px solid var(--bp-outline);
  background: var(--bp-nav-bg, var(--bp-surface));
  color: var(--bp-ink);
  box-shadow: var(--bp-shadow-1);
}

.bp-navbar-section {
  display: inline-flex;
  align-items: center;
  gap: var(--bp-nav-section-gap, 0.75rem);
}

.bp-navbar-toggle-section {
  display: inline-flex;
  align-items: center;
}

.bp-navbar-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.6rem;
  border-radius: var(--bp-radius-md);
  border: 1px solid var(--bp-outline);
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.bp-navbar-collapse {
  display: flex;
  align-items: center;
  gap: var(--bp-nav-section-gap, 0.75rem);
  flex-wrap: var(--bp-nav-wrap, nowrap);
}

.bp-navbar-collapse[hidden] {
  display: none;
}

.bp-navbar-items {
  display: flex;
  align-items: center;
  gap: var(--bp-nav-item-gap, 0.75rem);
  list-style: none;
  padding: 0;
  margin: 0;
}

.bp-navbar-item {
  display: inline-flex;
}

.bp-navbar-loading,
.bp-navbar-empty {
  color: var(--bp-muted);
  font-size: 0.9rem;
}

.bp-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: var(--bp-sidebar-nav-gap, 1rem);
  padding: var(--bp-sidebar-nav-padding, 0);
}

.bp-sidebar-nav-header,
.bp-sidebar-nav-footer {
  display: grid;
  gap: 0.35rem;
}

.bp-sidebar-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--bp-sidebar-nav-gap, 1rem);
}

.bp-sidebar-nav-item {
  display: block;
}

.bp-sidebar-nav-loading,
.bp-sidebar-nav-empty {
  color: var(--bp-muted);
  font-size: 0.9rem;
}

.bp-nav-section-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
  color: var(--bp-subtle);
}

.bp-nav-section-label-horizontal .bp-nav-section-label-body {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.bp-nav-section-label-main {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.bp-nav-section-label-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.bp-nav-section-label-body {
  display: grid;
  gap: 0.2rem;
}

.bp-nav-section-label-text {
  display: inline-flex;
  align-items: center;
}

.bp-nav-section-label-description {
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  color: var(--bp-muted);
}

.bp-menu,
.bp-menu-list {
  display: flex;
  flex-direction: column;
  gap: var(--bp-menu-gap, 0.35rem);
}

.bp-menu-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.bp-menu-horizontal {
  flex-direction: row;
  flex-wrap: wrap;
}

.bp-menu-item {
  display: inline-flex;
}

.bp-menu-loading,
.bp-menu-empty {
  color: var(--bp-muted);
  font-size: 0.9rem;
}

.bp-nav-group {
  display: grid;
  gap: var(--bp-nav-group-gap, 0.35rem);
}

.bp-nav-group-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  padding: var(--bp-nav-group-toggle-padding, 0.35rem 0.5rem);
  border-radius: var(--bp-nav-group-toggle-radius, 10px);
  border: 1px solid var(--bp-nav-group-toggle-border, transparent);
  background: var(--bp-nav-group-toggle-bg, transparent);
  color: var(--bp-nav-group-toggle-fg, var(--bp-ink));
  font-weight: 600;
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.bp-nav-group-toggle:hover:not(:disabled) {
  background: var(--bp-nav-group-toggle-bg-hover, var(--bp-surface-hover));
  border-color: var(--bp-nav-group-toggle-border-hover, var(--bp-outline-muted));
}

.bp-nav-group-toggle:focus-visible {
  outline: none;
  box-shadow: var(--bp-focus-ring);
}

.bp-nav-group-toggle:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.bp-nav-group-title {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.bp-nav-group-toggle-icon {
  display: inline-flex;
  align-items: center;
}

.bp-nav-group-caret {
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.2s ease;
  opacity: 0.7;
}

.bp-nav-group[data-expanded="true"] .bp-nav-group-caret {
  transform: rotate(45deg);
}

.bp-nav-group[data-active="true"] .bp-nav-group-toggle {
  background: var(--bp-nav-group-active-bg, var(--bp-accent-muted));
  color: var(--bp-nav-group-active-fg, var(--bp-accent-strong));
}

.bp-nav-group-content {
  display: grid;
  gap: var(--bp-nav-group-content-gap, 0.35rem);
  padding-left: var(--bp-nav-group-content-indent, 0.75rem);
}

.bp-nav-group-collapsed {
  color: var(--bp-muted);
}

.bp-nav-group-content[hidden] {
  display: none;
}

.bp-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: var(--bp-nav-link-padding, 0.5rem 0.8rem);
  border-radius: var(--bp-nav-link-radius, 12px);
  border: 1px solid transparent;
  background: transparent;
  color: var(--bp-ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.1;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.bp-nav-link-start,
.bp-nav-link-end {
  display: inline-flex;
  align-items: center;
}

.bp-nav-link:hover {
  background: var(--bp-surface-hover);
  color: var(--bp-accent);
  border-color: var(--bp-outline-muted);
}

.bp-nav-link-active {
  background: var(--bp-accent-muted);
  color: var(--bp-accent-strong);
  border-color: transparent;
}

.bp-nav-link-pressed {
  background: var(--bp-accent-muted);
  color: var(--bp-accent-strong);
  border-color: transparent;
}

.bp-nav-link-disabled {
  opacity: 0.6;
  pointer-events: none;
}

.bp-app-menu {
  display: grid;
  gap: var(--bp-app-menu-group-gap, 1rem);
}

.bp-app-menu-groups {
  display: grid;
  gap: var(--bp-app-menu-group-gap, 1rem);
}

.bp-app-menu-horizontal .bp-app-menu-groups {
  grid-auto-flow: column;
  grid-auto-columns: minmax(var(--bp-app-menu-min-column, 12rem), 1fr);
}

.bp-app-menu-group {
  display: grid;
  gap: 0.5rem;
}

.bp-app-menu-group-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--bp-subtle);
}

.bp-app-menu-group-items {
  display: grid;
  gap: var(--bp-app-menu-gap, 0.75rem);
  grid-template-columns: var(--bp-app-menu-columns, repeat(var(--bp-app-menu-column-count, auto-fit), minmax(var(--bp-app-menu-min-column, 12rem), 1fr)));
}

.bp-app-menu-loading,
.bp-app-menu-empty {
  color: var(--bp-muted);
  font-size: 0.9rem;
}

.bp-app-menu-item {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.6rem;
  padding: var(--bp-app-menu-item-padding, 0.6rem 0.8rem);
  border-radius: var(--bp-app-menu-item-radius, 14px);
  border: 1px solid var(--bp-outline-muted);
  background: var(--bp-surface);
  color: var(--bp-ink);
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.bp-app-menu-item:hover {
  background: var(--bp-surface-hover);
  border-color: var(--bp-outline);
}

.bp-app-menu-item-active {
  background: var(--bp-accent-muted);
  color: var(--bp-accent-strong);
  border-color: transparent;
}

.bp-app-menu-item-disabled {
  opacity: 0.6;
  pointer-events: none;
}

.bp-app-menu-item-icon {
  width: 2rem;
  height: 2rem;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bp-accent-muted);
  color: var(--bp-accent-strong);
  font-size: 0.85rem;
  font-weight: 700;
}

.bp-app-menu-item-text {
  display: grid;
  gap: 0.15rem;
}

.bp-app-menu-item-label {
  font-weight: 600;
}

.bp-app-menu-item-description {
  font-size: 0.85rem;
  color: var(--bp-muted);
  font-weight: 500;
}

.bp-jump-links {
  display: block;
}

.bp-jump-links-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--bp-jump-links-gap, 0.5rem);
  padding: 0;
  margin: 0;
}

.bp-jump-links-horizontal {
  flex-direction: row;
}

.bp-jump-links-wrap {
  flex-wrap: wrap;
}

.bp-jump-links-item {
  display: inline-flex;
}

.bp-jump-links-link {
  display: inline-flex;
  align-items: center;
  gap: var(--bp-jump-links-item-gap, 0.35rem);
  padding: var(--bp-jump-links-item-padding, 0.35rem 0.6rem);
  border-radius: var(--bp-jump-links-item-radius, 999px);
  border: 1px solid transparent;
  background: transparent;
  color: var(--bp-ink);
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.bp-jump-links-link:hover {
  background: var(--bp-surface-hover);
  border-color: var(--bp-outline-muted);
}

.bp-jump-links-link-active {
  background: var(--bp-accent-muted);
  color: var(--bp-accent-strong);
}

.bp-jump-links-link-disabled {
  opacity: 0.5;
  pointer-events: none;
}

.bp-tabs {
  display: grid;
  gap: var(--bp-tabs-gap, 1rem);
  min-width: 0;
}

.bp-tabs-vertical {
  grid-template-columns: minmax(160px, 240px) minmax(0, 1fr);
  align-items: start;
}

.bp-tabs-header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bp-tabs-list-gap, 0.5rem);
  align-items: center;
}

.bp-tabs-start,
.bp-tabs-end {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.bp-tabs-vertical .bp-tabs-header {
  flex-direction: column;
  align-items: stretch;
}

.bp-tabs-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bp-tabs-list-gap, 0.5rem);
  align-items: center;
}

.bp-tabs-vertical .bp-tabs-list {
  flex-direction: column;
  align-items: stretch;
}

.bp-tabs-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--bp-tabs-item-gap, 0.4rem);
  border-radius: 999px;
  border: 1px solid var(--bp-outline-muted);
  background: var(--bp-surface);
  color: var(--bp-ink);
  padding: 0.45rem 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.bp-tabs-tab:hover:not(.bp-tabs-tab-disabled) {
  background: var(--bp-surface-hover);
  border-color: var(--bp-outline);
}

.bp-tabs-tab-active {
  background: var(--bp-accent-muted);
  color: var(--bp-accent-strong);
  border-color: transparent;
}

.bp-tabs-tab-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.bp-tabs-panels {
  display: grid;
  gap: var(--bp-tabs-gap, 1rem);
  min-width: 0;
}

.bp-tabs-panel {
  padding: var(--bp-tabs-panel-padding, 0);
  min-width: 0;
}

.bp-tabs-panel[hidden] {
  display: none;
}

.bp-breadcrumbs {
  display: block;
}

.bp-breadcrumbs-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bp-breadcrumbs-gap, 0.35rem);
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

.bp-breadcrumbs-vertical .bp-breadcrumbs-list {
  flex-direction: column;
  align-items: flex-start;
}

.bp-breadcrumbs-item {
  display: inline-flex;
  align-items: center;
  gap: var(--bp-breadcrumbs-gap, 0.35rem);
}

.bp-breadcrumbs-link {
  color: var(--bp-ink);
  text-decoration: none;
  font-weight: 600;
}

.bp-breadcrumbs-link:hover {
  color: var(--bp-accent);
}

.bp-breadcrumbs-current {
  font-weight: 700;
  color: var(--bp-muted);
}

.bp-breadcrumbs-label {
  color: var(--bp-muted);
}

.bp-breadcrumbs-separator,
.bp-breadcrumbs-ellipsis {
  color: var(--bp-subtle);
}

.bp-breadcrumbs-loading,
.bp-breadcrumbs-empty {
  color: var(--bp-muted);
  font-size: 0.9rem;
}

.bp-pagination {
  display: flex;
}

.bp-pagination-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bp-pagination-gap, 0.35rem);
  padding: 0;
  margin: 0;
}

.bp-pagination-vertical .bp-pagination-list {
  flex-direction: column;
  align-items: flex-start;
}

.bp-pagination-item {
  display: inline-flex;
}

.bp-pagination-button {
  min-width: var(--bp-pagination-item-min-width, 2.2rem);
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--bp-outline-muted);
  background: var(--bp-surface);
  color: var(--bp-ink);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.bp-pagination-button:hover:not(:disabled) {
  background: var(--bp-surface-hover);
  border-color: var(--bp-outline);
}

.bp-pagination-item-current .bp-pagination-button {
  background: var(--bp-accent-muted);
  color: var(--bp-accent-strong);
  border-color: transparent;
}

.bp-pagination-item-disabled .bp-pagination-button {
  opacity: 0.5;
  cursor: not-allowed;
}

.bp-pagination-ellipsis-text {
  padding: 0 0.35rem;
  color: var(--bp-muted);
}

.bp-pagination-sm .bp-pagination-button {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
}

.bp-pagination-lg .bp-pagination-button {
  font-size: 1rem;
  padding: 0.5rem 0.9rem;
}

.bp-command-palette {
  display: grid;
  gap: var(--bp-command-palette-gap, 0.75rem);
  padding: var(--bp-command-palette-padding, 1rem);
  border-radius: 18px;
  border: 1px solid var(--bp-outline);
  background: var(--bp-surface);
  box-shadow: var(--bp-shadow-2);
  width: var(--bp-command-palette-width, 100%);
  max-height: var(--bp-command-palette-max-height, 26rem);
  overflow: hidden;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.bp-command-palette-header,
.bp-command-palette-footer {
  display: grid;
  gap: 0.35rem;
}

.bp-command-palette-header {
  grid-row: 1;
}

.bp-command-palette-body {
  display: grid;
  gap: var(--bp-command-palette-gap, 0.75rem);
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  grid-row: 2;
}

.bp-command-palette-footer {
  grid-row: 3;
}

.bp-command-palette-body .bp-scroll-area {
  min-height: 0;
}

.bp-command-palette-body .bp-overlay-scroll-area-viewport {
  height: 100%;
  max-height: 100%;
}

.bp-command-palette-input {
  display: grid;
  gap: 0.35rem;
}

.bp-command-palette-search {
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--bp-control-border);
  background: var(--bp-control-bg);
  color: var(--bp-control-fg);
  padding: 0.6rem 0.8rem;
  font-size: 1rem;
}

.bp-command-palette-search:focus {
  outline: none;
  border-color: var(--bp-control-border-hover);
  box-shadow: var(--bp-focus-ring);
}

.bp-command-palette-list {
  display: grid;
  gap: 0.5rem;
  max-height: var(--bp-command-palette-list-max-height, none);
  overflow: auto;
  min-height: 0;
}

.bp-command-palette-group {
  display: grid;
  gap: 0.35rem;
}

.bp-command-palette-group[hidden] {
  display: none;
}

.bp-command-palette-group-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bp-muted);
}

.bp-command-palette-group-label[hidden] {
  display: none;
}

.bp-command-palette-item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.6rem;
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: var(--bp-ink);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.bp-command-palette-item[hidden] {
  display: none;
}

.bp-command-palette-item:hover:not(.bp-command-palette-item-disabled) {
  background: var(--bp-surface-hover);
  border-color: var(--bp-outline-muted);
}

.bp-command-palette-item-highlighted {
  background: var(--bp-accent-muted);
  border-color: transparent;
  color: var(--bp-accent-strong);
}

.bp-command-palette-item-selected {
  font-weight: 700;
}

.bp-command-palette-item-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.bp-command-palette-item-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.bp-command-palette-item-shortcut {
  font-size: 0.75rem;
  padding: 0.2rem 0.4rem;
  border-radius: 6px;
  border: 1px solid var(--bp-outline-muted);
  color: inherit;
}

.bp-command-palette-item-description {
  grid-column: 1 / -1;
  font-size: 0.85rem;
  color: var(--bp-muted);
}

.bp-command-palette-empty {
  color: var(--bp-muted);
  font-size: 0.9rem;
}

.bp-command-palette-empty[hidden] {
  display: none;
}

.bp-mega-menu {
  display: block;
}

.bp-mega-menu-sections {
  display: grid;
  gap: var(--bp-mega-menu-gap, 1rem);
  grid-template-columns: var(--bp-mega-menu-columns, repeat(var(--bp-mega-menu-column-count, auto-fit), minmax(var(--bp-mega-menu-column-min, 16rem), 1fr)));
}

.bp-mega-menu-section {
  display: grid;
  gap: 0.75rem;
  padding: var(--bp-mega-menu-section-padding, 0);
}

.bp-mega-menu-section-disabled {
  opacity: 0.6;
}

.bp-mega-menu-section-header {
  display: grid;
  gap: 0.3rem;
}

.bp-mega-menu-section-footer {
  font-size: 0.85rem;
  color: var(--bp-muted);
}

.bp-mega-menu-section-title {
  margin: 0;
  font-size: 1rem;
}

.bp-mega-menu-section-description {
  margin: 0;
  font-size: 0.85rem;
  color: var(--bp-muted);
}

.bp-mega-menu-items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--bp-mega-menu-item-gap, 0.35rem);
}

.bp-mega-menu-item {
  display: block;
}

.bp-mega-menu-link {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.5rem;
  padding: var(--bp-mega-menu-item-padding, 0.4rem 0.6rem);
  border-radius: var(--bp-mega-menu-item-radius, 12px);
  border: 1px solid transparent;
  background: transparent;
  color: var(--bp-ink);
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.bp-mega-menu-link:hover {
  background: var(--bp-surface-hover);
  border-color: var(--bp-outline-muted);
}

.bp-mega-menu-link-active {
  background: var(--bp-accent-muted);
  color: var(--bp-accent-strong);
  border-color: transparent;
}

.bp-mega-menu-link-disabled {
  opacity: 0.5;
  pointer-events: none;
}

.bp-mega-menu-item-icon {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bp-surface);
  border: 1px solid var(--bp-outline-muted);
}

.bp-mega-menu-item-text {
  display: grid;
  gap: 0.15rem;
}

.bp-mega-menu-item-label {
  font-weight: 600;
}

.bp-mega-menu-item-description {
  font-size: 0.85rem;
  color: var(--bp-muted);
}

.bp-scroll-spy {
  display: grid;
  gap: var(--bp-scroll-spy-gap, 1.5rem);
  grid-template-columns: minmax(180px, 240px) 1fr;
  align-items: start;
}

.bp-scroll-spy-nav {
  display: block;
}

.bp-scroll-spy-nav-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--bp-scroll-spy-nav-gap, 0.5rem);
  padding: 0;
  margin: 0;
}

.bp-scroll-spy-nav-horizontal {
  flex-direction: row;
  flex-wrap: wrap;
}

.bp-scroll-spy-nav-item {
  display: inline-flex;
}

.bp-scroll-spy-link {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  border: 1px solid transparent;
  text-decoration: none;
  color: var(--bp-ink);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.bp-scroll-spy-link:hover {
  background: var(--bp-surface-hover);
  border-color: var(--bp-outline-muted);
}

.bp-scroll-spy-link-active {
  background: var(--bp-accent-muted);
  color: var(--bp-accent-strong);
}

.bp-scroll-spy-link-disabled {
  opacity: 0.5;
  pointer-events: none;
}

.bp-scroll-spy-content {
  display: grid;
  gap: var(--bp-scroll-spy-content-gap, 1rem);
  max-height: var(--bp-scroll-spy-content-max-height, none);
  overflow: auto;
}

.bp-scroll-spy-section {
  padding: var(--bp-scroll-spy-section-padding, 0.75rem 1rem);
  min-height: var(--bp-scroll-spy-section-min-height, auto);
  border-radius: 16px;
  border: 1px solid var(--bp-outline-muted);
  background: var(--bp-surface);
}

.bp-scroll-spy-section-body {
  display: grid;
  gap: 0.5rem;
}

.bp-scroll-spy-section-active {
  border-color: var(--bp-outline);
  box-shadow: var(--bp-shadow-1);
}

.bp-scroll-spy-section-disabled {
  opacity: 0.6;
}

.bp-sub-nav {
  display: block;
}

.bp-sub-nav-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--bp-sub-nav-gap, 0.5rem);
  padding: 0;
  margin: 0;
}

.bp-sub-nav-horizontal {
  flex-direction: row;
}

.bp-sub-nav-wrap {
  flex-wrap: wrap;
}

.bp-sub-nav-item {
  display: inline-flex;
}

.bp-sub-nav-link {
  display: inline-flex;
  align-items: center;
  gap: var(--bp-sub-nav-item-gap, 0.35rem);
  padding: var(--bp-sub-nav-item-padding, 0.35rem 0.6rem);
  border-radius: var(--bp-sub-nav-item-radius, 999px);
  border: 1px solid transparent;
  background: transparent;
  color: var(--bp-ink);
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.bp-sub-nav-link:hover {
  background: var(--bp-surface-hover);
  border-color: var(--bp-outline-muted);
}

.bp-sub-nav-link-active {
  background: var(--bp-accent-muted);
  color: var(--bp-accent-strong);
}

.bp-sub-nav-link-disabled {
  opacity: 0.5;
  pointer-events: none;
}

.bp-tree-nav {
  display: block;
}

.bp-tree-nav-list,
.bp-tree-nav-children {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.25rem;
}

.bp-tree-nav-children {
  margin-left: var(--bp-tree-nav-indent, 1rem);
}

.bp-tree-nav-item {
  display: grid;
  gap: 0.25rem;
}

.bp-tree-nav-node {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.35rem;
}

.bp-tree-nav-toggle-end .bp-tree-nav-node {
  grid-template-columns: minmax(0, 1fr) auto;
}

.bp-tree-nav-toggle-end .bp-tree-nav-link {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  width: 100%;
}

.bp-tree-nav-toggle-end .bp-tree-nav-toggle,
.bp-tree-nav-toggle-end .bp-tree-nav-toggle-placeholder {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  align-self: center;
}

.bp-tree-nav-toggle {
  width: var(--bp-tree-nav-toggle-size, 1.6rem);
  height: var(--bp-tree-nav-toggle-size, 1.6rem);
  border-radius: 0.5rem;
  border: 1px solid var(--bp-outline-muted);
  background: var(--bp-surface);
  color: var(--bp-ink);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.bp-tree-nav-toggle:hover:not(:disabled) {
  background: var(--bp-surface-hover);
  border-color: var(--bp-outline);
}

.bp-tree-nav-toggle:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.bp-tree-nav-toggle-placeholder {
  width: var(--bp-tree-nav-toggle-size, 1.6rem);
  height: var(--bp-tree-nav-toggle-size, 1.6rem);
}

.bp-tree-nav-guides .bp-tree-nav-children {
  position: relative;
  padding-left: var(--bp-tree-nav-guide-padding, 0.85rem);
}

.bp-tree-nav-guides .bp-tree-nav-children::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc((var(--bp-tree-nav-toggle-size, 1.6rem) / 2) - var(--bp-tree-nav-indent, 1rem));
  border-left: 1px solid var(--bp-tree-nav-guide-color, var(--bp-outline-muted));
  pointer-events: none;
}

.bp-tree-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.5rem;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--bp-ink);
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.bp-tree-nav-link:hover {
  background: var(--bp-surface-hover);
  border-color: var(--bp-outline-muted);
}

.bp-tree-nav-link-active {
  background: var(--bp-accent-muted);
  color: var(--bp-accent-strong);
}

.bp-tree-nav-link-disabled {
  opacity: 0.5;
  pointer-events: none;
}