body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    touch-action: none;
    background-color:black;
}

html, body, canvas {
  touch-action: none;
  overscroll-behavior: contain;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

/* Top overlay stack (low → high): view chrome, filter, event fiche, menu corner, drag toast; menu panel when open */
:root {
  --z-overlay-view-chrome: 10;
  --z-overlay-filter: 15;
  --z-overlay-event-fiche: 19;
  --z-overlay-menu-corner: 20;
  --z-overlay-menu-panel: 200;
  --z-overlay-play-flash: 450;
  --z-overlay-drag-toast: 500;
  /* HTML outline via 8-way + 2px shadow only. Do not use -webkit-text-stroke:
     Samsung Internet ignores the stroke color and paints currentColor (often white). */
  --toast-pale-green: #c5e6d4;
  --toast-pale-red: #e8c4c4;
  --bottom-scroller-clearance: 80px;
  --timeline-height: 0px;
  --timeline-width: 172px;
  --timeline-top-inset: 8px;
  /* 1 = normal; <1 shrinks overlay chrome in small iframes (see bt/ui_scale.js). */
  --bt-ui-scale: 1;
  --chrome-text-halo:
    -1px -1px 0 #000000,
     1px -1px 0 #000000,
    -1px  1px 0 #000000,
     1px  1px 0 #000000,
    -1px 0 0 #000000,
     1px 0 0 #000000,
     0 -1px 0 #000000,
     0 1px 0 #000000,
    -2px 0 0 #000000,
     2px 0 0 #000000,
     0 -2px 0 #000000,
     0 2px 0 #000000;
}

#loading-text,
.time-bar-speed,
.time-bar-analemma-mode,
.speed-preset-option,
.time-bar-date,
.view-caption-show,
.view-caption-title-select,
.view-caption,
.view-caption-toggle {
  -webkit-text-stroke: 0;
  -webkit-text-fill-color: currentColor;
}

#glcanvas {
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: auto;
}

/*
 * Shrink overlay chrome in compact embeds. Earth/GL stays full-bleed (no zoom).
 * Timeline strip sizes stay in CSS px; zoom scales paint + layout together.
 * Drag scrollers are omitted — they already size from measured (post-zoom) menu metrics.
 */
#appMenu,
#oppositeTopChrome,
#date-picker,
#dragHintStack,
#speedDragValueToast,
#playPauseFlash,
#weatherFilter,
[data-bt-chrome-row] {
  zoom: var(--bt-ui-scale, 1);
}

#epicEarth {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

#timeBar {
    display: none;
}

#loading-text {
    color: darkgoldenrod;
    font-size: calc(14px * var(--bt-ui-scale, 1));
    font-family: Consolas, "Liberation Mono", "Courier New", monospace;
    line-height: 1.2;
    min-height: 1.2em;
    pointer-events: none;
    white-space: nowrap;
    text-shadow: var(--chrome-text-halo);
}

#loading-text:empty {
    display: none;
}

/* Top row opposite the hamburger: view menu (←/→ under it) → selection label. */
.opposite-top-chrome {
    position: fixed;
    /* + the shift onto the hamburger's line (ui.js alignViewMenusWithHamburger). */
    top: calc(6px + var(--opposite-top-shift, 0px));
    z-index: var(--z-overlay-view-chrome);
    pointer-events: none;
    box-sizing: border-box;
}

/* Landscape: the vertical timeline (z 18, full height) lies under the view
   menu's corner; keep the menu's controls on top (below the event fiche). */
body.timeline-vertical .opposite-top-chrome {
    z-index: var(--z-overlay-event-fiche);
}

/* Portrait: flush opposite the menu; extend to the hamburger corner. */
body.timeline-horizontal .opposite-top-chrome--left,
body:not(.timeline-vertical):not(.timeline-horizontal) .opposite-top-chrome--left {
    left: 8px;
    right: var(--menu-corner-size, 56px);
    width: auto;
    max-width: none;
}

body.timeline-horizontal .opposite-top-chrome--right,
body:not(.timeline-vertical):not(.timeline-horizontal) .opposite-top-chrome--right {
    left: var(--menu-corner-size, 56px);
    right: 8px;
    width: auto;
    max-width: none;
}

/*
 * Landscape: ←/→ sit on the timeline’s interior edge; row grows toward the menu.
 * --timeline-interior-inset is the CSS px from that screen edge to the strip interior.
 */
body.timeline-vertical .opposite-top-chrome--left {
    /* Zoomed (--bt-ui-scale): undo it on the screen-px inset; +8px lines up
       with the play button (timeline.css bottom stack). */
    left: calc(var(--timeline-interior-inset, 172px) / var(--bt-ui-scale, 1) + 8px);
    right: auto;
    width: calc(100% - var(--timeline-interior-inset, 172px) / var(--bt-ui-scale, 1) - 8px - 5.5rem);
    max-width: none;
}

body.timeline-vertical .opposite-top-chrome--right {
    left: auto;
    right: calc(var(--timeline-interior-inset, 172px) / var(--bt-ui-scale, 1) + 8px);
    width: calc(100% - var(--timeline-interior-inset, 172px) / var(--bt-ui-scale, 1) - 8px - 5.5rem);
    max-width: none;
}

.opposite-top-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    pointer-events: none;
}

.opposite-top-chrome--left .opposite-top-row {
    flex-direction: row;
    justify-content: flex-start;
}

/* Exterior (nav) at the right edge; then view; then selection toward the interior. */
.opposite-top-chrome--right .opposite-top-row {
    flex-direction: row-reverse;
    justify-content: flex-start;
}

.opposite-top-row > .selection-nav {
    flex: 0 0 auto;
    pointer-events: auto;
    /* Level with the Position/Orientation selects. */
    margin-top: 1px;
    order: 0;
}

.opposite-top-row > #viewSideChrome {
    flex: 0 1 auto;
    min-width: 0;
    order: 1;
}

.opposite-top-row > #selection-time-text {
    flex: 1 1 auto;
    min-width: 0;
    order: 2;
    /* Select padding so the first line lines up with the menus. */
    padding-top: 8px;
}

/* Own line under the view menus (selection_history.js), screen wide: from
   the screen edge (or the vertical timeline's interior edge) to the other
   edge. Negative margin: it doesn't widen the view menus' column. */
.view-side-chrome-captions > #selection-time-text {
    --selection-line-width: calc(100vw - 16px);
    width: var(--selection-line-width);
    max-width: none;
    margin: 6px calc(-1 * var(--selection-line-width)) 0 0;
    /* Text in line with the Position menu's (its border + padding). */
    padding: 0 12px;
    align-self: flex-start;
}

.view-side-chrome--right .view-side-chrome-captions > #selection-time-text {
    margin: 6px 0 0 calc(-1 * var(--selection-line-width));
    align-self: flex-end;
}

body.timeline-vertical .view-side-chrome-captions > #selection-time-text {
    --selection-line-width: calc(100vw - var(--timeline-interior-inset, 172px) / var(--bt-ui-scale, 1) - 16px);
}

#selection-time-text {
    box-sizing: border-box;
    color: #ffe7c2;
    font-size: clamp(12px, 3.2vmin, 16.8px);
    font-family: Consolas, "Liberation Mono", "Courier New", monospace;
    font-size-adjust: 0.5;
    line-height: 1.2;
    white-space: normal;
    overflow-wrap: break-word;
    min-width: 0;
    max-width: none;
    cursor: pointer;
    padding: 0;
    text-shadow: var(--chrome-text-halo);
    position: relative;
    z-index: 3;
    pointer-events: auto;
}

.opposite-top-chrome--left #selection-time-text {
    text-align: left;
}

.opposite-top-chrome--right #selection-time-text {
    text-align: right;
}

#selection-time-text[hidden] {
    display: none !important;
}

/* A view menu is open (ui.js setOpenViewMenu): its list goes over this line. */
body.view-menu-open #selection-time-text {
    visibility: hidden;
}

#selection-time-text:hover,
#selection-time-text:focus-visible {
    color: #fff4dc;
}

