/* ============================================================
   ACTION LABS · 03 · IMPROVE component
   Single full-width benchmark chart (cost vs quality).
   Consumes tokens.css + base.css. Every selector prefixed .imp- .
   Boundary blue --act marks the trained specialist.
   Ochre --warm = frontier comparison. Teal --see = untrained base.
   --fg-dim = de-emphasised frontier context points.
   ============================================================ */

/* ---------- layout: one full-width panel ---------- */
.imp-grid { display: block; }

.imp-panel {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  min-width: 0;
}

/* ============================================================
   benchmark chart
   ============================================================ */
.imp-chart { padding: clamp(14px, 1.8vw, 22px) clamp(14px, 2vw, 24px) 16px; }

.imp-chart__kicker {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 6px;
}
.imp-chart__kicker b { color: var(--act); font-weight: 700; }
.imp-chart__sub {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--fg-dim);
  margin-left: auto;
}

/* wide chart scrolls inside its own panel, never the page */
.imp-plotwrap { overflow-x: auto; overflow-y: hidden; }
.imp-plot { width: 100%; min-width: 700px; height: auto; display: block; }

/* --- axes / grid (recessive hairlines, solid) --- */
.imp-grid-line { stroke: var(--line); stroke-width: 1; }
.imp-axis-line { stroke: var(--line-2); stroke-width: 1; }
.imp-tick {
  font-family: var(--font-mono);
  font-size: 12px;
  fill: var(--fg-dim);
  font-variant-numeric: tabular-nums;
}
.imp-axis-title {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  fill: var(--fg-muted);
}

/* --- best-frontier reference guide --- */
.imp-guide {
  stroke: var(--fg-muted);
  stroke-width: 1.5;
  fill: none;
  stroke-dasharray: 5 4;
  opacity: 0.45;
  stroke-linecap: round;
}
.imp-guide-lbl {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.02em;
  fill: var(--fg-muted);
}

/* --- the training-lift guide arrow --- */
.imp-lift {
  stroke: var(--act);
  stroke-width: 2;
  fill: none;
  opacity: 0.55;
  stroke-linecap: round;
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
  transition: stroke-dashoffset var(--dur-3) var(--ease-out) 0.30s;
}

/* --- dots --- */
.imp-dot {
  stroke: var(--bg-2);         /* 2px surface ring keeps marks legible */
  stroke-width: 2;
  transform: scale(0);
  transform-box: fill-box;
  transform-origin: center;
  transition: transform var(--dur-3) var(--ease-out);
}
.imp-dot--warm { fill: var(--warm); }    /* frontier comparison */
.imp-dot--dim  { fill: var(--fg-dim); }  /* frontier context */
.imp-dot--see  { fill: var(--see); }     /* untrained open base */
.imp-dot--act  { fill: var(--act); }     /* trained specialist */
.imp-glow { opacity: 0; transition: opacity var(--dur-3) var(--ease-out); }

/* --- point labels (text wears text tokens; the dot carries identity) --- */
.imp-lbl-name {
  font-family: var(--font-mono);
  font-size: 13px;
  fill: var(--fg-muted);
}
.imp-lbl-name.imp-lbl-hero { fill: var(--fg); font-weight: 700; }
.imp-lbl-val {
  font-family: var(--font-mono);
  font-size: 12px;
  fill: var(--fg-muted);
  font-variant-numeric: tabular-nums;
}
.imp-lbl-val.imp-lbl-hero { fill: var(--fg); }

/* --- callout on the specialist point --- */
.imp-callout-box {
  fill: var(--act-soft);
  stroke: var(--act);
  stroke-width: 1;
  rx: 6;
}
.imp-callout-txt {
  font-family: var(--font-mono);
  font-size: 12px;
  fill: var(--fg);
  font-variant-numeric: tabular-nums;
}
.imp-cot-b { fill: var(--act); font-weight: 700; }

/* fade-in group for labels, guide and callout on reveal */
.imp-fade { opacity: 0; transition: opacity var(--dur-3) var(--ease-out); }

/* --- reveal end-states (JS adds .imp-in when in view) --- */
.imp-in .imp-dot   { transform: scale(1); }
.imp-in .imp-glow  { opacity: 1; }
.imp-in .imp-fade  { opacity: 1; }
.imp-in .imp-lift  { stroke-dashoffset: 0; }
/* stagger: base first, then the specialist, then the frontier context */
.imp-in .imp-dot--see  { transition-delay: 0.05s; }
.imp-in .imp-dot--act  { transition-delay: 0.20s; }
.imp-in .imp-dot--dim  { transition-delay: 0.35s; }
.imp-in .imp-dot--warm { transition-delay: 0.45s; }
.imp-in .imp-fade      { transition-delay: 0.55s; }

/* --- caption (published benchmark note + study link) --- */
.imp-caption {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  color: var(--fg-dim);
  margin-top: 10px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
}
.imp-caption::before {
  content: "";
  width: 5px; height: 5px; flex: none;
  border-radius: 1px;
  background: var(--fg-dim);
  transform: rotate(45deg);
}
.imp-caption__link {
  color: var(--fg-muted);
  text-decoration: none;
  border-bottom: 1px solid var(--line-2);
  transition: color var(--dur-1) var(--ease), border-color var(--dur-1);
}
.imp-caption__link:hover { color: var(--act); border-color: var(--act); }

/* ============================================================
   reduced motion, meaningful static end-state, no animation
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .imp-dot   { transform: none !important; }
  .imp-glow  { opacity: 1 !important; }
  .imp-fade  { opacity: 1 !important; }
  .imp-lift  { stroke-dashoffset: 0 !important; }
}