/* Flow: Sign in with Microsoft, and the first sign-in (tools/genFlowSignIn.mjs). Tokens only. */

/* The hero: actor, start, end */
.fsi-hero { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin: 0; }
.fsi-hero__item { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4); border: 1px solid var(--color-default); border-radius: var(--radius-card); background: var(--color-surface); }
.fsi-hero__item dd { margin: 0; }
@media (max-width: 760px) { .fsi-hero { grid-template-columns: 1fr; } }

/* Shared */
.fsi-muted { color: var(--color-muted); }
.fsi-busy { cursor: progress; }
.fsi-busy .ld { color: var(--color-primary); }

/* 4 · Microsoft's pages as a neutral frame */
.fsi-ms { width: 1280px; height: 800px; display: flex; flex-direction: column; background: var(--color-surface-muted); color: var(--color-foreground); font-size: var(--text-sm); }
.fsi-ms__bar { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-6); border-bottom: 1px solid var(--color-default); background: var(--color-surface); color: var(--color-muted); font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; }
.fsi-ms__body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-6); padding: var(--space-10); border: 2px dashed var(--color-subtle); border-radius: var(--radius-card); margin: var(--space-10) var(--space-12); }
.fsi-ms__title { margin: 0; font-size: var(--text-xl); line-height: var(--leading-xl); font-weight: var(--weight-medium); text-align: center; }
.fsi-ms__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 240px); gap: var(--space-5); }
.fsi-ms__step { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-5); background: var(--color-surface); border: 1px solid var(--color-default); border-radius: var(--radius-card); }
.fsi-ms__n { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-full); background: var(--color-surface-muted); color: var(--color-muted); font-weight: var(--weight-semibold); }
.fsi-ms__text { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.fsi-ms__label { color: var(--color-muted); font-size: var(--text-xs); line-height: var(--leading-xs); }
.fsi-ms__value { font-weight: var(--weight-semibold); overflow-wrap: anywhere; }
.fsi-ms__foot { margin: 0; color: var(--color-muted); }

/* 5 · The loader beside the brand panel, where the sign-in button was */
.fsi-load { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); color: var(--color-foreground); }
.fsi-load .ld { color: var(--color-primary); }

/* 6 · The capture policy */
.fsi-policy { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.fsi-policy li { display: flex; gap: var(--space-2); align-items: flex-start; line-height: var(--leading-sm); }
.fsi-policy li > .icon { flex: none; margin-top: 2px; color: var(--color-primary); }
.fsi-q { vertical-align: middle; }
.fsi-qnote { margin: 0; color: var(--color-warning-text); }
.fsi-mailbox { display: flex; flex-direction: column; gap: 2px; padding: var(--space-2) var(--space-3); border-radius: var(--radius-control); background: var(--color-surface-muted); }
.fsi-switch { padding: var(--space-1) 0; }

/* No access */
.fsi-pic .ill { width: 120px; height: auto; }
.fsi-link { display: inline-flex; align-items: center; gap: var(--space-1); align-self: flex-start; color: var(--color-primary-strong); font-weight: var(--weight-semibold); text-decoration: none; }

/* 8 · My account */
.fsi-acct { display: flex; flex-direction: column; gap: var(--space-5); max-width: 560px; padding: var(--space-6); }
.fsi-ro { display: flex; align-items: center; gap: var(--space-2); min-height: 36px; }
.fsi-acct__actions { display: flex; justify-content: flex-end; }

/* Session ended: a dialog over the dimmed page */
.fsi-dim { position: relative; }
.fsi-scrim { position: absolute; inset: 0; display: grid; place-items: center; background: var(--color-overlay); z-index: 4; }
.fsi-scrim .au-ms { width: auto; padding: 0 var(--space-4); }

/* Staging: the marker across the top bar and on the sign-in card; the two frames one under the other */
.fsi-stagebar { flex: none; }
.fsi-stagebadge { align-self: flex-start; }
.fsi-two { display: flex; flex-direction: column; align-items: center; gap: var(--space-5); }
.fsi-two__label { align-self: flex-start; margin: 0 0 var(--space-2); color: var(--color-muted); }

/* Microsoft 365 connection off: the empty states drawn compact, so the page fits under the notice */
.fsi-compact .c-empty { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.fsi-compact .ap-hello { margin-bottom: 0; }

/* The screens before the product stand at the full frame height, as the shell does */
#signIn .ap-frame .au-root { min-height: 800px; }