/**
 * Upjohn Charts - Base Stylesheet
 * Based on Upjohn_Brand_Guide.pdf and 2024.05.30_Color_Palette_v6.pdf
 *
 * Typography:
 *   - Myriad Pro (sans-serif): titles, headlines, sub-headlines
 *   - Minion Pro (serif): body text, long passages, labels
 *
 * Web Font Fallbacks:
 *   - Myriad Pro -> Source Sans 3, system-ui, sans-serif
 *   - Minion Pro -> Source Serif 4, Georgia, serif
 */

/* ============================================
   CSS Custom Properties (Brand Tokens)
   ============================================ */
:root {
  /* Primary Colors */
  --upjohn-dark-teal: #004A5E;
  --upjohn-teal: #2B9CB4;
  --upjohn-red: #AF2C32;
  --upjohn-dark-gray: #414042;

  /* Accent Colors */
  --upjohn-orange: #F68C3D;
  --upjohn-gold: #FDBA4D;

  /* Shades of Blue */
  --upjohn-blue-lightest: #C9D5DF;
  --upjohn-blue-lighter: #A5C0D3;
  --upjohn-blue-light: #7EA5C0;
  --upjohn-blue-medium: #5189A7;
  --upjohn-blue-dark: #1A6C89;
  --upjohn-blue-darker: #004A5E;
  --upjohn-blue-darkest: #001F2C;

  /* Shades of Orange */
  --upjohn-orange-lightest: #FFE293;
  --upjohn-orange-lighter: #FDBA4D;
  --upjohn-orange-light: #F68C3D;
  --upjohn-orange-medium: #F15A29;
  --upjohn-orange-dark: #DC4133;
  --upjohn-orange-darker: #AF2C32;
  --upjohn-orange-darkest: #822B1A;

  /* Neutral Colors */
  --upjohn-gray-lightest: #D5D7D8;
  --upjohn-gray-lighter: #B1B3B6;
  --upjohn-gray-medium: #8A8C8E;
  --upjohn-gray-dark: #636466;
  --upjohn-gray-darkest: #414042;

  /* Chart Chrome Colors */
  --chart-axis-line: #636466;
  --chart-axis-label: #414042;
  --chart-grid-line: #D5D7D8;
  --chart-tick-mark: #8A8C8E;
  --chart-background: #FFFFFF;
  --chart-text: #414042;
  --chart-text-light: #636466;
  --chart-text-muted: #8A8C8E;

  /* Semantic aliases (from Theme Spec v1.0) */
  --text-primary: var(--upjohn-gray-darkest);
  --text-secondary: var(--upjohn-gray-dark);
  --text-muted: var(--upjohn-gray-medium);
  --axis-line: var(--upjohn-gray-dark);
  --axis-tick: var(--upjohn-gray-medium);
  --axis-label: var(--upjohn-gray-darkest);
  --grid-major: var(--upjohn-gray-lightest);
  --grid-minor: var(--upjohn-gray-lightest);
  --reference-line: var(--upjohn-gray-medium);
  --reference-label: var(--upjohn-gray-dark);
  --focus-ring: var(--upjohn-teal);

  /* Typography - Font Families */
  --font-heading: "Myriad Pro", "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body: "Minion Pro", "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Monaco, monospace;

  /* Typography - Font Sizes */
  --font-size-xs: 10px;
  --font-size-sm: 12px;
  --font-size-base: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 28px;

  /* Typography - Font Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 24px;
  --spacing-2xl: 32px;

  /* Animation */
  --transition-fast: 150ms ease-out;
  --transition-normal: 250ms ease-out;
  --transition-slow: 400ms ease-out;

  /* Borders & Shadows */
  --border-radius-sm: 2px;
  --border-radius-md: 4px;
  --border-radius-lg: 8px;
  --shadow-tooltip: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* ============================================
   Chart Container
   ============================================ */
.upjohn-chart {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  color: var(--chart-text);
  background-color: var(--chart-background);
  position: relative;
  width: 100%;
  max-width: 100%;
}

.upjohn-chart * {
  box-sizing: border-box;
}

/* Responsive container maintains aspect ratio */
.upjohn-chart-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 default aspect ratio */
  overflow: hidden;
}

.upjohn-chart-wrapper.aspect-4-3 {
  padding-bottom: 75%; /* 4:3 */
}

.upjohn-chart-wrapper.aspect-1-1 {
  padding-bottom: 100%; /* 1:1 */
}

.upjohn-chart-wrapper.aspect-3-2 {
  padding-bottom: 66.67%; /* 3:2 */
}

.upjohn-chart-wrapper svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ============================================
   Chart Title
   ============================================ */
.upjohn-chart-title {
  font-family: var(--font-heading);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--upjohn-dark-teal);
  margin: 0 0 var(--spacing-sm) 0;
  line-height: 1.3;
}

.upjohn-chart-subtitle {
  font-family: var(--font-heading);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
  color: var(--chart-text-light);
  margin: 0 0 var(--spacing-md) 0;
  line-height: 1.4;
}

/* SVG title (rendered inside chart) */
.upjohn-chart svg .chart-title {
  font-family: var(--font-heading);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  fill: var(--upjohn-dark-teal);
}

.upjohn-chart svg .chart-subtitle {
  font-family: var(--font-heading);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  fill: var(--chart-text-light);
}

/* ============================================
   Axes
   ============================================ */
.upjohn-chart .axis path,
.upjohn-chart .axis line {
  stroke: var(--chart-axis-line);
  stroke-width: 1px;
  shape-rendering: crispEdges;
}

.upjohn-chart .axis text {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  fill: var(--chart-axis-label);
}

.upjohn-chart .axis-label {
  font-family: var(--font-heading);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  fill: var(--chart-axis-label);
}

/* Grid lines */
.upjohn-chart .grid line {
  stroke: var(--chart-grid-line);
  stroke-width: 1px;
  stroke-dasharray: none;
  shape-rendering: crispEdges;
  opacity: 0.70;
}

.upjohn-chart .grid.minor line {
  opacity: 0.35;
}

.upjohn-chart .grid path {
  stroke-width: 0;
}

/* Tick marks */
.upjohn-chart .tick line {
  stroke: var(--chart-tick-mark);
}

/* ============================================
   Data Series Colors
   ============================================ */
