/**
 * Priori Design System Tokens
 * Base: Generated Thu, 20 Nov 2025 16:37:46 GMT
 * Extended: Breakpoints added for responsive desktop optimization
 */

:root {
  /* ==========================================================================
     BREAKPOINTS - Desktop-first responsive system (Nov 2025 best practices)
     Usage: Reference values only - use in media queries
     ========================================================================== */
  --breakpoint-sm: 640px;   /* Mobile landscape */
  --breakpoint-md: 768px;   /* Tablet portrait */
  --breakpoint-lg: 1024px;  /* Tablet landscape / Small desktop */
  --breakpoint-xl: 1280px;  /* Desktop */
  --breakpoint-2xl: 1536px; /* Large desktop */

  /* Container max-widths per breakpoint */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1440px;  /* Max content width for readability */
  --font-letter-spacing-wider: 0.05em;
  --font-letter-spacing-wide: 0.025em;
  --font-letter-spacing-normal: 0em;
  --font-letter-spacing-tight: -0.025em;
  --font-letter-spacing-tighter: -0.05em;
  --font-line-height-loose: 2;
  --font-line-height-relaxed: 1.625;
  --font-line-height-normal: 1.5;
  --font-line-height-snug: 1.375;
  --font-line-height-tight: 1.25;
  --font-line-height-none: 1;
  --font-weight-extrabold: 800;
  --font-weight-bold: 700;
  --font-weight-semibold: 600;
  --font-weight-medium: 500;
  --font-weight-normal: 400;
  --font-size-6xl: 3.75rem;
  --font-size-5xl: 3rem;
  --font-size-4xl: 2.25rem;
  --font-size-3xl: 1.875rem;
  --font-size-2xl: 1.5rem;
  --font-size-xl: 1.25rem;
  --font-size-lg: 1.125rem;
  --font-size-base: 1rem;
  --font-size-sm: 0.875rem;
  --font-size-xs: 0.75rem;
  --font-family-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  --font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --transition-easing-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-easing-out: cubic-bezier(0, 0, 0.2, 1);
  --transition-easing-in: cubic-bezier(0.4, 0, 1, 1);
  --transition-easing-linear: linear;
  --transition-easing-default: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-duration-slower: 500ms;
  --transition-duration-slow: 300ms;
  --transition-duration-base: 200ms;
  --transition-duration-fast: 150ms;
  --spacing-24: 6rem;
  --spacing-20: 5rem;
  --spacing-16: 4rem;
  --spacing-12: 3rem;
  --spacing-10: 2.5rem;
  --spacing-8: 2rem;
  --spacing-6: 1.5rem;
  --spacing-5: 1.25rem;
  --spacing-4: 1rem;
  --spacing-3: 0.75rem;
  --spacing-2: 0.5rem;
  --spacing-1: 0.25rem;
  --spacing-0: 0;
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --border-width-default: 1px;
  --border-width-4: 4px;
  --border-width-2: 2px;
  --border-radius-full: 9999px;
  --border-radius-2xl: 1.5rem;
  --border-radius-xl: 1rem;
  --border-radius-lg: 0.75rem;
  --border-radius-md: 0.5rem;
  --border-radius-sm: 0.25rem;
  --color-radix-amber-12: 20 80% 17%;
  --color-radix-amber-11: 30 100% 34%;
  --color-radix-amber-10: 35 100% 55.5%;
  --color-radix-amber-9: 39 100% 57%;
  --color-radix-amber-8: 35 85.2% 55.1%;
  --color-radix-amber-7: 36 86.1% 67.1%;
  --color-radix-amber-6: 38 99.7% 76.3%;
  --color-radix-amber-5: 42 100% 81.8%;
  --color-radix-amber-4: 43 100% 86.8%;
  --color-radix-amber-3: 44 100% 91.7%;
  --color-radix-amber-2: 40 100% 96.5%;
  --color-radix-amber-1: 39 70% 99%;
  --color-radix-green-12: 155 40% 14%;
  --color-radix-green-11: 153 67% 28.5%;
  --color-radix-green-10: 152 57.5% 37.6%;
  --color-radix-green-9: 151 55% 41.5%;
  --color-radix-green-8: 151 40.2% 54.1%;
  --color-radix-green-7: 146 38.5% 69%;
  --color-radix-green-6: 143 40.3% 79%;
  --color-radix-green-5: 141 43.7% 86%;
  --color-radix-green-4: 140 48.7% 91%;
  --color-radix-green-3: 139 55.2% 94.5%;
  --color-radix-green-2: 138 62.5% 96.9%;
  --color-radix-green-1: 136 50% 98.9%;
  --color-radix-red-12: 354 50% 14.6%;
  --color-radix-red-11: 358 65% 48.7%;
  --color-radix-red-10: 358 69.4% 55.2%;
  --color-radix-red-9: 358 75% 59%;
  --color-radix-red-8: 359 69.5% 74.3%;
  --color-radix-red-7: 359 74.2% 81.7%;
  --color-radix-red-6: 360 81.7% 87.8%;
  --color-radix-red-5: 360 90.2% 91.9%;
  --color-radix-red-4: 360 97.9% 94.8%;
  --color-radix-red-3: 360 100% 96.8%;
  --color-radix-red-2: 359 100% 98.6%;
  --color-radix-red-1: 359 100% 99.4%;
  --color-radix-blue-12: 211 100% 15%;
  --color-radix-blue-11: 211 100% 43.2%;
  --color-radix-blue-10: 208 100% 47.3%;
  --color-radix-blue-9: 206 100% 50%;
  --color-radix-blue-8: 206 81.9% 65.3%;
  --color-radix-blue-7: 208 77.5% 76.9%;
  --color-radix-blue-6: 209 81.2% 84.5%;
  --color-radix-blue-5: 209 95% 90.1%;
  --color-radix-blue-4: 210 98.8% 94%;
  --color-radix-blue-3: 209 100% 96.5%;
  --color-radix-blue-2: 210 100% 98%;
  --color-radix-blue-1: 206 100% 99.2%;
  --color-radix-slate-12: 206 24% 9%;
  --color-radix-slate-11: 206 6% 43.5%;
  --color-radix-slate-10: 206 5.8% 52.3%;
  --color-radix-slate-9: 206 6% 56.1%;
  --color-radix-slate-8: 205 10.7% 78%;
  --color-radix-slate-7: 207 11.1% 85.4%;
  --color-radix-slate-6: 208 11.3% 88.4%;
  --color-radix-slate-5: 208 11.7% 90.9%;
  --color-radix-slate-4: 209 12.2% 93.1%;
  --color-radix-slate-3: 209 13.3% 95.3%;
  --color-radix-slate-2: 210 16.7% 97.6%;
  --color-radix-slate-1: 210 20% 98%;
  --color-brand-lafc-black: 0 0% 0%;
  --color-brand-lafc-gold: 45 65% 55%;
  --color-brand-skc-secondary: 220 70% 80%;
  --color-brand-skc-primary: 221 83% 35%;

  /* Priori Brand Colors (from Figma Nov 2025) */
  --color-priori-primary: 0 0% 7%;           /* #111111 */
  --color-priori-secondary: 233 79% 15%;     /* #090D44 */
  --color-priori-tertiary: 219 67% 23%;      /* #142D60 */
  --color-priori-sky-blue: 200 83% 81%;      /* #A6D9F7 */
  --color-priori-light-blue: 205 60% 55%;    /* #449DD1 */
  --color-priori-good: 133 40% 56%;          /* #65BA74 */
  --color-priori-okay: 45 100% 67%;          /* #FFD656 */
  --color-priori-bad: 0 74% 50%;             /* #DC2626 */

  /* ==========================================================================
     PERFORMANCE COLORS - WHOOP-style data visualization palette
     Neutral to team identity (no blue/red confusion with home/away)

     Usage: Score rings, moment dots, timelines, performance metrics
     Opt-in: Add .use-performance-colors class to parent element

     Tokens:
       PRIMARY = semantic meaning (good/okay/bad), seen first
       DEEP    = emphasis, structure, interaction state, felt second
       LIGHT   = future use (tooltips, badges, backgrounds)

     Thresholds (general): 8-10 good, 5-7 okay, 1-4 bad
     Thresholds (pressing): ≥60% good, ≥54% okay, <54% bad
     ========================================================================== */

  /* Good - Teal (vibrant, positive, distinct from team blue) */
  --color-performance-good: 163 70% 52%;           /* #2BD9B0 */
  --color-performance-good-deep: 163 70% 35%;      /* #1A9980 */
  --color-performance-good-light: 163 50% 92%;     /* #E0F7F2 */

  /* Okay - Warm Amber (caution, neutral, WHOOP-like warmth) */
  --color-performance-okay: 40 90% 61%;            /* #F4B942 */
  --color-performance-okay-deep: 40 90% 42%;       /* #CC8F1A */
  --color-performance-okay-light: 40 70% 92%;      /* #FDF4E0 */

  /* Bad - Muted Coral (alert without aggression, distinct from team red) */
  --color-performance-bad: 0 70% 61%;              /* #E25555 */
  --color-performance-bad-deep: 0 70% 42%;         /* #B52D2D */
  --color-performance-bad-light: 0 50% 94%;        /* #FAECEC */

  /* Performance track (neutral, never semantic) */
  --color-performance-track: var(--color-radix-slate-4);

  /* ==========================================================================
     SPARKLINE GRADIENT - Continuous value-based coloring
     Uses Priori performance colors: Teal (good) → Amber (medium) → Coral (bad)
     Used for timeline sparklines where color maps to score intensity
     ========================================================================== */
  --color-sparkline-high: 163 70% 52%;             /* Teal - high/good performance */
  --color-sparkline-mid: 40 90% 61%;               /* Warm Amber - medium performance */
  --color-sparkline-low: 0 70% 61%;                /* Muted Coral - low/bad performance */

  --button-height-icon: 2.5rem;
  --button-height-lg: 2.75rem;
  --button-height-default: 2.5rem;
  --button-height-sm: 2.25rem;
  --color-semantic-ring: var(--color-radix-blue-9);
  --color-semantic-input: var(--color-radix-slate-6);
  --color-semantic-border: var(--color-radix-slate-6);
  --color-semantic-warning-foreground: var(--color-radix-slate-12);
  --color-semantic-warning: var(--color-radix-amber-9);
  --color-semantic-success-foreground: var(--color-radix-slate-1);
  --color-semantic-success: var(--color-radix-green-9);
  --color-semantic-destructive-foreground: var(--color-radix-slate-1);
  --color-semantic-destructive: var(--color-radix-red-9);
  --color-semantic-accent-foreground: var(--color-radix-slate-12);
  --color-semantic-accent: var(--color-radix-slate-3);
  --color-semantic-muted-foreground: var(--color-radix-slate-11);
  --color-semantic-muted: var(--color-radix-slate-3);
  --color-semantic-secondary-foreground: var(--color-radix-slate-12);
  --color-semantic-secondary: var(--color-radix-slate-3);
  --color-semantic-primary-foreground: var(--color-radix-slate-1);
  --color-semantic-primary: var(--color-radix-blue-9);
  --color-semantic-popover-foreground: var(--color-radix-slate-12);
  --color-semantic-popover: var(--color-radix-slate-1);
  --color-semantic-card-foreground: var(--color-radix-slate-12);
  --color-semantic-card: var(--color-radix-slate-1);
  --color-semantic-foreground: var(--color-radix-slate-12);
  --color-semantic-background: 240 4% 97%; /* #F7F7F8 - Page background */

  /* ==========================================================================
     SELECTED STATE - Notion-style soft selection (Soft Sky Wash)
     Usage: List row selection, combobox item highlight, toggle group active,
            command menu selection, table row hover/select
     ========================================================================== */
  --color-semantic-selected: 210 60% 95%;           /* #EAF2FB - Soft sky wash */
  --color-semantic-selected-hover: 210 68% 93%;     /* #DFECFA - Slightly darker hover */
  --color-semantic-border-selected: 212 64% 87%;    /* #C7DDF4 - Subtle blue border */
  --color-semantic-text-selected: var(--color-radix-slate-12);  /* Neutral dark text */

  /* Active scope (applied filters, pills, query modifiers) */
  --color-semantic-text-active: var(--color-radix-blue-12);

  /* NEUTRAL SELECTION - Notion-style warm gray (for tabs, mode switching) */
  --color-semantic-selected-neutral: 40 9% 94%;        /* #F0EFED - Notion warm gray */
  --color-semantic-selected-neutral-hover: 40 7% 91%; /* #E9E8E5 - Darker on hover */

  --card-shadow-elevated: var(--shadow-lg);
  --card-shadow-default: var(--shadow-sm);
  --card-border-width: var(--border-width-default);
  --card-radius: var(--border-radius-lg);
  --card-padding-compact: var(--spacing-4);
  --card-padding-default: var(--spacing-6);
  --button-font-weight: var(--font-weight-medium);
  --button-font-size-lg: var(--font-size-base);
  --button-font-size-default: var(--font-size-sm);
  --button-font-size-sm: var(--font-size-xs);
  --button-radius: var(--border-radius-md);
  --button-padding-lg: var(--spacing-8);
  --button-padding-default: var(--spacing-4);
  --button-padding-sm: var(--spacing-3);

  /* Button colors - dark variant for video/media CTAs */
  --button-dark-bg: 231 79% 15%;
  --button-dark-bg-hover: 231 65% 19%;

  --card-border-color: var(--color-semantic-border);

  /* ==========================================================================
     FIELD/PITCH COLORS - Soccer field visualization
     Used by FieldRenderer component for canvas pitch rendering
     ========================================================================== */

  /* Legacy green pitch (broadcast style) */
  --field-color-primary: #059669;           /* Emerald green - main pitch */
  --field-color-secondary: #6DB36B;         /* Lighter green - clips style */
  --field-color-inner: #7EC383;             /* Inner pitch highlight */

  /* Tactical dark slate (analytical/heatmap optimized) - Option A */
  --field-tactical-bg: #1a1a2e;             /* Dark blue-gray slate */
  --field-tactical-inner: #16162a;          /* Darker inner pitch */
  --field-tactical-line: rgba(255, 255, 255, 0.18);  /* Ghost lines */

  /* VisionOS frosted glass (premium spatial computing) - Option B */
  --field-visionos-bg: #1e1e28;             /* Deep charcoal with warmth */
  --field-visionos-inner: #252532;          /* Glass depth layer */
  --field-visionos-line: rgba(255, 255, 255, 0.22);  /* Soft luminous lines */

  /* Clinical light (clean analytical white) - Option C */
  --field-clinical-bg: #F5F5F7;             /* Apple off-white */
  --field-clinical-inner: #FAFBFC;          /* Slightly brighter inner */
  --field-clinical-line: rgba(0, 0, 0, 0.10);  /* Subtle dark lines */
  --field-clinical-warm-bg: #FAF9F6;        /* Warm cream variant */
  --field-clinical-cool-bg: #F6F9FC;        /* Cool blue-white variant */

  /* Line colors */
  --field-line-color: rgba(255, 255, 255, 0.8);  /* Semi-transparent white lines */
  --field-line-color-solid: #FFFFFF;        /* Solid white lines */
  --field-goal-color: rgba(255, 255, 255, 0.3);  /* Goal net fill */

  /* Layout */
  --field-margin: 40px;                     /* Canvas margin around pitch */
  --field-line-width: 2px;                  /* Line stroke width */
  --field-line-width-tactical: 1.5px;       /* Thinner lines for tactical */

  /* ==========================================================================
     TEXT COLORS - Priori text hierarchy scale
     Based on Radix Slate for consistent typography
     ========================================================================== */
  --text-display: #121417;     /* Slate 12 – hero text */
  --text-title: #121417;       /* Slate 12 – page titles */
  --text-heading: #121417;     /* Slate 12 – section headers */
  --text-primary: #121417;     /* Slate 12 – body text */
  --text-secondary: #64696E;   /* Slate 11 – labels, subheaders */
  --text-tertiary: #7C8287;    /* Slate 9 – metadata, helper text */
  --text-muted: #91979C;       /* Slate 8 – placeholders, disabled */

  /* ==========================================================================
     PANE SURFACE (L2) - Translucent glass surface for auth cards, modals
     Cursor/Linear style: soft, frosted appearance without elevation shadows
     ========================================================================== */
  --surface-pane-bg: hsla(0, 0%, 100%, 0.85);
  --surface-pane-border: hsla(0, 0%, 0%, 0.08);
  --surface-pane-radius: var(--border-radius-xl);
  --surface-pane-padding: var(--spacing-8);
  --surface-pane-backdrop-blur: 20px;

  /* Page background - Linear/Stripe style subtle off-white */
  --surface-page: #FAFBFC;
}

