/* Get Good Dirt square foot planner (/planner). Matches the UI mockup. */

@font-face{font-family:'Fraunces';font-weight:100 900;font-style:normal;font-display:swap;
  src:url('/static/fonts/fraunces-var.woff2') format('woff2');}
@font-face{font-family:'DM Sans';font-weight:100 1000;font-style:normal;font-display:swap;
  src:url('/static/fonts/dmsans-var.woff2') format('woff2');}

:root{
  --soil:#3B2F2A; --leaf:#4A7C59; --sage:#A8C5A0; --terra:#C2714F;
  --sun:#E5A94E; --cream:#F7F3EC; --stone:#8B8178;
  --bg:#F2EDE2; --panel:#FBF8F2; --line:rgba(59,47,42,.12);
  --wood:#4A3A2F; --wood2:#3E3027; --cell-empty:#B9AE9E; --cell-plant:#FFFDF8;
  --cellmin:64px; /* minimum grid cell width; grid scrolls horizontally rather than squishing below this */
  --leaf-tint:#EAF1E7; --terra-tint:#F7E7DF; --sun-tint:#FBEBCB; --blue-tint:#E3EEF2;
  --shadow:0 10px 30px rgba(59,47,42,.08); --shadow-lg:0 24px 60px rgba(59,47,42,.22);
  --ok:#4A7C59; --bad:#C2714F; --antag:#C25450;
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;}
body{font-family:'DM Sans',system-ui,sans-serif;color:var(--soil);background:var(--bg);
  line-height:1.45;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
.fr{font-family:'Fraunces',Georgia,serif;font-variation-settings:'opsz' 144;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
a{text-decoration:none;color:inherit;}
input,textarea{font-family:inherit;}
img{display:block;max-width:100%;}
.lbl{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--stone);font-weight:700;}

/* ---------------- app shell ---------------- */
.planner{display:flex;flex-direction:column;min-height:100vh;padding-bottom:70px;}
.topbar{background:var(--panel);border-bottom:1px solid var(--line);box-shadow:var(--shadow);
  position:sticky;top:0;z-index:30;}
.topbar-in{display:flex;align-items:center;gap:26px;padding:16px 26px;flex-wrap:wrap;}
.brand{display:flex;align-items:center;gap:11px;flex:none;}
.brand img{width:34px;height:34px;}
.brand b{font-family:'Fraunces',serif;font-weight:800;font-size:19px;color:var(--soil);letter-spacing:-.01em;}
.tb-field{display:flex;flex-direction:column;gap:5px;}
.bedname{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:9px 12px;min-width:220px;box-shadow:var(--shadow);}
.bedname input{border:none;outline:none;background:transparent;font-size:17px;font-weight:600;
  color:var(--soil);width:100%;}
.bedname input::placeholder{color:var(--stone);font-weight:400;font-style:italic;opacity:1;}
.bedname .pen{color:var(--stone);flex:none;}
.seg{display:inline-flex;background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:4px;gap:2px;box-shadow:var(--shadow);}
.seg button{padding:8px 14px;border-radius:9px;font-size:14px;font-weight:600;color:var(--soil);}
.seg button.on{background:var(--leaf);color:#fff;}
.orient{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:8px 14px;box-shadow:var(--shadow);cursor:pointer;}
.orient .rose{width:34px;height:34px;flex:none;}
.orient .ot b{font-size:14px;font-weight:700;color:var(--soil);}
.orient .ot span{display:block;font-size:12px;color:var(--stone);}
.zone-badge{margin-left:auto;display:inline-flex;align-items:center;gap:9px;background:var(--leaf-tint);
  border:1px solid var(--sage);border-radius:999px;padding:10px 18px;font-size:14px;font-weight:600;
  color:var(--leaf);cursor:pointer;flex:none;}
.zone-badge svg{opacity:.8;}

/* ---------------- bed switcher ---------------- */
.bedbar{background:var(--panel);border-bottom:1px solid var(--line);padding:9px 26px;
  display:flex;gap:8px;align-items:center;overflow-x:auto;}
.bedtabs{display:flex;gap:8px;align-items:center;}
.bedtab{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line);background:#fff;
  border-radius:10px;padding:8px 15px;font-size:14px;font-weight:600;color:var(--soil);white-space:nowrap;}
.bedtab:hover{border-color:var(--sage);}
.bedtab.on{background:var(--leaf);color:#fff;border-color:var(--leaf);}
.bedtab .del{opacity:.65;font-size:16px;line-height:1;margin-right:-4px;}
.bedtab .del:hover{opacity:1;}
.newbed{border:1.5px dashed var(--sage);border-radius:10px;padding:8px 15px;font-size:14px;
  font-weight:700;color:var(--leaf);white-space:nowrap;}
.newbed:hover{background:var(--leaf-tint);}

/* ---------------- stage ---------------- */
.stage{display:grid;grid-template-columns:minmax(0,1fr) 348px;gap:0;flex:1;align-items:stretch;}
.board{padding:24px 26px 30px;min-width:0;}
.board-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:18px;}
.board-head h1{font-family:'Fraunces',serif;font-weight:700;font-size:27px;color:var(--soil);}
.board-head .sub{font-size:14px;color:var(--stone);}
.board-tools{margin-left:auto;display:flex;gap:10px;}
.toggle{display:inline-flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);
  border-radius:11px;padding:9px 14px;font-size:14px;font-weight:600;color:var(--soil);box-shadow:var(--shadow);}
