/* Shared styles for the "d2-compare" two-card comparison diagram component.
   Each instance sets --single / --double on its own .d2-compare root via
   inline style; this file has no per-topic colors baked in. */
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:300 700; font-display:swap; src:url('/assets/fonts/space-grotesk-v22-latin-variable.woff2') format('woff2'); }

.d2-compare {
  --bg: #0a0807;
  --bg-2: #14100c;
  --fg: #f5ede0;
  --muted: #8a7a68;
  --accent: #ff6b1a;
  --border: rgba(255, 107, 26, 0.15);
  position: relative;
  font-family: 'Space Grotesk', sans-serif;
  background: var(--bg);
  color: var(--fg);
  overflow: hidden;
  container-type: inline-size;
}
.d2-compare * { box-sizing: border-box; }
.d2-compare .mono { font-family: 'JetBrains Mono', monospace; }

.d2-compare .bg-grid {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(rgba(255, 107, 26, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 107, 26, 0.035) 1px, transparent 1px);
  background-size: 64px 64px;
  transform: translateZ(0);
}
.d2-compare .bg-glow {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 60% 50% at 20% 10%, color-mix(in srgb, var(--single) 12%, transparent), transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 90%, color-mix(in srgb, var(--double) 12%, transparent), transparent 60%);
  transform: translateZ(0);
}

.d2-compare .compare-card {
  position: relative;
  background: linear-gradient(135deg, rgba(28, 22, 18, 0.92), rgba(20, 16, 12, 0.85));
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 32px;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease, border-color 0.4s ease;
  overflow: hidden;
  height: 100%;
  isolation: isolate;
  transform: translateZ(0);
}
.d2-compare .compare-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--card-color);
  opacity: 0.8;
  z-index: 2;
}
.d2-compare .compare-card.single { --card-color: var(--single); }
.d2-compare .compare-card.double { --card-color: var(--double); }
.d2-compare .compare-card:hover {
  border-color: var(--card-color);
  transform: translateY(-4px) translateZ(0);
  box-shadow: 0 20px 60px -20px var(--card-color);
}

.d2-compare.is-scrolling .compare-card,
.d2-compare.is-scrolling .metric-row {
  pointer-events: none !important;
  transition: none !important;
}

.d2-compare .metric-row {
  padding: 18px 12px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  position: relative;
  margin: 0 -12px;
  border-radius: 8px;
  transition: background-color 0.3s ease;
}
.d2-compare .metric-row:last-child { border-bottom: none; }
.d2-compare .metric-row.hovered {
  background-color: rgba(255, 107, 26, 0.05);
}
.d2-compare .metric-row.hovered .metric-bar-fill {
  filter: brightness(1.3);
  box-shadow: 0 0 8px currentColor;
}
.d2-compare .metric-bar {
  height: 8px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.d2-compare .metric-bar-fill {
  height: 100%;
  border-radius: 4px;
  width: 0;
  transition: width 1.2s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.3s, box-shadow 0.3s;
  position: relative;
}
.d2-compare .metric-bar-fill::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  animation: d2-shimmer 2.5s infinite;
  transform: translateZ(0);
}
@keyframes d2-shimmer {
  0% { transform: translateX(-100%) translateZ(0); }
  100% { transform: translateX(100%) translateZ(0); }
}
.d2-compare .vs-divider {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}
.d2-compare .vs-circle {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--bg-2), var(--bg));
  border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 900;
  font-size: 22px;
  color: var(--accent);
  box-shadow: 0 0 40px rgba(255, 107, 26, 0.25);
  z-index: 2;
}
.d2-compare .vs-line {
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--border), transparent);
  z-index: 1;
}
.d2-compare .stat-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  border-radius: 20px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  border: 1px solid currentColor;
}
.d2-compare .fade-in { animation: d2-fadeIn 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes d2-fadeIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.d2-compare .flex { display: flex; }
.d2-compare .inline-flex { display: inline-flex; }
.d2-compare .items-center { align-items: center; }
.d2-compare .items-start { align-items: flex-start; }
.d2-compare .justify-between { justify-content: space-between; }
.d2-compare .justify-center { justify-content: center; }
.d2-compare .flex-wrap { flex-wrap: wrap; }
.d2-compare .gap-2 { gap: 0.5rem; }
.d2-compare .gap-3 { gap: 0.75rem; }
.d2-compare .gap-4 { gap: 1rem; }
.d2-compare .gap-6 { gap: 1.5rem; }
.d2-compare .grid { display: grid; }
.d2-compare .relative { position: relative; }
.d2-compare .z-10 { z-index: 10; }
.d2-compare .mb-2 { margin-bottom: 0.5rem; }
.d2-compare .mb-3 { margin-bottom: 0.75rem; }
.d2-compare .mb-4 { margin-bottom: 1rem; }
.d2-compare .mb-8 { margin-bottom: 2rem; }
.d2-compare .mt-2 { margin-top: 0.5rem; }
.d2-compare .mt-3 { margin-top: 0.75rem; }
.d2-compare .text-xs { font-size: 0.75rem; }
.d2-compare .text-sm { font-size: 0.875rem; }
.d2-compare .text-lg { font-size: 1.125rem; }
.d2-compare .text-3xl { font-size: 1.875rem; }
.d2-compare .leading-none { line-height: 1; }
.d2-compare .tracking-tight { letter-spacing: -0.025em; }
.d2-compare .tracking-widest { letter-spacing: 0.1em; }
.d2-compare .font-bold { font-weight: 700; }
.d2-compare .font-semibold { font-weight: 600; }
.d2-compare .font-medium { font-weight: 500; }
.d2-compare .text-center { text-align: center; }
.d2-compare .mx-auto { margin-left: auto; margin-right: auto; }
.d2-compare .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.d2-compare .py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.d2-compare .pt-8 { padding-top: 2rem; }
.d2-compare .space-y-1 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.25rem; }
.d2-compare .border-t { border-top-width: 1px; border-top-style: solid; }
.d2-compare .max-w-2xl { max-width: 42rem; }
.d2-compare .rounded { border-radius: 0.25rem; }
.d2-compare .rounded-lg { border-radius: 0.5rem; }
.d2-compare .px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.d2-compare .py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }

@container (max-width: 860px) {
  .d2-compare .compare-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
  .d2-compare .vs-divider { flex-direction: row; padding: 16px 0; }
  .d2-compare .vs-line { height: 1px; width: 100%; top: 50%; bottom: auto; left: 0; background: linear-gradient(to right, transparent, var(--border), transparent); }
}
/* Fallback for browsers without container-query support: fall back to
   a viewport check. This is coarser (see the rolling-hash-diagram audit:
   article content columns are ~600-800px wide even on desktop viewports),
   so it stacks earlier than ideal on some pages, but degrades safely. */
@supports not (container-type: inline-size) {
  @media (max-width: 900px) {
    .d2-compare .compare-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
    .d2-compare .vs-divider { flex-direction: row; padding: 16px 0; }
    .d2-compare .vs-line { height: 1px; width: 100%; top: 50%; bottom: auto; left: 0; background: linear-gradient(to right, transparent, var(--border), transparent); }
  }
}