/* ログイン画面（＝未ログインでELAを開いたときの玄関）。
 *
 * `/` は未ログインだと `/login` にリダイレクトするので、**初めて来た人が
 * 最初に見るのがこの画面**になる。ところが会員登録は最下部の小さなテキスト
 * リンクだったため、ユーザーテスト第1回では**3人中3人**が登録にたどり着けず、
 * 1人は助けが必要だった（#149）。
 *
 * そこで「はじめての方」と「登録済みの方」を上下で分ける。
 * さらに、登録ではパスワードを作らない（メールのリンクで入る）ので、
 * パスワード欄が最初に目に入ると「作った覚えがない」と手が止まる（#150）。
 * メールリンクを主、パスワードを折りたたみの従に置く。
 */

.login-page {
  max-width: 420px;
  margin: 3rem auto;
}

/* ===== はじめての方 ===== */

.login-new {
  background: #fef2f2;
  border: 1px solid #f3c9c6;
  border-radius: 12px;
  padding: 1.25rem 1.25rem 1.1rem;
}

.login-new h3,
.login-known h3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 0.75rem;
}

/* 登録は「押すもの」だと一目で分かるように、リンクではなくボタンの見た目にする */
.login-register-btn {
  display: block;
  width: 100%;
  padding: 0.8rem 1rem;
  border-radius: 8px;
  background: var(--primary);
  color: #ffffff;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  transition: opacity 0.2s;
}
.login-register-btn:hover { opacity: 0.88; }
.login-register-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ===== 区切り ===== */

.login-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.75rem 0 1.25rem;
  color: #9ca3af;
  font-size: 0.8rem;
}
.login-divider::before,
.login-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #e5e7eb;
}

/* ===== 登録済みの方 ===== */

.login-known {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 1.25rem;
}

.login-note {
  margin: 0.4rem 0 0;
  font-size: 0.78rem;
  line-height: 1.6;
  color: #6b7280;
}

/* パスワードは「設定済みの人だけが開く」従の入口。閉じたまま置く。
   ただし入力を間違えたときは開いた状態で返す（テンプレート側で open を付ける）。 */
.login-password {
  margin-top: 1.25rem;
  border-top: 1px solid #e5e7eb;
  padding-top: 0.9rem;
}
.login-password > summary {
  cursor: pointer;
  font-size: 0.85rem;
  color: #4b5563;
  list-style: none;
}
.login-password > summary::-webkit-details-marker { display: none; }
/* Pico が summary の右端に付ける chevron。自前の ▸ と二重になるので消す */
.login-password > summary::after { display: none; }
.login-password > summary::before {
  content: "▸ ";
  color: #9ca3af;
}
.login-password[open] > summary::before { content: "▾ "; }
.login-password > summary:hover { color: #1f2937; }
.login-password > summary:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}
.login-password form { margin-top: 0.9rem; }

.login-forgot {
  display: block;
  margin-top: 0.5rem;
  text-align: right;
  font-size: 0.78rem;
  color: #6b7280;
}

/* ===== エラー ===== */

.login-error {
  background: #fef2f2;
  border: 1px solid #fca5a5;
  color: #991b1b;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
}

/* 「登録＝塗り」「ログイン＝枠線」で、同じ赤の中に主従を付ける。
   Pico既定の青はELAの配色（赤）から浮くので、この画面では使わない。 */
.login-magic-btn {
  width: 100%;
  background: #ffffff;
  color: var(--primary);
  border: 1.5px solid var(--primary);
}
.login-magic-btn:hover {
  background: #fef2f2;
  color: var(--primary);
  border-color: var(--primary);
}