@font-face { font-family: Young; src: url('/fonts/youngserif-latin.woff2'); }
@font-face { font-family: Figtree; src: url('/fonts/figtree-latin.woff2'); }

:root {
  --paper: #f3efe4;
  --ink: #1f3a2b;
  --muted: #687065;
  --line: #d8d0bf;
  --accent: #b85d3a;
  --rain: #447d93;
  --card: #fffdf7;
  --hero-bg: #1f3a2b;
  --hero-ink: #f9f4e8;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--paper); color: var(--ink); font-family: Figtree, system-ui, sans-serif; }
body { padding: env(safe-area-inset-top) 0 calc(74px + env(safe-area-inset-bottom)); }
.top { max-width: 720px; margin: auto; padding: 22px 20px 12px; display: flex; justify-content: space-between; align-items: flex-start; }
.top h1 { font: 32px Young, serif; margin: 2px 0; }
.eyebrow, .label { font-size: 11px; letter-spacing: .11em; text-transform: uppercase; color: var(--muted); }
button { font: inherit; color: inherit; border: 0; background: none; min-height: 44px; cursor: pointer; }
.icon { font-size: 22px; }
.view { display: none; max-width: 720px; margin: auto; padding: 12px 20px 24px; }
.view.active { display: block; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px; margin: 12px 0; box-shadow: 0 2px 8px #42331b0c; }
.hero { background: var(--hero-bg); color: var(--hero-ink); border-radius: 14px; padding: 22px; margin-bottom: 18px; }
.hero .eyebrow { color: #c8d2c7; }
.hero h2 { font: 28px Young; margin: 4px 0 8px; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.chip { display: inline-flex; border-radius: 99px; padding: 5px 9px; font-size: 12px; background: #e7e1d2; color: #1f3a2b; }
.chip.water-now { background: #f1d3c6; color: #7e351e; }
.chip.check-now { background: #f3e3b3; }
.chip.wait-for-rain { background: #d9e9ee; color: #25576a; }
.chip.waterlogged { background: #d5e4da; }
.chip.stale { background: #e5e1db; }
.row { display: flex; justify-content: space-between; align-items: center; gap: 12px; border-top: 1px solid var(--line); padding: 12px 0; }
.row:first-child { border-top: 0; }
.primary { background: var(--accent); color: white; border-radius: 8px; padding: 9px 14px; }
.secondary { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; }
.bottom { position: fixed; z-index: 4; bottom: 0; left: 0; right: 0; padding: 8px max(10px, env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--paper) 94%, transparent); border-top: 1px solid var(--line); display: flex; justify-content: space-around; }
.bottom button { font-size: 12px; }
.bottom .quick { background: var(--accent); color: #fff; border-radius: 50%; font-size: 26px; width: 50px; height: 50px; margin-top: -20px; }
.muted { color: var(--muted); }
.empty { padding: 28px 12px; text-align: center; color: var(--muted); }
input, select, textarea { width: 100%; border: 1px solid var(--line); border-radius: 7px; padding: 10px; background: #fffdf7; font: inherit; margin: 4px 0 10px; }
label { font-size: 13px; }
.dark { --paper: #17251e; --ink: #edf0e4; --muted: #a8b0a2; --line: #3a493f; --card: #213128; }
.dark input, .dark select, .dark textarea { background: #1b2b22; color: var(--ink); }

@media (min-width: 680px) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}