/**
 * 準備中モードの案内
 *
 * 本文の代わりに出る箱。開いた人が「無い」ではなく
 * 「まだ」と受け取れるように、日時を目立たせる。
 */

.convention-comingsoon {
	margin: 2rem 0;
	padding: clamp(1.5rem, 5vw, 2.5rem);
	border: 1px solid var(--convention-color-border);
	border-radius: var(--convention-radius);
	background: var(--convention-color-sunk);
	text-align: center;
}

.convention-comingsoon__lead {
	margin: 0 0 .75rem;
	font-size: 1.25rem;
	font-weight: 700;
}

.convention-comingsoon__text {
	margin: 0 0 1.25rem;
	color: var(--convention-color-muted);
}

/* 日時はいちばん知りたいこと。白く抜いて浮かせる。 */
.convention-comingsoon__when {
	display: inline-block;
	margin: 0 0 1.5rem;
	padding: .4em 1.2em;
	border: 1px solid var(--convention-color-border);
	border-radius: var(--convention-radius);
	background: var(--convention-color-surface);
	font-weight: 700;
}

.convention-comingsoon__back {
	margin: 0;
}

/* ==========================================================================
   編集できる人にだけ出る帯

   点線にして、閲覧者に出るものではないと分かるようにする。
   資料一覧表の「時刻を指定した確認」と同じ見せ方。
   ========================================================================== */

.convention-comingsoon-bar {
	margin: 0 0 1.5rem;
	padding: .75em 1em;
	border: 1px dashed var(--convention-color-border);
	border-radius: var(--convention-radius);
	background: var(--convention-color-sunk);
	font-size: .875rem;
	line-height: 1.7;
}

.convention-comingsoon-bar p {
	margin: 0;
}

.convention-comingsoon-bar p + p {
	margin-top: .35em;
	color: var(--convention-color-muted);
}