/* Island guides (/oahu-live-cams/, /maui-live-cams/, /big-island-live-cams/). Builds on kauai-now.css (.kn-*), best-live.css
   (.bl-*), watering-hole.css (.wh-table, .wh-faq) and aurora-tonight.css (.at-pill, .at-sub, .p-panel); only the static
   camera map and its pin numbers are here. */
.im-panel{padding:14px 16px;margin:0 0 14px;min-width:0}
.im-panel h2{margin:0 0 10px}
.im-map{max-width:100%;overflow:hidden;border-radius:8px;border:1px solid var(--line)}
.im-svg{display:block;width:100%;height:auto}
.im-svg{shape-rendering:geometricPrecision;text-rendering:geometricPrecision}
.im-sea{fill:color-mix(in srgb,var(--accent) 9%,var(--panel))}
.im-shelf{fill:none;stroke:color-mix(in srgb,var(--accent) 22%,var(--panel));stroke-width:5;stroke-linejoin:round;stroke-linecap:round}
.im-land{stroke:color-mix(in srgb,var(--text) 45%,transparent);stroke-width:.8;stroke-linejoin:round}
.im-g0{stop-color:color-mix(in srgb,var(--text) 30%,var(--panel))}
.im-g1{stop-color:color-mix(in srgb,var(--text) 18%,var(--panel))}
.im-label{fill:var(--muted);font:700 11px/1 system-ui,sans-serif;letter-spacing:.14em;paint-order:stroke;stroke:color-mix(in srgb,var(--accent) 9%,var(--panel));stroke-width:3px;stroke-linejoin:round}
.im-leader{stroke:var(--accent);stroke-width:1.2;opacity:.85}
.im-dot{fill:var(--accent);stroke:var(--bg);stroke-width:1.5}
.im-pin circle{fill:var(--accent);stroke:var(--bg);stroke-width:1.5}
.im-pin text{fill:var(--bg);font:800 21px/1 system-ui,sans-serif}
/* Badges are laid out at phone size (~24px at a 375px screen); on wider maps shrink each one about its own centre so it
   stays ~24-28px on screen. The leader lines still meet the badge centres. */
.im-map{container-type:inline-size}
.im-pin{transform-box:fill-box;transform-origin:center}
@container (min-width:420px){.im-pin{transform:scale(.75)}}
@container (min-width:560px){.im-pin{transform:scale(.6)}}
@container (min-width:720px){.im-pin{transform:scale(.48)}}
.im-pin:hover circle,.im-pin:focus circle{fill:var(--text)}
.im-legend{margin:10px 0 0;padding-left:22px;columns:2 16rem;column-gap:24px}
.im-legend li{margin:0 0 6px;line-height:1.4;break-inside:avoid;overflow-wrap:anywhere}
.im-legend span{display:block;font-size:13px;color:var(--muted)}
.im-no{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 6px;border-radius:12px;background:var(--accent);color:var(--bg);font-size:13px;font-weight:800;vertical-align:2px}