/**
 * TOGA 除去可能物質サーチ — フロント側スタイル
 *
 * 色はカスタムプロパティにしてあるので、テーマ側で
 * .tss-search { --tss-accent: #0b6; } のように上書きできる。
 */

.tss-search {
	--tss-accent: #1a6fb4;
	--tss-accent-soft: #e8f2fb;
	--tss-border: #d5dae0;
	--tss-text: #1f2933;
	--tss-muted: #6b7684;
	--tss-bg: #fff;
	--tss-radius: 8px;

	/* 幅と余白はここを上書きすれば調整できる
	   例）.tss-search { --tss-max-width: 800px; --tss-space-bottom: 3em; } */
	--tss-max-width: 680px;
	--tss-space-top: 0;      /* 上は0。直前の段落の下マージンと重なって空きすぎるため */
	--tss-space-bottom: 2.5em;

	position: relative;
	width: 100%;
	max-width: var(--tss-max-width);
	margin-top: var(--tss-space-top);
	margin-bottom: var(--tss-space-bottom);
	margin-left: auto;   /* 左右autoで中央寄せ */
	margin-right: auto;
	padding-left: 16px;  /* 画面幅いっぱいのときに端へ張り付かないように */
	padding-right: 16px;
	color: var(--tss-text);
	font-size: 16px;
	line-height: 1.6;
	text-align: left;
}

/* 左寄せにしたい場合は align="left" */
.tss-search.tss-search--left {
	margin-left: 0;
	margin-right: auto;
}

.tss-search,
.tss-search *,
.tss-search *::before,
.tss-search *::after {
	box-sizing: border-box;
}

.tss-heading {
	margin: 0 0 .4em;
	font-size: 1.05em;
	font-weight: 700;
}

.tss-lead {
	margin: 0 0 .7em;
	color: var(--tss-muted);
	font-size: .9em;
}

/* --- 入力欄 ------------------------------------------------------- */

.tss-field {
	position: relative;
	display: flex;
	align-items: center;
}

.tss-field__icon {
	position: absolute;
	left: 12px;
	display: flex;
	color: var(--tss-muted);
	pointer-events: none;
}

.tss-search .tss-input {
	width: 100%;
	padding: 12px 44px 12px 38px;
	border: 1px solid var(--tss-border);
	border-radius: var(--tss-radius);
	background: var(--tss-bg);
	color: inherit;
	font-size: 16px; /* iOSで自動ズームさせないため16px以上 */
	line-height: 1.4;
	box-shadow: none;
	appearance: none;
}

.tss-search .tss-input:focus {
	border-color: var(--tss-accent);
	outline: 2px solid transparent;
	box-shadow: 0 0 0 3px rgba(26, 111, 180, .18);
}

.tss-search .tss-clear {
	position: absolute;
	right: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--tss-muted);
	cursor: pointer;
}

.tss-search .tss-clear[hidden] {
	display: none;
}

.tss-search .tss-clear:hover {
	background: #f0f2f5;
	color: var(--tss-text);
}

/* --- 件数表示 ----------------------------------------------------- */

.tss-bar {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1em;
	margin-top: .45em;
	min-height: 1.4em;
}

.tss-status {
	margin: 0;
	color: var(--tss-muted);
	font-size: .82em;
}

.tss-search .tss-showall {
	flex: none;
	padding: 0;
	border: 0;
	background: none;
	color: var(--tss-accent);
	font-size: .82em;
	text-decoration: underline;
	cursor: pointer;
}

/* --- 「除去可能」の表記 -------------------------------------------- */

.tss-notice {
	display: flex;
	align-items: flex-start;
	gap: .4em;
	margin: .55em 0 0;
	color: #1c6b3c;
	font-size: .84em;
	line-height: 1.5;
}

.tss-notice__mark {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.35em;
	height: 1.35em;
	margin-top: .05em;
	border-radius: 50%;
	background: #e3f5e9;
	color: #1c6b3c;
}

.tss-badge {
	display: inline-block;
	margin-right: .5em;
	padding: .1em .5em;
	border: 1px solid #b7e0c5;
	border-radius: 3px;
	background: #eef8f1;
	color: #1c6b3c;
	font-size: .72em;
	font-weight: 700;
	line-height: 1.6;
	vertical-align: 2px;
	white-space: nowrap;
}

.tss-confirmed {
	display: flex;
	align-items: center;
	gap: .45em;
	margin: 0 0 .9em;
	padding: .55em .8em;
	border-radius: 4px;
	background: #eef8f1;
	color: #1c6b3c;
	font-size: .88em;
	font-weight: 600;
	line-height: 1.5;
}

