/* LORE console — the breadcrumb every course and build screen draws (crumbs.js, U.crumbs; 2026-10-29).
 *
 * A trail of links that wraps at its parts and never makes the page scroll sideways: each part may shrink (min-width:
 * 0) and a long one is cut with an ellipsis, its whole text in its title. Colours are the theme's tokens only; on the
 * faculty course page (.tl) the timeline's own inks, which the console look maps to the same tokens. The sizes a
 * pointer or a finger must hit are targets.css's, like every other control's.
 */
.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.25rem;
  margin: 0 0 .75rem; min-width: 0; max-width: 100%;
  font-size: var(--fs-small); line-height: var(--lh, 1.5);
}
.crumbs-trail {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0;
  list-style: none; margin: 0; padding: 0; min-width: 0; max-width: 100%;
}
.crumbs-part { display: inline-flex; align-items: center; min-width: 0; max-width: 100%; }
.crumbs-sep { flex: none; margin: 0 .45rem; color: var(--text-dim); }
.crumbs-link, .crumbs-here {
  display: inline-block; min-width: 0; max-width: 44ch;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom;
}
.crumbs-link { color: var(--accent); text-decoration: underline; text-underline-offset: .2em; }
.crumbs-link:hover { text-decoration-thickness: 2px; }
.crumbs-here { color: var(--text); font-weight: var(--fw-semibold, 600); }

/* The links beside the trail: the course seen from its build, the build seen from its course. */
.crumbs-aside { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem; min-width: 0; max-width: 100%; }
.crumbs-off { color: var(--text-dim); min-width: 0; }
.crumbs-why { font-style: italic; }
.crumbs-why::before { content: "("; font-style: normal; }
.crumbs-why::after { content: ")"; font-style: normal; }

/* On the faculty course page, the timeline's inks. */
.tl .crumbs { margin: 0; }
.tl .crumbs-link { color: var(--tl-holo); }
.tl .crumbs-here { color: var(--tl-ink2); }
.tl .crumbs-sep, .tl .crumbs-off { color: var(--tl-muted); }

/* A chip of the course bar that is a link (the course's links to its build). */
.tl a.tl-chip { text-decoration: none; }