*{box-sizing:border-box;margin:0;padding:0;}
  /* 100dvh, NOT 100vh: on mobile, 100vh is the viewport WITHOUT the browser's address bar, so a
     bottom-pinned element (the card strip) sits below the fold and only appears in landscape when
     the bar shrinks. dvh tracks the real visible height. This one unit was the whole bug. */
  body{font-family:Arial,Helvetica,sans-serif;background:#f4f1ea;color:#33312c;
       height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden;
       -webkit-text-size-adjust:100%;}
  #header{background:#fff;border-bottom:1px solid #e0dccf;padding:6px 16px;z-index:1001;
          display:flex;align-items:center;gap:12px;white-space:nowrap;
          padding-top:calc(6px + env(safe-area-inset-top));}
  #header h1{font-size:13px;font-weight:bold;letter-spacing:0.08em;color:#2e7d32;}
  #area{font-size:12px;padding:3px 6px;border:1px solid #d8d2c2;border-radius:4px;background:#fff;color:#33312c;}
  #share-app{font-size:12px;padding:3px 8px;border:1px solid #d8d2c2;border-radius:4px;background:#fff;color:#33312c;
             cursor:pointer;font-family:inherit;white-space:nowrap;}   /* Aug08C: desktop-only share of the pretty URL */
  #share-app:hover{background:#f4ecf7;border-color:#c9bfe4;}
  #share-app.copied{color:#2e7d32;border-color:#bfe0c2;background:#f2f8f3;}
  #prov{font-size:11px;color:#8a8576;margin-left:auto;overflow:hidden;text-overflow:ellipsis;}
  #prov b{color:#2e7d32;font-weight:bold;}
  #map-wrap{position:relative;flex:1;min-height:0;}
  #map{position:absolute;inset:0;background:#e8e4d8;}

  /* the hamburger: mobile only. Desktop keeps the always-open panel it has always had. */
  #menu{display:none;position:absolute;top:10px;left:10px;z-index:6;width:44px;height:44px;
        border:1px solid #d8d2c2;border-radius:8px;background:rgba(255,255,255,.97);
        font-size:19px;line-height:1;cursor:pointer;box-shadow:0 1px 6px rgba(0,0,0,.15);color:#33312c;}
  #scrim{display:none;position:absolute;inset:0;z-index:7;background:rgba(0,0,0,.25);}

  #ctrl{position:absolute;top:10px;left:10px;z-index:8;background:rgba(255,255,255,.95);border:1px solid #d8d2c2;
        border-radius:6px;padding:8px 11px;font-size:12px;box-shadow:0 1px 6px rgba(0,0,0,.15);}
  #ctrl .row{display:flex;align-items:center;gap:6px;margin:3px 0;cursor:pointer;}
  #ctrl .hd{font-size:10px;letter-spacing:.06em;color:#8a8576;margin-bottom:4px;}
  #ctrl .sw{display:inline-block;width:14px;height:3px;border-radius:2px;flex:0 0 14px;}
  #ctrl .dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#2e7d32;flex:0 0 9px;}
  #ctrl .star{display:inline-block;width:14px;flex:0 0 14px;color:#d68a00;font-size:14px;line-height:1;text-align:center;}
  #ctrl .hx{display:inline-block;width:14px;height:9px;flex:0 0 14px;border:1px solid #8a8576;
            background:repeating-linear-gradient(45deg,#fff 0 2px,#b6b1a4 2px 3px);}
  #ctrl-x{display:none;}
  #legrow{padding:2px 0 4px;}
  #legrow.off{display:none;}
  #nlrow{padding:2px 0 4px;}
  #nlrow.off{opacity:.4;pointer-events:none;}
  #legn{width:100%;margin:3px 0 1px;accent-color:#2e7d32;}
  #legcount{font-size:10px;color:#8a8576;}

  #legend{display:none;position:absolute;bottom:10px;left:10px;z-index:5;background:rgba(255,255,255,.95);border:1px solid #d8d2c2;
          border-radius:6px;padding:8px 11px;font-size:11px;box-shadow:0 1px 6px rgba(0,0,0,.15);}
  #ramp{height:9px;width:150px;border-radius:2px;background:linear-gradient(90deg,#dcedc8,#1b5e20);margin:4px 0 3px;}
  #legend .ends{display:flex;justify-content:space-between;color:#8a8576;font-size:10px;}
  #lg-nd{display:flex;align-items:center;gap:5px;margin-top:5px;color:#8a8576;font-size:10px;}
  #lg-nd .nd-sw{width:12px;height:12px;border-radius:50%;flex:0 0 12px;background:#dcedc8;
       border:2px solid #fff;box-shadow:0 0 0 1px #b9b3a3;}

  /* admin-only controls: still in the DOM and fully wired, just hidden from visitors.
     Reveal later with document.body.classList.add('admin') behind whatever gate you build. */
  body:not(.admin) #ctrl .admin-only{display:none;}
  #lg-t:empty{display:none;}
  /* bottom-left stack: the Start-here button sits just above the legend */
  #bl-stack{position:absolute;left:10px;bottom:10px;z-index:5;display:flex;flex-direction:column;
            align-items:flex-start;gap:8px;}
  #bl-stack #legend{position:static;}
  #start-here{background:#2e7d32;color:#fff;border:none;border-radius:8px;padding:8px 14px;font-size:13px;
              font-weight:600;cursor:pointer;box-shadow:0 1px 6px rgba(0,0,0,.22);font-family:inherit;}
  #start-here:hover{background:#256428;}
  #leg-btn{background:#e0a92e;color:#3b2f00;border:none;border-radius:8px;padding:8px 14px;font-size:13px;
           font-weight:600;cursor:pointer;box-shadow:0 1px 6px rgba(0,0,0,.22);font-family:inherit;}
  #leg-btn:hover{background:#d19e28;}
  #leg-btn.on{background:#c68a12;color:#fff;}
  /* the four corner buttons read as one family: same height/font (already), plus one width padded
     to the longest label, with centred text */
  #start-here, #leg-btn, #trip-pill, #faves-pill{min-width:150px;text-align:center;box-sizing:border-box;}
  #bl-stack #legrow{width:190px;background:rgba(255,255,255,.96);border:1px solid #d8d2c2;border-radius:8px;
                    padding:8px 10px 6px;box-shadow:0 1px 6px rgba(0,0,0,.18);}
  #howto-scrim{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:1200;}
  #howto-scrim.on{display:block;}
  #howto{display:none;position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1201;
         width:min(340px,88vw);max-height:82vh;overflow:auto;background:#fff;border:1px solid #d8d2c2;
         border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,.3);padding:16px 18px;}
  #howto.open{display:block;}
  #howto h3{margin:0 0 10px;font-size:16px;color:#2e7d32;}
  #howto ul{margin:0;padding-left:18px;}
  #howto li{margin:7px 0;font-size:13px;line-height:1.45;color:#33312c;}
  #howto-x{position:absolute;top:7px;right:11px;border:none;background:none;font-size:24px;line-height:1;
           color:#999;cursor:pointer;}

  #splash{position:absolute;inset:0;z-index:1200;background:#f4f1ea;display:flex;align-items:center;justify-content:center;
          flex-direction:column;gap:10px;font-size:13px;color:#6a6555;}
  #splash .bad{color:#c0392b;max-width:460px;text-align:center;line-height:1.5;padding:0 18px;}
  .spin{width:22px;height:22px;border:3px solid #dcedc8;border-top-color:#2e7d32;border-radius:50%;animation:sp .8s linear infinite;}
  @keyframes sp{to{transform:rotate(360deg);}}
  @media (prefers-reduced-motion:reduce){.spin{animation:none;}}

  #strip{position:absolute;left:0;right:0;bottom:0;background:#fff;border-top:1px solid #d8d2c2;
         transform:translateY(100%);transition:transform .2s;z-index:1100;box-shadow:0 -2px 12px rgba(0,0,0,.12);
         padding-bottom:env(safe-area-inset-bottom);}
  #strip.open{transform:translateY(0);}
  @media (prefers-reduced-motion:reduce){#strip{transition:none;}}
  #strip-hd{display:flex;justify-content:space-between;align-items:center;padding:7px 14px 4px;font-size:11px;color:#6a6555;}
  #strip-hd b{color:#2e7d32;}
  #strip-x{cursor:pointer;color:#999;font-size:22px;line-height:1;padding:0 8px;background:none;border:none;margin-left:auto;}
  #cards-wrap{display:flex;align-items:stretch;}
  #cards{display:flex;gap:9px;overflow-x:auto;padding:6px 14px 14px;-webkit-overflow-scrolling:touch;
         flex:1 1 auto;min-width:0;}
  /* persistent (never-vanishing) card arrows — one SCREENFUL per click, inert at the ends */
  .card-nav{flex:0 0 auto;align-self:center;width:32px;height:32px;margin:0 5px;border-radius:50%;
            border:1px solid #d8d2c2;background:#fff;color:#4a473e;font-size:22px;line-height:1;
            display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;
            box-shadow:0 1px 4px rgba(0,0,0,.15);flex-shrink:0;}
  .card-nav:hover{background:#f4f2ea;}
  .card-nav.disabled{opacity:.3;pointer-events:none;cursor:default;box-shadow:none;}
  .pc{flex:0 0 212px;border:1px solid #e0dccf;border-radius:8px;padding:9px 11px;background:#fafaf7;position:relative;
      cursor:pointer;transition:border-color .15s,box-shadow .15s;}
  .pc.active{border-color:#2e7d32;box-shadow:0 0 0 2px rgba(46,125,50,0.18);}
  .pc-top{display:flex;align-items:center;gap:7px;margin-bottom:4px;padding-right:20px;}
  .pc-num{width:18px;height:18px;border-radius:50%;color:#fff;font-size:10px;font-weight:bold;
          display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .pc-nm{font-size:12.5px;font-weight:bold;color:#33312c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .pc-ct{font-size:10px;color:#9a9588;margin:2px 0 3px;}
  .pc-rt{font-size:11px;color:#4a473e;}
  .pc-rt .st{color:#d4a017;}
  .pc-nu{font-size:10.5px;color:#999;font-style:italic;}
  .pc a{font-size:10.5px;color:#2e7d32;text-decoration:none;display:inline-block;margin-top:5px;}
  .pc a:hover{text-decoration:underline;}

  /* a legendary cafe inside an exploded cluster is a GOLD STAR, not a green circle — same shape as
     it has on the map, so the two views agree. The number stays inside it: that number is what ties
     the pin to its card, and losing it would break the link. */
  .star-wrap{display:flex;align-items:center;justify-content:center;
             clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
             background:#fff;cursor:pointer;}
  .star-wrap.active{transform:scale(1.3);}
  .num-pin.leg{border:none;box-shadow:none;color:#4a2b00;font-size:10px;padding-top:5px;
               clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);}
  .pc-num.leg{border-radius:0;color:#4a2b00;font-size:9px;padding-top:3px;width:22px;height:22px;
              clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);}
  .pc.leg{border-color:#e8c07a;background:#fffdf6;}
  .pc.leg.active{border-color:#c9821a;box-shadow:0 0 0 2px rgba(201,130,26,.20);}
  .num-pin{border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:bold;
           font-size:11px;border:2px solid #fff;box-shadow:0 1px 5px rgba(0,0,0,0.35);cursor:pointer;}
  .num-pin.active{transform:scale(1.35);box-shadow:0 0 0 3px rgba(0,0,0,0.15),0 2px 8px rgba(0,0,0,0.4);}
  #pin-tooltip{position:absolute;background:#fff;border:1px solid #d8d2c2;border-radius:6px;padding:5px 9px;
               font-size:11px;pointer-events:none;display:none;z-index:1200;box-shadow:0 2px 8px rgba(0,0,0,0.2);max-width:220px;}
  .maplibregl-popup-content{font-family:Arial,Helvetica,sans-serif;font-size:12px;padding:8px 11px;}
  :focus-visible{outline:2px solid #2e7d32;outline-offset:2px;}

  /* ---- MOBILE: the panel becomes a bottom sheet behind a ☰. Desktop is untouched. ---- */
  @media (max-width:640px){
    #header{padding:6px 11px;gap:8px;}
    #prov{display:none;}                       /* the provenance line is desktop chrome */
    #menu{display:block;}
    #ctrl{top:auto;left:0;right:0;bottom:0;z-index:1300;border-radius:14px 14px 0 0;border-bottom:none;
          padding:12px 18px calc(18px + env(safe-area-inset-bottom));font-size:15px;
          background:#fff;transform:translateY(100%);transition:transform .22s;max-height:82dvh;overflow-y:auto;}
    #ctrl.open{transform:translateY(0);}
    #ctrl.open ~ #scrim, #scrim.on{display:block;}
    #scrim{z-index:1290;}
    #ctrl .row{min-height:42px;margin:0;gap:11px;}     /* thumb-sized rows, not mouse-sized */
    #ctrl .hd{font-size:12px;margin:10px 0 2px;}
    #ctrl .dot{width:13px;height:13px;flex:0 0 13px;}
    #ctrl .star{width:18px;flex:0 0 18px;font-size:18px;}
    #ctrl .hx{width:20px;height:13px;flex:0 0 20px;}
    #ctrl .sw{width:20px;height:4px;flex:0 0 20px;}
    #ctrl input[type=checkbox]{width:20px;height:20px;accent-color:#2e7d32;}
    #ctrl-x{display:block;position:absolute;top:8px;right:14px;background:none;border:none;
            font-size:26px;line-height:1;color:#bbb;cursor:pointer;}
    #legn{height:26px;}
    #legcount{font-size:13px;}
    #legend{display:none;}   /* hidden on mobile — the ramp is explained in the "Start here" how-to */
    #ramp{width:100%;height:12px;}
    #legend .ends{font-size:12px;}
    #cards{padding:8px 12px 16px;scroll-snap-type:x mandatory;}
    .pc{flex:0 0 78vw;scroll-snap-align:center;padding:12px 14px;}
    .pc-nm{font-size:15px;}
    .pc-ct{font-size:12px;}
    .pc-rt{font-size:13px;}
    .pc-nu{font-size:12px;}
    .pc a{font-size:13px;padding:4px 0;}
    .pc-num{width:22px;height:22px;font-size:12px;}
    #strip-hd{font-size:13px;padding:9px 14px 4px;}
  }
  /* the pin tooltip is a hover affordance; on touch it can never fire, so don't reserve it */
  @media (hover:none){#pin-tooltip{display:none !important;}}
  /* ===== TRIP PLANNER + floating night-lights slider (July16D) ===== */
  .hidden{display:none !important;}
  #br-stack{position:absolute;right:10px;bottom:10px;z-index:1101;display:flex;flex-direction:column;
            align-items:flex-end;gap:8px;pointer-events:none;transition:bottom .2s;}
  #br-stack > *{pointer-events:auto;}
  body.strip-open #br-stack{bottom:calc(var(--strip-h,0px) + 10px);}

  /* the floating VIIRS opacity slider — mobile only, only while the layer is on (panel has the other) */
  #nl-op-float{display:none;align-items:center;gap:8px;background:rgba(255,255,255,.95);
               border:1px solid #d8d2c2;border-radius:20px;padding:7px 13px;box-shadow:0 1px 6px rgba(0,0,0,.15);}
  #nl-op-float .nlf-ic{font-size:14px;color:#c9a227;line-height:1;}
  #nl-op-float input[type=range]{width:120px;accent-color:#c9a227;height:24px;}

  /* the trip box */
  #trip{background:rgba(255,255,255,.97);border:1px solid #d8d2c2;border-radius:10px;
        box-shadow:0 1px 8px rgba(0,0,0,.18);width:230px;max-width:78vw;overflow:hidden;font-size:12px;}
  #trip-hd{display:flex;align-items:center;justify-content:space-between;
           background:#f3effa;border-bottom:1px solid #e5def5;padding:7px 11px;}
  #trip-hd #trip-title{font-weight:700;color:#5b21b6;letter-spacing:.02em;}
  #trip-collapse{background:none;border:none;color:#7c3aed;font-size:22px;line-height:1;cursor:pointer;padding:2px 12px;min-width:40px;}
  #trip-body{padding:6px 10px 10px;}
  #trip-list{list-style:none;margin:2px 0 6px;padding:0;max-height:34vh;overflow-y:auto;}
  #trip-list li{display:flex;align-items:center;gap:7px;padding:4px 0;border-bottom:1px solid #f0ecf7;}
  #trip-list li:last-child{border-bottom:none;}
  #trip-list .tl-n{flex:0 0 20px;width:20px;height:20px;border-radius:50%;background:#7c3aed;color:#fff;
                   font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;cursor:pointer;}
  #trip-list .tl-n:hover{background:#6d28d9;}
  #trip-list .tl-nm{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#33312c;}
  #trip-list .tl-ctrl{flex:0 0 auto;display:flex;align-items:center;gap:2px;}
  #trip-list .tl-ctrl button{background:none;border:none;cursor:pointer;color:#8a8576;font-size:12px;
                             line-height:1;padding:3px;border-radius:4px;}
  #trip-list .tl-ctrl button:hover{background:#f0ecf7;color:#5b21b6;}
  #trip-list .tl-ctrl button:disabled{opacity:.25;cursor:default;background:none;}
  #trip-list .tl-x{font-size:15px !important;color:#b0a9a0 !important;}
  #trip-list .tl-x:hover{color:#c0392b !important;background:none !important;}
  #trip-loop-row{display:flex;align-items:center;gap:7px;margin:2px 0 8px;color:#4a473e;cursor:pointer;}
  #trip-loop-row input{width:15px;height:15px;accent-color:#7c3aed;}
  #trip-actions{display:flex;gap:7px;align-items:center;}
  #trip-clear{flex:0 0 auto;background:none;border:1px solid #d8d2c2;border-radius:6px;color:#8a8576;
              font-size:11px;padding:6px 9px;cursor:pointer;font-family:inherit;}
  #trip-clear:hover{border-color:#c0392b;color:#c0392b;}
  #trip-go{flex:1 1 auto;background:#7c3aed;color:#fff;border:none;border-radius:6px;padding:7px 8px;
           font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;}
  #trip-go:hover{background:#6d28d9;}
  #trip-go:disabled{background:#c9bfe4;cursor:default;}
  #trip-hint{font-size:10.5px;color:#8a8576;margin-top:6px;line-height:1.35;}
  #trip-hint:empty{display:none;}
  #trip-pill{display:none;background:#7c3aed;color:#fff;border:none;border-radius:8px;padding:8px 14px;
             font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;box-shadow:0 1px 8px rgba(0,0,0,.2);}
  #trip.collapsed{background:none;border:none;box-shadow:none;width:auto;}
  #trip.collapsed #trip-hd,#trip.collapsed #trip-body{display:none;}
  #trip.collapsed #trip-pill{display:block;}
  #trip-empty{font-size:11.5px;color:#6a6555;line-height:1.45;padding:2px 0 1px;}
  #trip.empty #trip-list,#trip.empty #trip-loop-row,#trip.empty #trip-actions,#trip.empty #trip-hint{display:none;}
  #trip:not(.empty) #trip-empty{display:none;}
  #trip-share{display:block;width:100%;margin-top:7px;background:none;border:1px solid #d8d2c2;border-radius:6px;
              color:#7c3aed;font-size:11.5px;font-weight:600;padding:7px;cursor:pointer;font-family:inherit;}
  #trip-share:hover{background:#f0ecf7;border-color:#c9bfe4;}
  #trip.empty #trip-share{display:none;}
  #faves-clear{display:block;width:100%;margin-top:6px;background:none;border:1px solid #f0d9e0;border-radius:6px;
               color:#b0356a;font-size:11px;font-weight:600;padding:6px;cursor:pointer;font-family:inherit;}
  #faves-clear:hover{background:#fbeef2;border-color:#e6b8c6;}

  /* the add-to-trip button in the card-strip header */
  #trip-add{background:#7c3aed;color:#fff;border:none;border-radius:6px;padding:5px 11px;font-size:11px;
            font-weight:600;cursor:pointer;font-family:inherit;margin-right:6px;}
  #trip-add:hover{background:#6d28d9;}
  #trip-add.in{background:#ede7fa;color:#5b21b6;}

  /* the right-click / long-press popup button */
  .trip-pop-btn{margin-top:6px;background:#7c3aed;color:#fff;border:none;border-radius:6px;padding:6px 12px;
                font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;}
  .trip-pop-btn:hover{background:#6d28d9;}
  .trip-pop-btn.rm{background:#fff;color:#c0392b;border:1px solid #e2b6b0;}
  .trip-pop-btn:disabled{background:#ddd;color:#888;cursor:default;}

  /* ===== FAVORITES (saved places) — the heart is ONE reusable control; the panel mirrors the trip box ===== */
  .heart{background:none;border:none;cursor:pointer;color:#e0245e;font-size:22px;line-height:1;padding:2px 3px;
         flex:0 0 auto;transition:transform .12s;font-family:inherit;}
  .heart:hover{transform:scale(1.15);}
  .heart.heart-lbl{font-size:14px;font-weight:600;margin-top:6px;}
  .pc-heart{position:absolute;top:4px;right:6px;font-size:24px;z-index:2;}
  #strip-heart{font-size:25px;margin-left:10px;margin-right:2px;}
  /* saved-place hearts ON the map: HTML markers (reliable fonts), red with a white halo, click-through */
  .fave-map-heart{color:#e0245e;font-size:19px;line-height:1;pointer-events:none;
                  text-shadow:0 0 2px #fff,0 0 2px #fff,0 0 3px #fff,0 1px 1px rgba(0,0,0,.35);}
  #faves{background:rgba(255,255,255,.97);border:1px solid #d8d2c2;border-radius:10px;
         box-shadow:0 1px 8px rgba(0,0,0,.18);width:230px;max-width:78vw;overflow:hidden;font-size:12px;}
  #faves-hd{display:flex;align-items:center;justify-content:space-between;
            background:#fbeef2;border-bottom:1px solid #f3d9e2;padding:7px 11px;}
  #faves-hd #faves-title{font-weight:700;color:#c0355e;letter-spacing:.02em;}
  #faves-collapse{background:none;border:none;color:#d64d75;font-size:22px;line-height:1;cursor:pointer;padding:2px 12px;min-width:40px;}
  #faves-body{padding:6px 10px 10px;}
  #faves-list{list-style:none;margin:2px 0 2px;padding:0;max-height:34vh;overflow-y:auto;}
  #faves-list li{display:flex;align-items:center;gap:6px;padding:4px 0;border-bottom:1px solid #f4ecef;}
  #faves-list li:last-child{border-bottom:none;}
  #faves-list .fv-nm{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
                     color:#33312c;cursor:pointer;}
  #faves-list .fv-nm:hover{color:#c0355e;}
  #faves-list .fv-kind{color:#b3aca2;font-size:10px;}
  #faves-list .fv-route{flex:0 0 auto;background:none;border:1px solid #d8d2c2;border-radius:6px;color:#7c3aed;
                        font-size:10.5px;font-weight:600;padding:3px 7px;cursor:pointer;font-family:inherit;}
  #faves-list .fv-route:hover{background:#f0ecf7;}
  #faves-list .fv-route.in{background:#ede7fa;border-color:#cbb9f0;}
  #faves-pill{display:none;background:#e0245e;color:#fff;border:none;border-radius:8px;padding:8px 14px;
              font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;box-shadow:0 1px 8px rgba(0,0,0,.2);}
  #faves.collapsed{background:none;border:none;box-shadow:none;width:auto;}
  #faves.collapsed #faves-hd,#faves.collapsed #faves-body{display:none;}
  #faves.collapsed #faves-pill{display:block;}
  #faves-empty{font-size:11.5px;color:#6a6555;line-height:1.45;padding:2px 0 3px;}   /* Aug08A: shown when nothing is saved yet */
  #faves.empty #faves-list,#faves.empty #faves-clear,#faves.empty #faves-share{display:none;}
  #faves:not(.empty) #faves-empty{display:none;}
  #faves-share{display:block;width:100%;margin-top:7px;background:none;border:1px solid #d8d2c2;border-radius:6px;
               color:#7c3aed;font-size:11.5px;font-weight:600;padding:7px;cursor:pointer;font-family:inherit;}   /* Aug08C */
  #faves-share:hover{background:#f0ecf7;border-color:#c9bfe4;}

  @media (max-width:640px){
    #nl-op-float.on{display:flex;}
    #trip{max-width:70vw;}
    #faves{max-width:70vw;}
    #start-here, #leg-btn, #trip-pill, #faves-pill{padding:11px 17px;font-size:14px;min-width:160px;}
  }

  /* ===== TOWN SEARCH + card add-to-trip + trip distance (July28A) ===== */
  /* the header carries a z-index but no position, so it was inert: giving it position makes the
     search dropdown paint over the map instead of under it. Nothing else in the header overlaps. */
  #header{position:relative;}
  #search-wrap{position:relative;flex:1 1 140px;min-width:0;max-width:240px;}
  #town-search{width:100%;font-family:inherit;font-size:12px;line-height:1.3;padding:5px 24px 5px 9px;
               border:1px solid #d8d2c2;border-radius:6px;background:#fff;color:#33312c;}
  #town-search::placeholder{color:#a8a294;}
  #search-clear{position:absolute;top:50%;right:4px;transform:translateY(-50%);border:none;background:none;
                color:#a8a294;font-size:17px;line-height:1;cursor:pointer;padding:2px 4px;display:none;}
  #search-clear:hover{color:#6a6555;}
  #search-wrap.has-text #search-clear{display:block;}
  #search-results{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:1500;max-height:60vh;
                  overflow-y:auto;background:#fff;border:1px solid #d8d2c2;border-radius:8px;
                  box-shadow:0 4px 16px rgba(0,0,0,.18);padding:4px;display:none;}
  #search-results.open{display:block;}
  .sr-row{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:6px;cursor:pointer;}
  .sr-row:hover,.sr-row.sel{background:#eef4ec;}
  .sr-ic{flex:0 0 16px;width:16px;text-align:center;font-size:12px;line-height:1;}
  .sr-ic.town{color:#2e7d32;}
  .sr-ic.cafe{color:#7c3aed;}
  .sr-tx{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;}
  .sr-nm{font-size:12.5px;color:#33312c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .sr-sub{font-size:10.5px;color:#9a9588;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .sr-none{padding:9px 10px;font-size:12px;color:#9a9588;}

  /* the visible per-card "+" — the discoverable twin of right-click / long-press */
  .pc-add{position:absolute;bottom:6px;right:6px;width:24px;height:24px;border-radius:6px;border:none;
          background:#7c3aed;color:#fff;font-size:16px;line-height:1;cursor:pointer;font-family:inherit;
          display:flex;align-items:center;justify-content:center;padding:0;z-index:2;box-shadow:0 1px 3px rgba(0,0,0,.22);}
  .pc-add:hover{background:#6d28d9;}
  .pc-add.in{background:#ede7fa;color:#5b21b6;box-shadow:none;}
  .pc-add:disabled{background:#ded9cc;color:#9a9588;cursor:default;box-shadow:none;}

  /* straight-line trip length, shown once there are two stops */
  #trip-dist{font-size:11px;color:#6a6555;margin:0 0 8px;}
  #trip-dist:empty{display:none;}

  @media (max-width:640px){
    #search-wrap{flex:1 1 90px;max-width:none;}
    #share-app{display:none;}   /* Aug08C: desktop-only — phones have a native share affordance */
    #town-search{font-size:16px;padding:6px 26px 6px 9px;}   /* 16px keeps iOS from zooming on focus */
    #search-results{max-height:56vh;}
    .sr-row{padding:9px 8px;}
    .pc-add{width:28px;height:28px;font-size:18px;bottom:8px;right:8px;}
  }

  /* ===== July28B: darker trip-box text on small screens — the muted greys were hard to read ===== */
  @media (max-width:640px){
    #trip-list .tl-nm{color:#2a2823;}
    #trip-list .tl-ctrl button{color:#3a382f;}     /* the ▲ ▼ move arrows */
    #trip-list .tl-x{color:#3a382f !important;}     /* the × remove */
    #trip-loop-row{color:#33312c;}
    #trip-clear{color:#4a473e;}
    #trip-hint{color:#4a473e;}
    #trip-dist{color:#4a473e;}
    #trip-empty{color:#33312c;}
    #faves-empty{color:#33312c;}
  }
  /* ===== CAMPFINDER camps layer (additive) — tent markers + popup internals ===== */
  .cf-marker{cursor:pointer}
  .cf-tent{position:relative;display:inline-block;line-height:0;filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.45))}
  .cf-tent .badge{position:absolute;width:15px;height:15px;border-radius:50%;font-size:10px;line-height:15px;text-align:center;color:#fff;border:1.5px solid #fff;font-weight:bold}
  .cf-tent .heart{top:-4px;right:-4px;background:#d64545}
  .pp-top{display:flex;align-items:center;gap:7px}
  .pp-heart{cursor:pointer;font-size:17px;color:#c9a24a;line-height:1;user-select:none;flex:0 0 auto}
  .pp-heart.on{color:#d64545}
  .pp-nm{font-weight:bold;font-size:13px;color:#33312c}
  .pp-sub{font-size:11px;color:#8a8576;margin-top:2px;text-transform:capitalize}
  .pp-stayed{color:#c77d0a;font-weight:bold}
  .pp-btns{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
  .pp-btns a{flex:1 1 46%;text-align:center;text-decoration:none;font-size:12px;font-weight:bold;padding:7px 8px;border-radius:6px;white-space:nowrap}
  .pp-resv{background:#2e7d32;color:#fff;border:1px solid #2e7d32}
  .pp-resv:hover{background:#1b5e20}
  .pp-info{background:#fff;color:#2e7d32;border:1px solid #cfe3cf}
  .pp-info:hover{background:#f2f7f2}
  .pp-maps{background:#1a73e8;color:#fff;border:1px solid #1a73e8}      /* Google-blue Directions */
  .pp-maps:hover{background:#1560c4}
  .pp-rating{font-size:12px;color:#c77d0a;font-weight:bold;margin-top:3px}   /* gold star, matches "stayed here" */
  .pp-rating .pp-nu{color:#8a8576;font-weight:normal}
  .pp-note{font-size:11.5px;color:#4a463d;margin-top:8px;line-height:1.35}
  .pp-note2{font-size:11.5px;color:#4a463d;margin-top:4px;line-height:1.35}