/* ── Chart-room palette ─────────────────────────────
     buff   #EFE7D2  (Admiralty chart paper)
     ink    #1E2A38  (chart ink)
     sea    #C9DDE0  (shallow tint)
     port   #C0392B  (port hand red)
     stbd   #1F7A33  (starboard hand green)
     gold   #B98A2F  (brass)
  ──────────────────────────────────────────────────── */
:root{
  --buff:#EFE7D2; --ink:#1E2A38; --sea:#C9DDE0;
  --port:#C0392B; --stbd:#1F7A33; --gold:#B98A2F;
  --panel:#F7F2E4; --line:#D8CDB0;
}
*{box-sizing:border-box; margin:0}
html,body{height:100%}
body{
  font-family:"Gill Sans","Gill Sans MT",Calibri,"Trebuchet MS",sans-serif;
  background:var(--buff); color:var(--ink);
  display:flex; flex-direction:column; overflow:hidden;
}
/* PWA install banner */
#installBanner{
  flex:0 0 auto; display:flex; align-items:center; gap:10px;
  padding:8px 14px; background:var(--ink); color:var(--buff);
  border-bottom:2px solid var(--gold); font-size:12px;
}
#installBanner[hidden]{display:none}
#installText{flex:1 1 auto}
#installBtn{
  font:inherit; font-size:12px; padding:5px 14px; border-radius:3px; cursor:pointer;
  background:var(--gold); color:var(--ink); border:0; font-weight:700; white-space:nowrap;
}
#installBtn:hover{opacity:.85}
#installDismiss{
  background:none; border:0; color:var(--buff); font-size:16px;
  cursor:pointer; padding:4px; opacity:.7; flex-shrink:0;
}
#installDismiss:hover{opacity:1}

header{
  background:var(--ink); color:var(--buff);
  padding:10px 14px 8px; flex:0 0 auto;
  border-bottom:3px double var(--gold);
}
header h1{
  font-family:Georgia,"Times New Roman",serif;
  font-weight:600; font-size:17px; letter-spacing:.06em;
}
header h1 span{color:var(--gold)}
header .sub{font-size:11px; letter-spacing:.14em; text-transform:uppercase; opacity:.75; margin-top:2px}

/* ── Desktop layout ──────────────────────────────────
   main = full remaining height
   #mapPanel = flex:1 (fills left side), contains map
   aside = 340px fixed sidebar on the right           */
main{flex:1 1 auto; display:flex; min-height:0; overflow:hidden}

#mapPanel{
  flex:1 1 auto; display:flex; flex-direction:column;
  min-width:0; min-height:0; position:relative;
}
#map{flex:1 1 auto; min-height:0; background:var(--sea)}
#backBtn{display:none} /* hidden on desktop */

aside{
  flex:0 0 340px; max-width:42vw; display:flex; flex-direction:column;
  background:var(--panel); border-left:1px solid var(--line); min-height:0;
}

/* ── Sidebar tabs ────────────────────────────────── */
.aside-tabs{
  flex:0 0 auto; display:flex;
  border-bottom:2px solid var(--line); background:var(--panel);
}
.atab{
  flex:1; padding:9px 4px; font:inherit; font-size:11px; letter-spacing:.04em;
  border:0; border-bottom:3px solid transparent; background:transparent;
  cursor:pointer; color:var(--ink); opacity:.6; transition:opacity .15s;
}
.atab:hover:not(:disabled){opacity:.9}
.atab.on{opacity:1; border-bottom-color:var(--gold); font-weight:700; background:var(--buff)}
.atab:disabled{opacity:.3; cursor:default}

/* ── Sidebar panes ───────────────────────────────── */
.aside-pane{
  flex:1 1 auto; display:flex; flex-direction:column;
  overflow:hidden; min-height:0;
}
.pane-hidden{display:none !important}

