/* Standalone CoastLens Map Workspace. Nothing outside .coastlens-map-workspace is styled. */
.coastlens-map-workspace { --clmw-ink:#102b28; --clmw-muted:#536d68; --clmw-surface:#f9fbfa; --clmw-line:#c9d6d2; --clmw-sea:#dbeef1; --clmw-teal:#177b83; --clmw-gold:#d19a2a; position:relative; display:grid; grid-template-rows:auto minmax(0,1fr); min-height:360px; height:100%; overflow:hidden; background:var(--clmw-sea); color:var(--clmw-ink); border:1px solid var(--clmw-line); font-family:"IBM Plex Sans",system-ui,sans-serif; }
.clmw-toolbar { position:relative; z-index:4; display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:42px; padding:7px 9px; border-bottom:1px solid var(--clmw-line); background:var(--clmw-surface); }
.clmw-scenes,.clmw-navigation { display:flex; align-items:center; flex-wrap:wrap; gap:4px; }
.clmw-toolbar button { min-height:27px; border:1px solid var(--clmw-line); border-radius:3px; padding:5px 8px; background:#f3f7f5; color:var(--clmw-muted); font:600 10px/1 "IBM Plex Mono",monospace; letter-spacing:.04em; text-transform:uppercase; cursor:pointer; }
.clmw-toolbar button:hover:not(:disabled),.clmw-toolbar button:focus-visible { border-color:var(--clmw-teal); color:var(--clmw-ink); outline:2px solid color-mix(in srgb,var(--clmw-teal) 30%,transparent); outline-offset:1px; }
.clmw-toolbar .clmw-scene.is-active { background:var(--clmw-teal); border-color:var(--clmw-teal); color:white; }
.clmw-toolbar button:disabled { cursor:not-allowed; opacity:.48; }
.clmw-frame { position:relative; min-height:0; overflow:hidden; background:linear-gradient(145deg,#eff5f3,#d5e8eb); }
.clmw-frame.scene-satellite,.clmw-frame.scene-terrain { background:#15201f; }
.clmw-svg { display:block; width:100%; height:100%; min-height:318px; touch-action:none; cursor:grab; outline:none; }
.clmw-svg:active { cursor:grabbing; }
.clmw-raster { opacity:.86; }
.scene-terrain .clmw-raster { opacity:.8; mix-blend-mode:screen; }
.clmw-imagery-footprint { fill:none; stroke:#f6c45d; stroke-width:2; stroke-dasharray:7 5; vector-effect:non-scaling-stroke; pointer-events:none; }
.clmw-coast { fill:none; stroke:#435d58; stroke-width:2.25; vector-effect:non-scaling-stroke; }
.clmw-gap { fill:#9aa7a3; fill-opacity:.30; stroke:#66736f; stroke-width:1.4; stroke-dasharray:5 4; vector-effect:non-scaling-stroke; }
/* These segments are LineStrings, so the stroke IS the band. At 1.1px with a non-scaling
   stroke they read as hairlines at any zoom. 9px makes them chunky enough to see the
   regime colour and to survive a projector. */
.clmw-segment { fill:none; fill-opacity:.73; stroke-width:9; stroke-linecap:round; vector-effect:non-scaling-stroke; cursor:pointer; transition:stroke-width .12s ease, fill-opacity .12s ease; }
.clmw-segment.regime-Swash { stroke:#5f8f86; }.clmw-segment.regime-Collision { stroke:#c89434; }.clmw-segment.regime-Overwash { stroke:#b85a2a; }.clmw-segment.regime-Inundation { stroke:#8c2f39; }.clmw-segment.regime-NO_DATA { stroke:#96a29d; stroke-dasharray:7 5; stroke-width:5; }
.clmw-segment:hover,.clmw-segment:focus { stroke-width:13; outline:none; }
.clmw-selected-halo { fill:none; stroke:#0b747d; stroke-width:7; stroke-opacity:.75; vector-effect:non-scaling-stroke; pointer-events:none; }
.clmw-evidence { fill:#0b747d; stroke:white; stroke-width:2; vector-effect:non-scaling-stroke; }
.clmw-source { fill:#f7f4e9; stroke:#0b747d; stroke-width:2.2; vector-effect:non-scaling-stroke; }
.clmw-north { fill:#102b28; opacity:.9; }.clmw-north-label,.clmw-scale-label { fill:#102b28; font:600 12px "IBM Plex Mono",monospace; paint-order:stroke; stroke:#f9fbfa; stroke-width:3px; }.clmw-scale-line,.clmw-scale-tick { stroke:#102b28; stroke-width:2; vector-effect:non-scaling-stroke; }
.clmw-context { position:absolute; z-index:2; right:12px; bottom:12px; width:min(310px,44%); padding:11px 12px; border:1px solid color-mix(in srgb,var(--clmw-line) 88%,white); border-radius:5px; background:color-mix(in srgb,var(--clmw-surface) 94%,transparent); box-shadow:0 4px 14px rgba(8,32,28,.12); }
.scene-satellite .clmw-context,.scene-terrain .clmw-context { background:rgba(249,251,250,.93); }.clmw-context h3 { margin:3px 0 5px; font-size:15px; line-height:1.13; }.clmw-context p { margin:0; }.clmw-context-kicker { color:var(--clmw-teal); font:600 9px/1 "IBM Plex Mono",monospace; letter-spacing:.1em; }.clmw-context-copy { color:var(--clmw-muted); font-size:11px; line-height:1.4; }.clmw-source-card { margin-top:8px !important; padding-top:8px; border-top:1px solid var(--clmw-line); color:var(--clmw-muted); font-size:10px; line-height:1.35; }.clmw-attribution,.clmw-chart-label { display:block; margin-top:7px; color:var(--clmw-muted); font:500 8px/1.3 "IBM Plex Mono",monospace; }
.clmw-chart { display:block; width:100%; height:auto; margin-top:8px; overflow:visible; }.clmw-chart-axis { stroke:#aabbb6; stroke-width:1; }.clmw-chart-line { fill:none; stroke:#177b83; stroke-width:2.4; vector-effect:non-scaling-stroke; }
.clmw-context-visual { display:block; width:100%; max-height:235px; margin-top:9px; border:1px solid var(--clmw-line); object-fit:contain; background:#eef3f1; }.clmw-visual-caption { display:block; margin-top:5px; color:var(--clmw-muted); font:500 8px/1.35 "IBM Plex Mono",monospace; }
.clmw-metrics { display:grid; gap:0; margin:9px 0 0; border-top:1px solid var(--clmw-line); }.clmw-metrics div { display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:8px; padding:6px 0; border-bottom:1px solid var(--clmw-line); }.clmw-metrics dt { color:var(--clmw-muted); font-size:10px; line-height:1.25; }.clmw-metrics dd { margin:0; color:var(--clmw-ink); font:600 9px/1.25 "IBM Plex Mono",monospace; text-align:right; }.clmw-metrics dd.is-nodata { color:#825027; }.clmw-metrics small { grid-column:1/-1; margin-top:3px; color:var(--clmw-muted); font-size:8.5px; line-height:1.3; }
.clmw-layer-notice { position:absolute; z-index:3; top:12px; left:12px; max-width:300px; margin:0; padding:8px 10px; border-left:4px solid var(--clmw-gold); background:rgba(255,249,237,.96); color:#754a1e; font:600 10px/1.35 "IBM Plex Mono",monospace; }
@media (max-width:720px) { .clmw-toolbar { align-items:flex-start; }.clmw-scenes { max-width:74%; }.clmw-toolbar button { padding:5px 6px; font-size:8px; }.clmw-context { width:calc(100% - 24px); max-width:none; }.clmw-svg { min-height:350px; } }

/* Ground context beneath the vectors. Held back a little so coloured segments and the
   coastline stay the brightest things on the map. */

/* A hillshade is shading, not a photograph. Drawn opaque it lands as a pale slab with a hard
   rectangular edge over the basemap, which is what the terrain scene was doing. Multiply lets
   the relief darken the ground underneath and makes the raster's white no-data effectively
   disappear instead of masking the map. */
.clmw-frame.scene-terrain .clmw-raster {
  mix-blend-mode: multiply;
  opacity: .42;
}
/* The dated Sentinel-2 evidence raster is a photograph and must composite normally. */
.clmw-frame.scene-satellite .clmw-raster { mix-blend-mode: normal; }

/* MapLibre renderer (11 Sept 2026). The GL canvas fills the frame; chrome sits in an overlay. */
.coastlens-map-workspace.is-maplibre { background:#f3f6f7; }
.coastlens-map-workspace.is-maplibre .clmw-frame { background:#f3f6f7; }
.clmw-map { position:absolute; inset:0; outline:none; }
.clmw-map .maplibregl-canvas { outline:none; }
.clmw-overlay { position:absolute; inset:0; pointer-events:none; }
.clmw-overlay > * { pointer-events:auto; }
.clmw-mode-label { color:var(--clmw-muted); font:600 10px/1 "IBM Plex Mono",monospace; letter-spacing:.06em; text-transform:uppercase; padding:0 4px; }
.is-maplibre .maplibregl-ctrl-attrib { background:rgba(255,255,255,.85); font:500 9px/1.3 "IBM Plex Mono",monospace; color:var(--clmw-muted); }
.is-maplibre .maplibregl-ctrl-attrib a { color:inherit; }
.is-maplibre .maplibregl-ctrl-bottom-left { z-index:1; }

/* Scale bar, compass and cursor readout: same border/radius/colour tokens as the scene-bar
   buttons in .clmw-toolbar, so they read as one control language rather than MapLibre defaults. */
.is-maplibre .maplibregl-ctrl-scale { background:#f3f7f5; border:1px solid var(--clmw-line); border-top:none; border-radius:3px; padding:2px 7px; color:var(--clmw-muted); font:600 9px/1.3 "IBM Plex Mono",monospace; }
.is-maplibre .maplibregl-ctrl-top-right .maplibregl-ctrl-group { background:#f3f7f5; border:1px solid var(--clmw-line); border-radius:3px; box-shadow:none; overflow:hidden; }
.is-maplibre .maplibregl-ctrl-top-right .maplibregl-ctrl-group button { width:27px; height:27px; }
.is-maplibre .maplibregl-ctrl-top-right .maplibregl-ctrl-group button:hover { background:color-mix(in srgb, var(--clmw-teal) 14%, #f3f7f5); }
.clmw-coords { background:#f3f7f5; border:1px solid var(--clmw-line); border-radius:3px; margin:0 8px 4px 0; padding:3px 7px; color:var(--clmw-muted); font:600 9.5px/1.3 "IBM Plex Mono",monospace; letter-spacing:.01em; white-space:nowrap; pointer-events:none; }
@media (max-width:759px) { .clmw-coords { display:none; } }