/* Honeypot XRPL – Weltkugel-Tab (public/globe.css)
   Eigentumstrennung: Diese Datei gehört ausschließlich zum Modul
   public/globe.js (dritter Graph-Tab „Weltkugel“) und wird vom
   Verdrahtungs-Agenten im <head> von index.html nach style.css und
   drilldown.css eingebunden:
   <link rel="stylesheet" href="globe.css">
   Sie ändert keine bestehenden Regeln — #globe und .globe-* sind neu,
   .graph-note wird nur innerhalb #globe positioniert (Basistypografie
   bleibt bei style.css:508-512).
   Designbasis: weltbester-astra-6-designer (Astra 6), Profil lab_graphite —
   Bühne analog #graph (style.css:498-506): weiße Flächen, 1px-Ink-Rand,
   Radien, feine Linien, WCAG AA, keine Schrift unter 12 px. */

/* GENAU EIN neuer Token — bewusst nur hier und nicht in style.css
   (Eigentumstrennung zum parallel laufenden CSS-Agenten, der style.css
   besitzt). Wirksam wird der Block über body[data-a6] (index.html:13),
   Vorbild style.css:6. Hauchzarte Atmosphäre der Kugel: globe.js liest den
   Token und blendet den Alpha-Anteil über Weiß, weil die
   WebGL-Atmosphärenfarbe keinen Alphakanal auswertet (Bundle-nachgeprüft). */
[data-a6] {
  --a6-globe-atmosphere: rgba(29, 78, 216, 0.08);
}

/* Bühne: Erscheinungsbild identisch zu #graph — weißer
   Radial-Punkt-Hintergrund, 1px Linie, Radius. overflow hidden schneidet
   Canvas und Hinweis-Overlay auf die Bühne; position relative nimmt die
   absolute positionierten Overlays auf. Höhe über die gemeinsame Leiter
   --a6-stage-height (style.css-Token-Block, 720/640/560/480 px) — zuvor fix
   520 px mit eigenen Stufen 400/320, sodass der Tab-Wechsel Live→Globe die
   Bühne um 200 px springen ließ (Design-Audit 2026-10-06).
   Design P3.1 (2026-10-06): Das Kugel-Canvas ist transparent (globe.js
   backgroundColor 'rgba(0,0,0,0)') — die Bühne bekommt dasselbe Substrat
   wie die Drilldown-3D-Bühne (drilldown.css): 24-px-Raster plus versetztes
   96-px-Sekundärraster als Tiefenebene und eine dezente inset-Vignette
   (Raumtiefe ohne Glow, reines CSS). forced-colors nimmt die Vignette
   zurück (Block unten). globe.js selbst bleibt unangetastet. */
#globe {
  position: relative;
  width: 100%;
  height: var(--a6-stage-height, 520px);
  overflow: hidden;
  background:
    radial-gradient(var(--a6-graph-grid) 1px, transparent 1px) 0 0 / 24px 24px,
    radial-gradient(var(--a6-graph-grid) 1px, transparent 1px) 12px 12px / 96px 96px,
    var(--a6-graph-canvas);
  border: 1px solid var(--a6-line);
  border-radius: var(--a6-r-md);
  box-shadow: inset 0 -40px 80px -60px rgba(20, 20, 22, 0.06);
}

#globe canvas {
  display: block;
  cursor: grab;
}

#globe canvas:active {
  cursor: grabbing;
}

/* B10 (Kritik 2026-10-04 korrigiert): globe.gl rendert pointLabel/arcLabel als
   HTML in eine klassenlose CSS2D-Div — eine Wrap-Regel braucht das vom
   globe.js gehüllte Element (.globe-addr-label), nicht die Bühne. Volle
   Adressen brechen so innerhalb max 340 px um, statt aus der Bühne
   (#globe hat overflow:hidden) zu laufen. Ungetestet im Browser —
   dokumentierte Limitation. */
#globe .globe-addr-label {
  display: inline-block;
  max-width: min(340px, 70vw);
  overflow-wrap: anywhere;
}

/* XRPScan-Name am Punkt-Label (nur ergänzt): eigene Zeile unter der
   Adresse, Brand-Teal — die Adresse bleibt der primäre Inhalt. */
#globe .globe-addr-name {
  display: block;
  color: var(--a6-brand-teal);
}

/* Destination-Tag am Punkt-Label (tagIdentityDesign, nur ergänzt): Mono,
   Brand-Amber wie .tag-chip (style.css) — Adresse bleibt primärer Inhalt. */
#globe .globe-addr-tag {
  display: inline-block;
  margin-inline-start: 6px;
  font-family: var(--a6-mono);
  font-variant-numeric: tabular-nums;
  color: var(--a6-brand-amber);
}

/* Pflicht-Hinweis unter der Kugel: globe.js legt ein p.graph-note.globe-note
   in die Bühne. Die Typografie (12 px, muted) liefert .graph-note aus
   style.css:508-512 — hier steht nur die Overlay-Positionierung; über den
   Punkten, aber klickdurchlässig (pointer-events none). Weiße Fläche mit
   1px-Rand hält WCAG AA auch über dem Liniennetz der Kugel. */
#globe .globe-note {
  position: absolute;
  inset-inline: 14px;
  bottom: 12px;
  z-index: 2;
  margin: 0;
  padding: 8px 12px;
  background: var(--a6-surface);
  border: 1px solid var(--a6-line);
  border-radius: var(--a6-r-sm);
  pointer-events: none;
}

