:root{
  --acc:#0a8f5b; --amb:#f2a516; --grey:#8b95a1;
  --ink:#111418; --mut:#68727d; --hair:rgba(0,0,0,.08);
  --glass:rgba(255,255,255,.72); --glass-b:rgba(255,255,255,.55); --solid:#fff; --chip:rgba(0,0,0,.05);
  --shadow:0 8px 30px rgba(15,23,32,.16),0 1px 2px rgba(15,23,32,.08);
}
@media (prefers-color-scheme:dark){:root{
  --ink:#f3f5f7; --mut:#9aa5b1; --hair:rgba(255,255,255,.1);
  --glass:rgba(28,32,37,.72); --glass-b:rgba(255,255,255,.12); --solid:#1c2025; --chip:rgba(255,255,255,.09);
  --acc:#2fd08d; --shadow:0 8px 30px rgba(0,0,0,.5),0 1px 2px rgba(0,0,0,.4);
}}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#dfe3e7;color:var(--ink);font:15px/1.35 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Inter,sans-serif;-webkit-font-smoothing:antialiased}
@media (prefers-color-scheme:dark){html,body{background:#14181c}}
button,input{font:inherit;color:inherit;border:0;background:none}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
#map,#nomap{position:absolute;inset:0}
#nomap{background:linear-gradient(160deg,#e9edf0,#dde2e6)}
@media (prefers-color-scheme:dark){#nomap{background:linear-gradient(160deg,#20262c,#171b20)}}
.hide{display:none!important}
.glass{background:var(--glass);-webkit-backdrop-filter:blur(22px) saturate(1.7);backdrop-filter:blur(22px) saturate(1.7);border:1px solid var(--glass-b);box-shadow:var(--shadow)}

/* top controls */
.top{position:absolute;z-index:20;left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));top:max(12px,env(safe-area-inset-top));display:flex;flex-direction:column;gap:10px;max-width:560px}
.search{display:flex;align-items:center;gap:10px;border-radius:999px;padding:0 6px 0 16px;height:50px}
.search svg{flex:0 0 20px;opacity:.55}
.search input{flex:1;min-width:0;outline:0;font-size:16px}
.search input::placeholder{color:var(--mut)}
.search .loc{flex:0 0 38px;height:38px;border-radius:50%;display:grid;place-items:center;color:var(--acc)}
.search .loc:active{background:var(--chip)}
.sugg{border-radius:18px;overflow:hidden;margin-top:-4px}
.sugg button{display:block;width:100%;text-align:left;padding:11px 16px;border-top:1px solid var(--hair)}
.sugg button:first-child{border-top:0}
.sugg button:disabled{color:var(--mut);cursor:default}
.row{display:flex;gap:8px;align-items:center;justify-content:space-between}
.seg{display:inline-flex;border-radius:999px;padding:3px;position:relative}
.seg button{position:relative;z-index:1;padding:8px 16px;border-radius:999px;font-weight:600;font-size:14px;color:var(--mut);transition:color .2s}
.seg button.on{color:#fff}
.seg .pill{position:absolute;z-index:0;top:3px;bottom:3px;border-radius:999px;background:var(--acc);transition:left .25s cubic-bezier(.3,.7,.2,1),width .25s cubic-bezier(.3,.7,.2,1)}
.langwrap{position:relative}
.lang{width:42px;height:42px;border-radius:50%;font-weight:700;font-size:13px;letter-spacing:.02em}
.langmenu{position:absolute;right:0;top:48px;border-radius:14px;overflow:hidden;min-width:140px}
.langmenu button{display:block;width:100%;text-align:left;padding:10px 14px;border-top:1px solid var(--hair)}
.langmenu button:first-child{border-top:0}
.langmenu button.on{color:var(--acc);font-weight:700}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 2px 6px;margin:0 -2px}
.chips::-webkit-scrollbar{display:none}
.chips button{flex:0 0 auto;border-radius:999px;padding:7px 14px;font-weight:600;font-size:13.5px;white-space:nowrap}
.chips button.on{background:var(--acc);color:#fff;border-color:transparent}
.dates{display:flex;gap:8px;border-radius:16px;padding:8px 10px;align-items:center;font-size:13px;color:var(--mut)}
.dates label{display:flex;align-items:center;gap:6px;flex:1;min-width:0}
.dates input{background:var(--chip);border-radius:10px;padding:7px 8px;color:var(--ink);font-size:14px;min-width:0;flex:1}
#notices{display:flex;flex-direction:column;gap:8px}
.notice{border-radius:14px;padding:9px 14px;font-size:13px;display:flex;gap:10px;align-items:center;justify-content:space-between}
.notice.warn{border-left:4px solid var(--amb)}
.notice button{font-weight:700;color:var(--acc);white-space:nowrap}
.notice .acts{display:flex;gap:12px;align-items:center;flex:0 0 auto}
.notice .x{color:var(--mut);font-weight:400;font-size:15px;padding:2px 4px}

/* sheet */
.sheet{position:absolute;z-index:30;left:0;right:0;bottom:0;height:calc(100% - 96px);max-width:560px;margin:0 auto;border-radius:26px 26px 0 0;display:flex;flex-direction:column;transform:translateY(var(--y,70%));transition:transform .32s cubic-bezier(.25,.8,.25,1);touch-action:none;will-change:transform}
.sheet.drag{transition:none}
.grab{padding:8px 0 4px;cursor:grab;flex:0 0 auto}
.grab i{display:block;width:38px;height:5px;border-radius:3px;background:var(--mut);opacity:.4;margin:0 auto}
.credits{display:flex;justify-content:space-between;gap:8px;padding:6px 20px 0;font-size:10.5px;color:var(--mut)}
.credits a{color:inherit}
.head{flex:0 0 auto;padding:4px 20px 12px;cursor:grab}
.head .big{font-size:22px;font-weight:700;letter-spacing:-.02em}
.head .sub{color:var(--mut);font-size:13.5px;margin-top:1px}
.list{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:0 12px calc(24px + env(safe-area-inset-bottom));touch-action:pan-y}
.sheet:not(.s-half):not(.s-full) .list{overflow:hidden}
.card{display:block;width:100%;text-align:left;border-radius:16px;padding:13px 14px;margin-bottom:8px;background:var(--solid);border:1px solid var(--hair);transition:box-shadow .15s,border-color .15s}
.card.sel{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc)}
.card .t{display:flex;align-items:center;gap:8px;font-weight:650;font-size:16px;letter-spacing:-.01em}
.card .d{margin-left:auto;font-weight:700;font-size:15px;white-space:nowrap}
.card .m{color:var(--mut);font-size:13.5px;margin-top:2px}
.card .oc{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.tag{font-size:11px;font-weight:700;border-radius:6px;padding:2px 6px;background:var(--chip);color:var(--mut);text-transform:uppercase;letter-spacing:.04em}
.st{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;border-radius:999px;padding:4px 10px 4px 8px;background:var(--chip)}
.st i{width:8px;height:8px;border-radius:50%;background:var(--grey)}
.st.now i{background:var(--acc)}.st.tomorrow i{background:var(--amb)}
.empty{padding:28px 12px;text-align:center;color:var(--mut)}
.zone{border-radius:16px;padding:14px;margin-bottom:10px;background:var(--solid);border:1px solid var(--hair);border-left:4px solid var(--amb)}
.zone b{display:block;margin-bottom:4px}
.zone p{margin:0 0 8px;color:var(--mut);font-size:13.5px}
.zone a{color:var(--acc);font-weight:650}
.skel{height:84px;border-radius:16px;margin-bottom:8px;background:linear-gradient(90deg,var(--chip),transparent,var(--chip));background-size:200% 100%;animation:sh 1.4s infinite linear}
@keyframes sh{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.skel{animation:none}.sheet,.seg .pill{transition:none}}

/* map elements */
.me{width:18px;height:18px;border-radius:50%;background:#2f6bff;border:3px solid #fff;box-shadow:0 0 0 7px rgba(47,107,255,.22),0 2px 6px rgba(0,0,0,.35)}
.bubble{background:var(--solid);color:var(--ink);border-radius:12px;padding:6px 10px;font-weight:650;font-size:13px;box-shadow:var(--shadow);white-space:nowrap;pointer-events:none}
.bubble small{color:var(--mut);font-weight:600;margin-left:4px}

/* Installed on iPhone the status bar is translucent with white text over the map: a soft dark scrim keeps the clock readable on the light basemap */
@media (display-mode: standalone){
  body::before{content:"";position:fixed;z-index:15;left:0;right:0;top:0;height:calc(env(safe-area-inset-top) + 14px);pointer-events:none;background:linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,0))}
}

/* wide screens: side panel instead of bottom sheet */
@media (min-width:900px){
  .sheet{left:12px;right:auto;margin:0;width:400px;height:calc(100% - 24px);bottom:12px;border-radius:26px;transform:none!important;transition:none}
  .grab i{display:none}.grab{cursor:default;padding-top:0}.credits{padding-top:12px}
  .head{cursor:default}
  .top{left:424px}
}