/* Nettoge Find Box — 記事の中の表を探す窓。
 * 色・線・角はデザイン v2 のトークン（tokens-nettoge.css の --ntg2-*）をそのまま使い、ライト／ダークはサイト側の切り替えに任せる。
 * フォールバックはトークンが無い環境（手元のプレビュー）用 */
.ntg-find {
	--fb-surface: var(--ntg2-surface, #fff);
	--fb-paper: var(--ntg2-paper-2, #f6f4f1);
	--fb-text: var(--ntg2-text, #2a2622);
	--fb-sub: var(--ntg2-sub, #5f5953);
	--fb-muted: var(--ntg2-muted, #8a847d);
	--fb-line: var(--ntg2-line, #e3e0dc);
	--fb-accent: var(--ntg2-teal, #2f7a72);
	--fb-accent-bg: var(--ntg2-teal-bg, rgba(47, 122, 114, .1));
	--fb-radius: var(--ntg2-radius, 6px);
	--fb-radius-sm: var(--ntg2-radius-sm, 4px);
	background: var(--fb-surface);
	border: 1px solid var(--fb-line);
	border-radius: var(--fb-radius);
	color: var(--fb-text);
	margin: 1.2em 0 1.6em;
	padding: .9em 1em 1em;
}

.ntg-find__label {
	display: block;
	font-weight: 700;
	margin: 0 0 .4em;
}

.ntg-find__input {
	appearance: none;
	background: var(--fb-paper);
	border: 1px solid var(--fb-line);
	border-radius: var(--fb-radius-sm);
	box-sizing: border-box;
	color: var(--fb-text);
	font: inherit;
	font-size: 16px; /* iOS で拡大されない大きさ */
	padding: .55em .75em;
	width: 100%;
}

.ntg-find__input:focus {
	border-color: var(--fb-accent);
	outline: 2px solid var(--fb-accent-bg);
	outline-offset: 0;
}

.ntg-find__examples {
	display: flex;
	flex-wrap: wrap;
	gap: .35em;
	margin: .6em 0 0;
	font-size: .88em;
}

.ntg-find__examples-label {
	color: var(--fb-muted);
	align-self: center;
}

.ntg-find__chip {
	background: var(--fb-paper);
	border: 1px solid var(--fb-line);
	border-radius: 999px;
	color: var(--fb-sub);
	cursor: pointer;
	font: inherit;
	line-height: 1.4;
	padding: .15em .7em;
}

.ntg-find__chip:hover,
.ntg-find__chip:focus-visible {
	border-color: var(--fb-accent);
	color: var(--fb-accent);
}

.ntg-find__status {
	color: var(--fb-muted);
	font-size: .88em;
	margin: .6em 0 0;
}

.ntg-find__status:empty {
	display: none;
}

.post_content .ntg-find__list,
.ntg-find__list {
	list-style: none;
	margin: .5em 0 0;
	max-height: 26em;
	overflow-y: auto;
	padding: 0;
}

.post_content .ntg-find__item,
.ntg-find__item {
	border-top: 1px solid var(--fb-line);
	margin: 0;
	padding: 0;
}

.ntg-find__item::before {
	content: none !important;
}

.ntg-find__link {
	color: inherit !important;
	display: block;
	padding: .5em .25em;
	text-decoration: none !important;
}

.ntg-find__link:hover,
.ntg-find__link:focus-visible {
	background: var(--fb-accent-bg);
}

.ntg-find__section {
	color: var(--fb-muted);
	display: block;
	font-size: .8em;
}

.ntg-find__head {
	font-weight: 700;
}

.ntg-find__rest {
	color: var(--fb-sub);
	display: block;
	font-size: .9em;
}

/* 選んだ行を少しの間だけ目立たせる */
@keyframes ntg-find-hit {
	from { background-color: var(--fb-accent-bg, rgba(47, 122, 114, .18)); }
	to { background-color: transparent; }
}

tr.is-ntg-find-hit > td,
tr.is-ntg-find-hit > th {
	animation: ntg-find-hit 2.4s ease-out;
	box-shadow: inset 3px 0 0 var(--ntg2-teal, #2f7a72);
}

tr[id^="ntg-find-"] {
	scroll-margin-top: calc(var(--ntg2-header-h, 64px) + 16px);
}