.upjohn-chart .series-1 { stroke: #004A5E; fill: #004A5E; }
.upjohn-chart .series-2 { stroke: #2B9CB4; fill: #2B9CB4; }
.upjohn-chart .series-3 { stroke: #AF2C32; fill: #AF2C32; }
.upjohn-chart .series-4 { stroke: #F68C3D; fill: #F68C3D; }
.upjohn-chart .series-5 { stroke: #FDBA4D; fill: #FDBA4D; }
.upjohn-chart .series-6 { stroke: #414042; fill: #414042; }

/* ============================================
   Lines
   ============================================ */
.upjohn-chart .line {
  fill: none;
  stroke-width: 2.5px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.upjohn-chart .line.highlighted {
  stroke-width: 3.5px;
}

.upjohn-chart .line.dimmed {
  opacity: 0.25;
}

/* Data points on lines */
.upjohn-chart .data-point {
  stroke-width: 2px;
  stroke: var(--chart-background);
  cursor: pointer;
  transition: r var(--transition-fast);
}

.upjohn-chart .data-point:hover,
.upjohn-chart .data-point:focus {
  r: 6;
}

/* ============================================
   Bars
   ============================================ */
.upjohn-chart .bar {
  transition: opacity var(--transition-fast);
  cursor: pointer;
}

.upjohn-chart .bar:hover,
.upjohn-chart .bar:focus {
  opacity: 0.85;
}

.upjohn-chart .bar.dimmed {
  opacity: 0.25;
}

/* Bar labels */
.upjohn-chart .bar-label {
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  fill: var(--chart-text);
  text-anchor: middle;
}

.upjohn-chart .bar-label.inside {
  fill: var(--chart-background);
}

/* ============================================
   Pie/Donut Charts
   ============================================ */
.upjohn-chart .pie-slice {
  cursor: pointer;
  transition: transform var(--transition-fast), opacity var(--transition-fast), filter var(--transition-fast);
  transform-origin: center;
}

.upjohn-chart .pie-slice:hover,
.upjohn-chart .pie-slice:focus {
  opacity: 0.85;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.upjohn-chart .pie-slice.highlighted {
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.25));
}

.upjohn-chart .pie-slice.dimmed {
  opacity: 0.25;
}

.upjohn-chart .pie-leader-line {
  stroke: var(--chart-grid-line);
  stroke-width: 1px;
  fill: none;
  pointer-events: none;
}

.upjohn-chart .pie-label-name {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  fill: var(--chart-text);
}

.upjohn-chart .pie-label-value {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  fill: var(--chart-text-light);
}

.upjohn-chart .pie-inside-label {
  font-family: var(--font-heading);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.upjohn-chart .pie-center-label {
  font-family: var(--font-heading);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  fill: var(--upjohn-dark-teal);
  text-anchor: middle;
  dominant-baseline: middle;
}

.upjohn-chart .pie-center-sublabel {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  fill: var(--chart-text-light);
  text-anchor: middle;
}

/* Pie chart animation */
@keyframes upjohn-pie-grow {
  from {
    transform: scale(0);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.upjohn-chart.animate .pie-slice {
  animation: upjohn-pie-grow 0.6s ease-out forwards;
}

.upjohn-chart.animate .pie-slice:nth-child(1) { animation-delay: 0ms; }
.upjohn-chart.animate .pie-slice:nth-child(2) { animation-delay: 50ms; }
.upjohn-chart.animate .pie-slice:nth-child(3) { animation-delay: 100ms; }
.upjohn-chart.animate .pie-slice:nth-child(4) { animation-delay: 150ms; }
.upjohn-chart.animate .pie-slice:nth-child(5) { animation-delay: 200ms; }
.upjohn-chart.animate .pie-slice:nth-child(6) { animation-delay: 250ms; }
.upjohn-chart.animate .pie-slice:nth-child(7) { animation-delay: 300ms; }
.upjohn-chart.animate .pie-slice:nth-child(8) { animation-delay: 350ms; }

/* Focus indicator for pie slices */
.upjohn-chart .pie-slice:focus {
  outline: 2px solid var(--upjohn-teal);
  outline-offset: 2px;
}

/* High contrast mode support for pie charts */
@media (prefers-contrast: high) {
  .upjohn-chart .pie-slice {
    stroke-width: 2px;
    stroke: #000;
  }
}

/* ============================================
   Legend
   ============================================ */
.upjohn-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  margin-top: var(--spacing-md);
  padding: 0;
  list-style: none;
}

.upjohn-chart-legend-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--chart-text);
  cursor: pointer;
  transition: opacity var(--transition-fast);
}

.upjohn-chart-legend-item:hover {
  opacity: 0.8;
}

.upjohn-chart-legend-item.inactive {
  opacity: 0.4;
}

.upjohn-chart-legend-swatch {
  width: 16px;
  height: 3px;
  border-radius: 1px;
}

.upjohn-chart-legend-swatch.bar {
  height: 12px;
  width: 12px;
  border-radius: var(--border-radius-sm);
}

/* SVG Legend */
.upjohn-chart svg .legend-item {
  cursor: pointer;
}

.upjohn-chart svg .legend-text {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  fill: var(--chart-text);
}

/* ============================================
   Tooltip
   ============================================ */
.upjohn-chart-tooltip {
  position: absolute;
  pointer-events: none;
  background: var(--chart-background);
  border: 1px solid var(--chart-grid-line);
  border-radius: var(--border-radius-md);
  padding: var(--spacing-sm) var(--spacing-md);
  box-shadow: var(--shadow-tooltip);
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--chart-text);
  z-index: 1000;
  opacity: 0;
  transition: opacity var(--transition-fast);
  max-width: 250px;
}

.upjohn-chart-tooltip.visible {
  opacity: 1;
}

.upjohn-chart-tooltip-title {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  margin-bottom: var(--spacing-xs);
  color: var(--chart-text);
}

.upjohn-chart-tooltip-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin: var(--spacing-xs) 0;
}

.upjohn-chart-tooltip-swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}

.upjohn-chart-tooltip-label {
  color: var(--chart-text-light);
}

.upjohn-chart-tooltip-value {
  font-weight: var(--font-weight-semibold);
  margin-left: auto;
}

/* ============================================
   Annotations
   ============================================ */
.upjohn-chart .annotation-line {
  stroke: var(--chart-text-muted);
  stroke-width: 1px;
  stroke-dasharray: 4, 3;
}

.upjohn-chart .annotation-label {
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  fill: var(--chart-text-muted);
}

.upjohn-chart .annotation-range {
  fill: var(--upjohn-gray-lightest);
  opacity: 0.5;
}

.upjohn-chart .annotation-point {
  stroke: var(--chart-background);
  stroke-width: 2px;
}

/* ============================================
   Notes & Sources
   ============================================ */
.upjohn-chart-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-lg);
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--chart-grid-line);
}

.upjohn-chart-footer-text {
  flex: 1;
}

.upjohn-chart-footer-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--spacing-lg);
  flex-shrink: 0;
}

.upjohn-chart-logo {
  display: flex;
  justify-content: flex-end;
}

.upjohn-chart-logo svg {
  height: 40px;
  width: auto;
  /* Logo uses original color #231f20 from SVG file */
}

.upjohn-chart-buttons-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  justify-content: flex-end;
}

.upjohn-chart-buttons-row .upjohn-chart-export,
.upjohn-chart-buttons-row .upjohn-chart-share {
  margin-top: 0;
}

/* Legacy support for old footer-buttons class */
.upjohn-chart-footer-buttons {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--spacing-sm);
  flex-shrink: 0;
}

.upjohn-chart-footer-buttons .upjohn-chart-export {
  margin-top: 0;
}

.upjohn-chart-notes,
.upjohn-chart-source {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--chart-text-muted);
  line-height: 1.5;
  margin: 0 0 var(--spacing-xs) 0;
}

.upjohn-chart-source {
  font-style: italic;
}

.upjohn-chart-source a {
  color: var(--primary-teal);
  text-decoration: none;
}

.upjohn-chart-source a:hover {
  text-decoration: underline;
}

/* Export buttons in footer */
.upjohn-chart-footer .upjohn-chart-export {
  margin-top: 0;
  flex-shrink: 0;
}

/* ============================================
   Export Controls
   ============================================ */
.upjohn-chart-controls {
  display: flex;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-md);
}

.upjohn-chart-button {
  font-family: var(--font-heading);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  padding: var(--spacing-xs) var(--spacing-md);
  border: 1px solid var(--upjohn-dark-teal);
  border-radius: var(--border-radius-md);
  background: var(--chart-background);
  color: var(--upjohn-dark-teal);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.upjohn-chart-button:hover,
.upjohn-chart-button:focus {
  background: var(--upjohn-dark-teal);
  color: var(--chart-background);
}

.upjohn-chart-button:focus {
  outline: 2px solid var(--upjohn-teal);
  outline-offset: 2px;
}

/* Export Buttons */
.upjohn-chart-export {
  display: flex;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-md);
  justify-content: flex-end;
}