#current-time-text {
    align-self: stretch;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.play-stack {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.play-toggle-btn {
    all: unset;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    cursor: pointer;
    pointer-events: auto;
    /* Long-press opens the speed menu: no text selection / callout. */
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    touch-action: manipulation;
    color: #e8e8e8;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.22);
    flex-shrink: 0;
    font-size: 18px;
    line-height: 1;
}

.play-toggle-btn:hover,
.play-toggle-btn:focus-visible {
    background: rgba(0, 0, 0, 0.55);
    border-color: rgba(255, 255, 255, 0.4);
}

.play-toggle-btn.is-playing {
    color: #fff;
    background: rgba(40, 120, 80, 0.55);
    border-color: rgba(140, 220, 170, 0.45);
}

.play-toggle-btn.is-playing:hover,
.play-toggle-btn.is-playing:focus-visible {
    background: rgba(48, 140, 95, 0.65);
    border-color: rgba(160, 230, 185, 0.55);
}

.play-toggle-icon {
    font-size: 18px;
    line-height: 1;
    font-family: "Segoe UI Symbol", Consolas, monospace;
}

.analemma-cluster {
    z-index: 3;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 8px;
    pointer-events: auto;
    position: relative;
}

.analemma-cluster[hidden] {
    display: none !important;
}

.analemma-cluster.is-event .analemma-caption-title {
    color: #ffe7c2;
}

.analemma-cluster.is-event .analemma-caption-past,
.analemma-cluster.is-event .analemma-caption-since {
    display: none;
}

.analemma-cluster.is-bare .analemma-caption {
    padding-bottom: calc((36px - 1.2em) / 2);
}

.analemma-controls {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 6px;
}

.analemma-caption {
    color: #f0f0f0;
    font-size: 12px;
    font-family: Consolas, "Liberation Mono", "Courier New", monospace;
    line-height: 1.25;
    text-shadow: var(--chrome-text-halo);
    padding-bottom: 2px;
}

.analemma-caption-title {
    white-space: nowrap;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    display: inline-block;
    transform-origin: center center;
}

.analemma-caption-preload {
    color: darkgoldenrod;
    font-size: 14px;
    font-family: Consolas, "Liberation Mono", "Courier New", monospace;
    line-height: 1.2;
    white-space: nowrap;
    text-shadow: var(--chrome-text-halo);
}

.analemma-caption-preload.is-ready {
    color: #b4f0b4;
}

.analemma-caption-past,
.analemma-caption-since {
    white-space: nowrap;
    font-size: 12px;
}

.analemma-btn {
    all: unset;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    cursor: pointer;
    pointer-events: auto;
    color: #fff;
    background: #000;
    border: 1px solid rgba(255, 255, 255, 0.22);
    flex-shrink: 0;
    --analemma-loaded-pct: 0%;
    --analemma-playhead-pct: 0%;
}

/* Fill lives on the button itself so every pixel stays hittable. */
.analemma-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    /* Top = origin. Gray grows down as blobs load; green grows from the
       loaded boundary up toward the top while playing. */
    background: linear-gradient(
        to bottom,
        #3d3d3d 0%,
        #3d3d3d var(--analemma-playhead-pct),
        #b4f0b4 var(--analemma-playhead-pct),
        #b4f0b4 var(--analemma-loaded-pct),
        #000 var(--analemma-loaded-pct),
        #000 100%
    );
}

/* Catch clicks over the fill; ::before must not punch through to the globe. */
.analemma-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: auto;
}

.analemma-btn:disabled {
    cursor: pointer;
    pointer-events: auto;
}

.analemma-btn:hover,
.analemma-btn:focus-visible {
    border-color: rgba(255, 255, 255, 0.45);
}

.analemma-btn.is-playing {
    border-color: rgba(140, 220, 170, 0.45);
}

.analemma-btn.is-playing:hover,
.analemma-btn.is-playing:focus-visible {
    border-color: rgba(160, 230, 185, 0.55);
}

.analemma-btn.is-suggest,
.analemma-caption-title.is-suggest {
    animation: analemma-suggest-pulse 1.15s ease-in-out 4;
}

.analemma-btn.is-suggest-loop,
.analemma-caption-title.is-suggest-loop {
    animation: analemma-suggest-pulse 1.15s ease-in-out infinite;
}

@keyframes analemma-suggest-pulse {
    0%, 100% {
        transform: scale(1);
        border-color: rgba(255, 255, 255, 0.28);
    }
    45% {
        transform: scale(1.5);
        border-color: rgba(180, 240, 180, 0.95);
    }
}

@media (prefers-reduced-motion: reduce) {
    .analemma-btn.is-suggest,
    .analemma-btn.is-suggest-loop,
    .analemma-caption-title.is-suggest,
    .analemma-caption-title.is-suggest-loop {
        animation: none;
        border-color: rgba(180, 240, 180, 0.8);
    }
}

.analemma-btn-icon {
    display: flex;
    position: relative;
    z-index: 1;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: #fff;
    pointer-events: none;
}

.analemma-btn-icon svg {
    display: block;
    width: 18px;
    height: 18px;
}

.time-bar-speed-wrap {
    position: relative;
    align-self: center;
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 0.4em;
    flex: 0 0 auto;
    min-width: 0;
}

.menu-hamburger-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

#appMenu.menu-corner-right .menu-hamburger-row {
    flex-direction: row-reverse;
}

.menu-item-label {
    position: relative;
    display: inline-block;
}

.menu-item-label::after {
    content: '';
    position: absolute;
    left: 0;
    right: auto;
    bottom: -3px;
    height: 2px;
    width: calc(var(--movie-progress, 0) * 100%);
    background: darkorange;
    pointer-events: none;
}

.menu-item.is-movie-ready .menu-item-label::after,
.menu-item-label.is-movie-ready::after {
    width: 100%;
    background: #6ee86e;
}

.menu-item:not(.is-movie-baking):not(.is-movie-ready) .menu-item-label::after {
    width: 0;
}

.time-bar-speed {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #e8fff0;
    font-size: 11px;
    font-family: Consolas, "Liberation Mono", "Courier New", monospace;
    font-size-adjust: 0.5;
    letter-spacing: 0.02em;
    line-height: 1.2;
    user-select: none;
    cursor: pointer;
    opacity: 1;
    transition: color 0.15s ease, opacity 0.15s ease;
    /* Readable over a bright Moon limb (and dark space). */
    text-shadow: var(--chrome-text-halo);
}

.time-bar-speed.is-paused {
    color: #e0e0e0;
    opacity: 0.92;
}

.time-bar-speed:hover,
.time-bar-speed:focus-visible,
.time-bar-speed.is-open {
    color: #fff;
    outline: none;
}

.speed-preset-menu {
    position: absolute;
    left: 0;
    bottom: calc(100% + 6px);
    z-index: 25;
    min-width: max(100%, 11.5em);
    max-height: min(70vh, 22rem);
    overflow-y: auto;
    padding: 4px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(6px);
    -webkit-overflow-scrolling: touch;
}

.speed-preset-menu[hidden] {
    display: none !important;
}

.speed-preset-option {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 7px 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #e8fff0;
    font: 600 12px/1.25 Consolas, "Liberation Mono", "Courier New", monospace;
    letter-spacing: 0.02em;
    text-align: left;
    cursor: pointer;
    text-shadow: var(--chrome-text-halo);
}

.speed-preset-option:hover,
.speed-preset-option:focus-visible {
    background: rgba(255, 255, 255, 0.1);
    outline: none;
}

.speed-preset-option.is-selected {
    color: #fff;
    background: rgba(40, 120, 80, 0.55);
}

.drag-hint-stack {
    position: fixed;
    top: var(--chrome-extension-row-top, 54px);
    left: 8px;
    transform: none;
    z-index: var(--z-overlay-drag-toast);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 6px;
    width: min(300px, 88vw);
    max-width: min(300px, 88vw);
    pointer-events: none;
    box-sizing: border-box;
}

#playPauseFlash {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay-play-flash);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

#playPauseFlash[hidden] {
    display: none !important;
}

.play-pause-flash-cluster {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
}

.play-pause-flash-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(4.25rem, 20vmin, 7.5rem);
    height: clamp(4.25rem, 20vmin, 7.5rem);
    border-radius: 50%;
    color: #fff;
    background: rgba(0, 0, 0, 0.38);
}

.play-pause-flash-icon svg {
    display: block;
    width: clamp(2.4rem, 11.3vmin, 4.25rem);
    height: clamp(2.4rem, 11.3vmin, 4.25rem);
}

.play-pause-flash-cluster.is-animating {
    animation: play-pause-flash 1.5s ease-out forwards;
}

.play-pause-flash-cluster.is-animating.is-play {
    animation: play-pause-flash-play 2.6s ease-out forwards;
}

@keyframes play-pause-flash {
    0% {
        opacity: 0.55;
        transform: scale(0.82);
    }
    22% {
        opacity: 1;
        transform: scale(1.16);
    }
    100% {
        opacity: 0;
        transform: scale(1.28);
    }
}

@keyframes play-pause-flash-play {
    0% {
        opacity: 0.55;
        transform: scale(0.82);
    }
    12% {
        opacity: 1;
        transform: scale(1.16);
    }
    58% {
        opacity: 1;
        transform: scale(1.16);
    }
    100% {
        opacity: 0;
        transform: scale(1.24);
    }
}

@media (prefers-reduced-motion: reduce) {
    .play-pause-flash-cluster.is-animating {
        animation: play-pause-flash-static 1.4s ease-out forwards;
    }

    .play-pause-flash-cluster.is-animating.is-play {
        animation: play-pause-flash-static-play 2.5s ease-out forwards;
    }

    @keyframes play-pause-flash-static {
        0%, 30% { opacity: 1; transform: none; }
        100% { opacity: 0; transform: none; }
    }

    @keyframes play-pause-flash-static-play {
        0%, 55% { opacity: 1; transform: none; }
        100% { opacity: 0; transform: none; }
    }
}

