/* The web workbench: the desktop surface plus cloud browser availability. */
.cloud-status{display:inline-flex;align-items:center;gap:calc(var(--space-unit)*2);height:var(--control-size);min-height:var(--control-size);padding:0 calc(var(--space-unit)*3);border:var(--line-width) solid var(--border);border-radius:var(--r);background:var(--panel);color:var(--text);font:500 var(--text-caption)/1 var(--sans);white-space:nowrap;cursor:pointer;flex-shrink:0}
.cloud-status:hover{background:var(--raised)}
.cloud-status:focus-visible{outline:calc(var(--line-width)*2) solid var(--accent);outline-offset:calc(var(--line-width)*2)}
.cloud-dot{width:calc(var(--space-unit)*2);height:calc(var(--space-unit)*2);border-radius:50%;background:var(--muted);flex-shrink:0}
.cloud-status[data-state=checking]{color:var(--muted)}
.cloud-status[data-state=ok]{color:var(--success-text);border-color:var(--success)}
.cloud-status[data-state=ok] .cloud-dot{background:var(--success)}
.cloud-status[data-state=busy]{color:var(--warning-text);border-color:var(--warning)}
.cloud-status[data-state=busy] .cloud-dot{background:var(--warning)}
.cloud-status[data-state=offline]{color:var(--danger-text);border-color:var(--danger)}
.cloud-status[data-state=offline] .cloud-dot{background:var(--danger)}
body[data-web] .topbar > .cloud-status{margin-left:calc(var(--space-unit)*2)}
@media(max-width:600px){
  body[data-web] .topbar > .cloud-status{order:3;flex:1 0 100%;justify-content:flex-start;margin-left:0}
}
/* Sign-in: a pointer to the desktop app for what the web cannot do. */
#desktop-home .web-desktop-note{margin-top:calc(var(--space-unit)*8);max-width:var(--home-form-width);font-size:var(--text-caption)}
#desktop-home .web-desktop-note a{color:var(--link)}
body[data-sign-in] .home-header .brand{color:var(--text)}
body[data-sign-in] .tf-brand{display:inline-flex;align-items:center;gap:8px;font-weight:600}
body[data-sign-in] .tf-mark{width:22px;height:22px;fill:#1f6f5b;flex:none}
body[data-sign-in] .tf-mark .paper{fill:var(--canvas)}
body[data-sign-in] .tf-mark .check{fill:none;stroke:var(--canvas);stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round}
body[data-sign-in] .tf-product{display:inline-flex;align-items:center;gap:4px;margin-left:4px;padding:2px 8px;border:1px solid var(--border);border-radius:999px;font-size:12px;font-weight:500;color:var(--muted)}
body[data-sign-in] .tf-brand{display:inline-flex;align-items:center;gap:8px;font-weight:600}
body[data-sign-in] .tf-mark{width:22px;height:22px;fill:#1f6f5b;flex:none}
body[data-sign-in] .tf-mark .paper{fill:var(--canvas)}
body[data-sign-in] .tf-mark .check{fill:none;stroke:var(--canvas);stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round}
body[data-sign-in] .tf-product{display:inline-flex;align-items:center;gap:4px;margin-left:4px;padding:2px 8px;border:1px solid var(--border);border-radius:999px;font-size:12px;font-weight:500;color:var(--muted)}
body[data-sign-in] #desktop-home .home-header{align-items:center}