/* ==========================================================================
   DEFAULT TEAM ICON - Subtle placeholder for teams without logos
   Design: Quiet, premium, Stripe/Linear style - supports content, doesn't compete
   Usage: <i class="ph-light ph-shield-star team-icon team-icon--{size}"></i>
   Sizes: sm (20px), md (28px), lg (36px), xl (44px)
   ========================================================================== */
.team-icon {
  color: hsl(var(--color-radix-slate-8));
  flex-shrink: 0;
  opacity: 0.85;
  line-height: 1;
  vertical-align: middle;
}

/* Header context: slightly more prominent */
.team-icon--lg {
  font-size: 48px;
  color: hsl(var(--color-radix-slate-11));
  opacity: 1;
}

.team-icon--sm { font-size: 20px; }
.team-icon--md { font-size: 28px; }
.team-icon--xl { font-size: 56px; }

/* ==========================================================================
   SPATIAL CONTROL COLORS - Heatmap and player circles
   Single source of truth for blue/red team visualization
   ========================================================================== */
:root {
  /* Blue (Team 0) - player circles and heatmap */
  --spatial-control-blue: #4A7CBF;
  --spatial-control-blue-rgb: 74, 124, 191;
  --spatial-control-blue-deep: #1A3566;
  --spatial-control-blue-deep-rgb: 26, 53, 102;
  --spatial-control-red: #C8303A;
  --spatial-control-red-rgb: 200, 48, 58;
  --spatial-control-red-deep: #802026;
  --spatial-control-red-deep-rgb: 128, 32, 38;

  /* Formation chart - tiered colors for top 3 formations */
  --formation-home-1: var(--spatial-control-blue);
  --formation-home-2: var(--spatial-control-blue-deep);
  --formation-home-3: hsl(var(--color-radix-slate-7));
  --formation-away-1: var(--spatial-control-red);
  --formation-away-2: var(--spatial-control-red-deep);
  --formation-away-3: hsl(var(--color-radix-slate-7));

  /* TOOLTIP */
  --tooltip-bg: hsl(var(--color-priori-primary));
  --tooltip-fg: #FFFFFF;
  --tooltip-fg-muted: hsla(0, 0%, 100%, 0.75);
}

