/* Sensor & measurement apps. Instrument faces use theme tokens; the level bubble keeps its liquid colours in both themes. */
.ms{--ms-liquid:#cfeec3;--ms-bubble:#ffffffee;--ms-ok:var(--success)}
@media (prefers-color-scheme:dark){.ms{--ms-liquid:#2f5b3a;--ms-bubble:#e9fbe3}}
.ms-live[hidden],.ms-zero[hidden]{display:none}
.ms-big{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:.4rem;margin:.75rem 0 .5rem;text-align:center}
.ms-big strong{font-size:clamp(2.6rem,12vw,4.5rem);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.ms-big span{font-size:1.05rem;color:var(--muted);font-weight:600}
.ms-speed{display:flex;align-items:baseline;justify-content:center;gap:.5rem;margin:.5rem 0}
.ms-speed strong{font-size:clamp(4rem,22vw,8rem);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.ms-speed span{font-size:1.4rem;color:var(--muted);font-weight:700}
.ms .dv-readout{justify-content:center}
.ms-results{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,130px),1fr));gap:.5rem;margin:.75rem 0}
.ms-results div{padding:.55rem .7rem;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);text-align:center}
.ms-results dt{font-size:.78rem;color:var(--muted);font-weight:600}.ms-results dd{margin:.15rem 0 0;font-weight:700;font-variant-numeric:tabular-nums}
.ms-results[hidden]{display:none}
.ms-units{margin-block:.5rem}
/* Bubble level */
.ms-level{display:grid;gap:1rem;justify-items:center;margin-top:.5rem}
.ms-vial-round{position:relative;width:min(70vw,260px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,var(--ms-liquid) 60%,color-mix(in srgb,var(--ms-liquid) 70%,#000) 100%);border:3px solid var(--line-strong);overflow:hidden}
.ms-ring{position:absolute;inset:38%;border:2px solid var(--text);border-radius:50%;opacity:.55}
.ms-vial-tube{position:relative;width:min(80vw,320px);height:48px;border-radius:24px;background:var(--ms-liquid);border:3px solid var(--line-strong);overflow:hidden}
.ms-tube-marks{position:absolute;left:50%;top:0;bottom:0;width:44px;transform:translateX(-50%);border-inline:2px solid var(--text);opacity:.55}
.ms-bubble{position:absolute;left:50%;top:50%;width:22%;aspect-ratio:1;margin:-11% 0 0 -11%;border-radius:50%;background:var(--ms-bubble);box-shadow:inset -4px -4px 8px #0002,0 0 0 1px #0003;transition:transform .08s linear}
.ms-vial-tube .ms-bubble{width:40px;height:30px;margin:-15px 0 0 -20px;border-radius:15px;aspect-ratio:auto}
.ms-level[data-mode=flat] .ms-vial-tube,.ms-level[data-mode=edge] .ms-vial-round{display:none}
.ms.is-level .ms-big strong{color:var(--ms-ok)}
/* Clinometer gauge and inclinometer horizon */
.ms-gauge{display:flex;justify-content:center}.ms-arc{width:min(48vw,190px);height:auto;overflow:visible}.ms-arc-zero{stroke:var(--line-strong);stroke-dasharray:4 4}.ms-arc-label{fill:var(--muted);text-anchor:start;font-size:11px;font-family:inherit}.ms-arc-hub{fill:var(--text)}.ms-arc-track{fill:none;stroke:var(--line-strong);stroke-width:6}.ms-needle{stroke:var(--accent);stroke-width:5;stroke-linecap:round}
.ms-horizon{position:relative;width:min(70vw,260px);aspect-ratio:1;margin:.5rem auto;border-radius:50%;overflow:hidden;background:#8b5e3c;border:3px solid var(--line-strong)}
.ms-sky{position:absolute;inset:-50% -50% 50%;background:#5aa0dc;transform-origin:50% 100%;transition:transform .08s linear}
.ms-cross{position:absolute;left:25%;right:25%;top:50%;height:3px;margin-top:-1.5px;background:#ffc76a;box-shadow:0 0 0 1px #0006}
/* Angle finder dial */
.ms-dial{position:relative;width:min(70vw,240px);aspect-ratio:1;margin:.5rem auto;border-radius:50%;border:3px solid var(--line-strong);background:repeating-conic-gradient(from -.5deg,var(--line-strong) 0 1deg,transparent 1deg 15deg)}
.ms-dial-line{position:absolute;left:4%;right:4%;top:50%;height:4px;margin-top:-2px;border-radius:2px;background:var(--accent);transition:transform .08s linear}
/* Protractor */
.ms-protractor-wrap{max-width:520px;margin:.75rem auto 0}
.ms-protractor{display:block;width:100%;height:auto;touch-action:none;border-radius:var(--radius);background:var(--surface-2)}
.ms-p-face{fill:color-mix(in srgb,var(--accent-soft) 70%,transparent);stroke:var(--accent);stroke-width:1.5}
.has-photo .ms-p-face{fill:#ffffff33}
.ms-p-tick{stroke:var(--text);stroke-width:1}.ms-p-num{fill:var(--text);font-size:11px;font-weight:600;font-family:inherit}
.ms-p-sector{fill:color-mix(in srgb,var(--warn) 35%,transparent)}
.ms-p-arm{stroke-width:3;stroke-linecap:round}.ms-p-arm-a{stroke:#ee765f;fill:#ee765f}.ms-p-arm-b{stroke:#456dda;fill:#456dda}
.ms-p-handle{cursor:grab;stroke:#fff;stroke-width:2}.ms-p-center{fill:var(--text);stroke:#fff;stroke-width:2;cursor:move}
/* GPS */
.ms.is-hud .ms-speed{transform:scaleY(-1)}.ms.is-hud .ms-speed strong{color:#8cf1dc}
/* Qibla */
.ms-qibla{display:grid;justify-items:center;gap:.5rem;margin-top:.75rem}
.ms-rose{position:relative;width:min(72vw,260px);aspect-ratio:1;border-radius:50%;border:3px solid var(--line-strong);background:var(--surface);transition:transform .1s linear}
.ms-rose b{position:absolute;font-weight:800}.ms-rose b:nth-child(1){top:6px;left:50%;transform:translateX(-50%);color:var(--danger)}.ms-rose b:nth-child(2){right:10px;top:50%;transform:translateY(-50%)}.ms-rose b:nth-child(3){bottom:6px;left:50%;transform:translateX(-50%)}.ms-rose b:nth-child(4){left:10px;top:50%;transform:translateY(-50%)}
.ms-kaaba{position:absolute;left:50%;bottom:50%;width:6px;height:40%;margin-left:-3px;transform-origin:50% 100%;background:var(--accent);border-radius:3px}
.ms-kaaba::before{content:'';position:absolute;top:-14px;left:50%;width:18px;height:18px;margin-left:-9px;background:#183b43;border:2px solid #ffc76a;border-radius:3px}
.ms.is-facing .ms-rose{border-color:var(--success);box-shadow:0 0 0 4px var(--success-soft)}
/* Microphone apps */
.ms-meter{height:14px;border-radius:7px;background:var(--surface-2);overflow:hidden}.ms-meter span{display:block;height:100%;width:0;border-radius:inherit;background:var(--accent);transition:width .15s linear}
.ms-chart{display:block;width:100%;height:auto;aspect-ratio:300/110;margin-top:.75rem;border-radius:var(--radius-sm);background:var(--surface-2)}
.ms-chart polyline{fill:none;stroke:var(--accent);stroke-width:2;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.ms-gridline{stroke:var(--line-strong);stroke-width:.5;vector-effect:non-scaling-stroke;opacity:.6}.ms-gridlabel{fill:var(--muted);font-size:7px;font-family:inherit}
@media (prefers-reduced-motion:reduce){.ms-bubble,.ms-sky,.ms-dial-line,.ms-rose{transition:none}}