/*
 * Marine Rescue UAE - website styles (W-01b; map, markers and status line W-02a; zone, reach
 * circles, layer control and legend W-02b; vessel popup W-03a; Locate me, the me marker, the
 * distance row, the hint and the zone modal W-03b; help page W-04a; flowchart W-04b; privacy and
 * terms W-05; Arabic line heights W-06a; mobile pass W-06b).
 *
 * Load order (includes/layout.php, WEBSITE.md "Vendored libraries"):
 * bootstrap(.rtl).min.css -> tokens.css -> leaflet.css (map page) -> site.css.
 *
 * Rules (DESIGN.md):
 * - Colours only through the --mr-* tokens of tokens.css. Alpha variants use color-mix() on a
 *   token, so no new colour value appears here.
 * - Logical properties only (margin-inline-start, inset-inline-end, text-align: start). No
 *   physical left/right, so the Arabic page (dir="rtl", bootstrap.rtl.min.css) mirrors itself.
 * - System fonts only, no web fonts. Western digits come from the page scripts (MR.locale).
 * - Touch targets 44 px, 48 px on touch screens. Focus ring 3 px mr-blue (white on the header).
 */

/* ------------------------------------------------------------------ Bootstrap on the tokens */

:root {
  --mr-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mr-font-ar: system-ui, "SF Arabic", "Geeza Pro", "Noto Sans Arabic", Tahoma, sans-serif;
  --mr-header-h: 56px;
  --mr-target: 44px;
  --mr-shadow: 0 2px 8px color-mix(in srgb, var(--mr-ink) 16%, transparent);

  --bs-body-font-family: var(--mr-font);
  --bs-body-font-size: 1rem;
  --bs-body-line-height: 1.5;
  --bs-body-color: var(--mr-ink);
  --bs-body-bg: var(--mr-canvas);
  --bs-emphasis-color: var(--mr-ink);
  --bs-secondary-color: var(--mr-muted);
  --bs-border-color: var(--mr-line);
  --bs-link-color: var(--mr-blue);
  --bs-link-hover-color: var(--mr-blue-dark);
  --bs-heading-color: var(--mr-ink);
}

/* Arabic: the system Arabic font and a taller line (DESIGN.md "Typography"). */
:root:lang(ar) {
  --bs-body-font-family: var(--mr-font-ar);
  --bs-body-line-height: 1.7;
}

@media (pointer: coarse) {
  :root {
    --mr-target: 48px;
  }
}

a {
  color: var(--mr-blue);
}

a:hover {
  color: var(--mr-blue-dark);
}

/* ------------------------------------------------------------------ focus */

:focus-visible {
  outline: 3px solid var(--mr-blue);
  outline-offset: 2px;
  box-shadow: none;
}

.mr-header :focus-visible {
  outline-color: var(--mr-surface);
}

.mr-header .dropdown-menu :focus-visible {
  outline-color: var(--mr-blue);
  outline-offset: -3px;
}

/* <main tabindex="-1"> is only a skip-link target, never a visible focus stop. */
.mr-main:focus {
  outline: none;
}

.mr-skip.visually-hidden-focusable:focus,
.mr-skip.visually-hidden-focusable:focus-within {
  position: absolute !important;
  inset-block-start: 8px;
  inset-inline-start: 8px;
  z-index: 1100;
  padding: 10px 16px;
  border-radius: 12px;
  background: var(--mr-surface);
  color: var(--mr-blue);
  font-weight: 600;
  box-shadow: var(--mr-shadow);
}

/* ------------------------------------------------------------------ header bar */

.mr-header {
  position: relative;
  z-index: 1030;              /* above the map panes and their controls */
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
  block-size: var(--mr-header-h);
  padding-inline: 16px;
  /* Owner 2026-10-08 (ADR): red-to-burgundy gradient in the logo's colours; the bright end sits
     next to the logo (inline-start). White text on it stays >= 5.8:1 (WCAG AA). */
  background-color: var(--mr-red);
  background-image: linear-gradient(to right, var(--mr-logo-red) 0%, var(--mr-red) 55%, var(--mr-red-dark) 100%);
  color: var(--mr-surface);
}

[dir="rtl"] .mr-header {
  background-image: linear-gradient(to left, var(--mr-logo-red) 0%, var(--mr-red) 55%, var(--mr-red-dark) 100%);
}

.mr-brand {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 12px;                  /* clear space around the icon: at least 25 % of 36 */
  min-inline-size: var(--mr-target);   /* below 768 px the link is the 36 px icon alone */
  min-block-size: var(--mr-target);
  border-radius: 6px;
  color: var(--mr-surface);
  text-decoration: none;
}

.mr-brand-icon {
  display: block;
  inline-size: 36px;
  block-size: 36px;
  border-radius: 8px;
}

.mr-brand-wordmark {
  display: block;
  inline-size: auto;
  block-size: 20px;
}

.mr-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-inline-start: auto;
}

.mr-stores {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mr-store {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: var(--mr-target);
  min-block-size: var(--mr-target);
  border-radius: 6px;
  color: var(--mr-surface);
}

.mr-store:hover {
  color: var(--mr-surface);
}

/* Official badges (assets/img/badges/SOURCES.txt): never recoloured, cropped or animated; both
   40 px visible height. The Google PNG carries its own clear space (41 of its 250 px on every
   side, about 10 px at this size), so it is drawn 60 px tall for a 40 px badge. The negative
   margins only shrink its layout box (40 px tall, 6 px less on each side) so the header fits from
   576 px; its transparent padding still paints and may overhang the 56 px header by 2 px. The
   visible gap to Apple's badge and to the Language button stays 8 + 4 = 12 px, more than the
   clear space either brand asks for (1/4 and 1/10 of the badge height). */
.mr-store-badge {
  display: block;
  flex: none;
  max-inline-size: none;
  inline-size: auto;
  block-size: 40px;
}

.mr-store-badge-google {
  block-size: 60px;
  margin-block: -10px;
  margin-inline: -6px;
}

.mr-icon {
  display: block;
  flex: none;
  inline-size: 20px;
  block-size: 20px;
}

.mr-store-glyph {
  display: none;
  inline-size: 24px;
  block-size: 24px;
}

/* Header buttons and links: Language and Help. */
.mr-hbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-inline-size: var(--mr-target);
  min-block-size: var(--mr-target);
  padding-block: 0;
  padding-inline: 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--mr-surface);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.mr-hbtn:hover,
