:root {
  --primary: #2e4a3a;
  --primary-deep: #22392d;
  --secondary: #a27e5a;
  --wood-dark: #7c5c3f;
  --chalk: #f5f0e6;
  --chalk-dim: rgba(245, 240, 230, 0.55);
  --chalk-faint: rgba(245, 240, 230, 0.28);
  --yellow: #f5d76e;
  --blue: #a8d8ea;
  --pink: #f2b8c6;
  --danger: #e6a8a0;
  --font: 'Caveat', 'Segoe Script', 'Comic Sans MS', cursive;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

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

html, body {
  height: 100%;
  font-family: var(--font);
  background: #1a2b21;
  color: var(--chalk);
  overscroll-behavior: none;
}

body {
  display: flex;
  justify-content: center;
  align-items: stretch;
}

/* ===== Chalkboard frame ===== */
.board {
  position: relative;
  width: 100%;
  max-width: 560px;
  min-height: 100vh;
  background: var(--primary);
  background-image:
    radial-gradient(circle at 20% 15%, rgba(255,255,255,0.05), transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(0,0,0,0.18), transparent 45%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.02), transparent 60%);
  border-left: 14px solid var(--secondary);
  border-right: 14px solid var(--secondary);
  border-top: 12px solid var(--wood-dark);
  border-bottom: 0 solid transparent;
  box-shadow:
    inset 0 0 40px rgba(0,0,0,0.35),
    inset 0 0 6px rgba(0,0,0,0.4);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* faint erased ghost text */
.ghost-ghost {
  position: absolute;
  color: rgba(245,240,230,0.07);
  font-size: 26px;
  font-weight: 600;
  white-space: nowrap;
  transform: rotate(-4deg);
  pointer-events: none;
  user-select: none;
}
.ghost-1 { top: 120px; left: -20px; }
.ghost-2 { top: 78vh; right: -30px; transform: rotate(3deg); }

/* eraser smudges */
.smudge {
  position: absolute;
  pointer-events: none;
  border-radius: 60% 40% 50% 50% / 50% 45% 55% 50%;
  filter: blur(3px);
  opacity: 0.5;
}
.smudge-1 { width: 90px; height: 46px; top: 200px; right: -30px; background: rgba(255,255,255,0.06); transform: rotate(-14deg); }
.smudge-2 { width: 120px; height: 40px; bottom: 190px; left: -40px; background: rgba(255,255,255,0.05); transform: rotate(8deg); }

/* chalk fingerprints */
.fingerprint {
  position: absolute;
  pointer-events: none;
  width: 34px; height: 42px;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, rgba(245,240,230,0.14) 0 1px, transparent 1px 3px);
  opacity: 0.35;
}
.fingerprint-1 { top: 46%; right: 24px; transform: rotate(20deg); }
.fingerprint-2 { bottom: 36%; left: 18px; transform: rotate(-24deg); }

/* ===== header ===== */
.board-head {
  padding: calc(20px + var(--safe-t)) 18px 6px;
  text-align: center;
}
.brand {
  font-size: 44px;
  font-weight: 700;
  color: var(--chalk);
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
  letter-spacing: 2px;
}
.tagline {
  color: var(--chalk-faint);
  font-size: 18px;
  margin-top: -6px;
}