/* wind filter inside courses pane */
.windbar{
  flex:0 0 auto; display:flex; gap:6px; overflow-x:auto;
  padding:8px 12px; background:var(--panel); border-bottom:1px solid var(--line);
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.windbar::-webkit-scrollbar{display:none}
.windbar button{
  flex:0 0 auto; font:inherit; font-size:12px; letter-spacing:.05em;
  padding:6px 12px; border-radius:999px; cursor:pointer;
  border:1px solid var(--ink); background:transparent; color:var(--ink);
}
.windbar button.on{background:var(--ink); color:var(--buff)}

/* course search */
.search-wrap{flex:0 0 auto; padding:8px 12px; border-bottom:1px solid var(--line); background:var(--panel)}
#courseSearch{
  width:100%; font:inherit; font-size:13px; padding:6px 10px;
  border:1px solid var(--ink); border-radius:4px; background:var(--buff); color:var(--ink); outline:none;
}
#courseSearch:focus{border-color:var(--gold); box-shadow:0 0 0 2px rgba(185,138,47,.25)}

/* course list */
.panel-scroll{flex:1 1 auto; overflow-y:auto; min-height:0}
.course{
  width:100%; text-align:left; font:inherit; cursor:pointer;
  padding:10px 14px; border:0; border-bottom:1px solid var(--line);
  background:transparent; display:block;
}
.course:hover{background:#EFE6CE}
.course.sel{background:var(--ink); color:var(--buff)}
.course .num{font-family:Georgia,serif; font-size:16px; font-weight:700}
.course .tags{font-size:11px; opacity:.8; margin-top:2px}
.course .name{font-style:italic; font-size:12px}
.badge{display:inline-block; font-size:10px; letter-spacing:.05em; padding:1px 6px; border-radius:3px; margin-right:4px; border:1px solid currentColor}
.badge.chan{color:var(--stbd)} .course.sel .badge.chan{color:#9FD8A8}
.badge.gw{color:var(--gold)}

/* detail pane */
#paneDetail .detail{
  display:block; flex:1 1 auto; overflow-y:auto;
  max-height:none; border-top:0;
  background:var(--buff); padding:12px 14px;
}
.detail{display:none}
.detail.show{display:block}
.detail h2{font-family:Georgia,serif; font-size:16px; margin-bottom:2px}
.detail .wind{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); margin-bottom:8px}
.round{margin-bottom:8px}
.round b{font-size:12px; letter-spacing:.08em; text-transform:uppercase}
.legs{margin-top:3px; line-height:1.9}
.pill{
  display:inline-block; font-size:12px; padding:2px 8px; margin:0 3px 3px 0;
  border-radius:3px; color:#fff; white-space:normal; word-break:break-word; max-width:100%;
}
.pill.P{background:var(--port)} .pill.S{background:var(--stbd)}
.pill small{opacity:.85; font-weight:400}
.dist{font-size:11px; opacity:.7; margin-left:4px}
.note{font-size:11px; line-height:1.45; background:var(--panel); border:1px solid var(--line); border-radius:4px; padding:7px 9px; margin-top:6px}
.roundpick{display:flex; gap:6px; flex-wrap:wrap; margin:6px 0 10px}
.rp{font:inherit; font-size:11px; letter-spacing:.05em; padding:4px 10px; border-radius:999px;
    border:1px solid var(--ink); background:transparent; color:var(--ink); cursor:pointer}
