:root {
  --bg: #f6f5f1;
  --surface: #ffffff;
  --text: #1d1d1b;
  --muted: #66655f;
  --border: #dddbd3;
  --accent: #2f6b3f;
  --accent-text: #ffffff;
  --accent-soft: #e3efe5;
  --warn: #8a5a00;
  --warn-soft: #fbf0d9;
  --danger: #a3312a;
  --danger-soft: #fbe9e8;
  --chart-p: #dc2626;
  --chart-c: #2563eb;
  --chart-f: #16a34a;
  --chart-gap: #e2e8f0;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #161715;
    --surface: #20221f;
    --text: #ecebe6;
    --muted: #a3a29b;
    --border: #393b36;
    --accent: #7fc28f;
    --accent-text: #10210f;
    --accent-soft: #233528;
    --warn: #e7b85a;
    --warn-soft: #3a2f17;
    --danger: #f08a82;
    --danger-soft: #3a1817;
    --chart-p: #f87171;
    --chart-c: #60a5fa;
    --chart-f: #4ade80;
    --chart-gap: #374151;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding-inline: 16px;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}

header, main {
  max-width: 1100px;
  margin: 0 auto;
}

/* The Week calendar uses the whole window width. */
main:has(#week-tab:not([hidden])) { max-width: none; }

header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-block: 20px 12px;
}

h1 { font-size: 1.4rem; margin: 0; }
h2 { font-size: 1.05rem; margin: 28px 0 10px; }
h3 { margin: 0 0 12px; }

nav { display: flex; gap: 4px; }

button {
  font: inherit;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  padding: 7px 14px;
  cursor: pointer;
}

button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
button.danger { color: var(--danger); margin-right: auto; }
button.tab { border-color: transparent; background: transparent; }
button.tab.active { background: var(--surface); border-color: var(--border); font-weight: 600; }
button.link { border: 0; background: none; padding: 0; color: var(--accent); text-decoration: underline; }

input, select, textarea {
  font: inherit;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 10px;
}

textarea { width: 100%; resize: vertical; }
label { display: block; font-weight: 600; margin-bottom: 6px; }
dialog label { margin-bottom: 12px; }
dialog label input, dialog label select { display: block; width: 100%; margin-top: 4px; font-weight: 400; }

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
}

.form-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}
.form-row label { margin: 0; }
.form-row.end { justify-content: flex-end; }
#portions { width: 5rem; }
#plan-form .primary { margin-left: auto; }
#price-search { flex: 1; min-width: 12rem; }

a { color: var(--accent); }
.note, .hint { color: var(--muted); font-size: 0.9rem; }
.error { color: var(--danger); }

.badge {
  display: inline-block;
  font-size: 0.75rem;
  padding: 0 6px;
  border-radius: 6px;
  background: var(--warn-soft);
  color: var(--warn);
  vertical-align: middle;
}

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
}

.stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
}
.stat .value { font-size: 1.6rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.stat .label { color: var(--muted); font-size: 0.85rem; }

.stores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.store {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
}
.store.cheapest { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.store h3 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 0; }
.store .tag { font-size: 0.75rem; font-weight: 600; color: var(--accent); background: var(--accent-soft); padding: 1px 8px; border-radius: 6px; }
.store .total { font-size: 1.5rem; font-weight: 650; font-variant-numeric: tabular-nums; margin-top: 4px; }
.store .per-portion { color: var(--muted); font-size: 0.9rem; margin-bottom: 10px; }
.store ul { list-style: none; padding: 0; margin: 0; }
.store li { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-top: 1px solid var(--border); font-size: 0.9rem; }
.store li .qty { color: var(--muted); }
.store li .cost { font-variant-numeric: tabular-nums; white-space: nowrap; }
.store .missing { margin-top: 10px; color: var(--warn); font-size: 0.85rem; }
.store .missing li { color: var(--text); }

details { margin-top: 28px; }
summary { cursor: pointer; font-weight: 600; }

.table-wrap { overflow-x: auto; margin-top: 10px; }
table { border-collapse: collapse; width: 100%; background: var(--surface); font-size: 0.9rem; }
th, td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--border); }
th { color: var(--muted); font-weight: 600; }
td.num { font-variant-numeric: tabular-nums; }
td button.price { border: 0; background: none; padding: 2px 4px; color: var(--text); text-decoration: underline dotted; white-space: nowrap; }
td button.price.empty { color: var(--muted); }

