/* ==========================================================================
   Payment Benchmark Explorer (/typical*) — page-scoped styles.
   Loaded via meta.styles=['typical'] alongside 'hubs' and 'rx' (reuses their
   bar/table/grid components). Classes prefixed .typical-.
   ========================================================================== */

.typical-calc-field {
  display: flex; align-items: center; gap: 8px;
  background: var(--glass-bg-strong); border: 1px solid var(--glass-edge);
  border-radius: var(--r-md); padding: 4px 4px 4px 16px; max-width: 260px;
  margin: 14px 0 12px;
}
.typical-calc-field span { color: var(--muted); font-weight: 600; }
.typical-calc-field input {
  border: none; background: transparent; box-shadow: none;
  padding: 10px 4px; font-size: 1.08rem; min-height: 44px; width: 100%;
}
.typical-calc-field input:focus-visible { outline: none; }
.typical-calc-field:focus-within { outline: 2px solid var(--accent); border-radius: var(--r-md); }

.typical-result { font-size: 0.98rem; color: var(--ink-soft); margin: 0; }
.typical-result.is-answered { color: var(--ink); font-weight: 600; }