/* Light is the default palette, chosen for contrast on a light background, not a
   mechanical inversion of the dark values below. Dark is layered on in two places:
   once for the system preference, once for the in-app toggle, so the toggle always
   wins over whatever the OS says. Every color token gets a bare :root value here;
   nothing below may define a token that is not also defined on this block. */
:root{
  --bg:#f7f5fa; --bg2:#eeebf3; --card:#ffffff; --card2:#f3f0f8; --line:#e0dae8;
  --ink:#1a1622; --dim:#5b5470; --dimmer:#8b84a0;
  --hot:#d9631f; --gold:#a67300; --cool:#128f77; --pink:#c23d82;
  --red:#d1293a; --green:#1f8a52; --blue:#2563c9; --violet:#7a3fd1;
  --r:14px; --nav:62px;

  /* Surface pairs for the tinted card/tag/button variants: a soft light tint
     paired with a matching border, one pair per semantic family. Dark values
     are the original hardcoded hex values these variants shipped with. */
  --hi-a:#fdeee7; --hi-b:#fff8f4;
  --warn-bg:#fceced; --warn-border:#e2939c; --soft-red:#b3303c;
  --ok-bg:#e8f7ee; --ok-border:#8fcaa8;
  --cool-bg:#e3f6f2; --cool-border:#9ad4c8;
  --info-bg:#e7f0fb; --info-border:#9dc0e6;
  --gold-bg:#fbeecb; --gold-border:#ddb679;
  --violet-bg:#f0e6fa;
  --muted-bg:#eae7f0; --badge3-bg:#d9d0ec;

  /* The landing/hero band is a fixed dark accent moment by design, in both
     themes, the way a brand color would be, so its own text/line tokens are
     the SAME value in all three theme blocks below rather than flipping. */
  --hero-ink:#f4eeff; --hero-dim:#a99fc4; --hero-line:#2c2438;

  /* Type + spacing scale, so sizes are explicit and density is a token change,
     not a hunt through the file. Visual weight is kept close to what these
     replace; --fs-4/--sp-5 match the existing body font size and card padding. */
  --fs-0:10.5px; --fs-1:11.5px; --fs-2:12.5px; --fs-3:13.5px;
  --fs-4:15px; --fs-5:18px; --fs-6:25px;
  --sp-1:3px; --sp-2:5px; --sp-3:7px; --sp-4:9px; --sp-5:12px; --sp-6:16px; --sp-7:22px;
}
/* System dark preference, only when the in-app toggle has not made an explicit
   choice. An explicit data-theme="light" from the toggle always beats this. */
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0d0b12; --bg2:#141119; --card:#1a1622; --card2:#211c2b; --line:#2c2438;
    --ink:#f4eeff; --dim:#a99fc4; --dimmer:#776e91;
    --hot:#ff8a4c; --gold:#ffc857; --cool:#6ee7d0; --pink:#ff7ab8;
    --red:#ff5f6d; --green:#7ee0a8; --blue:#8ab8ff; --violet:#b98cff;

    --hi-a:#2c1e21; --hi-b:#1a1622;
    --warn-bg:#231a1c; --warn-border:#5c2b2b; --soft-red:#ff9aa2;
    --ok-bg:#182219; --ok-border:#2c5c42;
    --cool-bg:#161f22; --cool-border:#2a4d55;
    --info-bg:#1a2635; --info-border:#2f4a66;
    --gold-bg:#332612; --gold-border:#5d3f2f;
    --violet-bg:#2a1c38;
    --muted-bg:#2a2430; --badge3-bg:#5b4a7a;

    --hero-ink:#f4eeff; --hero-dim:#a99fc4; --hero-line:#2c2438;
  }
}
/* The in-app toggle, explicit both ways: this wins even on a light-OS device. */
:root[data-theme="dark"]{
  --bg:#0d0b12; --bg2:#141119; --card:#1a1622; --card2:#211c2b; --line:#2c2438;
  --ink:#f4eeff; --dim:#a99fc4; --dimmer:#776e91;
  --hot:#ff8a4c; --gold:#ffc857; --cool:#6ee7d0; --pink:#ff7ab8;
  --red:#ff5f6d; --green:#7ee0a8; --blue:#8ab8ff; --violet:#b98cff;

  --hi-a:#2c1e21; --hi-b:#1a1622;
  --warn-bg:#231a1c; --warn-border:#5c2b2b; --soft-red:#ff9aa2;
  --ok-bg:#182219; --ok-border:#2c5c42;
  --cool-bg:#161f22; --cool-border:#2a4d55;
  --info-bg:#1a2635; --info-border:#2f4a66;
  --gold-bg:#332612; --gold-border:#5d3f2f;
  --violet-bg:#2a1c38;
  --muted-bg:#2a2430; --badge3-bg:#5b4a7a;

  --hero-ink:#f4eeff; --hero-dim:#a99fc4; --hero-line:#2c2438;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
/* ---- theme toggle ---- */
.theme-toggle{position:fixed;right:12px;bottom:calc(var(--nav) - 10px);z-index:960;
 width:38px;height:38px;border-radius:99px;border:1px solid var(--line);background:var(--card);
 color:var(--ink);font-size:16px;line-height:1;display:flex;align-items:center;justify-content:center;
 cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.16)}
