/* Sign in page: centred narrow panel on the light ground, first-login password
   step in the same panel, and the prototype-only demo account list below. */

.page-signin { max-width: none; padding-top: 48px; }

.signin-layout {
  max-width: 400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.signin-panel { width: 100%; }
.signin-panel-body { padding: 24px 26px 20px; }

.signin-panel-head { margin-bottom: 18px; }
.signin-panel-head .page-header { margin-bottom: 0; }
.signin-panel-head .page-title { font-size: 20px; }
.signin-panel-head .page-subtitle { font-size: 13.5px; }

.signin-alert:empty { display: none; }
.signin-alert { margin-bottom: 14px; }
.signin-form .notice { margin-bottom: 14px; }
.signin-panel-body > .notice { margin-bottom: 16px; }

.signin-actions { margin-top: 6px; }
.signin-actions .btn-primary { height: 38px; }
.signin-actions-secondary { margin-top: 12px; text-align: center; }

.signin-help {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-2);
}
.signin-help p { margin: 0 0 6px; }
.signin-help p:last-child { margin-bottom: 0; }
.signin-sim-note { margin-top: 10px; }

/* Demo accounts (prototype only) */
.signin-demo { max-width: 860px; margin: 20px auto 0; }
.signin-demo-head { max-width: 400px; margin: 0 auto; }
.signin-demo-toggle { font-size: 13px; color: var(--text-2); display: inline-flex; align-items: center; gap: 6px; }
.signin-demo-toggle:hover { color: var(--accent); }
.signin-demo-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.signin-demo-caret {
  width: 0; height: 0;
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-top: 6px solid currentColor;
  transform: rotate(-90deg);
}
.signin-demo-toggle[aria-expanded="true"] .signin-demo-caret { transform: none; }
.signin-demo-body { margin-top: 10px; }
.signin-demo-note-text { margin: 0 0 8px; }
.signin-demo-table td { vertical-align: middle; }
.signin-demo-table td .mono { white-space: nowrap; font-size: 12.5px; }
.signin-demo-table .signin-demo-note { color: var(--text-2); font-size: 12.5px; min-width: 180px; }
.signin-demo-table .signin-demo-use { text-align: right; white-space: nowrap; }

@media (max-width: 640px) {
  .page-signin { padding-top: 20px; }
  .signin-panel-body { padding: 20px 18px 16px; }
}