.speed-drag-toast {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    z-index: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: 100%;
    box-sizing: border-box;
    padding: 5px 10px 4px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(126, 184, 160, 0.45);
    color: #b8e0ce;
    font-size: 11px;
    font-family: Consolas, "Liberation Mono", "Courier New", monospace;
    font-size-adjust: 0.5;
    letter-spacing: 0.02em;
    pointer-events: none;
    user-select: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    opacity: 1;
    transition: opacity 0.25s ease;
}

/* Coaching hints — light enough to read over the globe without masking chrome. */
.speed-drag-toast.is-hint {
    background: rgba(0, 0, 0, 0.38);
    border-color: rgba(126, 184, 160, 0.38);
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* Active vertical drag — opaque so filter / chrome cannot show through. */
.speed-drag-toast.is-drag {
    background: rgba(0, 0, 0, 0.9);
    border-color: rgba(126, 184, 160, 0.62);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.65);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.speed-drag-toast-lines {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    width: 100%;
    min-width: 0;
}

.speed-drag-toast-main {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-width: 0;
}

.speed-drag-toast-hide {
    all: unset;
    box-sizing: border-box;
    display: none;
    pointer-events: auto;
    cursor: pointer;
    padding: 1px 8px;
    border-radius: 4px;
    color: rgba(184, 224, 206, 0.7);
    font: 600 10px/1.2 system-ui, sans-serif;
    letter-spacing: 0.04em;
    text-transform: lowercase;
}

.speed-drag-toast.is-hint .speed-drag-toast-hide {
    display: inline-block;
}

.speed-drag-toast-hide:hover,
.speed-drag-toast-hide:focus-visible {
    color: #e8fff4;
    background: rgba(255, 255, 255, 0.08);
}

.speed-drag-toast[hidden] {
    display: none !important;
}

.speed-drag-toast.is-fading {
    opacity: 0;
}

.view-side-chrome {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    z-index: auto;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    max-width: min(28rem, 100%);
    pointer-events: none;
}

/* Caption column alignment follows the opposite-menu side. */
.view-side-chrome--left {
    flex-direction: row;
}

.view-side-chrome--right {
    flex-direction: row-reverse;
}

.view-side-chrome-captions {
    flex: 0 1 auto;
    min-width: 0;
    max-width: min(28rem, 100%);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    pointer-events: none;
}

.view-caption-select-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 8px;
    max-width: 100%;
    pointer-events: none;
}

.view-side-chrome--right .view-caption-select-row {
    flex-direction: row-reverse;
}

/* Menus keep their own width: not stretched to the view info text below. */
.view-side-chrome-captions > .view-caption-select-row {
    align-self: flex-start;
}

.view-side-chrome--right .view-side-chrome-captions > .view-caption-select-row {
    align-self: flex-end;
}

.view-caption-select-wrap {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
    flex: 1 1 auto;
    min-width: 0;
    pointer-events: auto;
    margin: 0;
    max-width: 100%;
}

.view-caption-orient-wrap {
    flex: 0 1 7.2rem;
}

/* Restore link — only while captions are off and the view menu is open. */
.view-caption-show {
    all: unset;
    box-sizing: border-box;
    display: none;
    flex: 0 0 auto;
    align-self: flex-end;
    pointer-events: auto;
    cursor: pointer;
    padding: 10px 0;
    color: rgba(184, 224, 206, 0.95);
    font: 600 10px/1.2 "Segoe UI", system-ui, sans-serif;
    text-decoration: underline;
    white-space: nowrap;
    text-shadow: var(--chrome-text-halo);
}

.view-captions-hidden .view-caption-select-row.is-menu-open .view-caption-show {
    display: inline-block;
}

/* Under the other view menu (ui.js setOpenViewMenu), out of the flow so
   the menus don't move. */
.view-caption-select-wrap:has(> .view-caption-show) {
    position: relative;
}

.view-caption-select-wrap > .view-caption-show {
    position: absolute;
    top: 100%;
    left: 0;
    padding: 6px 2px;
}

.view-side-chrome--right .view-caption-select-wrap > .view-caption-show {
    left: auto;
    right: 0;
}

.view-caption-show:hover,
.view-caption-show:focus-visible {
    color: #e8fff4;
    outline: none;
}

.view-caption-shortcut {
    box-sizing: border-box;
    flex: 0 0 auto;
    min-width: 5.9rem;
    margin: 0;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.42);
    color: rgba(184, 224, 206, 0.95);
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    pointer-events: auto;
    text-shadow: var(--chrome-text-halo);
}

.view-caption-shortcut:hover,
.view-caption-shortcut:focus-visible {
    background-color: rgba(0, 0, 0, 0.55);
    border-color: rgba(255, 255, 255, 0.22);
    outline: none;
}

.view-caption-title-select {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 8px 28px 8px 11px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.42)
      url("images/icons/chevron-down.svg")
      no-repeat right 10px center;
    appearance: none;
    -webkit-appearance: none;
    color: rgba(184, 224, 206, 0.95);
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    color-scheme: dark;
    text-shadow: var(--chrome-text-halo);
}

.view-side-chrome--right .view-caption-title-select {
    text-align: right;
    padding: 8px 11px 8px 28px;
    background-position: left 10px center;
}

.view-caption-title-select:hover,
.view-caption-title-select:focus-visible {
    background-color: rgba(0, 0, 0, 0.55);
    border-color: rgba(255, 255, 255, 0.22);
    outline: none;
}

.view-caption-title-select option {
    background: #1a1a1a;
    color: #e8e8e8;
    text-transform: uppercase;
}

.view-caption {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    z-index: 5;
    max-width: 100%;
    margin-top: 2px;
    /* Match select text inset (1px border + 11px padding), not the menu frame. */
    padding: 2px 12px 0;
    border-radius: 0;
    background: transparent;
    border: 0;
    color: rgba(220, 220, 220, 0.88);
    font-family: "Segoe UI", system-ui, sans-serif;
    pointer-events: auto;
    cursor: pointer;
    user-select: none;
    text-shadow: var(--chrome-text-halo);
}

.view-side-chrome--right .view-caption,
.view-side-chrome--right .view-caption-analemma-mode {
    text-align: right;
}

.view-caption:hover,
.view-caption:focus-visible {
    background: transparent;
    border: 0;
    outline: none;
}

.view-caption:hover .view-caption-body,
.view-caption:focus-visible .view-caption-body {
    color: rgba(235, 235, 235, 0.98);
}

.view-caption[hidden] {
    display: none !important;
}

/* Captions off: keep the shared view dropdown; hide body panels + hide link. */
.view-captions-hidden .view-caption,
.view-captions-hidden .view-caption-toggle,
.view-captions-hidden .view-caption-analemma-mode {
    display: none !important;
}

.view-caption-body {
    font-size: 11px;
    line-height: 1.35;
    color: rgba(210, 210, 210, 0.88);
}

.view-caption-orient {
    margin-top: 8px;
}

.view-caption-analemma-mode {
    margin-top: 8px;
    padding: 0 12px;
}

.view-caption-analemma-mode[hidden] {
    display: none !important;
}

.view-caption-bm-note {
    margin-top: 6px;
    color: darkgoldenrod;
    font-size: 10px;
    line-height: 1.35;
    font-family: Consolas, "Liberation Mono", "Courier New", monospace;
}

.view-caption-bm-note[hidden] {
    display: none !important;
}

.view-caption-toggle {
    margin-top: 4px;
    padding: 0 12px;
    align-self: flex-start;
    border: 0;
    background: transparent;
    color: rgba(184, 224, 206, 0.95);
    font: inherit;
    font-size: 10px;
    text-decoration: underline;
    cursor: pointer;
    pointer-events: auto;
    text-shadow: var(--chrome-text-halo);
}

.view-side-chrome--right .view-caption-toggle {
    align-self: flex-end;
    text-align: right;
}

