#runtime-host-dialog{width:min(460px,calc(100vw - 32px));box-sizing:border-box;padding:24px;border:1px solid #dddde3;border-radius:20px;background:#fbfbfd;color:#1d1d1f;box-shadow:0 20px 70px #0002;font-family:inherit}
#runtime-host-dialog::backdrop{background:#0004}
#runtime-host-dialog header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}
#runtime-host-dialog h2{margin:0;font-size:20px;letter-spacing:-.4px}
.runtime-host-close{border:0;background:#ebebef;color:#5c5c63;border-radius:50%;width:32px;height:32px;font-size:24px;line-height:1;cursor:pointer}
.runtime-host-choices{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.runtime-host-choices button{display:flex;flex-direction:column;gap:6px;padding:17px 14px;text-align:left;background:#fff;border:1.5px solid #dcdce3;border-radius:13px;font:inherit;color:inherit;cursor:pointer;min-height:100px}
.runtime-host-choices button[aria-pressed="true"]{border-color:#0071e3;background:#f1f7ff}
.runtime-host-choices strong{font-size:16px}
.runtime-host-choices span{font-size:12px;line-height:1.45;color:#64646d}
.runtime-host-choices button:disabled{opacity:.55;cursor:default}
.runtime-host-note{font-size:13px;line-height:1.55;color:#64646d;margin:16px 0 0;min-height:40px}
.runtime-host-direct{display:block;width:100%;padding:12px;margin-top:15px;border:0;border-radius:10px;background:#0071e3;color:white;font:inherit;font-size:13px;cursor:pointer}
.runtime-host-direct[hidden]{display:none}
#runtime-host-dialog button:focus-visible,#runtime-host-toggle:focus-visible{outline:3px solid #83baff;outline-offset:3px}
@media(max-width:420px){#runtime-host-dialog{padding:20px}.runtime-host-choices{gap:8px}.runtime-host-choices button{padding:14px 11px}}

/* Keep the compute label readable when the other toolbar actions become icons. */
#runtime-host-toggle{width:auto;padding:0 10px;flex:none}
/* An update for Tony is waiting: one accent dot on the button, the reason first in the panel. */
#runtime-host-toggle.update-waiting::before{content:'';display:inline-block;flex:none;width:7px;height:7px;margin-right:7px;border-radius:50%;background:#0071e3;vertical-align:middle}
@media(max-width:640px){.runtime-host-waiting-label{display:none}}
#runtime-host-toggle.update-failed::before{background:#d70015}
.runtime-host-note.runtime-host-waiting{color:#1d1d1f;background:#f1f7ff;border-radius:10px;padding:10px 12px;min-height:0}
.runtime-host-note.runtime-host-failed{color:#8a1c12;background:#fff1ef}
.runtime-host-scope{margin-top:14px;font-size:12px;line-height:1.55;color:#64646d}
.runtime-host-scope summary{cursor:pointer;color:#1d1d1f;font-weight:600;padding:7px 0}
.runtime-host-scope p{margin:8px 0 0}
.runtime-host-scope summary:focus-visible{outline:3px solid #83baff;outline-offset:3px;border-radius:4px}
@media(min-width:641px) and (max-width:1380px){
  .topbar:has(#runtime-host-toggle:not([hidden])) .destination-controls{position:static;transform:none;margin-left:auto;order:2}
  .topbar:has(#runtime-host-toggle:not([hidden])) .top-actions{margin-left:0;order:3}}
@media(min-width:641px) and (max-width:1380px){
  .topbar:has(#runtime-host-toggle:not([hidden])) .top-actions{gap:4px}
  .topbar:has(#runtime-host-toggle:not([hidden])) #phone-toggle,.topbar:has(#runtime-host-toggle:not([hidden])) #details-toggle{width:36px;padding:0;justify-content:center}
  .topbar:has(#runtime-host-toggle:not([hidden])) #phone-toggle>span,.topbar:has(#runtime-host-toggle:not([hidden])) #details-toggle>span,.topbar:has(#runtime-host-toggle:not([hidden])) #help-button{display:none}}
@media(max-width:640px){
  .topbar .top-actions:has(#runtime-host-toggle:not([hidden])){flex:1 0 100%;margin-left:0}
  #runtime-host-toggle{margin-right:auto}}

/* Host switch progress: current step, time left, bar, then every step. */
.runtime-host-progress{margin-top:18px}
.runtime-host-progress[hidden],.runtime-host-note[hidden]{display:none}
.runtime-host-progress-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 12px;font-size:14px}
.runtime-host-progress-head span{font-size:12px;color:#64646d;font-variant-numeric:tabular-nums;white-space:nowrap}
.runtime-host-bar{height:6px;margin-top:10px;border-radius:3px;background:#e6e6eb;overflow:hidden}
.runtime-host-bar span{display:block;height:100%;width:0;border-radius:3px;background:#0071e3;transition:width .35s linear}
.runtime-host-steps{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:7px;font-size:12px;color:#8e8e96}
.runtime-host-steps li{display:flex;align-items:center;gap:9px}
.runtime-host-steps li::before{content:'';flex:none;width:7px;height:7px;border-radius:50%;border:1.5px solid #c7c7cf}
.runtime-host-steps li[data-state="done"]{color:#64646d}
.runtime-host-steps li[data-state="done"]::before{background:#34c759;border-color:#34c759}
.runtime-host-steps li[data-state="active"]{color:#1d1d1f;font-weight:600}
.runtime-host-steps li[data-state="active"]::before{background:#0071e3;border-color:#0071e3;box-shadow:0 0 0 3px #0071e322}
@media(prefers-reduced-motion:reduce){.runtime-host-bar span{transition:none}}
/* Tony is updating (UPDATE_NOTICE_LEAD_S before his app switches off): a pulsing green dot, words kept on a phone,
   and a green card in the panel (James, 2 Nov 2026: "more visually obvious"), with a sliding bar when no percentage. */
#runtime-host-toggle.tony-updating::before{content:'';display:inline-block;flex:none;width:7px;height:7px;margin-right:7px;border-radius:50%;background:#34c759;vertical-align:middle;animation:runtime-host-pulse 1.6s ease-in-out infinite}
#runtime-host-toggle.tony-updating{color:#1b7a36}
@keyframes runtime-host-pulse{0%,100%{box-shadow:0 0 0 0 #34c75966}50%{box-shadow:0 0 0 4px #34c75900}}
.runtime-host-progress.updating{padding:14px 16px;border-radius:14px;background:#eaf8ee;box-shadow:inset 0 0 0 1px #bfe6ca}
.runtime-host-progress.updating .runtime-host-progress-head strong{display:inline-flex;align-items:center;gap:8px;color:#14662f;font-size:15px}
.runtime-host-progress.updating .runtime-host-progress-head strong::before{content:'';flex:none;width:8px;height:8px;border-radius:50%;background:#34c759;animation:runtime-host-pulse 1.6s ease-in-out infinite}
.runtime-host-progress.updating .runtime-host-progress-head span{color:#3d6b4a}
.runtime-host-progress.updating .runtime-host-bar{height:8px;border-radius:4px;background:#cdebd6}
.runtime-host-progress.updating .runtime-host-bar span{background:#34c759}
.runtime-host-progress.updating .runtime-host-steps li[data-state="active"]::before{background:#34c759;border-color:#34c759;box-shadow:0 0 0 3px #34c75933}
.runtime-host-bar[data-indeterminate] span{width:35%;transition:none;animation:runtime-host-slide 1.3s cubic-bezier(.45,0,.55,1) infinite}
@keyframes runtime-host-slide{from{transform:translateX(-100%)}to{transform:translateX(290%)}}
.runtime-host-steps[hidden],.runtime-host-progress-note[hidden]{display:none}
.runtime-host-progress-note{margin:10px 0 0;font-size:12px;line-height:1.5;color:#3d6b4a;overflow-wrap:anywhere}
@media(prefers-reduced-motion:reduce){
  #runtime-host-toggle.tony-updating::before,.runtime-host-progress.updating .runtime-host-progress-head strong::before{animation:none}
  .runtime-host-bar[data-indeterminate] span{width:100%;animation:none;background:repeating-linear-gradient(45deg,#34c759 0 8px,#5fd47e 8px 16px)}}
/* Updates for Tony: Automatic | Paused, and Update now while paused. */
.runtime-host-updates{margin-top:14px;padding:12px 14px;border-radius:12px;background:#f5f5f7}
.runtime-host-updates-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.runtime-host-updates-head strong{font-size:14px}
.runtime-host-updates-mode{display:inline-flex;padding:2px;border-radius:9px;background:#e8e8ed}
.runtime-host-updates-mode button{border:0;background:none;padding:5px 12px;border-radius:7px;font-size:13px;font-weight:600;color:#1d1d1f}
.runtime-host-updates-mode button[aria-pressed=true]{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.runtime-host-updates-mode button:disabled{color:#86868b}
@media(max-width:640px){.runtime-host-updates-mode button{min-height:40px;min-width:40px;padding:8px 16px}}
.runtime-host-updates-note{margin:8px 0 0;font-size:12px;color:#6e6e73;overflow-wrap:anywhere}
.runtime-host-update-now{min-height:40px;margin-top:10px;border:0;border-radius:9px;padding:8px 16px;background:#0071e3;color:#fff;font-size:13px;font-weight:600;cursor:pointer}
.runtime-host-update-now[hidden]{display:none}
.runtime-host-app-update{margin-top:14px;padding:12px 14px;border-radius:12px;background:#f5f5f7}
.runtime-host-app-update[hidden]{display:none}
.runtime-host-app-update p{margin:0;font-size:12px;color:#6e6e73;overflow-wrap:anywhere}
.runtime-host-app-restart{min-height:40px;margin-top:10px;border:0;border-radius:9px;padding:8px 16px;background:#0071e3;color:#fff;font-size:13px;font-weight:600}
/* Check Tony: a read-only self-check (onboard_selfcheck.py); one row per check, coloured by its status. */
.runtime-host-check{margin-top:14px;padding:12px 14px;border-radius:12px;background:#f5f5f7}
.runtime-host-check[hidden]{display:none}
.runtime-host-check-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.runtime-host-check-head strong{font-size:14px}
.runtime-host-check-run{min-height:40px;border:0;border-radius:9px;padding:8px 16px;background:#0071e3;color:#fff;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.runtime-host-check-run:disabled{background:#86868b;cursor:default}
.runtime-host-check-note{margin:8px 0 0;font-size:12px;color:#6e6e73;overflow-wrap:anywhere}
.runtime-host-check[data-level=fail] .runtime-host-check-note{color:#c9190b;font-weight:600}
.runtime-host-check-rows{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.runtime-host-check-rows li{display:grid;grid-template-columns:12px 1fr;column-gap:8px;font-size:12px;line-height:1.45;overflow-wrap:anywhere}
.runtime-host-check-rows li::before{content:'';grid-row:1 / span 2;width:8px;height:8px;margin-top:4px;border-radius:50%;background:#c7c7cf}
.runtime-host-check-rows li[data-status=ok]::before{background:#34c759}
.runtime-host-check-rows li[data-status=warn]::before{background:#ff9500}
.runtime-host-check-rows li[data-status=fail]::before{background:#ff3b30}
.runtime-host-check-rows strong{color:#1d1d1f}
.runtime-host-check-rows span{color:#6e6e73}
/* Tony's computer over its budget during a session (onboard_load.py). */
.tony-load-note{margin:8px 16px 0;padding:10px 14px;border-radius:10px;background:#fff4e5;color:#7a3e00;font-size:13px;line-height:1.45;overflow-wrap:anywhere}
.tony-load-note[hidden]{display:none}
.tony-load-note[data-level=over]{background:#ffebe9;color:#a1150a;font-weight:600}
