/* ai-impact-badge.css
   ────────────────────
   Self-contained styles for the AI-impact badge component. No external
   dependencies (no third-party fonts, no CDN). Uses the same CSS variables
   as styles.css so the badge inherits the page palette automatically.

   The component renders three structural pieces:
     1. A colored pill (.ai-impact-pill) — headline label + dot
     2. A short rationale paragraph (.ai-impact-rationale)
     3. A collapsed details section (.ai-impact-details) with the curve

   Color usage is conservative: each headline category gets one accent color,
   used only on the dot + the small chart line. Background and text stay neutral
   so the badge doesn't fight the rest of the page for attention.
*/

.ai-impact-block {
  border: 1px solid var(--border, #d6dbe1);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  background: #fff;
  margin: 1rem 0;
  font: 14px/1.5 -apple-system, system-ui, sans-serif;
  color: var(--text, #1f2733);
}

.ai-impact-block__hidden { display: none; }

.ai-impact-block h3 {
  margin: 0 0 .5rem;
  font-size: 1rem;
  font-weight: 600;
}

.ai-impact-pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .25rem .65rem;
  border-radius: 999px;
  background: #f0f3f7;
  font-weight: 600;
  font-size: .85rem;
  color: var(--text, #1f2733);
}

.ai-impact-pill__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #94a3b8; /* default */
  display: inline-block;
}

/* Per-headline color tokens. Pick saturated-but-not-alarmist hues so the
   badge reads as informational, not as advice. */
.ai-impact-pill[data-headline="enhanced"]      .ai-impact-pill__dot { background: #16a34a; } /* green */
.ai-impact-pill[data-headline="complemented"]  .ai-impact-pill__dot { background: #0ea5e9; } /* sky blue */
.ai-impact-pill[data-headline="insulated"]     .ai-impact-pill__dot { background: #6366f1; } /* indigo */
.ai-impact-pill[data-headline="mixed"]         .ai-impact-pill__dot { background: #94a3b8; } /* slate */
.ai-impact-pill[data-headline="at_risk_near"]  .ai-impact-pill__dot { background: #dc2626; } /* red */
.ai-impact-pill[data-headline="at_risk_mid"]   .ai-impact-pill__dot { background: #f97316; } /* orange */
.ai-impact-pill[data-headline="at_risk_long"]  .ai-impact-pill__dot { background: #f59e0b; } /* amber */

.ai-impact-rationale {
  margin: .65rem 0 0;
  color: var(--muted, #4b5563);
  font-size: .9rem;
}

.ai-impact-details {
  margin-top: .75rem;
}

.ai-impact-details summary {
  cursor: pointer;
  font-size: .85rem;
  color: var(--muted, #4b5563);
  user-select: none;
}

.ai-impact-details[open] summary { color: var(--text, #1f2733); }

.ai-impact-curve-wrap {
  margin-top: .75rem;
  max-width: 480px;
}

/* Pin the chart canvas height directly so the Chart.js responsive layout
   has a target dimension, but the wrapping div is free to grow vertically
   when the table fallback (mobile-card layout, see styles.css) replaces
   the canvas. Prior fixed height: 160px on the wrap caused the table
   cards to overlap the drivers list + sources rendered below the wrap. */
.ai-impact-curve-wrap canvas {
  height: 160px;
  width: 100%;
}

.ai-impact-drivers {
  margin-top: .65rem;
  padding-left: 1rem;
  font-size: .85rem;
  color: var(--muted, #4b5563);
}

.ai-impact-drivers li { margin: .15rem 0; }

.ai-impact-disclaimer {
  margin-top: .65rem;
  font-size: .75rem;
  color: var(--muted, #4b5563);
  font-style: italic;
}

.ai-impact-error {
  font-size: .85rem;
  color: var(--muted, #4b5563);
  font-style: italic;
}

/* Inline pill variant — used in tables / list rows on Jobs Trends + History.
   Smaller footprint, no rationale or chart. */
.ai-impact-tag {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .15rem .5rem;
  border-radius: 6px;
  font-size: .75rem;
  background: #f0f3f7;
  color: var(--text, #1f2733);
  white-space: nowrap;
}

.ai-impact-tag__dot {
  width: 7px; height: 7px; border-radius: 50%; background: #94a3b8;
  display: inline-block;
}

.ai-impact-tag[data-headline="enhanced"]      .ai-impact-tag__dot { background: #16a34a; }
.ai-impact-tag[data-headline="complemented"]  .ai-impact-tag__dot { background: #0ea5e9; }
.ai-impact-tag[data-headline="insulated"]     .ai-impact-tag__dot { background: #6366f1; }
.ai-impact-tag[data-headline="mixed"]         .ai-impact-tag__dot { background: #94a3b8; }
.ai-impact-tag[data-headline="at_risk_near"]  .ai-impact-tag__dot { background: #dc2626; }
.ai-impact-tag[data-headline="at_risk_mid"]   .ai-impact-tag__dot { background: #f97316; }
.ai-impact-tag[data-headline="at_risk_long"]  .ai-impact-tag__dot { background: #f59e0b; }


/* "What this means" plain-English explainer. Always visible after the
   rationale paragraph so a lay reader doesn't misread the at-risk
   percentages as a job-loss forecast. */
.ai-impact-means {
  margin: .65rem 0 0;
  padding: .65rem .75rem;
  background: #f5f9fd;
  border-left: 3px solid #0ea5e9;
  border-radius: 6px;
  font-size: .85rem;
  line-height: 1.5;
  color: var(--text, #1f2733);
}

.ai-impact-means-label {
  font-weight: 600;
  color: #0369a1;
}

.ai-impact-means em {
  font-style: italic;
  font-weight: 500;
}