*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow-x:hidden;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background:#1a1a2e;color:#e0e0e0;overscroll-behavior-y:contain}

/* ===== Navbar ===== */
#navbar{display:flex;align-items:center;height:44px;background:#16213e;border-bottom:1px solid #0f3460;padding:0 12px;z-index:2000;position:relative}
.nav-brand{font-size:15px;font-weight:700;color:#d2ff1a;margin-right:20px;white-space:nowrap}
.nav-tabs{display:flex;gap:2px}
.nav-tab{padding:8px 16px;color:#8899aa;font-size:13px;cursor:pointer;border-radius:4px 4px 0 0;transition:background .15s,color .15s;text-decoration:none;user-select:none}
.nav-tab:hover{color:#ccc;background:rgba(255,255,255,.05)}
.nav-tab.active{color:#d2ff1a;background:#1a1a2e;font-weight:600}
.hamburger{display:none;background:none;border:none;color:#d2ff1a;font-size:22px;cursor:pointer;padding:4px 8px}

/* Connection banner (top-right) */
.conn-banner{
  /* Make it global, centered, high-contrast (works on light maps too) */
  position:fixed;
  left:50%;
  top:54px; /* below navbar */
  transform:translateX(-50%);
  z-index:2500;
  padding:7px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
  max-width:80vw;
  overflow:hidden;
  text-overflow:ellipsis;
  border:1px solid transparent;
  box-shadow:0 6px 18px rgba(0,0,0,.45);
  backdrop-filter: blur(6px);
}
.conn-banner--offline{background:rgba(248,81,73,.18);border-color:rgba(248,81,73,.55);color:#ffb4b0}
.conn-banner--online{background:rgba(63,185,80,.14);border-color:rgba(63,185,80,.5);color:#7ee787}
@media(max-width:600px){
  .nav-tabs{display:none;position:absolute;top:44px;left:0;right:0;background:#16213e;flex-direction:column;border-bottom:1px solid #0f3460;z-index:2001}
  .nav-tabs.open{display:flex}
  .nav-tab{padding:12px 20px;border-radius:0}
  .hamburger{display:block}
}

/* ===== Tab pages ===== */
.tab-page{display:none;height:calc(100vh - 44px);overflow:hidden;position:relative}
@supports (height: 100dvh){
  .tab-page{height:calc(100dvh - 44px)}
}
.tab-page.active{display:block}

/* ===== Map page ===== */
#map{width:100%;height:100%;background:#0e1a2b}
#status{position:absolute;z-index:1000;top:8px;left:8px;background:rgba(22,33,62,.92);padding:6px 12px;border-radius:4px;font-size:13px;color:#d2ff1a;box-shadow:0 2px 6px rgba(0,0,0,.4)}
#sidebar{position:absolute;z-index:1000;top:8px;right:8px;width:280px;max-height:calc(100% - 16px);background:rgba(22,33,62,.95);padding:10px;border-radius:6px;box-shadow:0 2px 8px rgba(0,0,0,.4);font-size:12px;display:flex;flex-direction:column;overflow:hidden}
#sidebar h3{margin:0 0 8px;font-size:13px;border-bottom:1px solid #0f3460;padding-bottom:5px;color:#8899aa;flex-shrink:0}
.vessel-sidebar-heading{font-size:15px;margin:0 0 8px}
.vessel-count-paren{font-weight:600;color:#c9d1d9}
#vessel-count-suffix{color:#8b949e;font-weight:400}
.vessel-list-toolbar{margin-bottom:8px;flex-shrink:0}
.vessel-search-input{width:100%;box-sizing:border-box;padding:6px 8px;margin-bottom:6px;border:1px solid #30363d;border-radius:4px;background:#0d1117;color:#c9d1d9;font-size:12px}
.vessel-search-input::placeholder{color:#6e7681}
.vessel-search-input:focus{outline:none;border-color:#4fc3f7}
.vessel-toolbar-row{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:flex-end}
.vessel-toolbar-label{font-size:10px;color:#8b949e;display:flex;flex-direction:column;gap:2px;min-width:0}
.vessel-toolbar-select{max-width:140px;padding:4px 6px;border-radius:4px;border:1px solid #30363d;background:#161b22;color:#c9d1d9;font-size:11px}
#vessel-list{flex:1;overflow-y:auto;min-height:0}
#range-filter{flex-shrink:0}
.leaflet-control-zoom{display:none}
.leaflet-control-attribution{display:none}
.leaflet-control-layers{background:rgba(22,33,62,.95)!important;border:1px solid #0f3460!important;border-radius:6px!important;color:#e0e0e0!important;box-shadow:0 2px 8px rgba(0,0,0,.4)!important}
.leaflet-control-layers label{color:#ccd}
.leaflet-control-layers-toggle{width:30px!important;height:30px!important;background-color:rgba(22,33,62,.92)!important;border:1px solid #0f3460!important;border-radius:4px!important}
.leaflet-control-layers-expanded{padding:8px 12px 6px!important}
.leaflet-control-layers-base label{margin-bottom:2px;display:flex;align-items:center;gap:6px;font-size:13px;cursor:pointer}

/* Compass UI (inside OwnShip panel) */
.os-compass-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.os-compass{display:inline-flex;align-items:center;gap:8px}
.compass-toggle{
  width:28px;height:28px;
  border-radius:8px;
  border:1px solid #0f3460;
  background:#16213e;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.compass-toggle:hover{border-color:#4fc3f7}
.compass-toggle-dot{
  width:10px;height:10px;border-radius:999px;
  background:#6e7681;
  box-shadow:0 0 0 2px rgba(0,0,0,.25) inset;
}
.compass--rotate-on .compass-toggle-dot{background:#d2ff1a}
.compass-dial{
  position:relative;
  width:34px;height:34px;
  border-radius:999px;
  border:1px solid rgba(210,255,26,.25);
  background:rgba(13,17,23,.55);
  display:flex;
  align-items:center;
  justify-content:center;
}
.compass-arrow{
  width:28px;height:28px;
  transform-origin:50% 50%;
  will-change:transform;
}
.compass-n{
  position:absolute;
  top:-7px;
  left:50%;
  transform:translateX(-50%);
  font-size:10px;
  font-weight:900;
  color:#d2ff1a;
  text-shadow:0 1px 0 rgba(0,0,0,.65);
  user-select:none;
  pointer-events:none;
}
.compass--no-heading{
  opacity:.55;
  border-color:rgba(139,148,158,.35);
}
.vessel-item{padding:7px;margin:4px 0;border:1px solid #0f3460;border-radius:4px;cursor:pointer;transition:background .15s}
.vessel-item:hover{background:rgba(255,255,255,.05)}
.vessel-item.selected{background:rgba(210,255,26,.1);border-color:#d2ff1a}
.vessel-item.vessel-item--no-pos{opacity:.55;cursor:default}
.vessel-item.vessel-item--no-pos:hover{background:transparent}
.vessel-item.vessel-item--no-pos .mmsi{color:#8b949e}
.vessel-item .coords.coords--no-pos{color:#8b949e;font-style:italic}
.vessel-item .vessel-mmsi-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.vessel-item .mmsi{font-weight:700;color:#4fc3f7;flex:1;min-width:0;word-break:break-all}
.vessel-item .vessel-flag{font-size:18px;line-height:1;flex-shrink:0;opacity:.95}
.vessel-item .callsign-row{font-size:11px;color:#8b949e}
.vessel-item .name{color:#8899aa;font-size:11px}
.vessel-item .coords{color:#667;font-size:10px}
#range-filter{border-top:1px solid #0f3460;margin-top:8px;padding-top:6px}
#range-label{font-size:11px;color:#8899aa;margin-bottom:4px}
#range-slider{width:100%;height:4px;-webkit-appearance:none;appearance:none;background:#0f3460;border-radius:2px;outline:none;cursor:pointer}
#range-slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:#d2ff1a;cursor:pointer;border:none}
#range-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#d2ff1a;cursor:pointer;border:none}

/* Generic sliders (danger radii) */
input[type="range"]#set-warn-radius-slider,
input[type="range"]#set-near-radius-slider{
  height:4px;
  -webkit-appearance:none;
  appearance:none;
  background:#0f3460;
  border-radius:2px;
  outline:none;
  cursor:pointer;
}
input[type="range"]#set-warn-radius-slider::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:14px;height:14px;border-radius:50%;
  background:#f85149;
  border:none;
}
input[type="range"]#set-warn-radius-slider::-moz-range-thumb{
  width:14px;height:14px;border-radius:50%;
  background:#f85149;border:none;
}
input[type="range"]#set-near-radius-slider::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:14px;height:14px;border-radius:50%;
  background:#f0883e;
  border:none;
}
input[type="range"]#set-near-radius-slider::-moz-range-thumb{
  width:14px;height:14px;border-radius:50%;
  background:#f0883e;border:none;
}
.vessel-item .dist{color:#d2ff1a;font-size:10px;font-weight:600;display:inline-flex;gap:6px;align-items:baseline}
.vessel-item .dist .dist-val{color:#d2ff1a;font-weight:700}
.vessel-item .dist .brg-val{color:#8b949e;font-weight:600}
.vessel-item .dist .brg-val::before{content:"\2192 ";opacity:.6}

/* Unified SOG/COG/HDG stats row (desktop). Mobile variants override this via
   .sidebar--compact and .targets-list selectors later in the file. */
.vessel-item .compact-stats{
  display:flex;flex-wrap:wrap;gap:4px 8px;
  margin-top:4px;
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:11px;
}
.vessel-item .compact-stats > span{
  display:inline-flex;gap:4px;align-items:baseline;
  padding:1px 5px;
  background:rgba(15,52,96,.4);
  border:1px solid rgba(79,195,247,.16);
  border-radius:3px;
  cursor:help;
  white-space:nowrap;
}
.vessel-item .compact-stats > span:hover{border-color:rgba(79,195,247,.45);background:rgba(15,52,96,.7)}
.vessel-item .compact-stats .k{color:#8b949e;font-weight:600;font-size:9px;letter-spacing:.4px;text-transform:uppercase}
.vessel-item .compact-stats b{color:#e0e0e0;font-weight:700}
#cursor-coords{position:absolute;z-index:1000;bottom:8px;left:8px;background:rgba(22,33,62,.9);padding:5px 10px;border-radius:4px;font-family:monospace;font-size:11px;color:#8899aa}

/* Danger banner (ownship proximity) */
.global-banners{
  position:fixed;
  left:50%;
  top:92px; /* stacked under conn-banner */
  transform:translateX(-50%);
  z-index:2490;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  pointer-events:none;
}
.danger-banner{
  padding:9px 16px;
  border-radius:999px;
  background:rgba(248,81,73,.92);
  border:2px solid rgba(0,0,0,.35);
  color:#ffffff;
  font-size:14px;
  font-weight:900;
  letter-spacing:.8px;
  text-transform:uppercase;
  box-shadow:0 10px 26px rgba(0,0,0,.55);
  user-select:none;
  pointer-events:none;
}

/* Highlight nearby targets */
.leaflet-marker-icon.vessel-nearby{
  filter: drop-shadow(0 0 5px rgba(210,255,26,.9)) drop-shadow(0 0 10px rgba(210,255,26,.35));
}

.vessel-icon{will-change:transform}
.vessel-icon--svg{line-height:0;display:flex;align-items:flex-end;justify-content:center}
.vessel-icon--svg svg{vertical-align:bottom}
.leaflet-marker-icon{transition:none!important}
.vessel-overlay-icon{z-index:1000!important;pointer-events:none}
.vessel-overlay-lost{
  background:transparent!important;
  border:0!important;
}
.vessel-lost-dot{
  display:block;
  width:16px;
  height:16px;
  border-radius:50%;
  background:#8b949e;
  border:1px solid #111;
  box-shadow:0 1px 3px rgba(0,0,0,.75);
}

/* AIS aids (base station / buoy) */
.ais-base-station-icon{
  /* base_station.svg is black strokes only; make it visible on dark map */
  filter: invert(1) brightness(1.25) drop-shadow(0 0 2px rgba(0,0,0,.8));
}
.ais-buoy-icon{
  filter: drop-shadow(0 0 2px rgba(0,0,0,.75));
}
.ais-bs-divicon,.ais-aton-divicon{
  background:transparent!important;
  border:0!important;
}
.ais-bs-symbol,.ais-aton-symbol{
  position:relative;
  width:30px;
  height:30px;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#f0f6fc;
  text-shadow:0 1px 2px rgba(0,0,0,.9);
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.8));
}
.ais-bs-symbol{
  border:2px solid #4fc3f7;
  border-radius:50%;
  background:#0d1117;
}
.ais-bs-mast{
  position:absolute;
  left:14px;
  top:7px;
  width:2px;
  height:17px;
  background:#c9d1d9;
  border-radius:2px;
}
.ais-bs-mast::before,.ais-bs-mast::after{
  content:"";
  position:absolute;
  left:-6px;
  width:14px;
  height:2px;
  background:#c9d1d9;
  border-radius:2px;
}
.ais-bs-mast::before{top:5px}
.ais-bs-mast::after{top:17px}
.ais-bs-waves::before,.ais-bs-waves::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  border:2px solid #4fc3f7;
  border-bottom:0;
  border-radius:18px 18px 0 0;
}
.ais-bs-waves::before{top:4px;width:16px;height:8px}
.ais-bs-waves::after{top:1px;width:24px;height:12px;opacity:.75}
.ais-aton-symbol{
  border:2px solid #0d1117;
  border-radius:50%;
  background:#667;
}
.ais-aton-symbol--fixed{border-radius:6px}
.ais-aton-symbol--floating{border-radius:50% 50% 48% 48%}
.ais-aton-label{
  z-index:1;
  font-size:10px;
  font-weight:900;
  line-height:1;
  letter-spacing:0;
  color:#fff;
}
.ais-aton-symbol--cardinal-n{background:linear-gradient(180deg,#111 0 50%,#ffd84a 50% 100%)}
.ais-aton-symbol--cardinal-e{background:linear-gradient(180deg,#111 0 33%,#ffd84a 33% 66%,#111 66% 100%)}
.ais-aton-symbol--cardinal-s{background:linear-gradient(180deg,#ffd84a 0 50%,#111 50% 100%)}
.ais-aton-symbol--cardinal-w{background:linear-gradient(180deg,#ffd84a 0 33%,#111 33% 66%,#ffd84a 66% 100%)}
.ais-aton-symbol--lateral-port{background:#d72525}
.ais-aton-symbol--lateral-starboard{background:#168a45}
.ais-aton-symbol--preferred-port{background:linear-gradient(180deg,#d72525 0 35%,#168a45 35% 65%,#d72525 65% 100%)}
.ais-aton-symbol--preferred-starboard{background:linear-gradient(180deg,#168a45 0 35%,#d72525 35% 65%,#168a45 65% 100%)}
.ais-aton-symbol--isolated-danger{background:linear-gradient(180deg,#111 0 30%,#d72525 30% 70%,#111 70% 100%)}
.ais-aton-symbol--safe-water{background:linear-gradient(90deg,#d72525 0 32%,#fff 32% 68%,#d72525 68% 100%)}
.ais-aton-symbol--safe-water .ais-aton-label{color:#111;text-shadow:0 1px 2px rgba(255,255,255,.75)}
.ais-aton-symbol--special{background:#ffd84a}
.ais-aton-symbol--special .ais-aton-label{color:#111;text-shadow:none}
.ais-aton-symbol--wreck{background:linear-gradient(90deg,#1976d2 0 50%,#ffd84a 50% 100%)}
.ais-aton-symbol--light{background:#f7f7f7}
.ais-aton-symbol--light .ais-aton-label{color:#111;text-shadow:none}
.ais-aton-symbol--leading{background:#8b5cf6}
.ais-aton-symbol--racon{background:#c678dd}
.ais-aton-symbol--structure{background:#6e7681}
.ais-aton-symbol--light-vessel{background:#f0883e}
.ais-aton-symbol--reference,.ais-aton-symbol--generic{background:#30363d}
.ais-aid--virtual .ais-bs-symbol::after,.ais-aid--virtual .ais-aton-symbol::after,
.ais-aid--synthetic .ais-bs-symbol::after,.ais-aid--synthetic .ais-aton-symbol::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:50%;
  pointer-events:none;
}
.ais-aid--virtual .ais-bs-symbol::after,.ais-aid--virtual .ais-aton-symbol::after{
  border:2px dashed #4fc3f7;
}
.ais-aid--synthetic .ais-bs-symbol::after,.ais-aid--synthetic .ais-aton-symbol::after{
  border:2px dotted #d2ff1a;
}
.ais-aid--offposition .ais-aton-symbol{
  box-shadow:0 0 0 3px rgba(248,81,73,.45),0 0 12px rgba(248,81,73,.9);
}

.transponder-hint{font-size:11px;color:#889;margin:0 0 12px;line-height:1.4}
.transponder-preview{margin:0;padding:10px;background:#0d1117;border:1px solid #30363d;border-radius:6px;font-size:10px;line-height:1.35;white-space:pre-wrap;word-break:break-all;max-height:55vh;overflow:auto;color:#c9d1d9}
.tp-dim{width:64px}
.transponder-raw-hex{width:100%;max-width:720px;box-sizing:border-box;font-family:ui-monospace,monospace;font-size:11px;padding:8px;background:#0d1117;border:1px solid #30363d;border-radius:6px;color:#c9d1d9;resize:vertical}

.ship-type-select{max-width:100%;width:min(560px,100%)}
.ship-type-legend{font-size:10px;color:#889;margin:-4px 0 10px;line-height:1.4}
.ship-type-legend abbr{text-decoration:underline dotted;cursor:help}
.ship-editor-block{margin:14px 0;padding:12px;background:#0d1117;border:1px solid #30363d;border-radius:8px}
.ship-editor-wrap{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start}
.ship-editor-svg{flex-shrink:0;width:min(340px,100%);max-width:100%;height:auto;touch-action:none;cursor:default}
.ship-dim-main{stroke:#8b949e;stroke-width:1.25;fill:none}
.ship-dim-ext{stroke:#484f58;stroke-width:1;stroke-dasharray:3 4;stroke-linecap:square}
.ship-dim-txt{fill:#c9d1d9;font-size:10px;font-family:ui-sans-serif,system-ui,sans-serif}
.ship-dim-group{pointer-events:none}
.ship-axis-lbl--dyn{fill:#667;font-size:10px}
.ship-axis-lbl{fill:#667;font-size:11px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
.ship-hull{fill:rgba(79,195,247,.12);stroke:#4fc3f7;stroke-width:1.5}
.ship-grid{stroke:#30363d;stroke-width:0.6;stroke-dasharray:4 3}
.ship-gps-group{cursor:grab}
.ship-gps-group:active,body.ship-editor-dragging .ship-gps-group{cursor:grabbing}
.ship-gps-hit{fill:transparent;stroke:none;pointer-events:all}
.ship-gps-dot{fill:#58a6ff;stroke:#1f6feb;stroke-width:1.5;pointer-events:none}
.ship-gps-lbl{fill:#e0e0e0;font-size:7px;font-weight:700;pointer-events:none;user-select:none;font-family:system-ui,sans-serif}
.ship-gps-group--template .ship-gps-dot{fill:#8b949e;stroke:#484f58;stroke-dasharray:2 2}
.ship-editor-legend{margin:0;padding-left:18px;max-width:320px;font-size:11px;color:#889;line-height:1.45}
.ship-editor-legend li{margin:4px 0}
.ship-editor-legend strong{color:#c9d1d9}
.ship-edge-handles{pointer-events:all}
.ship-handle circle{fill:rgba(210,255,26,.4);stroke:#c5e636;stroke-width:1.5}
.ship-handle--stern circle{cursor:ns-resize}
.ship-handle--starboard circle{cursor:ew-resize}
.ship-handle:active circle{fill:rgba(210,255,26,.65)}

#ownship-panel{position:absolute;z-index:1000;bottom:8px;right:8px;width:280px;background:rgba(22,33,62,.95);padding:10px 14px;border-radius:6px;font-size:12px;box-shadow:0 2px 8px rgba(0,0,0,.4)}
#ownship-panel h4{margin:0 0 5px;font-size:12px;border-bottom:1px solid #0f3460;padding-bottom:4px;color:#8899aa}
#ownship-panel .row{margin:2px 0}
#ownship-panel .label{color:#667}
.ownship-btn{display:inline-block;padding:4px 10px;margin:3px 3px 0 0;border:1px solid #0f3460;border-radius:4px;background:#16213e;cursor:pointer;font-size:11px;color:#8899aa;transition:all .15s}
.ownship-btn:hover{border-color:#4fc3f7;color:#ccc}
.ownship-btn.active{background:#d2ff1a;border-color:#a8cc14;color:#1a1a2e;font-weight:700}
.ownship-icon{will-change:transform}

/* Mobile panel bar (hidden on desktop) */
#mob-panel-bar{display:none}

/* ===== Mobile map panels =====
   Also enable for phone landscape (small height). */
@media(max-width:600px), (max-height:520px) and (pointer:coarse){
  :root{
    /* mob-panel-bar is disabled, but the vars are kept at 0 so positioning
       calculations (sidebar/ownship-panel/HUD) still evaluate cleanly. */
    --mob-panel-bar-height:0px;
    --mob-panel-bar-width:0px;
    /* JS may set --vv-bottom for WebView/browser UI occlusions */
    --vv-bottom: 0px;
    --vv-top: 0px;
    --vv-right: 0px;
    --vv-left: 0px;
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
  }
  @supports (padding: max(0px, 0px)){
    :root{
      --safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--vv-bottom, 0px));
      --safe-right: max(env(safe-area-inset-right, 0px), var(--vv-right, 0px));
    }
  }
  #mob-panel-bar{
    display:flex;
    position:fixed;
    left:0;right:0;
    bottom:0;
    z-index:1100;
    background:#16213e;
    border-top:1px solid #0f3460;
    padding-bottom:var(--safe-bottom);
    touch-action:none;
    overscroll-behavior:contain;
  }
  /* Visible drag-handle pill so users don't intuitively pull-to-refresh the page */
  #mob-panel-bar::before{
    content:"";
    position:absolute;
    left:50%;top:4px;transform:translateX(-50%);
    width:44px;height:4px;border-radius:3px;
    background:rgba(255,255,255,.28);
    pointer-events:none;
  }
  #mob-panel-bar:active::before{background:rgba(210,255,26,.55)}
  .mob-panel-tab{flex:1;padding:15px 0 9px;background:none;border:none;color:#8899aa;font-size:13px;font-weight:600;cursor:pointer;transition:color .15s,background .15s;border-top:2px solid transparent;touch-action:none}
  .mob-panel-tab:active{background:rgba(255,255,255,.04)}
  .mob-panel-tab.active{color:#d2ff1a;border-top-color:#d2ff1a}
  #sidebar{position:absolute;top:auto;bottom:calc(var(--mob-panel-bar-height) + var(--safe-bottom));left:0;right:0;width:auto;max-height:60vh;border-radius:10px 10px 0 0;z-index:1100;display:none;overscroll-behavior:contain;padding-top:14px}
  #sidebar.mob-open{display:flex}
  #ownship-panel{position:absolute;top:auto;bottom:calc(var(--mob-panel-bar-height) + var(--safe-bottom));left:0;right:0;width:auto;max-height:60vh;overflow-y:auto;border-radius:10px 10px 0 0;z-index:1100;min-width:0;display:none;overscroll-behavior:contain;padding-top:14px}
  #ownship-panel.mob-open{display:block}

  /* Drag-pill grip on top of the mobile bottom-sheet panels (sidebar & ownship-panel)
     — gives the user an intuitive affordance to swipe them down to close, and avoids
     accidentally triggering browser pull-to-refresh while interacting with the sheet. */
  #sidebar.mob-open::before,
  #ownship-panel.mob-open::before{
    content:"";
    position:absolute;
    left:50%;top:5px;transform:translateX(-50%);
    width:44px;height:4px;border-radius:3px;
    background:rgba(255,255,255,.28);
    pointer-events:none;
  }
  #sidebar.mob-swiping,
  #ownship-panel.mob-swiping{
    transition:none;
    will-change:transform;
  }
  #sidebar.mob-swiping::before,
  #ownship-panel.mob-swiping::before{background:rgba(210,255,26,.55)}
  #cursor-coords{bottom:calc(var(--mob-panel-bar-height) + var(--safe-bottom) + 8px);transition:bottom .2s}
}

/* Landscape phone: move mobile buttons + panels to the right */
@media (max-height:520px) and (pointer:coarse){
  #mob-panel-bar{
    left:auto;
    right:0;
    top:44px; /* below navbar */
    bottom:0;
    width:calc(var(--mob-panel-bar-width) + var(--safe-right));
    flex-direction:column;
    border-top:none;
    border-left:1px solid #0f3460;
    padding-bottom:0;
    padding-right:var(--safe-right);
  }
  /* In landscape the bar is on the right — rotate the drag pill 90° */
  #mob-panel-bar::before{
    left:4px;top:50%;transform:translateY(-50%);
    width:4px;height:44px;border-radius:3px;
  }
  .mob-panel-tab{
    padding:12px 10px 12px 14px;
    border-top:none;
    border-left:2px solid transparent;
  }
  .mob-panel-tab.active{
    border-top-color:transparent;
    border-left-color:#d2ff1a;
  }

  #sidebar,
  #ownship-panel{
    top:0;
    bottom:var(--safe-bottom);
    left:auto;
    right:calc(var(--mob-panel-bar-width) + var(--safe-right) + 8px);
    width:min(420px, 40vw);
    max-height:calc(100vh - 44px - var(--safe-bottom));
    border-radius:10px;
  }
  @supports (height: 100dvh){
    #sidebar,
    #ownship-panel{
      max-height:calc(100dvh - 44px - var(--safe-bottom));
    }
  }

  #cursor-coords{
    bottom:8px;
  }
}

/* ===== Stats page ===== */
#page-stats{padding:20px;overflow-y:auto}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin-bottom:20px}
.stat-card{background:#16213e;border:1px solid #0f3460;border-radius:8px;padding:16px}
.stat-card .val{font-size:28px;font-weight:700;color:#d2ff1a}
.stat-card .lbl{font-size:12px;color:#8899aa;margin-top:2px}
.stat-card-test{border-color:#d29922}.stat-card-test .val{color:#f0883e}
.test-ch-detail{font-size:11px;color:#8899aa;margin-top:4px;display:flex;gap:10px}.test-ch-detail b{color:#e0e0e0}
.stat-section{margin-top:20px}
.stat-section h3{font-size:14px;color:#8899aa;margin-bottom:10px;border-bottom:1px solid #0f3460;padding-bottom:6px}
.stat-table{width:100%;border-collapse:collapse;font-size:13px}
.stat-table th,.stat-table td{padding:6px 10px;text-align:left;border-bottom:1px solid #0f3460}
.stat-table th{color:#667;font-weight:400}
.stat-table td{color:#e0e0e0}
.stat-details{background:#16213e;border:1px solid #0f3460;border-radius:8px;padding:10px 12px}
.stat-details>summary{cursor:pointer;user-select:none;color:#4fc3f7;font-size:13px;font-weight:700;outline:none}
.stat-details>summary::-webkit-details-marker{display:none}
.stat-details>summary::before{content:"▸";display:inline-block;margin-right:8px;color:#667;transition:transform .15s}
.stat-details[open]>summary::before{transform:rotate(90deg)}
.stat-adv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin-top:10px}
.stat-adv-card{background:#0d1117;border:1px solid #0f3460;border-radius:8px;padding:10px 12px}
.stat-adv-title{font-size:12px;color:#8899aa;margin-bottom:6px;font-weight:700}
.stat-table-compact th,.stat-table-compact td{padding:4px 8px;font-size:12px}
.stat-k{color:#667;font-family:monospace}
.stat-v{color:#e0e0e0;font-family:monospace;text-align:right}
.stat-v.err{color:#f85149;font-weight:700}

/* ===== Settings page ===== */
#page-settings{padding:20px;overflow-y:auto}
#page-transponder{padding:20px;overflow-y:auto;box-sizing:border-box}
.settings-card{background:#16213e;border:1px solid #0f3460;border-radius:8px;padding:16px;margin-bottom:14px}
.settings-card h3{font-size:14px;color:#8899aa;margin-bottom:10px}
.settings-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid rgba(15,52,96,.5)}
.settings-row:last-child{border-bottom:none}
.settings-label{color:#ccc;font-size:13px}
.settings-value{color:#4fc3f7;font-size:13px;font-family:monospace}

/* Network settings */
.net-mode-btns{display:flex;gap:8px;margin:10px 0}
.net-mode-btn{flex:1;padding:10px 0;text-align:center;border:2px solid #0f3460;border-radius:6px;background:#1a1a2e;cursor:pointer;font-size:13px;font-weight:600;color:#8899aa;transition:all .2s}
.net-mode-btn:hover{border-color:#4fc3f7;color:#ccc}
.net-mode-btn.active{border-color:#d2ff1a;background:rgba(210,255,26,.1);color:#d2ff1a}
.net-input{background:#1a1a2e;border:1px solid #0f3460;color:#e0e0e0;padding:6px 10px;border-radius:4px;font-size:13px;font-family:monospace;width:200px}
.net-input:focus{outline:none;border-color:#4fc3f7}
.net-btn{padding:8px 20px;border:none;border-radius:4px;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s}
.net-btn-primary{background:#d2ff1a;color:#1a1a2e}
.net-btn-primary:hover{background:#b8e016}
.net-btn-danger{background:#f85149;color:#fff}
.net-btn-danger:hover{background:#d63a32}
.net-btn:disabled{opacity:.4;cursor:not-allowed}
.net-status{display:inline-block;padding:3px 10px;border-radius:12px;font-size:11px;font-weight:700}
.net-status.ap{background:rgba(79,195,247,.15);color:#4fc3f7}
.net-status.wifi{background:rgba(210,255,26,.15);color:#d2ff1a}
.net-status.unknown{background:rgba(136,153,170,.15);color:#8899aa}
.net-scan-list{max-height:180px;overflow-y:auto;margin:8px 0}
.net-scan-item{display:flex;justify-content:space-between;align-items:center;padding:6px 10px;border-radius:4px;cursor:pointer;font-size:12px;color:#ccc;transition:background .15s}
.net-scan-item:hover{background:rgba(255,255,255,.05)}
.net-scan-item.selected{background:rgba(210,255,26,.1);color:#d2ff1a}
.net-signal{color:#667;font-size:11px}
.net-msg{padding:8px 12px;border-radius:4px;font-size:12px;margin-top:8px;display:none}
.net-msg.ok{display:block;background:rgba(35,134,54,.15);color:#3fb950}
.net-msg.err{display:block;background:rgba(248,81,73,.15);color:#f85149}
.net-msg.info{display:block;background:rgba(79,195,247,.15);color:#4fc3f7}
.net-toggle-adv{color:#4fc3f7;font-size:12px;cursor:pointer;margin-top:6px;display:inline-block}
.net-toggle-adv:hover{text-decoration:underline}
.net-advanced{display:none;margin-top:10px}
.net-advanced.open{display:block}

/* ===== Logs page ===== */
#page-logs.active{display:flex;flex-direction:column}
.logs-toolbar{display:flex;gap:8px;padding:8px 12px;background:#16213e;border-bottom:1px solid #0f3460;align-items:center;flex-shrink:0}
.logs-toolbar label{font-size:12px;color:#8899aa}
.logs-toolbar select,.logs-toolbar input{background:#1a1a2e;border:1px solid #0f3460;color:#e0e0e0;padding:4px 8px;border-radius:4px;font-size:12px}
.log-btn{padding:4px 12px;border:1px solid #0f3460;border-radius:4px;background:#16213e;color:#8899aa;cursor:pointer;font-size:12px;transition:all .15s}
.log-btn:hover{border-color:#4fc3f7;color:#ccc}
.log-btn.active{background:#d2ff1a;color:#1a1a2e;border-color:#a8cc14;font-weight:600}
#log-output{flex:1;overflow-y:auto;overflow-x:auto;padding:8px 12px;font-family:"Cascadia Mono","Fira Code",monospace;font-size:12px;line-height:1.6;white-space:pre;background:#0d1117}
.log-line{color:#8b949e}
.log-line .ts{color:#484f58}
.log-line.ais{color:#4fc3f7}
.log-line.gps{color:#d2ff1a}
.log-line.unknown{color:#f85149}

/* ===== Config page ===== */
#page-config.active{display:flex;flex-direction:column;background:#0d1117}
.config-toolbar{display:flex;align-items:center;gap:10px;padding:8px 12px;background:#161b22;border-bottom:1px solid #0f3460;flex-shrink:0;font-size:13px;color:#8899aa}
.config-svc-label{font-size:12px;color:#667}
.config-svc-badge{display:inline-block;padding:2px 10px;border-radius:12px;font-size:11px;font-weight:700}
.config-svc-badge.active{background:rgba(63,185,80,.15);color:#3fb950}
.config-svc-badge.inactive{background:rgba(248,81,73,.15);color:#f85149}
.config-svc-badge.unknown{background:rgba(136,153,170,.15);color:#8899aa}
.config-body{flex:1;display:flex;flex-direction:column;padding:12px;min-height:0}
.config-tabs{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.config-tab{padding:6px 10px;border:1px solid #0f3460;border-radius:6px;background:#1a1a2e;color:#8899aa;font-size:12px;font-weight:700;cursor:pointer}
.config-tab.active{border-color:#d2ff1a;color:#d2ff1a;background:rgba(210,255,26,.08)}
.config-file-hint{font-size:11px;color:#667;font-family:monospace}
.config-editor{flex:1;min-height:200px;background:#0d1117;color:#e0e0e0;border:1px solid #30363d;border-radius:6px;padding:12px;font-family:"Cascadia Mono","Fira Code","JetBrains Mono",monospace;font-size:13px;line-height:1.6;resize:none;tab-size:4;white-space:pre;overflow:auto}
.config-editor:focus{outline:none;border-color:#58a6ff}
.config-actions{display:flex;align-items:center;gap:8px;margin-top:10px;flex-wrap:wrap}
.config-msg{font-size:12px;white-space:nowrap}
.config-msg.ok{color:#3fb950}
.config-msg.err{color:#f85149}
.config-msg.info{color:#4fc3f7}
.config-hint{margin-top:8px;font-size:11px;color:#484f58;font-family:monospace}

/* ===== Console (xterm.js) ===== */
#page-console.active{display:flex;flex-direction:column;background:#0d1117}
.console-toolbar{display:flex;align-items:center;gap:10px;padding:8px 12px;background:#161b22;border-bottom:1px solid #0f3460;flex-shrink:0;font-size:12px;color:#8899aa}
.console-toolbar code{color:#4fc3f7;font-size:11px}
#terminal-wrap{flex:1;min-height:0;padding:0 8px 8px;box-sizing:border-box;display:none}
#terminal-wrap .xterm{height:100%;padding:6px 0}
#terminal-unavailable{display:none;padding:24px;color:#8899aa;font-size:13px;line-height:1.5;max-width:520px}

/* ===== Slots TDMA section ===== */
.slots-section{margin-top:20px}
.slots-header{display:flex;align-items:center;gap:8px;padding:12px 16px;background:#16213e;border:1px solid #0f3460;border-radius:8px;cursor:pointer;user-select:none;font-size:14px;color:#8899aa;transition:background .15s}
.slots-header:hover{background:#1a2744}
.slots-arrow{font-size:10px;color:#667;display:inline-block;transition:transform .2s}
.slots-arrow.open{transform:rotate(90deg)}
.slots-content{display:none;margin-top:8px}
.slots-content.open{display:block}
.slots-channels{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:960px){.slots-channels{grid-template-columns:1fr}}
.slots-channel{background:#16213e;border:1px solid #0f3460;border-radius:8px;padding:14px}
.slots-ch-title{font-size:13px;font-weight:700;color:#4fc3f7;margin-bottom:6px}
.slots-info{font-size:12px;color:#8899aa;margin-bottom:8px;font-family:monospace}
.slots-no-data{font-size:12px;color:#484f58;font-style:italic}
.slots-channel canvas{display:block;border-radius:4px;background:#0d1117;max-width:100%}
.slots-canvas-wrap{display:block;overflow:auto;border-radius:4px;background:#0d1117}
.slots-canvas-wrap canvas{max-width:none}
.slots-legend{margin-top:12px;display:flex;gap:18px;font-size:12px;color:#8899aa}
.slots-legend-item{display:flex;align-items:center;gap:5px}
.slots-legend-box{display:inline-block;width:12px;height:12px;border-radius:2px}
.slots-legend-box.free{background:#238636}
.slots-legend-box.occ{background:#f85149}
.slots-test-send{margin-top:14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.slots-test-label{font-size:12px;color:#8899aa;white-space:nowrap}
.slots-test-input{background:#0d1117;border:1px solid #30363d;border-radius:4px;color:#e0e0e0;padding:5px 8px;font-size:12px;font-family:inherit}
.slots-test-input:focus{outline:none;border-color:#58a6ff}
.slots-test-btn{background:#238636;color:#fff;border:none;border-radius:4px;padding:5px 14px;font-size:12px;cursor:pointer;white-space:nowrap;transition:background .15s}
.slots-test-btn:hover{background:#2ea043}
.slots-test-btn:active{background:#196c2e}
.slots-test-btn:disabled{background:#21262d;color:#484f58;cursor:not-allowed}
.slots-test-status{font-size:11px;white-space:nowrap}
.slots-test-status.ok{color:#3fb950}
.slots-test-status.err{color:#f85149}
.slots-test-status.wait{color:#d29922}
.slots-selected-info{margin-top:8px;font-size:12px;color:#8899aa;font-family:monospace;min-height:16px}
.slots-bar{height:6px;border-radius:3px;background:#0d1117;margin-bottom:10px;overflow:hidden}
.slots-bar-fill{height:100%;border-radius:3px;transition:width .3s}
.slots-tooltip{position:fixed;z-index:9999;pointer-events:none;background:rgba(22,33,62,.95);border:1px solid #0f3460;border-radius:4px;padding:4px 8px;font-size:11px;color:#e0e0e0;font-family:monospace;white-space:nowrap;display:none;box-shadow:0 2px 8px rgba(0,0,0,.5)}
.slots-rssi-label{font-size:11px;color:#667;margin-bottom:4px}
.slots-channel canvas.rssi-chart{width:100%;height:90px;margin-bottom:8px}
.slots-rssi-legend{display:flex;gap:14px;font-size:11px;color:#8899aa;margin-top:4px;margin-bottom:6px}
.slots-rssi-legend span::before{content:'';display:inline-block;width:16px;height:2px;margin-right:4px;vertical-align:middle}

/* ===================================================================
   Vessel InfoWindow (MarineTraffic-style)
   - Desktop: floating, draggable card anchored inside map area
   - Mobile : full-width bottom-sheet above the mob-panel-bar
   =================================================================== */
.vinf{
  position:absolute;
  z-index:1200;
  top:64px; left:8px;
  width:360px;
  max-width:calc(100vw - 16px);
  background:#16213e;
  border:1px solid #0f3460;
  border-radius:10px;
  box-shadow:0 10px 28px rgba(0,0,0,.55);
  color:#e0e0e0;
  font-size:12px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  user-select:none;
  touch-action:none;
}
.vinf[hidden]{display:none!important}
/* Drag/grip strip at the top (mobile pill + desktop subtle handle) */
.vinf-grip{
  position:relative;
  height:14px;
  flex-shrink:0;
  background:#0f3460;
  cursor:grab;
  display:none;
}
.vinf-grip::before{
  content:"";
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:40px;height:4px;border-radius:3px;
  background:rgba(255,255,255,.22);
}
.vinf-grip:hover::before{background:rgba(255,255,255,.36)}
.vinf-grip:active{cursor:grabbing}
.vinf-header{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  background:#0f3460;
  border-bottom:1px solid #0f3460;
  cursor:grab;
}
.vinf-header:active{cursor:grabbing}
/* Collapsed-mode mini stats (hidden in the expanded view) */
.vinf-mini{
  display:none;
  gap:10px;
  font-size:11px;color:#8b949e;
  font-family:ui-monospace,monospace;
}
.vinf-mini b{color:#c9d1d9;font-weight:700}
/* Collapsed state: hide body/footer via clip; keep header + mini stats visible */
.vinf-body,.vinf-footer{
  transition:max-height .22s ease, opacity .18s ease, padding .22s ease, border-color .18s ease;
  will-change:max-height,opacity;
  overflow:hidden;
}
.vinf--collapsed .vinf-sub{display:none}
.vinf--collapsed .vinf-mini{display:flex}
.vinf--collapsed .vinf-header{border-bottom-color:transparent}
.vinf--collapsed .vinf-body{max-height:0!important;opacity:0;padding-top:0;padding-bottom:0;pointer-events:none;border-color:transparent}
.vinf--collapsed .vinf-footer{max-height:0!important;opacity:0;padding-top:0;padding-bottom:0;border-top-color:transparent;pointer-events:none}
/* Collapse button icon swap (chevron down when expanded → becomes up when collapsed) */
.vinf-ic-expand{display:block}
.vinf-ic-collapse{display:none}
.vinf--collapsed .vinf-ic-expand{display:none}
.vinf--collapsed .vinf-ic-collapse{display:block}
.vinf-icon{
  width:34px; height:34px;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#0d1117;
  border-radius:6px;
  border:1px solid rgba(255,255,255,.08);
}
.vinf-icon svg{display:block;width:26px;height:26px}
.vinf-title{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;line-height:1.2}
.vinf-name{
  font-size:14px;font-weight:700;color:#e0e0e0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.vinf-sub{
  font-size:10px;color:#8b949e;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  display:flex;align-items:center;gap:6px;
}
.vinf-flag{
  display:inline-block;
  font-size:14px;line-height:1;
}
.vinf-btn{
  background:transparent;border:none;color:#8b949e;
  cursor:pointer;padding:4px 6px;border-radius:4px;
  display:flex;align-items:center;justify-content:center;
}
.vinf-btn:hover{color:#e0e0e0;background:rgba(255,255,255,.06)}
.vinf-btn svg{display:block;width:18px;height:18px}
.vinf-drag-handle{
  color:#667;padding:4px 2px;cursor:grab;
  display:inline-flex;align-items:center;
}

/* Body */
.vinf-body{
  padding:10px;
  display:flex;
  flex-direction:column;
  gap:10px;
  max-height:60vh;
  overflow-y:auto;
  user-select:text;
  touch-action:auto;
}
.vinf-voyage{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:6px 10px;
  align-items:center;
  background:#0d1117;
  border:1px solid rgba(255,255,255,.05);
  border-radius:6px;
  padding:8px 10px;
}
.vinf-port{
  font-size:13px;font-weight:700;color:#c9d1d9;
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.vinf-port--right{text-align:right}
.vinf-port-country{color:#667;font-weight:500;margin-right:4px;font-size:11px}
.vinf-voyage-arrow{
  color:#4fc3f7;font-size:14px;display:flex;align-items:center;justify-content:center;
  padding:0 2px;
}
.vinf-eta{
  grid-column:1/-1;
  display:flex;justify-content:space-between;gap:10px;
  font-size:11px;color:#8b949e;
  border-top:1px dashed rgba(255,255,255,.08);
  padding-top:6px;margin-top:2px;
}
.vinf-eta b{color:#c9d1d9}
.vinf-progress{
  height:4px;background:#0d1117;border-radius:2px;overflow:hidden;
  margin:6px 0 2px;
  grid-column:1/-1;
}
.vinf-progress-fill{height:100%;background:linear-gradient(90deg,#4fc3f7,#d2ff1a);border-radius:2px}

/* 2x2 grid: nav / speed-course / draught / heading */
.vinf-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  background:rgba(255,255,255,.05);
  border-radius:6px;
  overflow:hidden;
}
.vinf-cell{
  background:#0d1117;
  padding:7px 10px;
  display:flex;flex-direction:column;gap:3px;
  min-width:0;
}
.vinf-cell-lbl{font-size:10px;color:#667;text-transform:uppercase;letter-spacing:.4px}
.vinf-cell-val{font-size:13px;font-weight:700;color:#c9d1d9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vinf-cell-val--wrap{white-space:normal;line-height:1.25;overflow:visible;text-overflow:clip}
.vinf-cell-val.dim{color:#667;font-weight:500;font-style:italic}

/* Identifiers (MMSI/IMO/Callsign) */
.vinf-ids{
  display:flex;flex-wrap:wrap;gap:6px 14px;
  font-size:11px;color:#8b949e;
  padding:4px 2px;
}
.vinf-ids b{color:#c9d1d9;font-family:ui-monospace,monospace}
.vinf-ids a{color:#4fc3f7;text-decoration:none}
.vinf-ids a:hover{text-decoration:underline}

/* Signal block */
.vinf-signal{
  display:flex;align-items:center;gap:10px;
  padding:6px 10px;
  background:#0d1117;
  border-radius:6px;
  font-size:11px;color:#8b949e;
}
.vinf-signal-bars{
  display:inline-flex;align-items:flex-end;gap:2px;
  height:14px;
}
.vinf-signal-bar{
  width:3px;background:#30363d;border-radius:1px;
}
.vinf-signal-bar.on{background:#3fb950}
.vinf-signal-bar.warn{background:#d29922}
.vinf-signal-bar.bad{background:#f85149}
.vinf-signal b{color:#c9d1d9}
.vinf-signal .sig-db{font-family:ui-monospace,monospace;color:#c9d1d9}

/* Actions */
.vinf-actions{
  display:flex;flex-wrap:wrap;gap:6px;
  padding:2px 0;
}
.vinf-act{
  display:inline-flex;align-items:center;gap:5px;
  padding:6px 10px;
  background:#16213e;
  border:1px solid #0f3460;
  border-radius:6px;
  color:#c9d1d9;
  font-size:11px;font-weight:600;
  cursor:pointer;
  transition:border-color .15s,color .15s,background .15s;
}
.vinf-act:hover{border-color:#4fc3f7;color:#e0e0e0}
.vinf-act.primary{background:rgba(79,195,247,.12);border-color:#4fc3f7;color:#4fc3f7}
.vinf-act.primary:hover{background:rgba(79,195,247,.22)}
.vinf-act svg{width:14px;height:14px}

/* Footer */
.vinf-footer{
  padding:6px 10px;
  background:#0d1117;
  font-size:10px;color:#667;
  display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.04);
}
.vinf-footer b{color:#c9d1d9}

/* Mobile: bottom-sheet — fixed above the mob-panel-bar */
@media(max-width:600px), (max-height:520px) and (pointer:coarse){
  .vinf{
    position:absolute;
    top:auto;
    left:0;right:0;
    bottom:calc(var(--mob-panel-bar-height, 42px) + var(--safe-bottom, 0px));
    width:auto;
    max-width:none;
    border-radius:10px 10px 0 0;
    max-height:70vh;
    transition:max-height .22s ease;
  }
  .vinf-grip{display:block}
  .vinf-header{cursor:default}
  .vinf-body{max-height:50vh}
  /* Collapsed on mobile: shrink the whole sheet to just the grip + header */
  .vinf.vinf--collapsed{max-height:72px}
}
@media (max-height:520px) and (pointer:coarse){
  /* landscape: panel on the right side like sidebar */
  .vinf{
    top:52px;
    bottom:var(--safe-bottom,0px);
    left:auto;right:calc(var(--mob-panel-bar-width,72px) + var(--safe-right,0px) + 8px);
    width:min(420px,44vw);
    max-width:none;
    border-radius:10px;
  }
  /* Landscape collapsed: shrink width instead of height for a cleaner look */
  .vinf.vinf--collapsed{
    width:min(260px,38vw);
    max-height:none;
  }
}

/* ===================================================================
   Map controls (centre / north-up / ruler / one-hand / zoom)
   =================================================================== */
.map-controls{
  position:absolute;
  z-index:1000;
  top:8px; left:50%;
  transform:translateX(-50%);
  display:flex;gap:4px;
  background:rgba(22,33,62,.92);
  border:1px solid #0f3460;
  border-radius:8px;
  padding:3px;
  box-shadow:0 2px 8px rgba(0,0,0,.4);
}
.map-ctrl{
  width:32px;height:32px;
  border:none;border-radius:6px;
  background:transparent;color:#c9d1d9;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:700;line-height:1;
  transition:background .15s,color .15s;
}
.map-ctrl:hover{background:rgba(255,255,255,.08);color:#d2ff1a}
.map-ctrl:active{background:rgba(255,255,255,.14)}
.map-ctrl.active{background:rgba(210,255,26,.14);color:#d2ff1a}
.map-ctrl svg{display:block}

/* On mobile, put the control strip to the top-right corner to leave more
   horizontal space for the conn-banner, and make it vertical. */
@media(max-width:600px){
  .map-controls{
    top:52px;
    left:auto;right:8px;
    transform:none;
    flex-direction:column;
  }
}

/* Leaflet scale bar (enabled via L.control.scale) */
.leaflet-control-scale{
  margin:0 !important;
}
.leaflet-control-scale-line{
  background:rgba(22,33,62,.85)!important;
  color:#d2ff1a!important;
  border:1px solid rgba(210,255,26,.35)!important;
  border-top:none!important;
  padding:1px 6px!important;
  font-size:10px!important;
  line-height:1.3!important;
  font-weight:600;
}

/* ===================================================================
   One-hand zoom pad (big thumb-reach buttons, toggled on)
   =================================================================== */
.onehand-pad{
  position:absolute;
  right:8px; bottom:60px;
  z-index:1150;
  display:flex;flex-direction:column;gap:8px;
}
.onehand-pad[hidden]{display:none!important}
.onehand-btn{
  width:54px;height:54px;
  border-radius:50%;
  border:1px solid #0f3460;
  background:rgba(22,33,62,.92);
  color:#d2ff1a;
  font-size:26px;font-weight:800;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 12px rgba(0,0,0,.45);
  touch-action:manipulation;
}
.onehand-btn:active{background:rgba(22,33,62,1);transform:scale(.96)}
.onehand-btn#oh-center{color:#4fc3f7}
/* On landscape-compact, push it next to the mob-panel-bar on the right side */
@media (max-height:520px) and (pointer:coarse){
  .onehand-pad{right:calc(var(--mob-panel-bar-width,72px) + var(--safe-right,0px) + 8px); bottom:16px}
}

/* ===================================================================
   Ruler tool
   =================================================================== */
.ruler-hud{
  position:absolute;z-index:1250;
  top:58px; left:50%;transform:translateX(-50%);
  background:rgba(22,33,62,.94);
  border:1px solid #4fc3f7;
  border-radius:999px;
  padding:6px 14px;
  color:#c9d1d9;
  font-size:12px;font-weight:600;
  box-shadow:0 4px 14px rgba(0,0,0,.5);
  pointer-events:auto;
  display:flex;align-items:center;gap:10px;
}
.ruler-hud[hidden]{display:none!important}
.ruler-hud .dist{color:#d2ff1a;font-weight:700;font-family:ui-monospace,monospace}
.ruler-hud .hint{color:#8b949e;font-weight:500}
.ruler-hud button{
  background:transparent;border:1px solid transparent;color:#8b949e;
  font-size:12px;cursor:pointer;border-radius:4px;padding:2px 6px;
}
.ruler-hud button:hover{color:#f85149;border-color:#f85149}
body.ruler-active .leaflet-container{cursor:crosshair !important}

/* ===================================================================
   Targets tab page (full list; desktop has same data in #sidebar)
   =================================================================== */
#page-targets.active{display:flex;flex-direction:column;background:#1a1a2e}
.targets-page-inner{
  flex:1;min-height:0;
  display:flex;flex-direction:column;
  padding:14px 16px 0;
  max-width:860px;
  margin:0 auto;
  width:100%;
  box-sizing:border-box;
}
.targets-page-inner h3{
  font-size:17px;margin:0 0 10px;color:#c9d1d9;
  border-bottom:1px solid #0f3460;padding-bottom:8px;
}
.targets-list{
  flex:1;min-height:0;overflow-y:auto;padding-bottom:16px;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:8px;align-content:start;
}
.targets-list .vessel-item{margin:0;background:#16213e}
.targets-list .vessel-item:hover{background:rgba(255,255,255,.05)}

/* Only show the page-targets tab on mobile; on desktop we keep the sidebar */
.nav-tab--targets{display:none}
@media(max-width:600px){
  .nav-tab--targets{display:inline-block}
}

/* ===================================================================
   Mobile compact "nearby" sidebar: MMSI / COG / SOG / HDG / BRG / DIST
   =================================================================== */
.sidebar--compact .vessel-item{
  display:grid;
  grid-template-columns:auto 1fr auto;
  grid-template-areas:
    "mmsi  name  dist"
    "stats stats stats";
  gap:2px 8px;
  padding:6px 8px;
  align-items:center;
}
.sidebar--compact .vessel-item .vessel-mmsi-row{grid-area:mmsi;display:flex;gap:6px;align-items:center}
.sidebar--compact .vessel-item .mmsi{font-size:12px}
.sidebar--compact .vessel-item .name{grid-area:name;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar--compact .vessel-item .dist{grid-area:dist;display:flex;flex-direction:column;align-items:flex-end;font-size:11px;line-height:1.15;gap:1px}
.sidebar--compact .vessel-item .dist .dist-val{color:#d2ff1a;font-weight:700}
.sidebar--compact .vessel-item .dist .brg-val{color:#8b949e;font-size:10px}
.sidebar--compact .vessel-item .dist .brg-val::before{content:"\2192 ";opacity:.6}
.sidebar--compact .vessel-item .compact-stats{
  grid-area:stats;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(58px, 1fr));
  gap:3px 6px;
  font-size:10px;color:#8b949e;font-family:ui-monospace,monospace;
}
.sidebar--compact .vessel-item .compact-stats > span{
  display:flex;align-items:baseline;gap:4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  cursor:help;
}
.sidebar--compact .vessel-item .compact-stats .k{color:#667;font-weight:500}
.sidebar--compact .vessel-item .compact-stats b{color:#c9d1d9;font-weight:600}
.sidebar--compact .vessel-item .callsign-row,
.sidebar--compact .vessel-item .coords,
.sidebar--compact .vessel-item > div:not(.vessel-mmsi-row):not(.name):not(.dist):not(.compact-stats){
  display:none;
}

/* ===================================================================
   Targets tab full list: readable stats grid with labels
   =================================================================== */
.targets-list .vessel-item{
  display:grid;
  grid-template-columns:auto 1fr auto;
  grid-template-areas:
    "mmsi  name   dist"
    "stats stats  stats";
  gap:4px 10px;
  padding:10px 12px;
}
.targets-list .vessel-item .vessel-mmsi-row{grid-area:mmsi;display:flex;gap:6px;align-items:center}
.targets-list .vessel-item .name{grid-area:name;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.targets-list .vessel-item .dist{grid-area:dist;display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-size:12px;line-height:1.15}
.targets-list .vessel-item .dist .dist-val{color:#d2ff1a;font-weight:700}
.targets-list .vessel-item .dist .brg-val{color:#8b949e;font-size:11px;font-weight:600}
.targets-list .vessel-item .dist .brg-val::before{content:"\2192 ";opacity:.6}
.targets-list .vessel-item > div:not(.vessel-mmsi-row):not(.name):not(.dist):not(.compact-stats){
  display:none;
}
.targets-list .compact-stats{
  grid-area:stats;
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(84px, 1fr));
  gap:4px 6px;
  margin-top:2px;
  font-family:ui-monospace,monospace;
}
.targets-list .compact-stats > span{
  display:flex;flex-direction:column;
  align-items:flex-start;
  padding:4px 6px;
  background:rgba(15,52,96,.55);
  border:1px solid rgba(79,195,247,.18);
  border-radius:5px;
  cursor:help;
  line-height:1.1;
  min-width:0;
}
.targets-list .compact-stats > span:hover{
  border-color:rgba(79,195,247,.5);
  background:rgba(15,52,96,.85);
}
.targets-list .compact-stats .k{
  font-size:9px;font-weight:700;
  letter-spacing:.6px;
  color:#8b949e;
  text-transform:uppercase;
}
.targets-list .compact-stats b{
  font-size:12px;color:#e0e0e0;font-weight:700;
  max-width:100%;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* ===================================================================
   Nearby HUD — semi-transparent corner overlay that shows own ship
   (speed / coords / compass) plus up to 5 nearest targets (or a single
   currently selected target with a clear-X). Replaces the mobile
   bottom tab-bar as the primary in-field readout.
   =================================================================== */
.nearby-hud{
  position:absolute;
  z-index:1000;
  left:8px;
  bottom:8px;
  width:min(290px, 42vw);
  max-height:min(50vh, 540px);
  background:rgba(13,17,23,.72);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(210,255,26,.22);
  border-radius:10px;
  color:#c9d1d9;
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:11px;
  box-shadow:0 4px 14px rgba(0,0,0,.45);
  display:flex;flex-direction:column;
  overflow:hidden;
  transition:max-height .2s ease, opacity .2s ease;
}
.nearby-hud.is-empty{opacity:.6}
.nearby-hud.is-collapsed{
  max-height:54px;
}
.nearby-hud.is-collapsed .nearby-hud__list,
.nearby-hud.is-collapsed .nhud-own__coords,
.nearby-hud.is-collapsed .nhud-own__src{display:none}
.nearby-hud.is-collapsed .nhud-compass{transform:scale(.82);margin-right:4px}

.nearby-hud__own{
  padding:6px 8px 5px 8px;
  border-bottom:1px solid rgba(79,195,247,.14);
}
.nhud-own__row{display:flex;gap:8px;align-items:center}
.nhud-own__info{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.nhud-own__line{display:flex;gap:6px;align-items:baseline}
.nhud-k{color:#8b949e;font-weight:600;font-size:10px;text-transform:uppercase;letter-spacing:.4px}
.nhud-own__line b{color:#d2ff1a;font-weight:700;font-size:13px}
.nhud-own__coords{color:#c9d1d9;font-size:10px;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nhud-own__src{color:#667;font-size:9px;text-transform:uppercase;letter-spacing:.5px}
.nhud-own__src.nhud-own__src--err{color:#f85149;text-transform:none;letter-spacing:0}

.nhud-compass{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  flex:0 0 auto;
}
.nhud-compass svg{display:block}
.nhud-compass-needle{
  transition:transform .25s ease;
}
.nhud-compass.no-data .nhud-compass-needle{opacity:.3}
.nhud-compass-val{
  position:absolute;left:50%;top:55%;transform:translate(-50%, -50%);
  pointer-events:none;
  font-size:9px;font-weight:700;color:#d2ff1a;
  background:rgba(13,17,23,.6);padding:0 3px;border-radius:3px;
  letter-spacing:.3px;
  display:none;
}
.nhud-compass.has-val .nhud-compass-val{display:inline-block}
.nhud-compass.from-phone{box-shadow:0 0 0 2px rgba(79,195,247,.28) inset;border-radius:50%}
.nhud-compass.is-rotating-map{box-shadow:0 0 0 2px rgba(210,255,26,.55) inset;border-radius:50%}
.nhud-compass:hover{filter:brightness(1.1)}

.nearby-hud__list{
  flex:1;min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
}
.nearby-hud__list::-webkit-scrollbar{width:4px}
.nearby-hud__list::-webkit-scrollbar-thumb{background:rgba(210,255,26,.25);border-radius:2px}

.nhud-item{
  position:relative;
  padding:5px 8px 5px 8px;
  border-bottom:1px solid rgba(79,195,247,.08);
  cursor:pointer;
  transition:background .12s;
}
.nhud-item:last-child{border-bottom:none}
.nhud-item:hover{background:rgba(210,255,26,.07)}
.nhud-item.is-selected{background:rgba(210,255,26,.12);border-left:3px solid #d2ff1a;padding-left:5px}
.nhud-item__top{display:flex;gap:6px;align-items:baseline;justify-content:space-between}
.nhud-item__id{
  display:flex;gap:4px;align-items:baseline;min-width:0;flex:1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.nhud-item__name{color:#c9d1d9;font-weight:600;font-size:11px;overflow:hidden;text-overflow:ellipsis}
.nhud-item__callsign{color:#8b949e;font-size:9px}
.nhud-item__mmsi{color:#667;font-size:9px;font-weight:500}
.nhud-item__dist{color:#d2ff1a;font-weight:700;font-size:11px;white-space:nowrap;flex:0 0 auto}
.nhud-item__bot{display:flex;gap:8px;align-items:baseline;margin-top:1px;color:#8b949e;font-size:10px}
.nhud-item__bot .k{color:#667;margin-right:2px;font-size:9px}
.nhud-item__bot b{color:#c9d1d9;font-weight:600}
.nhud-item__brg::before{content:"\2192 ";opacity:.6}
.nhud-item__coords{color:#667;font-size:9px;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.nhud-item__clear{
  position:absolute;right:4px;top:4px;
  width:20px;height:20px;border-radius:50%;
  background:rgba(248,81,73,.15);color:#f85149;
  border:1px solid rgba(248,81,73,.35);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:12px;font-weight:700;line-height:1;
  padding:0;
}
.nhud-item__clear:hover{background:rgba(248,81,73,.3)}

.nearby-hud__toggle{
  position:absolute;top:2px;right:2px;
  width:22px;height:22px;
  background:transparent;border:none;border-radius:4px;
  color:#8b949e;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  z-index:2;
  transition:transform .2s ease, color .15s;
}
.nearby-hud__toggle:hover{color:#d2ff1a}
.nearby-hud.is-collapsed .nearby-hud__toggle{transform:rotate(180deg)}

.nhud-empty{
  padding:10px 8px;color:#667;text-align:center;font-size:10px;
}

/* Mobile layout: wider, anchored above the mob-panel-bar. */
@media(max-width:600px), (max-height:520px) and (pointer:coarse){
  .nearby-hud{
    left:8px;right:8px;
    width:auto;
    bottom:calc(var(--mob-panel-bar-height, 42px) + var(--safe-bottom, 0px) + 8px);
    max-height:38vh;
  }
  /* When the bottom sheets (sidebar / ownship-panel) are open, hide the HUD to avoid stacking. */
  #sidebar.mob-open ~ .nearby-hud,
  #ownship-panel.mob-open ~ .nearby-hud{display:none}
}
@media (max-height:520px) and (pointer:coarse){
  .nearby-hud{
    left:8px;
    bottom:calc(8px + var(--safe-bottom, 0px));
    right:calc(var(--mob-panel-bar-width, 72px) + var(--safe-right, 0px) + 8px);
    max-height:calc(100vh - 52px - var(--safe-bottom, 0px));
  }
}