/* ===== Navigation (DEC-785..789) ===========================================================================
   One Back control style for every screen: a leading arrow that mirrors in right-to-left languages, the same size
   and place (the start of the screen's header row; in the HUD, the clock box; in results and panels, the action row).
   Breadcrumbs where the depth is more than two; the confirm-to-leave dialog of a live race.
   Loaded after glass.css and before access.css (high contrast wins). No inline styles (CSP); logical properties only.
   ============================================================================================================= */

.nav-back { display: inline-flex; align-items: center; gap: 0.4em; }
/* The arrow is decoration: the alternative text after "/" is empty, so screen readers read the label only. */
.nav-back::before { content: "\2190"; content: "\2190" / ""; font-weight: 800; line-height: 1; }
[dir="rtl"] .nav-back::before { content: "\2192"; content: "\2192" / ""; }

/* The screen header: Back at the start, the title after it (the title still grows to fill the row). */
.screens-head { justify-content: flex-start; flex-wrap: wrap; }
.screens-head h2 { flex: 1 1 auto; min-width: 0; }
.screens-head .nav-back { flex: 0 0 auto; }

/* Breadcrumbs: "Main menu › Games › 100 m" (the current page is plain text, aria-current="page"). */
.nav-crumbs { margin: 6px 0 2px; font-size: 0.85rem; color: var(--ws-text-muted, #d0d8e2); }
.nav-crumbs ol { display: flex; flex-wrap: wrap; gap: 0.25em 0.4em; margin: 0; padding: 0; list-style: none; }
.nav-crumbs li { display: inline-flex; align-items: center; gap: 0.4em; }
.nav-crumbs li + li::before { content: "\203A"; content: "\203A" / ""; opacity: 0.7; }
[dir="rtl"] .nav-crumbs li + li::before { content: "\2039"; content: "\2039" / ""; }
.nav-crumbs li[aria-current="page"] { font-weight: 700; color: var(--ws-text-strong, #f6f8fb); }
.nav-crumb { min-height: 32px; padding: 2px 8px; font-size: 0.85rem; background: transparent; border-color: transparent; text-decoration: underline; text-underline-offset: 3px; }
.nav-crumb:hover { background: rgba(255, 255, 255, 0.08); }

/* Leave a live race? Centred over the race; the race shows through the scrim. */
.nav-confirm {
  position: fixed;
  z-index: 85;
  inset-inline-start: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(460px, calc(100vw - 32px));
  padding: 18px 20px;
  border-radius: var(--ws-radius-m, 14px);
  background: var(--ws-surface-strong, #0b1422);
  box-shadow: 0 0 0 100vmax rgba(3, 6, 10, 0.55), 0 24px 70px rgba(0, 0, 0, 0.6);
  pointer-events: auto;
}
[dir="rtl"] .nav-confirm { transform: translate(50%, -50%); }
.nav-confirm h2 { margin: 0 0 8px; font-size: 1.25rem; }
.nav-confirm p { margin: 0 0 14px; }
.nav-confirm .actions { display: flex; flex-wrap: wrap; gap: 10px; }
.nav-confirm .actions button { flex: 1 1 auto; min-height: 44px; }