/* Sign-in screen in front of the working app; demo and lab modes never set data-auth. */
.login-gate { display:none; }
body[data-auth='pending'] .cockpit-stage,
body[data-auth='out'] .cockpit-stage { display:none; }
body[data-auth='pending'] #login-gate,
body[data-auth='out'] #login-gate { display:grid; place-items:center; min-height:calc(100svh - 48px); }
.login-card { width:min(440px,100%); padding:40px 40px 30px; border:1px solid #c7cac6; border-radius:8px; background:var(--cp-surface); box-shadow:0 10px 40px #15181c08; font:400 13px var(--font-display); color:var(--ink); }
.login-brand { display:flex; align-items:center; gap:0; margin-bottom:36px; }
.login-brand .cp-product-name { margin-left:16px; padding-left:16px; border-left:1px solid var(--cp-border); font:500 15px var(--font-display); }
.login-card h1 { margin:0 0 8px; font:500 28px/1.2 var(--font-display); letter-spacing:-.2px; }
.login-lead { margin:0 0 28px; font-size:13px; line-height:1.6; color:var(--cp-muted); }
/* "Sign in with Microsoft" as in Microsoft's branding guidance: white, grey border, the four-square logo, Segoe UI. */
.login-ms { display:flex; align-items:center; justify-content:center; gap:12px; width:100%; height:41px; padding:0 12px; border:1px solid #8C8C8C; border-radius:0; background:#FFFFFF; color:#5E5E5E; font:600 15px 'Segoe UI',SegoeUI,'Helvetica Neue',Arial,sans-serif; cursor:pointer; transition:background .15s,border-color .15s; }
.login-ms:hover { background:#F3F3F3; border-color:#6E6E6E; }
.login-ms:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }
.login-ms:disabled { cursor:progress; opacity:.65; }
.login-ms-logo { flex-shrink:0; }
.login-status { min-height:20px; margin:12px 0 0; font-size:12px; line-height:1.5; color:var(--cp-muted); overflow-wrap:anywhere; }
.login-status[data-error='true'] { color:var(--cp-red); }
.login-note { display:flex; gap:8px; align-items:flex-start; margin:20px 0 0; padding-top:16px; border-top:1px solid var(--cp-border); font-size:12px; line-height:1.5; color:var(--cp-muted); }
.login-note svg { width:14px; height:14px; flex-shrink:0; margin-top:2px; }
@media(max-width:760px) {
  body[data-auth='pending'] #login-gate,
  body[data-auth='out'] #login-gate,
  body[data-auth='in'] #setup-gate { min-height:calc(100svh - 24px); }
  .login-card { padding:32px 22px 24px; }
}
/* Pre-blurred picture of the sample cockpit behind sign-in and setup: a teaser, never readable. */
[data-preview] { position:relative; isolation:isolate; }
.cp-preview { position:absolute; left:50%; top:50%; width:min(1240px,94%); aspect-ratio:1240 / 768; max-height:90%; transform:translate(-50%,-50%); z-index:-1; overflow:hidden; border:1px solid #dfe2dc; border-radius:10px; pointer-events:none; user-select:none; background:#fbfaf6 url('/assets/cockpit-preview.jpg') center / cover no-repeat; }
body[data-auth] .login-gate[data-preview] { width:100%; }
.login-card, #setup-gate .onboarding-card { position:relative; z-index:1; box-shadow:0 24px 60px #15181c26; }
#setup-gate .onboarding-card { width:100%; padding:28px 28px 8px; border:1px solid #c7cac6; border-radius:8px; background:var(--cp-surface,#fff); }
/* Until someone's first setup is finished, only the setup is shown in front of the blurred view. */
body[data-auth='in'][data-setup='pending'] .cockpit-stage,
body[data-auth='in'][data-setup='locked'] .cockpit-stage { display:none; }
body[data-auth='in'][data-setup='pending'] #setup-gate,
body[data-auth='in'][data-setup='locked'] #setup-gate { display:grid; place-items:center; min-height:calc(100svh - 48px); padding:24px 0; }
body[data-setup='locked'] #setup-loading { display:none; }
#setup-gate .onboarding-card { width:min(640px,100%); }
/* Agent setup is only about the setup: no workspace metrics above it. */
.cp-main:has(> #panel-automations:not([hidden])) > .cp-metrics { display:none; }
/* The list shows a short form of the agent's description; the details show the full text. */
.cp-agent-summary { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
.cp-system-logo { width:16px; height:16px; object-fit:contain; flex:none; }