/* The Hamza's Kitchen: Apple-style frosted glass over a soft warm backdrop. */
:root {
  --bg: #f4f3f8;
  --ink: #1d1b19;
  --muted: #6b645b;
  --line: rgba(255, 255, 255, .55);
  --hair: rgba(29, 27, 25, .08);
  --glass: rgba(255, 255, 255, .62);
  --glass-strong: rgba(255, 255, 255, .78);
  --glass-edge: rgba(255, 255, 255, .85);
  --shadow: 0 10px 30px rgba(60, 40, 20, .10), 0 1px 2px rgba(60, 40, 20, .06);
  --accent: #6a55e8;
  --accent-ink: #231a45;
  /* iridescent fill: pastel violet, sky, pink, peach, washed with white */
  --grad: linear-gradient(rgba(255, 255, 255, .38), rgba(255, 255, 255, .1)),
          linear-gradient(125deg, #c4b5fd 0%, #93c5fd 35%, #f9a8d4 70%, #fdc9a4 100%);
  --grad-glow: 0 6px 20px rgba(140, 110, 240, .28);
  --warn: #c0502a;
  --warn-soft: rgba(240, 120, 80, .14);
  --pro: #7b61c9;
  --carb: #d4901a;
  --fat: #3a86d4;
  --radius: 22px;
  --blob1: #c7b8ff; --blob2: #9fd8ff; --blob3: #ffb8de; --blob4: #ffd2b0;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #09080f; --ink: #f5f1ea; --muted: #a8a196; --line: rgba(255, 255, 255, .10);
    --hair: rgba(255, 255, 255, .09); --glass: rgba(255, 255, 255, .07); --glass-strong: rgba(28, 26, 30, .62);
    --glass-edge: rgba(255, 255, 255, .16); --shadow: 0 12px 36px rgba(0, 0, 0, .55);
    --accent: #c3b6ff; --accent-ink: #1a1236; --warn: #ff9a70; --warn-soft: rgba(255, 120, 80, .14);
    --grad: linear-gradient(rgba(255, 255, 255, .30), rgba(255, 255, 255, .06)),
            linear-gradient(125deg, #a78bfa 0%, #60a5fa 38%, #f472b6 72%, #fb923c 100%);
    --grad-glow: 0 6px 24px rgba(150, 110, 255, .40);
    --blob1: #5b2bd6; --blob2: #0b74c4; --blob3: #b0237a; --blob4: #c2541a;
  }
}
:root[data-theme="dark"] {
    --bg: #09080f; --ink: #f5f1ea; --muted: #a8a196; --line: rgba(255, 255, 255, .10);
    --hair: rgba(255, 255, 255, .09); --glass: rgba(255, 255, 255, .07); --glass-strong: rgba(28, 26, 30, .62);
    --glass-edge: rgba(255, 255, 255, .16); --shadow: 0 12px 36px rgba(0, 0, 0, .55);
    --accent: #c3b6ff; --accent-ink: #1a1236; --warn: #ff9a70; --warn-soft: rgba(255, 120, 80, .14);
    --grad: linear-gradient(rgba(255, 255, 255, .30), rgba(255, 255, 255, .06)),
            linear-gradient(125deg, #a78bfa 0%, #60a5fa 38%, #f472b6 72%, #fb923c 100%);
    --grad-glow: 0 6px 24px rgba(150, 110, 255, .40);
    --blob1: #5b2bd6; --blob2: #0b74c4; --blob3: #b0237a; --blob4: #c2541a;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { background: var(--bg); }
body {
  margin: 0; min-height: 100vh; color: var(--ink); background: transparent;
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Noto Sans Ethiopic", sans-serif;
  -webkit-font-smoothing: antialiased;
}
/* soft colour blobs give the glass something to frost */
body::before {
  content: ""; position: fixed; inset: -20vmax; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38vmax 34vmax at 12% 8%, var(--blob1), transparent 62%),
    radial-gradient(34vmax 38vmax at 92% 26%, var(--blob2), transparent 62%),
    radial-gradient(42vmax 36vmax at 30% 92%, var(--blob3), transparent 62%),
    radial-gradient(30vmax 30vmax at 85% 85%, var(--blob4), transparent 62%);
  filter: blur(30px) saturate(130%);
  opacity: .95;
  animation: drift 40s ease-in-out infinite alternate;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }

/* glass base */
.glass {
  background: var(--glass);
  backdrop-filter: blur(20px) saturate(170%);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .5);
}

/* header */
.top {
  position: sticky; top: 0; z-index: 20; display: flex; justify-content: space-between; align-items: center;
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
  background: var(--glass); border-bottom: 1px solid var(--line);
  backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%);
}
.brand { font-weight: 700; font-size: 20px; letter-spacing: -.02em; }
.right { display: flex; align-items: center; gap: 10px; }
.count { color: var(--muted); font-size: 13px; }
.lang {
  border: 0; border-radius: 999px; padding: 7px 14px; font-size: 14px; font-weight: 600; cursor: pointer;
  background: var(--grad); color: var(--accent-ink); box-shadow: var(--grad-glow), inset 0 1px 0 rgba(255, 255, 255, .6);
}
main { max-width: 820px; margin: 0 auto; padding: 16px 16px 60px; }

