/* ==========================================================================
   .tp-breadcrumb — P1.F2.T3
   ©2026 Vexstorm Studios – All Rights Reserved

   The trail the `breadcrumbs` block renders. A <nav aria-label="Breadcrumb">
   wrapping an ordered list, with the final crumb carrying aria-current="page"
   and no link — it is where the user already is.

   Elements   __list  __item  __link  __current  __separator
   States     :hover  :active  :focus-visible

   The separator is decorative and is marked aria-hidden in the template, so a
   screen reader reads "Observations, OBS-2026-000123" rather than
   "Observations slash OBS dash 2026 dash 000123".
   ========================================================================== */

.tp-breadcrumb {
  margin-bottom: var(--tp-space-4);
  min-width: 0;
}

.tp-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tp-space-1);
  font-size: var(--tp-text-sm);
}

.tp-breadcrumb__item {
  display: inline-flex;
  align-items: center;
  gap: var(--tp-space-1);
  min-width: 0;
}

.tp-breadcrumb__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tp-space-target-min);
  padding: var(--tp-space-1) var(--tp-space-2);
  margin-inline: calc(-1 * var(--tp-space-2));
  border-radius: var(--tp-radius-sm);
  color: var(--tp-color-text-muted);
  text-decoration: none;
  white-space: nowrap;
}

.tp-breadcrumb__link:hover {
  background-color: var(--tp-color-surface-sunken);
  color: var(--tp-color-text-primary);
  text-decoration: underline;
}

.tp-breadcrumb__link:active {
  background-color: var(--tp-color-accent-subtle);
}

.tp-breadcrumb__link:focus-visible {
  outline-offset: 0;
}

/* The last crumb. Not a link, and given enough weight that the trail reads as
   "you are here" rather than as a row of equal choices. Truncated rather than
   wrapped, because an observation subject can be long and the trail must stay
   one line tall. */
.tp-breadcrumb__current {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: var(--tp-space-prose-max);
  min-height: var(--tp-space-target-min);
  color: var(--tp-color-text-primary);
  font-weight: var(--tp-weight-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tp-breadcrumb__separator {
  flex: none;
  width: var(--tp-space-icon);
  height: var(--tp-space-icon);
  color: var(--tp-color-text-muted);
}