/**
 * プラグイン側のCSS（docs/20.1）
 *
 * **ここに置くのは「機能が成立するために必要なもの」だけ。**
 * 色・余白・タイポグラフィ・カードの見た目はテーマの担当。
 *
 * 色は変数にしてあり、テーマが :root で再定義すればそのまま反映される。
 * テーマが何も定義しない場合のフォールバック値だけを持つ。
 */

:root {
	--mjm-line: var(--line, #DCE3E9);
	--mjm-bg: var(--bg, #F4F7F9);
	--mjm-txt: var(--txt, #1B2733);
	--mjm-muted: var(--muted, #5A6B7B);
	--mjm-accent: var(--navy, #16324F);
}

/* ------------------------------------------------------------------ トースト
 * 追加・削除の結果を知らせる。画面のどこにいても見えるよう固定表示する。
 */
.mjm-toast {
	position: fixed;
	left: 50%;
	bottom: 24px;
	transform: translateX(-50%);
	background: var(--mjm-accent);
	color: #fff;
	padding: 11px 20px;
	border-radius: 8px;
	font-size: 13.5px;
	z-index: 999;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s;
}

.mjm-toast.is-on {
	opacity: 1;
}

/* ------------------------------------------------------------- 表の横スクロール
 * 表は min-width を持つため狭い画面では必ずはみ出すが、
 * 画面内に収まって見えるとスクロールできることに気づけない。
 * 左右端の影で「まだ続きがある」ことを示す。
 * background-attachment: local を使うと、スクロール位置に応じて
 * 影が自動的に消える（JavaScript不要）。
 */
.tscroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	background:
		linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0)) left center,
		linear-gradient(to left, #fff 30%, rgba(255, 255, 255, 0)) right center,
		radial-gradient(farthest-side at 0 50%, rgba(16, 40, 64, .16), rgba(16, 40, 64, 0)) left center,
		radial-gradient(farthest-side at 100% 50%, rgba(16, 40, 64, .16), rgba(16, 40, 64, 0)) right center;
	background-repeat: no-repeat;
	background-size: 44px 100%, 44px 100%, 15px 100%, 15px 100%;
	background-attachment: local, local, scroll, scroll;
}

/* 狭い画面では、影に加えて文言でも示す */
@media (max-width: 900px) {
	.tw::before {
		content: "← 横にスクロールできます →";
		display: block;
		text-align: center;
		font-size: 11.5px;
		color: var(--mjm-muted);
		padding: 7px 12px;
		background: var(--mjm-bg);
		border-bottom: 1px solid var(--mjm-line);
	}
}

/* -------------------------------------------------------------- 絞り込みの無効化
 * 0件になる選択肢を押せなくする。押しても結果が変わらない選択肢を残さない。
 */
.mjm-filters label.off {
	opacity: .45;
}

.mjm-filters label.off input {
	cursor: not-allowed;
}

/* --------------------------------------------------------------- 診断の進捗バー */
.mjm-bar {
	height: 4px;
	background: var(--mjm-line);
	border-radius: 2px;
	overflow: hidden;
}

.mjm-bar span {
	display: block;
	height: 100%;
	width: 0;
	background: var(--mjm-accent);
	transition: width .25s;
}

/* 開始前は進捗と質問を隠しておく（ボタンを押してから読み込むため） */
.mjm-diagnosis:not([data-mjm-ready]) .mjm-prog {
	display: none;
}

.mjm-diagnosis[data-mjm-ready="1"] .mjm-prog {
	display: block;
}

/* ------------------------------------------------------------- 読み上げ専用の文字
 * 画面には出さないが、読み上げには残す文言。
 * テーマにも同じ定義があるが、テーマ無しでも成立させるため持っておく
 * （display:none にすると読み上げからも消えるので使わない）。
 */
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------------------------- 共通の状態 */
[hidden] {
	display: none !important;
}

.mjm-empty,
.mjm-note {
	color: var(--mjm-muted);
	font-size: 13px;
}