/* list */
.hello h1 { font-size: 32px; letter-spacing: -.03em; line-height: 1.1; margin: 8px 0 4px; }
.hello p { margin: 0 0 14px; color: var(--muted); }
.search {
  width: 100%; padding: 13px 16px; font-size: 16px; border-radius: 16px; color: var(--ink); outline: none;
}
.search::placeholder { color: var(--muted); }
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 12px 2px 4px; scrollbar-width: none; }
.chip {
  flex: none; padding: 8px 16px; border-radius: 999px; font-size: 14px; font-weight: 500; cursor: pointer;
  color: var(--ink); background: var(--glass); border: 1px solid var(--glass-edge);
}
.chip.on { background: var(--grad); border-color: rgba(255, 255, 255, .7); color: var(--accent-ink); box-shadow: var(--grad-glow); }
.section-title { margin: 24px 2px 12px; font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.section-title small { font-size: 14px; color: var(--muted); font-weight: 500; margin-left: 6px; }
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 640px) { .grid { grid-template-columns: repeat(3, 1fr); } }
.card {
  display: block; border-radius: var(--radius); overflow: hidden; background: var(--glass-strong);
  border: 1px solid var(--glass-edge); box-shadow: var(--shadow);
  transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(60, 40, 20, .16); }
.card:active { transform: scale(.98); }
.photo { position: relative; aspect-ratio: 4 / 3; background: var(--hair); overflow: hidden; }
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pill {
  position: absolute; left: 8px; bottom: 8px; padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 700; color: #1d1b19;
  background: rgba(255, 255, 255, .7); border: 1px solid rgba(255, 255, 255, .9);
  backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%);
}
.pill.cook { left: auto; right: 8px; bottom: auto; top: 8px; color: #231a45; background: var(--grad); border-color: rgba(255, 255, 255, .8); }
.card .body { padding: 10px 12px 12px; }
.card h3 { margin: 0 0 6px; font-size: 15px; line-height: 1.25; letter-spacing: -.01em; }
.mini { display: flex; gap: 10px; font-size: 12px; color: var(--muted); }
.mini b { color: var(--ink); font-weight: 600; }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 4px; vertical-align: 1px; }
.dot.p { background: var(--pro); } .dot.c { background: var(--carb); } .dot.f { background: var(--fat); }
.flag { color: var(--warn); font-size: 12px; margin-top: 6px; font-weight: 500; }
.empty { color: var(--muted); text-align: center; padding: 40px 0; }

/* detail hero */
.hero { position: relative; margin: -16px -16px 0; }
.hero .photo { aspect-ratio: 4 / 3; border-radius: 0 0 32px 32px; }
@media (min-width: 640px) { .hero { margin: 0 0 0; } .hero .photo { border-radius: 28px; aspect-ratio: 16 / 9; } }
.hero .photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .25), transparent 30%, transparent 55%, rgba(0, 0, 0, .35));
}
.back {
  position: absolute; top: 14px; left: 14px; z-index: 2; height: 40px; padding: 0 16px; border-radius: 999px;
  display: inline-flex; align-items: center; font-weight: 600; font-size: 15px; color: #1d1b19;
  background: rgba(255, 255, 255, .7); border: 1px solid rgba(255, 255, 255, .9);
  backdrop-filter: blur(16px) saturate(170%); -webkit-backdrop-filter: blur(16px) saturate(170%);
}
.macro-panel {
  position: relative; z-index: 2; margin: -44px 12px 0; border-radius: var(--radius); padding: 12px;
  display: grid; grid-template-columns: repeat(4, 1fr); text-align: center;
}
.macro-panel div + div { border-left: 1px solid var(--hair); }
.macro-panel strong { display: block; font-size: 22px; letter-spacing: -.02em; line-height: 1.2; }
.macro-panel span { font-size: 12px; color: var(--muted); }
.detail .meta { color: var(--muted); font-size: 14px; }
.title-block { padding: 18px 4px 4px; }
.detail h1 { margin: 4px 0 6px; font-size: 28px; line-height: 1.15; letter-spacing: -.03em; }
.desc { margin: 6px 0 0; color: var(--muted); }

