/* ── Counter tool — a sibling of the app's measurement screen ──
   Shared by every language variant of the online-breath-counter page. */
.counter-section { max-width: 560px; margin: 0 auto; padding: 28px 16px 8px; text-align: center; }
.counter-section h1 { font-size: 2rem; line-height: 1.2; margin-bottom: 8px; }
.counter-trust { color: var(--text-body); margin-bottom: 20px; }

.bpm-card {
    position: relative;
    background: #F8F2FA;            /* the app's pale-lavender field */
    color: #2B2831;                  /* the app's near-black ink */
    border-radius: 24px;
    box-shadow: 0 4px 24px rgba(45, 34, 69, 0.10);
    padding: 14px 20px 28px;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-user-select: none; user-select: none;
    -webkit-tap-highlight-color: transparent;
    overflow: hidden;
}
.bpm-topbar { display: flex; justify-content: space-between; align-items: center; min-height: 36px; }
.bpm-tip { flex: 1; text-align: center; font-size: 1.05rem; color: #2B2831; transition: opacity 0.35s; }
.bpm-side { width: 72px; flex: none; }
.bpm-stop {
    font: inherit; font-size: 0.95rem; font-weight: 500;
    border: none; background: none; color: #2B2831; cursor: pointer;
    visibility: hidden; display: inline-flex; align-items: center;
    justify-content: flex-end; gap: 4px; padding: 6px 8px; width: 72px; flex: none;
}
.bpm-stop svg { width: 20px; height: 20px; }
.measuring .bpm-stop { visibility: visible; }

.bpm-label { font-size: 1.05rem; margin-top: 10px; color: #2B2831; }
.bpm-timer {
    font-family: 'Roboto Mono', monospace; font-variant-numeric: tabular-nums;
    font-size: clamp(3.2rem, 16vw, 4.6rem); line-height: 1.15; white-space: pre;
}
.bpm-row { display: flex; justify-content: space-around; margin-top: 6px; }
.bpm-cell { flex: 1; }
.bpm-value {
    font-family: 'Roboto Mono', monospace; font-variant-numeric: tabular-nums;
    font-size: clamp(2.6rem, 13vw, 3.8rem); line-height: 1.15;
    display: inline-block;
}
.bpm-value.bump { animation: bump 0.25s ease-out; }
@keyframes bump { 0% { transform: scale(1.18); } 100% { transform: scale(1); } }

.bpm-circle-wrap { height: 190px; margin-top: 18px; display: flex; align-items: center; justify-content: center; }
.bpm-circle { width: 170px; height: 170px; will-change: transform; }
.bpm-circle svg { width: 100%; height: 100%; display: block; }
.bpm-ring { transform: rotate(-90deg); transform-origin: 50% 50%; }
.bpm-restart { display: none; }
.finished .bpm-ring { display: none; }
.finished .bpm-restart { display: block; }

.counter-result { font-size: 1.9rem; font-weight: 700; margin: 20px 0 2px; min-height: 1em; }
.counter-result-sub { color: var(--text-body); }
.counter-nudge { color: var(--text-body); margin-top: 6px; }
.counter-disclaimer { color: var(--text-light); font-size: 0.85rem; margin-top: 16px; }