/* Shared styles for all Distance Calculator tool pages */
:root{
  --bg:#f4f6fb; --card:#fff; --ink:#1b2333; --muted:#6b7488; --line:#e3e7ef;
  --accent:#0f766e; --accent-2:#c2410c; --road:#0f766e; --air:#c2410c; --radius:12px; --head:46px; --panel:400px;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:14px}
a{color:var(--accent)}

/* ---------- header + tools nav ---------- */
header{background:#1c1b19;color:#fff;height:var(--head);display:flex;align-items:center;gap:18px;padding:0 16px;position:relative;z-index:2}
.logo{display:flex;align-items:center;gap:8px;font-weight:700;font-size:16px;color:#fff;text-decoration:none;flex:none}
.logo svg{width:22px;height:22px}
.nav{display:flex;gap:4px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{display:flex;align-items:center;gap:6px;padding:6px 11px;border-radius:8px;color:#d6d0c4;text-decoration:none;font-size:13px;font-weight:500;white-space:nowrap}
.nav a svg{width:15px;height:15px;flex:none;opacity:.85}
.nav a:hover{background:#2e2c28;color:#fff}
.nav a.on{background:#0f766e;color:#fff}
.lang{flex:none}
.lang button{background:transparent;border:1px solid #4a4640;color:#d6d0c4;border-radius:7px;padding:3px 9px;cursor:pointer;font:inherit;font-size:12.5px}
.lang button.on{background:#fff;color:#1c1b19;border-color:#fff}

/* ---------- layout: panel left, map right ---------- */
.app{display:grid;grid-template-columns:var(--panel) 1fr;grid-template-rows:minmax(0,1fr);height:calc(100vh - var(--head));height:calc(100dvh - var(--head))}
.panel{min-height:0;overflow-y:auto;padding:14px 14px 0;background:var(--bg);border-right:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
#map{height:100%;width:100%;z-index:0}
.panel h1{margin:0;font-size:17px;font-weight:700}
.panel h1 + p{margin:-6px 0 0;color:var(--muted);font-size:12.5px}

/* ---------- building blocks ---------- */
.card{background:var(--card);border-radius:var(--radius);box-shadow:0 2px 10px rgba(15,23,42,.05);border:1px solid var(--line)}
.field{position:relative}
.field input,.inp{width:100%;height:42px;border:1px solid var(--line);border-radius:9px;padding:0 12px;font:inherit;font-size:15px;color:var(--ink);background:#fafbfd}
.field input:focus,.inp:focus{outline:none;border-color:var(--accent);background:#fff;box-shadow:0 0 0 3px rgba(15,118,110,.18)}
.inp.bad{border-color:#f87171;background:#fef2f2}
.go{height:42px;border:0;border-radius:9px;background:var(--accent);color:#fff;font:inherit;font-weight:600;font-size:15px;cursor:pointer;padding:0 18px}
.go:hover{background:#115e59} .go:disabled{opacity:.6;cursor:wait}
.btn2{border:1px solid var(--line);background:#fff;border-radius:8px;padding:5px 12px;font:inherit;font-size:12.5px;cursor:pointer;color:var(--ink);white-space:nowrap}
.btn2:hover{border-color:var(--accent);color:var(--accent)}
.btn2:disabled{opacity:.45;cursor:default;border-color:var(--line);color:var(--ink)}
.btn2.sm{padding:3px 8px;font-size:12px}
.sugg{position:absolute;z-index:1000;left:0;right:0;top:46px;background:#fff;border:1px solid var(--line);border-radius:9px;box-shadow:0 10px 30px rgba(15,23,42,.12);list-style:none;margin:0;padding:4px;display:none;max-height:300px;overflow:auto}
.sugg.show{display:block}
.sugg li{padding:9px 10px;border-radius:7px;cursor:pointer;line-height:1.3}
.sugg li small{display:block;color:var(--muted);font-size:12px}
.sugg li.act,.sugg li:hover{background:#ece6da}
.hint{color:var(--muted);font-size:12px;margin:-4px 2px 0}
.msg{padding:9px 12px;border-radius:9px;background:#fef2f2;color:#991b1b;border:1px solid #fecaca;display:none}
.msg.show{display:block}
.msg.info{background:#eff6ff;color:#1e40af;border-color:#bfdbfe}
.results{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.stat{padding:9px 12px}
.stat h3{margin:0 0 3px;font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:6px}
.stat .big{font-size:20px;font-weight:700;line-height:1.15;overflow-wrap:anywhere}
.stat .sub{color:var(--muted);margin-top:2px;font-size:11.5px;line-height:1.35}
.tools{display:flex;justify-content:flex-end;gap:6px;flex-wrap:wrap}
.sec{padding:10px 12px}
.sec > h3{margin:0 0 6px;font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
/* list of formats with copy buttons */
.fmt{display:grid;grid-template-columns:96px 1fr auto;gap:6px 8px;align-items:center;font-size:13px}
.fmt dt{color:var(--muted);font-size:11.5px;font-weight:600}
.fmt dd{margin:0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;overflow-wrap:anywhere}
.ext{display:flex;gap:10px;flex-wrap:wrap;font-size:12.5px}
details.about{padding:10px 12px;color:#374151;line-height:1.55;font-size:13px}
details.about summary{cursor:pointer;font-weight:600;font-size:13.5px}
details.about p{margin:8px 0 0}
footer{color:var(--muted);font-size:11.5px;padding:4px 2px 14px;margin-top:auto}
.pin{width:30px;height:30px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);display:grid;place-items:center;box-shadow:0 2px 6px rgba(0,0,0,.35);border:2px solid #fff}
.pin b{transform:rotate(45deg);color:#fff;font-size:13px}
.spin{display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,.5);border-top-color:#fff;border-radius:50%;animation:sp .7s linear infinite;vertical-align:-3px}
@keyframes sp{to{transform:rotate(360deg)}}
.in-panel{display:contents}
@media (min-width:761px){ .after-map{display:none} }
@media (max-width:1100px){ :root{--panel:360px} .nav a span{display:none} .nav a{padding:6px 9px} .nav a.on span{display:inline} }

/* ---------- phone / small tablet: header on two rows, panel on top, map below ---------- */
@media (max-width:760px){
  :root{--head:86px}
  header{flex-wrap:wrap;height:var(--head);padding:0 10px;gap:0 10px;align-content:center}
  .logo{height:40px}
  .lang{margin-left:auto}
  .nav{order:3;flex:0 0 100%;padding-bottom:6px}
  .nav a span{display:inline} .nav a{padding:6px 10px;background:#2e2c28}
  .app{display:block;height:auto}
  .panel{overflow:visible;border-right:0;padding:10px;gap:8px}
  .panel h1{font-size:16px} .panel h1 + p{display:none}
  .panel .in-panel{display:none}
  .field input,.inp{height:46px;font-size:16px} /* 16px stops iOS zoom-in */
  .go{height:46px}
  .sugg{top:50px;max-height:46vh}
  .sugg li{padding:12px 10px}
  #map{height:72vh;min-height:360px}
  .leaflet-control-zoom{display:none}
  .after-map{padding:10px;display:flex;flex-direction:column;gap:10px}
  footer{text-align:center;padding-bottom:max(16px, env(safe-area-inset-bottom))}
  .fmt{grid-template-columns:84px 1fr auto}
}
@media (max-width:340px){ .results{grid-template-columns:1fr} }