/* Calorie calculator */
.calcwrap{display:grid;gap:24px;padding:34px 0 10px}
@media(min-width:960px){.calcwrap{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:start}.cres{position:sticky;top:84px;max-height:calc(100vh - 104px);overflow-y:auto;overscroll-behavior:contain}}
.cform,.cres{background:var(--iron);border:1px solid var(--line);border-radius:18px;padding:22px}
.cform fieldset{border:0;padding:0;margin:0 0 18px;min-width:0}
.cform legend,.cform .lab{display:block;font-weight:700;font-size:.95rem;margin-bottom:8px;padding:0}
.cform .hint{color:var(--mute);font-size:.85rem;margin-top:6px}
.seg2{display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.seg2 label{flex:1;position:relative}
.seg2 input{position:absolute;opacity:0;inset:0;cursor:pointer;margin:0}
.seg2 span{display:block;text-align:center;padding:10px 8px;color:var(--mute);font-weight:700;font-size:.95rem}
.seg2 input:checked+span{background:var(--btn);color:#fff}
.seg2 input:focus-visible+span{outline:3px solid var(--blue);outline-offset:-3px}
.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px}
.cgrid>div{min-width:0}
.cgrid .full{grid-column:1/3}
.cform label.f{display:flex;flex-direction:column;gap:4px;font-size:.85rem;color:var(--mute)}
.cform input[type=number]{width:100%;background:var(--floor);color:var(--chalk);border:1px solid var(--line);border-radius:10px;padding:11px 12px;font:inherit;font-size:1.05rem}
.cform input[type=number]:focus-visible{outline:3px solid var(--blue);outline-offset:1px}
.pair{display:flex;gap:8px}
.u-imp{display:none}
form[data-units=imperial] .u-imp{display:block}
form[data-units=imperial] .u-met{display:none}
form[data-units=imperial] .pair.u-imp{display:flex}
.acts{display:grid;gap:8px}
.act{position:relative;display:block}
.act input{position:absolute;opacity:0;inset:0;cursor:pointer;margin:0}
.act span{display:block;border:1px solid var(--line);border-radius:12px;padding:10px 14px;background:var(--floor);transition:border-color .15s,background .15s}
.act b{display:block;font-size:.98rem}
.act small{color:var(--mute);font-size:.85rem}
.act input:checked+span{border-color:var(--blue);background:#232c45}
.act input:focus-visible+span{outline:3px solid var(--blue);outline-offset:2px}

/* results */
.cres h2{font-size:1.5rem;margin-bottom:6px}
#r-empty{color:var(--soft);background:var(--floor);border:1px dashed var(--line);border-radius:12px;padding:18px}
.big{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:6px 0 2px}
.big strong{font:800 clamp(3.4rem,10vw,5rem)/1 var(--display);color:#fff}
.big span{color:var(--mute);font-size:1.05rem}
#r-goal{color:var(--soft);margin-bottom:10px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0}
.stats div{background:var(--floor);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.stats small{display:block;color:var(--mute);font-size:.8rem}
.stats b{font-size:1.1rem}
#r-note{background:#2b2a22;border:1px solid #5a5226;border-radius:12px;padding:12px 14px;font-size:.93rem;color:var(--soft)}
.cres h3{font-size:1.25rem;margin:22px 0 8px}
.donutrow{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.donut{width:150px;height:150px;flex:0 0 auto}
.donut circle{fill:none;stroke-width:14;transition:stroke-dasharray .6s ease,stroke-dashoffset .6s ease}
.donut .bg{stroke:var(--floor)}
.legend{flex:1 1 180px;display:grid;gap:8px}
.legend div{display:flex;align-items:center;gap:10px;font-size:.95rem}
.legend i{width:12px;height:12px;border-radius:3px;flex:0 0 auto}
.legend b{margin-left:auto}
.legend small{color:var(--mute)}
.pnote{color:var(--mute);font-size:.88rem;margin-top:10px}
.sugar{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sugar div{background:var(--floor);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.sugar small{display:block;color:var(--mute);font-size:.8rem}
.sugar b{font-size:1.15rem}
#cubes{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 6px}
.cube{width:20px;height:20px;border-radius:5px;border:2px solid var(--blue);background:transparent;display:block}
.cube.lo{background:var(--green);border-color:var(--green)}
.cubekey{color:var(--mute);font-size:.85rem}
.cfine{color:var(--mute);font-size:.85rem;margin-top:18px}

/* explainer below the tool */
.how{padding:30px 0 60px}
.how .prose{max-width:760px}
.faq details{border-bottom:1px solid var(--line);padding:14px 0}
.faq summary{cursor:pointer;font-weight:700;color:var(--chalk)}
.faq details p{margin-top:8px}
@media(max-width:520px){.stats{grid-template-columns:1fr 1fr}.stats div:last-child{grid-column:1/3}}
@media(max-width:520px){.seg2 span{font-size:.86rem;padding:10px 4px}}