dialog {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  width: min(440px, calc(100vw - 32px));
  padding: 20px;
}
dialog::backdrop { background: rgb(0 0 0 / 0.4); }

/* Week calendar — Google Calendar style */
.week-panel { padding: 12px 16px 16px; background: var(--surface); border-radius: 12px; margin-top: 20px; }

.week-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.week-nav-label { font-weight: 700; font-size: 1rem; text-align: center; }
.week-nav-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  cursor: pointer;
  color: var(--text);
  flex-shrink: 0;
  transition: background 0.1s;
}
.week-nav-btn:hover { background: var(--accent-soft); }

.week-actions { margin-bottom: 10px; gap: 8px; }

.week-grid {
  display: grid;
  grid-template-columns: 22px repeat(7, minmax(0, 1fr));
  gap: 2px;
}

/* Day header column: day initial above a date circle */
.week-day-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 6px;
  gap: 2px;
}
.week-day-init {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.week-day-num {
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: 0.85rem;
  color: var(--text);
}
.week-day-num.today {
  background: var(--accent);
  color: var(--accent-text);
  font-weight: 700;
}

/* Row labels (B / L / D / ∑) */
.week-slot-label {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 2px;
}
.week-totals-label { color: var(--text); align-items: flex-start; padding-top: 6px; }

/* Meal cells */
.week-cell {
  border-radius: 6px;
  padding: 5px 6px;
  min-height: 54px;
  cursor: pointer;
  transition: background 0.1s;
  border: 1.5px solid transparent;
}
.week-cell.empty {
  color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  opacity: 0.35;
  background: none;
}
.week-cell.empty:hover { opacity: 1; background: var(--accent-soft); border-color: var(--accent); }
.week-cell.filled {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.week-cell.filled:hover { filter: brightness(0.95); }
.week-cell:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.week-cell-title { font-size: 0.72rem; font-weight: 600; line-height: 1.25; word-break: break-word; }
.week-cell-kcal  { font-size: 0.68rem; color: var(--accent); margin-top: 3px; }

/* Daily totals */
.week-total { padding: 4px 2px; border-top: 1px solid var(--border); margin-top: 2px; }
.week-total.empty { border-top: 1px solid var(--border); margin-top: 2px; min-height: 20px; }
.week-total-kcal { font-size: 0.72rem; font-weight: 700; margin-bottom: 2px; line-height: 1.3; border-radius: 4px; padding: 1px 3px; }
.week-macro-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 1px; font-size: 0.65rem; line-height: 1.6; border-radius: 3px; padding: 0 2px; margin-bottom: 1px; }
.week-macro-label { font-weight: 700; }
.week-macro-grams, .week-macro-target { font-variant-numeric: tabular-nums; }

/* Macro colour coding — text colour */
.on-target    { color: var(--accent); }
.near-target  { color: var(--warn); }
.over-target  { color: var(--danger); }
.under-target { color: var(--muted); }

/* Coloured backgrounds on totals rows */
.week-total .on-target    { background: var(--accent-soft); }
.week-total .near-target  { background: var(--warn-soft); }
.week-total .over-target  { background: var(--danger-soft); }
.week-total-kcal.on-target   { background: var(--accent-soft); }
.week-total-kcal.near-target { background: var(--warn-soft); }
.week-total-kcal.over-target { background: var(--danger-soft); }

/* Mobile: full-width panel, whole week visible on iPhone */
@media (max-width: 600px) {
  .week-panel {
    border-radius: 0;
    margin-left: -16px;
    margin-right: -16px;
    padding: 8px 4px 12px;
  }
  .week-nav { padding: 0 8px; }
  .week-actions { padding: 0 8px; }
  #week-error { margin: 0 8px; }
  .week-cell { min-height: 40px; padding: 3px 4px; border-width: 1px; }
  .week-cell-title { font-size: 0.65rem; }
  .week-cell-kcal { display: none; }
  .week-day-num { width: 22px; height: 22px; font-size: 0.75rem; }
  .week-day-init { font-size: 0.6rem; }
  .week-slot-label { font-size: 0.6rem; }
  .week-total-kcal { font-size: 0.65rem; }
  .week-macro-row { font-size: 0.6rem; }
  /* On mobile only show percentage, hide gram values */
  .week-macro-grams, .week-macro-target { display: none; }
}

/* Profile form */
#profile-form h3 { margin: 20px 0 10px; }
#profile-form label input, #profile-form label select { display: block; margin-top: 4px; font-weight: 400; }

/* Meal dialog textarea */
#meal-ingredients { width: 100%; margin-top: 4px; font-family: inherit; }

/* Day picker */
.week-day-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 8px 10px;
  background: var(--bg);
  border-radius: 8px;
  margin-bottom: 8px;
  font-size: 0.85rem;
}
.week-day-picker-label { color: var(--muted); font-size: 0.8rem; }
.week-day-picker label { display: flex; align-items: center; gap: 4px; cursor: pointer; }

