@font-face{
  font-family:'Plus Jakarta Sans';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('../fonts/PlusJakartaSans-Latin.woff2') format('woff2');
}

/* ── Chart-room palette ─────────────────────────────
     buff   #EFE7D2  (Admiralty chart paper — fixed brand colour)
     ink    #1E2A38  (chart ink — fixed brand colour)
     sea    #C9DDE0  (shallow tint)
     port   #C0392B  (port hand red)
     stbd   #1F7A33  (starboard hand green)
     gold   #B5892C  (brass)

     --bg / --fg  swap in dark mode; everything else is fixed.
  ──────────────────────────────────────────────────── */
:root{
  /* Fixed brand colours — never changed by dark mode */
  --buff:#EFE7D2; --ink:#16273D;
  /* Palette */
  --sea:#C9DDE0; --port:#C0392B; --stbd:#1A7A33; --gold:#B5892C;
  /* Semantic layer — change in dark mode */
  --bg:#F0F3F7; --fg:#16273D;
  --panel:#F7F9FC; --line:#CBD3DF; --card:#EBF0F7;
  --shadow:rgba(0,0,0,.12);
}
[data-theme="dark"]{
  --sea:#192C3E;
  --port:#E55A52; --stbd:#38C25C; --gold:#D4A843;
  --bg:#141E2B; --fg:#EDE0C4;
  --panel:#0D1720; --line:#283848; --card:#1A2D40;
  --shadow:rgba(0,0,0,.4);
}
*{box-sizing:border-box; margin:0}
html,body{height:100%}
body{
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  background:var(--bg); color:var(--fg);
  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 ──────────────────────────────────────── */
header{
  background:var(--ink); color:var(--buff);
  padding:10px 14px; flex:0 0 auto;
  border-bottom:2px solid var(--gold);
}
.header-row{display:flex; align-items:center; justify-content:space-between; gap:10px}
.h-titles{min-width:0; display:flex; flex-direction:column; gap:1px}
.h-title{
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  font-size:15px; font-weight:600; color:#EFE7D2;
  letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.h-subtitle{
  font-size:9.5px; font-weight:500; color:rgba(239,231,210,.55);
  letter-spacing:.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.h-right{display:flex; align-items:center; gap:8px; flex-shrink:0}
.vhf-badge{
  font-size:10px; font-weight:700; letter-spacing:.06em;
  color:var(--gold); border:1px solid rgba(181,137,44,.45); border-radius:4px;
  padding:2px 7px; white-space:nowrap;
}
#themeToggle{
  flex-shrink:0; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.2);
  color:rgba(239,231,210,.75); cursor:pointer;
  width:28px; height:28px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; transition:background .15s, border-color .15s, color .15s;
}
#themeToggle:hover{background:rgba(181,137,44,.12); border-color:var(--gold); color:var(--gold)}

/* ── 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 */

/* ── Course schematic in detail pane ── */
.schema-wrap{
  margin:0 -14px; padding:8px 14px 10px;
  border-bottom:1px solid var(--line); flex-shrink:0;
}
.leg-arrow{ background:none; border:none; }
.fc-grid{
  display:grid; grid-template-columns:4em 1fr; gap:2px 8px;
  font-size:11px; line-height:1.45;
}

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:10px 2px; font:inherit; font-size:11.5px;
  border:0; border-bottom:3px solid transparent; background:transparent;
  cursor:pointer; color:var(--fg); opacity:.55;
  transition:opacity .15s, background .15s;
}
.atab:hover:not(:disabled){opacity:.9; background:var(--card)}
.atab.on{opacity:1; border-bottom-color:var(--gold); font-weight:700; background:var(--card)}
.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;
  padding:7px 13px; border-radius:999px; cursor:pointer;
  border:1px solid var(--line); background:transparent; color:var(--fg);
  transition:background .15s, border-color .15s, color .15s;
}
.windbar button:hover{border-color:var(--fg)}
.windbar button.on{background:var(--ink); color:var(--buff); border-color:var(--ink); font-weight:600}