.rp.on{background:var(--ink); color:var(--buff)}
.round{cursor:pointer; border-radius:4px; padding:4px 6px; margin-left:-6px}
.round:hover{background:#EFE6CE}
.round.dim{opacity:.4}

/* controls bar — always pinned at bottom of sidebar */
.controls{
  flex:0 0 auto; padding:8px 14px; border-top:1px solid var(--line);
  background:var(--panel); font-size:12px;
  display:flex; align-items:center; gap:10px;
  overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; flex-wrap:nowrap;
}
.controls::-webkit-scrollbar{display:none}
.controls label{display:flex; align-items:center; gap:6px; cursor:pointer; flex-shrink:0}
.controls .vhf{margin-left:auto; font-family:Georgia,serif; color:var(--gold); font-weight:700; letter-spacing:.05em; flex-shrink:0}
.fetchbtn{
  font:inherit; font-size:12px; padding:4px 10px; border-radius:3px; cursor:pointer;
  border:1px solid var(--ink); background:var(--buff); color:var(--ink); flex-shrink:0; white-space:nowrap;
}
.fetchbtn:disabled{opacity:.5; cursor:default}
.traffic-btn{border-color:var(--stbd); color:var(--stbd)}
.traffic-btn:hover{background:var(--stbd); color:#fff}
.fetchbtn.pick-on{background:var(--ink); color:var(--buff); border-color:var(--gold)}

/* GSI link */
.gsi-link{
  font:inherit; font-size:12px; color:var(--gold); text-decoration:none;
  border-bottom:1px dotted var(--gold); white-space:nowrap; flex-shrink:0;
}
.gsi-link:hover{color:var(--ink); border-color:var(--ink)}

/* ── Map overlays ────────────────────────────────── */
#map.picking{cursor:crosshair !important}
#map.picking .leaflet-interactive{cursor:crosshair !important}
.coord-popup .leaflet-popup-content-wrapper{
  background:var(--ink); color:var(--buff); border:1px solid var(--gold);
  border-radius:4px; font-family:"Gill Sans","Trebuchet MS",sans-serif; font-size:12px;
}
.coord-popup .leaflet-popup-tip{background:var(--ink)}
.coord-popup .leaflet-popup-content{margin:10px 14px; line-height:1.6}
.coord-copy{
  display:block; margin-top:6px; font:inherit; font-size:11px; letter-spacing:.04em;
  padding:4px 10px; border-radius:3px; cursor:pointer; width:100%;
  background:var(--gold); color:var(--ink); border:0; font-weight:700;
}
.coord-copy:hover{opacity:.85}
.coord-copy.copied{background:var(--stbd); color:#fff}

/* mark labels on map */
.mklbl{
  background:rgba(247,242,228,.92); border:1px solid var(--ink); border-radius:3px;
  font:600 10px/1.3 "Gill Sans","Trebuchet MS",sans-serif; color:var(--ink);
  padding:2px 4px; white-space:nowrap;
}
.mklbl.laid{border-color:var(--gold); color:#7a5a17}
.startline-lbl{background:rgba(255,214,107,.92); font-style:italic}
.mklbl.custom-colour{border-color:#8a6e00; background:rgba(255,235,150,.92); color:#5a4000}
.seqlbl{
  background:var(--ink); color:var(--buff); border-radius:50%;
  width:18px; height:18px; display:flex; align-items:center; justify-content:center;
  font:700 10px/1 Georgia,serif; border:2px solid var(--buff); box-shadow:0 1px 3px rgba(0,0,0,.4);
}
.seqlbl-P{background:var(--port)}
.seqlbl-S{background:var(--stbd)}
.approx-banner{
  position:absolute; z-index:1000; bottom:10px; left:10px; right:auto; max-width:280px;
  background:rgba(30,42,56,.88); color:var(--buff); font-size:10.5px; line-height:1.4;
  padding:6px 26px 6px 9px; border-radius:4px;
}
.approx-banner .close{
  position:absolute; top:2px; right:4px; background:none; border:0; cursor:pointer;
  color:var(--buff); font-size:14px; line-height:1; padding:4px; opacity:.8;
}
.approx-banner .close:hover{opacity:1}

/* fullscreen map button */
#fsBtn{
  position:absolute; top:10px; right:10px; z-index:1000;
  width:32px; height:32px; padding:0; font-size:16px; line-height:1;
  background:rgba(247,242,228,.92); border:1px solid var(--ink); border-radius:4px;
  cursor:pointer; color:var(--ink);
}
#fsBtn:hover{background:var(--buff)}
#map.fs{position:fixed !important; top:0; left:0; width:100vw !important; height:100vh !important; z-index:3000; flex:none}
#map.fs #fsBtn{display:none}
#fsControls{
  position:absolute; bottom:16px; left:50%; transform:translateX(-50%);
  z-index:4000; display:flex; flex-direction:column; align-items:center; gap:8px;
  pointer-events:none;
}
#fsControls[hidden]{display:none}
#fsClose{
  position:absolute; top:10px; right:10px; z-index:4001;
  width:36px; height:36px; font-size:18px; line-height:1; padding:0;
  background:rgba(30,42,56,.85); color:var(--buff); border:1px solid var(--gold);
  border-radius:4px; cursor:pointer; pointer-events:auto;
}
#fsClose:hover{background:var(--ink)}
#fsRoundPicker{
  display:flex; gap:6px; flex-wrap:wrap; justify-content:center;
  background:rgba(247,242,228,.92); border:1px solid var(--gold);
  border-radius:6px; padding:8px 12px; pointer-events:auto;
  max-width:90vw; box-shadow:0 2px 8px rgba(0,0,0,.35);
}
#fsRoundPicker .rp{font-size:13px; padding:6px 14px}
#fsRoundPicker .course-label{
  width:100%; text-align:center; font-family:Georgia,serif; font-size:13px;
  color:var(--ink); font-weight:700; margin-bottom:2px;
}