.upjohn-chart-export-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  padding: var(--spacing-xs) var(--spacing-md);
  border: 1px solid var(--chart-grid-line);
  border-radius: var(--border-radius-md);
  background: var(--chart-background);
  color: var(--chart-text-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.upjohn-chart-export-btn:hover {
  border-color: var(--upjohn-dark-teal);
  color: var(--upjohn-dark-teal);
}

.upjohn-chart-export-btn:focus {
  outline: 2px solid var(--upjohn-teal);
  outline-offset: 2px;
}

.upjohn-chart-export-btn svg {
  width: 14px;
  height: 14px;
}

/* Share Buttons */
.upjohn-chart-share {
  display: flex;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-sm);
}

.upjohn-chart-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--chart-grid-line);
  border-radius: var(--border-radius-md);
  background: var(--chart-background);
  color: var(--chart-text-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.upjohn-chart-share-btn:focus {
  outline: 2px solid var(--upjohn-teal);
  outline-offset: 2px;
}

.upjohn-chart-share-btn svg {
  width: 16px;
  height: 16px;
}

/* Platform-specific hover colors */
.upjohn-chart-share-btn.linkedin:hover {
  border-color: #0A66C2;
  color: #0A66C2;
  background: rgba(10, 102, 194, 0.1);
}

.upjohn-chart-share-btn.twitter:hover {
  border-color: #000000;
  color: #000000;
  background: rgba(0, 0, 0, 0.05);
}

.upjohn-chart-share-btn.bluesky:hover {
  border-color: #1185FE;
  color: #1185FE;
  background: rgba(17, 133, 254, 0.1);
}

/* ============================================
   Dropdown (Series Selection)
   ============================================ */
.upjohn-chart-dropdown {
  position: relative;
  display: inline-block;
  margin-bottom: var(--spacing-md);
}

.upjohn-chart-dropdown select {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  padding: var(--spacing-sm) var(--spacing-xl) var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--chart-grid-line);
  border-radius: var(--border-radius-md);
  background: var(--chart-background);
  color: var(--chart-text);
  cursor: pointer;
  appearance: none;
  min-width: 200px;
}

.upjohn-chart-dropdown::after {
  content: "";
  position: absolute;
  right: var(--spacing-md);
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid var(--chart-text);
  pointer-events: none;
}

.upjohn-chart-dropdown select:focus {
  outline: 2px solid var(--upjohn-teal);
  outline-offset: 2px;
}

/* ============================================
   Accessibility
   ============================================ */
.upjohn-chart *:focus {
  outline: 2px solid var(--upjohn-teal);
  outline-offset: 2px;
}

.upjohn-chart .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link for keyboard navigation */
.upjohn-chart-skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--upjohn-dark-teal);
  color: var(--chart-background);
  padding: var(--spacing-sm);
  z-index: 100;
}

.upjohn-chart-skip-link:focus {
  top: 0;
}

/* Focus indicator for data elements */
.upjohn-chart .data-point:focus,
.upjohn-chart .bar:focus,
.upjohn-chart .slope-line:focus {
  outline: 2px solid var(--upjohn-teal);
  outline-offset: 2px;
}

/* Keyboard navigation focus state */
.upjohn-chart .keyboard-focus {
  outline: 3px solid var(--upjohn-teal);
  outline-offset: 2px;
  animation: upjohn-focus-pulse 1s ease-in-out infinite;
}

@keyframes upjohn-focus-pulse {
  0%, 100% {
    outline-width: 2px;
  }
  50% {
    outline-width: 4px;
  }
}

/* Screen reader only elements */
.upjohn-chart-description,
.upjohn-chart-live {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Data table (alternative representation) */
.upjohn-chart-data-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--spacing-md);
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
}

.upjohn-chart-data-table th,
.upjohn-chart-data-table td {
  padding: var(--spacing-xs) var(--spacing-sm);
  text-align: left;
  border-bottom: 1px solid var(--chart-grid-line);
}

.upjohn-chart-data-table th {
  font-weight: var(--font-weight-semibold);
  color: var(--chart-text);
  background: var(--upjohn-gray-lightest);
}

