/* Globe backdrop: the top third of a wireframe-and-dots planet rising from the bottom edge, spinning on a horizontal axis
   (so the surface moves up and down, not sideways). Drawn on a canvas by backdrop.js; colours come from these variables.
   Hidden in high-contrast and print. */
:root {
    --bd-sky-top: #05070a; --bd-sky-mid: #080f22; --bd-sky-low: #0d1c40;
    --bd-star: rgba(226, 232, 240, 0.5);
    --bd-line: 59 130 246;          /* graticule and dots (rgb) */
    --bd-hot: 103 232 249;          /* bright network nodes (rgb) */
    --bd-limb: 96 165 250;          /* atmosphere glow (rgb) */
    --bd-planet-a: #0f2559; --bd-planet-b: #050a18;
    --bd-line-alpha: 0.30; --bd-dot-alpha: 0.75; --bd-limb-alpha: 0.42;
}
[data-theme="light"] {
    --bd-sky-top: #f8fafc; --bd-sky-mid: #eef4ff; --bd-sky-low: #dbe7ff;
    --bd-star: rgba(255, 255, 255, 0);
    --bd-line: 37 99 235; --bd-hot: 14 116 144; --bd-limb: 37 99 235;
    --bd-planet-a: #f4f8ff; --bd-planet-b: #cddffc;
    --bd-line-alpha: 0.22; --bd-dot-alpha: 0.45; --bd-limb-alpha: 0.28;
}

.backdrop {
    position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
    background: linear-gradient(to bottom, var(--bd-sky-top) 0%, var(--bd-sky-mid) 55%, var(--bd-sky-low) 100%);
}
.backdrop > * { position: absolute; }
.bd-stars {
    left: 0; right: 0; top: 0; height: 70%;
    background-image:
        radial-gradient(1.2px 1.2px at 24px 38px, var(--bd-star), transparent),
        radial-gradient(1px 1px at 112px 96px, var(--bd-star), transparent),
        radial-gradient(1.4px 1.4px at 190px 24px, var(--bd-star), transparent),
        radial-gradient(1px 1px at 66px 150px, var(--bd-star), transparent),
        radial-gradient(1.2px 1.2px at 230px 182px, var(--bd-star), transparent),
        radial-gradient(1px 1px at 150px 210px, var(--bd-star), transparent);
    background-size: 260px 240px;
    -webkit-mask-image: linear-gradient(to bottom, #000 35%, transparent 100%); mask-image: linear-gradient(to bottom, #000 35%, transparent 100%);
}
.bd-canvas { left: 0; right: 0; bottom: 0; width: 100%; }
/* soften the edges so text areas stay calm */
.backdrop::after { content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse at 50% 40%, transparent 40%, var(--bd-sky-top) 125%); opacity: 0.5; }

[data-theme="contrast"] .backdrop { display: none; }
@media print { .backdrop { display: none; } }