/* ============================================================================
   Prediction Event Detail ( [prediction_event_detail] )
   Aligned to market-detail-simple.html mockup
   ========================================================================== */

.defirate-pred-event {
  /* Palette + tokens (scoped so we don't leak to themes) */
  --primary: #3b82f6;
  --primary-dark: #2563eb;
  --primary-light: #60a5fa;
  --kalshi: #00d4aa;
  --kalshi-dark: #009f85;
  --polymarket: #7c3aed;
  --polymarket-dark: #5b21b6;
  --polymarket-us: #2563eb;
  --polymarket-us-dark: #1e40af;
  --gemini: #0ea5e9;
  --gemini-dark: #0369a1;
  --forecastex: #f97316;
  --forecastex-dark: #c2410c;
  --og: #1f2937;
  --og-dark: #111827;
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;

  --bg-primary: #ffffff;
  --bg-secondary: #f8fafc;
  --bg-tertiary: #f1f5f9;
  --border: #e2e8f0;
  --border-light: #f1f5f9;
  --text-primary: #0f172a;
  --text-secondary: #64748b;
  --text-tertiary: #94a3b8;

  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);

  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;

  /* Mobile + a11y */
  --tap-target: 44px;

  /* Aliases */
  --accent-primary: var(--primary);
  --border-color: var(--border);
  --focus-outline: rgba(59, 130, 246, 0.75);
  --focus-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);

  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--text-primary);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.defirate-pred-event * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.defirate-pred-event .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.defirate-pred-event .container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 1rem;
  width: 100%;
}
@media (min-width: 768px) { .defirate-pred-event .container { padding: 1.5rem; } }
@media (min-width: 1024px) { .defirate-pred-event .container { padding: 2rem; } }

/* ============================================================================
   Hero
   ========================================================================== */
.defirate-pred-event .hero {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1rem;
  margin-bottom: 1rem;
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}
.defirate-pred-event .hero::before {
  content: none;
}
.defirate-pred-event .hero-content { position: relative; z-index: 1; }
@media (min-width: 768px) {
  .defirate-pred-event .hero { padding: 3rem 2rem; border-radius: 1rem; margin-bottom: 1.5rem; }
}

.defirate-pred-event .hero-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2rem;
}

.defirate-pred-event .hero-title { flex: 1; min-width: 280px; }
@media (max-width: 1200px) {
  .defirate-pred-event .hero-top { align-items: stretch; }
  .defirate-pred-event .hero-title { min-width: 0; }
  .defirate-pred-event .hero .ctas { flex-basis: 100%; width: 100%; }
}

@media (max-width: 1023px) {
  .defirate-pred-event .hero-top {
    margin-bottom: 0.875rem;
  }

  .defirate-pred-event .hero-odds-switcher-wrap {
    margin-top: 0;
  }
}

.defirate-pred-event .hero-title .hero-heading {
  font-size: 1.5rem;
  font-weight: 700;
  /* Override theme heading styles like `.entry-content h2` */
  margin-top: 0;
  margin-bottom: 0.75rem;
  padding: 0;
  border: 0;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}
@media (min-width: 768px) { .defirate-pred-event .hero-title .hero-heading { font-size: 2.5rem; } }

.defirate-pred-event .meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

