/* Public pages: the boiler-house scene, header, footer and the brass-bezel dial shared by the landing and sign-in pages. */
body.site{display:flex;flex-direction:column;min-height:100dvh;background:radial-gradient(130% 60% at 50% 115%,color-mix(in srgb,var(--ember) 16%,transparent),transparent 70%),var(--bg-0)}
.scene{position:fixed;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none}

.site-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:max(20px,env(safe-area-inset-top)) max(var(--gutter),env(safe-area-inset-right)) 20px max(var(--gutter),env(safe-area-inset-left))}
.site-brand{display:inline-flex;align-items:center;gap:12px;min-width:0;border-radius:var(--r-md)}
.site-brand .mark{display:grid;flex-shrink:0;width:38px;height:38px;border-radius:23%;box-shadow:var(--shadow-1);transition:filter var(--t),transform var(--t) var(--ease)}
.site-brand .mark img{width:100%;height:100%}
.site-brand strong{font:500 1.25rem/1.1 var(--font-display);letter-spacing:-.012em;color:var(--ink-0);text-wrap:balance}
.site-head .btn{flex-shrink:0;gap:0;white-space:nowrap}
.site-brand:hover .mark{filter:brightness(1.1)}
@media(hover:hover) and (pointer:fine){.site-brand:hover .mark{transform:rotate(-8deg)}}

.site-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 24px;padding:20px max(var(--gutter),env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(var(--gutter),env(safe-area-inset-left));font-size:var(--text-xs);line-height:1.5;color:var(--ink-3)}
.site-foot a{color:var(--ink-2);text-decoration:underline;text-decoration-color:var(--line-3);text-underline-offset:3px;transition:color var(--t),text-decoration-color var(--t)}
.site-foot a:hover{color:var(--ink-0);text-decoration-color:currentColor}

/* Dial: a .gauge mounted behind glass in a brass bezel. Size it with --dial; data-lamp lights the status lamp (work, ok, bad). */
.dial{--dial:140px;position:relative;flex-shrink:0;width:var(--dial);aspect-ratio:1;border-radius:50%;background:conic-gradient(from 210deg,color-mix(in srgb,var(--brass) 38%,var(--bg-0)),color-mix(in srgb,var(--brass) 82%,var(--ink-0)) 12%,color-mix(in srgb,var(--brass) 48%,var(--bg-0)) 30%,color-mix(in srgb,var(--brass) 70%,var(--bg-0)) 52%,color-mix(in srgb,var(--brass) 30%,var(--bg-0)) 70%,color-mix(in srgb,var(--brass) 64%,var(--ink-0)) 88%,color-mix(in srgb,var(--brass) 38%,var(--bg-0)));box-shadow:0 0 0 1px color-mix(in srgb,var(--bg-0) 70%,transparent),0 22px 44px -18px color-mix(in srgb,var(--bg-0) 92%,transparent),0 0 60px -20px color-mix(in srgb,var(--ember) 40%,transparent)}
.dial::before{content:"";position:absolute;inset:5%;border-radius:50%;background:radial-gradient(circle at 50% 40%,var(--surface-2),var(--bg-1) 75%);box-shadow:inset 0 3px 12px color-mix(in srgb,var(--bg-0) 85%,transparent),inset 0 0 0 1px color-mix(in srgb,var(--bg-0) 60%,transparent)}
.dial::after{content:"";position:absolute;inset:5%;border-radius:50%;background:linear-gradient(150deg,color-mix(in srgb,var(--ink-0) 13%,transparent),transparent 42%);pointer-events:none}
.dial .gauge{position:absolute;left:10%;top:10%;--gauge:80%}
.dial .g-track{stroke:var(--surface-4)}
.dial .g-needle path{stroke:var(--ember)}
.dial-lamp{position:absolute;left:50%;top:73%;width:clamp(8px,6%,13px);translate:-50% 0;aspect-ratio:1;border-radius:50%;background:var(--surface-4);box-shadow:inset 0 1px 2px color-mix(in srgb,var(--bg-0) 80%,transparent);transition:background var(--t),box-shadow var(--t)}
.dial[data-lamp] .dial-lamp{--lamp:var(--brass);background:var(--lamp);box-shadow:0 0 6px var(--lamp),0 0 18px color-mix(in srgb,var(--lamp) 60%,transparent)}
.dial[data-lamp=work] .dial-lamp{animation:lamp 1s ease-in-out infinite alternate}
.dial[data-lamp=ok] .dial-lamp{--lamp:var(--moss)}
.dial[data-lamp=bad] .dial-lamp{--lamp:var(--fire)}
@keyframes lamp{to{opacity:.45}}