.mr-hbtn:active,
.mr-hbtn[aria-expanded="true"],
.mr-hbtn[aria-current="page"],
.mr-store:active {
  background: rgba(0, 0, 0, 0.22);   /* darkens the red gradient underneath */
  color: var(--mr-surface);
}

/* No JavaScript: a direct link to the other language replaces the dropdown (layout.php). A block
   flex box, so the <noscript> wrapper adds no line box around it. */
.mr-lang-nojs {
  display: flex;
}

/* Language menu: "English" and "العربية", each in its own language. */
.mr-header .dropdown-menu {
  --bs-dropdown-min-width: 10rem;
  --bs-dropdown-padding-y: 4px;
  --bs-dropdown-font-size: 1rem;
  --bs-dropdown-color: var(--mr-ink);
  --bs-dropdown-bg: var(--mr-surface);
  --bs-dropdown-border-color: var(--mr-line);
  --bs-dropdown-border-radius: 12px;
  --bs-dropdown-inner-border-radius: 11px;
  --bs-dropdown-link-color: var(--mr-ink);
  --bs-dropdown-link-hover-color: var(--mr-ink);
  --bs-dropdown-link-hover-bg: var(--mr-blue-tint);
  --bs-dropdown-link-active-color: var(--mr-surface);
  --bs-dropdown-link-active-bg: var(--mr-blue);
  --bs-dropdown-item-padding-x: 16px;
  --bs-dropdown-item-padding-y: 8px;
  box-shadow: var(--mr-shadow);
}

.mr-header .dropdown-item {
  display: flex;
  align-items: center;
  min-block-size: var(--mr-target);
  text-align: start;
}

/* Below 768 px: the icon alone, without the wordmark. */
@media (max-width: 767.98px) {
  .mr-brand-wordmark {
    display: none;
  }
}

/* Below 576 px: store badges become 24 px glyphs in 48 px targets; the Language label is
   visually hidden (it stays the button's accessible name). */
