/* Root Variables */
:root {
  --color-bg:        #f8f9fa;
  --color-text:      #333333;
  --color-primary:   #4D8FAC;
  --color-nav:       #2C3E50;
  --color-secondary: #BDC3C7;
  --color-hover:     #5a7d94;   /* calming slate blue */
  --color-accent:    #00cec9;
}

/* Base Styles */
body {
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
  background-color: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
}

h1, h2, h3 {
  color: var(--color-primary);
  margin-top: 0;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.3s ease;
}
a:hover {
  color: var(--color-hover);
}

/* Header */
.header-commons {
  background-color: var(--color-primary);
  color: white;
  text-align: center;
  padding: 40px 20px;
}
.header-commons h1 {
  font-size: 2.8rem;
  margin-bottom: 10px;
  color: white;
}
.header-commons p {
  font-size: 1.2rem;
  margin: 0;
}

/* Primary Navigation Bar */
.nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  background-color: #2C3E50; /* Primary Navigation */
  padding: 10px 0;
}

.nav a {
  padding: 10px 20px;
  color: white;
  font-size: 16px;
}

.nav a:hover {
  background-color: #1F2D3D; /* Slightly darker tone for hover */
}

/* Capsule-style button for AI Signals */
.signal-button {
  background-color: #4D8FAC;
  color: #fff;
  border-radius: 12px;
  padding: 6px 14px;
  margin: 0 8px;
  font-weight: bold;
  font-size: 0.9rem;
  transition: background 0.3s ease, transform 0.2s ease;
}

.signal-button:hover {
  background-color: #00cec9;
  transform: translateY(-2px);
}

/* Secondary Navigation Bar */
.secondary-nav {
  max-width: 1200px;
  margin: 10px auto;
  text-align: center;
  border-bottom: 1px solid #ccc;
  padding: 10px 0;
  background-color: #BDC3C7; /* Secondary Navigation & Footer */
}

.secondary-nav > a {
  color: #2C3E50; /* For clear contrast with background */
  font-size: 14px;
  font-weight: normal;
  padding: 10px 20px;
  margin: 0 5px;
  display: inline-block;
}

.secondary-nav > a:hover {
  color: #4D8FAC;
}

/* Dropdown Styling */
.secondary-nav .dropdown {
  position: relative;
  display: inline-block;
  margin: 0 5px;
}

.secondary-nav .dropdown .dropbtn {
  color: #2C3E50;
  font-size: 14px;
  font-weight: normal;
  padding: 10px 20px;
  border: none;
  background: none;
  cursor: pointer;
}

.secondary-nav .dropdown .dropbtn:hover {
  color: #4D8FAC;
}

.secondary-nav .dropdown-content {
  display: none;
  position: absolute;
  background-color: #BDC3C7;
  min-width: 160px;
  text-align: left;
  z-index: 1;
  border: 1px solid #ccc;
}

.secondary-nav .dropdown-content a {
  display: block;
  padding: 8px 12px;
  color: #2C3E50;
  font-size: 14px;
}

.secondary-nav .dropdown-content a:hover {
  background-color: #aaa;
}

/* Content Container for main content and TTS controls */
.content-container {
  max-width: 800px;
  margin: 30px auto;
  padding: 0 20px;
}

/* TTS Controls Styling - Right Justified */
.tts-controls {
  text-align: right;
  margin-bottom: 20px;
}

.tts-controls button {
  padding: 8px 16px;
  font-size: 14px;
  margin: 0 5px;
  background-color: #4D8FAC; /* Primary Accent */
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.tts-controls button:hover {
  background-color: #3a6a85;
}

/* Section Containers */
.commons-section {
  background-color: white;
  border: 2px solid var(--color-secondary);
  border-radius: 8px;
  max-width: 900px;
  margin: 40px auto;
  padding: 30px;
}
.commons-section h2 {
  border-bottom: 2px solid var(--color-primary);
  padding-bottom: 8px;
  margin-bottom: 20px;
}
.commons-section p {
  margin: 1em 0;
}

/* Buttons */
.button-commons {
  background-color: var(--color-primary);
  color: white;
  border: none;
  border-radius: 6px;
  padding: 10px 18px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
  display: inline-block;
  margin-top: 10px;
}
.button-commons:hover {
  background-color: var(--color-hover); /* optional: adjust if needed */
  color: white; /* ensures text stays white */
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.6); /* soft white glow */
}

/* Signal Buttons */
.signal-button {
  background-color: var(--color-primary);
  color: white;
  border-radius: 12px;
  padding: 6px 14px;
  font-weight: bold;
  transition: background-color 0.3s ease, transform 0.2s ease;
}
.signal-button:hover {
  background-color: var(--color-accent);
  transform: translateY(-2px);
}

/* Footer */
.footer-commons {
  background-color: var(--color-secondary);
  color: var(--color-nav);
  text-align: center;
  padding: 20px;
  font-size: 0.9rem;
  border-top: 1px solid #ccc;
}
/* Inevitability Curve (uses your existing palette) */
#inevitability-curve {
  --bg: #ffffff;
  --fg: var(--color-text);
  --axis: var(--color-secondary);
  --grid: #e5e7eb;
  --tech: var(--color-accent);   /* bright accent for technical curve */
  --market: var(--color-primary);/* primary blue for market curve */
  --social: var(--color-nav);    /* deep slate for social curve */
  --legend-bg: #ffffffcc;
  --font: 'Roboto', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial;
}

#inevitability-curve .chart-wrap {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  margin: 20px 0;
  border: 2px solid var(--color-secondary);
  border-radius: 8px;
  max-width: 900px;
  padding: 16px;
}

#inevitability-curve svg {
  width: 100%;
  height: auto;
  display: block;
}

#inevitability-curve .title {
  font-weight: 700;
  font-size: 18px;
  fill: var(--color-primary);
}

#inevitability-curve .subtitle {
  font-size: 12px;
  fill: #64748b;
}

#inevitability-curve .axis,
#inevitability-curve .tick text {
  fill: var(--axis);
  font-size: 11px;
}

#inevitability-curve .grid {
  stroke: var(--grid);
  stroke-width: 1;
  shape-rendering: crispEdges;
}

#inevitability-curve .curve {
  fill: none;
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}

#inevitability-curve .curve.tech { stroke: var(--tech); }
#inevitability-curve .curve.market { stroke: var(--market); }
#inevitability-curve .curve.social { stroke: var(--social); }

#inevitability-curve .legend-bg {
  fill: var(--legend-bg);
  stroke: #cbd5e1;
  stroke-width: 1;
}

#inevitability-curve .legend text {
  font-size: 12px;
  fill: var(--fg);
}

#inevitability-curve .legend line {
  stroke-width: 3;
}

#inevitability-curve .milestone-dot {
  fill: var(--fg);
  stroke: #fff;
  stroke-width: 1.5;
}

#inevitability-curve .milestone-label {
  font-size: 11px;
  fill: var(--fg);
}

#inevitability-curve .note {
  font-size: 11px;
  fill: #64748b;
}
#inevitability-curve svg {
  --tech: #00cec9;       /* var(--color-accent) */
  --market: #4D8FAC;     /* var(--color-primary) */
  --social: #2C3E50;     /* var(--color-nav) */
}
/* Glossary Callout */
.glossary-callout {
  background: #F5F5F5;
  border-left: 4px solid #FF8C00;
  padding: 1em 1.2em;
  margin: 2em 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #333;
  border-radius: 4px;
}
.glossary-callout strong {
  color: #000;
}