/* Trip moments (js/moments.js): Look up, Get off, Change here, Tight, and the green tick between buses. The Find my
   stop shell (findstop.css) in the app's own theme: light by default, dark with the app. Coral (the accent) is your
   stop and "on track", amber only for Tight, green only for "done". Only transform, opacity and stroke offsets move;
   reduced motion: stepped changes (no glides, pulses, breathing or warming). */
/* the card's way back to a moment: "Big view" (Get off: "Stops left") with an expand mark, at the end of the card's first
   line. Its own class, not .chip (styles.css repaints .chip's background, which hid white text). Dark-on-tint, so the
   text is the theme's own text colour on its accent tint: 4.5:1 or more in every colour theme, light and dark */
.mo-pill { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px 0 10px; border-radius: 999px; background: var(--accent-soft); color: var(--text); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); font-size: var(--fs-sub); font-weight: 700; white-space: nowrap; }
.mo-pill .i { color: var(--text); width: 16px; height: 16px; stroke-width: 2.2; }
.mo-pill.tight { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.mo-pill:active { transform: scale(.95); }
.mo-thanks { margin: 14px 0 0; font-size: var(--fs-row); font-weight: 600; text-align: center; color: var(--mo-fg); }
.mo-cross { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 10px 0 0; font-size: var(--fs-sub); font-weight: 600; color: var(--mo-fg); text-align: center; }
.mo-cross .i { flex: none; color: var(--mo-dim); }
#mo-check .i { width: 20px; height: 20px; }

/* Share your trip (ride.js shareTrip): the moments' shell, a preview of what they'll see, then the phone's share sheet */
.mo-share .sh-stage { justify-content: center; }
.sh-card { width: 100%; max-width: 360px; padding: 20px 20px 18px; border-radius: 24px; background: var(--surface); color: var(--text); box-shadow: 0 10px 40px rgba(0, 0, 0, .18); }
.sh-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: var(--fs-foot); font-weight: 700; color: var(--muted); }
.sh-live { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 99px; background: var(--ok-soft); color: var(--ok); font-weight: 800; letter-spacing: .1em; font-size: 11px; }
.sh-live i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: sh-blink 1.6s ease-in-out infinite; }
@keyframes sh-blink { 50% { opacity: .25; } }
.sh-to { margin-top: 16px; font-size: var(--fs-title); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.sh-eta { margin-top: 4px; font-size: var(--fs-body); color: var(--muted); } .sh-eta b { color: var(--text); }
.sh-legs { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 16px; color: var(--muted); font-weight: 600; }
.sh-arrow { color: var(--muted); }
.sh-note { margin: 14px 0 0; font-size: var(--fs-sub); color: var(--muted); }
.sh-msg { width: 100%; max-width: 360px; margin: 16px 0 0; font-size: var(--fs-sub); color: var(--mo-dim); text-align: center; overflow-wrap: anywhere; }
.sh-foot .btn { min-height: 54px; gap: 8px; }
.sh-foot .btn .i { width: 20px; height: 20px; }
.sh-row { display: flex; gap: 10px; margin-top: 10px; } .sh-row .btn { flex: 1; }
.sh-stop { margin-top: 10px; color: var(--bad); }
.sh-small { margin: 10px 0 0; font-size: var(--fs-foot); color: var(--mo-dim); text-align: center; }
.mo-share .mo-buttons { justify-content: center; }
@media (prefers-reduced-motion: reduce) { .sh-live i { animation: none; } }
.mo {
  --mo-fg: #1B1614; --mo-dim: rgba(27, 22, 20, .56); --mo-faint: rgba(27, 22, 20, .14); --mo-round: rgba(27, 22, 20, .07); --mo-bgsolid: #F6F3EF;
  --mo-ring: rgba(27, 22, 20, .10); --mo-edge: #E8A200; --mo-stroke: #F6F3EF;
  --mo-bg: radial-gradient(120% 80% at 50% 38%, #FFFFFF 0%, #F6F3EF 55%, #ECE6E0 100%);
  /* "Here" in light: a saturated coral wash (dark text on it is 5.8:1 at its deepest), not the mock-up's peach */
  --mo-warm: radial-gradient(110% 75% at 50% 40%, #FFA487 0%, #FF8761 58%, #F26A47 100%);
  position: fixed; inset: 0; z-index: 68; color: var(--mo-fg); background: var(--mo-bg); background-color: var(--mo-bgsolid);
  display: flex; flex-direction: column; padding: calc(var(--safe-top) + 14px) 22px calc(var(--safe-bot) + 14px); overflow: hidden; animation: cs-in .24s var(--ease) both;
}
:root[data-theme="dark"] .mo {
  --mo-fg: #fff; --mo-dim: rgba(255, 255, 255, .5); --mo-faint: rgba(255, 255, 255, .16); --mo-round: rgba(255, 255, 255, .14); --mo-bgsolid: #141110;
  --mo-ring: rgba(255, 255, 255, .12); --mo-edge: #F2B35C; --mo-stroke: #171312;
  --mo-bg: radial-gradient(120% 80% at 50% 38%, #26211f 0%, #141110 55%, #0b0909 100%);
  --mo-warm: radial-gradient(110% 75% at 50% 40%, color-mix(in srgb, var(--accent) 70%, #000) 0%, color-mix(in srgb, var(--accent) 38%, #000) 60%, #120a07 100%);
}
.mo.closing { animation: cs-out .2s var(--ease) both; }
.mo > :not(.mo-glow) { position: relative; }
.mo-glow { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 1.2s ease; }
.mo-head { flex: none; }
.mo-kicker { display: flex; align-items: center; gap: 8px; min-height: 22px; margin: 0; font-size: var(--fs-foot); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--mo-dim); outline: none; }
.mo-kicker.amber { color: var(--warn); }
.mo-title { display: flex; align-items: center; gap: 12px; margin-top: 8px; font-size: var(--fs-title); line-height: 1.1; font-weight: 800; letter-spacing: -.02em; }
.mo-badge { display: inline-flex; align-items: center; justify-content: center; gap: 4px; font-weight: 800; border-radius: 8px; white-space: nowrap; flex: none; font-variant-numeric: tabular-nums; }
.mo-badge.k { height: 22px; min-width: 32px; font-size: var(--fs-foot); letter-spacing: 0; border-radius: 6px; padding: 0 6px; }
.mo-badge.t { height: 52px; min-width: 76px; padding: 0 12px; font-size: var(--fs-title); border-radius: 10px; letter-spacing: -.01em; }
.mo-badge.hero { height: 112px; min-width: 188px; padding: 0 26px; font-size: 76px; border-radius: 22px; letter-spacing: -.03em; }
.mo-badge .i { width: .6em; height: .6em; }
/* the stop sign: its number, or (no number on the sign) its street, smaller */
.mo-chip { flex: none; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 58px; padding: 5px 9px 7px; border-radius: 9px; background: var(--accent); color: var(--on-accent); font-weight: 900; font-size: var(--fs-title); line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: 0; vertical-align: middle; }
.mo-chip small { font-size: 10px; font-weight: 800; letter-spacing: .12em; margin-bottom: 3px; }
.mo-chip.s { min-width: 50px; padding: 4px 8px 6px; font-size: var(--fs-title2); border-radius: 8px; }
.mo-chip.s small { font-size: 9px; margin-bottom: 2px; }
.mo-chip.word, .mo-chip.s.word { font-size: var(--fs-body); font-weight: 800; white-space: nowrap; max-width: 210px; overflow: hidden; text-overflow: ellipsis; padding-top: 6px; }
.mo-stage { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.mo-foot { flex: none; }
.mo-big { font-size: 76px; line-height: 1; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mo-big:empty { display: none; }
.mo-big .u { font-size: .6em; letter-spacing: -.02em; }
.mo-words { display: flex; align-items: center; flex-wrap: wrap; column-gap: 10px; row-gap: 6px; margin: 8px 0 0; min-height: 52px; font-size: var(--fs-title); line-height: 1.15; font-weight: 700; color: var(--mo-dim); }
.mo-words b { color: var(--mo-fg); font-weight: 800; }
.mo-accuracy { display: inline-block; margin: 10px 0 0; padding: 5px 10px; border: 1px solid var(--mo-dim); border-radius: 999px; color: var(--mo-fg); font-size: 13px; font-weight: 700; }
.mo-accuracy:empty, .mo-dest:empty { display: none; }
.mo-dest { margin: 8px 0 0; color: var(--mo-dim); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mo-buttons { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 20px; }
.mo-round { flex: none; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--mo-round); color: var(--mo-fg); }
.mo-round.off { color: var(--mo-dim); background: color-mix(in srgb, var(--mo-round) 50%, transparent); }
.mo-round.off .i { opacity: .55; }
.mo-link { color: var(--mo-fg); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; padding: 6px 0; position: relative; }
.mo-link::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }   /* 44 px to tap, the same size to look at */
.mo-link.off { flex: 0 1 auto; min-width: 0; font-size: var(--fs-foot); font-weight: 600; color: var(--mo-dim); text-align: center; text-decoration-color: var(--mo-faint); }
.mo-soft { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 56px; margin-top: 18px; border-radius: 16px; background: var(--mo-round); color: var(--mo-fg); font-size: var(--fs-row); font-weight: 700; }
.mo-soft span { color: var(--mo-dim); }

/* the stop line: an arc of stop dots, a bus on it (drawn by moments.js drawArc) */
.mo-arc { width: 100%; max-width: 346px; }
.mo-line { display: block; width: 100%; height: auto; overflow: visible; }
.mo-track { fill: none; stroke: var(--mo-faint); stroke-width: 6; stroke-linecap: round; stroke-dasharray: .1 12; }
.mo-done { fill: none; stroke: var(--mo-fg); stroke-width: 6; stroke-linecap: round; }
.mo-dot.past { fill: var(--mo-stroke); }
.mo-dot.next { fill: var(--mo-bgsolid); stroke: var(--mo-fg); stroke-width: 3.5; }
.mo-dot.togo { fill: var(--mo-fg); }
.mo-you { fill: var(--accent); }
.mo-ring { fill: none; stroke: var(--accent); stroke-width: 3; transform-box: fill-box; transform-origin: center; animation: mo-ring 2s ease-out infinite; }
.mo-ring.b { animation-delay: 1s; }
.mo-bus { transition: transform .9s var(--ease); }
.mo-busdot { stroke: var(--mo-stroke); stroke-width: 4; }
.mo-live { fill: none; stroke-width: 2; opacity: .5; transform-box: fill-box; transform-origin: center; animation: mo-live 2.4s ease-out infinite; }
@keyframes mo-ring { from { transform: scale(.6); opacity: .95; } to { transform: scale(2.1); opacity: 0; } }
@keyframes mo-live { from { transform: scale(1); opacity: .55; } to { transform: scale(1.7); opacity: 0; } }

/* 1 · Look up: the route badge is the hero (it's what's on the front of the bus); Here warms the screen */
.mo-hero { display: flex; flex-direction: column; align-items: center; margin-top: -8px; }
.mo-headsign { margin-top: 16px; font-size: var(--fs-title); font-weight: 700; letter-spacing: -.01em; color: var(--mo-dim); text-align: center; }
.mo-headsign b { color: var(--mo-fg); font-weight: 800; }
.mo-lookup .mo-glow { background: var(--mo-warm); }
.mo-lookup.warm .mo-glow { opacity: 1; }
.mo-lookup.warm { --mo-dim: rgba(27, 22, 20, .74); --mo-round: rgba(27, 22, 20, .10); }
:root[data-theme="dark"] .mo-lookup.warm { --mo-dim: rgba(255, 255, 255, .62); --mo-round: rgba(255, 255, 255, .16); }
.mo-lookup[data-s="here"] .mo-badge.hero { animation: mo-nudge 1.6s var(--spring, var(--ease)) infinite; }
@keyframes mo-nudge { 0%, 70%, 100% { transform: scale(1); } 80% { transform: scale(1.04); } }

/* 2 · Get off: the count is the one big thing; at one stop the giant becomes the verb and a glow breathes from below */
.mo-count { margin-top: 18px; text-align: center; font-size: var(--fs-title2); line-height: 1.1; font-weight: 700; color: var(--mo-dim); }
.mo-count b { display: block; font-size: 104px; line-height: 1; font-weight: 800; letter-spacing: -.04em; color: var(--mo-fg); font-variant-numeric: tabular-nums; }
.mo-count b.c { color: var(--accent); }
.mo-getoff .mo-glow { background: radial-gradient(90% 55% at 50% 100%, color-mix(in srgb, var(--accent) 55%, transparent) 0%, transparent 70%); transition: none; }
.mo-getoff[data-s="one"] .mo-glow { opacity: .45; animation: mo-breathe 2.6s ease-in-out infinite; }
:root[data-theme="dark"] .mo-getoff[data-s="one"] .mo-glow { opacity: .7; }
@keyframes mo-breathe { 0%, 100% { opacity: .45; } 50% { opacity: .85; } }

/* 3 · Change here: the mini Find arrow (tap: Find my stop), the spare time is the giant */
.mo-dial { position: relative; width: 190px; height: 190px; border-radius: 50%; display: grid; place-items: center; color: var(--mo-fg); }
.mo-dial::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--mo-ring); }
.mo-arrow { width: 124px; height: 124px; display: grid; place-items: center; transition: transform .2s linear; will-change: transform; }
.mo-arrow svg { width: 100%; height: 100%; fill: none; stroke: var(--mo-fg); stroke-width: 13; stroke-linecap: round; stroke-linejoin: round; }
:root[data-theme="dark"] .mo-arrow svg { filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .3)); }
.mo-tick { position: absolute; inset: -1px; border-radius: 50%; border: 3px solid transparent; border-top-color: var(--accent); transform: rotate(38deg); }
.mo-change[data-compass="live"] .mo-tick { display: none; }
.mo-n { position: absolute; top: 10px; left: 0; right: 0; text-align: center; font-size: var(--fs-sub); font-weight: 800; color: var(--mo-dim); opacity: 0; }
.mo-change[data-compass="off"] .mo-n { opacity: 1; }
.mo-change[data-compass="none"] .mo-arrow { opacity: 0; }
.mo-to { display: flex; align-items: center; gap: 12px; margin-top: 26px; font-size: var(--fs-title3); font-weight: 700; color: var(--mo-dim); }
.mo-dist { color: var(--mo-fg); font-weight: 800; font-variant-numeric: tabular-nums; }
.mo-way { margin: 10px 0 0; font-size: var(--fs-row); font-weight: 700; color: var(--mo-dim); text-align: center; }
.mo-way b { color: var(--mo-fg); }
.mo-hint { margin: 4px 0 0; font-size: var(--fs-sub); color: var(--mo-dim); text-align: center; }
.mo-hint:empty { display: none; }

/* walking: the next turn is the hero (turn by turn, nav.js; it doesn't turn with the compass), "In 40 m" the giant
   distance; the pointing arrow only for the last bit. The metres tick down a metre at a time (metres.js). */
.mo-turn { position: absolute; inset: 0; display: none; place-items: center; }
.mo-turn .turn { width: 118px; height: 118px; fill: none; stroke: var(--mo-fg); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.mo-change[data-nav="turn"] .mo-turn { display: grid; }
.mo-change[data-nav="turn"] .mo-arrow, .mo-change[data-nav="turn"] .mo-n, .mo-change[data-nav="turn"] .mo-tick { display: none; }
.mo-change[data-nav="turn"] .mo-dial { width: 160px; height: 160px; }
.mo-tdist { font-size: 52px; line-height: 1; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; margin-top: 14px; }
.mo-tdist:empty { display: none; }
.mo-then { margin: 4px 0 0; font-size: var(--fs-sub); font-weight: 600; color: var(--mo-dim); text-align: center; }
.mo-then:empty { display: none; }
.mo-change[data-nav="turn"] .mo-to { margin-top: 14px; font-size: var(--fs-row); }
.mo-change[data-nav="turn"] .mo-to .mo-chip { transform: scale(.8); }
.mo-dist .roll, .mo-tdist .roll { display: inline-block; animation: roll .42s var(--spring); }
.mo-navrow { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font-size: var(--fs-row); font-weight: 600; color: var(--mo-dim); }
.mo-navrow:empty { display: none; }
.mo-navrow b { color: var(--mo-fg); }
.mo-navrow .turn { width: 26px; height: 26px; flex: none; fill: none; stroke: var(--mo-fg); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.mo-tn { color: var(--mo-fg); font-weight: 800; font-variant-numeric: tabular-nums; }

/* 4 · Tight: the one amber screen; the edge pulses, the ring counts the spare seconds down, the giant is the verb */
.mo-tight .mo-glow { opacity: 1; box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--mo-edge) 70%, transparent), inset 0 0 70px 6px color-mix(in srgb, var(--mo-edge) 30%, transparent); animation: mo-edge 1.3s ease-in-out infinite; transition: none; }
:root[data-theme="dark"] .mo-tight .mo-glow { box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--mo-edge) 80%, transparent), inset 0 0 70px 6px color-mix(in srgb, var(--mo-edge) 45%, transparent); }
@keyframes mo-edge { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
.mo-cd { position: relative; width: 216px; height: 216px; display: grid; place-items: center; }
.mo-cd svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.mo-cd .tr { fill: none; stroke: var(--mo-ring); stroke-width: 10; }
.mo-cd .fg { fill: none; stroke: var(--warn); stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset 1s linear; }
.mo-n2 { font-size: 84px; line-height: 1; font-weight: 800; letter-spacing: -.04em; font-variant-numeric: tabular-nums; text-align: center; }
.mo-n2 small { display: block; margin-top: 4px; font-size: var(--fs-title3); letter-spacing: 0; font-weight: 700; color: var(--mo-dim); }
.mo-tight .mo-big { font-size: 66px; letter-spacing: -.035em; }

/* ✓ Off the 60: a moment of green between buses */
.mo-off { --mo-fg: #fff; background: radial-gradient(110% 75% at 50% 42%, #1E8A5A 0%, #137347 60%, #0C5634 100%); }
:root[data-theme="dark"] .mo-off { background: radial-gradient(110% 75% at 50% 42%, color-mix(in srgb, var(--ok) 55%, #000) 0%, color-mix(in srgb, var(--ok) 30%, #000) 60%, #06140d 100%); }
.mo-ok { width: 132px; height: 132px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .18); animation: mo-pop .4s var(--spring, var(--ease)) both; }
.mo-ok .i { width: 76px; height: 76px; stroke-width: 2.6; }
.mo-okt { margin-top: 22px; font-size: 44px; font-weight: 800; letter-spacing: -.02em; }
@keyframes mo-pop { from { transform: scale(.6); opacity: 0; } }

@media (max-height: 700px) {
  .mo-badge.hero { height: 88px; min-width: 150px; font-size: 60px; } .mo-count b { font-size: 84px; } .mo-big { font-size: 60px; }
  .mo-dial { width: 150px; height: 150px; } .mo-arrow { width: 100px; height: 100px; } .mo-cd { transform: scale(.82); }
}
@media (prefers-reduced-motion: reduce) {
  .mo, .mo.closing { animation-name: cs-fade; } .mo.closing { animation-name: cs-fadeout; }
  .mo-glow, .mo-bus, .mo-arrow, .mo-cd .fg { transition: none; }
  .mo-ring, .mo-live, .mo-badge.hero, .mo-getoff[data-s="one"] .mo-glow, .mo-tight .mo-glow, .mo-ok { animation: none; }
  .mo-ring.b, .mo-live { display: none; } .mo-dist .roll, .mo-tdist .roll { animation: none; }
}

/* ================= more moments (js/moments2.js, and Missed it / Cancelled in js/moments.js) =================
   Missed it / Cancelled, Pulling up, Leave now, You made it, Last one tonight, Meetup. The same shell and tokens; amber
   only in Cancelled's kicker and in Last one tonight's last half hour; green only for "arrived" and "there". */
.mo { --mo-on-ok: #fff; }
:root[data-theme="dark"] .mo { --mo-on-ok: #062616; }
.mo-prow { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 36px; }
.mo-prow .phase { min-width: 0; }
.mo-badge.s { height: 26px; min-width: 38px; padding: 0 7px; font-size: var(--fs-sub); border-radius: 7px; letter-spacing: 0; }
.mo-struck { position: relative; display: inline-flex; opacity: .6; }
.mo-struck::after { content: ""; position: absolute; left: -5px; right: -5px; top: 50%; height: 2.5px; margin-top: -1.25px; border-radius: 2px; background: var(--mo-fg); transform: rotate(-16deg); }
.mo-kicker .t { color: var(--mo-fg); letter-spacing: 0; text-transform: none; font-size: var(--fs-sub); font-variant-numeric: tabular-nums; }
.mo-kicker .i { width: 16px; height: 16px; stroke-width: 2.4; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.mo-kicker.ok { color: var(--ok); }
.mo-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 9px; margin: 8px 0 0; font-size: var(--fs-row); font-weight: 700; color: var(--mo-dim); font-variant-numeric: tabular-nums; }
.mo-meta:empty { display: none; }
.mo-meta b { color: var(--mo-fg); font-weight: 800; }
.mo-meta i { font-style: normal; opacity: .55; }
.mo-pair { display: flex; gap: 12px; margin-top: 18px; }
.mo-pair:empty { display: none; }
.mo-pair .mo-soft { margin-top: 0; flex: 1; min-width: 0; }
.mo-soft .i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mo-soft.cta { background: var(--accent); color: var(--on-accent); font-weight: 800; }
.mo-soft.sm { min-height: 48px; font-size: var(--fs-sub); border-radius: 14px; }
.mo-soft.on { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 60%, transparent); }
.mo-soft[hidden] { display: none; }
.mo-soft:active { transform: scale(.98); }
.mo-soft:disabled { opacity: .75; }
.mo-round.none { visibility: hidden; }
.mo-av { flex: none; display: inline-grid; place-items: center; border-radius: 50%; background: var(--c); color: #1D1D1D; font-weight: 800; line-height: 1; }
.mo-av.a-m { width: 34px; height: 34px; font-size: var(--fs-body); }
.mo-av.a-l { width: 52px; height: 52px; font-size: var(--fs-title2); }
.mo-priv { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 14px 0 0; font-size: var(--fs-foot); font-weight: 700; color: var(--mo-dim); text-align: center; }
.mo-priv .i { width: 14px; height: 14px; stroke-width: 2.2; flex: none; }
.mo-gtrack { opacity: .45; }
.mo-line text { font-family: inherit; }

/* Missed it / Cancelled: Look up's stage for the next one; the bus that got away drifts off the end of the line */
.mo-ghost { opacity: .3; }
.mo-drift { animation: mo-drift 3.2s ease-in-out infinite alternate; }
@keyframes mo-drift { from { transform: translate(-5px, -6px); } to { transform: translate(4px, 5px); } }
.mo-missed .mo-headsign .mo-badge { vertical-align: 3px; margin: 0 2px; }

/* Pulling up: the mate rides the arc as their initial; "Here" warms the screen, like Look up */
.mo-who { font-size: var(--fs-title); }
.mo-pull .mo-glow { background: var(--mo-warm); }
.mo-pull.warm .mo-glow { opacity: 1; }
.mo-pull.warm { --mo-dim: rgba(27, 22, 20, .74); --mo-round: rgba(27, 22, 20, .10); }
:root[data-theme="dark"] .mo-pull.warm { --mo-dim: rgba(255, 255, 255, .62); --mo-round: rgba(255, 255, 255, .16); }
.mo-pull .mo-headsign { margin-top: 10px; font-size: var(--fs-title3); }
.mo-pull .mo-words { font-size: var(--fs-title2); }

/* Leave now: the walk's first turn in the dial (nav.js), the metres to it, then the way out, small, at the bottom */
.mo-ldial { width: 160px; height: 160px; }
.mo-leave .mo-turn { display: grid; }
.mo-leave .mo-turn .turn { width: 116px; height: 116px; }
.mo-leave .mo-turn .i { width: 84px; height: 84px; stroke-width: 1.6; }
.mo-ndist { margin-top: 22px; font-size: 34px; line-height: 1; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.mo-ndist:empty { display: none; }
.mo-nnext { margin: 6px 0 0; font-size: var(--fs-title3); font-weight: 700; color: var(--mo-dim); text-align: center; }
.mo-nnext b { color: var(--mo-fg); font-weight: 800; }
.mo-nthen { margin: 10px 0 0; font-size: var(--fs-sub); font-weight: 700; color: var(--mo-dim); text-align: center; }
.mo-nthen:empty { display: none; }
.mo-leave .mo-big { font-size: 66px; letter-spacing: -.035em; }
.mo-leave #mo-start { margin-top: 16px; }
.mo-leave .mo-pair { margin-top: 10px; }
.mo-leave .mo-buttons { margin-top: 12px; }

/* You made it: the arc finished in the routes' own colours, a green check, a few quiet specks; late is said plainly */
.mo-made .mo-glow { background: radial-gradient(90% 50% at 50% 100%, color-mix(in srgb, var(--ok) 40%, transparent) 0%, transparent 70%); }
.mo-made.glow .mo-glow { opacity: .4; }
:root[data-theme="dark"] .mo-made.glow .mo-glow { opacity: .55; }
.mo-tickdone { transform-box: fill-box; transform-origin: center; animation: mo-pop .4s var(--spring, var(--ease)) both; }
.mo-specks circle { transform-box: fill-box; transform-origin: center; animation: mo-pop .5s .15s var(--spring, var(--ease)) both; }
.mo-legs { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 9px; margin-top: 10px; font-size: var(--fs-row); font-weight: 700; color: var(--mo-dim); }
.mo-legs b { color: var(--mo-fg); font-weight: 800; font-variant-numeric: tabular-nums; }
.mo-legs .sep { opacity: .5; font-weight: 800; }
.mo-legs .i { width: 18px; height: 18px; color: var(--mo-fg); }
.mo-stats { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; margin-top: 26px; }
.mo-stats.n2 { grid-template-columns: repeat(2, 1fr); }
.mo-stats div { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: var(--fs-title3); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.mo-stats div + div { border-left: 1px solid var(--mo-faint); }
.mo-stats small { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--mo-dim); }
.mo-big .u.ok { color: var(--ok); }
.mo-big .u.dim { color: var(--mo-dim); }
.mo-made .mo-words { min-height: 0; }
.mo-made .mo-stage { display: grid; place-items: center; }
.mo-made-icon { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; background: var(--mo-round); color: var(--mo-fg); }
.mo-made-icon .i { width: 44px; height: 44px; }
.mo-made .mo-buttons { justify-content: center; }
.mo-made #mo-x, .mo-made #mo-off { display: none; }
.mo-made #mo-done { min-width: 160px; min-height: 54px; font-size: 18px; }
.mo-getoff .mo-stage { display: grid; place-items: center; }
.mo-getoff-sign { width: 112px; height: 112px; border: 5px solid var(--accent); border-radius: 24px; display: grid; place-items: center; color: var(--accent); }
.mo-getoff-sign .i { width: 58px; height: 58px; }
.mo-getoff .mo-big { font-size: clamp(44px, 12vw, 76px); white-space: normal; }
.mo-getoff .mo-buttons, .mo-getoff .mo-jb, .mo-getoff .mo-accuracy, .mo-getoff .mo-dest { display: none; }
.mo-getoff #mo-back { min-height: 54px; }
.mo-rate { flex: none; width: auto; margin: 0; padding: 0 16px; border-radius: 999px; }

/* Last one tonight: tonight's departures on the arc, the last one in the accent, a faint line out to the moon */
.mo-hs { font-size: var(--fs-title3); line-height: 1.15; font-weight: 800; }
.mo-hs .mo-badge { vertical-align: 3px; }
.mo-night { margin-top: 12px; font-size: var(--fs-title3); font-weight: 700; color: var(--mo-dim); }
.mo-night b { color: var(--mo-fg); font-weight: 800; }
.mo-nt { font-weight: 800; font-size: var(--fs-row); fill: var(--accent); font-variant-numeric: tabular-nums; }
.mo-nownow { fill: var(--mo-fg); stroke: var(--mo-stroke); stroke-width: 3; }
.mo-moon { fill: none; stroke: var(--mo-dim); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.mo-lastbus.urgent .mo-glow { opacity: 1; box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--mo-edge) 70%, transparent), inset 0 0 70px 6px color-mix(in srgb, var(--mo-edge) 30%, transparent); animation: mo-edge 1.3s ease-in-out infinite; transition: none; }
:root[data-theme="dark"] .mo-lastbus.urgent .mo-glow { box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--mo-edge) 80%, transparent), inset 0 0 70px 6px color-mix(in srgb, var(--mo-edge) 45%, transparent); }
.h-last { margin-top: 10px; }
.h-last .iconbtn { flex: none; }

/* Meetup: each member's line into the pin (nearer = sooner), then the list */
.mo-meet .mo-stage { flex: 1 1 250px; }
.mo-cv { position: relative; width: 346px; max-width: 100%; }
.mo-cv svg { display: block; width: 100%; height: auto; overflow: visible; }
.mo-cdone { fill: none; stroke: var(--mo-fg); stroke-width: 5; stroke-linecap: round; opacity: .9; }
.mo-ctogo { fill: none; stroke: var(--mo-faint); stroke-width: 6; stroke-linecap: round; stroke-dasharray: .1 12; }
.mo-clab { position: absolute; transform: translateY(-50%); font-size: var(--fs-sub); font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mo-clab.l { transform: translate(-100%, -50%); }
.mo-clab.b { transform: translate(-50%, -50%); }
.mo-meet .mo-words { min-height: 0; font-size: var(--fs-title3); }
.mo-who-list { margin-top: 14px; display: flex; flex-direction: column; }
.mo-who-list:empty { display: none; }
.mo-who-list .w { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; column-gap: 12px; height: 46px; border-top: 1px solid var(--mo-faint); }
.mo-who-list .w:last-child { border-bottom: 1px solid var(--mo-faint); }
.mo-who-list .w b { font-size: var(--fs-row); font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mo-who-list .w .d { font-size: var(--fs-body); font-weight: 700; color: var(--mo-dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mo-who-list .w .d em { font-style: normal; color: var(--mo-fg); font-weight: 800; }
.mo-who-list .w .d.ok { color: var(--ok); font-weight: 800; }

@media (max-height: 700px) {
  .mo-ldial { width: 120px; height: 120px; } .mo-leave .mo-turn .turn { width: 88px; height: 88px; } .mo-ndist { margin-top: 12px; font-size: var(--fs-title); }
  .mo-stats { margin-top: 14px; } .mo-who-list .w { height: 38px; } .mo-cv { width: 260px; } .mo-clab { font-size: var(--fs-foot); }
  .mo-pair { margin-top: 12px; } .mo-meta { font-size: var(--fs-body); }
}
@media (prefers-reduced-motion: reduce) {
  .mo-drift, .mo-tickdone, .mo-specks circle, .mo-lastbus.urgent .mo-glow { animation: none; }
}
/* (the link is its words, not the whole row between × and the buzz; asked twice before it turns them off) */
.mo-link.off.sure { color: var(--mo-fg); font-weight: 800; }

.h-night { margin-top: 10px; }

/* the stage cards (moments.js glance, 3.9.52): the minutes, one line, on route */
.mo-glance .mo-gl { display: flex; justify-content: center; margin-top: 8px; color: var(--mo-dim); }
.mo-glance .mo-gl .i { width: 64px; height: 64px; stroke-width: 1.8; }
.mo-glance .mo-gline { margin: 14px 0 0; text-align: center; font-size: var(--fs-title3); font-weight: 800; color: var(--mo-dim); min-height: 28px; }
.mo-glance .mo-gline .ok { color: var(--ok); } .mo-glance .mo-gline .bad { color: var(--bad); }
.mo-glance .mo-words { font-size: var(--fs-title3); justify-content: center; text-align: center; }
.mo-glance[data-tone="ok"] .mo-gl { color: var(--ok); }
.mo-glance[data-tone="bad"] .mo-gl, .mo-glance[data-tone="warn"] .mo-gl { color: var(--warn); }
/* the trip card's drive and delay lines */
.drive-route { margin: 4px 0 0; font-size: var(--fs-small, 14px); font-weight: 700; } .drive-route.ok { color: var(--ok); } .drive-route.bad { color: var(--warn); }
.drive-verdict { display: block; margin-top: 4px; font-weight: 600; } .drive-verdict.miss { color: var(--bad); font-weight: 700; }
.ride-delay { display: block; margin: 2px 0 0; padding: 0; font-size: var(--fs-small, 14px); font-weight: 600; color: var(--muted, inherit); text-align: left; min-height: 0; }
.ride-delay.warn { color: var(--warn); } .ride-delay.bad { color: var(--bad); }
button.ride-delay { background: none; border: 0; text-decoration: underline; text-underline-offset: 3px; }
.dg-btn { margin: 10px 0 0; }
.mv-marker.dgme { width: 0; height: 0; min-width: 0; padding: 0; background: none !important; border: 0; box-shadow: none !important; animation: none; z-index: 5; }
.mv-marker.dgme::after, .mv-marker.dgme::before { display: none; }
.dg-me { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.dg-me .dg-cone { position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; background: conic-gradient(from -30deg at 50% 50%, rgba(26, 115, 232, .55) 0 60deg, transparent 60deg); border-radius: 50%; transform: rotate(var(--hd, 0deg)); -webkit-mask: radial-gradient(circle, transparent 0 9px, #000 10px); mask: radial-gradient(circle, transparent 0 9px, #000 10px); }
.dg-me .dg-dot { position: absolute; left: -13px; top: -13px; width: 26px; height: 26px; border-radius: 50%; background: #1A73E8; border: 4px solid #fff; box-shadow: 0 0 0 3px rgba(26, 115, 232, .35), 0 2px 8px rgba(0, 0, 0, .4); }
.dg-me.off .dg-dot { background: var(--warn, #C26A00); box-shadow: 0 0 0 3px rgba(194, 106, 0, .35), 0 2px 8px rgba(0, 0, 0, .4); }
.mo-arr { margin: 10px 0 0; text-align: center; font-size: var(--fs-row); font-weight: 700; color: var(--mo-dim); min-height: 22px; } .mo-arr b { color: var(--mo-fg); }

/* the next turn on the last walk (full-screen glance): big step, small "then" */
.mo-wstep { margin-top: 14px; max-width: 346px; text-align: center; }
.mo-wstep:empty { display: none; }
.mo-wstep .ws-now { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: var(--fs-title3); font-weight: 700; line-height: 1.2; }
.mo-wstep .ws-now .turn { width: 34px; height: 34px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.mo-wstep .ws-then { margin-top: 6px; font-size: var(--fs-sub); color: var(--mo-dim); }
.mo-wstep.off .ws-now { color: var(--mo-edge); }
/* the drive's next turn (3.9.54 had none of this: the arrow was an unsized, filled shape): big arrow, the turn in large type, the one after in small */
.drive-nav { display: flex; align-items: center; gap: 14px; margin: 10px 0 0; padding: 12px 14px; border-radius: 16px; background: var(--accent, #1A73E8); color: var(--on-accent, #fff); }
.drive-nav .dn-arrow { flex: none; display: grid; place-items: center; width: 52px; height: 52px; }
.drive-nav .turn { width: 48px; height: 48px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.drive-nav .dn-text { min-width: 0; display: grid; gap: 2px; }
.drive-nav .dn-now { font-size: var(--fs-title3); line-height: 1.15; font-weight: 800; }
.drive-nav .dn-then { font-size: var(--fs-small, 14px); opacity: .88; }
.drive-nav.off { background: var(--warn, #C26A00); }