/* Pricing Simulator — tool-specific styles (Brief §6.10).
   Base components come from site.css; this file only adds layout for the
   input grids, the formula results table, scenarios and tiers.
   Teal rule: teal TEXT uses var(--color-teal-text) (#0F766E, WCAG AA on
   light backgrounds). #14B8A6 is never used for text here, and no white
   text sits on a teal fill anywhere in this tool. */

.ps-grid {
  display: grid;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
@media (min-width: 768px) { .ps-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .ps-grid { grid-template-columns: 1fr 1fr 1fr; } }
.ps-grid .form-field { margin-bottom: 0; }

.ps-mode-fieldset {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  margin: 0 0 var(--space-4);
}
.ps-mode-fieldset legend { font-weight: var(--weight-semibold); padding: 0 var(--space-1); }
.ps-mode-fieldset .checkbox-row { margin-bottom: var(--space-2); }
.ps-mode-fieldset .checkbox-row:last-child { margin-bottom: 0; }
.ps-mode-fieldset input[type="radio"] { width: 20px; height: 20px; min-height: 0; margin-top: 2px; flex: none; }

.ps-results-table .ps-formula {
  color: var(--color-muted);
  font-size: var(--text-sm);
  max-width: 52ch;
}
.ps-results-table .ps-value {
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  text-align: right;
}
.ps-results-table th[scope="row"] { white-space: nowrap; }

.ps-chart-wrap {
  position: relative;
  height: 380px;
  max-height: 65vh;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  background: var(--color-surface);
}
.ps-chart-wrap canvas { max-width: 100%; }

/* Break-even status line carries the key figure as informational text:
   teal-text token (#0F766E), AA on white — not the #14B8A6 fill colour. */
#ps-chart-status { color: var(--color-teal-text, #0F766E); font-weight: var(--weight-medium); }

.ps-scenario-inputs {
  display: grid;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
@media (min-width: 768px) { .ps-scenario-inputs { grid-template-columns: 1fr 1fr 1fr; } }
.ps-scenario-inputs fieldset {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  margin: 0;
}
.ps-scenario-inputs legend { font-weight: var(--weight-semibold); padding: 0 var(--space-1); }
.ps-scenario-inputs label { margin-top: var(--space-2); }
.ps-scenario-inputs input { margin-bottom: var(--space-1); }

.ps-tier-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin-bottom: var(--space-2);
}
.ps-tier-row input { flex: 1 1 140px; width: auto; min-width: 120px; }

@media print {
  .ps-chart-wrap { break-inside: avoid; }
  .ps-results-table .ps-value { white-space: normal; }
}