/**
* @file public/assets/css/app.css
* @brief Core application styles (landing, modal, indicator, map container).
*/
@import url('/assets/css/tokens.css');
/* Google Fonts moved out of an @import into a non-blocking in
* each view's (src/views/home/index.phtml and friends). Loading
* them here made app.css render-blocking on Google's domain too, and
* the font swap-in caused the .app-shell CLS spike (0.186) reported
* by Lighthouse 2026-04. */
* { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
font-family: var(--font-body);
color: var(--fg-0);
background: var(--bg-0);
min-height: 100vh;
overflow-x: hidden;
}
h1, h2, h3, h4 {
font-family: var(--font-ui);
letter-spacing: -0.01em;
margin: 0 0 var(--space-4);
font-weight: 600;
/* Syne has prominent descenders (g, ê, y, j). An explicit roomy
* line-height prevents the browser from clipping them on titles
* like "Qu'est-ce qui vous gêne ?". */
line-height: 1.25;
padding-bottom: 0.04em;
}
a { color: var(--aurora-blue); text-decoration: none; transition: opacity var(--dur-1) var(--ease); }
a:hover { opacity: 0.8; }
button {
font-family: inherit;
cursor: pointer;
border: 0;
padding: 0.7rem 1rem;
border-radius: var(--radius);
font-weight: 600;
transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
button:focus-visible {
outline: 2px solid var(--aurora-violet);
outline-offset: 2px;
}
.btn-primary {
background: var(--grad-primary);
color: #fff;
border-radius: var(--radius-full);
border: 1px solid rgba(255, 255, 255, 0.22);
}
.btn-primary:hover {
transform: translateY(-1px);
box-shadow: var(--shadow-2);
filter: brightness(1.05);
}
.btn-ghost {
background: transparent;
color: var(--fg-0);
border: 1px solid var(--border);
}
/* --------------------------------------------------------------- */
/* Layout */
/* --------------------------------------------------------------- */
.app-shell {
min-height: 100vh;
display: flex; flex-direction: column;
}
header.top {
--cs-header-h: 64px;
display: flex;
align-items: center;
justify-content: flex-start;
gap: var(--space-4) var(--space-5);
padding: var(--space-4) var(--space-6);
border-bottom: 1px solid var(--border);
background: rgba(13, 17, 23, 0.8);
backdrop-filter: blur(8px);
/* Must sit above the globe zoom controls (850) and FAB rail (26) so the
* language picker and burger menu overlay them cleanly on every page. */
position: sticky; top: 0; z-index: 900;
min-width: 0;
/* CLS guard: reserve final header height so DM Sans / Syne swapping
* in does NOT nudge the sticky bar by a few pixels (each px translates
* into layout-shift score for the full app-shell width). Value tuned
* to match the steady-state header after web fonts load. */
min-height: 64px;
box-sizing: border-box;
}
/* About / Places mega-menu + language dropdown use fixed or tall panels that overlap
* #stage-canvas. #cs-location-share-fab is z-index 1100; without this, the share
* tile paints above the header stacking context (900) and clips the open menu. */
header.top:has(details.cs-about-nav[open]),
header.top:has(details.cs-lang-switch[open]) {
z-index: 1150;
}
@media (max-width: 640px) {
header.top { min-height: 56px; --cs-header-h: 56px; }
}
header.top .brand {
display: inline-flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
flex: 0 0 auto;
flex-shrink: 0;
max-width: 100%;
}
header.top .brand .brand-mark {
width: 28px;
height: 28px;
display: block;
filter: drop-shadow(0 0 8px rgba(0, 255, 178, 0.30));
}
/* -------------------------------------------------------------------
* Brand wordmark (Aurora split "Clear" in aurora-green + glow,
* followed by "Spot" in neutral foreground). Rendered via the
* productBrandHtml() PHP helper which emits a
* wrapping two inner spans (.brand-name-accent + .brand-name-mute).
* ------------------------------------------------------------------- */
.brand-name {
font-family: var(--font-ui);
font-weight: 800;
font-size: 1.125rem;
letter-spacing: 0.01em;
color: var(--fg-0);
display: inline-flex;
align-items: baseline;
}
.brand-name-accent {
color: var(--aurora-green);
letter-spacing: 0.04em;
text-shadow: var(--glow-brand);
}
.brand-name-mute {
color: var(--fg-0);
letter-spacing: 0.01em;
}
header.top .top-end {
margin-left: auto;
display: flex;
flex: 1 1 auto;
min-width: 0;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: var(--space-2) var(--space-4);
}
header.top .top-nav {
display: flex;
flex-wrap: wrap;
gap: var(--space-4);
align-items: center;
overflow: visible;
}
header.top .top-end { overflow: visible; }
header.top .top-nav a { color: var(--fg-1); font-size: 0.9rem; }
header.top .top-nav a[aria-current="page"] { color: var(--aurora-green); font-weight: 600; }
header.top .top-nav .cs-about-summary { color: var(--fg-1); font-size: 0.9rem; }
header.top .top-nav .cs-about-summary.is-active { color: var(--aurora-green); font-weight: 600; }
/* Burger: hidden on wide screens */
.cs-nav-burger {
display: none;
flex: 0 0 auto;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
margin-left: auto;
margin-right: var(--space-2);
padding: 0;
border: 1px solid var(--border);
border-radius: var(--radius);
background: rgba(10, 13, 26, 0.75);
color: var(--fg-0);
cursor: pointer;
box-shadow: var(--shadow-2);
transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.cs-nav-burger:hover {
border-color: rgba(123, 94, 167, 0.45);
background: rgba(124, 92, 255, 0.18);
}
.cs-nav-burger:focus-visible {
outline: 2px solid var(--brand, #7c5cff);
outline-offset: 2px;
}
.cs-nav-burger-inner {
display: flex;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 18px;
}
.cs-nav-burger-inner span {
display: block;
height: 2px;
border-radius: 1px;
background: currentColor;
transition: transform var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease);
}
header.top.nav-open .cs-nav-burger-inner span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
header.top.nav-open .cs-nav-burger-inner span:nth-child(2) {
opacity: 0;
}
header.top.nav-open .cs-nav-burger-inner span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
.cs-nav-backdrop {
display: none;
}
@media (max-width: 768px) {
header.top {
flex-wrap: nowrap;
align-items: center;
padding: var(--space-3) var(--space-4);
gap: var(--space-2);
}
header.top .brand {
min-width: 0;
flex: 1 1 auto;
}
header.top .brand-name {
font-size: clamp(0.92rem, 4.2vw, 1.05rem);
}
.cs-nav-burger {
display: inline-flex;
order: 2;
margin-left: 0;
}
header.top .brand {
order: 1;
}
header.top .top-end {
order: 3;
margin-left: 0;
width: auto;
flex: 0 0 auto;
flex-wrap: nowrap;
justify-content: flex-end;
gap: var(--space-2);
}
header.top .top-nav {
position: fixed;
left: 0;
right: 0;
top: 0;
margin-top: calc(env(safe-area-inset-top, 0px) + 52px);
max-height: min(72vh, calc(100dvh - 64px));
overflow-y: auto;
flex-direction: column;
flex-wrap: nowrap;
align-items: stretch;
gap: 0;
padding: var(--space-4);
background: rgba(13, 17, 23, 0.98);
border-bottom: 1px solid var(--border);
box-shadow: var(--shadow-2);
/* Above the header itself (900) so the expanded menu sits on top of
* the globe controls and FAB rail. */
z-index: 920;
display: none;
}
header.top.nav-open .top-nav {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-items: stretch;
/* Prevent horizontal scroll when grows intrinsic width;
* without this, WebKit can shift the focused mega block to the right
* (see debug: mega.ox jumps from 16 to ~viewport width minus padding). */
overflow-x: hidden;
}
header.top .top-nav > a,
header.top .top-nav > details {
padding: var(--space-3) 0;
border-bottom: 1px solid var(--border);
font-size: 1rem;
}
header.top .top-nav > .cs-nav-auth {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0;
padding: 0;
margin: 0;
border-bottom: 1px solid var(--border);
font-size: 1rem;
}
header.top .top-nav > .cs-nav-auth > a {
padding: var(--space-3) 0;
border-bottom: 1px solid var(--border);
color: var(--fg-0);
text-decoration: none;
font-size: 1rem;
}
header.top .top-nav > .cs-nav-auth > a:last-child {
border-bottom: none;
}
header.top .top-nav > *:last-child {
border-bottom: none;
}
header.top .top-nav > a {
color: var(--fg-0);
text-decoration: none;
}
header.top .top-nav .cs-about-summary {
width: 100%;
padding: var(--space-2) 0;
font-size: 1rem;
}
/* Flex column + min-width:auto can shrink to summary text width;
* submenu then looks like a narrow floating strip. Match other items: full width. */
header.top .top-nav > details.cs-about-nav {
width: 100%;
max-width: 100%;
min-width: 0;
align-self: stretch;
box-sizing: border-box;
}
header.top .top-nav .cs-about-menu {
position: static;
margin-top: var(--space-2);
width: 100%;
min-width: 0;
box-shadow: none;
border: 1px solid var(--border);
}
/* Burger open: force About / Places dropdowns to span the drawer like root links.
* Desktop mega uses position:fixed + right:10px; without a hard override some
* engines still resolve the open panel to the viewport edge beside a narrow . */
header.top.nav-open .top-nav > details.cs-about-nav {
display: block;
width: 100%;
max-width: 100%;
}
header.top.nav-open .top-nav .cs-about-nav .cs-about-menu,
header.top.nav-open .top-nav details.cs-about-nav--mega > .cs-about-menu,
header.top.nav-open .top-nav details.cs-about-nav--mega[open] > .cs-about-menu {
position: static !important;
inset: auto !important;
left: auto !important;
right: auto !important;
top: auto !important;
bottom: auto !important;
transform: none !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin-top: var(--space-2) !important;
margin-left: 0 !important;
margin-right: 0 !important;
box-sizing: border-box;
align-self: stretch;
}
header.top.nav-open .top-nav .cs-about-summary {
display: flex;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
header.top.nav-open .top-nav .cs-about-datasources-guides {
margin-left: 0;
margin-right: 0;
padding-left: var(--space-3);
max-width: 100%;
box-sizing: border-box;
}
header.top.nav-open .top-nav .cs-about-item.cs-about-item--nested {
display: flex !important;
flex-wrap: nowrap;
align-items: center;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.cs-nav-backdrop {
display: block;
position: fixed;
left: 0;
right: 0;
top: 52px;
bottom: 0;
/* Between the globe stage (<=850) and the header row (>=900) so it
* dims the map/globe but stays below the menu + burger controls. */
z-index: 890;
margin: 0;
padding: 0;
border: 0;
background: rgba(5, 8, 15, 0.55);
backdrop-filter: blur(4px);
cursor: pointer;
}
.cs-nav-backdrop[hidden] {
display: none !important;
}
header.top.nav-open {
/* Match desktop :has(details[open]) bump so burger drawer stays above share FAB (1100). */
z-index: 1150;
}
header.top.nav-open .brand,
header.top.nav-open .cs-nav-burger,
header.top.nav-open .top-end {
position: relative;
z-index: 940;
}
header.top.nav-open .top-nav > details.cs-about-nav--mega {
width: 100%;
max-width: 100%;
min-width: 0;
align-self: stretch;
}
header.top.nav-open .top-nav > details.cs-about-nav--mega[open] {
display: block;
align-self: stretch;
width: 100%;
max-width: 100%;
margin-left: 0;
margin-right: 0;
position: relative;
left: 0;
right: auto;
}
}
@media (min-width: 769px) {
header.top .top-nav > .cs-nav-auth {
display: contents;
}
}
body.cs-header-nav-open {
overflow: hidden;
touch-action: none;
}
/* While the first-visit onboarding is on screen, hide every stage overlay
* (globe zoom/compass controls, FAB rail, exposure indicator) so the modal
* stands alone. They all come back automatically when the modal closes. */
body.cs-onboarding-open .cs-globe-controls,
body.cs-onboarding-open .cs-stage-fabs,
body.cs-onboarding-open .exposure-indicator,
body.cs-onboarding-open .cs-stage-loading,
body.cs-onboarding-open .cs-globe-loading,
body.cs-onboarding-open .cs-map-loading,
body.cs-onboarding-open .cs-pwa-install {
display: none !important;
}
/* Layers/search FAB sheets: bottom sheet + exposure chip are both bottom-anchored
* on mobile; pin the chip under the modal tier while the stage dimmer is on so
* the sheet (and backdrop) stack above without hiding the chip from view where
* it does not overlap the sheet. */
body.cs-stage-fab-backdrop-on .exposure-indicator {
z-index: 1;
}
.cs-about-nav { position: relative; overflow: visible; }
.cs-about-summary {
list-style: none;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.35rem 0.5rem;
border-radius: var(--radius);
border: 1px solid transparent;
color: var(--fg-1);
font-size: 0.95rem;
transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.cs-about-summary::-webkit-details-marker { display: none; }
.cs-about-summary:hover { color: var(--fg-0); background: rgba(124, 92, 255, 0.08); }
.cs-about-summary.is-active { color: var(--fg-0); border-color: rgba(123, 94, 167, 0.35); background: rgba(124, 92, 255, 0.12); }
.cs-about-menu {
position: absolute;
left: 0;
top: calc(100% + 8px);
min-width: 13rem;
margin: 0;
padding: var(--space-2);
list-style: none;
background: var(--bg-2);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow-2);
z-index: 30;
}
/* About mega: fixed to viewport so the panel is not clipped by flex/overflow-x; right edge = screen minus 10px. */
@media (min-width: 769px) {
header.top .top-nav .cs-about-nav--mega[open] > .cs-about-menu {
position: fixed;
left: auto;
right: 10px;
top: calc(env(safe-area-inset-top, 0px) + var(--cs-header-h, 64px) + 6px);
/* Sits just under the sticky bar (min-height can be a few px short of the painted bar). */
margin-top: 0;
/* Above .cs-lang-menu (30) inside .top-end so the panel is not covered by the flag tile. */
z-index: 50;
min-width: min(28rem, calc(100vw - 20px));
max-width: calc(100vw - 20px);
width: max-content;
max-height: min(80vh, calc(100dvh - env(safe-area-inset-top, 0px) - var(--cs-header-h, 64px) - 24px));
overflow-x: visible;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
header.top .top-nav .cs-about-nav--mega .cs-about-datasources-guides a.cs-about-item--nested {
white-space: normal;
overflow: visible;
text-overflow: unset;
max-width: none;
flex-shrink: 1;
}
}
@media (max-width: 768px) {
header.top .top-nav .cs-about-nav--mega > .cs-about-menu {
position: static !important;
inset: auto !important;
left: auto !important;
right: auto !important;
top: auto !important;
bottom: auto !important;
transform: none !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box;
overflow-x: visible;
}
header.top .top-nav .cs-about-nav--mega .cs-about-datasources-guides a.cs-about-item--nested {
white-space: normal;
overflow: visible;
text-overflow: unset;
max-width: none;
}
}
.cs-about-item {
display: block;
padding: 0.45rem 0.6rem;
border-radius: var(--radius);
color: var(--fg-1);
text-decoration: none;
font-size: 0.9rem;
}
.cs-about-item:hover { background: rgba(124, 92, 255, 0.12); color: var(--fg-0); }
.cs-about-item[aria-current="page"] { color: var(--accent-0); font-weight: 600; }
.cs-about-datasources-guides {
list-style: none;
margin: 0.35rem 0 0 0.35rem;
padding: 0 0 0 0.65rem;
border-left: 2px solid rgba(123, 94, 167, 0.35);
}
.cs-about-datasources-guides > li { margin: 0.1rem 0; }
.cs-about-guide-tier {
list-style: none;
margin: 0.4rem 0 0 0;
padding: 0;
}
.cs-about-guide-tier:first-child { margin-top: 0.12rem; }
.cs-about-guide-tier__head { margin: 0 0 0.1rem 0.05rem; }
.cs-about-guide-tier__tag {
display: block;
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(233, 238, 249, 0.45);
line-height: 1.2;
}
.cs-about-guide-tier__list {
list-style: none;
margin: 0.12rem 0 0 0;
padding: 0;
}
.cs-about-guide-tier__list > li { margin: 0.1rem 0; }
.cs-about-item.cs-about-item--nested {
font-size: 0.82rem;
line-height: 1.35;
padding: 0.22rem 0.4rem;
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.about-subnav-guides {
display: flex;
flex-wrap: wrap;
gap: 0.35rem 0.5rem;
width: 100%;
margin: -0.25rem 0 var(--space-4) 0;
padding-top: var(--space-3);
border-top: 1px solid var(--border);
}
.about-subnav-guides--tiered {
flex-direction: column;
flex-wrap: nowrap;
align-items: stretch;
gap: 0.75rem;
}
.about-subnav-guides-tier { margin: 0; padding: 0; }
.about-subnav-guides-tier__tag {
margin: 0 0 0.35rem 0;
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(233, 238, 249, 0.45);
}
.about-subnav-guides-tier__links {
display: flex;
flex-wrap: wrap;
gap: 0.35rem 0.5rem;
align-items: center;
}
.about-subnav-guides a {
font-size: 0.82rem;
color: var(--fg-2);
text-decoration: none;
padding: 0.28rem 0.55rem;
border-radius: var(--radius);
border: 1px solid transparent;
}
.about-subnav-guides a:hover { color: var(--fg-0); background: rgba(124, 92, 255, 0.1); }
.about-subnav-guides a.is-active {
color: var(--accent-0);
border-color: rgba(123, 94, 167, 0.4);
background: rgba(124, 92, 255, 0.12);
}
/* Data guide links: map/layers colour scale + POI SVGs (header + about chips + data-sources tier list). */
.about-subnav-guides a[data-cs-guide],
.cs-about-datasources-guides a[data-cs-guide],
.about-data-guides-list__link[data-cs-guide] {
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.about-subnav-guides a[data-cs-guide]::before,
.cs-about-datasources-guides a[data-cs-guide]::before,
.about-data-guides-list__link[data-cs-guide]::before {
content: '';
display: inline-block;
width: 1.2rem;
height: 1.2rem;
margin-right: 0.48rem;
flex-shrink: 0;
background: center / contain no-repeat;
filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.45));
}
/* Header + mobile drawer: slightly larger than about-page chips. */
header.top .cs-about-datasources-guides a[data-cs-guide]::before {
width: 1.4rem;
height: 1.4rem;
margin-right: 0.55rem;
}
.about-subnav-guides a[data-cs-guide="nuclear"]::before,
.cs-about-datasources-guides a[data-cs-guide="nuclear"]::before,
.about-data-guides-list__link[data-cs-guide="nuclear"]::before {
background-image: url('/assets/img/poi-icon-nuclear.svg');
}
.about-subnav-guides a[data-cs-guide="coal"]::before,
.cs-about-datasources-guides a[data-cs-guide="coal"]::before,
.about-data-guides-list__link[data-cs-guide="coal"]::before {
background-image: url('/assets/img/poi-icon-coal.svg');
}
.about-subnav-guides a[data-cs-guide="telecom"]::before,
.cs-about-datasources-guides a[data-cs-guide="telecom"]::before,
.about-data-guides-list__link[data-cs-guide="telecom"]::before {
background-image: url('/assets/img/poi-icon-telecom.svg');
}
/* Wind: turbine pictogram (aligns with map + layers panel). */
.about-subnav-guides a[data-cs-guide="wind"]::before,
.cs-about-datasources-guides a[data-cs-guide="wind"]::before,
.about-data-guides-list__link[data-cs-guide="wind"]::before {
background-image: url('/assets/img/poi-icon-wind.svg');
background-color: transparent;
border-radius: 0;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.4);
filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.45));
}
/* ZOI / NZOI: recognisable pictograms (aligns with data-sources tier list). */
.about-subnav-guides a[data-cs-guide="air"]::before,
.cs-about-datasources-guides a[data-cs-guide="air"]::before,
.about-data-guides-list__link[data-cs-guide="air"]::before {
background-image: url('/assets/img/guide-icon-air.svg');
background-color: transparent;
border-radius: 0;
width: 1.2rem;
height: 1.2rem;
box-shadow: none;
filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.45));
}
header.top .cs-about-datasources-guides a[data-cs-guide="air"]::before { width: 1.4rem; height: 1.4rem; }
.about-subnav-guides a[data-cs-guide="noise"]::before,
.cs-about-datasources-guides a[data-cs-guide="noise"]::before,
.about-data-guides-list__link[data-cs-guide="noise"]::before {
background-image: url('/assets/img/guide-icon-noise.svg');
background-color: transparent;
border-radius: 0;
width: 1.2rem;
height: 1.2rem;
box-shadow: none;
filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.45));
}
header.top .cs-about-datasources-guides a[data-cs-guide="noise"]::before { width: 1.4rem; height: 1.4rem; }
.about-subnav-guides a[data-cs-guide="pollen"]::before,
.cs-about-datasources-guides a[data-cs-guide="pollen"]::before,
.about-data-guides-list__link[data-cs-guide="pollen"]::before {
background-image: url('/assets/img/guide-icon-pollen.svg');
background-color: transparent;
border-radius: 0;
width: 1.2rem;
height: 1.2rem;
box-shadow: none;
filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.45));
}
header.top .cs-about-datasources-guides a[data-cs-guide="pollen"]::before { width: 1.4rem; height: 1.4rem; }
.about-subnav-guides a[data-cs-guide="light"]::before,
.cs-about-datasources-guides a[data-cs-guide="light"]::before,
.about-data-guides-list__link[data-cs-guide="light"]::before {
background-image: url('/assets/img/guide-icon-light.svg');
background-color: transparent;
border-radius: 0;
width: 1.2rem;
height: 1.2rem;
box-shadow: none;
filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.45));
}
header.top .cs-about-datasources-guides a[data-cs-guide="light"]::before { width: 1.4rem; height: 1.4rem; }
.about-subnav-guides a[data-cs-guide="mosquito"]::before,
.cs-about-datasources-guides a[data-cs-guide="mosquito"]::before,
.about-data-guides-list__link[data-cs-guide="mosquito"]::before {
background-image: url('/assets/img/guide-icon-mosquito.svg');
background-color: transparent;
border-radius: 0;
width: 1.2rem;
height: 1.2rem;
box-shadow: none;
filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.45));
}
header.top .cs-about-datasources-guides a[data-cs-guide="mosquito"]::before { width: 1.4rem; height: 1.4rem; }
/* Natural hazards guide (NZOI tier). */
.about-subnav-guides a[data-cs-guide="natural-hazards"]::before,
.cs-about-datasources-guides a[data-cs-guide="natural-hazards"]::before,
.about-data-guides-list__link[data-cs-guide="natural-hazards"]::before {
background-image: url('/assets/img/guide-icon-natural-hazards.svg');
background-color: transparent;
border-radius: 0;
width: 1.2rem;
height: 1.2rem;
box-shadow: none;
filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.45));
}
header.top .cs-about-datasources-guides a[data-cs-guide="natural-hazards"]::before { width: 1.4rem; height: 1.4rem; }
/* HVT: same asset as layers panel; gold glow for dark header background. */
.about-subnav-guides a[data-cs-guide="hvt"]::before,
.cs-about-datasources-guides a[data-cs-guide="hvt"]::before,
.about-data-guides-list__link[data-cs-guide="hvt"]::before {
background-image: url('/assets/img/icon-hvt.svg');
background-color: transparent;
border-radius: 0;
box-shadow: 0 0 2px rgba(234, 179, 8, 0.45);
filter: drop-shadow(0 0 2px rgba(15, 10, 0, 0.6))
drop-shadow(0 0 4px rgba(250, 204, 21, 0.7))
drop-shadow(0 0 8px rgba(234, 179, 8, 0.35));
}
header.top .cs-about-datasources-guides a[data-cs-guide="hvt"]::before { width: 1.4rem; height: 1.4rem; }
.about-subnav-guides a[data-cs-guide="spatial-layers"]::before,
.cs-about-datasources-guides a[data-cs-guide="spatial-layers"]::before,
.about-data-guides-list__link[data-cs-guide="spatial-layers"]::before {
background-image: url('/assets/img/guide-icon-spatial-layers.svg');
background-color: transparent;
border-radius: 0;
width: 1.2rem;
height: 1.2rem;
box-shadow: none;
filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.45));
}
header.top .cs-about-datasources-guides a[data-cs-guide="spatial-layers"]::before { width: 1.4rem; height: 1.4rem; }
/* POI data-guide links: inline disc glyphs replace legacy ::before sprites for wind/nuclear/coal/telecom/hvt */
.cs-about-guide-link--poi-disc[data-cs-guide]::before {
content: none !important;
display: none !important;
width: 0 !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
background: none !important;
box-shadow: none !important;
filter: none !important;
}
.cs-about-guide-poi-glyph {
display: inline-flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
}
.cs-about-guide-label {
min-width: 0;
}
.about-subnav-guides a.cs-about-guide-link--poi-disc {
gap: 0.4rem;
}
header.top .cs-about-datasources-guides a.cs-about-guide-link--poi-disc {
gap: 0.45rem;
}
/* Compact discs in About header mega + tiered subnav (~26px) */
.cs-poi-glyph-disc--about-nav {
width: 26px;
height: 26px;
border-width: 2px;
}
.cs-poi-glyph-disc--about-nav .cs-layers-poi-glyph {
width: 17px;
height: 17px;
}
.cs-poi-glyph-disc--about-nav.cs-poi-glyph-disc--nuclear .cs-layers-poi-glyph {
width: 20px;
height: 20px;
}
.cs-poi-glyph-disc--about-nav.cs-poi-glyph-disc--hvt .cs-layers-poi-glyph,
.cs-poi-glyph-disc--about-nav.cs-poi-glyph-disc--hvt .cs-poi-map-icon--hvt-bolt {
width: 19px;
height: 19px;
}
.about-data-guides-list {
margin: var(--space-3) 0 0 0;
padding-left: 1.25rem;
color: var(--fg-1);
}
.about-data-guides-list li { margin: 0.4rem 0; }
.about-data-guides-list a { color: var(--aurora-violet); text-decoration: underline; }
/* Data sources page: tiered guide list (same order and glyphs as About mega-menu). */
.about-data-guides-tiered {
display: flex;
flex-direction: column;
gap: var(--space-4);
margin-top: var(--space-3);
}
.about-data-guides-tier__title {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(233, 238, 249, 0.55);
margin: 0 0 0.5rem 0;
line-height: 1.3;
}
.about-data-guides-list--block {
list-style: none;
margin: 0;
padding: 0;
}
.about-data-guides-list--block li { margin: 0.35rem 0; }
.about-data-guides-tier--card .about-guide-item {
width: 100%;
}
.about-data-guides-tier--card .about-data-guides-list__link[data-cs-guide] {
width: 100%;
box-sizing: border-box;
justify-content: space-between;
gap: 0.5rem;
}
.about-data-guides-list__link {
color: var(--aurora-violet);
text-decoration: underline;
}
/* About data-sources: spatial lens + tier cards */
.about-hero--data-src .lead { max-width: 42rem; }
.about-spatial-lens__lead {
margin-top: 0.35rem;
color: var(--fg-1);
line-height: 1.65;
max-width: 48rem;
}
.about-spatial-lens__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
gap: var(--space-4);
margin-top: var(--space-4);
}
.about-spatial-lens__card {
position: relative;
padding: var(--space-5);
border-radius: var(--radius-md, 14px);
border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.09));
background: linear-gradient(
155deg,
rgba(124, 92, 255, 0.09) 0%,
rgba(10, 13, 26, 0.92) 70%
);
box-shadow: 0 14px 48px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.about-spatial-lens__card--nzoi {
background: linear-gradient(
155deg,
rgba(56, 189, 172, 0.1) 0%,
rgba(10, 13, 26, 0.92) 70%
);
}
.about-spatial-lens__card--zoi {
background: linear-gradient(
155deg,
rgba(244, 176, 96, 0.1) 0%,
rgba(10, 13, 26, 0.92) 70%
);
}
.about-spatial-lens__tag {
display: inline-block;
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.12em;
color: var(--aurora-violet);
margin-bottom: var(--space-3);
}
.about-spatial-lens__card--nzoi .about-spatial-lens__tag { color: #5eead4; }
.about-spatial-lens__card--zoi .about-spatial-lens__tag { color: #fbbf77; }
.about-spatial-lens__card-title {
margin: 0 0 var(--space-2);
font-size: 1rem;
font-family: var(--font-ui);
color: var(--fg-0);
}
.about-spatial-lens__card p {
margin: 0;
font-size: 0.92rem;
color: var(--fg-1);
line-height: 1.55;
}
.about-foundation-strip {
padding: var(--space-4) var(--space-5);
border-radius: var(--radius-md, 14px);
border: 1px dashed rgba(124, 92, 255, 0.35);
background: rgba(124, 92, 255, 0.05);
}
.about-foundation-strip__title {
margin: 0 0 var(--space-3);
font-size: 1rem;
font-family: var(--font-ui);
color: var(--fg-0);
}
.about-foundation-strip__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: var(--space-3) var(--space-6);
align-items: baseline;
}
.about-foundation-strip__item {
display: inline-flex;
flex-wrap: nowrap;
align-items: center;
gap: 0.35rem 0.65rem;
font-size: 0.9rem;
max-width: 100%;
}
.about-foundation-strip__item .about-kpi-pill {
flex-shrink: 0;
margin-left: auto;
}
.about-foundation-strip__link {
color: var(--aurora-violet);
font-weight: 600;
text-decoration: none;
}
.about-foundation-strip__link:hover { text-decoration: underline; }
.about-foundation-strip__lic {
font-size: 0.78rem;
color: var(--fg-2);
}
.about-kpi-pill {
display: inline-block;
padding: 0.1rem 0.45rem;
border-radius: 999px;
font-size: 0.72rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
white-space: nowrap;
background: rgba(0, 255, 178, 0.12);
color: #a7f5de;
border: 1px solid rgba(0, 255, 178, 0.25);
}
.about-data-guides-tiered--revamp {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
gap: var(--space-4);
margin-top: var(--space-4);
}
.about-data-guides-tier--card {
padding: var(--space-4) var(--space-5);
border-radius: var(--radius-md, 14px);
border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.09));
background: var(--bg-1, rgba(255, 255, 255, 0.02));
}
.about-data-guides-tier__head {
margin-bottom: var(--space-3);
}
.about-data-guides-tier--card .about-data-guides-tier__title {
font-size: 0.85rem;
letter-spacing: 0.06em;
color: var(--fg-0);
}
.about-data-guides-tier__blurb {
margin: var(--space-2) 0 0;
font-size: 0.82rem;
line-height: 1.45;
color: var(--fg-2);
}
.about-guide-kpi {
display: inline-block;
flex-shrink: 0;
margin-left: auto;
padding: 0.08rem 0.4rem;
border-radius: 6px;
font-size: 0.72rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
white-space: nowrap;
text-align: right;
color: var(--fg-0);
background: rgba(124, 92, 255, 0.18);
border: 1px solid rgba(124, 92, 255, 0.35);
vertical-align: middle;
}
.about-guide-breakdown {
margin: 0.35rem 0 0 0.15rem;
padding: 0.35rem 0 0 0.65rem;
border-left: 2px solid rgba(124, 92, 255, 0.28);
}
.about-guide-breakdown__row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 0.65rem;
font-size: 0.78rem;
line-height: 1.45;
color: var(--fg-2);
}
.about-guide-breakdown__label {
flex: 1 1 auto;
min-width: 0;
}
.about-guide-breakdown .about-num {
flex-shrink: 0;
text-align: right;
font-weight: 600;
font-variant-numeric: tabular-nums;
white-space: nowrap;
color: var(--fg-1);
}
.about-wind-block {
padding-top: var(--space-2);
}
.about-sources--tiered .about-source-tier-block {
margin-top: var(--space-6);
}
.about-source-tier-block__head {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-3);
margin-bottom: var(--space-3);
}
.about-source-tier-block__tag {
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.14em;
padding: 0.2rem 0.55rem;
border-radius: 6px;
background: rgba(124, 92, 255, 0.2);
color: #e2d8ff;
}
.about-source-tier-block__head h3 {
margin: 0;
font-size: 1.15rem;
font-family: var(--font-ui);
color: var(--fg-0);
}
.about-source-cards {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: var(--space-3);
grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
}
.about-source-cards__item {
display: flex;
align-items: flex-start;
gap: var(--space-3);
padding: var(--space-4);
background: var(--bg-1);
border: 1px solid var(--border);
border-radius: var(--radius);
min-height: 100%;
}
.about-source-cards__bullet {
flex: 0 0 auto;
width: 1.15rem;
height: 1.15rem;
margin-top: 0.2rem;
border-radius: 50%;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}
.about-source-cards__bullet--svg {
border-radius: 4px;
background: transparent;
box-shadow: none;
width: 1.35rem;
height: 1.35rem;
display: flex;
align-items: center;
justify-content: center;
}
.about-source-cards__bullet--svg img {
width: 1.2rem;
height: 1.2rem;
display: block;
opacity: 0.92;
}
.about-source-cards__title-row {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 0.35rem 0.65rem;
justify-content: space-between;
}
.about-source-cards__title-row > a {
flex: 1 1 auto;
min-width: 0;
}
.about-source-cards__title-row .about-kpi-pill {
flex-shrink: 0;
}
.about-source-cards__body {
flex: 1 1 auto;
min-width: 0;
}
.about-source-cards__body a { color: var(--fg-0); text-decoration: none; }
.about-source-cards__body a:hover { text-decoration: underline; }
.about-subnav {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 0.75rem;
margin-bottom: var(--space-5);
padding-bottom: var(--space-4);
border-bottom: 1px solid var(--border);
}
.about-subnav a {
font-size: 0.9rem;
color: var(--fg-1);
text-decoration: none;
padding: 0.35rem 0.65rem;
border-radius: var(--radius);
border: 1px solid transparent;
}
.about-subnav a:hover { color: var(--fg-0); background: rgba(124, 92, 255, 0.1); }
.about-subnav a.is-active {
color: var(--accent-0);
border-color: rgba(123, 94, 167, 0.4);
background: rgba(124, 92, 255, 0.12);
}
.cs-lang-switch { position: relative; }
.cs-lang-summary {
list-style: none;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: var(--radius);
border: 1px solid var(--border);
background: rgba(10, 13, 26, 0.75);
transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.cs-lang-summary::-webkit-details-marker { display: none; }
.cs-lang-summary:hover { border-color: rgba(123, 94, 167, 0.45); background: rgba(124, 92, 255, 0.15); }
.cs-lang-menu {
position: absolute;
right: 0;
top: calc(100% + 8px);
min-width: 12rem;
margin: 0;
padding: var(--space-2);
list-style: none;
background: var(--bg-2);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow-2);
z-index: 30;
}
.cs-lang-item {
display: flex;
align-items: center;
gap: 0.55rem;
padding: 0.45rem 0.6rem;
border-radius: var(--radius);
color: var(--fg-1);
text-decoration: none;
font-size: 0.9rem;
}
.cs-lang-item:hover { background: rgba(124, 92, 255, 0.12); color: var(--fg-0); }
.cs-lang-item[aria-current="true"] { background: rgba(0, 255, 178, 0.08); color: var(--aurora-green); }
.cs-lang-flag { font-size: 1.35rem; line-height: 1; }
.auth-page-layout {
min-height: 100vh;
display: flex;
flex-direction: column;
background:
radial-gradient(40% 40% at 20% 20%, rgba(123, 94, 167, 0.22), transparent 70%),
radial-gradient(50% 50% at 80% 80%, rgba(0, 255, 178, 0.10), transparent 70%),
radial-gradient(35% 35% at 60% 15%, rgba(88, 232, 255, 0.08), transparent 70%),
var(--bg-0);
}
.auth-page-layout .auth-fill {
flex: 1;
display: grid;
place-items: center;
padding: var(--space-6);
}
.account-subnav {
display: flex;
flex-wrap: wrap;
gap: var(--space-4);
padding: var(--space-2) var(--space-6);
border-bottom: 1px solid var(--border);
background: rgba(13, 17, 23, 0.55);
font-size: 0.88rem;
}
.account-subnav a { color: var(--fg-1); }
.account-subnav a:hover { color: var(--fg-0); }
.account-subnav a[aria-current="page"] { color: var(--aurora-green); font-weight: 600; }
main.stage {
flex: 1;
min-height: 0;
position: relative;
display: flex;
flex-direction: column;
}
@media (max-width: 768px) {
main.stage {
min-height: min(70dvh, 560px);
}
/* While the 2D map is open, lock the document scrollport. Otherwise
* panning the map on iOS/Android can chain to the page ("rubber
* band") and the sticky header scrolls away with the viewport. */
html:has(#map.is-active),
body:has(#map.is-active) {
height: 100%;
max-height: 100dvh;
overflow: hidden;
overscroll-behavior: none;
}
.app-shell:has(#map.is-active) {
min-height: 100dvh;
height: 100dvh;
max-height: 100dvh;
overflow: hidden;
}
main.stage:has(#map.is-active) {
min-height: 0;
flex: 1 1 auto;
}
}
/* --------------------------------------------------------------- */
/* Globe / Map container */
/* --------------------------------------------------------------- */
#stage-canvas {
position: relative;
width: 100%;
flex: 1 1 auto;
min-height: 0;
background: radial-gradient(60% 60% at 50% 30%, rgba(123, 94, 167, 0.22), transparent 70%),
radial-gradient(50% 50% at 70% 80%, rgba(88, 232, 255, 0.10), transparent 70%),
radial-gradient(45% 45% at 30% 85%, rgba(0, 255, 178, 0.08), transparent 70%),
var(--bg-0);
}
#globe { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity var(--dur-3) var(--ease); }
#map { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; transition: opacity var(--dur-3) var(--ease); }
#map.is-active { opacity: 1; pointer-events: auto; z-index: 2; }
#globe.is-hidden { opacity: 0; pointer-events: none; }
/* Dim overlay under FAB dialogs (layers, search): above map, below #cs-stage-fabs (z-modal-app). */
#cs-stage-fab-backdrop {
position: absolute;
inset: 0;
z-index: calc(var(--z-modal-app) - 10);
margin: 0;
padding: 0;
border: 0;
background: rgba(4, 8, 20, 0.72);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
pointer-events: auto;
touch-action: none;
-webkit-tap-highlight-color: transparent;
cursor: pointer;
}
#cs-stage-fab-backdrop[hidden] {
display: none !important;
}
/* --------------------------------------------------------------- */
/* Leaflet + markercluster overrides (Aurora palette) */
/* --------------------------------------------------------------- */
.cs-popup { font-family: inherit; color: var(--fg-0); min-width: 180px; }
.cs-popup strong { color: var(--fg-0); font-weight: 600; }
.cs-popup-row { margin-top: 4px; font-size: 0.85rem; color: var(--fg-muted); }
.cs-popup-row--regulatory { margin-top: 8px; padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, 0.08); color: var(--fg-muted); line-height: 1.35; }
.cs-popup-row--regulatory-hint { margin-top: 4px; color: var(--fg-muted); line-height: 1.35; font-style: italic; opacity: 0.95; }
.cs-popup-row--sensitivity { margin-top: 2px; margin-bottom: 6px; color: var(--fg-muted); line-height: 1.4; }
body.cs-leaflet-popup-open .leaflet-popup.cs-poi-detail-popup .cs-popup-row--sensitivity {
color: rgba(233, 238, 249, 0.78);
}
/* POI Leaflet popup: sensitivity verdict (aligned with exposure chip vocabulary). */
.cs-poi-popup-verdict {
margin: 0 0 10px 0;
padding: 8px 12px;
border-radius: 8px;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.06em;
text-align: center;
border: 2px solid transparent;
}
.cs-poi-popup-verdict--clear {
color: #0f5132;
border-color: #2ea043;
background: rgba(46, 160, 67, 0.14);
}
.cs-theme-light .cs-poi-popup-verdict--clear {
color: #116329;
background: rgba(46, 160, 67, 0.12);
}
.cs-poi-popup-verdict--not-clear {
color: #9e1b1b;
border-color: #f85149;
background: rgba(248, 81, 73, 0.12);
}
.cs-theme-light .cs-poi-popup-verdict--not-clear {
color: #a40e26;
background: rgba(248, 81, 73, 0.1);
}
.cs-popup-row .mono { font-family: ui-monospace, "SF Mono", monospace; font-size: 0.8rem; }
/* Invisible marker used for aggregated-bin points. The visible
* circle comes from the parent markercluster badge (see below);
* individual bins are never rendered on their own because the
* cluster group's zoom-aware `maxClusterRadius` always merges
* them into a single pastel circle per country / région /
* département, matching the colour-coded style the user asked
* for ("garder les cercles avec les couleurs comme sur le 2e
* screenshot"). */
.cs-turbine-bin {
background: transparent;
border: 0;
width: 1px !important;
height: 1px !important;
opacity: 0;
pointer-events: none;
}
/* Turbine cluster badge. Inherits the classic markercluster green /
* yellow / orange palette via .marker-cluster-{small,medium,large},
* then adds an explicit `huge` tier (hot pink, 1 000+ turbines) that
* the stock MarkerCluster.Default.css does NOT ship. Without these
* rules the 1 000+ clusters rendered as bare white numbers with no
* background disc (bug report: "je vois des 18k blanc sans le
* rond"). Mirrors the aurora-alert palette used by the pollen /
* air popups at level 5, so density reads consistently across the
* product. */
.cs-turbine-cluster {
font-variant-numeric: tabular-nums;
/* Always show a disc, even if a future markercluster CSS drop
* changes the ::before / inner-div pattern. Defensive so the
* bare-number regression cannot reappear silently. */
background-clip: padding-box;
}
.cs-turbine-cluster > div {
font-weight: 700;
}
.cs-turbine-cluster > div > span {
letter-spacing: 0;
}
/* ≥ 1 000 turbines in the same cluster. Pink outer halo + deeper
* fuchsia core, white numbers. Larger iconSize (52x52) is set from
* JS so the label never touches the disc edge. */
.marker-cluster-huge {
background-color: rgba(255, 94, 156, 0.28);
}
.marker-cluster-huge div {
width: 44px;
height: 44px;
margin-left: 4px;
margin-top: 4px;
text-align: center;
border-radius: 22px;
background-color: rgba(255, 94, 156, 0.85);
color: #fff;
}
.marker-cluster-huge div span {
line-height: 44px;
}
/* The default markercluster's `large` disc background (orange) is
* translucent; at low zoom with a dark satellite basemap it can
* look washed out. Bump the alpha so the 100-999 bucket reads as
* "high density" consistently with the new huge tier. */
.marker-cluster-large { background-color: rgba(253, 156, 115, 0.28); }
.marker-cluster-large div { background-color: rgba(241, 128, 23, 0.9); color: #fff; }
/* --------------------------------------------------------------- */
/* Pollen / air popup (detail LOD) */
/* --------------------------------------------------------------- */
.cs-pollen-popup {
min-width: 240px;
background: rgba(10, 14, 26, 0.98);
color: #e9eef9;
border-radius: 12px;
padding: 2px 0 0;
border: 1px solid rgba(255, 255, 255, 0.12);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
}
.cs-pollen-popup__title {
font-size: 0.72rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(233, 238, 249, 0.82);
margin-bottom: 6px;
}
.cs-pollen-popup__header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
}
.cs-pollen-popup__headline { display: flex; flex-direction: column; line-height: 1.15; }
.cs-pollen-popup__headline strong { font-size: 1rem; color: #f2f6ff; font-weight: 700; }
.cs-pollen-popup__taxon { font-size: 0.82rem; color: rgba(233, 238, 249, 0.78); }
.cs-pollen-popup__list {
list-style: none;
margin: 0;
padding: 0;
border-top: 1px solid var(--border, rgba(255, 255, 255, 0.08));
}
.cs-pollen-row {
display: grid;
grid-template-columns: 1fr auto;
grid-template-rows: auto auto;
grid-column-gap: 8px;
align-items: center;
padding: 6px 0;
border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.06));
font-size: 0.84rem;
}
.cs-pollen-row:last-child { border-bottom: none; }
.cs-pollen-row__taxon { color: #f2f6ff; font-weight: 600; }
.cs-pollen-row__val { color: rgba(233, 238, 249, 0.88); font-variant-numeric: tabular-nums; }
.cs-pollen-row__val small { font-size: 0.7rem; color: rgba(233, 238, 249, 0.65); }
.cs-pollen-row__bar {
grid-column: 1 / span 2;
position: relative;
height: 4px;
margin-top: 3px;
/* Track + fill live in .cs-pollen-row__bar-track so a threshold tick
* can sit in the same row without being clipped. */
background: none;
overflow: visible;
}
.cs-pollen-row__bar-track {
display: block;
width: 100%;
height: 4px;
border-radius: 3px;
background: var(--bg-1, rgba(255, 255, 255, 0.05));
overflow: hidden;
}
.cs-pollen-row__bar-track > i {
display: block;
height: 100%;
border-radius: inherit;
transition: width 0.2s ease;
}
/* Legacy popup markup (only as direct child) — keep for safety */
.cs-pollen-row__bar:not(:has(.cs-pollen-row__bar-track)) {
border-radius: 3px;
background: var(--bg-1, rgba(255, 255, 255, 0.05));
overflow: hidden;
}
.cs-pollen-row__bar:not(:has(.cs-pollen-row__bar-track)) > i {
display: block;
height: 100%;
border-radius: inherit;
transition: width 0.2s ease;
}
.cs-sens-threshold-tick {
position: absolute;
top: 50%;
z-index: 2;
width: 2px;
height: 10px;
margin-top: -5px;
background: #ff3b3b;
border-radius: 1px;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
transform: translateX(-50%);
pointer-events: auto;
}
/* Shared with air header rail (European AQI vs user AQI) */
.cs-air-popup__aqi-rail {
display: block;
margin: 0 0 6px;
padding-bottom: 6px;
border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.06));
}
.cs-air-popup__aqi-rail .cs-pollen-row__bar {
margin-top: 4px;
}
.cs-air-popup__aqi-rail-caption {
display: block;
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: rgba(233, 238, 249, 0.55);
margin-bottom: 4px;
}
.cs-pollen-popup__footer {
margin-top: 8px;
font-size: 0.78rem;
color: rgba(233, 238, 249, 0.75);
display: flex;
gap: 8px;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
.cs-pollen-popup__link {
color: #c4b5ff;
text-decoration: none;
font-weight: 600;
}
.cs-pollen-popup__link:hover { text-decoration: underline; color: #dcd4ff; }
/* Leaflet: pollen detail popup wrapper (className on bindPopup) */
.leaflet-popup.cs-pollen-leaflet-popup .leaflet-popup-content-wrapper,
.leaflet-container .cs-pollen-leaflet-popup .leaflet-popup-content-wrapper {
background: rgba(10, 14, 26, 0.98);
color: #e9eef9;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 12px;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
}
.leaflet-popup.cs-pollen-leaflet-popup .leaflet-popup-tip {
background: rgba(10, 14, 26, 0.98);
border: 1px solid rgba(255, 255, 255, 0.12);
box-shadow: none;
}
.leaflet-popup.cs-pollen-leaflet-popup .leaflet-popup-content {
margin: 12px 14px;
}
.leaflet-popup.cs-composite-leaflet-popup .leaflet-popup-content-wrapper {
width: min(96vw, 1400px);
max-width: min(96vw, 1400px);
max-height: min(90dvh, calc(100dvh - 32px));
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
box-sizing: border-box;
}
.leaflet-popup.cs-composite-leaflet-popup .leaflet-popup-content {
min-width: 0;
max-width: 100%;
width: auto;
margin: 12px 0;
padding: 0 14px;
box-sizing: border-box;
}
.cs-composite-popup .cs-composite-summary,
.cs-composite-popup .cs-composite-worst {
margin: 0 0 8px;
font-size: 0.82rem;
line-height: 1.35;
color: rgba(233, 238, 249, 0.82);
}
.cs-composite-popup .cs-composite-summary--lead {
font-size: 0.88rem;
line-height: 1.48;
margin: 0 0 12px;
}
.cs-light-popup--placeholder .cs-pollen-popup__intro {
margin: 6px 0 0;
font-size: 0.84rem;
line-height: 1.4;
color: rgba(233, 238, 249, 0.78);
}
.cs-composite-popup .cs-composite-block {
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
padding: 8px 12px 10px;
background: rgba(255, 255, 255, 0.02);
min-width: 0;
}
/* Air / pollen metric rows: keep value column inside the card (grid minmax vs long µg/m³ lines). */
.cs-composite-block .cs-pollen-row {
grid-template-columns: minmax(0, 1fr) auto;
column-gap: 10px;
}
.cs-composite-block .cs-pollen-row__taxon {
min-width: 0;
overflow-wrap: anywhere;
}
.cs-composite-block .cs-pollen-row__val {
text-align: right;
white-space: nowrap;
}
.cs-composite-block__fresh {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 6px 10px;
margin: 0 0 8px;
padding-bottom: 6px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
font-size: 0.72rem;
line-height: 1.35;
}
.cs-composite-block__fresh-title {
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(233, 238, 249, 0.55);
}
.cs-composite-block__fresh-value {
color: rgba(233, 238, 249, 0.88);
font-variant-numeric: tabular-nums;
}
/* Nested popups: drop outer title margin when stacked inside a composite block. */
.cs-composite-block .cs-pollen-popup > .cs-pollen-popup__title {
margin-top: 0;
}
.cs-composite-block > .cs-popup {
margin: 0;
max-width: 100%;
}
/* Composite module carousel: horizontal snap for all viewports when tabs mode is on
* (desktop used to use a multi-column grid that clipped the fourth module). */
.cs-composite-popup {
position: relative;
}
/* Composite popup uses custom close only (.cs-composite-fs-close); Leaflet default is disabled in bindPopup. */
.leaflet-popup.cs-composite-leaflet-popup .leaflet-popup-close-button {
display: none !important;
}
.cs-composite-fs-close {
position: absolute;
top: max(4px, env(safe-area-inset-top, 0px));
right: max(4px, env(safe-area-inset-right, 0px));
z-index: 6;
width: 40px;
height: 40px;
margin: 0;
padding: 0;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 10px;
background: rgba(18, 22, 34, 0.92);
color: #e9eef9;
font-size: 1.5rem;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
}
.cs-composite-fs-close:hover {
background: rgba(30, 36, 52, 0.98);
border-color: rgba(255, 255, 255, 0.22);
}
/* Close control embedded in carousel toolbar: align with nav padding, not card corner. */
.cs-composite-carousel__nav .cs-composite-fs-close {
position: static;
top: auto;
right: auto;
flex: 0 0 auto;
width: 40px;
height: 40px;
margin: 0 0 0 6px;
}
/* Row above carousel: right-aligned × (not position:absolute over .cs-composite-carousel__nav). */
.cs-composite-fs-topbar {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
flex-shrink: 0;
box-sizing: border-box;
min-height: 44px;
padding: 2px 0 6px;
}
.cs-composite-popup[data-composite-carousel-tabs="1"] .cs-composite-fs-topbar .cs-composite-fs-close {
position: static;
top: auto;
right: auto;
}
.cs-composite-popup[data-composite-carousel-tabs="1"] {
display: flex;
flex-direction: column;
gap: 6px;
}
.cs-composite-popup .cs-pollen-popup__title {
padding-right: 48px;
}
.cs-composite-carousel {
display: flex;
flex-direction: column;
gap: 10px;
min-height: 0;
}
.cs-composite-carousel__nav {
display: none;
flex-shrink: 0;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 10px 12px;
box-sizing: border-box;
}
.cs-composite-popup[data-composite-carousel-tabs="1"] .cs-composite-carousel__nav {
display: flex;
}
.cs-composite-carousel--single .cs-composite-carousel__nav {
display: flex !important;
justify-content: flex-end;
padding: 10px 12px;
}
.cs-composite-carousel--single .cs-composite-carousel__prev,
.cs-composite-carousel--single .cs-composite-carousel__next,
.cs-composite-carousel--single .cs-composite-carousel__counter {
display: none !important;
}
.cs-composite-carousel__prev,
.cs-composite-carousel__next {
flex: 0 0 auto;
min-width: 44px;
min-height: 44px;
padding: 0 12px;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.06);
color: #e9eef9;
font-size: 1.35rem;
line-height: 1;
cursor: pointer;
box-sizing: border-box;
}
.cs-composite-carousel__prev:disabled,
.cs-composite-carousel__next:disabled {
opacity: 0.35;
cursor: default;
}
.cs-composite-carousel__counter {
font-size: 0.78rem;
font-variant-numeric: tabular-nums;
color: rgba(233, 238, 249, 0.72);
flex: 1;
min-width: 0;
text-align: center;
}
.cs-composite-popup[data-composite-carousel-tabs="1"] .cs-composite-carousel__track {
display: flex;
flex-flow: row nowrap;
gap: 0;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
touch-action: pan-x pan-y;
align-items: stretch;
min-height: 0;
width: 100%;
box-sizing: border-box;
}
.cs-composite-popup[data-composite-carousel-tabs="1"] .cs-composite-carousel__slide {
display: flex;
flex-direction: column;
flex: 0 0 100%;
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
scroll-snap-align: start;
scroll-snap-stop: always;
overflow: hidden;
min-height: 260px;
}
.cs-composite-popup[data-composite-carousel-tabs="1"] .cs-composite-carousel__slide .cs-composite-block {
flex: 1 1 auto;
min-height: 0;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
touch-action: pan-y;
}
.cs-composite-carousel__slide {
min-width: 0;
}
.cs-composite-carousel__slide-label {
display: none;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(233, 238, 249, 0.55);
margin: 0 0 8px;
}
.cs-composite-popup[data-composite-carousel-tabs="1"] .cs-composite-carousel__slide-label {
display: block;
}
.cs-composite-slide-clearspot {
font-weight: 700;
font-variant-numeric: tabular-nums;
letter-spacing: 0.04em;
text-transform: none;
}
.cs-composite-slide-clearspot--clear {
color: #4ade80;
}
.cs-composite-slide-clearspot--moderate {
color: #fb923c;
}
.cs-composite-slide-clearspot--critical {
color: #fb7185;
}
.cs-composite-summary--lead .cs-composite-verdict {
font-weight: 800;
letter-spacing: 0.04em;
}
.cs-composite-verdict--clear {
color: #4ade80;
}
.cs-composite-verdict--moderate {
color: #fb923c;
}
.cs-composite-verdict--not-clear {
color: #fb7185;
}
.cs-composite-summary--clearspot {
font-size: 0.88rem;
line-height: 1.45;
margin: 0.35rem 0 0;
color: rgba(233, 238, 249, 0.88);
}
.cs-composite-summary--clearspot .cs-composite-clearspot-strong {
font-variant-numeric: tabular-nums;
margin: 0 0.12em;
}
.cs-composite-summary--clearspot-clear .cs-composite-clearspot-strong {
color: #4ade80;
}
.cs-composite-summary--clearspot-moderate .cs-composite-clearspot-strong {
color: #fb923c;
}
.cs-composite-summary--clearspot-critical .cs-composite-clearspot-strong {
color: #fb7185;
}
/* Desktop composite: constrain carousel height so inner modules scroll instead of clipping. */
body.cs-leaflet-popup-open .leaflet-popup.cs-composite-leaflet-popup .leaflet-popup-content-wrapper:has(.cs-composite-popup[data-composite-carousel-tabs="1"]) {
overflow: hidden !important;
display: flex;
flex-direction: column;
}
body.cs-leaflet-popup-open .leaflet-popup.cs-composite-leaflet-popup .leaflet-popup-content:has(.cs-composite-popup[data-composite-carousel-tabs="1"]) {
flex: 1;
min-height: 0;
overflow: hidden;
display: flex;
flex-direction: column;
}
body.cs-leaflet-popup-open .leaflet-popup.cs-composite-leaflet-popup .cs-composite-popup[data-composite-carousel-tabs="1"] {
flex: 1;
min-height: 0;
overflow: hidden;
}
body.cs-leaflet-popup-open .leaflet-popup.cs-composite-leaflet-popup .cs-composite-popup[data-composite-carousel-tabs="1"] .cs-composite-carousel {
flex: 1;
min-height: 0;
overflow: hidden;
}
body.cs-leaflet-popup-open .leaflet-popup.cs-composite-leaflet-popup .cs-composite-popup[data-composite-carousel-tabs="1"] .cs-composite-carousel__track {
flex: 1;
min-height: 0;
}
@media (min-width: 901px) {
body.cs-leaflet-popup-open .leaflet-popup.cs-composite-leaflet-popup .cs-composite-popup[data-composite-carousel-tabs="1"] .cs-composite-carousel__track {
max-height: min(58dvh, 560px);
}
}
/* Combined-overlay popup: inline sensitivity (air / pollen / Bortle). */
.cs-composite-sens {
margin: 0 0 var(--space-4);
padding: var(--space-3) var(--space-4);
border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
border-radius: var(--radius);
background: rgba(255, 255, 255, 0.025);
box-sizing: border-box;
}
.cs-composite-sens-head {
font-family: var(--font-ui);
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--fg-muted);
font-weight: 700;
margin: 0 0 var(--space-2);
}
.cs-composite-sens-lead {
font-size: 0.78rem;
color: rgba(233, 238, 249, 0.78);
line-height: 1.42;
margin: 0 0 var(--space-3);
}
.cs-composite-sens .cs-sens-row {
border-top: 1px solid rgba(255, 255, 255, 0.06);
padding-top: var(--space-3);
margin-top: var(--space-3);
}
.cs-composite-sens .cs-sens-row:first-of-type {
border-top: 0;
padding-top: 0;
margin-top: 0;
}
/* Force the whole popup pane above any custom label / tooltip pane.
* Our JS keeps the labelsPane at 650, but this class-level override
* guarantees the popup stays on top even if a future pane borrows
* Leaflet's default 700. Sticky site header uses z-index 900, so popups
* must sit above it or the modal is unreadable. */
.leaflet-pane.leaflet-popup-pane { z-index: 920 !important; }
/* Modal-style hex / noise / turbine popups: center in the viewport, hide the
* map pin tail, and dim the map so clicks do not hit another feature.
* ClearSpot hoists `.leaflet-popup-pane` to `#map.leaflet-container` in map.js
* so `position: fixed` uses the viewport (Leaflet keeps `popupPane` inside the
* transformed `mapPane` by default, which breaks vw/vh centre math). */
#map .cs-leaflet-modal-backdrop {
position: absolute;
inset: 0;
z-index: 905;
background: rgba(10, 14, 26, 0.52);
pointer-events: auto;
box-sizing: border-box;
touch-action: none;
}
/* Full viewport dim while a modal popup is open: `absolute` + `inset:0` only covers
* `#map`; fixed + vw/dvh covers chrome and stage so taps hit the backdrop, not the map. */
body.cs-leaflet-popup-open .leaflet-map-pane .cs-leaflet-modal-backdrop,
body.cs-leaflet-popup-open #map .cs-leaflet-modal-backdrop {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100vw !important;
max-width: 100dvw !important;
height: 100vh !important;
height: 100dvh !important;
max-height: 100lvh !important;
margin: 0 !important;
box-sizing: border-box !important;
z-index: 124900 !important;
pointer-events: auto !important;
background: rgba(10, 14, 26, 0.58);
touch-action: none;
}
/* Viewport units keep the card centred on the real screen. Percent-based
* fixed offsets can follow a transformed ancestor and appear clipped
* (e.g. 5G / POI popups stuck on the left edge). */
body.cs-leaflet-popup-open #map.leaflet-container .leaflet-popup {
position: fixed !important;
z-index: 125001 !important;
left: 50vw !important;
top: 50vh !important;
top: 50dvh !important;
right: auto !important;
bottom: auto !important;
/* Do not use `inset: auto` here: the shorthand resets `left`/`top` and breaks viewport centring. */
margin: 0 !important;
transform: translate(-50%, -50%) !important;
max-height: min(calc(100dvh - 32px), calc(100lvh - 32px), calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 16px));
max-width: min(calc(100vw - 24px), calc(100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px) - 16px));
display: flex;
flex-direction: column;
box-sizing: border-box;
}
/* POI markers (turbine, plants, telecom, HVT): readable card width while staying viewport-centred. */
body.cs-leaflet-popup-open .leaflet-popup.cs-poi-detail-popup {
max-width: min(94vw, 720px) !important;
}
body.cs-leaflet-popup-open .leaflet-popup.cs-poi-detail-popup .leaflet-popup-content-wrapper {
max-width: min(94vw, 720px) !important;
}
/* POI popups: larger type for on-map readability. */
body.cs-leaflet-popup-open .leaflet-popup.cs-poi-detail-popup .leaflet-popup-content,
body.cs-leaflet-popup-open .leaflet-popup.cs-poi-detail-popup .cs-popup,
body.cs-leaflet-popup-open .leaflet-popup.cs-poi-detail-popup .cs-hvt-popup {
font-size: 1rem;
line-height: 1.45;
}
body.cs-leaflet-popup-open .leaflet-popup.cs-poi-detail-popup .cs-popup-row {
font-size: 0.98rem;
}
body.cs-leaflet-popup-open .leaflet-popup.cs-poi-detail-popup .cs-pollen-popup__title {
font-size: 1.15rem;
font-weight: 600;
}
body.cs-leaflet-popup-open .leaflet-popup.cs-poi-detail-popup .cs-popup > strong {
font-size: 1.08rem;
}
body.cs-leaflet-popup-open .leaflet-popup.cs-poi-detail-popup .cs-poi-popup-verdict {
font-size: 0.88rem;
padding: 9px 14px;
}
body.cs-leaflet-popup-open .leaflet-popup.cs-poi-detail-popup a.cs-popup-tuto-link {
color: var(--accent-0, #7c5cff);
text-decoration: underline;
text-underline-offset: 2px;
font-weight: 600;
}
body.cs-leaflet-popup-open .leaflet-popup.cs-poi-detail-popup a.cs-popup-tuto-link:hover {
filter: brightness(1.1);
}
body.cs-leaflet-popup-open #map .leaflet-popup-content-wrapper {
max-height: min(calc(100dvh - 80px), calc(100lvh - 80px), calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 48px));
overflow: auto;
-webkit-overflow-scrolling: touch;
box-sizing: border-box;
}
/* Composite H3 modal + zone detail (air, pollen, mosquito, noise, hazards): wide card, viewport-centred. */
body.cs-leaflet-popup-open .leaflet-popup.cs-composite-leaflet-popup,
body.cs-leaflet-popup-open .leaflet-popup.cs-zone-detail-popup {
max-width: min(96vw, 1400px);
}
body.cs-leaflet-popup-open .leaflet-popup.cs-composite-leaflet-popup .leaflet-popup-content-wrapper,
body.cs-leaflet-popup-open .leaflet-popup.cs-zone-detail-popup .leaflet-popup-content-wrapper {
width: min(96vw, 1400px) !important;
max-width: min(96vw, 1400px) !important;
max-height: min(90dvh, calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 24px)) !important;
border-radius: 14px;
border: 1px solid rgba(255, 255, 255, 0.12);
box-shadow: 0 20px 70px rgba(0, 0, 0, 0.5);
background: rgba(10, 14, 26, 0.96);
}
body.cs-leaflet-popup-open .leaflet-popup.cs-composite-leaflet-popup .leaflet-popup-content,
body.cs-leaflet-popup-open .leaflet-popup.cs-zone-detail-popup .leaflet-popup-content {
min-width: 0 !important;
max-width: 100% !important;
width: auto !important;
margin: var(--space-3) 0 !important;
padding-left: var(--space-4) !important;
padding-right: var(--space-4) !important;
box-sizing: border-box;
}
/* Horizontal tabs: first slide already shows the combined title as slide-label. */
body.cs-leaflet-popup-open .leaflet-popup.cs-composite-leaflet-popup .cs-composite-popup[data-composite-carousel-tabs="1"] > .cs-pollen-popup__title {
display: none !important;
}
/* Wide screens: viewport units (not %) for left/top — percentage base can collapse to 0 under this
* fixed + translate(-50%,-50%) stack, so 50%/50% resolved to 0 and anchored the card to the viewport
* origin. Match generic modal popups: 50vw / 50dvh.
*/
@media (min-width: 901px) {
body.cs-leaflet-popup-open #map.leaflet-container .leaflet-popup.cs-composite-leaflet-popup,
body.cs-leaflet-popup-open #map.leaflet-container .leaflet-popup.cs-zone-detail-popup {
z-index: 125001 !important;
left: 50vw !important;
right: auto !important;
top: 50vh !important;
top: 50dvh !important;
bottom: auto !important;
margin: 0 !important;
transform: translate(-50%, -50%) !important;
width: min(96vw, 1400px) !important;
max-width: min(96vw, 1400px) !important;
max-height: min(92dvh, calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 24px), calc(100lvh - 24px)) !important;
}
}
body.cs-leaflet-popup-open #map .leaflet-popup-tip-container {
display: none !important;
}
/* While a modal popup is open, pull every map layer below both the dimming
* backdrop and the popup pane. Leaflet keeps tiles/vectors/markers as
* siblings inside .leaflet-map-pane; without this, SVG paths (user rings,
* heat circles) can composite above the card even when popup-pane z-index
* looks higher on paper.
* pointer-events:none on panes *and* descendants: SVG/canvas children can
* still receive clicks if only the parent pane is disabled (spec). */
body.cs-leaflet-popup-open .leaflet-map-pane > .leaflet-pane:not(.leaflet-popup-pane),
body.cs-leaflet-popup-open .leaflet-map-pane > .leaflet-pane:not(.leaflet-popup-pane) * {
pointer-events: none !important;
}
body.cs-leaflet-popup-open .leaflet-map-pane > .leaflet-pane:not(.leaflet-popup-pane) {
z-index: 1 !important;
}
body.cs-leaflet-popup-open .leaflet-map-pane .leaflet-overlay-pane svg,
body.cs-leaflet-popup-open .leaflet-map-pane .leaflet-marker-pane svg {
z-index: 0 !important;
}
body.cs-leaflet-popup-open .leaflet-pane.leaflet-popup-pane {
z-index: 125000 !important;
isolation: isolate;
/* Let clicks on empty pane area fall through to the dimming backdrop (closes popup). */
pointer-events: none !important;
}
body.cs-leaflet-popup-open .leaflet-pane.leaflet-popup-pane .leaflet-popup {
pointer-events: auto !important;
}
/* Default Leaflet control container (~1000) can still paint above a fixed
* composite popup in some stacks; force chrome under the popup pane + card.
* pointer-events:none so taps reach the dim backdrop (closes modal); nav is
* intentionally inactive while a modal card is open. */
body.cs-leaflet-popup-open #map.leaflet-container .leaflet-control-container {
z-index: 5 !important;
pointer-events: none !important;
}
/* Sibling of .leaflet-map-pane: Leaflet .leaflet-top defaults to z-index 1000; keep dock under the
* map subtree (see map.js pointer capture for outside-tap dismiss). */
body.cs-leaflet-popup-open #map.leaflet-container .leaflet-top,
body.cs-leaflet-popup-open #map.leaflet-container .leaflet-bottom {
z-index: 5 !important;
}
/* Sibling of .leaflet-map-pane: lowering .leaflet-control-container is not enough.
* Popup lives inside .leaflet-map-pane; without a higher z-index here, the control
* column (.leaflet-top z-index 1000 inside the container) still wins over the map
* subtree (see Leaflet 1.9 defaults). */
body.cs-leaflet-popup-open #map.leaflet-container .leaflet-map-pane {
z-index: 120000 !important;
}
/* Fullscreen composite: NDJSON H6 showed mapPaneZ 800 + control Z 500 but popupOpacity ~0.08
* mid-fade — the card is nearly invisible so map chrome looks painted on top. */
body.cs-map-composite-fs-open #map.leaflet-container .leaflet-control-container,
body.cs-map-composite-fs-open #cs-location-share-fab.cs-location-share-fab {
visibility: hidden !important;
pointer-events: none !important;
}
body.cs-leaflet-popup-open .leaflet-container .leaflet-popup-pane .leaflet-popup.cs-composite-leaflet-popup,
body.cs-leaflet-popup-open .leaflet-container .leaflet-popup-pane .leaflet-popup.cs-zone-detail-popup {
opacity: 1 !important;
}
body.cs-leaflet-popup-open .leaflet-container.leaflet-fade-anim .leaflet-popup-pane .leaflet-popup.cs-composite-leaflet-popup,
body.cs-leaflet-popup-open .leaflet-container.leaflet-fade-anim .leaflet-popup-pane .leaflet-popup.cs-zone-detail-popup {
transition: opacity 0s linear !important;
}
/* Narrow viewports: same viewport-centred shell as desktop (popup pane hoisted in map.js).
* Horizontal carousel + swipe stay; the card is no longer edge-pinned full-screen so it
* cannot drift when the map pane transforms. */
@media (max-width: 900px) {
body.cs-leaflet-popup-open #map.leaflet-container .leaflet-popup.cs-composite-leaflet-popup,
body.cs-leaflet-popup-open #map.leaflet-container .leaflet-popup.cs-zone-detail-popup {
z-index: 125001 !important;
left: 50vw !important;
right: auto !important;
top: 50dvh !important;
bottom: auto !important;
margin: 0 !important;
transform: translate(-50%, -50%) !important;
width: min(calc(100vw - 16px), 1400px) !important;
min-width: 0 !important;
max-width: min(calc(100vw - 16px), 1400px) !important;
max-height: min(88dvh, calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 24px), calc(100lvh - 24px)) !important;
min-height: 0 !important;
height: auto !important;
opacity: 1 !important;
visibility: visible !important;
transition: opacity 0s linear !important;
display: flex !important;
flex-direction: column !important;
box-sizing: border-box !important;
}
body.cs-leaflet-popup-open .leaflet-popup.cs-composite-leaflet-popup .leaflet-popup-content,
body.cs-leaflet-popup-open .leaflet-popup.cs-composite-leaflet-popup .cs-popup,
body.cs-leaflet-popup-open .leaflet-popup.cs-composite-leaflet-popup .cs-composite-popup,
body.cs-leaflet-popup-open .leaflet-popup.cs-zone-detail-popup .leaflet-popup-content,
body.cs-leaflet-popup-open .leaflet-popup.cs-zone-detail-popup .cs-popup {
min-width: 0 !important;
}
body.cs-leaflet-popup-open .leaflet-popup.cs-composite-leaflet-popup .leaflet-popup-content-wrapper,
body.cs-leaflet-popup-open .leaflet-popup.cs-zone-detail-popup .leaflet-popup-content-wrapper {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
max-height: min(82dvh, calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 32px)) !important;
height: auto !important;
min-height: 0 !important;
border-radius: 14px;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
display: flex;
flex-direction: column;
border: 1px solid rgba(255, 255, 255, 0.14);
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35) inset, 0 24px 80px rgba(0, 0, 0, 0.55);
background: rgba(10, 14, 26, 0.97);
}
body.cs-leaflet-popup-open .leaflet-popup.cs-composite-leaflet-popup .leaflet-popup-content,
body.cs-leaflet-popup-open .leaflet-popup.cs-zone-detail-popup .leaflet-popup-content {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
margin: 0;
padding: max(10px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px))
max(10px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
}
body.cs-leaflet-popup-open .leaflet-popup.cs-composite-leaflet-popup .leaflet-popup-content:has(.cs-composite-popup[data-composite-carousel-tabs="1"]) {
padding-top: max(6px, env(safe-area-inset-top, 0px));
padding-bottom: max(6px, env(safe-area-inset-bottom, 0px));
}
body.cs-leaflet-popup-open .leaflet-popup.cs-composite-leaflet-popup .cs-composite-popup {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
body.cs-leaflet-popup-open .leaflet-popup.cs-composite-leaflet-popup .cs-composite-popup > *:not(.cs-composite-carousel) {
flex-shrink: 0;
}
body.cs-leaflet-popup-open .leaflet-popup.cs-composite-leaflet-popup .cs-composite-carousel {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
body.cs-leaflet-popup-open .leaflet-popup.cs-composite-leaflet-popup .cs-composite-carousel__nav {
display: flex;
flex-shrink: 0;
padding-left: max(12px, env(safe-area-inset-left, 0px));
padding-right: max(12px, env(safe-area-inset-right, 0px));
}
body.cs-leaflet-popup-open .leaflet-popup.cs-composite-leaflet-popup .cs-composite-popup .cs-composite-carousel__track {
display: flex;
flex-wrap: nowrap;
gap: 0;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
touch-action: pan-x pan-y;
flex: 1;
min-height: 0;
min-width: 0;
width: 100%;
height: 100%;
align-items: stretch;
}
body.cs-leaflet-popup-open .leaflet-popup.cs-composite-leaflet-popup .cs-composite-carousel__slide {
display: flex;
flex-direction: column;
align-self: stretch;
flex: 0 0 100%;
width: 100%;
max-width: 100%;
height: 100%;
min-height: 0;
max-height: 100%;
box-sizing: border-box;
scroll-snap-align: start;
scroll-snap-stop: always;
overflow: hidden;
padding-right: 2px;
}
body.cs-leaflet-popup-open .leaflet-popup.cs-composite-leaflet-popup .cs-composite-carousel__slide .cs-composite-block {
flex: 1 1 auto;
min-height: 0;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
touch-action: pan-y;
}
body.cs-leaflet-popup-open .leaflet-popup.cs-composite-leaflet-popup .cs-composite-carousel__slide-label {
display: block;
flex-shrink: 0;
}
body.cs-leaflet-popup-open .leaflet-popup.cs-composite-leaflet-popup .cs-composite-carousel--single .cs-composite-carousel__nav {
display: none !important;
}
body.cs-leaflet-popup-open .leaflet-popup.cs-composite-leaflet-popup .cs-composite-popup[data-composite-carousel-tabs="1"] .cs-composite-carousel__track {
max-height: min(52dvh, 520px);
}
}
/* Map zone modal: beat sticky header (900), mobile drawer (up to 940), FAB rail
* and search / layers panels (899), Leaflet chrome (~1000), and body-level
* basemap picker (1001). Without this, #map.is-active stays at z-index 2 and
* the whole Leaflet subtree paints under stage overlays. */
body.cs-leaflet-popup-open .app-shell {
position: relative;
z-index: 11050;
}
body.cs-leaflet-popup-open #map.is-active {
z-index: 1500;
}
/* Leaflet defaults to overflow:hidden on .leaflet-container; fixed popups are
* still clipped to that box. Do not set overflow:visible on .app-shell (breaks
* the flex height chain and prevented globe->map handoff on some mobile layouts).
* `transform` on the container (GPU / fade helpers) makes `position:fixed` popups
* use it as containing block so 50vw/50vh centre drifts; map input is disabled while
* the modal is open, so clearing transform restores true viewport centring. */
body.cs-leaflet-popup-open #map.leaflet-container {
overflow: visible !important;
transform: none !important;
}
/* One-shot "pick on map" overlay above hex layers (below site chrome). */
.cs-map-pick-shield {
position: absolute;
inset: 0;
z-index: 12500;
box-sizing: border-box;
cursor: crosshair;
display: flex;
align-items: flex-start;
justify-content: center;
padding: max(12px, env(safe-area-inset-top, 0px)) 12px 12px;
background: rgba(10, 14, 26, 0.22);
}
.cs-map-pick-hint {
margin: 0;
max-width: min(420px, 92vw);
padding: 10px 14px;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(10, 14, 26, 0.94);
color: #e9eef9;
font-size: 0.84rem;
line-height: 1.45;
text-align: center;
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
pointer-events: none;
}
.cs-map-pick-hint__esc {
display: block;
margin-top: 4px;
font-size: 0.76rem;
color: rgba(233, 238, 249, 0.65);
}
.cs-pollen-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 10px;
font-weight: 700;
font-size: 1.05rem;
color: #0a0d1a;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
}
.cs-pollen-badge--lvl-0 { background: #4a5568; color: #fff; }
.cs-pollen-badge--lvl-1 { background: #6be7a5; }
.cs-pollen-badge--lvl-2 { background: #c6e766; }
.cs-pollen-badge--lvl-3 { background: #ffb454; }
.cs-pollen-badge--lvl-4 { background: #ff7a59; color: #fff; }
.cs-pollen-badge--lvl-5 { background: #ff5e9c; color: #fff; }
/* Air-quality popup: reuses the `.cs-pollen-popup` grammar but the
* AQI badge shows a 2-3 digit number, so we let its width grow and
* tighten the font-size so something like "103" still fits nicely. */
.cs-air-popup .cs-pollen-badge {
width: auto;
min-width: 40px;
padding: 0 8px;
font-size: 0.95rem;
font-variant-numeric: tabular-nums;
}
/* Per-row WHO guideline hint (e.g. "WHO 25 µg/m³" next to "NO₂").
* Rendered inline as a discreet subtitle so the user always knows
* what reference the pollutant is being measured against, even
* when the live value is missing. */
.cs-air-popup .cs-pollen-row__taxon {
display: inline-flex;
align-items: baseline;
gap: 6px;
flex-wrap: wrap;
}
.cs-air-popup .cs-pollen-row__limit {
font-weight: 500;
font-size: 0.68rem;
color: rgba(233, 238, 249, 0.55);
font-variant-numeric: tabular-nums;
letter-spacing: 0.02em;
}
/* Missing/zero pollutant: mute the label but keep the grid layout
* stable so users visually confirm the indicator is tracked. */
.cs-air-popup .cs-pollen-row.is-empty .cs-pollen-row__taxon { color: rgba(242, 246, 255, 0.55); }
.cs-air-popup .cs-pollen-row.is-empty .cs-pollen-row__val { color: rgba(233, 238, 249, 0.45); }
.cs-pollen-popup__guidance {
font-size: 0.82rem;
color: rgba(233, 238, 249, 0.88);
line-height: 1.35;
padding: 2px 0 8px;
border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.06));
margin-bottom: 6px;
}
/* --------------------------------------------------------------- */
/* Pollen scale explanation page */
/* --------------------------------------------------------------- */
.pollen-scale-page { max-width: 960px; margin: 0 auto; padding: var(--space-6, 32px) var(--space-4, 16px); }
.pollen-scale-page h1 { margin-bottom: var(--space-2, 8px); }
.pollen-scale-page .lead { color: var(--fg-muted); margin-bottom: var(--space-6, 32px); }
.pollen-scale-table {
width: 100%;
border-collapse: collapse;
margin-bottom: var(--space-6, 32px);
}
.pollen-scale-table th, .pollen-scale-table td {
padding: 10px 12px;
text-align: left;
border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.08));
font-size: 0.92rem;
}
.pollen-scale-table th { color: var(--fg-muted); font-weight: 500; }
.pollen-scale-table .pollen-scale-chip {
display: inline-flex;
align-items: center;
gap: 8px;
}
.pollen-scale-table .pollen-scale-chip i {
display: inline-block;
width: 14px;
height: 14px;
border-radius: 4px;
}
.pollen-scale-taxa {
display: grid;
gap: var(--space-3, 12px);
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.pollen-scale-taxon {
padding: 14px 16px;
border-radius: 12px;
background: var(--bg-1, rgba(255, 255, 255, 0.04));
border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
}
.pollen-scale-taxon h3 { margin: 0 0 4px; font-size: 0.98rem; }
.pollen-scale-taxon p { margin: 0; color: var(--fg-muted); font-size: 0.86rem; }
/* User position: same logo mark + pulse as the header brand */
#map .cs-map-user-marker {
background: transparent !important;
border: none !important;
}
#map .cs-map-user-marker .brand-mark {
width: 26px;
height: 26px;
display: block;
pointer-events: none;
}
@media (max-width: 640px) {
#map .cs-map-user-marker { width: 26px !important; height: 26px !important; }
#map .cs-map-user-marker .brand-mark { width: 22px; height: 22px; }
}
.cs-map-loading {
position: absolute;
top: 12px;
left: 50%;
transform: translateX(-50%);
z-index: 800;
pointer-events: none;
}
/* Back-to-globe + basemap: must match Leaflet zoom (+/-). Leaflet's own
* stylesheet loads after app.css and sets `.leaflet-bar a` to a white
* tile #fff; we re-assert dark tiles on #map so order never wins. */
.cs-back-to-globe {
border: none !important;
box-shadow: var(--shadow-2, 0 4px 20px rgba(0, 0, 0, 0.35));
border-radius: 10px;
overflow: hidden;
}
#map .leaflet-bar.cs-back-to-globe a {
width: 36px;
height: 36px;
line-height: 0;
display: flex;
align-items: center;
justify-content: center;
color: #fff !important;
background: rgba(10, 13, 26, 0.92) !important;
border: 1px solid rgba(255, 255, 255, 0.18) !important;
border-radius: 10px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
box-sizing: border-box;
}
#map .leaflet-bar.cs-back-to-globe a:hover,
#map .leaflet-bar.cs-back-to-globe a:focus-visible {
background: rgba(124, 92, 255, 0.45) !important;
color: #fff !important;
outline: none;
}
.cs-basemap-toggle {
border: none !important;
box-shadow: var(--shadow-2, 0 4px 20px rgba(0, 0, 0, 0.35));
border-radius: 10px;
overflow: hidden;
}
#map .leaflet-bar.cs-basemap-toggle a {
width: 36px;
height: 36px;
line-height: 0;
display: flex;
align-items: center;
justify-content: center;
color: #fff !important;
background: rgba(10, 13, 26, 0.92) !important;
border: 1px solid rgba(255, 255, 255, 0.18) !important;
border-radius: 10px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
box-sizing: border-box;
}
#map .leaflet-bar.cs-basemap-toggle a:hover,
#map .leaflet-bar.cs-basemap-toggle a:focus-visible {
background: rgba(124, 92, 255, 0.45) !important;
color: #fff !important;
outline: none;
}
/* --------------------------------------------------------------- */
/* Basemap picker modal */
/* --------------------------------------------------------------- */
/* Centered overlay listing every configured basemap with an explicit
* check mark on the active entry. Replaces the old single-tap cycle
* (which never told the user which basemap they were on). z-index is
* set well above Leaflet popups (.leaflet-popup ~= 700) and above the
* back-to-globe / zoom controls, and above body.cs-leaflet-popup-open
* .app-shell (11050). Still below install splash / admin toasts (1e5). */
.cs-basemap-picker-backdrop {
position: fixed;
inset: 0;
background: rgba(5, 8, 18, 0.55);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
z-index: var(--z-modal-app);
opacity: 0;
transition: opacity var(--dur-1, 0.18s) var(--ease, ease);
}
.cs-basemap-picker-backdrop.is-open { opacity: 1; }
.cs-basemap-picker-backdrop[hidden] { display: none; }
.cs-basemap-picker {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, calc(-50% + 8px));
width: min(360px, calc(100vw - 32px));
max-height: calc(100dvh - 48px);
overflow: auto;
z-index: var(--z-modal-app-1);
/* Two-layer background for mobile compositors that drop alpha. */
background-color: #141a2a;
background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0));
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow-2, 0 14px 44px rgba(0, 0, 0, 0.55));
color: var(--fg-0);
font-family: var(--font-ui);
padding: var(--space-3) 0 var(--space-2);
opacity: 0;
transition: opacity var(--dur-1, 0.18s) var(--ease, ease),
transform var(--dur-1, 0.18s) var(--ease, ease);
}
.cs-basemap-picker.is-open {
opacity: 1;
transform: translate(-50%, -50%);
}
.cs-basemap-picker[hidden] { display: none; }
.cs-basemap-picker__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
padding: 0 var(--space-3) var(--space-2);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.cs-basemap-picker__title {
margin: 0;
font-size: 0.95rem;
font-weight: 700;
letter-spacing: 0.01em;
color: var(--fg-0);
}
.cs-basemap-picker__close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px; height: 30px;
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 8px;
color: var(--fg-muted);
cursor: pointer;
transition: background var(--dur-1, 0.18s) var(--ease, ease),
color var(--dur-1, 0.18s) var(--ease, ease);
}
.cs-basemap-picker__close:hover,
.cs-basemap-picker__close:focus-visible {
background: rgba(255, 255, 255, 0.06);
color: var(--fg-0);
outline: none;
}
.cs-basemap-picker__close svg {
width: 20px;
height: 20px;
flex-shrink: 0;
display: block;
}
.cs-basemap-picker__list {
display: flex;
flex-direction: column;
padding: var(--space-1, 4px);
}
.cs-basemap-picker__row {
display: flex;
align-items: center;
gap: var(--space-2);
padding: 10px 12px;
background: transparent;
border: 1px solid transparent;
border-radius: 10px;
color: var(--fg-0);
font: inherit;
text-align: left;
cursor: pointer;
transition: background var(--dur-1, 0.18s) var(--ease, ease),
border-color var(--dur-1, 0.18s) var(--ease, ease);
}
.cs-basemap-picker__row + .cs-basemap-picker__row { margin-top: 2px; }
.cs-basemap-picker__row:hover,
.cs-basemap-picker__row:focus-visible {
background: rgba(124, 92, 255, 0.12);
border-color: rgba(124, 92, 255, 0.28);
outline: none;
}
.cs-basemap-picker__row.is-active {
background: rgba(124, 92, 255, 0.18);
border-color: rgba(124, 92, 255, 0.45);
}
.cs-basemap-picker__icon {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px; height: 32px;
border-radius: 8px;
overflow: hidden;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.cs-basemap-picker__text {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.cs-basemap-picker__label {
font-size: 0.92rem;
font-weight: 600;
color: var(--fg-0);
}
.cs-basemap-picker__desc {
font-size: 0.75rem;
color: var(--fg-muted);
}
.cs-basemap-picker__check {
flex: 0 0 auto;
width: 22px; height: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--aurora-violet, #7c5cff);
}
/* Touch targets on very small screens: full-height row hits 48px so
* fat-finger accuracy stays acceptable without ballooning the list
* on desktop, where 40-ish px is already comfortable. */
@media (max-width: 480px) {
.cs-basemap-picker { width: min(420px, calc(100vw - 24px)); }
.cs-basemap-picker__row { padding: 12px 12px; }
.cs-basemap-picker__icon { width: 36px; height: 36px; }
}
/* --------------------------------------------------------------- */
/* Top-left speed dial: refresh → search → save → balloon → help → cog */
/* (flex `order`; DOM insert order may differ). Panels stack after buttons. */
/* --------------------------------------------------------------- */
.cs-stage-fabs {
position: absolute;
left: 12px;
top: 12px;
z-index: var(--z-stage-fab-rail);
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
pointer-events: none;
}
/* Dial buttons: explicit sequence. Unknown rail children default after cog until overridden. */
#cs-stage-fabs > * {
order: 40;
}
#cs-stage-fabs #cs-refresh-fab {
order: 10;
}
#cs-stage-fabs #cs-search-fab {
order: 20;
}
#cs-stage-fabs #cs-exposure-save-fab {
order: 30;
}
#cs-stage-fabs #ss-balloon-btn {
order: 35;
}
#cs-stage-fabs #cs-stage-hero-help-fab {
order: 37;
}
#cs-stage-fabs .cs-layers-cog {
order: 39;
}
#cs-stage-fabs .cs-sens-panel {
order: 45;
}
#cs-stage-fabs .cs-layers-panel {
order: 50;
}
/* Lift the whole rail while any stage dialog is open so fixed children (e.g.
* .cs-sens-panel) are not trapped under #map.is-active (up to z-index 1500)
* or under Leaflet controls. Search is a #stage-canvas sibling; bump it too.
* `body.cs-*-panel-open` mirrors the open state when `:has()` is unavailable so
* the rail still clears map chrome (mobile: nav tiles + share over the sheet).
* Do NOT include body.cs-leaflet-popup-open here: the Leaflet popup lives inside
* #map's stacking context (z-index 1500), so a 20000 FAB rail paints above the
* fullscreen composite modal (see mobile screenshot: dial over the card). */
#stage-canvas:has(.cs-layers-panel:not([hidden])) #cs-stage-fabs,
#stage-canvas:has(.cs-search-panel:not([hidden])) #cs-stage-fabs,
body.cs-layers-panel-open #cs-stage-fabs,
body.cs-search-panel-open #cs-stage-fabs {
z-index: var(--z-modal-app);
}
#stage-canvas > .cs-search-panel:not([hidden]) {
z-index: var(--z-modal-app-1);
}
.cs-stage-fabs > * {
pointer-events: auto;
}
/* Layers sheet must paint above the cog FAB (otherwise the button covers row 1). */
#cs-stage-fabs .cs-layers-cog {
z-index: 1;
}
/* Sheet above dial column: 5 was too low vs .cs-sens-panel (10) and flex paint quirks. */
#cs-stage-fabs .cs-layers-panel:not([hidden]) {
z-index: 100;
}
#cs-stage-fabs .cs-sens-panel:not([hidden]):not(.cs-sens-panel--account) {
z-index: 10;
}
/* While the stage dimmer is on, force every round FAB under the layers/search sheet
* (explicit z-index beats order-only stacking on some mobile WebKit builds).
* Omit `.cs-layers-cog`: giving it `position: relative` here overrides the rail
* reset (`position: static`) and reintroduces map-era offsets from `.cs-layers-cog`,
* shifting the cog sideways in the flex column (regression). The open layers sheet
* already uses z-index 100 above these FABs; search uses a #stage-canvas sibling. */
body.cs-stage-fab-backdrop-on #cs-stage-fabs #cs-refresh-fab,
body.cs-stage-fab-backdrop-on #cs-stage-fabs #cs-search-fab,
body.cs-stage-fab-backdrop-on #cs-stage-fabs #cs-exposure-save-fab,
body.cs-stage-fab-backdrop-on #cs-stage-fabs #ss-balloon-btn,
body.cs-stage-fab-backdrop-on #cs-stage-fabs #cs-stage-hero-help-fab {
position: relative;
z-index: 1;
}
.cs-stage-fabs .balloon-trigger,
.cs-stage-fabs .cs-layers-cog,
.cs-stage-fabs .cs-search-fab,
.cs-stage-fabs .cs-stage-hero-help-fab,
.cs-stage-fabs .cs-exposure-save-fab {
/* Kill global `.balloon-trigger { z-index: 25 }` if this node ever becomes positioned. */
z-index: auto;
position: static;
bottom: auto;
left: auto;
top: auto;
right: auto;
width: 40px;
height: 40px;
padding: 0;
margin: 0;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 0;
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 50%;
/* Solid base + translucent overlay: identical treatment across the
* three rail buttons, and robust against any browser that drops
* alpha on the background shorthand. */
background-color: #0a0d1a;
background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0));
color: var(--fg-0);
box-shadow: var(--shadow-2);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
font-size: 1rem;
-webkit-appearance: none;
appearance: none;
}
/* Search FAB: primary CTA fill so the loupe stands out like "Go" in the panel. */
#cs-stage-fabs .cs-search-fab {
background-color: transparent;
background-image: var(--grad-primary);
border: 1px solid rgba(255, 255, 255, 0.28);
color: #fff;
}
#cs-stage-fabs .cs-search-fab svg {
color: #fff;
}
#cs-stage-fabs .cs-search-fab:hover,
#cs-stage-fabs .cs-search-fab[aria-expanded="true"] {
background-color: transparent;
background-image: var(--grad-primary);
filter: brightness(1.08) saturate(1.06);
border-color: rgba(255, 255, 255, 0.4);
color: #fff;
}
.cs-stage-fabs .balloon-trigger:hover,
.cs-stage-fabs .balloon-trigger[aria-expanded="true"] {
background: rgba(124, 92, 255, 0.35);
color: #fff;
}
.cs-stage-fabs .balloon-trigger .balloon-icon {
width: 22px; height: 22px; display: block; pointer-events: none;
}
/* Narrow viewports: map top-right dock + share tile can composite above the
* bottom sheet; hide them while layers/search are open so the close control stays tappable.
* `body.cs-layers-panel-open` is required in addition to the dimmer flag so the first
* paint after `panel.hidden=false` cannot flash map chrome over the sheet. */
@media (max-width: 768px) {
body.cs-stage-fab-backdrop-on #map.leaflet-container .leaflet-top.leaflet-right,
body.cs-stage-fab-backdrop-on #map.leaflet-container .leaflet-control-container,
body.cs-layers-panel-open #map.leaflet-container .leaflet-top.leaflet-right,
body.cs-layers-panel-open #map.leaflet-container .leaflet-control-container,
body.cs-search-panel-open #map.leaflet-container .leaflet-top.leaflet-right,
body.cs-search-panel-open #map.leaflet-container .leaflet-control-container {
visibility: hidden !important;
pointer-events: none !important;
}
body.cs-stage-fab-backdrop-on #cs-location-share-fab.cs-location-share-fab,
body.cs-layers-panel-open #cs-location-share-fab.cs-location-share-fab,
body.cs-search-panel-open #cs-location-share-fab.cs-location-share-fab {
visibility: hidden !important;
pointer-events: none !important;
}
}
/* --------------------------------------------------------------- */
/* Floating layers cog (visible on both globe + map) */
/* --------------------------------------------------------------- */
.cs-layers-cog {
position: absolute;
bottom: 16px;
left: 16px;
top: auto;
right: auto;
z-index: 900;
width: 40px; height: 40px;
padding: 0; /* reset UA button padding */
margin: 0;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 0; /* kill phantom descender space */
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 50%;
background: rgba(10, 13, 26, 0.75);
color: var(--fg-0);
cursor: pointer;
box-shadow: var(--shadow-2);
backdrop-filter: blur(6px);
transition: background var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
-webkit-appearance: none;
appearance: none;
font: inherit;
}
.cs-layers-cog:hover,
.cs-layers-cog[aria-expanded="true"] {
background: rgba(124, 92, 255, 0.35);
transform: rotate(30deg);
}
.cs-layers-cog svg {
display: block;
width: 20px;
height: 20px;
pointer-events: none; /* clicks go to the button, not the svg */
}
.cs-stage-fabs .cs-layers-panel {
/* Sibling of the rail items; anchor next to the cog rather than the
* rail so vertical alignment matches the button that opens it. */
left: calc(44px + 10px);
right: auto;
bottom: auto;
top: 0;
overflow-y: auto;
/* Wide settings sheet on desktop; min-width cap for readability. */
min-width: 640px;
max-width: min(920px, calc(100vw - 24px - 44px - 10px - 16px));
box-sizing: border-box;
}
/* The search panel is appended as a sibling of the fab rail (inside
* #stage-canvas), not as a child, so flex-rail sizing can never strip
* its background. It anchors visually next to the rail (rail is at
* 12 px, rail width ~40 px, 10 px gap -> 62 px). */
#stage-canvas > .cs-search-panel {
left: calc(12px + 40px + 10px);
top: 12px;
}
.cs-layers-panel {
position: absolute;
bottom: 64px;
left: 16px;
top: auto;
right: auto;
z-index: 910;
min-width: 640px;
max-width: min(920px, calc(100vw - 32px));
box-sizing: border-box;
padding: var(--space-3) var(--space-4);
background: rgba(18, 24, 38, 0.96);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow-2);
color: var(--fg-0);
font-family: var(--font-ui);
backdrop-filter: blur(8px);
}
/* Must beat later mobile `.cs-stage-fabs .cs-layers-panel { display:flex }` (same specificity). */
.cs-layers-panel[hidden],
.cs-stage-fabs .cs-layers-panel[hidden],
#cs-stage-fabs .cs-layers-panel[hidden] {
display: none !important;
}
.cs-layers-sticky-top {
margin-bottom: var(--space-2);
}
/* Cog panel: underline tabs (not full-width pill tiles). */
.cs-layers-tabs {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
gap: 0;
margin-top: var(--space-2);
margin-bottom: var(--space-4);
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.cs-layers-tab {
flex: 1 1 50%;
min-width: 0;
margin: 0;
padding: 0.5rem 0.35rem 0.55rem;
font-family: var(--font-ui);
font-size: 0.68rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
line-height: 1.25;
color: var(--fg-muted);
text-align: center;
background: transparent;
border: none;
border-radius: 0;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
cursor: pointer;
transition: color 120ms ease, border-color 120ms ease;
-webkit-appearance: none;
appearance: none;
}
.cs-layers-tab:hover,
.cs-layers-tab:focus-visible {
color: var(--fg-0);
outline: none;
}
.cs-layers-tab[aria-selected="true"] {
color: #fff;
border-bottom-color: rgba(0, 255, 178, 0.85);
background: transparent;
box-shadow: none;
}
.cs-layers-tab-panel[hidden] {
display: none !important;
}
#cs-layers-panel-data:not([hidden]),
#cs-layers-panel-sens:not([hidden]) {
padding-top: var(--space-2);
}
.cs-layers-sens-host {
min-height: 0;
}
.cs-layers-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
margin-bottom: var(--space-2);
}
.cs-layers-head .cs-layers-title {
margin: 0;
}
.cs-layers-close {
appearance: none;
-webkit-appearance: none;
flex: 0 0 auto;
background: transparent;
border: 1px solid transparent;
border-radius: 12px;
width: 48px;
height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--fg-0);
cursor: pointer;
transition: border-color 120ms ease, background-color 120ms ease;
}
.cs-layers-close:hover,
.cs-layers-close:focus-visible {
border-color: var(--border);
background: rgba(255, 255, 255, 0.06);
outline: none;
}
.cs-layers-title {
font-size: 0.78rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--fg-muted);
margin: 0;
}
.cs-layers-head .cs-layers-title {
flex: 1 1 auto;
min-width: 0;
}
.cs-layers-section {
margin: var(--space-3) 0 var(--space-2);
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--fg-0);
line-height: 1.3;
padding-bottom: 0.15rem;
border-bottom: 1px solid rgba(0, 255, 178, 0.22);
}
.cs-layers-section-sub {
margin: 0 0 var(--space-2);
font-size: 0.75rem;
line-height: 1.35;
color: var(--fg-muted);
}
/* Per-layer tuto: "?" in a circle, right column (replaces purple text links). */
.cs-layers-row {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
margin: 0;
padding: 2px 4px;
border-radius: 6px;
list-style: none;
}
.cs-layers-row:hover {
background: rgba(255, 255, 255, 0.05);
}
.cs-layers-list .cs-layers-row__label {
flex: 1 1 auto;
min-width: 0;
display: flex;
align-items: center;
gap: 10px;
font-size: 0.9rem;
cursor: pointer;
padding: 4px 0;
border-radius: 4px;
}
.cs-layers-tuto-icon {
flex: 0 0 30px;
width: 30px;
height: 30px;
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
margin-left: auto;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.22);
background: rgba(255, 255, 255, 0.07);
color: var(--fg-0);
text-decoration: none;
font-weight: 700;
font-size: 0.82rem;
line-height: 1;
font-family: var(--font-ui), system-ui, sans-serif;
transition: background 120ms ease, border-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
}
.cs-layers-tuto-icon__disc {
display: block;
transform: translateY(-0.5px);
}
.cs-layers-tuto-icon:hover,
.cs-layers-tuto-icon:focus-visible {
background: rgba(124, 92, 255, 0.28);
border-color: rgba(0, 255, 178, 0.45);
color: #fff;
box-shadow: 0 0 0 1px rgba(0, 255, 178, 0.12);
outline: none;
}
.cs-layers-tuto-icon--empty {
flex: 0 0 30px;
width: 30px;
height: 30px;
visibility: hidden;
pointer-events: none;
}
.cs-layers-list--poi,
.cs-layers-list--nonregroup {
margin-bottom: var(--space-2);
}
.cs-layers-list--aggregatable,
.cs-layers-list--nzoi,
.cs-layers-list--zoi {
margin-bottom: var(--space-1);
}
/* Natural hazards: one parent checkbox + expandable per-taxon toggles (cog panel). */
.cs-layers-hazard-parent {
list-style: none;
margin: 0;
padding: 0;
}
.cs-layers-hazard-parent__head {
padding: 2px 0 4px;
}
.cs-layers-hazard-parent__head.cs-layers-row {
align-items: center;
gap: 8px;
padding: 4px 4px 6px;
}
.cs-layers-hazard-parent__master {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
font-size: 0.84rem;
line-height: 1.35;
color: var(--fg-1);
}
.cs-layers-hazard-parent__master.cs-layers-row__label {
flex: 1 1 auto;
min-width: 0;
}
.cs-layers-hazard-master-glyph {
width: 12px;
height: 12px;
border-radius: 50%;
flex-shrink: 0;
margin-top: 0;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
background: conic-gradient(
#E87B1E,
#1565C0,
#C62828,
#0288D1,
#6A1B9A,
#2E7D32,
#c2410c,
#E87B1E
);
}
.cs-layers-hazard-details {
margin: 0 0 6px;
padding: 0;
}
.cs-layers-hazard-details > summary {
list-style: none;
cursor: pointer;
font-size: 0.78rem;
font-weight: 600;
color: var(--fg-muted);
padding: 4px 2px;
user-select: none;
display: flex;
align-items: center;
gap: 6px;
letter-spacing: 0.01em;
}
.cs-layers-hazard-details > summary::-webkit-details-marker {
display: none;
}
.cs-layers-hazard-details > summary::before {
content: "";
display: inline-block;
width: 0;
height: 0;
border-left: 5px solid currentColor;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
transform: rotate(0deg);
transition: transform 120ms ease;
opacity: 0.7;
flex-shrink: 0;
}
.cs-layers-hazard-details[open] > summary::before {
transform: rotate(90deg);
}
.cs-layers-hazard-details[open] > summary {
color: var(--fg-0);
}
.cs-layers-list--hazard-sub {
margin: 2px 0 4px 0.35rem;
padding: 0 0 0 0.5rem;
border-left: 1px solid rgba(255, 255, 255, 0.1);
}
.cs-layers-list--hazard-sub > li {
padding-left: 4px;
}
.cs-layers-section-hr {
margin: var(--space-3) 0 var(--space-2);
border: 0;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.cs-layers-group-toggle {
display: flex;
align-items: flex-start;
gap: 10px;
margin-top: var(--space-2);
padding: 6px 0 0;
border: none;
background: transparent;
border-radius: 0;
font-size: 0.78rem;
line-height: 1.35;
color: var(--fg-1);
cursor: pointer;
}
.cs-layers-agg-switch .cs-layers-agg-label {
flex: 1 1 auto;
min-width: 0;
}
.cs-layers-agg-switch {
position: relative;
}
.cs-layers-agg-switch input[type="checkbox"] {
position: absolute;
left: 0;
top: 6px;
width: 44px;
height: 24px;
margin: 0;
opacity: 0.02;
cursor: pointer;
z-index: 2;
flex: 0 0 auto;
}
.cs-layers-agg-switch .cs-switch-track {
flex: 0 0 40px;
width: 40px;
height: 22px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.14);
position: relative;
margin-top: 1px;
transition: background 0.15s ease;
z-index: 1;
}
.cs-layers-agg-switch .cs-switch-thumb {
position: absolute;
width: 18px;
height: 18px;
left: 2px;
top: 2px;
border-radius: 50%;
background: #f2f6ff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
transition: transform 0.15s ease;
}
.cs-layers-agg-switch input:checked + .cs-switch-track {
background: rgba(124, 92, 255, 0.85);
}
.cs-layers-agg-switch input:checked + .cs-switch-track .cs-switch-thumb {
transform: translateX(18px);
}
.cs-layers-agg-switch input:focus-visible + .cs-switch-track {
outline: 2px solid rgba(124, 92, 255, 0.75);
outline-offset: 2px;
}
.cs-layers-fav-switch .cs-layers-fav-glyph {
flex: 0 0 auto;
display: flex;
align-items: center;
margin-top: 1px;
}
.cs-layers-fav-glyph__disc {
width: 28px;
height: 28px;
border-radius: 50%;
background: linear-gradient(145deg, rgba(255, 214, 102, 0.95), rgba(200, 140, 40, 0.95));
border: 2px solid rgba(20, 24, 40, 0.85);
display: flex;
align-items: center;
justify-content: center;
color: #1a1530;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}
.cs-layers-fav-glyph__disc svg {
display: block;
}
.cs-sens-between {
margin: var(--space-2) 0;
border: 0;
border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.cs-sens-blog-link {
margin: 0 0 var(--space-2);
font-size: 0.72rem;
line-height: 1.35;
}
.cs-sens-blog-link a {
color: rgba(196, 181, 255, 0.88);
text-decoration: none;
font-weight: 500;
}
.cs-sens-blog-link a:hover {
text-decoration: underline;
color: #e4dcff;
}
.cs-layers-list {
list-style: none; margin: 0; padding: 0;
display: flex; flex-direction: column; gap: 6px;
}
/* Layer rows use `.cs-layers-row` + `.cs-layers-row__label` (see layers-panel.js). */
.cs-layers-list input[type="checkbox"] {
accent-color: var(--brand, #7c5cff);
width: 16px; height: 16px;
cursor: pointer;
}
.cs-layers-dot {
width: 10px; height: 10px; border-radius: 50%;
flex: 0 0 auto;
box-shadow: 0 0 6px currentColor;
}
.cs-layers-poi-glyph,
.cs-sens-poi-glyph {
flex: 0 0 auto;
width: 24px;
height: 24px;
object-fit: contain;
display: block;
filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.65));
}
/* HVT bolt glyph: light rim so yellow lightning stays crisp on black disc */
.cs-layers-poi-glyph.cs-layers-poi-glyph--hvt,
.cs-sens-poi-glyph.cs-sens-poi-glyph--hvt {
filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.9));
}
.leaflet-div-icon.cs-poi-map-icon-wrap {
background: none;
border: none;
overflow: visible !important;
}
img.cs-poi-map-icon {
display: block;
width: 24px;
height: 24px;
filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, 0.9));
pointer-events: none;
}
/* HVT / telecom Leaflet markers: dark disc + ring; HVT uses black disc + yellow bolt (not mast SVG). */
.cs-poi-marker-disc {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
box-sizing: border-box;
background: rgba(12, 14, 22, 0.92);
border: 2px solid transparent;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
pointer-events: none;
}
.cs-poi-marker-disc .cs-poi-map-icon {
width: 22px;
height: 22px;
}
.cs-poi-marker-disc .cs-poi-inline-svg,
.cs-poi-glyph-disc .cs-poi-inline-svg {
width: 22px;
height: 22px;
display: block;
flex-shrink: 0;
}
.cs-poi-marker-disc--nuclear .cs-poi-inline-svg {
width: 29px;
height: 29px;
}
.cs-poi-glyph-disc--nuclear .cs-poi-inline-svg {
width: 27px;
height: 27px;
}
/* HVT map marker: wrapper matches Leaflet iconSize 40×40; bolt img larger than 32px disc so tips stay readable */
.cs-poi-marker-hvt-wrap {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
pointer-events: none;
}
.cs-poi-marker-disc--hvt {
overflow: visible;
}
.cs-poi-marker-disc--hvt .cs-poi-map-icon--hvt-bolt {
width: 34px;
height: 34px;
max-width: none;
}
.cs-poi-marker-disc--telecom {
border-color: #0ea5e9;
box-shadow:
0 1px 3px rgba(0, 0, 0, 0.55),
0 0 10px rgba(14, 165, 233, 0.35);
}
.cs-poi-marker-disc--hvt {
background: #0a0a0c;
/* border-color overridden inline from map.js voltage band */
box-shadow:
0 1px 4px rgba(0, 0, 0, 0.75),
inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.cs-poi-marker-disc--wind {
background: radial-gradient(circle at 32% 22%, #a78bfa 0%, #7c5cff 42%, #5b3fc9 100%);
border-color: #4c32ad;
box-shadow:
0 1px 4px rgba(0, 0, 0, 0.65),
0 0 14px rgba(124, 92, 255, 0.42),
inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.cs-poi-marker-disc--nuclear {
background: #dc2626;
border-color: #991b1b;
box-shadow:
0 1px 4px rgba(0, 0, 0, 0.65),
inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.cs-poi-marker-disc--nuclear .cs-poi-map-icon {
width: 29px;
height: 29px;
}
.cs-poi-marker-disc--coal .cs-poi-map-icon {
width: 26px;
height: 26px;
}
.cs-poi-marker-disc--coal {
background: #3f3f46;
border-color: #52525b;
box-shadow:
0 1px 4px rgba(0, 0, 0, 0.65),
inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
/* Cog layers / sensitivity / onboarding: same disc treatment at slightly smaller size */
.cs-poi-glyph-disc {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 50%;
box-sizing: border-box;
background: rgba(12, 14, 22, 0.92);
border: 2px solid transparent;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
.cs-poi-glyph-disc--telecom {
border-color: #0ea5e9;
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.45),
0 0 8px rgba(14, 165, 233, 0.28);
}
.cs-poi-glyph-disc--hvt {
background: #0a0a0c;
border-color: #2d2d32;
box-shadow:
0 1px 3px rgba(0, 0, 0, 0.65),
inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.cs-poi-glyph-disc--wind {
background: radial-gradient(circle at 32% 22%, #a78bfa 0%, #7c5cff 42%, #5b3fc9 100%);
border-color: #4c32ad;
box-shadow:
0 1px 3px rgba(0, 0, 0, 0.55),
0 0 10px rgba(124, 92, 255, 0.32),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.cs-poi-glyph-disc--nuclear {
background: #dc2626;
border-color: #991b1b;
box-shadow:
0 1px 3px rgba(0, 0, 0, 0.55),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.cs-poi-glyph-disc--coal {
background: #3f3f46;
border-color: #52525b;
box-shadow:
0 1px 3px rgba(0, 0, 0, 0.55),
inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.cs-poi-glyph-disc--nuclear .cs-layers-poi-glyph,
.cs-poi-glyph-disc--nuclear .cs-sens-poi-glyph {
width: 27px;
height: 27px;
}
.cs-poi-glyph-disc--coal .cs-layers-poi-glyph,
.cs-poi-glyph-disc--coal .cs-sens-poi-glyph {
width: 24px;
height: 24px;
}
.cs-poi-glyph-disc .cs-layers-poi-glyph {
width: 20px;
height: 20px;
}
.cs-poi-glyph-disc .cs-layers-poi-glyph--hvt {
width: 30px;
height: 30px;
}
.cs-poi-glyph-disc .cs-sens-poi-glyph {
width: 20px;
height: 20px;
}
.cs-poi-glyph-disc .cs-sens-poi-glyph--hvt {
width: 30px;
height: 30px;
}
.cs-layers-lbl { flex: 1 1 auto; }
.cs-layers-hint {
margin-top: var(--space-2);
padding-top: var(--space-2);
border-top: 1px solid var(--border);
font-size: 0.72rem;
color: var(--fg-muted);
line-height: 1.35;
}
.cs-layers-help {
display: block;
margin-top: 6px;
font-size: 0.75rem;
color: var(--brand, #7c5cff);
text-decoration: none;
}
.cs-layers-help:hover { text-decoration: underline; }
.cs-layers-slider {
margin-top: var(--space-2);
padding-top: var(--space-2);
border-top: 1px solid var(--border);
display: flex;
flex-direction: column;
gap: 4px;
}
.cs-layers-slider-head {
display: flex;
align-items: center;
gap: 6px;
min-height: 1.4em;
}
.cs-layers-slider-lbl {
font-size: 0.78rem;
color: var(--fg-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.cs-layers-slider-info {
flex: 0 0 auto;
width: 18px; height: 18px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 0;
border: 0;
border-radius: 50%;
background: transparent;
color: var(--fg-muted);
cursor: pointer;
transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.cs-layers-slider-info:hover,
.cs-layers-slider-info:focus-visible {
color: var(--aurora-green);
background: rgba(0, 255, 178, 0.08);
outline: none;
}
.cs-layers-slider input[type="range"] {
width: 100%;
accent-color: var(--brand, #7c5cff);
cursor: pointer;
}
.cs-layers-slider-val {
font-size: 0.78rem;
color: var(--fg);
font-variant-numeric: tabular-nums;
align-self: flex-end;
}
.cs-layers-dev {
margin-top: var(--space-2);
padding-top: var(--space-2);
border-top: 1px dashed rgba(255, 107, 53, 0.45);
}
.cs-layers-dev-btn {
width: 100%;
margin: 0;
padding: 0.45rem 0.6rem;
font-size: 0.75rem;
font-weight: 600;
font-family: inherit;
cursor: pointer;
border-radius: var(--radius-sm);
border: 1px solid rgba(255, 107, 53, 0.55);
background: rgba(255, 107, 53, 0.12);
color: var(--aurora-orange);
}
.cs-layers-dev-btn:hover {
background: rgba(255, 107, 53, 0.22);
border-color: var(--aurora-orange);
}
/* --------------------------------------------------------------- */
/* Google-Earth-style globe dock (zoom column + compass) */
/* --------------------------------------------------------------- */
.cs-globe-controls {
position: absolute;
/* Horizontal anchor: safe-area + page gutter + optical nudge (see --cs-globe-controls-right on html). */
right: var(--cs-globe-controls-right);
/* Match share FAB top (12px) so row 1 (+ / share) aligns visually. */
top: 12px;
z-index: 850;
display: flex;
flex-direction: column;
/* Flush right so the texture column shares an edge with the share FAB;
* centering a narrower top block left-shifted the layer control. */
align-items: flex-end;
gap: 10px;
pointer-events: none; /* children re-enable it */
}
.cs-globe-controls[hidden] { display: none; }
/* Wrapper so we can hide zoom + compass on small screens behind a toggle */
.cs-globe-dock-inner {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 10px;
pointer-events: none;
}
@media (min-width: 769px) {
.cs-globe-dock-inner {
display: contents;
}
}
.cs-gctl-mobile-toggle {
display: none;
pointer-events: auto;
width: 40px;
height: 40px;
padding: 0;
margin: 0;
align-items: center;
justify-content: center;
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 12px;
background: rgba(10, 13, 26, 0.82);
color: var(--fg-0);
cursor: pointer;
box-shadow: var(--shadow-2);
backdrop-filter: blur(8px);
-webkit-appearance: none;
appearance: none;
font: inherit;
}
.cs-gctl-mobile-toggle:hover {
background: rgba(124, 92, 255, 0.38);
color: #fff;
}
.cs-gctl-mobile-toggle:focus-visible {
outline: 2px solid var(--brand, #7c5cff);
outline-offset: 2px;
}
.cs-gctl-mobile-toggle svg {
display: block;
pointer-events: none;
}
.cs-globe-controls--mobile .cs-gctl-mobile-toggle {
display: inline-flex;
}
.cs-gctl-btn {
pointer-events: auto;
width: 36px; height: 36px;
padding: 0;
margin: 0;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 0;
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 10px;
background: rgba(10, 13, 26, 0.78);
color: var(--fg-0);
cursor: pointer;
box-shadow: var(--shadow-2);
backdrop-filter: blur(8px);
transition: background var(--dur-2) var(--ease), transform 0.08s ease, color var(--dur-2) var(--ease);
-webkit-appearance: none;
appearance: none;
font: inherit;
}
.cs-gctl-btn:hover { background: rgba(124, 92, 255, 0.38); color: #fff; }
.cs-gctl-btn:focus-visible { outline: 2px solid var(--brand, #7c5cff); outline-offset: 2px; }
.cs-gctl-btn[data-pressed="1"] { transform: scale(0.94); background: rgba(124, 92, 255, 0.55); color: #fff; }
.cs-gctl-btn svg { display: block; pointer-events: none; }
/* Top row: 3×36px + column gaps 4px, no outer pad (desktop + mobile); row gap 8px like share column. */
.cs-gctl-top-cluster {
--cs-gctl-cell: 36px;
--cs-gctl-gap: 4px;
--cs-gctl-pad: 0px;
box-sizing: border-box;
width: calc(var(--cs-gctl-pad) * 2 + var(--cs-gctl-cell) * 3 + var(--cs-gctl-gap) * 2);
padding: var(--cs-gctl-pad) var(--cs-gctl-pad) 0;
display: grid;
grid-template-columns: var(--cs-gctl-cell) var(--cs-gctl-cell) var(--cs-gctl-cell);
grid-template-rows: var(--cs-gctl-cell) var(--cs-gctl-cell);
column-gap: var(--cs-gctl-gap);
row-gap: 8px;
align-items: stretch;
pointer-events: none;
}
.cs-gctl-top-pad {
grid-column: 1;
grid-row: 1 / span 2;
pointer-events: none;
}
.cs-gctl-top-cluster .cs-gctl-zoom {
grid-column: 2;
grid-row: 1 / span 2;
align-self: start;
}
.cs-gctl-side-slot {
grid-column: 3;
grid-row: 1 / span 2;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
align-self: stretch;
width: var(--cs-gctl-cell);
min-height: 0;
gap: 8px;
pointer-events: none;
}
.cs-gctl-top-cluster--zoom-only .cs-gctl-zoom {
grid-column: 2;
}
.cs-gctl-top-cluster--zoom-only .cs-gctl-top-pad:first-child {
grid-column: 1;
grid-row: 1 / span 2;
}
.cs-gctl-top-cluster--zoom-only .cs-gctl-top-pad:last-child {
grid-column: 3;
grid-row: 1 / span 2;
}
.cs-gctl-side-spacer {
flex: 0 0 var(--cs-gctl-cell);
width: var(--cs-gctl-cell);
height: var(--cs-gctl-cell);
pointer-events: none;
}
/* Globe texture picker trigger (side column, bottom row). */
.cs-gctl-texture {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 0;
pointer-events: auto;
}
.cs-gctl-side-slot .cs-gctl-texture {
margin: 0;
}
.cs-gctl-texture .cs-gctl-btn {
width: 36px;
height: 36px;
pointer-events: auto;
}
/* Zoom column: separate + / − tiles (same 8px rhythm as `.cs-gctl-side-slot` / mobile). */
.cs-gctl-zoom {
display: flex;
flex-direction: column;
gap: 8px;
overflow: visible;
background: transparent;
border-radius: 0;
pointer-events: none;
}
.cs-gctl-zoom .cs-gctl-btn {
border-right-width: 1px;
border-bottom-width: 1px;
border-radius: 10px;
}
.cs-gctl-zoom .cs-gctl-btn:first-child {
border-radius: 10px;
}
.cs-gctl-zoom .cs-gctl-btn:last-child {
border-radius: 10px;
border-bottom-width: 1px;
}
/* Compass: 3-column 3-row grid around a centre "recenter" button,
* Google-Earth style. Outer buttons are square, centre is round. */
.cs-gctl-compass {
display: grid;
grid-template-columns: 36px 36px 36px;
grid-template-rows: 36px 36px 36px;
gap: 4px;
pointer-events: none;
padding: 6px;
background: rgba(10, 13, 26, 0.55);
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: 16px;
box-shadow: var(--shadow-2);
backdrop-filter: blur(6px);
}
.cs-gctl-compass .up { grid-column: 2; grid-row: 1; }
.cs-gctl-compass .left { grid-column: 1; grid-row: 2; }
.cs-gctl-compass .c { grid-column: 2; grid-row: 2; border-radius: 50%; color: var(--aurora-green); }
.cs-gctl-compass .right { grid-column: 3; grid-row: 2; }
.cs-gctl-compass .down { grid-column: 2; grid-row: 3; }
.cs-gctl-compass .c:hover { color: #fff; }
@media (max-width: 768px) {
/* Globe dock: 2x2 with #cs-location-share-fab (top-right). Share stays at top:12px;
* `right` matches `var(--cs-globe-controls-right)` (same as desktop + Leaflet column). */
.cs-globe-controls {
left: auto;
top: 12px;
transform: none;
flex-direction: column;
align-items: flex-end;
gap: 8px;
max-width: none;
}
/* Drop the decorative left pad column; two cells = zoom | side (spacer + texture). */
.cs-gctl-top-cluster:not(.cs-gctl-top-cluster--zoom-only) {
--cs-gctl-pad: 0px;
--cs-gctl-gap: 8px;
width: calc(var(--cs-gctl-cell) * 2 + var(--cs-gctl-gap));
padding: 0;
grid-template-columns: var(--cs-gctl-cell) var(--cs-gctl-cell);
}
.cs-gctl-top-cluster:not(.cs-gctl-top-cluster--zoom-only) > .cs-gctl-top-pad {
display: none;
}
.cs-gctl-top-cluster:not(.cs-gctl-top-cluster--zoom-only) > .cs-gctl-zoom {
grid-column: 1;
grid-row: 1 / span 2;
}
.cs-gctl-top-cluster:not(.cs-gctl-top-cluster--zoom-only) > .cs-gctl-side-slot {
grid-column: 2;
grid-row: 1 / span 2;
}
/* Zoom-only dock: single column flush against the share-reserved gutter. */
.cs-gctl-top-cluster--zoom-only {
--cs-gctl-pad: 0px;
width: var(--cs-gctl-cell);
padding: 0;
grid-template-columns: var(--cs-gctl-cell);
}
.cs-gctl-top-cluster--zoom-only > .cs-gctl-top-pad {
display: none;
}
.cs-gctl-top-cluster--zoom-only > .cs-gctl-zoom {
grid-column: 1;
grid-row: 1 / span 2;
}
.cs-gctl-mobile-toggle { display: none !important; }
.cs-globe-controls--mobile .cs-gctl-mobile-toggle { display: none !important; }
.cs-globe-controls--mobile .cs-globe-dock-inner {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 8px;
}
.cs-gctl-compass { display: none !important; }
.cs-gctl-btn { width: 36px; height: 36px; }
.cs-stage-fabs {
left: 10px;
top: 10px;
gap: 8px;
}
.cs-stage-fabs .balloon-trigger,
.cs-stage-fabs .cs-layers-cog,
.cs-stage-fabs .cs-search-fab,
.cs-stage-fabs .cs-stage-hero-help-fab,
.cs-stage-fabs .cs-exposure-save-fab {
width: 38px;
height: 38px;
}
.cs-stage-fabs .balloon-trigger .balloon-icon { width: 20px; height: 20px; }
/* Full-width sheet for layers + search panels (only when open: `[hidden]` must stay `display:none`). */
.cs-stage-fabs .cs-layers-panel:not([hidden]) {
position: fixed;
inset: auto 0 0 0;
left: 0;
right: 0;
bottom: calc(10px + env(safe-area-inset-bottom, 0px));
top: auto;
width: 100vw;
max-width: 100vw;
min-width: 0;
min-height: 0;
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
max-height: calc(100dvh - 10px - env(safe-area-inset-bottom, 0px));
display: flex;
flex-direction: column;
overflow: hidden;
padding-bottom: var(--space-2);
}
/* Cog sheet: tab strip at the bottom (thumb zone); head stays top; body scrolls. */
.cs-stage-fabs .cs-layers-panel .cs-layers-sticky-top {
display: contents;
}
.cs-stage-fabs .cs-layers-panel .cs-layers-head {
order: 1;
flex: 0 0 auto;
padding-bottom: var(--space-2);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(18, 24, 38, 0.98);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.cs-stage-fabs .cs-layers-panel .cs-layers-tabs {
order: 10;
flex: 0 0 auto;
margin-top: 0;
margin-bottom: 0;
padding-top: var(--space-2);
padding-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--space-3));
border-top: 1px solid rgba(255, 255, 255, 0.12);
border-bottom: none;
background: rgba(18, 24, 38, 0.98);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.cs-stage-fabs .cs-layers-panel .cs-layers-tab {
border-top: 2px solid transparent;
border-bottom: none;
margin-bottom: 0;
padding-top: 0.65rem;
padding-bottom: 0.65rem;
}
.cs-stage-fabs .cs-layers-panel .cs-layers-tab[aria-selected="true"] {
border-top-color: rgba(0, 255, 178, 0.85);
border-bottom-color: transparent;
}
.cs-stage-fabs .cs-layers-panel .cs-layers-tab-panel {
order: 2;
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
/* Sensitivity tab: keep Reset/Done above the bottom tab bar; scroll body only. */
.cs-stage-fabs .cs-layers-panel #cs-layers-panel-sens.cs-layers-tab-panel:not([hidden]) {
display: flex;
flex-direction: column;
overflow: hidden;
}
.cs-stage-fabs .cs-layers-panel #cs-layers-panel-sens .cs-layers-sens-host {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
.cs-stage-fabs .cs-layers-panel #cs-layers-panel-sens .cs-sens-panel.cs-sens-panel--embedded {
flex: 1 1 auto;
min-height: 0;
max-height: none;
display: flex;
flex-direction: column;
overflow: hidden;
margin-top: 0;
}
.cs-stage-fabs .cs-layers-panel .cs-sens-embed-scroll {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
.cs-stage-fabs .cs-layers-panel .cs-sens-panel--embedded .cs-sens-foot {
flex: 0 0 auto;
margin-top: 0;
padding: var(--space-3) 0 var(--space-2);
background: rgba(18, 24, 38, 0.98);
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
#stage-canvas > .cs-search-panel:not([hidden]) {
position: fixed;
inset: auto 0 0 0;
left: 0;
right: 0;
bottom: calc(10px + env(safe-area-inset-bottom, 0px));
top: auto;
width: 100vw;
max-width: 100vw;
min-width: 0;
min-height: 0;
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
max-height: calc(100dvh - 10px - env(safe-area-inset-bottom, 0px));
display: flex;
flex-direction: column;
overflow: hidden;
padding-bottom: var(--space-2);
}
/* Loupe sheet: same pattern — scrollable tab body, tab labels docked at bottom. */
#stage-canvas > .cs-search-panel .search-title {
order: 1;
flex: 0 0 auto;
margin-bottom: 0;
}
#stage-canvas > .cs-search-panel .cs-search-tab-panel {
order: 2;
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
#stage-canvas > .cs-search-panel .search-status {
order: 3;
flex: 0 0 auto;
margin-top: 0;
padding: var(--space-2) 0 0;
}
/* Match `.cs-stage-fabs .cs-layers-panel .cs-layers-tabs` / `.cs-layers-tab` (cog sheet). */
#stage-canvas > .cs-search-panel .cs-search-tabs {
order: 10;
flex: 0 0 auto;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
gap: 0;
margin-top: 0;
margin-bottom: 0;
padding-top: var(--space-2);
padding-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--space-3));
border-top: 1px solid rgba(255, 255, 255, 0.12);
border-bottom: none;
background: rgba(18, 24, 38, 0.98);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
#stage-canvas > .cs-search-panel .cs-search-tab {
flex: 1 1 25%;
min-width: 0;
margin: 0;
padding: 0.65rem 0.35rem;
font-family: var(--font-ui);
font-size: 0.68rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
line-height: 1.25;
color: var(--fg-muted);
text-align: center;
background: transparent;
border: none;
border-radius: 0;
border-top: 2px solid transparent;
border-bottom: none;
margin-bottom: 0;
box-shadow: none;
cursor: pointer;
transition: color 120ms ease, border-color 120ms ease;
-webkit-appearance: none;
appearance: none;
}
#stage-canvas > .cs-search-panel .cs-search-tab:hover,
#stage-canvas > .cs-search-panel .cs-search-tab:focus-visible {
color: var(--fg-0);
outline: none;
}
#stage-canvas > .cs-search-panel .cs-search-tab[aria-selected="true"] {
color: #fff;
border-top-color: rgba(0, 255, 178, 0.85);
border-bottom-color: transparent;
background: transparent;
box-shadow: none;
}
}
@media (min-width: 769px) {
/* Map mode (desktop only): legacy bottom-left anchor for cog + panel when the
* map is active. On max-width 768px the layers sheet is a full-width bottom
* sheet; an unscoped #stage-canvas… rule would beat `.cs-stage-fabs …` in
* specificity and pin the panel incorrectly. */
#stage-canvas:has(#map.is-active) .cs-layers-cog {
left: 16px;
bottom: 16px;
right: auto;
top: auto;
}
#stage-canvas:has(#map.is-active) .cs-layers-panel {
left: 16px;
bottom: 64px;
right: auto;
top: auto;
}
#stage-canvas:has(#map.is-active) .cs-stage-fabs .cs-layers-panel {
left: calc(44px + 10px);
bottom: auto;
top: 0;
}
/* Layers sheet: fixed to the viewport (rail is short) so height spans
* top→bottom with a 10px margin above the safe area at the bottom. */
.cs-stage-fabs .cs-layers-panel:not([hidden]) {
position: fixed;
top: 10px;
bottom: calc(10px + env(safe-area-inset-bottom, 0px));
left: calc(12px + 44px + 10px);
right: auto;
width: min(920px, calc(100vw - 12px - 44px - 10px - 16px));
max-width: min(920px, calc(100vw - 12px - 44px - 10px - 16px));
max-height: none;
overflow-y: auto;
}
#stage-canvas:has(#map.is-active) .cs-stage-fabs .cs-layers-panel:not([hidden]) {
left: calc(16px + 44px + 10px);
width: min(920px, calc(100vw - 16px - 44px - 10px - 16px));
max-width: min(920px, calc(100vw - 16px - 44px - 10px - 16px));
top: 10px;
bottom: calc(10px + env(safe-area-inset-bottom, 0px));
max-height: none;
}
/* Loupe modal: fixed width (widest tab) + underline tabs matching layers cog. */
#stage-canvas > .cs-search-panel {
width: min(920px, calc(100vw - 12px - 40px - 10px - 24px));
min-width: 640px;
max-width: min(920px, calc(100vw - 12px - 40px - 10px - 24px));
box-sizing: border-box;
}
#stage-canvas > .cs-search-panel .cs-search-tabs {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
gap: 0;
margin-top: var(--space-2);
margin-bottom: var(--space-4);
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
#stage-canvas > .cs-search-panel .cs-search-tab {
flex: 1 1 0;
min-width: 0;
margin: 0;
padding: 0.5rem 0.35rem 0.55rem;
font-size: 0.68rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
line-height: 1.25;
color: var(--fg-muted);
text-align: center;
background: transparent;
border: none;
border-radius: 0;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
cursor: pointer;
box-shadow: none;
transition: color 120ms ease, border-color 120ms ease;
-webkit-appearance: none;
appearance: none;
}
#stage-canvas > .cs-search-panel .cs-search-tab:hover,
#stage-canvas > .cs-search-panel .cs-search-tab:focus-visible {
color: var(--fg-0);
outline: none;
}
#stage-canvas > .cs-search-panel .cs-search-tab[aria-selected="true"] {
color: #fff;
border-bottom-color: rgba(0, 255, 178, 0.85);
background: transparent;
box-shadow: none;
}
}
/* --------------------------------------------------------------- */
/* Leaflet top-right: globe-style dock (reuse .cs-gctl-* tokens). */
/* Horizontal inset matches header.top padding so the stack lines up
* with the language flag column (.cs-lang-summary is in .top-end). */
/* --------------------------------------------------------------- */
html {
--cs-map-control-right: var(--space-6);
/* Globe dock + map Leaflet top-right: same inset math + pixel nudge vs share FAB edge. */
--cs-globe-controls-right: calc(max(var(--cs-map-control-right), env(safe-area-inset-right, 0px)) + -7px + 8px);
}
@media (max-width: 768px) {
html {
--cs-map-control-right: var(--space-4);
}
}
/* Legacy Leaflet bars (other embeds): keep spacing if present */
.leaflet-top.leaflet-right .cs-back-to-globe,
.leaflet-top.leaflet-right .cs-basemap-toggle { margin-top: 10px; }
#map .leaflet-control.cs-leaflet-map-dock {
background: transparent !important;
border: none !important;
box-shadow: none !important;
filter: none !important;
/* Mirror `.cs-globe-controls` + `display:contents` inner: one flex column,
* gap between 2×2 cluster and compass/back matches globe (10px). */
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 10px;
margin: 0 !important;
padding: 0 !important;
pointer-events: none;
}
#map .cs-leaflet-map-dock-inner {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 10px;
pointer-events: none;
}
/* Desktop: flatten inner so top cluster + nav column stack like .cs-globe-controls */
@media (min-width: 769px) {
#stage-canvas:has(#map.is-active) .cs-leaflet-map-dock-inner {
display: contents;
}
}
/* Pan column + back: match compass width */
#map .cs-leaflet-map-dock__nav-column {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 10px;
pointer-events: none;
}
#map .cs-leaflet-map-dock__back {
pointer-events: auto;
}
#map .cs-leaflet-map-dock__back .cs-gctl-btn {
width: 100%;
box-sizing: border-box;
}
/* Share marker (globe + map): same tile look as Leaflet top-right controls.
* `right` must match `.cs-globe-controls` and `.leaflet-top.leaflet-right`
* (`--cs-globe-controls-right`), not raw `--cs-map-control-right`, or the
* share tile drifts vs the dock's top-right grid (especially in Leaflet). */
#cs-location-share-fab.cs-location-share-fab {
position: absolute;
right: var(--cs-globe-controls-right);
top: 12px;
/* Above globe dock (850) and Leaflet controls (~1000) so share stays tappable. */
z-index: 1100;
width: 36px;
height: 36px;
padding: 0;
margin: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
box-shadow: var(--shadow-2, 0 4px 20px rgba(0, 0, 0, 0.35));
background: rgba(10, 13, 26, 0.92) !important;
color: #fff !important;
border: 1px solid rgba(255, 255, 255, 0.18) !important;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
cursor: pointer;
line-height: 0;
-webkit-appearance: none;
appearance: none;
}
#cs-location-share-fab.cs-location-share-fab:hover,
#cs-location-share-fab.cs-location-share-fab:focus-visible {
background: rgba(124, 92, 255, 0.45) !important;
color: #fff !important;
outline: none;
}
/* Map mode: share top-right; dock same vertical anchor as .cs-globe-controls (top: 12px). */
#stage-canvas:has(#map.is-active) .leaflet-top.leaflet-right {
top: 12px !important;
right: var(--cs-globe-controls-right) !important;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 10px;
margin: 0 !important;
padding: 0 !important;
}
#stage-canvas:has(#map.is-active) .leaflet-top.leaflet-right > .leaflet-control {
float: none !important;
clear: none !important;
margin: 0 !important;
}
@media (max-width: 768px) {
/* Single globe-style dock control; pan pad hidden via .cs-gctl-compass rule above */
#stage-canvas:has(#map.is-active) .leaflet-top.leaflet-right {
top: 12px !important;
right: var(--cs-globe-controls-right) !important;
display: flex !important;
flex-direction: column;
align-items: flex-end;
gap: 8px;
}
/* Match `.cs-globe-controls` mobile `gap: 8px` between zoom cluster and nav/back. */
#map .leaflet-control.cs-leaflet-map-dock {
gap: 8px;
}
/* Back-to-globe row: match width of 2×2 zoom + basemap cluster (not a narrow pill). */
#map .cs-leaflet-map-dock-inner {
align-items: stretch;
}
}
/* Location share modal (copy + social) */
body.cs-location-share-open {
overflow: hidden;
touch-action: none;
}
.cs-location-share-modal {
position: fixed;
inset: 0;
z-index: var(--z-modal-app);
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-4);
box-sizing: border-box;
}
.cs-location-share-modal[hidden] {
display: none !important;
}
.cs-location-share-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(4, 8, 20, 0.72);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
cursor: pointer;
}
.cs-location-share-modal__card {
position: relative;
z-index: 1;
width: min(420px, 100%);
max-height: min(88dvh, 720px);
overflow: auto;
display: flex;
flex-direction: column;
gap: var(--space-3);
background: linear-gradient(180deg, rgba(20, 26, 48, 0.98), rgba(12, 16, 32, 0.98));
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: var(--radius-lg);
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
color: var(--fg-0);
padding: var(--space-4);
}
.cs-location-share-modal__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-3);
}
.cs-location-share-modal__title {
margin: 0;
font-size: 1.05rem;
font-weight: 700;
line-height: 1.3;
}
.cs-location-share-modal__close {
flex: 0 0 auto;
width: 34px;
height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.04);
color: var(--fg-0);
cursor: pointer;
}
.cs-location-share-modal__close svg {
width: 22px;
height: 22px;
flex-shrink: 0;
display: block;
}
.cs-location-share-modal__body {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.cs-location-share-copy-hint {
margin: 0;
font-size: 0.82rem;
color: var(--aurora-green);
}
.cs-location-share-actions {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.cs-location-share-action {
width: 100%;
justify-content: center;
text-align: center;
}
.cs-location-share-fav-wrap,
.cs-location-share-profile-wrap {
display: flex;
flex-direction: column;
gap: var(--space-2);
margin-top: var(--space-1);
padding-top: var(--space-3);
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
/* Force-hide when not sharing a favourite with name/photo (avoids stray checkboxes if [hidden] is overridden). */
.cs-location-share-fav-wrap[hidden],
.cs-location-share-profile-wrap[hidden] {
display: none !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
height: 0 !important;
overflow: hidden !important;
visibility: hidden !important;
}
.cs-location-share-fav-opt[hidden] {
display: none !important;
margin: 0 !important;
padding: 0 !important;
height: 0 !important;
overflow: hidden !important;
visibility: hidden !important;
}
.cs-location-share-fav-opt {
display: flex;
align-items: flex-start;
gap: var(--space-2);
margin: 0;
font-size: 0.9rem;
line-height: 1.35;
cursor: pointer;
color: var(--fg-1);
}
.cs-location-share-fav-opt input {
margin-top: 0.2em;
flex-shrink: 0;
}
.leaflet-popup-content .cs-fav-detail__actions {
margin-top: var(--space-2);
margin-bottom: 0;
}
/* Sharer intro (signed `by=` link) */
body.cs-share-sharer-open {
overflow: hidden;
touch-action: none;
}
.cs-share-sharer-modal {
position: fixed;
inset: 0;
z-index: calc(var(--z-modal-app) + 2);
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-4);
box-sizing: border-box;
}
.cs-share-sharer-modal[hidden] {
display: none !important;
}
.cs-share-sharer-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(4, 8, 20, 0.75);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
cursor: pointer;
}
.cs-share-sharer-modal__card {
position: relative;
z-index: 1;
width: min(400px, 100%);
padding: var(--space-5);
border-radius: var(--radius-lg);
background: linear-gradient(180deg, rgba(22, 28, 48, 0.99), rgba(12, 16, 32, 0.98));
border: 1px solid rgba(255, 255, 255, 0.12);
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
color: var(--fg-0);
display: flex;
flex-direction: column;
gap: var(--space-4);
align-items: stretch;
}
.cs-share-sharer-modal__hero {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-3);
text-align: center;
}
.cs-share-sharer-modal__avatar {
width: 72px;
height: 72px;
border-radius: 50%;
object-fit: cover;
border: 2px solid rgba(124, 92, 255, 0.45);
box-shadow: 0 0 20px rgba(0, 255, 178, 0.12);
}
.cs-share-sharer-modal__msg {
margin: 0;
font-size: 1rem;
line-height: 1.5;
color: var(--fg-1);
}
.cs-share-sharer-modal__cta {
width: 100%;
}
/* Share link: local vs shared layer/sensitivity choice */
body.cs-share-prefs-open {
overflow: hidden;
touch-action: none;
}
.cs-share-prefs-modal {
position: fixed;
inset: 0;
z-index: calc(var(--z-modal-app) + 3);
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-4);
box-sizing: border-box;
}
.cs-share-prefs-modal[hidden] {
display: none !important;
}
.cs-share-prefs-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(4, 8, 20, 0.75);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
cursor: pointer;
}
.cs-share-prefs-modal__card {
position: relative;
z-index: 1;
width: min(420px, 100%);
padding: var(--space-5);
border-radius: var(--radius-lg);
background: linear-gradient(180deg, rgba(22, 28, 48, 0.99), rgba(12, 16, 32, 0.98));
border: 1px solid rgba(255, 255, 255, 0.12);
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
color: var(--fg-0);
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.cs-share-prefs-modal__title {
margin: 0;
font-size: 1.15rem;
line-height: 1.35;
font-weight: 600;
}
.cs-share-prefs-modal__msg {
margin: 0;
font-size: 0.95rem;
line-height: 1.55;
color: var(--fg-1);
}
.cs-share-prefs-modal__actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
justify-content: stretch;
}
.cs-share-prefs-modal__actions .btn {
flex: 1 1 140px;
}
/* Zoom − / + on one row (minus left, plus right), under the share FAB. */
#map .leaflet-top.leaflet-right .leaflet-control-zoom.leaflet-bar {
display: flex;
flex-direction: row-reverse;
align-items: center;
gap: 5px;
float: none;
clear: none;
border: none;
box-shadow: none;
background: transparent;
}
#map .leaflet-top.leaflet-right .leaflet-control-zoom a {
width: 36px;
height: 36px;
line-height: 34px;
font-size: 1.35rem;
font-weight: 500;
background: rgba(10, 13, 26, 0.92) !important;
color: #fff !important;
border: 1px solid rgba(255, 255, 255, 0.18) !important;
border-radius: 10px !important;
box-shadow: var(--shadow-2, 0 4px 20px rgba(0, 0, 0, 0.35));
backdrop-filter: blur(8px);
box-sizing: border-box;
}
#map .leaflet-top.leaflet-right .leaflet-control-zoom a:hover {
background: rgba(124, 92, 255, 0.45) !important;
color: #fff !important;
}
/* Leaflet joins zoom links with border-bottom:none on last; keep full tiles in a row. */
#map .leaflet-top.leaflet-right .leaflet-control-zoom a:last-child {
border-bottom: 1px solid rgba(255, 255, 255, 0.18) !important;
}
/* Leaflet attribution readable on dark theme */
.leaflet-control-attribution {
background: rgba(10, 13, 26, 0.75) !important;
color: var(--fg-muted) !important;
font-size: 0.7rem;
}
.leaflet-control-attribution a { color: var(--fg-1, #8fa1c7); }
/* --------------------------------------------------------------- */
/* Exposure verdict chip (binary CLEAR / NOT CLEAR) */
/* --------------------------------------------------------------- */
.exposure-indicator {
position: fixed;
bottom: var(--space-4);
left: 50%;
transform: translateX(-50%);
/* Always wrap so `.exposure-details` (flex-basis 100%) sits on its own row; when only
* `[aria-expanded="true"]` had wrap, the peek row stayed beside the verdict and clipped POI leaked visually. */
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) var(--space-5);
background: rgba(18, 24, 38, 0.94);
border: 1px solid var(--border);
/* Match expanded card radius (avoid full pill in idle/collapsed chrome). */
border-radius: var(--radius-lg, 14px);
box-shadow: var(--shadow-2);
z-index: 20;
min-width: min(92vw, 460px);
justify-content: flex-start;
font-family: var(--font-ui);
}
.exposure-indicator .verdict-icon {
display: inline-grid;
place-items: center;
width: 32px; height: 32px;
border-radius: 50%;
font-size: 1.05rem;
font-weight: 700;
background: rgba(255, 255, 255, 0.05);
color: currentColor;
flex: 0 0 auto;
}
.exposure-indicator .verdict-body {
display: flex;
flex-direction: column;
line-height: 1.2;
min-width: 0;
flex: 1 1 auto;
}
/* Collapsed chip: grid places the score column spanning all text rows so the badge
* is vertically centered on the verdict copy (expanded keeps flex column + verdict-head row). */
.exposure-indicator[aria-expanded="false"] .verdict-body {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-rows: auto auto auto;
column-gap: var(--space-3);
row-gap: 0;
align-items: start;
}
.exposure-indicator[aria-expanded="false"] .verdict-head {
display: contents;
}
.exposure-indicator[aria-expanded="false"] .verdict-label {
grid-column: 1;
grid-row: 1;
}
.exposure-indicator[aria-expanded="false"] .verdict-score-column {
grid-column: 2;
grid-row: 1 / -1;
align-self: center;
justify-self: end;
}
.exposure-indicator[aria-expanded="true"] .verdict-body {
display: flex;
flex-direction: column;
}
.exposure-indicator .verdict-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--space-3);
width: 100%;
min-width: 0;
flex-wrap: wrap;
}
.exposure-indicator .verdict-label {
font-size: 0.95rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
flex: 1 1 auto;
min-width: 0;
}
.exposure-indicator .verdict-score {
flex: 0 0 auto;
display: inline-flex;
align-items: baseline;
gap: 0;
padding: 4px 10px;
border-radius: var(--radius-full);
font-family: var(--font-ui);
font-variant-numeric: tabular-nums;
line-height: 1;
border: 1px solid rgba(255, 255, 255, 0.14);
background: rgba(255, 255, 255, 0.08);
box-shadow: 0 0 16px rgba(255, 255, 255, 0.06);
}
.exposure-indicator .verdict-score__value {
font-size: 1.2rem;
font-weight: 800;
}
.exposure-indicator .verdict-score__suffix {
font-size: 0.68rem;
font-weight: 700;
opacity: 0.88;
margin-left: 1px;
}
/* Score badge + optional semi-circular gauge stack (gauge visible only when expanded). */
.exposure-indicator .verdict-score-column {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 6px;
flex: 0 0 auto;
}
.exposure-indicator .verdict-clearspot-gauge {
width: 100px;
max-width: min(100px, 30vw);
line-height: 0;
pointer-events: none;
}
.exposure-indicator .verdict-clearspot-gauge__svg {
display: block;
width: 100%;
height: auto;
vertical-align: top;
}
.exposure-indicator[aria-expanded="false"] .verdict-clearspot-gauge,
.exposure-indicator:not([data-has-score="1"]) .verdict-clearspot-gauge {
display: none !important;
}
.exposure-indicator[data-verdict="clear"] .verdict-score {
border-color: rgba(0, 255, 178, 0.35);
background: rgba(0, 255, 178, 0.1);
box-shadow: 0 0 16px rgba(0, 255, 178, 0.12);
}
.exposure-indicator[data-verdict="moderate"] .verdict-score {
border-color: rgba(249, 115, 22, 0.38);
background: rgba(249, 115, 22, 0.11);
box-shadow: 0 0 16px rgba(249, 115, 22, 0.14);
}
.exposure-indicator[data-verdict="not-clear"] .verdict-score {
border-color: rgba(239, 68, 68, 0.38);
background: rgba(239, 68, 68, 0.11);
box-shadow: 0 0 16px rgba(239, 68, 68, 0.18);
}
.exposure-indicator[data-verdict="pending"] .verdict-score {
border-color: rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.06);
}
.exposure-indicator .verdict-sub {
font-size: 0.78rem;
color: var(--fg-muted);
font-weight: 500;
letter-spacing: 0;
text-transform: none;
margin-top: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Collapsed chip: allow two lines so distance / nuisance lines use width (expanded keeps one line in the header). */
.exposure-indicator[aria-expanded="false"] .verdict-sub {
grid-column: 1;
grid-row: 2;
margin-top: 0;
white-space: normal;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
text-overflow: clip;
}
.exposure-indicator[aria-expanded="false"][data-verdict="pending"] .verdict-label {
white-space: normal;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
}
.exposure-indicator .verdict-location {
display: flex;
flex-direction: column;
gap: 2px;
}
.exposure-indicator .verdict-place {
display: block;
font-size: 0.70rem;
color: var(--fg-muted);
font-family: var(--font-ui);
font-weight: 500;
letter-spacing: 0;
text-transform: none;
margin-top: 1px;
opacity: 0.92;
white-space: normal;
line-height: 1.35;
}
.exposure-indicator .verdict-place:empty {
display: none;
}
.exposure-indicator .verdict-coords {
display: block;
font-size: 0.70rem;
color: var(--fg-muted);
font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
font-weight: 500;
letter-spacing: 0;
text-transform: none;
margin-top: 0;
opacity: 0.85;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.exposure-indicator .verdict-coords:empty { display: none; }
.exposure-indicator .verdict-location[hidden] { display: none !important; }
.exposure-indicator[data-verdict="pending"] { color: var(--fg-muted); }
.exposure-indicator[data-verdict="clear"] { color: var(--aurora-green); border-color: rgba(0, 255, 178, 0.40); }
.exposure-indicator[data-verdict="moderate"] { color: #fb923c; border-color: rgba(251, 146, 60, 0.42); }
.exposure-indicator[data-verdict="not-clear"] { color: #fb7185; border-color: rgba(251, 113, 133, 0.42); }
.exposure-indicator[data-verdict="clear"] .verdict-icon { background: rgba(0, 255, 178, 0.12); box-shadow: 0 0 18px rgba(0, 255, 178, 0.30); }
.exposure-indicator[data-verdict="moderate"] .verdict-icon { background: rgba(251, 146, 60, 0.14); box-shadow: 0 0 18px rgba(251, 146, 60, 0.28); }
.exposure-indicator[data-verdict="not-clear"] .verdict-icon { background: rgba(251, 113, 133, 0.14); box-shadow: 0 0 18px rgba(251, 113, 133, 0.30); }
/* Collapsed chip: tighter vertical rhythm (same corner radius as expanded via base rule). */
.exposure-indicator[aria-expanded="false"] {
padding: 6px var(--space-4);
gap: var(--space-1);
}
.exposure-indicator[aria-expanded="false"] .verdict-location {
grid-column: 1;
grid-row: 3;
gap: 1px;
}
@media (max-width: 640px) {
.exposure-indicator {
left: 0;
right: 0;
bottom: 0;
transform: none;
width: 100%;
max-width: none;
min-width: 0;
border-radius: 0;
padding: var(--space-3) var(--space-4);
box-sizing: border-box;
}
.exposure-indicator[aria-expanded="false"] {
padding: 6px var(--space-4);
}
.exposure-indicator .verdict-icon { width: 28px; height: 28px; font-size: 0.95rem; }
.exposure-indicator .verdict-label { font-size: 0.85rem; }
.exposure-indicator .verdict-score__value { font-size: 1.05rem; }
.exposure-indicator .verdict-score__suffix { font-size: 0.62rem; }
.exposure-indicator .verdict-sub { font-size: 0.72rem; }
.exposure-indicator .verdict-coords { font-size: 0.66rem; }
.exposure-indicator .verdict-place { font-size: 0.66rem; }
}
/* Chromium "Add to Home Screen" prompt: top-centre banner with dismiss */
.cs-pwa-install {
position: fixed;
top: calc(env(safe-area-inset-top, 0px) + var(--space-3));
left: 50%;
transform: translateX(-50%);
z-index: 35;
display: inline-flex;
align-items: center;
gap: var(--space-3);
padding: 0.5rem 0.55rem 0.5rem 1rem;
max-width: calc(100vw - 2rem);
font-family: var(--font-ui);
background: rgba(18, 24, 38, 0.94);
border: 1px solid var(--border);
border-radius: var(--radius-full);
box-shadow: var(--shadow-2);
backdrop-filter: blur(8px);
color: var(--fg-0);
}
.cs-pwa-install[hidden] { display: none; }
/* Hide the floating top-center banner once the user has added the
* app to the Home Screen (any "app mode" display). The burger-menu
* entry follows the same rule via the media query below. */
@media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui) {
.cs-pwa-install { display: none !important; }
}
/* -------------------------------------------------------------
* Burger-menu "Install app" entry (mobile only).
*
* Always available when the app is not yet installed, independent
* of beforeinstallprompt - Samsung Internet and iOS Safari never
* fire that event but still let users add to the Home Screen
* manually, so we expose the entry and tailor the tap flow
* (native prompt when possible, instructions modal otherwise).
* ------------------------------------------------------------- */
.cs-nav-install { display: none; }
.cs-nav-install[hidden] { display: none !important; }
@media (max-width: 768px) {
.cs-nav-install {
display: inline-flex;
align-items: center;
gap: 0.55rem;
width: 100%;
padding: var(--space-3) 0;
background: transparent;
border: 0;
border-bottom: 1px solid var(--border);
color: var(--brand, #7c5cff);
font-family: inherit;
font-size: 1rem;
font-weight: 600;
text-align: left;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
}
.cs-nav-install[hidden] { display: none !important; }
.cs-nav-install svg {
flex: 0 0 auto;
color: var(--brand, #7c5cff);
}
.cs-nav-install:focus-visible {
outline: 2px solid var(--brand, #7c5cff);
outline-offset: 2px;
border-radius: 6px;
}
.cs-nav-install:hover { color: var(--fg-0); }
.cs-nav-install:hover svg { color: var(--fg-0); }
}
@media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui) {
.cs-nav-install { display: none !important; }
}
.cs-nav-map-tools {
display: none;
}
@media (max-width: 768px) {
header.top.nav-open .top-nav .cs-nav-map-tools {
display: flex;
flex-direction: column;
gap: var(--space-3);
width: 100%;
padding: var(--space-3) 0;
border-bottom: 1px solid var(--border);
box-sizing: border-box;
}
header.top.nav-open .top-nav .cs-nav-map-tools .btn.cs-nav-map-tool {
width: 100%;
margin: 0;
box-sizing: border-box;
text-align: center;
justify-content: center;
}
}
/* -------------------------------------------------------------
* Manual install-instructions modal (shown when deferredPrompt
* is unavailable, e.g. Samsung Internet, iOS Safari, Firefox
* Android).
* ------------------------------------------------------------- */
.cs-install-help {
position: fixed;
inset: 0;
z-index: var(--z-modal-app);
display: none;
align-items: center;
justify-content: center;
padding: var(--space-4);
}
.cs-install-help.is-open { display: flex; }
.cs-install-help__backdrop {
position: absolute;
inset: 0;
background: rgba(5, 8, 15, 0.72);
backdrop-filter: blur(6px);
cursor: pointer;
}
.cs-install-help__card {
position: relative;
width: min(420px, 100%);
max-height: calc(100dvh - 2 * var(--space-4));
overflow-y: auto;
background: var(--bg-1, #111726);
color: var(--fg-0);
border: 1px solid var(--border);
border-radius: 18px;
padding: var(--space-5) var(--space-4) var(--space-4);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45),
0 0 0 1px rgba(124, 92, 255, 0.18);
font-family: var(--font-ui);
}
.cs-install-help__close {
position: absolute;
top: 10px; right: 10px;
width: 32px; height: 32px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
color: var(--fg-muted);
border: 0;
border-radius: 50%;
cursor: pointer;
}
.cs-install-help__close:hover {
color: var(--fg-0);
background: rgba(255, 255, 255, 0.08);
}
.cs-install-help__close svg {
width: 22px;
height: 22px;
flex-shrink: 0;
display: block;
}
.cs-install-help__title {
margin: 0 2.4rem 0.35rem 0;
font-size: 1.1rem;
font-weight: 700;
line-height: 1.25;
}
.cs-install-help__lead {
margin: 0 0 var(--space-3);
color: var(--fg-muted);
font-size: 0.9rem;
line-height: 1.4;
}
.cs-install-help__steps {
margin: 0 0 var(--space-4);
padding-left: 1.25rem;
color: var(--fg-0);
font-size: 0.92rem;
line-height: 1.45;
}
.cs-install-help__steps li { margin-bottom: 0.4rem; }
.cs-install-help__steps li:last-child { margin-bottom: 0; }
.cs-install-help__ok {
display: block;
width: 100%;
padding: 0.7rem 1.1rem;
font-family: inherit;
font-size: 0.95rem;
font-weight: 700;
color: #fff;
background: var(--grad-primary, linear-gradient(105deg, #8E54E9 0%, #3ECFDC 48%, #47D1A0 100%));
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: var(--radius-full, 999px);
cursor: pointer;
-webkit-appearance: none;
appearance: none;
}
.cs-install-help__ok:focus-visible {
outline: 2px solid #fff;
outline-offset: 2px;
}
body.cs-install-help-open {
overflow: hidden;
touch-action: none;
}
.cs-pwa-install-text {
font-size: 0.85rem;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.cs-pwa-install-btn {
padding: 0.4rem 0.95rem;
font-size: 0.8rem;
font-weight: 700;
font-family: inherit;
letter-spacing: 0.02em;
color: #fff;
background: var(--grad-primary);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: var(--radius-full);
cursor: pointer;
white-space: nowrap;
-webkit-appearance: none;
appearance: none;
flex: 0 0 auto;
}
.cs-pwa-install-btn:focus-visible,
.cs-pwa-install-close:focus-visible {
outline: 2px solid var(--brand, #7c5cff);
outline-offset: 2px;
}
.cs-pwa-install-close {
width: 28px; height: 28px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
color: var(--fg-muted);
border: 0;
border-radius: 50%;
cursor: pointer;
flex: 0 0 auto;
}
.cs-pwa-install-close:hover { color: var(--fg-0); background: rgba(255, 255, 255, 0.08); }
.cs-pwa-install-close svg { display: block; pointer-events: none; }
@media (max-width: 480px) {
.cs-pwa-install { gap: var(--space-2); padding: 0.45rem 0.45rem 0.45rem 0.75rem; }
.cs-pwa-install-text { font-size: 0.78rem; max-width: 45vw; }
.cs-pwa-install-btn { font-size: 0.74rem; padding: 0.35rem 0.7rem; }
}
/* --------------------------------------------------------------- */
/* Modal / onboarding */
/* --------------------------------------------------------------- */
.modal-backdrop {
position: fixed; inset: 0; z-index: 40;
background: rgba(0, 0, 0, 0.65);
backdrop-filter: blur(6px);
display: grid; place-items: center;
animation: fade-in var(--dur-2) var(--ease);
}
.modal-card {
background: var(--bg-1);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--space-8);
width: min(480px, 92vw);
box-shadow: var(--shadow-glow);
}
.modal-card h2 { font-size: 1.5rem; }
.modal-card .steps {
display: flex; gap: var(--space-2); margin-bottom: var(--space-4);
}
.modal-card .steps span {
flex: 1; height: 3px; border-radius: var(--radius-full);
background: var(--border);
}
.modal-card .steps span.active {
background: var(--grad-primary-h);
}
.modal-card .actions { display: flex; gap: var(--space-3); margin-top: var(--space-6); }
/* --------------------------------------------------------------- */
/* Slider (sensitivity settings) */
/* --------------------------------------------------------------- */
input[type=range] {
width: 100%;
appearance: none;
background: var(--border);
height: 4px;
border-radius: var(--radius-full);
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 18px; height: 18px; border-radius: 50%;
background: var(--grad-primary);
cursor: pointer;
box-shadow: var(--shadow-2);
}
/* --------------------------------------------------------------- */
/* CMP banner */
/* --------------------------------------------------------------- */
.cmp-banner {
position: fixed; bottom: var(--space-4); left: var(--space-4); right: var(--space-4);
max-width: 640px; margin: 0 auto;
background: var(--bg-1);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: var(--space-4);
z-index: 30;
box-shadow: var(--shadow-2);
display: flex; align-items: center; gap: var(--space-4);
flex-wrap: wrap;
}
.cmp-banner p { margin: 0; font-size: 0.85rem; flex: 1; min-width: 240px; }
.cmp-banner .actions { display: flex; gap: var(--space-2); }
/* --------------------------------------------------------------- */
/* Skeleton loader */
/* --------------------------------------------------------------- */
.skel {
background: linear-gradient(90deg, var(--bg-1) 0%, var(--bg-2) 50%, var(--bg-1) 100%);
background-size: 200% 100%;
animation: shimmer 1.4s infinite linear;
border-radius: var(--radius-sm);
}
@keyframes shimmer { 0% { background-position: -150% 0 } 100% { background-position: 150% 0 } }
@keyframes fade-in { from { opacity: 0 } to { opacity: 1 } }
/* --------------------------------------------------------------- */
/* Onboarding modal */
/* --------------------------------------------------------------- */
.onboarding-modal,
.balloon-teaser {
position: fixed; inset: 0; z-index: var(--z-modal-app);
background: rgba(0, 0, 0, 0.65);
backdrop-filter: blur(6px);
display: grid; place-items: center;
animation: fade-in var(--dur-2) var(--ease);
}
.onboarding-modal--sheet {
place-items: end center;
align-content: end;
padding: 0;
}
.onboarding-modal .modal-card {
width: min(1200px, min(96vw, max(80vw, 320px)));
display: flex;
flex-direction: column;
max-height: min(94vh, 980px);
}
.onboarding-modal--sheet .modal-card {
width: 100%;
max-width: 100%;
max-height: min(94dvh, 980px);
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
margin: 0;
padding: var(--space-4) var(--space-4) env(safe-area-inset-bottom, 0);
}
.onboarding-modal .ob-scroll {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.onboarding-modal .ob-footer {
flex-shrink: 0;
margin-top: var(--space-2);
padding-top: var(--space-3);
border-top: 1px solid var(--border);
background: var(--bg-1);
}
.onboarding-modal--sheet .ob-sec.is-past {
margin-bottom: var(--space-4);
padding-bottom: var(--space-3);
border-bottom: 1px solid var(--border);
opacity: 0.88;
}
.onboarding-modal .ob-geoloc-note {
font-size: 0.9rem;
margin-top: var(--space-3);
}
.onboarding-modal .progress {
height: 4px; width: 100%; border-radius: var(--radius-full);
background: var(--border); overflow: hidden; margin-bottom: var(--space-6);
}
.onboarding-modal .progress .bar {
display: block; height: 100%; width: 0%;
background: var(--grad-primary-h);
transition: width var(--dur-2) var(--ease);
}
.onboarding-modal .slider-row {
display: grid;
grid-template-columns: 140px 1fr 48px;
align-items: center;
gap: var(--space-3);
margin: var(--space-3) 0;
font-size: 0.9rem;
}
.onboarding-modal .slider-row .val { text-align: right; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.onboarding-modal .lead { color: var(--fg-1); }
.onboarding-modal .ob-intro-copy {
display: flex;
flex-direction: column;
gap: var(--space-3);
margin-top: var(--space-2);
}
.onboarding-modal .ob-intro-copy .lead { margin: 0; font-size: 0.92rem; line-height: 1.45; }
/* Match `.cs-stage-hero-modal__body .cs-seo-hero__title` (help "?" modal) for first-visit intro headline. */
.onboarding-modal h2.ob-title--seo-hero {
font-size: clamp(1.4rem, 3.2vw, 2.1rem);
margin: 0 0 var(--space-3);
background: var(--grad-primary-h, linear-gradient(90deg, #8E54E9 0%, #3ECFDC 50%, #47D1A0 100%));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.onboarding-modal h2.ob-title--seo-hero em {
font-style: italic;
background: none;
-webkit-text-fill-color: #d8fbf4;
color: #d8fbf4;
text-shadow: 0 0 20px rgba(0, 255, 178, 0.3);
}
.onboarding-modal .checkbox { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-4); font-size: 0.9rem; }
.onboarding-modal .actions,
.balloon-teaser .actions {
display: flex; gap: var(--space-3); justify-content: flex-end; margin-top: var(--space-6);
}
.btn, .onboarding-modal .btn, .cmp-banner .btn, .balloon-teaser .btn {
background: var(--grad-primary);
color: #fff;
padding: 0.6rem 1.1rem;
border-radius: var(--radius-full);
font-weight: 700;
letter-spacing: 0.02em;
border: 1px solid rgba(255, 255, 255, 0.22);
cursor: pointer;
transition: filter var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.btn:not(.btn-secondary):not(.btn-ghost):not(.btn-link):not(.btn-danger):hover,
.onboarding-modal .btn:not(.btn-secondary):not(.btn-ghost):not(.btn-link):not(.btn-danger):hover,
.cmp-banner .btn:not(.btn-secondary):not(.btn-ghost):not(.btn-link):not(.btn-danger):hover,
.balloon-teaser .btn:not(.btn-secondary):not(.btn-ghost):not(.btn-link):not(.btn-danger):hover {
filter: brightness(1.05);
box-shadow: var(--shadow-2);
}
/* Secondary actions share .btn padding but stay off the primary gradient. */
.btn.btn-secondary,
a.btn.btn-secondary {
background: rgba(26, 31, 53, 0.72);
color: var(--fg-0);
border: 1px solid var(--border);
}
.btn.btn-secondary:hover,
a.btn.btn-secondary:hover {
background: rgba(255, 255, 255, 0.08);
filter: none;
box-shadow: none;
}
.btn-link {
background: transparent;
color: var(--fg-muted);
border: 0; padding: 0.6rem 0.8rem; cursor: pointer; font-weight: 500;
}
.btn-link:hover { color: var(--fg-0); }
.cmp-banner .cmp-inner { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; width: 100%; }
.cmp-banner .cmp-text { flex: 1; min-width: 220px; }
.cmp-banner .cmp-text p { margin-top: var(--space-1); color: var(--fg-muted); }
.cmp-banner .cmp-actions { display: flex; gap: var(--space-2); }
.cmp-banner .cmp-detail {
width: 100%;
padding-top: var(--space-3);
border-top: 1px solid var(--border);
margin-top: var(--space-3);
display: grid; gap: var(--space-2);
}
/* Hot-air balloon trigger */
.balloon-trigger {
position: fixed;
bottom: var(--space-4);
right: var(--space-4);
width: 52px; height: 52px;
border-radius: 50%;
background: linear-gradient(135deg, var(--aurora-violet), var(--aurora-violet-deep));
color: #fff;
font-size: 1.4rem;
box-shadow: 0 4px 20px rgba(123, 63, 196, 0.40), var(--shadow-2);
border: 1px solid rgba(123, 94, 167, 0.50);
z-index: 25;
padding: 0;
display: grid; place-items: center;
}
/* --------------------------------------------------------------- */
/* Auth / Account pages */
/* --------------------------------------------------------------- */
.auth-shell {
min-height: 100vh;
display: grid; place-items: center;
padding: var(--space-6);
background:
radial-gradient(40% 40% at 20% 20%, rgba(123, 94, 167, 0.22), transparent 70%),
radial-gradient(50% 50% at 80% 80%, rgba(0, 255, 178, 0.10), transparent 70%),
radial-gradient(35% 35% at 60% 15%, rgba(88, 232, 255, 0.08), transparent 70%),
var(--bg-0);
}
.auth-card {
background: var(--bg-1);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--space-8);
width: min(420px, 96vw);
box-shadow: var(--shadow-2);
}
.auth-card .brand-link {
font-family: var(--font-ui); font-weight: 800; font-size: 1.05rem;
display: inline-flex; align-items: baseline; text-decoration: none;
}
.auth-card .brand-link .brand-name { font-size: inherit; }
.auth-card h1 { margin-top: var(--space-4); font-size: 1.5rem; }
.auth-card label { display: block; margin-top: var(--space-4); font-size: 0.85rem; color: var(--fg-1); }
.auth-card label span { display: block; margin-bottom: 4px; }
.auth-card input, .auth-card select, .card input, .card select, .card textarea {
width: 100%;
background: var(--bg-2);
border: 1px solid var(--border);
color: var(--fg-0);
border-radius: var(--radius);
padding: 0.6rem 0.8rem;
font: inherit;
}
.auth-card .btn, .auth-card .btn-ghost { margin-top: var(--space-5); width: 100%; text-align: center; }
.btn-ghost {
display: inline-block;
background: transparent; border: 1px solid var(--border);
color: var(--fg-0);
padding: 0.6rem 1.1rem; border-radius: var(--radius); font-weight: 600; cursor: pointer;
}
.btn-wide { width: 100%; text-align: center; }
.divider { text-align: center; margin: var(--space-5) 0; position: relative; color: var(--fg-muted); font-size: 0.8rem; }
.divider::before, .divider::after {
content: ''; position: absolute; top: 50%; width: 40%; height: 1px; background: var(--border);
}
.divider::before { left: 0; } .divider::after { right: 0; }
.divider span { background: var(--bg-1); padding: 0 var(--space-3); }
.muted { color: var(--fg-muted); }
.center { text-align: center; }
.alert { padding: var(--space-3); border-radius: var(--radius); margin: var(--space-3) 0; font-size: 0.9rem; }
.alert-error { background: rgba(255, 107, 53, 0.12); color: #ffcbb0; border: 1px solid rgba(255, 107, 53, 0.35); }
.alert-success { background: rgba(0, 255, 178, 0.10); color: #9bf3d4; border: 1px solid rgba(0, 255, 178, 0.35); }
.alert-info { background: rgba(88, 232, 255, 0.10); color: #c5edff; border: 1px solid rgba(88, 232, 255, 0.35); }
.account-grid {
display: grid;
grid-template-columns: 320px 1fr;
gap: var(--space-6);
padding: var(--space-6);
align-items: start;
}
@media (max-width: 900px) {
.account-grid { grid-template-columns: 1fr; }
}
.card {
background: var(--bg-1);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--space-6);
box-shadow: var(--shadow-1);
}
.card.danger { border-color: rgba(255, 107, 53, 0.35); }
.card h2 { font-size: 1.2rem; margin: 0 0 var(--space-3); }
.card h3 { margin-top: var(--space-5); font-size: 0.95rem; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.card .actions { margin-top: var(--space-5); display: flex; gap: var(--space-3); justify-content: flex-end; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 640px) { .grid-2 { grid-template-columns: 1fr; } }
.profile-card { text-align: center; }
.profile-card .avatar-wrap { display: flex; justify-content: center; margin-bottom: var(--space-4); }
.profile-card .avatar.lg { width: 128px; height: 128px; border-radius: 50%; object-fit: cover; box-shadow: var(--shadow-2); }
.profile-card input[type=file] { display: none; }
.profile-card form { margin-top: var(--space-3); }
.btn-danger {
background: rgba(255, 107, 53, 0.14);
color: #ffcbb0;
border: 1px solid rgba(255, 107, 53, 0.35);
padding: 0.6rem 1.1rem;
border-radius: var(--radius);
font-weight: 600;
}
.btn-danger:hover { background: rgba(255, 107, 53, 0.22); }
/* Avatar crop