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;
}

/* Centered on the Earth half while a pane is split in (same box as #topGL), not on the whole screen. */
body.bt-split-row #playPauseFlash {
    right: auto;
    width: calc((1 - var(--bt-split, 0)) * 100%);
}

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

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

body.bt-split-col.bt-split-top #playPauseFlash {
    top: calc(var(--bt-split, 0) * 100%);
    bottom: 0;
}

.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. */
    /* From the base size up to `--bt-date-scale` times it, by the width the date has (`100cqw`: its box in the
       timeline, 11.5 em for its longest line, the credit); at the base size it wraps. */
    font-size: clamp(calc(12.6px * 0.8), calc(100cqw / 11.5), calc(12.6px * 0.8 * var(--bt-date-scale, 2)));
    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;
}

/* The date / time is twice the base size on the timeline (`--bt-date-scale`); these layouts keep the base size. */
body.bt-now,
body.bt-wallpaper {
    --bt-date-scale: 1;
}

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;
}

/* Divider at the Earth's edge (split_view.js): nothing of the globe shows, and
   its render loop is stopped (gl.js). */
body.bt-split-earth-hidden #topGL {
    visibility: hidden;
}

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. */
/* A pane on the menu's side (split_view.js `paneAtMenu`, the ISS video): the menu column, with what hangs under it, moves in
   to the split line: all the chrome stays on the Earth half, the pane has only its own content. */
body.bt-split-row.bt-split-at-menu #appMenu.menu-corner-right {
    right: calc(var(--bt-split, 0) * 100%);
}

body.bt-split-row.bt-split-at-menu #appMenu.menu-corner-left {
    left: calc(var(--bt-split, 0) * 100%);
}

/* Portrait with the pane at the top (split_view.js `setSplitPaneTop`): the Earth is the lower half, and the pane
   slides in from the top edge. */
body.bt-split-col.bt-split-top #topGL {
    top: calc(var(--bt-split, 0) * 100%);
    bottom: 0;
}

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

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

/* The menu column hangs from the top of the Earth half, not of the screen. */
body.bt-split-col.bt-split-top #appMenu {
    top: calc(var(--bt-split-start, 0) * 100%);
}

body.bt-split-col.bt-split-top .opposite-top-chrome {
    top: calc(var(--bt-split-start, 0) * 100% + 6px + var(--opposite-top-shift, 0px));
}

/* The hit area lies inside the pane (ends 1px after the line), as in the flipped row. */
body.bt-split-col.bt-split-top .bt-split-divider {
    top: clamp(0px, calc(var(--bt-split, 0) * 100% + 1px - var(--bt-split-hit, 24px)), calc(100% - var(--bt-split-hit, 24px)));
}

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.
   Parked at an edge (body.bt-split-edge) the line is at the screen's edge and
   the hit area is the first 3% of the screen (EDGE_ZONE), on the visible side:
   the box is clamped into the screen, and the line moves to its outer end
   (body.bt-split-line-end: pane side is the box's end, or the pane is hidden). */
.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;
}

/* Menus and their popups (help, settings, …) lie above the line. They sit in
   #topUI's stacking context (20), so the line goes just beneath it while one
   is open, and when parked at the Earth's edge: that is the menu's side, whose
   controls then win the overlap (the rest of #topUI lets clicks through). Parked at
   the pane's edge it stays above #topUI: the timeline lies against that edge
   and must not hide the grab strip. */
body.bt-split-earth-hidden .bt-split-divider,
body:has(#appMenu .menu-panel:not([hidden]),
         #appMenu .menu-submenu:not([hidden]),
         #extQuickSwitch:not([hidden]),
         .settings-panel:not([hidden]),
         .about-panel:not([hidden])) .bt-split-divider {
    z-index: 19;
}

body:has(.settings-panel:not([hidden]), .about-panel:not([hidden])) .bt-split-pane-close {
    z-index: 19;
}

body.bt-split-edge {
    --bt-split-hit: max(24px, 3%);
}

.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;
}

/* Landscape. The box starts 1px before the line on the Earth side (pane on the
   right), or ends 1px after it (flipped); clamped into the screen. */
body.bt-split-row .bt-split-divider {
    top: 0;
    bottom: 0;
    width: var(--bt-split-hit, 24px);
    left: clamp(0px, calc((1 - var(--bt-split, 0)) * 100% - 1px), calc(100% - var(--bt-split-hit, 24px)));
    cursor: col-resize;
}

body.bt-split-row.bt-split-flip .bt-split-divider {
    left: clamp(0px, calc(var(--bt-split, 0) * 100% + 1px - var(--bt-split-hit, 24px)), calc(100% - var(--bt-split-hit, 24px)));
}

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

body.bt-split-row.bt-split-line-end .bt-split-divider::before {
    left: auto;
    right: 0;
}

/* 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; at an edge it is
   wholly inside the screen. */
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-line-end .bt-split-divider-grip {
    left: auto;
    right: 1px;
    transform: translate(50%, -50%);
}

body.bt-split-row.bt-split-edge .bt-split-divider-grip {
    left: 3px;
    transform: translate(0, -50%);
}

body.bt-split-row.bt-split-edge.bt-split-line-end .bt-split-divider-grip {
    left: auto;
    right: 3px;
}

/* Portrait: the pane is at the bottom. */
body.bt-split-col .bt-split-divider {
    left: 0;
    right: 0;
    height: var(--bt-split-hit, 24px);
    top: clamp(0px, calc((1 - var(--bt-split, 0)) * 100% - 1px), calc(100% - var(--bt-split-hit, 24px)));
    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-line-end .bt-split-divider::before {
    top: auto;
    bottom: 0;
}

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

body.bt-split-col.bt-split-line-end .bt-split-divider-grip {
    top: auto;
    bottom: 1px;
    transform: translate(-50%, 50%);
}

body.bt-split-col.bt-split-edge .bt-split-divider-grip {
    top: 3px;
    transform: translate(-50%, 0);
}

body.bt-split-col.bt-split-edge.bt-split-line-end .bt-split-divider-grip {
    top: auto;
    bottom: 3px;
}

.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: the view captions (info, "Hide this info") stay in the Earth
   half's corner, not the screen's. The chrome lies opposite the menu, so a
   side-by-side split would put it over the pane: pull its inner edge in by the
   pane's share (the timeline moves the same way, timeline.css). Stacked, it is
   already at the top, over the Earth half. Nothing of it shows once the globe
   is hidden. */
body.bt-split-row:not(.bt-split-flip) .opposite-top-chrome--right {
    right: calc(var(--bt-split, 0) * 100% + 8px);
}

body.bt-split-row.bt-split-flip .opposite-top-chrome--left {
    left: calc(var(--bt-split, 0) * 100% + 8px);
}

body.timeline-vertical.bt-split-row:not(.bt-split-flip) .opposite-top-chrome--right {
    right: calc(var(--bt-split, 0) * 100% + var(--timeline-interior-inset, 172px) / var(--bt-ui-scale, 1) + 8px);
}

body.timeline-vertical.bt-split-row.bt-split-flip .opposite-top-chrome--left {
    left: calc(var(--bt-split, 0) * 100% + var(--timeline-interior-inset, 172px) / var(--bt-ui-scale, 1) + 8px);
}

body.timeline-vertical.bt-split-row .opposite-top-chrome {
    width: calc((1 - var(--bt-split, 0)) * 100% - var(--timeline-interior-inset, 172px) / var(--bt-ui-scale, 1) - 8px - 5.5rem);
}

body.bt-split-earth-hidden #oppositeTopChrome {
    display: none;
}

/* 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;
}