/* chrome: reading progress under the sticky website header, chapter nav (desktop rail + mobile pill), share.
   Stacking: the website header is `sticky z-50`, its mobile menu `fixed z-[60]`. Everything here stays
   below 50 so header dropdowns and the mobile menu always cover the report UI. */

.ch-skip {
  position: fixed; left: 1rem; top: 1rem; z-index: 70;
  padding: .7rem 1rem; border-radius: .7rem;
  background: var(--primary); color: var(--on-primary); font-weight: 700; text-decoration: none;
}
/* Only visible while keyboard-focused; otherwise fully hidden (no flash on load or mouse focus). */
.ch-skip:not(:focus-visible) {
  opacity: 0; pointer-events: none; clip-path: inset(50%); transform: translateY(-300%);
}

/* #chrome itself is the 3px progress strip, pinned to the lower edge of the website header
   (--chrome-h, kept up to date by js/chrome.js). js/timeline.js reads its bottom edge as sticky offset. */
.ch {
  position: fixed; left: 0; right: 0; top: var(--chrome-h, 0px); z-index: 45;
  height: 3px; pointer-events: none;
}
.ch > :not(.ch-progress) { pointer-events: auto; }
/* Inter turns "20x10" into "20×10" via contextual alternates; pin it for the whole module. */
#chrome, #chrome * { font-feature-settings: "calt" 0; }

/* ---- Progress ---- */
.ch-progress { position: absolute; inset: 0; overflow: hidden; }
.ch-progress-fill {
  display: block; height: 100%; width: 100%;
  background: var(--primary);
  box-shadow: 0 0 12px rgb(var(--primary-rgb) / .55);
  transform-origin: 0 50%; transform: scaleX(0);
  will-change: transform;
}

/* ---- Share (shared look for rail + pill variant) ---- */
.ch-share {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  border: 1px solid var(--line2); background: rgb(var(--bg-rgb) / .86); color: var(--ink);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  font: 600 .82rem/1 var(--font); cursor: pointer;
  transition: background-color .25s, border-color .25s, transform .25s var(--ease);
}
.ch-share:hover { background: rgb(var(--primary-rgb) / .12); border-color: rgb(var(--primary-rgb) / .5); }
.ch-share:active { transform: scale(.96); }

/* ---- Desktop chapter rail ---- */
.ch-nav { display: none; }
@media (min-width: 1024px) {
  .ch-nav {
    display: flex; flex-direction: column; align-items: flex-end; gap: .5rem;
    position: fixed; z-index: 2;
    right: max(1rem, env(safe-area-inset-right, 0px));
    top: calc(50% + var(--chrome-h, 0px) / 2);
    transform: translateY(-50%);
    transition: opacity .5s var(--ease);
  }
  .ch:is([data-state="top"], [data-state="after"]) .ch-nav { opacity: 0; pointer-events: none; }
  .ch-list { list-style: none; margin: 0; padding: .6rem .3rem; display: flex; flex-direction: column; gap: .15rem; }
  .ch-list a {
    position: relative; display: flex; align-items: center; justify-content: flex-end;
    height: 1.55rem; padding-right: 1.3rem; text-decoration: none; color: var(--muted);
  }
  /* The dot */
  .ch-list a::after {
    content: ''; position: absolute; right: .35rem; top: 50%;
    width: 6px; height: 6px; margin-top: -3px; border-radius: 3px;
    background: rgba(255, 255, 255, .35);
    transition: transform .4s var(--ease), background-color .3s;
  }
  .ch-list a:hover::after { background: var(--ink); transform: scale(1.4); }
  .ch-list a[aria-current="true"]::after {
    background: var(--primary); transform: scaleY(3.2);
    box-shadow: 0 0 10px rgb(var(--primary-rgb) / .6);
  }
  /* Label pill – only shown while the rail is hovered/focused. */
  .ch-list .ch-num, .ch-list .ch-label { opacity: 0; transform: translateX(10px); transition: opacity .3s var(--ease), transform .35s var(--ease); }
  .ch-list a > span:first-child { margin-right: .5rem; }
  .ch-num { font: 700 .66rem/1 var(--font-mono); color: var(--dim); letter-spacing: .08em; }
  .ch-label { font: 600 .82rem/1 var(--font); white-space: nowrap; color: var(--ink); }
  .ch-nav::before {
    content: ''; position: absolute; inset: 0 -0.2rem 0 -1rem; z-index: -1; border-radius: 1rem;
    background: rgb(var(--bg-rgb) / .82); border: 1px solid var(--line);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    opacity: 0; transition: opacity .3s var(--ease);
  }
  .ch-nav:hover::before, .ch-nav:focus-within::before { opacity: 1; }
  .ch-nav:hover .ch-num, .ch-nav:hover .ch-label,
  .ch-nav:focus-within .ch-num, .ch-nav:focus-within .ch-label { opacity: 1; transform: none; }
  .ch-list a[aria-current="true"] .ch-label { color: var(--primary); }
  .ch-list li:nth-child(2) * { transition-delay: .02s; } .ch-list li:nth-child(3) * { transition-delay: .04s; }
  .ch-list li:nth-child(4) * { transition-delay: .06s; } .ch-list li:nth-child(5) * { transition-delay: .08s; }
  .ch-list li:nth-child(6) * { transition-delay: .1s; } .ch-list li:nth-child(7) * { transition-delay: .12s; }
  .ch-list li:nth-child(8) * { transition-delay: .14s; } .ch-list li:nth-child(9) * { transition-delay: .16s; }
  .ch-list li:nth-child(10) * { transition-delay: .18s; } .ch-list li:nth-child(11) * { transition-delay: .2s; }
  .ch-list li:nth-child(12) * { transition-delay: .22s; }

  /* Share sits under the dots: a small round icon, its label slides in with the chapter labels. */
  .ch-share--rail { height: 2rem; min-width: 2rem; padding: 0 .5rem; margin: 0 .05rem .4rem 0; border-radius: 999px; }
  .ch-share--rail .ch-share-label {
    max-width: 0; overflow: hidden; opacity: 0; margin-left: -.45rem;
    transition: max-width .35s var(--ease), opacity .3s var(--ease), margin .35s var(--ease);
  }
  .ch-nav:hover .ch-share--rail .ch-share-label,
  .ch-nav:focus-within .ch-share--rail .ch-share-label { max-width: 5rem; opacity: 1; margin-left: 0; }
}

