/* Case study reading guide. Shared by every case study. Pairs with js/case-nav.js.
   Uses the tokens from case.css: --paper, --ink, --ink-soft, --line, --line-strong, --rust, fonts.

   One left-anchored line that sticks under the site header, so content keeps the full width:
   02 · Discovery   A short, muted descriptor                                        */

:root {
  --cn-bar-h: 46px;
  /* Where a section lands when you jump to it: below the site header and below this bar. */
  --cn-offset: calc(var(--topbar-h) + var(--cn-bar-h) + 18px);
}
[data-nav-section] { scroll-margin-top: var(--cn-offset); }
[data-nav-section]:focus { outline: none; }

.cn-bar {
  position: sticky; top: var(--topbar-h); z-index: 25;
  height: var(--cn-bar-h);
  background: var(--paper); border-bottom: 1px solid var(--line);
}
.cn-btn {
  display: flex; gap: 7px;
  max-width: 100%; height: 100%; padding: 0;
  background: none; border: 0; font: inherit; color: var(--ink); text-align: left; cursor: pointer;
  align-items: center;
}
.cn-btn:focus-visible, .cn-menu-link:focus-visible { outline: 2px solid var(--rust); outline-offset: 3px; border-radius: 3px; }
.cn-num { flex: none; font-family: var(--font-mono); font-size: 0.78rem; color: var(--rust); }
.cn-title { flex: none; font-family: var(--font-body); font-weight: 500; font-size: 0.95rem; color: var(--ink); }
.cn-desc { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.84rem; color: var(--ink-soft); }
.cn-chev { flex: none; width: 15px; height: 15px; color: var(--ink-soft); transition: transform 0.2s ease; }
.cn-btn[aria-expanded="true"] .cn-chev { transform: rotate(180deg); }
.cn-btn:hover .cn-chev { color: var(--ink); }

/* How far through the story you are */
.cn-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; }
.cn-progress span { display: block; height: 100%; background: var(--rust); transform-origin: 0 50%; transform: scaleX(var(--cn-overall, 0)); }

/* Section list, opened from the bar */
.cn-menu {
  position: absolute; top: 100%; left: 0;
  width: min(460px, 100%);
  margin: 0; padding: 4px 18px 8px; list-style: none;
  background: var(--paper); border: 1px solid var(--line-strong); border-top: 0; border-radius: 0 0 8px 8px;
  box-shadow: 0 18px 40px rgba(23, 22, 15, 0.14);
  max-height: calc(100vh - var(--topbar-h) - var(--cn-bar-h) - 16px); overflow-y: auto;
}
.cn-menu[hidden] { display: none; }
.cn-menu-item + .cn-menu-item .cn-menu-link { border-top: 1px solid var(--line); }
.cn-menu-link { display: flex; align-items: baseline; gap: 12px; padding: 11px 0; text-decoration: none; color: var(--ink-soft); }
.cn-menu-num { flex: none; font-family: var(--font-mono); font-size: 0.74rem; }
.cn-menu-text { display: block; min-width: 0; }
.cn-menu-title { display: block; font-weight: 500; font-size: 0.95rem; }
.cn-menu-desc { display: block; margin-top: 1px; font-size: 0.82rem; line-height: 1.35; color: var(--ink-soft); }
.cn-menu-link:hover .cn-menu-title { color: var(--rust); }
.cn-menu-item[data-state="done"] .cn-menu-title { color: var(--ink); }
.cn-menu-item[data-state="active"] .cn-menu-num, .cn-menu-item[data-state="active"] .cn-menu-title { color: var(--rust-strong); }

@media (max-width: 719px) {
  :root { --cn-bar-h: 44px; }
  .cn-bar { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
  .cn-desc { display: none; }
  .cn-menu { left: 0; width: 100%; padding-inline: var(--gutter); border-radius: 0; border-left: 0; border-right: 0; }
}
@media (prefers-reduced-motion: reduce) { .cn-chev { transition: none; } }