/* Sketchy wireframe base — b&w with earth-tone button accents */

:root {
  --paper: #faf7f1;
  --paper-2: #f3eee4;
  --ink: #2b2620;
  --ink-soft: #5a514a;
  --ink-fade: rgba(43, 38, 32, 0.45);
  --rule: rgba(43, 38, 32, 0.55);
  --rule-soft: rgba(43, 38, 32, 0.22);

  /* Earth tone accents (palette 1) */
  --brown: #8a6f4e;
  --terracotta: #a8754d;
  --olive: #6b7a4a;
  --clay: #c39169;

  --hand: "Caveat", "Bradley Hand", cursive;
  --pen:  "Kalam", "Comic Sans MS", cursive;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}

/* ─── Frames ─────────────────────────────────────────────── */
.wf {
  font-family: var(--pen);
  color: var(--ink);
  background: var(--paper);
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 2px;
}
.wf-mobile { font-size: 13px; }
.wf-desktop { font-size: 13px; }

/* faint paper texture */
.wf::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(0,0,0,0.015) 0, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(0,0,0,0.02) 0, transparent 40%);
  pointer-events: none;
}

/* ─── Hand-drawn borders ─────────────────────────────────── */
.box {
  border: 1.5px solid var(--rule);
  border-radius: 6px 8px 5px 9px / 7px 5px 9px 6px;
  background: rgba(255,255,255,0.4);
}
.box-tight { border-radius: 4px 6px 3px 7px / 5px 4px 6px 5px; }
.box-soft { border-color: var(--rule-soft); }
.box-dashed { border-style: dashed; }

.divider {
  height: 1.5px;
  background: var(--rule);
  border-radius: 2px;
  position: relative;
}
.divider-wavy {
  height: 6px;
  background: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 6'><path d='M0,3 Q5,0 10,3 T20,3 T30,3 T40,3' fill='none' stroke='%232b2620' stroke-width='1.2' stroke-linecap='round'/></svg>");
  background-size: 40px 6px;
  background-repeat: repeat-x;
}

/* ─── Buttons (earth tone fills) ─────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1.5px solid var(--ink);
  border-radius: 12px 14px 10px 13px / 11px 13px 12px 14px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--pen);
  font-size: inherit;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 1.5px 2px 0 rgba(43,38,32,0.18);
  transition: transform .1s;
}
.btn:active { transform: translate(1px, 1px); box-shadow: 0 0 0 rgba(0,0,0,0); }

.btn-brown { background: var(--brown); color: #fdf9f0; border-color: #4a3a25; }
.btn-terracotta { background: var(--terracotta); color: #fdf6ec; border-color: #5a3a20; }
.btn-olive { background: var(--olive); color: #f7f5e6; border-color: #3e4823; }
.btn-clay { background: var(--clay); color: #2b1f12; border-color: #5a3e20; }
.btn-ghost { background: transparent; box-shadow: none; }
.btn-sm { padding: 3px 8px; font-size: 12px; }
.btn-lg { padding: 8px 16px; font-size: 16px; }

/* ─── Form bits ──────────────────────────────────────────── */
.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.field-label {
  font-family: var(--hand);
  font-size: 16px;
  color: var(--ink-soft);
}
.input {
  border: none;
  border-bottom: 1.5px solid var(--rule);
  background: transparent;
  padding: 4px 2px;
  font-family: var(--pen);
  color: var(--ink);
  font-size: 13px;
  outline: none;
}
.input-box {
  border: 1.5px solid var(--rule);
  border-radius: 5px 7px 4px 6px / 6px 5px 7px 4px;
  padding: 6px 10px;
  background: rgba(255,255,255,0.5);
  font-family: var(--pen);
  font-size: 13px;
}

/* placeholder text inside inputs */
.ghost-text { color: var(--ink-fade); font-style: italic; }

/* ─── Headings (handwritten) ─────────────────────────────── */
.h-hand { font-family: var(--hand); font-weight: 600; color: var(--ink); line-height: 1; }
.h1 { font-family: var(--hand); font-size: 28px; line-height: 1; font-weight: 700; }
.h2 { font-family: var(--hand); font-size: 22px; line-height: 1; font-weight: 700; }
.h3 { font-family: var(--hand); font-size: 18px; line-height: 1.05; font-weight: 700; }
.eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-fade);
}
.note {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-fade);
}

/* ─── Layout helpers ─────────────────────────────────────── */
.row { display: flex; gap: 8px; align-items: center; }
.col { display: flex; flex-direction: column; gap: 8px; }
.spread { display: flex; justify-content: space-between; align-items: center; }
.fill { flex: 1; }
.center { display: flex; align-items: center; justify-content: center; }
.pad { padding: 14px; }
.pad-sm { padding: 8px 10px; }
.pad-lg { padding: 22px; }

