/* /call/:slug — call detail page + the reusable CallCard mini component
   (src/lib/call-card.tsx). Own file (not style.css) per this branch's merge
   convention: only pages that render CallCard/the chart pay for this CSS,
   and no other worktree touching style.css can collide with this work.
   Reuses the existing design tokens from style.css's :root (--bg-raised,
   --border, --text, --text-dim, --instrument-up/dn, --good, --bad) rather
   than inventing new colors. */

.call-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-raised);
  text-decoration: none;
  color: var(--text);
  transition: border-color var(--motion-hover, 180ms) ease;
}

.call-card:hover {
  border-color: var(--accent);
}

.call-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
}

.call-card-tier {
  font-weight: 700;
  color: var(--accent);
}

.call-card-market {
  color: var(--text-dim);
  flex: 1;
}

.call-card-dir {
  font-weight: 700;
}

.call-card-race svg {
  width: 100%;
  height: 14px;
  display: block;
  overflow: visible;
}

.call-card-race-track {
  stroke: var(--border);
  stroke-width: 2;
}

.call-card-race-inv,
.call-card-race-target {
  stroke: var(--text-dim);
  stroke-width: 1.5;
}

.call-card-race-entry {
  fill: var(--text);
  stroke: var(--bg-raised);
  stroke-width: 1;
}

.call-card-race-marker {
  stroke: var(--bg-raised);
  stroke-width: 1;
}

.call-card-race-marker-hit {
  fill: var(--good);
}

.call-card-race-marker-miss {
  fill: var(--bad);
}

.call-card-status {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-dim);
}

/* --- chart panel (progressive draw) -------------------------------------- */

.call-chart-container {
  position: relative;
}

.call-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-dim);
}

.call-chart-legend-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  margin-right: 4px;
  vertical-align: -1px;
}

.call-chart-legend-entry .call-chart-legend-swatch {
  background: var(--text);
}

.call-chart-legend-target .call-chart-legend-swatch {
  background: var(--good);
}

.call-chart-legend-invalidation .call-chart-legend-swatch {
  background: var(--bad);
}

.call-chart-legend-resolved .call-chart-legend-swatch {
  background: var(--accent);
}