@media (max-width: 575.98px) {
  .mr-header {
    gap: 4px;
  }

  .mr-nav,
  .mr-stores {
    gap: 4px;
  }

  .mr-store {
    min-inline-size: 48px;
    min-block-size: 48px;
  }

  .mr-store-badge {
    display: none;
  }

  .mr-store-glyph {
    display: block;
  }

  .mr-lang .mr-hbtn,
  .mr-lang-nojs {
    min-inline-size: 48px;
    min-block-size: 48px;
    padding-inline: 0;
  }

  .mr-lang .dropdown-toggle::after {
    display: none;
  }

  .mr-hlabel {
    position: absolute !important;
    inline-size: 1px !important;
    block-size: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  .mr-help {
    min-block-size: 48px;
    padding-inline: 8px;
  }
}

/* ------------------------------------------------------------------ fullscreen map page */

.mr-fullscreen {
  display: flex;
  flex-direction: column;
  block-size: 100vh;
  block-size: 100dvh;
  overflow: hidden;
}

.mr-fullscreen .mr-main {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  min-block-size: 0;
}

.mr-map {
  position: relative;
  isolation: isolate;         /* keeps Leaflet's pane and control z-indexes under the header */
  flex: 1 1 auto;
  min-block-size: 0;
  background: var(--mr-canvas);
}

.mr-noscript {
  max-inline-size: 36rem;
  margin: 16px;
  padding: 12px 16px;
  border: 1px solid var(--mr-line);
  border-radius: 12px;
  background: var(--mr-surface);
  color: var(--mr-ink);
}

/* ------------------------------------------------------------------ Leaflet on the tokens (W-02a) */

/* leaflet.css sets its own font, grey background and link colour: back to the page's. */
.mr-map.leaflet-container {
  background: var(--mr-canvas);
  font-family: inherit;
}

.mr-map.leaflet-container a {
  color: var(--mr-blue);
}

/* The map fills the page, so its focus ring is drawn inside it. */
.mr-map.leaflet-container:focus-visible {
  outline-offset: -3px;
}

/* Map controls (zoom): 44 px, 48 px on touch screens (DESIGN.md "Touch targets"). */
.mr-map .leaflet-bar,
.mr-map.leaflet-touch .leaflet-bar {
  border: 1px solid var(--mr-muted);
  box-shadow: var(--mr-shadow);
}

.mr-map .leaflet-bar a,
.mr-map.leaflet-touch .leaflet-bar a {
  inline-size: var(--mr-target);
  block-size: var(--mr-target);
  border-block-end-color: var(--mr-line);
  background-color: var(--mr-surface);
  color: var(--mr-blue);
  line-height: var(--mr-target);
}

.mr-map .leaflet-bar a:hover,
.mr-map .leaflet-bar a:focus {
  background-color: var(--mr-blue-tint);
  color: var(--mr-blue-dark);
}

.mr-map .leaflet-bar a.leaflet-disabled {
  background-color: var(--mr-surface);
  color: color-mix(in srgb, var(--mr-muted) 40%, transparent);
}

.mr-map .leaflet-control-attribution {
  background: color-mix(in srgb, var(--mr-surface) 92%, transparent);
  color: var(--mr-ink);
}

/* ------------------------------------------------------------------ vessel markers (W-02a) */

/* DESIGN.md "Map marker specs". The divIcon box is the hit area (--mr-target, set by map.js);
   the halo and the dot share its single grid cell, centred, the dot on top. No physical offsets,
   so nothing moves in RTL. Stale markers get 50 % opacity from Leaflet (map.js). */
.mr-vessel {
  display: grid;
  place-items: center;
  border-radius: 50%;            /* round focus ring */
}

.mr-vessel > span {
  display: block;
  grid-area: 1 / 1;
  box-sizing: border-box;
  border-radius: 50%;
}

/* Distress: dot 22 = fill 16 + a 3 px white border. */
.mr-vessel-dot {
  inline-size: 22px;
  block-size: 22px;
  border: 3px solid var(--mr-surface);
  background: var(--mr-red);
}

/* Helper: dot 18 = fill 14 + a 2 px white border. */
.mr-vessel-helper .mr-vessel-dot {
  inline-size: 18px;
  block-size: 18px;
  border-width: 2px;
  background: var(--mr-blue);
}

/* Distress halo: under the dot, grows from 22 to 2.2× (≈ 48) while its opacity falls
   0.45 → 0, 1.6 s, ease-out, repeating at once. Only transform and opacity animate. */
.mr-vessel-halo {
  inline-size: 22px;
  block-size: 22px;
  background: var(--mr-red);
  opacity: 0;
  pointer-events: none;
  animation: mr-halo 1.6s ease-out infinite;
}

@keyframes mr-halo {
  from {
    opacity: 0.45;
    transform: scale(1);
  }

  to {
    opacity: 0;
    transform: scale(2.2);
  }
}

/* Reduced motion: a static circle of 36 at 0.25. */
@media (prefers-reduced-motion: reduce) {
  .mr-vessel-halo {
    inline-size: 36px;
    block-size: 36px;
    opacity: 0.25;
    animation: none;
  }
}

/* ------------------------------------------------------------------ status line (W-02a) */

/* A pill at the top centre of the map (DESIGN.md "Status line (website)"): mr-surface at 92 %,
   mr-ink Caption text, an 8 px red or blue dot before each count. Clear of the 44/48 px controls
   in the top corners; segments wrap as a whole. Not a live region (it changes every 60 s).
   After a failed poll it takes the offline look (mr-ink at 85 %, white text). */
.mr-status {
  position: absolute;
  z-index: 900;                  /* inside #map: above Leaflet's map pane (400), below its
                                    control corners (1000), so an open layer list covers it */
  inset-block-start: 10px;
  inset-inline: 0;
  inline-size: fit-content;
  max-inline-size: calc(100% - 2 * (var(--mr-target) + 24px));
  margin-inline: auto;
  padding-block: 6px;
  padding-inline: 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--mr-surface) 92%, transparent);
  color: var(--mr-ink);
  box-shadow: var(--mr-shadow);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  text-align: center;
  pointer-events: none;          /* never blocks dragging the map */
}

.mr-status.is-offline {
  background: color-mix(in srgb, var(--mr-ink) 85%, transparent);
  color: var(--mr-surface);
}

.mr-status-seg {
  display: inline-block;
}

.mr-status-dot {
  display: inline-block;
  inline-size: 8px;
  block-size: 8px;
  margin-inline-end: 4px;
  border-radius: 50%;
  vertical-align: 0.05em;
}

.mr-status-dot-distress {
  background: var(--mr-red);
}

.mr-status-dot-helper {
  background: var(--mr-blue);
}


/* ------------------------------------------------------------------ zone and reach circles (W-02b) */

/* DESIGN.md "Map marker specs". map.js draws both paths in currentColor with the spec's widths,
   opacities and dashes; only the token colour is set here. Not interactive (map.js). */
.mr-map .mr-zone {
  color: var(--mr-muted);        /* 1.5 px, 60 %, dashed 8 / 6, no fill */
}

.mr-map .mr-reach {
  color: var(--mr-green);        /* 2 px solid, fill 10 %; both halved when stale */
}

/* ------------------------------------------------------------------ layer control (W-02b) */

/* Leaflet's layers control at the top end (DESIGN.md "Legend and layers"). Collapsed on narrow
   screens to a Layers button like the zoom buttons (44 / 48 px, mr-muted border, mr-blue 22 px
   icon instead of layers.png); expanded it is a card of checkboxes, each row a 44 / 48 px target. */
.mr-map.leaflet-container .leaflet-control-layers {
  border: 1px solid var(--mr-muted);
  border-radius: 4px;
  background: color-mix(in srgb, var(--mr-surface) 95%, transparent);
  color: var(--mr-ink);
  box-shadow: var(--mr-shadow);
  line-height: var(--bs-body-line-height);
}

.mr-map.leaflet-container .leaflet-control-layers-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--mr-target);
  block-size: var(--mr-target);
  border-radius: 3px;
  background: var(--mr-surface);
  color: var(--mr-blue);
}

.mr-map.leaflet-container .leaflet-control-layers-toggle:hover {
  background: var(--mr-blue-tint);
  color: var(--mr-blue-dark);
}

.mr-map.leaflet-container .leaflet-control-layers-expanded .leaflet-control-layers-toggle {
  display: none;
}

.mr-layers-icon {
  display: block;
  inline-size: 22px;
  block-size: 22px;
}

.mr-map.leaflet-container .leaflet-control-layers-expanded {
  padding-block: 2px;
  padding-inline: 12px;
}

