/* /css/recipeTimer.css — scoped recipe toolbar timer */
.recipeTimer { position:relative; display:inline-flex; align-items:center; gap:0; flex-shrink:0; font:inherit; color:inherit; }
.recipeTimer * { box-sizing:border-box; }
.recipeTimerFace { display:flex; align-items:center; gap:9px; padding:5px 11px; min-height:39px; border:1px solid rgba(120,120,120,.35); border-radius:11px 0 0 11px; background:rgba(120,120,120,.08); }
.recipeTimerRing { --timer-progress:100%; width:23px; height:23px; border-radius:50%; background:conic-gradient(#c43b32 var(--timer-progress),rgba(130,130,130,.22) 0); display:grid; place-items:center; transition:background .3s; }
.recipeTimerRing::after { content:''; width:17px; height:17px; border-radius:50%; background:var(--timer-inner, #fff); }
.recipeTimerDisplay { min-width:49px; font-size:15px; font-weight:750; font-variant-numeric:tabular-nums; letter-spacing:.02em; }
.recipeTimer button { cursor:pointer; font:inherit; }
.recipeTimerAction,.recipeTimerMenuButton { min-height:39px; border:1px solid rgba(120,120,120,.35); background:rgba(120,120,120,.08); color:inherit; padding:5px 11px; font-weight:650; }
.recipeTimerAction { border-left:0; }
.recipeTimerMenuButton { border-left:0; border-radius:0 11px 11px 0; font-size:19px; line-height:1; }
.recipeTimerAction:hover,.recipeTimerMenuButton:hover { background:rgba(196,59,50,.13); }
.recipeTimer button:focus-visible,.recipeTimer input:focus-visible { outline:2px solid #c43b32; outline-offset:2px; }
.recipeTimer button:disabled { cursor:not-allowed; opacity:.5; }
.recipeTimer.is-running .recipeTimerRing { animation:recipeTimerPulse 1.8s ease-in-out infinite; }
.recipeTimer.is-finished .recipeTimerFace { border-color:#c43b32; animation:recipeTimerFinish 1s ease-in-out 3; }
.recipeTimerMenu { position:absolute; z-index:9000; top:calc(100% + 8px); left:0; width:min(290px,calc(100vw - 24px)); padding:16px; border:1px solid rgba(120,120,120,.32); border-radius:14px; background:var(--timer-menu-bg,#fff); color:var(--timer-menu-fg,#222); box-shadow:0 18px 45px rgba(0,0,0,.2); }
.recipeTimerMenu[hidden],.recipeTimer [hidden] { display:none!important; }
.recipeTimerMenuTitle { font-size:15px; font-weight:750; margin:0 0 12px; }
.recipeTimerFields { display:flex; align-items:end; gap:8px; margin-bottom:10px; }
.recipeTimerFields label { flex:1; min-width:0; font-size:12px; font-weight:650; }
.recipeTimerFields input { display:block; width:100%; margin-top:5px; padding:8px; border:1px solid #aaa; border-radius:7px; background:inherit; color:inherit; font:inherit; }
.recipeTimerMenu .recipeTimerSet { width:100%; padding:9px; border:0; border-radius:8px; background:#b8322a; color:#fff; font-weight:700; }
.recipeTimerMenu .recipeTimerSecondary { padding:7px 9px; border:1px solid #aaa; border-radius:7px; background:transparent; color:inherit; }
.recipeTimerSuggestion { display:block; margin:12px 0 7px; font-size:12px; opacity:.8; }
.recipeTimerMenuBottom { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:13px; font-size:12px; }
.recipeTimerMenuBottom label { display:flex; align-items:center; gap:5px; }
.recipeTimerStatus { display:block; margin-top:9px; font-size:12px; opacity:.75; }
@keyframes recipeTimerPulse { 50% { filter:brightness(1.35); transform:scale(1.09); } }
@keyframes recipeTimerFinish { 50% { box-shadow:0 0 0 5px rgba(196,59,50,.2); } }
@media (prefers-reduced-motion:reduce) { .recipeTimer * { animation:none!important; transition:none!important; } }
@media (prefers-color-scheme:dark) { .recipeTimer { --timer-inner:#222; --timer-menu-bg:#242424; --timer-menu-fg:#f4f4f4; } }
@media (max-width:650px) { .recipeTimer { max-width:100%; } .recipeTimerFace { padding:5px 7px; gap:5px; } .recipeTimerAction,.recipeTimerMenuButton { padding:5px 8px; } }