/*
 * Island map (front page + admin fleet view). Pairs with src/island-map and
 * /static/island-map.js. No framework, no external files.
 *
 * Colours: cards, chips and buttons read the site's own tokens (--ab-* on
 * the front page, --rt-* from the island theme) and follow
 * html[data-rental-theme]. The --d-* values below are the same artboard
 * palettes (A Willemstad Day, B Caribbean Night, C Sunset Drive) and are
 * only used where a page does not define the tokens, or when a skin is
 * forced with data-skin on the map itself.
 *
 * The map itself (--im-sea-*, --im-coast, --im-land, --im-beach ...) has its
 * own colours: a deep blue sea, a turquoise coast, a sand island and
 * beach-relax markers. They mirror src/island-map/theme.ts value for value;
 * scripts/verify-island-map-contrast.mjs checks that, and the 4.5:1 contrast
 * of every text pair in the three skins. Change both files together.
 */
.island-map,
.island-map[data-skin="day"] {
  --d-bg: #FFF8EC; --d-card: #FFFDF7; --d-card2: #F4E9D0; --d-text: #003F5C; --d-muted: #5E4B36;
  --d-line: rgba(139, 115, 85, .24); --d-brand: #C8161D; --d-on-brand: #FFF8EC;
  --d-accent: #06D6C4; --d-on-accent: #003F5C; --d-accent-ink: #00686B;
  --d-shadow: 0 8px 24px rgba(0, 63, 92, .08);
  --d-display: 'Fraunces', Georgia, serif; --d-body: 'DM Sans', system-ui, sans-serif;
  --im-sea-1: #0B66A8; --im-sea-2: #063F78; --im-sea-glow: #0C72B0; --im-sea-ink: #FFF8EC;
  --im-coast: #4FDCD0; --im-foam: #FFF8EC; --im-land: #F6E6C2; --im-land-ink: #003F5C;
  --im-beach: #FFF3D6; --im-on-beach: #1B6B47; --im-coral: #FF7A5C; --im-palm: #1B6B47; --im-beach-card: #FFF6E0;
  --im-hotel: #06D6C4; --im-on-hotel: #003F5C;
  --im-coast-glow: .6; --im-glow-size: 62%;
}
html[data-rental-theme="night"] .island-map:not([data-skin]),
.island-map[data-skin="night"] {
  --d-bg: #1A1A2E; --d-card: #16213E; --d-card2: #1F2A4A; --d-text: #FFF8EC; --d-muted: rgba(244, 233, 208, .82);
  --d-line: rgba(244, 233, 208, .14); --d-brand: #FF5E5B; --d-on-brand: #1A1A2E;
  --d-accent: #06D6C4; --d-on-accent: #1A1A2E; --d-accent-ink: #06D6C4;
  --d-shadow: 0 18px 40px rgba(0, 0, 0, .35);
  --d-display: 'Bricolage Grotesque', system-ui, sans-serif; --d-body: 'Inter', system-ui, sans-serif;
  --im-sea-1: #0A2148; --im-sea-2: #050E24; --im-sea-glow: #0E2C5C; --im-sea-ink: #FFF8EC;
  --im-coast: #06D6C4; --im-foam: #06D6C4; --im-land: #24335A; --im-land-ink: #FFF8EC;
  --im-beach: #F3E2B8; --im-on-beach: #17603F; --im-coral: #FF8A73; --im-palm: #86E0AE; --im-beach-card: #1B2947;
  --im-hotel: #06D6C4; --im-on-hotel: #1A1A2E;
  --im-coast-glow: .3; --im-glow-size: 62%;
}
html[data-rental-theme="sunset"] .island-map:not([data-skin]),
.island-map[data-skin="sunset"] {
  --d-bg: #FFF8EC; --d-card: #FFFDF7; --d-card2: #F4E9D0; --d-text: #1A1A2E; --d-muted: #5E4B36;
  --d-line: rgba(26, 26, 46, .16); --d-brand: #C8161D; --d-on-brand: #FFF8EC;
  --d-accent: #FFD23F; --d-on-accent: #1A1A2E; --d-accent-ink: #8A3D0A;
  --d-shadow: 0 8px 24px rgba(26, 26, 46, .12);
  --d-display: 'Baloo 2', 'Fraunces', Georgia, serif; --d-body: 'DM Sans', system-ui, sans-serif;
  --im-sea-1: #1D3F73; --im-sea-2: #142A55; --im-sea-glow: #B4532A; --im-sea-ink: #FFF8EC;
  --im-coast: #FFC98A; --im-foam: #FFF8EC; --im-land: #F8E0B4; --im-land-ink: #1A1A2E;
  --im-beach: #FFF1D0; --im-on-beach: #1B6B47; --im-coral: #FF7A5C; --im-palm: #1B6B47; --im-beach-card: #FFF3DC;
  --im-hotel: #06D6C4; --im-on-hotel: #1A1A2E;
  --im-coast-glow: .8; --im-glow-size: 78%;
}
/* Follow the page tokens when they exist ... */
.island-map {
  --im-bg: var(--ab-bg, var(--rt-bg, var(--d-bg)));
  --im-card: var(--ab-card, var(--rt-surface, var(--d-card)));
  --im-card2: var(--ab-card2, var(--rt-surface2, var(--d-card2)));
  --im-text: var(--ab-text, var(--rt-text, var(--d-text)));
  --im-muted: var(--ab-muted, var(--rt-muted, var(--d-muted)));
  --im-line: var(--ab-line, var(--rt-line, var(--d-line)));
  --im-brand: var(--ab-brand, var(--rt-brand, var(--d-brand)));
  --im-on-brand: var(--ab-on-brand, var(--rt-on-brand, var(--d-on-brand)));
  --im-accent: var(--ab-accent, var(--rt-accent, var(--d-accent)));
  --im-on-accent: var(--ab-on-accent, var(--rt-on-accent, var(--d-on-accent)));
  --im-accent-ink: var(--ab-accent-ink, var(--rt-accent-ink, var(--d-accent-ink)));
  --im-shadow: var(--ab-shadow, var(--rt-shadow, var(--d-shadow)));
  --im-display: var(--ab-display, var(--rt-display, var(--d-display)));
  --im-body: var(--ab-body, var(--rt-body, var(--d-body)));
}
/* ... and ignore them when one skin is forced on the map. */
.island-map[data-skin] {
  --im-bg: var(--d-bg); --im-card: var(--d-card); --im-card2: var(--d-card2); --im-text: var(--d-text);
  --im-muted: var(--d-muted); --im-line: var(--d-line); --im-brand: var(--d-brand); --im-on-brand: var(--d-on-brand);
  --im-accent: var(--d-accent); --im-on-accent: var(--d-on-accent); --im-accent-ink: var(--d-accent-ink);
  --im-shadow: var(--d-shadow); --im-display: var(--d-display); --im-body: var(--d-body);
}