/* sections */
.box { border-radius: var(--radius); padding: 6px 18px 12px; margin: 14px 0; }
.box h2 { font-size: 19px; margin: 14px 0 6px; letter-spacing: -.02em; }
.box > p { margin: 0 0 8px; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
td { padding: 10px 0; border-top: 1px solid var(--hair); vertical-align: top; }
tr:first-child td { border-top: 0; }
td.num { text-align: right; white-space: nowrap; padding-left: 10px; color: var(--muted); }
td.num.g { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
td small { display: block; font-weight: 400; color: var(--muted); font-size: 12px; }
.sub td:first-child { padding-left: 14px; color: var(--muted); }
tr.head td { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; }
tr.total td { font-weight: 700; color: var(--ink); }
.ing { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0 10px; }
.ing span { background: var(--hair); border-radius: 10px; padding: 4px 10px; font-size: 14px; }
.alert { background: var(--warn-soft); color: var(--warn); border-radius: 16px; padding: 10px 14px; margin: 12px 0; font-size: 14px; font-weight: 500; }
.note { background: var(--glass); border: 1px solid var(--glass-edge); border-radius: 16px; padding: 10px 14px; font-size: 14px; margin: 12px 0; }
.pending { color: var(--muted); padding: 4px 0 10px; margin: 0; }
.src { font-size: 12px; color: var(--muted); margin-top: 20px; }

/* method */
.label { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; margin: 14px 0 6px; }
.counters { display: flex; gap: 10px; flex-wrap: wrap; }
.counter { display: flex; align-items: center; gap: 10px; background: var(--hair); border-radius: 14px; padding: 6px 8px 6px 14px; }
.counter b { min-width: 18px; text-align: center; font-size: 18px; }
.counter button {
  width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--glass-strong);
  color: var(--ink); font-size: 20px; line-height: 1; cursor: pointer; box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}
.part { border-top: 1px solid var(--hair); margin-top: 14px; padding-top: 4px; }
.part h3 { display: flex; align-items: center; gap: 10px; font-size: 17px; margin: 12px 0 4px; }
.part .n { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--grad); color: var(--accent-ink); display: grid; place-items: center; font-size: 14px; }
.part ol { margin: 0 0 8px; padding-left: 22px; }
.part li { margin-bottom: 8px; }

/* entrance */
.card, .box, .macro-panel { animation: rise .5s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes drift { to { transform: translate3d(-4vmax, 3vmax, 0) rotate(8deg) scale(1.08); } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }

@media (prefers-reduced-motion: reduce) {
  .card, .box, .macro-panel, body::before { animation: none; transition: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .glass, .top, .chip, .pill, .back, .card { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--bg); }
  body::before { display: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass, .top { background: var(--glass-strong); }
}

/* theme button, tab bar */
.icon-btn {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--glass-edge); cursor: pointer;
  background: var(--glass); color: var(--ink); font-size: 17px; display: grid; place-items: center;
}
.tabbar {
  position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 30;
  display: flex; gap: 4px; padding: 5px; border-radius: 999px;
}
.tabbar a { padding: 9px 22px; border-radius: 999px; font-weight: 600; font-size: 15px; color: var(--muted); }
.tabbar a.on { background: var(--grad); color: var(--accent-ink); box-shadow: var(--grad-glow); }
main { padding-bottom: 110px; }
:root[data-theme="dark"] body::before { opacity: 1; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body::before { opacity: 1; } }

/* planner */
@media (max-width: 420px) { .count { display: none; } }
.back-link { display: inline-block; color: var(--accent); font-weight: 600; margin: 4px 0 6px; }
.next { display: flex; justify-content: space-between; align-items: center; gap: 12px; border-radius: var(--radius); padding: 14px 16px; margin-bottom: 14px; }
.next .label { margin: 0 0 2px; }
.next-day { font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.thumbs { display: flex; flex: none; }
.thumbs img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; border: 2px solid var(--glass-edge); margin-left: -12px; }
.cal { border-radius: var(--radius); padding: 12px; }
.cal-head { display: flex; justify-content: space-between; align-items: center; padding: 2px 2px 10px; font-size: 17px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.wd { text-align: center; font-size: 11px; color: var(--muted); font-weight: 600; padding-bottom: 4px; }
.cell {
  aspect-ratio: 1; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 14px; gap: 4px; position: relative;
}
.cell b { font-weight: 600; }
.cell.blank { visibility: hidden; }
.cell.off { color: var(--muted); opacity: .5; }
.cell.fed { background: var(--hair); color: var(--muted); }
.cell.cook { background: var(--grad); color: var(--accent-ink); box-shadow: var(--grad-glow), inset 0 1px 0 rgba(255, 255, 255, .6); cursor: pointer; }
.cell.today { outline: 2px solid var(--ink); outline-offset: 1px; }
.dots { display: flex; gap: 2px; }
.dots i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .3; }
.dots i.on { opacity: 1; }
.slot { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--hair); }
.box h2 + .slot, .box h2 + .slot.empty { border-top: 0; }
.slot-photo { flex: none; width: 76px; height: 76px; border-radius: 16px; overflow: hidden; }
.slot-photo img { width: 100%; height: 100%; object-fit: cover; }
.slot-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.slot-name { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; }
.slot-actions { display: flex; gap: 14px; font-size: 14px; margin-top: 2px; }
.slot-actions a, .slot-actions button, .linkish { color: var(--accent); background: none; border: 0; padding: 0; cursor: pointer; font-weight: 600; font-size: 14px; }
.slot.empty { justify-content: space-between; align-items: center; padding: 16px 0; }
.slot.empty .add { color: var(--accent); font-weight: 600; }
.limit { margin: 10px 0 14px; }
.limit-top { display: flex; justify-content: space-between; font-size: 15px; margin-bottom: 6px; }
.track { height: 8px; border-radius: 99px; background: var(--hair); overflow: hidden; }
.track i { display: block; height: 100%; border-radius: 99px; background: var(--grad); }
.limit.over .track i { background: var(--warn); }
button.card.pick { padding: 0; text-align: left; color: inherit; font: inherit; cursor: pointer; width: 100%; }
.add-plan summary { list-style: none; cursor: pointer; }
.add-plan summary::-webkit-details-marker { display: none; }
.add-plan summary h2 { color: var(--accent); }
.add-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--hair); font-size: 15px; }
.add-btns { display: flex; gap: 6px; }
.add-btns .chip { padding: 6px 12px; font-size: 13px; }