/* Mobile: keep meta on one line. */
@media (max-width: 767px) {
  .defirate-pred-event .meta {
    gap: 0.75rem;
    flex-wrap: nowrap;
  }

  .defirate-pred-event .meta .live-indicator,
  .defirate-pred-event .meta .edit-event-btn {
    flex-shrink: 0;
  }

  .defirate-pred-event .meta .updated-time {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.defirate-pred-event .edit-event-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border-radius: 9999px;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
  white-space: nowrap;
  touch-action: manipulation;
}
.defirate-pred-event .edit-event-btn:active { transform: translateY(0); }
.defirate-pred-event .edit-event-btn:focus-visible {
  outline: 2px solid var(--focus-outline);
  outline-offset: 2px;
}

.defirate-pred-event .live-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  padding: 0.375rem 0.75rem;
  border-radius: 2rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.defirate-pred-event .live-dot {
  width: 0.5rem;
  height: 0.5rem;
  background: #4ade80;
  border-radius: 50%;
  animation: defirate-pred-pulse 2s ease-in-out infinite;
}
@keyframes defirate-pred-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

.defirate-pred-event .updated-time {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.defirate-pred-event .desc {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  max-width: 700px;
  line-height: 1.6;
}

.defirate-pred-event .hero .ctas {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.defirate-pred-event .hero .cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  transition: all 0.2s;
  white-space: nowrap;
  touch-action: manipulation;
}
.defirate-pred-event .hero .cta.kalshi { background: var(--kalshi); color: var(--text-primary); }
.defirate-pred-event .hero .cta.polymarket { background: var(--polymarket); color: #fff; }
.defirate-pred-event .hero .cta.polymarket_us { background: var(--polymarket-us); color: #fff; }
.defirate-pred-event .hero .cta.gemini { background: var(--gemini); color: #fff; }
.defirate-pred-event .hero .cta.forecastex { background: var(--forecastex); color: #fff; }
.defirate-pred-event .hero .cta.og { background: var(--og); color: #fff; }

/* Hero odds switcher */
.defirate-pred-event .hero-odds-switcher-wrap {
  display: flex;
  justify-content: flex-start;
  margin-top: 0.25rem;
  width: 100%;
}

.defirate-pred-event .hero-odds-switcher {
  width: auto;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: nowrap;
  padding: 0.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-primary);
}

.defirate-pred-event .hero-odds-switcher-btn {
  height: 2rem;
  min-width: 0;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.625rem;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  touch-action: manipulation;
}

.defirate-pred-event .hero-odds-switcher-btn.active {
  color: var(--primary-dark);
  background: var(--bg-secondary);
  border-color: rgba(59, 130, 246, 0.32);
}

.defirate-pred-event .hero-odds-switcher-btn:focus-visible {
  outline: 2px solid var(--focus-outline);
  outline-offset: 2px;
}

@media (min-width: 1024px) {
  .defirate-pred-event .hero-top .hero-odds-switcher-wrap {
    width: auto;
    margin-top: auto;
    margin-left: 1rem;
    align-self: flex-end;
    justify-content: flex-end;
    flex: 0 0 auto;
  }
}

@media (max-width: 767px), (max-width: 900px) and (pointer: coarse) {
  .defirate-pred-event .hero-odds-switcher {
    width: 100%;
    gap: 0.25rem;
    padding: 0.25rem;
  }

  .defirate-pred-event .hero-odds-switcher-btn {
    flex: 1 1 auto;
    min-width: 0;
  }
}

@media (max-width: 640px) {
  .defirate-pred-event .hero-odds-switcher-btn {
    height: 1.875rem;
    padding: 0 0.45rem;
    font-size: 0.75rem;
  }
}

/* KPI grid */
.defirate-pred-event .kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
@media (min-width: 1024px) {
  .defirate-pred-event .kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.defirate-pred-event .kpi {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1rem;
  transition: all 0.2s;
  min-width: 0;
}
@media (min-width: 768px) { .defirate-pred-event .kpi { padding: 1.25rem; } }

.defirate-pred-event .kpi-label {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.9;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
@media (min-width: 768px) {
  .defirate-pred-event .kpi-label { font-size: 0.8125rem; margin-bottom: 0.75rem; }
}

.defirate-pred-event .kpi-value {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  letter-spacing: -0.025em;
}
@media (min-width: 768px) { .defirate-pred-event .kpi-value { font-size: 2.25rem; } }

.defirate-pred-event .kpi-detail {
  font-size: 0.875rem;
  opacity: 0.85;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.defirate-pred-event .kpi-share { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.defirate-pred-event .hero .kpi-jump-link {
  color: var(--primary-dark);
  font-weight: 600;
  text-decoration: none;
}
.defirate-pred-event .hero .kpi-jump-link:focus-visible {
  outline: 2px solid var(--focus-outline);
  outline-offset: 2px;
}

.defirate-pred-event .chip {
  display: inline-flex;
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  font-weight: 600;
}
.defirate-pred-event .chip.kalshi { background: var(--kalshi); color: var(--text-primary); }
.defirate-pred-event .chip.polymarket { background: var(--polymarket); color: #fff; }
.defirate-pred-event .chip.polymarket_us { background: var(--polymarket-us); color: #fff; }
.defirate-pred-event .chip.gemini { background: var(--gemini); color: #fff; }
.defirate-pred-event .chip.forecastex { background: var(--forecastex); color: #fff; }
.defirate-pred-event .chip.og { background: var(--og); color: #fff; }

.defirate-pred-event .positive { color: var(--success); }
.defirate-pred-event .negative { color: var(--danger); }
.defirate-pred-event .muted { color: var(--text-secondary); opacity: 1; }

/* Hero delta values: color by direction (success/danger). */
.defirate-pred-event .hero .kpi-delta {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.defirate-pred-event .hero #kpi-momentum .kpi-value,
.defirate-pred-event .hero .kpi-momentum .kpi-value {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.defirate-pred-event .hero .kpi-delta-value {
  color: var(--text-secondary);
}
.defirate-pred-event .hero .kpi-delta-value.positive { color: var(--success); }
.defirate-pred-event .hero .kpi-delta-value.negative { color: var(--danger); }
.defirate-pred-event .hero .kpi-delta-arrow.positive { color: var(--success); }
.defirate-pred-event .hero .kpi-delta-arrow.negative { color: var(--danger); }
.defirate-pred-event .hero .kpi-delta-arrow:empty { display: none; }

/* ============================================================================
   Event Detail Content (admin-inserted Gutenberg blocks)
   ========================================================================== */
.defirate-pred-event .event-detail-content {
  margin-bottom: 1.5rem;
}

.defirate-pred-event .event-detail-content > * + * {
  margin-top: 1rem;
}

.defirate-pred-event .event-detail-content p,
.defirate-pred-event .event-detail-content li {
  color: var(--text-secondary);
  font-size: 0.9375rem;
  line-height: 1.7;
}

.defirate-pred-event .event-detail-content h1,
.defirate-pred-event .event-detail-content h2,
.defirate-pred-event .event-detail-content h3,
.defirate-pred-event .event-detail-content h4,
.defirate-pred-event .event-detail-content h5,
.defirate-pred-event .event-detail-content h6 {
  color: var(--text-primary);
  font-weight: 700;
  line-height: 1.25;
}
.defirate-pred-event .event-detail-content h1 { font-size: 1.5rem; }
.defirate-pred-event .event-detail-content h2 { font-size: 1.25rem; }
.defirate-pred-event .event-detail-content h3 { font-size: 1.125rem; }

.defirate-pred-event .event-detail-content ul,
.defirate-pred-event .event-detail-content ol {
  padding-left: 1.25rem;
}
.defirate-pred-event .event-detail-content li + li {
  margin-top: 0.375rem;
}

.defirate-pred-event .event-detail-content a {
  color: var(--primary-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.defirate-pred-event .event-detail-content a:hover {
  color: var(--primary);
}

.defirate-pred-event .event-detail-content img {
  max-width: 100%;
  height: auto;
}

.defirate-pred-event .event-detail-content blockquote {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
}
.defirate-pred-event .event-detail-content blockquote > * + * {
  margin-top: 0.75rem;
}

.defirate-pred-event .event-detail-content hr {
  border: 0;
  border-top: 1px solid var(--border);
}

.defirate-pred-event .event-detail-content .wp-block-buttons {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.defirate-pred-event .event-detail-content .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 1rem;
  border-radius: var(--radius-md);
  background: var(--primary);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  border: 1px solid var(--primary);
  transition: background 0.15s ease, transform 0.15s ease;
}
.defirate-pred-event .event-detail-content .wp-block-button__link:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
}
.defirate-pred-event .event-detail-content .wp-block-button__link:active {
  transform: translateY(1px);
}

.defirate-pred-event .event-detail-content .wp-block-columns {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.defirate-pred-event .event-detail-content .wp-block-column {
  flex: 1;
  min-width: 240px;
}

@media (max-width: 640px) {
  /* Tighten affiliate promo card spacing so mobile CTAs aren't overly narrow. */
  .defirate-pred-event .event-detail-content .cta-wrapper {
    padding: 0.75rem;
  }

  .defirate-pred-event .event-detail-content .cta-grid {
    gap: 0.75rem;
  }

  .defirate-pred-event .event-detail-content .cta.cta-card.card-list-item {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 0.875rem;
  }

  .defirate-pred-event .event-detail-content .cta-card .cta-button {
    padding: 0.6875rem 0.875rem;
  }
}

/* ============================================================================
   Controls Card
   ========================================================================== */
.defirate-pred-event .controls-card {
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  padding: 1rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
}
@media (min-width: 768px) { .defirate-pred-event .controls-card { padding: 1.25rem 1.5rem; } }

.defirate-pred-event .controls {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@media (min-width: 768px) {
  .defirate-pred-event .controls {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
  }
}

.defirate-pred-event .group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
@media (min-width: 640px) {
  .defirate-pred-event .group { flex-direction: row; align-items: center; flex-wrap: wrap; }
}

.defirate-pred-event .label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}

.defirate-pred-event .buttons {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.defirate-pred-event .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  border: 1px solid var(--border);
  background: var(--bg-primary);
  color: var(--text-secondary);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
  touch-action: manipulation;
}
.defirate-pred-event .btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.defirate-pred-event .btn:focus-visible {
  outline: 2px solid var(--focus-outline);
  outline-offset: 2px;
}

.defirate-pred-event .outcome-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.defirate-pred-event .outcome-group.disabled {
  opacity: 0.55;
  pointer-events: none;
}
.defirate-pred-event .outcome-group.disabled .outcome-dropdown-btn {
  cursor: default;
}

.defirate-pred-event .outcome-dropdown {
  position: relative;
  min-width: 220px;
}

.defirate-pred-event .outcome-dropdown-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
  touch-action: manipulation;
}
.defirate-pred-event .outcome-dropdown-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  text-align: left;
}
.defirate-pred-event .outcome-dropdown-btn:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--focus-shadow);
}
.defirate-pred-event .outcome-dropdown-btn:focus-visible {
  outline: 2px solid var(--focus-outline);
  outline-offset: 2px;
}

.defirate-pred-event .outcome-dropdown-caret {
  color: var(--text-secondary);
  flex: none;
}

.defirate-pred-event .outcome-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  z-index: 20;
  max-height: min(320px, 60vh);
  overflow-y: auto;
  padding: 0.25rem 0;
}

.defirate-pred-event .outcome-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--text-primary);
  touch-action: manipulation;
}
.defirate-pred-event .outcome-option:focus-within {
  outline: 2px solid var(--focus-outline);
  outline-offset: -2px;
}
.defirate-pred-event .outcome-option input {
  accent-color: var(--primary);
  width: 1rem;
  height: 1rem;
}

.defirate-pred-event .outcome-select-hidden {
  display: none;
}

.defirate-pred-event .search-input {
  padding: 0.5rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 1rem; /* Prevent iOS zoom on focus */
  min-width: 200px;
  touch-action: manipulation;
}
.defirate-pred-event .search-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--focus-shadow);
}
.defirate-pred-event .search-input:focus-visible {
  outline: 2px solid var(--focus-outline);
  outline-offset: 2px;
}

/* ============================================================================
   Sections & Graph
   ========================================================================== */
.defirate-pred-event .section {
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
}
@media (min-width: 768px) { .defirate-pred-event .section { padding: 2rem; } }

.defirate-pred-event .section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.defirate-pred-event .snapshot-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.defirate-pred-event .search-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.defirate-pred-event .search-group .search-input {
  flex: 1;
}

.defirate-pred-event .odds-settings-btn {
  width: var(--tap-target);
  height: var(--tap-target);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  background: var(--bg-primary);
  color: var(--text-secondary);
  border-radius: var(--radius-md);
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  touch-action: manipulation;
}
.defirate-pred-event .odds-settings-btn:hover { border-color: var(--primary); color: var(--primary); }
.defirate-pred-event .odds-settings-btn:focus-visible {
  outline: 2px solid var(--focus-outline);
  outline-offset: 2px;
}
.defirate-pred-event .odds-settings-btn svg { display: block; }
.defirate-pred-event .odds-settings-btn::after {
  content: attr(data-tooltip);
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  padding: 0.375rem 0.5rem;
  border-radius: var(--radius-sm);
  background: rgba(15, 23, 42, 0.95);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.1;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  z-index: 20;
  box-shadow: var(--shadow-md);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.defirate-pred-event .odds-settings-btn::before {
  content: '';
  position: absolute;
  right: 14px;
  bottom: calc(100% + 6px);
  width: 8px;
  height: 8px;
  background: rgba(15, 23, 42, 0.95);
  transform: rotate(45deg);
  opacity: 0;
  pointer-events: none;
  z-index: 19;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.defirate-pred-event .odds-settings-btn:hover::after,
.defirate-pred-event .odds-settings-btn:focus-visible::after {
  opacity: 1;
  transform: translateY(0);
}
.defirate-pred-event .odds-settings-btn:hover::before,
.defirate-pred-event .odds-settings-btn:focus-visible::before {
  opacity: 1;
  transform: rotate(45deg) translateY(0);
}

/* Odds format dropdown (no layout shift; overlay only) */
.defirate-pred-event .odds-settings-btn[aria-expanded="true"]::after,
.defirate-pred-event .odds-settings-btn[aria-expanded="true"]::before {
  opacity: 0;
}

.defirate-pred-event .odds-dropdown {
  position: relative;
  flex-shrink: 0;
}

.defirate-pred-event .odds-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 200px;
  max-width: calc(100vw - 2rem);
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  z-index: 30;
  padding: 0.25rem;
  max-height: min(260px, 60vh);
  overflow-y: auto;
}

.defirate-pred-event .odds-dropdown-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
  text-align: left;
  touch-action: manipulation;
}
.defirate-pred-event .odds-dropdown-item:hover { background: var(--bg-secondary); }
.defirate-pred-event .odds-dropdown-item.active { background: var(--bg-secondary); color: var(--primary-dark); }
.defirate-pred-event .odds-dropdown-item::after { content: ''; color: var(--primary); font-weight: 800; }
.defirate-pred-event .odds-dropdown-item.active::after { content: '✓'; }
.defirate-pred-event .odds-dropdown-item:focus-visible {
  outline: 2px solid var(--focus-outline);
  outline-offset: 2px;
}

.defirate-pred-event .section-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  border: 0;
}

.defirate-pred-event .section-subtitle {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-top: 0;
}

.defirate-pred-event .graph-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.defirate-pred-event .chart-settings {
  width: auto;
}

.defirate-pred-event .chart-settings-summary {
  display: none;
  list-style: none;
}

.defirate-pred-event .chart-settings-summary::-webkit-details-marker {
  display: none;
}

.defirate-pred-event .chart-settings-panel {
  display: block;
}

.defirate-pred-event .chart-settings-selects {
  display: none;
}

.defirate-pred-event .graph-tap-subtitle { display: none; }

.defirate-pred-event .graph-controls {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: center;
}

.defirate-pred-event .toggle {
  display: flex;
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  padding: 0.25rem;
  gap: 0.25rem;
  border: 1px solid var(--border-color);
}

.defirate-pred-event .toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.375rem 0.875rem;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
  touch-action: manipulation;
}
.defirate-pred-event .toggle-btn.active {
  background: var(--accent-primary);
  color: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.defirate-pred-event .toggle-btn:focus-visible {
  outline: 2px solid var(--focus-outline);
  outline-offset: 2px;
}

.defirate-pred-event .avg-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.875rem;
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}

.defirate-pred-event .canvas {
  width: 100%;
  height: 400px;
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  position: relative;
  overflow: hidden;
}
@media (min-width: 768px) { .defirate-pred-event .canvas { height: 500px; } }

.defirate-pred-event .chart-container {
  width: 100%;
  height: 100%;
}
.defirate-pred-event .chart-container .uplot {
  width: 100% !important;
  max-width: 100%;
}

.defirate-pred-event .defirate-chart-tooltip {
  position: absolute;
  z-index: 5;
  background: rgba(15, 23, 42, 0.95);
  color: #fff;
  padding: 0.75rem 0.875rem;
  border-radius: var(--radius-md);
  font-size: 0.8125rem;
  line-height: 1.35;
  pointer-events: none;
  box-shadow: var(--shadow-md);
  min-width: 160px;
}
.defirate-pred-event .defirate-chart-tooltip .tt-date {
  font-weight: 700;
  margin-bottom: 0.5rem;
  opacity: 0.95;
}
.defirate-pred-event .defirate-chart-tooltip .tt-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.25rem;
}
.defirate-pred-event .defirate-chart-tooltip .tt-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  flex: none;
}

/* Legend */
.defirate-pred-event .legend {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
  padding-top: 1rem;
  border-top: 1px solid var(--border-light);
  margin-top: 1rem;
}
.defirate-pred-event .legend-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--text-secondary);
}
.defirate-pred-event .legend-item.active { color: var(--text-primary); font-weight: 600; }
.defirate-pred-event .legend-color { width: 1rem; height: 1rem; border-radius: var(--radius-sm); }
.defirate-pred-event .legend-color.aggregate { background: var(--primary); }
.defirate-pred-event .legend-color.volume { background: var(--text-tertiary); }
.defirate-pred-event .legend-color.kalshi { background: var(--kalshi); }
.defirate-pred-event .legend-color.polymarket { background: var(--polymarket); }
.defirate-pred-event .legend-color.polymarket_us { background: var(--polymarket-us); }
.defirate-pred-event .legend-color.gemini { background: var(--gemini); }
.defirate-pred-event .legend-color.forecastex { background: var(--forecastex); }
.defirate-pred-event .legend-color.og { background: var(--og); }
.defirate-pred-event .legend-color.spread { background: var(--warning); }

/* ============================================================================
   Table
   ========================================================================== */
.defirate-pred-event .table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  margin: 0 -1.5rem;
  padding: 0 1.5rem;
}
@media (min-width: 768px) { .defirate-pred-event .table-wrapper { margin: 0; padding: 0; } }

.defirate-pred-event table.defirate-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 800px;
}

.defirate-pred-event table.defirate-table:not(.arb-table):not(.arb-diff-table) th.venue-col,
.defirate-pred-event table.defirate-table:not(.arb-table):not(.arb-diff-table) td.venue-col {
  width: 220px;
}

.defirate-pred-event .defirate-table thead {
  background: var(--bg-secondary);
  border-bottom: 2px solid var(--border);
}

.defirate-pred-event .defirate-table th {
  padding: 0.875rem 1rem;
  text-align: left;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.defirate-pred-event .defirate-table th.center,
.defirate-pred-event .defirate-table td.center { text-align: center; }

.defirate-pred-event .defirate-table tbody tr {
  border-bottom: 1px solid var(--border-light);
  transition: background 0.2s;
}

.defirate-pred-event .defirate-table td {
  padding: 1rem;
  vertical-align: middle;
}

.defirate-pred-event .outcome {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.defirate-pred-event .outcome > div { min-width: 0; }

.defirate-pred-event .avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
  flex-shrink: 0;
}

.defirate-pred-event .name {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 0.9375rem;
  line-height: 1.2;
}

.defirate-pred-event .party {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  line-height: 1.2;
}

.defirate-pred-event .prob {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}

.defirate-pred-event .change {
  font-size: 0.8125rem;
  font-weight: 600;
  margin-top: 0.25rem;
  color: var(--text-tertiary);
}
.defirate-pred-event .change.positive { color: var(--success); }
.defirate-pred-event .change.negative { color: var(--danger); }
.defirate-pred-event .change.neutral { color: var(--text-tertiary); }

.defirate-pred-event .spread-value {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text-primary);
}

.defirate-pred-event .volume-value {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text-primary);
}

/* Show more outcomes */
.defirate-pred-event tr.defirate-hidden-by-more,
.defirate-pred-event .snapshot-card.defirate-hidden-by-more { display: none; }
.defirate-pred-event .show-more-container.show-desktop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 0;
  margin-top: 0.75rem;
  border-top: 1px solid var(--border);
  text-align: center;
}