.sw{width:38px;height:22px;border-radius:999px;background:var(--cell-empty);position:relative;transition:background .15s;flex:none;}
.sw::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:left .15s;}
.toggle.on .sw{background:var(--leaf);}
.toggle.on .sw::after{left:18px;}

/* grid */
.gridwrap{display:flex;gap:16px;align-items:flex-start;}
.edge{flex:none;width:64px;display:none;flex-direction:column;align-items:center;}
.edge.show{display:flex;}
.edge .lbl{margin-bottom:8px;text-align:center;line-height:1.2;}
.edge .strip{border:2px dashed var(--sage);border-radius:14px;padding:14px 0;display:flex;
  flex-direction:column;gap:22px;align-items:center;width:52px;}
.edge .strip img{width:26px;height:26px;opacity:.8;}
.edge .cap{font-size:11px;color:var(--stone);text-align:center;margin-top:10px;line-height:1.3;}
.board-main{min-width:0;overflow-x:auto;padding-bottom:6px;}
.colnums{display:grid;gap:8px;margin-bottom:7px;padding-left:0;}
.colnums span{text-align:center;font-size:12px;font-weight:700;color:var(--stone);}
.bed{background:var(--wood);border-radius:16px;padding:11px;display:grid;gap:8px;
  box-shadow:inset 0 2px 8px rgba(0,0,0,.28), var(--shadow);}
.cell{aspect-ratio:1/1;border-radius:10px;background:var(--cell-empty);position:relative;
  display:flex;align-items:center;justify-content:center;cursor:pointer;transition:box-shadow .12s, background .12s;
  min-width:0;}
.cell.filled{background:var(--cell-plant);box-shadow:0 3px 8px rgba(0,0,0,.18);}
.cell:hover{box-shadow:0 0 0 2px var(--sage);}
.cell.sel{box-shadow:0 0 0 3px var(--sun);}
.cell .icons{width:100%;height:100%;padding:12%;display:grid;gap:4%;place-items:center;}
.cell .icons img{width:100%;height:100%;object-fit:contain;}
.cell .rc{position:absolute;top:5px;left:7px;font-size:10px;font-weight:700;color:var(--stone);opacity:0;}
.bed.labels .rc{opacity:.7;}