.island-map, .island-map * { box-sizing: border-box; }
.island-map {
  color: var(--im-text);
  font-family: var(--im-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-width: 0;
}
.island-map[data-skin] { background: var(--im-bg); }
.island-map [hidden] { display: none !important; }
.island-map .im-i { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* Heading */
.island-map .im-head { margin: 0 0 16px; max-width: 720px; }
.island-map .im-eyebrow { margin: 0 0 6px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--im-brand); }
.island-map .im-title { margin: 0; font-family: var(--im-display); font-size: clamp(26px, 3.2vw, 38px); line-height: 1.1; letter-spacing: -.01em; color: var(--im-text); }
.island-map .im-lead { margin: 8px 0 0; font-size: 16px; color: var(--im-muted); }
.island-map .im-demo { margin: 10px 0 0; padding: 10px 14px; border-radius: 12px; border: 2px dashed var(--im-brand); background: var(--im-card); color: var(--im-text); font-size: 14px; }
.island-map .im-demo strong { color: var(--im-brand); letter-spacing: .04em; }

/* Filter buttons (shown by the script) */
.island-map .im-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.island-map .im-filter { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--im-line); background: var(--im-card); color: var(--im-text); font: 700 14px/1 var(--im-body); cursor: pointer; }
.island-map .im-filter[aria-pressed="true"] { background: var(--im-text); color: var(--im-bg); border-color: var(--im-text); }

/* Layout */
.island-map .im-body { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(280px, 1fr); gap: 20px 24px; align-items: start; }
.island-map .im-map, .island-map .im-side { min-width: 0; }
@media (max-width: 900px) { .island-map .im-body { grid-template-columns: minmax(0, 1fr); } }