.mr-map.leaflet-container .leaflet-control-layers label {
  margin: 0;
  font-size: 14px;               /* Secondary: labels */
  cursor: pointer;
}

.mr-map.leaflet-container .leaflet-control-layers label > span {
  display: flex;
  align-items: center;
  gap: 8px;
  min-block-size: var(--mr-target);
}

.mr-map.leaflet-container .leaflet-control-layers-selector {
  position: static;
  flex: none;
  inline-size: 18px;
  block-size: 18px;
  margin: 0;
  accent-color: var(--mr-blue);
  cursor: pointer;
}

/* ------------------------------------------------------------------ legend (W-02b) */

/* DESIGN.md "Legend and layers": bottom start, a card in mr-surface at 95 %, radius 12, padding
   12, Caption text, one 28 px sample per row. Leaflet places it in the bottom-left corner (bottom
   right in Arabic, map.js). On narrow screens the card hides behind a "Legend" button and opens
   above it (column-reverse keeps the button first in the reading order). */
.mr-legend {
  display: flex;
  flex-direction: column-reverse;
  align-items: start;
  gap: 8px;
}

.mr-legend-list {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--mr-surface) 95%, transparent);
  color: var(--mr-ink);
  box-shadow: var(--mr-shadow);
  font-size: 13px;
  font-weight: 400;
  line-height: var(--bs-body-line-height);
  list-style: none;
}

.mr-legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mr-legend-sample {
  display: block;
  flex: none;
  inline-size: 28px;
  block-size: 28px;
  overflow: visible;
}

.mr-legend-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  min-inline-size: var(--mr-target);
  min-block-size: var(--mr-target);
  padding-block: 0;
  padding-inline: 14px;
  border: 1px solid var(--mr-muted);
  border-radius: 12px;
  background: color-mix(in srgb, var(--mr-surface) 95%, transparent);
  color: var(--mr-blue);
  box-shadow: var(--mr-shadow);
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
}

.mr-legend-toggle:hover,
.mr-legend-toggle[aria-expanded="true"] {
  background: var(--mr-blue-tint);
  color: var(--mr-blue-dark);
}

/* The samples: geometry in map.js, colours here (the map symbols scaled down). */
.mr-ls-halo {
  fill: var(--mr-red);
  opacity: 0.25;                 /* the static halo of reduced motion */
}

.mr-ls-distress {
  fill: var(--mr-red);
  stroke: var(--mr-surface);
}

.mr-ls-helper {
  fill: var(--mr-blue);
  stroke: var(--mr-surface);
}

.mr-ls-reach {
  fill: var(--mr-green);
  fill-opacity: 0.1;
  stroke: var(--mr-green);
}

.mr-ls-me {
  fill: var(--mr-blue);
  stroke: var(--mr-surface);
  filter: drop-shadow(0 1px 2px color-mix(in srgb, var(--mr-ink) 16%, transparent));
}

.mr-ls-me-reach {
  fill: var(--mr-blue);
  fill-opacity: 0.06;
  stroke: var(--mr-blue);
}

.mr-ls-zone {
  fill: none;
  stroke: var(--mr-muted);
  stroke-opacity: 0.6;
}

.mr-ls-stale {
  opacity: 0.5;
}

/* Narrow map: keep in step with NARROW_QUERY in map.js (which also collapses the layer control).
   The Legend button sits one attribution line higher, so on a 320-360 px screen it never covers
   the attribution in the other bottom corner (the OSM credit must stay readable). */
@media (max-width: 767.98px), (max-height: 499.98px) {
  .mr-legend-toggle {
    display: inline-flex;
  }

  .mr-legend:not(.is-open) .mr-legend-list {
    display: none;
  }

  .mr-map .leaflet-bottom .mr-legend {
    margin-block-end: 28px;
  }
}

/* ------------------------------------------------------------------ vessel popup (W-03a) */

/* DESIGN.md "Vessel popup": 300 px wide (at most 90 % of the map; map.js sets Leaflet's width),
   radius 12, the standard shadow, the header tint full-bleed over Leaflet's padding. Leaflet's
   English close button is off; map.js builds a localized 44/48 px one. Text sizes follow the type
   roles (Heading 17/600, Body 16, Secondary 14). Feed text is never HTML (map.js). */
.mr-map .mr-popup .leaflet-popup-content-wrapper {
  padding: 0;
  border-radius: 12px;
  background: var(--mr-surface);
  color: var(--mr-ink);
  box-shadow: var(--mr-shadow);
  text-align: start;
}

.mr-map .mr-popup .leaflet-popup-tip {
  background: var(--mr-surface);
  color: var(--mr-ink);
  box-shadow: var(--mr-shadow);
}

.mr-map .mr-popup .leaflet-popup-content {
  margin: 0;
  font-size: 1rem;
  line-height: var(--bs-body-line-height);
}

/* The popup is a focus landing point for keyboard users, not a control: no ring of its own. */
.mr-popup-root:focus,
.mr-popup-root:focus-visible {
  outline: none;
}

.mr-popup-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-block-size: 52px;
  padding-block: 4px;
  padding-inline: 16px 4px;
  border-start-start-radius: 12px;
  border-start-end-radius: 12px;
}

.mr-popup-distress .mr-popup-head {
  background: var(--mr-red-tint);
}

.mr-popup-helper .mr-popup-head {
  background: var(--mr-blue-tint);
}

.mr-popup-dot {
  flex: none;
  inline-size: 12px;
  block-size: 12px;
  border-radius: 50%;
}

.mr-popup-distress .mr-popup-dot {
  background: var(--mr-red);
}

.mr-popup-helper .mr-popup-dot {
  background: var(--mr-blue);
}

