/* section-nav.css: compact left-side section navigator (index.html only).
   Uses the site's existing theme variables, so every colour scheme and dark mode just works. */

.nlsn{
  --nlsn-w: 1.75rem;            /* collapsed width  */
  --nlsn-w-open: 10rem;         /* expanded width   */
  position: fixed;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 25;                  /* above header (20), below rail/buttons (30+) and modals (100) */
  width: var(--nlsn-w);
  padding: .35rem 0;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface, #fff) 86%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line, rgba(127,127,127,.25));
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  font-family: inherit;
  transition:
    width .38s cubic-bezier(.2,.8,.2,1),
    border-radius .38s cubic-bezier(.2,.8,.2,1),
    box-shadow .3s ease,
    background-color .3s ease;
}
.nlsn.is-open,
.nlsn:hover{
  width: var(--nlsn-w-open);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.14);
  background: color-mix(in srgb, var(--surface, #fff) 96%, transparent);
}

.nlsn ul{ list-style: none; margin: 0; padding: 0; }

.nlsn a{
  display: flex;
  align-items: center;
  height: 1.75rem;
  margin: 0 .3rem 0 0;
  border-radius: 999px;
  color: var(--text2, #44505c);
  text-decoration: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}

/* Marker: a short tick, centred inside the collapsed width */
.nlsn-mark{
  flex: 0 0 calc(var(--nlsn-w) - 2px - .3rem);
  display: grid;
  place-items: center;
  height: 100%;
}
.nlsn-mark::before{
  content: "";
  width: .6rem;
  height: 2px;
  border-radius: 2px;
  background: var(--mut, #5b6670);
  opacity: .5;
  transition: width .3s cubic-bezier(.2,.8,.2,1), opacity .25s, background-color .25s, height .25s;
}

.nlsn-label{
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .005em;
  padding-right: .7rem;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .25s ease, transform .35s cubic-bezier(.2,.8,.2,1), color .2s;
}
.nlsn.is-open .nlsn-label,
.nlsn:hover .nlsn-label{
  opacity: 1;
  transform: none;
  transition-delay: .06s;
}

/* Hover / keyboard focus on a single item */
.nlsn a:hover .nlsn-mark::before,
.nlsn a:focus-visible .nlsn-mark::before{ opacity: 1; width: .85rem; background: var(--ac, #2d4aa9); }
.nlsn a:hover{ color: var(--text, #1e3138); }
.nlsn a:focus-visible{ outline: 2px solid var(--b2, var(--ac, #2d4aa9)); outline-offset: -2px; }

/* Current section */
.nlsn a.is-active .nlsn-mark::before{
  opacity: 1;
  width: .95rem;
  height: 3px;
  background: var(--ac, #2d4aa9);
}
.nlsn a.is-active{ color: var(--ac-d, var(--ac, #2d4aa9)); }
.nlsn a.is-active .nlsn-label{ font-weight: 800; }
.nlsn.is-open a.is-active,
.nlsn:hover a.is-active{ background: var(--tint, rgba(45,74,169,.12)); }

/* Unobtrusive where space is tight or irrelevant: the header already collapses to a menu at 900px */
@media (max-width: 900px), (max-height: 460px){
  .nlsn{ display: none; }
}
@media print{ .nlsn{ display: none; } }

@media (prefers-reduced-motion: reduce){
  .nlsn, .nlsn *, .nlsn *::before{ transition: none !important; }
}