/* CHART LEGEND COMPONENT */
.chart-legend {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: var(--spacing-4);
  align-items: center;
}
.chart-legend__item {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}
.chart-legend__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.chart-legend__label {
  font-size: 12px;
  line-height: 18px;
  color: rgb(104, 112, 118);
  white-space: nowrap;
}

/* TOOLTIP COMPONENT */
.tooltip-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  margin-left: 2px;
  color: hsl(var(--color-radix-slate-9));
  cursor: pointer;
  vertical-align: middle;
}
.tooltip-trigger:hover { color: hsl(var(--color-radix-slate-12)); }
.tooltip-trigger .tooltip-icon { font-size: 16px; line-height: 1; }

.tooltip-content {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 320px;
  padding: var(--spacing-3) var(--spacing-4);
  background: var(--tooltip-bg);
  color: var(--tooltip-fg);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 1600;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 150ms ease, visibility 150ms ease;
}
.tooltip-trigger:hover .tooltip-content {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 150ms;
}
.tooltip-content::after {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-bottom-color: var(--tooltip-bg);
}

/* Left-aligned variant for tooltips near left edge of screen */
.tooltip-trigger--left .tooltip-content {
  left: 0;
  transform: none;
}
.tooltip-trigger--left .tooltip-content::after {
  left: 9px;
  transform: none;
}