/* Shopping list by section */
.shop-section { margin-bottom: 20px; }
.shop-section-title {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.shop-table { border-collapse: collapse; width: 100%; font-size: 0.88rem; }
.shop-th-item  { text-align: left; padding: 4px 8px 4px 0; color: var(--muted); font-weight: 600; font-size: 0.75rem; }
.shop-th-store { text-align: left; padding: 4px 8px; color: var(--muted); font-weight: 600; font-size: 0.75rem; }
.shop-item-row:not(:last-child) td { border-bottom: 1px solid var(--border); }
.shop-name     { padding: 8px 8px 8px 0; vertical-align: top; min-width: 110px; }
.shop-item-name   { font-weight: 600; }
.shop-item-amount { font-size: 0.78rem; color: var(--accent); }
.shop-store-cell  { padding: 8px; vertical-align: top; }
.shop-packs  { font-size: 0.8rem; }
.shop-cost   { font-weight: 600; display: flex; align-items: center; gap: 4px; }
.shop-unavail { color: var(--muted); font-size: 0.85rem; }
.shop-unpriced ul { margin: 4px 0; padding-left: 1rem; }
.shop-unpriced li { font-size: 0.88rem; }

/* Recipe search list in meal dialog */
.recipe-pick { position: relative; margin-bottom: 12px; }
.recipe-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 10;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin: 2px 0 0;
  padding: 4px 0;
  list-style: none;
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.12);
  max-height: 200px;
  overflow-y: auto;
}
.recipe-list-item {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 0.9rem;
}
.recipe-list-item:hover { background: var(--accent-soft); }

/* Multi-item meal cells */
.week-cell-item {
  font-size: 0.72rem;
  padding: 1px 4px;
  border-radius: 4px;
  background: var(--accent-soft);
  color: var(--accent);
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.3;
  margin-bottom: 2px;
}

/* Meal dialog — multi-item layout */
.meal-items-list {
  min-height: 36px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.meal-empty-hint { margin: 0; font-size: 0.85rem; color: var(--muted); }
.meal-item-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--accent-soft);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 0.88rem;
}
.meal-item-label { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.meal-item-portions { color: var(--muted); font-size: 0.78rem; white-space: nowrap; }
.meal-item-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1;
  padding: 0 2px;
  flex-shrink: 0;
}
.meal-item-remove:hover { color: var(--danger); }
.meal-add-section { border-top: 1px solid var(--border); padding-top: 12px; }

