:root{
  --bg:#f7f5f2; --card:#ffffff; --ink:#1c1c1e; --muted:#6b6b70;
  --line:#e7e3dd; --accent:#c2362f; --accent2:#1f6f5c; --chip:#f0ece6;
  --shadow:0 1px 3px rgba(0,0,0,.06),0 6px 18px rgba(0,0,0,.05);
  --r:14px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Hiragino Sans","Noto Sans JP",sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
.hidden{display:none !important}

/* ---------- password gate ---------- */
#gate{
  position:fixed; inset:0; z-index:1000; background:#1c1c1e;
  display:flex; align-items:center; justify-content:center; padding:24px;
}
#gate .box{ background:#fff; border-radius:18px; padding:28px 26px; width:100%; max-width:340px; text-align:center; box-shadow:var(--shadow)}
#gate h1{ font-size:20px; margin:0 0 4px }
#gate p{ color:var(--muted); font-size:13px; margin:0 0 18px }
#gate input{ width:100%; padding:13px 14px; font-size:16px; border:1px solid var(--line); border-radius:11px; margin-bottom:12px }
#gate button{ width:100%; padding:13px; font-size:15px; font-weight:600; color:#fff; background:var(--accent); border:none; border-radius:11px; cursor:pointer }
#gate .err{ color:var(--accent); font-size:13px; height:16px; margin-top:6px }
.dot{color:var(--accent)}

/* ---------- header ---------- */
header.top{
  position:sticky; top:0; z-index:50; background:rgba(247,245,242,.92);
  backdrop-filter:saturate(1.4) blur(8px); border-bottom:1px solid var(--line);
}
.top .inner{ max-width:1320px; margin:0 auto; padding:14px 16px 0 }
.top h1{ font-size:20px; margin:0; letter-spacing:.2px }
.top .sub{ color:var(--muted); font-size:13px; margin:2px 0 10px }
.flights{ display:flex; flex-wrap:wrap; gap:6px 16px; font-size:12px; color:var(--muted); margin:-4px 0 10px }
.flights b{ color:var(--ink); font-weight:600 }

/* tabs */
.tabs{ display:flex; gap:4px }
.tabs button{
  appearance:none; border:none; background:none; padding:9px 14px; font-size:14px; font-weight:600;
  color:var(--muted); cursor:pointer; border-bottom:2px solid transparent;
}
.tabs button.active{ color:var(--accent); border-color:var(--accent) }

