/* The Miller Table — warm kitchen palette, mobile first. */
:root {
  --bg: #faf6f0;
  --card: #ffffff;
  --ink: #2b211c;
  --muted: #7a6a60;
  --line: #e8dfd4;
  --accent: #8b4a2f;
  --accent-ink: #ffffff;
  --accent-soft: #f3e3d8;
  --good: #3f7d4e;
  --good-soft: #e3f1e6;
  --bad: #b4473a;
  --bad-soft: #f8e1dd;
  --star: #d9a21b;
  --radius: 14px;
  --tabbar-h: 64px;
  color-scheme: light;
}
/* Dark mode only when chosen on the Me tab (data-mode="dark"), not from the device setting. */
:root[data-mode="dark"] {
  --bg: #1c1714;
  --card: #27201c;
  --ink: #f3ebe4;
  --muted: #b3a397;
  --line: #3b312b;
  --accent: #d98a64;
  --accent-ink: #1c1714;
  --accent-soft: #3d2a20;
  --good: #7fc28e;
  --good-soft: #213428;
  --bad: #ec8f81;
  --bad-soft: #3c2421;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 16px);
}

a { color: var(--accent); }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .4em; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.05rem; margin-top: .6em; }
code { font-family: ui-monospace, Menlo, Consolas, monospace; }

/* ---------- Layout ---------- */
.topbar {
  position: sticky; top: 0; z-index: 5;
  background: var(--bg);
  padding: calc(env(safe-area-inset-top) + 12px) 16px 10px;
  border-bottom: 1px solid var(--line);
}
.topbar { display: flex; align-items: center; gap: 10px; }
.topbar h1 { font-size: 1.25rem; margin: 0; font-family: Georgia, "Times New Roman", serif; }
/* Brand: the icon on phones (next to the page name); icon + "The Miller Table" on PC */
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); flex: none; }
.brand img { width: 30px; height: 30px; border-radius: 8px; display: block; }
.brand-name { display: none; font-family: Georgia, "Times New Roman", serif; font-size: 1.3rem; font-weight: 700; color: var(--accent); white-space: nowrap; }

main { max-width: 720px; margin: 0 auto; padding: 14px 16px; }

