/* テナントのログインのダイアログ（tenant-login.js が組み立てる）。
   枠と見出し・ボタンの体裁は demo-notice.css の .notice-dialog・.notice-button を借りる＝このファイルは
   demo-notice.css のあとに読むこと。ここに書くのはログインのダイアログだけの違いだけ。
   色の変数（--ink・--line・--paper・--muted・--focus）はトップとドキュメントの両方の :root に同じ値である。 */
.tenant-login-dialog {
  max-width:560px;
  padding:0
}
.tenant-login-body {
  padding:26px 30px 28px
}
.tenant-login-head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px
}
.tenant-login-dialog .tenant-login-head h2 {
  margin:0 0 18px
}
/* 閉じる（右上）と、最近開いたテナントを消す × は同じ体裁で、大きさだけが違う */
.tenant-login-close,.tenant-login-remove {
  flex:none;
  padding:0;
  font:inherit;
  line-height:1;
  border:0;
  border-radius:5px;
  background:transparent;
  color:var(--muted);
  cursor:pointer
}
.tenant-login-close:hover,.tenant-login-remove:hover {
  background:var(--paper);
  color:var(--ink)
}
.tenant-login-close {
  width:32px;
  height:32px;
  margin:-4px -8px 0 0;
  font-size:22px
}
.tenant-login-row {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px
}
.tenant-login-affix {
  font-size:15px;
  font-weight:600;
  color:var(--ink)
}
.tenant-login-row input {
  flex:1 1 140px;
  min-width:0;
  padding:12px 12px;
  font:inherit;
  font-size:16px;
  color:var(--ink);
  border:1px solid var(--line-strong);
  border-radius:5px;
  background:#fff
}
.tenant-login-row input:focus-visible {
  outline:3px solid var(--focus,#35669d);
  outline-offset:1px
}
.tenant-login-row input[aria-invalid="true"] {
  border-color:#b3261e
}
/* 「移動」はほかのボタンより詰める（入力欄と同じ行に並べるため） */
.tenant-login-dialog .tenant-login-submit {
  padding:12px 20px
}
.tenant-login-submit:disabled {
  opacity:.55;
  cursor:wait
}
.tenant-login-dialog .tenant-login-help {
  margin:10px 0 0;
  font-size:13px;
  line-height:1.7;
  color:var(--muted)
}
.tenant-login-challenge:not(:empty) {
  margin-top:12px
}
.tenant-login-dialog .tenant-login-error {
  margin:10px 0 0;
  font-size:14px;
  line-height:1.7;
  color:#b3261e
}
.tenant-login-recent-block {
  margin-top:20px;
  padding-top:16px;
  border-top:1px solid var(--line)
}
.tenant-login-dialog .tenant-login-recent-title {
  margin:0 0 8px;
  font-size:13px;
  line-height:1.6;
  color:var(--muted)
}
.tenant-login-recent {
  margin:0;
  padding:0;
  list-style:none;
  border:1px solid var(--line);
  border-radius:5px
}
.tenant-login-recent li {
  display:flex;
  align-items:center
}
.tenant-login-recent li + li {
  border-top:1px solid var(--line)
}
.tenant-login-recent-link {
  flex:1;
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  padding:11px 12px;
  font-size:15px;
  color:var(--ink);
  text-decoration:none;
  overflow-wrap:anywhere
}
.tenant-login-recent-link:hover {
  background:var(--paper)
}
.tenant-login-recent-arrow {
  flex:none;
  display:inline-grid;
  place-items:center;
  width:20px;
  height:20px;
  border-radius:50%;
  background:var(--ink);
  color:#fff;
  font-size:14px;
  line-height:1
}
.tenant-login-remove {
  width:36px;
  height:36px;
  margin-right:4px;
  font-size:18px
}
.tenant-login-close:focus-visible,.tenant-login-remove:focus-visible,.tenant-login-recent-link:focus-visible {
  outline:3px solid var(--focus,#35669d);
  outline-offset:-3px
}
@media(max-width:640px) {
  .tenant-login-body {
    padding:22px 20px 24px
  }
  /* 狭い画面では入力欄を 1 行に取り、前後の綴りとボタンは次の行へ */
  .tenant-login-row input {
    flex-basis:100%;
    order:-1
  }
  .tenant-login-row .tenant-login-affix {
    display:none
  }
  .tenant-login-dialog .tenant-login-submit {
    width:100%;
    justify-content:center
  }
}