/* ─── Mobile chrome ──────────────────────────────────────── */
.statusbar {
  display: flex; justify-content: space-between;
  padding: 6px 14px 4px;
  font-family: var(--mono); font-size: 10px;
  color: var(--ink-soft);
}
.tabbar {
  position: absolute; bottom: 0; left: 0; right: 0;
  display: flex; justify-content: space-around;
  padding: 8px 12px 14px;
  border-top: 1.5px solid var(--rule);
  background: var(--paper);
  font-family: var(--mono); font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.tabbar .tab { display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--ink-fade); }
.tabbar .tab.active { color: var(--ink); }
.tabbar .tab .dot { width: 18px; height: 18px; border: 1.5px solid currentColor; border-radius: 50% 60% 45% 55% / 50% 45% 55% 50%; }

/* ─── Desktop chrome ─────────────────────────────────────── */
.appbar {
  display: flex; align-items: center;
  padding: 10px 18px;
  border-bottom: 1.5px solid var(--rule);
  gap: 16px;
}
.brand {
  font-family: var(--hand);
  font-size: 22px;
  font-weight: 700;
  display: flex; align-items: center; gap: 6px;
}
.brand-mark {
  width: 22px; height: 22px;
  border: 1.5px solid var(--ink);
  border-radius: 50% 60% 45% 55%;
  background: var(--clay);
  display: inline-block;
}

/* ─── Calendar bits ──────────────────────────────────────── */
.slot {
  border: 1.5px solid var(--rule-soft);
  border-radius: 5px 7px 4px 6px / 6px 5px 7px 4px;
  padding: 6px 8px;
  background: rgba(255,255,255,0.55);
  min-height: 32px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
}
.slot-filled { background: rgba(255,255,255,0.85); border-color: var(--rule); }
.slot-eatout { background: repeating-linear-gradient(45deg, rgba(168,117,77,0.08) 0 6px, transparent 6px 12px); border-color: var(--terracotta); }
.slot-adhoc { background: repeating-linear-gradient(-45deg, rgba(107,122,74,0.1) 0 5px, transparent 5px 10px); border-color: var(--olive); }
.slot-empty {
  border-style: dashed;
  color: var(--ink-fade);
  font-style: italic;
  justify-content: center;
  align-items: center;
}
.slot .mealname { font-size: 12px; line-height: 1.1; }
.slot .mealsides { font-size: 10px; color: var(--ink-soft); font-family: var(--mono); }
.slot .meta { font-family: var(--mono); font-size: 9px; color: var(--ink-fade); }

.slot-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-fade);
}

/* tag chip */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px;
  border: 1.5px solid var(--rule);
  border-radius: 14px;
  font-size: 11px;
  background: rgba(255,255,255,0.6);
}
.chip-brown { background: var(--brown); color: #fdf9f0; border-color: #4a3a25; }
.chip-terracotta { background: var(--terracotta); color: #fdf6ec; border-color: #5a3a20; }
.chip-olive { background: var(--olive); color: #f7f5e6; border-color: #3e4823; }

/* checkboxes */
.check {
  width: 14px; height: 14px;
  border: 1.5px solid var(--ink);
  border-radius: 3px 4px 2px 3px;
  background: transparent;
  flex: 0 0 14px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--hand);
  font-size: 16px;
  line-height: 1;
}
.check.checked::after {
  content: "✓";
  color: var(--ink);
  margin-top: -4px;
}
.struck { text-decoration: line-through; text-decoration-thickness: 1.5px; color: var(--ink-fade); }

/* scribble strikethrough for pantry items already-on-hand */
.scribble {
  position: relative;
  color: var(--ink-fade);
}
.scribble::after {
  content: "";
  position: absolute;
  left: -2px; right: -2px; top: 50%;
  height: 6px; transform: translateY(-50%);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 6'><path d='M0,3 Q25,0 50,3 T100,3' fill='none' stroke='%236b7a4a' stroke-width='1.4'/></svg>");
  background-size: 100% 6px;
  background-repeat: no-repeat;
}

/* annotation callouts (handwritten notes pointing at things) */
.callout {
  position: absolute;
  font-family: var(--hand);
  font-size: 15px;
  color: var(--terracotta);
  line-height: 1;
  pointer-events: none;
}
.callout svg { position: absolute; }

/* sketchy underline */
.underline-sketch {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 4'><path d='M0,2 Q15,4 30,2 T60,2' fill='none' stroke='%23a8754d' stroke-width='1.6' stroke-linecap='round'/></svg>");
  background-size: 60px 4px;
  background-repeat: repeat-x;
  background-position: 0 100%;
  padding-bottom: 4px;
}

/* placeholder image block */
.placeholder-img {
  border: 1.5px solid var(--rule);
  border-radius: 4px 6px 3px 5px;
  background-image: repeating-linear-gradient(45deg, transparent 0 6px, rgba(43,38,32,0.08) 6px 7px);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 9px; color: var(--ink-fade);
  text-align: center;
  padding: 4px;
}

/* radio circle */
.radio { width: 14px; height: 14px; border: 1.5px solid var(--ink); border-radius: 50%; display: inline-block; }
.radio.on { background: radial-gradient(circle, var(--ink) 0 4px, transparent 5px); }