.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: flex;
  background: var(--card);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbar a {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: var(--tabbar-h); gap: 2px;
  text-decoration: none; color: var(--muted); font-size: .75rem;
}
.tabbar a span { font-size: 1.35rem; }
.tabbar a.on { color: var(--accent); font-weight: 600; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 12px;
}
.stack { display: flex; flex-direction: column; gap: 10px; }
.row { display: flex; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.gap { gap: 8px; }
.between { justify-content: space-between; }
.center-y { align-items: center; }
.grow { flex: 1; min-width: 0; }
.center { text-align: center; }
.pad { padding: 24px; }
.nowrap { white-space: nowrap; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.prewrap { white-space: pre-wrap; }
.empty { color: var(--muted); text-align: center; padding: 28px 12px; list-style: none; }

.toolbar { display: flex; gap: 8px; margin-bottom: 12px; }
.toolbar input { flex: 1; min-width: 0; }

/* ---------- Forms ---------- */
label { display: flex; flex-direction: column; gap: 4px; font-size: .9rem; font-weight: 600; }
label.check, label.row { flex-direction: row; align-items: center; gap: 8px; font-weight: 400; }
input, select, textarea {
  font: inherit; font-size: 16px; /* 16px stops iOS zooming into fields */
  color: var(--ink); background: var(--bg);
  border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px; width: 100%;
}
input[type=checkbox] { width: 22px; height: 22px; accent-color: var(--accent); flex: none; }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
  color: var(--ink); background: var(--card);
  border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 14px; min-height: 44px; white-space: nowrap;
}
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn.small { min-height: 34px; padding: 6px 10px; font-size: .85rem; }
.btn.ghost { background: transparent; color: var(--muted); }
.btn.link { background: none; border: none; color: var(--accent); min-height: 0; padding: 8px 0; }
.btn.danger { color: var(--bad); }
.btn.block { display: flex; width: 100%; margin-top: 8px; }
.btn:disabled { opacity: .5; cursor: default; }
.icon-btn {
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: 1.4rem; line-height: 1; width: 36px; height: 36px; flex: none;
}

/* ---------- Chips & badges ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  font: inherit; font-size: .85rem; cursor: pointer;
  padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
}
.chip.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.chip-x { background: none; border: none; color: inherit; font-size: 1rem; cursor: pointer; padding: 0 0 0 2px; }
.chips.big .chip { min-height: 44px; padding: 8px 14px; font-size: .95rem; }   /* Decide tab: tap-first answers */

/* ---------- Decide ---------- */
.section-title { font-size: 1.1rem; margin: 0; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.field .chips { margin-bottom: 0; }
.count { min-width: 2.5ch; text-align: center; font-size: 1.15rem; }
.filters { padding: 0; overflow: hidden; }
.filters-head { padding: 14px 14px 10px; }
.filter { border-top: 1px solid var(--line); }
.filter summary {
  display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 14px;
  cursor: pointer; list-style: none;
}
.filter summary::-webkit-details-marker { display: none; }
.filter summary::after { content: '›'; font-size: 1.4rem; line-height: 1; color: var(--muted); transition: transform .15s; }
.filter[open] summary::after { transform: rotate(90deg); }
.filter[open] summary { background: var(--accent-soft); }
.filter-icon { font-size: 1.2rem; width: 1.6rem; text-align: center; }
.filter-name { font-weight: 600; }
.filter-picked { margin-left: auto; max-width: 55%; color: var(--accent); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filter > .chips { padding: 12px 14px 4px; }
.filter > input { display: block; width: calc(100% - 28px); margin: 12px 14px 14px; }
.decide-go {
  position: sticky; z-index: 4; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  margin: 0 -16px; padding: 8px 16px; background: var(--bg); border-top: 1px solid var(--line);
}
.decide-go .btn.block { margin-top: 0; min-height: 50px; font-size: 1.05rem; }
.btn.block-center { display: block; margin: 4px auto 0; }
.pa-filters { margin: 0; }
.pa-filters .chip { min-height: 36px; }
.pa-book { max-height: 46vh; overflow-y: auto; border: 1px solid var(--line); border-radius: 12px; padding: 4px; }
.pa-count { padding: 4px 8px; }
.pa-opt .grow { display: flex; flex-direction: column; }
.pa-suggest { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 12px; background: color-mix(in srgb, var(--accent-soft) 60%, var(--card)); }
/* Decide: Cook at home / Eat out switch, and place cards */
.seg.mode-switch { display: flex; width: 100%; margin: 0 0 12px; }
.seg.mode-switch button { flex: 1; min-height: 50px; font-size: 1.02rem; }
.place .stack { gap: 6px; }
.place p { margin: 0; }
.place-rate .btn.on { background: var(--accent-soft); border-color: var(--accent); }
.decide-hint { margin: 0 0 8px; }
.decide-results { margin-top: 12px; }
.decide-results .section-title { margin: 4px 0 10px; }
.decide-empty { display: none; }
.idea { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: start; }
.idea p { margin: 0; }
.idea-body { gap: 6px; }
.idea-img { width: 96px; height: 96px; border-radius: 10px; object-fit: cover; background: var(--accent-soft); }
.idea-noimg { display: flex; align-items: center; justify-content: center; font-size: 2rem; }
#d-more { margin: 4px 0 10px; }
@media (max-width: 420px) {
  .idea { grid-template-columns: 72px minmax(0, 1fr); gap: 10px; }
  .idea-img { width: 72px; height: 72px; }
}

/* ---------- Wide screens (PC): menu in the header, Decide in two columns ---------- */
@media (min-width: 900px) {
  body { padding-bottom: 24px; }
  .topbar {
    display: flex; align-items: center; min-height: 60px; padding-top: 0; padding-bottom: 0;
    padding-left: max(16px, calc((100vw - 1100px) / 2 + 16px));
  }
  .tabbar {
    top: 0; bottom: auto; left: auto; height: 60px; z-index: 6; align-items: center; gap: 4px;
    right: max(16px, calc((100vw - 1100px) / 2 + 16px));
    background: transparent; border: none; padding: 0;
  }
  .tabbar a { flex: none; flex-direction: row; height: 40px; padding: 0 14px; gap: 6px; border-radius: 999px; font-size: .95rem; }
  .brand img { width: 38px; height: 38px; border-radius: 10px; }
  .brand-name { display: inline; }
  .topbar h1 { display: none; }   /* the highlighted menu item says where you are */
  .tabbar a span { font-size: 1.05rem; }
  .tabbar a.on { background: var(--accent-soft); }
  .tabbar a:hover { color: var(--accent); }
  main:has(.decide) { max-width: 1100px; padding-top: 20px; }
  .decide { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px; align-items: start; }
  .decide-go { bottom: 0; margin: 0; padding: 12px 0 16px; border-top: none; }
  .decide-results { margin-top: 0; position: sticky; top: 80px; max-height: calc(100vh - 100px); overflow: auto; }
  .decide-empty { display: block; padding: 48px 24px; line-height: 1.8; }
}
.badge { display: inline-block; font-size: .72rem; font-weight: 600; padding: 2px 7px; border-radius: 999px; margin-left: 4px; vertical-align: middle; }
.badge.good { background: var(--good-soft); color: var(--good); }
.badge.bad { background: var(--bad-soft); color: var(--bad); }

/* ---------- Recipes ---------- */
.cards { list-style: none; margin: 0; padding: 0; }
.recipe-card { display: flex; align-items: center; gap: 8px; padding: 12px 14px; }
.recipe-card a { text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 2px; }
.star { background: none; border: none; cursor: pointer; font-size: 1.5rem; color: var(--line); width: 40px; height: 40px; flex: none; }
.star.on { color: var(--star); }
.star.big { font-size: 1.9rem; }
.recipe h2 { font-family: Georgia, "Times New Roman", serif; }
.ingredients { padding-left: 20px; margin: 0; }
.ingredients li { margin: 3px 0; }
.recipe-thumb { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; flex: none; background: var(--accent-soft); font-size: 1.5rem; }
.recipe-card a.recipe-thumb-link { flex: none; }
/* Recipe book: sort + view switch, and the Photos / Compact views */
.rbook-bar { margin: 0 0 10px; flex-wrap: wrap; }
.rbook-sort select { width: auto; padding: 6px 30px 6px 10px; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--card); }
.seg button { font: inherit; font-size: .9rem; border: none; background: none; color: var(--ink); padding: 8px 12px; min-height: 40px; cursor: pointer; }
.seg button + button { border-left: 1px solid var(--line); }
.seg button.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
@media (max-width: 420px) { .seg button span { display: none; } }
.cards.rbook-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.rgrid-card { padding: 0; margin: 0; overflow: hidden; display: flex; flex-direction: column; }
.rgrid-photo { display: block; position: relative; }
.rgrid-made { position: absolute; top: 8px; left: 8px; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; background: var(--good); color: var(--card); font-size: 1.25rem; font-weight: 900;
  box-shadow: 0 0 0 3px var(--card), 0 2px 6px rgba(0, 0, 0, .25); }
.made-tag { align-self: flex-start; background: var(--good-soft); color: var(--good); font-weight: 700; font-size: .85rem;
  border-radius: 999px; padding: 1px 9px; }
.lk-picks { margin: 0; padding-left: 20px; }
.idea-narrow { background: var(--accent-soft); border-radius: 10px; padding: 8px 12px; margin: 0; }
.rgrid-body { display: flex; align-items: flex-start; gap: 2px; padding: 8px 2px 10px 10px; }
.rgrid-link { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; color: inherit; text-decoration: none; }
.rgrid-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: flex; align-items: center; justify-content: center; font-size: 2rem;
  background: var(--accent-soft); margin-bottom: 4px; }
.rgrid-acts { display: flex; flex: none; }
@media (min-width: 900px) { .cards.rbook-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; } }
.rgrid-acts .heart, .rgrid-acts .star { width: 34px; height: 34px; font-size: 1.25rem; }
.cards.rbook-compact { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.rcompact { display: flex; align-items: center; gap: 8px; padding: 2px 6px 2px 14px; border-top: 1px solid var(--line); min-height: 48px; }
.rcompact:first-child { border-top: none; }
.rcompact a { color: inherit; text-decoration: none; }
.recipe-hero { display: block; width: calc(100% + 28px); aspect-ratio: 4 / 3; max-height: 62vh; object-fit: cover; object-position: center 40%;
  margin: -14px -14px 12px; border-radius: var(--radius) var(--radius) 0 0; background: var(--accent-soft); }
/* Wide screens: the photo sits beside the title at a normal photo shape instead of a stretched strip */
@media (min-width: 900px) {
  .rp-head:has(.recipe-hero) { display: grid; grid-template-columns: minmax(300px, 42%) 1fr; gap: 22px; align-items: start; }
  .rp-head .recipe-hero { width: 100%; margin: 0; border-radius: 14px; max-height: 460px; }
}
.serves { flex-wrap: wrap; margin: 12px 0 4px; }
.rate { margin-bottom: 4px; }
.rate-btn { min-width: 52px; font-size: 1.3rem; padding: 6px 12px; }
.rate-btn.on { background: var(--accent-soft); border-color: var(--accent); }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; margin-bottom: 10px; }
.photo-grid > p { grid-column: 1 / -1; margin: 0; }
.photo { position: relative; margin: 0; }
.photo img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; }
.photo-x { position: absolute; top: 4px; right: 4px; width: 32px; height: 32px; border-radius: 50%; border: none;
  background: rgba(0, 0, 0, .55); color: #fff; font-size: 1.2rem; line-height: 1; cursor: pointer; }
.print-only { display: none; }

/* ---------- Recipe page sections: a soft tint and an accent bar so each part stands apart ---------- */
.rsec {
  margin-top: 14px; padding: 12px 14px 14px; border-radius: 12px; border-left: 4px solid var(--accent);
  background: var(--accent-soft);
  background: color-mix(in srgb, var(--accent-soft) 55%, var(--card));
}
.rsec h3 { margin: 0 0 8px; font-size: 1.05rem; }
.rsec-ingredients { background: var(--accent-soft); }
#d-scale-tip:empty { display: none; }
.steps { margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { position: relative; padding: 2px 0 10px 40px; counter-increment: step; line-height: 1.5; }
.steps li::before {
  content: counter(step); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .9rem;
  background: var(--accent); color: var(--accent-ink);
}
.steps li.step-head { padding-left: 0; font-weight: 700; counter-increment: none; color: var(--accent); }
.steps li.step-head::before { display: none; }
.heart { background: none; border: none; cursor: pointer; font-size: 1.45rem; color: var(--line); width: 40px; height: 40px; flex: none; position: relative; }
.heart.on { color: #e0245e; }
.heart.some { color: #f29bb8; }   /* loved by others, not (yet) by me */
.heart small { position: absolute; right: 2px; bottom: 4px; font-size: .65rem; font-weight: 700; color: var(--muted); }
.heart.big { font-size: 1.8rem; }
.loved-by { color: #c2185b; margin: -4px 0 4px; }
.loved-by:empty { display: none; }
.decide-results .idea-group { margin: 18px 0 10px; }
/* Editing a result list: pick ideas to replace or save; update after changing choices */
.idea-tools { margin: 4px 0 10px; }
.idea-tools .btn.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.idea-actions { position: sticky; top: 70px; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px;
  padding: 8px 12px; border-radius: 12px; background: var(--card); border: 2px solid var(--accent); }
.idea-actions > span { margin-right: auto; }
.idea-update { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; padding: 10px 12px; border-radius: 12px;
  background: color-mix(in srgb, var(--star) 16%, var(--card)); }
.idea { position: relative; }
.idea-pick { position: absolute; top: 8px; left: 8px; z-index: 2; background: var(--card); border-radius: 8px; padding: 6px; box-shadow: 0 1px 4px rgb(0 0 0 / .2); }
.idea-pick input { width: 26px; height: 26px; }
.idea.picked { outline: 3px solid var(--accent); outline-offset: -1px; }
.idea-links { justify-content: center; gap: 14px; margin-top: 2px; }
.decide-results .idea-meal { margin: 16px 0 8px; font-size: 1.05rem; padding-bottom: 4px; border-bottom: 2px solid var(--accent-soft); }
.size-hint { margin: 6px 0 0; }
.card.quick { display: flex; flex-direction: column; gap: 8px; }
.card.quick .chips { margin-bottom: 0; }
.chip.qp { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.chip.qp:hover { background: var(--accent-soft); }
#d-qp-save { align-self: flex-start; }
.decide-always { margin: 0 0 6px; color: var(--ink); }
/* ---------- Nutrition panel (macro colors: dataviz palette slots 1–3, light / dark) ---------- */
:root { --m-protein: #2a78d6; --m-carbs: #eb6834; --m-fat: #1baf7a; }
:root[data-mode="dark"] { --m-protein: #3987e5; --m-carbs: #d95926; --m-fat: #199e70; }
.ntiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 4px 0 12px; }
.ntile { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; }
.nval { font-size: 1.5rem; font-weight: 700; line-height: 1.1; color: var(--ink); }
.nval small { font-size: .9rem; font-weight: 600; margin-left: 1px; }
.nlab { font-size: .8rem; color: var(--muted); display: flex; align-items: center; gap: 5px; }
.msw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: none; }
.m-p { background: var(--m-protein); } .m-c { background: var(--m-carbs); } .m-f { background: var(--m-fat); }
.mbar { display: flex; gap: 2px; height: 14px; border-radius: 4px; overflow: hidden; background: var(--card); }
.mseg { display: block; min-width: 4px; cursor: help; }
.mseg:first-child { border-radius: 4px 0 0 4px; } .mseg:last-child { border-radius: 0 4px 4px 0; }
.mlegend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 6px 0 4px; color: var(--ink); }
.mlegend span { display: inline-flex; align-items: center; gap: 5px; }
.nextra { margin: 4px 0; color: var(--ink); }
.nchecks { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.nchecks li { font-size: .85rem; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink); }
.nchecks .nc-yes span { color: var(--good); font-weight: 700; } .nchecks .nc-no span { color: var(--bad); font-weight: 700; }
@media (max-width: 480px) { .ntiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media print { .ntile { border-color: #999; } .mseg { print-color-adjust: exact; -webkit-print-color-adjust: exact; } }

/* Decide: calorie limit */
.cal-field label.check { gap: 8px; }
.cal-row input[type=range] { flex: 1; min-width: 120px; accent-color: var(--accent); padding: 0; height: 32px; }
.cal-val { min-width: 4ch; text-align: right; font-size: 1.1rem; }
.cal-val::after { content: ' cal'; font-size: .8rem; font-weight: 400; color: var(--muted); }

/* ---------- Grocery list ---------- */
.li-stores { margin-bottom: 0; }
.li-stores .chip.on { font-weight: 700; }
.li-store-add { text-decoration: none; border-style: dashed; color: var(--muted); }
.li-group { margin: -2px 0 12px; }
.li-group .chip { min-height: 36px; padding: 4px 12px; }
.li-back { opacity: .9; }
.li-done-actions { margin-top: 8px; }
.li-foot { margin-top: 16px; }
.lsv-list { list-style: none; margin: 0; padding: 0; }
.lsv-item { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; border-top: 1px solid var(--line); }
.lsv-item:first-child { border-top: none; }
.glist { max-width: 760px; margin: 0 auto; }
.li-head { display: flex; flex-direction: column; gap: 10px; border-top: 4px solid var(--accent); }
.li-head-icon { font-size: 1.6rem; }
.li-pick { border: none; background: transparent; padding: 4px 6px; font-family: Georgia, "Times New Roman", serif;
  font-size: 1.35rem; font-weight: 700; color: var(--ink); width: auto; max-width: 100%; cursor: pointer; }
.li-pick:hover { background: var(--accent-soft); }
.li-store { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.li-store select { max-width: 320px; }
.li-tools:empty { display: none; }
.li-total { margin: 0; }
.li-add { display: flex; gap: 8px; margin: 0 0 12px; }
.li-add input { flex: 1; min-width: 0; min-height: 50px; font-size: 1.05rem; border: 2px solid var(--line); background: var(--card); }
.li-add input:focus { border-color: var(--accent); outline: none; }
.li-add .btn { min-height: 50px; padding: 0 20px; font-size: 1.05rem; }
.li-mode { margin: 0 0 8px; }
.li-quick { margin: -4px 0 12px; }
.li-quick .chips { margin-bottom: 8px; }
.chip.li-q { min-height: 40px; padding: 6px 12px; font-size: .92rem; }
.chip.li-q.on { background: var(--good-soft); border-color: var(--good); color: var(--good); }
.chip.li-q-edit, .chip.li-q-more { min-height: 40px; border-style: dashed; color: var(--accent); }
.li-from { gap: 8px; }
.li-tasks h3 { color: var(--accent); }
.li-task .li-name::before { content: "📝 "; }
.li-views { margin-bottom: 10px; }
.li-views .chip { min-height: 40px; padding: 6px 12px; font-size: .9rem; }
.li-viewbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; margin-bottom: 12px; border-radius: 12px; background: var(--accent-soft); border-left: 4px solid var(--accent); }
.li-progress { display: flex; align-items: center; gap: 12px; margin: 0 2px 12px; }
.li-bar { flex: 1; height: 10px; border-radius: 5px; background: var(--line); overflow: hidden; }
.li-bar span { display: block; height: 100%; background: var(--good); transition: width .25s; }
.li-section { margin-bottom: 12px; padding: 10px 14px 6px; border-radius: 12px; border-left: 4px solid var(--accent);
  background: var(--card); box-shadow: 0 1px 0 var(--line); border-top: 1px solid var(--line); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.li-section h3 { margin: 2px 0 4px; font-size: 1rem; display: flex; align-items: center; gap: 6px; }
.li-list { list-style: none; margin: 0; padding: 0; }
.li-item { display: flex; align-items: center; gap: 6px; padding: 6px 0; border-top: 1px solid var(--line); }
.li-section .li-item:first-child, .li-done .li-item:first-child { border-top: none; }
.li-check { flex: 1; min-width: 0; display: flex; flex-direction: row; align-items: center; gap: 12px; font-weight: 400; cursor: pointer; min-height: 44px; }
.li-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.li-box { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--accent); background: var(--card);
  display: flex; align-items: center; justify-content: center; transition: background .15s; }
.li-check input:checked + .li-box { background: var(--good); border-color: var(--good); }
.li-check input:checked + .li-box::after { content: '✓'; color: #fff; font-weight: 700; font-size: .9rem; }
.li-check input:focus-visible + .li-box { outline: 2px solid var(--accent); outline-offset: 2px; }
.li-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.li-name { font-size: 1.02rem; overflow-wrap: anywhere; }
.li-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.li-meta:empty { display: none; }
.li-meta .badge { margin-left: 0; }
.li-from { font-size: .78rem; color: var(--accent); }
.li-act { opacity: .55; }
.li-item:hover .li-act, .li-act:focus-visible { opacity: 1; }
.li-item.checked .li-name { text-decoration: line-through; color: var(--muted); }
.li-done { margin: 4px 0 12px; padding: 8px 14px; border-radius: 12px; background: var(--good-soft); }
.li-done summary { cursor: pointer; font-weight: 600; min-height: 36px; display: flex; align-items: center; }
.li-empty { text-align: center; padding: 28px 16px; line-height: 1.7; }

/* List page (v0.27): one card per area — header, Shopping at, Add, To do, To get, In the cart */
.li-card { display: flex; flex-direction: column; gap: 10px; }
.li-card-title { margin: 0; font-size: 1.05rem; display: flex; align-items: center; gap: 8px; }
.li-count { min-width: 26px; height: 24px; padding: 0 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent);
  font-size: .85rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.li-head-acts .btn { white-space: nowrap; }
@media (max-width: 480px) { .li-share-label { display: none; } .li-share-btn { width: 40px; height: 40px; border-radius: 50%; padding: 0; justify-content: center; font-size: 1.15rem; } }
.li-menu-btn { font-size: 1.5rem; line-height: 1; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); }
.li-head .li-progress, .li-storecard .li-tools, .li-nolive, .li-addcard .li-add, .li-addcard .li-mode, .li-addcard .li-quick { margin: 0; }
.li-addcard .li-from .btn { min-height: 38px; }
.li-listcard .li-section { margin: 0; padding: 0; border: none; box-shadow: none; background: none; border-radius: 0; }
.li-listcard .li-section + .li-section { border-top: 2px solid var(--accent-soft); padding-top: 6px; }
.li-listcard .li-section h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--accent); margin: 6px 0 0; }
.li-group select { width: auto; padding: 6px 30px 6px 10px; min-height: 40px; }
.li-done.card { background: var(--good-soft); border-color: transparent; padding: 8px 14px; }
.li-fresh { align-self: flex-start; padding: 0; min-height: 0; }
.lc-item { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 12px; background: var(--accent-soft); }
.lc-compare { background: color-mix(in srgb, var(--star) 14%, var(--card)); }
.lc-item p { margin: 0; }
/* Recipe check */
.rp-check { background: color-mix(in srgb, var(--star) 14%, var(--card)); border-left-color: var(--star); }
.check-list { margin: 0 0 4px; padding-left: 20px; }
.check-list li { margin: 3px 0; }
.ing-head { list-style: none; font-weight: 700; font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; color: var(--accent); margin: 10px 0 2px; }
.ingredients .ing-head:first-child { margin-top: 0; }
.line-hidden { opacity: .55; }
.li-tasks .li-item:first-child { border-top: none; }
@media print {
  .glist .card { border: none; box-shadow: none; padding: 0; }
  .li-print-name { display: block; font-size: 18pt; font-family: Georgia, serif; }
  .li-act, .li-menu-btn, .li-head-icon { display: none !important; }
  .li-box { border-color: #000 !important; background: #fff !important; }
  .li-listcard .li-section h3, .li-tasks h3 { color: #000; }
  .li-count { background: none; color: #000; }
}
/* The red number on the List tab: what's still to get */
.tabbar a[data-tab="list"] { position: relative; }
.tabbar a[data-count]::after { content: attr(data-count); position: absolute; top: 5px; left: calc(50% + 6px); min-width: 20px; height: 20px;
  padding: 0 5px; border-radius: 999px; background: var(--bad); color: #fff; font-size: .72rem; font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center; border: 2px solid var(--card); box-sizing: border-box; }
@media (min-width: 900px) { .tabbar a[data-count]::after { top: -2px; left: auto; right: -4px; } }
.rfilters > summary { list-style: none; cursor: pointer; }
.rfilters > summary::-webkit-details-marker { display: none; }
.rfilters .rf-time { padding: 4px 14px 12px; }
.rfilters .rf-time .chips { margin-bottom: 0; }
#r-more-clear[hidden] { display: none; }
.decide-always:empty { display: none; }

/* ---------- Taste quiz ---------- */
.taste { max-width: 760px; margin: 0 auto; }
.taste h2 { margin: 4px 0 14px; }
.taste-progress { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; margin: 4px 0 8px; }
.taste-progress span { display: block; height: 100%; background: var(--accent); transition: width .2s; }
.taste-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.taste-card {
  display: flex; flex-direction: column; gap: 4px; padding: 0 0 12px; text-align: left; cursor: pointer;
  font: inherit; color: var(--ink); background: var(--card); border: 2px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.taste-card:hover, .taste-card:focus-visible { border-color: var(--accent); }
.taste-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--accent-soft); margin-bottom: 6px; }
.taste-card strong, .taste-card span { padding: 0 12px; }
.taste-more { margin-top: 12px; }
.taste-more .btn { min-height: 50px; font-size: 1.05rem; }
.taste-foot { margin-top: 6px; }
.taste-invite { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; border-color: var(--accent); background: var(--accent-soft); }
.taste-invite-emoji { font-size: 2rem; }
.tweaks { padding-left: 20px; margin: 0 0 6px; }
.tweaks li { margin: 3px 0; }
#d-reviews { margin-top: 6px; }

/* ---------- Recipe page: made it, tags, ingredient picks, my notes ---------- */
.made-row { margin: 2px 0 10px; }
/* Recipe page layout: quick facts, main actions, then ingredients beside steps on wide screens */
.rp-facts { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.rp-facts:empty { display: none; }
.rp-fact { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 999px; font-size: .9rem;
  background: var(--accent-soft); color: var(--ink); }
.rp-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 8px 0 4px; }
.rp-actions .btn { min-height: 48px; }
.rp-actions .btn.primary { grid-column: 1 / -1; font-size: 1.05rem; }
@media (min-width: 600px) { .rp-actions { display: flex; flex-wrap: wrap; } .rp-actions .btn.primary { grid-column: auto; } }
@media (min-width: 900px) {
  main:has(.recipe) { max-width: 1100px; }
  .rp-cols { display: grid; grid-template-columns: minmax(300px, 2fr) 3fr; gap: 16px; align-items: start; }
  .rp-left { position: sticky; top: 72px; }
  .rp-right > .rsec:first-child { margin-top: 14px; }
}
.more-menu .btn { justify-content: flex-start; }
.more-btn { font-size: 1.6rem; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); line-height: 1; }
.send-row { display: flex; flex-wrap: wrap; gap: 8px; }
.send-row .btn { flex: 1 1 130px; min-height: 48px; }
/* 👩‍🍳 Cooking mode: full screen, big type, one step at a time */
.cook-mode { position: fixed; inset: 0; z-index: 40; background: var(--bg); display: flex; flex-direction: column; gap: 12px;
  padding: calc(14px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom)); overflow-y: auto; }
.cook-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cook-top strong { font-family: Georgia, "Times New Roman", serif; font-size: 1.15rem; }
.cook-ing { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 4px 12px; }
.cook-ing summary { cursor: pointer; font-weight: 600; padding: 8px 0; }
.cook-ing ul { list-style: none; margin: 0 0 8px; padding: 0; }
.cook-step { flex: 1; display: flex; flex-direction: column; justify-content: center; max-width: 760px; margin: 0 auto; width: 100%; }
.cook-n { font-size: .85rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); }
.cook-step p { font-size: 1.45rem; line-height: 1.5; margin: 8px 0 0; }
.cook-mode[hidden] { display: none; }
.cook-bar { position: fixed; z-index: 35; left: 12px; right: 12px; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 12px);
  max-width: 560px; margin: 0 auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--card);
  border: 1px solid var(--line); border-left: 5px solid var(--accent); border-radius: 14px; padding: 10px 12px; box-shadow: 0 6px 24px rgba(0, 0, 0, .18); }
.cook-bar[hidden] { display: none; }
@media (min-width: 900px) { .cook-bar { bottom: 24px; } }
#d-steps li { cursor: default; }
.steps li.step-now { background: var(--accent-soft); outline: 3px solid var(--accent); outline-offset: 4px; border-radius: 6px; }
.cook-nav { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; max-width: 760px; margin: 0 auto; width: 100%; }
.cook-nav .btn { min-height: 60px; font-size: 1.15rem; }
.made-btn { border-radius: 999px; min-height: 44px; }
.made-btn.on { background: var(--good-soft); border-color: var(--good); color: var(--good); font-weight: 600; }
.tag-edit { align-items: center; }
.tag-edit .chip { min-height: 36px; }
.chip.tag-add { border-style: dashed; color: var(--accent); }
.tag-form input { width: 170px; padding: 6px 10px; }
.ingredients:has(.ing) { list-style: none; padding-left: 0; }
.ing { flex-direction: row; align-items: flex-start; gap: 10px; font-weight: 400; font-size: 1rem;
  padding: 7px 8px; margin: 0 -8px; border-radius: 10px; cursor: pointer; }
.ing input { margin-top: 1px; }
.ing.on { background: var(--card); }
.ing.on span { font-weight: 600; }
.ing-hint { margin: -4px 0 6px; }
.ing-actions { margin-top: 10px; }
.my-notes textarea { background: var(--card); }
.badge-made { color: var(--good); font-weight: 600; }

/* ---------- Printing a recipe: black on white, just the recipe ---------- */
@media print {
  :root, :root[data-mode="dark"] { --bg: #fff; --card: #fff; --ink: #000; --muted: #444; --line: #bbb; --accent: #000; --accent-soft: #fff; color-scheme: light; }
  body { padding: 0; font-size: 12pt; background: #fff; }
  .topbar, .tabbar, .toast, .no-print, .star, .chips { display: none !important; }
  .print-only { display: block; }
  main { max-width: none; padding: 0; }
  .card { border: none; padding: 0; margin: 0; }
  .rsec { background: none !important; border-left: 3px solid #999; padding: 4pt 0 4pt 10pt; break-inside: avoid-page; }
  .steps li::before { background: #fff; color: #000; border: 1px solid #000; }
  .loved-by, .heart { display: none !important; }
  .recipe-hero { width: 45%; max-height: 2.4in; margin: 0 0 8pt; border-radius: 6pt; }
  .recipe h2 { font-size: 20pt; }
  .recipe h3 { margin-top: 12pt; break-after: avoid; }
  .ingredients li { break-inside: avoid; }
  .ing input { display: none; }
  .ing { padding: 0; margin: 0; }
  .ing span::before { content: "• "; }
  .ing.on span { font-weight: 400; }
  .my-notes.empty-print { display: none !important; }
  .serves .count { font-size: 12pt; }
  a { color: #000; text-decoration: none; }
}

/* ---------- Plan ---------- */
.week-nav { margin-bottom: 12px; }
/* This week's dinners */
.week { max-width: 720px; margin: 0 auto; }
.week-list { list-style: none; margin: 0; padding: 0; }
.week-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.week-item:first-child { border-top: none; }
.week-item a { color: inherit; text-decoration: none; }
.week-item .grow { display: flex; flex-direction: column; gap: 2px; }
.week-item.today .day-chip { background: var(--accent); color: var(--accent-ink); }
.day-chip { align-self: flex-start; font-size: .75rem; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent); }
/* Week page: a month calendar on top (the week shown is highlighted; tap a week to jump), then one row per day */
.week-cal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.week-cal-month { font-family: Georgia, "Times New Roman", serif; font-size: 1.45rem; font-weight: 700; color: var(--accent); }
.week-cal-range { font-size: 1rem; margin: 2px 0; }
.mcal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px 0; margin-top: 12px; }
.mcal-wd { text-align: center; font-size: .72rem; font-weight: 700; color: var(--muted); padding-bottom: 4px; }
.mcal-week { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(7, 1fr); font: inherit; color: var(--ink); background: none;
  border: none; border-radius: 12px; padding: 4px 0; cursor: pointer; min-height: 40px; }
.mcal-week:hover { background: color-mix(in srgb, var(--accent-soft) 60%, transparent); }
.mcal-week.on { background: var(--accent); color: var(--accent-ink); }
.mcal-day { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: .95rem; line-height: 1.6; }
.mcal-day.out { opacity: .4; }
.mcal-day.today { font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.mcal-day i { position: absolute; bottom: 0; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.week-tools { margin: 0 0 12px; }
/* Week page: one row per day, a calendar-page badge on the left */
.wdays { list-style: none; margin: 0; padding: 0; }
.wday { display: flex; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.wday:first-child { border-top: none; }
.wday-badge { flex: none; width: 52px; border-radius: 12px; overflow: hidden; text-align: center; align-self: flex-start;
  border: 1px solid var(--line); background: var(--card); }
.wday-badge span { display: block; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  padding: 2px 0; background: var(--accent-soft); color: var(--accent); }
.wday-badge strong { display: block; font-size: 1.35rem; padding: 3px 0 5px; }
.wday.today .wday-badge { border-color: var(--accent); }
.wday.today .wday-badge span { background: var(--accent); color: var(--accent-ink); }
.wday.past { opacity: .7; }
.wday-meals { display: flex; flex-direction: column; gap: 6px; min-width: 0; justify-content: center; }
.wmeal { display: flex; align-items: center; gap: 10px; }
.wmeal .recipe-thumb { width: 44px; height: 44px; font-size: 1.2rem; }
.wmeal .grow { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.wmeal .icon-btn { flex: none; }
.wmeal-type { max-width: 100%; }
@media (max-width: 480px) { .wmeal .recipe-thumb { display: none; } .wmeal .icon-btn { width: 38px; } }
.wmeal a { color: inherit; text-decoration: none; }
.wmeal-type { width: auto; align-self: flex-start; margin-top: 3px; padding: 4px 28px 4px 10px; min-height: 40px; font-size: 16px;
  border-radius: 999px; background-color: var(--accent-soft); border-color: transparent; color: var(--accent); font-weight: 600; cursor: pointer; }
.wday-add { align-self: flex-start; padding: 6px 0; min-height: 36px; }
.wz-slot { display: flex; align-items: center; gap: 10px; }
.wz-slot .recipe-thumb { width: 48px; height: 48px; font-size: 1.2rem; }
.wz-slot .grow { display: flex; flex-direction: column; min-width: 0; }
.wz-slot.empty strong { color: var(--muted); font-weight: 600; }
.wz-occ { color: var(--accent); font-weight: 600; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Add-to-week sheet: calendar strip, meal chips, recipe picker */
.pa { display: flex; flex-direction: column; gap: 10px; }
.pa h3 { margin: 0; }
.pa-recipe { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 12px; background: var(--accent-soft); }
.pa-label { margin-top: 4px; }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.cal-day { font: inherit; color: var(--ink); cursor: pointer; min-height: 66px; padding: 6px 0 4px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--card); display: flex; flex-direction: column; align-items: center; gap: 2px; }
.cal-wd { font-size: .72rem; font-weight: 700; color: var(--muted); text-transform: uppercase; }
.cal-num { font-size: 1.2rem; font-weight: 700; line-height: 1.1; }
.cal-dots { display: flex; gap: 3px; height: 6px; }
.cal-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.cal-day.today { border: 2px solid var(--accent); }
.cal-day.past { opacity: .6; }
.cal-day.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); opacity: 1; }
.cal-day.on .cal-wd { color: var(--accent-ink); }
.cal-day.on .cal-dots i { background: var(--accent-ink); }
.pa-planned { margin: -2px 0 0; min-height: 1.2em; }
.pa-meals { margin-bottom: 0; }
.pa-meals .chip { min-height: 44px; }
.pa-pick { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.pa-opt { font: inherit; color: var(--ink); width: 100%; display: flex; align-items: center; gap: 10px; text-align: left;
  padding: 6px 8px; border-radius: 12px; border: 1px solid transparent; background: none; cursor: pointer; min-height: 52px; }
.pa-opt:hover { background: var(--accent-soft); }
.pa-opt.on { border-color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.pa-opt .recipe-thumb { width: 40px; height: 40px; font-size: 1.1rem; }
.pa-opt .star { width: auto; height: auto; font-size: 1rem; }
.pa-check { color: var(--accent); font-weight: 700; font-size: 1.2rem; }
.pa-typed { padding: 4px 8px; }
.btn.pa-go { min-height: 52px; font-size: 1.05rem; margin-top: 4px; position: sticky; bottom: 0; }
.days { list-style: none; margin: 0; padding: 0; }
.day.today { border-color: var(--accent); }
.entries { list-style: none; margin: 8px 0 0; padding: 0; }
.entries li { padding: 4px 0; border-top: 1px dashed var(--line); }
.meal {
  display: inline-block; min-width: 68px;
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
}

/* ---------- List ---------- */
.items { list-style: none; margin: 0; padding: 0; }
.item {
  display: flex; align-items: center; gap: 6px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 6px 6px 6px 12px; margin-bottom: 6px;
}
.item label { flex-direction: row; align-items: center; gap: 10px; font-weight: 400; font-size: 1rem; padding: 6px 0; }
.item-text { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.item-text .badge { margin-left: 0; }
.item.checked span { text-decoration: line-through; color: var(--muted); }
.done { margin-top: 14px; }
.done summary { cursor: pointer; color: var(--muted); font-weight: 600; padding: 8px 0; }

/* ---------- Me / auth ---------- */
.welcome { background: var(--accent-soft); border-color: var(--accent); }
.invite { font-size: 1.15rem; letter-spacing: .08em; background: var(--bg); border: 1px dashed var(--line); padding: 6px 10px; border-radius: 8px; }
.family + .family { border-top: 1px solid var(--line); padding-top: 10px; }
/* Me page: greeting, setup checklist, fold-out sections that save as you go */
.me-hello { display: flex; align-items: center; gap: 14px; background: var(--accent-soft); border-color: var(--accent); }
.me-hello h2 { margin: 0; font-family: Georgia, "Times New Roman", serif; }
.me-hello p { margin: 2px 0 0; }
.me-avatar { flex: none; width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--accent-ink); font-size: 1.6rem; font-weight: 700; }
.me-setup h3 { margin: 0 0 6px; }
.me-steps { list-style: none; margin: 0; padding: 0; }
.me-steps .btn.link { color: var(--ink); font-size: 1rem; min-height: 44px; text-align: left; }
.me-steps .done .btn.link { color: var(--muted); text-decoration: line-through; }
.me-sec { padding: 0; overflow: hidden; }
.me-sec > summary { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 14px; cursor: pointer; list-style: none; }
.me-sec > summary::-webkit-details-marker { display: none; }
.me-sec[open] > summary { background: var(--accent-soft); }
.me-ico { flex: none; width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; background: var(--bg); }
.me-sum { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.me-sum .small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me-chev { font-size: 1.5rem; color: var(--muted); transition: transform .15s; }
.me-sec[open] .me-chev { transform: rotate(90deg); }
.me-body { padding: 14px; }
.me-body > p { margin: 0; }
.me-warn { margin: 0; padding: 8px 12px; border-radius: 10px; background: var(--bad-soft); color: var(--ink); font-size: .9rem; }
.me-dates { list-style: none; margin: 0; padding: 0; }
.me-dates li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); }
.me-dates li:first-child { border-top: none; }
.me-date-add input[type=date], .me-date-add select { width: auto; }
.plan-target { display: flex; align-items: center; gap: 12px; background: var(--accent-soft); border-color: var(--accent); }
.plan-target > span:first-child { font-size: 1.6rem; }
.occasion .chips { margin-top: 6px; }
.occasion { margin: 0 0 12px; background: color-mix(in srgb, var(--star) 14%, var(--card)); }
.pa-ideas { min-height: 48px; }
.ai-meter .li-bar { margin: 4px 0; }
.ai-meter p { margin: 4px 0 0; }
.ai-row { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; font-weight: 600; flex-wrap: wrap; }
.ai-row > span { display: flex; flex-direction: column; }
.ai-row select { width: auto; max-width: 100%; }
.ai-table { font-size: .85rem; width: 100%; }
.me-foot { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 18px 0 8px; }
.me-foot .btn { min-width: 160px; }
.tabbar a[data-tab="me"] { position: relative; }
.tabbar a.alert::after { content: ""; position: absolute; top: 8px; left: calc(50% + 10px); width: 10px; height: 10px; border-radius: 50%;
  background: var(--bad); border: 2px solid var(--card); }
@media (min-width: 900px) { .tabbar a.alert::after { top: 2px; left: auto; right: 2px; } }
.auth { max-width: 420px; margin: 8vh auto 0; text-align: center; }
.auth-logo { border-radius: 20px; margin-bottom: 8px; }

/* ---------- Sheet & toast ---------- */
.sheet-backdrop {
  position: fixed; inset: 0; z-index: 20;
  background: rgb(0 0 0 / .35);
  display: flex; align-items: flex-end; justify-content: center;
}
.sheet {
  background: var(--card); width: 100%; max-width: 560px;
  border-radius: 18px 18px 0 0; padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
  max-height: 88vh; overflow-y: auto;
}
.tip-pop { position: fixed; z-index: 25; left: 12px; right: 12px; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 12px);
  background: var(--card); border: 1px solid var(--line); border-left: 5px solid var(--accent); border-radius: 14px;
  padding: 12px 14px; box-shadow: 0 6px 24px rgba(0, 0, 0, .18); display: flex; flex-direction: column; gap: 8px; max-width: 560px; margin: 0 auto; }
.tip-pop p { margin: 0; }
.tip-pop .tip-head { font-weight: 700; color: var(--accent); }
@media (min-width: 900px) { .tip-pop { left: auto; right: 24px; bottom: 24px; max-width: 380px; } }
.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 14px); z-index: 30;
  background: var(--ink); color: var(--bg);
  padding: 10px 16px; border-radius: 999px; font-size: .9rem; max-width: 90vw; text-align: center;
}

@media (min-width: 720px) {
  .sheet { border-radius: 18px; margin-bottom: 10vh; }
  .sheet-backdrop { align-items: center; }
}


/* ---------- Theme swatches ---------- */
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.swatch {
  --sw: var(--sw-light);
  display: flex; align-items: center; gap: 8px;
  font: inherit; font-size: .9rem; color: var(--ink); cursor: pointer;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; min-height: 44px;
}
.swatch .dot { width: 20px; height: 20px; border-radius: 50%; background: var(--sw); flex: none; }
.swatch.on { border: 2px solid var(--accent); font-weight: 700; }
:root[data-mode="dark"] .swatch { --sw: var(--sw-dark); }


/* ---------- Live prices & compare ---------- */
.badge.warn { background: #fff2d6; color: #8a5a00; }
:root[data-mode="dark"] .badge.warn { background: #3d3018; color: #f2c66d; }
.price { font-weight: 700; font-size: .9rem; }
.price s { font-weight: 400; color: var(--muted); }
.compare { width: 100%; border-collapse: collapse; margin: 6px 0; font-size: .95rem; }
.compare th, .compare td { text-align: center; padding: 10px 6px; border-bottom: 1px solid var(--line); }
.compare th:first-child, .compare td:first-child { text-align: left; }
.compare tbody tr { cursor: pointer; }
.compare tbody tr.on { background: var(--accent-soft); }
.import { background: var(--accent-soft); border-radius: 10px; padding: 10px; }
.import h3 { margin: 0; }
.import-tips summary { cursor: pointer; color: var(--accent); font-weight: 600; padding: 6px 0; }
.import-tips ul { margin: 4px 0 0; padding-left: 18px; line-height: 1.6; }
.import-tips li { margin-bottom: 6px; }
.bookmarklet { cursor: grab; margin-left: 4px; }

/* ===== THEMES (generated by tools/themes.py — edit there, not here) ===== */
:root {
  --accent: #6b3fa0;
  --accent-soft: #efe6f8;
  --bg: #faf7fd;
  --line: #e6dcf1;
}
:root[data-theme="lavender"] {
  --accent: #7255b8;
  --accent-soft: #ece7fa;
  --bg: #f9f8fe;
  --line: #e2dcf5;
}
:root[data-theme="plum"] {
  --accent: #7d2e68;
  --accent-soft: #f5e4f0;
  --bg: #fcf7fa;
  --line: #eedbe8;
}
:root[data-theme="pink"] {
  --accent: #b8356f;
  --accent-soft: #fbe4ee;
  --bg: #fef8fa;
  --line: #f5dbe6;
}
:root[data-theme="hotpink"] {
  --accent: #c2185b;
  --accent-soft: #fde0ec;
  --bg: #fff7fa;
  --line: #f8d6e4;
}
:root[data-theme="rose"] {
  --accent: #a63d56;
  --accent-soft: #f9e5ea;
  --bg: #fdf8f9;
  --line: #f1dde2;
}
:root[data-theme="blush"] {
  --accent: #9e4f5f;
  --accent-soft: #f8eaec;
  --bg: #fefafa;
  --line: #f2e2e5;
}
:root[data-theme="coral"] {
  --accent: #b5452f;
  --accent-soft: #fde7e1;
  --bg: #fff9f7;
  --line: #f6ddd6;
}
:root[data-theme="peach"] {
  --accent: #a8532a;
  --accent-soft: #fdeee3;
  --bg: #fffaf6;
  --line: #f6e3d5;
}
:root[data-theme="mint"] {
  --accent: #2a735c;
  --accent-soft: #e0f3ec;
  --bg: #f7fcfa;
  --line: #d6ece4;
}
:root[data-theme="teal"] {
  --accent: #1f7480;
  --accent-soft: #def2f4;
  --bg: #f6fbfc;
  --line: #d3eaed;
}
:root[data-theme="classic"] {
  --accent: #8b4a2f;
  --accent-soft: #f3e3d8;
  --bg: #faf6f0;
  --line: #e8dfd4;
}
:root[data-mode="dark"] {
  --accent: #c4a3ee;
  --accent-soft: #33274a;
  --bg: #17131f;
  --line: #3a2f4d;
  --card: #221b2e;
  --accent-ink: #17131f;
}
:root[data-mode="dark"][data-theme="lavender"] {
  --accent: #b9a8f0;
  --accent-soft: #2f2a4a;
  --bg: #16141f;
  --line: #37324d;
  --card: #211e2e;
  --accent-ink: #16141f;
}
:root[data-mode="dark"][data-theme="plum"] {
  --accent: #e59bd0;
  --accent-soft: #45243c;
  --bg: #1c1219;
  --line: #46303f;
  --card: #2a1b25;
  --accent-ink: #1c1219;
}
:root[data-mode="dark"][data-theme="pink"] {
  --accent: #f39cc0;
  --accent-soft: #4a2333;
  --bg: #1e1317;
  --line: #4a3039;
  --card: #2c1c23;
  --accent-ink: #1e1317;
}
:root[data-mode="dark"][data-theme="hotpink"] {
  --accent: #ff8ab8;
  --accent-soft: #4d1d31;
  --bg: #1f1217;
  --line: #4d2c3a;
  --card: #2e1a23;
  --accent-ink: #1f1217;
}
:root[data-mode="dark"][data-theme="rose"] {
  --accent: #ec9cae;
  --accent-soft: #46252d;
  --bg: #1d1416;
  --line: #483138;
  --card: #2b1d21;
  --accent-ink: #1d1416;
}
:root[data-mode="dark"][data-theme="blush"] {
  --accent: #e5a9b4;
  --accent-soft: #42292e;
  --bg: #1c1516;
  --line: #453437;
  --card: #2a1f21;
  --accent-ink: #1c1516;
}
:root[data-mode="dark"][data-theme="coral"] {
  --accent: #f6a08c;
  --accent-soft: #4a2820;
  --bg: #1e1513;
  --line: #4a342e;
  --card: #2c1f1b;
  --accent-ink: #1e1513;
}
:root[data-mode="dark"][data-theme="peach"] {
  --accent: #f5b38a;
  --accent-soft: #472c1d;
  --bg: #1d1613;
  --line: #48372d;
  --card: #2b211b;
  --accent-ink: #1d1613;
}
:root[data-mode="dark"][data-theme="mint"] {
  --accent: #86d6b9;
  --accent-soft: #1e3a31;
  --bg: #121a17;
  --line: #2c413a;
  --card: #1a2622;
  --accent-ink: #121a17;
}
:root[data-mode="dark"][data-theme="teal"] {
  --accent: #7fd0da;
  --accent-soft: #1c3a3f;
  --bg: #11191b;
  --line: #2a4044;
  --card: #192528;
  --accent-ink: #11191b;
}
:root[data-mode="dark"][data-theme="classic"] {
  --accent: #d98a64;
  --accent-soft: #3d2a20;
  --bg: #1c1714;
  --line: #3b312b;
  --card: #27201c;
  --accent-ink: #1c1714;
}
/* ===== END THEMES ===== */