/* ═══════════════════════════════════════════════════════════
   GUIDA — Piémont & Ligurie v3
   Renaissance Italian palette · Material Design 3 · 8dp grid
   Dark mode only · Mobile first
   ═══════════════════════════════════════════════════════════ */
:root{
  --bg:#0F0D0A;--surface:#1C1814;--surface-v:#262019;--surface-b:#302920;
  --outline:#4A3F32;--outline-v:#3A3228;
  --pri:#D4AF37;--pri-dim:#A68A2A;--pri-ctr:#352D14;--on-pri:#1A1400;
  --sec:#C4636A;--sec-dim:#9B4049;--sec-ctr:#3B1C20;
  --ter:#7BAE7B;--ter-dim:#5A8A5A;--ter-ctr:#1E3320;
  --txt:#EDE5D8;--txt2:#B5AA98;--txt3:#847A6C;
  --err:#E07070;--err-ctr:#3D2020;
  --el1:#201C16;--el2:#272118;--el3:#2E271E;
  --r-sm:8px;--r-md:12px;--r-lg:16px;
  --serif:'Palatino Linotype','Book Antiqua',Palatino,Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{margin:0;padding:0;}
body{background:var(--bg);color:var(--txt);font-family:var(--sans);font-size:14px;line-height:1.5;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;padding-bottom:72px;}
img,svg{max-width:100%;}
a{color:var(--pri);text-decoration:none;}
a:active{opacity:.7;}

/* Icons */
.i{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-4px;flex-shrink:0;}
.i-sm{width:16px;height:16px;vertical-align:-3px;}
.i-lg{width:24px;height:24px;vertical-align:-5px;}

.wrap{max-width:600px;margin:0 auto;padding:0 16px;}

/* ── Back button ── */
.back{
  display:inline-flex;align-items:center;gap:4px;
  color:var(--pri);font-size:13px;font-weight:600;
  background:none;border:none;cursor:pointer;padding:0;margin:0 0 8px;
  font-family:var(--sans);-webkit-tap-highlight-color:transparent;
}
.back:active{opacity:.6;}

/* ── Bottom nav ── */
nav.bnav{position:fixed;bottom:0;left:0;right:0;z-index:50;background:var(--el2);border-top:1px solid var(--outline-v);display:flex;height:64px;padding:0 0 env(safe-area-inset-bottom);}
nav.bnav button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:none;border:none;cursor:pointer;color:var(--txt3);font-family:var(--sans);font-size:10px;font-weight:500;letter-spacing:.04em;padding:0 4px;position:relative;-webkit-tap-highlight-color:transparent;}
nav.bnav button .i{transition:color .15s;}
nav.bnav button.active{color:var(--pri);}
nav.bnav button.active::before{content:'';position:absolute;top:8px;width:48px;height:28px;border-radius:14px;background:var(--pri-ctr);z-index:-1;}

/* ── Views ── */
.view{display:none;animation:vIn .2s ease;}
.view.active{display:block;}
@keyframes vIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

/* ── Page header ── */
.ph{padding:16px 0 8px;}
.ph h1{font-family:var(--serif);font-size:24px;line-height:1.2;font-weight:400;color:var(--pri);margin:0;}
.ph .sub{font-size:12px;color:var(--txt2);margin-top:2px;}

/* ── Filter chips ── */
.filters{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 12px;padding-bottom:4px;}
.fchip{
  font-size:11px;font-weight:600;font-family:var(--sans);letter-spacing:.03em;
  padding:6px 12px;border-radius:99px;border:1px solid var(--outline);
  background:transparent;color:var(--txt2);cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:all .15s;
  white-space:nowrap;
}
.fchip:active{transform:scale(.96);}
.fchip.on{background:var(--pri-ctr);border-color:var(--pri-dim);color:var(--pri);}

/* ── Cards ── */
.card{background:var(--el1);border:1px solid var(--outline-v);border-radius:var(--r-md);padding:16px;margin-bottom:8px;}
.card p{margin:4px 0;font-size:13px;color:var(--txt2);line-height:1.5;}
.card p strong{color:var(--txt);}

/* ── Section titles ── */
h2.sec{font-family:var(--serif);font-size:17px;font-weight:400;color:var(--pri);margin:20px 0 8px;display:flex;align-items:center;gap:8px;}
h3.subsec{font-size:13px;font-weight:700;color:var(--txt);margin:12px 0 6px;display:flex;align-items:center;gap:6px;}