.upjohn-chart-data-table tbody tr:hover {
  background: var(--upjohn-gray-lightest);
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .upjohn-chart .data-point,
  .upjohn-chart .bar {
    stroke-width: 2px;
    stroke: #000;
  }

  .upjohn-chart .line {
    stroke-width: 3px;
  }

  .upjohn-chart .keyboard-focus {
    outline: 3px solid #000;
  }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .upjohn-chart,
  .upjohn-chart * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================
   Animations
   ============================================ */
@keyframes upjohn-line-draw {
  from {
    stroke-dashoffset: 10000;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes upjohn-bar-grow {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}

@keyframes upjohn-bar-grow-horizontal {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

@keyframes upjohn-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes upjohn-point-pop {
  from {
    transform: scale(0);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.upjohn-chart.animate .line {
  stroke-dasharray: 10000;
  stroke-dashoffset: 10000;
  animation: upjohn-line-draw 1.5s ease-out forwards;
}

.upjohn-chart.animate .bar {
  transform-origin: bottom;
  animation: upjohn-bar-grow 0.6s ease-out forwards;
}

.upjohn-chart.animate .bar.horizontal {
  transform-origin: left;
  animation: upjohn-bar-grow-horizontal 0.6s ease-out forwards;
}

.upjohn-chart.animate .data-point {
  animation: upjohn-point-pop 0.3s ease-out forwards;
}

/* Staggered bar animation */
.upjohn-chart.animate .bar:nth-child(1) { animation-delay: 0ms; }
.upjohn-chart.animate .bar:nth-child(2) { animation-delay: 50ms; }
.upjohn-chart.animate .bar:nth-child(3) { animation-delay: 100ms; }
.upjohn-chart.animate .bar:nth-child(4) { animation-delay: 150ms; }
.upjohn-chart.animate .bar:nth-child(5) { animation-delay: 200ms; }
.upjohn-chart.animate .bar:nth-child(6) { animation-delay: 250ms; }
.upjohn-chart.animate .bar:nth-child(7) { animation-delay: 300ms; }
.upjohn-chart.animate .bar:nth-child(8) { animation-delay: 350ms; }
.upjohn-chart.animate .bar:nth-child(9) { animation-delay: 400ms; }
.upjohn-chart.animate .bar:nth-child(10) { animation-delay: 450ms; }

/* Staggered point animation */
.upjohn-chart.animate .data-point:nth-child(1) { animation-delay: 1500ms; }
.upjohn-chart.animate .data-point:nth-child(2) { animation-delay: 1550ms; }
.upjohn-chart.animate .data-point:nth-child(3) { animation-delay: 1600ms; }
.upjohn-chart.animate .data-point:nth-child(4) { animation-delay: 1650ms; }
.upjohn-chart.animate .data-point:nth-child(5) { animation-delay: 1700ms; }
.upjohn-chart.animate .data-point:nth-child(6) { animation-delay: 1750ms; }
.upjohn-chart.animate .data-point:nth-child(7) { animation-delay: 1800ms; }
.upjohn-chart.animate .data-point:nth-child(8) { animation-delay: 1850ms; }
.upjohn-chart.animate .data-point:nth-child(9) { animation-delay: 1900ms; }
.upjohn-chart.animate .data-point:nth-child(10) { animation-delay: 1950ms; }

/* ============================================
   Loading State
   ============================================ */
.upjohn-chart-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  color: var(--chart-text-muted);
  font-family: var(--font-body);
}

.upjohn-chart-loading::after {
  content: "";
  width: 24px;
  height: 24px;
  margin-left: var(--spacing-sm);
  border: 2px solid var(--chart-grid-line);
  border-top-color: var(--upjohn-teal);
  border-radius: 50%;
  animation: upjohn-spin 0.8s linear infinite;
}

@keyframes upjohn-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Error State */
.upjohn-chart-error {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  min-height: 200px;
  color: var(--upjohn-gray-dark);
  font-family: var(--font-body);
  padding: var(--spacing-xl);
  text-align: left;
  background-color: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: var(--border-radius-md);
  margin: var(--spacing-lg);
  gap: var(--spacing-md);
}

.upjohn-chart-error-icon {
  flex-shrink: 0;
  color: var(--upjohn-red);
  margin-top: 2px;
}

.upjohn-chart-error-message {
  flex: 1;
}

.upjohn-chart-error-title {
  font-family: var(--font-heading);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--upjohn-red);
  margin: 0 0 var(--spacing-xs) 0;
}

.upjohn-chart-error-detail {
  font-size: var(--font-size-sm);
  color: var(--upjohn-gray-dark);
  margin: 0;
  line-height: 1.5;
}

/* ============================================
   Responsive Adjustments
   ============================================ */

/* Tablet breakpoint (768px and below) */
@media (max-width: 768px) {
  :root {
    --font-size-xs: 9px;
    --font-size-sm: 11px;
    --font-size-base: 13px;
    --font-size-md: 15px;
    --font-size-lg: 17px;
    --font-size-xl: 18px;
  }

  .upjohn-chart-title {
    font-size: var(--font-size-lg);
  }

  .upjohn-chart-legend {
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    justify-content: center;
  }

  .upjohn-chart-controls {
    flex-direction: column;
  }

  .upjohn-chart-dropdown select {
    width: 100%;
    min-width: auto;
  }

  /* Touch-friendly targets (44px minimum) */
  .upjohn-chart .data-point {
    min-width: 44px;
    min-height: 44px;
  }

  .upjohn-chart-legend-item {
    padding: var(--spacing-sm);
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .upjohn-chart-export {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
  }

  .upjohn-chart-export-btn {
    justify-content: center;
    padding: var(--spacing-sm) var(--spacing-md);
    min-height: 44px;
  }

  /* Footer actions responsive layout */
  .upjohn-chart-footer-actions {
    width: 100%;
    align-items: center;
  }

  .upjohn-chart-logo svg {
    height: 32px;
  }

  .upjohn-chart-buttons-row {
    justify-content: center;
    width: 100%;
  }

  /* Tooltip adjustments for touch */
  .upjohn-chart-tooltip {
    font-size: var(--font-size-sm);
    max-width: 200px;
  }
}

/* Mobile breakpoint (480px and below) */
@media (max-width: 480px) {
  :root {
    --font-size-xs: 8px;
    --font-size-sm: 10px;
    --font-size-base: 12px;
  }

  .upjohn-chart {
    min-height: 250px;
  }

  .upjohn-chart-title {
    font-size: var(--font-size-md);
    margin-bottom: var(--spacing-sm);
  }

  .upjohn-chart-subtitle {
    font-size: var(--font-size-sm);
  }

  .upjohn-chart-legend-item {
    font-size: var(--font-size-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
  }

  .upjohn-chart-legend {
    flex-direction: column;
    gap: var(--spacing-xs);
    align-items: flex-start;
  }

  /* Simplified legend for small screens */
  .upjohn-chart-legend-swatch {
    width: 12px;
    height: 12px;
  }

  /* Larger touch targets for bars */
  .upjohn-chart .bar {
    cursor: pointer;
    touch-action: manipulation;
  }

  /* Tooltip positioning for mobile */
  .upjohn-chart-tooltip {
    position: fixed;
    left: 50% !important;
    transform: translateX(-50%);
    bottom: 20px;
    top: auto !important;
    max-width: calc(100vw - 40px);
  }

  /* Stack axis labels if needed */
  .upjohn-chart .tick text {
    font-size: 9px;
  }

  /* Notes and source smaller */
  .upjohn-chart-notes,
  .upjohn-chart-source {
    font-size: 10px;
  }

  /* Footer actions mobile layout */
  .upjohn-chart-footer {
    flex-direction: column;
    gap: var(--spacing-md);
  }

  .upjohn-chart-footer-actions {
    width: 100%;
    align-items: center;
  }

  .upjohn-chart-logo svg {
    height: 28px;
  }

  .upjohn-chart-buttons-row {
    justify-content: center;
    gap: var(--spacing-xs);
  }

  .upjohn-chart-export-btn span {
    /* Hide text on small screens, keep icons */
    display: none;
  }

  .upjohn-chart-export-btn {
    padding: var(--spacing-sm);
  }
}

/* Very small screens (320px) */
@media (max-width: 320px) {
  .upjohn-chart-title {
    font-size: var(--font-size-base);
  }

  .upjohn-chart-legend {
    display: none;
  }

  .upjohn-chart-dropdown {
    width: 100%;
  }
}

/* Landscape orientation on mobile */
@media (max-width: 768px) and (orientation: landscape) {
  .upjohn-chart {
    min-height: 200px;
    max-height: 60vh;
  }

  .upjohn-chart-legend {
    position: absolute;
    top: 0;
    right: 0;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.9);
    padding: var(--spacing-xs);
    border-radius: var(--border-radius-md);
  }
}

/* Touch device detection */
@media (hover: none) and (pointer: coarse) {
  /* Larger hit areas for touch */
  .upjohn-chart .data-point {
    r: 8;
  }

  .upjohn-chart .bar {
    touch-action: manipulation;
  }

  .upjohn-chart-legend-item:active {
    background: var(--upjohn-gray-lightest);
  }

  /* Remove hover-dependent interactions */
  .upjohn-chart .line:hover {
    stroke-width: inherit;
  }

  /* Touch-friendly dropdown */
  .upjohn-chart-dropdown select {
    font-size: 16px; /* Prevents iOS zoom */
    padding: var(--spacing-sm) var(--spacing-lg) var(--spacing-sm) var(--spacing-md);
  }
}

/* ============================================
   Print Styles
   ============================================ */
@media print {
  .upjohn-chart-controls {
    display: none;
  }

  .upjohn-chart {
    break-inside: avoid;
  }

  .upjohn-chart.animate .line,
  .upjohn-chart.animate .bar,
  .upjohn-chart.animate .data-point {
    animation: none;
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    transform: none;
    opacity: 1;
  }
}

/* ============================================
   High Contrast Mode
   ============================================ */
@media (prefers-contrast: high) {
  .upjohn-chart .line {
    stroke-width: 3px;
  }

  .upjohn-chart .data-point {
    stroke-width: 3px;
  }

  .upjohn-chart .axis path,
  .upjohn-chart .axis line {
    stroke-width: 2px;
  }
}

/* ============================================
   Reduced Motion
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  .upjohn-chart.animate .line,
  .upjohn-chart.animate .bar,
  .upjohn-chart.animate .data-point,
  .upjohn-chart-loading::after {
    animation: none;
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    transform: none;
    opacity: 1;
  }

  .upjohn-chart-tooltip,
  .upjohn-chart-legend-item,
  .upjohn-chart .bar,
  .upjohn-chart .data-point,
  .upjohn-chart-button {
    transition: none;
  }
}

/* ============================================
   Selection Info Panel (Scatter Chart)
   ============================================ */
.upjohn-chart-selection-info {
  position: absolute;
  top: var(--spacing-lg);
  right: var(--spacing-lg);
  background: white;
  border: 1px solid var(--upjohn-gray-lightest);
  border-radius: var(--border-radius-lg);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 0;
  min-width: 200px;
  max-width: 280px;
  z-index: 100;
  font-family: var(--font-heading);
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
  pointer-events: none;
}

.upjohn-chart-selection-info.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.selection-info-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--upjohn-dark-teal);
  color: white;
  border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
}

.selection-info-swatch {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 2px solid rgba(255, 255, 255, 0.5);
}

.selection-info-label {
  flex: 1;
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-md);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.selection-info-close {
  background: none;
  border: none;
  color: white;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  margin: -4px -4px -4px 0;
  opacity: 0.7;
  transition: opacity var(--transition-fast);
}

.selection-info-close:hover,
.selection-info-close:focus {
  opacity: 1;
}

.selection-info-close:focus {
  outline: 2px solid white;
  outline-offset: 2px;
}

.selection-info-content {
  padding: var(--spacing-md) var(--spacing-lg);
}

.selection-info-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--spacing-md);
  padding: var(--spacing-xs) 0;
  font-size: var(--font-size-sm);
}

.selection-info-row:not(:last-child) {
  border-bottom: 1px solid var(--upjohn-gray-lightest);
}

.selection-info-key {
  color: var(--chart-text-light);
  font-weight: var(--font-weight-medium);
}

.selection-info-value {
  color: var(--chart-text);
  font-weight: var(--font-weight-semibold);
  text-align: right;
}

/* Selected point styling */
.upjohn-chart .data-point.selected {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* Dimmed points (when one is selected) */
.upjohn-chart .data-point.dimmed {
  opacity: 0.4;
}

/* ============================================
   NHQI Explorer - Control Panel
   ============================================ */
.nhqi-explorer {
  font-family: var(--font-body);
}

.nhqi-chart-container {
  position: relative;
}

.nhqi-control-panel {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
  padding: var(--spacing-lg);
  background: #f8f9fa;
  border-radius: var(--border-radius-lg);
  border: 1px solid var(--upjohn-gray-lightest);
}

.nhqi-control-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-lg);
  align-items: flex-start;
}

