/* ─── Tokens (warm, light — "old money" Italian palette) ─────────────────── */
:root{
  --primary:#2B2A24;
  --secondary:#7D8453;
  /* Accent = azul profundo (deep blue): links, primary actions, focus */
  --accent:#305C7D;
  --accent-hover:#274C68;
  --accent-bright:#305C7D;       /* same blue reads well on the light surfaces */
  --accent-ring:rgba(48,92,125,.30);
  --bg:#F4F1EB;                  /* blanco roto, warm off-white (body) */
  --surface:#EBE3D4;            /* arena suave, header + side panel */
  --surface-2:#FBF8F2;         /* near-white cards */
  --fg:#2B2A24;                /* warm ink */
  --muted:#5E5A49;             /* readable secondary text (~6:1) */
  --muted-2:#8A8470;           /* decorative / tertiary */
  --border:rgba(43,42,36,.12);
  --border-strong:rgba(43,42,36,.20);
  --danger:#C06C50;            /* terracota cálido — ZTL zones */
  --danger-soft:rgba(192,108,80,.14);
  --ok:#7D8453;
  --warn:#7D8453;
  /* Tricolore masthead, muted into the palette (olive / off-white / terracotta) */
  --it-green:#7D8453;
  --it-white:#F5F3EF;
  --it-red:#C06C50;
  --r-lg:14px; --r-md:10px; --r-sm:8px;
  --t:160ms ease;
  --panel-w:380px;
}
*,*::before,*::after{box-sizing:border-box; margin:0; padding:0}
html,body{height:100%}
body{
  font-family:'Inter',system-ui,sans-serif;
  background:var(--bg); color:var(--fg);
  -webkit-font-smoothing:antialiased; overflow:hidden;
}
button,input,select{font-family:inherit}
a{color:var(--accent-bright)}

/* ─── Layout shell ─────────────────────────────────── */
.app{display:grid; grid-template-rows:auto 1fr; height:100dvh}

header{
  position:relative;
  display:flex; align-items:center; gap:14px;
  padding:13px 18px 12px; background:var(--surface);
  border-bottom:1px solid var(--border); z-index:20;
}
/* Tricolore masthead rule */
header::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg,
    var(--it-green) 0 33.333%, var(--it-white) 33.333% 66.666%, var(--it-red) 66.666% 100%);
}
.brand{display:flex; align-items:center; gap:11px; min-width:0; text-decoration:none; color:inherit}
.logo{
  width:34px; height:34px; flex:none; border-radius:9px;
  background:var(--accent); display:grid; place-items:center;
}
.logo svg{width:20px; height:20px}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
.brand h1,.brand .bt{
  font-family:'Fraunces','Inter',serif; font-optical-sizing:auto;
  font-size:18px; font-weight:600; letter-spacing:-.01em; line-height:1; white-space:nowrap;
  margin:0;
}
.brand h1 em,.brand .bt em{font-style:italic; color:var(--accent-bright)}
.brand p{font-size:11px; color:var(--muted); font-weight:400; margin-top:2px; letter-spacing:.01em}
.spacer{flex:1}

/* Segmented control — region views + page nav */
.seg{display:flex; gap:4px; background:var(--surface-2); padding:4px; border-radius:var(--r-md)}
.seg button, .seg a{
  border:0; background:transparent; color:var(--muted); text-decoration:none;
  font-size:12.5px; font-weight:500; padding:6px 13px; border-radius:7px;
  cursor:pointer; transition:var(--t); display:inline-flex; align-items:center; gap:7px;
}
.seg button:hover, .seg a:hover{color:var(--fg)}
.seg button.active, .seg a.active{background:var(--accent); color:#fff}
.seg svg{width:15px; height:15px}

.key-btn{
  display:flex; align-items:center; gap:7px; border:1px solid var(--border-strong);
  background:transparent; color:var(--muted); font-size:12.5px; font-weight:500;
  padding:8px 13px; border-radius:var(--r-md); cursor:pointer; transition:var(--t);
}
.key-btn:hover{color:var(--fg); border-color:var(--accent)}
.key-btn.set{color:var(--ok); border-color:rgba(22,163,74,.4)}
.key-btn svg{width:15px; height:15px}

/* ─── Body split ───────────────────────────────────── */
.body{position:relative; display:grid; grid-template-columns:var(--panel-w) 1fr; min-height:0}

/* ─── Side panel ───────────────────────────────────── */
.panel{
  background:var(--surface); border-right:1px solid var(--border);
  display:flex; flex-direction:column; min-height:0; z-index:10;
}
.panel-scroll{overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:18px}
.panel-scroll::-webkit-scrollbar{width:9px}
.panel-scroll::-webkit-scrollbar-thumb{background:var(--border-strong); border-radius:9px; border:2px solid var(--surface)}

.card{background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-lg); padding:16px}
.card h2{
  font-size:12px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  color:var(--muted); margin-bottom:14px; display:flex; align-items:center; gap:8px;
}
.card h2 svg{width:15px; height:15px; color:var(--accent-bright)}

