tutorial_location_crumb

Tutorial detail chrome shows a compact location trail: catalog → course → lesson → slide.
Hierarchy must be obvious without a wide single-line title dump.
Layout: each tier is a stacked chip — role ( and optional completion control ) on the top row;
title / index value muted underneath. Titles colour up on hover, focus-within, or when the peer menu is open.
* * Folder navigation: * * each tier acts like a path segment / folder. Hover or focus reveals a peer menu
for that level of the tree so the user can jump without using the transport row:
- catalog → courses ( enter first lesson of the chosen course, or the catalog index )
- course → peer courses
- lesson → peer lessons in the active course
- slide → peer slides in the active lesson ( updates the embedded player / `?slide=` )
Current peer is marked; menus stay keyboard-reachable via focus-within.
* * Sizing: * * the crumb container grows to fit text; wrap before truncating. Ellipsis only as a last resort
on very narrow viewports — do not cap chip width so aggressively that titles ellipsize while space remains.
Course deep-links also exist at `/tutorials/#course-<series>`; catalog at `/tutorials/`.
Slide shows `n/total` and updates live with the embedded player.
Completion toggles stay on the role row.
The crumb lesson tier always shows the * * current * * lesson only — it must not share hover / preview
state with the transport lesson step dots. Step-dot hover may preview a title near the dots, never in the crumb.

Status: done

Interactive page: tutorial_location_crumb