/* MapLibre owns marker transforms. Layout must never shift the geographic anchor. */
#map .port-marker.maplibregl-marker { position:absolute; top:0; left:0; margin:0; transition:none!important; will-change:transform; min-height:44px; max-width:none; padding:5px 11px; gap:5px; border:1px solid var(--fable-line); border-radius:14px; background:var(--fable-surface); color:var(--fable-ink); box-shadow:0 2px 8px #0002; }
#map .port-marker span { font-size:13px; font-weight:750; }
#map .port-marker strong { font-size:11px; color:var(--fable-muted); }
#map .port-marker.marker-cluster { min-width:48px; min-height:48px; flex-direction:column; gap:0; padding:4px 10px; background:var(--fable-water); color:var(--fable-on-water); border-radius:24px; }
#map .marker-cluster strong { font-size:15px; color:inherit; }
#map .marker-cluster span { font-size:10px; }
#map .port-marker.is-selected { border:2px solid var(--fable-water); z-index:4; }
#map .port-marker.marker-research { border-style:dashed; }
#mapView { padding:12px 0 30px; }
#mapView .ports-header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0; margin:0 0 16px; }
#mapView .ports-header .eyebrow { display:none; }
#mapView h1 { margin:2px 0 6px; font-size:clamp(25px,3.5vw,36px); }
#mapView #locationStatus { font-size:13px; margin:0; }
#mapView .ex-explore-toolbar { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; }
#mapView .ex-search-label { display:block; min-width:0; }
#mapView #portSearch { width:100%; min-height:48px; border:1px solid var(--fable-line); border-radius:12px; padding:10px 14px; background:var(--fable-surface); color:var(--fable-ink); font:inherit; }
#mapView .ex-date-label { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--fable-muted); }
#mapView #exploreDate { min-width:0; min-height:48px; width:150px; border:1px solid var(--fable-line); border-radius:12px; background:var(--fable-surface); color:var(--fable-ink); padding:8px; font:inherit; }
#mapView .ex-explore-options { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:10px 0; }
#mapView .region-filters { gap:6px; }
#mapView .region-filters button { min-height:44px; padding:8px 12px; border:0; border-radius:12px; font-size:13px; }
#mapView .explore-mode-switch { margin:0; padding:3px; border-radius:14px; }
#mapView .explore-mode-switch button { min-height:44px; min-width:52px; padding:8px; font-size:13px; }
#mapView .ex-presets { display:flex; flex-wrap:wrap; gap:4px 8px; margin:0 0 12px; }
#mapView .ex-presets button { min-height:44px; padding:6px 12px; border:0; border-radius:10px; background:var(--fable-surface-soft); color:var(--fable-water); font:inherit; font-size:13px; }
#mapView .ex-presets button[aria-pressed="true"] { background:var(--fable-water-soft); font-weight:800; }
#mapView .ex-explore-layout { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(300px,1fr); align-items:start; gap:20px; }
#mapView:not(.is-map-mode) .ex-explore-layout { grid-template-columns:1fr; }
#mapView #mapPanel { min-width:0; position:sticky; top:16px; overflow:hidden; border:1px solid var(--fable-line); border-radius:20px; background:var(--fable-surface); }
#mapView .map-frame { position:relative; width:100%; height:520px; min-height:0; border:0; border-radius:0; margin:0; }
#mapView #map { position:absolute; inset:0; width:100%; height:100%; }
#mapView .map-controls { top:12px; right:12px; bottom:auto; gap:6px; }
#mapView .map-controls button { width:44px; min-height:44px; background:var(--fable-surface); color:var(--fable-ink); border:1px solid var(--fable-line); box-shadow:none; border-radius:12px; }
#mapView .map-meta { padding:10px 14px; margin:0; border-top:1px solid var(--fable-line); background:var(--fable-surface); gap:3px; }
#mapView .map-meta .map-legend { display:none; }
#mapView .ex-map-note,#mapView .map-attribution { margin:0; font-size:11px; line-height:1.5; color:var(--fable-muted); text-align:left; }
#mapView #portListPanel { min-width:0; padding:0; border:0; background:transparent; margin:0; }
#mapView .ex-results-heading { display:flex; flex-wrap:wrap; gap:8px; justify-content:space-between; align-items:center; }
#mapView .ex-results-heading h2 { font-size:18px; margin:0; }
#mapView .ex-results-heading button { min-height:44px; font-size:12px; }
#mapView #portListCount { margin:4px 0; font-size:13px; }
#mapView .ex-results-note { font-size:12px; color:var(--fable-muted); margin:4px 0 12px; }
#mapView #portList { display:grid; grid-template-columns:1fr; gap:12px; padding:0; margin:0; list-style:none; }
#mapView:not(.is-map-mode) #portList { grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); }
#mapView #portList>li { padding:0; border:0; margin:0; min-width:0; }
#mapView .port-list-row { display:block; width:100%; text-align:left; padding:18px; border:1px solid var(--fable-line); border-radius:16px; background:var(--fable-surface); color:var(--fable-ink); min-width:0; }
#mapView .port-row-head { display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; }
#mapView .port-row-head>strong { font-size:18px; }
#mapView .port-row-area { font-size:12px; }
#mapView .support-badge { margin-left:auto; font-size:10px; padding:3px 6px; background:var(--fable-surface-soft); color:var(--fable-muted); border-radius:5px; }
#mapView .ex-port-mul { display:block; margin:12px 0 6px; font-size:22px; font-weight:800; }
.ex-port-numbers,.ex-date-facts { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:12px 0; }
.ex-port-numbers>span:last-child { grid-column:1/-1; display:flex; gap:8px; align-items:baseline; }
.ex-port-numbers small,.ex-date-facts small { display:block; color:var(--fable-muted); font-size:12px; font-weight:500; }
.ex-port-numbers strong,.ex-date-facts strong { display:block; font-size:15px; font-weight:700; font-variant-numeric:tabular-nums; line-height:1.5; }
.ex-tide-state { font-size:12px; color:var(--fable-water); }
.ex-marine-note { display:block; color:var(--fable-muted); font-size:12px; line-height:1.6; overflow-wrap:anywhere; }
.ex-card-action { display:flex; justify-content:space-between; padding-top:12px; margin-top:12px; border-top:1px solid var(--fable-line); font-size:13px; font-weight:700; color:var(--fable-water); }
#mapView .ex-selection { padding:20px; margin:0 0 20px; border:2px solid var(--fable-water); border-radius:18px; background:var(--fable-surface); }
.ex-selection-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.ex-selection-heading small { color:var(--fable-water); font-size:12px; }
#mapView .ex-selection-heading h2 { font-size:24px; margin:0; }
.ex-selection-heading button { min-height:44px; min-width:44px; border:0; background:var(--fable-surface-soft); border-radius:50%; font-size:24px; color:var(--fable-ink); }
.ex-source { font-size:11px; line-height:1.65; color:var(--fable-muted); overflow-wrap:anywhere; margin:12px 0; }
.ex-selection-actions { display:grid; gap:8px; margin-top:16px; }
.ex-selection-actions a { display:flex; justify-content:center; align-items:center; min-height:48px; padding:10px; text-decoration:none; border-radius:12px; background:var(--fable-water); color:var(--fable-on-water); font-size:14px; font-weight:750; }
.ex-selection-actions a+a { background:var(--fable-water-soft); color:var(--fable-water); }
.ex-more { min-height:44px; border:0; background:transparent; color:var(--fable-water); font:inherit; font-size:12px; }
#calendarView { padding:12px 0 40px; }
#calendarView .calendar-header { display:flex; flex-direction:column; gap:12px; margin:0 0 12px; padding:0; }
#calendarView .port-switcher { width:100%; margin:0; padding:0 0 8px; border-bottom:1px solid var(--fable-line); }
#calendarView .port-switcher-caption { display:none; }
#calendarView .calendar-reference { margin:0; }
#calendarView .calendar-reference:has([hidden]):not(:has(button:not([hidden]))) { display:none; }
#calendarView h1 { font-size:clamp(26px,3vw,36px); margin:0; }
#calendarView .si-view-lead { margin:6px 0; font-size:15px; }
#calendarView #calendarRangeLabel { margin:4px 0; font-size:12px; }
#calendarView .candidate-start-hint { font-size:13px; margin:0 0 12px; color:var(--fable-muted); }
#calendarView .calendar-filters { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 12px; padding:0; }
#calendarView .calendar-filters button { min-height:44px; padding:9px 14px; border:0; border-radius:12px; background:var(--fable-surface-soft); color:var(--fable-muted); font:inherit; font-size:14px; }
#calendarView .calendar-filters button[aria-pressed="true"] { background:var(--fable-water-soft); color:var(--fable-water); font-weight:750; }
#calendarView .calendar-month-controls { gap:8px; margin:0 0 12px; padding:0; }
#calendarView .calendar-month-controls button,#calendarView .calendar-month-controls select { min-height:44px; font-size:14px; border-radius:10px; }
#calendarView .calendar-legend { margin:6px 0; font-size:12px; gap:10px; }
#calendarView .calendar-sea-state { margin:0 0 8px; padding:0; font-size:11px; }
#calendarView .ex-agenda-pager { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:8px 0 12px; }
#calendarView .ex-agenda-pager button { min-height:44px; min-width:52px; border:1px solid var(--fable-line); border-radius:10px; background:var(--fable-surface); color:var(--fable-water); font:inherit; font-size:13px; }
#calendarView #agendaRange { font-size:13px; font-weight:700; }
#calendarView .ex-date-agenda { display:grid; gap:12px; grid-template-columns:repeat(2,minmax(0,1fr)); }
#calendarView .ex-date-row { padding:18px; border:1px solid var(--fable-line); border-radius:16px; background:var(--fable-surface); min-width:0; }
#calendarView .ex-date-row.is-saved { border-color:var(--fable-water); background:var(--fable-water-soft); }
#calendarView .ex-date-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; }
#calendarView .ex-date-heading>button:first-child { display:flex; align-items:center; gap:14px; min-height:44px; border:0; padding:0; color:var(--fable-ink); background:transparent; cursor:pointer; }
#calendarView .ex-date-heading time { font-size:20px; font-weight:800; }
#calendarView .ex-date-heading time small { font-size:13px; font-weight:500; margin-left:6px; }
#calendarView .ex-date-heading strong { font-size:21px; color:var(--fable-water); }
#calendarView .ex-date-save { min-height:44px; min-width:76px; border:0; padding:8px 12px; border-radius:10px; background:var(--fable-surface-soft); color:var(--fable-water); font-size:13px; font-weight:700; }
#calendarView .ex-date-save[aria-pressed="true"] { background:var(--fable-water); color:var(--fable-on-water); }
#calendarView .ex-date-save:disabled { opacity:.6; cursor:not-allowed; }
#calendarView .ex-date-facts { grid-template-columns:1.15fr 1.15fr .8fr; gap:8px; }
#calendarView .ex-date-facts strong { font-size:14px; }
#calendarView .ex-date-note { display:flex; justify-content:space-between; flex-wrap:wrap; gap:5px; font-size:11px; color:var(--fable-muted); margin:0; }
#calendarView #candidateComparison { margin-top:24px; border:1px solid var(--fable-line); border-radius:16px; padding:16px; background:var(--fable-surface); scroll-margin-top:20px; }
#calendarView #candidateComparisonSummary { min-height:48px; font-size:16px; }
#calendarView .candidate-comparison-head { margin-top:20px; }
#calendarView .candidate-table-scroll { overscroll-behavior-x:contain; }
#calendarView .ex-compare-tray { position:fixed; left:50%; transform:translateX(-50%); bottom:calc(78px + env(safe-area-inset-bottom)); width:min(680px,calc(100% - 24px)); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; z-index:31; padding:10px; border:1px solid var(--fable-line); border-radius:16px; background:var(--fable-surface); box-shadow:0 4px 20px #0003; }
#calendarView .ex-tray-dates { display:flex; gap:4px; }
#calendarView .ex-tray-dates button { min-height:44px; padding:8px; font-size:13px; border:0; border-radius:10px; color:var(--fable-water); background:var(--fable-water-soft); }
#calendarView [data-open-comparison] { min-height:44px; display:flex; align-items:center; gap:8px; padding:10px 14px; border:0; border-radius:10px; color:var(--fable-on-water); background:var(--fable-water); font-size:14px; font-weight:750; }
#calendarView [data-open-comparison]:disabled { color:var(--fable-muted); background:var(--fable-surface-soft); }
#calendarView.has-compare-tray { padding-bottom:130px; }
#calendarView [hidden],#mapView [hidden] { display:none!important; }
@media(min-width:960px) { #calendarView .ex-compare-tray { bottom:20px; } }
@media(max-width:959px) { #mapView .ex-explore-layout { grid-template-columns:1fr; gap:16px; } #mapView #mapPanel { position:relative; top:auto; border-radius:16px; } #mapView .map-frame { height:clamp(300px,43svh,460px); } #mapView #portListPanel { border-radius:20px 20px 0 0; } }
@media(max-width:600px) { #mapView .ports-header { margin-bottom:12px; } #mapView .ex-explore-toolbar { grid-template-columns:minmax(0,1fr); gap:8px; } #mapView .ex-date-label { justify-content:space-between; } #mapView #exploreDate { width:170px; } #mapView .region-filters button { padding:8px; font-size:12px; } #mapView .ex-presets { gap:4px; } #mapView .ex-presets button { padding:7px 10px; font-size:12px; } #mapView .ex-explore-options { gap:6px; } #calendarView .ex-date-agenda { grid-template-columns:1fr; } #calendarView .ex-date-row { padding:14px; } #calendarView .ex-date-heading { gap:6px; } #calendarView .ex-date-heading>button:first-child { gap:10px; } }
@media(max-width:360px) { #calendarView .ex-date-heading strong { font-size:18px; } #calendarView .ex-date-heading time { font-size:18px; } #calendarView .ex-date-save { min-width:68px; padding:8px; } #calendarView .ex-date-facts { grid-template-columns:1fr 1fr; } #calendarView .ex-date-facts>span:last-child { grid-column:1/-1; display:flex; gap:8px; align-items:baseline; } #calendarView .ex-compare-tray { justify-content:center; } #mapView:not(.is-map-mode) #portList { grid-template-columns:1fr; } }
@media(prefers-reduced-motion:reduce) { #mapView *,#calendarView * { scroll-behavior:auto!important; } }

/* Keep the map and comparison rows in the first screen, not behind repeated controls. */
#mapView.is-map-mode #regionFilters { display:none; }
#mapView .ex-explore-options { align-items:center; }
#mapView .ex-presets { flex:1; min-width:0; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:thin; margin:0; padding-bottom:2px; }
#mapView .ex-presets button { flex:0 0 auto; white-space:nowrap; }
#mapView .explore-mode-switch { flex:0 0 auto; }
#calendarView.is-agenda :is(.candidate-start-hint,#calendarRangeLabel,.calendar-legend) { display:none; }
#calendarView.is-agenda .calendar-header { margin-bottom:8px; }
@media(max-width:600px) { #mapView .ex-explore-toolbar { grid-template-columns:minmax(0,1fr) 140px; gap:8px; } #mapView #exploreDate { width:100%; font-size:13px; } #mapView .ex-date-label { display:block; } #mapView #portSearch { padding:10px; font-size:13px; } #mapView .ex-explore-options { margin-bottom:12px; } }