/* Pie chart in daily totals */
.day-pie {
  display: block;
  width: 56px;
  height: 56px;
  margin: 0 auto 4px;
}
.week-total .day-pie { flex-shrink: 0; }

/* Colour dot legend in macro rows */
.week-macro-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-right: 2px;
}

/* Recipes tab */
.recipe-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 10px;
  background: var(--surface);
}
.recipe-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 2px;
}
.recipe-card-title { margin: 0; font-size: 1rem; font-weight: 600; }
.recipe-card-meta  { font-size: 0.8rem; color: var(--muted); margin: 2px 0 6px; }
.recipe-card-ingredients { font-size: 0.85rem; color: var(--muted); }
button.small { padding: 4px 10px; font-size: 0.82rem; }

/* Recipe detail dialog */
.week-cell-footer { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.week-cell-footer .week-cell-kcal { margin-top: 0; }
#meal-macro-dialog { width: min(92vw, 420px); }
.meal-macro-total { display: flex; align-items: center; gap: 16px; }
.meal-macro-rows { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.meal-macro-item { margin-top: 10px; }
.meal-macro-item-name { font-weight: 600; font-size: 0.9rem; margin-bottom: 4px; }
.meal-macro-item-name .note { font-weight: 400; color: var(--muted); font-size: 0.8rem; margin-left: 4px; }

.week-recipe-cards { margin-top: 16px; }
.week-recipe-cards-heading { font-size: 0.85rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 8px; }
.week-recipe-cards-list { display: flex; flex-wrap: wrap; gap: 8px; }
.week-recipe-card { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); min-width: 140px; }
.week-recipe-card-name { font-weight: 600; font-size: 0.88rem; overflow-wrap: anywhere; max-width: 240px; }
.week-recipe-card-info { font-size: 0.8rem; color: var(--muted); }
.week-recipe-card-rem { color: var(--accent); }

.recipe-detail-dialog {
  width: min(92vw, 700px);
  max-height: 85vh;
  overflow-y: auto;
}
.recipe-card[role="button"] { cursor: pointer; transition: box-shadow 0.15s; }
.recipe-card[role="button"]:hover { box-shadow: 0 2px 10px rgb(0 0 0 / 0.1); }
.recipe-stores-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}
.recipe-store {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.88rem;
  background: var(--surface);
}
.recipe-store.cheapest { border-color: var(--accent); background: var(--accent-soft); }
.recipe-store-name { font-weight: 600; display: flex; align-items: center; gap: 6px; }
.recipe-store-cost { color: var(--muted); }
.ingredient-detail-table { border-collapse: collapse; width: 100%; font-size: 0.85rem; }
.ingredient-detail-table th { text-align: left; padding: 4px 8px 4px 0; color: var(--muted); font-size: 0.75rem; font-weight: 600; border-bottom: 1px solid var(--border); }
.ingredient-detail-table td { padding: 6px 8px 6px 0; border-bottom: 1px solid var(--border); vertical-align: top; }
.ingredient-detail-table tr:last-child td { border-bottom: none; }
.ingredient-price-detail { font-size: 0.75rem; color: var(--muted); margin-top: 2px; }

.shopping-dialog { width: min(96vw, 520px); max-height: 90vh; }
.shopping-dialog[open] { display: flex; flex-direction: column; gap: 12px; }
.shopping-dialog-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.shopping-dialog textarea { flex: 1; font-family: monospace; font-size: 0.82rem; resize: none; min-height: 320px; }

