/* stopping_distance.css — the braking-car scene for viz/stopping_distance.js (pure DOM). */

.sd { display: flex; flex-direction: column; gap: 0.85rem; }
.sd-stage { position: relative; width: 100%; aspect-ratio: 16 / 8; min-height: 200px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 0.8rem; background: linear-gradient(180deg, #0b1424, #070b13); }
.sd-sky { position: absolute; left: 0; right: 0; top: 0; height: 44%; background: radial-gradient(120% 120% at 80% 0%, rgba(56, 130, 246, 0.18), transparent 60%); }
.sd-roadbed { position: absolute; left: 0; right: 0; top: 44%; bottom: 16%; background: linear-gradient(180deg, #1e293b, #0f172a); border-top: 2px solid rgba(148, 163, 184, 0.4); }
.sd-zlbl { position: absolute; top: 30%; transform: translateX(-50%); white-space: nowrap; font-size: 0.72rem; font-weight: 700;
  padding: 1px 7px; border-radius: 5px; pointer-events: none; z-index: 2; }
.sd-zlbl-think { color: #fcd34d; background: rgba(251, 191, 36, 0.14); border: 1px solid rgba(251, 191, 36, 0.42); }
.sd-zlbl-brake { color: #fda4af; background: rgba(251, 113, 133, 0.14); border: 1px solid rgba(251, 113, 133, 0.42); }
.sd-zone { position: absolute; top: 0; bottom: 0; }
.sd-zone-think { background: rgba(251, 191, 36, 0.16); border-right: 1px dashed rgba(251, 191, 36, 0.5); }
.sd-zone-brake { background: rgba(251, 113, 133, 0.16); }
.sd-stopmk { position: absolute; top: -4px; bottom: -4px; width: 2px; background: #fb7185; transform: translateX(-1px); box-shadow: 0 0 6px rgba(251, 113, 133, 0.7); }
.sd-lines { position: absolute; left: 0; right: 0; top: 50%; height: 2px; transform: translateY(-50%);
  background: repeating-linear-gradient(90deg, rgba(226, 232, 240, 0.55) 0 5%, transparent 5% 10%); }

.sd-car { position: absolute; top: 50%; width: 9%; height: 46%; transform: translate(-50%, -50%); z-index: 3;
  border-radius: 4px 7px 3px 3px; background: linear-gradient(180deg, #60a5fa, #2563eb); box-shadow: 0 3px 5px rgba(0, 0, 0, 0.45); }
.sd-car::before { content: ""; position: absolute; left: 14%; top: -32%; width: 58%; height: 42%; border-radius: 4px 6px 0 0; background: linear-gradient(180deg, #93c5fd, #3b82f6); }
.sd-car::after { content: ""; position: absolute; left: 16%; right: 16%; bottom: -16%; height: 30%; border-radius: 50%; background: #0b1220; box-shadow: -1px 0 0 1px #1e293b, 1px 0 0 1px #1e293b; }
.sd-light { position: absolute; right: -2px; top: 38%; width: 5px; height: 5px; border-radius: 50%; background: #7f1d1d; transition: all 0.1s; }
.sd-car.sd-braking .sd-light { background: #ef4444; box-shadow: 0 0 8px 2px rgba(239, 68, 68, 0.85); }

.sd-axis { position: absolute; left: 0; right: 0; top: 84%; height: 1.2rem; }
.sd-tick { position: absolute; top: 0; width: 1px; height: 5px; background: rgba(203, 213, 225, 0.4); transform: translateX(-0.5px); }
.sd-ticklab { position: absolute; top: 5px; font-size: 8px; color: #7f93a8; transform: translateX(-50%); }
.sd-axisunit { position: absolute; right: 4px; top: 5px; font-size: 8px; color: #6b8097; font-style: italic; }
.sd-phase { position: absolute; left: 8px; top: 6px; font-size: 0.78rem; font-weight: 600; color: #aebdce; background: rgba(6, 10, 18, 0.6); padding: 2px 7px; border-radius: 5px; }

.sd-roads { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.sd-rlabel { font-size: 0.85rem; color: #9fb0c3; font-weight: 600; margin-right: 0.2rem; }
.sd-road { cursor: pointer; font: inherit; font-size: 0.8rem; font-weight: 600; color: #cbd5e1; padding: 0.28rem 0.7rem; border-radius: 999px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.14); transition: all 0.12s ease; }
.sd-road:hover { background: rgba(255, 255, 255, 0.09); }
.sd-road.sd-on { color: #07121d; background: #38bdf8; border-color: #38bdf8; }
.sd-ta { color: #fcd34d; } .sd-tb { color: #fda4af; }