/* Slope meter: full-screen dark view over the map, the angle in the Steepness layer's colours. */
.vertex-v3 #app .clinometer { position:fixed; inset:0; z-index:1200; display:flex; flex-direction:column; overflow:hidden; background:#16181c; color:#f1f3f5; font-family:system-ui,-apple-system,sans-serif; --clino-color:#9aa3ad; }
.vertex-v3 #app .clinometer[hidden] { display:none; }
.vertex-v3 #app .clinometer:focus { outline:none; }
.vertex-v3 #app .clino-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:none; }
.vertex-v3 #app .clinometer[data-mode="camera"] .clino-video { display:block; }
.vertex-v3 #app .clino-top { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:calc(env(safe-area-inset-top,0px) + 14px) 16px 0; }
.vertex-v3 #app#app#app#app #clinometer button.clino-close { flex:none; width:40px; height:40px; border:0; border-radius:20px; background:#2a2e35; color:#f1f3f5; font-size:18px; cursor:pointer; }
.vertex-v3 #app .clino-spacer { width:40px; flex:none; }
.vertex-v3 #app .clino-modes { display:flex; padding:3px; border-radius:19px; background:#2a2e35; }
.vertex-v3 #app#app#app#app #clinometer .clino-modes button { min-height:34px; padding:0 16px; border:0; border-radius:16px; background:none; color:#cfd4dc; font:600 14px system-ui; cursor:pointer; }
.vertex-v3 #app#app#app#app #clinometer .clino-modes button[aria-pressed="true"] { background:#eef1f5; color:#16181c; }
.vertex-v3 #app .clino-main { position:relative; flex:1 1 auto; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:min(10px,1.4dvh); padding:8px 24px; overflow:hidden; }
.vertex-v3 #app .clinometer[data-mode="camera"] .clino-main { justify-content:flex-start; padding-top:18px; }
.vertex-v3 #app .clino-bubble { position:relative; width:min(56vw,220px,24dvh); aspect-ratio:1; border:2px solid #ffffff30; border-radius:50%; }
.vertex-v3 #app .clino-bubble::after { content:''; position:absolute; left:50%; top:50%; width:10px; height:10px; margin:-5px; border-radius:50%; border:1px solid #ffffff40; }
.vertex-v3 #app .clino-bubble i { position:absolute; left:calc(50% - 11px); top:calc(50% - 11px); width:22px; height:22px; border-radius:50%; background:var(--clino-color); transition:transform .12s linear; }
.vertex-v3 #app .clinometer[data-mode="camera"] .clino-bubble { display:none; }
.vertex-v3 #app .clino-sight { display:none; position:fixed; left:0; right:0; top:50%; height:0; pointer-events:none; }
.vertex-v3 #app .clinometer[data-mode="camera"] .clino-sight { display:block; }
.vertex-v3 #app .clino-line { position:absolute; left:8%; right:8%; top:-1px; height:2px; background:#fff; box-shadow:0 0 6px #000c; }
.vertex-v3 #app .clino-level { position:absolute; left:20%; right:20%; top:-1px; border-top:2px dashed #ffffffa0; transform-origin:50% 50%; }
.vertex-v3 #app .clino-center { position:absolute; left:calc(50% - 8px); top:-8px; width:12px; height:12px; border:2px solid #fff; border-radius:50%; }
.vertex-v3 #app .clino-deg { font:700 clamp(56px,min(26vw,13dvh),118px)/1 system-ui; color:var(--clino-color); font-variant-numeric:tabular-nums; }
.vertex-v3 #app .clinometer[data-mode="camera"] .clino-deg { text-shadow:0 2px 14px #000b; }
.vertex-v3 #app .clino-band { padding:6px 14px; border-radius:14px; background:#16181ccc; color:var(--clino-color); font:600 15px system-ui; }
.vertex-v3 #app .clino-hint { max-width:300px; margin:0; color:#9aa3ad; font-size:14px; line-height:1.4; text-align:center; }
.vertex-v3 #app .clinometer[data-mode="camera"] .clino-hint { color:#eef1f5; text-shadow:0 1px 4px #000; }
.vertex-v3 #app .clino-card { position:relative; z-index:1; display:flex; flex-direction:column; gap:10px; padding:16px 16px calc(env(safe-area-inset-bottom,0px) + 18px); border-radius:22px 22px 0 0; background:#1e2126; }
.vertex-v3 #app .clino-scale { display:flex; gap:3px; height:8px; }
.vertex-v3 #app .clino-scale i { flex:1; border-radius:4px; opacity:.55; }
.vertex-v3 #app .clino-scale i.on { opacity:1; outline:2px solid #fff; }
.vertex-v3 #app .clino-scale i:nth-child(1) { background:#ffe25c; }
.vertex-v3 #app .clino-scale i:nth-child(2) { background:#ffc137; }
.vertex-v3 #app .clino-scale i:nth-child(3) { background:#ff8b27; }
.vertex-v3 #app .clino-scale i:nth-child(4) { background:#ef4b2d; }
.vertex-v3 #app .clino-scale i:nth-child(5) { background:#c42626; }
.vertex-v3 #app .clino-ticks { display:flex; justify-content:space-between; margin-top:-4px; color:#8d96a2; font-size:11.5px; }
.vertex-v3 #app .clino-row { display:flex; justify-content:space-between; gap:10px; margin:0; color:#cfd4dc; font-size:14.5px; }
.vertex-v3 #app .clino-row[hidden] { display:none; }
.vertex-v3 #app .clino-row b { color:#f1f3f5; }
.vertex-v3 #app#app#app#app #clinometer button.clino-hold { min-height:48px; border:0; border-radius:14px; background:#3b82f6; color:#fff; font:600 16px system-ui; cursor:pointer; }
.vertex-v3 #app#app#app#app #clinometer button.clino-hold:disabled { background:#2a2e35; color:#6f7882; cursor:default; }