/* A calculator box its page's own script shows, hidden without it (products/diet/site/walking-pages.ts links this file on the
   page that has the box; PageSpec.stylesheets). */
.calc { margin: 1rem 0 2rem; padding: 1rem 1.1rem; border-radius: 18px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.calc[hidden] { display: none; }
.calc h2 { margin-top: 0; }
.calc-field { display: grid; gap: .25rem; margin: 0 0 .75rem; }
.calc-field input, .calc-field select { min-height: 44px; font: inherit; padding: .4rem .6rem; border-radius: 10px; border: 1px solid var(--line); background: #fff; color: var(--ink); max-width: 16rem; }
.calc-results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .25rem 1rem; }
.calc-result { margin: 0; }
.calc-result output { font-weight: 600; font-variant-numeric: tabular-nums; }