/* ==========================================================================
   EL BADR Industries — Interactive Rack & Pinion Guide (learn-rack.html)
   Loads on top of learn.css and reuses its playground/glossary components.
   ========================================================================== */

/* SVG member colours ------------------------------------------------------- */
.rp-rack, .rp-rackfill { fill: var(--steel); stroke: rgba(0,0,0,0.2); stroke-width: 0.6; }
[data-theme="dark"] .rp-rack, [data-theme="dark"] .rp-rackfill { fill: #3a3a41; }
.rp-mark { fill: #ffffff; opacity: 0.85; }
[data-theme="dark"] .rp-mark { fill: #d9d9de; }
.rp-chevron {
  font-family: var(--font-head); font-weight: 800; letter-spacing: 0.1em;
  fill: #ffffff; opacity: 0.55;
}
.rp-arrowhead { fill: var(--ink); opacity: 0.6; }

/* Right column: mesh on top (bigger), tooth profile below */
.rp-mesh { flex: 3 1 0; }
.rp-profile { flex: 2 1 0; }
/* SVG labels are positioned left-to-right; keep them anchored that way on the
   Arabic page too (Arabic words still shape correctly inside) */
.rp-mesh svg, .rp-profile svg { direction: ltr; }

/* Stroke indicator: where the rack is along its full length ---------------- */
.rp-stroke { margin-top: 0.8rem; padding: 0 0.3rem; }
.rp-stroke__track {
  position: relative; height: 8px; border-radius: 999px;
  background: var(--line);
}
.rp-stroke__fill {
  position: absolute; inset: 0 auto 0 0; width: 0;
  border-radius: 999px; background: rgba(209,32,38,0.35);
}
.rp-stroke__car {
  position: absolute; top: 50%; left: 0;
  width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 4px;
  background: var(--red); border: 2px solid var(--surface);
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
.rp-stroke__labels {
  display: flex; justify-content: space-between; gap: 0.5rem;
  margin-top: 0.45rem; font-size: 0.72rem; color: var(--muted);
  font-family: var(--font-head); letter-spacing: 0.04em;
}
.rp-stroke__labels #rp-pos { color: var(--ink); font-weight: 700; }

/* Validity states on result cards */
.gp-result__val.is-bad { color: var(--red); }

@media (max-width: 880px) {
  .rp-mesh, .rp-profile { flex: none; }
  .rp-mesh { height: auto !important; }
  .rp-mesh .diagram-canvas { flex: none; height: min(62vw, 320px); }
  .rp-profile { height: 250px !important; }
}