/* ============================================================
   Garden Bed — field-journal palette. Greens live on top,
   soil browns underneath, a single gold reserved for the sun.
   Oat paper ground (deliberately not cream) to sidestep the
   cream+serif+terracotta cliche.
   ============================================================ */
:root{
  --paper:      #e7e6d8;   /* oat, faintly green */
  --paper-deep: #dedccb;
  --card:       #f3f1e6;   /* lifted surface */
  --card-2:     #eeecdf;
  --ink:        #262b1e;   /* dark olive-bark */
  --ink-soft:   #5e5b49;
  --line:       #d4d1bd;   /* hairline */
  --leaf:       #4f6a34;   /* primary green */
  --leaf-deep:  #37472a;
  --loam:       #6e5238;   /* soil brown */
  --loam-soft:  #8a6f52;
  --clay:       #8c5e3c;   /* temperature (brown, not orange) */
  --water:      #3e6f5c;   /* moisture (moss-teal) */
  --sun:        #c2933a;   /* light (gold) */
  --danger:     #9a4b34;

  --r:  12px;
  --r-sm: 9px;
  --shadow: 0 1px 2px rgba(40,36,24,.05), 0 8px 22px -14px rgba(40,36,24,.28);
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Work Sans", system-ui, sans-serif;
}

*{ box-sizing:border-box; }
/* the hidden attribute must beat class-based display rules (modals, edit bar) */
[hidden]{ display:none !important; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:
    radial-gradient(1200px 600px at 85% -10%, #eceadb 0%, transparent 60%),
    var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:450;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  padding-bottom:48px;
}
h1,h2{ font-family:var(--font-display); font-weight:600; margin:0; letter-spacing:-.01em; }
button{ font-family:inherit; }

.eyebrow{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.14em;
  color:var(--loam); font-weight:600;
}

/* ---------------- top bar ---------------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:20px clamp(16px,4vw,40px) 14px;
  max-width:1180px; margin:0 auto;
}
.brand{ display:flex; align-items:center; gap:13px; min-width:0; }
.mark{
  color:var(--leaf); display:grid; place-items:center;
  width:44px; height:44px; border-radius:50%;
  background:linear-gradient(160deg,#eef0e2,#e4e6d3);
  border:1px solid var(--line); flex:none;
}
.brand-text{ display:flex; flex-direction:column; line-height:1.1; min-width:0; }
.brand-text h1{ font-size:1.5rem; }
#asOf{ font-size:.6rem; }

.topbar-actions{ display:flex; gap:8px; align-items:center; flex:none; }

/* ---------------- buttons ---------------- */
.btn{
  border:1px solid var(--line); background:var(--card);
  color:var(--ink); border-radius:999px; padding:.5rem .95rem;
  font-size:.86rem; font-weight:500; cursor:pointer;
  transition:transform .08s ease, background .15s ease, border-color .15s ease;
}
.btn:hover{ border-color:var(--loam-soft); }
.btn:active{ transform:translateY(1px); }
.btn.solid{ background:var(--leaf); color:#f4f4ea; border-color:var(--leaf); }
.btn.solid:hover{ background:var(--leaf-deep); }
.btn.ghost{ background:transparent; }
.btn.small{ padding:.4rem .8rem; font-size:.8rem; }
.btn.icon{ padding:.45rem; width:38px; height:38px; display:grid; place-items:center; border-radius:50%; }
.btn:focus-visible, .toggle:focus-visible, .chip:focus-visible, .select:focus-visible{
  outline:2.5px solid var(--leaf); outline-offset:2px;
}

main{ max-width:1180px; margin:0 auto; padding:0 clamp(16px,4vw,40px); }

/* ---------------- edit bar ---------------- */
.editbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px; margin-bottom:14px;
  background:var(--card-2); border:1px dashed var(--loam-soft);
  border-radius:var(--r);
}
.editbar-actions{ display:flex; gap:8px; }

/* ---------------- grid ---------------- */
.grid{ display:grid; gap:16px; grid-template-columns:1fr; }
@media(min-width:640px){ .grid{ grid-template-columns:repeat(2,1fr);} }
@media(min-width:1040px){ .grid{ grid-template-columns:repeat(4,1fr);} }

.w-small{ grid-column:span 1; }
.w-medium,.w-large,.w-full{ grid-column:span 1; }
@media(min-width:640px){
  .w-medium{ grid-column:span 2; }
  .w-large{ grid-column:span 2; }
  .w-full{ grid-column:span 2; }
}
@media(min-width:1040px){
  .w-medium{ grid-column:span 2; }
  .w-large{ grid-column:span 2; }
  .w-full{ grid-column:span 4; }
}

/* ---------------- tile shell ---------------- */
.tile{
  position:relative; background:var(--card);
  border:1px solid var(--line); border-top:3px solid var(--accent,var(--leaf));
  border-radius:var(--r); padding:18px; box-shadow:var(--shadow);
  min-height:118px; display:flex; flex-direction:column;
  animation:rise .4s ease both;
}
@keyframes rise{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none;} }
@media(prefers-reduced-motion:reduce){ .tile{ animation:none; } }