/* companion border dots: sit in the gap on a shared edge, one per adjacent pair */
.cell .cdot{position:absolute;width:22px;height:22px;z-index:6;padding:0;border:none;background:none;
  display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.cell .cdot::after{content:"";width:12px;height:12px;border-radius:50%;
  border:2px solid var(--cell-plant);box-shadow:0 1px 3px rgba(0,0,0,.4);transition:transform .1s;}
.cell .cdot.good::after{background:var(--leaf);}
.cell .cdot.antag::after{background:var(--antag);}
.cell .cdot:hover::after,.cell .cdot:active::after{transform:scale(1.18);}
.cell .cdot:focus-visible{outline:none;}
.cell .cdot:focus-visible::after{box-shadow:0 0 0 3px var(--sun);}
.cell .cdot.e{top:50%;right:-4px;transform:translate(50%,-50%);}
.cell .cdot.s{left:50%;bottom:-4px;transform:translate(-50%,50%);}
.cell .cdot.se{right:-4px;bottom:-4px;transform:translate(50%,50%);}
.cell .cdot.sw{left:-4px;bottom:-4px;transform:translate(-50%,50%);}

/* companion tip bubble (tap or hover a dot) */
.cdot-tip{position:fixed;z-index:80;max-width:min(240px,calc(100vw - 16px));background:var(--soil);
  color:var(--cream);font-size:13px;font-weight:600;line-height:1.35;padding:9px 12px 9px 13px;
  border-radius:10px;border-left:4px solid var(--stone);box-shadow:var(--shadow-lg);pointer-events:none;
  opacity:0;transform:translateY(3px);transition:opacity .12s ease, transform .12s ease;}
.cdot-tip.show{opacity:1;transform:translateY(0);}
.cdot-tip.good{border-left-color:var(--leaf);}
.cdot-tip.antag{border-left-color:var(--antag);}
.cdot-tip::before{content:"";position:absolute;left:var(--ax,50%);bottom:-6px;transform:translateX(-50%);
  border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid var(--soil);}
.cdot-tip.below::before{bottom:auto;top:-6px;border-top:none;border-bottom:6px solid var(--soil);}

.legend{display:flex;gap:22px;margin-top:16px;font-size:13px;color:var(--stone);flex-wrap:wrap;}
.legend span{display:inline-flex;align-items:center;gap:8px;}
.legend i{width:13px;height:13px;border-radius:50%;display:inline-block;}
.legend .lg-good{background:var(--leaf);} .legend .lg-bad{background:var(--antag);}
.legend .lg-sel{background:none;border:2px solid var(--sun);border-radius:5px;width:14px;height:14px;}

/* ---------------- sidebar ---------------- */
.sidebar{background:var(--panel);border-left:1px solid var(--line);padding:22px 22px 20px;
  display:flex;flex-direction:column;min-height:0;}
.sidebar h2{font-family:'Fraunces',serif;font-weight:700;font-size:24px;margin-bottom:14px;}
.search{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);
  border-radius:11px;padding:10px 14px;box-shadow:var(--shadow);}
.search svg{opacity:.5;flex:none;} .search input{border:none;outline:none;background:transparent;width:100%;font-size:15px;}
.catpills{display:flex;flex-wrap:wrap;gap:7px;margin:13px 0 6px;}
.catpills button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 14px;
  font-size:13px;font-weight:600;color:var(--soil);}
.catpills button.on{background:var(--leaf);color:#fff;border-color:var(--leaf);}
.plantlist{flex:1;overflow-y:auto;margin:6px -8px 0;padding:0 8px;}
.grouplbl{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--stone);font-weight:700;
  margin:16px 0 8px;}
.prow{display:flex;align-items:center;gap:13px;padding:10px 12px;border-radius:12px;cursor:grab;
  border:1px solid transparent;position:relative;}
.prow:hover{background:#fff;border-color:var(--line);}
.prow.picked{background:var(--leaf-tint);border-color:var(--sage);box-shadow:inset 3px 0 0 var(--leaf);}
.prow .ic{width:40px;height:40px;flex:none;border-radius:10px;background:var(--leaf-tint);
  display:flex;align-items:center;justify-content:center;}
.prow .ic img{width:31px;height:31px;}
.prow .nm{font-weight:600;font-size:16px;color:var(--soil);}
.prow .sp{font-size:13px;color:var(--stone);}
.prow .placed{margin-left:auto;font-size:12px;font-weight:700;color:var(--leaf);background:var(--leaf-tint);
  border-radius:999px;padding:4px 10px;flex:none;}
.prow.faded{opacity:.5;}
.addcustom{margin-top:14px;border:1.5px dashed var(--terra);border-radius:12px;padding:14px;
  color:var(--terra);font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center;gap:8px;}

/* ---------------- bottom bar ---------------- */
.bottombar{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--wood2);color:var(--cream);
  display:flex;align-items:center;gap:20px;padding:12px 26px;box-shadow:0 -6px 24px rgba(0,0,0,.18);}
.progress{width:180px;height:9px;border-radius:999px;background:rgba(255,255,255,.18);overflow:hidden;flex:none;}
.progress i{display:block;height:100%;background:var(--sage);border-radius:999px;transition:width .2s;}
.bstat b{font-weight:700;} .bstat span{color:rgba(247,243,236,.72);font-size:14px;margin-left:10px;}
.bbtns{margin-left:auto;display:flex;gap:12px;}
.bbtn{display:inline-flex;align-items:center;gap:9px;border-radius:11px;padding:11px 18px;font-weight:700;font-size:15px;}
.bbtn.dark{background:rgba(255,255,255,.10);color:var(--cream);border:1px solid rgba(255,255,255,.18);}
.bbtn.sun{background:var(--sun);color:var(--soil);}

/* ---------------- detail panel ---------------- */
.overlay{position:fixed;inset:0;background:rgba(30,22,18,.42);backdrop-filter:blur(2px);z-index:60;
  display:none;align-items:center;justify-content:center;padding:30px;}
