/* Chart styling variables */
:root {
  --chart-width: 600px;
  --chart-height: 300px;
  --font-family: "Helvetica Neue", sans-serif;
  --axis-color: #333;
  --line-colors: #1f77b4, #ff7f0e, #2ca02c;
}

.plot-headline {
  font-family: 'Outfit', Arial, sans-serif;
  font-weight: 600;
  font-size: 1.25em;
  letter-spacing: -0.01em;
  color: #222831;
  margin: 0 auto 12px auto;
  padding: 0 0 4px 0;
  text-align: center;
  max-width: 700px;
  width: 100%;
}

/* Chart container styles */
.chart-container {
  width: 100%;
  max-width: 650px; /* Max width for charts, adjust as needed */ 
  margin-left: auto;   /* Center the container */
  margin-right: auto;  /* Center the container */
  margin-bottom: 10px; /* Consistent bottom margin before subtitle */
  position: relative;
  box-sizing: border-box;
  overflow: hidden;    /* Prevents content from spilling, safer default */
}

.chart-container svg,
.chart-container canvas { /* Style for SVG or Canvas within the container */
  display: block;      /* Remove extra space below inline elements */
  width: 100%;         /* Make the chart responsive within the container */
  height: 100%;        /* Make chart fill container height, or use 'auto' for aspect ratio */
  /* Note: For SVGs, preserveAspectRatio is often set in JS or on the SVG element itself */
}

/* Unified Plot Subtitle Styles */
.plot-subtitle {
  font-size: 0.9em;         /* Consistent font size */
  color: #555;             /* A clear, slightly muted color */
  text-align: left;         /* Default text alignment */
  width: 100%;              /* Take full width of its positioning context */
  max-width: 650px;       /* Align with the chart-container's max-width */
  margin: 10px auto 20px auto; /* Top margin, centered, bottom margin */
  padding: 0 5px;           /* Small horizontal padding for text near edges */
  box-sizing: border-box;
  line-height: 1.4;         /* Improve readability */
}

.chart-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px; /* Preserved from original chart-styles.css */
  width: 100%; /* From styles.css */
  margin-top: 0em; /* From styles.css */
  margin-bottom: 15px; /* Updated based on common inline style and memory */
  box-sizing: border-box; /* From styles.css */
  text-align: center; /* Added from inline style */
}

.legend-btn {
  background: transparent; /* Default transparent background */
  border: 1.5px solid #cccccc; /* Default neutral border */
  border-radius: 1.8em;
  font-size: 1.13em;
  font-family: var(--font-family);
  color: #444444; /* Default neutral text color */
  padding: 0.42em 1.8em;
  cursor: pointer;
  font-weight: 600; /* Slightly less bold for non-active */
  opacity: 0.85; /* Default opacity for non-active */
  letter-spacing: 0.01em;
  margin: 0 0.08em;
  transition: background 0.18s, color 0.15s, box-shadow 0.18s, opacity 0.15s, border-color 0.18s, text-decoration-color 0.18s;
}

.legend-btn:hover {
  opacity: 1;
  border-color: #999999; /* Darker border on hover for default buttons */
  color: #111111; /* Darker text on hover for default buttons */
  box-shadow: 0 2px 5px rgba(0,0,0,0.12);
}

.legend-btn.active {
  font-weight: 700; /* Bolder for active state */
  opacity: 1;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1); /* Subtle shadow to lift active button */
  /* Active border and text colors are inherited from non-active state (ID specific or JS inline) */
}

/* Plot-specific legend buttons (override general .legend-btn styles for background) */
#proxy-exog-btn,
#scatter-static-btn {
  border: 1.5px solid #1f77b4; /* Theme color for border */
  color: #1f77b4;             /* Theme color for text */
  background: transparent;     /* Transparent background */
}

#proxy-endog-btn,
#scatter-rotating-btn {
  border: 1.5px solid #ff7f0e; /* Theme color for border */
  color: #ff7f0e;             /* Theme color for text */
  background: transparent;     /* Transparent background */
}

/* Hover states for plot-specific buttons */
#proxy-exog-btn:hover,
#scatter-static-btn:hover {
  background: rgba(31, 119, 180, 0.1); /* Slight tint of their theme color */
  color: #1f77b4; 
  border-color: #1f77b4; 
}

#proxy-endog-btn:hover,
#scatter-rotating-btn:hover {
  background: rgba(255, 127, 14, 0.1); /* Slight tint of their theme color */
  color: #ff7f0e; 
  border-color: #ff7f0e; 
}

/* 
  ID-specific active states now primarily rely on the general .legend-btn.active 
  for font-weight, text-decoration (underline), and box-shadow.
  Their specific text and border colors are inherited from their non-active ID-specific styles 
  (e.g., #proxy-exog-btn will be blue, #proxy-endog-btn will be orange when active).
  The background remains transparent, also inherited from .legend-btn.
*/

#phi-slider-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 15px 0; /* Updated from inline style */
  text-align: center; /* Added from inline style */
}

/* Basic styling for the range slider */
#phi-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 150px; 
  height: 8px;
  background: #ddd; /* Default track color */
  outline: none;
  opacity: 0.9;
  -webkit-transition: .2s;
  transition: opacity .2s;
  vertical-align: middle; /* Important for alignment within flex container */
  border-radius: 5px;
  margin: 0 5px; /* For spacing within the container */
}

#phi-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  background: #666; /* Default thumb color */
  cursor: grab;
  border-radius: 50%;
  border: 2px solid white;
}

#phi-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: #666; /* Default thumb color */
  cursor: grab;
  border-radius: 50%;
  border: 2px solid white;
}

/* Active rotating mode styling for slider */
#phi-slider.rotating-active {
  background: #fddab8; /* Lighter orange for track */
}
#phi-slider.rotating-active::-webkit-slider-thumb {
  background: #ff7f0e; /* Orange thumb */
}
#phi-slider.rotating-active::-moz-range-thumb {
  background: #ff7f0e; /* Orange thumb */
}

/* Styles for label and span within the phi-slider-container */
#phi-slider-container label,
#phi-slider-container span {
  vertical-align: middle;
  color: #666; /* Consistent label color */
}

#phi-value-display {
  min-width: 35px;
  display: inline-block;
  text-align: left;
  color: #666; /* Match label color */
}

.chart-svg {
  font-family: var(--font-family);
}

.axis path,
.axis line {
  stroke: #222;
}

.axis text {
  fill: #222;
  font-size: 13px;
}

#moment-display-container {
  width: 100%;
  text-align: center;
  margin-top: 5px;
  margin-bottom: 15px;
  font-size: 1em; 
  color: #555;
}

#moment-display-container .moment-var {
  font-style: italic;
  color: #444; 
}