/* where.css — THE WHERE-YOU-ARE BAR (specs/162 §3.7, DEF-U-16; _where.html, nav_shell.where).
   A named back door · the ancestors as object chips with glyphs · chevron separators DRAWN (a
   rotated border at 45 % in the muted colour, 8 px gaps — never the "›" character) · the current
   object is the page's title, never here · "…" folds the middle past four nodes · compact in a
   drawer's bar. 13 px; a soft pill on hover (the house's hover token); a focus ring; both themes
   from the tokens alone; nothing moves on hover (INV-1874). */
.cl-where { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; line-height: 1; color: var(--text-muted); }
.cl-where__back { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px 0 8px; border-radius: 999px; color: var(--text-secondary); font-weight: 500; text-decoration: none; white-space: nowrap; transition: background .12s ease, color .12s ease; }
.cl-where__back:focus-visible { background: var(--bg-surface-2); color: var(--text-primary); }
@media (hover: hover) {
  .cl-where__back:hover { background: var(--bg-surface-2); color: var(--text-primary); }
}
.cl-where__back:focus-visible, .cl-where__chip:focus-visible { outline: 2px solid var(--accent-brief); outline-offset: 2px; }
.cl-where__arrow { flex: none; display: inline-block; width: 8px; height: 8px; margin-left: 2px; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
.cl-where__path { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 0 0 0 10px; list-style: none; min-width: 0; border-left: 1px solid var(--border-default); }
.cl-where__node { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.cl-where__sep { flex: none; display: inline-block; width: 6px; height: 6px; border-top: 1.5px solid var(--text-muted); border-right: 1.5px solid var(--text-muted); transform: rotate(45deg); opacity: .45; }
.cl-where__chip { display: inline-flex; align-items: center; gap: 5px; height: 24px; max-width: 220px; padding: 0 8px; border-radius: 999px; background: transparent; color: var(--text-muted); text-decoration: none; white-space: nowrap; transition: background .12s ease, color .12s ease; }
.cl-where__chip:focus-visible,
.cl-where__chip[data-peek-open="1"] { background: var(--bg-surface-2); color: var(--text-primary); }
@media (hover: hover) {
  .cl-where__chip:hover { background: var(--bg-surface-2); color: var(--text-primary); }
}
.cl-where__chip[data-peek-open="1"] { outline: none; }
.cl-where__chip--mono .cl-where__name { font-family: var(--font-mono); font-size: 12px; }
.cl-where__chip--more { padding: 0 7px; letter-spacing: .08em; cursor: pointer; }
.cl-where__glyph { flex: none; font-style: normal; font-size: 12px; opacity: .6; }
.cl-where__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cl-where__fold { display: inline-flex; align-items: center; gap: 8px; }
.cl-where__fold > summary { list-style: none; }
.cl-where__fold > summary::-webkit-details-marker { display: none; }
.cl-where__fold[open] > summary { display: none; }
.cl-where__hidden { display: inline-flex; align-items: center; gap: 8px; }
/* compact — a drawer's bar: the arrow alone, the path beside it, the drawer's × after */
.cl-where--compact { flex: 1 1 auto; gap: 6px; font-size: 12.5px; }
.cl-where--compact .cl-where__back { height: 28px; width: 28px; padding: 0; justify-content: center; }
.cl-where--compact .cl-where__path { padding-left: 8px; }
.cl-where--compact .cl-where__chip { height: 22px; }
@media (prefers-reduced-motion: reduce) { .cl-where__chip, .cl-where__back { transition: none; } }
@media (max-width: 640px) { .cl-where__path { display: none; } }