.tooltip-heading {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--font-line-height-tight);
  margin: 0 0 var(--spacing-1) 0;
}
.tooltip-subtext {
  font-size: var(--font-size-xs);
  line-height: var(--font-line-height-normal);
  margin: 0;
  color: var(--tooltip-fg-muted);
}
.tooltip-cta {
  display: inline-block;
  margin-top: var(--spacing-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--tooltip-fg-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.tooltip-cta:hover { color: var(--tooltip-fg); }

/* Tooltip alignment modifiers - for edge-of-screen positioning */
.tooltip-trigger--align-left .tooltip-content,
.tooltip-trigger--align-left-wrapper .tooltip-trigger .tooltip-content {
  left: 0;
  transform: none;
}
.tooltip-trigger--align-left .tooltip-content::after,
.tooltip-trigger--align-left-wrapper .tooltip-trigger .tooltip-content::after {
  left: 9px;
  transform: none;
}

.tooltip-trigger--align-right .tooltip-content,
.tooltip-trigger--align-right-wrapper .tooltip-trigger .tooltip-content {
  left: auto;
  right: 0;
  transform: none;
}
.tooltip-trigger--align-right .tooltip-content::after,
.tooltip-trigger--align-right-wrapper .tooltip-trigger .tooltip-content::after {
  left: auto;
  right: 9px;
  transform: none;
}

/* GLOSSARY PAGE */
.glossary-wrapper {
  background: var(--surface-page);
  min-height: 100vh;
}
.glossary-page {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--spacing-8) var(--spacing-6);
}
.glossary-header { margin-bottom: var(--spacing-10); }
.glossary-header h1 {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin: 0 0 var(--spacing-2) 0;
}
.glossary-header p {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  margin: 0;
}
.glossary-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
}
.glossary-term {
  padding-bottom: var(--spacing-8);
  border-bottom: 1px solid hsl(var(--color-radix-slate-4));
}
.glossary-term:last-child { border-bottom: none; }
.glossary-term h2 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
  margin: 0 0 var(--spacing-2) 0;
}
.glossary-term p {
  font-size: var(--font-size-sm);
  line-height: var(--font-line-height-relaxed);
  color: var(--text-secondary);
  margin: 0;
}
.glossary-term:target {
  background: hsl(var(--color-radix-blue-2));
  margin: 0 calc(-1 * var(--spacing-4));
  padding: var(--spacing-4);
  padding-bottom: var(--spacing-8);
  border-radius: var(--border-radius-md);
}

