/*
 * AppSubheaderComponent (the breadcrumb bar under the header).
 *
 * Sits on the same permanently dark surface the sidebar does — app-shell.css
 * paints wa-page::part(subheader) and re-points what "quiet text" and
 * "normal text" mean inside it, so nothing here names a colour step itself.
 * The vocabulary is app-nav's: the ancestors are the quiet, small,
 * undecorated way back up that .app-nav-up is, and the current crumb is the
 * bright semibold one .app-nav-link--active is.
 *
 * No bottom border: the dark-to-light edge against the main content already
 * closes the bar off, and the light header above brings its own divider.
 */
.app-subheader {
  padding: var(--wa-space-xs) var(--wa-space-m);
  font-size: var(--wa-font-size-s);
}

/* wa-breadcrumb-item's own :host rules set the ancestor crumbs to
   --wa-color-text-link and --wa-font-weight-action; light-DOM rules on the
   host win over a shadow root's :host, which is what lets these replace
   them wholesale. The last-of-type rule has to be spelled out for the same
   reason: overriding `color` on the host also overrides the component's own
   :host(:last-of-type) quiet colour. */
.app-subheader-trail wa-breadcrumb-item {
  color: var(--wa-color-text-quiet);
  font-weight: var(--wa-font-weight-normal);
}

.app-subheader-trail wa-breadcrumb-item:last-of-type {
  color: var(--wa-color-text-normal);
  font-weight: var(--wa-font-weight-semibold);
}

/* Dropping the link colour and weight leaves the ancestors looking like
   plain quiet text, so hover has to carry the whole "this is a link"
   affordance — and WA's own hover can't: --wa-color-mix-hover inverts the
   LIGHTNESS of currentColor, which on light-on-dark text mixes toward
   darker, i.e. dims the very thing being pointed at. Brighten to the
   current crumb's colour instead, and underline, so the cue survives for
   anyone who can't use the colour change. */
.app-subheader-trail wa-breadcrumb-item:not(:last-of-type)::part(label):hover {
  color: var(--wa-color-text-normal);
  text-decoration: underline;
}

/* The current crumb points at the page it is already on. WA's own
   "non-interactive" treatment for the last item only suppresses the
   hover/active colour mix — the pointer cursor is set unconditionally. */
.app-subheader-trail wa-breadcrumb-item:last-of-type::part(label) {
  cursor: default;
}

/* WA's default separator gutter is --wa-space-s on each side, which reads
   loose against a one-line bar this compact. */
.app-subheader-trail wa-breadcrumb-item::part(separator) {
  margin: 0 var(--wa-space-2xs);
}

/* Organisation, project and record names are free text and can be long.
   The label part is already inline-block + nowrap from the component's own
   styles, so max-width + overflow is all an ellipsis needs. Same budget the
   header gives the org name it shows next to the switcher.

   This keeps each crumb short; it does NOT make wrapping impossible, since
   both wa-breadcrumb's own .breadcrumb and wa-page's slotted subheader are
   flex-wrap: wrap. A deep trail on a narrow screen can still take two rows,
   which costs one frame of wrong sticky offset before wa-page's
   ResizeObserver corrects --subheader-height. Hence the mobile rule below
   tightening the ANCESTORS only: the page you are on is the one label worth
   the room. */
.app-subheader-trail wa-breadcrumb-item::part(label) {
  max-width: 20ch;
  overflow: hidden;
  text-overflow: ellipsis;
}

/*
 * wa-page[view="mobile"] tracks wa-page's own measured width rather than
 * the raw viewport — see the note in components/app-header.css. Matches the
 * header's tighter mobile gutter so the trail stays aligned under the brand.
 */
wa-page[view="mobile"] .app-subheader {
  padding-inline: var(--wa-space-s);
}

wa-page[view="mobile"] .app-subheader-trail wa-breadcrumb-item:not(:last-of-type)::part(label) {
  max-width: 12ch;
}