/* ---- Mobile chapter pill + sheet ---- */
.ch-pill-wrap {
  position: fixed; z-index: 3; left: 50%; bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: .5rem;
  transform: translate(-50%, 0); transition: transform .5s var(--ease), opacity .4s var(--ease);
}
.ch-pill-wrap[hidden] { display: none; }
.ch:is([data-state="top"], [data-state="after"], [data-pill="away"]) .ch-pill-wrap { transform: translate(-50%, calc(100% + 2rem)); opacity: 0; }
@media (min-width: 1024px) { .ch-pill-wrap { display: none !important; } }

.ch-pill {
  display: inline-flex; align-items: center; gap: .55rem;
  height: 2.75rem; padding: 0 1rem 0 .55rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line2); color: var(--ink);
  background: rgb(var(--bg-rgb) / .86);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: 0 14px 40px -12px rgba(0, 0, 0, .8);
  white-space: nowrap;
}
.ch-pill-num {
  display: grid; place-items: center; width: 1.85rem; height: 1.85rem; border-radius: 50%;
  background: var(--primary); color: var(--on-primary); font: 700 .7rem/1 var(--font-mono);
}
.ch-pill-label { font: 700 .9rem/1 var(--font); }
.ch-pill-count { font: 500 .7rem/1 var(--font-mono); color: var(--dim); }
.ch-pill svg { color: var(--muted); transition: transform .35s var(--ease); }
.ch-pill[aria-expanded="true"] svg { transform: rotate(180deg); }

.ch-share--pill {
  width: 2.75rem; height: 2.75rem; padding: 0; border-radius: 50%; flex: none;
  box-shadow: 0 14px 40px -12px rgba(0, 0, 0, .8);
}

.ch-sheet {
  position: absolute; left: 50%; bottom: calc(100% + .6rem);
  width: min(18rem, calc(100vw - 2rem)); padding: .45rem;
  border-radius: 1.2rem; border: 1px solid var(--line2);
  background: rgb(var(--bg-rgb) / .94);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  box-shadow: var(--shadow);
  transform: translate(-50%, 12px) scale(.96); transform-origin: 50% 100%;
  opacity: 0; pointer-events: none; visibility: hidden;
  transition: opacity .25s var(--ease), transform .3s var(--ease), visibility 0s .3s;
}
.ch-sheet.is-open { opacity: 1; transform: translate(-50%, 0) scale(1); pointer-events: auto; visibility: visible; transition-delay: 0s; }
.ch-sheet ol { list-style: none; margin: 0; padding: 0; }
.ch-sheet a {
  display: flex; align-items: center; gap: .8rem; padding: .62rem .75rem; border-radius: .8rem;
  color: var(--ink); text-decoration: none; font-weight: 600; font-size: .95rem; line-height: 1.3;
}
.ch-sheet a:hover, .ch-sheet a:focus-visible { background: rgba(255, 255, 255, .06); }
.ch-sheet .ch-num { font: 700 .7rem/1 var(--font-mono); color: var(--dim); }
.ch-sheet a[aria-current="true"] { background: rgb(var(--primary-rgb) / .1); color: var(--primary); }
.ch-sheet a[aria-current="true"] .ch-num { color: var(--primary); }

/* ---- Toast (just below the website header) ---- */
.ch-toast {
  position: fixed; z-index: 4; left: 50%; top: calc(var(--chrome-h, 0px) + 1rem); margin: 0;
  max-width: calc(100vw - 2rem); padding: .6rem 1rem; border-radius: 999px;
  background: var(--primary); color: var(--on-primary); font: 700 .85rem/1.2 var(--font);
  overflow-wrap: anywhere; text-align: center;
  transform: translate(-50%, -8px); opacity: 0; pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.ch-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

@media print { .ch, .ch-skip { display: none; } }