.nhqi-control-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.nhqi-control-label {
  font-family: var(--font-heading);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--chart-text-light);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ============================================
   NHQI Explorer - Metric Tabs
   ============================================ */
.nhqi-metric-tabs {
  display: flex;
  gap: 0;
  border-radius: var(--border-radius-md);
  overflow: hidden;
  border: 1px solid var(--upjohn-gray-lightest);
  background: white;
}

.nhqi-metric-tab {
  padding: var(--spacing-sm) var(--spacing-lg);
  font-family: var(--font-heading);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--chart-text);
  background: white;
  border: none;
  border-right: 1px solid var(--upjohn-gray-lightest);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.nhqi-metric-tab:last-child {
  border-right: none;
}

.nhqi-metric-tab:hover {
  background: var(--upjohn-blue-lightest);
  color: var(--upjohn-dark-teal);
}

.nhqi-metric-tab:focus {
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
  z-index: 1;
}

.nhqi-metric-tab.active {
  background: var(--upjohn-dark-teal);
  color: white;
}

.nhqi-metric-tab.active:hover {
  background: var(--upjohn-blue-dark);
}

/* ============================================
   NHQI Explorer - Normalize Toggle
   ============================================ */
.nhqi-toggle {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  cursor: pointer;
  user-select: none;
}

.nhqi-toggle-switch {
  position: relative;
  width: 44px;
  height: 24px;
  background: var(--upjohn-gray-lighter);
  border-radius: 12px;
  transition: background var(--transition-fast);
  flex-shrink: 0;
}

.nhqi-toggle-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform var(--transition-fast);
}

.nhqi-toggle.active .nhqi-toggle-switch {
  background: var(--upjohn-dark-teal);
}

.nhqi-toggle.active .nhqi-toggle-switch::after {
  transform: translateX(20px);
}

.nhqi-toggle:focus-within .nhqi-toggle-switch {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.nhqi-toggle-label {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--chart-text);
}

.nhqi-toggle-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* ============================================
   NHQI Explorer - Date Range Selector
   ============================================ */
.nhqi-date-range {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

.nhqi-date-select {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  padding: var(--spacing-xs) var(--spacing-md);
  padding-right: var(--spacing-xl);
  border: 1px solid var(--upjohn-gray-lightest);
  border-radius: var(--border-radius-md);
  background: white;
  color: var(--chart-text);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23636466' d='M2 4l4 4 4-4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  min-width: 120px;
}

.nhqi-date-select:hover {
  border-color: var(--upjohn-gray-medium);
}

.nhqi-date-select:focus {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-color: var(--upjohn-teal);
}

.nhqi-date-separator {
  color: var(--chart-text-muted);
  font-size: var(--font-size-sm);
}

.nhqi-date-presets {
  display: flex;
  gap: var(--spacing-xs);
  margin-left: var(--spacing-sm);
}

.nhqi-date-preset {
  padding: var(--spacing-xs) var(--spacing-sm);
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  color: var(--upjohn-dark-teal);
  background: transparent;
  border: 1px solid var(--upjohn-dark-teal);
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.nhqi-date-preset:hover {
  background: var(--upjohn-dark-teal);
  color: white;
}

.nhqi-date-preset:focus {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.nhqi-date-preset.active {
  background: var(--upjohn-dark-teal);
  color: white;
}

/* ============================================
   NHQI Explorer - Multi-Select Combobox
   ============================================ */
.nhqi-combobox {
  position: relative;
  min-width: 280px;
  flex: 1;
  max-width: 400px;
}

.nhqi-combobox-input-wrapper {
  position: relative;
}

.nhqi-combobox-input {
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  padding-right: var(--spacing-xl);
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  border: 1px solid var(--upjohn-gray-lightest);
  border-radius: var(--border-radius-md);
  background: white;
  color: var(--chart-text);
}

.nhqi-combobox-input:focus {
  outline: none;
  border-color: var(--upjohn-teal);
  box-shadow: 0 0 0 3px rgba(43, 156, 180, 0.15);
}

.nhqi-combobox-input::placeholder {
  color: var(--chart-text-muted);
}

.nhqi-combobox-icon {
  position: absolute;
  right: var(--spacing-sm);
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--chart-text-muted);
  pointer-events: none;
}

.nhqi-combobox-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 320px;
  overflow-y: auto;
  background: white;
  border: 1px solid var(--upjohn-gray-lightest);
  border-radius: var(--border-radius-md);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  margin-top: 4px;
  display: none;
}

.nhqi-combobox.open .nhqi-combobox-dropdown {
  display: block;
}

.nhqi-combobox-group {
  padding: var(--spacing-xs) 0;
}

.nhqi-combobox-group:not(:last-child) {
  border-bottom: 1px solid var(--upjohn-gray-lightest);
}

.nhqi-combobox-group-label {
  padding: var(--spacing-xs) var(--spacing-md);
  font-family: var(--font-heading);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--chart-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.nhqi-combobox-option {
  padding: var(--spacing-sm) var(--spacing-md);
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--chart-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  transition: background var(--transition-fast);
}

.nhqi-combobox-option:hover,
.nhqi-combobox-option.highlighted {
  background: var(--upjohn-blue-lightest);
}

.nhqi-combobox-option.selected {
  background: rgba(43, 156, 180, 0.1);
  color: var(--upjohn-dark-teal);
}

.nhqi-combobox-option.selected::before {
  content: '✓';
  font-size: var(--font-size-xs);
  color: var(--upjohn-dark-teal);
  flex-shrink: 0;
}

.nhqi-combobox-option.hidden {
  display: none;
}

.nhqi-combobox-empty {
  padding: var(--spacing-md);
  text-align: center;
  color: var(--chart-text-muted);
  font-size: var(--font-size-sm);
}

/* ============================================
   NHQI Explorer - Chips Container
   ============================================ */
.nhqi-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  min-height: 32px;
  padding: var(--spacing-xs);
  background: white;
  border: 1px solid var(--upjohn-gray-lightest);
  border-radius: var(--border-radius-md);
  margin-top: var(--spacing-xs);
}

.nhqi-chips:empty::before {
  content: 'No groups selected';
  color: var(--chart-text-muted);
  font-size: var(--font-size-sm);
  padding: var(--spacing-xs);
}

.nhqi-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--upjohn-gray-lightest);
  border: 1px solid var(--upjohn-gray-lighter);
  border-radius: 16px;
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  color: var(--chart-text);
  cursor: pointer;
  transition: all var(--transition-fast);
  user-select: none;
}