/* comments */
.comment { padding: 10px 0; border-top: 1px solid var(--hair); }
.comments h2 + .comment { border-top: 0; }
.c-head { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); }
.c-head b { color: var(--ink); }
.comment p { margin: 4px 0 0; }
.comments textarea {
  width: 100%; border-radius: 14px; border: 1px solid var(--glass-edge); background: var(--hair); color: var(--ink);
  padding: 10px 12px; font: inherit; resize: vertical; margin-top: 4px;
}
.send { margin-top: 8px; border: 0; border-radius: 999px; padding: 9px 20px; font-weight: 600; background: var(--grad); color: var(--accent-ink); box-shadow: var(--grad-glow); cursor: pointer; }

/* PIN screen */
.pin-wrap { min-height: 60vh; display: grid; place-items: center; }
.pin { width: 100%; max-width: 340px; text-align: center; padding: 10px 22px 22px; }
.pin input {
  width: 100%; margin: 10px 0 4px; padding: 14px; border-radius: 16px; border: 1px solid var(--glass-edge);
  background: var(--hair); color: var(--ink); font-size: 24px; letter-spacing: .4em; text-align: center;
}
.pin .send { width: 100%; padding: 12px; font-size: 16px; }

/* person colours: violet for her, blue for him */
:root { --her: #7c5cf0; --him: #2f7fe0; }
:root[data-theme="dark"] { --her: #b9a4ff; --him: #7cb8ff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --her: #b9a4ff; --him: #7cb8ff; } }
td.her-c, tr.head td.her-c { color: var(--her); }
td.him-c, tr.head td.him-c { color: var(--him); }
.legend { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0 0 4px; }
.dot-her, .dot-him { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.dot-her { background: var(--her); } .dot-him { background: var(--him); margin-left: 6px; }

/* packing list */
.pack { border-top: 1px solid var(--hair); padding: 12px 0 6px; }
.pack-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.pack-head img { width: 52px; height: 52px; border-radius: 14px; object-fit: cover; flex: none; }
.pack-head div { display: flex; flex-direction: column; }
.ticks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0 6px; }
.tick {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 14px; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--ink); background: var(--hair);
  border: 1.5px solid transparent; text-align: left;
}
.tick.her { border-color: color-mix(in srgb, var(--her) 55%, transparent); }
.tick.his { border-color: color-mix(in srgb, var(--him) 55%, transparent); }
.tick-mark {
  width: 22px; height: 22px; border-radius: 50%; flex: none; display: grid; place-items: center;
  font-size: 13px; color: #fff; border: 2px solid currentColor; opacity: .5;
}
.tick.her .tick-mark { color: var(--her); } .tick.his .tick-mark { color: var(--him); }
.tick.done.her { background: color-mix(in srgb, var(--her) 18%, transparent); }
.tick.done.his { background: color-mix(in srgb, var(--him) 18%, transparent); }
.tick.done .tick-mark { opacity: 1; background: currentColor; }
.tick.done .tick-mark { color: #fff; }
.tick.done.her .tick-mark { background: var(--her); border-color: var(--her); }
.tick.done.his .tick-mark { background: var(--him); border-color: var(--him); }

.own { font-size: 12px; margin-top: 6px; font-weight: 600; color: var(--accent); }

/* over the daily limit: shown, never blocked */
:root { --over: #e0464a; }
.cell.over { box-shadow: 0 0 0 2px var(--over), var(--grad-glow); }
.over-badge {
  position: absolute; top: -5px; right: -5px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--over); color: #fff; font-size: 12px; font-weight: 800; display: grid; place-items: center;
  box-shadow: 0 2px 6px rgba(224, 70, 74, .5);
}
.over-label { display: inline-block; margin-top: 6px; padding: 3px 10px; border-radius: 999px; background: var(--over); color: #fff; font-size: 12px; font-weight: 700; }
.over-banner {
  margin: 12px 0; padding: 12px 14px; border-radius: 16px; font-size: 14px;
  background: color-mix(in srgb, var(--over) 14%, transparent); border: 1.5px solid var(--over); color: var(--ink);
}
.over-banner b { color: var(--over); }
.over-banner small { display: block; color: var(--muted); margin-top: 4px; }
.toast {
  position: fixed; left: 50%; top: calc(70px + env(safe-area-inset-top)); transform: translateX(-50%); z-index: 50;
  width: min(92vw, 420px); padding: 12px 16px; border-radius: 18px; font-size: 14px; cursor: pointer;
  border: 1.5px solid var(--over); animation: rise .35s cubic-bezier(.16, 1, .3, 1) both;
}
.toast b { color: var(--over); }
.toast small { color: var(--muted); }

/* 4-tab bar */
.tabbar a { padding: 8px 13px; font-size: 14px; }
@media (min-width: 420px) { .tabbar a { padding: 9px 18px; font-size: 15px; } }

/* Today: rings */
.rings { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; border-radius: var(--radius); padding: 14px 8px; margin-bottom: 14px; }
.ring { position: relative; display: flex; flex-direction: column; align-items: center; }
.ring svg { width: 100%; max-width: 78px; transform: rotate(-90deg); }
.ring-track { fill: none; stroke: var(--hair); stroke-width: 7; }
.ring-fill { fill: none; stroke: url(#ringGrad); stroke-width: 7; stroke-linecap: round; transition: stroke-dashoffset .8s cubic-bezier(.16, 1, .3, 1); }
.ring.over .ring-fill { stroke: var(--over); }
.ring-num { position: absolute; top: 0; left: 0; right: 0; aspect-ratio: 1; max-width: 78px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.05; }
.ring-num b { font-size: 15px; }
.ring-num small { font-size: 9.5px; color: var(--muted); }
.ring.over .ring-num b { color: var(--over); }
.ring-label { font-size: 12px; color: var(--muted); margin-top: 4px; }

/* Today: meals */
.today-meals { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 10px; padding: 6px 0 10px; }
.tmeal { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; }
.tmeal-photo { width: 84px; height: 84px; border-radius: 50%; overflow: hidden; border: 3px solid var(--glass-edge); box-shadow: var(--grad-glow); }
.tmeal-photo img { width: 100%; height: 100%; object-fit: cover; }
.tmeal-name { font-weight: 600; font-size: 14px; line-height: 1.25; }
.tmeal.off .tmeal-photo { opacity: .4; filter: grayscale(1); }
.tmeal.off .tmeal-name { text-decoration: line-through; color: var(--muted); }
.mini-toggle { margin-top: 4px; border: 1px solid var(--glass-edge); background: var(--hair); color: var(--muted); border-radius: 999px; padding: 3px 10px; font-size: 12px; cursor: pointer; }
.mini-toggle.on { background: color-mix(in srgb, var(--over) 15%, transparent); color: var(--over); border-color: var(--over); }

/* Today: week strip */
.week-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; padding: 4px 0 8px; }
.wday { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0; border-radius: 12px; background: var(--hair); font-size: 11px; color: var(--muted); }
.wday b { font-size: 12px; color: var(--ink); }
.wday.now { background: var(--grad); color: var(--accent-ink); }
.wday.now b { color: var(--accent-ink); }
.wday.empty { opacity: .55; }
.wday.over { box-shadow: inset 0 0 0 2px var(--over); }
.wday.over b { color: var(--over); }

/* Today: helper */
.cook-card h2 { font-size: 22px; margin-top: 2px; }
.hmeals { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 6px; }
.hmeal { display: flex; align-items: center; gap: 12px; }
.hmeal img { width: 56px; height: 56px; border-radius: 16px; object-fit: cover; flex: none; }
.hmeal > span { display: flex; flex-direction: column; }
.send.big { display: block; text-align: center; padding: 13px; font-size: 16px; margin: 6px 0 4px; }

/* Progress */
.seg-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.seg { display: flex; padding: 3px; border-radius: 999px; background: var(--glass); border: 1px solid var(--glass-edge); }
.seg button { border: 0; background: none; color: var(--muted); padding: 7px 16px; border-radius: 999px; font-weight: 600; cursor: pointer; }
.seg button.on { background: var(--grad); color: var(--accent-ink); box-shadow: var(--grad-glow); }
.seg button.on.her { background: var(--her); color: #fff; }
.seg button.on.his { background: var(--him); color: #fff; }
.cal-head.period { padding: 8px 2px; }
.over-t { color: var(--over) !important; }
.chart { position: relative; height: 190px; display: flex; align-items: flex-end; gap: 4px; padding: 6px 0 0; }
.chart.month { gap: 2px; }
.bar { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.bar i { display: block; width: 100%; max-width: 30px; border-radius: 8px 8px 3px 3px; background: var(--grad); min-height: 2px; }
.bar.over i { background: var(--over); }
.bar.empty i { background: var(--hair); }
.bar span { font-size: 10px; color: var(--muted); height: 14px; }
.chart.month .bar span { font-size: 8.5px; }
.limit-line { position: absolute; left: 0; right: 0; border-top: 1.5px dashed var(--over); opacity: .7; pointer-events: none; }
.limit-line span { position: absolute; right: 0; top: -17px; font-size: 10px; color: var(--over); font-weight: 600; }
.split { display: flex; height: 14px; border-radius: 99px; overflow: hidden; margin: 8px 0; }
.split i.p { background: var(--pro); } .split i.c { background: var(--carb); } .split i.f { background: var(--fat); }
.split-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--muted); padding-bottom: 8px; }

.freeze { font-size: 12px; margin-left: 2px; }

/* Beth's tick list while cooking */
tr.chk, li.chk { cursor: pointer; -webkit-user-select: none; user-select: none; transition: opacity .2s; }
tr.chk td { padding-top: 13px; padding-bottom: 13px; }
td.chk-mark { width: 34px; padding-right: 6px; }
td.chk-mark i, li.chk::before {
  display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid var(--accent); color: #fff; font-style: normal; font-size: 15px; font-weight: 800; vertical-align: middle;
}
tr.chk.done td.chk-mark i, li.chk.done::before { background: var(--grad); border-color: transparent; color: var(--accent-ink); }
tr.chk.done td.chk-mark i::after { content: "✓"; }
tr.chk.done td:not(.chk-mark), li.chk.done { text-decoration: line-through; opacity: .5; }
.part ol:has(li.chk) { list-style: none; padding-left: 0; counter-reset: step; }
li.chk { position: relative; padding: 10px 0 10px 40px; border-top: 1px solid var(--hair); counter-increment: step; }
li.chk::before { content: counter(step); position: absolute; left: 0; top: 9px; color: var(--accent); }
li.chk.done::before { content: "✓"; }
.cook-progress { border-radius: 16px; padding: 10px 14px 12px; margin: 10px 0 4px; position: sticky; top: 64px; z-index: 5; }
.cook-progress > .meta { margin: 0 0 6px; }
.cp-row { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; margin: 4px 0; }
.cp-done { display: none; color: var(--accent); font-weight: 700; margin: 6px 0 2px; }
.cook-progress.all-done .cp-done { display: block; }
.cook-progress {
  background: var(--bg); border: 1px solid var(--glass-edge); box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
  padding: 8px 12px 8px; top: 60px;
}
.cook-progress .cp-row { font-size: 13px; margin: 3px 0; }
.cook-progress [data-ck-reset] { position: absolute; right: 12px; bottom: 6px; font-size: 12px; }
.cook-progress .cp-done { margin: 4px 0 0; font-size: 13px; }
.cook-progress.all-done [data-ck-reset] { position: static; }

/* inspiration videos */
.video-row { display: flex; align-items: center; gap: 12px; margin: 8px 0; }
.send.big.video-btn { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0; text-decoration: none; }
.video-btn small { font-size: 12px; font-weight: 500; opacity: .75; }
.video-add { display: flex; gap: 8px; margin: 8px 0 6px; }
.video-add input {
  flex: 1; min-width: 0; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--glass-edge);
  background: var(--hair); color: var(--ink); font: inherit; font-size: 14px;
}
.video-add .send { margin-top: 0; }
.pill.vid { left: auto; right: 8px; bottom: 8px; top: auto; padding: 3px 9px; }

/* shopping list */
.toast.ok { border-color: var(--accent); }
.toast.ok b { color: var(--accent); }
.shop-btn { margin: 0 0 14px; }
.shop-cat { margin-bottom: 6px; }
.cat-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 18px 0 8px; }
.cat-head small { font-size: 12px; color: var(--muted); }
.cat-tag { display: inline-flex; align-items: center; gap: 8px; padding: 6px 8px 6px 10px; border-radius: 999px;
  background: var(--grad); color: var(--accent-ink); font-size: 13px; font-weight: 700; letter-spacing: .02em;
  box-shadow: 0 2px 10px rgba(106, 85, 232, .18), inset 0 1px 0 rgba(255, 255, 255, .5); }
.cat-ico { font-size: 15px; line-height: 1; }
.cat-n { min-width: 20px; padding: 1px 6px; border-radius: 999px; background: rgba(255, 255, 255, .6); font-size: 11px; text-align: center; }
.shop-item {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%;
  padding: 11px 0; border: 0; border-top: 1px solid var(--hair); background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.shop-item .tick-mark { color: var(--accent); opacity: .7; width: 24px; height: 24px; }
.shop-item.done .tick-mark { background: var(--grad); border-color: transparent; color: var(--accent-ink); opacity: 1; }
.shop-name { display: flex; flex-direction: column; min-width: 0; }
.shop-name small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shop-name small.lulu { white-space: normal; color: var(--accent); margin-top: 3px; line-height: 1.35; }
.shop-amt { font-weight: 600; font-size: 14px; text-align: right; max-width: 7.5em; overflow-wrap: anywhere; }
.shop-item.done .shop-name b, .shop-item.done .shop-amt { text-decoration: line-through; opacity: .5; }
.nm { padding: 8px 0; border-top: 1px solid var(--hair); }

/* person switcher */
.who-btn {
  width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--glass-edge); cursor: pointer;
  font-weight: 800; font-size: 15px; color: #fff; display: grid; place-items: center; background: var(--muted);
}
.who-btn.wife, .who-dot.wife { background: var(--her); }
.who-btn.husband, .who-dot.husband { background: var(--him); }
.who-btn.helper, .who-dot.helper { background: var(--grad); color: var(--accent-ink); }
.who-menu {
  position: fixed; top: calc(58px + env(safe-area-inset-top)); right: 12px; z-index: 60; border-radius: 18px; padding: 8px;
  min-width: 190px; background: var(--glass-strong); animation: rise .25s ease both;
}
.who-menu .label { margin: 4px 8px 6px; }
.who-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 8px; border: 0; border-radius: 12px;
  background: none; color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; text-align: left;
}
.who-menu button.on { background: var(--hair); }
.who-dot { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 13px; font-weight: 800; flex: none; }
.right { gap: 8px; }

.brand { white-space: nowrap; font-size: clamp(15px, 4.4vw, 20px); }

/* automatic portions */
.portion-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 14px; flex-wrap: wrap; }
.portion-row .who-dot { width: 22px; height: 22px; font-size: 11px; }
.portion-row > button:not(.linkish) {
  width: 28px; height: 28px; border-radius: 50%; border: 0; background: var(--hair); color: var(--ink); font-size: 17px; line-height: 1; cursor: pointer;
}
.portion-row b { min-width: 64px; text-align: center; }
.portion-note { margin: 0 0 6px; font-size: 14px; }
.her-t { color: var(--her); } .him-t { color: var(--him); }
a.pack-head { color: inherit; }

/* sauces: a little bowl of the sauce's colour instead of a photo */
.sauce-ph { display: grid; place-items: center; background: var(--grad); }
.bowl { display: block; width: 46%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, rgba(255, 255, 255, .55), transparent 30%), var(--sc);
  box-shadow: 0 0 0 7px rgba(255, 255, 255, .78), 0 0 0 8px rgba(0, 0, 0, .06), 0 14px 28px rgba(60, 40, 20, .22); }
