/* Placeholder look until the design references arrive: every colour and size is a token
   here, so the new design mostly replaces this block. Logical properties (inline-start/end)
   keep the layout right in Arabic (right-to-left). */
/* Direction from the references (Nov 2026): near-black backgrounds, deep green as a second
   surface, warm copper accent, cream pill buttons, rounded dark cards, geometric type,
   top-down food photography (photos arrive with the recipe library). */
:root {
  --bg: #0e0d0c; --bg-2: #14201a; --card: #1c1b19; --card-2: #252320; --ink: #f4efe6; --muted: #a39b8f; --line: #2e2b27;
  --accent: #e07a3f; --accent-ink: #1a0f08; --accent-soft: rgba(224, 122, 63, .14); --cream: #efe6d6; --cream-ink: #1a1714;
  --green: #2f5a43; --warn: #ff8f6b; --warn-soft: rgba(255, 120, 90, .13);
  --radius: 22px; --gap: 14px;
  --font: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-ar: "IBM Plex Sans Arabic", "Noto Sans Arabic", system-ui, sans-serif;
  color-scheme: dark;
}
html[lang="ar"] { --font: var(--font-ar); }
* { box-sizing: border-box; }
html, body { overflow-x: clip; }
body { margin: 0; min-height: 100vh; color: var(--ink); font: 16px/1.5 var(--font); -webkit-text-size-adjust: 100%;
  background: radial-gradient(120% 60% at 100% 0%, rgba(47, 90, 67, .35), transparent 60%), var(--bg); background-attachment: fixed; }
.top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between;
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px; background: rgba(14, 13, 12, .72); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid var(--line); }
.brand { font-weight: 700; font-size: 18px; letter-spacing: .02em; color: var(--ink); text-decoration: none; }
.brand::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); margin-inline-end: 8px; vertical-align: middle; }
main { max-width: 560px; margin: 0 auto; padding: 16px 16px calc(32px + env(safe-area-inset-bottom)); }
h1 { font-size: 30px; line-height: 1.15; font-weight: 600; letter-spacing: -.01em; margin: 8px 0 6px; }
h2 { font-size: 18px; font-weight: 600; margin: 0 0 10px; }
p { margin: 0 0 10px; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin: var(--gap) 0; }
.stack > * + * { margin-top: 10px; }
.row { display: flex; gap: 10px; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.spread { justify-content: space-between; }
label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
input, select { width: 100%; font: inherit; padding: 13px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--card-2); color: var(--ink); }
input::placeholder { color: #6e675d; }
input:focus, select:focus, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.code-input { font-size: 24px; letter-spacing: .3em; text-align: center; }
button, .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-weight: 700;
  padding: 13px 22px; border-radius: 999px; border: 1px solid transparent; background: var(--cream); color: var(--cream-ink);
  cursor: pointer; text-decoration: none; min-height: 48px; letter-spacing: .01em; transition: transform .15s ease, background .2s ease; }
button:active, .btn:active { transform: scale(.98); }
.btn.accent, button.accent { background: var(--accent); color: var(--accent-ink); }
button.full, .btn.full { width: 100%; }
button.ghost, .btn.ghostlink { background: transparent; color: var(--ink); border-color: var(--line); }
button.link { background: none; border: 0; padding: 4px 0; min-height: 0; color: var(--accent); font-weight: 600; }
button.danger { background: var(--warn-soft); color: var(--warn); }
button.small, .btn.small { padding: 7px 14px; min-height: 36px; font-size: 14px; }
button:disabled { opacity: .5; cursor: default; }
.provider { background: var(--card-2); color: var(--ink); border-color: var(--line); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 8px 14px; min-height: 38px; border-radius: 999px; background: var(--card-2); color: var(--ink); border: 1px solid var(--line); font-weight: 500; }
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.choice { display: block; width: 100%; text-align: start; background: var(--card-2); color: var(--ink); border: 1px solid var(--line); border-radius: 16px; padding: 14px 18px; margin-top: 8px; font-weight: 600; }
.choice[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.choice small { display: block; font-weight: 400; color: var(--muted); }
.error { background: var(--warn-soft); color: var(--warn); border-radius: 12px; padding: 10px 12px; font-size: 14px; }
.note { background: var(--accent-soft); border-radius: 12px; padding: 10px 12px; font-size: 14px; }
.member { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.member:first-of-type { border-top: 0; }
.avatar { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--card-2); border: 1px solid var(--line); color: var(--cream); font-weight: 600; flex: none; }
.member .who { flex: 1; min-width: 0; }
.member .who b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); }
.tag.pending { background: var(--warn-soft); color: var(--warn); }
.linkbox { word-break: break-all; font-size: 13px; background: var(--bg); border: 1px dashed #4a453e; border-radius: 14px; padding: 10px 12px; direction: ltr; text-align: start; }
.switch { display: flex; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 4px; margin: 6px 0 4px; }
.switch button { flex: 1; background: transparent; color: var(--ink); min-height: 38px; }
.switch button[aria-pressed="true"] { background: var(--cream); color: var(--cream-ink); }
.steps { display: flex; gap: 6px; margin-bottom: 12px; }
.steps i { flex: 1; height: 4px; border-radius: 4px; background: var(--line); }
.steps i.on { background: var(--accent); }
dialog { border: 0; border-radius: var(--radius); padding: 18px; width: min(92vw, 440px); background: var(--card); color: var(--ink); }
dialog::backdrop { background: rgba(0,0,0,.4); }
.divider { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
@media (prefers-reduced-motion: no-preference) { .card { animation: in .2s ease both; } @keyframes in { from { opacity: 0; transform: translateY(4px); } } }

/* pieces added for the reference look */
.card { box-shadow: 0 12px 30px rgba(0, 0, 0, .35); }
.hero { position: relative; padding: 18px 0 8px; isolation: isolate; }
.hero::after { content: ""; position: absolute; inset-inline-end: -40px; top: -30px; width: 160px; height: 160px; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle at 35% 35%, #3a2a1d, #15110d 70%); box-shadow: 0 30px 60px rgba(0, 0, 0, .6), inset 0 0 0 10px #1d1915; opacity: .9; }
.eyebrow { text-transform: uppercase; letter-spacing: .18em; font-size: 12px; color: var(--accent); margin: 0; }
html[lang="ar"] .eyebrow { letter-spacing: 0; }
.back { display: inline-block; color: var(--muted); text-decoration: none; margin: 4px 0; }
details.card > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; }
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary::after { content: "+"; font-size: 22px; color: var(--accent); }
details.card[open] > summary::after { content: "–"; }
details.card > summary h2 { margin: 0; }
details.card[open] > summary { margin-bottom: 12px; }
.member .acts { justify-content: flex-end; gap: 6px; }
@media (max-width: 420px) { .member { flex-wrap: wrap; } .member .acts { width: 100%; justify-content: flex-start; padding-inline-start: 54px; } }
.note-card { border-color: var(--accent); }
.tag { background: var(--card-2); color: var(--muted); border: 1px solid var(--line); font-weight: 500; }
.note { background: var(--accent-soft); color: var(--cream); }
@media (prefers-reduced-transparency: reduce) { .top { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--bg); } }

/* ---------- Phase 2 ---------- */
main { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
/* page change: content rises in softly */
@media (prefers-reduced-motion: no-preference) {
  main > * { animation: rise .32s cubic-bezier(.2, .8, .2, 1) both; }
  main > *:nth-child(2) { animation-delay: .03s; } main > *:nth-child(3) { animation-delay: .06s; } main > *:nth-child(4) { animation-delay: .09s; }
  @keyframes rise { from { opacity: 0; transform: translateY(8px); } }
}
/* bottom tabs: a dark floating bar like the references */
.tabs { position: fixed; z-index: 10; inset-inline: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); max-width: 536px; margin: 0 auto;
  display: flex; justify-content: space-around; padding: 6px; border-radius: 999px; border: 1px solid var(--line);
  background: rgba(20, 19, 17, .82); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); box-shadow: 0 16px 40px rgba(0,0,0,.5); }
.tabs a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; border-radius: 999px; color: var(--muted); text-decoration: none; font-size: 11px; font-weight: 600; }
.tabs a i { font-style: normal; font-size: 17px; line-height: 1; }
.tabs a.on { background: var(--cream); color: var(--cream-ink); }
/* a plate: dark ceramic with a warm glow, where the food photo will go */
.plate { width: 56px; height: 56px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 50% 50%, #3b2f24 0 38%, #1b1814 39% 62%, #26221d 63% 70%, #141210 71%);
  box-shadow: 0 10px 24px rgba(0,0,0,.55), inset 0 2px 0 rgba(255,255,255,.06); }
.plate.sm { width: 44px; height: 44px; } .plate.lg { width: 210px; height: 210px; } .plate.xl { width: 170px; height: 170px; }
.recipe-hero { display: grid; place-items: center; padding: 10px 0 4px; }
@media (prefers-reduced-motion: no-preference) { .recipe-hero .plate { animation: spin-in .7s cubic-bezier(.2, .8, .2, 1) both; } @keyframes spin-in { from { opacity: 0; transform: rotate(-70deg) scale(.7); } } }
/* the plate rail: swipe between today's meals; the middle plate is big, the others turn away */
.plate-rail { display: flex; gap: 6px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px calc(50% - 95px) 14px; margin: 0 -16px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.plate-rail::-webkit-scrollbar { display: none; }
.plate-card { --d: 0; flex: 0 0 190px; scroll-snap-align: center; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px;
  color: var(--ink); text-decoration: none; transform: scale(calc(1 - .22 * var(--ad, 0))); opacity: calc(1 - .45 * var(--ad, 0)); transition: transform .12s linear, opacity .12s linear; }
.plate-card .plate { transform: rotate(calc(var(--d) * 70deg)); transition: transform .12s linear; }
.plate-card b { font-size: 16px; line-height: 1.25; }
.slot { display: block; text-transform: uppercase; letter-spacing: .12em; font-size: 11px; color: var(--accent); font-weight: 600; }
html[lang="ar"] .slot { letter-spacing: 0; }
.day-card { display: block; color: var(--ink); text-decoration: none; }
.day-card.past { opacity: .55; }
.meal-list { list-style: none; padding: 0; margin: 8px 0 0; }
.meal-list li { display: flex; gap: 10px; align-items: baseline; padding: 4px 0; border-top: 1px solid var(--line); }
.meal-list li:first-child { border-top: 0; }
.meal-list .slot { width: 78px; flex: none; }
.slot-row { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.slot-row:first-child { border-top: 0; }
.slot-row a { color: var(--ink); text-decoration: none; }
.slot-row.skipped { opacity: .5; }
.grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.warn { color: var(--warn); font-size: 13px; }
.tag.ready { background: rgba(124, 196, 160, .14); color: #8fd1ad; border-color: transparent; }
.tag.cancelled { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.tag.draft { color: var(--cream); }
.tag.sep { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.alert-card { display: flex; color: var(--ink); text-decoration: none; border-color: var(--accent); }
.actions { margin: 14px 0; }
table.grid, table.ing { width: 100%; border-collapse: collapse; font-size: 14px; }
table.grid th { text-align: start; color: var(--muted); font-weight: 500; font-size: 12px; padding: 4px; }
table.grid td, table.ing td { padding: 7px 4px; border-top: 1px solid var(--line); }
td.num, th.num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.req { display: flex; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.req:first-of-type { border-top: 0; }
/* the cook view */
.meal-block h2 { margin: 2px 0 0; } .meal-block h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin: 16px 0 8px; }
.meal-block .row { gap: 14px; }
.part h4 { margin: 14px 0 6px; font-size: 15px; }
.part ol { padding-inline-start: 20px; margin: 8px 0; } .part li { margin-bottom: 6px; }
.part.sep { border-inline-start: 3px solid var(--accent); padding-inline-start: 12px; }
li.pack-sep { list-style: none; margin-inline-start: -20px; background: var(--warn-soft); color: var(--warn); border: 1px solid var(--warn); border-radius: 14px; padding: 9px 12px; font-weight: 700; }
.box-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; }
.bx-wrap { background: var(--card-2); border: 1px solid var(--line); border-radius: 16px; padding: 10px; }
.bx-who { font-size: 14px; margin-bottom: 6px; }
.bx { display: flex; gap: 4px; height: 96px; border: 2px solid #4a443c; border-radius: 12px; padding: 4px; }
.bx-sec { flex-basis: 0; min-width: 0; border-radius: 8px; background: #2f2a24; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 3px; overflow: hidden; }
.bx-sec:nth-child(2) { background: #2c3a30; } .bx-sec:nth-child(3) { background: #3a2f22; } .bx-sec:nth-child(4) { background: #2b2f3a; }
.bx-sec span { font-size: 10px; line-height: 1.15; color: var(--muted); } .bx-sec b { font-size: 12px; }
.bx-pots { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.pot { font-size: 11px; padding: 3px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); }
/* recipes */
.recipe-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 12px; }
.recipe-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; margin: 0; color: var(--ink); text-decoration: none; }
.recipe-card .plate { width: 96px; height: 96px; margin-bottom: 4px; transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
@media (hover: hover) { .recipe-card:hover .plate { transform: rotate(40deg) scale(1.05); } }
.macros .macro-row { display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; margin: 6px 0; }
.macro-row div { display: flex; flex-direction: column; } .macro-row b { font-size: 20px; } .macro-row span { font-size: 12px; color: var(--muted); }
.macro-row div + div { border-inline-start: 1px solid var(--line); }
/* picker */
dialog.picker { max-height: 86vh; display: flex; flex-direction: column; }
dialog.picker[open] { display: flex; }
.pick-list { overflow-y: auto; margin-top: 8px; }
.choice.pick small.warn { color: var(--warn); }
/* shopping */
.money .bar { height: 8px; border-radius: 8px; background: var(--card-2); overflow: hidden; margin: 8px 0; }
.money .bar i { display: block; height: 100%; background: var(--accent); border-radius: 8px; } .money .bar i.over { background: var(--warn); }
.shop-row { display: flex; gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.shop-row:first-of-type { border-top: 0; }
.shop-row.done b { text-decoration: line-through; color: var(--muted); }
.tick { width: 28px; height: 28px; min-height: 0; padding: 0; border-radius: 50%; background: transparent; border: 2px solid #5a5248; flex: none; }
.tick[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); }
.tick[aria-pressed="true"]::after { content: "✓"; color: var(--accent-ink); font-size: 14px; }
.price { width: 92px; padding: 8px 10px; text-align: end; }
/* progress */
.week-bars { display: flex; gap: 8px; height: 110px; align-items: flex-end; margin-top: 12px; }
.wb { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end; }
.wb i { width: 100%; max-width: 26px; border-radius: 8px 8px 4px 4px; background: linear-gradient(var(--accent), #a8542a); min-height: 3px; }
.wb i.over { background: var(--warn); } .wb span { font-size: 11px; color: var(--muted); }
@media (prefers-reduced-motion: no-preference) { .wb i { animation: grow .6s cubic-bezier(.2, .8, .2, 1) both; transform-origin: bottom; } @keyframes grow { from { transform: scaleY(0); } } }
.ghostlink { background: transparent; color: var(--ink); border: 1px solid var(--line); }
@media (prefers-reduced-motion: reduce) { .plate-card, .plate-card .plate { transform: none !important; opacity: 1 !important; } }
.pot.allergy { background: var(--warn-soft); color: var(--warn); text-decoration: line-through; }
.pot.allergy .warn { text-decoration: none; display: inline-block; }
.bx-sec.allergy { outline: 2px solid var(--warn); }
.bx-sec .warn { font-size: 10px; }
/* the recipe page from the second animation reference: ingredients slide in one after another */
@media (prefers-reduced-motion: no-preference) {
  .part table.ing tr { animation: slide-in .4s cubic-bezier(.2, .8, .2, 1) both; }
  .part table.ing tr:nth-child(2) { animation-delay: .05s; } .part table.ing tr:nth-child(3) { animation-delay: .1s; }
  .part table.ing tr:nth-child(4) { animation-delay: .15s; } .part table.ing tr:nth-child(5) { animation-delay: .2s; } .part table.ing tr:nth-child(n+6) { animation-delay: .25s; }
  @keyframes slide-in { from { opacity: 0; transform: translateX(18px); } }
  html[dir="rtl"] .part table.ing tr { animation-name: slide-in-rtl; } @keyframes slide-in-rtl { from { opacity: 0; transform: translateX(-18px); } }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .25s; }
  ::view-transition-group(*) { animation-duration: .45s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
}
/* from the latest references: glossy deep-green meal rows with a light streak, plates that
   break out of their cards, a round check button */
.list-title { margin: 22px 0 10px; font-size: 22px; }
.meal-row { position: relative; overflow: hidden; display: flex; gap: 14px; align-items: center; padding: 14px; margin-bottom: 10px; border-radius: 24px;
  background: linear-gradient(115deg, rgba(255,255,255,0) 55%, rgba(220,255,235,.07) 62%, rgba(255,255,255,0) 70%), linear-gradient(160deg, #22302a, #171c19 70%);
  border: 1px solid rgba(255,255,255,.07); box-shadow: 0 12px 30px rgba(0,0,0,.35); }
.meal-row .plate { width: 64px; height: 64px; }
.meal-row b { font-weight: 500; font-size: 16px; }
.meal-row.skipped { opacity: .45; } .meal-row.skipped b { text-decoration: line-through; }
.macros-mini { font-size: 13px; color: var(--muted); } .macros-mini i { font-style: normal; color: var(--accent); margin-inline-start: 6px; } .macros-mini i:first-child { margin-inline-start: 0; }
.check { width: 46px; height: 46px; min-height: 0; padding: 0; border-radius: 50%; flex: none; background: rgba(255,255,255,.06); color: var(--muted); border: 1px solid rgba(255,255,255,.15); }
.check[aria-pressed="true"] { background: var(--cream); color: var(--cream-ink); border-color: var(--cream); }
@media (prefers-reduced-motion: no-preference) { .check { transition: background .2s, transform .2s; } .check:active { transform: scale(.9); } }
.recipe-grid { margin-top: 44px; row-gap: 48px; }
.recipe-card { overflow: visible; }
.recipe-card .plate { margin-top: -44px; width: 104px; height: 104px; }
/* creator credit and their video (official player, loaded on tap) */
.credit { margin: 4px 0 8px; color: var(--muted); font-size: 14px; } .credit a { color: var(--accent); }
.by { color: var(--accent); }
.video-card iframe { display: block; width: 100%; border: 0; border-radius: 16px; margin-top: 4px; background: #000; }
.video-card iframe.yt { aspect-ratio: 9 / 16; max-height: 70vh; }
.video-card iframe.reel { height: 640px; max-height: 80vh; }

/* ---------- design pass (Nov 2026) ---------- */
/* loading: a soft outline of the page with a slow sheen */
.skeleton { display: grid; gap: 14px; padding-top: 12px; }
.skeleton i { display: block; border-radius: var(--radius); background: var(--card); position: relative; overflow: hidden; }
.skeleton .sk-title { width: 55%; height: 34px; border-radius: 12px; }
.skeleton .sk-plate { width: 170px; height: 170px; border-radius: 50%; justify-self: center; margin: 8px 0; }
.skeleton .sk-card { height: 120px; } .skeleton .sk-card.short { height: 76px; }
@media (prefers-reduced-motion: no-preference) {
  .skeleton { animation: fade-in .3s .15s both; } @keyframes fade-in { from { opacity: 0; } }
  .skeleton i::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.045), transparent); animation: sheen 1.4s ease-in-out infinite; }
  @keyframes sheen { to { transform: translateX(100%); } }
}
/* empty pages: a drawn plate and one line */
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 28px 20px; margin: var(--gap) 0;
  border-radius: var(--radius); border: 1px dashed #3a362f; background: radial-gradient(80% 60% at 50% 0%, rgba(47, 90, 67, .18), transparent 70%); }
.empty svg { width: 96px; height: 96px; }
.empty p { color: var(--muted); max-width: 30ch; margin: 0; }
.e-rim { fill: #1b1814; stroke: #3a332b; stroke-width: 2; } .e-well { fill: #2a241e; }
.e-line { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: .8; } .e-line.dash { stroke-dasharray: 6 6; }
/* round icon button (plan settings) */
.icon-btn { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); background: var(--card); color: var(--ink); }
.icon-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
/* a page title with its status under it, so long dates never squeeze */
.title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; } .title-row h1 { flex: 1 1 100%; margin-bottom: 0; }
/* filters in one swipeable line */
.chips.scroller { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding: 2px 16px; }
.chips.scroller::-webkit-scrollbar { display: none; } .chips.scroller .chip { flex: none; }
/* the boxes table: the numbers sit under their meal */
table.grid th:not(:first-child), table.grid td.num { text-align: center; }
/* macros: one small chip-like group per number, safe in right-to-left */
.macros-mini { display: flex; flex-wrap: wrap; gap: 2px 10px; } .macros-mini bdi { white-space: nowrap; } .macros-mini i { margin-inline-start: 0; margin-inline-end: 2px; }
/* progress: bars inside a track with a dashed target line */
.week-bars { position: relative; }
.wb-track { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; position: relative; }
.wb-track::before { content: ""; position: absolute; inset-inline: -4px; bottom: var(--goal); border-top: 1px dashed rgba(239, 230, 214, .35); }
.wb i { width: 100%; max-width: 26px; } .wb.today span { color: var(--accent); font-weight: 700; }
.wb-key { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; } .wb-key i { width: 18px; border-top: 1px dashed rgba(239, 230, 214, .5); }
/* plate links in meal rows */
.plate-link { flex: none; border-radius: 50%; }
/* real recipe photos: cropped round, sitting in the dark ceramic rim so the plate look stays */
.plate.photo { position: relative; overflow: hidden; background: #141210; padding: 7%; }
.plate.photo img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(255,255,255,.06), inset 0 0 0 1px rgba(0,0,0,.4); }
.plate.photo::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 30% 22%, rgba(255,255,255,.14), transparent 35%); }
.plate.sm.photo, .meal-row .plate.photo { padding: 4px; }
.title-row { margin-bottom: 6px; }
/* amounts like "150 g" keep their order in Arabic and stay at the far edge */
html[dir="rtl"] td.num { direction: ltr; text-align: left; }
html[dir="rtl"] table.grid td.num { text-align: center; }
.bx-sec b, .pot b { unicode-bidi: isolate; direction: ltr; }
/* people: the avatar tint says the role at a glance */
.avatar.r-main { background: var(--accent-soft); color: var(--accent); border-color: rgba(224, 122, 63, .35); }
.avatar.r-cook { background: rgba(47, 90, 67, .35); color: #9fd8b8; border-color: rgba(124, 196, 160, .3); }
.avatar.r-child { background: #2a2620; color: var(--cream); }
/* Swahili meal names are long ("Chakula cha mchana"): the label sits above the dish */
html[lang="sw"] .meal-list li { flex-direction: column; gap: 0; padding: 7px 0; }
html[lang="sw"] .meal-list .slot { width: auto; }
html[lang="sw"] .slot { letter-spacing: .08em; }
/* welcome: three plates, the middle one big, drifting slowly like the home rail */
.welcome { text-align: center; padding: 6px 0 4px; }
.welcome .plates { position: relative; height: 230px; margin: 0 -16px 6px; }
.welcome .plate { position: absolute; top: 50%; left: 50%; }
.welcome .plate:nth-child(1) { width: 190px; height: 190px; margin: -95px 0 0 -95px; z-index: 2; box-shadow: 0 30px 60px rgba(0,0,0,.6), 0 0 80px rgba(224, 122, 63, .14), inset 0 2px 0 rgba(255,255,255,.06); }
.welcome .plate:nth-child(2) { width: 112px; height: 112px; margin: -86px 0 0 -170px; opacity: .7; }
.welcome .plate:nth-child(3) { width: 124px; height: 124px; margin: -20px 0 0 52px; opacity: .8; }
.welcome h1 { font-size: 32px; } .welcome p { max-width: 32ch; margin-inline: auto; }
@media (prefers-reduced-motion: no-preference) {
  .welcome .plate { animation: drift 9s ease-in-out infinite alternate; }
  .welcome .plate:nth-child(2) { animation-duration: 11s; animation-delay: -3s; } .welcome .plate:nth-child(3) { animation-duration: 13s; animation-delay: -6s; }
  @keyframes drift { from { transform: translateY(-5px) rotate(-8deg); } to { transform: translateY(6px) rotate(10deg); } }
}
/* code, PIN and invite screens: a small plate on top, centred */
.card.auth { text-align: center; padding-top: 22px; margin-top: 28px; }
.auth-plate { width: 64px; height: 64px; margin: 0 auto 4px; }
.card.auth h1 { font-size: 26px; } .card.auth label, .card.auth .error { text-align: start; }
/* onboarding: one roomy question at a time, buttons at the bottom, steps slide in */
.card.onboard { margin-top: 18px; padding: 20px 18px; min-height: min(560px, calc(100vh - 160px)); display: flex; flex-direction: column; }
.onboard .steps { margin-bottom: 4px; } .onboard .eyebrow { margin: 6px 0 0; }
.onboard-body h2 { font-size: 26px; line-height: 1.2; margin: 4px 0 14px; }
.onboard-body > label { margin-top: 4px; }
.onboard-nav { margin-top: auto; padding-top: 16px; } .onboard-nav .grow-btn { flex: 1; }
.code-input::placeholder { color: #4a453e; letter-spacing: .3em; }
@media (prefers-reduced-motion: no-preference) {
  .onboard-body.from-next { animation: step-next .35s cubic-bezier(.2, .8, .2, 1) both; }
  .onboard-body.from-back { animation: step-back .35s cubic-bezier(.2, .8, .2, 1) both; }
  @keyframes step-next { from { opacity: 0; transform: translateX(24px); } } @keyframes step-back { from { opacity: 0; transform: translateX(-24px); } }
  html[dir="rtl"] .onboard-body.from-next { animation-name: step-back; } html[dir="rtl"] .onboard-body.from-back { animation-name: step-next; }
  .steps i { transition: background .3s; }
}

/* ---------- liquid glass (Nov 2026, Amira's references) ----------
   Apple-style glass on the dark base: soft colour glows behind everything (glass needs
   something to frost), see-through panels with a lit top edge and a warm rim at the bottom,
   glossy pill buttons. Everything falls back to solid surfaces for reduced transparency. */
:root {
  --glass: rgba(255, 255, 255, .055); --glass-hi: rgba(255, 255, 255, .09); --glass-line: rgba(255, 255, 255, .1);
  --glass-shadow: 0 18px 40px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 -1px 0 rgba(0, 0, 0, .35);
  --frost: blur(18px) saturate(160%);
}
body { background:
  radial-gradient(75% 45% at 105% -5%, rgba(47, 130, 92, .55), transparent 70%),
  radial-gradient(70% 42% at -15% 38%, rgba(224, 122, 63, .38), transparent 72%),
  radial-gradient(65% 40% at 105% 72%, rgba(86, 165, 185, .24), transparent 72%),
  radial-gradient(60% 34% at 10% 104%, rgba(214, 120, 70, .3), transparent 72%),
  var(--bg); background-attachment: fixed; }

/* panels: translucent, frosted, floating */
.card, .meal-row, .empty, .bx-wrap, dialog {
  background: linear-gradient(160deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .025) 45%, rgba(255, 255, 255, .045));
  border: 1px solid var(--glass-line); box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--frost); backdrop-filter: var(--frost); }
.meal-row { background:
  linear-gradient(115deg, transparent 55%, rgba(220, 255, 235, .07) 62%, transparent 70%),
  linear-gradient(160deg, rgba(47, 110, 80, .32), rgba(255, 255, 255, .03) 70%); }
.empty { border-style: dashed; border-color: rgba(255, 255, 255, .14); }
/* the edge of the glass: bright where the light hits (top-left), a warm copper glow at the bottom */
.card, .meal-row, .switch { position: relative; }
.card::before, .meal-row::before, .tabs::before, .switch::before, dialog::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(140deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .08) 28%, transparent 52%, rgba(255, 255, 255, .06) 78%, rgba(224, 122, 63, .45));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.card.note-card::before, .alert-card::before { background: linear-gradient(140deg, rgba(255, 255, 255, .5), rgba(224, 122, 63, .5) 40%, rgba(224, 122, 63, .7)); }
dialog::backdrop { background: rgba(0, 0, 0, .45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

/* header and bottom tabs: the strongest glass, floating over the page */
.top { background: rgba(14, 13, 12, .45); border-bottom: 1px solid rgba(255, 255, 255, .07);
  -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%); }
.tabs { background: linear-gradient(170deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .04) 60%), rgba(18, 17, 15, .5);
  border-color: transparent; -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
  box-shadow: 0 20px 44px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .18); }

/* glossy cream pill: a lit top half, a soft shadow inside the bottom, a faint warm glow under it */
:is(button, .btn):not(.ghost, .ghostlink, .chip, .choice, .link, .tick, .check, .danger, .accent, .provider, .icon-btn):not(.switch button),
.switch button[aria-pressed="true"], .tabs a.on, .check[aria-pressed="true"] {
  background: linear-gradient(180deg, #fffaf1 0%, #f3ebdd 46%, #e2d5bf 100%); color: var(--cream-ink); border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: inset 0 1px 0 #fff, inset 0 -3px 6px rgba(120, 90, 55, .22), 0 8px 22px rgba(0, 0, 0, .4), 0 4px 18px rgba(239, 220, 190, .14); }
/* glossy copper: the accent button and selected chips */
.btn.accent, button.accent, .chip[aria-pressed="true"] {
  background: linear-gradient(180deg, #f6a06a 0%, #e07a3f 50%, #b95a26 100%); color: #1a0d05; border: 1px solid rgba(255, 200, 160, .55);
  box-shadow: inset 0 1px 0 rgba(255, 230, 205, .8), inset 0 -3px 6px rgba(90, 35, 8, .35), 0 8px 22px rgba(0, 0, 0, .4), 0 6px 22px rgba(224, 122, 63, .3); }
/* glass pills: ghost buttons, chips, choices, round buttons, fields */
button.ghost, .btn.ghostlink, .ghostlink, .chip:not([aria-pressed="true"]), .choice, .provider, .icon-btn, .check:not([aria-pressed="true"]), .switch {
  background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03)); border: 1px solid rgba(255, 255, 255, .13);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 6px 16px rgba(0, 0, 0, .28);
  -webkit-backdrop-filter: blur(10px) saturate(150%); backdrop-filter: blur(10px) saturate(150%); color: var(--ink); }
.choice[aria-pressed="true"] { background: linear-gradient(180deg, rgba(224, 122, 63, .26), rgba(224, 122, 63, .1)); border-color: rgba(240, 150, 95, .6);
  box-shadow: inset 0 1px 0 rgba(255, 210, 180, .3), 0 6px 20px rgba(224, 122, 63, .18); }
.switch { padding: 4px; } .switch button:not([aria-pressed="true"]) { background: transparent; border-color: transparent; box-shadow: none; }
input, select { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .12); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .3); }
.tag { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); }
.avatar { background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .03)); border-color: rgba(255, 255, 255, .14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15); }

/* motion: pressing glass makes it lean in; a slow light sweep crosses the primary button */
@media (prefers-reduced-motion: no-preference) {
  button, .btn, .chip, .choice { transition: transform .18s cubic-bezier(.16, 1, .3, 1), box-shadow .25s ease, background .25s ease; }
  @media (hover: hover) { button:hover, .btn:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 12px 28px rgba(0, 0, 0, .45); } }
  button.full:not(.ghost, .danger), .btn.full:not(.ghostlink, .provider) { position: relative; overflow: hidden; }
  button.full:not(.ghost, .danger)::after, .btn.full:not(.ghostlink, .provider)::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%); transform: translateX(-120%);
    animation: glass-sweep 5s ease-in-out 1.2s infinite; }
  @keyframes glass-sweep { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
}

/* glass is decoration: solid surfaces when the phone asks for less transparency, or can't blur */
@media (prefers-reduced-transparency: reduce) {
  .card, .meal-row, .empty, .bx-wrap, dialog, .tabs, .top, .switch, .chip, .choice, .icon-btn, button.ghost, .ghostlink, .provider, .check {
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .card, .meal-row, .empty, .bx-wrap, dialog { background: var(--card); }
  .tabs { background: #1a1917; } .top { background: var(--bg); }
  body { background: var(--bg); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .card, .meal-row, .empty, .bx-wrap, dialog { background: rgba(28, 27, 25, .92); } .tabs { background: rgba(20, 19, 17, .94); }
}

/* from the smoky-glass reference: option rows are dark see-through glass; the chosen one turns
   near-black and solid, with a tick at the end */
.choice { background: linear-gradient(180deg, rgba(20, 16, 13, .38), rgba(20, 16, 13, .55)); border-color: rgba(255, 255, 255, .1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 6px 16px rgba(0, 0, 0, .25); padding-inline-end: 44px; position: relative; }
.choice[aria-pressed="true"] { background: rgba(10, 9, 8, .92); border-color: rgba(255, 255, 255, .16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 10px 26px rgba(0, 0, 0, .5); }
.choice[aria-pressed="true"]::after { content: "✓"; position: absolute; inset-inline-end: 18px; top: 50%; transform: translateY(-50%); color: var(--cream); font-size: 16px; }

/* "more glass" (Amira, 11 Nov): stronger colour behind, clearer panels, brighter rims, a moving glow */
body { background:
  radial-gradient(80% 48% at 108% -6%, rgba(52, 150, 104, .62), transparent 70%),
  radial-gradient(75% 45% at -18% 36%, rgba(232, 128, 66, .5), transparent 72%),
  radial-gradient(70% 42% at 110% 70%, rgba(90, 175, 200, .32), transparent 72%),
  radial-gradient(70% 38% at 0% 106%, rgba(222, 120, 66, .42), transparent 72%),
  radial-gradient(40% 25% at 55% 50%, rgba(160, 120, 210, .1), transparent 70%),
  var(--bg); background-attachment: fixed; }
/* a slow drifting light behind the glass so the frost has something alive to bend */
body::before { content: ""; position: fixed; inset: -20%; z-index: -1; pointer-events: none;
  background: radial-gradient(28% 22% at 30% 40%, rgba(240, 150, 90, .22), transparent 70%),
              radial-gradient(26% 20% at 72% 62%, rgba(110, 200, 170, .18), transparent 70%); }
@media (prefers-reduced-motion: no-preference) {
  body::before { animation: glow-drift 22s ease-in-out infinite alternate; }
  @keyframes glow-drift { from { transform: translate(-4%, -3%) rotate(0deg); } to { transform: translate(5%, 4%) rotate(12deg); } }
}
.card, .empty, .bx-wrap, dialog {
  background: linear-gradient(155deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .03) 42%, rgba(255, 255, 255, .02) 70%, rgba(255, 255, 255, .06));
  box-shadow: 0 22px 46px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -1px 0 rgba(0, 0, 0, .3), inset 0 0 24px rgba(255, 255, 255, .03);
  -webkit-backdrop-filter: blur(22px) saturate(190%); backdrop-filter: blur(22px) saturate(190%); }
.card::before, .meal-row::before, .tabs::before, .switch::before, dialog::before {
  padding: 1.2px;
  background: linear-gradient(140deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, .16) 22%, transparent 48%, rgba(255, 255, 255, .1) 74%, rgba(240, 140, 80, .75)); }
/* a soft highlight pooled in the top corner of each panel, like light on curved glass */
.card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(60% 40% at 12% 0%, rgba(255, 255, 255, .1), transparent 70%); }
details.card::after { content: none; }
.tabs { background: linear-gradient(170deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .05) 60%), rgba(18, 17, 15, .35);
  box-shadow: 0 22px 48px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 30px rgba(224, 122, 63, .08); }
.top { background: rgba(14, 13, 12, .3); }
button.ghost, .btn.ghostlink, .ghostlink, .chip:not([aria-pressed="true"]), .provider, .icon-btn, .check:not([aria-pressed="true"]), .switch {
  background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .04)); border-color: rgba(255, 255, 255, .2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -1px 0 rgba(0, 0, 0, .25), 0 8px 18px rgba(0, 0, 0, .3); }
@media (prefers-reduced-transparency: reduce) { body::before, .card::after { display: none; } }

/* ---------- recipe page as an app page (Amira, 11 Nov) ---------- */
/* the photo opens big in the middle for a moment, then settles above the details */
.recipe-page .recipe-hero .plate { animation: none; }
.recipe-hero .plate.lg { width: 230px; height: 230px; }
@media (prefers-reduced-motion: no-preference) {
  /* waiting for the photo: big in the middle, not shown yet; the details wait below */
  .recipe-page.intro .recipe-hero .plate { position: relative; z-index: 3; opacity: 0; transform: translateY(20vh) scale(1.5); }
  .recipe-page.intro .recipe-body { opacity: 0; transform: translateY(56px); }
  /* then: fade in big, hold, and one long smooth glide into place */
  .recipe-page.intro.go .recipe-hero .plate { animation: hero-intro 1.9s both; }
  @keyframes hero-intro {
    0% { opacity: 0; transform: translateY(20vh) scale(1.42); animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
    18% { opacity: 1; transform: translateY(20vh) scale(1.5); animation-timing-function: linear; }
    38% { opacity: 1; transform: translateY(20vh) scale(1.5); animation-timing-function: cubic-bezier(.65, 0, .25, 1); }
    100% { opacity: 1; transform: none; } }
  .recipe-page.intro.go .recipe-body { animation: body-in .9s 1.05s cubic-bezier(.2, .8, .2, 1) both; }
  @keyframes body-in { from { opacity: 0; transform: translateY(56px); } to { opacity: 1; transform: none; } }
}
.recipe-body h1 { margin-top: 14px; }
.brief { color: var(--muted); font-size: 16px; line-height: 1.5; margin: 6px 0 12px; }
.time-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.time-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; font-size: 14px; color: var(--muted);
  background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03)); border: 1px solid rgba(255, 255, 255, .13); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14); }
.time-chip b { color: var(--ink); }
/* the video: one wide glass button, no explanation under it */
.video-btn { width: 100%; justify-content: flex-start; gap: 12px; margin: 4px 0 14px; padding: 10px 16px 10px 10px; min-height: 58px; border-radius: 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .03)) !important; color: var(--ink) !important; border: 1px solid rgba(255, 255, 255, .16) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 10px 24px rgba(0, 0, 0, .35) !important; text-decoration: none; font-weight: 600; }
.vb-play { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; color: #1a0d05; flex: none;
  background: linear-gradient(180deg, #f6a06a, #e07a3f 50%, #b95a26); box-shadow: inset 0 1px 0 rgba(255, 230, 205, .8), 0 4px 14px rgba(224, 122, 63, .35); }
#player iframe { margin-bottom: 14px; }
/* the detail buttons: two columns of glass tiles */
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
.info-btn { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 8px; text-align: start;
  min-height: 104px; padding: 14px; border-radius: 22px; font-weight: 600; color: var(--ink) !important;
  background: linear-gradient(155deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .03) 50%, rgba(255, 255, 255, .05)) !important;
  border: 1px solid rgba(255, 255, 255, .14) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 12px 26px rgba(0, 0, 0, .35) !important;
  -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%); }
