/**
 * idf-app-breadcrumb v0.1.0 — App-Header-Breadcrumb (#194)
 *
 * Breadcrumb-Fortsatz hinter dem h1 des App-Headers für Editor-Seiten:
 *   "<App> / <Kontext> / <Titel>"
 * Vorher 5× modul-lokal kopiert (pp-/bp-/sf-/de-/gc-breadcrumb-*).
 *
 * Markup (via $extraLeft des app-header; Modul-Präfix-Klasse bleibt
 * zusätzlich erlaubt — nur für echte Overrides):
 *
 *   <span class="idf-breadcrumb-sep">/</span>
 *   <span class="idf-breadcrumb-label">Projektname</span>     optional, read-only-Kontext
 *   <input type="text" class="idf-breadcrumb-titel" …>        inline-editierbarer Titel
 *
 * Typo = exakt die h1-Typo aus blocks/app-header (28 px / 700 / -0.02em /
 * line-height 1.2), damit App-Name und Titel optisch eine Einheit bilden.
 *
 * Laden: $useBreadcrumb = true (CSS-only-Flag, page-styles).
 */

.idf-app-header .idf-breadcrumb-sep,
.idf-app-header .idf-breadcrumb-label,
.idf-app-header .idf-breadcrumb-titel {
  font-size: var(--font-xxl, 1.75rem);
  font-weight: var(--weight-bold, 700);
  letter-spacing: -0.02em;
  line-height: var(--leading-snug, 1.2);
  font-family: inherit;
}

.idf-app-header .idf-breadcrumb-sep {
  color: var(--mid, #555);
  user-select: none;
  margin: 0 4px;
}

/* Read-only-Kontext-Glied (z. B. Projektname in storyforge). */
.idf-app-header .idf-breadcrumb-label {
  color: var(--mid, #555);
  white-space: nowrap;
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Inline-editierbarer Titel (INPUT mit Per-Feld-PATCH im Modul-JS). */
.idf-app-header .idf-breadcrumb-titel {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  border-bottom: 1.5px solid transparent;
  background: transparent;
  color: var(--ink, #111);
  padding: 0;
  outline: none;
  transition: border-color var(--motion-base, 120ms) var(--ease-default, ease);
}
.idf-app-header .idf-breadcrumb-titel::placeholder { color: var(--soft, #ae9586); }
.idf-app-header .idf-breadcrumb-titel:hover { border-bottom-color: var(--line, #e5e5e5); }
.idf-app-header .idf-breadcrumb-titel:focus { border-bottom-color: var(--primary, #c8134b); }

/* Mobile: h1 schrumpft auf --font-lg (app-header 720-px-Breakpoint) —
   der Breadcrumb schrumpft mit. */
@media (max-width: 720px) {
  .idf-app-header .idf-breadcrumb-sep,
  .idf-app-header .idf-breadcrumb-label,
  .idf-app-header .idf-breadcrumb-titel {
    font-size: var(--font-lg, 1.125rem);
  }
}