.set-navigator { --card-width:100px; container-type:inline-size; min-width:0; }
.set-nav-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; height:32px; font-size:11px; color:var(--muted); }
.set-nav-position { font-variant-numeric:tabular-nums; }
.set-nav-overview { position:relative; height:48px; }
.set-nav-marks { position:absolute; inset:17px 16px; display:flex; gap:2px; }
.set-nav-marks span { flex:1 1 0; min-width:0; border-radius:2px; background:#eae7e7; }
.set-nav-marks[data-dense="true"] { gap:0; }
.set-nav-marks[data-dense="true"] span { border-radius:0; }
.set-nav-marks .once { background:#e8cfd5; }
.set-nav-marks .twice { background:#b36979; }
.set-nav-marks .three { background:var(--wine); }
.set-nav-range { position:absolute; inset:0; width:100%; height:48px; margin:0; padding:0; appearance:none; -webkit-appearance:none; background:transparent; cursor:ew-resize; touch-action:pan-y; }
.set-nav-range::-webkit-slider-runnable-track { height:14px; background:transparent; }
.set-nav-range::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; box-sizing:border-box; width:32px; height:34px; margin-top:-10px; background:white; border:2px solid var(--wine); border-radius:8px; box-shadow:0 2px 5px #842b3914; }
.set-nav-range::-moz-range-track { height:14px; background:transparent; }
.set-nav-range::-moz-range-thumb { box-sizing:border-box; width:32px; height:34px; background:white; border:2px solid var(--wine); border-radius:8px; box-shadow:0 2px 5px #842b3914; }
.set-nav-badge { position:absolute; top:50%; transform:translate(-50%,-50%); width:28px; text-align:center; pointer-events:none; color:var(--wine); font-size:11px; font-weight:600; font-variant-numeric:tabular-nums; }
.set-nav-cards { position:relative; display:flex; gap:8px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scrollbar-width:none; padding:6px 0; -webkit-overflow-scrolling:touch; }
.set-nav-cards::-webkit-scrollbar { display:none; }
.set-nav-card { flex:0 0 var(--card-width); min-width:0; height:62px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; border:2px solid transparent; border-radius:8px; background:#f1f0ef; color:#737176; scroll-snap-align:center; padding:0; transition:border-color .15s,background .15s; }
.set-nav-card strong { font-size:13px; font-weight:500; }
.set-nav-card span { font-size:10px; white-space:nowrap; }
.set-nav-card.once { background:#e8cfd5; color:#652c38; }
.set-nav-card.twice { background:#b36979; color:white; }
.set-nav-card.three { background:var(--wine); color:white; }
.set-nav-card:hover { border-color:#c5a0a9; }
.set-nav-card.is-selected { border-color:var(--wine); }
.set-nav-card.new.is-selected { color:var(--wine); background:var(--soft); }
.set-nav-card.three.is-selected { box-shadow:inset 0 0 0 2px white; }
body[data-focus-mode="keyboard"] .set-nav-card:focus-visible { outline-offset:-5px; }
body[data-focus-mode="keyboard"] .set-nav-range:focus-visible { outline:none; }
body[data-focus-mode="keyboard"] .set-nav-range:focus-visible::-webkit-slider-thumb { box-shadow:0 0 0 3px white,0 0 0 5px #797780; }
body[data-focus-mode="keyboard"] .set-nav-range:focus-visible::-moz-range-thumb { box-shadow:0 0 0 3px white,0 0 0 5px #797780; }
@container(max-width:400px) { .set-nav-cards { --card-width:94px; } .set-nav-card { height:58px; } }
/* The lesson keeps the same whole-level overview in a quiet, fixed-height rail. */
.set-navigator-compact { --card-width:76px; }
.set-navigator-compact .set-nav-heading { display:none; }
.set-navigator-compact .set-nav-overview,.set-navigator-compact .set-nav-range { height:36px; }
.set-navigator-compact .set-nav-marks { top:12px; bottom:12px; gap:min(1px,calc((100cqw - 64px) / var(--set-count,60) * .3)); }
.set-navigator-compact .set-nav-marks span { background:#c9c5c7; }
.set-navigator-compact .set-nav-marks .once { background:#d9b4bf; }
.set-navigator-compact .set-nav-marks .twice { background:#b36979; }
.set-navigator-compact .set-nav-marks .three { background:var(--wine); }
.set-navigator-compact .set-nav-marks[data-dense="true"] { gap:0; }
.set-navigator-compact .set-nav-range::-webkit-slider-thumb { height:36px; margin-top:-11px; border-radius:7px; border-width:1px; border-color:#aa7d88; background:#fcfafb; box-shadow:none; }
.set-navigator-compact .set-nav-range::-moz-range-thumb { height:36px; border-radius:7px; border-width:1px; border-color:#aa7d88; background:#fcfafb; box-shadow:none; }
.set-navigator-compact .set-nav-badge { font-size:10px; color:#794452; }
.set-navigator-compact .set-nav-cards { --card-width:var(--compact-card-width,76px); --fade-left:0px; --fade-right:0px; gap:6px; margin-top:4px; padding:0; mask-image:linear-gradient(to right,transparent,#000 var(--fade-left),#000 calc(100% - var(--fade-right)),transparent); }
.set-navigator-compact .set-nav-cards[data-fade-left="true"] { --fade-left:12px; }
.set-navigator-compact .set-nav-cards[data-fade-right="true"] { --fade-right:12px; }
.set-navigator-compact .set-nav-card { height:36px; gap:0; border-radius:6px; border-width:1px; background:#f7f6f6; }
.set-navigator-compact .set-nav-card.once { background:#f4e9ec; color:#79575f; }
.set-navigator-compact .set-nav-card.twice { background:#e7d2d8; color:#704751; }
.set-navigator-compact .set-nav-card.three { background:#cfabb4; color:#5b2935; }
.set-navigator-overview-only .set-nav-cards { display:none; }
.set-navigator-overview-only .set-nav-marks { left:32px; right:32px; }
.set-navigator-overview-only .set-nav-range::-webkit-slider-thumb { width:64px; }
.set-navigator-overview-only .set-nav-range::-moz-range-thumb { width:64px; }
.set-navigator-overview-only .set-nav-badge { width:60px; font-size:11px; }
.set-navigator-compact .set-nav-card.is-selected { border-color:var(--wine); color:var(--wine); box-shadow:none; }
.set-navigator-compact .set-nav-card.new.is-selected { background:#f9f3f3; }
.set-navigator-compact .set-nav-card:hover { border-color:#b98d97; }
.set-navigator-compact .set-nav-card strong { font-size:11px; }
.set-navigator-compact .set-nav-card span { display:none; }
.set-navigator-compact .set-nav-card[data-available="false"] { color:#a3a0a2; background:#f7f6f6; }
.set-navigator-compact .set-nav-card[data-available="false"].is-selected { color:var(--wine); background:var(--soft); }
@media(prefers-reduced-motion:reduce) { .set-nav-card { transition:none; } }
@media(forced-colors:active) { .set-nav-card.is-selected,.set-nav-range::-webkit-slider-thumb { border-color:Highlight; } }

/* Completion colours are shared with the dark-mode progress legend. */
:root[data-theme="dark"] .set-nav-marks span { background:#303239; }
:root[data-theme="dark"] .set-nav-marks .once { background:#65424d; }
:root[data-theme="dark"] .set-nav-marks .twice { background:#a76d7e; }
:root[data-theme="dark"] .set-nav-marks .three { background:var(--wine); }
:root[data-theme="dark"] .set-navigator-compact .set-nav-marks span { background:#64646e; }
:root[data-theme="dark"] .set-navigator-compact .set-nav-marks .once { background:#88606e; }
:root[data-theme="dark"] .set-navigator-compact .set-nav-marks .twice { background:#a76d7e; }
:root[data-theme="dark"] .set-navigator-compact .set-nav-marks .three { background:var(--wine); }
:root[data-theme="dark"] .set-nav-range::-webkit-slider-thumb { background:var(--paper); border-color:var(--wine); box-shadow:0 2px 5px #0003; }
:root[data-theme="dark"] .set-nav-range::-moz-range-thumb { background:var(--paper); border-color:var(--wine); box-shadow:0 2px 5px #0003; }
:root[data-theme="dark"] .set-nav-card { background:#303239; color:#b9bec6; }
:root[data-theme="dark"] .set-nav-card.once { background:#65424d; color:#f1dbe1; }
:root[data-theme="dark"] .set-nav-card.twice { background:#a76d7e; color:#fff5f8; }
:root[data-theme="dark"] .set-nav-card.three { background:var(--wine); color:#351c24; }
:root[data-theme="dark"] .set-nav-card:hover { border-color:#ad7988; }
:root[data-theme="dark"] .set-nav-card.is-selected { border-color:var(--wine); }
:root[data-theme="dark"] .set-nav-card.new.is-selected { color:var(--wine); background:var(--soft); }
:root[data-theme="dark"] .set-nav-card.three.is-selected { box-shadow:inset 0 0 0 2px var(--paper); }
:root[data-theme="dark"] body[data-focus-mode="keyboard"] .set-nav-range:focus-visible::-webkit-slider-thumb { box-shadow:0 0 0 3px var(--paper),0 0 0 5px #b9bec6; }
:root[data-theme="dark"] body[data-focus-mode="keyboard"] .set-nav-range:focus-visible::-moz-range-thumb { box-shadow:0 0 0 3px var(--paper),0 0 0 5px #b9bec6; }
:root[data-theme="dark"] .set-navigator-compact .set-nav-card { background:#24272d; }
:root[data-theme="dark"] .set-navigator-compact .set-nav-card.once { background:#3c2c33; color:#cba5af; }
:root[data-theme="dark"] .set-navigator-compact .set-nav-card.twice { background:#59404a; color:#e4b9c5; }
:root[data-theme="dark"] .set-navigator-compact .set-nav-card.three { background:#805763; color:#f2dbe2; }
:root[data-theme="dark"] .set-navigator-compact .set-nav-range::-webkit-slider-thumb { background:var(--paper); border-color:#ad7988; box-shadow:none; }
:root[data-theme="dark"] .set-navigator-compact .set-nav-range::-moz-range-thumb { background:var(--paper); border-color:#ad7988; box-shadow:none; }
:root[data-theme="dark"] .set-navigator-compact .set-nav-badge { color:var(--wine); }
:root[data-theme="dark"] .set-navigator-compact .set-nav-card.is-selected { color:var(--wine); box-shadow:none; }
:root[data-theme="dark"] .set-navigator-compact .set-nav-card.new.is-selected { background:var(--soft); }
:root[data-theme="dark"] .set-navigator-compact .set-nav-card[data-available="false"] { background:#24272d; color:#89868d; }
:root[data-theme="dark"] .set-navigator-compact .set-nav-card[data-available="false"].is-selected { background:var(--soft); color:var(--wine); }