.mr-popup-title {
  flex: 1 1 auto;
  min-inline-size: 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
}

/* Uppercase by styling, Latin only (DESIGN.md "Copy tone"; no letter-spacing in Arabic). */
.mr-popup-title:lang(en) {
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.mr-popup-distress .mr-popup-title {
  color: var(--mr-red);
}

.mr-popup-helper .mr-popup-title {
  color: var(--mr-blue);
}

.mr-popup-close {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  inline-size: var(--mr-target);
  block-size: var(--mr-target);
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--mr-ink);
}

.mr-popup-close:hover,
.mr-popup-close:active {
  background: var(--mr-surface);
}

.mr-popup-close:focus-visible {
  outline-offset: -3px;
}

.mr-popup-glyph {
  display: block;
  flex: none;
}

.mr-popup-main {
  display: grid;
  gap: 8px;
  padding-block: 12px 16px;
  padding-inline: 16px;
}

.mr-map .mr-popup .mr-popup-main > p {
  margin: 0;
}

.mr-popup-msg {
  color: var(--mr-ink);
  white-space: pre-line;         /* the message may contain line breaks */
  overflow-wrap: anywhere;
}

.mr-popup-who {
  overflow-wrap: anywhere;
}

.mr-popup-boat {
  font-size: 17px;
  font-weight: 600;
}

.mr-popup-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 4px;
}

.mr-popup-sep {
  white-space: pre;              /* keeps the spaces of " · " between the flex items */
}

.mr-popup-phone {
  font-variant-numeric: tabular-nums;
}

/* DESIGN.md "VHF badge": 16 as plain secondary text; any other channel as a dark-red outline. */
.mr-vhf {
  color: var(--mr-muted);
  font-size: 14px;
}

.mr-vhf-alert {
  display: inline-flex;
  align-items: center;
  block-size: 24px;
  padding-block: 2px;
  padding-inline: 8px;
  border: 1.5px solid var(--mr-red);
  border-radius: 6px;
  background: transparent;
  color: var(--mr-red);
  font-weight: 600;
  line-height: 1;
}

.mr-popup-stale {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--mr-muted);
  font-size: 14px;
}

.mr-popup-time {
  color: var(--mr-muted);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

/* Contact buttons (DESIGN.md "Buttons": Contact): equal width, gap 12, height 52, filled in the
   vessel's status colour with a white label and glyph, the -dark token when pressed. WhatsApp at
   the start and Call at the end, so they swap sides in Arabic. The focus ring is white, inside
   the fill (a white ring outside would vanish on the white popup). */
.mr-popup-actions {
  display: flex;
  gap: 12px;
  margin-block-start: 4px;
}

.mr-map.leaflet-container a.mr-contact {
  display: inline-flex;
  flex: 1 1 0;
  min-inline-size: 0;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-block-size: 52px;
  padding-block: 4px;
  padding-inline: 12px;
  border-radius: 12px;
  color: var(--mr-surface);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
}

.mr-map.leaflet-container a.mr-contact:focus-visible {
  outline: 3px solid var(--mr-surface);
  outline-offset: -6px;
}

.mr-popup-distress a.mr-contact {
  background: var(--mr-red);
}

.mr-popup-distress a.mr-contact:hover,
.mr-popup-distress a.mr-contact:active {
  background: var(--mr-red-dark);
}

.mr-popup-helper a.mr-contact {
  background: var(--mr-blue);
}

.mr-popup-helper a.mr-contact:hover,
.mr-popup-helper a.mr-contact:active {
  background: var(--mr-blue-dark);
}

/* ------------------------------------------------------------------ tagline (owner 2026-10-08, ADR) */

.mr-brand-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  min-inline-size: 0;
}

.mr-tagline {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.92);
  white-space: nowrap;
}

@media (max-width: 1199.98px) {
  .mr-tagline {
    max-inline-size: 250px;
    font-size: 11px;
    white-space: normal;
  }
}

/* Below 992 px the header is too narrow next to the store badges: the tagline is hidden. */
@media (max-width: 991.98px) {
  .mr-tagline {
    display: none;
  }
}

/* ------------------------------------------------------------------ Telegram link (W-12, ADR-087) */

/* The Telegram channel link sits between the store badges and Language: the paper-plane glyph
   and "Telegram" from 1200 px, the glyph alone in a square target below. Its aria-label
   ("Telegram channel (opens in a new tab)") is its accessible name at every width.
   To keep the header on one line with the extra item:
   - below 992 px the Language label is visually hidden too (the globe and the caret stay; the
     label stays the button's accessible name), as it already was below 576 px;
   - below 375 px (360 px Android phones, 320 px iPhone SE 1st gen) the header's side padding
     and the Help link's padding shrink to 4 px and the gaps between header items to 2 px; the
     targets keep 48 px, and their glyphs keep at least 12 px of visual space between them. */
