/* MarineDirect map prototype — gold & white.
   Palette lifted from marine-direct/src/app/(frontend)/styles.css so the
   prototype and the site cannot drift. */

:root {
  --gold:        #c9a227;
  --gold-dark:   #a68419;
  --gold-deep:   #8f7214;   /* the text-safe gold: 5.6:1 on white */
  --gold-hover:  #b8922a;
  --gold-light:  #dbc06a;
  --gold-pale:   #f0e6c0;
  --gold-glow:   rgba(201, 162, 39, 0.35);
  --sea:         #f4ecd4;

  --ink:         #1e293b;
  --ink-mid:     #475569;
  --ink-soft:    #64748b;
  --line:        rgba(15, 23, 42, 0.10);
  --line-soft:   rgba(15, 23, 42, 0.06);
  --panel:       #ffffff;
  --shadow:      0 18px 44px rgba(15, 23, 42, 0.08);

  --hdr-h:       58px;
  --banner-h:    34px;

  --t-marina:      #0b3d91;
  --t-bar:         #d9480f;
  --t-shop:        #c2185b;
  --t-service:     #7c4a1e;
  --t-fuel:        #111111;
  --t-maintenance: #6b7280;
  --t-charter:     #9333ea;
  --t-anchorage:   #0e7490;
  --t-poi:         #4338ca;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  background: #fff;
  color: var(--ink);
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ── Prototype banner ─────────────────────────────────────────────── */
.proto-banner {
  height: var(--banner-h);
  display: flex; align-items: center; gap: 8px;
  padding: 0 12px;
  background: var(--gold-pale);
  color: #5c4a0c;
  font-size: 12px;
  border-bottom: 1px solid rgba(143, 114, 20, 0.25);
}
.proto-banner strong { color: var(--gold-deep); }
.proto-banner button {
  margin-left: auto; border: 0; background: none; cursor: pointer;
  font-size: 18px; line-height: 1; color: #5c4a0c; padding: 4px 6px;
}
body.banner-hidden .proto-banner { display: none; }
.proto-banner__terms { margin-left: auto; color: var(--gold-deep); font-weight: 600; text-decoration: underline; white-space: nowrap; }
.proto-banner__terms + button { margin-left: 0; }
.hdr__terms { border: 1px solid #cbd5e1; background: #fff; border-radius: 999px; padding: 5px 10px; font: inherit; font-size: 12px; color: #475569; cursor: pointer; white-space: nowrap; }
.hdr__terms:hover { border-color: var(--gold); color: #1e293b; }
/* terms dialog: scrolls inside, the accept button stays visible */
.termsdlg { width: min(640px, 94vw); }
.termsdlg .boatdlg__f { display: flex; flex-direction: column; max-height: 84vh; }
.terms__body { overflow: auto; padding-right: 6px; font-size: 13px; line-height: 1.5; color: #334155; }
.terms__body h3 { margin: 12px 0 3px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: #64748b; }
.terms__body p { margin: 0 0 8px; }
.terms__lead { padding: 10px 12px; border-radius: 8px; background: #fef3c7; color: #78350f; border: 1px solid #fcd34d; }
.terms__small { font-size: 11.5px; color: #64748b; }
.termsdlg .boatdlg__actions { margin-top: 10px; }
body.banner-hidden { --banner-h: 0px; }

/* ── Header ───────────────────────────────────────────────────────── */
.hdr {
  height: var(--hdr-h);
  display: flex; align-items: center; gap: 16px;
  padding: 0 18px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}
.hdr__eyebrow {
  display: block;
  font-size: 10px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--gold-deep);
}
.hdr__title { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.hdr__count { margin-left: auto; font-size: 13px; color: var(--ink-soft); }
.hdr__count b { color: var(--ink); font-weight: 600; }

/* ── Shell ────────────────────────────────────────────────────────── */
.shell {
  display: grid;
  grid-template-columns: 320px 1fr 0;
  height: calc(100vh - var(--hdr-h) - var(--banner-h));
  transition: grid-template-columns 220ms ease;
}
.shell.has-detail { grid-template-columns: 320px 1fr 360px; }

/* ── Sidebar ──────────────────────────────────────────────────────── */
.side {
  border-right: 1px solid var(--line);
  min-height: 0;
  background: #fff;
}
.side__scroll { height: 100%; overflow-y: auto; overscroll-behavior: contain; }

.fgroup { padding: 14px 16px 4px; border-bottom: 1px solid var(--line-soft); }
.fgroup--legend { padding-bottom: 12px; }
.fgroup__title {
  display: block; margin: 0 0 8px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-soft);
}

.search, .select {
  width: 100%; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 7px;
  font: inherit; color: var(--ink); background: #fff;
}
.search:focus, .select:focus {
  outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold);
}

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--line); border-radius: 999px;
  background: #fff; color: var(--ink-mid);
  font: inherit; font-size: 12.5px; cursor: pointer;
  transition: background 120ms, border-color 120ms, color 120ms;
}
.chip:hover { border-color: rgba(15,23,42,0.22); }
.chip:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.chip[aria-pressed="true"] {
  background: #f8fafc; border-color: rgba(15,23,42,0.25); color: var(--ink); font-weight: 500;
}
.chips--sm .chip { font-size: 12px; padding: 4px 9px; }

.chip__dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; flex: none; }

/* Gold "has boats" chip — gold is a FILL here, never gold text on white. */
.chip--gold { border-color: var(--gold-light); color: var(--gold-deep); font-weight: 600; }
.chip--gold[aria-pressed="true"] {
  background: var(--gold); border-color: var(--gold-dark); color: #3d2f05;
}
.chip__dot--gold { background: var(--gold); }
.chip--gold[aria-pressed="true"] .chip__dot--gold { background: #3d2f05; }

.boats-min {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 10px; font-size: 12.5px; color: var(--ink-mid);
}
.boats-min select {
  padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; font: inherit;
}

.legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; color: var(--ink-soft); }
.legend li { display: flex; align-items: center; gap: 5px; }
.legend__swatch { width: 10px; height: 10px; border-radius: 50%; background: var(--t-marina); border: 1.5px solid #fff; box-shadow: 0 0 0 1px var(--line); }
.legend__swatch--dim { opacity: 0.55; }
.legend__swatch--planned { background: #fff; border: 1.5px dashed var(--t-marina); box-shadow: none; }

.side__reset { padding: 10px 16px; border-bottom: 1px solid var(--line-soft); }
.btn-reset {
  width: 100%; padding: 7px; border: 1px solid var(--line); border-radius: 7px;
  background: #fff; font: inherit; font-size: 12.5px; color: var(--ink-mid); cursor: pointer;
}
.btn-reset:hover { background: #f8fafc; }
.btn-reset:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ── Results ──────────────────────────────────────────────────────── */
.results { padding-bottom: 24px; }
.results__head {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; gap: 8px;
  margin: 0; padding: 12px 16px;
  background: rgba(255,255,255,0.94); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line-soft);
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft);
}
.sort {
  margin-left: auto; border: 1px solid var(--line); border-radius: 999px;
  padding: 3px 9px; background: #fff; cursor: pointer;
  font: inherit; font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-soft);
}
.sort[aria-pressed="true"] { background: var(--gold); border-color: var(--gold-dark); color: #3d2f05; }
.sort:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.rlist { list-style: none; margin: 0; padding: 0; }
.rrow {
  display: flex; align-items: flex-start; gap: 10px;
  width: 100%; padding: 11px 16px;
  border: 0; border-bottom: 1px solid var(--line-soft);
  background: #fff; text-align: left; font: inherit; cursor: pointer;
}
.rrow:hover { background: #fbfaf6; }
.rrow:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.rrow[aria-current="true"] { background: #fdf9ec; box-shadow: inset 3px 0 0 var(--gold); }
.rrow--dim { opacity: 0.62; }

.rrow__dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 4px; flex: none; box-shadow: 0 0 0 1.5px #fff, 0 0 0 2.5px rgba(15,23,42,0.12); }
.rrow__body { min-width: 0; flex: 1; }
.rrow__name { display: block; font-weight: 600; color: var(--ink); font-size: 13.5px; }
.rrow__meta { display: block; margin-top: 1px; font-size: 12px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rrow__tags { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px; }
.tag {
  font-size: 10.5px; padding: 1.5px 6px; border-radius: 4px;
  background: #f1f5f9; color: var(--ink-mid);
}
.tag--season { background: #fef3c7; color: #7c5c07; }
.tag--planned { background: #f1f5f9; color: var(--ink-soft); font-style: italic; }
.tag--approx  { background: #fff; color: var(--ink-soft); border: 1px dashed rgba(15,23,42,0.3); }
.rrow__dot--approx { background: #fff; border: 2px solid; box-shadow: none; }

/* Gold boat badge — dark ink on gold (white on gold is 2.2:1 and fails). */
.boats {
  flex: none; align-self: center;
  min-width: 30px; padding: 3px 7px; border-radius: 999px;
  background: var(--gold); color: #3d2f05;
  font-size: 11.5px; font-weight: 700; text-align: center;
}

.rempty { padding: 22px 16px; color: var(--ink-soft); font-size: 13px; }
.link { border: 0; background: none; padding: 0; color: var(--gold-deep); font: inherit; text-decoration: underline; cursor: pointer; }

/* ── Map ──────────────────────────────────────────────────────────── */
.mapwrap { position: relative; min-width: 0; }
#map { position: absolute; inset: 0; }
.maploading {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: var(--sea); color: var(--gold-deep); font-size: 13px; pointer-events: none;
  transition: opacity 300ms;
}
.maploading.gone { opacity: 0; }

.maplibregl-popup-content {
  padding: 8px 11px; border-radius: 8px; box-shadow: var(--shadow);
  font: inherit; font-size: 12.5px; border: 1px solid var(--line);
}
.maplibregl-popup-content b { display: block; color: var(--ink); }
.maplibregl-popup-content span { color: var(--ink-soft); }
.maplibregl-ctrl-group { border: 1px solid var(--line) !important; box-shadow: var(--shadow) !important; }

/* ── Detail panel ─────────────────────────────────────────────────── */
.detail {
  border-left: 1px solid var(--line); background: #fff;
  overflow-y: auto; min-width: 0;
}
.dt { padding: 18px 18px 28px; }
.dt__close {
  float: right; border: 1px solid var(--line); border-radius: 50%;
  width: 28px; height: 28px; background: #fff; cursor: pointer;
  font-size: 16px; line-height: 1; color: var(--ink-soft);
}
.dt__close:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.dt__type {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
}
.dt__type i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.dt__name { margin: 8px 0 2px; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
.dt__addr { margin: 0 0 14px; color: var(--ink-soft); font-size: 13px; }
.dt__desc { margin: 0 0 14px; color: var(--ink-mid); font-size: 13.5px; }
.dt__approx { margin: 0 0 14px; padding: 9px 11px; border: 1px dashed rgba(15,23,42,0.25); border-radius: 8px; color: var(--ink-mid); font-size: 12.5px; }

.dt__boats {
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 14px; padding: 10px 12px;
  background: var(--gold-pale); border: 1px solid var(--gold-light); border-radius: 9px;
  color: #5c4a0c; font-size: 13.5px; font-weight: 600;
  width: 100%; text-align: left; cursor: pointer; font-family: inherit;
}
.dt__boats:hover { background: #f5e9c2; }
.dt__boats:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.dt__boats b { background: var(--gold); color: #3d2f05; border-radius: 999px; padding: 2px 8px; }
.dt__boats span { margin-left: auto; color: var(--gold-deep); }

.dt__rows { margin: 0 0 14px; border-top: 1px solid var(--line-soft); }
.dt__row { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.dt__row dt { flex: none; width: 92px; color: var(--ink-soft); }
.dt__row dd { margin: 0; color: var(--ink); }

.dt__feats { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 16px; }
.dt__cta {
  display: block; width: 100%; padding: 10px; text-align: center;
  border-radius: 8px; background: var(--ink); color: #fff;
  font-size: 13px; font-weight: 600; text-decoration: none;
}
.dt__cta:hover { background: #0f172a; }
.dt__cta--ghost { margin-top: 8px; background: #fff; color: var(--ink); border: 1px solid var(--line); }
.dt__cta--ghost:hover { background: #f8fafc; }
.dt__link { color: var(--gold-deep); font-weight: 600; text-decoration: none; word-break: break-all; }
.dt__link:hover { text-decoration: underline; }
.dt__note { margin: 10px 0 0; font-size: 11.5px; color: var(--ink-soft); }

.dt__logo { display: block; max-width: 140px; max-height: 56px; object-fit: contain; margin: 6px 0 8px; }
.dt__badge { margin: -6px 0 12px; font-size: 12px; padding: 6px 10px; border-radius: 7px; }
.dt__badge--md { background: var(--gold-pale); color: #5c4a0c; border: 1px solid var(--gold-light); font-weight: 600; }
.dt__badge--md b { color: var(--gold-deep); }
.dt__badge--osm { background: #f8fafc; color: var(--ink-soft); border: 1px dashed rgba(15,23,42,0.2); }
.dt__badge--osm a { color: var(--gold-deep); font-weight: 600; text-decoration: none; }
.tag--md { background: var(--gold); color: #3d2f05; font-weight: 700; }

/* ── Boats for sale list in the detail panel ─────────────────────── */
.dt__boatlist { margin: 0 0 16px; padding: 12px; background: var(--gold-pale); border: 1px solid var(--gold-light); border-radius: 10px; }
.dt__boatlist-h { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: #5c4a0c; }
.dt__boatlist-h b { display: inline-block; min-width: 26px; padding: 1px 7px; border-radius: 999px; background: var(--gold); color: #3d2f05; text-align: center; margin-right: 4px; }
.boatlist { list-style: none; margin: 0; padding: 0; }
.boat + .boat { border-top: 1px solid rgba(143,114,20,0.18); }
.boat__link { display: flex; align-items: center; gap: 10px; padding: 8px 2px; text-decoration: none; color: var(--ink); border-radius: 6px; }
.boat__link:hover { background: rgba(255,255,255,0.6); }
.boat__link:focus-visible { outline: 2px solid var(--gold-dark); outline-offset: 1px; }
.boat__img { width: 64px; height: 48px; object-fit: cover; border-radius: 5px; flex: none; background: #fff; transition: transform 140ms ease, box-shadow 140ms ease; cursor: zoom-in; }
.boat__link:hover .boat__img, .boat__link:focus-visible .boat__img { transform: scale(1.12); box-shadow: 0 6px 18px rgba(15,23,42,0.22); }

/* Floating large preview — the listing's own photo, ~6× the thumbnail */
.photo-preview {
  position: fixed; z-index: 90; width: 360px;
  background: #fff; border: 1px solid var(--gold-light); border-radius: 12px;
  box-shadow: 0 24px 60px rgba(15,23,42,0.22), 0 0 0 4px var(--gold-glow);
  padding: 6px; pointer-events: none;
  animation: photo-in 120ms ease-out;
}
.photo-preview img { display: block; width: 100%; height: 240px; object-fit: cover; border-radius: 8px; background: var(--gold-pale); }
.photo-preview__cap { display: block; padding: 6px 4px 2px; font-size: 12.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes photo-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .photo-preview { animation: none; } .boat__img { transition: none; } }
.boat__img--none { display: grid; place-items: center; color: var(--gold-deep); font-size: 18px; border: 1px solid var(--gold-light); }
.boat__body { min-width: 0; flex: 1; }
.boat__title { display: block; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.boat__meta { display: block; font-size: 11.5px; color: var(--ink-soft); }
.boat__price { flex: none; font-size: 12.5px; font-weight: 700; color: var(--gold-deep); }
.dt__boats-all { display: block; margin-top: 8px; font-size: 12.5px; font-weight: 600; color: var(--gold-deep); text-decoration: none; }
.dt__boats-all:hover { text-decoration: underline; }

/* ── Mobile ───────────────────────────────────────────────────────── */
.mob-toggle {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  z-index: 40; border: 1px solid var(--gold-dark); border-radius: 999px;
  padding: 10px 20px; background: var(--gold); color: #3d2f05;
  font: inherit; font-weight: 700; font-size: 13px; cursor: pointer;
  box-shadow: 0 10px 28px rgba(15,23,42,0.18);
}

@media (max-width: 1023px) {
  .shell, .shell.has-detail { grid-template-columns: 1fr; grid-template-rows: 1fr; }
  .mapwrap { grid-row: 1; }
  .mob-toggle { display: block; }

  .side {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    height: 72vh; border-right: 0; border-top: 1px solid var(--line);
    border-radius: 16px 16px 0 0; box-shadow: 0 -14px 40px rgba(15,23,42,0.16);
    transform: translateY(100%); transition: transform 260ms ease;
  }
  body.sheet-open .side { transform: translateY(0); }
  body.sheet-open .mob-toggle { bottom: calc(72vh + 12px); }

  .detail {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    height: 62vh; border-left: 0; border-radius: 16px 16px 0 0;
    box-shadow: 0 -14px 40px rgba(15,23,42,0.16);
  }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ── Card sections (boats, charter, dealers, events, berth, weather, fuel) ── */
.dt__sec { margin: 0 0 14px; padding: 12px; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; }
.dt__sec-h { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: #334155; display: flex; align-items: center; gap: 6px; }
.dt__sec-h small { font-weight: 500; color: #94a3b8; font-size: 11px; margin-left: auto; }
.dt__sec-h b { display: inline-block; min-width: 26px; padding: 1px 7px; border-radius: 999px; text-align: center; font-weight: 700; background: #e5e7eb; color: #1e293b; }
.dt__sec-h--gold b { background: var(--gold); color: #3d2f05; }
.dt__sec-h--gold { color: #5c4a0c; }
.dt__sec-h--purple b { background: #9333ea; color: #fff; }
.dt__sec-h--purple { color: #581c87; }
.dt__sec-h--navy b { background: #0b3d91; color: #fff; }
.dt__sec-h--navy { color: #0b3d91; }
.dt__sec-h--muted { margin-top: 12px; color: #64748b; }
.dt__boatlist.dt__sec { background: var(--gold-pale); border-color: var(--gold-light); }
.dt__boatlist--rent.dt__sec { background: #f6f0fc; border-color: #d8b4fe; }
.dt__boatlist--rent .boat__price { color: #6b21a8; }
.boat__price small { font-weight: 500; color: #7e22ce; font-size: 10.5px; }
.dt__boats-all--rent { color: #6b21a8; }

.dealers, .evlist, .fuellist { list-style: none; margin: 0; padding: 0; }
.dealer { display: flex; align-items: center; gap: 10px; padding: 8px; margin: 0 -4px; border-radius: 8px; text-decoration: none; color: inherit; }
.dealer:hover { background: #eef2ff; }
.dealer__ic { flex: none; width: 30px; height: 30px; border-radius: 8px; background: #0b3d91; color: #fff; font-weight: 700; display: grid; place-items: center; font-size: 13px; }
.dealer__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dealer__name { font-size: 13px; font-weight: 600; color: #0b3d91; }
.dealer__meta { font-size: 11.5px; color: #64748b; }
.dealer__arrow { color: #0b3d91; font-weight: 700; }

.ev { display: flex; gap: 10px; align-items: flex-start; padding: 6px 4px; text-decoration: none; color: inherit; border-radius: 6px; }
.ev:hover { background: #f8fafc; }
.ev__date { flex: none; min-width: 52px; font-size: 11.5px; font-weight: 700; color: #4338ca; display: flex; flex-direction: column; line-height: 1.2; }
.ev__date small { font-weight: 500; color: #94a3b8; }
.ev__date--news { color: #64748b; }
.ev__title { font-size: 13px; color: #1e293b; }

.berth { background: #f8fafc; }
.berth__btns { display: flex; flex-direction: column; gap: 6px; }
.berth__btn { display: block; padding: 9px 12px; border-radius: 8px; border: 1px solid #cbd5e1; background: #fff; color: #1e293b; font-size: 13px; font-weight: 600; text-decoration: none; }
.berth__btn:hover { border-color: #0b3d91; }
.berth__btn--main { background: #0b3d91; border-color: #0b3d91; color: #fff; }
.berth__btn--main:hover { background: #082e6e; }
.berth__note { margin: 8px 0 0; font-size: 11.5px; color: #64748b; }

.wx { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.wx__cell { padding: 8px 6px; border-radius: 8px; background: #f1f5f9; text-align: center; font-size: 12px; color: #334155; display: flex; flex-direction: column; align-items: center; }
.wx__cell b { font-size: 18px; font-weight: 700; color: #0b3d91; }
.wx__cell small { color: #64748b; font-size: 10.5px; margin-top: 2px; }
.wx__arrow { display: inline-block; color: #0b3d91; font-size: 16px; line-height: 1; margin-bottom: 2px; }
.wx--warn .wx__cell { background: #fff1f2; }
.wx--warn .wx__cell b { color: #b91c1c; }
.wx__warn { margin: 8px 0 0; font-size: 12px; color: #b91c1c; font-weight: 600; }
.wx__src, .wx__loading { margin: 8px 0 0; font-size: 11px; color: #94a3b8; }

.fuel__own { margin: 0 0 6px; font-size: 13px; color: #111; }
.fuel__row { width: 100%; display: flex; justify-content: space-between; gap: 8px; padding: 7px 8px; margin: 0 -4px; border: 0; border-radius: 6px; background: none; font: inherit; font-size: 13px; color: #1e293b; cursor: pointer; text-align: left; }
.fuel__row:hover { background: #f1f5f9; }
.fuel__dist { font-weight: 700; color: #111; white-space: nowrap; }

/* ── Sidebar tools ── */
.tools { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tool { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 10px; border: 1px solid #cbd5e1; border-radius: 8px; background: #fff; font: inherit; font-size: 12.5px; font-weight: 600; color: #1e293b; cursor: pointer; text-align: left; }
.tool small { font-weight: 400; color: #64748b; font-size: 11px; }
.tool__ic { color: #0b3d91; font-size: 14px; }
.tool:hover { border-color: #0b3d91; }
.tool[aria-pressed="true"] { background: #0b3d91; border-color: #0b3d91; color: #fff; }
.tool[aria-pressed="true"] small, .tool[aria-pressed="true"] .tool__ic { color: #cbd5e1; }
.passage, .nearme { margin-top: 8px; padding: 10px; border-radius: 8px; background: #f8fafc; border: 1px solid #e2e8f0; font-size: 12.5px; }
.passage__leg { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.passage__leg i { flex: none; width: 20px; height: 20px; border-radius: 50%; background: #0b3d91; color: #fff; font-style: normal; font-weight: 700; font-size: 11px; display: grid; place-items: center; }
.passage__leg em { color: #94a3b8; }
.passage__res { margin: 8px 0 4px; display: flex; flex-direction: column; }
.passage__res b { font-size: 20px; color: #0b3d91; }
.passage__res span { color: #475569; }
.passage__kn { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.passage__kn input { flex: 1; accent-color: #0b3d91; }
.passage__note { margin: 4px 0 6px; font-size: 11px; color: #94a3b8; }
.nearme__h { margin: 6px 0 2px; font-size: 12px; color: #475569; }
.nearme__msg { margin: 0; color: #64748b; }
body.passage-on #map { cursor: crosshair; }

/* ── Trip planner ── */
.trip__legs { display: flex; flex-direction: column; gap: 4px; position: relative; }
.trip__leg { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; }
.trip__leg.is-pick { border-color: #0b3d91; box-shadow: 0 0 0 2px rgba(11,61,145,.15); }
.trip__leg i { flex: none; width: 20px; height: 20px; border-radius: 50%; background: #0b3d91; color: #fff; font-style: normal; font-weight: 700; font-size: 11px; display: grid; place-items: center; }
.trip__leg input { flex: 1; min-width: 0; border: 0; font: inherit; font-size: 13px; background: none; outline: none; }
.trip__swap { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border: 1px solid #cbd5e1; border-radius: 50%; background: #fff; cursor: pointer; font-size: 12px; color: #0b3d91; z-index: 1; }
.trip__boat { margin: 8px 0; }
.trip__boat summary { cursor: pointer; font-size: 12px; color: #475569; font-weight: 600; }
.trip__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }
.trip__f { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: #64748b; }
.trip__f input { width: 100%; box-sizing: border-box; padding: 5px 6px; border: 1px solid #cbd5e1; border-radius: 6px; font: inherit; font-size: 13px; }
.trip__sum { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 8px 0; }
.trip__sum > div { padding: 8px; border-radius: 8px; background: #fff; border: 1px solid #e2e8f0; display: flex; flex-direction: column; }
.trip__sum b { font-size: 17px; color: #0b3d91; }
.trip__sum span { font-size: 11px; color: #64748b; }
.trip__sum .is-warn b { color: #b91c1c; }
.trip__sum .is-muted b { color: #94a3b8; }
.trip__warn { margin: 6px 0; padding: 8px; border-radius: 8px; background: #fff1f2; color: #991b1b; font-size: 12px; }
.trip__ok { margin: 6px 0; font-size: 12px; color: #475569; }
.trip__h { margin: 12px 0 4px; font-size: 12px; color: #334155; display: flex; gap: 6px; align-items: baseline; }
.trip__h small { color: #94a3b8; font-weight: 400; }
.trip__days { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--gold-light); }
.trip__day { display: flex; gap: 8px; padding: 4px 0 8px 10px; position: relative; }
.trip__day::before { content: ''; position: absolute; left: -6px; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); border: 1px solid #fff; }
.trip__dayn { flex: none; width: 42px; font-size: 11px; font-weight: 700; color: #a68419; padding-top: 2px; }
.trip__dayb { display: flex; flex-direction: column; min-width: 0; }
.trip__to .link { font-size: 13px; font-weight: 600; color: #0b3d91; padding: 0; }
.trip__to small { color: #0e7490; font-weight: 600; }
.trip__legm { font-size: 11.5px; color: #64748b; }
.trip__legm .is-warn { color: #b91c1c; }
.trip__note { font-size: 11px; color: #991b1b; }
.trip__along { max-height: 220px; overflow: auto; }
.fuel__dist small { font-weight: 400; color: #94a3b8; }

/* ── Sidebar v2: tabs ── */
.side { display: flex; flex-direction: column; }
.side__top { padding: 12px 14px 0; border-bottom: 1px solid var(--line-soft); background: #fff; }
.side__top .search { margin-bottom: 10px; }
.tabs { display: flex; gap: 2px; }
.tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px 8px; border: 0; border-bottom: 2px solid transparent; background: none; font: inherit; font-size: 12px; font-weight: 600; color: #64748b; cursor: pointer; }
.tab__ic { font-size: 15px; line-height: 1; color: #94a3b8; }
.tab:hover { color: #1e293b; }
.tab[aria-selected="true"] { color: #0b3d91; border-bottom-color: var(--gold); }
.tab[aria-selected="true"] .tab__ic { color: #0b3d91; }
.tab:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; border-radius: 6px; }
.pane { min-height: 100%; }
.pane__intro { padding: 14px 16px 6px; }
.pane__intro h2 { margin: 0 0 2px; font-size: 15px; color: #0b3d91; }
.pane__intro p { margin: 0; font-size: 12px; color: #64748b; line-height: 1.4; }
.fgroup--row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 12px 16px 10px; }
.fgroup--row .boats-min { margin: 0; }
.fgroup__head { display: flex; align-items: baseline; justify-content: space-between; }
.fgroup__head .link { font-size: 12px; color: #64748b; }
.more { border-bottom: 1px solid var(--line-soft); }
.more__sum { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; font-size: 12.5px; font-weight: 600; color: #334155; }
.more__sum::-webkit-details-marker { display: none; }
.more__sum::before { content: '▸'; margin-right: 6px; color: #94a3b8; font-size: 11px; transition: transform .15s; }
.more[open] .more__sum::before { transform: rotate(90deg); }
.more__sum span:first-child { display: flex; align-items: center; }
.more__count { font-size: 11px; font-weight: 700; color: #3d2f05; background: var(--gold); border-radius: 999px; padding: 1px 7px; }
.more__count:empty { display: none; }
.more .fgroup:first-of-type { border-top: 1px solid var(--line-soft); }
.legend__swatch--approx { background: #fff; border: 2px solid var(--t-marina); box-shadow: none; }
.passage { margin: 0 16px 16px; }
.nearme { margin: 0 16px 16px; }
.side__reset { display: none; }
.side__scroll { flex: 1; min-height: 0; height: auto; }
.trip__boat { margin: 10px 0; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; padding: 8px 10px; }
.trip__boat summary { display: flex; align-items: center; gap: 6px; list-style: none; }
.trip__boat summary::-webkit-details-marker { display: none; }
.trip__boat summary::before { content: '⚓'; color: #0b3d91; }
.trip__boat summary::after { content: 'edit'; margin-left: auto; font-weight: 500; color: #0b3d91; font-size: 11px; }
.trip__boat[open] summary::after { content: 'done'; }
.trip__leg { padding: 6px 8px; }
.trip__leg input { font-weight: 600; color: #1e293b; }
.trip__leg input::placeholder { font-weight: 400; color: #94a3b8; }
.passage { background: none; border: 0; padding: 0; margin: 4px 16px 16px; }
.trip__sum { margin: 12px 0; }

/* ── Suggestions dropdown ── */
.side__top { position: relative; }
.sug { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; max-height: 60vh; overflow: auto; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; box-shadow: 0 12px 32px rgba(15,23,42,.14); padding: 4px; }
.side__top .sug { left: 14px; right: 14px; top: 46px; }
.trip__leg .sug { top: calc(100% + 4px); }
.sug__h { padding: 8px 10px 3px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #94a3b8; }
.sug__it { width: 100%; display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 0; border-radius: 7px; background: none; font: inherit; text-align: left; cursor: pointer; color: #1e293b; }
.sug__it:hover, .sug__it.is-active { background: #fdf9ec; }
.sug__it.is-active { box-shadow: inset 3px 0 0 var(--gold); }
.sug__dot { flex: none; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid #fff; box-shadow: 0 0 0 1px rgba(15,23,42,.12); }
.sug__ic { flex: none; width: 14px; text-align: center; color: #0b3d91; font-size: 12px; }
.sug__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sug__name { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sug__name b { color: #0b3d91; }
.sug__meta { font-size: 11px; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sug__gold { flex: none; font-size: 10.5px; font-weight: 700; color: #3d2f05; background: var(--gold); border-radius: 999px; padding: 1px 7px; }
.sug__tag { flex: none; font-size: 12px; }

/* ── Saved lists ── */
.tab { position: relative; }
.tab__n { position: absolute; top: 2px; right: calc(50% - 22px); font-size: 9.5px; font-weight: 700; color: #fff; background: #c8102e; border-radius: 999px; padding: 0 5px; line-height: 14px; }
.tab__n:empty { display: none; }
.chip--heart[aria-pressed="true"] { background: #c8102e; border-color: #a50d26; color: #fff; }
.rrow { position: relative; }
.rrow__heart { position: absolute; right: 12px; top: 10px; font-size: 15px; color: #cbd5e1; opacity: 0; transition: opacity .12s, color .12s; line-height: 1; }
.rrow:hover .rrow__heart, .rrow__heart.is-on { opacity: 1; }
.rrow__heart:hover { color: #c8102e; transform: scale(1.15); }
.rrow__heart.is-on { color: #c8102e; }
.rrow .boats { margin-right: 22px; }
.dt { position: relative; }
.dt__save { position: absolute; right: 44px; top: 14px; display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border: 1px solid #e2e8f0; border-radius: 999px; background: #fff; font: inherit; font-size: 12px; font-weight: 600; color: #64748b; cursor: pointer; }
.dt__save:hover { border-color: #c8102e; color: #c8102e; }
.dt__save.is-on { background: #fff1f2; border-color: #fecdd3; color: #c8102e; }
.lpick { position: fixed; z-index: 100; width: 260px; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 16px 40px rgba(15,23,42,.18); padding: 8px; }
.lpick__h { padding: 6px 8px 8px; font-size: 12px; color: #64748b; }
.lpick__h b { color: #1e293b; }
.lpick__row { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 8px; cursor: pointer; font-size: 13px; }
.lpick__row:hover { background: #f8fafc; }
.lpick__row input { accent-color: #c8102e; }
.lpick__row span { flex: 1; }
.lpick__row small { color: #94a3b8; }
.lpick__new { display: flex; gap: 6px; padding: 8px 4px 2px; border-top: 1px solid #f1f5f9; margin-top: 4px; }
.lpick__new input { flex: 1; min-width: 0; padding: 6px 8px; border: 1px solid #cbd5e1; border-radius: 7px; font: inherit; font-size: 12.5px; }
.lpick__new button { padding: 6px 10px; border: 0; border-radius: 7px; background: #0b3d91; color: #fff; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.lpick__new--pane { margin: 4px 16px; border: 0; }
.llist { list-style: none; margin: 0; padding: 0; }
.llist__row { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 0; border-bottom: 1px solid var(--line-soft); background: #fff; font: inherit; text-align: left; cursor: pointer; }
.llist__row:hover { background: #fbfaf6; }
.llist__ic { flex: none; width: 34px; height: 34px; border-radius: 10px; background: #fff1f2; color: #c8102e; display: grid; place-items: center; font-size: 16px; }
.llist__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.llist__name { font-size: 14px; font-weight: 600; color: #1e293b; }
.llist__meta { font-size: 11.5px; color: #64748b; }
.llist__arrow { color: #94a3b8; font-size: 18px; }
.pane__intro--list h2 { outline: none; border-bottom: 1px dashed transparent; }
.pane__intro--list h2:hover, .pane__intro--list h2:focus { border-bottom-color: #cbd5e1; }
.pane__intro--list .link { font-size: 12px; color: #64748b; padding: 0; margin-bottom: 4px; }
.litems { list-style: none; margin: 0; padding: 0; }
.litem { display: flex; align-items: flex-start; gap: 6px; padding: 8px 10px 8px 12px; border-bottom: 1px solid var(--line-soft); background: #fff; }
.litem.is-over { box-shadow: inset 0 3px 0 var(--gold); }
.litem.is-drag { opacity: .4; }
.litem__n { flex: none; width: 20px; height: 20px; margin-top: 4px; border-radius: 50%; background: #0b3d91; color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; cursor: grab; }
.litem__main { flex: 1; min-width: 0; display: flex; gap: 8px; align-items: flex-start; padding: 2px 4px; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.litem__main .rrow__dot { margin-top: 5px; }
.litem__body { min-width: 0; display: flex; flex-direction: column; }
.litem__name { font-size: 13px; font-weight: 600; color: #1e293b; }
.litem__meta { font-size: 11.5px; color: #64748b; }
.litem__meta b { color: #0b3d91; }
.litem__x { flex: none; border: 0; background: none; color: #94a3b8; font-size: 18px; cursor: pointer; padding: 0 4px; }
.litem__x:hover { color: #c8102e; }
.litems__actions { display: flex; flex-direction: column; gap: 6px; padding: 12px 16px 20px; }

/* ── Berth availability ── */
.bstat { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; }
.bstat i { font-style: normal; font-size: 10px; }
.bstat small { font-weight: 500; opacity: .8; margin-left: 2px; }
.bstat--ok { background: #e3ecfb; color: #0b3d91; }   /* no green on the site — available = navy */
.bstat--call { background: #fff4e0; color: #9a5b00; }
.bstat--full { background: #fee2e2; color: #991b1b; }
.bstat--unk { background: #f1f5f9; color: #64748b; }
.bstat--sm { padding: 1px 7px; font-size: 10.5px; gap: 4px; }
.berth__head { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.berth__marina-note { margin: 0; font-size: 12px; color: #475569; font-style: italic; }
.berth__max { margin: 0 0 8px; font-size: 12px; color: #475569; }
.bform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 6px; }
.bform__row--3 { grid-template-columns: 1fr 1fr 1fr; }
.bform label { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: #64748b; }
.bform input { width: 100%; box-sizing: border-box; padding: 6px 7px; border: 1px solid #cbd5e1; border-radius: 6px; font: inherit; font-size: 13px; color: #1e293b; }
.bform input:focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); }
.bform__chk { flex-direction: row !important; align-items: center; gap: 6px !important; font-size: 12.5px !important; color: #1e293b !important; margin: 2px 0 8px; }
.bform__chk input { width: auto; accent-color: #0b3d91; }
.bform__warn { margin: 0 0 8px; padding: 7px 9px; border-radius: 7px; background: #fee2e2; color: #991b1b; font-size: 12px; }
.bform__sum { margin: 0 0 6px; font-size: 12px; color: #334155; background: #f8fafc; border-radius: 7px; padding: 7px 9px; }

/* ── My boat ── */
.hdr__right { display: flex; align-items: center; gap: 14px; }
.boatbtn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid #cbd5e1; border-radius: 999px; background: #fff; font: inherit; font-size: 12.5px; font-weight: 600; color: #1e293b; cursor: pointer; }
.boatbtn:hover { border-color: #0b3d91; }
.boatbtn.is-set { background: #0b3d91; border-color: #0b3d91; color: #fff; }
.boatbtn__ic { font-size: 14px; }
.boatdlg { border: 0; border-radius: 14px; padding: 0; width: min(560px, 92vw); box-shadow: 0 24px 60px rgba(15,23,42,.25); }
.boatdlg::backdrop { background: rgba(15,23,42,.35); }
.boatdlg__f { padding: 18px 20px 20px; }
.boatdlg__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.boatdlg__head h2 { margin: 0; font-size: 18px; color: #0b3d91; }
.boatdlg__head .dt__close { position: static; }
.boatdlg__p { margin: 0 0 14px; font-size: 12.5px; color: #64748b; }
.boatdlg .bform__row { margin-bottom: 10px; }
.boatdlg label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: #64748b; }
.boatdlg input, .boatdlg select { width: 100%; box-sizing: border-box; padding: 7px 8px; border: 1px solid #cbd5e1; border-radius: 7px; font: inherit; font-size: 13px; color: #1e293b; background: #fff; }
.boatdlg input:focus, .boatdlg select:focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); }
.boatdlg__chks { display: flex; gap: 14px; flex-wrap: wrap; margin: 4px 0 14px; }
.boatdlg__chks .bform__chk { margin: 0; }
.boatdlg__actions { display: flex; justify-content: space-between; align-items: center; }
.boatdlg__actions .berth__btn { display: inline-block; padding: 9px 18px; }
.boatdlg__actions .link { color: #94a3b8; font-size: 12px; }
.chip--fit[aria-pressed="true"] { background: #0b3d91; border-color: #0b3d91; color: #fff; }
.tag--fit { font-weight: 700; }
.tag--fit-yes, .tag--fit-likely { background: #e3ecfb; color: #0b3d91; }
.tag--fit-no { background: #fee2e2; color: #991b1b; }
.fit { margin: 0 0 14px; padding: 10px 12px; border-radius: 10px; border: 1px solid #e2e8f0; background: #fff; }
.fit--yes, .fit--likely { background: #e3ecfb; border-color: #c7d7f5; }
.fit--no { background: #fef2f2; border-color: #fecaca; }
.fit--unknown { background: #f8fafc; }
.fit--none { font-size: 12.5px; color: #64748b; }
.fit--none .link { color: #0b3d91; font-weight: 600; padding: 0; }
.fit__h { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #1e293b; }
.fit__h small { margin-left: auto; color: #64748b; }
.fit__ic { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #0b3d91; color: #fff; font-size: 12px; font-weight: 700; }
.fit--no .fit__ic { background: #b91c1c; }
.fit--unknown .fit__ic { background: #94a3b8; }
.fit__rows { list-style: none; margin: 6px 0 0; padding: 0; font-size: 12px; color: #334155; }
.fit__rows li { padding: 2px 0 2px 18px; position: relative; }
.fit__rows li::before { content: '•'; position: absolute; left: 4px; }
.fit__rows li.is-ok::before { content: '✓'; color: #0b3d91; font-weight: 700; }
.fit__rows li.is-bad::before { content: '✗'; color: #b91c1c; font-weight: 700; }
.fit__rows li.is-unk { color: #64748b; }
.fit__rows li.is-unk::before { content: '?'; color: #94a3b8; }
.hdr__right { margin-left: auto; }
.boatdlg .bform__chk { flex-direction: row; align-items: center; gap: 6px; font-size: 12.5px; color: #1e293b; }
.boatdlg .bform__chk input { width: auto; }


.boatdlg__sel { -webkit-appearance: none; appearance: none; height: 35px; padding: 0 30px 0 10px; line-height: 33px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 10px center; }
.boatdlg input[type=text], .boatdlg input[type=tel], .boatdlg input[type=number] { height: 35px; }

/* ── Search along the route (Trip pane) ── */
.rsearch { margin-top: 14px; padding: 10px 12px 6px; border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; }
.rsearch .trip__h { margin: 0 0 8px; justify-content: space-between; }
.rsearch__w { font-weight: 400; color: #64748b; font-size: 11.5px; display: flex; align-items: center; gap: 4px; }
.rsearch__w select { font: inherit; font-size: 12px; font-weight: 700; color: #0b3d91; border: 1px solid #cbd5e1; border-radius: 6px; padding: 2px 4px; background: #fff; }
.rsearch .chips { margin-bottom: 6px; }
.rsearch__list { max-height: 320px; overflow: auto; margin: 0 -4px; }
.rs__row { align-items: flex-start; }
.rs__row .rrow__dot { margin-top: 5px; flex: none; }
.rs__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rs__meta { font-size: 11px; color: #64748b; }

.trip__leg { position: relative; padding-right: 30px; }
.trip__leg--via i { background: #fff; color: #0b3d91; border: 2px solid #0b3d91; width: 18px; height: 18px; }
.trip__rm { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: none; color: #94a3b8; font-size: 16px; cursor: pointer; padding: 0 4px; }
.trip__rm:hover { color: #b91c1c; }
.trip__legs { padding-right: 30px; }
.trip__swap { right: 0; }
.trip__add { display: block; margin: 6px 0 0 4px; font-size: 12px; color: #0b3d91; font-weight: 600; padding: 0; }
.trip__add:disabled { color: #94a3b8; }

/* ── Trips shared by sailors ── */
.trip__share { margin: 6px 0 4px; }
.trip__share .berth__btn { display: block; text-align: center; }
.ctrips { margin: 8px 16px 20px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.ctrips__h { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.ctrips__h h3 { margin: 0; font-size: 13px; color: #0b3d91; }
.ctrips__h h3 small { color: #94a3b8; font-weight: 500; }
.ctrips__sort { font-size: 11px; color: #94a3b8; }
.ctrips__sort .link { font-size: 11px; color: #64748b; padding: 0; }
.ctrips__sort .link.is-on { color: #0b3d91; font-weight: 700; }
.ctrips__list { list-style: none; margin: 0; padding: 0; }
.ctrip { display: flex; gap: 6px; padding: 10px 10px 10px 12px; margin-bottom: 8px; border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; }
.ctrip--mine { border-color: var(--gold-light); background: #fffdf5; }
.ctrip__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; padding: 0; }
.ctrip__title { font-size: 13.5px; font-weight: 700; color: #1e293b; }
.ctrip__title small { font-weight: 600; color: #a68419; }
.ctrip__route { font-size: 12px; color: #0b3d91; font-weight: 600; }
.ctrip__meta { font-size: 11.5px; color: #64748b; }
.ctrip__desc { font-size: 12px; color: #475569; margin-top: 3px; line-height: 1.4; }
.ctrip__side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.ctrip__like { border: 1px solid #e2e8f0; background: #fff; border-radius: 999px; padding: 3px 9px; font: inherit; font-size: 11.5px; font-weight: 700; color: #64748b; cursor: pointer; }
.ctrip__like:hover, .ctrip__like.is-on { color: #c8102e; border-color: #fecdd3; background: #fff1f2; }
.ctrip__del { font-size: 11px; color: #94a3b8; padding: 0; }
.ctrips__more { font-size: 12px; color: #0b3d91; padding: 0; }

.pane__intro--row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.btn-clear { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border: 1px solid #cbd5e1; border-radius: 999px; background: #fff; font: inherit; font-size: 12px; font-weight: 600; color: #475569; cursor: pointer; white-space: nowrap; }
.btn-clear:hover { border-color: #b91c1c; color: #b91c1c; background: #fff5f5; }
.btn-clear--wide { display: flex; width: 100%; justify-content: center; margin: 14px 0 4px; padding: 9px; border-radius: 8px; }

/* ── Weather v2 ── */
.wxwin { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0 8px; padding: 9px 10px; border-radius: 9px; background: #e3ecfb; border: 1px solid #c7d7f5; }
.wxwin--ok { background: #fff7e6; border-color: #fde5b4; }
.wxwin--none { background: #fef2f2; border-color: #fecaca; }
.wxwin__ic { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #0b3d91; color: #fff; font-size: 12px; font-weight: 700; }
.wxwin--ok .wxwin__ic { background: #d97706; }
.wxwin--none .wxwin__ic { background: #b91c1c; }
.wxwin__body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.wxwin__body b { font-size: 12.5px; color: #1e293b; }
.wxwin__body span { font-size: 12px; color: #475569; }
.wxtl { position: relative; margin-top: 6px; }
.wxtl__svg { width: 100%; height: 76px; display: block; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; }
.wxtl__hover { position: absolute; top: -26px; padding: 3px 8px; border-radius: 6px; background: #1e293b; color: #fff; font-size: 11px; white-space: nowrap; pointer-events: none; z-index: 2; }
.wxtl__hover small { color: #cbd5e1; }
.wxtl__legend { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 5px; font-size: 10.5px; color: #64748b; align-items: center; }
.wxtl__legend i { display: inline-block; width: 10px; height: 8px; border-radius: 2px; margin-right: 3px; vertical-align: middle; }
.wxtl__legend .l-wind { background: #0b3d91; opacity: .8; }
.wxtl__legend .l-gust { background: #64748b; height: 3px; }
.wxtl__legend .l-wave { background: none; border-top: 2px dashed #0e7490; height: 0; }
.wxtl__legend .l-rain { background: #0e7490; opacity: .7; }
.wxtl__legend .l-lim { background: none; border-top: 2px dashed #fca5a5; height: 0; }
.trip__wx { margin: 4px 0; }
.mapwrap { position: relative; }
.wxbar { position: absolute; left: 12px; top: 12px; z-index: 5; display: flex; align-items: center; gap: 8px; }
.wxbar__btn { padding: 7px 12px; border: 1px solid #cbd5e1; border-radius: 999px; background: #fff; font: inherit; font-size: 12.5px; font-weight: 600; color: #1e293b; cursor: pointer; box-shadow: 0 2px 8px rgba(15,23,42,.12); }
.wxbar__btn[aria-pressed="true"] { background: #0b3d91; border-color: #0b3d91; color: #fff; }
.wxbar__ctl { display: flex; align-items: center; gap: 10px; padding: 6px 12px; border-radius: 999px; background: #fff; border: 1px solid #e2e8f0; box-shadow: 0 2px 8px rgba(15,23,42,.12); font-size: 12px; color: #334155; }
.wxbar__when { display: inline-block; width: 128px; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 700; color: #0b3d91; }   /* fixed width: the label changes every hour and used to push the whole bar around */
.wxbar__st { display: inline-block; min-width: 96px; white-space: nowrap; }
.wxbar__ctl input[type=range] { width: 220px; accent-color: #0b3d91; }
.wxbar__legend { display: flex; gap: 6px; align-items: center; font-size: 10.5px; color: #64748b; }
.wxbar__legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 2px; }
.wxbar__st { font-size: 11px; color: #94a3b8; }
.wxbar__ctl { flex-wrap: nowrap; }
@media (max-width: 900px) { .wxbar__legend { display: none; } .wxbar__ctl input[type=range] { width: 120px; } }

/* ── Layers button + panel ── */
.lyrbtn { position: absolute; right: 52px; top: 12px; z-index: 5; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid #cbd5e1; border-radius: 999px; background: #fff; font: inherit; font-size: 12.5px; font-weight: 600; color: #1e293b; cursor: pointer; box-shadow: 0 2px 8px rgba(15,23,42,.12); }
.lyrbtn span { font-size: 14px; color: #0b3d91; }
.lyrbtn.is-on { border-color: #0b3d91; box-shadow: 0 0 0 2px rgba(11,61,145,.15), 0 2px 8px rgba(15,23,42,.12); }
.lyr { position: absolute; right: 52px; top: 50px; z-index: 6; width: 290px; max-height: calc(100% - 70px); overflow: auto; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 16px 40px rgba(15,23,42,.18); padding: 6px 10px 10px; }
.lyr__h { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 700; color: #0b3d91; padding: 6px 2px 4px; }
.lyr__h .dt__close { position: static; }
.lyr__g { padding: 6px 0 4px; border-top: 1px solid var(--line-soft); }
.lyr__g h4 { margin: 2px 0 4px; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: #64748b; display: flex; justify-content: space-between; align-items: baseline; }
.lyr__g h4 small { text-transform: none; letter-spacing: 0; font-weight: 400; color: #94a3b8; }
.lyr__row { display: flex; align-items: center; gap: 8px; padding: 5px 2px; border-radius: 6px; cursor: pointer; font-size: 12.5px; color: #1e293b; }
.lyr__row:hover { background: #f8fafc; }
.lyr__row.is-off { opacity: .5; cursor: default; }
.lyr__row input { accent-color: #0b3d91; margin: 0; }
.lyr__sw { flex: none; width: 14px; height: 14px; border-radius: 4px; border: 1px solid rgba(15,23,42,.12); }
.lyr__lbl { display: flex; flex-direction: column; line-height: 1.2; }
.lyr__lbl small { font-size: 10.5px; color: #94a3b8; }
.maplibregl-popup-content { font: 12px/1.4 system-ui, sans-serif; padding: 8px 10px; border-radius: 8px; }

/* ── Compare ── */
.dt__cmp { position: absolute; right: 44px; top: 46px; display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border: 1px solid #e2e8f0; border-radius: 999px; background: #fff; font: inherit; font-size: 12px; font-weight: 600; color: #64748b; cursor: pointer; }
.dt__cmp:hover { border-color: #0b3d91; color: #0b3d91; }
.dt__cmp.is-on { background: #e3ecfb; border-color: #c7d7f5; color: #0b3d91; }
.rrow__cmp { position: absolute; right: 12px; top: 32px; font-size: 14px; color: #cbd5e1; opacity: 0; transition: opacity .12s, color .12s; line-height: 1; }
.rrow:hover .rrow__cmp, .rrow__cmp.is-on { opacity: 1; }
.rrow__cmp:hover { color: #0b3d91; }
.rrow__cmp.is-on { color: #0b3d91; }
.cmp-tray { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 6; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; max-width: calc(100% - 40px); padding: 8px 10px 8px 14px; border-radius: 999px; background: #fff; border: 1px solid #e2e8f0; box-shadow: 0 8px 24px rgba(15,23,42,.18); font-size: 12.5px; }
.cmp-tray__h { font-weight: 700; color: #0b3d91; margin-right: 2px; }
.cmp-tray__chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 10px; border-radius: 999px; background: #e3ecfb; color: #0b3d91; font-weight: 600; }
.cmp-tray__chip button { border: 0; background: none; color: #0b3d91; font-size: 15px; line-height: 1; cursor: pointer; padding: 0 5px; opacity: .7; }
.cmp-tray__chip button:hover { opacity: 1; }
.cmp-tray__hint { color: #94a3b8; font-size: 11.5px; }
.cmp-tray__go { padding: 6px 14px; border: 0; border-radius: 999px; background: #0b3d91; color: #fff; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.cmp-tray__go:disabled { background: #cbd5e1; cursor: default; }
.cmp-tray__clear { border: 1px solid #e2e8f0; background: #fff; border-radius: 999px; padding: 5px 10px; font: inherit; font-size: 11.5px; font-weight: 600; color: #64748b; cursor: pointer; }
.cmp-tray__clear:hover { color: #b91c1c; border-color: #fecaca; background: #fff5f5; }
.cmp-flash { position: absolute; left: 50%; bottom: 64px; transform: translateX(-50%); z-index: 7; padding: 8px 14px; border-radius: 8px; background: #1e293b; color: #fff; font-size: 12.5px; box-shadow: 0 8px 24px rgba(15,23,42,.25); }
.cmpdlg { width: min(960px, 94vw); }
.cmp__wrap { overflow: auto; max-height: 70vh; border: 1px solid #e2e8f0; border-radius: 10px; }
.cmp { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 12.5px; }
.cmp th, .cmp td { padding: 7px 10px; border-bottom: 1px solid #f1f5f9; text-align: left; vertical-align: top; }
.cmp thead th { position: sticky; top: 0; background: #f8fafc; z-index: 1; border-bottom: 1px solid #e2e8f0; min-width: 150px; }
.cmp thead th:first-child { min-width: 170px; }
.cmp tbody th { position: sticky; left: 0; background: #fff; font-weight: 600; color: #334155; white-space: nowrap; }
.cmp tbody th small { display: block; font-weight: 400; color: #94a3b8; font-size: 10.5px; white-space: normal; }
.cmp__name { border: 0; background: none; font: inherit; font-size: 13px; font-weight: 700; color: #0b3d91; cursor: pointer; padding: 0; text-align: left; }
.cmp__name:hover { text-decoration: underline; }
.cmp thead small { display: block; font-weight: 400; color: #64748b; font-size: 11px; }
.cmp__rm { position: absolute; right: 6px; top: 6px; border: 0; background: none; color: #94a3b8; font-size: 15px; cursor: pointer; }
.cmp td { color: #1e293b; }
.cmp td.is-dim { color: #94a3b8; }
.cmp td.is-best { background: #e3ecfb; color: #0b3d91; font-weight: 700; }
.cmp td.is-good { color: #0b3d91; font-weight: 700; }
.cmp td small { display: block; font-size: 10.5px; font-weight: 600; }
.cmp td small.ok { color: #0b3d91; } .cmp td small.bad { color: #b91c1c; }
.cmp td.bstat--ok { color: #0b3d91; } .cmp td.bstat--call { color: #9a5b00; } .cmp td.bstat--full { color: #991b1b; }

/* ── Nearby essentials ── */
.ess__chips { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; }
.ess__chip { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 5px 8px; border-radius: 7px; border: 1px solid #e2e8f0; font-size: 12px; color: #1e293b; cursor: pointer; line-height: 1.2; white-space: nowrap; overflow: hidden; }
.ess__chip span { font-size: 14px; flex: none; }
.ess__chip small { margin-left: auto; flex: none; color: #64748b; font-size: 11px; white-space: nowrap; }
.ess__chip.is-walk { background: #e3ecfb; border-color: #c7d7f5; }
.ess__chip.is-walk small { color: #0b3d91; font-weight: 700; }
.ess__chip.is-none { opacity: .45; cursor: default; }
.ess__chip[aria-expanded="true"] { border-color: #0b3d91; box-shadow: 0 0 0 2px rgba(11,61,145,.15); }
.ess__detail { margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: #f8fafc; font-size: 12px; }
.ess__detail b { display: block; margin-bottom: 4px; color: #0b3d91; }
.ess__row { display: flex; align-items: center; gap: 8px; padding: 3px 0; border-top: 1px solid #f1f5f9; }
.ess__row span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ess__row small { color: #64748b; white-space: nowrap; }
.ess__row a { color: #0b3d91; text-decoration: none; font-weight: 700; }
.ess__foot { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; font-size: 12px; color: #475569; align-items: center; }
.ess__foot .link { margin-left: auto; font-size: 12px; color: #0b3d91; padding: 0; }

.ess { overflow: hidden; }
.dt { overflow-x: hidden; }

/* ── Reviews ── */
.tag--rv { background: #fdf3d0; color: #6b5308; font-weight: 700; }
.rv__top { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 8px; }
.rv__big { flex: none; display: flex; flex-direction: column; align-items: center; padding: 8px 12px; border-radius: 10px; background: #fdf9ec; border: 1px solid var(--gold-light); }
.rv__big b { font-size: 24px; color: #6b5308; line-height: 1; }
.rv__big span { color: var(--gold-dark); font-size: 12px; letter-spacing: 1px; }
.rv__big small { font-size: 10px; color: #64748b; margin-top: 3px; white-space: nowrap; }
.rv__facts { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #334155; min-width: 0; }
.rv__facts b { color: #0b3d91; }
.rv__open { color: #9a5b00; }
.rv__cats { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 3px 12px; }
.rv__cats li { display: grid; grid-template-columns: 1fr 44px 24px; align-items: center; gap: 6px; font-size: 11px; color: #475569; }
.rv__cats li span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv__cats i { display: block; height: 6px; border-radius: 3px; background: #e2e8f0; overflow: hidden; }
.rv__cats i b { display: block; height: 100%; background: #0b3d91; border-radius: 3px; }
.rv__cats i b.is-good { background: #0b3d91; } .rv__cats i b.is-bad { background: #b91c1c; }
.rv__cats small { font-weight: 700; color: #1e293b; text-align: right; }
.rv__photos { display: flex; gap: 4px; flex-wrap: wrap; margin: 6px 0; }
.rv__photos img { width: 64px; height: 48px; object-fit: cover; border-radius: 6px; border: 1px solid #e2e8f0; cursor: zoom-in; }
.rv__photos--sm img { width: 48px; height: 36px; }
.rv__more { display: grid; place-items: center; width: 64px; height: 48px; border-radius: 6px; background: #f1f5f9; font-size: 12px; color: #64748b; }
.rv__list { list-style: none; margin: 0; padding: 0; }
.rv { padding: 8px 0; border-top: 1px solid #f1f5f9; }
.rv--mine { background: #fffdf5; margin: 0 -8px; padding: 8px; border-radius: 8px; border: 1px solid var(--gold-light); }
.rv__h { display: flex; align-items: baseline; gap: 6px; font-size: 12px; }
.rv__h b { color: #1e293b; }
.rv__h small { color: #64748b; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv__score { font-weight: 700; color: #6b5308; }
.rv p { margin: 4px 0; font-size: 12.5px; color: #334155; line-height: 1.45; }
.rv__tags { display: flex; flex-wrap: wrap; gap: 4px; font-size: 10.5px; color: #475569; }
.rv__tags span { background: #f1f5f9; border-radius: 999px; padding: 1px 7px; }
.rv__foot { margin-top: 4px; }
.rv__foot .link { font-size: 11px; color: #64748b; padding: 0; }
.rv__foot .link:disabled { text-decoration: none; opacity: .6; }
.rv__empty { margin: 0 0 8px; font-size: 12.5px; color: #64748b; }
.rv__write { display: block; text-align: center; margin-top: 8px; }
.rvdlg { width: min(620px, 94vw); }
.rvf__cats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; margin-bottom: 12px; }
.rvf__cat { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; color: #1e293b; }
.rvf__cat > span:first-child { display: flex; flex-direction: column; min-width: 0; }
.rvf__cat small { font-size: 10.5px; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rvf__stars { flex: none; display: flex; }
.rvf__stars button { border: 0; background: none; font-size: 20px; line-height: 1; color: #d1d5db; cursor: pointer; padding: 0 1px; }
.rvf__stars button.is-on, .rvf__stars button:hover, .rvf__stars button:hover ~ button:not(.is-on) { color: var(--gold); }
.rvf__stars:hover button { color: var(--gold); }
.rvf__stars button:hover ~ button { color: #d1d5db !important; }
.rvf__shelter { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin: 4px 0 10px; font-size: 12px; color: #64748b; }
.rvf__shelter > span { margin-right: 4px; }
.rvf__shelter label input { display: none; }
.rvf__shelter label span { display: inline-block; min-width: 28px; text-align: center; padding: 4px 6px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 12px; font-weight: 600; color: #475569; cursor: pointer; }
.rvf__shelter label input:checked + span { background: #0b3d91; border-color: #0b3d91; color: #fff; }
.rvf__text { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: #64748b; margin-bottom: 10px; }
.rvf__text textarea { font: inherit; font-size: 13px; padding: 7px 8px; border: 1px solid #cbd5e1; border-radius: 7px; resize: vertical; }
.rvf__photos { margin-bottom: 10px; }
.rvf__add { display: inline-block; cursor: pointer; }
.rvf__photos small { display: block; margin-top: 4px; font-size: 11px; color: #94a3b8; }
.rvf__thumbs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.rvf__thumbs span { position: relative; display: flex; flex-direction: column; gap: 3px; width: 120px; }
.rvf__thumbs img { width: 120px; height: 80px; object-fit: cover; border-radius: 6px; }
.rvf__thumbs input { font: inherit; font-size: 11px; padding: 3px 5px; border: 1px solid #cbd5e1; border-radius: 5px; }
.rvf__thumbs button { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border: 0; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; cursor: pointer; }

/* ── Approach & arrival ── */
.appr__ok { color: #0b3d91; }
.appr__unv { color: #9a5b00; }
.appr__top { display: flex; gap: 8px; margin-bottom: 8px; }
.appr__vhf { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 64px; padding: 6px 10px; border-radius: 10px; background: #0b3d91; color: #fff; }
.appr__vhf small { font-size: 10px; letter-spacing: .08em; opacity: .8; }
.appr__vhf b { font-size: 22px; line-height: 1.1; }
.appr__cell { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6px; border-radius: 10px; background: #f1f5f9; text-align: center; }
.appr__cell b { font-size: 18px; color: #0b3d91; }
.appr__cell small { font-size: 10.5px; color: #64748b; }
.appr__arrow { font-size: 18px; color: #0b3d91; display: inline-block; line-height: 1; }
.appr__rows dd b.is-warn { color: #b91c1c; }
.appr__hm { display: flex; gap: 10px; align-items: flex-start; margin-top: 8px; padding: 8px 10px; border-radius: 9px; background: #f8fafc; border: 1px solid #e2e8f0; }
.appr__hmic { flex: none; width: 26px; height: 26px; border-radius: 50%; background: #4338ca; color: #fff; display: grid; place-items: center; font-size: 13px; }
.appr__hmbody { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 12px; }
.appr__hmbody b { color: #1e293b; }
.appr__hmbody small { color: #64748b; }
.appr__hmlinks { display: flex; gap: 10px; margin-top: 2px; }
.appr__hmlinks a { color: #0b3d91; font-weight: 600; text-decoration: none; }
.appr__hmlinks .link { font-size: 12px; color: #64748b; padding: 0; }
.appr__note { margin: 8px 0 0; font-size: 11.5px; color: #64748b; line-height: 1.4; }
.appr__note .link { font-size: 11.5px; color: #0b3d91; padding: 0; }

/* ── Share ── */
.boatbtn--share { margin-right: 4px; }
.dt__share { position: absolute; right: 12px; top: 46px; width: 28px; height: 28px; border: 1px solid #e2e8f0; border-radius: 50%; background: #fff; font-size: 14px; color: #64748b; cursor: pointer; }
.dt__share:hover { border-color: #0b3d91; color: #0b3d91; }
.dt__cmp { right: 48px; }
.sharedlg { width: min(520px, 94vw); }
.share__kinds { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.share__kind { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid #cbd5e1; border-radius: 999px; background: #fff; font: inherit; font-size: 12.5px; font-weight: 600; color: #475569; cursor: pointer; }
.share__kind.is-on { background: #0b3d91; border-color: #0b3d91; color: #fff; }
.share__desc { margin: 0 0 8px; font-size: 13px; color: #1e293b; font-weight: 600; }
.share__url { display: flex; gap: 6px; margin-bottom: 8px; }
.share__url input { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid #cbd5e1; border-radius: 8px; font: inherit; font-size: 12px; color: #475569; }
.share__url .berth__btn { flex: none; }
.share__row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.share__row .berth__btn { flex: 1; text-align: center; min-width: 100px; }
.trip__share { display: flex; flex-direction: column; gap: 6px; }
.trip__share .berth__btn { text-align: center; }

/* ── Recently viewed ── */
.recent { padding: 8px 0 8px 16px; border-bottom: 1px solid var(--line-soft); }
.recent__h { display: flex; justify-content: space-between; align-items: baseline; padding-right: 16px; margin-bottom: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #94a3b8; }
.recent__h .link { font-size: 11px; text-transform: none; letter-spacing: 0; font-weight: 500; color: #94a3b8; }
.recent__list { list-style: none; margin: 0; padding: 0 16px 0 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.recent__list::-webkit-scrollbar { display: none; }
.recent__list li { flex: none; }
.recent__chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid #e2e8f0; border-radius: 999px; background: #fff; font: inherit; font-size: 12px; color: #1e293b; cursor: pointer; white-space: nowrap; max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.recent__chip .rrow__dot { margin: 0; width: 8px; height: 8px; }
.recent__chip:hover { border-color: #0b3d91; }
.recent__chip.is-on { background: #fdf9ec; border-color: var(--gold-light); }

/* ── Measure ── */
body.measure-on #map { cursor: crosshair; }
.measbtn[aria-pressed="true"] { background: #7c2d12; border-color: #7c2d12; color: #fff; }
.meas { position: absolute; left: 12px; top: 56px; z-index: 6; width: 340px; max-width: calc(100% - 24px); background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 12px 32px rgba(15,23,42,.16); padding: 10px 12px; font-size: 12.5px; }
.meas__h { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.meas__h b { color: #7c2d12; }
.meas__live { flex: 1; min-width: 0; font-size: 11.5px; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meas__h .dt__close { position: static; }
.meas__sum { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin: 6px 0; }
.meas__sum > div { display: flex; flex-direction: column; padding: 6px 8px; border-radius: 8px; background: #fdf6f2; }
.meas__sum b { font-size: 17px; color: #7c2d12; }
.meas__sum span { font-size: 11px; color: #64748b; }
.meas__sum input { width: 40px; font: inherit; font-size: 11px; padding: 1px 3px; border: 1px solid #cbd5e1; border-radius: 4px; }
.meas__legs { list-style: none; margin: 0; padding: 0; max-height: 200px; overflow: auto; }
.meas__legs li { display: grid; grid-template-columns: 34px 1fr 40px 54px 44px; gap: 6px; align-items: center; padding: 4px 0; border-top: 1px solid #f1f5f9; font-size: 11.5px; }
.meas__n { color: #94a3b8; font-weight: 700; }
.meas__names { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #334155; }
.meas__brg { font-variant-numeric: tabular-nums; color: #7c2d12; font-weight: 700; }
.meas__nm { font-weight: 700; color: #1e293b; text-align: right; }
.meas__t { color: #64748b; text-align: right; }
.meas__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.meas__row .link { font-size: 12px; color: #0b3d91; padding: 0; }
.meas__row .link:disabled { color: #cbd5e1; text-decoration: none; }
.meas__chk { display: flex; align-items: center; gap: 5px; color: #334155; }
.meas__chk input { accent-color: #7c2d12; }
.meas__note { margin: 6px 0 0; font-size: 10.5px; color: #94a3b8; }

/* ── Prices ── */
.fgroup__hint { font-weight: 400; text-transform: none; letter-spacing: 0; color: #94a3b8; margin-left: 4px; }
.chip--price small { font-weight: 400; color: #94a3b8; margin-left: 2px; }
.chip--price[aria-pressed="true"] small { color: #cbd5e1; }
.fgroup__note { margin: 6px 0 0; font-size: 11px; color: #64748b; }
.tag--price { background: #eef2f7; color: #1e293b; font-weight: 700; letter-spacing: .02em; }
.tag--fuelp { background: #111; color: #fff; font-weight: 600; }
.tag--fuelp.is-stale { background: #64748b; }
.berth__price { margin: 0 0 8px; font-size: 12.5px; color: #1e293b; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.berth__price small { color: #64748b; font-size: 11px; }
.fuel__own small { color: #64748b; font-weight: 400; }
.fuel__name small { color: #64748b; font-weight: 600; }
.fuel__name small.is-stale { color: #94a3b8; text-decoration: line-through dotted; }

/* ── Marker states ── */
.dt__marks { display: flex; gap: 6px; margin: 4px 0 10px; }
.dt__mark { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border: 1px solid #e2e8f0; border-radius: 999px; background: #fff; font: inherit; font-size: 12px; font-weight: 600; color: #64748b; cursor: pointer; }
.dt__mark:hover { border-color: #0b3d91; color: #0b3d91; }
.dt__mark.is-on { background: #0b3d91; border-color: #0b3d91; color: #fff; }
.dt__mark--booked.is-on { background: var(--gold); border-color: var(--gold-dark); color: #3d2f05; }
.tag--visited { background: #e3ecfb; color: #0b3d91; font-weight: 700; }
.tag--booked { background: var(--gold); color: #3d2f05; font-weight: 700; }
.tag--open { background: #e3ecfb; color: #0b3d91; font-weight: 700; }
.tag--closed { background: #f1f5f9; color: #94a3b8; }
.is-open { color: #0b3d91; } .is-closed { color: #94a3b8; font-weight: 500; }
.berth__booked { display: block; margin-top: 8px; font-size: 12px; color: #a68419; padding: 0; }
.lyr__k { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 11px; color: #475569; padding: 3px 2px; }
.lyr__k i { display: inline-grid; place-items: center; font-style: normal; margin-left: 6px; }
.lyr__k i:first-child { margin-left: 0; }
.k-ring { width: 14px; height: 14px; border-radius: 50%; border: 2.5px solid; box-sizing: border-box; }
.k-ok { border-color: #0b3d91; } .k-call { border-color: #d97706; } .k-full { border-color: #b91c1c; }
.k-badge { width: 16px; height: 16px; border-radius: 50%; font-size: 10px; font-weight: 700; color: #fff; }
.k-heart { color: #c8102e; background: #fff; border: 1px solid #fecdd3; } .k-vis { background: #0b3d91; } .k-book { background: var(--gold); color: #3d2f05; } .k-fuel { background: #111; }
.k-dot { width: 12px; height: 12px; border-radius: 50%; background: #0b3d91; }
.k-faded { opacity: .3; } .k-hollow { background: #fff; border: 2px solid #0b3d91; box-sizing: border-box; }

/* ── Card header v2: action bar ── */
.dt__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.dt__top .dt__close { position: static; }
.dt__save, .dt__cmp, .dt__share, .dt__marks { display: none; }
.dt__actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 14px; }
.act { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border: 1px solid #e2e8f0; border-radius: 999px; background: #fff; font: inherit; font-size: 12px; font-weight: 600; color: #475569; cursor: pointer; line-height: 1; }
.act i { font-style: normal; font-size: 13px; color: #94a3b8; }
.act:hover { border-color: #0b3d91; color: #0b3d91; }
.act:hover i { color: #0b3d91; }
.act.is-on { background: #0b3d91; border-color: #0b3d91; color: #fff; }
.act.is-on i { color: #fff; }
.act--save.is-on { background: #fff1f2; border-color: #fecdd3; color: #c8102e; }
.act--save.is-on i { color: #c8102e; }
.act--booked.is-on { background: var(--gold); border-color: var(--gold-dark); color: #3d2f05; }
.act--booked.is-on i { color: #3d2f05; }
.act--icon { padding: 6px 9px; margin-left: auto; }

/* ── Community spots ── */
body.spot-adding #map { cursor: crosshair; }
.spotbtn[aria-pressed="true"] { background: #0369a1; border-color: #0369a1; color: #fff; }
.spot-offer .maplibregl-popup-content { padding: 8px 10px; text-align: center; }
.spot-offer__btn { display: block; width: 100%; padding: 7px 12px; border: 0; border-radius: 8px; background: #0b3d91; color: #fff; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.spot-offer small { display: block; margin-top: 4px; color: #94a3b8; font-size: 10.5px; }
.spotdlg { width: min(640px, 94vw); }
.spotf__kinds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 12px; }
.spotf__kind input { display: none; }
.spotf__kind span { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 12px; color: #1e293b; cursor: pointer; line-height: 1.2; }
.spotf__kind span i { font-style: normal; font-size: 16px; }
.spotf__kind input:checked + span { background: #0b3d91; border-color: #0b3d91; color: #fff; }
.spotf__kind.is-warn input:checked + span { background: #b91c1c; border-color: #b91c1c; }
.spotcard__ic { font-size: 22px; margin-right: 6px; vertical-align: -2px; }
.spotcard__warn { margin: 0 0 8px; padding: 8px 10px; border-radius: 8px; background: #fef2f2; color: #991b1b; font-size: 12px; }
.spotcard__outdated { margin: 0 0 8px; padding: 8px 10px; border-radius: 8px; background: #fff7e6; color: #9a5b00; font-size: 12px; }
.spotcard__note { margin: 0 0 8px; font-size: 14px; color: #1e293b; line-height: 1.45; font-style: italic; }
.spotcard__meta { margin: 6px 0 10px; font-size: 12px; color: #64748b; }
.spotcard__stale { color: #9a5b00; font-weight: 600; }
.act--no.is-on { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.act--no.is-on i { color: #991b1b; }
.spotcard__foot { margin-top: 10px; }
.spotcard__foot .link { font-size: 12px; color: #94a3b8; padding: 0; }
.spotcard__foot .link.is-done { color: #0b3d91; text-decoration: none; }

.rmore { padding: 10px 16px 20px; }
.rmore__btn { width: 100%; padding: 9px; border: 1px solid #cbd5e1; border-radius: 8px; background: #fff; font: inherit; font-size: 12.5px; font-weight: 600; color: #0b3d91; cursor: pointer; }
.rmore__btn small { color: #94a3b8; font-weight: 400; }

/* ── hazards (community-reported) ── */
.tag--hazard { background: #fee2e2; color: #b91c1c; font-weight: 700; }
.hzsec { border: 1.5px solid #fca5a5; background: #fff5f5; border-radius: 10px; padding: 10px 12px; }
.hzsec .dt__h { color: #b91c1c; margin-top: 0; }
.hz__list { list-style: none; margin: 0; padding: 0; }
.hz__row { display: flex; align-items: flex-start; gap: 8px; width: 100%; padding: 6px 0; border: 0; border-top: 1px solid #fecaca; background: none; text-align: left; font: inherit; cursor: pointer; }
.hz__list li:first-child .hz__row { border-top: 0; }
.hz__ic { font-size: 16px; line-height: 1.2; }
.hz__body { flex: 1; min-width: 0; font-size: 12.5px; color: #7f1d1d; }
.hz__body b { display: block; color: #991b1b; }
.hz__body small { display: block; color: #9f1239; font-size: 11px; margin-top: 1px; }
.hz__dist { white-space: nowrap; font-size: 12px; font-weight: 700; color: #b91c1c; text-align: right; }
.hz__dist small { display: block; font-weight: 400; color: #9f1239; font-size: 10.5px; }
.hz__note { margin: 6px 0 0; font-size: 10.5px; color: #9f1239; }
.trip__hz { margin: 8px 0; padding: 10px 12px; border: 1.5px solid #fca5a5; background: #fff5f5; border-radius: 10px; color: #7f1d1d; font-size: 12.5px; }
.trip__hz b { color: #b91c1c; }
.trip__hz ul { margin: 6px 0 4px; padding-left: 4px; list-style: none; }
.trip__hz li { padding: 3px 0; }
.trip__hz .link { color: #b91c1c; font-weight: 700; }
.trip__hz small { display: block; color: #9f1239; font-size: 10.5px; }
.k-hz { display: inline-block; width: 18px; height: 18px; margin-right: 4px; border-radius: 50%; border: 2px solid #dc2626; background: #fee2e2; font-size: 11px; line-height: 14px; text-align: center; vertical-align: middle; }
.hzsec--chart, .trip__hz--chart { border-style: dashed; }
.hz__sum { margin: 0 0 6px; font-size: 12.5px; color: #7f1d1d; }
.hz__more { padding: 6px 0 0; font-size: 11.5px; color: #9f1239; }
.chzcard .dt__rows dd b { color: #b91c1c; }
/* seamark cards + legend */
.smcard__ic { width: 30px; height: 30px; vertical-align: middle; margin-right: 6px; }
.smcard__what { margin: 0 0 10px; padding: 8px 10px; border-radius: 8px; background: #eff6ff; color: #1e3a8a; font-size: 12.5px; line-height: 1.4; }
.smcard__foot { margin: 8px 0 0; }
.smlegend__list { list-style: none; margin: 0; padding: 0; max-height: 60vh; overflow: auto; }
.smlegend__list li { display: flex; gap: 10px; align-items: center; padding: 6px 0; border-top: 1px solid #f1f5f9; }
.smlegend__list canvas { width: 36px; height: 36px; flex: none; }
.smlegend__list b { display: block; font-size: 13px; }
.smlegend__list small { display: block; color: #475569; font-size: 11.5px; line-height: 1.35; }
.lyr__lbl small .link { font-size: inherit; }
.lyrbtn--legend { top: 62px; }
/* facilities + fuel reports */
.fac__list { list-style: none; margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; }
.fac__list li { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; }
.fac__ic { font-size: 18px; line-height: 1.1; width: 22px; text-align: center; flex: none; }
.fac__list b { display: block; font-size: 12.5px; }
.fac__list small { display: block; color: #64748b; font-size: 11px; line-height: 1.3; }
.fuelrep { margin: 4px 0 0; font-size: 12.5px; }
.fuelrep ul { list-style: none; margin: 4px 0 6px; padding: 0; }
.fuelrep li { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; border-top: 1px solid #f1f5f9; }
.fuelrep li small { color: #64748b; white-space: nowrap; }
.fuelrep__none { margin: 4px 0 0; font-size: 12px; color: #64748b; }
.spotf__fuel .bform__row { display: flex; gap: 8px; }
.spotf__fuel .bform__row label { flex: 1; }
.spotf__hint { display: block; margin: 4px 0 10px; color: #64748b; font-size: 11px; }
.spotcard__fuel { display: flex; gap: 14px; margin: 0 0 10px; padding: 8px 10px; border-radius: 8px; background: #fff7ed; }
.spotcard__fuel span { display: flex; flex-direction: column; }
.spotcard__fuel small { color: #9a3412; font-size: 10.5px; }
.spotcard__fuel b { color: #7c2d12; font-size: 14px; }

/* services that come to the marina (Live.servesAllMarinas) */
.mobile__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mobile__row { display: flex; justify-content: space-between; gap: 10px; padding: 7px 9px; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 12.5px; background: #fff; }
.mobile__body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mobile__body small { color: #64748b; margin-left: 4px; }
.mobile__desc { color: #475569; font-size: 11.5px; }
.mobile__acts { display: flex; gap: 8px; align-items: center; white-space: nowrap; }

/* ── phones: one row of small controls, nothing overlapping ── */
.maplibregl-canvas { -webkit-touch-callout: none; }   /* long-press adds a spot; no iOS image callout */
@media (max-width: 640px) {
  .hdr { gap: 8px; padding: 0 10px; }
  .hdr__title { font-size: 16px; }
  .hdr__right { gap: 6px; }
  .hdr__count { display: none; }                       /* "11 236 of 11 345 places" — no room, it is in the list header anyway */
  .boatbtn { padding: 5px 9px; font-size: 11.5px; }
  .hdr__terms { padding: 5px 8px; }
  .hdr__terms-txt { display: none; }                   /* just ⓘ on a phone */
  .spotbtn { display: none; }                          /* long-press the map instead */
  .wxbar { top: 10px; left: 10px; right: 104px; gap: 6px; flex-wrap: wrap; max-width: calc(100% - 114px); }   /* leaves the right column free */
  .wxbar__ctl { display: none; }                                                   /* the time slider only while Wind is on */
  .wxbar:has(#wx-toggle[aria-pressed="true"]) .wxbar__ctl { display: flex; flex-basis: 100%; }
  .wxbar__btn { padding: 6px 9px; font-size: 11.5px; }
  .wxbar__ctl { padding: 5px 9px; gap: 6px; }
  .wxbar__when { width: 108px; }
  .wxbar__ctl input[type=range] { width: 80px; }
  .wxbar__st { display: none; }
  /* right column: Layers, Symbols, then the zoom / locate controls below them */
  .lyrbtn { right: 10px; top: 10px; padding: 6px 9px; font-size: 11.5px; }
  .lyrbtn--legend { top: 48px; }
  .maplibregl-ctrl-top-right { top: 86px; }
}