/* Carpool on the Ride tab (js/front/carpool.js, carpool-seat.js). */
.cp-tabs{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0 20px}
.cp-tab{display:grid;gap:4px;align-content:center;min-height:68px;padding:14px;border-radius:16px;border:1.5px solid #E2E8F0;background:#fff;color:#0F172A;text-align:left;box-shadow:0 4px 0 #E2E8F0;transition:transform .14s cubic-bezier(.3,1.35,.5,1),box-shadow .14s}
.cp-tab b{font:800 16px/1.2 "Plus Jakarta Sans",system-ui,sans-serif}
.cp-tab small{color:#64748B;font-size:12px;line-height:1.3}
.cp-tab.on{background:#0F172A;border-color:#0F172A;color:#fff;box-shadow:0 4px 0 #020617}
.cp-tab.on small{color:#CBD5E1}
.cp-tab:active{transform:translateY(3px);box-shadow:0 1px 0 #E2E8F0}
/* Ride share greyed out: none offered or Sunday (js/front/ride-status.js, step 102); a tap shows a note */
.cp-tab.off{background:#F1F5F9;border-color:#E2E8F0;color:#94A3B8;box-shadow:none}
.cp-tab.off small{color:#94A3B8}
.cp-tab.off:active{transform:none}
.sharecard.off{background:#E2E8F0;color:#64748B;box-shadow:0 6px 0 #CBD5E1}
.sharecard.off .kick,.sharecard.off .share-txt>span:not(.kick):not(.btn){color:#64748B}
.sharecard.off .share-art{filter:grayscale(1);opacity:.5}
.sharecard.off .share-road,.sharecard.off .share-b{animation:none}
.sharecard.off .btn{background:#CBD5E1;color:#475569;box-shadow:none}
.cp-intro{margin-top:0}
.cp-map{isolation:isolate;height:min(46vh,340px);border-radius:18px;overflow:hidden;background:#F6F4F4;border:1.5px solid #E2E8F0;margin:10px 0}
.cp-map.small{height:min(34vh,240px)}
.cp-chips{margin:0 0 6px}
.cp-msg{margin:6px 0 10px;color:#334155;font-size:14px}
.cp-line{stroke:#0F172A;stroke-linecap:round;transition:opacity .3s}
.cp-line.ghost{opacity:.3}
.cp-line.ghost.far{opacity:.15}
.cp-line.fit{stroke:#DC2626;opacity:.95;filter:drop-shadow(0 0 1.5px #fff)}
.cp-line.fit.full{stroke:#94A3B8}
.cp-flag{display:block;width:26px;height:30px;background:linear-gradient(#DC2626,#DC2626) 2px 0/3px 30px no-repeat;position:relative}
.cp-flag::after{content:"";position:absolute;left:5px;top:1px;width:18px;height:13px;background:repeating-conic-gradient(#0F172A 0 25%,#fff 0 50%) 0 0/9px 6.5px;border-radius:2px;box-shadow:0 1px 3px rgba(0,0,0,.4)}
.cp-car{display:block;width:22px;height:22px;border-radius:50%;background:#0F172A;border:3px solid #fff;box-shadow:0 0 0 2px #0F172A,0 2px 8px rgba(0,0,0,.4)}
.cp-list{display:grid;gap:10px}
.cp-card{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;border-radius:16px;border:1.5px solid #E2E8F0;background:#fff;color:#0F172A;text-align:left;box-shadow:0 4px 0 #E2E8F0;animation:cpin .42s cubic-bezier(.3,1.35,.5,1) both}
.cp-card.full{opacity:.55}
.cp-dots{flex:none;width:30px;height:4px;background:radial-gradient(circle,#DC2626 45%,transparent 50%) 0 0/7.5px 4px repeat-x}
.cp-who{flex:1;min-width:0;display:grid;gap:2px}
.cp-who b{font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-who small{color:#64748B;font-size:12px;line-height:1.3}
.cp-fare{font:800 17px/1 "Plus Jakarta Sans",system-ui,sans-serif}
@keyframes cpin{from{transform:translateY(14px);opacity:0}}

/* the main page card (index.html 2a) */
.sharecard{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;padding:16px;border-radius:22px;background:#0F172A;color:#fff;text-decoration:none;box-shadow:0 6px 0 #020617}
.sharecard .kick{color:#FCA5A5;margin:0}
.share-txt{display:grid;gap:6px}
.share-txt>b{font:800 20px/1.2 "Plus Jakarta Sans",system-ui,sans-serif}
.share-txt>span:not(.kick):not(.btn){color:#CBD5E1;font-size:14px;line-height:1.4}
.share-txt .btn{justify-self:start;margin-top:4px}
.share-art{width:120px;height:68px}
.share-road{fill:none;stroke:#DC2626;stroke-width:4;stroke-linecap:round;stroke-dasharray:1 10;animation:cproad 1.6s linear infinite}
.share-a,.share-b{fill:#fff}
.share-b{transform-box:fill-box;transform-origin:center;animation:cpjoin 2.4s ease-in-out infinite}
.share-pin{fill:#DC2626;stroke:#fff;stroke-width:2;transform-origin:152px 70px;animation:cppinbob 2.4s cubic-bezier(.3,1.5,.5,1) infinite}
@keyframes cproad{to{stroke-dashoffset:-22}}
@keyframes cpjoin{0%,40%{transform:scale(1)}50%{transform:scale(1.5)}60%,100%{transform:scale(1)}}
@keyframes cppinbob{0%,70%,100%{transform:none}80%{transform:translateY(-6px)}}
@media (max-width:420px){.sharecard{grid-template-columns:1fr}.share-art{width:100%;height:56px}}

/* steps: 1 Where to · 2 Pick a ride · 3 Ask to join */
.cp-steps{list-style:none;display:flex;gap:6px;margin:0 0 10px;padding:0}
.cp-step{flex:1;display:flex;align-items:center;gap:6px;min-width:0;color:#94A3B8;font:700 12px/1.2 "Plus Jakarta Sans",system-ui,sans-serif}
.cp-step b{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#E2E8F0;color:#64748B;font-size:12px;transition:background .25s,color .25s,transform .3s cubic-bezier(.3,1.35,.5,1)}
.cp-step span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-step.on{color:#0F172A}
.cp-step.on b{background:#DC2626;color:#fff;transform:scale(1.12)}
.cp-step.done b{background:#0F172A;color:#fff}
.cp-q{margin:0 0 8px;font:800 20px/1.2 "Plus Jakarta Sans",system-ui,sans-serif;color:#0F172A}
.cp-set,.cp-back{width:100%;margin:4px 0 10px}

/* the map with the pin fixed in its middle: it lifts while the map moves and drops with a bounce */
.cp-mapwrap{position:relative}
.cp-pin{position:absolute;left:50%;top:50%;z-index:500;width:36px;height:48px;margin:-48px 0 0 -18px;pointer-events:none}
.cp-pin svg{position:relative;display:block;width:36px;height:48px;filter:drop-shadow(0 3px 4px rgba(15,23,42,.35));transition:transform .18s ease-out}
.cp-pin-shadow{position:absolute;left:11px;bottom:-4px;width:14px;height:6px;border-radius:50%;background:rgba(15,23,42,.35);transition:transform .18s ease-out,opacity .18s}
.cp-pin-ring{position:absolute;left:3px;bottom:-14px;width:30px;height:30px;border-radius:50%;border:2px solid #DC2626;opacity:0;transform:scale(.2)}
.cp-pin.lift svg{transform:translateY(-14px)}
.cp-pin.lift .cp-pin-shadow{transform:scale(.6);opacity:.5}
.cp-pin.drop svg{animation:cppindrop .5s cubic-bezier(.3,1.5,.5,1)}
.cp-pin.drop .cp-pin-ring{animation:cpring .6s ease-out}
@keyframes cppindrop{0%{transform:translateY(-14px)}55%{transform:translateY(2px) scaleY(.92)}100%{transform:none}}
@keyframes cpring{0%{opacity:.8;transform:scale(.2)}100%{opacity:0;transform:scale(1.6)}}
.cp-plant{animation:cpplant .45s cubic-bezier(.3,1.5,.5,1) both;transform-origin:3px 30px}
@keyframes cpplant{from{transform:translateY(-24px) scale(.6);opacity:0}}
.cp-me{display:block;width:20px;height:20px;border-radius:50%;background:#2563EB;border:3px solid #fff;box-shadow:0 0 0 6px rgba(37,99,235,.18),0 2px 6px rgba(0,0,0,.35)}
.cp-price{display:grid;justify-items:end;gap:2px}
.cp-was{color:#94A3B8;font-size:12px}
.cp-wait{margin:10px 0 0;padding:10px 12px;border-radius:12px;background:#FEF3C7;color:#78350F;font:700 13px/1.35 "Plus Jakarta Sans",system-ui,sans-serif}

/* bottom sheet */
.cp-veil{position:fixed;inset:0;z-index:3000;background:rgba(15,23,42,.45);display:flex;align-items:flex-end;justify-content:center;animation:cpveil .2s ease-out}
.cp-veil.out{animation:cpveil .2s ease-in reverse forwards}
.cp-veil.out .cp-sheet{transform:translateY(100%);transition:transform .2s ease-in}
.cp-sheet{width:100%;max-width:560px;max-height:88vh;display:flex;flex-direction:column;overflow:hidden;background:#fff;border-radius:24px 24px 0 0;box-shadow:0 -12px 40px -12px rgba(15,23,42,.5);animation:cpup .45s cubic-bezier(.3,1.35,.5,1)}
@keyframes cpup{from{transform:translateY(100%)}}
@keyframes cpveil{from{background:rgba(15,23,42,0)}}
/* The rounded box never scrolls; only the part under the header does (a scrolling round box flickered at the
   top corners on Android Chrome). */
.cp-bar{flex:none;padding:8px 16px 4px;background:#fff}
.cp-scroll{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;padding:0 16px calc(18px + env(safe-area-inset-bottom))}
.cp-grab{width:40px;height:5px;border-radius:3px;background:#CBD5E1;margin:0 auto 8px}
.cp-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.cp-head h2{margin:0;font:800 20px/1.2 "Plus Jakarta Sans",system-ui,sans-serif}
.cp-x{width:40px;height:40px;border-radius:12px;border:1.5px solid #E2E8F0;background:#fff;font:700 22px/1 system-ui;color:#0F172A}
.cp-sub{margin:6px 0 10px;color:#475569;font-size:14px;line-height:1.4}
.cp-lbl{margin:14px 0 6px;color:#64748B;font:800 11px/1 "Plus Jakarta Sans",system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase}
.cp-facts{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:8px}
.cp-facts span{display:grid;justify-items:center;padding:10px 4px;border-radius:14px;background:#F6F4F4}
.cp-facts b{font:800 20px/1 "Plus Jakarta Sans",system-ui,sans-serif}
.cp-facts small{color:#64748B;font-size:12px;margin-top:2px}
.cp-facts .bad{background:#FEE2E2;color:#991B1B}
.cp-yours{display:grid;gap:4px;margin:12px 0 0;padding:14px;border-radius:16px;background:#0F172A;color:#fff}
.cp-yours small{color:#CBD5E1;font-size:12px;line-height:1.35}
.cp-yours>b,.cp-big{font:800 32px/1.1 "Plus Jakarta Sans",system-ui,sans-serif;color:#fff}
.cp-go{width:100%;margin-top:16px}
.cp-go[disabled],.chip[disabled]{opacity:1;background:#E2E8F0;color:#94A3B8;border-color:#E2E8F0;box-shadow:none;pointer-events:none}

/* the seat */
.cp-seat{display:grid;gap:10px}
.cp-seat .btn{width:100%}
.cp-top{display:flex;align-items:center;gap:12px}
.cp-h{margin:0;font:800 19px/1.2 "Plus Jakarta Sans",system-ui,sans-serif}
.cp-top .cp-sub{margin:2px 0 0}
.cp-ring{--k:1;flex:none;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;font:800 13px/1 "Plus Jakarta Sans",system-ui,sans-serif;color:#0F172A;
  background:radial-gradient(closest-side,#fff 80%,transparent 82% 100%),conic-gradient(#DC2626 calc(var(--k) * 360deg),#E2E8F0 0);transition:background .9s linear}

/* the money roll (shared/lib/utils/fare-ticker.js) */
.tk-down{color:#4ADE80!important;animation:tkflash .9s ease-out}
.cp-card .tk-down,.cp-facts .tk-down{color:#16A34A!important}
.tk-up{color:#FCA5A5!important}
@keyframes tkflash{30%{text-shadow:0 0 14px rgba(74,222,128,.8)}}

@media (prefers-reduced-motion:reduce){.share-road,.share-b,.share-pin,.cp-card,.cp-sheet,.cp-veil,.tk-down,.cp-pin svg,.cp-pin-ring,.cp-plant{animation:none}.cp-ring,.cp-tab,.cp-step b,.cp-pin svg,.cp-pin-shadow{transition:none}}