.theme-toggle:active{transform:scale(.92)}
@media print{.theme-toggle{display:none!important}}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);
 font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
 padding-bottom:calc(var(--nav) + 18px);overscroll-behavior-y:none}
a{color:var(--gold);text-decoration:none}
img{max-width:100%}
.wrap{max-width:780px;margin:0 auto;padding:0 14px}

h1{font-size:var(--fs-6);line-height:1.15;margin:0 0 6px;letter-spacing:-.6px}
h2{font-size:var(--fs-5);margin:24px 0 var(--sp-5);letter-spacing:-.3px;display:flex;align-items:center;gap:9px}
h2 .n{font-size:var(--fs-0);color:var(--dimmer);border:1px solid var(--line);border-radius:99px;padding:2px 8px;font-weight:700;flex:0 0 auto}
h3{font-size:var(--fs-4);margin:0 0 3px;letter-spacing:-.2px}
p{margin:0 0 var(--sp-5)}
.sub{color:var(--dim);font-size:var(--fs-3)}
.tiny{font-size:var(--fs-1);color:var(--dimmer);line-height:1.45}
.lead{font-size:16px;color:var(--dim)}
b,strong{color:var(--ink);font-weight:700}

/* ---- top clock ---- */
.top{position:sticky;top:0;z-index:900;background:color-mix(in srgb,var(--bg) 94%,transparent);
 backdrop-filter:saturate(140%) blur(14px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:7px 14px}
.tnow{font-variant-numeric:tabular-nums;font-weight:800;font-size:16px;letter-spacing:-.3px}
.tphase{font-size:11px;color:var(--hot);font-weight:700;text-transform:uppercase;letter-spacing:.6px}
.tcd{font-size:11.5px;text-align:right;line-height:1.35;color:var(--dim)}
.tcd b{color:var(--hot);font-variant-numeric:tabular-nums}
/* The one thing a preview must never let happen is reading as the real clock.
   Violet ties it to the picker border below, and it sits right under the
   clock inside the sticky header so it survives scrolling the list. */
.tprev{font-size:10.5px;color:var(--violet);font-weight:700;margin-top:1px}
.when-picker{display:flex;flex-wrap:wrap;gap:10px;align-items:center;
 margin:0 0 var(--sp-4);padding:10px 12px;background:var(--violet-bg);
 border:1px solid var(--violet);border-radius:12px}
.when-picker input[type="time"]{background:var(--card);border:1px solid var(--line);color:var(--ink);
 border-radius:10px;padding:9px 10px;font-size:15px;font-family:inherit;flex:0 0 auto}
.when-picker .chips{margin:0;padding:0;flex:1 1 220px}

/* ---- hero ----
   A fixed dark accent band, the way a brand color would be, on purpose, in both
   themes. --hero-ink/--hero-dim carry text that must stay readable against it
   regardless of which theme the rest of the page is in; see the .land block
   for the same pattern applied to the landing page's version of this band. */
.hero{background:linear-gradient(165deg,#2b1d3f 0%,#1a1224 55%,#0f0d14 100%);
 border-bottom:1px solid var(--line);padding:18px 0 16px;position:relative;overflow:hidden}
.hero:after{content:"";position:absolute;right:-60px;top:-60px;width:210px;height:210px;
 background:radial-gradient(circle,rgba(255,138,76,.26),transparent 68%);pointer-events:none}
.hero .wrap{position:relative;z-index:1}
.hero h1{color:var(--hero-ink)}
.hero .lead{color:var(--hero-dim)}

/* ---- cards ---- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:var(--sp-5);margin:var(--sp-4) 0}
.card.hi{border-color:var(--hot);background:linear-gradient(170deg,var(--hi-a),var(--hi-b))}
.card.warn{border-color:var(--warn-border);background:var(--warn-bg)}
.card.ok{border-color:var(--ok-border);background:var(--ok-bg)}
.card.cool{border-color:var(--cool-border);background:var(--cool-bg)}
.card.flat{background:var(--bg2)}
.card>h3+.sub{margin-top:5px}

.rank{display:flex;gap:11px;align-items:flex-start}
.rank .num{flex:0 0 26px;height:26px;border-radius:8px;background:var(--hot);color:#1a0e06;
 font-weight:900;font-size:13px;display:flex;align-items:center;justify-content:center;margin-top:1px}
.rank.r2 .num{background:var(--gold)}
.rank.r3 .num{background:var(--badge3-bg);color:var(--ink)}
.rank.rn .num{background:var(--bg2);color:var(--dimmer);border:1px solid var(--line)}

/* ---- chips ---- */
.chips{display:flex;gap:7px;overflow-x:auto;padding:4px 0 6px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;background:var(--bg2);border:1px solid var(--line);color:var(--dim);
 border-radius:99px;padding:7px 12px;font-size:var(--fs-2);font-weight:700;cursor:pointer;white-space:nowrap;font-family:inherit}
.chip[aria-pressed="true"]{background:var(--hot);border-color:var(--hot);color:#1a0e06}

/* Guide controls: Sort, Guide/All and Now/Preview read as one quiet strip
   instead of three stacked billboards, so the town photo and the first place
   are not pushed below the fold by a wall of chips. Each stays its own labelled,
   clickable group; only the vertical stacking is removed. Groups are divided by
   a hairline rather than a whole row of their own. */
.ctrls{display:flex;flex-wrap:wrap;align-items:center;gap:0 2px;margin-bottom:2px}
.ctrls .chips{width:auto;padding:2px 0;margin:0}
.ctrls .chips:not(:last-child){margin-right:8px;padding-right:8px;
 border-right:1px solid var(--line)}
.ctrls .chip{padding:5px 11px;font-size:var(--fs-1)}

/* ---- badges ----
   Fixed dark text (#1a0e06) on the --hot/--gold accents is kept as-is: both
   tokens stay orange/gold-family in light and dark, so dark text reads fine
   on either. Reviewed against both theme blocks, not a leftover. */
.tag{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;
 border-radius:5px;padding:2px 6px;margin:0 5px 3px 0;vertical-align:1px;white-space:nowrap}
.t-open{background:var(--ok-bg);color:var(--green)}
.t-shut{background:var(--warn-bg);color:var(--soft-red)}
.t-soon{background:var(--gold-bg);color:var(--gold)}
.t-free{background:var(--ok-bg);color:var(--green)}
.t-pay{background:var(--gold-bg);color:var(--gold)}
.t-warn{background:var(--warn-bg);color:var(--soft-red)}
.t-info{background:var(--info-bg);color:var(--blue)}
.t-best{background:var(--violet-bg);color:var(--violet)}
.t-unv{background:var(--muted-bg);color:var(--dimmer)}
.t-trend-up{background:var(--ok-bg);color:var(--green)}
.t-trend-down{background:var(--warn-bg);color:var(--soft-red)}
.t-trend-flat{background:var(--muted-bg);color:var(--dimmer)}

.money{float:right;font-weight:800;font-size:var(--fs-2);color:var(--cool);margin-left:9px;white-space:nowrap}
.why{font-size:12px;color:var(--hot);font-weight:700;margin-top:5px}

/* ---- buttons ---- */
.btns{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--sp-4)}
.btn{display:inline-flex;align-items:center;gap:5px;background:var(--bg2);border:1px solid var(--line);
 color:var(--ink);border-radius:9px;padding:7px 11px;font-size:12px;font-weight:700;font-family:inherit;cursor:pointer}
.btn.g{border-color:var(--ok-border);color:var(--green)}
.btn.o{border-color:var(--gold-border);color:var(--hot)}
.btn.b{border-color:var(--info-border);color:var(--blue)}
.btn.r{border-color:var(--warn-border);color:var(--soft-red)}
.btn.wide{width:100%;justify-content:center;padding:11px}

/* ---- map ---- */
#map{height:340px;border-radius:var(--r);border:1px solid var(--line);margin:10px 0;background:var(--bg2);z-index:1}
.leaflet-popup-content-wrapper{background:var(--card);color:var(--ink);border-radius:11px;border:1px solid var(--line)}
.leaflet-popup-tip{background:var(--card)}
.leaflet-popup-content{margin:11px 13px;font-size:13px;line-height:1.5}
.leaflet-popup-content a{color:var(--gold)}
.leaflet-container{background:var(--bg2)}

/* ---- table ---- */
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:12.5px;margin:8px 0;min-width:100%}
th,td{text-align:left;padding:8px 7px;border-bottom:1px solid var(--line);vertical-align:top}
th{color:var(--dimmer);font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;font-weight:800}
tr:last-child td{border-bottom:0}

/* ---- details ---- */
details{border:1px solid var(--line);border-radius:12px;padding:var(--sp-4) var(--sp-5);margin:var(--sp-3) 0;background:var(--bg2)}
summary{cursor:pointer;font-weight:700;font-size:14px;list-style:none;display:flex;gap:7px;align-items:flex-start}
summary::-webkit-details-marker{display:none}
summary:before{content:"▸";color:var(--hot);flex:0 0 auto}
details[open] summary:before{content:"▾"}
details>*:not(summary){margin-top:9px}

/* ---- timeline ---- */
.tl{position:relative;padding-left:16px;margin:8px 0}
.tl:before{content:"";position:absolute;left:4px;top:6px;bottom:6px;width:2px;background:var(--line)}
.tlrow{position:relative;padding:0 0 14px 0}
.tlrow:before{content:"";position:absolute;left:-16px;top:6px;width:10px;height:10px;border-radius:99px;
 background:var(--bg);border:2px solid var(--line)}
.tlrow.on:before{background:var(--hot);border-color:var(--hot);box-shadow:0 0 0 4px rgba(255,138,76,.18)}
.tlrow.past:before{background:var(--line)}
.tlrow .h{font-weight:800;font-size:12.5px;color:var(--gold);font-variant-numeric:tabular-nums}
.tlrow.past{opacity:.42}

/* ---- phrase ---- */
.dev{font-size:19px;line-height:1.5;color:var(--ink);margin:4px 0 2px;
 font-family:"Noto Sans Devanagari",-apple-system,system-ui,sans-serif}
.rom{font-size:13px;color:var(--gold);font-style:italic}

/* ---- nav ---- */
.nav{position:fixed;left:0;right:0;bottom:0;z-index:950;background:color-mix(in srgb,var(--bg) 97%,transparent);
 backdrop-filter:saturate(140%) blur(14px);border-top:1px solid var(--line);
 padding-bottom:env(safe-area-inset-bottom)}
.nav .in{display:flex;max-width:780px;margin:0 auto;overflow-x:auto;scrollbar-width:none}
.nav .in::-webkit-scrollbar{display:none}
.nav a{flex:1 0 auto;min-width:60px;text-align:center;padding:8px 6px 9px;color:var(--dimmer);
 font-size:9.5px;font-weight:700;letter-spacing:.2px;text-transform:uppercase}
.nav a i{display:block;font-size:18px;font-style:normal;margin-bottom:2px;line-height:1}
.nav a.on{color:var(--hot)}

.sos{display:flex;gap:6px;margin:10px 0}
.sos a{flex:1;text-align:center;background:var(--warn-bg);border:1px solid var(--warn-border);color:var(--soft-red);
 border-radius:10px;padding:10px 4px;font-size:11.5px;font-weight:800}

hr{border:0;border-top:1px solid var(--line);margin:var(--sp-7) 0}
.src,.src a{font-size:10.5px;color:var(--dimmer)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media(max-width:400px){.grid2{grid-template-columns:1fr}}
.stat{background:var(--bg2);border:1px solid var(--line);border-radius:11px;padding:10px 12px}
.stat .v{font-size:20px;font-weight:800;color:var(--cool);font-variant-numeric:tabular-nums;letter-spacing:-.5px}
.stat .k{font-size:10.5px;color:var(--dimmer);text-transform:uppercase;letter-spacing:.5px;font-weight:700}
ul.tight{padding-left:17px;margin:0}
ul.tight li{margin-bottom:6px}

/* ---- web app additions ---- */
.screen{display:none}.screen.on{display:block}
.search{width:100%;background:var(--card);border:1px solid var(--line);color:var(--ink);
 border-radius:12px;padding:14px 15px;font-size:16px;font-family:inherit;outline:none}
.search:focus{border-color:var(--hot)}
.hit{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;
 margin:8px 0;cursor:pointer}
.hit:active{border-color:var(--hot)}
.hit b{display:block;font-size:15px}
.hit span{font-size:12px;color:var(--dimmer)}

/* Live Photon typeahead, shown only while the authoritative .hit list below
   is not (yet) up. Same card/line tokens as .hit so it never reads as a
   second, competing kind of result, just a faster first pass at one. */
.suggest-list{background:var(--card);border:1px solid var(--line);border-radius:12px;
 margin:6px 0 0;overflow:hidden}
.suggest-item{display:block;width:100%;text-align:left;background:none;border:none;
 border-bottom:1px solid var(--line);color:var(--ink);font-family:inherit;font-size:13.5px;
 padding:11px 14px;cursor:pointer}
.suggest-item:last-child{border-bottom:none}
.suggest-item:active,.suggest-item:hover{background:var(--card2)}
.step{display:flex;gap:10px;align-items:flex-start;margin:9px 0;font-size:13.5px;color:var(--dim)}
.step i{flex:0 0 18px;font-style:normal}
.step.done i{color:var(--green)}.step.now i{color:var(--hot)}.step.fail i{color:var(--red)}
.bar{height:3px;background:var(--line);border-radius:99px;overflow:hidden;margin:14px 0}
.bar>div{height:100%;background:var(--hot);width:0;transition:width .4s}
.timeset{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}
.timeset label{font-size:11px;color:var(--dimmer);text-transform:uppercase;letter-spacing:.5px;font-weight:700}
.timeset input{width:100%;background:var(--bg2);border:1px solid var(--line);color:var(--ink);
 border-radius:10px;padding:11px;font-size:16px;font-family:inherit}
.pill{display:inline-block;background:var(--bg2);border:1px solid var(--line);border-radius:99px;
 padding:5px 11px;font-size:11.5px;color:var(--dim);margin:0 5px 5px 0}
.src-badge{font-size:9.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;
 padding:2px 5px;border-radius:4px;margin-left:6px}
.src-osm{background:var(--info-bg);color:var(--blue)}
.src-wv{background:var(--violet-bg);color:var(--violet)}
.big{width:100%;background:var(--hot);color:#1a0e06;border:0;border-radius:12px;padding:14px;
 font-size:15px;font-weight:800;font-family:inherit;cursor:pointer;margin-top:6px}
.big.ghost{background:transparent;border:1px solid var(--line);color:var(--dim)}

#map{height:64vh;min-height:340px;border-radius:var(--r);border:1px solid var(--line);
 background:var(--bg2);margin:4px 0 8px}
.leaflet-popup-content-wrapper{background:var(--card);color:var(--ink);border-radius:11px;border:1px solid var(--line)}
.leaflet-popup-tip{background:var(--card)}
.leaflet-popup-content{margin:11px 13px;font-size:13px;line-height:1.5}
.leaflet-popup-content a{color:var(--gold)}
.leaflet-container{background:var(--bg2);font:inherit}
.leaflet-bar a{background:var(--card);color:var(--ink);border-color:var(--line)}
.leaflet-bar a:hover{background:color-mix(in srgb,var(--card) 88%,var(--ink) 12%)}

/* ============ place cards ============
   Rebuilt image-forward for the photo-first redesign: the photo now leads on
   its own full-width band with the open/closed state overlaid directly on it
   (the one thing that has to read at a glance), and everything else -- name,
   price, tags, why, actions -- sits quieter underneath. #list is the grid: one
   column on a phone, two from 560px, never more, so a card never gets so
   narrow the photo stops meaning anything. */
/* On a phone the feed breaks the page gutter and runs edge to edge, a continuous
   stream of photographs the way a maps or stay app does; from 560px it becomes a
   tidy rounded two-column grid where full-bleed would leave the cards too wide. */
#list{display:grid;grid-template-columns:1fr;gap:4px;margin:0 -14px}
@media(min-width:560px){#list{grid-template-columns:1fr 1fr;gap:var(--sp-6);margin:0}}

.pc{position:relative;display:flex;flex-direction:column;background:var(--card);
 border:1px solid var(--line);border-left:0;border-right:0;border-radius:0;overflow:hidden;margin:0;
 transition:border-color .18s,transform .18s}
@media(min-width:560px){.pc{border:1px solid var(--line);border-radius:18px}}
.pc:active{transform:scale(.99)}
.pc-top{border-color:var(--tint)}
.pc-top .pc-cap h3{font-size:30px}
.pc-dim{opacity:.55}

/* The photo IS the card. It fills a tall tile and the name plus the key meta sit
   on it over a dark gradient, the same visual language as the town hero (.dhero)
   and the landing. Everything under the image is secondary chrome. */
.pc-img{position:relative;width:100%;aspect-ratio:3/2;background:var(--bg2);overflow:hidden}
.pc-top .pc-img{aspect-ratio:4/3}
.pc-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.pc-img:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
 background:linear-gradient(180deg,rgba(13,11,18,0) 34%,rgba(13,11,18,.5) 62%,rgba(13,11,18,.94) 100%)}
.pc-img.pc-failed img{display:none}
.pc-glyph{background:linear-gradient(150deg,color-mix(in srgb,var(--tint) 30%,var(--bg2)),var(--bg2))}
.pc-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:0;
 font-size:52px;line-height:1;opacity:.5}
