/* THE NEWS GLOBE outside the immersive HUD — the flat HUD's viewing bay
   (#vglobe) and the phone's WebView (globe.html). The story panel is the
   immersive HUD's .atlas-stories, restyled to sit BESIDE the planet rather
   than over the right-hand instruments: on a wide frame a column on the
   right, on a phone a strip beneath. */
.globe-view { position:relative; display:flex; gap:12px; width:100%; height:100%; min-height:0;
  color:#c7efff; font:11px/1.5 ui-monospace,'SF Mono',Menlo,monospace; }
.globe-view .globe-stage { position:relative; flex:1 1 60%; min-width:0; min-height:0; }
.globe-view canvas { display:block; }
.globe-view .atlas-stories { flex:0 0 240px; max-width:240px; overflow:auto; background:#04131bed;
  border:1px solid #70eaff66; padding:12px; touch-action:manipulation; }
.globe-view .atlas-stories[hidden] { display:none; }
.globe-view .atlas-label { color:#ffc578; margin-bottom:8px; letter-spacing:1px; }
.globe-view .atlas-list { display:grid; gap:6px; }
.globe-view .atlas-list button { text-align:left; font:11px/1.4 sans-serif; padding:8px; letter-spacing:0;
  min-height:40px; color:#d9f4ff; background:#0a2230; border:1px solid #70eaff44; cursor:pointer; }
.globe-view .atlas-list button:hover { border-color:#70eaff; }
.globe-view .atlas-detail { margin:10px 0; color:#c7efff; }
.globe-view .atlas-detail a { color:#8aeaff; text-decoration:underline; }
.globe-view .atlas-stories > a { color:#8bc3cd; font-size:9px; }
@media (max-width:700px) {
  .globe-view { flex-direction:column; }
  .globe-view .globe-stage { flex:0 1 auto; height:55%; max-height:calc(100vw - 16px); }
  .globe-view .atlas-stories { flex:1 1 0; min-height:0; max-width:none; max-height:none; }
}

/* THE CLIP CARD — a mini video window pinned to a story's marker, ready to
   play: YouTube's poster and its own play button, nothing autoplaying. */
.globe-view .globe-clip { position:absolute; width:min(300px, 80%); z-index:3; background:#04131bf2; border:1px solid #70eaff88;
  border-radius:10px; box-shadow:0 18px 44px rgba(0,0,0,.6), 0 0 0 1px rgba(110,231,255,.12); overflow:hidden;
  transition:opacity .3s ease; animation:globeClipIn .35s cubic-bezier(.2,.8,.2,1) both; }
.globe-view .globe-clip.behind { opacity:.35; }
@keyframes globeClipIn { from { opacity:0; transform:translateY(8px) scale(.96); } to { opacity:1; transform:none; } }
.globe-view .globe-clip-head { display:flex; align-items:flex-start; gap:8px; padding:8px 8px 6px 10px; }
.globe-view .globe-clip-title { flex:1 1 auto; font:600 12px/1.3 -apple-system, 'SF Pro Text', system-ui, sans-serif; color:#e6fbff; letter-spacing:0; }
.globe-view .globe-clip-x { flex:0 0 auto; background:none; border:none; color:#8fb3c4; font-size:13px; cursor:pointer; padding:0 2px; }
.globe-view .globe-clip-x:hover { color:#e6fbff; }
.globe-view .globe-clip-body { aspect-ratio:16 / 9; background:#000; display:flex; align-items:center; justify-content:center;
  font:10px ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing:.2em; color:#ffc578; }
.globe-view .globe-clip-body iframe { width:100%; height:100%; border:0; display:block; }
.globe-view .globe-clip-body video { width:100%; height:100%; display:block; background:#000; object-fit:contain; }
.globe-view .globe-clip-foot { padding:6px 10px 8px; font:9px ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing:.2em; color:#8fb3c4;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* THE STORY CARD — the phone's popup (operator, 2026-09-12): the same card,
   carrying text instead of a player — the standfirst at once, then the
   spoken elaboration, which the app voices until the ✕. The ✕ is a finger
   target here, not a mouse one. */
.globe-view .globe-story { width:min(320px, 86%); }
.globe-view .globe-story .globe-clip-x { font-size:16px; padding:2px 6px; min-width:32px; min-height:32px; margin:-6px -4px 0 0; }
.globe-view .globe-story .globe-clip-body { aspect-ratio:auto; display:block; background:transparent; padding:0 10px 4px; }
.globe-view .globe-story-text { margin:0; font:14px/1.45 -apple-system, 'SF Pro Text', system-ui, sans-serif; color:#d9f4ff; letter-spacing:0;
  text-align:left; max-height:34vh; overflow:auto; -webkit-overflow-scrolling:touch; }
.globe-view .globe-story-status { margin-top:6px; font:9px ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing:.2em; color:#ffc578; }

/* THE SHEET — the story card on the phone since 2026-09-16: at the foot of
   the whole view (over the story list, never on the marker, where a card
   with text and a player had nowhere to grow), the text scrolling within,
   the clip beneath it ready to play. Pinned cards keep their marker. */
.globe-view .globe-sheet { position:absolute; left:6px; right:6px; bottom:6px; width:auto; max-height:calc(100% - 12px);
  overflow:auto; -webkit-overflow-scrolling:touch; touch-action:manipulation; animation-name:globeSheetIn; }
@keyframes globeSheetIn { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
.globe-view .globe-sheet .globe-clip-head { position:sticky; top:0; background:#04131bf2; z-index:1; }
.globe-view .globe-sheet .globe-story-text { max-height:none; overflow:visible; }
.globe-view .globe-clip-player { position:relative; margin:10px 0 2px; height:min(200px, 34vh); border-radius:8px; overflow:hidden; background:#000;
  display:flex; align-items:center; justify-content:center; font:10px ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing:.2em; color:#ffc578; }
.globe-view .globe-clip-player.empty { height:auto; padding:10px; background:#0a2230; }
.globe-view .globe-clip-player iframe { width:100%; height:100%; border:0; display:block; }
.globe-view .globe-clip-player video { width:100%; height:100%; display:block; background:#000; object-fit:contain; }