/* The map */
.island-map .im-stage {
  position: relative; overflow: hidden; container-type: inline-size;
  aspect-ratio: 1080 / 880; border-radius: 24px; border: 1px solid var(--im-line);
  background-color: var(--im-sea-2);
  background-image: radial-gradient(ellipse 90% var(--im-glow-size) at 88% 0%, var(--im-sea-glow) 0%, transparent 100%), linear-gradient(165deg, var(--im-sea-1) 0%, var(--im-sea-2) 100%);
  box-shadow: var(--im-shadow);
}
.island-map .im-canvas { position: absolute; inset: 0; }
.island-map .im-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.island-map .im-sea { fill: none; }
.island-map .im-swell path { fill: none; stroke: var(--im-sea-ink); stroke-opacity: .22; stroke-width: 3; stroke-linecap: round; }
/* Turquoise shallows: a soft band on the island outline, then a thin foam line on the sand */
.island-map .im-shallows { fill: none; stroke: var(--im-coast); stroke-opacity: var(--im-coast-glow); stroke-width: 26; stroke-linejoin: round; }
.island-map .im-land { fill: var(--im-land); stroke: var(--im-foam); stroke-width: 3; stroke-linejoin: round; }
.island-map .im-sea-name { font: italic 600 30px var(--im-display); fill: var(--im-sea-ink); letter-spacing: .04em; text-anchor: middle; }
.island-map .im-area { font: 700 15px var(--im-body); fill: var(--im-land-ink); letter-spacing: .1em; text-transform: uppercase; text-anchor: middle; }
.island-map .im-compass path { fill: var(--im-sea-ink); fill-opacity: .85; }
.island-map .im-compass text, .island-map .im-scale text { font: 700 20px var(--im-body); fill: var(--im-sea-ink); text-anchor: middle; }
.island-map .im-scale path { fill: none; stroke: var(--im-sea-ink); stroke-opacity: .9; stroke-width: 3; }
.island-map .im-route { fill: none; stroke: var(--im-land-ink); stroke-opacity: .4; stroke-width: 3; stroke-dasharray: 2 9; stroke-linecap: round; }
.island-map .im-route-town { display: none; }
.island-map .im-route.is-active { display: inline; stroke: var(--im-brand); stroke-opacity: 1; stroke-width: 5; stroke-dasharray: none; }
.island-map .im-route-town.is-active { stroke: var(--im-land-ink); stroke-opacity: .8; stroke-width: 3; stroke-dasharray: 2 9; }
/* Tour legs, and the tour hides the chosen place's own routes while it runs */
.island-map .im-leg { display: none; fill: none; stroke: var(--im-brand); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.island-map .im-leg.is-active { display: inline; }
.island-map.im-touring .im-route.is-active { stroke: var(--im-land-ink); stroke-opacity: .4; stroke-width: 3; stroke-dasharray: 2 9; }
.island-map.im-touring .im-route-town.is-active { display: none; }
.island-map .im-leader { fill: none; stroke: var(--im-sea-ink); stroke-opacity: .7; stroke-width: 1.6; }
.island-map .im-leader.is-active { stroke-opacity: 1; stroke-width: 2.6; }
.island-map .im-dot { fill: var(--im-foam); stroke: var(--im-land-ink); stroke-width: 3; }
.island-map .im-dot[data-type="beach"] { fill: var(--im-beach); stroke: var(--im-coral); }
.island-map .im-dot.is-active { fill: var(--im-brand); stroke: var(--im-sea-ink); r: 10px; }
.island-map .im-landmark { fill: var(--im-land-ink); fill-opacity: .7; }
/* Fleet landmarks sit on the coast: light text with a sea-coloured edge reads on water and on sand */
.island-map .im-landmark-name { font: 700 19px var(--im-body); fill: var(--im-sea-ink); paint-order: stroke; stroke: var(--im-sea-2); stroke-width: 5; stroke-linejoin: round; }
@media (prefers-reduced-motion: no-preference) {
  /* The line draws itself from the start to the place (the script measures the length) */
  .island-map .im-draw { stroke-dasharray: var(--im-len) !important; animation: im-draw .9s ease-out both; }
  .island-map.im-js .im-card.is-active { animation: im-fly .28s ease-out both; }
  .island-map .im-pin .im-badge { transition: transform .16s ease; }
  .island-map .im-pin:hover .im-badge { transform: scale(1.08); }
  @keyframes im-draw { from { stroke-dashoffset: var(--im-len); } to { stroke-dashoffset: 0; } }
  @keyframes im-fly { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}

/* Round type badge (pins, cards, legend) */
.island-map .im-badge { display: inline-grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%; background: var(--im-text); color: var(--im-bg); box-shadow: 0 0 0 2px var(--im-sea-ink); }
.island-map [data-type="airport"] .im-badge, .island-map [data-type="town"] .im-badge { background: var(--im-brand); color: var(--im-on-brand); }
/* Beaches: a sand marker with palm-green ink and a coral ring */
.island-map [data-type="beach"] .im-badge { background: var(--im-beach); color: var(--im-on-beach); box-shadow: 0 0 0 2px var(--im-coral); }
.island-map [data-type="hotel"] .im-badge { background: var(--im-hotel); color: var(--im-on-hotel); }
.island-map [data-type="car"] .im-badge, .island-map [data-status="parked"] .im-badge { background: var(--im-text); color: var(--im-bg); }
.island-map [data-status="moving"] .im-badge { background: var(--im-accent); color: var(--im-on-accent); }
.island-map [data-status="offline"] .im-badge { background: var(--im-card2); color: var(--im-text); box-shadow: 0 0 0 2px var(--im-muted); }

/* Tappable labels: a 44 x 44 px target centred on its spot, name beside it on wide maps */
.island-map .im-pin { position: absolute; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 22px; color: var(--im-text); text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.island-map .im-pin-text { display: none; position: absolute; top: 50%; left: calc(100% - 3px); transform: translateY(-50%); flex-direction: column; gap: 1px; padding: 5px 10px; border-radius: 12px; border: 1px solid var(--im-line); background: var(--im-card); color: var(--im-text); white-space: nowrap; line-height: 1.15; box-shadow: var(--im-shadow); pointer-events: auto; }
.island-map .im-pin[data-side="left"] .im-pin-text { left: auto; right: calc(100% - 3px); text-align: right; }
.island-map .im-pin-text b { font-size: 13px; font-weight: 700; }
.island-map .im-pin-text i { font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--im-muted); }
@container (min-width: 620px) { .island-map .im-pin-text { display: flex; } }
.island-map .im-pin:focus-visible, .island-map .im-index-item:focus-visible, .island-map .im-filter:focus-visible, .island-map .im-cta:focus-visible, .island-map .im-close:focus-visible, .island-map .im-attr a:focus-visible { outline: 3px solid var(--im-accent); outline-offset: 2px; }
.island-map .im-pin:focus-visible { outline-color: var(--im-sea-ink); }
.island-map .im-pin[aria-pressed="true"] { z-index: 2; }
.island-map .im-pin[aria-pressed="true"] .im-badge { box-shadow: 0 0 0 3px var(--im-sea-2), 0 0 0 6px var(--im-sea-ink); }
.island-map .im-pin[aria-pressed="true"] .im-pin-text { background: var(--im-text); color: var(--im-bg); border-color: var(--im-text); }
.island-map .im-pin[aria-pressed="true"] .im-pin-text i { color: inherit; opacity: .85; }
.island-map .im-car .im-badge { width: 36px; height: 36px; }
.island-map[data-filter="pickup"] .im-pin[data-type="beach"],
.island-map[data-filter="pickup"] .im-index-item[data-type="beach"],
.island-map[data-filter="beach"] .im-pin:not([data-type="beach"]):not([data-im-pin="mambo-beach"]):not([data-im-pin="jan-thiel"]),
.island-map[data-filter="beach"] .im-index-item:not([data-type="beach"]):not([data-im-pin="mambo-beach"]):not([data-im-pin="jan-thiel"]) { display: none; }
.island-map[data-filter="pickup"] .im-leader:is([data-im-leader="grote-knip"], [data-im-leader="kleine-knip"], [data-im-leader="playa-lagun"], [data-im-leader="cas-abao"], [data-im-leader="porto-mari"]),
.island-map[data-filter="pickup"] .im-dot[data-type="beach"],
.island-map[data-filter="pickup"] .im-route:is([data-im-route="grote-knip"], [data-im-route="kleine-knip"], [data-im-route="playa-lagun"], [data-im-route="cas-abao"], [data-im-route="porto-mari"]),
.island-map[data-filter="beach"] .im-leader:is([data-im-leader="airport"], [data-im-leader="willemstad"], [data-im-leader="pietermaai"]),
.island-map[data-filter="beach"] .im-dot:is([data-im-dot="airport"], [data-im-dot="willemstad"], [data-im-dot="pietermaai"]),
.island-map[data-filter="beach"] .im-route:is([data-im-route="willemstad"], [data-im-route="pietermaai"]) { display: none; }

/* Fleet view: cars sit on their real spot, so only the chosen or pointed-at car shows its name */
.island-map[data-mode="fleet"] .im-car:not([aria-pressed="true"]):not(:hover):not(:focus-visible) .im-pin-text { display: none; }

/* Drive the island: tour bar, language picker, captions */
.island-map .im-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.island-map .im-tour { margin: 14px 0 0; padding: 14px; border-radius: 20px; border: 1px solid var(--im-line); background: var(--im-card); box-shadow: var(--im-shadow); }
.island-map .im-tour-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.island-map .im-tour-title { margin: 0; font-size: 13px; color: var(--im-muted); line-height: 1.35; }
.island-map .im-tour-title b { display: block; font: 700 20px/1.15 var(--im-display); color: var(--im-text); }
.island-map .im-tour-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.island-map .im-tour-btn, .island-map .im-listen { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--im-line); background: var(--im-bg); color: var(--im-text); font: 700 14px/1 var(--im-body); cursor: pointer; }
.island-map .im-tour-btn > span { display: inline-flex; align-items: center; }
.island-map .im-tour-play { background: var(--im-brand); color: var(--im-on-brand); border-color: var(--im-brand); }
.island-map .im-tour-play .im-i { fill: currentColor; }
.island-map .im-tour-btn[data-im-tour-voice][aria-pressed="true"], .island-map .im-listen[aria-pressed="true"] { background: var(--im-text); color: var(--im-bg); border-color: var(--im-text); }
.island-map .im-lang { display: inline-flex; padding: 2px; gap: 2px; border-radius: 12px; border: 1px solid var(--im-line); background: var(--im-bg); }
.island-map .im-lang-btn { min-width: 44px; min-height: 44px; padding: 0 8px; border: 0; border-radius: 10px; background: transparent; color: var(--im-text); font: 700 13px/1 var(--im-body); cursor: pointer; }
.island-map .im-lang-btn[aria-pressed="true"] { background: var(--im-accent); color: var(--im-on-accent); }
.island-map .im-tour-stops { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; }
.island-map .im-tour-stop { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 6px; border-radius: 999px; border: 1px solid var(--im-line); background: var(--im-bg); color: var(--im-text); font: 600 13.5px/1.1 var(--im-body); cursor: pointer; }
.island-map .im-tour-stop > span[aria-hidden] { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--im-card2); color: var(--im-text); font-weight: 700; }
.island-map .im-tour-stop i { font-style: normal; font-weight: 600; font-size: 12px; color: var(--im-muted); }
.island-map .im-tour-stop.is-done > span[aria-hidden] { background: var(--im-text); color: var(--im-bg); }
.island-map .im-tour-stop[aria-current="step"] { border-color: var(--im-brand); box-shadow: inset 0 0 0 1px var(--im-brand); }
.island-map .im-tour-stop[aria-current="step"] > span[aria-hidden] { background: var(--im-brand); color: var(--im-on-brand); }
.island-map .im-caption { margin: 12px 0 0; padding: 12px 14px; border-radius: 14px; border-left: 4px solid var(--im-accent); background: var(--im-card2); color: var(--im-text); font-size: 15px; line-height: 1.45; }
.island-map .im-voice-status { margin: 8px 0 0; font-size: 12.5px; font-weight: 600; color: var(--im-muted); }
.island-map .im-talk { margin-top: 14px; }
.island-map .im-tour-btn:focus-visible, .island-map .im-tour-stop:focus-visible, .island-map .im-lang-btn:focus-visible, .island-map .im-listen:focus-visible { outline: 3px solid var(--im-accent); outline-offset: 2px; }