.pc-near{position:absolute;right:10px;top:10px;z-index:2;font-size:8.5px;font-weight:800;
 letter-spacing:.4px;text-transform:uppercase;background:rgba(13,11,18,.78);
 color:var(--hero-dim);padding:3px 7px;border-radius:99px}

/* The open/closed read: a fixed dark-glass chip top-left on the photo, its own
   guaranteed contrast regardless of theme (it sits on a photograph, not on the
   themed card surface). */
.pc-badge{position:absolute;left:10px;top:10px;z-index:2;font-size:10.5px;font-weight:800;
 letter-spacing:.4px;text-transform:uppercase;padding:4px 10px;border-radius:99px;
 backdrop-filter:blur(6px);background:rgba(13,11,18,.6);color:#f4eeff}
.pc-badge.b-open{background:rgba(20,46,32,.78);color:#7ee0a8}
.pc-badge.b-soon{background:rgba(51,38,18,.78);color:#ffc857}
.pc-badge.b-shut{background:rgba(51,24,28,.78);color:#ff9aa2}

/* the caption, on the image */
.pc-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:14px 14px 13px}
.pc-cap h3{margin:0;font-size:21px;line-height:1.1;letter-spacing:-.6px;
 color:var(--hero-ink);text-shadow:0 2px 18px rgba(0,0,0,.7)}
.pc-top .pc-cap h3{font-size:25px}
.pc-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:9px}
.pc-meta .tag{margin:0;text-transform:none;font-size:11px;letter-spacing:0;border-radius:99px;
 padding:3px 9px;background:rgba(13,11,18,.6);backdrop-filter:blur(6px);color:var(--hero-dim)}
.pc-meta .tag.t-unv{color:#ffce8a}
.pc-cap .pc-price{border-radius:99px;padding:3px 10px;font-size:11.5px;font-weight:800;
 background:rgba(13,11,18,.6);backdrop-filter:blur(6px);color:var(--hot)}

/* under the photo: quieter, the description and the actions */
.pc-body{padding:11px 13px 12px}
.pc-why{margin:0;font-size:12.5px;color:var(--dim);line-height:1.5;
 display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pc-warn{margin:6px 0 0;font-size:11.5px;color:var(--soft-red);line-height:1.45}
.pc-body .btns{margin-top:9px}
.pc-body .src-badge{align-self:center;margin-left:2px}

/* ============ destination hero ============
   The town's own photo is now the actual hero of the page, not a dimmed wash
   behind it: full opacity, a taller band, a gradient that goes from nearly
   clear at the top to solid only where the title/stats sit, so the photo
   still reads as a photo, not as decoration behind a dark tile. */
.dhero{position:relative;border-radius:20px;overflow:hidden;margin:2px 0 14px;
 border:1px solid var(--line);background:var(--bg2);min-height:240px;display:flex;align-items:flex-end}
.dhero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:1}
.dhero:after{content:"";position:absolute;inset:0;
 background:linear-gradient(180deg,rgba(13,11,18,.04) 0%,rgba(13,11,18,.22) 42%,rgba(13,11,18,.92) 100%)}
.dhero .in{position:relative;z-index:2;padding:20px 18px 16px;width:100%}
/* color:var(--hero-ink)/--hero-dim here, not --ink/--dim: this text sits on a
   gradient that is always dark regardless of site theme (same fixed-band
   reasoning as .land/.hero above), so it needs the theme-invariant text pair,
   not the one that goes dark-on-dark the moment someone is in light mode. */
.dhero h1{font-size:34px;margin:0 0 4px;letter-spacing:-1.1px;color:var(--hero-ink);
 text-shadow:0 2px 20px rgba(0,0,0,.65)}
.dhero .meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.dhero .m{background:rgba(13,11,18,.66);backdrop-filter:blur(6px);border:1px solid var(--line);
 border-radius:99px;padding:5px 11px;font-size:12px;font-weight:700;color:var(--hero-ink)}
.dhero .m b{color:var(--hot)}
.dcredit{font-size:10px;color:var(--dimmer);margin:-9px 0 14px;text-align:right}
@media(min-width:560px){.dhero{min-height:300px}.dhero h1{font-size:40px}}

/* ============ gallery ============ */
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:7px}
.gal a{display:block;border-radius:11px;overflow:hidden;border:1px solid var(--line);
 background:var(--bg2);position:relative;aspect-ratio:1}
.gal img{width:100%;height:100%;object-fit:cover;display:block}
.gal .cap{position:absolute;left:0;right:0;bottom:0;padding:14px 6px 5px;font-size:9.5px;
 color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.85));line-height:1.3}

