/* plan.css — Diet planner page */
.plan-section { margin-block: var(--s-6); }
.plan-section > h2 { font-size: var(--step-2); }
section.plan-section:not(.card) { padding: 0; }
.stack > * + * { margin-top: var(--stack, var(--s-4)); }

/* target */
.target-input { display: flex; align-items: center; gap: var(--s-4); }
.target-input .slider { flex: 1; }
.target-out { font-family: var(--font-display); font-weight: 600; font-size: var(--step-2); min-width: 7.5ch; text-align: right; }
.target-sentence { margin: 0; font-size: var(--step-1); }
.tag { display: inline-block; font-size: .7rem; line-height: 1.5; padding: 0 .45rem; margin-left: .3rem; border-radius: var(--r-pill); background: var(--mustard-tint); border: 1px solid var(--mustard); color: var(--ink); cursor: help; white-space: nowrap; }

/* comparison scale (wide) */
.scale-wrap { --lane-h: 2.9rem; margin-top: var(--s-4); }
.scale { display: block; padding: 0 3.5rem; }
.scale__half { position: relative; }
.scale__half--up { height: calc(var(--up) * var(--lane-h)); }
.scale__half--down { height: calc(var(--down) * var(--lane-h)); }
.scale__marker { position: absolute; left: var(--at); width: 0; display: flex; flex-direction: column; align-items: center; }
.scale__marker.is-up { bottom: 0; height: calc((var(--lane) + 1) * var(--lane-h)); }
.scale__marker.is-down { top: 0; height: calc((var(--lane) + 1) * var(--lane-h)); flex-direction: column-reverse; }
.scale__label { width: max-content; max-width: 9rem; height: calc(var(--lane-h) - .5rem); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-size: .82rem; line-height: 1.2; }
.scale__marker.is-up .scale__label { justify-content: flex-start; }
.scale__marker.is-down .scale__label { justify-content: flex-end; }
.scale__name { font-weight: 700; white-space: nowrap; }
.scale__val { color: var(--ink-soft); font-size: .78rem; }
.scale__stem { flex: 1; width: 1px; background: var(--line); min-height: .3rem; }
.scale__axis { position: relative; height: 4.6rem; }
.scale__track { position: absolute; left: 0; right: 0; top: .9rem; height: 12px; border-radius: 6px; background: var(--paper-deep); box-shadow: inset 0 1px 2px rgba(80,55,20,.18); overflow: hidden; }
.scale__fill { position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--leaf); }
.scale__dot { position: absolute; top: calc(.9rem + 6px); left: var(--at); width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--ink); }
.scale__tick { position: absolute; top: 1.9rem; left: var(--at); transform: translateX(-50%); font-size: .72rem; color: var(--ink-soft); }
.scale__pin { position: absolute; left: var(--at); top: calc(.9rem + 6px); transform: translate(-50%, -50%); width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%; background: var(--glaze); border: 3px solid var(--tomato); box-shadow: var(--shadow-2); font-size: 1rem; z-index: 2; }
.scale__pin--eff { border-color: var(--mustard); top: 3.4rem; }
.scale__pin--day { border-color: var(--leaf-deep); top: 3.4rem; }
.scale__legend { margin-top: var(--s-3); }
.scale-list { display: none; list-style: none; margin: 0; padding: 0; }
.scale-list__row { display: grid; grid-template-columns: 1fr auto; gap: 0 var(--s-3); padding: .45rem 0; border-bottom: 1px dashed var(--line); }
.scale-list__bar { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--paper-deep); overflow: hidden; margin-top: .25rem; }
.scale-list__bar span { display: block; height: 100%; width: var(--w); background: var(--ink-soft); }
.scale-list__row.is-you { background: var(--mustard-tint); border-radius: var(--r-sm); padding-inline: .5rem; font-weight: 700; }
.scale-list__row.is-you .scale-list__bar span { background: var(--tomato); }
@media (max-width: 640px) {
  .scale { display: none; }
  .scale-list { display: block; }
  .scale-wrap { margin-top: var(--s-3); }
}