/* Under the map */
.island-map .im-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 12px 0 0; font-size: 13px; font-weight: 600; color: var(--im-muted); }
.island-map .im-legend > span { display: inline-flex; align-items: center; gap: 8px; }
.island-map .im-legend .im-badge { width: 24px; height: 24px; box-shadow: none; }
.island-map .im-legend [data-type="beach"] .im-badge { box-shadow: 0 0 0 1.5px var(--im-coral); }
.island-map .im-legend .im-i { width: 14px; height: 14px; }
.island-map .im-legend-route svg { width: 34px; height: 8px; }
.island-map .im-legend-route path { fill: none; stroke: var(--im-text); stroke-width: 3; stroke-dasharray: 2 7; stroke-linecap: round; }
.island-map .im-note { margin: 10px 0 0; font-size: 13px; color: var(--im-muted); }
.island-map .im-note strong { color: var(--im-text); }
.island-map .im-attr { margin: 6px 0 0; font-size: 12px; color: var(--im-muted); }
.island-map .im-attr a { color: inherit; text-decoration: underline; }

/* Cards. Without the script this is a plain list of every place. */
.island-map .im-panel-title { margin: 0 0 10px; font: 700 13px/1.2 var(--im-body); letter-spacing: .08em; text-transform: uppercase; color: var(--im-muted); }
.island-map .im-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.island-map:not(.im-js) .im-list { max-height: 640px; overflow: auto; padding: 2px; }
.island-map .im-card { padding: 18px; border-radius: 20px; border: 1px solid var(--im-line); background: var(--im-card); color: var(--im-text); box-shadow: var(--im-shadow); scroll-margin: 90px 0; }
.island-map .im-card:target { outline: 3px solid var(--im-accent); outline-offset: 2px; }
.island-map .im-card:focus { outline: none; }
.island-map .im-kind { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 10px; font-size: 13px; font-weight: 700; color: var(--im-muted); }
.island-map .im-card .im-badge { box-shadow: none; }
/* Beach cards: sand paper, a coral top edge, palm-green label */
.island-map .im-card[data-type="beach"] { background: var(--im-beach-card); border-top: 4px solid var(--im-coral); }
.island-map .im-card[data-type="beach"] .im-kind { color: var(--im-palm); }
.island-map .im-card[data-type="beach"] .im-badge { box-shadow: 0 0 0 2px var(--im-coral); }
.island-map .im-card[data-type="beach"] .im-caption { border-left-color: var(--im-coral); }
.island-map .im-index-item[data-type="beach"] { background: var(--im-beach-card); border-bottom: 2px solid var(--im-coral); }
.island-map .im-index-item[data-type="beach"] .im-badge { box-shadow: 0 0 0 1.5px var(--im-coral); }
.island-map .im-name { margin: 0; font-family: var(--im-display); font-size: 24px; line-height: 1.15; color: var(--im-text); }
.island-map .im-blurb { margin: 6px 0 0; font-size: 15px; color: var(--im-muted); }
.island-map .im-facts { display: grid; gap: 0; margin: 14px 0 0; border-top: 1px solid var(--im-line); }
.island-map .im-facts > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--im-line); font-size: 14px; }
.island-map .im-facts dt { color: var(--im-muted); }
.island-map .im-facts dd { margin: 0; text-align: right; }
.island-map .im-est, .island-map .im-demo-tag { display: inline-block; margin-left: 4px; padding: 2px 8px; border-radius: 999px; background: var(--im-card2); color: var(--im-text); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; vertical-align: 1px; }
.island-map .im-demo-tag { border: 1px dashed var(--im-brand); }
/* Book button: brand red. The colour is !important because pages set "a { color: inherit }" with an id selector. */
.island-map .im-cta { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; margin-top: 16px; padding: 0 20px; border-radius: 12px; background: var(--im-brand); color: var(--im-on-brand) !important; font: 700 16px/1 var(--im-body); text-decoration: none; }
.island-map .im-empty { padding: 18px; border-radius: 20px; border: 1px dashed var(--im-line); color: var(--im-muted); }
.island-map .im-close { position: absolute; top: 10px; right: 10px; display: none; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--im-card2); color: var(--im-text); cursor: pointer; }

