:root{
  --ink:#1f2b25; --soft:#55635b; --paper:#f7f9f4; --line:#cdd6cb; --accent:#24533f;
  --water:#2f7fd1; --water-deep:#1a5fa0; --calc:#5ec8f2;
  --sans: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0;height:100%;font-family:var(--sans);color:var(--ink);background:#dfe5dc}
#map{position:absolute;inset:0}
button{font:inherit;cursor:pointer}
:focus-visible{outline:3px solid #f2b705;outline-offset:2px}

.bar{position:absolute;left:12px;right:12px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;pointer-events:none;z-index:5}
.bar > *{pointer-events:auto}
.bar.top{top:calc(10px + env(safe-area-inset-top,0px));z-index:10}   /* above panels, so the menu opens over them */
.bar.bottom{bottom:calc(14px + env(safe-area-inset-bottom,0px));justify-content:center}
.brand{border:none;font:inherit;color:inherit;cursor:pointer;text-align:left;background:var(--paper);border-radius:999px;padding:7px 14px;display:flex;gap:8px;align-items:center;box-shadow:0 1px 4px rgba(0,0,0,.25);font-size:15px}
.brand .lens{font-size:12px;font-weight:600;color:#fff;background:var(--accent);border-radius:999px;padding:2px 8px}
.projname{background:var(--paper);border:1px solid transparent;border-radius:999px;padding:7px 12px;font:inherit;font-size:14px;width:180px;box-shadow:0 1px 4px rgba(0,0,0,.25)}
.tools{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}
.chip{background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:7px 13px;font-size:14px;box-shadow:0 1px 4px rgba(0,0,0,.2)}
.chip:hover{background:#fff}
.chip[aria-pressed="false"]{color:var(--soft)}
.count{display:inline-block;min-width:20px;padding:0 6px;margin-left:4px;border-radius:999px;background:var(--accent);color:#fff;font-size:12px;text-align:center}
.primary{background:var(--accent);color:#fff;border:none;border-radius:999px;padding:10px 18px;font-size:15px;font-weight:600;box-shadow:0 1px 5px rgba(0,0,0,.3)}
.primary:hover{filter:brightness(1.1)}
.primary:disabled{opacity:.6;cursor:wait}

.menuwrap{position:relative}
.menu{position:absolute;bottom:46px;left:0;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:6px;min-width:230px;box-shadow:0 4px 14px rgba(0,0,0,.25);display:flex;flex-direction:column}
.menu button{display:flex;gap:10px;align-items:center;text-align:left;background:none;border:none;border-radius:8px;padding:8px 10px;font-size:14px;color:var(--ink)}
.menu button:hover,.menu button:focus-visible{background:#e9efe5}
.menu .sw{width:14px;height:14px;border-radius:4px;flex:none}
.menu small{display:block;color:var(--soft);font-size:12px}

.drawhint{position:absolute;top:var(--top,64px);left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;border-radius:12px;padding:8px 10px 8px 14px;display:flex;gap:8px;align-items:center;z-index:6;font-size:14px;max-width:calc(100% - 24px)}
.drawhint .chip{box-shadow:none;padding:5px 11px}
.notice{position:absolute;top:var(--top,64px);left:50%;transform:translateX(-50%);background:#fff7e0;color:var(--ink);border:1px solid #e8c868;border-radius:12px;padding:9px 10px 9px 14px;display:flex;gap:8px;align-items:center;z-index:6;font-size:14px;width:max-content;max-width:min(640px,calc(100% - 24px));box-shadow:0 2px 8px rgba(0,0,0,.25)}
.notice .chip{box-shadow:none;padding:5px 11px;flex:none}

.here{position:absolute;left:12px;bottom:100px;background:rgba(247,249,244,.96);border-radius:10px;padding:8px 12px;font-size:13px;box-shadow:0 1px 4px rgba(0,0,0,.25);z-index:4;max-width:300px}
.here b{font-weight:600}
.status{position:absolute;left:50%;transform:translateX(-50%);bottom:110px;background:var(--ink);color:#fff;border-radius:999px;padding:6px 14px;font-size:13px;z-index:6;opacity:0;transition:opacity .2s;pointer-events:none}
.status.show{opacity:1}

.panel{position:absolute;right:12px;top:var(--top,64px);bottom:76px;width:380px;max-width:calc(100% - 24px);background:var(--paper);border-radius:14px;box-shadow:0 4px 18px rgba(0,0,0,.3);overflow:auto;z-index:7;padding:18px 18px 20px}
.panel h2{font-size:19px;margin:0 28px 6px 0;line-height:1.25}
.panel h3{font-size:14px;margin:16px 0 6px}
.panel p{margin:0 0 10px;font-size:14.5px;line-height:1.5}
.panel ul{margin:0 0 10px;padding-left:18px;font-size:14px;line-height:1.5}
.panel .close{position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:50%;border:none;background:#e6ece2;font-size:20px;line-height:1}
.tag{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;border-radius:4px;padding:2px 7px;margin:0 6px 6px 0}
.tag.calc{background:#dff3fb;color:#11607f}
.tag.data{background:#e7ece4;color:#3c4b42}
.tag.site{background:#e0f2e3;color:#1f6b33}
.tag.idea{background:#f6ead8;color:#7a4b10}
.tag.care{background:#fbe3e1;color:#8a2a22}
.choices{display:flex;flex-direction:column;gap:6px;margin:8px 0 12px}
.choices button{text-align:left;background:#fff;border:1px solid var(--line);border-radius:10px;padding:9px 12px;font-size:14px}
.choices button:hover{border-color:var(--accent)}
.choices button[aria-pressed="true"]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);background:#eef5ee}
.reply{background:#eef3ea;border-radius:10px;padding:10px 12px;font-size:14px;margin:0 0 12px;line-height:1.5}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.actions button{background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 13px;font-size:13.5px}
.actions button.danger{color:#a02a1f;border-color:#e3b9b4}
.field{display:flex;flex-direction:column;gap:4px;margin:0 0 10px;font-size:13px;color:var(--soft)}
.field input,.field textarea,.field select{font:inherit;font-size:14px;color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:7px 9px;background:#fff}
.field textarea{min-height:64px;resize:vertical}
.fine{font-size:12.5px;color:var(--soft);line-height:1.45}
.calcbox{border-left:3px solid var(--calc);padding-left:10px;margin:0 0 12px}

.cklist{list-style:none;padding:0;margin:8px 0}
.cklist li{display:flex;gap:8px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px}
.cklist li input{margin-top:3px}
.cklist li .del{margin-left:auto;background:none;border:none;color:var(--soft);font-size:16px}
.cklist li.done span{text-decoration:line-through;color:var(--soft)}
.addrow{display:flex;gap:6px}
.addrow input{flex:1;font:inherit;font-size:14px;border:1px solid var(--line);border-radius:8px;padding:7px 9px}

.layerrow{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px}
.vegbox{margin:12px 0;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fff}
.vegbox p{margin:6px 0}
.recbox .recsrc{border-top:1px solid var(--line);margin-top:8px;padding-top:6px}
.recbox ul{margin:4px 0 6px;padding-left:18px}
.recbox li{margin:3px 0}
.startover{margin-top:16px;padding-top:10px;border-top:1px solid var(--line)}
.startover button{background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:13px;color:var(--soft)}
.layerrow small{display:block;color:var(--soft);font-size:12.5px}

.onboard{position:absolute;inset:0;background:rgba(20,30,25,.45);display:flex;align-items:center;justify-content:center;z-index:20;padding:16px}
.onboard-card{background:var(--paper);border-radius:16px;max-width:520px;padding:24px 26px;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.onboard-card h1{font-size:22px;margin:0 0 12px;line-height:1.25}
.onboard-card ol{padding-left:20px;margin:0 0 12px;line-height:1.55;font-size:15px}
.onboard-card li{margin-bottom:6px}

.maplibregl-ctrl-attrib{font-size:11px}
.maplibregl-ctrl-scale{pointer-events:none}   /* the scale only shows; a tap on it reaches the map (Oct 26, phone: it swallowed outline corners) */
.maplibregl-ctrl-top-right{top:calc(var(--top,64px) - 10px)}
.maplibregl-ctrl-bottom-right,.maplibregl-ctrl-bottom-left{bottom:60px}
@media (max-width:700px){
  .panel{top:auto;left:8px;right:8px;width:auto;bottom:118px;max-height:52%}
  .projname{width:130px}
  .here{bottom:auto;top:var(--top,100px);right:8px;left:8px;max-width:none}
  .maplibregl-ctrl-top-right{display:none}
  .bar{left:8px;right:8px;gap:6px}
  .chip{padding:6px 10px;font-size:13px}
  .primary{padding:9px 14px;font-size:14px}
  .brand{padding:6px 11px;font-size:14px}
  .tools{margin-left:0}
  .wide{display:none}
  .notice{top:var(--top,100px);flex-wrap:wrap}
  .maplibregl-ctrl-bottom-right,.maplibregl-ctrl-bottom-left{bottom:110px}
  .status{bottom:120px}
}

/* map key, observation details */
.swatches{display:flex;gap:6px;flex-wrap:wrap}
.swatch{width:28px;height:28px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--line)}
.swatch[aria-pressed="true"]{box-shadow:0 0 0 3px var(--ink)}
.keylist{list-style:none;padding:0;margin:6px 0}
.keylist li{display:flex;gap:8px;align-items:center;padding:6px 0;border-bottom:1px solid var(--line);font-size:14px}
.keylist .sw{width:14px;height:14px;border-radius:4px;flex:none}
.keylist .chip{margin-left:auto}
.chip.mini{padding:3px 10px;font-size:12.5px;box-shadow:none}
.menu .makeown{border-top:1px solid var(--line);margin-top:4px;padding-top:10px}
.menu .sw.plus{background:none;border:1.5px dashed var(--soft);color:var(--soft);font-size:12px;line-height:11px;text-align:center}
.row2{display:flex;gap:10px}.row2 .field{flex:1;min-width:0}
.photos{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.ph{position:relative}.ph img{width:84px;height:84px;object-fit:cover;border-radius:8px;display:block}
.phdel{position:absolute;top:-6px;right:-6px;width:22px;height:22px;border-radius:50%;border:none;background:var(--ink);color:#fff;font-size:14px;line-height:1}
.phadd{display:inline-flex;align-items:center;justify-content:center;width:84px;height:84px;border:1.5px dashed var(--line);border-radius:8px;font-size:13px;color:var(--soft);cursor:pointer;text-align:center}
.photochoice{margin:2px 0 8px 26px}
.photochoice label{display:block;font-size:14px;padding:4px 0}
.photochoice small{display:block;color:var(--soft);font-size:12.5px;margin-left:22px}
.thenlist{margin-left:0}
.thenlist label{display:flex;gap:8px;align-items:flex-start}
.thenlist label input{margin-top:3px;flex:none}
.thenlist small{margin-left:0}
.thenlist b{font-weight:600}

/* printable report: only exists while printing */
.report{display:none}
@media print{
  @page{margin:14mm}
  body{background:#fff;height:auto}
  body > *:not(.report){display:none !important}
  .report{display:block;font-family:var(--sans);color:#111;font-size:11pt;line-height:1.4}
  .report h1{font-size:20pt;margin:0 0 2pt}
  .report h2{font-size:13pt;margin:16pt 0 6pt;border-bottom:1px solid #999;padding-bottom:2pt;break-after:avoid}
  .report header p{margin:0 0 4pt;color:#444}
  .report .rWarn{border:1px solid #b45309;color:#7a3a07;padding:5pt 8pt;border-radius:4pt;margin-top:6pt}
  .report .rMap{width:100%;max-height:150mm;object-fit:contain;margin:8pt 0;border:1px solid #999}
  .report .rKey{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:4pt 16pt}
  .report .rKey span{display:inline-block;width:10pt;height:10pt;border-radius:2pt;margin-right:5pt;vertical-align:-1pt;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .report .rItem{display:flex;gap:10pt;padding:6pt 0;border-bottom:1px solid #ddd;break-inside:avoid}
  .report .rNum{flex:none;width:20pt;height:20pt;border-radius:50%;border:2.5px solid;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:10pt}
  .report .rKind,.report .rMeta{color:#555;font-size:9.5pt}
  .report .rItem p{margin:3pt 0}
  .report .rCalc{color:#11607f}
  .report .rPhotos{display:flex;gap:6pt;margin-top:4pt}
  .report .rPhotos img{width:42mm;height:32mm;object-fit:cover;border-radius:3pt}
  .report .rFoot{margin-top:14pt;color:#555;font-size:9pt}
}

/* round 4: finishing cards, saving, onboarding */
.panelfoot{position:sticky;bottom:-20px;margin:16px -18px -20px;padding:12px 18px;background:var(--paper);border-top:1px solid var(--line);display:flex;gap:10px;align-items:center;justify-content:space-between}
.primary.small{padding:8px 16px;font-size:14px}
.formactions{margin-top:12px}
.savechip{position:relative}
.savechip.dirty{border-color:#e0a020}
.savedot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#e0a020;margin-left:6px;vertical-align:1px}
.onboard-card{position:relative}
.onboard-card .close{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;border:none;background:#e6ece2;font-size:20px;line-height:1}
.onboard-card h1{margin-right:36px}
/* the same card is the first-time welcome or "About New Eyes" */
.onboard[data-mode="about"] .welcome-only,.onboard:not([data-mode="about"]) .about-only{display:none}
.obactions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* drawing coach */
.drawhint{flex-direction:column;align-items:stretch;gap:6px;padding:12px 14px;width:min(420px,calc(100% - 24px));max-width:none;background:rgba(31,43,37,.96)}
.drawhead{display:flex;align-items:center;gap:8px;font-size:15px}
.drawhead .sw{width:14px;height:14px;border-radius:4px;flex:none;border:1.5px solid #fff}
.tipsbtn{margin-left:auto;width:28px;height:28px;border-radius:50%;border:none;background:rgba(255,255,255,.15);color:#fff;font-size:16px;line-height:1}
.drawstep{margin:0;font-size:15px;line-height:1.4}
.drawmeasure{margin:0;font-size:13px;color:#bfe6f5}
.drawbtns{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;margin-top:2px}
.drawbtns .chip{box-shadow:none;padding:6px 12px}
.drawbtns .chip:disabled{opacity:.5;cursor:default}
.drawkeys{margin:0;font-size:12px;color:#c7d1cb}
.undobar{position:absolute;left:50%;transform:translateX(-50%);bottom:110px;background:var(--ink);color:#fff;border-radius:999px;padding:6px 6px 6px 16px;display:flex;gap:10px;align-items:center;z-index:8;font-size:14px}
.undobar .chip{box-shadow:none;padding:5px 12px}
@media (max-width:700px){.drawkeys{display:none}.undobar{bottom:120px}}

.aitext{width:100%;min-height:220px;font:12.5px/1.45 ui-monospace,Consolas,monospace;border:1px solid var(--line);border-radius:8px;padding:8px;background:#fff;color:var(--ink);resize:vertical}

.menu{max-height:min(62vh,560px);overflow:auto}
.menusec{font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--soft);padding:10px 10px 4px}
.menusec:first-child{padding-top:4px}

/* design partner */
.panel.widepanel{width:460px}
.aihead{display:flex;align-items:center;gap:10px;margin-right:34px}.aihead h2{margin:0}
.aihead .chip{margin-left:auto}.aihead .chip+.chip{margin-left:0}
.chatlog{display:flex;flex-direction:column;gap:10px;margin:10px 0;max-height:none}
.msg{border-radius:12px;padding:9px 12px;font-size:14.5px;line-height:1.5}
.msg p{margin:0 0 8px;font-size:14.5px}.msg p:last-child{margin-bottom:0}
.msg ul{margin:0 0 8px;padding-left:20px}
.msg.me{align-self:flex-end;background:var(--accent);color:#fff;max-width:88%}
.msg.ai{align-self:stretch;background:#fff;border:1px solid var(--line)}
.msg.ai.err{border-color:#e3b9b4;background:#fdf1ef}
.msg.thinking{color:var(--soft);font-style:italic}
/* the Companion at work: moving dots, a stage line that follows the real steps, a soft pulse; then the reply lands with a brief glow */
.msg.thinking{display:flex;align-items:center;gap:8px;flex-wrap:wrap;animation:ne-breathe 2.4s ease-in-out infinite}
.msg.thinking .stagetext{font-style:normal;color:var(--ink,inherit);font-weight:600}
.msg.thinking .stagetime{color:var(--soft);font-style:normal}
.dots{display:inline-flex;gap:4px}
.dots i{width:7px;height:7px;border-radius:50%;background:var(--accent,#2f6b3a);opacity:.25;animation:ne-dot 1.2s infinite ease-in-out}
.dots i:nth-child(2){animation-delay:.2s}.dots i:nth-child(3){animation-delay:.4s}
@keyframes ne-dot{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
@keyframes ne-breathe{0%,100%{opacity:1}50%{opacity:.72}}
body.ai-working #panel{box-shadow:0 0 0 2px rgba(47,107,58,.25),0 6px 24px rgba(0,0,0,.18);animation:ne-panelpulse 2.4s ease-in-out infinite}
@keyframes ne-panelpulse{0%,100%{box-shadow:0 0 0 2px rgba(47,107,58,.18),0 6px 24px rgba(0,0,0,.18)}50%{box-shadow:0 0 0 3px rgba(47,107,58,.45),0 6px 24px rgba(0,0,0,.18)}}
#btnAI.busy{position:relative}
#btnAI.busy::after{content:'';position:absolute;top:4px;right:4px;width:8px;height:8px;border-radius:50%;background:#e0a526;animation:ne-dot 1.2s infinite}
#btnFuture.working{cursor:progress;opacity:1;background-image:linear-gradient(90deg,transparent 0,rgba(255,255,255,.35) 50%,transparent 100%);background-size:200% 100%;animation:ne-shimmer 1.6s linear infinite}
@keyframes ne-shimmer{0%{background-position:150% 0}100%{background-position:-50% 0}}
.msg.ai.fresh{animation:ne-landed 4s ease-out 1;outline:2px solid rgba(224,165,38,.0)}
@keyframes ne-landed{0%{background-color:rgba(255,213,74,.45);outline-color:rgba(224,165,38,.9)}100%{outline-color:rgba(224,165,38,0)}}
@media (prefers-reduced-motion:reduce){.msg.thinking,.dots i,body.ai-working #panel,#btnAI.busy::after,#btnFuture.working,.msg.ai.fresh{animation:none}}
.starters{display:flex;flex-direction:column;gap:6px;margin:6px 0 10px}
.starters button{text-align:left;background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 12px;font-size:14px}
.starters button:hover{border-color:var(--accent)}
.chatbox{display:flex;gap:8px;align-items:flex-end;position:sticky;bottom:-20px;background:var(--paper);padding:8px 0}
.chatbox textarea{flex:1;font:inherit;font-size:14.5px;border:1px solid var(--line);border-radius:10px;padding:8px 10px;resize:vertical;min-height:44px}
.sugcard{border:1.5px dashed #b07cc6;border-radius:10px;padding:8px 10px;margin-top:8px;background:#fbf7fd}
.sughead{display:flex;gap:8px;align-items:center}.sughead .sw{width:12px;height:12px;border-radius:3px;flex:none}
.sugcard p{margin:4px 0}
.tag.aisug{background:#f1e6f7;color:#6c3483}
.aisees summary{cursor:pointer;font-size:13.5px;color:var(--soft);margin-top:6px}
@media (max-width:700px){.panel.widepanel{width:auto}}
.actions button.primary,.drawbtns button.primary{background:var(--accent);color:#fff;border:none;font-weight:600}
.actions button.primary:hover{filter:brightness(1.1)}

.codebox{margin:6px 0}
.codebox input{font:inherit;font-size:14px}

/* getting to know the land */
.bigopts{display:flex;flex-direction:column;gap:8px;margin:10px 0}
.bigopt{text-align:left;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:15px;position:relative}
.bigopt:hover{border-color:var(--accent)}
.bigopt small{display:block;color:var(--soft);font-size:13px;margin-top:3px;line-height:1.4}
.bigopt .done{position:absolute;top:10px;right:12px;font-size:12px;color:#1f6b33;font-weight:600}
.placechips{display:flex;flex-wrap:wrap;gap:6px}
.placechip{background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:14px}
.placechip.on{background:#eef5ee;border-color:var(--accent);color:var(--accent)}
.placelabel{background:rgba(31,43,37,.85);color:#fff;font:600 12px var(--sans);padding:2px 7px;border-radius:6px;white-space:nowrap;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.landbar{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 2px}
.askcard{border:1.5px solid #9fc7e8;background:#f2f8fd;border-radius:10px;padding:8px 10px;margin-top:8px}
.askcard p{margin:4px 0}
.factlist{list-style:none;padding:0;margin:8px 0}
.factlist li{display:flex;gap:6px;align-items:flex-start;margin-bottom:6px}
.factlist textarea{flex:1;font:inherit;font-size:14px;border:1px solid var(--line);border-radius:8px;padding:6px 8px;resize:vertical}
.factlist .del{background:none;border:none;font-size:18px;color:var(--soft)}

/* while drawing, labels and number badges don't swallow clicks meant for the map */
body.drawing .maplibregl-marker{pointer-events:none}

/* privacy: what the AI gets, data page, delete */
.sharesum{margin:4px 0 2px}
.heldnote{background:#fff7e6;border:1px solid #f0d9a8;border-radius:8px;padding:6px 8px}
.sendlist{margin:4px 0 8px;padding-left:18px}.sendlist li{margin:2px 0}
.previewpic{display:block;max-width:100%;border:1px solid var(--line);border-radius:8px;margin:6px 0}
.actions button.danger.armed{background:#a02a1f;color:#fff;border-color:#a02a1f}
.bigopt.on{border-color:var(--accent);background:#eef5ee}
.msg.held{opacity:.62}
.histtag{display:block;width:max-content;max-width:100%;margin-top:4px;font-size:11px;font-weight:600;border-radius:6px;padding:1px 6px}
.histtag.sent{color:#1f5b33;background:#e3f1e6}
.histtag.held{color:#7a5a12;background:#fff3d6}
.nextline{background:#f4f7f4;border:1px solid var(--line);border-radius:8px;padding:6px 8px;margin:6px 0}
.nextline p{margin:0 0 4px}
.histswitch{display:flex;gap:6px;align-items:center}
.sharenote{color:#7a5a12}
.factbody{flex:1;display:flex;flex-direction:column;gap:3px}
.factpriv{font-size:12px;color:var(--soft);display:flex;gap:5px;align-items:center}
.factlist li.private textarea{background:#f6f3ea;border-style:dashed}
.phonenote{display:none;background:#fff7e6;border:1px solid #f0d9a8;border-radius:8px;padding:8px 10px;font-size:14px}
@media (max-width: 700px), (pointer: coarse) { .phonenote{display:block} }
.previewbadge{font-size:11px;font-weight:700;color:#7a3e00;background:#ffe2b8;border-radius:999px;padding:2px 7px}
.presets .can{display:block;margin-top:6px;font-size:13px;line-height:1.4;color:var(--ink)}
.presets .can b{font-weight:600}
.pickhelp{background:#f4f7f4;border:1px solid var(--line);border-radius:10px;padding:8px 10px;margin:8px 0}
.pickhelp p{margin:4px 0}
.plainanswer{background:#eef5ee;border:1px solid #b9d6bf;border-radius:10px;padding:8px 12px;margin:6px 0 12px}
.plainanswer h3{margin:4px 0 6px}
.plainanswer ul{margin:0;padding-left:18px}
.plainanswer li{margin:6px 0;font-size:14px;line-height:1.45}
.whoans{margin-top:6px;font-size:12px;color:var(--soft)}
.whoans summary{cursor:pointer}
.whoans dl{display:grid;grid-template-columns:max-content 1fr;gap:2px 10px;margin:4px 0 0}
.whoans dt{font-weight:600;color:var(--ink)}
.whoans dd{margin:0}
.placemem{border-top:1px solid var(--line);margin-top:10px;padding-top:4px}
.placemem .factlist textarea{min-height:34px}
.quickqs{background:#f4f7f4;border:1px solid var(--line);border-radius:10px;padding:6px 10px;margin-top:8px}
.quickq{margin:6px 0}
.quickq b{display:block;font-size:14px;margin-bottom:4px}
.qopts{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.qopts .qtext{flex:1;min-width:140px;font:inherit;font-size:14px;border:1px solid var(--line);border-radius:8px;padding:5px 8px}
.chip.ghost{background:transparent;border-color:transparent;color:var(--soft)}
.factabout{font-size:12px;color:var(--soft)}

/* ---- four ways of working (My Place, Understand, Design, Grow & Evolve) around the same map ---- */
.areas{display:flex;gap:3px;background:var(--paper);border-radius:999px;padding:4px;box-shadow:0 1px 5px rgba(0,0,0,.25);margin:0 auto}
.area{border:none;background:transparent;border-radius:999px;padding:5px 14px;display:flex;flex-direction:column;align-items:center;line-height:1.15;color:var(--ink);min-width:118px;font:inherit;cursor:pointer}
.area b{font-size:14px}
.area small{font-size:11px;color:var(--soft)}
.area:hover{background:#e9efe5}
.area[aria-pressed="true"]{background:var(--accent);color:#fff}
.area[aria-pressed="true"] small{color:#d6e6dc}
.topright{display:flex;gap:6px;align-items:center}
.companion{font-weight:600}
.companion.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.mainmenu{top:44px;bottom:auto;left:auto;right:0;min-width:260px;z-index:9}
.mainmenu .mgrp{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--soft);padding:8px 10px 3px}
.mainmenu button{justify-content:space-between}
.mainmenu small{display:inline;font-size:12px}
#btnMain{position:relative;min-width:40px}
#btnMain .savedot{position:absolute;top:4px;right:4px;margin:0}
.side{position:absolute;left:12px;top:var(--top,64px);display:flex;flex-direction:column;gap:6px;align-items:flex-start;z-index:5}
.topics{background:rgba(31,43,37,.72);color:#fff;border-radius:999px;padding:6px 12px;font-size:13px}
.topics .later{color:#cfdcd2}
@media (max-width:700px){
  .areas{order:9;width:100%;margin:0}
  .area{min-width:0;flex:1;padding:6px 4px}
  .area small{display:none}
  .area b{font-size:13px}
  .topright{margin-left:auto}
  .companion{padding:6px 10px}
  .topics{display:none}
}


/* ---- Design layer (design.js): possible design areas, proposals, the proposal card ---- */
.primary.future{background:linear-gradient(135deg,#24533f,#3d7a4f)}
.proplabel{display:flex;align-items:center;gap:7px;background:rgba(22,38,30,.86);color:#fff;font:12px/1.2 var(--sans);padding:4px 10px 4px 4px;border-radius:999px;box-shadow:0 2px 6px rgba(0,0,0,.35);cursor:pointer;white-space:nowrap}
.proplabel .ic{width:24px;height:24px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;flex:none}
.proplabel .tx{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.proplabel b{font-size:12.5px;font-weight:600}
.proplabel .tag{margin:0;font-size:9px;padding:0 5px;line-height:1.5}
.proplabel .tag.sug{background:#e5dcf3;color:#4a2f73}
.proplabel .tag.mine{background:#cfe8d2;color:#17552a}
.proplabel .tag.inv{background:#f7d5d0;color:#7a2219;margin-top:1px}
.proplabel .tag.rev{background:#ffe9a8;color:#6b4e00;margin-top:1px}
.proplabel.newrev{box-shadow:0 0 0 2px #f2b705,0 2px 6px rgba(0,0,0,.35)}
.oalabel{background:rgba(31,43,37,.82);color:#fff;font:600 12px var(--sans);padding:3px 8px;border-radius:999px;white-space:nowrap;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.oalabel span{font-weight:400;opacity:.9}
.legend{position:absolute;left:12px;bottom:76px;z-index:6;background:rgba(247,249,244,.96);border-radius:12px;padding:10px 12px;box-shadow:0 2px 10px rgba(0,0,0,.25);font-size:12.5px;max-width:260px}
.legend b{display:block;margin-bottom:6px;font-size:13px}
.legend .lgrow{display:flex;align-items:center;gap:7px;margin:4px 0}
.legend .lgsw{width:26px;height:16px;border-radius:4px;flex:none;background-size:12px 12px;border:1px solid rgba(0,0,0,.15)}
.legend .lgsw.dashed{border:2px dashed #6b7a70;background:none}
.legend .lgsw.solid{border:2.5px solid #24533f;background:none}
.legend .fine{margin:6px 0 0;font-size:11.5px;color:var(--soft)}
.kindtag{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;border-radius:4px;padding:1px 6px;margin-right:4px;background:#e7ece4;color:#3c4b42}
.kindtag.k-modeled{background:#dff3fb;color:#11607f}
.kindtag.k-reported{background:#e0f2e3;color:#1f6b33}
.kindtag.k-assumed{background:#f6ead8;color:#7a4b10}
.kindtag.k-experimental{background:#efe7f7;color:#5b3a86}
.kindtag.k-mapped,.kindtag.k-measured{background:#e8eaf6;color:#303f9f}
.evlist{list-style:none;padding-left:0}
.evlist li{margin:0 0 7px}
.invbox{background:#fdf0ee;border:1px solid #efc9c3;border-radius:10px;padding:9px 11px;margin:10px 0;font-size:13.5px}
.invbox p{font-size:13.5px;margin:6px 0}
.invbox select,.invbox textarea{width:100%;margin-top:4px;font:inherit}
.revbox{background:#fff7dc;border:1px solid #f0d98a;border-radius:10px;padding:9px 11px;margin:8px 0;font-size:13.5px}
.revbox select{font:inherit;margin-top:4px}
.obsnote{background:#eef5ec;border-radius:10px;padding:9px 11px;margin-top:12px;font-size:13.5px}
.tabs{display:flex;flex-wrap:wrap;gap:0 2px;border-bottom:1px solid var(--line);margin:10px 0 10px}
.tabs button{border:none;background:none;padding:7px 9px;font:inherit;font-size:13.5px;color:var(--soft);border-bottom:2.5px solid transparent;cursor:pointer}
.tabs button[aria-selected=true]{color:var(--ink);font-weight:600;border-bottom-color:var(--accent)}
.chipfn{display:inline-block;background:#eef3ea;border-radius:999px;padding:2px 9px;margin:0 3px 4px 0;font-size:12.5px}
.dec{font-weight:600}
.dec.d-accepted-concept{color:#1f6b33}.dec.d-proposed{color:#5b3a86}.dec.d-superseded,.dec.d-rejected{color:#6b6b6b}
.aslist{list-style:none;padding-left:0}
.asrow{border:1px solid var(--line);border-radius:10px;padding:8px 10px;margin-bottom:8px;font-size:13.5px}
.asrow small{display:block;color:var(--soft);margin-top:3px}
.astatus{font-size:11px;font-weight:700;border-radius:4px;padding:1px 6px;background:#eceff1;color:#455a64;margin-left:4px}
.astatus.s-contradicted{background:#fbe3e1;color:#8a2a22}.astatus.s-holds{background:#e0f2e3;color:#1f6b33}
.asbtns{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.asbtns button{background:#fff;border:1px solid var(--line);border-radius:999px;padding:4px 10px;font-size:12.5px;cursor:pointer}
.asbtns button.wrong{border-color:#e3b9b4;color:#8a2a22;font-weight:600}
.asform textarea{width:100%;font:inherit;margin-top:4px}
.asform .saved{color:#1f6b33;font-size:13px;margin:6px 0}
.corro{background:#eef7fb;border-radius:8px;padding:7px 9px;margin:6px 0;font-size:13px}
.compare .cmp{border-radius:10px;padding:9px 11px;margin:8px 0;display:flex;flex-direction:column;gap:2px}
.compare .cmp small{color:var(--soft);font-size:12px}
.compare .cmp.old{background:#f1f1f1;border:1px dashed #b0b0b0}
.compare .cmp.old b{color:#555}
.compare .cmp.new{background:#eef6ec;border:1.5px solid #6aa84f}
.idealist{list-style:none;padding-left:0}
.idealist button{width:100%;text-align:left;background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 10px;margin-bottom:6px;font:inherit;cursor:pointer}
.idealist small{display:block;color:var(--soft);font-size:12px}
@media print{.legend,.proplabel,.oalabel{display:none}}
.proplabel.oldlabel{background:rgba(90,90,90,.82)}
.proplabel.oldlabel .tag{background:#e0e0e0;color:#444}

/* Botanica (botanica.js): a compact plant reference in the side panel */
.bofilters{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.bofilters .chip[aria-pressed="true"]{background:var(--accent);color:#fff;border-color:var(--accent)}
.borow{display:flex;flex-wrap:wrap;gap:12px;align-items:center;font-size:14px;margin:6px 0 8px}
.borow select{font:inherit;padding:4px 6px;border-radius:8px;border:1px solid var(--line);background:#fff;max-width:230px}
.panel .bolist{list-style:none;padding:0;margin:8px 0}
.boitem{border-top:1px solid var(--line);padding:8px 0}
.bohead{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.bolink{background:none;border:0;padding:0;font:inherit;color:var(--ink);text-align:left;cursor:pointer}
.bolink:hover{text-decoration:underline}
.bolink i,.boname i{color:var(--soft)}
.bostar{background:none;border:1px solid var(--line);border-radius:999px;padding:2px 9px;cursor:pointer;font-size:14px;color:#a7770e;white-space:nowrap}
.bostar[aria-pressed="true"]{background:#fff5d6;border-color:#e0b84a}
.bometa{font-size:13px;color:var(--soft);margin:2px 0}
.bobadges{display:flex;flex-wrap:wrap;gap:4px;align-items:center;margin:4px 0}
.bob{font-size:11.5px;border-radius:999px;padding:1px 8px;background:#eef1ec;color:var(--soft)}
.bob.native{background:#e3f0e4;color:#24533f}.bob.exp{background:#efe6fa;color:#5b3f8a}.bob.warn{background:#fde7e1;color:#8a2a17}.bob.tox{background:#fff1d6;color:#7a5200}
.bocmp{font-size:12px;color:var(--soft);margin-left:auto}
.bofit{font-size:12px;border-radius:6px;padding:0 6px}
.fitok{background:#e3f0e4;color:#24533f}.fitedge{background:#fff1d6;color:#7a5200}.fitno{background:#fde7e1;color:#8a2a17}.fitunk{background:#eef1ec;color:var(--soft)}
.bocompare{display:flex;gap:8px;align-items:center;background:#eef3ea;border-radius:10px;padding:6px 10px;font-size:14px}
.botable{width:100%;border-collapse:collapse;font-size:13.5px}
.botable th{text-align:left;font-weight:600;vertical-align:top;padding:5px 6px 5px 0;width:30%}
.botable td{vertical-align:top;padding:5px 4px;border-top:1px solid var(--line)}
.botable th{border-top:1px solid var(--line)}
.bostat{font-size:11px;border-radius:5px;padding:0 5px;white-space:nowrap}
.st-documented{background:#e3f0e4;color:#24533f}.st-estimated{background:#e6eef8;color:#21466e}.st-disputed{background:#fff1d6;color:#7a5200}.st-unknown{background:#eef1ec;color:var(--soft)}
.bosrc{font-size:11.5px;color:var(--soft)}
.bocautions .sev-high{color:#8a2a17}
.bonote{border-top:1px solid var(--line);padding-top:8px;margin-top:12px}
.bocmprow{margin:10px 0}
.bobar{position:relative;height:18px;background:#eef1ec;border-radius:5px;margin:2px 0 4px;font-size:12px}
.bobar span{position:absolute;top:3px;height:12px;background:#4f8a5b;border-radius:4px}
.bobar em{position:absolute;right:6px;top:1px;font-style:normal;color:var(--ink)}
.bobar.unknown{color:var(--soft);padding-left:6px;line-height:18px;font-style:italic}
.keptbox{background:#eef1ec}
.botier{font-size:11px;border-radius:5px;padding:0 6px;white-space:nowrap}
.tier-r{background:#24533f;color:#fff}.tier-t{background:#e6eef8;color:#21466e}.tier-n{background:#eef1ec;color:var(--soft)}
.botiers{line-height:1.9}
.legend .lgsw.concept{border:none;background:linear-gradient(90deg,#8e6bbf 50%,transparent 50%) 0 50%/8px 3px repeat-x}
.conceptbox{background:#f1ecf8}
.chgbox{background:#f3f6f1;border-radius:8px;padding:6px 10px;margin:8px 0;font-size:14px}

/* finding the driveway: steps and messages inside the panel (Oct 18) */
.routesteps { list-style: none; margin: 10px 0 12px; padding: 0; }
.routesteps li { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; border-bottom: 1px solid rgba(0,0,0,.06); }
.routesteps .rsi { width: 22px; height: 22px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: #e7ece8; color: #5b6b62; }
.routesteps .rs-done .rsi { background: #2e7d4f; color: #fff; }
.routesteps .rs-now .rsi { background: #1f6fd1; color: #fff; }
.routesteps .rs-fail .rsi { background: #b45309; color: #fff; }
.routesteps small { display: block; color: #5b6b62; font-weight: 400; }
.routemsg { margin: 6px 0 12px; padding: 10px 12px; border-radius: 8px; background: #eef5ff; border-left: 4px solid #1f6fd1; font-size: 15px; line-height: 1.45; }
.routemsg.warn { background: #fff6e8; border-left-color: #b45309; }
.accessread { margin: 10px 0 12px; padding: 10px 12px; border-radius: 8px; background: #f3eefa; border-left: 4px solid #8e6bbf; }
.accessread p { margin: 4px 0 6px; }
/* the evidence check on a design idea (Oct 19) */
.checkbox ul{margin:4px 0 4px 18px;padding:0}
.checkbox .quickq{margin-top:8px}
/* plants inside a planting idea (Oct 19, Part 2) */
.proplabel .tag.cond{background:#fff1c2;color:#6b4e00;margin-top:1px}
.pllist{list-style:none;padding-left:0;margin:8px 0}
.plrow{border:1px solid var(--line);border-radius:8px;padding:8px 10px;margin:0 0 8px}
.plrow.off{opacity:.65;font-size:13px}
.plrow.hl{border-color:#f2b705;box-shadow:0 0 0 2px rgba(242,183,5,.35)}
.plrow small{display:block;margin-top:4px;color:#3c4b42;line-height:1.4}
.plrow small.caution{color:#7a2219}
.plrow .tag{margin:0 0 0 4px;font-size:10px}
.plrow .tag.sug{background:#e5dcf3;color:#4a2f73}
.plrow .tag.mine{background:#cfe8d2;color:#17552a}
.plrow .tag.lt-fits{background:#e0f2e3;color:#1f6b33}
.plrow .tag.lt-conditional,.plrow .tag.lt-unknown{background:#fff1c2;color:#6b4e00}
.plrow .tag.lt-conflict{background:#f7d5d0;color:#7a2219}
.plrow .asbtns select{font-size:12.5px;margin-left:4px}
.plconf{margin-top:6px;padding:6px 8px;background:#fdf0e6;border-radius:6px;font-size:12.5px}
.linkish{background:none;border:0;color:#1f6b33;text-decoration:underline;cursor:pointer;padding:0;font:inherit}
.plantpin{width:16px;height:16px;border-radius:50%;background:#1b4d1f;border:3px solid #ffd54a;box-shadow:0 1px 4px rgba(0,0,0,.4);cursor:grab}
.lgsw.plantsw{background:radial-gradient(circle,#1b4d1f 0 22%,#7cb34288 24% 70%,transparent 72%);border:none}
.lgsw.plantsw.cond{background:radial-gradient(circle,#1b4d1f 0 22%,#f2b70588 24% 70%,transparent 72%)}
#panelBody p.warn{background:#fde7e1;color:#8a2a17;border-radius:8px;padding:8px 10px}
/* living systems: your hedgerow (systems.js, Oct 21) */
.dec.d-yours{color:#17552a}
.fnlist,.rellist,.fnmem{list-style:none;padding-left:0;margin:6px 0}
.fnrow,.relrow{border:1px solid var(--line);border-radius:8px;padding:8px 10px;margin:0 0 8px}
.fnrow small,.relrow small{display:block;margin-top:4px;color:#3c4b42;line-height:1.4}
.fnmem li{margin-top:4px;font-size:13px}
.fnrow .tag,.relrow .tag,.effbox .tag,.rellist .tag,.fnmem .tag{margin:0 0 0 4px;font-size:10px}
.tag.fn-supported,.tag.ev-ok,.tag.src-met{background:#e0f2e3;color:#1f6b33}
.tag.fn-unassigned{background:#eceff1;color:#37474f}
.tag.fn-insufficient,.tag.ev-no,.tag.src-not-met,.tag.src-concern,.tag.i-possible-shade{background:#fff1c2;color:#6b4e00}
.tag.fn-not-wanted,.tag.src-needs-info,.tag.src-info,.tag.i-unresolved{background:#eceff1;color:#55635b}
.tag.fn-single{background:#f6ead8;color:#7a4b10}
.tag.m-measured{background:#dff3fb;color:#11607f}
.tag.i-layering-consistent{background:#e0f2e3;color:#1f6b33}
.tag.intent{background:#cfe8d2;color:#17552a}
.tag.eff{background:#e7ece4;color:#3c4b42}
.effbox ul{margin:6px 0 0;padding-left:18px}
.fnmem small.plid{display:inline;color:var(--soft)}
/* your hedgerow, usability pass (Oct 21): status, functions at a glance, species groups, library, move mode */
.syscard h2{margin-bottom:2px}
.sysline{margin:0 0 8px;font-size:13px;color:var(--soft)}
.yourpill{display:inline-block;background:#cfe8d2;color:#17552a;font-weight:700;font-size:11.5px;border-radius:999px;padding:2px 9px;margin-right:4px}
.fnstrip{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 10px}
.fnchip{display:inline-flex;align-items:center;gap:5px;border-radius:999px;border:1px solid var(--line);background:#fff;padding:4px 10px 4px 6px;font:inherit;font-size:12.5px;cursor:pointer;color:var(--ink)}
.fnchip .sym{display:inline-grid;place-items:center;min-width:18px;height:18px;border-radius:999px;font-size:11px;font-weight:700;background:#eceff1;color:#55635b}
.fnchip.s-supported{border-color:#9fd0a8}.fnchip.s-supported .sym{background:#2e7d32;color:#fff}
.fnchip.s-insufficient{border-color:#ecd27a}.fnchip.s-insufficient .sym{background:#f2b705;color:#3d2c00}
.fnchip.s-unassigned{border-style:dashed;color:#55635b}
.fnchip.s-not-wanted{opacity:.6}
.pulse{animation:nePulse 1.6s ease-out 2}
@keyframes nePulse{0%{box-shadow:0 0 0 0 rgba(242,183,5,.75)}100%{box-shadow:0 0 0 10px rgba(242,183,5,0)}}
.effbox{border-radius:10px;background:#f4f7f1;border:1px solid #d6e2cf;padding:8px 10px;margin:0 0 10px;animation:neFadeIn .35s ease-out}
@keyframes neFadeIn{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
.effhead{font-size:13px;margin-bottom:5px}.effcause{color:var(--soft);font-size:12px}
.effchips{display:flex;flex-wrap:wrap;gap:5px}
.effchip{font-size:12.5px;border-radius:6px;padding:3px 8px;background:#e7ece4;color:#3c4b42}
.effchip.t-gain{background:#dcefdf;color:#17552a;font-weight:600}
.effchip.t-loss{background:#fbe8d0;color:#7a3d10;font-weight:600}
.effmore{margin-top:6px;font-size:12.5px}.effmore summary{cursor:pointer;color:var(--accent)}
.effmore ul{margin:6px 0 0;padding-left:16px}
.statusnote{background:#fbf8ef;border:1px solid #ece2c6;border-radius:10px;padding:9px 11px;margin:8px 0 12px;font-size:13.5px;line-height:1.45}
.statusnote details{margin-top:5px;font-size:12.5px}.statusnote summary{cursor:pointer;color:var(--accent)}
.statusnote ul{margin:5px 0 0;padding-left:16px}
.sytools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:4px 0 10px}
.sytools button[disabled]{opacity:.7}
.grouphead{margin:14px 0 6px;font-size:14px}
.splist{list-style:none;padding:0;margin:0}
.spgroup{border:1px solid var(--line);border-radius:10px;margin:0 0 8px;background:#fff}
.spgroup.gone{opacity:.65}
.spgroup > details > summary{list-style:none;cursor:pointer;padding:9px 11px;display:block}
.spgroup > details > summary::-webkit-details-marker{display:none}
.spgroup > details[open] > summary{border-bottom:1px solid #edf0ea}
.sphead{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.spname i{color:var(--soft);font-size:12.5px}
.spcount{font-weight:700;color:var(--accent);font-size:13px;white-space:nowrap}
.spmeta{display:flex;flex-wrap:wrap;gap:4px;align-items:center;margin-top:5px}
.fnc{font-size:11px;border-radius:999px;padding:1px 8px;background:#eef3ea;color:#33503b}
.fnc-food{background:#fdeedb;color:#7a4b10}.fnc-pollinator{background:#fbf3c9;color:#665000}.fnc-wildlife,.fnc-habitat{background:#e5eef8;color:#1f4f7a}.fnc-biomass,.fnc-soil{background:#ece4da;color:#5b4632}
.spby{font-size:11px;border-radius:999px;padding:1px 8px;font-weight:600}
.spby.sug{background:#ece6f6;color:#4a2f73}.spby.mine{background:#cfe8d2;color:#17552a}
.spwarn{font-size:11.5px;color:#8a2a22;font-weight:600}
.spots{list-style:none;margin:0;padding:6px 11px}
.spot{padding:6px 0;border-bottom:1px dashed #e3e8df;font-size:13px}
.spot:last-child{border-bottom:none}
.spot.off{color:var(--soft)}
.spot.hl{background:#fff8dc;border-radius:6px;padding-left:6px}
.spotname{font-weight:600}.spotname small{color:var(--soft);font-weight:400}
.spotbtns{display:flex;flex-wrap:wrap;gap:6px;margin-top:5px}
.spotbtns select{font:inherit;font-size:12.5px;max-width:170px}
.spotwarn{font-size:12px;color:#8a2a22;margin-top:3px}
.spotobs{font-size:12.5px;margin-top:4px;line-height:1.4}
.spotobs.spotwarn{color:#8a2a22}
.spgroup .ghost{margin:0 11px 8px;background:none;border:1px dashed #9fb8a4;border-radius:999px;color:var(--accent);padding:4px 10px;font:inherit;font-size:12.5px;cursor:pointer}
.aboutwrap{margin:0 11px 10px;font-size:12.5px}.aboutwrap > summary{cursor:pointer;color:var(--accent);font-weight:600}
.about{margin-top:6px}
.absec{margin:0 0 8px}.absec h4{margin:0 0 2px;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:#55635b}
.absec p,.absec ul{margin:0;line-height:1.45}.absec ul{padding-left:16px}
.absec .caution{color:#7a2219}.srcs{color:var(--soft)}
.laynotes{margin-top:12px;font-size:13px}.laynotes summary{cursor:pointer;color:var(--accent)}
.lib{border:1px solid #d6e2cf;background:#f7faf4;border-radius:12px;padding:10px;margin:0 0 10px}
.librow{display:flex;gap:6px}.librow input{flex:1;min-width:0;font:inherit;border:1px solid var(--line);border-radius:999px;padding:6px 12px}
.librow select{font:inherit;border:1px solid var(--line);border-radius:999px;padding:4px 8px;background:#fff}
.libfilters{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin-top:7px}
.flabel{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--soft);margin-right:2px}
.fchip{font:inherit;font-size:12px;border:1px solid var(--line);background:#fff;border-radius:999px;padding:3px 9px;cursor:pointer;color:var(--ink)}
.fchip.on{background:var(--accent);border-color:var(--accent);color:#fff}
.liblist{list-style:none;padding:0;margin:8px 0 0;max-height:300px;overflow:auto}
.libitem{display:flex;gap:8px;align-items:center;justify-content:space-between;background:#fff;border:1px solid #e3e8df;border-radius:9px;padding:7px 9px;margin-bottom:6px}
.libitem small{display:block;color:var(--soft);font-size:11.5px;margin-top:3px}
.libitem i{color:var(--soft);font-size:12px}
.libitem .primary{padding:5px 12px;font-size:13px;flex:none}
.fnrow.hl{box-shadow:0 0 0 2px rgba(242,183,5,.45)}
.movebar{position:fixed;top:72px;left:50%;transform:translateX(-50%);z-index:40;display:flex;align-items:center;gap:10px;background:#1f2b25;color:#fff;border-radius:999px;padding:8px 10px 8px 16px;box-shadow:0 4px 16px rgba(0,0,0,.35);font-size:13.5px;max-width:calc(100vw - 24px)}
.movebar .small{background:#fff;color:#1f2b25;border:none;border-radius:999px;padding:6px 12px;font:inherit;font-weight:600;cursor:pointer}
.movebar .primary.small{background:#7cb342;color:#14260f}
.mvdot{width:10px;height:10px;border-radius:50%;background:#ffd54a;box-shadow:0 0 0 0 rgba(255,213,74,.8);animation:nePulse 1.4s infinite;flex:none}
@media (max-width:600px){.movebar{top:auto;bottom:86px;border-radius:14px;flex-wrap:wrap}.libitem{flex-wrap:wrap}}
.syscard .tabs{flex-wrap:nowrap;overflow-x:auto}
.syscard .tabs [role=tab]{white-space:nowrap;font-size:13.5px;padding-left:8px;padding-right:8px}
.pill{font:inherit;font-size:13.5px;font-weight:600;border:1px solid #9fb8a4;background:#fff;color:var(--accent);border-radius:999px;padding:8px 14px;cursor:pointer}
.pill[aria-expanded="true"]{background:#eef3ea}
.spotbtns button{font:inherit;font-size:12.5px;border:1px solid var(--line);background:#fff;border-radius:999px;padding:3px 10px;cursor:pointer;color:var(--ink)}
.spotbtns button[data-act="remove"]{color:#8a2a22}
.spotbtns select{border:1px solid var(--line);border-radius:999px;padding:2px 6px;background:#fff}
/* national plants (Oct 21): evidence tiers for this land, the land box, source badges */
.tag.tier{text-transform:none;letter-spacing:0;font-weight:700;margin:0 4px 4px 0}
.tag.tier-documented{background:#dff0e0;color:#1f6b33}
.tag.tier-conditional{background:#fff1c9;color:#6b4e00}
.tag.tier-insufficient{background:#eceff1;color:#455a64}
.tag.tier-caution{background:#fbe3e1;color:#8a2a22}
.tag.srcb{text-transform:none;letter-spacing:0;font-weight:600;background:#eef2f6;color:#3d5166;margin:0 4px 4px 0}
.tag.src-researched{background:#e8f0e9;color:#24533f}
.sitebox{background:#f4f7f4;border:1px solid var(--line);border-radius:10px;padding:8px 12px;margin:10px 0}
.sitebox h3{margin:2px 0 6px;font-size:14px}
.sitebox p{margin:4px 0;font-size:13.5px}
.sitebox ul{margin:4px 0 6px;padding-left:18px}
.chip.mini.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.fxlist{list-style:none;margin:4px 0;padding:0}
.fxlist .fx{font-size:12.5px;line-height:1.45;padding:3px 0;border-bottom:1px dashed var(--line)}
.tag.fxs{text-transform:none;letter-spacing:0;font-size:11px;padding:1px 6px;margin:0 4px 0 2px}
.tag.fxs-ok{background:#dff0e0;color:#1f6b33}.tag.fxs-edge{background:#fff1c9;color:#6b4e00}.tag.fxs-caution{background:#fbe3e1;color:#8a2a22}
.tag.fxs-unknown,.tag.fxs-info{background:#eceff1;color:#455a64}
.libev{margin-top:3px}.libev>summary{font-size:12px;color:var(--accent);cursor:pointer}
/* your properties in this browser (Oct 21, late) */
ul.shelf{list-style:none;padding:0;margin:6px 0}
ul.shelf li{padding:6px 0;border-bottom:1px solid #e6e9e4;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
ul.shelf button{background:#fff;border:1px solid var(--line);border-radius:999px;padding:4px 11px;font-size:13px;cursor:pointer}
/* AI Seeing (Oct 22) */
.seelabel{background:rgba(255,255,255,.92);border:1px dashed #555;border-radius:6px;padding:1px 6px;font-size:11.5px;font-weight:600;color:#333;cursor:pointer;white-space:nowrap;margin:2px}
.seelabel.ok{border-style:solid;background:#fff}
.seesw{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.seebox{background:#f3f6f1;border:1px solid var(--line);border-radius:10px;padding:8px 10px;margin:8px 0;font-size:13.5px;line-height:1.45}

/* ---------------- Explore my land (explore.js) ----------------
   Layers in four groups, not one scrolling document. The visual job here is to make three things obvious at a
   glance: what is on the map now, what is only sitting in this browser, and what would cost a lookup or an AI
   request. Detail is kept behind "Details", never deleted. */
.exintro{font-size:14.5px;color:var(--soft);margin:4px 0 10px}
.exlaw{font-size:12.5px;line-height:1.6;color:var(--soft);background:#eef3ea;border:1px solid var(--line);border-radius:10px;padding:9px 11px;margin:0 0 16px}
.exfirst{background:#fff;border:1px solid var(--accent);border-left:4px solid var(--accent);border-radius:10px;padding:10px 12px;margin:0 0 14px}
.exfirst p{margin:4px 0 8px}

.exgrp{margin:0 0 20px}
.exgrp h3{margin:0 0 2px;font-size:15px;letter-spacing:.01em;color:var(--accent);border-bottom:2px solid var(--line);padding-bottom:5px}
.exblurb{margin:6px 0 8px;font-size:12.5px;color:var(--soft);line-height:1.5}

.exrow{border:1px solid var(--line);border-radius:10px;background:#fff;padding:9px 11px;margin:0 0 7px;transition:border-color .15s,background .15s}
.exrow.is-on{border-color:var(--accent);background:#fbfdf9;box-shadow:inset 3px 0 0 var(--accent)}
.exrow.is-off{opacity:.72}
.exhead{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.exctl{display:flex;gap:9px;align-items:baseline;flex:1;min-width:0;font-size:14.5px;margin:0}
.exctl input[type=checkbox]{margin:0;flex:none;width:16px;height:16px;accent-color:var(--accent);position:relative;top:2px}
.exctl b{font-weight:600}
label.exctl{cursor:pointer}
label.exctl:has(input:disabled){cursor:not-allowed}

.exchip{flex:none;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;border-radius:4px;padding:2px 7px;white-space:nowrap}
.exchip.on{background:#e0f2e3;color:#1f6b33}
.exchip.off{background:#eceee9;color:#6a746c}
.exchip.need{background:#f3ece0;color:#7a5d26}
.exchip.look{background:#dff3fb;color:#11607f}
.exchip.ai{background:#efe6f7;color:#5b3785}
.exchip.got{background:#e7ece4;color:#3c4b42}

.exsay{margin:5px 0 0;font-size:13px;line-height:1.55;color:var(--ink)}
.exsrc{margin:5px 0 0;font-size:12px;line-height:1.5;color:var(--soft)}
.exsrc .exchip{text-transform:none;letter-spacing:0}
.exact{margin:8px 0 0;display:flex;gap:6px;flex-wrap:wrap}
.exact button{background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:13px;color:var(--ink)}
.exact button:hover{background:#fff;border-color:var(--accent)}
.exact button.primary{background:var(--accent);color:#fff;border-color:var(--accent)}

.exlegend{margin:7px 0 0;display:flex;gap:12px;flex-wrap:wrap}
.exkey{display:inline-flex;gap:6px;align-items:center;font-size:12px;color:var(--soft)}
.exsw{width:13px;height:13px;border-radius:3px;border:1px solid;flex:none}
.exsw.dash{border-style:dashed;background:transparent !important}

.exradio{display:flex;flex-direction:column;gap:5px;width:100%}
.exradio label{display:grid;grid-template-columns:auto 1fr;gap:3px 8px;font-size:13px;padding:6px 9px;border:1px solid var(--line);border-radius:8px;background:var(--paper);cursor:pointer}
.exradio label:has(input:checked){border-color:var(--accent);background:#f1f7ee}
.exradio input{margin:0;accent-color:var(--accent);position:relative;top:3px}
.exradio small{grid-column:2;color:var(--soft);font-size:11.5px;line-height:1.45}

.exdet{margin:8px 0 0;border-top:1px dotted var(--line);padding-top:6px}
.exdet summary{font-size:12px;color:var(--accent);cursor:pointer;font-weight:600;list-style:none;display:inline-flex;gap:5px;align-items:center}
.exdet summary::-webkit-details-marker{display:none}
.exdet summary::before{content:"▸";font-size:10px;transition:transform .15s}
.exdet[open] summary::before{transform:rotate(90deg)}
.exdetbody{font-size:12.5px;line-height:1.6;color:var(--soft);padding:6px 0 2px}
.exdetbody p{margin:6px 0}
.exdetbody b{color:var(--ink)}
.exmore{margin-top:18px;border-top:1px solid var(--line);padding-top:10px}

.exlink{background:none;border:none;padding:0;font:inherit;font-weight:600;color:var(--accent);text-decoration:underline;cursor:pointer}
.exlink:hover{color:#153a2b}

/* a soil, flood or lidar row opens Land readings scrolled to the section that owns its consent wording */
.exflash{animation:exflash 1.6s ease-out}
@keyframes exflash{0%,40%{box-shadow:0 0 0 3px #f2b705}100%{box-shadow:0 0 0 3px transparent}}

@media (max-width:560px){
  .exrow{padding:8px 9px}
  .exhead{align-items:flex-start}
  .exsay{font-size:12.5px}
}

/* ---------------- the three design entrances (journey.js) ----------------
   The map is the experience: this panel stays narrow, says little, and puts the proposal on the map as a dashed
   draft you can see before you commit to anything. Evidence and unknowns are always one tap away, never in the way. */
.jintro{font-size:14.5px;color:var(--soft);margin:4px 0 12px}
.jsay{font-size:13px;line-height:1.6;color:var(--soft);margin:0 0 12px}

.jtabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:0 0 16px}
.jtab{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:9px 8px;text-align:left;color:var(--ink);line-height:1.3}
.jtab b{display:block;font-size:13px;font-weight:600}
.jtab small{display:block;font-size:11px;color:var(--soft);margin-top:2px}
.jtab:hover{background:#fff;border-color:var(--accent)}
.jtab.on{background:var(--accent);border-color:var(--accent);color:#fff}
.jtab.on small{color:#cfe3d6}

.jcard{border:1px solid var(--line);border-radius:12px;background:#fff;padding:12px 13px;margin:0 0 10px}
.jhead{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.jhead b{font-size:15px;font-weight:600;flex:1;min-width:0}
.jicon{font-size:18px;line-height:1;flex:none}
.jchip{flex:none;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;border-radius:4px;padding:2px 7px}
.jchip.draft{background:#e0f2e3;color:#1f6b33}
.jchip.look{background:#dff3fb;color:#11607f;text-transform:none;letter-spacing:0;font-weight:600}
.jblurb{margin:7px 0 0;font-size:13px;line-height:1.55}
.jwhere{margin:8px 0 0;font-size:12.5px;line-height:1.5;color:var(--soft)}
.jact{margin:11px 0 0;display:flex;gap:6px;flex-wrap:wrap}
.jact button{background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:7px 13px;font-size:13px;color:var(--ink)}
.jact button:hover{background:#fff;border-color:var(--accent)}
.jact button.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.jact button.on{border-color:var(--accent);background:#eef5ea;font-weight:600}

.jgoals{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:0 0 14px}
.jgoal{display:flex;gap:8px;align-items:center;border:1px solid var(--line);border-radius:10px;background:var(--paper);padding:9px 10px;font-size:13px;cursor:pointer;line-height:1.3}
.jgoal:hover{background:#fff;border-color:var(--accent)}
.jgoal.on{border-color:var(--accent);background:#f1f7ee}
.jgoal input{margin:0;flex:none;accent-color:var(--accent)}
.jgoal b{font-weight:500}

.jchain{border-top:1px solid var(--line);padding-top:12px}
.jsteps{list-style:none;margin:0 0 14px;padding:0;counter-reset:jstep}
.jsteps li{position:relative;padding:0 0 12px 30px;border-left:2px solid var(--line);margin-left:9px}
.jsteps li:last-child{border-left-color:transparent;padding-bottom:0}
.jsteps li::before{counter-increment:jstep;content:counter(jstep);position:absolute;left:-11px;top:-2px;width:20px;height:20px;border-radius:50%;background:var(--accent);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
.jsteps b{font-size:13px;font-weight:600}
.jsteps small{display:block;font-size:12px;color:var(--soft);margin-top:2px;line-height:1.5}
.jgap{background:#fdf6e8;border:1px solid #e8d6a8;border-radius:10px;padding:10px 12px;margin:0 0 12px;font-size:12.5px;line-height:1.55}
.jgap p{margin:6px 0}

.jlist{list-style:none;margin:6px 0 12px;padding:0}
.jlist button{width:100%;text-align:left;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:9px 11px;font-size:13.5px;color:var(--ink);margin:0 0 5px}
.jlist button:hover{background:#fff;border-color:var(--accent)}
.jlist small{display:block;color:var(--soft);font-size:11.5px;margin-top:2px}

.jdet{margin:14px 0 0;border-top:1px solid var(--line);padding-top:10px}
.jdet summary{font-size:12.5px;color:var(--accent);cursor:pointer;font-weight:600;list-style:none;display:inline-flex;gap:5px;align-items:center}
.jdet summary::-webkit-details-marker{display:none}
.jdet summary::before{content:"▸";font-size:10px;transition:transform .15s}
.jdet[open] summary::before{transform:rotate(90deg)}
.jdetbody{font-size:12.5px;line-height:1.6;color:var(--soft);padding:8px 0 2px}
.jdetbody p{margin:7px 0}
.jdetbody b{color:var(--ink)}
.jgaps{list-style:none;margin:6px 0;padding:0}
.jgaps li{padding:6px 0;border-bottom:1px dotted var(--line);display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.jgaps button{background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:4px 10px;font-size:12px;color:var(--ink)}
.jgaps button:hover{border-color:var(--accent);background:#fff}
.jun li{color:#7a5d26}

@media (max-width:560px){
  .jtabs{grid-template-columns:1fr}
  .jgoals{grid-template-columns:1fr}
}

/* the access code, asked for where it's needed (seeing.js). Typed by the person, kept in this browser, never shown back. */
.secode{display:flex;gap:6px;margin:8px 0 0;flex-wrap:wrap}
.secode input{flex:1;min-width:140px;border:1px solid var(--line);border-radius:999px;padding:7px 13px;font:inherit;font-size:13px;background:#fff}
.secode input:focus{border-color:var(--accent);outline:none}
.secode button{flex:none}
.jmiss{margin:8px 0 0;font-size:12.5px;line-height:1.6;color:#7a5d26;background:#fdf6e8;border:1px solid #e8d6a8;border-radius:8px;padding:8px 10px}
.jmiss button{background:#fff;border:1px solid #e8d6a8;border-radius:999px;padding:4px 11px;font-size:12px;color:var(--ink);margin:0 4px}
.jmiss button:hover{border-color:var(--accent)}

/* ---------------- food forest layers (systems.js) ----------------
   The point of this tab is to make a three-dimensional design readable at a glance: a side view built only from
   documented heights, then each layer with what's in it. Layers nothing can fill stay visible, with the reason. */
.lyrsection{margin:12px 0;padding:10px;border:1px solid var(--line);border-radius:10px;background:#fbfdf9}
.lyrsection svg{width:100%;height:auto;display:block}
.lyrsection figcaption{margin:8px 0 0;font-size:11.5px;line-height:1.55;color:var(--soft)}

.lyrlist{margin:12px 0 0}
.lyrrow{border:1px solid var(--line);border-left:4px solid var(--line);border-radius:10px;background:#fff;padding:9px 11px;margin:0 0 7px}
.lyrrow[data-layer="canopy"]{border-left-color:#1b4d2a}
.lyrrow[data-layer="understory"]{border-left-color:#2f6b3a}
.lyrrow[data-layer="shrub"]{border-left-color:#4e8c3f}
.lyrrow[data-layer="herb"]{border-left-color:#7aab4a}
.lyrrow[data-layer="ground"]{border-left-color:#a3c46a}
.lyrrow[data-layer="climber"]{border-left-color:#8d6e9a}
.lyrrow.empty{background:var(--paper);opacity:.85}
.lyrhead{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.lyrhead b{font-size:14px;font-weight:600;flex:1;min-width:0}
.lyrsw{width:12px;height:12px;border-radius:3px;flex:none}
.lyrn{flex:none;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--soft);background:#eef2ea;border-radius:4px;padding:2px 7px}
.lyrrow:not(.empty) .lyrn{background:#e0f2e3;color:#1f6b33}
.lyrabout{margin:5px 0 0;font-size:12.5px;line-height:1.5;color:var(--soft)}
.lyrnone{margin:6px 0 0;font-size:12px;line-height:1.55;color:#7a5d26}
.lyrmem{list-style:none;margin:7px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}
.lyrmem li{display:flex;gap:7px;align-items:baseline;flex-wrap:wrap}
.lyrmem button{background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:3px 10px;font-size:12.5px;color:var(--ink)}
.lyrmem button:hover{background:#fff;border-color:var(--accent)}
.lyrmem small{font-size:11px;color:var(--soft);flex:1;min-width:120px}
.lyrunknown{margin:10px 0 0;background:#fdf6e8;border:1px solid #e8d6a8;border-radius:10px;padding:9px 11px;font-size:12.5px;line-height:1.55}
.lyrunknown ul{margin:6px 0 0;padding-left:18px}
.lyrdet{margin:12px 0 0;border-top:1px solid var(--line);padding-top:9px}
.lyrdet summary{font-size:12.5px;color:var(--accent);cursor:pointer;font-weight:600;list-style:none;display:inline-flex;gap:5px;align-items:center}
.lyrdet summary::-webkit-details-marker{display:none}
.lyrdet summary::before{content:"▸";font-size:10px;transition:transform .15s}
.lyrdet[open] summary::before{transform:rotate(90deg)}
.lyrdetbody{font-size:12.5px;line-height:1.6;color:var(--soft);padding:7px 0 2px}
.lyrdetbody p{margin:7px 0}
.lyrdetbody b{color:var(--ink)}

/* "What is on this ground?" — shown instead of a confident placement when nothing has identified the structures
   on a piece of land (Oct 22, Kels: the Fort Myers pool cage). */
.needstruct{background:#fdf6e8;border:1px solid #e8d6a8;border-left:4px solid #c89a3c;border-radius:10px;padding:11px 13px;margin:10px 0;font-size:13px;line-height:1.6}
.needstruct b{display:block;margin-bottom:4px;font-size:14px;color:var(--ink)}
.needstruct p{margin:6px 0}
.needstruct .actions{margin:9px 0 0;display:flex;gap:6px;flex-wrap:wrap}
.needstruct button{background:#fff;border:1px solid #e8d6a8;border-radius:999px;padding:6px 13px;font-size:13px;color:var(--ink)}
.needstruct button:hover{border-color:var(--accent);background:#fffdf8}
.needstruct .fine{font-size:11.5px;color:#7a5d26;margin-top:8px}
.proplabel .tag.unver{background:#fdf2dc;color:#8a6420;border:1px solid #e8d6a8}
.lgsw.lgunver{background:transparent;border:2px dotted #c89a3c;border-radius:3px}

/* Seeing a reading, not reading about it (Oct 22, after grading the first real AI Seeing result).
   One look at the photo settles what a sentence cannot: E1's "pale lawn" held a screened pool enclosure. */
.seecrop{margin:10px 0;padding:10px;border:1px solid var(--line);border-radius:10px;background:#fbfdf9}
.seecrop img{width:100%;height:auto;display:block;border-radius:8px}
.seecrop button{background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-size:13px;color:var(--ink)}
.seecrop button:hover{background:#fff;border-color:var(--accent)}
.seecrop button:disabled{opacity:.7;cursor:wait}
.seecrop .fine{margin:7px 0 0;font-size:11.5px;line-height:1.5;color:var(--soft)}
.seealso{margin:10px 0;padding:9px 11px;border:1px solid #e8d6a8;border-left:4px solid #c89a3c;border-radius:10px;
  background:#fdf6e8;font-size:12.5px;line-height:1.6;color:#7a5d26}
.seealso b{color:var(--ink)}

/* the whole-property plan (plan.js / journey.js "My whole property") */
.planlist{list-style:none;margin:8px 0 0;padding:0}
.planlist li{margin:0 0 7px}
.planlist button{width:100%;text-align:left;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:9px 11px;font-size:13.5px;color:var(--ink)}
.planlist button:hover{background:#fff;border-color:var(--accent)}
.planlist small{display:block;color:var(--soft);font-size:11.5px;margin-top:2px}
.plnote{margin:5px 0 0 4px;font-size:12px;line-height:1.55;color:#7a5d26}
.jtabs{grid-template-columns:repeat(4,1fr)}
@media (max-width:700px){.jtabs{grid-template-columns:1fr 1fr}}

/* Photo · Plan · Compare (views.js): one segmented switch on the map */
.viewswitch{display:flex;border-radius:999px;box-shadow:0 1px 4px rgba(0,0,0,.2)}
.viewswitch .chip{border-radius:0;box-shadow:none;margin-left:-1px;padding:6px 12px}
.viewswitch .chip:first-child{border-radius:999px 0 0 999px;margin-left:0}
.viewswitch .chip:last-child{border-radius:0 999px 999px 0}
.viewswitch .chip[aria-pressed="true"]{background:var(--accent);color:#fff;border-color:var(--accent)}
/* the plan's overlays: shown only in Plan and Compare (views.js) */
.viewoverlays{display:flex;flex-wrap:wrap;gap:4px 10px;background:rgba(251,249,241,.94);border:1px solid var(--line);border-radius:10px;padding:5px 10px;font-size:13px;box-shadow:0 1px 4px rgba(0,0,0,.15);max-width:260px}
.viewoverlays label{display:flex;align-items:center;gap:5px;cursor:pointer;white-space:nowrap}
.viewoverlays input{accent-color:var(--accent);margin:0}
/* names on the plan: lettered quietly, on a paper halo, never a dark pill */
.planlabel{font:italic 500 12.5px/1.15 Georgia,"Iowan Old Style","Palatino Linotype",serif;color:#3a4a37;white-space:nowrap;cursor:pointer;
  text-shadow:0 0 3px #f8f5ea,0 0 3px #f8f5ea,0 0 6px #f8f5ea;padding:1px 2px;transform:translateY(-2px)}
.planlabel.proposed{color:#4d6b2f}
body[data-view="plan"] .placelabel,body[data-view="compare"] .placelabel{background:none;box-shadow:none;color:#3f3b2e;padding:1px 2px;
  font:600 11px/1.1 Georgia,"Palatino Linotype",serif;letter-spacing:.06em;text-transform:uppercase;text-shadow:0 0 3px #f8f5ea,0 0 3px #f8f5ea,0 0 6px #f8f5ea}
body[data-view="compare"] .placelabel,body[data-view="compare"] .planlabel{text-shadow:0 0 3px #fff,0 0 4px #fff}
body.plan-no-labels .planlabel,body.plan-no-labels .placelabel,body.plan-far .planlabel{display:none}
/* the key and north point, in Plan only */
.plankey{position:absolute;left:12px;bottom:84px;z-index:4;background:rgba(251,249,241,.94);border:1px solid #d8d1bb;border-radius:8px;padding:8px 12px 8px 10px;
  display:flex;gap:10px;align-items:flex-start;font:12px/1.35 var(--sans);color:#3f3b2e;box-shadow:0 1px 4px rgba(0,0,0,.12);max-width:230px}
.plankey ul{list-style:none;margin:0;padding:0;display:grid;gap:3px}
.plankey li{display:flex;align-items:center;gap:7px}
.plankey p{margin:4px 0 0;font-size:11px;color:#6b6450;grid-column:1/-1}
.plankey{flex-wrap:wrap}
.pk-sw{display:inline-block;width:20px;height:10px;border-radius:3px;flex:none}
.pk-exist{background:#a8c58c;border:1.5px solid #5f8a4c}
.pk-prop{background:#e8cfa0;border:1.5px dashed #8f6a3e}
.pk-gone{background:rgba(168,197,140,.35);border:1.5px dashed #a4513a}
.pk-prot{background:#a8c58c;border:2px solid #2f6b45;box-shadow:inset 0 0 0 1px #f5f1e4}
@media (max-width:700px){.plankey{display:none}.viewoverlays{max-width:200px;font-size:12px}}
/* what you intend for something already there (plan.js), on its card */
.intentbox{margin:10px 0;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fbfaf4}
.intentrow{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.intentrow .chip{padding:4px 10px;font-size:13px;box-shadow:none}
.intentrow .chip[aria-pressed="true"]{background:var(--accent);color:#fff;border-color:var(--accent)}
/* the Companion's ideas on the plan: small paper tags that keep their status words, not dark pills over the drawing */
body[data-view="plan"] .proplabel{background:rgba(251,249,241,.93);color:#2f3a2c;border:1px solid #d6cfb8;box-shadow:0 1px 2px rgba(0,0,0,.12);padding:2px 8px 2px 3px;gap:5px}
body[data-view="plan"] .proplabel .ic{width:18px;height:18px;font-size:10px;background:#efe9d6}
body[data-view="plan"] .proplabel b{font:italic 600 11.5px/1.15 Georgia,"Palatino Linotype",serif}
body[data-view="plan"] #neLegend{display:none}
body[data-view="plan"].plan-idea-key #neLegend:not([hidden]){display:block;bottom:250px}
.pk-ideas{grid-column:1/-1;margin-top:4px;background:none;border:0;padding:0;color:var(--accent);font:600 12px var(--sans);text-decoration:underline;cursor:pointer;text-align:left}
/* what you would like from the land (journey.js, the whole-property card) */
.goalset{border:1px solid var(--line);border-radius:10px;padding:8px 10px 6px;margin:8px 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:4px 10px}
.goalset legend{font-weight:600;font-size:13px;padding:0 4px}
.goalset label{display:flex;gap:7px;align-items:flex-start;font-size:13px;cursor:pointer;padding:3px 0}
.goalset input{margin-top:3px;accent-color:var(--accent)}
.goalset small{display:block;color:var(--soft);font-size:11.5px}
/* What's here (inventory.js) */
.invrow{border:1px solid var(--line);border-radius:10px;padding:8px 12px;margin:8px 0;background:#fff}
.invrow.has{background:#f8fbf5;border-color:#c9dcc4}
.invhead{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.invcount{font-size:12px;color:var(--soft)}
.invrow.has .invcount{color:var(--accent);font-weight:600}
.invrow .fine{margin:2px 0 4px}
.invrow.invfocus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(31,107,51,.18)}
.invadded{background:#e8f3e4;border-radius:8px;padding:6px 9px;font-size:13.5px!important}
.panel .panelback{display:block;margin:0 40px 8px 0;font-size:13.5px;text-decoration:none}
.panel .panelback:hover{text-decoration:underline}
.invnames{margin:2px 0 6px;font-size:13px}
.invdone{margin:2px 0 6px;font-size:13.5px;color:var(--accent);font-weight:600}
.invdone .linkish,.invdone small{font-weight:400}
.invfind{border-top:1px dashed #c9d3c4;margin:8px 0 6px;padding-top:6px}
.invfindhead{font-size:12.5px!important;font-weight:600;color:#7a5b12;margin:0 0 4px!important}
.invf{background:#fff8e6;border:1px dashed #d9b75a;border-radius:8px;padding:6px 9px;margin:4px 0;font-size:13.5px}
.invf .actions{margin-top:4px}
.invfacc{font-size:13.5px!important;background:#eef5ea;border-radius:8px;padding:6px 9px}
.invstart{background:#eef5ea;border:1px solid #c9dcc4;border-radius:10px;padding:8px 12px;margin:8px 0}
.invstart ol{margin:4px 0 6px;padding-left:20px;font-size:13.5px}
.invintents{display:grid;gap:4px;margin:6px 0 10px}
.invint{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:13px;padding:3px 0;border-bottom:1px dotted var(--line)}
.invint small{color:var(--soft)}
.invint select{font:inherit;font-size:13px;padding:2px 4px;border-radius:6px;border:1px solid var(--line);background:#fff}
.vo-toggle{display:none;background:none;border:0;padding:0;font:600 13px var(--sans);color:var(--accent);cursor:pointer}
@media (max-width:700px){.vo-toggle{display:block}.viewoverlays:not(.open) label{display:none}.viewoverlays{padding:4px 10px}}
.pk-lidar{background:#b4c7a0;border:1.5px solid #8ea67c;border-radius:50%;width:12px;height:12px;margin:0 4px}
/* the local test version (Oct 24): a notice on every screen, and AI buttons that say they need the AI */
.testbanner{position:fixed;left:12px;bottom:calc(46px + env(safe-area-inset-bottom, 0px));z-index:20;background:#5b2a86;color:#fff;font-size:12.5px;line-height:1.3;padding:6px 10px;border-radius:8px;max-width:min(360px,calc(100% - 24px));box-shadow:0 2px 8px rgba(0,0,0,.25)}
.needai{display:block;font-size:11px;font-weight:600;color:#5b2a86;line-height:1.2;margin-top:2px}
.primary .needai,.chip.companion .needai{color:inherit;opacity:.85}
/* workspaces and details (Oct 24): a detail card opens beside the workspace in #panel on a wide screen, over it on a
   narrow one (on a phone it is the same sheet as the panel, on top). The workspace underneath is never rebuilt. */
.panel.detail{z-index:8;right:calc(12px + 380px + 12px);box-shadow:0 6px 24px rgba(0,0,0,.34)}
.panel.widepanel ~ .panel.detail{right:calc(12px + 460px + 12px)}
.detailback{display:block;border:0;background:none;color:var(--accent);font:inherit;font-size:13.5px;font-weight:600;padding:2px 0;margin:0 40px 8px 0;cursor:pointer;text-align:left}
.detailback:hover{text-decoration:underline}
.detailback:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:1499px){.panel.detail,.panel.widepanel ~ .panel.detail{right:12px}}   /* side by side only where the map keeps room */
@media (max-width:700px){.panel.detail,.panel.widepanel ~ .panel.detail{right:8px}}
.drawhint{z-index:9}
/* the kitchen garden (kitchen.js, Oct 24): crops judged for this garden, with their reasons and what isn't known */
.kfrost{background:#f1f6ec;border:1px solid #cddcc2;border-radius:10px;padding:8px 12px;margin:8px 0}
.kfrost p{margin:0 0 6px}
.panel ul.kcrops{list-style:none;padding:0;margin:6px 0 12px;display:grid;gap:8px}
.kcrop{border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:#fff}
.khead{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px}
.khead i{color:var(--soft);font-size:12.5px}
.ktier{margin-left:auto;font-size:11.5px;font-weight:700;border-radius:999px;padding:2px 8px;white-space:nowrap}
.k-established{background:#e3f1dc;color:#2f6b33}.k-conditional{background:#fdf1d6;color:#7a5b12}.k-experimental{background:#f3e3f7;color:#6b3a80}
.panel ul.kwhy{margin:4px 0;padding-left:18px;font-size:13px;line-height:1.45}
.kwhy .ks-caution{color:#8a2a17}.kwhy .ks-edge{color:#7a5b12}
.panel .kunk{font-size:12.5px;color:var(--soft);margin:2px 0 4px}
.kfit{font-size:11px;border-radius:999px;padding:1px 7px;margin-left:6px;white-space:nowrap;background:#eceae4;color:#5b5446}
.kseason{font-size:11px;border-radius:999px;padding:1px 7px;margin-left:6px;white-space:nowrap}.ks-cool{background:#e2eef7;color:#24577a}.ks-warm{background:#fbe6d8;color:#8a4316}
.kmonths{display:grid;grid-template-columns:repeat(12,1fr);gap:2px;margin:5px 0 2px;max-width:320px}
.kmonths span{font-size:10px;text-align:center;line-height:16px;border-radius:3px;background:#eef0ea;color:#8a938c}
.kmonths span.on{background:#5d9a62;color:#fff;font-weight:700}.kmonths span.now{outline:2px solid #1f2a24;outline-offset:-1px}
.kcal{background:#f3f5fa;border:1px solid #d3d9e6;border-radius:10px;padding:8px 12px;margin:8px 0}.kcal p{margin:0 0 6px}.kcal details p{margin:4px 0}
/* how the parts of a design affect each other (relations.js) */
.panel ul.rellist{list-style:none;padding:0;margin:6px 0;display:grid;gap:6px}
.rel{border-left:3px solid #c9d3c4;padding:4px 8px;font-size:13px;line-height:1.45;background:#fbfcf9;border-radius:0 6px 6px 0}
.rel-concern{border-left-color:#c27b2c;background:#fdf6ec}.rel-unknown{border-left-color:#8a96a8}.rel-minor{border-left-color:#d4b45a}
.relstate{display:inline-block;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:0 5px;border-radius:4px;background:#e6ebe2;color:#4b5a4c}
.rel-concern .relstate{background:#f6e2c8;color:#7a4a12}.rel-unknown .relstate{background:#e3e7ee;color:#46536a}
.relbasis{font-size:11px;color:var(--soft);font-style:italic}
.relhz{display:inline-block;font-size:10.5px;font-weight:600;padding:0 5px;border-radius:4px;background:#e9eef5;color:#3d4c63}
.relhz-mature{background:#eef3e4;color:#45602a;border:1px dashed #9db57a}
.rel .relunk{font-size:12px;color:var(--soft);margin-top:2px}.rel .relobs{font-size:12px;color:#2f6b45;margin-top:2px}
.rel .actions{margin-top:4px}
.panel .plrel{color:#7a4a12}
.relheight{display:grid;grid-template-columns:1fr 1fr;gap:6px;align-items:end}.relheight p{grid-column:1/-1;margin:0}

/* How water moves (landview.js), strategy cards (strategy.js), one evidence language (evidence.js) — Oct 25 */
.topicbtn{font-weight:600}
.evchip{display:inline-block;font-size:11px;line-height:1.4;padding:0 6px;border-radius:9px;border:1px solid #c9c2b4;background:#f6f3ec;color:#4d473d;white-space:nowrap;vertical-align:1px}
.ev-observed{background:#e5f2e8;border-color:#7fb08c;color:#245c35}.ev-modelled{background:#e6eef7;border-color:#8eaed0;color:#284c73}
.ev-expert{background:#efe9f7;border-color:#ab97cf;color:#4b3477}.ev-guidance{background:#eef4e6;border-color:#9cb77c;color:#3f5a22}
.ev-tradition{background:#f7efe3;border-color:#d0ad7c;color:#6d4a17}.ev-inference{background:#fdf3d6;border-color:#d8b85a;color:#6b5210}
.ev-hypothesis{background:#fbe9e7;border-color:#d99a90;color:#7a2f24}.ev-unreviewed{background:#f1f1f1;border-color:#c4c4c4;color:#555}
.evstatus{font-size:11px;color:var(--soft)}
details.evmore{display:inline}details.evmore>summary{display:inline;cursor:pointer;font-size:11.5px;color:#2f6ea8;margin-left:4px}
details.evmore[open]{display:block;margin:4px 0 6px;padding:6px 8px;background:#faf8f3;border-left:3px solid #d8d0bf}
.evdetail p{margin:2px 0}
.lsterrain{padding:8px 10px;border-radius:8px;background:#eef4e8;margin:6px 0}.lsterrain.flat{background:#fbf3e2}
.lsplay{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:8px 0}.lsctl{display:flex;gap:5px;align-items:center;font-weight:600}
.lsrain{padding:8px 10px;border-radius:8px;margin:6px 0;background:#e9f1fb}.lsrain.no{background:#fbf3e2}
.lscatch{padding:8px 10px;border-radius:8px;margin:6px 0;background:#eaf3fb;border:1px dashed #6b95bd}
.lsh{margin:14px 0 6px}
details.lsitem{border:1px solid #ddd5c6;border-radius:9px;margin:6px 0;background:#fff}
details.lsitem>summary{padding:8px 10px;cursor:pointer;list-style:revert}.lstitle{font-weight:600}
.lsbody{padding:0 10px 10px}.lsdo{margin:12px 0 4px}
details.stcard{border:1px solid #e3dccd;border-left:4px solid #9cb77c;border-radius:7px;margin:6px 0;background:#fdfcf9}
details.stcard.lv-onsite{border-left-color:#d39b3a}details.stcard.lv-explore{border-left-color:#8eaed0}details.stcard.lv-unsupported{border-left-color:#c9a59f;background:#faf7f6}
details.stcard.decided{box-shadow:0 0 0 2px #7fb08c inset}
.sthead{padding:7px 9px;cursor:pointer;display:flex;flex-wrap:wrap;gap:6px;align-items:center}.stname{font-weight:600}
.stlevel{font-size:11.5px;padding:1px 7px;border-radius:9px;background:#eef4e6;color:#3f5a22}
.stlevel.lv-onsite{background:#fbefd9;color:#7a4f0d}.stlevel.lv-explore{background:#e6eef7;color:#284c73}.stlevel.lv-unsupported{background:#f3e3e0;color:#7a2f24}
.stdec{font-size:11.5px;padding:1px 7px;border-radius:9px;background:#245c35;color:#fff}
.stbody{padding:0 10px 10px}.stbody h4{margin:10px 0 3px;font-size:13px}.stdef{font-size:13px;color:var(--soft)}
.stlist{margin:2px 0;padding-left:18px}.stlist li{margin:3px 0;font-size:13px}.stnotes li{color:#6d4a17}
.prereq{list-style:none;padding-left:2px}.pqm{display:inline-block;width:16px;font-weight:700}.pq-met .pqm{color:#2f7a45}.pq-unmet .pqm{color:#b23b2b}.pq-unknown .pqm{color:#a07a1a}.pq-gap{color:var(--soft)}
.stact{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}.stact p{flex-basis:100%;margin:2px 0}
.stc{margin-top:8px}
.siting{margin:8px 0;padding:7px 9px;background:#f7f5ef;border-radius:7px}.siting ul{padding-left:16px;margin:4px 0}.siting li{font-size:12.5px;margin:3px 0}
details.sitetopic>summary{cursor:pointer;font-size:13px}.sitemark{color:#7a4a12}
.bind{font-size:11px;padding:0 5px;border-radius:7px;background:#eee}.b-binding-state-rule,.b-binding-local-rule{background:#3f4a5a;color:#fff}.b-state-guidance{background:#e1ecd3}.b-extension-recommendation{background:#e8f0f7}
.whyhere{margin:10px 0;padding:8px 10px;background:#f8f6f0;border-radius:8px;border-left:3px solid #7fb08c}
.whychain{padding-left:20px}.whychain>li{margin:6px 0}.whychain ul{padding-left:16px;margin:2px 0}
.fqs{margin:6px 0}.fq{margin:6px 0}.fq.done{font-size:13px}.fq .qopts{display:flex;flex-wrap:wrap;gap:5px;margin-top:3px}
.lslast{background:#eef4e6;padding:5px 8px;border-radius:6px}

/* ---- UX integration (Oct 26): one way in, choices that ripple, plan basics, phone ---- */
/* three ways in, after the outline */
.invites{display:grid;gap:8px;margin:6px 0 12px}
.invite{display:block;text-align:left;border:1px solid var(--line);background:#fff;border-radius:12px;padding:10px 12px;color:var(--ink)}
.invite b{display:block;font-size:15px;margin-bottom:2px}
.invite span{display:block;font-size:12.5px;line-height:1.45;color:var(--soft)}
.invite.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.invite.primary span{color:#e3efe6}
.invite:hover{border-color:var(--accent)}
/* Walk & teach */
.teach{background:#f1f6ef;border:1px solid #c9dcc6;border-radius:12px;padding:10px 12px;margin:0 0 14px}
.teach h3{margin:0 0 6px}.teach h4{margin:10px 0 4px;font-size:13px}
.teachq{border-top:1px dotted var(--line);padding-top:6px;margin-top:6px;font-size:13px}
/* Read my land */
.lstools{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:4px 0 10px}
.lsnow{background:#eef5f9;border-left:3px solid var(--water);padding:6px 9px;border-radius:0 8px 8px 0;font-size:13px;margin:8px 0}
.backto{margin:0 0 6px;font-size:13px}
/* strategy cards: the verdict first */
.stverdict{background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 10px;margin:4px 0 8px}
.stverdict p{margin:3px 0}
.stcard.lv-unsupported .stverdict{background:#fbf1ee;border-color:#e3c3b8}
.stmore{margin-top:8px}.stmore > summary{cursor:pointer;color:var(--accent);font-weight:600;font-size:13px;padding:4px 0}
/* goals: ideas are not choices */
.goalideas{border:1px dashed #b9c8b5;border-radius:10px;padding:8px 10px;margin:10px 0;background:#fbfcf9}
.goalideas p{margin:0 0 6px}
/* a part on ground nobody has confirmed */
.groundnote{border-left:3px solid #c9921f;padding-left:8px}
/* what a choice changed */
.ripple{position:fixed;left:50%;transform:translateX(-50%);top:var(--top,80px);width:360px;max-width:calc(100% - 24px);background:var(--paper);border-radius:12px;box-shadow:0 4px 18px rgba(0,0,0,.3);padding:10px 12px;z-index:9;font-size:13px}
.rphead{display:flex;align-items:center;justify-content:space-between}
.rpclose{border:0;background:none;font-size:18px;line-height:1;padding:0 4px;color:var(--soft)}
.rpwhat{margin:4px 0 6px;line-height:1.45}
.rplist{list-style:none;margin:0 0 6px;padding:0}
.rplist li{padding:5px 0;border-top:1px dotted var(--line);line-height:1.45}
.rpstate{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding:1px 6px;border-radius:5px;background:#e7efe5;color:#2f5a3f;margin-right:4px}
.rp-concern .rpstate{background:#f7e1d9;color:#8a3a22}.rp-minor .rpstate{background:#f6edd6;color:#7a5a16}.rp-unknown .rpstate{background:#eceeea;color:#55635b}
.rpbasis{display:block;font-size:11.5px;color:var(--soft)}
/* plan key additions */
.pk-protarea{background:#cfe5d6;border:2px dashed #2f6b45}
.pk-sketch{background:transparent;border:2px dotted #24425a}
.pk-lead{height:0;border-top:2.5px dashed #3f8fae;border-radius:0;margin-top:5px}
.pk-zone{background:transparent;border:2px dashed #7a8f5a}
body:has(#testBanner:not(.inbar)) .plankey{bottom:104px}
.pk-contour{height:0;border-top:2px solid #8a5a2b;border-radius:0;margin-top:5px}
.pk-shade{background:rgba(52,70,90,.22);border:1px dotted #34465a}
.planlabel.provisional,.placelabel.provisional{border:1.5px dashed #24425a;border-radius:6px;padding:1px 5px;background:rgba(255,255,255,.85);color:#24425a;font-style:italic}
/* phone: the toolbar is one scrolling row, cards sit above it, notes never cover the drawing */
@media (max-width:700px){
  .bar.bottom{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;scrollbar-width:none;padding-bottom:2px}
  .bar.bottom::-webkit-scrollbar{display:none}
  .bar.bottom > *{flex:none}
  .bar.bottom .menu{position:fixed;left:8px;right:8px;bottom:var(--bot,118px);min-width:0;max-height:calc(100% - var(--top,100px) - var(--bot,118px) - 8px)}   /* a scrolling toolbar would clip its menus */
  .panel{bottom:var(--bot,118px);max-height:calc(100% - var(--top,100px) - var(--bot,118px) - 120px);min-height:200px}
  .status{bottom:auto;top:var(--top,100px)}
  .maplibregl-ctrl-bottom-right,.maplibregl-ctrl-bottom-left{bottom:var(--bot,110px)}
  .testbanner.inbar{position:static;box-shadow:none;font-size:11px;padding:4px 8px;white-space:nowrap;max-width:none;order:-1}
  .ripple{left:118px;right:8px;width:auto;transform:none;top:var(--top,100px);max-height:45vh;overflow:auto;font-size:12px;padding:6px 10px}   /* clear of the map tools on the left */
  .ripple.rpfold:not(.open) > :not(.rphead){display:none}   /* one line until tapped open */
  .rptoggle{border:0;background:none;padding:2px 0;text-align:left;color:inherit;font:inherit;flex:1}
  .rpcount{color:var(--soft)}
}

/* ---- Soil, biomass & resource routes (Oct 26): soil.js, flows.js ---- */
.lssoil{border-top:1px solid var(--line);padding-top:12px;margin-top:18px}
.fllist{list-style:none;margin:4px 0 10px;padding:0}
.flrow{padding:5px 0;border-bottom:1px dotted var(--line);font-size:13px;display:flex;gap:6px;align-items:baseline;flex-wrap:wrap}
.flbadge{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding:1px 6px;border-radius:5px;background:#eceeea;color:#55635b}
.flbadge.fl-planned{background:#f3e3cf;color:#7a4313}
.flbadge.fl-kept{background:#e3efe0;color:#3e6a35}
.flbadge.fl-practiced,.flbadge.fl-observed,.flbadge.fl-measured{background:#e6ddd1;color:#4b2e10}
.flcard h3{margin:14px 0 4px;font-size:14px}
.flends{margin:2px 0 8px}
.flstatus{background:#fbf7f0;border:1px solid #eadfcd;border-radius:8px;padding:6px 9px;font-size:13px}
.flrecs{margin:6px 0 0;padding-left:18px}
.flform{margin-top:8px}
.pk-flpot{height:0;border-top:2px dotted #9a7b4f;border-radius:0;margin-top:5px}
.pk-flplan{height:0;border-top:3px dashed #8a4f16;border-radius:0;margin-top:5px}
.pk-flkept{height:0;border-top:3px dotted #5f8a4c;border-radius:0;margin-top:5px}
.pk-flrec{height:0;border-top:3px solid #5c3410;border-radius:0;margin-top:5px}
/* living systems: layers on the map, how a plant fits, stages, climbers (Oct 27) */
.lyrmap{background:#f2f5ee;border:1px solid var(--line);border-radius:10px;padding:8px 10px;margin:8px 0}
.lyrmap .libfilters{flex-wrap:wrap}
.lyrground,.lyrbio{border-left:3px solid #a3c46a;padding:4px 0 4px 10px;margin:10px 0}
.lyrbio{border-left-color:#8a4f16}
.lyrnote{background:#fff7e0;border-radius:8px;padding:4px 8px}
.fitlist{list-style:none;padding:0;margin:4px 0 8px}
.fitlist li{padding:3px 0 3px 10px;border-left:3px solid var(--line);margin:3px 0;font-size:13px}
.fit-fits{border-left-color:#7cb342!important}.fit-weigh{border-left-color:#f2b705!important}.fit-unknown{border-left-color:#9e9e9e!important}.fit-yours{border-left-color:#7b4f8c!important}
.fitb{font-size:10.5px;padding:1px 6px;border-radius:999px;background:#eef1ea;color:var(--soft);white-space:nowrap}
.fitb-sourced{background:#e3efdc;color:#2f5a22}.fitb-derived{background:#e8eef5;color:#2e4d6b}.fitb-yours{background:#f0e6f4;color:#5d3a6b}.fitb-inference{background:#fff1d6;color:#7a5a12}.fitb-unknown{background:#eee;color:#666}
.spotstage{display:inline-flex;gap:6px;align-items:center;margin:4px 8px 0 0}
.spotstage select{font:inherit;font-size:12px;max-width:220px}
.vineadd{display:flex;flex-direction:column;gap:4px;align-items:flex-end}
@media (max-width:700px){.vineadd{align-items:stretch}.spotstage select{max-width:100%}}
/* function-first composition (Oct 27) */
.compbox{background:#f6f8f1;border:1px solid var(--line);border-radius:10px;padding:8px 10px;margin:6px 0 10px}
.considerbox{border-top:1px solid var(--line);margin-top:8px;padding-top:8px}
.considerlist{list-style:none;padding:0;margin:6px 0;display:grid;gap:8px}
.considerlist > li{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start;justify-content:space-between;background:#fff;border:1px solid var(--line);border-radius:8px;padding:6px 8px}
.considerlist > li > div{min-width:0;flex:1 1 240px}   /* the text keeps its width; on a phone the button moves below it */
.considerlist button{flex:none}
.considercheck{margin:4px 0 0;padding-left:16px;font-size:12.5px;color:var(--soft)}
.considerwhat{margin:3px 0 0}
.considerwarn{margin:4px 0 0;padding:4px 6px;border-left:3px solid #c0862b;background:#fdf6ea}
.decision{margin:2px 0 6px}
.compcov{margin:4px 0 6px;padding-left:18px}
.compthin{color:#8a5a12}
.complayers{display:flex;flex-wrap:wrap;gap:4px;margin:4px 0}
.lchip{font-size:11.5px;border-radius:999px;padding:2px 8px;border:1px solid var(--line);background:#fff}
.lchip.ls-included{background:#e3efdc;border-color:#9cbf73}.lchip.ls-yours{background:#f0e6f4;border-color:#b79cc4}.lchip.ls-not-here{background:#f1f1f1;color:#777}.lchip.ls-optional{background:#fff7e0;border-color:#e7cf8e}
/* whole-property functions (Oct 27) */
.pfbox{border-top:1px solid var(--line);margin-top:10px;padding-top:6px}
.pflist{list-style:none;padding:0;margin:4px 0}
.pfrow{padding:5px 0;border-bottom:1px dashed var(--line)}
.pfrow small{display:block;margin-top:2px}
.pf-missing b{color:#8a5a12}
/* water and living systems (waterweb.js, Oct 26): connections, each saying what kind of thing it is */
.wwbox{border:1px solid var(--line);border-radius:9px;padding:6px 10px;margin:8px 0;background:#f8fbfd}
.wwlist{list-style:none;padding:0;margin:4px 0}
.wwrow{padding:6px 0;border-bottom:1px dashed var(--line)}.wwrow:last-child{border-bottom:0}
.wwrow p{margin:3px 0}
.wwchip{display:inline-block;font-size:11px;line-height:1.4;padding:0 6px;border-radius:9px;border:1px solid #c9c2b4;background:#f6f3ec;color:#4d473d;white-space:nowrap;vertical-align:1px}
.ww-existing{background:#e5f2e8;border-color:#7fb08c;color:#245c35}.ww-potential{background:#eef4e2;border-color:#a8c27a;color:#46601c}
.ww-concern{background:#fbeee0;border-color:#d9a066;color:#7a4410}.ww-fits{background:#e5f2e8;border-color:#7fb08c;color:#245c35}
.ww-unknown{background:#f1efea;border-color:#c9c2b4;color:#5e574b}.ww-planned{background:#e6eef7;border-color:#8eaed0;color:#284c73}.ww-observed{background:#e5f2e8;border-color:#4f8f60;color:#1f4f2c}
.pfw{display:block;margin-top:2px}
/* after a reload (Oct 27): connections from the saved land reading, not current; and the whole-slope context */
.wwsaved{background:#faf8f3;border-style:dashed}.ww-saved{background:#f4f1ea;border-color:#b9ae98;color:#5e5446;border-style:dashed}.wws-saved p{color:#5e574b}
.wwctx{margin:4px 0 6px}.pfw-ctx,.pfw-saved{color:#5e574b}
/* microclimate and habitat (Oct 27): same rows as water; observations that disagree, and whole-land context */
.ww-conflicting{background:#f3e8f5;border-color:#a77bb5;color:#5a2d6b}.ww-context{background:#eef1f4;border-color:#a9b4bf;color:#3f4a55}
.hbbox{background:#f8fbf5}.mcbox{background:#fbfaf3}.mcshade{background:#f7f7fb}.pfh,.pfm{color:#3f3a33}
/* phone: each card is a bottom sheet with three heights, peek, half and full (app.js setSheet; Oct 31, the map first) */
.sheetbar{display:none}
@media (max-width:700px){
  .sheetbar{display:flex;align-items:center;gap:6px;position:sticky;top:-18px;z-index:3;margin:-18px -18px 6px -18px;padding:6px 54px 6px 10px;background:var(--paper);border-bottom:1px solid var(--line);min-height:48px}
  .panel > .close{position:sticky;top:-10px;float:right;margin:-8px -8px -40px 0;z-index:5}
  .sheetgrip{flex:none;width:44px;height:36px;border:none;background:transparent;padding:0;cursor:grab;touch-action:none;display:grid;place-items:center}
  .sheetgrip span{display:block;width:34px;height:5px;border-radius:3px;background:#b9c3b4}
  .sheettitle{flex:1;min-width:0;font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;visibility:hidden}
  .panel[data-sheet="peek"] .sheettitle{visibility:visible}
  .panel[data-sheet="peek"] [data-sheet-to="half"]{display:none}   /* folded: the title gets the room; Details and the grip open it again */
  .sheetbtn{flex:none;border:1px solid var(--line);border-radius:999px;background:#fff;font:inherit;font-size:13px;padding:6px 11px;min-height:34px;color:var(--ink,#222)}
  .panel[data-sheet="half"]{max-height:46vh;min-height:0}
  .panel[data-sheet="peek"]{min-height:0;max-height:62px;overflow:hidden}
  .panel[data-sheet="peek"] > :not(.sheetbar):not(.close){visibility:hidden}
  .panel.detail[data-sheet="half"]{max-height:50vh}
  body.sheet-open #mapTools{display:none}
  /* while a card is open, the top bar keeps only the four ways of working: the map gets the room (the rest returns at Map ▾) */
  body.sheet-open .bar.top > .brand, body.sheet-open #projName, body.sheet-open #btnSaveFile, body.sheet-open .bar.top .topright{display:none}
  /* a detail card covers the card it came from: one sheet at a time (its ← goes back) */
  body.has-detail #panel:not(.detail){visibility:hidden}
}

/* Grow & Evolve (grow.js, Oct 28): the field notebook, a planting's life, reassessments */
.walkbox{background:#f1f6ee;border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin:10px 0}
.walkbox h3{margin:0 0 4px}
.walkbox .actions button{min-height:44px}
.walkbox button:disabled{opacity:.5}
.glist{list-style:none;padding:0;margin:6px 0}
.glist li{padding:6px 0;border-bottom:1px solid var(--line);font-size:14px;line-height:1.4}
.glist li small{color:var(--soft)}
.gmore{margin:10px 0}
.gmore summary{cursor:pointer;font-weight:600;padding:6px 0}
.ghist{padding-left:18px;margin:6px 0;font-size:13.5px}
.ghist li{padding:3px 0}
.ghist small{color:var(--soft)}
.gchips{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.gchip{font:inherit;font-size:15px;min-height:44px;padding:8px 14px;border:1px solid var(--line);background:#fff;border-radius:12px;cursor:pointer;color:var(--ink)}
.gchip.small{font-size:13.5px;min-height:38px;padding:6px 11px}
.gchip.on{background:var(--accent);border-color:var(--accent);color:#fff}
/* a plant only suggested by nearness: outlined, not filled, until you confirm it (Oct 28) */
.gchip.on.sugg{background:#fff;color:var(--ink);border:2px dashed var(--accent)}
.gchip small{opacity:.8}
.gnear{margin:10px 0}
.gnear h3{margin:0 0 2px}
.gask{background:#fff7e0;border:1px solid #e8c868;border-radius:12px;padding:8px 12px;margin:10px 0}
.gask p{margin:0 0 6px}
.gask .actions button{min-height:44px}
.gstages{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.gtable{width:100%;border-collapse:collapse;font-size:13.5px;margin:6px 0}
.gtable th,.gtable td{text-align:left;padding:4px 6px;border-bottom:1px solid var(--line)}
.gtable th{font-weight:600;color:var(--soft)}
.gopt.chosen{background:#eef6ea}
.gdraft{border:1px dashed var(--line);border-radius:10px;padding:8px 10px;margin:6px 0}
/* the location chip is part of the top bar, so it takes its own place there and never covers a tab (Oct 28) */
.walkchip{background:#1a73e8;color:#fff;border:none;border-radius:999px;padding:7px 13px;font-size:13.5px;font-weight:600;box-shadow:0 1px 5px rgba(0,0,0,.3);white-space:nowrap}
@media (max-width:700px){
  .bar.top .walkchip{order:10;margin:0 auto;font-size:12.5px;padding:6px 12px}
  /* drawing on a phone: the toolbars step aside and the card sits at the very top; the location chip stays in sight */
  body.drawing .bar.top,body.drawing .bar.bottom,body.drawing .side{visibility:hidden}
  body.drawing .drawhint{top:calc(8px + env(safe-area-inset-top,0px))}
  body.drawing .bar.top .walkchip{visibility:visible;position:fixed;top:auto;bottom:calc(14px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);z-index:12}
}
.gsave{position:sticky;bottom:0;background:var(--paper);padding:8px 0;margin-bottom:0;z-index:2;box-shadow:0 -6px 8px -6px rgba(0,0,0,.15)}

/* ---------------- the design partner (partner.js, Oct 28) ---------------- */
.pentry{border-top:1px solid var(--line);margin-top:10px;padding-top:8px}
.pnote{background:#eef4fb;border:1px solid #c5d8ef;border-radius:10px;padding:8px 10px}
.pbrief{font-size:13.5px;color:var(--soft)}
.pbq{margin:8px 0}
.pbql{margin:0 0 2px;font-weight:600;font-size:14px}
.ptabs{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.ptab{font:inherit;font-size:14px;min-height:44px;padding:8px 12px;border:1px solid var(--line);background:#fff;border-radius:12px;cursor:pointer;color:var(--ink);text-align:left}
.ptab.on{background:var(--accent);border-color:var(--accent);color:#fff}
.popt h3{margin:14px 0 4px;font-size:15px}
.pintent{font-size:15px;line-height:1.45}
.pfn{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:3px 10px;font-size:13px;background:#fff}
.pfn.em{border-color:var(--accent);background:#eef6ea}
.pfn small{color:var(--soft)}
.ppill{display:inline-block;border-radius:999px;padding:1px 8px;font-size:12px;font-weight:600;vertical-align:1px}
.pp-ok{background:#e3f1e0;color:#2d6a2d}
.pp-concern{background:#fdebd3;color:#8a4b00}
.pp-unknown{background:#ececec;color:#555}
.pp-info{background:#e7eef8;color:#2c4f7c}
.pp-later{background:#f1e8f7;color:#6b3f86}
.pdeep{margin:4px 0 2px}
.pdeep summary{font-size:13px;color:var(--soft);cursor:pointer}
.ppath .pstep{padding:8px 0;border-bottom:1px solid var(--line)}
.pstep.ps-done b{text-decoration:line-through;text-decoration-color:#7a9a7a}
.pstep.ps-deferred,.pstep.ps-reconsidered{opacity:.8}
.gpath h3{margin:0 0 4px}
@media (max-width:700px){.ptab{flex:1 1 100%}}
.partnercard .glist .linkish{text-align:left}

/* ---------------- ground truth (ground.js, Oct 28) ---------------- */
.psteps{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 10px}
.pstepb{font:inherit;font-size:12.5px;padding:5px 9px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);cursor:pointer;min-height:32px}
.pstepb.on{background:var(--accent);border-color:var(--accent);color:#fff}
.gsw{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-1px;border:1px solid rgba(0,0,0,.2)}
.gsum{background:#f4f7f2;border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.gdecide li{padding:8px 0}
.gchip.dc-stay.on{background:#1b8a3a;border-color:#1b8a3a}
.gchip.dc-change.on{background:#e07b00;border-color:#e07b00}
.gchip.dc-restore.on{background:#00897b;border-color:#00897b}
.gchip.dc-unsure.on{background:#757575;border-color:#757575}
.pconsent{display:flex;gap:8px;align-items:flex-start;background:#fff4e5;border:1px solid #f0c78a;border-radius:10px;padding:8px 10px;margin:8px 0;font-size:14px}
.pconsent input{margin-top:3px;min-width:18px;min-height:18px}
.pcomm{border-left:3px solid var(--line);padding-left:8px;margin:6px 0}
.pcomm p{margin:2px 0}
@media (max-width:700px){.pstepb{flex:1 1 45%}}
/* perception: tap, outline, ask (perceive.js) */
.perchint{position:fixed;top:calc(64px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);z-index:40;max-width:min(560px,calc(100vw - 32px));background:#1f2b25;color:#fff;border-radius:12px;padding:10px 14px;font-size:15px;box-shadow:0 4px 18px rgba(0,0,0,.3);display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.perchint .chip{background:#fff;color:#1f2b25}
.pcinvite{border:1px solid #f0c78a;background:#fff8ec;border-radius:10px;padding:10px 12px;margin:8px 0 12px}
.pcinvite .actions{margin:6px 0}
dl.pcev{margin:8px 0 10px;display:grid;grid-template-columns:minmax(110px,32%) 1fr;gap:6px 10px;font-size:14px}
dl.pcev dt{font-weight:600;color:var(--soft)}
dl.pcev dd{margin:0}
@media (max-width:700px){dl.pcev{grid-template-columns:1fr}dl.pcev dd{margin-bottom:4px}}
ol.pcqs{padding-left:20px}
ol.pcqs li.pcq{margin:0 0 14px}
.pcafter{background:#e7f3ea;border-radius:8px;padding:8px 10px;font-size:14px}
ul.pcmatch li{margin:4px 0}
body.mappick .maplibregl-marker{pointer-events:none}
/* the first reading (firstread.js) */
ol.frlist{list-style:none;padding:0;margin:8px 0}
li.fritem{display:flex;gap:10px;align-items:flex-start;margin:0 0 12px}
li.fritem p{margin:2px 0}
.frnum,.frpin{min-width:28px;height:28px;border-radius:14px;border:2px solid #fff;background:#e65100;color:#fff;font-weight:700;font-size:14px;line-height:24px;text-align:center;padding:0 6px;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.4)}
.frwhy{color:#8a4b00;font-weight:600}
/* How has this land changed? (timemachine.js) and Your walk (fieldwork.js) */
.tmnum,.tmpin{background:#d84315}
.fwnum,.fwpin{background:#1565c0}
.fwpin.on{outline:3px solid #ffd54f}
/* one set of numbers on the map at a time: the card open says which */
.tmpin,.fwpin{display:none}
body:has(.tmcard) .tmpin,body:has(.fwcard) .fwpin{display:block}
body:has(.tmcard) .frpin:not(.tmpin),body:has(.fwcard) .frpin:not(.fwpin){display:none}
.warn{color:#8a4b00;background:#fff4e0;border-left:3px solid #e69500;padding:6px 8px;border-radius:4px}
/* Stewardship pathways (steward.js) */
.stewcard .swpaths li{margin-bottom:8px}
.stewcard .swev{border-top:1px solid #e0e0e0;padding-top:6px;margin-top:6px}
.stewcard .draftnote{margin:6px 0}
/* evidence-guided alternatives (alternatives.js, Oct 29) */
.altopt{border:1px solid #d6e3cf;border-radius:10px;padding:8px 10px;margin:10px 0;background:#fbfdf9}
.altopt h3{margin:2px 0 4px}
.altopt .glist ul{margin:4px 0;padding-left:18px}
.altentry{border-bottom:1px solid #e3e8df;margin-bottom:8px;padding-bottom:6px}
/* adjusting an alternative (refine.js, Oct 30) */
.reflegend{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12px;margin:6px 0 8px;color:#3b4a35}
.reflegend span{display:inline-flex;align-items:center;gap:4px}
.reflegend .sw{display:inline-block;width:14px;height:14px;border-radius:50%;background:#8bc34a;box-sizing:border-box}
.reflegend .sw-kept{border:1px solid #1b3d12}
.reflegend .sw-added{border:2.5px solid #fff;box-shadow:0 0 0 1px #777}
.reflegend .sw-replaced{border:2.5px solid #ff9800}
.reflegend .sw-yours{border:2.5px solid #1e88e5}
.reflegend .sw-gone{background:transparent;border:2px dashed #d32f2f}
.refrows>li{margin:6px 0;padding-bottom:6px;border-bottom:1px solid #edf1ea}
.refrows .actions{margin:4px 0}
.refswap select{max-width:100%}
.refnow{background:#eef6e9;border-left:3px solid #4c8a3b;border-radius:4px;padding:6px 8px;margin:6px 0 8px;font-size:13px}
.refrows .actions{display:inline-flex}
/* beta identity, version and problem reports (Nov 1, beta B-08, B-09) */
.mver{font-size:12px;color:#5b6b60;padding:8px 14px 4px;border-top:1px solid #e3e8e2;margin-top:4px}
.ptw{font-size:14px;margin:4px 0 10px;color:#2f3d33}
.ptw .betaword{display:block;font-size:13px;color:#5b6b60;margin-top:3px}
.rppre{white-space:pre-wrap;font-size:12px;background:#f4f6f2;padding:8px;border-radius:6px;max-height:220px;overflow:auto}