/* ==========================================================================
   MATCH CONTEXT COMPONENT
   Displays match scoreline with team logos, scores, xG, and match info
   Usage: {% from 'components/ui/match-context.html' import match_context %}
   ========================================================================== */
.match-context {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--spacing-4);
  padding: 0 0 var(--spacing-4) 0;
  width: 100%;
}

/* Home/Away sides container */
.match-context__side {
  display: flex;
  align-items: center;
  gap: var(--spacing-6);
}

.match-context__side--home {
  justify-content: flex-end;
}

.match-context__side--away {
  justify-content: flex-start;
}

.match-context__team {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
}

.match-context__team--away {
  flex-direction: row;
}

.match-context__logo {
  width: 48px;
  height: 48px;
  object-fit: contain;
  flex-shrink: 0;
}

.match-context__logo-fallback {
  font-size: 48px;
  color: hsl(var(--color-radix-slate-8));
  line-height: 1;
  flex-shrink: 0;
}

.match-context__team-name {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--font-line-height-tight);
  letter-spacing: var(--font-letter-spacing-tight);
  color: var(--text-primary);
  white-space: nowrap;
}

/* Team indicator dots */
.match-context__team--home::before,
.match-context__team--away::after {
  content: '';
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.match-context__team--home::before {
  background: var(--spatial-control-blue);
}

.match-context__team--away::after {
  background: var(--spatial-control-red);
}

.match-context__xg {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-normal);
  line-height: 1;
  letter-spacing: var(--font-letter-spacing-tight);
  color: var(--text-secondary);
  min-width: 50px;
  text-align: center;
}

