/*
 * Green Code Protocol — Info Cards
 * Part 13 of Master Rebuild Spec
 *
 * Hover/focus rich tooltip cards populated from claims.json.
 * Floating placement with viewport collision detection (flip/clamp).
 * Tier-themed. Accessible (role=tooltip, Escape to close).
 * VISIONARY cards → serif font + faint purple glow.
 * prefers-reduced-motion → instant show/hide, no transforms.
 */

/* ── Portal container ────────────────────────────────────────── */
#ic-portal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9800;
  pointer-events: none;
}

/* ── Card base ───────────────────────────────────────────────── */
.ic-card {
  position: absolute;
  pointer-events: auto; /* cards with links must be hoverable */
  min-width: 240px;
  max-width: 340px;
  background: var(--white, #fff);
  border: 1px solid var(--border, #e2e2de);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.13), 0 2px 8px rgba(0,0,0,0.08);
  overflow: hidden;

  /* Fade + rise + scale choreography */
  opacity: 0;
  transform: translateY(6px) scale(0.98);
  transition:
    opacity 220ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ic-card.ic-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.ic-card.ic-hiding {
  opacity: 0;
  transform: translateY(4px) scale(0.99);
  transition:
    opacity 150ms ease,
    transform 150ms ease;
  pointer-events: none;
}

/* prefers-reduced-motion: instant */
@media (prefers-reduced-motion: reduce) {
  .ic-card,
  .ic-card.ic-visible,
  .ic-card.ic-hiding {
    transition: none;
    transform: none;
  }
}

/* ── Tier-colored left border ────────────────────────────────── */
.ic-card[data-tier="verified"]  { border-left: 3px solid var(--tier-verified,  #2d6a4f); }
.ic-card[data-tier="modeled"]   { border-left: 3px solid var(--tier-modeled,   #b8860b); }
.ic-card[data-tier="proposed"]  { border-left: 3px solid var(--tier-proposed,  #1a5fb4); }
.ic-card[data-tier="visionary"] {
  border-left: 3px solid var(--tier-visionary, #6a0dad);
  font-family: 'Source Serif 4', Georgia, serif; /* /vision/ only gets serif */
  box-shadow: 0 8px 32px rgba(106,13,173,0.15), 0 0 12px rgba(106,13,173,0.08), 0 2px 8px rgba(0,0,0,0.08);
}

/* ── Card inner sections ─────────────────────────────────────── */
.ic-body {
  padding: 14px 16px 12px;
}

/* Tier pill — stagger 0ms */
.ic-tier-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 2px 8px;
  margin-bottom: 8px;

  animation: ic-stagger-in 220ms cubic-bezier(0.16,1,0.3,1) 0ms both;
}

.ic-tier-pill::before {
  content: '●';
  font-size: 8px;
}

.ic-tier-pill[data-tier="verified"]  { background: var(--tier-verified-bg,  #f0faf5); color: var(--tier-verified,  #2d6a4f); }
.ic-tier-pill[data-tier="modeled"]   { background: var(--tier-modeled-bg,   #fffbf0); color: var(--tier-modeled,   #b8860b); }
.ic-tier-pill[data-tier="proposed"]  { background: var(--tier-proposed-bg,  #f0f5ff); color: var(--tier-proposed,  #1a5fb4); }
.ic-tier-pill[data-tier="visionary"] { background: var(--tier-visionary-bg, #faf0ff); color: var(--tier-visionary, #6a0dad); }

/* Value — stagger 40ms */
.ic-value {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-900, #1a1a1a);
  line-height: 1.3;
  margin: 0 0 8px;

  animation: ic-stagger-in 220ms cubic-bezier(0.16,1,0.3,1) 40ms both;
}

/* Divider */
.ic-divider {
  height: 1px;
  background: var(--border, #e2e2de);
  margin: 10px 0;
  animation: ic-stagger-in 220ms cubic-bezier(0.16,1,0.3,1) 60ms both;
}

/* Explainer — stagger 80ms */
.ic-explainer {
  font-size: 13px;
  color: var(--ink-700, #3a3a3a);
  line-height: 1.55;
  margin: 0;

  animation: ic-stagger-in 220ms cubic-bezier(0.16,1,0.3,1) 80ms both;
}

/* Source line — stagger 120ms */
.ic-source-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 16px 12px;
  border-top: 1px solid var(--border, #e2e2de);
  background: var(--paper-2, #f4f4f1);
  font-size: 11px;
  color: var(--ink-500, #6b6b6b);

  animation: ic-stagger-in 220ms cubic-bezier(0.16,1,0.3,1) 120ms both;
}

.ic-source-link {
  color: var(--tier-proposed, #1a5fb4);
  text-decoration: none;
  font-weight: 500;
}
.ic-source-link:hover { text-decoration: underline; }

/* ELI5 variant panel (shown when eli5 active) */
.ic-eli5-panel {
  padding: 8px 16px;
  background: var(--tier-proposed-bg, #f0f5ff);
  border-top: 1px solid var(--tier-proposed-border, #93b4e8);
  font-size: 12px;
  color: var(--tier-proposed, #1a5fb4);
  line-height: 1.5;

  animation: ic-stagger-in 220ms cubic-bezier(0.16,1,0.3,1) 100ms both;
}

/* ── Stagger keyframe ─────────────────────────────────────────── */
@keyframes ic-stagger-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ic-tier-pill,
  .ic-value,
  .ic-divider,
  .ic-explainer,
  .ic-source-line,
  .ic-eli5-panel {
    animation: none;
  }
}

/* ── Inline [data-claim-id] trigger decoration ───────────────── */
[data-claim-id] {
  cursor: help;
  border-bottom: 1px dashed var(--border-2, #d0d0cb);
  transition: border-color 150ms;
}

[data-claim-id]:hover,
[data-claim-id]:focus-visible {
  border-bottom-color: var(--ink-500, #6b6b6b);
  outline: none;
}