/* Earth Now: visible controls beside the sky. */
.post-body.fade-in { animation: none; opacity: 1; transform: none; }
.post-header { margin-bottom: 1.6rem; }
.globe-wrapper {
  --globe-space: #000;
  display: grid; grid-template-columns: minmax(0, 1fr) 15rem;
  margin: .5rem 0 1.4rem; width: min(1120px, calc(100vw - 2 * min(var(--gutter), 24px)));
  margin-left: 50%; transform: translateX(-50%); background: var(--d-bg-raised);
}
#globe-container {
  position: relative; width: 100%; height: clamp(430px, 52vw, 560px);
  min-height: 300px; overflow: hidden; background: var(--globe-space);
}
#globe-container canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
#globe-container canvas:active { cursor: grabbing; }
#globe-container:focus-visible { outline-offset: -3px; }
.globe-loading { position: absolute; inset: 0; z-index: 4; display: grid; place-content: center; color: var(--text-dim); font: .85rem var(--font-body); background: var(--globe-space); }
.globe-loading-inner { width: min(240px, 65vw); text-align: center; }
.globe-loading-inner p { margin: 0 0 .8rem !important; font-size: .85rem; }
.globe-loading-heading { display: flex; align-items: center; justify-content: center; gap: .55rem; }
.globe-loading-activity { flex: 0 0 auto; width: .8rem; height: .8rem; border: 1px solid var(--rule); border-top-color: var(--accent); border-radius: 50%; animation: globe-loading-spin 1.2s linear infinite; }
.globe-loading-detail { display: flex; justify-content: space-between; gap: .75rem; margin-top: .65rem; min-height: 1.5em; color: var(--text-faint); font: .7rem/1.5 var(--font-body); text-align: left; }
#globe-loading-elapsed { margin-left: auto; white-space: nowrap; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
@keyframes globe-loading-spin { to { transform: rotate(360deg); } }
.globe-loading progress { display: block; width: 100%; height: 5px; appearance: none; border: 0; border-radius: 0; background: var(--rule); color: var(--accent); }
.globe-loading progress::-webkit-progress-bar { background: var(--rule); }
.globe-loading progress::-webkit-progress-value { background: var(--accent); transition: width .2s; }
.globe-loading progress::-moz-progress-bar { background: var(--accent); }
.globe-loading [hidden] { display: none; }
.is-ready .globe-loading { display: none; }
.globe-info { position: absolute; top: auto; bottom: 12px; left: 16px; right: 16px; font-family: var(--font-body); font-size: .72rem; color: var(--text-dim); line-height: 1.45; pointer-events: none; }
.globe-info span { background: color-mix(in srgb, var(--globe-space) 82%, transparent); padding: .15rem .35rem; border-radius: 2px; box-decoration-break: clone; }
.globe-button, .globe-fs-btn { font-family: var(--font-body); color: var(--text); font-size: .78rem; line-height: 1.25; min-height: 44px; padding: .55rem .8rem; background: transparent; border: 1px solid var(--d-rule-strong); border-radius: 4px; cursor: pointer; }
.globe-button:hover, .globe-fs-btn:hover { border-color: var(--accent); background: var(--row-hover); }
.globe-button:disabled { opacity: .5; cursor: default; }
.globe-view-controls { position: absolute; top: max(10px, env(safe-area-inset-top)); left: max(10px, env(safe-area-inset-left)); right: max(10px, env(safe-area-inset-right)); z-index: 5; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; pointer-events: none; }
.globe-version { position: absolute; top: 0; left: 0; color: var(--text-dim); font: .6rem/1.4 var(--font-mono); }
.globe-fs-btn { position: static; flex: 0 0 auto; pointer-events: auto; background: color-mix(in srgb, var(--globe-space) 82%, transparent); }
.globe-moon-btn { pointer-events: auto; background: color-mix(in srgb, var(--globe-space) 82%, transparent); }
.globe-moon-btn[hidden] { display: none; }
.globe-fs-btn { display: grid; place-content: center; width: 44px; height: 44px; padding: 0; }
.globe-fs-btn svg { width: 18px; height: 18px; }
.fs-icon-close { display: none; }
.is-fullscreen .fs-icon-close { display: block; }
.is-fullscreen .fs-icon-open { display: none; }
.globe-foot { container: globe-panel / inline-size; min-width: 0; padding: 1rem; border-left: 1px solid var(--rule); }
.globe-clock-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.globe-clock { display: block; font-family: var(--font-mono); font-size: .78rem; color: var(--text); }
.globe-return { flex: 0 0 auto; color: var(--text-dim); }
.globe-return[aria-pressed=true] { border-color: var(--accent); color: var(--accent); }
.globe-explore { margin-top: 1rem; }
.globe-field { min-width: 0; }
.globe-field label { display: block; font: .78rem var(--font-body); color: var(--text-dim); margin-bottom: .3rem; }
.globe-hour-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem .6rem; }
.globe-hour-head output { font-family: var(--font-mono); font-size: .75rem; line-height: 1.4; white-space: nowrap; }
.globe-range-ends { display: flex; justify-content: space-between; font: .65rem/1.4 var(--font-body); color: var(--text-faint); }
.globe-field input[type=range] { display: block; width: 100%; height: 44px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.globe-replay-status { font: .65rem/1.4 var(--font-body); color: var(--text-faint); margin: .15rem 0 0 !important; min-height: 1.4em; }
.globe-pin { border-top: 1px solid var(--rule); margin-top: 1rem; padding-top: .6rem; }
.globe-pin[hidden], [hidden].globe-fs-btn { display: none; }
.globe-pin-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem; }
.globe-pin-head h2 { flex: 1 1 10ch; min-width: 0; font: .95rem var(--font-heading); margin: 0; overflow-wrap: anywhere; }
.globe-pin-close { min-width: 44px; min-height: 44px; border: 0; padding: .3rem 0; background: none; color: var(--text-dim); font: .7rem var(--font-body); cursor: pointer; }
.globe-pin dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem .6rem; margin: .35rem 0 0; }
.globe-pin dl > div:nth-child(n+3) { grid-column: 1 / -1; }
.globe-pin dt { font-size: .65rem; color: var(--text-dim); margin-bottom: .2rem; }
.globe-pin dd { font-family: var(--font-mono); font-size: .7rem; color: var(--text); line-height: 1.5; margin: 0; overflow-wrap: anywhere; }
.globe-pin dd small { display: block; font: .7rem/1.45 var(--font-body); color: var(--text-dim); margin-top: .2rem; }
.globe-caption { font-size: .95rem !important; line-height: 1.6 !important; }
.globe-sources { font: .8rem/1.6 var(--font-body); color: var(--text-dim); margin: .6rem 0 0; overflow-wrap: anywhere; }
.globe-sources summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: .5rem; color: var(--text-dim); }
.globe-sources summary::before { content: '+'; font-family: var(--font-mono); }
.globe-sources[open] summary::before { content: '-'; }
.globe-sources p { font-size: .8rem; line-height: 1.6; margin: .6rem 0; }
.globe-sources a[href$="/docs/DAYLIGHT_GLOBE.md"] { display: inline-flex; align-items: center; min-height: 44px; }
.globe-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.globe-wrapper.is-fullscreen { position: fixed; inset: 0; z-index: 9999; width: 100%; height: 100dvh; max-width: none; margin: 0; transform: none; border: 0; border-radius: 0; overflow: auto; grid-auto-rows: max-content; }
.is-fullscreen #globe-container { min-height: 120px; height: 100dvh; }
.is-fullscreen .globe-foot { padding-bottom: max(1rem, env(safe-area-inset-bottom)); }
@media (max-width: 850px) {
  .globe-wrapper { grid-template-columns: minmax(0, 1fr); }
  #globe-container { height: clamp(350px, 62vw, 500px); }
  .globe-foot { border-left: 0; border-top: 1px solid var(--rule); }
  .globe-wrapper.is-fullscreen { display: flex; flex-direction: column; }
  .is-fullscreen #globe-container { flex: 1 0 120px; height: auto; }
  .is-fullscreen .globe-foot { flex: 0 0 auto; padding-bottom: max(.75rem, env(safe-area-inset-bottom)); }
}
@media (max-width: 480px) {
  .globe-foot { padding: .75rem; }
  .globe-info { font-size: .68rem; }
}
@media (max-width: 480px) and (orientation: portrait) {
  .is-fullscreen #globe-container { min-height: min(70dvh, 12rem); }
}
@media (max-height: 480px) and (orientation: landscape) {
  .globe-wrapper.is-fullscreen { display: grid; grid-template-columns: minmax(120px, 1fr) 15rem; }
  .is-fullscreen #globe-container { height: 100dvh; }
  .is-fullscreen .globe-foot { border-left: 1px solid var(--rule); border-top: 0; padding: max(.75rem, env(safe-area-inset-top)) max(.75rem, env(safe-area-inset-right)) max(.75rem, env(safe-area-inset-bottom)) .75rem; }
}