/* ── Tokens (match theme.css) ───────────────────────────────────── */
:root {
  --bg: #F5EDE3;
  --bg-warm: #EFE5D6;
  --green-deep: #2A4A1C;
  --green-mid: #4A7A2E;
  --green-light: #7AAD5A;
  --terracotta: #C8703A;
  --terracotta-light: #E8935A;
  --brown: #2C1F12;
  --brown-muted: #6B4F35;
  --cream: #FDFAF4;
  --cream-dark: #E8DDD0;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--brown);
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

h1, h2, h3 { font-family: 'Fraunces', Georgia, serif; font-weight: 500; line-height: 1.15; }

/* ── Topbar ─────────────────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: var(--cream);
  border-bottom: 1px solid var(--cream-dark);
  height: 60px;
  display: flex; align-items: center;
  padding: 0 24px; gap: 24px;
}
.topbar-logo {
  font-family: 'Fraunces', serif; font-weight: 700; font-size: 1.05rem;
  color: var(--green-deep); text-decoration: none;
  letter-spacing: -0.02em; flex-shrink: 0;
}
.topbar-nav { display: flex; align-items: center; gap: 4px; flex: 1; }
.tab-btn {
  padding: 6px 14px; border-radius: 6px; border: none; background: transparent;
  font-family: 'DM Sans', sans-serif; font-size: 0.88rem; font-weight: 500;
  color: var(--brown-muted); cursor: pointer;
  transition: background 0.12s, color 0.12s; white-space: nowrap;
}
.tab-btn:hover { background: var(--bg-warm); color: var(--brown); }
.tab-btn.active { background: var(--green-deep); color: #fff; }
.topbar-links { display: flex; align-items: center; gap: 16px; font-size: 0.82rem; }
.topbar-links a { color: var(--brown-muted); text-decoration: none; }
.topbar-links a:hover { color: var(--green-deep); }

/* ── Main layout ────────────────────────────────────────────────── */
.main { max-width: 960px; margin: 0 auto; padding: 32px 24px 80px; }

/* ── Section header ─────────────────────────────────────────────── */
.section-title { font-family: 'Fraunces', serif; font-size: 1.5rem; color: var(--green-deep); margin-bottom: 4px; }
.section-sub { font-size: 0.9rem; color: var(--brown-muted); margin-bottom: 28px; }

/* ── Zone setup banner ──────────────────────────────────────────── */
.zone-banner {
  background: var(--cream); border: 1px solid var(--cream-dark);
  border-radius: 12px; padding: 20px 24px; margin-bottom: 28px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.zone-banner label { font-size: 0.9rem; font-weight: 500; }
.zone-input {
  padding: 8px 12px; border: 1px solid var(--cream-dark); border-radius: 8px;
  font-family: 'DM Sans', sans-serif; font-size: 0.9rem; background: var(--bg); width: 120px;
}
.zone-input:focus { outline: 2px solid var(--green-mid); }
.btn {
  padding: 8px 16px; border-radius: 8px; border: 1.5px solid var(--green-deep);
  background: var(--green-deep); color: #fff;
  font-family: 'DM Sans', sans-serif; font-size: 0.88rem; font-weight: 500;
  cursor: pointer; transition: background 0.12s;
}
.btn:hover { background: var(--green-mid); border-color: var(--green-mid); }
.btn-ghost { background: transparent; color: var(--green-deep); }
.btn-ghost:hover { background: var(--bg-warm); }
.btn-danger { background: transparent; border-color: var(--terracotta); color: var(--terracotta); }
.btn-danger:hover { background: #fff5f0; }
.btn-sm { padding: 5px 10px; font-size: 0.8rem; }
.zone-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--green-deep); color: #fff;
  border-radius: 20px; padding: 4px 12px; font-size: 0.82rem; font-weight: 500;
}
.frost-info { font-size: 0.85rem; color: var(--brown-muted); }

/* ── Schedule view ──────────────────────────────────────────────── */
.week-group { margin-bottom: 20px; }
.week-label {
  font-family: 'Fraunces', serif; color: var(--brown-muted); margin-bottom: 10px;
  text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.78rem;
}
.week-label .week-date {
  color: var(--green-deep); font-size: 1rem; text-transform: none; letter-spacing: 0;
  font-family: 'Fraunces', serif; font-weight: 500; margin-left: 8px;
}
.action-list { display: flex; flex-direction: column; gap: 8px; }
.action-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--cream); border: 1px solid var(--cream-dark);
  border-radius: 10px; padding: 12px 16px; font-size: 0.9rem;
}
.action-icon { font-size: 1.2rem; flex-shrink: 0; }
.action-text { flex: 1; }
.action-date { font-size: 0.78rem; color: var(--brown-muted); margin-top: 1px; }
.action-chip {
  display: inline-block; padding: 2px 8px; border-radius: 4px;
  font-size: 0.72rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em;
}
.chip-start_indoors { background: #E8F5E9; color: #2E7D32; }
.chip-transplant { background: #FFF8E1; color: #F57F17; }
.chip-direct_sow { background: #E3F2FD; color: #1565C0; }

/* ── This week view ─────────────────────────────────────────────── */
.empty-state { text-align: center; padding: 60px 24px; color: var(--brown-muted); font-size: 0.95rem; }
.empty-state .empty-icon { font-size: 2.5rem; margin-bottom: 12px; }
.this-week-list { display: flex; flex-direction: column; gap: 10px; }
.task-card {
  display: flex; align-items: center; gap: 14px;
  background: var(--cream); border: 1.5px solid var(--cream-dark);
  border-radius: 12px; padding: 14px 18px; transition: border-color 0.12s;
}
.task-card.done { opacity: 0.55; text-decoration: line-through; }
.task-check {
  width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--cream-dark);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  transition: background 0.12s, border-color 0.12s; font-size: 0.75rem;
}
.task-check.checked { background: var(--green-deep); border-color: var(--green-deep); color: #fff; }
.task-check:not(.checked):hover { border-color: var(--green-mid); }
.task-icon { font-size: 1.2rem; }
.task-body { flex: 1; }
.task-label { font-size: 0.95rem; font-weight: 500; }
.task-hint { font-size: 0.8rem; color: var(--brown-muted); margin-top: 2px; }

/* ── Tray tracker ───────────────────────────────────────────────── */
.tray-add-bar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }
.tray-input {
  padding: 8px 12px; border: 1px solid var(--cream-dark); border-radius: 8px;
  font-family: 'DM Sans', sans-serif; font-size: 0.88rem; background: var(--cream);
}
.tray-input:focus { outline: 2px solid var(--green-mid); }
select.tray-input { cursor: pointer; }
.tray-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.tray-table th {
  text-align: left; padding: 8px 12px; background: var(--bg-warm);
  border-bottom: 2px solid var(--cream-dark); font-size: 0.75rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--brown-muted); white-space: nowrap;
}
.tray-table td { padding: 10px 12px; border-bottom: 1px solid var(--cream-dark); vertical-align: middle; }
.tray-table tr:last-child td { border-bottom: none; }
.tray-table tr:hover td { background: var(--cream); }
.sp-sowing { background: #F3E5F5; color: #6A1B9A; }
.sp-germinated { background: #E8F5E9; color: #1B5E20; }
.sp-true_leaves { background: #E3F2FD; color: #0D47A1; }
.sp-potted_up { background: #FFF3E0; color: #E65100; }
.sp-hardening_off { background: #FFF9C4; color: #827717; }
.sp-transplanted { background: #E0F2F1; color: #004D40; }
.tray-notes-input {
  width: 100%; border: 1px solid var(--cream-dark); border-radius: 6px;
  padding: 4px 8px; font-family: 'DM Sans', sans-serif; font-size: 0.82rem;
  background: var(--bg); resize: none;
}
.tray-notes-input:focus { outline: 2px solid var(--green-mid); }
.tray-status-select {
  padding: 4px 8px; border: 1px solid var(--cream-dark); border-radius: 6px;
  font-family: 'DM Sans', sans-serif; font-size: 0.82rem; background: var(--bg); cursor: pointer;
}

/* ── Toast ──────────────────────────────────────────────────────── */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--brown); color: #fff; padding: 10px 20px;
  border-radius: 24px; font-size: 0.88rem; z-index: 999; animation: fadein 0.2s ease;
}
@keyframes fadein { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ── Misc ───────────────────────────────────────────────────────── */
.planted-note {
  font-size: 0.82rem; color: var(--brown-muted);
  background: var(--cream); border: 1px solid var(--cream-dark);
  border-radius: 8px; padding: 10px 14px; margin-bottom: 20px;
  display: flex; align-items: center; gap: 8px;
}