/*
 * Homepage journey preview (Local only): Eat (DESIGN-SPEC §5.4) and its demo (§7). Every stop is printed by the server
 * and :has() shows the checked one, so the demo switches without JavaScript and no number is tweened; only the bars
 * move. Selectors start with .shh.shj; no --sh-*, @import or url(). Container queries: shj-demo (card), shj-eat-do.
 */

/* the section (§5.4.3) */
.shh.shj .shj-grid--eat { display: grid; grid-template-columns: minmax(0, 1fr); }
.shh.shj .shj-eat-do { container: shj-eat-do / inline-size; margin-top: 28px; }
.shh.shj .shj-eat-note { margin-top: 14px; }
/* a <figure>: Elementor resets figure margins at (0,4,1), so this is (0,5,0) */
.shh.shj .shj-sec--eat .shj-grid--eat > .shj-demo, .shh.shj .shj-sec--eat .shj-grid--eat > .shh-plate { margin-top: 28px; }
/* too narrow for the two ghosts side by side (1024-1279): one column of full-width buttons, the primary first */
@container shj-eat-do (max-width: 409.98px) {
	.shh.shj .shj-eat-do .shh-actions--stack { grid-template-columns: minmax(0, 1fr); }
	.shh.shj .shj-eat-do .shh-actions--stack > .shh-btn { justify-self: stretch; }
}
@media (min-width: 1024px) {
	.shh.shj .shj-grid--eat:not(.is-solo) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr; grid-template-areas: "head demo" "do demo"; column-gap: 56px; }
	.shh.shj .shj-grid--eat:not(.is-solo) > .shj-head { grid-area: head; }
	.shh.shj .shj-grid--eat:not(.is-solo) > .shj-eat-do { grid-area: do; align-self: start; }
	.shh.shj .shj-grid--eat > .shj-eat-do { margin-top: 40px; }
	.shh.shj .shj-grid--eat:not(.is-solo) > .shj-demo, .shh.shj .shj-grid--eat:not(.is-solo) > .shh-plate { grid-area: demo; align-self: start; margin-top: var(--shj-node-row); }
}

