:root{
  --bg:#f0f6ff; --white:#fff; --border:#dbe4f0;
  --text:#1a2744; --muted:#5a6a8a;
  --accent:#1a56db; --accent2:#3b82f6; --accent3:#dbeafe;
  --green:#059669; --green-bg:#d1fae5;
  --red:#dc2626;   --red-bg:#fee2e2;
  --orange:#d97706;
  --shadow:0 2px 12px rgba(26,87,219,.10);
  --shadow-lg:0 8px 32px rgba(26,87,219,.16);
  --panel:380px;            /* 422px reduced 10% */
  --searchw:518px;          /* 576px reduced 10% */
  --radius:10px;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html,body{
  height:100%; overflow:hidden;
  font-family:'Outfit',-apple-system,BlinkMacSystemFont,sans-serif;
  color:var(--text);
}

/* ── Map — full screen ───────────────────────────────────── */
#map{
  position:fixed; inset:0;
  background:#dde6f0; z-index:1;
}

/* ── Search bar — floats over map, upper-left (Google style) ── */
#search-wrap{
  position:fixed; top:10px; left:60px; z-index:560;
  display:flex; align-items:center;
  width:min(var(--searchw), calc(100vw - var(--panel) - 110px));
  height:42px; background:var(--white);
  transition:width .25s ease, border-radius .25s ease;
  border-radius:24px;                       /* Google Maps pill */
  box-shadow:0 1px 4px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.04);
}
#search-icon{
  position:absolute; left:13px;
  color:#5f6368;                            /* Google's plain grey glyph */
  background:none; pointer-events:none;
}
#search-input{
  width:100%; height:100%;
  padding:0 38px 0 42px;
  border:none; outline:none; background:transparent;
  font-size:.92rem; color:var(--text); border-radius:24px;
}
#search-input::placeholder{ color:#80868b; }
#search-wrap:focus-within{
  box-shadow:0 2px 8px rgba(0,0,0,.24), 0 0 0 1px rgba(0,0,0,.04);
}
#search-clear{
  position:absolute; right:8px; display:none;
  width:26px; height:26px; border:none; border-radius:50%;
  background:transparent; color:#5f6368; font-size:.85rem;
  cursor:pointer; line-height:1;
}
#search-clear:hover{ background:#f1f3f4; }
/* Google Places dropdown to match */
.pac-container{
  border-radius:12px; border:none; margin-top:6px;
  box-shadow:0 4px 16px rgba(0,0,0,.2);
  font-family:inherit;
}
.pac-item{ padding:.5rem .8rem; font-size:.85rem; cursor:pointer; }
.pac-item:hover{ background:var(--accent3); }

/* ── Hover coords + zoom — bottom-centre overlay ─────────── */
#coords-overlay{
  position:fixed; bottom:14px;
  left:calc((100vw - var(--panel) - 24px) / 2);
  transform:translateX(-50%);
  transition:left .28s ease;
  z-index:540; display:flex; gap:1rem; align-items:center;
  padding:.32rem .85rem;
  background:rgba(255,255,255,.88);          /* near-white, slightly transparent */
  backdrop-filter:blur(4px);
  border-radius:18px;
  box-shadow:0 1px 6px rgba(0,0,0,.12);
  font-family:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  font-size:.72rem; color:var(--text);
  pointer-events:none; white-space:nowrap;
}
body.panel-hidden #coords-overlay{ left:50%; }
.ov-label{
  font-family:inherit; font-size:.6rem; color:var(--muted);
  text-transform:uppercase; letter-spacing:.05em; margin-right:.15rem;
}

/* ── Toast (transient messages) ──────────────────────────── */
#toast{
  position:fixed; top:16px; left:50%; transform:translateX(-50%);
  z-index:880; display:none;
  padding:.5rem 1rem; border-radius:10px;
  background:rgba(26,39,68,.92); color:#fff;
  font-size:.78rem; box-shadow:var(--shadow-lg);
  max-width:70vw; text-align:center;
}
#toast.show{ display:block; }