/* FIX-B Zustandsvariante des Pflicht-Hinweises (WebGL-Kontextverlust):
   dieselbe Fläche wie .globe-note — nur die Linienfarbe wechselt auf die
   bestehende Warn-Farbe des Systems. Astra-6 bleibt gewahrt: weiße Fläche,
   1px-Rand, Radien, Typografie und Touchziele unverändert (keine Schrift
   unter 12 px, keine neuen Klassen- oder ID-Namen außer der Variante). */
#globe .globe-note.globe-note-alert {
  border-color: var(--a6-warn);
}

/* Statischer Fallback (WebGL oder CDN nicht erreichbar): Hinweis statt
   leerem Canvas, kein Erfolgs-Vortäuschen — dieselben Daten stehen in den
   Cluster-Karten und in der Konten-Tabelle des Drilldowns. */
#globe .globe-fallback {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  /* column (Design P0): Illustration (globe.js showFallback,
     public/icons.mjs svgGlobeFallback) über dem Hinweistext statt daneben. */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--a6-graph-canvas);
}

#globe .globe-fallback .graph-note {
  max-width: 56ch;
  margin: 0;
  color: var(--a6-body);
  text-align: center;
}

/* Länder-Legende des Attribution-Layers (globe.js ensureLegend): Overlay in
   der Bühne nach dem Muster der Pflicht-Notiz .globe-note — weiße Fläche,
   1px-Ink-Rand, Radius, klickdurchlässig (pointer-events none), keine Schrift
   unter 12 px. Die Severity-Swatches nutzen die bestehenden Klassen .swatch/
   .swatch-sev-* aus style.css:632-658 — kein zweites Farbsystem, deshalb
   ist auch kein neuer Token nötig (alle Werte laufen über bestehende
   Variablen). globe.js zeigt die Legende nur bei aktivem Länder-Layer und
   re-erzeugt sie nach dem showNote-Muster, wenn rebuildGlobe den Container
   geleert hat. */
#globe .globe-legend {
  position: absolute;
  top: 12px;
  inset-inline-end: 14px;
  z-index: 2;
  max-width: min(300px, calc(100% - 28px));
  padding: 10px 12px;
  background: var(--a6-surface);
  border: 1px solid var(--a6-line);
  border-radius: var(--a6-r-sm);
  /* feine Erhebung wie die Panels (e1) — hebt die Legende vom Liniennetz ab */
  box-shadow: var(--a6-e1);
  pointer-events: none;
  font-size: 12px;
  line-height: 1.6;
  color: var(--a6-body);
}

#globe .globe-legend p {
  margin: 0;
}

#globe .globe-legend-title {
  font-weight: 650;
  color: var(--a6-ink);
}

/* Severity-Reihen kompakt nebeneinander (Swatch + Text, Muster .legend-item
   aus style.css:630). */
#globe .globe-legend-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-inline-end: 12px;
}

#globe .globe-legend-count {
  color: var(--a6-body);
}

#globe .globe-legend-src {
  color: var(--a6-muted);
}

/* Responsiv: Die Bühnenhöhe folgt der gemeinsamen Leiter --a6-stage-height —
   style.css setzt den Token je Breakpoint neu (640/560/480 px), eigene
   Höhenstufen sind hier entfallen (zuvor fix 400/320 px, was der Kommentar
   fälschlich als '#graph-exakt' ausgab; Design-Audit 2026-10-06). */
@media (max-width: 560px) {
  #globe .globe-note {
    inset-inline: 10px;
    bottom: 10px;
  }
}

/* Reduced Motion: Die DOM-Seite friert ein; globe.js friert zusätzlich die
   Kugel-Animation ein (autoRotate aus, keine Puls-Ringe, zoomToFit(0) statt
   animierter Kamera) — die Daten werden weiterhin aktualisiert. CSS greift
   zusätzlich, Vorbild style.css:835-844. Die Legende hat keine eigenen
   Animationen und wird vom universalen Selektor unten mit abgedeckt. */
@media (prefers-reduced-motion: reduce) {
  #globe,
  #globe *,
  #globe *::before,
  #globe *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* Forced Colors (Vorbild style.css:846 ff.): Bühne und Hinweise bleiben über
   Systemfarben les- und trennbar, Schmuck-Hintergründe treten zurück. Das
   WebGL-Bild der Kugel selbst färbt forced-colors nicht um — der
   textliche Fallback-Hinweis und die Cluster-Karten sichern die Information.
   Die P3.1-Vignette (box-shadow) tritt zurück wie alle Schmuck-Schatten. */
@media (forced-colors: active) {
  #globe {
    border-color: CanvasText;
    box-shadow: none;
  }

  #globe .globe-note,
  #globe .globe-fallback {
    border: 1px solid CanvasText;
    background: Canvas;
  }

  #globe .globe-legend {
    border: 1px solid CanvasText;
    background: Canvas;
  }
}

/* Responsiv (Legende): Randabstände wie .globe-note ab 560 px
   (style.css-Vorbild oben) — die Kugel bleibt bedienbar, die Legende
   verkleinert ihre Fläche statt zu überdecken. */
@media (max-width: 560px) {
  #globe .globe-legend {
    top: 10px;
    inset-inline-end: 10px;
    max-width: calc(100% - 20px);
    padding: 8px 10px;
  }
}