.view-caption-toggle:hover,
.view-caption-toggle:focus-visible {
    color: #e8fff4;
    outline: none;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.speed-drag-arrows {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    line-height: 1;
    font-size: 11px;
    flex: 0 0 auto;
}

.speed-drag-arrow {
    opacity: 0.45;
    color: #9ecbb8;
    transition: opacity 0.15s ease, transform 0.15s ease, color 0.15s ease;
    animation: speed-drag-hint 1.1s ease-in-out infinite;
}

.speed-drag-arrow.up {
    animation-name: speed-drag-hint-up;
}

.speed-drag-arrow.down {
    animation-name: speed-drag-hint-down;
    animation-delay: 0.55s;
}

.speed-drag-toast.is-up .speed-drag-arrow.up,
.speed-drag-toast.is-down .speed-drag-arrow.down {
    opacity: 1;
    color: #e8fff4;
    animation-duration: 0.55s;
}

.speed-drag-toast.is-up .speed-drag-arrow.up {
    animation-name: speed-drag-nudge-up;
    animation-delay: 0s;
}

.speed-drag-toast.is-down .speed-drag-arrow.down {
    animation-name: speed-drag-nudge-down;
    animation-delay: 0s;
}

.speed-drag-toast.is-up .speed-drag-arrow.down,
.speed-drag-toast.is-down .speed-drag-arrow.up {
    opacity: 0.22;
    animation: none;
}

/* Both arrows pulse while the persistent drag hint is shown */
.speed-drag-toast.is-hint .speed-drag-arrow {
    opacity: 0.55;
    color: #b8e0ce;
}

.speed-drag-toast.is-hint .speed-drag-arrow.up {
    animation: speed-drag-hint-up 1.1s ease-in-out infinite;
}

.speed-drag-toast.is-hint .speed-drag-arrow.down {
    animation: speed-drag-hint-down 1.1s ease-in-out infinite;
    animation-delay: 0.55s;
}

.speed-drag-arrows-x,
.speed-drag-arrows-hint-x {
    flex-direction: row;
    gap: 3px;
    min-width: 1.4em;
}

.speed-drag-toast.is-hint .speed-drag-arrow.left {
    animation: speed-drag-hint-left 1.1s ease-in-out infinite;
}

.speed-drag-toast.is-hint .speed-drag-arrow.right {
    animation: speed-drag-hint-right 1.1s ease-in-out infinite;
    animation-delay: 0.55s;
}

.speed-drag-label {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.25;
    box-sizing: border-box;
    width: auto;
    white-space: nowrap;
    text-align: center;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.speed-drag-value-toast {
    position: fixed;
    z-index: var(--z-overlay-drag-toast);
    left: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    box-sizing: border-box;
    max-width: min(86vw, 22rem);
    padding: 8px 16px 8px 12px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.9);
    border: 1px solid rgba(126, 184, 160, 0.62);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.65);
    color: var(--toast-pale-green);
    pointer-events: none;
    user-select: none;
    opacity: 1;
    transition: opacity 0.25s ease;
}

.speed-drag-value-title:empty {
    display: none;
}

.speed-drag-value-title {
    font: 600 12px/1.25 "Segoe UI", system-ui, sans-serif;
    letter-spacing: 0.01em;
    text-align: center;
    color: var(--toast-pale-green);
    text-shadow: var(--chrome-text-halo);
    white-space: nowrap;
}

.speed-drag-value-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.speed-drag-value-label {
    min-width: 0;
    font: 600 clamp(15px, 4.4vmin, 19px)/1.25 Consolas, "Liberation Mono", "Courier New", monospace;
    font-size-adjust: 0.5;
    letter-spacing: 0.02em;
    text-align: center;
    color: var(--toast-pale-green);
    text-shadow: var(--chrome-text-halo);
    white-space: nowrap;
}

.speed-drag-value-tod {
    color: var(--toast-pale-red);
}

.speed-drag-value-toast .speed-drag-arrows {
    font-size: clamp(13px, 3.6vmin, 16px);
}

.speed-drag-value-toast .speed-drag-arrow {
    opacity: 0.55;
    color: var(--toast-pale-green);
}

.speed-drag-value-toast .speed-drag-arrow.up {
    animation: speed-drag-hint-up 1.1s ease-in-out infinite;
}

.speed-drag-value-toast .speed-drag-arrow.down {
    animation: speed-drag-hint-down 1.1s ease-in-out infinite;
    animation-delay: 0.55s;
}

.speed-drag-value-toast.is-up .speed-drag-arrow.up,
.speed-drag-value-toast.is-down .speed-drag-arrow.down {
    opacity: 1;
    color: var(--toast-pale-green);
    animation-duration: 0.45s;
}

.speed-drag-value-toast.is-up .speed-drag-arrow.up {
    animation-name: speed-drag-nudge-up;
    animation-delay: 0s;
}

.speed-drag-value-toast.is-down .speed-drag-arrow.down {
    animation-name: speed-drag-nudge-down;
    animation-delay: 0s;
}

.speed-drag-value-toast.is-up .speed-drag-arrow.down,
.speed-drag-value-toast.is-down .speed-drag-arrow.up {
    opacity: 0.22;
    animation: none;
}

.speed-drag-value-toast .speed-drag-arrow.left {
    animation: speed-drag-hint-left 1.1s ease-in-out infinite;
}

.speed-drag-value-toast .speed-drag-arrow.right {
    animation: speed-drag-hint-right 1.1s ease-in-out infinite;
    animation-delay: 0.55s;
}

.speed-drag-value-toast.is-left .speed-drag-arrow.left,
.speed-drag-value-toast.is-right .speed-drag-arrow.right {
    opacity: 1;
    color: var(--toast-pale-green);
    animation-duration: 0.45s;
}

.speed-drag-value-toast.is-left .speed-drag-arrow.left {
    animation-name: speed-drag-nudge-left;
    animation-delay: 0s;
}

.speed-drag-value-toast.is-right .speed-drag-arrow.right {
    animation-name: speed-drag-nudge-right;
    animation-delay: 0s;
}

.speed-drag-value-toast.is-left .speed-drag-arrow.right,
.speed-drag-value-toast.is-right .speed-drag-arrow.left {
    opacity: 0.22;
    animation: none;
}

.speed-drag-value-toast[hidden] {
    display: none !important;
}

.speed-drag-value-toast.is-fading {
    opacity: 0;
}

@keyframes speed-drag-hint-up {
    0%, 100% { transform: translateY(0); opacity: 0.4; }
    50% { transform: translateY(-4px); opacity: 0.85; }
}

@keyframes speed-drag-hint-down {
    0%, 100% { transform: translateY(0); opacity: 0.4; }
    50% { transform: translateY(4px); opacity: 0.85; }
}

@keyframes speed-drag-nudge-up {
    0%, 100% { transform: translateY(0); opacity: 1; }
    50% { transform: translateY(-7px); opacity: 0.7; }
}

@keyframes speed-drag-nudge-down {
    0%, 100% { transform: translateY(0); opacity: 1; }
    50% { transform: translateY(7px); opacity: 0.7; }
}

@keyframes speed-drag-hint-left {
    0%, 100% { transform: translateX(0); opacity: 0.4; }
    50% { transform: translateX(-4px); opacity: 0.85; }
}

@keyframes speed-drag-hint-right {
    0%, 100% { transform: translateX(0); opacity: 0.4; }
    50% { transform: translateX(4px); opacity: 0.85; }
}

@keyframes speed-drag-nudge-left {
    0%, 100% { transform: translateX(0); opacity: 1; }
    50% { transform: translateX(-7px); opacity: 0.7; }
}

@keyframes speed-drag-nudge-right {
    0%, 100% { transform: translateX(0); opacity: 1; }
    50% { transform: translateX(7px); opacity: 0.7; }
}

@media (prefers-reduced-motion: reduce) {
    .speed-drag-arrow,
    .speed-drag-toast.is-up .speed-drag-arrow.up,
    .speed-drag-toast.is-down .speed-drag-arrow.down,
    .speed-drag-value-toast .speed-drag-arrow,
    .speed-drag-value-toast.is-up .speed-drag-arrow.up,
    .speed-drag-value-toast.is-down .speed-drag-arrow.down,
    .speed-drag-value-toast.is-left .speed-drag-arrow.left,
    .speed-drag-value-toast.is-right .speed-drag-arrow.right {
        animation: none;
    }
}

/* Status line above the date / time (app.js renderTimeBar): Loading / other
   status (gold), Missing EPIC imagery (red), else the imagery credit (dim). */
.time-bar-status {
    display: block;
    font-size: 0.85em;
}

.time-bar-status.is-loading {
    color: darkgoldenrod;
}

.time-bar-status.is-missing {
    color: #ff5a4f;
}

.time-bar-status.is-credit {
    opacity: 0.75;
}

/* Credits colored like their timeline dots (timeline_epic/addon.js):
   NASA EPIC blue, cloud maps (clouds/live_clouds.js) pale magenta. */
.time-bar-status.is-credit,
#current-time-text .now-images-credit {
    color: rgb(140, 190, 255);
}

.time-bar-status.is-credit.is-clouds-credit,
#current-time-text .now-images-credit.is-clouds-credit {
    color: rgb(240, 160, 230);
}

#current-time-text,
.time-bar-date {
    color: #fff;
    /* Consolas + size-adjust: Courier New reads much larger in Firefox than Chrome. */
    font-size: calc(12.6px * 0.8);
    font-family: Consolas, "Liberation Mono", "Courier New", monospace;
    font-size-adjust: 0.5;
    white-space: normal;
    overflow: hidden;
    overflow-wrap: break-word;
    min-width: 0;
    max-width: 100%;
    cursor: pointer;
    line-height: 1.2;
    padding: 0 0 2px;
    /* Sharp black outline so glyphs stay readable on sunlit Earth. */
    text-shadow: var(--chrome-text-halo);
}

