/* Food cost calculator (v3.7) */
.calc-shell { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.calc-rows { display: grid; gap: 10px; }
.calc-row { display: grid; grid-template-columns: 1.4fr 1fr .9fr 1fr .8fr 40px; gap: 8px; align-items: end; }
.calc-row label { font-size: .78rem; font-weight: 700; color: var(--text-2); }
.calc-row .cell { display: grid; gap: 4px; }
.calc-row input, .calc-row select, .calc-settings input, .calc-settings select { min-height: 42px; padding: 8px 10px; }
.calc-row .row-cost { min-height: 42px; display: flex; align-items: center; color: var(--text); font-weight: 800; white-space: nowrap; }
.calc-remove { width: 40px; height: 42px; border-radius: 10px; border: 1px solid var(--border); background: transparent; color: var(--text-2); cursor: pointer; font-size: 1.1rem; }
.calc-remove:hover { border-color: var(--danger); color: var(--danger); }
.calc-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.calc-settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.calc-settings .cell { display: grid; gap: 6px; }
.calc-results { position: sticky; top: 96px; }
.calc-metric { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.calc-metric:last-of-type { border-bottom: 0; }
.calc-metric span { color: var(--text-2); }
.calc-metric strong { color: var(--text); font-size: 1.15rem; white-space: nowrap; }
.calc-metric.big strong { font-size: 1.6rem; color: var(--cyan); }
.calc-badge { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: .8rem; font-weight: 800; }
.calc-badge.good { background: rgba(16,185,129,.15); color: var(--success); }
.calc-badge.warn { background: rgba(245,158,11,.15); color: var(--warning); }
.calc-badge.bad { background: rgba(239,68,68,.15); color: var(--danger); }
.calc-note { font-size: .85rem; color: var(--muted); margin-top: 10px; }
.calc-howto ol { padding-inline-start: 20px; display: grid; gap: 8px; }
@media (max-width: 900px) {
  .calc-shell { grid-template-columns: 1fr; }
  .calc-results { position: static; }
  .calc-row { grid-template-columns: 1fr 1fr; padding: 12px; border: 1px solid var(--border); border-radius: 12px; }
  .calc-row .cell-name { grid-column: 1 / -1; }
  .calc-remove { justify-self: end; }
}

.calc-cta { margin-top: 18px; padding: 16px; border-radius: 14px; background: rgba(0,212,255,.08); border: 1px solid rgba(0,212,255,.25); }
.calc-cta p { color: var(--text); margin: 0 0 12px; }