/* Local Noto subsets replace the theme's Google Fonts import (no third-party request). */
@font-face { font-family: "Noto Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../theme/cyber/fonts/NotoSans-400-O_OpD7v.woff2") format("woff2"); }
@font-face { font-family: "Noto Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("../theme/cyber/fonts/NotoSans-700-Q5Qtltd.woff2") format("woff2"); }
@font-face { font-family: "Noto Sans Display"; font-style: normal; font-weight: 400; font-display: swap; src: url("../theme/cyber/fonts/NotoSansDisplay-400-BcZjey7.woff2") format("woff2"); }
@font-face { font-family: "Noto Sans Display"; font-style: normal; font-weight: 700; font-display: swap; src: url("../theme/cyber/fonts/NotoSansDisplay-700-dpQfsKZ.woff2") format("woff2"); }

/* Scientific presentation on top of the CYBER theme. */
.obs-figure .apex-chart { min-height: 280px; }
.obs-figure .card-header .flex-1 { min-width: min(18rem, 100%); }
.obs-figure figcaption { opacity: .75; font-size: .8125rem; line-height: 1.55; }
.obs-quantity { font-variant-numeric: tabular-nums; }
.obs-quantity .unit { opacity: .7; margin-inline-start: .25em; }
.obs-uncertainty { opacity: .7; }
.obs-source-badge { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; font-size: .75rem; opacity: .85; }
.obs-source-badge a { text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .35); }
.obs-sources { font-size: .8125rem; }
.obs-sources dt { font-weight: 700; }
.obs-sources dd { opacity: .85; }
.obs-caveat { border-inline-start: 3px solid var(--bs-warning); padding: .75rem 1rem; background: rgba(255, 255, 255, .04); }
.obs-method { border-inline-start: 3px solid var(--bs-theme); padding: .75rem 1rem; background: rgba(255, 255, 255, .04); }
.obs-stat .value { font-size: 1.75rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.obs-stat .label { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.obs-theme-card { display: block; height: 100%; text-decoration: none; color: inherit; transition: transform .15s, border-color .15s; }
.obs-theme-card:hover { transform: translateY(-2px); border-color: var(--bs-theme); }
.obs-theme-card .icon { font-size: 1.75rem; color: var(--bs-theme); }
.obs-theme-card .soon { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; opacity: .6; }
.menu-item.disabled .menu-link { opacity: .45; cursor: default; }
.leaflet-container { background: #06121c !important; font-family: inherit; }
.obs-map { width: 100%; min-height: 320px; }
.obs-map-legend { background: rgba(10, 22, 32, .85); color: rgba(255, 255, 255, .85); padding: .5rem .75rem; font-size: .75rem; border: 1px solid rgba(255, 255, 255, .15); }
.obs-map-legend .swatch { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; margin-inline-end: .4rem; vertical-align: middle; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: #122332; color: rgba(255, 255, 255, .9); }
.leaflet-popup-content { font-size: .8125rem; }
.leaflet-control-attribution { background: rgba(10, 22, 32, .7) !important; color: rgba(255, 255, 255, .6) !important; font-size: .65rem; }
.leaflet-control-attribution a { color: rgba(255, 255, 255, .8) !important; }
.leaflet-bar a { background: #122332; color: #fff; border-color: rgba(255,255,255,.2); }
.leaflet-bar a:hover { background: #1d3a52; }
/* Hero card with a 3D scene and data cards over it (components/scene.html.twig). */
.obs-hero { overflow: hidden; border-color: rgba(255, 255, 255, .12); background: #03070c; }
.obs-hero-stage { position: relative; height: var(--obs-hero-height, 520px); background: radial-gradient(ellipse at 70% 40%, rgba(40, 90, 140, .28), transparent 60%), radial-gradient(ellipse at 20% 90%, rgba(var(--bs-theme-rgb, 60, 210, 165), .10), transparent 55%), #03070c; }
.obs-hero-canvas { position: absolute; inset: 0; }
.obs-hero-canvas canvas { display: block; width: 100% !important; height: 100% !important; cursor: grab; touch-action: pan-y; }
.obs-hero-canvas canvas:active { cursor: grabbing; }
.obs-hero-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(3, 7, 12, .86) 0%, rgba(3, 7, 12, .45) 32%, transparent 58%), linear-gradient(0deg, rgba(3, 7, 12, .95) 0%, transparent 38%); }
.obs-hero-head { position: absolute; top: 0; left: 0; max-width: min(36rem, 100%); padding: 2rem 2.25rem; pointer-events: none; }
.obs-hero-head a, .obs-hero-head button { pointer-events: auto; }
.obs-hero-kicker { display: inline-flex; align-items: center; gap: .6rem; font-size: .7rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--bs-theme); }
.obs-hero-kicker::before { content: ""; width: 2rem; height: 1px; background: currentColor; }
.obs-hero-title { font-family: "Noto Sans Display", "Noto Sans", sans-serif; font-size: clamp(1.7rem, 3.2vw, 2.75rem); font-weight: 700; line-height: 1.05; letter-spacing: -.01em; margin: .75rem 0 .75rem; text-shadow: 0 2px 24px rgba(0, 0, 0, .6); }
.obs-hero-title em { font-style: normal; color: var(--bs-theme); }
.obs-hero-text { font-size: .95rem; line-height: 1.6; opacity: .85; max-width: 30rem; margin: 0; text-shadow: 0 1px 12px rgba(0, 0, 0, .8); }
.obs-hero-readouts { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; margin: 1.25rem 0 0; }
.obs-hero-readouts dt { font-size: .65rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; opacity: .6; }
.obs-hero-readouts dd { margin: 0; font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; color: #fff; }
.obs-hero-legend { position: absolute; right: 1.25rem; top: 1.25rem; list-style: none; margin: 0; padding: .6rem .8rem; font-size: .72rem; background: rgba(5, 14, 22, .6); border: 1px solid rgba(255, 255, 255, .1); backdrop-filter: blur(6px); pointer-events: none; }
.obs-hero-legend .swatch { display: inline-block; width: .65rem; height: .65rem; border-radius: 50%; margin-inline-end: .45rem; vertical-align: -.05rem; box-shadow: 0 0 8px currentColor; }
.obs-hero-hint { position: absolute; right: 1.25rem; bottom: 6.5rem; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; opacity: 0; transition: opacity .6s; pointer-events: none; }
.obs-hero-ready .obs-hero-hint { opacity: .55; }
.obs-hero-status { position: absolute; right: 1.25rem; bottom: 6.5rem; opacity: .7; }
.obs-hero-static .obs-hero-stage { background: radial-gradient(circle at 72% 45%, rgba(255, 190, 110, .18), transparent 30%), radial-gradient(ellipse at 70% 40%, rgba(40, 90, 140, .35), transparent 60%), #03070c; }
.obs-hero-cards { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .75rem; margin-top: -5.25rem; padding: 0 1.25rem 1.25rem; }
.obs-glass-card { padding: .85rem 1rem; background: rgba(9, 22, 34, .62); border: 1px solid rgba(255, 255, 255, .1); border-top: 2px solid var(--bs-theme); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.obs-glass-card.tone-warm { border-top-color: #ffb36b; }
.obs-glass-card.tone-hot { border-top-color: #ff6b6b; }
.obs-glass-card.tone-cold { border-top-color: #67ceff; }
.obs-glass-card.tone-violet { border-top-color: #c7b3ff; }
.obs-glass-card .label { font-size: .64rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .65; }
.obs-glass-card .value { font-size: 1.45rem; font-weight: 700; line-height: 1.15; margin-top: .2rem; font-variant-numeric: tabular-nums; color: #fff; }
.obs-glass-card .meta { font-size: .72rem; opacity: .65; margin-top: .15rem; }
.obs-hero-foot { padding: .75rem 1.25rem 1rem; border-top: 1px solid rgba(255, 255, 255, .08); font-size: .8125rem; }
.obs-hero-foot p { opacity: .72; line-height: 1.55; }
@media (max-width: 767.98px) {
  .obs-hero-stage { height: min(var(--obs-hero-height, 520px), 26rem); }
  .obs-hero-head { padding: 1.25rem; }
  .obs-hero-text { display: none; }
  .obs-hero-shade { background: linear-gradient(180deg, rgba(3, 7, 12, .8) 0%, transparent 45%), linear-gradient(0deg, rgba(3, 7, 12, .95) 0%, transparent 35%); }
  .obs-hero-legend { top: auto; bottom: 5.5rem; right: .75rem; }
  .obs-hero-hint, .obs-hero-status { display: none; }
  .obs-hero-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: -3.5rem; padding: 0 .75rem .75rem; }
  .obs-glass-card .value { font-size: 1.15rem; }
}

/* Stat tiles with a sparkline of the series. */
.obs-stat { position: relative; overflow: hidden; }
.obs-stat::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, var(--bs-theme), transparent); opacity: .8; }
.obs-spark { position: relative; height: 46px; margin: .6rem -.25rem .1rem; }
.obs-spark svg { display: block; width: 100%; height: 100%; overflow: visible; }
.obs-spark .line { fill: none; stroke: var(--bs-theme); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.obs-spark .area { fill: url(#obs-spark-fill); opacity: .9; }
.obs-spark-dot { position: absolute; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--bs-theme), 0 0 10px var(--bs-theme); }
.obs-spark-range { display: flex; justify-content: space-between; font-size: .65rem; opacity: .5; font-variant-numeric: tabular-nums; }
.obs-trend { display: inline-flex; align-items: center; gap: .2rem; font-size: .72rem; font-weight: 700; padding: .05rem .4rem; border-radius: 2px; background: rgba(255, 255, 255, .07); margin-inline-start: .4rem; vertical-align: .25rem; }
.obs-trend.up { color: #ffb36b; }
.obs-trend.down { color: #67ceff; }

/* World maps: local NASA Blue Marble tiles (same base as the poles atlas) or OpenStreetMap. */
.obs-map { background: #06121c; }
.obs-map .leaflet-tile-pane .obs-basemap-bluemarble { filter: saturate(.72) brightness(.72); }
.obs-map .leaflet-tile-pane .obs-basemap-osm { filter: invert(1) hue-rotate(185deg) saturate(.55) brightness(.82) contrast(.92); }
.obs-map .leaflet-control-layers { background: rgba(10, 22, 32, .88); color: rgba(255, 255, 255, .88); border: 1px solid rgba(255, 255, 255, .15); border-radius: 0; font-size: .75rem; }
.obs-map .leaflet-control-layers-toggle { filter: invert(1) brightness(.85); }
.obs-map-legend { backdrop-filter: blur(6px); }
sup, sub { font-size: .7em; }
@media (prefers-reduced-motion: reduce) {
  .app-loader { display: none !important; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
.obs-tile-link { color: inherit; text-decoration: none; }
.obs-tile-link::after { content: ""; position: absolute; inset: 0; } /* the whole tile is clickable */
.obs-stat:has(.obs-tile-link) { transition: transform .15s, border-color .15s; }
.obs-stat:has(.obs-tile-link):hover { transform: translateY(-2px); border-color: var(--bs-theme); }
.obs-stat .obs-source-badge { position: relative; z-index: 1; }

/* Magnetic atlas embedded in the layout (templates/poles/*, styles scoped by bin/embed-atlas). */
.atlas-embed { margin-top: .5rem; padding: 0 0 calc(92px + env(safe-area-inset-bottom)); border: 1px solid rgba(255, 255, 255, .1); min-width: 0; }
.atlas-embed .site-shell { width: auto; margin: 0; padding: 0 clamp(.75rem, 2vw, 2rem); }
.atlas-embed .intro { display: none; }
.atlas-page-positions .time-dock [data-dock-mode="reversal"], .atlas-page-reversal .time-dock [data-dock-mode="paleo"], .atlas-page-reversal .time-dock [data-dock-mode="noaa"], .atlas-page-reversal .time-dock [data-dock-mode="wmm"] { display: none; }
@media (min-width: 768px) {
  .atlas-embed .time-dock { inset-inline-start: 15.625rem; }
  .app-sidebar-minified .atlas-embed .time-dock { inset-inline-start: 4.375rem; }
}
.obs-atlas-page .app-content-inner-padding { padding-bottom: 0; }

/* Consent banner (layout/_consent.html.twig): bottom sheet, page behind dimmed until a choice is made. */
.obs-consent-backdrop { position: fixed; inset: 0; z-index: 3000; background: rgba(2, 6, 10, .62); backdrop-filter: grayscale(.6) blur(2px); -webkit-backdrop-filter: grayscale(.6) blur(2px); opacity: 0; pointer-events: none; transition: opacity .25s; }
.obs-consent.is-open .obs-consent-backdrop { opacity: 1; pointer-events: auto; }
.obs-consent-panel { position: fixed; inset: auto 0 0 0; z-index: 3001; padding: 1.25rem max(1rem, env(safe-area-inset-right)) calc(1.25rem + env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); background: rgba(10, 22, 32, .97); border-top: 2px solid var(--bs-theme); box-shadow: 0 -18px 40px rgba(0, 0, 0, .45); color: rgba(255, 255, 255, .9); }
.obs-consent-panel:focus { outline: none; }
.obs-consent-inner { max-width: 72rem; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; }
.obs-consent-copy { flex: 1 1 30rem; }
.obs-consent-title { font-size: 1rem; font-weight: 700; letter-spacing: .04em; margin: 0 0 .4rem; }
.obs-consent-title .bi { color: var(--bs-theme); }
.obs-consent-copy p { margin: 0; font-size: .875rem; line-height: 1.6; opacity: .85; }
.obs-consent-copy a { color: var(--bs-theme); }
.obs-consent-actions { display: flex; gap: .75rem; flex: 0 0 auto; }
.obs-consent-btn { min-width: 9rem; padding: .6rem 1.25rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
/* Both choices look the same; focus shows as a ring only, so the initial focus favours neither. */
.obs-consent-btn, .obs-consent-btn:focus { background: transparent; color: var(--bs-theme); border-color: var(--bs-theme); }
.obs-consent-btn:focus-visible { box-shadow: 0 0 0 .2rem rgba(var(--bs-theme-rgb), .45); }
.obs-consent-btn:hover, .obs-consent-btn:active { background: var(--bs-theme); color: #000; }
html.obs-consent-pending { overflow: hidden; }
@media (max-width: 575.98px) {
  .obs-consent-actions { width: 100%; }
  .obs-consent-btn { flex: 1; min-width: 0; }
}
.obs-story { max-width: 62rem; font-size: .975rem; line-height: 1.75; }
.obs-story p { margin-bottom: 1rem; }

/* Full screen (fullscreen controller): the hero stage or the map fills the screen. */
.obs-fs-btn { position: absolute; z-index: 3; top: 1rem; right: 1rem; width: 2.4rem; height: 2.4rem; display: grid; place-items: center; color: #fff; background: rgba(5, 14, 22, .6); border: 1px solid rgba(255, 255, 255, .18); backdrop-filter: blur(6px); }
.obs-fs-btn:hover, .obs-fs-btn:focus-visible { border-color: var(--bs-theme); color: var(--bs-theme); }
.obs-hero .obs-hero-legend { right: 4rem; }
.obs-hero.is-fullscreen { display: flex; flex-direction: column; background: #03070c; border: 0; }
.obs-hero.is-fullscreen { height: 100vh; }
.obs-hero.is-fullscreen .obs-hero-stage { flex: 1 1 auto; min-height: 0; height: auto; }
.obs-hero.is-fullscreen .obs-hero-cards { margin-top: -6rem; }
.obs-map-card.is-fullscreen { display: flex; flex-direction: column; background: var(--bs-body-bg, #0a141d); }
.obs-map-card.is-fullscreen .card-body { flex: 1; display: flex; flex-direction: column; }
.obs-map-card.is-fullscreen { height: 100vh; }
.obs-map-card.is-fullscreen .card-body { min-height: 0; }
.obs-map-card.is-fullscreen .obs-map { flex: 1 1 auto; min-height: 0; height: auto !important; }
.obs-fs-inline { margin-inline-start: auto; }

/* Sun gallery (sun/gallery.html.twig). */
.obs-gallery-when { font-family: "Noto Sans Display", "Noto Sans", sans-serif; font-size: clamp(1.3rem, 2.4vw, 2rem); font-weight: 700; margin-top: .25rem; }
.obs-gallery-slider { accent-color: var(--bs-theme); }
.obs-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr)); gap: 1rem; }
.obs-gallery-card { overflow: hidden; background: #03070c; }
.obs-gallery-frame { position: relative; aspect-ratio: 1; background: #000; }
.obs-gallery-frame img { width: 100%; height: 100%; object-fit: contain; display: block; transition: opacity .3s; }
.obs-gallery-card.is-loading .obs-gallery-frame img { opacity: .45; }
.obs-gallery-card.is-missing .obs-gallery-frame img { visibility: hidden; }
.obs-gallery-card.is-stale [data-role="taken"] { color: var(--bs-warning); }
.obs-gallery-band { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--bs-theme); white-space: nowrap; }
.obs-gallery-card .obs-fs-btn { top: .6rem; right: .6rem; }
.obs-gallery-card.is-fullscreen { display: flex; flex-direction: column; }
.obs-gallery-card.is-fullscreen { height: 100vh; }
.obs-gallery-card.is-fullscreen .obs-gallery-frame { flex: 1 1 auto; min-height: 0; aspect-ratio: auto; }
.obs-gallery-card.is-fullscreen figcaption { flex: 0 0 auto; }

/* Probability cells and alerts (space weather now). */
.obs-prob { display: inline-block; min-width: 3.2rem; padding: .05rem .35rem; background: linear-gradient(90deg, rgba(var(--bs-theme-rgb), .45) var(--p), rgba(255, 255, 255, .05) var(--p)); font-variant-numeric: tabular-nums; }
.obs-prob-table td, .obs-prob-table th { vertical-align: middle; }
.obs-alert summary { cursor: pointer; }
.obs-alert .badge { background: rgba(255, 255, 255, .12); }
.obs-alert-warning .badge { background: rgba(255, 191, 137, .35); }
.obs-alert-alert .badge { background: rgba(255, 107, 107, .4); }
.obs-alert-watch .badge { background: rgba(103, 206, 255, .35); }
.obs-alert pre { white-space: pre-wrap; font-size: .72rem; opacity: .85; }