/* ── Shared button style ─────────────────────────────────── */
.tb-btn{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.42rem .8rem; font-size:.78rem; font-weight:600;
  color:var(--text); background:var(--white);
  border:1.5px solid var(--border); border-radius:8px;
  cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:border-color .15s, background .15s;
}
.tb-btn:hover{ border-color:var(--accent2); background:var(--accent3); }
.tb-btn.wfull{ width:100%; justify-content:center; }

/* ── Right panel — floats over the map ───────────────────── */
#panel{
  position:fixed; top:12px; right:12px; bottom:12px;
  width:var(--panel);
  background:var(--white); border:1.5px solid var(--border);
  border-radius:14px; box-shadow:var(--shadow-lg);
  z-index:550; display:flex; flex-direction:column;
  transition:transform .28s ease;
}
#panel.hidden{ transform:translateX(calc(var(--panel) + 12px)); }
#panel-tab{
  position:absolute; left:-26px; top:14px;
  width:26px; height:52px;
  background:var(--white); border:1.5px solid var(--border);
  border-right:none; border-radius:10px 0 0 10px;
  cursor:pointer; color:var(--muted); font-size:.7rem;
  box-shadow:-3px 2px 8px rgba(26,87,219,.08);
}
#panel-tab:hover{ color:var(--accent); }

/* Panel title bar */
#panel-title{
  flex:none; display:flex; align-items:center; gap:.6rem;
  padding:.7rem .85rem;
  background:linear-gradient(135deg,#f6f9ff,#eef4ff);
  border-bottom:1.5px solid var(--border);
  border-radius:13px 13px 0 0;
}
#panel-icon{ flex:none; font-size:1.4rem; line-height:1; }
#panel-brand{
  flex:1;
  font-size:.98rem; font-weight:800; letter-spacing:-.01em;
  color:var(--text); text-decoration:none; line-height:1.25;
}
#panel-brand:hover{ color:var(--accent); }
#panel-home{
  flex:none; display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:7px;
  border:1.5px solid var(--border); background:var(--white);
  color:var(--muted); text-decoration:none;
  transition:all .15s;
}
#panel-home:hover{ color:var(--accent); border-color:var(--accent2); background:var(--accent3); }

#panel-scroll{
  flex:1; overflow-y:auto; padding:.8rem;
  display:flex; flex-direction:column; gap:.7rem;
}