/* controls */
.controls{ max-width:1320px; margin:0 auto; padding:12px 16px 0; display:flex; flex-wrap:wrap; gap:8px; align-items:center }
.controls input[type=search]{ flex:1 1 180px; min-width:140px; padding:9px 12px; border:1px solid var(--line); border-radius:10px; font-size:14px; background:#fff }
.mealchips{ display:flex; flex-wrap:wrap; gap:6px }
.chip{ font-size:12px; padding:6px 11px; border:1px solid var(--line); background:#fff; border-radius:999px; cursor:pointer; color:var(--muted); user-select:none }
.chip.on{ background:var(--ink); color:#fff; border-color:var(--ink) }
.toggle{ font-size:12.5px; color:var(--muted); display:flex; align-items:center; gap:6px; cursor:pointer }
.progress{ font-size:12.5px; color:var(--muted) }
.progress b{ color:var(--accent2) }

/* split layout (desktop): list left, sticky map right */
.layout{ max-width:1320px; margin:0 auto; padding:8px 16px 50px; display:flex; gap:18px; align-items:flex-start }
.sheet{ flex:1 1 0; min-width:0 }
.sheet-handle{ display:none }
.mappane{ position:sticky; top:150px; flex:0 0 46%; max-width:600px; align-self:flex-start }

/* mobile: full-screen map behind, draggable list sheet in front */
@media(max-width:820px){
  .layout{ display:block; padding:0; max-width:none; gap:0 }
  .mappane{ position:fixed; left:0; right:0; top:var(--mtop,160px); bottom:0; width:auto; max-width:none; margin:0; padding:0; z-index:1 }
  .mappane .mapbar{ position:absolute; top:8px; left:8px; right:8px; z-index:2; margin:0; padding:7px 9px;
                    background:rgba(247,245,242,.95); border-radius:12px; box-shadow:var(--shadow); justify-content:flex-start }
  #map{ position:relative; width:100%; min-height:0; border:none; border-radius:0; box-shadow:none }

  .sheet{ position:fixed; left:0; right:0; top:var(--mtop,160px); bottom:0; z-index:20; display:flex; flex-direction:column;
          background:var(--bg); border-radius:18px 18px 0 0; box-shadow:0 -8px 24px rgba(0,0,0,.22);
          transform:translateY(62%); transition:transform .3s cubic-bezier(.32,.72,0,1) }
  .sheet.dragging{ transition:none }
  .sheet-handle{ display:flex; flex:0 0 auto; flex-direction:column; align-items:center; gap:3px;
                 padding:9px 0 8px; cursor:grab; user-select:none; touch-action:none }
  .sheet-handle .bar{ width:44px; height:5px; border-radius:3px; background:#cdc8c0 }
  .sheet-handle .lbl{ font-size:11px; color:var(--muted); font-weight:600 }
  #main{ flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; padding:2px 14px 40px }
}

/* ---------- section + group headers ---------- */
.sec-h{ font-size:13px; text-transform:uppercase; letter-spacing:.8px; color:var(--muted); margin:22px 4px 8px; font-weight:700 }
.grp-h{ display:flex; align-items:baseline; gap:8px; margin:18px 4px 8px }
.grp-h .city{ font-size:17px; font-weight:700 }
.grp-h .area{ font-size:13px; color:var(--muted) }

/* by-hotel groups */
.hotelgroup{ margin:6px 0 22px }
.hotelgroup .card.hotel{ margin-bottom:10px }
.hnum{ background:var(--accent); color:#fff; font-size:11px; font-weight:800; padding:1px 7px; border-radius:6px; vertical-align:middle; margin-right:4px }
.card.noteonly{ background:#fff6ea; border-style:dashed; box-shadow:none }
.card.noteonly .name{ font-size:13px; font-weight:600; color:#8a5a12 }

/* near me */
.nearbar{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:14px 2px 6px }
.nearbtn{ font-size:14px; font-weight:700; padding:11px 16px; border:none; border-radius:11px; background:#1666c4; color:#fff; cursor:pointer }
.nearstatus{ font-size:12.5px; color:var(--muted) }
.mapfocus .locate{ background:#1666c4; color:#fff; border-color:#1666c4 }
.mapfocus .toilet{ background:#0d9488; border-color:#0d9488 }

/* Megan mode toggle */
.megan-toggle{ font-size:12.5px; font-weight:700; padding:7px 12px; border:1px solid #e6b3c8; background:#fff; color:#b0407a; border-radius:999px; cursor:pointer }
.megan-toggle.on{ background:#c2366b; color:#fff; border-color:#c2366b }

/* shop cards + pins */
.shop-badge{ background:#fbe6ef; color:#c2366b }
.day-shops{ padding:4px 12px 14px; border-top:1px dashed var(--line); margin-top:4px; background:#fdf7fa }
.shop-sec-h{ font-size:12px; text-transform:uppercase; letter-spacing:.6px; color:#c2366b; font-weight:700; margin:10px 4px 8px }
.card.shopcard{ border-left:3px solid #c2366b }
.shoppin{ font-size:18px; line-height:1; text-align:center; filter:drop-shadow(0 1px 2px rgba(0,0,0,.45)); background:none !important; border:none !important }
.shoppin.mk-hl{ transform:scale(1.35); z-index:1000 !important }

/* ---------- cards ---------- */
.cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:12px }
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:13px 14px;
  box-shadow:var(--shadow); display:flex; flex-direction:column; gap:8px; position:relative;
}
.card.checked{ opacity:.55 }
.card.checked .name{ text-decoration:line-through }
.card .row1{ display:flex; align-items:flex-start; gap:10px }
.chkwrap{ flex:0 0 auto; padding-top:2px }
.chkwrap input{ width:20px; height:20px; accent-color:var(--accent2); cursor:pointer }
.card .name{ font-size:15.5px; font-weight:700; line-height:1.25 }
.card .tag{ font-size:12px; color:var(--accent2); font-weight:600; margin-top:1px }
.meal-badge{ position:absolute; top:12px; right:12px; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; padding:3px 7px; border-radius:6px; background:var(--chip); color:var(--muted) }
.meal-breakfast{ background:#fff3e0; color:#b26a00 }
.meal-lunch{ background:#e8f3ff; color:#1666c4 }
.meal-dinner{ background:#f3e9ff; color:#7b3fb5 }
.meal-snack{ background:#fdeaf0; color:#c2366b }
.meal-anytime{ background:#eef3ee; color:#3a7a4f }
.meal-attraction{ background:#eceae6; color:#6b6b70 }

.best{ font-size:13px; color:#7a4b00; background:#fff6e6; border:1px solid #f3e3c2; border-radius:8px; padding:5px 9px; width:fit-content; font-weight:600 }
.pbest{ font-size:12.5px; color:#7a4b00; font-weight:600; margin:2px 0 4px }
.btn.photos{ background:#fff; color:var(--ink) }
.meta{ font-size:12.5px; color:var(--muted); display:flex; flex-direction:column; gap:3px }
.meta .l{ display:flex; gap:7px }
.meta .l .k{ flex:0 0 16px; text-align:center }
.meta .closed{ color:var(--accent); font-weight:600 }
.note{ font-size:12px; color:var(--muted); font-style:italic; border-top:1px dashed var(--line); padding-top:7px }
.flagwarn{ color:var(--accent); font-style:normal; font-weight:600 }

.dist{ font-size:12px; color:var(--ink); background:var(--chip); border-radius:8px; padding:5px 9px; display:inline-flex; gap:6px; align-items:center; width:fit-content }
.resv{ font-size:11px; font-weight:700; padding:2px 7px; border-radius:6px; width:fit-content }
.resv-required{ background:#fde7e6; color:var(--accent) }
.resv-recommended{ background:#fff3e0; color:#b26a00 }

.actions{ display:flex; gap:8px; margin-top:2px }
.btn{ flex:1; text-align:center; text-decoration:none; font-size:13px; font-weight:600; padding:9px; border-radius:10px; border:1px solid var(--line); background:#fff; cursor:pointer }
.btn.nav{ background:var(--accent2); color:#fff; border-color:var(--accent2) }
.btn.pdf{ background:#fff; color:var(--ink) }

/* hotel cards */
.hotel{ border-left:4px solid var(--accent) }
.hotel .dates{ font-size:12.5px; color:var(--ink); font-weight:600 }
.hotel .nights{ color:var(--muted); font-weight:400 }

/* day view */
.day{ background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); margin-bottom:14px; overflow:hidden }
.day .dhead{ padding:13px 15px; border-bottom:1px solid var(--line); background:#fbfaf8 }
.day .dhead .d1{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap }
.day .dhead .date{ font-size:15px; font-weight:700 }
.day .dhead .htl{ font-size:12px; color:var(--muted) }
.day .dhead .title{ font-size:13px; color:var(--accent2); font-weight:600; margin-top:2px }
.day .dhead .dnote{ font-size:12px; color:var(--muted); margin-top:5px; background:#fff6ea; border-radius:8px; padding:6px 9px }
.ticketbar{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px }
.tkt{ font-size:13px; font-weight:700; padding:10px 14px; border-radius:10px; text-decoration:none; border:1px solid var(--line); background:#fff; color:var(--ink) }
.tkt.express{ background:#ff7a00; color:#fff; border-color:#ff7a00; box-shadow:0 2px 8px rgba(255,122,0,.35) }
.tkt.express:hover{ background:#e96f00 }
.tkt.entry{ background:#fff; color:var(--ink) }
.day .ditems{ padding:10px 12px; display:flex; flex-direction:column; gap:9px }
.slot{ display:flex; gap:10px; align-items:flex-start }
.slot .when{ flex:0 0 78px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); padding-top:11px }
.slot .mini{ flex:1 }
/* ---------- map ---------- */
.mapbar{ display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; justify-content:space-between; margin-bottom:8px }
.mapfocus{ display:flex; gap:6px }
.mapfocus button{ font-size:13px; font-weight:600; padding:6px 13px; border:1px solid var(--line); background:#fff; border-radius:999px; cursor:pointer; color:var(--ink) }
.mapfocus button.on{ background:var(--ink); color:#fff; border-color:var(--ink) }
.maplegend{ display:flex; flex-wrap:wrap; gap:5px 11px; font-size:11px; color:var(--muted) }
.maplegend span{ display:inline-flex; align-items:center; gap:5px }
.maplegend i{ width:11px; height:11px; border-radius:50%; display:inline-block; border:1.5px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.15); font-style:normal }
.maplegend i.lg-hotel{ width:auto; height:auto; border:none; box-shadow:none; font-size:13px }
#map{ height:70vh; min-height:360px; border-radius:var(--r); border:1px solid var(--line); box-shadow:var(--shadow); z-index:0 }
/* distinct hotel marker */
.hotelpin{ background:var(--accent) !important; color:#fff !important; border:2px solid #fff !important;
  border-radius:8px; box-shadow:0 1px 5px rgba(0,0,0,.45); font-weight:800; font-size:11.5px;
  display:flex; align-items:center; justify-content:center; gap:2px; line-height:1; }
.hotelpin.mk-hl{ outline:3px solid rgba(28,28,30,.55); transform:scale(1.18); z-index:1000 !important }
.leaflet-marker-icon.hotelpin{ width:auto; }
.leaflet-popup-content{ margin:11px 13px; font-family:inherit }
.pop .pname{ font-size:14.5px; font-weight:700; line-height:1.25 }
.pop .ptag{ font-size:12px; color:var(--accent2); font-weight:600; margin:1px 0 5px }
.pop .pmeta{ font-size:12px; color:var(--muted); margin-bottom:2px }
.pop .pmeta .closed{ color:var(--accent); font-weight:600 }
.pop .pact{ display:flex; gap:8px; margin-top:8px }
.pop .pact a, .pop .pact button{ font-size:12.5px; font-weight:600; padding:6px 10px; border-radius:9px; text-decoration:none; border:1px solid var(--line); background:#fff; color:var(--ink); cursor:pointer }
.pop .pact a.nav{ background:var(--accent2); color:#fff; border-color:var(--accent2) }
.mk-done{ filter:grayscale(1); opacity:.5 }

footer{ text-align:center; color:var(--muted); font-size:11.5px; padding:24px 16px 40px }
@media(max-width:520px){
  .cards{ grid-template-columns:1fr }
  .slot .when{ flex-basis:64px }
}
/* ---------- mobile optimisation ---------- */
@media(max-width:600px){
  .top .inner{ padding:10px 12px 0 }
  .top h1{ font-size:18px }
  .top .sub{ font-size:12px; margin:1px 0 8px }
  .flights{ display:none }                 /* flights kept in PDFs/day view; save vertical space */
  .tabs button{ padding:8px 11px; font-size:13.5px }
  .controls{ padding:8px 12px 0; gap:7px }
  .controls input[type=search]{ flex-basis:100%; order:-1 }
  .mealchips{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; gap:6px; padding-bottom:2px }
  .mealchips .chip{ flex:0 0 auto }
  .mapbar{ gap:6px 10px }
  .btn{ padding:11px }                       /* bigger tap targets */
  .chkwrap input{ width:22px; height:22px }
  footer{ padding:18px 14px 30px }
}

/* sticky day headers on mobile — placed AFTER the base .day rules so it wins the cascade */
@media(max-width:820px){
  #main .day{ overflow:visible }
  #main .day .dhead{ position:sticky; top:0; z-index:5; border-radius:14px 14px 0 0;
                     box-shadow:0 3px 6px -4px rgba(0,0,0,.3) }
}