/* Quick list of every place (shown by the script) */
.island-map .im-index { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 14px; }
.island-map .im-index-item { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 10px; min-height: 48px; padding: 6px 10px; border-radius: 14px; border: 1px solid var(--im-line); background: var(--im-card); color: var(--im-text); text-decoration: none; line-height: 1.2; }
.island-map .im-index-item .im-badge { grid-row: span 2; width: 30px; height: 30px; box-shadow: none; }
.island-map .im-index-item .im-i { width: 16px; height: 16px; }
.island-map .im-index-item b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.island-map .im-index-item i { font-style: normal; font-size: 12px; color: var(--im-muted); }
.island-map .im-index-item[aria-pressed="true"] { border-color: var(--im-text); box-shadow: inset 0 0 0 1px var(--im-text); }

/* With the script: one card at a time */
.island-map.im-js .im-panel-title { display: none; }
.island-map.im-js .im-card { display: none; }
.island-map.im-js .im-card.is-active { display: block; }

/* Sourced facts of a beach (cards and the beach list) */
.island-map .im-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; padding: 0; }
.island-map .im-tag { padding: 3px 10px; border-radius: 999px; background: var(--im-card2); color: var(--im-text); font-size: 12px; font-weight: 700; }

/* Beach finder: search, filters, list. Without the script: the full list with every fact. */
/* Wide screens: the beach day sits under the map, the finder and the card beside them */
.island-map .im-body { grid-template-rows: auto 1fr; }
.island-map .im-day { grid-column: 1; grid-row: 2; }
.island-map .im-side { grid-column: 2; grid-row: 1 / span 2; }
.island-map .im-finder + .im-panel { margin-top: 14px; }
@media (max-width: 900px) { .island-map .im-day, .island-map .im-side { grid-column: auto; grid-row: auto; } }
.island-map .im-finder, .island-map .im-day { padding: 16px; border-radius: 20px; border: 1px solid var(--im-line); background: var(--im-card); color: var(--im-text); box-shadow: var(--im-shadow); }
.island-map .im-finder-title, .island-map .im-day-title { margin: 0; font: 700 20px/1.15 var(--im-display); color: var(--im-text); }
.island-map .im-finder-title span { font: 600 13px/1 var(--im-body); color: var(--im-muted); }
.island-map .im-finder-tools { display: grid; gap: 8px; margin-top: 12px; }
.island-map .im-search input { width: 100%; min-height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--im-line); background: var(--im-bg); color: var(--im-text); font: 600 16px/1.2 var(--im-body); }
.island-map .im-search input::placeholder { color: var(--im-muted); opacity: 1; }
.island-map .im-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.island-map .im-chip { padding: 0 12px; font-size: 13px; }
.island-map .im-finder-note { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; margin: 0; font-size: 12.5px; color: var(--im-muted); }
.island-map .im-reset { min-height: 44px; padding: 0 6px; border: 0; background: none; color: var(--im-text); font: 700 13px/1 var(--im-body); text-decoration: underline; cursor: pointer; }
.island-map .im-beach-list { list-style: none; display: grid; gap: 8px; margin: 12px 0 0; padding: 0; }
.island-map:not(.im-js) .im-beach-list { max-height: 640px; overflow: auto; }
.island-map .im-beach { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; align-items: center; padding: 8px 10px 8px 12px; border-radius: 14px; border: 1px solid var(--im-line); border-left: 4px solid var(--im-coral); background: var(--im-beach-card); color: var(--im-text); }
.island-map .im-beach.is-active { border-color: var(--im-text); }
.island-map .im-beach-main { display: grid; gap: 2px; align-content: center; min-height: 44px; color: var(--im-text); text-decoration: none; line-height: 1.25; }
.island-map .im-beach-main b { font-size: 15px; }
.island-map .im-beach-alt, .island-map .im-beach-meta { font-size: 12.5px; color: var(--im-muted); }
.island-map .im-beach .im-tags, .island-map .im-beach-blurb, .island-map .im-beach-book, .island-map .im-beach .im-day-no { grid-column: 1 / -1; margin: 0; }
.island-map .im-beach-blurb { font-size: 13.5px; color: var(--im-muted); }
.island-map .im-beach-book { display: inline-flex; align-items: center; min-height: 44px; color: var(--im-text); font-size: 14px; font-weight: 700; }
.island-map .im-beach .im-day-add { grid-column: 2; grid-row: 1; }
.island-map.im-js .im-beach-blurb, .island-map.im-js .im-beach-book, .island-map.im-js .im-index-item[data-type="beach"] { display: none; }
@media (min-width: 901px) { .island-map.im-js .im-beach-list { max-height: 290px; overflow: auto; padding-right: 4px; } }