.bowl.big { width: 74px; flex: none; }
.sauce-hero { display: flex; gap: 18px; align-items: center; border-radius: var(--radius); padding: 18px; margin: 10px 0 4px; }
.sauce-hero h1 { margin: 2px 0 4px; font-size: 24px; letter-spacing: -.02em; }
.sauce-hero .desc { margin: 0; }
.sauce-list { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 12px; }
.sauce-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; border: 1px solid var(--hair);
  color: inherit; text-decoration: none; background: rgba(255, 255, 255, .25); }
.sauce-row > span:not(.mini-photo) { flex: 1; min-width: 0; }
.sauce-row small { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.35; margin-top: 2px; }
.sauce-row em { font-style: normal; font-weight: 700; text-align: right; white-space: nowrap; font-size: 14px; }
.dot-bowl { flex: none; width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 38% 34%, rgba(255, 255, 255, .55), transparent 32%), var(--sc);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .8), 0 0 0 5px rgba(0, 0, 0, .06); }
.mini-photo { flex: none; width: 48px; height: 48px; border-radius: 12px; overflow: hidden; background: var(--hair); }
.mini-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* sauce planned with a meal, or suggested sauces to add */
.sauce-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 2px; }
.sauce-line .chip { font-size: 13px; padding: 6px 10px; }
.sauce-line.on { flex-wrap: nowrap; padding: 8px 10px; border-radius: 14px; border: 1px solid var(--hair); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.sauce-line.on .dot-bowl { width: 26px; height: 26px; }
.sl-body { flex: 1; min-width: 0; font-size: 14px; }
.sl-body small { display: block; color: var(--muted); font-size: 12px; }
.sl-who { display: flex; align-items: center; gap: 4px; flex: none; }
.sl-who .mini-toggle { font-size: 12px; padding: 4px 8px; }
.sl-who .linkish { font-size: 20px; padding: 0 4px; }
.toast hr { border: 0; border-top: 1px solid var(--hair); margin: 10px 0; }
.toast .ok-b { color: var(--accent); }
.toast-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.toast-btns .chip { font-size: 13px; padding: 7px 11px; }
.cook-sauces .sauce-list { margin-top: 12px; }
.cook-sauces h2 { font-size: 16px; margin: 14px 0 0; }
.sl-who .mini-toggle { margin-top: 0; }
.sl-who .mini-toggle.on { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); border-color: var(--accent); }
.hmeal small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.side-line .chip.on { box-shadow: none; }

