/* Blush theme: pink palette, soft script and serif type. Loads after styles.css and overrides it. */
:root {
  --bg: #fff3f7;
  --surface: #ffffff;
  --ink: #4b2338;
  --muted: #6b4a5c;
  --script: #b8336b;
  --line: #f4cfe0;
  --accent: #d4467f;
  --accent-ink: #ffffff;
  --warm: #c23a77;
  --chip: #ffe2ee;
  --shadow: 0 2px 6px rgba(212, 70, 127, 0.08), 0 12px 28px rgba(212, 70, 127, 0.10);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #2a1220; --surface: #3a1b2c; --ink: #ffe6f0; --muted: #d9a6bf; --line: #56263f;
    --accent: #ff7fb0; --accent-ink: #2a1220; --warm: #ffa3c7; --chip: #4a2038; --script: #ff9cc4;
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #2a1220; --surface: #3a1b2c; --ink: #ffe6f0; --muted: #d9a6bf; --line: #56263f;
  --accent: #ff7fb0; --accent-ink: #2a1220; --warm: #ffa3c7; --chip: #4a2038; --script: #ff9cc4;
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  color-scheme: dark;
}

body {
  font-family: "Quicksand", "Avenir Next", system-ui, sans-serif;
  font-weight: 600;
  font-size: 17px;
  line-height: 1.6;
}

/* Masthead: soft pink wash with a script kicker */
.masthead {
  background: linear-gradient(170deg, var(--chip) 0%, var(--surface) 70%);
  border-bottom: 1px solid var(--line);
}
.eyebrow {
  font-family: "Dancing Script", cursive;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--script);
  margin-bottom: 2px;
}
h1 {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(34px, 7vw, 52px);
  color: var(--ink);
}
.lede { font-size: 16px; color: var(--muted); }

.search input {
  border-radius: 999px;
  border: 1.5px solid var(--line);
  padding: 14px 20px;
  font-family: inherit;
  background: var(--surface);
}
.search input:focus { border-color: var(--accent); outline-color: var(--accent); }

.chip {
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font-weight: 700;
}
.chip.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); box-shadow: 0 4px 10px rgba(212, 70, 127, 0.25); }

.toggles label { color: var(--ink); font-weight: 600; }
.toggles input { accent-color: var(--accent); }

.btn {
  border-radius: 999px;
  font-family: inherit;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(212, 70, 127, 0.22);
}
.btn.ghost { box-shadow: none; background: var(--surface); }

.selects select { border-radius: 999px; border-color: var(--line); font-family: inherit; }

/* Recipe cards */
.card {
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.card:hover { border-color: var(--accent); transform: translateY(-1px); transition: transform 0.15s ease; }
.card .title {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: 19px;
  color: var(--ink);
}
.card .meta { color: var(--muted); font-weight: 600; font-size: 15px; }
.lede, .foot, .count { font-weight: 600; }
.tag { border-radius: 999px; background: var(--chip); color: var(--script); font-weight: 700; font-size: 13px; }

.fav {
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--accent);
  box-shadow: 0 2px 6px rgba(212, 70, 127, 0.12);
}
.fav.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

.star { background: var(--accent); }

/* Heart sits in the top-right corner of its card, clear of the card's tap area. */
.cell { position: relative; min-width: 0; }
.cell .card { padding-right: 60px; }
.fav {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 44px; height: 44px; margin: 0; padding: 0;
  display: grid; place-items: center;
  border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); color: var(--accent);
  font: inherit; font-size: 22px; line-height: 1; cursor: pointer;
  box-shadow: 0 2px 6px rgba(212, 70, 127, 0.12);
}
.fav.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.fav:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.count { font-weight: 600; }
.empty { font-family: "Playfair Display", Georgia, serif; font-style: italic; font-size: 18px; }

/* Recipe sheet */
dialog {
  border-radius: 24px; border: 1px solid var(--line);
  display: flex; flex-direction: column;
  max-height: calc(100dvh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  overflow: visible;
}
dialog[open] { display: flex; }
dialog > .sheet { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; -webkit-overflow-scrolling: touch; }
dialog > .dlg-actions {
  flex: 0 0 auto; flex-wrap: wrap; align-items: center; row-gap: 12px;
  padding: 18px 22px calc(22px + env(safe-area-inset-bottom, 0px));
  background: var(--surface); border-top: 1px solid var(--line);
  border-radius: 0 0 24px 24px;
}
dialog .btn { min-height: 44px; padding: 10px 18px; }
dialog .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
dialog::backdrop { background: rgba(75, 35, 56, 0.35); }
.sheet h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-size: clamp(26px, 5vw, 34px);
  color: var(--ink);
}
.sheet h3 {
  font-family: "Dancing Script", cursive;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--script);
  margin: 20px 0 6px;
}
.note { border-radius: 16px; background: var(--chip); }
.note strong { color: var(--accent); }
.dlg-actions { border-top: 1px solid var(--line); }
.ing li::marker { color: var(--accent); }
.ing label.done { color: var(--muted); }
.foot { color: var(--muted); }

/* Filters wrap onto new lines instead of scrolling sideways on phones. */
.chips, .toggles {
  flex-wrap: wrap;
  overflow: visible;
  margin-inline: 0;
  padding-inline: 0;
}
.chip, .toggles label { min-height: 44px; }
.toggles label { padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }

/* Sync code box in the shopping list */
.sync { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--line); display: grid; gap: 8px; }
.sync label { font-weight: 700; color: var(--ink); }
.sync-row { display: flex; gap: 8px; flex-wrap: wrap; }
.sync-row input { flex: 1 1 140px; min-width: 0; min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); font: inherit; }
.sync-row .btn { min-height: 44px; }