/* ==========================================================================
   YRproject - The North Sea, live (map.css)
   Used by /north-sea and by the homepage embed (static/js/map/embed.js).
   Tokens from site.css; accent = "running now" and the selected object only.
   ========================================================================== */

.nsm { --wind: var(--k-wind, #38E1D6); --plat: var(--k-oilgas, #FFB547); --pipe: #A9782F; --cable: var(--k-grid, #5B9DFF); --glass: rgba(6, 19, 28, .93); }
.np { color: var(--fg-muted); font-weight: 400; font-style: normal; }
.np::before { content: "\2014\00a0"; }

/* ---------- stage ---------------------------------------------------------- */
.nsm__stage { position: relative; }
.nsm.is-js .nsm__stage { height: calc(100vh - 4.3rem); height: calc(100svh - 4.3rem); min-height: 30rem; max-height: 75rem; overflow: hidden; }
.nsm__map { position: relative; }
.nsm.is-js .nsm__map { position: absolute; inset: 0; background: var(--sea); }
.nsm.is-js:not(.is-ready):not(.is-nomap) .nsm__map::after { content: "Loading the North Sea\2026"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: var(--sea-muted); font-size: var(--fs-small); letter-spacing: .04em; }
.nsm__map .maplibregl-canvas { transition: opacity var(--t) var(--ease); outline-offset: -3px; }
.nsm__map .maplibregl-canvas:focus-visible { outline: 3px solid var(--accent); }
.nsm__map.is-focus .maplibregl-canvas { opacity: .38; }

/* no JS / no WebGL: the shell becomes a plain dark header above the list */
.nsm:not(.is-js) .nsm__stage, .nsm.is-nomap .nsm__stage { height: auto; min-height: 0; max-height: none; padding: var(--s8) var(--gutter); display: flex; flex-direction: column; gap: var(--s6); max-width: var(--maxw); margin-inline: auto; }
.nsm:not(.is-js) .nsm__map, .nsm.is-nomap .nsm__map { position: static; order: 2; background: none; }
.nsm:not(.is-js) .nsm__ctl, .nsm.is-nomap .nsm__ctl { position: static; width: auto; max-height: none; border: 0; background: none; padding: 0; order: 1; overflow: visible; }
.nsm:not(.is-js) .nsm__h1, .nsm.is-nomap .nsm__h1 { font-size: var(--fs-h1); line-height: 1; letter-spacing: -.04em; }
.nsm:not(.is-js) .nsm__search, .nsm:not(.is-js) .nsm__more, .nsm.is-nomap .nsm__search, .nsm.is-nomap .nsm__more,
.nsm:not(.is-js) .nsm__attr, .nsm.is-nomap .nsm__attr, .nsm.is-nomap .maplibregl-map > * { display: none; }
.nsm__fallback { max-width: 34rem; display: grid; gap: var(--s4); justify-items: start; }
.nsm__fallback p { margin: 0; }
.nsm__fallback .small { color: var(--fg-muted); }

/* ---------- control column ------------------------------------------------- */
.nsm__ctl { position: absolute; z-index: 5; top: .625rem; left: .625rem; right: .625rem; display: grid; gap: var(--s3); padding: var(--s3); background: var(--glass); border: 1px solid var(--sea-rule); max-height: calc(100% - 1.25rem); overflow: auto; overscroll-behavior: contain; }
.nsm__title { display: flex; align-items: baseline; gap: var(--s3); justify-content: space-between; }
.nsm__title .eyebrow { margin: 0; order: 2; }
.nsm__h1 { font-size: 1.1875rem; line-height: 1.15; letter-spacing: -.02em; margin: 0; font-weight: 500; }
.nsm__search { position: relative; }
.nsm__search input { width: 100%; min-height: 2.75rem; background: var(--sea-2); color: var(--sea-text); border: 1px solid var(--sea-rule); padding: .55em .8em; font: inherit; font-size: 1rem; border-radius: 0; }
.nsm__search input::placeholder { color: var(--sea-muted); opacity: 1; }
.nsm__search input:disabled { opacity: .6; }
.nsm__results { list-style: none; margin: 0; padding: 0; border: 1px solid var(--sea-rule); border-top: 0; background: var(--sea); max-height: 19rem; overflow: auto; }
.nsm__results li { padding: .6em .8em; cursor: pointer; display: grid; gap: .1em; border-top: 1px solid var(--sea-rule); font-size: var(--fs-small); min-height: 2.75rem; align-content: center; }
.nsm__results li:first-child { border-top: 0; }
.nsm__results li small, .nsm__alsobtn small { color: var(--sea-muted); font-size: var(--fs-micro); }
.nsm__results li[aria-selected="true"], .nsm__results li[role=option]:not([aria-disabled]):hover { background: var(--sea-2); box-shadow: inset 3px 0 0 var(--accent); }
.nsm__none { color: var(--sea-muted); cursor: default; }

.nsm__more > summary { cursor: pointer; font-size: var(--fs-small); font-weight: 500; min-height: 2.75rem; display: flex; align-items: center; justify-content: space-between; gap: var(--s3); list-style: none; padding: 0 .1rem; border-top: 1px solid var(--sea-rule); }
.nsm__more > summary::-webkit-details-marker { display: none; }
.nsm__more > summary::after { content: "+"; font-size: 1.25rem; line-height: 1; color: var(--sea-muted); }
.nsm__more[open] > summary::after { content: "\2212"; }
.nsm__morein { display: grid; gap: var(--s4); padding-top: var(--s2); }
.nsm__fs { border: 0; margin: 0; padding: 0; min-width: 0; }
.nsm__fs legend, .nsm__k { font-size: var(--fs-micro); letter-spacing: .08em; text-transform: uppercase; color: var(--sea-muted); padding: 0; margin: 0 0 var(--s2); }
.nsm__list { list-style: none; margin: 0; padding: 0; display: grid; }
.nsm__list .check { width: 100%; min-height: 2.5rem; align-items: center; padding-block: .25em; }
.nsm__list .check > span { display: flex; flex-wrap: wrap; align-items: center; column-gap: .55em; }
.nsm__list small { color: var(--sea-muted); font-size: var(--fs-micro); flex-basis: 100%; }
.nsm__layer small { padding-left: 1.55rem; }
.nsm__disc { display: grid; gap: var(--s2); }
.nsm__disc label { font-size: var(--fs-small); font-weight: 500; display: block; margin-bottom: var(--s2); }
.nsm__disc select { width: 100%; min-height: 2.75rem; }
.nsm__infer { color: var(--sea-muted); border-left: 2px solid var(--accent); padding-left: .7em; margin: 0; }
.nsm__ctl a, .nsm__panel a, .nsm__attr a { color: inherit; text-underline-offset: .2em; }

/* legend swatches (the layer list is the legend) */
.sw { display: inline-block; width: 1rem; height: 1rem; flex: none; position: relative; }
.sw--proj::before { content: ""; position: absolute; inset: .2rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(255, 75, 31, .3); }
.sw--grid::before { content: ""; position: absolute; inset: .2rem; background: var(--sea-text); }
.sw--yard::before { content: ""; position: absolute; inset: .22rem; border: 1.5px solid var(--sea-text); transform: rotate(45deg); }
.sw--wind { background: rgba(56, 225, 214, .25); border: 1px solid var(--wind); }
.sw--plat::before { content: ""; position: absolute; inset: .3rem; border-radius: 50%; background: var(--plat); }
.sw--pipe::before { content: ""; position: absolute; left: 0; right: 0; top: .3rem; border-top: 1.5px solid var(--pipe); }
.sw--pipe::after { content: ""; position: absolute; left: 0; right: 0; bottom: .3rem; border-top: 1.5px dotted var(--cable); }

/* ---------- detail panel: bottom sheet on mobile, side panel on desktop ------ */
.nsm__panel { position: absolute; z-index: 6; left: 0; right: 0; bottom: 0; max-height: 50%; overflow: auto; overscroll-behavior: contain; background: var(--sea); border-top: 1px solid var(--sea-text); padding: var(--s5) var(--gutter) var(--s6); display: grid; gap: var(--s4); align-content: start; }
.nsm__panel:focus { outline: none; }
.nsm__panel:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.nsm__panel > * { margin: 0; }
.nsm__panel .eyebrow { padding-right: 3rem; }
.nsm__name { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.1; letter-spacing: -.025em; font-weight: 400; padding-right: 2.5rem; }
.nsm__close { position: absolute; top: .5rem; right: .5rem; width: 2.75rem; height: 2.75rem; background: transparent; color: var(--sea-text); border: 1px solid var(--sea-rule); font-size: 1.5rem; line-height: 1; cursor: pointer; display: grid; place-content: center; border-radius: 0; }
.nsm__close:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.nsm__badges { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.nsm__grp { color: var(--sea-muted); }
.nsm__what { font-size: var(--fs-small); color: var(--sea-muted); }
.nsm__next { border-left: 2px solid var(--accent); padding-left: var(--s4); }
.nsm__next p:last-child { margin: 0; font-size: 1.0625rem; line-height: 1.4; }
.nsm__facts { border-top-color: var(--sea-rule); }
.nsm__facts > div { border-bottom-color: var(--sea-rule); padding-block: .6rem; grid-template-columns: minmax(6.5rem, 2fr) 4fr; }
.nsm__facts dd { font-size: var(--fs-small); font-weight: 400; overflow-wrap: anywhere; }
.nsm__prec, .nsm__src { color: var(--sea-muted); overflow-wrap: anywhere; }
.nsm__also ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--sea-rule); }
.nsm__alsobtn { width: 100%; text-align: left; background: transparent; color: inherit; border: 0; border-bottom: 1px solid var(--sea-rule); padding: .6em 1.6em .6em 0; min-height: 2.75rem; display: grid; gap: .1em; font: inherit; font-size: var(--fs-small); cursor: pointer; position: relative; border-radius: 0; }
.nsm__alsobtn::after { content: "\2192"; position: absolute; right: .2em; top: 50%; transform: translateY(-50%); color: var(--sea-muted); }
.nsm__alsobtn:hover { box-shadow: inset 3px 0 0 var(--accent); padding-left: .7em; }

.nsm__attr { position: absolute; z-index: 4; left: 0; bottom: 0; margin: 0; padding: .3em .6em; background: var(--glass); color: var(--sea-muted); font-size: .6875rem; max-width: calc(100% - 3.5rem); }
.nsm__readout { position: absolute; z-index: 4; left: .75rem; bottom: 2.1rem; margin: 0; color: var(--sea-muted); font-size: var(--fs-micro); letter-spacing: .04em; pointer-events: none; display: none; }
.nsm__readout b { font-weight: 400; color: var(--sea-text); }
.nsm__readout span { margin-left: .6em; }

@media (max-width: 55.99rem) {
  .nsm.has-panel .maplibregl-ctrl-bottom-right, .nsm.has-panel .nsm__attr { display: none; }
  .nsm__title .eyebrow { display: none; }
}
@media (min-width: 56rem) {
  .nsm__ctl { top: 1rem; left: 1rem; right: auto; width: 21.5rem; max-height: calc(100% - 4rem); padding: var(--s4) var(--s4) var(--s3); gap: var(--s4); }
  .nsm__title { display: grid; gap: var(--s2); }
  .nsm__title .eyebrow { order: 0; }
  .nsm__h1 { font-size: 1.75rem; font-weight: 400; letter-spacing: -.03em; line-height: 1.05; }
  .nsm__panel { left: auto; top: 1rem; right: 1rem; bottom: auto; width: 25rem; max-height: calc(100% - 4rem); border: 1px solid var(--sea-text); padding: var(--s5); }
  .nsm__readout { display: block; left: 23.5rem; bottom: .9rem; }
  .nsm__readout[hidden] { display: none; }
  .nsm__attr { left: auto; right: 0; max-width: 60%; }
  .nsm .maplibregl-ctrl-bottom-right { bottom: 1.6rem; }
}

/* ---------- markers (real buttons) ------------------------------------------ */
.nsmk { appearance: none; -webkit-appearance: none; background: transparent; border: 0; padding: 0; margin: 0; width: 1.75rem; height: 1.75rem; display: grid; place-content: center; cursor: pointer; color: var(--sea-text, #E9EEF0); border-radius: 0; transition: opacity var(--t, 420ms) ease; }
.nsmk i { display: block; position: relative; width: .5rem; height: .5rem; background: currentColor; box-shadow: 0 0 0 2px rgba(6, 19, 28, .85); }
.nsmk--projects i { border-radius: 50%; width: .625rem; height: .625rem; }
.nsmk--projects.is-live i { background: var(--accent, #FF4B1F); }
.nsmk--projects.is-coming i { background: #06131C; box-shadow: inset 0 0 0 2px currentColor, 0 0 0 2px rgba(6, 19, 28, .85); }
.nsmk--projects.is-live i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--accent, #FF4B1F); animation: nsm-pulse 2.6s cubic-bezier(.2, .7, .2, 1) infinite; }
.nsmk--grid.is-2gw i { width: .6875rem; height: .6875rem; }
.nsmk--grid.is-live i { background: var(--accent, #FF4B1F); }
.nsmk--grid.is-coming i { background: #06131C; box-shadow: inset 0 0 0 1.5px currentColor, 0 0 0 2px rgba(6, 19, 28, .85); }
.nsmk--yards i { background: #06131C; box-shadow: inset 0 0 0 1.5px currentColor, 0 0 0 2px rgba(6, 19, 28, .85); transform: rotate(45deg); width: .5625rem; height: .5625rem; }
.nsmk:hover i, .nsmk:focus-visible i { outline: 2px solid currentColor; outline-offset: 3px; }
.nsmk:focus-visible { outline: 3px solid var(--accent, #FF4B1F); outline-offset: 0; }
.nsmk.is-sel { z-index: 3; }
.nsmk.is-sel i { outline: 2px solid var(--accent, #FF4B1F); outline-offset: 4px; }
.nsmk.is-dim { opacity: .16; }
.nsmk.is-off { display: none; }
@keyframes nsm-pulse { 0% { transform: scale(1); opacity: .9; } 70%, 100% { transform: scale(3.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .nsmk--projects.is-live i::after { animation: none; inset: -4px; opacity: .55; }
  .nsm__map .maplibregl-canvas { transition: none; }
}

.nsm-tip { position: absolute; z-index: 4; left: 0; top: 0; pointer-events: none; background: #E9EEF0; color: #06131C; font-size: .8125rem; line-height: 1.2; padding: .3em .55em; white-space: nowrap; max-width: 18rem; overflow: hidden; text-overflow: ellipsis; }

/* MapLibre chrome, squared and dark */
.nsm .maplibregl-ctrl-group, .nse .maplibregl-ctrl-group { border-radius: 0; background: #06131C; box-shadow: none; border: 1px solid #1D3746; }
.nsm .maplibregl-ctrl-group button, .nse .maplibregl-ctrl-group button { width: 2.75rem; height: 2.75rem; border-radius: 0; }
.nsm .maplibregl-ctrl-group button + button, .nse .maplibregl-ctrl-group button + button { border-top: 1px solid #1D3746; }
.nsm .maplibregl-ctrl-group button .maplibregl-ctrl-icon, .nse .maplibregl-ctrl-group button .maplibregl-ctrl-icon { filter: invert(1); }
.nsm .maplibregl-ctrl-group button:hover, .nse .maplibregl-ctrl-group button:hover { background: #0B1E2A; }
.nsm .maplibregl-ctrl-group button:focus-visible, .nse .maplibregl-ctrl-group button:focus-visible { outline: 3px solid #FF4B1F; box-shadow: none; }
.maplibregl-map { font: inherit; }

/* ---------- projects list (light surface) ------------------------------------- */
.nsl__form { display: flex; flex-wrap: wrap; gap: var(--s4); align-items: end; margin-bottom: var(--s6); padding-bottom: var(--s6); border-bottom: 1px solid var(--line-soft); }
.nsl__form .field { flex: 1 1 16rem; max-width: 26rem; margin: 0; }
.nsl__form .note { flex-basis: 100%; margin: 0; }
.nsl__filter { margin-bottom: var(--s6); }
.nsl__filter p { margin: 0 0 var(--s2); }
.nsl__group { margin-top: var(--s8); }
.nsl__group:first-of-type { margin-top: 0; }
.nsl__ghead { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s5); border-bottom: 1px solid var(--line); padding-bottom: var(--s3); }
.nsl__ghead > * { margin: 0; }
.nsl__items { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; }
.nsl__item { padding: var(--s6) 0; border-bottom: 1px solid var(--line-soft); display: grid; gap: var(--s4); align-content: start; scroll-margin-top: 1rem; }
.nsl__item > * { margin: 0; }
.nsl__top { display: grid; gap: var(--s3); justify-items: start; }
.nsl__name { font-size: var(--fs-h3); line-height: 1.12; letter-spacing: -.02em; font-weight: 400; margin: 0; }
.nsl__next { font-size: 1.0625rem; max-width: 46em; }
.nsl__k { display: block; font-size: var(--fs-micro); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: .2em; }
.nsl__facts dd { font-weight: 400; font-size: var(--fs-small); }
.nsl__src { color: var(--fg-muted); overflow-wrap: anywhere; }
.nsl__table { min-width: 56rem; }
.nsl__table th[scope=row] { text-align: left; font-weight: 500; min-width: 11rem; }
.nsl__table td { font-size: var(--fs-small); vertical-align: top; }
.nsl__attr { overflow-wrap: anywhere; }
@media (min-width: 60rem) {
  .nsl__items { grid-template-columns: 1fr 1fr; column-gap: var(--s8); }
}

/* ---------- homepage embed ---------------------------------------------------- */
.nse { position: absolute; inset: 0; }
.nse__map { position: absolute; inset: 0; background: #06131C; }
.nse__bar { position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between; padding: .75rem clamp(.75rem, 2vw, 1.25rem); background: rgba(6, 19, 28, .93); border-top: 1px solid #1D3746; color: #E9EEF0; }
.nse__legend { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin: 0; padding: 0; list-style: none; font-size: .8125rem; color: #93A6B0; }
.nse__legend li { display: inline-flex; align-items: center; gap: .45em; }
.nse__actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.nse__tap { position: absolute; z-index: 4; inset: 0; width: 100%; height: 100%; background: transparent; border: 0; padding: 0; cursor: pointer; border-radius: 0; color: #E9EEF0; font: inherit; }
.nse__tap span { position: absolute; top: clamp(.75rem, 2vw, 1.25rem); right: clamp(.75rem, 2vw, 1.25rem); font-size: .8125rem; letter-spacing: .04em; padding: .45em .7em; background: rgba(6, 19, 28, .9); border: 1px solid #1D3746; }
.nse__tap:hover span, .nse__tap:focus-visible span { border-color: #E9EEF0; }
.nse__tap:focus-visible { outline: 3px solid #FF4B1F; outline-offset: -3px; }
.nse__card { position: absolute; z-index: 6; left: clamp(.75rem, 2vw, 1.25rem); top: clamp(.75rem, 2vw, 1.25rem); max-width: min(22rem, calc(100% - 1.5rem)); background: #06131C; border: 1px solid #E9EEF0; color: #E9EEF0; padding: 1rem 3rem 1rem 1rem; display: grid; gap: .5rem; }
.nse__card > * { margin: 0; }
.nse__card h3 { font-size: 1.25rem; line-height: 1.15; font-weight: 400; letter-spacing: -.02em; }
.nse__card p { font-size: .9375rem; color: #93A6B0; }
.nse__card a { color: #E9EEF0; }
.nse__card .nsm__close { top: .35rem; right: .35rem; width: 2.5rem; height: 2.5rem; }
.nse .sw--proj::before { background: #FF4B1F; }

/* ==========================================================================
   Homepage world globe (static/js/map/globe-embed.js mounts into #world-globe)
   Always dark: space behind the globe, luminous project hues (--k-<kind> on :root win).
   ========================================================================== */
#world-globe { position: relative; isolation: isolate; overflow: hidden; min-height: 22rem; height: clamp(26rem, 78vh, 46rem); height: clamp(26rem, 78svh, 46rem); border-radius: 1.25rem; color: #E9EEF0; font-size: .875rem; line-height: 1.4;
  background:
    radial-gradient(circle at 50% 52%, rgba(64, 170, 255, .20) 0, rgba(64, 170, 255, .07) 34%, transparent 58%),
    radial-gradient(circle at 18% 12%, rgba(183, 140, 255, .12), transparent 42%),
    radial-gradient(circle at 86% 88%, rgba(53, 224, 194, .10), transparent 40%),
    #020912; }
#world-globe::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .7;
  background-image: radial-gradient(1px 1px at 12% 22%, #cfe6ff 50%, transparent 51%), radial-gradient(1px 1px at 78% 14%, #fff 50%, transparent 51%), radial-gradient(1.2px 1.2px at 64% 82%, #bfe 50%, transparent 51%), radial-gradient(1px 1px at 30% 74%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 91% 56%, #cfe6ff 50%, transparent 51%), radial-gradient(1px 1px at 6% 61%, #fff 50%, transparent 51%), radial-gradient(1.2px 1.2px at 47% 8%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 55% 94%, #cfe6ff 50%, transparent 51%); }
#world-globe [data-globe-placeholder], #world-globe .wg-static { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; }
#world-globe [data-globe-placeholder] img, #world-globe img.wg-static { width: 100%; height: 100%; object-fit: cover; opacity: .9; }
/* .wg-stage is THE one MapLibre container; globe-embed.js moves it between #world-globe and the hero backdrop
   slot (fx.css .hero__globe-box). Fade-out is quick (before a move), fade-in slow. */
.wg-stage, .wg-stage.maplibregl-map { position: absolute; inset: 0; z-index: 1; opacity: 0; transition: opacity .22s ease; }
.wg-stage.is-on { opacity: 1; transition: opacity .9s ease; }
#world-globe [data-globe-placeholder] { transition: opacity .6s ease, visibility 0s linear .6s; }
#world-globe.has-stage [data-globe-placeholder] { opacity: 0; visibility: hidden; }
#world-globe.has-stage [data-globe-placeholder] * { animation-play-state: paused !important; }
#world-globe:not(.has-stage) > .wg-chips, #world-globe:not(.has-stage) > .wg-foot, #world-globe:not(.has-stage) > .wg-hint { opacity: 0; visibility: hidden; }
.wg-chips, .wg-foot { transition: opacity .5s ease; }
.wg-stage:focus-visible { outline: 3px solid #fff; outline-offset: -4px; }
.wg-stage .maplibregl-canvas { outline: none; cursor: grab; }
.wg-stage .maplibregl-canvas:active { cursor: grabbing; }
#world-globe .maplibregl-ctrl-group { background: rgba(4, 16, 28, .82); border: 1px solid rgba(140, 190, 230, .28); box-shadow: none; border-radius: .6rem; overflow: hidden; }
#world-globe .maplibregl-ctrl-group button { width: 2.25rem; height: 2.25rem; }
#world-globe .maplibregl-ctrl-group button + button { border-top: 1px solid rgba(140, 190, 230, .2); }
#world-globe .maplibregl-ctrl-group button .maplibregl-ctrl-icon { filter: invert(1); }
#world-globe .maplibregl-ctrl-bottom-right { bottom: 3.4rem; }

.wg-chips { position: absolute; z-index: 3; top: .75rem; left: .75rem; right: .75rem; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; pointer-events: none; }
.wg-chips > * { pointer-events: auto; }
.wg-chip { display: inline-flex; align-items: center; gap: .45rem; min-height: 2rem; padding: .25rem .7rem .25rem .55rem; border-radius: 999px; border: 1px solid rgba(140, 190, 230, .3); background: rgba(4, 16, 28, .78); color: #E9EEF0; font: inherit; font-size: .8125rem; cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: border-color .15s, opacity .15s, background .15s; }
.wg-chip:hover { border-color: rgba(200, 230, 255, .7); }
.wg-chip:focus-visible, .wg-dive:focus-visible, .wg-x:focus-visible, .wg-cov summary:focus-visible, .wg-card a:focus-visible { outline: 2px solid #7DF5D9; outline-offset: 2px; }
.wg-chip[aria-pressed="false"] { color: #9FB4C0; background: rgba(4, 16, 28, .5); text-decoration: line-through; }
.wg-chip[aria-pressed="false"] .wg-dot { background: transparent; box-shadow: inset 0 0 0 1.5px var(--c); }
.wg-dot { --c: #9FB4C0; width: .6rem; height: .6rem; border-radius: 50%; background: var(--c); box-shadow: 0 0 .55rem var(--c); flex: none; }
.wg-legend { display: inline-flex; align-items: center; gap: .4rem; padding: .2rem .5rem; color: #B9CAD4; font-size: .75rem; text-shadow: 0 1px 3px #020912; }
.wg-ring { width: .7rem; height: .7rem; border-radius: 50%; border: 1.5px solid #E9EEF0; opacity: .8; }

.wg-foot { position: absolute; z-index: 3; left: .75rem; right: .75rem; bottom: .75rem; display: flex; flex-wrap: wrap; gap: .5rem .75rem; align-items: flex-end; pointer-events: none; }
.wg-foot > * { pointer-events: auto; }
.wg-clock { order: 3; margin-left: auto; color: #B9CAD4; font-size: .75rem; font-variant-numeric: tabular-nums; text-shadow: 0 1px 3px #020912; pointer-events: none; }
.wg-dive { order: 1; display: inline-flex; align-items: center; gap: .5rem; min-height: 2.5rem; padding: .45rem 1rem; border-radius: 999px; font-weight: 600; text-decoration: none; color: #02131C; background: linear-gradient(100deg, #35E0C2, #5AA9FF); box-shadow: 0 0 1.4rem rgba(53, 224, 194, .35); }
.wg-dive::after { content: "\2193"; }
.wg-dive:hover { filter: brightness(1.08); }
.wg-cov { order: 2; position: relative; max-width: min(30rem, 100%); color: #B9CAD4; font-size: .75rem; }
.wg-cov summary { cursor: pointer; padding: .35rem .6rem; border-radius: .5rem; background: rgba(4, 16, 28, .72); list-style: none; text-decoration: underline; text-decoration-color: rgba(185, 202, 212, .5); text-underline-offset: 2px; }
.wg-cov summary::-webkit-details-marker { display: none; }
.wg-cov-body { position: absolute; bottom: calc(100% + .4rem); left: 0; width: min(28rem, calc(100vw - 3rem)); max-height: 16rem; overflow: auto; padding: .9rem 1rem; border-radius: .8rem; border: 1px solid rgba(140, 190, 230, .3); background: rgba(4, 16, 28, .96); color: #E9EEF0; font-size: .8125rem; }
.wg-cov-body p, .wg-cov-body ul { margin: 0 0 .6rem; }
.wg-cov-body ul { padding-left: 1.1rem; }
.wg-cov-body a, .wg-card a { color: #8FD3FF; }

.wg-card { position: absolute; z-index: 4; top: 3.6rem; right: .75rem; width: min(20rem, calc(100% - 1.5rem)); padding: 1rem 1.1rem 1.1rem; border-radius: 1rem; border: 1px solid rgba(140, 190, 230, .35); background: rgba(4, 16, 28, .93); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 1rem 3rem rgba(0, 0, 0, .5); animation: wg-in .25s ease both; }
@keyframes wg-in { from { opacity: 0; transform: translateY(.4rem); } }
.wg-kind { display: flex; align-items: center; gap: .45rem; margin: 0 1.8rem .35rem 0; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: #B9CAD4; }
.wg-name { margin: 0 0 .6rem; font-size: 1.125rem; line-height: 1.2; font-weight: 600; letter-spacing: -.01em; color: #fff; overflow-wrap: anywhere; }
.wg-facts { display: grid; grid-template-columns: auto 1fr; gap: .2rem .8rem; margin: 0 0 .7rem; }
.wg-facts dt { color: #9FB4C0; }
.wg-facts dd { margin: 0; }
.wg-src { margin: 0; font-size: .78rem; color: #B9CAD4; overflow-wrap: anywhere; }
.wg-more { display: inline-block; margin-top: .6rem; font-weight: 600; }
.wg-x { position: absolute; top: .45rem; right: .45rem; width: 2rem; height: 2rem; border: 0; border-radius: 50%; background: transparent; color: #E9EEF0; font-size: 1.3rem; line-height: 1; cursor: pointer; }
.wg-x:hover { background: rgba(255, 255, 255, .1); }

@media (max-width: 40rem) {
  #world-globe { border-radius: .9rem; height: clamp(30rem, 86svh, 40rem); }
  .wg-chips { flex-wrap: nowrap; overflow-x: auto; right: 0; padding-right: .75rem; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
  .wg-chips::-webkit-scrollbar { display: none; }
  .wg-chip { flex: none; min-height: 2.75rem; padding-inline: .8rem 1rem; font-size: .875rem; }   /* 44 px tap target */
  .wg-chips { padding-bottom: .4rem; overscroll-behavior-x: contain; }
  .wg-x { min-width: 2.75rem; min-height: 2.75rem; }
  .wg-legend { flex: none; padding-right: 2rem; }
  .wg-card { top: auto; right: .75rem; left: .75rem; bottom: 6.6rem; width: auto; }
  .wg-clock { order: 0; width: 100%; margin: 0; }
  #world-globe .maplibregl-ctrl-bottom-right { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .wg-stage { transition: none; }
  .wg-card { animation: none; }
}
.wg-preview { background: #020912; color: #E9EEF0; margin: 0; }
.wg-preview main { max-width: 80rem; margin: 0 auto; padding: 2rem 1rem 60vh; }
.wg-preview__h { font-size: clamp(2rem, 5vw, 4rem); letter-spacing: -.03em; margin: 0 0 1.5rem; }
.wg-preview__p { color: #9FB4C0; }
#world-globe.is-touch:not(.is-engaged) .maplibregl-canvas-container, #world-globe.is-touch:not(.is-engaged) .maplibregl-canvas { touch-action: pan-y !important; }
.wg-hint { position: absolute; z-index: 3; left: 50%; top: 3.4rem; transform: translateX(-50%); padding: .3rem .7rem; border-radius: 999px; background: rgba(4, 16, 28, .8); color: #B9CAD4; font-size: .75rem; white-space: nowrap; pointer-events: none; }
.is-engaged > .wg-hint { display: none; }