.overlay.open{display:flex;}
.detail{background:var(--panel);border-radius:22px;box-shadow:var(--shadow-lg);width:100%;max-width:520px;
  max-height:90vh;overflow:auto;}
.detail-head{display:flex;align-items:center;gap:15px;padding:22px 24px;border-bottom:1px solid var(--line);
  background:var(--leaf-tint);border-radius:22px 22px 0 0;}
.detail-head .ic{width:56px;height:56px;flex:none;border-radius:14px;background:#fff;
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);}
.detail-head .ic img{width:44px;height:44px;}
.detail-head>div{flex:1;min-width:0;}
.detail-head h3{font-family:'Fraunces',serif;font-weight:800;font-size:24px;color:var(--soil);}
.detail-head .sub{font-size:13px;color:var(--stone);}
.detail-head .rm{display:inline-flex;align-items:center;gap:6px;flex:none;background:#fff;
  border:1px solid var(--terra);color:var(--terra);border-radius:999px;padding:8px 13px;
  font-weight:700;font-size:13px;white-space:nowrap;}
.detail-head .rm svg{flex:none;}
.detail-head .rm:hover{background:var(--terra-tint);}
.detail-head .x{margin-left:0;font-size:22px;color:var(--stone);width:34px;height:34px;flex:none;border-radius:50%;}
.detail-head .x:hover{background:rgba(0,0,0,.05);}
.detail-body{padding:22px 24px 26px;}
.field{margin-bottom:16px;} .field .lbl{margin-bottom:6px;display:block;}
.field input,.field textarea{width:100%;border:1px solid var(--line);border-radius:11px;padding:11px 13px;
  font-size:15px;color:var(--soil);background:#fff;outline:none;}
.field input:focus,.field textarea:focus{border-color:var(--sage);}
.field textarea{min-height:84px;resize:vertical;}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.statbox{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;}
.statbox .lbl{margin-bottom:4px;} .statbox .v{font-size:17px;font-weight:700;color:var(--soil);}
.statbox.sun{background:var(--sun-tint);border-color:transparent;}
.statbox.water{background:var(--blue-tint);border-color:transparent;}
.statbox .row{display:flex;align-items:center;gap:9px;} .statbox .row .v{font-size:16px;}
.statbox small{color:var(--stone);font-size:12px;display:block;}
.comp-pills{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 12px;}
.cp{font-size:13px;font-weight:600;border-radius:999px;padding:6px 12px;}
.cp.good{background:var(--leaf-tint);color:var(--leaf);} .cp.bad{background:var(--terra-tint);color:var(--terra);}
.tip{background:var(--sun-tint);border-radius:12px;padding:12px 14px;font-size:14px;color:var(--soil);margin-bottom:16px;}
.detail-actions{display:flex;gap:12px;margin-top:8px;}
.btn-save{flex:1;background:var(--leaf);color:#fff;border-radius:12px;padding:14px;font-weight:700;font-size:16px;}
.btn-remove{background:#fff;border:1px solid var(--terra);color:var(--terra);border-radius:12px;
  padding:14px 20px;font-weight:700;font-size:16px;display:inline-flex;align-items:center;gap:8px;}
.btn-save:hover{filter:brightness(1.06);} .btn-remove:hover{background:var(--terra-tint);}

/* shopping list modal reuses .overlay */
.sheetcard{background:var(--panel);border-radius:22px;box-shadow:var(--shadow-lg);width:100%;max-width:520px;
  max-height:86vh;overflow:auto;padding:26px 28px 28px;}
.sheetcard h3{font-family:'Fraunces',serif;font-weight:800;font-size:26px;margin-bottom:4px;}
.sheetcard .muted{color:var(--stone);font-size:14px;margin-bottom:16px;}
.shop-row{display:flex;align-items:center;gap:14px;padding:12px 0;border-top:1px solid var(--line);}
.shop-row .ic{width:40px;height:40px;flex:none;border-radius:10px;background:var(--leaf-tint);
  display:flex;align-items:center;justify-content:center;} .shop-row .ic img{width:31px;height:31px;}
.shop-row .nm{font-weight:600;flex:1;} .shop-row .qty{color:var(--stone);font-size:14px;}
.shop-row a{color:var(--terra);font-weight:700;font-size:14px;white-space:nowrap;}

/* pick banner */
.pickbar{position:fixed;left:50%;bottom:80px;transform:translateX(-50%);z-index:45;background:var(--soil);
  color:var(--cream);border-radius:999px;padding:10px 20px;font-size:14px;font-weight:600;box-shadow:var(--shadow-lg);
  display:none;align-items:center;gap:12px;}
.pickbar.show{display:inline-flex;}
.pickbar img{width:24px;height:24px;} .pickbar button{color:var(--sage);font-weight:700;text-decoration:underline;}

/* ---------------- responsive ---------------- */
@media (max-width:1080px){
  .stage{grid-template-columns:1fr;}
  .sidebar{border-left:none;border-top:1px solid var(--line);max-height:none;}
  .plantlist{max-height:none;overflow:visible;}
}
@media (max-width:720px){
  .topbar-in{gap:12px;padding:12px 16px;}
  .brand b{display:none;}
  .tb-field{flex:1 1 auto;min-width:0;}
  .tb-field:has(.seg),.tb-field:has(.orient){flex:1 1 100%;}
  .bedname{min-width:0;}
  .zone-badge{margin-left:0;order:5;}
  .board{padding:16px;}
  .board-tools{width:100%;margin-left:0;flex-wrap:wrap;}
  .detail{max-width:none;position:fixed;left:0;right:0;bottom:0;border-radius:22px 22px 0 0;max-height:88vh;}
  .overlay{align-items:flex-end;padding:0;}
  .detail-head{border-radius:22px 22px 0 0;}
  .bottombar{padding:10px 14px;gap:10px;}
  .progress{width:60px;} .bstat span{display:none;}
  .bstat{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
  .bbtns{flex:none;}
  .bbtn{padding:11px 13px;font-size:14px;}
  .bbtn .txt{display:none;}
}

/* ---------------- print sheet (screen-hidden) ---------------- */
.print-sheet{display:none;}
.print-meta{font-size:12px;color:var(--stone);margin:14px 0 4px;font-weight:600;}
.print-sheet h3{font-family:'Fraunces',serif;font-weight:700;font-size:16px;margin:16px 0 8px;color:var(--soil);}
.print-table{width:100%;border-collapse:collapse;font-size:11.5px;}
.print-table th{text-align:left;padding:6px 8px;border-bottom:1.5px solid var(--soil);
  text-transform:uppercase;letter-spacing:.06em;font-size:9px;color:var(--stone);font-weight:700;}
.print-table td{padding:6px 8px;border-bottom:1px solid var(--line);vertical-align:top;}
.print-table .pn{font-weight:700;color:var(--soil);white-space:nowrap;}
.print-lines .ln{border-bottom:1px solid var(--line);height:26px;}

/* ---------------- mode pill + dropdown ---------------- */
.modepill-wrap{position:relative;flex:none;}
.modepill{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:7px 12px;font-size:13px;font-weight:700;color:var(--soil);box-shadow:var(--shadow);}
.modepill .mp-dot{width:8px;height:8px;border-radius:50%;background:var(--leaf);flex:none;}
.mode-free .modepill .mp-dot{background:var(--stone);}
.modepill b{text-transform:capitalize;}
.modepill svg{color:var(--stone);}
.modemenu{position:absolute;top:calc(100% + 6px);left:0;z-index:50;background:#fff;border:1px solid var(--line);
  border-radius:14px;box-shadow:var(--shadow-lg);padding:6px;min-width:210px;display:none;}
.modemenu.open{display:block;}
.modemenu button{display:flex;flex-direction:column;gap:1px;width:100%;text-align:left;padding:9px 12px;border-radius:10px;}
.modemenu button:hover{background:var(--leaf-tint);}
.modemenu button b{font-size:14px;font-weight:700;color:var(--soil);display:flex;align-items:center;}
.modemenu button span{font-size:12px;color:var(--stone);}
.modemenu button.soon{opacity:.7;}
.modemenu button.soon b i{font-style:normal;font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;
  color:var(--terra);background:var(--terra-tint);border-radius:999px;padding:1px 6px;margin-left:7px;}

/* ---------------- mode picker (landing) ---------------- */
.modepick{position:fixed;inset:0;z-index:70;background:var(--bg);display:none;overflow:hidden;}
.modepick.open{display:block;}
.mp-scroll{position:absolute;inset:0;overflow-y:auto;display:flex;flex-direction:column;align-items:center;
  padding:38px 20px calc(40px + env(safe-area-inset-bottom));}
.mp-head{text-align:center;max-width:600px;margin-bottom:26px;}
.mp-head h1{font-family:'Fraunces',serif;font-weight:700;font-size:clamp(30px,7vw,44px);color:var(--soil);letter-spacing:-.02em;}
.mp-head .mp-sub{margin-top:8px;font-size:16px;color:var(--stone);}
.mp-cards{display:flex;flex-direction:column;gap:14px;width:100%;max-width:600px;}
.mp-card{position:relative;display:flex;flex-direction:column;gap:6px;text-align:left;background:#fff;
  border:1.5px solid var(--sage);border-radius:12px;padding:18px 18px 16px;box-shadow:var(--shadow);
  transition:transform .08s ease,box-shadow .14s ease,border-color .12s ease;}
.mp-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);}
.mp-card:active{transform:translateY(0);}
.mp-ic{width:44px;height:44px;border-radius:12px;background:var(--leaf-tint);color:var(--leaf);
  display:flex;align-items:center;justify-content:center;margin-bottom:2px;}
.mp-name{font-family:'Fraunces',serif;font-weight:600;font-size:22px;color:var(--soil);}
.mp-desc{font-size:14.5px;color:var(--stone);font-weight:400;}
.mp-best{font-size:12.5px;color:var(--leaf);font-weight:600;margin-top:2px;}
.mp-card.soon{opacity:.72;border-color:var(--line);background:#FBFAF7;}
.mp-card.soon .mp-ic{background:#EEF3EA;color:var(--stone);}
.mp-card.soon .mp-best{color:var(--stone);}
.mp-badge{position:absolute;top:14px;right:14px;font-size:10.5px;font-weight:800;text-transform:uppercase;
  letter-spacing:.07em;color:var(--terra);background:var(--terra-tint);border-radius:999px;padding:4px 10px;}
.mp-diff{margin-top:20px;color:var(--terra);font-weight:700;font-size:15px;text-decoration:underline;text-underline-offset:3px;}

.mp-compare{position:absolute;left:0;right:0;bottom:0;z-index:5;background:var(--panel);
  border-radius:20px 20px 0 0;box-shadow:0 -18px 50px rgba(59,47,42,.26);
  padding:8px 18px calc(22px + env(safe-area-inset-bottom));
  transform:translateY(110%);transition:transform .26s cubic-bezier(.22,1,.36,1);max-height:80vh;overflow:auto;}
.mp-compare.open{transform:translateY(0);}
.cmp-grab{width:40px;height:4px;border-radius:999px;background:rgba(59,47,42,.18);margin:6px auto 12px;}
.cmp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.cmp-head b{font-family:'Fraunces',serif;font-weight:800;font-size:20px;}
.cmp-x{font-size:22px;color:var(--stone);width:34px;height:34px;border-radius:50%;}
.cmp-x:hover{background:rgba(0,0,0,.05);}
.cmp-wrap{overflow-x:auto;}
.cmp-table{width:100%;border-collapse:collapse;font-size:13px;min-width:440px;}
.cmp-table th{text-align:left;padding:8px 10px;font-size:12px;font-weight:800;color:var(--soil);border-bottom:2px solid var(--line);}
.cmp-table td{padding:9px 10px;border-bottom:1px solid var(--line);color:var(--soil);vertical-align:top;}
.cmp-table .cmp-k{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--stone);font-weight:700;white-space:nowrap;}

@media (min-width:720px){ .mp-cards{flex-direction:row;align-items:stretch;} .mp-card{flex:1;} }

/* ---------------- free mode: blank canvas ---------------- */
.mode-free .bed{background:var(--panel);gap:2px;border:2px solid rgba(59,47,42,.16);
  box-shadow:inset 0 1px 4px rgba(0,0,0,.05),var(--shadow);}
.mode-free .cell{background:transparent;box-shadow:none;}
.mode-free .cell.filled{background:transparent;box-shadow:none;}
.mode-free .cell:hover{box-shadow:0 0 0 2px var(--sage);}
.mode-free .cell.sel{box-shadow:0 0 0 3px var(--sun);}
.mode-free .cell .rc{display:none;}
.mode-free #tgHints,.mode-free #tgLabels,.mode-free .legend{display:none;}

/* freehand: several plants stacked in one cell */
.cell .stackicons{position:absolute;inset:0;}
.cell .stackicons img{position:absolute;left:50%;top:50%;width:56%;height:56%;object-fit:contain;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.22));}
.cell .stackcount{position:absolute;top:3px;right:4px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;
  background:var(--soil);color:var(--cream);font-size:10.5px;font-weight:800;line-height:17px;text-align:center;
  box-shadow:0 1px 3px rgba(0,0,0,.3);z-index:2;}