.defirate-pred-event .show-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.8125rem;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: var(--shadow-sm);
  touch-action: manipulation;
}

.defirate-pred-event .show-more-btn:active { transform: translateY(0); }
.defirate-pred-event .show-more-btn:focus-visible {
  outline: 2px solid var(--focus-outline);
  outline-offset: 2px;
}
.defirate-pred-event .show-more-btn svg { flex-shrink: 0; }
.defirate-pred-event .show-more-text {
  font-size: 0.875rem;
  line-height: 1.1;
}

.defirate-pred-event .outcome-count {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-top: 0;
}

/* Snapshot: mobile cards + venue pills */
.defirate-pred-event .snapshot-mobile { display: none; }
.defirate-pred-event .snapshot-table-wrapper { display: block; }

.defirate-pred-event .snapshot-cards {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.defirate-pred-event .snapshot-card {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.defirate-pred-event .snapshot-card-summary {
  display: block;
  padding: 1rem;
  cursor: pointer;
  user-select: none;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}
.defirate-pred-event .snapshot-card-summary::-webkit-details-marker { display: none; }

.defirate-pred-event .snapshot-card-header {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.defirate-pred-event .snapshot-card .avatar {
  width: 2.625rem;
  height: 2.625rem;
  border-radius: 0.625rem;
  font-size: 0.75rem;
  line-height: 1;
}

.defirate-pred-event .snapshot-card-main {
  flex: 1;
  min-width: 0;
}

.defirate-pred-event .snapshot-card-name {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-primary);
}

.defirate-pred-event .snapshot-card-stats {
  margin-top: 0.25rem;
  display: flex;
  gap: 0.625rem;
  font-size: 0.8125rem;
  color: var(--text-secondary);
}
.defirate-pred-event .snapshot-stat-val {
  color: var(--text-primary);
  font-weight: 600;
  font-feature-settings: 'tnum' 1;
}

.defirate-pred-event .snapshot-card-agg {
  flex-shrink: 0;
  text-align: right;
  min-width: 5.5rem;
}

.defirate-pred-event .snapshot-card-agg-row {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0.375rem;
}

.defirate-pred-event .snapshot-card-agg-label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.defirate-pred-event .snapshot-card-agg .prob {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
  margin: 0;
}

.defirate-pred-event .snapshot-card-subtitle {
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

.defirate-pred-event .snapshot-card-divider {
  height: 1px;
  background: var(--border-light);
  margin-top: 0.75rem;
}

.defirate-pred-event .snapshot-card-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.defirate-pred-event .snapshot-chip-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  flex: 1;
  min-width: 0;
  padding-right: 0.5rem;
}
.defirate-pred-event .snapshot-chip-row::-webkit-scrollbar { display: none; }

.defirate-pred-event .snapshot-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.375rem 0.625rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(226, 232, 240, 0.9);
  background: rgba(248, 250, 252, 0.95);
  color: var(--text-primary);
  font-size: 0.8125rem;
  flex-shrink: 0;
}

.defirate-pred-event .venue-code { font-weight: 800; font-size: 0.75rem; }
.defirate-pred-event .venue-pct { font-weight: 700; font-feature-settings: 'tnum' 1; }

.defirate-pred-event .snapshot-chip.kalshi .venue-code { color: var(--kalshi); }
.defirate-pred-event .snapshot-chip.polymarket .venue-code { color: var(--polymarket); }
.defirate-pred-event .snapshot-chip.polymarket_us .venue-code { color: var(--polymarket-us); }
.defirate-pred-event .snapshot-chip.gemini .venue-code { color: var(--gemini); }
.defirate-pred-event .snapshot-chip.forecastex .venue-code { color: var(--forecastex); }
.defirate-pred-event .snapshot-chip.og .venue-code { color: var(--og); }

.defirate-pred-event .snapshot-chevron {
  color: var(--text-tertiary);
  flex-shrink: 0;
}
.defirate-pred-event .snapshot-chevron svg {
  width: 0.875rem;
  height: 0.875rem;
  transition: transform 0.25s ease;
}
.defirate-pred-event details.snapshot-card[open] .snapshot-chevron svg { transform: rotate(180deg); }

.defirate-pred-event .snapshot-card-expanded {
  padding: 0 1rem 1rem 1rem;
}

.defirate-pred-event .snapshot-venues-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin-top: 0.75rem;
}

