/* Page-specific styles for the hardware (Variant B) page.
   Shared components live in components.css. */

/* Motion-to-photon pipeline diagram */
.pipe-stage rect {
  fill: color-mix(in srgb, var(--accent) 10%, var(--bg-elevated));
  stroke: color-mix(in srgb, var(--accent) 40%, var(--border));
  stroke-width: 1.5;
}

.pipe-title {
  fill: var(--text);
  font: 700 14px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.pipe-sub {
  fill: var(--text-muted);
  font: 11px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.pipe-label {
  fill: var(--accent);
  font: 700 13px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.pipe-arrow,
.pipe-span {
  stroke: var(--text-muted);
  stroke-width: 1.5;
  fill: none;
}

/* Tracking topology diagram */
.track-panel rect {
  fill: var(--bg);
  stroke: var(--border);
  stroke-width: 1.5;
}

.track-title {
  fill: var(--text);
  font: 700 15px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.track-sub {
  fill: var(--text-muted);
  font: 11px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.track-note {
  fill: var(--text-muted);
  font: italic 12px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.track-base {
  fill: var(--cat-commercial);
}

.track-hmd {
  fill: color-mix(in srgb, var(--accent) 30%, var(--bg-elevated));
  stroke: var(--accent);
  stroke-width: 1.5;
}

.track-ray {
  stroke: var(--accent);
  stroke-width: 1.2;
  stroke-dasharray: 4 3;
  opacity: 0.8;
}

.track-feature {
  fill: var(--cat-research);
}

/* Formula card */
.formula-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  margin: 20px 0;
}

.formula-main {
  font-family: Cambria, Georgia, serif;
  font-size: 1.15rem;
  color: var(--accent);
  margin-bottom: 12px;
}

.formula-card p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* Rendering-trick list */
.trick-list {
  display: grid;
  gap: 14px;
  margin: 20px 0;
}

.trick {
  border-left: 3px solid var(--accent);
  padding: 4px 0 4px 16px;
}

.trick h4 {
  margin: 0 0 6px;
  font-size: 0.98rem;
}

.trick p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-muted);
}