/* How-to strip */
.howto{
  background:var(--accent3); border:1.5px solid #bfd6fb;
  border-radius:var(--radius); padding:.55rem .65rem;
  display:flex; flex-direction:column; gap:.3rem;
}
.howto-row{ font-size:.7rem; color:#163a8a; display:flex; align-items:center; gap:.45rem; }
.howto-n{
  flex:none; width:16px; height:16px; border-radius:50%;
  background:var(--accent); color:#fff; font-size:.62rem; font-weight:700;
  display:inline-flex; align-items:center; justify-content:center;
}

/* Panel sections */
.ps{
  background:var(--white); border:1.5px solid var(--border);
  border-radius:var(--radius); padding:.65rem .75rem;
}
.ps.grow{ flex:1; overflow-y:auto; min-height:90px; }
.ps-title{
  font-size:.7rem; font-weight:800; text-transform:uppercase;
  letter-spacing:.06em; color:var(--muted); margin-bottom:.55rem;
  display:flex; align-items:center; gap:.4rem;
}
#ps-connection{ border-color:var(--accent2); }
#ps-connection .ps-title{ color:var(--accent); }
.step-badge{
  width:17px; height:17px; border-radius:50%;
  background:var(--accent); color:#fff;
  font-size:.66rem; font-weight:800;
  display:inline-flex; align-items:center; justify-content:center;
}

/* Fields */
.fld-label{
  display:block; font-size:.64rem; font-weight:600; color:var(--muted);
  text-transform:uppercase; letter-spacing:.04em; margin:.45rem 0 .2rem;
}
.fld{
  width:100%; padding:.42rem .55rem; font-size:.8rem;
  border:1.5px solid var(--border); border-radius:8px;
  background:var(--white); color:var(--text); outline:none;
}
.fld:focus{ border-color:var(--accent2); }
.fld-invalid{ border-color:var(--red)!important; background:var(--red-bg); }
.fld-hint{ font-weight:400; text-transform:none; letter-spacing:0; color:#9aa6ba; }
.fld-warn{
  margin-top:.3rem; font-size:.68rem; color:var(--red); font-weight:600;
}

/* Connect button — traffic-light states */
.connect-btn{
  width:100%; margin-top:.65rem;
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  padding:.55rem .8rem; font-size:.8rem; font-weight:700;
  border:1.5px solid var(--red); border-radius:8px;
  background:var(--red-bg); color:var(--red);
  cursor:pointer; transition:all .2s;
}
.connect-btn:hover{ filter:brightness(.97); }
.conn-dot{
  width:9px; height:9px; border-radius:50%;
  background:var(--red); flex:none;
}
.connect-btn.connecting{
  border-color:var(--orange); background:#fef3c7; color:var(--orange);
}
.connect-btn.connecting .conn-dot{ background:var(--orange); animation:pulse 1s infinite; }
.connect-btn.connected{
  border-color:var(--green); background:var(--green-bg); color:var(--green);
}
.connect-btn.connected .conn-dot{ background:var(--green); }
.connect-btn.error{
  border-color:var(--red); background:var(--red-bg); color:var(--red);
}
@keyframes pulse{ 50%{ opacity:.35; } }

/* Location */
.loc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.5rem; margin-bottom:.5rem; }
.loc-box{
  background:var(--bg); border:1.5px solid var(--border);
  border-radius:8px; padding:.35rem .5rem;
}
.lb-label{ font-size:.6rem; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; display:block; }
.lb-input{
  width:100%; border:none; background:transparent; outline:none;
  font-family:'IBM Plex Mono',ui-monospace,Menlo,monospace; font-size:.78rem; color:var(--accent);
  font-weight:700;
}

/* Elevation badge */
.elev-badge{
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#fff; border-radius:10px; padding:.6rem;
  text-align:center;
}
.eb-label{ font-size:.62rem; opacity:.85; text-transform:uppercase; letter-spacing:.04em; display:block; }
.eb-val{ font-size:1.55rem; font-weight:800; font-family:'IBM Plex Mono',ui-monospace,Menlo,monospace; margin-top:.1rem; display:block; }

/* Stats table */
.st{ width:100%; border-collapse:collapse; font-size:.72rem; }
.st th{
  text-align:left; color:var(--muted); font-weight:600;
  padding:.28rem .35rem; border-bottom:1px solid var(--border);
  font-size:.62rem; text-transform:uppercase;
}
.st td{ padding:.28rem .35rem; border-bottom:1px solid #f0f4f8; white-space:nowrap; }
.st tr:last-child td{ border-bottom:none; }
.c-min{ color:var(--accent2); } .c-avg{ color:var(--green); } .c-max{ color:var(--red); }
.st-sect{
  font-size:.62rem; color:var(--muted); padding:.28rem .35rem;
  background:var(--bg); font-style:italic;
}

/* History */
.hist-item{
  padding:.4rem .55rem; font-size:.72rem; cursor:pointer;
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  transition:background .15s;
}
.hist-item:hover{ background:var(--bg); }
.hi-coords{ font-family:'IBM Plex Mono',ui-monospace,Menlo,monospace; color:var(--accent); font-size:.7rem; }
.hi-elev{ color:var(--muted); font-size:.66rem; }

/* Empty states */
.empty-state{ text-align:center; padding:1.1rem .5rem; color:var(--muted); }
.ei{ font-size:1.5rem; margin-bottom:.3rem; }
.et{ font-size:.76rem; }

/* ── Analysis buttons (bottom-left) ──────────────────────── */
#chart-btns{
  position:fixed; left:12px; bottom:154px; z-index:520;
  display:flex; flex-direction:column; gap:.5rem;
}
.chart-btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.55rem .9rem; font-size:.78rem; font-weight:700;
  background:var(--white); color:var(--text);
  border:1.5px solid var(--border); border-radius:10px;
  box-shadow:var(--shadow); cursor:pointer;
  transition:all .18s; min-width:168px;
}
.chart-btn:hover:not(:disabled){ border-color:var(--accent2); background:var(--accent3); }
.cb-icon{ display:inline-flex; color:var(--accent); }

