.page-breadcrumbs { width:min(var(--app-max-width,1200px),calc(100% - 32px)); margin:8px auto 12px; color:var(--muted,#64748b); font-size:16px; }
.admin-main > .page-breadcrumbs,.confirmation-main > .page-breadcrumbs { width:100%; margin:0 0 16px; }
.page-breadcrumbs ol { display:flex; align-items:center; flex-wrap:wrap; gap:4px; list-style:none; margin:0; padding:0; }
.page-breadcrumbs li { display:flex; align-items:center; min-width:0; gap:8px; }
.page-breadcrumbs li + li::before { content:"/"; margin-inline:4px; color:var(--muted,#64748b); }
.page-breadcrumbs a,.page-breadcrumbs button,.page-breadcrumbs [aria-current] { display:inline-flex; align-items:center; min-height:44px; padding:6px 8px; border:0; border-radius:6px; background:transparent; box-shadow:none; font:inherit; line-height:1.5; text-align:start; overflow-wrap:anywhere; }
.page-breadcrumbs a,.page-breadcrumbs button { color:var(--blue,#0057ff); text-decoration:none; cursor:pointer; }
.page-breadcrumbs [aria-current] { color:var(--ink,#101828); font-weight:700; }
.page-breadcrumbs a:hover,.page-breadcrumbs button:hover { background:#eaf1ff; }
.page-breadcrumbs a:focus-visible,.page-breadcrumbs button:focus-visible { outline:3px solid #9dbcfb; outline-offset:2px; }
.page-breadcrumbs .breadcrumb-home { width:44px; justify-content:center; }
.breadcrumb-home svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
@media (max-width:600px) { .page-breadcrumbs { margin-block:4px 8px; } .page-breadcrumbs li { gap:2px; max-width:100%; } }
@media print { .page-breadcrumbs { display:none!important; } }
/* The same trail inside the booking drawer and dialogs: full width of its container, a little smaller, and
   never wider than a phone (long car names wrap). */
.page-breadcrumbs.flow-trail { width:100%; margin:0 0 6px; font-size:14px; }
.page-breadcrumbs.flow-trail :is(button,[aria-current]) { min-height:44px; padding:4px 6px; white-space:nowrap; overflow-wrap:normal; }
/* A level never breaks mid-word; the trail wraps between levels instead, and its column may use the full head. */
.dialog-head > div:has(> .flow-trail) { flex:1 1 auto; min-width:0; }
.page-breadcrumbs.flow-trail li { flex:0 0 auto; max-width:100%; }
.page-breadcrumbs.flow-trail ol { margin-inline-start:-6px; }
/* Dialog heads size every button as a 44px close button; trail levels are text buttons and must size to their label. */
:root :is(.dialog-head,.modal-head,.selection-drawer) .flow-trail button { flex:0 0 auto; width:auto; min-width:0; height:auto; min-height:44px; padding:4px 6px; border:0; border-radius:6px; background:transparent; box-shadow:none; color:var(--blue,#0057ff); font:inherit; font-size:14px; }
:root :is(.dialog-head,.modal-head,.selection-drawer) .flow-trail button:hover { background:#eaf1ff; }