/* ==========================================================================
   BBN PORTAL — two-factor enrolment and step-up
   Member-facing, so it uses the warm Portal surface, NOT the Operations shell.
   ========================================================================== */
.bbnmfa{
  font-family:var(--bbn-font); color:var(--bbn-text);
  max-width:var(--bbn-page-max-narrow); margin:0 auto;
  padding:var(--bbn-pad-page) var(--bbn-pad-page-mobile);
}
.bbnmfa *{box-sizing:border-box}
.bbnmfa__card{
  background:var(--bbn-surface); border:1px solid var(--bbn-border);
  border-radius:12px; padding:24px; margin-bottom:16px;
}
.bbnmfa__h1{font-size:var(--bbn-size-page-title); font-weight:var(--bbn-weight-title); margin:0 0 6px}
.bbnmfa__lede{margin:0 0 20px; color:var(--bbn-text-secondary); font-size:var(--bbn-size-page-intro)}
.bbnmfa__h2{font-size:var(--bbn-size-card-title); font-weight:var(--bbn-weight-section); margin:0 0 8px}
.bbnmfa__p{margin:0 0 12px; font-size:var(--bbn-size-body); line-height:var(--bbn-leading-body)}

.bbnmfa__status{
  display:flex; align-items:center; gap:10px; padding:12px 14px;
  border-radius:8px; border:1px solid; font-size:var(--bbn-size-support); margin-bottom:18px;
}
.bbnmfa__status--on  {background:var(--bbn-success-surface); border-color:var(--bbn-success-border); color:var(--bbn-success)}
.bbnmfa__status--off {background:var(--bbn-warning-surface); border-color:var(--bbn-warning-border); color:var(--bbn-warning)}
.bbnmfa__status--err {background:var(--bbn-error-surface);   border-color:var(--bbn-error-border);   color:var(--bbn-error)}
.bbnmfa__dot{width:9px;height:9px;border-radius:50%;background:currentColor;flex:none}

/* Steps read as a sequence, so it is obvious enrolment is not finished until step 3. */
.bbnmfa__steps{counter-reset:s; list-style:none; margin:0; padding:0}
.bbnmfa__step{counter-increment:s; position:relative; padding:0 0 20px 40px}
.bbnmfa__step::before{
  content:counter(s); position:absolute; left:0; top:-2px;
  width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  background:var(--bbn-brand); color:#fff; font-size:13px; font-weight:650;
}
.bbnmfa__step:not(:last-child)::after{
  content:""; position:absolute; left:13px; top:28px; bottom:2px; width:1px; background:var(--bbn-border);
}

.bbnmfa__qr{
  display:grid; place-items:center; padding:16px; background:#fff;
  border:1px solid var(--bbn-border); border-radius:10px; width:max-content; margin:4px 0 12px;
}
.bbnmfa__qr img{display:block; width:190px; height:190px; image-rendering:pixelated}
.bbnmfa__secret{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:14px;
  letter-spacing:.09em; word-break:break-all; background:var(--bbn-surface-sunken);
  border:1px solid var(--bbn-border); border-radius:6px; padding:10px 12px; margin:0 0 4px;
}
.bbnmfa__code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:24px; letter-spacing:.34em; text-align:center; width:100%; max-width:230px;
  padding:11px 12px; border:1px solid var(--bbn-border-strong); border-radius:8px;
  background:var(--bbn-surface);
}
.bbnmfa__btn{
  font:inherit; font-size:var(--bbn-size-body); font-weight:var(--bbn-weight-strong);
  cursor:pointer; padding:10px 18px; border-radius:8px;
  background:var(--bbn-brand); color:var(--bbn-text-on-brand); border:1px solid var(--bbn-brand-deep);
}
.bbnmfa__btn:hover:not(:disabled){background:var(--bbn-brand-deep)}
.bbnmfa__btn:disabled{opacity:var(--bbn-disabled-opacity); cursor:not-allowed}
.bbnmfa__btn--quiet{background:transparent; color:var(--bbn-brand); border-color:var(--bbn-border-strong)}
.bbnmfa__btn--danger{background:transparent; color:var(--bbn-error); border-color:var(--bbn-error-border)}
.bbnmfa__btn--danger:hover{background:var(--bbn-error-surface)}
.bbnmfa__row{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:10px}

.bbnmfa__note{
  border-left:3px solid var(--bbn-warning-border); background:var(--bbn-warning-surface);
  padding:12px 14px; border-radius:0 8px 8px 0; font-size:var(--bbn-size-support);
  color:var(--bbn-text); margin:16px 0 0;
}
.bbnmfa__note b{color:var(--bbn-warning)}
.bbnmfa__msg{margin:12px 0 0; font-size:var(--bbn-size-support)}
.bbnmfa__msg--err{color:var(--bbn-error)}
.bbnmfa__msg--ok{color:var(--bbn-success)}
.bbnmfa__skel{height:78px;border-radius:10px;background:var(--bbn-surface-sunken)}

.bbnmfa a:focus-visible,.bbnmfa button:focus-visible,.bbnmfa input:focus-visible{
  outline:2px solid var(--bbn-focus-ring); outline-offset:2px;
}
.bbnmfa__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ==========================================================================
   INLINE VARIANT — the same flow, opened inside the My BBN sponsor block.
   --------------------------------------------------------------------------
   A sponsor whose session has not met the second-factor bar is told so where the
   launch would have been, and turns it on there. Sending them to a standalone
   screen would mean leaving the page that explained why, so the panel keeps the
   page width, drops the page chrome, and sits inside the host card rather than
   centring itself on the canvas.
   ========================================================================== */
.bbnmfa--inline{max-width:none; margin:0; padding:0}
.bbnmfa--inline .bbnmfa__card{
  background:var(--bbn-surface-sunken); padding:18px; margin-bottom:0;
}
.bbnmfa__h1--inline{
  font-size:var(--bbn-size-card-title); font-weight:var(--bbn-weight-section);
  margin:0 0 10px;
}
.bbnmfa--inline .bbnmfa__status{margin-bottom:12px}
.bbnmfa--inline .bbnmfa__qr img{max-width:180px}