/* 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(--line); border-radius:4px; background:var(--bg); color:var(--fg); 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;
  border:0; border-bottom:1px solid var(--line);
  background:transparent; display:flex; align-items:stretch; color:var(--fg);
  transition:background .12s;
}
.course:hover{background:var(--card)}
.course.sel{background:var(--ink); color:var(--buff); border-bottom-color:rgba(255,255,255,.06)}
.c-num{
  flex:0 0 50px; display:flex; align-items:center; justify-content:center;
  padding:10px 2px; font-family:Georgia,serif; font-size:22px; font-weight:700;
  color:var(--fg); border-right:1px solid var(--line);
}
.course.sel .c-num{color:#EFE7D2; border-right-color:rgba(255,255,255,.1)}
.c-body{flex:1; padding:9px 12px; min-width:0; display:flex; flex-direction:column; gap:3px}
.c-top{display:flex; align-items:center; gap:5px; flex-wrap:wrap}
.c-wind{font-size:12px; font-weight:600; color:var(--fg)}
.course.sel .c-wind{color:rgba(239,231,210,.85)}
.c-dist{font-size:10px; opacity:.55; margin-left:auto; white-space:nowrap; flex-shrink:0}
.c-name{font-size:11px; font-style:italic; color:#5E7088; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.course.sel .c-name{color:rgba(239,231,210,.4)}
.badge{display:inline-block; font-size:9.5px; font-weight:600; letter-spacing:.04em; padding:1px 6px; border-radius:3px; border:1px solid currentColor}
.badge.chan{color:var(--stbd)} .course.sel .badge.chan{color:#7DC495}

/* detail pane */
#paneDetail .detail{
  display:block; flex:1 1 auto; overflow-y:auto;
  max-height:none; border-top:0;
  background:var(--bg); padding:12px 14px;
}
.detail{display:none}
.detail.show{display:block}
.detail h2{font-family:Georgia,serif; font-size:16px; margin-bottom:2px; color:var(--fg)}
.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}
.pill-num{opacity:.65; font-weight:400; margin-right:1px}
.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(--line); background:transparent; color:var(--fg); cursor:pointer}
.rp:hover{border-color:var(--fg)}
.rp.on{background:var(--ink); color:var(--buff); border-color:var(--ink)}
.round{cursor:pointer; border-radius:4px; padding:4px 6px; margin-left:-6px}
.round:hover{background:var(--card)}
.round.dim{opacity:.4}

/* controls bar — always pinned at bottom of sidebar */
.controls{
  flex:0 0 auto; padding:6px 14px 8px; border-top:1px solid var(--line);
  background:var(--panel); font-size:12px;
  display:flex; flex-direction:column; gap:4px;
}
.ctrl-row{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.ctrl-toggle{
  display:flex; align-items:center; gap:6px; cursor:pointer;
  flex-shrink:0; color:var(--fg); user-select:none;
}
.fetchbtn{
  font:inherit; font-size:12px; padding:4px 10px; border-radius:3px; cursor:pointer;
  border:1px solid var(--line); background:var(--bg); color:var(--fg); flex-shrink:0; white-space:nowrap;
}
.fetchbtn:hover{border-color:var(--fg)}
.fetchbtn:disabled{opacity:.5; cursor:default}
.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(--fg); border-color:var(--fg)}

/* ── 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:'Plus Jakarta Sans',system-ui,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}

/* WNODE debug labels */
.wnode-lbl{
  font:bold 10px/14px monospace; color:#111; text-shadow:0 0 3px #fff, 0 0 3px #fff;
  white-space:nowrap; pointer-events:none;
}

