/* Adapted from React Bits BranchedMenu (https://reactbits.dev/micro/branched-menu), vanilla port.
   Standalone stylesheet for ./branched-menu.mjs. Props are written as --bm-* on .bm-nav. */

.bm-nav {
  --bm-color: #f5f5f5;
  --bm-accent: #f5f5f5;
  --bm-line: #3f3f46;
  --bm-width: 240px;
  --bm-row: 36px;
  --bm-indent: 40px;
  --bm-font-size: 14px;
  --bm-line-width: 1.5;
  --bm-draw: 400ms;
  --bm-fold: 300ms;
  --bm-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --bm-muted: color-mix(in srgb, var(--bm-color) 55%, transparent);

  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: var(--bm-width);
  max-width: 100%;
  padding-left: 14px;
  color: var(--bm-color);
  font-size: var(--bm-font-size);
  line-height: 1.25;
}

.bm-nav *,
.bm-nav *::before,
.bm-nav *::after {
  box-sizing: border-box;
}

/* Rail */
.bm-nav::before {
  content: '';
  position: absolute;
  top: 8px;
  bottom: 0;
  left: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--bm-line) 0%, var(--bm-line) 55%, transparent 100%);
  pointer-events: none;
}

/* Marker gliding to the active section header */
.bm-marker {
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: 16px;
  border-radius: 1px;
  background: var(--bm-accent);
  opacity: 0;
  pointer-events: none;
  transition: top 220ms var(--bm-ease), opacity 200ms ease;
}
.bm-marker[data-on] { opacity: 1; }
.bm-marker[data-instant] { transition: opacity 200ms ease; }

.bm-section { display: block; }

.bm-header,
.bm-child {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  color: var(--bm-muted);
  cursor: pointer;
  transition: color 200ms ease;
}

.bm-header {
  padding: 9px 0;
  font-size: calc(var(--bm-font-size) + 1px);
  font-weight: 500;
}
.bm-header:hover,
.bm-section[data-open] > .bm-header,
.bm-header[data-active] {
  color: var(--bm-color);
}

/* Fold: grid rows 0fr -> 1fr */
.bm-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--bm-fold) var(--bm-ease);
}
.bm-section[data-open] > .bm-body { grid-template-rows: 1fr; }
.bm-body-inner {
  min-height: 0;
  overflow: hidden;
}
.bm-box {
  position: relative;
  padding-block: 6px;
}

.bm-svg {
  position: absolute;
  top: 0;
  left: 0;
  overflow: visible;
  opacity: 0;
  pointer-events: none;
  transition: opacity 250ms ease 100ms;
}
.bm-section[data-open] .bm-svg { opacity: 1; }
.bm-line { stroke: var(--bm-line); }
.bm-accent {
  stroke: var(--bm-accent);
  transition: stroke-dashoffset var(--bm-draw) var(--bm-ease);
}

.bm-child {
  position: relative;
  height: var(--bm-row);
  padding: 0 0 0 var(--bm-indent);
}
.bm-child:hover { color: var(--bm-color); }
.bm-child[data-active] {
  color: var(--bm-accent);
  font-weight: 500;
}

.bm-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.bm-icon {
  display: inline-flex;
  flex: none;
  width: 16px;
  height: 16px;
  align-items: center;
  justify-content: center;
}
.bm-icon > svg,
.bm-icon > img,
.bm-icon > * {
  width: 16px;
  height: 16px;
}

.bm-header:focus-visible,
.bm-child:focus-visible {
  outline: 2px solid var(--bm-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .bm-header,
  .bm-child,
  .bm-body,
  .bm-accent {
    transition: none;
  }
  .bm-marker,
  .bm-marker[data-instant] {
    transition: opacity 200ms ease;
  }
}