/* the card (§7.6): plate DNA */
.shh.shj .shj-demo { container: shj-demo / inline-size; position: relative; width: 100%; min-width: 0; padding: clamp(18px, 3vw, 32px); border-radius: 30px; background: #fff; border: 1px solid rgba(61, 148, 66, .16); box-shadow: 0 40px 70px -48px rgba(29, 74, 33, .45); color: var(--shh-copy); }
.shh.shj .shj-demo-head { display: flex; align-items: center; gap: 10px; font: 800 12px/1.25 var(--shh-text); letter-spacing: .11em; text-transform: uppercase; color: var(--shh-ink); }
.shh.shj .shj-demo .shh-plate-title { display: flex; width: fit-content; max-width: 100%; margin-top: 10px; }

/* the sample target: a segmented radio group of the approved chips, never a slider; checked = the Eat text colour */
.shh.shj .shj-demo-targets { min-width: 0; margin: 18px 0 0; padding: 0; border: 0; }
.shh.shj .shj-demo-legend { display: block; margin: 0 0 10px; padding: 0; font: 700 14px/1.2 var(--shh-text); color: var(--shh-ink); }
.shh.shj .shj-demo .shh-chips { align-items: center; gap: 8px; }
.shh.shj .shj-chip > span { padding: 0 14px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.shh.shj .shj-chip:hover input:not(:checked) + span { background: #f4faf2; border-color: #2f7a34; color: var(--shh-ink); white-space: nowrap; }
.shh.shj .shj-chip input:checked + span { background: #2f7a34; border-color: #2f7a34; color: #fff; white-space: nowrap; }
.shh.shj .shj-chip .shj-vh { display: block; min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; transition: none; }
.shh.shj .shj-demo-unit { margin-left: 2px; font: 600 14px/1 var(--shh-text); color: var(--shh-muted); }
.shh.shj .shj-demo-sample { margin-top: 12px; max-width: 64ch; font: 400 13.5px/1.5 var(--shh-text); color: var(--shh-muted); }
/* phones: four equal chips and the unit on one row */
@container shj-demo (max-width: 399.98px) {
	.shh.shj .shj-demo .shh-chips { flex-wrap: nowrap; gap: 6px; }
	.shh.shj .shj-demo .shj-chip { flex: 1 1 0; min-width: 0; }
	.shh.shj .shj-chip > span { width: 100%; justify-content: center; padding: 0 4px; font-size: 14.5px; }
	.shh.shj .shj-demo-unit { flex: none; margin-left: 0; font-size: 13px; }
}

/* the readout: the plate's ring (one per stop, swapped whole) beside the figures when there is room */
.shh.shj .shj-demo-readout { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 16px; margin-top: 24px; }
.shh.shj .shj-demo .shh-plate-ring { width: 140px; }
.shh.shj .shj-demo .shh-plate-centre strong span { margin: 0; font: inherit; letter-spacing: inherit; color: inherit; }
.shh.shj .shj-demo-figs { display: grid; gap: 10px; justify-self: stretch; min-width: 0; }
.shh.shj .shj-demo-sentence { font: 600 15px/1.45 var(--shh-text); color: var(--shh-ink); font-variant-numeric: tabular-nums; }
.shh.shj .shj-cl { white-space: nowrap; }
.shh.shj .shj-demo .shh-plate-macros { font-variant-numeric: tabular-nums; }
.shh.shj .shj-demo-macronote { font: 400 13px/1.45 var(--shh-text); color: var(--shh-muted); }
.shh.shj .shj-demo-sample, .shh.shj .shj-demo-macronote, .shh.shj .shj-demo-foot p { text-wrap: pretty; }
@media (min-width: 768px) { .shh.shj .shj-demo .shh-plate-ring { width: 180px; } }
@container shj-demo (min-width: 420px) {
	.shh.shj .shj-demo-readout { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 26px; }
}

/* the meals: every food, its grams and kcal at the checked stop, and a bar for its portion */
.shh.shj .shj-demo-meals { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; margin-top: 24px; padding-top: 22px; border-top: 1px dashed rgba(61, 148, 66, .25); }
@container shj-demo (min-width: 560px) {
	.shh.shj .shj-demo-meals { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; row-gap: 24px; }
}
.shh.shj .shj-meal { min-width: 0; }
.shh.shj .shj-meal-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 8px; border-bottom: 1px dashed rgba(61, 148, 66, .25); }
.shh.shj .shj-meal-head b { font: 700 12px/1.3 var(--shh-text); letter-spacing: .08em; text-transform: uppercase; color: #2f7a34; }
.shh.shj .shj-meal-head em { font: 650 13.5px/1.3 var(--shh-text); font-style: normal; color: var(--shh-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.shh.shj .shj-foods { display: grid; gap: 2px; margin-top: 4px; }
.shh.shj .shj-food { --g: var(--gdef, 1); position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name vals" "bar bar"; column-gap: 12px; row-gap: 5px; align-items: baseline; padding: 6px 0; }
.shh.shj .shj-food-name { grid-area: name; min-width: 0; font: 500 14.5px/1.3 var(--shh-text); color: var(--shh-ink); }
.shh.shj .shj-food-vals { grid-area: vals; font: 500 13.5px/1.3 var(--shh-text); color: var(--shh-copy); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.shh.shj .shj-bar { grid-area: bar; display: block; height: 4px; border-radius: 4px; background: #e8f2e5; overflow: hidden; }
.shh.shj .shj-bar i { display: block; height: 100%; border-radius: 4px; background: #7dbd62; transform: scaleX(var(--g, 1)); transform-origin: left center; }
/* the locked food: still at every stop, said in words (not a pill), a dashed outline */
.shh.shj .shj-food.is-locked { margin-inline: -8px; padding-inline: 8px; border-radius: 10px; outline: 1.5px dashed rgba(116, 197, 120, .75); outline-offset: 2px; }
.shh.shj .shj-food.is-locked .shj-bar i { background: #2f7a34; }
.shh.shj .shj-food-name .shh-i { width: 15px; height: 15px; margin-right: 6px; vertical-align: -2px; color: #2f7a34; }
.shh.shj .shj-food-tag { margin-left: 2px; font: 700 12.5px/1 var(--shh-text); color: #2f7a34; white-space: nowrap; }
/* 320: the name on its own line, the bar beside the values */
@container shj-demo (max-width: 279.98px) {
	.shh.shj .shj-food { grid-template-areas: "name name" "bar vals"; align-items: center; row-gap: 4px; }
}

/* switching (§7.5): each element shows itself (with its own display) while its stop is checked */
.shh.shj .shj-demo [data-t] { display: none; }
.shh.shj .shj-demo svg[data-t] { --shj-show: block; }
.shh.shj .shj-demo .shh-mac[data-t] { --shj-show: inline-flex; }
@supports selector(:has(*)) {
	.shh.shj .shj-demo:has(input[value="1600"]:checked) [data-t="1600"],
	.shh.shj .shj-demo:has(input[value="1800"]:checked) [data-t="1800"],
	.shh.shj .shj-demo:has(input[value="2000"]:checked) [data-t="2000"],
	.shh.shj .shj-demo:has(input[value="2200"]:checked) [data-t="2200"] { display: var(--shj-show, inline); }
	.shh.shj .shj-demo:has(input[value="1600"]:checked) .shj-food { --g: var(--g1600); }
	.shh.shj .shj-demo:has(input[value="1800"]:checked) .shj-food { --g: var(--g1800); }
	.shh.shj .shj-demo:has(input[value="2000"]:checked) .shj-food { --g: var(--g2000); }
	.shh.shj .shj-demo:has(input[value="2200"]:checked) .shj-food { --g: var(--g2200); }
}
/* no :has(): the default stop (the day as published, bars at --gdef) and no control */
@supports not selector(:has(*)) {
	.shh.shj .shj-demo [data-t].is-default { display: var(--shj-show, inline); }
	.shh.shj .shj-demo-targets { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
	.shh.shj .shj-bar i { transition: transform .45s var(--shh-ease); }
	.shh.shj .shj-food.is-changed::after { content: ""; position: absolute; inset: 0 -8px; z-index: -1; border-radius: 10px; background: #eef7ec; pointer-events: none; animation: shj-flash .9s var(--shh-ease) both; }
}
@keyframes shj-flash { 0% { opacity: 0; } 35% { opacity: .9; } 100% { opacity: 0; } }

/* the foot: the lock, how the stops were made, the facts, the hand-off, the caution, the table */
.shh.shj .shj-demo-foot { display: grid; gap: 10px; margin-top: 24px; padding-top: 20px; border-top: 1px dashed rgba(61, 148, 66, .25); font: 400 13.5px/1.5 var(--shh-text); color: var(--shh-copy); }
.shh.shj .shj-demo-lock { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; font-weight: 600; color: var(--shh-ink); }
.shh.shj .shj-demo-lock .shh-i { width: 16px; height: 16px; margin-top: 2px; color: #2f7a34; }
.shh.shj .shj-demo-foot .shj-can-inline { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 2px; }
.shh.shj .shj-demo-foot .shj-can-inline li { display: inline-flex; align-items: center; gap: 7px; font: 600 14px/1.3 var(--shh-text); color: var(--shh-ink); }
.shh.shj .shj-demo-foot .shj-can-inline .shh-i { width: 18px; height: 18px; margin-top: 0; color: #3d9442; }
.shh.shj .shj-demo-caution { font-size: 13px; color: var(--shh-muted); }
.shh.shj .shj-demo-sum { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; list-style: none; cursor: pointer; font: 700 14.5px/1.25 var(--shh-text); color: var(--shh-ink); }
.shh.shj .shj-demo-sum::-webkit-details-marker { display: none; }
.shh.shj .shj-demo-sum::before { content: ""; flex: none; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid rgba(47, 122, 52, .55); background: linear-gradient(#2f7a34, #2f7a34) center / 9px 1.6px no-repeat, linear-gradient(#2f7a34, #2f7a34) center / 1.6px 9px no-repeat; }
.shh.shj .shj-demo-table[open] > .shj-demo-sum::before { background: linear-gradient(#2f7a34, #2f7a34) center / 9px 1.6px no-repeat; }
.shh.shj .shj-demo-sum:hover { color: #2f7a34; }
.shh.shj .shj-demo-tab { width: 100%; margin: 4px 0 0; border-collapse: collapse; background: transparent; font: 500 13px/1.35 var(--shh-text); color: var(--shh-copy); font-variant-numeric: tabular-nums; }
.shh.shj .shj-demo-tab th, .shh.shj .shj-demo-tab td { padding: 8px 8px 8px 0; border: 0; border-bottom: 1px dashed rgba(61, 148, 66, .25); background: transparent; text-align: left; vertical-align: bottom; line-height: 1.35; }
.shh.shj .shj-demo-tab thead th { font-weight: 700; color: var(--shh-ink); border-bottom: 1px solid rgba(61, 148, 66, .35); }
.shh.shj .shj-demo-tab tbody th { font-weight: 650; color: var(--shh-ink); }

/* the pair (§7.7.1): two real stops, no control, no bars */
.shh.shj .shj-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; margin-top: 22px; padding-top: 22px; border-top: 1px dashed rgba(61, 148, 66, .25); }
@container shj-demo (min-width: 520px) { .shh.shj .shj-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; } }
.shh.shj .shj-pair-col { display: grid; gap: 14px; align-content: start; min-width: 0; }
.shh.shj .shj-pair-k { font: 700 18px/1.2 var(--shh-display); letter-spacing: -.01em; color: var(--shh-ink); }
.shh.shj .shj-demo--pair .shj-food { grid-template-areas: "name vals"; }

/* Windows high contrast: the checked chip keeps a mark when backgrounds are replaced */
@media (forced-colors: active) { .shh.shj .shj-chip input:checked + span { outline: 2px solid; outline-offset: 2px; } }

/* ---------- A3 (owner refinement, 23 Oct): phones (below 768) ----------
   1. The ring sits beside its figures instead of above them.
   2. shj-eat-demo.js folds the meals that do not hold the locked food to their totals (which still change with the
      target) and adds a "Show N foods" toggle; lunch, with the locked food, stays open. Without JavaScript every meal
      stays open. Every number is still the precomputed one. */
@media (max-width: 767px) {
	.shh.shj .shj-demo-readout { grid-template-columns: 92px minmax(0, 1fr); justify-items: stretch; align-items: center; column-gap: 16px; margin-top: 18px; }
	.shh.shj .shj-demo .shh-plate-ring { width: 92px; }
	.shh.shj .shj-demo .shh-plate-centre strong { font-size: 21px; }
	.shh.shj .shj-demo .shh-plate-centre > span { margin-top: 2px; font-size: 11px; }
	.shh.shj .shj-demo-figs { gap: 6px; }
	.shh.shj .shj-demo-sentence { font-size: 14px; }
	.shh.shj .shj-demo-macronote { font-size: 12.5px; }
	.shh.shj .shj-demo-meals { gap: 14px; margin-top: 18px; padding-top: 16px; }
}
.shh.shj .shj-meal-toggle { display: none; }
.shh.shj .shj-demo.is-compact .shj-meal-head { align-items: center; }
.shh.shj .shj-demo.is-compact .shj-meal-head em { margin-left: auto; }
.shh.shj .shj-demo.is-compact .shj-meal-toggle { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; margin: -6px -4px -6px 0; padding: 0 4px; border: 0; border-radius: 8px; background: transparent; color: #2f7a34; font: 650 13px/1 var(--shh-text); white-space: nowrap; cursor: pointer; }
.shh.shj .shj-demo.is-compact .shj-meal-toggle::after { content: ""; width: 7px; height: 7px; margin-top: -3px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.shh.shj .shj-demo.is-compact .shj-meal-toggle[aria-expanded="true"]::after { margin-top: 3px; transform: rotate(-135deg); }
.shh.shj .shj-demo.is-compact .shj-meal-toggle:hover, .shh.shj .shj-demo.is-compact .shj-meal-toggle:focus-visible { background: #eef7ec; color: #1f5c24; white-space: nowrap; }
.shh.shj .shj-demo.is-compact .shj-meal.is-folded .shj-meal-head { padding-bottom: 6px; }
.shh.shj .shj-demo.is-compact .shj-meal.is-folded .shj-foods { display: none; }