/* Map polish (31 Oct): the Map tab's stops, stop card, Nearby rows, you-dot and pills. Loaded after revamp-map.css.
   Stops: a quiet dot at 15–16, a mode badge from 17, name + next departure for the nearest few at 18 (mapscreen.js decorateStops).
   The 44 px button stays the tap target; only what's painted inside it changes. */
:root {
  --mp-stop-fill: rgba(255, 255, 255, .92); --mp-stop-ring: #6E7A77; --mp-stop-d: 7px;
  --m-bus: #1F64D6; --m-train: #E06A12; --m-tram: #11975A; --m-ferry: #0A8BA8;
  --mp-ease: cubic-bezier(.2, .9, .25, 1.15);
}
:root[data-theme="dark"]:not(.mv-here), :root.mv-here.mv-night { --mp-stop-fill: rgba(30, 38, 36, .9); --mp-stop-ring: #A9B6B2; }   /* the map's own darkness */
:root[data-theme="dark"] { --m-bus: #4C8DF6; --m-train: #F08A3C; --m-tram: #2DBE7A; --m-ferry: #29B6D3; }

/* ---------- stops: the dot (zoomed out) ---------- */
.mv-stop::after, .mv-stop.sm::after, .mv-stop.ex::after, .mv-stop.sc::after {
  inset: calc((44px - var(--mp-stop-d)) / 2); box-sizing: border-box; border-radius: 50%;
  background: var(--mp-stop-fill); border: 1.5px solid var(--mp-stop-ring); box-shadow: 0 0 0 1px rgba(255, 255, 255, .55);
  transition: inset .2s var(--mp-ease), background-color .2s, opacity .2s;
}
:root[data-theme="dark"]:not(.mv-here) .mv-stop::after, :root.mv-here.mv-night .mv-stop::after { box-shadow: 0 0 0 1px rgba(0, 0, 0, .35); }
.mv-stop.stn::after { inset: calc((44px - var(--mp-stop-d) - 4px) / 2); border-width: 2px; border-color: var(--m-train); }
.mv-stop[data-mode="bus"].stn::after { border-color: var(--m-bus); }
.mv-stop[data-mode="tram"].stn::after { border-color: var(--m-tram); }
.mv-stop[data-mode="ferry"]::after { border-color: var(--m-ferry); }
.mv-stop.near:not(.sel)::after, .mv-stop.ex:not(.sel)::after { inset: calc((44px - var(--mp-stop-d) - 5px) / 2); background: var(--accent); border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
.mv-stop.sel::after { inset: 13px; background: var(--accent); border: 3px solid #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent), 0 1px 4px rgba(0, 0, 0, .3); }
.mv-stop.sel::before { inset: 11px; border-width: 2px; }

/* ---------- stops: the mode badge (street level, 17+) ---------- */
.mv-stop .mvs-b { display: none; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; translate: -50% -50%; place-items: center;
  border-radius: 6px; background: var(--m-bus); color: #fff; border: 1.5px solid #fff; box-shadow: 0 1px 3px rgba(11, 20, 48, .35); pointer-events: none;
  transition: width .2s var(--mp-ease), height .2s var(--mp-ease), box-shadow .2s; }
.mv-stop .mvs-b .i { width: 11px; height: 11px; }
.mv-stop[data-mode="train"] .mvs-b { background: var(--m-train); }
.mv-stop[data-mode="tram"] .mvs-b { background: var(--m-tram); }
.mv-stop[data-mode="ferry"] .mvs-b { background: var(--m-ferry); }
.mv-stops:is([data-z="mid"], [data-z="hi"]) .mv-stop .mvs-b { display: grid; }
/* 17: quiet (white, the mode's glyph and edge); 18: filled in the mode's colour */
.mv-stops[data-z="mid"] .mv-stop:not(.sel):not(.near):not(.stn) .mvs-b { width: 16px; height: 16px; border-radius: 5px; background: var(--surface, #fff); color: var(--m-bus); border: 1.5px solid currentColor; box-shadow: 0 1px 2px rgba(11, 20, 48, .25); }
.mv-stops[data-z="mid"] .mv-stop:not(.sel):not(.near):not(.stn) .mvs-b .i { width: 10px; height: 10px; }
.mv-stops[data-z="mid"] .mv-stop[data-mode="train"]:not(.sel):not(.near):not(.stn) .mvs-b { color: var(--m-train); }
.mv-stops[data-z="mid"] .mv-stop[data-mode="tram"]:not(.sel):not(.near):not(.stn) .mvs-b { color: var(--m-tram); }
.mv-stops[data-z="mid"] .mv-stop[data-mode="ferry"]:not(.sel):not(.near):not(.stn) .mvs-b { color: var(--m-ferry); }
.mv-stops:is([data-z="mid"], [data-z="hi"]) .mv-stop::after { opacity: 0; }
.mv-stops[data-z="hi"] .mv-stop .mvs-b { width: 22px; height: 22px; border-radius: 7px; }
.mv-stops[data-z="hi"] .mv-stop .mvs-b .i { width: 13px; height: 13px; }
.mv-stops:is([data-z="mid"], [data-z="hi"]) .mv-stop.stn .mvs-b { width: 26px; height: 26px; border-radius: 8px; border-width: 2px; }
.mv-stops:is([data-z="mid"], [data-z="hi"]) .mv-stop.stn .mvs-b .i { width: 15px; height: 15px; }
.mv-stops:is([data-z="mid"], [data-z="hi"]) .mv-stop:is(.sel, .near) .mvs-b { width: 28px; height: 28px; border-radius: 9px; border-width: 2.5px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent), 0 2px 6px rgba(0, 0, 0, .3); }
.mv-stops:is([data-z="mid"], [data-z="hi"]) .mv-stop.sel::before { inset: 6px; border-radius: 12px; }
:root.mv-night .mv-stop .mvs-b, :root[data-theme="dark"]:not(.mv-here) .mv-stop .mvs-b { border-color: rgba(255, 255, 255, .85); }

/* ---------- stops: name + next departure (18, the nearest few) ---------- */
.mv-stop .mvs-l { position: absolute; left: calc(50% + 15px); top: 50%; translate: 0 -50%; display: flex; flex-direction: column; gap: 1px; max-width: 170px;
  padding: 4px 9px 5px; border-radius: 10px; background: color-mix(in srgb, var(--surface, #fff) 95%, transparent); color: var(--text);
  box-shadow: 0 2px 8px rgba(11, 20, 48, .2), 0 0 0 1px color-mix(in srgb, var(--text) 8%, transparent); text-align: left; pointer-events: none;
  animation: mpLabelIn .3s var(--mp-ease) both; }
.mv-stop .mvs-l b { font: 700 12px/1.2 var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mv-stop .mvs-l em { font: 700 11px/1.2 var(--font); font-style: normal; font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
.mv-stop .mvs-l em.live { color: var(--ok, #1F9D63); }
.mv-stop .mvs-l em.live::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 4px 1px 0; border-radius: 50%; background: currentColor; }
.mv-stop.lbl { z-index: 3; }
@keyframes mpLabelIn { from { opacity: 0; translate: -6px -50%; } to { opacity: 1; translate: 0 -50%; } }

/* ---------- bus pills: the live dot breathes; not-live is clearly a dashed outline ---------- */
.mv-marker.mv-st:where(:not([class*="tm-"]):not(.ic-meet):not(.fd-mk):not(.home)):not(.pos):not(.stale):not(.est):not(.ghosted):not(.cluster)::before { animation: mpLive 2.2s ease-out infinite; }
@keyframes mpLive { 0% { box-shadow: 0 0 0 1.5px #fff, 0 0 0 1.5px color-mix(in srgb, var(--mk-live) 70%, transparent); } 70%, 100% { box-shadow: 0 0 0 1.5px #fff, 0 0 0 6px transparent; } }
.mv-marker.mv-st.mv-st:where(:not([class*="tm-"]):not(.ic-meet):not(.fd-mk):not(.home)):is(.pos, .stale, .est, .ghosted) { border-style: dashed; }
.mv-marker.mv-st:where(:not([class*="tm-"]):not(.ic-meet):not(.fd-mk):not(.home)) { box-shadow: 0 0 0 0 transparent, 0 3px 10px rgba(11, 20, 48, .22), 0 1px 2px rgba(11, 20, 48, .25); }
.mv-marker.cluster .mv-cn { font-variant-numeric: tabular-nums; }

/* ---------- you: a soft pulse, and a heading cone while you're moving ---------- */
.mv-user.hdg:not(.locating):not(.stale)::before { content: ""; position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%;
  background: conic-gradient(from calc(var(--uh, 0deg) - 28deg), rgba(26, 115, 232, .42) 0deg 56deg, transparent 56deg);
  -webkit-mask: radial-gradient(circle, #000 0 18%, rgba(0, 0, 0, .9) 30%, transparent 70%); mask: radial-gradient(circle, #000 0 18%, rgba(0, 0, 0, .9) 30%, transparent 70%);
  pointer-events: none; transition: background .3s; }
.mv-user::after { animation-duration: 2.6s; }

/* ---------- one mode-badge family: map stops, the stop sheet's header (radius ≈ 30% of the size, white edge on the map) ---------- */
.mode-badge { display: inline-grid; place-items: center; flex: none; background: var(--m-bus); color: #fff; }
.mode-badge[data-mode="train"] { background: var(--m-train); } .mode-badge[data-mode="tram"] { background: var(--m-tram); } .mode-badge[data-mode="ferry"] { background: var(--m-ferry); }
.mode-badge.lg { width: 36px; height: 36px; border-radius: 11px; }
.mode-badge.lg .i { width: 20px; height: 20px; }
.sheet-head .mode-badge.lg { margin-top: 2px; }

/* ---------- the stop's hero card (Home's "Next trip" language: Classic first). 12 px card radius, 16 px inside ---------- */
.stop-hero { margin: 4px 5px 20px 0; padding: 16px; border-radius: 12px; background: var(--surface); color: var(--text);
  border: 2px solid var(--text); box-shadow: 5px 5px 0 var(--accent); }
:root[data-look='navy'] .stop-hero { background: var(--hero-bg); color: #fff; border-color: #FF8A55; box-shadow: 5px 5px 0 #FF8A55; --text: #fff; --muted: #BAC5E3; --rv-ink: rgba(255, 255, 255, .1); --ok: #4BD58B; --accent: #FF8A55; --on-accent: #14100c; }   /* as Home's Navy hero */
.stop-hero.rise { animation: mpRise .42s var(--mp-ease) both; }
@keyframes mpRise { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
.stop-hero .sh-label { display: flex; align-items: center; gap: 8px; font: var(--rv-w-heavy, 800) var(--rv-t-micro, 12px)/1.3 var(--font); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.stop-hero .sh-chip { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 8px; background: var(--rv-ink, color-mix(in srgb, var(--text) 8%, transparent)); color: var(--text); letter-spacing: .04em; }
.stop-hero .sh-next { display: flex; gap: 8px; margin: 12px 0 16px; }
.stop-hero .sh-next > * { flex: 1 1 0; }
.stop-hero .sh-dep { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; padding: 10px; border-radius: 8px; background: var(--rv-ink, color-mix(in srgb, var(--text) 8%, transparent)); }
.stop-hero .sh-dep .badge { height: 28px; border-radius: 8px; }
.stop-hero .sh-to { max-width: 100%; min-height: 15px; font: 600 12px/1.25 var(--font); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stop-hero .sh-dep b { margin-top: 2px; font: var(--rv-w-heavy, 800) 24px/1 var(--rv-num, var(--font)); font-variant-numeric: tabular-nums; letter-spacing: -.01em; white-space: nowrap; }
.stop-hero .sh-dep b small { font: 700 13px/1 var(--font); margin-left: 3px; letter-spacing: 0; color: var(--muted); }
.stop-hero .sh-dep em { display: inline-flex; align-items: center; gap: 5px; font: 800 11px/1.2 var(--font); font-style: normal; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.stop-hero .sh-dep.live em { color: var(--ok, #1F9D63); }
.stop-hero .sh-dep .ld { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: mpDot 2.2s ease-out infinite; }
@keyframes mpDot { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 60%, transparent); } 70%, 100% { box-shadow: 0 0 0 6px transparent; } }
.stop-hero .sh-wait { display: flex; align-items: center; gap: 10px; min-height: 64px; color: var(--muted); font-weight: 600; }
.stop-hero .sh-wait .spinner { width: 24px; height: 24px; }
/* Directions: the app's standard primary button, as on Home's hero (the card already carries the offset shadow: no glow on top) */
.stop-hero .btn.primary.sh-go { width: 100%; margin: 0; box-shadow: none; }
/* what follows the card (the day bar, "Today", the list) starts a clear 20 px below it */
.stop-hero + * { margin-top: 0; }

/* ---------- Nearby rows: cards in the same language (the nearest gets the hero edge) ---------- */
#m-body[data-sheet=""] .list { display: flex; flex-direction: column; gap: 8px; padding: 0 6px 6px 0; background: none; border: 0; }
#m-body[data-sheet=""] .list > .item { padding: 12px 16px; border-radius: 12px; background: var(--surface); border: 1.5px solid color-mix(in srgb, var(--text) 14%, transparent); box-shadow: 0 1px 2px rgba(11, 20, 48, .06); transition: transform .15s var(--mp-ease), box-shadow .15s; }
#m-body[data-sheet=""] .list > .item + .item { border-top: 1.5px solid color-mix(in srgb, var(--text) 14%, transparent); }
#m-body[data-sheet=""] .list > .item:first-child { border: 2px solid var(--text); box-shadow: 4px 4px 0 var(--accent); }
#m-body[data-sheet=""] .list > .item:active { transform: translate(1px, 1px); }
#m-body[data-sheet=""] .list > .item b { font-weight: 800; }
#m-body[data-sheet=""] .deps-inline { gap: 6px; margin-top: 8px; }
#m-body[data-sheet=""] .deps-inline > span { gap: 6px; padding: 3px 9px 3px 3px; border-radius: 999px; background: var(--rv-ink, color-mix(in srgb, var(--text) 8%, transparent)); font-size: 14px; }
:root[data-look='navy'] #m-body[data-sheet=""] .list > .item { background: var(--surface); }
:root[data-look='navy'] #m-body[data-sheet=""] .list > .item:first-child { border-color: #FF8A55; box-shadow: 4px 4px 0 #FF8A55; }

/* ---------- no-location card: one compact row, two lines at most; the other two ways on are small links ---------- */
.loc-card.loc-off { padding: 10px 10px 10px 12px; gap: 10px; margin: 0 0 4px; border-radius: 12px; }
.loc-card.loc-off .ico { width: 32px; height: 32px; border-radius: 10px; }
.loc-card.loc-off b { font-size: 14px; line-height: 1.25; }
.loc-card.loc-off small { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.loc-card.loc-off .btn { flex: none; width: auto; min-height: 40px; padding: 0 14px; border-radius: 12px; font-size: 14px; white-space: nowrap; }
.loc-links { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 0 4px; font-size: 13px; color: var(--muted); }
.loc-links button { min-height: 36px; padding: 0 2px; color: var(--accent); font-weight: 650; font-size: 13px; }

@media (prefers-reduced-motion: reduce) {
  .stop-hero.rise, .mv-stop .mvs-l, .stop-hero .sh-dep .ld { animation: none; }
  .mv-marker.mv-st::before { animation: none !important; }
}
/* a label near the right edge sits to the left of its stop */
.mv-stop.lft .mvs-l { left: auto; right: calc(50% + 15px); text-align: right; align-items: flex-end; animation-name: mpLabelInL; }
@keyframes mpLabelInL { from { opacity: 0; translate: 6px -50%; } to { opacity: 1; translate: 0 -50%; } }

/* ---------- bus pills match the route badges in the sheets: 8 px radius, 800 weight, 28 px tall ---------- */
.mv-marker.mv-st:where(:not([class*="tm-"]):not(.ic-meet):not(.fd-mk):not(.home)) { height: 28px; border-radius: 8px; font-weight: 800; font-size: 14px; }

/* ---------- Ride: a map control like the others (white glass chip, the controls' height, border and shadow; accent only on the icon) ---------- */
#map > #fr-map.fr-fab { left: 12px; top: calc(var(--safe-top) + 66px);   /* level with the zoom column */ z-index: 10; min-height: 44px; height: 44px; gap: 6px; padding: 0 14px 0 10px;
  border-radius: 22px; background: var(--rv-glass, var(--surface)); color: var(--text); border: 1px solid var(--line); box-shadow: var(--rv-shadow, 0 4px 14px rgba(0, 0, 0, .18));
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font: 700 15px/1 var(--font); transition: transform .15s var(--mp-ease); }
#map > #fr-map.fr-fab .fr-ic, #map > #fr-map.fr-fab svg { width: 22px; height: 22px; color: var(--accent); stroke: var(--accent); }
#map > #fr-map.fr-fab:active { transform: scale(.96); }

/* the selected / nearest stop's halo is its own mode colour (no red ring around a blue badge) */
.mv-stop { --mb: var(--m-bus); } .mv-stop[data-mode="train"] { --mb: var(--m-train); } .mv-stop[data-mode="tram"] { --mb: var(--m-tram); } .mv-stop[data-mode="ferry"] { --mb: var(--m-ferry); }
.mv-stops:is([data-z="mid"], [data-z="hi"]) .mv-stop:is(.sel, .near) .mvs-b { box-shadow: 0 0 0 3px color-mix(in srgb, var(--mb) 35%, transparent), 0 2px 6px rgba(0, 0, 0, .3); }
.mv-stops:is([data-z="mid"], [data-z="hi"]) .mv-stop.sel::before { border-color: var(--mb); }
.stop-hero .sh-dep .badge { margin: 0; }
.stop-hero .sh-dep { gap: 6px; }
.stop-hero .sh-to { min-height: 0; }
#m-body .stop-hero .sh-dep > .sh-to { margin: 0; }   /* (a sheet rule gave it a 16 px top margin) */

/* All departures: the shared secondary button, full width, between the tiles and Directions */
.stop-hero .btn.sh-all { width: 100%; margin: 0 0 10px; justify-content: center; gap: 6px; font-weight: 700; }
.stop-hero .btn.sh-all .sh-n { color: var(--muted); font-weight: 600; }
.stop-hero .btn.sh-all .sh-chev { font-size: 20px; line-height: 1; margin-left: 2px; color: var(--muted); }
:root[data-look='navy'] .stop-hero .btn.sh-all { background: rgba(255, 255, 255, .08); color: #fff; box-shadow: inset 0 0 0 1px rgba(214, 224, 255, .22); }