/* Recipe cost calculator (views/recipe-cost.cjs + client/recipe-cost.js). The page reuses the calculator kit classes
 * (.vt-calc, .vt-calc-grid, .vt-calc-cur, .vt-calc-say, .vt-calc-wide, .vt-calc-sheet) as they are; these rules only
 * add the repeatable ingredient lines. Hairlines are 1px. Every rule is under #visu-tools.vt-recipe-cost. */
#visu-tools.vt-recipe-cost .vt-rc-app { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
#visu-tools.vt-recipe-cost .vt-rc-wide { margin-top: 20px; }
#visu-tools.vt-recipe-cost .vt-rc-set { margin: 0 !important; display: grid; gap: 10px; }
#visu-tools.vt-recipe-cost .vt-rc-set > legend { margin-bottom: 4px; }
#visu-tools.vt-recipe-cost .vt-rc-lines { display: grid; gap: 10px; }
#visu-tools.vt-recipe-cost .vt-rc-line { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--vt-line); border-radius: 14px; background: var(--vt-bg); min-width: 0; }
#visu-tools.vt-recipe-cost .vt-rc-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; }
#visu-tools.vt-recipe-cost .vt-rc-remove { min-height: 46px; padding: 0 2px !important; font-size: 13.5px; color: var(--vt-muted) !important; }
#visu-tools.vt-recipe-cost .vt-rc-remove:hover { color: var(--vt-err) !important; }
#visu-tools.vt-recipe-cost .vt-rc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: start; }
#visu-tools.vt-recipe-cost .vt-rc-line .vt-label { font-size: 13px; font-weight: 600; color: var(--vt-text); }
#visu-tools.vt-recipe-cost .vt-rc-qty { display: flex; gap: 6px; min-width: 0; }
#visu-tools.vt-recipe-cost .vt-rc-qty input { flex: 1 1 0; min-width: 0; width: auto !important; padding: 10px 12px !important; }
#visu-tools.vt-recipe-cost .vt-rc-qty select { flex: 0 0 82px; width: 82px !important; padding: 10px 8px !important; }
#visu-tools.vt-recipe-cost .vt-rc-cost { display: flex; justify-content: flex-end; align-items: baseline; gap: 8px; font-size: 13.5px; color: var(--vt-muted); }
#visu-tools.vt-recipe-cost .vt-rc-cost strong { font-size: 16px; font-weight: 700; color: var(--vt-ink); font-variant-numeric: tabular-nums; }
#visu-tools.vt-recipe-cost .vt-rc-msg { color: var(--vt-err); }
#visu-tools.vt-recipe-cost .vt-rc-msg[hidden] { display: none; }
#visu-tools.vt-recipe-cost .vt-rc-yield { align-items: start; }
#visu-tools.vt-recipe-cost .vt-rc-total :is(th, td) { font-weight: 700; color: var(--vt-ink); background: var(--vt-bg); }
#visu-tools.vt-recipe-cost .vt-recipe .vt-table td:nth-child(2), #visu-tools.vt-recipe-cost .vt-recipe .vt-table td:nth-child(3),
#visu-tools.vt-recipe-cost .vt-recipe .vt-table thead th:nth-child(2), #visu-tools.vt-recipe-cost .vt-recipe .vt-table thead th:nth-child(3) { text-align: left; }
#visu-tools.vt-recipe-cost .vt-recipe .vt-table tbody th { white-space: normal; overflow-wrap: break-word; min-width: 120px; }
/* text breaks anywhere inside #visu-tools: column headers keep their words whole, the table scrolls sideways in its frame */
#visu-tools.vt-recipe-cost .vt-recipe .vt-table thead th { overflow-wrap: normal; }

@media (max-width: 1024px) {
  #visu-tools.vt-recipe-cost .vt-rc-app { grid-template-columns: minmax(0, 1fr); }
  #visu-tools.vt-recipe-cost .vt-recipe .vt-out { position: static; }
}
@media (max-width: 600px) {
  #visu-tools.vt-recipe-cost .vt-rc-line { padding: 12px; }
  #visu-tools.vt-recipe-cost .vt-rc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #visu-tools.vt-recipe-cost .vt-rc-qty input { padding: 10px !important; }
  #visu-tools.vt-recipe-cost .vt-rc-qty select { flex-basis: 70px; width: 70px !important; padding: 10px 4px !important; }
  #visu-tools.vt-recipe-cost .vt-rc-yield { grid-template-columns: minmax(0, 1fr); }
  /* the purchase is already in the form above: on a phone the table keeps ingredient, used, cost and share */
  #visu-tools.vt-recipe-cost .vt-recipe .vt-table :is(td, thead th):nth-child(2) { display: none; }
  #visu-tools.vt-recipe-cost .vt-recipe .vt-table tbody th { min-width: 96px; }
}