/* Build my beach day */
.island-map .im-day-add, .island-map .im-day-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--im-line); background: var(--im-bg); color: var(--im-text); font: 700 13.5px/1 var(--im-body); white-space: nowrap; cursor: pointer; }
.island-map .im-day-add[aria-pressed="true"] { background: var(--im-text); color: var(--im-bg); border-color: var(--im-text); }
.island-map .im-day-add[aria-disabled="true"] { border-style: dashed; }
.island-map .im-day-btn:disabled { visibility: hidden; }
.island-map .im-card .im-day-add { width: 100%; margin-top: 10px; }
.island-map .im-day-no { margin: 12px 0 0; font-size: 13px; font-weight: 600; color: var(--im-muted); }
.island-map .im-day:focus { outline: none; }
.island-map .im-day-hint { margin: 6px 0 0; font-size: 14px; color: var(--im-muted); }
.island-map .im-day-list { list-style: none; display: grid; gap: 6px; margin: 10px 0 0; padding: 0; }
.island-map .im-day-list:empty { display: none; }
.island-map .im-day-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 6px 6px 10px; border-radius: 14px; background: var(--im-card2); color: var(--im-text); }
.island-map .im-day-n, .island-map .im-day-stop { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--im-brand); color: var(--im-on-brand); font: 700 13px/1 var(--im-body); }
.island-map .im-day-name { display: grid; gap: 1px; min-width: 0; line-height: 1.25; }
.island-map .im-day-name b { font-size: 14.5px; }
.island-map .im-day-name i { font-style: normal; font-size: 12.5px; }
.island-map .im-day-ctl { display: flex; gap: 4px; }
.island-map .im-day-ctl .im-day-btn { padding: 0; font-size: 16px; }
.island-map .im-day-total { margin: 12px 0 0; font-size: 15px; }
.island-map .im-day-total i { display: block; font-style: normal; font-size: 12.5px; color: var(--im-muted); }
.island-map .im-day .im-cta { margin-top: 12px; }
.island-map .im-day-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.island-map .im-day-privacy { margin: 10px 0 0; font-size: 12px; color: var(--im-muted); }
/* The route of the day on the map, with the stop numbers; the single route steps back while it shows */
.island-map .im-day-route { fill: none; stroke: var(--im-brand); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.island-map .im-day-stop { position: absolute; z-index: 3; margin: -30px 0 0 6px; box-shadow: 0 0 0 2px var(--im-sea-ink); pointer-events: none; }
.island-map.im-day-on .im-route.is-active { stroke: var(--im-land-ink); stroke-opacity: .4; stroke-width: 3; stroke-dasharray: 2 9; }
.island-map.im-day-on .im-route-town.is-active, .island-map.im-touring .im-day-route, .island-map.im-touring .im-day-stop { display: none; }

/* Phone map: one 44 px button per beach dot, a numbered one where dots lie together */
.island-map .im-off { display: none !important; }
.island-map .im-cluster { position: absolute; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; margin: -22px 0 0 -22px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.island-map .im-cluster-n { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--im-beach); color: var(--im-on-beach); box-shadow: 0 0 0 2px var(--im-coral); font: 700 15px/1 var(--im-body); }
.island-map .im-cluster-dot { width: 16px; height: 16px; border-radius: 50%; background: var(--im-beach); box-shadow: 0 0 0 3px var(--im-coral); }
.island-map.im-clustered .im-beach-pin { pointer-events: none; }
.island-map .im-zoom-out { position: absolute; z-index: 3; top: 10px; left: 10px; min-height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--im-line); background: var(--im-card); color: var(--im-text); font: 700 14px/1 var(--im-body); box-shadow: var(--im-shadow); cursor: pointer; }
.island-map .im-chooser { position: absolute; z-index: 4; left: 8px; right: 8px; bottom: 8px; display: grid; gap: 6px; max-height: calc(100% - 16px); overflow: auto; padding: 10px; border-radius: 16px; border: 1px solid var(--im-line); background: var(--im-card); color: var(--im-text); box-shadow: var(--im-shadow); }
.island-map .im-chooser-title { margin: 0; padding: 0 52px 0 4px; font: 700 14px/44px var(--im-body); }
.island-map .im-chooser-close { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--im-card2); color: var(--im-text); font-size: 16px; cursor: pointer; }
.island-map .im-chooser-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--im-line); background: var(--im-bg); color: var(--im-text); font: 600 14px/1.2 var(--im-body); text-align: left; cursor: pointer; }
.island-map .im-chooser-item i { font-style: normal; font-size: 12.5px; color: var(--im-muted); }
.island-map .im-search input:focus-visible, .island-map .im-beach-main:focus-visible, .island-map .im-beach-book:focus-visible, .island-map .im-reset:focus-visible, .island-map .im-day-add:focus-visible, .island-map .im-day-btn:focus-visible, .island-map .im-zoom-out:focus-visible, .island-map .im-chooser-item:focus-visible, .island-map .im-chooser-close:focus-visible, .island-map .im-beach-pin:focus-visible { outline: 3px solid var(--im-accent); outline-offset: 2px; }
.island-map .im-cluster:focus-visible { outline: 3px solid var(--im-sea-ink); outline-offset: -3px; }

