/* ============================================================
   KARKA PHYSICS — VISUALS
   SVG element classes used by D3 rendering across chapters.
   All physics traces, axes, labels, annotations live here.
   Chapter-specific inline styles in JS should be REMOVED and
   their styling moved to classes in this file.
   ============================================================ */

/* ============================================================
   VISUALIZATION CONTAINER
   ============================================================ */
#viz {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 980 / 560;
  min-height: 380px;
  background: linear-gradient(180deg, var(--color-panel-soft), #f5faf9);
  border: 1px solid #e7eef7;
  border-radius: var(--radius-xl);
}

body.focus-graph #viz {
  width: 100%;
  height: auto;
  min-height: 720px;
  aspect-ratio: 980 / 560;
  display: block;
}

/* ============================================================
   AXES + GRID
   ============================================================ */
.axis path,
.axis line {
  stroke: #d7e1ec;
}

.axis text {
  fill: #5d6d82;
  font-size: 13px;
  font-weight: 600;
}

.grid line {
  stroke: var(--color-border);
}

/* ============================================================
   TEXT LABELS
   ============================================================ */
.label {
  fill: #263648;
  font-size: 14px;
  font-weight: 700;
}

.formula-label-svg {
  fill: var(--color-accent);
  font-size: 14px;
  font-weight: 900;
}

.concept-note {
  fill: var(--color-muted);
  font-size: 15px;
}

/* ============================================================
   TRACES (CURVES)
   ============================================================ */
.trace {
  fill: none;
  stroke-width: 4;
  stroke-linecap: round;
}

.trace.vt {
  stroke: var(--color-accent);
}

.trace.st {
  stroke: var(--color-amber);
}

.trace.current {
  stroke: var(--color-blue);
}

.area {
  fill: rgba(20, 184, 166, 0.14);
}

/* ============================================================
   BALL + TRAIL
   ============================================================ */
.ball {
  fill: var(--color-accent);
  filter: drop-shadow(0 6px 10px rgba(15, 118, 110, 0.28));
}

.trail {
  fill: var(--color-accent-light);
  opacity: 0.18;
}

/* ============================================================
   ANNOTATIONS (pill backgrounds + text)
   ============================================================ */
.annotation {
  fill: var(--color-panel);
  stroke: var(--color-border-soft);
  stroke-width: 1;
}

.annotation-text {
  fill: var(--color-ink-soft);
  font-size: 13px;
  font-weight: 900;
}

/* ============================================================
   STAGE BADGE
   ============================================================ */
.stage-badge {
  fill: var(--color-accent-bg);
  stroke: var(--color-border-accent);
}

.stage-badge-text {
  fill: var(--color-accent);
  font-size: 13px;
  font-weight: 900;
}

/* ============================================================
   FORCE FAMILY LISTS (Dynamics)
   ============================================================ */
.force-family-title {
  fill: var(--color-accent);
  font-size: 16px;
  font-weight: 900;
}

.force-family-item {
  fill: var(--color-ink-soft);
  font-size: 15px;
  font-weight: 900;
}

/* ============================================================
   LEGEND BOXES (used across chapters)
   ============================================================ */
.legend-title-svg {
  fill: var(--color-accent);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.legend-item-svg {
  fill: var(--color-ink-soft);
  font-size: 12px;
  font-weight: 800;
}

/* ============================================================
   QUICK CHECK (rendered in SVG)
   ============================================================ */
.svg-btn-text {
  pointer-events: none;
  user-select: none;
}

.qc-answer text {
  user-select: none;
}

/* ============================================================
   CURRENT ELECTRICITY
   ============================================================ */
.svg-current-label {
  fill: var(--color-ink-soft);
  font-size: 14px;
  font-weight: 900;
}