@media (max-width: 1199.98px) {
  .mr-telegram {
    padding-inline: 0;
  }

  .mr-telegram .mr-hlabel {
    position: absolute !important;
    inline-size: 1px !important;
    block-size: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
}

@media (max-width: 991.98px) {
  .mr-lang .mr-hlabel,
  .mr-lang-nojs .mr-hlabel {
    position: absolute !important;
    inline-size: 1px !important;
    block-size: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
}

@media (max-width: 575.98px) {
  .mr-telegram {
    min-inline-size: 48px;
    min-block-size: 48px;
  }
}

@media (max-width: 374.98px) {
  .mr-header {
    gap: 2px;
    padding-inline: 4px;
  }

  .mr-nav,
  .mr-stores {
    gap: 2px;
  }

  .mr-help {
    padding-inline: 4px;
  }
}

/* ------------------------------------------------------------------ Locate me (W-03b) */

/* The Locate me button under the zoom buttons at the top start (top right in Arabic; DESIGN.md
   "Map controls"): the same 44 / 48 px square in a Leaflet bar, mr-surface with a 20 px mr-blue
   glyph. Busy (DESIGN.md "Buttons"): a spinner replaces the glyph, the size stays and map.js
   ignores taps. */
.mr-map .mr-locate {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--mr-target);
  block-size: var(--mr-target);
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: var(--mr-surface);
  color: var(--mr-blue);
  cursor: pointer;
}

.mr-map .mr-locate:hover,
.mr-map .mr-locate:active {
  background: var(--mr-blue-tint);
  color: var(--mr-blue-dark);
}

.mr-map .mr-locate.is-busy {
  cursor: progress;
}

.mr-locate-spinner {
  display: none;
  inline-size: 20px;
  block-size: 20px;
  box-sizing: border-box;
  border: 2px solid color-mix(in srgb, var(--mr-blue) 25%, transparent);
  border-block-start-color: var(--mr-blue);
  border-radius: 50%;
  animation: mr-spin 0.8s linear infinite;
}

.mr-locate.is-busy .mr-popup-glyph {
  display: none;
}

.mr-locate.is-busy .mr-locate-spinner {
  display: block;
}

@keyframes mr-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Reduced motion: the spinner stays (it is the only busy cue), slower. */
@media (prefers-reduced-motion: reduce) {
  .mr-locate-spinner {
    animation-duration: 1.6s;
  }
}

/* Me (DESIGN.md "Map marker specs"): dot 20 = fill 12 + a 4 px white ring, the standard shadow,
   always on top (its own pane, map.js). Not interactive. My reach circle: mr-blue, 2 px dashed
   6 / 4, fill 6 % (map.js sets the widths and opacities). */
.mr-me {
  display: grid;
  place-items: center;
}

.mr-me-dot {
  display: block;
  inline-size: 20px;
  block-size: 20px;
  box-sizing: border-box;
  border: 4px solid var(--mr-surface);
  border-radius: 50%;
  background: var(--mr-blue);
  box-shadow: var(--mr-shadow);
}

.mr-map .mr-me-reach {
  color: var(--mr-blue);
}

/* Popup row 3 (DESIGN.md "Vessel popup"): "2.4 km · 1.3 NM · ETA 14 min", Secondary size in
   mr-ink; each part wraps as a whole. */
.mr-popup-dist {
  color: var(--mr-ink);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.mr-popup-seg {
  display: inline-block;
}

/* A 44 / 48 px icon button without a fill: the hint's and the zone modal's close button. */
.mr-icon-btn {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  inline-size: var(--mr-target);
  block-size: var(--mr-target);
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--mr-ink);
}

.mr-icon-btn:hover,
.mr-icon-btn:active {
  background: var(--mr-blue-tint);
}

.mr-icon-btn:focus-visible {
  outline-offset: -3px;
}

.mr-icon-btn svg {
  display: block;
}

/* The Locate me hint (DESIGN.md "Banners, hints and modals"): under the Locate me button, a card
   in mr-surface with a 1 mr-line border, the standard shadow, radius 12, an mr-blue info glyph,
   mr-ink Secondary text and a close button. At most 22 rem wide, never wider than the map. The
   control box itself stays in the page (it holds the polite status region) and is empty when no
   hint shows. */
.mr-map .leaflet-control.mr-hint-box {
  max-inline-size: min(22rem, calc(100vw - 20px));
}

.mr-hint {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding-block: 0;
  padding-inline: 12px 0;
  border: 1px solid var(--mr-line);
  border-radius: 12px;
  background: var(--mr-surface);
  color: var(--mr-ink);
  box-shadow: var(--mr-shadow);
  font-size: 14px;
  line-height: var(--bs-body-line-height);
  text-align: start;
}

.mr-hint-icon {
  flex: none;
  margin-block-start: calc((var(--mr-target) - 20px) / 2);
  color: var(--mr-blue);
}

.mr-map .mr-hint .mr-hint-text {
  flex: 1 1 auto;
  min-inline-size: 0;
  margin: 0;
  padding-block: calc((var(--mr-target) - 1.5em) / 2);
  overflow-wrap: anywhere;
}

/* The zone modal (index.php; DESIGN.md "Banners, hints and modals": Zone message): a Bootstrap
   modal on the tokens. A card in mr-surface, 1 mr-line border, radius 12, the standard shadow,
   an mr-blue info glyph, mr-ink Body text, a close button and one primary OK button. The
   backdrop is mr-ink at 40 %. */
.modal-backdrop {
  --bs-backdrop-bg: var(--mr-ink);
  --bs-backdrop-opacity: 0.4;
}

.mr-zone-modal {
  --bs-modal-width: 28rem;
  --bs-modal-bg: var(--mr-surface);
  --bs-modal-color: var(--mr-ink);
  --bs-modal-border-color: var(--mr-line);
  --bs-modal-border-width: 1px;
  --bs-modal-border-radius: 12px;
  --bs-modal-inner-border-radius: 11px;
  --bs-modal-box-shadow: var(--mr-shadow);
}

.mr-zone-modal .modal-content {
  box-shadow: var(--bs-modal-box-shadow);
}

.mr-zone-modal .modal-body {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-block: 8px 0;
  padding-inline: 16px 8px;
}

.mr-zone-icon {
  flex: none;
  margin-block-start: calc((var(--mr-target) - 20px) / 2);
  color: var(--mr-blue);
}

.mr-zone-text {
  flex: 1 1 auto;
  min-inline-size: 0;
  margin: 0;
  padding-block: calc((var(--mr-target) - 1.5em) / 2);
  font-size: 16px;
}

.mr-zone-modal .modal-footer {
  padding-block: 12px 16px;
  padding-inline: 16px;
  border-block-start: 0;
}

/* Primary button (DESIGN.md "Buttons"): mr-blue fill, white Button label, 44 / 48 px, radius 12;
   mr-blue-dark when pressed. Its focus ring is white, inside the fill (as on the contact buttons). */
.mr-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 96px;
  min-block-size: var(--mr-target);
  margin: 0;
  padding-block: 4px;
  padding-inline: 24px;
  border: 0;
  border-radius: 12px;
  background: var(--mr-blue);
  color: var(--mr-surface);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
}

