/* info-panel.css — brand panel + detail card */

/* ── Left column wrapper ──────────────────────────────────────── */

.earth-left-column {
  position: absolute;
  top: var(--hud-offset);
  left: var(--hud-offset);
  display: flex;
  flex-direction: column;
  z-index: 10;
  pointer-events: none;
  /* Width is set by the widest child (brand or info card) */
  max-width: min(calc(340px * var(--hud-scale)), calc(100vw - 32px));
}

.earth-left-column > * {
  position: relative;   /* override .hud-panel position:absolute */
  pointer-events: auto;
  width: 100%;
  box-sizing: border-box;
}

/* ── Brand panel ──────────────────────────────────────────────── */

.hud-panel-brand {
  --brand-scale: 0.88;
  --brand-copy-width: 160px;
  border-radius: 0;
  padding: calc(18px * var(--hud-scale)) calc(20px * var(--hud-scale));
  display: flex;
  align-items: center;
  justify-content: center;
  /* Reserve full panel height before brand images load */
  min-height: calc(66px * var(--hud-scale));
}

.hud-panel-brand .earth-brand {
  display: flex;
  align-items: center;
  gap: calc(10px * var(--hud-scale) * var(--brand-scale));
  min-width: 0;
}

.hud-panel-brand .earth-brand__logo {
  display: block;
  flex: 0 0 auto;
  width: calc(128px * var(--hud-scale) * var(--brand-scale));
  height: calc(128px * var(--hud-scale) * var(--brand-scale));
  object-fit: contain;
}

.hud-panel-brand .earth-brand__copy {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  justify-content: center;
  gap: calc(5px * var(--hud-scale) * var(--brand-scale));
  width: calc(var(--brand-copy-width) * var(--hud-scale) * var(--brand-scale));
}

.hud-panel-brand .earth-brand__title {
  display: block;
  width: min(100%, calc(var(--brand-copy-width) * var(--hud-scale) * var(--brand-scale)));
  max-width: 100%;
  height: auto;
  min-height: calc(20px * var(--hud-scale) * var(--brand-scale));
  object-fit: contain;
}

.hud-panel-brand .earth-brand__meta {
  display: flex;
  flex-direction: column;
  gap: calc(2px * var(--hud-scale) * var(--brand-scale));
  width: fit-content;
}

.hud-panel-brand .earth-brand__subtitle {
  color: var(--hud-text-muted);
  font-size: calc(0.74rem * var(--hud-scale) * var(--brand-scale));
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: 0.01em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.hud-panel-brand .earth-brand__description {
  color: var(--hud-text-soft);
  font-size: calc(0.6rem * var(--hud-scale) * var(--brand-scale));
  line-height: 1.3;
  letter-spacing: 0.08em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.hud-panel-brand .earth-brand--en {
  --brand-copy-width: 172px;
}

.hud-panel-brand .earth-brand--en .earth-brand__title {
  width: min(100%, calc(var(--brand-copy-width) * var(--hud-scale) * var(--brand-scale)));
}

.hud-panel-brand .earth-brand--en .earth-brand__copy {
  width: calc(var(--brand-copy-width) * var(--hud-scale) * var(--brand-scale));
}

.hud-panel-brand .earth-brand--en .earth-brand__subtitle,
.hud-panel-brand .earth-brand--en .earth-brand__description {
  font-family: "Roboto Condensed", "Arial Narrow", "Trebuchet MS", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

/* ── Info detail panel (floating, positioned near click by JS) ── */

.hud-panel-info {
  position: absolute;
  z-index: 50;
  width: min(calc(300px * var(--hud-scale)), calc(100vw - 32px));
  border-radius: 0;
  padding: 0;
  overflow: hidden;
  /* Start hidden */
  opacity: 0;
  transform: scale(0.94) translateY(4px);
  pointer-events: none;
  transition:
    opacity 0.22s ease,
    transform 0.22s ease;
}

.hud-panel-info.is-visible {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}

/* ── Info Card ────────────────────────────────────────────────── */

.info-card {
  display: block;
}

.info-card-header {
  display: flex;
  align-items: center;
  padding: calc(10px * var(--hud-scale)) calc(12px * var(--hud-scale));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
  border-bottom: 1px solid var(--hud-line);
  gap: var(--hud-gap-xs);
}

.info-card-icon {
  font-size: calc(16px * var(--hud-scale));
  flex-shrink: 0;
}

.info-card-header h3 {
  flex: 1;
  margin: 0;
  font-size: calc(0.92rem * var(--hud-scale));
  color: var(--hud-title);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.info-card-close {
  flex-shrink: 0;
}

.info-card-content {
  padding: calc(8px * var(--hud-scale)) calc(12px * var(--hud-scale));
  max-height: 58vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(160, 186, 216, 0.34) transparent;
  pointer-events: auto;
}

.info-card-content::-webkit-scrollbar {
  width: 4px;
}

.info-card-content::-webkit-scrollbar-track {
  background: transparent;
}

.info-card-content::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(210, 225, 242, 0.2), rgba(126, 154, 185, 0.28));
  border-radius: 999px;
}

.info-card-property {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: calc(6px * var(--hud-scale)) 0;
  border-bottom: 1px solid rgba(214, 229, 245, 0.06);
  pointer-events: auto;
  gap: var(--hud-gap-sm);
}

.info-card-property:last-child {
  border-bottom: none;
}

.info-card-label {
  color: var(--hud-text-soft);
  font-size: calc(0.68rem * var(--hud-scale));
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.18s ease;
}

.info-card-label:hover {
  color: var(--hud-text-muted);
}

.info-card-value {
  color: var(--hud-text);
  font-weight: 600;
  font-size: calc(0.82rem * var(--hud-scale));
  line-height: 1.45;
  text-align: right;
  max-width: calc(180px * var(--hud-scale));
  word-break: break-word;
}

/* Type-specific header accent colors */
.info-card.cable .info-card-header {
  background: rgba(255, 200, 0, 0.12);
  border-bottom-color: rgba(255, 200, 0, 0.15);
}
.info-card.cable .info-card-header h3 { color: #ffc800; }

.info-card.satellite .info-card-header {
  background: rgba(0, 229, 255, 0.12);
  border-bottom-color: rgba(0, 229, 255, 0.15);
}
.info-card.satellite .info-card-header h3 { color: #00e5ff; }

.info-card.bgp .info-card-header {
  background: rgba(120, 180, 255, 0.12);
  border-bottom-color: rgba(120, 180, 255, 0.15);
}
.info-card.bgp .info-card-header h3 { color: var(--hud-accent-strong); }

/* ── Layout-expanded: slide left column off-screen ────────────── */

.earth-app.layout-expanded .earth-left-column {
  transform: translate(calc(-100% + var(--hud-offset)), 0);
}