/* ==========================================================================
   WisGo — Explore and the creator studio

   The place guide, creator itineraries, the itinerary player, and the
   builder creators use to make them. Built on the tokens in styles.css and
   the frame classes in games.css; nothing here overrides anything.
   ========================================================================== */

/* ---------- province strip ------------------------------------------------ */
.provs{
  display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;
  margin:14px -18px 0;padding:2px 18px 6px;
}
.provs::-webkit-scrollbar{display:none}
/* v66: provinces are slim chips (a round photo and the name) */
.prov{
  flex:none;display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 14px 0 5px;border-radius:999px;
  background:var(--surface);border:1px solid var(--line);color:var(--white);
  transition:transform .14s ease,border-color .2s,background .2s;
}
.prov:active{transform:scale(.97)}
.prov.on{background:var(--gold);border-color:var(--gold);color:#221900}
.prov .pa{width:32px;height:32px;flex:none;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:rgba(255,255,255,.08);color:var(--gold);font-size:1rem;line-height:1}
.prov.on .pa{background:rgba(0,0,0,.12);color:#221900}
.prov .pa img{width:100%;height:100%;object-fit:cover;display:block}
.prov .pa .wi{width:17px;height:17px}
.prov .pn{font-weight:700;font-size:.88rem;white-space:nowrap}
body.km .prov .pn{text-transform:none;font-size:.9rem}

/* v67: the services. One row to swipe through; pulled open, a grid */
.svc-wrap{margin-top:14px}
.svcs{display:flex;gap:0;overflow-x:auto;scrollbar-width:none;margin:0 -18px;padding:0 12px 2px;scroll-snap-type:x proximity;scroll-padding:0 12px}
.svcs::-webkit-scrollbar{display:none}
/* v79: tiles a little narrower, so the icons sit closer together */
.svc{flex:none;width:66px;display:flex;flex-direction:column;align-items:center;gap:6px;padding:0;background:none;color:var(--white);text-align:center;scroll-snap-align:start}
.svc:active{transform:scale(.95)}
.svc-i{width:50px;height:50px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(150deg,rgba(255,197,61,.18),rgba(255,197,61,.05));border:1px solid rgba(255,197,61,.28);color:var(--gold)}
.svc-i .wi{width:23px;height:23px}
.svc-l{font-size:.7rem;font-weight:700;letter-spacing:-.01em;line-height:1.2;color:#DCEBE1;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.svc[data-x="svcToggle"] .svc-i{background:rgba(255,255,255,.06);border-color:var(--line);color:#DCEBE1}
.svc-wrap.open .svcs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 2px;overflow:visible;margin:0;padding:0}
.svc-wrap.open .svc{width:auto}
.svc-wrap.anim .svcs{animation:svcIn .26s cubic-bezier(.2,.8,.2,1)}
@keyframes svcIn{from{opacity:.4;transform:translateY(-6px)}to{opacity:1;transform:none}}
.svc-grab{display:flex;justify-content:center;padding:7px 0 0;cursor:pointer}
.svc-grab i{width:36px;height:4px;border-radius:4px;background:rgba(255,255,255,.18)}
body.km .svc-l{font-size:.7rem}
.svc-less{display:flex;align-items:center;gap:4px;margin:8px auto 0;padding:4px 12px;border-radius:999px;background:none;color:var(--dim);font-size:.74rem;font-weight:700}
.svc-less .wi{width:14px;height:14px}

/* pull Explore down: open the services, or (harder) refresh */
.ptr{position:absolute;left:0;right:0;z-index:5;display:flex;justify-content:center;pointer-events:none;transition:opacity .2s;padding-top:10px}
.ptr-in{display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 8px;max-width:280px;padding:8px 14px;border-radius:999px;background:var(--surface);border:1px solid var(--line);color:#DCEBE1;font-size:.82rem;text-align:center}
.ptr-in .wi{width:16px;height:16px;color:var(--gold);transition:transform .2s}
.ptr-in small{flex-basis:100%;color:var(--dim);font-size:.7rem}
.ptr-in.mid{border-color:rgba(255,197,61,.45)}
.ptr-in.hard{background:var(--gold);border-color:var(--gold);color:#221900}
.ptr-in.hard .wi{color:#221900}
.ptr-in.spin .wi{animation:ptrSpin .8s linear infinite}
@keyframes ptrSpin{to{transform:rotate(360deg)}}
.app-body:has([data-explore-tab]){overscroll-behavior-y:contain}

/* ---------- a place card --------------------------------------------------- */
.place{
  width:100%;text-align:left;display:flex;gap:13px;align-items:stretch;
  background:var(--surface);border:1px solid var(--line);border-radius:20px;
  padding:12px;margin-top:10px;transition:transform .14s ease;overflow:hidden;
}
.place:active{transform:scale(.985)}
.ph{
  width:72px;flex:none;border-radius:14px;display:grid;place-items:center;
  font-size:1.9rem;line-height:1;min-height:72px;
  background:linear-gradient(150deg,rgba(255,255,255,.13),rgba(255,255,255,.03));
  border:1px solid var(--line);overflow:hidden;position:relative;
}
.ph img{width:100%;height:100%;object-fit:cover;display:block;position:absolute;inset:0}
.ptxt{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center}
.ptxt .k,.ptxt .n{display:block}
.ptxt .k{font-family:var(--mono);font-size:.54rem;letter-spacing:0.07em;text-transform:uppercase;color:var(--accent);font-weight:700}
.ptxt .n{font-family:var(--display);letter-spacing:-.015em;font-size:1.08rem;line-height:1.16;margin:5px 0 0}
body.km .ptxt .n{text-transform:none}

/* ---------- place detail --------------------------------------------------- */
.hero{
  margin:0 -18px;height:220px;position:relative;overflow:hidden;
  background:radial-gradient(120% 90% at 30% 20%,#1C5F45,#08170F 70%);
  display:grid;place-items:center;font-size:5rem;line-height:1;
}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .fade{position:absolute;inset:auto 0 0 0;height:90px;background:linear-gradient(to bottom,rgba(8,23,15,0),var(--bg))}
.hero .slot{
  position:absolute;left:14px;bottom:12px;font-family:var(--mono);font-weight:700;font-size:.56rem;letter-spacing:0.07em;
  text-transform:uppercase;color:var(--dim);border:1px dashed rgba(255,255,255,.3);padding:6px 10px;border-radius:999px;
  background:rgba(8,23,15,.6);
}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.fact{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:12px 13px}
.fact .fk{display:block;font-family:var(--mono);font-size:.54rem;letter-spacing:0.07em;text-transform:uppercase;color:var(--dim);font-weight:700}
.fact .fv{display:block;font-size:.9rem;margin-top:5px;line-height:1.4}
.credit{
  display:flex;align-items:center;gap:11px;margin-top:16px;
  background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:11px 13px;
}
.credit .cav{
  width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--surface-2);font-family:var(--display);color:var(--gold);overflow:hidden;
}
.credit .cav img{width:100%;height:100%;object-fit:cover}
.credit .ct{flex:1;min-width:0}
.credit .ct .cn{display:block;font-weight:700;font-size:.95rem}
.credit .ct .ch{display:block;color:var(--dim);font-size:.78rem}

/* ---------- itinerary cards ------------------------------------------------ */
.itin{
  width:100%;text-align:left;border-radius:22px;overflow:hidden;margin-top:12px;
  background:var(--surface);border:1px solid var(--line);
  transition:transform .14s ease;
}
.itin:active{transform:scale(.985)}
.itin .cover{
  height:132px;position:relative;display:grid;place-items:center;font-size:3rem;line-height:1;
  background:linear-gradient(150deg,color-mix(in srgb,var(--acc,#00C2A8) 30%,var(--surface-2)),var(--bg-2));
}
.itin .cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.itin .cover .badge{
  position:absolute;top:10px;left:10px;font-family:var(--mono);font-size:.54rem;letter-spacing:0.07em;
  text-transform:uppercase;font-weight:700;padding:6px 10px;border-radius:999px;
  background:rgba(8,23,15,.75);color:var(--gold);border:1px solid rgba(255,197,61,.4);
}
.itin .cover .price{
  position:absolute;top:10px;right:10px;background:var(--gold);color:#221900;
  font-family:var(--display);font-size:.92rem;padding:6px 11px;border-radius:999px;
}
.itin .body{display:block;padding:12px 14px 13px}
.itin .n{display:block;font-family:var(--display);letter-spacing:-.015em;font-size:1.08rem;line-height:1.12}
.itin .by{display:flex;align-items:center;gap:8px;margin-top:7px;color:var(--dim);font-size:.82rem}
.itin .by .cav{width:22px;height:22px;border-radius:50%;background:var(--surface-2);display:grid;place-items:center;
  font-family:var(--display);font-size:.6rem;color:var(--gold);overflow:hidden;flex:none}
.itin .by .cav img{width:100%;height:100%;object-fit:cover}
.itin .meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:9px}
.itin .meta span{
  font-family:var(--mono);font-weight:700;font-size:.56rem;letter-spacing:0.07em;text-transform:uppercase;color:var(--dim);
  border:1px solid var(--line);padding:5px 9px;border-radius:999px;
}
body.km .itin .n{text-transform:none}

/* ---------- the player ----------------------------------------------------- */
.daytabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:8px -18px 0;padding:2px 18px 8px}
.daytabs::-webkit-scrollbar{display:none}
.daytabs button{
  flex:none;padding:10px 15px;border-radius:999px;border:1px solid var(--line);
  background:rgba(255,255,255,.05);color:var(--dim);
  font-family:var(--mono);font-size:.64rem;letter-spacing:0.07em;text-transform:uppercase;font-weight:700;
}
.daytabs button.on{background:var(--gold);border-color:var(--gold);color:#221900}
.stop{
  display:flex;gap:12px;align-items:flex-start;
  background:var(--surface);border:1px solid var(--line);border-radius:18px;
  padding:13px;margin-top:10px;position:relative;
}
.stop.done{opacity:.62}
.stop .tick{
  width:30px;height:30px;border-radius:50%;flex:none;margin-top:2px;
  border:2px solid var(--line);display:grid;place-items:center;font-weight:900;color:#04140E;
}
.stop.done .tick{background:var(--ok);border-color:var(--ok)}
.stop .st{flex:1;min-width:0}
.stop .st .k{display:block;font-family:var(--mono);font-size:.54rem;letter-spacing:0.07em;text-transform:uppercase;color:var(--accent);font-weight:700}
.stop .st .n{display:block;font-weight:700;font-size:1rem;line-height:1.25;margin-top:3px}
.stop .st .b{display:block;color:#DCEBE1;font-size:.88rem;line-height:1.45;margin-top:5px;white-space:pre-line}
.stop .st .row{display:flex;gap:8px;flex-wrap:wrap;margin-top:9px;align-items:center}
.stop .st .row .cost{font-family:var(--display);font-size:.9rem;color:var(--gold)}
.stop .st .row .map{
  font-family:var(--mono);font-size:.56rem;letter-spacing:0.07em;text-transform:uppercase;font-weight:700;
  color:var(--white);border:1px solid var(--line);padding:6px 10px;border-radius:999px;text-decoration:none;
}
.stop .sph{width:100%;border-radius:12px;margin-top:10px;display:block;max-height:220px;object-fit:cover}
.budget{
  display:flex;align-items:baseline;gap:10px;margin-top:14px;
  background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:12px 14px;
}
.budget .bl{color:var(--dim);font-size:.86rem;flex:1}
.budget .bv{font-family:var(--display);letter-spacing:-.015em;font-size:1.15rem;color:var(--gold)}

/* ---------- the studio ----------------------------------------------------- */
.earn{
  margin-top:14px;border-radius:24px;padding:18px 18px 16px;
  background:linear-gradient(150deg,#1C5F45,#0F3A29);border:1px solid rgba(142,208,129,.35);
}
.earn .k{font-family:var(--mono);font-weight:700;font-size:.58rem;letter-spacing:0.07em;text-transform:uppercase;color:var(--ok)}
.earn .n{font-family:var(--display);letter-spacing:-.015em;font-size:2rem;line-height:1;margin:6px 0 4px}
.earn .m{color:#CFE6D6;font-size:.86rem}
.earn .split{display:flex;gap:14px;margin-top:12px;padding-top:12px;border-top:1px dashed rgba(255,255,255,.2)}
.earn .split div{flex:1}
.earn .split .sk{display:block;font-family:var(--mono);font-weight:700;font-size:.52rem;letter-spacing:0.07em;text-transform:uppercase;color:#CFE6D6}
.earn .split .sv{display:block;font-family:var(--display);letter-spacing:-.015em;font-size:1.05rem;margin-top:3px}

.field{margin-top:14px}
.field .lab{margin:0 0 7px}
.field textarea.in{min-height:96px;resize:vertical;line-height:1.45}
.cover-pick{
  height:150px;border-radius:18px;border:2px dashed rgba(255,255,255,.22);
  display:grid;place-items:center;text-align:center;color:var(--dim);font-size:.9rem;
  position:relative;overflow:hidden;background:rgba(255,255,255,.04);
}
.cover-pick img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cover-pick input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}
.cover-pick .lbl{position:relative;z-index:1;padding:8px 14px;border-radius:999px;background:rgba(8,23,15,.7);font-weight:600}
.split-live{
  display:flex;gap:10px;margin-top:10px;
}
.split-live div{
  flex:1;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:10px 12px;
}
.split-live .sk{display:block;font-family:var(--mono);font-weight:700;font-size:.52rem;letter-spacing:0.07em;text-transform:uppercase;color:var(--dim)}
.split-live .sv{display:block;font-family:var(--display);letter-spacing:-.015em;font-size:1.05rem;margin-top:3px}
.split-live .sv.me{color:var(--ok)}
.dayblock{
  margin-top:14px;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--bg-2);
}
.dayblock .dh{display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--surface)}
.dayblock .dh .dn{flex:1;min-width:0;font-family:var(--display);font-size:.98rem;}
.dayblock .dh input{flex:1;min-width:0;background:transparent;border:none;border-bottom:1px solid var(--line);
  padding:6px 0;color:var(--white);font-weight:700;font-size:1rem}
.dayblock .dbody{padding:4px 12px 12px}
.srow{
  display:flex;align-items:center;gap:10px;padding:10px 4px;border-bottom:1px solid var(--line);
}
.srow:last-child{border-bottom:none}
.srow .sn{flex:1;min-width:0;font-weight:600;font-size:.95rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.srow .sc{color:var(--dim);font-size:.8rem;white-space:nowrap}
.srow .num{width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--surface-2);font-family:var(--mono);font-size:.7rem;font-weight:700;color:var(--gold)}
.consent{
  display:flex;gap:12px;align-items:flex-start;margin-top:16px;
  background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:13px 14px;text-align:left;width:100%;
}
.consent .box{
  width:26px;height:26px;border-radius:8px;flex:none;border:2px solid var(--line);
  display:grid;place-items:center;color:#04140E;font-weight:900;margin-top:2px;
}
.consent.on .box{background:var(--ok);border-color:var(--ok)}
.consent .ctxt{font-size:.86rem;line-height:1.45;color:#DCEBE1}
.statuspill{
  font-family:var(--mono);font-size:.54rem;letter-spacing:0.07em;text-transform:uppercase;font-weight:700;
  padding:5px 9px;border-radius:999px;white-space:nowrap;
}
.statuspill.draft{background:rgba(255,255,255,.07);color:var(--dim);border:1px solid var(--line)}
.statuspill.published{background:rgba(142,208,129,.18);color:var(--ok);border:1px solid rgba(142,208,129,.4)}
.statuspill.review{background:rgba(255,197,61,.14);color:var(--gold);border:1px solid rgba(255,197,61,.45)}
.statuspill.back{background:rgba(255,107,107,.12);color:#FF8A8A;border:1px solid rgba(255,107,107,.45)}
.myitin{
  width:100%;text-align:left;display:flex;gap:12px;align-items:center;
  background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:12px;margin-top:10px;
}
.myitin .mc{width:56px;height:56px;border-radius:14px;flex:none;display:grid;place-items:center;font-size:1.6rem;
  background:linear-gradient(150deg,rgba(255,255,255,.13),rgba(255,255,255,.03));border:1px solid var(--line);overflow:hidden;position:relative}
.myitin .mc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.myitin .mt{flex:1;min-width:0}
.myitin .mt .n{display:block;font-weight:700;font-size:.98rem;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.myitin .mt .b{display:block;color:var(--dim);font-size:.8rem;margin-top:3px}
.select-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.select-row button{
  padding:9px 13px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.05);
  color:var(--dim);font-size:.86rem;font-weight:600;
}
.select-row button.on{background:var(--gold);border-color:var(--gold);color:#221900}
.tiny{font-size:.78rem;color:var(--dim);margin-top:6px;line-height:1.4}

/* five tabs: labels tighter still */
.tabbar button{font-size:.5rem;letter-spacing:.08em;padding:8px 2px}
.tabbar button svg{width:22px;height:22px}

/* ---------- road sense ------------------------------------------------------
   The traffic card. Amber, because it is a warning, and because nothing else
   in the app is amber, so it reads as "different" without reading as "error".
   -------------------------------------------------------------------------- */
.road{
  margin-top:14px;border-radius:20px;padding:14px 14px 12px;
  background:linear-gradient(150deg,rgba(255,176,32,.16),rgba(255,176,32,.05));
  border:1px solid rgba(255,176,32,.45);
  transition:opacity .25s,transform .25s;
}
.road.dense{border-color:rgba(255,120,60,.55);background:linear-gradient(150deg,rgba(255,120,60,.18),rgba(255,120,60,.05))}
.road.calm{border-color:rgba(255,197,61,.35);background:linear-gradient(150deg,rgba(255,197,61,.10),rgba(255,197,61,.03))}
.road.gone{opacity:0;transform:translateX(60px)}
.road-top{display:flex;align-items:flex-start;gap:10px}
.road-ico{font-size:1.3rem;line-height:1.2;flex:none}
.road-ttl{flex:1;min-width:0}
.road-ttl .k,.road-ttl .n{display:block}
.road-ttl .k{font-family:var(--mono);font-size:.54rem;letter-spacing:0.07em;text-transform:uppercase;color:#FFB020;font-weight:700}
.road-ttl .n{font-family:var(--display);letter-spacing:-.015em;font-size:1rem;line-height:1.15;margin-top:3px}
body.km .road-ttl .n{text-transform:none;font-size:1.02rem}
.road-x{
  flex:none;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;
  color:var(--dim);border:1px solid var(--line);font-size:1rem;
}
.road-brief{font-size:.88rem;color:#DCEBE1;line-height:1.45;margin-top:10px}
.road-tips{list-style:none;margin-top:10px;display:flex;flex-direction:column;gap:8px}
.road-tips li{display:flex;gap:9px;font-size:.86rem;line-height:1.42;color:#F2F7F3}
.road-tips li::before{content:"·";color:#FFB020;font-weight:900;flex:none}
.road-tips li.more{display:none}
.road.open .road-tips li.more{display:flex}
.road-tips li.tr{color:#FFD98A}
.road-act{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.road-act button{
  font-family:var(--mono);font-size:.56rem;letter-spacing:0.07em;text-transform:uppercase;font-weight:700;
  color:#FFB020;border:1px solid rgba(255,176,32,.45);padding:8px 12px;border-radius:999px;
}
body.km .road-act button{font-family:var(--sans);letter-spacing:0;text-transform:none;font-size:.8rem}
.road-line{
  width:100%;text-align:left;display:flex;align-items:center;gap:10px;margin-top:14px;
  background:rgba(255,176,32,.08);border:1px solid rgba(255,176,32,.35);border-radius:14px;padding:11px 13px;
}
.road-line .rl{flex:1;min-width:0;font-size:.86rem;line-height:1.4;color:#F2F7F3}
.road-line .ch{color:#FFB020}
.road-stop{
  display:block;margin-top:7px;font-size:.84rem;line-height:1.4;color:#FFD98A;
  background:rgba(255,176,32,.08);border-left:3px solid #FFB020;padding:7px 10px;border-radius:0 10px 10px 0;
}

/* ---------- live strip: weather + the dollar ---------------------------------
   Two buttons at the top of Explore. Drawn from the phone's cache so they are
   there instantly, and they update themselves when a refresh lands.
   -------------------------------------------------------------------------- */
.livestrip{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
.lv{
  display:flex; align-items:center; gap:10px; text-align:left;
  background:var(--surface); border:1px solid var(--line); border-radius:18px;
  padding:12px 12px 12px 13px; transition:transform .14s ease,border-color .2s;
}
.lv:active{ transform:scale(.985); border-color:rgba(255,255,255,.3) }
.lv-ico{ font-size:1.7rem; line-height:1; flex:none }
.lv-t{ flex:1; min-width:0 }
.lv-k,.lv-n,.lv-b{ display:block }
.lv-k{
  font-family:var(--mono); font-size:.52rem; letter-spacing:0.07em; text-transform:uppercase;
  color:var(--dim); font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.lv-n{ font-family:var(--display);letter-spacing:-.015em; font-size:1.42rem; line-height:1.05; margin-top:2px }
.lv-n .lv-sm{ font-size:.72rem; color:var(--dim); margin-left:1px }
.lv-n.lv-wait{ color:var(--dim) }
.lv-b{ font-size:.74rem; color:var(--dim); margin-top:2px;
       white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.lv-ch{ flex:none; color:var(--dim); font-size:1.05rem }
body.km .lv-k{ letter-spacing:0; text-transform:none; font-family:var(--sans); font-size:.68rem }
@media(max-width:340px){ .livestrip{ grid-template-columns:1fr } }

/* ---------- weather sheet --------------------------------------------------- */
.wx-now{ display:flex; align-items:center; gap:14px; margin-top:14px }
.wx-ico{ font-size:3.2rem; line-height:1; flex:none }
.wx-deg{ font-family:var(--display);letter-spacing:-.015em; font-size:3rem; line-height:1 }
.wx-txt{ flex:1; min-width:0 }
.wx-txt b{ display:block; font-size:1.02rem }
.wx-txt span{ display:block; color:var(--dim); font-size:.85rem; margin-top:3px }
.wx-days{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:4px }
.wx-day{
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  padding:11px 6px 12px; text-align:center;
}
.wx-day .wd{
  display:block; font-family:var(--mono); font-size:.54rem; letter-spacing:0.07em;
  text-transform:uppercase; color:var(--dim); font-weight:700;
}
.wx-day .wi{ display:block; font-size:1.55rem; line-height:1; margin:7px 0 6px }
.wx-day .wt{ display:block; font-family:var(--display);letter-spacing:-.015em; font-size:1rem }
.wx-day .wt i{ font-style:normal; color:var(--dim); font-size:.78rem; margin-left:3px }
.wx-day .wr{ display:block; font-size:.72rem; color:var(--dim); margin-top:4px }
.wx-day .wr.wet{ color:#6FD0F0; font-weight:700 }
body.km .wx-day .wd{ letter-spacing:0; text-transform:none; font-family:var(--sans); font-size:.68rem }

/* ---------- the converter --------------------------------------------------- */
.cvt{ margin-top:16px }
.cvt-row{
  display:flex; align-items:center; gap:10px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.18);
  border-radius:16px; padding:12px 14px;
}
.cvt-row:focus-within{ border-color:var(--gold) }
.cvt-c{ font-family:var(--display);letter-spacing:-.015em; font-size:1.45rem; color:var(--gold); flex:none; width:24px }
.cvt-in{
  flex:1; min-width:0; background:none; border:none; outline:none;
  font-family:var(--display);letter-spacing:-.015em; font-size:1.75rem; color:var(--white); width:100%;
}
.cvt-l{
  flex:none; font-family:var(--mono); font-size:.6rem; letter-spacing:0.07em;
  text-transform:uppercase; color:var(--dim); font-weight:700;
}
.cvt-eq{ text-align:center; color:var(--dim); font-family:var(--display);letter-spacing:-.015em; font-size:1rem; padding:7px 0 }
.cvt-chips{ display:flex; gap:7px; margin-top:12px; flex-wrap:wrap }
.cvt-chips button{
  flex:1; min-width:52px; padding:10px 6px; border-radius:999px;
  border:1px solid var(--line); background:rgba(255,255,255,.05); color:var(--white);
  font-family:var(--display); font-size:.9rem;
}
.cvt-chips button:active{ background:var(--gold); border-color:var(--gold); color:#221900 }

.ratebox{ display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:18px }
.rb{ background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:12px 13px }
.rb.st{ background:linear-gradient(150deg,#1C5F45,#0F3A29); border-color:rgba(142,208,129,.4) }
.rb .rk{
  display:block; font-family:var(--mono); font-size:.52rem; letter-spacing:0.07em;
  text-transform:uppercase; color:var(--dim); font-weight:700;
}
.rb.st .rk{ color:var(--ok) }
.rb .rv{ display:block; font-family:var(--display);letter-spacing:-.015em; font-size:1.4rem; line-height:1.05; margin-top:5px }
.rb .rs{ display:block; font-size:.7rem; color:var(--dim); margin-top:4px; line-height:1.35 }
body.km .rb .rk{ letter-spacing:0; text-transform:none; font-family:var(--sans); font-size:.68rem }

/* the unit line under a currency's riel value: "per 1,000 VND" */
.rows .ch i{
  display:block; font-style:normal; font-size:.66rem; font-weight:600;
  color:var(--dim); text-align:right; margin-top:2px; letter-spacing:.02em;
}
/* the riel sign rides low in the Khmer font next to display numerals —
   nudge it back onto the baseline so it reads as a currency mark, not a
   subscript */
.lv-n .lv-sm{ font-size:.88rem; vertical-align:baseline; position:relative; top:-1px; color:var(--dim) }

/* ---------- placeholder photos ------------------------------------------ */

.hero .ph-credit{position:absolute;right:12px;bottom:12px;z-index:2;font-size:.66rem;color:rgba(255,255,255,.78);
  background:rgba(8,23,15,.6);padding:4px 9px;border-radius:999px;text-decoration:none;backdrop-filter:blur(4px)}

/* ---------- the season ---------------------------------------------------- */
.season{display:block;width:100%;text-align:left;margin-top:12px;padding:14px 15px 13px;border-radius:20px;cursor:pointer;
  background:linear-gradient(150deg,rgba(91,140,255,.16),var(--surface) 70%);border:1px solid rgba(91,140,255,.35);color:inherit}
.season.s-cool{background:linear-gradient(150deg,rgba(31,168,135,.18),var(--surface) 70%);border-color:rgba(31,168,135,.4)}
.season.s-hot{background:linear-gradient(150deg,rgba(255,122,89,.18),var(--surface) 70%);border-color:rgba(255,122,89,.4)}
.season:active{transform:scale(.99)}
.s-top{display:flex;align-items:center;gap:12px}
.s-ic{font-size:1.9rem;line-height:1;flex:none}
.s-t{flex:1;min-width:0;display:flex;flex-direction:column}
.s-t .k{font-family:var(--mono);font-weight:700;font-size:.58rem;letter-spacing:.07em;text-transform:uppercase;color:var(--dim)}
.s-t b{font-family:var(--display);font-size:1.12rem;letter-spacing:-.01em;margin-top:2px}
.s-sub{font-size:.8rem;color:var(--dim);margin-top:1px}
.s-chev{color:var(--dim);font-size:1.3rem}
.s-line{display:block;margin-top:10px;font-size:.9rem;line-height:1.45;color:#DCEBE1}
.s-row{display:flex;gap:8px;align-items:baseline;margin-top:7px;font-size:.84rem;line-height:1.4;color:var(--dim)}
.s-row b{color:var(--white);font-weight:700}
.dot{width:8px;height:8px;border-radius:50%;flex:none;display:inline-block;transform:translateY(-1px)}
.dot.good{background:#7FD39A}.dot.poor{background:#FFB020}.dot.ev{background:#B57BFF}
body.km .s-t .k{text-transform:none;letter-spacing:0;font-family:var(--sans);font-size:.72rem}

.stag{display:inline-block;margin-top:6px;font-size:.66rem;font-weight:700;letter-spacing:.03em;padding:3px 8px;border-radius:999px}
.stag.s-good{background:rgba(127,211,154,.14);color:#9BE3B2}
.stag.s-poor{background:rgba(255,176,32,.14);color:#FFD27A}

.spill{display:flex;gap:10px;align-items:flex-start;width:100%;text-align:left;margin-top:14px;padding:11px 13px;border-radius:16px;
  background:var(--surface);border:1px solid var(--line);color:inherit;font-size:.86rem;line-height:1.4;cursor:pointer}
.spill .si{font-size:1.2rem;line-height:1.2}
.spill b{color:var(--white)}
.spill small{display:block;color:var(--dim);font-size:.82rem;margin-top:2px}
.spill.s-good{border-color:rgba(127,211,154,.35)}
.spill.s-poor{border-color:rgba(255,176,32,.45);background:rgba(255,176,32,.07)}

.mbars{display:grid;grid-template-columns:repeat(12,1fr);gap:4px;align-items:end;margin-top:16px;height:92px}
.mb{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;height:100%}
.mb i{display:block;width:100%;border-radius:6px 6px 3px 3px;background:rgba(91,140,255,.45)}
.mb i.k-cool{background:rgba(31,168,135,.5)}.mb i.k-hot{background:rgba(255,122,89,.5)}
.mb.on i{outline:2px solid var(--gold);outline-offset:1px}
.mb em{font-style:normal;font-size:.56rem;color:var(--dim);font-weight:700}
.mb.on em{color:var(--gold)}
.sev{margin-top:12px;padding:10px 12px;border-radius:14px;background:rgba(181,123,255,.1);border:1px solid rgba(181,123,255,.3);font-size:.86rem;line-height:1.45}
.sev b{display:block}
.sev span{color:var(--dim)}
.srow{display:flex;gap:12px;align-items:center;width:100%;text-align:left;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.06);color:inherit;background:none;cursor:pointer}
.sr-ph{width:52px;height:52px;border-radius:12px;flex:none;overflow:hidden;display:grid;place-items:center;font-size:1.5rem;background:var(--surface-2);position:relative}
.sr-ph img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.sr-t{flex:1;min-width:0;display:flex;flex-direction:column}
.sr-t b{font-size:.96rem}
.sr-t em{font-style:normal;font-size:.76rem;color:#FFD27A;font-weight:700;margin-top:1px}
.sr-t small{color:var(--dim);font-size:.8rem;line-height:1.4;margin-top:2px}
.srow .ch{color:var(--dim)}

/* ---------- riel notes (money sheet) -------------------------------------- */
.notes{display:flex;gap:12px;overflow-x:auto;margin:10px -20px 0;padding:4px 20px 8px;scroll-padding:0 20px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.notes::-webkit-scrollbar{display:none}
.note{flex:none;width:236px;text-align:left;scroll-snap-align:start;background:none;border:0;padding:0;color:inherit;cursor:pointer}
.nt-card{display:block;position:relative;width:100%;aspect-ratio:2.15/1;perspective:900px}
.nt-side{position:absolute;inset:0;border-radius:10px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  transition:transform .5s cubic-bezier(.3,.9,.3,1);box-shadow:0 6px 18px rgba(0,0,0,.35);background:var(--surface-2)}
.nt-side img{width:100%;height:100%;object-fit:cover;display:block}
.nt-back{transform:rotateY(180deg)}
.note.flipped .nt-front{transform:rotateY(-180deg)}
.note.flipped .nt-back{transform:rotateY(0)}
.nt-fb{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;color:#fff;
  background-image:linear-gradient(135deg,rgba(255,255,255,.18),rgba(0,0,0,.25))}
.nt-fb b{font-family:var(--display);font-size:1.8rem;letter-spacing:-.02em}
.nt-fb i{font-style:normal;font-size:.7rem;letter-spacing:.12em;opacity:.8;margin-top:2px}
.nt-info{display:flex;align-items:baseline;gap:8px;margin-top:9px}
.nt-info b{font-family:var(--display);font-size:1.15rem}
.nt-info em{font-style:normal;color:var(--gold);font-weight:700;font-size:.9rem}
.nt-buys{display:block;color:var(--dim);font-size:.82rem;line-height:1.4;margin-top:3px}
.nt-tips{margin-top:14px}
.nt-credit a{color:var(--dim)}
@media (prefers-reduced-motion: reduce){ .nt-side{transition:none} }
.app-screen:has([data-explore-tab]){position:relative}
.go-way-ex{margin-top:12px}
.svc[data-cart] .svc-i{background:var(--gold);color:#221900;border-color:var(--gold)}
.svc-wrap.open .svc-l{font-size:.68rem}

/* place page: the blurb under the photo (v72: moved out of an inline style so the light theme can reach it) */
.pl-blurb{color:#DCEBE1}

/* ---------- "See all places" and the full list (v121) ---------------------- */
.see-all{
  width:100%;min-height:52px;margin-top:12px;border-radius:16px;border:1px solid var(--line);
  background:var(--surface);color:var(--accent);font:700 .95rem var(--sans);
  display:flex;align-items:center;justify-content:center;gap:4px;transition:transform .14s ease;
}
.see-all:active{transform:scale(.985)}
.see-all .wi{width:1.1em;height:1.1em}
html.lt .see-all{color:color-mix(in srgb,var(--accent) 62%,#000)}
.pl-q{position:relative;display:block;margin-top:4px}
.pl-q .wi{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:1.15rem;height:1.15rem;color:var(--dim);pointer-events:none}
.pl-q input{
  width:100%;height:48px;border-radius:14px;border:1.5px solid var(--line);background:var(--surface);
  color:var(--white);padding:0 14px 0 44px;font:600 1rem var(--sans);-webkit-appearance:none;appearance:none;
}
.pl-q input:focus{outline:none;border-color:var(--gold)}
.pl-chips{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;margin:12px -18px 0;padding:0 18px 4px}
.pl-chips::-webkit-scrollbar{display:none}
.pl-chips button{
  flex:none;min-height:44px;padding:0 15px;border-radius:999px;border:1.5px solid var(--line);
  background:var(--surface);color:var(--white);font:700 .88rem var(--sans);white-space:nowrap;
}
.pl-chips button.on{background:var(--white);color:var(--bg);border-color:var(--white)}
.pl-count{margin:10px 2px 0;font-size:.82rem;color:var(--dim)}
.pl-none{margin:28px 0;text-align:center;color:var(--dim);line-height:1.5}
.pl-all .place[hidden],.pl-none[hidden]{display:none}
/* places as photo tiles on Explore, two by two */
.ptiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.ptiles.odd .ptile:last-child{grid-column:1/-1}
.ptile{
  position:relative;display:block;width:100%;height:172px;padding:0;border-radius:20px;overflow:hidden;text-align:left;
  border:1px solid var(--line);background:linear-gradient(150deg,#2E6B52,#123A2B);color:#fff;transition:transform .14s ease;
}
.ptile:active{transform:scale(.97)}
.ptile-ph{position:absolute;inset:0;display:grid;place-items:center;font-size:2.4rem;line-height:1;color:rgba(255,255,255,.85)}
.ptile-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ptile-sh{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 36%,rgba(6,18,12,.86) 100%)}
.ptile .stag{position:absolute;top:10px;left:10px;margin:0;background:rgba(255,255,255,.94);box-shadow:0 2px 8px rgba(0,0,0,.18)}
.ptile .stag.s-good{color:#17703E}
.ptile .stag.s-poor{color:#8A5300}
.ptile-t{position:absolute;left:12px;right:12px;bottom:11px;display:flex;flex-direction:column}
.ptile-t .k{font-family:var(--mono);font-size:.54rem;letter-spacing:.07em;text-transform:uppercase;font-weight:700;color:#CDEFE0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ptile-t .n{font-family:var(--display);letter-spacing:-.015em;font-size:1rem;line-height:1.16;margin-top:3px;color:#fff;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}