:root { --forest:#123c30;--deep:#0c2923;--leaf:#b7d58a;--cream:#f8f7f2;--text:#1c2926;--muted:#68756e;--line:#e5e9e2;--white:#fff;--warn:#fff6e9;--radius:20px; }
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#eaece8;color:var(--text);font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;-webkit-font-smoothing:antialiased}button{font:inherit;cursor:pointer}button:focus-visible{outline:3px solid #a6c978;outline-offset:3px}.site-shell{width:100%;max-width:580px;min-height:100dvh;margin:0 auto;background:var(--cream);position:relative;box-shadow:0 0 36px #17291c0a}.topbar{height:74px;padding:0 23px;display:flex;align-items:center;justify-content:space-between;background:var(--cream);border-bottom:1px solid var(--line)}.brand{font-weight:800;letter-spacing:-.7px;color:var(--forest);font-size:24px;display:flex;align-items:center;gap:9px}.brand-mark{background:var(--forest);color:#cce4a5;width:31px;height:31px;border-radius:10px;display:grid;place-items:center;font-size:26px;line-height:1}.language-switch{border:1px solid #d7dcd4;background:#fff;padding:4px;border-radius:28px;display:flex;gap:1px}.lang-btn{min-width:41px;border:0;background:transparent;border-radius:24px;padding:7px 6px;font-size:12px;letter-spacing:.5px;font-weight:800;color:#76817b}.lang-btn.active{background:var(--forest);color:#fff}.main-content{padding:24px 22px 112px}.view{display:none;animation:fadein .22s ease}.view.active{display:block}@keyframes fadein{from{opacity:.4;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}.eyebrow{display:flex;align-items:center;gap:8px;font-size:10px;font-weight:800;color:#6d8571;letter-spacing:1.35px;margin:4px 0 16px;text-transform:uppercase;line-height:1.5}.dot{width:7px;height:7px;border-radius:100%;background:#83a25e;flex-shrink:0}.hero{border-radius:24px;position:relative;min-height:347px;overflow:hidden;background:radial-gradient(circle at 100% 2%,#49735b 0%,#244b3c 35%,#103528 85%);padding:25px;color:#fff;box-shadow:0 10px 23px #1b49351d}.hero-content{position:relative;z-index:2}.hero-kicker{font-size:11px;color:#d7eac0;font-weight:600}.hero h1{font-size:clamp(29px,7.3vw,41px);line-height:1.12;letter-spacing:-1.55px;margin:17px 0 15px;max-width:420px;font-weight:800}.hero p{font-size:13px;line-height:1.7;color:#dce7dd;max-width:295px;margin:0 0 23px}.hero-decor{position:absolute;right:27px;top:23px;display:flex;align-items:center;gap:6px;color:#c6e1a1aa}.hero-leaves{position:absolute;right:-48px;bottom:-100px;font-size:330px;line-height:1;color:#a2cf8e1c;transform:rotate(-24deg);pointer-events:none}.btn{border:0;border-radius:13px;min-height:48px;padding:13px 20px;display:inline-flex;align-items:center;justify-content:center;gap:12px;font-size:13px;font-weight:800;transition:transform .15s,background .15s}.btn:active{transform:scale(.985)}.btn-primary{background:var(--forest);color:#fff}.btn-light{background:var(--leaf);color:var(--deep)}.btn-outline{color:var(--forest);border:1.5px solid #c6d4c8;background:#fff}.btn-wide{width:100%;justify-content:space-between}.section-heading{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:29px 0 17px}.section-heading h2{font-size:20px;letter-spacing:-.7px;margin:0}.tiny-label{color:#879188;font-size:9px;font-weight:800;letter-spacing:1px;text-transform:uppercase;max-width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.steps{border:1px solid var(--line);background:#fff;border-radius:20px;overflow:hidden}.step{display:flex;align-items:center;gap:15px;padding:17px 16px;border-bottom:1px solid var(--line)}.step:last-child{border-bottom:0}.step-icon{display:flex;align-items:center;justify-content:space-between;flex-direction:column;gap:4px;color:#819989;font-size:10px;font-weight:800;background:#f0f4ed;border-radius:12px;min-width:50px;height:51px;padding:7px}.step-icon span{font-size:17px;color:#28513c}.step h3{font-size:13px;margin:0 0 5px}.step p{color:var(--muted);font-size:11.5px;line-height:1.5;margin:0}.research-note{display:flex;gap:10px;padding:15px;background:#eef1e9;border-radius:14px;margin-top:20px;color:#647565}.research-note span{font-weight:800;font-size:17px;flex-shrink:0}.research-note p{font-size:11px;line-height:1.55;margin:0}.bottom-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:580px;display:grid;grid-template-columns:repeat(5,1fr);gap:1px;min-height:calc(72px + env(safe-area-inset-bottom));background:#fff;box-shadow:0 -5px 25px #19362515;z-index:10;padding-bottom:env(safe-area-inset-bottom);border-top:1px solid #e9ece6}.nav-item{background:transparent;border:0;color:#87938a;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;font-size:10px;font-weight:700;padding:8px 2px}.nav-icon{display:grid;place-items:center;font-size:25px;height:30px;width:53px;border-radius:18px}.nav-item.active{color:var(--forest)}.nav-item.active .nav-icon{background:#e8f1e2;color:#274c37}.screen-title h1,.view>h1{font-size:31px;line-height:1.14;letter-spacing:-1.2px;margin:7px 0 13px}.screen-title p,.page-subtitle{color:var(--muted);font-size:13px;line-height:1.65;margin:0 0 23px}.capture-card{border:1px dashed #9cb2a1;background:#fff;border-radius:20px;padding:24px 20px 25px;text-align:center}.capture-illustration{width:165px;height:153px;border-radius:18px;display:flex;align-items:center;justify-content:center;margin:0 auto 15px;background:#eef5e8;position:relative;overflow:hidden}.leaf-illustration{font-size:130px;color:#77a274;line-height:1;transform:rotate(-28deg)}.corner{position:absolute;width:20px;height:20px;border:3px solid #2d5b43}.tl{top:12px;left:12px;border-right:0;border-bottom:0}.tr{top:12px;right:12px;border-left:0;border-bottom:0}.bl{bottom:12px;left:12px;border-right:0;border-top:0}.br{bottom:12px;right:12px;border-left:0;border-top:0}.capture-card h2{font-size:17px;letter-spacing:-.4px;margin:0 0 7px}.capture-card p{font-size:12px;color:var(--muted);margin:0 0 18px}.upload-actions{display:grid;gap:9px}.upload-actions .btn{width:100%}.hidden,.visually-hidden{display:none!important}.preview-panel{margin:26px 0}.preview-panel img{max-height:290px;width:100%;object-fit:contain;border-radius:14px;background:#e5e8e1;margin-bottom:14px;border:1px solid #e1e6dd}.result-panel{margin:16px 0;border:1px solid #d6e1d0;background:#f1f7eb;border-radius:15px;padding:19px;font-size:13px;line-height:1.7}.result-panel.is-warning{background:var(--warn);border-color:#eedcc2}.result-panel.is-error{background:#fff1ee;border-color:#f3cdc7}.result-panel h3{font-size:15px;margin:0 0 7px}.result-panel p{margin:0 0 8px}.result-panel p:last-child{margin-bottom:0}.result-panel ul{margin:7px 0 10px;padding-left:19px}.info-card{border:1px solid var(--line);border-radius:18px;background:#fff;padding:21px;margin:12px 0}.info-card h2{font-size:16px;letter-spacing:-.4px;margin:0 0 7px}.info-card p{font-size:12px;line-height:1.7;color:#607369;margin:0}.info-icon{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:#eaf2e5;color:#246044;font-size:23px;margin-bottom:15px}.service-row{border-top:1px solid #e9eee7;padding:15px 0;display:flex;align-items:center;gap:18px}.service-row:first-of-type{margin-top:15px}.service-row:last-child{padding-bottom:0}.service-row span{color:#829d89;font-size:13px;font-weight:800}.service-row p{font-weight:600;color:#253d2f}@media(min-width:700px){.site-shell{margin:22px auto;min-height:calc(100dvh - 44px);border-radius:27px;overflow:hidden}.bottom-nav{bottom:22px;border-radius:0 0 27px 27px}.hero{min-height:365px}}@media(max-width:340px){.hero{padding:20px}.main-content{padding-left:15px;padding-right:15px}.topbar{padding-left:15px;padding-right:15px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

/* Step 2: shared geometry for image and YOLO bounding-box canvas */
.status-strip{background:#eff5e9;color:#254936;border:1px solid #d7e5d1;padding:12px 14px;border-radius:12px;margin:0 0 15px;font-size:12px;font-weight:700}
.status-strip.is-warning{background:#fff6ea;color:#80552d;border-color:#ead5b8}
.photo-visual{position:relative;width:100%;margin-bottom:14px;line-height:0;overflow:hidden;border-radius:14px;background:#e5e8e1}
.photo-visual img{display:block;width:100%;height:auto;max-height:none;object-fit:unset;border:0;margin:0;border-radius:0}
.photo-visual canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;image-rendering:auto}

/* Step 3: opt-in, protected local reviewer and non-representative aggregates */
.consent-option{display:flex;gap:11px;align-items:flex-start;padding:14px 12px;margin:0 0 12px;border:1px solid #d4e0cf;border-radius:13px;background:#f1f7ec;font-size:12px;line-height:1.5;color:#3d5547}
.consent-option input{flex:none;width:18px;height:18px;accent-color:#275b43;margin-top:1px}
.field-label{display:block;font-size:12px;font-weight:700;margin:16px 0 6px}
.field-input,.field-select,.field-textarea{box-sizing:border-box;display:block;width:100%;border:1px solid #cbd9ce;background:#fff;color:#193b2c;border-radius:11px;padding:12px;font:inherit;font-size:14px;margin-bottom:11px}
.field-textarea{min-height:66px;resize:vertical}.field-input:focus-visible,.field-select:focus-visible,.field-textarea:focus-visible{outline:2px solid #397958;outline-offset:2px}
.small-feedback{font-size:12px;margin:11px 0;color:#6a583e}.centre-actions{display:flex;justify-content:flex-end;gap:8px}.centre-actions .btn{padding:9px 13px;font-size:12px}
.metric-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:17px 0}
.metric{border:1px solid #dfe9df;border-radius:15px;padding:16px;background:#fff}
.metric strong{display:block;color:#1d4936;font-size:27px;line-height:1.3}.metric span{color:#63776a;font-size:11px}
.case-card{border:1px solid #dfe9df;border-radius:16px;padding:15px;margin:10px 0;background:#fff}
.case-card h3{font-size:13px;letter-spacing:0;margin:0 0 5px;overflow-wrap:anywhere}.case-card p{font-size:12px;line-height:1.5;color:#627368;margin:5px 0}.case-card img{width:100%;max-height:290px;object-fit:contain;background:#f1f3ee;border-radius:12px;margin:7px 0}
.case-card .btn{padding:10px 14px;font-size:12px;margin-top:6px}.case-card .review-state{font-weight:700;color:#254d39}
.case-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:7px}.case-actions button{flex:1}.case-id{font-family:monospace;font-size:11px!important}
/* CoffeeLeaf v0.4: town picker, reporting, authorized review, notice */
.notice{padding:13px;background:#fff3df;border:1px solid #f1dcb3;border-radius:12px;font-size:12px;margin:12px 0;line-height:1.5}
.resource-links{display:grid;gap:9px;margin-top:15px;padding-top:12px;border-top:1px solid #e5e9e2}
.resource-links a{font-size:12px;font-weight:700;color:#186448;line-height:1.5;text-underline-offset:3px}
.human-priority{display:block;padding:9px 11px;background:#fff1d4;color:#824e17;border-radius:9px;font-size:11px;margin:3px 0 12px;letter-spacing:.35px}
.report-card{background:#fff;border:1px solid #dce7dc;border-radius:17px;overflow:hidden}
.report-choice{padding:16px;border-bottom:1px solid #e5eee6}.report-choice:last-child{border:0}.report-choice h3{font-size:14px;margin:0 0 6px}.report-choice p{font-size:12px;color:#5b7361;margin:0 0 11px;line-height:1.5}
.report-choice .case-actions .btn{font-size:11px;padding:8px 6px;min-height:40px;white-space:normal}
#authority-map{height:320px;border:1px solid #d9e6de;border-radius:15px;overflow:hidden;background:#dcebe2;margin-bottom:8px}
.case-thumb{width:100%;max-height:145px;object-fit:contain}
.modal-overlay{position:fixed;inset:0;background:#061f17ba;z-index:300;display:flex;align-items:center;justify-content:center;padding:18px}
.modal-card{max-width:450px;width:100%;max-height:90vh;overflow-y:auto;background:#fff;border-radius:19px;padding:25px;box-shadow:0 20px 60px #0004}
.modal-card h2{font-size:20px;color:#133a2b;margin:0 0 10px}.modal-card p{font-size:13px;line-height:1.7;color:#465e52}
.modal-card .btn{font-size:12px;padding:10px 12px;flex:1}

/* v0.5: fully local maps and swipe-to-guidance */
#authority-map{height:auto;min-height:260px;max-height:550px;display:flex;align-items:center;justify-content:center;background:#f1f7f7}
#authority-map svg{display:block;width:100%;height:auto;max-height:550px}
.map-empty{position:absolute;background:#fff9;padding:8px 12px;border-radius:8px;color:#63766b}
.guide-title{font-size:15px;margin:20px 0 9px;color:#123f2e}
.guide-carousel{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 3px 12px;-webkit-overflow-scrolling:touch}
.guide-card{min-width:min(260px,82%);scroll-snap-align:start;border:1px solid #c6ddc7;background:#fff;border-radius:15px;padding:15px;display:flex;flex-direction:column;gap:8px;box-shadow:0 3px 9px #102d2312}
.guide-card strong{color:#18432f}.guide-card p{font-size:12px;line-height:1.5;margin:0}.guide-link{display:block;text-decoration:none;color:#fff!important;background:#1d634a;padding:11px 12px;border-radius:11px;text-align:center;font-size:12px;font-weight:750}
.guide-card small{color:#597064;font-size:10.5px}.guide-caution{font-size:11px;color:#526759;margin-top:7px}

/* Version 0.6: interactive departmental choropleth */
#authority-map{background:#f8faf7;min-height:300px;max-height:none;height:auto;}
#authority-map svg{max-height:620px;width:100%}
#authority-map svg path{transition:fill .15s ease}
#authority-map svg path:hover,#authority-map svg path:focus{stroke:#173b2f;stroke-width:2}
.map-selector{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.map-selector .btn{min-height:40px;padding:9px 12px;font-size:11px}
.department-breakdown{margin:15px 0 25px;border:1px solid #dfebe3;border-radius:14px;background:white;padding:14px}
.department-breakdown h3{font-size:14px;margin:2px 0 11px}
.dep-row{display:flex;align-items:center;justify-content:space-between;padding:9px 4px;border-top:1px solid #e8efea;font-size:12px}
.dep-row strong{color:#a64d32;font-variant-numeric:tabular-nums}
.map-missing{padding:20px;background:#fff0d6;color:#614b19;border-radius:12px;font-size:12px;line-height:1.5}


/* About: private feedback and bug-report form */
.feedback-card{background:#fff;border-color:#d8e5d7}
.feedback-form{margin-top:14px}
.feedback-form .field-label{margin:14px 0 7px}
.feedback-message{min-height:126px;line-height:1.6}
.feedback-privacy{font-size:11px!important;line-height:1.6!important;color:#687a6e!important;margin:7px 0 17px!important}
.feedback-form .btn{width:100%}
.feedback-result{font-size:12px;line-height:1.5;margin:12px 0 0;min-height:0;color:#254d39;font-weight:650}
.feedback-result.is-error{color:#ab4437}
.feedback-result.is-success{color:#286345}
@media(max-width:380px){.bottom-nav .nav-item{min-width:0}}