:root{
  --brand:#A2AC87;
  --brand-dark:#6d7757;
  --ink:#22301f;
  --muted:#5b6656;
  --bg:#f7f8f3;
  --card:#ffffff;
  --line:#e2e6d8;
  --warn-bg:#fdf6e9;
  --warn-line:#ecd9ac;
  --radius:16px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.55;
}
.wrap{max-width:680px;margin:0 auto;padding:20px 16px 48px}
header.site{display:flex;align-items:center;gap:10px;padding:6px 0 14px}
.logo{width:38px;height:38px;border-radius:50%;background:var(--brand);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:18px;flex:0 0 auto}
header.site .name{font-weight:700;font-size:17px}
header.site .place{color:var(--muted);font-size:13px}
.topnav{display:flex;gap:18px;padding:0 0 10px}
.topnav a{color:var(--brand-dark);font-weight:600;font-size:15px;text-decoration:none}
.topnav a:active{text-decoration:underline}
h1{font-size:28px;line-height:1.2;margin:8px 0 10px}
h2{font-size:21px;margin:0 0 8px}
p{margin:0 0 12px}
.lede{color:var(--muted);font-size:17px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px 18px;margin:16px 0;box-shadow:0 1px 3px rgba(34,48,31,.05)}
.step-tag{display:inline-block;background:var(--brand);color:#fff;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;border-radius:999px;padding:3px 10px;margin-bottom:10px}
.btn{
  display:block;width:100%;text-align:center;border:0;border-radius:12px;cursor:pointer;
  background:var(--brand-dark);color:#fff;font-size:17px;font-weight:600;padding:15px 18px;margin:12px 0;
  text-decoration:none;
}
.btn:active{transform:translateY(1px)}
.btn.secondary{background:#fff;color:var(--brand-dark);border:2px solid var(--brand)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn.small{font-size:15px;padding:12px 14px}
.tips{background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:12px;padding:12px 14px;font-size:14px}
.tips ul{margin:6px 0 0;padding-left:18px}
.tips li{margin:3px 0}
.tips.warn{margin-top:14px}
.privacy{display:flex;gap:8px;align-items:flex-start;background:#eef1e6;border-radius:12px;padding:12px 14px;font-size:14px;color:var(--ink)}
.consent{display:flex;gap:10px;align-items:flex-start;margin:16px 0 4px;font-size:15px;cursor:pointer}
.consent input{width:22px;height:22px;flex:0 0 auto;margin-top:2px;accent-color:var(--brand-dark)}
.hint{color:var(--muted);font-size:14px}
.mode-tabs{display:flex;gap:8px;margin:16px 0 4px}
.tab{flex:1;border:2px solid var(--brand);background:#fff;color:var(--brand-dark);border-radius:12px;padding:12px 8px;font-size:15px;font-weight:600;cursor:pointer}
.tab.active{background:var(--brand-dark);border-color:var(--brand-dark);color:#fff}
.camera-stage{position:relative;margin:14px auto;width:min(100%,61vh);aspect-ratio:3/4;border-radius:12px;overflow:hidden;background:#1c211a;line-height:0}
/* pointer-events:none — iOS eats scroll gestures that start on a
 * <video>; the stream needs no interaction, so let touches fall
 * through to the page and scroll normally. */
.camera-stage video{width:100%;height:100%;object-fit:cover;display:block;transform:scaleX(-1);pointer-events:none}
.camera-stage video.rear{transform:none}
.camera-stage .outline{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);height:92%;opacity:.85;pointer-events:none}
.camera-stage .outline ellipse,.camera-stage .outline path{stroke:#fff;stroke-width:2.2;stroke-dasharray:5 4;fill:rgba(255,255,255,.06);stroke-linecap:round}
.countdown{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:110px;font-weight:800;color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.55);background:rgba(20,26,18,.25);line-height:1}
/* iPhone-camera style controls: shutter = white ring + white disc;
 * flip = translucent dark circle with a white glyph. */
.shutter{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);width:74px;height:74px;border-radius:50%;border:4px solid #fff;background:transparent;cursor:pointer;padding:0;line-height:1;z-index:3;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}
.shutter::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:58px;height:58px;border-radius:50%;background:#fff;transition:transform .08s ease}
.shutter:active::after{transform:translate(-50%,-50%) scale(.9)}
.shutter.shooting::after{transform:translate(-50%,-50%) scale(.82);background:#e9e9e9}
.shutter:disabled{opacity:.55;cursor:not-allowed}
.shutter.timer-armed::after{content:"10s";display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:800;color:#20261e}
.shutter.counting{background:rgba(20,26,18,.55);color:#fff;font-size:30px;font-weight:800}
.shutter.counting::after{display:none}
.flipcam{position:absolute;right:16px;bottom:29px;width:48px;height:48px;border-radius:50%;border:none;background:rgba(30,30,30,.38);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;z-index:3;-webkit-tap-highlight-color:transparent}
.flipcam:active{background:rgba(30,30,30,.55)}
.flipcam:disabled{opacity:.5;cursor:not-allowed}
.file-row{margin:14px 0}
input[type=file]{width:100%;font-size:15px;padding:12px;border:2px dashed var(--brand);border-radius:12px;background:#fbfcf8}
.loading{display:none;align-items:center;gap:12px;padding:14px 4px;color:var(--muted);font-size:15px}
.loading.on{display:flex}
.spinner{width:26px;height:26px;flex:0 0 auto;border-radius:50%;border:3px solid var(--line);border-top-color:var(--brand-dark);animation:spin 0.9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* The point-correction instruction must be unmissable (owner,
 * 2026-11-03): a tinted panel with a per-point placement list. */
.point-guide{background:#eef1e4;border:1px solid #A2AC87;border-radius:12px;padding:12px 14px;margin:12px 0}
.point-guide h3{margin:0 0 6px;font-size:17px}
.point-guide p{margin:0}
.point-guide ul{margin:8px 0 2px;padding-left:19px}
.point-guide li{margin:3px 0}
/* Immersive edit mode (owner idea, 2026-11-03): the review photo
 * expands to fill the whole screen (in-page — iOS has no element
 * fullscreen on iPhone), with the correction instruction ON the photo
 * and a Done button to come back. */
body.immersive{overflow:hidden}
.canvas-wrap.immersive{position:fixed;inset:0;z-index:60;margin:0;border-radius:0;background:#101310;display:flex;align-items:center;justify-content:center}
.canvas-wrap.immersive canvas{width:auto;height:auto;max-width:100vw;max-height:100dvh}
.canvas-wrap.immersive .legend{display:none}
.immersive-bar{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;gap:10px;align-items:center;justify-content:space-between;padding:10px 12px calc(10px + env(safe-area-inset-top, 0px));background:rgba(16,19,16,.85);color:#fff;font-size:14.5px;line-height:1.35}
.immersive-bar[hidden]{display:none}
.immersive-done{flex:none;background:transparent;color:#fff;border:1.5px solid #fff;border-radius:999px;padding:7px 16px;font-size:14.5px;font-weight:700;cursor:pointer}
.canvas-wrap{display:none;position:relative;margin:14px 0;overflow:hidden;border-radius:12px}
/* Round full-screen button ON the photo (owner, 2026-11-03: the wide
 * button above the photo was too easy to miss; this mirrors the
 * camera-screen controls). Hidden while that photo is immersive. */
.expand-btn{position:absolute;right:14px;bottom:14px;z-index:4;width:50px;height:50px;border-radius:50%;border:none;background:rgba(25,28,25,.52);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.canvas-wrap.immersive .expand-btn{display:none}
.canvas-wrap.on{display:block}
.legend{position:relative;z-index:2;background:var(--card,#fff)}
canvas{width:100%;height:auto;border-radius:12px;display:block;background:#ddd;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;transform-origin:0 0}
/* While measuring, a long press must never trigger iOS text
 * selection / the system magnifier — the app has its own loupe. */
#screen-front,#screen-review,#screen-side{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
canvas.draggable{touch-action:none;cursor:grab}
canvas.draggable:active{cursor:grabbing}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px;color:var(--muted);margin-top:8px}
.legend span::before{content:"";display:inline-block;width:14px;height:4px;border-radius:2px;margin-right:6px;vertical-align:middle;background:var(--c,#999)}
.error{display:none;background:#fdeeee;border:1px solid #f2c1c1;color:#7a2a2a;border-radius:12px;padding:14px;font-size:15px;margin:12px 0}
.error.on{display:block}
.guidance{background:#fdeeee;border:1px solid #f2c1c1;border-radius:12px;padding:14px;font-size:15px;margin:12px 0;color:#5f2323}
.guidance h3{margin:0 0 8px;font-size:16px}
.guidance ul{margin:0;padding-left:18px}
.guidance li{margin:5px 0}
.live-metrics{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.live-metrics .metric{background:#fbfcf8;border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:14px}
.findings{list-style:none;margin:0 0 6px;padding:0}
.findings li{padding:10px 12px;border:1px solid var(--line);border-radius:12px;margin:0 0 8px;background:#fbfcf8;font-size:15px}
.findings li b{color:var(--brand-dark)}
.chip{display:inline-block;font-size:12px;font-weight:700;border-radius:999px;padding:2px 9px;margin-left:8px;vertical-align:middle}
.chip.high{background:#e3ecd4;color:#44512f}
.chip.moderate{background:#fdf0d3;color:#7a5b12}
.chip.low{background:#f6dede;color:#7a2a2a}
.disclaimer{font-size:13px;color:var(--muted);border-top:1px solid var(--line);padding-top:12px;margin-top:16px}
footer.site{color:var(--muted);font-size:13px;text-align:center;padding:18px 0 4px}
[hidden]{display:none !important}

/* Guided level-confirm checklist (build .23) */
.checklist{margin-top:16px;padding:14px 16px;border:1.5px solid var(--sage,#a2ac87);border-radius:12px;background:#f4f6ef}
.checklist h3{margin:0 0 6px;font-size:17px}
.checklist p{margin:0;font-size:14.5px;line-height:1.45}
.check-row{display:flex;align-items:center;gap:10px;margin-top:12px}
.check-name{font-weight:700;flex:1}
.check-status{font-size:13.5px;opacity:.7}
.check-status.done{color:#4c7a3f;opacity:1;font-weight:700}
.checklist .hint{margin-top:10px}
.btn[disabled]{opacity:.45;pointer-events:none}