/* ===== screens ===== */
.screens {
  flex: 1;
  overflow-y: auto;
  padding: 8px 16px 30px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.screens::-webkit-scrollbar { display: none; }
.screen { display: none; animation: fade 0.25s ease; }
.screen.active { display: block; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ===== dashboard (Today) ===== */
.dash {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}
.dash-card {
  flex: 1;
  background: rgba(0,0,0,0.18);
  border: 1px dashed var(--chalk-faint);
  border-radius: 14px;
  padding: 14px 10px;
  text-align: center;
}
.dash-card .num {
  font-size: 40px;
  font-weight: 700;
  color: var(--yellow);
  line-height: 1;
  display: block;
}
.dash-card .lbl { font-size: 17px; color: var(--chalk-dim); margin-top: 2px; }

.today-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 6px 0 12px;
}
.today-head h2 { font-size: 26px; font-weight: 600; }
.add-fab {
  border: 1px solid var(--yellow);
  background: rgba(245,215,110,0.15);
  color: var(--yellow);
  font-family: var(--font);
  font-size: 18px;
  font-weight: 700;
  border-radius: 999px;
  padding: 4px 14px;
  cursor: pointer;
}

/* ===== chalk card ===== */
.chalk-card {
  position: relative;
  background: rgba(255,255,255,0.04);
  border: 2px solid rgba(245,240,230,0.8);
  border-radius: 16px;
  box-shadow:
    0 4px 10px rgba(0,0,0,0.25),
    inset 0 0 0 1px rgba(255,255,255,0.05);
  padding: 12px 14px;
  margin-bottom: 12px;
  transition: transform 0.15s ease, opacity 0.2s ease;
}
/* uneven hand-drawn border */
.chalk-card::before {
  content: '';
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(245,240,230,0.35);
  border-radius: 13px;
  border-top-right-radius: 10px 14px;
  border-bottom-left-radius: 14px 10px;
  pointer-events: none;
}
.chalk-card::after {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px dashed rgba(255,255,255,0.12);
  border-radius: 50% 12px 48% 10px / 12px 46% 14px 50%;
  pointer-events: none;
}
.chalk-card .row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.chalk-card .emoji { font-size: 26px; }
.chalk-card .meta { flex: 1; min-width: 0; }
.chalk-card .name {
  font-size: 24px;
  font-weight: 700;
  color: var(--chalk);
  line-height: 1.1;
  word-break: break-word;
}
.chalk-card .cuisine {
  font-size: 17px;
  font-weight: 600;
  color: var(--yellow);
}
.chalk-card .fav { font-size: 18px; color: var(--pink); flex-shrink: 0; }

.dish-list .chalk-card {
  transform-origin: center;
}
/* swipe-delete reveal */
.dish-list .chalk-card.swiping { transition: none; }
.dish-list .chalk-card.removing { opacity: 0; transform: translateX(60px) rotate(2deg); transition: 0.25s ease; }

.empty {
  text-align: center;
  padding: 30px 10px;
  color: var(--chalk-faint);
}
.empty .doodle { font-size: 64px; display: block; margin-bottom: 8px; filter: opacity(0.7); }
.empty p { font-size: 19px; }

/* ===== Week grid ===== */
.week-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}
.week-cell {
  background: rgba(0,0,0,0.14);
  border: 1px solid rgba(245,240,230,0.3);
  border-radius: 8px;
  padding: 5px 2px;
  min-height: 82px;
  text-align: center;
  position: relative;
}
.week-cell .day-lbl {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--chalk-dim);
  margin-bottom: 4px;
  border-bottom: 1px dashed rgba(245,240,230,0.2);
  padding-bottom: 3px;
}
.week-cell.today-cell { border-color: var(--yellow); box-shadow: 0 0 0 1px rgba(245,215,110,0.3); }
.week-cell.today-cell .day-lbl { color: var(--yellow); }
.week-cell .d {
  font-size: 10px;
  line-height: 1.15;
  font-weight: 600;
  color: var(--chalk);
  word-break: break-word;
  margin-bottom: 2px;
}
.week-cell .more { font-size: 9px; color: var(--chalk-dim); }
.week-cell .dash-doodle { color: var(--chalk-faint); font-size: 12px; line-height: 1; }

/* ===== search ===== */
.search {
  width: 100%;
  background: rgba(0,0,0,0.2);
  border: 1px solid rgba(245,240,230,0.35);
  border-radius: 999px;
  color: var(--chalk);
  font-family: var(--font);
  font-size: 19px;
  padding: 9px 16px;
  margin-bottom: 14px;
  outline: none;
}
.search::placeholder { color: var(--chalk-faint); }
.search:focus { border-color: var(--yellow); }

.section-label {
  font-size: 20px;
  font-weight: 600;
  color: var(--chalk-dim);
  margin: 6px 0 10px;
}

