:root{
    --ink:#141109;
    --ink-2:#1E1A12;
    --brick:#B06A4F;
    --brick-dim:#8C523C;
    --timber:#22261F;
    --zinc:#96A09D;
    --straw:#D8BE86;
    --hedge:#2F4A33;
    --paper:#EDE6D8;
    --paper-dim:#A79E8C;
    --line:rgba(237,230,216,.14);
  }
  *{box-sizing:border-box}
  html,body{margin:0;background:var(--ink);color:var(--paper)}
  body{
    font:400 16px/1.45 ui-sans-serif,system-ui,"Helvetica Neue",Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
    padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
  }
  .wrap{max-width:460px;margin:0 auto;padding:20px 16px 56px}

  header{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:16px}
  h1{margin:0;font-size:29px;line-height:.95;font-weight:700;letter-spacing:-.03em;text-transform:uppercase}
  h1 em{display:block;font-style:normal;font-weight:400;color:var(--brick)}
  .season{font:500 11px/1.35 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-dim);text-align:right}

  .compass{display:flex;align-items:center;gap:8px;margin:0 0 12px}
  .needle{width:26px;height:26px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;flex:0 0 auto;transition:transform .35s ease}
  .needle span{font:700 11px/1 ui-monospace,monospace;color:var(--brick)}
  .compass label{font:500 11px/1 ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--paper-dim)}
  select,input,textarea{font:inherit;color:var(--paper);background:var(--ink-2);border:1px solid var(--line);border-radius:6px;padding:7px 9px}
  select{font-size:13px;padding:5px 7px}

  /* ---- the plan: 6 m x 7 m ---- */
  .plan{
    position:relative;width:100%;aspect-ratio:6/7;border-radius:10px;
    background:
      repeating-linear-gradient(90deg,rgba(237,230,216,.13) 0 1px,transparent 1px 16.6667%),
      repeating-linear-gradient(0deg,rgba(237,230,216,.13) 0 1px,transparent 1px 14.2857%),
      repeating-linear-gradient(90deg,rgba(0,0,0,.16) 0 1px,transparent 1px 22px),
      repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 11px),
      linear-gradient(160deg,var(--brick),var(--brick-dim));
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.35);
    overflow:hidden;touch-action:none;
  }
  .bed{
    position:absolute;border:0;padding:0;cursor:grab;touch-action:none;border-radius:2px;
    box-shadow:0 1px 0 rgba(0,0,0,.45), inset 0 0 0 1px rgba(0,0,0,.5);
    display:grid;place-items:center;color:var(--paper);
    font:600 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em;
    transition:box-shadow .12s ease;
  }
  .bed:focus-visible{outline:2px solid var(--straw);outline-offset:2px}
  .bed[aria-pressed="true"]{box-shadow:0 0 0 2px var(--straw),0 3px 8px rgba(0,0,0,.5);z-index:3}
  .bed.dragging{cursor:grabbing;box-shadow:0 0 0 2px var(--straw),0 8px 18px rgba(0,0,0,.6);z-index:4;opacity:.92}
  .m-timber{background:repeating-linear-gradient(0deg,var(--timber) 0 5px,#191C15 5px 6px)}
  .m-zinc{background:repeating-linear-gradient(90deg,#7E8785 0 3px,var(--zinc) 3px 6px);color:#12140F}
  .m-mesh{
    background:
      repeating-linear-gradient(0deg,#3A4034 0 1px,transparent 1px 5px),
      repeating-linear-gradient(90deg,#3A4034 0 1px,transparent 1px 5px),
      #14170F;
    z-index:5;font-size:8px
  }
  .bed:not(.m-mesh)::after{content:"";position:absolute;inset:2px;border-radius:1px;background:repeating-linear-gradient(72deg,var(--straw) 0 1px,transparent 1px 4px);opacity:.75}
  .bed span{position:relative;z-index:2;text-shadow:0 1px 2px rgba(0,0,0,.7)}
  .m-zinc span{text-shadow:0 1px 1px rgba(255,255,255,.35)}

  .fixture{position:absolute;pointer-events:none}
  .hedge{
    background:
      radial-gradient(circle at 30% 25%,#416144 0 2.5px,transparent 3px),
      radial-gradient(circle at 75% 65%,#375440 0 3px,transparent 3.5px),
      var(--hedge);
    background-size:9px 9px,13px 13px,auto;opacity:.95
  }
  .turf{background:repeating-linear-gradient(90deg,#5C7F3E 0 2px,#4A6B33 2px 4px);opacity:.9;border-radius:2px}
  .garage{background:repeating-linear-gradient(90deg,#CBCEC6 0 4px,#B2B6AD 4px 8px)}
  .screen{background:repeating-linear-gradient(0deg,#EDE6D8 0 1px,transparent 1px 5px),#2A2E26;opacity:.95;border-radius:1px;z-index:6}
  .soil{background:repeating-linear-gradient(45deg,#7A5F49 0 3px,#6C5340 3px 6px)}
  .pebble{
    background:
      radial-gradient(circle at 30% 35%,#E6E1D5 0 1.3px,transparent 1.6px),
      radial-gradient(circle at 72% 68%,#D8D2C4 0 1.5px,transparent 1.8px),
      #4A3729;
    background-size:8px 8px,11px 11px,auto;border-radius:2px
  }
  .worm{background:#1C1F18;border:1px solid rgba(237,230,216,.3);border-radius:3px}
  .tap{background:var(--paper);border-radius:50%;opacity:.85}
  .tree{border-radius:50%;background:radial-gradient(circle at 35% 30%,#4C6B3F,#263A22);box-shadow:inset 0 0 0 1px rgba(0,0,0,.4);opacity:.95}
  .door{background:var(--paper);opacity:.9;border-radius:2px}

  /* moveable table */
  .table{
    position:absolute;border:1px solid rgba(16,13,7,.9);border-radius:4px;
    background:rgba(16,13,7,.62);cursor:grab;touch-action:none;
    display:grid;place-items:center;
    font:600 9px/1.2 ui-monospace,monospace;color:rgba(237,230,216,.85);text-align:center;
  }
  .chair{
    position:absolute;pointer-events:none;border-radius:2px;
    background:rgba(16,13,7,.5);box-shadow:inset 0 0 0 1px rgba(16,13,7,.7);
  }
  .table.dragging{cursor:grabbing;background:rgba(16,13,7,.85)}

  #shadeCanvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:7}
  .shade{
    margin-top:12px;background:var(--ink-2);border:1px solid var(--line);
    border-radius:8px;padding:12px 14px
  }
  .shade .top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:9px}
  .shade label.sw{display:flex;align-items:center;gap:6px;font:500 11px/1 ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--paper-dim);cursor:pointer}
  .shade input[type=date]{font-size:13px;padding:5px 7px;color-scheme:dark}
  .shade input[type=range]{width:100%;accent-color:var(--straw);background:none;border:0;padding:0;margin:2px 0 0}
  .readout{font:500 12px/1.5 ui-monospace,monospace;letter-spacing:.03em;color:var(--paper-dim);margin-top:7px}
  .readout b{color:var(--straw);font-weight:600}
  .chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
  .chips{gap:5px}
  .chips button{
    font:500 10px/1 ui-monospace,monospace;letter-spacing:.04em;text-transform:uppercase;
    background:transparent;color:var(--paper-dim);border:1px solid var(--line);
    border-radius:999px;padding:6px 9px;cursor:pointer;white-space:nowrap
  }
  .chips button[aria-pressed="true"]{color:#1A1509;background:var(--straw);border-color:var(--straw)}
  .chips button:hover{color:var(--paper);border-color:var(--paper-dim)}
  .heights{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
  .heights label{font:500 10px/1.6 ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--paper-dim)}
  .heights input{width:74px;font-size:13px;padding:5px 7px;display:block}
  .scalebar{display:flex;align-items:center;gap:8px;margin-top:8px;font:500 10px/1 ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--paper-dim)}
  .scalebar i{display:block;height:6px;width:16.6667%;border:1px solid var(--paper-dim);border-top:0}

  /* ---- detail card ---- */
  .tag{margin-top:16px;background:var(--ink-2);border:1px solid var(--line);border-left:4px solid var(--straw);border-radius:8px;padding:16px}
  .tag.empty{border-left-color:var(--line);color:var(--paper-dim)}
  .tag h2{margin:0 0 2px;font-size:20px;letter-spacing:-.01em}
  .meta{font:500 11px/1.5 ui-monospace,monospace;letter-spacing:.09em;text-transform:uppercase;color:var(--paper-dim);margin-bottom:14px}
  .field{margin-bottom:12px}
  .field > label{display:block;font:500 10px/1 ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-dim);margin-bottom:5px}
  .field input,.field textarea{width:100%}
  textarea{min-height:56px;resize:vertical;line-height:1.4}
  .row{display:flex;gap:8px}
  .row input{flex:1}
  .row input.narrow{flex:0 0 92px}
  button.act{font:600 13px/1 inherit;background:var(--straw);color:#1A1509;border:0;border-radius:6px;padding:9px 13px;cursor:pointer}
  button.act:active{transform:translateY(1px)}
  button.ghost{background:transparent;color:var(--paper);border:1px solid var(--line)}
  .fits{margin:7px 0 0;font-size:13px;color:var(--straw)}
  .months{display:flex;align-items:flex-end;gap:3px;height:46px;margin-top:4px}
  .months div{flex:1;display:flex;flex-direction:column;justify-content:flex-end;height:100%}
  .months i{display:block;background:#3E4A33}
  .months u{display:block;background:#2A3A28;border-radius:1px 1px 0 0}
  .months .now i{background:var(--straw)}
  .months .now u{background:rgba(216,190,134,.38)}
  .months small{
    display:block;text-align:center;font:500 8px/1.6 ui-monospace,monospace;
    color:var(--paper-dim);letter-spacing:.02em
  }
  .crop{display:inline-flex;align-items:center;gap:7px;background:#2A2F24;border:1px solid var(--line);border-radius:999px;padding:5px 6px 5px 11px;margin:0 6px 6px 0;font-size:13px}
  .crop button{background:none;border:0;color:var(--paper-dim);cursor:pointer;font:600 15px/1 inherit;padding:0 3px}
  .crop button:hover{color:var(--brick)}
  .crops{margin-bottom:10px}
  .crops:empty::before{content:"Nothing planted yet.";color:var(--paper-dim);font-size:14px}

  .tools{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap;align-items:center}
  #saveState{
    font:500 11px/1 ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;
    color:var(--straw);opacity:0;transition:opacity .3s ease
  }
  .key{margin-top:20px;display:flex;flex-wrap:wrap;gap:12px;font:500 11px/1 ui-monospace,monospace;letter-spacing:.06em;color:var(--paper-dim)}
  .key i{display:inline-block;width:14px;height:14px;border-radius:3px;vertical-align:-3px;margin-right:6px}
  .note{margin-top:16px;font-size:13px;color:var(--paper-dim);line-height:1.5}
  .totals{margin-top:14px;font:500 12px/1.6 ui-monospace,monospace;letter-spacing:.04em;color:var(--paper-dim)}
  .totals b{color:var(--paper);font-weight:600}
  /* ---- planting calendar ---- */
  .cal{margin-top:16px;background:var(--ink-2);border:1px solid var(--line);border-radius:8px;padding:16px}
  .calhead{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
  .cal h2{margin:0;font-size:20px;letter-spacing:-.01em;font-weight:700}
  .calnav{display:flex;align-items:center;gap:4px}
  .calnav span{min-width:9.5em;text-align:center;font-size:15px;color:var(--straw)}
  .calnav button{
    background:transparent;color:var(--paper);border:1px solid var(--line);border-radius:6px;
    width:30px;height:30px;font:400 18px/1 inherit;cursor:pointer
  }
  .calnav button:hover{border-color:var(--paper-dim)}
  .calcount{font:500 11px/1.5 ui-monospace,monospace;letter-spacing:.09em;text-transform:uppercase;color:var(--paper-dim);margin:8px 0 10px}
  .calcount b{color:var(--straw);font-weight:600}
  .cal label.sw{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--paper-dim);cursor:pointer;margin-bottom:12px}

  .callist{display:flex;flex-direction:column;gap:2px}
  .crow{padding:9px 0;border-top:1px solid var(--line)}
  .crow:first-child{border-top:0}
  .chead b{font-size:15px;font-weight:600}
  .chead span{display:block;font:500 10px/1.6 ui-monospace,monospace;letter-spacing:.07em;text-transform:uppercase;color:var(--paper-dim)}
  .cbeds{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
  .cnote{margin:7px 0 0;font-size:13px;line-height:1.45;color:var(--paper-dim)}
  .calfoot{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line);font-size:12px;line-height:1.5;color:var(--paper-dim)}

  /* bed pills on a calendar row, and crop chips on a bed card: same two states */
  .pill,.pick{
    font:600 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em;
    border-radius:999px;padding:6px 9px;cursor:pointer;white-space:nowrap;
    border:1px solid transparent;background:var(--straw);color:#1A1509
  }
  .pill.tight,.pick.tight{background:transparent;color:var(--paper-dim);border-color:var(--line)}
  .pill.none,.pick.none{
    background:transparent;color:var(--paper-dim);border:0;padding:6px 0;cursor:default;
    font:400 13px/1.4 inherit;letter-spacing:0;white-space:normal
  }
  .pill.good:hover,.pick.good:hover{background:#EBD49E}
  .pill.tight:hover,.pick.tight:hover{color:var(--paper);border-color:var(--paper-dim)}

  .picks{display:flex;flex-wrap:wrap;gap:6px}
  .pick{font-size:12px;padding:7px 11px;display:inline-flex;align-items:center;gap:7px}
  .pick small{font-size:10px;opacity:.7;font-weight:500}

  /* ---- weather ---- */
  .wxstrip{display:flex;gap:4px;margin-bottom:12px}
  .wxday{
    flex:1;min-width:0;text-align:center;padding:8px 2px;border-radius:6px;
    background:rgba(237,230,216,.04);border:1px solid var(--line)
  }
  .wxday small{display:block;font:500 9px/1.4 ui-monospace,monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--paper-dim)}
  .wxday b{display:block;font-size:15px;font-weight:600;margin-top:2px}
  .wxday u{display:block;text-decoration:none;font-size:12px;color:var(--paper-dim)}
  .wxday i{display:block;font:500 10px/1.6 ui-monospace,monospace;font-style:normal;color:var(--paper-dim)}
  .wxday i.wet{color:#7FA8C9;font-weight:600}
  .wxwater{margin:0 0 10px;font-size:14px;line-height:1.5;color:var(--paper)}
  .wxwater b{color:var(--straw)}

  .warns{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
  .warn{
    font-size:13px;line-height:1.45;padding:9px 11px;border-radius:6px;
    background:rgba(237,230,216,.05);border-left:3px solid var(--paper-dim);color:var(--paper)
  }
  .warn b{color:var(--paper)}
  .warn.hot{border-left-color:var(--brick);background:rgba(176,106,79,.12)}
  .warn.cold{border-left-color:#7FA8C9;background:rgba(127,168,201,.12)}
  .warn.ok{border-left-color:var(--hedge);background:rgba(47,74,51,.22)}

  /* ---- today / tasks ---- */
  .task{display:flex;gap:11px;padding:11px 0;border-top:1px solid var(--line)}
  .task:first-child{border-top:0}
  .task .ticon{
    flex:0 0 26px;height:26px;border-radius:50%;display:grid;place-items:center;
    background:rgba(237,230,216,.06);font-size:13px;line-height:1
  }
  .task b{display:block;font-size:15px;font-weight:600;margin-bottom:2px}
  .task p{margin:0;font-size:13px;line-height:1.45;color:var(--paper-dim)}
  .task.now .ticon{background:var(--straw);color:#1A1509}
  .task.now b{color:var(--straw)}
  .task.cold .ticon{background:#7FA8C9;color:#0E1A24}
  .task.hot .ticon{background:var(--brick);color:#1A1509}

  /* ---- planting journal ---- */
  .jrow{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line)}
  .jrow:first-child{border-top:0}
  .jrow > div{flex:1;min-width:0}
  .jrow b{display:block;font-size:14px;font-weight:600}
  .jrow span{display:block;font:500 10px/1.6 ui-monospace,monospace;letter-spacing:.05em;text-transform:uppercase;color:var(--paper-dim)}
  .jrow em.ready{font-style:normal;color:var(--straw)}
  .pull{
    flex:0 0 auto;font:600 11px/1 ui-monospace,monospace;letter-spacing:.06em;text-transform:uppercase;
    background:transparent;color:var(--paper-dim);border:1px solid var(--line);
    border-radius:999px;padding:7px 11px;cursor:pointer
  }
  .pull:hover{color:var(--paper);border-color:var(--paper-dim)}

  /* ---- push ---- */
  .pushrow{display:flex;align-items:center;gap:12px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
  .pushrow > div{flex:1;min-width:0}
  .pushrow b{display:block;font-size:15px;font-weight:600}
  .pushrow p{margin:2px 0 0;font-size:13px;line-height:1.45;color:var(--paper-dim)}
  .pushrow button{flex:0 0 auto;white-space:nowrap}

  #updateBar{
    position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));
    max-width:436px;margin:0 auto;z-index:50;
    display:flex;align-items:center;gap:12px;
    background:var(--straw);color:#1A1509;border-radius:8px;padding:12px 14px;
    box-shadow:0 8px 24px rgba(0,0,0,.5);font-size:14px
  }
  #updateBar span{flex:1}
  #updateBar button{
    flex:0 0 auto;font:600 13px/1 inherit;background:#1A1509;color:var(--straw);
    border:0;border-radius:6px;padding:9px 13px;cursor:pointer
  }

  @media (prefers-reduced-motion:reduce){*{transition:none!important}}