(disabled) — reset link defaults so both read identically at rest */
text-decoration: none;
color: inherit;
}
.cmap-item--activity { padding-left: 26px; }
/* navigable (navigation:'direct'|'parent') — a real destination, not a
card/button: quiet hover/focus affordance only. Excludes the current
item so its own highlight isn't fought by a hover tint. */
.cmap-item.is-navigable { cursor: pointer; }
.cmap-item.is-navigable:not(.is-current):hover,
.cmap-item.is-navigable:not(.is-current):focus-visible {
background: rgba(169, 232, 207, 0.07);
}
.cmap-item.is-navigable:focus-visible {
outline: 2px solid #A9E8CF;
outline-offset: 2px;
}
/* navigation:'none' — always the planned items; no misleading hover, and
never focusable (a non-link
is already skipped in tab order). */
.cmap-item.is-disabled { cursor: default; }
.cmap-marker {
flex-shrink: 0;
width: 1em;
text-align: center;
color: var(--text-muted, #91AFA4);
font-size: 0.75rem;
line-height: 1.4;
}
/* Activities already carry the ◇ activity-number marker below — the ○
bullet on top of it is redundant noise (an activity is never itself
"current", per the Chapter Map's navigation model), so hierarchy here
comes from indentation + size + weight rather than a second symbol. */
.cmap-item--activity .cmap-marker { display: none; }
.cmap-item-title {
min-width: 0;
font-size: 0.86rem;
font-weight: 500;
line-height: 1.35;
color: var(--text-secondary, #C5D8D1);
}
.cmap-item--primary .cmap-item-title { font-size: 0.9rem; }
/* activity children — smaller and lighter, reading as subordinate to
their parent concept rather than an equally strong destination */
.cmap-item--activity .cmap-item-title { font-size: 0.78rem; font-weight: 400; color: var(--text-muted, #91AFA4); }
.cmap-activity-marker {
flex-shrink: 0;
font-size: 0.7rem;
font-weight: 600;
color: var(--text-muted, #91AFA4);
}
/* current — restrained: a slim mint indicator (never a bright capsule),
a quiet surface tint, and slightly brighter/heavier text. Never
colour-only: the marker glyph itself also changes (●). Mint, not the
lesson stage's aqua accent — this is product navigation chrome. */
.cmap-item.is-current {
background: rgba(169, 232, 207, 0.10);
border-left-color: #A9E8CF;
}
.cmap-item.is-current .cmap-marker,
.cmap-item.is-current .cmap-activity-marker { color: #A9E8CF; }
.cmap-item.is-current .cmap-item-title { color: var(--text, #F7FAF8); font-weight: 600; }
/* planned (individual item within an otherwise-active section, e.g.
Activity 9.4) — mute the label only, never dim the whole row; a lesson
learned earlier in this project when a blanket opacity made a "coming
soon" panel read as broken rather than "not yet". */
.cmap-item-title { transition: none; }
.cmap-item.is-planned .cmap-item-title { color: var(--text-muted, #91AFA4); font-weight: 500; }
.cmap-planned-tag {
margin-left: auto;
flex-shrink: 0;
font-size: 0.66rem;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--text-muted, #91AFA4);
white-space: nowrap;
align-self: center;
}
/* ============================================================
MOBILE (Phase 4): the desktop permanent rail becomes a slide-in
overlay drawer below 900px — same breakpoint the rest of the site
treats as "mobile". The stage keeps essentially the full viewport
width; the Chapter Map is reached through a compact trigger instead.
============================================================ */
@media (max-width: 900px) {
.lesson-overlay { flex-direction: column; }
/* ---- the trigger + mobile top bar (reserves real height above the
stage, so nothing here ever floats over the lesson's own content —
this is also what fixes the pre-existing Activity 9.3 / teleprompter
collision: the tag now lives in this reserved band, not on top of
the iframe). Hidden on desktop (default rule above). ---- */
.lesson-overlay-topbar {
display: flex;
flex-direction: column;
flex-shrink: 0;
z-index: 10;
background: var(--stage-2, #0d3226);
border-bottom: 1px solid rgba(191, 224, 207, 0.16);
padding-top: env(safe-area-inset-top);
}
.lesson-overlay-topbar-row {
display: flex;
align-items: center;
min-height: 52px;
padding: 6px 12px;
box-sizing: border-box;
}
.cmap-mobile-trigger {
display: flex;
align-items: center;
gap: 8px;
min-height: 44px;
padding: 8px 14px;
border: 1px solid rgba(191, 224, 207, 0.22);
border-radius: var(--radius-button, 10px);
background: rgba(9, 32, 24, 0.4);
color: var(--ink-soft, #bfe0cf);
font: inherit;
font-weight: 700;
font-size: 0.85rem;
cursor: pointer;
}
.cmap-mobile-trigger:hover,
.cmap-mobile-trigger:focus-visible { background: rgba(9, 32, 24, 0.7); color: var(--ink, #f2fbf4); }
.cmap-mobile-trigger:focus-visible {
outline: 2px solid #A9E8CF;
outline-offset: 2px;
}
/* the lesson's own floating "✕ Close" chip (site.css, top:10px) lands
inside this same 52px row by simple arithmetic, not DOM placement —
it keeps its existing absolute position/behaviour untouched. */
/* the mobile-only activity tag: a second row inside the reserved top
bar, in normal flow (not position:absolute like its desktop sibling
in .lesson-overlay-body) — so it can never sit on top of the stage. */
.lesson-overlay-topbar .ds-activity-tag--mobile {
position: static;
max-width: none;
opacity: 1;
pointer-events: auto;
padding: 0 12px 10px;
}
/* the desktop copy (absolute, inside .lesson-overlay-body) would now
collide with the reserved top bar's own space — hide it on mobile;
the topbar copy above is the only one visible here. */
.lesson-overlay-body > .ds-activity-tag:not(.ds-activity-tag--mobile) { display: none; }
/* ---- the drawer itself: same .cmap-rail element as desktop, now an
overlay panel instead of a permanent sidebar. Off-screen by default;
.is-drawer-open slides it in (see site/lesson-mount.js). ---- */
.cmap-rail {
display: flex;
position: fixed;
inset: 0 auto 0 0;
z-index: 60;
width: 90vw;
max-width: 400px;
flex-basis: auto;
/* the desktop rail's translucent 14% black tint (base rule above)
relies on sitting beside the stage, not over it — as a drawer it
must fully occlude the lesson content behind it, so it needs a
solid ground of its own instead. */
background: var(--stage-2, #0d3226);
box-shadow: 8px 0 24px rgba(3, 20, 14, 0.35);
transform: translateX(-100%);
transition: transform 0.25s ease;
}
.cmap-rail.is-drawer-open { transform: translateX(0); }
/* Phase 2's collapse mechanics don't apply to a drawer — the drawer is
either fully open or fully closed, never a narrow collapsed sliver.
(JS never adds .is-collapsed on mobile since its only trigger, the
desktop toggle button, is hidden here — these two rules are just
defensive, e.g. against a collapse-then-shrink-viewport edge case.) */
.cmap-rail.is-collapsed { flex-basis: auto; }
.cmap-rail.is-collapsed .cmap-rail-scroll { visibility: visible; }
.cmap-rail-scroll { min-width: 0; }
/* desktop's toggle/collapsed-info chrome swaps for the drawer's own
"Chapter Map ✕" header. */
.cmap-toggle, .cmap-collapsed-info { display: none; }
.cmap-drawer-header {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
@media (prefers-reduced-motion: reduce) {
.cmap-rail { transition: none; }
}
/* backdrop dims the sliver of lesson still visible beside the open
drawer; tapping it closes the drawer (site/lesson-mount.js). */
.cmap-backdrop {
display: block;
position: fixed;
inset: 0;
z-index: 50;
background: rgba(3, 20, 14, 0.55);
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease;
}
.cmap-backdrop.is-visible { opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
.cmap-backdrop { transition: none; }
}
/* generous touch targets throughout the drawer's own item list */
.cmap-item { min-height: 44px; box-sizing: border-box; }
}