.tss-confirmed__mark {
	flex: none;
	font-size: 1.05em;
}

/* --- 候補リスト --------------------------------------------------- */

.tss-list {
	margin: .5em 0 0;
	padding: 0;
	max-height: 22em;
	overflow-y: auto;
	list-style: none;
	border: 1px solid var(--tss-border);
	border-radius: var(--tss-radius);
	background: var(--tss-bg);
	box-shadow: 0 6px 18px rgba(15, 23, 42, .08);
}

.tss-list.is-fuzzy {
	border-style: dashed;
}

.tss-search .tss-opt {
	display: block;
	margin: 0;
	padding: .6em .9em;
	border-bottom: 1px solid #eef1f4;
	cursor: pointer;
}

.tss-search .tss-opt:last-child {
	border-bottom: 0;
}

.tss-search .tss-opt.is-active,
.tss-search .tss-opt:hover {
	background: var(--tss-accent-soft);
}

.tss-opt__ja {
	display: inline;
	font-weight: 600;
	line-height: 1.4;
}

.tss-opt__en {
	display: block;
	color: var(--tss-muted);
	font-size: .85em;
}

.tss-opt__meta {
	display: block;
	margin-top: .15em;
	color: var(--tss-muted);
	font-size: .78em;
}

.tss-dot {
	margin: 0 .5em;
	opacity: .5;
}

.tss-search mark {
	padding: 0 .05em;
	background: #fff2a8;
	color: inherit;
	font-weight: inherit;
}

/* --- 詳細 --------------------------------------------------------- */

.tss-detail {
	margin-top: .8em;
	padding: 1em 1.1em;
	border: 1px solid var(--tss-border);
	border-left: 4px solid var(--tss-accent);
	border-radius: var(--tss-radius);
	background: var(--tss-bg);
}

.tss-detail__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1em;
	margin-bottom: .8em;
}

.tss-detail__ja {
	margin: 0;
	font-size: 1.15em;
	font-weight: 700;
	line-height: 1.35;
}

.tss-detail__en {
	margin: .1em 0 0;
	color: var(--tss-muted);
	font-size: .88em;
}

.tss-search .tss-detail__close,
.tss-search .tss-copy {
	flex: none;
	padding: .3em .8em;
	border: 1px solid var(--tss-border);
	border-radius: 4px;
	background: #fff;
	color: var(--tss-muted);
	font-size: .8em;
	cursor: pointer;
}

.tss-search .tss-detail__close:hover,
.tss-search .tss-copy:hover {
	border-color: var(--tss-accent);
	color: var(--tss-accent);
}

.tss-detail__grid {
	margin: 0;
	padding: 0;
	border-top: 1px solid #eef1f4;
}

.tss-detail__row {
	display: grid;
	grid-template-columns: 9em 1fr;
	gap: .6em;
	padding: .5em 0;
	border-bottom: 1px solid #eef1f4;
}

.tss-detail__row dt {
	margin: 0;
	color: var(--tss-muted);
	font-size: .85em;
	font-weight: 600;
}

.tss-detail__row dd {
	margin: 0;
	word-break: break-word;
}

.tss-detail__foot {
	margin-top: .8em;
	text-align: right;
}

.tss-noscript {
	margin: .6em 0 0;
	color: var(--tss-muted);
	font-size: .85em;
}

/* --- 全件テーブル（show_all="yes"） -------------------------------- */

.tss-table-wrap {
	max-width: 100%;
	margin: 0 auto 2.5em;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.tss-table__caption {
	margin-bottom: .5em;
	color: #1c6b3c;
	font-size: .85em;
	text-align: left;
}

.tss-table {
	width: 100%;
	border-collapse: collapse;
	font-size: .88em;
}

.tss-table th,
.tss-table td {
	padding: .5em .7em;
	border: 1px solid #e3e7eb;
	text-align: left;
	vertical-align: top;
	white-space: nowrap;
}

.tss-table thead th {
	background: #f5f7f9;
	font-weight: 700;
	white-space: nowrap;
}

.tss-table tbody th {
	font-weight: 600;
	white-space: normal;
}

/* --- スマホ ------------------------------------------------------- */

@media (max-width: 600px) {
	.tss-search {
		--tss-space-bottom: 1.8em;
	}

	.tss-detail__row {
		grid-template-columns: 1fr;
		gap: .1em;
	}

	.tss-list {
		max-height: 18em;
	}
}

/* --- ブロックエディター内 ----------------------------------------- */

.tss-editor-note {
	margin: .5em 0 0;
	color: #6b7684;
	font-size: 12px;
}