/* Guided First Orbit — body-level, non-modal globe orientation. */

#guided-orbit-replay {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--hud-border);
  border-radius: 50%;
  background: var(--hud-cell);
  color: var(--hud-muted);
  cursor: pointer;
  transition: color .18s, border-color .18s, background .18s, box-shadow .18s;
}

#guided-orbit-replay svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.45;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#guided-orbit-replay:hover,
#guided-orbit-replay:focus-visible {
  border-color: var(--mint);
  background: var(--hud-cell-hover);
  color: var(--mint);
  box-shadow: 0 0 16px rgba(78, 205, 196, .16);
  outline: none;
}

#guided-orbit-replay:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 2px;
}

.guided-orbit[hidden] { display: none !important; }

.guided-orbit {
  position: fixed;
  inset: 0;
  z-index: 1100;
  pointer-events: none;
  color: var(--text);
}

.guided-orbit::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 38%, transparent 24%, rgba(5, 5, 9, .52) 100%);
  transition: opacity .25s ease;
}

.guided-orbit[data-mode="intro"]::before { opacity: 1; }

.guided-orbit-card {
  position: absolute;
  box-sizing: border-box;
  width: min(440px, calc(100vw - 32px));
  padding: 16px;
  border: 1px solid var(--hud-border-strong);
  border-radius: 4px;
  background: var(--hud-bg-strong);
  box-shadow: var(--hud-shadow-strong), 0 0 32px rgba(78, 205, 196, .09);
  -webkit-backdrop-filter: blur(18px) saturate(1.12);
  backdrop-filter: blur(18px) saturate(1.12);
  pointer-events: auto;
  animation: guided-orbit-in .34s cubic-bezier(.22, .61, .36, 1) both;
}

@keyframes guided-orbit-in {
  from { opacity: 0; transform: translateY(10px); filter: blur(4px); }
  to { opacity: 1; transform: none; filter: none; }
}

.guided-orbit[data-mode="intro"] .guided-orbit-card {
  left: 50%;
  bottom: 24px;
  width: min(680px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  transform: translateX(-50%);
  animation-name: guided-orbit-in-centered;
}

@keyframes guided-orbit-in-centered {
  from { opacity: 0; transform: translate(-50%, 10px); filter: blur(4px); }
  to { opacity: 1; transform: translate(-50%, 0); filter: none; }
}

.guided-orbit[data-mode="interaction"] .guided-orbit-card {
  top: 76px;
  right: 24px;
  width: min(470px, calc(100vw - 380px));
  min-width: 360px;
  padding: 10px 12px 11px;
}

.guided-orbit[data-mode="source"] .guided-orbit-card {
  left: 24px;
  bottom: 24px;
  width: min(420px, calc(100vw - 48px));
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "top"
    "progress"
    "content"
    "hint";
  align-items: center;
  padding: 11px 12px 12px;
}

/* Keep the final swipe prompt opposite the selected country card on wide
   screens. Compact layouts return it to the reserved lower shelf below. */
.guided-orbit[data-mode="source"][data-route="globe"] .guided-orbit-card {
  top: 144px;
  bottom: auto;
}

@media (min-width: 481px) {
  .guided-orbit[data-mode="intro"] .guided-orbit-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "top top"
      "progress progress"
      "content content"
      "hint actions";
    column-gap: 14px;
    align-items: center;
  }

  .guided-orbit[data-mode="intro"] .guided-orbit-hint {
    grid-area: hint;
    margin-top: 12px;
  }

  .guided-orbit[data-mode="intro"] .guided-orbit-actions { margin-top: 12px; }
}

.guided-orbit-topline {
  grid-area: top;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  min-height: 44px;
}

.guided-orbit-kicker {
  grid-column: 2;
  margin: 0;
  color: var(--mint);
  font: 500 9px/1.25 var(--mono);
  letter-spacing: 1.15px;
  text-align: center;
  text-transform: uppercase;
}

.guided-orbit-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: var(--hud-muted);
  font: 400 20px/1 var(--body);
  cursor: pointer;
}

.guided-orbit-icon-button[hidden] { display: none !important; }

#guided-orbit-back { grid-column: 1; }
#guided-orbit-close { grid-column: 3; }

