/* ---- the agenda: a sticky strip of the page's sections, each with its own progress bar ---- */
.agenda { position: sticky; top: 80px; z-index: 29; background: color-mix(in srgb, var(--background-2) 92%, transparent); backdrop-filter: blur(10px); border-bottom: var(--border-w) solid var(--border-subtle); }
.agenda ol { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--sp-5); }
.agenda li { flex: 1 1 0; min-width: 0; }
.agenda a { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: center; padding: 14px 0 12px; color: var(--text); text-decoration: none; transition: color .2s ease; }
.agenda a:hover { color: var(--text-heading); }
.agenda a:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: 3px; }
.agenda .n { color: var(--link); }
.agenda .t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agenda .bar { grid-column: 1 / 3; display: block; height: 2px; background: var(--border-subtle); border-radius: 1px; overflow: hidden; }
.agenda .bar b { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: var(--link); transition: width .12s linear; }
.agenda li.cur a { color: var(--text-heading); }
.agenda li.done .n { color: var(--text); }
.sec, .cta, .contact { scroll-margin-top: 132px; }  /* site nav 80 + agenda 52, so a click lands with the heading clear of both */
@media (max-width: 860px) { .agenda ol { gap: var(--sp-3); } .agenda .t { display: none; } .agenda a { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .agenda .bar b { transition: none; } }