.time-bar-date:hover,
.time-bar-date:focus-visible {
    color: #fff;
}

#date-picker {
    position: fixed;
    bottom: 20px;
    opacity: 0;
    pointer-events: none;
}

#date-picker.time-corner-left {
    left: 20px;
    right: auto;
}

#date-picker.time-corner-right {
    right: 20px;
    left: auto;
}

/* Globe / overlays that stay visible while chrome is idle. */
#topGL {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    pointer-events: none;
}

/*
 * All UI — base chrome and every extension.
 * Contemplation idle fades this one element; gfx stays in #topGL.
 */
#topUI {
    position: fixed;
    inset: 0;
    z-index: 20;
    pointer-events: none;
}

/* Contemplation mode: fade all chrome UI; globe overlays stay. */
.chrome-autohide {
    transition: opacity 0.65s ease;
}

body.chrome-idle #topUI.chrome-autohide,
body.chrome-idle .chrome-autohide {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Timeline stays hittable while faded — wheel changes speed; strip already blocks globe zoom. */
body.chrome-idle #topUI #epicTimeline,
body.chrome-idle #epicTimeline.chrome-autohide {
    pointer-events: auto !important;
}

/* Wake-from-idle gesture: visible again but not clickable until that click is eaten. */
body.chrome-waking #topUI.chrome-autohide,
body.chrome-waking .chrome-autohide {
    pointer-events: none !important;
}

body.chrome-waking #topUI #epicTimeline,
body.chrome-waking #epicTimeline.chrome-autohide {
    pointer-events: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .chrome-autohide {
        transition: opacity 0.15s ease;
    }
}

[hidden] {
  display: none !important;
}

:root {
  --menu-icon-size: 30px;
  --menu-corner-size: 56px;
  --menu-corner-height: 56px;
  --dppx: 1;
}

#appMenu {
    position: fixed;
    top: 0;
    z-index: var(--z-overlay-menu-corner);
    padding: 8px;
    opacity: 1;
    pointer-events: none;
}

/* Corner column: only its controls take clicks, not its box (the hamburger
   row with ←/→ is wider than the toggles under it; that empty part lies over
   the extension rows, e.g. the filter bar). */
#appMenu .corner-control > *,
#appMenu .menu-panel,
#appMenu .menu-submenu,
#appMenu .ext-quick-switch {
    pointer-events: auto;
}

#appMenu:has(.menu-panel:not([hidden])),
#appMenu:has(.menu-submenu:not([hidden])),
#appMenu:has(#extQuickSwitch:not([hidden])) {
    z-index: var(--z-overlay-menu-panel);
}

#appMenu.menu-corner-right {
    right: 0;
    left: auto;
}

#appMenu.menu-corner-left {
    left: 0;
    right: auto;
}

#menuButton {
    all: unset;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    cursor: pointer;
    color: white;
}

#menuButton img {
    width: 30px;
    height: 30px;
    display: block;
}

#menuButton.has-profile img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}

/* Last exclusive extension — on/off; icon only (active/inactive art in SVG) */
.ext-quick-toggle {
    all: unset;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    cursor: pointer;
    color: white;
    opacity: 0.9;
    touch-action: manipulation;
    -webkit-touch-callout: none;
}

.ext-quick-toggle:hover,
.ext-quick-toggle:focus-visible {
    opacity: 1;
}

.ext-quick-toggle img {
    width: 22px;
    height: 22px;
    display: block;
    pointer-events: none;
}

.ext-quick-toggle.is-coach-pulse {
    animation: ext-activation-pulse 1.6s ease-in-out infinite;
}

@keyframes ext-activation-pulse {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 0 rgba(120, 200, 255, 0));
    }
    50% {
        transform: scale(1.1);
        filter: drop-shadow(0 0 10px rgba(120, 200, 255, 0.65));
    }
}

@media (prefers-reduced-motion: reduce) {
    .ext-quick-toggle.is-coach-pulse {
        animation: none;
        outline: 2px solid rgba(120, 200, 255, 0.85);
        outline-offset: 2px;
    }
}

.ext-activation-hint {
    position: fixed;
    z-index: 25;
    max-width: min(240px, calc(100vw - 24px));
    padding: 8px 12px;
    font-size: 13px;
    line-height: 1.35;
    color: #fff;
    background: rgba(12, 22, 36, 0.92);
    border: 1px solid rgba(120, 200, 255, 0.4);
    border-radius: 10px;
    pointer-events: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    white-space: normal;
    animation: ext-activation-hint-bounce 1.35s ease-in-out infinite;
    transform-origin: center top;
}

/* extension_host.setExtensionStatus: e.g. "Loading sky pics..." beside the toggle. */
.ext-status-label {
    position: fixed;
    z-index: 25;
    transform: translateY(-50%);
    padding: 4px 10px;
    font-size: 13px;
    line-height: 1.3;
    color: yellow;
    background: rgba(12, 22, 36, 0.85);
    border-radius: 8px;
    pointer-events: none;
    white-space: nowrap;
}

.ext-status-label[hidden] {
    display: none !important;
}

.ext-activation-hint[hidden] {
    display: none !important;
}

@keyframes ext-activation-hint-bounce {
    0%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    55% {
        transform: translateY(-2px);
    }
    70% {
        transform: translateY(-8px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ext-activation-hint {
        animation: none;
    }
}

.ext-quick-switch {
    position: absolute;
    top: 100%;
    margin-top: 4px;
    width: 11.25rem;
    min-width: 11.25rem;
    max-width: 11.25rem;
    padding: 4px 0;
    background: rgba(20, 20, 20, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    z-index: 1;
}

#appMenu.menu-corner-right .ext-quick-switch {
    right: 0;
    left: auto;
}

#appMenu.menu-corner-left .ext-quick-switch {
    left: 0;
    right: auto;
}

.ext-quick-switch[hidden] {
    display: none !important;
}

.ext-quick-switch .menu-ext-choice {
    padding: 8px 10px;
    gap: 8px;
    align-items: center;
}

.ext-quick-switch .menu-ext-choice-label {
    flex: 1 1 auto;
    min-width: 0;
    white-space: pre-line;
    overflow-wrap: normal;
    word-break: normal;
    line-height: 1.15;
}

/* Presence: emoji eye under the extension toggle (non-localised only) */
.love-corner-eye-btn {
    all: unset;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 34px;
    border-radius: 10px;
    cursor: pointer;
    color: white;
    opacity: 0.95;
    background: rgba(36, 18, 32, 0.72);
    border: 1px solid rgba(255, 182, 210, 0.45);
    transition: opacity 0.15s ease, background 0.15s ease, border-color 0.15s ease;
    touch-action: none;
    pointer-events: auto;
}

.love-corner-eye-btn[hidden] {
    display: none !important;
}

.love-corner-eye-btn:hover,
.love-corner-eye-btn:focus-visible {
    background: rgba(55, 28, 45, 0.95);
    border-color: rgba(255, 200, 220, 0.85);
}

.love-corner-eye-btn .love-corner-eye {
    display: block;
    pointer-events: none;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}

.love-corner-eye-btn.is-coach-pulse {
    animation: love-coach-pulse 1.6s ease-in-out infinite;
}

@keyframes love-coach-pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 182, 210, 0.45);
    }
    50% {
        transform: scale(1.08);
        box-shadow: 0 0 0 8px rgba(255, 182, 210, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .love-corner-eye-btn.is-coach-pulse {
        animation: none;
        outline: 2px solid rgba(255, 200, 220, 0.85);
    }
}

/* Selection history ←/→ left of the selected-event label (timeline chrome). */
.selection-nav {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.selection-nav[hidden] {
    display: none !important;
}

/* Under the view menus (selection_history.js), flush with the screen-edge side. */
.view-side-chrome-captions > .selection-nav {
    align-self: flex-start;
    margin-top: 6px;
    pointer-events: auto;
}

.view-side-chrome--right .view-side-chrome-captions > .selection-nav {
    align-self: flex-end;
}

/* Beside the hamburger (selection_history.js): list opens toward the interior. */
#appMenu.menu-corner-right .selection-history-menu {
    left: auto;
    right: 0;
}

.view-side-chrome--right .selection-history-menu {
    left: auto;
    right: 0;
}

.selection-nav-btn {
    all: unset;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    cursor: pointer;
    color: #ffe7c2;
    font-size: 16px;
    font-family: Consolas, "Liberation Mono", "Courier New", monospace;
    line-height: 1;
    background: rgba(36, 28, 18, 0.72);
    border: 1px solid rgba(255, 220, 170, 0.45);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    transition: opacity 0.15s ease, background 0.15s ease, border-color 0.15s ease;
    touch-action: manipulation;
    -webkit-touch-callout: none;
}

.selection-history-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 30;
    min-width: max(100%, 12em);
    max-width: min(72vw, 22rem);
    max-height: min(50vh, 18rem);
    overflow-x: hidden;
    overflow-y: auto;
    padding: 4px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.82);
    border: 1px solid rgba(255, 220, 170, 0.35);
    backdrop-filter: blur(6px);
    -webkit-overflow-scrolling: touch;
    pointer-events: auto;
}