/* mark labels on map */
/* wrapper div created by L.divIcon — must be transparent and not constrain child */
.mark-lbl-icon{ background:transparent !important; border:none !important; overflow:visible !important; }
.mklbl{
  display:inline-block;  /* size to content, not parent width */
  background:rgba(247,242,228,.95); border:1.5px solid #1E2A38; border-radius:3px;
  font:700 11px/1.3 'Plus Jakarta Sans',system-ui,sans-serif; color:#1E2A38;
  padding:2px 5px; white-space:nowrap; box-shadow:0 1px 4px rgba(0,0,0,.22);
}
.mklbl.laid{border-color:var(--gold); color:#7a5a17}
.startline-lbl{background:rgba(255,214,107,.95); font-style:italic}
.mklbl.custom-colour{border-color:#8a6e00; background:rgba(255,235,150,.95); color:#5a4000}
.seqlbl{
  background:#1E2A38; color:#EFE7D2;
  height:24px; display:flex; align-items:center; justify-content:center;
  font:700 13px/1 Georgia,serif; border:2.5px solid #fff;
  box-shadow:0 2px 6px rgba(0,0,0,.6); padding:0 4px; white-space:nowrap;
}
[data-theme="dark"] .seqlbl{ border-color:#EDE0C4; box-shadow:0 2px 6px rgba(0,0,0,.8); }
/* Mark badge — ON the mark circle, navy fill with physical colour ring */
.mark-badge-wrap{ background:transparent !important; border:none !important; overflow:visible !important; }
.mark-badge{
  background:#1E2A38; color:#EFE7D2;
  display:flex; align-items:center; justify-content:center;
  font:800 13px/1 'Plus Jakarta Sans',system-ui,sans-serif;
  border:3px solid; box-shadow:0 2px 8px rgba(0,0,0,.55);
  cursor:pointer; pointer-events:all; white-space:nowrap;
}
[data-theme="dark"] .mark-badge{ background:#0E1820; color:#EDE0C4; box-shadow:0 2px 8px rgba(0,0,0,.8); }
[data-theme="dark"] .mklbl{ background:rgba(20,30,43,.92); border-color:#8AA; color:#EDE0C4; }
.approx-banner{
  position:absolute; z-index:1000; bottom:10px; left:10px; right:auto; max-width:280px;
  background:rgba(30,42,56,.88); color:#EFE7D2; 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:#EFE7D2; 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 #1E2A38; border-radius:4px;
  cursor:pointer; color:#1E2A38;
}
#fsBtn:hover{background:#EFE7D2}
#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:#EFE7D2; border:1px solid var(--gold);
  border-radius:4px; cursor:pointer; pointer-events:auto;
}
#fsClose:hover{background:#1E2A38}
#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}
#fsSeamarkBtn{
  position:absolute; top:10px; left:10px; z-index:4001;
  padding:4px 10px; font-size:12px; font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  background:rgba(30,42,56,.85); color:#EDE0C4; border:1px solid var(--gold);
  border-radius:4px; cursor:pointer; pointer-events:auto; white-space:nowrap;
}
#fsSeamarkBtn:hover{ background:#1E2A38; }
#fsSeamarkBtn.on{ background:rgba(185,138,47,.25); border-color:var(--gold); }
#fsRoundPicker .course-label{
  width:100%; text-align:center; font-family:Georgia,serif; font-size:13px;
  color:#1E2A38; 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(--bg); 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(--fg); line-height:1}
.wx-unit{font-size:14px; font-weight:400; margin-left:2px}
.wx-sub{font-size:11px; color:var(--fg); opacity:.75; margin-top:3px}
.wx-cond{background:var(--bg)}
.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}

/* ── Course schematic diagram ────────────────────────*/
.schematic-panel{padding:8px 12px 12px}
.schematic-hdr{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:6px;
}
.schematic-hdr h3{font-family:Georgia,serif; font-size:13px; color:var(--fg); font-weight:600}
.schematic-toggle{
  font:inherit; font-size:11px; padding:3px 10px; border-radius:3px; cursor:pointer;
  border:1px solid var(--line); background:transparent; color:var(--fg);
}
.schematic-toggle:hover{border-color:var(--fg)}
.schematic-toggle.on{background:var(--ink); color:var(--buff); border-color:var(--ink)}

/* ── Course guide ────────────────────────────────────*/
.cg-section{padding:8px 12px 4px; border-top:1px solid var(--line)}
.cg-hdr{display:flex; align-items:center; justify-content:space-between; margin-bottom:6px}
.cg-hdr h3{font-family:Georgia,serif; font-size:13px; color:var(--fg); font-weight:600; margin:0}
.cg-wrap{font-size:12px}
.cg-round{margin-bottom:10px}
.cg-round-title{font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--gold); font-weight:700; margin-bottom:4px}
.cg-cum{font-weight:normal; color:var(--muted); font-size:10px; text-transform:none; letter-spacing:0; margin-left:6px}
.cg-leg{display:flex; flex-wrap:wrap; align-items:center; gap:4px; padding:3px 0; border-bottom:1px solid var(--line); font-size:12px}
.cg-leg:last-child{border-bottom:none}
.cg-from{color:var(--muted); font-weight:600; min-width:50px}
.cg-to{color:var(--fg); font-weight:700}
.cg-arrow{color:var(--muted); font-size:10px; padding:0 2px}
.cg-wps{display:flex; flex-wrap:wrap; gap:2px; align-items:center}
.cg-wp{background:var(--ink); color:#FFD66B; border-radius:2px; padding:1px 5px; font-family:monospace; font-size:10px; white-space:nowrap}
.cg-arr{color:var(--muted); font-size:10px}
.cg-side{display:inline-block; font-size:9px; font-weight:700; border-radius:2px; padding:0 3px; margin-left:3px}
.cg-side.P{background:#C0392B; color:#fff}
.cg-side.S{background:#27AE60; color:#fff}

/* ── Steer panel ─────────────────────────────────────*/
.steer-panel-wrap{padding:8px 12px 12px; border-top:1px solid var(--line)}
.steer-hdr{display:flex; align-items:center; justify-content:space-between; margin-bottom:6px}
.steer-hdr h3{font-family:Georgia,serif; font-size:13px; color:var(--fg); font-weight:600}
.steer-note{font-size:10px; color:var(--muted); font-style:italic; margin-bottom:8px}
/* Bearing label on steer polyline */
.brg-lbl{
  font-family:'Plus Jakarta Sans',system-ui,sans-serif; font-size:10px; font-weight:700;
  background:rgba(20,30,43,0.88); color:#FFD66B;
  border:1px solid rgba(255,214,107,0.35); border-radius:3px;
  padding:1px 5px; white-space:nowrap; pointer-events:none;
  line-height:1.3; box-shadow:0 1px 3px rgba(0,0,0,.35);
}
/* Reference mark (last mark of previous round) */
.pill.ref-mark{
  background:transparent; border:1px dashed var(--muted);
  color:var(--muted); font-style:italic; font-size:11px; opacity:0.7;
}

.steer-popup .leaflet-popup-content-wrapper{background:var(--ink); color:var(--buff); border:1px solid var(--gold); border-radius:4px; font-size:12px; padding:0}
.steer-popup .leaflet-popup-content{margin:8px 10px; line-height:1.5}
.steer-popup .leaflet-popup-tip{background:var(--ink)}
.steer-popup .leaflet-popup-close-button{color:var(--gold)}
.steer-pop-hdr{font-family:Georgia,serif; font-weight:700; font-size:12px; color:var(--gold); margin-bottom:4px; border-bottom:1px solid var(--gold); padding-bottom:3px}
.steer-round{margin-bottom:10px}
.steer-round b{display:block; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--gold); margin-bottom:4px}
.steer-round-title{font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--gold); margin-bottom:4px; font-weight:700}
.steer-num{display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; background:var(--ink); color:var(--buff); font-size:10px; font-weight:700; font-family:Georgia,serif; flex-shrink:0}
.steer-leg{font-size:12px; padding:3px 0; border-bottom:1px solid var(--line); display:flex; flex-wrap:wrap; gap:4px; align-items:center}
.steer-leg:last-child{border-bottom:none}
.steer-from{color:var(--fg); font-weight:600; min-width:120px}
.steer-wp{background:var(--ink); color:var(--buff); border-radius:3px; padding:1px 6px; font-family:monospace; font-size:11px; white-space:nowrap}

/* ── Wind compass (weather pane) ─────────────────────*/
.wx-compass-row{display:flex; gap:12px; align-items:center}
.wx-compass-col{flex:0 0 auto}
.wx-compass-info{flex:1 1 auto}
.wx-gust-bar-wrap{margin-top:6px}
.wx-gust-label{font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--gold); font-weight:700; margin-bottom:3px}
.wx-gust-track{
  height:12px; border-radius:6px; background:var(--line); overflow:hidden; position:relative;
}
.wx-gust-fill{
  height:100%; border-radius:6px; transition:width .6s;
  background:linear-gradient(90deg,#27ae60 0%,#f39c12 50%,#c0392b 100%);
  background-size:200% 100%;
}
.wx-gust-fill.calm{background-position:0%}
.wx-gust-fill.fresh{background-position:35%}
.wx-gust-fill.strong{background-position:65%}
.wx-gust-fill.gale{background-position:100%}

/* hourly wind bar chart */
.wx-hourly-wrap{background:var(--bg); border:1px solid var(--line); border-radius:6px; padding:8px 10px 6px; overflow:hidden}
.wx-hourly-lbl{font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--gold); font-weight:700; margin-bottom:5px}

.wx-subpane{
  flex:1 1 auto; overflow-y:auto;
  display:flex; flex-direction:column;
}
.wx-subpane[hidden]{ display:none !important }
/* 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;
}

/* ── Info tab — Sailing Instructions reference ───────*/
.info-row{
  display:flex; align-items:baseline; justify-content:space-between; gap:8px;
  flex-wrap:wrap; padding:4px 0; font-size:12px; color:var(--fg);
  border-bottom:1px solid var(--line);
}
.info-row:last-child{ border-bottom:0; }
.info-row b{ font-weight:600; flex:0 0 auto; }
.info-row span{ opacity:.8; text-align:right; }
.info-row .info-note{
  flex:1 1 100%; text-align:left; font-size:11px; opacity:.6; margin-top:2px;
}

/* ── Mobile — scrollable layout ──────────────────────
   Map is sticky at the top; course/weather content
   flows below and the user scrolls the page.          */
@media (max-width:720px){
  html{ height:auto; overflow-y:auto }
  body{ height:auto; min-height:100dvh; overflow-y:auto; overflow-x:hidden }
  main{ flex-direction:column; overflow:visible; height:auto }

  /* Map panel: flows in document, not sticky — lets course card sit above without clipping */
  #mapPanel{
    display:flex !important; flex-direction:column;
    height:auto; position:static;
    flex-shrink:0; border-bottom:2px double var(--gold);
  }
  /* Map tile pane always a fixed viewport slice */
  #map{ height:52vh; flex:none; }

  /* Aside flows below map in document order */
  aside{flex:none; max-width:none; border-left:0; overflow:visible}

  /* Panes are full-height in the document, no internal scroll */
  .aside-pane{overflow:visible; min-height:auto}
  .panel-scroll{overflow:visible; min-height:auto; max-height:none}

  /* Back button — shown sticky at top of viewport when a course is selected */
  body.map-view #backBtn{
    display:block;
    position:sticky; top:0; z-index:500;
    width:100%; padding:10px 14px; text-align:left;
    background:var(--ink); color:var(--buff);
    border:0; border-bottom:2px solid var(--gold);
    font:inherit; font-size:13px; cursor:pointer;
  }

  /* Selecting a course: tabs are always visible on mobile — no overrides needed */

  /* Fullscreen map controls */
  #fsControls{bottom:80px}
  #fsRoundPicker{max-height:38vh; overflow-y:auto; -webkit-overflow-scrolling:touch}

  /* Compass and schematic panels full-width */
  .wx-compass-row{flex-direction:column; align-items:flex-start; gap:8px}

  #cardBtn{ bottom:70px }
}