.guided-orbit-icon-button:hover,
.guided-orbit-icon-button:focus-visible,
.guided-orbit-button:focus-visible {
  border-color: var(--hud-border-strong);
  color: var(--mint);
  outline: 2px solid var(--mint);
  outline-offset: 2px;
}

.guided-orbit-progress {
  grid-area: progress;
  height: 1px;
  margin: 2px 0 13px;
  overflow: hidden;
  background: rgba(123, 232, 208, .14);
}

.guided-orbit-progress span {
  display: block;
  width: 33.333%;
  height: 100%;
  background: linear-gradient(90deg, var(--teal), var(--mint));
  box-shadow: 0 0 8px rgba(78, 205, 196, .4);
  transition: width .28s cubic-bezier(.22, .61, .36, 1);
}

.guided-orbit-content { grid-area: content; }

.guided-orbit-title {
  margin: 0;
  color: var(--text);
  font: 500 31px/1.02 var(--display);
  letter-spacing: -.3px;
}

.guided-orbit-title:focus { outline: none; }

.guided-orbit-title:focus-visible {
  box-shadow: -3px 0 0 var(--mint);
}

.guided-orbit-body {
  margin: 9px 0 0;
  color: var(--hud-muted);
  font: 300 14px/1.5 var(--body);
}

.guided-orbit-body[hidden] { display: none !important; }

.guided-orbit-lens-guide {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-top: 13px;
}

.guided-orbit-lens-guide[hidden] { display: none !important; }

.guided-orbit-lens-guide article {
  --orbit-lens-accent: var(--mint);
  position: relative;
  min-width: 0;
  min-height: 92px;
  padding: 11px 10px 10px;
  border: 1px solid var(--hud-border);
  border-radius: 3px;
  background: var(--hud-cell);
}

