/* Earnings are an explicitly labelled live estimate, with sufficient backing
   for small white text on the running hero. */
:root {--earnings-size:44px;--earnings-mobile-size:34px}
.timer-earnings {grid-row:4;display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-4) var(--s-8);padding:var(--s-8);border-radius:var(--r-md);background:var(--v2-hero-label-surface);color:var(--v2-control-ink)}
#timerEarningsLabel {font-size:var(--fs-sm)}
#timerEarningsAmount {font-family:UTNum,Poppins,sans-serif;font-size:var(--earnings-size);font-weight:300;font-variant-numeric:tabular-nums;line-height:1.15}
#timerHourlyRate {padding:var(--s-3) var(--s-6);border:1px solid var(--v2-control-border);border-radius:var(--r-pill);font-size:var(--fs-sm)}
#timerEarningsStatus {font-size:var(--fs-base)}
#timerEarningsNote {display:block;flex-basis:100%;font-size:var(--fs-sm)}
#timerEarnings[hidden],#timerEarnings [hidden] {display:none!important}
.app-shell .timer-card .meta-row {grid-row:5}
.app-shell .timer-card .timer-secondary {grid-row:6}
@media(max-width:760px) {#timerEarningsAmount {font-size:var(--earnings-mobile-size)}.timer-earnings {width:100%}}
@media(prefers-reduced-motion:reduce) {.timer-earnings,.timer-earnings * {transition:none!important;animation:none!important}}