/* saving the plan: header badge, lock box, calendar marks */
.save-status { display: none; font-size: 12px; font-weight: 600; padding: 4px 9px; border-radius: 999px; white-space: nowrap; }
.save-status.saving, .save-status.saved, .save-status.retry { display: inline-block; }
.save-status.saving { color: var(--muted); background: var(--hair); }
.save-status.saved { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.save-status.retry { color: var(--over); background: color-mix(in srgb, var(--over) 12%, transparent); }
.save-status:not(:empty) ~ .count { display: none; }
.lock-box { display: flex; align-items: center; gap: 12px; justify-content: space-between; padding: 12px 14px; border-radius: 18px; margin: 10px 0; }
.lock-box small { display: block; color: var(--muted); font-size: 13px; margin-top: 3px; line-height: 1.4; }
.lock-box.locked { border: 1.5px solid var(--accent); }
.lock-box.locked b { color: var(--accent); }
.lock-box .chip { flex: none; }
.lock-btn { width: 100%; margin: 4px 0 14px; }
.cell { position: relative; }
.cell .lock-badge { position: absolute; top: 2px; right: 3px; font-size: 10px; }
.cell.draft { outline: 1.5px dashed color-mix(in srgb, var(--muted) 60%, transparent); outline-offset: -3px; }

/* shopping prices and budget */
.shop-row { display: flex; align-items: center; gap: 8px; }
.shop-row .shop-item { flex: 1; min-width: 0; }
.price { width: 76px; flex: none; padding: 8px 8px; border-radius: 12px; border: 1px solid var(--glass-edge); background: var(--hair); color: var(--ink); font: inherit; font-size: 14px; text-align: right; }
.price::placeholder { color: var(--muted); font-size: 12px; }
.budget-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 10px 0; }
.budget-row .price { width: 110px; }
.past-week { font-size: 14px; padding: 3px 0; }

