/* A transparent atlas; controls inherit the same glass panel as the other heroes. */
body {
    --ww-hero-ink: #273247;
    --ww-hero-paper: rgba(250, 251, 252, .94);
    --ww-hero-land: #d6dfe8;
    --ww-hero-line: rgba(78, 105, 138, .27);
    --ww-hero-accent: #2d5bd7;
}
body.env-earth { --ww-hero-accent: #4a6741; }
body.env-mars { --ww-hero-accent: #c45a3b; }
body.dark-mode, body.env-orbit {
    --ww-hero-ink: #e0e7f0;
    --ww-hero-paper: rgba(21, 29, 42, .94);
    --ww-hero-land: #334966;
    --ww-hero-line: rgba(121, 154, 190, .36);
    --ww-hero-accent: #8ba9f0;
}
body.dark-mode.env-earth { --ww-hero-accent: #9ac784; }
body.dark-mode.env-mars { --ww-hero-accent: #e5a184; }
body.ww-hero-active #hero > .hero-copy { max-width: min(calc(43vw - 72px), 680px); position: relative; z-index: 2; }
body.ww-hero-active #profileCoin + div { min-width: 0; }
body.ww-hero-active #tagline-pill { max-width: 100%; }
body.ww-hero-active #tagline-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ww-hero {
    position: absolute; left: 32%; right: 0; top: min(50%, 50dvh); height: 86%; transform: translateY(-50%);
    color: var(--ww-hero-ink); pointer-events: none; font-family: Inter, sans-serif;
}
.ww-hero-map { width: 100%; height: 100%; }
.ww-hero-map svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ww-hero-country { fill: var(--ww-hero-land); stroke: none; cursor: pointer; pointer-events: visiblePainted; }
.ww-hero-country-active { fill: var(--ww-marker); fill-opacity: .38; }
.ww-hero-country:hover, .ww-hero-country.is-inspected, .ww-hero-country:focus-visible { stroke: var(--ww-hero-accent); stroke-width: 1.5; outline: none; }
.ww-hero-country-match, .ww-hero-country-selected { fill: var(--ww-hero-accent); fill-opacity: .85; stroke: var(--ww-hero-accent); stroke-width: 1.5; }
.ww-hero[data-layer="ai"] .ww-hero-country { pointer-events: none; cursor: default; }
.ww-hero-searching .ww-hero-country:not(.ww-hero-country-match) { opacity: .3; }
.ww-hero-searching .ww-hero-marker:not(.ww-hero-marker-match) { opacity: .2; }
.ww-hero-borders { fill: none; stroke: var(--ww-hero-line); stroke-width: .55; pointer-events: none; }
.ww-hero-marker { cursor: pointer; pointer-events: auto; outline: none; }
.ww-hero-hit { fill: transparent; }
.ww-hero-halo { fill: var(--ww-marker); fill-opacity: .12; }
.ww-hero-dot { fill: var(--ww-marker); stroke: var(--ww-hero-paper); stroke-width: 1.1; }
.ww-hero-marker.is-inspected .ww-hero-halo, .ww-hero-marker:focus-visible .ww-hero-halo { fill-opacity: .4; }
.ww-hero-marker:focus-visible .ww-hero-dot { stroke: var(--ww-hero-ink); stroke-width: 2; }
.ww-hero-marker.is-dimmed { opacity: .18; }
.ww-hero-slot[hidden] { display: none; }

/* Shared glass-panel, text-muted, text-primary and hero-planet-chip classes own
   the panel palette and typography, including the site's light panels in dark mode. */
.ww-hero-panel-body { display: grid; gap: 12px; line-height: 1.5; }
@media (min-width: 1024px) {
    #hero-sim-controls-world-watch { bottom: max(2rem, calc(100% - 100dvh + 2rem)); max-height: calc(100dvh - 128px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
}
.ww-hero-layer-controls { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.ww-hero-layer-controls button { padding: 0; border: 0; background: none; white-space: nowrap; }
.ww-hero-search-wrap { position: relative; display: flex; align-items: center; }
#hero-world-watch-search { width: 100%; min-width: 0; padding: 5px 24px 5px 8px; border: 1px solid #94a3b840; border-radius: 6px; background: transparent; font: inherit; }
#hero-world-watch-search::placeholder { color: #64748b; }
#hero-world-watch-search::-webkit-search-cancel-button { display: none; }
#hero-world-watch-clear { position: absolute; right: 3px; width: 22px; height: 24px; border: 0; background: none; font: 16px/1 Inter, sans-serif; cursor: pointer; }
#hero-world-watch-search-results { position: absolute; z-index: 5; top: calc(100% + 4px); left: 0; right: 0; max-height: 170px; overflow: auto; padding: 4px; border: 1px solid #94a3b840; border-radius: 6px; background: #fff; box-shadow: 0 4px 20px #2d3a8c14; }
#hero-world-watch-search-results[hidden] { display: none; }
#hero-world-watch-search-results button { display: block; width: 100%; padding: 6px; border: 0; background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; }
#hero-world-watch-search-results button:hover { background: #94a3b81a; }
#hero-world-watch-options { display: grid; gap: 6px; }
#hero-world-watch-options:empty { display: none; }
#hero-world-watch-options label { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#hero-world-watch-options select { width: 100%; min-width: 0; padding: 5px 6px; color: inherit; background: transparent; border: 1px solid #94a3b840; border-radius: 5px; font: inherit; cursor: pointer; }
#hero-world-watch-options option, #hero-world-watch-options optgroup { color: #2d3a8c; background: #fff; }
.ww-hero-overlay-controls { display: flex; flex-wrap: wrap; gap: 5px 12px; }
#hero-world-watch-options .ww-hero-overlay-toggle { justify-content: flex-start; gap: 5px; cursor: pointer; }
.ww-hero-overlay-toggle input { width: 11px; height: 11px; accent-color: #2d3a8c; }
#hero-world-watch-selection { max-height: 88px; overflow: auto; scrollbar-width: thin; border-top: 1px solid #94a3b833; padding-top: 8px; }
#hero-world-watch-selection:empty, #hero-world-watch-selection[hidden] { display: none; }
#hero-world-watch-selection strong { display: block; font-size: 12px; font-weight: 500; }
#hero-world-watch-selection p { margin: 3px 0; }
.ww-hero-panel-key { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 6px; }
.ww-hero-key { display: inline-flex; align-items: center; gap: 4px; font-size: 9px; }
.ww-hero-key i { width: 5px; height: 5px; border-radius: 50%; }
#hero-world-watch-details { min-height: 0; max-height: min(300px, 36dvh); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: thin; }
#hero-world-watch-details:not(:has(.ww-hero-detail-deck:not([hidden]))) { display: none; }
.ww-hero-detail-deck { display: grid; gap: 8px; }
.ww-hero-detail-deck[hidden], .ww-hero-context-map[hidden] { display: none; }
.ww-hero-detail-card { min-width: 0; padding-top: 8px; border-top: 1px solid #94a3b833; overflow-wrap: anywhere; }
.ww-hero-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }
.ww-hero-detail-card h3 { margin: 0; font-size: 12px; line-height: 1.4; font-weight: 500; }
.ww-hero-detail-meta { margin: 0 0 3px; font-size: 9px; }
.ww-hero-cycle-hint { margin: 4px 0; font-size: 9px; }
.ww-hero-detail-close { flex: 0 0 16px; border: 0; background: none; padding: 0; font: 16px/1 Inter, sans-serif; cursor: pointer; }
.ww-hero-detail-rows { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 4px 8px; margin: 8px 0; }
.ww-hero-detail-rows dd { margin: 0; text-align: right; }
.ww-hero-detail-note, .ww-hero-detail-evidence { margin-top: 4px; }
.ww-hero-detail-note summary, .ww-hero-detail-evidence summary { cursor: pointer; }
.ww-hero-detail-note p { margin: 4px 0; }
.ww-hero-detail-evidence a { display: block; margin: 4px 0; text-decoration: underline; text-underline-offset: 2px; }
.ww-hero-verification { display: block; margin-top: 4px; font-size: 9px; }
.ww-hero-context-map { padding-top: 8px; border-top: 1px solid #94a3b833; }
.ww-hero-context-label { margin: 0 0 4px; font-size: 9px; }
.ww-hero-context-map svg { width: 100%; height: auto; display: block; }
.ww-hero-context-country { fill: #d6dfe8; }
.ww-hero-context-map .ww-hero-borders { stroke: #94a3b8; }
.ww-hero-context-overlay { fill: var(--ww-marker); fill-opacity: .22; stroke: var(--ww-marker); stroke-width: 1; pointer-events: none; }
.ww-hero-context-overlay.ww-hero-range, .ww-hero-context-overlay.ww-hero-reach { fill-opacity: .12; stroke-dasharray: 4 3; }
.ww-hero-context-overlay.ww-hero-patrol, .ww-hero-context-overlay.ww-hero-mobile { stroke-dasharray: 3 2; }
.ww-hero-context-overlay.ww-hero-route { fill: none; stroke-dasharray: 2 3; }
.ww-hero-context-overlay.ww-hero-incident { stroke: #fff; }
.ww-hero-context-dot { fill: var(--ww-marker); stroke: #fff; stroke-width: 1; }
#hero-world-watch-status { margin: 0; }
.ww-hero-menu-footer { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; border-top: 1px solid #94a3b833; padding-top: 8px; }
#hero-world-watch-open { white-space: nowrap; }
#hero-world-watch-sources { min-width: 0; }
#hero-world-watch-sources summary { cursor: pointer; }
#hero-world-watch-sources > :not(summary) { max-height: 140px; overflow: auto; scrollbar-width: thin; padding-top: 6px; overflow-wrap: anywhere; }
#hero-world-watch-sources p { margin: 0 0 6px; }
#hero-world-watch-sources a { display: block; padding: 3px 0; }
#hero-sim-controls-world-watch :is(button, input, select, a, summary):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
body.env-orbit:not(.dark-mode) #hero-world-watch-search-results { background: #0a0f1e; }
body.env-orbit:not(.dark-mode) #hero-world-watch-search::placeholder { color: #ffffffb3; }
body.env-orbit:not(.dark-mode) #hero-sim-controls-world-watch .text-primary { color: #ffffffb3; }
body.env-orbit:not(.dark-mode) .ww-hero-context-country { fill: #334966; }
@media (min-width: 1800px) { .ww-hero { left: 25%; right: 1%; height: 88%; } }
@media (max-width: 1023px) {
    body.ww-hero-active #hero { justify-content: flex-start; padding-top: 130px; padding-bottom: 32px; }
    body.ww-hero-active #hero > .hero-copy { max-width: 680px; align-self: center; order: 0; }
    body.ww-hero-active #hero .hero-copy .max-w-2xl { max-width: 100% !important; }
    body.ww-hero-active #hero > .ww-hero-slot { width: calc(100% + 32px); align-self: center; margin: 28px 0 16px; order: 1; pointer-events: auto; }
    .ww-hero.ww-hero-inline { position: relative; inset: auto; width: 100%; height: auto; transform: none; }
    .ww-hero-inline .ww-hero-map { aspect-ratio: 2; }
    body.ww-hero-active #hero-sim-controls-world-watch { position: relative; inset: auto; order: 2; align-self: flex-end; margin-top: 2px; }
    body.ww-hero-active #hero-sim-controls-world-watch:not(.hero-collapsed) { width: min(100%, 360px) !important; }
    #hero-world-watch-details { max-height: 340px; }
}
@media (max-width: 479px) { body.ww-hero-active #hero { padding-top: 115px; } }