/* ===== Seedle — Seed Tray Grid theme ===== */
:root{
  --primary:#4a7c59;
  --cream:#f5e6d3;
  --terracotta:#e07a5f;
  --soil:#3a2a1d;
  --soil-light:#5a402b;
  --ink:#2f2a24;
  --paper:#faf4ea;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:var(--cream);
  color:var(--ink);
  min-height:100vh;
  min-height:100dvh;
  overflow-x:hidden;
}
#app{
  display:flex;
  flex-direction:column;
  min-height:100vh;
  min-height:100dvh;
}
button{font-family:inherit;cursor:pointer;border:none;background:none;}
input,textarea{font-family:inherit;}

/* ===== Tray (top-down black tray) ===== */
#tray{
  position:relative;
  margin:12px 14px 4px;
  padding:8px;
  background:linear-gradient(160deg,#232323,#0e0e0e);
  border-radius:14px;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.6),0 6px 14px rgba(0,0,0,.35);
  max-width:520px;
  align-self:center;
  width:100%;
}
#tray-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:6px;
}
.cell{
  aspect-ratio:1/1;
  border-radius:8px;
  background:radial-gradient(circle at 50% 45%,var(--soil-light),var(--soil));
  box-shadow:inset 0 3px 6px rgba(0,0,0,.55), inset 0 -2px 4px rgba(255,255,255,.06);
  position:relative;
}
.cell .marker{
  position:absolute;
  left:50%;
  top:8%;
  transform:translateX(-50%);
  width:26%;
  height:62%;
  background:linear-gradient(#e0855f,#c2643f);
  border-radius:3px;
  box-shadow:0 2px 3px rgba(0,0,0,.4);
  display:flex;
  align-items:center;
  justify-content:center;
}
.cell .marker::before{
  content:"";
  position:absolute;
  left:50%;
  top:100%;
  transform:translateX(-50%);
  width:18%;
  height:22%;
  background:#8a4b2d;
  border-radius:2px;
}
.cell .marker span{font-size:12px;}
.cell .sprout-shape{
  position:absolute;
  left:50%;
  bottom:16%;
  transform:translateX(-50%);
  font-size:14px;
}

/* Quick-add pencil resting diagonally at tray corner */
#pencil{
  position:absolute;
  right:14px;
  top:10px;
  width:64px;
  height:9px;
  background:linear-gradient(#e8c36a,#d9a83f);
  border-radius:3px;
  transform:rotate(-35deg);
  box-shadow:0 2px 3px rgba(0,0,0,.4);
  pointer-events:none;
}
#pencil::before{
  content:"";
  position:absolute;
  left:-3px;
  top:-2px;
  width:0;height:0;
  border-top:6px solid transparent;
  border-bottom:6px solid transparent;
  border-left:8px solid #d8c3a0;
}
#pencil::after{
  content:"";
  position:absolute;
  right:-4px;
  top:-1px;
  width:0;height:0;
  border-top:5px solid transparent;
  border-bottom:5px solid transparent;
  border-left:6px solid #f0ece4;
}

/* Wooden tags with carved numbers */
#tags{
  position:absolute;
  left:12px;
  top:12px;
  display:flex;
  gap:6px;
  pointer-events:none;
}
.tag{
  background:linear-gradient(180deg,#d7b384,#c39a68);
  padding:3px 7px;
  border-radius:3px 3px 2px 2px;
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.2),0 2px 3px rgba(0,0,0,.4);
  text-align:center;
  min-width:34px;
}
.tag-num{
  display:block;
  font-weight:800;
  color:#6b3f1d;
  text-shadow:0 1px 0 rgba(255,255,255,.35);
  font-size:15px;
}

/* ===== Views ===== */
#views{flex:1;padding:6px 14px calc(96px + env(safe-area-inset-bottom));}
.view-heading{
  font-size:20px;
  font-weight:700;
  color:var(--primary);
  margin:10px 0 8px;
  letter-spacing:.3px;
}
.quick-add{
  width:100%;
  background:var(--terracotta);
  color:#fff;
  font-weight:700;
  font-size:16px;
  padding:12px;
  border-radius:12px;
  box-shadow:0 4px 10px rgba(224,122,95,.45);
  margin-bottom:14px;
}
.recent-title{font-size:13px;color:var(--primary);margin:6px 0 8px;text-transform:uppercase;letter-spacing:1px;}