/* Route form */
.field{margin-bottom:11px}
.field:last-of-type{margin-bottom:0}
.field label{display:block; font-size:11.5px; font-weight:500; color:var(--muted); margin-bottom:5px}
.point{display:flex; align-items:center; gap:9px}
.dot{width:11px; height:11px; border-radius:50%; flex:none}
.dot.a{background:var(--accent-bright)}
.dot.b{background:var(--danger)}
.point input{
  flex:1; min-width:0; background:var(--bg); border:1px solid var(--border-strong);
  color:var(--fg); font-size:13.5px; padding:10px 11px; border-radius:var(--r-sm);
  transition:var(--t);
}
.point input::placeholder{color:var(--muted-2)}
.point input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(48,92,125,.18)}

.swap{display:flex; justify-content:center; margin:-2px 0}
.swap button{
  width:30px; height:24px; border:1px solid var(--border); background:var(--bg);
  color:var(--muted); border-radius:7px; cursor:pointer; display:grid; place-items:center; transition:var(--t);
}
.swap button:hover{color:var(--fg); border-color:var(--accent)}
.swap svg{width:14px; height:14px}

.toggle{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin:14px 0; padding:11px 12px; background:var(--bg); border:1px solid var(--border); border-radius:var(--r-sm);
}
.toggle .lbl{font-size:12.5px; font-weight:500}
.toggle .lbl span{display:block; font-size:11px; color:var(--muted); font-weight:400; margin-top:2px}
.sw{position:relative; width:42px; height:24px; flex:none}
.sw input{opacity:0; width:100%; height:100%; cursor:pointer; position:absolute; z-index:2; margin:0}
.sw .track{position:absolute; inset:0; background:var(--secondary); border-radius:99px; transition:var(--t)}
.sw .track::after{content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; background:#fff; border-radius:50%; transition:var(--t)}
.sw input:checked + .track{background:var(--accent)}
.sw input:checked + .track::after{transform:translateX(18px)}
.sw input:focus-visible + .track{box-shadow:0 0 0 3px rgba(48,92,125,.35)}

.btn{
  width:100%; border:0; background:var(--accent); color:#fff; font-size:14px; font-weight:600;
  padding:12px; border-radius:var(--r-sm); cursor:pointer; transition:var(--t);
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.btn:hover{background:var(--accent-hover)}
.btn:disabled{opacity:.55; cursor:not-allowed}
.btn svg{width:17px; height:17px}
.btn .spin{animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Route result */
.result{margin-top:14px; display:none}
.result.show{display:block; animation:fade .2s ease}
@keyframes fade{from{opacity:0; transform:translateY(4px)}to{opacity:1}}
.stats{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:12px}
.stat{background:var(--bg); border:1px solid var(--border); border-radius:var(--r-sm); padding:11px 12px}
.stat .v{font-size:20px; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.stat .k{font-size:11px; color:var(--muted); margin-top:2px}

.notice{
  display:flex; gap:9px; padding:11px 12px; border-radius:var(--r-sm); font-size:12.5px; line-height:1.5;
}
.notice svg{width:16px; height:16px; flex:none; margin-top:1px}
.notice.ok{background:rgba(22,163,74,.12); color:#86EFAC; border:1px solid rgba(22,163,74,.3)}
.notice.warn{background:rgba(217,119,6,.12); color:#FCD34D; border:1px solid rgba(217,119,6,.3)}
.notice.err{background:var(--danger-soft); color:#FCA5A5; border:1px solid rgba(220,38,38,.35)}
.notice b{font-weight:600}

/* ─── City selector (zones page) ───────────────────── */
.select-wrap{position:relative}
.select-wrap svg{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; color:var(--muted); pointer-events:none;
}
.city-select{
  width:100%; appearance:none; -webkit-appearance:none;
  background:var(--bg); border:1px solid var(--border-strong); color:var(--fg);
  font-size:13.5px; font-weight:500; padding:11px 36px 11px 12px; border-radius:var(--r-sm);
  cursor:pointer; transition:var(--t);
}
.city-select:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(48,92,125,.18)}
.city-select optgroup{background:var(--surface); color:var(--muted); font-style:normal}
.city-select option{background:var(--surface); color:var(--fg)}

/* ─── Zone list (compact, route map) ───────────────── */
.zone-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px}
.zone-head h2{margin:0}
.count{font-size:11px; color:var(--muted); background:var(--bg); padding:3px 9px; border-radius:99px; border:1px solid var(--border)}
.zone{
  display:flex; gap:11px; padding:11px; border-radius:var(--r-sm); cursor:pointer;
  transition:var(--t); border:1px solid transparent;
}
.zone:hover{background:var(--bg); border-color:var(--border)}
.zone + .zone{margin-top:2px}
.zone .mark{width:9px; height:9px; border-radius:3px; background:var(--danger); margin-top:5px; flex:none}
.zone .nm{font-size:13.5px; font-weight:500}
.zone .meta{font-size:11.5px; color:var(--muted); margin-top:2px}
.zone .meta .city{color:var(--accent-bright); font-weight:500}

/* ─── Zone cards (detailed, zones page) ────────────── */
.zone-card{
  padding:13px; border-radius:var(--r-md); cursor:pointer; transition:var(--t);
  border:1px solid var(--border); background:var(--bg);
}
.zone-card:hover{border-color:var(--accent); background:var(--surface-2)}
.zone-card:focus-visible{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(48,92,125,.25)}
.zone-card + .zone-card{margin-top:9px}
.zc-head{display:flex; align-items:center; gap:9px}
.zc-head .mark{width:9px; height:9px; border-radius:3px; background:var(--danger); flex:none}
.zc-head .nm{font-size:14px; font-weight:600; letter-spacing:-.01em}
.zc-city{font-size:11.5px; color:var(--muted); margin:3px 0 0 18px}
.zc-city b{color:var(--accent-bright); font-weight:600}
.zc-hours{
  display:inline-flex; align-items:center; gap:7px; margin:10px 0 0 18px;
  font-size:12.5px; font-weight:500; color:#525830;
  background:rgba(125,132,83,.16); border:1px solid rgba(125,132,83,.34);
  padding:5px 10px; border-radius:99px;
}
.zc-hours svg{width:13px; height:13px; flex:none}
.zc-info{font-size:12px; color:var(--muted); line-height:1.55; margin:10px 0 0 18px}
.zc-srclink{display:inline-flex; align-items:center; gap:6px; margin:9px 0 0 18px; font-size:12px; font-weight:500; color:var(--accent-bright); text-decoration:none}
.zc-srclink:hover{text-decoration:underline}
.zc-count{font-size:11.5px; color:var(--muted); margin:3px 0 0 18px}
/* Drill-down (region / city) cards */
.zone-card.drill{display:flex; align-items:center; justify-content:space-between; gap:12px}
.zone-card.drill .chev{width:18px; height:18px; color:var(--muted-2); flex:none}
.zone-card.drill:hover .chev{color:var(--accent-bright)}
.zc-head .reg-dot{width:9px; height:9px; border-radius:50%; background:var(--accent-bright); flex:none}

/* ─── Search + breadcrumb (map page) ───────────────── */
.search{position:relative}
.search input{
  width:100%; background:var(--bg); border:1px solid var(--border-strong); color:var(--fg);
  font-size:14px; padding:12px 38px 12px 40px; border-radius:var(--r-sm); transition:var(--t);
}
.search input::placeholder{color:var(--muted)}
.search input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(48,92,125,.18)}
.search .s-icon{position:absolute; left:13px; top:50%; transform:translateY(-50%); width:17px; height:17px; color:var(--muted-2); pointer-events:none}
.search .s-clear{
  position:absolute; right:8px; top:50%; transform:translateY(-50%); width:26px; height:26px;
  border:0; background:transparent; color:var(--muted); border-radius:6px; cursor:pointer;
  display:none; align-items:center; justify-content:center; transition:var(--t);
}
.search .s-clear svg{width:15px; height:15px}
.search .s-clear:hover{color:var(--fg); background:var(--surface-2)}
.search.has-text .s-clear{display:flex}
.search-help{font-size:12px; color:var(--muted); line-height:1.55; margin-top:10px}

.crumbs{display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-bottom:13px; font-size:12.5px}
.crumbs button{background:none; border:0; padding:0; color:var(--accent-bright); cursor:pointer; font:inherit; font-weight:500}
.crumbs button:hover{text-decoration:underline}
.crumbs .sep{color:var(--muted-2)}
.crumbs .cur{color:var(--muted); font-weight:500}
.crumbs:empty{display:none}

.empty{padding:24px 14px; text-align:center; color:var(--muted); font-size:13px; line-height:1.6}
.empty svg{width:30px; height:30px; color:var(--muted-2); display:block; margin:0 auto 11px}

.legend{display:flex; align-items:center; gap:7px; font-size:12px; color:var(--muted); white-space:nowrap}
.legend i{width:11px; height:11px; border-radius:3px; background:var(--danger); display:inline-block; flex:none}
.hlink{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--muted); text-decoration:none; font-weight:500; transition:var(--t)}
.hlink:hover{color:var(--fg)}
.hlink svg{width:15px; height:15px}

/* Cross-page nav (content pages) */
.pagelinks{display:flex; align-items:center; gap:3px; flex-wrap:wrap; justify-content:flex-end}
.pagelinks a{
  font-size:12.5px; font-weight:500; color:var(--muted); text-decoration:none;
  padding:6px 11px; border-radius:7px; transition:var(--t); white-space:nowrap;
}
.pagelinks a:hover{color:var(--fg); background:var(--surface-2)}
.pagelinks a[aria-current]{color:var(--accent); background:var(--surface-2)}

/* While the menu is open, lift the header (and its dropdown child) above the
   map panel (z 500) and Leaflet panes so the menu isn't hidden behind them. */
header.nav-open{z-index:1000}

/* Hamburger toggle — hidden on desktop, shown on phones */
.nav-toggle{
  display:none; flex:none; width:40px; height:40px; padding:0;
  align-items:center; justify-content:center;
  background:var(--surface-2); color:var(--fg);
  border:1px solid var(--border); border-radius:9px; cursor:pointer; transition:var(--t);
}
.nav-toggle:hover{background:var(--border)}
.nav-toggle svg{width:22px; height:22px; display:block}
.nav-toggle .ico-close{display:none}
header.nav-open .nav-toggle .ico-open{display:none}
header.nav-open .nav-toggle .ico-close{display:block}

/* ─── Map ──────────────────────────────────────────── */
#map{width:100%; height:100%; background:#ECE8E0}
.leaflet-container{font-family:inherit; background:#ECE8E0}
.leaflet-popup-content-wrapper{
  background:var(--surface-2); color:var(--fg); border-radius:var(--r-md);
  border:1px solid var(--border-strong); box-shadow:0 10px 34px rgba(43,42,36,.20);
}
.leaflet-popup-tip{background:var(--surface-2); border:1px solid var(--border-strong)}
.leaflet-popup-content{margin:13px 15px; font-size:13px; line-height:1.55}
.leaflet-popup-content h3{font-size:14px; margin-bottom:4px}
.leaflet-popup-content .pc{color:var(--accent-bright); font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:.04em}
.leaflet-popup-content .ph{color:var(--muted); font-size:12px; margin-top:6px; display:flex; gap:6px; align-items:center}
.leaflet-popup-content .ph svg{width:13px; height:13px; flex:none}
.leaflet-bar a{background:var(--surface-2); color:var(--fg); border-color:var(--border)!important}
.leaflet-bar a:hover{background:var(--surface)}
.leaflet-control-attribution{background:rgba(245,243,239,.85)!important; color:var(--muted)!important}
.leaflet-control-attribution a{color:var(--muted)!important}

/* ─── Live location ─────────────────────────────────── */
.locate-btn{
  width:34px; height:34px; display:grid; place-items:center;
  background:var(--surface-2); color:var(--accent);
  border:1px solid var(--border-strong); border-radius:9px; cursor:pointer;
  box-shadow:0 1px 5px rgba(43,42,36,.18); transition:var(--t);
}
.locate-btn:hover{color:var(--accent-hover); border-color:var(--accent)}
.locate-btn svg{width:19px; height:19px; display:block}
.locate-btn.active{background:var(--accent); color:#fff; border-color:var(--accent)}
.locate-btn.locating svg{animation:loc-spin 1s linear infinite}
.locate-btn.err{color:var(--danger); border-color:var(--danger)}
@keyframes loc-spin{to{transform:rotate(360deg)}}

/* User position: dot + soft pulsing ring */
.loc-dot{
  position:relative; display:block; width:14px; height:14px; border-radius:50%;
  background:#305C7D; border:2.5px solid #fff; box-shadow:0 1px 4px rgba(43,42,36,.45);
}
.loc-dot::after{
  content:""; position:absolute; inset:-2.5px; border-radius:50%;
  background:rgba(48,92,125,.35); z-index:-1; animation:loc-pulse 2s ease-out infinite;
}
@keyframes loc-pulse{
  0%{transform:scale(1); opacity:.6}
  100%{transform:scale(3.2); opacity:0}
}

/* Mobile sheet handle */
.sheet-handle{display:none}

/* ─── Modal ────────────────────────────────────────── */
.modal-bg{
  position:fixed; inset:0; background:rgba(8,12,24,.6); backdrop-filter:blur(3px);
  display:none; align-items:center; justify-content:center; z-index:1000; padding:20px;
}
.modal-bg.show{display:flex}
.modal{
  background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--r-lg);
  max-width:440px; width:100%; padding:24px; animation:fade .2s ease;
}
.modal h3{font-size:17px; font-weight:600; margin-bottom:8px}
.modal p{font-size:13px; color:var(--muted); line-height:1.6; margin-bottom:16px}
.modal input{
  width:100%; background:var(--bg); border:1px solid var(--border-strong); color:var(--fg);
  font-size:13.5px; padding:11px; border-radius:var(--r-sm); margin-bottom:16px;
}
.modal input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(48,92,125,.18)}
.modal-actions{display:flex; gap:10px}
.modal-actions button{flex:1; padding:11px; border-radius:var(--r-sm); font-size:13.5px; font-weight:600; cursor:pointer; transition:var(--t)}
.modal-actions .ghost{background:transparent; border:1px solid var(--border-strong); color:var(--muted)}
.modal-actions .ghost:hover{color:var(--fg)}
.modal-actions .primary{background:var(--accent); border:0; color:#fff}
.modal-actions .primary:hover{background:var(--accent-hover)}

.footnote{font-size:11px; color:var(--muted-2); line-height:1.5; text-align:center; padding:0 4px}
.footnote a{color:var(--muted)}

/* ─── Legal / content page ─────────────────────────── */
.legal-scroll{overflow-y:auto; min-height:0; padding:clamp(34px,6vw,68px) 24px 88px}
.legal{max-width:44rem; margin:0 auto; overflow-wrap:break-word}
.legal h1{
  font-family:'Fraunces','Inter',serif; font-optical-sizing:auto;
  font-size:clamp(2rem,5vw,2.85rem); font-weight:600; letter-spacing:-.02em; line-height:1.05; text-wrap:balance;
}
.legal h1 em{font-style:italic; color:var(--accent-bright)}
.legal .lede{margin-top:16px; font-size:1.05rem; line-height:1.6; color:#3A382F; max-width:60ch; text-wrap:pretty}
.legal .updated{margin-top:12px; font-size:.78rem; color:var(--muted-2); letter-spacing:.02em}
.legal section{margin-top:34px}
.legal h2{font-size:1.1rem; font-weight:600; color:var(--fg); letter-spacing:-.01em}
.legal p{margin-top:10px; color:#4C4A3D; line-height:1.7; font-size:.95rem; max-width:66ch}
.legal p strong{color:var(--fg); font-weight:600}
.legal a{color:var(--accent-bright)}
.legal .callout{margin-top:24px; padding:18px 20px; border:1px solid rgba(192,108,80,.5); background:rgba(192,108,80,.10); border-radius:var(--r-lg)}
.legal .callout h2{color:#8E4129}
.legal .callout p{color:#5C4438; max-width:none}
.legal .callout p strong{color:#8E4129}
.legal .accept{margin-top:38px; padding-top:24px; border-top:1px solid var(--border)}
.legal .accept p{color:var(--fg)}
.legal .back{
  display:inline-flex; align-items:center; gap:8px; margin-top:22px;
  padding:11px 17px; background:var(--accent); color:#fff; border-radius:var(--r-sm);
  font-size:14px; font-weight:600; text-decoration:none; transition:var(--t);
}
.legal .back:hover{background:var(--accent-hover)}
.legal .back svg{width:16px; height:16px}

/* ─── AdSense sidebar slot ─────────────────────────── */
.ad-card{position:relative; padding-top:26px}
.ad-tag{position:absolute; top:9px; left:14px; font-size:9.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-2)}
.ad-card .adsbygoogle{display:block; min-height:90px}
.ad-placeholder{
  border:1px dashed var(--border-strong); border-radius:var(--r-sm);
  padding:24px 14px; min-height:110px; display:flex; align-items:center; justify-content:center;
  text-align:center; color:var(--muted); font-size:12px; line-height:1.5;
}
.legal .ad-card{margin:34px 0 0}

/* ─── Responsive ───────────────────────────────────── */
@media (max-width:860px){
  :root{--panel-w:0px}
  .body{grid-template-columns:1fr}
  .seg button, .seg a{padding:6px 9px; font-size:12px}
  .key-btn span{display:none}
  header .legend{display:none}

  .nav-toggle{display:flex}
  .pagelinks{
    position:absolute; top:calc(100% + 7px); right:12px;
    flex-direction:column; align-items:stretch; flex-wrap:nowrap; gap:2px;
    min-width:172px; padding:6px; background:var(--surface);
    border:1px solid var(--border-strong); border-radius:12px;
    box-shadow:0 14px 38px rgba(0,0,0,.30); z-index:60;
    opacity:0; visibility:hidden; transform:translateY(-6px);
    transition:opacity .16s ease, transform .16s ease, visibility .16s;
  }
  header.nav-open .pagelinks{opacity:1; visibility:visible; transform:translateY(0)}
  .pagelinks a{padding:10px 12px; font-size:14px; border-radius:8px}

  .panel{
    position:absolute; left:0; right:0; bottom:0; top:auto; max-height:62dvh;
    border-right:0; border-top:1px solid var(--border-strong);
    border-radius:18px 18px 0 0; transform:translateY(calc(100% - 132px));
    transition:transform .3s cubic-bezier(.4,0,.2,1); z-index:500;
    box-shadow:0 -8px 40px rgba(0,0,0,.45);
  }
  .panel.open{transform:translateY(0)}
  .sheet-handle{
    display:flex; flex-direction:column; align-items:center; gap:7px; padding:9px 0 4px;
    cursor:pointer; flex:none; touch-action:none;
  }
  .sheet-handle .grip{width:38px; height:4px; border-radius:99px; background:var(--border-strong)}
  .sheet-handle .lab{font-size:11.5px; color:var(--muted); font-weight:500}
  .panel-scroll{padding:6px 16px 22px}

  /* Content pages: scroll the page itself. A stretched grid item with
     overflow:auto is unreliable for touch scrolling on mobile, so on phones
     we drop the fixed-height shell and let the document scroll normally. */
  body.page{overflow-y:auto; overflow-x:hidden; height:auto}
  .page .app{height:auto; min-height:100dvh; max-width:100%}
  .page .legal-scroll{overflow:visible; min-height:0; max-width:100%}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important; transition-duration:.01ms!important}
}