/* The second-step screens' own elements inside today's sign-in panel (style-public.css), and the message popup.
   Tokens only. */

.eu [hidden] { display: none !important; }

/* The form's white button keeps legacy style-public.css's fixed share of the panel; a label longer than "Login"
   ("Create passkey", "Use passkey") wraps onto a second line inside it rather than running out of it. */
.eu .frm_grp.submit input { white-space: normal; overflow-wrap: break-word; line-height: var(--tg-line-tight); }

/* The photo and the panel's background, inline styles in legacy index.php */
.eu .right_img_sec { background-image: var(--tg-photo-image); }
.eu .left_content_sec { background-image: var(--tg-panel-image); }

.eu .inner_welcome p.tg-note,
.eu .inner_welcome p.tg-message {
  clear: both;
  margin: 0;
  padding: 0 var(--tg-space-4) var(--tg-space-3) var(--tg-space-4);
  color: var(--tg-color-white);
  font-family: var(--tg-font-light);
  font-size: var(--tg-font-size-note);
  line-height: var(--tg-line-tight);
}

.eu .inner_welcome p.tg-message { font-size: var(--tg-font-size-body); }

/* The passkey step has no field, only its note: the note reads at the fields' size, centered beside the white
   button, wherever the form's two halves sit side by side (responsive-public.css stacks them at 767px and below). */
.eu .inner_welcome #passkey_form p.tg-note { padding: var(--tg-space-4); font-size: var(--tg-font-size-body); }
@media all and (min-width: 768px) {
  .eu #passkey_form:not([hidden]) { display: flex; align-items: center; }
}

.eu .inner_welcome p.tg-lede-long { max-width: var(--tg-lede-long-width); font-size: var(--tg-font-size-body); }

.eu .tg-secret {
  font-family: var(--tg-font-code);
  letter-spacing: var(--tg-letter-code);
  word-break: break-all;
}

.eu .tg-qr { clear: both; padding: var(--tg-space-4) 0 var(--tg-space-3) var(--tg-space-4); }
.eu .tg-qr img {
  display: block;
  width: var(--tg-qr-size);
  height: var(--tg-qr-size);
  background: var(--tg-color-white);
}

.eu .left_form .form_grp_check_white.tg-choice { width: 100%; padding: var(--tg-space-3) 0 0 var(--tg-space-4); }
.eu .left_form .form_grp_check_white.tg-choice input[type="radio"] { display: none; }
.eu .left_form .form_grp_check_white.tg-choice label {
  color: var(--tg-color-white);
  font-family: var(--tg-font-light);
  font-size: var(--tg-font-size-body);
}
.eu .left_form .form_grp_check_white.tg-choice input[type="radio"]:disabled + label { color: var(--tg-color-white-soft); cursor: default; }

.eu .tg-list { clear: both; list-style: none; margin: 0; padding: var(--tg-space-4) var(--tg-space-4) var(--tg-space-2) var(--tg-space-4); }
.eu .tg-list li {
  padding: var(--tg-space-2) 0;
  border-bottom: var(--tg-border-thin) solid var(--tg-color-white);
  color: var(--tg-color-white);
  font-family: var(--tg-font-light);
  font-size: var(--tg-font-size-body);
}
.eu .tg-list .tg-when { padding-left: var(--tg-space-2); color: var(--tg-color-white-soft); font-size: var(--tg-font-size-note); }

.eu .tg-actions { clear: both; padding: var(--tg-space-2) var(--tg-space-4) var(--tg-space-3) var(--tg-space-4); }
.eu .tg-action {
  margin: 0 var(--tg-space-2) var(--tg-space-2) 0;
  padding: var(--tg-space-2) var(--tg-space-4);
  border: none;
  border-radius: var(--tg-radius-none);
  background: var(--tg-color-black);
  color: var(--tg-color-white);
  font-family: var(--tg-font-light);
  font-size: var(--tg-font-size-note);
  cursor: pointer;
  transition: var(--tg-transition);
}
.eu .tg-action:hover { background: var(--tg-color-accent); }
.eu .tg-list .tg-action { margin: 0 0 0 var(--tg-space-3); padding: var(--tg-space-1) var(--tg-space-3); }

/* The message popup (layout/public.php): the browser's own dialog in legacy fancybox 2.1.7's look
   (jquery.fancybox.css, and the popup width style-public.css and responsive-public.css set). The dialog is
   fancybox's overlay, filling the window and scrolling; inside it the frame (fancybox's wrap) is centered with the
   overlay's margin around it, holds the white inner box (which contains the floated buttons), and carries the close
   button over its top right corner. The overlay shows at once and the frame fades in; on closing, the frame fades
   out, then the overlay. The popup's own text and buttons keep the legacy rules (data_fancy_box, btn_cls). */
html.tg-modal-open body { overflow-y: hidden; }

.eu .tg-modal {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: var(--tg-space-3);
  border: 0;
  background: var(--tg-color-overlay);
  color: inherit;
  overflow: auto;
  overflow-y: scroll;
}
.eu .tg-modal[open] { display: flex; }
.eu .tg-modal::backdrop { background: var(--tg-color-none); }
.eu .tg-modal.tg-modal--fading { animation: tg-fade-out var(--tg-modal-overlay-fade-out) var(--tg-ease-swing) forwards; }

.eu .tg-modal__frame {
  position: relative;
  width: var(--tg-modal-width);
  max-width: 100%;
  margin: auto;
  background: var(--tg-color-white);
  animation: tg-fade-in var(--tg-modal-fade) var(--tg-ease-swing);
}
.eu .tg-modal.tg-modal--closing .tg-modal__frame { animation: tg-fade-out var(--tg-modal-fade) var(--tg-ease-swing) forwards; }

.eu .tg-modal__inner { overflow: hidden; background: var(--tg-color-white); }

.eu .tg-modal__close {
  position: absolute;
  top: var(--tg-modal-close-inset);
  right: var(--tg-modal-close-inset);
  width: var(--tg-modal-close-width);
  height: var(--tg-modal-close-height);
  margin: 0;
  padding: var(--tg-space-0) 0 0 0;
  border: 0;
  border-radius: var(--tg-radius-round);
  background-color: var(--tg-color-none);
  background-image: var(--tg-modal-close-image);
  background-position: 0 0;
  text-align: center;
  cursor: pointer;
}

/* A keyboard user sees where focus is; the legacy rules turn every link's outline off, and a mouse shows none. */
.eu .tg-modal a:focus-visible,
.eu .tg-modal button:focus-visible {
  outline: var(--tg-focus-ring-width) solid var(--tg-color-accent) !important;
  outline-offset: var(--tg-focus-ring-width);
}

@keyframes tg-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes tg-fade-out { from { opacity: 1; } to { opacity: 0; } }

/* responsive-public.css's breakpoint for the popup: below it the frame fits its message, up to the window less the
   overlay's margin. */
@media all and (max-width: 991px) {
  .eu .tg-modal__frame { width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .eu .tg-modal,
  .eu .tg-modal__frame,
  .eu .tg-modal.tg-modal--fading,
  .eu .tg-modal.tg-modal--closing .tg-modal__frame { animation: none; }
}