/* crumbs.css — breadcrumbs (desktop, tablet) and the compact parent-aware back header (phone). 2026-10-27.
   No card, no box, a transparent background: it sits in the page. Tokens come from theme.css in both apps, so both
   themes follow; the parent text is --ink-subtle (6.9:1 on the dark page, 6.9:1 on white), the current page --ink. */
.bc-wrap { margin: 0 0 12px; min-width: 0; }
.bc { display: block; }
.bc__l { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; min-width: 0; }
.bc__i { display: inline-flex; align-items: center; min-width: 0; max-width: 100%; }
.bc__a { border: 0; background: none; padding: 4px 4px 4px 0; margin: 0; border-radius: 8px; font: inherit; font-size: 14px; font-weight: 500;
  line-height: 1.3; color: var(--ink-subtle, #a6acb5); cursor: pointer; max-width: 28ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bc__a:hover { color: var(--ink, #fff); text-decoration: underline; text-underline-offset: 3px; }
.bc__a:focus-visible, .bc-m__up:focus-visible, .bc-m__p:focus-visible { outline: 2px solid var(--accent, #F7A11A); outline-offset: 2px; }
.bc__sep { width: 14px; height: 14px; margin: 0 4px; flex: none; fill: none; stroke: var(--ink-subtle, #a6acb5); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .75; }
.bc__c { font-size: 14px; font-weight: 700; line-height: 1.3; color: var(--ink, #fff); padding: 4px 0; min-width: 0; overflow-wrap: anywhere; }
.lo__main > .bc-wrap { margin: 0; }   /* the page's own gap spaces it */
.bc-title { margin: 6px 0 0; font-size: 22px; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; color: var(--ink, #fff); overflow-wrap: anywhere; }
.bc-m { display: none; }
:root[dir="rtl"] .bc__sep, [dir="rtl"] .bc__sep, :root[dir="rtl"] .bc-m__up svg, [dir="rtl"] .bc-m__up svg { transform: scaleX(-1); }

/* A phone: one compact header, the way up and the page's name; the full path is not drawn at all. */
@media (max-width: 640px) {
  .bc { display: none; }
  .bc-wrap { margin: 0 0 8px; }
  .bc-m { display: flex; align-items: center; gap: 2px; min-height: 52px; }
  .bc-m__up { flex: none; width: 44px; height: 44px; margin-inline-start: 0; border: 0; background: none; border-radius: 12px; display: grid; place-items: center;
    color: var(--ink, #fff); cursor: pointer; padding: 0; }
  .bc-m__up svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
  .bc-m__txt { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; align-items: flex-start; }
  .bc-m__p { border: 0; background: none; padding: 2px 0; margin: 0; font: inherit; font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--ink-subtle, #a6acb5);
    cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bc-m__t { margin: 0; font-size: 17px; font-weight: 800; line-height: 1.25; color: var(--ink, #fff); overflow-wrap: anywhere; }
  .bc-title { margin: 0 0 0 0; font-size: 20px; }
  .bc-wrap--t .bc-m { min-height: 44px; }
}
@media print { .bc-wrap { display: none !important; } }