/* Login modal styles only. The consumer supplies general dialog/tab styles. */
#embedded-sign-in {
  box-sizing: border-box;
  width: min(46rem, calc(100vw - 2rem));
  max-width: none;
  height: min(56rem, calc(100svh - 2rem));
  max-height: calc(100svh - 2rem);
  padding: 1.5rem;
  border: 1px solid #dce3ed;
  border-radius: 16px;
  color: #172a43;
  background: #fff;
  box-shadow: 0 24px 80px rgba(10, 27, 49, .24);
  text-align: left;
  overflow: hidden;
  grid-template-rows: auto auto 2.5rem minmax(0, 1fr) auto;
  gap: .75rem;
}
#embedded-sign-in.modal-visible,
dialog#embedded-sign-in[open] { display: grid !important; }
#embedded-sign-in::backdrop { background: rgba(0, 0, 0, .4); }
#embedded-sign-in.embedded-sign-in-modal { margin: 0; z-index: 1010; }
/* Initial focus belongs to the dialog; controls retain their keyboard focus rings. */
#embedded-sign-in.embedded-sign-in-modal:focus { outline: none; }
#embedded-sign-in .embedded-sign-in__header,
#embedded-sign-in .embedded-sign-in__footer,
#embedded-sign-in .embedded-sign-in__footer > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  min-width: 0;
}
#embedded-sign-in .embedded-sign-in__header {
  align-items: flex-start;
  gap: 1rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
#embedded-sign-in h2 {
  margin: 0;
  padding: 0;
  border: 0;
  color: inherit;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.025em;
}
#embedded-sign-in .embedded-sign-in__eyebrow {
  margin: 0 0 .4rem;
  color: #61718a;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.3;
  text-transform: uppercase;
}
#embedded-sign-in-description {
  margin: 0;
  color: #53647a;
  font-size: .95rem;
  line-height: 1.6;
}
/* Reserve feedback and frame space before the asynchronous flow starts. */
#embedded-sign-in-status {
  margin: 0;
  min-height: 0;
  overflow: auto;
  color: #63738a;
  font-size: .8rem;
  line-height: 1.5;
}
#embedded-sign-in button {
  cursor: pointer;
  font: inherit;
  border: 1px solid #dce3ed;
  border-radius: 8px;
  padding: .5rem .75rem;
  color: #172a43;
  background: #f6f8fb;
}
#embedded-sign-in .embedded-sign-in__header > button,
#embedded-sign-in .embedded-sign-in__toolbar > button {
  position: static;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  margin: -.2rem -.35rem 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #63738a;
  font-size: 1.8rem;
  line-height: 1;
}
#embedded-sign-in button:hover { background: #edf1f6; }
#embedded-sign-in button:focus-visible, #embedded-sign-in a:focus-visible { outline: 2px solid #2266b3; outline-offset: 3px; }
#embedded-sign-in button:disabled { cursor: wait; opacity: .6; }
#embedded-sign-in [hidden] { display: none !important; }
#embedded-sign-in-frame {
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid #dce3ed;
  border-radius: 12px;
  background: #f6f8fb;
}
#embedded-sign-in-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  box-sizing: border-box;
  background: #f6f8fb;
}
#embedded-sign-in .embedded-sign-in__footer { margin: 0; padding: 0; }
#embedded-sign-in .embedded-sign-in__footer > div { flex-shrink: 0; }
#embedded-sign-in .embedded-sign-in__footer button { white-space: nowrap; }
#embedded-sign-in .embedded-sign-in__footer a { color: #2266b3; font-size: .85rem; }
@media (max-width: 520px) {
  #embedded-sign-in {
    width: calc(100vw - 1rem);
    height: calc(100svh - 1rem);
    max-height: calc(100svh - 1rem);
    padding: 1.25rem 1.1rem 1.1rem;
    grid-template-rows: auto auto 3.6rem minmax(0, 1fr) auto;
  }
}

/* The shared modal swaps whole panels through ui.tabs; its shell stays fixed. */
#embedded-sign-in.embedded-sign-in-modal { grid-template-rows: 2rem minmax(0, 1fr) auto; }
#embedded-sign-in .embedded-sign-in__toolbar { display: flex; justify-content: flex-end; }
#embedded-sign-in .embedded-sign-in__panels {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
#embedded-sign-in .embedded-sign-in__panels > .tab-panel {
  box-sizing: border-box;
  height: 100%;
  min-height: 0;
  overflow: auto;
}
#embedded-sign-in .embedded-sign-in__panels > .tab-hidden { display: none; }
#panel-embedded-sign-in-iframe #embedded-sign-in-frame { height: 100%; }

#embedded-sign-in .embedded-sign-in__intro,
#embedded-sign-in .embedded-sign-in__completion {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  text-align: center;
  gap: 1rem;
}
#embedded-sign-in .embedded-sign-in__intro p,
#embedded-sign-in .embedded-sign-in__completion p { margin: 0; color: #63738a; }
#embedded-sign-in .embedded-sign-in__error-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .75rem;
}
#embedded-sign-in #embedded-sign-in-panel-retry,
#embedded-sign-in #embedded-sign-in-success { color: #fff; background: #2266b3; border-color: #2266b3; }
#embedded-sign-in #embedded-sign-in-panel-retry:hover,
#embedded-sign-in #embedded-sign-in-success:hover { background: #194f8b; }