/* ── Tips ── */
.tip{background:var(--pri-ctr);border-left:3px solid var(--pri-dim);border-radius:0 var(--r-sm) var(--r-sm) 0;padding:8px 10px;margin:6px 0;font-size:12px;line-height:1.5;color:var(--txt2);display:flex;gap:8px;}
.tip .i{color:var(--pri);flex-shrink:0;margin-top:1px;}
.tip strong{color:var(--pri);}
.tip.warn{background:var(--err-ctr);border-left-color:var(--err);}
.tip.warn .i{color:var(--err);}
.tip.warn strong{color:var(--err);}
.tip.green{background:var(--ter-ctr);border-left-color:var(--ter-dim);}
.tip.green .i{color:var(--ter);}
.tip.green strong{color:var(--ter);}

/* ── Badges ── */
.badge{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:2px 8px;border-radius:99px;margin-right:4px;margin-bottom:4px;}
.badge.free{background:var(--ter-ctr);color:var(--ter);}
.badge.paid{background:var(--sec-ctr);color:var(--sec);}
.badge.info{background:var(--pri-ctr);color:var(--pri);}

/* ── Inline link (ZTL, etc.) ── */
.ilink{color:var(--pri);text-decoration:underline;text-decoration-style:dotted;text-underline-offset:2px;cursor:pointer;font-weight:600;}
.ilink:active{opacity:.6;}

/* ── Timeline ── */
.tl{position:relative;padding:0;margin:0 0 8px;}
.tl-s{position:relative;padding:0 0 14px 40px;border-left:2px solid var(--outline);margin-left:15px;}
.tl-s:last-child{border-color:transparent;padding-bottom:0;}
.tl-d{position:absolute;left:-17px;top:0;width:32px;height:32px;border-radius:50%;background:var(--pri-ctr);color:var(--pri);display:flex;align-items:center;justify-content:center;border:2px solid var(--bg);}
.tl-d .i{width:16px;height:16px;}
.tl-t{font-size:11px;font-weight:700;color:var(--pri-dim);text-transform:uppercase;letter-spacing:.04em;}
.tl-n{font-weight:700;font-size:14px;margin:2px 0 4px;}
.tl-b{font-size:13px;color:var(--txt2);}
.tl-b p{margin:4px 0;}
.tl-s.alert .tl-d{background:var(--err-ctr);color:var(--err);}
.tl-s.alert{background:var(--err-ctr);border-radius:var(--r-md);padding:12px 12px 12px 40px;margin-left:15px;}
.tl-s.alert .tl-t{color:var(--err);}

/* filterable items */
.spot[data-cat]{transition:opacity .15s,max-height .2s;overflow:hidden;}
.spot.hide{opacity:0;max-height:0!important;padding:0!important;margin:0!important;border:none!important;overflow:hidden;}

/* ── Spot cards ── */
.spot{background:var(--el2);border:1px solid var(--outline-v);border-radius:var(--r-md);padding:14px;margin-bottom:8px;}
.spot-h{display:flex;align-items:flex-start;gap:10px;margin-bottom:6px;}
.spot-ic{width:36px;height:36px;border-radius:var(--r-sm);background:var(--pri-ctr);color:var(--pri);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.spot-ic.sea{background:var(--sec-ctr);color:var(--sec);}
.spot-ic.nat{background:var(--ter-ctr);color:var(--ter);}
.spot-ti{font-size:14px;font-weight:700;line-height:1.3;}
.spot-su{font-size:11px;color:var(--txt3);margin-top:1px;}
.spot p{font-size:13px;color:var(--txt2);margin:4px 0;line-height:1.5;}
.spot p strong{color:var(--txt);}

/* ── Map links ── */
.ml{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--pri);padding:6px 12px;border:1px solid var(--pri-dim);border-radius:99px;margin-top:6px;margin-right:6px;transition:background .15s;}
.ml:active{background:var(--pri-ctr);}

/* ── Map embed ── */
.mf{width:100%;height:180px;border:1px solid var(--outline-v);border-radius:var(--r-md);overflow:hidden;margin:6px 0;position:relative;}
.mf iframe{width:100%;height:100%;border:none;filter:invert(1) hue-rotate(180deg) brightness(.95) contrast(.95);position:relative;z-index:0;}
.mf-fallback{display:none;position:absolute;inset:0;background:var(--surface-v);align-items:center;justify-content:center;text-align:center;padding:16px;font-size:12px;color:var(--txt3);}