/* Trade-enabled venue pill (mobile cards): subtle "this is a link" affordance. */
.defirate-pred-event .snapshot-venues-grid a.venue-pill--trade {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.defirate-pred-event .snapshot-venues-grid a.venue-pill--trade:active {
  filter: brightness(0.985);
}
.defirate-pred-event .snapshot-venues-grid a.venue-pill--trade .venue-pill-name {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* Venue pill (desktop + mobile) uses liquidity progress border */
.defirate-pred-event .venue-pill {
  position: relative;
  display: block;
  padding: 0.75rem 0.875rem;
  border-radius: 0.625rem;
  overflow: hidden;
  background: var(--bg-primary);
  isolation: isolate;
}

.defirate-pred-event .venue-pill::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: var(--border);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.defirate-pred-event .venue-pill::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: var(--progress-gradient, linear-gradient(90deg, var(--primary), var(--warning)));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  clip-path: inset(0 calc(100% - var(--progress, 0%)) 0 0);
  transition: clip-path 0.25s ease;
}

.defirate-pred-event .venue-pill.kalshi {
  --venue-solid: var(--kalshi);
  --progress-gradient: linear-gradient(90deg, var(--kalshi), #a8e063, #ffd93d, var(--warning));
  background: rgba(0, 212, 170, 0.05);
}
.defirate-pred-event .venue-pill.polymarket {
  --venue-solid: var(--polymarket);
  --progress-gradient: linear-gradient(90deg, var(--polymarket), #a78bfa, #f472b6, var(--warning));
  background: rgba(124, 58, 237, 0.05);
}
.defirate-pred-event .venue-pill.polymarket_us {
  --venue-solid: var(--polymarket-us);
  --progress-gradient: linear-gradient(90deg, var(--polymarket-us), #60a5fa, #93c5fd, var(--warning));
  background: rgba(37, 99, 235, 0.06);
}
.defirate-pred-event .venue-pill.gemini {
  --venue-solid: var(--gemini);
  --progress-gradient: linear-gradient(90deg, #00dcfa, #67e8f9, #a78bfa, #f472b6);
  background: rgba(14, 165, 233, 0.05);
}
.defirate-pred-event .venue-pill.forecastex {
  --venue-solid: var(--forecastex);
  --progress-gradient: linear-gradient(90deg, var(--forecastex), #fdba74, #facc15, var(--warning));
  background: rgba(249, 115, 22, 0.05);
}
.defirate-pred-event .venue-pill.og {
  --venue-solid: var(--og);
  --progress-gradient: linear-gradient(90deg, var(--og), #475569, #94a3b8, #e2e8f0);
  background: rgba(31, 41, 55, 0.06);
}

.defirate-pred-event .venue-pill.high::before { background: var(--venue-solid, var(--primary)); }
.defirate-pred-event .venue-pill.high::after { display: none; }

.defirate-pred-event .venue-pill-header {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.375rem;
}

.defirate-pred-event .venue-pill-name {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-decoration: none;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.defirate-pred-event a.venue-pill-name {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.defirate-pred-event .venue-pill.kalshi .venue-pill-name { color: var(--kalshi-dark); }
.defirate-pred-event .venue-pill.polymarket .venue-pill-name { color: var(--polymarket-dark); }
.defirate-pred-event .venue-pill.polymarket_us .venue-pill-name { color: var(--polymarket-us-dark); }
.defirate-pred-event .venue-pill.gemini .venue-pill-name { color: var(--gemini-dark); }
.defirate-pred-event .venue-pill.forecastex .venue-pill-name { color: var(--forecastex-dark); }
.defirate-pred-event .venue-pill.og .venue-pill-name { color: var(--og-dark); }

.defirate-pred-event .venue-pill .venue-pct {
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1;
}
.defirate-pred-event .venue-pill.kalshi .venue-pct { color: var(--kalshi); }
.defirate-pred-event .venue-pill.polymarket .venue-pct { color: var(--polymarket); }
.defirate-pred-event .venue-pill.polymarket_us .venue-pct { color: var(--polymarket-us); }
.defirate-pred-event .venue-pill.gemini .venue-pct { color: var(--gemini); }
.defirate-pred-event .venue-pill.forecastex .venue-pct { color: var(--forecastex); }
.defirate-pred-event .venue-pill.og .venue-pct { color: var(--og); }

.defirate-pred-event .venue-pill-meta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--text-tertiary);
}

.defirate-pred-event .venue-range,
.defirate-pred-event .venue-vol {
  font-feature-settings: 'tnum' 1;
  white-space: nowrap;
}

.defirate-pred-event .venue-pill-hover { display: none; }
.defirate-pred-event a.venue-pill--trade {
  text-decoration: none;
  color: inherit;
}
.defirate-pred-event a.venue-pill--trade:focus-visible {
  outline: 2px solid var(--focus-outline);
  outline-offset: 2px;
}

/* Table layout tweaks for venue pills */
.defirate-pred-event table.defirate-table:not(.arb-table):not(.arb-diff-table) .venue-pill {
  padding: 0.75rem 0.875rem;
  text-align: center;
}
.defirate-pred-event table.defirate-table:not(.arb-table):not(.arb-diff-table) .venue-pill-name { display: none; }
.defirate-pred-event table.defirate-table:not(.arb-table):not(.arb-diff-table) .venue-pill-header {
  justify-content: center;
  margin-bottom: 0.25rem;
}
.defirate-pred-event table.defirate-table:not(.arb-table):not(.arb-diff-table) .venue-pill .venue-pct {
  font-size: 1.125rem;
}
.defirate-pred-event table.defirate-table:not(.arb-table):not(.arb-diff-table) .venue-pill-meta {
  justify-content: center;
  gap: 0.625rem;
  font-size: 0.6875rem;
}

/* ============================================================================
   Arbitrage Scanner
   ========================================================================== */
.defirate-pred-event .arb-section .muted {
  color: var(--text-secondary);
  opacity: 1;
}

.defirate-pred-event .arb-subtitle {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--primary);
  margin: 2rem 0 1.5rem 0;
}
.defirate-pred-event .arb-subtitle-spaced { margin-top: 3rem; }

.defirate-pred-event .arb-controls {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  margin-bottom: 1.5rem;
}
@media (min-width: 768px) {
  .defirate-pred-event .arb-controls {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}
.defirate-pred-event .arb-controls .slider-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
  min-width: 220px;
}
.defirate-pred-event .arb-controls .slider-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
}
.defirate-pred-event .arb-controls .slider-value {
  font-weight: 700;
  color: var(--primary);
}

.defirate-pred-event .arb-controls input[type="range"] {
  width: 100%;
  height: 6px;
  border-radius: 9999px;
  background: var(--border-light);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.defirate-pred-event .arb-controls input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--primary);
  cursor: pointer;
  border: 0;
}
.defirate-pred-event .arb-controls input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--primary);
  cursor: pointer;
  border: 0;
}

.defirate-pred-event .arb-controls .toggles {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.defirate-pred-event .arb-controls .toggle-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
}
.defirate-pred-event .arb-controls .toggle-label input {
  display: none;
}
.defirate-pred-event .arb-controls .toggle-label .switch {
  width: 44px;
  height: 24px;
  background: var(--border);
  border-radius: 9999px;
  position: relative;
  transition: background 0.2s;
}
.defirate-pred-event .arb-controls .toggle-label .switch::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  top: 3px;
  left: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
}
.defirate-pred-event .arb-controls .toggle-label input:checked + .switch {
  background: var(--primary);
}
.defirate-pred-event .arb-controls .toggle-label input:checked + .switch::after {
  transform: translateX(20px);
}

.defirate-pred-event .arb-section .pair {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
}
.defirate-pred-event .arb-section .pair .venue-name.kalshi { color: var(--kalshi); }
.defirate-pred-event .arb-section .pair .venue-name.polymarket { color: var(--polymarket); }
.defirate-pred-event .arb-section .pair .venue-name.polymarket_us { color: var(--polymarket-us); }
.defirate-pred-event .arb-section .pair .venue-name.gemini { color: var(--gemini); }
.defirate-pred-event .arb-section .arrow {
  color: var(--text-tertiary);
}

.defirate-pred-event .arb-section .leg {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  align-items: center;
}
.defirate-pred-event .arb-section .leg-label {
  font-size: 0.75rem;
  color: var(--text-tertiary);
  text-transform: uppercase;
}
.defirate-pred-event .arb-section .leg-odds {
  font-size: 0.9375rem;
  font-weight: 600;
}

.defirate-pred-event .arb-section .spread {
  font-size: 1.125rem;
  font-weight: 700;
  white-space: nowrap;
}
.defirate-pred-event .arb-section .spread.high { color: var(--success); }
.defirate-pred-event .arb-section .spread.medium { color: var(--warning); }
.defirate-pred-event .arb-section .spread.low { color: var(--text-secondary); }
.defirate-pred-event .arb-table tr.arb-row.actionable .spread { color: var(--success); }
.defirate-pred-event .arb-diff-table tr.arb-diff-row.actionable .spread { color: var(--success); }
.defirate-pred-event .arb-section .spread.spread-odds { color: var(--text-primary); }
.defirate-pred-event .arb-table tr.arb-row.actionable .spread.spread-odds,
.defirate-pred-event .arb-diff-table tr.arb-diff-row.actionable .spread.spread-odds { color: var(--text-primary); }

.defirate-pred-event .arb-section .actionable-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  justify-content: center;
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius-md);
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
}
.defirate-pred-event .arb-section .actionable-icon {
  flex: 0 0 auto;
}
.defirate-pred-event .arb-section .actionable-badge.yes .actionable-icon-no {
  display: none;
}
.defirate-pred-event .arb-section .actionable-badge.no .actionable-icon-yes {
  display: none;
}
.defirate-pred-event .arb-section .actionable-badge.yes {
  background: rgba(16, 185, 129, 0.12);
  color: var(--success);
  border: 1px solid rgba(16, 185, 129, 0.2);
}
.defirate-pred-event .arb-section .actionable-badge.no {
  background: var(--bg-tertiary);
  color: var(--text-tertiary);
  border: 1px solid transparent;
}
.defirate-pred-event .arb-diff-table .actionable-badge.no { color: var(--text-primary); }