.guided-orbit-lens-guide article[data-guided-orbit-lens="carbon"] { --orbit-lens-accent: #f6a13f; }
.guided-orbit-lens-guide article[data-guided-orbit-lens="power"] { --orbit-lens-accent: #5cff8d; }
.guided-orbit-lens-guide article[data-guided-orbit-lens="physical"] { --orbit-lens-accent: #b97acb; }

html[data-theme="light"] .guided-orbit-lens-guide article[data-guided-orbit-lens="carbon"] { --orbit-lens-accent: #a9591d; }
html[data-theme="light"] .guided-orbit-lens-guide article[data-guided-orbit-lens="power"] { --orbit-lens-accent: #17744f; }
html[data-theme="light"] .guided-orbit-lens-guide article[data-guided-orbit-lens="physical"] { --orbit-lens-accent: #80558a; }

.guided-orbit-lens-guide article.is-active {
  border-color: var(--orbit-lens-accent);
  box-shadow: inset 0 2px 0 var(--orbit-lens-accent), 0 0 16px rgba(78, 205, 196, .08);
}

.guided-orbit-lens-guide article > span {
  display: block;
  margin-bottom: 7px;
  color: var(--orbit-lens-accent);
  font: 600 8px/1 var(--mono);
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.guided-orbit-lens-guide article > strong {
  display: block;
  color: var(--text);
  font: 600 11px/1.3 var(--body);
}

.guided-orbit-period {
  display: block;
  margin-top: 3px;
  color: var(--orbit-lens-accent);
  font: 500 9px/1.15 var(--mono);
  letter-spacing: .45px;
}

.guided-orbit-lens-guide article > small {
  display: block;
  margin-top: 5px;
  color: var(--hud-faint);
  font: 400 9px/1.35 var(--body);
}

.guided-orbit-legend {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 9px;
}

.guided-orbit-legend[hidden] { display: none !important; }

.guided-orbit-signal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 32px;
  gap: 6px;
  padding: 5px 7px;
  border: 1px solid var(--hud-border);
  border-radius: 999px;
  background: var(--hud-cell);
  color: var(--hud-muted);
  font: 500 8px/1.1 var(--mono);
  letter-spacing: .65px;
  text-transform: uppercase;
  white-space: nowrap;
}

.guided-orbit-swatch {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.guided-orbit-swatch.is-low { background: #7652b8; }
.guided-orbit-swatch.is-high { background: #f6a13f; }
.guided-orbit-swatch.is-gap {
  border: 1px solid #aeb9c1;
  border-radius: 2px;
  background: repeating-linear-gradient(135deg, #91a0ac 0 2px, transparent 2px 4px);
}

.guided-orbit-hint {
  margin: 13px 0 0;
  color: var(--hud-faint);
  font: 500 9px/1.35 var(--mono);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.guided-orbit-hint::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 12px rgba(123, 232, 208, .32);
}

.guided-orbit-actions {
  grid-area: actions;
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;
}

.guided-orbit-button {
  min-height: 44px;
  padding: 10px 17px;
  border: 1px solid var(--hud-border-strong);
  border-radius: 3px;
  background: var(--hud-cell-hover);
  color: var(--mint);
  font: 500 10px/1.2 var(--mono);
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
}

.guided-orbit[data-mode="interaction"] .guided-orbit-progress {
  margin: 0 0 8px;
}

.guided-orbit[data-mode="interaction"] .guided-orbit-title {
  font: 500 18px/1.1 var(--body);
  letter-spacing: 0;
}

.guided-orbit[data-mode="interaction"] .guided-orbit-body {
  margin-top: 3px;
  font-size: 11px;
  line-height: 1.35;
}

.guided-orbit[data-mode="interaction"] .guided-orbit-hint {
  margin-top: 8px;
}

.guided-orbit[data-mode="interaction"] .guided-orbit-actions { display: none; }

.guided-orbit[data-mode="source"] .guided-orbit-progress {
  margin: 0 0 8px;
}

.guided-orbit[data-mode="source"] .guided-orbit-title {
  font: 500 19px/1.1 var(--display);
}

.guided-orbit[data-mode="source"] .guided-orbit-body {
  margin-top: 3px;
  font-size: 11px;
  line-height: 1.35;
}

.guided-orbit[data-mode="source"] .guided-orbit-hint {
  grid-area: hint;
  margin-top: 8px;
}

.guided-orbit[data-mode="source"] .guided-orbit-hint::before {
  content: '↔';
  width: auto;
  height: auto;
  margin-right: 7px;
  border-radius: 0;
  background: none;
  color: var(--mint);
  box-shadow: none;
  font-size: 14px;
  vertical-align: -1px;
}

.guided-orbit[data-mode="source"] .guided-orbit-actions { display: none; }

.guided-orbit-cues[hidden] { display: none !important; }

.guided-orbit-cues {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.guided-orbit-cue {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid rgba(123, 232, 208, .54);
  border-radius: 999px;
  background: var(--hud-bg-strong);
  box-shadow: 0 0 22px rgba(78, 205, 196, .16);
  color: var(--mint);
  font: 600 8px/1 var(--mono);
  letter-spacing: .85px;
  text-transform: uppercase;
  white-space: nowrap;
  animation: guided-orbit-cue-breathe 1.8s ease-in-out infinite;
}

.guided-orbit-cue i {
  color: var(--mint);
  font: 400 16px/1 var(--body);
}

.guided-orbit-cue.is-lens {
  top: 140px;
  left: 50%;
  transform: translateX(-50%);
}

.guided-orbit-cue.is-rail {
  top: 174px;
  left: 246px;
}

@keyframes guided-orbit-cue-breathe {
  0%, 100% { opacity: .76; }
  50% { opacity: 1; }
}

.guided-orbit-announcer {
  position: fixed;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

body.guided-orbit-active #topbar .topbar-actions { display: none; }

body.guided-orbit-active #globe-back-btn,
body.guided-orbit-active #hex-legend {
  display: none !important;
}

body.guided-orbit-step-1 #elu-country-rank-rail,
body.guided-orbit-step-1 #elu-country-card-wrap,
body.guided-orbit-step-3 #elu-country-rank-rail {
  display: none !important;
}

body.guided-orbit-step-1 #globeViz { pointer-events: none; }

body.guided-orbit-step-2:not(.globe-fallback-active) #elu-country-rank-rail {
  border-color: rgba(123, 232, 208, .58);
  box-shadow: var(--hud-shadow), 0 0 0 1px rgba(123, 232, 208, .16), 0 0 28px rgba(78, 205, 196, .14);
}

body.guided-orbit-step-2.globe-fallback-active .elu-fallback-search input {
  border-color: rgba(123, 232, 208, .58);
  box-shadow: none;
}

body.guided-orbit-step-2.globe-fallback-active .elu-fallback-list-panel {
  border-color: rgba(123, 232, 208, .58);
  box-shadow: 0 0 0 1px rgba(123, 232, 208, .12), 0 0 28px rgba(78, 205, 196, .12);
}

body.guided-orbit-step-3:not(.globe-fallback-active) #hex-country-tooltip,
body.guided-orbit-step-3.globe-fallback-active #globe-fallback-country-detail {
  border-color: rgba(123, 232, 208, .62) !important;
  box-shadow: var(--hud-shadow-strong), 0 0 0 1px rgba(123, 232, 208, .14), 0 0 34px rgba(78, 205, 196, .16) !important;
}

body.guided-orbit-step-3:not(.globe-fallback-active) #elu-country-card-wrap #hex-country-tooltip.tt-swipe-cue {
  animation: elu-country-card-swipe-cue .72s cubic-bezier(.22, .61, .36, 1) .14s 1 both;
}

body.guided-orbit-step-3:not(.globe-fallback-active) #elu-country-card-wrap #hex-country-tooltip.tt-motion-ready {
  animation: none !important;
}

@media (max-width: 800px) {
  .guided-orbit[data-mode="interaction"] .guided-orbit-card {
    top: auto;
    right: 12px;
    bottom: 12px;
    left: auto;
    width: min(360px, calc(100vw - 120px));
    min-width: 0;
  }
}

/* At tablet and compact-desktop widths, the fallback's centered lens rail and
   right-side search field occupy the upper corridor. Dock the comparison shelf
   below the chooser so the lens, search, and first country row remain reachable;
   phones use their narrower bottom dock and wide desktops retain top-right. */
@media (min-width: 801px) and (max-width: 1280px) {
  body:not(.globe-fallback-active) .guided-orbit[data-mode="interaction"][data-route="globe"] .guided-orbit-card {
    top: auto;
    right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
  }

  body.globe-fallback-active .guided-orbit[data-mode="interaction"] .guided-orbit-card {
    top: auto;
    right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
  }
}

/* Short landscape/tablet viewports stack the fallback search below the lens.
   Use the upper-right lane there; the 132px offset clears the shared lens rail. */
@media (min-width: 801px) and (max-width: 1280px) and (max-height: 767px) {
  body.globe-fallback-active .guided-orbit[data-mode="interaction"] .guided-orbit-card {
    top: 132px;
    bottom: auto;
  }
}

/* Between phone and wide-desktop layouts, the 420px tutorial shelf and the
   complete country-card assembly cannot reliably sit side by side. Reserve a
   lower lane for the shelf; the evidence surface remains independently
   scrollable when the viewport is also short. */
@media (max-width: 1048px) {
  .guided-orbit[data-mode="source"][data-route="globe"] .guided-orbit-card {
    top: auto;
    bottom: 12px;
  }

  body.guided-orbit-step-3:not(.globe-fallback-active) #elu-country-card-wrap {
    bottom: 164px !important;
  }
}

/* The searchable fallback uses a wider two-column evidence surface, so its
   dedicated shelf lane remains necessary slightly farther into desktop widths. */
@media (max-width: 1187px) {
  body.guided-orbit-step-3.globe-fallback-active #globe-fallback {
    bottom: 164px;
  }

  body.guided-orbit-step-3.globe-fallback-active #globe-fallback-country-detail {
    max-height: calc(100dvh - 220px);
    overflow: auto;
    overscroll-behavior: contain;
  }
}

@media (max-width: 720px) {
  .guided-orbit-card {
    max-height: calc(100dvh - 20px);
    overflow-y: auto;
  }

  .guided-orbit-cue.is-lens {
    top: 130px;
  }

  .guided-orbit-cue.is-rail {
    top: 170px;
    left: 88px;
  }
}

@media (max-width: 480px) {
  #guided-orbit-replay {
    width: 44px;
    height: 44px;
  }

  .guided-orbit[data-mode="intro"] .guided-orbit-card {
    right: 12px;
    bottom: 12px;
    left: 12px;
    width: auto;
    padding: 14px 15px 15px;
    transform: none;
    animation-name: guided-orbit-in;
  }

  .guided-orbit-lens-guide { grid-template-columns: 1fr; }

  .guided-orbit-lens-guide article {
    min-height: 0;
    padding: 9px 10px;
  }

  .guided-orbit[data-mode="source"] .guided-orbit-card {
    top: auto;
    right: 10px;
    bottom: 10px;
    left: 10px;
    width: auto;
  }

  .guided-orbit-cue {
    min-height: 25px;
    gap: 4px;
    padding: 4px 7px;
    font-size: 7px;
    letter-spacing: .55px;
  }

  .guided-orbit-cue.is-rail {
    left: 60px;
  }

  body.guided-orbit-step-3:not(.globe-fallback-active) #elu-country-card-wrap {
    bottom: 152px !important;
  }

  body.guided-orbit-step-3.globe-fallback-active #globe-fallback {
    bottom: 152px;
  }

  body.guided-orbit-step-3.globe-fallback-active #globe-fallback-country-detail {
    max-height: calc(100dvh - 208px);
  }

  .guided-orbit[data-mode="interaction"] .guided-orbit-card {
    right: 8px;
    left: 64px;
    width: auto;
    padding: 8px 9px 9px;
  }

  .guided-orbit[data-mode="interaction"] .guided-orbit-topline {
    grid-template-columns: 44px minmax(0, 1fr) 44px;
  }

  .guided-orbit[data-mode="interaction"] .guided-orbit-kicker {
    font-size: 7px;
    letter-spacing: .7px;
  }

  .guided-orbit[data-mode="interaction"] .guided-orbit-body {
    margin-top: 4px;
    font-size: 9px;
    line-height: 1.3;
  }

  .guided-orbit[data-mode="interaction"] .guided-orbit-legend {
    gap: 4px;
    margin-top: 6px;
  }

  .guided-orbit[data-mode="interaction"] .guided-orbit-signal {
    min-height: 28px;
    gap: 4px;
    padding: 4px;
    font-size: 7px;
    letter-spacing: .35px;
  }

  .guided-orbit[data-mode="interaction"] .guided-orbit-hint {
    font-size: 7px;
    letter-spacing: .6px;
  }

  .guided-orbit[data-mode="source"] .guided-orbit-card {
    padding: 8px 9px 9px;
  }

  .guided-orbit[data-mode="source"] .guided-orbit-kicker {
    font-size: 7px;
    letter-spacing: .7px;
  }

  .guided-orbit[data-mode="source"] .guided-orbit-title { font-size: 17px; }
  .guided-orbit[data-mode="source"] .guided-orbit-body { font-size: 10px; }
}