.mr-btn-primary:hover,
.mr-btn-primary:active {
  background: var(--mr-blue-dark);
}

.mr-btn-primary:focus-visible {
  outline: 3px solid var(--mr-surface);
  outline-offset: -6px;
}

/* ------------------------------------------------------------------ help page (W-04a) */

/* help.php (DESIGN.md "Website header, admin and help": Help page): one column of at most 48rem
   on mr-canvas, the 16 px side gutter, a page title, a lead line, the "On this page" links and one
   mr-surface card per section. The header is not sticky, so an anchor needs only a small margin. */
.mr-doc {
  max-inline-size: 48rem;
  margin-inline: auto;
  padding-block: 24px 48px;
  padding-inline: 16px;
}

.mr-doc-title {
  margin-block: 0 8px;
  color: var(--mr-ink);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.25;
}

.mr-lead {
  margin-block: 0 16px;
  font-size: 17px;
}

.mr-toc {
  margin-block-end: 24px;
}

.mr-toc-title {
  margin-block: 0 8px;
  color: var(--mr-muted);
  font-size: 14px;
  font-weight: 600;
}

/* The section links as chips (DESIGN.md: chips have an mr-muted border, the pill radius). */
.mr-toc ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mr-toc a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--mr-target);
  padding-inline: 16px;
  border: 1px solid var(--mr-muted);
  border-radius: 999px;
  background: var(--mr-surface);
  color: var(--mr-blue);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

.mr-toc a:hover,
.mr-toc a:active {
  background: var(--mr-blue-tint);
  color: var(--mr-blue-dark);
}

.mr-card {
  margin-block-end: 16px;
  padding: 24px;
  border: 1px solid var(--mr-line);
  border-radius: 12px;
  background: var(--mr-surface);
  scroll-margin-block-start: 16px;
}

.mr-card h2 {
  margin-block: 0 12px;
  color: var(--mr-ink);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
}

.mr-card p {
  margin-block: 0 12px;
}

.mr-card > :last-child {
  margin-block-end: 0;
}

.mr-promises {
  margin-block: 0 12px;
  padding-inline-start: 24px;
}

.mr-promises li + li {
  margin-block-start: 8px;
}

/* Safety notice: the Emergency card (DESIGN.md "Settings": mr-red-tint, the title in mr-red, the
   text in mr-ink, never mr-muted on the tint) with "Call 996" / "Call 999" as secondary buttons
   outlined in mr-red, and "VHF Ch. 16". */
.mr-safety {
  border-color: color-mix(in srgb, var(--mr-red) 30%, var(--mr-surface));
  background: var(--mr-red-tint);
  color: var(--mr-ink);
}

.mr-safety h2 {
  color: var(--mr-red);
}

.mr-safety-notice {
  font-size: 17px;
}

.mr-calls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.mr-call,
.mr-call-vhf {
  display: flex;
  align-items: center;
  gap: 12px;
  min-block-size: var(--mr-target);
}

.mr-call {
  padding-block: 8px;
  padding-inline: 16px 20px;
  border: 1.5px solid var(--mr-red);
  border-radius: 12px;
  background: var(--mr-surface);
  color: var(--mr-red);
  text-decoration: none;
}

.mr-call:hover,
.mr-call:active {
  background: var(--mr-red-tint);
  color: var(--mr-red-dark);
}

.mr-call-vhf {
  padding-inline: 4px;
}

.mr-call-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.mr-call-label {
  font-size: 16px;
  font-weight: 600;
}

.mr-call-who {
  color: var(--mr-ink);
  font-size: 13px;
}

/* Contact: label and address side by side, each address a full-height target. */
.mr-contact-list {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: 0 16px;
  margin-block: 0 12px;
}

.mr-contact-list dt {
  font-weight: 600;
}

.mr-contact-list dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.mr-contact-list a,
.mr-links a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--mr-target);
}

.mr-links {
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 575.98px) {
  .mr-doc {
    padding-block-start: 16px;
  }

  .mr-doc-title {
    font-size: 24px;
  }

  .mr-card {
    padding: 16px;
  }

  .mr-calls > li {
    flex: 1 1 100%;
  }

  /* Phones (W-06b): the label above its address, so an address keeps its line instead of
     breaking mid-word next to the label (help, privacy and terms). overflow-wrap stays the last
     resort. */
  .mr-contact-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .mr-contact-list dd + dt {
    margin-block-start: 8px;
  }
}

/* ------------------------------------------------------------------ help flowchart (W-04b) */

/* "How it works" (DESIGN.md "Help flowchart"; INSTRUCTION §6.3): two lanes, "In trouble" (mr-red)
   at the start and "Can help" (mr-blue) at the end. Each lane is a tinted panel with a filled
   heading and an ordered list of numbered mr-surface step boxes, joined by mr-muted down arrows.
   Below 768 px the lanes stack. From 768 px they sit side by side and, with subgrid, share their
   rows: a step lines up with the one beside it, every box in a row has the same height, and
   "Contact them" points across to "can contact you". The lane order and that arrow mirror in
   Arabic (grid columns follow the writing direction; the arrow is flipped below); the down arrows
   need no mirroring. assets/img/flowchart.svg is the static English copy. */
