/* Shared article navigation: type and fire colors use the existing Emo tokens. */
.has-reading-nav { scroll-padding-top: var(--reader-header-height, 120px); }
.reader-nav {
  --reader-progress: 0%;
  position: fixed;
  z-index: 8;
  top: calc(var(--reader-header-height, 120px) + 36px);
  left: calc(50% + 360px);
  width: 236px;
  max-height: calc(100dvh - var(--reader-header-height, 120px) - 60px);
  overflow: auto;
  color: var(--ink);
  font: 700 14px/1.8 "Noto Sans JP", sans-serif;
  letter-spacing: .015em;
}
.reader-nav[hidden] { display: none; }
.reader-nav-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 24px; }
.reader-counter { color: var(--orange); white-space: nowrap; }
.reader-chapters { position: relative; padding-left: 28px; }
.reader-chapters a { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 42px; padding: 8px 0; }
.reader-chapter-number { font-variant-numeric: tabular-nums; }
.reader-chapters a[aria-current] { color: var(--orange); font-weight: 900; }
.reader-chapters a:hover { color: var(--orange); }
.reader-chapters a:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.reader-rail { position: absolute; left: 6px; top: var(--reader-rail-start, 21px); width: 2px; height: var(--reader-rail-length, 378px); background: var(--light); }
.reader-rail-fill { position: absolute; inset: 0 0 auto; height: var(--reader-dot-offset, 0px); background: var(--vertical); }
.reader-dot { position: absolute; top: -6px; left: -5px; width: 12px; height: 12px; border-radius: 50%; background: var(--vertical); box-shadow: 0 0 0 4px #fff; transform: translateY(var(--reader-dot-offset, 0px)); }
.reader-toggle, .reader-mobile-progress { display: none; }

@media (max-width: 1239px) {
  .has-reading-nav { scroll-padding-top: calc(var(--reader-header-height, 80px) + 54px); }
  .reader-nav {
    top: var(--reader-header-height, 80px);
    left: 0;
    width: 100%;
    max-height: calc(100dvh - var(--reader-header-height, 80px));
    overflow: visible;
    background: #fff;
  }
  .reader-nav-heading, .reader-rail { display: none; }
  .reader-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 50px;
    margin: 0;
    padding: 10px max(24px, calc((100% - 620px) / 2));
    border: 0;
    background: #fff;
    color: var(--ink);
    text-align: left;
    font: 700 14px/1.8 "Noto Sans JP", sans-serif;
    letter-spacing: .015em;
  }
  .reader-mobile-counter { flex: none; color: var(--orange); }
  .reader-mobile-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .reader-toggle-label { margin-left: auto; padding-left: 4px; font-size: 12px; white-space: nowrap; }
  .reader-toggle .link-launch { flex: none; transform: rotate(90deg); }
  .reader-toggle .link-launch::before { width: 12px; height: 12px; }
  .reader-mobile-progress { display: block; height: 3px; background: #eee; }
  .reader-mobile-progress span { display: block; width: var(--reader-progress); height: 100%; background: var(--gradient); }
  .reader-chapters { display: none; max-height: calc(100dvh - var(--reader-header-height, 80px) - 75px); overflow: auto; padding: 22px max(24px, calc((100% - 620px) / 2)) 30px; background: #fff; }
  .reader-nav.is-open .reader-chapters { display: block; }
  .reader-nav.is-open .reader-toggle .link-launch { transform: rotate(-90deg); }
  .reader-chapters a { min-height: 44px; }
}
@media (max-width: 700px) {
  .reader-toggle { gap: 8px; padding-inline: 24px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .has-reading-nav { scroll-behavior: auto; }
}