/* ===== List / plant labels ===== */
.list{list-style:none;margin:0;padding:0;}
.list-item{
  position:relative;
  overflow:hidden;
  border-radius:6px;
  margin-bottom:10px;
  background:#c98f5c; /* terracotta stick */
  box-shadow:0 3px 6px rgba(0,0,0,.25);
}
.swipe-bg{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 70% 40%,#8a6a4a,#6b4f2f);
  background-size:26px 26px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  color:#fff;
  font-size:13px;
  font-weight:700;
  padding-right:16px;
}
.swipe-bg::after{
  content:"Delete";
  letter-spacing:.5px;
}
.item-body{
  position:relative;
  background:linear-gradient(180deg,#d9955e,#c97e48);
  padding:14px 16px;
  transform:translateX(0);
  transition:transform .25s ease;
  touch-action:pan-y;
}
.list-item.swiping .item-body{transition:none;}
.item-top{display:flex;align-items:center;gap:10px;}
.item-plant{
  flex:1;
  font-family:"Brush Script MT",cursive,"Segoe Script",cursive;
  font-size:20px;
  font-weight:700;
  color:#2f6b40;
  text-shadow:0 1px 0 rgba(255,255,255,.3);
  line-height:1.1;
  overflow-wrap:anywhere;
}
.item-sprout{font-size:20px;flex-shrink:0;}
.item-meta{
  margin-top:8px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.item-sown{
  font-size:12px;
  color:#6b3f1d;
  font-weight:600;
}
.item-sown b{font-weight:800;}
.item-notes{
  font-size:12px;
  color:#7a4a22;
  font-style:italic;
  margin-top:4px;
}

/* ===== Empty state ===== */
.empty-hint{
  margin:20px auto;
  max-width:300px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  text-align:center;
  color:var(--primary);
}
.empty-hint .soil-row{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:5px;
  width:100%;
}
.empty-hint .soil-cell{
  aspect-ratio:1/1;
  border-radius:7px;
  background:radial-gradient(circle at 50% 45%,var(--soil-light),var(--soil));
  box-shadow:inset 0 3px 6px rgba(0,0,0,.5);
}
.empty-tag{
  background:linear-gradient(180deg,#d7b384,#c39a68);
  color:#6b3f1d;
  font-weight:700;
  padding:8px 14px;
  border-radius:4px;
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.15),0 3px 6px rgba(0,0,0,.3);
  transform:rotate(-3deg);
}

/* ===== Seed packet nav ===== */
#nav{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:50;
  display:flex;
  gap:8px;
  padding:8px 10px calc(10px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,#3b6b49,#2f553b);
  box-shadow:0 -6px 16px rgba(0,0,0,.35);
}
.packet{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  padding:8px 4px;
  border-radius:8px;
  background:linear-gradient(180deg,#d9cfb8,#c5b898);
  box-shadow:0 3px 5px rgba(0,0,0,.35);
  transform:rotate(2deg) scale(.96);
  filter:saturate(.55) brightness(.9);
  transition:transform .25s ease, filter .25s ease;
  transform-origin:bottom center;
  position:relative;
}
.packet-label{
  font-size:10px;
  font-weight:800;
  color:#5a4a2f;
  text-transform:uppercase;
  letter-spacing:.4px;
  text-align:center;
}
.packet-seed{font-size:15px;opacity:.7;}
.packet.active{
  transform:rotate(0deg) scale(1.08) translateY(-6px);
  filter:saturate(1) brightness(1.05);
  background:linear-gradient(180deg,#fff4df,#f0e0c0);
  box-shadow:0 6px 12px rgba(0,0,0,.4);
}
.packet.active .packet-label{color:var(--primary);}
.packet.active .packet-seed{opacity:1;}

/* ===== Modal ===== */
.modal{
  position:fixed;
  inset:0;
  z-index:100;
  display:flex;
  align-items:flex-end;
}
.modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.5);
}
.sheet{
  position:relative;
  width:100%;
  background:var(--paper);
  border-radius:18px 18px 0 0;
  padding:20px 18px calc(20px + env(safe-area-inset-bottom));
  box-shadow:0 -6px 24px rgba(0,0,0,.4);
  animation:slideUp .28s ease;
  max-height:92vh;
  overflow-y:auto;
}
@keyframes slideUp{from{transform:translateY(100%);}to{transform:translateY(0);}}
.sheet h2{
  margin:0 0 16px;
  color:var(--primary);
  font-size:20px;
}
.sheet label{
  display:block;
  margin-bottom:14px;
  font-size:13px;
  font-weight:600;
  color:#6b6b6b;
}
.sheet label .req{color:var(--terracotta);}
.sheet input,.sheet textarea{
  width:100%;
  margin-top:6px;
  padding:12px;
  font-size:16px;
  border:2px solid #e3d6c0;
  border-radius:10px;
  background:#fff;
  color:var(--ink);
}
.sheet input:focus,.sheet textarea:focus{
  outline:none;
  border-color:var(--primary);
}
.form-error{
  color:var(--terracotta);
  font-size:13px;
  font-weight:600;
  margin:0 0 10px;
}
.sheet-actions{display:flex;gap:10px;margin-top:6px;}
.btn{
  flex:1;
  padding:13px;
  border-radius:10px;
  font-size:16px;
  font-weight:700;
}
.btn.ghost{background:#e7dccb;color:var(--ink);}
.btn.primary{background:var(--primary);color:#fff;}

/* ===== Toast ===== */
.toast{
  position:fixed;
  left:50%;
  bottom:calc(96px + env(safe-area-inset-bottom));
  transform:translateX(-50%);
  background:rgba(30,30,30,.9);
  color:#fff;
  padding:10px 18px;
  border-radius:20px;
  font-size:14px;
  z-index:200;
  animation:fadeToast .3s ease;
  white-space:nowrap;
}
@keyframes fadeToast{from{opacity:0;}to{opacity:1;}}

/* ===== Scrollbar nicety ===== */
::-webkit-scrollbar{width:8px;}
::-webkit-scrollbar-thumb{background:#d0bfa4;border-radius:8px;}