.defirate-pred-event tr.arb-row.actionable,
.defirate-pred-event tr.arb-diff-row.actionable {
  background: rgba(16, 185, 129, 0.05);
}

.defirate-pred-event .arb-section .links {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
}
.defirate-pred-event .arb-section .link {
  display: inline-flex;
  align-items: center;
  flex-direction: row;
  flex-wrap: nowrap;
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s;
  white-space: nowrap;
  touch-action: manipulation;
}
.defirate-pred-event .arb-section .link:focus-visible {
  outline: 2px solid var(--focus-outline);
  outline-offset: 2px;
}
.defirate-pred-event .arb-section .link.kalshi {
  background: rgba(0, 212, 170, 0.1);
  color: var(--kalshi-dark);
  border: 1px solid rgba(0, 212, 170, 0.2);
}
.defirate-pred-event .arb-section .link.polymarket {
  background: rgba(124, 58, 237, 0.1);
  color: var(--polymarket-dark);
  border: 1px solid rgba(124, 58, 237, 0.2);
}
.defirate-pred-event .arb-section .link.polymarket_us {
  background: rgba(37, 99, 235, 0.1);
  color: var(--polymarket-us-dark);
  border: 1px solid rgba(37, 99, 235, 0.2);
}
.defirate-pred-event .arb-section .link.gemini {
  background: rgba(14, 165, 233, 0.1);
  color: var(--gemini-dark);
  border: 1px solid rgba(14, 165, 233, 0.2);
}

