/* Slope meter: Glacier UI; the bubble and scale keep the Steepness data colours. */
.vertex-v3 #app .clinometer { position:fixed; inset:0; z-index:1200; display:flex; flex-direction:column; overflow:hidden; background:var(--g-base); color:var(--g-contrast); font-family:var(--font-sans); --clino-color:#9aa3ad; --g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
.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:999px; background:var(--g-raised); color:var(--g-contrast); font-size:18px; cursor:pointer; --g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
.vertex-v3 #app .clino-spacer { width:40px; flex:none; }
.vertex-v3 #app .clino-modes { display:flex; padding:3px; border-radius:22px; background:var(--g-raised); --g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
.vertex-v3 #app#app#app#app #clinometer .clino-modes button { min-height:34px; padding:0 16px; border:0; border-radius:14px; background:none; color:var(--g-muted); font:600 14px var(--font-sans); cursor:pointer; --g-contrast:inherit;--g-secondary-contrast:inherit;--ui-on-dark:inherit;}
.vertex-v3 #app#app#app#app #clinometer .clino-modes button[aria-pressed="true"] { background:var(--g-surface); color:var(--g-ink); --g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
.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 rgba(var(--g-ink-rgb),0.188); 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 rgba(var(--g-ink-rgb),0.200); }
.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:var(--g-surface); box-shadow:0 0 6px rgba(var(--g-shadow-rgb),0.240); --g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
.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 #ffffffa0; border-radius:50%; }
.vertex-v3 #app .clino-deg { font:600 clamp(56px,min(26vw,13dvh),118px)/1 var(--font-sans); color:var(--g-ink); font-variant-numeric:tabular-nums; }
.vertex-v3 #app .clinometer[data-mode="camera"] .clino-deg { color:#fff; text-shadow:0 2px 14px #0009; }
.vertex-v3 #app .clino-band { padding:6px 14px; border-radius:14px; background:rgba(var(--g-base-rgb),0.800); color:var(--g-ink); font:600 15px var(--font-sans); --g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
.vertex-v3 #app .clino-hint { max-width:300px; margin:0; color:var(--g-muted); 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:var(--g-surface); --g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
.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 var(--g-ink); }
.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:var(--g-muted); font-size:11.5px; }
.vertex-v3 #app .clino-row { display:flex; justify-content:space-between; gap:10px; margin:0; color:var(--g-muted); font-size:14.5px; }
.vertex-v3 #app .clino-row[hidden] { display:none; }
.vertex-v3 #app .clino-row b { color:var(--g-contrast); }
.vertex-v3 #app#app#app#app #clinometer button.clino-hold { min-height:48px; border:0; border-radius:14px; background:var(--g-accent); color:var(--g-contrast); font:600 16px var(--font-sans); cursor:pointer; --g-contrast:var(--g-on-accent);--g-secondary-contrast:var(--g-on-accent);--ui-on-dark:var(--g-on-accent);}
.vertex-v3 #app#app#app#app #clinometer button.clino-hold:disabled { background:var(--g-raised); color:var(--g-muted); cursor:default; --g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}