/* MarginSheet sign in. Consumes tokens.css. Nothing else. */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin:0; background:var(--ms-paper); color:var(--ms-ink);
  font-family:var(--ms-font-ui); -webkit-font-smoothing:antialiased; }
a { color:var(--ms-brand); text-decoration:none; }
a:hover { color:var(--ms-brand-hover); }
button { font-family:inherit; color:inherit; }
.ms-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- The signed-out shell ----------
   No rail, no tab bar, no identity strip. There is no household to
   name, so nothing pretends there is. The mark and wordmark are the
   only shell elements that survive sign out. */
.ms-out-shell { min-height:100vh; display:flex; flex-direction:column; }
.ms-out-head {
  display:flex; align-items:center; gap:var(--ms-sp-4);
  padding:var(--ms-sp-6) var(--ms-sp-7);
  border-bottom:1px solid var(--ms-border3);
}
.ms-out-head img { width:34px; height:34px; border-radius:var(--ms-r-sm); display:block; }
.ms-wordmark { font-size:var(--ms-fs-16); font-weight:var(--ms-w-semi); color:var(--ms-ink); }
.ms-wordmark b { font-weight:inherit; color:var(--ms-brand); }
.ms-out-foot {
  margin-top:auto; padding:var(--ms-sp-7);
  border-top:1px solid var(--ms-border3);
  font-size:var(--ms-fs-13); line-height:var(--ms-lh-body); color:var(--ms-muted);
}

/* ---------- Column ---------- */
.ms-auth { width:100%; max-width:460px; margin:0 auto; padding:var(--ms-sp-10) var(--ms-sp-6) var(--ms-sp-9); }
.ms-auth h1 {
  margin:0; font-size:var(--ms-fs-26); font-weight:var(--ms-w-reg);
  line-height:1.25; color:var(--ms-brand); text-wrap:pretty;
}
.ms-auth p { margin:var(--ms-sp-5) 0 0; font-size:var(--ms-fs-16); line-height:var(--ms-lh-body); text-wrap:pretty; }
.ms-auth p.ms-quiet { font-size:var(--ms-fs-15); color:var(--ms-muted2); }
.ms-auth-foot {
  margin-top:var(--ms-sp-7); padding-top:var(--ms-sp-5);
  border-top:1px solid var(--ms-border3);
  font-size:var(--ms-fs-14); line-height:var(--ms-lh-body); color:var(--ms-muted2);
}
.ms-eyebrow { font-size:var(--ms-fs-13); letter-spacing:.14em; text-transform:uppercase;
  font-weight:var(--ms-w-semi); color:var(--ms-muted); }

/* ---------- Controls ---------- */
.ms-btn {
  display:flex; align-items:center; justify-content:center; gap:var(--ms-sp-3);
  width:100%; min-height:48px; padding:0 var(--ms-sp-6);
  background:var(--ms-brand); color:var(--ms-paper);
  border:1px solid var(--ms-brand); border-radius:var(--ms-r-sm);
  font-size:var(--ms-fs-16); cursor:pointer;
}
.ms-btn:hover { background:var(--ms-brand-hover); border-color:var(--ms-brand-hover); }
.ms-btn.is-quiet { background:transparent; color:var(--ms-ink); border-color:var(--ms-border); }
.ms-btn.is-quiet:hover { background:transparent; color:var(--ms-brand); border-color:var(--ms-brand); }
.ms-btn[disabled] { cursor:default; opacity:.55; }
.ms-btn[disabled]:hover { background:transparent; color:var(--ms-ink); border-color:var(--ms-border); }
.ms-field {
  width:100%; min-height:48px; margin-top:var(--ms-sp-5); padding:0 12px;
  background:var(--ms-card); border:1px solid var(--ms-border);
  border-radius:var(--ms-r-sm); font-family:inherit; font-size:var(--ms-fs-16); color:var(--ms-ink);
}
.ms-field:focus { outline:none; border-color:var(--ms-brand); }
.ms-field::placeholder { color:var(--ms-muted); }

/* ---------- Notice ----------
   Same three markers as the shell. Never red: a sign-in that did not
   happen is not a negative financial fact. */
.ms-notice { display:flex; gap:11px; align-items:flex-start;
  font-size:var(--ms-fs-15); line-height:var(--ms-lh-body); }
.ms-notice p { margin:0; text-wrap:pretty; }
.ms-notice-rule { width:3px; flex:0 0 3px; align-self:stretch; min-height:34px; }
.ms-notice.is-ours   .ms-notice-rule { background:var(--ms-amber); }
.ms-notice.is-action .ms-notice-rule { background:var(--ms-brand); }
.ms-notice-eyebrow { display:block; font-size:var(--ms-fs-14); font-weight:var(--ms-w-semi); color:var(--ms-amber-ink); }
.ms-notice-dot { width:7px; flex:0 0 7px; height:7px; margin-top:8px; border-radius:var(--ms-r-pill); background:var(--ms-muted); }

/* ---------- The wait ----------
   No spinner and no progress bar. Nothing is loading. We are waiting
   on a person's inbox, and a spinner would misdescribe that. */
.ms-wait-meta { display:flex; align-items:baseline; justify-content:space-between; gap:var(--ms-sp-5);
  font-size:var(--ms-fs-14); color:var(--ms-muted); }
.ms-steps { margin:var(--ms-sp-5) 0 0; padding:0; list-style:none; display:grid; gap:var(--ms-sp-4); }
.ms-steps li { display:flex; gap:var(--ms-sp-4); font-size:var(--ms-fs-15); line-height:var(--ms-lh-body); color:var(--ms-muted2); }
.ms-steps b { flex:0 0 18px; font-weight:var(--ms-w-reg); color:var(--ms-muted); font-variant-numeric:tabular-nums; }

@media (max-width: 700px) {
  .ms-out-head { padding:var(--ms-sp-5) var(--ms-sp-6); }
  .ms-out-foot { padding:var(--ms-sp-6); }
  .ms-auth { padding:var(--ms-sp-8) var(--ms-sp-6) var(--ms-sp-9); }
  .ms-auth h1 { font-size:22px; }
}