.defirate-pred-event .arb-assumptions {
  margin-top: 1.5rem;
  padding: 1rem;
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--primary);
}
.defirate-pred-event .arb-assumptions-toggle {
  display: flex;
  justify-content: space-between;
  cursor: pointer;
  font-size: 0.9375rem;
  font-weight: 600;
  background: transparent;
  border: 0;
  padding: 0;
  width: 100%;
  color: var(--text-primary);
  touch-action: manipulation;
}
.defirate-pred-event .arb-assumptions-toggle:focus-visible {
  outline: 2px solid var(--focus-outline);
  outline-offset: 2px;
}
.defirate-pred-event .arb-assumptions-toggle svg {
  transition: transform 0.2s ease;
}
.defirate-pred-event .arb-assumptions.open .arb-assumptions-toggle svg {
  transform: rotate(180deg);
}
.defirate-pred-event .arb-assumptions .assumptions-content {
  margin-top: 1rem;
  display: none;
}
.defirate-pred-event .arb-assumptions.open .assumptions-content {
  display: block;
}
.defirate-pred-event .arb-assumptions .assumptions-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .defirate-pred-event .arb-assumptions .assumptions-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .defirate-pred-event .arb-assumptions .assumptions-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.defirate-pred-event .arb-assumptions .assumption {
  display: flex;
  justify-content: space-between;
  font-size: 0.875rem;
}
.defirate-pred-event .arb-assumptions .assumption-label { color: var(--text-secondary); }
.defirate-pred-event .arb-assumptions .assumption-value { font-weight: 600; }
.defirate-pred-event .assumptions-note {
  margin-top: 1rem;
  font-size: 0.8125rem;
  color: var(--text-tertiary);
}

/* ============================================================================
   Methodology
   ========================================================================== */
.defirate-pred-event .method-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .defirate-pred-event .method-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.defirate-pred-event .method {
  padding: 1.25rem;
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--primary);
}

.defirate-pred-event .method-title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.defirate-pred-event .method-content {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.6;
}
.defirate-pred-event .method-content p + p {
  margin-top: 0.5rem;
}

/* ============================================================================
   Mobile Responsiveness + Touch Targets
   ========================================================================== */

@media (max-width: 768px) {
  .defirate-pred-event .controls-card { display: none; }

  /* Snapshot: cards on mobile, table on desktop */
  .defirate-pred-event .snapshot-mobile { display: block; }
  .defirate-pred-event .snapshot-table-wrapper { display: none; }

  /* Hero KPIs: reserve 2 label lines for alignment */
  .defirate-pred-event .hero .kpi-label {
    min-height: 2.4em;
    line-height: 1.2;
  }

  /* KPI share chips: same width, one line */
  .defirate-pred-event .hero .kpi-detail.kpi-share {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.125rem;
    width: 100%;
  }
  .defirate-pred-event .hero .kpi-detail.kpi-share .chip {
    justify-content: center;
    width: 100%;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Make horizontal table scrolling less painful on mobile */
  .defirate-pred-event table.defirate-table {
    min-width: 720px;
    border-collapse: separate;
    border-spacing: 0;
  }

  /* Snapshot controls: force search to next line */
  .defirate-pred-event .snapshot-controls {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }
  .defirate-pred-event .snapshot-controls .group { width: 100%; }
  .defirate-pred-event .snapshot-controls .search-input {
    width: 100%;
    min-width: 0;
  }
  .defirate-pred-event .snapshot-controls .search-group { width: 100%; }

  /* Compact table spacing on mobile */
  .defirate-pred-event .defirate-table th {
    padding: 0.625rem 0.75rem;
    font-size: 0.75rem;
    line-height: 1.15;
    vertical-align: middle;
  }
  .defirate-pred-event .defirate-table td { padding: 0.625rem 0.75rem; }

  /* Mobile shorthand for primary outcomes table headers */
  .defirate-pred-event table.defirate-table:not(.arb-table):not(.arb-diff-table) thead th:nth-child(2) {
    font-size: 0;
  }
  .defirate-pred-event table.defirate-table:not(.arb-table):not(.arb-diff-table) thead th:nth-child(2)::before {
    content: 'Agg';
    font-size: 0.75rem;
  }

  /* Mobile shorthand for sort button label */
  .defirate-pred-event .sort-btn[data-sort="agg"] {
    font-size: 0;
  }
  .defirate-pred-event .sort-btn[data-sort="agg"]::before {
    content: 'Agg';
    font-size: 0.875rem;
  }

  .defirate-pred-event .defirate-table th:first-child,
  .defirate-pred-event .defirate-table td:first-child {
    width: 190px;
    min-width: 190px;
    max-width: 190px;
  }

  .defirate-pred-event table.defirate-table:not(.arb-table):not(.arb-diff-table) th.venue-col,
  .defirate-pred-event table.defirate-table:not(.arb-table):not(.arb-diff-table) td.venue-col {
    width: 190px;
  }

  .defirate-pred-event .arb-diff-table th:nth-child(2),
  .defirate-pred-event .arb-diff-table td:nth-child(2) {
    width: 190px;
    min-width: 190px;
    max-width: 190px;
  }

  .defirate-pred-event .outcome { gap: 0.5rem; }
  .defirate-pred-event .outcome > div { overflow: hidden; }

  .defirate-pred-event .avatar { width: 2rem; height: 2rem; font-size: 0.875rem; }

  /* Outcome name: allow wrapping up to 2 lines */
  .defirate-pred-event .defirate-table .outcome .name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .defirate-pred-event .defirate-table .outcome .party { display: none; }

  .defirate-pred-event .prob { font-size: 1.125rem; margin-bottom: 0.125rem; }
  .defirate-pred-event .change { font-size: 0.75rem; margin-top: 0.125rem; }

  /* Compact percent-heavy cells (arb tables) */
  .defirate-pred-event .arb-table .leg-odds,
  .defirate-pred-event .arb-table .spread,
  .defirate-pred-event .arb-diff-table .leg-odds,
  .defirate-pred-event .arb-diff-table .spread {
    font-size: 0.9375rem;
    line-height: 1.15;
  }
  .defirate-pred-event .arb-table .leg-label {
    font-size: 0.6875rem;
    line-height: 1.15;
  }

  .defirate-pred-event .defirate-table thead { border-bottom: 0; }
  .defirate-pred-event .defirate-table thead th {
    border-bottom: 2px solid var(--border);
  }

  .defirate-pred-event .defirate-table tbody tr { border-bottom: 0; }
  .defirate-pred-event .defirate-table tbody td {
    border-bottom: 1px solid var(--border-light);
  }
  .defirate-pred-event .defirate-table tbody tr:last-child td {
    border-bottom: 0;
  }

  /* Sticky first column (Outcome) while scrolling horizontally */
  .defirate-pred-event .defirate-table th:first-child,
  .defirate-pred-event .defirate-table td:first-child {
    position: sticky;
    left: 0;
  }

  .defirate-pred-event .defirate-table th:first-child {
    z-index: 3;
    background: var(--bg-secondary);
  }

  .defirate-pred-event .defirate-table td:first-child {
    z-index: 2;
    background: var(--bg-primary);
  }

  .defirate-pred-event .defirate-table th:first-child::after,
  .defirate-pred-event .defirate-table td:first-child::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: -1px;
    width: 1px;
    background: var(--border);
  }
}

