/* A journey card's chips (ride-card.js), on the dashboard and on Discovery, on a line under its
   name — its status in three variants, one per status: .pre (À venir), .live (EN DIRECT), and the
   base look for Terminée, which a badge such as the dashboard's visibility wears too. Only .live
   shouts and pulses, since on a journey that has not started nothing is happening yet. */
.ride .chips{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 8px;}
.chip{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:999px;font-size:11.5px;font-weight:600;
  background:var(--surface2);color:var(--fg);}
.chip.pre{color:var(--pre-ink);background:var(--pre);}
.chip.live{color:var(--live-ink);background:var(--live);}
.chip.live .dot{width:7px;height:7px;border-radius:50%;background:var(--live-ink);animation:pulse 1.5s infinite;}
@keyframes pulse{0%{opacity:1}50%{opacity:.35}100%{opacity:1}}

/* A card with no cover picture: the sketch of its route in a band (ride-card.js sketchHtml). */
/* A card's cover, its picture or its route's band, one height on every card. */
:root{--cover-h:80px;}
/* The band's grey stands apart from the page's (--surface2), which a light page is painted in. */
.ride .cover.sketch{--band:light-dark(#e2e8f0,var(--surface2));background:var(--band);}
.ride .cover.sketch svg{display:block;width:100%;height:100%;overflow:visible;}
.sketch polyline{fill:none;stroke-linecap:round;stroke-linejoin:round;}
.sketch .ahead{stroke:color-mix(in srgb,var(--fg) 40%,transparent);stroke-width:2;stroke-dasharray:4 4;}
.sketch .ridden{stroke:var(--h-ink);stroke-width:3;}
.sketch .from{fill:var(--band);stroke:var(--fg);stroke-width:2;}
.sketch .to{fill:var(--fg);}
.sketch text{font:600 11px var(--font-body);letter-spacing:.04em;text-transform:uppercase;fill:var(--muted);}
.sketch-rider{width:30px;height:30px;display:flex;align-items:center;justify-content:center;}