/* ==========================================================================
   Madness Index — Official CSS 3.4 Revamp
   Single-source stylesheet (no legacy duplicates)
   Theme: Dark navy analytics + cyan/teal accents + role glows
   Notes:
   - Global mini tiles use 3D flip (Identity / Resume / Marks / MI Rating).
   - Core Traits tile uses NO 3D flip (front/back swap) so it can expand naturally.
   ========================================================================== */

/* ========== RESET / BASE ========== */

*,
*::before,
*::after { box-sizing: border-box; }

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

html {
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

body {
  min-height: 100dvh;
  overflow-x: hidden;
  overflow-y: visible;
  scrollbar-gutter: stable;
}

/* ========== DESIGN TOKENS (3.4) ========== */

:root {
  --mi-delta-size: 45px;  

  /* ====== TEAM BRAND FALLBACKS — PRIMARY / SECONDARY / TERTIARY ====== */
  --team-primary: #6b7280;
  --team-secondary: #6b7280;
  --team-tertiary: #6b7280;

  --team-primary-rgb: 107 114 128;
  --team-secondary-rgb: 107 114 128;
  --team-tertiary-rgb: 107 114 128;

  --team-secondary-ambient-rgb: 107 114 128;
  --team-tertiary-ambient-rgb: 107 114 128;

  --team-a-primary: #6b7280;
  --team-a-secondary: #6b7280;
  --team-a-tertiary: #6b7280;
  --team-b-primary: #6b7280;
  --team-b-secondary: #6b7280;
  --team-b-tertiary: #6b7280;

  --team-a-primary-rgb: 107 114 128;
  --team-a-secondary-rgb: 107 114 128;
  --team-a-tertiary-rgb: 107 114 128;
  --team-b-primary-rgb: 107 114 128;
  --team-b-secondary-rgb: 107 114 128;
  --team-b-tertiary-rgb: 107 114 128;

  --team-a-secondary-ambient-rgb: 107 114 128;
  --team-a-tertiary-ambient-rgb: 107 114 128;
  --team-b-secondary-ambient-rgb: 107 114 128;
  --team-b-tertiary-ambient-rgb: 107 114 128;

  --mi-brand-a: #6b7280;
  --mi-brand-b: #6b7280;
  --mi-brand-a-secondary: #6b7280;
  --mi-brand-b-secondary: #6b7280;
  --mi-brand-a-tertiary: #6b7280;
  --mi-brand-b-tertiary: #6b7280;

  --mi-brand-a-rgb: 107 114 128;
  --mi-brand-b-rgb: 107 114 128;
  --mi-brand-a-secondary-rgb: 107 114 128;
  --mi-brand-b-secondary-rgb: 107 114 128;
  --mi-brand-a-tertiary-rgb: 107 114 128;
  --mi-brand-b-tertiary-rgb: 107 114 128;

  --mi-brand-a-secondary-ambient-rgb: 107 114 128;
  --mi-brand-b-secondary-ambient-rgb: 107 114 128;
  --mi-brand-a-tertiary-ambient-rgb: 107 114 128;
  --mi-brand-b-tertiary-ambient-rgb: 107 114 128;

  --mi-winner-primary-rgb: 148 163 184;
  --mi-winner-secondary-rgb: 148 163 184;
  --mi-winner-tertiary-rgb: 148 163 184;
  --mi-winner-ambient-rgb: 148 163 184;
  --mi-winner-tertiary-ambient-rgb: 148 163 184;

  --mi-loser-primary-rgb: 107 114 128;
  --mi-loser-secondary-rgb: 107 114 128;
  --mi-loser-tertiary-rgb: 107 114 128;
  --mi-loser-ambient-rgb: 107 114 128;
  --mi-loser-tertiary-ambient-rgb: 107 114 128;
 
  /* ====== BRAND BLUE SYSTEM (UI atmosphere + structure only) ====== */
  --mi-brand-blue-500: #175FC3; /* canonical brand blue from MIX logo */

  /* Shade ladder (all from your sampled logo blues) */
  --mi-brand-blue-900: #052C73;
  --mi-brand-blue-800: #10459E;
  --mi-brand-blue-700: #124EAC;
  --mi-brand-blue-650: #1654B0;
  --mi-brand-blue-600: #175BC0;
  --mi-brand-blue-400: #1D64C7;

  /* Alpha helpers for glow/atmosphere */
  --mi-brand-blue-a04: rgba(23, 95, 195, 0.04);
  --mi-brand-blue-a08: rgba(23, 95, 195, 0.08);
  --mi-brand-blue-a12: rgba(23, 95, 195, 0.12);
  --mi-brand-blue-a18: rgba(23, 95, 195, 0.18);
  --mi-brand-blue-a28: rgba(23, 95, 195, 0.28);
  --mi-brand-blue-a45: rgba(23, 95, 195, 0.45);
  
  /* Core palette */
  --mi-color-bg-body:        #020817;
  --mi-color-bg-body-alt:    #111827;
  --mi-color-surface-soft:   rgba(15, 23, 42, 0.96);
  --mi-color-surface-card:   rgba(15, 23, 42, 0.98);
  --mi-color-surface-subtle: rgba(15, 23, 42, 0.85);

  /* Accents */
  --mi-accent-cyan:        var(--mi-brand-blue-500);
  --mi-accent-cyan-soft:   var(--mi-brand-blue-a18);
  --mi-accent-cyan-strong: var(--mi-brand-blue-a45);
  --mi-accent-gold:          #facc15;
  --mi-accent-orange:        #f97316;
  --mi-accent-green:         #22c55e;
  --mi-accent-red:           #ef4444;

  /* Neutrals / borders */
  --mi-border-subtle:      rgba(148, 163, 184, 0.35);
  --mi-border-strong:      var(--mi-brand-blue-a28);
  --mi-border-card:        var(--mi-brand-blue-a12);

  --mi-control-height: 44px;
  --mi-control-radius: 999px;
  --mi-control-padding-x: 18px;

  /* Text */
  --mi-text-primary:         #e5e7eb;
  --mi-text-muted:           #9ca3af;
  --mi-text-soft:            #94a3b8;
  --mi-text-faint:           #6b7280;
  --mi-text-invert-soft:     #e0f2fe;

  /* Role colors */
  --mi-role-cinderella:      #22c55e;
  --mi-role-cinderella-soft: rgba(34, 197, 94, 0.22);
  --mi-role-favorite:        #f97316;
  --mi-role-favorite-soft:   rgba(249, 115, 22, 0.22);
  --mi-role-cinderella-rgb: 34, 197, 94;
  --mi-role-favorite-rgb:   249, 115, 22;
  --mi-role-chalk-mirror: #3b82f6;
  --mi-role-chalk-mirror-soft: rgba(59, 130, 246, 0.22);
  --mi-role-chalk-mirror-rgb: 59, 130, 246;
  --mi-role-chaos-mirror: #ef4444;
  --mi-role-chaos-mirror-soft: rgba(239, 68, 68, 0.22);
  --mi-role-chaos-mirror-rgb:   239, 68, 68;
  --mi-role-neutral-mirror: #a855f7;
  --mi-role-neutral-mirror-soft: rgba(168, 85, 247, 0.22);
  --mi-role-neutral-mirror-rgb: 168, 85, 247;

  /* Radii */
  --mi-radius-lg:            22px;
  --mi-radius-card:          16px;
  --mi-radius-pill:          999px;
  --mi-radius-badge:         14px;

  /* Shadows */
  --mi-shadow-soft:          0 12px 40px rgba(15, 23, 42, 0.7);
  --mi-shadow-header:        0 18px 45px rgba(15, 23, 42, 0.9);
  --mi-shadow-card-inset:    0 0 0 1px rgba(15, 23, 42, 1) inset;

  /* Typography scale */
  --mi-font-sans:            system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", -system-ui, sans-serif;
  --mi-font-size-xs:         10px;
  --mi-font-size-sm:         11px;
  --mi-font-size-body:       13px;
  --mi-font-size-body-lg:    15px;
  --mi-font-size-h4:         15px;
  --mi-font-size-h3:         18px;
  --mi-font-size-h2:         22px;
  --mi-font-size-h1:         26px;

  /* Spacing */
  --mi-space-2:              0.25rem;
  --mi-space-3:              0.375rem;
  --mi-space-4:              0.5rem;
  --mi-space-5:              0.625rem;
  --mi-space-6:              0.75rem;
  --mi-space-8:              1rem;
  --mi-space-10:             1.25rem;

  /* Global scorecard scale */
  --mi-scale-scorecard:      0.95;

  /* Gradients */
  --mi-grad-hero:
    radial-gradient(circle at top, var(--mi-brand-blue-a18), transparent 55%),
    var(--mi-color-surface-soft);

  --mi-grad-card:
    radial-gradient(circle at top left, var(--mi-brand-blue-a08), var(--mi-color-surface-card));

  /* ===== Surface tiers (single studio contract) ===== */
  --mi-surface-panel: rgba(7, 10, 18, 0.92); /* section shells if needed */
  --mi-surface-card: rgba(15, 23, 42, 0.92);
  --mi-surface-1: rgba(7, 10, 18, 0.92); /* panels (mostly opaque) */
  --mi-surface-2: rgba(15, 23, 42, 0.92); /* cards (matte) */
  --mi-surface-3: rgba(15, 23, 42, 0.72); /* emphasis glass only */

  --mi-sheen: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00) 55%);

  /* ===== Edge system (consistent borders) ===== */
  --mi-line-weak: rgba(255,255,255,0.08);
  --mi-line:      rgba(255,255,255,0.12);
  --mi-line-strong: rgba(255,255,255,0.18);

  /* ===== Depth (cap stacking) ===== */
  --mi-depth-1: 0 10px 26px rgba(0,0,0,0.35);
  --mi-depth-2: 0 18px 44px rgba(0,0,0,0.45);
}

.mi-surface-card{
  background: var(--mi-sheen), var(--mi-surface-card);
  border: 1px solid var(--mi-line);
  box-shadow: var(--mi-depth-1);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* =========================================================
   GLOBAL BUTTON FOUNDATION (size normalization only)
   ========================================================= */

button,
.btn,
.mi-entry-button,
.mi-evidence-toggle,
.matchup-bar-edit,
.mi-log-more-btn,
.mi-glossary-handle,
.mi-glossary-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-family: inherit;
  font-size: 14px;
  line-height: 1;

  padding: 8px 16px;
  min-height: 38px;

  border-radius: var(--mi-radius-pill);

  box-sizing: border-box;
  white-space: nowrap;
}

/* ========== APP SHELL ========== */

.app-shell {
  max-width: 1320px;
  margin: 0 auto;
  padding: 20px 16px 32px;
}

/* ===== Utility: Hidden ===== */
.hidden {
  display: none !important;
}

.mi-glass{
  background: var(--mi-surface-3);
  border: 1px solid var(--mi-line-strong);
  box-shadow: var(--mi-depth-2);
  backdrop-filter: blur(12px) saturate(1.05);
  -webkit-backdrop-filter: blur(12px) saturate(1.05);
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", -system-ui, sans-serif;
  color: var(--mi-text-primary);
  -webkit-font-smoothing: antialiased;
}

/* ===== Studio base (Tier 0) ===== */
html, body {
  background: #000; /* ensures no edge cases on overscroll */
}

body{
  background: transparent !important;
  background-attachment: initial !important;
}

/* =========================================
   MI Halo — Next Action Highlight
   ========================================= */

.mi-halo{
  border: 1px solid rgba(56, 189, 248, 0.75);

  box-shadow:
    0 10px 22px rgba(0,0,0,0.45),
    0 0 0 1px var(--mi-brand-blue-a28) inset,
    0 0 0 2px var(--mi-brand-blue-a12);

  background:
    radial-gradient(
      140% 140% at 50% -25%,
      rgba(56, 189, 248, 0.14),
      transparent 65%
    ),
    var(--mi-grad-card);
}

/* ========== HERO / HEADER ========== */

.app-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 18px;
  font-family: var(--mi-font-sans);
}

.enhanced-header {
  position: relative;
  z-index: 1;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;

  padding: 28px 20px 26px;
  margin-bottom: 2px;

  border-radius: var(--mi-radius-lg);
  border: 1px solid var(--mi-border-subtle);
  background: var(--mi-grad-hero);
  box-shadow: var(--mi-shadow-header), var(--mi-shadow-card-inset);
}

/* =========================================================
   POST-MATCHUP: collapse the hero header tile (reduce redundancy)
   Uses existing app-shell state class: .has-matchup
   ========================================================= */

.enhanced-header{
  /* allow smooth collapse without layout jank */
  overflow: hidden;
  max-height: 320px; /* safely above its normal height */
  transition:
    max-height 420ms ease,
    opacity 220ms ease,
    transform 420ms ease,
    margin 420ms ease,
    padding 420ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease;
  transform-origin: top;
}

.app-shell.has-matchup .enhanced-header{
  max-height: 0;
  opacity: 0;
  transform: translateY(-8px);
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-color: transparent;
  box-shadow: none;
  pointer-events: none;
}

/* Pre-matchup: compact hero to prioritize setup cockpit */
.app-shell.pre-matchup .enhanced-header{
  padding: 6px 6px 6px;
  margin-bottom: 8px;
}

.app-shell.pre-matchup .hero-logo{
  max-height: 84px;
}

.app-shell.pre-matchup .hero-title{
  font-size: 28px; /* was visually reading large */
}

.app-shell.pre-matchup .hero-logo{
  max-height: 92px;
}

.app-shell.pre-matchup .hero-logo-wrap{
  margin-bottom: 1px;
}

.app-shell.pre-matchup .hero-subtitle{
  margin-top: 2px;
}

.hero-overline {
  font-size: var(--mi-font-size-sm);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.9);

  margin-bottom: 6px;
  padding: 3px 12px;

  border-radius: var(--mi-radius-pill);
  border: 1px solid var(--mi-border-subtle);
  background: radial-gradient(circle at top, var(--mi-color-surface-soft), var(--mi-color-surface-subtle));
}

.hero-logo-wrap {
  flex-shrink: 0;
}

.hero-logo {
  max-height: 110px;
  width: auto;
  border-radius: 18px;
  padding: 6px 8px;
  background: radial-gradient(circle at top, rgba(2, 6, 23, 0.96), rgba(15, 23, 42, 0.98));
  box-shadow: 0 0 24px rgba(15, 23, 42, 0.9), 0 0 0 1px rgba(15, 23, 42, 1) inset;
  transition: transform 0.3s ease;
}

.hero-logo:hover { transform: scale(1.04); }

.hero-title {
  position: relative;
  margin: 0;
  font-size: var(--mi-font-size-h1);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mi-text-primary);
  text-align: center;
}

.hero-subtitle {
  display: none;
}

.hero-sub-highlight {
  color: var(--mi-text-primary);
  font-weight: 500;
}

/* HERO TAGLINE — studio caption (small-caps + precise glow) */
.hero-tagline{
  position: relative;
  display: inline-block;
  margin-top: 1px;

  font-size: 28px;
  font-weight: 600;
  letter-spacing: 0.10em;

  /* key: NOT uppercase. use small-caps for that slick broadcast feel */
  font-variant-caps: all-small-caps;
  text-transform: none;

  color: rgba(226,232,240,0.92);

  /* “cooler ink”: crisp shadow + subtle cyan edge */
  text-shadow:
    0 2px 10px rgba(0,0,0,0.62),
    0 0 10px rgba(56,189,248,0.14);
}

.hero-tagline::after{
  content:"";
  position: absolute;
  left: 50%;
  bottom: -8px;
  transform: translateX(-50%);

  width: clamp(180px, 46vw, 420px);
  height: 2px;
  border-radius: 999px;

  /* “primary button” energy, but thin and classy */
  background: linear-gradient(
    90deg,
    rgba(56,189,248,0.00),
    rgba(56,189,248,0.85),
    rgba(34,197,94,0.65),
    rgba(34,197,94,0.00)
  );

  box-shadow:
    0 0 10px rgba(56,189,248,0.22),
    0 0 18px rgba(34,197,94,0.14);
  opacity: 0.95;
}

.hero-tagline::before{
  /* subtle “light plate” behind the line to make it feel embedded */
  content:"";
  position: absolute;
  left: 50%;
  bottom: -14px;
  transform: translateX(-50%);
  width: clamp(220px, 54vw, 520px);
  height: 18px;
  border-radius: 999px;

  background: radial-gradient(circle at center,
    rgba(56,189,248,0.14),
    rgba(2,6,23,0.00) 70%
  );
  filter: blur(0.2px);
  opacity: 0.9;
  pointer-events: none;
}

.pulse-bars {
  display: flex;
  gap: 4px;
  margin-top: 10px;
}

.pulse-bar {
  width: 6px;
  height: 18px;
  background: var(--mi-accent-cyan);
  border-radius: 4px;
  animation: pulseBarAnim 1s ease-in-out infinite;
}

.pulse-bar:nth-child(2) { animation-delay: 0.2s; }
.pulse-bar:nth-child(3) { animation-delay: 0.4s; }

@keyframes pulseBarAnim {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(1.8); }
}

.hero-text-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  animation: heroTextIn 0.9s ease-out forwards;
  opacity: 0;
  transform: translateY(8px);
}

@keyframes heroTextIn {
  0%   { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0); }
}

.version-badge {
  margin-top: 2px;
  font-size: 13px;
  padding: 4px 12px;
  border-radius: var(--mi-radius-pill);
  background: radial-gradient(circle at top, var(--mi-color-surface-soft), var(--mi-color-surface-subtle));
  color: var(--mi-text-invert-soft);
  border: 1px solid var(--mi-border-strong);
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

.enhanced-header .version-badge{
  position: absolute;
  top: 18px;
  left: 18px;

  padding: 4px 10px;
  font-size: 12px;
  letter-spacing: 0.08em;

  border-radius: 999px;

  /* Token-aligned “quiet studio” pill */
  background: rgba(15, 23, 42, 0.55);                 /* if you want: swap to var(--mi-color-surface-subtle) */
  border: 1px solid var(--mi-border-strong);
  color: var(--mi-text-invert-soft);

  pointer-events: none;
}

/* ========== PRE-MATCHUP HUB ========== */

/* Status bar lives between hero and tiles */
.pre-header-status{
  margin: 10px 0 12px; /* pulls it into the hero/tile gap */
}

/* Hide it once matchup is active (since hub hides then anyway) */
.app-shell.has-matchup #preHubStatusWrap { display: none; }

.pre-matchup-hub {
  margin-top: 12px;
  padding: 18px 18px;
  border-radius: var(--mi-radius-lg);
  border: 1px solid var(--mi-border-subtle);
  background:
    radial-gradient(circle at top,
      var(--mi-brand-blue-a08),
      rgba(2, 6, 23, 0.92)
    );
}

.pre-hub-inner {
  display: grid;
  gap: 10px;
}

.pre-hub-title {
  font-size: var(--mi-font-size-h3);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}

.pre-hub-sub {
  color: rgba(148, 163, 184, 0.95);
  font-size: var(--mi-font-size-body-lg);
  line-height: 1.35;
}

.pre-hub-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 6px;
}

.pre-step {
  display: flex;
  grid-template-columns: 28px minmax(0, 1fr);
  grid-template-rows: auto auto;
  grid-template-areas:
    "num status"
    "text text";
  gap: 14px;
  align-items: center;
  padding: 14px 14px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: rgba(15, 23, 42, 0.55);
}

.pre-step-num{
  width: 28px;
  height: 28px;
  grid-area: num;
  border-radius: 999px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0;
  line-height: 1;          /* key: fixes vertical font-metric drift */
  text-align: center;

  font-weight: 800;
  background: var(--mi-brand-blue-a12);
  border: 1px;
  border-color: var(--mi-brand-blue-a28);
}

.pre-step-text {
  color: rgba(226, 232, 240, 0.92);
  line-height: 1.3;
  min-width: 0;
  line-height: 1.25;
  grid-area: text;
  margin-top: 2px;
  max-width: 38ch;
  font-size: 15px;
  font-weight: 500;
}

.pre-step-text br {
  display: none;
}

.pre-hub-note {
  margin-top: 2px;
  color: rgba(148, 163, 184, 0.9);
  font-size: var(--mi-font-size-body);
}

/* Briefing block (pre-matchup) */
.pre-hub-briefing {
  margin-top: 4px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: rgba(2, 6, 23, 0.55);
}

.pre-briefing-kicker {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.9);
  margin-bottom: 6px;
}

.pre-briefing-title {
  font-size: 14px;
  font-weight: 700;
  color: rgba(226, 232, 240, 0.96);
  margin-bottom: 8px;
}

.pre-briefing-body {
  display: grid;
  gap: 8px;
}

.pre-briefing-line {
  margin: 0;
  color: rgba(226, 232, 240, 0.88);
  line-height: 1.35;
  font-size: 12.5px;
}

.pre-step-status{
  grid-area: status;
  justify-self: end;
  align-self: start;

  /* kill the old absolute positioning */
  position: static;
  transform: none;

  padding: 4px 10px;
  border-radius: var(--mi-radius-pill);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;

  /* allow long statuses to wrap nicely if needed */
  max-width: 100%;
  white-space: normal;
  text-align: right;
  line-height: 1.15;
}

/* step states */
.pre-step.is-done .pre-step-status{
  color: #86efac;
  border-color: rgba(22, 163, 74, 0.65);
  background: rgba(22, 163, 74, 0.12);
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.12);
}

.pre-step.is-next{
  border-color: rgba(56, 189, 248, 0.55);
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.10) inset;
}
.pre-step.is-next .pre-step-status{
  color: var(--mi-accent-cyan);
  border-color: rgba(56, 189, 248, 0.55);
  background: rgba(56, 189, 248, 0.10);
}

.pre-step.is-locked{
  opacity: 0.75;
}

/* Pre-matchup: optional details toggle */
.pre-hub-more{
  justify-self: start;
  margin-top: 4px;
  padding: 6px 10px;
  border-radius: var(--mi-radius-pill);
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(2, 6, 23, 0.35);
  color: rgba(226, 232, 240, 0.92);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
}

.pre-hub-more:hover{
  border-color: rgba(56, 189, 248, 0.35);
  background: rgba(56, 189, 248, 0.08);
}

/* Pre-matchup status line */
.pre-hub-status {
  display: flex;
  align-items: center;
  gap: 12px;

  margin: 10px 0 12px;
  padding: 10px 14px;

  border-radius: 12px;

  background: rgba(2, 6, 23, 0.68);
  border: 1px solid rgba(56, 189, 248, 0.28);

  box-shadow:
    0 0 0 1px rgba(56, 189, 248, 0.14),
    0 10px 26px rgba(0, 0, 0, 0.35);
}

.pre-status-label {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.8);
}

.pre-status-text {
  font-size: 14px;
  color: rgba(241, 245, 249, 0.92);
}

/* Pre-matchup status: hide the changing instruction text */
#preStatusText { display: none !important; }

.pre-status-bar{
  position: relative;
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.16);
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(2, 6, 23, 0.55) inset;
}

.pre-status-fill{
  position: absolute;
  inset: 0;
  width: 0%;
  border-radius: 999px;
  background:
    linear-gradient(90deg,
      rgba(34, 211, 238, 0.95),
      rgba(56, 189, 248, 0.95),
      rgba(20, 184, 166, 0.95)
    );
  box-shadow:
    0 0 18px rgba(56, 189, 248, 0.22),
    0 0 0 1px rgba(56, 189, 248, 0.35) inset;
  transition: width 360ms cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* Progress-based moods (set on .pre-hub-status via JS) */
.pre-hub-status.is-idle  .pre-status-fill{ width: 0%; }
.pre-hub-status.is-25    .pre-status-fill{ width: 25%; }
.pre-hub-status.is-50    .pre-status-fill{ width: 50%; }
.pre-hub-status.is-75    .pre-status-fill{ width: 75%; }
.pre-hub-status.is-100   .pre-status-fill{ width: 100%; }

.pre-hub-status.is-100{
  border-color: rgba(34, 197, 94, 0.35);
  background: rgba(15, 23, 42, 0.68);
}

/* ================================
   PROGRESS BAR — 100% "complete" animation
   ================================ */

.pre-hub-status.is-100 .pre-status-fill{
  /* subtle green lift ONLY at 100% */
  background:
    linear-gradient(90deg,
      rgba(34, 211, 238, 0.95),
      rgba(56, 189, 248, 0.95),
      rgba(34, 197, 94, 0.92)
    );

  animation: miProgressPulse 1.35s ease-in-out infinite;
  will-change: filter, box-shadow;
  filter: saturate(1.15);
}

/* moving sheen highlight */
.pre-hub-status.is-100 .pre-status-fill::after{
  content: "";
  position: absolute;
  inset: -2px;
  width: 35%;
  left: -40%;
  border-radius: inherit;

  background: linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.22) 50%,
    rgba(255,255,255,0) 100%
  );

  filter: blur(0.4px);
  opacity: 0.85;
  animation: miProgressSheen 1.6s linear infinite;
  pointer-events: none;
}

@keyframes miProgressPulse{
  0%, 100%{
    filter: brightness(1.02) saturate(1.05);
    box-shadow:
      /* base cyan presence */
      0 0 16px rgba(56, 189, 248, 0.18),

      /* green aura (subtle at rest) */
      0 0 22px rgba(34, 197, 94, 0.25),

      /* inner edge */
      0 0 0 1px rgba(56, 189, 248, 0.35) inset;
  }

  50%{
    filter: brightness(1.28) saturate(1.35);
    box-shadow:
      /* cyan core */
      0 0 18px rgba(56, 189, 248, 0.25),

      /* PRIMARY green glow — this is what you were missing */
      0 0 34px rgba(34, 197, 94, 0.55),
      0 0 58px rgba(34, 197, 94, 0.35),

      /* inner green edge */
      0 0 0 1px rgba(34, 197, 94, 0.55) inset;
  }
}

@keyframes miProgressSheen{
  0%   { transform: translateX(0); }
  100% { transform: translateX(420%); }
}

.pre-step.is-hidden{
  display: none;
}

/* When only one step is showing, keep it looking intentional */
.pre-hub-steps.is-single{
  grid-template-columns: 1fr;
}

/* Slightly tighten when in single mode */
.pre-hub-steps.is-single .pre-step{
  padding: 12px 14px;
}

/* Show preview only before matchup */
.app-shell.has-matchup #preMatchupPreview { display: none; }

/* Show hub only before matchup */
.app-shell.has-matchup #preMatchupHub { display: none; }

/* Optional: tighten spacing when hub is visible */
.app-shell:not(.has-matchup) .top-bar { margin-bottom: 10px; }

/* Compact hero when matchup active */
/* CURRENTLY COMMENTED OUT
.app-shell.has-matchup .enhanced-header {
  padding-top: 28px;
  padding-bottom: 24px;
  margin-bottom: 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  column-gap: 20px;
  align-items: center;
  text-align: center;
  border-radius: var(--mi-radius-card);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.8), var(--mi-shadow-card-inset);
}

.app-shell.has-matchup .hero-logo-wrap {
  grid-column: 1;
  justify-self: end;
  margin-bottom: 0;
}

.app-shell.has-matchup .hero-text-wrap {
  grid-column: 2;
  width: 100%;
  align-items: center;
}

.app-shell.has-matchup .hero-tagline,
.app-shell.has-matchup .hero-subtitle { display: none; }

.app-shell.has-matchup .hero-overline { margin-bottom: 4px; font-size: 10px; }
.app-shell.has-matchup .hero-title    { font-size: 20px; }
*/

/* Optional HUD (if present in HTML) */
.hero-matchup-hud {
  display: none;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--mi-border-subtle);
  gap: 40px;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  text-align: center;
}

.app-shell.has-matchup .hero-matchup-hud {
  display: flex;
  flex-wrap: wrap;
}

.hero-hud-label {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 10px;
  color: rgba(148, 163, 184, 0.9);
}

.hero-hud-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border-radius: var(--mi-radius-pill);
  border: 1px solid rgba(56, 189, 248, 0.7);
  font-size: 11px;
  color: var(--mi-text-invert-soft);
}

.hero-hud-pill-fav {
  border-color: rgba(248, 250, 252, 0.65);
  color: #f9fafb;
}

/* ===== Tier 2: card baseline ===== */
.card{
  background: var(--mi-sheen), var(--mi-surface-card);
  border: 1px solid var(--mi-line);
  box-shadow: var(--mi-depth-1);

  /* critical: stop background sampling drift */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Flip container shouldn’t add its own lighting */
.flip-inner{
  background: transparent;
  box-shadow: none;
}

/* Card faces: transparent by default so the parent .card owns the surface */

.card-face{
  position: absolute;
  inset: 0;
  backface-visibility: hidden;

  background: var(--mi-sheen), var(--mi-surface-card);
  border: 1px solid var(--mi-line);
  box-shadow: var(--mi-depth-1);

  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.card-face.card-front{
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.card-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--mi-text-primary);
  margin: 0 0 6px;
}

/* Make the setup card titles match the STEP label typography */
#datasetCard .card-title,
#matchupSetupCard .card-title{
  font-family: inherit;           /* stays in your global stack */
  font-size: var(--mi-font-size-h3);
  font-weight: 800;               /* match computed */
  letter-spacing: 0.08em;
  text-transform: uppercase;      /* match computed */
  text-align: center;               /* keep your card title alignment */
  margin: 0 0 6px;                /* preserve spacing */
}

.helper-text {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--mi-text-muted);
  line-height: 1.5;
}

/* =========================================================
   Pre-CSV gating (soft lock)
   Everything is visible, but only CSV is interactive until loaded
========================================================= */

.app-shell:not(.csv-loaded) #preSetupRow .controls-card:not(.is-primary-entry) {
  opacity: 0.45;
  filter: saturate(0.85);
  pointer-events: none;
}

/* Optional: make the primary entry feel "active" */
.app-shell:not(.csv-loaded) .controls-card.is-primary-entry {
  transform: none;
}

/* ========== TOP CONTROLS LAYOUT ========== */

/* CSV spec reveal button */
.csv-spec-btn{
  margin-top: 6px;
  padding: 6px 10px;
  border-radius: var(--mi-radius-pill);
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(2, 6, 23, 0.35);
  color: rgba(226, 232, 240, 0.92);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.02em;
  cursor: pointer;
}

.csv-spec-btn:hover{
  border-color: rgba(56, 189, 248, 0.35);
  background: rgba(56, 189, 248, 0.08);
}

.top-bar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
  align-items: stretch;

  transition: max-height 220ms ease-out, opacity 220ms ease-out, margin-bottom 220ms ease-out, transform 220ms ease-out;
  max-height: 1200px;
}

.top-bar.collapsed {
  max-height: 0;
  opacity: 0;
  margin-bottom: 0;
  transform: translateY(-8px);
  overflow: hidden;
  pointer-events: none;
}

.controls-card { position: relative; overflow: visible; }

/* ===== Primary Entry Card (CSV Upload) ===== */
.controls-card.is-primary-entry {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  min-height: 200px;
  padding: 20px;
  box-sizing: border-box;
  text-align: center;
  border: 1px solid rgba(56, 189, 248, 0.45);
  box-shadow:
    0 0 0 1px rgba(56, 189, 248, 0.25),
    0 18px 45px rgba(0, 0, 0, 0.45);
  background:
    radial-gradient(
      120% 120% at 50% -20%,
      rgba(56, 189, 248, 0.08),
      transparent 60%
    ),
    var(--mi-grad-card);
}

/* ===== Dataset Selector (Primary Entry) ===== */
.controls-card.is-primary-entry .dataset-row{
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;  /* equal width */
  gap: 12px;
  align-items: end;
  margin: 8px 0 12px;
}

.controls-card.is-primary-entry .dataset-select-wrap{
  min-width: 0;
  max-width: none;
  width: 100%;
}

.controls-card.is-primary-entry .dataset-select-wrap select{
  width: 100%;
  height: 44px;            /* match button */
  padding: 10px 12px;
  border-radius: 12px;
}

/* Quiet fallback upload (still available, not the headline) */
.controls-card.is-primary-entry .file-label.file-label--manual{
  width: 100%;
  height: 44px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 12px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
}

.controls-card.is-primary-entry .file-label.file-label--manual::before{
  display: none;
}

/* Controls */
.control-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
}

/* Make the whole step stack breathe */
.matchup-steps{
  display: flex;
  flex-direction: column;
  gap: 14px;            /* space between STEP 1 / 2 / 3 */
}

.matchup-step{
  padding-top: 2px;
}

/* Space under the STEP headers */
.round-step-label{
  margin-bottom: 6px;
  margin-top: 6px;
  text-align: center;
}

/* Space between form rows */
.matchup-step .control-row{
  gap: 12px;            /* Team A / Team B spacing */
  margin-bottom: 10px;
}

.round-control-row{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}

.matchup-actions-row{
  margin-top: 12px;
  gap: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mc-row { 
  padding-top: 2px; 
}

/* And in the 3-col cockpit, apply the “connected rows” look */
.pre-setup-row .matchup-controls{
  gap: 0;
  border-color: rgba(148, 163, 184, 0.16); /* subtle */
  border-radius: 14px;
  overflow: visible;
  background: rgba(15, 23, 42, 0.35);
}

.has-matchup .pre-setup-row .matchup-controls{
  overflow: visible;
}

.pre-setup-row .mc-row{
  padding: 14px 14px;
}

.pre-setup-row .mc-row + .mc-row{
  border-top: 1px solid rgba(148, 163, 184, 0.14);
}

/* ===========================
   CSV Primary Controls — Premium CTA
   (Option A: obvious + polished)
   =========================== */

/* CSV card header row */
.controls-card.is-primary-entry .controls-card-head{
  width: 100%;
  display: block;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

/* Remove the default title bottom margin when it's inside the head row */
.controls-card.is-primary-entry .controls-card-head .card-title{
  margin: 0;
}

/* Header variant: tighter, sits cleanly on the right */
.csv-spec-btn.csv-spec-btn--head{
  margin-top: 0;                 /* overrides existing margin-top */
  padding: 6px 10px;
  white-space: nowrap;
}

.controls-card.is-primary-entry .status:empty{
  display: none;
}

.controls-card.is-primary-entry .status:not(:has(:not(:empty))){
  display: none;
}

.controls-card.is-primary-entry .status::before{
  opacity: 0;
}

.app-shell.csv-loaded .controls-card.is-primary-entry .status::before{
  opacity: 1;
}

/* Stronger CSV status line */
.controls-card.is-primary-entry .status{
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 6px 10px;
  border-radius: 999px;

  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.01em;

  color: rgba(226, 232, 240, 0.96);
  background: rgba(15, 23, 42, 0.55);
  border-color: rgba(148, 163, 184, 0.20); /* strong, but not a different material */
  box-shadow: 0 10px 18px rgba(0,0,0,0.35);
}

/* When CSV is loaded, make it feel “armed” (relies on your existing .csv-loaded shell class) */
.app-shell.csv-loaded .controls-card.is-primary-entry .status{
  border-color: rgba(34, 197, 94, 0.55);
  background: rgba(34, 197, 94, 0.10);
  box-shadow: 0 10px 18px rgba(0,0,0,0.35), 0 0 12px rgba(34, 197, 94, 0.10);
}

/* Optional: add a leading status dot without touching JS */
.controls-card.is-primary-entry .status::before{
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 99px;
  background: rgba(148, 163, 184, 0.8);
}

.app-shell.csv-loaded .controls-card.is-primary-entry .status::before{
  background: rgba(34, 197, 94, 0.95);
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.25);
}

/* ============================= */
/*   Advanced Upload Button UI   */
/* ============================= */

.controls-card.is-primary-entry .file-label{
  --btn-bg: rgba(12, 18, 36, 0.85);

  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  padding: 8px;
  height: 100%;
  min-height: 180px;
  gap: 5px;

  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.015em;
  color: rgba(230, 236, 243, 0.98);

  background:
    radial-gradient(120% 140% at 50% -20%,
      var(--mi-brand-blue-a08),
      transparent 62%
    ),
    var(--btn-bg);

  border: 1px solid var(--mi-brand-blue-a28);
  border-radius: 14px;

  /* critical: remove glass sampling drift */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;

  box-sizing: border-box;
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.40),
    0 0 0 1px rgba(255,255,255,0.06) inset;

  cursor: pointer;
  user-select: none;
  overflow: hidden;

  transition:
    transform 180ms ease-in-out,
    box-shadow 180ms ease,
    border-color 180ms ease,
    background 180ms ease;
}

/* Subtle highlight pulse */
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Hover interactions */
.controls-card.is-primary-entry .file-label:hover {
  transform: translateY(-3px) scale(1.02);
  border-color: var(--border-glow);
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.5),
    0 0 12px var(--border-glow),
    0 0 2px rgba(56, 189, 248, 0.25) inset;
  background: rgba(10, 15, 32, 0.90);
}

/* Press feedback */
.controls-card.is-primary-entry .file-label:active {
  transform: scale(0.98);
  box-shadow:
    0 6px 14px rgba(0, 0, 0, 0.35),
    0 0 8px rgba(56, 189, 248, 0.4);
}

.controls-card.is-primary-entry .file-label:focus-within{
  border-color: var(--mi-brand-blue-a45);
  box-shadow:
    0 0 0 3px var(--mi-brand-blue-a18),
    0 12px 25px rgba(0, 0, 0, 0.40);
}

/* Secondary button: make it look intentionally “optional,” but still premium */
.controls-card.is-primary-entry .csv-spec-btn{
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 999px;

  border: 1px solid rgba(148,163,184,0.22);
  background:
    linear-gradient(180deg, rgba(2,6,23,0.40), rgba(2,6,23,0.22));

  color: rgba(226,232,240,0.86);
  font-size: 12px;
  font-weight: 650;

  transition:
    transform 160ms ease,
    border-color 160ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}

.controls-card.is-primary-entry .csv-spec-btn:hover{
  transform: translateY(-1px);
  border-color: var(--mi-brand-blue-a28);
  background:
    linear-gradient(180deg, var(--mi-brand-blue-a08), rgba(2,6,23,0.22));
  box-shadow: 0 10px 22px rgba(0,0,0,0.40);
}

.controls-card.is-primary-entry .csv-spec-btn:active{
  transform: translateY(0);
}

.file-label {
  display: inline-flex;
  text-align: center;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px dashed var(--mi-brand-blue-a12, 0.22);
  cursor: pointer;
  font-size: 12px;
  color: #cbd5f5;
  background: rgba(15, 23, 42, 0.96);
}
.file-label input[type="file"] { display: none; }

.btn {
  border: none;
  outline: none;
  border-radius: var(--mi-radius-pill);
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.18s ease;
  white-space: nowrap;
}

.btn.primary {
  background: linear-gradient(to right, var(--mi-accent-cyan), var(--mi-accent-green));
  color: var(--mi-color-bg-body);
  box-shadow: 0 6px 18px rgba(56, 189, 248, 0.35);
}
.btn.primary:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(56, 189, 248, 0.45); }

.btn.secondary {
  background: rgba(15, 23, 42, 1);
  color: #c4d3ff;
  border: 1px solid var(--mi-brand-blue-a12, 0.22)
}
.btn.secondary:hover { background: rgba(17, 24, 39, 1); box-shadow: 0 4px 14px rgba(15, 23, 42, 0.9); }

.btn.ghost {
  background: transparent;
  color: var(--mi-text-muted);
  border: 1px solid rgba(75, 85, 99, 0.9);
}
.btn.ghost:hover { background: rgba(15, 23, 42, 0.98); color: var(--mi-text-primary); }

.btn.subtle {
  background: transparent;
  color: var(--mi-text-faint);
  border: 1px solid rgba(55, 65, 81, 0.9);
}
.btn.subtle:hover { background: rgba(15, 23, 42, 0.98); color: var(--mi-text-muted); }

.sandbox-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  color: var(--mi-text-muted);
  padding: 2px 8px;
  border-radius: var(--mi-radius-pill);
  background: rgba(15, 23, 42, 0.95);
  border: 1px dashed rgba(75, 85, 99, 0.9);
}
.sandbox-toggle input[type="checkbox"] {
  width: 11px;
  height: 11px;
  accent-color: var(--mi-accent-cyan);
}

/* Selects */
.select-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 0;
}
.select-wrap label { font-size: 12px; color: var(--mi-text-muted); }

select {
  width: 100%;
  border: 1px solid rgba(75, 85, 99, 0.9);
  background: rgba(9, 12, 23, 0.98);
  color: var(--mi-text-primary);
  font-size: 12px;
  outline: none;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--mi-accent-cyan) 50%),
    linear-gradient(135deg, var(--mi-accent-cyan) 50%, transparent 50%);
  background-position: calc(100% - 13px) 9px, calc(100% - 8px) 9px;
  background-size: 4px 4px;
  background-repeat: no-repeat;
  height: var(--mi-control-height);
  border-radius: var(--mi-control-radius);
  padding: 0 var(--mi-control-padding-x);
}

select:focus {
  border-color: var(--mi-accent-cyan);
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.35);
}

/* =========================================================
   Round dropdown — match Team dropdown panel styling
   ========================================================= */

/* Panel shell (match .mi-team-dd-panel) */
#roundDropdown.round-dropdown{
  position: absolute;
  z-index: 9999;
  top: calc(100% + 8px);
  left: 0;

  width: 2px;

  border-radius: 14px;
  overflow: hidden;

  background: linear-gradient(180deg, rgba(15,23,42,0.98), rgba(2,6,23,0.98));
  border: 1px solid rgba(56,189,248,0.26);
  box-shadow:
    0 22px 60px rgba(0,0,0,0.68),
    0 0 0 1px rgba(255,255,255,0.05) inset,
    0 0 26px rgba(56,189,248,0.10);

  max-height: 260px;
  overflow-y: auto;
  overflow-x: hidden;

  /* mimic the "list area" pad + subtle inner tint */
  padding: 8px;
  background-clip: padding-box;
}

/* Options (match .mi-team-dd-item feel) */
#roundDropdown.round-dropdown .round-option{
  position: relative;
  padding: 9px 10px;
  border-radius: 10px;

  font-size: 12px;
  color: rgba(226,232,240,0.92);
  cursor: pointer;
  white-space: nowrap;

  transition: background-color 140ms ease, transform 140ms ease;
}

/* Separator rule like the team list */
#roundDropdown.round-dropdown .round-option::after{
  content:"";
  position:absolute;
  left: 10px;
  right: 10px;
  bottom: -3px;
  height: 1px;
  background: rgba(148,163,184,0.10);
  pointer-events:none;
}

#roundDropdown.round-dropdown .round-option:hover{
  background: rgba(56,189,248,0.16);
  transform: translateY(-0.5px);
}

/* Scrollbar (match .mi-team-dd-list) */
#roundDropdown.round-dropdown{
  scrollbar-width: thin;
  scrollbar-color: rgba(148,163,184,0.42) rgba(2,6,23,0.20);
}

#roundDropdown.round-dropdown::-webkit-scrollbar{ width: 10px; }
#roundDropdown.round-dropdown::-webkit-scrollbar-track{
  background: rgba(2,6,23,0.20);
  border-radius: 999px;
}
#roundDropdown.round-dropdown::-webkit-scrollbar-thumb{
  background: rgba(148,163,184,0.42);
  border-radius: 999px;
  border: 2px solid rgba(2,6,23,0.35);
}
#roundDropdown.round-dropdown::-webkit-scrollbar-thumb:hover{
  background: rgba(56,189,248,0.34);
}

/* ===== Round selector nudge (post-team selection) ===== */
.round-selector-wrap.is-nudged::after{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius: 16px;
  border: 1px solid var(--mi-accent-cyan);
  border-width: 2px;
  opacity: 0;
  pointer-events: none;
  animation: mi-round-nudge 1600ms ease-in-out 0s 3;
}

.round-selector-wrap.is-nudged .round-btn{
  border-color: var(--mi-accent-cyan);
  box-shadow:
    0 0 0 1px rgba(56,189,248,0.35),
    0 10px 26px rgba(0,0,0,0.45);
  animation: mi-round-btn-pulse 1600ms ease-in-out 0s 3;
}

@keyframes mi-round-btn-pulse{
  0%   { transform: translateY(0);   filter: brightness(1); }
  35%  { transform: translateY(-1px);filter: brightness(1.15); }
  70%  { transform: translateY(0);   filter: brightness(1.05); }
  100% { transform: translateY(0);   filter: brightness(1); }
}

/* Compare state helpers */
.compare-btn-disabled { opacity: 0.45; cursor: not-allowed; }
.compare-btn-enabled  { opacity: 1; cursor: pointer; }

/* Hide legacy "2. Select Matchup" title (if you apply this class in HTML) */
.matchup-title-hidden { display: none; }

/* =========================================================
   MATCHUP BAR — v3.7 CLEAN RESET (REST + QUICK EDIT)
   Replace ALL existing matchup-bar CSS with this module.
   ========================================================= */
/* ================================
   Base visibility + shell
   ================================ */

.matchup-bar{
  position: relative;
  display: none;              /* collapsed by default */
  width: 100%;
  margin: 18px auto 28px;
  margin-bottom: 34px;
}

.matchup-bar.visible{
  display: block;             /* show when ready */
}

/* Remove base .card styling ONLY for matchup bar */
#matchupBar.card{
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  padding: 0 !important;
}

/* #matchupBar is a neutral wrapper (NOT a plate) */
#matchupBar.matchup-bar{
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  overflow: visible;
}

#matchupBar .matchup-bar-main{
  overflow: hidden;         /* keeps the bar’s rounded hardware look */
  border-radius: inherit;
}

/* =========================================================
   MATCHUP BAR — "TAB" BORDER (incorporate shelf visually)
   Adds a center bump on the top border like a folder tab.
   ========================================================= */

/* Inner rail highlight */
#matchupBar.matchup-bar:not(.is-editing)::after{
  content: none;
  position:absolute;
  inset: 8px;
  border-radius: 22px;
  pointer-events:none;

  background: transparent;
  box-shadow: none;
  opacity: 0.85;
}

/* ================================
   Main layout grid
   ================================ */

#matchupBar .matchup-bar-main{
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: 28px;

  /* Reserve lane for kicker strip + label */
  padding: 26px 26px 26px;
  overflow: visible;
}

/* Top accent rule (uses ::after — do not reuse elsewhere) */
#matchupBar:not(.is-editing) .matchup-bar-main::after{
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  top: 6px;
  height: 3px;
  border-radius: 999px;
  pointer-events: none;
  z-index: 2;

  /* Brand blue only — no green channel */
  background: linear-gradient(
    90deg,
    rgba(23, 95, 195, 0.00),
    rgba(23, 95, 195, 0.34),
    rgba(23, 95, 195, 0.52),
    rgba(23, 95, 195, 0.34),
    rgba(23, 95, 195, 0.00)
  );

  opacity: 0.80;
  filter: blur(0.25px);
}

/* Side rails */
#matchupBar .matchup-bar-left,
#matchupBar .matchup-bar-right{
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

/* Rest state: hug inward toward center */
#matchupBar:not(.is-editing) .matchup-bar-left{
  justify-self: end;
  align-items: flex-end;
  text-align: right;
}

#matchupBar:not(.is-editing) .matchup-bar-right{
  justify-self: start;
  align-items: flex-start;
  text-align: left;
}

/* Center stack */
#matchupBar .matchup-bar-center{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 240px; /* stabilizes center */
}

/* Team typography */
#matchupBar .matchup-bar-team{
  max-width: 46ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  font-weight: 800;
  letter-spacing: 0.01em;
  text-shadow: 0 14px 48px rgba(0, 0, 0, 0.58);
}

#matchupBar:not(.is-editing){
  font-size: 1rem;
}

#matchupBar:not(.is-editing) .matchup-bar-team{
  font-size: 1.25rem;
  font-weight: 750;
}

/* Remove redundant elements in rest state */
#matchupBar:not(.is-editing) .matchup-bar-vs{ display: none !important; }
#matchupBar:not(.is-editing) .matchup-bar-label{ display: none !important; }
#matchupBar:not(.is-editing) .matchup-bar-seed{ display: none !important; }


/* ================================
   Integrated Kicker Lane
   ================================ */

/* Embedded strip (uses ::before — do not reuse elsewhere) */
#matchupBar .matchup-bar-main::before{
  content: none;
  position: absolute;
  left: 16px;
  right: 16px;
  top: 10px;
  height: 32px;
  border-radius: 12px;

  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)),
    linear-gradient(180deg, rgba(2, 6, 23, .28), rgba(2, 6, 23, .12));

  opacity: .92;
  pointer-events: none;
  z-index: 1;
}

/* Label: must be .matchup-controls-label.matchup-kicker */
#matchupBar .matchup-controls-label.matchup-kicker{
  position: absolute;
  top: 12px;
  left: 18px;
  z-index: 2;
}

/* =========================================================
   Reusable Kicker Skin
   (Lets other elements inherit the MATCHUP CONTROLS kicker look)
   ========================================================= */
.matchup-kicker{
  /* typography */
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-weight: 900;
  line-height: 1;

  /* surface */
  color: rgba(148,163,184,0.65);
  background-color: rgba(3, 7, 18, 0.55);
  border: 1px solid rgba(148,163,184,0.18);
  border-radius: 12px;

  /* spacing + behavior */
  padding: 10px 12px;
  margin: 0;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;

  /* depth */
  box-shadow:
    0 10px 22px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.06),
    inset 0 0 0 1px rgba(255,255,255,0.03);
  text-shadow: 0 1px 0 rgba(0,0,0,0.35);

  /* safe default layout */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Edit state: quieter but same geometry */
#matchupBar.is-editing .matchup-controls-label.matchup-kicker{
  color: rgba(148,163,184,0.55);
  background-image: linear-gradient(
    90deg,
    rgba(148,163,184,0.30),
    rgba(148,163,184,0.00)
  );
}

/* ================================
   Round pill + Edit button (rest)
   ================================ */

#matchupBar:not(.is-editing) #matchupRoundPill{
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.08),
    rgba(255, 255, 255, 0.03)
  );
  font-size: 18px;
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.48),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

#matchupBar:not(.is-editing) #editMatchupBtn{
  border: 1px solid rgba(120, 185, 255, 0.30);
  background: linear-gradient(180deg,
    rgba(95, 170, 255, 0.20),
    rgba(255, 255, 255, 0.06)
  );
  box-shadow:
    0 16px 44px rgba(0, 0, 0, 0.62),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
  transform: translateZ(0);
}

#matchupBar:not(.is-editing) #editMatchupBtn:hover{
  border-color: rgba(140, 215, 255, 0.44);
  box-shadow:
    0 18px 52px rgba(0, 0, 0, 0.66),
    inset 0 1px 0 rgba(255, 255, 255, 0.11);
}

#matchupBar:not(.is-editing) #editMatchupBtn:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 3px rgba(64, 200, 255, 0.25),
    0 18px 52px rgba(0, 0, 0, 0.66),
    inset 0 1px 0 rgba(255, 255, 255, 0.11);
}

/* Optional: when visible and resting, slightly “present” the shell */
section#matchupBar.card.matchup-bar.visible:not(.is-editing){
  border: 1px solid rgba(150, 210, 255, 0.20);
  box-shadow:
    0 28px 92px rgba(0, 0, 0, 0.78),
    0 0 0 1px rgba(0, 0, 0, 0.55),
    0 0 32px rgba(56, 189, 248, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

/* ================================
   Quick Edit (editing state)
   ================================ */

/* Default hidden until editing */
.matchup-quick-slot,
.matchup-quick-actions{
  display: none;
}

/* When editing: swap content */
#matchupBar.is-editing .matchup-bar-team,
#matchupBar.is-editing #matchupRoundPill,
#matchupBar.is-editing #editMatchupBtn{
  display: none !important;
}

#matchupBar.is-editing .matchup-quick-slot,
#matchupBar.is-editing .matchup-quick-actions{
  display: block;
}

#matchupBar.is-editing{
  position: relative;
  z-index: 2000;
  overflow: visible;
  border-radius: 28px;

  /* SAME chassis as rest state */
  background:
    radial-gradient(1400px 420px at 50% -18%,
      rgba(96, 165, 250, 0.42) 0%,
      rgba(56, 189, 248, 0.14) 38%,
      rgba(0, 0, 0, 0) 68%
    ),
    radial-gradient(900px 320px at 14% 10%,
      rgba(56, 189, 248, 0.12) 0%,
      rgba(0, 0, 0, 0) 62%
    ),
    linear-gradient(180deg,
      rgba(17, 28, 56, 0.92) 0%,
      rgba(10, 18, 38, 0.94) 52%,
      rgba(2, 6, 23, 0.96) 100%
    );

  border: 1px solid rgba(150, 210, 255, 0.18);

  box-shadow:
    0 22px 68px rgba(0, 0, 0, 0.72),
    0 0 0 1px rgba(0, 0, 0, 0.55),
    0 0 30px rgba(56, 189, 248, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 0 0 1px rgba(255, 255, 255, 0.045);
}

#matchupBar.is-editing::after{
  content:"";
  position:absolute;
  inset: 8px;
  border-radius: 22px;
  pointer-events:none;

  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.07),
    rgba(255,255,255,0.02) 32%,
    rgba(0,0,0,0.00) 60%
  );

  opacity: 0.75; /* slightly quieter than rest */
}

#matchupBar.is-editing::before{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;

  background: linear-gradient(
    180deg,
    rgba(56,189,248,0.07),
    rgba(56,189,248,0.03) 42%,
    rgba(0,0,0,0.00)
  );

  opacity: 1;
}

#matchupBar.is-editing .matchup-bar-main{
  /* Lock side lanes so center never “walks” when zoom/resize triggers reflow */
  grid-template-columns: minmax(240px, 520px) auto minmax(240px, 520px);
  column-gap: 32px;
  align-items: center;
  justify-content: center; /* keeps the whole 3-lane system centered */
}

/* In edit mode, mirror side lanes toward center (true symmetry) */
#matchupBar.is-editing .matchup-bar-left{
  justify-self: end;
  align-items: flex-end;
  text-align: right;
}

#matchupBar.is-editing .matchup-bar-right{
  justify-self: start;
  align-items: flex-start;
  text-align: left;
}

/* Slots: controlled width so they don’t dominate */
#matchupBar.is-editing .matchup-quick-slot{
  margin-top: 8px;
  width: min(520px, 100%);
  max-width: 520px;
  min-width: 0;
}

/* Edit mode: tighten dropdown width */
#matchupBar.is-editing .matchup-quick-slot select{
  max-width: 380px;
  margin: 0;
}

/* Edit mode: group Round + Sandbox into a single control row */
#matchupBar.is-editing .round-selector-wrap{
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
}

/* Make Sandbox toggle visually match Round selector */
#matchupBar.is-editing .round-selector-wrap .sandbox-toggle{
  min-height: 48px;
  padding: 10px 16px;
  border-radius: 14px;

  border: 1px solid rgba(255,255,255,0.14);
  background: linear-gradient(180deg,
    rgba(255,255,255,0.08),
    rgba(255,255,255,0.03)
  );

  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.48),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);

  font-size: 14px;
}

#matchupBar.is-editing .matchup-quick-slot .select-wrap label,
#matchupBar.is-editing .matchup-quick-slot .round-step-label,
#matchupBar.is-editing .matchup-quick-slot .helper-text{
  display: none !important;
}

#matchupBar.is-editing .matchup-quick-slot select,
#matchupBar.is-editing .matchup-quick-slot .round-btn{
  width: 100%;
  min-height: 44px;
  font-size: 15px;
  padding: 10px 14px;
  border-radius: 14px;
}

/* Actions */
#matchupBar.is-editing .matchup-quick-actions{
  margin-top: 6px;
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
}

#matchupBar.is-editing .matchup-quick-actions .btn{
  min-height: 40px;
  font-size: 13px;
  padding: 8px 18px;
}

/* Dropdown stacking reliability */
#matchupBar .round-selector-wrap{
  position: relative;
  z-index: 2100;
}

#matchupBar .round-dropdown{
  z-index: 2200;
}

/* In rest state: if cancel exists in DOM, hide it */
#matchupBar:not(.is-editing) .matchup-quick-actions .btn.ghost,
#matchupBar:not(.is-editing) #cancelMatchupBtn{
  display: none !important;
}

/* If your app adds .has-matchup after running, use that.
   If not, see the alternate selector below. */
.app-shell.has-matchup #matchupBar:not(.is-editing) .matchup-quick-actions{
  display: none !important; /* hides Run entirely when it would do nothing */
}

/* Make Edit Matchup feel like the primary action in that state */
.app-shell.has-matchup #matchupBar:not(.is-editing) .matchup-bar-edit{
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 800;
}

.dataset-download-btn{
  width: 100%;
  margin: 10px 0 6px;
}

/* Start a Matchup tile no longer needs per-step status pills (status bar handles it) */
.pre-matchup-hub .pre-step-status {
  display: none !important;
}

/* Edit mode: remove redundant role headers (Cinderella / Favorite) */
#matchupBar.is-editing .matchup-bar-label{
  display: none !important;
}

/* Edit mode: remove floating VS (no longer a presentation element) */
#matchupBar.is-editing .matchup-bar-vs{
  display: none !important;
}

#matchupBar.matchup-bar:not(.is-editing){
  overflow: visible;
  border-radius: 28px;

  background:
    radial-gradient(120% 140% at 50% -20%,
      var(--mi-brand-blue-a12),
      transparent 62%
    ),
    linear-gradient(180deg,
      rgba(15, 23, 42, 0.74),
      rgba(2, 6, 23, 0.92)
    );

  border-color: var(--mi-brand-blue-a28);
}

/* “More” button lives to the right of the tabs */
#matchupBar .mi-log-more-btn{
  position: relative;
  z-index: 3;

  height: 34px;
  padding: 0 12px;

  border-radius: 10px;
  border: 1px solid rgba(148,163,184,0.18);
  background: rgba(2,6,23,0.30);

  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.06em;
  opacity: 0.92;
  cursor: pointer;
}

#matchupBar .mi-log-more-btn:hover{
  opacity: 1;
  border-color: rgba(56,189,248,0.26);
}

/* Tab hover reads like “selectable history” */
#matchupBar .mi-log-top3 .mi-log-row:hover{
  border-color: var(--mi-brand-blue-a28);
  background: rgba(15, 23, 42, 0.55);
}

/* Compact the internal layout so it reads like a tab */
#matchupBar .mi-log-top3 .mi-log-tag{
  margin: 0;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
  opacity: 0.75;
  flex: 0 0 auto;
}

#matchupBar .mi-log-top3 .mi-log-name,
#matchupBar .mi-log-top3 .mi-log-mi,
#matchupBar .mi-log-top3 .mi-log-lean{
  display: inline;
}

/* MI numbers: compact, centered */
#matchupBar .mi-log-top3 .mi-log-mi.a,
#matchupBar .mi-log-top3 .mi-log-mi.b{
  font-size: 12px;
  font-weight: 900;
  opacity: 0.90;
}

#matchupBar .mi-log-top3 .mi-log-lean{
  margin: 0;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.14em;
  opacity: 0.55;
  text-transform: uppercase;
}

/* ==== More dropdown panel (overlay anchored to shelf) ==== */
#matchupBar .mi-log-more-panel{
  position: absolute;
  right: 12px;
  top: calc(100% + 10px);
  width: min(860px, calc(100vw - 24px));
  z-index: 999;

  border-radius: 14px;
  border: 1px solid rgba(56,189,248,0.22);
  background: linear-gradient(180deg, rgba(15,23,42,0.95), rgba(2,6,23,0.96));
  box-shadow:
    0 28px 70px rgba(0,0,0,0.70),
    0 0 0 1px rgba(255,255,255,0.05) inset;

  padding: 10px;
}

/* More list: vertical scroll */
#matchupBar .mi-log-more-list{
  display: flex;
  flex-direction: column;
  gap: 6px;

  max-height: 360px;
  overflow: auto;
  padding-right: 6px;
}

/* Rows inside dropdown: keep your ticker-like detail */
#matchupBar .mi-log-more-list .mi-log-row{
  position: relative;
  display: grid;
  align-items: center;
  gap: 6px;

  padding: 8px 10px 8px 54px;
  border-radius: 10px;

  background: rgba(2,6,23,0.26);
  border: 1px solid rgba(148,163,184,0.14);

  white-space: nowrap;
  font-size: 12px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

/* Tag pill on the far left */
#matchupBar .mi-log-more-list .mi-log-tag{
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.10em;
  opacity: 0.84;
}

/* Let dropdown rows keep arrows + center lane */
#matchupBar .mi-log-more-list .mi-log-arrows{
  display: inline-flex;
  justify-content: center;
  gap: 3px;
  min-width: 56px;
}

#matchupBar .mi-log-more-list .mi-log-mi{
  font-weight: 900;
  opacity: 0.92;
  text-align: center;
  min-width: 64px;
}
#matchupBar .mi-log-more-list .mi-log-name{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 850;
  opacity: 0.94;
  min-width: 0;
}
#matchupBar .mi-log-more-list .mi-log-name.b{ text-align:right; }

#matchupBar{
  position: relative;  /* anchors .mi-matchup-backplate absolute positioning */
  overflow: visible;   /* prevents the upward-opening shelf from being clipped */
  margin-bottom: 10px;
  isolation: isolate;
}

/* Backplate = the ONE ticker plate (folder-tab mode) */
#matchupBar .mi-matchup-backplate{
  position: relative;
  margin: 0;              /* no overlap / no fusion */
  padding: 0;             /* mount only */
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  z-index: 2;
  display: block;
}

/* When the tab is open, make the dock look like the lower folder section */
#matchupBar .mi-matchup-backplate.is-open + .mi-matchup-dock{
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  border-top: none;
}

#matchupBar .mi-matchup-backplate > *{
  position: relative;
  z-index: 1;
}

#matchupBar .mi-matchup-dock,
#matchupBar .matchup-bar-main{
  position: relative;
  z-index: 2;
}

/* EXTREME slow debug version — clearly visible motion */
#matchupBar .mi-log-row.is-new{
  animation: miLogNewRow 2000ms cubic-bezier(.22,1,.36,1) both;
  will-change: transform, opacity, filter, box-shadow;
}

@keyframes miLogNewRow{
  0%{
    opacity: 0;
    transform: translateY(48px) scale(0.96);
    filter: brightness(1.25) saturate(1.15);
  }

  55%{
    opacity: 1;
    transform: translateY(-4px) scale(1.01); /* noticeable overshoot */
    filter: brightness(1.12);
  }

  100%{
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: none;
  }
}

/* Top 3 = VERTICAL stack (ticker tabs) */
#matchupBar .mi-log-top3{
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 860px;
  width: 100%;
  margin: 0 auto;
  min-width: 0;
}

/* Each row = fixed-lane ticker layout (LEAN anchored to true center) */
#matchupBar .mi-log-top3 .mi-log-row{
  display: grid;
  align-items: center;

  /* Fixed lanes around the center + flexible team names */
  grid-template-columns:
    52px              /* tag (Champ/F4) */
    minmax(0, 1.25fr) /* name A (flex) */
    60px              /* MI A (fixed) */
    52px              /* arrows left (fixed) */
    84px              /* LEAN (fixed, true center lane) */
    52px              /* arrows right (fixed) */
    60px              /* MI B (fixed) */
    minmax(0, 1.25fr)   /* name B (flex) */
    52px;             /* RIGHT SPACER (balances tag so LEAN is true center) */

  column-gap: 0;

  height: 34px;
  padding: 6px 10px;
  border-radius: 12px;

  background: rgba(2,6,23,0.34);
  border: 1px solid rgba(56,189,248,0.20);
  box-shadow:
    0 10px 22px rgba(0,0,0,0.42),
    0 0 0 1px rgba(255,255,255,0.04) inset;

  overflow: hidden;
  white-space: nowrap;
}

#matchupBar .mi-log-top3 .mi-log-row{
  width: min(100%, 600px);
  margin-inline: auto;
}

/* Controlled lane spacing for symmetry */
#matchupBar .mi-log-top3 .mi-log-row > *{
  padding-inline: 6px;
}

/* Slightly tighter around numeric lanes */
#matchupBar .mi-log-top3 .mi-log-row > :nth-child(3),
#matchupBar .mi-log-top3 .mi-log-row > :nth-child(7){
  padding-inline: 4px;
}

/* Slightly more air around team names */
#matchupBar .mi-log-top3 .mi-log-row > :nth-child(2),
#matchupBar .mi-log-top3 .mi-log-row > :nth-child(8){
  padding-inline: 8px;
}

/* Lane assignments */
#matchupBar .mi-log-top3 .mi-log-tag{ grid-column: 1; opacity: 0.75; font-size: 10px; font-weight: 900; letter-spacing: .12em; }

#matchupBar .mi-log-top3 .mi-log-name.a{ grid-column: 2; text-align: right; overflow: hidden; text-overflow: ellipsis; }
#matchupBar .mi-log-top3 .mi-log-name.b{ grid-column: 8; text-align: left;  overflow: hidden; text-overflow: ellipsis; }

#matchupBar .mi-log-top3 .mi-log-mi.a{ grid-column: 3; text-align: right; font-weight: 900; }
#matchupBar .mi-log-top3 .mi-log-mi.b{ grid-column: 7; text-align: left;  font-weight: 900; }

#matchupBar .mi-log-top3 .mi-log-arrows.left { grid-column: 4; text-align: center; opacity: 0.55; }
#matchupBar .mi-log-top3 .mi-log-lean        { grid-column: 5; text-align: center; font-weight: 900; letter-spacing: .14em; opacity: 0.60; text-transform: uppercase; }
#matchupBar .mi-log-top3 .mi-log-arrows.right{ grid-column: 6; text-align: center; opacity: 0.55; }

#matchupBar .mi-log-top3 .mi-log-arrows.left,
#matchupBar .mi-log-top3 .mi-log-arrows.right{
  text-align: center;
  letter-spacing: 0;   /* critical: prevents 2 arrows from ‘stretching’ */
  word-spacing: 0;     /* safety */
  font-variant-ligatures: none; /* prevents glyph/ligature weirdness */
  white-space: nowrap;
}

#matchupBar .mi-log-top3 .mi-log-arrows.left,
#matchupBar .mi-log-top3 .mi-log-arrows.right{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2px;            /* consistent spacing between arrows */
}

/* Safety: prevent any child from forcing width */
#matchupBar .mi-log-top3 .mi-log-row > *{ min-width: 0; }

/* Kill the “stem” — it adds height + makes them feel like tiles */
#matchupBar .mi-log-top3 .mi-log-row::after{
  content: none;
}

/* Ticker: keep internals on one line */
#matchupBar .mi-log-top3 .mi-log-tag{
  margin: 0;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
  opacity: 0.75;
  flex: 0 0 auto;
}

/* Stop forcing vertical layout */
#matchupBar .mi-log-top3 .mi-log-name,
#matchupBar .mi-log-top3 .mi-log-mi,
#matchupBar .mi-log-top3 .mi-log-lean{
  display: inline;
}

/* Names: compact, truncate */
#matchupBar .mi-log-top3 .mi-log-name.a,
#matchupBar .mi-log-top3 .mi-log-name.b{
  font-size: 12px;
  min-width: 0;
  font-weight: 850;
  opacity: 0.95;
  max-width: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* MI + Lean: compact “right side” readout */
#matchupBar .mi-log-top3 .mi-log-mi.a,
#matchupBar .mi-log-top3 .mi-log-mi.b{
  font-size: 12px;
  font-weight: 900;
  opacity: 0.90;
}

#matchupBar .mi-log-top3 .mi-log-lean{
  margin: 0;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.14em;
  opacity: 0.90;
  text-transform: uppercase;
}

#matchupBar #miLogTop3.mi-log-top3{
  display: flex;
  flex-direction: column;
}

/* TEMP: disable “More” until placement is decided */
#matchupBar #miLogMoreBtn,
#matchupBar #miLogMorePanel{
  display: none !important;
}

/* The mount point must NOT look like a plate */
#matchupBar #miLogTop3.mi-log-top3{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 auto !important;
}

#matchupBar #miLogTop3.mi-log-top3::before,
#matchupBar #miLogTop3.mi-log-top3::after{
  content: none !important;
}

/* =========================================================
   FORCE: log mount is neutral + in-flow (no overlap panel)
   ========================================================= */
#matchupBar .mi-matchup-backplate{
  position: relative !important;
  margin: 0 !important;          /* <-- kills the -12px overlap */
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* =========================================================
   MATCHUP BAR WRAPPER — MUST BE NEUTRAL (the dock is the plate)
   ========================================================= */
#matchupBar.matchup-bar{
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* =========================================================
   MATCHUP CONTROLS — PRIMARY BLUE PLATE
   ========================================================= */
#matchupBar .mi-matchup-dock.card{
  background:
    radial-gradient(120% 140% at 20% 0%, rgba(56,189,248,0.12), transparent 60%),
    linear-gradient(180deg, rgba(15,23,42,0.94), rgba(2,6,23,0.96));

  border: 1px solid rgba(148,163,184,0.30);
  border-radius: 18px;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 18px 44px rgba(0,0,0,0.65),
    0 0 26px rgba(56,189,248,0.18);
  padding: 6px 4px 6px;
}

/* =========================================================
   Cohesion pass: make top-3 feel like an extension of the dock
   (no new plates; just flatten + seam)
   ========================================================= */

/* Tighten the “stack” so it reads like one system */
#matchupBar .mi-log-top3{
  gap: 6px;                 /* was 8px */
  margin: 0 auto 8px;       /* creates a deliberate seam space above the dock */
}

/* Make each log row feel like ticker ink (less “button tile”) */
#matchupBar .mi-log-top3 .mi-log-row{
  background: rgba(2,6,23,0.22);             /* slightly flatter */
  border-color: rgba(148,163,184,0.16);      /* closer to dock edge */
  box-shadow: none;                          /* key: remove independent “card” lift */
  border-radius: 12px;                       /* slightly tighter than the dock */
}

/* When the shelf is present, make the dock accept the seam */
#matchupBar .mi-matchup-backplate.is-open + .mi-matchup-dock.card{
  border-top: 0;                             /* removes “double border” */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),    /* keep your existing dock feel */
    0 18px 44px rgba(0,0,0,0.65),
    0 0 26px rgba(56,189,248,0.18),
    0 -1px 0 rgba(148,163,184,0.14) inset;   /* subtle seam stitch */
}

/* Optional micro-fuse: make the bottom row corners match the dock’s top silhouette */
#matchupBar .mi-log-top3 .mi-log-row:last-child{
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
}

#matchupBar .mi-log-row{
  border-color: rgba(148, 163, 184, 0.14);
}

/* =========================================================
   Shelf cohesion: single unified outline + cap seam stitch
   (no new plates; outline sits behind existing layers)
   ========================================================= */

/* =========================================================
   Trapezoid cap outline (diagonal sides) — shelf cohesion
   No JS hooks needed. No new plate layers.
   ========================================================= */

#matchupBar .mi-matchup-backplate{
  position: relative;     /* anchor the cap */
  isolation: isolate;     /* keeps z-index sane */
  overflow: visible;
}

/* The trapezoid outline sits behind the log rows */
#matchupBar .mi-matchup-backplate::before{
  content: "";
  position: absolute;

  /* expand slightly beyond the shelf area */
  left: 10px;
  right: 10px;
  top: -10px;
  bottom: -2px;

  /* A gentle trapezoid: wide top, narrower bottom */
  clip-path: polygon(
    3% 38%,   /* left “shoulder” */
    12% 0%,   /* left top corner (pulled inward) */
    88% 0%,   /* right top corner */
    97% 38%,  /* right “shoulder” */
    97% 100%, /* right bottom */
    3% 100%   /* left bottom */
  );

  /* Invisible fill (just enough alpha to allow drop-shadow to render) */
  background: rgba(2,6,23,0.22);

  /* Glow that follows the clip-path (prevents “rounded rectangle” ghost) */
  filter:
    drop-shadow( 1px  0px 0 rgba(148,163,184,0.22))
    drop-shadow(-1px  0px 0 rgba(148,163,184,0.22))
    drop-shadow( 0px  1px 0 rgba(148,163,184,0.18))
    drop-shadow( 0px -1px 0 rgba(148,163,184,0.14))
    drop-shadow(0 0 22px rgba(56,189,248,0.12));

  pointer-events: none;
  z-index: 0;
}

/* Ensure actual shelf content stays above the cap */
#matchupBar .mi-matchup-backplate > *{
  position: relative;
  z-index: 1;
}

/* Kill any leftover “unified outline” plate on the matchupBar.
   The ONLY silhouette should be the trapezoid on .mi-matchup-backplate. */
#matchupBar.has-shelf::before,
#matchupBar.has-shelf::after{
  content: none !important;
  display: none !important;
}

/* =========================================================
   Matchup log strength arrows (revived, broadcast-safe)
   ========================================================= */
.mi-log-arrows{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  opacity: 0.95;
}

.mi-log-arrows.left{  justify-content: flex-end; }
.mi-log-arrows.right{ justify-content: flex-start; }

/* Actual arrow element produced by JS */
.mi-log-arrows .mi-log-arrow{
  width: 16px;
  height: 10px;
  display: inline-block;
  position: relative;
}

/* TRIANGLE (points right by default) */
.mi-log-arrows .mi-log-arrow::before{
  content: "";
  position: absolute;
  inset: 0;

  /* right-pointing triangle */
  clip-path: polygon(
    0% 0%,
    100% 50%,
    0% 100%
  );

  background: rgba(34, 197, 94, 0.82);
  box-shadow: 0 0 14px rgba(34,197,94,0.34);
}

.mi-log-arrows.left  .mi-log-arrow::before{ transform: rotate(180deg); }
.mi-log-arrows.right .mi-log-arrow::before{ transform: none; }

/* Strength ladder: keep green, just increase intensity */
.mi-log-arrows .mi-log-arrow:nth-child(2)::before{
  background: rgba(34, 197, 94, 0.90);
  box-shadow: 0 0 16px rgba(34,197,94,0.38);
}

.mi-log-arrows .mi-log-arrow:nth-child(3)::before{
  background: rgba(34, 197, 94, 0.98);
  box-shadow: 0 0 18px rgba(34,197,94,0.46);
}

.mi-log-arrows .mi-log-arrow:nth-child(4)::before{
  background: rgba(34, 197, 94, 1.00);
  box-shadow: 0 0 22px rgba(34,197,94,0.56);
}

/* LOCK arrow unit sizing so count = strength (no stretching) */
#matchupBar .mi-log-top3 .mi-log-arrows.left,
#matchupBar .mi-log-top3 .mi-log-arrows.right{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;              /* fixed spacing between arrows */
}

#matchupBar .mi-log-top3 .mi-log-arrows .mi-log-arrow{
  flex: 0 0 auto;        /* <-- THIS is the big one: prevents “2 arrows get bigger” */
  width: 10px;           /* hard-lock arrow box */
  height: 10px;
  line-height: 10px;
  display: inline-block;
}

#matchupBar .mi-log-top3 .mi-log-arrows .mi-log-arrow::before{
  display: block;
  width: 10px;           /* match the box */
  height: 10px;
  line-height: 10px;
  font-size: 10px;       /* if your arrows are font glyphs in ::before */
}

/* Position the reused matchup-kicker as the log label */
#matchupBar .mi-matchup-backplate .mi-log-label.matchup-kicker{
  position: relative;     /* overrides absolute positioning used in controls */
  left: auto;
  right: auto;
  top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 6px auto;
  width: fit-content;
  text-align: center;
  z-index: 1;
}

/* ==========================================
   KICKER SKIN — force reuse (does not rely on class being present)
   ========================================== */
#matchupBar .matchup-controls-label,
#matchupBar .mi-log-label,
#interactionsSection .legend-header--interactions .int-console-pill.interactions-header-pill,
#cindCard #marksTileA .marks-header-text.matchup-kicker,
#cindCard #marksTileB .marks-header-text.matchup-kicker,
#favCard  #marksTileA .marks-header-text.matchup-kicker,
#favCard  #marksTileB .marks-header-text.matchup-kicker,
#cindCard .section-header .matchup-kicker,
#favCard  .section-header .matchup-kicker,
#matchupBar.is-editing .matchup-controls-label.matchup-kicker,
#summarySection .matchup-kicker.syn-kicker,
#summarySectionMobile .mi-sum-mob-title-matchup-kicker {
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 850;
  line-height: 1;

  color: rgba(249,246,238,0.9);
  background-color: rgba(3, 7, 18, 0.55);
  border: 1px solid rgba(148,163,184,0.18);
  border-radius: 12px;

  padding: 10px 12px;
  margin: 0;
  white-space: nowrap;

  box-shadow:
    0 10px 22px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.06),
    inset 0 0 0 1px rgba(255,255,255,0.03);
  text-shadow: 0 1px 0 rgba(0,0,0,0.35);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  pointer-events: none;
  user-select: none;
}

/* Anchor slots to the inner edges so left/right mirror perfectly */
#matchupBar.is-editing .matchup-bar-left .matchup-quick-slot{
  margin-left: auto;
  margin-right: 0;
}

#matchupBar.is-editing .matchup-bar-right .matchup-quick-slot{
  margin-right: auto;
  margin-left: 0;
}

/* Force TEAM A + TEAM B quick-slot dropdowns to be constrained by the slot */
#matchupBar.is-editing #matchupQuickA.matchup-quick-slot .mi-team-dd,
#matchupBar.is-editing #matchupQuickB.matchup-quick-slot .mi-team-dd{
  position: relative;   /* panel can still be absolute inside this */
  width: 100%;
  min-width: 0;
}

#matchupBar.is-editing #matchupQuickA.matchup-quick-slot .mi-team-dd-btn,
#matchupBar.is-editing #matchupQuickB.matchup-quick-slot .mi-team-dd-btn{
  position: relative;   /* ensure the button itself isn't absolute */
  width: 100%;
  min-width: 0;
}

#matchupBar.is-editing .matchup-bar-left .matchup-quick-slot,
#matchupBar.is-editing .matchup-bar-right .matchup-quick-slot{
  display: block;
}

/* =========================================================
   FIX: Give quick-slot a fixed anchor width (so 100% is real)
   ========================================================= */
:root{
  --mi-quick-dd-width: 250px; /* tune: 240–280px */
}

#matchupBar.is-editing #matchupQuickA.matchup-quick-slot,
#matchupBar.is-editing #matchupQuickB.matchup-quick-slot{
  width: var(--mi-quick-dd-width);
  max-width: var(--mi-quick-dd-width);
  flex: 0 0 var(--mi-quick-dd-width); /* IMPORTANT: prevents flex shrink-to-fit */
  height: auto;
  min-height: 0;
}

#matchupBar.is-editing .matchup-bar-left,
#matchupBar.is-editing .matchup-bar-right{
  min-width: var(--mi-quick-dd-width);
}

/* =========================================================
   EDIT MODE ONLY: keep quick-slot width anchored + stop height inflation
   Requires: #matchupBar.is-editing AND aria-hidden="false"
   ========================================================= */

:root{
  --mi-quick-dd-width: 250px; /* tune */
}

/* Anchor fixed width at the slot level (so 100% is meaningful) */
#matchupBar.is-editing #matchupQuickA.matchup-quick-slot[aria-hidden="false"],
#matchupBar.is-editing #matchupQuickB.matchup-quick-slot[aria-hidden="false"]{
  width: var(--mi-quick-dd-width);
  max-width: var(--mi-quick-dd-width);
  flex: 0 0 auto;
  overflow: visible;
}

/* Make the dropdown a proper positioning context */
#matchupBar.is-editing #matchupQuickA.matchup-quick-slot[aria-hidden="false"] .mi-team-dd,
#matchupBar.is-editing #matchupQuickB.matchup-quick-slot[aria-hidden="false"] .mi-team-dd{
  position: relative;
  width: 100%;
  min-width: 0;
}

/* CRITICAL: force the panel to be out of layout flow so it can't add height */
#matchupBar.is-editing #matchupQuickA.matchup-quick-slot[aria-hidden="false"] .mi-team-dd .mi-team-dd-panel,
#matchupBar.is-editing #matchupQuickB.matchup-quick-slot[aria-hidden="false"] .mi-team-dd .mi-team-dd-panel{
  position: absolute !important;
  top: calc(100% + 8px);
  left: 0;
  width: 100%;
  z-index: 9999;
}

/* ==========================================
   SECTION HEADER KICKERS — match Interaction pill geometry
   ========================================== */
#cindCard .section-header.matchup-kicker,
#favCard  .section-header.matchup-kicker{
  /* Interaction header reads as a centered pill, not a tight label */
  min-width: 320px;
  padding: 12px 18px;      /* slightly roomier than 10/12 */
  border-radius: 999px;    /* true pill shape like Interaction */
}

/* Keep your log label centered (kicker skin shouldn't reposition it) */
#matchupBar .mi-log-label:not(.matchup-kicker){
  width: 100%;
  text-align: center;
  background: transparent;    /* optional: comment this out if you want the pill background */
  border-color: transparent;  /* optional */
  box-shadow: none;           /* optional */
  backdrop-filter: none;      /* optional */
  -webkit-backdrop-filter: none;
}

#cindCard .tile-face.tile-front .section-header,
#favCard  .tile-face.tile-front .section-header{
  display: flex;
  flex-direction: column;
  align-items: center;   /* centers the kicker pill */
  justify-content: center;
  text-align: center;
  width: 100%;
}

/* ========== ANALYSIS SHELL (HIDE UNTIL MATCHUP RUNS) ========== */

.analysis-shell {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 280ms ease, transform 280ms ease;
  will-change: opacity, transform;
}

.analysis-shell.analysis-visible {
  opacity: 1;
  transform: translateY(0);
}

/* IMPORTANT: when hidden, remove from layout entirely */
.analysis-shell.hidden {
  display: none;
}

/* In the 3-col cockpit row, cards should NOT add their own top margins */
.pre-setup-row .start-matchup,
.pre-setup-row #preMatchupHub,
.pre-setup-row .controls-card{
  margin-top: 0 !important;
}

/* Control spacing with the row itself (top/bottom consistent) */
.pre-setup-row{
  margin: 12px 0; /* adjust to taste */
}

/* ========== SUMMARY SECTION ========== */

.summary-card {
  margin-bottom: 10px;
  opacity: 0;
  transform: translateY(6px);
  transition: all 0.22s ease;
}
.summary-card.visible { opacity: 1; transform: translateY(0); }

.summary-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 6px;
}
.summary-header h2 { font-size: 14px; margin: 0; }
.summary-help { margin: 0; font-size: 12px; color: var(--mi-text-muted); }

.summary-grid {
  display: grid;
  grid-template-columns: 1fr 2.2fr 1fr;
  gap: 8px;
}

.summary-round-row {
  margin-top: 6px;
  margin-bottom: 4px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.summary-round-pill {
  padding: 2px 8px;
  border-radius: var(--mi-radius-pill);
  border: 1px solid rgba(55, 65, 81, 0.9);
  background: rgba(9, 9, 15, 0.95);
  font-size: 12px;
  color: var(--mi-text-primary);
}

.summary-table { margin-top: 4px; font-size: 12px; }
.summary-table th, .summary-table td { text-align: center; }

.summary-table th {
  text-align: center !important;
  font-size: 16px;
  letter-spacing: 0.06em;
  color: #dbeafe;
}

.summary-table th.summary-matchup-header {
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #f9fafb;
  text-shadow: 0 0 8px rgba(56, 189, 248, 0.5);
}

.summary-table thead tr { border-bottom: 2px solid rgba(56, 189, 248, 0.35); }

.summary-block {
  padding: 12px 12px 10px;
  border-radius: 12px;
  background: rgba(9, 9, 15, 0.98);
  border: 1px solid rgba(75, 85, 99, 0.95);
  font-size: 12px;
  color: var(--mi-text-muted);
  text-align: center;
}

.summary-block h4 {
  margin: 0 0 2px;
  font-size: 12px;
  font-weight: 600;
  color: var(--mi-text-primary);
}

.summary-lean {
  background: radial-gradient(circle at top, rgba(56, 189, 248, 0.12), rgba(9, 9, 15, 1));
  border-color: var(--mi-brand-blue-a12, 0.6);
}

/* ==========================================================================
   Summary — Center Verdict Card (Madness Index)
   Winner role drives hue (Cinderella/Favorite). Lean tier drives intensity.
   ========================================================================== */

.summary-verdict {
  /* Keep the same "mini card" feel as the side blocks, but branded + semantic */
  background: radial-gradient(circle at top, rgba(148, 163, 184, 0.10), rgba(9, 9, 15, 1));
  border: 1px solid rgba(148, 163, 184, 0.35);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 14px 12px;
  text-align: center;
  position: relative;
}

.summary-verdict .mi-verdict-brand {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--mi-text-muted);
  margin-top: 2px;
}

.summary-verdict .mi-verdict-line {
  font-size: 24px;
  line-height: 1.15;
  font-weight: 750;
  color: var(--mi-text-primary);
  text-wrap: balance;
}

.summary-verdict .mi-verdict-why,
.summary-verdict .mi-verdict-watch {
  font-size: 14px;
  line-height: 1.35;
  color: rgba(226, 232, 240, 0.86);
  max-width: 44ch;
}

.summary-verdict .mi-verdict-watch {
  color: rgba(148, 163, 184, 0.95);
}

.summary-verdict .mi-verdict-why.is-empty,
.summary-verdict .mi-verdict-watch.is-empty {
  display: none;
}

.summary-verdict .mi-verdict-footer {
  width: 100%;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-top: 2px;
  padding-top: 10px;
  border-top: 1px solid rgba(148, 163, 184, 0.18);
}

.summary-verdict .mi-verdict-gap {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(226, 232, 240, 0.78);
}

.summary-verdict .mi-verdict-disclaimer {
  font-size: 11px;
  letter-spacing: 0.02em;
  color: rgba(148, 163, 184, 0.78);
  text-align: right;
}

.summary-team-label {
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--mi-text-muted);
  margin-bottom: 2px;
}
.summary-team-name { font-size: 18px; font-weight: 600; color: var(--mi-text-primary); margin-bottom: 2px; }
.summary-mi-line   { font-size: 16px; color: #cbd5f5; margin-bottom: 1px; }
.summary-int-line  { font-size: 14px; color: var(--mi-text-muted); }

.summary-delta-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--mi-text-muted); margin-bottom: 2px; }
.summary-delta-value { font-size: 16px; font-weight: 700; color: var(--mi-accent-cyan); margin-bottom: 2px; }

.summary-pred-line { font-size: 18px; margin-bottom: 2px; }
.summary-lean-text { font-size: 16px; color: #cbd5f5; }

.summary-footnotes {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  text-align: center;
  width: 100%;
}
.summary-seed-note { margin: 0; }

/* ========== LEGEND ========== */

.legend-card { margin-bottom: 10px; padding-top: 8px; padding-bottom: 8px; }

.legend-header h3 {
  margin: 0 0 4px;
  font-size: 11px;
  color: var(--mi-text-primary);
}

.legend-items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 8.5px;
  color: var(--mi-text-muted);
}

.legend-item { display: inline-flex; align-items: center; gap: 4px; }

.legend-icon {
  width: 14px;
  height: 14px;
  border-radius: var(--mi-radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  border: 1px solid rgba(75, 85, 99, 0.9);
  background: rgba(9, 9, 15, 1);
}

.legend-icon.hit {
  color: var(--mi-accent-green);
  border-color: rgba(22, 163, 74, 0.9);
  background: rgba(22, 163, 74, 0.12);
}

.legend-icon.miss,
.legend-icon.missing { color: var(--mi-text-muted); }

/* ========== INTERACTIONS SECTION (3.4) ========== */

.interactions-card { padding: 12px; }

.interactions-left { width: 100%; }

.interactions-explain-tile{
  background: rgba(9, 9, 15, 0.96);
  border: 1px solid rgba(75, 85, 99, 0.9);
  border-radius: 12px;
  padding: 12px;
  min-height: 100%;
}

.interactions-explain-tile h4{
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 8px 0;
}

.interactions-explain-tile ul{
  font-size: 12px;
  line-height: 1.5;
  padding-left: 16px;
  margin: 0 0 10px 0;
  color: #d6dbe6;
}

.interactions-explain-tile .explain-note{
  font-size: 11.5px;
  color: #aeb6c6;
  background: rgba(15,23,42,0.6);
  border-radius: 10px;
  padding: 8px;
}

.interaction-table thead th{
  background: rgba(15, 23, 42, 0.95);
  color: var(--mi-text-primary);
  font-weight: 800;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 7px 8px;
  border-bottom: 1px solid var(--mi-brand-blue-a12, 0.22);
}

.interaction-table td{
  padding: 7px 8px;
  border-bottom: 1px solid rgba(30, 41, 59, 0.9);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.interaction-table tbody tr:last-child td{ border-bottom: none; }

.interaction-table .int-name{
  text-align: left;
  padding-left: 10px;
  width: 30%;
  font-weight: 700;
  color: #f3f4f6;
}

.interaction-table .int-edge{ width: 22%; }
.interaction-table .col-intensity{ width: 12%; font-weight: 800; }
.interaction-table .int-adj{ width: 11%; font-weight: 700; }

.int-row-even{ background: rgba(8, 12, 20, 0.9); }
.int-row-odd { background: rgba(10, 15, 26, 0.9); }
.interaction-table tbody tr:hover{ background: rgba(56, 189, 248, 0.06); }

.int-edge-pill{
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--mi-radius-pill);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid transparent;
  white-space: nowrap;
}

.int-edge-A{
  color: #22c55e;
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.6);
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.20);
}

.int-edge-B{
  color: #fdba74;
  background: rgba(249, 115, 22, 0.12);
  border-color: rgba(249, 115, 22, 0.6);
  box-shadow: 0 0 8px rgba(249, 115, 22, 0.20);
}

.int-edge-even{
  color: var(--mi-text-primary);
  background: rgba(148, 163, 184, 0.12);
  border-color: rgba(148, 163, 184, 0.6);
}

.int-adj.pos{ color: #86efac; }
.int-adj.neg{ color: #fda4af; }

.interaction-totals-bar{
  margin-top: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border-radius: 12px;
  background:
    radial-gradient(1200px 200px at -10% -50%, rgba(56,189,248,0.18), transparent),
    radial-gradient(1200px 200px at 110% 150%, rgba(249,115,22,0.18), transparent),
    rgba(9, 9, 15, 0.98);
  border: 1px solid var(--mi-brand-blue-a12, 0.45);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);
}

.interaction-totals-bar .totals-title{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #f3f4f6;
}

.interaction-totals-bar .totals-favored{
  margin-top: 2px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #cbd5e1;
}

.interaction-totals-bar .totals-favored span{ color: #f9fafb; }

.interaction-totals-bar .totals-right{
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.interaction-totals-bar .totals-val{
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.interaction-totals-bar .totals-val.pos{ color: #86efac; }
.interaction-totals-bar .totals-val.neg{ color: #fda4af; }
.interaction-totals-bar .totals-sep{ opacity: 0.5; font-weight: 700; }

/* ========== MAIN RESULT LAYOUT ========== */

.result-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 10px;
}

.result-layout{
  align-items: stretch !important;
}

#cindCard,
#favCard{
  height: 100%;
}

#cindCard .flip-inner,
#favCard .flip-inner{
  height: 100% !important;
}

/* ========== TEAM CARD (WHOLE-CARD FLIP) ========== */

.team-card {
  min-width: 0;
  position: relative;
  padding: 0;
  perspective: 1400px;
}

.team-card .flip-inner {
  position: relative;
  width: 100%;
  height: auto !important;
  min-width: 0;
  padding: 10px 10px 8px;
  transform-style: preserve-3d;
  transition: transform 0.45s ease;
}

.team-card.flipped .flip-inner { transform: rotateY(180deg); }

.card-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
}

.card-face.card-front {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.card-face.card-back { transform: rotateY(180deg); }

.team-card.flipped .card-face.card-front { position: absolute; }
.team-card.flipped .card-face.card-back  { position: relative; }

.card-back-content {
  height: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 9px;
  color: var(--mi-text-primary);
}
.card-back-content h3 { margin: 0 0 4px; font-size: 10px; }

.back-line { margin: 2px 0; font-size: 8px; color: #cbd5f5; line-height: 1.4; }
.back-helper { margin-top: auto; font-size: 7.5px; color: var(--mi-text-muted); opacity: 0.9; }


/* ========== TEAM CARD HEADER (3.91) ========== */
.team-card-header { 
  position: relative; 
  margin: -4px -4px 6px;
  padding: 10px 12px 9px; 
  border-radius: 14px 14px 10px 10px; 
  display: flex;
  flex-direction: column; 
  align-items: center; 
  gap: 4px; 
  text-align: center; 
  overflow: hidden; 
} 

/* Tighten team title vertical space (override UA h2 margins) */
.team-card-header h2,
.team-card-header h2#teamATitle,
.team-card-header h2#teamBTitle{
  margin: 0;              /* kills UA 0.83em margins */
  line-height: 1.12;      /* tighten height without shrinking text */
  padding: 0;
}

.team-card-header::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), transparent 60%);
  opacity: 1;
  z-index: 0;
}

.team-card-header:has(.cind-tag)::before { 
  background: radial-gradient(circle at center, rgba(34, 197, 94, 0.28), rgba(15, 23, 42, 0.98) 70%); 
} 

.team-card-header:has(.fav-tag)::before { 
  background: linear-gradient(90deg, rgba(249, 115, 22, 0.28), rgba(15, 23, 42, 0.98) 70%); 
} 

.team-card-header:has(.chalk-tag)::before{ 
  background: radial-gradient(circle at center, rgba(var(--mi-role-chalk-mirror-rgb), 0.28), rgba(15, 23, 42, 0.98) 70%); 
} 

.team-card-header:has(.chaos-tag)::before{ 
  background: radial-gradient(circle at center, rgba(var(--mi-role-chaos-mirror-rgb), 0.28), rgba(15, 23, 42, 0.98) 70%); 
} 

.team-card-header:has(.neutral-tag)::before{ 
  background: radial-gradient(circle at center, rgba(var(--mi-role-neutral-mirror-rgb), 0.28), rgba(15, 23, 42, 0.98) 70%); 
} 

.team-card-header > * { position: relative; z-index: 1; }


/* Role label (text-first) */
.team-role-pill,
.cind-tag,
.fav-tag,
.chalk-tag,
.chaos-tag,
.neutral-tag{
  background: transparent;
  border: none;
  padding: 0;
  border-radius: 0;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
}

/* Role colors */
.cind-tag    { color: var(--mi-role-cinderella); }
.fav-tag     { color: var(--mi-role-favorite); }
.chalk-tag   { color: var(--mi-role-chalk-mirror); }
.chaos-tag   { color: var(--mi-role-chaos-mirror); }
.neutral-tag { color: var(--mi-role-neutral-mirror); }

/* Team title (add mirror-aware glow like fav/cind) */
.team-card-header:has(.fav-tag) h2{
  text-shadow: 0 0 8px rgba(249, 115, 22, 0.45), 0 0 14px rgba(249, 115, 22, 0.35);
}
.team-card-header:has(.cind-tag) h2{
  text-shadow: 0 0 8px rgba(34, 197, 94, 0.45), 0 0 14px rgba(34, 197, 94, 0.35);
}
.team-card-header:has(.chalk-tag) h2{
  text-shadow: 0 0 8px rgba(var(--mi-role-chalk-mirror-rgb), 0.45),
               0 0 14px rgba(var(--mi-role-chalk-mirror-rgb), 0.35);
}
.team-card-header:has(.chaos-tag) h2{
  text-shadow: 0 0 8px rgba(var(--mi-role-chaos-mirror-rgb), 0.45),
               0 0 14px rgba(var(--mi-role-chaos-mirror-rgb), 0.35);
}
.team-card-header:has(.neutral-tag) h2{
  text-shadow: 0 0 8px rgba(var(--mi-role-neutral-mirror-rgb), 0.45),
               0 0 14px rgba(var(--mi-role-neutral-mirror-rgb), 0.35);
}

/* Header behavior pre/post compare */
.app-shell:not(.has-matchup) .team-card-header h2{ display:none; }

.app-shell:not(.has-matchup) .team-card-header .team-role-pill,
.app-shell:not(.has-matchup) .team-card-header .cind-tag,
.app-shell:not(.has-matchup) .team-card-header .fav-tag,
.app-shell:not(.has-matchup) .team-card-header .chalk-tag,
.app-shell:not(.has-matchup) .team-card-header .chaos-tag,
.app-shell:not(.has-matchup) .team-card-header .neutral-tag{
  letter-spacing: 0.26em;
  margin-top: 2px;
}

.app-shell.has-matchup .team-card-header h2{ display:block; }

.app-shell.has-matchup .team-card-header .team-role-pill,
.app-shell.has-matchup .team-card-header .cind-tag,
.app-shell.has-matchup .team-card-header .fav-tag,
.app-shell.has-matchup .team-card-header .chalk-tag,
.app-shell.has-matchup .team-card-header .chaos-tag,
.app-shell.has-matchup .team-card-header .neutral-tag{
  letter-spacing: 0.22em;
  margin-top: 0;
}

/* Hide seed label if still present */
.seed-label { display: none; }

/* ========== INSIDE TEAM CARD LAYOUT ========== */

.team-card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Bottom row: Identity + Resume */
.team-card-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 6px;
}

/* Marks row */
.team-card-marks {
  margin-top: 10px;
  position: relative;
  overflow: visible !important;
  display: block;
  background: transparent;
}

/* ========== MINI FLIP TILE SYSTEM (GLOBAL) ========== */

.flip-tile {
  position: relative;
  cursor: pointer;
  perspective: 1200px;
}

.flip-tile-inner {
  position: relative;
  width: 100%;
  transform-style: preserve-3d;
  transition: transform 0.35s ease;
}

.flip-tile.flipped .flip-tile-inner { transform: rotateY(180deg); }

.tile-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
}

.tile-face.tile-front {
  position: relative;
  padding: 9px 9px 8px;
}

.tile-face.tile-back {
  transform: rotateY(180deg);
  padding: 10px 10px 9px;
  border-radius: 12px;
  background: rgba(9, 9, 15, 0.98);
  border: 1px solid rgba(31, 41, 55, 0.98);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ========== CORE TRAITS SECTION (PLATE + TABLE) ========== */
section.profile-section.flip-tile{
  /* JS writes --mi-profile-sync-h on both sections */
  min-height: var(--mi-profile-sync-h, auto);
}

.profile-section{
  margin: 4px 4px 2px 4px;
  padding: 9px 9px 8px;
  border-radius: 12px;
  min-height: 60px;

  background:
    linear-gradient(180deg, rgba(255,255,255,0.03), transparent 60%),
    rgba(0,0,0,0.18);

  border: 1px solid var(--mi-line-weak);
  box-shadow: none;
  position: relative;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.section-header h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--mi-text-primary);
}

/* Remove legacy Explain buttons (if still present) */
.explain-toggle { display: none; }

/* Core traits table */
.explain-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-bottom: 9px;
  font-size: 12.5px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(148,163,184,0.20);
  line-height: 1.2;
  border-radius: 12px;
  background: rbga(2, 6, 23, 0.55);
  box-shadow:
    0 10px 20px rgba(0,0,0,0.35),
    0 0 0 1px var(--mi-brand-blue-a12) inset;
}

.explain-table thead {
  background: radial-gradient(circle at top, rgba(15, 23, 42, 0.98), rgba(2, 6, 23, 1));
}

.explain-table th,
.explain-table td {
  padding: 7px 9px;
  border-bottom: 2px solid var(--mi-brand-blue-a45);
  border-right: 2px solid var(--mi-brand-blue-a28);
  text-align: center;
  vertical-align: middle;
}

.explain-table th:last-child,
.explain-table td:last-child { border-right: none; }

.explain-table tr:last-child td { border-bottom: none; }

.explain-table td:first-child,
.explain-table th:first-child { text-align: left; }

.explain-table th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: rgba(226,232,240,0.88);
  font-weight: 700;
}

/* Sticky header */
.explain-table thead th {
  position: sticky;
  top: 0;
  background: rgba(5, 9, 20, 0.98);
  border-bottom: 2px solid var(--mi-brand-blue-a28);
  z-index: 4;
}

/* === Scanning improvements: striping, hover, numeric alignment === */
.explain-table tbody tr:nth-child(odd){
  background: rgba(255,255,255,0.015);
}
.explain-table tbody tr:nth-child(even){
  background: rgba(0,0,0,0.10);
}
.explain-table tbody tr:hover{
  background: var(--mi-brand-blue-a08);
}

/* Column-specific scan rules */
.explain-table td:nth-child(3),  /* TEAM VALUE */
.explain-table td:nth-child(5){  /* POINTS GIVEN */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: 0.02em;
}

.explain-table td:nth-child(3){
  font-weight: 700;              /* Team Value pops */
  color: rgba(241,245,249,0.92);
}

.explain-table td:nth-child(5){
  font-weight: 600;
  color: rgba(226,232,240,0.90);
}

/* Thresholds column: make multi-line content easier to read */
.explain-table td:nth-child(2){
  font-size: 12px;
  line-height: 1.25;
  color: rgba(226,232,240,0.72);
}

/* Category column: slightly stronger label */
.explain-table td:first-child{
  color: rgba(241,245,249,0.88);
}

/* Tier coloring classes */
.tier-Elite   { color: var(--mi-accent-cyan); background: radial-gradient(circle, rgba(56,189,248,0.18), transparent); }
.tier-Strong  { color: #4ade80;               background: radial-gradient(circle, rgba(16,185,129,0.18), transparent); }
.tier-Average { color: var(--mi-text-primary); }
.tier-Weak    { color: #fb923c;               background: radial-gradient(circle, rgba(251,146,60,0.14), transparent); }
.tier-Fragile { color: var(--mi-accent-red);  background: radial-gradient(circle, rgba(239,68,68,0.14), transparent); }

.metric-block { font-weight: 600; color: #d1e9ff; }

/* Optional rule-row tints */
.rule-row.hit     { background: linear-gradient(to right, rgba(22, 163, 74, 0.14), transparent); }
.rule-row.neg     { background: linear-gradient(to right, rgba(248, 113, 22, 0.16), transparent); }
.rule-row.neutral { background: rgba(2, 6, 23, 0.98); }

/* Back face styling */
.profile-section.flip-tile .tile-face.tile-back {
  padding: 9px 9px 8px;
  border-radius: 12px;
  background: rgba(9, 9, 15, 0.98);
  border: 1px solid rgba(31, 41, 55, 0.98);
}

/* Back-of-core layout */
.core-back-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.core-back-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.core-back-item {
  padding: 6px 0 8px;
  background: transparent;
  border: none;
  box-shadow: none;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}
.core-back-item:last-child { border-bottom: none; }

.core-back-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.4rem;
  margin-bottom: 4px;
}

.core-back-metric {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mi-text-primary);
}

.core-back-tier {
  font-size: 12px;
  font-weight: 800;
  padding: 1px 8px;
  border-radius: var(--mi-radius-pill);
  background: rgba(37, 99, 235, 0.18);
  color: #bfdbfe;
  white-space: nowrap;
}

.core-back-text {
  color: var(--mi-text-soft);
  font-size: 10px;
  line-height: 1.45;
}

/* If you include a breadth line under core text */
.core-back-breadth {
  margin-top: 6px;
  font-size: 12px;
  color: var(--mi-text-primary);
  opacity: 0.9;
}

/* =========================================
   Core back tile — MI Efficiency section
   ========================================= */

.core-back-eff-section{
  position: relative;
  margin-top: 10px;
  padding-top: 16px;
}

.core-back-eff-section::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(148, 163, 184, 0),
    rgba(148, 163, 184, 0.32),
    rgba(148, 163, 184, 0)
  );
}

.core-back-eff-label{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin: 0 0 8px;
  padding: 4px 10px;

  border-radius: 999px;
  border: 1px solid rgba(23, 95, 195, 0.28);
  background: rgba(23, 95, 195, 0.10);

  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.88);
}

.core-back-eff-list{
  margin-top: 0;
}

.core-back-eff-item .core-back-header{
  margin-bottom: 3px;
}

.core-back-eff-item .core-back-metric{
  color: rgba(229, 231, 235, 0.96);
}

.core-back-eff-item[data-band="strong_positive"] .core-back-metric{
  color: #67e8f9;
}

.core-back-eff-item[data-band="positive"] .core-back-metric{
  color: #bfdbfe;
}

.core-back-eff-item[data-band="neutral"] .core-back-metric{
  color: rgba(229, 231, 235, 0.96);
}

.core-back-eff-item[data-band="negative"] .core-back-metric{
  color: #fdba74;
}

.core-back-eff-item[data-band="strong_negative"] .core-back-metric{
  color: #fca5a5;
}

/* =========================================
   Core back tile — sectioned layout
   ========================================= */

.core-back-container{
  display:flex;
  flex-direction:column;
  gap:0;
}

.core-back-main-section{
  position:relative;
}

.core-back-main-label,
.core-back-eff-label{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  margin: 0 0 10px;
  padding: 4px 10px;

  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
}

.core-back-main-label{
  border: 1px solid rgba(148, 163, 184, 0.22);
  background:
    linear-gradient(180deg, rgba(148,163,184,0.10), rgba(148,163,184,0.04));
  color: rgba(241,245,249,0.86);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 0 0 1px rgba(255,255,255,0.015);
}

.core-back-eff-section{
  position:relative;
  margin-top: 14px;
  padding-top: 20px;
}

.core-back-eff-section::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:2px;
  border-radius:999px;
  background:
    linear-gradient(
      90deg,
      rgba(37,99,235,0),
      rgba(56,189,248,0.24) 16%,
      rgba(96,165,250,0.72) 50%,
      rgba(56,189,248,0.24) 84%,
      rgba(37,99,235,0)
    );
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.02),
    0 0 14px rgba(37,99,235,0.24),
    0 0 28px rgba(56,189,248,0.12);
}

.core-back-eff-label{
  border: 1px solid rgba(23, 95, 195, 0.34);
  background:
    linear-gradient(180deg, rgba(23,95,195,0.16), rgba(23,95,195,0.08));
  color: rgba(226,232,240,0.92);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 0 18px rgba(23,95,195,0.10);
}

.core-back-list{
  list-style:none;
  margin:0;
  padding:0;
}

.core-back-main-section .core-back-list{
  margin-bottom: 2px;
}

.core-back-eff-list{
  margin-top: 2px;
}

.core-back-item{
  padding: 6px 0 8px;
  background: transparent;
  border: none;
  box-shadow: none;
  border-bottom: 1px solid rgba(148,163,184,0.18);
}

.core-back-item:last-child{
  border-bottom:none;
}

.core-back-header{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:0.4rem;
  margin-bottom:4px;
}

.core-back-metric{
  font-size:12px;
  font-weight:800;
  letter-spacing:0.03em;
  text-transform:uppercase;
  color:rgba(241,245,249,0.94);
}

.core-back-tier{
  flex:0 0 auto;
  font-size:10px;
  font-weight:800;
  letter-spacing:0.03em;
  color:#dbeafe;
  background:rgba(30,64,175,0.42);
  border:1px solid rgba(96,165,250,0.24);
  border-radius:999px;
  padding:2px 8px;
}

.core-back-text{
  font-size:12px;
  line-height:1.45;
  color:rgba(191,203,221,0.88);
}

.core-back-eff-item .core-back-header{
  margin-bottom: 4px;
}

.core-back-eff-item .core-back-metric{
  color: rgba(229,231,235,0.96);
}

.core-back-eff-item[data-band="strong_positive"] .core-back-metric{
  color:#67e8f9;
}

.core-back-eff-item[data-band="positive"] .core-back-metric{
  color:#bfdbfe;
}

.core-back-eff-item[data-band="neutral"] .core-back-metric{
  color:rgba(229,231,235,0.96);
}

.core-back-eff-item[data-band="negative"] .core-back-metric{
  color:#fdba74;
}

.core-back-eff-item[data-band="strong_negative"] .core-back-metric{
  color:#fca5a5;
}

/* ========== CONTEXT TILES (IDENTITY / RESUME / MARKS / MI) ========== */

.context-tile {
  margin-top: 1px;
  margin-bottom: 1px;
  padding: 6px 6px 5px;
  border-radius: 12px;
  background: rgba(2, 6, 23, 0.98);
  border: 1px solid rgba(31, 41, 55, 0.98);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.30), 0 0 0 1px rgba(15, 23, 42, 1) inset;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}

/* Bottom tiles get the “outer plate (T2) + inner card (T1)” look */
.team-card-bottom .context-tile.flip-tile,
.team-card-marks  .context-tile.flip-tile,
.madness-tile.flip-tile {
  padding: 7px 6px 6px;
  border-radius: 12px;
  background: rgba(2, 6, 23, 0.98);
  border: 1px solid rgba(31, 41, 55, 0.98);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.30), 0 0 0 1px rgba(15, 23, 42, 1) inset;
}

/* Inner card (T1) */
.team-card-bottom .context-tile.flip-tile .flip-tile-inner,
.team-card-marks  .context-tile.flip-tile .flip-tile-inner,
.madness-tile.flip-tile .flip-tile-inner {
  border-radius: 10px;
  background: radial-gradient(circle at top, rgba(15, 23, 42, 0.98), rgba(15, 23, 42, 0.94));
  border: 1px solid rgba(30, 64, 175, 0.7);
}

/* Ensure compact tiles have a stable minimum height */
.team-card-bottom .flip-tile-inner { min-height: 115px; }
.team-card-marks  .flip-tile-inner { min-height: 115px; }
.madness-tile      .flip-tile-inner { min-height: 115px; }

/* Context header rows */
.context-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
}
.context-label {
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--mi-text-primary);
}
.context-score {
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--mi-accent-cyan);
}

/* Hide subrows ONLY where we don't want them (identity/resume) */
.team-card-bottom .context-subrow {
  display: none;
}

/* But SHOW the subrow in Profile Marks (this is where the badges live) */
.team-card-marks .context-subrow {
  display: block;
}

/* Center FRONT faces for identity/resume/marks/mi */
.context-tile.flip-tile .tile-front {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  height: 100%;
}

/* ========== IDENTITY TILE (CIS / FAS) ========== */

.identity-subrow { display: none; }

.identity-tile .context-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
}

.identity-tile .context-label {
  font-weight: 700;
}

.identity-tile .context-score {
  font-weight: 900;
}

.identity-tile .tile-face.tile-front {
  padding: 8px 10px 9px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Cinderella identity glow */
.identity-tile.identity-cinderella .tile-face.tile-front {
  background: radial-gradient(circle at top, rgba(34, 197, 94, 0.26), rgba(15, 23, 42, 0.98));
  border: 1px solid rgba(34, 197, 94, 0.75);
  box-shadow: 0 10px 32px rgba(15, 23, 42, 0.95), 0 0 26px rgba(34, 197, 94, 0.70);
}
.identity-tile.identity-cinderella .context-score {
  color: #bbf7d0;
  text-shadow: 0 0 16px rgba(34, 197, 94, 0.85), 0 0 34px rgba(56, 189, 248, 0.55);
}

/* Favorite identity glow */
.identity-tile.identity-favorite .tile-face.tile-front {
  background: radial-gradient(circle at top, rgba(249, 115, 22, 0.22), rgba(15, 23, 42, 0.98));
  border: 1px solid rgba(249, 115, 22, 0.8);
  box-shadow: 0 10px 32px rgba(15, 23, 42, 0.95), 0 0 26px rgba(249, 115, 22, 0.65);
}
.identity-tile.identity-favorite .context-score {
  color: #fed7aa;
  text-shadow: 0 0 16px rgba(249, 115, 22, 0.9), 0 0 34px rgba(248, 171, 76, 0.7);
}

/* ========== RESUME TILE (TIERED GLOW) ========== */

#resumeTileA .context-header,
#resumeTileB .context-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
}

#resumeTileA .context-score,
#resumeTileB .context-score {
  font-weight: 900;
}

#resumeTileA .context-label,
#resumeTileB .context-label {
  font-size: 16px;
  letter-spacing: 0.1em;
}

#resumeTileA .context-note,
#resumeTileB .context-note { opacity: 0.9; text-align: right; }

/* Resume tile front face — ensure rounded borders */
.context-tile .tile-face.tile-front {
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;              /* even vertical spacing like identity */
  text-align: center;
  padding: 18px 16px;     /* matches the “breathing room” identity has */
}

/* Tier classes applied by JS on .context-tile */
.context-tile.resume-tier-strong .tile-face.tile-front {
  background: radial-gradient(circle at top, rgba(34, 197, 94, 0.22), rgba(15, 23, 42, 0.98));
  border: 1px solid rgba(34, 197, 94, 0.9);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.95), 0 0 20px rgba(34, 197, 94, 0.7);
}
.context-tile.resume-tier-strong .context-score {
  color: #bbf7d0;
  text-shadow: 0 0 14px rgba(34, 197, 94, 0.9), 0 0 26px rgba(56, 189, 248, 0.6);
}

.context-tile.resume-tier-above .tile-face.tile-front {
  background: radial-gradient(circle at top, rgba(34, 197, 94, 0.16), rgba(15, 23, 42, 0.98));
  border: 1px solid rgba(34, 197, 94, 0.7);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.9), 0 0 16px rgba(34, 197, 94, 0.45);
}
.context-tile.resume-tier-above .context-score { color: #a7f3d0; }

.context-tile.resume-tier-average .tile-face.tile-front {
  background: radial-gradient(circle at top, rgba(59, 130, 246, 0.12), rgba(15, 23, 42, 0.98));
  border: 1px solid rgba(59, 130, 246, 0.55);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.85), 0 0 12px rgba(59, 130, 246, 0.35);
}
.context-tile.resume-tier-average .context-score { color: #bfdbfe; }

.context-tile.resume-tier-weak .tile-face.tile-front {
  background: radial-gradient(circle at top, rgba(234, 88, 12, 0.16), rgba(15, 23, 42, 0.98));
  border: 1px solid rgba(234, 88, 12, 0.9);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.9), 0 0 18px rgba(234, 88, 12, 0.6);
}
.context-tile.resume-tier-weak .context-score { color: #fed7aa; }

.context-tile.resume-tier-fragile .tile-face.tile-front {
  background: radial-gradient(circle at top, rgba(248, 113, 113, 0.2), rgba(15, 23, 42, 0.98));
  border: 1px solid rgba(239, 68, 68, 0.95);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.95), 0 0 22px rgba(239, 68, 68, 0.7);
}
.context-tile.resume-tier-fragile .context-score { color: #fecaca; }

/* ========== PROFILE MARKS TILE (UNIFORM CHIPS) ========== */

.team-card-marks .context-tile { width: 100%; }

/* Title area (if your HTML uses .marks-header / .marks-subtitle) */
.team-card-marks .marks-header {
  width: 100%;
  align-items: flex-start;
  justify-content: center;
  margin-bottom: 6px;
  display: flex;
  text-align: center;
  gap: 8px;
}

.team-card-marks .marks-header-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.team-card-marks .marks-header .context-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 800;
  color: var(--mi-text-primary);
}

.team-card-marks .marks-subtitle {
  font-size: 10px;
  font-weight: 500;
  color: var(--mi-text-muted);
  opacity: 0.9;
}

/* Chips container */
.inline-marks-strip{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;

  gap: 10px 10px;
  overflow: visible;

  padding: 8px 0 6px;
}

/* Profile Marks tile: semantic front rows (header fixed, body flexible) */
.inline-marks-tile .tile-front .marks-front{
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr; /* header row + content row */
  align-content: start;
}

.inline-marks-tile .tile-front .marks-front-body{
  min-height: 0; /* prevents overflow/clip weirdness in grid */
}

/* Chip — deterministic footprint */
.mark-chip{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;

  /* Key: uniform tile size */
  flex: 0 0 118px;     /* fixed column width in the strip */
  width: 118px;
  height: 118px;

  padding: 12px 10px;
  border-radius: 18px;

  background: rgba(15, 23, 42, 0.55);

  box-shadow:
    inset 0 0 15px rgba(255, 255, 255, 0.06),
    0 0 18px rgba(56, 189, 248, 0.25);

  border: 1px solid rgba(255, 255, 255, 0.08);

  transition: transform 0.15s ease, box-shadow 0.2s ease;
}

/* Chip title — lock to 2 lines so every chip reserves the same space */
.mark-chip .mark-title,
.mark-chip h4,
.mark-chip .chip-title{
  margin-top: 8px;
  line-height: 1.08;

  text-align: center;
  font-weight: 800;

  /* Two-line clamp */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  overflow: hidden;

  /* Keeps the visual height stable even when title is short */
  min-height: calc(1.08em * 2);
}

/* Optional: slightly smaller icon wrapper (if you have one) */
.mark-chip .mark-icon,
.mark-chip .chip-icon{
  width: 52px;
  height: 52px;
  border-radius: 14px;
}

.mark-chip:hover {
  transform: translateY(-3px);
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.08), 0 0 24px rgba(56, 189, 248, 0.35);
}

.mark-chip.severe {
  border-color: rgba(248, 113, 113, 0.8);
  box-shadow: inset 0 0 20px rgba(248, 113, 113, 0.2), 0 0 28px rgba(248, 113, 113, 0.6);
}

.mark-chip.moderate {
  border-color: rgba(250, 204, 21, 0.8);
  box-shadow: inset 0 0 20px rgba(250, 204, 21, 0.2), 0 0 26px rgba(250, 204, 21, 0.55);
}

.mark-icon-plate {
  width: 68px;
  height: 68px;
  border-radius: 18px;
  padding: 16px 14px;
  display: flex;
  align-items: center;
  justify-content: center;

  background: radial-gradient(circle at 40% 40%, rgba(56, 189, 248, 0.35), rgba(2, 6, 23, 0.95));
  box-shadow: inset 0 0 14px rgba(255, 255, 255, 0.10), 0 0 12px rgba(56, 189, 248, 0.40);
}

.mark-chip .mark-badge {
  width: 66px;
  height: 66px;
  opacity: 0.98;
}

.mark-info { text-align: center; margin-top: 8px; }
.mark-title { font-weight: 800; color: #f9fafb; }
.mark-subtext { line-height: 1.15; margin-top: 2px; color: var(--mi-text-primary); opacity: 0.75; }

/* ==========================================
   PROFILE MARKS — BACK FACE (summary + list)
   ========================================== */

/* The <p> (or container) that holds the injected spans */
#backMarksTileA,
#backMarksTileB{
  /* Keep it “broadcast readable” */
  line-height: 1.35;
  letter-spacing: 0.01em;
}

/* Summary sentence */
.mi-marks-back-summary{
  display: block;
  font-size: 13px;
  color: rgba(249,246,238,0.92);
  margin: 0 0 10px 0;
  text-align: center;
}

/* Divider (real element, so style it like a thin rule) */
.mi-marks-back-divider{
  display: block;
  height: 3px;
  margin: 8px 0 12px 0;

  background:
    linear-gradient(
      to right,
      transparent,
      rgba(249,246,238,0.45),
      transparent
    );

  box-shadow:
    0 1px 0 rgba(0,0,0,0.55);
}

/* List wrapper */
.mi-marks-back-list{
  display: block;
  text-align: center;
}

/* Each mark row: name | severity | description */
.mi-marks-back-row{
  display: grid;
  grid-template-columns: 140px 1fr;
  align-items: start;
  column-gap: 14px;
  row-gap: 0;
  padding: 2px 0;
  border-top: 1px solid rgba(249,246,238,0.14);
}

.mi-marks-back-list .mi-marks-back-row:first-child{
  border-top: none;
}

/* When you’re still using <br>, give it breathing room */
.mi-marks-back-list br{
  display: block;
  content: "";
  margin: 2px 0;
  background: none;
}

/* Mark name */
.mi-marks-back-name{
  grid-column: 1;
  grid-row: 1;
  font-size: 13px;
  font-weight: 700;
  color: rgba(249,246,238,0.95);
  white-space: normal;
  line-height: 1.15;
}

/* Severity as a compact “pill” */
.mi-marks-back-sev{
  grid-column: 1;
  grid-row: 2;
  justify-self: center;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;

  padding: 2px 8px;
  border-radius: 999px;

  border: 1px solid rgba(249,246,238,0.18);
  background: rgba(249,246,238,0.08);
  color: rgba(249,246,238,0.78);
}

/* Description */
.mi-marks-back-desc{
  grid-column: 2;
  grid-row: 1 / span 2;
  font-size: 12px;
  color: rgba(249,246,238,0.75);
  opacity: 0.95;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.35;
}

/* Severity-driven accents using your existing role tokens */
.mi-marks-back-row[data-severity="severe"] .mi-marks-back-sev{
  color: var(--mi-role-chaos-mirror);
  border-color: rgba(var(--mi-role-chaos-mirror-rgb), 0.55);
  background: rgba(var(--mi-role-chaos-mirror-rgb), 0.14);
}

.mi-marks-back-row[data-severity="moderate"] .mi-marks-back-sev{
  color: var(--mi-role-favorite);
  border-color: rgba(var(--mi-role-favorite-rgb), 0.55);
  background: rgba(var(--mi-role-favorite-rgb), 0.14);
}

/* Optional: subtle row separators for “ticker” rhythm */
.mi-marks-back-row + br + .mi-marks-back-row{
  border-top: 1px solid rgba(249,246,238,0.08);
}

/* Cleaner row separators (works regardless of <br>) */
.mi-marks-back-row{
  border-top: 1px solid rgba(249,246,238,0.08);
}
.mi-marks-back-list .mi-marks-back-row:first-child{
  border-top: none;
}

.mi-marks-back-row[data-severity="severe"]{
  border-top: 1px solid rgba(var(--mi-role-chaos-mirror-rgb), 0.22);
}

.mi-marks-back-row[data-severity="moderate"]{
  border-top: 1px solid rgba(var(--mi-role-favorite-rgb), 0.18);
}

/* ==========================================
   PROFILE MARKS — BACK: content-aware scroll
   ========================================== */

/* Subtle scrollbar (Chromium/Safari) */
#backMarksTileA::-webkit-scrollbar,
#backMarksTileB::-webkit-scrollbar{
  width: 8px;
}
#backMarksTileA::-webkit-scrollbar-track,
#backMarksTileB::-webkit-scrollbar-track{
  background: rgba(249,246,238,0.06);
  border-radius: 999px;
}
#backMarksTileA::-webkit-scrollbar-thumb,
#backMarksTileB::-webkit-scrollbar-thumb{
  background: rgba(249,246,238,0.18);
  border-radius: 999px;
}
#backMarksTileA::-webkit-scrollbar-thumb:hover,
#backMarksTileB::-webkit-scrollbar-thumb:hover{
  background: rgba(249,246,238,0.26);
}

/* Firefox */
#backMarksTileA,
#backMarksTileB{
  scrollbar-width: thin;
  scrollbar-color: rgba(249,246,238,0.22) rgba(249,246,238,0.06);
}

/* Fade cue ONLY when the tile actually overflows */
#backMarksTileA.has-scroll,
#backMarksTileB.has-scroll{
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 88%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 88%, transparent 100%);
}

/* =========================================================
   PROFILE MARKS HEADER — allow matchup-kicker to fully apply
   ========================================================= */
#cindCard .marks-header-text.matchup-kicker,
#favCard  .marks-header-text.matchup-kicker{
  all: unset;
  display: inline-flex;
}

/* ========== MADNESS INDEX TILE (FRAME + INNER) ========== */

.madness-tile {
  padding: 1px; /* thin frame */
  background: linear-gradient(135deg, var(--mi-brand-blue-a28, 0.75), rgba(56,189,248,0.24));
  border-radius: 12px;
}

.madness-tile .flip-tile-inner {
  border-radius: 12px;
  background: radial-gradient(circle at top, rgba(15,23,42,0.98), rgba(15,23,42,0.94));
  padding: 0;
}

.madness-tile {
  display: none;
}

/* Stacked total row (label + pill centered) */
.team-total-row {
  margin-top: 8px;
  padding: 14px 10px;
  border-radius: 12px;
  background: radial-gradient(circle at top, rgba(56, 189, 248, 0.18), rgba(9, 9, 15, 1));
  border: 1px solid rgba(129, 140, 248, 0.9);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 11px;
}

.team-total-row span:first-child {
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--mi-text-muted);
  text-align: center;
  width: 100%;
}

.team-total-row .team-total-value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  padding: 6px 16px;
  border-radius: var(--mi-radius-pill);

  font-weight: 900;
  letter-spacing: 0.10em;

  background:
    radial-gradient(circle at 0% 0%, rgba(34, 197, 94, 0.65), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(56, 189, 248, 0.45), transparent 55%);
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.5), 0 0 24px rgba(59, 130, 246, 0.4);

  color: #bbf7d0;
}

/* ========== DEBUG PANEL (OPTIONAL) ========== */

.debug-card { margin-bottom: 10px; font-size: 8px; color: var(--mi-text-muted); }
.debug-card.hidden { display: none; }

.debug-content {
  margin-top: 4px;
  padding: 6px;
  border-radius: 8px;
  background: rgba(2, 6, 23, 1);
  border: 1px solid rgba(31, 41, 55, 1);
  font-family: ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 7px;
  white-space: pre;
  overflow-x: auto;
}

/* ========== SCORECARD GLOBAL SCALE (3.4) ========== */

.team-card {
  font-size: calc(16px * var(--mi-scale-scorecard));
}

/* Header sizes */
.team-card-header .team-role-pill,
.team-card-header .cind-tag,
.team-card-header .fav-tag {
  font-size: calc(18px * var(--mi-scale-scorecard));
}

.team-card-header h2 {
  font-size: calc(28px * var(--mi-scale-scorecard));
}

/* ==========================================
   CORE TRAITS TABLE — typography + row styling
   Scoped to cind/fav cards (both)
   Paste AFTER the existing .explain-table block
   ========================================== */
.explain-table th,
.explain-table td {
  font-size: calc(13px * var(--mi-scale-scorecard));
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  transition: background 140ms ease, box-shadow 140ms ease;
  line-height: 1.25;
  background: rgba(2, 6, 23, 0.22);
  color: rgba(226, 232, 240, 0.88);

  text-align: center;
  vertical-align: middle;

  table-layout: fixed;
  width: 100%;
}

/* Column widths: 1=Category, 2=Thresholds, 3=Team Value, 4=Tier, 5=Points Given */
.explain-table th:nth-child(1),
.explain-table td:nth-child(1),
.explain-table th:nth-child(1),
.explain-table td:nth-child(1){
  width: 28%;
  text-align: center;
  vertical-align: middle;
}

.explain-table th:nth-child(2),
.explain-table td:nth-child(2),
.explain-table th:nth-child(2),
.explain-table td:nth-child(2){
  width: 16%;
}

#cindCard .explain-table th:nth-child(3),
#cindCard .explain-table td:nth-child(3),
#favCard  .explain-table th:nth-child(3),
#favCard  .explain-table td:nth-child(3){
  width: 17%;
}

.explain-table th:nth-child(4),
.explain-table td:nth-child(4),
.explain-table th:nth-child(4),
.explain-table td:nth-child(4){
  width: 18%;
}

.explain-table th:nth-child(5),
.explain-table td:nth-child(5),
.explain-table th:nth-child(5),
.explain-table td:nth-child(5){
  width: 17%;
}

#cindCard .tile-face.tile-front,
#favCard  .tile-face.tile-front {
  padding-top: 1px; /* example */
}

.explain-table tbody tr:hover,
.explain-table tbody tr:hover{
  background: rgba(56, 189, 248, 0.06);
}

explain-table td:first-child,
explain-table td:first-child{
  font-weight: 700;              /* Category column */
  color: rgba(226, 232, 240, 0.94);
}

.explain-table td:nth-child(2),
.explain-table td:nth-child(2){
  color: rgba(226, 232, 240, 0.72);
  font-size: 11.5px;
}

/* Column widths: 1=Battlefield, 2=Field Spread, 3=Team Score, 4=Tier, 5=Points */
.explain-table th:nth-child(1),
.explain-table td:nth-child(1){
  width: 30%;
  text-align: center;
  vertical-align: middle;
}

.explain-table th:nth-child(2),
.explain-table td:nth-child(2){
  width: 17%;
}

.explain-table th:nth-child(3),
.explain-table td:nth-child(3){
  width: 18%;
}

.explain-table th:nth-child(4),
.explain-table td:nth-child(4){
  width: 17%;
}

.explain-table th:nth-child(5),
.explain-table td:nth-child(5){
  width: 18%;
}

/* Context tiles */
.context-label { 
  font-size: 14px;
  letter-spacing: 0.1em;
}

.context-score { font-size: calc(22px * var(--mi-scale-scorecard)); }
.context-tier,
.context-desc,
.context-subrow { font-size: calc(11px * var(--mi-scale-scorecard)); }

/* Marks */
.team-card-marks .marks-subtitle { font-size: calc(10px * var(--mi-scale-scorecard)); }
.mark-title   { font-size: calc(14px * var(--mi-scale-scorecard)); }
.mark-subtext { font-size: calc(11px * var(--mi-scale-scorecard)); }

/* Core back text */
.core-back-text { font-size: calc(13px * var(--mi-scale-scorecard)); }

/* Total row */
.team-total-row span:first-child { font-size: calc(11px * var(--mi-scale-scorecard)); }
.team-total-row .team-total-value { font-size: calc(30px * var(--mi-scale-scorecard)); }

/* 3.4 — Remove the "Explanation:" header on ALL mini flip-tile backs */
.context-tile.flip-tile .tile-face.tile-back h4,
.madness-tile.flip-tile .tile-face.tile-back h4 {
  display: none !important;
}

/* Optional: tighten spacing now that the header is gone */
.context-tile.flip-tile .tile-face.tile-back,
.madness-tile.flip-tile .tile-face.tile-back {
  gap: 4px;
}

/* ===============================
   IDENTITY + RÉSUMÉ TILE BACKS
   (bigger, readable, consistent)
   =============================== */

/* Back face layout (identity + resume only) */
#identityTileA .tile-face.tile-back,
#identityTileB .tile-face.tile-back,
#resumeTileA   .tile-face.tile-back,
#resumeTileB   .tile-face.tile-back {
  padding: 4px 4px 4px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 10px;
  text-align: left;
  align-items: stretch;
  overflow: hidden;
}

/* Main paragraph text */
#identityTileA .tile-face.tile-back .back-line,
#identityTileB .tile-face.tile-back .back-line,
#resumeTileA   .tile-face.tile-back .back-line,
#resumeTileB   .tile-face.tile-back .back-line {
  padding-top: 4px;
  font-size: 12px;
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: rgba(229, 231, 235, 0.92);
  margin: 0;
  text-align: center;
}

/* Helper line */
#identityTileA .tile-face.tile-back .back-helper,
#identityTileB .tile-face.tile-back .back-helper,
#resumeTileA   .tile-face.tile-back .back-helper,
#resumeTileB   .tile-face.tile-back .back-helper {
  display: none;
}

/* Résumé back has an h4 ("Explanation:") — make it match the system */
#resumeTileA .tile-face.tile-back h4,
#resumeTileB .tile-face.tile-back h4 {
  margin: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(191, 219, 254, 0.9);
}

/* Step tiles: prevent status pill collisions */
.pre-step{
  align-items: flex-start;        /* was effectively center */
  padding-right: 12px;            /* remove the big reserved space */
  padding-top: 14px;
  padding-bottom: 14px;
}

.pre-step-text{
  flex: 1;                        /* allow text to take remaining room */
  min-width: 0;                   /* critical: allows wrapping inside grid */
}

.pre-step-status{
  top: 12px;                      /* pin pill to top-right */
  transform: none;                /* remove translateY centering */
}

/* =========================================================
   Pre-matchup visibility
   Hide glossary until a matchup is active
========================================================= */

/* Default: collapsed + non-interactive */
#glossarySection {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transform: translateY(6px);
  transition: max-height 320ms ease, opacity 240ms ease, transform 240ms ease;
}

/* When matchup is active: expand smoothly */
.app-shell.has-matchup #glossarySection {
  max-height: 2400px; /* big enough for your glossary content */
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* Global hide helper (used for footer reveal) */
.hidden { display: none !important; }

/* =========================================================
   MI 3.4 — Pre-matchup density tightening (safe overrides)
   ========================================================= */

.app-shell.pre-matchup{
  /* global-ish density knobs for this state */
  --pm-gap: 6px;
  --pm-card-pad: 8px;
  --pm-card-pad-lg: 9px;
  --pm-hero-pad: 9px;
}

/* tighten the big vertical stack */
.app-shell.pre-matchup .top-bar,
.app-shell.pre-matchup .pre-matchup-hub,
.app-shell.pre-matchup .start-matchup{
  margin-top: var(--pm-gap) !important;
}

/* reduce overall grid gaps */
.app-shell.pre-matchup .top-bar{
  gap: var(--pm-gap) !important;
}
.app-shell.pre-matchup .pre-matchup-hub{
  gap: var(--pm-gap) !important;
}

/* tighten card padding without changing style */
.app-shell.pre-matchup .card{
  padding: var(--pm-card-pad) !important;
}
.app-shell.pre-matchup .card.controls-card{
  padding: var(--pm-card-pad-lg) !important;
}

/* HERO: reduce height/air */
.app-shell.pre-matchup .app-header.enhanced-header{
  min-height: 0 !important;
}

.app-shell.pre-matchup .hero-logo-wrap{
  margin-bottom: 1px !important;
}
.app-shell.pre-matchup .hero-text-wrap{
  gap: 6px !important;
}
.app-shell.pre-matchup .hero-title{
  margin: 6px 0 6px !important;
}
.app-shell.pre-matchup .hero-tagline{
  margin: 0 0 1px !important;
}

/* STATUS BAR: tuck it closer */
.app-shell.pre-matchup #status{
  margin: 10px 0 12px !important;
}

/* “START A MATCHUP” briefing: reduce section padding + tile gaps */
.app-shell.pre-matchup .start-matchup{
  padding: 14px !important;
}
.app-shell.pre-matchup .start-matchup .briefing-grid,
.app-shell.pre-matchup .start-matchup .briefing-row{
  gap: 10px !important;
}
.app-shell.pre-matchup .start-matchup .briefing-card{
  padding: 12px !important;
}

/* Step panel: reduce internal spacing */
.app-shell.pre-matchup .steps-panel,
.app-shell.pre-matchup .matchup-controls{
  padding: 14px !important;
}
.app-shell.pre-matchup .steps-panel .step-block{
  margin-bottom: 10px !important;
}

/* ===== Load Tournament Data card: stronger header + 2-col grid ===== */
.controls-card.is-primary-entry{
  padding-top: 14px; /* slightly tighter + header feels anchored */
}

.controls-card.is-primary-entry .controls-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.controls-card.is-primary-entry .card-title{
  margin: 0;
  padding: 0;
  font-size: 16px;       /* more prominent */
  font-weight: 800;
  letter-spacing: 0.2px;
  line-height: 1.1;
}

.controls-card.is-primary-entry .csv-spec-btn{
  margin-top: -2px;      /* lifts pill into the same “header row” */
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
}

/* Two-column control grid */
.controls-card.is-primary-entry .controls-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: end;
}

/* Left: dataset select */
.controls-card.is-primary-entry .dataset-select-wrap{
  min-width: 0;
}
.controls-card.is-primary-entry .field-label{
  font-size: 12px;
  opacity: 0.8;
  margin: 0 0 6px;
  text-align: center;
}

.controls-card.is-primary-entry .dataset-select-wrap select{
  width: 100%;
  height: 44px;
  border-radius: 12px;
}

/* Right: manual upload (match size/weight of select) */
.controls-card.is-primary-entry .file-label.file-label--manual{
  width: 100%;
  height: 44px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 12px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
}

/* ===========================
   Pre-matchup Option B layout
   3 equal columns under status bar
   =========================== */

.pre-setup-row{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
  margin-top: 10px;
  width: 100%;
}

.pre-setup-row > *{
  min-width: 0; /* critical: allows equal columns even with wide inner content */
  height: auto;
}

/* Ensure all 3 cards fill their column height consistently */
.pre-setup-row > .card{
  height: auto;
}

/* Hub was designed for stacked layout; remove extra lift in 3-col row */
.pre-setup-row #preMatchupHub{
  margin-top: 0;
}

/* --- In the 3-col cockpit, cards should behave like normal cards (top-left headers) --- */
.pre-setup-row .controls-card.is-primary-entry{
  justify-content: flex-start;
  align-items: stretch;
  text-align: left;
  padding-top: 18px; /* keeps header from hugging the border */
}

.pre-setup-row .controls-card.is-primary-entry .controls-card-head{
  justify-content: space-between; /* title left, pill right */
  align-items: center;
}

.pre-setup-row .controls-card.is-primary-entry .field-label{
  text-align: left; /* stop "Dataset" from centering */
}

/* --- Right tile: table-like 3-row steps for clarity + consistency --- */
.pre-setup-row .matchup-steps{
  gap: 0;                 /* remove spacing so rows feel connected */
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 14px;
  overflow: visible;
  background: rgba(15, 23, 42, 0.35);
}

.pre-setup-row .matchup-step{
  padding: 14px 14px;
}

.pre-setup-row .matchup-step + .matchup-step{
  border-top: 1px solid rgba(148, 163, 184, 0.14);
}

.pre-setup-row .controls-card.is-primary-entry .card-title{
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: center;
  align-items: center;
}

/* === CSV Tile: tighter + left-aligned + 1-column stack === */
.controls-card.is-primary-entry{
  text-align: left;              /* overrides the earlier center */
  justify-content: flex-start;   /* stop vertical centering */
}

.controls-card.is-primary-entry .controls-card-head{
  justify-content: flex-start;   /* title hugs top-left */
}

/* Keep title on one line now that the pill is gone */
.controls-card.is-primary-entry .controls-card-head .card-title{
  white-space: nowrap;
  text-align: center !important;
  align-self: center;
  justify-content: center;
}

/* Stack dropdown + upload button vertically (tighter + cleaner) */
.controls-card.is-primary-entry .controls-grid{
  grid-template-columns: 1fr;    /* was 1fr 1fr */
  gap: 10px;
  align-items: start;
}

/* Shrink the upload button text so it doesn't dominate */
.controls-card.is-primary-entry .file-label.file-label--manual span{
  font-size: 14px;
  letter-spacing: 0.02em;
}

/* Optional: make the upload button feel less “billboard” */
.controls-card.is-primary-entry .file-label.file-label--manual{
  height: 42px;
  min-height: 42px;
}

/* ================================
   Searchable Team Dropdown (custom panel, drives native <select>)
   ================================ */

/* Wrapper stays in-flow and becomes the positioning context */
.mi-team-dd{
  position: relative;
  width: 100%;
}

.mi-team-dd-btn {
  width: 100%;
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.32);
  background: rgba(2,6,23,0.55);
  color: rgba(226,232,240,0.92);
  font-size: 10px;
  letter-spacing: 0.02em;
  display: flex;


  gap: 10px;
  cursor: pointer;
}

/* =========================================================
   Matchup Controls: TEAM dropdown buttons need a fixed width
   (prevents long names from clipping)
   ========================================================= */
:root{
  --mi-team-dd-fixed: 240px; /* tune: 230–270px usually feels right */
}

/* Only inside the Matchup Controls card */
#matchupSetupCard .mi-team-dd{
  width: var(--mi-team-dd-fixed);
  flex: 0 0 var(--mi-team-dd-fixed); /* stops flex from shrink-wrapping */
}

/* Keep the button/panel aligned to that fixed width */
#matchupSetupCard .mi-team-dd-btn,
#matchupSetupCard .mi-team-dd .mi-team-dd-panel{
  width: 100%;
}

/* Allow label text to take the available space cleanly */
#matchupSetupCard .mi-team-dd-btn > span{
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#matchupSetupCard .mi-team-dd-btn .mi-chev{
  flex: 0 0 auto;
}

.mi-team-dd-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(56,189,248,0.18);
}

.mi-team-dd-btn .mi-chev {
  opacity: 0.75;
  transform: translateY(0.5px);
}

.mi-team-dd-search {
  width: 100%;
  height: 36px;
  padding: 0 12px;
  border: 0;
  outline: none;
  background: rgba(15,23,42,0.70);
  color: rgba(226,232,240,0.92);
  font-size: 12px;
  border-bottom: 1px solid rgba(148,163,184,0.18);
}

.mi-team-dd-list{
  padding: 6px;     /* keep yours */
  flex: 1 1 auto;
  min-height: 0;
  max-height: none; /* IMPORTANT: remove the old 248px cap */
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}

.mi-team-dd .mi-team-dd-search{
  background: linear-gradient(180deg, rgba(30,41,59,0.92), rgba(15,23,42,0.85));
  border-bottom: 1px solid rgba(148,163,184,0.22);
  box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset;
  color: rgba(226,232,240,0.94);
  height: 38px;
  min-height: 38px;
  flex: 0 0 auto;
  line-height: 38px;
}

.mi-team-dd-item {
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  color: rgba(226,232,240,0.92);
  font-size: 12px;
  padding: 9px 10px;
  border-radius: 10px;
  cursor: pointer;
}

.mi-team-dd-item:hover,
.mi-team-dd-item.is-active {
  background: rgba(56,189,248,0.12);
}

.mi-team-dd-item mark {
  background: rgba(251,191,36,0.18);
  color: rgba(226,232,240,0.98);
  padding: 0 2px;
  border-radius: 4px;
}

.mi-team-dd .mi-team-dd-search::placeholder{
  color: rgba(148,163,184,0.70);
}

/* ================================
   Team dropdown: clarity + contrast pass
   ================================ */

/* Search "header strip" that reads as a control surface */
.mi-team-dd .mi-team-dd-search{
  background: linear-gradient(180deg, rgba(30,41,59,0.92), rgba(15,23,42,0.85));
  border-bottom: 1px solid rgba(148,163,184,0.22);
  box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset;
  color: rgba(226,232,240,0.94);
}

.mi-team-dd .mi-team-dd-search::placeholder{
  color: rgba(148,163,184,0.70);
}

/* List area gets a tiny inner frame so it reads as "menu" */
.mi-team-dd .mi-team-dd-list{
  padding: 8px;
  background: radial-gradient(120% 120% at 20% 0%, rgba(56,189,248,0.07), transparent 60%);
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Rows: add faint separators + stronger hover to signal interactivity */
.mi-team-dd .mi-team-dd-item{
  position: relative;
  border-radius: 10px;
  transition: background-color 140ms ease, transform 140ms ease;
}

.mi-team-dd .mi-team-dd-item::after{
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: -3px;
  height: 1px;
  background: rgba(148,163,184,0.10);
  pointer-events: none;
}

.mi-team-dd .mi-team-dd-item:hover,
.mi-team-dd .mi-team-dd-item.is-active{
  background: rgba(56,189,248,0.16);
  transform: translateY(-0.5px);
}

/* Slight "selected candidate" emphasis when navigating with keys */
.mi-team-dd .mi-team-dd-item.is-active{
  box-shadow:
    0 0 0 1px rgba(56,189,248,0.22) inset,
    0 10px 18px rgba(0,0,0,0.28);
}

/* Scrollbar theming (prevents the big white gutter on Windows) */
.mi-team-dd .mi-team-dd-list{
  scrollbar-width: thin;
  scrollbar-color: rgba(148,163,184,0.42) rgba(2,6,23,0.20);
}

.mi-team-dd .mi-team-dd-list::-webkit-scrollbar{
  width: 10px;
}
.mi-team-dd .mi-team-dd-list::-webkit-scrollbar-track{
  background: rgba(2,6,23,0.20);
  border-radius: 999px;
}
.mi-team-dd .mi-team-dd-list::-webkit-scrollbar-thumb{
  background: rgba(148,163,184,0.42);
  border-radius: 999px;
  border: 2px solid rgba(2,6,23,0.35);
}
.mi-team-dd .mi-team-dd-list::-webkit-scrollbar-thumb:hover{
  background: rgba(56,189,248,0.34);
}

/* Hard guarantee: hidden panels never render (must be last) */
.mi-team-dd .mi-team-dd-panel[hidden]{
  display: none !important;
}

/* Team dropdown: capped panel, list scrolls inside */
.mi-team-dd .mi-team-dd-panel{
  position: absolute;
  z-index: 9999;
  top: calc(100% + 8px);
  left: 0;
  width: 100%;

  border-radius: 14px;
  overflow: hidden;

  background: linear-gradient(180deg, rgba(15,23,42,0.94), rgba(2,6,23,0.94));
  border: 1px solid rgba(56,189,248,0.26);
  box-shadow:
    0 22px 60px rgba(0,0,0,0.68),
    0 0 0 1px rgba(255,255,255,0.05) inset,
    0 0 26px rgba(56,189,248,0.10);

  /* cap height here (panel can be smaller if content is smaller) */
  max-height: 300px;

  display: flex;
  flex-direction: column;
}

/* List scrolls inside the capped panel */
.mi-team-dd .mi-team-dd-list{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}

/* =========================================
   Next-action spotlight handoff (CSV -> Steps)
   ========================================= */

/* 1) While NOT loaded, keep the halo on the primary entry (you already do this) */
/* .controls-card.is-primary-entry is currently your “halo” card via border/box-shadow. :contentReference[oaicite:3]{index=3} */

/* OR divider between dataset dropdown and manual upload */
.or-divider{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  margin: 6px 0 2px;
  opacity: 0.9;
}

.or-divider::before,
.or-divider::after{
  content: "";
  height: 1px;
  background: rgba(148, 163, 184, 0.22);
}

.or-divider span{
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(226, 232, 240, 0.70);
}

/* ================================
   PRE-SETUP RIGHT TILE: single-box 3-row layout
   Removes inner "square inside square"
   ================================ */

.pre-setup-row #matchupSetupCard{
  padding: 0 !important;
  border-radius: var(--mi-radius-card, 18px);
}

/* Force the 3-step stack to be true equal-height rows */
.pre-setup-row #matchupSetupCard .matchup-steps{
  display: grid !important;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 0 !important;
  height: auto;
}

/* Ensure each row can vertically center its contents cleanly if there’s extra height */
.pre-setup-row #matchupSetupCard .mc-row{
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Make the inner wrapper inherit the rounding */
.pre-setup-row #matchupSetupCard .matchup-steps{
  border-radius: inherit;
  overflow: visible;
}

/* Flatten the INNER wrapper so it doesn't look like a second card */
.pre-setup-row #matchupSetupCard .matchup-controls{
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  overflow: visible !important;
}

/* Keep the three rows as the visual structure */
.pre-setup-row .mc-row{
  padding: 14px 14px !important;
}

/* Row dividers (unchanged behavior, just ensured) */
.pre-setup-row #matchupSetupCard .mc-row + .mc-row{
  border-top: 1px solid rgba(148, 163, 184, 0.14) !important;
}

/* ================================
   RIGHT TILE TYPOGRAPHY NORMALIZATION
   ================================ */

#matchupSetupCard .round-step-label{
  /* Match card header tone */
  font-family: inherit;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.98rem;
  color: rgba(229, 231, 235, 0.92);
}

#matchupSetupCard label,
#matchupSetupCard .helper-text,
#matchupSetupCard .sandbox-toggle span{
  font-family: inherit;
  font-size: 0.92rem;
  color: rgba(229, 231, 235, 0.72);
}

#matchupSetupCard select,
#matchupSetupCard button.btn{
  font-family: inherit;
}

/* ================================
   RIGHT TILE ROW DIVIDERS (STRONGER)
   ================================ */

.pre-setup-row #matchupSetupCard .mc-row + .mc-row{
  border-top: 1px solid rgba(148, 163, 184, 0.65) !important; /* stronger than before */
  box-shadow: 0 -1px 0 rgba(2, 8, 23, 0.65) inset;            /* crisp edge line */
}

.pre-setup-row #matchupSetupCard .mc-row{
  background: rgba(2, 8, 23, 0.10);
}
.pre-setup-row #matchupSetupCard .mc-row:nth-child(odd){
  background: rgba(2, 8, 23, 0.16);
}

.pre-setup-row #matchupSetupCard .mc-row{
  background: rgba(2, 8, 23, 0.10);
}
.pre-setup-row #matchupSetupCard .mc-row:nth-child(odd){
  background: rgba(2, 8, 23, 0.16);
}

/* ================================
   STEP 2 CONTROLS: SIZE + ALIGNMENT
   ================================ */

#matchupSetupCard .round-control-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: stretch;
}

/* Shared pill dimensions */
#matchupSetupCard #roundSelectBtn,
#matchupSetupCard .sandbox-toggle{
  height: 44px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-size: 0.9rem;
}

/* Make sandbox look like a button, not a form field */
#matchupSetupCard .sandbox-toggle{
  border: 1px dashed rgba(148, 163, 184, 0.35);
  background: rgba(2, 8, 23, 0.25);
  cursor: pointer;
}

/* Checkbox alignment cleanup */
#matchupSetupCard .sandbox-toggle input{
  margin-right: 8px;
}

#matchupSetupCard .sandbox-toggle input:checked + span{
  color: #e5f6ff;
}

#matchupSetupCard .sandbox-toggle:has(input:checked){
  border-color: rgba(56, 189, 248, 0.65);
  background: rgba(56, 189, 248, 0.12);
}

button,
.btn {
  height: var(--mi-control-height);
  border-radius: var(--mi-control-radius);
  padding: 0 var(--mi-control-padding-x);
}

.sandbox-toggle,
.enhanced-sandbox {
  height: var(--mi-control-height);
  border-radius: var(--mi-control-radius);
  padding: 0 var(--mi-control-padding-x);
  display: inline-flex;
  align-items: center;
}

.sandbox-toggle input {
  margin-right: 10px;
}

.enhanced-sandbox {
  position: relative;
}

.enhanced-sandbox::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 10px;
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;

  color: #e5e7eb;
  background: rgba(2, 8, 23, 0.95);
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: 8px;

  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease, transform 140ms ease;
}

.enhanced-sandbox:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(-2px);
}

.controls-card{
  transition:
    border-color 220ms ease,
    box-shadow 220ms ease,
    background 220ms ease;
}

/* Halo the dataset card ONLY before CSV is loaded */
.controls-card.is-primary-entry{
  border: 1px solid rgba(56, 189, 248, 0.75);
  box-shadow:
    0 0 0 1px rgba(56, 189, 248, 0.45),
    0 0 28px rgba(56, 189, 248, 0.35),
    0 0 60px rgba(56, 189, 248, 0.18),
    0 20px 50px rgba(0, 0, 0, 0.55),
    var(--mi-shadow-card-inset);
  background:
    radial-gradient(140% 140% at 50% -25%, rgba(56, 189, 248, 0.14), transparent 65%),
    var(--mi-grad-card);
}

/* =========================================
   Next-action halo (single source of truth)
   - Before CSV: #datasetCard has .is-primary-entry (HTML)
   - After CSV:  #matchupSetupCard gets .is-primary-entry (JS)
   ========================================= */

.controls-card.is-primary-entry{
  border: 1px solid rgba(56, 189, 248, 0.75);
  box-shadow:
    0 0 0 1px rgba(56, 189, 248, 0.45),
    0 0 28px rgba(56, 189, 248, 0.35),
    0 0 60px rgba(56, 189, 248, 0.18),
    0 20px 50px rgba(0, 0, 0, 0.55),
    var(--mi-shadow-card-inset);
  background:
    radial-gradient(140% 140% at 50% -25%, rgba(56, 189, 248, 0.14), transparent 65%),
    var(--mi-grad-card);

  /* guarantees the glow follows rounding */
  border-radius: var(--mi-radius-card, 18px);
}

#matchupSetupCard.is-primary-entry{
  border-color: var(--mi-brand-blue-a45) !important;

  box-shadow:
    0 0 24px var(--mi-brand-blue-a18),
    0 20px 50px rgba(0,0,0,0.55),
    var(--mi-shadow-card-inset) !important;

  background:
    radial-gradient(140% 140% at 50% -25%, var(--mi-brand-blue-a12), transparent 65%),
    var(--mi-grad-card) !important;

  border-radius: var(--mi-radius-card, 18px);
}

#matchupSetupCard.is-primary-entry .card-title {
  font-size: var(--mi-font-size-h3);
  font-weight: 800px;
  text-size-adjust: 100%;
}

#preMatchupHub {
  overflow: visible;
}

/* =========================================
   POST-MATCHUP HEADER (CONDENSED MODE)
   ========================================= */

.app-shell.has-matchup .hero-tagline,
.app-shell.has-matchup .hero-overline,
.app-shell.has-matchup .hero-subtitle {
  display: none;
}

/* ==========================================================================
   v3.5 — Interaction Console Tile (Right-hand square)
   Goals:
   - Left table + right console share the same vertical footprint
   - Console feels premium, calm, and “decision-engine” adjacent
   - Body scrolls if needed without changing section height
   ========================================================================== */

/* Make the two-column grid stretch to equal height */
.interactions-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 12px;
  row-gap: 6px;
  align-items: stretch;
  margin-top: 8px;
}

/* Ensure left column behaves as a stacked block */
.interactions-left{
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 100%;
}

/* Keep the table visually dominant but stable */
.interaction-table{
  border-radius: 14px;
}

/* Totals bar stays pinned as the “footer” of the left column */
.interaction-totals-bar{
  border-radius: 14px;
}

/* Right tile becomes a true console */
.interactions-console-tile{
  padding: 12px;
  padding-top: 12px;                /* we manage padding inside head/body/footer */
  border-radius: 14px;
  overflow: hidden;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;

  /* Premium dark glass */
  background:
    radial-gradient(1200px 600px at 20% 0%, rgba(56, 189, 248, 0.10), transparent 55%),
    radial-gradient(900px 520px at 90% 35%, rgba(34, 197, 94, 0.07), transparent 60%),
    rgba(7, 8, 12, 0.98);

  border: 1px solid rgba(75, 85, 99, 0.9);
  box-shadow:
    0 14px 30px rgba(0,0,0,0.55),
    0 0 0 1px rgba(56,189,248,0.10) inset;
}

/* Console Head */
.int-console-head{
  padding: 12px 12px 10px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
  background:
    linear-gradient(to bottom, rgba(15, 23, 42, 0.78), rgba(7, 8, 12, 0.10));
}

.int-console-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(224, 231, 255, 0.95);

  border: 1px solid rgba(56, 189, 248, 0.35);
  background: rgba(15, 23, 42, 0.65);
  box-shadow:
    0 0 0 2px rgba(56,189,248,0.10),
    0 0 16px rgba(56,189,248,0.16);
}

.int-console-sub{
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.35;
  color: rgba(199, 210, 254, 0.78);
}

/* Console Body */
.int-console-body{
  padding-top: 0;
  margin-top: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  overflow: auto;

  /* subtle scroll aesthetic */
  scrollbar-width: thin;
  scrollbar-color: rgba(56,189,248,0.35) rgba(0,0,0,0);
}

/* Webkit scroll */
.int-console-body::-webkit-scrollbar{ width: 10px; }
.int-console-body::-webkit-scrollbar-track{ background: transparent; }
.int-console-body::-webkit-scrollbar-thumb{
  background: rgba(56,189,248,0.25);
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,0);
  background-clip: padding-box;
}
.int-console-body::-webkit-scrollbar-thumb:hover{
  background: rgba(56,189,248,0.35);
}

/* Individual narrative cards */
.int-console-card{
  border-radius: 14px;
  padding: 10px 10px 10px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background:
    linear-gradient(to bottom, rgba(15,23,42,0.55), rgba(2,6,23,0.35));
  box-shadow:
    0 10px 18px rgba(0,0,0,0.35),
    0 0 0 1px rgba(255,255,255,0.02) inset;
}

.int-console-card.is-placeholder{
  border-style: dashed;
  border-color: rgba(148, 163, 184, 0.20);
  background: rgba(15,23,42,0.35);
}

/* Label + text */
.int-console-label{
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.92);
  margin-bottom: 6px;
}

.int-console-text{
  font-size: 12.5px;
  line-height: 1.42;
  color: rgba(226, 232, 240, 0.82);
}

/* Console Footer */
.int-console-foot{
  padding: 10px 12px;
  border-top: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(15, 23, 42, 0.45);
  font-size: 12px;
  color: rgba(203, 213, 225, 0.78);
}

.int-console-foot-kicker{
  font-weight: 900;
  color: rgba(226, 232, 240, 0.9);
}

/* ===== Interaction Console — live states (v3.5) ===== */

.int-console-card.is-active{
  border-color: rgba(34, 211, 238, 0.35);
  box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.22), 0 10px 22px rgba(0,0,0,0.35);
}

.int-console-card.is-even{
  opacity: 0.92;
}

.int-console-badges{
  display: inline-flex;
  gap: 6px;
  margin-left: auto;
}

.int-console-badge{
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid rgba(148, 163, 184, 0.20);
  color: rgba(226, 232, 240, 0.86);
  background: rgba(15, 23, 42, 0.55);
}

.int-console-badge.is-even{
  border-color: rgba(148, 163, 184, 0.22);
  color: rgba(203, 213, 225, 0.82);
}

.int-console-badge.is-driver{
  border-color: rgba(34, 211, 238, 0.30);
  color: rgba(34, 211, 238, 0.92);
}

#interactionConsoleBody.is-refreshing .int-console-card{
  transform: translateY(0.5px);
  transition: transform 160ms ease, opacity 160ms ease;
}

/* Table row spotlight (subtle) */
#interactionsTable tbody tr.is-console-active{
  outline: 1px solid var(--mi-brand-blue-a18);
  box-shadow: inset 0 0 0 9999px var(--mi-brand-blue-a04);
}

/* Interaction Console: prevent global "stacked children" dividers between s1/s2 */
.int-console-text > * + *{
  border-top: none !important;
  padding-top: 0 !important;
}

/* Left tile wraps table + totals as one square */
.interactions-left-tile{
  background: rgba(9, 9, 15, 0.96);
  border: 1px solid rgba(75, 85, 99, 0.9);
  border-radius: 14px;
  padding: 12px;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Table + totals should sit inside without needing their own "outer" borders */
.interactions-left-tile .interaction-table{
  border-radius: 12px; /* keep */
}

.interactions-left-tile #interactionTotalsBar,
.interactions-left-tile .interaction-totals-bar{
  border-radius: 12px; /* keep */
}

/* If legacy explainer class is still present on console, prevent double-tile styling */
.interactions-explain-tile.interactions-console-tile{
  background: transparent;
  border: none;
  padding: 0;
}

/* Two equal “squares” inside the Interaction Metrics card */
.interactions-left,
.interactions-right{
  background: rgba(9, 9, 15, 0.96);
  border: 1px solid rgba(75, 85, 99, 0.9);
  border-radius: 12px;
  padding: 6px;
  min-height: 100%;
}

/* Table should live INSIDE the left square, not BE a square itself */
.interaction-table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: transparent;   /* was a dark fill */
  border: none;              /* remove outer border */
  border-radius: 0;          /* remove rounding */
  overflow: visible;         /* don't clip weirdly */
  font-size: 12px;
}

/* ===============================
   Interaction Table — column dividers + centered columns
   =============================== */

/* Strong vertical dividers (header + body) */
.interaction-table thead th:not(:last-child),
.interaction-table tbody td:not(:last-child){
  border-right: 1px solid var(--mi-brand-blue-a12, 0.18);
}

/* Slightly stronger divider under the header row */
.interaction-table thead th{
  border-right: 1px solid var(--mi-brand-blue-a12, 0.22);
}
.interaction-table thead th:last-child{ border-right: none; }

/* Optional: make the dividers pop a bit on hover */
.interaction-table tbody tr:hover td:not(:last-child){
  border-right-color: rgba(56, 189, 248, 0.28);
}

/* Center the Interaction labels too */
.interaction-table .int-name{
  text-align: center;
  padding-left: 0;
  padding-right: 0;
}

/* Column sizing after Domain removal */
.interaction-table .int-name{ width: 8%; }
.interaction-table .int-edge{ width: 8%; }
.interaction-table .col-intensity{ width: 1%; }
.interaction-table .int-adj{ width: 10%; }

/* Force the console tile to be row 2 */
.interactions-right{
  grid-column: 2;
  grid-row: 2;
}

.interactions-colhead--right .int-console-pill{
  margin-bottom: 2px;
}

.int-console-paragraph{
  margin: 0;
}

/* === Interaction Metrics: make tiles fill vertical space === */

/* Remove extra breathing room between section header and tiles */
#interactionsSection .legend-header{
  margin-bottom: 6px;   /* reduce if it's larger */
}

/* If you still have margin-top on the grid, kill it */
#interactionsSection .interactions-grid{
  margin-top: 0 !important;
  row-gap: 6px;         /* keep small spacing if you like */
}

/* Ensure the grid items stretch and actually fill available height */
#interactionsSection .interactions-left,
#interactionsSection .interactions-right{
  align-self: stretch;
}

/* Make both tiles behave like full-height panels */
#interactionsSection .interactions-left-tile,
#interactionsSection .interactions-console-tile{
  height: 100%;
}

/* Hide the console footer to reclaim vertical space */
.int-console-foot{
  display: none !important;
}

/* Console tile: header row + scrollable body */
.interactions-console-tile{
  display: flex;
  flex-direction: column;
  overflow: hidden; /* prevents body scroll from spilling outside rounded corners */
}

/* Body becomes the scroll container */
.int-console-body{
  flex: 1 1 auto;
  overflow-y: auto;
  padding-right: 6px; /* optional: keeps scrollbar from touching border */
}

.interactions-colhead--right{
  padding: 0 !important;
  margin: 0 !important;
}

/* =========================================================
   v3.5 Interactions — CLEAN LAYOUT LOCK
   Fixes:
   - Removes the extra header row that creates dead space
   - Forces console body to scroll (flex + min-height:0)
   ========================================================= */

#interactionsSection .interactions-grid{
  /* kill the two-row grid that created the empty band */
  grid-template-rows: 1fr !important;

  /* tighten top air */
  margin-top: 0 !important;
  row-gap: 10px !important;
  align-items: stretch !important;
}

/* If you kept the separate “INTERACTION CONSOLE” header row above the right tile,
   hide it — it’s the source of the dead space. */
#interactionsSection .interactions-colhead--right{
  display: none !important;
}

/* Remove any forced row positioning that pushes tiles down */
#interactionsSection .interactions-left,
#interactionsSection .interactions-right{
  grid-row: auto !important;
  align-self: stretch !important;
  min-height: 0 !important; /* critical for inner scrolling */
}

/* OPTIONAL: if the outer interactions card/panel has too much top padding */
#interactionsSection .interactions-card{
  padding-top: 10px !important;
}

/* -----------------------------
   Right tile (console) scrolling
   ----------------------------- */

/* Make the RIGHT square a true flex column */
#interactionsSection .interactions-right{
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important; /* keeps scroll inside rounded corners */
}

/* If you have a dedicated inner wrapper, let it fill */
#interactionsSection .interactions-console-tile{
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;  /* critical */
  overflow: hidden !important;
}

/* The body becomes the scroll container */
#interactionsSection .int-console-body{
  flex: 1 1 auto !important;
  min-height: 0 !important;  /* critical */
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-right: 6px;
}

/* Footer stays hidden per your preference */
#interactionsSection .int-console-foot{
  display: none !important;
}

#interactionConsoleBody{ flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; }

/* Make both columns behave as equal-height tiles */
.interactions-left,
.interactions-right{
  min-height: 0;
}

/* Console tile must be a flex column so the body can be the scroll area */
.int-console-tile{
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

/* The scroll area (you already have overflow:auto here, keep it) */
.int-console-body{
  min-height: 0; /* critical in flex layouts */
}

/* Force overflow to exist on desktop so the console can scroll */
.interactions-console-tile{
  max-height: 560px;   /* tweak if you want taller/shorter */
}

/* Console header now lives inside the tile (no separate grid row) */
.interactions-console-tile{
  display: flex;
  flex-direction: column;
}

.int-console-head{
  flex: 0 0 auto;
  margin-bottom: 10px;
}

/* ========================================================================== 
   Interaction Metrics — Console (v3.5 patch)
   ========================================================================== */

.legend-header--interactions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.int-console-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 14px;
  border-radius:999px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:12px;
  color:#e5e7eb;
  background: rgba(17, 24, 39, .55);
  border:1px solid rgba(56, 189, 248, .35);
  box-shadow: 0 0 0 2px rgba(56,189,248,.12), 0 12px 30px rgba(0,0,0,.35);
}

/* Right tile layout */
.interactions-grid{
  align-items:stretch;
}

.interactions-right.interactions-console-tile{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-height:100%;
}

/* Scroll container */
.int-console-body{
  flex:1 1 auto;
  min-height:0; /* crucial for overflow inside a flex column */
  overflow:auto;
  padding:6px 8px 6px;
  border-radius:16px;
  background: rgba(2, 8, 23, .55);
  border:1px solid rgba(148, 163, 184, .18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}

.int-console-card{
  border-radius:14px;
  padding:6px 8px 6px;
  background: rgba(15, 23, 42, .55);
  border:1px solid rgba(148, 163, 184, .18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
  margin-bottom:3px;
}

.int-console-card:last-child{ margin-bottom:0; }

.int-console-label{
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:14px;
}

.int-console-text{
  margin-top:1.5px;
  line-height:1.35;
  color: rgba(226,232,240,.92);
}

.int-console-foot{
  font-size:12px;
  color: rgba(226,232,240,.75);
  padding:0 2px 2px;
}

.int-console-foot-kicker{
  font-weight:800;
  letter-spacing:.02em;
}

/* ===============================
   Interaction Metrics (Option 1)
   Stretch table area + pin totals
   =============================== */

/* Left tile is already flex; ensure it behaves as a vertical stack */
.interactions-left.interactions-left-tile{
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

/* This wrapper becomes the "stretch zone" under the table header */
.interaction-table-wrap{
  flex: 1 1 auto;
  min-height: 0;          /* critical for overflow in flex layouts */
  overflow: auto;
  border-radius: 12px;    /* matches your tile rounding */
}

/* Keep totals locked to the bottom of the tile */
.interactions-left.interactions-left-tile #interactionTotalsBar,
.interactions-left.interactions-left-tile .interaction-totals-bar{
  margin-top: auto;
}

.int-console-label{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.int-console-title{
  white-space: nowrap;
}

/* =====================================
   Interaction Metrics Tile Headers
   ===================================== */

/* Shared header styling */
.interaction-tile-header{
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: rgba(8, 16, 32, 0.9);
  border: 1px solid rgba(56, 189, 248, 0.45);
  color: #cfefff;
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.25),
              0 8px 22px rgba(0,0,0,0.6);
  z-index: 5;
  pointer-events: none;
}

/* Ensure tiles can anchor the header */
.interactions-left-tile,
.interactions-right-tile{
  position: relative;
}

/* =====================================
   Interaction Metrics — Tile Headers
   ===================================== */

/* Tiles must be anchors */
.interactions-left-tile,
.interactions-console-tile{
  position: relative;
}

/* Header wrapper sits above tile content and is centered */
.interactions-colhead{
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  pointer-events: none;
}

/* Reuse your existing pill style, but make sure it reads as a header */
.interactions-colhead .int-console-pill{
  pointer-events: none;
}

/* =====================================
   Interaction Metrics — Tile Headers (fixed)
   ===================================== */

/* Tiles must be anchors */
.interactions-left-tile,
.interactions-console-tile{
  position: relative;
}

/* Put the header INSIDE the tile, not floating above it */
.interactions-colhead{
  position: absolute;
  top: 10px;              /* was negative — this is the main problem */
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  pointer-events: none;
}

/* Make these read like subheaders, not oversized banners */
.interactions-colhead .int-console-pill{
  pointer-events: none;
  padding: 6px 14px;      /* slightly smaller than your main console pill */
  font-size: 12px;
  letter-spacing: 0.10em;
  opacity: 0.92;
}

.interactions-colhead .int-console-pill{
  box-shadow: none;
  border-width: 1px;
}

/* =====================================
   v3.5 — Interactions: two-tile headers
   ===================================== */

/* Header row becomes a 2-col grid matching the tiles */
#interactionsSection .legend-header--interactions{
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 12px;      /* match .interactions-grid */
  align-items: center;
  margin-bottom: 8px;    /* tune vertical spacing above tiles */
}

/* Center each pill above its tile */
#interactionsSection .legend-header--interactions .interactions-head{
  display: flex;
  justify-content: center;
}

/* Kill any leftover styling that assumed a single H3 */
#interactionsSection .legend-header--interactions h3{
  display: none !important;
}

/* Interactions grid is one row; do not force the console into a lower row */
#interactionsSection .interactions-right{
  grid-column: auto !important;
  grid-row: auto !important;
}

/* =====================================
   v3.5 — Interactions header pills (ONLY)
   ===================================== */

#interactionsSection .legend-header--interactions .interactions-header-pill:not(.matchup-kicker){
  /* Keep your existing sizing — only polish */
  border-radius: var(--mi-radius-pill);

  /* More “app-native” surface */
  background:
    linear-gradient(180deg,
      rgba(30, 41, 59, 0.72) 0%,
      rgba(15, 23, 42, 0.62) 55%,
      rgba(2, 6, 23, 0.58) 100%);
  border: 1px solid rgba(56, 189, 248, 0.45);

  /* Crisp + premium depth */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 0 2px rgba(56, 189, 248, 0.10),
    0 18px 45px rgba(15, 23, 42, 0.90);

  /* Typography polish (no size change, but more consistent) */
  color: rgba(226, 232, 240, 0.95);
  letter-spacing: 0.10em;
}

/* Subtle top highlight band so they feel “anchored” */
#interactionsSection .legend-header--interactions .interactions-header-pill:not(.matchup-kicker)::before{
  content:"";
  position: absolute;
  inset: 1px 10px auto 10px;
  height: 2px;
  border-radius: 999px;
  background: rgba(56, 189, 248, 0.28);
  filter: blur(0.2px);
}

/* Ensure ::before positions correctly */
#interactionsSection .legend-header--interactions .interactions-header-pill:not(.matchup-kicker){
  position: relative;
}

/* Reuse matchup-kicker styling for interaction header pills (without the matchup-bar positioning) */
#result .interactions-head .int-console-pill.matchup-kicker{
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;

  display: flex;           /* keep your pill alignment */
  align-items: center;
  justify-content: center;

  margin: 0;               /* let the header layout control spacing */
  transform: none;         /* if matchup-kicker uses transforms */
}

/* Profile Marks — Empty State */
.pm-empty{
  height: 100%;
  min-height: 92px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 16px;
}

.pm-empty-inner{
  display: grid;
  gap: 10px;
  place-items: center;
  max-width: 520px;
}

.pm-empty-icon{
  width: 34px;     /* ↑ bigger */
  height: 34px;    /* ↑ bigger */
  opacity: 0.55;
  filter: drop-shadow(0 0 6px rgba(34, 211, 238, 0.12));
}

.pm-empty-title{
  font: inherit;
  font-weight: 650;
  letter-spacing: 0.02em;
  color: rgba(229, 231, 235, 0.92);
  font-size: 1.05em;  /* ↑ slightly bigger */
}

.pm-empty-text{
  font: inherit;
  line-height: 1.35;
  color: rgba(229, 231, 235, 0.72);
  font-size: 1.0em;   /* ↑ back to normal (or 0.98em if you want it slightly smaller) */
}

.context-tile .context-header{
  gap: 8px;               /* header stack spacing */
}

.context-tile .context-title{
  margin: 0;
  letter-spacing: 0.14em; /* optional: only if identity uses wide tracking */
  text-transform: uppercase;
}

/* =========================
   Scorecards Summary Hierarchy (Verdict Stack)
   ========================= */

.summary-block.summary-lean{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.summary-block.summary-lean .summary-delta-label{
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .8;
}

.summary-block.summary-lean .summary-delta-value{
  font-size: 22px;
  font-weight: 800;
  letter-spacing: .02em;
}

.summary-block.summary-lean .summary-pred-line{
  font-size: 22px;
  line-height: 1.15;
}

.summary-block.summary-lean .summary-pred-line strong{
  font-weight: 900;
  letter-spacing: .01em;
}

/* Confidence line (pill) */
.summary-confidence-line{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: -2px;
}

.summary-mini-label{
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .65;
}

.summary-confidence-pill{
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 1px solid rgba(148,163,184,.28);
  background: rgba(2, 6, 23, .55);
}

/* Driver / Risk: analyst commentary (quiet, readable) */
.summary-driver-line,
.summary-risk-line{
  display: flex;
  justify-content: center;
  gap: 10px;
  padding-top: 2px;
}

.summary-driver-text{
  font-size: 14px;
  opacity: .9;
}

.summary-risk-text{
  font-size: 14px;
  opacity: .78;
}

/* Lean paragraph becomes supporting translation, not headline */
.summary-lean-text{
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.35;
  opacity: .78;
}

/* Optional support line: whisper tier */
.summary-support-line{
  margin-top: -2px;
  font-size: 12px;
  line-height: 1.3;
  opacity: .62;
}

/* Baseline vs Matchup MI hierarchy on side cards */
.summary-mi-secondary{
  opacity: .70;
  font-size: 14px;
}

.summary-mi-primary{
  opacity: .95;
  font-size: 15px;
  font-weight: 700;
}

/* ================================
   SCORECARDS: Role Color Semantics
   (Cinderella = green, Favorite = orange)
   ================================ */

/* Left cell (Cinderella) */
#summaryTable tbody td:first-child .summary-block{
  border-color: rgba(34, 197, 94, 0.55); /* fallback */
  box-shadow:
    inset 0 0 0 1px var(--mi-role-cinderella-soft),
    0 10px 26px rgba(0,0,0,0.35);
  background:
    radial-gradient(circle at top, var(--mi-role-cinderella-soft), rgba(9, 9, 15, 0.98));
}

/* Right cell (Favorite) */
#summaryTable tbody td:last-child .summary-block{
  border-color: rgba(249, 115, 22, 0.55); /* fallback */
  box-shadow:
    inset 0 0 0 1px var(--mi-role-favorite-soft),
    0 10px 26px rgba(0,0,0,0.35);
  background:
    radial-gradient(circle at top, var(--mi-role-favorite-soft), rgba(9, 9, 15, 0.98));
}

/* Make the role label itself carry the role color */
#summaryTable tbody td:first-child .summary-team-label{
  color: var(--mi-role-cinderella);
  opacity: 0.95;
}

#summaryTable tbody td:last-child .summary-team-label{
  color: var(--mi-role-favorite);
  opacity: 0.95;
}

/* Optional: give Matchup MI a slight role-tinted emphasis */
#summaryTable tbody td:first-child .summary-mi-primary{
  color: rgba(226, 232, 240, 0.95);
  text-shadow: 0 0 18px rgba(34, 197, 94, 0.12);
}

#summaryTable tbody td:last-child .summary-mi-primary{
  color: rgba(226, 232, 240, 0.95);
  text-shadow: 0 0 18px rgba(249, 115, 22, 0.12);
}

/* Optional: interaction leverage line picks up a faint tint */
#summaryTable tbody td:first-child .summary-int-line{
  color: rgba(148, 163, 184, 0.95);
}

#summaryTable tbody td:last-child .summary-int-line{
  color: rgba(148, 163, 184, 0.95);
}

/* Center card stays neutral/authoritative; tighten its border slightly */
#summaryTable tbody td:nth-child(2) .summary-block.summary-lean{
  border-color: rgba(148, 163, 184, 0.28);
}

/* ================================
   SCORECARDS: Column Proportions
   Narrow center verdict, widen team tiles
   ================================ */

#summaryTable{
  width: 100%;
  table-layout: fixed; /* enables predictable column widths */
}

#summaryTable colgroup col:nth-child(1){ width: 34%; }
#summaryTable colgroup col:nth-child(2){ width: 32%; }
#summaryTable colgroup col:nth-child(3){ width: 34%; }

/* If you don't have a <colgroup>, fall back to cell targeting */
#summaryTable tbody td:first-child,
#summaryTable thead th:first-child{
  width: 34%;
}

#summaryTable tbody td:nth-child(2),
#summaryTable thead th:nth-child(2){
  width: 32%;
}

#summaryTable tbody td:last-child,
#summaryTable thead th:last-child{
  width: 34%;
}

/* Keep inner tiles from stretching oddly */
#summaryTable .summary-block{
  max-width: 100%;
}

/* Keep lean text from becoming a wall */
.summary-block.summary-lean .summary-lean-text{
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ================================
   SCORECARDS: Equal Height + Better Proportions
   ================================ */

/* Use flex for the single rendered row so all three tiles match height */
#summaryTable tbody tr{
  display: flex;
  align-items: stretch;
  gap: 18px;               /* controls spacing between tiles */
}

/* Make each cell act like a flex item */
#summaryTable tbody td{
  display: flex;
  padding: 0;              /* remove table cell padding so tiles align cleanly */
}

/* Proportions tuned to content:
   - Side tiles slightly narrower than before
   - Center tile a bit wider to justify its narrative stack */
#summaryTable tbody td:first-child{ flex: 0 0 30.5%; }
#summaryTable tbody td:nth-child(2){ flex: 0 0 39%; }
#summaryTable tbody td:last-child{  flex: 0 0 30.5%; }

/* Ensure the inner tiles stretch to equal height */
#summaryTable tbody td .summary-block{
  width: 100%;
  height: 100%;
  min-height: 100%;
}

/* Keep the center from “running tall” */
#summaryTable tbody td:nth-child(2) .summary-block.summary-lean{
  gap: 6px;                /* slightly tighter vertical rhythm */
}

/* Reduce the headline stack just a hair (keeps center tile in check) */
#summaryTable tbody td:nth-child(2) .summary-block.summary-lean .summary-delta-value{
  font-size: 21px;
}

#summaryTable tbody td:nth-child(2) .summary-block.summary-lean .summary-pred-line{
  font-size: 21px;
}

/* Confidence pill: tighten vertically so it doesn't add height */
#summaryTable tbody td:nth-child(2) .summary-confidence-pill{
  padding: 4px 10px;
}

/* (Optional) keep lean text at 2 lines (you already have this, re-stated for specificity) */
#summaryTable tbody td:nth-child(2) .summary-lean-text{
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ================================
   SCORECARDS: Table-safe equal height + proportions
   ================================ */

/* Keep table behavior predictable */
#summaryTable{
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 18px 0; /* horizontal gap between the 3 tiles */
}

/* Column widths: slightly narrower sides, slightly wider center */
#summaryTable colgroup col:nth-child(1){ width: 31%; }
#summaryTable colgroup col:nth-child(2){ width: 38%; }
#summaryTable colgroup col:nth-child(3){ width: 31%; }

/* If no colgroup exists, these still help */
#summaryTable tbody td:first-child{ width: 31%; }
#summaryTable tbody td:nth-child(2){ width: 38%; }
#summaryTable tbody td:last-child{ width: 31%; }

/* Make the three cells align and feel consistent */
#summaryTable tbody td{
  vertical-align: top;
}

/* Force the tiles to be the same visual height */
#summaryTable .summary-block{
  min-height: 250px;     /* adjust 250–280 based on your taste */
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center; /* centers content vertically */
}

/* Center tile: allow a bit more vertical rhythm without growing taller */
#summaryTable .summary-block.summary-lean{
  justify-content: center;
  gap: 6px;
}

/* Keep lean text compact */
#summaryTable .summary-block.summary-lean .summary-lean-text{
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ===== SCORECARDS FIX: restore real table layout ===== */
#summaryTable {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 18px 0;
}

/* undo the earlier flex conversion */
#summaryTable tbody tr { display: table-row !important; }
#summaryTable tbody td { display: table-cell !important; padding: 0; vertical-align: top; }

/* keep your intended proportions (choose one set and keep it) */
#summaryTable colgroup col:nth-child(1){ width: 25%; }
#summaryTable colgroup col:nth-child(2){ width: 50%; }
#summaryTable colgroup col:nth-child(3){ width: 25%; }

/* make tiles equal-height without flex rows */
#summaryTable .summary-block{
  min-height: 260px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ================================
   SCORECARDS: FORCE SYMMETRY
   ================================ */

/* 1) Make both team tiles identical “stack” containers */
#summaryTable td.team-block,
#summaryTable td.team-block-a,
#summaryTable td.team-block-b,
#summaryTable td.teamA,
#summaryTable td.teamB,
#summaryTable td.summary-team {
  padding: 0 !important;
  vertical-align: top;
}

/* If your actual wrappers are .summary-block or similar, this will catch them */
#summaryTable .summary-block,
#summaryTable .team-summary-block,
#summaryTable .summary-team-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  height: 100%;
  padding: 8px 6px 6px;
  box-sizing: border-box;
}

/* 2) Header row styling stays centered and consistent */
#summaryTable .team-header,
#summaryTable .summary-header,
#summaryTable .team-name-header {
  width: 100%;
  text-align: center;
  margin: 0;
}

/* 3) ADD THE GAP you asked for between header and inner card */
#summaryTable .team-header,
#summaryTable .summary-header,
#summaryTable .team-name-header {
  margin-bottom: 30px; /* <-- increase/decrease this for the “gap” */
}

/* 4) The green/orange inner info card: same width rules for BOTH sides */
#summaryTable .team-card,
#summaryTable .team-info-card,
#summaryTable .summary-team-card,
#summaryTable .team-box {
  width: 100%;
  max-width: 280px;        /* <-- keeps both sides from looking “too wide” */
  margin: 0 auto;          /* center it */
  box-sizing: border-box;
  padding: 28px 28px 26px; /* <-- consistent padding */
  border-radius: 16px;
}

/* 5) Ensure text block inside card doesn’t introduce asymmetry */
#summaryTable .team-card * ,
#summaryTable .team-info-card * ,
#summaryTable .summary-team-card * ,
#summaryTable .team-box * {
  box-sizing: border-box;
}

/* =========================================================
   VERDICT SCOREBUG (v3.6+ / current HTML)
   Structure (index.html):
   #verdictShell
     .mi-verdict-shell-inner
       .mi-verdict-grid
         .mi-verdict-main  (left 75%)
           .mi-scorebug-top
             .mi-scorebug-kicker
             .mi-scorebug-line
         aside.mi-verdict-rail (right 25%)
           #miVerdictMetricsTile.flip-tile.mi-verdict-metrics-tile
           .mi-verdict-actions.mi-verdict-actions-rail
             #miEvidenceToggle.mi-evidence-toggle
       .mi-verdict-footer
         #miVerdictDisclaimer.mi-verdict-disclaimer
   ========================================================= */


/* ================================
   Shell
   ================================ */

.mi-verdict-shell{
  padding: 0;
  overflow: hidden; /* allows rail overflow tricks but keeps inside shell clean */
  margin-bottom: 10px;
}

.mi-verdict-shell-inner{
  position: relative;
}

/* Hide empty support lines (JS already toggles .is-empty) */
.mi-verdict-why.is-empty,
.mi-verdict-watch.is-empty{ display: none; }

/* ================================
   Broadcast Glass Skin (the card)
   ================================ */

#verdictShell{
  /* Local shell lighting — governed by brand blue (NOT role colors) */
  --mi-v-alpha: 0.16;
  --mi-v-border: 0.26;
  --mi-v-blur: 18px;

  position: relative;
  border-radius: 18px;

  z-index: 10;
  padding-top: 18px;
}

/* LEFT: Verdict copy block */
#verdictShell .mi-verdict-main{
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-self: stretch;
  position: relative;
  min-width: 0;
  padding: 10px 14px 8px 0;

  background:
    radial-gradient(
      120% 135% at 0% 4%,
      rgb(var(--mi-owner-rgb, 148 163 184) / 0.10),
      transparent 34%
    ),
    radial-gradient(
      105% 125% at 12% 12%,
      rgb(var(--mi-owner-tertiary-rgb, 148 163 184) / 0.08),
      transparent 26%
    );

  border-radius: 14px;
}

#verdictShell .mi-scorebug-top{
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

#verdictShell .mi-scorebug-kicker{
  align-self: stretch;
  margin-top: 8px;
  display: flex;
  width: 104px;
  position: relative;

  font-size: 22px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgb(var(--mi-owner-secondary-rgb, 226 232 240) / 0.74);

  text-shadow:
    0 0 10px rgb(var(--mi-owner-tertiary-rgb, 148 163 184) / 0.10),
    0 2px 8px rgba(0,0,0,0.26);
}

/* subtle divider line inside rail */
#verdictShell .mi-scorebug-kicker::after{
  content:"";
  position:absolute;
  top: 6px;
  right: 0;
  bottom: 6px;
  width: 2px;

  background: linear-gradient(
    to bottom,
    rgb(var(--mi-owner-secondary-rgb, 148 163 184) / 0.72),
    rgb(var(--mi-owner-tertiary-rgb, 148 163 184) / 0.54),
    rgb(var(--mi-owner-rgb, 148 163 184) / 0.28)
  );

  box-shadow:
    0 0 10px rgb(var(--mi-owner-tertiary-rgb, 148 163 184) / 0.16),
    0 0 18px rgb(var(--mi-owner-rgb, 148 163 184) / 0.08);
}

#verdictShell .mi-scorebug-line{
  font-size: 26px;
  line-height: 1.08;
  font-weight: 860;
  color: rgba(248,250,252,0.97);
  text-wrap: balance;
  max-width: 62ch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 160px;
  min-width: 0;
}

/* ================================
   RIGHT: Evidence rail
   ================================ */

#verdictShell .mi-verdict-rail{
  position: relative;
  display:flex;
  flex-direction: column;
  gap: 16px;
  align-items: stretch;
}

/* slightly larger interior for “real card” feel */
#verdictShell .mi-verdict-metrics-tile .flip-tile-inner{
  padding: 14px 14px 12px;
}

/* front */
#verdictShell .mi-verdict-metrics-tile .tile-front{
  display: grid;
  gap: 10px;
  justify-items: center;
  text-align: center;
}

#verdictShell .mi-metrics-hint{
  font-size: 10.5px;
  font-weight: 850;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(148,163,184,0.78);
  display:inline-flex;
  align-items:center;
  gap: 8px;
}

#verdictShell .mi-metrics-hint::before{
  content:"↻";
  display:inline-block;
  width: 18px;
  height: 18px;
  line-height: 18px;
  text-align:center;
  border-radius: 999px;
  background: rgba(9,9,15,0.55);
  transform: translateY(-0.5px);
}

/* “interactive” cues when CLOSED */
#verdictShell:not(.scorecard-open) .mi-verdict-metrics-tile{
  cursor: pointer;
  will-change: transform, box-shadow, border-color;
}

#verdictShell:not(.scorecard-open) .mi-verdict-metrics-tile::after{
  content:"";
  position:absolute;
  top:0;
  right:0;
  width: 46px;
  height: 46px;
  background: linear-gradient(135deg,
    rgba(255,255,255,0.12),
    rgba(255,255,255,0.00) 60%);
  clip-path: polygon(100% 0, 0 0, 100% 100%);
  opacity: 0.28;
  pointer-events:none;
}

/* back */
#verdictShell .mi-verdict-metrics-tile .tile-back{
  display: flex;
  gap: 12px;
  padding: 6px;
  text-align: center;
  align-items: center;
  justify-content: center;
  padding: 18px 20px;
}

#verdictShell .mi-metrics-back-title{
  font-size: 16px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(226,232,240,0.88);
}

#verdictShell .mi-metrics-back-text{
  font-size: 16px;
  font-weight: 600px;
  line-height: 1.40;
  color: var(--mi-text-primary);
  max-width: 100%;
  max-height: 100%;
  text-align: center;
  overflow: hidden;
  text-wrap: balance;
}

#verdictShell .mi-metrics-open-btn{
  justify-self: start;
  padding: 9px 12px;
  border-radius: 12px;
}

/* ---- Primary CTA (button) ---- */
#verdictShell .mi-verdict-actions-rail{
  display:flex;
  justify-content:center;
  padding: 0;
  border: 0;
}

/* The button itself */
#verdictShell .mi-evidence-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;

  font-size: 15px;
  font-weight: 850;
  letter-spacing: 0.01em;

  padding: 12px 16px;
  border-radius: 999px;

  color: rgba(226,232,240,0.92);
}

#verdictShell .mi-evidence-toggle .mi-chev{
  transition: transform 180ms ease;
  opacity: 0.9;
}

/* Chevron rotates when OPEN (JS adds .scorecard-open + aria-expanded) */
#verdictShell.scorecard-open #miEvidenceToggle .mi-chev{
  transform: rotate(180deg);
}

#verdictShell .mi-verdict-footer{
  display:flex;
  justify-content:center;
}

#verdictShell .mi-verdict-disclaimer{
  display: block;
  line-height: 1.35;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.02em;
  text-transform: none;
  color: rgba(148,163,184,0.72);
  text-align:center;
  max-width: 88ch;
  opacity: 0.72;
}

/* ================================
   Lean tiers + winner hue (existing JS hooks)
   ================================ */

#verdictShell.mi-lean-coin   { --mi-v-alpha: 0.14; --mi-v-border: 0.30; --mi-v-blur: 14px; }
#verdictShell.mi-lean-slight { --mi-v-alpha: 0.20; --mi-v-border: 0.46; --mi-v-blur: 18px; }
#verdictShell.mi-lean-solid  { --mi-v-alpha: 0.26; --mi-v-border: 0.62; --mi-v-blur: 22px; }
#verdictShell.mi-lean-heavy  {
  --mi-v-alpha: 0.32;
  --mi-v-border: 0.76;
  --mi-v-blur: 26px;
}

/* Mirror lens: force both cards to use the mirror accent (ignore cind/fav tag colors) */
#analysisShell[data-lens="chalk_mirror"] .team-card-header .team-role-pill,
#analysisShell[data-lens="chaos_mirror"] .team-card-header .team-role-pill,
#analysisShell[data-lens="neutral_mirror"] .team-card-header .team-role-pill{
  color: var(--mi-role-active);
}

/* Mirror lens: neutralize the old cind/fav shadows so the mirror hue reads cleanly */
#analysisShell[data-lens="chalk_mirror"] .team-card-header .team-role-pill,
#analysisShell[data-lens="chaos_mirror"] .team-card-header .team-role-pill,
#analysisShell[data-lens="neutral_mirror"] .team-card-header .team-role-pill{
  text-shadow: 0 0 6px rgba(var(--mi-role-active-rgb), 0.65), 0 0 12px rgba(var(--mi-role-active-rgb), 0.45);
}

/* =========================================================
   SCORECARD CTA — PUT IT IN ITS OWN ROW (NO OVERLAP)
   Paste at VERY BOTTOM of styles2.css
   ========================================================= */

/* 2) Undo the “absolute floating bar” so it can’t overlap anything */
#verdictShell .mi-verdict-actions.mi-verdict-actions-rail{
  position: static !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
  width: 100% !important;
  z-index: auto !important;
  pointer-events: auto !important;

  display: flex;
  justify-content: center;   /* keep centered like you want */
  align-items: center;

  margin: 0;
  padding: 0;
}

/* 3) Make the CTA intentionally NOT full-width */
#miEvidenceToggle.mi-evidence-toggle{
  width: min(560px, calc(100% - 56px)); /* narrower + safe padding on small screens */
  max-width: 560px;
}

/* 4) Ensure the rail/flip-tile column can still breathe vertically */
#verdictShell .mi-verdict-rail{
  align-self: stretch;
}
  
#verdictShell .mi-verdict-metrics-tile{
  min-height: 280px; /* keeps presence even if the left side is short */
  border-radius: 18px;
  background: rgba(9,9,15,0.52);
  box-shadow:
    0 22px 54px rgba(0,0,0,0.55),
    0 0 0 1px rgba(255,255,255,0.03) inset;
  overflow: hidden;
  transform: translateZ(0);
}

/* glass + sheen + scanline */
#verdictShell::before{
  content: none;
  display: none;
  position:absolute;
  top: 12px;
  bottom: 12px;
  left: 12px;
  width: 3px;

  border-radius: 3px;
  background: rgba(249,115,22,0.40); /* orange, toned down */
  opacity: 0.55;

  pointer-events:none;
}

/* glass sheen (separate layer so it doesn’t fight the accent bar) */
#verdictShell::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;

  background:
    radial-gradient(980px 280px at 50% 0%,
      rgba(148,163,184, 0.10),
      rgba(0,0,0,0) 62%),
    linear-gradient(180deg,
      rgba(255,255,255,0.03),
      rgba(255,255,255,0.00) 42%);

  pointer-events:none;

  /* restrained drift */
  background-size: 120% 120%, 100% 100%;
  background-position: 50% 0%, 0% 0%;
  animation: miVerdictDrift 11s ease-in-out infinite alternate;

  opacity: 0.40; /* <- this is the “tone down” lever */
}

@keyframes miVerdictDrift{
  0%   { background-position: 48% 0%, 0% 0%; }
  100% { background-position: 52% 0%, 0% 0%; }
}
@keyframes miScanBreath{
  0%,100% { opacity: 0.16; }
  50%     { opacity: 0.23; }
}

/* Verdict: Scorebug top = logo rail + headline */
#verdictShell .mi-scorebug-top{
  width: 100%;
  max-width: 92ch;
  padding-left: 12px; /* clears the accent rail */

  display: grid;
  grid-template-columns: 96px 1fr; /* rail + content */
  column-gap: 18px;
  row-gap: 12px;
  align-items: start;

  text-align: left;
}

/* Rail column */
#verdictShell .mi-scorebug-kicker{
  width: 96px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 2px;
  position: relative;
  align-self: stretch;
}

.mi-scorebug-top{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Logo inside the rail */
#verdictShell .mi-vert-logo{
  display:block;
  width: 100%;
  max-width: 86px;
  height: auto;
  object-fit: contain;
  opacity: 0.96;
}

/* Kicker gets a bit cleaner + more “broadcast” */
#verdictShell .mi-scorebug-kicker{
  font-size: 22px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(226,232,240,0.74);
}

/* Main verdict line: slightly more confident, better wrap */
#verdictShell .mi-scorebug-line{
  font-size: 26px;
  line-height: 1.08;
  font-weight: 860;
  color: rgba(248,250,252,0.97);
  text-wrap: balance;
  max-width: 62ch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 160px;
}

/* Score module: “scorebug capsule” */
#verdictShell .mi-scorebug-score{
  display: grid;
  justify-items: end;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 14px;
  box-shadow: 0 16px 34px rgba(0,0,0,0.44);
  transition: transform 160ms ease, box-shadow 220ms ease, border-color 180ms ease;
}

#verdictShell .mi-scorebug-metric{
  display: flex;
  justify-items: center;
  align-items: center;
  flex-direction: column;
  gap: 4px;
  min-width: 128px;
}

#verdictShell .mi-scorebug-metric--gap{ 
  min-width: 96px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  display: flex;
  font-size: 22px;
  font-weight: 900;
}

#verdictShell .mi-scorebug-score-label{
  font-size: 16px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(148,163,184,0.82);
}

#verdictShell .mi-scorebug-score-value{
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 0.02em; /* a touch less “spaced out” */
  color: rgba(226,232,240,0.96);
  text-shadow: 0 0 14px rgba(255,255,255,0.10);
}

/* Support lines: more structured and readable */
#verdictShell .mi-verdict-support{
  margin-top: 12px;
  padding: 10px 0 2px 12px;
  display: grid;
  gap: 8px;
}

/* Actions row: feels like a “details tab” */
#verdictShell .mi-verdict-actions{
  margin-top: 12px;
  padding: 12px 0 10px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  border-top: 1px solid rgba(148,163,184,0.16);
}

#verdictShell .mi-evidence-preview{
  font-size: 12px;
  line-height: 1.25;
  color: rgba(148,163,184,0.90);
  max-width: 70ch;
}

/* Toggle: more “pill tab” and clearer hover */
#verdictShell .mi-evidence-toggle{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(9,9,15,0.58);
  color: rgba(226,232,240,0.92);
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, box-shadow 160ms ease;
}

#verdictShell .mi-evidence-toggle:hover{
  transform: translateY(-1px);
  background: rgba(9,9,15,0.74);
  box-shadow: 0 16px 30px rgba(0,0,0,0.35);
}

#verdictShell .mi-evidence-toggle .mi-chev{
  transition: transform 180ms ease;
  opacity: 0.9;
}

/* Stronger lean = slightly more energy in the accent rail */
#verdictShell.mi-lean-solid .mi-verdict-shell-inner::before{
  animation: miRailPulse 3.0s ease-in-out infinite;
}
#verdictShell.mi-lean-heavy .mi-verdict-shell-inner::before{
  animation: miRailPulse 2.2s ease-in-out infinite;
}
@keyframes miRailPulse{
  0%,100% { opacity: 0.72; }
  50%     { opacity: 0.98; }
}

/* =========================================================
   VERDICT CTA — ROW 2 BAND (authoritative)
   Purpose:
   - CTA lives as its own centered band beneath the verdict grid
   - No rail placement, no floating/overlap hacks
   ========================================================= */

/* Row 2: CTA band sits directly under the grid */
#verdictShell .mi-verdict-shell-inner > .mi-verdict-actions.mi-verdict-actions-rail{
  position: static !important;
  inset: auto !important;
  transform: none !important;

  display: flex;
  justify-content: center;
  align-items: center;

  width: 100%;
  margin: 0;
  padding: 0;
}

/* Button: centered control, intentionally not full-width */
#verdictShell #miEvidenceToggle.mi-evidence-toggle{
  width: min(560px, calc(100% - 56px));
}

/* Chevron: subtle */
#verdictShell #miEvidenceToggle .mi-chev{
  opacity: 0.85;
}

#verdictShell .mi-verdict-rail::before{
  content:"";
  position:absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 1px;
  opacity: 0.85;
  pointer-events: none;
}

#verdictShell .mi-verdict-rail::before{
  content: "";
  position: absolute;
  left: -14px;           /* sits in the grid gap */
  top: 6px;
  bottom: 6px;
  width: 1px;

  box-shadow: 0 0 0 1px rgba(0,0,0,0.15);
}

/* Subtle “panel edge” on the left content column for separation */
#verdictShell .mi-verdict-main{
  position: relative;
  padding-right: 18px; /* balances rail padding */
}

/* Row 2 CTA band: hard separation line + its own “band” feel */
#verdictShell .mi-verdict-shell-inner > .mi-verdict-actions.mi-verdict-actions-rail{
  position: relative;
  padding-top: 16px;
  margin-top: 2px;
}

/* Metrics tile: slightly clearer frame so it reads as its own module */
#verdictShell #miVerdictMetricsTile{
  box-shadow:
    0 14px 30px rgba(0,0,0,0.44),
    0 0 0 1px rgba(0,0,0,0.20) inset;
}

/* =========================================================
   Verdict Rail Scorebug — Sharper Dividers + Clear Team Split
   Targets: .mi-scorebug-grid inside #miVerdictMetricsTile (front face)
   ========================================================= */

#miVerdictMetricsTile.mi-verdict-metrics-tile{
  /* Sharper outer edge + stronger inset definition */
  border: 2px solid rgba(148,163,184,0.60);
  box-shadow:
    0 24px 48px rgba(0,0,0,0.65),
    inset 0 0 0 1px rgba(0,0,0,0.35);
}

#miVerdictMetricsTile.mi-verdict-metrics-tile .tile-front{
  padding: 16px 16px 14px;
}

/* --- Hard vertical divider between Team A / Team B --- */
#miVerdictMetricsTile .mi-scorebug-grid::before{
  display: none;
}

/* Slightly different sheen per side (subtle but clarifies split) */
#miVerdictMetricsTile .mi-scorebug-team--a{
  background: linear-gradient(
    180deg,
    rgba(var(--team-a-primary-rgb, 148 163 184), 0.08),
    rgba(255,255,255,0.01)
  );
}

#miVerdictMetricsTile .mi-scorebug-team--b{
  background: linear-gradient(
    180deg,
    rgba(var(--team-b-primary-rgb, 148 163 184), 0.08),
    rgba(255,255,255,0.01)
  );
}

#miVerdictMetricsTile .mi-scorebug-team-line + .mi-scorebug-team-line{
  border-top: 1.5px solid rgba(148,163,184,0.35);
}

/* Labels/value contrast: labels muted, numbers crisp */
#miVerdictMetricsTile .mi-scorebug-mini-label{
  opacity: 0.78;
  font-weight: 700;
  letter-spacing: 0.25px;
}

#miVerdictMetricsTile .mi-scorebug-mini-value{
  font-variant-numeric: tabular-nums;
  font-weight: 950;
  opacity: 0.98;
}

#miVerdictMetricsTile .mi-scorebug-gap-label{
  font-size: 14px;
  font-weight: 900;
  opacity: .95;
}

#miVerdictMetricsTile .mi-scorebug-gap-value{
  font-variant-numeric: tabular-nums;
  font-weight: 950;
  font-size: 16px;
  letter-spacing: 0.3px;
}

/* Footer hint: keep it small, but give it a cleaner anchor */
#miVerdictMetricsTile .mi-scorebug-footer{
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  padding-top: 0;
  margin-top: auto;
  position: static !important;
  padding-bottom: 2px;
}

#miVerdictMetricsTile .mi-metrics-hint{
  font-size: 11px;
  opacity: 0.70;
  letter-spacing: 0.2px;
}

/* Make hint more subtle since it’s now peripheral */
#miVerdictMetricsTile .mi-metrics-hint{
  font-size: 8px;
  opacity: 0.55;
}

/* =========================================================
   Winner Emphasis (Subtle, Broadcast-Style)
   ========================================================= */

#verdictShell.mi-winner-a .mi-scorebug-team--a,
#verdictShell.mi-winner-b .mi-scorebug-team--b{
  border-color: rgba(255,255,255,0.90);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.65),
    0 0 0 2px rgba(var(--mi-winner-primary-rgb, 148 163 184), 0.22),
    0 0 22px rgba(var(--mi-winner-primary-rgb, 148 163 184), 0.16);
}

#verdictShell[data-color-proximity="close"].mi-winner-a .mi-scorebug-team--b,
#verdictShell[data-color-proximity="close"].mi-winner-b .mi-scorebug-team--a{
  opacity: 0.82;
  filter: saturate(0.78) brightness(0.92);
}

/* =========================================================
   SCOREBUG: let grid fill tile + scale up content
   Paste at VERY BOTTOM so it overrides earlier rules
   ========================================================= */

#miVerdictMetricsTile .flip-tile-inner{
  height: 100%;
}

#miVerdictMetricsTile .mi-scorebug-team{
  padding: 14px 14px 12px;
  border-radius: 12px;
  border: 2px solid rgba(148,163,184,0.38);
  background: linear-gradient(180deg,
    rgba(255,255,255,0.04),
    rgba(255,255,255,0.01)
  );
  box-shadow: 
    inset 0 0 0 1px rgba(0,0,0,0.30),
    0 2px 10px rgba(0,0,0,0.35);
}

/* Bigger type across the module */
#miVerdictMetricsTile .mi-scorebug-team-name{
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.1px;
  line-height: 1.1;
  padding-bottom: 15px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(148,163,184,0.55);
}

#miVerdictMetricsTile .mi-scorebug-team-line{
  font-size: 13px;
}

#miVerdictMetricsTile .mi-scorebug-gap{
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  align-self: stretch;
  justify-content: center;
  gap: 50px;

  padding: 10px 10px;
  border-radius: 12px;

  /* Strong rule + darker band so it reads as a module */
  border: 2px solid rgba(148,163,184,0.60);
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.04),
    rgba(0,0,0,0.22)
  );
  box-shadow: 
    inset 0 0 0 1px rgba(0,0,0,0.55),
    0 4px 14px rgba(0,0,0,0.45);
}

#miVerdictMetricsTile .mi-scorebug-gap-label{
  font-size: 18px;
  align-items: center;
}

#miVerdictMetricsTile .mi-scorebug-gap-value{
  font-size: 20px;
}

#miVerdictMetricsTile .mi-metrics-hint{
  font-size: 11px;
  opacity: 0.58;
}

#miVerdictMetricsTile .flip-tile-inner,
#miVerdictMetricsTile .tile-face{
  height: 100%;
}

/* =========================================================
   RIGHT TILE ONLY — fill + scale inside #miVerdictMetricsTile
   Paste at VERY BOTTOM
   ========================================================= */

#miVerdictMetricsTile .flip-tile-inner,
#miVerdictMetricsTile .tile-face{
  height: 100%;
}

#miVerdictMetricsTile .tile-front{
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* content up top, footer down */
  gap: 14px;
  padding: 18px 18px 16px;
}

/* TEAM PANELS stretch */
#miVerdictMetricsTile .mi-scorebug-team{
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Make Base/Match block center nicely while panel grows */
#miVerdictMetricsTile .mi-scorebug-team-lines{
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  align-content: center;
  gap: 10px;
}

/* MI GAP row spans both columns */
/* MI GAP row spans both columns */
#miVerdictMetricsTile .mi-scorebug-gap{
  grid-column: 1 / -1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 12px;
  align-self: stretch;
}

.mi-scorebug-gap-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

/* =========================================================
   FIX: Remove “blue” dead space + let score grid fill tile
   Paste at VERY BOTTOM of styles2.css
   ========================================================= */

/* 1) Kill the double-padding source (this is the big blue slab) */
#miVerdictMetricsTile .flip-tile-inner{
  padding: 0 !important;
  height: 100%;
}

/* 2) Stop using flex + space-between (creates fake empty space) */
#miVerdictMetricsTile .tile-front{
  height: 100%;
  display: grid !important;
  grid-template-rows: 1fr auto;   /* grid area + footer row */
  align-content: stretch;
  gap: 10px;
  padding: 14px 14px 12px !important;
  min-height: 0;
}

/* 4) Make each team panel stretch to fill its row height */
#miVerdictMetricsTile .mi-scorebug-team{
  height: auto !important;        /* undo any forced height */
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;        /* centers the Base/Match block nicely */
}

/* 5) Footer stays bottom, but NOT absolute (no reserved padding hacks) */
#miVerdictMetricsTile .mi-scorebug-footer{
  position: static !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* =========================================================
   VERDICT SHELL — INNER CONTENT WRAPPER (single source of truth)
   ========================================================= */

#verdictShell .mi-verdict-shell-inner{
  position: relative;            /* anchors ::before accent */
  display: flex;
  flex-direction: column;

  padding: 12px 16px;            /* controlled, not “ballroom” */
  gap: 12px;

  border-radius: 14px;           /* subtle inner plate feel */
}

/* LEFT ACCENT BAR — intentional, full-height, restrained */
#verdictShell .mi-verdict-shell-inner::before{
  content:"";
  position:absolute;

  left: 10px;
  top: 12px;
  bottom: 12px;
  width: 3px;

  border-radius: 999px;
  opacity: 0.55;
  pointer-events: none;
}

#verdictShell .mi-verdict-shell-inner > 
.mi-verdict-actions.mi-verdict-actions-rail {
  padding-top: 4px;
}

/* =========================================================
   FORCE #miVerdictMetricsTile FRONT FACE TO FILL + STRETCH
   Paste at VERY BOTTOM of styles2.css
   ========================================================= */

#verdictShell #miVerdictMetricsTile .tile-face.tile-front{
  /* override the "centered pack" behavior */
  align-content: stretch !important;
  justify-items: stretch !important;
  place-content: stretch !important;

  /* give it a real layout model that can allocate height */
  display: grid !important;
  grid-template-rows: 1fr auto !important;  /* main grid + footer row */
  height: 100% !important;
  min-height: 0 !important;

  /* keep your padding, but ensure it's the only padding source */
  padding: 14px 14px 12px !important;
}

/* the score grid becomes the 1fr “main” region */
#verdictShell #miVerdictMetricsTile .mi-scorebug-grid{
  align-content: stretch !important;
  align-items: stretch !important;
  min-height: 0 !important;
}

/* make the two team cards stretch within their row */
#verdictShell #miVerdictMetricsTile .mi-scorebug-team{
  align-self: stretch !important;
  height: 100% !important;
}

/* =========================================================
   MI VERDICT METRICS TILE — FINAL LAYOUT (AUTHORITATIVE)
   Goal: make the score grid + team panels truly FILL the tile
   Paste at VERY BOTTOM and remove older conflicting blocks.
   ========================================================= */

#miVerdictMetricsTile .flip-tile-inner{
  padding: 0 !important;
  height: 100%;
}

/* Front face becomes a 2-row grid:
   Row 1 = score area (fills)
   Row 2 = footer hint (natural height) */
#miVerdictMetricsTile .tile-front{
  height: 100%;
  min-height: 0;
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto;
  align-content: stretch;
  gap: 10px;
  padding: 12px 12px 10px !important;
}

/* Score grid fills Row 1 */
#miVerdictMetricsTile .mi-scorebug-grid{
  min-height: 0;
  width: 100%;
  height: 100%;

  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: minmax(0, 1fr) auto; /* team row truly fills */
  gap: 12px 14px;

  align-items: stretch;
  justify-items: stretch;
  align-content: stretch;

  position: relative; /* keeps your ::before divider anchored */
}

/* Team panels: stretch fully */
#miVerdictMetricsTile .mi-scorebug-team{
  min-height: 0;
  align-self: stretch;
  justify-self: stretch;

  display: flex;
  flex-direction: column;
}

/* IMPORTANT:
   Stop centering (centering causes “floating” look).
   Instead, let the content distribute vertically. */
#miVerdictMetricsTile .mi-scorebug-team-lines{
  flex: 1 1 auto;
  min-height: 0;

  display: flex;
  flex-direction: column;
  justify-content: space-between; /* makes the panel feel “filled” */
  gap: 10px;
}

/* Each Base/Match line stays tight and aligned */
#miVerdictMetricsTile .mi-scorebug-team-line{
  margin: 0;
  padding: 6px 0;
}

/* MI GAP row stays natural but stretches horizontally */
#miVerdictMetricsTile .mi-scorebug-gap{
  grid-column: 1 / -1;
  align-self: stretch;
}

/* Footer stays in Row 2 (no absolute positioning, no reserved padding hacks) */
#miVerdictMetricsTile .mi-scorebug-footer{
  position: static !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* =========================================================
   VERDICT LINE (Concept 1 + 3 + 6)
   Headline + Subdeck + Team Anchoring + Lean Intensity
   (presentation-only; verdict text generation unchanged)
   ========================================================= */

#verdictShell .mi-scorebug-line.is-structured{
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-wrap: pretty;
}

/* Headline (Sentence 1) */
#verdictShell .mi-scorebug-line.is-structured .mi-verdict-headline{
  font-size: 32px;
  line-height: 1.06;
  font-weight: 880;
  letter-spacing: -0.02em;
  color: rgba(249,246,238,0.94);
  text-wrap: balance;

  text-shadow:
    0 0 14px rgb(var(--mi-owner-tertiary-rgb, 148 163 184) / 0.10),
    0 3px 14px rgba(0,0,0,0.34);
}

/* Subdeck (Sentence 2) */
#verdictShell .mi-scorebug-line.is-structured .mi-verdict-why{
  font-size: 16px;
  line-height: 1.34;
  margin-top: 16px;
  font-weight: 560;
  letter-spacing: -0.005em;
  color: rgba(241,245,249,0.88);
  max-width: 62ch;

  text-shadow:
    0 0 10px rgb(var(--mi-owner-tertiary-rgb, 148 163 184) / 0.06),
    0 2px 10px rgba(0,0,0,0.24);
}

/* Optional “breath mark” divider between headline + subdeck */
#verdictShell .mi-scorebug-line.is-structured .mi-verdict-break{
  display: block;
  height: 1px;
  width: 100%;
  opacity: 0.92;

  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,0.00),
      rgb(var(--mi-owner-secondary-rgb, 148 163 184) / 0.34) 22%,
      rgb(var(--mi-owner-tertiary-rgb, 148 163 184) / 0.30) 50%,
      rgb(var(--mi-owner-secondary-rgb, 148 163 184) / 0.20) 78%,
      rgba(255,255,255,0.00)
    );

  box-shadow:
    0 0 10px rgb(var(--mi-owner-tertiary-rgb, 148 163 184) / 0.08);
}

/* Team-name anchoring */
#verdictShell .mi-team{
  position: relative;
  display: inline-block;
  padding: 0 2px;
  border-radius: 6px;
  color: rgba(248,250,252,0.98);
  white-space: nowrap;

  text-shadow:
    0 0 10px rgb(var(--mi-owner-tertiary-rgb, 148 163 184) / 0.10),
    0 2px 8px rgba(0,0,0,0.22);
}

#verdictShell .mi-team.mi-team--a{
  color: rgb(var(--team-a-primary-rgb, 248 250 252) / 0.98);
}

#verdictShell .mi-team.mi-team--b{
  color: rgb(var(--team-b-primary-rgb, 241 245 249) / 0.92);
}

#verdictShell .mi-team::after{
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 0.06em;
  height: 2px;
  border-radius: 999px;
  transform: translateY(0);
}

#verdictShell .mi-team.mi-team--a::after{
  background:
    linear-gradient(
      90deg,
      rgb(var(--team-a-secondary-rgb, 148 163 184) / 0.76),
      rgb(var(--team-a-tertiary-rgb, 148 163 184) / 0.92),
      rgb(var(--team-a-primary-rgb, 148 163 184) / 0.82)
    );
  opacity: 0.72;
  box-shadow:
    0 0 8px rgb(var(--team-a-tertiary-rgb, 148 163 184) / 0.18);
}

#verdictShell .mi-team.mi-team--b::after{
  background:
    linear-gradient(
      90deg,
      rgb(var(--team-b-secondary-rgb, 148 163 184) / 0.60),
      rgb(var(--team-b-tertiary-rgb, 148 163 184) / 0.82),
      rgb(var(--team-b-primary-rgb, 148 163 184) / 0.70)
    );
  opacity: 0.56;
  box-shadow:
    0 0 8px rgb(var(--team-b-tertiary-rgb, 148 163 184) / 0.14);
}

/* =========================================================
   Verdict Kicker Re-role (Brand → Context)
   ========================================================= */

.mi-scorebug-kicker{
  align-self: stretch;
  margin-top: 8px;
  display: flex;
  width: 104px;
  position: relative;
}

/* subtle divider line inside rail */
#verdictShell .mi-scorebug-kicker::after{
  content:"";
  position:absolute;
  top: 6px;
  right: 0;
  bottom: 6px;
  width: 2px;
  background: linear-gradient(
    to bottom,
    rgba(148,163,184,0.55),
    rgba(148,163,184,0.35),
    rgba(148,163,184,0.20)
  );
}

#verdictShell{
  position: relative;

  /* stronger glass feel */
  background:
    linear-gradient(
      180deg,
      rgba(15, 23, 42, 0.88),
      rgba(2, 6, 23, 0.92)
    );

  border: 1px solid rgba(148,163,184,0.28);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    inset 0 0 0 1px rgba(255,255,255,0.02),
    0 20px 48px rgba(0,0,0,0.65),
    0 0 0 1px rgba(148,163,184,0.08);
}

/* Edit button = mode switch */
#editMatchupBtn.matchup-bar-edit{
  border: 1px solid rgba(129,140,248,0.42);
  background: rgba(2,6,23,0.22);
  color: rgba(199,210,254,0.95);

  padding: 7px 12px;
  border-radius: 999px;

  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;

  transition:
    transform 140ms ease,
    background 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    opacity 160ms ease;
}

#editMatchupBtn.matchup-bar-edit:hover{
  border-color: rgba(129,140,248,0.74);
  background: rgba(30,64,175,0.20);
  box-shadow: 0 0 0 3px rgba(129,140,248,0.12);
  transform: translateY(-1px);
}

#editMatchupBtn.matchup-bar-edit:active{
  transform: translateY(0px) scale(0.99);
  opacity: 0.92;
}

/* ================================
   Pre-Matchup Round Dropdown Fix
   ================================ */

#roundDropdown {
  min-width: 220px;          /* restore readable width */
  max-width: 260px;
  padding: 6px 0;
  max-height: 260px;         /* allow full list */
  overflow-y: auto;
  border-radius: 12px;
}

/* Individual round options */
#roundDropdown .round-option {
  padding: 10px 14px;        /* restore touch-friendly height */
  font-size: 14px;
  line-height: 1.3;
  white-space: nowrap;
}

/* Hover / active clarity */
#roundDropdown .round-option:hover {
  background: rgba(255,255,255,0.06);
}

/* Ensure dropdown is not clipped by parent */
.round-select-wrap,
#roundSelectorWrap {
  overflow: visible;
}

/* ==========================================
   SCORE SYNTHESIS (v3.92 table) — broadcast grid
   Matches intentional per-cell alignment from mock
   ========================================== */

#summarySection.card.summary-card{
  padding: 6px 8px;
}

#summarySection .summary-synthesis-wrap{
  width: 100%;
}

#summarySection .summary-synthesis-table{
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;

  background: rgba(2, 6, 23, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 12px;
  overflow: hidden;
}

/* Base cell styling */
#summarySection .summary-synthesis-table th,
#summarySection .summary-synthesis-table td{
  border: 1px solid rgba(148, 163, 184, 0.22);
  padding: 5px;
  vertical-align: middle;
  color: rgba(226, 232, 240, 0.92);
}

/* SCORE SYNTHESIS: force deterministic column sizing */
#summarySection .summary-synthesis-table{
  width: 100%;
  table-layout: fixed;
}

#summarySection .summary-synthesis-table colgroup col:nth-child(1){ width: var(--syn-w-label); }
#summarySection .summary-synthesis-table colgroup col:nth-child(2){ width: var(--syn-w-val); }
#summarySection .summary-synthesis-table colgroup col:nth-child(3){ width: var(--syn-w-final); }
#summarySection .summary-synthesis-table colgroup col:nth-child(4){ width: var(--syn-w-center); }
#summarySection .summary-synthesis-table colgroup col:nth-child(5){ width: var(--syn-w-final); }
#summarySection .summary-synthesis-table colgroup col:nth-child(6){ width: var(--syn-w-val); }
#summarySection .summary-synthesis-table colgroup col:nth-child(7){ width: var(--syn-w-label); }

/* ===== Row 1: Title (centered, merged) ===== */
#summarySection .summary-synthesis-table .syn-title{
  text-align: center;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 13px;
  line-height: 1;

  padding: 12px 10px;
  background: rgba(3, 7, 18, 0.70);
}

/* Allow table headers to behave like normal layout boxes */
#summarySection .summary-synthesis-table .syn-title{
  padding: 6px;
  background: transparent;   /* kicker owns the surface */
}

/* Kicker inside table header */
#summarySection .summary-synthesis-table .syn-kicker{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin: 0 auto;            /* true center inside th */
}

/* ===== Row 2: Team headers (centered) ===== */
#summarySection .summary-synthesis-table .syn-team{
  text-align: center;
  font-weight: 850;
  letter-spacing: 0.06em;
  font-size: 18px;

  background: rgba(15, 23, 42, 0.55);
}

#summarySection .summary-synthesis-table .syn-team span{
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The small spacer between team headers (kept subtle, still “a cell”) */
#summarySection .summary-synthesis-table .syn-center-spacer{
  background: rgba(2, 6, 23, 0.45);
}

/* ===== Ledger columns sizing (mirrored lanes) =====
   7 columns total:
   [A label][A val][A final][center][B final][B val][B label]
*/
#summarySection .summary-synthesis-table col{
  width: auto;
}

/* If you have no <colgroup>, this still behaves well due to fixed layout.
   These widths are “guiding rails” — adjust if you want tighter/wider lanes. */
#summarySection .summary-synthesis-table{
  /* label / val / final / center / final / val / label */
  --syn-w-label: 18%;
  --syn-w-val:   7%;
  --syn-w-final: 9%;
  --syn-w-center: 29%;
}

#summarySection .summary-synthesis-table tr > *:nth-child(1){ width: var(--syn-w-label); }
#summarySection .summary-synthesis-table tr > *:nth-child(2){ width: var(--syn-w-val); }
#summarySection .summary-synthesis-table tr > *:nth-child(3){ width: var(--syn-w-final); }
#summarySection .summary-synthesis-table tr > *:nth-child(4){ width: var(--syn-w-center); }
#summarySection .summary-synthesis-table tr > *:nth-child(5){ width: var(--syn-w-final); }
#summarySection .summary-synthesis-table tr > *:nth-child(6){ width: var(--syn-w-val); }
#summarySection .summary-synthesis-table tr > *:nth-child(7){ width: var(--syn-w-label); }

/* ===== Label cells (centered “Word center” behavior) ===== */
#summarySection .summary-synthesis-table .syn-label{
  text-align: center;         /* intentional: centered label blocks */
  background: rgba(15, 23, 42, 0.35);
}

#summarySection .summary-synthesis-table .syn-label-stack{
  display: flex;
  flex-direction: column;
  align-items: center;        /* center within the cell */
  justify-content: center;
  gap: 4px;
}

#summarySection .summary-synthesis-table .syn-label-main{
  font-weight: 750;
  font-size: 14px;
  letter-spacing: 0.02em;
}

#summarySection .summary-synthesis-table .syn-label-hint{
  font-size: 10px;
  line-height: 1.1;
  color: rgba(203, 213, 225, 0.72);
}

.syn-label-hint {
  display: none;
}

/* ===== Value cells (centered numbers) ===== */
#summarySection .summary-synthesis-table .syn-val{
  text-align: center;         /* intentional: centered x/y/z */
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;

  background: rgba(2, 6, 23, 0.35);
}

/* ===== Final MI tall cells (centered label + big number) ===== */
#summarySection .summary-synthesis-table .syn-final{
  text-align: center;         /* intentional: centered “Final MI / XYZ” */
  background: rgba(3, 7, 18, 0.62);
}

#summarySection .summary-synthesis-table .syn-final-inner{
  display: flex;
  flex-direction: column;
  align-items: center;        /* hard-center content */
  justify-content: center;
  gap: 6px;
  min-height: 154px;          /* gives the tall “merged” feel */
}

#summarySection .summary-synthesis-table .syn-final-label{
  font-size: 14px;
  font-weight: 750;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.85);
}

#summarySection .summary-synthesis-table .syn-final-hint{
  font-size: 11px;
  color: rgba(203, 213, 225, 0.70);
}

#summarySection .summary-synthesis-table .syn-final-value{
  font-size: 20px;
  font-weight: 950;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}

/* ===== Center narrative (left-aligned paragraph inside the big cell) ===== */
#summarySection .summary-synthesis-table .syn-center{
  background: rgba(2, 6, 23, 0.45);
  padding: 12px 12px;
  vertical-align: middle;
}

#summarySection #summarySynLean.syn-lean-line{
  text-align: center;           /* intentional: paragraph reads naturally */
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  color: rgba(226, 232, 240, 0.92);
}

/* ===== Bottom MI Δ row (boxed, label left / value right) ===== */
#summarySection .summary-synthesis-table .syn-bottom-pad{
  background: rgba(2, 6, 23, 0.28);
  padding: 8px 10px;
}

/* --- Score Synthesis Final Readout: Verdict Sentence --- */
#summarySection .syn-center .syn-verdict,
#summarySection .syn-center #synVerdict,
#summarySection .syn-center .syn-center-verdict {
  margin: 0 auto 12px;
  padding: 14px 16px;

  text-align: center;
  line-height: 1.25;

  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.06),
    rgba(15, 23, 42, 0.35)
  );

  border-top: 1px solid rgba(255,255,255,0.18);
  border-bottom: 1px solid rgba(255,255,255,0.10);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 10px 26px rgba(0,0,0,0.28);
}

#summarySection .syn-center .syn-verdict strong,
#summarySection .syn-center #synVerdict strong,
#summarySection .syn-center .syn-center-verdict strong {
  color: rgba(255,255,255,0.96);
}

/* --- Score Synthesis Final Readout: MADNESS DELTA Banner --- */
#summarySection .summary-synthesis-table .syn-delta{
  position: relative;
  isolation: isolate;

  background: linear-gradient(
    to right,
    rgba(15, 23, 42, 0.25),
    rgba(15, 23, 42, 0.72),
    rgba(15, 23, 42, 0.25)
  );

  padding: 14px 14px;
  border-top: 1px solid rgba(255,255,255,0.20);
  border-bottom: 1px solid rgba(255,255,255,0.12);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 12px 30px rgba(0,0,0,0.35);
}

/* keep your layout rules */
#summarySection .summary-synthesis-table .syn-delta{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

/* Center spine glow (broadcast “finality” cue) */
#summarySection .summary-synthesis-table .syn-delta::before{
  content:"";
  position: absolute;
  left: 50%;
  top: 8px;
  bottom: 8px;
  width: 1px;
  transform: translateX(-0.5px);
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(255,255,255,0.18),
    transparent
  );
  opacity: 0.9;
  pointer-events: none;
  z-index: 0;
}

/* Soft horizontal glow band */
#summarySection .summary-synthesis-table .syn-delta::after{
  content:"";
  position: absolute;
  left: 10%;
  right: 10%;
  top: 0;
  height: 100%;
  background: radial-gradient(
    closest-side,
    rgba(255,255,255,0.10),
    rgba(255,255,255,0.00) 70%
  );
  opacity: 0.7;
  pointer-events: none;
  z-index: 0;
}

#summarySection .summary-synthesis-table .syn-delta-label{
  position: relative;
  z-index: 1;

  font-weight: 950;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 18px;
  color: rgba(226, 232, 240, 0.88);

  /* slightly “engraved” */
  text-shadow: 0 1px 0 rgba(0,0,0,0.35);
}

#summarySection .summary-synthesis-table .syn-delta-value{
  position: relative;
  z-index: 1;

  font-weight: 950;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  font-size: 20px;

  color: rgba(255,255,255,0.96);
  text-shadow: 0 1px 0 rgba(0,0,0,0.40);
}

/* ===== Minor polish: keep borders crisp, reduce jitter ===== */
#summarySection .summary-synthesis-table td,
#summarySection .summary-synthesis-table th{
  /* prevents “bold text” from visually shifting heights */
  line-height: 1.15;
}

/* ---------- SAFETY: shrink-wrap prevention ---------- */
#summarySection .summary-col-a,
#summarySection .summary-col-b,
#summarySection .summary-col-mid,
#summarySection .summary-block,
#summarySection .summary-mid-card,
#summarySection .summary-mid-card--explain,
#summarySection .summary-ledger,
#summarySection .summary-line,
#summarySection .summary-gap,
#summarySection .summary-gap-line{
  min-width: 0;
}

/* Quick-slot team dropdown wraps: keep both sides symmetric + slot-contained */
#matchupQuickA[aria-hidden="false"] #teamASelectWrap,
#matchupQuickB[aria-hidden="false"] #teamBSelectWrap{
  position: relative;
  left: auto;
  right: auto;
  margin: 0;
  width: 100%;
  max-width: 100%;
}

/* =========================================================
   GLOSSARY DRAWER — matchup-only overlay
   ========================================================= */

/* Root (kept hidden via [hidden] attribute when unavailable) */
.mi-glossary[hidden] { display: none !important; }

.mi-glossary{
  position: fixed;
  top: 12px;                 /* anchored high */
  left: 8px;                 /* anchored left */
  z-index: 9999;             /* above broadcast surfaces */
  pointer-events: none;      /* enable only when handle/panel are targeted */
}

/* Handle: broadcast-grade horizontal badge */
/* Handle: becomes the ghost rail itself (single cohesive surface) */
.mi-glossary-handle{
  pointer-events: auto;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;

  height: 44px;

  /* Match the panel width so closed state implies the drawer footprint */
  width: min(340px, 36vw);
  max-width: 360px;

  padding: 0 12px;
  border-radius: 16px;

  /* Glass rail */
  background: linear-gradient(
    180deg,
    rgba(15, 23, 42, 0.62),
    rgba(15, 23, 42, 0.42)
  );

  border: 1px solid rgba(255,255,255,0.12);

  box-shadow:
    0 16px 40px rgba(0,0,0,0.42),
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -1px 0 rgba(0,0,0,0.28);

  backdrop-filter: blur(var(--mi-blur, 10px));

  cursor: pointer;

  /* Fade the rail to the right so it dissolves into the background */
  -webkit-mask-image: linear-gradient(
    to right,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 62%,
    rgba(0,0,0,0.55) 78%,
    rgba(0,0,0,0.00) 100%
  );
  mask-image: linear-gradient(
    to right,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 62%,
    rgba(0,0,0,0.55) 78%,
    rgba(0,0,0,0.00) 100%
  );

  transition: transform 180ms ease, filter 180ms ease, opacity 180ms ease;
}

.mi-glossary-handle:hover{
  transform: translateY(-1px);
  filter: brightness(1.06);
}

.mi-glossary-handle:focus{
  outline: none;
  box-shadow:
    0 16px 40px rgba(0,0,0,0.42),
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -1px 0 rgba(0,0,0,0.28),
    0 0 0 2px rgba(var(--mi-role-chalk-mirror-rgb, 56,189,248), 0.30);
}

/* Horizontal label */
.mi-glossary-handle-text{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(249,246,238,0.92);
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(0,0,0,0.45);
  padding: 7px 10px;
  border-radius: 12px;
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.10);
}

/* Panel (overlay; no layout shift) */
.mi-glossary-panel{
  pointer-events: auto;
  position: absolute;
  top: 0;
  left: 0;

  /* Narrow reference width; JS can clamp tighter to “left negative space” */
  max-width: 100px;

  transform: translateX(-12px);
  opacity: 0;
  visibility: hidden;

  border-radius: 16px;
  background: var(--mi-glass-bg, rgba(15, 23, 42, 0.62));
  border: 1px solid var(--mi-border, rgba(255,255,255,0.14));
  box-shadow: var(--mi-shadow, 0 18px 44px rgba(0,0,0,0.45));
  backdrop-filter: blur(var(--mi-blur, 10px));

  transition: transform 180ms ease, opacity 180ms ease, visibility 0s linear 180ms;
  overflow: hidden;
  margin-right: 12px; /* creates visual separation from Verdict Shell lane */
}

/* Open state */
.mi-glossary.mi-glossary--open .mi-glossary-panel{
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
  filter: saturate(0.9);
  transition: transform 180ms ease, opacity 180ms ease, visibility 0s linear 0s;
}

/* When open, hide the slim handle’s label a bit (optional) */
.mi-glossary.mi-glossary--open .mi-glossary-handle{
  opacity: 0.30;
  filter: saturate(0.95);
}

/* Header fixed; body scrolls (single scroll region) */
.mi-glossary-header{
  position: sticky;
  top: 0;
  z-index: 2;

  padding: 4px 8px;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.24),
    rgba(0,0,0,0.10)
  );
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

.mi-glossary-title{
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--mi-ink, rgba(249,246,238,0.92));
}

.mi-glossary-close {
  margin-left: auto;
  line-height: 1;
}

.mi-glossary-header-actions{
  position: absolute;
  top: 10px;
  right: 10px;
}

.mi-glossary-close{
  width: 26px;
  height: 26px;
  border-radius: 10px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 16px;
  line-height: 1;
  font-weight: 800;

  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(249,246,238,0.88);

  cursor: pointer;
  transition: transform 140ms ease, filter 140ms ease, border-color 140ms ease, background 140ms ease;
}

.mi-glossary-close:hover{ transform: translateY(-1px); filter: brightness(1.06); }
.mi-glossary-close:focus{
  outline: none;
  box-shadow: 0 0 0 2px rgba(var(--mi-role-chalk-mirror-rgb, 56,189,248), 0.35);
}

.mi-glossary-body{
  max-height: min(78vh, 720px);
  overflow: auto;  /* unified scroll area */
  padding: 10px 10px 12px 10px;
}

/* TOC sections: use <details> for true multi-expand */
.mi-glossary-toc details{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  margin-bottom: 4px;
  overflow: hidden;
}

.mi-glossary-toc summary{
  list-style: none;
  cursor: pointer;
  user-select: none;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;

  color: var(--mi-ink, rgba(249,246,238,0.86));
}

.mi-glossary-toc summary::-webkit-details-marker{ display: none; }

.mi-glossary-toc .mi-glossary-caret{
  font-size: 12px;
  opacity: 0.75;
  transition: transform 160ms ease;
}

.mi-glossary-toc details[open] .mi-glossary-caret{
  transform: rotate(90deg);
}

.mi-glossary-term-list{
  padding: 6px;
  display: grid;
  gap: 6px;
}

.mi-glossary-term-btn{
  width: 100%;
  text-align: left;

  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: baseline;

  padding: 8px 8px;
  border-radius: 12px;

  background: rgba(0,0,0,0.16);
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--mi-ink, rgba(249,246,238,0.88));

  cursor: pointer;
  transition: transform 140ms ease, filter 140ms ease, border-color 140ms ease;
}

.mi-glossary-term-btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.05);
  border-color: rgba(255,255,255,0.14);
}

.mi-glossary-term-btn:focus{
  outline: none;
  box-shadow: 0 0 0 2px rgba(var(--mi-role-chalk-mirror-rgb, 56,189,248), 0.35);
}

.mi-glossary-term-btn.is-active{
  border-color: rgba(var(--mi-role-chalk-mirror-rgb, 56,189,248), 0.55);
  box-shadow: 0 0 0 1px rgba(var(--mi-role-chalk-mirror-rgb, 56,189,248), 0.20);
}

.mi-glossary-term-name{
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.mi-glossary-term-abbr{
  font-size: 11px;
  color: var(--mi-ink-muted, rgba(249,246,238,0.65));
  padding-left: 8px;
  white-space: nowrap;
  opacity: 0.95;
}

/* Definition viewer */
.mi-glossary-view{
  margin-top: 10px;
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.18);
}

.mi-glossary-view-term{
  font-size: 12px;
  font-weight: 800;
  color: var(--mi-ink, rgba(249,246,238,0.92));
  letter-spacing: 0.01em;
}

.mi-glossary-view-def{
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--mi-ink, rgba(249,246,238,0.78));
}

.mi-glossary.mi-glossary--open::before{
  opacity: 0.20;
}

/* ===============================
   Glossary scrollbar — invisible by default
   =============================== */

/* Firefox */
.mi-glossary-body{
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.28) transparent;
}

/* WebKit (Chrome, Edge, Safari) */
.mi-glossary-body::-webkit-scrollbar{
  width: 8px;               /* slim overlay */
}

.mi-glossary-body::-webkit-scrollbar-track{
  background: transparent; /* remove gutter entirely */
}

.mi-glossary-body::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,0.22);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
  opacity: 0;
  transition: opacity 160ms ease, background 160ms ease;
}

/* Only reveal scrollbar when user is interacting */
.mi-glossary-body:hover::-webkit-scrollbar-thumb,
.mi-glossary-body:active::-webkit-scrollbar-thumb{
  opacity: 1;
  background: rgba(255,255,255,0.35);
}

.mi-glossary-searchrow{
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
}

.mi-glossary-search{
  flex: 1;
  height: 34px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.25);
  color: inherit;
  outline: none;
}

.mi-glossary-search:focus{
  border-color: rgba(255,255,255,0.22);
}

.mi-glossary-searchclear{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.18);
  color: inherit;
  cursor: pointer;
}

/* Term mini-drawer (<details>) */
.mi-glossary-term{
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.16);
}

.mi-glossary-term summary{
  list-style: none;
}
.mi-glossary-term summary::-webkit-details-marker{ display:none; }

.mi-glossary-term-summary{
  width: 100%;
  cursor: pointer;

  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  align-items: baseline;

  padding: 8px 8px;

  color: var(--mi-ink, rgba(249,246,238,0.88));
  transition: transform 140ms ease, filter 140ms ease, border-color 140ms ease;
}

.mi-glossary-term:hover .mi-glossary-term-summary{
  transform: translateY(-1px);
  filter: brightness(1.05);
}

.mi-glossary-term-caret{
  font-size: 12px;
  opacity: 0.70;
  transition: transform 160ms ease, opacity 160ms ease;
  padding-left: 2px;
}

.mi-glossary-term[open] .mi-glossary-term-caret{
  transform: rotate(90deg);
  opacity: 0.85;
}

.mi-glossary-term-def{
  padding: 8px 10px 10px 10px;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 12px;
  line-height: 1.35;
  color: var(--mi-ink, rgba(249,246,238,0.78));
  background: rgba(0,0,0,0.10);
}

.mi-glossary-close:hover{
  transform: translateY(-1px);
  filter: brightness(1.08);
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.20);
}

.mi-glossary-close:active{
  transform: translateY(0px);
  filter: brightness(1.02);
}

.mi-glossary-close:focus{
  outline: none;
  box-shadow: 0 0 0 2px rgba(var(--mi-role-chalk-mirror-rgb, 56,189,248), 0.35);
}

.mi-glossary-searchclear{
  width: 34px;
  height: 34px;
  border-radius: 10px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 18px;
  line-height: 1;
  font-weight: 800;

  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.18);
  color: rgba(249,246,238,0.78);

  cursor: pointer;
  transition: transform 140ms ease, filter 140ms ease, border-color 140ms ease, background 140ms ease, color 140ms ease;
}

.mi-glossary-searchclear:hover{
  transform: translateY(-1px);
  filter: brightness(1.08);
  background: rgba(0,0,0,0.24);
  border-color: rgba(255,255,255,0.20);
  color: rgba(249,246,238,0.90);
}

.mi-glossary-searchclear:active{
  transform: translateY(0px);
}

.mi-glossary-searchclear:focus{
  outline: none;
  box-shadow: 0 0 0 2px rgba(var(--mi-role-chalk-mirror-rgb, 56,189,248), 0.28);
}

.mi-glossary-search{
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.22);
}

.mi-glossary-search::placeholder{
  color: rgba(249,246,238,0.45);
}

.mi-glossary-item{
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.16);
  padding: 4px;
}

.mi-glossary-item-header{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--mi-text-primary);
}

.mi-glossary-item-abbr{
  font-size: 11px;
  opacity: 0.65;
  margin-left: 8px;
  white-space: nowrap;
}

.mi-glossary-item-def{
  margin-top: 2px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  line-height: 1.35;
  color: rgba(249,246,238,0.78);
}

/* Profile Subtotal Row */
.subtotal-row {
  margin-top: 4px;
  padding: 8px 6px 6px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  text-align: center;

  background: linear-gradient(
    to right,
    rgba(255,255,255,0.00),
    rgba(255,255,255,0.04),
    rgba(255,255,255,0.00)
  );

  border-top: 1px solid var(--mi-line-strong);

  font-size: 14px;
  letter-spacing: 0.25px;
  font-weight: 600;
  color: rgba(255,255,255,0.85);

  position: relative;
}

/* Subtle glow edge */
.subtotal-row::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 20%;
  right: 20%;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    var(--mi-brand-blue-a28),
    transparent
  );
}

/* Emphasize the number itself */
.subtotal-row strong,
.subtotal-row .subtotal-value {
  font-weight: 700;
  color: #ffffff;
}

/* ==========================================
   CORE PROFILE SUPPORT ROW
   MI Efficiency + embedded Resume Context
   ========================================== */

.profile-support-row{
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 14px;

  margin-top: 16px;
  padding-top: 9px;

  align-items: stretch;
}

/* elegant divider separating table from support modules */
.profile-support-row::before{
  content: "";
  position: absolute;
  top: 0;
  left: 2px;
  right: 2px;
  height: 1px;
  border-radius: 999px;

  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.00) 0%,
    rgba(148,163,184,0.14) 12%,
    rgba(23,95,195,0.38) 35%,
    rgba(191,219,254,0.58) 50%,
    rgba(23,95,195,0.38) 65%,
    rgba(148,163,184,0.14) 88%,
    rgba(255,255,255,0.00) 100%
  );

  box-shadow:
    0 0 12px rgba(23,95,195,0.14),
    0 0 24px rgba(56,189,248,0.08);
}

/* faint secondary glow under the divider */
.profile-support-row::after{
  content: "";
  position: absolute;
  top: -6px;
  left: 18%;
  right: 18%;
  height: 14px;
  pointer-events: none;
  border-radius: 999px;

  background: radial-gradient(
    ellipse at center,
    rgba(56,189,248,0.12) 0%,
    rgba(56,189,248,0.05) 38%,
    rgba(56,189,248,0.00) 72%
  );
}

/* =========================
   MI EFFICIENCY MODULE
   ========================= */

.mi-eff-module{
  position: relative;
  overflow: hidden;
  isolation: isolate;

  padding: 10px 10px 9px;
  border-radius: 14px;

  background:
    radial-gradient(120% 120% at 50% -10%, rgba(23,95,195,0.12), transparent 52%),
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01) 28%, rgba(0,0,0,0.04) 100%),
    rgba(5, 10, 24, 0.58);

  border: 1px solid rgba(148,163,184,0.16);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 14px 32px rgba(0,0,0,0.34),
    0 0 0 1px rgba(23,95,195,0.08);
}

/* top atmospheric sheen */
.mi-eff-module::before{
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 44%;
  pointer-events: none;

  background: linear-gradient(
    180deg,
    rgba(191,219,254,0.06),
    rgba(191,219,254,0.02) 45%,
    rgba(191,219,254,0.00) 100%
  );
}

/* subtle left accent rail */
.mi-eff-module::after{
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 0;
  width: 2px;
  border-radius: 999px;

  background: linear-gradient(
    180deg,
    rgba(56,189,248,0.00),
    rgba(56,189,248,0.55),
    rgba(23,95,195,0.55),
    rgba(56,189,248,0.00)
  );
  opacity: 0.9;
}

.mi-eff-header{
  position: relative;
  z-index: 1;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0 4px 10px 8px;

  font-size: 16px;
  font-weight: 650;
  letter-spacing: 0.08em;
  color: var(--mi-text-primary);

  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.mi-eff-seg{
  position: relative;
  z-index: 1;

  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;

  padding: 12px 16px;
  border-radius: 12px;

  background:
    linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.01)),
    rgba(255,255,255,0.015);

  border: 1px solid rgba(255,255,255,0.06);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.03),
    0 8px 18px rgba(0,0,0,0.18);
}

.mi-eff-seg:first-of-type{
  margin-top: 0;
}

.mi-eff-seg:hover{
  border-color: rgba(56,189,248,0.18);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012)),
    rgba(23,95,195,0.05);
}

.mi-eff-seg.is-emphasis{
  background:
    radial-gradient(circle at 82% 50%, rgba(56,189,248,0.12), transparent 34%),
    linear-gradient(90deg, rgba(23,95,195,0.16), rgba(255,255,255,0.02));

  border-color: rgba(56,189,248,0.22);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 10px 24px rgba(0,0,0,0.22),
    0 0 18px rgba(56,189,248,0.10);
}

.mi-eff-label{
  display: flex;
  align-items: center;
  gap: 8px;

  min-width: 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: rgba(226, 232, 240, 0.84);
}

.mi-eff-label::before{
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 999px;
  background: rgba(148,163,184,0.42);
  box-shadow: 0 0 0 3px rgba(148,163,184,0.08);
}

.mi-eff-seg:nth-of-type(1) .mi-eff-label::before{
  background: rgba(56,189,248,0.85);
  box-shadow: 0 0 0 3px rgba(56,189,248,0.10);
}

.mi-eff-seg:nth-of-type(2) .mi-eff-label::before{
  background: rgba(251,191,36,0.75);
  box-shadow: 0 0 0 3px rgba(251,191,36,0.08);
}

.mi-eff-seg.is-emphasis .mi-eff-label::before{
  background: rgba(191,219,254,0.95);
  box-shadow: 0 0 0 4px rgba(56,189,248,0.14);
}

.mi-eff-value{
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1;
  color: #f8fafc;
  font-variant-numeric: tabular-nums;
  text-align: right;

  text-shadow: 0 1px 10px rgba(0,0,0,0.32);
}

/* Embedded resume tile now lives inside core profile */
.profile-support-row .context-tile.flip-tile{
  padding: 7px 6px 6px;
  border-radius: 12px;
  background: rgba(2, 6, 23, 0.98);
  border: 1px solid rgba(31, 41, 55, 0.98);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.30), 0 0 0 1px rgba(15, 23, 42, 1) inset;
}

.profile-support-row .context-tile.flip-tile{
  padding: 7px 6px 6px;
  border-radius: 12px;
  background: rgba(2, 6, 23, 0.98);
  border: 1px solid rgba(31, 41, 55, 0.98);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.30), 0 0 0 1px rgba(15, 23, 42, 1) inset;
  align-self: stretch;
}

.profile-support-row .context-tile.flip-tile .flip-tile-inner{
  border-radius: 10px;
  background: radial-gradient(circle at top, rgba(15, 23, 42, 0.98), rgba(15, 23, 42, 0.94));
  border: 1px solid rgba(30, 64, 175, 0.7);
  min-height: 118px;
  height: 100%;
}

.profile-resume-tile .tile-face.tile-front,
.profile-resume-tile .tile-face.tile-back{
  min-height: 104px;
}
.profile-support-row .context-subrow{
  display: block;
}

.profile-support-row .context-tier{
  font-size: 11px;
  line-height: 1.35;
  color: rgba(191, 219, 254, 0.84);
  text-align: center;
}

/* ==========================================
   PROFILE SUBTOTAL + INLINE TOURNAMENT IDENTITY
   ========================================== */

.profile-subtotal{
  white-space:nowrap;
}

.profile-subtotal-row{
  margin-top: 6px;
  padding-top: 6px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, auto);
  gap: 14px;
  align-items: center;
  justify-content: space-between;
}

.subtotal-main{
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  width: 100%;
}

.subtotal-identity{
  justify-self: end;
  min-width: 0;
  max-width: 320px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.identity-inline-kicker{
  margin-bottom: 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.82);
  text-align: left;
}

.identity-inline-main{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.identity-inline-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  padding: 6px 6px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.05em;
  background: rgba(2, 6, 23, 0.72);
  border: 1px solid rgba(255,255,255,0.14);
  color: #e5e7eb;
  font-variant-numeric: tabular-nums;
}

.identity-inline-meta{
  display: flex;
  flex-direction: column;
  min-width: 0;
  text-align: left;
  line-height: 1.1;
}

.identity-inline-label{
  font-size: 12px;
  font-weight: 800;
  color: rgba(248, 250, 252, 0.96);
}

.identity-inline-detail{
  display: none;
}

.identity-inline-cinderella{
  border-color: rgba(34, 197, 94, 0.34);
  box-shadow: 0 0 18px rgba(34, 197, 94, 0.10);
}

.identity-inline-cinderella .identity-inline-badge{
  border-color: rgba(34, 197, 94, 0.50);
  color: #bbf7d0;
  background: radial-gradient(circle at top, rgba(34,197,94,0.16), rgba(2,6,23,0.82));
}

.identity-inline-favorite{
  border-color: rgba(249, 115, 22, 0.34);
  box-shadow: 0 0 18px rgba(249, 115, 22, 0.10);
}

.identity-inline-favorite .identity-inline-badge{
  border-color: rgba(249, 115, 22, 0.50);
  color: #fed7aa;
  background: radial-gradient(circle at top, rgba(249,115,22,0.16), rgba(2,6,23,0.82));
}

.identity-inline-neutral .identity-inline-badge{
  color: #dbeafe;
  border-color: rgba(96, 165, 250, 0.36);
}

.metric-score.score-elite {
  color: #7fd6ff;
  font-weight: 800;
}

.metric-score.score-strong {
  color: #4fb0ff;
  font-weight: 800;
}

.metric-score.score-neutral {
  color: #d7deea;
  font-weight: 700;
}

.metric-score.score-weak {
  color: #ffb3b3;
  font-weight: 800;
}

.metric-score.score-fragile {
  color: #ff6b6b;
  font-weight: 800;
}

@media (max-width: 920px){
  .profile-support-row{
    grid-template-columns: 1fr;
  }

  .profile-subtotal-row{
    grid-template-columns: 1fr;
  }

  .subtotal-identity{
    justify-self: stretch;
  }
}

/* v3.91 — remove residual slack under Total Interaction Leverage (left tile) */
#interactionsSection .interactions-left,
#interactionsSection .interactions-left-tile{
  align-self: start !important;     /* don't stretch with the row */
  height: fit-content !important;   /* shrinkwrap */
}

/* If the leftover is just padding/gap, tighten it slightly */
#interactionsSection .interactions-left-tile{
  padding-bottom: 8px !important;   /* was 12px in your tile */
  gap: 8px !important;              /* was 10px */
}

/* Make sure the totals bar isn't adding a bottom margin */
#interactionsSection #interactionTotalsBar,
#interactionsSection .interaction-totals-bar{
  margin-bottom: 0 !important;
}

/* =========================================================
   v3.91 — INTERACTIONS: FIXED HEIGHT + CONSOLE SCROLL (FINAL)
   - Lock the whole section/tile row to a stable height
   - Right console scrolls internally
   - Left tile does NOT create filler bands
   ========================================================= */

/* 1) Lock the grid row (the two-tile area) */
#interactionsSection .interactions-grid{
  align-items: stretch !important; /* tiles fill the locked height */
  height: 450px !important;        /* <- main knob (try 500–560) */
  max-height: 520px !important;
}

/* 2) Both tiles fill the locked grid height */
#interactionsSection .interactions-left,
#interactionsSection .interactions-right{
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important; /* CRITICAL for inner scrolling */
  overflow: hidden !important;
}

/* 3) Left tile: flex column with totals pinned, table scrolls only if needed */
#interactionsSection .interactions-left-tile{
  height: 100% !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

/* If this wrapper exists, it becomes the left-side scroll zone (only if needed) */
#interactionsSection .interaction-table-wrap{
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: auto !important;
}

/* If you do NOT have .interaction-table-wrap, the table itself can be the scroll zone */
#interactionsSection .interaction-table{
  display: block;              /* allows overflow scrolling */
  max-height: 100% !important; /* constrained by left tile */
  overflow: auto !important;
}

/* Totals pinned to bottom */
#interactionsSection #interactionTotalsBar,
#interactionsSection .interaction-totals-bar{
  flex: 0 0 auto !important;
  margin-top: 10px !important;
}

/* 4) Right tile: true flex column; body is the scroll container */
#interactionsSection .interactions-console-tile{
  height: 100% !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important; /* keep scroll inside rounded corners */
}

/* Scroll only inside the body */
#interactionsSection .int-console-body,
#interactionsSection #interactionConsoleBody{
  flex: 1 1 auto !important;
  min-height: 0 !important;     /* CRITICAL */
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

#interactionsSection {
  margin-bottom: 10px;
}

/* =========================================================
   PROFILE MARKS — FACE-AWARE HEIGHT MODEL
   - FRONT: JS sets --marks-front-h (A/B equalized)
   - BACK: fixed height + internal scroll (never inflates tile)
   ========================================================= */

:root{
  --marks-back-h: 260px;  /* static back footprint */
}

#marksTileA,
#marksTileB{
  --marks-back-h: 350px;
}

/* FRONT footprint (JS-driven) */
#marksTileA,
#marksTileB{
  min-height: var(--marks-front-h, 220px);
}

/* Marks tiles should read as sub-panels inside the card */
#marksTileA,
#marksTileB{
  background: linear-gradient(180deg, rgba(255,255,255,0.03), transparent 60%),
              rgba(0,0,0,0.18);
  border: 1px solid var(--mi-line-weak);
  box-shadow: none; /* avoid nested shadow stacks */
}

#marksTileA .flip-tile-inner,
#marksTileB .flip-tile-inner{
  min-height: var(--marks-front-h, 220px);
  height: var(--marks-front-h, auto);
}

/* Faces fill the inner */
#marksTileA .tile-face,
#marksTileB .tile-face{
  height: 100%;
}

/* BACK: when flipped, inner takes fixed back height */
#marksTileA.is-flipped .flip-tile-inner,
#marksTileB.is-flipped .flip-tile-inner,
#marksTileA.flipped .flip-tile-inner,
#marksTileB.flipped .flip-tile-inner,
#marksTileA[data-face="back"] .flip-tile-inner,
#marksTileB[data-face="back"] .flip-tile-inner{
  min-height: var(--marks-back-h);
  height: var(--marks-back-h);
}

/* Back face layout */
#marksTileA .tile-face.tile-back,
#marksTileB .tile-face.tile-back{
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Back content scrolls inside the fixed back footprint */
#backMarksTileA,
#backMarksTileB{
  flex: 1 1 auto;
  min-height: 0;

  height: var(--marks-back-h);
  overflow: auto;

  /* keep scrollbar from kissing content */
  padding-right: 6px;

  /* allow your fade masks if you use them elsewhere */
}

.mark-subtext {
  display: none;
}

.mi-delta-mark{
  display:inline-block;
  max-width: none;
  width: var(--mi-delta-size);
  height: var(--mi-delta-size);
  height: 1.05em;
  vertical-align: -0.08em;
  flex: 0 0 auto;
}

/* This is the “image-like” finishing touch */
.mi-delta-mark--painted{
  /* soft lift + depth like your reference */
  filter: drop-shadow(0 1px 0 rgba(255,255,255,0.10))
          drop-shadow(0 2px 4px rgba(0,0,0,0.35));
}

/* ===== FIX: keep mark title inside chip (no spill) ===== */
.team-card-marks .mark-chip{
  overflow: hidden;           /* key: prevents “floating” text */
}

/* tighten vertical budget so title fits */
.team-card-marks .mark-icon-plate{
  width: 62px;
  height: 62px;
  padding: 12px 10px;
  border-radius: 16px;
}

.team-card-marks .mark-chip .mark-badge{
  width: 58px;
  height: 58px;
}

/* info block should belong to chip width + not push itself out */
.team-card-marks .mark-info{
  width: 100%;
  margin-top: 6px;
}

/* title: keep the clamp, but reduce reserved space slightly */
.team-card-marks .mark-title{
  margin-top: 0;
  font-size: 12.5px;
  line-height: 1.06;
  min-height: calc(1.06em * 2);
}

/* Center narrative container */
.syn-center-inner{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:10px;
  padding:16px 18px 14px;
}

/* Text block becomes a 2-line stack */
.syn-lean-line{
  max-width:520px;
  margin:0 auto;
  text-align:left;
}

/* Mini headline */
.syn-lean-line .syn-headline{
  display:block;
  font-size:16px;
  line-height:1.15;
  font-weight:850;
  letter-spacing:.2px;
  opacity:.96;
}

/* Micro subline */
.syn-lean-line .syn-subline{
  display:block;
  margin-top:6px;
  font-size:12.5px;
  line-height:1.35;
  font-weight:650;
  opacity:.84;
}

/* Optional risk note (only when you render it) */
.syn-lean-line .syn-risk{
  display:block;
  margin-top:6px;
  font-size:12px;
  line-height:1.25;
  font-weight:650;
  opacity:.78;
}

/* Delta strip reads like a stat bug */
.syn-center-inner .syn-delta{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;

  max-width:520px;
  margin:2px auto 0;
  padding-top:8px;

  border-top:1px solid rgba(255,255,255,0.10);
}

.syn-delta-label{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  letter-spacing:.8px;
  text-transform:uppercase;
  opacity:.72;
  white-space:nowrap;
}

.syn-delta-value{
  font-size:16px;
  font-weight:850;
  letter-spacing:.2px;
  opacity:.96;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

.syn-delta-label .mi-delta-mark{
  height: 1.05em;    /* default feel for small label */
  vertical-align: 0; /* flex handles alignment */
}

/* ========================================================================
   MADNESS INDEX — SESSION ENTRY SCREEN
   Flat broadcast-grade threshold screen
   No glow. No gradient. No gaming styling.
   ======================================================================== */

#mi-entry-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;

  display: flex;
  align-items: center;
  justify-content: center;

  background:
      radial-gradient(
      65% 50% at 50% 50%,
      rgba(0,0,0,0.55) 0%,
      rgba(0,0,0,0.40) 28%,
      rgba(0,0,0,0.20) 52%,
      rgba(0,0,0,0.00) 72%
    ),

    linear-gradient(
      rgba(0,0,0,0.48),
      rgba(0,0,0,0.48)
    ),

    url("assets/img/background/plain-background-2.png") center center / cover no-repeat;

  transition: opacity 320ms ease, visibility 320ms ease;
}

/* Entry Screen Transition */
#mi-entry-screen {
  transition: 
    opacity 450ms ease,
    transform 750ms cubic-bezier(.16, 1, .3, 1),
    visibility 0s linear 700ms;
}

#mi-entry-screen.mi-exit {
  opacity: 0;
  transform: translateY(-40px) scale(0.98);
  pointer-events: none;
  visibility: hidden;
}

/* Optional: subtle logo shrink on exit */
#mi-entry-screen.mi-exit .mi-entry-inner {
  transform: scale(0.96);
  transition: transform 600ms ease;
}

/* Home screen fade-in */
.mi-home-hidden {
  opacity: 0;
  transform: translateY(10px);
}

.mi-home-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 600ms ease 250ms,
              transform 600ms ease 250ms;
}

.mi-entry-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
}

.mi-entry-logo {
  width: clamp(320px, 50vw, 900px);
  height: auto;
  max-height: 55vh;
  object-fit: contain;
  transform: translateY(-2%);
}

#mi-entry-screen:hover .mi-entry-text {
  opacity: 1;
}

/* Prevent scroll while entry is visible */
body.mi-entry-lock {
  overflow: hidden;
}

.mi-entry-button {
  background: transparent;
  border: 1px solid rgba(217, 214, 207, 0.4);
  color: #d9d6cf;

  padding: 14px 32px;

  font-size: 13px;
  letter-spacing: 0.28em;
  text-transform: uppercase;

  cursor: pointer;

  transition: 
    background 200ms ease,
    border-color 200ms ease,
    transform 120ms ease;

  font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
}

.mi-entry-button:hover {
  background: rgba(217, 214, 207, 0.08);
  border-color: rgba(217, 214, 207, 0.8);
}

.mi-entry-button:active {
  transform: translateY(1px);
}

/* ================================
   STUDIO ROOM (Tier 0) — global
   ================================ */

html, body{
  height: 100%;
  background: #000 !important;
}

body{
  position: relative;
  margin: 0;
}

body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  background:
    radial-gradient(1100px 650px at 50% -12%,
      var(--mi-brand-blue-a08),
      transparent 60%
    ),
    radial-gradient(circle at top,
      var(--mi-color-bg-body-alt) 0%,
      var(--mi-color-bg-body) 62%,
      #000 100%
    );
}

/* Ensure your app sits above the room */
.app-shell{
  max-width: 1320px;
  margin: 0 auto;
  padding: 20px 16px 32px;

  background: transparent !important;

  position: relative;
  z-index: 1;
  min-height: 100vh;
}

/* ===== Primary Entry Card (CSV Upload) — Tier 2 with restrained brand emphasis ===== */
.controls-card.is-primary-entry{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  min-height: 200px;
  padding: 20px;
  box-sizing: border-box;
  text-align: center;

  border: 1px solid var(--mi-line);
  box-shadow: var(--mi-depth-1);

  background:
    radial-gradient(120% 120% at 50% -20%,
      var(--mi-brand-blue-a08),
      transparent 60%
    ),
    var(--mi-sheen),
    var(--mi-surface-card);
}

/* Bottom tiles: sub-panels inside a Tier 2 card */
.team-card-bottom .context-tile.flip-tile,
.team-card-marks  .context-tile.flip-tile,
.madness-tile.flip-tile{
  padding: 7px 6px 6px;
  border-radius: 12px;

  background: rgba(0,0,0,0.18);
  border: 1px solid var(--mi-line-weak);

  box-shadow: none; /* avoid shadow stacking inside the card */
}

/* Inner panel */
.team-card-bottom .context-tile.flip-tile .flip-tile-inner,
.team-card-marks  .context-tile.flip-tile .flip-tile-inner,
.madness-tile.flip-tile .flip-tile-inner{
  border-radius: 10px;

  background:
    linear-gradient(180deg, rgba(255,255,255,0.03), transparent 60%),
    rgba(15, 23, 42, 0.70);

  border: 1px solid var(--mi-brand-blue-a18);
}

/* ================================
   CANVAS RULE — app containers should NOT repaint the room
   ================================ */

.app-shell{
  background: transparent !important;
}

/* =========================================================
   FOOTER — QUIET SIGNATURE MODE
   Subtle. Centered. Low weight.
   ========================================================= */

#appFooter.app-footer{
  margin-top: 2px;
  font-size: 10.5px;   /* half-feel scale */
  text-align: center;
  color: var(--mi-text-faint);
}

#appFooter .footer-inner{
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  gap: 6px;
  padding: 6px 10px;

  border-radius: 10px;

  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.02),
    rgba(255,255,255,0.01)
  );

  border: 1px solid rgba(148,163,184,0.12);
  box-shadow: none;
}

/* Disclaimer line */
#appFooter .footer-note{
  display: none;
}

/* Contact container */
#appFooter .footer-contact{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0;
  border: 0;
}

/* Remove divider */
#appFooter .footer-contact::before{
  display: none;
}

/* Label */
#appFooter .footer-contact-label{
  font-size: 10.5px;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(226,232,240,0.55);
  padding-right: 6px;
}

/* Email link — no chip, just refined text */
#appFooter .footer-contact-email{
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;

  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 0.01em;

  color: var(--mi-accent-cyan);
  text-decoration: none;

  opacity: 0.85;
  transition: opacity 140ms ease, color 140ms ease;
}

#appFooter .footer-contact-email:hover{
  opacity: 1;
  color: var(--mi-accent-cyan-strong);
  transform: none;
}

/* === Pre-matchup cockpit: hard guarantee rounded tiles (and rounded halos) === */
.pre-setup-row > .card,
.pre-setup-row > .controls-card,
.pre-setup-row > #matchupSetupCard{
  border-radius: 18px;
}

/* Allow dropdowns to escape the STEP 1 card */
.pre-setup-row > #matchupSetupCard{
  overflow: visible !important;
}

/* Halo targets must also carry the same radius */
.controls-card.is-primary-entry{
  border-radius: 18px;
}

#matchupSetupCard{
  border-radius: 18px;
}

/* When the steps tile is halo'd, keep the radius winning specificity */
.app-shell.csv-loaded #matchupSetupCard{
  border-radius: 18px !important;
}

/* Halo the Steps card AFTER CSV is loaded (override the csv-loaded reset) */
.app-shell.csv-loaded #matchupSetupCard.is-primary-entry{
  border: 1px solid rgba(56, 189, 248, 0.75) !important;
  box-shadow:
    0 0 0 1px rgba(56, 189, 248, 0.45),
    0 0 28px rgba(56, 189, 248, 0.35),
    0 0 60px rgba(56, 189, 248, 0.18),
    0 20px 50px rgba(0, 0, 0, 0.55),
    var(--mi-shadow-card-inset) !important;
  background:
    radial-gradient(140% 140% at 50% -25%, rgba(56, 189, 248, 0.14), transparent 65%),
    var(--mi-grad-card) !important;

  border-radius: 18px;
}

/* =========================================================
   Canonical Halo Handoff (ID-scoped so it always wins)
   ========================================================= */

#datasetCard,
#matchupSetupCard{
  border-radius: var(--mi-radius-card, 18px);
}

/* Only the current next-action card gets the halo */
#datasetCard.is-primary-entry,
#matchupSetupCard.is-primary-entry{
  border: 1px solid rgba(56, 189, 248, 0.75) !important;

  box-shadow:
    0 0 0 1px rgba(56, 189, 248, 0.45),
    0 0 28px rgba(56, 189, 248, 0.35),
    0 0 60px rgba(56, 189, 248, 0.18),
    0 20px 50px rgba(0,0,0,0.55),
    var(--mi-shadow-card-inset) !important;

  background:
    radial-gradient(140% 140% at 50% -25%, rgba(56, 189, 248, 0.14), transparent 65%),
    var(--mi-grad-card) !important;
}

/* =========================================================
   STEP-ROW HALO (per mcRow) — no layout shift, rounded edges
   ========================================================= */

#matchupSetupCard .mc-row{
  position: relative;
  border-radius: 16px; /* gives the halo rounded corners even though the row is “rectangular” */
}

#matchupSetupCard .mc-row > *{
  position: relative;
  z-index: 1; /* keep content above the halo layer */
}

#matchupSetupCard .mc-row.is-primary-entry::before{
  content:"";
  position:absolute;
  inset: 6px;            /* keeps glow off the row dividers */
  border-radius: inherit;
  pointer-events:none;

  /* same “broadcast halo” language as your card halo */
  border: 1px solid rgba(56, 189, 248, 0.75);
  box-shadow:
    0 0 0 1px rgba(56, 189, 248, 0.45),
    0 0 22px rgba(56, 189, 248, 0.30),
    0 0 48px rgba(56, 189, 248, 0.14);

  background:
    radial-gradient(140% 140% at 50% -25%, rgba(56, 189, 248, 0.12), transparent 65%);
}

#matchupSetupCard .matchup-steps{ overflow: visible; }

/* =========================================
   FIX: Team dropdown must render above STEP 2/3 rows
   (raise the active mc-row stacking level)
   ========================================= */

.pre-setup-row #matchupSetupCard .mc-row{
  position: relative; /* creates a z-index hook without changing layout */
  z-index: 0;
}

/* If a team dropdown panel in this row is open, float this row above its siblings */
.pre-setup-row #matchupSetupCard .mc-row:has(.mi-team-dd-panel:not([hidden])){
  z-index: 80;
}

/* Round dropdown open → float STEP 2 row above siblings */
.pre-setup-row #matchupSetupCard .mc-row:has(#roundDropdown:not(.hidden)){
  z-index: 80;
}

/* Stronger CSV status line (always applies inside dataset card) */
#datasetCard #status:empty{
  display:none;
}

#datasetCard #status{
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 6px 10px;
  border-radius: 999px;

  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.01em;

  color: rgba(226, 232, 240, 0.96);
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.20);
  box-shadow: 0 10px 18px rgba(0,0,0,0.35);
}

/* Optional: leading status dot */
#datasetCard #status::before{
  content:"";
  width: 8px;
  height: 8px;
  border-radius: 99px;
  background: rgba(148, 163, 184, 0.8);
}

/* When CSV is loaded, make it feel “armed” */
.app-shell.csv-loaded #datasetCard #status{
  border-color: rgba(34, 197, 94, 0.55);
  background: rgba(34, 197, 94, 0.10);
  box-shadow: 0 10px 18px rgba(0,0,0,0.35), 0 0 12px rgba(34, 197, 94, 0.10);
}

.app-shell.csv-loaded #datasetCard #status::before{
  background: rgba(34, 197, 94, 0.95);
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.25);
}

/* =========================================================
   HOME (Step 1) team dropdowns only
   Uses the new .home-team-select hook so it won't touch quick-edit
   ========================================================= */

/* The wrapper should NOT have a tall fixed height */
#matchupSetupCard .home-team-select{
  height: auto;
  min-height: 0;
  align-self: center;
}

/* Ensure the custom dropdown root doesn't stretch vertically */
#matchupSetupCard .home-team-select .mi-team-dd{
  height: auto !important;
  min-height: 0 !important;
}

/* Make the button a consistent pill height */
#matchupSetupCard .home-team-select .mi-team-dd-btn{
  height: 44px;            /* tune if needed */
  min-height: 44px;
  display: flex;
  align-items: center;
}

#matchupSetupCard .control-row{
  align-items: center;
}

/* =========================================================
   HOME Step 1: stop the team dropdowns from stretching to 240px
   (fixes the giant empty blue blocks)
   ========================================================= */

/* The row is flex; ensure children don't get stretched vertically */
#matchupSetupCard #mcRow1 .control-row{
  align-items: flex-start !important;
}

/* Force the two home wrappers to size to content (not 100%/stretch) */
#matchupSetupCard #teamASelectWrap.home-team-select,
#matchupSetupCard #teamBSelectWrap.home-team-select{
  height: auto !important;
  min-height: 0 !important;
  align-self: flex-start !important;
}

/* Force the custom dropdown root to NOT inherit the 240px height */
#matchupSetupCard #teamASelectWrap.home-team-select .mi-team-dd,
#matchupSetupCard #teamBSelectWrap.home-team-select .mi-team-dd{
  height: auto !important;
  min-height: 0 !important;
  align-self: flex-start !important;
  flex: 0 0 auto !important;
}

/* Give the button a consistent pill height */
#matchupSetupCard #teamASelectWrap.home-team-select .mi-team-dd-btn,
#matchupSetupCard #teamBSelectWrap.home-team-select .mi-team-dd-btn{
  height: 44px !important;
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
}

/* --- Matchup setup: enforce 3 equal rows --- */
#matchupSetupCard .matchup-steps{
  display: grid;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 12px;
  height: 100%;
  min-height: 0;
}

#matchupSetupCard .mc-row{
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center; /* keeps each row compact */
}

/* keep controls from stretching vertically */
#matchupSetupCard .control-row,
#matchupSetupCard .round-control-row,
#matchupSetupCard .matchup-actions-row{
  align-items: center;
}

/* Dropdown popover should anchor to the control, not to a tall parent */
.mi-team-dd,
.select-wrap,
.matchup-quick-slot{
  position: relative;
  overflow: visible;
}

/* The panel should appear directly beneath its control */
.mi-team-dd-panel{
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 999;
}

/* ========== STOP THE HOME ROW FROM STRETCHING EVERYTHING ========== */

/* Whatever your 3-column wrapper is, force items to size to content */
.pre-setup-row,
.home-grid,
.home-row,
.controls-row,
#homeScreenRow {
  align-items: start !important;     /* for flex */
  align-content: start !important;   /* for grid */
}

/* If your home layout is a grid, prevent 1fr rows from becoming huge */
.pre-setup-row,
.home-grid,
#homeScreenRow {
  grid-auto-rows: min-content !important;
}

/* Cards should NOT be "height:100%" unless you explicitly want them to fill viewport */
.controls-card,
#matchupSetupCard,
#loadTournamentCard,
#startMatchupCard {
  height: auto !important;
  min-height: 0 !important;
  align-self: start !important;
}

/* If any of these are flex children with flex:1, kill that */
.controls-card,
#matchupSetupCard,
#loadTournamentCard,
#startMatchupCard {
  flex: 0 0 auto !important;
}

#matchupSetupCard .matchup-steps{
  display: grid;
  grid-template-rows: repeat(3, auto); /* <-- NOT 1fr */
  gap: 12px;
}

/* =========================================================
   PRE-SETUP ROW: 3 equal cards, equal height, no viewport stretch
   ========================================================= */

#preSetupRow.pre-setup-row {
  /* stop behaving like a vertical flex column */
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;

  /* CRITICAL: do NOT fill the viewport */
  height: auto !important;
  min-height: 0 !important;

  align-items: stretch !important; /* equal heights */
  align-content: start !important; /* no vertical distribution weirdness */
}

/* Make each card stretch to the row’s height (equal height) */
#preSetupRow.pre-setup-row > .card.controls-card {
  height: 100% !important;
  min-height: 0 !important;

  /* kill any flex-grow rules that might be inflating them */
  flex: 0 0 auto !important;
  align-self: stretch !important;

}

/* If you have a rule that only inflates primary entry cards, neutralize it in this row */
#preSetupRow.pre-setup-row .controls-card.is-primary-entry {
  height: auto !important;     /* prevents “100% of a tall parent” effects */
  min-height: 0 !important;
}

/* =========================================================
   RULE 1: preSetupRow cards must stay equal-sized ALWAYS
   ========================================================= */

#preSetupRow.pre-setup-row {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;

  /* prevent viewport-driven stretching */
  height: auto !important;
  min-height: 0 !important;

  align-items: stretch !important; /* equal heights */
}

#preSetupRow.pre-setup-row > .card.controls-card {
  height: 100%;
  min-height: 0 !important;
  align-self: stretch !important;

  display: flex;
  flex-direction: column;
}

/* =========================================================
   RULE 2: is-primary-entry must never affect layout sizing
   (only glow/border/visual emphasis)
   ========================================================= */

.controls-card.is-primary-entry,
.matchup-step.is-primary-entry {
  /* nuke any layout-affecting rules */
  height: auto !important;
  min-height: 0 !important;
  flex: 0 0 auto !important;
}

/* If you still want the visual emphasis, keep it here */
.controls-card.is-primary-entry,
.matchup-step.is-primary-entry {
  box-shadow: 0 0 0 1px rgba(56,189,248,.45), 0 0 24px rgba(56,189,248,.18) !important;
  border-color: rgba(56,189,248,.65) !important;
}

/* === Matchup Setup Card: rows should hug content, not stretch into big blocks === */
#matchupSetupCard .matchup-steps{
  display: grid !important;
  grid-template-rows: auto auto auto !important; /* key: NOT 1fr */
  gap: 0 !important; /* you’re already drawing separators */
}

/* Each row should be a normal content block */
#matchupSetupCard .mc-row{
  display: flex;
  flex-direction: column;
  justify-content: flex-start !important; /* stops the “empty square” look */
  align-items: stretch !important;
  min-height: 0 !important;
}

/* Only add spacing where you actually want it */
#matchupSetupCard #mcRow1 { padding-bottom: 12px; }
#matchupSetupCard #mcRow2 { padding-top: 12px; padding-bottom: 12px; }
#matchupSetupCard #mcRow3 { padding-top: 12px; }

/* === IMPORTANT: step highlighting should NOT change sizing === */
#matchupSetupCard .mc-row.is-primary-entry{
  height: auto !important;
  min-height: 0 !important;
  flex: 0 0 auto !important;
}

/* Keep only the visual halo/border/glow here (no layout) */
#matchupSetupCard .mc-row.is-primary-entry{
  border-color: rgba(56, 189, 248, 0.65);
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.18) inset, 0 0 22px rgba(56, 189, 248, 0.10);
}

/* Anchor the dropdown panel to the wrap */
#teamASelectWrap,
#teamBSelectWrap{
  position: relative;
}

/* Ensure the opened panel overlays instead of stretching layout */
.mi-team-dd-panel{
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 5000;
}

/* =========================
   Step 1 controls sizing
   ========================= */

#mcRow1 .control-row{
  display: flex;
  justify-content: center !important;
  gap: 14px !important;
  align-items: center !important;
}

/* each wrap gets a sane width instead of stretching */
#mcRow1 #teamASelectWrap,
#mcRow1 #teamBSelectWrap{
  flex: 0 0 auto !important;
  width: min(320px, 42%) !important;   /* two side-by-side, responsive */
  max-width: 360px !important;
}

/* make the custom dropdown fill its wrap, not the whole card */
#mcRow1 .mi-team-dd{
  width: 100% !important;
}

#mcRow1 .mi-team-dd-btn{
  width: 100% !important;
}

/* QUICK ROUND: keep Round + Sandbox inline */
#matchupQuickRound{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* let both items share the row without forcing a wrap */
#matchupQuickRound #roundQuickSelectWrap,
#matchupQuickRound #miSandboxQuickLabelBar{
  flex: 1 1 0;
  min-width: 0;
}

/* QUICK ROUND (visible): force inline row layout */
#matchupQuickRound[aria-hidden="false"]{
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: nowrap;
}

/* ensure both children participate in the row (no full-width forcing) */
#matchupQuickRound[aria-hidden="false"] #roundQuickSelectWrap,
#matchupQuickRound[aria-hidden="false"] #miSandboxQuickLabelBar{
  position: static !important;
  width: auto !important;
  flex: 1 1 0;
  min-width: 0;
}

/* =========================================================
   QUICK EDIT — Round dropdown should match HOME (#roundDropdown)
   Paste at VERY BOTTOM of styles2.css
   ========================================================= */

/* 0) Undo the earlier "all: unset" nuke if it exists */
#roundDropdownQuick{
  all: revert;
}

/* 1) Panel shell — mirror HOME panel styling */
#roundDropdownQuick.round-dropdown{
  position: absolute;
  z-index: 9999;
  top: calc(100% + 8px);
  left: 0;

  /* IMPORTANT: real sizing (prevents the skinny panel issue) */
  min-width: 220px;
  max-width: 260px;
  width: max-content;

  border-radius: 14px;
  overflow: hidden;

  background: linear-gradient(180deg, rgba(15,23,42,0.98), rgba(2,6,23,0.98));
  border: 1px solid rgba(56,189,248,0.26);
  box-shadow:
    0 22px 60px rgba(0,0,0,0.68),
    0 0 0 1px rgba(255,255,255,0.05) inset,
    0 0 26px rgba(56,189,248,0.10);

  max-height: 260px;
  overflow-y: auto;
  overflow-x: hidden;

  padding: 8px;
  background-clip: padding-box;

  /* Scrollbar theme (match HOME) */
  scrollbar-width: thin;
  scrollbar-color: rgba(148,163,184,0.42) rgba(2,6,23,0.20);
}

#roundDropdownQuick.round-dropdown::-webkit-scrollbar{ width: 10px; }
#roundDropdownQuick.round-dropdown::-webkit-scrollbar-track{
  background: rgba(2,6,23,0.20);
  border-radius: 999px;
}
#roundDropdownQuick.round-dropdown::-webkit-scrollbar-thumb{
  background: rgba(148,163,184,0.42);
  border-radius: 999px;
  border: 2px solid rgba(2,6,23,0.35);
}
#roundDropdownQuick.round-dropdown::-webkit-scrollbar-thumb:hover{
  background: rgba(56,189,248,0.34);
}

/* 2) Options — mirror HOME option styling */
#roundDropdownQuick.round-dropdown .round-option{
  position: relative;
  padding: 10px 14px;
  border-radius: 10px;

  font-size: 14px;
  line-height: 1.3;
  color: rgba(226,232,240,0.92);

  cursor: pointer;
  white-space: nowrap;

  transition: background-color 140ms ease, transform 140ms ease;
}

#roundDropdownQuick.round-dropdown .round-option::after{
  content:"";
  position:absolute;
  left: 10px;
  right: 10px;
  bottom: -3px;
  height: 1px;
  background: rgba(148,163,184,0.10);
  pointer-events:none;
}

#roundDropdownQuick.round-dropdown .round-option:hover{
  background: rgba(56,189,248,0.16);
  transform: translateY(-0.5px);
}

/* =========================================================
   VERSION BADGE → CLICKABLE PATCH NOTES (v1)
   ========================================================= */

.enhanced-header .version-badge{
  /* IMPORTANT: allow click */
  pointer-events: auto;
  z-index: 50;
}

.version-badge-btn{
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  cursor: pointer;
  user-select: none;
  text-align: left;
  pointer-events: auto;
}

.version-badge-btn .vb-line1{
  line-height: 1.1;
  display: flex;
  align-items: center;
  gap: 8px;
}

.version-badge-btn .vb-new{
  font-size: 9px;
  letter-spacing: 0.12em;
  padding: 2px 6px;
  border-radius: 999px;

  background: rgba(0, 180, 255, 0.12);
  border: 1px solid rgba(0, 180, 255, 0.35);
  color: rgba(140, 220, 255, 0.95);

  font-weight: 600;
}

.version-badge-btn .vb-hint{
  margin-top: 6px;
  font-size: 8px;
  letter-spacing: 0.10em;
  opacity: 0.72;
  text-transform: none;
  align-self: center;
}

.version-badge-btn:hover{
  border-color: var(--mi-border-strong);
  filter: brightness(1.06);
}

.version-badge-btn:focus-visible{
  outline: 2px solid rgba(130, 203, 255, 0.45);
  outline-offset: 2px;
}

/* Panel */
.version-notes{
  position: absolute;
  top: 68px;   /* anchors under the badge; tweak 2–6px if needed */
  left: 18px;
  width: min(360px, calc(100vw - 36px));
  padding: 10px 12px;
  border-radius: 14px;
  text-align: left;
  background: rgba(10, 16, 30, 0.92);
  border: 1px solid var(--mi-border-strong);
  color: var(--mi-text-invert-soft);

  box-shadow: 0 14px 36px rgba(0,0,0,0.45);
  backdrop-filter: blur(6px);

  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 140ms ease, transform 140ms ease;
  z-index: 60;
}

.version-notes.is-open{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.version-notes-title{
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 8px;
}

.version-notes-list{
  margin: 0;
  padding-left: 18px;
  font-size: 12px;
  line-height: 1.35;
}

.version-notes-list li{
  margin: 6px 0;
}

/* === PATCH NOTES PANEL: sizing + overlay reliability === */

/* Prevent the panel from being clipped by the rounded header shell */
.enhanced-header,
.app-header {
  overflow: visible !important;
}

/* Optional: if you have an inner header shell wrapper that clips, this catches it too */
.enhanced-header * {
  overflow: visible;
}

/* Panel sizing + overflow */
.version-notes{
  width: 320px;                 /* narrower than before */
  max-width: calc(100vw - 36px);
  max-height: 180px;            /* allows overflow within the panel */
  overflow: auto;               /* scroll when notes are long */
  z-index: 9999;                /* make sure it sits over everything */
}

/* NEW badge toggling */
#versionBadgeBtn .vb-new{ display: none; }
#versionBadgeBtn.is-new .vb-new{ display: inline-flex; }

/* =========================================================
   QUICK EDIT — ensure JS hidden toggle actually hides dropdown
   ========================================================= */

#roundDropdownQuick[hidden]{
  display: none !important;
}

/* Patch notes list formatting */
.pn-entry{ margin: 10px 0; }
.pn-build{ font-size: 12px; line-height: 1.25; }
.pn-date{ opacity: 0.70; font-weight: 500; }
.pn-bullets{ margin: 6px 0 0; padding-left: 18px; }
.pn-bullet{ margin: 6px 0; }

/* =========================================================
   Flip hint (tile fronts) — match Verdict Shell mi-metrics-hint
   ========================================================= */

/* Allow bottom pinning inside tile fronts without affecting layout */
.flip-tile .tile-face.tile-front{
  position: relative; /* anchor for absolute hint */
}

/* Reuse verdict-shell visual style everywhere */
.mi-metrics-hint{
  font-size: 10.5px;
  font-weight: 850;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(148,163,184,0.78);
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.mi-metrics-hint::before{
  content:"↻";
  display: inline-block;
  width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  border-radius: 999px;
  background: rgba(9,9,15,0.55);
  transform: translateY(-0.5px);
}

/* Tile-specific placement */
.flip-tile .tile-face.tile-front .mi-flip-hint{
  position: relative;
  display: block;
  margin-top: auto;
  margin-left: auto;
  margin-right: auto;
  pointer-events: none;
  opacity: 0.92;
  text-align: center;
}

/* Ensure it never overlaps content */
.flip-tile .tile-face.tile-front{
  padding-bottom: 8px;
}

/* =========================================================
   GLOBAL SCROLLBAR SYSTEM
   (matches Interaction Console aesthetic)
   ========================================================= */

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(56,189,248,0.35) transparent;
}

/* Webkit */
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: rgba(56,189,248,0.25);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
  background: rgba(56,189,248,0.35);
}

.hero-tagline{
  font-family: "Rajdhani", system-ui, -apple-system, sans-serif;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.threshold-stack{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  line-height:1;
}

.threshold-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  padding:4px 8px;
  border:1px solid rgba(120,170,255,.22);
  border-radius:999px;
  background:rgba(255,255,255,.03);
  color:rgba(235,242,255,.82);
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.01em;
  white-space:nowrap;
}

.team-score-block {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  font-weight: 700;
}

.team-score-value {
  letter-spacing: 0.02em;
}

.score-elite .team-score-value {
  color: var(--mi-pos-strong, #49d17d);
}

.score-strong .team-score-value {
  color: var(--mi-pos, #7ee2a8);
}

.score-neutral .team-score-value {
  color: var(--mi-text, #e8edf7);
}

.score-weak .team-score-value {
  color: var(--mi-neg, #ff9a9a);
}

.score-fragile .team-score-value {
  color: var(--mi-neg-strong, #ff6b6b);
}

/* ========== CORE TRAITS TILE (NO 3D FLIP) ========== */
/* Only the OUTER core profile tile should use the front/back swap.
   Nested tiles inside it (like the embedded résumé tile) must keep normal 3D flip behavior. */

section.profile-section.flip-tile{
  min-height: var(--mi-profile-sync-h, auto);
  overflow: visible;
}

/* Only target the direct child inner of the core section */
section.profile-section.flip-tile > .flip-tile-inner{
  transform: none !important;
}

/* Only target the direct child faces of the core section */
section.profile-section.flip-tile > .flip-tile-inner > .tile-face{
  position: relative;
  inset: auto;
  width: 100%;
  height: auto;
  backface-visibility: visible;
  transform: none;
}

section.profile-section.flip-tile > .flip-tile-inner > .tile-face.tile-front{
  display: block;
}

section.profile-section.flip-tile > .flip-tile-inner > .tile-face.tile-back{
  display: none;
  padding: 9px 9px 8px;
  border-radius: 12px;
  background: rgba(9, 9, 15, 0.98);
  border: 1px solid rgba(31, 41, 55, 0.98);
}

section.profile-section.flip-tile.flipped > .flip-tile-inner > .tile-face.tile-front{
  display: none;
}

section.profile-section.flip-tile.flipped > .flip-tile-inner > .tile-face.tile-back{
  display: block;
}

.mi-efficiency-box {
  position: relative;
  border: 1px solid rgba(90, 140, 255, 0.22);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00)),
    linear-gradient(180deg, rgba(20,32,68,0.78), rgba(7,15,36,0.92));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    inset 0 0 18px rgba(55,110,255,0.08);
  overflow: hidden;
}

.mi-efficiency-box::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(90,140,255,0.06), transparent 38%);
  pointer-events: none;
}

.mi-efficiency-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
}

.mi-efficiency-row + .mi-efficiency-row {
  border-top: 1px solid rgba(255,255,255,0.07);
}

.mi-efficiency-row.is-margin {
  font-weight: 800;
  letter-spacing: 0.04em;
}

/* =========================================================
   CORE PROFILE COHESION PASS
   Unify header rhythm, metric typography, and support row styling
   ========================================================= */

:root{
  --mi-kicker-size: var(--mi-font-size-sm);
  --mi-kicker-weight: 800;
  --mi-kicker-track: 0.16em;

  --mi-label-size: var(--mi-font-size-body);
  --mi-label-weight: 700;
  --mi-label-track: 0.04em;

  --mi-value-size: 30px;
  --mi-value-size-sm: 16px;
  --mi-value-weight: 800;

  --mi-panel-radius: 16px;
  --mi-panel-pad: 14px;
  --mi-panel-gap: 12px;
}

/* Core profile section header should use one shared rhythm */
.profile-section .section-header,
.profile-section .profile-subtotal-row,
.profile-support-row{
  font-family: var(--mi-font-sans);
}

.profile-section .section-header h3,
.profile-section .matchup-kicker,
.profile-section .context-label,
.mi-efficiency-headline,
.mi-efficiency-kicker{
  letter-spacing: var(--mi-kicker-track);
  font-weight: var(--mi-kicker-weight);
}

/* Keep the core traits title pill and nearby headers in one family */
.profile-section .section-header h3{
  font-size: var(--mi-kicker-size);
  line-height: 1;
  color: rgba(241, 245, 249, 0.94);
}

/* =========================================================
   MI EFFICIENCY METRICS — cohesive unit, no dots, less segmentation
   ========================================================= */

.mi-efficiency-box{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;

  padding: 0;
  border-radius: var(--mi-panel-radius);
  overflow: hidden;

  background:
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.00)),
    radial-gradient(circle at top, var(--mi-brand-blue-a08), rgba(2,6,23,0.94) 68%);
  border: 1px solid var(--mi-line);
  box-shadow:
    var(--mi-depth-1),
    inset 0 0 0 1px rgba(255,255,255,0.03);
}

/* Quiet integrated header strip */
.mi-efficiency-box .section-header,
.mi-efficiency-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  padding: 12px 14px 10px;
  margin: 0;

  border-bottom: 1px solid rgba(255,255,255,0.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.00));
}

.mi-efficiency-headline{
  font-size: var(--mi-kicker-size);
  line-height: 1;
  color: rgba(241,245,249,0.94);
}

.mi-efficiency-kicker{
  font-size: var(--mi-font-size-xs);
  line-height: 1;
  color: var(--mi-text-muted);
  opacity: 0.8;
}

/* Stack rows like one data card, not separate pills */
.mi-efficiency-row,
.mi-eff-seg{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 12px;

  padding: 12px 14px;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.mi-efficiency-row + .mi-efficiency-row,
.mi-eff-seg + .mi-eff-seg{
  border-top: 1px solid rgba(255,255,255,0.07);
}

/* Remove dots entirely */
.mi-eff-label{
  display: block;
  min-width: 0;

  font-size: var(--mi-label-size);
  font-weight: var(--mi-label-weight);
  letter-spacing: var(--mi-label-track);
  color: rgba(226, 232, 240, 0.84);
}

.mi-eff-label::before{
  content: none !important;
  display: none !important;
}

.mi-eff-value{
  font-size: var(--mi-value-size-sm);
  font-weight: var(--mi-value-weight);
  letter-spacing: 0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: #f8fafc;
  text-align: right;
  text-shadow: none;
}

/* Make the combined margin feel like the payoff, not a different component */
.mi-efficiency-row.is-total,
.mi-eff-seg.is-emphasis{
  background:
    linear-gradient(180deg, rgba(23,95,195,0.10), rgba(23,95,195,0.04));
}

.mi-efficiency-row.is-total .mi-eff-label,
.mi-eff-seg.is-emphasis .mi-eff-label{
  color: var(--mi-text-invert-soft);
}

.mi-efficiency-row.is-total .mi-eff-value,

/* =========================================================
   SUPPORT ROW — make sibling panels feel cut from same cloth
   ========================================================= */

.profile-support-row{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 0.9fr);
  gap: 14px;
  align-items: stretch;
  margin-top: 6px;
}

.profile-support-row > *{
  min-width: 0;
}

/* Embedded resume tile should match efficiency panel geometry more closely */
.profile-support-row .context-tile.flip-tile{
  padding: 0;
  border-radius: var(--mi-panel-radius);
  border: 1px solid var(--mi-line);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.00)),
    radial-gradient(circle at top, var(--mi-brand-blue-a08), rgba(2,6,23,0.94) 68%);
  box-shadow:
    var(--mi-depth-1),
    inset 0 0 0 1px rgba(255,255,255,0.03);
}

.profile-support-row .context-tile.flip-tile .flip-tile-inner{
  min-height: 100%;
  border: none;
  border-radius: inherit;
  background: transparent;
}

.profile-support-row .context-tile .tile-face.tile-front,
.profile-support-row .context-tile .tile-face.tile-back{
  padding: 16px 16px 14px;
  gap: 4px;
}

/* Unify resume tile typography with core profile panel language */
.profile-support-row .context-label{
  font-size: var(--mi-kicker-size);
  font-weight: var(--mi-kicker-weight);
  letter-spacing: var(--mi-kicker-track);
  color: rgba(241,245,249,0.94);
}

.profile-support-row .context-score{
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.profile-support-row .context-tier,
.profile-support-row .context-subrow,
.profile-support-row .context-note{
  font-size: 12px;
  color: var(--mi-text-soft);
}

/* Optional: tighten table header styling a bit to match nearby panels */
.explain-table th{
  font-size: var(--mi-kicker-size);
  font-weight: var(--mi-kicker-weight);
  letter-spacing: 0.10em;
}

.explain-table td{
  font-size: var(--mi-label-size);
}

.mi-eff-module{
  display:flex;
  flex-direction:column;
  border:1px solid var(--mi-line);
  border-radius:18px;
  overflow:hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0)),
    radial-gradient(circle at top, rgba(37,99,235,0.12), rgba(2,6,23,0.96) 72%);
  box-shadow: var(--mi-depth-1);
}

.mi-eff-header{
  display:flex;
  flex-direction:column;
  padding: 7px 9px;
  border-bottom:1px solid rgba(255,255,255,0.08);
}

.mi-eff-title{
  font-size:14px;
  font-weight:800;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:rgba(241,245,249,0.96);
}

.mi-eff-subtitle{
  font-size:11px;
  font-weight:700;
  letter-spacing:0.04em;
  color:rgba(148,163,184,0.82);
}

.mi-eff-seg{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  padding:14px 16px;
}

.mi-eff-seg + .mi-eff-seg{
  border-top:1px solid rgba(255,255,255,0.06);
}

.mi-eff-label{
  font-size:14px;
  font-weight:700;
  color:rgba(226,232,240,0.92);
}

.mi-eff-value{
  font-size:16px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  color:#f8fafc;
}

.mi-eff-seg.is-emphasis{
  border-top:1px solid rgba(191,219,254,0.16);
  background:linear-gradient(180deg, rgba(30,64,175,0.14), rgba(30,64,175,0.05));
}

.mi-eff-seg.is-emphasis .mi-eff-label{
  color:rgba(239,246,255,0.98);
}

.mi-eff-seg.is-emphasis .mi-eff-value{
  font-size:20px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--mi-accent-cyan);
}

/* =========================================================
   CORE PROFILE SECTION ROWS
   Make Offensive / Defensive labels feel like integrated dividers,
   not normal spreadsheet rows
   ========================================================= */

.explain-table .core-section-row td {
  padding: 10px 14px 9px;
  border-right: none !important;
  border-bottom: 1px solid rgba(56, 189, 248, 0.20) !important;
  background:
    linear-gradient(
      90deg,
      rgba(23, 95, 195, 0.10),
      rgba(23, 95, 195, 0.04) 28%,
      rgba(2, 6, 23, 0.00) 100%
    );
  text-align: left !important;
}

.explain-table .core-section-row:hover td {
  background:
    linear-gradient(
      90deg,
      rgba(23, 95, 195, 0.14),
      rgba(23, 95, 195, 0.06) 28%,
      rgba(2, 6, 23, 0.00) 100%
    );
}

.explain-table .core-section-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(226, 232, 240, 0.92);
}

.explain-table .core-section-label::after {
  content: "";
  display: block;
  width: 120px;
  max-width: 18vw;
  height: 1px;
  margin-left: 4px;
  background: linear-gradient(
    90deg,
    rgba(56, 189, 248, 0.35),
    rgba(56, 189, 248, 0.00)
  );
}

/* Kill zebra striping behavior on the section rows */
.explain-table tbody tr.core-section-row:nth-child(odd),
.explain-table tbody tr.core-section-row:nth-child(even) {
  background: transparent;
}

/* Keep the next metric row from feeling jammed into the divider */
.explain-table .core-section-row + tr td {
  padding-top: 12px;
}

/* ==========================================
   PROFILE SUBTOTAL + INLINE TOURNAMENT IDENTITY
   Stronger separation / subtotal hero treatment
   ========================================== */

.profile-subtotal-row{
  position: relative;
  margin-top: 10px;
  padding-top: 10px;

  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, auto);
  gap: 18px;
  align-items: stretch;
  justify-content: space-between;
}

.profile-subtotal-row::before{
  content: "";
  position: absolute;
  top: 0;
  left: 4px;
  right: 4px;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.00) 0%,
    rgba(148,163,184,0.10) 12%,
    rgba(23,95,195,0.34) 35%,
    rgba(191,219,254,0.56) 50%,
    rgba(23,95,195,0.34) 65%,
    rgba(148,163,184,0.10) 88%,
    rgba(255,255,255,0.00) 100%
  );
  box-shadow:
    0 0 10px rgba(23,95,195,0.14),
    0 0 22px rgba(56,189,248,0.08);
}

/* LEFT: make subtotal feel like the anchor metric */
.subtotal-main{
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;

  min-width: 0;
  padding: 14px 18px;
  border-radius: 16px;

  background:
    radial-gradient(
      120% 160% at 20% 50%,
      rgba(56,189,248,0.16) 0%,
      rgba(23,95,195,0.08) 28%,
      rgba(2,6,23,0.00) 72%
    ),
    linear-gradient(
      180deg,
      rgba(255,255,255,0.05),
      rgba(255,255,255,0.015)
    );

  border: 1px solid rgba(56,189,248,0.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 0 0 1px rgba(23,95,195,0.04),
    0 14px 28px rgba(0,0,0,0.22);
}

/* soft internal glow for subtotal only */
.subtotal-main::before{
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 20px;
  pointer-events: none;
  background: radial-gradient(
    circle at 24% 50%,
    rgba(56,189,248,0.12),
    rgba(56,189,248,0.04) 35%,
    rgba(56,189,248,0.00) 72%
  );
  filter: blur(8px);
  opacity: 0.95;
}

.subtotal-main > *{
  position: relative;
  z-index: 1;
}

/* optional label/value tuning */
.subtotal-main .subtotal-label{
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(241,245,249,0.90);
}

.subtotal-main .subtotal-value{
  font-size: 2rem;
  font-weight: 850;
  letter-spacing: 0.01em;
  color: #ffffff;
  text-shadow:
    0 0 18px rgba(56,189,248,0.12),
    0 2px 12px rgba(0,0,0,0.38);
}

/* RIGHT: identity remains contextual, but more separated */
.subtotal-identity{
  position: relative;
  justify-self: end;
  min-width: 0;

  padding: 10px 12px 10px 18px;
  border-radius: 14px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.04),
      rgba(255,255,255,0.02)
    );
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 10px 20px rgba(0,0,0,0.18);
}

/* vertical fade divider between subtotal + identity */
.subtotal-identity::before{
  content: "";
  position: absolute;
  left: 0;
  top: 12%;
  bottom: 12%;
  width: 1px;
  background: linear-gradient(
    180deg,
    rgba(56,189,248,0.00),
    rgba(56,189,248,0.30),
    rgba(56,189,248,0.00)
  );
}

/* tighten / polish the identity content */
.identity-inline-kicker{
  margin-bottom: 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(148,163,184,0.78);
  text-align: center;
}

.identity-inline-main{
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.identity-inline-badge{
  min-width: 78px;
  padding: 6px 6px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 6px 14px rgba(0,0,0,0.18);
}

.identity-inline-meta{
  gap: 2px;
}

.identity-inline-label{
  font-size: 11px;
  font-weight: 800;
  margin-right: 3px;
}

.identity-inline-detail{
  font-size: 6.75px;
  line-height: 1.1;
  white-space: nowrap;
  color: rgba(148,163,184,0.90);
  margin-right: 3px;
}

@media (max-width: 920px){
  .profile-subtotal-row{
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .subtotal-identity{
    justify-self: stretch;
    padding-left: 12px;
  }

  .subtotal-identity::before{
    display: none;
  }
}

/* ==========================================
   PROFILE SUBTOTAL + INLINE TOURNAMENT IDENTITY
   Softer, more unified version
   ========================================== */

.profile-subtotal-row{
  position: relative;
  margin-top: 10px;
  padding-top: 10px;

  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
}

.profile-subtotal-row::before{
  content: "";
  position: absolute;
  top: 0;
  left: 4px;
  right: 4px;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.00),
    rgba(148,163,184,0.12),
    rgba(56,189,248,0.18),
    rgba(148,163,184,0.12),
    rgba(255,255,255,0.00)
  );
}

/* LEFT SIDE: keep it integrated, not boxed */
.subtotal-main{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;

  min-width: 0;
  padding: 10px 6px 10px 2px;
  border: none;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

/* subtle vignette only, not a card */
.subtotal-main::before {
  content: "";
  position: absolute;
  inset: -6px -10px;          /* slightly larger halo */
  border-radius: 18px;

  background:
    radial-gradient(
      circle at 50% 30%,
      rgba(56, 189, 248, 0.14),
      rgba(56, 189, 248, 0.04) 60%,
      transparent 85%
    );

  border: 1px solid rgba(56, 189, 248, 0.28);

  box-shadow:
    0 0 0 1px rgba(56, 189, 248, 0.18),
    0 4px 10px rgba(0, 0, 0, 0.35);

  opacity: 0.95;
  pointer-events: none;
  z-index: -1;
}

.subtotal-main > *{
  position: relative;
  z-index: 1;
}

.subtotal-main .subtotal-label{
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.2;
  color: rgba(241,245,249,0.88);
}

.subtotal-main .subtotal-value{
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: #ffffff;
  text-shadow: 0 0 14px rgba(56,189,248,0.08);
}

/* RIGHT SIDE: keep existing box, but let it be the only “tile” */
.subtotal-identity{
  position: relative;
  justify-self: end;
  min-width: 250px;
  max-width: 260px;
  padding-left: 18px;
}

/* faint inner divider instead of a hard split */
.subtotal-identity::before{
  content: "";
  position: absolute;
  left: 0;
  top: 16%;
  bottom: 16%;
  width: 1px;
  background: linear-gradient(
    180deg,
    rgba(56,189,248,0.00),
    rgba(56,189,248,0.18),
    rgba(56,189,248,0.00)
  );
}

/* tone down identity container slightly if needed */
.identity-inline{
  min-height: 86px;
  display: flex;
  align-items: center;
}

/* optional: center the internal identity content more neatly */
.identity-inline-main{
  display: flex;
  align-items: center;
  gap: 12px;
}

.identity-inline-meta{
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}

@media (max-width: 920px){
  .profile-subtotal-row{
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .subtotal-main{
    justify-content: center;
    text-align: center;
  }

  .subtotal-identity{
    min-width: 0;
    width: 100%;
    padding-left: 0;
    justify-self: stretch;
  }

  .subtotal-identity::before{
    display: none;
  }
}

/* Identity Credibility Meter */

.identity-meter{
  width: 100px;
  height: 5px;
  margin-top: 6px;
  margin-left: 12px;
  background: rgba(255,255,255,0.08);
  border-radius: 3px;

  overflow: hidden;
}

.identity-meter-fill{
  height: 100%;
  width: 0%;
  border-radius: 3px;

  background: linear-gradient(
    90deg,
    rgba(110,220,255,0.9),
    rgba(60,150,255,0.9)
  );

  box-shadow: 0 0 6px rgba(80,200,255,0.35);

  transition: width 300ms ease;
}

/* =========================================================
   PRIMARY SCORECARD FRAME
   Lens-driven premium frame for both scorecards
   ========================================================= */

#cindCard,
#favCard{
  position: relative;
  isolation: isolate;
  border-radius: 16px;

  /* neutral fallback */
  --mi-card-accent: rgba(148,163,184,0.70);
  --mi-card-accent-soft: rgba(148,163,184,0.16);
  --mi-card-accent-ring: rgba(148,163,184,0.35);
  --mi-card-accent-solid: rgb(148,163,184);

  border: 2px solid var(--mi-card-accent);

  box-shadow:
    0 14px 40px rgba(2,6,23,0.65),
    0 0 0 1px var(--mi-card-accent-ring),
    0 0 0 1px rgba(15,23,42,0.95) inset,
    0 0 0 2px var(--mi-card-accent-soft) inset;

  background: linear-gradient(
    180deg,
    rgba(15,23,42,0.98),
    rgba(9,9,15,0.98)
  );
}

/* Top accent line */
#cindCard::before,
#favCard::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:2px;
  border-radius:16px 16px 0 0;
  opacity:.9;
  background: linear-gradient(90deg, transparent, var(--mi-card-accent-solid), transparent);
}

/* Inner metallic edge */
#cindCard::after,
#favCard::after{
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 12px;
  pointer-events: none;

  border: 1px solid rgba(255,255,255,0.06);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 0 0 1px rgba(255,255,255,0.025);
}

/* ===== Standard roles ===== */
#cindCard[data-lens="cinderella"],
#favCard[data-lens="cinderella"]{
  --mi-card-accent: rgba(34,197,94,0.70);
  --mi-card-accent-soft: rgba(34,197,94,0.16);
  --mi-card-accent-ring: rgba(34,197,94,0.35);
  --mi-card-accent-solid: rgb(34,197,94);
}

#cindCard[data-lens="favorite"],
#favCard[data-lens="favorite"]{
  --mi-card-accent: rgba(249,115,22,0.70);
  --mi-card-accent-soft: rgba(249,115,22,0.16);
  --mi-card-accent-ring: rgba(249,115,22,0.35);
  --mi-card-accent-solid: rgb(249,115,22);
}

/* ===== Mirror roles ===== */
#cindCard[data-lens="chalk_mirror"],
#favCard[data-lens="chalk_mirror"]{
  --mi-card-accent: rgba(59,130,246,0.72);
  --mi-card-accent-soft: rgba(59,130,246,0.18);
  --mi-card-accent-ring: rgba(59,130,246,0.36);
  --mi-card-accent-solid: rgb(59,130,246);
}

#cindCard[data-lens="chaos_mirror"],
#favCard[data-lens="chaos_mirror"]{
  --mi-card-accent: rgba(239,68,68,0.72);
  --mi-card-accent-soft: rgba(239,68,68,0.18);
  --mi-card-accent-ring: rgba(239,68,68,0.36);
  --mi-card-accent-solid: rgb(239,68,68);
}

#cindCard[data-lens="neutral_mirror"],
#favCard[data-lens="neutral_mirror"]{
  --mi-card-accent: rgba(168,85,247,0.72);
  --mi-card-accent-soft: rgba(168,85,247,0.18);
  --mi-card-accent-ring: rgba(168,85,247,0.36);
  --mi-card-accent-solid: rgb(168,85,247);
}

/* =========================================================
   PRIMARY SCORECARD FRAME — dual-edge premium treatment
   ========================================================= */

#cindCard,
#favCard{
  position: relative;
  isolation: isolate;
}

#cindCard::after,
#favCard::after{
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 12px;
  pointer-events: none;

  border: 1px solid rgba(255,255,255,0.06);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 0 0 1px rgba(255,255,255,0.025);
}

.result-layout{
  gap: 14px;
}

/* =========================================================
   MATCHUP DIAGNOSTICS — Volatility Meter + Notes
   ========================================================= */

#interactionsSection .interactions-grid{
  grid-template-columns: minmax(0, 1.2fr) minmax(340px, 0.8fr);
  align-items: stretch;
}

#interactionsSection .interactions-right.interactions-diagnostics-tile{
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 100%;
  background: rgba(9, 9, 15, 0.96);
  border: 1px solid rgba(75, 85, 99, 0.9);
  border-radius: 14px;
  padding: 12px;
  overflow: hidden;
}

/* ---------- shared heads ---------- */

.volatility-head,
.interaction-notes-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 2px;
}

/* ---------- notes panel ---------- */

.interaction-notes-panel{
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
  gap: 10px;
}

.interaction-notes-panel .int-console-body{
  flex: 1 1 auto;
  min-height: 220px;
  max-height: 360px;
}

/* ---------- mobile ---------- */

@media (max-width: 980px){
  #interactionsSection .interactions-grid{
    grid-template-columns: 1fr;
  }

  #interactionsSection .interactions-right.interactions-diagnostics-tile{
    min-height: auto;
  }

  .volatility-score-row{
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .volatility-quarters{
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   v4.2 — MATCHUP DIAGNOSTICS / ARC VOLATILITY GAUGE
   ========================================================= */

#interactionsSection .interactions-grid{
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr) !important;
  align-items: stretch !important;
  height: auto !important;
  max-height: none !important;
}

#interactionsSection .interactions-right.interactions-diagnostics-tile{
  display: flex !important;
  flex-direction: column !important;
  gap: 12px;
  min-height: clamp(520px, 62vh, 720px);
  height: auto !important;
  overflow: hidden !important;
  padding: 12px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(3,7,18,0.92), rgba(2,6,23,0.98)),
    radial-gradient(circle at top, rgba(56,189,248,0.08), transparent 55%);
  border: 1px solid rgba(148,163,184,0.18);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.02),
    0 14px 34px rgba(0,0,0,0.30);
}

.volatility-head,
.interaction-notes-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.interaction-notes-panel{
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 220px;
  gap: 10px;
}

.interaction-notes-panel .int-console-body{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

@media (max-width: 980px){
  #interactionsSection .interactions-grid{
    grid-template-columns: 1fr !important;
  }

  #interactionsSection .interactions-right.interactions-diagnostics-tile{
    min-height: auto;
  }

  .volatility-quarters{
    grid-template-columns: 1fr;
  }

  .volatility-gauge{
    --size: min(100%, 320px);
  }
}

.syn-center-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
}

.syn-volatility-mini {
  width: min(100%, 430px);
  margin: 0 auto;
  padding: 10px 14px 8px;
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.syn-volatility-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.syn-volatility-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
}

.syn-volatility-score {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #f5f7ff;
}

.syn-volatility-bar {
  position: relative;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,0.08);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
}

.syn-volatility-fill {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    #39b8ff 0%,
    #7fe0ff 18%,
    #f5d90a 50%,
    #ff9f43 74%,
    #ff5a4f 100%
  );
  transition: width 240ms ease;
}

.syn-volatility-meta {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 8px;
}

.syn-volatility-beneficiary {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #aeb7cb;
}

.syn-volatility-mini.is-a .syn-volatility-beneficiary {
  color: var(--mi-team-a, #59b8ff);
}

.syn-volatility-mini.is-b .syn-volatility-beneficiary {
  color: var(--mi-team-b, #ff9a4d);
}

.syn-volatility-mini.is-balanced .syn-volatility-beneficiary {
  color: #aeb7cb;
}

/* Ensure rows share height instead of stretching first row */
.summary-synthesis-table {
  table-layout: fixed;
}

/* Prevent rowspan cell from forcing the row height */
.syn-final {
  vertical-align: middle;
  padding: 0;
}

/* Make the purple Final MI tile stretch internally instead */
.syn-final-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding: 18px 14px;
}

/* Give synthesis rows a consistent height baseline */
.summary-synthesis-table tbody tr {
  height: 48px;
}

/* =========================================================
   FINAL INTERACTION / VOLATILITY SIZING LOCK
   Replaces lingering console-era sizing behavior
   ========================================================= */

#interactionsSection .interactions-grid{
  display: grid !important;
  grid-template-columns: minmax(0, 1.18fr) minmax(320px, 0.82fr) !important;
  grid-template-rows: auto !important;
  column-gap: 14px !important;
  row-gap: 0 !important;
  align-items: stretch !important;
  margin-top: 0 !important;
}

/* Kill old console-era forced placement */
#interactionsSection .interactions-left,
#interactionsSection .interactions-right{
  grid-column: auto !important;
  grid-row: auto !important;
  align-self: stretch !important;
  min-height: 0 !important;
}

/* Outer tiles */
#interactionsSection .interactions-left,
#interactionsSection .interactions-right{
  padding: 8px !important;
  border-radius: 14px;
}

/* Left panel should feel fuller */
#interactionsSection .interactions-left{
  display: flex;
  flex-direction: column;
}

#interactionsSection .interactions-left-tile{
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 100%;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

/* Tighten the right tile so the whole section comes down in height */
#interactionsSection .interactions-right{
  display: flex !important;
  flex-direction: column !important;
  justify-content: stretch;
  overflow: hidden !important;
}

#interactionsSection .volatility-tile,
#interactionsSection .matchup-volatility-tile,
#interactionsSection .interactions-console-tile{
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start;
  height: 100%;
  min-height: 0 !important;
  padding: 12px 14px !important;
  overflow: hidden !important;
}

/* =========================
   Interaction table sizing
   ========================= */

#interactionsSection .interaction-table{
  table-layout: fixed;
  width: 100%;
}

#interactionsSection .interaction-table thead th{
  padding: 10px 10px !important;
  font-size: 12px !important;
}

#interactionsSection .interaction-table td{
  padding: 12px 10px !important;
  font-size: 13px !important;
}

#interactionsSection .interaction-table .int-name{
  width: 21% !important;
  font-size: 13px;
  font-weight: 800;
}

#interactionsSection .interaction-table .int-edge{
  width: 27% !important;
}

#interactionsSection .interaction-table .col-intensity{
  width: 13% !important;
}

#interactionsSection .interaction-table .int-adj{
  width: 19% !important;
}

#interactionsSection .interaction-totals-bar{
  margin-top: 10px !important;
  padding: 12px 14px !important;
}

/* =========================
   Volatility panel tightening
   ========================= */

#interactionsSection .volatility-gauge,
#interactionsSection .matchup-volatility-gauge{
  width: min(100%, 300px) !important;
  margin: 0 auto 8px !important;
}

#interactionsSection .volatility-gauge__score{
  font-size: 31px !important;
}

#interactionsSection .volatility-gauge__label{
  font-size: 10px !important;
}

#interactionsSection .volatility-gauge-scale{
  width: min(100%, 300px) !important;
  font-size: 9px !important;
}

#interactionsSection .volatility-summary-text{
  display: none;
}

#interactionsSection .volatility-quarters{
  gap: 8px !important;
}

#interactionsSection .vol-q-card{
  gap: 4px !important;
}

#interactionsSection .vol-q-label,
#interactionsSection .vol-q-value{
  font-size: 9.5px !important;
}

#interactionsSection .vol-q-bar{
  height: 7px !important;
}

/* Optional: if the volatility tile still feels a touch too tall */
#interactionsSection .interaction-notes-panel{
  min-height: 0 !important;
  gap: 8px !important;
}

/* Shared wrapper for narrative-style back faces */
#resumeTileA .tile-face.tile-back,
#resumeTileB .tile-face.tile-back,
.mi-metrics-back-text {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 14px 16px;
}

/* Shared narrative copy styling */
#resumeTileA .tile-face.tile-back p,
#resumeTileB .tile-face.tile-back p,
.mi-metrics-back-text p,
.mi-metrics-back-text {
  max-width: 34ch;
  margin: 0 auto;
  font-size: 0.2rem;
  line-height: 1.52;
  font-weight: 560;
  letter-spacing: 0.005em;
  color: rgba(236, 242, 255, 0.92);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.22);
  text-wrap: balance;
}

/* =========================================================
   Interaction Metrics Flip Tile
   ========================================================= */

#interactionsSection .interactions-left-tile.flip-tile{
  display: block;
  height: 100%;
  min-height: 100%;
  perspective: 1400px;
}

#interactionsSection .interactions-left-tile.flip-tile .flip-tile-inner{
  height: 100%;
  min-height: 100%;
}

#interactionsSection .interactions-left-tile.flip-tile .tile-face{
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 100%;
}

#interactionsSection .interactions-front-face{
  gap: 10px;
}

#interactionsSection .interactions-back-face{
  justify-content: flex-start;
  gap: 12px;
  padding: 16px 16px 14px;
  overflow: auto;
}

#interactionsSection .interactions-back-head{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#interactionsSection .interactions-back-title{
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(241,245,249,0.96);
}

#interactionsSection .interactions-back-intro{
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(226,232,240,0.84);
}

#interactionsSection .interactions-back-list{
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 8px;
}

#interactionsSection .interactions-back-list li{
  font-size: 12px;
  line-height: 1.45;
  color: rgba(226,232,240,0.90);
}

#interactionsSection .interactions-back-note{
  margin: 2px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(191,219,254,0.82);
  border-top: 1px solid rgba(148,163,184,0.14);
  padding-top: 10px;
}

#interactionsSection .interactions-back-helper{
  display: none;
}

#interactionsSection .interactions-flip-hint{
  margin-top: 8px;
  align-self: center;
}

/* =========================================
   Core back tile — section labels
   Plain text, not kicker pills
   ========================================= */

.core-back-main-label,
.core-back-eff-label{
  display: block;
  margin: 0 0 10px;
  padding: 0;

  border: none;
  background: transparent;
  box-shadow: none;
  border-radius: 0;

  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.1;

  color: rgba(226, 232, 240, 0.78);
}

.core-back-main-label{
  margin-bottom: 12px;
}

.core-back-eff-label{
  margin-bottom: 12px;
  color: rgba(191, 219, 254, 0.82);
}

/* =========================================
   Core back tile — stronger section break
   ========================================= */

.core-back-eff-section{
  position: relative;
  margin-top: 16px;
  padding-top: 18px;
}

.core-back-eff-section::before{
  content:"";
  position:absolute;
  top:2px;
  left:8%;
  right:8%;
  height:3px;
  border-radius:999px;

  background:
    radial-gradient(
      ellipse at center,
      rgba(96,165,250,0.95) 0%,
      rgba(56,189,248,0.75) 20%,
      rgba(37,99,235,0.35) 45%,
      rgba(37,99,235,0.08) 65%,
      rgba(23,95,195,0) 80%
    );

  filter: blur(.3px);

  box-shadow:
    0 0 6px rgba(96,165,250,0.35),
    0 0 18px rgba(56,189,248,0.18);
}

/* =========================================
   MI efficiency back rows — use existing strength palette
   ========================================= */

.core-back-eff-item .core-back-header{
  margin-bottom: 4px;
}

.core-back-eff-item .core-back-metric{
  color: #d7deea; /* same family as score-neutral */
}

/* Positive/negative mapping aligned to existing score colors */
.core-back-eff-item[data-band="strong_positive"] .core-back-metric{
  color: #7fd6ff; /* same as .metric-score.score-elite */
}

.core-back-eff-item[data-band="positive"] .core-back-metric{
  color: #4fb0ff; /* same as .metric-score.score-strong */
}

.core-back-eff-item[data-band="neutral"] .core-back-metric{
  color: #d7deea; /* same as .metric-score.score-neutral */
}

.core-back-eff-item[data-band="negative"] .core-back-metric{
  color: #ffb3b3; /* same as .metric-score.score-weak */
}

.core-back-eff-item[data-band="strong_negative"] .core-back-metric{
  color: #ff6b6b; /* same as .metric-score.score-fragile */
}

/* =========================================
   Core back tile — section headers
   ========================================= */

.core-back-main-label,
.core-back-eff-label{
  position: relative;
  text-align: center;

  display: block;
  margin: 0 0 14px;
  padding-bottom: 6px;

  font-size: 16px;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;

  color: rgba(226,232,240,0.9);
}

/* editorial-style header underline (distinct from MI divider) */
.core-back-main-label::after,
.core-back-eff-label::after{
  content:"";
  position:absolute;
  left:6%;
  right:55%;
  bottom:-2px;
  height:1px;

  background: rgba(148,163,184,0.35);

  box-shadow:
    0 -1px 0 rgba(255,255,255,0.05); /* subtle highlight */
}

/* MI section gets brand tint */
.core-back-eff-label{
  margin-top: 6px;
  color: rgba(191,219,254,0.95);
}

.core-back-eff-label::after{
  background: linear-gradient(
    90deg,
    rgba(37,99,235,0),
    rgba(96,165,250,0.34) 22%,
    rgba(191,219,254,0.62) 50%,
    rgba(96,165,250,0.34) 78%,
    rgba(37,99,235,0)
  );
}

.core-back-item{
  position:relative;
  padding: 6px 0 8px;
  background: transparent;
  border: none;
  box-shadow: none;
}

.core-back-item::after{
  content:"";
  position:absolute;
  left:2px;
  right:2px;
  bottom:0;
  height:1px;

  background: linear-gradient(
    90deg,
    rgba(148,163,184,0),
    rgba(148,163,184,0.10) 10%,
    rgba(148,163,184,0.18) 50%,
    rgba(148,163,184,0.10) 90%,
    rgba(148,163,184,0)
  );
}

.core-back-item:last-child::after{
  display:none;
}

.core-back-item{
  padding-left: 2px;
  padding-right: 2px;
}

/* =========================================================
   CORE BACK TILE — FINAL OVERRIDE PASS
   Put this at the VERY BOTTOM of styles2.css
   ========================================================= */

/* -------- Section labels: one clean source of truth -------- */
.core-back-main-label,
.core-back-eff-label{
  position: relative !important;
  display: block !important;
  width: 100% !important;
  margin: 0 0 3px !important;
  padding: 0 0 10px !important;

  text-align: center !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  line-height: 1.05 !important;

  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.core-back-main-label{
  color: rgba(232, 238, 248, 0.94) !important;
}

.core-back-eff-label{
  margin-top: 8px !important;
  color: rgba(201, 220, 250, 0.95) !important;
}

/* identical centered underlines for both headers */
.core-back-main-label::after,
.core-back-eff-label::after{
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  bottom: 0 !important;
  transform: translateX(-50%) !important;

  width: 132px !important;
  height: 1px !important;
  border-radius: 999px !important;

  background: linear-gradient(
    90deg,
    rgba(148,163,184,0) 0%,
    rgba(148,163,184,0.22) 18%,
    rgba(226,232,240,0.46) 50%,
    rgba(148,163,184,0.22) 82%,
    rgba(148,163,184,0) 100%
  ) !important;

  box-shadow:
    0 -1px 0 rgba(255,255,255,0.04),
    0 0 8px rgba(148,163,184,0.06) !important;
}

/* -------- MI section divider: distinct from header underlines -------- */
.core-back-eff-section{
  position: relative !important;
  margin-top: 18px !important;
  padding-top: 22px !important;
}

.core-back-eff-section::before{
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 7% !important;
  right: 7% !important;
  height: 3px !important;
  border-radius: 999px !important;

  background:
    radial-gradient(
      ellipse at center,
      rgba(96,165,250,0.92) 0%,
      rgba(56,189,248,0.74) 18%,
      rgba(37,99,235,0.30) 42%,
      rgba(23,95,195,0.05) 65%,
      rgba(23,95,195,0) 82%
    ) !important;

  box-shadow:
    0 0 6px rgba(96,165,250,0.24),
    0 0 16px rgba(56,189,248,0.10) !important;
}

/* -------- Row segmentation: softer and less repetitive -------- */
.core-back-list{
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.core-back-item{
  position: relative !important;
  padding: 8px 2px 10px !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.core-back-item::after{
  content: "" !important;
  position: absolute !important;
  left: 8px !important;
  right: 8px !important;
  bottom: 0 !important;
  height: 1px !important;

  background: linear-gradient(
    90deg,
    rgba(148,163,184,0) 0%,
    rgba(148,163,184,0.07) 14%,
    rgba(148,163,184,0.14) 50%,
    rgba(148,163,184,0.07) 86%,
    rgba(148,163,184,0) 100%
  ) !important;
}

.core-back-item:last-child::after{
  display: none !important;
}

/* -------- Typography cleanup -------- */
.core-back-header{
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  gap: 0.5rem !important;
  margin-bottom: 5px !important;
}

.core-back-metric{
  font-size: 12px !important;
  font-weight: 850 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
  color: rgba(241,245,249,0.96) !important;
}

.core-back-tier{
  flex: 0 0 auto !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.03em !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;

  color: #dbeafe !important;
  background: rgba(30,64,175,0.42) !important;
  border: 1px solid rgba(96,165,250,0.24) !important;
}

.core-back-text{
  font-size: 12px !important;
  line-height: 1.5 !important;
  color: rgba(191,203,221,0.88) !important;
}

/* -------- MI labels keep your strength coloring, but nothing else leaks in -------- */
.core-back-eff-item .core-back-header{
  margin-bottom: 5px !important;
}

.core-back-eff-item .core-back-metric{
  color: #d7deea !important;
}

.core-back-eff-item[data-band="strong_positive"] .core-back-metric{
  color: #7fd6ff !important;
}

.core-back-eff-item[data-band="positive"] .core-back-metric{
  color: #4fb0ff !important;
}

.core-back-eff-item[data-band="neutral"] .core-back-metric{
  color: #d7deea !important;
}

.core-back-eff-item[data-band="negative"] .core-back-metric{
  color: #ffb3b3 !important;
}

.core-back-eff-item[data-band="strong_negative"] .core-back-metric{
  color: #ff6b6b !important;
}

/* =========================================================
   Interaction flip back — narrative host
   ========================================================= */

#interactionsSection .interactions-back-face{
  overflow: hidden;
}

#interactionsSection .interactions-narrative-host{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 6px 4px 2px;
  border-radius: 14px;
  background: rgba(2, 8, 23, 0.38);
  border: 1px solid rgba(148, 163, 184, 0.14);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.025);
}

#interactionsSection .interactions-back-face .int-console-card{
  border-radius: 14px;
  padding: 6px 6px;
  background: rgba(15, 23, 42, 0.52);
  border: 1px solid rgba(148, 163, 184, 0.16);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.025);
  margin-bottom: 3px;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

#interactionsSection .interactions-back-face .int-console-card:last-child{
  margin-bottom: 0;
}

#interactionsSection .interactions-back-face .int-console-card.is-active{
  border-color: rgba(56, 189, 248, 0.42);
  background: rgba(20, 33, 58, 0.72);
  box-shadow:
    inset 0 0 0 1px rgba(56,189,248,0.14),
    0 0 0 1px rgba(56,189,248,0.08);
  transform: translateY(-1px);
}

#interactionsSection .interactions-back-face .int-console-label{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

#interactionsSection .interactions-back-face .int-console-title{
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(241,245,249,0.92);
}

#interactionsSection .interactions-back-face .int-console-text{
  font-size: 11px;
  line-height: 1.46;
  color: rgba(226,232,240,0.90);
}

#interactionsSection .interaction-table tbody tr.is-console-active{
  background: rgba(56, 189, 248, 0.10) !important;
  box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.18);
}

/* =========================================================
   INTERACTIONS SECTION — HARD OVERRIDE
   Equal-width two-panel layout, bottom-paste safe
   ========================================================= */

#interactionsSection .interactions-grid{
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  gap: 20px !important;
  align-items: stretch !important;
  margin-top: 0 !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
}

#interactionsSection .interactions-left,
#interactionsSection .interactions-right{
  grid-column: auto !important;
  grid-row: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: none !important;
  align-self: stretch !important;
  overflow: hidden !important;
}

#interactionsSection .interactions-left-tile,
#interactionsSection .interactions-console-tile,
#interactionsSection .interactions-right-tile{
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: none !important;
  box-sizing: border-box !important;
}

/* left side */
#interactionsSection .interactions-left-tile{
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

#interactionsSection .interaction-table-wrap{
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: auto !important;
}

#interactionsSection .interaction-table{
  width: 100% !important;
  table-layout: fixed !important;
}

/* right side */
#interactionsSection .interactions-console-tile{
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

#interactionsSection .int-console-body,
#interactionsSection #interactionConsoleBody{
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* responsive fallback */
@media (max-width: 980px){
  #interactionsSection .interactions-grid{
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
    height: auto !important;
  }
}

/* =========================================================
   CLEAN ANALYTICS VOLATILITY GAUGE — HARD OVERRIDE
   ========================================================= */

#interactionsSection .volatility-panel{
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  padding: 14px !important;
  border-radius: 16px !important;
  background:
    linear-gradient(180deg, rgba(8, 14, 28, 0.96), rgba(4, 9, 20, 0.98)) !important;
  border: 1px solid rgba(148,163,184,0.14) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.02),
    0 12px 28px rgba(0,0,0,0.26) !important;
}

#interactionsSection .volatility-head{
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  margin: 0 !important;
}

#interactionsSection .volatility-tier-pill{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 100px !important;
  height: 32px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  background: rgba(15,23,42,0.68) !important;
  border: 1px solid rgba(148,163,184,0.18) !important;
  color: rgba(241,245,249,0.94) !important;
  box-shadow: none !important;
}

#interactionsSection .volatility-tier-pill.is-stable{
  color: #86efac !important;
  border-color: rgba(34,197,94,0.30) !important;
}
#interactionsSection .volatility-tier-pill.is-low{
  color: #7dd3fc !important;
  border-color: rgba(56,189,248,0.30) !important;
}
#interactionsSection .volatility-tier-pill.is-moderate{
  color: #fde68a !important;
  border-color: rgba(250,204,21,0.30) !important;
}
#interactionsSection .volatility-tier-pill.is-high{
  color: #fdba74 !important;
  border-color: rgba(249,115,22,0.32) !important;
}
#interactionsSection .volatility-tier-pill.is-extreme{
  color: #fca5a5 !important;
  border-color: rgba(239,68,68,0.34) !important;
}

#interactionsSection .volatility-gauge-wrap{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important;
}

#interactionsSection .volatility-gauge-shell{
  width: min(100%, 340px) !important;
  margin: 0 auto !important;
  position: relative !important;
}

#interactionsSection .volatility-gauge-svg{
  display: block !important;
  width: 100% !important;
  height: auto !important;
  overflow: visible !important;
}

#interactionsSection .volatility-gauge-track{
  fill: none !important;
  stroke: rgba(148,163,184,0.20) !important;
  stroke-width: 16 !important;
  stroke-linecap: round !important;
}

#interactionsSection .volatility-gauge-fill{
  fill: none !important;
  stroke: url(#volatilityArcGradient) !important;
  stroke-width: 16 !important;
  stroke-linecap: round !important;
  filter: url(#volatilityArcSoftGlow) !important;
  transition: stroke-dasharray 420ms cubic-bezier(.22,1,.36,1) !important;
}

#interactionsSection .volatility-gauge-ticks line{
  stroke-linecap: round !important;
}

#interactionsSection .volatility-gauge-ticks line.is-major{
  stroke: rgba(226,232,240,0.62) !important;
  stroke-width: 2.8 !important;
}

#interactionsSection .volatility-gauge-ticks line.is-minor{
  stroke: rgba(148,163,184,0.32) !important;
  stroke-width: 1.8 !important;
}

#interactionsSection .volatility-gauge-threshold{
  stroke: rgba(250,204,21,0.88) !important;
  stroke-width: 1.9 !important;
  stroke-linecap: round !important;
  opacity: 0.9 !important;
  transition: transform 420ms cubic-bezier(.22,1,.36,1) !important;
  transform-origin: 170px 170px !important;
}

#interactionsSection .volatility-gauge-threshold-dot{
  fill: rgba(250,204,21,0.98) !important;
  stroke: rgba(8,14,28,0.92) !important;
  stroke-width: 1.8 !important;
  opacity: 0.98 !important;
  transition: transform 420ms cubic-bezier(.22,1,.36,1) !important;
  transform-origin: 170px 170px !important;
}

#interactionsSection .volatility-gauge-needle{
  transition: transform 420ms cubic-bezier(.22,1,.36,1) !important;
  transform-origin: 170px 170px !important;
}

#interactionsSection .volatility-gauge-needle-stem{
  stroke: rgba(241,245,249,0.94) !important;
  stroke-width: 4 !important;
  stroke-linecap: round !important;
}

#interactionsSection .volatility-gauge-needle-cap{
  fill: rgba(12, 19, 34, 0.98) !important;
  stroke: rgba(148,163,184,0.20) !important;
  stroke-width: 1.8 !important;
}

#interactionsSection .volatility-gauge-needle-core{
  fill: #f8fafc !important;
}

#interactionsSection .volatility-gauge-score{
  font-size: 38px !important;
  font-weight: 900 !important;
  letter-spacing: 0.01em !important;
  fill: rgba(241,245,249,0.98) !important;
}

#interactionsSection .volatility-gauge-label{
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: 0.18em !important;
  fill: rgba(148,163,184,0.72) !important;
}

#interactionsSection .volatility-gauge-zones text{
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  fill: rgba(148,163,184,0.62) !important;
}

#interactionsSection .volatility-summary-text{
  width: min(100%, 320px) !important;
  margin: 0 auto !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
  text-align: center !important;
  color: rgba(226,232,240,0.86) !important;
}

#interactionsSection .volatility-threshold-text{
  display: block !important;
  width: min(100%, 320px) !important;
  margin: 0 auto !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  line-height: 1.45 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  color: rgba(250,204,21,0.90) !important;
}

#interactionsSection .volatility-quarters{
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}

#interactionsSection .vol-q-card{
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  padding: 10px 11px !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,0.015) !important;
  border: 1px solid rgba(148,163,184,0.10) !important;
  box-shadow: none !important;
}

#interactionsSection .vol-q-top{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

#interactionsSection .vol-q-label,
#interactionsSection .vol-q-value{
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

#interactionsSection .vol-q-label{
  color: rgba(203,213,225,0.84) !important;
}

#interactionsSection .vol-q-value{
  color: rgba(241,245,249,0.90) !important;
}

#interactionsSection .vol-q-bar{
  position: relative !important;
  height: 8px !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  background: rgba(148,163,184,0.12) !important;
  box-shadow: none !important;
}

#interactionsSection .vol-q-fill{
  display: block !important;
  height: 100% !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #38bdf8 0%, #facc15 56%, #ef4444 100%) !important;
  transition: width 420ms cubic-bezier(.22,1,.36,1) !important;
}

#interactionsSection .vol-q-meta{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  min-height: 14px !important;
}

#interactionsSection .vol-q-driver,
#interactionsSection .vol-q-lean{
  font-size: 12px !important;
  font-weight: 850 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
}

#interactionsSection .vol-q-driver{
  color: rgba(226,232,240,0.74) !important;
}

#interactionsSection .vol-q-driver.is-balanced{
  color: rgba(148,163,184,0.68) !important;
}

#interactionsSection .vol-q-driver.is-a{
  color: rgba(96,165,250,0.96) !important;
}

#interactionsSection .vol-q-driver.is-b{
  color: rgba(251,146,60,0.96) !important;
}

#interactionsSection .vol-q-lean{
  display: none;
}

@media (max-width: 980px){
  #interactionsSection .volatility-gauge-shell{
    width: min(100%, 310px) !important;
  }

  #interactionsSection .volatility-quarters{
    grid-template-columns: 1fr !important;
  }

  #interactionsSection .volatility-summary-text,
  #interactionsSection .volatility-threshold-text{
    width: min(100%, 290px) !important;
  }
}

/* Remove physical gauge pointers completely */
#interactionsSection #volatilityGaugeNeedle,
#interactionsSection #volatilityGaugeThreshold,
#interactionsSection #volatilityGaugeThresholdDot{
  display: none !important;
}

/* ==========================================================================
   CORE TRAITS TABLE — TEAM STANDING BAR OVERRIDE
   Paste at very bottom of styles2.css
   Depends on:
   - .mi-core-table
   - .mi-core-section-row
   - .mi-core-metric-row
   - .mi-standing-wrap
   - .mi-standing-bar
   - .mi-standing-fill
   - .mi-standing-median
   - .mi-core-impact-value
   ========================================================================== */

/* ---------- table shell ---------- */

.explain-table.mi-core-table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  overflow: hidden;
  border-radius: 14px;
}

/* Keep header geometry aligned with your existing scorecard style */
.explain-table.mi-core-table thead th{
  padding: 9px 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(226,232,240,0.92);

  background:
    linear-gradient(180deg, rgba(2,6,23,0.92), rgba(2,6,23,0.78));
  border-top: 1px solid rgba(56,189,248,0.18);
  border-bottom: 1px solid rgba(56,189,248,0.22);
  border-right: 1px solid rgba(56,189,248,0.16);
}

.explain-table.mi-core-table thead th:first-child{
  border-left: 1px solid rgba(56,189,248,0.16);
  border-top-left-radius: 12px;
}

.explain-table.mi-core-table thead th:last-child{
  border-top-right-radius: 12px;
}

/* Column widths tuned to current scorecard proportions */
.explain-table.mi-core-table .mi-core-col-battlefield{ width: 32%; }
.explain-table.mi-core-table .mi-core-col-spread{ width: 23%; }
.explain-table.mi-core-table .mi-core-col-standing{ width: 16%; }
.explain-table.mi-core-table .mi-core-col-tier{ width: 17%; }
.explain-table.mi-core-table .mi-core-col-impact{ width: 12%; }

/* ---------- section rows (Offensive Profile / Defensive Profile) ---------- */

.explain-table.mi-core-table .mi-core-section-row th.mi-core-section-title{
  padding: 9px 14px;
  text-align: left;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: rgba(226,232,240,0.92);

  background:
    linear-gradient(90deg,
      rgba(30,41,59,0.78) 0%,
      rgba(30,41,59,0.52) 42%,
      rgba(15,23,42,0.24) 100%
    );

  border-left: 1px solid rgba(56,189,248,0.18);
  border-right: 1px solid rgba(56,189,248,0.18);
  border-bottom: 1px solid rgba(56,189,248,0.16);
}

/* ---------- metric rows ---------- */

.explain-table.mi-core-table .mi-core-metric-row td{
  padding: 10px 10px;
  vertical-align: middle;
  text-align: center;

  background:
    linear-gradient(180deg, rgba(8,13,27,0.90), rgba(6,10,22,0.94));

  border-right: 1px solid rgba(23,95,195,0.22);
  border-bottom: 1px solid rgba(23,95,195,0.22);
}

.explain-table.mi-core-table .mi-core-metric-row td:first-child{
  border-left: 1px solid rgba(23,95,195,0.22);
}

.explain-table.mi-core-table .mi-core-metric-row:last-of-type td:first-child{
  border-bottom-left-radius: 12px;
}

.explain-table.mi-core-table .mi-core-metric-row:last-of-type td:last-child{
  border-bottom-right-radius: 12px;
}

/* Battlefield label */
.explain-table.mi-core-table .mi-core-battlefield{
  text-align: left;
  color: rgba(241,245,249,0.94);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
}

/* Spread pill cell */
.explain-table.mi-core-table .mi-core-spread{
  text-align: center;
}

.explain-table.mi-core-table .mi-core-spread-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 54px;
  min-height: 26px;
  padding: 0 10px;

  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.26);

  background:
    linear-gradient(180deg, rgba(30,41,59,0.60), rgba(15,23,42,0.70));

  color: rgba(226,232,240,0.82);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;

  box-shadow:
    0 0 0 1px rgba(255,255,255,0.03) inset,
    0 6px 14px rgba(0,0,0,0.22);
}

/* ---------- TEAM STANDING BAR ---------- */

.explain-table.mi-core-table .mi-core-standing-cell{
  padding-left: 12px;
  padding-right: 12px;
}

.explain-table.mi-core-table .mi-standing-wrap{
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}

/* Rail */
.explain-table.mi-core-table .mi-standing-bar{
  position: relative;
  width: 100%;
  height: 12px;
  border-radius: 999px;
  overflow: hidden;

  background:
    linear-gradient(180deg, rgba(2,6,23,0.98), rgba(15,23,42,0.92));

  border: 1px solid rgba(148,163,184,0.18);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    inset 0 0 0 1px rgba(255,255,255,0.02),
    0 6px 14px rgba(0,0,0,0.26);
}

/* Optional segmentation for a broadcast / scorecard feel */
.explain-table.mi-core-table .mi-standing-bar::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;

  background-image: repeating-linear-gradient(
    to right,
    transparent 0,
    transparent calc(10% - 1px),
    rgba(255,255,255,0.06) calc(10% - 1px),
    rgba(255,255,255,0.06) 10%
  );

  opacity: 0.55;
}

/* Fill */
.explain-table.mi-core-table .mi-standing-fill{
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  z-index: 1;

  border-radius: 999px;

  background:
    linear-gradient(90deg,
      rgba(56,189,248,0.92) 0%,
      rgba(29,100,199,0.95) 68%,
      rgba(23,95,195,0.98) 100%
    );

  box-shadow:
    0 0 10px rgba(56,189,248,0.22),
    0 0 18px rgba(23,95,195,0.12);
}

/* median marker */
.explain-table.mi-core-table .mi-standing-median{
  position: absolute;
  top: -2px;
  bottom: -2px;
  left: 50%;
  width: 2px;
  z-index: 2;

  border-radius: 999px;
  transform: translateX(-50%);

  background: rgba(226,232,240,0.82);

  box-shadow:
    0 0 0 1px rgba(2,6,23,0.55),
    0 0 6px rgba(226,232,240,0.22);
}

/* Screen-reader only support */
.explain-table.mi-core-table .sr-only{
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ---------- tier ---------- */

.explain-table.mi-core-table .mi-core-tier{
  color: rgba(226,232,240,0.84);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.15;
}

/* Optional tier nuance if your JS adds tier classes to the td */
.explain-table.mi-core-table .mi-core-tier.is-elite{ color: rgba(186,230,253,0.98); }
.explain-table.mi-core-table .mi-core-tier.is-above-average{ color: rgba(191,219,254,0.94); }
.explain-table.mi-core-table .mi-core-tier.is-average{ color: rgba(226,232,240,0.84); }
.explain-table.mi-core-table .mi-core-tier.is-weak{ color: rgba(252,165,165,0.90); }
.explain-table.mi-core-table .mi-core-tier.is-fragile{ color: rgba(248,113,113,0.96); }

/* ---------- impact ---------- */

.explain-table.mi-core-table .mi-core-impact{
  text-align: center;
}

.explain-table.mi-core-table .mi-core-impact-value{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;

  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: rgba(226,232,240,0.94);
}

.explain-table.mi-core-table .mi-core-impact-value.is-pos{
  color: #60a5fa;
}

.explain-table.mi-core-table .mi-core-impact-value.is-neg{
  color: #fca5a5;
}

.explain-table.mi-core-table .mi-core-impact-value.is-flat{
  color: rgba(226,232,240,0.70);
}

/* ---------- row hover / polish ---------- */

.explain-table.mi-core-table .mi-core-metric-row:hover td{
  background:
    linear-gradient(180deg, rgba(12,18,36,0.94), rgba(8,13,27,0.98));
}

/* ---------- mobile tightening ---------- */

@media (max-width: 720px){
  .explain-table.mi-core-table thead th{
    padding: 8px 6px;
    font-size: 10px;
    letter-spacing: 0.06em;
  }

  .explain-table.mi-core-table .mi-core-metric-row td{
    padding: 9px 6px;
  }

  .explain-table.mi-core-table .mi-core-battlefield{
    font-size: 11px;
  }

  .explain-table.mi-core-table .mi-core-tier{
    font-size: 11px;
  }

  .explain-table.mi-core-table .mi-standing-bar{
    height: 10px;
  }

  .explain-table.mi-core-table .mi-standing-median{
    top: -1px;
    bottom: -1px;
  }
}

/* ==========================================================================
   INTERACTION METRICS TABLE — LEVERAGE BAR OVERRIDE
   Paste at very bottom of styles2.css
   Depends on:
   - .mi-interaction-table
   - .mi-int-row
   - .mi-int-bar
   - .mi-int-bar-center
   - .mi-int-bar-fill-a
   - .mi-int-bar-fill-b
   - .mi-int-intensity-pill
   Volatility panel intentionally untouched.
   ========================================================================== */

/* ---------- table shell ---------- */

.interaction-table.mi-interaction-table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  overflow: hidden;
  border-radius: 14px;
}

.interaction-table.mi-interaction-table thead th{
  padding: 9px 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(226,232,240,0.92);

  background:
    linear-gradient(180deg, rgba(2,6,23,0.92), rgba(2,6,23,0.78));
  border-top: 1px solid rgba(56,189,248,0.18);
  border-bottom: 1px solid rgba(56,189,248,0.22);
  border-right: 1px solid rgba(56,189,248,0.16);
}

.interaction-table.mi-interaction-table thead th:first-child{
  border-left: 1px solid rgba(56,189,248,0.16);
  border-top-left-radius: 12px;
}

.interaction-table.mi-interaction-table thead th:last-child{
  border-top-right-radius: 12px;
}

/* Column proportions */
.interaction-table.mi-interaction-table .mi-int-col-label{ width: 39%; }
.interaction-table.mi-interaction-table .mi-int-col-bar{ width: 41%; }
.interaction-table.mi-interaction-table .mi-int-col-intensity{ width: 20%; }

/* ---------- rows ---------- */

.interaction-table.mi-interaction-table .mi-int-row td{
  padding: 11px 10px;
  vertical-align: middle;
  text-align: center;

  background:
    linear-gradient(180deg, rgba(8,13,27,0.90), rgba(6,10,22,0.94));

  border-right: 1px solid rgba(23,95,195,0.22);
  border-bottom: 1px solid rgba(23,95,195,0.22);
}

.interaction-table.mi-interaction-table .mi-int-row td:first-child{
  border-left: 1px solid rgba(23,95,195,0.22);
}

.interaction-table.mi-interaction-table .mi-int-row:last-child td:first-child{
  border-bottom-left-radius: 12px;
}

.interaction-table.mi-interaction-table .mi-int-row:last-child td:last-child{
  border-bottom-right-radius: 12px;
}

.interaction-table.mi-interaction-table .mi-int-row:hover td{
  background:
    linear-gradient(180deg, rgba(12,18,36,0.94), rgba(8,13,27,0.98));
}

/* ---------- label cell ---------- */

.interaction-table.mi-interaction-table .mi-int-label-cell{
  text-align: left;
}

.interaction-table.mi-interaction-table .mi-int-label-main{
  color: rgba(241,245,249,0.95);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.15;
}

.interaction-table.mi-interaction-table .mi-int-label-sub{
  margin-top: 3px;
  color: rgba(148,163,184,0.90);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.01em;
}

/* ---------- leverage bar ---------- */

.interaction-table.mi-interaction-table .mi-int-bar-cell{
  padding-left: 12px;
  padding-right: 12px;
}

.interaction-table.mi-interaction-table .mi-int-bar-wrap{
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}

.interaction-table.mi-interaction-table .mi-int-bar{
  position: relative;
  width: 100%;
  height: 14px;
  border-radius: 999px;
  overflow: hidden;

  background:
    linear-gradient(180deg, rgba(2,6,23,0.98), rgba(15,23,42,0.92));

  border: 1px solid rgba(148,163,184,0.18);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    inset 0 0 0 1px rgba(255,255,255,0.02),
    0 6px 14px rgba(0,0,0,0.26);
}

/* subtle segmentation */
.interaction-table.mi-interaction-table .mi-int-bar::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;

  background-image: repeating-linear-gradient(
    to right,
    transparent 0,
    transparent calc(10% - 1px),
    rgba(255,255,255,0.05) calc(10% - 1px),
    rgba(255,255,255,0.05) 10%
  );

  opacity: 0.55;
}

/* center line */
.interaction-table.mi-interaction-table .mi-int-bar-center{
  position: absolute;
  top: -2px;
  bottom: -2px;
  left: 50%;
  width: 2px;
  z-index: 3;
  transform: translateX(-50%);
  border-radius: 999px;

  background: rgba(226,232,240,0.82);

  box-shadow:
    0 0 0 1px rgba(2,6,23,0.55),
    0 0 6px rgba(226,232,240,0.20);
}

/* shared fill */
.interaction-table.mi-interaction-table .mi-int-bar-fill{
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0%;
  z-index: 2;
}

/* Team A / left side */
.interaction-table.mi-interaction-table .mi-int-bar-fill-a{
  right: 50%;
  border-top-left-radius: 999px;
  border-bottom-left-radius: 999px;

  background:
    linear-gradient(270deg,
      rgba(56,189,248,0.94) 0%,
      rgba(29,100,199,0.96) 68%,
      rgba(23,95,195,0.98) 100%
    );

  box-shadow:
    0 0 10px rgba(56,189,248,0.20),
    0 0 18px rgba(23,95,195,0.10);
}

/* Team B / right side */
.interaction-table.mi-interaction-table .mi-int-bar-fill-b{
  left: 50%;
  border-top-right-radius: 999px;
  border-bottom-right-radius: 999px;

  background:
    linear-gradient(90deg,
      rgba(251,146,60,0.94) 0%,
      rgba(249,115,22,0.96) 68%,
      rgba(234,88,12,0.98) 100%
    );

  box-shadow:
    0 0 10px rgba(251,146,60,0.20),
    0 0 18px rgba(234,88,12,0.10);
}

/* ---------- intensity thickness tiers ---------- */
/* Apply these classes to .mi-int-row from JS */

.interaction-table.mi-interaction-table .mi-int-row.tier-high .mi-int-bar{
  height: 16px;
}

.interaction-table.mi-interaction-table .mi-int-row.tier-mid .mi-int-bar{
  height: 13px;
}

.interaction-table.mi-interaction-table .mi-int-row.tier-low .mi-int-bar{
  height: 10px;
}

/* ---------- intensity pill ---------- */

.interaction-table.mi-interaction-table .mi-int-intensity-cell{
  text-align: center;
}

.interaction-table.mi-interaction-table .mi-int-intensity-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 66px;
  min-height: 28px;
  padding: 0 10px;

  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.24);

  background:
    linear-gradient(180deg, rgba(30,41,59,0.60), rgba(15,23,42,0.70));

  color: rgba(226,232,240,0.90);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;

  box-shadow:
    0 0 0 1px rgba(255,255,255,0.03) inset,
    0 6px 14px rgba(0,0,0,0.22);
}

.interaction-table.mi-interaction-table .mi-int-intensity-pill.is-high{
  color: rgba(186,230,253,0.98);
  border-color: rgba(56,189,248,0.34);
}

.interaction-table.mi-interaction-table .mi-int-intensity-pill.is-mid{
  color: rgba(226,232,240,0.92);
  border-color: rgba(148,163,184,0.30);
}

.interaction-table.mi-interaction-table .mi-int-intensity-pill.is-low{
  color: rgba(203,213,225,0.84);
  border-color: rgba(100,116,139,0.30);
}

/* ---------- accessibility helper ---------- */

.interaction-table.mi-interaction-table .sr-only{
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ---------- mobile tightening ---------- */

@media (max-width: 720px){
  .interaction-table.mi-interaction-table thead th{
    padding: 8px 6px;
    font-size: 10px;
    letter-spacing: 0.06em;
  }

  .interaction-table.mi-interaction-table .mi-int-row td{
    padding: 9px 6px;
  }

  .interaction-table.mi-interaction-table .mi-int-label-main{
    font-size: 11px;
  }

  .interaction-table.mi-interaction-table .mi-int-label-sub{
    font-size: 9px;
  }

  .interaction-table.mi-interaction-table .mi-int-bar{
    height: 12px;
  }

  .interaction-table.mi-interaction-table .mi-int-row.tier-high .mi-int-bar{
    height: 14px;
  }

  .interaction-table.mi-interaction-table .mi-int-row.tier-mid .mi-int-bar{
    height: 12px;
  }

  .interaction-table.mi-interaction-table .mi-int-row.tier-low .mi-int-bar{
    height: 9px;
  }

  .interaction-table.mi-interaction-table .mi-int-intensity-pill{
    min-width: 58px;
    min-height: 25px;
    font-size: 10px;
    padding: 0 8px;
  }
}

/* ==========================================================================
   INTERACTION TABLE — SPACE MAXIMIZATION PASS
   Paste at VERY bottom of styles2.css
   ========================================================================== */

/* ---------- overall container tightening ---------- */

.interaction-table.mi-interaction-table{
  border-radius: 16px;
}

/* reduce row padding slightly to free horizontal space */
.interaction-table.mi-interaction-table .mi-int-row td{
  padding: 9px 8px;
}

/* ---------- column balance (THIS IS THE BIG ONE) ---------- */

/* make leverage dominate visually */
.interaction-table.mi-interaction-table .mi-int-col-label{ width: 30%; }
.interaction-table.mi-interaction-table .mi-int-col-bar{ width: 50%; }
.interaction-table.mi-interaction-table .mi-int-col-intensity{ width: 20%; }

/* ---------- label tightening ---------- */

.interaction-table.mi-interaction-table .mi-int-label-cell{
  padding-right: 6px;
}

.interaction-table.mi-interaction-table .mi-int-label-main{
  font-size: 12px;
  font-weight: 700;
  line-height: 1.1;
}

.interaction-table.mi-interaction-table .mi-int-label-sub{
  font-size: 10px;
  margin-top: 2px;
  opacity: 0.85;
}

/* ---------- leverage bar expansion ---------- */

.interaction-table.mi-interaction-table .mi-int-bar-cell{
  padding-left: 4px;
  padding-right: 4px;
}

/* make bar visually larger */
.interaction-table.mi-interaction-table .mi-int-bar{
  height: 16px;
}

/* stronger hierarchy by tier */
.interaction-table.mi-interaction-table .mi-int-row.tier-high .mi-int-bar{
  height: 18px;
}

.interaction-table.mi-interaction-table .mi-int-row.tier-mid .mi-int-bar{
  height: 15px;
}

.interaction-table.mi-interaction-table .mi-int-row.tier-low .mi-int-bar{
  height: 12px;
}

/* soften segmentation so bar reads as continuous */
.interaction-table.mi-interaction-table .mi-int-bar::after{
  opacity: 0.35;
}

/* slightly dim center line so it doesn't compete with fill */
.interaction-table.mi-interaction-table .mi-int-bar-center{
  opacity: 0.65;
}

/* ---------- intensity column tightening ---------- */

.interaction-table.mi-interaction-table .mi-int-intensity-cell{
  padding-left: 6px;
  padding-right: 6px;
}

/* make pill smaller so bar gets priority */
.interaction-table.mi-interaction-table .mi-int-intensity-pill{
  min-width: 58px;
  min-height: 26px;
  font-size: 10px;
  padding: 0 8px;
}

/* ---------- row vertical density ---------- */

.interaction-table.mi-interaction-table .mi-int-row{
  height: 44px;
}

/* ---------- subtle row separation (cleaner scan) ---------- */

.interaction-table.mi-interaction-table .mi-int-row td{
  border-bottom: 1px solid rgba(56,189,248,0.12);
}

/* ---------- optional: give bar slight glow emphasis ---------- */

.interaction-table.mi-interaction-table .mi-int-bar-fill-a{
  box-shadow:
    0 0 12px rgba(56,189,248,0.25),
    0 0 20px rgba(23,95,195,0.12);
}

.interaction-table.mi-interaction-table .mi-int-bar-fill-b{
  box-shadow:
    0 0 12px rgba(251,146,60,0.25),
    0 0 20px rgba(234,88,12,0.12);
}

/* ==========================================================================
   FINAL UI-FRIENDLY METRICS REFINEMENT PASS
   Covers:
   1) MI Efficiency Metrics modules
   2) Verdict-shell scorebug mini metric bars
   3) Score Synthesis inline contribution bars
   Paste at VERY bottom of styles2.css
   ========================================================================== */

/* ==========================================================================
   1) MI EFFICIENCY METRICS — DISPLAY TOTALS MODULE
   ========================================================================== */

.mi-eff-module{
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 100%;
}

.mi-eff-module .mi-eff-header{
  margin-bottom: 4px;
}

.mi-eff-module .mi-eff-seg{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  border-top: 1px solid rgba(255,255,255,0.05);
}

.mi-eff-module .mi-eff-seg:first-of-type{
  border-top: 0;
}

.mi-eff-module .mi-eff-seg.is-emphasis{
  margin-top: 4px;
  padding: 13px 0 11px;
  border-top: 1px solid rgba(56,189,248,0.16);

  background:
    linear-gradient(180deg, rgba(12,24,56,0.22), rgba(4,10,26,0.04));
}

.mi-eff-module .mi-eff-meta{
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.mi-eff-module .mi-eff-label{
  color: rgba(241,245,249,0.95);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.01em;
}

.mi-eff-module .mi-eff-helper{
  color: rgba(148,163,184,0.84);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-transform: none;
}

.mi-eff-module .mi-eff-value{
  min-width: 52px;
  text-align: right;
  color: rgba(241,245,249,0.98);
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.01em;
}

.mi-eff-module .mi-eff-seg.is-emphasis .mi-eff-label{
  color: rgba(241,245,249,0.98);
  font-size: 13px;
}

.mi-eff-module .mi-eff-seg.is-emphasis .mi-eff-helper{
  color: rgba(148,163,184,0.90);
}

.mi-eff-module .mi-eff-seg.is-emphasis .mi-eff-value{
  font-size: 16px;
  font-weight: 900;
}

/* value state colors — JS can add these classes if desired */
.mi-eff-module .mi-eff-value.is-pos{
  color: #60a5fa;
}

.mi-eff-module .mi-eff-value.is-neg{
  color: #fdba74;
}

.mi-eff-module .mi-eff-value.is-flat{
  color: rgba(226,232,240,0.72);
}

/* ==========================================================================
   2) VERDICT SCOREBUG — MINI METRIC BARS
   ========================================================================== */

.mi-verdict-metrics-tile .mi-scorebug-grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "teamA teamB"
    "gap gap"
    "footer footer";
  gap: 10px 14px;
}

.mi-verdict-metrics-tile .mi-scorebug-team--a{ grid-area: teamA; }
.mi-verdict-metrics-tile .mi-scorebug-team--b{ grid-area: teamB; }
.mi-verdict-metrics-tile .mi-scorebug-gap{ grid-area: gap; }
.mi-verdict-metrics-tile .mi-scorebug-footer{ grid-area: footer; }

.mi-verdict-metrics-tile .mi-scorebug-team{
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#miScorebugTeamA .mi-verdict-metrics-tile .mi-scorebug-team-name{
  color: rgba(241,245,249,0.96);
  font-size: 43px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-align: center;
  padding-bottom: 2px;
}

.mi-verdict-metrics-tile .mi-scorebug-team-lines{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mi-verdict-metrics-tile .mi-scorebug-team-line--metric{
  display: flex;
  flex-direction: column;
  gap: 5px;

  padding: 8px 10px 9px;
  border-radius: 10px;

  background:
    linear-gradient(180deg, rgba(15,23,42,0.52), rgba(2,6,23,0.68));

  border: 1px solid rgba(148,163,184,0.12);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.03),
    0 6px 14px rgba(0,0,0,0.18);
}

.mi-verdict-metrics-tile .mi-scorebug-mini-label{
  color: rgba(226,232,240,0.84);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: left;
}

.mi-verdict-metrics-tile .mi-scorebug-mini-metric{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.mi-verdict-metrics-tile .mi-scorebug-mini-bar{
  position: relative;
  width: 100%;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;

  background:
    linear-gradient(180deg, rgba(2,6,23,0.98), rgba(15,23,42,0.92));

  border: 1px solid rgba(148,163,184,0.16);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    inset 0 0 0 1px rgba(255,255,255,0.02),
    0 4px 10px rgba(0,0,0,0.22);
}

.mi-verdict-metrics-tile .mi-scorebug-mini-bar::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;

  background-image: repeating-linear-gradient(
    to right,
    transparent 0,
    transparent calc(10% - 1px),
    rgba(255,255,255,0.05) calc(10% - 1px),
    rgba(255,255,255,0.05) 10%
  );

  opacity: 0.28;
}

.mi-verdict-metrics-tile .mi-scorebug-mini-center{
  position: absolute;
  top: -2px;
  bottom: -2px;
  left: 50%;
  width: 2px;
  z-index: 3;
  transform: translateX(-50%);
  border-radius: 999px;

  background: rgba(226,232,240,0.80);

  box-shadow:
    0 0 0 1px rgba(2,6,23,0.55),
    0 0 5px rgba(226,232,240,0.18);
}

.mi-verdict-metrics-tile .mi-scorebug-mini-fill{
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0%;
  z-index: 2;
}

.mi-verdict-metrics-tile .mi-scorebug-mini-fill-pos{
  left: 50%;
  border-top-right-radius: 999px;
  border-bottom-right-radius: 999px;

  background:
    linear-gradient(90deg,
      rgba(56,189,248,0.94) 0%,
      rgba(29,100,199,0.96) 68%,
      rgba(23,95,195,0.98) 100%
    );

  box-shadow:
    0 0 10px rgba(56,189,248,0.22),
    0 0 18px rgba(23,95,195,0.10);
}

.mi-verdict-metrics-tile .mi-scorebug-mini-fill-neg{
  right: 50%;
  border-top-left-radius: 999px;
  border-bottom-left-radius: 999px;

  background:
    linear-gradient(270deg,
      rgba(251,146,60,0.94) 0%,
      rgba(249,115,22,0.96) 68%,
      rgba(234,88,12,0.98) 100%
    );

  box-shadow:
    0 0 10px rgba(251,146,60,0.22),
    0 0 18px rgba(234,88,12,0.10);
}

.mi-verdict-metrics-tile .mi-scorebug-mini-value{
  min-width: 44px;
  text-align: right;
  color: rgba(241,245,249,0.96);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.01em;
}

.mi-verdict-metrics-tile .mi-scorebug-mini-value.is-pos{
  color: #60a5fa;
}

.mi-verdict-metrics-tile .mi-scorebug-mini-value.is-neg{
  color: #fdba74;
}

.mi-verdict-metrics-tile .mi-scorebug-mini-value.is-flat{
  color: rgba(226,232,240,0.72);
}

.mi-verdict-metrics-tile .mi-scorebug-gap{
  margin-top: 2px;
  padding-top: 8px;
  border-top: 1px solid rgba(56,189,248,0.14);
}

.mi-verdict-metrics-tile .mi-scorebug-gap-label{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  width: 100%;
  color: rgba(226,232,240,0.86);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mi-verdict-metrics-tile .mi-scorebug-gap-value{
  margin-top: 4px;
  text-align: center;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.01em;
  color: rgba(241,245,249,0.98);
}

.mi-verdict-metrics-tile .mi-scorebug-footer{
  padding-top: 2px;
}

.mi-verdict-metrics-tile .mi-scorebug-footer .mi-metrics-hint{
  text-align: center;
  font-size: 10px;
  opacity: 0.74;
}

/* ==========================================================================
   3) SCORE SYNTHESIS — INLINE CONTRIBUTION BARS
   ========================================================================== */

.summary-synthesis-table.mi-summary-synthesis-table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.summary-synthesis-table.mi-summary-synthesis-table .syn-title{
  padding: 0 0 12px;
  border: 0;
  background: transparent;
}

.summary-synthesis-table.mi-summary-synthesis-table .syn-kicker{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.summary-synthesis-table.mi-summary-synthesis-table .syn-team{
  padding: 10px 12px 12px;
  text-align: center;
  vertical-align: middle;

  background:
    linear-gradient(180deg, rgba(2,6,23,0.92), rgba(2,6,23,0.78));

  border-top: 1px solid rgba(56,189,248,0.18);
  border-bottom: 1px solid rgba(56,189,248,0.18);
}

.summary-synthesis-table.mi-summary-synthesis-table .syn-team-a{
  border-left: 1px solid rgba(56,189,248,0.18);
  border-top-left-radius: 14px;
}

.summary-synthesis-table.mi-summary-synthesis-table .syn-team-b{
  border-right: 1px solid rgba(56,189,248,0.18);
  border-top-right-radius: 14px;
}

.summary-synthesis-table.mi-summary-synthesis-table .syn-team span{
  color: rgba(241,245,249,0.96);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.05;
}

.summary-synthesis-table.mi-summary-synthesis-table .syn-center{
  width: 22%;
  min-width: 180px;
  padding: 10px 14px;
  text-align: center;
  vertical-align: middle;

  background:
    linear-gradient(180deg, rgba(8,13,27,0.90), rgba(6,10,22,0.94));

  border-top: 1px solid rgba(56,189,248,0.18);
  border-bottom: 1px solid rgba(23,95,195,0.22);
  border-left: 1px solid rgba(23,95,195,0.22);
  border-right: 1px solid rgba(23,95,195,0.22);
}

.summary-synthesis-table.mi-summary-synthesis-table .syn-center-inner{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 14px;
  min-height: 100%;
}

.summary-synthesis-table.mi-summary-synthesis-table .syn-lean-line{
  color: rgba(241,245,249,0.96);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
}

.summary-synthesis-table.mi-summary-synthesis-table .syn-volatility-mini{
  padding: 10px 10px 8px;
  border-radius: 12px;

  background:
    linear-gradient(180deg, rgba(15,23,42,0.70), rgba(2,6,23,0.78));

  border: 1px solid rgba(148,163,184,0.16);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.03),
    0 8px 20px rgba(0,0,0,0.22);
}

.summary-synthesis-table.mi-summary-synthesis-table .syn-volatility-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.summary-synthesis-table.mi-summary-synthesis-table .syn-volatility-label{
  color: rgba(226,232,240,0.80);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.summary-synthesis-table.mi-summary-synthesis-table .syn-volatility-score{
  color: rgba(241,245,249,0.96);
  font-size: 12px;
  font-weight: 800;
}

.summary-synthesis-table.mi-summary-synthesis-table .syn-volatility-bar{
  position: relative;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;

  background:
    linear-gradient(180deg, rgba(2,6,23,0.98), rgba(15,23,42,0.92));

  border: 1px solid rgba(148,163,184,0.14);
}

.summary-synthesis-table.mi-summary-synthesis-table .syn-volatility-fill{
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 999px;
}

.summary-synthesis-table.mi-summary-synthesis-table .syn-volatility-meta{
  margin-top: 6px;
  text-align: center;
}

.summary-synthesis-table.mi-summary-synthesis-table .syn-volatility-beneficiary{
  color: rgba(203,213,225,0.86);
  font-size: 10px;
  font-weight: 700;
}

.summary-synthesis-table.mi-summary-synthesis-table .syn-delta{
  padding-top: 2px;
  border-top: 1px solid rgba(56,189,248,0.12);
}

.summary-synthesis-table.mi-summary-synthesis-table .syn-delta-label{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  width: 100%;
  color: rgba(226,232,240,0.86);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.summary-synthesis-table.mi-summary-synthesis-table .syn-delta-value{
  display: block;
  margin-top: 4px;
  color: rgba(241,245,249,0.98);
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
}

.summary-synthesis-table.mi-summary-synthesis-table .syn-label{
  padding: 11px 12px;
  vertical-align: middle;

  background:
    linear-gradient(180deg, rgba(8,13,27,0.90), rgba(6,10,22,0.94));

  border-bottom: 1px solid rgba(23,95,195,0.22);
}

.summary-synthesis-table.mi-summary-synthesis-table .syn-label-a{
  border-left: 1px solid rgba(23,95,195,0.22);
  text-align: left;
}

.summary-synthesis-table.mi-summary-synthesis-table .syn-label-b{
  border-right: 1px solid rgba(23,95,195,0.22);
  text-align: right;
}

.summary-synthesis-table.mi-summary-synthesis-table .syn-label-stack{
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.summary-synthesis-table.mi-summary-synthesis-table .syn-label-main{
  color: rgba(241,245,249,0.95);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.15;
}

.summary-synthesis-table.mi-summary-synthesis-table .syn-label-hint{
  color: rgba(148,163,184,0.88);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.15;
}

.summary-synthesis-table.mi-summary-synthesis-table .syn-contrib-cell{
  padding: 10px 10px;
  vertical-align: middle;
  text-align: center;

  background:
    linear-gradient(180deg, rgba(8,13,27,0.90), rgba(6,10,22,0.94));

  border-bottom: 1px solid rgba(23,95,195,0.22);
}

.summary-synthesis-table.mi-summary-synthesis-table .syn-val-a{
  border-right: 1px solid rgba(23,95,195,0.22);
}

.summary-synthesis-table.mi-summary-synthesis-table .syn-val-b{
  border-left: 1px solid rgba(23,95,195,0.22);
}

.summary-synthesis-table.mi-summary-synthesis-table .mi-synth-inline-wrap{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.summary-synthesis-table.mi-summary-synthesis-table .mi-synth-inline-bar{
  position: relative;
  width: 100%;
  height: 14px;
  border-radius: 999px;
  overflow: hidden;

  background:
    linear-gradient(180deg, rgba(2,6,23,0.98), rgba(15,23,42,0.92));

  border: 1px solid rgba(148,163,184,0.18);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    inset 0 0 0 1px rgba(255,255,255,0.02),
    0 6px 14px rgba(0,0,0,0.26);
}

.summary-synthesis-table.mi-summary-synthesis-table .mi-synth-inline-bar::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;

  background-image: repeating-linear-gradient(
    to right,
    transparent 0,
    transparent calc(10% - 1px),
    rgba(255,255,255,0.05) calc(10% - 1px),
    rgba(255,255,255,0.05) 10%
  );

  opacity: 0.35;
}

.summary-synthesis-table.mi-summary-synthesis-table .mi-synth-inline-center{
  position: absolute;
  top: -2px;
  bottom: -2px;
  left: 50%;
  width: 2px;
  z-index: 3;
  transform: translateX(-50%);
  border-radius: 999px;

  background: rgba(226,232,240,0.82);

  box-shadow:
    0 0 0 1px rgba(2,6,23,0.55),
    0 0 6px rgba(226,232,240,0.20);
}

.summary-synthesis-table.mi-summary-synthesis-table .mi-synth-inline-fill{
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0%;
  z-index: 2;
}

.summary-synthesis-table.mi-summary-synthesis-table .mi-synth-inline-fill-pos{
  left: 50%;
  border-top-right-radius: 999px;
  border-bottom-right-radius: 999px;

  background:
    linear-gradient(90deg,
      rgba(56,189,248,0.94) 0%,
      rgba(29,100,199,0.96) 68%,
      rgba(23,95,195,0.98) 100%
    );

  box-shadow:
    0 0 12px rgba(56,189,248,0.24),
    0 0 20px rgba(23,95,195,0.12);
}

.summary-synthesis-table.mi-summary-synthesis-table .mi-synth-inline-fill-neg{
  right: 50%;
  border-top-left-radius: 999px;
  border-bottom-left-radius: 999px;

  background:
    linear-gradient(270deg,
      rgba(251,146,60,0.94) 0%,
      rgba(249,115,22,0.96) 68%,
      rgba(234,88,12,0.98) 100%
    );

  box-shadow:
    0 0 12px rgba(251,146,60,0.24),
    0 0 20px rgba(234,88,12,0.12);
}

.summary-synthesis-table.mi-summary-synthesis-table .mi-synth-inline-value{
  min-width: 44px;
  text-align: right;
  color: rgba(226,232,240,0.94);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1;
}

.summary-synthesis-table.mi-summary-synthesis-table .mi-synth-inline-value.is-pos{
  color: #60a5fa;
}

.summary-synthesis-table.mi-summary-synthesis-table .mi-synth-inline-value.is-neg{
  color: #fdba74;
}

.summary-synthesis-table.mi-summary-synthesis-table .mi-synth-inline-value.is-flat{
  color: rgba(226,232,240,0.72);
}

.summary-synthesis-table.mi-summary-synthesis-table .syn-final{
  width: 18%;
  min-width: 130px;
  padding: 10px 10px;
  vertical-align: middle;
  text-align: center;

  background:
    linear-gradient(180deg, rgba(10,16,32,0.94), rgba(5,9,20,0.98));

  border-bottom: 1px solid rgba(23,95,195,0.22);
}

.summary-synthesis-table.mi-summary-synthesis-table .syn-final-a{
  border-right: 1px solid rgba(23,95,195,0.22);
}

.summary-synthesis-table.mi-summary-synthesis-table .syn-final-b{
  border-left: 1px solid rgba(23,95,195,0.22);
}

.summary-synthesis-table.mi-summary-synthesis-table .syn-final-inner{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;

  min-height: 100%;
  padding: 8px 8px 10px;
  border-radius: 12px;

  background:
    linear-gradient(180deg, rgba(15,23,42,0.62), rgba(2,6,23,0.78));

  border: 1px solid rgba(148,163,184,0.16);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.03),
    0 8px 20px rgba(0,0,0,0.24);
}

.summary-synthesis-table.mi-summary-synthesis-table .syn-final-label{
  color: rgba(226,232,240,0.84);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
}

.summary-synthesis-table.mi-summary-synthesis-table .syn-final-hint{
  color: rgba(148,163,184,0.82);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
}

.summary-synthesis-table.mi-summary-synthesis-table .syn-final-value{
  color: rgba(241,245,249,0.98);
  font-size: 19px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.01em;
}

.summary-synthesis-table.mi-summary-synthesis-table tr:last-child .syn-label-a{
  border-bottom-left-radius: 14px;
}

.summary-synthesis-table.mi-summary-synthesis-table tr:last-child .syn-label-b{
  border-bottom-right-radius: 14px;
}

.summary-synthesis-table.mi-summary-synthesis-table tr:hover .syn-label,
.summary-synthesis-table.mi-summary-synthesis-table tr:hover .syn-contrib-cell,
.summary-synthesis-table.mi-summary-synthesis-table tr:hover .syn-final,
.summary-synthesis-table.mi-summary-synthesis-table tr:hover .syn-center{
  background:
    linear-gradient(180deg, rgba(12,18,36,0.94), rgba(8,13,27,0.98));
}

/* ==========================================================================
   UTILITY / SHARED
   ========================================================================== */

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

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 980px){
  .mi-eff-module .mi-eff-label{
    font-size: 11px;
  }

  .mi-eff-module .mi-eff-helper{
    font-size: 9px;
  }

  .mi-eff-module .mi-eff-value{
    font-size: 13px;
  }

  .mi-eff-module .mi-eff-seg.is-emphasis .mi-eff-value{
    font-size: 15px;
  }

  .mi-verdict-metrics-tile .mi-scorebug-grid{
    gap: 8px 10px;
  }

  .mi-verdict-metrics-tile .mi-scorebug-team-name{
    font-size: 12px;
  }

  .mi-verdict-metrics-tile .mi-scorebug-mini-value{
    min-width: 40px;
    font-size: 11px;
  }

  .summary-synthesis-table.mi-summary-synthesis-table .syn-team span{
    font-size: 13px;
  }

  .summary-synthesis-table.mi-summary-synthesis-table .syn-label-main{
    font-size: 11px;
  }

  .summary-synthesis-table.mi-summary-synthesis-table .syn-label-hint{
    font-size: 9px;
  }

  .summary-synthesis-table.mi-summary-synthesis-table .mi-synth-inline-bar{
    height: 12px;
  }

  .summary-synthesis-table.mi-summary-synthesis-table .mi-synth-inline-value{
    min-width: 40px;
    font-size: 11px;
  }

  .summary-synthesis-table.mi-summary-synthesis-table .syn-final-value{
    font-size: 17px;
  }

  .summary-synthesis-table.mi-summary-synthesis-table .syn-center{
    min-width: 160px;
  }
}

@media (max-width: 720px){
  .mi-eff-module .mi-eff-seg{
    gap: 8px;
    padding: 10px 0;
  }

  .mi-eff-module .mi-eff-helper{
    display: none;
  }

  .mi-verdict-metrics-tile .mi-scorebug-grid{
    gap: 8px 10px;
  }

  .mi-verdict-metrics-tile .mi-scorebug-team-line--metric{
    padding: 7px 8px 8px;
  }

  .mi-verdict-metrics-tile .mi-scorebug-mini-label{
    font-size: 9px;
  }

  .mi-verdict-metrics-tile .mi-scorebug-mini-value{
    min-width: 36px;
    font-size: 10px;
  }

  .mi-verdict-metrics-tile .mi-scorebug-mini-bar{
    height: 9px;
  }

  .mi-verdict-metrics-tile .mi-scorebug-gap-value{
    font-size: 16px;
  }

  .summary-synthesis-table.mi-summary-synthesis-table .syn-team{
    padding: 8px 8px 10px;
  }

  .summary-synthesis-table.mi-summary-synthesis-table .syn-label,
  .summary-synthesis-table.mi-summary-synthesis-table .syn-contrib-cell,
  .summary-synthesis-table.mi-summary-synthesis-table .syn-final,
  .summary-synthesis-table.mi-summary-synthesis-table .syn-center{
    padding: 8px 6px;
  }

  .summary-synthesis-table.mi-summary-synthesis-table .syn-label-main{
    font-size: 10px;
  }

  .summary-synthesis-table.mi-summary-synthesis-table .syn-label-hint{
    display: none;
  }

  .summary-synthesis-table.mi-summary-synthesis-table .mi-synth-inline-wrap{
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
  }

  .summary-synthesis-table.mi-summary-synthesis-table .mi-synth-inline-value{
    min-width: 0;
    text-align: center;
    font-size: 10px;
  }

  .summary-synthesis-table.mi-summary-synthesis-table .syn-final-value{
    font-size: 15px;
  }

  .summary-synthesis-table.mi-summary-synthesis-table .syn-delta-value{
    font-size: 16px;
  }

  .summary-synthesis-table.mi-summary-synthesis-table .syn-center{
    min-width: 140px;
  }
}

/* VERDICT SCOREBUG SAFETY OVERRIDE */
#miVerdictMetricsTile .tile-front{
  display: grid !important;
}

#miVerdictMetricsTile .mi-scorebug-grid{
  width: 100%;
}

/* ============================= */
/* MI EFFICIENCY METRICS — CENTERED LAYOUT FIX */
/* ============================= */

.mi-eff-module {
  text-align: center;
}

/* Each metric block becomes vertical instead of horizontal */
.mi-eff-seg {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;
  gap: 3px; /* controls spacing between label/helper/value */

  padding: 10px 0;
}

/* Center the label + helper stack */
.mi-eff-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;
  gap: 2px;
}

/* Label */
.mi-eff-label {
  text-align: center;
}

/* Helper text */
.mi-eff-helper {
  display: none;
}

/* Value — give it presence and separation */
.mi-eff-value {
  display: block;
  text-align: center;

  margin-top: 4px;
}

/* Emphasis row (Combined Margin) — keep centered */
.mi-eff-seg.is-emphasis {
  align-items: center;
  text-align: center;
}


/* Let the left proclamation breathe, but not dominate */
#verdictShell .mi-verdict-main{
  min-width: 0;
}

#verdictShell .mi-scorebug-top{
  height: 100%;
  min-width: 0;
}

/* Slightly tighten headline width so the left side stops over-claiming space */
#verdictShell .mi-scorebug-line{
  max-width: 34ch !important;
  min-height: 0 !important;
}

#miVerdictMetricsTile{
  width: 100%;
  min-width: 0;
  align-self: stretch;
}

/* 3) Remove dead padding / nested capsule feel */
#miVerdictMetricsTile .flip-tile-inner{
  padding: 0 !important;
  height: 100%;
}

#miVerdictMetricsTile .tile-front{
  display: grid !important;
  grid-template-rows: 1fr auto !important;
  gap: 12px !important;
  height: 100%;
  min-height: 0;
  padding: 16px 16px 12px !important;
}

/* Make the outer tile a little cleaner and less “glowy noisy” */
#verdictShell .mi-scorebug-score.mi-verdict-metrics-tile{
  padding: 0 !important;
  border-radius: 16px !important;
  border: 1px solid rgba(148,163,184,0.22) !important;
  background:
    radial-gradient(140% 140% at 50% -10%,
      rgba(56,189,248,0.08),
      transparent 58%
    ),
    linear-gradient(180deg,
      rgba(10,15,28,0.96),
      rgba(4,8,18,0.98)
    ) !important;
  box-shadow:
    0 14px 30px rgba(0,0,0,0.38),
    inset 0 1px 0 rgba(255,255,255,0.04) !important;
}

/* 4) Expand internal grid spacing */
.mi-verdict-metrics-tile .mi-scorebug-grid{
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  grid-template-areas:
    "teamA teamB"
    "gap gap"
    "footer footer";
  gap: 14px 18px !important;
  width: 100%;
  min-width: 0;
}

/* 5) Team blocks should feel lighter so the bar becomes the star */
.mi-verdict-metrics-tile .mi-scorebug-team{
  gap: 10px !important;
}

.mi-verdict-metrics-tile .mi-scorebug-team-lines{
  gap: 10px !important;
}

/* Reduce panel noise around each metric row */
.mi-verdict-metrics-tile .mi-scorebug-team-line--metric{
  gap: 6px !important;
  padding: 8px 10px 10px !important;
  border-radius: 11px !important;

  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.02),
      rgba(255,255,255,0.01)
    ),
    rgba(9,14,26,0.58) !important;

  border: 1px solid rgba(148,163,184,0.10) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.025) !important;
}

.mi-verdict-metrics-tile .mi-scorebug-mini-label{
  font-size: 10px !important;
  letter-spacing: 0.045em !important;
  color: rgba(226,232,240,0.76) !important;
}

/* 6) Give the actual bar lane more space */
.mi-verdict-metrics-tile .mi-scorebug-mini-metric{
  grid-template-columns: minmax(0, 1fr) minmax(48px, auto) !important;
  gap: 12px !important;
}

/* 7) Make bars taller, cleaner, brighter */
.mi-verdict-metrics-tile .mi-scorebug-mini-bar{
  height: 14px !important;
  border-radius: 999px !important;
  background:
    linear-gradient(180deg,
      rgba(2,6,23,0.92),
      rgba(13,20,36,0.96)
    ) !important;
  border: 1px solid rgba(148,163,184,0.14) !important;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.03),
    inset 0 0 0 1px rgba(255,255,255,0.015) !important;
}

/* Remove the segmented stripe overlay — it’s part of the visual clutter */
.mi-verdict-metrics-tile .mi-scorebug-mini-bar::after{
  display: none !important;
}

/* Make the zero-line thinner and quieter */
.mi-verdict-metrics-tile .mi-scorebug-mini-center{
  top: -1px !important;
  bottom: -1px !important;
  width: 1px !important;
  background: rgba(226,232,240,0.72) !important;
  box-shadow:
    0 0 0 1px rgba(2,6,23,0.42),
    0 0 6px rgba(226,232,240,0.10) !important;
}

/* Stronger fills so they read first */
.mi-verdict-metrics-tile .mi-scorebug-mini-fill{
  top: 1px !important;
  bottom: 1px !important;
}

.mi-verdict-metrics-tile .mi-scorebug-mini-fill-pos{
  background:
    linear-gradient(90deg,
      rgba(125,211,252,0.98) 0%,
      rgba(56,189,248,0.98) 38%,
      rgba(23,95,195,1) 100%
    ) !important;
  box-shadow:
    0 0 12px rgba(56,189,248,0.34),
    0 0 22px rgba(23,95,195,0.18) !important;
}

.mi-verdict-metrics-tile .mi-scorebug-mini-fill-neg{
  background:
    linear-gradient(270deg,
      rgba(253,186,116,0.98) 0%,
      rgba(249,115,22,0.98) 38%,
      rgba(234,88,12,1) 100%
    ) !important;
  box-shadow:
    0 0 12px rgba(251,146,60,0.30),
    0 0 22px rgba(234,88,12,0.16) !important;
}

/* Slightly stronger value text */
.mi-verdict-metrics-tile .mi-scorebug-mini-value{
  min-width: 50px !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}

/* 8) Clean up the delta row */
.mi-verdict-metrics-tile .mi-scorebug-gap{
  margin-top: 0 !important;
  padding-top: 10px !important;
  border-top: 1px solid rgba(148,163,184,0.12) !important;
  column-gap: 14px !important;
}

.mi-verdict-metrics-tile .mi-scorebug-gap-label{
  justify-self: start !important;
  gap: 8px !important;
  color: rgba(226,232,240,0.92) !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  letter-spacing: 0.045em !important;
  text-transform: uppercase !important;
}

.mi-verdict-metrics-tile .mi-scorebug-gap-value{
  justify-self: end !important;
  font-size: 20px !important;
  font-weight: 950 !important;
  letter-spacing: -0.01em !important;
}

/* 9) Footer hint should recede */
#miVerdictMetricsTile .mi-scorebug-footer{
  position: static !important;
  margin: 0 !important;
  padding-top: 2px !important;
}

#miVerdictMetricsTile .mi-flip-hint{
  opacity: 0.56 !important;
  font-size: 10px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

/* 10) Slightly more equal shell on mid-size screens */
@media (max-width: 1180px){
  #verdictShell .mi-verdict-grid{
    grid-template-columns: minmax(0, 1.04fr) minmax(360px, 0.96fr) !important;
    gap: 18px !important;
  }

  #verdictShell .mi-scorebug-line{
    max-width: 30ch !important;
    font-size: 24px !important;
  }
}

/* 11) Before mobile stack, protect the scorebug first */
@media (max-width: 980px){
  #verdictShell .mi-verdict-grid{
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  #verdictShell .mi-verdict-rail{
    width: 100%;
  }

  #miVerdictMetricsTile .tile-front{
    padding: 14px 14px 12px !important;
  }
}

/* =========================================================
   SCORE SYNTHESIS — final spacing / bar visibility pass
   Paste at very bottom of styles2.css
   ========================================================= */

#summarySection.card.summary-card{
  padding: 8px 10px 10px;
}

#summarySection .summary-synthesis-wrap{
  width: 100%;
}

/* Rebalance the 7-lane table so the side contribution bars get real room */
#summarySection .summary-synthesis-table{
  --syn-w-label: 15%;
  --syn-w-val: 12%;
  --syn-w-final: 9%;
  --syn-w-center: 20%;

  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;

  background:
    linear-gradient(180deg, rgba(4, 10, 24, 0.88), rgba(2, 6, 23, 0.94));
  border: 1px solid rgba(148, 163, 184, 0.20);
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 14px 34px rgba(0,0,0,0.34),
    inset 0 1px 0 rgba(255,255,255,0.03);
}

/* Slightly cleaner cell treatment */
#summarySection .summary-synthesis-table th,
#summarySection .summary-synthesis-table td{
  padding: 4px;
  border-color: rgba(148, 163, 184, 0.16);
}

/* Header row */
#summarySection .summary-synthesis-table .syn-title{
  padding: 6px 6px 8px;
}

#summarySection .summary-synthesis-table .syn-kicker{
  min-height: 32px;
}

/* Team headers */
#summarySection .summary-synthesis-table .syn-team{
  padding: 12px 12px 13px;
  background:
    linear-gradient(180deg, rgba(10, 18, 38, 0.82), rgba(4, 10, 24, 0.72));
}

#summarySection .summary-synthesis-table .syn-team span{
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.01em;
}

/* Center column should not bully the rest of the layout */
#summarySection .summary-synthesis-table .syn-center{
  width: auto;
  min-width: 0;
  padding: 10px 12px;
  background:
    linear-gradient(180deg, rgba(8,13,27,0.72), rgba(6,10,22,0.82));
}

#summarySection .summary-synthesis-table .syn-center-inner{
  gap: 12px;
}

#summarySection .summary-synthesis-table .syn-lean-line{
  font-size: 14px;
  line-height: 1.12;
}

#summarySection .summary-synthesis-table .syn-volatility-mini{
  padding: 10px 10px 9px;
  border-radius: 10px;
  border-color: rgba(148,163,184,0.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.03),
    0 6px 16px rgba(0,0,0,0.18);
}

/* Make the delta banner feel cleaner and less crowded */
#summarySection .summary-synthesis-table .syn-delta{
  padding: 12px 14px;
  gap: 12px;
}

#summarySection .summary-synthesis-table .syn-delta-label{
  font-size: 15px;
  letter-spacing: 0.12em;
}

#summarySection .summary-synthesis-table .syn-delta-value{
  font-size: 18px;
}

/* Side label cells */
#summarySection .summary-synthesis-table .syn-label{
  background: rgba(15, 23, 42, 0.24);
}

#summarySection .summary-synthesis-table .syn-label-stack{
  gap: 3px;
}

#summarySection .summary-synthesis-table .syn-label-main{
  font-size: 13px;
  font-weight: 800;
  line-height: 1.12;
}

/* Keep hints hidden like your current design */
#summarySection .summary-synthesis-table .syn-label-hint,
.syn-label-hint{
  display: none !important;
}

/* Contribution cells get a little more usable interior width */
.summary-synthesis-table.mi-summary-synthesis-table .syn-contrib-cell{
  padding: 8px 8px;
  background:
    linear-gradient(180deg, rgba(8,13,27,0.72), rgba(6,10,22,0.82));
}

/* This is the key fix: bar area gets more room and cleaner spacing */
.summary-synthesis-table.mi-summary-synthesis-table .mi-synth-inline-wrap{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  width: 100%;
}

/* Make the bars visibly substantial */
.summary-synthesis-table.mi-summary-synthesis-table .mi-synth-inline-bar{
  height: 18px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(148,163,184,0.14);
  background:
    linear-gradient(180deg, rgba(2,6,23,0.96), rgba(15,23,42,0.88));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    inset 0 0 0 1px rgba(255,255,255,0.02),
    0 4px 12px rgba(0,0,0,0.18);
}

/* Tone down the tick noise so the fill stands out more */
.summary-synthesis-table.mi-summary-synthesis-table .mi-synth-inline-bar::after{
  opacity: 0.18;
}

/* Slightly stronger center marker inside each bar */
.summary-synthesis-table.mi-summary-synthesis-table .mi-synth-inline-center{
  width: 2px;
  background: rgba(226,232,240,0.88);
  box-shadow: 0 0 8px rgba(255,255,255,0.18);
}

/* Make the value readouts compact so they stop stealing width from the bars */
.summary-synthesis-table.mi-summary-synthesis-table .mi-synth-inline-value,
.summary-synthesis-table.mi-summary-synthesis-table .syn-val{
  min-width: 40px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}

/* Final MI side boxes */
#summarySection .summary-synthesis-table .syn-final{
  background: rgba(3, 7, 18, 0.52);
}

#summarySection .summary-synthesis-table .syn-final-inner{
  min-height: 144px;
  gap: 5px;
}

#summarySection .summary-synthesis-table .syn-final-label{
  font-size: 13px;
  letter-spacing: 0.12em;
}

#summarySection .summary-synthesis-table .syn-final-value{
  font-size: 19px;
}

/* Desktop-only: give the whole section a little more horizontal calm */
@media (min-width: 1100px){
  #summarySection.card.summary-card{
    padding-left: 12px;
    padding-right: 12px;
  }

  #summarySection .summary-synthesis-table{
    --syn-w-label: 14%;
    --syn-w-val: 13%;
    --syn-w-final: 9%;
    --syn-w-center: 18%;
  }
}

/* =========================================================
   VERDICT SCOREBUG — Madness Delta row repair
   Paste at VERY BOTTOM of styles2.css
   ========================================================= */

#miVerdictMetricsTile .mi-scorebug-gap{
  grid-area: gap !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;

  width: 100% !important;
  min-width: 0 !important;

  margin-top: 2px !important;
  padding-top: 10px !important;

  border-top: 1px solid rgba(148,163,184,0.12) !important;
}

#miVerdictMetricsTile .mi-scorebug-gap-label{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;

  white-space: nowrap !important;
  min-width: 0 !important;

  font-size: 18px !important;
  line-height: 1 !important;
  color: rgba(226,232,240,0.84) !important;
}

#miVerdictMetricsTile .mi-scorebug-gap-value{
  display: inline-block !important;

  font-size: 22px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.01em !important;
  font-variant-numeric: tabular-nums !important;

  color: rgba(241,245,249,0.98) !important;
  text-align: left !important;
  white-space: nowrap !important;
  min-width: 0 !important;
}

#miVerdictMetricsTile .mi-scorebug-gap-label .mi-delta-mark{
  width: auto !important;
  height: 1.05em !important;
  flex: 0 0 auto !important;
  vertical-align: 0 !important;
}

/* ==========================================================================
   INTERACTIONS LEFT PANEL — COHESION + SPACE UTILIZATION OVERRIDE
   Purpose:
   1) Make the left side fill its allotted height more convincingly
   2) Make the table + totals row read as one unified scorecard module
   3) Reduce the “floating separate box” feeling
   Paste at VERY BOTTOM of styles2.css
   ========================================================================== */

#interactionsSection .interactions-left.interactions-left-tile{
  display: block !important;
  min-height: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 18px !important;

  background:
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.00) 28%),
    radial-gradient(140% 120% at 50% -18%, rgba(23,95,195,0.10), transparent 62%),
    rgba(4, 10, 24, 0.96) !important;

  border: 1px solid rgba(56,189,248,0.18) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.03),
    0 14px 34px rgba(0,0,0,0.38) !important;
}

#interactionsSection .interactions-left-tile.flip-tile .flip-tile-inner{
  min-height: 100% !important;
  height: 100% !important;
}

#interactionsSection .interactions-left-tile.flip-tile .tile-face.interactions-front-face{
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto auto !important;
  gap: 8px !important;

  min-height: 100% !important;
  height: 100% !important;

  padding: 12px 12px 10px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* In styles2.css — paste after line 17540 */

/* Make the outer tile a flex column so flip-tile-inner can grow via flex, 
   bypassing the broken height:100% chain from the auto-height grid */
#interactionsSection .interactions-left.interactions-left-tile.flip-tile {
  display: flex !important;
  flex-direction: column !important;
}

#interactionsSection .interactions-left-tile.flip-tile .flip-tile-inner {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  /* keep height:100% as fallback for other contexts */
}

/* =========================================================
   INTERACTION METRICS FLIP — back face height fix
   When flipped, let the back face drive the container height
   (mirrors the .team-card.flipped pattern used elsewhere)
   ========================================================= */

#interactionsSection .interactions-left-tile.flip-tile.flipped
  .tile-face.tile-front.interactions-front-face {
  position: absolute !important;
  inset: 0 !important;
}

#interactionsSection .interactions-left-tile.flip-tile.flipped
  .tile-face.tile-back.interactions-back-face {
  position: relative !important;
  inset: auto !important;
  height: auto !important;
  min-height: 100% !important;
}

/* =========================
   TABLE REGION
   ========================= */

#interactionsSection .interaction-table-wrap{
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;

  display: flex !important;
  flex-direction: column !important;

  border-radius: 14px 14px 0 0 !important;
  border: 1px solid rgba(56,189,248,0.16) !important;
  border-bottom: none !important;

  background:
    linear-gradient(180deg, rgba(10,18,36,0.96), rgba(6,10,22,0.96)) !important;

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.025) !important;
}

/* cancel earlier "display:block/scroll table" overrides */
#interactionsSection .interaction-table.mi-interaction-table{
  display: table !important;
  width: 100% !important;
  height: 100% !important;
  table-layout: fixed !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
}

/* slightly wider leverage column so the bars feel more important */
#interactionsSection .interaction-table.mi-interaction-table .mi-int-col-label{
  width: 30% !important;
}
#interactionsSection .interaction-table.mi-interaction-table .mi-int-col-bar{
  width: 50% !important;
}
#interactionsSection .interaction-table.mi-interaction-table .mi-int-col-intensity{
  width: 20% !important;
}

#interactionsSection .interaction-table.mi-interaction-table thead th{
  position: relative;
  padding: 10px 10px !important;
  font-size: 11px !important;
  border-top: none !important;
}

#interactionsSection .interaction-table.mi-interaction-table thead th:first-child{
  border-top-left-radius: 13px !important;
}
#interactionsSection .interaction-table.mi-interaction-table thead th:last-child{
  border-top-right-radius: 13px !important;
}

/* increase row footprint so the left panel uses vertical space better */
#interactionsSection .interaction-table.mi-interaction-table .mi-int-row td{
  padding-top: 13px !important;
  padding-bottom: 13px !important;
}

#interactionsSection .interaction-table.mi-interaction-table .mi-int-row{
  height: 56px !important;
}

#interactionsSection .interaction-table.mi-interaction-table .mi-int-label-main{
  font-size: 13px !important;
  font-weight: 800 !important;
}

#interactionsSection .interaction-table.mi-interaction-table .mi-int-label-sub{
  font-size: 10px !important;
  margin-top: 3px !important;
  opacity: 0.82 !important;
}

#interactionsSection .interaction-table.mi-interaction-table .mi-int-bar-cell{
  padding-left: 8px !important;
  padding-right: 8px !important;
}

#interactionsSection .interaction-table.mi-interaction-table .mi-int-bar{
  height: 18px !important;
  border-radius: 999px !important;
}

#interactionsSection .interaction-table.mi-interaction-table .mi-int-row.tier-high .mi-int-bar{
  height: 20px !important;
}

#interactionsSection .interaction-table.mi-interaction-table .mi-int-row.tier-mid .mi-int-bar{
  height: 17px !important;
}

#interactionsSection .interaction-table.mi-interaction-table .mi-int-row.tier-low .mi-int-bar{
  height: 14px !important;
}

#interactionsSection .interaction-table.mi-interaction-table .mi-int-intensity-pill{
  min-width: 60px !important;
  min-height: 28px !important;
  font-size: 10px !important;
}

/* =========================
   TOTALS ROW — stitch directly to table
   ========================= */

#interactionsSection #interactionTotalsBar,
#interactionsSection .interaction-totals-bar{
  flex: 0 0 auto !important;
  margin-top: -1px !important; /* visually stitches to the table shell */

  border-radius: 0 0 14px 14px !important;
  border: 1px solid rgba(56,189,248,0.16) !important;
  border-top: 1px solid rgba(56,189,248,0.10) !important;

  background:
    linear-gradient(180deg, rgba(12,18,36,0.98), rgba(8,12,24,0.98)) !important;

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.025) !important;

  padding: 12px 14px !important;
  min-height: 60px !important;
}

#interactionsSection .interaction-totals-bar .totals-left{
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  min-width: 0;
}

#interactionsSection .interaction-totals-bar .totals-title{
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: 0.06em !important;
}

#interactionsSection .interaction-totals-bar .totals-favored{
  margin-top: 0 !important;
  font-size: 11px !important;
  letter-spacing: 0.05em !important;
}

#interactionsSection .interaction-totals-bar .totals-right{
  gap: 10px !important;
}

#interactionsSection .interaction-totals-bar .totals-val{
  font-size: 15px !important;
  font-weight: 900 !important;
}

/* =========================
   FLIP HINT — keep it tucked in, not floating
   ========================= */

#interactionsSection .interactions-flip-hint{
  margin-top: 2px !important;
  align-self: center !important;
  opacity: 0.82;
}

/* =========================
   MOBILE
   ========================= */

@media (max-width: 980px){
  #interactionsSection .interactions-left-tile.flip-tile .tile-face.interactions-front-face{
    padding: 10px 10px 9px !important;
  }

  #interactionsSection .interaction-table.mi-interaction-table .mi-int-row{
    height: 52px !important;
  }

  #interactionsSection .interaction-totals-bar{
    padding: 11px 12px !important;
  }
}

/* ==========================================================================
   INTERACTIONS LEFT TILE — FINAL ALIGNMENT POLISH
   1) tighten flip hint alignment
   2) move/format "Leans Team X" beneath leverage bars
   ========================================================================== */

/* first column now only carries the main interaction title */
#interactionsSection .interaction-table.mi-interaction-table .mi-int-label-cell{
  text-align: center !important;
  vertical-align: middle !important;
}

#interactionsSection .interaction-table.mi-interaction-table .mi-int-label-main{
  display: block !important;
  line-height: 1.15 !important;
}

/* once JS moves the sublabel into the bar cell, hide old spacing behavior */
#interactionsSection .interaction-table.mi-interaction-table .mi-int-label-cell > .mi-int-label-sub{
  margin-top: 0 !important;
}

/* leverage cell becomes a stacked mini-layout: bar, then sublabel */
#interactionsSection .interaction-table.mi-interaction-table .mi-int-bar-cell{
  padding-top: 10px !important;
  padding-bottom: 8px !important;
}

#interactionsSection .interaction-table.mi-interaction-table .mi-int-bar-wrap{
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#interactionsSection .interaction-table.mi-interaction-table .mi-int-bar-sub{
  display: block !important;
  margin-top: 6px !important;
  padding-top: 6px;
  text-align: center !important;

  color: rgba(148,163,184,0.92) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: 0.01em !important;
}

/* make the row feel balanced now that the sublabel sits under the bar */
#interactionsSection .interaction-table.mi-interaction-table .mi-int-row td{
  vertical-align: middle !important;
}

/* flip hint: treat it like a centered footer note directly under totals */
#interactionsSection .interactions-flip-hint{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;

  margin: 0 !important;
  padding: 2px 0 0 !important;

  line-height: 1 !important;
  text-align: center !important;
  align-self: stretch !important;

  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  transform: none !important;

  opacity: 0.78 !important;
}

/* if the icon/text baseline still feels slightly low, this nudges it into line */
#interactionsSection .interactions-flip-hint::before{
  position: relative;
  top: -1px;
}

@media (max-width: 980px){
  #interactionsSection .interaction-table.mi-interaction-table .mi-int-bar-sub{
    margin-top: 5px !important;
    font-size: 9px !important;
  }

  #interactionsSection .interactions-flip-hint{
    padding-top: 3px !important;
  }
}

/* ==========================================================================
   INTERACTION TOTALS BAR — INLINE TEAM/VALUE FORMAT
   Replaces title/favored split with centered:
   Team A -0.455 / Team B +0.357
   ========================================================================== */

#interactionsSection #interactionTotalsBar,
#interactionsSection .interaction-totals-bar{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

#interactionsSection .interaction-totals-bar .totals-left,
#interactionsSection .interaction-totals-bar .totals-right,
#interactionsSection .interaction-totals-bar .totals-title,
#interactionsSection .interaction-totals-bar .totals-favored{
  display: none !important;
}

#interactionsSection .interaction-totals-bar .totals-inline{
  display: inline-flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;

  width: 100%;
  max-width: 100%;

  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em !important;
  line-height: 1.2 !important;
}

#interactionsSection .interaction-totals-bar .totals-team{
  color: #f3f4f6 !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

#interactionsSection .interaction-totals-bar .totals-val{
  font-size: 15px !important;
  font-weight: 900 !important;
  letter-spacing: 0.02em !important;
  white-space: nowrap !important;
}

#interactionsSection .interaction-totals-bar .totals-sep{
  opacity: 0.55 !important;
  font-weight: 700 !important;
  margin: 0 2px !important;
}

@media (max-width: 980px){
  #interactionsSection .interaction-totals-bar .totals-inline{
    gap: 6px !important;
    font-size: 14px !important;
  }

  #interactionsSection .interaction-totals-bar .totals-val{
    font-size: 14px !important;
  }
}

/* =========================================================
   VERDICT SCOREBUG — FINAL REPAIR PASS
   ========================================================= */

#miVerdictMetricsTile .flip-tile-inner,
#miVerdictMetricsTile .tile-face{
  height: 100%;
}

#miVerdictMetricsTile .flip-tile-inner{
  padding: 0 !important;
}

#miVerdictMetricsTile .tile-front{
  display: grid !important;
  grid-template-rows: 1fr auto !important;
  align-content: stretch !important;
  gap: 12px !important;
  min-height: 0 !important;
  height: 100% !important;
  padding: 16px 16px 14px !important;

  background:
    radial-gradient(
      125% 135% at 14% 0%,
      rgb(var(--team-a-tertiary-rgb, 107 114 128) / 0.08),
      transparent 34%
    ),
    radial-gradient(
      125% 135% at 86% 0%,
      rgb(var(--team-b-tertiary-rgb, 107 114 128) / 0.08),
      transparent 34%
    ),
    linear-gradient(
      180deg,
      rgba(9, 14, 28, 0.78),
      rgba(2, 6, 23, 0.88)
    ) !important;

  border: 1px solid rgba(148,163,184,0.16) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    inset 0 0 0 1px rgba(255,255,255,0.02),
    0 10px 22px rgba(0,0,0,0.24) !important;
}

/* Main internal scorebug grid */
#miVerdictMetricsTile .mi-scorebug-grid{
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  grid-template-areas:
    "teamA teamB"
    "gap gap"
    "footer footer" !important;
  gap: 14px 18px !important;
  width: 100% !important;
  min-width: 0 !important;
  align-content: stretch !important;
}

#miVerdictMetricsTile .mi-scorebug-team--a{ grid-area: teamA !important; }
#miVerdictMetricsTile .mi-scorebug-team--b{ grid-area: teamB !important; }

#miVerdictMetricsTile .mi-scorebug-team{
  min-width: 0 !important;
  align-self: stretch !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: 14px 14px 12px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(148,163,184,0.22) !important;

  background:
    radial-gradient(
      115% 130% at 50% 0%,
      rgb(var(--team-tertiary-rgb, 107 114 128) / 0.08),
      transparent 36%
    ),
    linear-gradient(
      180deg,
      rgba(15,23,42,0.48),
      rgba(2,6,23,0.68)
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.03),
    0 6px 16px rgba(0,0,0,0.20) !important;
}

#miVerdictMetricsTile .mi-scorebug-team--a{
  background:
    radial-gradient(
      115% 140% at 14% 0%,
      rgb(var(--team-a-primary-rgb, 107 114 128) / 0.10),
      transparent 38%
    ),
    radial-gradient(
      105% 125% at 26% 12%,
      rgb(var(--team-a-tertiary-rgb, 107 114 128) / 0.08),
      transparent 30%
    ),
    linear-gradient(
      180deg,
      rgba(15,23,42,0.48),
      rgba(2,6,23,0.68)
    ) !important;

  border-color: rgb(var(--team-a-tertiary-rgb, 148 163 184) / 0.18) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.03),
    0 6px 16px rgba(0,0,0,0.20),
    0 0 18px rgb(var(--team-a-tertiary-rgb, 107 114 128) / 0.08) !important;
}

#miVerdictMetricsTile .mi-scorebug-team--b{
  background:
    radial-gradient(
      115% 140% at 86% 0%,
      rgb(var(--team-b-primary-rgb, 107 114 128) / 0.10),
      transparent 38%
    ),
    radial-gradient(
      105% 125% at 74% 12%,
      rgb(var(--team-b-tertiary-rgb, 107 114 128) / 0.08),
      transparent 30%
    ),
    linear-gradient(
      180deg,
      rgba(15,23,42,0.48),
      rgba(2,6,23,0.68)
    ) !important;

  border-color: rgb(var(--team-b-tertiary-rgb, 148 163 184) / 0.18) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.03),
    0 6px 16px rgba(0,0,0,0.20),
    0 0 18px rgb(var(--team-b-tertiary-rgb, 107 114 128) / 0.08) !important;
}

#miVerdictMetricsTile .mi-scorebug-team-lines{
  display: grid !important;
  align-content: center !important;
  gap: 10px !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

#miVerdictMetricsTile .mi-scorebug-team-line--metric{
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  padding: 8px 10px 9px !important;
  border-radius: 10px !important;

  background:
    radial-gradient(
      120% 135% at 50% 0%,
      rgb(var(--team-tertiary-rgb, 107 114 128) / 0.05),
      transparent 42%
    ),
    linear-gradient(
      180deg,
      rgba(15,23,42,0.56),
      rgba(2,6,23,0.72)
    ) !important;

  border: 1px solid rgba(148,163,184,0.14) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.03),
    0 4px 12px rgba(0,0,0,0.18) !important;
}

#miVerdictMetricsTile .mi-scorebug-team--a .mi-scorebug-team-line--metric{
  border-color: rgb(var(--team-a-tertiary-rgb, 148 163 184) / 0.14) !important;
}

#miVerdictMetricsTile .mi-scorebug-team--b .mi-scorebug-team-line--metric{
  border-color: rgb(var(--team-b-tertiary-rgb, 148 163 184) / 0.14) !important;
}

#miVerdictMetricsTile .mi-scorebug-mini-label{
  color: rgba(226,232,240,0.82) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  text-align: left !important;
}

#miVerdictMetricsTile .mi-scorebug-mini-metric{
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
}

#miVerdictMetricsTile .mi-scorebug-mini-bar{
  position: relative !important;
  width: 100% !important;
  height: 10px !important;
  border-radius: 999px !important;
  overflow: hidden !important;

  background:
    linear-gradient(180deg, rgba(2,6,23,0.98), rgba(15,23,42,0.92)) !important;

  border: 1px solid rgba(148,163,184,0.16) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    inset 0 0 0 1px rgba(255,255,255,0.02),
    0 4px 10px rgba(0,0,0,0.22) !important;
}

#miVerdictMetricsTile .mi-scorebug-team--a .mi-scorebug-mini-bar{
  border-color: rgb(var(--team-a-tertiary-rgb, 148 163 184) / 0.16) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    inset 0 0 0 1px rgba(255,255,255,0.02),
    0 0 10px rgb(var(--team-a-tertiary-rgb, 107 114 128) / 0.08),
    0 4px 10px rgba(0,0,0,0.22) !important;
}

#miVerdictMetricsTile .mi-scorebug-team--b .mi-scorebug-mini-bar{
  border-color: rgb(var(--team-b-tertiary-rgb, 148 163 184) / 0.16) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    inset 0 0 0 1px rgba(255,255,255,0.02),
    0 0 10px rgb(var(--team-b-tertiary-rgb, 107 114 128) / 0.08),
    0 4px 10px rgba(0,0,0,0.22) !important;
}

#miVerdictMetricsTile .mi-scorebug-mini-bar::after{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 4 !important;

  background-image: repeating-linear-gradient(
    to right,
    transparent 0,
    transparent calc(10% - 1px),
    rgba(255,255,255,0.05) calc(10% - 1px),
    rgba(255,255,255,0.05) 10%
  ) !important;

  opacity: 0.28 !important;
}

#miVerdictMetricsTile .mi-scorebug-mini-center{
  position: absolute !important;
  top: -2px !important;
  bottom: -2px !important;
  left: 50% !important;
  width: 1px !important;
  transform: translateX(-50%) !important;
  background: rgba(255,255,255,0.18) !important;
  box-shadow: 0 0 6px rgba(255,255,255,0.08) !important;
  z-index: 3 !important;
}

#verdictShell #miVerdictMetricsTile .mi-scorebug-mini-metric > .mi-scorebug-mini-value{
  order: 2 !important;
}

#verdictShell #miVerdictMetricsTile .mi-scorebug-mini-bar{
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 14px !important;
  margin: 0 !important;
  align-self: stretch !important;
  justify-self: stretch !important;
}

#verdictShell #miVerdictMetricsTile .mi-scorebug-mini-value{
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding-top: 1px !important;

  text-align: center !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  font-variant-numeric: tabular-nums !important;
}

/* Prevent inherited shrink constraints */
#verdictShell #miVerdictMetricsTile .mi-scorebug-mini-metric > *{
  min-width: 0 !important;
}

/* ===== Row 2: Madness Delta strip ===== */
#verdictShell #miVerdictMetricsTile .mi-scorebug-gap{
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;

  width: 100% !important;
  min-width: 0 !important;
  min-height: 46px !important;

  margin: 0 !important;
  padding: 10px 14px !important;

  border-radius: 12px !important;
  border: 1px solid rgba(148,163,184,0.20) !important;

  background:
    radial-gradient(
      120% 130% at 50% 0%,
      rgb(var(--mi-winner-tertiary-rgb, 148 163 184) / 0.10),
      transparent 44%
    ),
    linear-gradient(
      180deg,
      rgba(4,8,18,0.82),
      rgba(2,6,23,0.92)
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 0 18px rgb(var(--mi-winner-tertiary-rgb, 148 163 184) / 0.08),
    0 6px 14px rgba(0,0,0,0.20) !important;

  text-align: center !important;
}

#verdictShell #miVerdictMetricsTile .mi-scorebug-gap-label{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;

  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;

  white-space: nowrap !important;
  line-height: 1 !important;
}

#verdictShell #miVerdictMetricsTile .mi-scorebug-gap-value{
  display: inline-block !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;

  text-align: center !important;
  white-space: nowrap !important;

  font-size: 22px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
}

#miVerdictMetricsTile .mi-scorebug-gap-label .mi-delta-mark{
  width: auto !important;
  height: 1.02em !important;
  flex: 0 0 auto !important;
  vertical-align: 0 !important;
}

/* Footer hint — centered true footer, visually below the delta strip */
#miVerdictMetricsTile .mi-scorebug-footer{
  grid-area: footer !important;
  grid-column: 1 / -1 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  margin: 0 !important;
  padding: 2px 0 0 !important;
  min-height: 18px !important;

  position: static !important;
  align-self: end !important;
}

#miVerdictMetricsTile .mi-flip-hint,
#miVerdictMetricsTile .mi-scorebug-footer .mi-metrics-hint{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  color: var(--mi-text-muted) !important;
  opacity: 1 !important;
}

/* =========================================================
   SCOREBUG — maximize bar width + move values below bars
   ========================================================= */

.mi-verdict-metrics-tile .mi-scorebug-team-line--metric{
  padding: 8px 8px 10px !important;
}

.mi-verdict-metrics-tile .mi-scorebug-mini-metric{
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  gap: 6px !important;
  align-items: stretch !important;
  justify-items: stretch !important;
}

.mi-verdict-metrics-tile .mi-scorebug-mini-bar{
  width: 100% !important;
  min-width: 0 !important;
  justify-self: stretch !important;
}

.mi-verdict-metrics-tile .mi-scorebug-mini-value{
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  text-align: center !important;
  justify-self: stretch !important;
  margin: 0 !important;
  padding-top: 1px !important;
  font-size: 13px !important;
  line-height: 1 !important;
}

/* =========================================================
   SCOREBUG — HARD OVERRIDE
   Force metric values below bars + bars use full lane width
   Paste at absolute bottom of styles2.css
   ========================================================= */

#miVerdictMetricsTile .mi-scorebug-grid{
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 12px 16px !important;
}

#miVerdictMetricsTile .mi-scorebug-team{
  min-width: 0 !important;
  width: 100% !important;
}

#miVerdictMetricsTile .mi-scorebug-team-lines{
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
}

#miVerdictMetricsTile .mi-scorebug-team-line--metric{
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 6px !important;

  width: 100% !important;
  min-width: 0 !important;

  padding: 8px 8px 10px !important;
}

#miVerdictMetricsTile .mi-scorebug-mini-label{
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  text-align: left !important;
}

#miVerdictMetricsTile .mi-scorebug-mini-metric{
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 6px !important;

  width: 100% !important;
  min-width: 0 !important;

  grid-template-columns: none !important;
  grid-template-rows: none !important;
}

#miVerdictMetricsTile .mi-scorebug-mini-bar{
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  justify-self: auto !important;
  align-self: stretch !important;

  height: 14px !important;
  margin: 0 !important;
}

#miVerdictMetricsTile .mi-scorebug-mini-value{
  display: block !important;
  order: 2 !important;

  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;

  margin: 0 !important;
  padding-top: 2px !important;

  text-align: center !important;
  justify-self: auto !important;
  align-self: stretch !important;

  font-size: 13px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

#miVerdictMetricsTile .mi-scorebug-mini-metric > .mi-scorebug-mini-bar{
  order: 1 !important;
}

#miVerdictMetricsTile .mi-scorebug-mini-metric > .mi-scorebug-mini-value{
  order: 2 !important;
}

/* Prevent any inherited lane constraints from shrinking the bar */
#miVerdictMetricsTile .mi-scorebug-mini-metric > *{
  min-width: 0 !important;
}

/* Slightly reduce inner chrome so the bar lane feels wider */
#miVerdictMetricsTile .mi-scorebug-team-line--metric{
  border-radius: 10px !important;
}

#miVerdictMetricsTile .mi-scorebug-team{
  gap: 8px !important;
}

/* =========================================================
   SCORE SYNTHESIS — restore strong lens presence (bottom paste)
   Uses existing token wiring:
   - #summarySection[data-lens="..."] => --mi-role-active*
   - #summarySection[data-side-a/b="..."] => --syn-role-a/b*
   ========================================================= */

#summarySection.card.summary-card{
  position: relative;
  overflow: hidden; /* keep glows inside the card silhouette */
}

/* Outer “lens” wash (environment: chalk/chaos/neutral/standard fallback) */
#summarySection.card.summary-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  z-index: 0;

  /* Stronger than current: a real broadcast wash */
  background:
    radial-gradient(120% 140% at 50% -18%,
      rgba(var(--mi-role-active-rgb), 0.26),
      rgba(0,0,0,0) 62%
    ),
    radial-gradient(100% 120% at 50% 110%,
      rgba(var(--mi-role-active-rgb), 0.14),
      rgba(0,0,0,0) 60%
    );
  filter: saturate(1.15);
  opacity: 1;
}

/* Border + halo (this is the “missing glow”) */
#summarySection.card.summary-card::after{
  content:"";
  position:absolute;
  inset: 6px;
  border-radius: 14px;
  pointer-events:none;
  z-index: 0;

  box-shadow:
    0 0 0 1px rgba(var(--mi-role-active-rgb), 0.32),
    0 0 22px rgba(var(--mi-role-active-rgb), 0.18),
    0 0 46px rgba(var(--mi-role-active-rgb), 0.10);
  opacity: 1;
}

/* Ensure table renders above the glow layers */
#summarySection .summary-synthesis-wrap,
#summarySection .summary-synthesis-table{
  position: relative;
  z-index: 1;
}

/* Stronger team header plates (A/B) */
#summarySection .summary-synthesis-table .syn-team-a{
  background:
    linear-gradient(180deg,
      rgba(var(--syn-role-a-rgb), 0.42),
      rgba(15, 23, 42, 0.58)
    ) !important;
  border-color: rgba(var(--syn-role-a-rgb), 0.42) !important;
  box-shadow:
    inset 0 -1px 0 rgba(0,0,0,0.25),
    0 0 18px rgba(var(--syn-role-a-rgb), 0.16) !important;
}

#summarySection .summary-synthesis-table .syn-team-b{
  background:
    linear-gradient(180deg,
      rgba(var(--syn-role-b-rgb), 0.42),
      rgba(15, 23, 42, 0.58)
    ) !important;
  border-color: rgba(var(--syn-role-b-rgb), 0.42) !important;
  box-shadow:
    inset 0 -1px 0 rgba(0,0,0,0.25),
    0 0 18px rgba(var(--syn-role-b-rgb), 0.16) !important;
}

/* Stronger Final MI boxes */
#summarySection .summary-synthesis-table .syn-final-a{
  box-shadow:
    inset 0 0 0 1px rgba(var(--syn-role-a-rgb), 0.18),
    0 0 22px rgba(var(--syn-role-a-rgb), 0.12) !important;
}

#summarySection .summary-synthesis-table .syn-final-b{
  box-shadow:
    inset 0 0 0 1px rgba(var(--syn-role-b-rgb), 0.18),
    0 0 22px rgba(var(--syn-role-b-rgb), 0.12) !important;
}

/* =========================================================
   SCORE SYNTHESIS — wrapper lens correction support + delta shrink
   Paste at VERY BOTTOM of styles2.css
   ========================================================= */

/* Standard environments should never visually read as neutral mirror. 
   JS will now set data-lens to cinderella/favorite for standard matchups,
   but this keeps the section stable and compact. */

#summarySection .summary-synthesis-table .syn-center{
  min-width: 0 !important;
}

#summarySection .summary-synthesis-table .syn-center-inner{
  min-width: 0 !important;
  overflow: hidden !important;
}

#summarySection .summary-synthesis-table .syn-delta{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;

  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;

  padding: 10px 10px !important;
  margin-top: 8px !important;

  overflow: hidden !important;
}

#summarySection .summary-synthesis-table .syn-delta::before{
  display: none !important;
}

#summarySection .summary-synthesis-table .syn-delta::after{
  left: 18% !important;
  right: 18% !important;
  opacity: 0.45 !important;
}

#summarySection .summary-synthesis-table .syn-delta-label{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;

  min-width: 0 !important;
  flex: 0 0 auto !important;

  font-size: 0 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  white-space: nowrap !important;
}

#summarySection .summary-synthesis-table .syn-delta-label .mi-delta-mark{
  width: 18px !important;
  height: 18px !important;
  display: inline-block !important;
  flex: 0 0 18px !important;
}

#summarySection .summary-synthesis-table .syn-delta-value{
  min-width: 0 !important;
  flex: 0 1 auto !important;

  font-size: 18px !important;
  line-height: 1 !important;
  letter-spacing: 0.02em !important;
  white-space: nowrap !important;
  text-align: center !important;
}

/* ============================= */
/* FIX: MADNESS DELTA ALIGNMENT  */
/* ============================= */

.mi-scorebug-gap {
  display: flex !important;
  justify-content: center !important;   /* center the whole unit */
  align-items: center !important;
  gap: 10px !important;                /* tight spacing between label + value */
  width: 100% !important;
  text-align: center;
}

/* Keep label + icon tight */
.mi-scorebug-gap-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap;
}

/* Make value feel like part of same phrase */
.mi-scorebug-gap-value {
  display: inline-block;
  margin-left: 4px;
}

/* =========================================================
   SCOREBUG — FINAL MADNESS DELTA CENTERING FIX
   Keep label + value grouped together in the exact center
   ========================================================= */

#miVerdictMetricsTile .mi-scorebug-gap{
  grid-area: gap !important;
  grid-column: 1 / -1 !important;

  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;

  width: 50% !important;
  min-width: 0 !important;
  min-height: 46px !important;

  margin: 10px !important;
  padding: 10px 14px !important;

  border: 1px solid rgba(148,163,184,0.20) !important;
  border-radius: 12px !important;
  background:
    linear-gradient(180deg, rgba(4,8,18,0.82), rgba(2,6,23,0.92)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 6px 14px rgba(0,0,0,0.20) !important;

  text-align: center !important;
}

#miVerdictMetricsTile .mi-scorebug-gap-label{
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;

  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;

  white-space: nowrap !important;
  text-align: center !important;

  font-size: 13px !important;
  font-weight: 850 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  color: rgba(226,232,240,0.90) !important;
}

#miVerdictMetricsTile .mi-scorebug-gap-value{
  display: inline-block !important;
  flex: 0 0 auto !important;

  justify-self: auto !important;
  align-self: center !important;

  margin: 0 !important;
  padding: 0 !important;

  text-align: center !important;
  white-space: nowrap !important;
  min-width: 0 !important;

  font-size: 22px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: -0.01em !important;
  font-variant-numeric: tabular-nums !important;
}

#miVerdictMetricsTile .mi-scorebug-gap-label .mi-delta-mark{
  width: var(--mi-delta-size) !important;
  height: var(--mi-delta-size) !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  vertical-align: middle !important;
}

/* =========================================
   MADNESS DELTA — HARD RESET (FINAL FIX)
   ========================================= */

#miVerdictMetricsTile .mi-scorebug-gap {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  width: 100% !important;
  text-align: center !important;
}

#miVerdictMetricsTile .mi-scorebug-gap-label,
#miVerdictMetricsTile .mi-scorebug-gap-value {
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  vertical-align: unset !important;
}

#miVerdictMetricsTile .mi-scorebug-gap-value {
  justify-self: unset !important;
  align-self: unset !important;
  margin-left: 0 !important;
}

/* Keep icon aligned nicely */
#miVerdictMetricsTile .mi-scorebug-gap-label {
  white-space: nowrap !important;
}

/* =========================================================
   SCORE SYNTHESIS — FINAL MADNESS DELTA CLEAN FIX
   SVG + value only, centered, no overlap
   ========================================================= */

#summarySection .summary-synthesis-table .syn-center{
  overflow: hidden !important;
}

#summarySection .summary-synthesis-table .syn-center-inner{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  min-width: 0 !important;
  width: 100% !important;
  overflow: hidden !important;
}

#summarySection .summary-synthesis-table .syn-delta{
  position: relative !important;
  isolation: auto !important;

  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;

  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;

  margin: 2px auto 0 !important;
  padding: 8px 12px !important;

  background: rgba(2, 6, 23, 0.22) !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  border-radius: 12px !important;
  box-shadow: none !important;

  text-align: center !important;
  overflow: hidden !important;
}

#summarySection .summary-synthesis-table .syn-delta::before,
#summarySection .summary-synthesis-table .syn-delta::after{
  content: none !important;
  display: none !important;
}

#summarySection .summary-synthesis-table .syn-delta-label{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;

  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;

  font-size: 0 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}

#summarySection .summary-synthesis-table .syn-delta-label .mi-delta-mark{
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
}

#summarySection .summary-synthesis-table .syn-delta-value{
  display: inline-block !important;
  flex: 0 0 auto !important;

  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;

  font-size: 20px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.01em !important;
  font-variant-numeric: tabular-nums !important;
  white-space: nowrap !important;
  text-align: center !important;
  color: rgba(241,245,249,0.98) !important;
}

/* =========================================================
   SCORE SYNTHESIS: desktop/mobile split
   Desktop = show #summarySection only
   Mobile  = show #summarySectionMobile only
   ========================================================= */

#summarySectionMobile {
  display: none !important;
}

@media (max-width: 720px) {
  #summarySection {
    display: none !important;
  }

  #summarySectionMobile {
    display: block !important;
  }
}

/* =========================================================
   VERDICT SCOREBUG — FINAL GRID STRUCTURE RESET
   Goal:
   - Row 1: Team A | Team B
   - Row 2: Madness Delta spans both columns
   - Row 3: Flip hint spans both columns
   Uses EXISTING HTML structure:
   - .mi-scorebug-team--a
   - .mi-scorebug-team--b
   - .mi-scorebug-gap
   - .mi-metrics-hint.mi-flip-hint
   Paste at absolute bottom of styles2.css
   ========================================================= */

#verdictShell #miVerdictMetricsTile .tile-front{
  display: block !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 16px 16px 14px !important;
}

#verdictShell #miVerdictMetricsTile .mi-scorebug-grid{
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  grid-template-rows: auto auto auto !important;
  grid-template-areas:
    "teamA teamB"
    "gap gap"
    "footer footer" !important;

  align-items: start !important;
  align-content: start !important;
  justify-items: stretch !important;

  row-gap: 12px !important;
  column-gap: 14px !important;

  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ===== Row placement ===== */
#verdictShell #miVerdictMetricsTile .mi-scorebug-team--a{
  grid-area: teamA !important;
}

#verdictShell #miVerdictMetricsTile .mi-scorebug-team--b{
  grid-area: teamB !important;
}

#verdictShell #miVerdictMetricsTile .mi-scorebug-gap{
  grid-area: gap !important;
  grid-column: 1 / -1 !important;
}

#verdictShell #miVerdictMetricsTile .mi-scorebug-grid > .mi-metrics-hint.mi-flip-hint{
  grid-area: footer !important;
  grid-column: 1 / -1 !important;
}

/* ===== Team cards ===== */
#verdictShell #miVerdictMetricsTile .mi-scorebug-team{
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-self: stretch !important;

  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 12px 12px 10px !important;

  border-radius: 12px !important;
  border: 1px solid rgba(148,163,184,0.20) !important;
  background: linear-gradient(180deg, rgba(15,23,42,0.48), rgba(2,6,23,0.72)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.03),
    0 6px 14px rgba(0,0,0,0.18) !important;
}

#verdictShell #miVerdictMetricsTile .mi-scorebug-team-name{
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 0 8px 0 !important;

  text-align: center !important;
  font-size: 18px !important;
  font-weight: 850 !important;
  line-height: 1.05 !important;
  letter-spacing: 0.01em !important;
}

#verdictShell #miVerdictMetricsTile .mi-scorebug-team-lines{
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;

  width: 100% !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

#verdictShell #miVerdictMetricsTile .mi-scorebug-team-line--metric{
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 6px !important;

  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 8px 8px 10px !important;

  border-radius: 10px !important;
  border: 1px solid rgba(148,163,184,0.14) !important;
  background: linear-gradient(180deg, rgba(15,23,42,0.56), rgba(2,6,23,0.72)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.03),
    0 4px 12px rgba(0,0,0,0.16) !important;
}

#verdictShell #miVerdictMetricsTile .mi-scorebug-mini-label{
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;

  text-align: left !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: rgba(226,232,240,0.82) !important;
}

/* ===== Metric lane: bar on one line, value below ===== */
#verdictShell #miVerdictMetricsTile .mi-scorebug-mini-metric{
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 6px !important;

  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;

  grid-template-columns: none !important;
  grid-template-rows: none !important;
}

#verdictShell #miVerdictMetricsTile .mi-scorebug-mini-metric > .mi-scorebug-mini-bar{
  order: 1 !important;
}

#verdictShell #miVerdictMetricsTile .mi-scorebug-mini-metric > .mi-scorebug-mini-value{
  order: 2 !important;
}

#verdictShell #miVerdictMetricsTile .mi-scorebug-mini-bar{
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 14px !important;
  margin: 0 !important;
  align-self: stretch !important;
  justify-self: stretch !important;
}

#verdictShell #miVerdictMetricsTile .mi-scorebug-mini-value{
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding-top: 1px !important;

  text-align: center !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  font-variant-numeric: tabular-nums !important;
}

/* Prevent inherited shrink constraints */
#verdictShell #miVerdictMetricsTile .mi-scorebug-mini-metric > *{
  min-width: 0 !important;
}

/* ===== Row 2: Madness Delta strip ===== */
#verdictShell #miVerdictMetricsTile .mi-scorebug-gap{
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;

  width: 100% !important;
  min-width: 0 !important;
  min-height: 46px !important;

  margin: 0 !important;
  padding: 10px 14px !important;

  border-radius: 12px !important;
  border: 1px solid rgba(148,163,184,0.20) !important;
  background: linear-gradient(180deg, rgba(4,8,18,0.82), rgba(2,6,23,0.92)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 6px 14px rgba(0,0,0,0.20) !important;

  text-align: center !important;
}

#verdictShell #miVerdictMetricsTile .mi-scorebug-gap-label{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;

  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;

  white-space: nowrap !important;
  line-height: 1 !important;
}

#verdictShell #miVerdictMetricsTile .mi-scorebug-gap-value{
  display: inline-block !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;

  text-align: center !important;
  white-space: nowrap !important;

  font-size: 22px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: -0.01em !important;
  font-variant-numeric: tabular-nums !important;
}

#verdictShell #miVerdictMetricsTile .mi-scorebug-gap-label .mi-delta-mark{
  display: inline-block !important;
  width: var(--mi-delta-size, 18px) !important;
  height: var(--mi-delta-size, 18px) !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  vertical-align: middle !important;
}

/* ===== Row 3: existing flip hint becomes the footer row ===== */
#verdictShell #miVerdictMetricsTile .mi-scorebug-grid > .mi-metrics-hint.mi-flip-hint{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;
  min-width: 0 !important;
  min-height: 18px !important;

  margin: 0 !important;
  padding: 0 !important;

  position: static !important;
  inset: auto !important;
  transform: none !important;

  text-align: center !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  color: var(--mi-text-muted) !important;
  opacity: 1 !important;
}

/* Safety: kill pseudo-elements that can interfere with centering */
#verdictShell #miVerdictMetricsTile .mi-scorebug-grid::before,
#verdictShell #miVerdictMetricsTile .mi-scorebug-grid::after,
#verdictShell #miVerdictMetricsTile .mi-scorebug-gap::before,
#verdictShell #miVerdictMetricsTile .mi-scorebug-gap::after{
  pointer-events: none !important;
}

/* =========================================================
   TEAM NAME — increase spacing above underline reliably
   ========================================================= */

#miVerdictMetricsTile .mi-scorebug-team-name{
  display: block;
  line-height: 1.25;              /* gives the text breathing room */
  margin-bottom: 8px !important;   /* keeps separation from next row */
  border-bottom: 1px solid rgba(148,163,184,0.55);
}

#miVerdictMetricsTile .mi-scorebug-team-name{
  display: block;
  line-height: 1.3;

  padding-bottom: 10px;

  border-bottom: 1px solid rgba(148,163,184,0.55);
}

/* =========================================================
   SCOREBUG — Explicit team name coloring
   ========================================================= */

#miScorebugTeamA {
  color: var(--syn-role-a) !important;
}

#miScorebugTeamB {
  color: var(--syn-role-b) !important;
}

/* =========================================================
   SCOREBUG ROLE VARIABLE OVERRIDE
   Force scorebug to use synthesis role colors instead of
   inherited neutral-mirror defaults
   ========================================================= */

#verdictShell #miVerdictMetricsTile,
#verdictShell #miVerdictMetricsTile .mi-scorebug-grid{
  --mi-role-a: var(--syn-role-a, var(--mi-role-cinderella));
  --mi-role-b: var(--syn-role-b, var(--mi-role-favorite));
}

/* Team names explicitly consume those local variables */
#verdictShell #miVerdictMetricsTile #miScorebugTeamA{
  color: var(--mi-role-a) !important;
}

#verdictShell #miVerdictMetricsTile #miScorebugTeamB{
  color: var(--mi-role-b) !important;
}

/* Optional: keep underline synced too */
#verdictShell #miVerdictMetricsTile #miScorebugTeamA{
  border-bottom-color: color-mix(in srgb, var(--mi-role-a) 45%, rgba(148,163,184,0.35)) !important;
}

#verdictShell #miVerdictMetricsTile #miScorebugTeamB{
  border-bottom-color: color-mix(in srgb, var(--mi-role-b) 45%, rgba(148,163,184,0.35)) !important;
}

/* =========================================================
   SCOREBUG — Force team name colors to follow synthesis roles
   ========================================================= */

/* Verdict scorebug team-name side accents */
#verdictShell #miVerdictMetricsTile .mi-scorebug-team--a .mi-scorebug-team-name {
  color: var(--syn-role-a) !important;
}

#verdictShell #miVerdictMetricsTile .mi-scorebug-team--b .mi-scorebug-team-name {
  color: var(--syn-role-b) !important;
}

/* ===== Entry screen install CTA ===== */
.mi-entry-install-button {
  margin-top: 12px;
  min-width: 200px;
  padding: 0.8rem 1.2rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(23, 95, 195, 0.16);
  color: #e5eefc;
  font: inherit;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    transform 160ms ease,
    background 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
  box-shadow: 0 10px 24px rgba(2, 8, 23, 0.28);
}

.mi-entry-install-button:hover {
  transform: translateY(-1px);
  background: rgba(23, 95, 195, 0.24);
  border-color: rgba(255, 255, 255, 0.28);
}

.mi-entry-install-button:active {
  transform: translateY(0);
}

.mi-entry-install-button:focus-visible {
  outline: none;
  border-color: rgba(96, 165, 250, 0.95);
  box-shadow:
    0 0 0 3px rgba(96, 165, 250, 0.22),
    0 10px 24px rgba(2, 8, 23, 0.28);
}

.mi-entry-install-help {
  margin-top: 10px;
  max-width: 320px;
  color: rgba(226, 232, 240, 0.82);
  font-size: 0.82rem;
  line-height: 1.45;
  text-align: center;
}

/* ===== Entry screen click-layer fix ===== */
.mi-entry-inner {
  position: relative;
  z-index: 1;
}

.mi-entry-logo {
  pointer-events: none;
}

.mi-entry-button,
.mi-entry-install-button,
.mi-entry-install-help {
  position: relative;
  z-index: 2;
}

.mi-entry-button,
.mi-entry-install-button {
  pointer-events: auto;
}

#verdictShell #miVerdictMetricsTile #miScorebugTeamA{
  color: var(--mi-brand-a, var(--syn-role-a)) !important;
  border-bottom-color: color-mix(
    in srgb,
    var(--mi-brand-a-tertiary, var(--mi-brand-a, var(--syn-role-a))) 52%,
    rgba(148,163,184,0.32)
  ) !important;
  text-shadow:
    0 0 12px rgb(var(--team-a-tertiary-rgb, 107 114 128) / 0.14),
    0 2px 8px rgba(0,0,0,0.26) !important;
}

#verdictShell #miVerdictMetricsTile #miScorebugTeamB{
  color: var(--mi-brand-b, var(--syn-role-b)) !important;
  border-bottom-color: color-mix(
    in srgb,
    var(--mi-brand-b-tertiary, var(--mi-brand-b, var(--syn-role-b))) 52%,
    rgba(148,163,184,0.32)
  ) !important;
  text-shadow:
    0 0 12px rgb(var(--team-b-tertiary-rgb, 107 114 128) / 0.14),
    0 2px 8px rgba(0,0,0,0.26) !important;
}

#summarySection .summary-synthesis-table .syn-team-a{
  color: var(--mi-brand-a, var(--syn-role-a)) !important;
}

#summarySection .summary-synthesis-table .syn-team-b{
  color: var(--mi-brand-b, var(--syn-role-b)) !important;
}

/* =========================================================
   TEAM BRAND CLUSTERS
   Matches new canonical HTML structure:
   - .mi-team-brand
   - .mi-team-brand--scorebug
   - .mi-team-brand--card
   - .mi-team-brand-logo
   - .mi-team-brand-name
   ========================================================= */

/* Base brand wrapper */
.mi-team-brand{
  display: grid;
  align-items: center;
  min-width: 0;
}

/* Shared logo rules */
.mi-team-brand-logo{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  flex: 0 0 auto;
}

/* Hide empty logos cleanly */
.mi-team-brand-logo[hidden]{
  display: none !important;
}

/* Shared name rules */
.mi-team-brand-name{
  min-width: 0;
}

/* =========================================================
   SCOREBUG BRAND CLUSTER
   ========================================================= */

.mi-scorebug-team-head{
  width: 100%;
  min-width: 0;
  display: block;
  padding-left: 10px;
  margin-bottom: 3px;
}

.mi-team-brand--scorebug{
  width: 100%;
  max-width: 100%;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  column-gap: 8px;
  align-items: start;
}

.mi-team-brand--scorebug:has(.mi-team-brand-logo[hidden]){
  grid-template-columns: minmax(0, 1fr);
}

.mi-team-brand--scorebug .mi-team-brand-logo{
  width: 42px;
  height: 42px;
  margin-right: 8px;
  justify-self: center;
  align-self: center;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.35));
}

.mi-team-brand--scorebug .mi-team-brand-name{
  display: block;
  min-width: 0;
  width: 100%;
  padding-bottom: 8px;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-bottom: 1px solid rgba(148, 163, 184, 0.32);
}

/* Preserve old scorebug text feel on new structure */
#miScorebugTeamA,
#miScorebugTeamB{
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-align: left;
}

/* =========================================================
   TEAM CARD HEADER BRAND CLUSTER
   ========================================================= */

.team-card-header-main{
  width: 100%;
  min-width: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mi-team-brand--card{
  width: 100%;
  max-width: 100%;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  column-gap: 10px;
  align-items: center;
}

.mi-team-brand--card:has(.mi-team-brand-logo[hidden]){
  grid-template-columns: minmax(0, 1fr);
}

.mi-team-brand--card .mi-team-brand-logo{
  width: 40px;
  height: 40px;
  justify-self: center;
  align-self: center;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.30));
}

.mi-team-brand--card .team-label-wrap{
  min-width: 0;
  width: 100%;
}

.mi-team-brand--card .mi-team-brand-name{
  display: block;
  min-width: 0;
  width: 100%;
}

.team-card-header h2#teamATitle,
.team-card-header h2#teamBTitle{
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =========================================================
   TEAM BRAND SCOREBUG — ENHANCED PREMIUM LOOK
   Assumes parent sets:
   --team-primary
   --team-secondary
   ========================================================= */

.mi-team-brand--scorebug {
  --team-primary: #7c8aa5;
  --team-secondary: #dbe4f0;
  --panel-bg-1: rgba(10, 20, 40, 0.82);
  --panel-bg-2: rgba(8, 14, 28, 0.94);
  --line-color: color-mix(in srgb, var(--team-secondary) 32%, transparent);
  --glow-color: color-mix(in srgb, var(--team-primary) 38%, transparent);
  --soft-glow: 0 0 24px color-mix(in srgb, var(--team-primary) 18%, transparent);
  --text-glow: 0 0 12px color-mix(in srgb, var(--team-primary) 18%, transparent);

  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  column-gap: 10px;

  padding: 14px 16px;
  border-radius: 16px;
  overflow: hidden;

  background:
    radial-gradient(
      circle at top left,
      color-mix(in srgb, var(--team-primary) 14%, transparent) 0%,
      transparent 42%
    ),
    linear-gradient(145deg, var(--panel-bg-1), var(--panel-bg-2));

  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    inset 0 -1px 0 rgba(255,255,255,0.03),
    0 10px 30px rgba(0,0,0,0.28),
    var(--soft-glow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease;
}

.mi-team-brand--scorebug::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--team-primary) 78%, var(--team-secondary) 22%),
    color-mix(in srgb, var(--team-secondary) 58%, var(--team-tertiary) 42%),
    color-mix(in srgb, var(--team-tertiary) 65%, var(--team-primary) 35%)
  );
  box-shadow:
    0 0 28px color-mix(in srgb, var(--team-primary) 58%, var(--team-tertiary) 42%);
}

.mi-team-brand--scorebug::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      115deg,
      transparent 0%,
      rgba(255,255,255,0.03) 20%,
      rgba(255,255,255,0.08) 28%,
      transparent 40%
    );
  opacity: 0.55;
}

/* LOGO */
.mi-team-brand--scorebug .mi-team-brand-logo {
  position: relative;
  z-index: 1;
  width: 42px;
  height: 42px;
  margin-right: 0;
  justify-self: center;
  align-self: center;
  object-fit: contain;

  filter:
    drop-shadow(0 2px 8px rgba(0,0,0,0.35))
    drop-shadow(0 0 10px color-mix(in srgb, var(--team-primary) 22%, transparent));

  transition: transform 180ms ease, filter 180ms ease;
}

/* NAME */
.mi-team-brand--scorebug .mi-team-brand-name {
  position: relative;
  z-index: 1;
  display: block;
  min-width: 0;
  width: 100%;
  padding-bottom: 8px;

  line-height: 1.1;
  font-weight: 800;
  letter-spacing: 0.015em;
  color: var(--team-primary);
  text-shadow: var(--text-glow);

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  border-bottom: 1px solid var(--line-color);
}

/* add a little premium line flare */
.mi-team-brand--scorebug .mi-team-brand-name::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 1px;
  width: 38%;
  background: linear-gradient(
    to right,
    var(--team-secondary),
    transparent
  );
  box-shadow: 0 0 10px color-mix(in srgb, var(--team-secondary) 30%, transparent);
}

@keyframes teamPulse {
  0%, 100% {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.06),
      inset 0 -1px 0 rgba(255,255,255,0.03),
      0 10px 30px rgba(0,0,0,0.28),
      0 0 18px color-mix(in srgb, var(--team-primary) 12%, transparent);
  }
  50% {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.08),
      inset 0 -1px 0 rgba(255,255,255,0.03),
      0 12px 34px rgba(0,0,0,0.34),
      0 0 28px color-mix(in srgb, var(--team-primary) 24%, transparent);
  }
}

@keyframes sheenSweep {
  0% {
    transform: translateX(-120%);
  }
  100% {
    transform: translateX(140%);
  }
}

/* =========================================================
   TEAM HEADER BRANDING — tertiary-compatible extension for
   .mi-team-brand--card and score synthesis headers
   ========================================================= */

.mi-team-brand--card,
.mi-team-brand--summary {
  --team-primary: #7c8aa5;
  --team-secondary: #dbe4f0;
  --team-tertiary: #9fb0c9;

  --team-primary-rgb: 124 138 165;
  --team-secondary-rgb: 219 228 240;
  --team-tertiary-rgb: 159 176 201;

  --team-secondary-ambient-rgb: 198 210 226;
  --team-tertiary-ambient-rgb: 176 191 214;

  --team-glow-mid-rgb: 156 172 195;

  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  column-gap: 12px;
  align-items: center;

  padding: 1px;
  border-radius: 16px;
  overflow: hidden;
  isolation: isolate;

  background:
    radial-gradient(
      120% 145% at 0% 0%,
      rgb(var(--team-primary-rgb) / 0.18) 0%,
      transparent 52%
    ),
    radial-gradient(
      105% 130% at 100% 18%,
      rgb(var(--team-secondary-ambient-rgb) / 0.13) 0%,
      transparent 58%
    ),
    radial-gradient(
      110% 135% at 78% 100%,
      rgb(var(--team-tertiary-rgb) / 0.12) 0%,
      transparent 56%
    ),
    linear-gradient(180deg, rgba(10, 18, 38, 0.84), rgba(4, 10, 24, 0.88));

  border: 1px solid color-mix(in srgb, var(--team-primary) 22%, rgba(255,255,255,0.08));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 10px 26px rgba(0,0,0,0.28),
    0 0 18px rgb(var(--team-primary-rgb) / 0.10),
    0 0 22px rgb(var(--team-tertiary-rgb) / 0.08),
    0 0 28px rgb(var(--team-secondary-ambient-rgb) / 0.06);
}

.mi-team-brand--card::before,
.mi-team-brand--summary::before {
  content: "";
  position: absolute;
  left: 4px;
  right: 90px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  padding-right: 6px !important;
  z-index: 0;
  background: linear-gradient(
    to bottom,
    var(--team-primary),
    color-mix(in srgb, var(--team-tertiary) 58%, var(--team-primary) 42%),
    color-mix(in srgb, var(--team-secondary) 60%, var(--team-tertiary) 40%)
  );
  box-shadow:
    0 0 10px color-mix(in srgb, var(--team-primary) 38%, transparent),
    0 0 14px color-mix(in srgb, var(--team-tertiary) 26%, transparent),
    0 0 18px color-mix(in srgb, var(--team-secondary) 18%, transparent);
}

.mi-team-brand--card::after,
.mi-team-brand--summary::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--team-tertiary) 12%, transparent),
      transparent 34%,
      transparent 66%,
      color-mix(in srgb, var(--team-secondary) 10%, transparent)
    );
  opacity: 0.9;
}

.mi-team-brand--card .mi-team-brand-logo,
.mi-team-brand--summary .mi-team-brand-logo {
  position: relative;
  z-index: 1;
  width: 40px;
  height: 40px;
  justify-self: center;
  align-self: center;
  object-fit: contain;
  filter:
    drop-shadow(0 4px 10px rgba(0,0,0,0.32))
    drop-shadow(0 0 10px color-mix(in srgb, var(--team-primary) 24%, transparent))
    drop-shadow(0 0 12px color-mix(in srgb, var(--team-tertiary) 16%, transparent))
    drop-shadow(0 0 16px color-mix(in srgb, var(--team-secondary) 12%, transparent));
}

.mi-team-brand--card .team-label-wrap {
  position: relative;
  z-index: 1;
  min-width: 0;
  width: 100%;
}

.mi-team-brand--card .mi-team-brand-name,
.mi-team-brand--summary .mi-team-brand-name {
  position: relative;
  z-index: 1;
  display: block;
  min-width: 0;
  width: 100%;
  margin: 0;
  padding-bottom: 8px;
  line-height: 1.08;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  color: color-mix(in srgb, var(--team-primary) 68%, #ffffff 32%);
  text-shadow:
    0 0 10px color-mix(in srgb, var(--team-primary) 16%, transparent),
    0 0 12px color-mix(in srgb, var(--team-tertiary) 10%, transparent),
    0 0 14px color-mix(in srgb, var(--team-secondary) 8%, transparent);

  border-bottom: 1px solid color-mix(in srgb, var(--team-tertiary) 22%, rgba(148,163,184,0.22));
}

.mi-team-brand--card .mi-team-brand-name::after,
.mi-team-brand--summary .mi-team-brand-name::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: min(46%, 170px);
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    var(--team-primary),
    color-mix(in srgb, var(--team-tertiary) 60%, var(--team-primary) 40%),
    color-mix(in srgb, var(--team-secondary) 60%, var(--team-tertiary) 40%),
    transparent
  );
  box-shadow:
    0 0 10px color-mix(in srgb, var(--team-primary) 20%, transparent),
    0 0 12px color-mix(in srgb, var(--team-tertiary) 14%, transparent),
    0 0 14px color-mix(in srgb, var(--team-secondary) 10%, transparent);
}

/* =========================================================
   TEAM CARD HEADERS — override role-based fills with
   team primary + tertiary + secondary fills
   ========================================================= */

#cindCard .team-card-header,
#favCard .team-card-header {
  border: 1px solid color-mix(in srgb, var(--team-primary, #175FC3) 28%, rgba(255,255,255,0.08));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 0 0 1px color-mix(in srgb, var(--team-tertiary, var(--team-primary, #175FC3)) 12%, transparent);
}

#cindCard .team-card-header::before,
#favCard .team-card-header::before {
  background:
    radial-gradient(
      circle at 22% 50%,
      color-mix(in srgb, var(--team-primary, #175FC3) 28%, transparent),
      transparent 48%
    ),
    radial-gradient(
      circle at 78% 40%,
      color-mix(in srgb, var(--team-tertiary, #dbe4f0) 14%, transparent),
      transparent 46%
    ),
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--team-secondary, #dbe4f0) 12%, rgba(15,23,42,0.92)),
      color-mix(in srgb, var(--team-tertiary, #dbe4f0) 10%, rgba(15,23,42,0.94)) 44%,
      rgba(15,23,42,0.96) 72%
    ) !important;
}

/* =========================================================
   WHOLE CARD BORDER ACCENTS — team color driven
   tertiary-compatible shell chrome
   ========================================================= */

#cindCard,
#favCard {
  border-color: color-mix(in srgb, var(--team-primary, #175FC3) 34%, rgba(148,163,184,0.18)) !important;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--team-primary, #175FC3) 24%, transparent) inset,
    0 0 0 2px color-mix(in srgb, var(--team-tertiary, var(--team-secondary, #dbe4f0)) 10%, transparent) inset,
    0 18px 42px rgba(0,0,0,0.42),
    0 0 16px color-mix(in srgb, var(--team-tertiary, var(--team-primary, #175FC3)) 8%, transparent),
    0 0 24px color-mix(in srgb, var(--team-primary, #175FC3) 12%, transparent) !important;
}

#cindCard::before,
#favCard::before {
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--team-primary, #175FC3) 56%, var(--team-tertiary, var(--team-secondary, #dbe4f0)) 44%),
    color-mix(in srgb, var(--team-secondary, #dbe4f0) 56%, var(--team-tertiary, var(--team-primary, #175FC3)) 44%),
    transparent
  ) !important;
}

#cindCard::after,
#favCard::after {
  border-color: color-mix(in srgb, var(--team-primary, #175FC3) 16%, rgba(255,255,255,0.05)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 0 0 1px color-mix(in srgb, var(--team-tertiary, var(--team-secondary, #dbe4f0)) 8%, transparent) !important;
}

/* =========================================================
   SCORE SYNTHESIS TEAM HEADERS — same branding logic
   ========================================================= */

#summarySection .summary-synthesis-table .syn-team-a,
#summarySection .summary-synthesis-table .syn-team-b {
  padding: 10px 12px 12px;
}

#summarySection .summary-synthesis-table .syn-team-a {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--team-primary, #175FC3) 26%, rgba(2,6,23,0.90)),
      rgba(4, 10, 24, 0.76)
    ) !important;
  border-color: color-mix(in srgb, var(--team-primary, #175FC3) 32%, rgba(148,163,184,0.18)) !important;
  box-shadow:
    inset 0 -1px 0 rgba(0,0,0,0.24),
    0 0 18px color-mix(in srgb, var(--team-primary, #175FC3) 14%, transparent) !important;
}

#summarySection .summary-synthesis-table .syn-team-b {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--team-primary, #175FC3) 26%, rgba(2,6,23,0.90)),
      rgba(4, 10, 24, 0.76)
    ) !important;
  border-color: color-mix(in srgb, var(--team-primary, #175FC3) 32%, rgba(148,163,184,0.18)) !important;
  box-shadow:
    inset 0 -1px 0 rgba(0,0,0,0.24),
    0 0 18px color-mix(in srgb, var(--team-primary, #175FC3) 14%, transparent) !important;
}

.mi-team-brand--summary {
  grid-template-columns: 34px minmax(0, 1fr);
  column-gap: 10px;
  padding: 8px 10px;
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
}

.mi-team-brand--summary .mi-team-brand-logo {
  width: 34px;
  height: 34px;
  padding-left: 16px;
}

.mi-team-brand--summary .mi-team-brand-name {
  padding-bottom: 6px;
  text-align: center;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.01em;
  color: rgba(241,245,249,0.96);
}

.mi-summary-team-head {
  width: 100%;
  min-width: 0;
  display: block;
  padding-inline: 12px;
}

.mi-team-brand--summary {
  width: 100%;
  max-width: 100%;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  column-gap: 10px;
  align-items: center;
}

.mi-team-brand--summary .mi-team-brand-logo {
  width: 34px;
  height: 34px;
  justify-self: center;
  align-self: center;
  object-fit: contain;
}

.mi-team-brand--summary .mi-team-brand-name {
  min-width: 0;
  width: 100%;
  display: block;
  text-align: center;
}

.summary-synthesis-table .syn-team {
  padding-left: 0;
  padding-right: 0;
}

/* =========================================================
   TEAM CARD HEADER BRAND CLUSTER
   ========================================================= */

.team-card-header-main{
  width: 100%;
  min-width: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mi-team-brand--card{
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  column-gap: 10px;
  align-items: center;
}

.mi-team-brand--card:has(.mi-team-brand-logo[hidden]){
  grid-template-columns: minmax(0, 1fr);
}

.mi-team-brand--card .mi-team-brand-logo{
  width: 40px;
  height: 40px;
  justify-self: start;
  align-self: center;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.30));
}

.mi-team-brand--card .team-label-wrap{
  min-width: 0;
  width: 100%;
}

.mi-team-brand--card .mi-team-brand-name{
  display: block;
  min-width: 0;
  width: 100%;
}

.team-card-header h2#teamATitle,
.team-card-header h2#teamBTitle{
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =========================================================
   TEAM BRAND CLUSTERS
   Matches canonical HTML structure:
   - .mi-team-brand
   - .mi-team-brand--scorebug
   - .mi-team-brand--card
   - .mi-team-brand-logo
   - .mi-team-brand-name
   ========================================================= */

/* Base brand wrapper */
.mi-team-brand{
  display: grid;
  align-items: center;
  min-width: 0;
}

/* Shared logo rules */
.mi-team-brand-logo{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  flex: 0 0 auto;
}

/* Hide empty logos cleanly */
.mi-team-brand-logo[hidden]{
  display: none !important;
}

/* Shared name rules */
.mi-team-brand-name{
  min-width: 0;
}

/* =========================================================
   SCOREBUG BRAND CLUSTER
   ========================================================= */

.mi-scorebug-team-head{
  width: 100%;
  min-width: 0;
  display: block;
  padding-left: 0;
  margin-bottom: 3px;
}

.mi-team-brand--scorebug{
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  column-gap: 8px;
  align-items: center;
}

.mi-team-brand--scorebug:has(.mi-team-brand-logo[hidden]){
  grid-template-columns: minmax(0, 1fr);
}

.mi-team-brand--scorebug .mi-team-brand-logo{
  width: 42px;
  height: 42px;
  margin-right: 0;
  justify-self: start;
  align-self: center;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.35));
}

.mi-team-brand--scorebug .mi-team-brand-name{
  display: block;
  min-width: 0;
  width: 100%;
  padding-bottom: 8px;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-bottom: 1px solid rgba(148, 163, 184, 0.32);
}

/* Preserve old scorebug text feel on new structure */
#miScorebugTeamA,
#miScorebugTeamB{
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-align: left;
}

/* =========================================================
   TEAM CARD HEADER BRAND CLUSTER
   ========================================================= */

.team-card-header-main{
  width: 100%;
  min-width: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mi-team-brand--card{
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  column-gap: 10px;
  align-items: center;
}

.mi-team-brand--card:has(.mi-team-brand-logo[hidden]){
  grid-template-columns: minmax(0, 1fr);
}

.mi-team-brand--card .mi-team-brand-logo{
  width: 40px;
  height: 40px;
  justify-self: start;
  align-self: center;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.30));
}

.mi-team-brand--card .team-label-wrap{
  min-width: 0;
  width: 100%;
}

.mi-team-brand--card .mi-team-brand-name{
  display: block;
  min-width: 0;
  width: 100%;
}

.team-card-header h2#teamATitle,
.team-card-header h2#teamBTitle{
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ==========================================================================
   § TEAM HEADER — Branding Ownership Override
   PURPOSE:
   Preserve role/lens semantics and label colors,
   but transfer ALL header glow and plate visuals to team branding.

   SAFE TO DROP AT VERY BOTTOM OF styles2.css
   ========================================================================== */


/* ─────────────────────────────────────────────
   1) TEAM NAME GLOW — Always use team branding
   (replaces role/lens-driven glow)
   ───────────────────────────────────────────── */

.team-card-header h2 {
  color: var(--team-primary) !important;

  text-shadow:
    0 0 6px rgba(var(--team-primary-rgb) / 0.55),
    0 0 12px rgba(var(--team-primary-rgb) / 0.35),
    0 0 18px rgba(var(--team-primary-rgb) / 0.18) !important;

  transition:
    color 180ms ease,
    text-shadow 220ms ease;
}


/* Remove any mirror / role overrides that previously controlled title glow */

#analysisShell[data-lens] .team-card-header h2 {
  color: var(--team-primary) !important;

  text-shadow:
    0 0 6px rgba(var(--team-primary-rgb) / 0.55),
    0 0 12px rgba(var(--team-primary-rgb) / 0.35),
    0 0 18px rgba(var(--team-primary-rgb) / 0.18) !important;
}



/* ─────────────────────────────────────────────
   2) HEADER BACKPLATE GLOW — Brand-owned
   (replaces role-based :has(.fav-tag) etc.)
   ───────────────────────────────────────────── */

.team-card-header::before {
  background:
    linear-gradient(
      135deg,
      rgba(var(--team-primary-rgb) / 0.22),
      rgba(var(--team-primary-rgb) / 0.06)
    ) !important;

  box-shadow:
    0 0 18px rgba(var(--team-primary-rgb) / 0.35),
    inset 0 0 10px rgba(var(--team-primary-rgb) / 0.18) !important;

  border-color:
    rgba(var(--team-primary-rgb) / 0.38) !important;

  transition:
    background 220ms ease,
    box-shadow 220ms ease,
    border-color 220ms ease;
}


/* Neutralize mirror/lens-specific header overrides */

#analysisShell[data-lens] .team-card-header::before {
  background:
    linear-gradient(
      135deg,
      rgba(var(--team-primary-rgb) / 0.22),
      rgba(var(--team-primary-rgb) / 0.06)
    ) !important;

  box-shadow:
    0 0 18px rgba(var(--team-primary-rgb) / 0.35),
    inset 0 0 10px rgba(var(--team-primary-rgb) / 0.18) !important;

  border-color:
    rgba(var(--team-primary-rgb) / 0.38) !important;
}



/* ─────────────────────────────────────────────
   3) ROLE LABELS — Keep color, reduce dominance
   (semantics preserved, visual hierarchy lowered)
   ───────────────────────────────────────────── */

.fav-tag,
.cind-tag,
.chalk-tag,
.chaos-tag,
.neutral-tag {

  opacity: 0.82;

  transition:
    opacity 160ms ease,
    filter 160ms ease;
}

/* Slightly dim role label glow inside analysis shell */

#analysisShell .fav-tag,
#analysisShell .cind-tag,
#analysisShell .chalk-tag,
#analysisShell .chaos-tag,
#analysisShell .neutral-tag {
  opacity: 0.78;
}

/* ─────────────────────────────────────────────
   4) SAFETY — Disable legacy role plate ownership
   (does NOT remove classes — only visual control)
   ───────────────────────────────────────────── */

.team-card-header:has(.fav-tag)::before,
.team-card-header:has(.cind-tag)::before,
.team-card-header:has(.chalk-tag)::before,
.team-card-header:has(.chaos-tag)::before,
.team-card-header:has(.neutral-tag)::before {

  background:
    linear-gradient(
      135deg,
      rgba(var(--team-primary-rgb) / 0.22),
      rgba(var(--team-primary-rgb) / 0.06)
    ) !important;

  box-shadow:
    0 0 18px rgba(var(--team-primary-rgb) / 0.35),
    inset 0 0 10px rgba(var(--team-primary-rgb) / 0.18) !important;

  border-color:
    rgba(var(--team-primary-rgb) / 0.38) !important;
}

/* ==========================================================================
   § TEAM HEADER — Role Tag Separation / Hierarchy Override
   PURPOSE:
   Keep role tags visible, but clearly separated from the team name.
   Pure CSS only. Safe to paste at bottom of styles2.css.
   ========================================================================== */

/* 1) Make the whole header breathe a bit more vertically */
.team-card-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px !important;
  position: relative;
}

/* 2) Role tags become quiet overlines instead of pseudo-headlines */
.fav-tag,
.cind-tag,
.chalk-tag,
.chaos-tag,
.neutral-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  position: relative;
  z-index: 2;

  padding: 8px 10px;
  border-radius: 999px;

  font-size: 11px !important;
  line-height: 1;
  font-weight: 800 !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase;

  opacity: 0.72 !important;

  background: rgba(2, 6, 23, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* 3) Add a subtle divider line under the role tag */
.fav-tag::after,
.cind-tag::after,
.chalk-tag::after,
.chaos-tag::after,
.neutral-tag::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(100% + 4px);

  width: 100px;
  height: 1px;
  border-radius: 999px;

  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.10),
    rgba(255,255,255,0.70),
    rgba(255,255,255,0.10)
  );

  box-shadow: 0 0 8px rgba(255,255,255,0.08);
  pointer-events: none;
}

/* 4) Push the team name farther away so it reads as the primary object */
.team-card-header h2 {
  position: relative;
  z-index: 2;
  margin-top: 8px !important;

  font-size: clamp(1.75rem, 2.6vw, 2.2rem) !important;
  line-height: 1.02;
}

/* 5) Optional: tighten the role tag even more inside analysis shells */
#analysisShell .fav-tag,
#analysisShell .cind-tag,
#analysisShell .chalk-tag,
#analysisShell .chaos-tag,
#analysisShell .neutral-tag {
  opacity: 0.66 !important;
  transform: translateY(-1px);
}

/* 6) Optional: if you want the team name to feel even more dominant */
#analysisShell .team-card-header h2,
.team-card-header h2 {
  letter-spacing: -0.01em;
}

/* ==========================================================================
   § TEAM CARD HEADER — Tight Logo/Name Cluster Override
   PURPOSE:
   Keep the card header centered, but stop the logo from living at the far-left
   edge of a full-width brand wrapper. Makes the logo feel attached to the team
   name block.
   Safe to paste at the very bottom of styles2.css.
   ========================================================================== */

/* 1) Center the whole header as a content cluster, not a stretched row */
.team-card-header-main{
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
}

/* 2) Shrink-wrap the brand cluster instead of letting it span full width */
.team-card-header .mi-team-brand--card{
  display: inline-grid !important;
  grid-template-columns: auto minmax(0, auto) !important;
  column-gap: 12px !important;
  align-items: center !important;

  width: auto !important;
  max-width: min(100%, 520px) !important;
  min-width: 0 !important;

  justify-content: center !important;
}

/* 3) If no logo exists, collapse to just the text stack cleanly */
.team-card-header .mi-team-brand--card:has(.mi-team-brand-logo[hidden]){
  grid-template-columns: minmax(0, auto) !important;
}

/* 4) Keep the logo visually attached to the text block */
.team-card-header .mi-team-brand--card .mi-team-brand-logo{
  width: 70px !important;
  height: 70px !important;
  justify-self: end !important;
  align-self: center !important;
}

/* 5) Stop the text lane from stretching across the header */
.team-card-header .mi-team-brand--card .team-label-wrap{
  width: auto !important;
  min-width: 0 !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

/* 6) Make the team name size to its content instead of a fake full-width lane */
.team-card-header .mi-team-brand--card .mi-team-brand-name,
.team-card-header h2#teamATitle,
.team-card-header h2#teamBTitle{
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;

  margin-left: 0 !important;
  margin-right: 0 !important;

  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* 7) Keep the role tag centered directly above the team name */
.team-card-header .role-tag,
.team-card-header .cind-tag,
.team-card-header .fav-tag,
.team-card-header .chalk-tag,
.team-card-header .chaos-tag,
.team-card-header .neutral-tag{
  align-self: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ==========================================================================
   § TEAM CARD HEADER — Logo Proximity Only
   PURPOSE:
   Keep the existing full-width header container/plate,
   but move the logo closer to the team name text.
   ========================================================================== */

/* 1) Preserve the existing full-width card header brand wrapper */
.team-card-header .mi-team-brand--card{
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;

  /* keep your existing layout, just tighten the logo/text spacing */
  column-gap: 8px !important;
}

/* 2) Pull the logo slightly inward toward the text */
.team-card-header .mi-team-brand--card .mi-team-brand-logo{
  justify-self: end !important;
  align-self: center !important;
}

/* 3) Prevent the text column from visually drifting away */
.team-card-header .mi-team-brand--card .team-label-wrap{
  justify-self: start !important;
  min-width: 0 !important;
}

/* 4) Keep the team title centered within its own text stack */
.team-card-header .mi-team-brand--card .mi-team-brand-name,
.team-card-header h2#teamATitle,
.team-card-header h2#teamBTitle{
  margin: 0 !important;
  text-align: center !important;
}

/* ========================================================
   TEAM SHELL COLOR OVERRIDE ONLY
   REPLACEMENT MODULE — corrected RGB syntax
   ========================================================= */

#cindCard,
#favCard{
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  border-radius: 18px !important;
  background: transparent !important;

  box-shadow:
    0 0 0 1px rgb(var(--team-primary-rgb, 148 163 184) / 0.12) inset,
    0 12px 34px rgb(0 0 0 / 0.34),
    0 0 22px rgb(var(--team-primary-rgb, 148 163 184) / 0.10) !important;
}

#cindCard::before,
#favCard::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(
      140% 90% at 50% -10%,
      rgb(var(--team-primary-rgb, 148 163 184) / 0.16) 0%,
      rgb(var(--team-secondary-rgb, 255 255 255) / 0.06) 24%,
      transparent 58%
    ),
    radial-gradient(
      110% 80% at 50% 100%,
      rgb(var(--team-primary-rgb, 148 163 184) / 0.08) 0%,
      transparent 55%
    ) !important;
  opacity: 1 !important;
}

#cindCard > *,
#favCard > *{
  position: relative !important;
  z-index: 1 !important;
}

#cindCard > .flip-inner > .card-face,
#favCard > .flip-inner > .card-face{
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;

  background:
    radial-gradient(
      130% 78% at 50% 0%,
      rgb(var(--team-primary-rgb, 148 163 184) / 0.16) 0%,
      rgb(var(--team-secondary-rgb, 255 255 255) / 0.05) 18%,
      transparent 48%
    ),
    linear-gradient(
      180deg,
      rgb(12 17 30 / 0.975) 0%,
      rgb(8 11 20 / 0.985) 100%
    ) !important;

  border: 1px solid rgb(var(--team-primary-rgb, 148 163 184) / 0.24) !important;

  box-shadow:
    0 0 0 1px rgb(var(--team-primary-rgb, 148 163 184) / 0.08) inset,
    0 14px 36px rgb(0 0 0 / 0.40),
    0 0 20px rgb(var(--team-primary-rgb, 148 163 184) / 0.08) !important;
}



#cindCard > .flip-inner > .card-face::after,
#favCard > .flip-inner > .card-face::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgb(255 255 255 / 0.08) 0%,
      rgb(255 255 255 / 0.03) 10%,
      rgb(255 255 255 / 0.00) 32%
    ),
    radial-gradient(
      120% 65% at 50% -8%,
      rgb(var(--team-primary-rgb, 148 163 184) / 0.10) 0%,
      transparent 52%
    ) !important;
  opacity: 0.95;
}

#cindCard > .flip-inner > .card-face > *,
#favCard > .flip-inner > .card-face > *{
  position: relative !important;
  z-index: 1 !important;
}

#cindCard .team-card-header,
#favCard .team-card-header{
  position: relative !important;
  overflow: hidden !important;
  background:
    linear-gradient(
      180deg,
      rgb(var(--team-primary-rgb, 148 163 184) / 0.10) 0%,
      rgb(var(--team-primary-rgb, 148 163 184) / 0.04) 30%,
      rgb(15 23 42 / 0.10) 100%
    ) !important;
  border-color: rgb(var(--team-primary-rgb, 148 163 184) / 0.24) !important;
  box-shadow:
    0 0 0 1px rgb(var(--team-primary-rgb, 148 163 184) / 0.06) inset,
    0 8px 18px rgb(0 0 0 / 0.18) !important;
}

#cindCard .team-card-header::after,
#favCard .team-card-header::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      90% 100% at 50% 0%,
      rgb(var(--team-primary-rgb, 148 163 184) / 0.12) 0%,
      transparent 60%
    ) !important;
  opacity: 0.8;
}

#cindCard .mi-profile-card,
#cindCard .team-mark-panel,
#cindCard .mini-tile,
#favCard .mi-profile-card,
#favCard .team-mark-panel,
#favCard .mini-tile{
  border-color: rgb(var(--team-primary-rgb, 148 163 184) / 0.14) !important;
  box-shadow:
    0 0 0 1px rgb(var(--team-primary-rgb, 148 163 184) / 0.04) inset !important;
}

#cindCard .explain-table th,
#cindCard .explain-table td,
#favCard .explain-table th,
#favCard .explain-table td{
  background: rgb(2 6 23 / 0.18) !important;
}

/* =========================================================
   TEAM CARD HOLOGRAPHIC / BASEBALL-CARD ENHANCEMENT
   Scoped ONLY to #cindCard and #favCard
   ========================================================= */

#cindCard,
#favCard{
  position: relative;
  overflow: hidden;

  background:
    linear-gradient(
      180deg,
      rgb(var(--team-primary-rgb, 148 163 184) / 0.10) 0%,
      rgba(2, 6, 23, 0.94) 18%,
      rgba(2, 6, 23, 0.98) 100%
    ) !important;

  border: 1px solid rgb(var(--team-primary-rgb, 148 163 184) / 0.34) !important;

  box-shadow:
    0 0 0 1px rgb(var(--team-primary-rgb, 148 163 184) / 0.18) inset,
    0 0 0 2px rgb(var(--team-secondary-rgb, 255 255 255) / 0.06) inset,
    0 18px 38px rgba(0, 0, 0, 0.50),
    0 0 22px rgb(var(--team-primary-rgb, 148 163 184) / 0.18),
    0 0 44px rgb(var(--team-primary-rgb, 148 163 184) / 0.10) !important;
}

#cindCard::before,
#favCard::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;

  background:
    linear-gradient(
      135deg,
      rgb(var(--team-secondary-rgb, 255 255 255) / 0.10) 0%,
      transparent 18%,
      transparent 82%,
      rgb(var(--team-primary-rgb, 148 163 184) / 0.10) 100%
    );

  mix-blend-mode: screen;
  opacity: 0.65;
}

#cindCard::after,
#favCard::after{
  content: "";
  position: absolute;
  inset: 8px;
  pointer-events: none;
  z-index: 0;
  border-radius: 14px;

  background:
    linear-gradient(
      115deg,
      transparent 0%,
      rgb(255 255 255 / 0.035) 18%,
      transparent 32%,
      rgb(var(--team-secondary-rgb, 255 255 255) / 0.05) 48%,
      transparent 62%,
      rgb(var(--team-primary-rgb, 148 163 184) / 0.045) 78%,
      transparent 100%
    );

  opacity: 0.80;
}

/* keep all real content above shell overlays */
#cindCard > *,
#favCard > *{
  position: relative;
  z-index: 1;
}

/* printed card face */
#cindCard > .flip-inner > .card-face,
#favCard > .flip-inner > .card-face{
  position: relative;
  overflow: hidden;

  background:
    radial-gradient(
      120% 95% at 12% 0%,
      rgb(var(--team-secondary-rgb, 255 255 255) / 0.14) 0%,
      rgb(var(--team-secondary-rgb, 255 255 255) / 0.05) 12%,
      transparent 34%
    ),
    radial-gradient(
      95% 75% at 100% 100%,
      rgb(var(--team-primary-rgb, 148 163 184) / 0.12) 0%,
      transparent 52%
    ),
    linear-gradient(
      180deg,
      rgb(var(--team-primary-rgb, 148 163 184) / 0.15) 0%,
      rgba(9, 15, 31, 0.97) 16%,
      rgba(4, 8, 20, 0.985) 58%,
      rgba(1, 4, 13, 0.995) 100%
    ) !important;

  border: 1px solid rgb(var(--team-primary-rgb, 148 163 184) / 0.22) !important;

  box-shadow:
    0 0 0 1px rgb(255 255 255 / 0.03) inset,
    0 0 0 2px rgb(var(--team-primary-rgb, 148 163 184) / 0.06) inset,
    0 12px 30px rgba(0, 0, 0, 0.34),
    0 0 16px rgb(var(--team-primary-rgb, 148 163 184) / 0.08) !important;
}

/* top gloss */
#cindCard > .flip-inner > .card-face::before,
#favCard > .flip-inner > .card-face::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;

  background:
    linear-gradient(
      180deg,
      rgb(255 255 255 / 0.12) 0%,
      rgb(255 255 255 / 0.05) 10%,
      transparent 24%
    ),
    linear-gradient(
      105deg,
      transparent 0%,
      rgb(255 255 255 / 0.055) 16%,
      transparent 30%,
      transparent 100%
    );

  opacity: 0.85;
}

/* holographic foil wash */
#cindCard > .flip-inner > .card-face::after,
#favCard > .flip-inner > .card-face::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;

  background:
    repeating-linear-gradient(
      115deg,
      rgb(255 255 255 / 0.00) 0px,
      rgb(255 255 255 / 0.00) 10px,
      rgb(255 255 255 / 0.018) 11px,
      rgb(255 255 255 / 0.00) 18px
    ),
    linear-gradient(
      120deg,
      transparent 0%,
      rgb(120 220 255 / 0.05) 18%,
      transparent 30%,
      rgb(255 140 220 / 0.045) 48%,
      transparent 62%,
      rgb(140 255 210 / 0.04) 78%,
      transparent 100%
    ),
    radial-gradient(
      75% 55% at 18% 12%,
      rgb(var(--team-secondary-rgb, 255 255 255) / 0.08) 0%,
      transparent 55%
    );

  mix-blend-mode: screen;
  opacity: 0.55;
}

/* keep face content above holographic layers */
#cindCard > .flip-inner > .card-face > *,
#favCard > .flip-inner > .card-face > *{
  position: relative;
  z-index: 1;
}

/* header gets a more premium slab/foil cap */
#cindCard .team-card-header,
#favCard .team-card-header{
  position: relative;
  overflow: hidden;

  background:
    linear-gradient(
      180deg,
      rgb(var(--team-primary-rgb, 148 163 184) / 0.20) 0%,
      rgb(var(--team-primary-rgb, 148 163 184) / 0.08) 18%,
      rgba(7, 12, 26, 0.92) 100%
    ) !important;

  border: 1px solid rgb(var(--team-primary-rgb, 148 163 184) / 0.28) !important;

  box-shadow:
    0 0 0 1px rgb(255 255 255 / 0.04) inset,
    0 0 0 2px rgb(var(--team-primary-rgb, 148 163 184) / 0.07) inset,
    0 8px 20px rgba(0, 0, 0, 0.22),
    0 0 14px rgb(var(--team-primary-rgb, 148 163 184) / 0.12) !important;
}

#cindCard .team-card-header::before,
#favCard .team-card-header::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;

  background:
    linear-gradient(
      105deg,
      transparent 0%,
      rgb(255 255 255 / 0.10) 16%,
      transparent 28%,
      transparent 100%
    );
  opacity: 0.85;
}

/* inner panels feel more embedded in the trading-card face */
#cindCard .profile-section.flip-tile,
#cindCard .subtotal-main,
#cindCard .identity-main,
#favCard .profile-section.flip-tile,
#favCard .subtotal-main,
#favCard .identity-main{
  background:
    linear-gradient(
      180deg,
      rgb(var(--team-primary-rgb, 148 163 184) / 0.08) 0%,
      rgba(5, 10, 22, 0.90) 100%
    ) !important;

  border: 1px solid rgb(var(--team-primary-rgb, 148 163 184) / 0.18) !important;

  box-shadow:
    0 0 0 1px rgb(255 255 255 / 0.025) inset,
    0 10px 18px rgba(0, 0, 0, 0.20) !important;
}

/* slightly stronger team-name presentation */
#cindCard .mi-team-brand-name,
#cindCard .team-card-header h2,
#favCard .mi-team-brand-name,
#favCard .team-card-header h2{
  text-shadow:
    0 0 10px rgb(var(--team-primary-rgb, 148 163 184) / 0.26),
    0 1px 0 rgb(255 255 255 / 0.05);
}

/* =========================================================
   WINNER EMPHASIS — VERDICT SHELL + SUMMARY CENTER
   Canonical owners:
   - #verdictShell
   - #summarySection .syn-center

   Goal:
   - stronger, more obvious winner cue
   - not color-only
   - preserve scorebug internals
   ========================================================= */

/* =========================
   BASE OWNER SURFACES
   ========================= */

#verdictShell,
#summarySection .syn-center{
  position: relative;
  overflow: hidden;
  isolation: isolate;

  transition:
    border-color 220ms ease,
    box-shadow 240ms ease,
    background 240ms ease,
    transform 220ms ease;
}

/* Keep actual content above all winner FX */
#verdictShell > *,
#summarySection .syn-center > *{
  position: relative;
  z-index: 2;
}

/* Winner badge */
#verdictShell::before,
#summarySection .syn-center::before{
  position: absolute;
  top: 10px;
  z-index: 3;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 24px;
  padding: 0 10px;
  border-radius: 999px;

  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;

  opacity: 0;
  pointer-events: none;
  transition:
    opacity 220ms ease,
    transform 220ms ease,
    border-color 220ms ease,
    background 220ms ease,
    box-shadow 220ms ease,
    color 220ms ease;
}

/* Vertical beacon / side ownership line */
#verdictShell::after,
#summarySection .syn-center::after{
  content: "";
  position: absolute;
  top: 14px;
  bottom: 14px;
  width: 7px;
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  z-index: 1;

  transition:
    opacity 240ms ease,
    left 220ms ease,
    right 220ms ease,
    box-shadow 240ms ease,
    background 240ms ease;
}

/* =========================================================
   VERDICT SHELL — TEAM A
   ========================================================= */

#verdictShell.mi-winner-a{
  border-color: rgb(var(--team-a-primary-rgb, 148 163 184) / 0.84);

  background:
    radial-gradient(
      120% 140% at 8% 0%,
      rgb(var(--team-a-primary-rgb, 148 163 184) / 0.24),
      transparent 52%
    ),
    linear-gradient(
      90deg,
      rgb(var(--team-a-primary-rgb, 148 163 184) / 0.16) 0%,
      rgb(var(--team-a-primary-rgb, 148 163 184) / 0.06) 18%,
      rgba(7, 10, 18, 0.00) 36%
    ),
    rgba(7, 10, 18, 0.92);

  box-shadow:
    0 0 0 1px rgb(var(--team-a-primary-rgb, 148 163 184) / 0.34),
    0 0 0 3px rgb(var(--team-a-primary-rgb, 148 163 184) / 0.08),
    -28px 0 48px rgb(var(--team-a-primary-rgb, 148 163 184) / 0.26),
    0 24px 52px rgba(0,0,0,0.58);
}

#verdictShell.mi-winner-a::after{
  left: 12px;
  opacity: 1;

  background:
    linear-gradient(
      180deg,
      rgb(var(--team-a-secondary-rgb, 148 163 184) / 0.95),
      rgb(var(--team-a-primary-rgb, 148 163 184) / 0.92)
    );

  box-shadow:
    0 0 0 1px rgb(255 255 255 / 0.05),
    0 0 16px rgb(var(--team-a-primary-rgb, 148 163 184) / 0.34),
    0 0 32px rgb(var(--team-a-primary-rgb, 148 163 184) / 0.20);
}

/* =========================================================
   VERDICT SHELL — TEAM B
   ========================================================= */

#verdictShell.mi-winner-b{
  border-color: rgb(var(--team-b-primary-rgb, 148 163 184) / 0.84);

  background:
    radial-gradient(
      120% 140% at 92% 0%,
      rgb(var(--team-b-primary-rgb, 148 163 184) / 0.24),
      transparent 52%
    ),
    linear-gradient(
      270deg,
      rgb(var(--team-b-primary-rgb, 148 163 184) / 0.16) 0%,
      rgb(var(--team-b-primary-rgb, 148 163 184) / 0.06) 18%,
      rgba(7, 10, 18, 0.00) 36%
    ),
    rgba(7, 10, 18, 0.92);

  box-shadow:
    0 0 0 1px rgb(var(--team-b-primary-rgb, 148 163 184) / 0.34),
    0 0 0 3px rgb(var(--team-b-primary-rgb, 148 163 184) / 0.08),
    28px 0 48px rgb(var(--team-b-primary-rgb, 148 163 184) / 0.26),
    0 24px 52px rgba(0,0,0,0.58);
}

#verdictShell.mi-winner-b::after{
  right: 12px;
  opacity: 1;

  background:
    linear-gradient(
      180deg,
      rgb(var(--team-b-secondary-rgb, 148 163 184) / 0.95),
      rgb(var(--team-b-primary-rgb, 148 163 184) / 0.92)
    );

  box-shadow:
    0 0 0 1px rgb(255 255 255 / 0.05),
    0 0 16px rgb(var(--team-b-primary-rgb, 148 163 184) / 0.34),
    0 0 32px rgb(var(--team-b-primary-rgb, 148 163 184) / 0.20);
}

/* =========================================================
   VERDICT SHELL — NEUTRAL
   ========================================================= */

#verdictShell.mi-winner-neutral{
  border-color: rgba(148, 163, 184, 0.48);
  box-shadow:
    0 0 0 1px rgba(148, 163, 184, 0.16),
    0 20px 44px rgba(0,0,0,0.52);
}

#verdictShell.mi-winner-neutral::after{
  left: 50%;
  transform: translateX(-50%);
  opacity: 0.72;

  background:
    linear-gradient(
      180deg,
      rgba(148,163,184,0.75),
      rgba(148,163,184,0.50)
    );

  box-shadow:
    0 0 14px rgba(148,163,184,0.22);
}

/* =========================================================
   SUMMARY CENTER — TEAM A
   ========================================================= */

#summarySection .syn-center.mi-winner-a{
  border-color: rgb(var(--mi-brand-a-rgb) / 0.78);
  box-shadow:
    inset 0 0 0 1px rgb(var(--mi-brand-a-rgb) / 0.26),
    inset 0 0 0 3px rgb(var(--mi-brand-a-rgb) / 0.06),
    -18px 0 34px rgb(var(--mi-brand-a-rgb) / 0.18);
}

#summarySection .syn-center.mi-winner-a::after{
  left: 6px;
  opacity: 1;

  background:
    linear-gradient(
      180deg,
      rgb(var(--mi-brand-a-secondary-ambient-rgb) / 0.95),
      rgb(var(--mi-brand-a-rgb) / 0.92)
    );

  box-shadow:
    0 0 14px rgb(var(--mi-brand-a-rgb) / 0.24),
    0 0 24px rgb(var(--mi-brand-a-rgb) / 0.14);
}

/* =========================================================
   SUMMARY CENTER — TEAM B
   ========================================================= */

#summarySection .syn-center.mi-winner-b{
  border-color: rgb(var(--mi-brand-b-rgb) / 0.78);
  box-shadow:
    inset 0 0 0 1px rgb(var(--mi-brand-b-rgb) / 0.26),
    inset 0 0 0 3px rgb(var(--mi-brand-b-rgb) / 0.06),
    18px 0 34px rgb(var(--mi-brand-b-rgb) / 0.18);
}

#summarySection .syn-center.mi-winner-b::after{
  right: 6px;
  opacity: 1;

  background:
    linear-gradient(
      180deg,
      rgb(var(--mi-brand-b-secondary-ambient-rgb) / 0.95),
      rgb(var(--mi-brand-b-rgb) / 0.92)
    );

  box-shadow:
    0 0 14px rgb(var(--mi-brand-b-rgb) / 0.24),
    0 0 24px rgb(var(--mi-brand-b-rgb) / 0.14);
}

/* =========================================================
   SUMMARY CENTER — NEUTRAL
   ========================================================= */

#summarySection .syn-center.mi-winner-neutral{
  border-color: rgba(148,163,184,0.42);
  box-shadow:
    inset 0 0 0 1px rgba(148,163,184,0.12);
}

#summarySection .syn-center.mi-winner-neutral::before{
  content: "even";
  left: 50%;
  transform: translateX(-50%);
  opacity: 1;

  color: rgba(248,250,252,0.94);
  border: 1px solid rgba(148,163,184,0.38);
  background:
    linear-gradient(
      180deg,
      rgba(148,163,184,0.18),
      rgba(2,6,23,0.92)
    );
}

#summarySection .syn-center.mi-winner-neutral::after{
  left: 50%;
  transform: translateX(-50%);
  opacity: 0.68;

  background:
    linear-gradient(
      180deg,
      rgba(148,163,184,0.72),
      rgba(148,163,184,0.44)
    );

  box-shadow:
    0 0 12px rgba(148,163,184,0.18);
}

/* =========================================================
   PRE-MATCHUP HUB — convert left card into live status panel
   ========================================================= */

#preMatchupHub .pre-hub-title {
  display: block !important;
  text-align: center !important;
  font-size: 15px !important;
  letter-spacing: 0.10em !important;
  margin-bottom: 6px !important;
}

#preMatchupHub .pre-hub-steps{
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}

#preMatchupHub .pre-step{
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr) auto !important;
  grid-template-areas: "num copy status" !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px 14px !important;
  min-height: 74px;
}

#preMatchupHub .pre-step-num{
  grid-area: num;
}

#preMatchupHub .pre-step-copy{
  grid-area: copy;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#preMatchupHub .pre-step-label{
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(203, 213, 225, 0.92);
  line-height: 1.1;
}

#preMatchupHub .pre-step-text{
  grid-area: unset !important;
  margin-top: 0 !important;
  max-width: none !important;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  color: rgba(226, 232, 240, 0.94);
}

#preMatchupHub .pre-step-status{
  display: inline-flex !important;
  grid-area: status;
  justify-self: end;
  align-self: center;
  white-space: nowrap;
  text-align: center;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  background: rgba(2, 6, 23, 0.35);
  color: rgba(226, 232, 240, 0.82);
}

#preMatchupHub .pre-step.is-done .pre-step-status{
  color: #86efac;
  border-color: rgba(22, 163, 74, 0.60);
  background: rgba(22, 163, 74, 0.12);
}

#preMatchupHub .pre-step.is-next .pre-step-status{
  color: rgba(125, 211, 252, 0.96);
  border-color: rgba(56, 189, 248, 0.52);
  background: rgba(56, 189, 248, 0.12);
}

#preMatchupHub .pre-step.is-locked .pre-step-status{
  color: rgba(148, 163, 184, 0.82);
  border-color: rgba(148, 163, 184, 0.22);
  background: rgba(15, 23, 42, 0.30);
}

#preMatchupHub .pre-step.is-hidden{
  display: grid !important;
}

#preMatchupHub .pre-hub-steps.is-single{
  grid-template-columns: 1fr !important;
}

.pre-step.is-locked {
  opacity: 0.55;
  filter: grayscale(0.45);
}

.pre-step-status[data-required],
.pre-step-status:contains("REQUIRED") {
  border-color: rgba(59, 130, 246, 0.55);
  background: rgba(59, 130, 246, 0.14);
  color: rgba(147, 197, 253, 0.95);
}

/* =========================================================
   STEP STATE TRANSITIONS — smooth visual feedback
   ========================================================= */

.pre-step {
  transition:
    opacity 180ms ease,
    filter 180ms ease,
    transform 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease;
}

.pre-step.is-done {
  transform: translateY(-1px);
}

.pre-step.is-next {
  transform: translateY(0);
}

.pre-step.is-locked {
  transform: translateY(0);
}

/* =========================================================
   LOCKED CONTROL GUARDRAILS
   ========================================================= */

.workflow-step-card.is-locked {
  pointer-events: none;
  opacity: 0.6;
}

.workflow-step-card.is-active-step {
  pointer-events: auto;
}

/* =========================================================
   COMPARE BUTTON — READY STATE
   ========================================================= */

#compareMatchupBtn.is-ready {
  opacity: 1;
  filter: none;

  box-shadow:
    0 0 18px rgba(16, 185, 129, 0.45),
    0 0 36px rgba(16, 185, 129, 0.25);
}

#compareMatchupBtn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* =========================================
   CLEAR WORKFLOW STATE BUTTON
   ========================================= */

.clear-workflow-btn {
  margin-left: 12px;

  opacity: 0.85;

  font-size: 0.85rem;

  border-color: rgba(255, 255, 255, 0.25);

  transition:
    opacity 0.2s ease,
    transform 0.15s ease,
    border-color 0.2s ease;
}

.clear-workflow-btn:hover {
  opacity: 1;

  border-color: rgba(255, 255, 255, 0.45);

  transform: translateY(-1px);
}

.clear-workflow-btn:active {
  transform: translateY(0);
}

/* =========================================================
   VERDICT SHELL — INNER WRAPPER (structural only)
   ========================================================= */

#verdictShell .mi-verdict-shell-inner{
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 12px 16px;
  gap: 12px;
  border-radius: 14px;

  /* structural only */
  background: transparent;
  box-shadow: none;
}

/* Kill the old left accent rail */
#verdictShell .mi-verdict-shell-inner::before{
  content: none !important;
}

#verdictShell .mi-verdict-shell-inner > .mi-verdict-actions.mi-verdict-actions-rail{
  padding-top: 4px;
}

/* =========================================================
   VERDICT MAIN — dominant content zone
   ========================================================= */

#verdictShell .mi-verdict-main{
  position: relative;
  border-radius: 14px;
  padding: 12px 14px 12px 10px;

  background:
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00) 30%),
    rgba(2, 6, 23, 0.18);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.03);
}

/* =========================================================
   VERDICT GRID — rebuilt from scratch
   Restores narrative left / scorebug right
   while keeping the shell visually unified
   ========================================================= */

#verdictShell .mi-verdict-grid{
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(460px, 0.88fr);
  align-items: start;
  gap: 4px;

  width: 100%;
  min-width: 0;

  padding: 10px 12px 8px;
  border-radius: 16px;

  /* shared surface, not a separate card */
  background:
    linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.00) 26%),
    rgba(2, 6, 23, 0.14);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.03),
    inset 0 0 0 1px rgba(255,255,255,0.02);
}

/* Winner-side focal glow stays subtle and local */
#verdictShell.mi-winner-a .mi-verdict-main{
  box-shadow:
    inset 1px 0 0 rgb(var(--team-a-primary-rgb, 148 163 184) / 0.18),
    inset 0 1px 0 rgba(255,255,255,0.03);
}

#verdictShell.mi-winner-b .mi-verdict-main{
  box-shadow:
    inset -1px 0 0 rgb(var(--team-b-primary-rgb, 148 163 184) / 0.18),
    inset 0 1px 0 rgba(255,255,255,0.03);
}

/* =========================================================
   VERDICT RAIL — subordinate support zone
   ========================================================= */

#verdictShell .mi-verdict-rail{
  min-width: 0;
  width: 100%;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;

  padding: 2px 0 0;
  border-radius: 14px;

  /* slightly darker than main, but still part of same slab */
  background:
    linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0.00) 22%),
    rgba(2, 6, 23, 0.10);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.025);
}

#verdictShell .mi-verdict-main{
  min-width: 0;
  width: 100%;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;

  padding: 8px 10px 8px 8px;
  border-radius: 14px;

  /* keep this very light so it feels embedded */
  background: transparent;
  box-shadow: none;
  border: 0;
}

#verdictShell .mi-verdict-rail::before{
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: -9px;
  width: 1px;

  background: linear-gradient(
    180deg,
    rgba(148,163,184,0.00),
    rgba(148,163,184,0.18),
    rgba(148,163,184,0.00)
  );

  pointer-events: none;
}

#verdictShell .mi-scorebug-grid{
  width: 100%;
  min-width: 0;
}

/* =========================================================
   METRICS TILE — embedded into verdict rail
   ========================================================= */

#miVerdictMetricsTile.mi-verdict-metrics-tile{
  border: 1px solid rgba(148,163,184,0.34) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.00) 24%),
    rgba(3, 8, 20, 0.56) !important;

  box-shadow:
    0 14px 28px rgba(0,0,0,0.42),
    inset 0 1px 0 rgba(255,255,255,0.03) !important;
}

/* =========================================================
   SCOREBUG TEAM HIERARCHY
   ========================================================= */

#verdictShell.mi-winner-a #miVerdictMetricsTile .mi-scorebug-team--a,
#verdictShell.mi-winner-b #miVerdictMetricsTile .mi-scorebug-team--b{
  border-color: rgba(255,255,255,0.82) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 0 0 1px rgba(255,255,255,0.05),
    0 10px 24px rgba(0,0,0,0.28) !important;
  transform: translateY(-1px);
}

#verdictShell.mi-winner-a #miVerdictMetricsTile .mi-scorebug-team--b,
#verdictShell.mi-winner-b #miVerdictMetricsTile .mi-scorebug-team--a{
  opacity: 0.82;
  filter: saturate(0.86) brightness(0.94);
}

/* =========================================================
   VERDICT / SUMMARY WINNER OWNERSHIP PASS
   Paste at absolute bottom of styles2.css
   ========================================================= */

/* -----------------------------------------
   Shared winner atmosphere tokens
   ----------------------------------------- */
#verdictShell.mi-winner-a,
#summarySection .syn-center.mi-winner-a{
  --mi-owner-rgb: var(--team-a-primary-rgb, 148 163 184);
  --mi-owner-secondary-rgb: var(--team-a-secondary-rgb, 148 163 184);
  --mi-owner-tertiary-rgb: var(--team-a-tertiary-rgb, 148 163 184);
  --mi-owner-secondary-ambient-rgb: var(--team-a-secondary-ambient-rgb, 148 163 184);
  --mi-owner-tertiary-ambient-rgb: var(--team-a-tertiary-ambient-rgb, 148 163 184);
  --mi-owner-edge-x: 10%;
  --mi-owner-hero-x: 18%;
}

#verdictShell.mi-winner-b,
#summarySection .syn-center.mi-winner-b{
  --mi-owner-rgb: var(--team-b-primary-rgb, 148 163 184);
  --mi-owner-secondary-rgb: var(--team-b-secondary-rgb, 148 163 184);
  --mi-owner-tertiary-rgb: var(--team-b-tertiary-rgb, 148 163 184);
  --mi-owner-secondary-ambient-rgb: var(--team-b-secondary-ambient-rgb, 148 163 184);
  --mi-owner-tertiary-ambient-rgb: var(--team-b-tertiary-ambient-rgb, 148 163 184);
  --mi-owner-edge-x: 90%;
  --mi-owner-hero-x: 82%;
}

/* summary uses brand tokens, so remap there */
#summarySection .syn-center.mi-winner-a{
  --mi-owner-rgb: var(--mi-brand-a-rgb, 148 163 184);
  --mi-owner-secondary-rgb: var(--mi-brand-a-secondary-rgb, 148 163 184);
  --mi-owner-tertiary-rgb: var(--mi-brand-a-tertiary-rgb, 148 163 184);
  --mi-owner-secondary-ambient-rgb: var(--mi-brand-a-secondary-ambient-rgb, 148 163 184);
  --mi-owner-tertiary-ambient-rgb: var(--mi-brand-a-tertiary-ambient-rgb, 148 163 184);
}

#summarySection .syn-center.mi-winner-b{
  --mi-owner-rgb: var(--mi-brand-b-rgb, 148 163 184);
  --mi-owner-secondary-rgb: var(--mi-brand-b-secondary-rgb, 148 163 184);
  --mi-owner-tertiary-rgb: var(--mi-brand-b-tertiary-rgb, 148 163 184);
  --mi-owner-secondary-ambient-rgb: var(--mi-brand-b-secondary-ambient-rgb, 148 163 184);
  --mi-owner-tertiary-ambient-rgb: var(--mi-brand-b-tertiary-ambient-rgb, 148 163 184);
}

/* -----------------------------------------
   VERDICT SHELL — broader shell ownership
   ----------------------------------------- */
#verdictShell.mi-winner-a,
#verdictShell.mi-winner-b{
  position: relative;
  overflow: hidden;

  background:
    radial-gradient(
      140% 165% at var(--mi-owner-edge-x) -8%,
      rgb(var(--mi-owner-rgb) / 0.26) 0%,
      rgb(var(--mi-owner-rgb) / 0.13) 22%,
      rgba(7, 10, 18, 0.00) 54%
    ),
    radial-gradient(
      120% 145% at var(--mi-owner-hero-x) 8%,
      rgb(var(--mi-owner-tertiary-rgb) / 0.16) 0%,
      rgb(var(--mi-owner-tertiary-rgb) / 0.08) 18%,
      rgba(7, 10, 18, 0.00) 42%
    ),
    linear-gradient(
      90deg,
      rgb(var(--mi-owner-rgb) / 0.11) 0%,
      rgb(var(--mi-owner-secondary-rgb) / 0.07) 16%,
      rgb(var(--mi-owner-tertiary-rgb) / 0.05) 28%,
      rgba(7, 10, 18, 0.00) 42%,
      rgba(7, 10, 18, 0.00) 58%,
      rgb(var(--mi-owner-tertiary-rgb) / 0.03) 72%,
      rgb(var(--mi-owner-rgb) / 0.04) 100%
    ),
    rgba(7, 10, 18, 0.92);

  border-color: rgb(var(--mi-owner-rgb) / 0.76);

  box-shadow:
    0 0 0 1px rgb(var(--mi-owner-rgb) / 0.26),
    0 0 0 3px rgb(var(--mi-owner-tertiary-rgb) / 0.06),
    0 0 28px rgb(var(--mi-owner-tertiary-rgb) / 0.14),
    0 24px 52px rgba(0,0,0,0.58);
}

/* Verdict shell winner badge */
#verdictShell.mi-winner-a::before,
#verdictShell.mi-winner-b::before{
  opacity: 1;
  color: rgba(248,250,252,0.94);

  background:
    linear-gradient(
      180deg,
      rgb(var(--mi-owner-rgb) / 0.22),
      rgb(var(--mi-owner-secondary-rgb) / 0.16)
    );

  border: 1px solid rgb(var(--mi-owner-tertiary-rgb) / 0.24);

  box-shadow:
    0 10px 26px rgba(0,0,0,0.34),
    0 0 0 1px rgb(var(--mi-owner-rgb) / 0.10),
    0 0 18px rgb(var(--mi-owner-tertiary-rgb) / 0.12);

  transform: translateY(0);
}

/* Vertical beacon / side ownership line */
#verdictShell.mi-winner-a::after,
#verdictShell.mi-winner-b::after{
  opacity: 1;

  background:
    linear-gradient(
      180deg,
      rgb(var(--mi-owner-secondary-rgb) / 0.96),
      rgb(var(--mi-owner-tertiary-rgb) / 0.88),
      rgb(var(--mi-owner-rgb) / 0.92)
    );

  box-shadow:
    0 0 0 1px rgb(255 255 255 / 0.05),
    0 0 16px rgb(var(--mi-owner-tertiary-rgb) / 0.28),
    0 0 32px rgb(var(--mi-owner-rgb) / 0.18);
}

#verdictShell.mi-winner-a::after{
  left: 12px;
  right: auto;
}

#verdictShell.mi-winner-b::after{
  right: 12px;
  left: auto;
}

/* keep directional bias correct for B */
#verdictShell.mi-winner-b{
  background:
    radial-gradient(
      140% 165% at var(--mi-owner-edge-x) -8%,
      rgb(var(--mi-owner-rgb) / 0.30) 0%,
      rgb(var(--mi-owner-rgb) / 0.16) 22%,
      rgba(7, 10, 18, 0.00) 56%
    ),
    linear-gradient(
      270deg,
      rgb(var(--mi-owner-rgb) / 0.13) 0%,
      rgb(var(--mi-owner-rgb) / 0.06) 18%,
      rgba(7, 10, 18, 0.00) 36%,
      rgba(7, 10, 18, 0.00) 64%,
      rgb(var(--mi-owner-rgb) / 0.04) 100%
    ),
    rgba(7, 10, 18, 0.92);
}

/* -----------------------------------------
   Shared shell slab — unify the inside
   ----------------------------------------- */
#verdictShell.mi-winner-a .mi-verdict-grid,
#verdictShell.mi-winner-b .mi-verdict-grid{
  background:
    radial-gradient(
      120% 120% at var(--mi-owner-edge-x) 0%,
      rgb(var(--mi-owner-rgb) / 0.10),
      rgba(255,255,255,0.00) 46%
    ),
    linear-gradient(
      180deg,
      rgba(255,255,255,0.030),
      rgba(255,255,255,0.00) 28%
    ),
    rgba(2, 6, 23, 0.16);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    inset 0 0 0 1px rgba(255,255,255,0.025);
}

/* -----------------------------------------
   Narrative hero bloom — the main upgrade
   ----------------------------------------- */
#verdictShell.mi-winner-a .mi-verdict-main,
#verdictShell.mi-winner-b .mi-verdict-main{
  position: relative;
  isolation: isolate;
  overflow: hidden;

  background:
    radial-gradient(
      115% 140% at var(--mi-owner-hero-x) 10%,
      rgb(var(--mi-owner-rgb) / 0.16) 0%,
      rgb(var(--mi-owner-rgb) / 0.08) 28%,
      rgba(255,255,255,0.00) 62%
    ),
    linear-gradient(
      180deg,
      rgba(255,255,255,0.025),
      rgba(255,255,255,0.00) 34%
    ),
    rgba(2, 6, 23, 0.12);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    inset 0 0 0 1px rgb(var(--mi-owner-rgb) / 0.08);
}

#verdictShell.mi-winner-a .mi-verdict-main::before,
#verdictShell.mi-winner-b .mi-verdict-main::before{
  content: "";
  position: absolute;
  inset: -10% -4% -14% -4%;
  pointer-events: none;
  z-index: -1;

  background:
    radial-gradient(
      70% 78% at var(--mi-owner-hero-x) 18%,
      rgb(var(--mi-owner-secondary-rgb) / 0.16) 0%,
      rgb(var(--mi-owner-rgb) / 0.10) 32%,
      rgba(255,255,255,0.00) 72%
    );

  opacity: 0.95;
  filter: blur(10px);
}

/* -----------------------------------------
   Rail becomes support, not main spectacle
   ----------------------------------------- */
#verdictShell.mi-winner-a .mi-verdict-rail,
#verdictShell.mi-winner-b .mi-verdict-rail{
  background:
    linear-gradient(
      180deg,
      rgb(var(--mi-owner-rgb) / 0.05),
      rgba(255,255,255,0.00) 24%
    ),
    rgba(2, 6, 23, 0.10);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.025),
    inset 0 0 0 1px rgb(var(--mi-owner-rgb) / 0.05);
}

/* -----------------------------------------
   Scorebug stays technical, but slightly richer
   ----------------------------------------- */
#verdictShell.mi-winner-a .mi-scorebug-team--a,
#verdictShell.mi-winner-b .mi-scorebug-team--b{
  background:
    radial-gradient(
      120% 120% at 50% 0%,
      rgb(var(--mi-owner-rgb) / 0.15),
      rgba(255,255,255,0.00) 52%
    ),
    linear-gradient(
      180deg,
      rgba(255,255,255,0.03),
      rgba(255,255,255,0.00) 32%
    ),
    rgba(2, 6, 23, 0.26);

  border-color: rgb(255 255 255 / 0.92);

  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.62),
    0 0 0 2px rgb(var(--mi-owner-rgb) / 0.24),
    0 0 24px rgb(var(--mi-owner-rgb) / 0.17);
}

/* -----------------------------------------
   SUMMARY CENTER — same ownership language
   ----------------------------------------- */
#summarySection .syn-center.mi-winner-a,
#summarySection .syn-center.mi-winner-b{
  position: relative;
  overflow: hidden;

  background:
    radial-gradient(
      140% 160% at var(--mi-owner-edge-x) -10%,
      rgb(var(--mi-owner-rgb) / 0.22) 0%,
      rgb(var(--mi-owner-rgb) / 0.10) 22%,
      rgba(15, 23, 42, 0.00) 56%
    ),
    linear-gradient(
      180deg,
      rgba(255,255,255,0.028),
      rgba(255,255,255,0.00) 28%
    ),
    rgba(7, 10, 18, 0.90);

  box-shadow:
    inset 0 0 0 1px rgb(var(--mi-owner-rgb) / 0.24),
    inset 0 0 0 3px rgb(var(--mi-owner-rgb) / 0.055),
    0 20px 42px rgba(0,0,0,0.42),
    0 0 34px rgb(var(--mi-owner-rgb) / 0.13);
}

/* localized verdict strip inside summary center */
#summarySection .syn-center.mi-winner-a .syn-verdict,
#summarySection .syn-center.mi-winner-b .syn-verdict,
#summarySection .syn-center.mi-winner-a #synVerdict,
#summarySection .syn-center.mi-winner-b #synVerdict,
#summarySection .syn-center.mi-winner-a .syn-center-verdict,
#summarySection .syn-center.mi-winner-b .syn-center-verdict{
  background:
    radial-gradient(
      125% 125% at var(--mi-owner-hero-x) 0%,
      rgb(var(--mi-owner-rgb) / 0.12),
      rgba(255,255,255,0.00) 56%
    ),
    linear-gradient(
      to bottom,
      rgba(255,255,255,0.06),
      rgba(15, 23, 42, 0.35)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 0 0 1px rgb(var(--mi-owner-rgb) / 0.08),
    0 10px 26px rgba(0,0,0,0.28);
}

/* =========================================================
   VERDICT SHELL — INNER HERO PLATE PASS
   Purpose:
   Make the winner color visibly inhabit the left narrative zone,
   not just the shell edge / rail / scorebug outline.
   ========================================================= */

/* stronger owner variables */
#verdictShell.mi-winner-a{
  --mi-verdict-owner-rgb: var(--team-a-primary-rgb, 148 163 184);
  --mi-verdict-owner-secondary-rgb: var(--team-a-secondary-rgb, 148 163 184);
  --mi-verdict-owner-x: 18%;
}

#verdictShell.mi-winner-b{
  --mi-verdict-owner-rgb: var(--team-b-primary-rgb, 148 163 184);
  --mi-verdict-owner-secondary-rgb: var(--team-b-secondary-rgb, 148 163 184);
  --mi-verdict-owner-x: 82%;
}

/* -----------------------------------------
   1) keep shell ownership, but push it a bit
   ----------------------------------------- */
#verdictShell.mi-winner-a,
#verdictShell.mi-winner-b{
  background:
    radial-gradient(
      135% 150% at var(--mi-verdict-owner-x) -6%,
      rgb(var(--mi-verdict-owner-rgb) / 0.34) 0%,
      rgb(var(--mi-verdict-owner-rgb) / 0.16) 24%,
      rgba(7, 10, 18, 0.00) 58%
    ),
    linear-gradient(
      180deg,
      rgba(255,255,255,0.03),
      rgba(255,255,255,0.00) 24%
    ),
    rgba(7, 10, 18, 0.92);

  box-shadow:
    0 0 0 1px rgb(var(--mi-verdict-owner-rgb) / 0.34),
    0 0 0 3px rgb(var(--mi-verdict-owner-rgb) / 0.08),
    0 0 44px rgb(var(--mi-verdict-owner-rgb) / 0.18),
    0 24px 52px rgba(0,0,0,0.60);
}

/* -----------------------------------------
   2) THIS is the important part:
   give the left copy zone a visible inner plate
   ----------------------------------------- */
#verdictShell.mi-winner-a .mi-verdict-main,
#verdictShell.mi-winner-b .mi-verdict-main{
  position: relative;
  overflow: hidden;
  isolation: isolate;

  background:
    radial-gradient(
      125% 135% at var(--mi-verdict-owner-x) 8%,
      rgb(var(--mi-verdict-owner-rgb) / 0.20) 0%,
      rgb(var(--mi-verdict-owner-rgb) / 0.10) 28%,
      rgba(255,255,255,0.00) 65%
    ),
    linear-gradient(
      180deg,
      rgba(255,255,255,0.04),
      rgba(255,255,255,0.00) 34%
    ),
    rgba(2, 6, 23, 0.30) !important;

  border: 1px solid rgb(var(--mi-verdict-owner-rgb) / 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    inset 0 0 0 1px rgb(var(--mi-verdict-owner-rgb) / 0.06),
    0 14px 28px rgba(0,0,0,0.22);
}

/* soft bloom behind the plate */
#verdictShell.mi-winner-a .mi-verdict-main::before,
#verdictShell.mi-winner-b .mi-verdict-main::before{
  content: "";
  position: absolute;
  inset: -14% -8% -18% -8%;
  z-index: -1;
  pointer-events: none;

  background:
    radial-gradient(
      68% 74% at var(--mi-verdict-owner-x) 16%,
      rgb(var(--mi-verdict-owner-secondary-rgb) / 0.20) 0%,
      rgb(var(--mi-verdict-owner-rgb) / 0.12) 34%,
      rgba(255,255,255,0.00) 74%
    );

  filter: blur(12px);
  opacity: 0.95;
}

/* -----------------------------------------
   3) slightly quiet the rail so the main plate wins
   ----------------------------------------- */
#verdictShell.mi-winner-a .mi-verdict-rail,
#verdictShell.mi-winner-b .mi-verdict-rail{
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.02),
      rgba(255,255,255,0.00) 22%
    ),
    rgba(2, 6, 23, 0.12);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.025);
}

/* -----------------------------------------
   4) make winner scorebug side read a little richer
   ----------------------------------------- */
#verdictShell.mi-winner-a #miVerdictMetricsTile .mi-scorebug-team--a,
#verdictShell.mi-winner-b #miVerdictMetricsTile .mi-scorebug-team--b{
  background:
    radial-gradient(
      120% 120% at 50% 0%,
      rgb(var(--mi-verdict-owner-rgb) / 0.14),
      rgba(255,255,255,0.00) 46%
    ),
    radial-gradient(
      125% 125% at 50% 10%,
      rgb(var(--mi-verdict-owner-tertiary-rgb) / 0.12),
      rgba(255,255,255,0.00) 58%
    ),
    linear-gradient(
      180deg,
      rgba(255,255,255,0.03),
      rgba(255,255,255,0.00) 34%
    ),
    rgba(2, 6, 23, 0.24);

  border-color: rgba(255,255,255,0.92) !important;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.65),
    0 0 0 2px rgb(var(--mi-verdict-owner-rgb) / 0.20),
    0 0 14px rgb(var(--mi-verdict-owner-secondary-rgb) / 0.10),
    0 0 24px rgb(var(--mi-verdict-owner-tertiary-rgb) / 0.14) !important;
}

/* =========================================================
   VERDICT SHELL — MAX STRENGTH TEST PASS
   INTENTIONALLY LOUD
   Use this to see the full ceiling of the current structure.
   ========================================================= */

#verdictShell.mi-winner-a{
  --mi-max-owner-rgb: var(--team-a-primary-rgb, 148 163 184);
  --mi-max-owner-secondary-rgb: var(--team-a-secondary-rgb, 255 255 255);
  --mi-max-owner-tertiary-rgb: var(--team-a-tertiary-rgb, 148 163 184);
  --mi-max-owner-x: 14%;
}

#verdictShell.mi-winner-b{
  --mi-max-owner-rgb: var(--team-b-primary-rgb, 148 163 184);
  --mi-max-owner-secondary-rgb: var(--team-b-secondary-rgb, 255 255 255);
  --mi-max-owner-tertiary-rgb: var(--team-b-tertiary-rgb, 148 163 184);
  --mi-max-owner-x: 86%;
}

/* -----------------------------------------
   OUTER SHELL: much stronger ownership
   ----------------------------------------- */
#verdictShell.mi-winner-a,
#verdictShell.mi-winner-b{
  background:
    radial-gradient(
      145% 165% at var(--mi-max-owner-x) -8%,
      rgb(var(--mi-max-owner-rgb) / 0.52) 0%,
      rgb(var(--mi-max-owner-rgb) / 0.24) 24%,
      rgba(7, 10, 18, 0.00) 60%
    ),
    linear-gradient(
      180deg,
      rgba(255,255,255,0.05),
      rgba(255,255,255,0.00) 26%
    ),
    rgba(7, 10, 18, 0.94) !important;

  border-color: rgb(var(--mi-max-owner-rgb) / 0.64) !important;

  box-shadow:
    0 0 0 1px rgb(var(--mi-max-owner-rgb) / 0.42),
    0 0 0 4px rgb(var(--mi-max-owner-rgb) / 0.12),
    0 0 72px rgb(var(--mi-max-owner-rgb) / 0.26),
    0 28px 64px rgba(0,0,0,0.68) !important;
}

/* -----------------------------------------
   SHARED INNER GRID: stronger atmosphere
   ----------------------------------------- */
#verdictShell.mi-winner-a .mi-verdict-grid,
#verdictShell.mi-winner-b .mi-verdict-grid{
  background:
    radial-gradient(
      130% 140% at var(--mi-max-owner-x) 4%,
      rgb(var(--mi-max-owner-rgb) / 0.16),
      rgba(255,255,255,0.00) 48%
    ),
    linear-gradient(
      180deg,
      rgba(255,255,255,0.05),
      rgba(255,255,255,0.00) 30%
    ),
    rgba(2, 6, 23, 0.18) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    inset 0 0 0 1px rgb(var(--mi-max-owner-rgb) / 0.08) !important;
}

/* -----------------------------------------
   HERO PLATE: this is the main test
   ----------------------------------------- */
#verdictShell.mi-winner-a .mi-verdict-main,
#verdictShell.mi-winner-b .mi-verdict-main{
  position: relative;
  overflow: hidden;
  isolation: isolate;

  background:
    radial-gradient(
      135% 145% at var(--mi-max-owner-x) 10%,
      rgb(var(--mi-max-owner-rgb) / 0.34) 0%,
      rgb(var(--mi-max-owner-rgb) / 0.18) 28%,
      rgba(255,255,255,0.00) 68%
    ),
    linear-gradient(
      180deg,
      rgba(255,255,255,0.07),
      rgba(255,255,255,0.00) 34%
    ),
    rgba(3, 8, 20, 0.52) !important;

  border: 1px solid rgb(var(--mi-max-owner-rgb) / 0.26) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.07),
    inset 0 0 0 1px rgb(var(--mi-max-owner-rgb) / 0.10),
    0 20px 38px rgba(0,0,0,0.34),
    0 0 34px rgb(var(--mi-max-owner-rgb) / 0.14) !important;
}

#verdictShell.mi-winner-a .mi-verdict-main::before,
#verdictShell.mi-winner-b .mi-verdict-main::before{
  content: "";
  position: absolute;
  inset: -18% -10% -22% -10%;
  z-index: -1;
  pointer-events: none;

  background:
    radial-gradient(
      72% 78% at var(--mi-max-owner-x) 16%,
      rgb(var(--mi-max-owner-secondary-rgb) / 0.28) 0%,
      rgb(var(--mi-max-owner-rgb) / 0.22) 22%,
      rgb(var(--mi-max-owner-rgb) / 0.10) 42%,
      rgba(255,255,255,0.00) 76%
    );

  filter: blur(18px);
  opacity: 1;
}

/* -----------------------------------------
   VERDICT COPY: let it react to the plate
   ----------------------------------------- */
#verdictShell.mi-winner-a .mi-verdict-headline,
#verdictShell.mi-winner-b .mi-verdict-headline{
  text-shadow:
    0 2px 12px rgba(0,0,0,0.52),
    0 0 24px rgb(var(--mi-max-owner-rgb) / 0.18);
}

#verdictShell.mi-winner-a .mi-verdict-body,
#verdictShell.mi-winner-b .mi-verdict-body{
  text-shadow:
    0 1px 10px rgba(0,0,0,0.34);
}

/* -----------------------------------------
   RAIL: still subordinate, but now clearly branded
   ----------------------------------------- */
#verdictShell.mi-winner-a .mi-verdict-rail,
#verdictShell.mi-winner-b .mi-verdict-rail{
  background:
    radial-gradient(
      120% 120% at 50% 0%,
      rgb(var(--mi-max-owner-rgb) / 0.14),
      rgba(255,255,255,0.00) 56%
    ),
    linear-gradient(
      180deg,
      rgba(255,255,255,0.03),
      rgba(255,255,255,0.00) 24%
    ),
    rgba(2, 6, 23, 0.18) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    inset 0 0 0 1px rgb(var(--mi-max-owner-rgb) / 0.08) !important;
}

/* -----------------------------------------
   LEFT VERTICAL ACCENT: max it out
   ----------------------------------------- */
#verdictShell.mi-winner-a::after,
#verdictShell.mi-winner-b::after{
  width: 6px !important;
  opacity: 1 !important;

  background:
    linear-gradient(
      180deg,
      rgb(var(--mi-max-owner-secondary-rgb) / 1.00),
      rgb(var(--mi-max-owner-rgb) / 1.00)
    ) !important;

  box-shadow:
    0 0 18px rgb(var(--mi-max-owner-rgb) / 0.52),
    0 0 34px rgb(var(--mi-max-owner-rgb) / 0.34),
    0 0 56px rgb(var(--mi-max-owner-rgb) / 0.18) !important;
}

/* -----------------------------------------
   METRICS TILE: make it visibly participate
   ----------------------------------------- */
#verdictShell.mi-winner-a #miVerdictMetricsTile,
#verdictShell.mi-winner-b #miVerdictMetricsTile{
  border-color: rgb(var(--mi-max-owner-rgb) / 0.34) !important;

  background:
    radial-gradient(
      120% 130% at 50% 0%,
      rgb(var(--mi-max-owner-rgb) / 0.12),
      rgba(255,255,255,0.00) 56%
    ),
    linear-gradient(
      180deg,
      rgba(255,255,255,0.04),
      rgba(255,255,255,0.00) 28%
    ),
    rgba(3, 8, 20, 0.62) !important;

  box-shadow:
    0 20px 40px rgba(0,0,0,0.48),
    0 0 26px rgb(var(--mi-max-owner-rgb) / 0.12),
    inset 0 1px 0 rgba(255,255,255,0.04) !important;
}

/* -----------------------------------------
   WINNING TEAM BLOCK: go loud on purpose
   ----------------------------------------- */
#verdictShell.mi-winner-a #miVerdictMetricsTile .mi-scorebug-team--a,
#verdictShell.mi-winner-b #miVerdictMetricsTile .mi-scorebug-team--b{
  background:
    radial-gradient(
      125% 125% at 50% 0%,
      rgb(var(--mi-max-owner-rgb) / 0.26),
      rgba(255,255,255,0.00) 54%
    ),
    linear-gradient(
      180deg,
      rgba(255,255,255,0.05),
      rgba(255,255,255,0.00) 34%
    ),
    rgba(2, 6, 23, 0.36) !important;

  border-color: rgba(255,255,255,0.96) !important;

  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.66),
    0 0 0 2px rgb(var(--mi-max-owner-rgb) / 0.34),
    0 0 30px rgb(var(--mi-max-owner-rgb) / 0.24),
    0 14px 28px rgba(0,0,0,0.32) !important;

  transform: translateY(-2px) scale(1.01);
}

/* losing side pushed back harder for contrast */
#verdictShell.mi-winner-a #miVerdictMetricsTile .mi-scorebug-team--b,
#verdictShell.mi-winner-b #miVerdictMetricsTile .mi-scorebug-team--a{
  opacity: 0.70 !important;
  filter: saturate(0.72) brightness(0.84) !important;
}

/* -----------------------------------------
   MADNESS DELTA TILE: let it catch some winner light
   ----------------------------------------- */
#verdictShell.mi-winner-a #miVerdictMetricsTile .mi-scorebug-gap,
#verdictShell.mi-winner-b #miVerdictMetricsTile .mi-scorebug-gap{
  background:
    radial-gradient(
      120% 120% at 50% 0%,
      rgb(var(--mi-max-owner-rgb) / 0.14),
      rgba(255,255,255,0.00) 58%
    ),
    rgba(2, 6, 23, 0.22) !important;

  border-color: rgb(var(--mi-max-owner-rgb) / 0.20) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 0 18px rgb(var(--mi-max-owner-rgb) / 0.08) !important;
}

/* =========================================================
   FIX: Scorecard button outline is using native browser chrome
   Force a fully custom button skin
   ========================================================= */

#verdictShell #miEvidenceToggle.mi-evidence-toggle{
  -webkit-appearance: none !important;
  appearance: none !important;

  border: 1px solid rgba(255,255,255,0.26) !important;
  outline: none !important;

  background-clip: padding-box !important;
  box-sizing: border-box !important;

  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.00) 42%),
    rgba(9,9,15,0.82) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 0 0 1px rgba(255,255,255,0.04),
    0 10px 24px rgba(0,0,0,0.34) !important;
}

/* Hover / focus remain fully custom too */
#verdictShell #miEvidenceToggle.mi-evidence-toggle:hover{
  border-color: rgba(255,255,255,0.34) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00) 42%),
    rgba(9,9,15,0.92) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.07),
    0 0 0 1px rgba(255,255,255,0.05),
    0 14px 30px rgba(0,0,0,0.40) !important;
}

#verdictShell #miEvidenceToggle.mi-evidence-toggle:focus-visible{
  outline: none !important;
  border-color: rgba(255,255,255,0.42) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 0 0 1px rgba(255,255,255,0.06),
    0 0 0 3px rgba(56,189,248,0.16),
    0 14px 30px rgba(0,0,0,0.40) !important;
}

/* TEAM CARD HEADER: logo + name vertical alignment fix */
#teamBrandA,
#teamBrandB,
.mi-team-brand--card {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px;
}

/* Make sure the logo doesn't sit on an inline-image baseline */
#teamLogoA,
#teamLogoB,
.mi-team-brand--card .mi-team-brand-logo {
  display: block !important;
  flex: 0 0 auto;
  align-self: center !important;
  position: relative;
}

/* Keep the text wrapper centered with the logo */
#teamBrandA .team-label-wrap,
#teamBrandB .team-label-wrap,
.mi-team-brand--card .team-label-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.team-card-header .mi-team-brand--card .mi-team-brand-logo{
  margin-right: 6px;
}

/* =========================================================
   SUMMARY SYNTHESIS — TERTIARY OWNERSHIP PASS
   Full paste-over replacement
   ========================================================= */

/* -----------------------------------------
   1) Core side tokens
   ----------------------------------------- */
#summarySection{
  --syn-a-rgb: var(--mi-brand-a-rgb, 148 163 184);
  --syn-b-rgb: var(--mi-brand-b-rgb, 148 163 184);

  --syn-a-secondary-rgb: var(--mi-brand-a-secondary-rgb, var(--syn-a-rgb));
  --syn-b-secondary-rgb: var(--mi-brand-b-secondary-rgb, var(--syn-b-rgb));

  --syn-a-tertiary-rgb: var(--mi-brand-a-tertiary-rgb, var(--syn-a-secondary-rgb, var(--syn-a-rgb)));
  --syn-b-tertiary-rgb: var(--mi-brand-b-tertiary-rgb, var(--syn-b-secondary-rgb, var(--syn-b-rgb)));

  --syn-a-ambient-rgb: var(--mi-brand-a-secondary-ambient-rgb, 220 230 240);
  --syn-b-ambient-rgb: var(--mi-brand-b-secondary-ambient-rgb, 220 230 240);

  --syn-a-tertiary-ambient-rgb: var(--mi-brand-a-tertiary-ambient-rgb, var(--syn-a-tertiary-rgb));
  --syn-b-tertiary-ambient-rgb: var(--mi-brand-b-tertiary-ambient-rgb, var(--syn-b-tertiary-rgb));

  --syn-a-wash:
    radial-gradient(
      150% 180% at 6% 0%,
      rgb(var(--syn-a-rgb) / 0.26),
      transparent 54%
    ),
    radial-gradient(
      120% 145% at 18% 10%,
      rgb(var(--syn-a-tertiary-rgb) / 0.14),
      transparent 42%
    ),
    linear-gradient(
      180deg,
      rgb(var(--syn-a-rgb) / 0.10),
      rgba(2,6,23,0.00) 64%
    );

  --syn-b-wash:
    radial-gradient(
      150% 180% at 94% 0%,
      rgb(var(--syn-b-rgb) / 0.26),
      transparent 54%
    ),
    radial-gradient(
      120% 145% at 82% 10%,
      rgb(var(--syn-b-tertiary-rgb) / 0.14),
      transparent 42%
    ),
    linear-gradient(
      180deg,
      rgb(var(--syn-b-rgb) / 0.10),
      rgba(2,6,23,0.00) 64%
    );
}

/* -----------------------------------------
   2) Structural table zoning
   ----------------------------------------- */
#summarySection .summary-synthesis-table{
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  isolation: isolate;
}

/* colgroup = subtle ownership lanes with tertiary undertone */
#summarySection .summary-synthesis-table colgroup col:nth-child(1),
#summarySection .summary-synthesis-table colgroup col:nth-child(2),
#summarySection .summary-synthesis-table colgroup col:nth-child(3){
  background:
    linear-gradient(
      180deg,
      rgb(var(--syn-a-rgb) / 0.045),
      rgb(var(--syn-a-tertiary-rgb) / 0.030)
    );
}

#summarySection .summary-synthesis-table colgroup col:nth-child(5),
#summarySection .summary-synthesis-table colgroup col:nth-child(6),
#summarySection .summary-synthesis-table colgroup col:nth-child(7){
  background:
    linear-gradient(
      180deg,
      rgb(var(--syn-b-rgb) / 0.045),
      rgb(var(--syn-b-tertiary-rgb) / 0.030)
    );
}

/* -----------------------------------------
   3) Base side ownership lanes
   ----------------------------------------- */
#summarySection .summary-synthesis-table .syn-label-a,
#summarySection .summary-synthesis-table .syn-val-a,
#summarySection .summary-synthesis-table .syn-final-a{
  border-color: rgb(var(--syn-a-rgb) / 0.30) !important;
  background-image: var(--syn-a-wash) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.02),
    inset 0 0 0 1px rgb(var(--syn-a-tertiary-rgb) / 0.07) !important;
}

#summarySection .summary-synthesis-table .syn-label-b,
#summarySection .summary-synthesis-table .syn-val-b,
#summarySection .summary-synthesis-table .syn-final-b{
  border-color: rgb(var(--syn-b-rgb) / 0.30) !important;
  background-image: var(--syn-b-wash) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.02),
    inset 0 0 0 1px rgb(var(--syn-b-tertiary-rgb) / 0.07) !important;
}

/* stronger center separator walls */
#summarySection .summary-synthesis-table tr > *:nth-child(4){
  border-left: 1px solid rgba(255,255,255,0.12) !important;
  border-right: 1px solid rgba(255,255,255,0.12) !important;
  box-shadow:
    inset 1px 0 0 rgba(255,255,255,0.04),
    inset -1px 0 0 rgba(255,255,255,0.04) !important;
}

/* -----------------------------------------
   4) Header row — logo + team name locked together
   ----------------------------------------- */
#summarySection .summary-synthesis-table .syn-team{
  position: relative;
  overflow: hidden;
  padding: 0 !important;
  filter: none !important;
  opacity: 1 !important;
}

#summarySection .summary-synthesis-table .mi-summary-team-head{
  width: 100%;
  min-width: 0;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 10px 14px 12px !important;
}

#summarySection .summary-synthesis-table .mi-team-brand--summary{
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;

  display: inline-grid !important;
  grid-template-columns: auto minmax(0, auto) !important;
  align-items: center !important;
  justify-content: center !important;
  column-gap: 10px !important;

  padding: 0 !important;
  margin: 0 auto !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

#summarySection .summary-synthesis-table .mi-team-brand--summary:has(.mi-team-brand-logo[hidden]){
  grid-template-columns: minmax(0, auto) !important;
}

#summarySection .summary-synthesis-table .mi-team-brand--summary .mi-team-brand-logo{
  width: 50px !important;
  height: 50px !important;
  display: block !important;
  object-fit: contain !important;
  margin: 0 !important;
  align-self: center !important;
  justify-self: center !important;

  filter:
    drop-shadow(0 0 10px rgba(255,255,255,0.04))
    drop-shadow(0 0 16px rgba(0,0,0,0.28));
}

#summarySection .summary-synthesis-table .mi-team-brand--summary .mi-team-brand-name{
  min-width: 0 !important;
  display: block !important;
  text-align: left !important;
  padding: 0 !important;
  margin: 0 !important;

  font-size: 15px !important;
  font-weight: 900 !important;
  letter-spacing: 0.01em !important;
  line-height: 1.05 !important;
  color: rgba(241,245,249,0.98) !important;
  text-shadow:
    0 1px 0 rgba(0,0,0,0.44),
    0 0 14px rgba(255,255,255,0.04) !important;
}

/* Header ownership shells */
#summarySection .summary-synthesis-table .syn-team-a{
  border-color: rgb(var(--syn-a-rgb) / 0.42) !important;
  background:
    radial-gradient(
      135% 170% at 6% 0%,
      rgb(var(--syn-a-rgb) / 0.24),
      transparent 58%
    ),
    radial-gradient(
      110% 145% at 16% 10%,
      rgb(var(--syn-a-tertiary-rgb) / 0.16),
      transparent 40%
    ),
    linear-gradient(
      90deg,
      rgb(var(--syn-a-rgb) / 0.10) 0%,
      rgb(var(--syn-a-tertiary-rgb) / 0.07) 34%,
      rgba(255,255,255,0.00) 58%
    ),
    linear-gradient(
      180deg,
      rgba(255,255,255,0.04),
      rgba(255,255,255,0.00) 30%
    ),
    rgba(4, 10, 24, 0.88) !important;

  box-shadow:
    inset 0 -1px 0 rgba(0,0,0,0.34),
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 0 24px rgb(var(--syn-a-tertiary-rgb) / 0.12) !important;
}

#summarySection .summary-synthesis-table .syn-team-b{
  border-color: rgb(var(--syn-b-rgb) / 0.42) !important;
  background:
    radial-gradient(
      135% 170% at 94% 0%,
      rgb(var(--syn-b-rgb) / 0.24),
      transparent 58%
    ),
    radial-gradient(
      110% 145% at 84% 10%,
      rgb(var(--syn-b-tertiary-rgb) / 0.16),
      transparent 40%
    ),
    linear-gradient(
      270deg,
      rgb(var(--syn-b-rgb) / 0.10) 0%,
      rgb(var(--syn-b-tertiary-rgb) / 0.07) 34%,
      rgba(255,255,255,0.00) 58%
    ),
    linear-gradient(
      180deg,
      rgba(255,255,255,0.04),
      rgba(255,255,255,0.00) 30%
    ),
    rgba(4, 10, 24, 0.88) !important;

  box-shadow:
    inset 0 -1px 0 rgba(0,0,0,0.34),
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 0 24px rgb(var(--syn-b-tertiary-rgb) / 0.12) !important;
}

/* subtle vertical team rails in headers */
#summarySection .summary-synthesis-table .syn-team-a::before,
#summarySection .summary-synthesis-table .syn-team-b::before{
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 999px;
  pointer-events: none;
}

#summarySection .summary-synthesis-table .syn-team-a::before{
  left: 10px;
  background:
    linear-gradient(
      180deg,
      rgb(var(--syn-a-tertiary-ambient-rgb) / 0.98),
      rgb(var(--syn-a-rgb) / 0.88)
    ) !important;
  box-shadow:
    0 0 10px rgb(var(--syn-a-tertiary-rgb) / 0.34),
    0 0 20px rgb(var(--syn-a-rgb) / 0.20) !important;
}

#summarySection .summary-synthesis-table .syn-team-b::before{
  left: 10px;
  background:
    linear-gradient(
      180deg,
      rgb(var(--syn-b-tertiary-ambient-rgb) / 0.98),
      rgb(var(--syn-b-rgb) / 0.88)
    ) !important;
  box-shadow:
    0 0 10px rgb(var(--syn-b-tertiary-rgb) / 0.34),
    0 0 20px rgb(var(--syn-b-rgb) / 0.20) !important;
}

/* -----------------------------------------
   5) Base final MI pillars
   ----------------------------------------- */
#summarySection .summary-synthesis-table tr > .syn-final:nth-child(3),
#summarySection .summary-synthesis-table tr > .syn-final:nth-child(5){
  border-radius: 16px !important;
}

#summarySection .summary-synthesis-table tr > .syn-final:nth-child(3){
  border-color: rgb(var(--syn-a-rgb) / 0.32) !important;
}

#summarySection .summary-synthesis-table tr > .syn-final:nth-child(5){
  border-color: rgb(var(--syn-b-rgb) / 0.32) !important;
}

#summarySection .summary-synthesis-table tr > .syn-final:nth-child(3) .syn-final-inner{
  background:
    radial-gradient(
      140% 150% at 8% 0%,
      rgb(var(--syn-a-rgb) / 0.16),
      transparent 58%
    ),
    radial-gradient(
      120% 140% at 18% 12%,
      rgb(var(--syn-a-tertiary-rgb) / 0.12),
      transparent 42%
    ),
    linear-gradient(
      180deg,
      rgb(var(--syn-a-rgb) / 0.10),
      rgba(2,6,23,0.82)
    ) !important;
  border-color: rgb(var(--syn-a-tertiary-rgb) / 0.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.03),
    0 0 0 1px rgb(var(--syn-a-tertiary-rgb) / 0.08) !important;
}

#summarySection .summary-synthesis-table tr > .syn-final:nth-child(5) .syn-final-inner{
  background:
    radial-gradient(
      140% 150% at 92% 0%,
      rgb(var(--syn-b-rgb) / 0.16),
      transparent 58%
    ),
    radial-gradient(
      120% 140% at 82% 12%,
      rgb(var(--syn-b-tertiary-rgb) / 0.12),
      transparent 42%
    ),
    linear-gradient(
      180deg,
      rgb(var(--syn-b-rgb) / 0.10),
      rgba(2,6,23,0.82)
    ) !important;
  border-color: rgb(var(--syn-b-tertiary-rgb) / 0.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.03),
    0 0 0 1px rgb(var(--syn-b-tertiary-rgb) / 0.08) !important;
}

/* -----------------------------------------
   6) Center narrative card — hard verdict-shell energy
   ----------------------------------------- */
#summarySection .summary-synthesis-table .syn-center{
  position: relative !important;
  overflow: visible !important;
  isolation: isolate !important;

  border: 1px solid rgba(255,255,255,0.14) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.03),
    0 12px 28px rgba(0,0,0,0.40) !important;
}

/* Team A winner center */
#summarySection .summary-synthesis-table .syn-center.mi-winner-a{
  border-color: rgba(255,255,255,0.74) !important;
  background:
    radial-gradient(
      140% 170% at 4% 0%,
      rgb(var(--syn-a-rgb) / 0.18),
      transparent 56%
    ),
    radial-gradient(
      115% 145% at 16% 12%,
      rgb(var(--syn-a-tertiary-rgb) / 0.16),
      transparent 38%
    ),
    linear-gradient(
      90deg,
      rgb(var(--syn-a-rgb) / 0.14) 0%,
      rgb(var(--syn-a-tertiary-rgb) / 0.10) 34%,
      rgba(2,6,23,0.00) 62%
    ),
    rgba(3,8,20,0.82) !important;

  box-shadow:
    inset 0 0 0 1px rgb(var(--syn-a-tertiary-rgb) / 0.24),
    0 0 0 1px rgba(255,255,255,0.14),
    -20px 0 42px rgb(var(--syn-a-tertiary-rgb) / 0.18),
    0 18px 40px rgba(0,0,0,0.44) !important;
}

#summarySection .summary-synthesis-table .syn-center.mi-winner-a::after{
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 8px;
  width: 7px;
  border-radius: 999px;

  background:
    linear-gradient(
      180deg,
      rgb(var(--syn-a-secondary-rgb) / 1) 0%,
      rgb(var(--syn-a-secondary-rgb) / 0.95) 45%,
      rgb(var(--syn-a-rgb) / 0.85) 100%
    ) !important;

  box-shadow:
    0 0 16px rgb(var(--syn-a-secondary-rgb) / 0.40),
    0 0 26px rgb(var(--syn-a-rgb) / 0.20) !important;
}

/* Team B winner center */
#summarySection .summary-synthesis-table .syn-center.mi-winner-b{
  border-color: rgba(255,255,255,0.74) !important;
  background:
    radial-gradient(
      140% 170% at 96% 0%,
      rgb(var(--syn-b-rgb) / 0.18),
      transparent 56%
    ),
    radial-gradient(
      115% 145% at 84% 12%,
      rgb(var(--syn-b-tertiary-rgb) / 0.16),
      transparent 38%
    ),
    linear-gradient(
      270deg,
      rgb(var(--syn-b-rgb) / 0.14) 0%,
      rgb(var(--syn-b-tertiary-rgb) / 0.10) 34%,
      rgba(2,6,23,0.00) 62%
    ),
    rgba(3,8,20,0.82) !important;

  box-shadow:
    inset 0 0 0 1px rgb(var(--syn-b-tertiary-rgb) / 0.24),
    0 0 0 1px rgba(255,255,255,0.14),
    20px 0 42px rgb(var(--syn-b-tertiary-rgb) / 0.18),
    0 18px 40px rgba(0,0,0,0.44) !important;
}

#summarySection .summary-synthesis-table .syn-center.mi-winner-b::after{
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  right: 8px;
  width: 7px;
  border-radius: 999px;
  background:
    linear-gradient(
      180deg,
      rgb(var(--syn-b-secondary-rgb) / 1) 0%,
      rgb(var(--syn-b-secondary-rgb) / 0.95) 45%,
      rgb(var(--syn-b-rgb) / 0.85) 100%
    ) !important;
  box-shadow:
    0 0 14px rgb(var(--syn-a-secondary-rgb) / 0.34),
    0 0 28px rgb(var(--syn-a-rgb) / 0.24) !important;
}

/* -----------------------------------------
   7) Winner / loser side saturation logic
   BODY rows only — headers stay vivid
   ----------------------------------------- */

/* ===== TEAM A WINS ===== */
#summarySection.mi-winner-a .summary-synthesis-table .syn-label-a,
#summarySection.mi-winner-a .summary-synthesis-table .syn-val-a,
#summarySection.mi-winner-a .summary-synthesis-table .syn-final-a{
  border-color: rgb(var(--syn-a-rgb) / 0.52) !important;
  background-image:
    radial-gradient(
      150% 180% at 6% 0%,
      rgb(var(--syn-a-rgb) / 0.28),
      transparent 58%
    ),
    radial-gradient(
      120% 145% at 18% 10%,
      rgb(var(--syn-a-tertiary-rgb) / 0.18),
      transparent 40%
    ),
    linear-gradient(
      180deg,
      rgb(var(--syn-a-rgb) / 0.15),
      rgba(2,6,23,0.00) 66%
    ) !important;
  box-shadow:
    inset 0 1px 0 rgb(var(--syn-a-tertiary-ambient-rgb) / 0.08),
    inset 0 0 0 1px rgb(var(--syn-a-tertiary-rgb) / 0.09),
    0 0 18px rgb(var(--syn-a-tertiary-rgb) / 0.08) !important;
  filter: saturate(1.20) brightness(1.04) !important;
  opacity: 1 !important;
}

#summarySection.mi-winner-a .summary-synthesis-table .syn-label-b,
#summarySection.mi-winner-a .summary-synthesis-table .syn-val-b,
#summarySection.mi-winner-a .summary-synthesis-table .syn-final-b{
  border-color: rgba(148,163,184,0.15) !important;
  background-image:
    linear-gradient(
      180deg,
      rgba(148,163,184,0.04),
      rgba(2,6,23,0.00) 66%
    ) !important;
  filter: saturate(0.52) brightness(0.84) !important;
  opacity: 0.76 !important;
}

#summarySection.mi-winner-a .summary-synthesis-table .syn-team-a{
  filter: none !important;
  opacity: 1 !important;
  box-shadow:
    inset 0 1px 0 rgb(var(--syn-a-tertiary-ambient-rgb) / 0.10),
    0 0 0 1px rgb(var(--syn-a-tertiary-rgb) / 0.16),
    -14px 0 32px rgb(var(--syn-a-tertiary-rgb) / 0.14),
    0 0 28px rgb(var(--syn-a-rgb) / 0.16) !important;
}

#summarySection.mi-winner-a .summary-synthesis-table .syn-team-b{
  filter: none !important;
  opacity: 1 !important;
  box-shadow:
    inset 0 1px 0 rgb(var(--syn-b-ambient-rgb) / 0.05),
    0 0 0 1px rgb(var(--syn-b-rgb) / 0.10),
    0 0 18px rgb(var(--syn-b-rgb) / 0.10) !important;
}

#summarySection.mi-winner-a .summary-synthesis-table tbody tr > .syn-final:nth-child(3) .syn-final-inner{
  border-color: rgba(255,255,255,0.62) !important;
  box-shadow:
    inset 0 1px 0 rgb(var(--syn-a-tertiary-ambient-rgb) / 0.10),
    0 0 0 1px rgb(var(--syn-a-tertiary-rgb) / 0.18),
    0 12px 24px rgb(var(--syn-a-tertiary-rgb) / 0.14) !important;
}

#summarySection.mi-winner-a .summary-synthesis-table tbody tr > .syn-final:nth-child(5) .syn-final-inner{
  filter: saturate(0.58) brightness(0.86) !important;
  opacity: 0.82 !important;
}

/* ===== TEAM B WINS ===== */
#summarySection.mi-winner-b .summary-synthesis-table .syn-label-b,
#summarySection.mi-winner-b .summary-synthesis-table .syn-val-b,
#summarySection.mi-winner-b .summary-synthesis-table .syn-final-b{
  border-color: rgb(var(--syn-b-rgb) / 0.52) !important;
  background-image:
    radial-gradient(
      150% 180% at 94% 0%,
      rgb(var(--syn-b-rgb) / 0.28),
      transparent 58%
    ),
    radial-gradient(
      120% 145% at 82% 10%,
      rgb(var(--syn-b-tertiary-rgb) / 0.18),
      transparent 40%
    ),
    linear-gradient(
      180deg,
      rgb(var(--syn-b-rgb) / 0.15),
      rgba(2,6,23,0.00) 66%
    ) !important;
  box-shadow:
    inset 0 1px 0 rgb(var(--syn-b-tertiary-ambient-rgb) / 0.10),
    inset 0 0 0 1px rgb(var(--syn-b-tertiary-rgb) / 0.09),
    0 0 18px rgb(var(--syn-b-tertiary-rgb) / 0.08) !important;
  filter: saturate(1.20) brightness(1.04) !important;
  opacity: 1 !important;
}

#summarySection.mi-winner-b .summary-synthesis-table .syn-label-a,
#summarySection.mi-winner-b .summary-synthesis-table .syn-val-a,
#summarySection.mi-winner-b .summary-synthesis-table .syn-final-a{
  border-color: rgba(148,163,184,0.15) !important;
  background-image:
    linear-gradient(
      180deg,
      rgba(148,163,184,0.04),
      rgba(2,6,23,0.00) 66%
    ) !important;
  filter: saturate(0.52) brightness(0.84) !important;
  opacity: 0.76 !important;
}

#summarySection.mi-winner-b .summary-synthesis-table .syn-team-b{
  filter: none !important;
  opacity: 1 !important;
  box-shadow:
    inset 0 1px 0 rgb(var(--syn-b-tertiary-ambient-rgb) / 0.10),
    0 0 0 1px rgb(var(--syn-b-tertiary-rgb) / 0.16),
    14px 0 32px rgb(var(--syn-b-tertiary-rgb) / 0.14),
    0 0 28px rgb(var(--syn-b-rgb) / 0.16) !important;
}

#summarySection.mi-winner-b .summary-synthesis-table .syn-team-a{
  filter: none !important;
  opacity: 1 !important;
  box-shadow:
    inset 0 1px 0 rgb(var(--syn-a-ambient-rgb) / 0.05),
    0 0 0 1px rgb(var(--syn-a-rgb) / 0.10),
    0 0 18px rgb(var(--syn-a-rgb) / 0.10) !important;
}

#summarySection.mi-winner-b .summary-synthesis-table tbody tr > .syn-final:nth-child(5) .syn-final-inner{
  border-color: rgba(255,255,255,0.62) !important;
  box-shadow:
    inset 0 1px 0 rgb(var(--syn-b-tertiary-ambient-rgb) / 0.10),
    0 0 0 1px rgb(var(--syn-b-tertiary-rgb) / 0.18),
    0 12px 24px rgb(var(--syn-b-tertiary-rgb) / 0.14) !important;
}

#summarySection.mi-winner-b .summary-synthesis-table tbody tr > .syn-final:nth-child(3) .syn-final-inner{
  filter: saturate(0.58) brightness(0.86) !important;
  opacity: 0.82 !important;
}

/* =====================================================================
   CRISP TEAM NAME — preserves team color, removes bloom blur
   ===================================================================== */

.team-card-header h2,
#analysisShell[data-lens] .team-card-header h2 {
  color: var(--team-primary) !important;
  text-shadow: none !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

.mi-team-brand--scorebug .mi-team-brand-name {
  color: var(--team-primary) !important;
  text-shadow: none !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

.mi-scorebug-team-name,
#miScorebugTeamA,
#miScorebugTeamB {
  text-shadow: none !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* Also neutralize the --text-glow variable fallback */
.mi-team-brand--scorebug,
.mi-scorebug-team--a,
.mi-scorebug-team--b {
  --text-glow: none;
}

#teamABrand .mi-team-brand .mi-team-brand--card {
  padding: 2px;
}

#teamBBrand .mi-team-brand .mi-team-brand--card {
  padding: 2px;
}

/* =========================================================
   SUMMARY SECTION — TEAM NAME COLOR INJECTION (CANONICAL)
   Match scorebug / team-card branding behavior
   ========================================================= */

#summarySection .summary-header-head .mi-team-brand-name{
  font-weight: 700;
  letter-spacing: 0.01em;

  /* shared visual identity */
  text-shadow:
    0 0 6px rgb(var(--team-a-primary-rgb, 148 163 184) / 0.28),
    0 0 14px rgb(var(--team-a-primary-rgb, 148 163 184) / 0.18);
}

/* TEAM A */

#summarySection.mi-winner-a #summaryTeamA,
#summarySection #summaryTeamA{
  color: rgb(var(--team-a-primary-rgb, 148 163 184)) !important;

  text-shadow:
    0 0 6px rgb(var(--team-a-primary-rgb, 148 163 184) / 0.30),
    0 0 14px rgb(var(--team-a-primary-rgb, 148 163 184) / 0.20);
}

/* TEAM B */

#summarySection.mi-winner-b #summaryTeamB,
#summarySection #summaryTeamB{
  color: rgb(var(--team-b-primary-rgb, 148 163 184)) !important;

  text-shadow:
    0 0 6px rgb(var(--team-b-primary-rgb, 148 163 184) / 0.30),
    0 0 14px rgb(var(--team-b-primary-rgb, 148 163 184) / 0.20);
}

#summarySection.mi-winner-a #summaryTeamA,
#summarySection #summaryTeamA,
#summarySection.mi-winner-b #summaryTeamB,
#summarySection #summaryTeamB{
  font-size: 18px !important;
  font-weight: 750 !important;
}

/* =========================================================
   SUMMARY TEAMHEAD — READABILITY BOOST
   ========================================================= */

#summarySection .mi-summary-team-head .mi-team-brand-name{

  /* existing color stays */

  text-shadow:

    /* crisp edge */
    0 0 0.5px rgba(0,0,0,0.95),
    0 0 1px rgba(0,0,0,0.90),

    /* soft glow */
    0 0 6px currentColor,
    0 0 14px currentColor;
}

#summarySection .mi-summary-team-head{

  background:

    linear-gradient(
      180deg,
      rgba(255,255,255,0.06),
      rgba(255,255,255,0.00) 55%
    ),

    linear-gradient(
      90deg,
      rgba(255,255,255,0.04),
      rgba(255,255,255,0.00) 60%
    );

  border-radius: 10px;
}

#summarySection .mi-summary-team-head{
  filter: brightness(1.08) saturate(1.05);
}

#datasetCard .round-step-label {
  margin-bottom: 8px;
  margin-top: 4px;
  z-index: 1;
  font-size: 0.98rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
  color: var(--mi-text-primary);
}

#preMatchupHub .round-step-label {
  margin-bottom: 0;
  margin-top: 4px;
  z-index: 1;
  font-size: 0.98rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
  color: var(--mi-text-primary);
}

/* =========================================================
   MATCHUP BAR — QUICK EDIT CENTER STACK
   Dataset / Round / Actions layout
   ========================================================= */

#matchupBar.is-editing .matchup-bar-center{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}

/* ---------------------------------------------------------
   DATASET SELECTOR
   --------------------------------------------------------- */

#matchupBar.is-editing .matchup-quick-dataset{
  width: 100%;
  max-width: 320px;
  display: flex;
  justify-content: center;

}

#matchupBar.is-editing .quick-dataset-select{
  width: 100%;
}

#matchupBar.is-editing #datasetSelectQuick{
  width: 100%;
  max-width: 320px;
}

/* ---------------------------------------------------------
   ROUND + SANDBOX ROW
   --------------------------------------------------------- */

#matchupBar.is-editing .matchup-quick-round{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/* ---------------------------------------------------------
   RUN / CANCEL ROW
   --------------------------------------------------------- */

#matchupBar.is-editing .matchup-quick-actions{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 2px;
}

/* =========================================================
   VERDICT METRICS TILE BACK — STRONG WINNER OWNERSHIP
   Same selector (confirmed working), just much more assertive
   ========================================================= */

#verdictShell.mi-winner-a #miVerdictMetricsTile .tile-back,
#verdictShell.mi-winner-b #miVerdictMetricsTile .tile-back{

  /* Stronger, more visible color field */
  background:
    radial-gradient(
      150% 135% at var(--mi-owner-hero-x, 50%) -8%,
      rgb(var(--mi-owner-rgb, 148 163 184) / 0.38) 0%,
      rgb(var(--mi-owner-rgb, 148 163 184) / 0.18) 26%,
      rgba(255,255,255,0.00) 62%
    ),

    linear-gradient(
      180deg,
      rgb(var(--mi-owner-secondary-rgb, 148 163 184) / 0.22) 0%,
      rgb(var(--mi-owner-secondary-rgb, 148 163 184) / 0.10) 18%,
      rgba(255,255,255,0.00) 42%
    ),

    /* keep your base dark surface */
    rgba(6, 8, 16, 0.94) !important;

  /* More visible ownership edge */
  border-color: rgb(var(--mi-owner-rgb, 148 163 184) / 0.48) !important;

  /* Broadcast-style glow + inner frame */
  box-shadow:
    inset 0 0 0 1px rgb(var(--mi-owner-rgb, 148 163 184) / 0.22),
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 0 32px rgb(var(--mi-owner-rgb, 148 163 184) / 0.24),
    0 14px 32px rgba(0,0,0,0.42) !important;

  transition:
    background 240ms ease,
    border-color 240ms ease,
    box-shadow 240ms ease;
}


/* Title glow — now clearly "winner owned" */
#verdictShell.mi-winner-a #miVerdictMetricsTile .tile-back .mi-metrics-back-title,
#verdictShell.mi-winner-b #miVerdictMetricsTile .tile-back .mi-metrics-back-title{

  text-shadow:
    0 2px 12px rgba(0,0,0,0.42),
    0 0 22px rgb(var(--mi-owner-rgb, 148 163 184) / 0.42);
}


/* Body text readability */
#verdictShell.mi-winner-a #miVerdictMetricsTile .tile-back .mi-metrics-back-text,
#verdictShell.mi-winner-b #miVerdictMetricsTile .tile-back .mi-metrics-back-text{

  text-shadow:
    0 1px 10px rgba(0,0,0,0.36);
}

@media (max-width: 768px){
  #verdictShell.mi-winner-a #miVerdictMetricsTile .tile-back,
  #verdictShell.mi-winner-b #miVerdictMetricsTile .tile-back{
    background:
      radial-gradient(
        140% 128% at var(--mi-owner-hero-x, 50%) 0%,
        rgb(var(--mi-owner-rgb, 148 163 184) / 0.20) 0%,
        rgb(var(--mi-owner-rgb, 148 163 184) / 0.09) 30%,
        rgba(255,255,255,0.00) 60%
      ),
      linear-gradient(
        180deg,
        rgb(var(--mi-owner-secondary-rgb, 148 163 184) / 0.09) 0%,
        rgba(255,255,255,0.02) 20%,
        rgba(255,255,255,0.00) 38%
      ),
      rgba(7, 10, 18, 0.92) !important;
  }
}

/* Flip container border uses each card's team primary color */
#cindCard .flip-inner,
#favCard .flip-inner {
  border: 2px solid rgba(var(--team-secondary-rgb) / 0.85);
  border-radius: inherit;
  box-sizing: border-box;
}


/* Front face border uses the team secondary color (optional contrast) */
#cindCard .card-face.card-front,
#favCard .card-face.card-front {
  border: 8px solid rgba(var(--team-primary-rgb) / 0.85);
  border-radius: inherit;
  box-sizing: border-box;
}

/* =========================================================
   VERDICT → TEAM CARDS SECTION BREAK
   Creates a deliberate transition between #verdictShell and #analysisShell
   ========================================================= */

#analysisShell{
  position: relative;
  margin-top: 20px;
  padding-top: 18px;
}

/* Divider rail + soft fade so the team-card zone feels like a new section */
#analysisShell::before{
  content: "";
  position: absolute;
  top: 0;
  left: 18px;
  right: 18px;
  height: 1px;
  pointer-events: none;

  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(148,163,184,0.16) 18%,
    rgba(255,255,255,0.22) 50%,
    rgba(148,163,184,0.16) 82%,
    transparent 100%
  );

  box-shadow:
    0 0 12px rgba(56,189,248,0.10),
    0 1px 0 rgba(0,0,0,0.30);
}

/* Soft atmosphere break under the divider */
#analysisShell::after{
  content: "";
  position: absolute;
  top: 1px;
  left: 10px;
  right: 10px;
  height: 26px;
  pointer-events: none;

  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.03) 0%,
    rgba(56,189,248,0.035) 18%,
    rgba(2,6,23,0.00) 100%
  );

  border-radius: 18px;
}

/* Let the scorecard row breathe a little more below the divider */
#analysisShell #result.result-layout{
  position: relative;
  z-index: 1;
}

.subtotal-row.profile-subtotal-row {
  justify-content: space-between;
}

/* ================================
   Custom Dataset Dropdown
   ================================ */

.dataset-select-wrap {
  position: relative;
}

.dataset-select-wrap > select#datasetSelect {
  position: absolute !important;
  inset: 0 auto auto 0;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.mi-dataset-dd {
  position: relative;
  width: 100%;
}

.mi-dataset-dd-trigger {
  width: 100%;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
}

.mi-dataset-dd-label {
  display: block;
  min-width: 0;
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

.mi-dataset-dd-chevron {
  flex: 0 0 auto;
  transition: transform 0.18s ease;
}

.mi-dataset-dd.is-open .mi-dataset-dd-chevron {
  transform: rotate(180deg);
}

.mi-dataset-dd-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 2000000000000000;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  max-height: 320px;
  overflow-y: auto;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(10, 18, 40, 0.98), rgba(8, 14, 32, 0.98));
  border: 1px solid rgba(90, 140, 220, 0.22);
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(255, 255, 255, 0.03) inset;
  backdrop-filter: blur(12px);
}

.mi-dataset-dd-option {
  width: 100%;
  min-height: 42px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  color: rgba(235, 242, 255, 0.92);
  font: inherit;
  line-height: 1.2;
  transition:
    background 0.16s ease,
    border-color 0.16s ease,
    transform 0.16s ease,
    color 0.16s ease;
}

.mi-dataset-dd-option:hover,
.mi-dataset-dd-option:focus-visible {
  background: rgba(64, 136, 255, 0.10);
  border-color: rgba(88, 160, 255, 0.28);
  color: #ffffff;
  outline: none;
}

.mi-dataset-dd-option.is-selected {
  background: rgba(44, 190, 120, 0.12);
  border-color: rgba(44, 190, 120, 0.34);
  color: #ffffff;
  font-weight: 700;
}

.mi-dataset-dd.is-placeholder .mi-dataset-dd-label {
  opacity: 0.82;
}

#resumeTileA .mi-flip-hint {
  margin-top: 40px;
}

#resumeTileB .mi-flip-hint {
  margin-top: 40px;
}

#resumeTileA .tile-face.tile-front,
#resumeTileB .tile-face.tile-front {
  justify-content: flex-start;
  align-items: stretch;
  padding-top: 14px;
  padding-bottom: 10px;
  min-height: 0;
}

.profile-subtotal-row .subtotal-main {
  flex: 0 0 auto;
  width: fit-content;
  align-content: center;
  justify-content: center;
  text-align: center;
}

section.profile-section.flip-tile .subtotal-row.profile-subtotal-row {
  justify-content: center !important;
  gap: 12px;
}

.profile-section.flip-tile .subtotal-row.profile-subtotal-row {
  justify-content: center !important;
  gap: 12px;
}

.profile-section.flip-tile .subtotal-row.profile-subtotal-row > * {
  flex: 0 0 auto;
}

.profile-subtotal-row {
  display: grid !important;
  grid-template-columns: max-content max-content !important;
  justify-content: center !important;
  width: fit-content !important;
  margin: 0 auto !important;
  column-gap: 48px !important;
}

.profile-subtotal-row .subtotal-main {
  position: relative;
  isolation: isolate;
  z-index: 0;
  padding: 12px 16px 12px 16px;
  border-radius: 18px;
  overflow: visible;
}

.profile-subtotal-row .subtotal-main::before {
  content: "";
  position: absolute;
  inset: -8px -12px;
  z-index: -1;
  pointer-events: none;
  border-radius: 20px;

  background:
    radial-gradient(circle at 50% 18%, rgba(110, 200, 255, 0.26) 0%, rgba(110, 200, 255, 0.10) 26%, transparent 62%),
    radial-gradient(circle at 15% 50%, rgba(30, 144, 255, 0.18) 0%, transparent 58%),
    radial-gradient(circle at 85% 50%, rgba(56, 189, 248, 0.16) 0%, transparent 58%),
    linear-gradient(180deg, rgba(14, 24, 46, 0.96) 0%, rgba(8, 15, 32, 0.96) 100%);

  border: 1px solid rgba(95, 180, 255, 0.42);

  box-shadow:
    0 0 0 1px rgba(145, 220, 255, 0.20) inset,
    0 0 20px rgba(56, 189, 248, 0.20),
    0 0 42px rgba(37, 99, 235, 0.18),
    0 10px 24px rgba(0, 0, 0, 0.42),
    0 2px 0 rgba(255, 255, 255, 0.05) inset;

  opacity: 1;
}

.profile-subtotal-row .subtotal-main::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  pointer-events: none;
  border-radius: 18px;
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.14) 0%,
      rgba(255, 255, 255, 0.03) 22%,
      rgba(255, 255, 255, 0.00) 45%,
      rgba(90, 180, 255, 0.08) 100%
    );
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  padding: 1px;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.profile-subtotal-row .subtotal-main > span:first-child {
  position: relative;
  z-index: 1;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.05);
}

.profile-subtotal-row .subtotal-main .subtotal-value {
  position: relative;
  z-index: 1;
  text-shadow:
    0 0 10px rgba(255, 255, 255, 0.08),
    0 0 18px rgba(96, 165, 250, 0.18);
}

/* =========================================
   SHARE / SAVE MATCHUP ACTION BUTTONS
   ========================================= */

/* Allow 3+ actions in this row without crowding */
.matchup-actions-row {
  flex-wrap: wrap;
}

/* Shared style for the two new action buttons */
#shareMatchupBtn,
#saveMatchupImageBtn {
  min-width: 132px;
  justify-content: center;

  border: 1px solid rgba(148, 163, 184, 0.34);
  color: var(--mi-text-primary);
  background:
    linear-gradient(
      180deg,
      rgba(15, 23, 42, 0.72) 0%,
      rgba(2, 6, 23, 0.86) 100%
    );

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.03),
    0 6px 16px rgba(2, 6, 23, 0.45);

  transition:
    transform 0.16s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    opacity 0.2s ease;
}

#shareMatchupBtn:hover,
#saveMatchupImageBtn:hover {
  transform: translateY(-1px);
  border-color: rgba(125, 211, 252, 0.55);
  color: #e6f3ff;
  box-shadow:
    inset 0 0 0 1px rgba(125, 211, 252, 0.14),
    0 0 0 2px rgba(56, 189, 248, 0.12),
    0 12px 24px rgba(2, 132, 199, 0.18);
}

#shareMatchupBtn:active,
#saveMatchupImageBtn:active {
  transform: translateY(0);
}

/* Disabled state is critical while no matchup result exists */
#shareMatchupBtn:disabled,
#saveMatchupImageBtn:disabled {
  opacity: 0.48;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  border-color: rgba(100, 116, 139, 0.35);
  color: rgba(148, 163, 184, 0.72);
}

/* =========================================================
   MATCHUP BAR — INTERACTION SAFETY OVERRIDES
   Put at very bottom of styles2.css
   Goal: keep decorative layers from stealing clicks and
   guarantee the quick-edit action row is a real interactive layer.
   ========================================================= */

/* Decorative shells should never intercept clicks/taps */
#matchupBar::before,
#matchupBar::after,
#matchupBar .mi-matchup-backplate::before,
#matchupBar .mi-matchup-backplate::after,
#matchupBar .mi-matchup-dock::before,
#matchupBar .mi-matchup-dock::after,
#matchupBar .matchup-bar-main::before,
#matchupBar .matchup-bar-main::after {
  pointer-events: none !important;
}

/* Keep actual controls interactive */
#matchupBar .matchup-bar-main,
#matchupBar .matchup-bar-left,
#matchupBar .matchup-bar-center,
#matchupBar .matchup-bar-right,
#matchupBar .matchup-quick-slot,
#matchupBar .matchup-quick-actions,
#matchupBar #editMatchupBtn,
#matchupBar #matchupQuickRun,
#matchupBar #matchupQuickCancel {
  pointer-events: auto !important;
}

/* Quick-edit action row must sit above decorative shell layers */
#matchupBar.is-editing .matchup-quick-actions {
  position: relative !important;
  z-index: 2305 !important;
}

/* Action buttons themselves get their own stacking context */
#matchupBar.is-editing #matchupQuickRun,
#matchupBar.is-editing #matchupQuickCancel,
#matchupBar:not(.is-editing) #editMatchupBtn {
  position: relative !important;
  z-index: 2310 !important;
  pointer-events: auto !important;
}

/* Prevent hidden rest-state action row from occupying an interaction layer */
#matchupBar:not(.is-editing) .matchup-quick-actions {
  display: none !important;
  pointer-events: none !important;
}

/* Keep quick-edit shell open for floating controls */
#matchupBar.is-editing,
#matchupBar.is-editing .mi-matchup-dock,
#matchupBar.is-editing .matchup-bar-main {
  overflow: visible !important;
}

.mi-team-dd-search {
  border-radius: inherit !important;
}

/* Dataset dropdown — hovered row should own the green highlight */
.mi-dataset-dd-option:hover,
.mi-dataset-dd-option:focus-visible {
  background: linear-gradient(
    180deg,
    rgba(16, 185, 129, 0.20),
    rgba(16, 185, 129, 0.12)
  ) !important;
  border-color: rgba(16, 185, 129, 0.55) !important;
  color: rgba(255, 255, 255, 0.98) !important;
}

/* Keep selected row styled, but less dominant than hover */
.mi-dataset-dd-option.is-selected[aria-selected="true"] {
  background: rgba(16, 185, 129, 0.10) !important;
  border-color: rgba(16, 185, 129, 0.30) !important;
}

/* If the selected row is hovered, let hover fully take over */
.mi-dataset-dd-option.is-selected[aria-selected="true"]:hover,
.mi-dataset-dd-option.is-selected[aria-selected="true"]:focus-visible {
  background: linear-gradient(
    180deg,
    rgba(16, 185, 129, 0.22),
    rgba(16, 185, 129, 0.14)
  ) !important;
  border-color: rgba(16, 185, 129, 0.60) !important;
}

#datasetQuickSelectWrap .mi-dataset-dd-panel .mi-dataset-dd-option:hover,
#datasetSelectQuickUi .mi-dataset-dd-panel .mi-dataset-dd-option:hover {
  background: linear-gradient(
    180deg,
    rgba(16, 185, 129, 0.22),
    rgba(16, 185, 129, 0.14)
  ) !important;
  border-color: rgba(16, 185, 129, 0.60) !important;
}

#preSetupRow:has(#mcRow1.is-primary-entry) #datasetCard .or-divider,
#preSetupRow:has(#mcRow1.is-primary-entry) #datasetCard .file-label.file-label--manual,
#preSetupRow:has(#mcRow2.is-primary-entry) #datasetCard .or-divider,
#preSetupRow:has(#mcRow2.is-primary-entry) #datasetCard .file-label.file-label--manual,
#preSetupRow:has(#mcRow3.is-primary-entry) #datasetCard .or-divider,
#preSetupRow:has(#mcRow3.is-primary-entry) #datasetCard .file-label.file-label--manual {
  display: none !important;
}

#entry-screen #miInstallBtn,
#entry-screen #miInstallHelp {
  display: none !important;
}

/* =========================================================
   HARD-OVERLAY FIX: desktop/global dropdown opacity + priority
   ========================================================= */

.mi-dataset-dd,
.mi-quick-select,
#matchupQuickSlot,
#matchupQuickDataset,
#matchupBar,
#matchupBar .matchup-bar-main {
  isolation: isolate;
}

.mi-dataset-dd.is-open,
.mi-quick-select.is-open,
.mi-quick-select[aria-expanded="true"],
.mi-dataset-dd[aria-expanded="true"] {
  z-index: 2147482000 !important;
}

.mi-dataset-dd-panel,
.mi-quick-select-menu,
.mi-quick-select-panel,
.mi-select-menu,
.mi-select-panel {
  z-index: 2147483000 !important;

  background: rgb(10, 18, 40) !important;
  background-image: none !important;
  opacity: 1 !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
  mix-blend-mode: normal !important;

  box-shadow:
    0 22px 54px rgba(0, 0, 0, 0.62),
    0 8px 22px rgba(0, 0, 0, 0.42) !important;

  border: 1px solid rgba(90, 140, 220, 0.32) !important;
}

.mi-dataset-dd.is-open .mi-dataset-dd-panel,
.mi-quick-select.is-open .mi-quick-select-menu,
.mi-quick-select.is-open .mi-quick-select-panel,
.mi-quick-select[aria-expanded="true"] .mi-quick-select-menu,
.mi-quick-select[aria-expanded="true"] .mi-quick-select-panel {
  opacity: 1 !important;
  visibility: visible;

  background: rgb(10, 18, 40) !important;
  background-image: none !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
}

#mi-entry-screen.is-hidden #miInstallBtn,
#mi-entry-screen.is-hidden #miInstallHelp {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* =========================================================
   ENTRY SCREEN: once hidden, it must be completely inert
   ========================================================= */

#mi-entry-screen[hidden],
#mi-entry-screen.is-hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: none !important;
  filter: none !important;
}

#mi-entry-screen[hidden] *,
#mi-entry-screen.is-hidden * {
  pointer-events: none !important;
}

/* =========================================================
   DATASET DROPDOWN MUST OUTRANK QUICK ACTIONS / CENTER LAYERS
   ========================================================= */

/* Let the matchup bar and its children allow overlays */
#matchupBar,
#matchupBar .matchup-bar-main,
#matchupQuickDataset,
#matchupQuickRound,
#matchupQuickActions,
#matchupQuickSlot {
  overflow: visible !important;
}

/* Baseline positioning so z-index can actually apply */
#matchupQuickDataset,
#matchupQuickRound,
#matchupQuickActions,
#matchupQuickSlot,
.mi-dataset-dd,
.mi-dataset-dd-panel {
  position: relative;
}

/* The quick actions area is currently winning.
   Keep it lower unless specifically needed above something else. */
#matchupQuickActions,
.matchup-quick-actions {
  z-index: 20 !important;
}

/* Dataset slot sits above normal siblings */
#matchupQuickDataset,
#matchupQuickSlot {
  z-index: 40 !important;
}

/* When dataset dropdown is open, elevate the WHOLE BRANCH */
#matchupQuickDataset:has(.mi-dataset-dd.is-open),
#matchupQuickSlot:has(.mi-dataset-dd.is-open),
.mi-dataset-dd.is-open {
  z-index: 5000 !important;
}

/* The actual panel sits above everything inside that raised branch */
.mi-dataset-dd.is-open .mi-dataset-dd-panel,
.mi-dataset-dd-panel {
  position: absolute !important;
  z-index: 5001 !important;
}

/* =========================================
   VERDICT INLINE ACTIONS — SIDE BY SIDE
   ========================================= */

#miVerdictInlineActions.mi-verdict-inline-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;

  /* place under the copy column */
  width: fit-content;
  margin-top: 18px;
  margin-left: clamp(170px, 18vw, 210px);

  padding-top: 0;
  border-top: none;
  align-self: flex-start;
}

#miVerdictInlineActions .mi-verdict-action-btn {
  min-height: 44px;
  min-width: 0;
  padding: 10px 16px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 999px;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  flex: 0 0 auto;

  color: rgba(226, 232, 240, 0.94);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015)),
    rgba(2, 6, 23, 0.58);
  border: 1px solid rgba(148, 163, 184, 0.22);

  box-shadow:
    0 10px 22px rgba(0,0,0,0.38),
    inset 0 1px 0 rgba(255,255,255,0.05);

  transition:
    transform 160ms ease,
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease,
    color 160ms ease;
}

#miVerdictInlineActions .mi-verdict-action-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  color: rgba(241, 245, 249, 0.98);
  border-color: rgba(56, 189, 248, 0.40);
  background:
    linear-gradient(180deg, rgba(56,189,248,0.10), rgba(255,255,255,0.03)),
    rgba(2, 6, 23, 0.7);
  box-shadow:
    0 14px 28px rgba(0,0,0,0.44),
    0 0 18px rgba(56,189,248,0.10),
    inset 0 1px 0 rgba(255,255,255,0.06);
}

#miVerdictInlineActions .mi-verdict-action-btn:focus-visible {
  outline: none;
  border-color: rgba(56, 189, 248, 0.55);
  box-shadow:
    0 0 0 3px rgba(56, 189, 248, 0.16),
    0 14px 28px rgba(0,0,0,0.44),
    inset 0 1px 0 rgba(255,255,255,0.06);
}

#miVerdictInlineActions .mi-verdict-action-btn:disabled {
  opacity: 0.56;
  cursor: not-allowed;
  transform: none;
  box-shadow:
    0 8px 18px rgba(0,0,0,0.24),
    inset 0 1px 0 rgba(255,255,255,0.03);
}

/* =========================================================
   TEAM CARD — MID-HEAVY BORDER STACK
   Secondary = dominant outer frame
   Tertiary  = visible separator with light fill
   Primary   = strong inner branded accent
   ========================================================= */

#cindCard,
#favCard{
  --mi-card-radius: 26px;

  /* thicker than production-light, thinner than nuclear */
  --mi-border-outer: 7px;
  --mi-border-middle: 4px;
  --mi-border-inner: 5px;
}

/* ---------------------------------------------------------
   OUTER SHELL — SECONDARY COLOR
   --------------------------------------------------------- */

#cindCard,
#favCard{
  border:
    var(--mi-border-outer)
    solid
    var(--team-secondary, #ffffff) !important;

  border-radius:
    var(--mi-card-radius) !important;

  box-shadow: none !important;
  background-clip: padding-box !important;
}

/* ---------------------------------------------------------
   MIDDLE FRAME — TERTIARY COLOR
   Visible enough to separate layers, but still subordinate
   --------------------------------------------------------- */

#cindCard > .flip-inner,
#favCard > .flip-inner{
  border:
    var(--mi-border-middle)
    solid
    rgb(var(--team-tertiary-rgb, 255 255 255) / 0.72) !important;

  border-radius:
    calc(
      var(--mi-card-radius)
      - var(--mi-border-outer)
    ) !important;

  /* enough fill to kill the dark seam */
  background:
    rgb(var(--team-tertiary-rgb, 255 255 255) / 0.18) !important;

  box-shadow: none !important;
  background-clip: padding-box !important;
}

/* ---------------------------------------------------------
   INNER PRINTED FACE — PRIMARY COLOR
   --------------------------------------------------------- */

#cindCard > .flip-inner > .card-face.card-front,
#favCard > .flip-inner > .card-face.card-front{
  border:
    var(--mi-border-inner)
    solid
    var(--team-primary, #ffffff) !important;

  border-radius:
    calc(
      var(--mi-card-radius)
      - var(--mi-border-outer)
      - var(--mi-border-middle)
    ) !important;

  box-shadow: none !important;
  background-clip: padding-box !important;
}

/* =========================================================
   TEAM CARD — PREMIUM TRI-COLOR BLENDED FRAME SYSTEM
   Purpose:
   Create a broadcast-quality, layered frame that blends
   secondary → tertiary → primary without harsh stripes.
   ========================================================= */

/* -----------------------------------------
   SHARED GEOMETRY
   ----------------------------------------- */

#cindCard,
#favCard{
  /* keep radius math unified across all nested layers */
  --mi-card-radius: 22px;

  position: relative;
  border-radius: var(--mi-card-radius);

  /* Core surface remains intact */
  overflow: visible;

  /* OUTER FRAME — secondary-led */
  border: 2.5px solid
    rgb(var(--team-secondary-rgb) / 0.78);

  /* subtle secondary dominance with tertiary lift */
  box-shadow:

    /* atmospheric outer presence */
    0 0 0 1px
      rgb(var(--team-secondary-rgb) / 0.28),

    /* tertiary soft halo (never dominant) */
    0 10px 26px
      rgb(var(--team-tertiary-ambient-rgb) / 0.22),

    /* base depth */
    var(--mi-depth-1);
}

/* -----------------------------------------
   OUTER ATMOSPHERIC BLEND
   secondary dominant
   tertiary supportive
   ----------------------------------------- */

#cindCard::before,
#favCard::before{
  content: "";
  position: absolute;
  inset: 0;

  border-radius: inherit;
  pointer-events: none;
  z-index: 0;

  background:

    radial-gradient(
      140% 120% at 50% -10%,
      rgb(var(--team-secondary-ambient-rgb) / 0.16),
      transparent 62%
    ),

    radial-gradient(
      120% 140% at 100% 0%,
      rgb(var(--team-tertiary-ambient-rgb) / 0.12),
      transparent 68%
    );

  opacity: 0.95;
}

/* -----------------------------------------
   MIDDLE LAYER — tertiary blending seam
   ----------------------------------------- */

#cindCard > .flip-inner,
#favCard > .flip-inner{
  position: relative;

  border-radius:
    calc(var(--mi-card-radius) - 2px);

  background:

    linear-gradient(
      180deg,
      rgb(var(--team-tertiary-rgb) / 0.10),
      transparent 42%
    ),

    transparent;

  box-shadow:

    /* subtle tertiary separator ring */
    inset 0 0 0 1px
      rgb(var(--team-tertiary-rgb) / 0.32),

    /* gentle tertiary ambient lift */
    inset 0 12px 18px
      rgb(var(--team-tertiary-ambient-rgb) / 0.10);
}

/* -----------------------------------------
   INNER FACE — primary identity edge
   ----------------------------------------- */

#cindCard > .flip-inner > .card-face.card-front,
#favCard > .flip-inner > .card-face.card-front{

  border-radius:
    calc(var(--mi-card-radius) - 4px);

  position: relative;

  box-shadow:

    /* PRIMARY identity ring */
    inset 0 0 0 2px
      rgb(var(--team-primary-rgb) / 0.82),

    /* subtle tertiary softener */
    inset 0 0 0 3px
      rgb(var(--team-tertiary-rgb) / 0.28),

    /* internal lighting */
    inset 0 18px 24px
      rgb(var(--team-primary-rgb) / 0.06);
}

/* -----------------------------------------
   PRIMARY EDGE SHEEN
   ----------------------------------------- */

#cindCard
  > .flip-inner
  > .card-face.card-front::after,

#favCard
  > .flip-inner
  > .card-face.card-front::after{

  content: "";
  position: absolute;

  inset: 0;

  border-radius: inherit;
  pointer-events: none;

  background:

    linear-gradient(
      180deg,
      rgb(var(--team-primary-rgb) / 0.12),
      transparent 38%
    );

  opacity: 0.85;
}

/* -----------------------------------------
   HOVER — restrained premium lift
   ----------------------------------------- */

#cindCard:hover,
#favCard:hover{

  transform: translateY(-1px);

  box-shadow:

    0 0 0 1px
      rgb(var(--team-secondary-rgb) / 0.32),

    0 14px 34px
      rgb(var(--team-secondary-ambient-rgb) / 0.28),

    var(--mi-depth-2);
}

/* =========================================================
   TEAM CARD BACKDROP — EXTREME TRANSPARENCY TEST
   Purpose:
   Maximum visibility test for dark team primaries.
   This is intentionally aggressive.
   ========================================================= */

/* -----------------------------------------
   PRIMARY BACKDROP SURFACE
   ----------------------------------------- */

.analysis-shell,
.context-panel,
.card-backplate{

  background:
    linear-gradient(
      180deg,
      rgba(2, 6, 23, 0.16),
      rgba(2, 6, 23, 0.10)
    ) !important;

  backdrop-filter: blur(4px) saturate(0.92) !important;
  -webkit-backdrop-filter: blur(4px) saturate(0.92) !important;

  box-shadow:
    0 6px 18px rgba(0,0,0,0.16) !important,
    inset 0 0 0 1px rgba(255,255,255,0.035) !important;
}

/* -----------------------------------------
   INNER PANEL LAYER
   ----------------------------------------- */

.analysis-shell section,
.context-panel section{

  background:
    linear-gradient(
      180deg,
      rgba(2, 6, 23, 0.08),
      rgba(2, 6, 23, 0.04)
    ) !important;

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.025) !important;
}

/* -----------------------------------------
   AMBIENT GLOW CONTROL
   Prevent color washout behind dark teams
   ----------------------------------------- */

.analysis-shell::before,
.context-panel::before,
.card-backplate::before{

  opacity: 0.18 !important;
  filter: blur(10px) saturate(0.85) !important;
}

/* -----------------------------------------
   OPTIONAL — Slight lift for dark teams only
   ----------------------------------------- */

#cindCard,
#favCard{
  isolation: isolate;
  z-index: 1;
}

/* -----------------------------------------
   EXTREME WASH REDUCTION
   Kill excess overlay density from pseudo layers
   ----------------------------------------- */

.analysis-shell::after,
.context-panel::after,
.card-backplate::after{
  opacity: 0.14 !important;
}

/* -----------------------------------------
   NUCLEAR TRANSPARENCY FOR ANY GENERIC
   DARK PANEL DIRECTLY BEHIND TEAM CARDS
   ----------------------------------------- */

#cindCard::before,
#favCard::before{
  z-index: 0;
}

#cindCard,
#favCard{
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.02),
    var(--mi-depth-1) !important;
}

/* =========================================================
   TEAM CARD — KILL GENERIC GRAY CARD FOUNDATION
   Purpose:
   Remove the shared .card / .card-face navy-gray material
   from the two team cards so the frame reads as true team color.
   ========================================================= */

/* -----------------------------------------
   OUTER TEAM CARD SHELL
   neutralize generic .card material
   ----------------------------------------- */



/* -----------------------------------------
   MIDDLE WRAPPER
   keep it color-controlled only by your custom block
   ----------------------------------------- */

#cindCard > .flip-inner,
#favCard > .flip-inner{
  background-clip: padding-box !important;
}

/* -----------------------------------------
   OPTIONAL:
   if the BACK faces are also showing stray gray
   during flips, neutralize them too
   ----------------------------------------- */

#cindCard > .flip-inner > .card-face,
#favCard > .flip-inner > .card-face{
  border-color: transparent !important;
}

/* -----------------------------------------
   SAFETY:
   stop the generic sheen from reading as gray film
   ----------------------------------------- */

#cindCard::after,
#favCard::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: none !important;
}