.harbour-map {
  --harbour-navy: #051223;
  --harbour-blue: #053f83;
  --harbour-pale-blue: #c3dbf3;
  --harbour-paper: #f8f9f7;
  --harbour-white: #ffffff;
  --harbour-ink: #0c1d2c;
  --harbour-muted: #5d6a75;
  --harbour-divider: #b7cce1;
  box-sizing: border-box;
  padding: clamp(12px, 2vw, 28px);
  background: var(--harbour-paper);
  color: var(--harbour-ink);
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  container-type: inline-size;
}
.harbour-map *, .harbour-map *::before, .harbour-map *::after { box-sizing: border-box; }
.harbour-map [hidden] { display: none; }
.harbour-map .harbour-map__intro { margin: 0 0 20px; max-width: 75ch; }
.harbour-map .harbour-map__layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); gap: 24px; align-items: start; }
.harbour-map .harbour-map__chart-column { min-width: 0; }
.harbour-map .harbour-map__canvas { position: relative; width: 100%; aspect-ratio: 534 / 518; isolation: isolate; }
.harbour-map .harbour-map__svg { display: block; width: 100%; height: 100%; overflow: hidden; }
.harbour-map .harbour-map__contrast,
.harbour-map .harbour-map__quay-line,
.harbour-map .harbour-map__hit-area { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.harbour-map .harbour-map__contrast { stroke: var(--harbour-pale-blue); stroke-width: 7px; opacity: 0; pointer-events: none; }
.harbour-map .harbour-map__quay-line { stroke: var(--harbour-blue); stroke-width: 3.5px; opacity: 0; pointer-events: none; }
.harbour-map .harbour-map__hit-area { stroke: transparent; stroke-width: 18px; pointer-events: none; }
.harbour-map.is-ready .harbour-map__hit-area { pointer-events: stroke; cursor: pointer; }
.harbour-map .harbour-map__geometry.is-active .harbour-map__contrast,
.harbour-map .harbour-map__geometry.is-active .harbour-map__quay-line { opacity: 1; }
.harbour-map .harbour-map__geometry.is-preview .harbour-map__quay-line { stroke-dasharray: 6 4; }
.harbour-map .harbour-map__marker {
  position: absolute; transform: translate(-50%, -50%); z-index: 2;
  display: grid; place-items: center; width: 44px; height: 44px;
  min-width: 0; min-height: 0; margin: 0; padding: 0; border: 0;
  border-radius: 0; background: transparent; color: var(--harbour-blue);
  box-shadow: none; cursor: pointer; font: 700 12px/1 "DM Sans", Arial, sans-serif;
}
.harbour-map .harbour-map__marker[hidden] { display: none; }
.harbour-map .harbour-map__marker span { display: grid; place-items: center; width: 25px; height: 25px; border: 1px solid var(--harbour-blue); border-radius: 2px; background: var(--harbour-white); }
.harbour-map .harbour-map__marker.is-active span { background: var(--harbour-blue); color: var(--harbour-white); }
.harbour-map .harbour-map__marker.is-selected span { outline: 2px solid var(--harbour-blue); outline-offset: 2px; }
.harbour-map .harbour-map__marker.is-preview span { border: 2px dashed var(--harbour-white); }
.harbour-map .harbour-map__marker:focus-visible { outline: 2px solid var(--harbour-navy); outline-offset: 1px; background: #ffffffb3; z-index: 3; }
.harbour-map .harbour-map__panel { background: var(--harbour-white); border: 1px solid var(--harbour-divider); border-radius: 2px; padding: clamp(18px, 2vw, 28px); box-shadow: 0 4px 16px #05122308; min-width: 0; }
.harbour-map .harbour-map__chooser { margin-bottom: 22px; }
.harbour-map .harbour-map__chooser[hidden] { display: block; visibility: hidden; }
.harbour-map .harbour-map__chooser label { display: block; font-size: 14px; font-weight: 700; margin-bottom: 6px; }
.harbour-map .harbour-map__chooser select { width: 100%; min-height: 44px; margin: 0; border: 1px solid var(--harbour-divider); border-radius: 2px; padding: 10px 28px 10px 10px; background-color: var(--harbour-white); color: var(--harbour-ink); font: inherit; font-size: 16px; }
.harbour-map .harbour-map__status { margin: 0 0 8px; color: var(--harbour-blue); font-size: 13px; font-weight: 700; }
.harbour-map .harbour-map__heading { font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: clamp(24px, 2.1vw, 30px); line-height: 1.2; color: var(--harbour-navy); margin: 0 0 16px; }
.harbour-map .harbour-map__note { font-size: 14px; line-height: 1.6; margin: 0 0 18px; }
.harbour-map .harbour-map__specs { display: grid; gap: 0; margin: 0; }
.harbour-map .harbour-map__specs > div { padding: 10px 0; border-top: 1px solid var(--harbour-divider); }
.harbour-map .harbour-map__specs dt { font-size: 12px; font-weight: 600; color: var(--harbour-muted); margin: 0 0 2px; }
.harbour-map .harbour-map__specs dd { font-size: 16px; line-height: 1.5; margin: 0; overflow-wrap: anywhere; }
.harbour-map .harbour-map__warning { margin: 20px 0 0; padding: 12px; border-left: 3px solid var(--harbour-blue); background: var(--harbour-paper); font-size: 14px; line-height: 1.6; }
.harbour-map .harbour-map__disclaimer { font-size: 14px; color: var(--harbour-muted); margin: 16px 0 8px; }
.harbour-map .harbour-map__full-map { color: var(--harbour-blue); font-size: 14px; text-decoration: underline; }
.harbour-map .harbour-map__fallback { margin-top: 24px; }
.harbour-map .harbour-map__fallback summary { cursor: pointer; padding: 12px 0; font-weight: 700; }
.harbour-map .harbour-map__fallback-item { margin: 16px 0; padding: 20px; background: var(--harbour-white); border: 1px solid var(--harbour-divider); }
.harbour-map select:focus-visible, .harbour-map a:focus-visible, .harbour-map summary:focus-visible { outline: 3px solid var(--harbour-blue); outline-offset: 3px; }
@container (max-width: 900px) {
  .harbour-map .harbour-map__layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1000px) {
  .harbour-map .harbour-map__layout { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .harbour-map *, .harbour-map *::before, .harbour-map *::after { animation: none; transition: none; scroll-behavior: auto; }
}
@container (max-width: 500px) {
  .harbour-map .harbour-map__marker { width: 24px; height: 24px; }
  .harbour-map .harbour-map__marker span { width: 20px; height: 20px; font-size: 11px; }
}