/* ============================================================
   Le Jardin Vivant — tool styles, mapped onto the brand palette.
   Class names match the render code in garden.js.
   ============================================================ */
:root{
  /* tool tokens, drawn from the Locus Iste Mundi brand */
  --leaf:#5E6B38;        /* olive-deep — primary action */
  --leaf2:#6f7d45;
  --sprout:#8C9A5B;      /* olive */
  --soil:#8b5e3c;
  --paperT:#F1EDE2;      /* brand paper */
  --paper2:#DED9C7;      /* brand stone-2 */
  --lineT:rgba(38,35,24,.14);
  --amber:#D8A52C;       /* citron */
  --mutedT:#5C5746;      /* ink-soft */
  --danger:#B65C3A;      /* clay */
  --cardT:#FFFDF8;
  --mono:'Space Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --rT:14px;
  --shadowT:0 1px 2px rgba(27,42,34,.06),0 8px 24px rgba(27,42,34,.10);
}
html,body{margin:0;height:100%}
body{background:var(--paperT);color:var(--ink);overflow:hidden;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font-family:var(--body);font-size:15px;color:var(--ink)}
.mono{font-family:var(--mono)}
.hidden{display:none !important}

/* shell */
#app{display:flex;flex-direction:column;height:100%}
.topbar{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--ground);color:var(--on-dark);z-index:30;flex:0 0 auto;}
.mark{width:32px;height:32px;border-radius:9px;background:var(--leaf);display:grid;place-items:center;flex:0 0 auto}
.mark svg{width:18px;height:18px}
.brand{display:flex;flex-direction:column;line-height:1.05}
.brand b{font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:.2px}
.brand span{font-family:var(--display);font-size:10px;color:var(--on-dark-muted);letter-spacing:1.4px;text-transform:uppercase}
.topbar .right{margin-left:auto;display:flex;gap:8px;align-items:center}
.topbar .home{font-family:var(--display);font-weight:600;font-size:.78rem;color:var(--on-dark-muted);text-decoration:none;border:1px solid var(--line-dark);border-radius:999px;padding:6px 12px;white-space:nowrap}
.topbar .home:hover{color:var(--on-dark);}
.pill{font-size:11px;color:var(--on-dark-muted);font-family:var(--mono);border:1px solid var(--line-dark);border-radius:999px;padding:4px 10px;white-space:nowrap}

main{position:relative;flex:1 1 auto;min-height:0}
.view{position:absolute;inset:0;overflow:auto;-webkit-overflow-scrolling:touch}
.view.scroll{padding:18px 16px 96px}

/* map */
#map{position:absolute;inset:0;background:#cfd9cd}
.map-empty{position:absolute;inset:0;display:grid;place-items:center;z-index:500;background:rgba(241,237,226,.80);backdrop-filter:blur(2px);pointer-events:none;}
.map-empty .box{pointer-events:auto;text-align:center;max-width:320px;padding:26px;background:var(--cardT);border:1px solid var(--lineT);border-radius:var(--rT);box-shadow:var(--shadowT)}
.map-empty h2{font-family:var(--serif);margin:8px 0 6px;font-size:22px}
.map-empty p{margin:0 0 16px;color:var(--mutedT);font-size:14px;line-height:1.5}

