/* The missed-calls calculator (public/js/missed-calls.js). Uses base.css
   tokens and its .field / .input styles. Mobile first: one column, three
   columns from 760px. Works at 360px wide. */

.mc {
  background: var(--paper);
  border: var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  display: grid;
  gap: 20px;
  min-width: 0;
}

.mc-form { display: grid; gap: 16px; margin: 0; min-width: 0; }
.mc-field label { font-family: var(--font-mono); font-size: 13px; font-weight: 600; letter-spacing: .02em; }
.mc-input { font-family: var(--font-sans); font-size: 20px; font-weight: 700; }

.mc-prefixed { position: relative; min-width: 0; }
.mc-prefix {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  font-size: 20px; font-weight: 700; color: var(--muted); pointer-events: none;
}
.mc-prefixed .mc-input { padding-left: 30px; }

.mc-result {
  background: var(--ink);
  color: var(--on-ink);
  border-radius: var(--radius);
  padding: 20px;
  display: grid;
  gap: 10px;
  min-width: 0;
}
.mc-lead { font-size: clamp(20px, 5vw, 28px); font-weight: 800; line-height: 1.25; letter-spacing: -.01em; overflow-wrap: anywhere; }
.mc-note { font-size: 16px; color: var(--on-ink-2); }
.mc-note::before {
  content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 8px;
  border-radius: 50%; background: var(--orange); vertical-align: middle;
}

@media (min-width: 760px) {
  .mc { padding: 28px; gap: 24px; }
  .mc-form { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
  .mc-result { padding: 24px 28px; }
}