.nhqi-chip:hover {
  background: var(--upjohn-blue-lightest);
  border-color: var(--upjohn-teal);
}

.nhqi-chip:focus {
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
}

/* Pinned state - filled with brand color */
.nhqi-chip.pinned {
  background: var(--upjohn-dark-teal);
  border-color: var(--upjohn-dark-teal);
  color: white;
}

.nhqi-chip.pinned:hover {
  background: var(--upjohn-blue-dark);
  border-color: var(--upjohn-blue-dark);
}

.nhqi-chip-swatch {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.nhqi-chip.pinned .nhqi-chip-swatch {
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.nhqi-chip-label {
  white-space: nowrap;
}

.nhqi-chip-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 0;
  margin-left: 2px;
  opacity: 0.6;
  transition: opacity var(--transition-fast), background var(--transition-fast);
}

.nhqi-chip-remove:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.1);
}

.nhqi-chip.pinned .nhqi-chip-remove:hover {
  background: rgba(255, 255, 255, 0.2);
}

.nhqi-chip-remove svg {
  width: 10px;
  height: 10px;
}

/* Chip actions row */
.nhqi-chips-actions {
  display: flex;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-xs);
}

.nhqi-chips-action {
  padding: var(--spacing-xs) var(--spacing-sm);
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  color: var(--chart-text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color var(--transition-fast);
}

.nhqi-chips-action:hover {
  color: var(--upjohn-dark-teal);
  text-decoration: underline;
}

/* Presets dropdown */
.nhqi-presets-dropdown {
  position: relative;
  display: inline-block;
}

.nhqi-presets-btn {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  color: var(--upjohn-dark-teal);
  background: transparent;
  border: 1px solid var(--upjohn-dark-teal);
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.nhqi-presets-btn:hover {
  background: var(--upjohn-dark-teal);
  color: white;
}

.nhqi-presets-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 180px;
  background: white;
  border: 1px solid var(--upjohn-gray-lightest);
  border-radius: var(--border-radius-md);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  margin-top: 4px;
  display: none;
}

.nhqi-presets-dropdown.open .nhqi-presets-menu {
  display: block;
}

.nhqi-preset-item {
  display: block;
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--chart-text);
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.nhqi-preset-item:hover {
  background: var(--upjohn-blue-lightest);
}

.nhqi-preset-item:first-child {
  border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
}

.nhqi-preset-item:last-child {
  border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
}

/* ============================================
   NHQI Explorer - Line Styling for Pinned/Unpinned
   ============================================ */
.nhqi-explorer .line.pinned {
  stroke-width: 3.5px;
  opacity: 1;
}

.nhqi-explorer .line.unpinned {
  stroke-width: 2.5px;
  opacity: 0.25;
  stroke: var(--upjohn-gray-lighter) !important;
}

.nhqi-explorer .line.unpinned.hovered {
  opacity: 0.8;
  stroke-width: 3px;
}

/* Hover-only markers */
.nhqi-explorer .hover-marker {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast);
}

.nhqi-explorer .hover-marker.visible {
  opacity: 1;
}

/* Reference line at y=100 when indexed */
.nhqi-explorer .reference-line-100 {
  stroke: var(--reference-line);
  stroke-width: 1px;
  stroke-dasharray: 4, 3;
}

.nhqi-explorer .reference-line-label {
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  fill: var(--reference-label);
}

/* ============================================
   NHQI Explorer - Tooltip Pinned Summary Mode
   ============================================ */
.nhqi-tooltip-date {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  color: var(--chart-text);
  margin-bottom: var(--spacing-xs);
  padding-bottom: var(--spacing-xs);
  border-bottom: 1px solid var(--upjohn-gray-lightest);
}

.nhqi-tooltip-pinned {
  margin-bottom: var(--spacing-xs);
}

.nhqi-tooltip-more {
  font-size: var(--font-size-xs);
  color: var(--chart-text-muted);
  font-style: italic;
  padding-top: var(--spacing-xs);
  border-top: 1px solid var(--upjohn-gray-lightest);
}

/* ============================================
   NHQI Explorer - Responsive Adjustments
   ============================================ */
