/* Kevin's scan viewer. Walk pad and touch rules are carried over from mproperties' viewer (porch.thepuff.co). */
:root{--ink:#2c2a26;--accent:#3d5a6c;--paper:#eeeae3;--mist:#e3ded5;--muted:#6f6a61;--surface:#fffffff2;--shadow:0 10px 40px #2c2a261f;color-scheme:light}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font:16px/1.45 system-ui,-apple-system,sans-serif;color:var(--ink);background:var(--paper);overflow:hidden}
button{font:inherit;color:inherit;border:0;cursor:pointer;background:none}
#viewport{position:fixed;inset:0}canvas{display:block;touch-action:none}
header{position:fixed;top:max(22px,env(safe-area-inset-top));left:28px;pointer-events:none}
.brand{font:500 34px Georgia,serif;letter-spacing:-1.5px}.brand span{display:block;font:10px system-ui;letter-spacing:2px;margin-top:1px;color:var(--muted)}
.quick{position:fixed;right:28px;top:max(22px,env(safe-area-inset-top));display:flex;gap:8px}
.quick button{background:var(--surface);border-radius:12px;padding:8px 14px;font-size:20px;box-shadow:var(--shadow);min-width:44px;min-height:44px}.quick span{font-size:11px;display:block}
#dock{position:fixed;left:50%;transform:translateX(-50%);bottom:max(20px,env(safe-area-inset-bottom));background:var(--surface);box-shadow:var(--shadow);border-radius:14px;padding:10px 12px;display:flex;flex-direction:column;gap:8px;width:min(560px,calc(100% - 32px))}
#dock .row{display:flex;gap:8px;align-items:center}
.segmented{display:flex;background:var(--mist);border-radius:10px;padding:3px;flex:1}
.segmented button{flex:1;padding:8px 10px;border-radius:8px;font-size:14px;min-height:40px}
.segmented button.active{background:#fff;box-shadow:0 1px 4px #0002;font-weight:600}
#walk,#measure{padding:0 14px;min-height:46px;border-radius:10px;background:var(--mist);font-size:14px}
#measure[aria-pressed=true]{background:var(--accent);color:#fff}
.cut label{font-size:13px;color:var(--muted);white-space:nowrap;min-width:124px}.cut input{flex:1;accent-color:var(--accent);min-height:32px}
.caption{margin:0;font-size:12px;color:var(--muted)}
#readout{position:fixed;left:50%;top:max(84px,calc(env(safe-area-inset-top) + 70px));transform:translateX(-50%);background:var(--accent);color:#fff;padding:8px 14px;border-radius:10px;font-size:15px;box-shadow:var(--shadow);white-space:nowrap}
#readout button{color:#fff;text-decoration:underline;margin-left:10px;font-size:13px}
#readout[hidden]{display:none}
/* Loading, toast, walk pad */
#loading{position:fixed;inset:0;background:var(--paper);display:flex;justify-content:center;align-items:center;flex-direction:column;font:28px Georgia}
#loading span{font:14px system-ui;margin-top:12px;color:var(--muted)}
#toast{position:fixed;left:50%;top:50%;transform:translateX(-50%);background:var(--accent);color:#fff;padding:10px 18px;border-radius:8px;font-size:14px;display:none;max-width:90%}
#walk-pad{position:fixed;left:20px;bottom:20px;text-align:center;background:var(--surface);padding:10px;border-radius:12px;max-width:260px}
#walk-pad button{padding:12px 18px;border-radius:6px;margin:3px;background:var(--mist);touch-action:none}
#walk-pad small{display:block;font-size:11px}#walk-pad[hidden]{display:none}
#walk-stick,#walk-pad .walk-hint-touch{display:none}
.walk-rise{display:flex;justify-content:center}
#walk-pad #finish-walk,#walk-pad .eye{display:block;margin:3px auto}
body.walking #dock,body.walking .quick,body.walking header{display:none}
@media(pointer:coarse){
#walk-pad{left:0;right:0;bottom:calc(max(8px,env(safe-area-inset-bottom)) + 8px);max-width:none;padding:0 max(12px,env(safe-area-inset-right)) 0 max(12px,env(safe-area-inset-left));background:none;pointer-events:none;display:flex;justify-content:space-between;align-items:flex-end}
#walk-pad>*{pointer-events:auto}
#walk-pad .walk-keys,#walk-pad .walk-hint-keys{display:none}
#walk-pad #finish-walk,#walk-pad .eye{position:fixed;top:max(16px,env(safe-area-inset-top));margin:0;background:var(--surface);box-shadow:var(--shadow)}
#walk-pad #finish-walk{right:max(12px,env(safe-area-inset-right))}#walk-pad .eye{left:max(12px,env(safe-area-inset-left))}
.walk-rise{flex-direction:column}
#walk-stick{display:block;flex:none;position:relative;width:128px;height:128px;border-radius:50%;background:rgba(23,32,28,.38);touch-action:none;-webkit-user-select:none;user-select:none}
#walk-knob{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:rgba(255,255,255,.85);pointer-events:none}
#walk-pad .walk-rise button{min-width:52px;min-height:48px;margin:3px 0;background:rgba(23,32,28,.6);color:#fff}
#walk-pad .walk-hint-touch{display:block;position:fixed;left:50%;bottom:calc(max(8px,env(safe-area-inset-bottom)) + 150px);transform:translateX(-50%);width:max-content;max-width:90%;padding:5px 10px;border-radius:8px;background:rgba(23,32,28,.7);color:#fff;font-size:11px;pointer-events:none}
}
@media(max-width:640px){
header{left:16px;top:max(14px,env(safe-area-inset-top))}
.brand{font-size:26px}.brand span{font-size:8px;letter-spacing:1px}
.quick{right:16px;top:max(14px,env(safe-area-inset-top));gap:6px}.quick button{padding:4px 9px;font-size:17px}.quick span{font-size:9px}
#dock{width:calc(100% - 32px);bottom:max(16px,env(safe-area-inset-bottom));padding:8px 10px}
#walk,#measure{padding:0 10px;font-size:13px}
.segmented button{font-size:13px;padding:6px}
}
#show-pick[hidden]{display:none}
#show-pick{flex:none}