/* dialdown-2.html only (Claude, private, Nov 3), on top of dialdown.css, which is unchanged. Phone first, then tablet, then computer.
   On Shaan's "its missing the benefits and more of an impressive recipe section":
   - Benefits: three benefits, each with the two greens that carry it (tools/build-dialdown-pairs.py), its headline and one plain sentence. Every green appears once. Their nutrients and flavors open behind the same one tap.
   - Recipes: One handful a day. starts on the left, as the house rules have the recipes, then a rail of eight real recipes in big photos, quickest first, each opening in the window. On a phone it swipes; from tablet up it has arrows too. */

/* 2. Benefits, on black. Phone: one row each, the greens beside the words. */
html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd2 .dd2-ben{display:grid;grid-template-columns:minmax(0,1fr);gap:26px;width:100%;max-width:none;margin:30px 0 0;padding:0;list-style:none;text-align:left}
html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd2 .dd2-tile{display:grid;grid-template-columns:clamp(96px,30vw,132px) minmax(0,1fr);gap:16px;align-items:center;margin:0;padding:0;list-style:none}
html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd2 .dd2-tile::before{content:none}
html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd2 .dd2-art{display:block;width:100%;height:auto;max-width:none;margin:0;border-radius:0;background:none;box-shadow:none;filter:none}
html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd2 .dd2-words{min-width:0}
html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd2 .dd2-words h4{margin:0;padding:0;font-family:inherit;font-size:clamp(20px,6.15vw,24px);line-height:1.15;font-weight:600;letter-spacing:-.012em;text-transform:none;color:var(--fg)}
html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd2 .dd2-words p{margin:6px 0 0;padding:0;font-size:16px;line-height:1.4;font-weight:400;letter-spacing:0;color:var(--grey);text-align:inherit}
html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd2 .dd2-words .dd2-from{margin-top:7px;font-size:13px;font-weight:500;letter-spacing:.01em;color:var(--fg)}
html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd2 .dd2-detail{display:none;margin:10px 0 0;padding:0}
html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd2 .dd2-ben.dd-shown .dd2-detail{display:grid;gap:6px}
html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd2 .dd2-ben.dd-shown .dd2-from{display:none}
html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd2 .dd2-detail div{margin:0;padding:0;font-size:13px;line-height:1.4}
html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd2 .dd2-detail dt{display:inline;margin:0;font-weight:600;color:var(--fg)}
html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd2 .dd2-detail dd{display:inline;margin:0;color:var(--grey);white-space:nowrap}
html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd2 .dd2-detail dd::before{content:"\a0· ";white-space:normal}
/* On the narrowest phones a long nutrient line may wrap inside itself. */
@media (max-width:359px){html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd2 .dd2-detail dd{white-space:normal}}

html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd2 .dd-open{font-size:17px}