/* day totals bar: stays under the header while planning a cook day */
.day-bar { position: sticky; top: calc(var(--top-h, 60px) + 6px); z-index: 15; display: flex; flex-direction: column; gap: 6px;
  padding: 9px 12px; border-radius: 18px; margin: 8px 0 12px; }
.db-row { display: flex; align-items: center; gap: 10px; }
.db-main { flex: 1; min-width: 0; }
.db-top { display: flex; align-items: baseline; gap: 5px; font-size: 13px; }
.db-top > b { font-size: 16px; }
.db-top small { color: var(--muted); }
.db-mac { margin-left: auto; display: flex; gap: 8px; font-size: 12px; font-weight: 600; }
.db-mac span { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.db-mac small { font-weight: 400; }
.db-mac .hi { color: var(--over); }
.db-row .track { height: 5px; margin-top: 4px; }
.db-row.over .db-top > b { color: var(--over); }
.db-row.over .track i { background: var(--over); }
.adds { display: flex; gap: 8px; font-size: 12px; color: var(--muted); margin-top: 4px; }
.adds .her-t, .adds .him-t { font-weight: 600; }

/* batch and divide: one cooked batch shared out by weight */
.bt-how { margin: 6px 0 12px; padding-left: 20px; font-size: 14px; color: var(--muted); line-height: 1.45; }
.bt-row { padding: 10px 0; border-top: 1px solid var(--line); }
.bt-name { font-weight: 700; margin-bottom: 6px; }
.bt-in { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.bt-in input { width: 96px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--glass-edge); background: var(--hair); color: var(--ink); font: inherit; font-size: 15px; text-align: right; }
.bt-out { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 14px; }
.bt-total { display: flex; gap: 14px; align-items: baseline; padding-top: 10px; border-top: 1px solid var(--line); font-size: 14px; }
.bt-total span { color: var(--muted); margin-right: auto; }
.batch-note { margin: 2px 0 8px; }
.bt-exact { margin-top: 10px; }
.bt-exact summary { cursor: pointer; color: var(--accent); font-weight: 600; font-size: 14px; }
.bt-exact .bt-in { justify-content: space-between; color: var(--ink); font-size: 14px; }
.bt-exact .bt-in span:first-child { flex: 1; }
.batch-note, .box-each { font-size: 15px; font-weight: 600; line-height: 1.45; margin: 4px 0 12px; padding: 10px 12px; border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 10%, transparent); }