.mr-flow {
  --mr-flow-gap: 28px;          /* between two boxes: holds one down arrow (the mask is 16 x 28) */
  --mr-flow-pad: 12px;          /* lane padding */
  --mr-flow-gutter: 40px;       /* between the lanes when side by side */
  display: grid;
  gap: 16px;
  margin-block: 16px 0;
}

.mr-flow-lane {
  min-inline-size: 0;
  padding: var(--mr-flow-pad);
  border-radius: 12px;
  background: var(--mr-red-tint);
}

.mr-flow-help {
  background: var(--mr-blue-tint);
}

.mr-flow-head {
  position: relative;
  margin: 0 0 var(--mr-flow-gap);
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--mr-red);
  color: var(--mr-surface);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
}

.mr-flow-help .mr-flow-head {
  background: var(--mr-blue);
}

.mr-flow-steps {
  display: flex;
  flex-direction: column;
  gap: var(--mr-flow-gap);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: mr-step;
}

.mr-flow-step {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-block-size: 56px;
  padding: 12px;
  border: 1px solid var(--mr-line);
  border-radius: 12px;
  background: var(--mr-surface);
  color: var(--mr-ink);
  font-size: 15px;
  line-height: 1.4;
  counter-increment: mr-step;
}

/* The step number: a 24 filled dot in the lane colour, like the map symbols, white digits. */
.mr-flow-step::before {
  content: counter(mr-step);
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  inline-size: 24px;
  block-size: 24px;
  border-radius: 50%;
  background: var(--mr-red);
  color: var(--mr-surface);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.mr-flow-help .mr-flow-step::before {
  background: var(--mr-blue);
}

.mr-flow-text {
  flex: 1 1 auto;
  min-inline-size: 0;
}

/* The down arrows, centred in the gap under the heading and under every step but the last. */
.mr-flow-head::after,
.mr-flow-step:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-block-start: calc(100% + 1px);
  inset-inline: 0;
  inline-size: 16px;
  block-size: var(--mr-flow-gap);
  margin-inline: auto;
  background: var(--mr-muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 28'%3E%3Cpath d='M8 4v18M3 17l5 5 5-5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px 28px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 28'%3E%3Cpath d='M8 4v18M3 17l5 5 5-5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px 28px no-repeat;
}

.mr-flow-head::after {
  inset-block-start: 100%;
}

/* The arrow across the gutter: only where the two boxes share a row (see below). */
.mr-flow-link {
  display: none;
}

@media (min-width: 768px) {
  .mr-flow {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--mr-flow-gutter);
  }
}

@supports (grid-template-rows: subgrid) {
  @media (min-width: 768px) {
    /* 1 heading + 7 steps, the longer lane (help.php $flow). */
    .mr-flow {
      grid-template-rows: repeat(8, auto);
      row-gap: var(--mr-flow-gap);
    }

    .mr-flow-lane {
      display: grid;
      grid-row: 1 / -1;
      grid-template-rows: subgrid;
    }

    .mr-flow-head {
      margin: 0;
    }

    .mr-flow-steps {
      display: grid;
      grid-row: 2 / -1;
      grid-template-rows: subgrid;
    }

    /* From the start edge of this box (outside its border) across both lane paddings and the
       gutter to the box beside it, pointing to the start; flipped in Arabic. */
    .mr-flow-link {
      position: absolute;
      inset-block: 0;
      inset-inline-end: calc(100% + 1px);
      display: block;
      inline-size: calc(var(--mr-flow-gutter) + 2 * var(--mr-flow-pad));
      block-size: 16px;
      margin-block: auto;
      overflow: visible;
      fill: none;
      stroke: var(--mr-muted);
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    [dir="rtl"] .mr-flow-link {
      transform: scaleX(-1);
    }
  }
}

@media (forced-colors: active) {
  .mr-flow-head::after,
  .mr-flow-step:not(:last-child)::after {
    forced-color-adjust: none;
    background: CanvasText;
  }

  .mr-flow-link {
    stroke: CanvasText;
  }
}

/* ------------------------------------------------------------------ privacy and terms (W-05) */

/* privacy.php and terms.php (DESIGN.md "Privacy and terms pages"): the help page's column, title,
   lead, "On this page" chips and section cards, plus the "Last updated" line under the title and
   the "What we collect" list (data in 600, its purpose under it, items split by mr-line). */
.mr-doc-meta {
  margin-block: 0 16px;
  color: var(--mr-muted);
  font-size: 14px;
}

.mr-data {
  margin-block: 0 12px;
}

.mr-data dt {
  padding-block-start: 12px;
  border-block-start: 1px solid var(--mr-line);
  font-weight: 600;
}

.mr-data dt:first-child {
  padding-block-start: 0;
  border-block-start: 0;
}

.mr-data dd {
  margin-block: 4px 0;
  margin-inline: 0;
  padding-block-end: 12px;
}

.mr-data dd:last-child {
  padding-block-end: 0;
}

/* ------------------------------------------------------------------ Arabic text (W-06a) */

/* DESIGN.md "Typography": Arabic text gets a line-height of 1.7 on the web. The body already has
   it (:root:lang(ar) above). These two blocks set a tighter value of their own for Latin text and
   run to two or more lines in Arabic (the status line on phones, the longer flowchart steps), so
   in Arabic they take the body value. Headings, buttons, one-line labels and the header tagline
   (two lines must fit the 56 px header) keep their own line-height. */
.mr-status:lang(ar),
.mr-flow-step:lang(ar) {
  line-height: var(--bs-body-line-height);
}