@media (max-width: 768px) {
  .nhqi-control-panel {
    padding: var(--spacing-md);
    gap: var(--spacing-md);
  }

  .nhqi-control-row {
    flex-direction: column;
    gap: var(--spacing-md);
  }

  .nhqi-metric-tabs {
    flex-wrap: wrap;
  }

  .nhqi-metric-tab {
    flex: 1;
    min-width: calc(50% - 1px);
    text-align: center;
    padding: var(--spacing-sm);
  }

  .nhqi-date-range {
    flex-direction: column;
    align-items: stretch;
  }

  .nhqi-date-select {
    width: 100%;
  }

  .nhqi-date-presets {
    margin-left: 0;
    justify-content: center;
  }

  .nhqi-combobox {
    min-width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .nhqi-metric-tab {
    font-size: var(--font-size-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
  }

  .nhqi-chip {
    font-size: 10px;
    padding: 2px var(--spacing-xs);
  }

  .nhqi-chip-swatch {
    width: 8px;
    height: 8px;
  }
}

/* ============================================
   Phase 2: New Chart Types
   ============================================ */

/* ============================================
   Area / Streamgraph Charts
   ============================================ */
.upjohn-chart .area-path {
  transition: opacity var(--transition-fast);
}

.upjohn-chart .area-path.dimmed {
  opacity: 0.15;
}

.upjohn-chart .area-path.highlighted {
  opacity: 0.9;
}

.upjohn-chart .streamgraph-path {
  transition: opacity var(--transition-fast);
  cursor: pointer;
}

.upjohn-chart .streamgraph-path.dimmed {
  opacity: 0.15;
}

.upjohn-chart .streamgraph-path:hover {
  opacity: 0.85;
}

/* ============================================
   Heatmap
   ============================================ */
.upjohn-chart .heatmap-cell {
  stroke: var(--chart-background);
  stroke-width: 1px;
  transition: opacity var(--transition-fast), stroke-width var(--transition-fast);
  cursor: pointer;
}

.upjohn-chart .heatmap-cell:hover,
.upjohn-chart .heatmap-cell:focus {
  stroke-width: 2px;
  stroke: var(--upjohn-dark-teal);
}

.upjohn-chart .heatmap-cell.dimmed {
  opacity: 0.25;
}

.upjohn-chart .heatmap-label {
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  fill: var(--chart-text);
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
}

/* ============================================
   Radar Chart
   ============================================ */
.upjohn-chart .radar-grid-circle {
  fill: none;
  stroke: var(--chart-grid-line);
  stroke-width: 1px;
}

.upjohn-chart .radar-axis-line {
  stroke: var(--chart-grid-line);
  stroke-width: 1px;
}

.upjohn-chart .radar-axis-label {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  fill: var(--chart-text);
  text-anchor: middle;
}

.upjohn-chart .radar-area {
  transition: opacity var(--transition-fast);
  cursor: pointer;
}

.upjohn-chart .radar-area.dimmed {
  opacity: 0.1;
}

.upjohn-chart .radar-area:hover {
  opacity: 0.7;
}

.upjohn-chart .radar-line {
  fill: none;
  stroke-width: 2px;
  transition: opacity var(--transition-fast);
}

.upjohn-chart .radar-line.dimmed {
  opacity: 0.2;
}

.upjohn-chart .radar-point {
  stroke: var(--chart-background);
  stroke-width: 2px;
  transition: r var(--transition-fast);
  cursor: pointer;
}

.upjohn-chart .radar-point:hover {
  r: 6;
}

/* ============================================
   Treemap / Sunburst / Packed Circles
   ============================================ */
.upjohn-chart .treemap-cell {
  stroke: var(--chart-background);
  stroke-width: 2px;
  transition: opacity var(--transition-fast);
  cursor: pointer;
}

.upjohn-chart .treemap-cell:hover,
.upjohn-chart .treemap-cell:focus {
  opacity: 0.85;
}

.upjohn-chart .treemap-cell.dimmed {
  opacity: 0.25;
}

.upjohn-chart .treemap-label {
  font-family: var(--font-heading);
  font-size: var(--font-size-xs);
  fill: white;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.upjohn-chart .sunburst-arc {
  stroke: var(--chart-background);
  stroke-width: 1px;
  transition: opacity var(--transition-fast);
  cursor: pointer;
}

.upjohn-chart .sunburst-arc:hover {
  opacity: 0.85;
}

.upjohn-chart .sunburst-arc.dimmed {
  opacity: 0.25;
}

.upjohn-chart .sunburst-label {
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  fill: var(--chart-text);
  pointer-events: none;
}

.upjohn-chart .packed-circle {
  stroke: var(--chart-background);
  stroke-width: 1px;
  transition: opacity var(--transition-fast);
  cursor: pointer;
}

.upjohn-chart .packed-circle:hover {
  opacity: 0.85;
}

.upjohn-chart .packed-circle.dimmed {
  opacity: 0.25;
}

.upjohn-chart .packed-circle-label {
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  fill: var(--chart-text);
  text-anchor: middle;
  pointer-events: none;
}

/* ============================================
   Sankey Diagram
   ============================================ */
.upjohn-chart .sankey-node {
  cursor: pointer;
  transition: opacity var(--transition-fast);
}

.upjohn-chart .sankey-node:hover {
  opacity: 0.85;
}

.upjohn-chart .sankey-node.dimmed {
  opacity: 0.25;
}

.upjohn-chart .sankey-link {
  fill: none;
  stroke-opacity: 0.3;
  transition: stroke-opacity var(--transition-fast);
}

.upjohn-chart .sankey-link:hover {
  stroke-opacity: 0.6;
}

.upjohn-chart .sankey-link.dimmed {
  stroke-opacity: 0.08;
}

.upjohn-chart .sankey-node-label {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  fill: var(--chart-text);
}

/* ============================================
   Chord Diagram
   ============================================ */
.upjohn-chart .chord-group-arc {
  cursor: pointer;
  transition: opacity var(--transition-fast);
}

.upjohn-chart .chord-group-arc:hover {
  opacity: 0.85;
}

.upjohn-chart .chord-ribbon {
  fill-opacity: 0.5;
  stroke: none;
  transition: fill-opacity var(--transition-fast);
  cursor: pointer;
}

.upjohn-chart .chord-ribbon:hover {
  fill-opacity: 0.75;
}

.upjohn-chart .chord-ribbon.dimmed {
  fill-opacity: 0.08;
}

.upjohn-chart .chord-group-label {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  fill: var(--chart-text);
}

/* ============================================
   Network Graph
   ============================================ */
.upjohn-chart .network-link {
  stroke: var(--chart-grid-line);
  stroke-opacity: 0.5;
  transition: stroke-opacity var(--transition-fast);
}

.upjohn-chart .network-link.highlighted {
  stroke-opacity: 1;
  stroke: var(--upjohn-dark-teal);
}

.upjohn-chart .network-link.dimmed {
  stroke-opacity: 0.1;
}

.upjohn-chart .network-node {
  cursor: grab;
  transition: opacity var(--transition-fast);
}

.upjohn-chart .network-node:active {
  cursor: grabbing;
}

.upjohn-chart .network-node.dimmed {
  opacity: 0.25;
}

.upjohn-chart .network-node-label {
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  fill: var(--chart-text);
  pointer-events: none;
}

/* ============================================
   Parliament / Election Charts
   ============================================ */
.upjohn-chart .parliament-seat {
  stroke: var(--chart-background);
  stroke-width: 0.5px;
  transition: opacity var(--transition-fast);
}

.upjohn-chart .parliament-seat.dimmed {
  opacity: 0.25;
}

.upjohn-chart .parliament-seat:hover {
  opacity: 0.85;
}

.upjohn-chart .parliament-label {
  font-family: var(--font-heading);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  fill: var(--chart-text);
  text-anchor: middle;
}

.upjohn-chart .election-segment {
  transition: opacity var(--transition-fast);
  cursor: pointer;
}

.upjohn-chart .election-segment.dimmed {
  opacity: 0.25;
}

.upjohn-chart .election-segment:hover {
  opacity: 0.85;
}

.upjohn-chart .election-label {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  fill: var(--chart-text);
}

/* ============================================
   Gauge
   ============================================ */
.upjohn-chart .gauge-background {
  fill: var(--upjohn-gray-lightest);
}

.upjohn-chart .gauge-fill {
  transition: d var(--transition-slow);
}

.upjohn-chart .gauge-value {
  font-family: var(--font-heading);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  fill: var(--upjohn-dark-teal);
  text-anchor: middle;
  dominant-baseline: middle;
}

.upjohn-chart .gauge-label {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  fill: var(--chart-text-light);
  text-anchor: middle;
}

.upjohn-chart .gauge-threshold-label {
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  fill: var(--chart-text-muted);
}

/* ============================================
   Pictogram
   ============================================ */
.upjohn-chart .pictogram-icon {
  transition: opacity var(--transition-fast);
}

.upjohn-chart .pictogram-icon.dimmed {
  opacity: 0.15;
}

.upjohn-chart .pictogram-label {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  fill: var(--chart-text);
}

.upjohn-chart .pictogram-count {
  font-family: var(--font-heading);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  fill: var(--chart-text);
}

/* ============================================
   Word Cloud
   ============================================ */
.upjohn-chart .word-cloud-text {
  cursor: pointer;
  transition: opacity var(--transition-fast);
}

.upjohn-chart .word-cloud-text:hover {
  opacity: 0.7;
}

.upjohn-chart .word-cloud-text.dimmed {
  opacity: 0.15;
}

.upjohn-chart .word-cloud-text.highlighted {
  font-weight: var(--font-weight-bold);
}

/* ============================================
   Calendar Chart
   ============================================ */
.upjohn-chart .calendar-day {
  stroke: var(--chart-background);
  stroke-width: 1px;
  transition: opacity var(--transition-fast);
  cursor: pointer;
}

.upjohn-chart .calendar-day:hover {
  stroke: var(--upjohn-dark-teal);
  stroke-width: 2px;
}

.upjohn-chart .calendar-month-label {
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  fill: var(--chart-text);
}

.upjohn-chart .calendar-day-label {
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  fill: var(--chart-text-muted);
}

/* ============================================
   Timeline Chart
   ============================================ */
.upjohn-chart .timeline-bar {
  rx: 3;
  ry: 3;
  transition: opacity var(--transition-fast);
  cursor: pointer;
}

.upjohn-chart .timeline-bar:hover {
  opacity: 0.85;
}

.upjohn-chart .timeline-bar.dimmed {
  opacity: 0.25;
}

.upjohn-chart .timeline-marker {
  transition: r var(--transition-fast), opacity var(--transition-fast);
  cursor: pointer;
}

.upjohn-chart .timeline-marker:hover {
  r: 8;
}

.upjohn-chart .timeline-label {
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  fill: var(--chart-text);
}

/* ============================================
   Gantt Chart
   ============================================ */
.upjohn-chart .gantt-bar {
  rx: 3;
  ry: 3;
  transition: opacity var(--transition-fast);
  cursor: pointer;
}

.upjohn-chart .gantt-bar:hover {
  opacity: 0.85;
}

.upjohn-chart .gantt-bar.dimmed {
  opacity: 0.25;
}

.upjohn-chart .gantt-label {
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  fill: white;
  pointer-events: none;
}

.upjohn-chart .gantt-today-line {
  stroke: var(--upjohn-red);
  stroke-width: 2px;
  stroke-dasharray: 4, 3;
}

/* ============================================
   Bar Race / Line Race
   ============================================ */
.upjohn-chart .race-bar {
  transition: all 0.5s ease-out;
}

.upjohn-chart .race-bar-label {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  fill: var(--chart-text);
}

.upjohn-chart .race-bar-value {
  font-family: var(--font-heading);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  fill: var(--chart-text);
}

.upjohn-chart .race-controls {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-top: var(--spacing-md);
}

.upjohn-chart .race-play-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--upjohn-dark-teal);
  background: var(--chart-background);
  color: var(--upjohn-dark-teal);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.upjohn-chart .race-play-btn:hover {
  background: var(--upjohn-dark-teal);
  color: white;
}

.upjohn-chart .race-slider {
  flex: 1;
  height: 4px;
  -webkit-appearance: none;
  background: var(--chart-grid-line);
  border-radius: 2px;
  outline: none;
}

.upjohn-chart .race-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--upjohn-dark-teal);
  cursor: pointer;
}

