/* v31.6 «التغذية» card on صحتي: calmer and shorter — one summary line, one line per meal, habits as small pills */
.health-page [data-health-card="nutrition"] .health-card-content{gap:12px}
/* summary: the total and the three macros on one line, a thin bar under it (the percentages stay in its label) */
[data-health-card="nutrition"] .ml-block{display:flex;flex-direction:column;gap:10px}
[data-health-card="nutrition"] .ml-top{align-items:center;gap:10px 16px}
[data-health-card="nutrition"] .ml-top .health-eyebrow{display:block;margin-bottom:2px}
[data-health-card="nutrition"] .ml-total .health-metric{font-size:34px;line-height:1}
[data-health-card="nutrition"] .ml-macros{gap:12px}
[data-health-card="nutrition"] .ml-macros span{display:flex;align-items:center;gap:4px;white-space:nowrap}
[data-health-card="nutrition"] .ml-macros b{font-size:12.5px}
[data-health-card="nutrition"] .ml-bar{height:6px;border-radius:6px;gap:2px}
[data-health-card="nutrition"] .ml-bar bdi{display:none}
/* meals: time · name and what she ate · calories, one tidy row each */
[data-health-card="nutrition"] .ml-meals{border-top:0;margin:0;gap:2px}
[data-health-card="nutrition"] .ml-meal{display:grid;grid-template-columns:44px minmax(0,1fr) auto;grid-template-areas:"time name kcal" "time items kcal";column-gap:10px;align-items:center;padding:7px 10px;border:0;border-radius:10px;background:color-mix(in srgb,var(--text) 4%,transparent)}
[data-health-card="nutrition"] .ml-meal-head{display:contents}
[data-health-card="nutrition"] .ml-meal-head strong{grid-area:name;font-size:12.5px}
[data-health-card="nutrition"] .ml-meal-head small{grid-area:time;font-size:12px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
[data-health-card="nutrition"] .ml-meal-head .ml-kcal{grid-area:kcal;margin:0;font-size:11px}
[data-health-card="nutrition"] .ml-meal-head .ml-add{display:none}
[data-health-card="nutrition"] .ml-items{grid-area:items;margin:0}
/* habits: a caption with the count, then small pills that wrap */
[data-health-card="nutrition"] .ml-habits-cap{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--muted);padding-top:10px;border-top:1px solid var(--border)}
[data-health-card="nutrition"] .ml-habits-cap b{color:var(--text);font-size:12px}
[data-health-card="nutrition"] .health-card-list{display:flex;flex-wrap:wrap;gap:6px;border:0;max-height:none;overflow:visible;padding:0}
[data-health-card="nutrition"] .health-card-list .health-row{display:inline-flex;align-items:center;gap:2px;padding:3px 4px 3px 10px;border:1px solid var(--border);border-radius:999px;min-height:0;font-size:12px;background:none}
[data-health-card="nutrition"] .health-card-list .health-row label{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
[data-health-card="nutrition"] .health-card-list .health-row .v21-check{width:16px!important;height:16px!important;min-width:16px}
[data-health-card="nutrition"] .health-card-list .health-row .health-value{font-size:10.5px;padding:1px 6px;min-height:0}
[data-health-card="nutrition"] .health-card-list .health-row .ico-edit{min-width:24px;min-height:24px;opacity:0;transition:opacity .15s}
[data-health-card="nutrition"] .health-card-list .health-row:hover .ico-edit,[data-health-card="nutrition"] .health-card-list .health-row .ico-edit:focus-visible{opacity:1}
[data-health-card="nutrition"] .health-card-list .health-row:has(input:checked){background:color-mix(in srgb,var(--text) 8%,transparent)}
/* «نظامي» (the plan) in the card: shorter rows, what she prepared on one line */
[data-health-card="nutrition"] .pl-card{gap:8px}
[data-health-card="nutrition"] .pl-row{grid-template-columns:44px minmax(0,1fr) auto;align-items:center;padding:7px 0}
[data-health-card="nutrition"] .pl-time{padding-top:0;font-size:12px}
[data-health-card="nutrition"] .pl-acts{padding-top:0}
[data-health-card="nutrition"] .pl-type{font-size:10.5px}
[data-health-card="nutrition"] .pl-dish{font-size:13px}
[data-health-card="nutrition"] .pl-made{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
[data-health-card="nutrition"] .pl-sum{padding-top:6px}
/* a card that scrolls shows a visible thin bar */
.health-page .health-grid>.health-card>.health-card-content{scrollbar-color:color-mix(in srgb,var(--text) 30%,transparent) transparent}
.health-page .health-grid>.health-card>.health-card-content::-webkit-scrollbar{width:6px}
.health-page .health-grid>.health-card>.health-card-content::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--text) 30%,transparent);border-radius:6px}
[data-health-card="nutrition"] .health-card-list .health-row{padding:3px 4px 3px 10px!important;min-height:30px!important;margin:0!important;border-bottom:1px solid var(--border)!important}
[data-health-card="nutrition"] .pl-what{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:6px;row-gap:1px;align-items:baseline}
[data-health-card="nutrition"] .pl-type:after{content:' ·'}
[data-health-card="nutrition"] .pl-dish{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
[data-health-card="nutrition"] .pl-made{grid-column:1/-1}
[data-health-card="nutrition"] .pl-row{padding:6px 0}

/* v31.11 (approved 21 Oct) the card's parts use its whole width instead of a narrow column in the middle */
[data-health-card="nutrition"] .health-card-content{align-items:stretch!important;text-align:start}
[data-health-card="nutrition"] .health-card-content>*{width:100%!important;max-width:none!important;margin-inline:0!important;align-self:stretch!important}
/* a wide card: the plan on the right, the habits beside it */
[data-health-card="nutrition"]:is(.size-full,.size-large,.size-half) .health-card-content:has(>:is(.pl-card,.ml-block)){display:grid!important;grid-template-columns:minmax(0,1.7fr) minmax(200px,1fr);grid-template-rows:auto 1fr;column-gap:28px;row-gap:8px;align-content:start}
[data-health-card="nutrition"]:is(.size-full,.size-large,.size-half) .health-card-content>:is(.pl-card,.ml-block){grid-column:1;grid-row:1/span 2}
[data-health-card="nutrition"]:is(.size-full,.size-large,.size-half) .health-card-content:has(>:is(.pl-card,.ml-block))>.ml-habits-cap{grid-column:2;grid-row:1;border-top:0;padding-top:0;align-self:start!important}
[data-health-card="nutrition"]:is(.size-full,.size-large,.size-half) .health-card-content:has(>:is(.pl-card,.ml-block))>.health-scroll-list{grid-column:2;grid-row:2;align-self:start!important}
[data-health-card="nutrition"]:is(.size-full,.size-large,.size-half) .health-card-content:has(>:is(.pl-card,.ml-block))>:not(.pl-card):not(.ml-block):not(.ml-habits-cap):not(.health-scroll-list){grid-column:1/-1}
[data-health-card="nutrition"]:is(.size-full,.size-large,.size-half) .health-card-content:has(>:is(.pl-card,.ml-block))>.ml-habits-cap{padding-inline-start:0}
/* habits: one row each, like the meals, not a pill in the middle */
[data-health-card="nutrition"] .health-scroll-list{display:flex;flex-direction:column;gap:4px}
[data-health-card="nutrition"] .health-scroll-list>*{width:100%!important;max-width:none!important;border-radius:10px!important;border:0!important;background:color-mix(in srgb,var(--text) 4%,transparent)!important;justify-content:flex-start!important;padding:9px 12px!important;min-height:0!important}
[data-health-card="nutrition"] .pl-sum{margin-top:2px}
/* a meal row keeps its + hidden (meals are added from the card's +), whatever the shared icon rules say */
#main-content [data-health-card="nutrition"] .ml-meal-head .ml-add{display:none!important}
[data-health-card="nutrition"] .health-scroll-list>.health-row label{flex:1}