/* ── Weather / Tides panes ───────────────────────────*/
.wx-wrap{padding:12px; overflow-y:auto; flex:1 1 auto; display:flex; flex-direction:column; gap:10px}
.wx-loading{padding:20px 14px; font-size:13px; opacity:.7; text-align:center}
.wx-updated{font-size:10px; letter-spacing:.08em; text-transform:uppercase; opacity:.6}
.wx-row{display:flex; gap:8px}
.wx-card{
  flex:1 1 auto; background:var(--buff); border:1px solid var(--line);
  border-radius:6px; padding:10px 12px;
}
.wx-label{font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); margin-bottom:4px; font-weight:700}
.wx-val{font-family:Georgia,serif; font-size:28px; font-weight:700; color:var(--ink); line-height:1}
.wx-unit{font-size:14px; font-weight:400; margin-left:2px}
.wx-sub{font-size:11px; color:var(--ink); opacity:.75; margin-top:3px}
.wx-cond{background:var(--buff)}
.wx-condtext{font-size:16px; font-weight:600; margin:4px 0 2px}
.wx-footer{display:flex; align-items:center; justify-content:space-between; font-size:10px; opacity:.65; margin-top:4px}
.wx-footer .fetchbtn{font-size:11px; padding:3px 8px; opacity:1}
/* tide specific */
.tide-bar{height:8px; background:var(--line); border-radius:4px; margin:6px 0 4px; overflow:hidden}
.tide-fill{height:100%; background:var(--sea); border-radius:4px; transition:width .5s}
.tide-row{display:flex; align-items:center; gap:8px; padding:4px 0; border-bottom:1px solid var(--line); font-size:12px}
.tide-row:last-child{border-bottom:0}
.tide-type{font-family:Georgia,serif; font-weight:700; font-size:11px; width:24px; flex-shrink:0}
.tide-type.HW{color:var(--port)}
.tide-type.LW{color:var(--stbd)}
.tide-eta{margin-left:auto; font-size:11px; opacity:.65}
/* past HW/LW rows faded; wave card has no padding so SVG fills edge-to-edge */
.tide-past{opacity:.45}
.tide-wave-card{padding:6px 8px !important; overflow:hidden}
/* source badge in weather header */
.wx-src-badge{
  display:inline-block; background:var(--ink); color:var(--buff);
  font-size:.7em; padding:1px 5px; border-radius:3px; vertical-align:middle;
  letter-spacing:.05em; text-transform:none;
}

/* ── Mobile ──────────────────────────────────────────
   Default: aside fills the screen (course list).
   body.map-view: map fills the screen, aside becomes
   a compact bottom strip showing the course detail.   */
@media (max-width:720px){
  main{flex-direction:column}

  /* Default state — show course list full screen */
  #mapPanel{display:none}
  aside{flex:1 1 auto; max-width:none; border-left:0}

  /* Map view — show map + compact detail strip */
  body.map-view #mapPanel{
    display:flex; flex:1 1 auto; min-height:0;
  }
  body.map-view aside{
    flex:0 0 auto; max-height:46%; border-top:3px double var(--gold);
  }
  /* In map view, always show the detail pane, hide courses pane + tabs */
  body.map-view .aside-tabs{display:none}
  body.map-view #paneCourses{display:none !important}
  body.map-view #paneDetail{display:flex !important}

  /* Back button — visible in map view, floats over the map */
  body.map-view #backBtn{
    display:block; position:absolute; top:10px; left:10px; z-index:1000;
    padding:7px 13px; background:rgba(30,42,56,.88); color:var(--buff);
    border:1px solid var(--gold); border-radius:4px;
    font:600 12px/1 "Gill Sans","Trebuchet MS",sans-serif; cursor:pointer;
  }

  /* Fullscreen round picker — float clear of browser nav bar */
  #fsControls{bottom:80px}
  #fsRoundPicker{max-height:38vh; overflow-y:auto; -webkit-overflow-scrolling:touch}
}