/* breadcrumbs.css: Breadcrumbs (component 13). Owner: group C (P2.T6). Tokens only (L-01), logical properties only (L-04), box-shadow only var(--shadow-overlay) on overlays (L-03).
   One row in --type-table; links secondary, current plain; middle levels collapse under 1024, only the parent under 768. */

[data-component="breadcrumbs"] { display: block; min-inline-size: 0; font: var(--type-table); color: var(--text-secondary); }
.breadcrumbs__list { display: flex; align-items: center; flex-wrap: nowrap; min-inline-size: 0; min-block-size: var(--space-6); margin: 0; padding: 0; list-style: none; }
.breadcrumbs__item { display: flex; align-items: center; min-inline-size: 0; max-inline-size: none; }
.breadcrumbs__crumb {
  display: block;
  max-inline-size: var(--size-field-short);
  overflow: hidden;
  color: var(--text-secondary);
  font: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: none;
}
a.breadcrumbs__crumb:hover { color: var(--text); text-decoration: underline; }
.breadcrumbs__current { color: var(--text); font-weight: 500; }
.breadcrumbs__sep { display: inline-flex; flex: none; margin-inline: var(--space-3); color: var(--text-muted); }
.breadcrumbs__collapse {
  display: inline-grid;
  place-items: center;
  flex: none;
  inline-size: var(--size-target-min);
  block-size: var(--size-target-min);
  padding: 0;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--text-secondary);
}
.breadcrumbs__collapse:hover, .breadcrumbs__collapse[aria-expanded="true"] { background: var(--surface-hover); color: var(--text); }
.breadcrumbs__item--collapse, .breadcrumbs__item--parent { display: none; }
.breadcrumbs__parent-link { display: inline-flex; align-items: center; gap: var(--space-3); }

a.breadcrumbs__crumb[data-force="hover"] { color: var(--text); text-decoration: underline; }
a.breadcrumbs__crumb[data-force="focus-visible"] { outline: var(--border-width-thick) solid var(--focus-ring); outline-offset: var(--space-2); }

/* collapsed forms: by viewport, or forced with data-collapse (the kitchen sink shows them at any width) */
@media (width < 1024px) {
  .breadcrumbs__item[data-level="middle"] { display: none; }
  .breadcrumbs__item--collapse { display: flex; }
}
@media (width < 768px) {
  .breadcrumbs__item { display: none; }
  .breadcrumbs__item--parent { display: flex; }
}
[data-component="breadcrumbs"][data-collapse="middle"] .breadcrumbs__item[data-level="middle"] { display: none; }
[data-component="breadcrumbs"][data-collapse="middle"] .breadcrumbs__item--collapse { display: flex; }
[data-component="breadcrumbs"][data-collapse="parent"] .breadcrumbs__item { display: none; }
[data-component="breadcrumbs"][data-collapse="parent"] .breadcrumbs__item--parent { display: flex; }
[data-component="breadcrumbs"] { flex: 1 1 100%; }