/* ── Guide nav ── */
.gl{display:flex;align-items:center;gap:12px;background:var(--el1);border:1px solid var(--outline-v);border-radius:var(--r-md);padding:14px;margin-bottom:8px;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .12s;}
.gl:active{background:var(--el3);}
.gl-ic{width:44px;height:44px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.gl-ti{font-weight:700;font-size:14px;}
.gl-de{font-size:11px;color:var(--txt2);margin-top:2px;}
.gl-ar{margin-left:auto;color:var(--txt3);}

/* ── Stats ── */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:8px 0 16px;}
.st{background:var(--el1);border:1px solid var(--outline-v);border-radius:var(--r-md);padding:10px 6px;text-align:center;}
.st .i{color:var(--pri);}
.st strong{display:block;font-size:15px;margin-top:4px;}
.st small{font-size:10px;color:var(--txt3);}

/* ── Budget ── */
.br{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--outline-v);font-size:13px;gap:8px;}
.br:last-child{border-bottom:none;}
.bl{display:flex;align-items:center;gap:8px;color:var(--txt);flex:1;min-width:0;}
.bl small{display:block;font-size:11px;color:var(--txt3);font-weight:400;}
.bf{color:var(--txt2);font-weight:600;white-space:nowrap;}
.bi{width:80px;text-align:right;padding:8px;border-radius:var(--r-sm);border:1px solid var(--outline);background:var(--surface-v);color:var(--txt);font-size:13px;font-family:var(--sans);}
.bi:focus{outline:none;border-color:var(--pri);box-shadow:0 0 0 1px var(--pri);}
.bt{display:flex;justify-content:space-between;padding:14px 0 4px;font-weight:700;font-size:16px;border-top:2px solid var(--pri-dim);margin-top:8px;}
.bn{font-size:12px;color:var(--txt3);text-align:right;margin-top:4px;}
.ba{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:10px;margin-top:8px;background:var(--pri-ctr);border:1px dashed var(--pri-dim);border-radius:var(--r-sm);color:var(--pri);font-size:12px;font-weight:600;cursor:pointer;font-family:var(--sans);}
.ba:active{background:var(--surface-b);}
.bx{background:none;border:none;color:var(--txt3);cursor:pointer;padding:4px;margin-left:4px;flex-shrink:0;}
.bx:active{color:var(--err);}

/* ── Phrases ── */
.pc{margin-bottom:12px;}
.pc h3{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--pri-dim);margin:0 0 6px;font-weight:700;}
.pr{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--outline-v);font-size:13px;gap:10px;}
.pr:last-child{border-bottom:none;}
.pr .fr{color:var(--txt3);flex:1;}
.pr .it{font-weight:700;color:var(--txt);text-align:right;flex:1;}

/* ── SOS ── */
.si{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--outline-v);}
.si:last-child{border-bottom:none;}
.si-ic{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.si-ic.r{background:var(--sec-ctr);color:var(--sec);}
.si-ic.g{background:var(--pri-ctr);color:var(--pri);}
.si-ic.v{background:var(--ter-ctr);color:var(--ter);}
.si-tx strong{display:block;font-size:13px;}
.si-tx span{font-size:11px;color:var(--txt2);display:block;margin-top:1px;}
.si-tx a{color:var(--pri);}

/* ── Offline bar ── */
#offlineBar{display:none;background:var(--pri-ctr);color:var(--pri);text-align:center;font-size:11px;font-weight:700;padding:6px 16px;}
#offlineBar.show{display:block;}

footer{text-align:center;font-size:10px;color:var(--txt3);padding:32px 16px 8px;line-height:1.6;}

/* Scrollbar */
::-webkit-scrollbar{width:4px;height:4px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--outline);border-radius:4px;}

/* ── Tooltip popover (for ZTL etc.) ── */
.popover{display:none;position:fixed;bottom:72px;left:8px;right:8px;max-width:580px;margin:0 auto;z-index:60;background:var(--el3);border:1px solid var(--outline);border-radius:var(--r-lg);padding:16px;box-shadow:0 -4px 20px rgba(0,0,0,.5);animation:popIn .2s ease;}
.popover.show{display:block;}
@keyframes popIn{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}
.popover h3{margin:0 0 6px;font-size:14px;font-weight:700;display:flex;align-items:center;gap:8px;}
.popover p{margin:4px 0;font-size:13px;color:var(--txt2);line-height:1.5;}
.popover .pop-close{position:absolute;top:12px;right:12px;background:none;border:none;color:var(--txt3);cursor:pointer;padding:4px;}
.pop-overlay{display:none;position:fixed;inset:0;z-index:55;background:rgba(0,0,0,.4);}
.pop-overlay.show{display:block;}