/* ph_scale.css — beaker + indicator + pH scale for viz/ph_scale.js (pure DOM). */

.ph { display: flex; flex-direction: column; gap: 0.8rem; }
.ph-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, #0a0f1a, #06090f); }
.ph-beaker { position: absolute; left: 50%; top: 12%; width: 30%; height: 56%; transform: translateX(-50%); border: 2px solid rgba(203, 213, 225, 0.4); border-top: none; border-radius: 0 0 12px 12px; overflow: hidden; background: rgba(255, 255, 255, 0.02); }
.ph-liquid { position: absolute; left: 0; right: 0; bottom: 0; height: 72%; transition: background 0.3s; box-shadow: inset 0 6px 10px rgba(255,255,255,0.18); }
.ph-liquid::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: rgba(255,255,255,0.25); }

.ph-scale { position: absolute; left: 8%; right: 8%; bottom: 16%; height: 16px; border-radius: 4px;
  background: linear-gradient(90deg, #dc2626, #ea580c 21%, #facc15 36%, #22c55e 50%, #0d9488 64%, #2563eb 79%, #6d28d9); }
.ph-marker { position: absolute; top: -4px; bottom: -4px; width: 3px; background: #fff; border-radius: 2px; transform: translateX(-1.5px); box-shadow: 0 0 5px rgba(255,255,255,0.8); transition: left 0.2s; }
.ph-scale span { position: absolute; top: 18px; font-size: 8px; color: #8aa0b6; }
.ph-s0 { left: 0; } .ph-s7 { left: 50%; transform: translateX(-50%); } .ph-s14 { right: 0; }
.ph-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; }

.ph-subs { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.ph-sub { cursor: pointer; font: inherit; font-size: 0.78rem; font-weight: 600; color: #cbd5e1; padding: 0.26rem 0.6rem; border-radius: 999px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.14); transition: all 0.12s ease; }
.ph-sub:hover { background: rgba(255, 255, 255, 0.09); }
.ph-sub.ph-on { color: #07121d; background: #fbbf24; border-color: #fbbf24; }