.match-context__xg-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  opacity: 0.7;
}

.match-context__score {
  font-family: var(--font-family-sans);
  font-size: 48px;
  font-weight: var(--font-weight-bold);
  line-height: 1;
  letter-spacing: -0.576px;
  color: var(--text-primary);
  min-width: 32px;
  text-align: center;
}

.match-context__info {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 100px;
  gap: var(--spacing-1);
  padding: 0 var(--spacing-4);
}

.match-context__status {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  line-height: var(--font-line-height-normal);
  color: var(--text-primary);
}

.match-context__date {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--font-line-height-normal);
  color: var(--text-secondary);
}

/* --------------------------------------------------------------------------
   COMPACT VARIANT - for performance summary pages
   ~70% scale of default sizes
   -------------------------------------------------------------------------- */
.match-context--compact {
  gap: var(--spacing-3);
  padding: 0 0 var(--spacing-2) 0;
}

.match-context--compact .match-context__side {
  gap: var(--spacing-4);
}

.match-context--compact .match-context__team {
  gap: var(--spacing-2);
}

.match-context--compact .match-context__logo {
  width: 32px;
  height: 32px;
}

.match-context--compact .match-context__logo-fallback {
  font-size: 32px;
}

.match-context--compact .match-context__team-name {
  font-size: var(--font-size-base);
}

.match-context--compact .match-context__team--home::before,
.match-context--compact .match-context__team--away::after {
  width: 8px;
  height: 8px;
}

.match-context--compact .match-context__xg {
  font-size: var(--font-size-2xl);
  min-width: 40px;
}

.match-context--compact .match-context__xg-label {
  font-size: var(--font-size-xs);
}

.match-context--compact .match-context__score {
  font-size: 32px;
  min-width: 24px;
}

.match-context--compact .match-context__info {
  min-width: 80px;
  gap: 2px;
  padding: 0 var(--spacing-2);
}

.match-context--compact .match-context__status {
  font-size: var(--font-size-sm);
}

.match-context--compact .match-context__date {
  font-size: var(--font-size-xs);
}

/* ==========================================================================
   FORMATION BREAKDOWN COMPONENT
   Displays team formation % breakdown with bars
   Usage: {% from 'components/ui/formation-breakdown.html' import formation_breakdown %}
   ========================================================================== */
.formation-breakdown {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  min-width: 400px;
}

.formation-breakdown__header {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.formation-breakdown__label {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  color: var(--text-secondary);
  line-height: var(--font-line-height-tight);
}

.formation-breakdown__dominant {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  line-height: var(--font-line-height-tight);
}

.formation-breakdown__bars {
  display: flex;
  gap: var(--spacing-6);
}

.formation-breakdown__bar-item {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  flex: 1;
  min-width: 100px;
}

.formation-breakdown__bar-name {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
}

.formation-breakdown__bar {
  height: 8px;
  background: hsl(var(--color-radix-slate-3));
  border-radius: var(--border-radius-full);
  overflow: hidden;
}

.formation-breakdown__bar-fill {
  height: 100%;
  border-radius: var(--border-radius-full);
}

/* Home team colors (red spectrum) */
.formation-breakdown__bar--home-1 .formation-breakdown__bar-fill { background: var(--formation-home-1); }
.formation-breakdown__bar--home-2 .formation-breakdown__bar-fill { background: var(--formation-home-2); }
.formation-breakdown__bar--home-3 .formation-breakdown__bar-fill { background: var(--formation-home-3); }

/* Away team colors (blue spectrum) */
.formation-breakdown__bar--away-1 .formation-breakdown__bar-fill { background: var(--formation-away-1); }
.formation-breakdown__bar--away-2 .formation-breakdown__bar-fill { background: var(--formation-away-2); }
.formation-breakdown__bar--away-3 .formation-breakdown__bar-fill { background: var(--formation-away-3); }

.formation-breakdown__bar-percent {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

/* ==========================================================================
   FORMATION FIELD COMPONENT
   Displays both teams' formations on a single field
   Usage: {% from 'components/ui/formation-field.html' import formation_field %}
   ========================================================================== */
.formation-field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  width: 100%;
  max-width: 550px;
}

.formation-field__title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: hsl(var(--color-radix-slate-12));
  line-height: 20px;
}

.formation-field__labels {
  display: flex;
  justify-content: space-between;
  height: 26px;
  align-items: center;
}

.formation-field__pitch {
  position: relative;
  width: 100%;
  aspect-ratio: 1050 / 680;
  border-radius: var(--border-radius-lg);
  overflow: hidden;
}

.formation-field__svg {
  width: 100%;
  height: 100%;
}