.fab{position:absolute;right:16px;bottom:20px;z-index:600;display:flex;align-items:center;gap:9px;background:var(--leaf);color:#fff;padding:14px 18px;border-radius:999px;font-family:var(--display);font-weight:600;font-size:15px;box-shadow:0 6px 20px rgba(47,67,40,.45)}
.fab svg{width:20px;height:20px}
.fab:active{transform:scale(.97)}

.place-banner{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:650;background:var(--ground);color:#fff;padding:10px 14px;border-radius:999px;font-size:13px;display:flex;gap:14px;align-items:center;box-shadow:var(--shadowT);white-space:nowrap}
.place-banner button{color:var(--sprout);font-weight:700;font-size:13px}

/* leaflet pin */
.pin{width:30px;height:38px;position:relative}
.pin .body{position:absolute;left:50%;top:0;width:26px;height:26px;margin-left:-13px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);border:2.5px solid #fff;box-shadow:0 2px 5px rgba(0,0,0,.35)}
.pin .dot{position:absolute;left:50%;top:8px;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:#fff}

/* section heads */
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--leaf);margin:0 0 4px}
.h1{font-family:var(--serif);font-weight:600;font-size:26px;margin:0 0 4px;line-height:1.1}
.sub{color:var(--mutedT);font-size:14px;margin:0 0 18px;line-height:1.5}

/* specimen card */
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.spec{background:var(--cardT);border:1px solid var(--lineT);border-radius:var(--rT);overflow:hidden;box-shadow:var(--shadowT);display:flex;flex-direction:column;text-align:left;width:100%}
.spec:active{transform:translateY(1px)}
.spec .thumb{aspect-ratio:4/3;background:var(--paper2);position:relative;overflow:hidden}
.spec .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.spec .thumb .none{position:absolute;inset:0;display:grid;place-items:center;color:#b3ab97;font-size:13px}
.spec .chip{position:absolute;top:8px;left:8px;font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.5px;background:rgba(38,48,31,.85);color:#fff;padding:3px 7px;border-radius:6px}
.spec .body{padding:12px 13px 13px}
.spec h3{font-family:var(--serif);font-weight:600;font-size:18px;margin:0;line-height:1.15}
.spec .sci{font-style:italic;color:var(--mutedT);font-size:13px;margin:1px 0 8px}
.spec .data{font-family:var(--mono);font-size:11px;color:#4a564d;line-height:1.7;border-top:1px dashed var(--lineT);padding-top:8px}
.spec .data .row{display:flex;justify-content:space-between;gap:8px}
.spec .data .k{color:#9a9078}
.beddot{display:inline-block;width:9px;height:9px;border-radius:50%;vertical-align:middle;margin-right:5px}

.empty{border:1px dashed var(--lineT);border-radius:var(--rT);padding:34px 20px;text-align:center;color:var(--mutedT);background:var(--cardT)}

/* tabbar */
.tabbar{flex:0 0 auto;display:flex;background:var(--cardT);border-top:1px solid var(--lineT);padding:6px 6px calc(6px + env(safe-area-inset-bottom));z-index:30}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 2px;color:var(--mutedT);font-family:var(--display);font-size:10.5px;font-weight:600;letter-spacing:.2px;border-radius:10px}
.tab svg{width:21px;height:21px;stroke-width:1.9}
.tab.active{color:var(--leaf)}
.tab.active svg{stroke:var(--leaf)}

/* modal */
.modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:flex-end;justify-content:center}
.modal .scrim{position:absolute;inset:0;background:rgba(20,24,16,.5)}
.sheet{position:relative;width:100%;max-width:620px;max-height:94vh;background:var(--paperT);border-radius:20px 20px 0 0;overflow:auto;box-shadow:0 -10px 40px rgba(0,0,0,.3);animation:rise .25s ease}
@keyframes rise{from{transform:translateY(24px);opacity:.4}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.sheet{animation:none}}
.sheet .handle{width:40px;height:4px;background:var(--lineT);border-radius:99px;margin:9px auto 2px}
.sheet-head{display:flex;align-items:center;gap:10px;padding:8px 16px 12px;position:sticky;top:0;background:var(--paperT);z-index:5;border-bottom:1px solid var(--lineT)}
.sheet-head .t{font-family:var(--serif);font-weight:600;font-size:20px}
.sheet-head .x{margin-left:auto;width:34px;height:34px;border-radius:50%;background:var(--paper2);display:grid;place-items:center;font-size:18px;color:var(--ink)}
.sheet-pad{padding:16px}

.field{margin-bottom:14px}
.field label{display:block;font-size:12px;font-weight:600;color:#4a564d;margin-bottom:5px;letter-spacing:.2px}
.field input,.field select,.field textarea{width:100%;padding:11px 12px;border:1px solid var(--lineT);border-radius:10px;background:#fff}
.field textarea{resize:vertical;min-height:64px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.three{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}

.btn-t{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 16px;border-radius:12px;font-family:var(--display);font-weight:600;font-size:15px;width:100%}
.btn-t svg{width:18px;height:18px}
.btn-t.primary{background:var(--leaf);color:#fff}
.btn-t.dark{background:var(--ground);color:#fff}
.btn-t.ghost{background:var(--paper2);color:var(--ink)}
.btn-t.danger{background:#f4e5e1;color:var(--danger)}
.btn-t:active{transform:translateY(1px)}
.btn-t[disabled]{opacity:.5;pointer-events:none}
.btnrow{display:flex;gap:10px}

.drop{border:1.5px dashed var(--lineT);border-radius:var(--rT);padding:26px 18px;text-align:center;background:#fff;color:var(--mutedT)}
.preview{position:relative;border-radius:var(--rT);overflow:hidden;background:#000;aspect-ratio:4/3}
.preview img{width:100%;height:100%;object-fit:contain;display:block}
.preview .re{position:absolute;bottom:10px;right:10px;background:rgba(0,0,0,.6);color:#fff;padding:8px 12px;border-radius:10px;font-size:13px;font-weight:600}

.gps{font-family:var(--mono);font-size:12px;background:#fff;border:1px solid var(--lineT);border-radius:10px;padding:10px 12px;line-height:1.7}
.gps .ok{color:var(--leaf)} .gps .warn{color:var(--amber)}

.info-card{background:#fff;border:1px solid var(--lineT);border-radius:var(--rT);padding:14px;margin-bottom:14px}
.info-card .name{font-family:var(--serif);font-weight:600;font-size:22px;line-height:1.1}
.info-card .sci{font-style:italic;color:var(--mutedT);margin:1px 0 10px}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.tag{font-size:11px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.5px;background:var(--paper2);color:#4a564d;padding:4px 8px;border-radius:7px}
.tag.edible{background:#e7f1e3;color:#2f6b4f}
.tag.amber{background:#f6ecd4;color:#8a6a1f}
.care{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.care div{font-size:12.5px;line-height:1.45}
.care .k{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:#9a9078;display:block}
.desc{font-size:13.5px;line-height:1.55;color:#3a463d;margin-top:10px}

.label-block{background:var(--ground);color:#e9efe9;border-radius:var(--rT);padding:14px 16px;margin-bottom:14px;font-family:var(--mono);font-size:12px;line-height:1.85}
.label-block .row{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid #2e3d34;padding:2px 0}
.label-block .row:last-child{border-bottom:none}
.label-block .k{color:#8fa896}

/* filmstrip */
.strip{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 10px;-webkit-overflow-scrolling:touch}
.frame{flex:0 0 132px;width:132px}
.frame .img{aspect-ratio:3/4;border-radius:10px;overflow:hidden;background:var(--paper2);position:relative;border:1px solid var(--lineT)}
.frame .img img{width:100%;height:100%;object-fit:cover;display:block}
.frame .seas{position:absolute;top:6px;left:6px;font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.5px;background:rgba(38,48,31,.82);color:#fff;padding:2px 6px;border-radius:5px}
.frame .harv{position:absolute;bottom:6px;left:6px;font-family:var(--mono);font-size:9px;background:var(--amber);color:#2a1f06;padding:2px 6px;border-radius:5px;font-weight:700}
.frame .cap{font-family:var(--mono);font-size:10.5px;color:#5a665c;margin-top:5px;line-height:1.4}
.frame .note{font-size:11.5px;color:#3a463d;margin-top:2px;line-height:1.35}

.section-t{font-family:var(--serif);font-weight:600;font-size:17px;margin:18px 0 8px;display:flex;align-items:center;gap:8px}
.section-t .ct{font-family:var(--mono);font-size:11px;color:var(--mutedT);font-weight:400}

/* harvest */
.hrow{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--lineT);font-size:13.5px}
.hrow .d{font-family:var(--mono);font-size:11px;color:var(--mutedT);width:84px;flex:0 0 auto}
.hrow .q{font-weight:600}
.hrow .v{margin-left:auto;font-family:var(--mono);color:var(--leaf);font-weight:700}
.price-set{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:end;background:#fff;border:1px solid var(--lineT);border-radius:10px;padding:10px 12px;margin:8px 0}

/* calendar */
.cal-group{margin-bottom:8px}
.cal-month{font-family:var(--mono);font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--mutedT);position:sticky;top:0;background:var(--paperT);padding:8px 0 6px;display:flex;justify-content:space-between}
.cal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:8px;margin-bottom:6px}
.cal-cell{aspect-ratio:1;border-radius:10px;overflow:hidden;position:relative;background:var(--paper2);border:1px solid var(--lineT)}
.cal-cell img{width:100%;height:100%;object-fit:cover}
.cal-cell .lab{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(transparent,rgba(0,0,0,.7));color:#fff;font-size:9px;padding:10px 5px 4px;line-height:1.1;font-weight:600}
.cal-cell .day{position:absolute;top:4px;left:5px;font-family:var(--mono);font-size:9px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.8)}

/* yield */
.stat-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.stat{background:var(--cardT);border:1px solid var(--lineT);border-radius:var(--rT);padding:14px;box-shadow:var(--shadowT)}
.stat .n{font-family:var(--serif);font-weight:600;font-size:28px;line-height:1}
.stat .n small{font-size:14px;color:var(--mutedT);font-weight:400}
.stat .l{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--mutedT);margin-top:6px}
.bar{display:flex;align-items:center;gap:10px;margin:9px 0}
.bar .nm{width:108px;flex:0 0 auto;font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar .track{flex:1;height:18px;background:var(--paper2);border-radius:6px;overflow:hidden}
.bar .fill{height:100%;background:linear-gradient(90deg,var(--leaf),var(--sprout));border-radius:6px}
.bar .fill.amber{background:linear-gradient(90deg,var(--soil),var(--amber))}
.bar .vv{font-family:var(--mono);font-size:11px;color:#4a564d;width:74px;text-align:right;flex:0 0 auto}

.note-box{background:#fbf6e9;border:1px solid #ecdcae;border-radius:12px;padding:12px 14px;font-size:12.5px;color:#6b5a2a;line-height:1.5;margin-bottom:16px}

.toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.toolbar button{background:var(--cardT);border:1px solid var(--lineT);border-radius:10px;padding:9px 12px;font-family:var(--display);font-size:12.5px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:6px}
.toolbar button svg{width:15px;height:15px}
.search{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--lineT);border-radius:12px;padding:0 12px;margin-bottom:14px}
.search input{border:none;padding:12px 0;flex:1;background:transparent}
.search svg{width:17px;height:17px;color:var(--mutedT);flex:0 0 auto}

.lightbox{position:fixed;inset:0;z-index:1200;background:rgba(0,0,0,.92);display:grid;place-items:center;padding:20px}
.lightbox img{max-width:100%;max-height:88vh;border-radius:8px}
.lightbox .x{position:absolute;top:16px;right:18px;color:#fff;font-size:30px}

.toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%);z-index:1300;background:var(--ground);color:#fff;padding:11px 18px;border-radius:999px;font-size:13.5px;box-shadow:var(--shadowT);opacity:0;transition:opacity .2s, transform .2s}
.toast.show{opacity:1;transform:translateX(-50%) translateY(-4px)}

.loading-dots span{display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor;margin:0 2px;animation:bln 1s infinite}
.loading-dots span:nth-child(2){animation-delay:.15s}.loading-dots span:nth-child(3){animation-delay:.3s}
@keyframes bln{0%,60%,100%{opacity:.25}30%{opacity:1}}

.ai-note{font-size:11.5px;color:var(--mutedT);line-height:1.5;margin-top:8px}
.ai-note a{color:var(--leaf);font-weight:600}

/* desktop */
@media (min-width:880px){
  #app{flex-direction:row}
  .topbar{flex-direction:column;width:236px;height:100%;align-items:flex-start;padding:18px 16px;gap:18px;background:var(--ground)}
  .topbar .right{margin-left:0;margin-top:auto;flex-direction:column;align-items:flex-start;width:100%;gap:10px}
  .pill,.topbar .home{width:100%;text-align:center}
  .tabbar{order:-1;flex-direction:column;width:100%;border-top:none;background:transparent;padding:0;gap:4px}
  .tab{flex-direction:row;justify-content:flex-start;gap:12px;font-size:14px;padding:11px 12px;border-radius:10px}
  .tab svg{width:20px;height:20px}
  .tab.active{background:rgba(140,154,91,.18)}
  .tab.active,.tab.active svg{color:var(--on-dark);stroke:var(--sprout)}
  main{flex:1}
  .view.scroll{padding:28px 32px 40px;max-width:1100px}
  .fab{bottom:24px;right:24px}
}
@media (min-width:560px){
  .modal{align-items:center;padding:20px}
  .sheet{border-radius:20px;max-height:90vh}
}

/* phone / tablet header: wrap the tabs onto their own row so the
   language switch and home link always stay on screen */
@media (max-width:879px){
  .topbar{flex-wrap:wrap;gap:8px 10px;padding:10px 12px}
  .brand span{display:none}
  .topbar > div:first-child{flex:1 1 auto;min-width:0}
  .topbar .right{order:2;flex:0 0 auto;gap:8px;align-items:center}
  .pill{display:none}
  .tabbar{order:3;flex:1 1 100%;justify-content:space-around;background:transparent;border-top:1px solid var(--line-dark);padding:8px 0 0;margin-top:2px}
  .tab{color:var(--on-dark-muted)}
  .tab.active{color:var(--citron)}
  .tab.active svg{stroke:var(--citron)}
}