/* day builder */
.day-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--s-5); align-items: start; }
.meals { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: var(--s-4); }
.meal { padding: var(--s-4); transition: box-shadow .15s, border-color .15s, transform .15s; }
.meal.is-active { border-color: var(--leaf); box-shadow: 0 0 0 2px var(--leaf-tint), var(--shadow-1); }
.meal.is-drag-over { background: var(--leaf-tint); border-color: var(--leaf); transform: scale(1.01); }
.meal__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); }
.meal__head h3 { margin: 0; font-size: var(--step-1); }
.meal__sub { font-weight: 700; }
.meal__empty { padding: var(--s-4); border: 2px dashed var(--line); border-radius: var(--r-md); text-align: center; margin-block: var(--s-3); }
.meal__add { margin-top: var(--s-3); }
.items { list-style: none; margin: var(--s-3) 0 0; padding: 0; }
.item { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "e n r" "e s k"; gap: .1rem var(--s-3); align-items: center; padding: .55rem 0; border-top: 1px dashed var(--line); }
.item:first-child { border-top: 0; }
.item__emoji { grid-area: e; font-size: 1.6rem; }
.item__name { grid-area: n; display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.item__name > span:first-child { overflow-wrap: anywhere; }
.item .stepper { grid-area: s; justify-self: start; }
.item__kg { grid-area: k; justify-self: end; font-weight: 700; font-size: .9rem; white-space: nowrap; }
.item > .btn { grid-area: r; justify-self: end; }
.shelf-list { display: grid; gap: var(--s-2); }
.shelf-plate { display: grid; grid-template-columns: auto 1fr auto auto; gap: var(--s-2); align-items: center; padding: .5rem .6rem; border: 2px solid var(--line); border-radius: var(--r-md); background: var(--paper); cursor: grab; }
.shelf-plate .btn { grid-column: 1 / -1; justify-self: start; }
.shelf-plate__name { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 860px) {
  .day-grid { grid-template-columns: 1fr; }
}

/* totals */
.total__top { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.total__num { font-family: var(--font-display); font-weight: 700; font-size: var(--step-5); line-height: 1; }
.total__grade { display: flex; align-items: center; gap: var(--s-3); }
.msg { margin: 0; font-weight: 700; }
.msg--ok { color: var(--leaf-deep); }
.msg--over { color: var(--tomato-deep); }
.msg--note { background: var(--mustard-tint); padding: .6rem .8rem; border-radius: var(--r-md); font-weight: 400; }
.contrib, .hints { margin: 0; padding-left: 1.3rem; }
.contrib li, .hints li { margin-block: .25rem; }

/* adherence */
.adh-sentence { font-size: var(--step-1); line-height: 2.3; margin: 0; }
.adh-num { display: inline-block; width: 5.2rem; text-align: center; }
.adh-select { display: inline-block; width: auto; max-width: 100%; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--s-3); margin-block: var(--s-3); }
.kpi { background: var(--paper); border-radius: var(--r-md); padding: var(--s-3) var(--s-4); }
.kpi__num { font-family: var(--font-display); font-weight: 700; font-size: var(--step-4); line-height: 1.1; }
.kpi__verdict { font-family: var(--font-display); font-weight: 600; font-size: var(--step-2); }
.maths { background: var(--mustard-tint); border-radius: var(--r-md); padding: var(--s-3) var(--s-4); }
.maths summary { cursor: pointer; font-weight: 700; }
.maths__line { font-family: ui-monospace, Menlo, monospace; font-size: .92rem; margin: var(--s-2) 0 0; overflow-wrap: anywhere; }

/* wrap chip rows instead of horizontal scrolling */
#presets, #meal-tabs { flex-wrap: wrap; overflow: visible; }

/* ---------- monthly builder ---------- */
.start-row { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.start-row .chip-row { flex-wrap: wrap; overflow: visible; }
.summary { position: sticky; top: 4.5rem; z-index: 20; padding: var(--s-3) var(--s-4); box-shadow: var(--shadow-2); }
.summary__main { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.summary__num { font-family: var(--font-display); font-weight: 700; font-size: var(--step-3); line-height: 1; }
.tierbar { display: flex; height: .6rem; border-radius: var(--r-pill); overflow: hidden; margin: var(--s-2) 0; background: var(--paper-deep); }
.tierbar__seg[data-tier="low"], .tiersplit [data-tier="low"] { --tc: var(--grade-a); }
.tierbar__seg[data-tier="medium"], .tiersplit [data-tier="medium"] { --tc: var(--grade-c); }
.tierbar__seg[data-tier="high"], .tiersplit [data-tier="high"] { --tc: var(--grade-e); }
.tierbar__seg { background: var(--tc); min-width: 0; }
.cov-warn { color: var(--tomato-deep); }
.find-row { display: flex; gap: var(--s-4); align-items: end; flex-wrap: wrap; }
.find-field { flex: 1 1 16rem; margin: 0; }
.check { display: inline-flex; align-items: center; gap: var(--s-2); }
.check input { width: 1.2rem; height: 1.2rem; accent-color: var(--leaf); }
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); align-items: start; }
.tier { padding: var(--s-4); }
.tier__head h3::before { content: ""; display: inline-block; width: .7em; height: .7em; margin-right: .45em; border-radius: 50%; background: var(--tc, var(--line)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tc, var(--line)) 25%, transparent); vertical-align: .05em; }
.tier[data-tier="low"] { --tc: var(--grade-a); }
.tier[data-tier="medium"] { --tc: var(--grade-c); }
.tier[data-tier="high"] { --tc: var(--grade-e); }
.tier__head h3 { margin: 0; font-size: var(--step-1); }
.tier__head p { margin: .1rem 0 0; }
.tier__sum { font-weight: 700; }
.food-list { list-style: none; margin: var(--s-3) 0 0; padding: 0; }
.food-row { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "e n s" "e k k"; gap: 0 var(--s-3); align-items: center; padding: .5rem .4rem; border-top: 1px dashed var(--line); border-radius: var(--r-sm); }
.food-row:first-child { border-top: 0; }
.food-row.has-count { background: var(--leaf-tint); }
.food-row__emoji { grid-area: e; font-size: 1.5rem; }
.food-row__name { grid-area: n; display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.food-row__title { overflow-wrap: anywhere; font-weight: 700; font-size: .95rem; }
.food-row .stepper { grid-area: s; }
.food-row__kg { grid-area: k; justify-self: end; min-height: 1em; }
.food-row .grade { font-size: .7rem; padding: 0 .3rem; min-width: 1.2rem; }
.tier__more { margin-top: var(--s-3); border-top: 1px solid var(--line); padding-top: var(--s-3); }
.tier__more summary { cursor: pointer; font-weight: 700; font-size: .9rem; }
.tier__cat-title { margin: var(--s-3) 0 0; text-transform: uppercase; letter-spacing: .04em; }
.tiersplit { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.tiersplit li { display: grid; grid-template-columns: 10rem 1fr 11rem; gap: var(--s-3); align-items: center; }
.tiersplit .bar { --bar-color: var(--tc); }
.shelf-plate { grid-template-columns: auto 1fr auto auto; cursor: default; }
.shelf-plate .btn { grid-column: auto; }
.shelf-times { width: 4rem; display: inline-block; text-align: center; padding: .25rem .4rem; }
.shelf-plate__times { display: inline-flex; align-items: center; gap: var(--s-2); white-space: nowrap; }
@media (max-width: 960px) {
  .tiers { grid-template-columns: 1fr; }
  .tiersplit li { grid-template-columns: 1fr; gap: var(--s-1); }
}
@media (max-width: 640px) {
  .summary { top: 4rem; }
  .shelf-plate { grid-template-columns: auto 1fr; }
  .shelf-plate__times, .shelf-plate .btn { grid-column: 2; justify-self: start; }
}
@media (max-width: 640px) {
  .summary { padding: var(--s-2) var(--s-3); }
  .summary__main { gap: var(--s-2); flex-wrap: nowrap; }
  .summary__main > div { flex: none; }
  .summary__num { font-size: var(--step-2); }
  .summary__unit { font-size: .75rem; }
  .summary .grade--lg { min-width: 1.8rem; height: 1.8rem; font-size: 1rem; }
  .summary .msg { font-size: .8rem; line-height: 1.2; }
  .summary p.small { display: none; }
  .tierbar { margin-bottom: 0; }
}

/* ================= polish pass: tactile motion, a11y, selection ================= */

/* PL-4: the readable list stays in the accessibility tree on wide screens (visually hidden there) */
@media (min-width: 641px) {
  .scale-list { display: block; position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.scale__caveats { margin: var(--s-2) 0 0; padding-left: 1.1rem; }
.scale__caveats li { margin-block: .15rem; }
.tag { cursor: default; }

/* PL-8: stack the big output above the slider on narrow screens */
@media (max-width: 30rem) {
  .target-input { flex-wrap: wrap; }
  .target-input .slider { flex: 1 1 100%; order: 2; }
  .target-out { text-align: left; order: 1; }
}

/* aria-disabled steppers keep focus, so style them like :disabled */
.stepper__btn[aria-disabled="true"] { opacity: .4; cursor: not-allowed; }
.stepper__btn[aria-disabled="true"]:active { transform: none; }

/* neutral (unreliable) wording */
.msg--note-inline { font-weight: 700; color: var(--ink-soft); font-size: .9rem; }
.summary__sub { margin: .15rem 0 0; }
.summary__month { font-weight: 700; color: var(--ink); }
.grade[data-grade=""] { background: var(--paper-deep); color: var(--ink-soft); }
.meter[data-grade=""] { --meter-color: var(--ink-soft); }
.tip { display: grid; grid-template-columns: auto 1fr; gap: var(--s-3); padding: var(--s-3) var(--s-4); background: var(--mustard-tint); border-radius: var(--r-md); margin-top: var(--s-2); }
.tip p { margin: .25rem 0; }

/* tactile: counter ticks, rows settle into their column, pin swings, celebration */
.stepper__value { display: inline-block; min-width: 2.2ch; text-align: center; }
.stepper__value.is-tick-up { animation: tick-up .32s var(--ease-bounce, cubic-bezier(.34, 1.56, .64, 1)); }
.stepper__value.is-tick-down { animation: tick-down .28s var(--ease-out, ease-out); }
@keyframes tick-up { from { transform: translateY(.9em) scale(.8); opacity: 0; } 60% { transform: translateY(-.15em) scale(1.12); opacity: 1; } }
@keyframes tick-down { from { transform: translateY(-.9em) scale(.8); opacity: 0; } 60% { transform: translateY(.1em) scale(1.05); opacity: 1; } }
.food-row.is-settle { animation: row-settle .5s var(--ease-bounce, cubic-bezier(.34, 1.56, .64, 1)); }
@keyframes row-settle { 0% { transform: translateY(-18px) scale(1.04); box-shadow: var(--shadow-2); } 55% { transform: translateY(3px) scale(.99); } 100% { transform: none; } }
.scale__pin.is-swinging { animation: pin-swing .9s ease-out; transform-origin: 50% -30%; }
@keyframes pin-swing { 0% { rotate: -32deg; } 25% { rotate: 24deg; } 50% { rotate: -14deg; } 75% { rotate: 7deg; } 100% { rotate: 0deg; } }
.summary { position: sticky; overflow: visible; }
.summary.is-celebrating { animation: glow 1.4s ease-out; }
@keyframes glow { 0% { box-shadow: 0 0 0 0 var(--leaf); } 30% { box-shadow: 0 0 0 10px var(--leaf-tint), var(--shadow-3); } 100% { box-shadow: var(--shadow-2); } }
.confetti { position: absolute; left: 3rem; top: 1.5rem; font-size: 1.3rem; pointer-events: none; animation: burst 1.2s ease-out forwards; z-index: 5; }
@keyframes burst { 0% { transform: translate(0, 0) scale(.4); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .stepper__value, .food-row.is-settle, .scale__pin.is-swinging, .confetti { animation: none !important; }
  .summary.is-celebrating { animation: none; outline: 3px solid var(--leaf); outline-offset: 2px; }
}

/* selection: chrome and controls aren't selectable; sentences/figures stay selectable (base.css policy) */
.tiers, .tier, .food-row, .summary, .kpi, .kpis, .scale-wrap, .scale, .scale-list, .start-row, .shelf-plate, .tierbar,
.tag, .meter, .stepper, .target-out, .find-row label, .check, .tiersplit li > span { -webkit-user-select: none; user-select: none; }
.tier summary, .tier__cat-title { -webkit-user-select: none; user-select: none; }
.food-row__title, .food-row__meta { -webkit-user-select: none; user-select: none; }
.tip, .tip *, .scale__caveats, .scale__caveats * { -webkit-user-select: text; user-select: text; }