.tile .label{
  font-size:.74rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-soft); font-weight:600;
}
.tile .accent-dot{
  width:8px; height:8px; border-radius:50%; background:var(--accent);
  display:inline-block; margin-right:7px; vertical-align:middle;
}
.tile .value{
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(2.6rem,7vw,3.7rem); line-height:1; letter-spacing:-.02em;
  color:var(--ink); margin-top:auto; font-feature-settings:"tnum" 1;
}
.tile .value .unit{ font-size:.4em; color:var(--ink-soft); font-weight:500; margin-left:.15em; }
.tile .sub{ font-size:.8rem; color:var(--ink-soft); margin-top:6px; }
.tile.empty .value{ color:var(--line); }

/* accent-per-family */
.acc-clay{ --accent:var(--clay); }
.acc-water{ --accent:var(--water); }
.acc-sun{ --accent:var(--sun); }
.acc-leaf{ --accent:var(--leaf); }

/* last watered hero tile */
.tile.hero .value{ color:var(--water); }
.tile.hero .drop{ position:absolute; right:16px; top:16px; color:var(--water); opacity:.4; }

/* gauge */
.gauge-wrap{ margin-top:auto; display:flex; align-items:center; gap:14px; }
.gauge-num{ font-family:var(--font-display); font-size:2.2rem; font-weight:500; }

/* graph tiles */
.tile.graph{ min-height:230px; }
.graph-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.graph-periods{ display:flex; gap:4px; }
.graph-periods .p{
  border:1px solid transparent; background:transparent; color:var(--ink-soft);
  font-size:.72rem; font-weight:600; padding:.2rem .5rem; border-radius:999px; cursor:pointer;
  letter-spacing:.03em;
}
.graph-periods .p.on{ background:var(--card-2); color:var(--ink); border-color:var(--line); }
.legend{ display:flex; gap:14px; margin-top:6px; }
.legend span{ font-size:.74rem; color:var(--ink-soft); display:flex; align-items:center; gap:6px; }
.legend i{ width:14px; height:3px; border-radius:2px; display:inline-block; }
.chart{ width:100%; margin-top:8px; }
.chart .grid-line{ stroke:var(--line); stroke-width:1; }
.chart .axis-label{ fill:var(--ink-soft); font:500 10px var(--font-body); }
.chart .series-line{ fill:none; stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }

/* edit affordances */
.tile .edit-controls{
  position:absolute; top:8px; right:8px; display:none; gap:4px;
}
body.editing .tile .edit-controls{ display:flex; }
body.editing .tile{ cursor:default; box-shadow:var(--shadow), 0 0 0 1.5px var(--loam-soft) inset; }
body.editing .graph-periods{ pointer-events:none; opacity:.5; }
.ectl{
  width:28px; height:28px; border-radius:7px; border:1px solid var(--line);
  background:var(--paper); color:var(--ink); cursor:pointer; font-size:.9rem;
  display:grid; place-items:center; line-height:1;
}
.ectl:hover{ border-color:var(--loam-soft); }
.ectl.del{ color:var(--danger); }

/* ---------------- sheets (modals) ---------------- */
.sheet-backdrop{
  position:fixed; inset:0; background:rgba(38,43,30,.4);
  display:flex; align-items:flex-end; justify-content:center; z-index:50;
  padding:0; animation:fade .2s ease;
}
@keyframes fade{ from{opacity:0} to{opacity:1} }
@media(min-width:640px){ .sheet-backdrop{ align-items:center; padding:24px; } }
.sheet{
  background:var(--paper); width:100%; max-width:520px;
  border-radius:16px 16px 0 0; box-shadow:0 -10px 40px rgba(0,0,0,.2);
  max-height:88vh; display:flex; flex-direction:column;
  animation:slideup .26s cubic-bezier(.2,.8,.2,1);
}
@media(min-width:640px){ .sheet{ border-radius:16px; } }
@keyframes slideup{ from{ transform:translateY(20px); opacity:.6;} to{ transform:none; opacity:1;} }
@media(prefers-reduced-motion:reduce){ .sheet,.sheet-backdrop{ animation:none; } }
.sheet-head{ display:flex; align-items:center; justify-content:space-between; padding:20px 20px 8px; }
.sheet-head h2{ font-size:1.3rem; }
.sheet-body{ padding:8px 20px 16px; overflow-y:auto; }
.sheet-foot{ display:flex; justify-content:flex-end; gap:10px; padding:14px 20px 22px; border-top:1px solid var(--line); }

.field-label{ display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:.12em;
  color:var(--loam); font-weight:600; margin:16px 0 8px; }
.field-label:first-child{ margin-top:4px; }

.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  border:1px solid var(--line); background:var(--card); color:var(--ink);
  border-radius:999px; padding:.5rem .9rem; font-size:.85rem; font-weight:500; cursor:pointer;
}
.chip:hover{ border-color:var(--loam-soft); }
.chip.on{ background:var(--leaf); color:#f4f4ea; border-color:var(--leaf); }

/* settings rows */
.setting{ display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px 0; border-bottom:1px solid var(--line); }
.setting:last-child{ border-bottom:none; }
.setting-text{ display:flex; flex-direction:column; gap:3px; }
.setting-name{ font-weight:600; font-size:.95rem; }
.setting-hint{ font-size:.78rem; color:var(--ink-soft); max-width:34ch; }
.stepper{ display:flex; align-items:center; gap:6px; }
.stepper input, .select{
  border:1px solid var(--line); background:var(--card); color:var(--ink);
  border-radius:9px; padding:.5rem .6rem; font:inherit; font-size:.9rem; width:5.5rem; text-align:right;
}
.select{ width:auto; min-width:9rem; text-align:left; }
.stepper .unit{ color:var(--ink-soft); font-size:.85rem; }

/* toggle */
.toggle{
  width:50px; height:29px; border-radius:999px; border:1px solid var(--line);
  background:var(--card-2); position:relative; cursor:pointer; padding:0; flex:none;
  transition:background .18s ease;
}
.toggle .knob{ position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%;
  background:var(--paper); box-shadow:0 1px 3px rgba(0,0,0,.25); transition:left .18s ease; }
.toggle[aria-checked="true"]{ background:var(--leaf); }
.toggle[aria-checked="true"] .knob{ left:24px; background:#fff; }

.hint-banner{
  text-align:center; color:var(--ink-soft); font-size:.85rem;
  padding:10px; margin-top:14px;
}