/* ============ range ============ */
.rangerow{display:flex;align-items:center;gap:12px;margin:10px 0}
.rangerow input[type=range]{flex:1;accent-color:var(--hot)}
.rangerow b{font-variant-numeric:tabular-nums;color:var(--hot);min-width:62px;text-align:right}

/* ============ the plan ============ */
.btn.picked{border-color:var(--green);color:var(--green);background:var(--ok-bg)}
.btn.drop,.btn.nudge{padding:2px 8px;font-size:15px;line-height:1;border-color:transparent;color:var(--dimmer)}
.btn.drop:hover{color:var(--red);border-color:var(--warn-border)}
.btn.nudge:hover{color:var(--hot);border-color:var(--gold-border)}

.plan{position:relative;padding-left:2px}
.prow{display:flex;gap:12px;background:var(--card);border:1px solid var(--line);
 border-radius:14px;padding:var(--sp-4) var(--sp-5);margin:var(--sp-3) 0}
.prow-bad{border-color:var(--warn-border);background:var(--warn-bg)}
.ptime{flex:0 0 58px;font-variant-numeric:tabular-nums;font-weight:800;font-size:14px;
 color:var(--gold);line-height:1.25}
.ptime span{display:block;font-weight:600;font-size:11.5px;color:var(--dimmer)}
.pbody{flex:1;min-width:0}
.pname{font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.pissue{font-size:11.5px;color:var(--soft-red);margin-top:4px;line-height:1.45}

.gap{border:1px dashed var(--line);border-radius:14px;padding:var(--sp-4) var(--sp-5);margin:var(--sp-3) 0;background:var(--bg2)}
.gap-h{font-size:12.5px;font-weight:800;color:var(--hot);text-transform:uppercase;letter-spacing:.5px}
.gap-opts{display:flex;flex-wrap:wrap;gap:6px}
.gap-opts .btn{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ============ printing, which is the pdf export ============ */
@media print{
  @page{margin:14mm}
  body{background:#fff;color:#000;padding:0;font-size:11pt}
  .top,.nav,.chips,.btns,.hero,#alerts,#filter,#count,.dhero,.dcredit,
  #vList,#vMap,#vDay,#vWeather,#vLocal,.sos,.gap-opts{display:none!important}
  #vPlan{display:block!important}
  .card,.prow{border:1px solid #bbb!important;background:#fff!important;
   border-radius:6px;break-inside:avoid;page-break-inside:avoid;margin:6px 0}
  .stat{border:0!important;background:#fff!important;padding:2px 0}
  .stat .v{color:#000!important;font-size:15pt}
  .stat .k{color:#555!important}
  .ptime{color:#000!important}.ptime span{color:#555!important}
  .pissue{color:#a00!important}
  .gap{border-style:dashed;border-color:#bbb!important;background:#fafafa!important}
  .gap-h{color:#a05000!important}
  .sub,.tiny{color:#333!important}
  h1,h2,h3{color:#000!important}
  a{color:#000!important;text-decoration:none}
  .plan:before{content:"tripkit  ·  atishyy27.github.io/tripkit";display:block;
   font-size:8pt;color:#888;margin-bottom:8px}
}
.prow.journey{border-style:dashed;background:var(--bg2)}
.prow.journey .ptime{color:var(--blue)}
.prow.journey .pname{color:var(--blue);font-size:13.5px}
#towns{margin-bottom:2px}
#sortMode{margin-bottom:2px}

/* ============ landing: full-bleed photo hero ============
   The first thing anyone sees, so it carries the whole "does this look
   different" question. A real destination photograph fills the screen, three
   of them cross-fading slowly so it feels alive rather than static; the
   headline and search sit low, over a scrim, the way a premium travel app's
   opening screen does. The LQIP paints inline (see index.html) before any
   network request resolves, offline included, so there is never a blank
   band. Text tokens are the same fixed --hero-ink/--hero-dim/--hero-line as
   the rest of the "dark accent band" family (.hero, .dhero): they do not
   change with the site theme, because the photo underneath never does
   either, and that is what keeps this legible in both. */
.land{position:relative;overflow:hidden;isolation:isolate;
 min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
 padding-top:env(safe-area-inset-top);padding-bottom:34px;background:#0d0b12}
.land-hero{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;
 pointer-events:none}
.land-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
 opacity:0;transition:opacity 1.6s ease}
.land-hero-img.on{opacity:1}
.land-scrim{position:absolute;inset:0;
 background:linear-gradient(180deg,rgba(13,11,18,.55) 0%,rgba(13,11,18,.28) 26%,
   rgba(13,11,18,.46) 62%,rgba(13,11,18,.92) 100%)}
/* padding-block, not the padding shorthand: .land-in also carries .wrap, and a
   shorthand here would win the cascade (same specificity, declared later) and
   silently erase .wrap's horizontal 14px, pinning the whole hero's text to
   the screen edges. */
.land-in{position:relative;z-index:1;padding-block:26px 22px}
.land-mark{display:flex;align-items:center;gap:9px;margin-bottom:26px}
.land-mark span{font-weight:800;font-size:17px;letter-spacing:-.4px;color:var(--hero-ink)}
.land-logo .land-logo-ring{stroke:var(--hero-line)}
.land-logo .land-logo-gold{stroke:var(--gold)}
.land-logo .land-logo-hot{stroke:var(--hot)}
.land-logo .land-logo-dot{fill:var(--hot)}
.land-h{font-size:42px;line-height:1.04;letter-spacing:-1.8px;margin:0 0 12px;color:var(--hero-ink);
 text-shadow:0 4px 28px rgba(0,0,0,.45)}
.land-h em{font-style:normal;color:var(--hot)}
.land-p{color:var(--hero-dim);font-size:15.5px;line-height:1.55;margin:0 0 20px;max-width:34em;
 text-shadow:0 2px 14px rgba(0,0,0,.4)}
.land-q{font-size:17px;padding:16px 17px;border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.land-eg{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:12px}
.land-eg .chip{cursor:pointer}
.land-eg .tiny{color:var(--hero-dim)}
.land-credit{position:relative;z-index:1;margin:14px 0 0;padding:0 14px;font-size:10.5px;
 color:var(--hero-dim);text-align:right}
.land-credit a{color:var(--hero-dim);text-decoration:underline;text-decoration-color:var(--hero-line)}

/* The panel below the photo: pulled up over the hero's bottom edge with a
   rounded top and the page's own background, the "floating sheet peeking
   over a photo" look. Ordinary theme tokens from here down, because this
   part sits on the page background, not on the photo. */
.land-panel{position:relative;z-index:1;margin-top:-22px;background:var(--bg);
 border-radius:22px 22px 0 0;padding-top:20px}
.land-pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.land-pills .pill{color:var(--green);font-weight:700;font-size:11.5px}
@media(min-width:620px){.land-h{font-size:58px}.land-in{padding-block:34px 28px}}
@media(prefers-reduced-motion:reduce){.land-hero-img{transition:none}}

.feat{display:grid;grid-template-columns:1fr;gap:10px;margin-top:22px}
@media(min-width:600px){.feat{grid-template-columns:1fr 1fr}}
.feat .f{background:var(--card);border:1px solid var(--line);border-radius:15px;padding:15px 16px}
.feat .f i{font-style:normal;font-size:22px;display:block;margin-bottom:8px}
.feat .f h3{font-size:15.5px;margin:0 0 5px}
.feat .f p{color:var(--dim);font-size:13.5px;line-height:1.55;margin:0}
.sumrow{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:11px}
.sumrow>div{background:var(--bg2);border:1px solid var(--line);border-radius:11px;padding:9px 11px}
.sumrow b{display:block;font-size:16px;font-variant-numeric:tabular-nums;color:var(--cool);letter-spacing:-.3px}
.sumrow span{display:block;font-size:10.5px;color:var(--dimmer);text-transform:uppercase;
 letter-spacing:.4px;font-weight:700;margin-top:2px}
@media(min-width:520px){.sumrow{grid-template-columns:repeat(4,1fr)}}
.punknown{font-size:11.5px;color:var(--dimmer);margin-top:4px;line-height:1.45}
.daytabs{margin:0 0 8px}
.daytabs .chip[data-addday],.daytabs .chip[data-rmday]{color:var(--dimmer);border-style:dashed}
.daytabs .chip[data-rmday]:hover{color:var(--red);border-color:var(--warn-border)}
#printAll{display:none}
@media print{
  body.printing-all #vPlan{display:none!important}
  body.printing-all #printAll{display:block!important}
  .printday{font-size:14pt;margin:14px 0 6px;page-break-before:auto;color:#000!important}
  .printday:first-child{page-break-before:avoid}
}

/* ============ list row ============
   A compact horizontal row: an optional lead thumbnail, a title, a meta line,
   and an optional trailing value. Built for the distance-sorted list a later
   unit adds; min-width:0 plus ellipsis on the text pieces is what keeps a long
   name from forcing horizontal scroll at 360px. */
.list-row{display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-3) 0;
 border-bottom:1px solid var(--line)}
.list-row:last-child{border-bottom:0}
.list-row .lr-thumb{flex:0 0 44px;width:44px;height:44px;border-radius:10px;
 background:var(--bg2);overflow:hidden;display:flex;align-items:center;justify-content:center;
 font-size:18px}
.list-row .lr-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.list-row .lr-body{flex:1;min-width:0}
.list-row .lr-title{font-weight:700;font-size:var(--fs-4);white-space:nowrap;
 overflow:hidden;text-overflow:ellipsis}
.list-row .lr-meta{font-size:var(--fs-2);color:var(--dimmer);white-space:nowrap;
 overflow:hidden;text-overflow:ellipsis}
.list-row .lr-end{flex:0 0 auto;font-size:var(--fs-2);color:var(--dim);text-align:right;
 white-space:nowrap}

/* ============ section head ============
   A heading row that carries an optional count badge and an optional trailing
   action, reusing the same count-pill look h2 .n already has. */
.section-head{display:flex;align-items:center;justify-content:space-between;
 gap:var(--sp-3);margin:24px 0 var(--sp-5)}
.section-head h2{margin:0}
.section-head .sh-count{font-size:var(--fs-0);color:var(--dimmer);border:1px solid var(--line);
 border-radius:99px;padding:2px 8px;font-weight:700;flex:0 0 auto;white-space:nowrap}
.section-head .sh-action{font-size:var(--fs-2);color:var(--hot);font-weight:700;
 background:none;border:0;cursor:pointer;padding:0;font-family:inherit;flex:0 0 auto}

/* ============ state ============
   A centered block for loading / empty / error states, one variant class each.
   .state-error borrows the themed --red token so it stays readable both ways. */
.state{text-align:center;padding:var(--sp-7) var(--sp-4);color:var(--dimmer);font-size:var(--fs-3)}
.state .state-icon{font-size:28px;display:block;margin-bottom:var(--sp-3);line-height:1}
.state-loading .state-icon{display:inline-block;animation:state-spin 1s linear infinite}
.state-error{color:var(--red)}
.state-error .state-icon{color:var(--red)}
@keyframes state-spin{to{transform:rotate(360deg)}}