/**
 * パスワード入力フォーム
 *
 * 保護されたページを開いたときだけ読み込まれる。
 * 色や角丸は style.css のトークンを使い、ここでは値を直書きしない。
 */

.convention-protect {
	max-width: var(--convention-text-width);
	margin-block: 2rem;
	padding: clamp(1.25rem, 4vw, 2rem);
	border: 1px solid var(--convention-color-border);
	border-radius: var(--convention-radius);
	background: var(--convention-color-surface);
	box-shadow: var(--convention-shadow);
}

.convention-protect__title {
	margin: 0 0 .75rem;
	font-size: 1.125rem;
}

.convention-protect__lead {
	margin: 0 0 1rem;
}

.convention-protect__error {
	margin: 0 0 1rem;
	padding: .625rem .875rem;
	border-left: 4px solid #c0392b;
	border-radius: var(--convention-radius);
	background: #fdf2f1;
	color: #8c2b21;
}

.convention-protect__label {
	display: block;
	margin-bottom: .375rem;
	font-weight: 700;
}

/* 狭い画面では入力欄とボタンを縦に積む。横に並べたままだと
   入力欄が潰れ、12 文字のパスワードが最後まで見えなくなる。 */
.convention-protect__row {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

.convention-protect__input {
	flex: 1 1 14rem;
	min-width: 0;
	padding: .5rem .75rem;
	border: 1px solid var(--convention-color-border);
	border-radius: var(--convention-radius);
	background: #fff;
	color: var(--convention-color-text);
	/* iOS は 16px 未満の入力欄でフォーカス時に自動でズームする */
	font-size: 1rem;
	font-family: var(--convention-font);
}

.convention-protect__input:focus {
	outline: 2px solid var(--convention-color-accent);
	outline-offset: 1px;
}

.convention-protect__submit {
	flex: 0 0 auto;
	padding: .5rem 1.5rem;
	border: 0;
	border-radius: var(--convention-radius);
	background: var(--convention-color-accent);
	color: #fff;
	font-size: 1rem;
	font-family: var(--convention-font);
	cursor: pointer;
}

.convention-protect__submit:hover,
.convention-protect__submit:focus {
	background: var(--convention-color-accent-dark);
	/* ホバーで文字色が背景に溶けないよう、明示的に指定する */
	color: #fff;
}

.convention-protect__note {
	margin: 1rem 0 0;
	color: var(--convention-color-muted);
	font-size: .875rem;
}

@media (max-width: 400px) {
	.convention-protect__submit {
		flex: 1 1 100%;
	}
}