/* Calculator pages, generated by tools/food_pages/calculators.py. Loaded after style.css. */
.calc-form { display: grid; gap: 1.1rem; max-width: 36rem; }
.calc-form[hidden], .calc-field[hidden], .calc-results[hidden], .calc-units [hidden], #calc-output[hidden] { display: none; }
.calc-two { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: end; }
.calc-field label { display: block; margin-bottom: .4rem; font-size: .9rem; font-weight: 500; }
.calc-field input, .calc-field select { width: 100%; padding: .7rem .9rem; border: 1px solid #c9d4cc; border-radius: 12px; background: white; color: var(--ink); font: inherit; font-size: 1rem; }
.calc-field input:focus-visible, .calc-field select:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.calc-results { margin: .5rem 0 0; padding: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: white; list-style: none; }
.calc-results button { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; width: 100%; padding: .65rem .9rem; border: 0; border-top: 1px solid var(--line); background: none; color: var(--ink); font: inherit; font-size: .95rem; text-align: left; cursor: pointer; }
.calc-results li:first-child button { border-top: 0; }
.calc-results button:hover, .calc-results button:focus-visible { background: #edf4ef; }
.calc-results span { flex-shrink: 0; color: var(--muted); font-size: .85rem; white-space: nowrap; }
.calc-hint { margin-top: .5rem; color: var(--muted); font-size: .85rem; }
.calc-error { color: #a32a1f; font-size: .9rem; font-weight: 500; }
.calc-preview { min-height: 1.6em; font-weight: 500; }
.calc-button { border: 0; font: inherit; font-size: .95rem; cursor: pointer; }
.calc-link { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-size: .9rem; text-decoration: underline; text-underline-offset: .22em; cursor: pointer; }
#calc-output { margin-top: 2.25rem; }
.calc-tool { margin-bottom: 2.75rem; }
.calc-tool h2 { font-size: clamp(1.6rem, 2.6vw, 2rem); }
/* .report-section a in style.css would paint the button text in the accent color. */
.calc .store-link { color: white; }
.calc-tool h3 { font-size: 1.1rem; margin-top: 2rem; }
.calc-stats { grid-template-columns: repeat(2, 1fr); margin-top: 1rem; }
.calc-stats .stat[hidden] { display: none; }
.calc-units { display: grid; gap: 1rem; max-width: 24rem; margin-top: 1.25rem; }
.calc-check { display: flex; align-items: center; gap: .55rem; font-size: .95rem; cursor: pointer; }
.calc-check input { width: 1.15rem; height: 1.15rem; accent-color: var(--accent); }
/* The hidden heading of the last column is absolute. Without this, a table wider than the screen
   moves the whole page sideways, because the box does not clip that heading. */
#calc-items-box { position: relative; }
.calc-items td:last-child, .calc-items th:last-child { width: 2.4rem; text-align: right; }
.calc-items th[hidden] { display: none; }
.calc-remove { width: 2rem; height: 2rem; border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--ink); font: inherit; line-height: 1; cursor: pointer; }
.calc-remove:hover { border-color: var(--accent); color: var(--accent); }
#calc-clear-row { margin-top: 1rem; }
.calc-zone[data-zone="low"] { box-shadow: inset 0 0 0 2px #2f9e6f; }
.calc-zone[data-zone="medium"] { box-shadow: inset 0 0 0 2px #d98a1f; }
.calc-zone[data-zone="high"] { box-shadow: inset 0 0 0 2px #c8452f; }
@media (max-width: 600px) {
  .calc-two { grid-template-columns: 1fr; }
  .calc-stats { grid-template-columns: 1fr; }
  .calc-stats .stat strong { flex: 0 0 auto; min-width: 6.2rem; }
}