/* Horizontal macro bars */
.macro-bars { display: flex; flex-direction: column; gap: 3px; margin: 4px 0; }
.macro-bar-row { display: grid; grid-template-columns: 3.6em 1fr auto; align-items: center; gap: 4px; font-size: 0.68rem; border-radius: 3px; padding: 0 2px; }
.macro-bar-label { font-weight: 600; }
.macro-bar-track { height: 6px; border-radius: 3px; background: var(--chart-gap); overflow: hidden; }
.macro-bar-fill { display: block; height: 100%; border-radius: 3px; }
.macro-bar-value { font-variant-numeric: tabular-nums; white-space: nowrap; }
.kcal-bar { display: flex; flex: 1; height: 5px; border-radius: 3px; background: var(--chart-gap); overflow: hidden; }
.kcal-bar > span { display: block; height: 100%; }
.nutrient-extras { display: flex; flex-wrap: wrap; gap: 2px 8px; font-size: 0.65rem; color: var(--muted); }
#meal-macro-dialog .macro-bar-row { font-size: 0.85rem; }
#meal-macro-dialog .macro-bar-row { grid-template-columns: 4.5em 1fr auto; }
#meal-macro-dialog .macro-bar-track { height: 8px; }
#meal-macro-dialog .nutrient-extras { font-size: 0.8rem; }
.meal-macro-total { display: block; }

/* Meal details */
.meal-detail-list { list-style: none; padding: 0; margin: 12px 0 0; border-top: 1px solid var(--border); }
.meal-detail-item { padding: 8px 0; border-bottom: 1px solid var(--border); }
.meal-detail-item-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.meal-detail-ingredients { margin: 4px 0 0; padding-left: 18px; font-size: 0.82rem; color: var(--muted); }
.link-button { background: none; border: 0; padding: 0; color: var(--accent); text-decoration: underline; cursor: pointer; font: inherit; font-size: 0.85rem; white-space: nowrap; }
.week-recipe-card.is-recipe { cursor: pointer; }
.week-recipe-card.is-recipe:hover { background: var(--accent-soft); }
.meal-repeat { margin-top: 12px; }

/* Compact P/C/F line, shown only on phones */
.macro-compact { display: none; }
.macro-compact-row { font-size: 0.6rem; line-height: 1.35; border-radius: 3px; padding: 0 2px; font-variant-numeric: tabular-nums; }
.macro-compact-pct { color: var(--muted); }
.macro-compact-row.on-target   { background: var(--accent-soft); }
.macro-compact-row.near-target { background: var(--warn-soft); }
.macro-compact-row.over-target { background: var(--danger-soft); }

@media (max-width: 600px) {
  /* Week grid: meal cells show just the name (tap for details); day totals show P/C/F */
  .week-grid .macro-bars, .week-grid .nutrient-extras { display: none; }
  .week-grid .macro-compact { display: block; }
  .week-grid .week-total-kcal { font-size: 0.6rem; padding: 0 2px; }
  .week-grid .week-total { padding: 2px 0; }
  .week-grid .kcal-of { display: none; }
  /* Use the full cell width for meal names and break between words, not inside them */
  .week-cell { padding: 2px; }
  .week-cell-item { padding: 1px 2px; font-size: 0.6rem; overflow-wrap: normal; word-break: normal; hyphens: auto; }
}

/* Meal card summary (same as the day summary) */
.week-cell-summary { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--border); }

/* Keep the meal form's buttons visible at the bottom, even on short screens */
#meal-dialog { max-height: calc(100vh - 32px); }
.meal-dialog-actions {
  position: sticky;
  bottom: -20px;           /* sit flush with the dialog's bottom padding */
  margin: 12px -20px -20px;
  padding: 12px 20px 20px;
  background: var(--surface);
  border-top: 1px solid var(--border);
}

/* Slimmer header */
header { padding-block: 8px 6px; gap: 8px; }
header h1 { font-size: 1.1rem; }
header button.tab { padding: 4px 12px; }

/* Today and Shopping list sit in the same bar as the date range */
.week-nav { margin-bottom: 10px; }
.week-nav .small { padding: 4px 12px; white-space: nowrap; }

