/* Universal breadcrumb — sits between the navbar and the page
 * hero. Two visual modes (button + chain) sharing the same
 * .crumb-row strip so vertical rhythm stays consistent across
 * the app regardless of which mode a given page renders.
 */

.crumb-row {
  /* Full-bleed against the page; padding mirrors the existing
   * .max-w-7xl page wrapper so a chain reading "Admin › ..."
   * left-aligns with the page hero below. */
  padding: 12px clamp(16px, 3vw, 32px);
  background: var(--brand-paper);
  border-bottom: 1px solid var(--brand-line-lt);
  font-family: var(--brand-font-body);
}

/* On phone widths the breadcrumb sticks to the top of the viewport
 * so the "go back" affordance stays reachable while scrolling
 * (addresses maintainer feedback: "you go to modules, settings and
 * get lost"). Translucent backdrop so content shows through. */
@media (max-width: 639px) {
  .crumb-row {
    position: sticky;
    top: 0;
    z-index: 30;
    -webkit-backdrop-filter: blur(8px) saturate(140%);
            backdrop-filter: blur(8px) saturate(140%);
    background: color-mix(in srgb, var(--brand-paper) 92%, transparent);
  }
  html.dark .crumb-row {
    background: color-mix(in srgb, var(--brand-navy, #0A1628) 88%, transparent);
  }
}

/* ── Single-parent: button form ────────────────────────────── *
 * Big tap target — 44px tall on phones. Reads as a back-action
 * not a breadcrumb. Inherits the page text colour for the
 * label so it doesn't compete with the hero below. */
.crumb-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* 44px floor per the CLAUDE.md mobile tap-target rule. The
   * button visually reads at ~36px tall but the hit area extends
   * to 44 via the min-height + surrounding pill padding. */
  min-height: 44px;
  padding: 10px 14px 10px 10px;
  border-radius: 999px;
  background: var(--brand-card);
  border: 1px solid var(--brand-line-lt);
  color: var(--brand-ink-2);
  text-decoration: none;
  font: 500 13px/1 var(--brand-font-body);
  letter-spacing: -0.005em;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.crumb-back:hover {
  background: var(--brand-paper-2);
  color: var(--brand-ink);
  border-color: var(--brand-ink-4);
  text-decoration: none;
}
.crumb-back:focus-visible {
  outline: 2px solid var(--brand-teal);
  outline-offset: 2px;
}
.crumb-back-icon {
  flex: 0 0 auto;
  color: currentColor;
  opacity: 0.85;
}

/* ── Multi-parent: chain form ──────────────────────────────── *
 * Inline list of crumbs separated by › glyphs. The current page
 * (terminal segment) reads in ink-1; ancestor links in ink-3 to
 * de-emphasize the "trail" half so the user's eye lands on the
 * current location. */
.crumb-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  font: 500 13px/1.4 var(--brand-font-body);
}
.crumb-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 28px;
}
.crumb-link {
  color: var(--brand-ink-3);
  text-decoration: none;
  padding: 4px 6px;
  border-radius: 6px;
  transition: background 0.12s, color 0.12s;
}
.crumb-link:hover {
  color: var(--brand-ink);
  background: var(--brand-paper-2);
  text-decoration: none;
}
.crumb-link:focus-visible {
  outline: 2px solid var(--brand-teal);
  outline-offset: 1px;
}
.crumb-sep {
  color: var(--brand-ink-4);
  font-weight: 400;
  user-select: none;
}
.crumb-current {
  color: var(--brand-ink);
  padding: 4px 6px;
  font-weight: 500;
}

/* ── iPhone-style mobile fallback for multi-parent chains ── *
 * iOS apps follow a one-step-back navigation pattern — the top-
 * left chevron points at the immediate parent, never a multi-
 * segment trail. Replicate it here: the chain renders for
 * desktop, the .crumb-back-mobile renders for phones, and CSS
 * picks one or the other by viewport width.
 *
 * Single-parent breadcrumbs already use the .crumb-back form
 * everywhere — those don't need the mobile flip since they're
 * already a single back button. Only multi-parent chains
 * carry the .crumb-back-mobile sibling. */
.crumb-back-mobile {
  display: none;  /* hidden by default — desktop shows the chain */
}
@media (max-width: 639px) {
  /* Phone — show the iPhone-style back button, hide the
   * multi-segment chain. The chain still ships in the DOM so
   * a screen reader pulling the page outline still sees the
   * ancestry, but visual users land on the one-tap back
   * affordance. */
  .crumb-row:has(.crumb-back-mobile) .crumb-list {
    display: none;
  }
  .crumb-back-mobile {
    display: inline-flex;
  }
}