/* which-plant picker + back link inside the detail card */
.cellpick{display:flex;flex-direction:column;gap:8px;}
.cp-row{display:flex;align-items:center;gap:13px;width:100%;text-align:left;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:10px 14px;}
.cp-row:hover{border-color:var(--sage);background:var(--leaf-tint);}
.cp-row .ic{width:40px;height:40px;flex:none;border-radius:10px;background:var(--leaf-tint);
  display:flex;align-items:center;justify-content:center;}
.cp-row .ic img{width:31px;height:31px;}
.cp-row .nm{font-weight:600;font-size:16px;color:var(--soil);flex:1;}
.cp-row .cp-go{color:var(--stone);font-size:22px;font-weight:700;line-height:1;}
.backlink{color:var(--terra);font-weight:700;font-size:13.5px;margin-bottom:14px;display:inline-block;}
.backlink:hover{text-decoration:underline;text-underline-offset:3px;}

/* ---------------- seed packet spacing mode ---------------- */
.seedstage{display:none;}
.mode-seed .colnums,.mode-seed .bed{display:none;}
.mode-seed .seedstage{display:block;}
.mode-seed .legend,.mode-seed #tgHints,.mode-seed #tgLabels,.mode-seed #tgEdge,.mode-seed .edge{display:none;}
.mode-seed .board-main{overflow:visible;}
#tgCircles{display:none;}
.mode-seed #tgCircles{display:inline-flex;}
.planner.circles-off .scircle{display:none;}

.seed-toolbar{display:flex;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap;}
.suncompass{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:5px 14px 5px 5px;box-shadow:var(--shadow);font-size:12.5px;font-weight:700;color:var(--soil);}
.suncompass svg{flex:none;transition:transform .2s ease;}
.suncompass.sc-S svg{transform:rotate(0deg);} .suncompass.sc-W svg{transform:rotate(90deg);}
.suncompass.sc-N svg{transform:rotate(180deg);} .suncompass.sc-E svg{transform:rotate(270deg);}
.suncompass.glow{background:var(--sun-tint);border-color:var(--sun);}
.sunwrap{display:inline-flex;align-items:center;gap:5px;}
.sunrotate{width:34px;height:34px;border-radius:999px;background:#fff;border:1px solid var(--line);
  box-shadow:var(--shadow);color:var(--stone);display:inline-flex;align-items:center;justify-content:center;flex:none;}
.sunrotate:hover{color:var(--soil);border-color:var(--sage);}
.sungradient{position:absolute;inset:0;z-index:1;pointer-events:none;}
.sungradient.dir-S{background:linear-gradient(to top, rgba(229,169,78,.32), rgba(229,169,78,0) 62%);}
.sungradient.dir-N{background:linear-gradient(to bottom, rgba(229,169,78,.32), rgba(229,169,78,0) 62%);}
.sungradient.dir-E{background:linear-gradient(to left, rgba(229,169,78,.32), rgba(229,169,78,0) 62%);}
.sungradient.dir-W{background:linear-gradient(to right, rgba(229,169,78,.32), rgba(229,169,78,0) 62%);}
.seed-hint{font-size:13px;color:var(--stone);font-weight:600;}
.seed-hint b{color:var(--leaf);}

.seed-scrollwrap{overflow:auto;max-height:min(72vh,560px);padding-bottom:8px;-webkit-overflow-scrolling:touch;}
.seed-inner{display:inline-flex;align-items:flex-start;}
.ruler-left{position:relative;width:20px;flex:none;align-self:stretch;margin-top:16px;}
.ruler-left .rtick{position:absolute;right:3px;font-size:9px;color:var(--stone);font-weight:700;transform:translateY(-50%);}
.seed-col{flex:none;}
.ruler-top{position:relative;height:14px;margin-bottom:2px;}
.ruler-top .rtick{position:absolute;top:0;font-size:9px;color:var(--stone);font-weight:700;transform:translateX(-50%);}
.seedbed{position:relative;background:radial-gradient(120% 120% at 28% 18%, #F5ECDC, #ECE0CB);
  border:2px solid var(--wood);border-radius:12px;box-shadow:inset 0 2px 10px rgba(0,0,0,.10);overflow:hidden;touch-action:none;}
.seedbed::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(59,47,42,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(59,47,42,.055) 1px,transparent 1px);
  background-size:var(--ftpx,72px) var(--ftpx,72px);}

.splant{position:absolute;transform:translate(-50%,-50%);z-index:2;cursor:pointer;}
.scircle{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;border:1.5px solid rgba(59,47,42,.14);}
.scircle.ok{background:rgba(168,197,160,.16);border-color:rgba(74,124,89,.4);}
.scircle.warn{background:rgba(229,169,78,.22);border-color:rgba(229,169,78,.55);}
.scircle.bad{background:rgba(194,84,80,.20);border-color:rgba(194,84,80,.6);}
.sicon{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:calc(var(--iconpx,32px) + 2px);height:calc(var(--iconpx,32px) + 2px);
  display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 2px 3px rgba(0,0,0,.25));}