/* This week's meals: total cost per store */
.week-meals-header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin-bottom: 8px; }
.week-meals-header .week-recipe-cards-heading { margin: 0; }
.week-cost { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: 0.85rem; }
.week-cost-label { color: var(--muted); }
.week-cost-store { font-variant-numeric: tabular-nums; }
.week-cost-store.cheapest { font-weight: 700; color: var(--accent); }

/* ⚠ next to meals/recipes with an ingredient nobody has a price for */
.unpriced-warn { color: var(--warn); margin-right: 3px; cursor: help; font-style: normal; }
.unpriced-note { color: var(--warn); }

/* Costs: shopping list priced at every shop */
.week-costs { margin-top: 20px; }
.costs-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.costs-table th, .costs-table td { padding: 4px 6px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.costs-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.costs-table thead th { font-size: 0.78rem; color: var(--muted); font-weight: 600; }
.costs-section th { padding-top: 10px; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); border-bottom: 0; }
.costs-item { overflow-wrap: anywhere; }
.costs-qty { color: var(--muted); font-size: 0.85em; }
.costs-est { color: var(--warn); margin-left: 1px; }
.costs-table td.cheapest { color: var(--accent); font-weight: 700; }
.costs-total th, .costs-total td { border-top: 2px solid var(--border); border-bottom: 0; font-weight: 700; }
.costs-sub { font-size: 0.7rem; font-weight: 400; color: var(--muted); }
.costs-missing { color: var(--warn); }

@media (max-width: 600px) {
  /* Meal cells: P/C/F as % of the day's target only */
  .week-cell-summary { margin-top: 2px; padding-top: 2px; }
  .week-cell .macro-compact-row { padding: 0 1px; }
  .week-costs { padding: 0 8px; }
  .costs-table { font-size: 0.7rem; }
  .costs-table th, .costs-table td { padding: 3px 3px; }
  .costs-table thead th { font-size: 0.62rem; white-space: normal; }
  .costs-sub { font-size: 0.6rem; white-space: normal; }
}

/* Meal cells: P/C/F grams and % of the day's goal, on every screen size */
.week-cell-summary .macro-compact { display: block; }
.week-cell .macro-compact-row { font-size: 0.68rem; }
@media (max-width: 600px) {
  .week-cell .macro-compact-row { font-size: 0.58rem; padding: 0 1px; }
}

/* Date bar: ‹ Today 9 – 15 Nov › grouped in the middle */
.week-nav { justify-content: center; }

.week-costs-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.week-costs-header .week-recipe-cards-heading { margin: 0; }

/* Account: who's logged in, and log out */
.account { display: flex; align-items: center; gap: 8px; margin-left: auto; font-size: 0.85rem; }
.account-name { color: var(--muted); }
header { flex-wrap: wrap; }

/* Recipes: shared / someone else's */
.recipe-tag { margin-left: 8px; font-size: 0.72rem; font-weight: 600; color: var(--accent); background: var(--accent-soft); padding: 1px 8px; border-radius: 6px; }
.share-toggle { display: flex; align-items: center; gap: 6px; font-size: 0.9rem; }
.share-toggle input { width: auto; margin: 0; }
button.price[disabled], button.item-name[disabled] { cursor: default; opacity: 1; }

/* Login page */
.auth-page { max-width: 420px; margin: 48px auto; padding: 0 16px; }
.auth-panel { padding: 24px; }
.auth-title { font-size: 1.3rem; margin: 0 0 8px; }
.auth-form h2 { font-size: 1.05rem; margin: 12px 0; }
.auth-form label { display: block; margin-bottom: 12px; }
.auth-form button[type="submit"] { width: 100%; margin-top: 4px; }
#turnstile { margin: 8px 0 12px; min-height: 65px; }
/* Off-screen rather than display:none, which some bots skip. */
.auth-honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }