/* ============================================================
   THE TAYYIBAT CODE — type system
   Self-hosted, so no visitor data reaches a font CDN and the
   faces never fail to load on a weak connection.

   Fraunces        display — an engraved, botanical-monograph serif.
                   Chosen over the usual geometric sans because this is a
                   reference work, and it should carry the authority of one.
   IBM Plex Sans   body and interface. Engineered rather than friendly.
   IBM Plex Sans Arabic  the same superfamily's Arabic, so the Arabic
                   edition is a sibling of the English one, not a substitute.
                   Fraunces has no Arabic glyphs, so RTL headings use
                   Plex Arabic at its heaviest weights instead.
   ============================================================ */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('assets/fonts/fraunces-latin-400_700.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('assets/fonts/fraunces-latin-ext-400_700.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/plex-latin-400.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/plex-latin-ext-400.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/plex-latin-500.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/plex-latin-ext-500.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/plex-latin-600.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/plex-latin-ext-600.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/plex-latin-700.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/plex-latin-ext-700.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/plexar-arabic-400.woff2') format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFF;}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/plexar-arabic-500.woff2') format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFF;}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/plexar-arabic-600.woff2') format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFF;}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/plexar-arabic-700.woff2') format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFF;}

/* ===== Tayyibat Table — bright, tactile design tokens ===== */
:root{
  /* Palette drawn from the diet's own foods — olive, honey, date-clay on
     limestone — rather than the mint-green every wellness app already uses. */
  --bg:#EFEDE6; --surface:#FFFFFF; --surface-2:#F6F4EE; --surface-3:#E7E4D9;
  --ink:#16211B; --ink-soft:#5A6B60; --ink-faint:#94A199;
  --line:#DDD9CD; --line-strong:#C3BDAC;

  --brand:#26533A; --brand-soft:#3E7052; --brand-shadow:#173626; --brand-tint:#E4EBE4;
  --on-brand:#FFFFFF; --on-gold:#241500;
  --gold:#B8791F; --gold-soft:#D29A42; --gold-shadow:#8A5813; --gold-tint:#F6EDDC;

  /* Semantic verdict colours, deliberately separate from the accent:
     a food is allowed or excluded, and that reading must never be
     confused with a mere highlight. */
  --good:#26533A; --good-shadow:#173626; --good-tint:#E4EBE4;
  --warn:#B8791F; --warn-shadow:#8A5813; --warn-tint:#F6EDDC;
  --bad:#9C3B2E;  --bad-shadow:#722519;  --bad-tint:#F5E4E0;

  --fast:#2C4A6B; --fast-shadow:#1B3049; --fast-tint:#E3E9F0;
  --protein:#9C3B2E; --protein-shadow:#722519; --protein-tint:#F5E4E0;
  --rest:#26533A; --rest-shadow:#173626; --rest-tint:#E4EBE4;
  --on-brand:#FFFFFF; --on-gold:#241500;

  --shadow-sm:0 1px 2px rgba(22,33,27,.05), 0 2px 8px rgba(22,33,27,.05);
  --shadow-md:0 4px 12px rgba(22,33,27,.08), 0 16px 40px rgba(22,33,27,.10);
  /* Tighter than before. The old 22px radius read as a toy. */
  --radius-lg:16px; --radius-md:12px; --radius-sm:8px;

  --font-display:'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
/* Arabic sets its own faces: Fraunces has no Arabic, and a silent fallback
   to a system face is exactly what made the Arabic edition look unfinished. */
[dir="rtl"]{
  --font-display:'IBM Plex Sans Arabic', system-ui, sans-serif;
  --font-body:'IBM Plex Sans Arabic', system-ui, sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{
  --bg:#131A15; --surface:#1B241D; --surface-2:#222D25; --surface-3:#2B382E;
  --ink:#EDEFE7; --ink-soft:#A9B5AB; --ink-faint:#74806F;
  --line:#2E3A31; --line-strong:#3F4E42;
  --brand:#7FB68F; --brand-soft:#9DCBAA; --brand-shadow:#3E6B4C; --brand-tint:#1E2A21;
  --gold:#E0A64A; --gold-soft:#EFC07A; --gold-shadow:#9C6E1E; --gold-tint:#2E2617;
  --good:#7FB68F; --good-shadow:#3E6B4C; --good-tint:#1E2A21;
  --warn:#E0A64A; --warn-shadow:#9C6E1E; --warn-tint:#2E2617;
  --bad:#D97A66; --bad-shadow:#A04A38; --bad-tint:#2E1D18;
  --fast:#8AA6CC; --fast-shadow:#40597A; --fast-tint:#1B242E;
  --protein:#D97A66; --protein-shadow:#A04A38; --protein-tint:#2E1D18;
  --rest:#7FB68F; --rest-shadow:#3E6B4C; --rest-tint:#1E2A21;
  --on-brand:#10231A; --on-gold:#241500;
  --shadow-sm:0 2px 8px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.25);
  --shadow-md:0 12px 32px rgba(0,0,0,.5), 0 4px 10px rgba(0,0,0,.3);
}
}
:root[data-theme="dark"]{
  --bg:#131A15; --surface:#1B241D; --surface-2:#222D25; --surface-3:#2B382E;
  --ink:#EDEFE7; --ink-soft:#A9B5AB; --ink-faint:#74806F;
  --line:#2E3A31; --line-strong:#3F4E42;
  --brand:#7FB68F; --brand-soft:#9DCBAA; --brand-shadow:#3E6B4C; --brand-tint:#1E2A21;
  --gold:#E0A64A; --gold-soft:#EFC07A; --gold-shadow:#9C6E1E; --gold-tint:#2E2617;
  --good:#7FB68F; --good-shadow:#3E6B4C; --good-tint:#1E2A21;
  --warn:#E0A64A; --warn-shadow:#9C6E1E; --warn-tint:#2E2617;
  --bad:#D97A66; --bad-shadow:#A04A38; --bad-tint:#2E1D18;
  --fast:#8AA6CC; --fast-shadow:#40597A; --fast-tint:#1B242E;
  --protein:#D97A66; --protein-shadow:#A04A38; --protein-tint:#2E1D18;
  --rest:#7FB68F; --rest-shadow:#3E6B4C; --rest-tint:#1E2A21;
  --on-brand:#10231A; --on-gold:#241500;
  --shadow-sm:0 2px 8px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.25);
  --shadow-md:0 12px 32px rgba(0,0,0,.5), 0 4px 10px rgba(0,0,0,.3);
}
:root[data-theme="light"]{
  --bg:#EFEDE6; --surface:#FFFFFF; --surface-2:#F6F4EE; --surface-3:#E7E4D9;
  --ink:#16211B; --ink-soft:#5A6B60; --ink-faint:#94A199;
  --line:#DDD9CD; --line-strong:#C3BDAC;
  --brand:#26533A; --brand-soft:#3E7052; --brand-shadow:#173626; --brand-tint:#E4EBE4;
  --gold:#B8791F; --gold-soft:#D29A42; --gold-shadow:#8A5813; --gold-tint:#F6EDDC;
  --good:#26533A; --good-shadow:#173626; --good-tint:#E4EBE4;
  --warn:#B8791F; --warn-shadow:#8A5813; --warn-tint:#F6EDDC;
  --bad:#9C3B2E; --bad-shadow:#722519; --bad-tint:#F5E4E0;
  --fast:#2C4A6B; --fast-shadow:#1B3049; --fast-tint:#E3E9F0;
  --protein:#9C3B2E; --protein-shadow:#722519; --protein-tint:#F5E4E0;
  --rest:#26533A; --rest-shadow:#173626; --rest-tint:#E4EBE4;
  --on-brand:#FFFFFF; --on-gold:#241500;
  --shadow-sm:0 1px 2px rgba(22,33,27,.05), 0 2px 8px rgba(22,33,27,.05);
  --shadow-md:0 4px 12px rgba(22,33,27,.08), 0 16px 40px rgba(22,33,27,.10);
}

*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;}
#tayyibat-root{
  font-family:var(--font-body); color:var(--ink); background:var(--bg);
  min-height:100vh; -webkit-font-smoothing:antialiased;
  font-size:15px; line-height:1.6;
}
#tayyibat-root *{scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent;}
h1,h2,h3,h4{font-family:var(--font-display); font-optical-sizing:auto; font-weight:800; margin:0; text-wrap:balance; color:var(--ink); letter-spacing:-.01em;}
p{margin:0 0 .8em; }
p:last-child{margin-bottom:0;}
a{color:inherit;}
button{font-family:inherit; cursor:pointer;}
input,textarea,select{font-family:inherit; color:inherit;}
ul{margin:0; padding:0; list-style:none;}
.tabular{font-variant-numeric:tabular-nums;}
:focus-visible{outline:3px solid var(--gold); outline-offset:2px; border-radius:6px;}
@keyframes fadeInUp{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);}}
@keyframes pop{0%{transform:scale(.7); opacity:0;} 60%{transform:scale(1.12);} 100%{transform:scale(1); opacity:1;}}
@keyframes wiggle{0%,100%{transform:rotate(0);} 25%{transform:rotate(-4deg);} 75%{transform:rotate(4deg);}}
@keyframes floaty{0%,100%{transform:translateY(0);} 50%{transform:translateY(-6px);}}
.view > *{animation:fadeInUp .38s ease both;}
.view > *:nth-child(1){animation-delay:.01s;} .view > *:nth-child(2){animation-delay:.05s;}
.view > *:nth-child(3){animation-delay:.09s;} .view > *:nth-child(4){animation-delay:.13s;}
.view > *:nth-child(5){animation-delay:.17s;} .view > *:nth-child(6){animation-delay:.21s;}
.view > *:nth-child(n+7){animation-delay:.24s;}
@media (prefers-reduced-motion: reduce){
  .view > *, .card, .btn, .badge-earned, .food-photo{animation:none !important; transition:none !important;}
}

/* ===== App shell ===== */
.app{display:grid; grid-template-columns:236px 1fr; min-height:100vh;}
/* The drawer scrim only exists below 860px, and its `display:none` lived
   inside that media query — so above 860px it fell back to a plain block and
   became the FIRST grid item. That pushed the sidebar into column two and the
   main column onto the next row, where it inherited the 236px track: every
   desktop visitor read the whole app through a 236px-wide column. Hidden at
   the base, shown by `.show` inside the media query, as it always intended. */
.sidebar-scrim{display:none;}
/* The chrome recedes. This is a tool people open every day standing in a
   kitchen, so the navigation is a quiet surface and the brand colour is spent
   where it carries meaning — the active item and the food verdicts — rather
   than on a full-height slab. A bright wall and a near-black wall are the same
   mistake in opposite directions; both shout over the content. */
.sidebar{
  background:var(--surface); border-right:1px solid var(--line);
  color:var(--ink); padding:22px 16px; display:flex; flex-direction:column; gap:22px;
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
.brandmark{display:flex; align-items:center; gap:11px; padding:2px 4px;}
.arch-mark{width:38px; height:38px; flex:none; animation:floaty 4s ease-in-out infinite;}
.brand-name{font-family:var(--font-display); font-optical-sizing:auto; font-size:19px; font-weight:800; letter-spacing:-.01em; color:var(--ink);}
.brand-sub{font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--gold); margin-top:1px; font-weight:700;}
.nav-list{display:flex; flex-direction:column; gap:2px; flex:1;}
.nav-group{
  padding:16px 12px 5px; font-size:10.5px; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-faint); pointer-events:none;
}
.nav-group:first-child{padding-top:2px;}
.nav-item{
  display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:14px;
  color:var(--ink-soft); background:transparent; border:none; text-align:left; font-size:13.5px; font-weight:600;
  transition:background .15s ease, color .15s ease, transform .1s ease; width:100%;
}
.nav-item svg{flex:none; opacity:.9;}
.nav-item:hover{background:var(--surface-2); color:var(--ink); transform:translateX(2px);}
.nav-item.active{background:var(--brand-tint); color:var(--brand); font-weight:800; box-shadow:inset 3px 0 0 var(--brand);}
.nav-item.active:active{transform:none;}
.nav-item.active svg{opacity:1;}
.sidebar-foot{display:flex; flex-direction:column; gap:6px; padding-top:10px; border-top:1px solid var(--line);}
.safety-link{
  display:flex; align-items:center; gap:8px; font-size:12px; color:var(--ink-soft); background:var(--surface-2);
  padding:9px 10px; border-radius:12px; border:1px solid rgba(255,255,255,.14); font-weight:700;
}
.safety-link:hover{background:rgba(0,0,0,.28);}
.today-pill-side{font-size:11px; color:#FFE9CE; font-weight:600;}

.mobile-topbar{display:none;}
.tabbar{display:none;}

.main{min-width:0; padding:34px 40px 80px;}
.view{max-width:1000px; margin:0 auto; display:flex; flex-direction:column; gap:26px;}

/* ===== Typography helpers ===== */
.eyebrow{font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--brand); font-weight:800;}
.page-head{display:flex; flex-direction:column; gap:6px; margin-bottom:2px;}
.page-head h1{font-size:clamp(26px,3.4vw,36px);}
.page-head .lede{color:var(--ink-soft); font-size:14.5px; max-width:62ch;}
h2.section-title{font-size:20px; display:flex; align-items:center; gap:9px;}
h2.section-title .arch-mini{width:20px;height:20px;flex:none;color:var(--brand);}

/* ===== Cards / surfaces ===== */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:20px; box-shadow:var(--shadow-sm); transition:transform .18s ease, box-shadow .18s ease;}
.card:hover{transform:translateY(-3px); box-shadow:var(--shadow-md);}
.card-tight{padding:16px;}
.grid{display:grid; gap:14px;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:700px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}}

/* ===== Buttons / chips — dimensional, pressable =====
   Three layers make the depth read as physical rather than drawn:
     1. a solid coloured shelf directly beneath the button
     2. a soft ambient shadow further down, for the light in the room
     3. an inset highlight along the top edge, so the surface catches light
   Pressing collapses the shelf and drops the button onto it. */
.btn{
  position:relative;
  display:inline-flex; align-items:center; gap:7px; padding:12px 22px; border-radius:99px;
  border:none; color:var(--ink); font-size:13px; font-weight:800;
  background:linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  box-shadow:
    0 3px 0 var(--line-strong),
    0 9px 18px rgba(22,33,27,.16),
    inset 0 1px 0 rgba(255,255,255,.7);
  transform:translateY(0);
  transition:transform .12s cubic-bezier(.3,1.4,.5,1), box-shadow .12s ease, filter .15s ease;
}
.btn:hover{
  transform:translateY(-2px);
  box-shadow:
    0 4px 0 var(--line-strong),
    0 14px 26px rgba(22,33,27,.2),
    inset 0 1px 0 rgba(255,255,255,.75);
  filter:brightness(1.02);
}
.btn:active{
  transform:translateY(3px);
  box-shadow:
    0 0 0 var(--line-strong),
    0 2px 5px rgba(22,33,27,.18),
    inset 0 2px 5px rgba(22,33,27,.14);
}

.btn-primary{
  color:var(--on-brand);
  background:linear-gradient(180deg, var(--brand-soft) 0%, var(--brand) 100%);
  box-shadow:
    0 3px 0 var(--brand-shadow),
    0 10px 22px rgba(22,33,27,.4),
    inset 0 1px 0 rgba(255,255,255,.4);
}
.btn-primary:hover{
  box-shadow:
    0 4px 0 var(--brand-shadow),
    0 16px 30px rgba(22,33,27,.18),
    inset 0 1px 0 rgba(255,255,255,.45);
}
.btn-primary:active{
  box-shadow:
    0 0 0 var(--brand-shadow),
    0 2px 6px rgba(22,33,27,.18),
    inset 0 2px 6px rgba(0,0,0,.18);
}

.btn-gold{
  color:#FFFFFF;
  background:linear-gradient(180deg, var(--gold-soft) 0%, var(--gold) 100%);
  box-shadow:
    0 3px 0 var(--gold-shadow),
    0 10px 22px rgba(22,33,27,.4),
    inset 0 1px 0 rgba(255,255,255,.4);
}
.btn-gold:hover{
  box-shadow:
    0 4px 0 var(--gold-shadow),
    0 16px 30px rgba(22,33,27,.18),
    inset 0 1px 0 rgba(255,255,255,.45);
}
.btn-gold:active{
  box-shadow:
    0 0 0 var(--gold-shadow),
    0 2px 6px rgba(22,33,27,.18),
    inset 0 2px 6px rgba(0,0,0,.18);
}

.btn-ghost{background:none; box-shadow:none;}
.btn-ghost:hover{background:var(--surface-2); transform:none; box-shadow:none; filter:none;}
.btn-ghost:active{transform:scale(.95); box-shadow:none;}

.btn-sm{
  padding:9px 15px; font-size:12px;
  box-shadow:
    0 2px 0 var(--line-strong),
    0 7px 13px rgba(22,33,27,.14),
    inset 0 1px 0 rgba(255,255,255,.7);
}
.btn-sm:hover{box-shadow:0 3px 0 var(--line-strong), 0 10px 18px rgba(22,33,27,.18), inset 0 1px 0 rgba(255,255,255,.75);}
.btn-sm:active{transform:translateY(3px); box-shadow:0 0 0 var(--line-strong), 0 2px 4px rgba(22,33,27,.16), inset 0 2px 4px rgba(22,33,27,.12);}
.btn-sm.btn-primary{box-shadow:0 2px 0 var(--brand-shadow), 0 8px 16px rgba(22,33,27,.18), inset 0 1px 0 rgba(255,255,255,.4);}
.btn-sm.btn-primary:active{box-shadow:0 0 0 var(--brand-shadow), 0 2px 5px rgba(22,33,27,.3), inset 0 2px 5px rgba(0,0,0,.18);}
.btn-sm.btn-gold{box-shadow:0 2px 0 var(--gold-shadow), 0 8px 16px rgba(22,33,27,.18), inset 0 1px 0 rgba(255,255,255,.4);}
.btn-sm.btn-gold:active{box-shadow:0 0 0 var(--gold-shadow), 0 2px 5px rgba(22,33,27,.3), inset 0 2px 5px rgba(0,0,0,.18);}
.btn-sm.btn-ghost{box-shadow:none;}

.btn[disabled]{opacity:.4; cursor:not-allowed; transform:none !important; filter:grayscale(.3);}
.btn[disabled]:active{transform:none !important;}
.btn-icon{padding:10px; border-radius:50%;}

.chip{
  display:inline-flex; align-items:center; gap:5px; padding:7px 13px; border-radius:99px; font-size:11.5px; font-weight:800;
  border:none; background:linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  color:var(--ink-soft); white-space:nowrap;
  box-shadow:0 2px 0 var(--line-strong), 0 5px 9px rgba(22,33,27,.12), inset 0 1px 0 rgba(255,255,255,.6);
  transition:transform .12s cubic-bezier(.3,1.4,.5,1), box-shadow .12s ease, background .15s ease, color .15s ease;
}
.chip.on{
  background:linear-gradient(180deg, var(--brand-soft) 0%, var(--brand) 100%); color:#FFFFFF;
  box-shadow:0 2px 0 var(--brand-shadow), 0 6px 12px rgba(22,33,27,.18), inset 0 1px 0 rgba(255,255,255,.35);
}
.chip-toggle{cursor:pointer; user-select:none;}
.chip-toggle:hover{transform:translateY(-2px); box-shadow:0 3px 0 var(--line-strong), 0 8px 14px rgba(22,33,27,.16), inset 0 1px 0 rgba(255,255,255,.6);}
.chip-toggle.on:hover{box-shadow:0 3px 0 var(--brand-shadow), 0 9px 16px rgba(22,33,27,.4), inset 0 1px 0 rgba(255,255,255,.35);}
.chip-toggle:active{transform:translateY(2px); box-shadow:0 0 0 var(--line-strong), 0 1px 3px rgba(22,33,27,.14), inset 0 2px 4px rgba(22,33,27,.12);}
.chip-toggle.on:active{box-shadow:0 0 0 var(--brand-shadow), 0 1px 3px rgba(22,33,27,.3), inset 0 2px 4px rgba(0,0,0,.18);}
.badge{display:inline-flex; align-items:center; gap:4px; padding:4px 10px; border-radius:99px; font-size:10.5px; font-weight:800; letter-spacing:.02em;}
.badge-daily{background:var(--good-tint); color:var(--good-shadow);}
.badge-weekly{background:var(--gold-tint); color:var(--gold-shadow);}
.badge-sometimes{background:var(--surface-3); color:var(--ink-soft);}
.badge-bad{background:var(--bad-tint); color:var(--bad-shadow);}
.badge-fast{background:var(--fast-tint); color:var(--fast-shadow);}
.badge-protein{background:var(--protein-tint); color:var(--protein-shadow);}
.badge-rest{background:var(--rest-tint); color:var(--rest-shadow);}
.badge-white{background:var(--gold-tint); color:var(--gold-shadow); box-shadow:inset 0 0 0 1px var(--gold-soft);}
.star{color:var(--gold);}
.diamond{color:var(--bad); font-size:10px;}

/* ===== Callouts ===== */
.callout{border-radius:var(--radius-md); padding:14px 16px; border:2px solid; font-size:13.5px; display:flex; gap:10px;}
.callout svg{flex:none; margin-top:2px;}
.callout-title{font-weight:800; font-size:12.5px; text-transform:uppercase; letter-spacing:.04em; margin-bottom:3px;}
.callout-note{background:var(--brand-tint); border-color:var(--brand-soft); color:var(--ink);}
.callout-note .callout-title{color:var(--brand-shadow);}
.callout-science{background:var(--fast-tint); border-color:var(--fast); color:var(--ink);}
.callout-science .callout-title{color:var(--fast-shadow);}
.callout-guardrail{background:var(--warn-tint); border-color:var(--gold-soft); color:var(--ink);}
.callout-guardrail .callout-title{color:var(--warn-shadow);}
.callout-critical{background:var(--bad-tint); border-color:var(--bad); color:var(--ink);}
.callout-critical .callout-title{color:var(--bad-shadow);}

/* ===== Tables ===== */
.tablewrap{overflow-x:auto; border:2px solid var(--line); border-radius:var(--radius-md);}
table.t{width:100%; border-collapse:collapse; font-size:13px; min-width:480px;}
table.t th{background:var(--surface-2); text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); padding:10px 14px; border-bottom:2px solid var(--line);}
table.t td{padding:11px 14px; border-bottom:1px solid var(--line); vertical-align:top;}
table.t tr:last-child td{border-bottom:none;}
table.t tbody tr:hover{background:var(--surface-2);}

/* ===== Food cards ===== */
.food-card{background:var(--surface); border:2px solid var(--line); border-radius:var(--radius-md); padding:14px 16px; display:flex; flex-direction:column; gap:7px; transition:transform .15s ease, box-shadow .15s ease;}
.food-card:hover{transform:translateY(-3px) scale(1.01); box-shadow:var(--shadow-sm); border-color:var(--line-strong);}
.food-card .fname{display:flex; align-items:baseline; justify-content:space-between; gap:8px;}
.food-card .fname b{font-size:14.5px; font-weight:800;}
.food-compounds{font-size:12px; color:var(--ink-soft);}
.food-compounds b{color:var(--ink); font-weight:700;}
.food-why{font-size:12.8px; color:var(--ink);}

/* ===== segmented control ===== */
.seg{
  display:inline-flex; background:var(--surface-3); border:none; border-radius:99px; padding:5px; gap:3px;
  box-shadow:inset 0 2px 5px rgba(22,33,27,.14);
}
.seg button{
  border:none; background:transparent; padding:10px 20px; border-radius:99px;
  font-size:13px; font-weight:800; color:var(--ink-soft);
  transition:transform .12s cubic-bezier(.3,1.4,.5,1), box-shadow .12s ease, background .15s ease, color .15s ease;
}
.seg button:hover:not(.on){color:var(--ink);}
.seg button.on{
  background:linear-gradient(180deg, var(--brand-soft) 0%, var(--brand) 100%); color:#FFFFFF;
  box-shadow:0 2px 0 var(--brand-shadow), 0 7px 14px rgba(22,33,27,.18), inset 0 1px 0 rgba(255,255,255,.35);
  transform:translateY(-1px);
}
.seg button.on:active{transform:translateY(2px); box-shadow:0 0 0 var(--brand-shadow), 0 1px 3px rgba(22,33,27,.3), inset 0 2px 4px rgba(0,0,0,.18);}

/* ===== Search ===== */
.searchbar{display:flex; align-items:center; gap:8px; background:var(--surface); border:2px solid var(--line-strong); border-radius:16px; padding:10px 14px;}
.searchbar input{flex:1; border:none; background:transparent; font-size:14px; outline:none;}
.searchbar svg{color:var(--brand); flex:none;}
.filter-row{display:flex; flex-wrap:wrap; gap:7px; align-items:center;}
.count-note{font-size:12px; color:var(--ink-faint); font-weight:700;}

/* ===== Calendar ===== */
.cal-head{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:6px;}
.cal-dow{font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); text-align:center; padding-bottom:4px; font-weight:800;}
.cal-cell{
  aspect-ratio:1/1; border:2px solid var(--line); border-radius:14px; padding:6px; display:flex; flex-direction:column;
  gap:3px; background:var(--surface); position:relative; text-align:left; min-height:66px; transition:transform .12s ease;
}
.cal-cell:hover{transform:scale(1.06); z-index:2; border-color:var(--brand-soft);}
.cal-cell.pad{visibility:hidden;}
.cal-cell.today{border-color:var(--gold); box-shadow:0 0 0 2px var(--gold);}
.cal-cell.done{background:var(--good-tint); border-color:var(--good);}
.cal-cell .dnum{font-size:12px; font-weight:800; color:var(--ink-soft);}
.cal-cell.today .dnum{color:var(--gold-shadow);}
.cal-tags{display:flex; flex-wrap:wrap; gap:3px;}
.cal-dot{width:16px;height:16px;border-radius:6px;font-size:9px;font-weight:800;display:flex;align-items:center;justify-content:center;}
.dot-fast{background:var(--fast-tint); color:var(--fast-shadow);}
.dot-protein{background:var(--protein-tint); color:var(--protein-shadow);}
.dot-rest{background:var(--rest-tint); color:var(--rest-shadow);}
.cal-white-ring{position:absolute; top:4px; right:4px; width:9px; height:9px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 2px var(--gold-tint);}
.cal-track-dot{position:absolute; bottom:5px; right:5px; width:5px; height:5px; border-radius:50%; background:var(--brand);}

/* ===== Recipes ===== */
.recipe-card{background:var(--surface); border:2px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; display:flex; flex-direction:column; transition:transform .18s ease, box-shadow .18s ease;}
.recipe-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md);}
.recipe-photo{height:108px; position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden;}
.recipe-photo svg{width:72px; height:72px; filter:drop-shadow(0 4px 6px rgba(0,0,0,.15));}
.recipe-head{padding:15px 17px 10px; display:flex; flex-direction:column; gap:4px;}
.recipe-meta{font-size:11.5px; color:var(--ink-faint); display:flex; gap:10px; font-weight:700;}
.recipe-body{padding:0 17px 17px; display:grid; grid-template-columns:1fr 1.3fr; gap:14px; font-size:12.8px;}
@media (max-width:600px){.recipe-body{grid-template-columns:1fr;}}
.recipe-body h4{font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--brand); margin-bottom:6px; font-weight:800;}
.recipe-body ul{display:flex; flex-direction:column; gap:4px;}
.recipe-body ol{padding-inline-start:16px; display:flex; flex-direction:column; gap:5px;}
/* The book gives every recipe a reason for existing and the app never showed
   one. It spans both columns because it is about the dish, not about the
   ingredients or the method — and it reads as an aside, not as a third list. */
.recipe-why{grid-column:1 / -1; margin-top:2px; padding-top:10px; border-top:1px solid var(--line);
  font-size:12.2px; line-height:1.55; color:var(--ink-soft); font-style:italic;}
.recipe-foot{padding:12px 17px; border-top:2px solid var(--line); display:flex; justify-content:flex-end; gap:8px; flex-wrap:wrap;}

/* ===== Tracker ===== */
.slider-row{display:flex; align-items:center; gap:12px;}
.slider-row label{width:92px; font-size:12.5px; font-weight:700; color:var(--ink-soft); flex:none;}
.slider-row input[type=range]{flex:1; accent-color:var(--brand); height:6px;}
.slider-val{width:22px; text-align:right; font-weight:800; font-variant-numeric:tabular-nums;}
.track-history-row{display:grid; grid-template-columns:88px 1fr 1fr 1fr 1fr auto; gap:10px; align-items:center; padding:9px 0; border-bottom:1px solid var(--line); font-size:12.5px;}
.track-history-row:last-child{border-bottom:none;}
.spark-wrap{display:flex; flex-direction:column; gap:4px;}

/* ===== Shopping list ===== */
.shop-item{display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--line); font-size:13.5px;}
.shop-item:last-child{border-bottom:none;}
.shop-item input[type=checkbox]{width:18px; height:18px; accent-color:var(--brand);}
.shop-item.checked span{text-decoration:line-through; color:var(--ink-faint);}
.shop-item .rm{margin-left:auto;}

/* ===== Learn sub-nav ===== */
.subnav{display:flex; flex-wrap:wrap; gap:6px;}
.subnav button{
  border:none; background:linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  padding:9px 16px; border-radius:99px; font-size:12.5px; font-weight:800; color:var(--ink-soft);
  box-shadow:0 2px 0 var(--line-strong), 0 5px 9px rgba(22,33,27,.12), inset 0 1px 0 rgba(255,255,255,.6);
  transition:transform .12s cubic-bezier(.3,1.4,.5,1), box-shadow .12s ease;
}
.subnav button:hover{transform:translateY(-2px); box-shadow:0 3px 0 var(--line-strong), 0 8px 14px rgba(22,33,27,.16), inset 0 1px 0 rgba(255,255,255,.6);}
.subnav button:active{transform:translateY(2px); box-shadow:0 0 0 var(--line-strong), 0 1px 3px rgba(22,33,27,.14), inset 0 2px 4px rgba(22,33,27,.12);}
.subnav button.on{
  background:linear-gradient(180deg, var(--brand-soft) 0%, var(--brand) 100%); color:#FFFFFF;
  box-shadow:0 2px 0 var(--brand-shadow), 0 6px 12px rgba(22,33,27,.18), inset 0 1px 0 rgba(255,255,255,.35);
}
.subnav button.on:active{box-shadow:0 0 0 var(--brand-shadow), 0 1px 3px rgba(22,33,27,.3), inset 0 2px 4px rgba(0,0,0,.18);}
.article{max-width:70ch; display:flex; flex-direction:column; gap:14px; font-size:14.5px;}
.article blockquote{font-family:var(--font-display); font-optical-sizing:auto; font-style:italic; font-size:17px; color:var(--brand); border-left:4px solid var(--gold); padding-left:16px; margin:6px 0;}
.faq-item{border:2px solid var(--line); border-radius:var(--radius-md); overflow:hidden;}
.faq-q{width:100%; text-align:left; background:var(--surface); border:none; padding:13px 16px; font-weight:800; font-size:13.8px; display:flex; justify-content:space-between; gap:10px; align-items:center;}
.faq-q:hover{background:var(--surface-2);}
.faq-a{padding:0 16px 15px; font-size:13.2px; color:var(--ink-soft); display:none;}
.faq-item.open .faq-a{display:block;}
.faq-item.open .chev{transform:rotate(180deg);}
.chev{transition:transform .15s ease; flex:none;}

/* ===== Modal / toast ===== */
.modal-backdrop{position:fixed; inset:0; background:rgba(43,26,16,.55); backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; padding:20px; z-index:100;}
.modal{background:var(--surface); border-radius:var(--radius-lg); max-width:560px; width:100%; max-height:88vh; overflow-y:auto; box-shadow:var(--shadow-md); border:2px solid var(--line); animation:pop .25s ease both;}
.modal-inner{padding:26px 26px 22px;}
.toast{position:fixed; bottom:22px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--brand); color:#FFF7EA; padding:12px 20px; border-radius:14px; font-size:13px; font-weight:800; opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease; z-index:200; box-shadow:0 2px 0 var(--brand-shadow), 0 8px 20px rgba(0,0,0,.2);}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

/* ===== Dashboard hero ===== */
.hero{
  position:relative; overflow:hidden; border-radius:var(--radius-lg); padding:28px 28px;
  background:linear-gradient(135deg, #2FBE79 0%, #7FE3AF 120%); color:#F2FCF6;
  box-shadow:var(--shadow-md);
}
.hero .arch-bg{position:absolute; right:-20px; top:-30px; width:230px; height:230px; opacity:.16; animation:floaty 6s ease-in-out infinite;}
.hero-top{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; position:relative; z-index:1;}
.hero h1{color:#FFFDF7; font-size:26px;}
.hero .datestr{color:#FFEFDC; font-size:13px; margin-top:2px; font-weight:700;}
.hero-tags{display:flex; gap:8px; flex-wrap:wrap;}
.hero-tag{padding:7px 14px; border-radius:99px; font-size:12px; font-weight:800; background:rgba(255,255,255,.22); border:2px solid rgba(255,255,255,.3);}
.hero-quote{margin-top:16px; font-family:var(--font-display); font-optical-sizing:auto; font-style:italic; font-size:15px; color:#FFF6E6; max-width:60ch; position:relative; z-index:1; font-weight:600;}
.hero-actions{display:flex; gap:9px; margin-top:16px; flex-wrap:wrap; position:relative; z-index:1;}
.stat-card{display:flex; flex-direction:column; gap:2px;}
.stat-num{font-family:var(--font-display); font-optical-sizing:auto; font-size:30px; font-weight:800; color:var(--brand);}
.stat-label{font-size:11.5px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.04em; font-weight:700;}
.quicklink{display:flex; align-items:center; gap:11px; padding:14px 16px; border-radius:var(--radius-md); border:2px solid var(--line); background:var(--surface); transition:transform .15s ease, box-shadow .15s ease;}
.quicklink:hover{background:var(--surface-2); transform:translateY(-3px); box-shadow:var(--shadow-sm); border-color:var(--brand-soft);}
.quicklink svg{flex:none; color:var(--brand);}
.quicklink b{display:block; font-size:13.5px;}
.quicklink span{font-size:11.8px; color:var(--ink-soft);}

.divider-arch{display:flex; align-items:center; gap:12px; color:var(--ink-faint); margin:2px 0;}
.divider-arch:before,.divider-arch:after{content:"";flex:1;height:2px;background:var(--line);}

.mono-note{font-size:11.5px; color:var(--ink-faint); font-style:italic;}
.essential-card{display:flex; gap:14px; align-items:flex-start;}
.essential-icon-frame{width:56px; height:56px; border-radius:16px; background:var(--surface-2); display:flex; align-items:center; justify-content:center; flex:none;}

/* ===== Badges (Today) ===== */
.badge-earned{animation:pop .4s ease both;}
.badge-earned:hover{animation:wiggle .4s ease;}

/* ===== Community & Video sections ===== */
.media-card{background:var(--surface); border:2px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; transition:transform .18s ease, box-shadow .18s ease;}
.media-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md);}
.media-thumb{aspect-ratio:16/10; display:flex; align-items:center; justify-content:center; position:relative;}
.media-thumb .play-btn{position:absolute; width:52px; height:52px; border-radius:50%; background:rgba(255,255,255,.92); display:flex; align-items:center; justify-content:center; box-shadow:0 4px 12px rgba(0,0,0,.25); color:var(--brand);}
.upload-well{
  border:3px dashed var(--line-strong); border-radius:var(--radius-lg); padding:28px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:10px; background:var(--surface-2); transition:border-color .15s ease, background .15s ease;
}
.upload-well:hover{border-color:var(--brand); background:var(--brand-tint);}
.avatar-blob{width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; color:#fff; flex:none; font-size:15px;}
.reaction-row{display:flex; gap:14px; align-items:center;}
.reaction-btn{display:flex; align-items:center; gap:5px; font-size:12.5px; font-weight:800; color:var(--ink-soft); background:none; border:none; padding:4px 8px; border-radius:10px;}
.reaction-btn:hover{background:var(--surface-2);}
.reaction-btn.liked{color:var(--bad);}

@media (max-width:860px){
  .app{grid-template-columns:1fr;}
  .sidebar{position:fixed; left:0; top:0; width:250px; z-index:90; transform:translateX(-100%); transition:transform .2s ease; box-shadow:var(--shadow-md);}
  .sidebar.open{transform:translateX(0);}
  .sidebar-scrim{display:none; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:85;}
  .sidebar-scrim.show{display:block;}
  .mobile-topbar{
    display:flex; align-items:center; gap:12px; padding:14px 16px; background:var(--surface);
    border-bottom:2px solid var(--line); position:sticky; top:0; z-index:60;
  }
  .mobile-topbar b{font-family:var(--font-display); font-optical-sizing:auto; font-size:16px;}
  .main{padding:20px 16px 90px;}
  .tabbar{
    display:flex; position:fixed; bottom:0; left:0; right:0; background:var(--surface); border-top:2px solid var(--line);
    z-index:70; padding:6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .tabbar button{flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; background:none; border:none; padding:6px 2px; color:var(--ink-faint); font-size:9.5px; font-weight:700;}
  .tabbar button.active{color:var(--brand);}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}
  .hero-top{flex-direction:column; align-items:flex-start;}
}
/* ===== Dimensional controls in dark mode =====
   The shelf colours flip automatically via tokens, but the ambient shadow and the
   top highlight must not: a light-room shadow disappears on a dark ground, and a
   bright inset highlight looks like a scratch. Both are re-tuned here. */
@media (prefers-color-scheme: dark){
  .btn{
    background:linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);
    box-shadow:0 3px 0 var(--line-strong), 0 9px 18px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.1);
  }
  .btn:hover{box-shadow:0 4px 0 var(--line-strong), 0 14px 26px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.12);}
  .btn:active{box-shadow:0 0 0 var(--line-strong), 0 2px 5px rgba(0,0,0,.5), inset 0 2px 5px rgba(0,0,0,.45);}
  .btn-sm{box-shadow:0 2px 0 var(--line-strong), 0 7px 13px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.1);}
  .btn-primary, .btn-sm.btn-primary{box-shadow:0 3px 0 var(--brand-shadow), 0 10px 22px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.18);}
  .btn-gold, .btn-sm.btn-gold{box-shadow:0 3px 0 var(--gold-shadow), 0 10px 22px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.18);}
  .btn-ghost, .btn-sm.btn-ghost{box-shadow:none;}
  .chip{box-shadow:0 2px 0 var(--line-strong), 0 5px 9px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);}
  .chip.on{box-shadow:0 2px 0 var(--brand-shadow), 0 6px 12px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.18);}
  .seg{box-shadow:inset 0 2px 6px rgba(0,0,0,.5);}
  .subnav button{box-shadow:0 2px 0 var(--line-strong), 0 5px 9px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);}
  .subnav button.on{box-shadow:0 2px 0 var(--brand-shadow), 0 6px 12px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.18);}
}
:root[data-theme="dark"] .btn{
  background:linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);
  box-shadow:0 3px 0 var(--line-strong), 0 9px 18px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.1);
}
:root[data-theme="dark"] .btn:hover{box-shadow:0 4px 0 var(--line-strong), 0 14px 26px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.12);}
:root[data-theme="dark"] .btn:active{box-shadow:0 0 0 var(--line-strong), 0 2px 5px rgba(0,0,0,.5), inset 0 2px 5px rgba(0,0,0,.45);}
:root[data-theme="dark"] .btn-sm{box-shadow:0 2px 0 var(--line-strong), 0 7px 13px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.1);}
:root[data-theme="dark"] .btn-primary,
:root[data-theme="dark"] .btn-sm.btn-primary{box-shadow:0 3px 0 var(--brand-shadow), 0 10px 22px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.18);}
:root[data-theme="dark"] .btn-gold,
:root[data-theme="dark"] .btn-sm.btn-gold{box-shadow:0 3px 0 var(--gold-shadow), 0 10px 22px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.18);}
:root[data-theme="dark"] .btn-ghost,
:root[data-theme="dark"] .btn-sm.btn-ghost{box-shadow:none;}
:root[data-theme="dark"] .chip{box-shadow:0 2px 0 var(--line-strong), 0 5px 9px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);}
:root[data-theme="dark"] .chip.on{box-shadow:0 2px 0 var(--brand-shadow), 0 6px 12px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.18);}
:root[data-theme="dark"] .seg{box-shadow:inset 0 2px 6px rgba(0,0,0,.5);}
:root[data-theme="dark"] .subnav button{box-shadow:0 2px 0 var(--line-strong), 0 5px 9px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);}
:root[data-theme="dark"] .subnav button.on{box-shadow:0 2px 0 var(--brand-shadow), 0 6px 12px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.18);}

/* Motion is the whole point of a pressable button — but never at the cost of accessibility. */
@media (prefers-reduced-motion: reduce){
  .btn, .chip, .seg button, .subnav button, .nav-item{transition:none !important;}
  .btn:hover, .btn:active, .chip-toggle:hover, .chip-toggle:active,
  .seg button.on, .subnav button:hover, .subnav button:active{transform:none !important;}
}

/* ===== Right-to-left (Arabic) =====
   Translating the words is the easy half. The layout itself has to mirror:
   the sidebar moves, icons and carets flip, and anything anchored left anchors right. */
[dir="rtl"] .app{direction:rtl;}
[dir="rtl"] .sidebar{order:2;}
[dir="rtl"] .nav-item{text-align:right;}
[dir="rtl"] .nav-item:hover{transform:translateX(-2px);}
[dir="rtl"] .brandmark{flex-direction:row;}
[dir="rtl"] .food-card .fname,
[dir="rtl"] .hero-top,
[dir="rtl"] .cal-head,
[dir="rtl"] .filter-row,
[dir="rtl"] .reaction-row,
[dir="rtl"] .recipe-meta{flex-direction:row-reverse;}
[dir="rtl"] .shop-item .rm{margin-left:0; margin-right:auto;}
[dir="rtl"] .price{margin-right:0; margin-left:auto;}
[dir="rtl"] .article blockquote{border-left:none; border-right:4px solid var(--gold); padding-left:0; padding-right:16px;}
[dir="rtl"] .callout{flex-direction:row-reverse;}
[dir="rtl"] .essential-card{flex-direction:row-reverse;}
[dir="rtl"] .slider-row label{text-align:right;}
[dir="rtl"] .track-history-row{direction:rtl;}
[dir="rtl"] .chev,
[dir="rtl"] .edu-caret{transform:scaleX(-1);}
[dir="rtl"] .faq-item.open .chev{transform:scaleX(-1) rotate(180deg);}
/* Molecule cards and flagged ingredients use a left accent bar — mirror it. */
[dir="rtl"] [style*="border-left:4px solid"]{
  border-left:none !important;
  border-right-width:4px; border-right-style:solid;
}
/* Numerals stay left-to-right inside RTL text so times and counts read correctly. */
[dir="rtl"] .tabular,
[dir="rtl"] input[type="time"],
[dir="rtl"] input[type="date"]{direction:ltr; unicode-bidi:embed;}
[dir="rtl"] .stat-num{direction:ltr;}
@media (max-width:860px){
  [dir="rtl"] .sidebar{left:auto; right:0; transform:translateX(100%);}
  [dir="rtl"] .sidebar.open{transform:translateX(0);}
}

/* Language picker */
.lang-row{display:flex; gap:6px; flex-wrap:wrap;}
.lang-btn{
  flex:1; min-width:74px; border:none; border-radius:12px; padding:9px 8px;
  font-size:12.5px; font-weight:800; cursor:pointer;
  background:rgba(255,255,255,.14); color:#FFF3E2;
  transition:background .15s ease, transform .1s ease;
}
.lang-btn:hover{background:rgba(255,255,255,.24);}
.lang-btn.on{background:#FFFFFF; color:#1F9B5F;}
.lang-btn:active{transform:scale(.96);}

/* ===== Mobile: every section visible, nothing behind an icon =====
   A hamburger hides eleven destinations behind a symbol most people never tap.
   This rail shows them all, scrolls sideways, and keeps the current one obvious. */
.mobile-rail{display:none;}
@media (max-width:860px){
  .mobile-rail{
    display:flex; gap:8px; overflow-x:auto; overflow-y:hidden;
    padding:10px 16px 12px; background:var(--surface);
    border-bottom:1px solid var(--line);
    position:sticky; top:52px; z-index:59;
    -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity;
    scrollbar-width:none;
  }
  .mobile-rail::-webkit-scrollbar{display:none;}
  .rail-btn{
    flex:0 0 auto; scroll-snap-align:start;
    display:inline-flex; align-items:center; gap:7px;
    padding:10px 16px; border-radius:99px; border:none; white-space:nowrap;
    font-size:13px; font-weight:800; color:var(--ink-soft);
    background:linear-gradient(180deg,var(--surface) 0%, var(--surface-2) 100%);
    box-shadow:0 2px 0 var(--line-strong), 0 5px 10px rgba(22,33,27,.12), inset 0 1px 0 rgba(255,255,255,.6);
    transition:transform .12s cubic-bezier(.3,1.4,.5,1), box-shadow .12s ease;
  }
  .rail-btn svg{width:17px; height:17px; flex:none;}
  .rail-btn:active{transform:translateY(2px); box-shadow:0 0 0 var(--line-strong), inset 0 2px 4px rgba(22,33,27,.12);}
  .rail-btn.active{
    background:linear-gradient(180deg,var(--brand-soft) 0%, var(--brand) 100%); color:#FFFFFF;
    box-shadow:0 2px 0 var(--brand-shadow), 0 6px 12px rgba(22,33,27,.18), inset 0 1px 0 rgba(255,255,255,.35);
  }
  /* the rail replaces the hidden drawer entirely */
  .sidebar, .sidebar-scrim{display:none !important;}
  .main{padding-top:14px;}
}
@media (prefers-color-scheme: dark){
  .rail-btn{box-shadow:0 2px 0 var(--line-strong), 0 5px 10px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);}
  .rail-btn.active{box-shadow:0 2px 0 var(--brand-shadow), 0 6px 12px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.18);}
}
:root[data-theme="dark"] .rail-btn{box-shadow:0 2px 0 var(--line-strong), 0 5px 10px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);}
:root[data-theme="dark"] .rail-btn.active{box-shadow:0 2px 0 var(--brand-shadow), 0 6px 12px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.18);}
[dir="rtl"] .mobile-rail{direction:rtl;}

/* Language picker needs a home now the sidebar is gone on mobile */
@media (max-width:860px){
  .lang-row-mobile{display:flex; gap:6px; margin-top:14px;}
  .lang-row-mobile .lang-btn{background:var(--surface-2); color:var(--ink-soft); box-shadow:var(--shadow-sm);}
  .lang-row-mobile .lang-btn.on{background:var(--brand); color:#fff;}
}
.lang-row-mobile{display:none;}

/* ===== Today: one thing that matters =====
   The old hero gave a greeting, a quote and two equal buttons — nothing led.
   This one answers "where am I, and what do I do next?" and has a single
   obvious action, with everything else deliberately quieter. */
.hero-focus{padding:30px 28px 26px; text-align:left;}
.hero-focus .hero-art{
  position:absolute; top:14px; right:18px; display:flex; gap:6px; opacity:.85; z-index:0;
}
[dir="rtl"] .hero-focus .hero-art{right:auto; left:18px;}
.hero-eyebrow{
  position:relative; z-index:1;
  font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-weight:800;
  color:#EAFBF1; opacity:.92;
}
.hero-focus h1{
  position:relative; z-index:1;
  font-size:clamp(26px,5.5vw,36px); color:#FFFFFF; margin-top:6px; max-width:19ch;
}
.hero-body{
  position:relative; z-index:1;
  margin-top:10px; font-size:14.5px; color:#EAFBF1; opacity:.95; max-width:46ch;
}
.hero-focus .hero-actions{margin-top:20px;}
/* The single primary action: biggest, warmest, unmissable. */
.btn-hero{padding:16px 26px; font-size:15.5px;}
/* Everything else on the hero steps back rather than competing. */
.btn-quiet{
  background:rgba(255,255,255,.16); color:#FFFFFF;
  box-shadow:0 2px 0 rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn-quiet:hover{background:rgba(255,255,255,.24); box-shadow:0 4px 0 rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.3);}
.btn-quiet:active{box-shadow:0 0 0 rgba(0,0,0,.14), inset 0 2px 5px rgba(0,0,0,.2);}
.hero-meta{
  position:relative; z-index:1;
  margin-top:16px; font-size:12.5px; color:#EAFBF1; opacity:.8; font-weight:600;
}
/* A first-time visitor shouldn't be met with a row of zeros. */
.start-here{display:flex; gap:14px; align-items:flex-start;}

/* ===== Celebration =====
   The moment a streak ticks over is the one users remember. It gets a real beat. */
.cheer-wrap{
  position:fixed; inset:0; pointer-events:none; z-index:300;
  display:flex; align-items:center; justify-content:center;
}
.cheer-card{
  background:var(--surface); border-radius:24px; padding:26px 30px; text-align:center;
  box-shadow:var(--shadow-md); border:2px solid var(--brand);
  animation:cheerPop .5s cubic-bezier(.2,1.5,.4,1) both;
  max-width:300px;
}
.cheer-card .num{
  font-family:var(--font-display); font-optical-sizing:auto; font-size:52px; font-weight:800;
  color:var(--brand-shadow); line-height:1;
}
.cheer-card .msg{margin-top:6px; font-weight:800; font-size:15px;}
.cheer-card .sub{margin-top:4px; font-size:13px; color:var(--ink-soft);}
@keyframes cheerPop{
  0%{transform:scale(.6) translateY(14px); opacity:0;}
  60%{transform:scale(1.06) translateY(0); opacity:1;}
  100%{transform:scale(1); opacity:1;}
}
.confetti{position:fixed; top:-12px; width:9px; height:14px; border-radius:2px; z-index:299; pointer-events:none;}
@keyframes fall{
  to{ transform:translateY(105vh) rotate(var(--spin)); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .cheer-card{animation:none;}
  .confetti{display:none;}
}

/* Photographs sit in the same circular footprint the drawings occupied, so
   swapping one for the other never shifts the layout. */
.food-photo{
  border-radius:50%; object-fit:cover; display:block;
  background:var(--surface-3);
  box-shadow:0 1px 2px rgba(22,33,27,.10), 0 6px 16px rgba(22,33,27,.10);
}
.food-art .food-photo, .hero-art .food-photo{border-radius:50%;}

/* A photograph beside each food. The card becomes a row only when there is an
   image to show, so entries without one keep their original full-width layout
   instead of sitting in a ragged indent. */
.food-card.has-thumb{flex-direction:row; align-items:flex-start; gap:13px;}
.food-card-main{flex:1; min-width:0; display:flex; flex-direction:column; gap:7px;}
.food-thumb{
  width:46px; height:46px; flex:none; border-radius:10px; object-fit:cover;
  background:var(--surface-3); box-shadow:0 1px 2px rgba(22,33,27,.12);
}

/* The drawn fallbacks share the photographs' circular frame — see foodArt(). */
.food-art-fallback{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  border-radius:50%; background:var(--surface-3); overflow:hidden;
  box-shadow:0 1px 2px rgba(22,33,27,.10), 0 6px 16px rgba(22,33,27,.10);
}
.food-art-fallback svg{width:78%; height:78%; display:block;}

/* ===== The 40-Day Reset ===== */
.program-outline{margin:12px 0 0; padding-inline-start:20px; display:flex; flex-direction:column; gap:9px;}
.program-outline li{font-size:14px; line-height:1.55; color:var(--ink-soft);}
.program-outline li b{color:var(--ink);}
.program-bar{height:7px; border-radius:99px; background:var(--surface-3); overflow:hidden; margin-top:12px;}
.program-bar span{display:block; height:100%; background:var(--brand); border-radius:99px; transition:width .4s ease;}
.week-card{margin-top:14px;}
.week-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; margin-top:14px;}
.week-grid div{display:flex; flex-direction:column; gap:4px;}
.week-grid b{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint);}
.week-grid span{font-size:13.5px; color:var(--ink-soft); line-height:1.5;}

.day-card{margin-top:12px;}
.day-card.is-done{border-color:var(--brand); background:var(--good-tint);}
.day-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px;}
.day-head b{font-family:var(--font-display); font-optical-sizing:auto; font-size:18px;}
.day-tags{display:flex; gap:6px; margin-top:6px; flex-wrap:wrap;}
.day-meals{list-style:none; padding:0; margin:14px 0 0; display:flex; flex-direction:column; gap:10px;}
.day-meals li{display:grid; grid-template-columns:minmax(120px,auto) 1fr; gap:4px 14px; align-items:baseline;
  padding-bottom:10px; border-bottom:1px solid var(--line);}
.day-meals li:last-child{border-bottom:none; padding-bottom:0;}
.day-meals .when{font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  font-weight:700; color:var(--ink-faint);}
.day-meals .what{font-size:14.5px; font-weight:600;}
.day-meals .mono-note{grid-column:2;}
.day-meals li.is-fast .what{color:var(--fast); font-weight:600;}
@media (max-width:560px){ .day-meals li{grid-template-columns:1fr;} .day-meals .mono-note{grid-column:1;} }

.day-card.locked{opacity:.92; border-style:dashed;}
.program-shop{list-style:none; padding:0; margin:0; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:7px 16px;}
.program-shop li{font-size:13.5px; color:var(--ink-soft); position:relative; padding-inline-start:16px;}
.program-shop li::before{content:''; position:absolute; inset-inline-start:2px; top:8px;
  width:5px; height:5px; border-radius:50%; background:var(--brand);}