/* Takeaway Pacific · front door styles (index.html): Leaflet map, logo, app screens: shared pieces. Linked in order; the cascade depends on it. */
/* =========================================================
   LEAFLET MAP, brand duotone (teal / cream)
   Tiles are OSM raster images; a CSS filter chain turns them into a
   two-tone chart. Markers are our own DOM, not Leaflet's PNGs.
   ========================================================= */
.mapcard{cursor:pointer;isolation:isolate;transition:transform 160ms var(--out)}
.mapcard:active{transform:scale(.985)}
.mapcard .expand{z-index:500}
.lmap{position:relative;z-index:0;isolation:isolate;width:100%;background:#D6ECE6;font-family:var(--sans)}
.mapcard .lmap{height:250px}
.lmap.leaflet-container{background:#CFE6DF;outline:0}
.lmap .leaflet-tile-pane{filter:grayscale(1) sepia(.5) hue-rotate(128deg) saturate(1.5) brightness(1.06) contrast(.88)}
.lmap::after{content:"";position:absolute;inset:0;z-index:401;pointer-events:none;background:linear-gradient(180deg,rgba(251,247,240,.18),rgba(15,23,42,.08));box-shadow:inset 0 0 60px rgba(15,23,42,.12)}
.lmap .leaflet-control-attribution{font:500 10px/1.4 var(--sans);background:rgba(251,247,240,.88);color:var(--ink-2);border-top-left-radius:8px}
.lmap .leaflet-control-attribution a{color:var(--lagoon-deep)}
.lmap .leaflet-control-zoom{border:0;box-shadow:var(--sh);border-radius:14px;overflow:hidden;margin-top:calc(var(--sat) + 70px)}
.lmap .leaflet-control-zoom a{width:44px;height:44px;line-height:44px;background:var(--cream);color:var(--midnight);border-color:var(--line)}
.tp-route{stroke:var(--midnight);stroke-opacity:.75;animation:dash 1.4s var(--sine) infinite}
@keyframes dash{to{stroke-dashoffset:-12}}
.tp-pin{width:30px;height:40px}
.tp-pin svg{width:30px;height:40px;filter:drop-shadow(0 4px 6px rgba(15,23,42,.35))}
.tp-pin i{position:absolute;left:3px;top:25px;width:24px;height:24px;margin:0;border-radius:50%;background:var(--coral);opacity:.35;z-index:-1;animation:halo 2.2s var(--in) infinite}
.tp-drv{width:18px;height:18px}
.tp-drv b{position:absolute;inset:4px;border-radius:50%;background:var(--lagoon);border:2px solid var(--cream);box-shadow:0 2px 6px rgba(15,23,42,.35)}
.tp-drv i{position:absolute;inset:0;border-radius:50%;background:var(--lagoon);animation:halo 2.6s var(--in) infinite}
.tp-dest{width:14px;height:14px;border-radius:50%;border:3px solid var(--midnight);background:var(--cream)}
#mapfs .lmap{position:absolute;inset:0;height:auto}
#mapfs .maphead{position:absolute;left:0;right:0;top:0;z-index:600;justify-content:space-between;pointer-events:none}
#mapfs .maphead>*{pointer-events:auto}
#mapfs .mapsheet{position:absolute;left:0;right:0;bottom:0;z-index:600;margin:0 12px calc(var(--sab) + 12px)}
.ms-row{display:flex;align-items:center;gap:12px}
.ms-pin{width:42px;height:42px;flex:none;border-radius:14px;display:grid;place-items:center;background:rgba(220,38,38,.12);color:var(--coral)}
.ms-txt{flex:1;min-width:0}
.ms-txt b{display:block;font:800 16.4px/1.15 var(--serif)}
.ms-txt small{display:block;margin-top:2px;font-size:12.5px;color:var(--ink-2)}
.ms-ref{width:48px;height:48px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--midnight);color:var(--ivory)}
.ms-ref.busy .ic{animation:spin 1s var(--sine) infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.ms-note{margin-top:14px}
.ms-note .input{min-height:48px}


/* install explainer (after onboarding) */
.inst-steps{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:12px}
.inst-steps li{display:flex;align-items:center;gap:12px;font-size:15px}
.inst-steps .n{width:30px;height:30px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--ivory);font-weight:700;font-size:13px}
.inst-steps .ic{width:22px;height:22px;color:var(--lagoon-deep)}
.inst-arrow{display:flex;justify-content:center;margin-top:18px;color:var(--coral)}
.inst-arrow .ic{width:30px;height:30px;transform:rotate(90deg);animation:cue 1.6s var(--sine) infinite alternate}
.info-in .btn{margin-top:18px;width:100%}

/* toast */
.toast{position:fixed;left:16px;right:16px;bottom:calc(var(--dock) + 10px);max-width:398px;margin-inline:auto;z-index:70;padding:13px 16px;border-radius:16px;background:var(--midnight);color:var(--ivory);font-size:14px;box-shadow:var(--sh-lg);transform:translateY(12px);opacity:0;pointer-events:none;transition:transform 260ms var(--in),opacity 200ms var(--out)}
.toast.show{transform:none;opacity:1}
body.in-layer .toast{bottom:calc(var(--sab) + 84px)}

/* paper: the triangle pattern behind every light surface */
#ob,#shell,#menu,#vendor,#info{background-image:var(--tonga);background-size:128px 128px}

/* =========================================================
   LOGO
   ========================================================= */
.logo{display:block;flex:none;width:58px;height:38px;background:var(--logo) center/contain no-repeat}
.lockup .logo{width:62px;height:41px}
.shead .logo{width:50px;height:33px}
.logo.sm{width:44px;height:29px}

/* =========================================================
   APP SCREENS: shared pieces
   ========================================================= */
.shell-art.short{height:150px}
/* tab banners: half height, title + line overlaid on a dark gradient */
.shell-art.banner{height:auto;min-height:76px;display:flex;align-items:flex-end}
.shell-art.banner.food{background:linear-gradient(90deg,#1C1917,#7C2D12)}
.shell-art.banner.shop{background:#F8F5F2}
.shell-art.banner.shop::after{background:linear-gradient(90deg,rgba(15,23,42,.94) 0%,rgba(15,23,42,.88) 64%,rgba(15,23,42,0) 84%)}
.shell-art.banner::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,transparent 20%,rgba(15,23,42,.6) 100%),linear-gradient(90deg,rgba(15,23,42,.8) 0%,rgba(15,23,42,.45) 58%,rgba(15,23,42,.05) 100%)}
.bn-txt{position:relative;z-index:3;min-width:0;max-width:100%;padding:12px 16px 11px;color:#fff;text-shadow:0 1px 8px rgba(2,6,23,.45)}
.bn-txt small{display:block;font:700 11.5px/1 var(--sans);letter-spacing:.05em;opacity:.86}
.bn-txt h2{margin-top:4px;font:800 23px/1.05 var(--sans);letter-spacing:-.03em}
.bn-txt p{margin-top:4px;font:500 13px/1.3 var(--sans);opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shell-art .road{position:absolute;left:0;right:0;bottom:0;height:7px;z-index:2;background:#1C1917;border-top:1px solid rgba(244,237,224,.22)}
/* Tevi's logo is the vehicle: it drives across the banner with a gentle bob */
.shell-art .drive{position:absolute;left:-64px;bottom:5px;z-index:2;width:54px;height:36px;animation:drive 11s linear infinite}
.shell-art .drive i{display:block;width:100%;height:100%;background:var(--logo) center/contain no-repeat;animation:bob .5s var(--sine) infinite alternate}
@keyframes drive{to{left:calc(100% + 10px)}}
.shead .avatar{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex:none;background:#F1F5F9;color:var(--midnight)}
.shead .avatar .ic{width:21px;height:21px}
.tabs a{position:relative}
.tabs .tdot{position:absolute;top:9px;left:calc(50% + 7px);width:8px;height:8px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 2px var(--cream);animation:popin 360ms var(--in) both}
@keyframes popin{from{transform:scale(0)}}
.slabel{margin-top:22px;font:700 11.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.rule{display:flex;align-items:center;gap:12px;margin-top:20px;font:600 22px/1 var(--warm);color:var(--midnight)}
.rule::after{content:"";flex:1;height:6px;background:var(--kupesi-tapa);background-size:12px 6px;opacity:.35}
.host{font:italic 500 21px/1.35 var(--warm);color:var(--ink-2)}
.linkbtn{display:block;min-height:44px;margin:8px auto 0;padding:0 12px;font:700 14px/44px var(--sans);color:var(--lagoon-deep);text-decoration:underline;text-underline-offset:4px}
.empty{color:var(--ink-3);font-size:14.5px;padding:10px 0}
.mono{width:48px;height:48px;flex:none;border-radius:16px;display:grid;place-items:center;font:600 26px/1 var(--warm);color:#FFF8EF;background:var(--tapa)}
.mono.shop{background:var(--lagoon-deep)}
.mono.xl{width:84px;height:84px;border-radius:26px;font-size:46px;box-shadow:0 18px 40px -18px rgba(0,0,0,.7)}
.av{display:grid;place-items:center}

/* stepper, switch, chips, segmented */
.stepper{display:flex;align-items:center;gap:4px;padding:3px;border-radius:99px;background:var(--ivory);border:1px solid var(--line)}
.stepper b{min-width:30px;text-align:center;font-size:17px}
.stp{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#fff;box-shadow:0 1px 2px rgba(15,23,42,.1)}
.stp .ic{width:18px;height:18px;stroke-width:2}
.switch{position:relative;width:56px;height:44px;flex:none}
.switch::before{content:"";position:absolute;left:0;right:0;top:8px;height:28px;border-radius:99px;background:rgba(15,23,42,.18);transition:background 220ms var(--out)}
.switch i{position:absolute;left:3px;top:11px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(15,23,42,.3);transition:transform 320ms var(--in)}
.switch[aria-checked="true"]::before{background:var(--lagoon-deep)}
.switch[aria-checked="true"] i{transform:translateX(28px)}
a.btn{text-decoration:none}
.vpane .fld{display:block}
.chiprow{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;border-radius:99px;border:1.5px solid var(--line-2);background:#fff;font:700 14px/1 var(--sans);white-space:nowrap;transition:background 220ms var(--out),color 220ms var(--out),border-color 220ms var(--out)}
.chip .ic{width:15px;height:15px;stroke-width:2.2}
.chip.on{background:var(--midnight);border-color:var(--midnight);color:var(--ivory)}
.chip.done{border-color:rgba(15,23,42,.4);color:var(--lagoon-deep)}
.shake{animation:shake 360ms var(--out)}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}

/* form cards (ride booking, owner lists) */
.rideform{display:grid;gap:10px;margin-top:16px}
.fcard{display:block;padding:14px 16px;border-radius:var(--r-sm);background:#fff;border:1px solid var(--line)}
.fcard.row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px}
.rideform .fcard.row{margin-top:0}
.fcard>.flabel,.fcard .flabel{display:block;font:700 11.5px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.fcard>.flabel{margin-bottom:10px}
.fcard b{font-size:16px}
.fcard .right{text-align:right}
.twin{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.twin .stepper{gap:0;max-width:100%}.twin .stp{width:40px;height:40px}
.twin .fcard{display:flex;flex-direction:column;align-items:flex-start}
.pickup{display:flex;align-items:center;gap:10px;min-height:44px;text-decoration:none;font-weight:700}
.pickup .ic{width:20px;height:20px;color:var(--coral)}
.pickup span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pickup small{color:var(--lagoon-deep);font-size:13px}
.fareline{display:flex;gap:12px;align-items:flex-start}
.fareline .ic{width:22px;height:22px;color:var(--coral);margin-top:1px}
.fareline b{display:block;font:800 16px/1.3 var(--sans);font-variant-numeric:tabular-nums}
.fareline small{display:block;margin-top:2px;color:var(--ink-2);font-size:13.5px;line-height:1.4}
.fcard.need{border-color:var(--coral);box-shadow:inset 0 0 0 1px var(--coral)}

/* vendor list rows (Food / Shop tabs) */
.vlist{display:grid;gap:12px;margin-top:14px}
.vrow{display:grid;grid-template-columns:auto 1fr;gap:12px 14px;align-items:center;padding:16px;border-radius:var(--r);background:linear-gradient(180deg,#fff 0%,#FBFAFA 100%);border:1px solid var(--line);box-shadow:var(--sh);animation:panein 520ms var(--in) both;animation-delay:calc(var(--i,0) * 70ms)}
.vrow b{display:block;font:800 19.7px/1.05 var(--serif)}
.vrow small{display:block;margin-top:3px;color:var(--ink-3);font-size:13.5px}
.vrow .btn{grid-column:1/-1;min-height:50px}
.vrow .open{display:inline-flex;align-items:center;gap:6px;color:var(--lagoon-deep);font-weight:700}
.vrow .open::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.vrow.mine{border:1.5px solid var(--midnight)}
.yours{display:inline-block;margin-left:8px;padding:3px 8px;border-radius:99px;background:var(--coral);color:#fff;font:800 10.5px/1.25 var(--sans);letter-spacing:.06em;vertical-align:3px}
.nores{text-align:center;padding:18px 0 6px}
.mycard{display:flex;align-items:center;gap:12px;margin-top:16px;padding:14px 14px 14px 16px;border-radius:var(--r);background:var(--midnight);color:#fff;text-decoration:none;box-shadow:0 4px 0 #020617,0 18px 30px -18px rgba(15,23,42,.7);animation:panein 460ms var(--in) both}
.mycard:active{transform:translateY(3px);box-shadow:0 1px 0 #020617}
.mycard.pending{background:#fff;color:var(--midnight);border:1.5px solid var(--midnight);box-shadow:var(--sh)}
.mycard>div{flex:1;min-width:0}
.mycard b{display:block;font:800 16.5px/1.2 var(--sans)}
.mycard small{display:block;margin-top:2px;font-size:12.5px;opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mycard .ic{width:20px;height:20px}