/* =========================================================================
 * Section Nav — left "page switcher" sidebar (companion to section-nav.js).
 *
 * Lives in the left margin (cols 1–3). A small rectangle toggle opens a
 * panel that lists sibling pages: all case studies when reading a case
 * study, all articles when reading a writing piece. The current page reads
 * darker with a longer tick; the rest are muted. Long lists fade at the
 * edges as you scroll (scroll-fade-effect, progressive-enhancement only).
 * ====================================================================== */

:root {
  --sn-text: var(--text-primary, #0a0a0a);
  --sn-muted: color-mix(in srgb, var(--text-primary, #0a0a0a) 45%, transparent);
  --sn-tick: color-mix(in srgb, var(--text-primary, #0a0a0a) 20%, transparent);
  --sn-bg: var(--bg-primary, #fff);
  --sn-border: var(--border-primary, #e9e8ea);
  --sn-radius: 16px;
  --sn-width: 248px;
  --sn-top: 128px;
}

[data-theme="dark"] {
  --sn-text: var(--dm-text-primary, #f0f0f0);
  --sn-muted: color-mix(in srgb, var(--dm-text-primary, #f0f0f0) 45%, transparent);
  --sn-tick: color-mix(in srgb, var(--dm-text-primary, #f0f0f0) 22%, transparent);
  --sn-bg: var(--bg-primary, #08090a);
  --sn-border: var(--dm-border-primary, #23252a);
}

.section-nav {
  position: fixed;
  top: var(--sn-top);
  /* anchored to the left margin (cols 1–3), clear of the reading column */
  left: clamp(16px, 4vw, 44px);
  z-index: 60;
  font-family: var(--font-family-ui, system-ui, sans-serif);
  isolation: isolate;
}

/* Below the reading-rail breakpoint the margins collapse — hide it. */
@media (max-width: 1219px) {
  .section-nav {
    display: none;
  }
}

/* --- toggle (rectangle + left bar, mirrors the old TOC glyph) --- */
.section-nav__toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--sn-text);
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 160ms ease, color 160ms ease,
    border-color 160ms ease, background-color 160ms ease;
}

.section-nav__toggle:hover,
.section-nav__toggle:focus-visible {
  opacity: 1;
  background: rgba(127, 127, 127, 0.1);
}

.section-nav__toggle:focus-visible {
  outline: 2px solid var(--accent-primary, #be3455);
  outline-offset: 2px;
}

.section-nav[data-open="false"] .section-nav__toggle {
  box-shadow: inset 0 0 0 1px var(--sn-border);
}

.section-nav[data-open="true"] .section-nav__toggle {
  opacity: 1;
  color: var(--sn-text);
}

.section-nav__toggle svg { width: 16px; height: 16px; }

/* --- tooltip (matches the reference "Toggle Sidebar  S") --- */
.section-nav__tip {
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 6px 12px;
  white-space: nowrap;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #fff;
  background: #18181b;
  border-radius: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease, transform 140ms ease;
}

[data-theme="dark"] .section-nav__tip {
  background: #2a2a2e;
}

.section-nav__tip::before {
  content: "";
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-right-color: #18181b;
}

[data-theme="dark"] .section-nav__tip::before { border-right-color: #2a2a2e; }

.section-nav__toggle:hover + .section-nav__tip,
.section-nav__toggle:focus-visible + .section-nav__tip {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

.section-nav[data-open="true"] .section-nav__toggle:hover + .section-nav__tip,
.section-nav[data-open="true"] .section-nav__toggle:focus-visible + .section-nav__tip {
  /* keep showing on hover even when open */
  opacity: 1;
}

.section-nav__kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 0.6875rem;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.14);
}

/* --- sliding panel: tucked off to the left, slides in on open --- */
.section-nav__panel {
  position: absolute;
  top: -10px;
  left: -10px;
  width: var(--sn-width);
  max-height: calc(100svh - var(--sn-top) - 48px);
  display: flex;
  flex-direction: column;
  padding: 46px 4px 26px;
  border: 1px solid var(--sn-border);
  border-radius: var(--sn-radius);
  background: var(--sn-bg);
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.04),
    0 12px 28px rgba(15, 12, 28, 0.10);
  transform: translateX(-120%);
  pointer-events: none;
  transition: transform 350ms cubic-bezier(0.24, 0.88, 0.28, 0.92);
}

[data-theme="dark"] .section-nav__panel {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04),
    0 14px 32px rgba(0, 0, 0, 0.55);
}

.section-nav[data-open="true"] .section-nav__panel {
  transform: translateX(0);
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .section-nav__panel { transition: none; }
}

/* The toggle floats above the panel so it stays put as the panel grows in */
.section-nav__toggle { z-index: 2; }
.section-nav__panel { z-index: 1; }

.section-nav__viewport {
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.section-nav__viewport::-webkit-scrollbar { display: none; }

.section-nav__list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 0;
  /* left edge of every tick lines up at the same x */
  padding: 6px 14px 16px 12px;
  list-style: none;
  /* fade long titles out toward the right edge — also hides the panel's
   * right edge while it's slid closed, so titles don't peek at the margin */
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
}

/* Each row collapses to the tick's height; the label overflows and centres
 * on the line, so the labels read as sitting on an evenly-spaced ruler. */
.section-nav__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 1px;
  text-decoration: none;
  border: 0;
}

/* generous, invisible hit-area so the 1px rows stay easy to click */
.section-nav__link::after {
  content: "";
  position: absolute;
  inset: -13px 0;
}

.section-nav__tick {
  flex-shrink: 0;
  height: 1px;
  width: 24px;
  background: var(--sn-tick);
  transition: width 260ms cubic-bezier(0.24, 0.88, 0.28, 0.92),
    background-color 200ms ease-out;
}

.section-nav__label {
  font-size: 0.875rem;
  font-weight: var(--font-weight-light, 300);
  line-height: 1;
  color: var(--sn-muted);
  white-space: nowrap;
  transition: color 200ms ease-out;
}

.section-nav__link:hover .section-nav__tick { background: var(--sn-text); }
.section-nav__link:hover .section-nav__label { color: var(--sn-text); }

/* active: longer tick + foreground label — same (light) weight as the rest */
.section-nav__link[aria-current="page"] .section-nav__tick {
  width: 40px;
  background: var(--sn-text);
}
.section-nav__link[aria-current="page"] .section-nav__label {
  color: var(--sn-text);
  font-weight: var(--font-weight-light, 300);
}

/* decorative ruler ticks between items — left-aligned with the link ticks */
.section-nav__rule {
  height: 1px;
  width: 24px;
  background: var(--sn-tick);
  margin: 0;
}

/* =========================================================================
 * scroll-fade-effect — fades the top/bottom edges of a scroll container as
 * you scroll, via scroll-driven animations. Progressive enhancement: where
 * animation-timeline: scroll() is unsupported the content just shows fully.
 * ====================================================================== */
@supports (animation-timeline: scroll()) {
  @property --sfe-top {
    syntax: "<length>";
    inherits: true;
    initial-value: 0px;
  }
  @property --sfe-bottom {
    syntax: "<length>";
    inherits: true;
    initial-value: 28px;
  }

  @keyframes sfe-show-top { to { --sfe-top: var(--sfe-mask, 28px); } }
  @keyframes sfe-hide-bottom { to { --sfe-bottom: 0px; } }

  .scroll-fade-y {
    --sfe-mask: 28px;
    --sfe-buffer: 1.5rem;
    -webkit-mask-image:
      linear-gradient(to top, transparent, black 90%),
      linear-gradient(to bottom, transparent 0%, black 100%),
      linear-gradient(black, black);
    mask-image:
      linear-gradient(to top, transparent, black 90%),
      linear-gradient(to bottom, transparent 0%, black 100%),
      linear-gradient(black, black);
    -webkit-mask-size: 100% var(--sfe-top), 100% var(--sfe-bottom), 100% 100%;
    mask-size: 100% var(--sfe-top), 100% var(--sfe-bottom), 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: 0 0, 0 100%, 0 0;
    mask-position: 0 0, 0 100%, 0 0;
    mask-composite: exclude;
    -webkit-mask-composite: xor;
    animation: sfe-show-top linear both, sfe-hide-bottom linear both;
    animation-timeline: scroll(self), scroll(self);
    animation-range: 0 var(--sfe-buffer), calc(100% - var(--sfe-buffer)) 100%;
  }
}