.selection-history-menu.is-forth {
    left: auto;
    right: 0;
}

.selection-history-menu[hidden] {
    display: none !important;
}

.selection-history-option {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 7px 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #ffe7c2;
    font: 600 12px/1.3 Consolas, "Liberation Mono", "Courier New", monospace;
    letter-spacing: 0.01em;
    text-align: left;
    cursor: pointer;
    text-shadow: var(--chrome-text-halo);
    white-space: normal;
    overflow-wrap: break-word;
}

.selection-history-option:hover,
.selection-history-option:focus-visible {
    background: rgba(255, 220, 170, 0.14);
    outline: none;
}

.selection-nav-btn:hover,
.selection-nav-btn:focus-visible {
    background: rgba(55, 42, 28, 0.95);
    border-color: rgba(255, 235, 200, 0.85);
    color: #fff4dc;
}

.selection-nav-btn:disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

.corner-control {
    display: flex;
    /* DOM order is [toggle…, menu]; reverse so menu stays on top, toggle under */
    flex-direction: column-reverse;
    align-items: flex-end;
    gap: 6px;
}

#appMenu.menu-corner-left .corner-control {
    align-items: flex-start;
}

.corner-hover-label {
    display: none;
}

.menu-panel {
    position: absolute;
    top: 0;
    min-width: 140px;
    background: rgba(20, 20, 20, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

#appMenu.menu-corner-right .menu-panel {
    right: 0;
    left: auto;
}

#appMenu.menu-corner-left .menu-panel {
    left: 0;
    right: auto;
}

.menu-item {
    all: unset;
    display: flex;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    width: 100%;
    padding: 12px 16px;
    color: lightgray;
    font-family: 'Courier New', monospace;
    font-size: 16px;
    cursor: pointer;
    text-align: left;
}

#appMenu.menu-corner-left .menu-item {
    flex-direction: row;
    text-align: left;
}

#appMenu.menu-corner-right .menu-item {
    flex-direction: row-reverse;
    text-align: right;
}

.menu-item[hidden] {
    display: none !important;
}

.menu-item-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    display: block;
}

.menu-item-icon.is-profile {
    border-radius: 50%;
    object-fit: cover;
}

.menu-item:hover,
.menu-item:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    color: white;
}

.menu-extensions-wrap {
    display: flex;
    flex-direction: column;
    width: 100%;
}

#menuExtensions .menu-item-chevron {
    margin-inline-start: auto;
    opacity: 0.55;
    font-size: 14px;
}

#appMenu.menu-corner-right #menuExtensions .menu-item-chevron {
    margin-inline-start: 0;
    margin-inline-end: auto;
}

.menu-submenu {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 4px 0 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.25);
}

.menu-submenu[hidden] {
    display: none !important;
}

.menu-ext-choice {
    padding-left: 22px;
    padding-right: 22px;
    font-size: 15px;
}

#appMenu.menu-corner-right .menu-ext-choice {
    padding-left: 22px;
    padding-right: 22px;
}

.menu-ext-choice.is-active {
    color: white;
    background: rgba(255, 255, 255, 0.06);
}

.menu-ext-choice-mark {
    min-width: 1em;
    text-align: center;
    opacity: 0.9;
}

.about-panel {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    /* #topUI is pointer-events:none so empty chrome does not steal globe hits. */
    pointer-events: auto;
}

.about-panel[hidden] {
    display: none;
}

.about-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
}

.about-dialog {
    position: relative;
    max-width: 360px;
    width: 100%;
    padding: 28px 24px 24px;
    background: rgba(18, 18, 18, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    color: lightgray;
    text-align: center;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
}

.about-close {
    all: unset;
    position: absolute;
    top: 8px;
    right: 12px;
    width: 32px;
    height: 32px;
    font-size: 28px;
    line-height: 32px;
    color: gray;
    cursor: pointer;
    text-align: center;
}

.about-close:hover,
.about-close:focus-visible {
    color: white;
}

.about-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.about-pe-logo {
    width: 64px;
    height: 64px;
    display: block;
}

.about-brand h1 {
    margin: 0;
    font-family: 'Courier New', monospace;
    font-size: 20px;
    font-weight: normal;
    color: white;
}

.about-version {
    margin: 0 0 16px;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    color: darkgoldenrod;
}

.about-summary {
    margin: 0 0 24px;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    line-height: 1.5;
    color: lightgray;
}

.about-summary p {
    margin: 0 0 0.75em;
}

.about-summary p:last-child {
    margin-bottom: 0;
}

.about-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
}

.about-link img {
    height: 40px;
    width: auto;
    display: block;
    opacity: 0.85;
    transition: opacity 0.2s ease;
}

.about-link:hover img,
.about-link:focus-visible img {
    opacity: 1;
}

.about-paper {
    margin: 16px 0 18px;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    text-align: center;
}

.about-summary a,
.about-paper a {
    color: #9ec9ff;
    text-decoration: none;
}

.about-summary a:hover,
.about-summary a:focus-visible,
.about-paper a:hover,
.about-paper a:focus-visible {
    text-decoration: underline;
}

.about-contact {
    margin: 20px 0 0;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    text-align: center;
}

.about-contact a {
    color: #9ec9ff;
    text-decoration: none;
}

.about-contact a:hover,
.about-contact a:focus-visible {
    text-decoration: underline;
}

.help-dialog {
    max-width: 420px;
    max-height: min(86vh, 640px);
    overflow: auto;
    text-align: left;
}

.help-body {
    margin-top: 8px;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.45;
    color: lightgray;
}

.wallpaper-dialog {
    max-width: 420px;
    max-height: min(86vh, 640px);
    overflow: auto;
    text-align: left;
}

.wallpaper-body {
    margin: 8px 0 16px;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.45;
    color: lightgray;
}

.wallpaper-body p,
.wallpaper-other-body p {
    margin: 0 0 0.75em;
}

.wallpaper-body p:last-child,
.wallpaper-other-section p:last-child {
    margin-bottom: 0;
}

.wallpaper-platform-title {
    margin: 0 0 0.5em;
    font-family: 'Courier New', monospace;
    font-size: 15px;
    font-weight: normal;
    color: white;
}

.wallpaper-note {
    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
}

.wallpaper-url-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0 0 12px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
}

.wallpaper-url-text {
    display: block;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    line-height: 1.4;
    color: darkgoldenrod;
    word-break: break-all;
    user-select: all;
}

.wallpaper-url-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.movie-clip-dialog {
    max-width: 400px;
    text-align: left;
}

.movie-clip-row {
    margin: 0;
    padding: 0;
}

.movie-clip-row[hidden] {
    display: none !important;
}

.movie-clip-row-title {
    margin: 0 0 0.45em;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}

.movie-clip-props {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 1em;
    row-gap: 0.2em;
    margin: 0 0 0.55em;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.45;
    color: lightgray;
}

.movie-clip-props dt {
    margin: 0;
    color: #999;
}

.movie-clip-props dd {
    margin: 0;
    min-width: 0;
}

.movie-clip-bake-track {
    --movie-progress: 0;
    position: relative;
    overflow: hidden;
    height: 8px;
    margin: 0 0 0.55em;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.12);
}

.movie-clip-bake-fill {
    display: block;
    height: 100%;
    width: calc(var(--movie-progress, 0) * 100%);
    background: darkorange;
}

.movie-clip-progress-props {
    margin-bottom: 0.7em;
}

.movie-clip-estimate,
.movie-clip-progress,
.movie-clip-error {
    margin: 0 0 0.55em;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.45;
    color: lightgray;
}

.movie-clip-estimate,
.movie-clip-progress {
    color: #bbb;
    font-size: 12px;
}

.movie-clip-error {
    color: #f0a0a0;
}

.movie-clip-error[hidden] {
    display: none !important;
}

.movie-clip-range-cell {
    display: flex;
    align-items: center;
    min-width: 0;
}

.movie-clip-range-cell select,
.movie-clip-range-cell input[type="date"],
.movie-clip-range-cell input[type="time"] {
    box-sizing: border-box;
    width: 100%;
    margin: -2px 0;
    padding: 1px 4px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 4px;
    background: #111;
    color: #eee;
    font: inherit;
    line-height: 1.3;
    color-scheme: dark;
}

.movie-clip-range-cell #movieClipTimeCell {
    display: flex;
    align-items: center;
    gap: 0.4em;
    min-width: 0;
    width: 100%;
}