/* ===== tray / chalk sticks ===== */
.tray-wrap {
  flex-shrink: 0;
  padding-bottom: var(--safe-b);
  position: relative;
  z-index: 5;
}
.tray {
  background: var(--wood-dark);
  background-image: linear-gradient(180deg, #8a6848, var(--wood-dark) 40%, #5f452f);
  border-top: 3px solid #5f452f;
  border-radius: 10px 10px 0 0;
  padding: 6px 8px 8px;
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  box-shadow: 0 -6px 14px rgba(0,0,0,0.4), inset 0 2px 4px rgba(255,255,255,0.12);
  min-height: 74px;
}

.stick {
  position: relative;
  width: 15%;
  max-width: 60px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  color: #3a2b1c;
  text-align: center;
  padding: 0;
  transition: transform 0.18s ease;
  flex-shrink: 0;
}
/* the chalk stick body */
.stick::before {
  content: '';
  display: block;
  height: 44px;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.35), rgba(0,0,0,0.12)),
    var(--chalk);
  box-shadow:
    inset 2px 0 3px rgba(255,255,255,0.5),
    inset -2px 0 3px rgba(0,0,0,0.15),
    0 4px 5px rgba(0,0,0,0.35);
  margin-bottom: 2px;
}
/* colored stick via per-stick chalk var */
.stick[data-tab="week"]::before { background: linear-gradient(180deg, rgba(255,255,255,0.3), rgba(0,0,0,0.12)), var(--yellow); }
.stick[data-tab="recipes"]::before { background: linear-gradient(180deg, rgba(255,255,255,0.3), rgba(0,0,0,0.12)), var(--blue); }
.stick[data-tab="faves"]::before { background: linear-gradient(180deg, rgba(255,255,255,0.3), rgba(0,0,0,0.12)), var(--pink); }

/* chalk tip (the writing end, pointing down onto tray) */
.stick .stick-tip {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -2px;
  width: 34%;
  height: 12px;
  border-radius: 0 0 6px 6px;
  background: rgba(255,255,255,0.85);
  opacity: 0.9;
}
.stick .stick-label {
  display: block;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
}

/* active stick is lifted & tilted upward, leaving a smudge above */
.stick.active {
  transform: translateY(-30px) rotate(-6deg);
}
.stick.active::before { box-shadow: 0 10px 12px rgba(0,0,0,0.4), inset 2px 0 3px rgba(255,255,255,0.5), inset -2px 0 3px rgba(0,0,0,0.15); }
.stick.active .stick-label { color: var(--chalk); text-shadow: 0 1px 2px rgba(0,0,0,0.5); }

/* chalk smudge left above the active stick */
.stick.active::after {
  content: '';
  position: absolute;
  left: 50%;
  top: -16px;
  width: 30px;
  height: 16px;
  transform: translateX(-50%) rotate(4deg);
  border-radius: 40% 60% 50% 50%;
  background: var(--chalk);
  filter: blur(2px);
  opacity: 0.85;
  pointer-events: none;
}

/* ===== modal ===== */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(15,24,18,0.75);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 50;
}
.modal.open { display: flex; }
.modal-card {
  width: 100%;
  max-width: 420px;
  margin: 0;
  background: var(--primary-deep);
  padding: 20px 18px;
}
.modal-card h2 { font-size: 30px; font-weight: 700; text-align: center; margin-bottom: 12px; }

label { display: block; margin-bottom: 12px; font-size: 19px; color: var(--chalk-dim); }
label.check { display: flex; align-items: center; gap: 8px; font-size: 19px; color: var(--chalk); }
input[type="text"], select {
  display: block;
  width: 100%;
  margin-top: 4px;
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(245,240,230,0.4);
  border-radius: 10px;
  color: var(--chalk);
  font-family: var(--font);
  font-size: 22px;
  padding: 9px 12px;
  outline: none;
}
input[type="text"]:focus, select:focus { border-color: var(--yellow); }
input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--pink); }
select option { color: #222; }

.hint { display: block; min-height: 18px; font-size: 15px; color: var(--danger); margin-top: 2px; }

.form-actions { display: flex; gap: 10px; margin-top: 4px; }
.btn {
  flex: 1;
  font-family: var(--font);
  font-size: 22px;
  font-weight: 700;
  border-radius: 12px;
  padding: 10px;
  cursor: pointer;
  border: 2px solid rgba(245,240,230,0.5);
  background: transparent;
  color: var(--chalk);
}
.btn.chalk { background: var(--chalk); color: var(--primary-deep); border-color: var(--chalk); }
.btn.ghost { background: transparent; color: var(--chalk-dim); }
.btn.danger { flex: none; width: 100%; margin-top: 12px; border-color: rgba(230,168,160,0.5); color: var(--danger); background: rgba(230,168,160,0.08); }

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(96px + var(--safe-b));
  transform: translateX(-50%);
  background: var(--chalk);
  color: var(--primary-deep);
  font-family: var(--font);
  font-size: 18px;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  z-index: 60;
}

.reset-row {
  text-align: center;
  margin: 8px 0 4px;
}
.reset-btn {
  font-family: var(--font);
  font-size: 16px;
  color: var(--chalk-faint);
  background: none;
  border: 1px dashed var(--chalk-faint);
  border-radius: 999px;
  padding: 4px 14px;
  cursor: pointer;
}