/* Small phones: the beach list comes first; the Map button swaps it for the map */
.island-map .im-viewtoggle { display: none; gap: 8px; margin: 0 0 14px; }
.island-map .im-viewtoggle .im-filter { flex: 1 1 0; }
@media (max-width: 520px) {
  .island-map.im-js .im-viewtoggle { display: flex; }
  .island-map.im-js:not([data-im-view="map"]) .im-map, .island-map.im-js:not([data-im-view="map"]) .im-filters { display: none; }
  .island-map.im-js[data-im-view="map"] .im-finder { display: none; }
}

/* Phones: the map loses its empty left margin and the card becomes a bottom sheet */
@media (max-width: 760px) {
  .island-map .im-stage { aspect-ratio: 1000 / 880; border-radius: 20px; }
  .island-map .im-canvas { left: -8%; width: 108%; }
  .island-map .im-lead { font-size: 15px; }
  .island-map .im-index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .island-map.im-js .im-panel { position: fixed; z-index: 70; left: 0; right: 0; bottom: 0; max-height: 78vh; overflow: auto; padding: 14px 16px calc(16px + env(safe-area-inset-bottom, 0px)); border-radius: 22px 22px 0 0; border-top: 1px solid var(--im-line); background: var(--im-bg); box-shadow: 0 -12px 40px rgba(0, 0, 0, .28); visibility: hidden; transform: translateY(104%); }
  .island-map.im-js .im-panel::before { content: ""; display: block; width: 44px; height: 5px; margin: 0 auto 12px; border-radius: 3px; background: var(--im-line); }
  .island-map.im-js.im-open .im-panel { visibility: visible; transform: none; }
  .island-map.im-js .im-card { border: 0; box-shadow: none; background: transparent; padding: 0 2px; }
  .island-map.im-js .im-card .im-kind { padding-right: 52px; }
  .island-map.im-js .im-close { display: grid; z-index: 2; } /* above the card text, so the whole button can be tapped */
}
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  .island-map.im-js .im-panel { transition: transform .22s ease, visibility .22s; }
}
@media (prefers-reduced-motion: reduce) {
  .island-map *, .island-map *::before { animation: none !important; transition: none !important; }
}
@media (forced-colors: active) {
  .island-map .im-badge { border: 1px solid CanvasText; }
  .island-map .im-stage { background-image: none; }
  .island-map .im-land { fill: Canvas; stroke: CanvasText; }
}