.formation-field__players {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.formation-field__pin {
  position: absolute;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  border: 2px solid white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.formation-field__pin span {
  font-family: var(--font-family-sans);
  font-size: 13px;
  font-weight: var(--font-weight-bold);
  color: white;
  line-height: 1;
}

.formation-field__pin--home {
  background: var(--spatial-control-blue);
}

.formation-field__pin--away {
  background: var(--spatial-control-red);
}

/* FORMATION TIMELINE */
.formation-timeline {
  width: 100%;
}

.formation-timeline__title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: hsl(var(--color-radix-slate-12));
  line-height: 24px;
}

.formation-timeline__chart {
  display: flex;
  align-items: stretch;
  height: 340px;
  position: relative;
  z-index: 1;
}

.formation-timeline__y-axis-title {
  position: absolute;
  left: -8px;
  top: 50%;
  transform: rotate(-90deg) translateX(-50%);
  transform-origin: left center;
  font-size: var(--font-size-xs);
  color: hsl(var(--color-radix-slate-10));
  white-space: nowrap;
}

.formation-timeline__y-axis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-right: var(--spacing-2);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  text-align: right;
  width: 40px;
  flex-shrink: 0;
}

.formation-timeline__bars {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 2px;
  position: relative;
  border-left: 1px solid hsl(var(--color-radix-slate-6));
}

.formation-timeline__bars::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: hsl(var(--color-radix-slate-6));
}

.formation-timeline__bar {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  position: relative;
  cursor: pointer;
}

.formation-timeline__bar-inner {
  position: absolute;
  left: 10%;
  right: 10%;
  top: 50%;
  display: flex;
  flex-direction: column;
}

/* Home team bars (positive, above center) */
.formation-timeline__segment--home {
  transform-origin: bottom;
}

.formation-timeline__segment--home-1 { background: var(--formation-home-1); }
.formation-timeline__segment--home-2 { background: var(--formation-home-2); }

/* Away team bars (negative, below center) */
.formation-timeline__segment--away {
  transform-origin: top;
}

.formation-timeline__segment--away-1 { background: var(--formation-away-1); }
.formation-timeline__segment--away-2 { background: var(--formation-away-2); }

.formation-timeline__x-axis {
  display: flex;
  position: relative;
  padding-left: 48px;
  padding-top: var(--spacing-2);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

.formation-timeline__x-label {
  flex: 1;
  text-align: center;
}

.formation-timeline__tooltip {
  position: absolute;
  padding: var(--spacing-2) var(--spacing-3);
  background: var(--tooltip-bg);
  color: var(--tooltip-fg);
  border-radius: var(--border-radius-md);
  font-size: var(--font-size-xs);
  pointer-events: none;
  opacity: 0;
  transition: opacity 150ms ease;
  z-index: 100;
  white-space: nowrap;
}

.formation-timeline__tooltip.visible {
  opacity: 1;
}

.formation-timeline__tooltip-title {
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-1);
}

.formation-timeline__tooltip-section {
  margin-top: var(--spacing-2);
}

.formation-timeline__tooltip-section:first-of-type {
  margin-top: var(--spacing-1);
}

.formation-timeline__tooltip-label {
  font-weight: var(--font-weight-medium);
  margin-bottom: 2px;
}

.formation-timeline__tooltip-section div:not(.formation-timeline__tooltip-label) {
  color: var(--tooltip-fg-muted);
  font-size: 11px;
}

/* ==========================================================================
   SKELETON LOADING - Shimmer animation for loading states
   Usage: Add .skeleton class + shape variant (.skeleton-text, .skeleton-circle, etc.)
   Example: <div class="skeleton skeleton-text" style="width: 120px"></div>
   ========================================================================== */
@keyframes skeleton-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton {
  background: linear-gradient(
    90deg,
    hsl(var(--color-radix-slate-3)) 0%,
    hsl(var(--color-radix-slate-2)) 50%,
    hsl(var(--color-radix-slate-3)) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--border-radius-sm);
}

.skeleton-text {
  height: 1em;
  min-width: 60px;
}

.skeleton-text--lg {
  height: 1.5em;
}

.skeleton-text--xl {
  height: 2em;
}

.skeleton-circle {
  border-radius: 50%;
}

.skeleton-bar {
  height: 8px;
  border-radius: var(--border-radius-full);
}

.skeleton-rect {
  border-radius: var(--border-radius-md);
}

/* ==========================================================================
   SKELETON LOADING STATES - Page-level [data-loading] attribute pattern
   Add data-loading="true" to container, remove when data loads
   ========================================================================== */

/* Match Summary Page skeleton states */
[data-loading] .match-context__score,
[data-loading] .match-context__xg,
[data-loading] .formation-breakdown__bar-name,
[data-loading] .formation-breakdown__bar-percent {
  color: transparent;
  background: linear-gradient(90deg, hsl(var(--color-radix-slate-3)) 0%, hsl(var(--color-radix-slate-2)) 50%, hsl(var(--color-radix-slate-3)) 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--border-radius-lg);
  min-width: 40px;
}

[data-loading] .formation-field__labels { display: none; }

