/* timer.css — the kiosk.
 *
 * A tablet on a stand, read from a step or two back. Two panels side by side in
 * landscape — entry on the left, answer on the right — and stacked in that same
 * order on anything narrow, because the order is the reading order.
 *
 * The answer is the biggest thing on the screen by a distance: it is the one
 * number somebody carries across to a timer in the other hand.
 */

.timer {
  display: grid; gap: 16px; grid-template-columns: 1fr;
  max-width: 1100px; width: 100%; margin: 0 auto;
}
@media (min-width: 820px) {
  .timer { grid-template-columns: minmax(320px, 440px) 1fr; align-items: start; }
}

.now-clock { font-weight: 650; font-size: 1.0625rem; color: var(--text-2); }

/* ---------------- entry ---------------- */

.meridiem { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.meridiem-btn {
  justify-content: center; min-height: 52px; font-size: 1.125rem; font-weight: 650;
  touch-action: manipulation; user-select: none; -webkit-user-select: none;
}
.meridiem-btn.is-on { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.meridiem-btn:disabled { opacity: .45; cursor: default; }

/* Clear is not the thing you came to do, so it does not wear the one blue. */
.timer .key-enter {
  background: var(--surface-2); border-color: var(--line-strong); color: var(--text-2);
  font-size: 1.0625rem;
}
.timer .key-enter:active { background: var(--surface-3); }
.timer .key-enter:disabled { color: var(--line-strong); }

/* ---------------- answer ---------------- */

.answer {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 6px 0 16px;
}
.answer-unit {
  background: var(--brand-soft); border: 1px solid var(--brand-line);
  border-radius: var(--radius-lg); padding: 18px 12px 14px;
  display: flex; flex-direction: column; align-items: center;
}
.answer-num {
  font-size: clamp(4rem, 12vw, 8.5rem); line-height: 1; font-weight: 700;
  letter-spacing: -.02em; color: var(--brand);
}
.answer-label {
  margin-top: 6px; font-size: .9375rem; font-weight: 650; color: var(--text-2);
  text-transform: uppercase; letter-spacing: .06em;
}
.answer.is-empty .answer-unit { background: var(--surface-2); border-color: var(--line); }
.answer.is-empty .answer-num { color: var(--line-strong); }

.answer-line { font-size: 1.0625rem; font-weight: 600; margin: 0 0 8px; }
.answer-warn {
  background: var(--attn-soft); border: 1px solid var(--attn-line); color: var(--attn);
  border-radius: var(--radius); padding: 10px 12px; font-weight: 600; margin: 0 0 10px;
}