.info-btn .ib-icon { width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center; font-size: 16px; color: var(--accent);
  background: rgba(224, 122, 63, .14); border: 1px solid rgba(240, 150, 95, .3); }
.info-btn .ib-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.info-btn b { font-size: 15px; } .info-btn small { font-size: 12px; font-weight: 500; color: var(--muted); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.info-btn .ib-go, .side-btn .ib-go { position: absolute; inset-inline-end: 14px; top: 14px; color: var(--muted); font-size: 20px; line-height: 1; }
html[dir="rtl"] .ib-go { transform: scaleX(-1); }
.info-btn[data-sheet="method"] { grid-column: 1 / -1; min-height: 76px; flex-direction: row; align-items: center; }
/* the panel that slides up from the bottom */
dialog.sheet { position: fixed; inset: auto 0 0 0; margin: 0 auto; width: 100%; max-width: 560px; max-height: 88vh; padding: 8px 18px calc(22px + env(safe-area-inset-bottom));
  border-radius: 30px 30px 0 0; overflow-y: auto; overscroll-behavior: contain;
  background: linear-gradient(170deg, rgba(48, 44, 40, .78), rgba(20, 19, 17, .9)) !important; }
dialog.sheet::backdrop { background: rgba(0, 0, 0, .55); }
.sheet-grab { width: 44px; height: 5px; border-radius: 5px; background: rgba(255, 255, 255, .25); margin: 4px auto 10px; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; position: sticky; top: -8px; padding: 10px 18px 12px; margin: 0 -18px 4px; z-index: 2;
  background: linear-gradient(180deg, rgba(40, 37, 33, .98), rgba(34, 32, 29, .96)); border-bottom: 1px solid rgba(255, 255, 255, .06); }
.sheet-head h2 { margin: 0; font-size: 22px; }
.sheet-close { width: 38px; height: 38px; min-height: 0; padding: 0; font-size: 15px; }
@media (prefers-reduced-motion: no-preference) {
  dialog.sheet[open] { animation: sheet-up .38s cubic-bezier(.2, .9, .25, 1) both; }
  @keyframes sheet-up { from { transform: translateY(100%); } }
  dialog.sheet[open]::backdrop { animation: fade-in .3s both; }
}
.sheet-text { font-size: 17px; line-height: 1.6; margin: 4px 0 8px; }
.sheet-sub { font-size: 13px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin: 16px 0 8px; }
html[lang="ar"] .sheet-sub { letter-spacing: 0; }
.macro-row.big b { font-size: 26px; }
.part-kcal { margin-top: 12px; border-top: 1px solid rgba(255, 255, 255, .08); }
.pk-row { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid rgba(255, 255, 255, .06); font-size: 14px; }
.pk-row bdi { color: var(--muted); white-space: nowrap; }
.pill-list { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { padding: 7px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; }
.warn-pill { background: var(--warn-soft); color: var(--warn); border: 1px solid rgba(255, 143, 107, .35); }
.ok-pill { background: rgba(124, 196, 160, .14); color: #8fd1ad; border: 1px solid rgba(124, 196, 160, .3); }
/* the method: each part with its ingredients, then big numbered steps you can tick off */
.method-part + .method-part { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .08); }
.mp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.mp-head h3 { margin: 0; font-size: 18px; }
.ing-list { list-style: none; margin: 10px 0 14px; padding: 0; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .08); }
.ing-list li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; font-size: 15px; background: rgba(255, 255, 255, .03); }
.ing-list li:nth-child(even) { background: rgba(255, 255, 255, .055); }
.ing-list .amt { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
html[dir="rtl"] .ing-list .amt { direction: ltr; }
.step-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.step { width: 100%; display: flex; align-items: flex-start; justify-content: flex-start; gap: 14px; text-align: start; padding: 12px 14px; min-height: 0; border-radius: 18px; font-weight: 500; line-height: 1.5;
  color: var(--ink) !important; background: rgba(255, 255, 255, .05) !important; border: 1px solid rgba(255, 255, 255, .1) !important; box-shadow: none !important; }
.step-t { flex: 1; padding-top: 5px; }
.step-n { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 16px; color: #1a0d05;
  background: linear-gradient(180deg, #f6a06a, #e07a3f 50%, #b95a26); box-shadow: inset 0 1px 0 rgba(255, 230, 205, .8), 0 4px 12px rgba(224, 122, 63, .3); }
.step[aria-pressed="true"] { opacity: .5; } .step[aria-pressed="true"] .step-t { text-decoration: line-through; }
.step[aria-pressed="true"] .step-n { background: var(--cream); color: transparent; position: relative; }
.step[aria-pressed="true"] .step-n::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--cream-ink); }
.step-list .pack-sep { margin: 0; }
/* sides: each side dish is a row you tap to open it */
.side-list { display: grid; gap: 10px; margin-top: 8px; }
.side-btn { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 40px 10px 10px; border-radius: 20px; color: var(--ink); text-decoration: none;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); }
html[dir="rtl"] .side-btn { padding: 10px 10px 10px 40px; }
.side-btn .ib-go { top: 50%; transform: translateY(-50%); } html[dir="rtl"] .side-btn .ib-go { transform: translateY(-50%) scaleX(-1); }
.side-btn small { display: block; }
@media (prefers-reduced-transparency: reduce) { .info-btn { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--card) !important; } dialog.sheet { background: var(--card) !important; } }

/* side dishes under a planned meal */
.side-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px; }
.side-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 12px; border-radius: 999px; font-size: 13px;
  background: rgba(224, 122, 63, .12); border: 1px solid rgba(240, 150, 95, .3); }