@media (max-width: 340px) {
  .guided-orbit[data-mode="intro"] .guided-orbit-title { font-size: 27px; }
  .guided-orbit[data-mode="intro"] .guided-orbit-body { font-size: 13px; }

  .guided-orbit[data-mode="interaction"] .guided-orbit-swatch {
    width: 8px;
    height: 8px;
  }

  .guided-orbit[data-mode="interaction"] .guided-orbit-signal {
    font-size: 6.5px;
    letter-spacing: .2px;
  }

}

@media (max-height: 620px) {
  .guided-orbit[data-mode="intro"] .guided-orbit-card { padding-block: 10px; }
  .guided-orbit[data-mode="intro"] .guided-orbit-progress { margin-bottom: 8px; }
  .guided-orbit[data-mode="intro"] .guided-orbit-body { margin-top: 5px; }
  .guided-orbit[data-mode="intro"] .guided-orbit-hint { margin-top: 7px; }
  .guided-orbit[data-mode="intro"] .guided-orbit-actions { margin-top: 9px; }
}

@media (forced-colors: active) {
  .guided-orbit-card,
  .guided-orbit-signal,
  .guided-orbit-button,
  #guided-orbit-replay {
    border: 1px solid CanvasText;
  }

  .guided-orbit-title:focus-visible {
    outline: 2px solid CanvasText;
    outline-offset: 3px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #guided-orbit-replay,
  .guided-orbit::before,
  .guided-orbit-progress span {
    transition: none;
  }

  .guided-orbit-card { animation: none; }

  .guided-orbit-cue { animation: none; }

  body.guided-orbit-step-3:not(.globe-fallback-active) #elu-country-card-wrap #hex-country-tooltip.tt-swipe-cue {
    animation: none !important;
  }
}