.movie-clip-utc {
    flex: 0 0 auto;
    color: #999;
}

.movie-clip-notify {
    display: flex;
    align-items: center;
    gap: 0.5em;
    margin: 0.4em 0 0.7em;
    color: #ddd;
    font-size: 13px;
}

.movie-clip-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.movie-clip-actions .settings-action {
    width: auto;
    flex: 1 1 8em;
}

.movie-clip-start {
    color: white;
    border-color: rgba(255, 255, 255, 0.35);
}

.wallpaper-copy-status {
    margin: 0 0 12px;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: #8fdf8f;
}

.wallpaper-other {
    margin-top: 4px;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    color: lightgray;
}

.wallpaper-other > summary {
    cursor: pointer;
    color: rgba(255, 255, 255, 0.75);
    list-style: none;
}

.wallpaper-other > summary::-webkit-details-marker {
    display: none;
}

.wallpaper-other > summary::before {
    content: '\25B8';
    display: inline-block;
    margin-right: 0.4em;
    color: gray;
}

.wallpaper-other[open] > summary::before {
    content: '\25BE';
}

.wallpaper-other-body {
    margin-top: 12px;
}

.wallpaper-other-section {
    margin: 0 0 1em;
    padding-bottom: 1em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.wallpaper-other-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.wallpaper-other-title {
    margin: 0 0 0.4em;
    font-size: 14px;
    font-weight: normal;
    color: white;
}

.wallpaper-body a,
.wallpaper-other-body a {
    color: #7eb6ff;
}

.help-section {
    margin: 0 0 1.25em;
}

.help-section:last-child {
    margin-bottom: 0;
}

.help-section-title {
    margin: 0 0 0.5em;
    font-family: 'Courier New', monospace;
    font-size: 15px;
    font-weight: normal;
    color: white;
}

.help-user-guide {
    margin: 0 0 0.75em;
    font-family: 'Courier New', monospace;
    font-size: 13px;
}

.help-user-guide a {
    color: #9ec9ff;
    text-decoration: none;
}

.help-user-guide a:hover {
    text-decoration: underline;
}

.help-blurb {
    margin: 0 0 0.75em;
    color: darkgray;
}

.help-blurb strong {
    color: lightgray;
    font-weight: normal;
}

.help-gestures {
    margin: 0;
}

.help-row {
    display: grid;
    grid-template-columns: minmax(7.5rem, 34%) 1fr;
    gap: 0.35em 0.75em;
    margin: 0 0 0.55em;
    align-items: start;
}

.help-row:last-child {
    margin-bottom: 0;
}

.help-row dt {
    margin: 0;
    color: darkgoldenrod;
    font-weight: normal;
}

.help-row dd {
    margin: 0;
    color: lightgray;
}

.settings-panel {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    /* #topUI is pointer-events:none so empty chrome does not steal globe hits. */
    pointer-events: auto;
}

.settings-panel[hidden] {
    display: none;
}

.settings-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
}

.settings-dialog {
    position: relative;
    max-width: 360px;
    width: 100%;
    max-height: min(86vh, 640px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: 28px 24px 24px;
    background: rgba(18, 18, 18, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    color: lightgray;
    /* Native <select> popups follow color-scheme; without this, white text on a light OS menu. */
    color-scheme: dark;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
}

.settings-close {
    all: unset;
    position: absolute;
    top: 8px;
    right: 12px;
    width: 32px;
    height: 32px;
    font-size: 28px;
    line-height: 32px;
    color: gray;
    cursor: pointer;
    text-align: center;
}

.settings-close:hover,
.settings-close:focus-visible {
    color: white;
}

.settings-title {
    margin: 0 0 20px;
    font-family: 'Courier New', monospace;
    font-size: 20px;
    font-weight: normal;
    color: white;
    text-align: center;
}

.settings-field {
    display: block;
    margin-bottom: 18px;
    font-family: 'Courier New', monospace;
    font-size: 14px;
}

.settings-field:last-child {
    margin-bottom: 0;
}

.settings-label {
    display: block;
    margin-bottom: 8px;
    color: lightgray;
}

.settings-field-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
}

.settings-field-checkbox .settings-label {
    margin-bottom: 0;
}

.settings-hint {
    margin: 4px 0 12px 28px;
    color: rgba(180, 180, 180, 0.85);
    font-family: 'Courier New', monospace;
    font-size: 12px;
    line-height: 1.35;
}

.settings-control {
    font-family: 'Courier New', monospace;
    font-size: 14px;
    color: #f0f0f0;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
}

select.settings-control {
    width: 100%;
    padding: 8px 10px;
    color-scheme: dark;
    background: #2a2a2a;
}

select.settings-control option {
    background-color: #1e1e1e;
    color: #f0f0f0;
}

.settings-speed,
.settings-slider {
    display: flex;
    align-items: center;
    gap: 12px;
}

.settings-speed input[type="range"],
.settings-slider input[type="range"] {
    flex: 1;
    accent-color: darkgoldenrod;
}

.settings-speed-label,
.settings-slider-value {
    min-width: 72px;
    text-align: right;
    color: darkgoldenrod;
    font-family: 'Courier New', monospace;
    font-size: 14px;
}

.settings-action {
    all: unset;
    box-sizing: border-box;
    display: block;
    width: 100%;
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    color: lightgray;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    text-align: center;
    cursor: pointer;
}

.settings-action:hover,
.settings-action:focus-visible {
    background: rgba(255, 255, 255, 0.12);
    color: white;
}

.settings-action:disabled {
    opacity: 0.5;
    cursor: wait;
}

a.settings-action {
    text-decoration: none;
}


/* Live-Earth credit label (Now + Wallpaper) — Images / NASA | DSCOVR:EPIC */
body.bt-now #epicTimeline .epic-timeline-canvas,
body.bt-now #timelineChrome .timeline-chrome-transport,
body.bt-now #timelineChrome .timeline-analemma-caption,
body.bt-now #timelineChrome #loading-text,
body.bt-wallpaper #epicTimeline .epic-timeline-canvas,
body.bt-wallpaper #timelineChrome .timeline-chrome-transport,
body.bt-wallpaper #timelineChrome .timeline-analemma-caption,
body.bt-wallpaper #timelineChrome #loading-text,
body.bt-wallpaper #oppositeTopChrome {
    display: none !important;
}

body.bt-now #epicTimeline,
body.bt-wallpaper #epicTimeline {
    display: block !important;
    position: fixed;
    bottom: 20px;
    left: 20px;
    right: 20px;
    top: auto;
    width: auto;
    height: auto !important;
    min-height: 0;
    background: none;
    border: none;
    pointer-events: none;
    z-index: 20;
    /* Attribution stays visible even when other chrome fades. */
    opacity: 1 !important;
}

body.bt-now #epicTimeline .timeline-chrome,
body.bt-wallpaper #epicTimeline .timeline-chrome {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    top: auto;
    height: auto;
    min-height: 0;
    padding: 0;
}

body.bt-now #epicTimeline .timeline-chrome-inner,
body.bt-wallpaper #epicTimeline .timeline-chrome-inner {
    position: relative;
    inset: auto;
}

body.bt-now #epicTimeline .timeline-chrome-bottom-stack,
body.bt-wallpaper #epicTimeline .timeline-chrome-bottom-stack {
    position: relative;
    inset: auto;
    left: auto;
    right: auto;
    bottom: auto;
    max-width: none;
    width: 100%;
    align-items: stretch;
}

body.bt-now #epicTimeline .timeline-chrome-controls-row,
body.bt-wallpaper #epicTimeline .timeline-chrome-controls-row {
    display: block;
    width: 100%;
}

body.bt-now #epicTimeline .timeline-chrome-date-wrap,
body.bt-wallpaper #epicTimeline .timeline-chrome-date-wrap {
    position: relative;
    inset: auto;
    bottom: auto;
    right: auto;
    left: auto;
    max-width: none;
    width: 100%;
    text-align: right;
    align-items: stretch;
}

body.bt-now #dragHintStack,
body.bt-split-row #dragHintStack,
body.bt-split-col #dragHintStack,
body.bt-now #speedDragValueToast,
body.bt-now #playPauseFlash {
    display: none !important;
}

body.bt-now #menuAccount,
body.bt-now #menuMapMode,
body.bt-now #menuExtensionsWrap {
    display: none !important;
}

body.bt-now #current-time-text,
body.bt-wallpaper #current-time-text {
    cursor: pointer;
    pointer-events: auto;
    white-space: normal;
    line-height: 1.35;
    font-weight: normal;
    color: rgba(255, 255, 255, 0.6);
    overflow: visible;
    text-overflow: unset;
    max-width: none;
    width: 100%;
    display: flex;
    gap: 0.5rem 1rem;
}

/* Landscape (and default): Images left, date/time right — wrap date/time as a unit. */
body.bt-now #current-time-text,
body.bt-wallpaper #current-time-text {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-end;
    text-align: left;
}

