/* "Sign in with Microsoft" on the login page and its card in Team & settings.
   Follows Microsoft's sign-in button guidance (four-square logo, "Sign in with Microsoft",
   neutral surface); everything else uses the client palette tokens. */
.si-ms{display:grid;gap:8px}
.si-ms-btn{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:48px;padding:0 16px;border-radius:12px;border:1px solid rgb(var(--z600));background:rgb(var(--z950));color:rgb(var(--z100));font:inherit;font-size:.95rem;font-weight:600;cursor:pointer;transition:border-color .15s ease,background .15s ease}
.si-ms-btn:hover{border-color:rgb(var(--acc));background:rgb(var(--z900))}
.si-ms-btn:focus-visible{outline:2px solid rgb(var(--acc));outline-offset:2px}
.si-ms-logo{width:21px;height:21px;flex:none}
.si-ms-note{margin:0;font-size:.75rem;line-height:1.5;color:rgb(var(--z400));text-align:center}
.si-or{display:flex;align-items:center;gap:12px;font-size:.75rem;color:rgb(var(--z400))}
.si-or::before,.si-or::after{content:"";flex:1;height:1px;background:rgb(var(--z700))}
.si-card{border:1px solid rgb(var(--z700));border-radius:var(--radius);background:rgb(var(--z900));padding:18px;display:grid;gap:12px}
.si-card h2{display:flex;align-items:center;gap:10px;margin:0;font-size:1.02rem;font-weight:650;color:rgb(var(--z100))}
.si-card p{margin:0;font-size:.84rem;line-height:1.6;color:rgb(var(--z400))}
.si-people{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.si-people li{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 16px;padding:10px 12px;border:1px solid rgb(var(--z800));border-radius:12px;background:rgb(var(--z950));font-size:.84rem;color:rgb(var(--z200))}
.si-people .si-state{color:rgb(var(--z400))}
.si-people .si-on{color:rgb(var(--good))}
.si-actions{display:flex;flex-wrap:wrap;gap:8px}
@media (prefers-reduced-motion:reduce){.si-ms-btn{transition:none}}