.upjohn-chart .race-time-label {
  font-family: var(--font-heading);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--upjohn-dark-teal);
}

/* ============================================
   Bump Chart
   ============================================ */
.upjohn-chart .bump-line {
  fill: none;
  stroke-width: 2.5px;
  transition: opacity var(--transition-fast);
}

.upjohn-chart .bump-line.dimmed {
  opacity: 0.15;
}

.upjohn-chart .bump-line.highlighted {
  stroke-width: 4px;
}

.upjohn-chart .bump-point {
  stroke: var(--chart-background);
  stroke-width: 2px;
  transition: r var(--transition-fast), opacity var(--transition-fast);
  cursor: pointer;
}

.upjohn-chart .bump-point.dimmed {
  opacity: 0.15;
}

.upjohn-chart .bump-point:hover {
  r: 7;
}

.upjohn-chart .bump-label {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  fill: var(--chart-text);
}

/* ============================================
   Marimekko Chart
   ============================================ */
.upjohn-chart .marimekko-cell {
  stroke: var(--chart-background);
  stroke-width: 2px;
  transition: opacity var(--transition-fast);
  cursor: pointer;
}

.upjohn-chart .marimekko-cell:hover {
  opacity: 0.85;
}

.upjohn-chart .marimekko-cell.dimmed {
  opacity: 0.25;
}

.upjohn-chart .marimekko-label {
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  fill: white;
  text-anchor: middle;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.upjohn-chart .marimekko-column-label {
  font-family: var(--font-heading);
  font-size: var(--font-size-sm);
  fill: var(--chart-text);
  text-anchor: middle;
}

/* ============================================
   Number Ticker
   ============================================ */
.upjohn-chart-html-content .number-ticker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-xl);
  padding: var(--spacing-xl);
}

.upjohn-chart-html-content .number-ticker-item {
  text-align: center;
  padding: var(--spacing-lg);
}

.upjohn-chart-html-content .number-ticker-value {
  font-family: var(--font-heading);
  font-size: 48px;
  font-weight: var(--font-weight-bold);
  color: var(--upjohn-dark-teal);
  line-height: 1.1;
}

.upjohn-chart-html-content .number-ticker-label {
  font-family: var(--font-body);
  font-size: var(--font-size-md);
  color: var(--chart-text-light);
  margin-top: var(--spacing-sm);
}

/* ============================================
   Table Chart
   ============================================ */
.upjohn-chart-html-content .chart-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
}

.upjohn-chart-html-content .chart-table th {
  padding: var(--spacing-sm) var(--spacing-md);
  text-align: left;
  border-bottom: 2px solid var(--upjohn-dark-teal);
  font-family: var(--font-heading);
  font-weight: var(--font-weight-semibold);
  color: var(--upjohn-dark-teal);
  cursor: pointer;
  user-select: none;
  transition: background var(--transition-fast);
}

.upjohn-chart-html-content .chart-table th:hover {
  background: var(--upjohn-blue-lightest);
}

.upjohn-chart-html-content .chart-table th .sort-indicator {
  margin-left: var(--spacing-xs);
  color: var(--chart-text-muted);
}

.upjohn-chart-html-content .chart-table td {
  padding: var(--spacing-sm) var(--spacing-md);
  border-bottom: 1px solid var(--chart-grid-line);
  color: var(--chart-text);
}

.upjohn-chart-html-content .chart-table tbody tr:hover {
  background: var(--upjohn-blue-lightest);
}

.upjohn-chart-html-content .chart-table tbody tr:nth-child(even) {
  background: #fafafa;
}

.upjohn-chart-html-content .chart-table tbody tr:nth-child(even):hover {
  background: var(--upjohn-blue-lightest);
}

.upjohn-chart-html-content .chart-table td.numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ============================================
   Cards Chart
   ============================================ */
.upjohn-chart-html-content .cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-lg);
  padding: var(--spacing-lg);
}

.upjohn-chart-html-content .chart-card {
  background: var(--chart-background);
  border: 1px solid var(--chart-grid-line);
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-xl);
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

.upjohn-chart-html-content .chart-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.upjohn-chart-html-content .chart-card-title {
  font-family: var(--font-heading);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--chart-text-light);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 var(--spacing-sm) 0;
}

.upjohn-chart-html-content .chart-card-value {
  font-family: var(--font-heading);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--upjohn-dark-teal);
  margin: 0;
}

.upjohn-chart-html-content .chart-card-description {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--chart-text-muted);
  margin: var(--spacing-sm) 0 0 0;
}

.upjohn-chart-html-content .chart-card-change {
  font-family: var(--font-heading);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  margin-top: var(--spacing-sm);
}

.upjohn-chart-html-content .chart-card-change.up {
  color: #2B9CB4;
}

.upjohn-chart-html-content .chart-card-change.down {
  color: #AF2C32;
}

/* ============================================
   Small Multiples
   ============================================ */
.upjohn-chart .small-multiples-grid {
  display: grid;
  gap: var(--spacing-md);
}

.upjohn-chart .small-multiple-cell {
  position: relative;
  border: 1px solid var(--chart-grid-line);
  border-radius: var(--border-radius-md);
  overflow: hidden;
}

.upjohn-chart .small-multiple-title {
  font-family: var(--font-heading);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--upjohn-dark-teal);
  padding: var(--spacing-sm) var(--spacing-md);
  background: #f8f9fa;
  border-bottom: 1px solid var(--chart-grid-line);
}

/* ============================================
   HTML Renderer Container
   ============================================ */
.upjohn-chart-html-renderer {
  min-height: 200px;
}

.upjohn-chart-html-content {
  width: 100%;
}

/* ============================================
   Pie Time Slider
   ============================================ */
.upjohn-chart .pie-time-slider {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md) 0;
}

.upjohn-chart .pie-time-slider input[type="range"] {
  flex: 1;
  height: 4px;
  -webkit-appearance: none;
  background: var(--chart-grid-line);
  border-radius: 2px;
  outline: none;
}

.upjohn-chart .pie-time-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--upjohn-dark-teal);
  cursor: pointer;
}

.upjohn-chart .pie-time-slider-label {
  font-family: var(--font-heading);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--upjohn-dark-teal);
  min-width: 80px;
  text-align: center;
}