/* RETAIL-03: Retail's own styles for the RMK Connect pages. Loaded after the hub's rmk_ui styles, only with
   RMK_CONNECT_UI on (layouts/_head.html and rmk_connect/base.html). Every rule is under .rmk-body, the body class
   that only RMK Connect pages carry, so nothing here can reach a Retail page with the switch off. The hub's rmk_ui
   files are synced from the hub and never edited here. */

/* Phone check at 360 px: the header (wordmark, role chip, bell, app switcher) was up to 27 px too wide. */
.rmk-body .rmk-header__actions { min-width: 0; }
.rmk-body .rmk-rolechip { min-width: 0; }
.rmk-body .rmk-rolechip > summary { max-width: 42vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 420px) {
  .rmk-body .rmk-header__inner { gap: 8px; }
  /* Keep the RMK mark; the words "RMK Connect" are in the link's label for screen readers. */
  .rmk-body .rmk-wordmark > span[aria-hidden="true"]:not(.rmk-wordmark__mark) { display: none; }
}

/* The greeting band lost the page's side margin (.rmk-greet resets the container's padding). */
.rmk-body .rmk-greet { padding-left: var(--rmk-gutter); padding-right: var(--rmk-gutter); }

/* Home windows and the start view (were inline styles). */
.rmk-body .rmk-home__body { padding-top: 16px; }
.rmk-start { max-width: 640px; }
.rmk-start__offer { padding: 16px; }
.rmk-journey__fill.rmk-fill-0 { width: 0; }
.rmk-journey__fill.rmk-fill-1 { width: 10%; }
.rmk-journey__fill.rmk-fill-2 { width: 20%; }
.rmk-journey__fill.rmk-fill-3 { width: 30%; }
.rmk-journey__fill.rmk-fill-4 { width: 40%; }
.rmk-journey__fill.rmk-fill-5 { width: 50%; }
.rmk-journey__fill.rmk-fill-6 { width: 60%; }
.rmk-journey__fill.rmk-fill-7 { width: 70%; }
.rmk-journey__fill.rmk-fill-8 { width: 80%; }
.rmk-journey__fill.rmk-fill-9 { width: 90%; }
.rmk-journey__fill.rmk-fill-10 { width: 100%; }