/* Nav Rail — vertical icon strip, right edge. */

body:not(.sidebar) .nav-rail {
  display: none;
}

.nav-rail {
  -webkit-backdrop-filter: blur(66px);
  backdrop-filter: blur(66px);
  background-color: oklch(var(--lch-white) / 0.66);
  block-size: 100dvh;
  display: flex;
  flex-direction: column;
  inline-size: var(--rail-width);
  justify-content: space-between;
  overflow: visible;
  padding-block: var(--block-space);
  padding-inline: var(--inline-space-half);
  position: sticky;
  inset-block-start: 0;
  z-index: 4;

  @media (max-width: 100ch) {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background-color: oklch(var(--lch-white) / 0.92);
    inline-size: var(--rail-mobile-width);
    inset: 0 0 0 auto;
    position: fixed;
    transform: translate(100%);
    transition: transform 300ms ease;
    z-index: 5;
  }
}

@media (max-width: 100ch) {
  #sidebar.open ~ #nav-rail {
    transform: translate(0);
  }
}

/* Nav item — circle btn icon stacked above a small label */
.nav-rail__item {
  align-items: center;
  color: var(--color-text);
  display: flex;
  flex-direction: column;
  gap: 0.15em;
  text-decoration: none;
}

.nav-rail__item--disabled {
  cursor: default;
  opacity: 0.35;
  pointer-events: none;
}

/* Active page indicator — filled circle button */
.nav-rail__item--active .btn {
  --btn-background: var(--color-text);
  --btn-border-color: transparent;
}

.nav-rail__item--active .btn img {
  filter: invert(100%);
}

@media (prefers-color-scheme: dark) {
  .nav-rail__item--active .btn img {
    filter: invert(0%);
  }
}

.nav-rail__item--active .nav-rail__label {
  font-weight: 700;
}

/* Labels beneath circle buttons — hidden on mobile */
.nav-rail__label {
  font-size: 0.55rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;

  @media (max-width: 100ch) {
    block-size: 1px;
    clip-path: inset(50%);
    inline-size: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
  }
}

/* Mobile: larger tap targets with more spacing */
@media (max-width: 100ch) {
  .nav-rail .btn {
    --btn-size: 2.75em;
  }

  .nav-rail > .flex {
    gap: var(--block-space-half);
  }
}

/* Learn dropdown — details/summary with flyout menu */
.nav-rail__dropdown {
  overflow: visible;

  & > summary {
    list-style: none;
    cursor: pointer;

    &::marker,
    &::-webkit-details-marker {
      display: none;
    }
  }

  &[open] {
    z-index: 10;
  }
}

.nav-rail__menu {
  border-radius: 0.5em;
  inset-inline-end: calc(100% + var(--inline-space-half));
  inset-block-start: 0;
  min-inline-size: 14ch;
  position: absolute;
  z-index: 10;
}

/* Notification count badge — positioned inside a btn */
.nav-rail__badge {
  align-items: center;
  background-color: oklch(var(--lch-red));
  border-radius: 999px;
  color: white;
  display: flex;
  font-size: 0.55rem;
  font-weight: 700;
  inset-block-start: -0.15em;
  inset-inline-end: -0.15em;
  justify-content: center;
  line-height: 1;
  min-inline-size: 1.3em;
  padding: 0.15em 0.35em;
  position: absolute;
}

.nav-rail__menu-item {
  align-items: center;
  color: var(--color-text);
  display: flex;
  font-size: 0.9rem;
  font-weight: 500;
  gap: var(--inline-space-half);
  padding: var(--block-space-half) var(--inline-space);
  text-decoration: none;
  white-space: nowrap;

  @media (any-hover: hover) {
    &:hover {
      background-color: oklch(var(--lch-black) / 0.04);
    }
  }
}