/* Protect Green — leaf-white base, pine ink, oleander-pink (πικροδάφνη) accent.
   Thick simple lines, big targets, 18px base for every age. */
:root{
  --paper:#f3f8f1; --card:#ffffff; --ink:#0f3d2e; --ink-2:#4c6b5e; --line:#cfe0d3;
  --go:#c93a7f; --go-ink:#ffffff; --go-soft:#fde8f1; --bloom:#f07fb0;
  --healthy:#23a55a; --check:#f2b705; --cut:#e5484d; --stump:#6b7178; --pending:#9aa5a0;
  --r-sm:10px; --r:18px; --r-lg:28px;
  --stroke:2.2px;
  font-family:"Commissioner",system-ui,sans-serif;
  font-size:18px; line-height:1.5; color:var(--ink); background:var(--paper);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){ --paper:#0d1f18; --card:#132a21; --ink:#e7f3ec; --ink-2:#a8c2b5; --line:#24443a; --go-soft:#3b1a2b; }
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{display:flex;flex-direction:column;background:var(--paper);color:var(--ink)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--go);outline-offset:2px}
[hidden]{display:none!important}

.ico{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:var(--stroke);stroke-linecap:round;stroke-linejoin:round}
.ico.big{width:40px;height:40px}

/* top bar */
.bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;background:var(--ink);color:#fff}
.brand{display:flex;align-items:center;gap:8px;color:#fff;text-decoration:none;font-size:1.25rem;font-variation-settings:"FLAR" 100;letter-spacing:-.01em}
.brand b{font-weight:800;color:#9be7b4}
.brand .logo{width:44px;height:44px;flex:none;margin:-8px 0 -8px -6px}
.hero-mark{display:block;width:76px;height:76px;margin:0 0 4px -6px}
.brand .ico{color:#9be7b4}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 20px;border-radius:999px;border:var(--stroke) solid transparent;font-weight:700;cursor:pointer;text-decoration:none}
.btn-go{background:var(--go);color:var(--go-ink);border-color:var(--go)}
.btn-go:hover{filter:brightness(1.05)}
.btn-go:disabled{opacity:.45;cursor:not-allowed}
.btn-line{background:transparent;border-color:var(--ink);color:var(--ink)}
.btn.wide{width:100%}
.bar .btn-go{min-height:44px}
.iconbtn{width:48px;height:48px;border-radius:50%;border:var(--stroke) solid var(--line);background:var(--card);display:grid;place-items:center;cursor:pointer}

/* layout */
.layout{flex:1;display:grid;grid-template-columns:minmax(0,1fr) 430px;min-height:0}
.mapwrap{position:relative;min-height:0}
#map{position:absolute;inset:0;background:#dfeadf}
.sheet{background:var(--card);border-left:var(--stroke) solid var(--line);overflow-y:auto;padding:24px 24px 32px}
.grip{display:none}
.view{max-width:62ch}

/* filters */
.chips{position:absolute;z-index:500;left:12px;right:12px;bottom:14px;display:flex;gap:8px;overflow-x:auto;padding:2px}
.chip{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;border-radius:999px;border:var(--stroke) solid var(--ink);background:var(--card);font-weight:600;font-size:.9rem;cursor:pointer}
.chip span{font-weight:400;color:var(--ink-2)}
.chip.on{background:var(--ink);color:var(--paper)}
.chip.on span{color:inherit;opacity:.8}
.dot{width:12px;height:12px;border-radius:50%;display:inline-block}
.dot.healthy{background:var(--healthy)}.dot.check{background:var(--check)}.dot.cut{background:var(--cut)}.dot.stump{background:var(--stump)}.dot.pending{background:var(--pending)}

/* intro */
.demo{margin:0 0 18px;padding:10px 14px;border-radius:var(--r-sm);background:var(--go-soft);font-size:.88rem}
.hero{font-size:clamp(2.2rem,4.2vw,3rem);line-height:1.02;letter-spacing:-.025em;margin:.1em 0 .35em;font-weight:800;font-variation-settings:"FLAR" 100}
.lead{font-size:1.08rem;color:var(--ink-2);margin:0 0 22px}
.count{display:flex;gap:28px;margin:0 0 24px;padding:16px 0;border-top:var(--stroke) solid var(--line);border-bottom:var(--stroke) solid var(--line)}
.count strong{display:block;font-size:2.1rem;line-height:1;font-weight:800;font-variant-numeric:tabular-nums}
.count div:last-child strong{color:var(--cut)}
.count span{font-size:.9rem;color:var(--ink-2)}
.steps{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:12px}
.steps li{display:flex;align-items:center;gap:14px;font-weight:600}
.steps .ico{width:44px;height:44px;padding:9px;border:var(--stroke) solid var(--ink);border-radius:50%}
.fine{font-size:.85rem;color:var(--ink-2);margin-top:16px}

/* tree view */
.back{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:8px 0;font-weight:700;cursor:pointer;color:var(--ink)}
.tree-head{display:flex;align-items:center;gap:14px;margin:6px 0 4px}
.tree-head .art{width:64px;height:64px}
.tree-head h2{font-size:1.7rem;line-height:1.1;margin:0;font-weight:800;letter-spacing:-.015em}
.meta{color:var(--ink-2);font-size:.9rem;margin:0 0 16px}
.pill{display:inline-block;padding:3px 12px;border-radius:999px;font-size:.85rem;font-weight:700;color:#fff;margin-right:6px}
.p-healthy{background:var(--healthy)}.p-check{background:var(--check);color:#2b2200}.p-cut{background:var(--cut)}.p-stump{background:var(--stump)}
.p-demo{background:transparent;color:var(--ink-2);border:var(--stroke) solid var(--line)}
.timeline{list-style:none;margin:20px 0 0;padding:0 0 0 22px;border-left:var(--stroke) solid var(--line)}
.timeline li{position:relative;padding:0 0 22px 8px}
.timeline li::before{content:"";position:absolute;left:-33px;top:2px;width:20px;height:20px;border-radius:50%;background:var(--card);border:4px solid var(--pending)}
.timeline li.healthy::before{border-color:var(--healthy)}.timeline li.check::before{border-color:var(--check)}
.timeline li.cut::before{border-color:var(--cut)}.timeline li.stump::before{border-color:var(--stump)}
.timeline .when{font-weight:700}
.timeline .who{color:var(--ink-2);font-size:.88rem}
.timeline img{display:block;width:100%;border-radius:var(--r);margin-top:8px;border:var(--stroke) solid var(--line)}

/* form */
.formhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.formhead h2{margin:0;font-size:1.6rem;font-weight:800;letter-spacing:-.015em}
.step{border:0;margin:0;padding:18px 0;border-bottom:var(--stroke) solid var(--line)}
.step legend{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.15rem;padding:0;margin-bottom:12px}
.n{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--ink);color:var(--paper);font-size:.95rem}
.hint{font-size:.9rem;color:var(--ink-2);margin:10px 0 0}
.hint .warn{color:var(--cut);font-weight:600}
.q{font-weight:700;margin:16px 0 8px}
.cands{display:grid;gap:8px}
.cand{display:flex;align-items:center;gap:12px;min-height:52px;padding:8px 14px;border:var(--stroke) solid var(--line);border-radius:var(--r);cursor:pointer}
.cand:has(input:checked){border-color:var(--ink)}
.cand input{width:22px;height:22px;accent-color:var(--ink);margin:0}
.cand small{display:block;color:var(--ink-2)}

.tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:122px;padding:12px;border:var(--stroke) solid var(--line);border-radius:var(--r);text-align:center;font-weight:700;cursor:pointer;line-height:1.2}
.tile input{position:absolute;opacity:0;pointer-events:none}
.tile .art{width:52px;height:52px}
.art{fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.t-healthy .art{color:var(--healthy)}.t-check .art{color:#c99700}.t-cut .art{color:var(--cut)}.t-stump .art{color:var(--stump)}
.tile:has(input:checked){border-color:var(--ink);border-width:3px;background:var(--paper)}
.tile:has(input:focus-visible){outline:3px solid var(--go);outline-offset:2px}

.photo{position:relative;display:grid;place-items:center;min-height:160px;border:var(--stroke) dashed var(--ink-2);border-radius:var(--r);cursor:pointer;overflow:hidden;text-align:center;font-weight:700}
.photo input{position:absolute;inset:0;opacity:0;cursor:pointer}
.photo span{display:grid;justify-items:center;gap:6px;color:var(--ink-2)}
.photo img{width:100%;height:220px;object-fit:cover}

.more{padding:16px 0}
.more summary{cursor:pointer;font-weight:700;min-height:44px;display:flex;align-items:center}
.more label{display:block;font-weight:600;margin:14px 0 6px}
input:not([type=radio]):not([type=file]),textarea{width:100%;min-height:52px;padding:12px 14px;border:var(--stroke) solid var(--line);border-radius:var(--r-sm);background:var(--paper)}
input:focus,textarea:focus{border-color:var(--ink);outline:none}
#btnSend{margin-top:8px}
.msg{min-height:1.5em;margin:12px 0 0;font-weight:600}
.ok{color:var(--healthy)}.err{color:var(--cut)}
.thanks{padding:14px 16px;border-radius:var(--r);background:var(--paper);border:var(--stroke) solid var(--healthy);margin:0 0 18px}

/* map markers */
.leaflet-container{font-family:inherit}
.marker-cluster{background:none}
.marker-cluster div{width:40px;height:40px;margin:0;border-radius:50%;background:var(--ink);color:#fff;font-weight:800;display:grid;place-items:center;border:3px solid #fff;box-shadow:0 1px 0 rgba(0,0,0,.15)}
.marker-cluster span{line-height:1}
.leaflet-tooltip{font-family:inherit;font-size:.85rem;border-radius:8px}

/* mobile: map on top, sheet under it */
@media (max-width:860px){
  .layout{grid-template-columns:1fr;grid-template-rows:52vh auto}
  .sheet{border-left:0;border-top:var(--stroke) solid var(--line);border-radius:var(--r-lg) var(--r-lg) 0 0;margin-top:-22px;position:relative;z-index:600;padding:12px 18px 40px;overflow:visible}
  .grip{display:block;width:44px;height:5px;border-radius:3px;background:var(--line);margin:0 auto 14px}
  .bar .btn-go span,.bar .btn-go{font-size:.95rem;padding:0 14px}
  .chips{bottom:34px}
  body{display:block}
  .layout{display:grid}
}
@media (max-width:420px){ .bar .btn-go{display:none} }
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* admin helpers */
.muted{color:var(--ink-2);font-size:.9rem}
/* calmer basemap so the tree dots stand out */
.basemap{filter:saturate(.45) brightness(1.04)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .basemap{filter:saturate(.3) brightness(.75) contrast(1.1)}}

/* tree pins */
.tree-pin{background:none;border:0}
.tree-pin svg{width:36px;height:40px;display:block;transform-origin:50% 92%;transition:transform .15s ease}
.leaflet-marker-icon.tree-pin:hover svg,.leaflet-marker-icon.tree-pin:focus svg{transform:scale(1.25)}

/* tree card popup */
.tree-card .leaflet-popup-content-wrapper{padding:0;border-radius:22px;overflow:hidden;box-shadow:0 10px 30px rgba(15,61,46,.25)}
.tree-card .leaflet-popup-content{margin:0;width:280px!important;font-size:1rem;line-height:1.4}
.tree-card .leaflet-popup-tip{box-shadow:none}
.tree-card a.leaflet-popup-close-button{width:36px;height:36px;top:8px;right:8px;border-radius:50%;background:rgba(255,255,255,.9);color:var(--ink);font:700 22px/34px Commissioner,sans-serif;text-align:center;z-index:2}
.card-photo{display:block;width:100%;height:170px;border:0;padding:0;margin:0;cursor:zoom-in;background:var(--paper)}
.card-photo img{width:100%;height:100%;object-fit:cover;display:block}
.ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;cursor:default;color:var(--ink-2);font-size:.85rem}
.ph .art{width:72px;height:72px}
.ph-healthy{background:#e3f4e8}.ph-check{background:#fff5d1}.ph-cut{background:#fde4e4}.ph-stump{background:#eceef0}
.card-body{padding:14px 16px 16px;color:var(--ink);background:var(--card)}
.card-title{display:flex;align-items:center;justify-content:space-between;gap:8px}
.card-title h3{margin:0;font-size:1.25rem;font-weight:800;letter-spacing:-.01em}
.card-title .pill{margin:0;white-space:nowrap}
.card-meta{margin:6px 0 12px;color:var(--ink-2);font-size:.88rem}
.card-actions{display:grid;grid-template-columns:1fr 1.2fr;gap:8px}
.card-actions .btn{min-height:46px;padding:0 12px;font-size:.95rem}

/* photos in the history */
.tl-photo{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;margin-top:8px}
.tl-photo img{margin:0}
.hero-photo{margin:4px 0 14px}
.hero-photo img{width:100%;height:230px;object-fit:cover;border-radius:var(--r-lg);border:0}

/* full-screen photo */
.lightbox{position:fixed;inset:0;z-index:2000;background:rgba(8,26,19,.92);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;gap:12px}
.lightbox img{max-width:100%;max-height:80vh;border-radius:var(--r);object-fit:contain}
.lightbox p{color:#fff;margin:0;font-weight:600}
.lb-close{position:absolute;top:16px;right:16px;background:#fff;color:var(--ink)}
@media (prefers-reduced-motion:reduce){.tree-pin svg{transition:none}}

/* lost trees: bigger, always on top, a soft pulse for fresh cuts */
.tree-pin.lost{z-index:1000}
.tree-pin.lost svg{width:48px;height:52px;position:relative}
.tree-pin .halo{position:absolute;left:4px;top:2px;width:40px;height:40px;border-radius:50%;background:var(--cut);opacity:.45;animation:halo 1.8s ease-out infinite}
@keyframes halo{0%{transform:scale(1);opacity:.45}100%{transform:scale(2.1);opacity:0}}
@media (prefers-reduced-motion:reduce){.tree-pin .halo{animation:none;opacity:.25;transform:scale(1.5)}}
.count div:last-child strong{color:var(--cut)}
.chip[data-f="cut"]{border-color:var(--cut)}
.chip[data-f="cut"].on{background:var(--cut);border-color:var(--cut);color:#fff}

/* data source badges */
.src{display:inline-block;padding:2px 10px;border-radius:999px;font-size:.78rem;font-weight:700;border:2px solid;white-space:nowrap;vertical-align:1px}
.src-mun{color:#1d4ed8;border-color:#1d4ed8}
.src-team{color:var(--ink);border-color:var(--ink)}
.src-web{color:#0f7a43;border-color:#23a55a}
.src-demo{color:#9a5b00;border-color:#f2b705;background:#fff8dc}
.card-src{margin:-6px 0 12px;font-size:.85rem;color:var(--ink-2)}
.gmaps{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:10px;font-weight:700;color:var(--ink)!important;text-decoration:underline;text-underline-offset:3px;font-size:.92rem;min-height:40px}
.gmaps .ico{width:20px;height:20px}
.gm-btn{margin:0 0 10px}
.legend{margin:18px 0 0;padding:14px 16px;border:var(--stroke) solid var(--line);border-radius:var(--r)}
.legend-title{margin:0 0 8px;font-weight:800}
.legend ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:.88rem;color:var(--ink-2)}
.legend .src{margin-right:6px}
.gm-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 6px}
.gm-row .btn{padding:0 12px}
.sv-hint{margin:0 0 12px}
.gm-links{display:flex;justify-content:center;gap:18px}
.step label{display:block;font-weight:600;margin:12px 0 6px}
.timeline li.sv::before{border-color:#1a73e8;background:#e8f0fe}
.sv-link{margin-top:8px;min-height:44px;font-size:.95rem}