/* Recipe Hub watch mock — app-specific styles (on top of kit/watch-kit.css). */
.rh-check { width: 1.45em; height: 1.45em; border-radius: 50%; border: 0.11em solid rgba(235,235,245,.45); display: grid; place-items: center; flex: none; transition: background .15s, border-color .15s; }
.rh-check.on { background: #30D158; border-color: #30D158; color: #000; }
.rh-check .ic { width: 0.9em; height: 0.9em; stroke-width: 3.2; }
.rh-item.done .wk-row-title { text-decoration: line-through; color: rgba(235,235,245,.55); }
.rh-ing .wk-row-title { white-space: normal; font-size: 0.92em; }
.rh-empty { color: rgba(235,235,245,.6); padding: 0.4em 0.7em; }
.rh-dot { width: 0.62em; height: 0.62em; border-radius: 50%; flex: none; margin: 0 0.2em; }
.rh-wrap .wk-row-title { white-space: normal; line-height: 1.15; }
.rh-donebtns .wk-pill { white-space: nowrap; padding-left: 0.5em; padding-right: 0.5em; }
.rh-emoji { font-size: 1.45em; width: 1.3em; text-align: center; flex: none; }

/* timers */
.rh-platter { background: #222224; border-radius: 0.78em; padding: 0.15em 0; margin-bottom: 0.55em; }
.rh-trow { display: flex; align-items: center; padding: 0 0.25em 0 0; }
.rh-trow + .rh-trow { border-top: 1px solid rgba(255,255,255,.08); }
.rh-tmain { flex: 1; display: flex; align-items: center; gap: 0.55em; padding: 0.42em 0.6em; min-height: 3em; min-width: 0; }
.rh-tmain:active { opacity: .7; }
.rh-tname { display: flex; flex-direction: column; min-width: 0; }
.rh-tname span { font-size: 0.82em; color: rgba(235,235,245,.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rh-tname b { font-size: 1.2em; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.1; }
.rh-tname i { font-style: normal; font-size: 0.55em; color: rgba(235,235,245,.55); font-weight: 500; }
.rh-tx { width: 2.3em; height: 2.3em; display: grid; place-items: center; flex: none; }
.rh-tx .ic { width: 1.25em; height: 1.25em; padding: 0.25em; border-radius: 50%; background: rgba(255,255,255,.2); color: #000; stroke-width: 3.2; }
.rh-presets { display: grid; grid-template-columns: 1fr 1fr; gap: 0.35em; margin-bottom: 0.35em; }
.rh-preset { margin: 0; min-height: 2.9em; gap: 0.15em; align-items: baseline; }
.rh-preset b { font-size: 1.2em; }
.rh-preset small { font-size: 0.82em; font-weight: 500; }
.rh-custom { color: #fff; }
.rh-custom .ic { color: #0A84FF; }

.rh-big { display: flex; flex-direction: column; align-items: center; height: 100%; padding: 0.1em 0 0.4em; }
.rh-bigring { position: relative; width: 6.8em; height: 6.8em; }
.rh-bigring .wk-ring { width: 100%; height: 100%; }
.rh-bigtxt { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.rh-bigtxt b { font-size: 1.75em; font-weight: 600; font-variant-numeric: tabular-nums; }
.rh-bigtxt span { font-size: 0.78em; color: rgba(235,235,245,.6); }
.rh-bigbtns { display: flex; gap: 1.6em; margin-top: auto; }

/* custom timer */
.rh-custombox { padding: 0 0.3em; display: flex; flex-direction: column; gap: 0.32em; height: 100%; }
.rh-picker { display: flex; justify-content: space-between; align-items: baseline; padding: 0.35em 0.7em; border-radius: 0.6em; background: #222224; box-shadow: inset 0 0 0 0.1em transparent; width: 100%; }
.rh-picker.focus { box-shadow: inset 0 0 0 0.12em #30D158; }
.rh-picker small { font-size: 0.75em; color: rgba(235,235,245,.6); }
.rh-picker b { font-size: 1.12em; font-weight: 600; font-variant-numeric: tabular-nums; }
.rh-pickrow { display: flex; gap: 0.32em; }
.rh-steprow { display: flex; justify-content: space-between; align-items: center; }
.rh-hint { font-size: 0.7em; color: rgba(235,235,245,.5); }
.rh-custombox .wk-pill { margin-top: auto; margin-bottom: 0.5em; }
.rh-disabled { opacity: .35; pointer-events: none; }

/* done ring */
.rh-done { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0.8em 0.7em 0.6em; background: rgba(0,0,0,.94); gap: 0.12em; }
.rh-donering { position: relative; width: 4.4em; height: 4.4em; display: grid; place-items: center; margin-bottom: 0.25em; }
.rh-donering .wk-ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.rh-bell { color: #FF9F0A; font-size: 2em; animation: rh-pulse .9s ease-in-out infinite alternate; }
@keyframes rh-pulse { from { transform: scale(.88) rotate(-8deg); } to { transform: scale(1.12) rotate(8deg); } }
.rh-done > b { font-size: 1.2em; font-weight: 600; }
.rh-done > small { font-size: 0.82em; color: rgba(235,235,245,.6); }
.rh-donebtns { display: flex; gap: 0.35em; width: 100%; margin-top: auto; }
.rh-donebtns .wk-pill { margin: 0; }

/* recipe + cook mode */
.rh-hero { display: flex; flex-direction: column; align-items: center; text-align: center; margin: 0 0.4em 0.5em; }
.rh-hero span { font-size: 2.2em; line-height: 1.1; }
.rh-hero b { font-size: 1.1em; font-weight: 600; }
.rh-hero small { font-size: 0.8em; color: rgba(235,235,245,.6); }
.rh-stephead { font-size: 0.82em; font-weight: 600; color: #FF9F0A; margin: 0 0.6em 0.3em; }
.rh-progress { height: 0.22em; border-radius: 1em; background: rgba(255,255,255,.15); margin: 0 0.6em 0.5em; overflow: hidden; }
.rh-progress i { display: block; height: 100%; background: #FF9F0A; border-radius: 1em; transition: width .25s; }
.rh-steptext { margin: 0 0.55em; font-weight: 600; line-height: 1.18; }
.rh-l { font-size: 1.42em; }
.rh-m { font-size: 1.18em; }
.rh-s { font-size: 0.98em; font-weight: 500; }
.rh-off { opacity: .3; }
.rh-steptimer { display: flex; align-items: center; gap: 0.25em; height: 2.6em; padding: 0 0.85em; border-radius: 999px; background: color-mix(in srgb, #FF9F0A 26%, #000); color: #FF9F0A; font-weight: 600; }
.rh-steptimer .ic { width: 1.1em; height: 1.1em; }
.rh-toast { margin: 0.6em 0.5em 0; padding: 0.35em 0.6em; border-radius: 0.6em; background: color-mix(in srgb, #30D158 22%, #000); color: #30D158; font-size: 0.8em; font-weight: 600; }
.rh-toast .ic { stroke-width: 3; }