/* hookes_law.css — hanging spring + mass + ruler for viz/hookes_law.js (pure DOM). */

.hk { display: flex; flex-direction: column; gap: 0.85rem; }
.hk-stage { position: relative; width: 100%; aspect-ratio: 16 / 11; min-height: 250px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 0.8rem; background: linear-gradient(180deg, #0c1220, #07090f); }
.hk-beam { position: absolute; left: 30%; right: 30%; top: 8%; height: 8px; border-radius: 3px; background: linear-gradient(180deg, #94a3b8, #475569); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); }
.hk-ruler { position: absolute; left: 70%; top: 10%; bottom: 6%; width: 12px; border-left: 1.5px solid rgba(203, 213, 225, 0.4);
  background: repeating-linear-gradient(180deg, rgba(203,213,225,0.4) 0 1px, transparent 1px 14px); }

.hk-spring { position: absolute; left: 50%; top: 10%; width: 22px; transform: translateX(-50%); border-radius: 3px;
  background: repeating-linear-gradient(-66deg, #cbd5e1 0 2.5px, transparent 2.5px 7px); transition: height 0.18s ease; }
.hk-spring.hk-over { background: repeating-linear-gradient(-66deg, #fca5a5 0 2.5px, transparent 2.5px 9px); }
.hk-mass { position: absolute; left: 50%; width: 46px; height: 34px; transform: translate(-50%, 0); display: flex; align-items: center; justify-content: center;
  font-size: 0.78rem; font-weight: 700; color: #07121d; border-radius: 4px; background: linear-gradient(180deg, #fbbf24, #d97706); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.45); transition: top 0.18s ease; }
.hk-limit { position: absolute; left: 42%; width: 26%; height: 0; border-top: 1.5px dashed rgba(251, 113, 133, 0.6); transition: top 0.18s ease; }
.hk-limit::after { content: "elastic limit"; position: absolute; right: 100%; top: -6px; margin-right: 4px; font-size: 8px; color: #fb7185; white-space: nowrap; }
.hk-warn { position: absolute; left: 8px; bottom: 6px; right: 8px; font-size: 0.76rem; font-weight: 600; color: #fda4af; background: rgba(159, 18, 57, 0.25); padding: 3px 8px; border-radius: 5px; }