[data-loading] .match-context__team-name {
  color: transparent;
  background: linear-gradient(90deg, hsl(var(--color-radix-slate-3)) 0%, hsl(var(--color-radix-slate-2)) 50%, hsl(var(--color-radix-slate-3)) 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--border-radius-lg);
  min-width: 120px;
}

[data-loading] .match-context__team--home::before,
[data-loading] .match-context__team--away::after {
  display: none;
}

[data-loading] .match-context__xg-label {
  display: none;
}

[data-loading] .match-context__date {
  color: transparent;
  background: linear-gradient(90deg, hsl(var(--color-radix-slate-3)) 0%, hsl(var(--color-radix-slate-2)) 50%, hsl(var(--color-radix-slate-3)) 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--border-radius-lg);
  min-width: 100px;
}

[data-loading] .formation-breakdown__dominant {
  color: transparent;
  background: linear-gradient(90deg, hsl(var(--color-radix-slate-3)) 0%, hsl(var(--color-radix-slate-2)) 50%, hsl(var(--color-radix-slate-3)) 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--border-radius-lg);
  min-width: 100px;
}

[data-loading] .match-context__logo-fallback {
  color: transparent;
  background: linear-gradient(90deg, hsl(var(--color-radix-slate-3)) 0%, hsl(var(--color-radix-slate-2)) 50%, hsl(var(--color-radix-slate-3)) 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--border-radius-full);
  width: 48px;
  height: 48px;
}

[data-loading] .formation-breakdown__bar-fill {
  width: 60% !important;
  background: linear-gradient(90deg, hsl(var(--color-radix-slate-3)) 0%, hsl(var(--color-radix-slate-2)) 50%, hsl(var(--color-radix-slate-3)) 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

[data-loading] .formation-field__players { display: none; }

[data-loading] .formation-field__pitch {
  background: linear-gradient(90deg, hsl(var(--color-radix-slate-3)) 0%, hsl(var(--color-radix-slate-2)) 50%, hsl(var(--color-radix-slate-3)) 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

[data-loading] .formation-field__svg rect[fill="#E8EBF0"] { fill: transparent; }
[data-loading] .formation-field__svg line,
[data-loading] .formation-field__svg rect:not([fill="#E8EBF0"]),
[data-loading] .formation-field__svg circle,
[data-loading] .formation-field__svg path { stroke: hsl(var(--color-radix-slate-4)); fill: none; }
[data-loading] .formation-field__svg circle[r="3"] { fill: hsl(var(--color-radix-slate-4)); }

[data-loading] .formation-timeline__bar { display: none; }
[data-loading] .formation-timeline__bars {
  background: linear-gradient(90deg, hsl(var(--color-radix-slate-3)) 0%, hsl(var(--color-radix-slate-2)) 50%, hsl(var(--color-radix-slate-3)) 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--border-radius-lg);
}
[data-loading] .formation-timeline__bars::before { display: none; }
[data-loading] .formation-timeline__y-axis,
[data-loading] .formation-timeline__x-axis { visibility: hidden; }

/* ==========================================================================
   Performance Summary Page skeleton states
   ========================================================================== */

/* Reusable shimmer mixin via shared properties */
[data-loading] .score-ring,
[data-loading] .stat-card__value,
[data-loading] .stat-card__label,
[data-loading] .stat-card__description,
[data-loading] .metric-card__title,
[data-loading] .metric-card__description,
[data-loading] .metrics-column__label,
[data-loading] .moment-field-map__pitch,
[data-loading] .score-timeline__chart,
[data-loading] .score-timeline__team,
[data-loading] .score-timeline__label,
[data-loading] .match-context__logo,
[data-loading] .match-context__status,
[data-loading] .match-context__date {
  background: linear-gradient(90deg, hsl(var(--color-radix-slate-3)) 0%, hsl(var(--color-radix-slate-2)) 50%, hsl(var(--color-radix-slate-3)) 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

/* Text elements: hide text, show shimmer */
[data-loading] .stat-card__value,
[data-loading] .stat-card__label,
[data-loading] .stat-card__description,
[data-loading] .metric-card__title,
[data-loading] .metric-card__description,
[data-loading] .metrics-column__label,
[data-loading] .score-timeline__team,
[data-loading] .score-timeline__label,
[data-loading] .match-context__status,
[data-loading] .match-context__date {
  color: transparent;
  border-radius: var(--border-radius-md);
}

/* Match context logos: circular shimmer, hide image */
[data-loading] .match-context__logo {
  border-radius: 50%;
}
[data-loading] .match-context__logo img {
  opacity: 0;
}

/* Score ring: circular shimmer */
[data-loading] .score-ring { border-radius: 50%; }
[data-loading] .score-ring svg,
[data-loading] .score-ring__value { display: none; }

/* Field map: hide SVG field lines */
[data-loading] .moment-field-map__svg,
[data-loading] .moment-field-map__dots-group { display: none; }

/* Timeline: hide SVG */
[data-loading] .score-timeline__svg { display: none; }