/* SlipLanding PWA — dark nautical design system */
:root{
  --navy:#081826; --navy2:#0d2431; --panel:#0e2a38f2; --line:#1d4254;
  --aqua:#5fd4ae; --cyan:#2aa8c4; --gold:#f2b950; --red:#e06666;
  --ink:#e8f2f4; --dim:#8fb0bc; --sim:#f2b950;
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html,body{height:100%;overscroll-behavior:none}
body{font:15px/1.45 "Inter",system-ui,sans-serif;color:var(--ink);background:var(--navy);
  -webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
#app{position:fixed;inset:0}
#map{position:absolute;inset:0;background:var(--navy)}
.leaflet-container{font:inherit;background:var(--navy)}
.leaflet-tile{filter:brightness(.82) saturate(.8)}

/* ---------- top bar ---------- */
#topbar{position:absolute;top:0;left:0;right:0;z-index:1000;display:flex;
  align-items:center;justify-content:space-between;gap:8px;
  padding:calc(8px + var(--safe-t)) 12px 8px;pointer-events:none}
#topbar>*{pointer-events:auto}
.brand{display:flex;align-items:center;gap:8px;padding:6px 12px 6px 8px;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  font-weight:600;letter-spacing:.02em;backdrop-filter:blur(8px)}
.brand .mark{width:26px;height:26px;border-radius:7px}
.pills{display:flex;gap:6px}
.pill{padding:7px 10px;border-radius:12px;background:var(--panel);
  border:1px solid var(--line);color:var(--dim);font-size:12px;font-weight:600;
  backdrop-filter:blur(8px);white-space:nowrap}
.pill.ok{color:var(--aqua)} .pill.warn{color:var(--gold)} .pill.err{color:var(--red)}
.pill.sim{background:#3a2e12;border-color:#6b5518;color:var(--sim)}
.pill.dim{color:var(--gold)}

/* ---------- instrument HUD ---------- */
#hud{position:absolute;top:calc(60px + var(--safe-t));left:50%;z-index:999;
  transform:translateX(-50%);display:flex;background:var(--panel);
  border:1px solid var(--line);border-radius:14px;padding:7px 2px;
  backdrop-filter:blur(8px);box-shadow:0 4px 16px #0007}
body.arr #hud{top:calc(118px + var(--safe-t))}
.inst{display:flex;flex-direction:column;align-items:center;min-width:74px;
  padding:0 13px;border-right:1px solid var(--line)}
.inst:last-child{border-right:0}
.inst .v{font-size:21px;font-weight:800;color:var(--aqua);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.inst .u{font-size:11px;color:var(--cyan);margin-left:2px;font-weight:700}
.inst .v2{font-size:10px;color:var(--dim);font-variant-numeric:tabular-nums;min-height:12px}
.inst label{font-size:8.5px;letter-spacing:.12em;color:var(--dim);margin-top:1px}

/* ---------- arrival banner ---------- */
#arriveBar{position:absolute;top:calc(64px + var(--safe-t));left:12px;right:12px;
  z-index:1000;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 12px;background:linear-gradient(90deg,#12394a,#0e2a38f2);
  border:1px solid var(--aqua);border-radius:14px;box-shadow:0 6px 24px #0008}
#arriveBar strong{color:var(--aqua);display:block;font-size:13px;letter-spacing:.06em;text-transform:uppercase}
#arriveBar span{font-size:13px;color:var(--ink)}

/* ---------- right controls ---------- */
#controls{position:absolute;right:10px;top:calc(50% - 90px);z-index:1000;
  display:flex;flex-direction:column;gap:8px}
.ctl{width:46px;height:46px;border-radius:14px;background:var(--panel);
  border:1px solid var(--line);font-size:19px;display:grid;place-items:center;
  backdrop-filter:blur(8px);box-shadow:0 4px 14px #0006}
.ctl:active{transform:scale(.94)}
.ctl.accent{background:#123c33;border-color:var(--aqua);color:var(--aqua)}
.ctl.on{outline:2px solid var(--aqua)}

/* ---------- bottom sheet ---------- */
#sheet{position:absolute;left:0;right:0;bottom:0;z-index:1001;
  background:var(--panel);border-top:1px solid var(--line);
  border-radius:18px 18px 0 0;backdrop-filter:blur(10px);
  padding:0 14px calc(10px + var(--safe-b));
  max-height:46vh;display:flex;flex-direction:column;
  transition:transform .25s ease}
#sheet.peek{transform:translateY(calc(100% - 64px - var(--safe-b)))}
.grab{padding:8px 0 6px;display:grid;place-items:center;cursor:grab}
.grab span{width:44px;height:5px;border-radius:3px;background:#31566a}
.sheet-head{display:flex;gap:8px;padding-bottom:8px}
#q{flex:1;padding:11px 14px;border-radius:12px;border:1px solid var(--line);
  background:#0a1f2b;color:var(--ink);font:inherit;font-size:16px}
#q::placeholder{color:#5d8291}
.results,.slips{overflow-y:auto;-webkit-overflow-scrolling:touch}
.results:empty{display:none}
.row{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:11px 10px;border-bottom:1px solid #16394a;border-radius:8px}
.row:last-child{border-bottom:0}
.row:active{background:#12394a}
.row .ic{width:34px;height:34px;border-radius:9px;background:#123c33;
  display:grid;place-items:center;font-size:16px;flex:none}
.row .t{flex:1;min-width:0}
.row .t b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .t small{color:var(--dim)}
.row .end{font-size:12px;color:var(--dim);text-align:right;flex:none}
.tag{font-size:10px;font-weight:700;letter-spacing:.05em;padding:2px 6px;
  border-radius:6px;background:#123c33;color:var(--aqua)}
.tag.est{background:#3a2e12;color:var(--gold)}
.tag.none{background:#3a1d1d;color:var(--red)}

/* marina panel */
.mp-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;padding-bottom:6px}
.mp-head h3{font-size:17px}
.seg{display:flex;background:#0a1f2b;border:1px solid var(--line);border-radius:10px;padding:3px;margin-bottom:8px}
.seg-btn{flex:1;padding:7px;border-radius:8px;color:var(--dim);font-weight:600;font-size:13px}
.seg-btn.on{background:#16435a;color:var(--ink)}
.note{font-size:12.5px;color:var(--dim);background:#0a1f2b;border:1px solid var(--line);
  border-radius:10px;padding:8px 10px;margin-bottom:8px}
.slips{max-height:18vh}
.slip-row{display:flex;align-items:center;gap:8px;width:100%;text-align:left;
  padding:8px 10px;border-bottom:1px solid #16394a}
.slip-row:active{background:#12394a}
.slip-row .lbl{flex:1;font-weight:600}
.slip-row .dk{font-size:11px;color:var(--dim)}

/* destination chip */
#destChip{position:absolute;left:50%;transform:translateX(-50%);
  bottom:calc(76px + var(--safe-b));z-index:1002;display:flex;align-items:center;gap:10px;
  background:var(--panel);border:1px solid var(--gold);border-radius:14px;
  padding:8px 10px;box-shadow:0 6px 24px #000a;backdrop-filter:blur(8px)}
#destChip .lbl{font-size:10px;letter-spacing:.08em;color:var(--gold);text-transform:uppercase}
#destChip strong{font-size:17px}
.btn{padding:9px 14px;border-radius:10px;background:#16435a;font-weight:600;font-size:13px}
.btn.accent{background:var(--aqua);color:#062018}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--dim)}
.btn.sm{padding:6px 10px;font-size:12px}

/* leaflet overrides */
.leaflet-control-zoom,.leaflet-control-attribution{display:none}
.slip-poly{stroke:#7fd7e8;stroke-width:1.5;fill:#2aa8c4;fill-opacity:.18}
.slip-poly.est{stroke-dasharray:4 3;stroke:#e8c877;fill:#f2b950;fill-opacity:.14}
.slip-poly.sel{stroke:var(--gold);stroke-width:3;fill:var(--gold);fill-opacity:.35}
.slip-poly.off{stroke:#4d7a8a;fill:#2a4a56;fill-opacity:.1}
.slip-dot{stroke:#9adfe9;stroke-width:1.5;fill:#2aa8c4;fill-opacity:.7}
.slip-dot.est{stroke:#e8c877;fill:#f2b950}
.slip-dot.sel{stroke:#fff;fill:var(--gold)}
.slip-lbl{background:none;border:0;box-shadow:none;color:#cfeaf0;font-size:10px;
  font-weight:700;text-shadow:0 1px 3px #000,0 0 6px #000;white-space:nowrap}
.slip-lbl.sel{color:var(--gold);font-size:12px}
.dock-pin{background:none;border:0;color:#eaf6ff;font-weight:800;font-size:13px;
  text-shadow:0 1px 4px #000,0 0 8px #000;letter-spacing:.04em}
.boat{background:none;border:0}
.boat svg{filter:drop-shadow(0 2px 6px #000c)}
.boat g{transform-box:fill-box;transform-origin:center}
.gps-acc{fill:#2aa8c4;fill-opacity:.12;stroke:#2aa8c4;stroke-opacity:.35;stroke-width:1}
.dest-marker{background:none;border:0}
.marina-mk{background:none;border:0}
.marina-mk .m-dot{width:30px;height:30px;border-radius:50%;background:#0e2a38;
  border:2px solid var(--aqua);display:grid;place-items:center;font-size:14px;
  box-shadow:0 3px 10px #000a}
.marina-mk .m-name{position:absolute;left:34px;top:4px;white-space:nowrap;
  background:#0e2a38e6;padding:3px 8px;border-radius:8px;font-size:11px;
  font-weight:700;color:#dff3f4;border:1px solid var(--line)}

/* sim route */
.sim-route{stroke:var(--sim);stroke-width:3;stroke-dasharray:10 8;opacity:.85}
.sim-route.done{opacity:.25}

/* toast + boot */
#toast{position:absolute;left:50%;bottom:calc(120px + var(--safe-b));
  transform:translateX(-50%);z-index:1200;background:#123c33;border:1px solid var(--aqua);
  color:var(--ink);padding:10px 16px;border-radius:12px;font-size:13px;max-width:86vw;
  text-align:center;box-shadow:0 6px 24px #000a}
#boot{position:fixed;inset:0;z-index:2000;background:var(--navy);display:grid;
  place-content:center;gap:12px;justify-items:center;transition:opacity .4s}
#boot.off{opacity:0;pointer-events:none}
.mark-lg{width:72px;height:72px;border-radius:18px;background:
  url('/icons/icon.svg') center/cover no-repeat, var(--navy2)}
#boot p{color:var(--dim);letter-spacing:.08em;font-size:13px}

@media (min-width:720px){
  #sheet{left:auto;right:14px;bottom:14px;width:340px;border:1px solid var(--line);
    border-radius:16px;max-height:60vh}
  .grab{display:none}
  #sheet.peek{transform:translateY(calc(100% - 58px))}
  #destChip{bottom:24px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}