/* Disabled (no location yet, or not connected) — grey */
.chart-btn:disabled{
  background:#eef1f5; color:#9aa6ba; border-color:#e2e7ee;
  box-shadow:none; cursor:not-allowed;
}
.chart-btn:disabled .cb-icon{ color:#aeb8c8; }

/* Active — this analysis has been run for the current location */
.chart-btn.active{
  background:var(--green-bg); color:var(--green);
  border-color:var(--green);
}
.chart-btn.active .cb-icon{ color:var(--green); }

/* Loading spinner */
.cb-spinner{
  display:none; width:11px; height:11px; margin-left:auto;
  border:2px solid var(--accent3); border-top-color:var(--accent);
  border-radius:50%; animation:spin .7s linear infinite;
}
.chart-btn.loading .cb-spinner{ display:inline-block; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ── Analysis dialogs — FIXED 720 × 480 ──────────────────── */
.chart-dialog{
  position:fixed; display:none; z-index:700;
  width:720px; height:480px;            /* fixed size — drag moves only */
  max-width:96vw;
  background:var(--white); border:1.5px solid var(--border);
  border-radius:12px; box-shadow:var(--shadow-lg);
  flex-direction:column; overflow:hidden;
  resize:none;
}
.chart-dialog.open{ display:flex; }
.cd-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:.32rem .55rem;                 /* halved from .65rem 1.1rem */
  background:var(--bg); border-bottom:1.5px solid var(--border);
  cursor:move; user-select:none; flex:none;
}
.cd-title{ flex:1; font-size:.9rem; font-weight:800; color:var(--text); }
.cd-icon{ display:inline-flex; color:var(--accent); flex:none; margin-right:.55rem; }
.cd-icon svg{ width:19px; height:19px; }
.cd-close{
  width:22px; height:22px; border:none; border-radius:6px;
  background:transparent; color:var(--muted); font-size:.78rem;
  cursor:pointer; line-height:1;
}
.cd-close:hover{ background:var(--red-bg); color:var(--red); }
.cd-body{
  flex:1; overflow:hidden; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  background:#fafcff; padding:.4rem;
}
/* Fitted image — the export row's "Open in a new tab" link covers the
   full-resolution case, so no x/y scrollbars are needed here. */
.cd-body img{ max-width:100%; max-height:100%; object-fit:contain; }
.cd-body iframe{ width:100%; height:100%; border:none; }
.cd-empty{ color:var(--muted); font-size:.8rem; text-align:center; padding:1rem; }
.cd-error{ color:var(--red); font-size:.8rem; text-align:center; padding:1rem; }
.cd-loading{
  display:flex; flex-direction:column; align-items:center; gap:.4rem;
  color:var(--muted); font-size:.78rem; text-align:center; line-height:1.5;
}
.cd-loading::before{
  content:""; width:26px; height:26px; margin-bottom:.2rem;
  border:3px solid var(--accent3); border-top-color:var(--accent);
  border-radius:50%; animation:spin .7s linear infinite;
}
.cd-loading::before{
  content:""; width:26px; height:26px;
  border:3px solid var(--accent3); border-top-color:var(--accent);
  border-radius:50%; animation:spin .7s linear infinite;
}
.cd-fmts{
  flex:none; display:flex; align-items:center; gap:.35rem; flex-wrap:wrap;
  padding:.3rem .55rem; border-top:1.5px solid var(--border);
  background:var(--white);
}
.cd-links{
  margin-left:auto; font-size:.68rem; color:var(--muted);
  white-space:nowrap;
}
.cd-links a{ color:var(--accent); font-weight:600; text-decoration:none; }
.cd-links a:hover{ text-decoration:underline; }
.cd-fmts-label{ font-size:.68rem; color:var(--muted); margin-right:.25rem; }
.fmt-btn{
  padding:.22rem .6rem; font-size:.68rem; font-weight:700;
  border:1.5px solid var(--border); border-radius:6px;
  background:var(--white); color:var(--muted); cursor:pointer;
}
.fmt-btn:hover{ border-color:var(--accent2); }
.fmt-btn.active{ background:var(--accent); border-color:var(--accent); color:#fff; }

/* ── API-key reminder modal ──────────────────────────────── */
#key-modal, #quota-modal, #offset-modal{
  position:fixed; inset:0; z-index:900; display:none;
  align-items:center; justify-content:center;
  background:rgba(20,32,60,.45);
}
#key-modal.open, #quota-modal.open, #offset-modal.open{ display:flex; }
.km-card{
  width:380px; max-width:92vw;
  background:var(--white); border-radius:14px;
  box-shadow:var(--shadow-lg); padding:1.2rem 1.3rem;
  border-top:4px solid var(--red);
}
/* Amber variant for non-error reminders (quota, offset range) */
.km-card-amber{ border-top-color:var(--orange); }
.km-card-amber .km-btn{ background:var(--orange); }
.km-card-amber .km-btn:hover{ background:#b45a04; }
.km-title{ font-size:.95rem; font-weight:800; margin-bottom:.5rem; }
.km-text{ font-size:.8rem; color:var(--muted); line-height:1.5; margin-bottom:.9rem; }
.km-btn{
  display:block; margin-left:auto;
  padding:.45rem 1.2rem; font-size:.78rem; font-weight:700;
  background:var(--accent); color:#fff; border:none; border-radius:8px;
  cursor:pointer;
}
.km-btn:hover{ background:#164bbd; }

/* ── Leaflet scale bar + attributions ────────────────────
*/
.leaflet-control-attribution{
  font-size:.65rem!important;
  background:rgba(255,255,255,.7);
}
.leaflet-left .leaflet-control-scale{
  margin-left:0px;
}
.leaflet-control-scale{
  background:rgba(255,255,255,0);
  border-radius:4px; padding:1px 5px;
  margin-bottom:2px!important;
}
.leaflet-control-scale-line{
  border-color:var(--text)!important; color:var(--text);
  font-size:.7rem!important;
}
.leaflet-control-zoom{ border:1.5px solid var(--border)!important; border-radius:10px!important; overflow:hidden; }
.leaflet-control-zoom a{ color:var(--text)!important; border-bottom:1px solid var(--border)!important; font-size:1.1rem!important; }
.leaflet-control-zoom a:last-child{ border-bottom:none!important; }

/* ── Responsive behaviour ────────────────────────────────── */

@media (max-width:1100px){
  #search-wrap{ width:min(var(--searchw), calc(100vw - 74px)); }
}

/* Phones */
@media (max-width:640px){
  /* Search bar: expanded = full available width; collapsed = a round
     42px icon button (toggled by map.js via .collapsed). */
  #search-wrap{ width:calc(100vw - 74px); }
  #search-wrap.collapsed{
    width:42px; border-radius:50%; cursor:pointer;
  }
  #search-wrap.collapsed #search-input,
  #search-wrap.collapsed #search-clear{ display:none; }
  #search-wrap.collapsed #search-icon{ left:11px; }

  /* Panel: never wider than the screen; map.js starts it hidden */
  #panel{ width:min(var(--panel), calc(100vw - 38px)); }
  #panel.hidden{ transform:translateX(calc(100% + 12px)); }

  /* Analysis buttons: icon-only (labels become tooltips) */
  .chart-btn{ font-size:0; gap:0; min-width:0; padding:.6rem; border-radius:50%; }
  .chart-btn .cb-icon svg{ width:19px; height:19px; }
  .chart-btn .cb-spinner{ display:none!important; }

  /* Dialogs: fit the screen */
  .chart-dialog{ width:96vw; height:auto; max-height:84vh; min-height:300px; }

  /* Overlay: smaller, full-viewport centred (panel starts hidden) */
  #coords-overlay{ font-size:.62rem; gap:.55rem; padding:.28rem .65rem; }
}