/* =============================================================================
   Exploring Oman, app styles
   Mobile-first. Change the colours here and the whole app follows.
   ========================================================================== */
:root{
  --sand:#faf6f0;
  --sand-2:#f2ebe1;
  --ink:#1b2320;
  --muted:#6b7671;
  --line:#e4dccf;
  --water:#0d5c63;
  --water-dark:#08454b;
  --water-soft:#e3f1f1;
  --gold:#c8892f;
  --gold-soft:#fdf3e2;
  --danger:#b23c2e;
  --radius:16px;
  --shadow:0 2px 10px rgba(27,35,32,.06);
  --shadow-lg:0 12px 40px rgba(27,35,32,.18);
  --maxw:960px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}

/* MUST come before any display: rule below. `hidden` loses to `display:grid`
   / `display:flex` on specificity, which left the unlock modal and the search
   bar permanently on screen. This puts the attribute back in charge. */
[hidden]{display:none !important}

html,body{margin:0;padding:0}
body{
  background:var(--sand);color:var(--ink);
  /* Body copy is Outfit too, not the phone's default. A paid guide that sets
     its headings and then leaves the paragraphs to the system font reads as
     half-finished, which is exactly how reviewers described it. Same family,
     same web request as the headings, so it costs nothing extra to load. */
  font:16px/1.62 "Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif;
  letter-spacing:.002em;
  padding-bottom:env(safe-area-inset-bottom);
  overscroll-behavior-y:none;
}
h1,h2,h3{line-height:1.2;margin:0}
a{color:var(--water);text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
img{max-width:100%;display:block}

/* ------------------------------------------------------------------ topbar */
/* NO backdrop-filter here. It used to carry blur(12px), which did nothing
   visible (the rule below paints the bar solid --water-dark, so there is
   nothing to see through) but DID make .topbar the containing block for its
   position:fixed descendants. On phones that broke the bottom tab bar: its
   `bottom:0` resolved to the bottom of the 82px header instead of the
   screen, so the tabs rendered on top of the "Exploring Oman" brand.

   STICKY ONLY ON DESKTOP. On a phone the tab bar is already fixed to the
   bottom of the screen, so the header has no navigation to keep on offer and
   nothing to earn a permanent slice of a small screen: it scrolls away with
   the page. Above 640px the tabs live INSIDE this bar, so it has to stay. */
.topbar{
  position:sticky;top:0;z-index:50;
  background:rgba(250,246,240,.92);
  border-bottom:1px solid var(--line);
  /* run the photo up under the notch / status bar in the installed app
     (viewport-fit=cover + black-translucent make the page own that space) */
  padding-top:max(env(safe-area-inset-top), 4px);
}
@media(max-width:640px){ .topbar{position:relative} }   /* relative, not static: the photo layer needs a positioning context, and relative still scrolls away */
.topbar-inner{
  max-width:var(--maxw);margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding:9px 16px;
}
/* the pill never leaves the screen: it refuses to shrink, and the brand text
   column is the one that gives way (ellipsis) when width runs out */
.topbar-actions{flex:0 0 auto}
.topbar-actions .pill{font-size:12px;padding:7px 11px}
.brand{min-width:0;flex:1 1 auto}
.brand-text{min-width:0}
.brand-text strong,.brand-text small{
  display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.brand{display:flex;align-items:center;gap:9px;color:var(--ink)}
.brand-mark{font-size:22px}
.brand-text{display:flex;flex-direction:column;line-height:1.15}
.brand-text strong{font-size:16px;letter-spacing:-.2px}
.brand-text small{font-size:11px;color:var(--muted)}
.topbar-actions{display:flex;align-items:center;gap:8px}
.icon-btn{
  width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;font-size:15px;
  background:var(--sand-2);
}
.icon-btn:active{transform:scale(.94)}

.pill{
  padding:8px 14px;border-radius:999px;font-size:13px;font-weight:600;
  background:var(--water);color:#fff;white-space:nowrap;
}
.pill:active{transform:scale(.96)}
.pill-ghost{background:var(--water-soft);color:var(--water-dark)}
.pill-unlocked{background:#e7f4ea;color:#1e6b39}

/* -------------------------------------------------------------------- tabs */
/* The tabs WRAP instead of scrolling sideways, on a phone you can see every
   tab at once (3 rows of 3-4) instead of discovering them by swiping. */
.tabs{
  position:relative;z-index:2;
  max-width:var(--maxw);margin:0 auto;
  display:flex;flex-wrap:wrap;gap:6px;padding:0 10px 10px;
}
.tab{
  flex:0 1 auto;padding:8px 12px;border-radius:999px;
  font-size:14px;font-weight:600;color:var(--muted);
  background:#fff;border:1px solid var(--line);white-space:nowrap;
}
.tab[aria-selected="true"]{background:var(--water);color:#fff;border-color:var(--water)}
.tab .t-icon{margin-right:5px}

/* Narrow phones: shrink the chips a touch so the whole set still fits in
   three tidy rows rather than spilling into five. */
@media(max-width:420px){
  .tabs{gap:5px;padding:0 8px 10px}
  .tab{padding:7px 10px;font-size:13px}
  .tab .t-icon{margin-right:3px}
}

/* ------------------------------------------------------------------ search */
.searchbar{
  position:sticky;top:0;z-index:60;
  display:flex;gap:8px;align-items:center;
  padding:12px 16px;background:var(--sand);border-bottom:1px solid var(--line);
}
.searchbar input{
  flex:1;padding:11px 14px;border-radius:12px;border:1px solid var(--line);
  background:#fff;font-size:16px;outline:none;
}
.searchbar input:focus{border-color:var(--water)}

/* -------------------------------------------------------------------- view */
.view{max-width:var(--maxw);margin:0 auto;padding:20px 16px 60px}

.cat-head{margin-bottom:12px}
.cat-head h1{font-size:26px;letter-spacing:-.5px}
.cat-head p{margin:6px 0 0;color:var(--muted);font-size:14.5px}
/* Title and rank share a line, the scoreboard costs zero vertical space. */
.cat-titlerow{display:flex;align-items:center;gap:12px}
.cat-titlerow h1{flex:1 1 auto;min-width:0}

/* ------------------------------------------------------------- RANK BADGE
   Was a full-width bar with a fill line under the filters, which read as
   something loading. Now a ring you fill by going places: the number sits in
   the middle, the rank is the reward, and the whole thing rides beside the
   page title. Conic-gradient, no SVG, no JS animation loop. */
.rankbadge{
  display:flex;align-items:center;gap:8px;flex:0 0 auto;
  background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:5px 12px 5px 5px;box-shadow:var(--shadow);
}
.rankbadge .rb-ring{
  --sz:32px;--metal:var(--water);
  position:relative;width:var(--sz);height:var(--sz);border-radius:50%;
  flex:0 0 auto;display:grid;place-items:center;
  background:conic-gradient(var(--metal) calc(var(--pct)*1%), var(--sand-2) 0);
  transition:background .5s ease;
}
/* The metal changes as you climb, so crossing a rank looks like something. */
.rankbadge[data-tier="2"] .rb-ring{--metal:var(--gold)}
.rankbadge[data-tier="1"] .rb-ring{
  background:conic-gradient(var(--gold) calc(var(--pct)*1%), var(--sand-2) 0);
  box-shadow:0 0 0 2px var(--gold-soft);
}
.rankbadge[data-tier="2"] .rb-core,
.rankbadge[data-tier="1"] .rb-core{color:var(--gold)}
.rankbadge .rb-core{
  position:absolute;inset:3px;border-radius:50%;background:#fff;
  display:grid;place-items:center;
  font-size:12px;font-weight:800;color:var(--water-dark);
  font-family:"Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.rankbadge .rb-txt{display:flex;flex-direction:column;line-height:1.15}
.rankbadge .rb-txt strong{
  font-size:12.5px;font-weight:800;color:var(--ink);letter-spacing:-.1px;
  font-family:"Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.rankbadge .rb-txt small{font-size:10.5px;color:var(--muted);white-space:nowrap}
.rankbadge.rb-zero .rb-core{color:var(--muted)}
/* Under ~400px the words go and the ring carries it alone. */
@media(max-width:400px){
  .rankbadge{padding:4px;gap:0}
  .rankbadge .rb-txt{display:none}
  .rankbadge .rb-ring{--sz:34px}
}

/* ------------------------------------------------------------- SEARCH CUE
   Search used to be a magnifier icon crammed next to the map toggle. It's a
   full-width cue where the intro paragraph used to be, shaped like the field
   it opens, nothing to decode. */
.searchcue{
  display:flex;align-items:center;gap:9px;width:100%;
  background:#fff;border:1px solid var(--line);border-radius:13px;
  padding:4px 8px 4px 14px;margin:0 0 10px;box-shadow:var(--shadow);
}
.searchcue .sc-i{font-size:15px;flex:0 0 auto;opacity:.75}
.searchcue .sc-input{
  flex:1;min-width:0;font:inherit;font-size:15px;color:var(--ink);
  background:none;border:0;outline:none;padding:11px 0;
}
.searchcue .sc-input::placeholder{color:var(--muted)}
/* the browser's own X, we draw our own so it exists on every phone */
.searchcue .sc-input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.searchcue .sc-clear{
  flex:0 0 auto;width:30px;height:30px;border-radius:50%;border:0;cursor:pointer;
  background:var(--sand-2);color:var(--muted);font-size:13px;line-height:1;
}
.searchcue:focus-within{border-color:var(--water);box-shadow:0 0 0 3px var(--water-soft)}
.searchcue.on{border-color:var(--water)}

/* --------------------------------------------------- the control bar (tabs)
   ONE filter button and the List/Map switch. Everything that filters this tab
   lives behind the button, there is no second place to look. */
/* Bleeds to the page edges so that when it sticks, the cards scroll UNDER a
   solid band rather than behind two floating pills. */
/* NOT sticky. It sits in the page and scrolls away with everything else.
   It was sticky, then sticky-with-hide-on-scroll, and both meant it moved
   while you were trying to read the list. A control that follows you is a
   control that's in the way. The tab bar is fixed at the bottom of the
   screen, so navigation is always reachable regardless. */
.filterwrap{margin:0 -16px 18px;padding:6px 16px 8px;background:var(--sand)}
.filterbar{display:flex;align-items:center;gap:10px}
.filterbtn{
  display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;
  font:inherit;font-size:13.5px;font-weight:700;line-height:1;cursor:pointer;
  background:#fff;color:var(--ink);border:1px solid var(--line);
  border-radius:12px;padding:10px 13px;box-shadow:var(--shadow);
  transition:background .14s ease,color .14s ease,border-color .14s ease;
}
.filterbtn:disabled{opacity:.45;pointer-events:none}
/* Three bars that shorten downward, a filter mark, drawn not typed, so it
   doesn't render as a different emoji on every phone. */
.filterbtn .fb-ico{display:flex;flex-direction:column;gap:3px;width:14px}
.filterbtn .fb-ico i{height:2px;border-radius:2px;background:currentColor;display:block}
.filterbtn .fb-ico i:nth-child(1){width:100%}
.filterbtn .fb-ico i:nth-child(2){width:70%}
.filterbtn .fb-ico i:nth-child(3){width:40%}
.filterbtn .fb-count{
  background:var(--water);color:#fff;border-radius:999px;
  font-size:11px;font-weight:800;padding:2px 7px;min-width:18px;text-align:center;
}
.filterbtn .fb-caret{font-size:13px;color:var(--muted);transition:transform .18s ease}
.filterbtn.open .fb-caret{transform:rotate(180deg)}
.filterbtn.on{border-color:var(--water);background:var(--water-soft);color:var(--water-dark)}
.filterbtn.on .fb-caret{color:var(--water-dark)}

.filterpanel{
  background:#fff;border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow);padding:14px 14px 12px;margin-top:8px;
  animation:fpDrop .16s ease-out;
}
.filterpanel[hidden]{display:none}
@keyframes fpDrop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.fp-sec + .fp-sec{margin-top:14px;padding-top:13px;border-top:1px solid var(--line)}
.fp-h{
  font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);margin-bottom:9px;
}
.fp-row{display:flex;flex-wrap:wrap;gap:7px}
.fchip{
  display:inline-flex;align-items:center;gap:6px;
  font:inherit;font-size:13px;font-weight:600;line-height:1;cursor:pointer;
  padding:9px 12px;border-radius:999px;
  background:var(--sand-2);color:var(--ink);border:1px solid transparent;
  transition:background .12s ease,color .12s ease;
}
.fchip .fchip-n{
  font-size:10.5px;font-weight:800;color:var(--muted);
  background:#fff;border-radius:999px;padding:2px 6px;min-width:17px;text-align:center;
}
.fchip.on{background:var(--water-dark,#14564a);color:#fff}
.fchip.on .fchip-n{background:rgba(255,255,255,.22);color:#fff}
/* Refinements are switches, not chips, a tick box makes on/off unambiguous
   in a way a filled pill doesn't. */
.ftog{
  display:inline-flex;align-items:center;gap:8px;
  font:inherit;font-size:13px;font-weight:600;line-height:1;cursor:pointer;
  padding:9px 12px 9px 10px;border-radius:11px;
  background:var(--sand-2);color:var(--ink);border:1px solid transparent;
}
.ftog .ftog-i{font-size:14px}
.ftog .ftog-box{
  width:16px;height:16px;border-radius:5px;flex:0 0 auto;
  border:1.5px solid var(--line);background:#fff;position:relative;
}
.ftog.on{background:var(--water-soft);border-color:var(--water);color:var(--water-dark)}
.ftog.on .ftog-box{background:var(--water);border-color:var(--water)}
.ftog.on .ftog-box::after{
  content:"";position:absolute;left:5px;top:1.5px;width:4px;height:8px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);
}
.fp-clear{
  display:block;width:100%;margin-top:13px;
  font:inherit;font-size:13px;font-weight:700;cursor:pointer;
  background:transparent;border:1px dashed var(--line);border-radius:11px;
  padding:10px;color:var(--muted);
}
.fp-clear:active{background:var(--sand-2)}

.viewswitch{
  display:flex;gap:2px;flex:0 0 auto;margin-left:auto;
  background:var(--sand-2);border-radius:999px;padding:3px;
}
.chip-region{background:#eef4fb;color:#2b5d8f}
.vs{
  display:inline-flex;align-items:center;gap:5px;
  font:inherit;font-size:12.5px;font-weight:700;line-height:1;
  padding:7px 11px;border-radius:999px;cursor:pointer;
  background:transparent;border:0;color:var(--muted);white-space:nowrap;
}
.vs.on{background:#fff;color:var(--water-dark);box-shadow:var(--shadow)}
@media(max-width:520px){ .vs span{display:none} .vs{padding:7px 9px} }

/* "All · 🏖️ Beach 3 · 🌊 Waterfall 2 · 🏬 Mall 1", a scrollable row of
   filter chips built from the types actually present in the tab. */
.typefilter{
  display:flex;gap:7px;overflow-x:auto;padding:2px;flex:1 1 auto;min-width:0;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.typefilter::-webkit-scrollbar{display:none}
.tfchip{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;
  font:inherit;font-size:13px;font-weight:600;line-height:1;
  padding:8px 12px;border-radius:999px;cursor:pointer;
  background:#fff;color:var(--ink);border:1px solid var(--line);
  transition:background .12s ease,border-color .12s ease,color .12s ease;
}
.tfchip:hover{border-color:var(--water)}
.tfchip .tfn{
  font-size:11px;font-weight:700;color:var(--muted);
  background:var(--sand-2);border-radius:999px;padding:2px 6px;min-width:18px;text-align:center;
}
.tfchip.on{background:var(--water-dark,#14564a);color:#fff;border-color:var(--water-dark,#14564a)}
.tfchip.on .tfn{background:rgba(255,255,255,.22);color:#fff}

/* Type sections inside a long, unfiltered tab, "💧 Wadi (9)" and so on.
   Tapping a header filters to that type. */
.group-head{
  display:flex;align-items:center;gap:9px;cursor:pointer;
  margin:26px 0 12px;padding-bottom:8px;
  border-bottom:1px solid var(--line);
}
.group-head:first-of-type{margin-top:4px}
.group-head h2{font-size:17px;letter-spacing:-.2px;margin:0}
.group-head .group-n{
  font-size:11.5px;font-weight:800;color:var(--water-dark);
  background:var(--water-soft);border-radius:999px;padding:3px 8px;
}
.group-head::after{content:"filter →";margin-left:auto;font-size:11.5px;font-weight:700;color:var(--muted)}
.group-head:hover::after{color:var(--water)}

/* The map, shown inside a tab instead of on its own screen */
.mappanel{margin-bottom:10px}
.mappanel .mapwrap{height:60vh;min-height:340px}

/* ------------------------------------------------------------------- cards */
.grid{display:grid;gap:14px}
@media(min-width:680px){.grid{grid-template-columns:1fr 1fr}}

.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow);position:relative;
  transition:transform .15s ease;
}
.card:active{transform:scale(.99)}
.card-media{
  height:170px;background:var(--sand-2);position:relative;
  display:grid;place-items:center;color:var(--muted);font-size:13px;
  overflow:hidden;
}
/* the photo is a lazy <img> now, not a background (backgrounds can't lazy-load) */
.card-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
}
.card-body{padding:14px 15px 16px}
.card-kicker{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:7px;
}
.chip{
  font-size:10.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  padding:3px 8px;border-radius:6px;background:var(--water-soft);color:var(--water-dark);
}
.chip-free{background:#e7f4ea;color:#1e6b39}
.chip-lock{background:var(--gold-soft);color:var(--gold)}
.chip-hard{background:#fbe9e6;color:var(--danger)}
.chip-type{background:var(--sand-2);color:#4c5a54;border:1px solid var(--line);text-transform:none;letter-spacing:0;font-size:11px}
.lock-forever{display:block;margin-top:6px;font-weight:700;color:var(--water-dark)}
.card h3{font-size:18.5px;letter-spacing:-.3px;margin-bottom:4px}
.card .tagline{color:var(--muted);font-size:14px;margin:0 0 10px}
.card .blurb{font-size:14.5px;margin:0 0 12px;color:#3d4a45}
.metarow{display:flex;flex-wrap:wrap;gap:5px}
.meta{
  font-size:11.5px;padding:3px 8px;border-radius:6px;
  background:var(--sand-2);color:#4c5a54;
}

/* locked cards, anonymous by design: no photo, no name, just the lock */
.card.locked .card-media{filter:saturate(.35)}
.card-media-locked{
  font-size:36px;
  background:linear-gradient(135deg,var(--sand-2),var(--gold-soft));
}
.lock-veil{
  margin-top:12px;padding:13px 14px;border-radius:12px;
  background:linear-gradient(180deg,#fffdf8,var(--gold-soft));
  border:1px dashed #e6c88c;
}
.lock-veil p{margin:0 0 10px;font-size:13.5px;color:#7a5a1e}
.lock-veil .lock-actions{display:flex;gap:8px;flex-wrap:wrap}
.btn-buy{
  padding:9px 16px;border-radius:999px;background:var(--gold);color:#fff;
  font-size:13px;font-weight:700;
}
.btn-key{
  padding:9px 16px;border-radius:999px;background:#fff;color:var(--gold);
  font-size:13px;font-weight:700;border:1px solid #e6c88c;
}

/* --------------------------------------------------------------- promo bar */
.promo{
  margin:22px 0 4px;padding:18px;border-radius:var(--radius);
  background:linear-gradient(135deg,var(--water),#0a7a83);color:#fff;
  box-shadow:var(--shadow);
}
.promo h3{font-size:19px;margin-bottom:6px}
.promo p{margin:0 0 14px;font-size:14px;opacity:.9}
.promo .btn-buy{background:#fff;color:var(--water-dark)}

/* -------------------------------------------------------------------- sheet */
/* z-index: Leaflet's map panes/controls go up to 1000, so the sheet, modal
   and toast must sit ABOVE that, or a spot opened from the map renders
   underneath it. */
.sheet-backdrop,.modal-backdrop{
  position:fixed;inset:0;z-index:1100;background:rgba(20,26,24,.5);
  backdrop-filter:blur(2px);
}
.sheet{
  position:fixed;z-index:1200;left:0;right:0;bottom:0;
  max-height:92vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:var(--sand);border-radius:22px 22px 0 0;
  box-shadow:var(--shadow-lg);
  animation:slideUp .28s cubic-bezier(.2,.8,.2,1);
}
@media(min-width:760px){
  .sheet{
    left:50%;transform:translateX(-50%);width:720px;
    bottom:0;border-radius:22px 22px 0 0;
  }
  @keyframes slideUp{from{transform:translate(-50%,100%)}to{transform:translate(-50%,0)}}
}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
/* STICKY inside the scrolling sheet, so it rides at the top-right of the
   visible area however deep you've scrolled: closing never means scrolling
   back up. Sticky, not fixed, deliberately: the sheet carries transforms
   (the slide-up animation; a permanent translateX centring on desktop) and a
   transform turns position:fixed into position:absolute-in-the-sheet. Sticky
   doesn't care. The negative bottom margin removes its layout footprint so
   the hero still starts at the very top.
   Accidental-exit guards: a deliberate 40px target, inset from the edge
   where scroll thumbs live, visually ringed; backdrop and Escape unchanged. */
.sheet-close{
  position:sticky;top:max(10px, env(safe-area-inset-top));z-index:20;
  margin:10px 12px -50px auto;
  width:40px;height:40px;border-radius:50%;
  background:rgba(20,30,28,.55);color:#fff;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border:1.5px solid rgba(255,255,255,.55);
  box-shadow:0 2px 10px rgba(0,0,0,.3);
  display:grid;place-items:center;font-size:15px;
}
.sheet-close:active{transform:scale(.92)}
/* the unlock modal shares the class but keeps its X inside the dialog box */
.modal .sheet-close{
  position:absolute;top:14px;right:14px;z-index:2;
  width:34px;height:34px;background:rgba(255,255,255,.92);color:var(--ink);
  border:none;-webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:var(--shadow);font-size:14px;
}
.sheet-body{padding:0 0 44px}
.sheet-hero{
  height:220px;background:var(--sand-2);
  display:grid;place-items:center;color:var(--muted);
  background-size:cover;background-position:center;
}
.sheet-inner{padding:20px 20px 0}
.sheet-inner h2{font-size:26px;letter-spacing:-.5px;margin-bottom:5px}
.sheet-inner .tagline{color:var(--muted);font-size:15px;margin:0 0 16px}

.statgrid{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:12px;
  overflow:hidden;margin:16px 0;
}
@media(min-width:520px){.statgrid{grid-template-columns:1fr 1fr 1fr}}
.statgrid .s{background:#fff;padding:10px 12px}
.statgrid .s .lab{font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}
.statgrid .s .val{font-size:14px;font-weight:600;margin-top:2px}

.mapbtn{
  display:block;text-align:center;padding:12px;border-radius:12px;
  background:var(--water);color:#fff;font-weight:700;font-size:14.5px;margin:4px 0 6px;
}
.instabtn{
  display:block;text-align:center;padding:12px;border-radius:12px;
  background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);
  color:#fff;font-weight:700;font-size:14.5px;margin:4px 0 6px;
}
.instarow .instabtn + .instabtn{margin-top:6px}
.chip-reel{background:#fdecf3;color:#bc1888}
.affbtn{
  display:block;text-align:center;padding:11px;border-radius:12px;
  background:#eaf6ec;color:#1e6b39;font-weight:700;font-size:14px;margin:8px 0 0;
  border:1px solid #cbe6d2;
}
.sheet h3.sec{font-size:16px;margin:22px 0 8px}
.sheet p.body{font-size:15px;margin:0 0 12px;color:#37423d}
.tipbox{
  background:var(--gold-soft);border-left:3px solid var(--gold);
  padding:14px 16px;border-radius:0 12px 12px 0;margin:16px 0;
}
.tipbox strong{color:var(--gold);font-size:13px;text-transform:uppercase;letter-spacing:.5px}
.tipbox ul{margin:9px 0 0;padding-left:18px;font-size:14.5px}
.tipbox li{margin-bottom:5px}
.guidebox{
  background:var(--water-soft);border-radius:12px;padding:15px 16px;margin:16px 0;
}
.guidebox strong{font-size:14px}
.guidebox p{margin:6px 0 10px;font-size:14px;color:#33534f}
.verifynote{
  font-size:12px;color:var(--muted);background:var(--sand-2);
  padding:9px 12px;border-radius:9px;margin:14px 0;
}

/* -------------------------------------------------------------------- modal */
.modal-backdrop{display:grid;place-items:center;padding:20px}
.modal{
  position:relative;background:var(--sand);border-radius:20px;
  width:100%;max-width:440px;padding:28px 24px 24px;
  box-shadow:var(--shadow-lg);max-height:88vh;overflow-y:auto;
}
.modal h2{font-size:22px;margin-bottom:8px}
.modal p{font-size:14.5px;color:var(--muted);margin:0 0 18px}
.field{margin-bottom:12px}
.field label{display:block;font-size:12.5px;font-weight:700;margin-bottom:5px}
.field input,.field select{
  width:100%;padding:12px 13px;border-radius:11px;border:1px solid var(--line);
  background:#fff;font-size:16px;outline:none;
}
.field input:focus,.field select:focus{border-color:var(--water)}
.btn-full{
  width:100%;padding:13px;border-radius:12px;background:var(--water);
  color:#fff;font-weight:700;font-size:15px;margin-top:6px;
}
.btn-full:disabled{opacity:.55}
.btn-full.gold{background:var(--gold)}
.msg{margin-top:12px;font-size:13.5px;padding:10px 12px;border-radius:10px}
.msg.err{background:#fbe9e6;color:var(--danger)}
.msg.ok{background:#e7f4ea;color:#1e6b39}
.hint{font-size:12px;color:var(--muted);margin-top:14px;line-height:1.5}

/* ------------------------------------------------------------------ planner */
.q{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;margin-bottom:14px;box-shadow:var(--shadow);
}
.q h3{font-size:16px;margin-bottom:3px}
.q .qsub{font-size:13px;color:var(--muted);margin:0 0 12px}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{
  padding:9px 14px;border-radius:999px;border:1px solid var(--line);
  background:var(--sand);font-size:14px;font-weight:600;color:#4c5a54;
}
.opt[aria-pressed="true"]{background:var(--water);color:#fff;border-color:var(--water)}
.rangewrap{display:flex;align-items:center;gap:14px}
.rangewrap input[type=range]{flex:1;accent-color:var(--water)}
.rangeval{
  min-width:74px;text-align:center;font-weight:800;font-size:15px;
  background:var(--water-soft);color:var(--water-dark);
  padding:7px 10px;border-radius:10px;
}

.plan-day{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  margin-bottom:14px;overflow:hidden;box-shadow:var(--shadow);
}
.plan-day-head{
  padding:13px 16px;background:var(--water);color:#fff;
  display:flex;justify-content:space-between;align-items:center;gap:10px;
}
.plan-day-head strong{font-size:15px}
.plan-day-head span{font-size:12px;opacity:.85}
.plan-day-body{padding:6px 16px 14px}
.leg{
  display:flex;gap:10px;align-items:flex-start;
  padding:11px 0;border-bottom:1px dashed var(--line);
}
.leg:last-child{border-bottom:0}
.leg-time{
  font-size:11.5px;font-weight:800;color:var(--water);
  min-width:52px;padding-top:2px;
}
.leg-main strong{font-size:15px;display:block}
.leg-main .leg-note{font-size:13px;color:var(--muted);margin-top:2px}
.leg.drive .leg-main strong{color:var(--muted);font-weight:600;font-size:13.5px}
.plan-summary{
  background:var(--water-soft);border-radius:var(--radius);
  padding:16px;margin-bottom:16px;
}
.plan-summary h2{font-size:20px;margin-bottom:6px}
.plan-summary p{margin:0;font-size:14px;color:#33534f}
.plan-actions{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0}
.plan-warn{
  background:#fdf3e2;border-left:3px solid var(--gold);
  padding:11px 14px;font-size:13.5px;border-radius:0 10px 10px 0;margin:12px 0;
}

/* ------------------------------------------------------------------- toast */
.toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%);
  z-index:1300;background:var(--ink);color:#fff;
  padding:12px 20px;border-radius:999px;font-size:14px;font-weight:600;
  box-shadow:var(--shadow-lg);animation:pop .2s ease;
}
@keyframes pop{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}

.empty{text-align:center;padding:50px 20px;color:var(--muted)}
.empty .big{font-size:40px;margin-bottom:10px}

/* Inline day control on the plan results page */
.dayctl{
  display:flex;align-items:center;justify-content:center;gap:14px;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:10px 14px;margin-bottom:14px;box-shadow:var(--shadow);
}
.dayctl-b{
  width:38px;height:38px;border-radius:50%;
  background:var(--water-soft);color:var(--water-dark);
  font-size:20px;font-weight:800;line-height:1;
  display:grid;place-items:center;
}
.dayctl-b:active{transform:scale(.92)}
.dayctl-n{min-width:92px;text-align:center;font-weight:800;font-size:16px}

/* ------------------------------------------------- living line (in header)
   One small line above the tabs. Replaced the fat banner that used to sit
   inside every tab. */
/* The full-width "Living guide · updated July 2026 · Buy once · updates free
   forever" strip is gone: 28px of every screen, on every tab, saying the same
   thing forever. The update date moved into the brand sub-line, which was
   already there and already read. */
.livingline{display:none}
.livingline .ll-main{color:var(--water-dark);font-weight:700}
.livingline .ll-sub{
  color:var(--muted);font-weight:600;
  border-left:1px solid var(--line);padding-left:8px;
}
.pulse{
  width:7px;height:7px;border-radius:50%;background:#22a06b;flex:0 0 auto;
  animation:pulse 2.2s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(34,160,107,.5)}
  70%{box-shadow:0 0 0 7px rgba(34,160,107,0)}
  100%{box-shadow:0 0 0 0 rgba(34,160,107,0)}
}
@media(max-width:420px){
  .livingline{font-size:11px;padding:0 10px 8px;gap:6px}
}

/* ---------------------------------------------- step lists & bullet lists
   Every "explanation" field can be an array → renders here. No paragraphs. */
.steplist{margin:0 0 14px;padding:0;list-style:none;counter-reset:s}
.steplist li{
  position:relative;padding:0 0 0 30px;margin-bottom:9px;
  font-size:15px;line-height:1.5;color:#37423d;counter-increment:s;
}
.steplist li::before{
  content:counter(s);
  position:absolute;left:0;top:1px;
  width:20px;height:20px;border-radius:50%;
  background:var(--water-soft);color:var(--water-dark);
  font-size:11px;font-weight:800;line-height:20px;text-align:center;
}
.bulletlist{margin:0 0 14px;padding:0;list-style:none}
.bulletlist li{
  position:relative;padding:0 0 0 18px;margin-bottom:8px;
  font-size:15px;line-height:1.5;color:#37423d;
}
.bulletlist li::before{
  content:"";position:absolute;left:2px;top:8px;
  width:6px;height:6px;border-radius:50%;background:var(--water);
}

/* ================================================================ PRICE BOX */
.section-head{margin:28px 0 12px}
.section-head h2{font-size:20px}
.section-head p{margin:4px 0 0;color:var(--muted);font-size:14px}

.pricebox{display:grid;gap:10px;align-items:stretch}
@media(min-width:680px){.pricebox{grid-template-columns:1fr auto 1fr}}
.price-opt{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:17px;box-shadow:var(--shadow);display:flex;flex-direction:column;position:relative;
}
.price-opt.best{border:2px solid var(--gold);background:linear-gradient(180deg,#fffdf8,#fff)}
.price-badge{
  position:absolute;top:-10px;left:16px;
  background:var(--gold);color:#fff;font-size:10.5px;font-weight:800;
  padding:3px 9px;border-radius:6px;letter-spacing:.3px;
}
.price-opt-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:6px}
.price-name{font-weight:800;font-size:15.5px}
.price-tag{font-weight:800;font-size:22px;color:var(--water-dark)}
.price-opt.best .price-tag{color:var(--gold)}
.price-opt p{font-size:13.5px;color:var(--muted);margin:0 0 14px;flex:1}
.price-or{
  display:grid;place-items:center;font-size:12px;font-weight:800;color:var(--muted);
  text-transform:uppercase;letter-spacing:1px;padding:4px 0;
}
.pricebox.compact .price-opt{padding:14px}
.pricebox.compact .price-tag{font-size:19px}

/* ONE product now, a single card, full width, no "or" column. */
.pricebox.one{grid-template-columns:1fr !important}
.pricebox.one .price-opt{padding:20px 18px}
.pricebox.one .bulletlist{margin:4px 0 14px}
.pricebox.one .bulletlist li{font-size:14px;color:#37423d;margin-bottom:7px}
.price-fine{font-size:12px;color:var(--muted);margin:9px 0 0;text-align:center}

/* More tab: breathing room between the map and the About block */
.about{margin-top:6px}
.btn-buy.gold{background:var(--gold)}
.lock-actions .btn-buy{flex:1 1 auto;text-align:center}

/* ============================================================== TIME / GEAR */
.timebox{display:grid;gap:10px;margin:16px 0}
@media(min-width:520px){.timebox{grid-template-columns:1fr 1fr}}
.tb{
  display:flex;gap:11px;align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;
}
.tb-i{font-size:20px}
.tb strong{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}
.tb span:not(.tb-i){font-size:13.5px;font-weight:600;line-height:1.35;display:block;margin-top:2px}

.bringbox{display:grid;gap:10px;margin:10px 0 4px}
@media(min-width:520px){.bringbox{grid-template-columns:1fr 1fr}}
.bring-col{background:#fff;border:1px solid var(--line);border-radius:12px;padding:13px 15px}
.bring-h{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;margin-bottom:7px}
.bring-h.must{color:var(--danger)}
.bring-h.nice{color:var(--water)}
.bring-col ul{margin:0;padding-left:17px;font-size:14px}
.bring-col li{margin-bottom:5px}

.verifynote.warn{background:#fdf3e2;color:#7a5a1e}

/* =============================================================== MAP PINS */
.pinrow{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 14px}
.pin{
  display:inline-block;font-size:12.5px;font-weight:700;
  background:var(--water-soft);color:var(--water-dark);
  padding:5px 10px;border-radius:8px;margin-top:5px;
}
.routebtn{
  display:block;text-align:center;margin:10px 0 2px;padding:11px;
  background:var(--water-soft);color:var(--water-dark);
  border-radius:11px;font-weight:700;font-size:13.5px;
}
.leg-meta{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}

/* ==================================================================== ABOUT */
.about-hero{text-align:center;padding:14px 0 22px}
.about-avatar{
  width:74px;height:74px;border-radius:50%;margin:0 auto 14px;
  background:linear-gradient(135deg,var(--water),#0a7a83);
  display:grid;place-items:center;font-size:34px;box-shadow:var(--shadow);
}
.about-photo{object-fit:cover;display:block;padding:0}
.about-photo-empty{
  background:var(--sand-2);border:2px dashed var(--line);box-shadow:none;
  font-size:22px;grid-template-rows:auto auto;gap:1px;color:#9a938a;
}
.about-photo-empty small{font-size:8.5px;font-weight:700;letter-spacing:.2px}
.about-hero h1{font-size:27px;letter-spacing:-.5px}

/* The hook is a QUOTE, a real question people send him, so it has to read as
   somebody speaking, not as a section heading. The oversized opening mark and
   the tightened tracking do that work without italics (italic question marks at
   this size look like a pull-quote in a magazine, and this is a phone). */
/* Scoped to h1.about-hook so it outranks the plain `.about-hero h1` above.
   The quote marks are a matched PAIR set in the text (see renderAbout) rather
   than a floating decorative ::before, a single hanging opening mark with no
   closing one just read as a stray character. */
.about-hero h1.about-hook{
  font-size:30px;line-height:1.16;letter-spacing:-.7px;
  max-width:16ch;margin:0 auto;text-wrap:balance;
}
.about-hero h1.about-hook q{quotes:"“" "”"}
.about-hero h1.about-hook q::before,
.about-hero h1.about-hook q::after{color:var(--water);opacity:.45}
.about-sub{color:#37423d;font-size:15.5px;line-height:1.5;margin:14px auto 0;max-width:32ch}
.about-byline{color:var(--muted);font-size:12.5px;margin:12px 0 0;letter-spacing:.01em}
@media (max-width:380px){
  .about-hero h1.about-hook{font-size:26px}
  .about-sub{font-size:14.5px;max-width:30ch}
}

/* Four proof chips. As a centred wrap they stacked into three ragged rows and
   ate 146px; a two-column grid puts them in two tidy rows for half that. */
.about-badges{
  display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:20px;
}
.about-badges .badge{
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-size:11.5px;font-weight:700;padding:8px 9px;border-radius:11px;
  background:var(--water-soft);color:var(--water-dark);line-height:1.3;
}
@media(min-width:560px){.about-badges{grid-template-columns:repeat(4,1fr)}}
.about-body{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:20px;box-shadow:var(--shadow);
}
.about-body p{font-size:15px;margin:0 0 14px;color:#37423d}
.about-body p:last-child{margin-bottom:0}
/* .about-body h3 and .about-body .pull were dropped with the sub-headings and
   the pull-quote, the quote is the page's h1 now, and the body is two
   paragraphs with nothing left to sub-divide. */
.about-contact{margin-top:22px}
.about-contact h3{font-size:17px;margin-bottom:10px}
.contact-row{
  display:flex;align-items:center;gap:13px;
  background:#fff;border:1px solid var(--line);border-radius:13px;
  padding:14px 16px;margin-bottom:9px;box-shadow:var(--shadow);color:var(--ink);
}
.contact-row:active{transform:scale(.99)}
.contact-row .ci{font-size:20px}
.contact-row strong{display:block;font-size:15px;color:var(--water-dark)}
.contact-row small{display:block;font-size:12.5px;color:var(--muted);margin-top:1px}
.contact-row span:nth-child(2){flex:1}
.contact-row .carr{color:var(--muted);font-weight:700}
.about-tag{
  text-align:center;margin-top:24px;padding:16px;
  background:var(--water-soft);border-radius:var(--radius);
  font-size:14px;color:#33534f;
}

/* ============================================================= PLANNER DAYS */
.days-q{border:2px solid var(--water);background:var(--water-soft)}
.days-quick{margin-bottom:14px}
.rangeval.big{min-width:96px;font-size:17px;background:#fff}

@media print{
  .topbar,.searchbar,.plan-actions,.promo,.pricebox,.routebtn{display:none !important}
  .plan-day{break-inside:avoid;box-shadow:none}
  body{background:#fff}
}

/* ======================================================== SEASON CHIP (new) */
.chip-season{background:#fdf0e2;color:#a05a0a;border:1px solid #f0d9b8}

/* ================================================== PLANNER TEASER (locked) */
.plan-day-locked{opacity:.75;border-style:dashed}
.plan-day-locked .plan-day-body{padding:10px 16px}

/* ============================================================== MAP TAB (new) */
.map-legend{display:flex;flex-wrap:wrap;gap:10px 16px;margin:0 0 12px}
.map-key{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}
.map-key .dot{width:11px;height:11px;border-radius:50%;display:inline-block;border:2px solid #fff;box-shadow:0 0 0 1px var(--line)}
.mapwrap{height:min(68vh,620px);border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);background:var(--sand-2)}
.mapwrap-fallback{height:auto;padding:16px}
.map-loading{display:flex;align-items:center;justify-content:center;height:100%;color:var(--muted);font-size:14px;padding:18px;text-align:center}
.mapwrap-fallback .map-loading{height:auto;justify-content:flex-start;text-align:left;padding:0 0 12px}
.map-pop{font:14px/1.45 inherit;max-width:220px}
.map-pop strong{display:block;margin-bottom:2px}
.map-pop p{margin:0 0 8px;color:var(--muted);font-size:13px}
.map-pop .pin{display:inline-block;background:var(--water-soft);color:var(--water);padding:5px 10px;border-radius:8px;font-size:13px;font-weight:600}

/* ====================================================== ABOUT CHANGELOG (new)
   The changelog is FOLDED now. It's proof, not reading material: whoever wants
   the receipts taps once, and everybody else scrolls past a single bar. The
   wrapper carries no card of its own, the .fold inside is the card. */
.about-changelog{margin-top:20px}
.about-changelog > .fold{margin:0}
.log-entry{margin-bottom:14px}
.log-entry:last-child{margin-bottom:0}
.log-date{font-weight:700;font-size:12px;color:var(--gold);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}
.log-entry ul{margin:0}

/* A fold inside a fold: flatter, so the nesting reads as depth not as clutter. */
.fold-sub{
  margin:14px 0 0;border-radius:11px;box-shadow:none;
  background:var(--sand-2);border-color:var(--line);
}
.fold-sub > summary{padding:10px 13px;font-size:13.5px;color:var(--muted)}
.fold-sub[open] > summary{border-bottom-color:var(--line)}
.fold-sub .fold-body{padding:12px 13px 13px}

/* The quietest thing on the page, a legal obligation, met without shouting. */
.fold-quiet{background:transparent;border-style:dashed;box-shadow:none}
.fold-quiet > summary{font-size:13px;font-weight:600;color:var(--muted);padding:11px 14px}
.fold-quiet[open] > summary{border-bottom-color:var(--line)}
.log-entry li{margin:3px 0;font-size:14px}

/* ================================================== PRINT SHARE FOOTER (new) */
.print-footer{display:none}
@media print{
  .print-footer{display:block;margin-top:18px;padding-top:10px;border-top:1px solid #ccc;
    font-size:12px;color:#555;text-align:center}
  .plan-day-locked,.lock-veil{display:none !important}
}

/* =================================================== HEAT ADVISORIES (new) */
.heatnote{background:#fdf0e2;border:1px solid #f0d9b8;color:#7a4a08;border-radius:12px;
  padding:10px 14px;margin:12px 0;font-size:14px}
.leg-note.heat{color:#a05a0a}

/* ================================================== ITINERARY ROUTE MAP (new) */
.plan-mapbox{margin:18px 0}
.plan-mapbox .sec{margin-bottom:8px}
.planmap{height:min(62vh,520px)}
.map-note{color:var(--muted);font-size:12px;margin:6px 2px 0}
.route-num span{display:flex;align-items:center;justify-content:center;width:28px;height:28px;
  border-radius:50%;color:#fff;font-size:13px;font-weight:800;border:2.5px solid #fff;
  box-shadow:0 2px 6px rgba(0,0,0,.4)}
.route-home span{background:#1b2320;font-size:14px}

/* Day picker above the route map, "All days · Day 1 · Day 2 …" */
.dayfilter{margin:0 0 10px;padding:2px}
.daychip{display:inline-flex;align-items:center;gap:6px}
.daychip .daydot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.daychip.on .daydot{box-shadow:0 0 0 2px rgba(255,255,255,.5)}
@media print{ .plan-mapbox{display:none} }

/* ================================================================ INFO TAB */
/* ================================================================== INFO TAB
   Six sections, six drawings. The old version was one white tile repeated 23
   times with recycled icons, a template. Now the FORM of each section comes
   from its information: rules are road-signs, networks are a coverage chart,
   transport is a best-to-worst ladder, money is two big numerals, emergency
   is a phone panel. Every item's full text opens in the section's shared
   detail panel (.xp), one tap, no chevron farms. */
.isec{margin:0 0 22px}
.isec-h{
  font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);margin:0 0 10px;
}

/* --- the key-facts strip: the four numbers, before anything else --------- */
.kf{
  display:grid;grid-template-columns:repeat(4,1fr);
  background:var(--water-dark);border-radius:var(--radius);
  padding:14px 6px;margin:0 0 22px;box-shadow:var(--shadow);
}
.kf-cell{text-align:center;padding:0 4px;min-width:0}
.kf-cell+.kf-cell{border-left:1px solid rgba(255,255,255,.14)}
.kf-cell strong{
  display:block;font-family:"Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16px;font-weight:800;letter-spacing:-.3px;color:#fff;white-space:nowrap;
}
.kf-cell span{display:block;font-size:9.5px;color:rgba(255,255,255,.75);margin-top:2px;line-height:1.25}
@media(max-width:380px){.kf-cell strong{font-size:14px}}

/* --- signs: the rules as pictograms -------------------------------------- */
.sign-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 8px}
.sign{
  font:inherit;background:none;border:0;cursor:pointer;padding:4px 2px;
  display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0;
}
.sign-ic{
  position:relative;width:62px;height:62px;border-radius:50%;flex:0 0 auto;
  border:3px solid var(--water);background:#fff;box-shadow:var(--shadow);
  display:grid;place-items:center;color:var(--ink);
  transition:transform .14s ease,border-color .14s ease;
}
.sign-ic svg{width:32px;height:32px;display:block}
/* prohibition chrome: red ring + the diagonal bar, like a road sign */
.sign-ic.sign-forbid{border-color:var(--danger)}
.sign-ic.sign-forbid::after{
  content:"";position:absolute;left:50%;top:-2px;bottom:-2px;width:3.5px;
  margin-left:-1.75px;border-radius:2px;background:var(--danger);
  transform:rotate(45deg);
}
.sign strong{
  font-size:11px;font-weight:700;line-height:1.25;text-align:center;
  color:var(--ink);letter-spacing:-.1px;
}
.sign.on .sign-ic{transform:scale(1.06);border-width:4px}
.sign:active .sign-ic{transform:scale(.94)}

/* --- the connectivity card & every row-based section --------------------- */
.concard{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;
}
.irow{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  font:inherit;background:none;border:0;cursor:pointer;padding:12px 14px;
}
.irow+.irow,.bars+.irow,.irow+.bars{border-top:1px solid #f0ebe1}
.irow-ic{flex:0 0 auto;width:30px;height:30px;color:var(--water)}
.irow-ic svg{width:100%;height:100%;display:block}
.irow-t{flex:1;min-width:0}
.irow-t strong{
  display:block;font-family:"Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:14.5px;font-weight:700;letter-spacing:-.15px;
}
.irow-t small{display:block;font-size:12px;line-height:1.4;color:var(--muted);margin-top:1px}
.irow-c{flex:0 0 auto;font-size:16px;color:#c9c1b4;transition:transform .15s ease}
.irow.on{background:var(--sand-2)}
.irow.on .irow-c{transform:rotate(90deg)}
/* the app squircle, so OTaxi/Talabat read as things you install */
.app-ic{
  width:40px;height:40px;border-radius:12px;background:var(--water-soft);
  display:grid;place-items:center;color:var(--water-dark);
}
.app-ic svg{width:26px;height:26px}

/* --- the coverage chart --------------------------------------------------- */
.bars{
  display:block;width:100%;font:inherit;background:none;border:0;cursor:pointer;
  padding:14px 14px 12px;text-align:left;
}
.bars.on{background:var(--sand-2)}
.bar-row{display:grid;grid-template-columns:64px 1fr;gap:2px 10px;align-items:center;margin-bottom:9px}
.bar-row:last-child{margin-bottom:0}
.bar-l{font-size:12px;font-weight:700}
.bar-t{height:10px;border-radius:999px;background:var(--sand-2);overflow:hidden}
.bar-t i{
  display:block;height:100%;width:var(--w);border-radius:999px;
  background:linear-gradient(90deg,var(--water),var(--water-dark));
  animation:barGrow .7s cubic-bezier(.2,.8,.2,1);
}
@keyframes barGrow{from{width:0}}
.bar-n{grid-column:2;font-size:10.5px;color:var(--muted);line-height:1.3}

/* --- the transport ladder ------------------------------------------------- */
.lad{
  display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  font:inherit;background:none;border:0;cursor:pointer;padding:11px 14px;
}
.lad+.lad{border-top:1px solid #f0ebe1}
.lad.on{background:var(--sand-2)}
.lad-n{
  flex:0 0 auto;width:24px;
  font-family:"Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:19px;font-weight:800;color:var(--water);text-align:center;
}
.lad:nth-child(n+4) .lad-n{color:var(--muted)}
.lad .irow-ic{width:26px;height:26px;color:var(--ink);opacity:.75}
.lad-bar{display:block;height:5px;border-radius:999px;background:var(--sand-2);overflow:hidden;margin-top:6px}
.lad-bar i{
  display:block;height:100%;width:var(--w);border-radius:999px;
  background:var(--water);opacity:var(--o);
}

/* --- money as numerals ---------------------------------------------------- */
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.stat{
  font:inherit;text-align:left;cursor:pointer;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:16px 15px 14px;min-width:0;
}
.stat.on{background:var(--sand-2)}
.stat em{
  display:block;font-style:normal;
  font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin-bottom:7px;
}
.stat strong{
  display:block;font-family:"Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:31px;font-weight:800;letter-spacing:-1px;color:var(--water-dark);line-height:1;
}
.stat span{display:block;font-size:11.5px;line-height:1.4;color:var(--muted);margin-top:6px}

/* --- the emergency panel -------------------------------------------------- */
.soscard{
  background:#fdeceb;border:1px solid #f2c4bf;border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;
}
.sos-call{
  display:flex;align-items:center;gap:12px;padding:14px;color:inherit;
}
.sos-call .irow-ic{color:var(--danger);width:34px;height:34px}
.sos-call strong{
  display:block;font-family:"Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:30px;font-weight:800;letter-spacing:2px;color:var(--danger);line-height:1;
}
.sos-call small{display:block;font-size:11.5px;color:#7d2418;margin-top:3px}
.sos-row{border-top:1px solid #f2c4bf}
.sos-row .irow-ic{color:var(--danger)}
.sos-row .irow-t strong{color:#7d2418}
.sos-row .irow-t small{color:#9a4a3e}
.sos-row.on{background:#fbdedb}

/* --- the shared detail panel ----------------------------------------------
   It gets MOVED in the DOM to sit directly under whatever you tapped (see
   openItem). Inside a grid it spans every column so the grid keeps its shape;
   inside a card it sits between two rows, so it needs the card's own edges
   rather than a floating rounded box. */
.xp{
  margin-top:9px;background:#fff;border:1px solid var(--water);
  border-radius:13px;padding:13px 15px;box-shadow:var(--shadow);
  animation:fpDrop .16s ease-out;
}
.xp[hidden]{display:none}
.xp strong{
  display:block;font-family:"Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:13.5px;font-weight:700;margin-bottom:4px;
}
.xp p{margin:0;font-size:13.5px;line-height:1.55;color:#37423d}
.xp .affbtn{margin-top:10px}
/* in a grid: full width, sitting under the row you tapped */
.sign-grid > .xp,.stat-grid > .xp{grid-column:1 / -1;margin-top:2px}
/* inside a card: no rounded island, just a tinted band between the rows */
.concard > .xp,.soscard > .xp{
  margin:0;border-radius:0;border-left:0;border-right:0;
  border-top:1px solid var(--water);border-bottom:1px solid var(--water);
  box-shadow:none;background:var(--water-soft);
}
.soscard > .xp{border-color:#f2c4bf;background:#fdf3f2}

@media(prefers-reduced-motion:reduce){
  .bar-t i{animation:none}
  .sign.on .sign-ic,.sign:active .sign-ic{transform:none}
}

/* ============================================================ PHOTO CREDITS */
.sheet-hero{position:relative}
.imgcredit{position:absolute;right:8px;bottom:6px;font-size:10px;color:#fff;
  background:rgba(0,0,0,.45);padding:2px 8px;border-radius:8px;max-width:85%;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* spot-specific booking button + discount code chip */
.affbtn.aff-primary{background:var(--accent, #0d8abc);color:#fff;font-weight:600}
.discount-chip{display:inline-block;margin:6px 0 0 8px;font-size:12px;color:var(--muted);
  border:1px dashed var(--line);border-radius:8px;padding:3px 8px}
.discount-chip strong{color:var(--ink);letter-spacing:.4px}

/* in-sheet gallery figures, photos dealt out between the text sections */
.sheet-fig{margin:14px 0}
.sheet-fig img{width:100%;border-radius:12px;display:block;max-height:340px;object-fit:cover}
.sheet-fig figcaption{font-size:12px;color:var(--muted);margin-top:5px;position:relative}
.sheet-fig figcaption .imgcredit{position:static;background:none;color:var(--muted);padding:0;white-space:normal}
/* Credits live inside a shut .fold-quiet now, so the wrapper carries no card. */
.about-credits{margin-top:18px}
.about-credits > .fold{margin:0}
.credits-note{color:var(--muted);font-size:12px;margin:0 0 8px}
.about-credits ul{margin:0;padding-left:18px;columns:2;column-gap:26px}
@media (max-width:640px){.about-credits ul{columns:1}}
.about-credits li{font-size:12px;color:var(--muted);margin:3px 0;break-inside:avoid}
.about-credits li strong{color:var(--ink);font-weight:600}

/* ============================================================== TAB INTROS */
.cat-intro{margin-top:10px;font-size:14px;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-left:4px solid var(--water);
  border-radius:var(--radius);padding:12px 16px 6px;box-shadow:var(--shadow)}
.cat-intro .intro-list{margin:0;padding:0;list-style:none}
.cat-intro .intro-list li{
  position:relative;padding:0 0 0 16px;margin-bottom:7px;
  font-size:14px;line-height:1.45;color:var(--ink);
}
.cat-intro .intro-list li::before{
  content:"";position:absolute;left:1px;top:7px;
  width:5px;height:5px;border-radius:50%;background:var(--water);
}
.cat-intro p.body{margin:0 0 6px;font-size:14px}

/* =========================================================== EMAIL SIGNUP */
.about-subscribe{margin-top:14px;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:16px 20px;box-shadow:var(--shadow)}
.about-subscribe p{color:var(--muted);font-size:13.5px;margin:4px 0 12px}
.subrow{display:flex;gap:8px}
.subrow input{flex:1;min-width:0;padding:10px 14px;border:1px solid var(--line);
  border-radius:12px;font-size:14px;background:var(--sand-2)}
.subrow input:focus{outline:2px solid var(--water);border-color:transparent}

/* ====================================================== UI AMP (Jul 2026)
   Photo-forward cards · bottom nav on phones · sheet handle · feedback UI  */

/* --- photo cards: name + chips ON the image over a scrim ---------------- */
.card-media-photo{height:215px;place-items:stretch;display:block}
.card-overlay{
  position:absolute;left:0;right:0;bottom:0;
  padding:34px 14px 12px;
  background:linear-gradient(180deg,rgba(10,25,22,0) 0%,rgba(10,25,22,.55) 40%,rgba(10,25,22,.82) 100%);
}
.card-overlay .ov-title{margin:4px 0 2px;color:#fff;font-size:18.5px;letter-spacing:-.2px}
.card-overlay .ov-tag{margin:0;color:#d9ece4;font-size:12.5px;line-height:1.35}
.card-kicker.on-photo{margin-bottom:0}
.card-kicker.on-photo .chip{background:rgba(255,255,255,.93)}
.card-kicker.on-photo .chip-reel{background:#fdecf3}
.card-body-slim{padding:8px 15px}
.lock-pill{
  font-size:12.5px;font-weight:700;letter-spacing:.3px;
  background:#fff8ea;color:#8a6b1f;border:1px solid #e6c88c;
  padding:7px 14px;border-radius:999px;
}
.card.locked .card-media{filter:saturate(.5)}

/* --- bottom navigation on phones ----------------------------------------
   The tab bar docks to the bottom edge (thumb zone) and the chips become
   icon-over-label, the installed PWA reads as a native app. Desktop and
   tablets keep the top tab row. */
@media(max-width:640px){
  /* The bottom bar carries the RANK COLOUR, this is where your rank lives
     now (the banner keeps only the photo tint). Climbs from teal through
     blue, green, gold, crimson to purple with you. */
  .tabs{
    position:fixed;left:0;right:0;bottom:0;z-index:950;
    max-width:none;margin:0;display:flex;flex-wrap:nowrap;gap:0;
    justify-content:space-around;
    background:linear-gradient(180deg,var(--water) 0%,var(--water-dark) 100%);
    border-top:none;
    padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px));
    box-shadow:0 -1px 0 rgba(255,255,255,.18) inset, 0 -4px 16px rgba(20,26,24,.18);
  }
  .tab{
    flex:1 1 0;display:flex;flex-direction:column;align-items:center;gap:2px;
    background:transparent;border:none;border-radius:12px;
    font-size:10.5px;font-weight:700;padding:4px 2px;color:rgba(255,255,255,.72);
  }
  .tab .t-icon{margin:0;font-size:21px;line-height:1}
  .tab[aria-selected="true"]{background:rgba(255,255,255,.94);color:var(--water-dark);border:none}
  .tab-dim{opacity:.55}
  .tab-soon{background:rgba(255,255,255,.25);color:#fff}
  .view{padding-bottom:92px}   /* content never hides behind the bar */
}

/* --- sheet: grab handle --------------------------------------------------- */
.sheet::before{
  content:"";display:block;width:44px;height:5px;border-radius:999px;
  background:#d8d2c6;margin:10px auto 0;
}

/* --- traveller tips (curated reader feedback) ----------------------------- */
.ttip{
  background:#fff;border:1px solid var(--line);border-left:4px solid var(--water);
  border-radius:0 12px 12px 0;padding:10px 14px;margin:8px 0;
}
.ttip p{margin:0;font-size:14px;color:var(--ink)}
.ttip-by{display:block;margin-top:4px;font-size:12px;color:var(--muted)}

/* --- the feedback box ------------------------------------------------------ */
.ratebox{
  background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:14px 16px;margin:16px 0 4px;box-shadow:var(--shadow);
}
.ratebox.thanks{background:#eef7f0;border-color:#cfe7d6;color:#1e6b39;font-size:14px;font-weight:600}
.rate-q{margin:0 0 8px;font-size:14.5px;font-weight:700}
.stars{display:flex;gap:4px;margin-bottom:10px}
.star{
  font-size:30px;line-height:1;background:none;border:none;cursor:pointer;
  color:#ddd5c8;padding:2px 4px;transition:transform .1s ease,color .1s ease;
}
.star:active{transform:scale(1.2)}
.star.on{color:var(--gold)}
.rate-name{
  width:100%;box-sizing:border-box;padding:10px 12px;margin-bottom:8px;
  border:1px solid var(--line);border-radius:12px;font:inherit;font-size:13.5px;
  background:var(--sand-2);
}
.rate-name:focus{outline:2px solid var(--water);border-color:transparent}
.rate-tip{
  width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid var(--line);
  border-radius:12px;font:inherit;font-size:13.5px;background:var(--sand-2);resize:vertical;
}
.rate-tip:focus{outline:2px solid var(--water);border-color:transparent}
.rate-send{
  margin-top:8px;width:100%;padding:10px 0;border-radius:999px;border:none;cursor:pointer;
  background:var(--water);color:#fff;font-size:14px;font-weight:700;
}

/* --- testimonials on the price block --------------------------------------- */
.testimonials{margin-top:10px}
.testi{
  margin:8px 0 0;padding:10px 14px;background:#fffdf8;border:1px dashed #e6c88c;
  border-radius:12px;font-size:13.5px;color:#5a4a22;font-style:italic;
}
.testi cite{display:block;margin-top:4px;font-size:12px;color:#8a6b1f;font-style:normal}

/* ================================================= BRAND PASS (Jul 2026)
   "Professional + explorey": deep-teal header band, one display typeface
   (Outfit) for names and headings, a single quiet chip system, filter chips
   as a real segmented control, clay as the one accent, pill CTAs.          */

:root{
  --clay:#b4552d;          /* Omani clay, THE accent. Use sparingly. */
  --clay-soft:#f7e7dd;
}

/* display face for identity moments; body text stays system */
h1,h2,h3,.brand-text strong,.ov-title,.price-name,.price-tag,.tab,.about-hero h1{
  font-family:"Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

/* --- header: the deep-teal expedition band -------------------------------- */
/* ================================================================ THE BANNER
   A flat teal slab that followed you down the page. Now it's a photograph of
   Wadi Bani Khalid with a slow ken-burns drift, a scrim for legibility, and
   the explorer HUD sitting on it: rank ring, rank name, and a bar filling
   toward the next rank. The header carries something that CHANGES as you use
   the app rather than a coloured rectangle.

   CAREFUL: no transform / filter / backdrop-filter on .topbar itself. Any of
   them makes it the containing block for its position:fixed descendants and
   the phone tab bar lands on the brand again (see the note further up). The
   ken-burns lives on ::before, which is a child, so it's safe. */
.topbar{
  background:var(--water-dark);border-bottom:none;
  overflow:hidden;isolation:isolate;
}
.topbar::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:url("../assets/banner.jpg") center 55%/cover no-repeat;
  animation:kenburns 34s ease-in-out infinite alternate;
  transform-origin:52% 60%;
}
.topbar::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(4,32,35,.82) 0%,rgba(5,42,46,.58) 42%,rgba(6,52,56,.86) 100%),
    radial-gradient(120% 90% at 78% 8%,rgba(255,214,140,.20),transparent 60%);
}
@keyframes kenburns{
  from{transform:scale(1.04) translate3d(0,0,0)}
  to  {transform:scale(1.16) translate3d(-1.5%,-1.5%,0)}
}
/* Lift the content above the photo + scrim layers. NOT .tabs: this rule comes
   after the max-width:640px block that makes the tab bar position:fixed, so
   forcing relative here dropped it back into the header flow. Its stacking is
   handled in the base .tabs rule instead. */
.topbar-inner,.hud,.livingline{position:relative;z-index:2}
/* the gold hairline that closes the bar off */
.topbar{box-shadow:inset 0 -1px 0 rgba(200,137,47,.5), 0 6px 18px rgba(6,40,44,.18)}
@media(prefers-reduced-motion:reduce){ .topbar::before{animation:none} }

/* ---- the explorer HUD ---------------------------------------------------- */
.hud{
  max-width:var(--maxw);margin:0 auto;
  display:flex;align-items:center;gap:10px;
  padding:0 16px 11px;
}
.hud .hud-ring{
  --pct:0;
  position:relative;width:34px;height:34px;border-radius:50%;flex:0 0 auto;
  display:grid;place-items:center;
  background:conic-gradient(var(--gold) calc(var(--pct)*1%), rgba(255,255,255,.22) 0);
  transition:background .6s ease;
}
.hud .hud-ring b{
  position:absolute;inset:3px;border-radius:50%;
  background:rgba(6,42,46,.92);color:#fff;
  display:grid;place-items:center;
  font-family:"Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:12.5px;font-weight:800;
}
.hud .hud-txt{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.hud .hud-txt strong{
  font-family:"Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:13px;font-weight:800;color:#fff;letter-spacing:.01em;
  text-shadow:0 1px 6px rgba(0,0,0,.4);
}
.hud .hud-txt small{
  font-size:10.5px;color:rgba(255,255,255,.8);white-space:nowrap;
  text-shadow:0 1px 6px rgba(0,0,0,.4);
}
.hud .hud-bar{
  flex:1;min-width:40px;height:5px;border-radius:999px;
  background:rgba(255,255,255,.2);overflow:hidden;margin-left:2px;
}
.hud .hud-bar i{
  display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--gold),#f0c073);
  transition:width .6s cubic-bezier(.2,.8,.2,1);
}
.hud[data-tier="3"] .hud-ring{background:conic-gradient(#fff calc(var(--pct)*1%), rgba(255,255,255,.22) 0)}
.hud[data-tier="3"] .hud-bar i{background:linear-gradient(90deg,#fff,var(--gold))}

.brand{color:#fff}
.brand-text strong{color:#fff;letter-spacing:.1px}
.brand-text small{color:#a9cdca}
.brand-mark{
  width:36px;height:36px;border-radius:12px;font-size:19px;
  background:rgba(255,255,255,.14);display:grid;place-items:center;
}
.pill-ghost{background:rgba(255,255,255,.16);color:#fff}
.pill-unlocked{background:#d9f2e2;color:#14532d}
.livingline{color:#a9cdca;padding-bottom:10px}
.livingline .ll-main{color:#fff}
.livingline .ll-sub{color:#a9cdca;border-left-color:rgba(255,255,255,.25)}
.searchbar{border-top:1px solid var(--line)}

/* tabs live on the teal band on wide screens, translucent pills, white when
   active. (On phones the tabs are the white bottom bar, untouched here.) */
@media(min-width:641px){
  .tab{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.14);color:#cfe4e2}
  .tab[aria-selected="true"]{background:#fff;color:var(--water-dark);border-color:#fff}
}

/* --- ONE chip system -------------------------------------------------------
   Sentence case, one size, pill shape. Colour only where it means something:
   teal = status, outline = classification, gold = commerce, pink = reel.   */
.chip{
  text-transform:none;letter-spacing:.2px;font-size:11px;font-weight:700;
  padding:4px 10px;border-radius:999px;
  background:var(--water-soft);color:var(--water-dark);
}
.chip-type{background:#fff;border:1px solid var(--line);color:var(--ink)}
.chip-region{background:transparent;border:1px solid var(--line);color:var(--muted)}
.chip-season{background:var(--gold-soft);color:#7a4a08}
.chip-hard{background:#fdeceb;color:var(--danger)}
.chip-lock{background:var(--gold-soft);color:#8a6b1f}
.chip-free{background:#e7f4ea;color:#1e6b39}
.chip-reel{background:#fdecf3;color:#bc1888}
.card-kicker.on-photo .chip{border:none}

/* --- filter chips: a real segmented control ------------------------------- */
.tfchip{
  border-radius:999px;font-weight:700;
  background:transparent;border:1px solid var(--line);color:var(--ink);
}
.tfchip .tfn{
  background:rgba(13,92,99,.08);border-radius:999px;padding:1px 7px;
  font-size:10.5px;color:var(--water-dark);
}
.tfchip.on{background:var(--water-dark);border-color:var(--water-dark);color:#fff}
.tfchip.on .tfn{background:rgba(255,255,255,.22);color:#fff}

/* --- CTAs become pills, consistently --------------------------------------- */
.mapbtn,.instabtn,.affbtn,.btn-full,.rate-send{border-radius:999px}
.card{border-radius:18px}

/* --- short cards ----------------------------------------------------------- */
.card-media-photo{height:176px}
.card.locked .card-media{height:54px;filter:none;background:linear-gradient(135deg,var(--sand-2),var(--gold-soft))}
.lock-pill{padding:5px 12px;font-size:11.5px}
.lock-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px}
.lock-row-txt{font-size:13px;color:var(--muted);font-weight:600}
.lock-row-btn{
  flex:0 0 auto;padding:7px 14px;border-radius:999px;
  background:var(--gold);color:#fff;font-size:12.5px;font-weight:700;
}
.card.locked .card-body{padding:10px 15px 12px}

/* --- your own posted review ------------------------------------------------ */
.myreview{
  background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:13px 16px;margin:16px 0 4px;box-shadow:var(--shadow);
}
.myreview-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.myreview-stars{color:var(--gold);font-size:17px;letter-spacing:2px}
.myreview-name{font-size:13px;font-weight:700}
.myreview p{margin:8px 0 0;font-size:14px}
.myreview .myreview-note{font-size:11.5px;color:var(--muted);margin-top:8px}

/* --- editorial section markers in the detail sheet ------------------------- */
.sheet .sec{display:flex;align-items:center;gap:9px}
.sheet .sec::before{
  content:"";flex:0 0 auto;width:16px;height:4px;border-radius:2px;background:var(--clay);
}

/* --- saves, been-there, smart filters, safety (Jul 2026 gap features) ------- */
.save-heart{
  position:absolute;top:10px;right:10px;z-index:2;
  width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.92);color:#c9c2b4;font-size:17px;line-height:1;
  display:grid;place-items:center;box-shadow:var(--shadow);
  transition:transform .12s ease,color .12s ease;
}
.save-heart:active{transform:scale(1.25)}
.save-heart.on{color:#d4537e}
/* the ✓ twin, right under the heart: tick a place off from the feed */
.been-check{
  position:absolute;top:50px;right:10px;z-index:2;
  width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.92);color:#c9c2b4;
  font-size:15px;font-weight:800;line-height:1;
  display:grid;place-items:center;box-shadow:var(--shadow);
  transition:transform .12s ease,color .12s ease,background .12s ease;
}
.been-check:active{transform:scale(1.25)}
.been-check.on{background:#1e6b39;color:#fff}
.been-badge{
  position:absolute;top:12px;left:10px;z-index:2;
  background:#e7f4ea;color:#1e6b39;font-size:11px;font-weight:700;
  padding:4px 10px;border-radius:999px;
}
/* .smartrow / .smartchip removed, the smart filters live inside the one
   filter panel now (.ftog), not as a second loose row under the bar. */
.actrow{display:flex;gap:8px;margin:4px 0 8px}
.act-btn{
  flex:1;text-align:center;padding:10px 0;border-radius:999px;
  font-size:13px;font-weight:700;background:#fff;border:1px solid var(--line);
  color:var(--ink);cursor:pointer;
}
.act-btn.on{background:var(--water-soft);border-color:var(--water);color:var(--water-dark)}
.act-wa{background:#e7f8ee;border-color:#bfe8cf;color:#0f6b3a}
.floodnote{
  background:#fdeceb;border:1px solid #f2c4bf;color:#8a2b20;
  border-radius:12px;padding:11px 14px;margin:12px 0;font-size:13.5px;line-height:1.5;
}
.plan-sharerow{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}
/* .progressline / .pl-* removed, the explored counter is .rankbadge now,
   a ring beside the page title instead of a full-width bar under the filters. */

/* ================================================ DESIGN PASS v2 (Jul 2026)
   The finishing layer, from studying Rexby + AllTrails front-ends:
   airier spacing, ONE button hierarchy, gentle motion, a proper search
   pill, hero legibility, focus states. Feel > features.                  */

/* breathing room, premium feeds are airy, not dense */
html{scroll-behavior:smooth}
.grid{gap:18px}
.view{max-width:var(--maxw);animation:fadeUp .24s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .view,.toast,.sheet{animation:none !important}
  .card,.card:hover{transition:none;transform:none}
}

/* photo cards go borderless, the image IS the card (Rexby pattern) */
.card{border-radius:20px}
.card:has(.card-media-photo){border:none;box-shadow:0 3px 14px rgba(16,28,25,.09)}

/* hero: soft bottom gradient so credits and pills always read */
.sheet-hero{position:relative;height:240px}
.sheet-hero::after{
  content:"";position:absolute;inset:auto 0 0 0;height:70px;
  background:linear-gradient(180deg,transparent,rgba(10,25,22,.45));pointer-events:none;
}
.sheet-hero .imgcredit,.sheet-hero .photocount{z-index:1}
.sheet-inner h2{font-size:24px}
.sheet-inner .tagline{font-size:14.5px;margin-bottom:12px}

/* ONE button hierarchy in the sheet:
   primary (solid teal) = maps · special (gradient) = your reel ·
   quiet (outline) = affiliate links. Three voices max. */
.affbtn{
  background:transparent;border:1.5px solid #bfe0c9;color:#1e6b39;
  border-radius:999px;font-size:13.5px;padding:10px 14px;
}
.affbtn.aff-primary{background:#eaf6ec;border-color:#9fd4af}

/* the search bar becomes a proper pill (Rexby's signature element) */
.searchbar{padding:10px 14px}
.searchbar input{
  border-radius:999px;padding:11px 18px;font-size:15px;
  background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);
}

/* section headers in the feed match the sheet's clay-dash language */
.section-head h2{
  display:flex;align-items:center;gap:9px;
  font-size:17px;letter-spacing:-.2px;
}
.section-head h2::before{
  content:"";width:14px;height:4px;border-radius:2px;background:var(--clay);flex:0 0 auto;
}

/* tab bar (mobile): the bar wears the rank colour now, so the active tab is
   a WHITE pill on it, the one thing that pops on any rank's hue. (This used
   to force --water-soft, which read as grey on the coloured bar.) */
@media(max-width:640px){
  .tab[aria-selected="true"]{background:rgba(255,255,255,.94);box-shadow:0 2px 8px rgba(0,0,0,.18)}
}

/* keyboard / switch-control users get a visible ring, invisible to touch */
:focus-visible{outline:3px solid rgba(13,92,99,.4);outline-offset:2px;border-radius:6px}

/* tipbox inside folds already stripped; standalone tipbox softened */
.tipbox{border-radius:12px;border-left-width:4px}

/* toast above the bottom nav on phones */
@media(max-width:640px){.toast{bottom:calc(84px + env(safe-area-inset-bottom,0px))}}

/* --- AllTrails-pattern polish (Jul 2026) ------------------------------------ */
.statline{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  margin:6px 0 0;font-size:12px;font-weight:600;color:var(--muted);
}
.statline.on-photo{color:#cfe4de;margin-top:5px}
.sl-dot{width:9px;height:9px;border-radius:3px;display:inline-block;flex:0 0 auto}
.sl-easy{background:#2fa36b}
.sl-mod{background:#eb9c1c}
.sl-hard{background:#d6493a}
.sl-sep{color:currentColor;opacity:.45;margin:0 1px}
.season-badge{
  position:absolute;top:12px;left:10px;z-index:2;
  background:rgba(255,255,255,.93);color:#a05a0a;font-size:11px;font-weight:700;
  padding:4px 10px;border-radius:999px;
}
.photocount{
  position:absolute;left:12px;bottom:12px;
  background:rgba(20,26,24,.65);color:#fff;font-size:11.5px;font-weight:700;
  padding:5px 11px;border-radius:999px;
}
@media(hover:hover){
  .card{transition:transform .18s ease,box-shadow .18s ease}
  .card:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(16,28,25,.13)}
}
.card-media{font-weight:600;color:#8b8474;letter-spacing:.2px}

/* --- ONE-LINE controls: group chips swipe sideways, never stack ------------- */
.typefilter{
  flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;padding-bottom:2px;
}
.typefilter::-webkit-scrollbar{display:none}
.tfchip{white-space:nowrap;flex:0 0 auto;font-size:12px;padding:6px 11px}
.cat-head h1{margin-bottom:2px}

/* --- free-launch box -------------------------------------------------------- */
.launchbox{
  background:var(--water-dark);color:#fff;border-radius:16px;
  padding:18px 20px;margin:22px 0 8px;box-shadow:var(--shadow-lg);
}
.launch-badge{
  display:inline-block;background:rgba(255,255,255,.15);color:#ffd9a0;
  font-size:12px;font-weight:800;letter-spacing:.4px;
  padding:5px 12px;border-radius:999px;margin-bottom:10px;
}
.launchbox p{margin:0 0 10px;font-size:14px;line-height:1.55;color:#d9ece8}
.launchbox p strong{color:#fff}
.launchbox .subrow input{background:#fff;border:none}
.launchbox .msg.ok{color:#9fe1cb}
.launchbox .msg.err{color:#ffb4a8}

/* --- plan-my-trip booking box ------------------------------------------------ */
.bookbox{
  background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:18px 20px;margin:22px 0 8px;box-shadow:var(--shadow);
}
.bookbox h3{font-size:18px;margin-bottom:6px}
.bookbox p{margin:0 0 12px;font-size:13.5px;color:var(--muted);line-height:1.55}
.bookgrid{display:grid;gap:8px;margin-bottom:8px}
@media(min-width:520px){.bookgrid{grid-template-columns:1fr 1fr}}
.bookbox input,.bookbox textarea{
  width:100%;box-sizing:border-box;padding:10px 12px;
  border:1px solid var(--line);border-radius:12px;font:inherit;font-size:13.5px;
  background:var(--sand-2);
}
.bookbox input:focus,.bookbox textarea:focus{outline:2px solid var(--water);border-color:transparent}
.bookbox textarea{resize:vertical;margin-bottom:8px}
.bookbox .rate-send{margin-top:0}
.book-fine{font-size:11.5px;color:var(--muted);margin-top:8px}

/* --- quick facts: a spec list, not a grid ---------------------------------- */
.facts{
  background:#fff;border:1px solid var(--line);border-radius:14px;
  margin:14px 0;overflow:hidden;box-shadow:var(--shadow);
}
.fact{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:10px 15px;border-bottom:1px solid #f0ebe1;
}
.fact:last-child{border-bottom:none}
.fact .fl{flex:0 0 auto;font-size:12.5px;color:var(--muted);font-weight:600;white-space:nowrap}
.fact .fv{font-size:13.5px;font-weight:600;text-align:right;line-height:1.45}

/* --- collapsible sheet sections --------------------------------------------
   The sheet opens SHORT: essentials visible, long sections folded into
   tappable bars. Native <details>, works offline, no JS. */
.fold{
  background:#fff;border:1px solid var(--line);border-radius:14px;
  margin:10px 0;box-shadow:var(--shadow);overflow:hidden;
}
.fold summary{
  list-style:none;cursor:pointer;user-select:none;
  display:flex;align-items:center;justify-content:space-between;
  padding:13px 16px;font-size:15px;font-weight:700;
  font-family:"Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.fold summary::-webkit-details-marker{display:none}
.fold summary::after{
  content:"›";font-size:20px;color:var(--muted);
  transform:rotate(90deg);transition:transform .18s ease;
}
.fold[open] summary::after{transform:rotate(-90deg)}
.fold[open] summary{border-bottom:1px solid var(--line)}
.fold-body{padding:12px 16px 14px}
.fold-body .steplist,.fold-body .bulletlist{margin-bottom:4px}
.fold-body .bringbox{margin:0}
.fold-body .bring-col{border:none;padding:4px 0;background:transparent}
.tipbox.no-frame{background:transparent;border:none;padding:0;margin:0}
.tipbox.no-frame ul{margin:0}


/* =============================================================================
   SHEET v3, POSTER & DRAWER
   -----------------------------------------------------------------------------
   The spot sheet was 2,367px on a phone, 2.9 screens, with the same content.
   The photo carried nothing but a credit, the facts printed once as a list and
   again as a "timebox", "Getting there" opened 391px tall by default, and a
   227-field review form greeted people who had not been yet.

   Now: the photo IS the header, the four go/no-go numbers are dials, every long
   section is a shut row that says what's inside it, and Maps/Save live in a dock
   stuck to the bottom of the sheet.

   THE ONE RULE: .gg-rain carries the thing the app cannot know for you, 
   whether it rained upstream. It is never inside a <details>. People drown in
   these wadis. It does not fold, shorten or move off the first line.
   ========================================================================== */
/* =============================================================================
   SHEET v3, POSTER & DRAWER
   Paste at the end of app.css. Overrides only what it needs to.
   ========================================================================== */

/* --- shell -------------------------------------------------------------- */
.sheet-body{padding:0}
.sheet-inner{padding:14px 20px 0}

/* the grab handle floats on the photo instead of eating a 15px sand strip */
.sheet::before{
  position:absolute;top:9px;left:50%;transform:translateX(-50%);z-index:4;
  margin:0;background:rgba(255,255,255,.72);box-shadow:0 1px 4px rgba(0,0,0,.18);
}

/* --- 1 · THE POSTER: photo, name, tagline and chips in one 200px block --- */
.sheet-hero.poster{
  /* taller than the old single poster: the photos are the content now */
  display:block;height:min(78vw,340px);position:relative;overflow:hidden;
  background-color:var(--sand-2);
}
.sheet-hero.poster::after{
  content:"";position:absolute;inset:0;height:auto;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(10,25,22,0) 30%,rgba(10,25,22,.30) 56%,rgba(8,20,18,.84) 100%);
  pointer-events:none;
}
.poster-meta{
  position:absolute;top:12px;left:12px;right:56px;z-index:2;   /* clears .sheet-close */
  display:flex;gap:6px;align-items:center;min-width:0;
}
.poster-meta .photocount,
.poster-meta .imgcredit{position:static;flex:0 1 auto;min-width:0}
.poster-meta .photocount{padding:4px 10px;font-size:11px}
.poster-meta .imgcredit{font-size:9.5px;padding:3px 8px;background:rgba(0,0,0,.42)}
.poster-txt{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:0 20px 14px}
.poster-txt .card-kicker{margin:0 0 7px;gap:5px;flex-wrap:wrap}
.poster-txt .chip{
  background:rgba(255,255,255,.93);color:#20302c;border:none;
  font-size:10.5px;padding:3px 9px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.poster-txt .chip-season{background:rgba(253,243,226,.95);color:#7a4a08}
.poster-txt .chip-hard{background:rgba(253,236,235,.95);color:var(--danger)}
.poster-txt h2{
  color:#fff;font-size:27px;line-height:1.05;letter-spacing:-.6px;
  margin:0 0 3px;text-shadow:0 1px 14px rgba(0,0,0,.5);
}
/* .poster-txt .tagline removed, the sub-line under the name was fluff. */
/* no photo → a sand plate with ink type, so the name never vanishes */
.sheet-hero.poster.no-photo{height:auto;background:var(--sand-2)}
.sheet-hero.poster.no-photo::after{display:none}
.sheet-hero.poster.no-photo .poster-txt{position:static;padding:22px 20px 16px}
.sheet-hero.poster.no-photo h2{color:var(--ink);text-shadow:none}
.sheet-hero.poster.no-photo .tagline{color:var(--muted);text-shadow:none}
.sheet-hero.poster.no-photo .chip{background:#fff;border:1px solid var(--line)}

/* --- 2 · CAN I GO TODAY -------------------------------------------------
   Replaces the red flash-flood paragraph. A verdict gets read; a wall of
   warning gets skimmed. The colour is the answer, the lines under it are the
   reasons, and .gg-rain is the one thing the app cannot know for you. */
.gonogo{
  margin:0 0 16px;border-radius:14px;overflow:hidden;
  background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);
}
.gonogo .gg-head{display:flex;gap:11px;align-items:flex-start;padding:14px 16px}
.gonogo .gg-dot{
  flex:0 0 auto;width:11px;height:11px;border-radius:50%;margin-top:5px;
  box-shadow:0 0 0 4px rgba(0,0,0,.05);
}
.gonogo .gg-head strong{
  display:block;font-family:"Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16.5px;font-weight:800;letter-spacing:-.2px;margin-bottom:3px;
}
.gonogo .gg-head span{display:block;font-size:13.5px;line-height:1.5;color:var(--muted)}
.g-go   .gg-dot{background:#2fa36b}
.g-go   .gg-head strong{color:#1d7a4e}
.g-care .gg-dot{background:#eb9c1c}
.g-care .gg-head strong{color:#9a6207}
.g-stop .gg-dot{background:var(--danger)}
.g-stop .gg-head strong{color:var(--danger)}
/* SAFETY ON TOP. The band is the first thing in the card, above the verdict:
   read the risk, then the opinion. It is never inside a <details>, never
   shortened, never moved below the verdict. People drown in these wadis. */
.gonogo .gg-safety{
  display:flex;gap:10px;align-items:flex-start;
  background:#fdeceb;border-bottom:1px solid #f2c4bf;
  padding:12px 16px;color:#7d2418;font-size:13.5px;line-height:1.5;
}
.gonogo .gg-safety p{margin:0}
.gonogo .gg-safety strong{color:var(--danger);font-weight:800}
.gonogo .gg-safety .gs-i{flex:0 0 auto;font-size:15px;line-height:1.35}

/* --- 3 · THE SPECS: every fact on screen, nothing behind a tap ---------- */
.specs{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  margin:0 0 16px;border-radius:14px;overflow:hidden;
  background:var(--line);border:1px solid var(--line);box-shadow:var(--shadow);
}
.spec{background:#fff;padding:12px 14px;min-width:0}
.spec-wide{grid-column:1 / -1}
.spec .sk{
  display:block;margin-bottom:4px;
  font-size:10px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;
  color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.spec .sv{
  display:flex;align-items:baseline;gap:7px;
  font-family:"Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:14.5px;font-weight:700;line-height:1.35;letter-spacing:-.2px;
  color:var(--ink);overflow-wrap:anywhere;
}
.spec .sv .sl-dot{flex:0 0 auto;align-self:center}
/* A hard requirement, a guide, a 4x4, reads as one wherever it lands. */
.spec .sv-must{color:var(--danger)}
@media(max-width:340px){.specs{grid-template-columns:1fr}.spec-wide{grid-column:auto}}

/* --- the blurb, with room to breathe ----------------------------------- */
/* The description, above the verdict. Plain paragraph, the old 3-line clamp
   put a "more" link on blurbs already under three lines, so it collapsed
   nothing and read as a broken control. */
.lede{font-size:15.5px;line-height:1.6;color:#37423d;margin:0 0 16px}

/* --- 6 · reels side by side --------------------------------------------- */
.instarow{margin:0 0 16px}   /* one reel per place */
.instarow .instabtn{margin:0;padding:10px 8px;font-size:13px;border-radius:999px}
.instarow .instabtn+.instabtn{margin-top:0}

/* --- 7 · THE DRAWER: every long section as one dense index card ---------- */
.drawer{
  margin:0 0 12px;overflow:hidden;border-radius:14px;
  background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);
}
.drawer .dsec{border-top:1px solid #f0ebe1}
.drawer .dsec:first-child{border-top:none}
.drawer .dsec>summary{
  display:flex;align-items:center;gap:11px;list-style:none;cursor:pointer;
  padding:10px 14px;
}
.drawer .dsec>summary::-webkit-details-marker{display:none}
.drawer .ds-i{
  flex:0 0 auto;width:24px;height:24px;border-radius:8px;
  display:grid;place-items:center;font-size:12.5px;
  background:var(--sand-2);transition:background .18s ease;
}
.drawer .ds-t{
  flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-family:"Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:14.5px;font-weight:700;letter-spacing:-.1px;
}
.drawer .ds-n{flex:0 0 auto;font-size:11px;font-weight:700;color:var(--muted)}
.drawer .dsec>summary::after{
  content:"›";flex:0 0 auto;font-size:17px;line-height:1;color:#bdb5a6;
  transform:rotate(90deg);transition:transform .2s cubic-bezier(.2,.8,.2,1);
}
.drawer .dsec[open]>summary::after{transform:rotate(-90deg)}
.drawer .dsec[open]>summary{background:var(--sand-2)}
.drawer .dsec[open] .ds-i{background:var(--water-soft)}
.drawer .fold-body{padding:12px 14px 15px}
.drawer .fold-body>:first-child{margin-top:0}
.drawer .fold-body .sheet-fig{margin:12px 0 0}
.drawer .fold-body .bringbox{margin:0}
.drawer .fold-body .bring-col{border:none;padding:2px 0;background:transparent}

/* --- 8 · the disclaimer, quietly ---------------------------------------- */
.verifynote.thin{
  background:none;padding:0 2px;margin:0 0 10px;
  font-size:11px;line-height:1.4;color:#98938a;
}

/* --- 9 · the review: the stars ARE the control -------------------------- */
.ratebox{
  margin:0 0 16px;border-radius:14px;padding:16px;
  background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);
}
.ratebox .rate-q{
  margin:0 0 10px;font-family:"Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:15px;font-weight:700;
}
.ratebox .stars{display:flex;gap:6px;margin:0}
.ratebox .star{
  background:none;border:0;cursor:pointer;padding:2px 4px;line-height:1;
  font-size:32px;color:#ddd5c8;transition:transform .12s ease,color .12s ease;
}
.ratebox .star:active{transform:scale(1.18)}
.ratebox .star.on{color:var(--gold)}
.rate-more{animation:foldIn .2s ease;margin-top:13px}
.rate-more .rate-send{margin-top:2px}

/* --- 10 · THE DOCK: Maps and Save always one thumb away ------------------ */
.dockbar{
  position:sticky;bottom:0;z-index:3;
  display:flex;align-items:center;gap:8px;
  margin:14px -20px 0;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));
  background:rgba(250,246,240,.94);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
}
.dock-ico{
  flex:0 0 auto;width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;font-size:17px;line-height:1;
  background:#fff;border:1px solid var(--line);color:var(--ink);
  transition:transform .12s ease,background .15s ease,color .15s ease;
}
.dock-ico:active{transform:scale(.92)}
.dock-ico.on{background:var(--water-soft);border-color:var(--water);color:var(--water-dark)}
#actSave.on{background:#fdeef4;border-color:#f0bed3;color:#c4436f}
.dock-wa{background:#e7f8ee;border-color:#bfe8cf;color:#0f6b3a}
.dock-go{
  flex:1;min-width:0;height:44px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;gap:7px;
  background:var(--water);color:#fff;font-weight:700;font-size:14px;white-space:nowrap;
  box-shadow:0 4px 14px rgba(13,92,99,.28);
  transition:transform .12s ease;
}
.dock-go:active{transform:scale(.985)}

/* --- the one bit of motion: folds fade their contents in ----------------- */
@keyframes foldIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.drawer .fold-body,.rate-more{animation:foldIn .18s ease}
@media(prefers-reduced-motion:reduce){
  .drawer .fold-body,.rate-more{animation:none}
  .rankup .ru-card,.rankup .ru-burst i{animation:none !important}
  .dock-ico:active,.dock-go:active{transform:none}
  .drawer .dsec>summary::after{transition:none}
}

/* --- very narrow phones (320px) ----------------------------------------- */
@media(max-width:340px){
  .sheet-inner{padding:12px 16px 0}
  .dockbar{margin:12px -16px 0;padding-left:12px;padding-right:12px;gap:6px}
  .dock-ico{width:40px;height:40px}
  .dock-go{height:40px;font-size:13px}
  .poster-txt{padding:0 16px 12px}
  .poster-txt h2{font-size:24px}
}


/* ============================================================== RANK-UP
   Crossing a rank is the one moment in this app worth interrupting someone
   for, so it goes big: confetti falls, three shockwave rings blow out of a
   medal that slams in, eighteen rays fire, and the old title crosses out into
   the new one. The app itself has already re-skinned to the new rank's colour
   underneath (applyRankTheme in app.js), so when the card clears, everything
   is a different colour than it was a second ago.

   It only fires on an actual rank change, celebrate() checks. If it fired on
   all 101 ticks it would be noise, and the whole point is that it isn't. */
.rankup{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  background:radial-gradient(120% 80% at 50% 40%,
    color-mix(in srgb,var(--ru) 42%,transparent), rgba(10,20,18,.82));
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
  animation:ruIn .2s ease-out;padding:24px;overflow:hidden;
}
.rankup.out{animation:ruOut .32s ease-in forwards}
@keyframes ruIn{from{opacity:0}to{opacity:1}}
@keyframes ruOut{to{opacity:0;transform:scale(1.04)}}

/* --- confetti ----------------------------------------------------------- */
.rankup .ru-sky{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.rankup .ru-sky i{
  position:absolute;top:-6vh;left:var(--x);
  width:9px;height:14px;border-radius:2px;background:var(--c);
  transform:scale(var(--s)) rotate(var(--r));opacity:0;
  animation:ruFall 2.6s cubic-bezier(.25,.6,.4,1) var(--d) forwards;
}
@keyframes ruFall{
  0%{opacity:0;transform:translateY(0) scale(var(--s)) rotate(var(--r))}
  8%{opacity:1}
  100%{opacity:0;transform:translateY(108vh) scale(var(--s)) rotate(calc(var(--r) + 900deg))}
}

/* --- the card ----------------------------------------------------------- */
.rankup .ru-card{
  position:relative;text-align:center;
  background:#fff;border-radius:26px;padding:34px 30px 24px;
  box-shadow:0 24px 70px rgba(0,0,0,.4);max-width:310px;width:100%;
  animation:ruSlam .5s cubic-bezier(.16,1.3,.3,1);
}
@keyframes ruSlam{
  0%{transform:scale(.5) rotate(-7deg);opacity:0}
  55%{transform:scale(1.06) rotate(1.5deg);opacity:1}
  75%{transform:scale(.98) rotate(-.5deg)}
  100%{transform:scale(1) rotate(0)}
}
/* three shockwaves off the medal */
.rankup .ru-rings{position:absolute;left:50%;top:70px;width:0;height:0;pointer-events:none}
.rankup .ru-rings i{
  position:absolute;left:50%;top:50%;width:78px;height:78px;margin:-39px 0 0 -39px;
  border:2px solid var(--ru);border-radius:50%;opacity:0;
  animation:ruWave 1.5s ease-out forwards;
}
.rankup .ru-rings i:nth-child(2){animation-delay:.18s}
.rankup .ru-rings i:nth-child(3){animation-delay:.36s}
@keyframes ruWave{
  0%{opacity:.75;transform:scale(.5)}
  100%{opacity:0;transform:scale(3.1)}
}
/* eighteen rays */
.rankup .ru-burst{position:absolute;left:50%;top:70px;width:0;height:0;pointer-events:none}
.rankup .ru-burst i{
  position:absolute;left:0;top:0;width:3px;height:17px;border-radius:2px;
  background:var(--gold);opacity:0;transform-origin:50% 0;
  transform:rotate(var(--a)) translateY(34px);
  animation:ruRay .8s ease-out var(--d) ;
}
@keyframes ruRay{
  0%{opacity:0;transform:rotate(var(--a)) translateY(18px) scaleY(.3)}
  30%{opacity:1}
  100%{opacity:0;transform:rotate(var(--a)) translateY(76px) scaleY(1.1)}
}
/* the medal */
.rankup .ru-medal{
  width:82px;height:82px;border-radius:50%;margin:0 auto 16px;position:relative;
  display:grid;place-items:center;
  background:linear-gradient(145deg,var(--ru),var(--ru-dark));
  box-shadow:0 10px 28px color-mix(in srgb,var(--ru) 45%,transparent),
             inset 0 2px 0 rgba(255,255,255,.35);
  animation:ruMedal .9s ease-out .1s both;
}
@keyframes ruMedal{
  0%{transform:scale(0) rotate(-140deg)}
  60%{transform:scale(1.14) rotate(8deg)}
  100%{transform:scale(1) rotate(0)}
}
.rankup .ru-medal span{
  font-family:"Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:30px;font-weight:800;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.28);
}
.rankup .ru-kicker{
  font-size:10.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ru);margin-bottom:6px;animation:ruUp .5s ease-out .22s both;
}
.rankup .ru-name{
  font-family:"Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:34px;font-weight:800;letter-spacing:-.9px;line-height:1.05;
  color:var(--ink);margin-bottom:10px;animation:ruUp .5s ease-out .3s both;
}
.rankup .ru-from{
  font-size:13px;color:var(--muted);margin-bottom:6px;
  animation:ruUp .5s ease-out .38s both;
}
.rankup .ru-from s{opacity:.6}
.rankup .ru-from b{color:var(--ru);font-weight:800}
.rankup .ru-sub{
  font-size:12.5px;line-height:1.5;color:var(--muted);
  animation:ruUp .5s ease-out .44s both;
}
@keyframes ruUp{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.rankup .ru-go{
  margin-top:18px;width:100%;padding:13px;border:0;border-radius:999px;cursor:pointer;
  font:inherit;font-size:14.5px;font-weight:700;color:#fff;
  background:linear-gradient(135deg,var(--ru),var(--ru-dark));
  box-shadow:0 6px 18px color-mix(in srgb,var(--ru) 38%,transparent);
  animation:ruUp .5s ease-out .5s both;
}
.rankup .ru-go:active{transform:scale(.97)}
/* the page itself flashes as the new skin lands */
body.tier-flash{animation:ruFlash .7s ease-out}
@keyframes ruFlash{
  0%{background-color:var(--water-soft)}
  100%{background-color:var(--sand)}
}

@media(prefers-reduced-motion:reduce){
  .rankup,.rankup .ru-card,.rankup .ru-medal,.rankup .ru-kicker,.rankup .ru-name,
  .rankup .ru-from,.rankup .ru-sub,.rankup .ru-go{animation:none}
  .rankup .ru-sky,.rankup .ru-burst,.rankup .ru-rings{display:none}
  body.tier-flash{animation:none}
}

/* ------------------------------------------------------- PLANNER FINE TUNING
   Four of the eight questions only tune a trip rather than shape it, so they
   fold. The Plan tab was ~7 phone screens of stacked full-width cards before
   anyone reached the button. */
.planner-fine{margin:4px 0 14px}
.planner-fine>summary{font-size:14px}
.planner-fine .fold-body{padding:4px 12px 12px;background:var(--sand-2)}
.planner-fine .q{margin:10px 0 0;box-shadow:none;border:1px solid var(--line)}
.planner-fine .q:first-child{margin-top:6px}
.fine-body{display:block}

/* ============================================================== COMING SOON
   The Salalah curtain (meta.salalahComingSoon). The spots sit finished in
   content.js behind it, this is presentation, not absence. */
.soon{display:grid;place-items:center;padding:26px 0 10px}
.soon-card{
  text-align:center;max-width:340px;width:100%;
  background:#fff;border:1px solid var(--line);border-radius:20px;
  padding:30px 24px 26px;box-shadow:var(--shadow);
}
.soon-art{font-size:44px;margin-bottom:10px}
.soon-card h1{font-size:28px;letter-spacing:-.6px;margin:0 0 10px}
.soon-pill{
  display:inline-block;font-size:11px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--water-dark);background:var(--water-soft);
  border-radius:999px;padding:6px 14px;margin-bottom:14px;
}
.soon-card p{margin:0 0 10px;font-size:14.5px;line-height:1.6;color:#37423d}
.soon-card .soon-sub{font-size:12.5px;color:var(--muted);margin:0}

/* the tab wears a small "soon" flag and dims a touch */
.tab-dim{opacity:.62}
.tab-soon{
  font-style:normal;font-size:8.5px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:#fff;background:var(--gold);
  border-radius:999px;padding:2px 6px;margin-left:5px;vertical-align:2px;
}

/* ============================================================ PLANNER LOCK
   The locked Planner is the flagship of the paid guide, so it dresses like
   one: the dark card in the app, compass front and centre, a padlock riding
   its corner, gold check bullets. Same family as the Salalah curtain. */
.lockcard{
  background:linear-gradient(155deg,var(--water),var(--water-dark));
  color:#fff;border-radius:20px;padding:28px 22px 22px;margin:6px 0 14px;
  text-align:center;box-shadow:var(--shadow-lg);
}
.lock-art{
  position:relative;width:74px;height:74px;margin:0 auto 14px;color:#fff;
}
.lock-art>svg{width:100%;height:100%;display:block;opacity:.95}
.lock-pad{
  position:absolute;right:-7px;bottom:-4px;width:28px;height:28px;
  background:var(--gold);color:#fff;border-radius:9px;
  display:grid;place-items:center;box-shadow:0 3px 10px rgba(0,0,0,.3);
}
.lock-pad svg{width:16px;height:16px}
.lockcard h2{
  font-size:24px;letter-spacing:-.5px;margin:0 0 10px;color:#fff;
}
.lock-pill{
  display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--water-dark);background:#fff;
  border-radius:999px;padding:6px 14px;margin-bottom:14px;
}
.lock-lead{
  margin:0 auto 16px;max-width:30ch;
  font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.92);
}
.lock-feats{
  list-style:none;margin:0 auto 16px;padding:14px 16px;max-width:330px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
  border-radius:14px;text-align:left;
}
.lock-feats li{
  position:relative;padding-left:24px;margin-bottom:9px;
  font-size:13px;line-height:1.45;color:rgba(255,255,255,.9);
}
.lock-feats li:last-child{margin-bottom:0}
.lock-feats li::before{
  content:"✓";position:absolute;left:0;top:0;
  color:var(--gold);font-weight:800;
}
.lock-when{margin:0;font-size:12px;color:rgba(255,255,255,.65)}

/* ======================================================== TAP AFFORDANCES
   Nobody knew the Info elements opened. Now every tappable thing carries its
   own cue: signs and stat tiles wear a small teal + badge that flips to a
   dash when open, list rows wear a ringed chevron that rotates, and rows
   with an external link (the eVisa portal) get a solid pill, the loudest
   "this is a button" on the page. One hint line at the top for good measure. */
.tap-hint{
  font-size:12px !important;color:var(--muted) !important;
  margin-top:4px !important;
}
/* the + badge, shared by signs and stat tiles */
.sign-ic::before,.stat::after{
  content:"+";position:absolute;z-index:2;
  width:19px;height:19px;border-radius:50%;
  background:var(--water);color:#fff;
  font-size:14px;font-weight:700;line-height:19px;text-align:center;
  box-shadow:0 1px 4px rgba(0,0,0,.22);
}
.sign-ic::before{right:-4px;bottom:-2px}
.sign-ic.sign-forbid::before{background:var(--danger)}
.sign.on .sign-ic::before{content:"–"}
.stat{position:relative}
.stat::after{right:10px;top:10px}
.stat.on::after{content:"–"}
/* list-row chevrons become ringed buttons */
.irow-c{
  width:26px;height:26px;border-radius:50%;
  border:1.5px solid var(--line);background:var(--sand-2);
  display:grid;place-items:center;font-size:14px;line-height:1;
  color:var(--muted);
}
.irow.on .irow-c,.lad.on .irow-c{
  background:var(--water);border-color:var(--water);color:#fff;
}
/* the chart gets one too */
.bars{position:relative;padding-right:46px}
.bars::after{
  content:"›";position:absolute;right:12px;top:50%;margin-top:-13px;
  width:26px;height:26px;border-radius:50%;
  border:1.5px solid var(--line);background:var(--sand-2);
  display:grid;place-items:center;font-size:14px;color:var(--muted);
  transform:rotate(90deg);
}
.bars.on::after{background:var(--water);border-color:var(--water);color:#fff;transform:rotate(-90deg)}
/* the external-link pill */
.irow-pill{
  flex:0 0 auto;padding:8px 13px;border-radius:999px;
  background:var(--water);color:#fff;font-size:12px;font-weight:800;
  white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.14);
}
.irow.on .irow-pill{background:var(--water-dark)}

/* ========================================================= ABOUT HEADER
   Photo NEXT TO the hook, not stacked over it: a rounded square headshot on
   the left, the question and sub on the right, left-aligned. The asset is
   already cropped to the face (cut from the OneDrive original), so the img
   just fills its box. The stacked centred layout survives only as the
   no-photo fallback. */
.about-hero.has-photo{
  display:flex;align-items:center;gap:16px;text-align:left;padding:8px 0 20px;
}
.about-hero.has-photo .about-poster{
  flex:0 0 140px;width:140px;aspect-ratio:1;margin:0;
  border-radius:20px;overflow:hidden;
  box-shadow:var(--shadow-lg);background:var(--sand-2);
}
.about-poster img{
  width:100%;height:100%;object-fit:cover;object-position:center;display:block;
}
.ah-txt{flex:1;min-width:0}
.about-hero.has-photo h1.about-hook{
  font-size:20px;line-height:1.22;letter-spacing:-.4px;
  margin:0;max-width:none;text-wrap:balance;
}
.about-hero.has-photo .about-sub{
  font-size:13px;line-height:1.5;margin:7px 0 0;max-width:none;
}
.about-hero.has-photo .about-byline{margin:7px 0 0;font-size:11.5px}
@media(max-width:360px){
  .about-hero.has-photo{gap:13px}
  .about-hero.has-photo .about-poster{flex-basis:118px;width:118px}
  .about-hero.has-photo h1.about-hook{font-size:18px}
}

/* ============================================================ HERO SLIDER
   All of a spot's photos in the hero: swipe, or tap the photo to advance
   (wrapping). Scroll-snap does the sliding, so it works with plain touch
   and no library. The scrim, name and chips stay pinned above the slides;
   the credit and counter follow the photo in view. */
.gal-track{
  position:absolute;inset:0;display:flex;
  overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.gal-track::-webkit-scrollbar{display:none}
.gal-slide{flex:0 0 100%;height:100%;scroll-snap-align:center}
.gal-slide img{width:100%;height:100%;object-fit:cover;display:block}
/* overlays ride above the slides but never eat a swipe */
.sheet-hero.poster .poster-txt{z-index:2;pointer-events:none}
.gal-dots{
  position:absolute;top:13px;left:50%;transform:translateX(-50%);
  display:flex;gap:5px;z-index:2;pointer-events:none;
}
.gal-dots i{
  width:6px;height:6px;border-radius:999px;background:rgba(255,255,255,.5);
  box-shadow:0 1px 3px rgba(0,0,0,.3);transition:width .2s ease,background .2s ease;
}
.gal-dots i.on{width:17px;background:#fff}
.gal-n{
  position:absolute;top:10px;left:12px;z-index:2;pointer-events:none;
  font-size:11px;font-weight:700;color:#fff;letter-spacing:.4px;
  background:rgba(0,0,0,.42);border-radius:999px;padding:4px 10px;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
.gal-n b{font-weight:800}
.gal-credit{
  position:absolute;right:8px;top:10px;bottom:auto;z-index:2;pointer-events:none;
}
@media(prefers-reduced-motion:reduce){.gal-dots i{transition:none}}

/* the slider arrows: the visible half of "you can move this" */
.gal-arw{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:34px;height:34px;border-radius:50%;cursor:pointer;
  border:0;padding:0;
  display:grid;place-items:center;
  font-size:22px;line-height:1;font-weight:700;
  color:#fff;background:rgba(0,0,0,.34);
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
  box-shadow:0 2px 8px rgba(0,0,0,.25);
  transition:background .15s ease,transform .12s ease;
}
.gal-arw:hover{background:rgba(0,0,0,.5)}
.gal-arw:active{transform:translateY(-50%) scale(.9)}
.gal-prev{left:9px;padding-right:2px}
.gal-next{right:9px;padding-left:2px}
@media(prefers-reduced-motion:reduce){.gal-arw{transition:none}}

/* brand sub-line: handle · updated <month> */
.brand-text small{white-space:nowrap;font-size:10.5px;letter-spacing:.01em}
.brand-text .bs-dot{font-style:normal;opacity:.5;margin:0 5px}

/* ========================================================= RANK, EVERYWHERE
   Reaching a new rank used to change an accent colour and not much else.
   Now the rank re-grades the whole surface:

   1. THE BANNER PHOTO takes a colour grade in the rank's hue (the glow layer
      below reads --water live), so the same wadi photo reads teal for a
      beginner, green at Explorer, gold at Regular, crimson at Old hand,
      purple when it's all done.
   2. THE PAGE ITSELF stops being flat sand: a wash of the rank colour pours
      from under the banner, and a faint dotted texture in the rank colour
      sits behind the content, so even the "white" page belongs to your rank.
   3. Buttons, chips, rings, the dock and the filter were already on
      --water and follow along. */
/* The picture, shaded in your rank's colour: a full-bleed tint (blue-ish for
   Wanderer, gold for Regular, purple at the top) over the photo, with only a
   light dark edge top and bottom so the white text stays readable. The heavy
   teal slab gradients are gone; the rank colour IS the banner's mood now. */
.topbar::after{
  background:
    linear-gradient(180deg,rgba(6,22,24,.52) 0%,rgba(6,22,24,.10) 34%,rgba(6,22,24,.14) 66%,rgba(6,22,24,.58) 100%),
    linear-gradient(0deg,var(--rank-tint,rgba(13,92,99,.34)),var(--rank-tint,rgba(13,92,99,.34)));
}
body{
  background-image:
    radial-gradient(var(--rank-dot,rgba(13,92,99,.10)) 1px,transparent 1.5px),
    linear-gradient(180deg,var(--wash,var(--water-soft)) 0%,var(--sand) 340px);
  background-size:22px 22px,auto;
  background-attachment:fixed,scroll;
}
/* the HUD ring and bar pick up the rank colour at the top tiers */
.hud[data-tier="2"] .hud-bar i{background:linear-gradient(90deg,var(--gold),#ffd9a0)}
.hud[data-tier="3"] .hud-ring b{color:var(--gold)}

/* ═══════════════════════════════════════════ ITINERARY TIMELINES (Jul 2026)
   The hour-by-hour format: strip of day chips, day cards with a timed rail,
   and the costs receipt. No position:sticky and no transforms on ancestors,
   the sheet's X depends on it (see the containing-block gotcha). */

.trip-strip{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 10px;margin:4px 0 8px;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.trip-strip::-webkit-scrollbar{display:none}
.tday{flex:0 0 auto;min-width:92px;max-width:130px;background:#fff;border:1px solid var(--line);
  border-radius:14px;padding:8px 10px;text-align:left;cursor:pointer;font:inherit;box-shadow:var(--shadow)}
.tday b{display:block;font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--clay)}
.tday span{display:block;font-size:21px;line-height:1.25}
.tday small{display:block;font-size:10.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.trip-day{border:1px solid var(--line);border-radius:var(--radius);background:#fff;
  margin:10px 0;box-shadow:var(--shadow);overflow:hidden}
.trip-day summary{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:10px;
  padding:12px 14px;cursor:pointer;list-style:none}
.trip-day summary::-webkit-details-marker{display:none}
.trip-day summary::after{content:"▸";color:var(--muted);font-size:13px}
.trip-day[open] summary::after{content:"▾"}
.trip-day[open] summary{border-bottom:1px dashed var(--line)}
.td-n{width:34px;height:34px;display:grid;place-items:center;background:var(--clay-soft);color:var(--clay);
  font-weight:800;font-size:15px;border-radius:11px;flex:none}
.td-t strong{display:block;font-size:14.5px;line-height:1.25}
.td-t small{display:block;font-size:11.5px;color:var(--muted);margin-top:1px}
.td-cost{font-size:11px;font-weight:800;color:var(--water-dark);background:var(--water-soft);
  padding:3px 8px;border-radius:999px;white-space:nowrap}
.td-body{padding:8px 14px 14px}

.ts{display:grid;grid-template-columns:42px 16px 1fr auto;gap:0 8px;padding:7px 0;position:relative}
.ts-t{font-size:12px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums;padding-top:2px}
.ts-rail{position:relative;width:16px}
.ts-rail::before{content:"";position:absolute;left:7px;top:-8px;bottom:-8px;width:2px;background:var(--line)}
.ts:first-child .ts-rail::before{top:12px}
.ts:last-child .ts-rail::before{bottom:auto;height:20px}
.ts:first-child:last-child .ts-rail::before{display:none}
.ts-rail::after{content:"";position:absolute;left:3px;top:7px;width:8px;height:8px;border-radius:50%;
  background:var(--sand);border:2px solid var(--water)}
.ts.hl .ts-rail::after{background:var(--gold);border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-soft)}
.ts-title{font-size:14px;font-weight:700;line-height:1.3}
.ts-pin{text-decoration:none;font-size:12px}
.ts-note{display:block;font-size:12.5px;color:var(--muted);line-height:1.45;margin-top:2px}
.ts-omr{font-size:11px;font-weight:800;color:var(--water-dark);background:var(--water-soft);
  border-radius:999px;padding:2px 7px;align-self:start;white-space:nowrap;margin-top:2px}
.ts-omr:empty{display:none}
.ts-sleep{margin-top:10px;padding:8px 12px;background:var(--sand-2);border-radius:10px;
  font-size:12.5px;font-weight:600}

.receipt{margin:16px 0 6px;border:1.5px dashed var(--gold);background:var(--gold-soft);
  border-radius:var(--radius);padding:14px 16px}
.rc-head{font-weight:800;font-size:14px;margin-bottom:8px}
.rc-row{display:flex;align-items:baseline;gap:6px;font-size:13px;padding:3px 0}
.rc-row i{flex:1;border-bottom:2px dotted rgba(27,35,32,.22);margin:0 2px 3px}
.rc-row b{font-variant-numeric:tabular-nums;white-space:nowrap}
.rc-splits{display:flex;gap:8px;margin-top:12px}
.rc-split{flex:1;background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px 6px;text-align:center}
.rc-split b{display:block;font-size:13px;color:var(--water-dark);white-space:nowrap}
.rc-split span{font-size:10.5px;color:var(--muted)}
.rc-note{font-size:11.5px;color:var(--muted);margin:10px 0 0;line-height:1.5}
.ts-swap{margin-top:8px;padding:8px 12px;background:var(--clay-soft);border-radius:10px;
  font-size:12.5px;line-height:1.5;color:var(--ink);border-left:3px solid var(--clay)}
.ts-titlerow{display:flex;align-items:baseline;gap:5px;flex-wrap:wrap}
.ts-link{background:none;border:0;padding:0;font:inherit;font-size:14px;font-weight:700;
  line-height:1.3;color:var(--ink);text-align:left;cursor:pointer;
  text-decoration:underline dotted var(--water);text-underline-offset:3px}
.ts-link::after{content:"›";color:var(--water);font-weight:800;margin-left:3px}

/* ── itinerary v2: map, drive chips, day ticks, route buttons (Jul 2026) ── */
.itinmap{height:230px;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;margin:4px 0 12px;background:var(--sand-2);position:relative;z-index:0}
.itinmap .map-loading{padding:14px;font-size:12.5px;color:var(--muted)}
.itin-dot span{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
  color:#fff;font-size:11px;font-weight:800;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.35)}
.td-chips{display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.td-drive{font-size:11px;font-weight:700;color:var(--muted);background:var(--sand-2);
  padding:2px 8px;border-radius:999px;white-space:nowrap}
.td-n.done{background:#e5f3e8;color:#1d7a3a}
.tday.done{border-color:#bfdec7;background:#f3faf4}
.tday.done b{color:#1d7a3a}
.routego{display:block;margin:10px 0 2px;padding:11px 14px;border-radius:999px;
  background:var(--water);color:#fff;font-size:13.5px;font-weight:700;text-align:center;
  text-decoration:none}
.routego:active{background:var(--water-dark)}
.td-done{display:block;width:100%;margin-top:10px;padding:9px 12px;border-radius:10px;
  border:1.5px dashed var(--line);background:none;font:inherit;font-size:12.5px;
  font-weight:700;color:var(--muted);cursor:pointer}
.td-done.on{border-style:solid;border-color:#bfdec7;background:#f3faf4;color:#1d7a3a}
.rc-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.rc-chk{font-size:10.5px;font-weight:700;color:var(--gold);background:#fff;
  border:1px solid var(--gold);border-radius:999px;padding:2px 8px;white-space:nowrap}

/* Quiet HUD: the rank game turned down to a plain counter (long-press the HUD).
   Keeps the banner's vertical rhythm so nothing jumps when you toggle it. */
.hud.hud-quiet{display:flex;align-items:center;min-height:34px}
.hud-count{font-size:12.5px;font-weight:600;letter-spacing:.01em;opacity:.92}