body.bt-now #current-time-text .now-images-credit,
body.bt-wallpaper #current-time-text .now-images-credit {
    flex: 0 1 auto;
    min-width: 0;
    text-align: left;
}

body.bt-now #current-time-text .now-images-date,
body.bt-wallpaper #current-time-text .now-images-date {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: flex-end;
    column-gap: 0.35em;
    row-gap: 0.1em;
    flex: 1 1 auto;
    min-width: 0;
    max-width: min(55%, 22rem);
    margin-top: 0;
    text-align: right;
    font-weight: normal;
    color: inherit;
}

body.bt-now #current-time-text .now-images-day,
body.bt-now #current-time-text .now-images-tod,
body.bt-wallpaper #current-time-text .now-images-day,
body.bt-wallpaper #current-time-text .now-images-tod {
    display: inline;
}

/* Portrait: both right-aligned; Images above date/time. */
@media (orientation: portrait) {
    body.bt-now #current-time-text,
    body.bt-wallpaper #current-time-text {
        flex-direction: column;
        align-items: flex-end;
        justify-content: flex-end;
        text-align: right;
        gap: 0.15em;
    }

    body.bt-now #current-time-text .now-images-credit,
    body.bt-wallpaper #current-time-text .now-images-credit {
        text-align: right;
        max-width: 100%;
    }

    body.bt-now #current-time-text .now-images-date,
    body.bt-wallpaper #current-time-text .now-images-date {
        max-width: 100%;
        justify-content: flex-end;
    }
}

body.bt-now .view-caption-shortcut[hidden] {
    display: none !important;
}

/* ?mode=wallpaper — live Earth only: globe + credit label, no other chrome */
body.bt-wallpaper #appMenu,
body.bt-wallpaper #oppositeTopChrome,
body.bt-wallpaper #dragHintStack,
body.bt-wallpaper #speedDragValueToast,
body.bt-wallpaper #playPauseFlash,
body.bt-wallpaper #toastHost,
body.bt-wallpaper .chrome-idle-fade,
body.bt-wallpaper #settingsDialog,
body.bt-wallpaper #helpDialog,
body.bt-wallpaper #shareDialog {
    display: none !important;
}

/*
 * Split view (bt/split_view.js): Earth keeps one half, #btSplitPane the other.
 * Cut along the long side: row = landscape (Earth left), col = portrait (Earth top).
 */
body.bt-split-row #topGL {
    width: calc((1 - var(--bt-split, 0)) * 100%);
    right: auto;
}

body.bt-split-col #topGL {
    height: calc((1 - var(--bt-split, 0)) * 100%);
    bottom: auto;
}

/* Pane keeps its open size and slides in from the right / bottom edge. */
#btSplitPane {
    position: fixed;
    z-index: 15;
    overflow: hidden;
    background: #000;
    pointer-events: auto;
}

#btSplitPane[hidden] {
    display: none;
}

body.bt-split-row #btSplitPane {
    top: 0;
    bottom: 0;
    width: calc(var(--bt-split-size, 0.5) * 100%);
    left: calc((1 - var(--bt-split, 0)) * 100%);
}

body.bt-split-col #btSplitPane {
    left: 0;
    right: 0;
    height: calc(var(--bt-split-size, 0.5) * 100%);
    top: calc((1 - var(--bt-split, 0)) * 100%);
}

.bt-split-pane-body {
    position: absolute;
    inset: 0;
}

/* Body level (split_view.js), tracking the pane's corner: above chrome over the pane. */
.bt-split-pane-close {
    position: fixed;
    z-index: 23;
    top: 8px;
    right: 8px;
    left: auto;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 24px;
    line-height: 36px;
    cursor: pointer;
}

/* PanZoomView (bt/pan_zoom_view.js): cover-cropped, pannable, zoomable image. */
.bt-pan-zoom {
    position: absolute;
    inset: 0;
    overflow: hidden;
    touch-action: none;
    cursor: grab;
    user-select: none;
}

.bt-pan-zoom:active {
    cursor: grabbing;
}

.bt-pan-zoom-overlay {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
}

.bt-pan-zoom img {
    position: absolute;
    left: 0;
    top: 0;
    max-width: none;
    transform-origin: 0 0;
    -webkit-user-drag: none;
}

/* time_lock.js: time chrome is inert while the clock is locked. */
body.bt-time-locked #epicTimeline,
body.bt-time-locked #epicTimeline *,
body.bt-time-locked #date-picker {
    pointer-events: none !important;
}

/* Top-right corner of the pane (36px button + 8px margin from its edge). */
body.bt-split-row .bt-split-pane-close {
    top: 8px;
    right: auto;
    left: calc((1 - var(--bt-split, 0) + var(--bt-split-size, 0.5)) * 100% - 44px);
}

body.bt-split-col .bt-split-pane-close {
    right: 8px;
    left: auto;
    top: calc((1 - var(--bt-split, 0)) * 100% + 8px);
}

/* Phone landscape with nav buttons on the left (split_view.js): mirrored,
   pane slides in from the left edge, Earth on the right. */
body.bt-split-row.bt-split-flip #topGL {
    left: calc(var(--bt-split, 0) * 100%);
}

body.bt-split-row.bt-split-flip #btSplitPane {
    left: calc((var(--bt-split, 0) - var(--bt-split-size, 0.5)) * 100%);
}

body.bt-split-row.bt-split-flip .bt-split-pane-close {
    left: calc(var(--bt-split, 0) * 100% - 44px);
}

/* Draggable divider (split_view.js): thin line, grip pill, and a hit area that
   lies wholly inside the content pane: the timeline sits right against the
   boundary on the Earth side, and the divider must not cover its track. */
.bt-split-divider {
    position: fixed;
    z-index: 22;
    touch-action: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bt-split-divider[hidden] {
    display: none;
}

.bt-split-divider::before {
    content: '';
    position: absolute;
    background: rgba(255, 255, 255, 0.25);
}

.bt-split-divider-grip {
    position: relative;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
    transition: background 0.15s;
}

.bt-split-divider:hover .bt-split-divider-grip,
.bt-split-divider--active .bt-split-divider-grip {
    background: #fff;
}

body.bt-split-row .bt-split-divider {
    top: 0;
    bottom: 0;
    width: 24px;
    left: calc((1 - var(--bt-split, 0)) * 100% - 1px);
    cursor: col-resize;
}

body.bt-split-row.bt-split-flip .bt-split-divider {
    left: calc(var(--bt-split, 0) * 100% - 23px);
}

body.bt-split-row .bt-split-divider::before {
    top: 0;
    bottom: 0;
    left: 0;
    width: 2px;
}

body.bt-split-row.bt-split-flip .bt-split-divider::before {
    left: 22px;
}

/* The hit area lies inside the pane, so the grip is placed on the line itself
   (its center on the 2px line), half of it outside the box. */
body.bt-split-row .bt-split-divider-grip {
    position: absolute;
    top: 50%;
    left: 1px;
    width: 6px;
    height: 48px;
    transform: translate(-50%, -50%);
}

body.bt-split-row.bt-split-flip .bt-split-divider-grip {
    left: 23px;
}

body.bt-split-col .bt-split-divider {
    left: 0;
    right: 0;
    height: 24px;
    top: calc((1 - var(--bt-split, 0)) * 100% - 1px);
    cursor: row-resize;
}

body.bt-split-col .bt-split-divider::before {
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
}

body.bt-split-col .bt-split-divider-grip {
    position: absolute;
    left: 50%;
    top: 1px;
    width: 48px;
    height: 6px;
    transform: translate(-50%, -50%);
}

.bt-split-pane-close[hidden] {
    display: none;
}

/* "New satellite clouds" toast (clouds/clouds_toast.js), as .sky-live-toast. */
.clouds-toast {
    position: fixed;
    left: 50%;
    top: 16px;
    transform: translate(-50%, -150%);
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: calc(100vw - 32px);
    box-sizing: border-box;
    padding: 8px 8px 8px 14px;
    border-radius: 20px;
    background: rgba(20, 24, 32, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    color: white;
    font-size: 14px;
    opacity: 0;
    pointer-events: none;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.clouds-toast--shown {
    transform: translate(-50%, 0);
    opacity: 1;
    pointer-events: auto;
}

.clouds-toast-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.clouds-toast-what,
.clouds-toast-when {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.clouds-toast-when {
    font-size: 12px;
    color: rgb(240, 160, 230);
}

.clouds-toast-close {
    flex: none;
    border: none;
    background: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

/* Split view (photo preview, live camera, …): no view menus, no back /
   forth; the view label stays and moves up into their place. */
body:is(.bt-split-col, .bt-split-row) .view-caption-select-row,
body:is(.bt-split-col, .bt-split-row) #selectionNav,
body:is(.bt-split-col, .bt-split-row) #selectionHistoryMenu {
    display: none !important;
}