html[dir="rtl"] .side-chip { padding: 4px 12px 4px 6px; }
.side-chip a { color: var(--ink); font-weight: 600; text-decoration: none; } .side-chip small { color: var(--muted); }
.side-x { width: 24px; height: 24px; min-height: 0; padding: 0; font-size: 11px; border-radius: 50%; background: rgba(255, 255, 255, .08) !important; color: var(--muted) !important; border: 0 !important; box-shadow: none !important; }
.add-side { min-height: 30px; padding: 4px 12px; font-size: 13px; }
.side-pick { display: flex; align-items: center; gap: 12px; }
.side-pick > span { display: flex; flex-direction: column; }
.choice[data-swap]::first-letter { text-transform: uppercase; }
.side-chips { flex-direction: column; align-items: stretch; }
.side-chip { display: grid; grid-template-columns: 1fr auto; column-gap: 8px; border-radius: 16px; padding: 7px 7px 7px 12px; }
html[dir="rtl"] .side-chip { padding: 7px 12px 7px 7px; }
.side-chip a { grid-column: 1; } .side-chip small { grid-column: 1; line-height: 1.3; }
.side-chip .side-x { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.add-side { align-self: flex-start; }

/* drawn icons on the recipe page */
.ico { width: 20px; height: 20px; flex: none; }
.ico.big { width: 46px; height: 46px; stroke-width: 1.4; }
.info-btn .ib-icon { font-size: 0; } .info-btn .ib-icon .ico { width: 20px; height: 20px; }
.time-chip .ico { width: 16px; height: 16px; color: var(--accent); }
.pill { display: inline-flex; align-items: center; gap: 7px; } .pill .ico { width: 18px; height: 18px; }
.mp-head h3 { display: flex; align-items: center; gap: 8px; }
.mp-ico { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; color: var(--accent); background: rgba(224, 122, 63, .14); border: 1px solid rgba(240, 150, 95, .3); }
.mp-ico .ico { width: 17px; height: 17px; }
/* macros: a ring of where the calories come from */
.macro-ring { position: relative; width: 190px; height: 190px; margin: 6px auto 14px; }
.macro-ring svg { width: 100%; height: 100%; }
.macro-ring circle { fill: none; stroke-width: 11; stroke-linecap: butt; }
.ring-track { stroke: rgba(255, 255, 255, .07); }
.ring-protein { stroke: #e8a593; } .ring-carbs { stroke: #e9d49a; } .ring-fat { stroke: #a9c48f; }
@media (prefers-reduced-motion: no-preference) { .macro-ring g circle:not(.ring-track) { animation: ring-in .9s cubic-bezier(.2, .8, .2, 1) both; } @keyframes ring-in { from { stroke-dasharray: 0 999; } } }
.ring-mid { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.ring-mid b { font-size: 38px; line-height: 1; } .ring-mid span { color: var(--muted); font-size: 13px; }
.ring-legend { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.rl { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border-radius: 16px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); }
.rl i { width: 10px; height: 10px; border-radius: 50%; } .rl b { font-size: 20px; } .rl span, .rl small { color: var(--muted); font-size: 12px; }
.rl-protein i { background: #8fd1ad; } .rl-carbs i { background: #efe6d6; } .rl-fat i { background: #e07a3f; }
/* storing and reheating: a drawing and the key fact big */
.fact-hero { display: flex; align-items: center; gap: 16px; padding: 16px; margin: 4px 0 10px; border-radius: 22px;
  background: radial-gradient(120% 120% at 0% 0%, rgba(224, 122, 63, .16), rgba(255, 255, 255, .03)); border: 1px solid rgba(255, 255, 255, .1); }
.fact-hero .ico.big { color: var(--accent); width: 56px; height: 56px; }
.fact-hero > div { display: flex; flex-direction: column; }
.fact-big { font-size: 30px; line-height: 1.1; }
.fact-hero.ways { justify-content: space-around; }
.way { display: flex; flex-direction: column; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; }

/* setup: an invite waiting for this email comes first */
.invite-card { padding: 18px; margin: 4px 0 14px; border-radius: 22px; background: radial-gradient(120% 120% at 0% 0%, rgba(224, 122, 63, .2), rgba(255, 255, 255, .04)); border: 1px solid rgba(240, 150, 95, .35); }
.invite-card h2 { margin: 4px 0 14px; font-size: 22px; }
.invite-card .jbox:not(:empty) { margin-top: 12px; }

/* the creator's video inside the recipe, shaped to the video: tall reels/Shorts fit the screen height */
#player:empty { display: none; }
#player iframe { display: block; width: 100%; border: 0; border-radius: 20px; background: #000; margin: 0 auto 14px; box-shadow: 0 16px 34px rgba(0, 0, 0, .45); }
#player iframe.v-wide { aspect-ratio: 16 / 9; }
#player iframe.v-tall { aspect-ratio: 9 / 16; width: auto; max-width: 100%; height: min(76vh, calc((100vw - 32px) * 16 / 9), 900px); }
#player iframe.v-ig { height: min(86vh, 780px); max-width: 420px; }
.video-out { display: block; text-align: center; font-size: 13px; color: var(--muted); margin: -4px 0 14px; }
.video-close { display: flex; margin: 0 0 8px auto; min-height: 34px; }
html[dir="rtl"] .video-close { margin: 0 auto 8px 0; }

/* method sheet: steps going up under the title blur and fade little by little with the scroll
   (--past goes from 0 to 1, set in recipes.js); scroll back up and they come back clear */
#sheet-body .step { filter: blur(calc(var(--past, 0) * 3px)); opacity: calc(1 - var(--past, 0) * .62); }
@media (prefers-reduced-transparency: reduce) { #sheet-body .step { filter: none; } }
#sheet-body .step[aria-pressed="true"] { opacity: calc(.5 - var(--past, 0) * .3); } /* a ticked step stays faded */

/* a profile box that needs fixing */
input.field-bad, select.field-bad { border-color: var(--warn) !important; box-shadow: 0 0 0 3px var(--warn-soft) !important; }

/* ---------- plan: month calendar (Amira, 11 Nov) ---------- */
.cal { padding: 14px 12px 12px; }
.cal-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.cal-top h2 { margin: 0; font-size: 19px; text-align: center; flex: 1; }
.cal-nav { width: 40px; height: 40px; min-height: 0; padding: 0; font-size: 22px; line-height: 1; }
html[dir="rtl"] .cal-nav .flip { display: inline-block; transform: scaleX(-1); }
.cal-head, .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-head span { text-align: center; font-size: 12px; color: var(--muted); padding-bottom: 6px; letter-spacing: .04em; }
.cal-grid { row-gap: 4px; }
.cal-day { position: relative; aspect-ratio: 1 / 1.05; min-height: 0; padding: 0; margin: 0; border: 0 !important; border-radius: 0; box-shadow: none !important;
  background: transparent !important; color: var(--ink) !important; display: grid; place-items: center; font-weight: 600; font-size: 16px; -webkit-tap-highlight-color: transparent; }
.cal-n { position: relative; z-index: 1; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; transition: background .2s, color .2s, box-shadow .2s; }
/* the days one cook day feeds: a soft band that joins across the week */
.cal-day.fed::before { content: ""; position: absolute; inset: 14% 3px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(240, 154, 95, .2), rgba(224, 122, 63, .1)); box-shadow: inset 0 1px 0 rgba(255, 220, 190, .12); }
.cal-day.fed-l::before { border-start-start-radius: 0; border-end-start-radius: 0; inset-inline-start: 0; }
.cal-day.fed-r::before { border-start-end-radius: 0; border-end-end-radius: 0; inset-inline-end: 0; }
.cal-day.cook .cal-n { font-weight: 800; color: var(--cream); }
.cal-day.today .cal-n { box-shadow: inset 0 0 0 1.5px var(--cream); }
.cal-day.picked .cal-n { background: linear-gradient(180deg, #f6a06a, #e07a3f 55%, #b95a26); color: #1a0d05; box-shadow: 0 6px 16px rgba(224, 122, 63, .35), inset 0 1px 0 rgba(255, 230, 205, .8); }
.cal-day.past:not(.picked) .cal-n { opacity: .5; }
.cal-day.out { opacity: .22; }
.cal-dot { position: absolute; bottom: 9%; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; z-index: 1; }
.cal-dot.planned { background: var(--accent); box-shadow: 0 0 8px rgba(224, 122, 63, .7); }
.cal-dot.todo { background: transparent; box-shadow: inset 0 0 0 1.5px var(--accent); }
.cal-dot.ready { background: #8fd1ad; box-shadow: 0 0 8px rgba(143, 209, 173, .6); }
.cal-dot.cancelled { background: var(--warn); opacity: .7; }
.cal-key { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; margin-top: 10px; font-size: 12px; color: var(--muted); }
.cal-key span { display: inline-flex; align-items: center; gap: 6px; }
.cal-key .cal-dot { position: static; margin: 0; }
.cal-today { display: block; margin: 10px auto 0; }
.cal-when { font-size: 18px; margin: 18px 4px 8px; }
.cal-from { margin: -2px 4px 8px; }
@media (prefers-reduced-motion: no-preference) {
  #cal-detail > * { animation: cal-in .35s cubic-bezier(.2, .8, .2, 1) both; }
  @keyframes cal-in { from { opacity: 0; transform: translateY(10px); } }
}

/* ---------- meal picker with photos (Amira, 12 Nov) ---------- */
.slot-row .plate { width: 64px; height: 64px; }
dialog.picker-sheet input[type="search"] { margin-bottom: 12px; }
.pick-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding-bottom: 6px; }
@media (min-width: 520px) { .pick-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pick-card, .swap-card { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0; min-height: 0; text-align: start; overflow: hidden;
  border-radius: 20px; color: var(--ink) !important; font-weight: 500;
  background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03)) !important; border: 1px solid rgba(255, 255, 255, .12) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 10px 22px rgba(0, 0, 0, .35) !important; transition: transform .2s cubic-bezier(.2, .8, .2, 1), border-color .2s; }
.pick-card:active, .swap-card:active { transform: scale(.97); }
.pc-photo { position: relative; display: block; aspect-ratio: 1 / 1; background: #141210; }
.pc-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pc-photo .plate { width: 70%; height: 70%; margin: 15%; }
.pc-photo::after { content: ""; position: absolute; inset: auto 0 0 0; height: 40%; background: linear-gradient(180deg, transparent, rgba(14, 13, 12, .55)); pointer-events: none; }
.pc-text { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px 12px; }
.pc-text b { font-size: 15px; line-height: 1.25; }
.pc-text small { color: var(--muted); font-size: 12.5px; }
.pc-text small.warn { color: var(--warn); }
.pick-card.has-warn { border-color: rgba(255, 143, 107, .35) !important; }
.pick-card.is-cur { border-color: rgba(240, 154, 95, .8) !important; box-shadow: 0 0 0 2px rgba(224, 122, 63, .35), 0 10px 22px rgba(0, 0, 0, .35) !important; }
.pc-tag { position: absolute; top: 8px; inset-inline-start: 8px; z-index: 1; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #1a0d05;
  background: linear-gradient(180deg, #f6a06a, #e07a3f); box-shadow: inset 0 1px 0 rgba(255, 230, 205, .8); }
/* swap: a row of the other planned meals, scrolls sideways */
.swap-row { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 10px; margin: 0 -2px 4px; scroll-snap-type: x mandatory; }
.swap-row::-webkit-scrollbar { display: none; }
.swap-card { flex: 0 0 132px; scroll-snap-align: start; }
.swap-card .pc-text { padding: 8px 10px 10px; }
.swap-card .pc-text b { font-size: 13.5px; }

/* ---------- the day meter (Amira, 12 Nov) ---------- */
.meter { padding: 16px 16px 14px; }
.meter-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.meter-head h2 { margin: 0; font-size: 18px; }
.meter-who { display: flex; gap: 6px; flex-wrap: wrap; }
.meter-who .chip { min-height: 0; padding: 5px 12px; font-size: 13px; }
.mk-num { display: flex; align-items: baseline; gap: 6px; margin-bottom: 8px; }
.mk-num b { font-size: 34px; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.mk-num span { color: var(--muted); font-size: 15px; }
.mk-track, .mbar-track { position: relative; height: 14px; border-radius: 999px; overflow: hidden;
  background: rgba(255, 255, 255, .06); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5), inset 0 -1px 0 rgba(255, 255, 255, .06); }
.mbar-track { height: 9px; }
.mk-track i, .mbar-track i { position: absolute; inset: 0 auto 0 0; inset-inline-start: 0; width: 0; border-radius: inherit;
  transition: width .9s cubic-bezier(.2, .8, .2, 1), background .4s; }
html[dir="rtl"] .mk-track i, html[dir="rtl"] .mbar-track i { inset-inline-start: 0; left: auto; right: 0; }
.mk-track i { background: linear-gradient(90deg, #b95a26, #e07a3f 60%, #f6a06a); box-shadow: 0 0 14px rgba(224, 122, 63, .55), inset 0 1px 0 rgba(255, 230, 205, .6); }
.mk-track i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(255, 255, 255, .35), transparent 55%); }
.mk-track i.over, .mbar-track i.over { background: linear-gradient(90deg, #d9583a, var(--warn)); box-shadow: 0 0 14px rgba(255, 120, 90, .5); }
.mk-note { display: block; margin-top: 6px; }
.meter-macros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.mbar-top { display: flex; flex-direction: column; gap: 1px; margin-bottom: 6px; }
.mbar-top span { font-size: 12px; color: var(--muted); }
.mbar-top b { font-size: 14px; font-variant-numeric: tabular-nums; }
.mbar-protein i { background: linear-gradient(90deg, #b9705f, #e8a593); box-shadow: 0 0 10px rgba(232, 165, 147, .45); }
.mbar-carbs i { background: linear-gradient(90deg, #b8a066, #e9d49a); box-shadow: 0 0 10px rgba(233, 212, 154, .4); }
.mbar-fat i { background: linear-gradient(90deg, #6f8d5c, #a9c48f); box-shadow: 0 0 10px rgba(169, 196, 143, .4); }
.meter-hint { margin: 12px 0 0; font-size: 12px; }
@media (prefers-reduced-motion: reduce) { .mk-track i, .mbar-track i { transition: none; } }

/* Settings: each person's calories and box size */
.person-kcal { padding-top: 12px; border-top: 1px solid var(--line); }
.person-kcal:first-of-type { border-top: 0; padding-top: 0; }
.person-kcal .row { gap: 10px; margin-top: 8px; align-items: flex-end; }
.person-kcal .grow { min-width: 0; }

/* profile: the Save button itself says it saved */
#psave { transition: background .3s, color .3s; }
#psave.is-saved { background: #3f7a57; color: #fff; }

/* a main seeing the cook's screens: a copper bar on top to go back */
#preview-bar { position: fixed; z-index: 60; inset-inline: 10px; top: calc(env(safe-area-inset-top, 0px) + 62px);
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 8px 8px 14px; border-radius: 16px;
  background: rgba(185, 90, 38, .88); color: #fff; font-size: 14px; box-shadow: 0 8px 24px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 220, 190, .35);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
#preview-bar button { flex: 0 0 auto; min-height: 0; padding: 7px 12px; font-size: 13px; background: #fff; color: #7a3410; border-radius: 999px; }
body.previewing #app { padding-top: 56px; }

/* ---------- the plan: the picked day's meals as photo tiles (Amira, 12 Nov) ---------- */
.day-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 10px; }
.day-tile { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 10px 10px 12px; border-radius: 22px; color: var(--ink); text-decoration: none;
  background: linear-gradient(160deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03)); border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .12);
  animation: tile-in .55s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * 70ms);
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s; -webkit-tap-highlight-color: transparent; }
.day-tile:active { transform: scale(.96); }
@media (hover: hover) { .day-tile:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .16); } }
.dt-photo { position: relative; display: grid; place-items: center; padding: 6px 0 8px; }
.day-tile .dt-plate { width: min(118px, 100%); height: auto; aspect-ratio: 1; transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.day-tile:active .dt-plate { transform: rotate(-14deg); }
@media (hover: hover) { .day-tile:hover .dt-plate { transform: rotate(-10deg) scale(1.04); } }
.dt-slot { position: absolute; inset-inline-start: 0; top: 0; padding: 3px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--accent); background: rgba(0, 0, 0, .45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
html[lang="ar"] .dt-slot { letter-spacing: 0; }
.day-tile b { font-size: 14.5px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.day-tile.empty { border-style: dashed; background: transparent; box-shadow: none; }
.day-tile.empty .dt-plate { display: grid; place-items: center; font-size: 34px; color: var(--muted); background: rgba(255, 255, 255, .04); }
.dt-total { margin: 0 4px 10px; }
.dc-open { display: inline-block; margin-top: 6px; color: var(--accent); font-weight: 600; font-size: 14px; }
@keyframes tile-in { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .day-tile { animation: none; transition: none; } .day-tile .dt-plate { transition: none; } }

/* the cook's home (same look as the mains' home) */
.cook-next { display: block; color: var(--ink); text-decoration: none; margin-top: 4px; }
.cook-go { margin-top: 10px; pointer-events: none; }
.cook-later { display: block; }
.cook-plates { display: flex; gap: 6px; margin: 10px 0 6px; }

/* the cook day: the recipe page's buttons under each meal's boxes */
.cook-btns { margin: 14px 0 0; }
.cook-meal h2 { margin: 2px 0 0; }

/* ticking steps: every step has a clear empty box at its end; a tapped step gets a green tick and
   its text fades and is struck through, the box stays bright (Amira, 12 Nov: Beth couldn't tell) */
.step::after { content: ""; flex: none; width: 26px; height: 26px; margin-top: 4px; border-radius: 9px; border: 2px solid rgba(255, 255, 255, .38);
  display: grid; place-items: center; font-size: 15px; font-weight: 800; color: #fff; transition: background .2s, border-color .2s, transform .2s; }
.step[aria-pressed="true"] { opacity: 1; }
.step[aria-pressed="true"] .step-t { opacity: .5; }
.step[aria-pressed="true"] .step-n { background: rgba(255, 255, 255, .14); color: var(--muted); }
.step[aria-pressed="true"] .step-n::after { content: none; }
.step[aria-pressed="true"]::after { content: "✓"; background: #3f9a63; border-color: #3f9a63; animation: tick-pop .3s cubic-bezier(.2, .8, .2, 1.4); }
#sheet-body .step[aria-pressed="true"] { opacity: calc(1 - var(--past, 0) * .62); }
@keyframes tick-pop { from { transform: scale(.6); } to { transform: scale(1); } }
.step-hint { display: flex; align-items: center; gap: 10px; margin: 0 2px 14px; padding: 10px 12px; border-radius: 14px; background: rgba(63, 154, 99, .14); color: var(--ink); font-size: 14px; font-weight: 600; }
.sh-box { flex: none; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; background: #3f9a63; color: #fff; font-size: 13px; font-weight: 800; }
@media (prefers-reduced-motion: reduce) { .step[aria-pressed="true"]::after { animation: none; } }

/* the cook day: each meal opens with its photo, big and centred, turning as the page scrolls */
.cook-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 4px 0 2px; }
.cook-hero .plate.lg { width: min(220px, 62vw); height: auto; aspect-ratio: 1; margin-bottom: 8px; }
.plate.spin { transform: rotate(var(--spin, 0deg)); transition: transform .15s linear; will-change: transform; }
.cook-hero h2 { font-size: 21px; line-height: 1.25; }
@media (prefers-reduced-motion: reduce) { .plate.spin { transform: none; transition: none; } }

/* ---------- tinted tiles (Amira's reference, 12 Nov): dark at the top, warming into a colour at the
   bottom, soft uneven corners, set in a staggered column. Boxes to fill, macros, the day meter. ---------- */
:root { --t-rose: #e8a593; --t-gold: #e9d49a; --t-sage: #a9c48f; --t-copper: #e8935a; }
.leafs { display: flex; flex-direction: column; gap: 8px; }
.leaf { --tint: var(--t-rose); position: relative; display: flex; flex-direction: column; gap: 2px; width: 88%; padding: 10px 12px 11px;
  border-radius: 22px 30px 22px 30px; color: #fff; overflow: hidden;
  background: linear-gradient(165deg, rgba(22, 19, 17, .92) 18%, color-mix(in srgb, var(--tint) 75%, #000) 100%);
  border: 1px solid color-mix(in srgb, var(--tint) 35%, transparent);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .12); }
@supports not (background: color-mix(in srgb, red 50%, blue)) { .leaf { background: linear-gradient(165deg, rgba(22, 19, 17, .92) 18%, var(--tint) 140%); border-color: rgba(255, 255, 255, .12); } }
.leaf:nth-child(even) { align-self: flex-end; }
.leaf.t0 { --tint: var(--t-rose); } .leaf.t1 { --tint: var(--t-gold); } .leaf.t2 { --tint: var(--t-sage); } .leaf.t3 { --tint: var(--t-copper); }
.leaf-name { font-size: 12px; line-height: 1.25; color: rgba(255, 255, 255, .78); }
.leaf-amt { font-size: 21px; line-height: 1.1; font-weight: 800; letter-spacing: -.01em; unicode-bidi: isolate; direction: ltr; text-align: start; }
html[dir="rtl"] .leaf-amt { text-align: end; }
.leaf small { font-size: 11px; color: rgba(255, 255, 255, .6); }
.leaf .warn { font-size: 11px; color: #ffd2c4; text-decoration: none; }
/* sauces and toppings: their own small container, so a dashed edge */
.leaf.pot-leaf { border-style: dashed; border-color: color-mix(in srgb, var(--tint) 60%, transparent); }
/* something this person is allergic to: red, struck through, with the warning */
.leaf.allergy { --tint: #d9583a; }
.leaf.allergy .leaf-name, .leaf.allergy .leaf-amt { text-decoration: line-through; opacity: .75; }
/* boxes to fill: the person's card holds the tiles */
.box-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.bx-wrap .leafs { margin-top: 4px; }
/* macros on the recipe page: the ring and the three tiles side by side */
.ring-with-leafs { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; margin: 6px 0 14px; }
.ring-with-leafs .macro-ring { width: 150px; height: 150px; margin: 0; }
.ring-with-leafs .ring-mid b { font-size: 30px; }
.macro-leafs .leaf { width: 86%; }
.leaf.m-protein { --tint: var(--t-rose); } .leaf.m-carbs { --tint: var(--t-gold); } .leaf.m-fat { --tint: var(--t-sage); }
@media (max-width: 340px) { .ring-with-leafs { grid-template-columns: 1fr; justify-items: center; } }
/* the day meter's protein, carbs and fat become tiles too, the bar sitting inside each */
.meter-macros { gap: 8px; align-items: start; }
.mbar { --tint: var(--t-rose); padding: 10px 10px 11px; border-radius: 20px 26px 20px 26px;
  background: linear-gradient(165deg, rgba(22, 19, 17, .92) 18%, color-mix(in srgb, var(--tint) 70%, #000) 100%);
  border: 1px solid color-mix(in srgb, var(--tint) 35%, transparent); box-shadow: 0 8px 18px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .1); }
.mbar-carbs { --tint: var(--t-gold); margin-top: 14px; } .mbar-fat { --tint: var(--t-sage); margin-top: 28px; }
.mbar .mbar-top span { color: rgba(255, 255, 255, .78); }
.mbar .mbar-track { background: rgba(0, 0, 0, .35); }
@media (prefers-reduced-transparency: reduce) { .leaf, .mbar { background: var(--card); } }
/* two people side by side, so the page stays short; tiles a little smaller in the narrow cards */
.box-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bx-wrap { padding: 10px 8px; }
.bx-wrap .leaf { width: 90%; padding: 8px 10px 9px; }
.bx-wrap .leaf-amt { font-size: 18px; }
.bx-wrap .leaf-name { font-size: 11px; }

/* ---------- boxes to fill as real containers (Amira, 12 Nov) ---------- */
.meal-box { display: flex; gap: 4px; height: 150px; padding: 5px; border-radius: 16px;
  background: rgba(255, 255, 255, .05); border: 2px solid rgba(255, 255, 255, .22);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .45), 0 8px 18px rgba(0, 0, 0, .3); }
.mb-col { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.mb-col.big { flex: 1.15; }
.cmp { --tint: var(--t-rose); flex-basis: 0; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 1px;
  padding: 6px 7px; border-radius: 10px; overflow: hidden; color: #fff;
  background: linear-gradient(165deg, rgba(22, 19, 17, .85) 10%, color-mix(in srgb, var(--tint) 72%, #000) 100%);
  border: 1px solid color-mix(in srgb, var(--tint) 30%, transparent); }
@supports not (background: color-mix(in srgb, red 50%, blue)) { .cmp, .pot-disc { background: linear-gradient(165deg, rgba(22, 19, 17, .85) 10%, var(--tint) 160%); } }
.cmp.t0, .pot-c.t0 { --tint: var(--t-rose); } .cmp.t1, .pot-c.t1 { --tint: var(--t-gold); } .cmp.t2, .pot-c.t2 { --tint: var(--t-sage); } .cmp.t3, .pot-c.t3 { --tint: var(--t-copper); }
.cmp-name { font-size: 10.5px; line-height: 1.2; color: rgba(255, 255, 255, .8); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cmp-amt { font-size: 16px; font-weight: 800; line-height: 1.1; unicode-bidi: isolate; direction: ltr; text-align: start; }
html[dir="rtl"] .cmp-amt { text-align: end; }
.cmp .warn, .pot-c .warn { font-size: 10px; color: #ffd2c4; }
.cmp.allergy, .pot-c.allergy { --tint: #d9583a; }
.cmp.allergy .cmp-name, .cmp.allergy .cmp-amt, .pot-c.allergy .pot-disc b, .pot-c.allergy > span { text-decoration: line-through; opacity: .75; }
/* sauces and toppings: round pots beside the box */
.pots { display: flex; flex-wrap: wrap; gap: 10px 8px; margin-top: 10px; }
.pot-c { --tint: var(--t-gold); width: calc(50% - 4px); display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.pot-disc { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: linear-gradient(165deg, rgba(22, 19, 17, .85) 15%, color-mix(in srgb, var(--tint) 72%, #000) 100%);
  border: 2px dashed color-mix(in srgb, var(--tint) 55%, transparent); box-shadow: 0 6px 14px rgba(0, 0, 0, .35); }
.pot-disc b { font-size: 13px; font-weight: 800; unicode-bidi: isolate; direction: ltr; }
.pot-c > span { font-size: 10.5px; line-height: 1.2; color: var(--muted); }
@media (prefers-reduced-transparency: reduce) { .cmp, .pot-disc { background: var(--card); } }
/* one person per row on a phone so every compartment's name fits; two side by side on wider screens */
.box-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.meal-box { height: 140px; }
.cmp-name { font-size: 12px; } .cmp-amt { font-size: 18px; }
.pot-c { width: 76px; }
/* in a small compartment the name gives way (2 lines at most) and the amount always shows in full */
.meal-box { height: 156px; }
.cmp-name { flex: 0 1 auto; min-height: 0; } .cmp-amt { flex: none; }

/* salads: a round bowl seen from above; the compartments sit in the middle of it, the rim around */
.meal-box.bowl { width: min(250px, 100%); height: auto; aspect-ratio: 1; margin: 0 auto; border-radius: 50%; padding: 17%;
  border-width: 3px; background: radial-gradient(circle at 50% 45%, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02) 70%);
  box-shadow: inset 0 4px 14px rgba(0, 0, 0, .55), inset 0 0 0 10px rgba(255, 255, 255, .03), 0 10px 22px rgba(0, 0, 0, .35); }
.meal-box.bowl .cmp { border-radius: 14px; }
.meal-box.bowl .mb-col.big .cmp { border-radius: 40% 14px 14px 40%; }
html[dir="rtl"] .meal-box.bowl .mb-col.big .cmp { border-radius: 14px 40% 40% 14px; }
/* the bowl: compartments fill it like slices, the round rim cuts their corners; text centred so it never hits the rim */
.meal-box.bowl { padding: 6px; overflow: hidden; }
.meal-box.bowl .cmp, .meal-box.bowl .mb-col.big .cmp, html[dir="rtl"] .meal-box.bowl .mb-col.big .cmp { border-radius: 6px; justify-content: center; align-items: center; text-align: center; padding: 8px 16px; }
.meal-box.bowl .cmp-amt { text-align: center; }
.meal-box.bowl .mb-col.big .cmp { padding-inline-start: 22px; }
.meal-box.bowl .mb-col:not(.big) .cmp { padding-inline-end: 22px; }
.meal-box.bowl .mb-col.big:only-child .cmp { padding: 20px; }

/* bowl layout: top half the biggest part, the rest an even grid (two across) below */
.meal-box.bowl { width: min(270px, 100%); flex-direction: column; gap: 4px; }
.bowl-top { flex: 1 1 0; display: flex; min-height: 0; }
.bowl-top .cmp { flex: 1; padding: 22px 30px 6px !important; }
.bowl-rest { flex: 1.25 1 0; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 4px; }
.bowl-rest.one { grid-template-columns: 1fr; }
.bowl-rest .cmp { padding: 4px 8px !important; }
.bowl-rest .cmp:nth-last-child(-n+2) { padding-bottom: 14px !important; }
.meal-box.bowl .cmp-name { font-size: 11px; -webkit-line-clamp: 1; }
.meal-box.bowl .cmp-amt { font-size: 16px; }

/* the salad bowl: one mix filling the bowl, its total weight big in the middle, the ingredients listed small */
.meal-box.bowl { padding: 8px; }
.bowl-mix { --tint: var(--t-sage); flex: 1; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding: 16% 14%; text-align: center; color: #fff;
  background: radial-gradient(circle at 50% 35%, rgba(22, 19, 17, .7), color-mix(in srgb, var(--tint) 70%, #000) 100%);
  border: 1px solid color-mix(in srgb, var(--tint) 35%, transparent); }
.bowl-total { font-size: 26px; font-weight: 800; line-height: 1; unicode-bidi: isolate; direction: ltr; }
.bowl-list { list-style: none; margin: 4px 0 0; padding: 0; font-size: 10.5px; line-height: 1.35; color: rgba(255, 255, 255, .78); }
.bowl-list bdi { font-weight: 700; color: #fff; }
.bowl-list li.allergy { text-decoration: line-through; color: #ffd2c4; }
.meal-box.bowl.allergy .bowl-mix { --tint: #d9583a; }
.bowl-mix .warn { font-size: 10.5px; color: #ffd2c4; }

/* a hidden video button really hides (its display rule beat the hidden attribute) */
.video-btn[hidden] { display: none; }

/* the cook day: the buttons sit under the photo, the boxes to fill come after them */
.cook-btns { margin: 14px 0 4px; }

/* ---------- something ran out ---------- */
.ing-list li { align-items: center; }
.out-btn { flex: none; min-height: 0; padding: 4px 10px; font-size: 12px; border-radius: 999px; background: rgba(217, 88, 58, .16); color: #ffb3a1; border: 1px solid rgba(217, 88, 58, .35); }
.out-done { flex: none; font-size: 12px; font-weight: 700; color: #8fd1ad; } .out-done.err { color: var(--warn); }
.ranout-card h2 { margin: 0 0 2px; }
.outs-list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.outs-list li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: rgba(255, 255, 255, .05); }
.outs-list li.bought b { text-decoration: line-through; opacity: .6; }
.out-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.out-chip.on { background: rgba(63, 154, 99, .2); color: #8fd1ad; border-color: rgba(63, 154, 99, .45); }
.out-other { gap: 8px; margin-top: 4px; } .out-other input { flex: 1; min-width: 0; } .out-other button { flex: none; }
.ranout-alert { gap: 10px; align-items: center; } .ranout-alert .grow { display: flex; flex-direction: column; gap: 2px; }
.ranout-shop { border-color: rgba(217, 88, 58, .45); }

/* the video inside the Method sheet plays like the one on the page */
.sheet-player:empty { display: none; }
.sheet-player iframe { display: block; width: 100%; border: 0; border-radius: 20px; background: #000; margin: 0 auto 14px; box-shadow: 0 16px 34px rgba(0, 0, 0, .45); }
.sheet-player iframe.v-wide { aspect-ratio: 16 / 9; }
.sheet-player iframe.v-tall { aspect-ratio: 9 / 16; width: auto; max-width: 100%; height: min(70vh, calc((100vw - 48px) * 16 / 9), 860px); }
.sheet-player iframe.v-ig { height: min(80vh, 760px); max-width: 420px; }

/* calendar tiles: the photo and name open the recipe; a swap button sits at the bottom */
.dt-link { display: flex; flex-direction: column; gap: 4px; color: inherit; text-decoration: none; flex: 1; }
.dt-swap { margin-top: 8px; min-height: 0; padding: 6px 10px; font-size: 12.5px; border-radius: 999px; width: 100%;
  background: rgba(255, 255, 255, .08); color: var(--ink); border: 1px solid rgba(255, 255, 255, .14); }
button.day-tile.empty { font: inherit; text-align: start; cursor: pointer; }
.reopen-card { margin-top: 10px; } .reopen-card p { margin: 0 0 8px; }
/* an empty meal on the calendar is a button: keep the quiet dashed tile look, not a filled button */
button.day-tile.empty { background: transparent; color: var(--ink); border: 1px dashed rgba(255, 255, 255, .22); box-shadow: none; min-height: 0; padding: 10px 10px 12px; border-radius: 22px; width: auto; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; }
button.day-tile.empty b { color: var(--muted); font-weight: 600; }
button.day-tile.empty, button.day-tile.empty:hover, button.day-tile.empty:active { background-image: none !important; background-color: transparent !important; }
button.day-tile.empty::before, button.day-tile.empty::after { display: none; }