/* 3. Recipes, on mist: the headline on the left, then the rail, which runs to the screen's edges. */
html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd2 .dd2-recipes{padding:56px 0 8px}
html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd2 .dd2-head{margin:0 20px;text-align:left}
html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd2 .dd2-head .dd-h,
html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd2 .dd2-head .dd-line{margin-left:0;margin-right:0;text-align:left}
html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd2 .dd2-rail{display:grid;grid-auto-flow:column;grid-auto-columns:74vw;column-gap:12px;width:auto;max-width:none;margin:24px 0 0;padding:0 20px;list-style:none;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:20px;scrollbar-width:none}
html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd2 .dd2-rail::-webkit-scrollbar{display:none}
html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd2 .dd2-rail li{min-width:0;margin:0;padding:0;list-style:none;scroll-snap-align:start}
html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd2 .dd2-rail li::before{content:none}
html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd2 .dd2-card{display:block;margin:0;padding:0;border-radius:20px;background:none;color:var(--ink);text-decoration:none;text-align:left}
html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd2 .dd2-card:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd2 .dd2-photo{position:relative;display:block;overflow:hidden;aspect-ratio:4/5;margin:0;border-radius:20px;background:#E4ECE7}
html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd2 .dd2-photo img{display:block;width:100%;height:100%;max-width:none;margin:0;object-fit:cover;border-radius:0;box-shadow:none;filter:none}
/* The + that opens the recipe, in the photo's corner. */
html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd2 .dd2-photo i{position:absolute;right:12px;bottom:12px;display:block;width:34px;height:34px;border-radius:50%;background:rgb(255 255 255 / .94);box-shadow:0 2px 10px rgb(10 42 42 / .18);color:var(--ink)}
html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd2 .dd2-photo i::before,
html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd2 .dd2-photo i::after{content:"";position:absolute;left:50%;top:50%;width:13px;height:1.6px;border-radius:1px;background:currentColor;transform:translate(-50%,-50%)}
html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd2 .dd2-photo i::after{transform:translate(-50%,-50%) rotate(90deg)}
html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd2 .dd2-card small{display:block;margin:14px 0 0;font-size:12px;line-height:1.2;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd2 .dd2-card b{display:block;margin:5px 0 0;font-size:20px;line-height:1.25;font-weight:600;letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd2 .dd2-card>span:last-child{display:block;margin:4px 0 0;font-size:14px;line-height:1.3;font-weight:400;color:var(--muted)}
html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd2 .dd2-under{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:22px 20px 0}
html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd2 .dd2-nav{display:none}
html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd2 .dd2-recipes .dd-cta{margin:30px 20px 0}

/* Tablet and up: the three benefits side by side, the greens over the words; arrows on the rail. */
@media (min-width:700px){
 html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd2 .dd2-ben{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:40px;text-align:center}
 html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd2 .dd2-tile{grid-template-columns:minmax(0,1fr);gap:0;align-items:start;align-content:start;justify-items:center}
 html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd2 .dd2-art{width:min(100%,240px);aspect-ratio:5/3;margin:0 auto 22px;object-fit:contain;object-position:center bottom}
 html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd2 .dd2-words h4{font-size:clamp(20px,3.1vw,24px)}
 html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd2 .dd2-words p{max-width:20em;margin-left:auto;margin-right:auto;text-wrap:balance}
 html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd2 .dd2-recipes{padding:72px 0 16px}
 html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd2 .dd2-head,
 html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd2 .dd2-under,
 html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd2 .dd2-recipes .dd-cta{margin-left:48px;margin-right:48px}
 html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd2 .dd2-rail{grid-auto-columns:260px;column-gap:16px;margin-top:32px;padding:0 48px;scroll-padding-inline:48px}
 html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd2 .dd2-nav{display:flex;gap:12px}
 html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd2 .dd2-nav button{display:grid;place-items:center;width:40px;height:40px;margin:0;padding:0;border:0;border-radius:50%;background:var(--oh-track,rgb(20 68 68 / 7%));color:var(--ink);cursor:pointer}
 html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd2 .dd2-nav button:hover:not(:disabled){background:rgb(20 68 68 / 12%)}
 html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd2 .dd2-nav button:disabled{opacity:.35;cursor:default}
 html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd2 .dd2-nav button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
 html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd2 .dd2-nav svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
 html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd2 .dd2-recipes .dd-cta{flex-direction:row;justify-content:flex-start;align-items:center;gap:20px;margin-top:36px}
}

/* Computer: 1u = 1px at 1440, as in dialdown.css. Four recipes show at once and the fifth peeks in at the edge. */
@media (min-width:1000px){
 html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd2 .dd2-ben{gap:calc(var(--u)*48);margin-top:calc(var(--u)*56)}
 html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd2 .dd2-art{width:calc(var(--u)*300);margin-bottom:calc(var(--u)*30)}
 html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd2 .dd2-words h4{font-size:max(24px,calc(var(--u)*32))}
 html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd2 .dd2-words p{margin-top:10px;font-size:max(16px,calc(var(--u)*18))}
 html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd2 .dd2-words .dd2-from{margin-top:12px;font-size:14px}
 html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd2 .dd2-detail{margin-top:14px}
 html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd2 .dd2-detail div{font-size:14px}
 html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd2 .dd2-recipes{padding:calc(var(--u)*96) 0 calc(var(--u)*16)}
 html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd2 .dd2-head,
 html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd2 .dd2-under,
 html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd2 .dd2-recipes .dd-cta{width:var(--w);margin-left:auto;margin-right:auto}
 html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd2 .dd2-rail{grid-auto-columns:calc((var(--w) - var(--u)*72)/4);column-gap:calc(var(--u)*24);margin-top:calc(var(--u)*44);padding:0 calc((100% - var(--w))/2);scroll-padding-inline:calc((100% - var(--w))/2)}
 html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd2 .dd2-card b{font-size:20px}
 html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd2 .dd2-under{margin-top:calc(var(--u)*28)}
 html body #unit-nutrition#unit-nutrition#unit-nutrition #why.dd-on .dd2 .dd2-recipes .dd-cta{margin-top:calc(var(--u)*44)}
}