.sicon img{width:var(--iconpx,32px);height:var(--iconpx,32px);object-fit:contain;pointer-events:none;}
.splant .varrow{position:absolute;top:calc(var(--arrpx,15px) * -0.4);right:calc(var(--arrpx,15px) * -0.4);
  width:var(--arrpx,15px);height:var(--arrpx,15px);border-radius:50%;background:var(--leaf);
  color:#fff;font-size:calc(var(--arrpx,15px) * 0.72);font-weight:800;line-height:var(--arrpx,15px);text-align:center;border:1.5px solid #fff;}
.splant.ghost{z-index:1;opacity:.6;}
.scircle.ghostc{background:transparent;border:2px dashed var(--sage);}
.sicon.ghosti{opacity:.5;}

.seed-status{display:flex;align-items:flex-start;gap:10px;border-radius:12px;padding:11px 14px;font-size:14px;
  font-weight:600;color:var(--soil);margin-bottom:12px;}
.seed-status .ss-dot{width:12px;height:12px;border-radius:50%;flex:none;margin-top:3px;}
.seed-status.ok{background:var(--leaf-tint);} .seed-status.ok .ss-dot{background:var(--leaf);}
.seed-status.warn{background:var(--sun-tint);} .seed-status.warn .ss-dot{background:var(--sun);}
.seed-status.bad{background:var(--terra-tint);} .seed-status.bad .ss-dot{background:var(--bad);}

.vtoggle-row{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:8px;}
.vt-label{flex:1;} .vt-label b{display:block;font-size:15px;color:var(--soil);} .vt-label span{font-size:12.5px;color:var(--stone);}
.vtoggle{width:44px;height:26px;border-radius:999px;background:var(--cell-empty);position:relative;flex:none;transition:background .15s;}
.vtoggle .sw{position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;background:#fff;transition:left .15s;box-shadow:0 1px 3px rgba(0,0,0,.2);}
.vtoggle.on{background:var(--leaf);} .vtoggle.on .sw{left:20px;}
.vnote{font-size:12.5px;color:var(--leaf);font-weight:600;margin:0 0 12px 2px;}

/* clear bed action (all modes) */
.clearbed{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);
  border-radius:11px;padding:9px 13px;font-size:14px;font-weight:600;color:var(--stone);box-shadow:var(--shadow);}
.clearbed:hover{color:var(--terra);border-color:var(--terra);}

/* drag a placed plant to move it */
.splant{cursor:grab;}
.splant.dragging{z-index:9;cursor:grabbing;}
.splant.dragging .sicon{transform:translate(-50%,-50%) scale(1.12);}

/* drag the bed edge to resize (tablet and up) */
.seed-bedwrap{position:relative;}
/* zoom the view (not the bed dimensions) */
.zoomctl{display:inline-flex;align-items:center;gap:2px;background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:3px;box-shadow:var(--shadow);flex:none;}
.zoomctl button{width:30px;height:30px;border-radius:999px;font-size:18px;font-weight:700;color:var(--soil);
  display:flex;align-items:center;justify-content:center;line-height:1;}
.zoomctl button#zoomFit{width:auto;padding:0 11px;font-size:12.5px;font-weight:700;letter-spacing:.02em;}
.zoomctl button:hover{background:var(--leaf-tint);color:var(--leaf);}

/* ---------------- print ---------------- */
@media print{
  @page{size:letter portrait;margin:.5in;}
  body{background:#fff;}
  .topbar,.bedbar,.bottombar,.board-tools,.sidebar,.pickbar,.overlay,.legend{display:none !important;}
  .planner{padding:0;}
  .stage{grid-template-columns:1fr;display:block;}
  .board{padding:0;}
  .board-main{overflow:visible !important;}
  .bed{box-shadow:none !important;background:#6b5647;break-inside:avoid;--cellmin:0;}
  .cell{box-shadow:none !important;min-width:0 !important;}
  .cell.sel{box-shadow:none !important;}
  .cell .cdot,.cdot-tip{display:none !important;}
  .edge{box-shadow:none;}
  .print-only{display:block !important;}
  .print-sheet{display:block !important;break-inside:avoid;}
  .board-head h1{font-size:22px;}
  .board-head{margin-bottom:10px;}
  .print-foot{display:flex !important;gap:10px;align-items:center;justify-content:center;
    margin-top:20px;padding-top:12px;border-top:1px solid var(--line);color:var(--stone);font-size:12px;}
  .print-foot img{width:22px;height:22px;}
}
.print-only,.print-foot{display:none;}