/* ── Map wind overlay control ───────────────────────── */
.map-wind-ctrl{
  display:flex; align-items:center; gap:5px;
  background:rgba(247,242,228,.92); border:1px solid #b0c8cc; border-radius:6px;
  padding:4px 8px 4px 4px; box-shadow:0 1px 4px rgba(0,0,0,.18);
  pointer-events:none;
}
[data-theme="dark"] .map-wind-ctrl{ background:rgba(20,30,43,.88); border-color:#4a6070; }
[data-theme="dark"] .map-wind-ctrl svg circle{ fill:#1a2a38; stroke:#4a6070; }
[data-theme="dark"] .map-wind-ctrl svg line,
[data-theme="dark"] .map-wind-ctrl svg polygon{ stroke:#EDE0C4; fill:#EDE0C4; }
.map-wind-label{ font:700 11px/1.2 'Plus Jakarta Sans',system-ui,sans-serif; color:#1E2A38; display:flex; flex-direction:column; gap:1px; }
[data-theme="dark"] .map-wind-label{ color:#EDE0C4; }
.map-wind-dir{ font-size:12px; }
.map-wind-kn{ font-size:10px; opacity:.75; }

/* ── Custom course builder ──────────────────────────── */
.cust-wrap{ padding:12px 14px; display:flex; flex-direction:column; gap:10px; }
.cust-header{ font:700 15px/1.3 Georgia,serif; color:var(--gold); }
.cust-hint{ font-size:11px; opacity:.65; color:var(--fg); }
.cust-add-row{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.cust-sel{
  flex:1; min-width:0; padding:6px 8px;
  background:var(--bg); color:var(--fg);
  border:1px solid var(--line); border-radius:4px;
  font:400 13px/1.4 'Plus Jakarta Sans',system-ui,sans-serif;
}
.cust-side-wrap{ display:flex; gap:4px; flex-shrink:0; }
.cust-side{
  padding:5px 9px; font-size:12px; font-weight:600; border-radius:4px;
  background:var(--bg); color:var(--fg); border:1.5px solid var(--line);
  cursor:pointer; transition:background .15s, border-color .15s;
}
.cust-side.active[data-side="P"]{ background:#C0392B; color:#fff; border-color:#8b0000; }
.cust-side.active[data-side="S"]{ background:#1F7A33; color:#fff; border-color:#0f4d1a; }
.cust-list{
  list-style:none; margin:0; padding:0;
  border:1px solid var(--line); border-radius:4px; overflow:hidden;
}
.cust-empty{ padding:10px 12px; font-size:12px; opacity:.55; color:var(--fg); }
.cust-leg{
  display:flex; align-items:center; gap:8px;
  padding:8px 10px; border-bottom:1px solid var(--line);
  font-size:13px; color:var(--fg);
}
.cust-leg:last-child{ border-bottom:0; }
.cust-num{ width:18px; text-align:right; font-weight:700; opacity:.5; flex-shrink:0; font-size:11px; }
.cust-name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cust-side-badge{
  font-size:10px; font-weight:700; padding:2px 6px; border-radius:3px; flex-shrink:0;
}
.cust-side-badge-P{ background:rgba(192,57,43,.15); color:#C0392B; border:1px solid rgba(192,57,43,.3); }
.cust-side-badge-S{ background:rgba(31,122,51,.15); color:#1F7A33; border:1px solid rgba(31,122,51,.3); }
[data-theme="dark"] .cust-side-badge-P{ background:rgba(192,57,43,.25); }
[data-theme="dark"] .cust-side-badge-S{ background:rgba(31,122,51,.25); }
.cust-remove{
  background:none; border:0; cursor:pointer; color:var(--fg); opacity:.4;
  font-size:13px; padding:2px 4px; flex-shrink:0;
}
.cust-remove:hover{ opacity:.9; }
.cust-actions{ display:flex; gap:8px; }
.cust-plot{ flex:1; }
.cust-plot:disabled{ opacity:.4; cursor:default; }