/* Shared action hierarchy. Theme tokens stay identical to the ESP palette. */
button,.button{min-height:46px;border-radius:12px;font-family:Lato,Arial,sans-serif;font-size:14px;font-weight:700;gap:9px}
button .icon,.button .icon,.selected-program-state .icon{width:19px;height:19px}
button:disabled{opacity:1;color:var(--muted);background:var(--alt);border-color:transparent;box-shadow:none;filter:none}
button.primary:disabled{color:var(--muted);background:var(--alt)}
button[aria-busy=true]{cursor:progress}
.action-bar{flex-direction:column;align-items:stretch;gap:6px;padding:16px 0;margin:8px auto 0;min-height:0}
#transfer-status[hidden]{display:none}
.program-toast{position:fixed;z-index:1000;top:calc(18px + env(safe-area-inset-top));left:50%;transform:translate(-50%,-14px);opacity:0;display:flex;align-items:center;gap:12px;width:max-content;max-width:calc(100vw - 32px);padding:14px 20px;border:1px solid var(--line);border-radius:16px;color:var(--text);background:var(--surface);box-shadow:0 10px 36px #0002;font-size:14px;line-height:1.45;pointer-events:none;transition:opacity .22s ease,transform .28s cubic-bezier(.2,.7,.2,1)}
.program-toast[hidden]{display:none}
.program-toast.visible{opacity:1;transform:translate(-50%,0)}
.program-toast-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:22px;height:22px;color:var(--accent);font-size:20px;font-weight:700}
.program-toast[data-state=pending] .program-toast-icon{width:18px;height:18px;border:2px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:program-toast-spin .8s linear infinite}
.program-toast[data-state=error] .program-toast-icon{color:var(--danger)}
@keyframes program-toast-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.program-toast{transition:none}.program-toast-icon{animation:none!important}}
.action-buttons{display:flex;align-items:center;gap:12px;min-height:46px}
.action-buttons>button,.action-buttons>form>button{min-width:136px}
.action-bar[data-state=pending] button[aria-busy=true]{color:var(--accent);border-color:var(--accent);opacity:1}
.action-bar[data-state=success] #program-save{color:var(--accent);background:transparent}
.selected-program-state{display:inline-flex;align-items:center;gap:6px;color:var(--accent);font-size:14px;min-height:46px;padding:0 12px}
.program-more{margin-left:auto;position:relative}
.program-more>summary{display:flex;align-items:center;justify-content:center;list-style:none;width:46px;height:46px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--muted)}
.program-more>summary::-webkit-details-marker{display:none}
.program-more-menu{position:absolute;right:0;bottom:calc(100% + 10px);z-index:20;padding:6px;border:1px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:0 12px 36px #0002;min-width:160px}
.program-more-menu button{width:100%;border:0;background:transparent;justify-content:flex-start}
.program-more-menu button:not(:disabled){color:var(--danger)}
.editor-steps th:nth-child(1){width:8%}.editor-steps th:nth-child(2){width:20%}.editor-steps th:nth-child(3),.editor-steps th:nth-child(4),.editor-steps th:nth-child(5){width:24%}
.editor-steps .field-units{display:block;font-size:10px;font-weight:400;line-height:1.5;margin-top:3px;color:var(--muted)}
.editor-steps input{min-height:44px;border-radius:8px}
.editor-steps td,.editor-steps th{padding:12px 4px}
.recipe-editor-layout{gap:20px}
.action-dialog{width:min(440px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:26px;border:1px solid var(--line);border-radius:18px;color:var(--text);background:var(--surface);box-shadow:0 20px 70px #0005}
.action-dialog::backdrop{background:#0d142169;backdrop-filter:blur(3px)}
.action-dialog h2{margin:0 0 10px;font-size:23px}
.dialog-program-name{font-weight:700;color:var(--text);overflow-wrap:anywhere;margin:0 0 14px}
.action-dialog #delete-program-description{color:var(--muted);font-size:14px;line-height:1.6}
.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:24px}
.dialog-actions button{min-width:115px}
.danger-action{background:var(--danger);border-color:var(--danger);color:#fff}
[data-theme=dark] .danger-action{color:#111318}
.danger-action:hover{background:var(--danger);color:#fff;filter:brightness(.94)}
.recipe-page #content{animation:none}
.settings-page .settings-layout{grid-template-columns:1fr;max-width:680px;gap:30px}
.settings-page .account-card{background:transparent;padding:0 0 14px;border:0;box-shadow:none}
.settings-page .setting-list{border-radius:14px;overflow:hidden}
.settings-page .setting-row,.settings-page .setting summary{min-height:62px}
.settings-page .setting-row.logout{color:var(--muted)}
.instrument{grid-template-areas:'head head' 'read chart' 'metrics chart' 'controls chart' 'warning warning';grid-template-rows:auto auto auto auto auto}
.instrument-head{padding:17px 23px}
.live-summary{gap:16px 12px;padding-top:20px;padding-bottom:16px}
.process-focus .status{margin:7px 0 6px}
.stage-segments{margin-top:13px}
.reading-panel .run-metrics{padding-bottom:14px;border-radius:0}
.instrument .remote-stop{grid-area:controls;display:flex;flex-direction:column;align-items:stretch;gap:8px;margin:0;padding:0 23px 18px;background:var(--instrument-soft);border:0;border-radius:0 0 0 18px;min-width:0}
.instrument .remote-stop[hidden]{display:none}
.remote-stop #stop-open{min-height:46px;color:var(--danger);background:color-mix(in srgb,var(--danger) 9%,var(--surface));border:1px solid color-mix(in srgb,var(--danger) 45%,var(--line));width:100%}
.remote-stop #stop-open:disabled{background:var(--alt);border-color:transparent;color:var(--muted)}
.stop-button .stop-square{width:14px;height:14px;border-radius:3px;background:currentColor;flex-shrink:0}
.remote-stop #stop-state{font-size:11px;line-height:1.5;min-height:0;margin:0;max-width:none}
.remote-stop #stop-state:empty{display:none}
.main-run-chart{align-self:stretch}
@media(min-width:951px){.main-run-chart #program-profile{height:280px;min-height:0;flex:none}}
@media(max-width:1050px){.action-bar{max-width:700px}}
@media(max-width:950px){
 .instrument{grid-template-areas:'head' 'read' 'metrics' 'controls' 'chart' 'warning';grid-template-rows:auto}
 .instrument .remote-stop{border-radius:0;padding:0 23px 16px;flex-direction:row;align-items:center;flex-wrap:wrap}
 .remote-stop #stop-open{width:auto;min-width:155px}
 .remote-stop #stop-state{flex:1;min-width:120px}
}
@media(max-width:700px){
 /* Reserve a real row for navigation: content scrolls above it, never under it. */
 html:has(.signed-in){height:100%}
 body.signed-in{height:100dvh;display:grid;grid-template-rows:62px minmax(0,1fr) auto;overflow:hidden}
 .signed-in .topbar{grid-row:1;grid-column:1;position:relative}
 .signed-in #content{grid-row:2;grid-column:1;min-height:0;overflow-y:auto;overflow-x:hidden;margin:0;padding:14px 16px 24px;animation:none;scroll-padding:16px}
 .signed-in .main-nav{grid-row:3;grid-column:1;position:relative;inset:auto;width:auto;margin:0;padding:5px 12px calc(5px + env(safe-area-inset-bottom));border-radius:0;border:0;border-top:1px solid var(--line);box-shadow:none;transform:none;z-index:30}
 .signed-in .main-nav a{min-height:48px}
 .recipe-page .main-nav{display:none}
 .recipe-page #content{padding-bottom:0;scroll-padding-bottom:100px}
 .recipe-page .action-bar{position:sticky;bottom:0;z-index:25;padding:12px 0 calc(12px + env(safe-area-inset-bottom));margin:12px 0 0;background:var(--bg);border-top:1px solid var(--line);gap:8px}
 .action-buttons{gap:8px}
 .action-buttons>button,.action-buttons>form>button{min-width:0;padding:10px 12px}
 .action-buttons>button{flex:1}
 .action-buttons>form{flex:1}.action-buttons>form>button{width:100%}
 .action-bar .selected-program-state{padding:0 6px}
 .editor-steps td,.editor-steps th{padding:10px 2px}
 .editor-steps th{font-size:10px}
 .editor-steps input{font-size:12px;padding:7px 2px}
 .instrument-head{padding:16px 18px}
 .live-summary{padding:18px;gap:12px;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
 .live-summary .temperature-focus{grid-column:1;grid-row:1}
 .live-summary .temperature{font-size:clamp(38px,12vw,55px);letter-spacing:-2px;white-space:nowrap}
 .live-summary .temperature span{font-size:15px;letter-spacing:0}
 .process-focus{padding-top:0;grid-column:2;grid-row:1;align-self:center}
 .process-focus .stage-caption{font-size:12px}
 .process-focus .status{font-size:26px;letter-spacing:-.5px}
 .process-focus #stage-target{font-size:11px}
 .stage-segments{margin-top:10px;margin-bottom:0}
 .instrument .remote-stop{padding:0 18px 16px}
 .main-run-chart{padding-top:16px}
 .settings-page .settings-layout{gap:24px}
}
@media(prefers-reduced-motion:no-preference){
 .signed-in #content{animation:review-page-enter .24s ease-out both}
 button,.button,.program-more>summary{transition:background-color .2s ease,border-color .2s ease,color .2s ease,box-shadow .2s ease}
 button:not(:disabled):active,.program-more>summary:active{transform:translateY(1px)}
 .program-more-menu{animation:action-menu-enter .16s ease-out}
 .action-dialog[open]{animation:action-menu-enter .2s ease-out}
 @keyframes action-menu-enter{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
 @keyframes review-page-enter{from{opacity:.65}to{opacity:1}}
}