@media (max-width: 768px) {
  .defirate-pred-event .chart-settings {
    width: 100%;
  }

  .defirate-pred-event .chart-settings-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    touch-action: manipulation;
  }

  .defirate-pred-event .chart-settings-summary:focus-visible {
    outline: 2px solid var(--focus-outline);
    outline-offset: 2px;
  }

  .defirate-pred-event .chart-settings-summary-title {
    white-space: nowrap;
  }

  .defirate-pred-event .chart-settings-state {
    flex: 1;
    min-width: 0;
    text-align: right;
    color: var(--text-secondary);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .defirate-pred-event .chart-settings-caret {
    color: var(--text-secondary);
    flex: none;
    transition: transform 0.2s ease;
  }

  .defirate-pred-event .chart-settings[open] .chart-settings-caret {
    transform: rotate(180deg);
  }

  .defirate-pred-event .chart-settings-panel {
    margin-top: 0.75rem;
  }

  .defirate-pred-event .chart-settings-selects {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    margin-bottom: 0.75rem;
  }

  .defirate-pred-event .chart-select {
    width: 100%;
    min-width: 0;
    min-height: var(--tap-target);
    padding: 0.5rem 2rem 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 1rem; /* 16px prevents iOS auto-zoom */
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    appearance: none;
    background-image: url('data:image/svg+xml,<svg width="10" height="6" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1.5L6 6.5L11 1.5" stroke="%2364748b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
  }

  .defirate-pred-event .chart-select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: var(--focus-shadow);
  }
}

@media (min-width: 769px) {
  .defirate-pred-event details.chart-settings:not([open]) > .chart-settings-panel {
    display: block;
  }
}

@media (hover: none), (pointer: coarse) {
  .defirate-pred-event .graph-hover-subtitle { display: none; }
  .defirate-pred-event .graph-tap-subtitle { display: block; }

  .defirate-pred-event .venue-pill--trade { overflow: visible; }
  .defirate-pred-event .venue-pill--trade .venue-pill-hover {
    display: block;
    position: absolute;
    top: -0.35rem;
    right: -0.35rem;
    width: 1.5rem;
    height: 1.5rem;
    z-index: 1;
    pointer-events: none;
  }
  .defirate-pred-event .venue-pill--trade .venue-pill-hover-text { display: none; }
  .defirate-pred-event .venue-pill--trade .venue-pct {
    transform: translateX(-0.15rem);
  }
  .defirate-pred-event .venue-pill--trade .venue-pill-hover-icon {
    position: static;
    width: 100%;
    height: 100%;
    border-radius: 9999px;
    border: 2px solid var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background:
      radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0) 56%),
      var(--venue-solid, var(--primary));
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.26);
    transform: translateZ(0);
    transition: transform 0.16s ease;
  }
  .defirate-pred-event .venue-pill--trade .venue-pill-hover-icon svg {
    width: 0.8rem;
    height: 0.8rem;
    stroke-width: 2.4;
  }
  .defirate-pred-event .venue-pill--trade:active .venue-pill-hover-icon {
    transform: scale(0.96);
  }
}

@media (max-width: 640px) {
  /* Controls: avoid horizontal overflow on small screens */
  .defirate-pred-event .graph-header { align-items: flex-start; }
  .defirate-pred-event .graph-controls {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }

  .defirate-pred-event .toggle {
    width: 100%;
    max-width: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .defirate-pred-event .toggle-btn {
    width: 100%;
    padding: 0.5rem 0.625rem;
    min-width: 0;
  }

  /* Outcome dropdown: prefer full-width on small screens */
  .defirate-pred-event .outcome-group { width: 100%; flex-direction: column; align-items: stretch; }
  .defirate-pred-event .outcome-dropdown { min-width: 0; width: 100%; }

  .defirate-pred-event table.defirate-table:not(.arb-table):not(.arb-diff-table) th.venue-col,
  .defirate-pred-event table.defirate-table:not(.arb-table):not(.arb-diff-table) td.venue-col {
    width: 180px;
  }

  /* Venue pills: keep range + volume on one line */
  .defirate-pred-event .snapshot-venues-grid .venue-pill-meta {
    align-items: baseline;
  }
}

@media (max-width: 480px) {
  .defirate-pred-event .section { padding: 1rem; }
  .defirate-pred-event .table-wrapper { margin: 0 -1rem; padding: 0 1rem; }
  .defirate-pred-event table.defirate-table { min-width: 640px; }

  /* Further compact table spacing on very small screens */
  .defirate-pred-event .defirate-table th {
    padding: 0.5rem 0.625rem;
    font-size: 0.6875rem;
    line-height: 1.15;
  }
  .defirate-pred-event .defirate-table td { padding: 0.5rem 0.625rem; }

  .defirate-pred-event .defirate-table th:first-child,
  .defirate-pred-event .defirate-table td:first-child {
    width: 160px;
    min-width: 160px;
    max-width: 160px;
  }

  .defirate-pred-event table.defirate-table:not(.arb-table):not(.arb-diff-table) th.venue-col,
  .defirate-pred-event table.defirate-table:not(.arb-table):not(.arb-diff-table) td.venue-col {
    width: 160px;
  }
  .defirate-pred-event .arb-diff-table th:nth-child(2),
  .defirate-pred-event .arb-diff-table td:nth-child(2) {
    width: 160px;
    min-width: 160px;
    max-width: 160px;
  }
  .defirate-pred-event .outcome { gap: 0.5rem; }
  .defirate-pred-event .avatar { width: 1.75rem; height: 1.75rem; font-size: 0.75rem; }
  .defirate-pred-event .name { font-size: 0.875rem; }
  .defirate-pred-event .party { display: none; }
  .defirate-pred-event .prob { font-size: 1rem; }
  .defirate-pred-event .spread-value,
  .defirate-pred-event .volume-value { font-size: 0.875rem; }
  .defirate-pred-event .venue-pill { padding: 0.625rem 0.75rem; }
  .defirate-pred-event .venue-pill .venue-pct { font-size: 0.85rem; }
  .defirate-pred-event .snapshot-venues-grid { gap: 0.375rem; }
  .defirate-pred-event .snapshot-venues-grid .venue-pill { padding: 0.625rem 0.625rem; }
  .defirate-pred-event .snapshot-venues-grid .venue-pill-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.25rem;
  }
  .defirate-pred-event .snapshot-venues-grid .venue-pill-name { font-size: 0.75rem; }
  .defirate-pred-event .snapshot-venues-grid .venue-pill .venue-pct { font-size: 0.82rem; }
  .defirate-pred-event .venue-pill-meta { font-size: 0.6875rem; }

  .defirate-pred-event .arb-table .leg-odds,
  .defirate-pred-event .arb-table .spread,
  .defirate-pred-event .arb-diff-table .leg-odds,
  .defirate-pred-event .arb-diff-table .spread {
    font-size: 0.875rem;
  }
}

