/* The phone-time estimator, shared by the features page and the call-flow page. */
@layer components {
  .calculator-section { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
  .calculator-section > * { min-width: 0; }
  .section-description { color: var(--text); font-size: 15px; line-height: 1.6; }

  .capacity-controls, .capacity-result { padding: clamp(18px, 2.4vw, 28px); border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); }
  .capacity-result { background: var(--bg-soft); }
  .calculator-inputs { margin-top: var(--space-3); }

  .range-field { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-2) var(--space-3); margin-top: var(--space-5); min-width: 0; }
  .range-field > label { color: var(--ink); font-size: var(--fs-sm); font-weight: 700; }
  .range-value { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: var(--fs-xs); }
  .range-value input { width: 80px; min-height: var(--tap); padding: 8px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--bg); color: var(--ink); text-align: center; }
  .calculator-inputs .coverage-field { grid-template-columns: minmax(0, 1fr); }
  .calculator-inputs .range-field select,
  .calculator-inputs .range-field > input[type="number"] { width: 100%; min-width: 0; min-height: 48px; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--bg); color: var(--ink); }
  .range-field input[type="range"] { grid-column: 1 / -1; width: 100%; height: var(--tap); margin: 0; accent-color: var(--secondary); cursor: pointer; }
  .calculator-inputs .note { margin-top: var(--space-3); font-size: var(--fs-xs); }

  .calculator-assumptions { margin-top: var(--space-4); font-size: var(--fs-sm); }
  .calculator-assumptions summary { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--secondary); font-weight: 700; cursor: pointer; }
  .calculator-assumptions > div { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-top: var(--space-2); }
  .calculator-assumptions label { display: grid; gap: 6px; color: var(--ink); font-weight: 700; }
  .calculator-assumptions input { width: 100%; min-height: var(--tap); padding: 8px 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--bg); color: var(--ink); font-weight: 400; }

  /* Optional salary-and-super comparison. */
  .estimator-staffing { min-width: 0; margin: var(--space-5) 0; padding: var(--space-4) var(--space-4) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius); }
  .estimator-staffing legend { padding: 0 6px; color: var(--ink); font-size: 15px; font-weight: 700; }
  .estimator-staff-toggle { display: flex; align-items: center; gap: 10px; min-height: var(--tap); color: var(--ink); font-size: var(--fs-sm); font-weight: 700; cursor: pointer; }
  .estimator-staff-toggle input { width: 20px; height: 20px; flex: none; accent-color: var(--secondary); }
  .estimator-staff-inputs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4); margin-top: var(--space-4); }
  .estimator-staff-inputs label, .estimator-quote { display: grid; gap: 8px; min-width: 0; color: var(--ink); font-size: var(--fs-sm); font-weight: 700; }
  .estimator-staff-inputs span { color: var(--muted); font-size: var(--fs-xs); font-weight: 400; line-height: 1.5; }
  .estimator-quote { margin-top: var(--space-4); }
  .estimator-staff-inputs input, .estimator-quote input { width: 100%; min-width: 0; min-height: 48px; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--bg); color: var(--ink); font-weight: 400; }
  .estimator-staff-results { margin-bottom: var(--space-5); padding-bottom: var(--space-5); border-bottom: 1px solid var(--border); }
  .estimator-staff-results h3 { margin: 0 0 var(--space-4); font-size: var(--fs-md); }
  .estimator-money-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4); margin: 0; }
  .estimator-money-grid dt { color: var(--muted); font-size: var(--fs-xs); line-height: 1.5; }
  .estimator-money-grid dd { margin: 4px 0 0; color: var(--ink); font-size: var(--fs-lg); font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; }
  .estimator-net { grid-column: 1 / -1; }

  /* Results */
  .capacity-result > .eyebrow { margin-bottom: var(--space-4); }
  .capacity-chart { display: grid; gap: var(--space-4); }
  .capacity-bar-row > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: 6px; }
  .capacity-bar-row span { color: var(--ink); font-size: var(--fs-sm); font-weight: 700; }
  .capacity-bar-row strong { color: var(--ink); font-size: var(--fs-md); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .capacity-track { height: 14px; overflow: hidden; border-radius: var(--radius-pill); background: #dfe7ec; }
  .capacity-track > span { display: block; height: 100%; border-radius: var(--radius-pill); transition: width .25s ease-out; }
  .capacity-bar-manual { background: #7b8894; }
  .capacity-bar-assisted { background: var(--secondary); }
  .capacity-gain { margin-top: var(--space-5); padding-left: var(--space-4); border-left: 4px solid var(--secondary); }
  .capacity-gain > span, .capacity-gain small { display: block; color: var(--muted); font-size: var(--fs-xs); }
  .capacity-gain strong { display: block; margin: 2px 0; color: var(--ink); font-size: 28px; line-height: 1.25; letter-spacing: -.02em; }
  .capacity-gain output { font: inherit; }
  .capacity-fte { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-4); padding: 14px 16px; border-radius: var(--radius-sm); background: var(--ink); color: #fff; }
  .capacity-fte span { color: #cfd8e3; font-size: var(--fs-xs); }
  .capacity-fte strong { color: #fff; font-size: var(--fs-lg); text-align: right; }
  #calculation-detail { margin-top: var(--space-4); color: var(--muted); font-size: var(--fs-xs); line-height: 1.5; }
  .capacity-result .note { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border); font-size: var(--fs-xs); }
  .hours-value { display: flex; align-items: baseline; gap: var(--space-3); margin-top: var(--space-5); }
  .hours-value output { color: var(--ink); font-size: clamp(56px, 8vw, 88px); font-weight: 700; line-height: 1.1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
  .hours-value span { color: var(--muted); font-size: var(--fs-sm); }

  @media (max-width: 850px) {
    .calculator-section { grid-template-columns: 1fr; }
  }
  @media (max-width: 480px) {
    .estimator-staff-inputs, .estimator-money-grid, .calculator-assumptions > div { grid-template-columns: minmax(0, 1fr); }
  }
  @media (prefers-reduced-motion: reduce) { .capacity-track > span { transition: none; } }
}