/* breadcrumbs.css — the trail breadcrumbs.js renders. Self-contained
   (own tokens, both themes), so it drops into the cabinet pages
   (home.css), Studio (studio.css) and the settings host (app.css) alike.
   The most recent origin reads as a "back" link: an arrow, then a
   vertical hairline before the page's own hierarchy. */

.bc {
  --bc-text: #4a4f57;
  --bc-mute: #646a73;
  --bc-ink: #000000;
  --bc-accent: #4f46e5;
  --bc-rule: #b4bac2;
  --bc-well: rgba(0, 0, 0, .05);
  font: 500 14px/1.4 'Sofia Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  min-width: 0;
}
[data-theme="dark"] .bc {
  --bc-text: #b2b6bd;
  --bc-mute: #8b9099;
  --bc-ink: #f5f6f8;
  --bc-accent: #9a9cff;
  --bc-rule: #4a4e56;
  --bc-well: rgba(255, 255, 255, .06);
}
.bc[hidden] { display: none !important; }

.bc__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 0;
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;
}
.bc__item {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  color: var(--bc-mute);
}
/* "›" between steps of one hierarchy… */
.bc__item + .bc__item::before {
  content: "›";
  flex: none;
  margin: 0 8px;
  color: var(--bc-rule);
  font-weight: 600;
}
/* …and a hairline after the place the visitor came from. */
.bc__item--after-origin::before,
.bc__item--after-origin.bc__item::before {
  content: "";
  width: 1px;
  height: 14px;
  margin: 0 12px;
  background: var(--bc-rule);
}

.bc__link {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 28ch;
  color: var(--bc-text);
  text-decoration: none;
  border-radius: 4px;
}
.bc__link:hover { color: var(--bc-ink); text-decoration: underline; text-underline-offset: 3px; }
.bc__link:focus-visible, .bc__more:focus-visible {
  outline: 2px solid var(--bc-accent);
  outline-offset: 2px;
}
.bc__origin { color: var(--bc-accent); }
.bc__item--back .bc__origin::before { content: "← "; }
.bc__current {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 40ch;
  color: var(--bc-ink);
  font-weight: 600;
}
.bc__more {
  min-width: 28px;
  height: 24px;
  padding: 0 6px;
  border: 0;
  border-radius: 4px;
  background: var(--bc-well);
  color: var(--bc-text);
  font: inherit;
  line-height: 1;
  cursor: pointer;
}
.bc__more:hover { color: var(--bc-ink); }

/* Wide screens show every step; the "…" only stands in on narrow ones. */
.bc__item--more { display: none; }
@media (max-width: 640px) {
  .bc { font-size: 13px; }
  .bc__item--mid { display: none; }
  .bc__item--more { display: inline-flex; }
  .bc__link { max-width: 16ch; }
  .bc__current { max-width: 22ch; }
  .bc__item + .bc__item::before { margin: 0 6px; }
  .bc__item--after-origin::before { margin: 0 9px; }
}

/* In Studio's top bar the trail takes the place of the "Studio" title:
   the same hairline before it, one line, the template name truncated. */
.st-nav__crumbs {
  min-width: 0;
  padding-left: 12px;
  border-left: 1px solid var(--st-keyline-strong, #b4bac2);
}
.st-nav__crumbs.bc { font-family: var(--st-font, inherit); font-size: 13px; }
.st-nav__crumbs .bc__list { flex-wrap: nowrap; }
.st-nav__crumbs .st-nav__title { padding-left: 0; border-left: 0; }
.st-nav__crumbs .bc__current { max-width: 32ch; }
.st-nav__crumbs .bc__link { max-width: 18ch; }
@media (max-width: 1100px) {
  .st-nav__crumbs .bc__item--origin:not(.bc__item--back) { display: none; }
  .st-nav__crumbs .bc__current { max-width: 18ch; }
}
@media (max-width: 600px) {
  .st-nav__crumbs { display: none; }
}

/* Under a page's own top bar (onboarding). */
.bc-wrap { margin: 4px 0 10px; min-height: 22px; }