/* map.css — homepage harbor chart: islands, dock panel, sailing hints.
   Loads only on index.html, after main.css. Behavior lives in js/map.js. */

/* ── Island layer ── */
#hero{touch-action:pan-y}
#jd-islands{position:absolute;inset:0;pointer-events:none}
#jd-wind{position:absolute;inset:0;pointer-events:none}
.jd-isle{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;background:none;border:none;padding:6px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;transition:filter .3s ease,transform .3s ease}
.jd-isle svg{display:block;filter:drop-shadow(0 4px 8px rgba(8,20,30,.25))}
.jd-isle:hover,.jd-isle.near{filter:drop-shadow(0 0 14px rgba(232,164,78,.55))}
.jd-isle:focus-visible{outline:2px solid #c0572b;outline-offset:4px;border-radius:4px}
.isle-name{position:absolute;top:calc(100% + 2px);left:50%;transform:translateX(-50%);font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.14em;color:#1d4750;background:rgba(244,237,221,.72);padding:2px 8px;border-radius:20px;white-space:nowrap;opacity:0;transition:opacity .3s ease}
.jd-isle:hover .isle-name,.jd-isle.near .isle-name,.jd-isle:focus-visible .isle-name{opacity:1}

/* ── Dock panel ── */
#jd-dock{position:absolute;left:56px;bottom:84px;z-index:5;width:min(340px,calc(100vw - 40px));background:rgba(244,237,221,.95);border:1px solid rgba(21,86,95,.25);border-left:3px solid #c0572b;border-radius:5px;padding:18px 20px;box-shadow:0 18px 44px rgba(8,20,30,.35);opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .3s ease,transform .3s ease}
#jd-dock.open{opacity:1;transform:translateY(0);pointer-events:auto}
.dock-kicker{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.2em;color:#c0572b;margin-bottom:6px}
.dock-name{font-size:19px;font-weight:700;color:#16323a;margin-bottom:4px}
.dock-desc{font-size:13px;line-height:1.5;color:#46504e;margin:0 0 12px}
.dock-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.dock-list a{display:flex;align-items:center;gap:9px;padding:8px 2px;text-decoration:none;font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:#15565f;border-top:1px solid rgba(21,86,95,.12);transition:color .15s}
.dock-list a:hover{color:#c0572b}
.dock-list .project-dot{width:6px;height:6px}
.dock-close{position:absolute;right:10px;top:10px;background:none;border:none;cursor:pointer;font-family:'IBM Plex Mono',monospace;font-size:13px;color:#2c6b73;padding:4px 8px}
.dock-close:hover{color:#c0572b}
.dock-start{display:block;width:100%;margin-top:12px;background:#c0572b;color:#f6efdd;border:none;border-radius:3px;cursor:pointer;font-family:'IBM Plex Mono',monospace;font-size:12.5px;letter-spacing:.08em;padding:13px 16px;transition:background .15s}
.dock-start:hover{background:#15565f}

/* ── Touch + small screens: dock becomes a bottom sheet, islands reflow into
   a single low-water row clear of the hero text and CTAs ── */
@media(max-width:600px){
  #jd-dock{left:12px;right:12px;bottom:64px;width:auto}
  .jd-isle svg{width:64px;height:auto}
  .jd-isle{padding:4px}
  .jd-isle[data-isle="software"]{left:10%!important;top:86%!important}
  .jd-isle[data-isle="hardware"]{left:30%!important;top:84%!important}
  .jd-isle[data-isle="ai"]{left:50%!important;top:86%!important}
  .jd-isle[data-isle="data"]{left:70%!important;top:84%!important}
  .jd-isle[data-isle="sims"]{left:91%!important;top:86%!important}
}

/* ── Reduced motion: islands stay as static, clickable chart markers ── */
@media(prefers-reduced-motion:reduce){
  .jd-isle,.isle-name,#jd-dock{transition:none}
  .isle-name{opacity:1}
}