@media (pointer: coarse) {
  .defirate-pred-event .edit-event-btn,
  .defirate-pred-event .hero .cta,
  .defirate-pred-event .btn,
  .defirate-pred-event .toggle-btn,
  .defirate-pred-event .outcome-dropdown-btn,
  .defirate-pred-event .outcome-option,
  .defirate-pred-event .search-input,
  .defirate-pred-event .show-more-btn,
  .defirate-pred-event .arb-section .link,
  .defirate-pred-event .arb-assumptions-toggle {
    min-height: var(--tap-target);
  }

  .defirate-pred-event .edit-event-btn { padding: 0.625rem 0.875rem; }
  .defirate-pred-event .btn { padding: 0.625rem 1rem; }
  .defirate-pred-event .toggle-btn { padding: 0.625rem 0.875rem; }
  .defirate-pred-event .outcome-dropdown-btn { padding: 0.625rem 0.875rem; }
  .defirate-pred-event .outcome-option { padding: 0.75rem 0.875rem; }
  .defirate-pred-event .search-input { padding: 0.625rem 0.875rem; }
  .defirate-pred-event .show-more-btn { padding: 0.875rem 1.25rem; }
  .defirate-pred-event .arb-section .link { padding: 0.625rem 0.875rem; }
  .defirate-pred-event .arb-assumptions-toggle { padding: 0.5rem 0; }

  /* Reduce expensive effects on touch devices */
  .defirate-pred-event .live-indicator,
  .defirate-pred-event .kpi {
    backdrop-filter: none;
  }

  .defirate-pred-event .arb-controls .toggle-label {
    min-height: var(--tap-target);
    padding: 0.25rem 0;
  }

  /* Sliders: bigger thumbs for touch */
  .defirate-pred-event .arb-controls input[type="range"] { height: 8px; }
  .defirate-pred-event .arb-controls input[type="range"]::-webkit-slider-thumb { width: 28px; height: 28px; }
  .defirate-pred-event .arb-controls input[type="range"]::-moz-range-thumb { width: 28px; height: 28px; }
}

@media (hover: hover) and (pointer: fine) {
  .defirate-pred-event .edit-event-btn:hover {
    background: var(--bg-tertiary);
    transform: translateY(-1px);
  }

  .defirate-pred-event .hero .cta.kalshi:hover { box-shadow: 0 4px 12px rgba(0, 212, 170, 0.3); }
  .defirate-pred-event .hero .cta.polymarket:hover { box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3); }
  .defirate-pred-event .hero .cta.polymarket_us:hover { box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3); }
  .defirate-pred-event .hero .cta.gemini:hover { box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3); }
  .defirate-pred-event .hero .cta.og:hover { box-shadow: 0 4px 12px rgba(31, 41, 55, 0.35); }

  .defirate-pred-event .hero .kpi-jump-link:hover {
    text-decoration: underline;
    opacity: 1;
  }

  .defirate-pred-event .btn:not(.active):hover { border-color: var(--primary); color: var(--primary); }
  .defirate-pred-event .hero-odds-switcher-btn:not(.active):hover {
    color: var(--text-primary);
    background: var(--bg-secondary);
    border-color: rgba(148, 163, 184, 0.45);
  }
  .defirate-pred-event .toggle-btn:not(.active):hover { color: var(--text-primary); }
  .defirate-pred-event .outcome-dropdown-btn:hover { border-color: var(--primary); }
  .defirate-pred-event .outcome-option:hover { background: var(--bg-secondary); }

  .defirate-pred-event .defirate-table tbody tr:hover { background: var(--bg-secondary); }
  .defirate-pred-event .defirate-table tbody tr:hover td:first-child { background: var(--bg-secondary); }
  .defirate-pred-event .show-more-btn:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
  }

  .defirate-pred-event .arb-section .link.kalshi:hover {
    background: var(--kalshi);
    color: var(--text-primary);
  }
  .defirate-pred-event .arb-section .link.polymarket:hover {
    background: var(--polymarket);
    color: #fff;
  }
  .defirate-pred-event .arb-section .link.polymarket_us:hover {
    background: var(--polymarket-us);
    color: #fff;
  }
  .defirate-pred-event .arb-section .link.gemini:hover {
    background: var(--gemini);
    color: #fff;
  }
  .defirate-pred-event .venue-pill--trade {
    cursor: pointer;
  }
  .defirate-pred-event .venue-pill--trade .venue-pill-hover {
    display: flex;
    position: absolute;
    inset: 0;
    border-radius: inherit;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    /* More transparent overlay so the underlying % remains readable. */
    background: rgba(15, 23, 42, 0.48);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    opacity: 0;
    transition: opacity 0.18s ease;
    pointer-events: none;
    z-index: 1;
  }
  .defirate-pred-event .venue-pill--trade:hover .venue-pill-hover,
  .defirate-pred-event .venue-pill--trade:focus-visible .venue-pill-hover {
    opacity: 1;
  }
  .defirate-pred-event .venue-pill--trade .venue-pill-hover-icon {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 9999px;
    background: var(--venue-solid, var(--primary));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  }
  .defirate-pred-event .venue-pill--trade .venue-pill-hover-icon svg {
    width: 0.95rem;
    height: 0.95rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .defirate-pred-event .live-dot { animation: none; }

  .defirate-pred-event .edit-event-btn:hover,
  .defirate-pred-event .show-more-btn:hover {
    transform: none;
  }

  .defirate-pred-event .edit-event-btn,
  .defirate-pred-event .hero .cta,
  .defirate-pred-event .hero-odds-switcher-btn,
  .defirate-pred-event .kpi,
  .defirate-pred-event .btn,
  .defirate-pred-event .toggle-btn,
  .defirate-pred-event .defirate-table tbody tr,
  .defirate-pred-event .show-more-btn,
  .defirate-pred-event .arb-section .link,
  .defirate-pred-event .arb-assumptions-toggle svg {
    transition: none;
  }
}